@aicut/react 0.1.1 → 0.3.0

package/README.md

@@ -145,6 +145,48 @@ import { VideoEditor, localeZh } from "@aicut/react";
 
 `locale` is reactive too — runtime 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 component that doesn't pull three.js into the rest of your bundle.
+
+```tsx
+import { useRef } from "react";
+import {
+  LightingEditor,
+  type LightingEditorApi,
+  type LightingConfig,
+} from "@aicut/react/lighting";
+import "@aicut/core/styles.css";
+
+function Relight() {
+  const apiRef = useRef<LightingEditorApi | null>(null);
+  return (
+    <LightingEditor
+      apiRef={apiRef}
+      subjectImageUrl="/frames/subject.jpg"
+      smartEnabled
+      smartPanel={
+        <>
+          <textarea placeholder="Describe the mood…" />
+          <button onClick={() => apiRef.current?.requestGenerate()}>
+            Generate
+          </button>
+        </>
+      }
+      onChange={(cfg: LightingConfig) => console.log(cfg)}
+      onGenerate={(cfg) =>
+        fetch("/relight", {
+          method: "POST",
+          body: JSON.stringify(cfg),
+        })
+      }
+    />
+  );
+}
+```
+
+Props: `subjectImageUrl`, `defaultConfig`, `defaultView`, `theme`, `locale`, `smartEnabled`, `smartOpen`, `smartPanel`, `onChange`, `onGenerate`, `onSmartOpenChange`. The host's `smartPanel` is portaled into the editor's slot; the library renders the × close button + a "Smart mode" header pill to re-open it.
+
 ## Standalone `<Timeline>`
 
 Use the canvas timeline without the rest of the editor — frame-pickers, thumbnail strips, read-only previews.

package/dist/lighting.cjs

@@ -0,0 +1,111 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lighting.ts
+var lighting_exports = {};
+__export(lighting_exports, {
+  DEFAULT_LIGHTING_CONFIG: () => import_lighting2.DEFAULT_LIGHTING_CONFIG,
+  LightingEditor: () => LightingEditor,
+  PRESET_DIRECTIONS: () => import_lighting2.PRESET_DIRECTIONS,
+  lightingLocaleEn: () => import_lighting2.lightingLocaleEn,
+  lightingLocaleZh: () => import_lighting2.lightingLocaleZh,
+  mergeLightingLocale: () => import_lighting2.mergeLightingLocale,
+  snapToPreset: () => import_lighting2.snapToPreset
+});
+module.exports = __toCommonJS(lighting_exports);
+
+// src/LightingEditor.tsx
+var import_react = require("react");
+var import_lighting = require("@aicut/core/lighting");
+var import_jsx_runtime = require("react/jsx-runtime");
+function LightingEditor(props) {
+  const hostRef = (0, import_react.useRef)(null);
+  const editorRef = (0, import_react.useRef)(null);
+  const [ready, setReady] = (0, import_react.useState)(false);
+  const cbRef = (0, import_react.useRef)(props);
+  cbRef.current = props;
+  (0, import_react.useEffect)(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const editor = import_lighting.LightingEditor.create({
+      container: host,
+      subjectImageUrl: cbRef.current.subjectImageUrl,
+      config: cbRef.current.defaultConfig,
+      view: cbRef.current.defaultView,
+      theme: cbRef.current.theme,
+      locale: cbRef.current.locale,
+      onChange: (cfg) => cbRef.current.onChange?.(cfg)
+    });
+    editorRef.current = editor;
+    setReady(true);
+    return () => {
+      editor.destroy();
+      editorRef.current = null;
+      setReady(false);
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (props.theme) editorRef.current?.setTheme(props.theme);
+  }, [props.theme]);
+  (0, import_react.useEffect)(() => {
+    editorRef.current?.setLocale(props.locale ?? {});
+  }, [props.locale]);
+  (0, import_react.useEffect)(() => {
+    if (props.subjectImageUrl)
+      editorRef.current?.setSubjectImage(props.subjectImageUrl);
+  }, [props.subjectImageUrl]);
+  (0, import_react.useImperativeHandle)(
+    props.apiRef,
+    () => {
+      const ed = editorRef.current;
+      if (!ed) return null;
+      return {
+        setConfig: (p) => ed.setConfig(p),
+        getConfig: () => ed.getConfig(),
+        setSubjectImage: (url) => ed.setSubjectImage(url),
+        setView: (v) => ed.setView(v),
+        getView: () => ed.getView()
+      };
+    },
+    [ready]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: hostRef,
+      className: props.className,
+      style: props.style,
+      "data-aicut-lighting-host": ""
+    }
+  );
+}
+
+// src/lighting.ts
+var import_lighting2 = require("@aicut/core/lighting");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_LIGHTING_CONFIG,
+  LightingEditor,
+  PRESET_DIRECTIONS,
+  lightingLocaleEn,
+  lightingLocaleZh,
+  mergeLightingLocale,
+  snapToPreset
+});
+//# sourceMappingURL=lighting.cjs.map

