@aicut/core 0.3.0 → 0.4.1

package/README.md

@@ -144,7 +144,9 @@ editor.toolbarRight.appendChild(exportBtn);
 
 ## Lighting picker (opt-in sub-entry)
 
-A separate component for AI relighting workflows — drag a light dot around a 3D sphere wrapping a subject frame, control brightness / color / direction. Three.js is bundled only on this sub-entry, so consumers of the video editor pay zero bytes for it.
+A separate component for AI-relighting workflows — drag a light dot around a 3D sphere wrapping a subject frame, control brightness / color / direction. Three.js is bundled only on this sub-entry, so consumers of the video editor pay zero bytes for it.
+
+The library renders **only the picker** (scene + controls). Smart-mode UI (prompt textarea, preset thumbnails, Generate button, close handling) is host code laid out beside `<LightingEditor>`.
 
 ```ts
 import { LightingEditor } from "@aicut/core/lighting";
@@ -153,23 +155,31 @@ import "@aicut/core/styles.css";
 const ed = LightingEditor.create({
   container: document.getElementById("light")!,
   subjectImageUrl: "/frames/subject.jpg",
-  smartEnabled: true,        // default; false → no slot column at all
-  smartOpen: true,           // default; user can toggle via × / header pill
   onChange: (cfg) => console.log(cfg),
-  onGenerate: (cfg) => fetch("/relight", { method: "POST", body: JSON.stringify(cfg) }),
 });
 
-// Host appends UI into the smart slot (prompt textarea, presets, generate btn, …).
-ed.smartSlot.appendChild(myAiUI);
-
-// Runtime control:
-ed.setSmartOpen(false);
-ed.setSmartEnabled(false);
+// Runtime control
 ed.setView("front");
 ed.setConfig({ brightness: 0.8, color: "#ffaa3a" });
+ed.setSubjectImage("/frames/another-subject.jpg");
+ed.reset();                  // restore safe defaults
+
+// Footer slot — the only DOM region the library leaves for host action
+// buttons (Reset, Generate, save-preset, etc.). Library renders nothing
+// into it; host appends whatever it wants:
+const resetBtn = document.createElement("button");
+resetBtn.textContent = "Reset";
+resetBtn.onclick = () => ed.reset();
+ed.controlsFooter.appendChild(resetBtn);
+
+// Host snapshot for "Generate" — call from your own button
+function onGenerate() {
+  const cfg = ed.getConfig();
+  fetch("/relight", { method: "POST", body: JSON.stringify(cfg) });
+}
 ```
 
