@aicut/vue 0.2.0 → 0.4.0

package/README.md

@@ -137,37 +137,43 @@ A 3D lighting director for AI relighting flows — separate sub-entry; three.js
 ```vue
 <script setup lang="ts">
 import { ref } from "vue";
-import { LightingEditor, type LightingConfig } from "@aicut/vue/lighting";
+import {
+  LightingEditor,
+  type LightingConfig,
+} from "@aicut/vue/lighting";
+import type { LightingEditor as CoreLightingEditor } from "@aicut/core/lighting";
 import "@aicut/core/styles.css";
 
-const editor = ref<{ api(): any } | null>(null);
+const editor = ref<{ api(): CoreLightingEditor | null } | null>(null);
 
 function onChange(cfg: LightingConfig) {
   console.log(cfg);
 }
 
-function onGenerate(cfg: LightingConfig) {
-  fetch("/relight", { method: "POST", body: JSON.stringify(cfg) });
+function onGenerate() {
+  const cfg = editor.value?.api()?.getConfig();
+  if (cfg) 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>
+  <!-- Library renders ONLY the picker; the Smart panel beside it is
+       host code in your own template. -->
+  <div style="display: flex; gap: 16px">
+    <LightingEditor
+      ref="editor"
+      subject-image-url="/frames/subject.jpg"
+      @change="onChange"
+    />
+    <aside>
       <textarea placeholder="Describe the mood…" />
-      <button @click="editor?.api()?.requestGenerate()">Generate</button>
-    </template>
-  </LightingEditor>
+      <button @click="onGenerate">Generate</button>
+    </aside>
+  </div>
 </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.
+Props: `subjectImageUrl`, `defaultConfig`, `defaultView`, `theme`, `locale`. Events: `ready`, `change`. The library is intentionally scoped to the picker — Smart mode UI / Generate buttons / layout live in host code.
 
 ## Standalone `<Timeline>`
 

package/dist/LightingEditor.vue.d.ts

@@ -1,11 +1,5 @@
 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>;
@@ -15,18 +9,16 @@ type __VLS_Props = {
 };
 declare var __VLS_5: {};
 type __VLS_Slots = {} & {
-    smart?: (props: typeof __VLS_5) => any;
+    controlsFooter?: (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;

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

@@ -1 +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"}
+{"version":3,"file":"LightingEditor.vue.d.ts","sourceRoot":"","sources":["../src/LightingEditor.vue"],"names":[],"mappings":"AAsFA,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,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;AA2FF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAuBtD,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/lighting.cjs

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

package/dist/lighting.cjs.map

@@ -1 +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"}
+{"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\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}>();\n\nconst host = useTemplateRef<HTMLDivElement>(\"host\");\nlet editor: CoreLightingEditor | null = null;\n/**\n * Footer slot DOM node — set after mount so the Teleport target\n * exists before Vue tries to portal slot content into it.\n */\nconst footerSlot = 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  });\n  footerSlot.value = editor.controlsFooter;\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 (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  footerSlot.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=\"footerSlot\" :to=\"footerSlot\">\n      <slot name=\"controlsFooter\" />\n    </Teleport>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","host","useTemplateRef","editor","footerSlot","ref","onMounted","CoreLightingEditor","cfg","watch","theme","locale","url","onBeforeUnmount","__expose","_createElementBlock","_createBlock","_Teleport","_renderSlot","_ctx"],"mappings":"wTAUA,MAAMA,EAAQC,EAQRC,EAAOC,EAKPC,EAAOC,EAAAA,eAA+B,MAAM,EAClD,IAAIC,EAAoC,KAKxC,MAAMC,EAAaC,EAAAA,IAAwB,IAAI,EAE/CC,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,CAAA,CACtC,EACDJ,EAAW,MAAQD,EAAO,eAC1BJ,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,CACNR,GAAQA,EAAO,UAAUQ,GAAU,CAAA,CAAE,CAC3C,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,EAAW,MAAQ,IACrB,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,OAFkB,GAAIb,EAAA,KAAA,GAC/Bc,aAA8BC,EAAA,OAAA,gBAAA,CAAA"}

package/dist/lighting.js

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

package/dist/lighting.js.map

@@ -1 +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;;;;"}
+{"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\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}>();\n\nconst host = useTemplateRef<HTMLDivElement>(\"host\");\nlet editor: CoreLightingEditor | null = null;\n/**\n * Footer slot DOM node — set after mount so the Teleport target\n * exists before Vue tries to portal slot content into it.\n */\nconst footerSlot = 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  });\n  footerSlot.value = editor.controlsFooter;\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 (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  footerSlot.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=\"footerSlot\" :to=\"footerSlot\">\n      <slot name=\"controlsFooter\" />\n    </Teleport>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","host","useTemplateRef","editor","footerSlot","ref","onMounted","CoreLightingEditor","cfg","watch","theme","locale","url","onBeforeUnmount","__expose","_createElementBlock","_createBlock","_Teleport","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;AAUA,UAAMA,IAAQC,GAQRC,IAAOC,GAKPC,IAAOC,EAA+B,MAAM;AAClD,QAAIC,IAAoC;AAKxC,UAAMC,IAAaC,EAAwB,IAAI;AAE/C,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,MAAA,CACtC,GACDJ,EAAW,QAAQD,EAAO,gBAC1BJ,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,QAAIR,KAAQA,EAAO,UAAUQ,KAAU,CAAA,CAAE;AAAA,MAC3C;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,EAAW,QAAQ;AAAA,IACrB,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;QAFkB,IAAIb,EAAA;AAAA,MAAA;QAC/Bc,EAA8BC,EAAA,QAAA,gBAAA;AAAA,MAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicut/vue",
-  "version": "0.2.0",
+  "version": "0.4.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>",
@@ -60,7 +60,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@aicut/core": "0.2.0"
+    "@aicut/core": "0.4.0"
   },
   "peerDependencies": {
     "vue": "^3.4.0"