@aicut/vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ziqiang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,136 @@
+# @aicut/vue
+
+Vue 3 wrapper around **[@aicut/core](https://www.npmjs.com/package/@aicut/core)** — a canvas-rendered video editor component. Import the core stylesheet once and use it like any other Vue SFC.
+
+```bash
+pnpm add @aicut/vue @aicut/core
+```
+
+## Quick start
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  VideoEditor,
+  type EditorApi,
+  type Project,
+} from "@aicut/vue";
+import "@aicut/core/styles.css";
+
+const project: Project = {
+  version: 1,
+  sources: [{ id: "s1", url: "/media/a.mp4", kind: "video", name: "a.mp4" }],
+  tracks: [
+    { id: "t1", kind: "video", clips: [
+      { id: "c1", sourceId: "s1", in: 0, out: 5000, start: 0 },
+    ]},
+  ],
+};
+
+const editor = ref<{ api(): EditorApi | null } | null>(null);
+
+function save(p: Project) {
+  console.log("autosave", p);
+}
+
+async function doExport(p: Project) {
+  await fetch("/api/export", {
+    method: "POST",
+    body: JSON.stringify({ project: p }),
+  });
+}
+</script>
+
+<template>
+  <VideoEditor
+    ref="editor"
+    :default-project="project"
+    @change="save"
+    @export="doExport"
+    style="height: 600px"
+  />
+</template>
+```
+
+The component is **uncontrolled for project state**. Restore later with `editor.value?.api()?.setProject(saved)`.
+
+## Props
+
+| Prop | Type | Notes |
+| --- | --- | --- |
+| `defaultProject` | `Project` | Initial project. Read once on mount. |
+| `theme` | `Theme` | CSS variable overrides. Reactive. |
+| `locale` | `Partial<Locale>` | UI strings. English by default; pass `localeZh` for Chinese. Reactive. |
+
+## Events
+
+| Event | Payload |
+| --- | --- |
+| `ready` | `(api: EditorApi)` |
+| `change` | `(project: Project)` |
+| `export` | `(project: Project)` — fired by `api.requestExport()` |
+| `time-update` | `(timeMs: number)` |
+| `play` / `pause` | `()` |
+| `selection-change` | `(clipId: string \| null)` |
+| `error` | `(error: Error)` |
+
+The exposed `api()` returns the same `EditorApi` instance described in [`@aicut/core`](https://www.npmjs.com/package/@aicut/core) — `play`, `pause`, `seek`, `split`, `setProject`, `requestExport`, `setTheme`, `setLocale`, the lot.
+
+## Theming
+
+```vue
+<VideoEditor
+  :theme="{
+    controlsBg: '#f6f6f8',
+    controlsText: 'rgba(0, 0, 0, 0.78)',
+    controlsBorder: 'rgba(0, 0, 0, 0.08)',
+    controlsHover: 'rgba(0, 0, 0, 0.06)',
+    controlsActive: 'rgba(0, 0, 0, 0.08)',
+    previewBg: '#e4e4e7',
+  }"
+  /* … */
+/>
+```
+
+The `theme` prop is reactive — swap the binding and the editor calls `setTheme` internally.
+
+## i18n
+
+```vue
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { VideoEditor, localeEn, localeZh, type Locale } from "@aicut/vue";
+
+const lang = ref<"en" | "zh">("en");
+const locale = computed<Locale>(() => (lang.value === "zh" ? localeZh : localeEn));
+</script>
+
+<template>
+  <VideoEditor :locale="locale" /* … */ />
+</template>
+```
+
+## Standalone `<Timeline>`
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Timeline } from "@aicut/vue";
+
+const picked = ref(0);
+</script>
+
+<template>
+  <Timeline
+    :default-project="singleClipProject"
+    :show-header="false"
+    read-only
+    @seek="(ms) => (picked = ms)"
+  />
+</template>
+```
+
+## License
+
+MIT

package/dist/Timeline.vue.d.ts

