@clipkit/editor 1.0.0

package/dist/controls/CropControl.js

@@ -0,0 +1,177 @@
+// CropControl — the inspector's "Crop" widget for image + video. Label-left
+// rows (matching the panel rhythm): a "Crop" summary row with a swatch that
+// opens a FLY-OUT (modeled on the color picker) showing the media with a
+// draggable / resizable crop frame, plus "Offset" and "Size" rows holding the
+// numeric crop fields. Self-managed: reads the selected element + patches it
+// directly (like GradeControl / ShapePresetControl).
+//
+// Writes the protocol crop_x / crop_y / crop_width / crop_height fields
+// (normalized 0..1, origin top-left). The runtime applies the crop as a source
+// sub-rectangle BEFORE `fit` (§5.3); identity (0,0,1,1) is a no-op.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useEditor, useEditorStore } from '@clipkit/editor-core';
+import { NumberControl } from './primitives.js';
+import { FieldRow } from '../frame/Section.js';
+const MIN = 0.02; // smallest crop edge, so the frame never collapses to a line
+function num(v, d) {
+    return typeof v === 'number' && Number.isFinite(v) ? v : d;
+}
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+export function CropControl() {
+    const selId = useEditorStore((s) => s.selection[0]);
+    const el = useEditorStore((s) => s.source.elements.find((e) => e.id === selId));
+    const { updateElement, moveElements, pushHistory } = useEditor();
+    const [open, setOpen] = useState(false);
+    const btnRef = useRef(null);
+    if (!el || !selId || (el.type !== 'image' && el.type !== 'video'))
+        return null;
+    const rect = {
+        x: num(el.crop_x, 0),
+        y: num(el.crop_y, 0),
+        width: num(el.crop_width, 1),
+        height: num(el.crop_height, 1),
+    };
+    const cropped = rect.x !== 0 || rect.y !== 0 || rect.width !== 1 || rect.height !== 1;
+    const src = typeof el.source === 'string' ? el.source : null;
+    const isVideo = el.type === 'video';
+    // live=true → skip-history scrub write; live=false → committed edit.
+    const patch = (r, live) => {
+        const p = { crop_x: r.x, crop_y: r.y, crop_width: r.width, crop_height: r.height };
+        if (live)
+            moveElements([{ id: selId, patch: p }], { skipHistory: true });
+        else
+            updateElement(selId, p);
+    };
+    const reset = () => updateElement(selId, {
+        crop_x: undefined, crop_y: undefined, crop_width: undefined, crop_height: undefined,
+    });
+    // One numeric field (stored 0..1, shown as a percentage). Editing one edge
+    // clamps it against the opposite so the rect stays valid.
+    const field = (key, glyph) => {
+        const set = (pct, live) => {
+            const v = clamp(pct / 100, 0, 1);
+            const next = { ...rect };
+            if (key === 'x')
+                next.x = clamp(v, 0, 1 - rect.width);
+            else if (key === 'y')
+                next.y = clamp(v, 0, 1 - rect.height);
+            else if (key === 'width')
+                next.width = clamp(v, MIN, 1 - rect.x);
+            else
+                next.height = clamp(v, MIN, 1 - rect.y);
+            patch(next, live);
+        };
+        return (_jsx(NumberControl, { value: Math.round(rect[key] * 100), min: 0, max: 100, step: 1, suffix: "%", prefix: glyph, fluid: true, onChange: set, onScrubStart: pushHistory }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(FieldRow, { label: "Crop", children: [_jsx("button", { ref: btnRef, type: "button", "aria-expanded": open, title: "Edit crop frame", onClick: () => setOpen((o) => !o), className: "relative w-[18px] h-[18px] rounded border border-border overflow-hidden cursor-pointer shrink-0 bg-black/40", children: _jsx(CropThumb, { src: src, isVideo: isVideo, rect: rect }) }), _jsx("button", { type: "button", onClick: () => setOpen((o) => !o), className: "h-6 flex-1 min-w-0 truncate bg-field hover:bg-field-hover rounded-md px-1.5 text-[11px] text-left text-foreground/90 outline-none transition-colors", children: cropped ? 'Cropped' : 'Edit frame' }), cropped && (_jsx("button", { type: "button", onClick: reset, title: "Remove crop", className: "h-6 px-1.5 rounded-md text-[10px] text-muted-foreground hover:text-foreground hover:bg-field transition-colors shrink-0", children: "Reset" }))] }), _jsx(FieldRow, { label: "Offset", children: _jsxs("div", { className: "flex-1 grid grid-cols-2 gap-2 min-w-0", children: [field('x', 'X'), field('y', 'Y')] }) }), _jsx(FieldRow, { label: "Size", children: _jsxs("div", { className: "flex-1 grid grid-cols-2 gap-2 min-w-0", children: [field('width', 'W'), field('height', 'H')] }) }), open && btnRef.current && (_jsx(CropPopover, { anchor: btnRef.current, src: src, isVideo: isVideo, rect: rect, onChange: patch, onStart: pushHistory, onClose: () => setOpen(false) }))] }));
+}
+// The fly-out — the media at its natural aspect with a draggable / resizable
+// crop frame. Outside the frame is dimmed; the body moves, the four edge
+// handles resize. Handles live in a NON-clipped layer so they read on the
+// frame border even when the crop is flush with the media edge.
+function CropPopover({ anchor, src, isVideo, rect, onChange, onStart, onClose, }) {
+    const ref = useRef(null);
+    const boxRef = useRef(null);
+    const [aspect, setAspect] = useState(16 / 9);
+    useEffect(() => {
+        const onDoc = (e) => {
+            const t = e.target;
+            if (ref.current && !ref.current.contains(t) && !anchor.contains(t))
+                onClose();
+        };
+        const onKey = (e) => { if (e.key === 'Escape')
+            onClose(); };
+        window.addEventListener('mousedown', onDoc);
+        window.addEventListener('keydown', onKey);
+        return () => {
+            window.removeEventListener('mousedown', onDoc);
+            window.removeEventListener('keydown', onKey);
+        };
+    }, [anchor, onClose]);
+    // Open to the LEFT of the inspector (panel sits on the right edge).
+    const r = anchor.getBoundingClientRect();
+    const WIDTH = 260;
+    const left = Math.max(8, r.left - WIDTH - 8);
+    const top = Math.max(8, Math.min(r.top, window.innerHeight - 320));
+    const startDrag = (mode) => (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const box = boxRef.current;
+        if (!box)
+            return;
+        const b = box.getBoundingClientRect();
+        const sx = e.clientX, sy = e.clientY;
+        const s = { ...rect };
+        onStart();
+        const onMove = (ev) => {
+            const dx = (ev.clientX - sx) / b.width;
+            const dy = (ev.clientY - sy) / b.height;
+            let next;
+            if (mode === 'move') {
+                next = {
+                    x: clamp(s.x + dx, 0, 1 - s.width),
+                    y: clamp(s.y + dy, 0, 1 - s.height),
+                    width: s.width,
+                    height: s.height,
+                };
+            }
+            else {
+                let l = s.x, t = s.y, rr = s.x + s.width, bb = s.y + s.height;
+                if (mode === 'w')
+                    l = clamp(s.x + dx, 0, rr - MIN);
+                else if (mode === 'e')
+                    rr = clamp(s.x + s.width + dx, l + MIN, 1);
+                else if (mode === 'n')
+                    t = clamp(s.y + dy, 0, bb - MIN);
+                else
+                    bb = clamp(s.y + s.height + dy, t + MIN, 1);
+                next = { x: l, y: t, width: rr - l, height: bb - t };
+            }
+            onChange(next, true);
+        };
+        const onUp = () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+    };
+    const pctRect = {
+        left: `${rect.x * 100}%`,
+        top: `${rect.y * 100}%`,
+        width: `${rect.width * 100}%`,
+        height: `${rect.height * 100}%`,
+    };
+    // Edge handles — white bars centered on each edge midpoint, with a dark ring
+    // so they read on any image. -translate centers them ON the border.
+    const handle = 'absolute bg-white border border-black/50 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.35)] -translate-x-1/2 -translate-y-1/2';
+    // Rendered INLINE (not portaled) — same as the color picker — so theme tokens
+    // resolve and `fixed` still escapes the inspector's scroll clip.
+    return (_jsxs("div", { ref: ref, className: "fixed z-50 rounded-lg border bg-popover shadow-2xl p-2 flex flex-col gap-2 select-none", style: { left, top, width: WIDTH, borderColor: 'var(--color-popover-border)' }, role: "dialog", "aria-label": "Crop", children: [_jsxs("div", { ref: boxRef, className: "relative w-full rounded-md bg-[repeating-conic-gradient(#2a2a2a_0%_25%,#1d1d1d_0%_50%)] bg-[length:16px_16px] touch-none", style: { aspectRatio: String(aspect) }, children: [_jsxs("div", { className: "absolute inset-0 overflow-hidden rounded-md", children: [src && !isVideo && (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            _jsx("img", { src: src, alt: "", draggable: false, onLoad: (e) => {
+                                    const im = e.currentTarget;
+                                    if (im.naturalWidth > 0 && im.naturalHeight > 0)
+                                        setAspect(im.naturalWidth / im.naturalHeight);
+                                }, className: "absolute inset-0 w-full h-full object-fill pointer-events-none" })), src && isVideo && (_jsx("video", { src: src, muted: true, playsInline: true, preload: "metadata", onLoadedMetadata: (e) => {
+                                    const v = e.currentTarget;
+                                    if (v.videoWidth > 0 && v.videoHeight > 0)
+                                        setAspect(v.videoWidth / v.videoHeight);
+                                }, className: "absolute inset-0 w-full h-full object-fill pointer-events-none" })), _jsx("div", { className: "absolute inset-x-0 top-0 bg-black/55 pointer-events-none", style: { height: pctRect.top } }), _jsx("div", { className: "absolute inset-x-0 bottom-0 bg-black/55 pointer-events-none", style: { top: `${(rect.y + rect.height) * 100}%` } }), _jsx("div", { className: "absolute bg-black/55 pointer-events-none", style: { left: 0, width: pctRect.left, top: pctRect.top, height: pctRect.height } }), _jsx("div", { className: "absolute bg-black/55 pointer-events-none", style: { right: 0, left: `${(rect.x + rect.width) * 100}%`, top: pctRect.top, height: pctRect.height } })] }), _jsxs("div", { className: "absolute border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.5)] cursor-move", style: pctRect, onPointerDown: startDrag('move'), children: [_jsxs("div", { className: "absolute inset-0 pointer-events-none", children: [_jsx("div", { className: "absolute top-1/3 inset-x-0 border-t border-white/25" }), _jsx("div", { className: "absolute top-2/3 inset-x-0 border-t border-white/25" }), _jsx("div", { className: "absolute left-1/3 inset-y-0 border-l border-white/25" }), _jsx("div", { className: "absolute left-2/3 inset-y-0 border-l border-white/25" })] }), _jsx("div", { className: `${handle} w-4 h-2 left-1/2 top-0 cursor-ns-resize`, onPointerDown: startDrag('n') }), _jsx("div", { className: `${handle} w-4 h-2 left-1/2 top-full cursor-ns-resize`, onPointerDown: startDrag('s') }), _jsx("div", { className: `${handle} w-2 h-4 left-0 top-1/2 cursor-ew-resize`, onPointerDown: startDrag('w') }), _jsx("div", { className: `${handle} w-2 h-4 left-full top-1/2 cursor-ew-resize`, onPointerDown: startDrag('e') })] })] }), _jsxs("div", { className: "flex items-center justify-between text-[10px] text-muted-foreground tabular-nums", children: [_jsxs("span", { children: [Math.round(rect.width * 100), "% \u00D7 ", Math.round(rect.height * 100), "%"] }), _jsx("button", { type: "button", onClick: () => onChange({ x: 0, y: 0, width: 1, height: 1 }, false), className: "hover:text-foreground transition-colors", children: "Reset" })] })] }));
+}
+// The 18px panel swatch — the media with the crop region punched out of a dim
+// overlay, so the row previews what's kept at a glance.
+function CropThumb({ src, isVideo, rect }) {
+    const frame = {
+        left: `${rect.x * 100}%`,
+        top: `${rect.y * 100}%`,
+        width: `${rect.width * 100}%`,
+        height: `${rect.height * 100}%`,
+    };
+    return (_jsxs(_Fragment, { children: [src && !isVideo && (
+            // eslint-disable-next-line @next/next/no-img-element
+            _jsx("img", { src: src, alt: "", draggable: false, className: "absolute inset-0 w-full h-full object-cover opacity-50" })), src && isVideo && (_jsx("video", { src: src, muted: true, playsInline: true, preload: "metadata", className: "absolute inset-0 w-full h-full object-cover opacity-50" })), _jsx("span", { className: "absolute border border-white/80 box-border", style: frame })] }));
+}
+//# sourceMappingURL=CropControl.js.map