package/dist/lighting.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lighting.ts","../src/LightingEditor.tsx"],"sourcesContent":["/**\n * @aicut/react/lighting — separate entry that pulls three.js. Users\n * who never import this path don't pay the three.js bundle cost.\n */\nexport { LightingEditor } from \"./LightingEditor.js\";\nexport type {\n  LightingEditorProps,\n  LightingEditorApi,\n} from \"./LightingEditor.js\";\n\n// Re-export the data + locale exports from the core sub-entry so\n// hosts only need a single import line for everything lighting-related.\nexport {\n  DEFAULT_LIGHTING_CONFIG,\n  PRESET_DIRECTIONS,\n  lightingLocaleEn,\n  lightingLocaleZh,\n  mergeLightingLocale,\n  snapToPreset,\n} from \"@aicut/core/lighting\";\nexport type {\n  KeyPreset,\n  LightingConfig,\n  LightingEditorOptions,\n  LightingLocale,\n  LightingView,\n} from \"@aicut/core/lighting\";\n","import {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type Ref,\n} from \"react\";\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\nexport interface LightingEditorApi {\n  setConfig(partial: Partial<LightingConfig>): void;\n  getConfig(): LightingConfig;\n  setSubjectImage(url: string): void;\n  setView(v: LightingView): void;\n  getView(): LightingView;\n}\n\nexport interface LightingEditorProps {\n  /** Initial subject image (URL or data URI). Reactive. */\n  subjectImageUrl?: string;\n  /** Initial config. */\n  defaultConfig?: Partial<LightingConfig>;\n  /** Initial view. Default `\"perspective\"`. */\n  defaultView?: LightingView;\n  /** Theme — reactive (calls editor.setTheme). */\n  theme?: Theme;\n  /** Locale partial — reactive (calls editor.setLocale). */\n  locale?: LightingEditorOptions[\"locale\"];\n\n  className?: string;\n  style?: CSSProperties;\n  apiRef?: Ref<LightingEditorApi | null>;\n\n  onChange?: (cfg: LightingConfig) => void;\n}\n\n/**\n * React shell for the 3D lighting picker. Renders scene + controls;\n * nothing else. Host code lays out their own surrounding UI (smart\n * mode panel, generate button, etc.) alongside this component in\n * whatever flex/grid the host prefers.\n */\nexport function LightingEditor(props: LightingEditorProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const editorRef = useRef<CoreLightingEditor | null>(null);\n  // Triggers a re-render the moment the editor is created, so the\n  // useImperativeHandle factory below can return the real instance\n  // instead of locking at null forever (same trick as VideoEditor).\n  const [ready, setReady] = useState(false);\n\n  const cbRef = useRef(props);\n  cbRef.current = props;\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const editor = CoreLightingEditor.create({\n      container: host,\n      subjectImageUrl: cbRef.current.subjectImageUrl,\n      config: cbRef.current.defaultConfig,\n      view: cbRef.current.defaultView,\n      theme: cbRef.current.theme,\n      locale: cbRef.current.locale,\n      onChange: (cfg) => cbRef.current.onChange?.(cfg),\n    });\n    editorRef.current = editor;\n    setReady(true);\n    return () => {\n      editor.destroy();\n      editorRef.current = null;\n      setReady(false);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (props.theme) editorRef.current?.setTheme(props.theme);\n  }, [props.theme]);\n  useEffect(() => {\n    // Always push — `undefined` is the \"reset to English defaults\"\n    // signal. Without this, toggling ZH→EN in the host kept ZH labels.\n    editorRef.current?.setLocale(props.locale ?? {});\n  }, [props.locale]);\n  useEffect(() => {\n    if (props.subjectImageUrl)\n      editorRef.current?.setSubjectImage(props.subjectImageUrl);\n  }, [props.subjectImageUrl]);\n\n  useImperativeHandle<LightingEditorApi | null, LightingEditorApi | null>(\n    props.apiRef,\n    () => {\n      const ed = editorRef.current;\n      if (!ed) return null;\n      return {\n        setConfig: (p) => ed.setConfig(p),\n        getConfig: () => ed.getConfig(),\n        setSubjectImage: (url) => ed.setSubjectImage(url),\n        setView: (v) => ed.setView(v),\n        getView: () => ed.getView(),\n      };\n    },\n    [ready],\n  );\n\n  return (\n    <div\n      ref={hostRef}\n      className={props.className}\n      style={props.style}\n      data-aicut-lighting-host=\"\"\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAOO;AACP,sBAKO;AAmGH;AA/DG,SAAS,eAAe,OAA4B;AACzD,QAAM,cAAU,qBAA8B,IAAI;AAClD,QAAM,gBAAY,qBAAkC,IAAI;AAIxD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,KAAK;AAExC,QAAM,YAAQ,qBAAO,KAAK;AAC1B,QAAM,UAAU;AAEhB,8BAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,UAAM,SAAS,gBAAAA,eAAmB,OAAO;AAAA,MACvC,WAAW;AAAA,MACX,iBAAiB,MAAM,QAAQ;AAAA,MAC/B,QAAQ,MAAM,QAAQ;AAAA,MACtB,MAAM,MAAM,QAAQ;AAAA,MACpB,OAAO,MAAM,QAAQ;AAAA,MACrB,QAAQ,MAAM,QAAQ;AAAA,MACtB,UAAU,CAAC,QAAQ,MAAM,QAAQ,WAAW,GAAG;AAAA,IACjD,CAAC;AACD,cAAU,UAAU;AACpB,aAAS,IAAI;AACb,WAAO,MAAM;AACX,aAAO,QAAQ;AACf,gBAAU,UAAU;AACpB,eAAS,KAAK;AAAA,IAChB;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,MAAM,MAAO,WAAU,SAAS,SAAS,MAAM,KAAK;AAAA,EAC1D,GAAG,CAAC,MAAM,KAAK,CAAC;AAChB,8BAAU,MAAM;AAGd,cAAU,SAAS,UAAU,MAAM,UAAU,CAAC,CAAC;AAAA,EACjD,GAAG,CAAC,MAAM,MAAM,CAAC;AACjB,8BAAU,MAAM;AACd,QAAI,MAAM;AACR,gBAAU,SAAS,gBAAgB,MAAM,eAAe;AAAA,EAC5D,GAAG,CAAC,MAAM,eAAe,CAAC;AAE1B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AACJ,YAAM,KAAK,UAAU;AACrB,UAAI,CAAC,GAAI,QAAO;AAChB,aAAO;AAAA,QACL,WAAW,CAAC,MAAM,GAAG,UAAU,CAAC;AAAA,QAChC,WAAW,MAAM,GAAG,UAAU;AAAA,QAC9B,iBAAiB,CAAC,QAAQ,GAAG,gBAAgB,GAAG;AAAA,QAChD,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC;AAAA,QAC5B,SAAS,MAAM,GAAG,QAAQ;AAAA,MAC5B;AAAA,IACF;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,MAAM;AAAA,MACjB,OAAO,MAAM;AAAA,MACb,4BAAyB;AAAA;AAAA,EAC3B;AAEJ;;;AD3GA,IAAAC,mBAOO;","names":["CoreLightingEditor","import_lighting"]}

