editor-gui

name	editor-gui
description	Build video editing interfaces with Editframe's GUI components. Assemble timeline, scrubber, filmstrip, preview, playback controls, and transform handles into custom editing UIs. Use when building video editors, editing tools, or when working with timeline, scrubber, preview, playback controls, volume, mute, fullscreen, picture-in-picture, resolution, trim handles, hierarchy, or editor UIs.
license	MIT
metadata	{"author":"editframe","version":"1.0"}

Editor Toolkit

Build video editing interfaces by composing GUI components. Each component is a self-contained building block that connects to your composition via target attributes. The composition itself is built with the composition skill — these components provide the controls and views around it.

Quick Start

<ef-timegroup id="my-video" mode="fixed" duration="5s">
  <ef-video src="/video.mp4" duration="5s"></ef-video>
</ef-timegroup>

<ef-controls target="my-video">
  <ef-toggle-play></ef-toggle-play>
  <ef-scrubber></ef-scrubber>
  <ef-time-display></ef-time-display>
</ef-controls>

Getting Started

• references/editor-toolkit.md — How to compose editor components

Preview & Canvas

• references/preview.md — Preview container with focus tracking
• references/canvas.md — Interactive canvas with selection and drag-and-drop
• references/pan-zoom.md — Pan and zoom container with gestures
• references/focus-overlay.md — Highlight focused element
• references/fit-scale.md — Responsive aspect-ratio scaling

Playback Controls

• references/controls.md — Context bridge for disconnected controls
• references/play.md — Play button
• references/pause.md — Pause button
• references/toggle-play.md — Combined play/pause toggle
• references/toggle-loop.md — Loop toggle

Audio & Display Controls

• references/volume.md — Volume slider (0–1) with auto-unmute
• references/mute.md — Mute/unmute toggle with slot content
• references/fullscreen.md — Browser fullscreen toggle
• references/pip.md — Picture-in-Picture toggle for video and canvas
• references/resolution.md — Output dimension presets and custom inputs

Timeline

• references/timeline.md — Full-featured timeline editor
• references/filmstrip.md — Visual timeline with tracks
• references/scrubber.md — Seek control
• references/time-display.md — Current time / duration display
• references/timeline-ruler.md — Time ruler with frame markers
• references/trim-handles.md — Interactive trim controls
• references/thumbnail-strip.md — Video thumbnail preview strip

Transform & Manipulation

• references/transform-handles.md — Resize and rotation handles
• references/resizable-box.md — Resizable container with drag handles
• references/dial.md — Rotary angle input

Overlay System

• references/overlay-layer.md — Container for positioned overlays
• references/overlay-item.md — Track and follow target elements

Editor Shells

• references/workbench.md — Full editor UI with preview, timeline, hierarchy, and export
• references/hierarchy.md — Layer panel with selection and drag-and-drop
• references/active-root-temporal.md — Display active root element ID