@clipkit/editor 1.0.0

package/dist/controls/primitives.js

@@ -0,0 +1,194 @@
+// Control kit primitives — the flat, compact knobs every registry-
+// rendered row uses (design/refs: small mono numerals, drag-scrub
+// number fields, hairline inputs, no cards).
+//
+// Scrub contract (shared with stage drags): onScrubStart() snapshots
+// history ONCE, every live change dispatches with skipHistory, so one
+// scrub = one undo step.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from 'react';
+import { cn } from '../lib/utils.js';
+import { ColorPickerPopover } from './ColorPicker.js';
+/* Filled "well" fields per the Figma mock (ruled by Ian 2026-06-11):
+   chip lighter than the panel, no border, ring on focus, optional
+   muted prefix glyph (X / Y / W / H / ∠) inside the well. */
+const FIELD_WRAP_CLS = 'h-6 flex items-center gap-1 bg-field hover:bg-field-hover focus-within:ring-1 focus-within:ring-ring rounded-md px-1.5 transition-colors';
+const FIELD_INNER_CLS = 'flex-1 min-w-0 w-full bg-transparent text-[11px] font-mono tabular-nums text-foreground/90 outline-none text-right';
+const FIELD_CLS = 'h-6 w-[72px] bg-field hover:bg-field-hover focus:ring-1 focus:ring-ring rounded-md px-1.5 text-[11px] font-mono tabular-nums text-foreground/90 outline-none text-right transition-colors';
+const clamp = (v, min, max) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, v));
+const roundTo = (v, step) => {
+    const inv = 1 / step;
+    return Math.round(v * inv) / inv;
+};
+/** Partial numeric input — what's allowed WHILE typing ("-", "1.").
+ * Letters never enter number fields (ruled by Ian 2026-06-11). */
+const NUMERIC_PARTIAL = /^-?\d*\.?\d*$/;
+/** Joined −/+ pair, same 24px well treatment as the inputs. */
+export function Stepper({ onStep, fluid, }) {
+    return (_jsx("div", { className: cn('flex h-6 gap-px rounded-md overflow-hidden shrink-0', fluid && 'flex-1 w-full min-w-0'), children: [-1, 1].map((dir) => (_jsx("button", { type: "button", className: cn('h-6 grid place-items-center text-[12px] bg-field text-muted-foreground hover:text-foreground hover:bg-field-hover transition-colors', fluid ? 'flex-1' : 'w-6'), onClick: () => onStep(dir), "aria-label": dir === -1 ? 'Decrease' : 'Increase', children: dir === -1 ? '−' : '+' }, dir))) }));
+}
+/** Drag-scrub number field: horizontal pointer drag scrubs (step per
+ * 2px, ×10 with shift), click-through to type (numeric chars only),
+ * ↑/↓ arrow steps, optional unit label + built-in stepper. */
+export function NumberControl({ value, onChange, min, max, step = 1, suffix, prefix, trailing, stepper, fluid, width, onScrubStart, onScrubEnd, }) {
+    const [text, setText] = useState(null);
+    const dragRef = useRef(null);
+    const display = text ?? String(roundTo(value, Math.min(step, 0.01)));
+    const stepBy = (dir, factor = 1) => {
+        onChange(clamp(roundTo(value + dir * step * factor, step), min, max), false);
+        setText(null);
+    };
+    const onPointerDown = (e) => {
+        // Only scrub from an unfocused field — focused = typing mode.
+        if (document.activeElement === e.currentTarget)
+            return;
+        dragRef.current = { startX: e.clientX, startV: value, scrubbed: false };
+        e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const onPointerMove = (e) => {
+        const d = dragRef.current;
+        if (!d)
+            return;
+        const dx = e.clientX - d.startX;
+        if (!d.scrubbed && Math.abs(dx) < 3)
+            return;
+        if (!d.scrubbed) {
+            d.scrubbed = true;
+            onScrubStart?.();
+        }
+        const factor = e.shiftKey ? 10 : 1;
+        const next = clamp(roundTo(d.startV + (dx / 2) * step * factor, step), min, max);
+        onChange(next, true);
+    };
+    const onPointerUp = (e) => {
+        const d = dragRef.current;
+        dragRef.current = null;
+        if (d?.scrubbed) {
+            e.preventDefault();
+            onScrubEnd?.();
+            e.currentTarget.blur();
+        }
+    };
+    const scrubProps = {
+        onPointerDown,
+        onPointerMove,
+        onPointerUp,
+    };
+    const commitText = (raw) => {
+        const parsed = parseFloat(raw);
+        if (Number.isFinite(parsed))
+            onChange(clamp(parsed, min, max), false);
+        setText(null);
+    };
+    const needsWrap = Boolean(prefix || trailing || suffix || stepper);
+    const input = (_jsx("input", { className: cn(needsWrap ? FIELD_INNER_CLS : FIELD_CLS, !needsWrap && fluid && 'w-full flex-1 min-w-0', 'cursor-ew-resize focus:cursor-text select-none'), style: !needsWrap && !fluid && width ? { width } : undefined, value: display, onChange: (e) => {
+            // Reject non-numeric characters at the keystroke level.
+            if (NUMERIC_PARTIAL.test(e.target.value))
+                setText(e.target.value);
+        }, onFocus: () => setText(String(roundTo(value, Math.min(step, 0.01)))), onBlur: (e) => text !== null && commitText(e.target.value), onKeyDown: (e) => {
+            if (e.key === 'Enter')
+                e.target.blur();
+            if (e.key === 'Escape') {
+                setText(null);
+                e.target.blur();
+            }
+            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                stepBy(e.key === 'ArrowUp' ? 1 : -1, e.shiftKey ? 10 : 1);
+            }
+        }, ...scrubProps, inputMode: "decimal", spellCheck: false }));
+    if (!needsWrap)
+        return input;
+    const well = (_jsxs("span", { className: cn(FIELD_WRAP_CLS, 
+        // flex-1 ONLY beside the stepper (horizontal flex = shares
+        // width). In vertical stacks flex-1 would override h-6 and
+        // collapse the well, so plain fluid uses w-full.
+        stepper ? 'flex-1 min-w-0' : (fluid || undefined) && 'w-full min-w-0'), style: fluid || stepper ? undefined : { width: width ?? 72 }, children: [prefix && (_jsx("span", { className: "text-[10px] text-muted-foreground/70 hover:text-foreground select-none shrink-0 cursor-ew-resize transition-colors", ...scrubProps, children: prefix })), input, suffix && (_jsx("span", { className: "text-[10px] text-muted-foreground/70 select-none shrink-0", children: suffix })), trailing && _jsx("span", { className: "shrink-0 flex items-center pl-1 -mr-0.5", children: trailing })] }));
+    if (!stepper)
+        return well;
+    return (_jsxs("span", { className: cn('flex items-center gap-2', fluid && 'w-full flex-1 min-w-0'), style: fluid ? undefined : { width: width ?? 72 }, children: [well, _jsx(Stepper, { onStep: (dir) => stepBy(dir) })] }));
+}
+/** Length values: number (px) or string with a unit ("50%", "10vw").
+ * The numeric part scrubs/edits; an existing unit suffix is kept. */
+export function LengthControl({ value, onChange, step = 1, prefix, trailing, stepper, fluid, onScrubStart, onScrubEnd, }) {
+    const str = typeof value === 'string' ? value : null;
+    const match = str?.match(/^(-?\d*\.?\d+)\s*(px|%|vw|vh|vmin|vmax)$/);
+    const num = match ? parseFloat(match[1]) : typeof value === 'number' ? value : 0;
+    const unit = match?.[2] === 'px' ? '' : match?.[2] ?? '';
+    // Unparseable strings ('auto', 'end', keywords) edit as raw text.
+    if (str !== null && !match) {
+        return (_jsx(TextControl, { value: str, onChange: (v) => onChange(v, false), width: 72, fluid: fluid }));
+    }
+    return (_jsx(NumberControl, { value: num, 
+        // Numeric lengths are pixels — show it (writes stay plain numbers).
+        suffix: unit === '' ? 'px' : unit, prefix: prefix, trailing: trailing, stepper: stepper, fluid: fluid, step: step, onScrubStart: onScrubStart, onScrubEnd: onScrubEnd, onChange: (n, live) => onChange(unit ? `${n}${unit}` : n, live) }));
+}
+export function TextControl({ value, onChange, width = 120, fluid, live, onScrubStart, onScrubEnd, }) {
+    // Same controlled pattern as TextareaControl: a local draft that adopts
+    // external updates only when we're not the one editing. In `live` mode
+    // we commit per keystroke (skip-history while typing, flush on blur);
+    // otherwise we commit once on blur/Enter.
+    const [draft, setDraft] = useState(value);
+    const editing = useRef(false);
+    useEffect(() => {
+        if (!editing.current)
+            setDraft(value);
+    }, [value]);
+    return (_jsx("input", { className: cn(FIELD_CLS, 'text-left cursor-text', fluid && 'w-full flex-1 min-w-0'), style: fluid ? undefined : { width }, value: draft, onFocus: () => {
+            editing.current = true;
+            if (live)
+                onScrubStart?.();
+        }, onChange: (e) => {
+            setDraft(e.target.value);
+            if (live)
+                onChange(e.target.value, true); // live preview per keystroke
+        }, onBlur: () => {
+            editing.current = false;
+            if (live)
+                onScrubEnd?.();
+            else if (draft !== value)
+                onChange(draft);
+        }, onKeyDown: (e) => {
+            if (e.key === 'Enter')
+                e.target.blur();
+            if (e.key === 'Escape') {
+                editing.current = false;
+                setDraft(value);
+                e.target.blur();
+            }
+        }, spellCheck: false }));
+}
+export function SelectControl({ value, options, onChange, fluid, }) {
+    return (_jsx("select", { className: cn('h-6 bg-field hover:bg-field-hover rounded-md px-1 text-[11px] text-foreground/90 outline-none cursor-pointer transition-colors', fluid ? 'w-full flex-1 min-w-0' : 'max-w-[120px]'), value: value, onChange: (e) => onChange(e.target.value), children: options.map((o) => (_jsx("option", { value: o, children: o }, o))) }));
+}
+export function ToggleControl({ value, onChange, }) {
+    return (_jsx("button", { type: "button", role: "switch", "aria-checked": value, onClick: () => onChange(!value), className: cn('relative w-7 h-4 rounded-full transition-colors', value ? 'bg-primary' : 'bg-ring hover:bg-muted-foreground/40'), children: _jsx("span", { className: cn('absolute top-0.5 w-3 h-3 rounded-full transition-transform', 
+            // The thumb must read on BOTH track states (it was
+            // background-on-border before: invisible in dark mode).
+            value
+                ? 'translate-x-3.5 bg-background'
+                : 'translate-x-0.5 bg-muted-foreground') }) }));
+}
+export function ColorControl({ value, onChange, fluid, onScrubStart, onScrubEnd, }) {
+    const [open, setOpen] = useState(false);
+    const swatchRef = useRef(null);
+    return (_jsxs("div", { className: cn('flex items-center gap-1', fluid && 'w-full min-w-0'), children: [_jsxs("button", { ref: swatchRef, type: "button", className: "relative w-[18px] h-[18px] rounded border border-border overflow-hidden cursor-pointer shrink-0", title: "Open color picker", "aria-label": "Open color picker", "aria-expanded": open, onClick: () => setOpen((v) => !v), children: [_jsx("span", { className: "absolute inset-0", style: {
+                            background: 'repeating-conic-gradient(rgba(255,255,255,0.18) 0% 25%, transparent 0% 50%) 0 0 / 8px 8px',
+                        } }), _jsx("span", { className: "absolute inset-0", style: { background: value } })] }), _jsx(TextControl, { value: value, onChange: (v) => onChange(v), width: 68, fluid: fluid }), open && swatchRef.current && (_jsx(ColorPickerPopover, { anchor: swatchRef.current, value: value, onChange: onChange, onClose: () => setOpen(false), onScrubStart: onScrubStart, onScrubEnd: onScrubEnd }))] }));
+}
+/** 9-dot anchor grid — the composite claiming x_anchor / y_anchor. */
+export function AnchorGridControl({ x, y, onChange, }) {
+    const stops = [0, 0.5, 1];
+    return (_jsx("div", { className: "grid grid-cols-3 gap-px p-0.5 border border-border rounded", children: stops.flatMap((ay) => stops.map((ax) => {
+            const active = Math.abs(ax - x) < 0.01 && Math.abs(ay - y) < 0.01;
+            return (_jsx("button", { type: "button", className: "w-3.5 h-3.5 grid place-items-center group", onClick: () => onChange(ax, ay), "aria-label": `Anchor ${ax * 100}% ${ay * 100}%`, "aria-pressed": active, children: _jsx("span", { className: cn('w-1 h-1 rounded-full transition-colors', active
+                        ? 'bg-primary scale-150'
+                        : 'bg-muted-foreground/40 group-hover:bg-muted-foreground') }) }, `${ax}-${ay}`));
+        })) }));
+}
+/** Hydration-safe wrapper for values currently driven by keyframes. */
+export function KeyframedChip() {
+    return (_jsx("span", { className: "text-[10px] italic text-muted-foreground/70 px-1", children: "keyframed" }));
+}
+//# sourceMappingURL=primitives.js.map