package/dist/controls/CropControl.js.map

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

package/dist/controls/EffectsStack.d.ts

@@ -0,0 +1,8 @@
+import type { Effect } from '@clipkit/protocol';
+export declare function EffectsStackControl({ value, onChange, onScrubStart, onScrubEnd, }: {
+    value: Effect[] | undefined;
+    onChange: (next: Effect[] | undefined, live: boolean) => void;
+    onScrubStart?: () => void;
+    onScrubEnd?: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=EffectsStack.d.ts.map

package/dist/controls/EffectsStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EffectsStack.d.ts","sourceRoot":"","sources":["../../src/controls/EffectsStack.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AA6ChD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,+BA+IA"}

package/dist/controls/EffectsStack.js

@@ -0,0 +1,89 @@
+// Effects stack — the design-refs "FX rows" pattern: colored type
+// chip, expand to params, × to remove, reorder, + to add. Params
+// render FROM the registry's effect scopes through the one
+// ControlRenderer mapping (D2) — adding an effect type to the
+// protocol makes it appear here with zero UI work.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { useConfiguration } from '../configuration.js';
+import { ControlRenderer } from './ControlRenderer.js';
+/** Display defaults mirroring PROTOCOL §4.7 — shown when a param is
+ * unauthored so the knob reads the value the runtime will use. */
+const PARAM_DEFAULTS = {
+    pixelate: { cell_size: 8 },
+    dither: { levels: 4 },
+    halftone: { cell_size: 8, angle: 45 },
+    ascii: { cell_size: 12 },
+    glow: { radius: 20, intensity: 1, color: '#FFFFFF' },
+    drop_shadow: { offset_x: 0, offset_y: 12, blur: 18, color: '#000000', opacity: 0.6 },
+    stroke: { width: 4, color: '#FFFFFF' },
+    chroma_key: { color: '#00FF00', tolerance: 0.18, softness: 0.1, spill: 0.5 },
+    luma_key: { threshold: 0.5, softness: 0.1, invert: false },
+    levels: { in_black: 0, in_white: 1, gamma: 1, out_black: 0, out_white: 1 },
+    lut: { intensity: 1 },
+    fractal_noise: { scale: 100, evolution: 0, offset_x: 0, offset_y: 0, octaves: 4, seed: 0 },
+    turbulent_displace: { amount: 16, scale: 120, evolution: 0, octaves: 2, seed: 0 },
+    glass: {
+        blur_radius: 12, refraction: 16, edge_width: 32, edge_highlight: 0.35,
+        shadow: 0, dispersion: 0, backdrop_saturation: 1, mode: 'pill',
+    },
+};
+/** Chip hues per effect family (stylize / layer style / key / color / generate). */
+const CHIP_CLS = {
+    pixelate: 'bg-violet-500/20 text-violet-300',
+    dither: 'bg-violet-500/20 text-violet-300',
+    halftone: 'bg-violet-500/20 text-violet-300',
+    ascii: 'bg-violet-500/20 text-violet-300',
+    glow: 'bg-amber-500/20 text-amber-300',
+    drop_shadow: 'bg-amber-500/20 text-amber-300',
+    stroke: 'bg-amber-500/20 text-amber-300',
+    chroma_key: 'bg-emerald-500/20 text-emerald-300',
+    luma_key: 'bg-emerald-500/20 text-emerald-300',
+    levels: 'bg-sky-500/20 text-sky-300',
+    lut: 'bg-sky-500/20 text-sky-300',
+    fractal_noise: 'bg-rose-500/20 text-rose-300',
+    turbulent_displace: 'bg-rose-500/20 text-rose-300',
+    glass: 'bg-cyan-500/20 text-cyan-300',
+};
+export function EffectsStackControl({ value, onChange, onScrubStart, onScrubEnd, }) {
+    const { registry } = useConfiguration();
+    const [expanded, setExpanded] = useState(null);
+    const [adding, setAdding] = useState(false);
+    const effects = value ?? [];
+    const types = Object.keys(registry.effects);
+    const commit = (next, live = false) => onChange(next.length > 0 ? next : undefined, live);
+    const setEffect = (i, patch, live) => commit(effects.map((fx, j) => (j === i ? { ...fx, ...patch } : fx)), live);
+    const move = (i, dir) => {
+        const j = i + dir;
+        if (j < 0 || j >= effects.length)
+            return;
+        const next = [...effects];
+        [next[i], next[j]] = [next[j], next[i]];
+        commit(next);
+        setExpanded(null);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-0.5 w-full", children: [effects.map((fx, i) => {
+                const scope = registry.effects[fx.type];
+                const open = expanded === i;
+                return (_jsxs("div", { className: "border border-border/60 rounded", children: [_jsxs("div", { className: "flex items-center gap-1 h-7 px-1", children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 flex-1 min-w-0 text-left", onClick: () => setExpanded(open ? null : i), "aria-expanded": open, children: [_jsx("svg", { width: "6", height: "6", viewBox: "0 0 8 8", "aria-hidden": "true", className: cn('text-muted-foreground shrink-0 transition-transform', open && 'rotate-90'), children: _jsx("path", { d: "M2 1 L6 4 L2 7 Z", fill: "currentColor" }) }), _jsx("span", { className: cn('px-1.5 py-px rounded text-[10px] font-medium truncate', CHIP_CLS[fx.type] ?? 'bg-card text-muted-foreground'), children: fx.type })] }), _jsx("button", { type: "button", className: "w-4 h-4 grid place-items-center text-muted-foreground/50 hover:text-foreground text-[9px] disabled:opacity-20", disabled: i === 0, onClick: () => move(i, -1), "aria-label": "Move up", children: "\u25B2" }), _jsx("button", { type: "button", className: "w-4 h-4 grid place-items-center text-muted-foreground/50 hover:text-foreground text-[9px] disabled:opacity-20", disabled: i === effects.length - 1, onClick: () => move(i, 1), "aria-label": "Move down", children: "\u25BC" }), _jsx("button", { type: "button", className: "w-4 h-4 grid place-items-center text-muted-foreground/50 hover:text-foreground text-[11px]", onClick: () => {
+                                        commit(effects.filter((_, j) => j !== i));
+                                        setExpanded(null);
+                                    }, "aria-label": "Remove effect", children: "\u00D7" })] }), open && scope && (_jsx("div", { className: "px-2 pb-2 flex flex-col", children: scope.fields.map((spec) => {
+                                const raw = fx[spec.path];
+                                const shown = raw ?? PARAM_DEFAULTS[fx.type]?.[spec.path];
+                                return (
+                                // Same row system as the inspector: 32px pitch,
+                                // fixed label column, fluid well.
+                                _jsxs("div", { className: "flex items-center gap-2 h-8", children: [_jsx("span", { className: "w-16 shrink-0 text-[10px] text-muted-foreground truncate", children: spec.label }), _jsx("div", { className: "flex-1 min-w-0 flex items-center gap-2", children: _jsx(ControlRenderer, { spec: spec, value: shown, fluid: true, trailing: spec.animatable ? (_jsx("span", { className: Array.isArray(raw) ? 'text-primary text-[9px]' : 'text-muted-foreground/40 text-[9px]', title: Array.isArray(raw) ? 'Animated' : 'Animatable', children: Array.isArray(raw) ? '◆' : '◇' })) : undefined, onChange: (v, live) => setEffect(i, { [spec.path]: v }, live), onScrubStart: onScrubStart, onScrubEnd: onScrubEnd }) })] }, spec.path));
+                            }) }))] }, i));
+            }), adding ? (_jsxs("select", { autoFocus: true, className: "h-6 bg-field hover:bg-field-hover rounded-md px-1 text-[11px] text-foreground outline-none cursor-pointer transition-colors", defaultValue: "", onBlur: () => setAdding(false), onChange: (e) => {
+                    if (e.target.value) {
+                        commit([...effects, { type: e.target.value }]);
+                        setExpanded(effects.length);
+                    }
+                    setAdding(false);
+                }, children: [_jsx("option", { value: "", disabled: true, children: "Add effect\u2026" }), types.map((t) => (_jsx("option", { value: t, children: t }, t)))] })) : (_jsx("button", { type: "button", className: "self-start h-5 px-1.5 rounded text-[10px] text-muted-foreground hover:text-foreground hover:bg-card transition", onClick: () => setAdding(true), children: "+ Effect" }))] }));
+}
+//# sourceMappingURL=EffectsStack.js.map

