{"_id":"@aiforus/vue-renderer","_rev":"4-211ff9e7a39915574d510b4be5ea5841","name":"@aiforus/vue-renderer","dist-tags":{"latest":"0.1.0","alpha":"0.1.0-alpha.1"},"versions":{"0.1.0-alpha.0":{"name":"@aiforus/vue-renderer","version":"0.1.0-alpha.0","license":"MIT","_id":"@aiforus/vue-renderer@0.1.0-alpha.0","maintainers":[{"name":"maozain","email":"391052034@qq.com"}],"homepage":"https://github.com/MaoZain/aiforus-core#readme","bugs":{"url":"https://github.com/MaoZain/aiforus-core/issues"},"dist":{"shasum":"ecb8489ac29887886fb49fcb163388f7b2401c57","tarball":"https://registry.npmjs.org/@aiforus/vue-renderer/-/vue-renderer-0.1.0-alpha.0.tgz","fileCount":49,"integrity":"sha512-bayVMOwjlSNFC7Ob6QDai+KHVc87yso8Io1HNK2/QAfyT5G/sTUBjwRICcVIg6B24HkJZkYYzWT44Ydnwm6EUA==","signatures":[{"sig":"MEQCIC6qmqWBX9R22MlerTVKUXtPiYgVdx0i7kM8DIAj99iBAiBGV98K05SWHsXl37RO080/PQ6YNZLal+W+wFJrVzoq6g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":123975},"main":"./dist/index.js","type":"module","_from":"file:.artifacts/aiforus-vue-renderer-0.1.0-alpha.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=22.14.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/style.css"},"scripts":{"dev":"vite build --watch","test":"vitest run","build":"pnpm --filter @aiforus/dsl build && pnpm clean && vite build && vue-tsc -p tsconfig.json --emitDeclarationOnly","clean":"node scripts/clean.mjs","gallery":"vite --config gallery/vite.config.ts","typecheck":"pnpm --filter @aiforus/dsl build && vue-tsc -p tsconfig.json --noEmit","test:watch":"vitest"},"_npmUser":{"name":"maozain","email":"391052034@qq.com"},"_resolved":"/Users/maozain/projects/aiforus-core/.artifacts/aiforus-vue-renderer-0.1.0-alpha.0.tgz","_integrity":"sha512-bayVMOwjlSNFC7Ob6QDai+KHVc87yso8Io1HNK2/QAfyT5G/sTUBjwRICcVIg6B24HkJZkYYzWT44Ydnwm6EUA==","repository":{"url":"git+https://github.com/MaoZain/aiforus-core.git","type":"git","directory":"packages/aiforus-vue-renderer"},"_npmVersion":"10.9.2","description":"Vue 3 slide renderer and action player for the AIForUs OpenMAIC-compatible DSL.","directories":{},"sideEffects":["./dist/style.css"],"_nodeVersion":"22.16.0","dependencies":{"@aiforus/dsl":"^0.1.0-alpha.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"vue":"3.4.30","jsdom":"29.1.1","vue-tsc":"3.3.7","@vue/test-utils":"2.4.11","@vue/compiler-sfc":"3.4.30","@vue/server-renderer":"3.4.30"},"peerDependencies":{"vue":">=3.4.0 <4"},"_npmOperationalInternal":{"tmp":"tmp/vue-renderer_0.1.0-alpha.0_1784138811763_0.18257120431582496","host":"s3://npm-registry-packages-npm-production"}},"0.1.0-alpha.1":{"name":"@aiforus/vue-renderer","version":"0.1.0-alpha.1","license":"MIT","_id":"@aiforus/vue-renderer@0.1.0-alpha.1","maintainers":[{"name":"maozain","email":"391052034@qq.com"}],"homepage":"https://github.com/MaoZain/aiforus-core#readme","bugs":{"url":"https://github.com/MaoZain/aiforus-core/issues"},"dist":{"shasum":"e5288d0eedbc875b328889e6d98f84c06faaf0cf","tarball":"https://registry.npmjs.org/@aiforus/vue-renderer/-/vue-renderer-0.1.0-alpha.1.tgz","fileCount":49,"integrity":"sha512-E8dxkB2KfkCfp6+JzbGExIcErbeQ2qlUuZvf3A7Yb7eMsRkEpwlP8DB+2xYZos2e2/dQTvF3l0hIiHK0qWTUsA==","signatures":[{"sig":"MEUCIGQyfiEV4uptUyP4SRrZmkeurA2gFfwJhqWyiNghSmklAiEA0Ia3fNdfgwJDZYNolixe9He5yQOMLPuVsNPOI1zDi6c=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aiforus%2fvue-renderer@0.1.0-alpha.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":123975},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=22.14.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/style.css"},"scripts":{"dev":"vite build --watch","test":"vitest run","build":"pnpm --filter @aiforus/dsl build && pnpm clean && vite build && vue-tsc -p tsconfig.json --emitDeclarationOnly","clean":"node scripts/clean.mjs","gallery":"vite --config gallery/vite.config.ts","typecheck":"pnpm --filter @aiforus/dsl build && vue-tsc -p tsconfig.json --noEmit","test:watch":"vitest"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:97873fc5-f69c-4fb2-bec7-ea5982d5753e"}},"repository":{"url":"git+https://github.com/MaoZain/aiforus-core.git","type":"git","directory":"packages/aiforus-vue-renderer"},"description":"Vue 3 slide renderer and action player for the AIForUs OpenMAIC-compatible DSL.","directories":{},"sideEffects":["./dist/style.css"],"_nodeVersion":"22.16.0","dependencies":{"@aiforus/dsl":"^0.1.0-alpha.1"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"vue":"3.4.30","jsdom":"29.1.1","vue-tsc":"3.3.7","@vue/test-utils":"2.4.11","@vue/compiler-sfc":"3.4.30","@vue/server-renderer":"3.4.30"},"peerDependencies":{"vue":">=3.4.0 <4"},"_npmOperationalInternal":{"tmp":"tmp/vue-renderer_0.1.0-alpha.1_1784164686255_0.6953654497137105","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@aiforus/vue-renderer","version":"0.1.0","description":"Vue 3 slide renderer and action player for the AIForUs OpenMAIC-compatible DSL.","license":"MIT","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/style.css"},"sideEffects":["./dist/style.css"],"engines":{"node":">=22.14.0"},"repository":{"type":"git","url":"git+https://github.com/MaoZain/aiforus-core.git","directory":"packages/aiforus-vue-renderer"},"homepage":"https://github.com/MaoZain/aiforus-core#readme","bugs":{"url":"https://github.com/MaoZain/aiforus-core/issues"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"dependencies":{"@aiforus/dsl":"^0.1.0"},"peerDependencies":{"vue":">=3.4.0 <4"},"devDependencies":{"@vue/compiler-sfc":"3.4.30","@vue/server-renderer":"3.4.30","@vue/test-utils":"2.4.11","jsdom":"29.1.1","vue":"3.4.30","vue-tsc":"3.3.7"},"scripts":{"clean":"node scripts/clean.mjs","build":"pnpm --filter @aiforus/dsl build && pnpm clean && vite build && vue-tsc -p tsconfig.json --emitDeclarationOnly","dev":"vite build --watch","gallery":"vite --config gallery/vite.config.ts","test":"vitest run","test:watch":"vitest","typecheck":"pnpm --filter @aiforus/dsl build && vue-tsc -p tsconfig.json --noEmit"},"_id":"@aiforus/vue-renderer@0.1.0","_integrity":"sha512-mm64qPeP+DcoNlns0LYtUnK3+YIEHd6snAIpUJQLMYVl+ZsfKc++I1jOWpYmG8TgIFN57Aa2F4v9a1Z+jSAA4g==","_resolved":"/home/runner/work/aiforus-core/aiforus-core/.artifacts/aiforus-vue-renderer-0.1.0.tgz","_from":"file:/home/runner/work/aiforus-core/aiforus-core/.artifacts/aiforus-vue-renderer-0.1.0.tgz","_nodeVersion":"22.16.0","_npmVersion":"11.18.0","dist":{"integrity":"sha512-mm64qPeP+DcoNlns0LYtUnK3+YIEHd6snAIpUJQLMYVl+ZsfKc++I1jOWpYmG8TgIFN57Aa2F4v9a1Z+jSAA4g==","shasum":"8f455eb5d58bbed8d89dfe70870b91fe3b6949cd","tarball":"https://registry.npmjs.org/@aiforus/vue-renderer/-/vue-renderer-0.1.0.tgz","fileCount":49,"unpackedSize":123959,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aiforus%2fvue-renderer@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDRcHxjCMSXG3OqyRxTqDhQZmEoyyQDTHJb9tXo2nkBGAIhAMcBwMMdTSJE7L/xqqenqj2tbNTBJiS3xSAJSc9SOU9Z"}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:97873fc5-f69c-4fb2-bec7-ea5982d5753e"}},"directories":{},"maintainers":[{"name":"maozain","email":"391052034@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-renderer_0.1.0_1784390341456_0.6106408920040347"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-15T18:06:51.648Z","modified":"2026-07-18T15:59:01.933Z","0.1.0-alpha.0":"2026-07-15T18:06:51.902Z","0.1.0-alpha.1":"2026-07-16T01:18:06.614Z","0.1.0":"2026-07-18T15:59:01.607Z"},"bugs":{"url":"https://github.com/MaoZain/aiforus-core/issues"},"license":"MIT","homepage":"https://github.com/MaoZain/aiforus-core#readme","repository":{"type":"git","url":"git+https://github.com/MaoZain/aiforus-core.git","directory":"packages/aiforus-vue-renderer"},"description":"Vue 3 slide renderer and action player for the AIForUs OpenMAIC-compatible DSL.","maintainers":[{"name":"maozain","email":"391052034@qq.com"}],"readme":"# @aiforus/vue-renderer\n\nVue 3 renderer and action player for the AIForUs OpenMAIC-compatible Slide\nDSL. The serialized input is owned by `@aiforus/dsl`; this package is only the\nvisual/playback layer.\n\nCompatibility is frozen to OpenMAIC commit\n`d8a0081c7d229081301dfa5f21ccfd7ba93bda51`. It targets the observable Slide\nJSON and playback behavior, not the React component API of\n`@openmaic/renderer`.\n\n## Install\n\nUse Node `22.16.0` and Vue `>=3.4.0 <4`:\n\n```sh\npnpm add @aiforus/dsl @aiforus/vue-renderer\n```\n\n```ts\nimport { SlideCanvas } from '@aiforus/vue-renderer';\nimport '@aiforus/vue-renderer/style.css';\n```\n\n## Render a slide\n\n```vue\n<script setup lang=\"ts\">\nimport type { Slide } from '@aiforus/dsl';\nimport { ref } from 'vue';\nimport { SlideCanvas, type LayoutDiagnostic } from '@aiforus/vue-renderer';\nimport '@aiforus/vue-renderer/style.css';\n\ndefineProps<{ slide: Slide }>();\nconst diagnostics = ref<LayoutDiagnostic[]>([]);\n</script>\n\n<template>\n  <div class=\"slide-host\">\n    <SlideCanvas\n      :slide=\"slide\"\n      :auto-fit-text=\"true\"\n      :min-text-scale=\"0.65\"\n      @layout-diagnostics=\"diagnostics = $event\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.slide-host {\n  width: 100%;\n  aspect-ratio: 16 / 9;\n}\n</style>\n```\n\nThe canvas uses the slide's fixed design coordinate system and scales the\nentire viewport to fit its host. Element rendering and teacher effects resolve\nthe same stable `element.id`, so spotlight, laser, highlight, and zoom do not\ndepend on a second DOM-coordinate calculation.\n\n## Playback adapters\n\n`SlidePlayer` executes spotlight and laser itself. Speech, media, whiteboard,\ndiscussion, and widget actions cross explicit host adapters and are never\nsilently ignored:\n\n```ts\nimport { createSpeechAdapter, SlideActionPlayer } from '@aiforus/vue-renderer';\n\nconst player = new SlideActionPlayer({\n  slide,\n  speechAdapter: createSpeechAdapter(async (action, { signal }) => {\n    await tts.play(action.text, { signal });\n  }),\n  mediaAdapter: {\n    async playVideo(action) {\n      await media.play(action.elementId);\n    },\n  },\n  async hostActionExecutor(action, context) {\n    await coursewareHost.execute(action, context);\n  },\n});\n\nawait player.play(actions);\n```\n\n`validateSlideActionReferences(slide, actions)` can reject missing Slide\nelement IDs before playback begins.\n\n## Layout and snapshots\n\n- Text and shape HTML auto-fit down to a configurable readability floor.\n- Code lines wrap inside their design box.\n- `inspectSlideLayout()` and the `layout-diagnostics` event report residual\n  overflow and missing effect targets.\n- `slideToPng()` and `captureSlideElementAsPng()` provide browser-side PNG\n  capture without a snapshot runtime dependency.\n\nPNG capture uses browser SVG `foreignObject`. Cross-origin images or\nstylesheets still need normal CORS permission; use data URLs or same-origin\nassets for deterministic export.\n\n## Extension boundaries\n\nCustom element components can be supplied with `registry`. Image, video,\naudio, and code rendering can also be replaced through component slots.\n\nThis package accepts only `Slide`. Quiz and Deep Interactive are independent\ncontent modes and deliberately remain outside this package.\n\nSee the repository\n[`docs/renderer-compatibility.md`](https://github.com/MaoZain/aiforus-core/blob/main/docs/renderer-compatibility.md)\nfor the frozen parity matrix and intentional differences.\n","readmeFilename":"README.md"}