@aicut/core 0.2.0 → 0.4.0

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,22 @@ 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");
+
+// 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,9 +267,6 @@ var lightingLocaleEn = {
   lightingRim: "Rim light",
   lightingViewPerspective: "Perspective",
   lightingViewFront: "Front",
-  lightingResetParams: "Reset",
-  lightingSmartClose: "Close Smart mode",
-  lightingSmartToggle: "Smart mode",
   lightingDirLeft: "Left",
   lightingDirRight: "Right",
   lightingDirTop: "Top",
@@ -284,9 +283,6 @@ var lightingLocaleZh = {
   lightingRim: "\u8F6E\u5ED3\u5149",
   lightingViewPerspective: "\u900F\u89C6",
   lightingViewFront: "\u6B63\u9762",
-  lightingResetParams: "\u91CD\u7F6E\u53C2\u6570",
-  lightingSmartClose: "\u5173\u95ED\u667A\u80FD\u6A21\u5F0F",
-  lightingSmartToggle: "\u667A\u80FD\u6A21\u5F0F",
   lightingDirLeft: "\u5DE6\u4FA7",
   lightingDirRight: "\u53F3\u4FA7",
   lightingDirTop: "\u9876\u90E8",
@@ -19041,22 +19037,14 @@ var LightingEditor = class _LightingEditor {
   config;
   view;
   locale;
-  smartEnabled;
-  smartOpen;
   scene;
   controls;
   sceneViewport;
   viewToggleEl;
-  body;
-  smartWrapper = null;
-  smartCloseBtn = null;
-  smartToggleEl = null;
-  smartToggleThumb = null;
-  /** Host slot the React/Vue wrapper portals/teleports into. Stable
-   *  reference across smartOpen toggles — only the wrapper around it
-   *  collapses/expands. Always present even when `smartEnabled: false`
-   *  so portals don't blow up; just detached from the visible tree. */
-  smartSlot;
+  /** 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) {
@@ -19067,8 +19055,6 @@ var LightingEditor = class _LightingEditor {
     this.root = opts.container;
     this.config = { ...DEFAULT_LIGHTING_CONFIG, ...opts.config };
     this.view = opts.view ?? "perspective";
-    this.smartEnabled = opts.smartEnabled !== false;
-    this.smartOpen = opts.smartOpen !== false;
     this.locale = {
       ...mergeLocale(opts.locale),
       ...mergeLightingLocale(opts.locale)
@@ -19077,9 +19063,9 @@ var LightingEditor = class _LightingEditor {
     this.root.innerHTML = "";
     if (!this.root.style.position) this.root.style.position = "relative";
     applyTheme(this.root, opts.theme);
-    this.body = document.createElement("div");
-    this.body.className = "aicut-lighting-body";
-    this.root.appendChild(this.body);
+    const body = document.createElement("div");
+    body.className = "aicut-lighting-body";
+    this.root.appendChild(body);
     const sceneCol = document.createElement("div");
     sceneCol.className = "aicut-lighting-scene-col";
     this.viewToggleEl = this.buildViewToggle();
@@ -19088,7 +19074,7 @@ var LightingEditor = class _LightingEditor {
     this.sceneViewport.className = "aicut-lighting-scene-viewport";
     this.sceneViewport.setAttribute("data-testid", "aicut-lighting-scene");
     sceneCol.appendChild(this.sceneViewport);
-    this.body.appendChild(sceneCol);
+    body.appendChild(sceneCol);
     this.controls = new LightingControls(this.locale, {
       onBrightnessChange: (level) => this.applyMutation({ brightness: level }),
       onColorChange: (hex) => this.applyMutation({ color: hex }),
@@ -19096,20 +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 })
     });
-    this.body.appendChild(this.controls.root);
-    this.smartSlot = document.createElement("div");
-    this.smartSlot.className = "aicut-lighting-smart-slot";
-    this.smartSlot.setAttribute("data-testid", "aicut-lighting-smart");
-    if (this.smartEnabled) {
-      this.smartWrapper = this.buildSmartWrapper();
-      this.body.appendChild(this.smartWrapper);
-      this.smartToggleEl = this.buildSmartToggle();
-      this.controls.headerSlot.appendChild(this.smartToggleEl);
-    }
-    this.syncSmartState();
+    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);
@@ -19153,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;
@@ -19162,42 +19143,6 @@ var LightingEditor = class _LightingEditor {
   getView() {
     return this.view;
   }
-  /** Enable/disable the entire Smart Mode feature at runtime. */
-  setSmartEnabled(enabled) {
-    if (enabled === this.smartEnabled) return;
-    this.smartEnabled = enabled;
-    if (enabled) {
-      if (!this.smartWrapper) {
-        this.smartWrapper = this.buildSmartWrapper();
-        this.body.appendChild(this.smartWrapper);
-      }
-      if (!this.smartToggleEl) {
-        this.smartToggleEl = this.buildSmartToggle();
-        this.controls.headerSlot.appendChild(this.smartToggleEl);
-      }
-    } else {
-      this.smartWrapper?.remove();
-      this.smartWrapper = null;
-      this.smartCloseBtn = null;
-      this.smartToggleEl?.remove();
-      this.smartToggleEl = null;
-      this.smartToggleThumb = null;
-    }
-    this.syncSmartState();
-  }
-  isSmartEnabled() {
-    return this.smartEnabled;
-  }
-  /** Open/close the smart slot drawer when enabled. No-op when disabled. */
-  setSmartOpen(open) {
-    if (!this.smartEnabled || open === this.smartOpen) return;
-    this.smartOpen = open;
-    this.syncSmartState();
-    this.opts.onSmartOpenChange?.(open);
-  }
-  isSmartOpen() {
-    return this.smartOpen;
-  }
   setTheme(theme) {
     applyTheme(this.root, theme);
   }
@@ -19208,10 +19153,6 @@ var LightingEditor = class _LightingEditor {
     };
     this.controls.setLocale(this.locale);
     this.syncViewToggle();
-    this.syncSmartLocale();
-  }
-  requestGenerate() {
-    this.opts.onGenerate?.(this.getConfig());
   }
   destroy() {
     if (this.destroyed) return;
@@ -19220,8 +19161,6 @@ var LightingEditor = class _LightingEditor {
     this.scene.destroy();
     this.root.innerHTML = "";
     this.root.classList.remove("aicut-root", "aicut-lighting-editor");
-    this.root.removeAttribute("data-smart-enabled");
-    this.root.removeAttribute("data-smart-open");
   }
   // ---- Internal ------------------------------------------------------
   applyMutation(partial) {
@@ -19271,86 +19210,6 @@ var LightingEditor = class _LightingEditor {
       if (v === "front") btn.textContent = this.locale.lightingViewFront;
     }
   }
-  /**
-   * Build the smart slot column wrapper: × close button + the actual
-   * host slot. Wrapper handles the drawer animation; slot reference
-   * stays stable so portals don't have to relocate.
-   */
-  buildSmartWrapper() {
-    const wrap = document.createElement("div");
-    wrap.className = "aicut-lighting-smart-wrapper";
-    this.smartCloseBtn = document.createElement("button");
-    this.smartCloseBtn.type = "button";
-    this.smartCloseBtn.className = "aicut-lighting-smart-close";
-    this.smartCloseBtn.title = this.locale.lightingSmartClose;
-    this.smartCloseBtn.setAttribute("aria-label", this.locale.lightingSmartClose);
-    this.smartCloseBtn.setAttribute("data-testid", "aicut-lighting-smart-close");
-    this.smartCloseBtn.innerHTML = "&times;";
-    this.smartCloseBtn.addEventListener("click", () => this.setSmartOpen(false));
-    wrap.appendChild(this.smartCloseBtn);
-    wrap.appendChild(this.smartSlot);
-    return wrap;
-  }
-  /** Pill-style toggle that lives in the controls header. Re-opens
-   *  the smart drawer when the host has closed it via ×. */
-  buildSmartToggle() {
-    const row = document.createElement("div");
-    row.className = "aicut-lighting-smart-toggle-row";
-    const label = document.createElement("span");
-    label.className = "aicut-lighting-smart-toggle-label";
-    label.textContent = this.locale.lightingSmartToggle;
-    row.appendChild(label);
-    const toggle = document.createElement("div");
-    toggle.className = "aicut-lighting-toggle aicut-lighting-smart-toggle";
-    toggle.setAttribute("role", "switch");
-    toggle.setAttribute("tabindex", "0");
-    toggle.setAttribute("data-testid", "aicut-lighting-smart-toggle");
-    toggle.title = this.locale.lightingSmartToggle;
-    this.smartToggleThumb = document.createElement("div");
-    this.smartToggleThumb.className = "aicut-lighting-toggle-thumb";
-    toggle.appendChild(this.smartToggleThumb);
-    toggle.addEventListener("click", () => this.setSmartOpen(!this.smartOpen));
-    row.appendChild(toggle);
-    return row;
-  }
-  /** Re-translate smart-related labels after a locale swap. */
-  syncSmartLocale() {
-    if (this.smartCloseBtn) {
-      this.smartCloseBtn.title = this.locale.lightingSmartClose;
-      this.smartCloseBtn.setAttribute("aria-label", this.locale.lightingSmartClose);
-    }
-    if (this.smartToggleEl) {
-      const label = this.smartToggleEl.querySelector(
-        ".aicut-lighting-smart-toggle-label"
-      );
-      if (label) label.textContent = this.locale.lightingSmartToggle;
-      const toggle = this.smartToggleEl.querySelector(
-        ".aicut-lighting-smart-toggle"
-      );
-      if (toggle) toggle.title = this.locale.lightingSmartToggle;
-    }
-  }
-  /** Mirror smart state to data-* attrs + toggle thumb position.
-   *  Drives the CSS that collapses the column when closed. */
-  syncSmartState() {
-    this.root.setAttribute(
-      "data-smart-enabled",
-      this.smartEnabled ? "true" : "false"
-    );
-    this.root.setAttribute(
-      "data-smart-open",
-      this.smartOpen ? "true" : "false"
-    );
-    if (this.smartToggleEl) {
-      const toggle = this.smartToggleEl.querySelector(
-        ".aicut-lighting-smart-toggle"
-      );
-      if (toggle) {
-        toggle.classList.toggle("active", this.smartOpen);
-        toggle.setAttribute("aria-checked", this.smartOpen ? "true" : "false");
-      }
-    }
-  }
 };
 /*! Bundled license information: