@aicut/vue 0.4.1 → 0.4.3

package/README.md

@@ -79,6 +79,22 @@ interface VideoEditorProps {
 }
 ```
 
+## Slots
+
+Two named slots — `headerLeft` and `headerRight` — fill the optional header bar above the preview. Empty by default; the header collapses entirely when both are unused, so the default layout is identical to before they existed.
+
+```vue
+<VideoEditor :default-project="project">
+  <template #headerLeft>
+    <strong>Untitled project</strong>
+  </template>
+  <template #headerRight>
+    <button @click="share">Share</button>
+    <button @click="editor?.api()?.requestExport()">Export</button>
+  </template>
+</VideoEditor>
+```
+
 ## Events
 
 ```ts

package/dist/VideoEditor.vue.d.ts

@@ -10,7 +10,13 @@ type __VLS_Props = {
     /** UI string overrides (English default). Reactive — swap to `localeZh` for Chinese. */
     locale?: Partial<Locale>;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {
+declare var __VLS_5: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    headerLeft?: (props: typeof __VLS_5) => any;
+} & {
+    headerRight?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     /** Returns the underlying core API or null if not yet mounted. */
     api: () => EditorApi | null;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
@@ -32,5 +38,11 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
     onSelectionChange?: ((clipId: string | null) => any) | undefined;
     onError?: ((error: Error) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 //# sourceMappingURL=VideoEditor.vue.d.ts.map

package/dist/VideoEditor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoEditor.vue.d.ts","sourceRoot":"","sources":["../src/VideoEditor.vue"],"names":[],"mappings":"AA+FA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,MAAM,EAEX,KAAK,OAAO,EACZ,KAAK,KAAK,EACX,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,KAAK,WAAW,GAAG;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,wFAAwF;IACxF,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;CAC1B,CAAC;;IAiEA,kEAAkE;eACzD,SAAS,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;AAuC3B,wBAQG"}
+{"version":3,"file":"VideoEditor.vue.d.ts","sourceRoot":"","sources":["../src/VideoEditor.vue"],"names":[],"mappings":"AA+GA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,MAAM,EAEX,KAAK,OAAO,EACZ,KAAK,KAAK,EACX,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,KAAK,WAAW,GAAG;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,wFAAwF;IACxF,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;CAC1B,CAAC;AA2HF,QAAA,IAAI,OAAO,IAAU,EAAE,QAAQ,IAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC/C;IAAE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAwBpD,QAAA,MAAM,eAAe;IA5EnB,kEAAkE;eACzD,SAAS,GAAG,IAAI;;;;;;;;;;;;;;;;;;;kFAmFzB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),c=require("@aicut/core"),u=a.defineComponent({__name:"VideoEditor",props:{defaultProject:{},theme:{},locale:{}},emits:["ready","change","export","timeUpdate","play","pause","selectionChange","error"],setup(i,{expose:s,emit:p}){const l=i,n=p,r=a.ref(null);let e=null;const o=[];return a.onMounted(()=>{r.value&&(e=c.Editor.create({container:r.value,project:l.defaultProject,theme:l.theme,locale:l.locale}),o.push(e.on("change",({project:t})=>n("change",t)),e.on("export",({project:t})=>n("export",t)),e.on("time",({timeMs:t})=>n("timeUpdate",t)),e.on("play",()=>n("play")),e.on("pause",()=>n("pause")),e.on("selectionChange",({clipId:t})=>n("selectionChange",t)),e.on("error",({error:t})=>n("error",t))),n("ready",e))}),a.watch(()=>l.theme,t=>{t&&e&&e.setTheme(t)}),a.watch(()=>l.locale,t=>{t&&e&&e.setLocale(t)}),a.onBeforeUnmount(()=>{for(const t of o)t();o.length=0,e==null||e.destroy(),e=null}),s({api:()=>e}),(t,f)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"host",ref:r,"data-aicut-host":""},null,512))}}),d=a.defineComponent({__name:"Timeline",props:{defaultProject:{},defaultScale:{},defaultTime:{},defaultSelectedClipId:{},showHeader:{type:Boolean},readOnly:{type:Boolean},snap:{type:Boolean},autoFit:{type:Boolean},locale:{}},emits:["seek","selectClip","scaleChange","moveClip","resizeClip","change"],setup(i,{expose:s,emit:p}){const l=i,n=p,r=a.ref(null);let e=null;return a.onMounted(()=>{r.value&&(e=c.Timeline.create({container:r.value,project:l.defaultProject,pxPerSec:l.defaultScale,time:l.defaultTime,selectedClipId:l.defaultSelectedClipId??null,showHeader:l.showHeader,readOnly:l.readOnly,snap:l.snap,autoFit:l.autoFit,locale:l.locale,onSeek:o=>n("seek",o),onSelectClip:o=>n("selectClip",o),onScaleChange:o=>n("scaleChange",o),onMoveClip:(o,t)=>n("moveClip",o,t),onResizeClip:(o,t)=>n("resizeClip",o,t),onChange:o=>n("change",o)}))}),a.watch(()=>l.locale,o=>{o&&e&&e.setLocale(o)}),a.onBeforeUnmount(()=>{e==null||e.destroy(),e=null}),s({api:()=>e}),(o,t)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"host",ref:r,"data-aicut-timeline-host":"",style:{width:"100%",height:"240px"}},null,512))}});Object.defineProperty(exports,"createEmptyProject",{enumerable:!0,get:()=>c.createEmptyProject});Object.defineProperty(exports,"createId",{enumerable:!0,get:()=>c.createId});Object.defineProperty(exports,"localeEn",{enumerable:!0,get:()=>c.localeEn});Object.defineProperty(exports,"localeZh",{enumerable:!0,get:()=>c.localeZh});exports.Timeline=d;exports.VideoEditor=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),i=require("@aicut/core"),h=t.defineComponent({__name:"VideoEditor",props:{defaultProject:{},theme:{},locale:{}},emits:["ready","change","export","timeUpdate","play","pause","selectionChange","error"],setup(s,{expose:p,emit:d}){const a=s,n=d,c=t.ref(null);let e=null;const l=[],r=t.ref(null),u=t.ref(null);return t.onMounted(()=>{c.value&&(e=i.Editor.create({container:c.value,project:a.defaultProject,theme:a.theme,locale:a.locale}),l.push(e.on("change",({project:o})=>n("change",o)),e.on("export",({project:o})=>n("export",o)),e.on("time",({timeMs:o})=>n("timeUpdate",o)),e.on("play",()=>n("play")),e.on("pause",()=>n("pause")),e.on("selectionChange",({clipId:o})=>n("selectionChange",o)),e.on("error",({error:o})=>n("error",o))),r.value=e.headerLeft,u.value=e.headerRight,n("ready",e))}),t.watch(()=>a.theme,o=>{o&&e&&e.setTheme(o)}),t.watch(()=>a.locale,o=>{o&&e&&e.setLocale(o)}),t.onBeforeUnmount(()=>{for(const o of l)o();l.length=0,e==null||e.destroy(),e=null,r.value=null,u.value=null}),p({api:()=>e}),(o,m)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"host",ref:c,"data-aicut-host":""},[r.value?(t.openBlock(),t.createBlock(t.Teleport,{key:0,to:r.value},[t.renderSlot(o.$slots,"headerLeft")],8,["to"])):t.createCommentVNode("",!0),u.value?(t.openBlock(),t.createBlock(t.Teleport,{key:1,to:u.value},[t.renderSlot(o.$slots,"headerRight")],8,["to"])):t.createCommentVNode("",!0)],512))}}),f=t.defineComponent({__name:"Timeline",props:{defaultProject:{},defaultScale:{},defaultTime:{},defaultSelectedClipId:{},showHeader:{type:Boolean},readOnly:{type:Boolean},snap:{type:Boolean},autoFit:{type:Boolean},locale:{}},emits:["seek","selectClip","scaleChange","moveClip","resizeClip","change"],setup(s,{expose:p,emit:d}){const a=s,n=d,c=t.ref(null);let e=null;return t.onMounted(()=>{c.value&&(e=i.Timeline.create({container:c.value,project:a.defaultProject,pxPerSec:a.defaultScale,time:a.defaultTime,selectedClipId:a.defaultSelectedClipId??null,showHeader:a.showHeader,readOnly:a.readOnly,snap:a.snap,autoFit:a.autoFit,locale:a.locale,onSeek:l=>n("seek",l),onSelectClip:l=>n("selectClip",l),onScaleChange:l=>n("scaleChange",l),onMoveClip:(l,r)=>n("moveClip",l,r),onResizeClip:(l,r)=>n("resizeClip",l,r),onChange:l=>n("change",l)}))}),t.watch(()=>a.locale,l=>{l&&e&&e.setLocale(l)}),t.onBeforeUnmount(()=>{e==null||e.destroy(),e=null}),p({api:()=>e}),(l,r)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"host",ref:c,"data-aicut-timeline-host":"",style:{width:"100%",height:"240px"}},null,512))}});Object.defineProperty(exports,"createEmptyProject",{enumerable:!0,get:()=>i.createEmptyProject});Object.defineProperty(exports,"createId",{enumerable:!0,get:()=>i.createId});Object.defineProperty(exports,"localeEn",{enumerable:!0,get:()=>i.localeEn});Object.defineProperty(exports,"localeZh",{enumerable:!0,get:()=>i.localeZh});exports.Timeline=f;exports.VideoEditor=h;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/VideoEditor.vue","../src/Timeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport {\n  Editor,\n  type EditorApi,\n  type Locale,\n  type Ms,\n  type Project,\n  type Theme,\n} from \"@aicut/core\";\n\n/**\n * Vue 3 wrapper around `@aicut/core`. Same shape as `@aicut/react`:\n * uncontrolled for project state, theme is reactive, API exposed via\n * `defineExpose` so a parent `ref` can call cut/seek/setProject/etc.\n */\nconst props = defineProps<{\n  defaultProject?: Project;\n  theme?: Theme;\n  /** UI string overrides (English default). Reactive — swap to `localeZh` for Chinese. */\n  locale?: Partial<Locale>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"ready\", api: EditorApi): void;\n  (e: \"change\", project: Project): void;\n  (e: \"export\", project: Project): void;\n  (e: \"timeUpdate\", timeMs: Ms): void;\n  (e: \"play\"): void;\n  (e: \"pause\"): void;\n  (e: \"selectionChange\", clipId: string | null): void;\n  (e: \"error\", error: Error): void;\n}>();\n\nconst host = ref<HTMLDivElement | null>(null);\nlet editor: Editor | null = null;\nconst offs: Array<() => void> = [];\n\nonMounted(() => {\n  if (!host.value) return;\n  editor = Editor.create({\n    container: host.value,\n    project: props.defaultProject,\n    theme: props.theme,\n    locale: props.locale,\n  });\n\n  offs.push(\n    editor.on(\"change\", ({ project }) => emit(\"change\", project)),\n    editor.on(\"export\", ({ project }) => emit(\"export\", project)),\n    editor.on(\"time\", ({ timeMs }) => emit(\"timeUpdate\", timeMs)),\n    editor.on(\"play\", () => emit(\"play\")),\n    editor.on(\"pause\", () => emit(\"pause\")),\n    editor.on(\"selectionChange\", ({ clipId }) =>\n      emit(\"selectionChange\", clipId),\n    ),\n    editor.on(\"error\", ({ error }) => emit(\"error\", error)),\n  );\n\n  emit(\"ready\", editor);\n});\n\nwatch(\n  () => props.theme,\n  (theme) => {\n    if (theme && editor) editor.setTheme(theme);\n  },\n);\n\nwatch(\n  () => props.locale,\n  (locale) => {\n    if (locale && editor) editor.setLocale(locale);\n  },\n);\n\nonBeforeUnmount(() => {\n  for (const off of offs) off();\n  offs.length = 0;\n  editor?.destroy();\n  editor = null;\n});\n\ndefineExpose({\n  /** Returns the underlying core API or null if not yet mounted. */\n  api: (): EditorApi | null => editor,\n});\n</script>\n\n<template>\n  <div ref=\"host\" data-aicut-host=\"\" />\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport {\n  Timeline as CoreTimeline,\n  type Clip,\n  type Locale,\n  type Ms,\n  type Project,\n} from \"@aicut/core\";\n\n/**\n * Standalone canvas Timeline wrapped for Vue 3. Same surface as the\n * React `<Timeline>`: pass `defaultProject`, drive imperatively via\n * the exposed `api()` ref.\n */\nconst props = defineProps<{\n  defaultProject: Project;\n  defaultScale?: number;\n  defaultTime?: Ms;\n  defaultSelectedClipId?: string | null;\n  showHeader?: boolean;\n  readOnly?: boolean;\n  snap?: boolean;\n  autoFit?: boolean;\n  locale?: Partial<Locale>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"seek\", timeMs: Ms): void;\n  (e: \"selectClip\", clipId: string | null): void;\n  (e: \"scaleChange\", pxPerSec: number): void;\n  (e: \"moveClip\", clipId: string, opts: { start?: Ms; trackId?: string }): void;\n  (\n    e: \"resizeClip\",\n    clipId: string,\n    edits: Partial<Pick<Clip, \"in\" | \"out\" | \"start\">>,\n  ): void;\n  (e: \"change\", project: Project): void;\n}>();\n\nconst host = ref<HTMLDivElement | null>(null);\nlet timeline: CoreTimeline | null = null;\n\nonMounted(() => {\n  if (!host.value) return;\n  timeline = CoreTimeline.create({\n    container: host.value,\n    project: props.defaultProject,\n    pxPerSec: props.defaultScale,\n    time: props.defaultTime,\n    selectedClipId: props.defaultSelectedClipId ?? null,\n    showHeader: props.showHeader,\n    readOnly: props.readOnly,\n    snap: props.snap,\n    autoFit: props.autoFit,\n    locale: props.locale,\n    onSeek: (t) => emit(\"seek\", t),\n    onSelectClip: (id) => emit(\"selectClip\", id),\n    onScaleChange: (s) => emit(\"scaleChange\", s),\n    onMoveClip: (id, opts) => emit(\"moveClip\", id, opts),\n    onResizeClip: (id, edits) => emit(\"resizeClip\", id, edits),\n    onChange: (p) => emit(\"change\", p),\n  });\n});\n\nwatch(\n  () => props.locale,\n  (locale) => {\n    if (locale && timeline) timeline.setLocale(locale);\n  },\n);\n\nonBeforeUnmount(() => {\n  timeline?.destroy();\n  timeline = null;\n});\n\ndefineExpose({\n  api: (): CoreTimeline | null => timeline,\n});\n</script>\n\n<template>\n  <div ref=\"host\" data-aicut-timeline-host=\"\" :style=\"{ width: '100%', height: '240px' }\" />\n</template>\n"],"names":["props","__props","emit","__emit","host","ref","editor","offs","onMounted","Editor","project","timeMs","clipId","error","watch","theme","locale","onBeforeUnmount","off","__expose","_createElementBlock","timeline","CoreTimeline","t","id","s","opts","edits","p"],"mappings":"0UAgBA,MAAMA,EAAQC,EAORC,EAAOC,EAWPC,EAAOC,EAAAA,IAA2B,IAAI,EAC5C,IAAIC,EAAwB,KAC5B,MAAMC,EAA0B,CAAA,EAEhCC,OAAAA,EAAAA,UAAU,IAAM,CACTJ,EAAK,QACVE,EAASG,EAAAA,OAAO,OAAO,CACrB,UAAWL,EAAK,MAChB,QAASJ,EAAM,eACf,MAAOA,EAAM,MACb,OAAQA,EAAM,MAAA,CACf,EAEDO,EAAK,KACHD,EAAO,GAAG,SAAU,CAAC,CAAE,QAAAI,KAAcR,EAAK,SAAUQ,CAAO,CAAC,EAC5DJ,EAAO,GAAG,SAAU,CAAC,CAAE,QAAAI,KAAcR,EAAK,SAAUQ,CAAO,CAAC,EAC5DJ,EAAO,GAAG,OAAQ,CAAC,CAAE,OAAAK,KAAaT,EAAK,aAAcS,CAAM,CAAC,EAC5DL,EAAO,GAAG,OAAQ,IAAMJ,EAAK,MAAM,CAAC,EACpCI,EAAO,GAAG,QAAS,IAAMJ,EAAK,OAAO,CAAC,EACtCI,EAAO,GAAG,kBAAmB,CAAC,CAAE,OAAAM,CAAA,IAC9BV,EAAK,kBAAmBU,CAAM,CAAA,EAEhCN,EAAO,GAAG,QAAS,CAAC,CAAE,MAAAO,KAAYX,EAAK,QAASW,CAAK,CAAC,CAAA,EAGxDX,EAAK,QAASI,CAAM,EACtB,CAAC,EAEDQ,EAAAA,MACE,IAAMd,EAAM,MACXe,GAAU,CACLA,GAAST,GAAQA,EAAO,SAASS,CAAK,CAC5C,CAAA,EAGFD,EAAAA,MACE,IAAMd,EAAM,OACXgB,GAAW,CACNA,GAAUV,GAAQA,EAAO,UAAUU,CAAM,CAC/C,CAAA,EAGFC,EAAAA,gBAAgB,IAAM,CACpB,UAAWC,KAAOX,EAAMW,EAAA,EACxBX,EAAK,OAAS,EACdD,GAAA,MAAAA,EAAQ,UACRA,EAAS,IACX,CAAC,EAEDa,EAAa,CAEX,IAAK,IAAwBb,CAAA,CAC9B,wBAICc,EAAAA,mBAAqC,MAAA,SAA5B,OAAJ,IAAIhB,EAAO,kBAAgB,EAAA,sVC3ElC,MAAMJ,EAAQC,EAYRC,EAAOC,EAaPC,EAAOC,EAAAA,IAA2B,IAAI,EAC5C,IAAIgB,EAAgC,KAEpCb,OAAAA,EAAAA,UAAU,IAAM,CACTJ,EAAK,QACViB,EAAWC,EAAAA,SAAa,OAAO,CAC7B,UAAWlB,EAAK,MAChB,QAASJ,EAAM,eACf,SAAUA,EAAM,aAChB,KAAMA,EAAM,YACZ,eAAgBA,EAAM,uBAAyB,KAC/C,WAAYA,EAAM,WAClB,SAAUA,EAAM,SAChB,KAAMA,EAAM,KACZ,QAASA,EAAM,QACf,OAAQA,EAAM,OACd,OAASuB,GAAMrB,EAAK,OAAQqB,CAAC,EAC7B,aAAeC,GAAOtB,EAAK,aAAcsB,CAAE,EAC3C,cAAgBC,GAAMvB,EAAK,cAAeuB,CAAC,EAC3C,WAAY,CAACD,EAAIE,IAASxB,EAAK,WAAYsB,EAAIE,CAAI,EACnD,aAAc,CAACF,EAAIG,IAAUzB,EAAK,aAAcsB,EAAIG,CAAK,EACzD,SAAWC,GAAM1B,EAAK,SAAU0B,CAAC,CAAA,CAClC,EACH,CAAC,EAEDd,EAAAA,MACE,IAAMd,EAAM,OACXgB,GAAW,CACNA,GAAUK,GAAUA,EAAS,UAAUL,CAAM,CACnD,CAAA,EAGFC,EAAAA,gBAAgB,IAAM,CACpBI,GAAA,MAAAA,EAAU,UACVA,EAAW,IACb,CAAC,EAEDF,EAAa,CACX,IAAK,IAA2BE,CAAA,CACjC,wBAICD,EAAAA,mBAA0F,MAAA,SAAjF,OAAJ,IAAIhB,EAAO,2BAAyB,GAAI,MAAO,CAAA,MAAA,OAAA,OAAA,OAAA,CAAA"}
+{"version":3,"file":"index.cjs","sources":["../src/VideoEditor.vue","../src/Timeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport {\n  Editor,\n  type EditorApi,\n  type Locale,\n  type Ms,\n  type Project,\n  type Theme,\n} from \"@aicut/core\";\n\n/**\n * Vue 3 wrapper around `@aicut/core`. Same shape as `@aicut/react`:\n * uncontrolled for project state, theme is reactive, API exposed via\n * `defineExpose` so a parent `ref` can call cut/seek/setProject/etc.\n */\nconst props = defineProps<{\n  defaultProject?: Project;\n  theme?: Theme;\n  /** UI string overrides (English default). Reactive — swap to `localeZh` for Chinese. */\n  locale?: Partial<Locale>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"ready\", api: EditorApi): void;\n  (e: \"change\", project: Project): void;\n  (e: \"export\", project: Project): void;\n  (e: \"timeUpdate\", timeMs: Ms): void;\n  (e: \"play\"): void;\n  (e: \"pause\"): void;\n  (e: \"selectionChange\", clipId: string | null): void;\n  (e: \"error\", error: Error): void;\n}>();\n\nconst host = ref<HTMLDivElement | null>(null);\nlet editor: Editor | null = null;\nconst offs: Array<() => void> = [];\n/** Header slot DOM nodes — set after editor mount so Vue Teleports\n *  have a valid target. Library renders nothing here; named slots\n *  `#headerLeft` / `#headerRight` portal whatever the host provides. */\nconst headerLeftSlot = ref<HTMLElement | null>(null);\nconst headerRightSlot = ref<HTMLElement | null>(null);\n\nonMounted(() => {\n  if (!host.value) return;\n  editor = Editor.create({\n    container: host.value,\n    project: props.defaultProject,\n    theme: props.theme,\n    locale: props.locale,\n  });\n\n  offs.push(\n    editor.on(\"change\", ({ project }) => emit(\"change\", project)),\n    editor.on(\"export\", ({ project }) => emit(\"export\", project)),\n    editor.on(\"time\", ({ timeMs }) => emit(\"timeUpdate\", timeMs)),\n    editor.on(\"play\", () => emit(\"play\")),\n    editor.on(\"pause\", () => emit(\"pause\")),\n    editor.on(\"selectionChange\", ({ clipId }) =>\n      emit(\"selectionChange\", clipId),\n    ),\n    editor.on(\"error\", ({ error }) => emit(\"error\", error)),\n  );\n\n  headerLeftSlot.value = editor.headerLeft;\n  headerRightSlot.value = editor.headerRight;\n  emit(\"ready\", editor);\n});\n\nwatch(\n  () => props.theme,\n  (theme) => {\n    if (theme && editor) editor.setTheme(theme);\n  },\n);\n\nwatch(\n  () => props.locale,\n  (locale) => {\n    if (locale && editor) editor.setLocale(locale);\n  },\n);\n\nonBeforeUnmount(() => {\n  for (const off of offs) off();\n  offs.length = 0;\n  editor?.destroy();\n  editor = null;\n  headerLeftSlot.value = null;\n  headerRightSlot.value = null;\n});\n\ndefineExpose({\n  /** Returns the underlying core API or null if not yet mounted. */\n  api: (): EditorApi | null => editor,\n});\n</script>\n\n<template>\n  <div ref=\"host\" data-aicut-host=\"\">\n    <Teleport v-if=\"headerLeftSlot\" :to=\"headerLeftSlot\">\n      <slot name=\"headerLeft\" />\n    </Teleport>\n    <Teleport v-if=\"headerRightSlot\" :to=\"headerRightSlot\">\n      <slot name=\"headerRight\" />\n    </Teleport>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport {\n  Timeline as CoreTimeline,\n  type Clip,\n  type Locale,\n  type Ms,\n  type Project,\n} from \"@aicut/core\";\n\n/**\n * Standalone canvas Timeline wrapped for Vue 3. Same surface as the\n * React `<Timeline>`: pass `defaultProject`, drive imperatively via\n * the exposed `api()` ref.\n */\nconst props = defineProps<{\n  defaultProject: Project;\n  defaultScale?: number;\n  defaultTime?: Ms;\n  defaultSelectedClipId?: string | null;\n  showHeader?: boolean;\n  readOnly?: boolean;\n  snap?: boolean;\n  autoFit?: boolean;\n  locale?: Partial<Locale>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"seek\", timeMs: Ms): void;\n  (e: \"selectClip\", clipId: string | null): void;\n  (e: \"scaleChange\", pxPerSec: number): void;\n  (e: \"moveClip\", clipId: string, opts: { start?: Ms; trackId?: string }): void;\n  (\n    e: \"resizeClip\",\n    clipId: string,\n    edits: Partial<Pick<Clip, \"in\" | \"out\" | \"start\">>,\n  ): void;\n  (e: \"change\", project: Project): void;\n}>();\n\nconst host = ref<HTMLDivElement | null>(null);\nlet timeline: CoreTimeline | null = null;\n\nonMounted(() => {\n  if (!host.value) return;\n  timeline = CoreTimeline.create({\n    container: host.value,\n    project: props.defaultProject,\n    pxPerSec: props.defaultScale,\n    time: props.defaultTime,\n    selectedClipId: props.defaultSelectedClipId ?? null,\n    showHeader: props.showHeader,\n    readOnly: props.readOnly,\n    snap: props.snap,\n    autoFit: props.autoFit,\n    locale: props.locale,\n    onSeek: (t) => emit(\"seek\", t),\n    onSelectClip: (id) => emit(\"selectClip\", id),\n    onScaleChange: (s) => emit(\"scaleChange\", s),\n    onMoveClip: (id, opts) => emit(\"moveClip\", id, opts),\n    onResizeClip: (id, edits) => emit(\"resizeClip\", id, edits),\n    onChange: (p) => emit(\"change\", p),\n  });\n});\n\nwatch(\n  () => props.locale,\n  (locale) => {\n    if (locale && timeline) timeline.setLocale(locale);\n  },\n);\n\nonBeforeUnmount(() => {\n  timeline?.destroy();\n  timeline = null;\n});\n\ndefineExpose({\n  api: (): CoreTimeline | null => timeline,\n});\n</script>\n\n<template>\n  <div ref=\"host\" data-aicut-timeline-host=\"\" :style=\"{ width: '100%', height: '240px' }\" />\n</template>\n"],"names":["props","__props","emit","__emit","host","ref","editor","offs","headerLeftSlot","headerRightSlot","onMounted","Editor","project","timeMs","clipId","error","watch","theme","locale","onBeforeUnmount","off","__expose","_createElementBlock","_createBlock","_Teleport","_renderSlot","_ctx","timeline","CoreTimeline","t","id","s","opts","edits","p"],"mappings":"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"}

package/dist/index.js

@@ -1,7 +1,7 @@
-import { defineComponent as p, ref as u, onMounted as d, watch as s, onBeforeUnmount as h, openBlock as m, createElementBlock as f } from "vue";
-import { Editor as C, Timeline as y } from "@aicut/core";
-import { createEmptyProject as B, createId as E, localeEn as P, localeZh as T } from "@aicut/core";
-const v = /* @__PURE__ */ p({
+import { defineComponent as g, ref as i, onMounted as v, watch as h, onBeforeUnmount as _, openBlock as s, createElementBlock as S, createBlock as f, Teleport as m, renderSlot as C, createCommentVNode as y } from "vue";
+import { Editor as k, Timeline as x } from "@aicut/core";
+import { createEmptyProject as I, createId as R, localeEn as z, localeZh as F } from "@aicut/core";
+const E = /* @__PURE__ */ g({
   __name: "VideoEditor",
   props: {
     defaultProject: {},
@@ -9,13 +9,13 @@ const v = /* @__PURE__ */ p({
     locale: {}
   },
   emits: ["ready", "change", "export", "timeUpdate", "play", "pause", "selectionChange", "error"],
-  setup(r, { expose: c, emit: i }) {
-    const l = r, a = i, n = u(null);
+  setup(p, { expose: u, emit: d }) {
+    const l = p, a = d, r = i(null);
     let e = null;
-    const o = [];
-    return d(() => {
-      n.value && (e = C.create({
-        container: n.value,
+    const o = [], n = i(null), c = i(null);
+    return v(() => {
+      r.value && (e = k.create({
+        container: r.value,
         project: l.defaultProject,
         theme: l.theme,
         locale: l.locale
@@ -30,30 +30,43 @@ const v = /* @__PURE__ */ p({
           ({ clipId: t }) => a("selectionChange", t)
         ),
         e.on("error", ({ error: t }) => a("error", t))
-      ), a("ready", e));
-    }), s(
+      ), n.value = e.headerLeft, c.value = e.headerRight, a("ready", e));
+    }), h(
       () => l.theme,
       (t) => {
         t && e && e.setTheme(t);
       }
-    ), s(
+    ), h(
       () => l.locale,
       (t) => {
         t && e && e.setLocale(t);
       }
-    ), h(() => {
+    ), _(() => {
       for (const t of o) t();
-      o.length = 0, e == null || e.destroy(), e = null;
-    }), c({
+      o.length = 0, e == null || e.destroy(), e = null, n.value = null, c.value = null;
+    }), u({
       /** Returns the underlying core API or null if not yet mounted. */
       api: () => e
-    }), (t, g) => (m(), f("div", {
+    }), (t, B) => (s(), S("div", {
       ref_key: "host",
-      ref: n,
+      ref: r,
       "data-aicut-host": ""
-    }, null, 512));
+    }, [
+      n.value ? (s(), f(m, {
+        key: 0,
+        to: n.value
+      }, [
+        C(t.$slots, "headerLeft")
+      ], 8, ["to"])) : y("", !0),
+      c.value ? (s(), f(m, {
+        key: 1,
+        to: c.value
+      }, [
+        C(t.$slots, "headerRight")
+      ], 8, ["to"])) : y("", !0)
+    ], 512));
   }
-}), S = /* @__PURE__ */ p({
+}), P = /* @__PURE__ */ g({
   __name: "Timeline",
   props: {
     defaultProject: {},
@@ -67,12 +80,12 @@ const v = /* @__PURE__ */ p({
     locale: {}
   },
   emits: ["seek", "selectClip", "scaleChange", "moveClip", "resizeClip", "change"],
-  setup(r, { expose: c, emit: i }) {
-    const l = r, a = i, n = u(null);
+  setup(p, { expose: u, emit: d }) {
+    const l = p, a = d, r = i(null);
     let e = null;
-    return d(() => {
-      n.value && (e = y.create({
-        container: n.value,
+    return v(() => {
+      r.value && (e = x.create({
+        container: r.value,
         project: l.defaultProject,
         pxPerSec: l.defaultScale,
         time: l.defaultTime,
@@ -85,33 +98,33 @@ const v = /* @__PURE__ */ p({
         onSeek: (o) => a("seek", o),
         onSelectClip: (o) => a("selectClip", o),
         onScaleChange: (o) => a("scaleChange", o),
-        onMoveClip: (o, t) => a("moveClip", o, t),
-        onResizeClip: (o, t) => a("resizeClip", o, t),
+        onMoveClip: (o, n) => a("moveClip", o, n),
+        onResizeClip: (o, n) => a("resizeClip", o, n),
         onChange: (o) => a("change", o)
       }));
-    }), s(
+    }), h(
       () => l.locale,
       (o) => {
         o && e && e.setLocale(o);
       }
-    ), h(() => {
+    ), _(() => {
       e == null || e.destroy(), e = null;
-    }), c({
+    }), u({
       api: () => e
-    }), (o, t) => (m(), f("div", {
+    }), (o, n) => (s(), S("div", {
       ref_key: "host",
-      ref: n,
+      ref: r,
       "data-aicut-timeline-host": "",
       style: { width: "100%", height: "240px" }
     }, null, 512));
   }
 });
 export {
-  S as Timeline,
-  v as VideoEditor,
-  B as createEmptyProject,
-  E as createId,
-  P as localeEn,
-  T as localeZh
+  P as Timeline,
+  E as VideoEditor,
+  I as createEmptyProject,
+  R as createId,
+  z as localeEn,
+  F as localeZh
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/VideoEditor.vue","../src/Timeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport {\n  Editor,\n  type EditorApi,\n  type Locale,\n  type Ms,\n  type Project,\n  type Theme,\n} from \"@aicut/core\";\n\n/**\n * Vue 3 wrapper around `@aicut/core`. Same shape as `@aicut/react`:\n * uncontrolled for project state, theme is reactive, API exposed via\n * `defineExpose` so a parent `ref` can call cut/seek/setProject/etc.\n */\nconst props = defineProps<{\n  defaultProject?: Project;\n  theme?: Theme;\n  /** UI string overrides (English default). Reactive — swap to `localeZh` for Chinese. */\n  locale?: Partial<Locale>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"ready\", api: EditorApi): void;\n  (e: \"change\", project: Project): void;\n  (e: \"export\", project: Project): void;\n  (e: \"timeUpdate\", timeMs: Ms): void;\n  (e: \"play\"): void;\n  (e: \"pause\"): void;\n  (e: \"selectionChange\", clipId: string | null): void;\n  (e: \"error\", error: Error): void;\n}>();\n\nconst host = ref<HTMLDivElement | null>(null);\nlet editor: Editor | null = null;\nconst offs: Array<() => void> = [];\n\nonMounted(() => {\n  if (!host.value) return;\n  editor = Editor.create({\n    container: host.value,\n    project: props.defaultProject,\n    theme: props.theme,\n    locale: props.locale,\n  });\n\n  offs.push(\n    editor.on(\"change\", ({ project }) => emit(\"change\", project)),\n    editor.on(\"export\", ({ project }) => emit(\"export\", project)),\n    editor.on(\"time\", ({ timeMs }) => emit(\"timeUpdate\", timeMs)),\n    editor.on(\"play\", () => emit(\"play\")),\n    editor.on(\"pause\", () => emit(\"pause\")),\n    editor.on(\"selectionChange\", ({ clipId }) =>\n      emit(\"selectionChange\", clipId),\n    ),\n    editor.on(\"error\", ({ error }) => emit(\"error\", error)),\n  );\n\n  emit(\"ready\", editor);\n});\n\nwatch(\n  () => props.theme,\n  (theme) => {\n    if (theme && editor) editor.setTheme(theme);\n  },\n);\n\nwatch(\n  () => props.locale,\n  (locale) => {\n    if (locale && editor) editor.setLocale(locale);\n  },\n);\n\nonBeforeUnmount(() => {\n  for (const off of offs) off();\n  offs.length = 0;\n  editor?.destroy();\n  editor = null;\n});\n\ndefineExpose({\n  /** Returns the underlying core API or null if not yet mounted. */\n  api: (): EditorApi | null => editor,\n});\n</script>\n\n<template>\n  <div ref=\"host\" data-aicut-host=\"\" />\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport {\n  Timeline as CoreTimeline,\n  type Clip,\n  type Locale,\n  type Ms,\n  type Project,\n} from \"@aicut/core\";\n\n/**\n * Standalone canvas Timeline wrapped for Vue 3. Same surface as the\n * React `<Timeline>`: pass `defaultProject`, drive imperatively via\n * the exposed `api()` ref.\n */\nconst props = defineProps<{\n  defaultProject: Project;\n  defaultScale?: number;\n  defaultTime?: Ms;\n  defaultSelectedClipId?: string | null;\n  showHeader?: boolean;\n  readOnly?: boolean;\n  snap?: boolean;\n  autoFit?: boolean;\n  locale?: Partial<Locale>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"seek\", timeMs: Ms): void;\n  (e: \"selectClip\", clipId: string | null): void;\n  (e: \"scaleChange\", pxPerSec: number): void;\n  (e: \"moveClip\", clipId: string, opts: { start?: Ms; trackId?: string }): void;\n  (\n    e: \"resizeClip\",\n    clipId: string,\n    edits: Partial<Pick<Clip, \"in\" | \"out\" | \"start\">>,\n  ): void;\n  (e: \"change\", project: Project): void;\n}>();\n\nconst host = ref<HTMLDivElement | null>(null);\nlet timeline: CoreTimeline | null = null;\n\nonMounted(() => {\n  if (!host.value) return;\n  timeline = CoreTimeline.create({\n    container: host.value,\n    project: props.defaultProject,\n    pxPerSec: props.defaultScale,\n    time: props.defaultTime,\n    selectedClipId: props.defaultSelectedClipId ?? null,\n    showHeader: props.showHeader,\n    readOnly: props.readOnly,\n    snap: props.snap,\n    autoFit: props.autoFit,\n    locale: props.locale,\n    onSeek: (t) => emit(\"seek\", t),\n    onSelectClip: (id) => emit(\"selectClip\", id),\n    onScaleChange: (s) => emit(\"scaleChange\", s),\n    onMoveClip: (id, opts) => emit(\"moveClip\", id, opts),\n    onResizeClip: (id, edits) => emit(\"resizeClip\", id, edits),\n    onChange: (p) => emit(\"change\", p),\n  });\n});\n\nwatch(\n  () => props.locale,\n  (locale) => {\n    if (locale && timeline) timeline.setLocale(locale);\n  },\n);\n\nonBeforeUnmount(() => {\n  timeline?.destroy();\n  timeline = null;\n});\n\ndefineExpose({\n  api: (): CoreTimeline | null => timeline,\n});\n</script>\n\n<template>\n  <div ref=\"host\" data-aicut-timeline-host=\"\" :style=\"{ width: '100%', height: '240px' }\" />\n</template>\n"],"names":["props","__props","emit","__emit","host","ref","editor","offs","onMounted","Editor","project","timeMs","clipId","error","watch","theme","locale","onBeforeUnmount","off","__expose","_createElementBlock","timeline","CoreTimeline","t","id","s","opts","edits","p"],"mappings":";;;;;;;;;;;;AAgBA,UAAMA,IAAQC,GAORC,IAAOC,GAWPC,IAAOC,EAA2B,IAAI;AAC5C,QAAIC,IAAwB;AAC5B,UAAMC,IAA0B,CAAA;AAEhC,WAAAC,EAAU,MAAM;AACd,MAAKJ,EAAK,UACVE,IAASG,EAAO,OAAO;AAAA,QACrB,WAAWL,EAAK;AAAA,QAChB,SAASJ,EAAM;AAAA,QACf,OAAOA,EAAM;AAAA,QACb,QAAQA,EAAM;AAAA,MAAA,CACf,GAEDO,EAAK;AAAA,QACHD,EAAO,GAAG,UAAU,CAAC,EAAE,SAAAI,QAAcR,EAAK,UAAUQ,CAAO,CAAC;AAAA,QAC5DJ,EAAO,GAAG,UAAU,CAAC,EAAE,SAAAI,QAAcR,EAAK,UAAUQ,CAAO,CAAC;AAAA,QAC5DJ,EAAO,GAAG,QAAQ,CAAC,EAAE,QAAAK,QAAaT,EAAK,cAAcS,CAAM,CAAC;AAAA,QAC5DL,EAAO,GAAG,QAAQ,MAAMJ,EAAK,MAAM,CAAC;AAAA,QACpCI,EAAO,GAAG,SAAS,MAAMJ,EAAK,OAAO,CAAC;AAAA,QACtCI,EAAO;AAAA,UAAG;AAAA,UAAmB,CAAC,EAAE,QAAAM,EAAA,MAC9BV,EAAK,mBAAmBU,CAAM;AAAA,QAAA;AAAA,QAEhCN,EAAO,GAAG,SAAS,CAAC,EAAE,OAAAO,QAAYX,EAAK,SAASW,CAAK,CAAC;AAAA,MAAA,GAGxDX,EAAK,SAASI,CAAM;AAAA,IACtB,CAAC,GAEDQ;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAU;AACT,QAAIA,KAAST,KAAQA,EAAO,SAASS,CAAK;AAAA,MAC5C;AAAA,IAAA,GAGFD;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACgB,MAAW;AACV,QAAIA,KAAUV,KAAQA,EAAO,UAAUU,CAAM;AAAA,MAC/C;AAAA,IAAA,GAGFC,EAAgB,MAAM;AACpB,iBAAWC,KAAOX,EAAM,CAAAW,EAAA;AACxB,MAAAX,EAAK,SAAS,GACdD,KAAA,QAAAA,EAAQ,WACRA,IAAS;AAAA,IACX,CAAC,GAEDa,EAAa;AAAA;AAAA,MAEX,KAAK,MAAwBb;AAAA,IAAA,CAC9B,mBAICc,EAAqC,OAAA;AAAA,eAA5B;AAAA,MAAJ,KAAIhB;AAAA,MAAO,mBAAgB;AAAA,IAAA;;;;;;;;;;;;;;;;;AC3ElC,UAAMJ,IAAQC,GAYRC,IAAOC,GAaPC,IAAOC,EAA2B,IAAI;AAC5C,QAAIgB,IAAgC;AAEpC,WAAAb,EAAU,MAAM;AACd,MAAKJ,EAAK,UACViB,IAAWC,EAAa,OAAO;AAAA,QAC7B,WAAWlB,EAAK;AAAA,QAChB,SAASJ,EAAM;AAAA,QACf,UAAUA,EAAM;AAAA,QAChB,MAAMA,EAAM;AAAA,QACZ,gBAAgBA,EAAM,yBAAyB;AAAA,QAC/C,YAAYA,EAAM;AAAA,QAClB,UAAUA,EAAM;AAAA,QAChB,MAAMA,EAAM;AAAA,QACZ,SAASA,EAAM;AAAA,QACf,QAAQA,EAAM;AAAA,QACd,QAAQ,CAACuB,MAAMrB,EAAK,QAAQqB,CAAC;AAAA,QAC7B,cAAc,CAACC,MAAOtB,EAAK,cAAcsB,CAAE;AAAA,QAC3C,eAAe,CAACC,MAAMvB,EAAK,eAAeuB,CAAC;AAAA,QAC3C,YAAY,CAACD,GAAIE,MAASxB,EAAK,YAAYsB,GAAIE,CAAI;AAAA,QACnD,cAAc,CAACF,GAAIG,MAAUzB,EAAK,cAAcsB,GAAIG,CAAK;AAAA,QACzD,UAAU,CAACC,MAAM1B,EAAK,UAAU0B,CAAC;AAAA,MAAA,CAClC;AAAA,IACH,CAAC,GAEDd;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACgB,MAAW;AACV,QAAIA,KAAUK,KAAUA,EAAS,UAAUL,CAAM;AAAA,MACnD;AAAA,IAAA,GAGFC,EAAgB,MAAM;AACpB,MAAAI,KAAA,QAAAA,EAAU,WACVA,IAAW;AAAA,IACb,CAAC,GAEDF,EAAa;AAAA,MACX,KAAK,MAA2BE;AAAA,IAAA,CACjC,mBAICD,EAA0F,OAAA;AAAA,eAAjF;AAAA,MAAJ,KAAIhB;AAAA,MAAO,4BAAyB;AAAA,MAAI,OAAO,EAAA,OAAA,QAAA,QAAA,QAAA;AAAA,IAAA;;;"}
+{"version":3,"file":"index.js","sources":["../src/VideoEditor.vue","../src/Timeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport {\n  Editor,\n  type EditorApi,\n  type Locale,\n  type Ms,\n  type Project,\n  type Theme,\n} from \"@aicut/core\";\n\n/**\n * Vue 3 wrapper around `@aicut/core`. Same shape as `@aicut/react`:\n * uncontrolled for project state, theme is reactive, API exposed via\n * `defineExpose` so a parent `ref` can call cut/seek/setProject/etc.\n */\nconst props = defineProps<{\n  defaultProject?: Project;\n  theme?: Theme;\n  /** UI string overrides (English default). Reactive — swap to `localeZh` for Chinese. */\n  locale?: Partial<Locale>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"ready\", api: EditorApi): void;\n  (e: \"change\", project: Project): void;\n  (e: \"export\", project: Project): void;\n  (e: \"timeUpdate\", timeMs: Ms): void;\n  (e: \"play\"): void;\n  (e: \"pause\"): void;\n  (e: \"selectionChange\", clipId: string | null): void;\n  (e: \"error\", error: Error): void;\n}>();\n\nconst host = ref<HTMLDivElement | null>(null);\nlet editor: Editor | null = null;\nconst offs: Array<() => void> = [];\n/** Header slot DOM nodes — set after editor mount so Vue Teleports\n *  have a valid target. Library renders nothing here; named slots\n *  `#headerLeft` / `#headerRight` portal whatever the host provides. */\nconst headerLeftSlot = ref<HTMLElement | null>(null);\nconst headerRightSlot = ref<HTMLElement | null>(null);\n\nonMounted(() => {\n  if (!host.value) return;\n  editor = Editor.create({\n    container: host.value,\n    project: props.defaultProject,\n    theme: props.theme,\n    locale: props.locale,\n  });\n\n  offs.push(\n    editor.on(\"change\", ({ project }) => emit(\"change\", project)),\n    editor.on(\"export\", ({ project }) => emit(\"export\", project)),\n    editor.on(\"time\", ({ timeMs }) => emit(\"timeUpdate\", timeMs)),\n    editor.on(\"play\", () => emit(\"play\")),\n    editor.on(\"pause\", () => emit(\"pause\")),\n    editor.on(\"selectionChange\", ({ clipId }) =>\n      emit(\"selectionChange\", clipId),\n    ),\n    editor.on(\"error\", ({ error }) => emit(\"error\", error)),\n  );\n\n  headerLeftSlot.value = editor.headerLeft;\n  headerRightSlot.value = editor.headerRight;\n  emit(\"ready\", editor);\n});\n\nwatch(\n  () => props.theme,\n  (theme) => {\n    if (theme && editor) editor.setTheme(theme);\n  },\n);\n\nwatch(\n  () => props.locale,\n  (locale) => {\n    if (locale && editor) editor.setLocale(locale);\n  },\n);\n\nonBeforeUnmount(() => {\n  for (const off of offs) off();\n  offs.length = 0;\n  editor?.destroy();\n  editor = null;\n  headerLeftSlot.value = null;\n  headerRightSlot.value = null;\n});\n\ndefineExpose({\n  /** Returns the underlying core API or null if not yet mounted. */\n  api: (): EditorApi | null => editor,\n});\n</script>\n\n<template>\n  <div ref=\"host\" data-aicut-host=\"\">\n    <Teleport v-if=\"headerLeftSlot\" :to=\"headerLeftSlot\">\n      <slot name=\"headerLeft\" />\n    </Teleport>\n    <Teleport v-if=\"headerRightSlot\" :to=\"headerRightSlot\">\n      <slot name=\"headerRight\" />\n    </Teleport>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport {\n  Timeline as CoreTimeline,\n  type Clip,\n  type Locale,\n  type Ms,\n  type Project,\n} from \"@aicut/core\";\n\n/**\n * Standalone canvas Timeline wrapped for Vue 3. Same surface as the\n * React `<Timeline>`: pass `defaultProject`, drive imperatively via\n * the exposed `api()` ref.\n */\nconst props = defineProps<{\n  defaultProject: Project;\n  defaultScale?: number;\n  defaultTime?: Ms;\n  defaultSelectedClipId?: string | null;\n  showHeader?: boolean;\n  readOnly?: boolean;\n  snap?: boolean;\n  autoFit?: boolean;\n  locale?: Partial<Locale>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"seek\", timeMs: Ms): void;\n  (e: \"selectClip\", clipId: string | null): void;\n  (e: \"scaleChange\", pxPerSec: number): void;\n  (e: \"moveClip\", clipId: string, opts: { start?: Ms; trackId?: string }): void;\n  (\n    e: \"resizeClip\",\n    clipId: string,\n    edits: Partial<Pick<Clip, \"in\" | \"out\" | \"start\">>,\n  ): void;\n  (e: \"change\", project: Project): void;\n}>();\n\nconst host = ref<HTMLDivElement | null>(null);\nlet timeline: CoreTimeline | null = null;\n\nonMounted(() => {\n  if (!host.value) return;\n  timeline = CoreTimeline.create({\n    container: host.value,\n    project: props.defaultProject,\n    pxPerSec: props.defaultScale,\n    time: props.defaultTime,\n    selectedClipId: props.defaultSelectedClipId ?? null,\n    showHeader: props.showHeader,\n    readOnly: props.readOnly,\n    snap: props.snap,\n    autoFit: props.autoFit,\n    locale: props.locale,\n    onSeek: (t) => emit(\"seek\", t),\n    onSelectClip: (id) => emit(\"selectClip\", id),\n    onScaleChange: (s) => emit(\"scaleChange\", s),\n    onMoveClip: (id, opts) => emit(\"moveClip\", id, opts),\n    onResizeClip: (id, edits) => emit(\"resizeClip\", id, edits),\n    onChange: (p) => emit(\"change\", p),\n  });\n});\n\nwatch(\n  () => props.locale,\n  (locale) => {\n    if (locale && timeline) timeline.setLocale(locale);\n  },\n);\n\nonBeforeUnmount(() => {\n  timeline?.destroy();\n  timeline = null;\n});\n\ndefineExpose({\n  api: (): CoreTimeline | null => timeline,\n});\n</script>\n\n<template>\n  <div ref=\"host\" data-aicut-timeline-host=\"\" :style=\"{ width: '100%', height: '240px' }\" />\n</template>\n"],"names":["props","__props","emit","__emit","host","ref","editor","offs","headerLeftSlot","headerRightSlot","onMounted","Editor","project","timeMs","clipId","error","watch","theme","locale","onBeforeUnmount","off","__expose","_createElementBlock","_createBlock","_Teleport","_renderSlot","_ctx","timeline","CoreTimeline","t","id","s","opts","edits","p"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicut/vue",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Vue 3 wrapper for the AiCut video editor + lighting picker — thin declarative shells over @aicut/core.",
   "license": "MIT",
   "author": "ziqiang <ziqiangytu@gmail.com>",
@@ -60,7 +60,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@aicut/core": "0.4.1"
+    "@aicut/core": "0.4.3"
   },
   "peerDependencies": {
     "vue": "^3.4.0"