package/dist/controls/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../../src/controls/primitives.tsx"],"names":[],"mappings":"AAAA,mEAAmE;AACnE,kEAAkE;AAClE,6CAA6C;AAC7C,EAAE;AACF,qEAAqE;AACrE,sEAAsE;AACtE,yBAAyB;AAEzB,YAAY,CAAC;;AAEb,OAAO,EACL,SAAS,EACT,MAAM,EACN,QAAQ,GAGT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;6DAE6D;AAC7D,MAAM,cAAc,GAClB,0IAA0I,CAAC;AAC7I,MAAM,eAAe,GACnB,oHAAoH,CAAC;AACvH,MAAM,SAAS,GACb,2LAA2L,CAAC;AA4B9L,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,GAAY,EAAE,GAAY,EAAU,EAAE,CAC9D,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;AAE3D,MAAM,OAAO,GAAG,CAAC,CAAS,EAAE,IAAY,EAAU,EAAE;IAClD,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IACrB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AACnC,CAAC,CAAC;AAEF;kEACkE;AAClE,MAAM,eAAe,GAAG,eAAe,CAAC;AAExC,+DAA+D;AAC/D,MAAM,UAAU,OAAO,CAAC,EACtB,MAAM,EACN,KAAK,GAKN;IACC,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,qDAAqD,EACrD,KAAK,IAAI,uBAAuB,CACjC,YAEC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC/B,iBAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CACX,qIAAqI,EACrI,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CACzB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,gBACd,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,YAE/C,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IATlB,GAAG,CAUD,CACV,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED;;8DAE8D;AAC9D,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,EACH,IAAI,GAAG,CAAC,EACR,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,EACL,YAAY,EACZ,UAAU,GACS;IACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,MAAM,CAA+D,IAAI,CAAC,CAAC;IAE3F,MAAM,OAAO,GAAG,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IAErE,MAAM,MAAM,GAAG,CAAC,GAAW,EAAE,MAAM,GAAG,CAAC,EAAQ,EAAE;QAC/C,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;QAC7E,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAiC,EAAQ,EAAE;QAChE,8DAA8D;QAC9D,IAAI,QAAQ,CAAC,aAAa,KAAK,CAAC,CAAC,aAAa;YAAE,OAAO;QACvD,OAAO,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;QACxE,CAAC,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACjD,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,CAAC,CAAiC,EAAQ,EAAE;QAChE,MAAM,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;QAC1B,IAAI,CAAC,CAAC;YAAE,OAAO;QACf,MAAM,EAAE,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC;QAChC,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC;YAAE,OAAO;QAC5C,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YAChB,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;YAClB,YAAY,EAAE,EAAE,CAAC;QACnB,CAAC;QACD,MAAM,MAAM,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACnC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,GAAG,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QACjF,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,CAAC,CAAiC,EAAQ,EAAE;QAC9D,MAAM,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;QAC1B,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;YAChB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,EAAE,EAAE,CAAC;YACd,CAAC,CAAC,aAA6B,CAAC,IAAI,EAAE,CAAC;QAC1C,CAAC;IACH,CAAC,CAAC;IACF,MAAM,UAAU,GAAG;QACjB,aAAa;QACb,aAAa;QACb,WAAW;KACZ,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,GAAW,EAAQ,EAAE;QACvC,MAAM,MAAM,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;YAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;QACtE,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,IAAI,QAAQ,IAAI,MAAM,IAAI,OAAO,CAAC,CAAC;IACnE,MAAM,KAAK,GAAG,CACZ,gBACE,SAAS,EAAE,EAAE,CACX,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EACvC,CAAC,SAAS,IAAI,KAAK,IAAI,uBAAuB,EAC9C,gDAAgD,CACjD,EACD,KAAK,EAAE,CAAC,SAAS,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EAC5D,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,wDAAwD;YACxD,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;gBAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACpE,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EACpE,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,IAAI,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC1D,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAG,CAAC,CAAC,MAA2B,CAAC,IAAI,EAAE,CAAC;YAC7D,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,OAAO,CAAC,IAAI,CAAC,CAAC;gBACb,CAAC,CAAC,MAA2B,CAAC,IAAI,EAAE,CAAC;YACxC,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBACjD,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC5D,CAAC;QACH,CAAC,KACG,UAAU,EACd,SAAS,EAAC,SAAS,EACnB,UAAU,EAAE,KAAK,GACjB,CACH,CAAC;IACF,IAAI,CAAC,SAAS;QAAE,OAAO,KAAK,CAAC;IAC7B,MAAM,IAAI,GAAG,CACX,gBACE,SAAS,EAAE,EAAE,CACX,cAAc;QACd,2DAA2D;QAC3D,2DAA2D;QAC3D,iDAAiD;QACjD,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,SAAS,CAAC,IAAI,gBAAgB,CACtE,EACD,KAAK,EAAE,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,EAAE,aAE3D,MAAM,IAAI,CACT,eACE,SAAS,EAAC,oHAAoH,KAC1H,UAAU,YAEb,MAAM,GACF,CACR,EACA,KAAK,EAEL,MAAM,IAAI,CACT,eAAM,SAAS,EAAC,2DAA2D,YACxE,MAAM,GACF,CACR,EAEA,QAAQ,IAAI,eAAM,SAAS,EAAC,yCAAyC,YAAE,QAAQ,GAAQ,IACnF,CACR,CAAC;IACF,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAC1B,OAAO,CACL,gBACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,uBAAuB,CAAC,EAC1E,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,EAAE,aAEhD,IAAI,EACL,KAAC,OAAO,IAAC,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,GAAI,IACpC,CACR,CAAC;AACJ,CAAC;AAED;qEACqE;AACrE,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,CAAC,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAK,EACL,YAAY,EACZ,UAAU,GASX;IACC,MAAM,GAAG,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,MAAM,KAAK,GAAG,GAAG,EAAE,KAAK,CAAC,0CAA0C,CAAC,CAAC;IACrE,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAE,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAClF,MAAM,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IACzD,kEAAkE;IAClE,IAAI,GAAG,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QAC3B,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,EACnC,KAAK,EAAE,EAAE,EACT,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;IACJ,CAAC;IACD,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE,GAAG;QACV,oEAAoE;QACpE,MAAM,EAAE,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACjC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAC/D,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,KAAK,GAAG,GAAG,EACX,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAU,GAWX;IACC,wEAAwE;IACxE,uEAAuE;IACvE,sEAAsE;IACtE,0CAA0C;IAC1C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,OAAO,CACL,gBACE,SAAS,EAAE,EAAE,CACX,SAAS,EACT,uBAAuB,EACvB,KAAK,IAAI,uBAAuB,CACjC,EACD,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EACpC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;YACvB,IAAI,IAAI;gBAAE,YAAY,EAAE,EAAE,CAAC;QAC7B,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,IAAI;gBAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,6BAA6B;QACzE,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACX,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;YACxB,IAAI,IAAI;gBAAE,UAAU,EAAE,EAAE,CAAC;iBACpB,IAAI,KAAK,KAAK,KAAK;gBAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAG,CAAC,CAAC,MAA2B,CAAC,IAAI,EAAE,CAAC;YAC7D,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;gBACxB,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACf,CAAC,CAAC,MAA2B,CAAC,IAAI,EAAE,CAAC;YACxC,CAAC;QACH,CAAC,EACD,UAAU,EAAE,KAAK,GACjB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GAMN;IACC,OAAO,CACL,iBACE,SAAS,EAAE,EAAE,CACX,gIAAgI,EAChI,KAAK,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,eAAe,CAClD,EACD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,YAExE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,iBAAgB,KAAK,EAAE,CAAC,YACrB,CAAC,IADS,CAAC,CAEL,CACV,CAAC,GACK,CACV,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,GAIT;IACC,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,KAAK,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,EAC/B,SAAS,EAAE,EAAE,CACX,iDAAiD,EACjD,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,sCAAsC,CAC9D,YAED,eACE,SAAS,EAAE,EAAE,CACX,4DAA4D;YAC5D,mDAAmD;YACnD,wDAAwD;YACxD,KAAK;gBACH,CAAC,CAAC,+BAA+B;gBACjC,CAAC,CAAC,qCAAqC,CAC1C,GACD,GACK,CACV,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,UAAU,GAOX;IACC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,gBAAgB,CAAC,aACtE,kBACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iGAAiG,EAC3G,KAAK,EAAC,mBAAmB,gBACd,mBAAmB,mBACf,IAAI,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,aAGjC,eACE,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE;4BACL,UAAU,EACR,2FAA2F;yBAC9F,GACD,EACF,eAAM,SAAS,EAAC,kBAAkB,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,GAAI,IAC5D,EACT,KAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC5B,KAAK,EAAE,EAAE,EACT,KAAK,EAAE,KAAK,GACZ,EACD,IAAI,IAAI,SAAS,CAAC,OAAO,IAAI,CAC5B,KAAC,kBAAkB,IACjB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,CACH,IACG,CACP,CAAC;AACJ,CAAC;AAED,sEAAsE;AACtE,MAAM,UAAU,iBAAiB,CAAC,EAChC,CAAC,EACD,CAAC,EACD,QAAQ,GAKT;IACC,MAAM,KAAK,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IAC1B,OAAO,CACL,cAAK,SAAS,EAAC,4DAA4D,YACxE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CACpB,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE;YACf,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;YAClE,OAAO,CACL,iBAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,2CAA2C,EACrD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,gBACnB,UAAU,EAAE,GAAG,GAAG,KAAK,EAAE,GAAG,GAAG,GAAG,kBAChC,MAAM,YAEpB,eACE,SAAS,EAAE,EAAE,CACX,wCAAwC,EACxC,MAAM;wBACJ,CAAC,CAAC,sBAAsB;wBACxB,CAAC,CAAC,wDAAwD,CAC7D,GACD,IAdG,GAAG,EAAE,IAAI,EAAE,EAAE,CAeX,CACV,CAAC;QACJ,CAAC,CAAC,CACH,GACG,CACP,CAAC;AACJ,CAAC;AAED,uEAAuE;AACvE,MAAM,UAAU,aAAa;IAC3B,OAAO,CACL,eAAM,SAAS,EAAC,kDAAkD,0BAE3D,CACR,CAAC;AACJ,CAAC"}

