@aicut/core 0.4.1 → 0.4.3

package/README.md

@@ -131,17 +131,30 @@ Editor.create({ container, project, locale: localeZh });
 editor.setLocale({ undo: "Annuler" });   // partial override
 ```
 
-## Toolbar slots
+## Host slots
 
-Both the editor's toolbar and the standalone `Timeline`'s optional toolbar expose `toolbarLeft` / `toolbarRight` slot DOM elements. The library renders nothing into them — append your own buttons.
+The editor reserves four slot DOM elements for host-supplied controls. Library paints nothing into any of them; populated slots show, empty ones collapse.
 
 ```ts
+// Header above the preview — collapses entirely when both empty.
+editor.headerLeft.textContent = "Untitled project";
 const exportBtn = document.createElement("button");
 exportBtn.textContent = "Export";
 exportBtn.onclick = () => editor.requestExport();
-editor.toolbarRight.appendChild(exportBtn);
+editor.headerRight.appendChild(exportBtn);
+
+// Toolbar bookends (next to the built-in icons)
+editor.toolbarLeft.appendChild(aspectDropdown);
+editor.toolbarRight.appendChild(customIconBtn);
 ```
 
+| Slot | Where |
+| --- | --- |
+| `editor.headerLeft` / `editor.headerRight` | Optional header row above the preview |
+| `editor.toolbarLeft` / `editor.toolbarRight` | Bookends on the toolbar row |
+
+The standalone `Timeline` also exposes `toolbarLeft` / `toolbarRight` when constructed with `toolbar: true`.
+
 ## 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.

package/dist/index.cjs

@@ -2519,6 +2519,11 @@ function scaleToSlider(scale) {
 var EditorUI = class {
   root;
   editor;
+  header;
+  /** Host-extensible slot at the very left of the editor header. */
+  headerLeft;
+  /** Host-extensible slot at the very right of the editor header. */
+  headerRight;
   preview;
   fullscreenExitBtn;
   toolbar;
@@ -2532,6 +2537,15 @@ var EditorUI = class {
     const locale = editor.getLocale();
     root.classList.add("aicut-root");
     root.innerHTML = "";
+    this.header = document.createElement("div");
+    this.header.className = "aicut-header";
+    this.header.setAttribute("data-testid", "aicut-header");
+    this.headerLeft = document.createElement("div");
+    this.headerLeft.className = "aicut-header-slot aicut-header-left";
+    this.headerRight = document.createElement("div");
+    this.headerRight.className = "aicut-header-slot aicut-header-right";
+    this.header.append(this.headerLeft, this.headerRight);
+    root.appendChild(this.header);
     this.preview = document.createElement("div");
     this.preview.className = "aicut-preview-host";
     this.preview.setAttribute("data-testid", "aicut-preview");
@@ -2810,6 +2824,12 @@ var Editor = class _Editor {
   get toolbarRight() {
     return this.ui.toolbarRight;
   }
+  get headerLeft() {
+    return this.ui.headerLeft;
+  }
+  get headerRight() {
+    return this.ui.headerRight;
+  }
   // ---- playback -------------------------------------------------------
   play() {
     this.engine.play();