@aicut/core 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicut/core",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "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

@@ -429,51 +429,33 @@
 
 .aicut-lighting-editor {
   --aicut-lighting-canvas-bg: color-mix(in srgb, var(--aicut-controls-text, rgba(255, 255, 255, 0.85)) 4%, transparent);
-  --aicut-lighting-section-gap: 14px;
+  --aicut-lighting-section-gap: 18px;
   --aicut-lighting-control-w: 220px;
   display: block;
 }
 
 .aicut-lighting-body {
   display: grid;
-  /* Fixed widths: scene 240, controls 220. Smart column gets the rest
-     when open; collapses to 0 when closed; removed entirely when smart
-     mode is disabled (see the data-smart-* rules below). */
-  grid-template-columns: 240px 220px minmax(0, 1fr);
-  gap: 16px;
+  /* Just two columns: scene 240 + controls 220. Hosts that want to
+     render an adjacent panel (AI smart mode, prompt, presets, …) put
+     their own DOM beside <LightingEditor> in their own layout. */
+  grid-template-columns: 240px 220px;
+  gap: 28px;
   align-items: start;
-  padding: 16px;
+  padding: 24px;
   background: var(--aicut-controls-bg, #1f1f22);
   color: var(--aicut-controls-text, rgba(255, 255, 255, 0.85));
   border-radius: var(--aicut-radius-md, 12px);
 }
 
-/* When smart mode is disabled outright, the smart column doesn't
-   render — collapse the grid to 2 columns so we don't leave a gap. */
-.aicut-lighting-editor[data-smart-enabled="false"] .aicut-lighting-body {
-  grid-template-columns: 240px 220px;
-}
-
-/* When smart mode is enabled but the drawer is closed, keep the slot
-   in the DOM (portals stay valid) but shrink the column to zero —
-   smooth animated drawer collapse from the right. */
-.aicut-lighting-editor[data-smart-open="false"] .aicut-lighting-body {
-  grid-template-columns: 240px 220px 0fr;
-}
-.aicut-lighting-editor[data-smart-open="false"] .aicut-lighting-smart-wrapper {
-  opacity: 0;
-  pointer-events: none;
-  visibility: hidden;
-}
-
 /* --- Scene column --- */
 .aicut-lighting-scene-col {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   /* Self-center vertically so the sphere stays at the visual midpoint
-     of the row even when the smart drawer stretches the row taller
+     of the row even when an adjacent host panel makes the row taller
      than the scene column's own content. */
   align-self: center;
 }
@@ -550,7 +532,7 @@
 .aicut-lighting-section {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 .aicut-lighting-section-row {
   flex-direction: row;
@@ -653,74 +635,20 @@
   left: 16px;
 }
 
-.aicut-lighting-reset {
-  margin-left: auto;
-  height: 28px;
-  padding: 0 12px;
-  border: 1px solid var(--aicut-controls-border, rgba(255, 255, 255, 0.08));
-  border-radius: 6px;
-  background: transparent;
-  color: var(--aicut-controls-text, rgba(255, 255, 255, 0.85));
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
-}
-.aicut-lighting-reset:hover {
-  background: var(--aicut-controls-hover, rgba(255, 255, 255, 0.08));
-}
-
-.aicut-lighting-smart-slot {
-  min-width: 0;
-}
-
-/* --- Smart wrapper (drawer + × button) --- */
-
-.aicut-lighting-smart-wrapper {
-  position: relative;
-  min-width: 0;
-  overflow: hidden;
-  transition: opacity 180ms ease;
-}
-
-.aicut-lighting-smart-close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
+/* Host-controlled footer area where Reset / Generate / preset-save
+   buttons go. Library renders this empty div; the React wrapper's
+   `controlsFooter` prop / Vue's <slot name="controlsFooter"> portals
+   the host content in. */
+.aicut-lighting-controls-footer {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: color-mix(in srgb, var(--aicut-controls-text, rgba(255, 255, 255, 0.85)) 60%, transparent);
-  font-size: 18px;
-  line-height: 1;
-  cursor: pointer;
-  z-index: 1;
-  transition: background-color 120ms ease, color 120ms ease;
-}
-.aicut-lighting-smart-close:hover {
-  background: var(--aicut-controls-hover, rgba(255, 255, 255, 0.08));
-  color: var(--aicut-controls-text, rgba(255, 255, 255, 0.85));
-}
-
-/* Push the host content down a touch so it doesn't sit under × */
-.aicut-lighting-smart-wrapper > .aicut-lighting-smart-slot {
-  padding-top: 4px;
-  padding-right: 28px;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+  min-height: 0;
+  margin-top: 4px;
 }
-
-/* --- Smart-mode pill toggle in the controls header --- */
-
-.aicut-lighting-smart-toggle-row {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
+.aicut-lighting-controls-footer:empty {
+  display: none;
 }
 
-.aicut-lighting-smart-toggle-label {
-  font-size: 11px;
-  color: color-mix(in srgb, var(--aicut-controls-text, rgba(255, 255, 255, 0.85)) 70%, transparent);
-}