package/dist/lighting.d.cts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { CSSProperties, Ref } from 'react';
+import { LightingConfig, LightingView, LightingEditorOptions } from '@aicut/core/lighting';
+export { DEFAULT_LIGHTING_CONFIG, KeyPreset, LightingConfig, LightingEditorOptions, LightingLocale, LightingView, PRESET_DIRECTIONS, lightingLocaleEn, lightingLocaleZh, mergeLightingLocale, snapToPreset } from '@aicut/core/lighting';
+import { Theme } from '@aicut/core';
+
+interface LightingEditorApi {
+    setConfig(partial: Partial<LightingConfig>): void;
+    getConfig(): LightingConfig;
+    setSubjectImage(url: string): void;
+    setView(v: LightingView): void;
+    getView(): LightingView;
+}
+interface LightingEditorProps {
+    /** Initial subject image (URL or data URI). Reactive. */
+    subjectImageUrl?: string;
+    /** Initial config. */
+    defaultConfig?: Partial<LightingConfig>;
+    /** Initial view. Default `"perspective"`. */
+    defaultView?: LightingView;
+    /** Theme — reactive (calls editor.setTheme). */
+    theme?: Theme;
+    /** Locale partial — reactive (calls editor.setLocale). */
+    locale?: LightingEditorOptions["locale"];
+    className?: string;
+    style?: CSSProperties;
+    apiRef?: Ref<LightingEditorApi | null>;
+    onChange?: (cfg: LightingConfig) => void;
+}
+/**
+ * React shell for the 3D lighting picker. Renders scene + controls;
+ * nothing else. Host code lays out their own surrounding UI (smart
+ * mode panel, generate button, etc.) alongside this component in
+ * whatever flex/grid the host prefers.
+ */
+declare function LightingEditor(props: LightingEditorProps): react.JSX.Element;
+
+export { LightingEditor, type LightingEditorApi, type LightingEditorProps };

