@energy8platform/game-engine 0.33.6 → 0.33.8

package/dist/scene-devtools.esm.js

@@ -1,3 +1,5 @@
+import { Container, Graphics, Rectangle } from 'pixi.js';
+
 // Pure helpers behind the scene inspector — kept renderer/DOM-free so the control
 // inference and layout-field enumeration are unit-testable and reusable (the same
 // mapping later feeds schema-driven autogen and the agent's docs).
@@ -80,7 +82,7 @@ function setRulePath(rule, path, value) {
 // a game's preview page, later a harness panel) mount it into any container element.
 // Every edit leaves through a ScenePatch, so a mouse edit and an agent edit are the
 // same operation on the same doc.
-const STYLE = `
+const STYLE$2 = `
 .e8si { font: 12px/1.45 system-ui, sans-serif; color: #dfe6f5; display: flex; flex-direction: column; height: 100%; min-height: 0; }
 .e8si h3 { margin: 0; padding: 8px 10px 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #7d8ab0; }
 .e8si-tree { overflow: auto; max-height: 42%; border-bottom: 1px solid #1c2540; padding-bottom: 6px; }
@@ -112,13 +114,17 @@ function createSceneInspector(opts) {
     const root = document.createElement('div');
     root.className = 'e8si';
     const style = document.createElement('style');
-    style.textContent = STYLE;
+    style.textContent = STYLE$2;
     root.appendChild(style);
+    const showTree = opts.showTree ?? true;
     const treeHost = document.createElement('div');
     treeHost.className = 'e8si-tree';
     const inspHost = document.createElement('div');
     inspHost.className = 'e8si-insp';
-    root.append(treeHost, inspHost);
+    if (showTree)
+        root.append(treeHost, inspHost);
+    else
+        root.append(inspHost);
     container.appendChild(root);
     let selectedId = null;
     // Edits from our own inputs schedule a refresh that must not rebuild the form under
@@ -149,6 +155,8 @@ function createSceneInspector(opts) {
     };
     // ── Outliner ────────────────────────────────────────────────────────────────
     const renderTree = () => {
+        if (!showTree)
+            return;
         treeHost.textContent = '';
         const title = document.createElement('h3');
         title.textContent = 'Scene';
@@ -213,6 +221,13 @@ function createSceneInspector(opts) {
         meta.textContent = `${node.type}${node.name ? ` · ${node.name}` : ''}${node.anchorName ? ` · @${node.anchorName}` : ''}${node.visibleWhen ? ` · when: ${node.visibleWhen}` : ''}`;
         head.append(idEl, meta);
         inspHost.appendChild(head);
+        if (opts.onCalibrate && node.props?.inner && typeof node.props.inner.left === 'number') {
+            const btn = document.createElement('button');
+            btn.className = 'e8si-apply';
+            btn.textContent = '⊞ Calibrate inner (drag edges on canvas)';
+            btn.addEventListener('click', () => opts.onCalibrate(id));
+            inspHost.appendChild(btn);
+        }
         // State selector (named prop variants).
         const stateNames = Object.keys(node.states ?? {});
         if (stateNames.length > 0) {
@@ -368,5 +383,751 @@ function createSceneInspector(opts) {
     };
 }
 
-export { createSceneInspector, layoutFieldSpecs, propControlKind, setRulePath };
+// Flow trace timeline — the visual half of the first-class Trace. Rows are step
+// beats positioned proportionally on the run's time axis; the same data the agent
+// asserts on, rendered for the human's timing eye ("фил" тайминга, §3.5).
+const STYLE$1 = `
+.e8ft { font: 11px/1.5 ui-monospace, monospace; color: #dfe6f5; }
+.e8ft h3 { margin: 0; padding: 8px 10px 4px; font: 11px/1 system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #7d8ab0; }
+.e8ft-meta { padding: 0 10px 6px; color: #8fa0c9; font-family: system-ui, sans-serif; }
+.e8ft-row { display: flex; align-items: center; gap: 6px; padding: 1px 10px; white-space: nowrap; }
+.e8ft-t { flex: 0 0 52px; text-align: right; color: #7d8ab0; }
+.e8ft-track { flex: 1; position: relative; height: 12px; background: #0d1428; border-radius: 3px; overflow: hidden; }
+.e8ft-dot { position: absolute; top: 1px; width: 10px; height: 10px; border-radius: 2px; }
+.e8ft-label { flex: 0 0 46%; overflow: hidden; text-overflow: ellipsis; }
+.e8ft-label .n { color: #8fa0c9; }
+`;
+const KIND_COLORS = {
+    tween: '#4dd0ff',
+    sound: '#ffd24a',
+    wait: '#55617f',
+    countUp: '#6ad55a',
+    setProps: '#c97fff',
+    setState: '#ff8a5a',
+    setVar: '#ff8a5a',
+    if: '#9b9bc9',
+    parallel: '#9b9bc9',
+    seq: '#9b9bc9',
+    code: '#ff4d8d',
+};
+const colorFor = (kind) => {
+    if (KIND_COLORS[kind])
+        return KIND_COLORS[kind];
+    let hash = 0;
+    for (const ch of kind)
+        hash = (hash * 31 + ch.charCodeAt(0)) % 360;
+    return `hsl(${hash} 70% 60%)`;
+};
+function createFlowTimeline(opts) {
+    const root = document.createElement('div');
+    root.className = 'e8ft';
+    const style = document.createElement('style');
+    style.textContent = STYLE$1;
+    root.appendChild(style);
+    const body = document.createElement('div');
+    root.appendChild(body);
+    opts.container.appendChild(root);
+    return {
+        show(trace) {
+            body.textContent = '';
+            const title = document.createElement('h3');
+            title.textContent = `Flow: ${trace.event}`;
+            const meta = document.createElement('div');
+            meta.className = 'e8ft-meta';
+            meta.textContent = `${trace.entries.length} steps · ${trace.durationMs}ms · turbo ×${trace.turbo}${trace.skipped ? ' · SKIPPED→settle' : ''}`;
+            body.append(title, meta);
+            if (opts.onScrub) {
+                const hint = document.createElement('div');
+                hint.className = 'e8ft-meta';
+                hint.textContent = 'click a beat to scrub the scene to that moment';
+                body.appendChild(hint);
+            }
+            const total = Math.max(1, trace.durationMs);
+            trace.entries.forEach((entry, index) => {
+                const row = document.createElement('div');
+                row.className = 'e8ft-row';
+                if (opts.onScrub) {
+                    row.style.cursor = 'pointer';
+                    row.addEventListener('click', () => opts.onScrub(trace.event, index));
+                    row.addEventListener('mouseenter', () => (row.style.background = '#141c36'));
+                    row.addEventListener('mouseleave', () => (row.style.background = ''));
+                }
+                const t = document.createElement('span');
+                t.className = 'e8ft-t';
+                t.textContent = `+${entry.t}`;
+                const track = document.createElement('span');
+                track.className = 'e8ft-track';
+                const dot = document.createElement('span');
+                dot.className = 'e8ft-dot';
+                dot.style.left = `${Math.min(98, (entry.t / total) * 100)}%`;
+                dot.style.background = colorFor(entry.do);
+                track.appendChild(dot);
+                const label = document.createElement('span');
+                label.className = 'e8ft-label';
+                label.innerHTML = '';
+                label.textContent = entry.do;
+                if (entry.node || entry.info) {
+                    const n = document.createElement('span');
+                    n.className = 'n';
+                    n.textContent = ` ${entry.node ?? ''}${entry.info ? ` — ${entry.info}` : ''}`;
+                    label.appendChild(n);
+                }
+                row.append(t, track, label);
+                body.appendChild(row);
+            });
+        },
+        clear() {
+            body.textContent = '';
+        },
+        destroy() {
+            root.remove();
+        },
+    };
+}
+
+// Flow doc editor — the low-code half of goal 3. Edits the LIVE FlowDoc object in place
+// (the runner reads doc.on at fire-time, so the very next spin plays the edited flow);
+// the host persists via its /__write route. Scalar fields get typed inputs, structured
+// fields fall back to JSON — the same schema-less inference as the scene inspector,
+// upgraded automatically once step contributions carry schemas.
+const STYLE = `
+.e8fe { font: 12px/1.5 system-ui, sans-serif; color: #dfe6f5; }
+.e8fe h3 { margin: 0; padding: 8px 10px 4px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #7d8ab0; }
+.e8fe-ev { padding: 4px 10px 2px; color: #9fb0d8; font-weight: 700; }
+.e8fe-step { display: flex; align-items: center; gap: 4px; padding: 1px 10px 1px 18px; cursor: pointer; white-space: nowrap; }
+.e8fe-step:hover { background: #141c36; }
+.e8fe-step.sel { background: #1d2b55; }
+.e8fe-step .k { color: #4dd0ff; }
+.e8fe-step .s { color: #8fa0c9; overflow: hidden; text-overflow: ellipsis; }
+.e8fe-step .sp { flex: 1; }
+.e8fe-step button { background: none; border: none; color: #7d8ab0; cursor: pointer; padding: 0 3px; font: inherit; }
+.e8fe-step button:hover { color: #dfe6f5; }
+.e8fe-form { padding: 2px 10px 6px 18px; border-left: 2px solid #1d2b55; margin-left: 14px; }
+.e8fe-field { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
+.e8fe-field label { flex: 0 0 84px; color: #9fb0d8; }
+.e8fe-field input, .e8fe-field textarea { flex: 1; min-width: 0; background: #0d1428; color: #dfe6f5; border: 1px solid #2b3866; border-radius: 6px; padding: 2px 6px; font: inherit; }
+.e8fe-add { display: flex; gap: 6px; padding: 3px 10px 8px 18px; }
+.e8fe-add select, .e8fe-add button { background: #18213d; color: #dfe6f5; border: 1px solid #2b3866; border-radius: 6px; padding: 2px 8px; font: inherit; cursor: pointer; }
+`;
+function summarize(step) {
+    const s = step;
+    const bits = [];
+    for (const key of ['node', 'cue', 'name', 'state', 'when', 'ref', 'ms', 'to']) {
+        if (s[key] !== undefined && typeof s[key] !== 'object')
+            bits.push(`${key}:${String(s[key])}`);
+    }
+    if (step.do === 'parallel')
+        bits.push(`${s.steps.length} tracks`);
+    if (step.do === 'seq' || step.do === 'if')
+        bits.push('…');
+    return bits.join(' ');
+}
+const DEFAULT_KINDS = ['wait', 'sound', 'tween', 'setState', 'setVar', 'setProps', 'countUp', 'if', 'parallel', 'seq', 'forEach', 'code'];
+function createFlowEditor(opts) {
+    const { doc } = opts;
+    const root = document.createElement('div');
+    root.className = 'e8fe';
+    const style = document.createElement('style');
+    style.textContent = STYLE;
+    root.appendChild(style);
+    const body = document.createElement('div');
+    root.appendChild(body);
+    opts.container.appendChild(root);
+    let selected = null;
+    const changed = () => {
+        opts.onChange?.();
+        render();
+    };
+    const stepForm = (step) => {
+        const form = document.createElement('div');
+        form.className = 'e8fe-form';
+        const record = step;
+        for (const [key, value] of Object.entries(record)) {
+            if (key === 'do')
+                continue;
+            const field = document.createElement('div');
+            field.className = 'e8fe-field';
+            const label = document.createElement('label');
+            label.textContent = key;
+            field.appendChild(label);
+            const kind = propControlKind(value);
+            if (kind === 'json') {
+                const area = document.createElement('textarea');
+                area.rows = 3;
+                area.value = JSON.stringify(value);
+                area.addEventListener('change', () => {
+                    try {
+                        record[key] = JSON.parse(area.value);
+                        changed();
+                    }
+                    catch {
+                        area.style.borderColor = '#ff4d8d';
+                    }
+                });
+                field.appendChild(area);
+            }
+            else if (kind === 'boolean') {
+                const input = document.createElement('input');
+                input.type = 'checkbox';
+                input.checked = value === true;
+                input.addEventListener('change', () => {
+                    record[key] = input.checked;
+                    changed();
+                });
+                field.appendChild(input);
+            }
+            else {
+                const input = document.createElement('input');
+                input.type = kind === 'number' ? 'number' : 'text';
+                input.value = String(value);
+                input.addEventListener('change', () => {
+                    const raw = kind === 'number' ? Number(input.value) : input.value;
+                    if (kind === 'number' && !Number.isFinite(raw))
+                        return;
+                    record[key] = raw;
+                    changed();
+                });
+                field.appendChild(input);
+            }
+            form.appendChild(field);
+        }
+        return form;
+    };
+    const render = () => {
+        body.textContent = '';
+        const title = document.createElement('h3');
+        title.textContent = 'Flow steps';
+        body.appendChild(title);
+        for (const [event, steps] of Object.entries(doc.on)) {
+            const header = document.createElement('div');
+            header.className = 'e8fe-ev';
+            header.textContent = `on ${event}`;
+            body.appendChild(header);
+            steps.forEach((step, index) => {
+                const row = document.createElement('div');
+                row.className = `e8fe-step${selected?.event === event && selected.index === index ? ' sel' : ''}`;
+                const k = document.createElement('span');
+                k.className = 'k';
+                k.textContent = step.do;
+                const s = document.createElement('span');
+                s.className = 's';
+                s.textContent = summarize(step);
+                const spacer = document.createElement('span');
+                spacer.className = 'sp';
+                row.append(k, s, spacer);
+                const button = (text, title, fn) => {
+                    const b = document.createElement('button');
+                    b.textContent = text;
+                    b.title = title;
+                    b.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        fn();
+                    });
+                    row.appendChild(b);
+                };
+                button('↑', 'move up', () => {
+                    if (index === 0)
+                        return;
+                    [steps[index - 1], steps[index]] = [steps[index], steps[index - 1]];
+                    changed();
+                });
+                button('↓', 'move down', () => {
+                    if (index >= steps.length - 1)
+                        return;
+                    [steps[index + 1], steps[index]] = [steps[index], steps[index + 1]];
+                    changed();
+                });
+                button('✕', 'delete step', () => {
+                    steps.splice(index, 1);
+                    if (selected?.event === event && selected.index === index)
+                        selected = null;
+                    changed();
+                });
+                row.addEventListener('click', () => {
+                    selected = selected?.event === event && selected.index === index ? null : { event, index };
+                    render();
+                });
+                body.appendChild(row);
+                if (selected?.event === event && selected.index === index)
+                    body.appendChild(stepForm(step));
+            });
+            const add = document.createElement('div');
+            add.className = 'e8fe-add';
+            const select = document.createElement('select');
+            for (const kind of opts.kinds ?? DEFAULT_KINDS) {
+                const option = document.createElement('option');
+                option.value = kind;
+                option.textContent = kind;
+                select.appendChild(option);
+            }
+            const addBtn = document.createElement('button');
+            addBtn.textContent = '+ step';
+            addBtn.addEventListener('click', () => {
+                const kind = select.value;
+                const skeletons = {
+                    wait: { do: 'wait', ms: 300 },
+                    sound: { do: 'sound', cue: Object.keys(doc.cues ?? {})[0] ?? 'cue' },
+                    tween: { do: 'tween', node: 'node', to: { alpha: 1 }, ms: 300 },
+                    setState: { do: 'setState', node: 'node', state: null },
+                    setVar: { do: 'setVar', name: 'mode', value: 'BASE' },
+                    setProps: { do: 'setProps', node: 'node', props: {} },
+                    countUp: { do: 'countUp', node: 'node', to: '$win', ms: 1000 },
+                    if: { do: 'if', when: 'win >= 1', then: [], else: [] },
+                    parallel: { do: 'parallel', steps: [[], []] },
+                    seq: { do: 'seq', steps: [] },
+                    forEach: { do: 'forEach', items: '$items', as: 'item', mode: 'parallel', staggerMs: 90, steps: [] },
+                    code: { do: 'code', ref: 'ref' },
+                };
+                steps.push(skeletons[kind] ?? { do: kind });
+                changed();
+            });
+            add.append(select, addBtn);
+            body.appendChild(add);
+        }
+    };
+    render();
+    return {
+        refresh: render,
+        destroy() {
+            root.remove();
+        },
+    };
+}
+
+// Pure transform math for the canvas gizmo: turn a drag into a new LayoutRule, writing
+// the RIGHT field for the rule's kind — the thing the user asked for ("resize on the
+// canvas, not just the sidebar"). Resize maps to a rule's natural size lever:
+//   • widthFrac/heightFrac (viewport-fraction) or wFrac/hFrac (frame-fraction) — per-axis;
+//   • otherwise a uniform `scale` (absolute / cover / grid-cell / pin / plain fraction).
+// The engine re-places the node by its own anchor after the lever changes, so the anchor
+// stays pinned for free — no position juggling here. Rotation writes `rotation`.
+/** Which size lever a rule exposes — decides how a resize drag is interpreted. */
+function sizeLever(rule) {
+    if (rule.mode === 'viewport-fraction' && (rule.widthFrac !== undefined || rule.heightFrac !== undefined))
+        return 'wh-frac';
+    if (rule.mode === 'frame-fraction' && (rule.wFrac !== undefined || rule.hFrac !== undefined))
+        return 'wh-box';
+    if (rule.mode === 'frame-fraction')
+        return 'none'; // point placement inside a frame — no size
+    return 'scale';
+}
+const clampFactor = (f) => (Number.isFinite(f) && f > 0.01 ? f : 0.01);
+const round4 = (n) => Math.round(n * 1e4) / 1e4;
+/**
+ * Multiply a rule's size lever by (factorX, factorY). Corners pass equal factors (uniform);
+ * edges pass 1 on the untouched axis. Uniform levers (`scale`) use factorX.
+ */
+function resizeRule(rule, factorX, factorY) {
+    const fx = clampFactor(factorX);
+    const fy = clampFactor(factorY);
+    const next = JSON.parse(JSON.stringify(rule));
+    switch (sizeLever(rule)) {
+        case 'wh-frac': {
+            const r = next;
+            if (r.widthFrac !== undefined)
+                r.widthFrac = round4(r.widthFrac * fx);
+            if (r.heightFrac !== undefined)
+                r.heightFrac = round4(r.heightFrac * fy);
+            break;
+        }
+        case 'wh-box': {
+            const r = next;
+            if (r.wFrac !== undefined)
+                r.wFrac = round4(r.wFrac * fx);
+            if (r.hFrac !== undefined)
+                r.hFrac = round4(r.hFrac * fy);
+            break;
+        }
+        case 'scale': {
+            const r = next;
+            r.scale = round4((r.scale ?? 1) * fx);
+            break;
+        }
+    }
+    return next;
+}
+function setRuleRotation(rule, radians) {
+    const next = JSON.parse(JSON.stringify(rule));
+    next.rotation = round4(radians);
+    return next;
+}
+/** Nudge a rule's final pixel offset by a screen delta already converted to design units. */
+function nudgeRule(rule, dxDesign, dyDesign) {
+    const next = JSON.parse(JSON.stringify(rule));
+    next.pxNudge = { x: Math.round((next.pxNudge?.x ?? 0) + dxDesign), y: Math.round((next.pxNudge?.y ?? 0) + dyDesign) };
+    return next;
+}
+/** Screen position of each handle for a bounding box. */
+function handlePoint(box, id) {
+    const { x, y, width: w, height: h } = box;
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    switch (id) {
+        case 'nw': return { x, y };
+        case 'n': return { x: cx, y };
+        case 'ne': return { x: x + w, y };
+        case 'e': return { x: x + w, y: cy };
+        case 'se': return { x: x + w, y: y + h };
+        case 's': return { x: cx, y: y + h };
+        case 'sw': return { x, y: y + h };
+        case 'w': return { x, y: cy };
+        case 'rotate': return { x: cx, y: y - 28 };
+    }
+}
+/**
+ * Resize factors from dragging a handle, using the OPPOSITE edge/corner as the fixed
+ * reference — the intuitive "grab a corner, drag out, it grows" feel.
+ */
+function resizeFactors(startBox, handle, pointer) {
+    const left = startBox.x;
+    const right = startBox.x + startBox.width;
+    const top = startBox.y;
+    const bottom = startBox.y + startBox.height;
+    const w = startBox.width || 1;
+    const h = startBox.height || 1;
+    const westX = () => Math.abs(pointer.x - right) / w; // dragging the west side, east fixed
+    const eastX = () => Math.abs(pointer.x - left) / w;
+    const northY = () => Math.abs(pointer.y - bottom) / h;
+    const southY = () => Math.abs(pointer.y - top) / h;
+    switch (handle) {
+        case 'w': return { factorX: westX(), factorY: 1 };
+        case 'e': return { factorX: eastX(), factorY: 1 };
+        case 'n': return { factorX: 1, factorY: northY() };
+        case 's': return { factorX: 1, factorY: southY() };
+        case 'nw': {
+            const f = uniform(westX(), northY());
+            return { factorX: f, factorY: f };
+        }
+        case 'ne': {
+            const f = uniform(eastX(), northY());
+            return { factorX: f, factorY: f };
+        }
+        case 'sw': {
+            const f = uniform(westX(), southY());
+            return { factorX: f, factorY: f };
+        }
+        case 'se': {
+            const f = uniform(eastX(), southY());
+            return { factorX: f, factorY: f };
+        }
+        default: return { factorX: 1, factorY: 1 };
+    }
+}
+/** Corner resize keeps aspect — use the diagonal ratio of the two per-axis factors. */
+function uniform(a, b) {
+    return Math.sqrt(Math.max(0.0001, a) * Math.max(0.0001, b));
+}
+
+// Transform gizmo — the on-canvas resize / rotate / move manipulator for the selected
+// node. Generalizes the frame calibrator: 8 resize handles + a rotate handle, and a body
+// drag to move. Every gesture emits ONE set-layout ScenePatch (orientation-aware), so a
+// mouse transform and an agent/inspector transform are the same operation. Live bounds are
+// re-read each frame, so the gizmo follows the node as the engine relayouts.
+const CORNERS = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+const HS = 9; // handle size
+function createTransformGizmo(opts) {
+    const { handle, app } = opts;
+    const applyPatch = opts.applyPatch ?? handle.patch;
+    const getOrientation = opts.getOrientation ?? (() => 'landscape');
+    // pxNudge lives in the placement (parent/space) coordinate system, which maps to screen
+    // by the parent's world scale — so screen delta ÷ parent-world-scale = design units.
+    const dpp = (id) => {
+        if (opts.designPerPixel)
+            return opts.designPerPixel(id);
+        const parent = handle.node(id)?.parent;
+        const s = parent?.worldTransform?.a ?? 1;
+        return s !== 0 ? 1 / s : 1;
+    };
+    const layer = new Container();
+    layer.eventMode = 'static';
+    app.stage.addChild(layer);
+    const frame = new Graphics();
+    layer.addChild(frame);
+    const handleGfx = new Map();
+    for (const id of [...CORNERS, 'rotate']) {
+        const g = new Graphics();
+        g.eventMode = 'static';
+        g.cursor = id === 'rotate' ? 'grab' : cursorFor(id);
+        g.on('pointerdown', (e) => onDown(id, e));
+        handleGfx.set(id, g);
+        layer.addChild(g);
+    }
+    // A transparent body catcher for move-drags (below the handles).
+    const body = new Graphics();
+    body.eventMode = 'static';
+    body.cursor = 'move';
+    body.on('pointerdown', (e) => onDown('body', e));
+    layer.addChildAt(body, 1);
+    let nodeId = null;
+    let drag = null;
+    const findDocNode = (id, node = handle.doc().root) => {
+        if (node.id === id)
+            return node;
+        for (const child of node.children ?? []) {
+            const hit = findDocNode(id, child);
+            if (hit)
+                return hit;
+        }
+        return undefined;
+    };
+    /** Effective layout rule for the current orientation (base or portrait/landscape override). */
+    const effectiveRule = (id) => {
+        const node = findDocNode(id);
+        if (!node)
+            return {};
+        const o = getOrientation();
+        const override = node.responsive?.[o]?.layout;
+        return override ? { rule: override, orientation: o } : { rule: node.layout };
+    };
+    const boxOf = (id) => {
+        const view = handle.node(id);
+        if (!view || !view.visible)
+            return null;
+        const b = view.getBounds();
+        return { x: b.x, y: b.y, width: b.width, height: b.height };
+    };
+    const onDown = (h, e) => {
+        e.stopPropagation();
+        if (!nodeId)
+            return;
+        const box = boxOf(nodeId);
+        const { rule, orientation } = effectiveRule(nodeId);
+        if (!box || !rule)
+            return;
+        const center = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+        drag = {
+            handle: h,
+            startBox: box,
+            baseRule: JSON.parse(JSON.stringify(rule)),
+            orientation,
+            start: { x: e.global.x, y: e.global.y },
+            center,
+            startAngle: Math.atan2(e.global.y - center.y, e.global.x - center.x),
+        };
+    };
+    const onMove = (e) => {
+        if (!drag || !nodeId)
+            return;
+        let rule;
+        if (drag.handle === 'body') {
+            const s = dpp(nodeId);
+            rule = nudgeRule(drag.baseRule, (e.global.x - drag.start.x) * s, (e.global.y - drag.start.y) * s);
+        }
+        else if (drag.handle === 'rotate') {
+            const angle = Math.atan2(e.global.y - drag.center.y, e.global.x - drag.center.x);
+            rule = setRuleRotation(drag.baseRule, (drag.baseRule.rotation ?? 0) + (angle - drag.startAngle));
+        }
+        else {
+            if (sizeLever(drag.baseRule) === 'none')
+                return; // point-placed frame-fraction: nothing to size
+            const { factorX, factorY } = resizeFactors(drag.startBox, drag.handle, { x: e.global.x, y: e.global.y });
+            rule = resizeRule(drag.baseRule, factorX, factorY);
+        }
+        applyPatch({ op: 'set-layout', id: nodeId, layout: rule, orientation: drag.orientation });
+    };
+    const onUp = () => {
+        drag = null;
+    };
+    app.stage.on('pointermove', onMove);
+    app.stage.on('pointerup', onUp);
+    app.stage.on('pointerupoutside', onUp);
+    const redraw = () => {
+        const box = nodeId ? boxOf(nodeId) : null;
+        frame.clear();
+        body.clear();
+        if (!box) {
+            for (const g of handleGfx.values())
+                g.clear();
+            body.hitArea = null;
+            return;
+        }
+        frame.rect(box.x, box.y, box.width, box.height).stroke({ color: 0x4dd0ff, width: 1.5, alpha: 0.9 });
+        // rotate stem
+        const rot = handlePoint(box, 'rotate');
+        frame.moveTo(box.x + box.width / 2, box.y).lineTo(rot.x, rot.y).stroke({ color: 0x4dd0ff, width: 1, alpha: 0.6 });
+        body.rect(box.x, box.y, box.width, box.height).fill({ color: 0xffffff, alpha: 0.001 });
+        body.hitArea = new Rectangle(box.x, box.y, box.width, box.height);
+        const sizable = sizeLever(nodeId ? effectiveRule(nodeId).rule ?? drag?.baseRule ?? {} : {}) !== 'none';
+        for (const id of [...CORNERS, 'rotate']) {
+            const g = handleGfx.get(id);
+            g.clear();
+            if (id !== 'rotate' && !sizable)
+                continue; // hide resize handles when the rule can't size
+            const p = handlePoint(box, id);
+            if (id === 'rotate')
+                g.circle(p.x, p.y, HS / 1.6).fill({ color: 0x4dd0ff }).stroke({ color: 0x06283d, width: 2 });
+            else
+                g.rect(p.x - HS / 2, p.y - HS / 2, HS, HS).fill({ color: 0x4dd0ff }).stroke({ color: 0x06283d, width: 2 });
+            g.hitArea = new Rectangle(p.x - HS, p.y - HS, HS * 2, HS * 2);
+        }
+    };
+    app.ticker.add(redraw);
+    const fakeEvent = (x, y) => ({ global: { x, y }, stopPropagation() { } });
+    return {
+        attach(id) {
+            nodeId = id;
+            redraw();
+        },
+        refresh: redraw,
+        drag(h, from, to) {
+            onDown(h, fakeEvent(from.x, from.y));
+            onMove(fakeEvent(to.x, to.y));
+            onUp();
+        },
+        destroy() {
+            app.ticker.remove(redraw);
+            app.stage.off('pointermove', onMove);
+            app.stage.off('pointerup', onUp);
+            app.stage.off('pointerupoutside', onUp);
+            layer.destroy({ children: true });
+        },
+    };
+}
+function cursorFor(id) {
+    switch (id) {
+        case 'nw':
+        case 'se': return 'nwse-resize';
+        case 'ne':
+        case 'sw': return 'nesw-resize';
+        case 'n':
+        case 's': return 'ns-resize';
+        case 'e':
+        case 'w': return 'ew-resize';
+        default: return 'default';
+    }
+}
+
+// IDE bridge — the game-side half of the standalone editor. The game runs in an iframe;
+// the IDE app is the parent window. They speak a tiny postMessage RPC (`e8:ide:*`):
+//   parent → child   { type:'e8:ide:req', id, method, params }
+//   child  → parent   { type:'e8:ide:res', id, ok, result | error }
+//   child  → parent   { type:'e8:ide:evt', event, payload }   (unsolicited: selection, ready)
+//
+// The whole editor is doc-driven: the IDE never reaches into Pixi — it reads a snapshot
+// (doc/tree/palette) and sends ScenePatches, exactly what the agent does. Canvas
+// click-to-select is owned here so no game writes selection code. Save goes through the
+// same-origin idePlugin `/__ide/write`.
+const REQ = 'e8:ide:req';
+const RES = 'e8:ide:res';
+const EVT = 'e8:ide:evt';
+function mountIdeBridge(opts) {
+    const { handle, app } = opts;
+    const origin = opts.targetOrigin ?? '*';
+    let selectedId = null;
+    const post = (msg) => window.parent?.postMessage(msg, origin);
+    const emit = (event, payload) => post({ type: EVT, event, payload });
+    const pushSnapshot = () => emit('snapshot', snapshot());
+    const snapshot = () => ({
+        docId: handle.doc().id,
+        doc: handle.doc(),
+        tree: handle.tree(),
+        palette: handle.palette(),
+        sceneFile: opts.sceneFile,
+        selectedId,
+    });
+    // Transform gizmo (resize/rotate/move on canvas) — owns the selection visuals too, so
+    // no game writes selection code. Its patches round-trip a fresh snapshot to the IDE.
+    const gizmo = createTransformGizmo({
+        handle,
+        app,
+        getOrientation: opts.getOrientation,
+        designPerPixel: opts.designPerPixel,
+        applyPatch: (patch) => {
+            handle.patch(patch);
+            pushSnapshot();
+        },
+    });
+    const select = (id) => {
+        selectedId = id;
+        gizmo.attach(id);
+        emit('selected', { id });
+    };
+    // Click any node on the canvas → select it (bubbles the id up to the IDE).
+    const wireHitAreas = () => {
+        const walk = (node) => {
+            if (node.id !== handle.doc().root.id) {
+                const view = handle.node(node.id);
+                if (view) {
+                    view.eventMode = 'static';
+                    view.cursor = 'pointer';
+                    const lb = view.getLocalBounds();
+                    view.hitArea = new Rectangle(lb.x, lb.y, lb.width, lb.height);
+                    view.removeAllListeners('pointerdown');
+                    view.on('pointerdown', (e) => {
+                        e.stopPropagation();
+                        select(node.id);
+                    });
+                }
+            }
+            node.children?.forEach(walk);
+        };
+        walk(handle.doc().root);
+    };
+    app.stage.eventMode = 'static';
+    app.stage.hitArea = app.screen;
+    app.stage.on('pointerdown', () => select(null));
+    wireHitAreas();
+    const afterStructural = () => {
+        opts.relayout?.();
+        wireHitAreas();
+    };
+    // ── RPC ───────────────────────────────────────────────────────────────────────
+    const methods = {
+        snapshot: () => snapshot(),
+        patch: (params) => {
+            const patch = params;
+            handle.patch(patch);
+            if (patch.op === 'add-node' || patch.op === 'remove-node' || patch.op === 'move-node' || patch.op === 'duplicate-node') {
+                afterStructural();
+            }
+            return snapshot();
+        },
+        select: (params) => {
+            select(params.id);
+            return { selectedId };
+        },
+        save: async (params) => {
+            const file = params?.file ?? opts.sceneFile;
+            if (!file)
+                throw new Error('no sceneFile configured');
+            const res = await fetch('/__ide/write', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ file, content: handle.doc() }),
+            });
+            if (!res.ok)
+                throw new Error(await res.text());
+            return { saved: file };
+        },
+    };
+    const onMessage = async (e) => {
+        const data = e.data;
+        if (data?.type !== REQ || typeof data.id !== 'number' || !data.method)
+            return;
+        const fn = methods[data.method];
+        if (!fn)
+            return post({ type: RES, id: data.id, ok: false, error: `unknown method "${data.method}"` });
+        try {
+            const result = await fn(data.params);
+            post({ type: RES, id: data.id, ok: true, result });
+        }
+        catch (err) {
+            post({ type: RES, id: data.id, ok: false, error: String(err?.message ?? err) });
+        }
+    };
+    window.addEventListener('message', onMessage);
+    // Announce readiness (the IDE may mount before or after the game boots).
+    emit('ready', { docId: handle.doc().id });
+    return {
+        refresh: pushSnapshot,
+        select,
+        gizmo,
+        destroy() {
+            window.removeEventListener('message', onMessage);
+            gizmo.destroy();
+        },
+    };
+}
+
+export { createFlowEditor, createFlowTimeline, createSceneInspector, layoutFieldSpecs, mountIdeBridge, propControlKind, setRulePath };
 //# sourceMappingURL=scene-devtools.esm.js.map