@aicut/react 0.1.1 → 0.2.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,130 @@
+"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_react_dom = require("react-dom");
+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 [slot, setSlot] = (0, import_react.useState)(null);
+  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,
+      smartEnabled: cbRef.current.smartEnabled,
+      smartOpen: cbRef.current.smartOpen,
+      theme: cbRef.current.theme,
+      locale: cbRef.current.locale,
+      onChange: (cfg) => cbRef.current.onChange?.(cfg),
+      onGenerate: (cfg) => cbRef.current.onGenerate?.(cfg),
+      onSmartOpenChange: (open) => cbRef.current.onSmartOpenChange?.(open)
+    });
+    editorRef.current = editor;
+    setSlot(editor.smartSlot);
+    return () => {
+      editor.destroy();
+      editorRef.current = null;
+      setSlot(null);
+    };
+  }, []);
+  (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.useEffect)(() => {
+    if (props.smartEnabled !== void 0)
+      editorRef.current?.setSmartEnabled(props.smartEnabled);
+  }, [props.smartEnabled]);
+  (0, import_react.useEffect)(() => {
+    if (props.smartOpen !== void 0)
+      editorRef.current?.setSmartOpen(props.smartOpen);
+  }, [props.smartOpen]);
+  (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(),
+        setSmartEnabled: (en) => ed.setSmartEnabled(en),
+        isSmartEnabled: () => ed.isSmartEnabled(),
+        setSmartOpen: (open) => ed.setSmartOpen(open),
+        isSmartOpen: () => ed.isSmartOpen(),
+        requestGenerate: () => ed.requestGenerate()
+      };
+    },
+    [slot]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: hostRef,
+      className: props.className,
+      style: props.style,
+      "data-aicut-lighting-host": "",
+      children: slot && props.smartPanel != null ? (0, import_react_dom.createPortal)(props.smartPanel, slot) : null
+    }
+  );
+}
+
+// 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 ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\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 * Imperative handle. Mirrors the core class's mutating surface, plus\n * a `requestGenerate()` shortcut so host buttons inside the smart slot\n * don't need to thread the api ref to fire onGenerate.\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  setSmartEnabled(enabled: boolean): void;\n  isSmartEnabled(): boolean;\n  setSmartOpen(open: boolean): void;\n  isSmartOpen(): boolean;\n  requestGenerate(): void;\n}\n\nexport interface LightingEditorProps {\n  /** Initial subject image (URL or data URI). */\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  /**\n   * Any React node — portaled into the editor's smart slot. Host uses\n   * this for prompt textarea, preset grid, generate button, anything.\n   * The library renders nothing into the slot until you populate it.\n   */\n  smartPanel?: ReactNode;\n  /**\n   * Whether the Smart mode feature is wired in at all. When false,\n   * the column AND the controls-header toggle disappear — leaving a\n   * clean 2-col scene + controls layout. Default `true`. Reactive.\n   */\n  smartEnabled?: boolean;\n  /**\n   * When `smartEnabled`, whether the slot drawer starts open. Reactive\n   * — flips re-fire the editor's `setSmartOpen` so the panel slides\n   * in/out. Default `true`.\n   */\n  smartOpen?: boolean;\n\n  className?: string;\n  style?: CSSProperties;\n  apiRef?: Ref<LightingEditorApi | null>;\n\n  onChange?: (cfg: LightingConfig) => void;\n  onGenerate?: (cfg: LightingConfig) => void;\n  /** Fires when the user clicks × or the Smart mode header toggle. */\n  onSmartOpenChange?: (open: boolean) => void;\n}\n\nexport function LightingEditor(props: LightingEditorProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const editorRef = useRef<CoreLightingEditor | null>(null);\n  // smart slot DOM node — set once the editor mounts; gates the portal.\n  const [slot, setSlot] = useState<HTMLElement | null>(null);\n\n  // Stable closure for callbacks the core only ever subscribes to once.\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      smartEnabled: cbRef.current.smartEnabled,\n      smartOpen: cbRef.current.smartOpen,\n      theme: cbRef.current.theme,\n      locale: cbRef.current.locale,\n      onChange: (cfg) => cbRef.current.onChange?.(cfg),\n      onGenerate: (cfg) => cbRef.current.onGenerate?.(cfg),\n      onSmartOpenChange: (open) =>\n        cbRef.current.onSmartOpenChange?.(open),\n    });\n    editorRef.current = editor;\n    setSlot(editor.smartSlot);\n    return () => {\n      editor.destroy();\n      editorRef.current = null;\n      setSlot(null);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Reactive prop mirror — theme + locale + subject only. Config /\n  // view are owned by the editor instance after mount; host should\n  // use `apiRef.current?.setConfig(…)` to push them.\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. Previously the `if (props.locale)` guard meant that\n    // toggling ZH→EN in the host kept the ZH labels in place.\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  useEffect(() => {\n    if (props.smartEnabled !== undefined)\n      editorRef.current?.setSmartEnabled(props.smartEnabled);\n  }, [props.smartEnabled]);\n  useEffect(() => {\n    if (props.smartOpen !== undefined)\n      editorRef.current?.setSmartOpen(props.smartOpen);\n  }, [props.smartOpen]);\n\n  // Keyed on `slot` for the same reason VideoEditor's apiRef is —\n  // useImperativeHandle's factory runs in the commit phase BEFORE\n  // useEffect, so with `[]` deps the ref locks to null forever.\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        setSmartEnabled: (en) => ed.setSmartEnabled(en),\n        isSmartEnabled: () => ed.isSmartEnabled(),\n        setSmartOpen: (open) => ed.setSmartOpen(open),\n        isSmartOpen: () => ed.isSmartOpen(),\n        requestGenerate: () => ed.requestGenerate(),\n      };\n    },\n    [slot],\n  );\n\n  return (\n    <div\n      ref={hostRef}\n      className={props.className}\n      style={props.style}\n      data-aicut-lighting-host=\"\"\n    >\n      {slot && props.smartPanel != null\n        ? createPortal(props.smartPanel, slot)\n        : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":["CoreLightingEditor","import_lighting"]}