package/dist/lighting.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { CSSProperties, Ref } from 'react';
+import { LightingConfig, LightingView, LightingEditorOptions } from '@aicut/core/lighting';
+export { DEFAULT_LIGHTING_CONFIG, KeyPreset, LightingConfig, LightingEditorOptions, LightingLocale, LightingView, PRESET_DIRECTIONS, lightingLocaleEn, lightingLocaleZh, mergeLightingLocale, snapToPreset } from '@aicut/core/lighting';
+import { Theme } from '@aicut/core';
+
+interface LightingEditorApi {
+    setConfig(partial: Partial<LightingConfig>): void;
+    getConfig(): LightingConfig;
+    setSubjectImage(url: string): void;
+    setView(v: LightingView): void;
+    getView(): LightingView;
+}
+interface LightingEditorProps {
+    /** Initial subject image (URL or data URI). Reactive. */
+    subjectImageUrl?: string;
+    /** Initial config. */
+    defaultConfig?: Partial<LightingConfig>;
+    /** Initial view. Default `"perspective"`. */
+    defaultView?: LightingView;
+    /** Theme — reactive (calls editor.setTheme). */
+    theme?: Theme;
+    /** Locale partial — reactive (calls editor.setLocale). */
+    locale?: LightingEditorOptions["locale"];
+    className?: string;
+    style?: CSSProperties;
+    apiRef?: Ref<LightingEditorApi | null>;
+    onChange?: (cfg: LightingConfig) => void;
+}
+/**
+ * React shell for the 3D lighting picker. Renders scene + controls;
+ * nothing else. Host code lays out their own surrounding UI (smart
+ * mode panel, generate button, etc.) alongside this component in
+ * whatever flex/grid the host prefers.
+ */
+declare function LightingEditor(props: LightingEditorProps): react.JSX.Element;
+
+export { LightingEditor, type LightingEditorApi, type LightingEditorProps };

package/dist/lighting.js

@@ -0,0 +1,92 @@
+// src/LightingEditor.tsx
+import {
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import {
+  LightingEditor as CoreLightingEditor
+} from "@aicut/core/lighting";
+import { jsx } from "react/jsx-runtime";
+function LightingEditor(props) {
+  const hostRef = useRef(null);
+  const editorRef = useRef(null);
+  const [ready, setReady] = useState(false);
+  const cbRef = useRef(props);
+  cbRef.current = props;
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const editor = CoreLightingEditor.create({
+      container: host,
+      subjectImageUrl: cbRef.current.subjectImageUrl,
+      config: cbRef.current.defaultConfig,
+      view: cbRef.current.defaultView,
+      theme: cbRef.current.theme,
+      locale: cbRef.current.locale,
+      onChange: (cfg) => cbRef.current.onChange?.(cfg)
+    });
+    editorRef.current = editor;
+    setReady(true);
+    return () => {
+      editor.destroy();
+      editorRef.current = null;
+      setReady(false);
+    };
+  }, []);
+  useEffect(() => {
+    if (props.theme) editorRef.current?.setTheme(props.theme);
+  }, [props.theme]);
+  useEffect(() => {
+    editorRef.current?.setLocale(props.locale ?? {});
+  }, [props.locale]);
+  useEffect(() => {
+    if (props.subjectImageUrl)
+      editorRef.current?.setSubjectImage(props.subjectImageUrl);
+  }, [props.subjectImageUrl]);
+  useImperativeHandle(
+    props.apiRef,
+    () => {
+      const ed = editorRef.current;
+      if (!ed) return null;
+      return {
+        setConfig: (p) => ed.setConfig(p),
+        getConfig: () => ed.getConfig(),
+        setSubjectImage: (url) => ed.setSubjectImage(url),
+        setView: (v) => ed.setView(v),
+        getView: () => ed.getView()
+      };
+    },
+    [ready]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: hostRef,
+      className: props.className,
+      style: props.style,
+      "data-aicut-lighting-host": ""
+    }
+  );
+}
+
+// src/lighting.ts
+import {
+  DEFAULT_LIGHTING_CONFIG,
+  PRESET_DIRECTIONS,
+  lightingLocaleEn,
+  lightingLocaleZh,
+  mergeLightingLocale,
+  snapToPreset
+} from "@aicut/core/lighting";
+export {
+  DEFAULT_LIGHTING_CONFIG,
+  LightingEditor,
+  PRESET_DIRECTIONS,
+  lightingLocaleEn,
+  lightingLocaleZh,
+  mergeLightingLocale,
+  snapToPreset
+};
+//# sourceMappingURL=lighting.js.map