@@ -0,0 +1,42 @@
+import { Timeline as CoreTimeline, type Clip, type Locale, type Ms, type Project } from "@aicut/core";
+/**
+ * Standalone canvas Timeline wrapped for Vue 3. Same surface as the
+ * React `<Timeline>`: pass `defaultProject`, drive imperatively via
+ * the exposed `api()` ref.
+ */
+type __VLS_Props = {
+    defaultProject: Project;
+    defaultScale?: number;
+    defaultTime?: Ms;
+    defaultSelectedClipId?: string | null;
+    showHeader?: boolean;
+    readOnly?: boolean;
+    snap?: boolean;
+    autoFit?: boolean;
+    locale?: Partial<Locale>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    api: () => CoreTimeline | null;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    seek: (timeMs: number) => any;
+    selectClip: (clipId: string | null) => any;
+    scaleChange: (pxPerSec: number) => any;
+    moveClip: (clipId: string, opts: {
+        start?: Ms;
+        trackId?: string;
+    }) => any;
+    resizeClip: (clipId: string, edits: Partial<Pick<Clip, "in" | "out" | "start">>) => any;
+    change: (project: Project) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSeek?: ((timeMs: number) => any) | undefined;
+    onSelectClip?: ((clipId: string | null) => any) | undefined;
+    onScaleChange?: ((pxPerSec: number) => any) | undefined;
+    onMoveClip?: ((clipId: string, opts: {
+        start?: Ms;
+        trackId?: string;
+    }) => any) | undefined;
+    onResizeClip?: ((clipId: string, edits: Partial<Pick<Clip, "in" | "out" | "start">>) => any) | undefined;
+    onChange?: ((project: Project) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=Timeline.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.vue.d.ts","sourceRoot":"","sources":["../src/Timeline.vue"],"names":[],"mappings":"AAwFA,OAAO,EACL,QAAQ,IAAI,YAAY,EACxB,KAAK,IAAI,EACT,KAAK,MAAM,EACX,KAAK,EAAE,EACP,KAAK,OAAO,EACb,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,KAAK,WAAW,GAAG;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,EAAE,CAAC;IACjB,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;CAC1B,CAAC;;eAuDS,YAAY,GAAG,IAAI;;;;;;gBAhDoB,EAAE;kBAAY,MAAM;;;;;;;;;gBAApB,EAAE;kBAAY,MAAM;;;;;AAwFtE,wBAQG"}

package/dist/VideoEditor.vue.d.ts

@@ -0,0 +1,36 @@
+import { type EditorApi, type Locale, type Project, type Theme } from "@aicut/core";
+/**
+ * Vue 3 wrapper around `@aicut/core`. Same shape as `@aicut/react`:
+ * uncontrolled for project state, theme is reactive, API exposed via
+ * `defineExpose` so a parent `ref` can call cut/seek/setProject/etc.
+ */
+type __VLS_Props = {
+    defaultProject?: Project;
+    theme?: Theme;
+    /** UI string overrides (English default). Reactive — swap to `localeZh` for Chinese. */
+    locale?: Partial<Locale>;
+};
+declare const _default: 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, {} & {
+    change: (project: Project) => any;
+    ready: (api: EditorApi) => any;
+    export: (project: Project) => any;
+    timeUpdate: (timeMs: number) => any;
+    play: () => any;
+    pause: () => any;
+    selectionChange: (clipId: string | null) => any;
+    error: (error: Error) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((project: Project) => any) | undefined;
+    onReady?: ((api: EditorApi) => any) | undefined;
+    onExport?: ((project: Project) => any) | undefined;
+    onTimeUpdate?: ((timeMs: number) => any) | undefined;
+    onPlay?: (() => any) | undefined;
+    onPause?: (() => any) | undefined;
+    onSelectionChange?: ((clipId: string | null) => any) | undefined;
+    onError?: ((error: Error) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=VideoEditor.vue.d.ts.map

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

@@ -0,0 +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"}

package/dist/index.cjs

@@ -0,0 +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;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as VideoEditor } from "./VideoEditor.vue";
+export { default as Timeline } from "./Timeline.vue";
+export type { Project, MediaSource, Track, Clip, Ms, Theme, EditorApi, TimelineOptions, Locale, } from "@aicut/core";
+export { createEmptyProject, createId, localeEn, localeZh } from "@aicut/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,YAAY,EACV,OAAO,EACP,WAAW,EACX,KAAK,EACL,IAAI,EACJ,EAAE,EACF,KAAK,EACL,SAAS,EACT,eAAe,EACf,MAAM,GACP,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,117 @@
+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({
+  __name: "VideoEditor",
+  props: {
+    defaultProject: {},
+    theme: {},
+    locale: {}
+  },
+  emits: ["ready", "change", "export", "timeUpdate", "play", "pause", "selectionChange", "error"],
+  setup(r, { expose: c, emit: i }) {
+    const l = r, a = i, n = u(null);
+    let e = null;
+    const o = [];
+    return d(() => {
+      n.value && (e = C.create({
+        container: n.value,
+        project: l.defaultProject,
+        theme: l.theme,
+        locale: l.locale
+      }), o.push(
+        e.on("change", ({ project: t }) => a("change", t)),
+        e.on("export", ({ project: t }) => a("export", t)),
+        e.on("time", ({ timeMs: t }) => a("timeUpdate", t)),
+        e.on("play", () => a("play")),
+        e.on("pause", () => a("pause")),
+        e.on(
+          "selectionChange",
+          ({ clipId: t }) => a("selectionChange", t)
+        ),
+        e.on("error", ({ error: t }) => a("error", t))
+      ), a("ready", e));
+    }), s(
+      () => l.theme,
+      (t) => {
+        t && e && e.setTheme(t);
+      }
+    ), s(
+      () => 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({
+      /** Returns the underlying core API or null if not yet mounted. */
+      api: () => e
+    }), (t, g) => (m(), f("div", {
+      ref_key: "host",
+      ref: n,
+      "data-aicut-host": ""
+    }, null, 512));
+  }
+}), S = /* @__PURE__ */ p({
+  __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(r, { expose: c, emit: i }) {
+    const l = r, a = i, n = u(null);
+    let e = null;
+    return d(() => {
+      n.value && (e = y.create({
+        container: n.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) => 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),
+        onChange: (o) => a("change", o)
+      }));
+    }), s(
+      () => l.locale,
+      (o) => {
+        o && e && e.setLocale(o);
+      }
+    ), h(() => {
+      e == null || e.destroy(), e = null;
+    }), c({
+      api: () => e
+    }), (o, t) => (m(), f("div", {
+      ref_key: "host",
+      ref: n,
+      "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
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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":"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"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@aicut/vue",
+  "version": "0.1.0",
+  "description": "Vue 3 wrapper for the AiCut video editor — thin declarative shell over @aicut/core.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@aicut/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.1.10"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc --emitDeclarationOnly -p tsconfig.json --outDir dist",
+    "dev": "vite build --watch",
+    "typecheck": "vue-tsc --noEmit"
+  }
+}