-Locale extension `LightingLocale` (separate from the video editor's `Locale`) is also exported with `lightingLocaleEn` / `lightingLocaleZh`.
+Locale extension `LightingLocale` (separate from the video editor's `Locale`) is exported with `lightingLocaleEn` / `lightingLocaleZh`.
 
 ## Standalone Timeline
 

package/dist/lighting/index.cjs

@@ -90,6 +90,13 @@ var LightingControls = class {
   /** Exposed so the editor can append host-level chrome (e.g. the
    *  Smart Mode toggle) without LightingControls knowing about it. */
   headerSlot;
+  /**
+   * Footer slot — sits where the built-in Reset used to live. Host
+   * appends any action buttons (Reset, Generate, Save preset, etc.)
+   * via the React wrapper's `controlsFooter` prop / Vue's
+   * `<slot name="controlsFooter">`. Library renders nothing here.
+   */
+  footerSlot;
   brightnessInput;
   colorInput;
   dirButtons;
@@ -102,7 +109,6 @@ var LightingControls = class {
   colorLabelEl;
   keyLabelEl;
   rimLabelEl;
-  resetBtn;
   locale;
   lastConfig = null;
   constructor(locale, cb) {
@@ -192,15 +198,12 @@ var LightingControls = class {
     });
     rimSection.appendChild(this.rimToggle);
     this.root.appendChild(rimSection);
-    const footer = mkDiv("aicut-lighting-section aicut-lighting-section-row");
-    this.resetBtn = document.createElement("button");
-    this.resetBtn.type = "button";
-    this.resetBtn.className = "aicut-lighting-reset";
-    this.resetBtn.textContent = locale.lightingResetParams;
-    this.resetBtn.setAttribute("data-testid", "aicut-lighting-reset");
-    this.resetBtn.addEventListener("click", () => cb.onReset());
-    footer.appendChild(this.resetBtn);
-    this.root.appendChild(footer);
+    this.footerSlot = mkDiv("aicut-lighting-controls-footer");
+    this.footerSlot.setAttribute(
+      "data-testid",
+      "aicut-lighting-controls-footer"
+    );
+    this.root.appendChild(this.footerSlot);
   }
   /** Idempotent — mirror the given config into all visible controls. */
   render(cfg) {
@@ -229,7 +232,6 @@ var LightingControls = class {
     this.colorLabelEl.textContent = locale.lightingColor;
     this.keyLabelEl.textContent = locale.lightingKeyTitle;
     this.rimLabelEl.textContent = locale.lightingRim;
-    this.resetBtn.textContent = locale.lightingResetParams;
     const dirLabels = {
       left: "lightingDirLeft",
       right: "lightingDirRight",
@@ -265,7 +267,6 @@ var lightingLocaleEn = {
   lightingRim: "Rim light",
   lightingViewPerspective: "Perspective",
   lightingViewFront: "Front",
-  lightingResetParams: "Reset",
   lightingDirLeft: "Left",
   lightingDirRight: "Right",
   lightingDirTop: "Top",
@@ -282,7 +283,6 @@ var lightingLocaleZh = {
   lightingRim: "\u8F6E\u5ED3\u5149",
   lightingViewPerspective: "\u900F\u89C6",
   lightingViewFront: "\u6B63\u9762",
-  lightingResetParams: "\u91CD\u7F6E\u53C2\u6570",
   lightingDirLeft: "\u5DE6\u4FA7",
   lightingDirRight: "\u53F3\u4FA7",
   lightingDirTop: "\u9876\u90E8",
@@ -19041,6 +19041,10 @@ var LightingEditor = class _LightingEditor {
   controls;
   sceneViewport;
   viewToggleEl;
+  /** Footer slot in the controls column. Host appends Reset/Generate/
+   *  preset-save/etc. buttons here. The library renders nothing into
+   *  it — it's the same convention as the video editor's toolbar slots. */
+  controlsFooter;
   resizeObs = null;
   destroyed = false;
   static create(opts) {
@@ -19078,10 +19082,10 @@ var LightingEditor = class _LightingEditor {
         keyDirection: PRESET_DIRECTIONS[preset],
         keyPreset: preset
       }),
-      onRimToggle: (on) => this.applyMutation({ rim: on }),
-      onReset: () => this.setConfig(DEFAULT_LIGHTING_CONFIG, "reset")
+      onRimToggle: (on) => this.applyMutation({ rim: on })
     });
     body.appendChild(this.controls.root);
+    this.controlsFooter = this.controls.footerSlot;
     this.scene = new LightingScene(this.sceneViewport, this.view);
     this.scene.setLightDirection(this.config.keyDirection);
     this.scene.setBrightness(this.config.brightness);
@@ -19125,6 +19129,11 @@ var LightingEditor = class _LightingEditor {
     this.opts.subjectImageUrl = url;
     this.scene.setSubjectImage(url);
   }
+  /** Restore config to the safe defaults. Convenience for host's
+   *  "Reset" button — equivalent to `setConfig(DEFAULT_LIGHTING_CONFIG)`. */
+  reset() {
+    this.setConfig(DEFAULT_LIGHTING_CONFIG, "reset");
+  }
   setView(v) {
     if (v === this.view) return;
     this.view = v;