package/dist/controls/transcribe.worker.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=transcribe.worker.d.ts.map

package/dist/controls/transcribe.worker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transcribe.worker.d.ts","sourceRoot":"","sources":["../../src/controls/transcribe.worker.ts"],"names":[],"mappings":""}

package/dist/controls/transcribe.worker.js

@@ -0,0 +1,22 @@
+// Transcription Web Worker — runs Whisper (Transformers.js) OFF the main thread
+// so the editor UI stays responsive during inference. The main thread decodes
+// the audio (WebAudio) and transfers the PCM samples here (zero-copy); we run
+// the model and post the transcript back.
+//
+// Bundlers (webpack/Next) pick this up via `new Worker(new URL('./transcribe.
+// worker.js', import.meta.url), { type: 'module' })` — see CaptionTranscribe.
+import { transcribe } from '@clipkit/speech-to-text';
+// `self` typed loosely to avoid pulling the webworker lib into the editor's
+// DOM-typed project (the two libs conflict on shared globals).
+const ctx = self;
+ctx.onmessage = async (e) => {
+    const { samples, sampleRate, model } = e.data;
+    try {
+        const result = await transcribe({ samples, sampleRate }, { model, onProgress: (info) => ctx.postMessage({ type: 'progress', info }) });
+        ctx.postMessage({ type: 'result', result });
+    }
+    catch (err) {
+        ctx.postMessage({ type: 'error', message: err instanceof Error ? err.message : String(err) });
+    }
+};
+//# sourceMappingURL=transcribe.worker.js.map