package/dist/controls/EffectsStack.js.map

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

package/dist/controls/GradeControl.d.ts

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

package/dist/controls/GradeControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradeControl.d.ts","sourceRoot":"","sources":["../../src/controls/GradeControl.tsx"],"names":[],"mappings":"AA6CA,wBAAgB,YAAY,uCAgD3B"}

package/dist/controls/GradeControl.js

@@ -0,0 +1,120 @@
+// GradeControl — the inspector's "Color" widget. A compact summary row in the
+// panel; clicking opens a FLY-OUT (like the color picker) with the grading
+// controls so the narrow inspector stays scannable. Self-managed (reads the
+// selected element + patches it directly, like ShapePresetControl).
+//
+// v1 writes the existing base filter fields (brightness / contrast / saturation
+// / hue_rotate) — zero protocol change. Looks are named presets that expand to
+// those same fields. (Tone via `levels` and LUT looks come next; true
+// temperature/tint needs a protocol field and is intentionally absent.)
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useEditor, useEditorStore } from '@clipkit/editor-core';
+// Named looks — expand to base filters (no new fields). "Original" resets.
+const LOOKS = [
+    { id: 'original', label: 'Original', f: {} },
+    { id: 'punch', label: 'Punch', f: { contrast: 1.18, saturation: 1.25 } },
+    { id: 'vivid', label: 'Vivid', f: { brightness: 1.03, contrast: 1.1, saturation: 1.4 } },
+    { id: 'faded', label: 'Faded', f: { brightness: 1.05, contrast: 0.85, saturation: 0.8 } },
+    { id: 'bw', label: 'B&W', f: { saturation: 0, contrast: 1.1 } },
+    { id: 'noir', label: 'Noir', f: { saturation: 0, contrast: 1.35, brightness: 0.95 } },
+];
+const FIELDS = [
+    { key: 'brightness', label: 'Brightness', min: 0, max: 2, def: 1, unit: '%' },
+    { key: 'contrast', label: 'Contrast', min: 0, max: 2, def: 1, unit: '%' },
+    { key: 'saturation', label: 'Saturation', min: 0, max: 2, def: 1, unit: '%' },
+    { key: 'hue_rotate', label: 'Hue', min: -180, max: 180, def: 0, unit: '°' },
+];
+function num(v, d) {
+    return typeof v === 'number' && Number.isFinite(v) ? v : d;
+}
+export function GradeControl() {
+    const selId = useEditorStore((s) => s.selection[0]);
+    const el = useEditorStore((s) => s.source.elements.find((e) => e.id === selId));
+    const [open, setOpen] = useState(false);
+    const btnRef = useRef(null);
+    if (!el || !selId)
+        return null;
+    const f = {
+        brightness: num(el.brightness, 1),
+        contrast: num(el.contrast, 1),
+        saturation: num(el.saturation, 1),
+        hue_rotate: num(el.hue_rotate, 0),
+    };
+    const adjusted = f.brightness !== 1 || f.contrast !== 1 || f.saturation !== 1 || f.hue_rotate !== 0;
+    // Preview on the element's own image when it is one; gradient reference otherwise.
+    const src = el.source;
+    const previewSrc = el.type === 'image' && typeof src === 'string' ? src : null;
+    // Same shape as the color input (ColorControl): an 18px swatch + a field.
+    return (_jsxs("div", { className: "flex items-center gap-1 w-full min-w-0", children: [_jsx("button", { ref: btnRef, type: "button", "aria-expanded": open, title: "Color grade", onClick: () => setOpen((o) => !o), className: "relative w-[18px] h-[18px] rounded border border-border overflow-hidden cursor-pointer shrink-0", children: _jsx(GradeSwatch, { f: f }) }), _jsx("button", { type: "button", onClick: () => setOpen((o) => !o), className: "h-6 flex-1 min-w-0 truncate bg-field hover:bg-field-hover rounded-md px-1.5 text-[11px] text-left text-foreground/90 outline-none transition-colors", children: adjusted ? 'Adjusted' : 'Default' }), open && btnRef.current && (_jsx(GradePopover, { selId: selId, anchor: btnRef.current, f: f, previewSrc: previewSrc, onClose: () => setOpen(false) }))] }));
+}
+function GradePopover({ selId, anchor, f, previewSrc, onClose, }) {
+    const { updateElement, moveElements, pushHistory } = useEditor();
+    const ref = useRef(null);
+    useEffect(() => {
+        const onDoc = (e) => {
+            const t = e.target;
+            if (ref.current && !ref.current.contains(t) && !anchor.contains(t))
+                onClose();
+        };
+        const onKey = (e) => { if (e.key === 'Escape')
+            onClose(); };
+        window.addEventListener('mousedown', onDoc);
+        window.addEventListener('keydown', onKey);
+        return () => {
+            window.removeEventListener('mousedown', onDoc);
+            window.removeEventListener('keydown', onKey);
+        };
+    }, [anchor, onClose]);
+    // Open to the LEFT of the inspector (panel sits on the right edge).
+    const r = anchor.getBoundingClientRect();
+    const WIDTH = 252;
+    const left = Math.max(8, r.left - WIDTH - 8);
+    const top = Math.max(8, Math.min(r.top, window.innerHeight - 300));
+    const patch = (p, live) => {
+        if (live)
+            moveElements([{ id: selId, patch: p }], { skipHistory: true });
+        else
+            updateElement(selId, p);
+    };
+    const neutral = { brightness: undefined, contrast: undefined, saturation: undefined, hue_rotate: undefined };
+    const applyLook = (lf) => updateElement(selId, { ...neutral, ...lf });
+    // Rendered INLINE (not portaled) — same as the color picker — so the editor's
+    // theme tokens resolve and `fixed` still escapes the inspector's scroll clip.
+    return (_jsxs("div", { ref: ref, className: "fixed z-50 rounded-lg border bg-popover shadow-2xl p-2 flex flex-col gap-2.5 select-none", style: { left, top, width: WIDTH, borderColor: 'var(--color-popover-border)' }, children: [_jsxs("div", { children: [_jsx("div", { className: "text-[9px] uppercase tracking-wide text-muted-foreground mb-1.5", children: "Looks" }), _jsx("div", { className: "grid grid-cols-3 gap-1", children: LOOKS.map((l) => (_jsxs("button", { type: "button", onClick: () => applyLook(l.f), className: "h-10 rounded border border-border overflow-hidden relative hover:border-primary/60 transition-colors", title: l.label, children: [_jsx(Preview, { src: previewSrc, f: lookFilters(l.f) }), _jsx("span", { className: "absolute inset-x-0 bottom-0 text-[8px] text-center bg-background/70 text-foreground/80 leading-[11px]", children: l.label })] }, l.id))) })] }), _jsx("div", { className: "border-t border-border/50 pt-2 flex flex-col gap-1.5", children: FIELDS.map((fld) => (_jsx(Slider, { label: fld.label, value: f[fld.key], min: fld.min, max: fld.max, step: fld.unit === '°' ? 1 : 0.01, unit: fld.unit, onStart: pushHistory, onLive: (v) => patch({ [fld.key]: v }, true), onReset: () => patch({ [fld.key]: undefined }, false) }, fld.key))) }), _jsx("button", { type: "button", onClick: () => updateElement(selId, neutral), className: "text-[10px] text-muted-foreground hover:text-foreground transition-colors self-end", children: "Reset all" })] }));
+}
+function Slider({ label, value, min, max, step, unit, onStart, onLive, onReset, }) {
+    const display = unit === '°' ? `${Math.round(value)}°` : `${Math.round(value * 100)}%`;
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-[68px] text-[10px] text-muted-foreground shrink-0", children: label }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onPointerDown: onStart, onChange: (e) => onLive(parseFloat(e.target.value)), className: "flex-1 h-1 accent-primary cursor-pointer" }), _jsx("button", { type: "button", onDoubleClick: onReset, title: "Double-click to reset", className: "w-9 text-right text-[10px] tabular-nums text-foreground/80", children: display })] }));
+}
+// CSS filters are 1:1 with the protocol's brightness/contrast/saturation/
+// hue_rotate, so this preview is ACCURATE to what the runtime renders.
+function cssFilter(f) {
+    return `brightness(${f.brightness}) contrast(${f.contrast}) saturate(${f.saturation}) hue-rotate(${f.hue_rotate}deg)`;
+}
+// Reference used when the element has no image of its own — a spread of hues +
+// tones so a look's character (warmth, punch, desaturation) reads clearly.
+const REFERENCE = 'linear-gradient(135deg, #102a43 0%, #2b6cb0 24%, #e0a23a 48%, #c05621 66%, #2f855a 84%, #e9e9e9 100%)';
+// Panel swatch: a neutral warm tonal ramp (one hue family — not a rainbow),
+// split before | after so the grade's shift reads. Neutral grade ⇒ the halves
+// match ⇒ no visible split (an honest "Default" state).
+const SWATCH_BASE = 'linear-gradient(180deg, #3f3933 0%, #cdc3b3 100%)';
+function GradeSwatch({ f }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "absolute inset-y-0 left-0 w-1/2", style: { background: SWATCH_BASE } }), _jsx("span", { className: "absolute inset-y-0 right-0 w-1/2", style: { background: SWATCH_BASE, filter: cssFilter(f) } })] }));
+}
+/** A live preview of the grade, filling its (relative) container: the element's
+ *  own image when it has one, else the reference gradient. */
+function Preview({ src, f }) {
+    const filter = cssFilter(f);
+    return src ? (_jsx("img", { src: src, alt: "", className: "absolute inset-0 w-full h-full object-cover", style: { filter } })) : (_jsx("span", { className: "absolute inset-0", style: { background: REFERENCE, filter } }));
+}
+function lookFilters(f) {
+    return {
+        brightness: f.brightness ?? 1,
+        contrast: f.contrast ?? 1,
+        saturation: f.saturation ?? 1,
+        hue_rotate: f.hue_rotate ?? 0,
+    };
+}
+//# sourceMappingURL=GradeControl.js.map

