egaki 0.5.0 → 0.7.0

package/dist/vite/layout-editor.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Layout editor for the video player.
+ *
+ * Lets users visually drag, scale, and edit text on elements inside the
+ * Remotion Player. All spatial changes are applied via CSS transform
+ * (translate + scale). Double-click text to edit inline.
+ *
+ * Changes are tracked per-element using safe-mdx's `data-markdown-line`
+ * attribute, then serialized as structured text for an agent to apply.
+ *
+ * Keyboard: Delete/Backspace = delete selected element, Esc = select parent
+ * (deselect at root), Ctrl+Z = undo.
+ *
+ * Bug-fix notes (from oracle review, commit 1158b916):
+ * - Undo stores a snapshot of the previous ElementChange so restoring
+ *   doesn't delete the change entirely (was: changesRef.current.delete).
+ * - attachMoveable uses a generation counter ref to guard against stale
+ *   async import resolutions (race between disable/new-select and import).
+ * - Text edit keydown uses a named handler removed in the blur cleanup.
+ * - finishTextEdit() is extracted and called from the !editing cleanup
+ *   effect so toggling editing off mid-text-edit cleans up properly.
+ * - Moveable instance is destroyed on unmount via a dedicated useEffect.
+ * - Clipboard "Copied!" timeout is tracked in a ref and cleared on unmount.
+ * - Moveable constructor cast cleaned up (kept hand-written interfaces
+ *   because react-moveable types are not installed as a dependency).
+ */
+export interface SectionMeta {
+    heading: string | null;
+    durationInFrames: number;
+}
+export declare function LayoutEditor({ playerContainerRef, playerRef, editing, onEditingChange, onReset, sections, fps, entryPath }: {
+    playerContainerRef: React.RefObject<HTMLElement | null>;
+    playerRef: React.RefObject<{
+        getCurrentFrame: () => number;
+        addEventListener: (name: any, cb: any) => void;
+        removeEventListener: (name: any, cb: any) => void;
+    } | null>;
+    editing: boolean;
+    onEditingChange: (editing: boolean) => void;
+    onReset: () => void;
+    sections: SectionMeta[];
+    fps: number;
+    entryPath: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=layout-editor.d.ts.map

package/dist/vite/layout-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-editor.d.ts","sourceRoot":"","sources":["../../src/vite/layout-editor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AA0DH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,gBAAgB,EAAE,MAAM,CAAA;CACzB;AAyJD,wBAAgB,YAAY,CAAC,EAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;IAC3H,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACvD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;QAAE,eAAe,EAAE,MAAM,MAAM,CAAC;QAAC,gBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;QAAC,mBAAmB,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,KAAK,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC,CAAA;IACvK,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,MAAM,CAAA;CAClB,+BA4cA"}

package/dist/vite/layout-editor.js

@@ -0,0 +1,587 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Layout editor for the video player.
+ *
+ * Lets users visually drag, scale, and edit text on elements inside the
+ * Remotion Player. All spatial changes are applied via CSS transform
+ * (translate + scale). Double-click text to edit inline.
+ *
+ * Changes are tracked per-element using safe-mdx's `data-markdown-line`
+ * attribute, then serialized as structured text for an agent to apply.
+ *
+ * Keyboard: Delete/Backspace = delete selected element, Esc = select parent
+ * (deselect at root), Ctrl+Z = undo.
+ *
+ * Bug-fix notes (from oracle review, commit 1158b916):
+ * - Undo stores a snapshot of the previous ElementChange so restoring
+ *   doesn't delete the change entirely (was: changesRef.current.delete).
+ * - attachMoveable uses a generation counter ref to guard against stale
+ *   async import resolutions (race between disable/new-select and import).
+ * - Text edit keydown uses a named handler removed in the blur cleanup.
+ * - finishTextEdit() is extracted and called from the !editing cleanup
+ *   effect so toggling editing off mid-text-edit cleans up properly.
+ * - Moveable instance is destroyed on unmount via a dedicated useEffect.
+ * - Clipboard "Copied!" timeout is tracked in a ref and cleared on unmount.
+ * - Moveable constructor cast cleaned up (kept hand-written interfaces
+ *   because react-moveable types are not installed as a dependency).
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+// ── Helpers ────────────────────────────────────────────────────────────
+function isTextElement(el) {
+    return el.children.length === 0 && (el.textContent?.trim().length ?? 0) > 0;
+}
+function findMdxLine(el, boundary) {
+    let cur = el;
+    while (cur && boundary.contains(cur)) {
+        const v = cur.getAttribute('data-markdown-line');
+        if (v)
+            return parseInt(v, 10);
+        cur = cur.parentElement;
+    }
+    return null;
+}
+function classifyElement(el) {
+    const tag = el.tagName.toLowerCase();
+    if (tag === 'img' || tag === 'picture')
+        return 'image';
+    if (tag === 'video')
+        return 'video';
+    if (tag === 'audio')
+        return 'audio';
+    if (tag === 'svg')
+        return 'svg';
+    if (tag === 'canvas')
+        return 'canvas';
+    if (tag === 'pre' || tag === 'code')
+        return 'code';
+    if (el.querySelector('img, picture'))
+        return 'image';
+    if (el.querySelector('video'))
+        return 'video';
+    if (el.querySelector('canvas'))
+        return 'canvas';
+    if (el.querySelector('pre, code'))
+        return 'code';
+    // Text: has meaningful text content and no non-text media children
+    if ((el.textContent?.trim().length ?? 0) > 0 && !el.querySelector('img, video, canvas, svg:not([aria-hidden])')) {
+        return 'text';
+    }
+    return 'element';
+}
+/** Extract src for images and videos, checking the element itself and its children */
+function extractMediaSrc(el) {
+    const tag = el.tagName.toLowerCase();
+    if (tag === 'img')
+        return el.getAttribute('src');
+    if (tag === 'video')
+        return el.getAttribute('src') ?? el.querySelector('source')?.getAttribute('src') ?? null;
+    const img = el.querySelector('img');
+    if (img)
+        return img.getAttribute('src');
+    const video = el.querySelector('video');
+    if (video)
+        return video.getAttribute('src') ?? video.querySelector('source')?.getAttribute('src') ?? null;
+    return null;
+}
+function preview(el) {
+    const t = (el.textContent ?? '').trim();
+    return t.length > 60 ? t.slice(0, 60) + '…' : t;
+}
+function hasChange(c) {
+    return c.status !== 'unchanged'
+        || c.translateX !== 0 || c.translateY !== 0
+        || c.scaleX !== 1 || c.scaleY !== 1
+        || c.textContent !== null;
+}
+function cloneChange(c) {
+    return { ...c };
+}
+/** Derive which section the current frame falls in */
+function getCurrentSection(frame, sections) {
+    let acc = 0;
+    for (const s of sections) {
+        if (frame < acc + s.durationInFrames)
+            return s;
+        acc += s.durationInFrames;
+    }
+    return sections.length > 0 ? sections[sections.length - 1] : null;
+}
+// ── Serialization ──────────────────────────────────────────────────────
+function serializeChanges(changes, currentFrame, fps, sections, entryPath) {
+    const entries = Array.from(changes.values()).filter(hasChange);
+    if (entries.length === 0)
+        return '';
+    const parts = ['## Layout changes\n'];
+    if (entryPath) {
+        parts.push(`File: ${entryPath}`);
+    }
+    // Frame + section context
+    if (currentFrame !== null) {
+        const seconds = (currentFrame / fps).toFixed(1);
+        parts.push(`Current frame: ${currentFrame} (${seconds}s at ${fps}fps)`);
+        const section = getCurrentSection(currentFrame, sections);
+        if (section?.heading) {
+            parts.push(`Section: "${section.heading}"`);
+        }
+        parts.push('');
+    }
+    for (const c of entries) {
+        const line = c.mdxLine !== null ? ` (line ${c.mdxLine})` : '';
+        const text = c.kind === 'text' && c.textPreview ? `: "${c.textPreview}"` : '';
+        const src = c.src && (c.kind === 'image' || c.kind === 'video') ? ` (src: ${c.src})` : '';
+        parts.push(`**${c.kind}**${line}${text}${src}`);
+        if (c.status === 'deleted') {
+            parts.push(`- Deleted`);
+            parts.push('');
+            continue;
+        }
+        if (c.translateX !== 0 || c.translateY !== 0) {
+            const x = `${c.translateX > 0 ? '+' : ''}${Math.round(c.translateX)}px`;
+            const y = `${c.translateY > 0 ? '+' : ''}${Math.round(c.translateY)}px`;
+            parts.push(`- Move: x=${x}, y=${y}`);
+        }
+        if (c.scaleX !== 1 || c.scaleY !== 1) {
+            parts.push(`- Scale: ${c.scaleX.toFixed(2)}x, ${c.scaleY.toFixed(2)}y`);
+        }
+        if (c.textContent !== null && c.originalTextContent !== null) {
+            parts.push(`- Text: "${c.originalTextContent}" -> "${c.textContent}"`);
+        }
+        parts.push('');
+    }
+    return parts.join('\n');
+}
+// ── Toolbar button ─────────────────────────────────────────────────────
+function ToolbarButton({ onClick, active, children, title }) {
+    return (_jsx("button", { type: 'button', onClick: onClick, title: title, className: [
+            'flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[13px] font-medium whitespace-nowrap transition-colors cursor-pointer',
+            active
+                ? 'bg-sky-200 text-sky-950'
+                : 'text-zinc-300 hover:bg-white/10',
+        ].join(' '), children: children }));
+}
+// ── Main component ─────────────────────────────────────────────────────
+export function LayoutEditor({ playerContainerRef, playerRef, editing, onEditingChange, onReset, sections, fps, entryPath }) {
+    const [selectedEl, setSelectedEl] = useState(null);
+    const [changesCount, setChangesCount] = useState(0);
+    const [copied, setCopied] = useState(false);
+    const moveableRef = useRef(null);
+    const changesRef = useRef(new Map());
+    const textEditRef = useRef(null);
+    const undoStack = useRef([]);
+    /** Generation counter to guard against stale async import resolutions */
+    const moveableGenRef = useRef(0);
+    /** Timeout ID for the "Copied!" indicator reset */
+    const copiedTimeoutRef = useRef(null);
+    const getPlayer = useCallback(() => {
+        return playerContainerRef.current?.querySelector('.__remotion-player');
+    }, [playerContainerRef]);
+    const isSelectable = useCallback((el, player) => {
+        if (el.className?.includes?.('moveable-'))
+            return false;
+        const d = getComputedStyle(el).display;
+        if (!['block', 'flex', 'grid', 'inline-block'].includes(d))
+            return false;
+        if (el.offsetHeight <= 10 || el.offsetWidth <= 20)
+            return false;
+        const r = el.getBoundingClientRect();
+        const p = player.getBoundingClientRect();
+        if (Math.abs(r.width - p.width) < 5 && Math.abs(r.height - p.height) < 5)
+            return false;
+        return true;
+    }, []);
+    const findTarget = useCallback((el) => {
+        const player = getPlayer();
+        if (!player?.contains(el))
+            return null;
+        let cur = el;
+        while (cur && player.contains(cur)) {
+            if (isSelectable(cur, player))
+                return cur;
+            cur = cur.parentElement;
+        }
+        return null;
+    }, [getPlayer, isSelectable]);
+    /** Try all elements at a screen point, skipping transparent overlays like Fill */
+    const findTargetAtPoint = useCallback((clientX, clientY) => {
+        const elements = document.elementsFromPoint(clientX, clientY);
+        for (const el of elements) {
+            const hit = findTarget(el);
+            if (hit)
+                return hit;
+        }
+        return null;
+    }, [findTarget]);
+    function countChanges() {
+        let n = 0;
+        for (const c of changesRef.current.values())
+            if (hasChange(c))
+                n++;
+        return n;
+    }
+    // ── Finish text editing (extracted so it can be called from !editing cleanup) ──
+    const finishTextEdit = useCallback(() => {
+        const target = textEditRef.current;
+        if (!target)
+            return;
+        target.contentEditable = 'false';
+        target.style.outline = '';
+        target.style.outlineOffset = '';
+        const c = changesRef.current.get(target);
+        if (c && target.textContent !== c.originalTextContent) {
+            c.textContent = target.textContent ?? '';
+        }
+        textEditRef.current = null;
+        setChangesCount(countChanges());
+    }, []);
+    // ── Attach Moveable (drag + scale, all via transform) ──
+    const attachMoveable = useCallback(async (target) => {
+        moveableRef.current?.destroy();
+        moveableRef.current = null;
+        const container = playerContainerRef.current;
+        // Increment generation before the async import
+        const gen = ++moveableGenRef.current;
+        const mod = await import('moveable');
+        // Bail if editing was disabled or a newer selection happened during import
+        if (moveableGenRef.current !== gen)
+            return;
+        const Cls = mod.default;
+        const m = new Cls(container ?? document.body, {
+            target,
+            draggable: true,
+            scalable: true,
+            keepRatio: true,
+            origin: false,
+            throttleDrag: 1,
+            throttleScale: 0.01,
+            renderDirections: ['nw', 'ne', 'sw', 'se'],
+            edge: false,
+            zoom: 1,
+        });
+        if (getComputedStyle(target).position === 'static') {
+            target.style.position = 'relative';
+        }
+        if (!changesRef.current.has(target)) {
+            const player = getPlayer();
+            changesRef.current.set(target, {
+                mdxLine: findMdxLine(target, player ?? document.body),
+                kind: classifyElement(target),
+                status: 'unchanged',
+                translateX: 0, translateY: 0,
+                scaleX: 1, scaleY: 1,
+                textContent: null, originalTextContent: null,
+                textPreview: preview(target),
+                tagName: target.tagName.toLowerCase(),
+                src: extractMediaSrc(target),
+            });
+        }
+        m.on('dragStart', ({ target: el }) => {
+            const htmlEl = el;
+            const existing = changesRef.current.get(htmlEl);
+            undoStack.current.push({
+                el: htmlEl,
+                transform: htmlEl.style.transform,
+                position: htmlEl.style.position,
+                display: htmlEl.style.display,
+                prevChange: existing ? cloneChange(existing) : null,
+            });
+        });
+        m.on('drag', ({ target: el, transform }) => {
+            const htmlEl = el;
+            htmlEl.style.transform = transform;
+            const c = changesRef.current.get(htmlEl);
+            if (c) {
+                const m = transform.match(/translate\(([-\d.]+)px,\s*([-\d.]+)px\)/);
+                if (m) {
+                    c.translateX = parseFloat(m[1]);
+                    c.translateY = parseFloat(m[2]);
+                }
+                setChangesCount(countChanges());
+            }
+        });
+        m.on('scaleStart', ({ target: el }) => {
+            const htmlEl = el;
+            const existing = changesRef.current.get(htmlEl);
+            undoStack.current.push({
+                el: htmlEl,
+                transform: htmlEl.style.transform,
+                position: htmlEl.style.position,
+                display: htmlEl.style.display,
+                prevChange: existing ? cloneChange(existing) : null,
+            });
+        });
+        m.on('scale', ({ target: el, scale, drag }) => {
+            const htmlEl = el;
+            htmlEl.style.transform = drag.transform;
+            const c = changesRef.current.get(htmlEl);
+            if (c) {
+                c.scaleX = scale[0];
+                c.scaleY = scale[1];
+                const mt = drag.transform.match(/translate\(([-\d.]+)px,\s*([-\d.]+)px\)/);
+                if (mt) {
+                    c.translateX = parseFloat(mt[1]);
+                    c.translateY = parseFloat(mt[2]);
+                }
+                setChangesCount(countChanges());
+            }
+        });
+        moveableRef.current = m;
+        setSelectedEl(target);
+    }, [playerContainerRef, getPlayer]);
+    // ── Double-click to edit text ──
+    const handleDoubleClick = useCallback((e) => {
+        if (!editing)
+            return;
+        const player = getPlayer();
+        if (!player?.contains(e.target))
+            return;
+        // For text editing, try all elements at this point (skipping transparent
+        // overlays like Fill), looking for the innermost text-bearing element.
+        let target = null;
+        const elements = document.elementsFromPoint(e.clientX, e.clientY);
+        for (const candidate of elements) {
+            if (!player.contains(candidate))
+                continue;
+            let cur = candidate;
+            while (cur && player.contains(cur)) {
+                if (isTextElement(cur)) {
+                    target = cur;
+                    break;
+                }
+                cur = cur.parentElement;
+            }
+            if (target)
+                break;
+        }
+        // Fall back to selectable parent if no leaf text found
+        if (!target)
+            target = findTargetAtPoint(e.clientX, e.clientY);
+        if (!target || !isTextElement(target))
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        // Invalidate any in-flight attachMoveable async imports so they bail
+        // after resolving. A double-click fires click→click→dblclick; the second
+        // click starts attachMoveable whose import may resolve after we enter
+        // text edit mode, causing a __CROACT__ null error in Moveable's renderer.
+        moveableGenRef.current++;
+        moveableRef.current?.destroy();
+        moveableRef.current = null;
+        textEditRef.current = target;
+        const change = changesRef.current.get(target);
+        if (change && change.originalTextContent === null) {
+            change.originalTextContent = target.textContent ?? '';
+        }
+        target.contentEditable = 'true';
+        target.focus();
+        target.style.outline = '2px solid #7dd3fc';
+        target.style.outlineOffset = '2px';
+        const range = document.createRange();
+        range.selectNodeContents(target);
+        window.getSelection()?.removeAllRanges();
+        window.getSelection()?.addRange(range);
+        // Named handler so we can remove it in cleanup
+        const onEscapeKey = (ke) => { if (ke.key === 'Escape')
+            target.blur(); };
+        const finish = () => {
+            target.removeEventListener('keydown', onEscapeKey);
+            finishTextEdit();
+        };
+        target.addEventListener('blur', finish, { once: true });
+        target.addEventListener('keydown', onEscapeKey);
+    }, [editing, getPlayer, findTargetAtPoint, finishTextEdit]);
+    // ── Click to select ──
+    const handleClick = useCallback((e) => {
+        if (!editing || textEditRef.current)
+            return;
+        if (e.target.closest('[data-layout-editor-toolbar]'))
+            return;
+        if (e.target.className?.includes?.('moveable-'))
+            return;
+        // Click outside player container → deselect
+        if (!playerContainerRef.current?.contains(e.target)) {
+            if (selectedEl) {
+                moveableRef.current?.destroy();
+                moveableRef.current = null;
+                setSelectedEl(null);
+            }
+            return;
+        }
+        const target = findTargetAtPoint(e.clientX, e.clientY);
+        if (target) {
+            e.preventDefault();
+            e.stopPropagation();
+            void attachMoveable(target);
+        }
+        else if (selectedEl) {
+            // Clicked inside player but not on a selectable element → deselect
+            moveableRef.current?.destroy();
+            moveableRef.current = null;
+            setSelectedEl(null);
+        }
+    }, [editing, selectedEl, findTargetAtPoint, attachMoveable, playerContainerRef]);
+    // ── Keyboard: Esc (select parent / deselect), Ctrl+Z (undo) ──
+    useEffect(() => {
+        if (!editing)
+            return;
+        const player = getPlayer();
+        const onKey = (e) => {
+            if (textEditRef.current)
+                return;
+            if (e.key === 'z' && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
+                e.preventDefault();
+                const entry = undoStack.current.pop();
+                if (entry) {
+                    entry.el.style.transform = entry.transform;
+                    entry.el.style.position = entry.position;
+                    entry.el.style.display = entry.display;
+                    // Restore previous change snapshot instead of deleting entirely
+                    if (entry.prevChange) {
+                        changesRef.current.set(entry.el, entry.prevChange);
+                    }
+                    else {
+                        changesRef.current.delete(entry.el);
+                    }
+                    setChangesCount(countChanges());
+                    if (selectedEl === entry.el)
+                        void attachMoveable(entry.el);
+                }
+                return;
+            }
+            if ((e.key === 'Delete' || e.key === 'Backspace') && selectedEl) {
+                e.preventDefault();
+                // Invalidate any in-flight attachMoveable async imports
+                moveableGenRef.current++;
+                const player = getPlayer();
+                // Ensure a change entry exists for this element
+                if (!changesRef.current.has(selectedEl)) {
+                    changesRef.current.set(selectedEl, {
+                        mdxLine: findMdxLine(selectedEl, player ?? document.body),
+                        kind: classifyElement(selectedEl),
+                        status: 'unchanged',
+                        translateX: 0, translateY: 0,
+                        scaleX: 1, scaleY: 1,
+                        textContent: null, originalTextContent: null,
+                        textPreview: preview(selectedEl),
+                        tagName: selectedEl.tagName.toLowerCase(),
+                        src: extractMediaSrc(selectedEl),
+                    });
+                }
+                const existing = changesRef.current.get(selectedEl);
+                undoStack.current.push({
+                    el: selectedEl,
+                    transform: selectedEl.style.transform,
+                    position: selectedEl.style.position,
+                    display: selectedEl.style.display,
+                    prevChange: cloneChange(existing),
+                });
+                existing.status = 'deleted';
+                selectedEl.style.display = 'none';
+                moveableRef.current?.destroy();
+                moveableRef.current = null;
+                setSelectedEl(null);
+                setChangesCount(countChanges());
+                return;
+            }
+            if (e.key === 'Escape') {
+                if (!selectedEl || !player) {
+                    moveableRef.current?.destroy();
+                    moveableRef.current = null;
+                    setSelectedEl(null);
+                    return;
+                }
+                let parent = selectedEl.parentElement;
+                while (parent && player.contains(parent)) {
+                    if (isSelectable(parent, player)) {
+                        void attachMoveable(parent);
+                        return;
+                    }
+                    parent = parent.parentElement;
+                }
+                moveableRef.current?.destroy();
+                moveableRef.current = null;
+                setSelectedEl(null);
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [editing, selectedEl, getPlayer, isSelectable, attachMoveable]);
+    // ── Deselect on player seek ──
+    useEffect(() => {
+        if (!editing)
+            return;
+        const player = playerRef.current;
+        if (!player)
+            return;
+        const onSeek = () => {
+            moveableRef.current?.destroy();
+            moveableRef.current = null;
+            setSelectedEl(null);
+        };
+        player.addEventListener('seeked', onSeek);
+        return () => player.removeEventListener('seeked', onSeek);
+    }, [editing, playerRef]);
+    // ── Listeners lifecycle ──
+    useEffect(() => {
+        if (!editing)
+            return;
+        document.addEventListener('click', handleClick, true);
+        document.addEventListener('dblclick', handleDoubleClick, true);
+        return () => {
+            document.removeEventListener('click', handleClick, true);
+            document.removeEventListener('dblclick', handleDoubleClick, true);
+        };
+    }, [editing, handleClick, handleDoubleClick]);
+    // ── Cleanup when editing is toggled off ──
+    useEffect(() => {
+        if (!editing) {
+            // Increment generation to invalidate any in-flight attachMoveable
+            moveableGenRef.current++;
+            moveableRef.current?.destroy();
+            moveableRef.current = null;
+            setSelectedEl(null);
+            // Clean up any active text edit
+            finishTextEdit();
+        }
+    }, [editing, finishTextEdit]);
+    // ── Destroy moveable on unmount ──
+    useEffect(() => {
+        return () => {
+            moveableRef.current?.destroy();
+            moveableRef.current = null;
+        };
+    }, []);
+    // ── Clear copied timeout on unmount ──
+    useEffect(() => {
+        return () => {
+            if (copiedTimeoutRef.current !== null) {
+                clearTimeout(copiedTimeoutRef.current);
+            }
+        };
+    }, []);
+    // ── Actions ──
+    const handleCopy = useCallback(async () => {
+        const currentFrame = playerRef.current?.getCurrentFrame() ?? null;
+        const text = serializeChanges(changesRef.current, currentFrame, fps, sections, entryPath);
+        if (!text)
+            return;
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        if (copiedTimeoutRef.current !== null) {
+            clearTimeout(copiedTimeoutRef.current);
+        }
+        copiedTimeoutRef.current = setTimeout(() => {
+            setCopied(false);
+            copiedTimeoutRef.current = null;
+        }, 2000);
+    }, [playerRef, fps, sections]);
+    const handleReset = useCallback(() => {
+        moveableRef.current?.destroy();
+        moveableRef.current = null;
+        changesRef.current.clear();
+        undoStack.current = [];
+        setChangesCount(0);
+        setSelectedEl(null);
+        onReset();
+    }, [onReset]);
+    return (_jsxs("div", { "data-layout-editor-toolbar": true, className: 'flex items-center gap-1.5 text-[13px]', children: [_jsx(ToolbarButton, { onClick: () => onEditingChange(!editing), active: editing, title: editing ? 'Exit editing mode' : 'Edit layout — click to select, drag to move, corners to scale, double-click text to edit', children: editing ? '✦ Editing' : '✦ Edit Layout' }), editing && changesCount > 0 && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onClick: handleCopy, title: 'Copy changes for an AI agent', children: copied ? 'Copied!' : `Copy ${changesCount} change${changesCount > 1 ? 's' : ''}` }), _jsx(ToolbarButton, { onClick: handleReset, title: 'Revert all changes', children: "Reset" })] })), editing && !selectedEl && (_jsx("span", { className: 'text-zinc-600 italic', children: "Click an element" }))] }));
+}