package/dist/controls/transcribe.worker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transcribe.worker.js","sourceRoot":"","sources":["../../src/controls/transcribe.worker.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,8EAA8E;AAC9E,8EAA8E;AAC9E,0CAA0C;AAC1C,EAAE;AACF,8EAA8E;AAC9E,8EAA8E;AAE9E,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,4EAA4E;AAC5E,+DAA+D;AAC/D,MAAM,GAAG,GAAG,IAGX,CAAC;AAQF,GAAG,CAAC,SAAS,GAAG,KAAK,EAAE,CAAe,EAAiB,EAAE;IACvD,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,IAAe,CAAC;IACzD,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,MAAM,UAAU,CAC7B,EAAE,OAAO,EAAE,UAAU,EAAE,EACvB,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,EAAE,CAC7E,CAAC;QACF,GAAG,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;IAC9C,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,GAAG,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAChG,CAAC;AACH,CAAC,CAAC"}

package/dist/frame/AddElementBar.d.ts

@@ -0,0 +1,2 @@
+export declare function AddElementBar(): import("react").JSX.Element;
+//# sourceMappingURL=AddElementBar.d.ts.map

package/dist/frame/AddElementBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddElementBar.d.ts","sourceRoot":"","sources":["../../src/frame/AddElementBar.tsx"],"names":[],"mappings":"AAkDA,wBAAgB,aAAa,gCAwF5B"}