package/dist/lighting.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/LightingEditor.tsx","../src/lighting.ts"],"sourcesContent":["import {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type Ref,\n} from \"react\";\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\nexport interface LightingEditorApi {\n  setConfig(partial: Partial<LightingConfig>): void;\n  getConfig(): LightingConfig;\n  setSubjectImage(url: string): void;\n  setView(v: LightingView): void;\n  getView(): LightingView;\n}\n\nexport interface LightingEditorProps {\n  /** Initial subject image (URL or data URI). Reactive. */\n  subjectImageUrl?: string;\n  /** Initial config. */\n  defaultConfig?: Partial<LightingConfig>;\n  /** Initial view. Default `\"perspective\"`. */\n  defaultView?: LightingView;\n  /** Theme — reactive (calls editor.setTheme). */\n  theme?: Theme;\n  /** Locale partial — reactive (calls editor.setLocale). */\n  locale?: LightingEditorOptions[\"locale\"];\n\n  className?: string;\n  style?: CSSProperties;\n  apiRef?: Ref<LightingEditorApi | null>;\n\n  onChange?: (cfg: LightingConfig) => void;\n}\n\n/**\n * React shell for the 3D lighting picker. Renders scene + controls;\n * nothing else. Host code lays out their own surrounding UI (smart\n * mode panel, generate button, etc.) alongside this component in\n * whatever flex/grid the host prefers.\n */\nexport function LightingEditor(props: LightingEditorProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const editorRef = useRef<CoreLightingEditor | null>(null);\n  // Triggers a re-render the moment the editor is created, so the\n  // useImperativeHandle factory below can return the real instance\n  // instead of locking at null forever (same trick as VideoEditor).\n  const [ready, setReady] = useState(false);\n\n  const cbRef = useRef(props);\n  cbRef.current = props;\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const editor = CoreLightingEditor.create({\n      container: host,\n      subjectImageUrl: cbRef.current.subjectImageUrl,\n      config: cbRef.current.defaultConfig,\n      view: cbRef.current.defaultView,\n      theme: cbRef.current.theme,\n      locale: cbRef.current.locale,\n      onChange: (cfg) => cbRef.current.onChange?.(cfg),\n    });\n    editorRef.current = editor;\n    setReady(true);\n    return () => {\n      editor.destroy();\n      editorRef.current = null;\n      setReady(false);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (props.theme) editorRef.current?.setTheme(props.theme);\n  }, [props.theme]);\n  useEffect(() => {\n    // Always push — `undefined` is the \"reset to English defaults\"\n    // signal. Without this, toggling ZH→EN in the host kept ZH labels.\n    editorRef.current?.setLocale(props.locale ?? {});\n  }, [props.locale]);\n  useEffect(() => {\n    if (props.subjectImageUrl)\n      editorRef.current?.setSubjectImage(props.subjectImageUrl);\n  }, [props.subjectImageUrl]);\n\n  useImperativeHandle<LightingEditorApi | null, LightingEditorApi | null>(\n    props.apiRef,\n    () => {\n      const ed = editorRef.current;\n      if (!ed) return null;\n      return {\n        setConfig: (p) => ed.setConfig(p),\n        getConfig: () => ed.getConfig(),\n        setSubjectImage: (url) => ed.setSubjectImage(url),\n        setView: (v) => ed.setView(v),\n        getView: () => ed.getView(),\n      };\n    },\n    [ready],\n  );\n\n  return (\n    <div\n      ref={hostRef}\n      className={props.className}\n      style={props.style}\n      data-aicut-lighting-host=\"\"\n    />\n  );\n}\n","/**\n * @aicut/react/lighting — separate entry that pulls three.js. Users\n * who never import this path don't pay the three.js bundle cost.\n */\nexport { LightingEditor } from \"./LightingEditor.js\";\nexport type {\n  LightingEditorProps,\n  LightingEditorApi,\n} from \"./LightingEditor.js\";\n\n// Re-export the data + locale exports from the core sub-entry so\n// hosts only need a single import line for everything lighting-related.\nexport {\n  DEFAULT_LIGHTING_CONFIG,\n  PRESET_DIRECTIONS,\n  lightingLocaleEn,\n  lightingLocaleZh,\n  mergeLightingLocale,\n  snapToPreset,\n} from \"@aicut/core/lighting\";\nexport type {\n  KeyPreset,\n  LightingConfig,\n  LightingEditorOptions,\n  LightingLocale,\n  LightingView,\n} from \"@aicut/core/lighting\";\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE,kBAAkB;AAAA,OAIb;AAmGH;AA/DG,SAAS,eAAe,OAA4B;AACzD,QAAM,UAAU,OAA8B,IAAI;AAClD,QAAM,YAAY,OAAkC,IAAI;AAIxD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAExC,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAU;AAEhB,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,UAAM,SAAS,mBAAmB,OAAO;AAAA,MACvC,WAAW;AAAA,MACX,iBAAiB,MAAM,QAAQ;AAAA,MAC/B,QAAQ,MAAM,QAAQ;AAAA,MACtB,MAAM,MAAM,QAAQ;AAAA,MACpB,OAAO,MAAM,QAAQ;AAAA,MACrB,QAAQ,MAAM,QAAQ;AAAA,MACtB,UAAU,CAAC,QAAQ,MAAM,QAAQ,WAAW,GAAG;AAAA,IACjD,CAAC;AACD,cAAU,UAAU;AACpB,aAAS,IAAI;AACb,WAAO,MAAM;AACX,aAAO,QAAQ;AACf,gBAAU,UAAU;AACpB,eAAS,KAAK;AAAA,IAChB;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,MAAM,MAAO,WAAU,SAAS,SAAS,MAAM,KAAK;AAAA,EAC1D,GAAG,CAAC,MAAM,KAAK,CAAC;AAChB,YAAU,MAAM;AAGd,cAAU,SAAS,UAAU,MAAM,UAAU,CAAC,CAAC;AAAA,EACjD,GAAG,CAAC,MAAM,MAAM,CAAC;AACjB,YAAU,MAAM;AACd,QAAI,MAAM;AACR,gBAAU,SAAS,gBAAgB,MAAM,eAAe;AAAA,EAC5D,GAAG,CAAC,MAAM,eAAe,CAAC;AAE1B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AACJ,YAAM,KAAK,UAAU;AACrB,UAAI,CAAC,GAAI,QAAO;AAChB,aAAO;AAAA,QACL,WAAW,CAAC,MAAM,GAAG,UAAU,CAAC;AAAA,QAChC,WAAW,MAAM,GAAG,UAAU;AAAA,QAC9B,iBAAiB,CAAC,QAAQ,GAAG,gBAAgB,GAAG;AAAA,QAChD,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC;AAAA,QAC5B,SAAS,MAAM,GAAG,QAAQ;AAAA,MAC5B;AAAA,IACF;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,MAAM;AAAA,MACjB,OAAO,MAAM;AAAA,MACb,4BAAyB;AAAA;AAAA,EAC3B;AAEJ;;;AC3GA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aicut/react",
-  "version": "0.1.1",
-  "description": "React wrapper for the AiCut video editor — thin declarative shell over @aicut/core.",
+  "version": "0.3.0",
+  "description": "React 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",
@@ -34,7 +34,9 @@
     "davinci",
     "imovie",
     "veed",
-    "filmora"
+    "filmora",
+    "lighting",
+    "three.js"
   ],
   "type": "module",
   "main": "./dist/index.cjs",
@@ -45,6 +47,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": [
@@ -52,7 +59,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@aicut/core": "0.1.1"
+    "@aicut/core": "0.3.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",