package/dist/lighting.d.cts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { ReactNode, 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';
+
+/**
+ * Imperative handle. Mirrors the core class's mutating surface, plus
+ * a `requestGenerate()` shortcut so host buttons inside the smart slot
+ * don't need to thread the api ref to fire onGenerate.
+ */
+interface LightingEditorApi {
+    setConfig(partial: Partial<LightingConfig>): void;
+    getConfig(): LightingConfig;
+    setSubjectImage(url: string): void;
+    setView(v: LightingView): void;
+    getView(): LightingView;
+    setSmartEnabled(enabled: boolean): void;
+    isSmartEnabled(): boolean;
+    setSmartOpen(open: boolean): void;
+    isSmartOpen(): boolean;
+    requestGenerate(): void;
+}
+interface LightingEditorProps {
+    /** Initial subject image (URL or data URI). */
+    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"];
+    /**
+     * Any React node — portaled into the editor's smart slot. Host uses
+     * this for prompt textarea, preset grid, generate button, anything.
+     * The library renders nothing into the slot until you populate it.
+     */
+    smartPanel?: ReactNode;
+    /**
+     * Whether the Smart mode feature is wired in at all. When false,
+     * the column AND the controls-header toggle disappear — leaving a
+     * clean 2-col scene + controls layout. Default `true`. Reactive.
+     */
+    smartEnabled?: boolean;
+    /**
+     * When `smartEnabled`, whether the slot drawer starts open. Reactive
+     * — flips re-fire the editor's `setSmartOpen` so the panel slides
+     * in/out. Default `true`.
+     */
+    smartOpen?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    apiRef?: Ref<LightingEditorApi | null>;
+    onChange?: (cfg: LightingConfig) => void;
+    onGenerate?: (cfg: LightingConfig) => void;
+    /** Fires when the user clicks × or the Smart mode header toggle. */
+    onSmartOpenChange?: (open: boolean) => void;
+}
+declare function LightingEditor(props: LightingEditorProps): react.JSX.Element;
+
+export { LightingEditor, type LightingEditorApi, type LightingEditorProps };

package/dist/lighting.d.ts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { ReactNode, 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';
+
+/**
+ * Imperative handle. Mirrors the core class's mutating surface, plus
+ * a `requestGenerate()` shortcut so host buttons inside the smart slot
+ * don't need to thread the api ref to fire onGenerate.
+ */
+interface LightingEditorApi {
+    setConfig(partial: Partial<LightingConfig>): void;
+    getConfig(): LightingConfig;
+    setSubjectImage(url: string): void;
+    setView(v: LightingView): void;
+    getView(): LightingView;
+    setSmartEnabled(enabled: boolean): void;
+    isSmartEnabled(): boolean;
+    setSmartOpen(open: boolean): void;
+    isSmartOpen(): boolean;
+    requestGenerate(): void;
+}
+interface LightingEditorProps {
+    /** Initial subject image (URL or data URI). */
+    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"];
+    /**
+     * Any React node — portaled into the editor's smart slot. Host uses
+     * this for prompt textarea, preset grid, generate button, anything.
+     * The library renders nothing into the slot until you populate it.
+     */
+    smartPanel?: ReactNode;
+    /**
+     * Whether the Smart mode feature is wired in at all. When false,
+     * the column AND the controls-header toggle disappear — leaving a
+     * clean 2-col scene + controls layout. Default `true`. Reactive.
+     */
+    smartEnabled?: boolean;
+    /**
+     * When `smartEnabled`, whether the slot drawer starts open. Reactive
+     * — flips re-fire the editor's `setSmartOpen` so the panel slides
+     * in/out. Default `true`.
+     */
+    smartOpen?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    apiRef?: Ref<LightingEditorApi | null>;
+    onChange?: (cfg: LightingConfig) => void;
+    onGenerate?: (cfg: LightingConfig) => void;
+    /** Fires when the user clicks × or the Smart mode header toggle. */
+    onSmartOpenChange?: (open: boolean) => void;
+}
+declare function LightingEditor(props: LightingEditorProps): react.JSX.Element;
+
+export { LightingEditor, type LightingEditorApi, type LightingEditorProps };

package/dist/lighting.js

@@ -0,0 +1,111 @@
+// src/LightingEditor.tsx
+import {
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+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 [slot, setSlot] = useState(null);
+  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,
+      smartEnabled: cbRef.current.smartEnabled,
+      smartOpen: cbRef.current.smartOpen,
+      theme: cbRef.current.theme,
+      locale: cbRef.current.locale,
+      onChange: (cfg) => cbRef.current.onChange?.(cfg),
+      onGenerate: (cfg) => cbRef.current.onGenerate?.(cfg),
+      onSmartOpenChange: (open) => cbRef.current.onSmartOpenChange?.(open)
+    });
+    editorRef.current = editor;
+    setSlot(editor.smartSlot);
+    return () => {
+      editor.destroy();
+      editorRef.current = null;
+      setSlot(null);
+    };
+  }, []);
+  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]);
+  useEffect(() => {
+    if (props.smartEnabled !== void 0)
+      editorRef.current?.setSmartEnabled(props.smartEnabled);
+  }, [props.smartEnabled]);
+  useEffect(() => {
+    if (props.smartOpen !== void 0)
+      editorRef.current?.setSmartOpen(props.smartOpen);
+  }, [props.smartOpen]);
+  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(),
+        setSmartEnabled: (en) => ed.setSmartEnabled(en),
+        isSmartEnabled: () => ed.isSmartEnabled(),
+        setSmartOpen: (open) => ed.setSmartOpen(open),
+        isSmartOpen: () => ed.isSmartOpen(),
+        requestGenerate: () => ed.requestGenerate()
+      };
+    },
+    [slot]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: hostRef,
+      className: props.className,
+      style: props.style,
+      "data-aicut-lighting-host": "",
+      children: slot && props.smartPanel != null ? createPortal(props.smartPanel, slot) : null
+    }
+  );
+}
+
+// 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 ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\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 * Imperative handle. Mirrors the core class's mutating surface, plus\n * a `requestGenerate()` shortcut so host buttons inside the smart slot\n * don't need to thread the api ref to fire onGenerate.\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  setSmartEnabled(enabled: boolean): void;\n  isSmartEnabled(): boolean;\n  setSmartOpen(open: boolean): void;\n  isSmartOpen(): boolean;\n  requestGenerate(): void;\n}\n\nexport interface LightingEditorProps {\n  /** Initial subject image (URL or data URI). */\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  /**\n   * Any React node — portaled into the editor's smart slot. Host uses\n   * this for prompt textarea, preset grid, generate button, anything.\n   * The library renders nothing into the slot until you populate it.\n   */\n  smartPanel?: ReactNode;\n  /**\n   * Whether the Smart mode feature is wired in at all. When false,\n   * the column AND the controls-header toggle disappear — leaving a\n   * clean 2-col scene + controls layout. Default `true`. Reactive.\n   */\n  smartEnabled?: boolean;\n  /**\n   * When `smartEnabled`, whether the slot drawer starts open. Reactive\n   * — flips re-fire the editor's `setSmartOpen` so the panel slides\n   * in/out. Default `true`.\n   */\n  smartOpen?: boolean;\n\n  className?: string;\n  style?: CSSProperties;\n  apiRef?: Ref<LightingEditorApi | null>;\n\n  onChange?: (cfg: LightingConfig) => void;\n  onGenerate?: (cfg: LightingConfig) => void;\n  /** Fires when the user clicks × or the Smart mode header toggle. */\n  onSmartOpenChange?: (open: boolean) => void;\n}\n\nexport function LightingEditor(props: LightingEditorProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const editorRef = useRef<CoreLightingEditor | null>(null);\n  // smart slot DOM node — set once the editor mounts; gates the portal.\n  const [slot, setSlot] = useState<HTMLElement | null>(null);\n\n  // Stable closure for callbacks the core only ever subscribes to once.\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      smartEnabled: cbRef.current.smartEnabled,\n      smartOpen: cbRef.current.smartOpen,\n      theme: cbRef.current.theme,\n      locale: cbRef.current.locale,\n      onChange: (cfg) => cbRef.current.onChange?.(cfg),\n      onGenerate: (cfg) => cbRef.current.onGenerate?.(cfg),\n      onSmartOpenChange: (open) =>\n        cbRef.current.onSmartOpenChange?.(open),\n    });\n    editorRef.current = editor;\n    setSlot(editor.smartSlot);\n    return () => {\n      editor.destroy();\n      editorRef.current = null;\n      setSlot(null);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Reactive prop mirror — theme + locale + subject only. Config /\n  // view are owned by the editor instance after mount; host should\n  // use `apiRef.current?.setConfig(…)` to push them.\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. Previously the `if (props.locale)` guard meant that\n    // toggling ZH→EN in the host kept the ZH labels in place.\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  useEffect(() => {\n    if (props.smartEnabled !== undefined)\n      editorRef.current?.setSmartEnabled(props.smartEnabled);\n  }, [props.smartEnabled]);\n  useEffect(() => {\n    if (props.smartOpen !== undefined)\n      editorRef.current?.setSmartOpen(props.smartOpen);\n  }, [props.smartOpen]);\n\n  // Keyed on `slot` for the same reason VideoEditor's apiRef is —\n  // useImperativeHandle's factory runs in the commit phase BEFORE\n  // useEffect, so with `[]` deps the ref locks to null forever.\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        setSmartEnabled: (en) => ed.setSmartEnabled(en),\n        isSmartEnabled: () => ed.isSmartEnabled(),\n        setSmartOpen: (open) => ed.setSmartOpen(open),\n        isSmartOpen: () => ed.isSmartOpen(),\n        requestGenerate: () => ed.requestGenerate(),\n      };\n    },\n    [slot],\n  );\n\n  return (\n    <div\n      ref={hostRef}\n      className={props.className}\n      style={props.style}\n      data-aicut-lighting-host=\"\"\n    >\n      {slot && props.smartPanel != null\n        ? createPortal(props.smartPanel, slot)\n        : null}\n    </div>\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":"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","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.2.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.2.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",