package/dist/frame/AddElementBar.js

@@ -0,0 +1,103 @@
+// Add-element bar — a floating, vertical toolbar centered on the LEFT of the
+// stage.
+//
+// Tools: Select (click / marquee) and Hand (drag to pan) — the active one is
+// highlighted. Below the divider: one button per element type you can add.
+// Visual primitives add at the playhead; media (image / video / music) open a
+// file picker and import through the AssetStore.
+//
+// Styling mirrors the stage's floating clusters: `bg-background/90 backdrop-blur
+// border border-border rounded-md`, shadcn tokens, the editor `cn` helper.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { useEditor, useEditorContext, useEditorStore } from '@clipkit/editor-core';
+import { cn } from '../lib/utils.js';
+// ── icons (inline, currentColor, lucide-flavored 24-grid) ────────────────────
+const ic = 'shrink-0';
+const Cursor = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: cn(ic, 'size-4'), children: _jsx("path", { d: "M6.75 5.97a1.12 1.12 0 0 1 1.81-.89l10.13 7.88c.85.66.38 2.01-.69 2.01h-5.14c-.38 0-.73.17-.97.47l-3.14 3.97c-.66.84-2.01.37-2.01-.7z" }) }));
+const sk = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
+const Hand = () => _jsx("svg", { viewBox: "0 0 24 24", ...sk, className: cn(ic, 'size-4'), children: _jsx("path", { d: "M7 11V6.5a1.5 1.5 0 0 1 3 0V11m0-.5V5a1.5 1.5 0 0 1 3 0v6m0-.5V6a1.5 1.5 0 0 1 3 0v6.5m0-2.5a1.5 1.5 0 0 1 3 0V15a5 5 0 0 1-5 5h-1.5a5 5 0 0 1-4-2L7 14.5c-.8-1-.3-2 .8-2.2L10 12" }) });
+const Square = () => _jsx("svg", { viewBox: "0 0 24 24", ...sk, className: cn(ic, 'size-4'), children: _jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2.5" }) });
+const TypeI = () => _jsx("svg", { viewBox: "0 0 24 24", ...sk, className: cn(ic, 'size-4'), children: _jsx("path", { d: "M5 6.5V5h14v1.5M12 5v14M9 19h6" }) });
+const ImageI = () => _jsxs("svg", { viewBox: "0 0 24 24", ...sk, className: cn(ic, 'size-4'), children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2.5" }), _jsx("circle", { cx: "8.5", cy: "9.5", r: "1.5" }), _jsx("path", { d: "m4 18 5-5 4 4 3-3 4 4" })] });
+const VideoI = () => _jsxs("svg", { viewBox: "0 0 24 24", ...sk, className: cn(ic, 'size-4'), children: [_jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2.5" }), _jsx("path", { d: "M10 9.5v5l4-2.5z" })] });
+const MusicI = () => _jsxs("svg", { viewBox: "0 0 24 24", ...sk, className: cn(ic, 'size-4'), children: [_jsx("path", { d: "M9 18V7l10-2v9" }), _jsx("circle", { cx: "6.5", cy: "18", r: "2.5" }), _jsx("circle", { cx: "16.5", cy: "16", r: "2.5" })] });
+const CaptionI = () => _jsxs("svg", { viewBox: "0 0 24 24", ...sk, className: cn(ic, 'size-4'), children: [_jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2.5" }), _jsx("path", { d: "M7 11h4M7 14h7M14 11h3" })] });
+const TOOLS = [
+    { kind: 'shape', label: 'Shape', Icon: Square },
+    { kind: 'text', label: 'Text', Icon: TypeI },
+    { kind: 'caption', label: 'Captions', Icon: CaptionI },
+    { kind: 'image', label: 'Image', Icon: ImageI, media: 'image' },
+    { kind: 'video', label: 'Video', Icon: VideoI, media: 'video' },
+    { kind: 'audio', label: 'Music', Icon: MusicI, media: 'audio' },
+];
+const FILL = '#6366f1';
+const num = (v, d) => (typeof v === 'number' && Number.isFinite(v) ? v : d);
+let addCounter = 0;
+const uid = (k) => `${k}-${(addCounter++).toString(36)}`;
+const iconBtn = 'flex items-center justify-center w-7 h-7 rounded-sm text-muted-foreground transition-colors hover:text-foreground hover:bg-accent';
+const activeBtn = 'flex items-center justify-center w-7 h-7 rounded-sm bg-primary text-primary-foreground transition-colors';
+export function AddElementBar() {
+    const { addElement, setUiState } = useEditor();
+    const { assetStore } = useEditorContext();
+    const tool = useEditorStore((s) => s.ui.tool);
+    const playhead = useEditorStore((s) => s.playback.time);
+    const elements = useEditorStore((s) => s.source.elements);
+    const compW = useEditorStore((s) => num(s.source.width, 1920));
+    const compH = useEditorStore((s) => num(s.source.height, 1080));
+    const fileRef = useRef(null);
+    const pendingMedia = useRef('image');
+    const ctx = () => {
+        const time = Math.max(0, playhead);
+        // layer is assigned on add — the store places new elements on top (layer 1).
+        return { time, layer: 1, cx: compW / 2, cy: compH / 2 };
+    };
+    const center = { x_anchor: '50%', y_anchor: '50%' };
+    const addByKind = useCallback((kind) => {
+        const c = ctx();
+        let el = null;
+        if (kind === 'shape') {
+            el = { id: uid('shape'), name: 'Shape', type: 'shape', shape: 'rectangle', x: c.cx, y: c.cy, ...center, width: 400, height: 280, fill_color: FILL, border_radius: 8, time: c.time, duration: 3, layer: c.layer };
+        }
+        else if (kind === 'text') {
+            el = { id: uid('text'), name: 'Text', type: 'text', text: 'Text', x: c.cx, y: c.cy, ...center, width: 600, height: 160, font_family: 'Inter', font_size: 'auto', font_weight: 700, fill_color: '#ffffff', text_align: 'center', time: c.time, duration: 3, layer: c.layer };
+        }
+        else if (kind === 'caption') {
+            // A starter caption with an explicit box (like text) — transcribe a source
+            // in the inspector to fill the words, or edit them by hand.
+            el = { id: uid('caption'), name: 'Captions', type: 'caption', x: c.cx, y: c.cy, ...center, width: 900, height: 200, font_family: 'Inter', font_size: 72, font_weight: 800, fill_color: '#ffffff', text_align: 'center', style: 'tiktok_bounce', highlight_color: '#ffd60a', max_length: 16, words: [{ text: 'Caption', start: 0, end: 1 }], time: c.time, duration: 'auto', layer: c.layer };
+        }
+        if (el)
+            addElement(el);
+    }, [addElement, elements, playhead, compW, compH]);
+    const pickMedia = useCallback((media) => {
+        pendingMedia.current = media;
+        const input = fileRef.current;
+        if (!input)
+            return;
+        input.accept = media === 'image' ? 'image/*' : media === 'video' ? 'video/*' : 'audio/*';
+        input.click();
+    }, []);
+    const onFile = useCallback(async (e) => {
+        const file = e.target.files?.[0];
+        e.target.value = '';
+        if (!file)
+            return;
+        const asset = await assetStore.upload(file);
+        const c = ctx();
+        const media = pendingMedia.current;
+        let el;
+        if (media === 'audio') {
+            el = { id: uid('audio'), name: asset.name, type: 'audio', source: asset.url, duration: asset.duration ?? 5, volume: 100, time: c.time, layer: c.layer };
+        }
+        else {
+            const iw = num(asset.width, compW), ih = num(asset.height, compH);
+            const scale = Math.min(1, compW / iw, compH / ih);
+            el = { id: uid(media), name: asset.name, type: media, source: asset.url, x: c.cx, y: c.cy, ...center, width: Math.round(iw * scale), height: Math.round(ih * scale), duration: media === 'video' ? asset.duration ?? 5 : 3, time: c.time, layer: c.layer };
+        }
+        addElement(el);
+    }, [assetStore, addElement, playhead, compW, compH, elements]);
+    return (_jsxs("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 z-10 flex flex-col items-center gap-1 bg-background/90 backdrop-blur-sm border border-border rounded-md p-1", children: [_jsx("button", { type: "button", title: "Select (click / marquee)", "aria-pressed": tool === 'select', onClick: () => setUiState({ tool: 'select' }), className: tool === 'select' ? activeBtn : iconBtn, children: _jsx(Cursor, {}) }), _jsx("button", { type: "button", title: "Hand (drag to pan)", "aria-pressed": tool === 'hand', onClick: () => setUiState({ tool: 'hand' }), className: tool === 'hand' ? activeBtn : iconBtn, children: _jsx(Hand, {}) }), _jsx("div", { className: "h-px w-5 bg-border my-0.5", "aria-orientation": "horizontal" }), TOOLS.map((t) => (_jsx("button", { type: "button", title: `Add ${t.label.toLowerCase()}`, onClick: () => (t.media ? pickMedia(t.media) : addByKind(t.kind)), className: iconBtn, children: _jsx(t.Icon, {}) }, t.kind))), _jsx("input", { ref: fileRef, type: "file", hidden: true, onChange: onFile })] }));
+}
+//# sourceMappingURL=AddElementBar.js.map

package/dist/frame/AddElementBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddElementBar.js","sourceRoot":"","sources":["../../src/frame/AddElementBar.tsx"],"names":[],"mappings":"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"}

package/dist/frame/Breadcrumbs.d.ts

@@ -0,0 +1,2 @@
+export declare function Breadcrumbs(): import("react").JSX.Element | null;
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/frame/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/frame/Breadcrumbs.tsx"],"names":[],"mappings":"AAYA,wBAAgB,WAAW,uCA6C1B"}

package/dist/frame/Breadcrumbs.js

@@ -0,0 +1,32 @@
+// Group drill-down breadcrumbs — a floating box on the stage's bottom-LEFT
+// (mirrors the zoom box on the bottom-right). Shows the path into nested groups,
+// e.g. "Composition › Group". Click any crumb to pop back out to that level.
+// Only renders while inside a group.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { resolveGroupPath, useEditor, useEditorStore } from '@clipkit/editor-core';
+import { cn } from '../lib/utils.js';
+export function Breadcrumbs() {
+    const groupPath = useEditorStore((s) => s.ui.groupPath);
+    const elements = useEditorStore((s) => s.source.elements);
+    const groupFlashId = useEditorStore((s) => s.ui.groupFlashId);
+    const { setUiState, clearSelection } = useEditor();
+    // On entering a group, flash this control's border, then clear the flag.
+    useEffect(() => {
+        if (!groupFlashId)
+            return;
+        const t = setTimeout(() => setUiState({ groupFlashId: null }), 1000);
+        return () => clearTimeout(t);
+    }, [groupFlashId, setUiState]);
+    if (groupPath.length === 0)
+        return null;
+    const { crumbs } = resolveGroupPath(elements, groupPath);
+    const go = (depth) => {
+        setUiState({ groupPath: groupPath.slice(0, depth) });
+        clearSelection();
+    };
+    const label = (g) => (typeof g.name === 'string' && g.name) || (typeof g.id === 'string' ? g.id : 'Group');
+    return (_jsxs("div", { style: groupFlashId ? { animation: 'clipkit-crumb-flash 1s ease-out' } : undefined, className: "flex items-center gap-1 h-7 px-2 bg-background/90 backdrop-blur-sm border border-border rounded-md text-[11px]", children: [_jsx("button", { type: "button", onClick: () => go(0), className: "text-muted-foreground hover:text-foreground transition-colors", children: "Composition" }), crumbs.map((g, i) => (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-muted-foreground/50", children: "\u203A" }), _jsx("button", { type: "button", onClick: () => go(i + 1), className: cn('transition-colors', i === crumbs.length - 1 ? 'text-foreground font-medium' : 'text-muted-foreground hover:text-foreground'), children: label(g) })] }, typeof g.id === 'string' ? g.id : i)))] }, groupFlashId ?? 'crumbs'));
+}
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/frame/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../src/frame/Breadcrumbs.tsx"],"names":[],"mappings":"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"}

package/dist/frame/GroupFlash.d.ts

@@ -0,0 +1,2 @@
+export declare function GroupFlash(): import("react").JSX.Element | null;
+//# sourceMappingURL=GroupFlash.d.ts.map

package/dist/frame/GroupFlash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupFlash.d.ts","sourceRoot":"","sources":["../../src/frame/GroupFlash.tsx"],"names":[],"mappings":"AAyBA,wBAAgB,UAAU,uCA6CzB"}

package/dist/frame/GroupFlash.js

@@ -0,0 +1,65 @@
+// GroupFlash — a transient, over-emphasized outline around a group's content on
+// the stage, shown briefly when you ENTER the group (so you can see where it is).
+// Reads `ui.groupFlashId`, draws a fading box around the union of the group's
+// children, and clears the flag once the animation finishes. Never permanent.
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { elementSourceBox, useEditor, useEditorStore } from '@clipkit/editor-core';
+function findGroup(els, id) {
+    for (const e of els) {
+        if (e.id === id && e.type === 'group')
+            return e;
+        if (e.type === 'group') {
+            const nested = e.elements;
+            if (Array.isArray(nested)) {
+                const r = findGroup(nested, id);
+                if (r)
+                    return r;
+            }
+        }
+    }
+    return null;
+}
+export function GroupFlash() {
+    const flashId = useEditorStore((s) => s.ui.groupFlashId);
+    const source = useEditorStore((s) => s.source);
+    const pan = useEditorStore((s) => s.ui.stagePan);
+    const zoom = useEditorStore((s) => s.ui.stageZoom);
+    const time = useEditorStore((s) => s.playback.time);
+    const { setUiState } = useEditor();
+    useEffect(() => {
+        if (!flashId)
+            return;
+        const t = setTimeout(() => setUiState({ groupFlashId: null }), 1100);
+        return () => clearTimeout(t);
+    }, [flashId, setUiState]);
+    if (!flashId)
+        return null;
+    const group = findGroup(source.elements, flashId);
+    const children = group && Array.isArray(group.elements) ? group.elements : null;
+    if (!children)
+        return null;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const c of children) {
+        const b = elementSourceBox(c, source, { time });
+        if (!b)
+            continue;
+        minX = Math.min(minX, b.x);
+        minY = Math.min(minY, b.y);
+        maxX = Math.max(maxX, b.x + b.w);
+        maxY = Math.max(maxY, b.y + b.h);
+    }
+    if (!Number.isFinite(minX))
+        return null;
+    const pad = 10;
+    return (_jsx("div", { className: "absolute pointer-events-none rounded-md border-2 border-foreground", style: {
+            left: pan.x + minX * zoom - pad,
+            top: pan.y + minY * zoom - pad,
+            width: (maxX - minX) * zoom + pad * 2,
+            height: (maxY - minY) * zoom + pad * 2,
+            animation: 'clipkit-group-flash 1.1s ease-out forwards',
+            zIndex: 20,
+        } }, flashId));
+}
+//# sourceMappingURL=GroupFlash.js.map

package/dist/frame/GroupFlash.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupFlash.js","sourceRoot":"","sources":["../../src/frame/GroupFlash.tsx"],"names":[],"mappings":"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"}

package/dist/frame/Resizable.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    /** Which panel edge this gutter drags. */
+    direction: 'left' | 'right' | 'bottom';
+    /** Current size (width for left/right, height for bottom), px. */
+    size: number;
+    min: number;
+    max: number;
+    onResize: (next: number) => void;
+}
+export declare function PanelGutter({ direction, size, min, max, onResize }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Resizable.d.ts.map

package/dist/frame/Resizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resizable.d.ts","sourceRoot":"","sources":["../../src/frame/Resizable.tsx"],"names":[],"mappings":"AASA,UAAU,KAAK;IACb,0CAA0C;IAC1C,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,KAAK,+BAsDzE"}

package/dist/frame/Resizable.js

@@ -0,0 +1,37 @@
+// Resizable panel gutter — a 1px hairline that grows a hit area on
+// hover and drags a panel dimension. Flat per the design refs: no
+// visible chrome until hovered.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cn } from './../lib/utils.js';
+export function PanelGutter({ direction, size, min, max, onResize }) {
+    const startRef = useRef(0);
+    const sizeRef = useRef(size);
+    sizeRef.current = size;
+    const horizontal = direction === 'bottom';
+    const onMouseDown = (e) => {
+        if (e.button !== 0)
+            return;
+        e.preventDefault();
+        startRef.current = horizontal ? e.clientY : e.clientX;
+        const startSize = sizeRef.current;
+        const onMove = (ev) => {
+            const delta = (horizontal ? ev.clientY : ev.clientX) - startRef.current;
+            // Left panel grows rightward; right panel + bottom grow toward
+            // the center, i.e. against the cursor delta.
+            const signed = direction === 'left' ? delta : -delta;
+            onResize(Math.max(min, Math.min(max, startSize + signed)));
+        };
+        const onUp = () => {
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onUp);
+            document.body.style.cursor = '';
+        };
+        document.body.style.cursor = horizontal ? 'row-resize' : 'col-resize';
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onUp);
+    };
+    return (_jsxs("div", { className: cn('relative shrink-0 group/gutter z-10', horizontal ? 'h-px w-full cursor-row-resize' : 'w-px h-full cursor-col-resize'), onMouseDown: onMouseDown, role: "separator", "aria-orientation": horizontal ? 'horizontal' : 'vertical', children: [_jsx("div", { className: cn('absolute bg-border transition-colors group-hover/gutter:bg-primary/40', horizontal ? 'inset-x-0 top-0 h-px' : 'inset-y-0 left-0 w-px') }), _jsx("div", { className: cn('absolute', horizontal ? '-top-1.5 -bottom-1.5 inset-x-0' : '-left-1.5 -right-1.5 inset-y-0') })] }));
+}
+//# sourceMappingURL=Resizable.js.map

package/dist/frame/Resizable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resizable.js","sourceRoot":"","sources":["../../src/frame/Resizable.tsx"],"names":[],"mappings":"AAAA,mEAAmE;AACnE,kEAAkE;AAClE,gCAAgC;AAEhC,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,EAAsC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAYvC,MAAM,UAAU,WAAW,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAS;IACxE,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAEvB,MAAM,UAAU,GAAG,SAAS,KAAK,QAAQ,CAAC;IAE1C,MAAM,WAAW,GAAG,CAAC,CAAkC,EAAQ,EAAE;QAC/D,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QACtD,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC;QAClC,MAAM,MAAM,GAAG,CAAC,EAAc,EAAQ,EAAE;YACtC,MAAM,KAAK,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC;YACxE,+DAA+D;YAC/D,6CAA6C;YAC7C,MAAM,MAAM,GAAG,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACrD,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QAC7D,CAAC,CAAC;QACF,MAAM,IAAI,GAAG,GAAS,EAAE;YACtB,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;YAChD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;QAClC,CAAC,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;QACtE,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;QAC7C,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,qCAAqC,EACrC,UAAU,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,+BAA+B,CAC/E,EACD,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,WAAW,sBACE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,aAExD,cACE,SAAS,EAAE,EAAE,CACX,uEAAuE,EACvE,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,uBAAuB,CAC9D,GACD,EAEF,cACE,SAAS,EAAE,EAAE,CACX,UAAU,EACV,UAAU,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,gCAAgC,CACjF,GACD,IACE,CACP,CAAC;AACJ,CAAC"}

package/dist/frame/Section.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+interface Props {
+    title: string;
+    /** Right-aligned header slot (a `+` add button, a toggle, …). */
+    action?: ReactNode;
+    defaultOpen?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+export declare function Section({ title, action, defaultOpen, children, className, }: Props): import("react").JSX.Element;
+/** A label-left / value-right row inside a Section.
+ *
+ * THE GRID RHYTHM (ruled by Ian 2026-06-11): every row is 32px — a
+ * 24px well + 8px breathing room. The label column is FIXED (64px,
+ * matching the reference HTML) and the value area is FLUID — controls
+ * stretch to fill it, so every well's left and right edges align
+ * panel-wide regardless of panel width. */
+export declare function FieldRow({ label, children, }: {
+    label: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Section.d.ts.map

package/dist/frame/Section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/frame/Section.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,MAAM,EACN,WAAkB,EAClB,QAAQ,EACR,SAAS,GACV,EAAE,KAAK,+BA8BP;AAED;;;;;;2CAM2C;AAC3C,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAUA"}