@aicut/core 0.4.2 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicut/core",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Framework-agnostic core for the AiCut video editor — canvas timeline, data model, HTML5 playback engine, plus an opt-in 3D lighting picker.",
   "license": "MIT",
   "author": "ziqiang <ziqiangytu@gmail.com>",

package/styles/theme.css

@@ -52,10 +52,14 @@
   --aicut-playhead-color: var(--color-brand);
 
   display: grid;
-  /* header (auto, hidden when empty) · preview (1fr) · toolbar (auto)
-     · timeline (auto). When the header is empty the :has() rule below
-     overrides the template to drop the row so today's layout stays
-     identical for callers who don't use the header slots. */
+  /* Four explicit rows: header / preview / toolbar / timeline. When
+     the header is hidden (empty slots → display:none below), browsers
+     would otherwise auto-reflow the remaining three children into
+     rows 1/2/3 — which would put the preview in the `auto` row and
+     toolbar in the `1fr` row, causing the preview to collapse and a
+     big gap between toolbar and timeline. The explicit grid-row
+     assignments on the children pin each surface to its intended
+     row regardless of which siblings are present. */
   grid-template-rows: auto 1fr auto auto;
   width: 100%;
   height: 100%;
@@ -159,17 +163,20 @@
 }
 
 /* Auto-hide when both slots are empty — keep today's default layout
-   exactly as it was for callers that don't use the header. */
+   exactly as it was for callers that don't use the header. With the
+   per-child grid-row assignments below, display:none here cleanly
+   removes the header without reflowing preview/toolbar/timeline. */
 .aicut-root:has(.aicut-header-left:empty):has(.aicut-header-right:empty)
   .aicut-header {
   display: none;
 }
-/* Fallback for browsers without :has() — collapse the grid row when
-   the header is hidden via the above rule. Modern Chrome/Safari/
-   Firefox all support :has() so this is rarely needed. */
-.aicut-root:not(:has(.aicut-header *)) {
-  grid-template-rows: 1fr auto auto;
-}
+
+/* Pin each editor surface to its intended row. Required so the four
+   children can't auto-reflow when one (e.g. the header) is hidden. */
+.aicut-root > .aicut-header        { grid-row: 1; }
+.aicut-root > .aicut-preview-host  { grid-row: 2; }
+.aicut-root > .aicut-toolbar       { grid-row: 3; }
+.aicut-root > .aicut-timeline      { grid-row: 4; }
 
 .aicut-header-slot {
   display: flex;