@aicut/vue 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,14 @@
 # @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.
+> Vue 3 wrapper for the **AiCut** video editor — canvas timeline, custom toolbar slots, theming, i18n, drop-in `<VideoEditor>`.
+
+[![npm](https://img.shields.io/npm/v/@aicut/vue.svg)](https://www.npmjs.com/package/@aicut/vue)
+[![License](https://img.shields.io/npm/l/@aicut/vue.svg)](./LICENSE)
+[![GitHub](https://img.shields.io/badge/repo-ziqiangai/AiCut-181717?logo=github)](https://github.com/ziqiangai/AiCut)
+
+![AiCut editor](https://raw.githubusercontent.com/ziqiangai/AiCut/main/docs/screenshots/editor-dark.png)
+
+## Install
 
 ```bash
 pnpm add @aicut/vue @aicut/core
@@ -20,12 +28,14 @@ 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 },
-    ]},
+  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);
@@ -53,29 +63,36 @@ async function doExport(p: Project) {
 </template>
 ```
 
-The component is **uncontrolled for project state**. Restore later with `editor.value?.api()?.setProject(saved)`.
+The component is **uncontrolled for project state**. Restore later with:
+
+```ts
+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. |
+```ts
+interface VideoEditorProps {
+  defaultProject?: Project;
+  theme?: Theme;            // CSS-var overrides; reactive
+  locale?: Partial<Locale>; // EN default; pass localeZh for ZH; 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)` |
+```ts
+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.
+The exposed `api()` returns the full **`EditorApi`** described in [@aicut/core](https://www.npmjs.com/package/@aicut/core) — `play`, `pause`, `seek`, `split`, `setProject`, `requestExport`, `setTheme`, `setLocale`, and more.
 
 ## Theming
 
@@ -93,8 +110,6 @@ The exposed `api()` returns the same `EditorApi` instance described in [`@aicut/
 />
 ```
 
-The `theme` prop is reactive — swap the binding and the editor calls `setTheme` internally.
-
 ## i18n
 
 ```vue
@@ -103,7 +118,9 @@ 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));
+const locale = computed<Locale>(() =>
+  lang.value === "zh" ? localeZh : localeEn,
+);
 </script>
 
 <template>
@@ -111,6 +128,47 @@ const locale = computed<Locale>(() => (lang.value === "zh" ? localeZh : localeEn
 </template>
 ```
 
+`locale` swap re-titles the toolbar and re-paints canvas labels in place.
+
+## `<LightingEditor>` (opt-in sub-entry)
+
+A 3D lighting director for AI relighting flows — separate sub-entry; three.js bundles only here.
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { LightingEditor, type LightingConfig } from "@aicut/vue/lighting";
+import "@aicut/core/styles.css";
+
+const editor = ref<{ api(): any } | null>(null);
+
+function onChange(cfg: LightingConfig) {
+  console.log(cfg);
+}
+
+function onGenerate(cfg: LightingConfig) {
+  fetch("/relight", { method: "POST", body: JSON.stringify(cfg) });
+}
+</script>
+
+<template>
+  <LightingEditor
+    ref="editor"
+    subject-image-url="/frames/subject.jpg"
+    smart-enabled
+    @change="onChange"
+    @generate="onGenerate"
+  >
+    <template #smart>
+      <textarea placeholder="Describe the mood…" />
+      <button @click="editor?.api()?.requestGenerate()">Generate</button>
+    </template>
+  </LightingEditor>
+</template>
+```
+
+Props: `subjectImageUrl`, `defaultConfig`, `defaultView`, `theme`, `locale`, `smartEnabled`, `smartOpen`. Events: `ready`, `change`, `generate`. Use the named `<slot name="smart">` for the smart-mode panel content.
+
 ## Standalone `<Timeline>`
 
 ```vue
@@ -131,6 +189,6 @@ const picked = ref(0);
 </template>
 ```
 
-## License
+---
 
-MIT
+[Full docs & demo](https://github.com/ziqiangai/AiCut) · [@aicut/core](https://www.npmjs.com/package/@aicut/core) · [@aicut/react](https://www.npmjs.com/package/@aicut/react)

package/dist/LightingEditor.vue.d.ts

@@ -0,0 +1,38 @@
+import { LightingEditor as CoreLightingEditor, type LightingConfig, type LightingEditorOptions, type LightingView } from "@aicut/core/lighting";
+import type { Theme } from "@aicut/core";
+/**
+ * Vue 3 wrapper around the core `LightingEditor`. Same shape as the
+ * React component: `defaultConfig` is read once on mount, `theme` /
+ * `locale` / `subjectImageUrl` are reactive, the host AI UI goes into
+ * a `<slot name="smart">` that Vue teleports into the smart slot DOM.
+ */
+type __VLS_Props = {
+    subjectImageUrl?: string;
+    defaultConfig?: Partial<LightingConfig>;
+    defaultView?: LightingView;
+    theme?: Theme;
+    locale?: LightingEditorOptions["locale"];
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    smart?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    api: () => CoreLightingEditor | null;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    ready: (api: CoreLightingEditor) => any;
+    change: (cfg: LightingConfig) => any;
+    generate: (cfg: LightingConfig) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReady?: ((api: CoreLightingEditor) => any) | undefined;
+    onChange?: ((cfg: LightingConfig) => any) | undefined;
+    onGenerate?: ((cfg: LightingConfig) => 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=LightingEditor.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LightingEditor.vue.d.ts","sourceRoot":"","sources":["../src/LightingEditor.vue"],"names":[],"mappings":"AA0FA,OAAO,EACL,cAAc,IAAI,kBAAkB,EACpC,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC;;;;;GAKG;AACH,KAAK,WAAW,GAAG;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;CAC1C,CAAC;AAyFF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAuB7C,QAAA,MAAM,eAAe;eA1DV,kBAAkB,GAAG,IAAI;;;;;;;;;kFAkElC,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/Timeline.vue.d.ts

@@ -18,6 +18,7 @@ type __VLS_Props = {
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
     api: () => CoreTimeline | null;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (project: Project) => any;
     seek: (timeMs: number) => any;
     selectClip: (clipId: string | null) => any;
     scaleChange: (pxPerSec: number) => any;
@@ -26,8 +27,8 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
         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<{
+    onChange?: ((project: Project) => any) | undefined;
     onSeek?: ((timeMs: number) => any) | undefined;
     onSelectClip?: ((clipId: string | null) => any) | undefined;
     onScaleChange?: ((pxPerSec: number) => any) | undefined;
@@ -36,7 +37,6 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
         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

@@ -1 +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"}
+{"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

@@ -14,8 +14,8 @@ 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;
+    change: (project: Project) => any;
     export: (project: Project) => any;
     timeUpdate: (timeMs: number) => any;
     play: () => any;
@@ -23,8 +23,8 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
     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;
+    onChange?: ((project: Project) => any) | undefined;
     onExport?: ((project: Project) => any) | undefined;
     onTimeUpdate?: ((timeMs: number) => any) | undefined;
     onPlay?: (() => any) | undefined;

package/dist/lighting.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("@aicut/core/lighting"),s=e.defineComponent({__name:"LightingEditor",props:{subjectImageUrl:{},defaultConfig:{},defaultView:{},theme:{},locale:{}},emits:["ready","change","generate"],setup(c,{expose:g,emit:u}){const r=c,l=u,i=e.useTemplateRef("host");let t=null;const a=e.ref(null);return e.onMounted(()=>{i.value&&(t=o.LightingEditor.create({container:i.value,subjectImageUrl:r.subjectImageUrl,config:r.defaultConfig,view:r.defaultView,theme:r.theme,locale:r.locale,onChange:n=>l("change",n),onGenerate:n=>l("generate",n)}),a.value=t.smartSlot,l("ready",t))}),e.watch(()=>r.theme,n=>{n&&t&&t.setTheme(n)}),e.watch(()=>r.locale,n=>{n&&t&&t.setLocale(n)}),e.watch(()=>r.subjectImageUrl,n=>{n&&t&&t.setSubjectImage(n)}),e.onBeforeUnmount(()=>{t==null||t.destroy(),t=null,a.value=null}),g({api:()=>t}),(n,m)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"host",ref:i,"data-aicut-lighting-host":""},[a.value?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:a.value},[e.renderSlot(n.$slots,"smart")],8,["to"])):e.createCommentVNode("",!0)],512))}});Object.defineProperty(exports,"DEFAULT_LIGHTING_CONFIG",{enumerable:!0,get:()=>o.DEFAULT_LIGHTING_CONFIG});Object.defineProperty(exports,"PRESET_DIRECTIONS",{enumerable:!0,get:()=>o.PRESET_DIRECTIONS});Object.defineProperty(exports,"lightingLocaleEn",{enumerable:!0,get:()=>o.lightingLocaleEn});Object.defineProperty(exports,"lightingLocaleZh",{enumerable:!0,get:()=>o.lightingLocaleZh});Object.defineProperty(exports,"mergeLightingLocale",{enumerable:!0,get:()=>o.mergeLightingLocale});Object.defineProperty(exports,"snapToPreset",{enumerable:!0,get:()=>o.snapToPreset});exports.LightingEditor=s;
+//# sourceMappingURL=lighting.cjs.map

package/dist/lighting.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lighting.cjs","sources":["../src/LightingEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from \"vue\";\nimport {\n  LightingEditor as CoreLightingEditor,\n  type LightingConfig,\n  type LightingEditorOptions,\n  type LightingView,\n} from \"@aicut/core/lighting\";\nimport type { Theme } from \"@aicut/core\";\n\n/**\n * Vue 3 wrapper around the core `LightingEditor`. Same shape as the\n * React component: `defaultConfig` is read once on mount, `theme` /\n * `locale` / `subjectImageUrl` are reactive, the host AI UI goes into\n * a `<slot name=\"smart\">` that Vue teleports into the smart slot DOM.\n */\nconst props = defineProps<{\n  subjectImageUrl?: string;\n  defaultConfig?: Partial<LightingConfig>;\n  defaultView?: LightingView;\n  theme?: Theme;\n  locale?: LightingEditorOptions[\"locale\"];\n}>();\n\nconst emit = defineEmits<{\n  (e: \"ready\", api: CoreLightingEditor): void;\n  (e: \"change\", cfg: LightingConfig): void;\n  (e: \"generate\", cfg: LightingConfig): void;\n}>();\n\nconst host = useTemplateRef<HTMLDivElement>(\"host\");\nlet editor: CoreLightingEditor | null = null;\nconst smartSlot = ref<HTMLElement | null>(null);\n\nonMounted(() => {\n  if (!host.value) return;\n  editor = CoreLightingEditor.create({\n    container: host.value,\n    subjectImageUrl: props.subjectImageUrl,\n    config: props.defaultConfig,\n    view: props.defaultView,\n    theme: props.theme,\n    locale: props.locale,\n    onChange: (cfg) => emit(\"change\", cfg),\n    onGenerate: (cfg) => emit(\"generate\", cfg),\n  });\n  smartSlot.value = editor.smartSlot;\n  emit(\"ready\", editor);\n});\n\nwatch(\n  () => props.theme,\n  (theme) => {\n    if (theme && editor) editor.setTheme(theme);\n  },\n);\nwatch(\n  () => props.locale,\n  (locale) => {\n    if (locale && editor) editor.setLocale(locale);\n  },\n);\nwatch(\n  () => props.subjectImageUrl,\n  (url) => {\n    if (url && editor) editor.setSubjectImage(url);\n  },\n);\n\nonBeforeUnmount(() => {\n  editor?.destroy();\n  editor = null;\n  smartSlot.value = null;\n});\n\ndefineExpose({\n  api: (): CoreLightingEditor | null => editor,\n});\n</script>\n\n<template>\n  <div ref=\"host\" data-aicut-lighting-host=\"\">\n    <Teleport v-if=\"smartSlot\" :to=\"smartSlot\">\n      <slot name=\"smart\" />\n    </Teleport>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","host","useTemplateRef","editor","smartSlot","ref","onMounted","CoreLightingEditor","cfg","watch","theme","locale","url","onBeforeUnmount","__expose","_createElementBlock","_createBlock","_Teleport","_renderSlot","_ctx"],"mappings":"mUAgBA,MAAMA,EAAQC,EAQRC,EAAOC,EAMPC,EAAOC,EAAAA,eAA+B,MAAM,EAClD,IAAIC,EAAoC,KACxC,MAAMC,EAAYC,EAAAA,IAAwB,IAAI,EAE9CC,OAAAA,EAAAA,UAAU,IAAM,CACTL,EAAK,QACVE,EAASI,EAAAA,eAAmB,OAAO,CACjC,UAAWN,EAAK,MAChB,gBAAiBJ,EAAM,gBACvB,OAAQA,EAAM,cACd,KAAMA,EAAM,YACZ,MAAOA,EAAM,MACb,OAAQA,EAAM,OACd,SAAWW,GAAQT,EAAK,SAAUS,CAAG,EACrC,WAAaA,GAAQT,EAAK,WAAYS,CAAG,CAAA,CAC1C,EACDJ,EAAU,MAAQD,EAAO,UACzBJ,EAAK,QAASI,CAAM,EACtB,CAAC,EAEDM,EAAAA,MACE,IAAMZ,EAAM,MACXa,GAAU,CACLA,GAASP,GAAQA,EAAO,SAASO,CAAK,CAC5C,CAAA,EAEFD,EAAAA,MACE,IAAMZ,EAAM,OACXc,GAAW,CACNA,GAAUR,GAAQA,EAAO,UAAUQ,CAAM,CAC/C,CAAA,EAEFF,EAAAA,MACE,IAAMZ,EAAM,gBACXe,GAAQ,CACHA,GAAOT,GAAQA,EAAO,gBAAgBS,CAAG,CAC/C,CAAA,EAGFC,EAAAA,gBAAgB,IAAM,CACpBV,GAAA,MAAAA,EAAQ,UACRA,EAAS,KACTC,EAAU,MAAQ,IACpB,CAAC,EAEDU,EAAa,CACX,IAAK,IAAiCX,CAAA,CACvC,wBAICY,EAAAA,mBAIM,MAAA,SAJG,OAAJ,IAAId,EAAO,2BAAyB,EAAA,GACvBG,EAAA,qBAAhBY,EAAAA,YAEWC,EAAAA,SAAA,OAFiB,GAAIb,EAAA,KAAA,GAC9Bc,aAAqBC,EAAA,OAAA,OAAA,CAAA"}

package/dist/lighting.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @aicut/vue/lighting — separate entry that pulls three.js.
+ */
+export { default as LightingEditor } from "./LightingEditor.vue";
+export { DEFAULT_LIGHTING_CONFIG, PRESET_DIRECTIONS, lightingLocaleEn, lightingLocaleZh, mergeLightingLocale, snapToPreset, } from "@aicut/core/lighting";
+export type { KeyPreset, LightingConfig, LightingEditorOptions, LightingLocale, LightingView, } from "@aicut/core/lighting";
+//# sourceMappingURL=lighting.d.ts.map

package/dist/lighting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lighting.d.ts","sourceRoot":"","sources":["../src/lighting.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEjE,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,YAAY,GACb,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,SAAS,EACT,cAAc,EACd,qBAAqB,EACrB,cAAc,EACd,YAAY,GACb,MAAM,sBAAsB,CAAC"}

package/dist/lighting.js

@@ -0,0 +1,71 @@
+import { defineComponent as g, useTemplateRef as u, ref as f, onMounted as h, watch as r, onBeforeUnmount as p, openBlock as i, createElementBlock as d, createBlock as I, Teleport as L, renderSlot as E, createCommentVNode as _ } from "vue";
+import { LightingEditor as v } from "@aicut/core/lighting";
+import { DEFAULT_LIGHTING_CONFIG as k, PRESET_DIRECTIONS as y, lightingLocaleEn as w, lightingLocaleZh as B, mergeLightingLocale as G, snapToPreset as N } from "@aicut/core/lighting";
+const U = /* @__PURE__ */ g({
+  __name: "LightingEditor",
+  props: {
+    subjectImageUrl: {},
+    defaultConfig: {},
+    defaultView: {},
+    theme: {},
+    locale: {}
+  },
+  emits: ["ready", "change", "generate"],
+  setup(c, { expose: s, emit: m }) {
+    const o = c, n = m, l = u("host");
+    let e = null;
+    const a = f(null);
+    return h(() => {
+      l.value && (e = v.create({
+        container: l.value,
+        subjectImageUrl: o.subjectImageUrl,
+        config: o.defaultConfig,
+        view: o.defaultView,
+        theme: o.theme,
+        locale: o.locale,
+        onChange: (t) => n("change", t),
+        onGenerate: (t) => n("generate", t)
+      }), a.value = e.smartSlot, n("ready", e));
+    }), r(
+      () => o.theme,
+      (t) => {
+        t && e && e.setTheme(t);
+      }
+    ), r(
+      () => o.locale,
+      (t) => {
+        t && e && e.setLocale(t);
+      }
+    ), r(
+      () => o.subjectImageUrl,
+      (t) => {
+        t && e && e.setSubjectImage(t);
+      }
+    ), p(() => {
+      e == null || e.destroy(), e = null, a.value = null;
+    }), s({
+      api: () => e
+    }), (t, T) => (i(), d("div", {
+      ref_key: "host",
+      ref: l,
+      "data-aicut-lighting-host": ""
+    }, [
+      a.value ? (i(), I(L, {
+        key: 0,
+        to: a.value
+      }, [
+        E(t.$slots, "smart")
+      ], 8, ["to"])) : _("", !0)
+    ], 512));
+  }
+});
+export {
+  k as DEFAULT_LIGHTING_CONFIG,
+  U as LightingEditor,
+  y as PRESET_DIRECTIONS,
+  w as lightingLocaleEn,
+  B as lightingLocaleZh,
+  G as mergeLightingLocale,
+  N as snapToPreset
+};
+//# sourceMappingURL=lighting.js.map

package/dist/lighting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lighting.js","sources":["../src/LightingEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from \"vue\";\nimport {\n  LightingEditor as CoreLightingEditor,\n  type LightingConfig,\n  type LightingEditorOptions,\n  type LightingView,\n} from \"@aicut/core/lighting\";\nimport type { Theme } from \"@aicut/core\";\n\n/**\n * Vue 3 wrapper around the core `LightingEditor`. Same shape as the\n * React component: `defaultConfig` is read once on mount, `theme` /\n * `locale` / `subjectImageUrl` are reactive, the host AI UI goes into\n * a `<slot name=\"smart\">` that Vue teleports into the smart slot DOM.\n */\nconst props = defineProps<{\n  subjectImageUrl?: string;\n  defaultConfig?: Partial<LightingConfig>;\n  defaultView?: LightingView;\n  theme?: Theme;\n  locale?: LightingEditorOptions[\"locale\"];\n}>();\n\nconst emit = defineEmits<{\n  (e: \"ready\", api: CoreLightingEditor): void;\n  (e: \"change\", cfg: LightingConfig): void;\n  (e: \"generate\", cfg: LightingConfig): void;\n}>();\n\nconst host = useTemplateRef<HTMLDivElement>(\"host\");\nlet editor: CoreLightingEditor | null = null;\nconst smartSlot = ref<HTMLElement | null>(null);\n\nonMounted(() => {\n  if (!host.value) return;\n  editor = CoreLightingEditor.create({\n    container: host.value,\n    subjectImageUrl: props.subjectImageUrl,\n    config: props.defaultConfig,\n    view: props.defaultView,\n    theme: props.theme,\n    locale: props.locale,\n    onChange: (cfg) => emit(\"change\", cfg),\n    onGenerate: (cfg) => emit(\"generate\", cfg),\n  });\n  smartSlot.value = editor.smartSlot;\n  emit(\"ready\", editor);\n});\n\nwatch(\n  () => props.theme,\n  (theme) => {\n    if (theme && editor) editor.setTheme(theme);\n  },\n);\nwatch(\n  () => props.locale,\n  (locale) => {\n    if (locale && editor) editor.setLocale(locale);\n  },\n);\nwatch(\n  () => props.subjectImageUrl,\n  (url) => {\n    if (url && editor) editor.setSubjectImage(url);\n  },\n);\n\nonBeforeUnmount(() => {\n  editor?.destroy();\n  editor = null;\n  smartSlot.value = null;\n});\n\ndefineExpose({\n  api: (): CoreLightingEditor | null => editor,\n});\n</script>\n\n<template>\n  <div ref=\"host\" data-aicut-lighting-host=\"\">\n    <Teleport v-if=\"smartSlot\" :to=\"smartSlot\">\n      <slot name=\"smart\" />\n    </Teleport>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","host","useTemplateRef","editor","smartSlot","ref","onMounted","CoreLightingEditor","cfg","watch","theme","locale","url","onBeforeUnmount","__expose","_createElementBlock","_createBlock","_Teleport","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;AAgBA,UAAMA,IAAQC,GAQRC,IAAOC,GAMPC,IAAOC,EAA+B,MAAM;AAClD,QAAIC,IAAoC;AACxC,UAAMC,IAAYC,EAAwB,IAAI;AAE9C,WAAAC,EAAU,MAAM;AACd,MAAKL,EAAK,UACVE,IAASI,EAAmB,OAAO;AAAA,QACjC,WAAWN,EAAK;AAAA,QAChB,iBAAiBJ,EAAM;AAAA,QACvB,QAAQA,EAAM;AAAA,QACd,MAAMA,EAAM;AAAA,QACZ,OAAOA,EAAM;AAAA,QACb,QAAQA,EAAM;AAAA,QACd,UAAU,CAACW,MAAQT,EAAK,UAAUS,CAAG;AAAA,QACrC,YAAY,CAACA,MAAQT,EAAK,YAAYS,CAAG;AAAA,MAAA,CAC1C,GACDJ,EAAU,QAAQD,EAAO,WACzBJ,EAAK,SAASI,CAAM;AAAA,IACtB,CAAC,GAEDM;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,CAACa,MAAU;AACT,QAAIA,KAASP,KAAQA,EAAO,SAASO,CAAK;AAAA,MAC5C;AAAA,IAAA,GAEFD;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,CAACc,MAAW;AACV,QAAIA,KAAUR,KAAQA,EAAO,UAAUQ,CAAM;AAAA,MAC/C;AAAA,IAAA,GAEFF;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,CAACe,MAAQ;AACP,QAAIA,KAAOT,KAAQA,EAAO,gBAAgBS,CAAG;AAAA,MAC/C;AAAA,IAAA,GAGFC,EAAgB,MAAM;AACpB,MAAAV,KAAA,QAAAA,EAAQ,WACRA,IAAS,MACTC,EAAU,QAAQ;AAAA,IACpB,CAAC,GAEDU,EAAa;AAAA,MACX,KAAK,MAAiCX;AAAA,IAAA,CACvC,mBAICY,EAIM,OAAA;AAAA,eAJG;AAAA,MAAJ,KAAId;AAAA,MAAO,4BAAyB;AAAA,IAAA;MACvBG,EAAA,cAAhBY,EAEWC,GAAA;AAAA;QAFiB,IAAIb,EAAA;AAAA,MAAA;QAC9Bc,EAAqBC,EAAA,QAAA,OAAA;AAAA,MAAA;;;;"}

package/package.json

@@ -1,8 +1,44 @@
 {
   "name": "@aicut/vue",
-  "version": "0.1.0",
-  "description": "Vue 3 wrapper for the AiCut video editor — thin declarative shell over @aicut/core.",
+  "version": "0.2.0",
+  "description": "Vue 3 wrapper for the AiCut video editor + lighting picker — thin declarative shells over @aicut/core.",
   "license": "MIT",
+  "author": "ziqiang <ziqiangytu@gmail.com>",
+  "homepage": "https://github.com/ziqiangai/AiCut#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ziqiangai/AiCut.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/ziqiangai/AiCut/issues"
+  },
+  "keywords": [
+    "video-editor",
+    "video-editing",
+    "vue",
+    "vue3",
+    "vue-component",
+    "timeline",
+    "timeline-editor",
+    "nle",
+    "video-cutter",
+    "video-clip",
+    "canvas",
+    "video",
+    "editor",
+    "mp4",
+    "component",
+    "capcut",
+    "premiere",
+    "final-cut",
+    "davinci",
+    "imovie",
+    "veed",
+    "filmora",
+    "lighting",
+    "three.js"
+  ],
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -12,6 +48,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./lighting": {
+      "types": "./dist/lighting.d.ts",
+      "import": "./dist/lighting.js",
+      "require": "./dist/lighting.cjs"
     }
   },
   "files": [
@@ -19,7 +60,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@aicut/core": "0.1.0"
+    "@aicut/core": "0.2.0"
   },
   "peerDependencies": {
     "vue": "^3.4.0"