ef-workbench

Full editor shell. Composes hierarchy, canvas, and timeline into a complete editing layout.

ef-workbench is a CSS grid shell with three named slots: hierarchy (left panel), canvas (center), and timeline (bottom). It adds a toolbar row with mode switching (DOM vs canvas render), theme toggle, zoom controls, and export. Pan/zoom state and theme preference are persisted to localStorage.

Attribute	React prop	Type	Default	Description
`rendering`	`rendering`	`boolean`	`false`	True while a native render host (`EF_FRAMEGEN`) owns frame capture — collapses the workbench to just the bare `.stage` (no toolbar/sidebar/ transport/timeline chrome).
`resolution`	`resolution`	`string`	`"1920x1080"`	Composition's true rendered resolution, as `"WIDTHxHEIGHT"` (e.g. `"1920x1080"`, `"1080x1920"`).

<ef-workbench style="width: 100%; height: 100vh; display: block;">
  <ef-hierarchy slot="hierarchy" target="root" show-header header="Layers"></ef-hierarchy>

  <ef-fit-scale slot="canvas">
    <ef-timegroup id="root" mode="fixed" duration="10s" class="w-[1920px] h-[1080px] bg-slate-900">
      <!-- composition content -->
    </ef-timegroup>
  </ef-fit-scale>

  <ef-timeline slot="timeline" target="root" show-ruler show-playback-controls></ef-timeline>
</ef-workbench>

Alternatively, set the workbench attribute directly on a root ef-timegroup to auto-wrap:

<ef-timegroup workbench mode="fixed" duration="10s" class="w-[1920px] h-[1080px]">
  <!-- workbench is created automatically -->
</ef-timegroup>

Slots:

Slot	Description
(default)	The composition — a light-DOM `<ef-configuration>`/`<ef-canvas>`/`<ef-timegroup>` (auto-wrapped as needed).

Render modes:

Mode	Description
`dom`	Live DOM rendering. `ef-fit-scale` is paused; the timegroup updates in place.
`canvas`	RAF render loop via `renderTimegroupToCanvas`. Adaptive resolution during motion.

Public methods:

Method Description

exportVideo(options?: RenderTimegroupToVideoOptions): Promise<RenderTimegroupToVideoResult> Renders the composition to an MP4 via an offscreen {@link createRenderClone} + `renderTimegroupToVideo`, at this workbench's `resolution` by default — the live/interactive preview is never touched. Dispatches `export-start` / `export-progress` / `export-complete` / `export-error` (bubbling `CustomEvent`s) so surrounding UI can show progress without polling. Returns the encoded buffer; the toolbar Export button additionally downloads it as an `.mp4` (see {@link #runToolbarExport}).

Method	Description
`exportVideo(options?: RenderTimegroupToVideoOptions): Promise<RenderTimegroupToVideoResult>`	Renders the composition to an MP4 via an offscreen {@link createRenderClone} + `renderTimegroupToVideo`, at this workbench's `resolution` by default — the live/interactive preview is never touched. Dispatches `export-start` / `export-progress` / `export-complete` / `export-error` (bubbling `CustomEvent`s) so surrounding UI can show progress without polling. Returns the encoded buffer; the toolbar Export button additionally downloads it as an `.mp4` (see {@link #runToolbarExport}).

CSS Parts

ef-workbench::part(toolbar) { background: #1a1a2e; }
ef-workbench::part(canvas)  { background: #0f0f1a; }

CSS Custom Properties

Property	Default	Description
`--ef-color-hover`	`#333`	Hover background color for toolbar/zoom buttons (not currently part of the shared theme token set).