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.

<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
`canvas`	The composition — typically `ef-fit-scale` wrapping an `ef-timegroup`
`hierarchy`	Layer panel — typically `ef-hierarchy`
`timeline`	Timeline panel — typically `ef-timeline`

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
`startExport(options)`	Begin rendering to video
`cancelExport()`	Abort an in-progress export