@umicat/phaser-sdk 1.0.0

package/dist/editor/EditorOverlayScene.js

@@ -0,0 +1,1896 @@
+import Phaser from 'phaser';
+import { getEntityRegistry } from '../scene/EntityRegistry.js';
+import { findHudEntity, findHudRegistry, UMICAT_HUD_SCENE_KEY, } from '../scene/HudRuntime.js';
+import { isPerFrameHitbox } from '../scene/types.js';
+import { getManifest } from '../scene/SceneLoader.js';
+import { getEditorState, startDrag, clearDrag, getDrag, getSelection, getEditorMode, getDebugOverlayState, getTilemapToolState, isTilemapPaintMode, beginTilemapStroke, beginAutotileStroke, appendTilemapStrokeCell, appendAutotileStrokeClick, endTilemapStroke, getTilemapStroke, beginTilemapRect, updateTilemapRect, endTilemapRect, getTilemapRect, getTilemapResize, beginTilemapResize, updateTilemapResize, endTilemapResize, } from './EditorState.js';
+import { applyTilemapOp, findTilemapLayerById, handleEditTilemap } from './EditorBridge.js';
+import { applyAutotile, findTerrain, getAutotileKind } from '../scene/autotile.js';
+/**
+ * Editor overlay — slice 2.
+ *
+ * Runs ABOVE the world/HUD scenes. Its job:
+ *
+ * 1. Render selection rectangle around the currently selected entity
+ * 2. Render world bounds rectangle (visual cue for "edge of the game world")
+ * 3. Capture pointer events:
+ *    - pointerdown on an entity → posts pickEntity to host
+ *    - drag → mutates the entity's x/y in real time (visual only)
+ *    - pointerup → posts dragEnd with before/after to host
+ *
+ * The overlay scene is launched by EditorBridge when entering Edit mode,
+ * stopped on exit. It holds no persistent state of its own — selection +
+ * drag info live in the shared EditorState attached to the Phaser game.
+ */
+export const EDITOR_OVERLAY_KEY = '__UmicatEditorOverlay';
+const SELECTION_COLOR = 0x4662d8;
+const SELECTION_ALPHA = 1;
+const SELECTION_LINE_WIDTH = 2;
+const WORLD_BOUNDS_COLOR = 0x888888;
+const WORLD_BOUNDS_ALPHA = 0.7;
+// (OUTSIDE_FILL_COLOR / OUTSIDE_FILL_ALPHA moved to EditorBridge as
+// VOID_FILL_COLOR / VOID_FILL_ALPHA — the fill is now drawn in the
+// world scene at low depth, not in the overlay, so entities render on
+// top of it. 2026-05-17 fix.)
+// P1 — camera viewport rect ("Camera screen" in Godot terms): shows where
+// the game's runtime camera is currently looking. Blue, matches Godot 2D
+// editor's Camera2D editor_draw_screen rect.
+const CAMERA_VIEWPORT_COLOR = 0x4488ee;
+const CAMERA_VIEWPORT_ALPHA = 0.9;
+const CAMERA_VIEWPORT_LINE_WIDTH = 2;
+// FB.10 polish — CSS cursor name per tilemap resize handle. Corner handles
+// get the diagonal arrows (`nwse-resize` ↖↘ for NW/SE, `nesw-resize` ↗↙ for
+// NE/SW). Edge handles get the axis arrows (ns / ew). Same conventions as
+// Figma / Sketch / native HTML resize.
+const RESIZE_CURSOR_FOR_HANDLE = {
+    nw: 'nwse-resize',
+    se: 'nwse-resize',
+    ne: 'nesw-resize',
+    sw: 'nesw-resize',
+    n: 'ns-resize',
+    s: 'ns-resize',
+    e: 'ew-resize',
+    w: 'ew-resize',
+};
+// Slice 8: "Show hitboxes" debug overlay colors. Green for hitboxes (matches
+// Hitbox Editor canvas), cyan for depth-anchor crosshairs (distinct + visible
+// on most sprite backgrounds).
+const HITBOX_FILL_COLOR = 0x33dd55;
+const HITBOX_FILL_ALPHA = 0.25;
+const HITBOX_STROKE_COLOR = 0x22aa44;
+const HITBOX_STROKE_ALPHA = 0.9;
+const ANCHOR_COLOR = 0x00d0ff;
+const ANCHOR_ALPHA = 1;
+const ANCHOR_CROSS_LEN = 6;
+export class EditorOverlayScene extends Phaser.Scene {
+    constructor() {
+        super({ key: EDITOR_OVERLAY_KEY });
+        // P1 infinite canvas — input state. Pan can be triggered by middle-button
+        // drag OR by space+left-drag. We accumulate a "pan active" flag so the
+        // existing selection / drag-to-move handlers don't fire while panning.
+        this.panActive = false;
+        this.spaceHeld = false;
+        this.panStartScreen = null;
+        this.panStartScroll = null;
+        this.handleShortcut = (e) => {
+            // Don't swallow keys when the user is typing in a real form control —
+            // shouldn't happen inside the iframe, but be defensive.
+            const target = e.target;
+            if (target) {
+                const tag = target.tagName;
+                if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT')
+                    return;
+                if (target.isContentEditable)
+                    return;
+            }
+            const k = e.key;
+            if (e.metaKey || e.ctrlKey) {
+                const lower = k.toLowerCase();
+                if (lower === 'z') {
+                    e.preventDefault();
+                    this.postShortcut(e.shiftKey ? 'redo' : 'undo');
+                }
+                else if (lower === 'y') {
+                    e.preventDefault();
+                    this.postShortcut('redo');
+                }
+                else if (lower === 's') {
+                    e.preventDefault();
+                    this.postShortcut('save');
+                }
+                return;
+            }
+            if (k === 'Backspace' || k === 'Delete') {
+                // Suppress default (Backspace = browser back-nav inside iframe).
+                e.preventDefault();
+                this.postShortcut('delete');
+            }
+        };
+    }
+    init(data) {
+        this.worldBounds = data.worldBounds;
+        this.hitTest = data.hitTest;
+        this.hitTestAll = data.hitTestAll;
+        this.postPick = data.postPick;
+        this.postDragEnd = data.postDragEnd;
+        this.postShortcut = data.postShortcut;
+        this.applyPanZoom = data.applyPanZoom;
+    }
+    create() {
+        this.graphics = this.add.graphics();
+        // Mirror the EDITOR camera (P1 infinite canvas, 2026-05-17). Falls back
+        // to the world scene's cameras.main on the very first frame when the
+        // editor cam hasn't been installed yet (enterEdit order may race) —
+        // `applyEditorPanZoom`'s subsequent mutations will keep the overlay
+        // cam in sync.
+        const sourceCam = this.findEditorCamera() ?? this.findWorldSceneCamera();
+        if (sourceCam) {
+            this.cameras.main.setScroll(sourceCam.scrollX, sourceCam.scrollY);
+            this.cameras.main.setZoom(sourceCam.zoom);
+        }
+        this.input.on('pointerdown', this.handlePointerDown, this);
+        this.input.on('pointermove', this.handlePointerMove, this);
+        this.input.on('pointerup', this.handlePointerUp, this);
+        // P1 infinite canvas — wheel for zoom (cursor-anchored), middle-button
+        // and space+drag for pan. Only active in world mode (HUD's identity
+        // camera doesn't pan/zoom). Wired via native DOM event on the canvas
+        // because Phaser's pointer events don't surface `wheel`.
+        this.installPanZoomInput();
+        // Forward editor shortcuts back to the host. The user clicks the canvas
+        // to select an entity, which moves focus into the iframe — after that,
+        // native Cmd+Z lands here, not on the host's window. We catch it before
+        // Phaser's keyboard plugin gets it (DOM phase is fine because Phaser
+        // listens via its own KeyboardManager), preventDefault'ing browser
+        // back-nav-on-Cmd+Left etc. is unnecessary; we only intercept the few
+        // editor keys we care about.
+        if (typeof document !== 'undefined') {
+            document.addEventListener('keydown', this.handleShortcut, true);
+            this.events.once(Phaser.Scenes.Events.SHUTDOWN, () => {
+                document.removeEventListener('keydown', this.handleShortcut, true);
+            });
+        }
+    }
+    /**
+     * Pointer coords mode-aware. World mode uses world coords (camera-relative);
+     * HUD mode transforms pointer through the HUD scene's camera to land in
+     * HUD-intrinsic coords (the coord space widget positions live in).
+     *
+     * Pre-0.2.90 this returned `pointer.x/y` (canvas pixels) for HUD mode
+     * — fine when HUD cam was an identity camera (viewport == canvas,
+     * zoom == 1). But 0.2.89 changed HUD cam to render INSIDE the camera-
+     * viewport rect on the editor canvas with editor-cam zoom, so canvas
+     * pixels no longer equal HUD-intrinsic coords. Hit-test against
+     * widgets (positioned in HUD-intrinsic) would only match a tiny
+     * patch near the canvas top-left, hence the user's "have to click
+     * many times" complaint. Using `hudCam.getWorldPoint(...)` applies
+     * the cam's inverse transform (subtract viewport offset, divide by
+     * zoom) and lands in widget coord space.
+     */
+    pointerCoords(pointer) {
+        if (getEditorMode(this.game) === 'hud') {
+            const hudScene = this.game.scene.getScene(UMICAT_HUD_SCENE_KEY);
+            const hudCam = hudScene?.cameras.main;
+            if (hudCam) {
+                const p = hudCam.getWorldPoint(pointer.x, pointer.y);
+                return { x: p.x, y: p.y };
+            }
+            return { x: pointer.x, y: pointer.y };
+        }
+        return { x: pointer.worldX, y: pointer.worldY };
+    }
+    handlePointerDown(pointer) {
+        const state = getEditorState(this.game);
+        if (!state.active)
+            return;
+        // P1 infinite canvas — pan trigger: middle button OR space+left.
+        // Allowed in both world AND hud edit modes (2026-05-17 fix). The
+        // pan only mutates the EDITOR cam (world scene), so HUD widgets
+        // (rendered by HUD's separate identity camera) stay anchored to
+        // their canvas-pixel positions — pan doesn't visually move them.
+        // User gets to see HUD overlaid on different world-pan states.
+        const event = pointer.event;
+        const isMiddleButton = pointer.button === 1;
+        const isSpaceDrag = this.spaceHeld && pointer.button === 0;
+        if (isMiddleButton || isSpaceDrag) {
+            this.panActive = true;
+            this.panStartScreen = { x: pointer.x, y: pointer.y };
+            const editorCam = this.findActiveEditorCamera();
+            this.panStartScroll = editorCam
+                ? { x: editorCam.scrollX, y: editorCam.scrollY }
+                : { x: 0, y: 0 };
+            event?.preventDefault?.();
+            return;
+        }
+        const { x: px, y: py } = this.pointerCoords(pointer);
+        // FB.9a — Alt+click cycles through overlapping entities. When 2+
+        // entities visually overlap at the cursor, normal selection always
+        // picks topmost; Alt+click instead picks the entity just under
+        // (lower depth than) the current selection in the hit stack. Wraps
+        // around at the bottom. Standard Figma / Sketch / XD convention.
+        // Runs BEFORE paint-mode dispatch — Alt is a deliberate "show me
+        // something else under here" gesture; user can always click without
+        // Alt afterward to paint.
+        if (event?.altKey && !event?.metaKey && !event?.ctrlKey) {
+            const stack = this.hitTestAll(px, py);
+            if (stack.length > 0) {
+                const currentSelectedId = getSelection(this.game);
+                const currentIdx = stack.findIndex((go) => go.getData('entityId') === currentSelectedId);
+                // First Alt+click on this spot (current selection not in stack) →
+                // pick topmost. Subsequent Alt+clicks → cycle down through stack;
+                // after the bottommost, wrap back to topmost.
+                const nextIdx = currentIdx === -1 ? 0 : (currentIdx + 1) % stack.length;
+                const nextEntityId = stack[nextIdx].getData('entityId');
+                if (nextEntityId) {
+                    this.postPick(nextEntityId, {
+                        shift: !!event.shiftKey,
+                        cmdOrCtrl: false,
+                        alt: true,
+                    });
+                    event.preventDefault?.();
+                    return;
+                }
+            }
+        }
+        // Slice 6 Phase B.6.1: resize-handle hit-test takes priority over
+        // BOTH paint and entity selection. Handles are drawn on top of the
+        // tilemap bounds when paint mode is active. Click+drag → resize the
+        // tilemap; one-edge-anchored (opposite edge stays fixed).
+        if (isTilemapPaintMode(this.game)) {
+            const handle = this.hitTestTilemapResizeHandle(px, py);
+            if (handle) {
+                this.beginTilemapResizeDrag(handle);
+                event?.preventDefault?.();
+                return;
+            }
+        }
+        // Slice 6 Phase B: tilemap paint mode hijacks pointerdown — clicks
+        // paint cells instead of selecting / dragging entities. Check before
+        // hitTest so a click on the tilemap doesn't reselect-and-drag-itself.
+        // Mode is true only when (a) the selected entity is a tilemap AND
+        // (b) the host has pushed a TilemapTool state with a non-null layer.
+        if (isTilemapPaintMode(this.game)) {
+            const handled = this.handleTilemapPaintDown(px, py);
+            if (handled) {
+                event?.preventDefault?.();
+                return;
+            }
+            // Pointer fell outside the tilemap bounds — fall through to normal
+            // selection so the user can click out of paint mode by clicking
+            // another entity / empty canvas.
+        }
+        const hit = this.hitTest(px, py);
+        const modifiers = {
+            shift: !!event?.shiftKey,
+            cmdOrCtrl: !!(event?.metaKey || event?.ctrlKey),
+            alt: !!event?.altKey,
+        };
+        if (!hit) {
+            this.postPick(null, modifiers);
+            return;
+        }
+        const entityId = hit.getData('entityId');
+        if (!entityId) {
+            this.postPick(null, modifiers);
+            return;
+        }
+        // Surface the prefab id when the picked GameObject was spawned via
+        // `spawnPrefab` (set on the data manager at spawn — see Prefabs.ts).
+        // The host routes prefab-instance picks to the Prefab Inspector.
+        const prefabId = hit.getData('entityPrefabId');
+        this.postPick(entityId, modifiers, prefabId);
+        // Begin drag immediately on pointerdown (drag threshold can be added later).
+        // In HUD mode `startEntity` carries the entity's anchor offset (not the
+        // GameObject's canvas-pixel position) so dragEnd can report the new
+        // offset values directly.
+        if (getEditorMode(this.game) === 'hud') {
+            const ent = findHudEntity(this.game, entityId);
+            const startOffset = {
+                x: ent?.anchor.offsetX ?? 0,
+                y: ent?.anchor.offsetY ?? 0,
+            };
+            startDrag(this.game, entityId, { x: px, y: py }, startOffset);
+        }
+        else {
+            const target = hit;
+            startDrag(this.game, entityId, { x: px, y: py }, { x: target.x, y: target.y });
+        }
+    }
+    handlePointerMove(pointer) {
+        // FB.10 polish — update canvas cursor to indicate resize when hovering
+        // a tilemap resize handle. Done first so cursor reflects the immediate
+        // visual state regardless of which branch we hit below.
+        this.updateResizeCursor(pointer);
+        // P1 infinite canvas — pan in progress: translate screen delta into
+        // world delta via the current zoom, set scroll absolute (relative-mode
+        // would accumulate floating-point drift over many move events).
+        if (this.panActive && this.panStartScreen && this.panStartScroll) {
+            const editorCam = this.findActiveEditorCamera();
+            const zoom = editorCam?.zoom ?? 1;
+            const dxScreen = pointer.x - this.panStartScreen.x;
+            const dyScreen = pointer.y - this.panStartScreen.y;
+            this.applyPanZoom({
+                scrollX: this.panStartScroll.x - dxScreen / zoom,
+                scrollY: this.panStartScroll.y - dyScreen / zoom,
+            });
+            return;
+        }
+        // Slice 6 Phase B.6.1: resize-handle drag in flight. Update preview
+        // dims based on cursor position; ghost rect renders in update().
+        if (getTilemapResize(this.game)) {
+            const { x: px, y: py } = this.pointerCoords(pointer);
+            this.updateTilemapResizeDrag(px, py);
+            return;
+        }
+        // Slice 6 Phase B: continue an in-flight tilemap stroke (brush/eraser
+        // drag) OR rect drag. handleTilemapPaintMove already branches on
+        // which one is active internally — we just need to route to it
+        // whenever EITHER is in flight. Without checking getTilemapRect
+        // here, rect-drag pointermoves would fall through to entity-drag
+        // logic (which finds no drag since paint mode preempted startDrag),
+        // and the rect endpoint would never update → release always paints
+        // a 1×1 rect (single tile).
+        if (getTilemapStroke(this.game) || getTilemapRect(this.game)) {
+            const { x: px, y: py } = this.pointerCoords(pointer);
+            this.handleTilemapPaintMove(px, py);
+            return;
+        }
+        const drag = getDrag(this.game);
+        if (!drag)
+            return;
+        const registry = this.findEntityRegistry();
+        if (!registry)
+            return;
+        const go = registry.byId(drag.entityId);
+        if (!go)
+            return;
+        const { x: px, y: py } = this.pointerCoords(pointer);
+        const dx = px - drag.startWorld.x;
+        const dy = py - drag.startWorld.y;
+        if (getEditorMode(this.game) === 'hud') {
+            // HUD `startEntity` carries the offset, not the canvas-pixel start
+            // pos. We track per-frame delta on the GO so each pointermove just
+            // applies the incremental nudge — `go.x = startGoPos.x + dx` doesn't
+            // work because startGoPos isn't stored. The visual position the user
+            // sees is the canvas pos derived from the live anchor base + delta.
+            const lastDx = go.__lastDragDx ?? 0;
+            const lastDy = go.__lastDragDy ?? 0;
+            go.x += dx - lastDx;
+            go.y += dy - lastDy;
+            go.__lastDragDx = dx;
+            go.__lastDragDy = dy;
+        }
+        else {
+            go.x = drag.startEntity.x + dx;
+            go.y = drag.startEntity.y + dy;
+        }
+    }
+    handlePointerUp(pointer) {
+        if (this.panActive) {
+            this.panActive = false;
+            this.panStartScreen = null;
+            this.panStartScroll = null;
+            return;
+        }
+        // Slice 6 Phase B.6.1: end a resize-handle drag — commit the final
+        // resize op (size + transformDelta to anchor opposite edge).
+        if (getTilemapResize(this.game)) {
+            this.commitTilemapResize();
+            return;
+        }
+        // Slice 6 Phase B: end an in-flight tilemap stroke (brush/eraser) OR
+        // rect drag. Both compose a single TilemapEditOp + post `tilemapEdited`
+        // so undo reverts the whole stroke/rect in one step.
+        if (getTilemapStroke(this.game) || getTilemapRect(this.game)) {
+            this.handleTilemapPaintUp();
+            return;
+        }
+        const drag = getDrag(this.game);
+        if (!drag)
+            return;
+        const { x: px, y: py } = this.pointerCoords(pointer);
+        const dx = px - drag.startWorld.x;
+        const dy = py - drag.startWorld.y;
+        const before = drag.startEntity;
+        const after = { x: drag.startEntity.x + dx, y: drag.startEntity.y + dy };
+        // Reset the per-drag delta accumulator on the GO if HUD mode left one.
+        if (getEditorMode(this.game) === 'hud') {
+            const reg = this.findEntityRegistry();
+            const go = reg?.byId(drag.entityId);
+            if (go) {
+                go.__lastDragDx = 0;
+                go.__lastDragDy = 0;
+            }
+        }
+        clearDrag(this.game);
+        if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5)
+            return;
+        this.postDragEnd(drag.entityId, before, after);
+    }
+    // --- Slice 6 Phase B — tilemap painter -----------------------------------
+    /**
+     * Pointer-down inside paint mode. Returns true when the pointer hit the
+     * active layer (stroke began); false when the pointer fell outside the
+     * tilemap's bounds (caller falls through to normal selection).
+     *
+     * Begins a stroke + applies the first cell. brush/eraser tools paint
+     * incrementally per pointermove; rect/fill/picker (Phase B.4) handle
+     * pointerdown specially — for now only brush + eraser are wired.
+     */
+    handleTilemapPaintDown(worldX, worldY) {
+        const tool = getTilemapToolState(this.game);
+        if (!tool.tilemapEditingId || !tool.activeLayerId) {
+            // Paint mode is active per `isTilemapPaintMode` (which gated the caller)
+            // but the per-tool state is incomplete. This means the host pushed an
+            // intermediate state — fall through to drag is OK here.
+            return false;
+        }
+        const resolved = this.findActiveTilemapLayerWithContainer(tool.tilemapEditingId, tool.activeLayerId);
+        if (!resolved) {
+            console.warn(`[umicat/editor] tilemap paint: active layer '${tool.activeLayerId}' on entity '${tool.tilemapEditingId}' not found in scene — falling through to drag. ` +
+                `Likely cause: layer ref stale after a structure op (addLayer/removeLayer) failed to update the host's activeLayerId.`);
+            return false;
+        }
+        const { layer, container } = resolved;
+        // Layers live in scene root (not as Container children) and are
+        // positioned at WORLD coords via `installTilemapLayerSync`. So
+        // worldToTileXY operates on raw world coords directly — no coord
+        // shift needed.
+        const tile = layer.worldToTileXY(worldX, worldY, true);
+        if (tile.x < 0 || tile.y < 0 ||
+            tile.x >= layer.tilemap.width || tile.y >= layer.tilemap.height) {
+            // Click outside the active layer's bounds — fall-through to entity
+            // selection is the right behavior (user clicked off the tilemap).
+            return false;
+        }
+        // ---- From here on, click is INSIDE the tilemap bounds. ----
+        //
+        // Paint dispatch must either succeed (return true) OR no-op + warn
+        // (also return true so the click is consumed). NEVER fall through to
+        // drag — that's the recurring "selected terrain + clicked brush, but
+        // the tilemap drags instead of painting" bug. The user's click
+        // intent is unambiguously "paint" once we're past the bounds check.
+        // Drag-vs-paint policy:
+        //
+        //   armed = (activeTerrainId != null) || (activeTile != null)
+        //           || (tool === 'eraser')          // eraser doesn't need a tile
+        //           || (tool === 'picker')          // picker reads, doesn't need a tile
+        //
+        // - armed=false → user has nothing loaded in the brush AND the tool
+        //   isn't one that works without a tile. Fall through to entity
+        //   selection/drag — that's how the user moves the tilemap.
+        // - armed=true → user expects to interact with the tilemap. If dispatch
+        //   fails (terrain unresolved, etc.), CONSUME the click + warn. Never
+        //   silently drag the tilemap — that was the recurring "selected
+        //   terrain but brush doesn't paint, it drags" bug.
+        //
+        // Eraser is armed-by-tool because its job is "erase the cell I clicked"
+        // — no activeTile required. Same for picker (eyedropper reads the cell).
+        // Brush / rect / fill REQUIRE activeTile or activeTerrainId; without
+        // either, click is unambiguously a drag intent.
+        const armed = tool.activeTerrainId != null ||
+            tool.activeTile != null ||
+            tool.tool === 'eraser' ||
+            tool.tool === 'picker';
+        if (!armed) {
+            // Nothing to paint with — let the click flow to entity drag.
+            return false;
+        }
+        switch (tool.tool) {
+            case 'brush': {
+                if (tool.activeTerrainId != null) {
+                    const ctx = this.resolveAutotileTerrainContext(layer, tool.activeTerrainId);
+                    if (ctx) {
+                        beginAutotileStroke(this.game, tool.tilemapEditingId, tool.activeLayerId, tool.activeTerrainId, 
+                        /* erase */ false);
+                        this.applyAutotileStrokeCell(layer, tile.x, tile.y, ctx);
+                        return true;
+                    }
+                    // Terrain context unresolved — warn already emitted. Consume
+                    // (we're armed) so the tilemap doesn't drag.
+                    return true;
+                }
+                // tool.activeTile is non-null per `armed` check above.
+                beginTilemapStroke(this.game, tool.tilemapEditingId, tool.activeLayerId);
+                this.applyStrokeCell(layer, tile.x, tile.y, tool);
+                return true;
+            }
+            case 'eraser': {
+                // Eraser is always "armed" — it doesn't need activeTile. But to
+                // keep drag-when-idle working, eraser must EITHER have a terrain
+                // (autotile erase) OR be the explicitly-chosen tool (user picked
+                // eraser from the palette → intent is clearly to erase).
+                // The `armed` gate above already required activeTile|terrain, so
+                // bare eraser with neither falls through to drag. The user picks
+                // eraser → tool is 'eraser' but armed=false → drag wins. That's
+                // fine: if you want to erase, pick eraser AND keep activeTile/
+                // terrain set so we know you mean "erase paint", not "move".
+                if (tool.activeTerrainId != null) {
+                    const ctx = this.resolveAutotileTerrainContext(layer, tool.activeTerrainId);
+                    if (ctx) {
+                        beginAutotileStroke(this.game, tool.tilemapEditingId, tool.activeLayerId, tool.activeTerrainId, 
+                        /* erase */ true);
+                        this.applyAutotileStrokeCell(layer, tile.x, tile.y, ctx);
+                        return true;
+                    }
+                    return true;
+                }
+                beginTilemapStroke(this.game, tool.tilemapEditingId, tool.activeLayerId);
+                this.applyStrokeCell(layer, tile.x, tile.y, tool);
+                return true;
+            }
+            case 'rect': {
+                if (tool.activeTerrainId != null) {
+                    const ctx = this.resolveAutotileTerrainContext(layer, tool.activeTerrainId);
+                    if (ctx) {
+                        beginTilemapRect(this.game, tool.tilemapEditingId, tool.activeLayerId, tile.x, tile.y, { terrainId: tool.activeTerrainId, erase: false });
+                        return true;
+                    }
+                    return true;
+                }
+                beginTilemapRect(this.game, tool.tilemapEditingId, tool.activeLayerId, tile.x, tile.y);
+                return true;
+            }
+            case 'fill': {
+                if (tool.activeTerrainId != null) {
+                    const ctx = this.resolveAutotileTerrainContext(layer, tool.activeTerrainId);
+                    if (ctx) {
+                        this.applyAutotileBucketFill(layer, tile.x, tile.y, ctx, tool);
+                        return true;
+                    }
+                    return true;
+                }
+                this.applyBucketFill(layer, tile.x, tile.y, tool.activeTile, tool);
+                return true;
+            }
+            case 'picker': {
+                // Eyedropper — read cell + post to host.
+                const t = layer.getTileAt(tile.x, tile.y, true);
+                const tileIndex = t && t.index >= 0 ? t.index : null;
+                const msg = {
+                    type: 'umicat:editor:tilemapTilePicked',
+                    entityId: tool.tilemapEditingId,
+                    layerId: tool.activeLayerId,
+                    tileIndex,
+                };
+                if (typeof window !== 'undefined' && window.parent) {
+                    window.parent.postMessage(msg, '*');
+                }
+                return true;
+            }
+        }
+        return false;
+    }
+    handleTilemapPaintMove(worldX, worldY) {
+        // Rect-drag in flight — update preview rect end point; clamp into layer
+        // bounds so the preview never extends past the tilemap.
+        const rect = getTilemapRect(this.game);
+        if (rect) {
+            const resolved = this.findActiveTilemapLayerWithContainer(rect.entityId, rect.layerId);
+            if (!resolved)
+                return;
+            const { layer, container } = resolved;
+            const tile = layer.worldToTileXY(worldX, worldY, true);
+            const clampedX = Math.max(0, Math.min(layer.tilemap.width - 1, tile.x));
+            const clampedY = Math.max(0, Math.min(layer.tilemap.height - 1, tile.y));
+            updateTilemapRect(this.game, clampedX, clampedY);
+            return;
+        }
+        // Brush/eraser stroke in flight — paint one more cell. Layers are now
+        // world-positioned (see createTilemap) so worldToTileXY takes raw
+        // world coords — no container-offset shift needed.
+        const stroke = getTilemapStroke(this.game);
+        if (!stroke)
+            return;
+        const tool = getTilemapToolState(this.game);
+        const layer = this.findActiveTilemapLayer(stroke.entityId, stroke.layerId);
+        if (!layer)
+            return;
+        const tile = layer.worldToTileXY(worldX, worldY, true);
+        if (tile.x < 0 || tile.y < 0 ||
+            tile.x >= layer.tilemap.width || tile.y >= layer.tilemap.height) {
+            return;
+        }
+        // Slice 6 Phase D — drag-paint continues in the stroke's mode.
+        if (stroke.autotile) {
+            const ctx = this.resolveAutotileTerrainContext(layer, stroke.autotile.terrainId);
+            if (!ctx)
+                return;
+            this.applyAutotileStrokeCell(layer, tile.x, tile.y, ctx);
+            return;
+        }
+        this.applyStrokeCell(layer, tile.x, tile.y, tool);
+    }
+    /**
+     * Compose stroke into one TilemapEditOp + post to host. Host records the
+     * undo command + persists on next flush. Stroke state is cleared.
+     *
+     * Brush stroke → `paint` op with all cells. Eraser stroke → `erase` op.
+     * (Phase B.4 adds rect / fill emit paths.)
+     */
+    handleTilemapPaintUp() {
+        // Rect-drag takes priority — only one of (stroke, rect) is ever in
+        // flight, but check rect first so a partial brush stroke doesn't
+        // accidentally swallow a rect commit (defensive).
+        const rect = endTilemapRect(this.game);
+        if (rect) {
+            this.commitTilemapRect(rect);
+            return;
+        }
+        const stroke = endTilemapStroke(this.game);
+        if (!stroke || stroke.cells.length === 0)
+            return;
+        // Slice 6 Phase D — autotile-mode stroke. Emit a single `autotilePaint`
+        // op carrying the user-clicked cells; the `previousCells` array (built
+        // from stroke.cells with first-wins prev semantics) captures every
+        // cascade-affected cell so undo replays the inverse op cleanly.
+        let op;
+        if (stroke.autotile) {
+            if (stroke.autotile.clickedCells.length === 0)
+                return;
+            // D.2.5.2 fix — include cascade-resolved cells so host save can
+            // persist the autotile output without recomputing.
+            const resolvedCells = stroke.cells.map((c) => ({
+                x: c.x,
+                y: c.y,
+                index: c.index,
+            }));
+            op = {
+                kind: 'autotilePaint',
+                layerId: stroke.layerId,
+                terrainId: stroke.autotile.terrainId,
+                cells: stroke.autotile.clickedCells.slice(),
+                erase: stroke.autotile.erase,
+                resolvedCells,
+            };
+            const previousCells = stroke.cells.map((c) => ({
+                x: c.x,
+                y: c.y,
+                index: c.prevIndex,
+            }));
+            const message = {
+                type: 'umicat:editor:tilemapEdited',
+                entityId: stroke.entityId,
+                op,
+                previousCells,
+            };
+            if (typeof window !== 'undefined' && window.parent) {
+                window.parent.postMessage(message, '*');
+            }
+            return;
+        }
+        const isErase = stroke.cells.every((c) => c.index == null);
+        if (isErase) {
+            op = {
+                kind: 'erase',
+                layerId: stroke.layerId,
+                cells: stroke.cells.map((c) => ({ x: c.x, y: c.y })),
+            };
+        }
+        else {
+            op = {
+                kind: 'paint',
+                layerId: stroke.layerId,
+                cells: stroke.cells.map((c) => ({
+                    x: c.x,
+                    y: c.y,
+                    // Brush stroke — every cell has index. Non-null asserted because
+                    // mixed-mode strokes shouldn't happen (one tool active per stroke).
+                    index: c.index,
+                })),
+            };
+        }
+        const previousCells = stroke.cells.map((c) => ({
+            x: c.x,
+            y: c.y,
+            index: c.prevIndex,
+        }));
+        const message = {
+            type: 'umicat:editor:tilemapEdited',
+            entityId: stroke.entityId,
+            op,
+            previousCells,
+        };
+        if (typeof window !== 'undefined' && window.parent) {
+            window.parent.postMessage(message, '*');
+        }
+    }
+    /**
+     * Compose a `fillRect` op from the completed rect drag + apply it live +
+     * post tilemapEdited. `previousCells` captures every cell the rect
+     * overwrites so undo replays them onto the layer.
+     */
+    commitTilemapRect(rect) {
+        const tool = getTilemapToolState(this.game);
+        const layer = this.findActiveTilemapLayer(rect.entityId, rect.layerId);
+        if (!layer)
+            return;
+        const x0 = Math.min(rect.startX, rect.endX);
+        const y0 = Math.min(rect.startY, rect.endY);
+        const x1 = Math.max(rect.startX, rect.endX);
+        const y1 = Math.max(rect.startY, rect.endY);
+        const w = x1 - x0 + 1;
+        const h = y1 - y0 + 1;
+        // Slice 6 Phase D — autotile rect commit. Each in-rect cell is one
+        // "clicked cell" for the cascade; previousCells covers every cell
+        // the union of cascades touched (rect interior + 1-cell border).
+        if (rect.autotile) {
+            const ctx = this.resolveAutotileTerrainContext(layer, rect.autotile.terrainId);
+            if (!ctx)
+                return;
+            const mode = rect.autotile.erase ? 'erase' : 'paint';
+            const clickedCells = [];
+            const affectedMap = new Map();
+            // Snapshot prev indices BEFORE any cascade runs (first-wins per cell).
+            const layerW = layer.tilemap.width;
+            const layerH = layer.tilemap.height;
+            for (let y = y0 - 1; y <= y1 + 1; y++) {
+                for (let x = x0 - 1; x <= x1 + 1; x++) {
+                    if (x < 0 || y < 0 || x >= layerW || y >= layerH)
+                        continue;
+                    const key = `${x},${y}`;
+                    if (affectedMap.has(key))
+                        continue;
+                    const t = layer.getTileAt(x, y, true);
+                    const prev = t && t.index >= 0 ? t.index : -1;
+                    affectedMap.set(key, { x, y, prevIndex: prev });
+                }
+            }
+            const rectKind = getAutotileKind(ctx.asset);
+            for (let y = y0; y <= y1; y++) {
+                for (let x = x0; x <= x1; x++) {
+                    clickedCells.push({ x, y });
+                    applyAutotile(layer, x, y, ctx.terrain, mode, rectKind);
+                }
+            }
+            // D.2.5.2 fix — read post-cascade tile indices for save persistence.
+            const resolvedCells = Array.from(affectedMap.values()).map((c) => {
+                const t = layer.getTileAt(c.x, c.y, true);
+                const idx = t && t.index >= 0 ? t.index : null;
+                return { x: c.x, y: c.y, index: idx };
+            });
+            const op = {
+                kind: 'autotilePaint',
+                layerId: rect.layerId,
+                terrainId: rect.autotile.terrainId,
+                cells: clickedCells,
+                erase: rect.autotile.erase,
+                resolvedCells,
+            };
+            const previousCells = Array.from(affectedMap.values()).map((c) => ({
+                x: c.x,
+                y: c.y,
+                index: c.prevIndex < 0 ? null : c.prevIndex,
+            }));
+            const message = {
+                type: 'umicat:editor:tilemapEdited',
+                entityId: rect.entityId,
+                op,
+                previousCells,
+            };
+            if (typeof window !== 'undefined' && window.parent) {
+                window.parent.postMessage(message, '*');
+            }
+            return;
+        }
+        if (tool.activeTile == null)
+            return;
+        const previousCells = [];
+        for (let y = y0; y <= y1; y++) {
+            for (let x = x0; x <= x1; x++) {
+                const t = layer.getTileAt(x, y, true);
+                const prev = t && t.index >= 0 ? t.index : null;
+                previousCells.push({ x, y, index: prev });
+            }
+        }
+        const op = {
+            kind: 'fillRect',
+            layerId: rect.layerId,
+            x: x0,
+            y: y0,
+            w,
+            h,
+            index: tool.activeTile,
+        };
+        applyTilemapOp(layer, op);
+        const message = {
+            type: 'umicat:editor:tilemapEdited',
+            entityId: rect.entityId,
+            op,
+            previousCells,
+        };
+        if (typeof window !== 'undefined' && window.parent) {
+            window.parent.postMessage(message, '*');
+        }
+    }
+    /**
+     * Bucket fill (4-connected flood). Captures every cell the flood
+     * touches into previousCells before applying, then posts one tilemapEdited
+     * so undo restores the whole flooded area.
+     *
+     * Reads the layer in one pass to compute the visited set + previous
+     * indices, then commits via Phaser's putTileAt. Single-pass because
+     * applyTilemapOp would re-walk + duplicate work.
+     */
+    applyBucketFill(layer, seedX, seedY, targetIndex, tool) {
+        if (!tool.tilemapEditingId || !tool.activeLayerId)
+            return;
+        const w = layer.tilemap.width;
+        const h = layer.tilemap.height;
+        const seedTile = layer.getTileAt(seedX, seedY, true);
+        const seedIndex = seedTile && seedTile.index >= 0 ? seedTile.index : -1;
+        if (seedIndex === targetIndex)
+            return; // already painted
+        const visited = new Set();
+        const previousCells = [];
+        const stack = [[seedX, seedY]];
+        let safety = 0;
+        while (stack.length > 0 && safety++ < w * h) {
+            const [cx, cy] = stack.pop();
+            if (cx < 0 || cy < 0 || cx >= w || cy >= h)
+                continue;
+            const key = cy * w + cx;
+            if (visited.has(key))
+                continue;
+            const t = layer.getTileAt(cx, cy, true);
+            const idx = t && t.index >= 0 ? t.index : -1;
+            if (idx !== seedIndex)
+                continue;
+            visited.add(key);
+            previousCells.push({ x: cx, y: cy, index: idx < 0 ? null : idx });
+            layer.putTileAt(targetIndex, cx, cy);
+            stack.push([cx + 1, cy], [cx - 1, cy], [cx, cy + 1], [cx, cy - 1]);
+        }
+        if (previousCells.length === 0)
+            return;
+        const op = {
+            kind: 'bucketFill',
+            layerId: tool.activeLayerId,
+            x: seedX,
+            y: seedY,
+            index: targetIndex,
+        };
+        const message = {
+            type: 'umicat:editor:tilemapEdited',
+            entityId: tool.tilemapEditingId,
+            op,
+            previousCells,
+        };
+        if (typeof window !== 'undefined' && window.parent) {
+            window.parent.postMessage(message, '*');
+        }
+    }
+    /**
+     * Slice 6 Phase D — autotile bucket fill. 4-connected flood over cells
+     * with matching tile index (or all empties), then runs the wang cascade
+     * for each flooded cell. The resulting `autotilePaint` op carries every
+     * flooded cell as a clicked cell; `previousCells` covers the flood +
+     * its 1-cell border for cascade-correct undo.
+     */
+    applyAutotileBucketFill(layer, seedX, seedY, ctx, tool) {
+        if (!tool.tilemapEditingId || !tool.activeLayerId || !tool.activeTerrainId)
+            return;
+        const w = layer.tilemap.width;
+        const h = layer.tilemap.height;
+        const seedTile = layer.getTileAt(seedX, seedY, true);
+        const seedIndex = seedTile && seedTile.index >= 0 ? seedTile.index : -1;
+        const visited = new Set();
+        const clicked = [];
+        const stack = [[seedX, seedY]];
+        let safety = 0;
+        while (stack.length > 0 && safety++ < w * h) {
+            const [cx, cy] = stack.pop();
+            if (cx < 0 || cy < 0 || cx >= w || cy >= h)
+                continue;
+            const key = cy * w + cx;
+            if (visited.has(key))
+                continue;
+            const t = layer.getTileAt(cx, cy, true);
+            const idx = t && t.index >= 0 ? t.index : -1;
+            if (idx !== seedIndex)
+                continue;
+            visited.add(key);
+            clicked.push({ x: cx, y: cy });
+            stack.push([cx + 1, cy], [cx - 1, cy], [cx, cy + 1], [cx, cy - 1]);
+        }
+        if (clicked.length === 0)
+            return;
+        // Snapshot prev indices for flooded cells + their 1-cell border BEFORE
+        // any cascade runs (cascade will mutate neighbors; first-wins matters).
+        const affectedMap = new Map();
+        for (const c of clicked) {
+            for (let dy = -1; dy <= 1; dy++) {
+                for (let dx = -1; dx <= 1; dx++) {
+                    const x = c.x + dx;
+                    const y = c.y + dy;
+                    if (x < 0 || y < 0 || x >= w || y >= h)
+                        continue;
+                    const k = `${x},${y}`;
+                    if (affectedMap.has(k))
+                        continue;
+                    const tt = layer.getTileAt(x, y, true);
+                    const prev = tt && tt.index >= 0 ? tt.index : -1;
+                    affectedMap.set(k, { x, y, prevIndex: prev });
+                }
+            }
+        }
+        const fillKind = getAutotileKind(ctx.asset);
+        for (const c of clicked) {
+            applyAutotile(layer, c.x, c.y, ctx.terrain, 'paint', fillKind);
+        }
+        // D.2.5.2 fix — capture cascade-resolved tile indices for save.
+        const resolvedCells = Array.from(affectedMap.values()).map((c) => {
+            const tt = layer.getTileAt(c.x, c.y, true);
+            const idx = tt && tt.index >= 0 ? tt.index : null;
+            return { x: c.x, y: c.y, index: idx };
+        });
+        const op = {
+            kind: 'autotilePaint',
+            layerId: tool.activeLayerId,
+            terrainId: tool.activeTerrainId,
+            cells: clicked,
+            erase: false,
+            resolvedCells,
+        };
+        const previousCells = Array.from(affectedMap.values()).map((c) => ({
+            x: c.x,
+            y: c.y,
+            index: c.prevIndex < 0 ? null : c.prevIndex,
+        }));
+        const message = {
+            type: 'umicat:editor:tilemapEdited',
+            entityId: tool.tilemapEditingId,
+            op,
+            previousCells,
+        };
+        if (typeof window !== 'undefined' && window.parent) {
+            window.parent.postMessage(message, '*');
+        }
+    }
+    /**
+     * Look up the active TilemapLayer in the world scene's entity registry,
+     * then walk the container's children for the layer with matching
+     * `tilemapLayerId` data tag.
+     */
+    findActiveTilemapLayer(tilemapId, layerId) {
+        const resolved = this.findActiveTilemapLayerWithContainer(tilemapId, layerId);
+        return resolved?.layer ?? null;
+    }
+    /**
+     * Same as findActiveTilemapLayer but returns the container too. Callers
+     * that need to convert world coords to tile coords need the container's
+     * position to shift the input — `TilemapLayer.worldToTileXY` doesn't
+     * apply the container transform on its own (the layer's `x`/`y` are
+     * local to the container, not world coords).
+     */
+    findActiveTilemapLayerWithContainer(tilemapId, layerId) {
+        const registry = this.findEntityRegistry();
+        if (!registry)
+            return null;
+        const container = registry.byId(tilemapId);
+        if (!container || !(container instanceof Phaser.GameObjects.Container)) {
+            return null;
+        }
+        const layer = findTilemapLayerById(container, layerId);
+        if (!layer)
+            return null;
+        return { layer, container };
+    }
+    /**
+     * Apply one stroke cell: read prev index (for undo), apply the new
+     * value via Phaser's tilemap API, push the cell into the stroke
+     * accumulator. Dedup happens in `appendTilemapStrokeCell` so dragging
+     * over the same cell multiple times only records once.
+     */
+    applyStrokeCell(layer, x, y, tool) {
+        const prev = layer.getTileAt(x, y, true);
+        const prevIndex = prev ? prev.index : -1;
+        // -1 is Phaser's "no tile" sentinel; for our op shape we use null to
+        // mean "cell was empty" so the host's undo logic doesn't have to
+        // remember the magic number.
+        const prevIndexOrNull = prevIndex < 0 ? null : prevIndex;
+        let appliedOp;
+        if (tool.tool === 'eraser') {
+            appliedOp = { kind: 'erase', layerId: tool.activeLayerId, cells: [{ x, y }] };
+            appendTilemapStrokeCell(this.game, { x, y, index: null, prevIndex: prevIndexOrNull });
+        }
+        else {
+            const idx = tool.activeTile;
+            appliedOp = { kind: 'paint', layerId: tool.activeLayerId, cells: [{ x, y, index: idx }] };
+            appendTilemapStrokeCell(this.game, { x, y, index: idx, prevIndex: prevIndexOrNull });
+        }
+        applyTilemapOp(layer, appliedOp);
+    }
+    /**
+     * Slice 6 Phase D — resolve `{ asset, terrain }` for the layer's
+     * tileset + a requested terrain id. Returns null when:
+     *  - the layer has no `tilemapTilesetId` stamp (legacy / unattached layer)
+     *  - the manifest has no asset for that id
+     *  - the asset's tileset metadata lacks `autotile.terrains` with that id
+     * Callers fall back to stamp-mode behavior on null.
+     */
+    resolveAutotileTerrainContext(layer, terrainId) {
+        const tilesetId = layer.getData('tilemapTilesetId');
+        if (!tilesetId) {
+            console.warn(`[umicat/editor] resolveAutotileTerrainContext: layer is missing 'tilemapTilesetId' data stamp. ` +
+                `Layer was created without a tileset binding — likely cause: addLayer op fired before the asset was loaded into the iframe cache, or the layer's tilesetIds[] was empty at spawn.`);
+            return null;
+        }
+        const manifest = getManifest(layer.scene);
+        const asset = manifest?.assets.find((a) => a.id === tilesetId);
+        if (!asset) {
+            console.warn(`[umicat/editor] resolveAutotileTerrainContext: asset '${tilesetId}' (referenced by the active tilemap layer) is not in the iframe's manifest cache. ` +
+                `Likely cause: the asset was added to the workspace manifest on disk but the host didn't push an 'umicat:editor:assetUpdate' message to sync the iframe cache.`);
+            return null;
+        }
+        const terrain = findTerrain(asset, terrainId);
+        if (!terrain) {
+            const available = (asset.tileset?.autotile?.terrains ?? []).map((t) => t.id);
+            console.warn(`[umicat/editor] resolveAutotileTerrainContext: asset '${tilesetId}' has no terrain with id '${terrainId}'. ` +
+                `Available terrain ids: [${available.join(', ') || '(none — autotile not configured on this asset)'}]. ` +
+                `Likely cause: TilemapInspectorPanel's terrain palette is reading a fresher AssetSummary than the iframe's manifest cache; an 'umicat:editor:assetUpdate' should have synced after the AutotileEditorModal save.`);
+            return null;
+        }
+        return { asset, terrain };
+    }
+    /**
+     * Slice 6 Phase D — autotile-mode stroke cell. Runs the Wang cascade
+     * via `applyAutotile`, threads every affected cell (clicked + cascade
+     * neighbors) into the stroke accumulator so the pointerup commit can
+     * emit one `autotilePaint` op + a previousCells array that captures
+     * the entire region the click changed.
+     *
+     * Per-frame metadata + sub-tile body sync is handled by the host-
+     * driven `handleEditTilemap` path when undo replays inverse ops; the
+     * live stroke only touches `layer.data` (cell indices) — fine because
+     * cell-rect collision is re-armed at the next handleEditTilemap call.
+     */
+    applyAutotileStrokeCell(layer, x, y, ctx) {
+        const stroke = getTilemapStroke(this.game);
+        if (!stroke || !stroke.autotile)
+            return;
+        const mode = stroke.autotile.erase ? 'erase' : 'paint';
+        const kind = getAutotileKind(ctx.asset);
+        const affected = applyAutotile(layer, x, y, ctx.terrain, mode, kind);
+        appendAutotileStrokeClick(this.game, x, y, affected);
+    }
+    /**
+     * Sync every tilemap entity's TilemapLayers to its container's
+     * current world position. Runs every frame in edit mode (see update()).
+     * Matches the play-mode hook in SceneLoader#installTilemapLayerSync —
+     * same logic, different trigger source (overlay vs world scene event).
+     * Cheap: handful of number assignments per tilemap.
+     */
+    syncTilemapLayersFromContainers() {
+        const registry = this.findEntityRegistry();
+        if (!registry)
+            return;
+        for (const go of registry.all()) {
+            if (go.getData('entityKind') !== 'tilemap')
+                continue;
+            const container = go;
+            const layers = go.getData('tilemapLayers');
+            if (!layers)
+                continue;
+            const containerDepth = container.depth ?? 0;
+            for (const layer of layers) {
+                const offX = layer.getData('tilemapLocalOffsetX') ?? 0;
+                const offY = layer.getData('tilemapLocalOffsetY') ?? 0;
+                const targetX = container.x + offX;
+                const targetY = container.y + offY;
+                if (layer.x !== targetX)
+                    layer.x = targetX;
+                if (layer.y !== targetY)
+                    layer.y = targetY;
+                // FB.10 — sync depth too; matches the play-mode SceneLoader hook.
+                if (layer.depth !== containerDepth)
+                    layer.setDepth(containerDepth);
+            }
+        }
+    }
+    // --- Slice 6 Phase B.6.1 — resize-handle drag ----------------------------
+    /**
+     * Read the selected tilemap entity's bounds + return the 8 handle
+     * positions in world coords. Returns null when the selected entity
+     * is not a tilemap (no handles to draw / hit-test).
+     */
+    tilemapHandlePositions() {
+        const selectedId = getSelection(this.game);
+        if (!selectedId)
+            return null;
+        const registry = this.findEntityRegistry();
+        if (!registry)
+            return null;
+        const go = registry.byId(selectedId);
+        if (!go || go.getData('entityKind') !== 'tilemap')
+            return null;
+        const container = go;
+        const tileSize = go.getData('tilemapTileSize');
+        const size = go.getData('tilemapSize');
+        if (!tileSize || !size)
+            return null;
+        const pxW = size.width * tileSize.width;
+        const pxH = size.height * tileSize.height;
+        const cx = container.x;
+        const cy = container.y;
+        const left = cx - pxW / 2;
+        const right = cx + pxW / 2;
+        const top = cy - pxH / 2;
+        const bottom = cy + pxH / 2;
+        return {
+            entityId: selectedId,
+            center: { x: cx, y: cy },
+            pxW,
+            pxH,
+            cellsW: size.width,
+            cellsH: size.height,
+            tileSize,
+            handles: [
+                { id: 'nw', x: left, y: top },
+                { id: 'n', x: cx, y: top },
+                { id: 'ne', x: right, y: top },
+                { id: 'e', x: right, y: cy },
+                { id: 'se', x: right, y: bottom },
+                { id: 's', x: cx, y: bottom },
+                { id: 'sw', x: left, y: bottom },
+                { id: 'w', x: left, y: cy },
+            ],
+        };
+    }
+    /**
+     * Hit-test the resize handles. Corners (NW/NE/SW/SE) use a dedicated
+     * ~14px square click target. Edges (N/S/E/W) are grabbable along the
+     * ENTIRE edge line (Figma / Sketch convention) — clicking anywhere on
+     * the blue bounds line resizes that edge. Corner zones take priority
+     * over edges so dragging right at a corner gives diagonal resize, not
+     * single-axis.
+     *
+     * All click targets are zoom-invariant via `1/zoom` scaling so they
+     * stay constant size on screen regardless of how zoomed in/out.
+     */
+    hitTestTilemapResizeHandle(worldX, worldY) {
+        const info = this.tilemapHandlePositions();
+        if (!info)
+            return null;
+        const cam = this.findActiveEditorCamera();
+        const zoom = cam?.zoom ?? 1;
+        const halfHandleWorld = 7 / zoom; // 14px square = 7px half-side
+        const edgeTolerance = 6 / zoom; // 12px-thick zone perpendicular to edge
+        // 1. Corner handles take priority — small dedicated squares.
+        for (const id of ['nw', 'ne', 'sw', 'se']) {
+            const h = info.handles.find((h) => h.id === id);
+            if (!h)
+                continue;
+            if (Math.abs(worldX - h.x) <= halfHandleWorld &&
+                Math.abs(worldY - h.y) <= halfHandleWorld) {
+                return id;
+            }
+        }
+        // 2. Edge zones — entire edge line is the click target, EXCLUDING
+        // the corner zones (so corners always win when overlap).
+        const left = info.center.x - info.pxW / 2;
+        const right = info.center.x + info.pxW / 2;
+        const top = info.center.y - info.pxH / 2;
+        const bottom = info.center.y + info.pxH / 2;
+        const xWithinHorizontalEdge = worldX >= left + halfHandleWorld && worldX <= right - halfHandleWorld;
+        const yWithinVerticalEdge = worldY >= top + halfHandleWorld && worldY <= bottom - halfHandleWorld;
+        if (Math.abs(worldY - top) <= edgeTolerance && xWithinHorizontalEdge)
+            return 'n';
+        if (Math.abs(worldY - bottom) <= edgeTolerance && xWithinHorizontalEdge)
+            return 's';
+        if (Math.abs(worldX - left) <= edgeTolerance && yWithinVerticalEdge)
+            return 'w';
+        if (Math.abs(worldX - right) <= edgeTolerance && yWithinVerticalEdge)
+            return 'e';
+        return null;
+    }
+    /**
+     * Set canvas cursor to a resize-arrow when hovering a handle, or restore
+     * default. Direction matches the handle's axis (Figma / Sketch / browser
+     * native convention):
+     *   NW/SE corners → `nwse-resize` (↖↘)
+     *   NE/SW corners → `nesw-resize` (↗↙)
+     *   N/S edges → `ns-resize` (↕)
+     *   E/W edges → `ew-resize` (↔)
+     *
+     * Active drag (getTilemapResize non-null) pins the cursor to the dragged
+     * handle so it doesn't flicker back to default when the cursor briefly
+     * leaves the handle's 14px target box during fast drag.
+     */
+    updateResizeCursor(pointer) {
+        const canvas = this.game.canvas;
+        if (!canvas)
+            return;
+        let handle = null;
+        const inDrag = getTilemapResize(this.game);
+        if (inDrag) {
+            handle = inDrag.handle;
+        }
+        else if (isTilemapPaintMode(this.game)) {
+            const { x, y } = this.pointerCoords(pointer);
+            handle = this.hitTestTilemapResizeHandle(x, y);
+        }
+        if (!handle) {
+            // Only reset when WE set it earlier; don't clobber pan-grab or other
+            // cursor states future features might add.
+            if (canvas.style.cursor.endsWith('resize'))
+                canvas.style.cursor = '';
+            return;
+        }
+        canvas.style.cursor = RESIZE_CURSOR_FOR_HANDLE[handle];
+    }
+    /**
+     * Begin a resize-handle drag. Snapshots the starting size + center so
+     * pointermove can compute deltas relative to drag-start.
+     */
+    beginTilemapResizeDrag(handle) {
+        const info = this.tilemapHandlePositions();
+        if (!info)
+            return;
+        beginTilemapResize(this.game, {
+            entityId: info.entityId,
+            handle,
+            startSize: { width: info.cellsW, height: info.cellsH },
+            startCenter: { x: info.center.x, y: info.center.y },
+            tileSize: info.tileSize,
+            previewWidth: info.cellsW,
+            previewHeight: info.cellsH,
+            previewCenter: { x: info.center.x, y: info.center.y },
+        });
+    }
+    /**
+     * Update preview dims based on cursor position. Snaps to integer cells.
+     * The handle dictates which edges move — opposite edges stay fixed.
+     *
+     * Algorithm: from the cursor position + handle, compute the new L/R/T/B
+     * edges; opposite edges are pinned to start values. New size = R-L, B-T
+     * in pixels → divide by tileSize for cell counts. New center = midpoint
+     * of new L/R/T/B.
+     */
+    updateTilemapResizeDrag(worldX, worldY) {
+        const resize = getTilemapResize(this.game);
+        if (!resize)
+            return;
+        const { handle, startSize, startCenter, tileSize } = resize;
+        const startPxW = startSize.width * tileSize.width;
+        const startPxH = startSize.height * tileSize.height;
+        const startLeft = startCenter.x - startPxW / 2;
+        const startRight = startCenter.x + startPxW / 2;
+        const startTop = startCenter.y - startPxH / 2;
+        const startBottom = startCenter.y + startPxH / 2;
+        let newLeft = startLeft;
+        let newRight = startRight;
+        let newTop = startTop;
+        let newBottom = startBottom;
+        // Which edges does this handle move?
+        const movesLeft = handle === 'nw' || handle === 'w' || handle === 'sw';
+        const movesRight = handle === 'ne' || handle === 'e' || handle === 'se';
+        const movesTop = handle === 'nw' || handle === 'n' || handle === 'ne';
+        const movesBottom = handle === 'sw' || handle === 's' || handle === 'se';
+        if (movesLeft)
+            newLeft = worldX;
+        if (movesRight)
+            newRight = worldX;
+        if (movesTop)
+            newTop = worldY;
+        if (movesBottom)
+            newBottom = worldY;
+        // Snap to whole cells. Round each moving edge to nearest cell boundary
+        // measured from the anchor (opposite) edge.
+        if (movesLeft) {
+            const cellsFromRight = Math.max(1, Math.round((newRight - newLeft) / tileSize.width));
+            newLeft = newRight - cellsFromRight * tileSize.width;
+        }
+        if (movesRight) {
+            const cellsFromLeft = Math.max(1, Math.round((newRight - newLeft) / tileSize.width));
+            newRight = newLeft + cellsFromLeft * tileSize.width;
+        }
+        if (movesTop) {
+            const cellsFromBottom = Math.max(1, Math.round((newBottom - newTop) / tileSize.height));
+            newTop = newBottom - cellsFromBottom * tileSize.height;
+        }
+        if (movesBottom) {
+            const cellsFromTop = Math.max(1, Math.round((newBottom - newTop) / tileSize.height));
+            newBottom = newTop + cellsFromTop * tileSize.height;
+        }
+        const previewWidth = Math.round((newRight - newLeft) / tileSize.width);
+        const previewHeight = Math.round((newBottom - newTop) / tileSize.height);
+        if (previewWidth < 1 || previewHeight < 1)
+            return;
+        const previewCenter = {
+            x: (newLeft + newRight) / 2,
+            y: (newTop + newBottom) / 2,
+        };
+        updateTilemapResize(this.game, {
+            previewWidth,
+            previewHeight,
+            previewCenter,
+        });
+    }
+    /**
+     * Commit the resize drag — post a `resize` op via `editTilemap` channel,
+     * carrying the new dims + transformDelta to keep the opposite edge
+     * anchored. Posted directly to host (skipping the local SDK apply path)
+     * because the host's draft + iframe runtime BOTH need the op — host
+     * records the command for undo + applies the same op back via the
+     * normal editTilemap dispatch (which mutates the live runtime).
+     */
+    commitTilemapResize() {
+        const resize = endTilemapResize(this.game);
+        if (!resize)
+            return;
+        const { entityId, startSize, startCenter, previewWidth, previewHeight, previewCenter } = resize;
+        if (previewWidth === startSize.width && previewHeight === startSize.height)
+            return;
+        const transformDelta = {
+            x: previewCenter.x - startCenter.x,
+            y: previewCenter.y - startCenter.y,
+        };
+        const op = {
+            kind: 'resize',
+            width: previewWidth,
+            height: previewHeight,
+            ...(transformDelta.x !== 0 || transformDelta.y !== 0 ? { transformDelta } : {}),
+        };
+        // Apply LOCALLY first — destroys + rebuilds the live TilemapLayers
+        // at the new dims, shifts container.x/y by transformDelta to keep
+        // the opposite edge anchored. Without this local apply, the SDK
+        // runtime would stay at the old size (bounds rect reads stale
+        // `tilemapSize` stash) → user sees the bounds "snap back" after
+        // release, even though the host's draft + persisted scene file
+        // ARE at the new size.
+        // Same pattern as brush/rect/fill: apply local, post for undo.
+        handleEditTilemap(this.game, entityId, [op]);
+        const message = {
+            type: 'umicat:editor:tilemapEdited',
+            entityId,
+            op,
+            previousCells: [],
+        };
+        if (typeof window !== 'undefined' && window.parent) {
+            window.parent.postMessage(message, '*');
+        }
+    }
+    update() {
+        this.graphics.clear();
+        // Slice 6 Phase B (fix): sync tilemap layer world positions to their
+        // entity transform. Runs from overlay scene (always active in edit
+        // mode) — the equivalent hook on world scene's UPDATE event doesn't
+        // fire because the world scene is paused in edit mode (see
+        // SceneLoader#installTilemapLayerSync's comment). Without this sync,
+        // dragging a tilemap entity moves the bounds but not the painted
+        // layers (or the resize-rebuilt layers don't track post-resize
+        // container.x/y changes).
+        this.syncTilemapLayersFromContainers();
+        if (this.worldBounds) {
+            // World bounds outline (the visible game frame). Outside-fill grey
+            // strips moved to a separate Graphics in the WORLD scene at very
+            // low depth (see `installVoidFill` in EditorBridge) — drawing
+            // them HERE in overlay scene meant they rendered ABOVE entities,
+            // so an entity dropped outside world bounds was visually covered
+            // by grey (only the selection rect was visible). Putting the
+            // fill below entities lets users see their out-of-bounds drops.
+            this.graphics.lineStyle(2, WORLD_BOUNDS_COLOR, WORLD_BOUNDS_ALPHA);
+            this.graphics.strokeRect(this.worldBounds.x, this.worldBounds.y, this.worldBounds.width, this.worldBounds.height);
+        }
+        // P1 infinite canvas — camera viewport rect ("Camera screen"): shows
+        // where the GAME'S runtime camera (cameras.main, untouched during edit
+        // mode) is currently positioned + how much it sees. Lets the user
+        // place entities inside vs outside the camera's view at game start.
+        // For games where world == camera viewport (Space Invaders, Tetris)
+        // this rect coincides with the world bounds rect. For Mario / RPG /
+        // farming etc. where world > camera, this is a small blue rect inside
+        // the larger world rect.
+        const worldSceneCam = this.findWorldSceneCamera();
+        if (worldSceneCam) {
+            const camX = worldSceneCam.scrollX;
+            const camY = worldSceneCam.scrollY;
+            // Use the GAME'S INTRINSIC size (snapshot from enterEdit), not the
+            // current canvas dims. During edit the canvas is expanded to fill
+            // the iframe, and game.scale.width is the expanded value — which
+            // would draw the "Camera screen" rect at expanded canvas size,
+            // not at the game's runtime camera viewport size. The runtime cam
+            // ALWAYS renders the game's declared resolution (e.g. 720×1280),
+            // regardless of what the editor does to the canvas.
+            const snap = this.game['__unboxyEditorScaleSnapshot'];
+            const intrinsicW = snap?.gameWidth ?? this.game.scale.width;
+            const intrinsicH = snap?.gameHeight ?? this.game.scale.height;
+            const camW = intrinsicW / worldSceneCam.zoom;
+            const camH = intrinsicH / worldSceneCam.zoom;
+            this.graphics.lineStyle(CAMERA_VIEWPORT_LINE_WIDTH, CAMERA_VIEWPORT_COLOR, CAMERA_VIEWPORT_ALPHA);
+            this.graphics.strokeRect(camX, camY, camW, camH);
+        }
+        const selectedId = getSelection(this.game);
+        if (selectedId) {
+            const registry = this.findEntityRegistry();
+            const go = registry?.byId(selectedId);
+            if (go) {
+                const bounds = computeBounds(go);
+                if (bounds) {
+                    // HUD-mode selection-rect transform fix (2026-05-17): HUD
+                    // widgets render through the HUD cam, which has its viewport
+                    // POSITIONED at the camera-viewport rect on the editor canvas
+                    // (offset by `(gameCam.scrollX - editorCam.scrollX) *
+                    // editorCam.zoom`). But this overlay scene's selection rect
+                    // draws through the editor cam directly. The mismatch leaves
+                    // a `gameCam.scrollX * editorCam.zoom` drift that scales
+                    // with zoom — visible as the selection rect getting more
+                    // and more off the widget as the user zooms in. Math:
+                    //   bg canvas pos = camRectCanvasX + (bounds.x) * zoom
+                    //                 = (gameCam.scrollX - editorCam.scrollX) * zoom
+                    //                   + bounds.x * zoom
+                    //   selRect canvas pos = (bounds.x - editorCam.scrollX) * zoom
+                    //   diff = gameCam.scrollX * zoom
+                    // Fix: add gameCam.scrollX/Y to the rect's world coords so
+                    // the overlay-cam transform produces the same canvas pos as
+                    // the HUD-cam transform. World-mode entities are unaffected
+                    // because they render through the editor cam directly, no
+                    // camRectCanvasX offset.
+                    let drawX = bounds.x;
+                    let drawY = bounds.y;
+                    if (getEditorMode(this.game) === 'hud') {
+                        const ws = this.findWorldSceneInstance();
+                        const gameCam = ws?.cameras.main;
+                        if (gameCam) {
+                            drawX += gameCam.scrollX;
+                            drawY += gameCam.scrollY;
+                        }
+                    }
+                    this.graphics.lineStyle(SELECTION_LINE_WIDTH, SELECTION_COLOR, SELECTION_ALPHA);
+                    this.graphics.strokeRect(drawX, drawY, bounds.width, bounds.height);
+                }
+            }
+        }
+        // Slice 8: "Show hitboxes" debug overlay. Only renders in world mode;
+        // HUD widgets don't carry world hitboxes.
+        if (getEditorMode(this.game) !== 'hud' && getDebugOverlayState(this.game).showHitboxes) {
+            this.drawHitboxDebug();
+        }
+        // Slice 6 Phase B.4: rect-drag preview. Drawn over the live tilemap so
+        // the user sees the rect being composed before committing on pointerup.
+        // Layers are now world-positioned (see createTilemap), so
+        // `tileToWorldXY` returns world coords directly — no shift needed.
+        const rect = getTilemapRect(this.game);
+        if (rect) {
+            const layer = this.findActiveTilemapLayer(rect.entityId, rect.layerId);
+            if (layer) {
+                const x0 = Math.min(rect.startX, rect.endX);
+                const y0 = Math.min(rect.startY, rect.endY);
+                const x1 = Math.max(rect.startX, rect.endX);
+                const y1 = Math.max(rect.startY, rect.endY);
+                const tl = layer.tileToWorldXY(x0, y0);
+                const br = layer.tileToWorldXY(x1 + 1, y1 + 1);
+                const w = br.x - tl.x;
+                const h = br.y - tl.y;
+                this.graphics.fillStyle(0xffaa00, 0.18);
+                this.graphics.fillRect(tl.x, tl.y, w, h);
+                this.graphics.lineStyle(2, 0xffaa00, 0.85);
+                this.graphics.strokeRect(tl.x, tl.y, w, h);
+            }
+        }
+        // Slice 6 Phase B.6.1: tilemap resize handles + drag preview.
+        // Handles render whenever paint mode is active on a tilemap entity
+        // (the same condition that makes the tile palette appear in the
+        // host Inspector). Ghost rect preview shows the new bounds during
+        // an active resize drag.
+        this.drawTilemapResizeOverlay();
+    }
+    /**
+     * Render the 8 resize handles (when paint mode is active) and the
+     * orange ghost-rect preview (when a resize drag is in progress).
+     * Handles are zoom-invariant ~12px squares; preview rect snaps to
+     * cell boundaries via the resize-drag's running preview state.
+     */
+    drawTilemapResizeOverlay() {
+        if (!isTilemapPaintMode(this.game))
+            return;
+        const info = this.tilemapHandlePositions();
+        if (!info)
+            return;
+        const cam = this.findActiveEditorCamera();
+        const zoom = cam?.zoom ?? 1;
+        const handleSize = 14 / zoom; // 14px on screen regardless of zoom
+        const half = handleSize / 2;
+        // Tilemap bounds outline (cyan, dashed-ish via solid moderate alpha).
+        // Helps the user see what they're about to resize.
+        this.graphics.lineStyle(1, 0x4488ee, 0.5);
+        this.graphics.strokeRect(info.center.x - info.pxW / 2, info.center.y - info.pxH / 2, info.pxW, info.pxH);
+        // 8 handles — small blue squares with white outline for contrast
+        // against any underlying tile colors.
+        for (const h of info.handles) {
+            this.graphics.fillStyle(0xffffff, 1);
+            this.graphics.fillRect(h.x - half, h.y - half, handleSize, handleSize);
+            this.graphics.fillStyle(0x4488ee, 1);
+            this.graphics.fillRect(h.x - half + 1.5 / zoom, h.y - half + 1.5 / zoom, handleSize - 3 / zoom, handleSize - 3 / zoom);
+        }
+        // Active resize drag — orange ghost rect at preview bounds.
+        const resize = getTilemapResize(this.game);
+        if (resize) {
+            const pxW = resize.previewWidth * resize.tileSize.width;
+            const pxH = resize.previewHeight * resize.tileSize.height;
+            const left = resize.previewCenter.x - pxW / 2;
+            const top = resize.previewCenter.y - pxH / 2;
+            this.graphics.fillStyle(0xffaa00, 0.12);
+            this.graphics.fillRect(left, top, pxW, pxH);
+            this.graphics.lineStyle(2, 0xffaa00, 0.85);
+            this.graphics.strokeRect(left, top, pxW, pxH);
+        }
+    }
+    /**
+     * Walks the world entity registry and draws each sprite's `hitbox` rect +
+     * `depthAnchor` crosshair (when present on the entity's Asset). Sprites
+     * without metadata get nothing drawn — chat-only Workflow A respect.
+     *
+     * Per-frame mode: reads the sprite's CURRENT frame index and looks up the
+     * override (falls back to default) so the rendered rect tracks what the
+     * SDK is actually applying to the body at runtime.
+     */
+    drawHitboxDebug() {
+        const registry = this.findEntityRegistry();
+        if (!registry)
+            return;
+        const worldScene = this.findWorldSceneInstance();
+        const manifest = worldScene ? getManifest(worldScene) : undefined;
+        if (!manifest)
+            return;
+        const assetsById = new Map();
+        for (const asset of manifest.assets ?? []) {
+            assetsById.set(asset.id, asset);
+        }
+        for (const go of registry.all()) {
+            // (1) Tilemap collision — painted-cell rects + per-tile collisionRects.
+            // Walks every painted tile on every layer of every tilemap entity;
+            // draws the cell-rect for tiles with `solid: true` AND each sub-tile
+            // rect for tiles with `collisionRects`. This is the visualization of
+            // what `setCollisionByProperty({ solid: true })` + `syncSubTileBodies`
+            // armed at scene-load. Without this pass the debug overlay only shows
+            // sprite hitboxes — tile collision is invisible even when configured,
+            // so "Show hitboxes" looked broken for tilemap-only games.
+            if (go.getData('entityKind') === 'tilemap') {
+                const container = go;
+                const layers = container.getData('tilemapLayers') ?? [];
+                for (const layer of layers) {
+                    const tilesetId = layer.getData('tilemapTilesetId');
+                    if (!tilesetId)
+                        continue;
+                    const asset = assetsById.get(tilesetId);
+                    const tileMeta = asset?.tileset?.tiles ?? {};
+                    // Layer position in world coords (layers live in scene root with
+                    // their own x/y per `installTilemapLayerSync`).
+                    const layerX = layer.x ?? 0;
+                    const layerY = layer.y ?? 0;
+                    layer.forEachTile((tile) => {
+                        if (tile.index < 0)
+                            return; // unpainted cell
+                        const meta = tileMeta[tile.index];
+                        const cellX = layerX + tile.x * tile.width;
+                        const cellY = layerY + tile.y * tile.height;
+                        const subRects = meta?.collisionRects;
+                        if (subRects && subRects.length > 0) {
+                            // Sub-tile rects override cell-rect collision (per SDK 0.2.116).
+                            for (const r of subRects) {
+                                this.graphics.fillStyle(HITBOX_FILL_COLOR, HITBOX_FILL_ALPHA);
+                                this.graphics.fillRect(cellX + r.x, cellY + r.y, r.w, r.h);
+                                this.graphics.lineStyle(1, HITBOX_STROKE_COLOR, HITBOX_STROKE_ALPHA);
+                                this.graphics.strokeRect(cellX + r.x, cellY + r.y, r.w, r.h);
+                            }
+                        }
+                        else if (meta?.solid === true) {
+                            // Full-cell collision (no sub-rects authored).
+                            this.graphics.fillStyle(HITBOX_FILL_COLOR, HITBOX_FILL_ALPHA);
+                            this.graphics.fillRect(cellX, cellY, tile.width, tile.height);
+                            this.graphics.lineStyle(1, HITBOX_STROKE_COLOR, HITBOX_STROKE_ALPHA);
+                            this.graphics.strokeRect(cellX, cellY, tile.width, tile.height);
+                        }
+                    });
+                }
+                continue; // tilemap GO — nothing else to draw
+            }
+            // (2) Sprite hitbox + depth anchor (slice 8). Reads asset metadata
+            // and renders the rect in source-pixel coords mapped to the sprite's
+            // actual rendered position (compensating for origin shift).
+            const assetId = go.getData('entityAssetId');
+            if (!assetId)
+                continue; // primitives / code-rendered / group — skip
+            const asset = assetsById.get(assetId);
+            if (!asset)
+                continue;
+            const sprite = go;
+            const frameW = sprite.frame?.width ?? sprite.width ?? 0;
+            const frameH = sprite.frame?.height ?? sprite.height ?? 0;
+            if (frameW === 0 || frameH === 0)
+                continue;
+            const originX = sprite.originX ?? 0.5;
+            const originY = sprite.originY ?? 0.5;
+            const frameLeft = sprite.x - frameW * originX;
+            const frameTop = sprite.y - frameH * originY;
+            if (asset.hitbox) {
+                const shape = this.resolveCurrentHitboxShape(asset, sprite);
+                if (shape) {
+                    this.graphics.fillStyle(HITBOX_FILL_COLOR, HITBOX_FILL_ALPHA);
+                    this.graphics.fillRect(frameLeft + shape.x, frameTop + shape.y, shape.w, shape.h);
+                    this.graphics.lineStyle(1, HITBOX_STROKE_COLOR, HITBOX_STROKE_ALPHA);
+                    this.graphics.strokeRect(frameLeft + shape.x, frameTop + shape.y, shape.w, shape.h);
+                }
+            }
+            if (asset.depthAnchor) {
+                const ax = frameLeft + asset.depthAnchor.x;
+                const ay = frameTop + asset.depthAnchor.y;
+                this.graphics.lineStyle(1, ANCHOR_COLOR, ANCHOR_ALPHA);
+                this.graphics.lineBetween(ax - ANCHOR_CROSS_LEN, ay, ax + ANCHOR_CROSS_LEN, ay);
+                this.graphics.lineBetween(ax, ay - ANCHOR_CROSS_LEN, ax, ay + ANCHOR_CROSS_LEN);
+            }
+        }
+    }
+    /**
+     * For per-frame hitboxes, pick the shape the SDK would currently be
+     * applying — the override for the playing frame, falling back to default.
+     * For single-shape hitboxes, just return the rect.
+     */
+    resolveCurrentHitboxShape(asset, sprite) {
+        const h = asset.hitbox;
+        if (!h)
+            return undefined;
+        if (isPerFrameHitbox(h)) {
+            const idx = sprite.anims?.currentFrame?.index;
+            if (typeof idx === 'number' && h.frames[idx])
+                return h.frames[idx];
+            return h.default;
+        }
+        return h;
+    }
+    findWorldSceneInstance() {
+        for (const scene of this.game.scene.getScenes(false)) {
+            const key = scene.scene.key;
+            if (key === EDITOR_OVERLAY_KEY)
+                continue;
+            if (key === UMICAT_HUD_SCENE_KEY)
+                continue;
+            if (key === 'BootScene' || key === 'Boot')
+                continue;
+            // First non-overlay non-HUD non-Boot scene is the world scene.
+            return scene;
+        }
+        return undefined;
+    }
+    /**
+     * Find the world scene's main camera so the overlay can mirror it.
+     * In edit mode, the world scene is paused but its camera state is what
+     * the overlay's pointer math should use.
+     */
+    findWorldSceneCamera() {
+        for (const scene of this.game.scene.getScenes(false)) {
+            if (scene.scene.key === 'GameScene') {
+                return scene.cameras.main;
+            }
+        }
+        return null;
+    }
+    /**
+     * P1 infinite canvas — read the editor camera installed by
+     * `installEditorCameras` in EditorBridge. Returns null on the boot race
+     * when the overlay scene's `create` runs before the bridge attaches it
+     * (resolved by the next `applyEditorPanZoom` mirror).
+     */
+    findEditorCamera() {
+        return this.game['__unboxyEditorCam'] ?? null;
+    }
+    /**
+     * The camera the editor is currently viewing through. Prefers the
+     * editor cam; falls back to the game's cameras.main if the editor cam
+     * hasn't been installed yet (boot race). All pan/zoom math + selection
+     * rects should use this, NOT cameras.main directly.
+     */
+    findActiveEditorCamera() {
+        return this.findEditorCamera() ?? this.findWorldSceneCamera();
+    }
+    /**
+     * P1 infinite canvas — install native DOM listeners for wheel + space
+     * tracking. Phaser's pointer events don't surface `wheel`, and we want
+     * Space to be a global modifier (held while moving cursor), not tied to
+     * a specific GameObject. Listeners are torn down on scene shutdown.
+     *
+     * World mode only: HUD has identity camera + anchor-positioned widgets,
+     * panning/zooming it would rip widgets off their anchors.
+     */
+    installPanZoomInput() {
+        if (typeof document === 'undefined')
+            return;
+        const canvas = this.game.canvas;
+        if (!canvas)
+            return;
+        // Wheel handler — FIGMA-STYLE (matches Mac trackpad muscle memory):
+        //   - ctrlKey OR metaKey → zoom. ctrlKey covers Mac trackpad pinch
+        //                          (Chrome/Safari synthesize ctrlKey=true on
+        //                          pinch) AND Windows/Linux Ctrl+wheel.
+        //                          metaKey covers Mac Cmd+wheel (the actual
+        //                          Mac mouse convention — Figma uses this).
+        //   - Otherwise          → pan (Mac trackpad two-finger swipe sends
+        //                          deltaX + deltaY here; mouse wheel without
+        //                          modifier also pans vertically).
+        //
+        // Briefly switched to engine-style (plain wheel = zoom) in 0.2.84
+        // but reverted in 0.2.85 — Mac trackpad users lost two-finger pan
+        // and the gain wasn't worth it. 0.2.86 added metaKey to fix Mac
+        // mouse Cmd+wheel zoom.
+        this.wheelHandler = (e) => {
+            if (!getEditorState(this.game).active)
+                return;
+            // Allowed in both world AND hud edit modes (2026-05-17). Wheel
+            // mutates the editor cam; HUD widgets use a separate identity
+            // camera so they stay anchored regardless.
+            e.preventDefault(); // suppress browser page scroll
+            const editorCam = this.findActiveEditorCamera();
+            if (!editorCam)
+                return;
+            if (e.ctrlKey || e.metaKey) {
+                // ZOOM — cursor-anchored. World coord under the cursor stays put
+                // after zoom (standard map-app feel).
+                const rect = canvas.getBoundingClientRect();
+                const cssX = e.clientX - rect.left;
+                const cssY = e.clientY - rect.top;
+                const sx = this.game.scale.width / rect.width;
+                const sy = this.game.scale.height / rect.height;
+                const logicalX = cssX * sx;
+                const logicalY = cssY * sy;
+                const worldX = editorCam.scrollX + logicalX / editorCam.zoom;
+                const worldY = editorCam.scrollY + logicalY / editorCam.zoom;
+                // Scale the per-event zoom factor by deltaY magnitude. Mac
+                // trackpad pinch emits ~20-30 wheel events for even a brief
+                // gesture, so a fixed 5% per event compounded into "slight
+                // pinch → 50% to 200% in a blink". deltaY-proportional matches
+                // Figma/Photoshop: slow pinch = fine zoom, fast pinch = quick.
+                // Sensitivity (0.005) tuned so deltaY≈10 (typical Mac pinch
+                // event) ≈ 5% zoom step — same speed as before for moderate
+                // gestures, but much finer for slow ones. Clamp deltaY so a
+                // freak large event (e.g. fling) can't zoom 100x in one tick.
+                const ZOOM_SENSITIVITY = 0.005;
+                const clampedDelta = Math.max(-100, Math.min(100, e.deltaY));
+                const factor = Math.exp(-clampedDelta * ZOOM_SENSITIVITY);
+                // Clamp HERE so the cursor-anchor math uses the same zoom value
+                // applyPanZoom will actually commit. Otherwise at the cap, the
+                // zoom snaps back but the scroll was computed for the (smaller)
+                // unclamped zoom — world drifts on every wheel event while the
+                // zoom indicator stays pinned at 25%. ZOOM_MIN/MAX must mirror
+                // EditorBridge.clampZoom — kept local to avoid a cross-file
+                // import for two constants.
+                const ZOOM_MIN = 0.25;
+                const ZOOM_MAX = 4;
+                const newZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, editorCam.zoom * factor));
+                // No-op when at the cap — nothing to update, prevents accumulated
+                // floating-point drift from many same-zoom events. Approximate
+                // equality because `editorCam.zoom` can have sub-ulp drift from
+                // prior Phaser internal ops (setZoom → cam.dirty resets → etc.),
+                // and strict `===` would miss it.
+                if (Math.abs(newZoom - editorCam.zoom) < 1e-9)
+                    return;
+                const newScrollX = worldX - logicalX / newZoom;
+                const newScrollY = worldY - logicalY / newZoom;
+                this.applyPanZoom({ scrollX: newScrollX, scrollY: newScrollY, zoom: newZoom });
+            }
+            else {
+                // PAN — translate scroll delta by the current zoom so 1px of
+                // trackpad swipe ≈ 1px of canvas pan regardless of zoom.
+                // Dead zone: Mac trackpad pinch gestures emit a stray sub-pixel
+                // pan wheel event alongside each ctrlKey=true zoom event
+                // (gesture jitter, finger drift). Without filtering, those
+                // accumulate into visible scroll drift during pinch-at-cap —
+                // the residual horizontal drift the user saw after the
+                // zoom-branch cap fix. Real two-finger pan swipes emit deltas
+                // well over 1px per event, so a 1px floor doesn't impact them.
+                if (Math.abs(e.deltaX) < 1 && Math.abs(e.deltaY) < 1)
+                    return;
+                const rect = canvas.getBoundingClientRect();
+                const scaleSx = rect.width > 0 ? this.game.scale.width / rect.width : 1;
+                const scaleSy = rect.height > 0 ? this.game.scale.height / rect.height : 1;
+                const deltaX = (e.deltaX * scaleSx) / editorCam.zoom;
+                const deltaY = (e.deltaY * scaleSy) / editorCam.zoom;
+                this.applyPanZoom({
+                    scrollX: editorCam.scrollX + deltaX,
+                    scrollY: editorCam.scrollY + deltaY,
+                });
+            }
+        };
+        canvas.addEventListener('wheel', this.wheelHandler, { passive: false });
+        // Space-held tracking so left-drag becomes pan instead of selection.
+        const onKeyDown = (e) => {
+            if (e.code === 'Space' && !this.isTypingTarget(e.target)) {
+                this.spaceHeld = true;
+                // Prevent page scroll while space is held in canvas-focused state.
+                e.preventDefault();
+            }
+        };
+        const onKeyUp = (e) => {
+            if (e.code === 'Space')
+                this.spaceHeld = false;
+        };
+        document.addEventListener('keydown', onKeyDown, true);
+        document.addEventListener('keyup', onKeyUp, true);
+        this.events.once(Phaser.Scenes.Events.SHUTDOWN, () => {
+            if (this.wheelHandler)
+                canvas.removeEventListener('wheel', this.wheelHandler);
+            document.removeEventListener('keydown', onKeyDown, true);
+            document.removeEventListener('keyup', onKeyUp, true);
+            this.spaceHeld = false;
+            this.panActive = false;
+        });
+    }
+    /**
+     * Be polite to text input — don't intercept Space when the user is
+     * typing into a form control inside the iframe (shouldn't normally
+     * happen, but be defensive).
+     */
+    isTypingTarget(target) {
+        const el = target;
+        if (!el)
+            return false;
+        const tag = el.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT')
+            return true;
+        return el.isContentEditable === true;
+    }
+    /**
+     * Mode-aware registry lookup. World mode skips the HUD scene; HUD mode
+     * picks the HUD scene specifically.
+     */
+    findEntityRegistry() {
+        if (getEditorMode(this.game) === 'hud')
+            return findHudRegistry(this.game);
+        for (const scene of this.game.scene.getScenes(false)) {
+            const key = scene.scene.key;
+            if (key === UMICAT_HUD_SCENE_KEY)
+                continue;
+            const reg = getEntityRegistry(scene);
+            if (reg)
+                return reg;
+        }
+        return undefined;
+    }
+}
+function computeBounds(go) {
+    const positioned = go;
+    // Live tracker query (0.2.97) — code-rendered entities expose a
+    // getter that yields the latest draw extent. See
+    // EditorBridge.readLiveTrackedBounds for the rationale.
+    const getter = go.getData('__unboxyGraphicsBoundsGetter');
+    if (typeof getter === 'function') {
+        const live = getter();
+        if (live) {
+            return {
+                x: positioned.x + live.x,
+                y: positioned.y + live.y,
+                width: live.width,
+                height: live.height,
+            };
+        }
+    }
+    // Code-rendered entities stash hit dimensions on data because Phaser
+    // Graphics has no intrinsic bounds. Use those when present.
+    const hitW = go.getData('editorHitWidth');
+    const hitH = go.getData('editorHitHeight');
+    if (typeof hitW === 'number' && typeof hitH === 'number') {
+        // editorHitOffsetX/Y (0.2.96) for off-center procedural draws.
+        const offX = go.getData('editorHitOffsetX');
+        const offY = go.getData('editorHitOffsetY');
+        if (typeof offX === 'number' && typeof offY === 'number') {
+            return {
+                x: positioned.x + offX,
+                y: positioned.y + offY,
+                width: hitW,
+                height: hitH,
+            };
+        }
+        return {
+            x: positioned.x - hitW / 2,
+            y: positioned.y - hitH / 2,
+            width: hitW,
+            height: hitH,
+        };
+    }
+    const withBounds = go;
+    if (typeof withBounds.getBounds !== 'function')
+        return null;
+    const r = withBounds.getBounds();
+    if (r.width === 0 && r.height === 0)
+        return null;
+    return { x: r.x, y: r.y, width: r.width, height: r.height };
+}