package/dist/controls/GradeControl.js.map

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

package/dist/controls/KeyframeDiamond.d.ts

@@ -0,0 +1,11 @@
+export declare function KeyframeDiamond({ elementId, property, animated, current, percentDefault, }: {
+    elementId: string;
+    property: string;
+    /** Has a keyframe_animations entry (the editor's animation surface). */
+    animated: boolean;
+    /** The field's current value — seeds the first keyframe. */
+    current: unknown;
+    /** Unauthored percent fields read 100, not 0. */
+    percentDefault?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=KeyframeDiamond.d.ts.map

package/dist/controls/KeyframeDiamond.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyframeDiamond.d.ts","sourceRoot":"","sources":["../../src/controls/KeyframeDiamond.tsx"],"names":[],"mappings":"AAgCA,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,cAAc,GACf,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,QAAQ,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,+BA0FA"}

package/dist/controls/KeyframeDiamond.js

@@ -0,0 +1,87 @@
+// The ◇/◆ keyframe diamond (re-ruled by Ian 2026-06-11): a true
+// keyframe toggle, AE-style, reading state from the document + the
+// playhead:
+//
+//   muted outline  — property has NO keyframes; click starts an
+//                    animation with one keyframe at the playhead
+//   BLUE outline   — keyframes exist, playhead is between them;
+//                    click adds another at the playhead (value
+//                    sampled from the curve via normative applyEasing)
+//   BLUE fill      — playhead is ON a keyframe; click removes it
+//                    (removing the last drops the whole entry)
+//
+// Shared toggle logic with the timeline lane rows (lib/keyframes.ts).
+// The playhead subscription is a derived boolean — the button only
+// re-renders when on/off-keyframe actually flips.
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { elementTime, useEditor, useEditorContext, useEditorStore, } from '@clipkit/editor-core';
+import { cn } from '../lib/utils.js';
+import { findElementById as findById, isOnKeyframe, toggleKeyframeAt, } from '../lib/keyframes.js';
+export function KeyframeDiamond({ elementId, property, animated, current, percentDefault, }) {
+    const { store } = useEditorContext();
+    const actions = useEditor();
+    // Derived boolean — re-renders only when the playhead crosses a
+    // keyframe boundary, not on every tick.
+    const onKf = useEditorStore((s) => {
+        if (!animated)
+            return false;
+        const el = findById(s.source.elements, elementId);
+        const anim = el?.keyframe_animations?.find((a) => a.property === property);
+        if (!el || !anim)
+            return false;
+        // Same clamp as the click handler: a playhead before the element
+        // maps to its first frame.
+        return isOnKeyframe(anim, Math.max(0, s.playback.time - elementTime(el)));
+    });
+    // In-field keyframes (volume: Keyframe[]) — authored outside the
+    // editor; shown filled but edited via the Source pane, not here.
+    const inField = Array.isArray(current);
+    const onClick = () => {
+        const st = store.getState();
+        const el = findById(st.source.elements, elementId);
+        if (!el?.id)
+            return;
+        const local = Math.max(0, Math.round((st.playback.time - elementTime(el)) * 1000) / 1000);
+        const anims = el.keyframe_animations ?? [];
+        const ai = anims.findIndex((a) => a.property === property);
+        if (ai < 0) {
+            // First keyframe — start the animation, seeded with the field's
+            // current value.
+            const seed = typeof current === 'number' || typeof current === 'string'
+                ? current
+                : percentDefault
+                    ? 100
+                    : 0;
+            actions.updateElement(elementId, {
+                keyframe_animations: [
+                    ...anims,
+                    { property, keyframes: [{ time: local, value: seed }] },
+                ],
+            });
+            return;
+        }
+        actions.updateElement(elementId, {
+            keyframe_animations: toggleKeyframeAt(anims, ai, local),
+        });
+    };
+    const title = inField
+        ? 'Keyframed in the document (edit via the Source pane)'
+        : onKf
+            ? 'Remove keyframe at current time'
+            : 'Add keyframe at current time';
+    return (_jsx("button", { type: "button", className: "w-5 h-5 grid place-items-center group shrink-0 disabled:cursor-default", title: title, "aria-label": title, disabled: inField, onClick: onClick, children: _jsx("span", { className: cn('w-1.5 h-1.5 rotate-45 transition-colors border', inField
+                ? 'bg-primary border-primary'
+                : onKf
+                    ? '' // blue fill via style
+                    : animated
+                        ? 'bg-transparent' // blue stroke via style
+                        : 'bg-transparent border-muted-foreground/60 group-hover:border-foreground'), style: inField
+                ? undefined
+                : onKf
+                    ? { background: 'var(--color-playhead)', borderColor: 'var(--color-playhead)' }
+                    : animated
+                        ? { borderColor: 'var(--color-playhead)' }
+                        : undefined }) }));
+}
+//# sourceMappingURL=KeyframeDiamond.js.map

package/dist/controls/KeyframeDiamond.js.map

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

package/dist/controls/LightingControls.d.ts

@@ -0,0 +1,24 @@
+import type { Bloom, Environment, Light, Material } from '@clipkit/protocol';
+export declare function MaterialControl({ value, onChange, onScrubStart, onScrubEnd, }: {
+    value: Material | undefined;
+    onChange: (next: Material | undefined, live: boolean) => void;
+    onScrubStart?: () => void;
+    onScrubEnd?: () => void;
+}): import("react").JSX.Element;
+export declare function LightsControl({ value, onChange, onScrubStart, onScrubEnd, }: {
+    value: Light[] | undefined;
+    onChange: (next: Light[] | undefined, live: boolean) => void;
+    onScrubStart?: () => void;
+    onScrubEnd?: () => void;
+}): import("react").JSX.Element;
+export declare function BloomControl({ value, onChange, onScrubStart, onScrubEnd, }: {
+    value: Bloom | undefined;
+    onChange: (next: Bloom | undefined, live: boolean) => void;
+    onScrubStart?: () => void;
+    onScrubEnd?: () => void;
+}): import("react").JSX.Element;
+export declare function EnvironmentControl({ value, onChange, }: {
+    value: Environment | undefined;
+    onChange: (next: Environment | undefined, live: boolean) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=LightingControls.d.ts.map