@editframe/create 0.43.0 → 0.45.0

package/dist/skills/editframe-editor-gui/references/editor-toolkit.md

@@ -0,0 +1,587 @@
+---
+title: Building Custom Editors
+description: Compose Preview, Controls, Filmstrip, Workbench, and Hierarchy components to build fully custom video editor interfaces.
+type: how-to
+nav:
+  parent: "Getting Started"
+  priority: 1
+react:
+  generate: true
+  componentName: Building Custom Editors
+  importPath: "@editframe/react"
+  nav:
+    parent: "Guides / Editor UI"
+    priority: 50
+    related: ["preview", "controls", "filmstrip", "workbench", "hierarchy"]
+---
+
+<!-- html-only -->
+# Building Custom Editors
+<!-- /html-only -->
+<!-- react-only -->
+# Building Custom Editors in React
+<!-- /react-only -->
+
+Build video editor interfaces by composing GUI elements. Start with a minimal editor and progressively add features.
+
+<!-- react-only -->
+## Import
+
+```tsx
+import {
+  Timegroup, Video, Text, Audio,
+  Preview, Controls, TogglePlay, Scrubber,
+  TimeDisplay, ToggleLoop, Filmstrip, Hierarchy,
+  Workbench, PanZoom, FitScale
+} from "@editframe/react";
+```
+<!-- /react-only -->
+
+## Minimal Editor (Preview + Controls)
+
+The simplest functional editor needs only preview and controls:
+
+<!-- html-only -->
+```html live
+<div class="h-screen flex flex-col bg-gray-900">
+  <!-- Preview Area -->
+  <div class="flex-1 flex items-center justify-center p-8">
+    <ef-preview class="w-full max-w-[1280px] aspect-video bg-black rounded-lg shadow-2xl">
+      <ef-timegroup id="minimal-comp" mode="sequence" class="w-[1920px] h-[1080px]">
+        <ef-timegroup mode="fixed" duration="3s" class="flex items-center justify-center bg-gradient-to-br from-blue-600 to-purple-600">
+          <ef-text duration="3s" class="text-white text-6xl font-bold">Scene 1</ef-text>
+        </ef-timegroup>
+        <ef-timegroup mode="fixed" duration="3s" class="flex items-center justify-center bg-gradient-to-br from-green-600 to-teal-600">
+          <ef-text duration="3s" class="text-white text-6xl font-bold">Scene 2</ef-text>
+        </ef-timegroup>
+      </ef-timegroup>
+    </ef-preview>
+  </div>
+
+  <!-- Controls Bar -->
+  <div class="bg-gray-800 border-t border-gray-700 p-4">
+    <ef-controls target="minimal-comp" class="flex items-center gap-4 max-w-4xl mx-auto">
+      <ef-toggle-play>
+        <button slot="play" class="w-10 h-10 flex items-center justify-center text-white hover:text-blue-400 transition">▶</button>
+        <button slot="pause" class="w-10 h-10 flex items-center justify-center text-white hover:text-blue-400 transition">⏸</button>
+      </ef-toggle-play>
+      <ef-time-display class="text-white text-sm font-mono min-w-[120px]"></ef-time-display>
+      <ef-scrubber class="flex-1"></ef-scrubber>
+      <ef-toggle-loop>
+        <button slot="off" class="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white transition">↻</button>
+        <button slot="on" class="w-10 h-10 flex items-center justify-center text-green-400 hover:text-white transition">↻</button>
+      </ef-toggle-loop>
+    </ef-controls>
+  </div>
+</div>
+```
+<!-- /html-only -->
+<!-- react-only -->
+```tsx
+const MinimalEditor = () => (
+  <div className="h-screen flex flex-col bg-gray-900">
+    <div className="flex-1 flex items-center justify-center p-8">
+      <Preview className="w-full max-w-[1280px] aspect-video bg-black rounded-lg shadow-2xl">
+        <Timegroup id="comp" mode="sequence" className="w-[1920px] h-[1080px]">
+          <Timegroup mode="fixed" duration="3s" className="flex items-center justify-center bg-gradient-to-br from-blue-600 to-purple-600">
+            <Text duration="3s" className="text-white text-6xl font-bold">Scene 1</Text>
+          </Timegroup>
+          <Timegroup mode="fixed" duration="3s" className="flex items-center justify-center bg-gradient-to-br from-green-600 to-teal-600">
+            <Text duration="3s" className="text-white text-6xl font-bold">Scene 2</Text>
+          </Timegroup>
+        </Timegroup>
+      </Preview>
+    </div>
+
+    <div className="bg-gray-800 border-t border-gray-700 p-4">
+      <Controls target="comp" className="flex items-center gap-4 max-w-4xl mx-auto">
+        <TogglePlay
+          play={<button className="w-10 h-10 text-white hover:text-blue-400">▶</button>}
+          pause={<button className="w-10 h-10 text-white hover:text-blue-400">⏸</button>}
+        />
+        <TimeDisplay className="text-white text-sm font-mono min-w-[120px]" />
+        <Scrubber className="flex-1" />
+        <ToggleLoop
+          off={<button className="text-gray-400 hover:text-white">↻</button>}
+          on={<button className="text-green-400 hover:text-white">↻</button>}
+        />
+      </Controls>
+    </div>
+  </div>
+);
+```
+<!-- /react-only -->
+
+## Adding Timeline (Preview + Controls + Filmstrip)
+
+<!-- html-only -->
+Add visual timeline feedback with `ef-filmstrip`:
+
+```html live
+<div class="h-screen flex flex-col bg-gray-900">
+  <!-- Preview Area -->
+  <div class="flex-1 flex items-center justify-center p-4">
+    <ef-preview class="w-full max-w-[1280px] aspect-video bg-black rounded-lg shadow-2xl">
+      <ef-timegroup id="timeline-comp" mode="sequence" class="w-[1920px] h-[1080px]">
+        <ef-timegroup mode="fixed" duration="2s" class="flex items-center justify-center bg-blue-600">
+          <ef-text duration="2s" class="text-white text-5xl font-bold">Intro</ef-text>
+        </ef-timegroup>
+        <ef-timegroup mode="fixed" duration="4s" class="relative">
+          <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="0s" sourceout="4s" class="absolute inset-0 size-full object-cover"></ef-video>
+          <ef-text duration="4s" class="absolute bottom-8 left-8 text-white text-4xl font-bold bg-black/50 px-4 py-2 rounded">Main Content</ef-text>
+        </ef-timegroup>
+        <ef-timegroup mode="fixed" duration="2s" class="flex items-center justify-center bg-purple-600">
+          <ef-text duration="2s" class="text-white text-5xl font-bold">Outro</ef-text>
+        </ef-timegroup>
+      </ef-timegroup>
+    </ef-preview>
+  </div>
+
+  <!-- Controls Bar -->
+  <div class="bg-gray-800 border-t border-gray-700 px-4 py-2">
+    <ef-controls target="timeline-comp" class="flex items-center gap-3 max-w-4xl mx-auto">
+      <ef-toggle-play>
+        <button slot="play" class="w-8 h-8 text-white">▶</button>
+        <button slot="pause" class="w-8 h-8 text-white">⏸</button>
+      </ef-toggle-play>
+      <ef-time-display class="text-white text-sm font-mono"></ef-time-display>
+      <ef-scrubber class="flex-1 h-2"></ef-scrubber>
+      <ef-toggle-loop>
+        <button slot="off" class="text-gray-400">↻</button>
+        <button slot="on" class="text-green-400">↻</button>
+      </ef-toggle-loop>
+    </ef-controls>
+  </div>
+
+  <!-- Timeline Panel -->
+  <div class="h-64 bg-gray-900 border-t border-gray-800">
+    <ef-filmstrip target="timeline-comp" pixels-per-ms="0.1"></ef-filmstrip>
+  </div>
+</div>
+```
+<!-- /html-only -->
+<!-- react-only -->
+Add visual timeline feedback with `Filmstrip`:
+
+```tsx
+const TimelineEditor = () => (
+  <div className="h-screen flex flex-col bg-gray-900">
+    <div className="flex-1 flex items-center justify-center p-4">
+      <Preview className="w-full max-w-[1280px] aspect-video bg-black rounded-lg shadow-2xl">
+        <Timegroup id="timeline-comp" mode="sequence" className="w-[1920px] h-[1080px]">
+          <Timegroup mode="fixed" duration="2s" className="flex items-center justify-center bg-blue-600">
+            <Text duration="2s" className="text-white text-5xl font-bold">Intro</Text>
+          </Timegroup>
+          <Timegroup mode="fixed" duration="4s" className="relative">
+            <Video src="/assets/main.mp4" sourceIn="0s" sourceOut="4s" className="absolute inset-0 size-full object-cover" />
+            <Text duration="4s" className="absolute bottom-8 left-8 text-white text-4xl font-bold bg-black/50 px-4 py-2 rounded">Main Content</Text>
+          </Timegroup>
+        </Timegroup>
+      </Preview>
+    </div>
+
+    <div className="bg-gray-800 border-t border-gray-700 px-4 py-2">
+      <Controls target="timeline-comp" className="flex items-center gap-3 max-w-4xl mx-auto">
+        <TogglePlay play={<button className="text-white">▶</button>} pause={<button className="text-white">⏸</button>} />
+        <TimeDisplay className="text-white text-sm font-mono" />
+        <Scrubber className="flex-1 h-2" />
+      </Controls>
+    </div>
+
+    <div className="h-64 bg-gray-900 border-t border-gray-800">
+      <Filmstrip target="timeline-comp" pixelsPerMs={0.1} />
+    </div>
+  </div>
+);
+```
+<!-- /react-only -->
+
+## Adding Layers (Preview + Controls + Filmstrip + Hierarchy)
+
+<!-- html-only -->
+Add layer management with `ef-hierarchy`:
+
+```html live
+<div class="h-screen flex bg-gray-900">
+  <!-- Left Sidebar: Layers -->
+  <div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
+    <div class="px-4 py-3 border-b border-gray-700">
+      <h3 class="text-white font-semibold">Layers</h3>
+    </div>
+    <div class="flex-1 overflow-auto">
+      <ef-hierarchy target="layers-comp" class="w-full"></ef-hierarchy>
+    </div>
+  </div>
+
+  <!-- Main Content -->
+  <div class="flex-1 flex flex-col">
+    <!-- Preview Area -->
+    <div class="flex-1 flex items-center justify-center p-4">
+      <ef-preview class="w-full max-w-[1280px] aspect-video bg-black rounded-lg">
+        <ef-timegroup id="layers-comp" mode="contain" class="w-[1920px] h-[1080px] bg-black">
+          <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="absolute inset-0 size-full object-cover"></ef-video>
+          <ef-text duration="8s" class="absolute top-8 left-8 text-white text-5xl font-bold">Title Text</ef-text>
+          <ef-text duration="8s" class="absolute bottom-8 right-8 text-white text-sm">© 2024</ef-text>
+        </ef-timegroup>
+      </ef-preview>
+    </div>
+
+    <!-- Controls -->
+    <div class="bg-gray-800 border-t border-gray-700 px-4 py-2">
+      <ef-controls target="layers-comp" class="flex items-center gap-3 max-w-4xl mx-auto">
+        <ef-toggle-play>
+          <button slot="play" class="w-8 h-8 text-white">▶</button>
+          <button slot="pause" class="w-8 h-8 text-white">⏸</button>
+        </ef-toggle-play>
+        <ef-time-display class="text-white text-sm font-mono"></ef-time-display>
+        <ef-scrubber class="flex-1 h-2"></ef-scrubber>
+      </ef-controls>
+    </div>
+
+    <!-- Timeline -->
+    <div class="h-48 bg-gray-900 border-t border-gray-800">
+      <ef-filmstrip target="layers-comp"></ef-filmstrip>
+    </div>
+  </div>
+</div>
+```
+<!-- /html-only -->
+<!-- react-only -->
+Add layer management with `Hierarchy`:
+
+```tsx
+const LayeredEditor = () => (
+  <div className="h-screen flex bg-gray-900">
+    <div className="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
+      <div className="px-4 py-3 border-b border-gray-700">
+        <h3 className="text-white font-semibold">Layers</h3>
+      </div>
+      <div className="flex-1 overflow-auto">
+        <Hierarchy target="layers-comp" className="w-full" />
+      </div>
+    </div>
+
+    <div className="flex-1 flex flex-col">
+      <div className="flex-1 flex items-center justify-center p-4">
+        <Preview className="w-full max-w-[1280px] aspect-video bg-black rounded-lg">
+          <Timegroup id="layers-comp" mode="contain" className="w-[1920px] h-[1080px] bg-black">
+            <Video src="/assets/video.mp4" className="absolute inset-0 size-full object-cover" />
+            <Text duration="8s" className="absolute top-8 left-8 text-white text-5xl font-bold">Title Text</Text>
+          </Timegroup>
+        </Preview>
+      </div>
+
+      <div className="bg-gray-800 border-t border-gray-700 px-4 py-2">
+        <Controls target="layers-comp" className="flex items-center gap-3 max-w-4xl mx-auto">
+          <TogglePlay play={<button className="text-white">▶</button>} pause={<button className="text-white">⏸</button>} />
+          <TimeDisplay className="text-white text-sm font-mono" />
+          <Scrubber className="flex-1 h-2" />
+        </Controls>
+      </div>
+
+      <div className="h-48 bg-gray-900 border-t border-gray-800">
+        <Filmstrip target="layers-comp" />
+      </div>
+    </div>
+  </div>
+);
+```
+<!-- /react-only -->
+
+## Full-Featured Editor (Using Workbench)
+
+<!-- html-only -->
+For a complete editor with all features, use `ef-workbench`:
+
+```html live
+<ef-workbench class="w-full h-screen">
+  <ef-pan-zoom slot="canvas">
+    <ef-fit-scale>
+      <ef-timegroup mode="sequence" class="w-[1920px] h-[1080px]">
+        <ef-timegroup mode="fixed" duration="3s" class="relative">
+          <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="0s" sourceout="3s" class="absolute inset-0 size-full object-cover"></ef-video>
+          <div class="absolute inset-0 flex items-center justify-center">
+            <ef-text duration="3s" class="text-white text-6xl font-bold bg-black/50 px-8 py-4 rounded-xl">Opening</ef-text>
+          </div>
+        </ef-timegroup>
+        <ef-timegroup mode="fixed" duration="4s" class="relative">
+          <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="5s" sourceout="9s" class="absolute inset-0 size-full object-cover"></ef-video>
+          <ef-text duration="4s" class="absolute top-12 left-12 text-white text-4xl font-bold">Main Content</ef-text>
+          <ef-text duration="4s" class="absolute bottom-12 left-12 text-white text-xl">Subtitle text here</ef-text>
+        </ef-timegroup>
+        <ef-timegroup mode="fixed" duration="2s" class="flex items-center justify-center bg-gradient-to-br from-purple-900 to-blue-900">
+          <ef-text duration="2s" class="text-white text-6xl font-bold">Thanks!</ef-text>
+        </ef-timegroup>
+      </ef-timegroup>
+    </ef-fit-scale>
+  </ef-pan-zoom>
+
+  <ef-hierarchy slot="hierarchy"></ef-hierarchy>
+
+  <div slot="timeline" class="h-full flex flex-col">
+    <ef-controls class="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
+      <ef-toggle-play>
+        <button slot="play" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">Play</button>
+        <button slot="pause" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition">Pause</button>
+      </ef-toggle-play>
+      <ef-time-display class="text-sm text-gray-300 font-mono"></ef-time-display>
+      <ef-scrubber class="flex-1 mx-4"></ef-scrubber>
+      <ef-toggle-loop>
+        <button slot="off" class="px-3 py-2 text-gray-400 hover:text-white transition">Loop Off</button>
+        <button slot="on" class="px-3 py-2 text-green-400 hover:text-white transition">Loop On</button>
+      </ef-toggle-loop>
+    </ef-controls>
+    <ef-filmstrip class="flex-1" pixels-per-ms="0.08"></ef-filmstrip>
+  </div>
+</ef-workbench>
+```
+<!-- /html-only -->
+<!-- react-only -->
+For a complete editor with all features, use `Workbench`:
+
+```tsx
+const FullEditor = () => (
+  <Workbench className="w-full h-screen">
+    <PanZoom slot="canvas">
+      <FitScale>
+        <Timegroup mode="sequence" className="w-[1920px] h-[1080px]">
+          <Timegroup mode="fixed" duration="3s" className="relative">
+            <Video src="/assets/intro.mp4" sourceIn="0s" sourceOut="3s" className="absolute inset-0 size-full object-cover" />
+            <div className="absolute inset-0 flex items-center justify-center">
+              <Text duration="3s" className="text-white text-6xl font-bold bg-black/50 px-8 py-4 rounded-xl">Opening</Text>
+            </div>
+          </Timegroup>
+          <Timegroup mode="fixed" duration="4s" className="relative">
+            <Video src="/assets/main.mp4" sourceIn="5s" sourceOut="9s" className="absolute inset-0 size-full object-cover" />
+            <Text duration="4s" className="absolute top-12 left-12 text-white text-4xl font-bold">Main Content</Text>
+          </Timegroup>
+          <Timegroup mode="fixed" duration="2s" className="flex items-center justify-center bg-gradient-to-br from-purple-900 to-blue-900">
+            <Text duration="2s" className="text-white text-6xl font-bold">Thanks!</Text>
+          </Timegroup>
+        </Timegroup>
+      </FitScale>
+    </PanZoom>
+
+    <Hierarchy slot="hierarchy" />
+
+    <div slot="timeline" className="h-full flex flex-col">
+      <Controls className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
+        <TogglePlay
+          play={<button className="px-4 py-2 bg-blue-600 text-white rounded">Play</button>}
+          pause={<button className="px-4 py-2 bg-gray-600 text-white rounded">Pause</button>}
+        />
+        <TimeDisplay className="text-sm text-gray-300 font-mono" />
+        <Scrubber className="flex-1 mx-4" />
+        <ToggleLoop
+          off={<button className="text-gray-400">Loop Off</button>}
+          on={<button className="text-green-400">Loop On</button>}
+        />
+      </Controls>
+      <Filmstrip className="flex-1" pixelsPerMs={0.08} />
+    </div>
+  </Workbench>
+);
+```
+<!-- /react-only -->
+
+<!-- html-only -->
+## Custom Styling with CSS Parts
+
+Style internal elements using `::part()` selectors:
+
+```html live
+<style>
+  .custom-scrubber::part(scrubber) {
+    background: rgba(255, 255, 255, 0.1);
+    height: 6px;
+    border-radius: 3px;
+  }
+
+  .custom-scrubber::part(progress) {
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+    border-radius: 3px;
+  }
+
+  .custom-scrubber::part(handle) {
+    width: 16px;
+    height: 16px;
+    background: white;
+    border: 2px solid #3b82f6;
+    border-radius: 50%;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .custom-time::part(time) {
+    font-family: 'Monaco', monospace;
+    font-size: 14px;
+    color: #60a5fa;
+    letter-spacing: 0.5px;
+  }
+</style>
+
+<div class="bg-gray-900 p-8 rounded-lg">
+  <ef-preview class="w-full max-w-[960px] aspect-video bg-black rounded-lg mx-auto mb-4">
+    <ef-timegroup id="styled-comp" mode="contain" class="w-[1920px] h-[1080px] bg-gradient-to-br from-indigo-600 to-purple-700">
+      <ef-text duration="5s" class="flex items-center justify-center size-full text-white text-7xl font-bold">
+        Custom Styled
+      </ef-text>
+    </ef-timegroup>
+  </ef-preview>
+
+  <ef-controls target="styled-comp" class="flex items-center gap-4 max-w-2xl mx-auto bg-gray-800 p-4 rounded-lg">
+    <ef-toggle-play>
+      <button slot="play" class="w-12 h-12 bg-blue-600 rounded-full text-white text-xl hover:bg-blue-700 transition">▶</button>
+      <button slot="pause" class="w-12 h-12 bg-gray-600 rounded-full text-white text-xl hover:bg-gray-700 transition">⏸</button>
+    </ef-toggle-play>
+    <ef-time-display class="custom-time"></ef-time-display>
+    <ef-scrubber class="custom-scrubber flex-1"></ef-scrubber>
+  </ef-controls>
+</div>
+```
+
+## Split-Panel Layout
+
+Separate preview from composition with side-by-side layout:
+
+```html live
+<div class="h-screen flex flex-col bg-gray-900">
+  <div class="flex-1 grid grid-cols-2 gap-4 p-4">
+    <!-- Left: Preview -->
+    <div class="flex flex-col">
+      <h2 class="text-white text-xl mb-2 font-semibold">Preview</h2>
+      <ef-preview class="flex-1 bg-black rounded-lg">
+        <ef-timegroup id="split-target" mode="sequence" class="w-[1920px] h-[1080px]">
+          <ef-timegroup mode="fixed" duration="3s" class="flex items-center justify-center bg-blue-600">
+            <ef-text duration="3s" class="text-white text-5xl font-bold">First</ef-text>
+          </ef-timegroup>
+          <ef-timegroup mode="fixed" duration="3s" class="flex items-center justify-center bg-green-600">
+            <ef-text duration="3s" class="text-white text-5xl font-bold">Second</ef-text>
+          </ef-timegroup>
+        </ef-timegroup>
+      </ef-preview>
+    </div>
+
+    <!-- Right: Composition -->
+    <div class="flex flex-col">
+      <h2 class="text-white text-xl mb-2 font-semibold">Composition Structure</h2>
+      <div class="flex-1 bg-gray-800 rounded-lg overflow-auto">
+        <ef-hierarchy target="split-target"></ef-hierarchy>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bottom: Controls + Timeline -->
+  <div class="border-t border-gray-800">
+    <div class="bg-gray-800 px-4 py-2">
+      <ef-controls target="split-target" class="flex items-center gap-3 max-w-4xl mx-auto">
+        <ef-toggle-play>
+          <button slot="play" class="w-8 h-8 text-white">▶</button>
+          <button slot="pause" class="w-8 h-8 text-white">⏸</button>
+        </ef-toggle-play>
+        <ef-time-display class="text-white text-sm font-mono"></ef-time-display>
+        <ef-scrubber class="flex-1 h-2"></ef-scrubber>
+      </ef-controls>
+    </div>
+    <div class="h-48 bg-gray-900">
+      <ef-filmstrip target="split-target"></ef-filmstrip>
+    </div>
+  </div>
+</div>
+```
+<!-- /html-only -->
+
+## Design Patterns
+
+### Context Bridging
+
+<!-- html-only -->
+Controls work through DOM ancestry by default. Use `ef-controls` to bridge contexts when targets are not ancestors:
+
+```html
+<!-- Composition -->
+<ef-timegroup id="my-video" mode="contain">
+  <!-- content -->
+</ef-timegroup>
+
+<!-- Non-adjacent controls -->
+<ef-controls target="my-video">
+  <ef-toggle-play></ef-toggle-play>
+  <ef-scrubber></ef-scrubber>
+</ef-controls>
+```
+<!-- /html-only -->
+<!-- react-only -->
+Controls work through DOM ancestry by default. Use the `target` prop to bridge contexts when controls are not ancestors:
+
+```tsx
+{/* Composition */}
+<Timegroup id="my-video" mode="contain">
+  {/* content */}
+</Timegroup>
+
+{/* Non-adjacent controls */}
+<Controls target="my-video">
+  <TogglePlay play={<button>▶</button>} pause={<button>⏸</button>} />
+  <Scrubber />
+</Controls>
+```
+<!-- /react-only -->
+
+### Progressive Enhancement
+
+Build editors incrementally:
+1. Start with Preview + Controls for basic playback
+2. Add Filmstrip for visual timeline
+3. Add Hierarchy for layer management
+4. Add Workbench for complete editor UI
+
+<!-- html-only -->
+### Responsive Layouts
+
+Use CSS Grid and Flexbox for responsive editor layouts:
+
+```html
+<div class="h-screen grid grid-rows-[1fr_auto_200px]">
+  <ef-preview><!-- preview --></ef-preview>
+  <ef-controls><!-- controls --></ef-controls>
+  <ef-filmstrip><!-- timeline --></ef-filmstrip>
+</div>
+```
+
+### Theming
+
+Use CSS custom properties for consistent theming:
+
+```css
+:root {
+  --ef-color-bg: #111827;
+  --ef-color-border: #374151;
+  --ef-color-text: #f9fafb;
+  --ef-color-primary: #3b82f6;
+}
+```
+<!-- /html-only -->
+<!-- react-only -->
+### Responsive Layouts
+
+Use CSS Grid and Flexbox for responsive editor layouts:
+
+```tsx
+<div className="h-screen grid grid-rows-[1fr_auto_200px]">
+  <Preview>{/* preview */}</Preview>
+  <Controls>{/* controls */}</Controls>
+  <Filmstrip />
+</div>
+```
+<!-- /react-only -->
+
+## Summary
+
+- **Minimal**: Preview + Controls for basic playback
+- **Timeline**: Add Filmstrip for visual timeline
+- **Layers**: Add Hierarchy for layer management
+- **Complete**: Use Workbench for full-featured editor
+- **Custom**: Compose elements for custom layouts
+<!-- html-only -->
+- **Styling**: Use CSS parts for deep customization
+<!-- /html-only -->