@combos-fun/plugin-development-tool 0.0.47 → 0.0.49

package/dist/plugin-development-tool.esm.js

@@ -1,8 +1,5 @@
 import { __decorate } from 'tslib';
-import { Component, System, OBSERVER_TYPE, GameObject, decorators } from '@combos-fun/engine';
-import { RendererSystem } from '@combos-fun/plugin-renderer';
-import { Graphics } from '@combos-fun/plugin-renderer-graphics';
-import { Event, HIT_AREA_TYPE } from '@combos-fun/plugin-renderer-event';
+import { Component, System, OBSERVER_TYPE, decorators } from '@combos-fun/engine';
 import { IDE_PROPERTY_METADATA } from '@combos-fun/inspector-decorator';
 
 /** Parent → iframe (also `window` CustomEvent / `game.emit`): toggle pick mode. Payload: `{ enabled: boolean }`. */
@@ -22,10 +19,8 @@ const COMBOS_DEVELOPMENT_TOOL_APPLY_PROPERTY = 'combos-development-tool:apply-pr
 /** iframe → parent: game scene bootstrap finished; parent may enable pick mode. */
 const COMBOS_DEVELOPMENT_TOOL_READY = 'combos-development-tool:ready';
 /**
- * Parent → iframe: mute or unmute audio when `SoundSystem` is registered. Payload: `{ muted: boolean }`.
- *
- * Note: play / pause / resume are owned by the engine core lifecycle protocol
- * (`combos-game:set-playing` / `combos-game:state-changed`), not this tool.
+ * Parent → iframe: mute or unmute. Handled by `@combos-fun/plugin-sound`.
+ * Payload: `{ muted: boolean }`.
  */
 const COMBOS_DEVELOPMENT_TOOL_SET_MUTED = 'combos-development-tool:set-muted';
 /** iframe → parent (and `game.emit`): current mute snapshot after a successful change. */
@@ -45,8 +40,7 @@ const COMBOS_DEVELOPMENT_TOOL_MARKER_OVERLAY_SUCCESS = 'combos-development-tool:
 
 /**
  * Marks a `GameObject` as selectable in editor pick mode. While the development tool is enabled,
- * only nodes carrying this component receive a pick `Event`; all other game `Event` components
- * are removed and cached until disable.
+ * only nodes carrying this component are hit-tested on the canvas overlay.
  */
 class CombosDevelopmentToolTarget extends Component {
     constructor() {
@@ -59,6 +53,69 @@ class CombosDevelopmentToolTarget extends Component {
     }
 }
 
+function cssRgba(color, alpha = 1) {
+    const r = (color >> 16) & 0xff;
+    const g = (color >> 8) & 0xff;
+    const b = color & 0xff;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+/** Pixi-v8-style path builder backed by `CanvasRenderingContext2D`. */
+class CanvasMarkerGraphics {
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    clear() {
+        this.ctx.beginPath();
+    }
+    roundRect(x, y, width, height, radius = 0) {
+        const ctx = this.ctx;
+        if (typeof ctx.roundRect === 'function') {
+            ctx.roundRect(x, y, width, height, radius);
+            return;
+        }
+        const r = Math.max(0, Math.min(radius, Math.min(width, height) / 2));
+        ctx.moveTo(x + r, y);
+        ctx.lineTo(x + width - r, y);
+        ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+        ctx.lineTo(x + width, y + height - r);
+        ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+        ctx.lineTo(x + r, y + height);
+        ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+        ctx.lineTo(x, y + r);
+        ctx.quadraticCurveTo(x, y, x + r, y);
+        ctx.closePath();
+    }
+    rect(x, y, width, height) {
+        this.ctx.rect(x, y, width, height);
+    }
+    circle(x, y, radius) {
+        this.ctx.moveTo(x + radius, y);
+        this.ctx.arc(x, y, radius, 0, Math.PI * 2);
+    }
+    poly(points, close = true) {
+        if (points.length < 4)
+            return;
+        this.ctx.moveTo(points[0], points[1]);
+        for (let i = 2; i < points.length; i += 2) {
+            this.ctx.lineTo(points[i], points[i + 1]);
+        }
+        if (close) {
+            this.ctx.closePath();
+        }
+    }
+    fill(style) {
+        this.ctx.fillStyle = cssRgba(style.color, style.alpha ?? 1);
+        this.ctx.fill();
+        this.ctx.beginPath();
+    }
+    stroke(style) {
+        this.ctx.strokeStyle = cssRgba(style.color, style.alpha ?? 1);
+        this.ctx.lineWidth = style.width;
+        this.ctx.stroke();
+        this.ctx.beginPath();
+    }
+}
+
 /**
  * Registered marker kinds, in priority order: a GameObject is marked by the
  * first registered component it owns. For now this is **`Sound` only**; the
@@ -68,7 +125,7 @@ class CombosDevelopmentToolTarget extends Component {
 const MARKER_COMPONENTS = [
     { componentName: 'Sound', badgeColor: 0x8b5cf6, glyph: 'speaker' },
 ];
-/** Fixed badge size in the owner's local space. */
+/** Fixed badge size in overlay CSS pixels. */
 const MARKER_ICON_SIZE = 28;
 /**
  * First registered marker def whose component is present on `go`, else `null`.
@@ -112,7 +169,7 @@ function drawDotGlyph(g, s) {
     g.circle(s * 0.5, s * 0.5, s * 0.18);
     g.fill({ color: GLYPH_COLOR, alpha: 0.96 });
 }
-/** Render a full marker (badge + glyph) into `g`, sized to `size` (local units). */
+/** Render a full marker (badge + glyph) into `g`, sized to `size` (overlay CSS pixels). */
 function drawMarkerIcon(g, def, size = MARKER_ICON_SIZE) {
     drawBadge(g, def, size);
     switch (def.glyph) {
@@ -194,6 +251,85 @@ function mergeAllowedMessageOrigins(extra) {
     return result;
 }
 
+const OVERLAY_Z_INDEX = '2147483000';
+const OVERLAY_ATTR = 'data-combos-development-tool-overlay';
+function ensureParent(gameCanvas, overlay) {
+    const parent = gameCanvas.parentElement ?? document.body;
+    if (overlay.parentElement !== parent) {
+        parent.appendChild(overlay);
+    }
+}
+/**
+ * Transparent HTML canvas stacked on the game canvas.
+ * Pick mode sets `pointer-events: auto` so game Event / Event3D do not receive the tap.
+ */
+function createOverlayCanvas() {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    const canvas = document.createElement('canvas');
+    canvas.setAttribute(OVERLAY_ATTR, 'true');
+    canvas.style.position = 'fixed';
+    canvas.style.left = '0';
+    canvas.style.top = '0';
+    canvas.style.width = '0';
+    canvas.style.height = '0';
+    canvas.style.margin = '0';
+    canvas.style.padding = '0';
+    canvas.style.border = '0';
+    canvas.style.background = 'transparent';
+    canvas.style.pointerEvents = 'none';
+    canvas.style.touchAction = 'none';
+    canvas.style.userSelect = 'none';
+    canvas.style.zIndex = OVERLAY_Z_INDEX;
+    canvas.style.display = 'none';
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        return null;
+    }
+    let pickEnabled = false;
+    let visible = false;
+    const sync = (gameCanvas) => {
+        ensureParent(gameCanvas, canvas);
+        const rect = gameCanvas.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0) {
+            canvas.style.display = 'none';
+            return null;
+        }
+        canvas.style.display = visible ? 'block' : 'none';
+        canvas.style.left = `${rect.left}px`;
+        canvas.style.top = `${rect.top}px`;
+        canvas.style.width = `${rect.width}px`;
+        canvas.style.height = `${rect.height}px`;
+        const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+        const pixelW = Math.max(1, Math.round(rect.width * dpr));
+        const pixelH = Math.max(1, Math.round(rect.height * dpr));
+        if (canvas.width !== pixelW || canvas.height !== pixelH) {
+            canvas.width = pixelW;
+            canvas.height = pixelH;
+        }
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        return { width: rect.width, height: rect.height };
+    };
+    return {
+        canvas,
+        ctx,
+        sync,
+        setPickEnabled(on) {
+            pickEnabled = on;
+            canvas.style.pointerEvents = pickEnabled ? 'auto' : 'none';
+            canvas.style.cursor = pickEnabled ? 'crosshair' : 'default';
+        },
+        setVisible(on) {
+            visible = on;
+            canvas.style.display = on ? 'block' : 'none';
+        },
+        destroy() {
+            canvas.remove();
+        },
+    };
+}
+
 function isSceneSourceAnchor(v) {
     return (!!v &&
         typeof v === 'object' &&
@@ -587,29 +723,310 @@ function isClearSelectionMessage(data) {
     return data.type === COMBOS_DEVELOPMENT_TOOL_CLEAR_SELECTION;
 }
 
+/** Screen-space pad used when a target has no positive size / projected extent. */
+const DEFAULT_POINT_EXTENT = 32;
+function identityMat() {
+    return { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 };
+}
+function multiplyMat(p, l) {
+    return {
+        a: p.a * l.a + p.c * l.b,
+        b: p.b * l.a + p.d * l.b,
+        c: p.a * l.c + p.c * l.d,
+        d: p.b * l.c + p.d * l.d,
+        tx: p.a * l.tx + p.c * l.ty + p.tx,
+        ty: p.b * l.tx + p.d * l.ty + p.ty,
+    };
+}
+function applyMat(m, x, y) {
+    return {
+        x: m.a * x + m.c * y + m.tx,
+        y: m.b * x + m.d * y + m.ty,
+    };
+}
+/**
+ * Local matrix matching `plugin-renderer` ContainerManager:
+ * position (+ parent size * anchor), rotation, scale, pivot = size * origin.
+ */
+function localTransformMatrix(t) {
+    const x = t.position.x + (t.parent ? t.parent.size.width * t.anchor.x : 0);
+    const y = t.position.y + (t.parent ? t.parent.size.height * t.anchor.y : 0);
+    const pivotX = t.size.width * t.origin.x;
+    const pivotY = t.size.height * t.origin.y;
+    const cos = Math.cos(t.rotation);
+    const sin = Math.sin(t.rotation);
+    const a = cos * t.scale.x;
+    const b = sin * t.scale.x;
+    const c = -sin * t.scale.y;
+    const d = cos * t.scale.y;
+    return {
+        a,
+        b,
+        c,
+        d,
+        tx: x - (pivotX * a + pivotY * c),
+        ty: y - (pivotX * b + pivotY * d),
+    };
+}
+function worldTransformMatrix(t) {
+    const chain = [];
+    let cur = t;
+    while (cur) {
+        chain.push(cur);
+        cur = cur.parent;
+    }
+    chain.reverse();
+    let m = identityMat();
+    for (const node of chain) {
+        m = multiplyMat(m, localTransformMatrix(node));
+    }
+    return m;
+}
+function aabbFromPoints(points) {
+    if (points.length === 0)
+        return null;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const p of points) {
+        if (!Number.isFinite(p.x) || !Number.isFinite(p.y))
+            continue;
+        minX = Math.min(minX, p.x);
+        minY = Math.min(minY, p.y);
+        maxX = Math.max(maxX, p.x);
+        maxY = Math.max(maxY, p.y);
+    }
+    if (!Number.isFinite(minX) || !Number.isFinite(minY))
+        return null;
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function designToCss(point, design, css) {
+    if (!design || design.width <= 0 || design.height <= 0) {
+        return { x: point.x, y: point.y };
+    }
+    return {
+        x: point.x * (css.width / design.width),
+        y: point.y * (css.height / design.height),
+    };
+}
+function cssToDesign(point, design, css) {
+    if (!design || design.width <= 0 || design.height <= 0 || css.width <= 0 || css.height <= 0) {
+        return { x: point.x, y: point.y };
+    }
+    return {
+        x: point.x * (design.width / css.width),
+        y: point.y * (design.height / css.height),
+    };
+}
+function readPositiveNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : null;
+}
+function resolveDesignSize(game) {
+    const renderer = game?.getSystem?.('Renderer');
+    const screen = renderer?.application?.screen;
+    const sw = readPositiveNumber(screen?.width);
+    const sh = readPositiveNumber(screen?.height);
+    if (sw && sh) {
+        return { width: sw, height: sh };
+    }
+    const pw = readPositiveNumber(renderer?.params?.width);
+    const ph = readPositiveNumber(renderer?.params?.height);
+    if (pw && ph) {
+        return { width: pw, height: ph };
+    }
+    return null;
+}
+function resolveCamera(game) {
+    const renderer = game?.getSystem?.('Renderer3DSystem');
+    return renderer?.threeContext?.camera ?? null;
+}
+function resolveObject3D(game, id) {
+    const renderer = game?.getSystem?.('Renderer3DSystem');
+    return renderer?.threeContext?.nodes?.get?.(id) ?? null;
+}
+function asTransform3D(value) {
+    if (!value || typeof value !== 'object')
+        return null;
+    const t = value;
+    const hasWorld = [t.worldPositionX, t.worldPositionY, t.worldPositionZ].some(v => typeof v === 'number' && Number.isFinite(v));
+    const hasLocal = [t.positionX, t.positionY, t.positionZ].some(v => typeof v === 'number' && Number.isFinite(v));
+    return hasWorld || hasLocal ? t : null;
+}
+function multiplyMat4Vec4(m, x, y, z, w) {
+    return [
+        m[0] * x + m[4] * y + m[8] * z + m[12] * w,
+        m[1] * x + m[5] * y + m[9] * z + m[13] * w,
+        m[2] * x + m[6] * y + m[10] * z + m[14] * w,
+        m[3] * x + m[7] * y + m[11] * z + m[15] * w,
+    ];
+}
+function projectWorldPoint(x, y, z, camera, css) {
+    const view = camera.matrixWorldInverse?.elements;
+    const proj = camera.projectionMatrix?.elements;
+    if (!view || view.length < 16 || !proj || proj.length < 16) {
+        return null;
+    }
+    if (css.width <= 0 || css.height <= 0) {
+        return null;
+    }
+    const viewed = multiplyMat4Vec4(view, x, y, z, 1);
+    const clip = multiplyMat4Vec4(proj, viewed[0], viewed[1], viewed[2], viewed[3]);
+    if (!Number.isFinite(clip[3]) || Math.abs(clip[3]) < 1e-8) {
+        return null;
+    }
+    if (clip[3] < 0) {
+        return null;
+    }
+    const ndcX = clip[0] / clip[3];
+    const ndcY = clip[1] / clip[3];
+    const ndcZ = clip[2] / clip[3];
+    return {
+        x: (ndcX + 1) * 0.5 * css.width,
+        y: (1 - ndcY) * 0.5 * css.height,
+        depth: ndcZ,
+    };
+}
+function transformMat4Point(m, x, y, z) {
+    const w = m[3] * x + m[7] * y + m[11] * z + m[15];
+    const invW = Math.abs(w) < 1e-8 ? 1 : 1 / w;
+    return [
+        (m[0] * x + m[4] * y + m[8] * z + m[12]) * invW,
+        (m[1] * x + m[5] * y + m[9] * z + m[13]) * invW,
+        (m[2] * x + m[6] * y + m[10] * z + m[14]) * invW,
+    ];
+}
+function collectObject3DWorldCorners(node) {
+    const corners = [];
+    const visit = (obj) => {
+        const geo = obj.geometry;
+        if (!geo)
+            return;
+        geo.computeBoundingBox?.();
+        const box = geo.boundingBox;
+        const m = obj.matrixWorld?.elements;
+        if (!box || !m || m.length < 16)
+            return;
+        const { min, max } = box;
+        for (const x of [min.x, max.x]) {
+            for (const y of [min.y, max.y]) {
+                for (const z of [min.z, max.z]) {
+                    corners.push(transformMat4Point(m, x, y, z));
+                }
+            }
+        }
+    };
+    node.updateWorldMatrix?.(true, true);
+    if (typeof node.traverse === 'function') {
+        node.traverse(visit);
+    }
+    else {
+        visit(node);
+    }
+    return corners;
+}
+function padAround(point, extent) {
+    const size = Math.max(1, extent);
+    return {
+        x: point.x - size / 2,
+        y: point.y - size / 2,
+        width: size,
+        height: size,
+    };
+}
+function projectTransform2D(transform, css, design) {
+    const matrix = worldTransformMatrix(transform);
+    const width = transform.size.width;
+    const height = transform.size.height;
+    const localCorners = width > 0 && height > 0
+        ? [
+            { x: 0, y: 0 },
+            { x: width, y: 0 },
+            { x: width, y: height },
+            { x: 0, y: height },
+        ]
+        : [{ x: 0, y: 0 }];
+    const world = localCorners.map(p => applyMat(matrix, p.x, p.y));
+    const screen = world.map(p => designToCss(p, design, css));
+    const aabb = aabbFromPoints(screen);
+    if (aabb && aabb.width > 0 && aabb.height > 0) {
+        return aabb;
+    }
+    const origin = screen[0] ?? { x: 0, y: 0 };
+    return padAround(origin, 1);
+}
+function projectTransform3D(transform, camera, css, object3D) {
+    if (object3D) {
+        const corners = collectObject3DWorldCorners(object3D);
+        const projected = corners
+            .map(([x, y, z]) => projectWorldPoint(x, y, z, camera, css))
+            .filter((p) => p != null);
+        const aabb = aabbFromPoints(projected);
+        if (aabb && aabb.width > 0 && aabb.height > 0) {
+            return aabb;
+        }
+    }
+    const x = transform.worldPositionX ?? transform.positionX ?? 0;
+    const y = transform.worldPositionY ?? transform.positionY ?? 0;
+    const z = transform.worldPositionZ ?? transform.positionZ ?? 0;
+    const projected = projectWorldPoint(x, y, z, camera, css);
+    if (!projected)
+        return null;
+    const scale = Math.max(Math.abs(transform.scaleX ?? 1), Math.abs(transform.scaleY ?? 1), Math.abs(transform.scaleZ ?? 1), 1);
+    return padAround(projected, DEFAULT_POINT_EXTENT * scale);
+}
+function projectGameObjectToScreen(go, opts) {
+    if (opts.css.width <= 0 || opts.css.height <= 0) {
+        return null;
+    }
+    const t3d = asTransform3D(go.getComponent('Transform3D'));
+    if (t3d && opts.camera) {
+        return projectTransform3D(t3d, opts.camera, opts.css, opts.object3D);
+    }
+    return projectTransform2D(go.transform, opts.css, opts.design ?? null);
+}
+function rectContains(rect, x, y) {
+    return x >= rect.x && y >= rect.y && x <= rect.x + rect.width && y <= rect.y + rect.height;
+}
+/** Smallest containing rect wins; later items win ties (front-most in walk order). */
+function hitTestRects(x, y, items) {
+    let best = null;
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (!rectContains(item.rect, x, y))
+            continue;
+        const area = Math.max(item.rect.width, 0) * Math.max(item.rect.height, 0);
+        if (!best || area < best.area || (area === best.area && i > best.index)) {
+            best = { id: item.id, area, index: i };
+        }
+    }
+    return best ? best.id : null;
+}
+
 const OUTLINE_GO_NAME = '__combosDevelopmentToolOutline';
 const MARKER_GO_NAME_PREFIX = '__combosDevelopmentToolMarker:';
+const OUTLINE_COLOR = '#55ffaa';
 /**
  * **Off** at start. While enabled:
- * - soft-disables game `Event` hit targets (`container.interactive = false`, restored on disable);
- * - attaches pick `Event` + outline only on nodes with {@link CombosDevelopmentToolTarget}.
+ * - a transparent HTML canvas overlay captures pointer events (game Event / Event3D
+ *   do not receive the tap);
+ * - only nodes with {@link CombosDevelopmentToolTarget} are pickable;
+ * - selection outline and markers are drawn with the Canvas 2D API (no renderer plugin).
  *
  * Turn on/off via:
  * - `window.dispatchEvent(new CustomEvent(COMBOS_DEVELOPMENT_TOOL_SET_PICK_MODE, { detail: { enabled: true } }))`
  * - `window.postMessage({ type: COMBOS_DEVELOPMENT_TOOL_SET_PICK_MODE, enabled: true }, targetOrigin)` (e.g. from parent iframe)
  * - `game.emit(COMBOS_DEVELOPMENT_TOOL_SET_PICK_MODE, { enabled: true })` or `getSystem(CombosDevelopmentToolSystem).setEnabled(true)`
  *
- * Mute (independent of pick mode; parent toolbar or in-game debug UI):
- * - `postMessage({ type: COMBOS_DEVELOPMENT_TOOL_SET_MUTED, muted: true })`
- * - `game.emit(COMBOS_DEVELOPMENT_TOOL_SET_MUTED, { muted: true })` or `.setMuted(true)`
- * Mute applies when `SoundSystem` is registered; otherwise the desired value is remembered until it appears.
- * Emits / posts `COMBOS_DEVELOPMENT_TOOL_STATE_CHANGED` with `{ muted }`.
+ * Mute is owned by `@combos-fun/plugin-sound` (`combos-development-tool:set-muted` /
+ * `SoundSystem.setMuted`). This system still forwards `.setMuted()` to
+ * `SoundSystem` so older in-game callers keep working.
  *
  * Play / pause / resume are handled by the engine core lifecycle protocol
  * (`combos-game:set-playing` / `combos-game:state-changed`), not this tool.
  *
  * While enabled: `game.emit(COMBOS_DEVELOPMENT_TOOL_REFRESH)`, `window` event `combos-development-tool:refresh`,
- * or `postMessage({ type: 'combos-development-tool:refresh' })` to re-bind after adding/removing objects.
+ * or `postMessage({ type: 'combos-development-tool:refresh' })` after adding/removing objects.
  */
 let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends System {
     constructor() {
@@ -617,42 +1034,28 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
         this.postMessageOrigin = '*';
         this.allowedMessageOrigins = mergeAllowedMessageOrigins();
         this.enabled = false;
-        this.outlineGo = null;
         this.selected = null;
-        this.tapHandlers = new Map();
-        this.tapOwners = new Map();
-        /** Game `Event` hit targets soft-disabled while enabled (`container.interactive = false`). */
-        this.disabledGameEventGoIds = new Set();
-        /** Pick `Event` injected for {@link CombosDevelopmentToolTarget} nodes. */
-        this.pickEvents = new Set();
+        this.overlay = null;
+        this.overlayCss = { width: 0, height: 0 };
+        this.pointerDownGoId = null;
         this.needsRescan = false;
-        this.lastOutlineBounds = null;
         /** Remembered mute when `SoundSystem` is not registered yet. */
         this.mutedWithoutSoundSystem = false;
         /**
          * Marker overlay (see {@link markerLayer}): a visual-only icon layer, toggled
-         * independently of pick mode + mute. Selection/persistence are NOT handled here
-         * — a marked object (e.g. Sound) carries its own `CombosDevelopmentToolTarget`
-         * (added by the game code), so it is picked and serialized through the normal
-         * Target path. The icon just makes the invisible object visible and, by adding
-         * to the owner's rendered bounds, gives its Target pick a clickable hit area.
+         * independently of pick mode + mute. Selection/persistence still go through
+         * `CombosDevelopmentToolTarget` (added by the Vite plugin).
          */
         this.markerOverlayEnabled = false;
         this.needsMarkerRescan = false;
-        /** ownerGoId → its marker GO (icon child, Graphics only). */
-        this.markerGoByOwner = new Map();
+        /** ownerGoId → marker def currently shown. */
+        this.markerOwners = new Set();
         this.onWindowSetPickMode = (e) => {
             const d = e.detail;
             if (d && typeof d.enabled === 'boolean') {
                 this.setEnabled(d.enabled);
             }
         };
-        this.onWindowSetMuted = (e) => {
-            const d = e.detail;
-            if (d && typeof d.muted === 'boolean') {
-                this.setMuted(d.muted);
-            }
-        };
         this.onWindowSetMarkerOverlay = (e) => {
             const d = e.detail;
             if (d && typeof d.enabled === 'boolean') {
@@ -674,9 +1077,6 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
             if (d.type === COMBOS_DEVELOPMENT_TOOL_SET_PICK_MODE && typeof d.enabled === 'boolean') {
                 this.setEnabled(d.enabled);
             }
-            else if (d.type === COMBOS_DEVELOPMENT_TOOL_SET_MUTED && typeof d.muted === 'boolean') {
-                this.setMuted(d.muted);
-            }
             else if (d.type === COMBOS_DEVELOPMENT_TOOL_SET_MARKER_OVERLAY &&
                 typeof d.enabled === 'boolean') {
                 this.setMarkerOverlay(d.enabled);
@@ -699,49 +1099,75 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
         this.onGameRefresh = () => {
             this.requestSceneRescan();
         };
-        this.onGameSetMuted = (payload) => {
-            if (payload && typeof payload.muted === 'boolean') {
-                this.setMuted(payload.muted);
-            }
-        };
         this.onWindowRefresh = () => {
             this.requestSceneRescan();
         };
+        this.onPointerDown = (e) => {
+            if (!this.enabled)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            try {
+                this.overlay?.canvas.setPointerCapture(e.pointerId);
+            }
+            catch {
+                /* ignore */
+            }
+            const hit = this.hitTestPointer(e);
+            this.pointerDownGoId = hit?.id ?? null;
+        };
+        this.onPointerUp = (e) => {
+            if (!this.enabled)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            const hit = this.hitTestPointer(e);
+            if (hit && hit.id === this.pointerDownGoId) {
+                this.onSelect(hit, e);
+            }
+            this.pointerDownGoId = null;
+        };
     }
     static { this.systemName = 'CombosDevelopmentToolSystem'; }
     init(params) {
         this.postMessageOrigin = params?.postMessageOrigin ?? '*';
         this.allowedMessageOrigins = mergeAllowedMessageOrigins(params?.allowedMessageOrigins);
+        this.overlay = createOverlayCanvas();
+        if (this.overlay) {
+            this.overlay.canvas.addEventListener('pointerdown', this.onPointerDown);
+            this.overlay.canvas.addEventListener('pointerup', this.onPointerUp);
+        }
         if (typeof window !== 'undefined') {
             window.addEventListener(COMBOS_DEVELOPMENT_TOOL_SET_PICK_MODE, this.onWindowSetPickMode);
-            window.addEventListener(COMBOS_DEVELOPMENT_TOOL_SET_MUTED, this.onWindowSetMuted);
             window.addEventListener(COMBOS_DEVELOPMENT_TOOL_SET_MARKER_OVERLAY, this.onWindowSetMarkerOverlay);
             window.addEventListener(COMBOS_DEVELOPMENT_TOOL_REFRESH, this.onWindowRefresh);
             window.addEventListener('message', this.onWindowMessage);
         }
         this.game.on(COMBOS_DEVELOPMENT_TOOL_SET_PICK_MODE, this.onGameSetPickMode);
-        this.game.on(COMBOS_DEVELOPMENT_TOOL_SET_MUTED, this.onGameSetMuted);
         this.game.on(COMBOS_DEVELOPMENT_TOOL_SET_MARKER_OVERLAY, this.onGameSetMarkerOverlay);
         this.game.on(COMBOS_DEVELOPMENT_TOOL_REFRESH, this.onGameRefresh);
+        this.syncOverlayMode();
         if (this.enabled) {
             this.needsRescan = true;
         }
     }
     onDestroy() {
+        if (this.overlay) {
+            this.overlay.canvas.removeEventListener('pointerdown', this.onPointerDown);
+            this.overlay.canvas.removeEventListener('pointerup', this.onPointerUp);
+            this.overlay.destroy();
+            this.overlay = null;
+        }
         if (typeof window !== 'undefined') {
             window.removeEventListener(COMBOS_DEVELOPMENT_TOOL_SET_PICK_MODE, this.onWindowSetPickMode);
-            window.removeEventListener(COMBOS_DEVELOPMENT_TOOL_SET_MUTED, this.onWindowSetMuted);
             window.removeEventListener(COMBOS_DEVELOPMENT_TOOL_SET_MARKER_OVERLAY, this.onWindowSetMarkerOverlay);
             window.removeEventListener(COMBOS_DEVELOPMENT_TOOL_REFRESH, this.onWindowRefresh);
             window.removeEventListener('message', this.onWindowMessage);
         }
         this.game.off(COMBOS_DEVELOPMENT_TOOL_SET_PICK_MODE, this.onGameSetPickMode);
-        this.game.off(COMBOS_DEVELOPMENT_TOOL_SET_MUTED, this.onGameSetMuted);
         this.game.off(COMBOS_DEVELOPMENT_TOOL_SET_MARKER_OVERLAY, this.onGameSetMarkerOverlay);
         this.game.off(COMBOS_DEVELOPMENT_TOOL_REFRESH, this.onGameRefresh);
-        this.detachAllPicks();
-        this.detachAllMarkers();
-        this.restoreDisabledGameEvents();
+        this.markerOwners.clear();
         this.clearSelectionAndNotify('pick-disabled');
     }
     /** Programmatic toggle (same effect as events). */
@@ -749,14 +1175,14 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
         if (this.enabled === on)
             return;
         this.enabled = on;
+        this.syncOverlayMode();
         if (!on) {
             this.clearSelectionAndNotify('pick-disabled');
-            this.detachAllPicks();
-            this.restoreDisabledGameEvents();
             this.postSetSuccess(false);
         }
         else {
             this.needsRescan = true;
+            this.redrawOverlay();
         }
     }
     get isEnabled() {
@@ -765,27 +1191,21 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
     /**
      * Toggle the marker overlay: pin a persistent icon on every object that owns a
      * registered invisible component ({@link markerLayer}, Sound first). Independent
-     * of pick mode / mute. This layer is purely visual — the icon makes the object
-     * visible and adds to its rendered bounds so the owner's own
-     * `CombosDevelopmentToolTarget` pick gets a clickable hit area. Selecting and
-     * persisting edits (e.g. volume) still go through that Target, exactly like any
-     * other scene edit, so the object must carry a Target (added by the game code).
+     * of pick mode / mute. Selecting and persisting edits still go through the
+     * owner's `CombosDevelopmentToolTarget`.
      */
     setMarkerOverlay(on) {
         if (this.markerOverlayEnabled === on)
             return;
         this.markerOverlayEnabled = on;
+        this.syncOverlayMode();
         if (on) {
-            // `attachMarkers` requests the pick rescan itself, once the icons exist.
             this.needsMarkerRescan = true;
         }
         else {
-            this.detachAllMarkers();
+            this.markerOwners.clear();
             this.postMarkerOverlaySuccess(false, []);
-            // Shrink owners' pick hit areas back now that the icons are gone.
-            if (this.enabled) {
-                this.needsRescan = true;
-            }
+            this.redrawOverlay();
         }
     }
     get isMarkerOverlayEnabled() {
@@ -800,64 +1220,42 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
         return this.mutedWithoutSoundSystem;
     }
     /**
-     * Mute or unmute audio via `SoundSystem` when registered.
-     * No-op on the audio graph if `SoundSystem` is missing; value is remembered for `isMuted`.
+     * @deprecated Host mute is handled by `@combos-fun/plugin-sound`.
+     * Forwards to `SoundSystem.muted` when that system is registered.
      */
     setMuted(muted) {
         const sound = this.getSoundSystem();
         if (sound) {
             sound.muted = muted;
+            return;
         }
-        else {
-            this.mutedWithoutSoundSystem = muted;
-        }
-        this.postStateChanged();
+        this.mutedWithoutSoundSystem = muted;
     }
-    update(e) {
+    update() {
         if (this.enabled && this.needsRescan) {
             this.needsRescan = false;
-            this.attachEditMode();
             this.postSetSuccess(true);
         }
-        // Attaching markers is deferred to run *after* the pick rescan above so that a
-        // newly drawn icon's rebuild lands on a later frame (see `attachMarkers`): the
-        // icon child needs a rendered container before it contributes to the owner's
-        // bounds, and only then does the owner's Target pick get a hit area over it.
         if (this.markerOverlayEnabled && this.needsMarkerRescan) {
             this.needsMarkerRescan = false;
             this.attachMarkers();
         }
-        for (const go of [...this.tapOwners.values()]) {
-            if (go.destroyed) {
-                this.releasePick(go);
-            }
-        }
-        // Drop markers whose owner disappeared while the overlay is on.
-        for (const [ownerId, marker] of [...this.markerGoByOwner.entries()]) {
-            const owner = this.findGameObjectById(ownerId);
-            if (!owner || owner.destroyed || marker.destroyed) {
-                this.removeMarker(ownerId);
-            }
+        if (this.selected?.destroyed) {
+            this.clearSelectionAndNotify('target-removed');
         }
-        if (!this.enabled || !this.selected || !this.outlineGo)
-            return;
-        this.updateSelectionOutline();
+    }
+    lateUpdate(_e) {
+        this.redrawOverlay();
     }
     componentChanged(changed) {
-        if (!this.enabled)
-            return;
         const { type, gameObject, componentName } = changed;
         if (!gameObject || componentName !== 'CombosDevelopmentToolTarget')
             return;
-        if (type === OBSERVER_TYPE.ADD) {
-            this.stripGameEvent(gameObject);
-            this.ensurePick(gameObject);
+        if (type === OBSERVER_TYPE.REMOVE && this.selected === gameObject) {
+            this.clearSelectionAndNotify('target-removed');
         }
-        else if (type === OBSERVER_TYPE.REMOVE) {
-            this.releasePick(gameObject);
-            if (this.selected === gameObject) {
-                this.clearSelectionAndNotify('target-removed');
-            }
+        if (this.markerOverlayEnabled) {
+            this.needsMarkerRescan = true;
         }
     }
     /** Re-bind pick targets / markers after dynamic scene changes while active. */
@@ -869,24 +1267,10 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
             this.needsMarkerRescan = true;
         }
     }
-    attachEditMode() {
-        this.detachAllPicks();
-        const list = [];
-        for (const tr of this.game.scene.transform.children) {
-            this.collectGameObjects(tr.gameObject, list);
-        }
-        for (const go of list) {
-            if (this.isIgnoredPickGo(go))
-                continue;
-            this.stripGameEvent(go);
-        }
-        for (const go of list) {
-            if (this.isIgnoredPickGo(go))
-                continue;
-            if (!go.getComponent(CombosDevelopmentToolTarget))
-                continue;
-            this.ensurePick(go);
-        }
+    syncOverlayMode() {
+        const active = this.enabled || this.markerOverlayEnabled;
+        this.overlay?.setVisible(active);
+        this.overlay?.setPickEnabled(this.enabled);
     }
     collectGameObjects(go, out) {
         out.push(go);
@@ -894,203 +1278,134 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
             this.collectGameObjects(tr.gameObject, out);
         }
     }
+    listSceneObjects() {
+        const list = [];
+        const scene = this.game.scene;
+        if (!scene?.transform?.children)
+            return list;
+        for (const tr of scene.transform.children) {
+            this.collectGameObjects(tr.gameObject, list);
+        }
+        return list;
+    }
     isIgnoredPickGo(go) {
-        return go.name === OUTLINE_GO_NAME || go === this.outlineGo || this.isMarkerGo(go);
+        return go.name === OUTLINE_GO_NAME || this.isMarkerGo(go);
     }
     isMarkerGo(go) {
         return typeof go.name === 'string' && go.name.startsWith(MARKER_GO_NAME_PREFIX);
     }
-    stripGameEvent(go) {
-        if (this.disabledGameEventGoIds.has(go.id))
-            return;
-        const ev = go.getComponent(Event);
-        if (!ev)
-            return;
-        const container = this.getRendererContainer(go);
-        if (!container)
-            return;
-        try {
-            container.interactive = false;
-            this.disabledGameEventGoIds.add(go.id);
-        }
-        catch {
-            /* ignore */
-        }
+    projectGo(go) {
+        return projectGameObjectToScreen(go, {
+            css: this.overlayCss,
+            design: resolveDesignSize(this.game),
+            camera: resolveCamera(this.game),
+            object3D: resolveObject3D(this.game, go.id),
+        });
     }
-    restoreDisabledGameEvents() {
-        for (const id of [...this.disabledGameEventGoIds]) {
-            const go = this.findGameObjectById(id);
-            if (!go || go.destroyed) {
-                this.disabledGameEventGoIds.delete(id);
+    collectOverlayHits() {
+        const hits = [];
+        for (const go of this.listSceneObjects()) {
+            if (go.destroyed || this.isIgnoredPickGo(go))
                 continue;
+            if (!go.getComponent(CombosDevelopmentToolTarget))
+                continue;
+            const rect = this.projectGo(go);
+            if (rect) {
+                hits.push({ go, rect });
             }
-            const container = this.getRendererContainer(go);
-            if (container) {
-                try {
-                    container.interactive = true;
-                }
-                catch {
-                    /* ignore */
+            if (this.markerOverlayEnabled && resolveMarkerDef(go)) {
+                const markerRect = this.markerRectFor(go, rect);
+                if (markerRect) {
+                    hits.push({ go, rect: markerRect });
                 }
             }
-            this.disabledGameEventGoIds.delete(id);
-        }
-    }
-    detachAllPicks() {
-        for (const go of [...this.tapOwners.values()]) {
-            this.releasePick(go);
         }
+        return hits;
     }
-    ensurePick(go) {
-        if (this.tapHandlers.has(go.id))
-            return;
-        const container = this.getRendererContainer(go);
-        if (container) {
-            try {
-                container.interactive = true;
-            }
-            catch {
-                /* ignore */
-            }
-        }
-        let ev = go.getComponent(Event);
-        if (!ev) {
-            ev = go.addComponent(this.createPickEvent(go));
-            this.pickEvents.add(go.id);
-        }
-        const handler = payload => this.onSelect(go, payload);
-        this.tapHandlers.set(go.id, handler);
-        this.tapOwners.set(go.id, go);
-        ev.on('tap', handler);
-    }
-    createPickEvent(go) {
-        const bounds = this.resolvePickBounds(go);
-        if (bounds.width > 0 && bounds.height > 0) {
-            return new Event({
-                hitArea: {
-                    type: HIT_AREA_TYPE.Rect,
-                    style: {
-                        x: bounds.x,
-                        y: bounds.y,
-                        width: bounds.width,
-                        height: bounds.height,
-                    },
-                },
-            });
-        }
-        return new Event();
-    }
-    resolvePickBounds(go) {
-        if (this.shouldPreferRenderedBounds(go)) {
-            const fromOwnGraphics = this.resolveOwnGraphicsLocalBounds(go);
-            if (fromOwnGraphics) {
-                return fromOwnGraphics;
-            }
-            const fromGraphics = this.resolveContainerLocalBounds(go);
-            if (fromGraphics) {
-                return fromGraphics;
-            }
-        }
-        const { width, height } = go.transform.size;
-        if (width > 0 && height > 0) {
-            return { x: 0, y: 0, width, height };
-        }
-        const fromContainer = this.resolveContainerLocalBounds(go);
-        if (fromContainer) {
-            return fromContainer;
-        }
-        return { x: 0, y: 0, width: 1, height: 1 };
-    }
-    shouldPreferRenderedBounds(go) {
-        return go.getComponent(Graphics) != null;
-    }
-    /** Bounds of this GO's own Graphics only — excludes child GOs such as the selection outline. */
-    resolveOwnGraphicsLocalBounds(go) {
-        const gfx = go.getComponent(Graphics);
-        if (!gfx?.graphics)
+    markerRectFor(go, objectRect) {
+        const rect = objectRect ?? this.projectGo(go);
+        if (!rect)
             return null;
-        try {
-            const bounds = gfx.graphics.getLocalBounds();
-            if (bounds.width > 0 && bounds.height > 0) {
-                return {
-                    x: bounds.x,
-                    y: bounds.y,
-                    width: bounds.width,
-                    height: bounds.height,
-                };
-            }
+        if (go.getComponent('Transform3D')) {
+            return {
+                x: rect.x + rect.width / 2 - MARKER_ICON_SIZE / 2,
+                y: rect.y + rect.height / 2 - MARKER_ICON_SIZE / 2,
+                width: MARKER_ICON_SIZE,
+                height: MARKER_ICON_SIZE,
+            };
         }
-        catch {
-            /* ignore */
-        }
-        return null;
-    }
-    resolveContainerLocalBounds(go) {
-        const container = this.getRendererContainer(go);
-        if (!container)
-            return null;
-        const outlineContainer = this.getOutlineContainerIfChildOf(go);
-        let outlineDetached = false;
-        if (outlineContainer?.parent === container) {
-            container.removeChild(outlineContainer);
-            outlineDetached = true;
-        }
-        try {
-            const bounds = container.getLocalBounds();
-            if (bounds.width > 0 && bounds.height > 0) {
-                return {
-                    x: bounds.x,
-                    y: bounds.y,
-                    width: bounds.width,
-                    height: bounds.height,
-                };
-            }
-        }
-        catch {
-            /* ignore */
-        }
-        finally {
-            if (outlineDetached && outlineContainer) {
-                container.addChild(outlineContainer);
-            }
-        }
-        return null;
+        return {
+            x: rect.x,
+            y: rect.y,
+            width: MARKER_ICON_SIZE,
+            height: MARKER_ICON_SIZE,
+        };
     }
-    /** Outline is parented under the selected GO; exclude it when measuring content bounds. */
-    getOutlineContainerIfChildOf(go) {
-        if (!this.outlineGo || this.outlineGo.parent !== go) {
-            return null;
+    overlayPoint(e) {
+        const canvas = this.overlay?.canvas;
+        if (!canvas)
+            return { x: 0, y: 0 };
+        const rect = canvas.getBoundingClientRect();
+        return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    }
+    hitTestPointer(e) {
+        const pt = this.overlayPoint(e);
+        const hits = this.collectOverlayHits();
+        return hitTestRects(pt.x, pt.y, hits.map(h => ({ id: h.go, rect: h.rect })));
+    }
+    redrawOverlay() {
+        const overlay = this.overlay;
+        if (!overlay)
+            return;
+        const active = this.enabled || this.markerOverlayEnabled;
+        if (!active) {
+            overlay.setVisible(false);
+            return;
         }
-        return this.getRendererContainer(this.outlineGo);
+        const gameCanvas = this.game.canvas ?? this.game.scene?.canvas;
+        if (!gameCanvas)
+            return;
+        const css = overlay.sync(gameCanvas);
+        if (!css)
+            return;
+        this.overlayCss = css;
+        overlay.ctx.clearRect(0, 0, css.width, css.height);
+        this.drawMarkers(overlay.ctx);
+        this.drawSelectionOutline(overlay.ctx);
     }
-    getRendererContainer(go) {
-        const rendererSystem = this.game.getSystem(RendererSystem);
-        if (!rendererSystem?.containerManager)
-            return null;
-        try {
-            return rendererSystem.containerManager.getContainer(go.id);
-        }
-        catch {
-            return null;
+    drawMarkers(ctx) {
+        if (!this.markerOverlayEnabled)
+            return;
+        const gfx = new CanvasMarkerGraphics(ctx);
+        for (const go of this.listSceneObjects()) {
+            if (go.destroyed || this.isIgnoredPickGo(go))
+                continue;
+            const def = resolveMarkerDef(go);
+            if (!def)
+                continue;
+            const objectRect = this.projectGo(go);
+            const rect = this.markerRectFor(go, objectRect);
+            if (!rect)
+                continue;
+            ctx.save();
+            ctx.translate(rect.x, rect.y);
+            drawMarkerIcon(gfx, def, MARKER_ICON_SIZE);
+            ctx.restore();
         }
     }
-    releasePick(go) {
-        const handler = this.tapHandlers.get(go.id);
-        if (!handler)
+    drawSelectionOutline(ctx) {
+        if (!this.enabled || !this.selected || this.selected.destroyed)
             return;
-        const ev = go.getComponent(Event);
-        ev?.off('tap', handler);
-        this.tapHandlers.delete(go.id);
-        this.tapOwners.delete(go.id);
-        if (this.pickEvents.has(go.id)) {
-            try {
-                go.removeComponent(Event);
-            }
-            catch {
-                /* ignore */
-            }
-            this.pickEvents.delete(go.id);
-        }
+        const rect = this.projectGo(this.selected);
+        if (!rect)
+            return;
+        const design = resolveDesignSize(this.game);
+        const scale = design ? this.overlayCss.width / design.width : 1;
+        ctx.save();
+        ctx.strokeStyle = OUTLINE_COLOR;
+        ctx.lineWidth = Math.max(2, 4 * (Number.isFinite(scale) && scale > 0 ? scale : 1));
+        ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+        ctx.restore();
     }
     postSetSuccess(enabled) {
         const payload = {
@@ -1102,34 +1417,16 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
         }
         this.game.emit(COMBOS_DEVELOPMENT_TOOL_PICK_MODE_SUCCESS, { enabled });
     }
-    postStateChanged() {
-        const state = {
-            muted: this.isMuted,
-        };
-        const payload = {
-            type: COMBOS_DEVELOPMENT_TOOL_STATE_CHANGED,
-            ...state,
-        };
-        if (typeof window !== 'undefined' && window.parent && window.parent !== window) {
-            window.parent.postMessage(payload, this.postMessageOrigin);
-        }
-        this.game.emit(COMBOS_DEVELOPMENT_TOOL_STATE_CHANGED, state);
-    }
-    /** (Re)build markers for every object owning a registered marker component. */
     attachMarkers() {
-        this.detachAllMarkers();
-        const list = [];
-        for (const tr of this.game.scene.transform.children) {
-            this.collectGameObjects(tr.gameObject, list);
-        }
+        this.markerOwners.clear();
         const counts = new Map();
-        for (const go of list) {
+        for (const go of this.listSceneObjects()) {
             if (this.isIgnoredPickGo(go))
                 continue;
             const def = resolveMarkerDef(go);
             if (!def)
                 continue;
-            this.createMarker(go, def);
+            this.markerOwners.add(go.id);
             counts.set(def.componentName, (counts.get(def.componentName) ?? 0) + 1);
         }
         const markers = [...counts.entries()].map(([componentName, count]) => ({
@@ -1137,43 +1434,7 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
             count,
         }));
         this.postMarkerOverlaySuccess(true, markers);
-        // Rebuild picks next frame: the icons just added need a rendered container
-        // before they enlarge their owners' bounds into a clickable hit area. Runs on
-        // a later frame because the pick rescan block already executed above.
-        if (this.enabled) {
-            this.needsRescan = true;
-        }
-    }
-    createMarker(owner, def) {
-        if (this.markerGoByOwner.has(owner.id))
-            return;
-        const bounds = this.resolvePickBounds(owner);
-        const marker = new GameObject(MARKER_GO_NAME_PREFIX + owner.id, {
-            size: { width: MARKER_ICON_SIZE, height: MARKER_ICON_SIZE },
-            position: { x: bounds.x, y: bounds.y },
-            origin: { x: 0, y: 0 },
-        });
-        const gfx = marker.addComponent(new Graphics());
-        if (gfx?.graphics) {
-            drawMarkerIcon(gfx.graphics, def, MARKER_ICON_SIZE);
-        }
-        owner.addChild(marker);
-        this.markerGoByOwner.set(owner.id, marker);
-    }
-    removeMarker(ownerId) {
-        const marker = this.markerGoByOwner.get(ownerId);
-        if (!marker)
-            return;
-        this.markerGoByOwner.delete(ownerId);
-        if (!marker.destroyed) {
-            marker.destroy();
-        }
-    }
-    detachAllMarkers() {
-        for (const ownerId of [...this.markerGoByOwner.keys()]) {
-            this.removeMarker(ownerId);
-        }
-        this.markerGoByOwner.clear();
+        this.redrawOverlay();
     }
     postMarkerOverlaySuccess(enabled, markers) {
         const total = markers.reduce((sum, m) => sum + m.count, 0);
@@ -1197,59 +1458,33 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
         }
         return system;
     }
-    ensureOutline() {
-        if (this.outlineGo)
-            return;
-        const go = new GameObject(OUTLINE_GO_NAME, {
-            size: { width: 1, height: 1 },
-            position: { x: 0, y: 0 },
-            origin: { x: 0, y: 0 },
-        });
-        go.addComponent(new Graphics());
-        this.outlineGo = go;
-    }
-    onSelect(go, tap) {
+    onSelect(go, e) {
         if (!this.enabled)
             return;
-        tap?.stopPropagation?.();
-        this.ensureOutline();
-        if (!this.outlineGo)
-            return;
         this.selected = go;
-        if (this.outlineGo.parent) {
-            this.outlineGo.remove();
-        }
-        go.addChild(this.outlineGo);
-        this.invalidateOutlineBounds();
-        this.updateSelectionOutline();
+        this.redrawOverlay();
+        const overlayPt = this.overlayPoint(e);
+        const pointer = cssToDesign(overlayPt, resolveDesignSize(this.game), this.overlayCss);
         const snapshot = buildGameObjectSnapshot(go);
         const payload = {
             type: COMBOS_DEVELOPMENT_TOOL_GAMEOBJECT_SELECTED,
             snapshot,
-            pointer: tap?.data?.position ?? null,
+            pointer,
         };
         if (typeof window !== 'undefined' && window.parent && window.parent !== window) {
             window.parent.postMessage(payload, this.postMessageOrigin);
         }
     }
     findGameObjectById(id) {
-        const stack = [];
-        for (const tr of this.game.scene.transform.children) {
-            this.collectGameObjects(tr.gameObject, stack);
-        }
-        return stack.find(go => go.id === id) ?? null;
+        return this.listSceneObjects().find(go => go.id === id) ?? null;
     }
     findGameObjectBySource(source) {
-        const stack = [];
-        for (const tr of this.game.scene.transform.children) {
-            this.collectGameObjects(tr.gameObject, stack);
-        }
         const wantFile = source.file.trim();
         const wantAnchor = (source.anchor ?? '').trim();
         if (!wantAnchor) {
             return null;
         }
-        for (const go of stack) {
+        for (const go of this.listSceneObjects()) {
             const anchor = readSourceAnchor(go);
             if (!anchor || anchor.file !== wantFile) {
                 continue;
@@ -1293,8 +1528,7 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
         if (!applied)
             return;
         if (this.selected?.id === go.id) {
-            this.invalidateOutlineBounds();
-            this.updateSelectionOutline();
+            this.redrawOverlay();
             this.postSnapshotUpdate(go);
         }
     }
@@ -1311,7 +1545,8 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
     }
     clearSelectionAndNotify(reason) {
         const hadSelection = this.selected != null;
-        this.clearSelection();
+        this.selected = null;
+        this.redrawOverlay();
         if (!shouldNotifyGameObjectDeselected(hadSelection)) {
             return;
         }
@@ -1324,44 +1559,6 @@ let CombosDevelopmentToolSystem = class CombosDevelopmentToolSystem extends Syst
         }
         this.game.emit(payload.type, { reason });
     }
-    clearSelection() {
-        this.selected = null;
-        this.invalidateOutlineBounds();
-        if (this.outlineGo?.parent) {
-            this.outlineGo.remove();
-        }
-        const gfx = this.outlineGo?.getComponent(Graphics);
-        if (gfx?.graphics) {
-            gfx.graphics.clear();
-        }
-    }
-    /** Redraw the green outline only when content bounds change (movement follows via child transform). */
-    updateSelectionOutline() {
-        if (!this.enabled || !this.selected || !this.outlineGo)
-            return;
-        const gfxComp = this.outlineGo.getComponent(Graphics);
-        if (!gfxComp?.graphics)
-            return;
-        const bounds = this.resolvePickBounds(this.selected);
-        if (this.lastOutlineBounds && this.pickBoundsEqual(this.lastOutlineBounds, bounds)) {
-            return;
-        }
-        this.lastOutlineBounds = bounds;
-        const g = gfxComp.graphics;
-        g.clear();
-        g.rect(bounds.x, bounds.y, bounds.width, bounds.height);
-        g.stroke({ width: 4, color: 0x55ffaa, alpha: 1 });
-    }
-    invalidateOutlineBounds() {
-        this.lastOutlineBounds = null;
-    }
-    pickBoundsEqual(a, b) {
-        const eps = 0.01;
-        return (Math.abs(a.x - b.x) < eps &&
-            Math.abs(a.y - b.y) < eps &&
-            Math.abs(a.width - b.width) < eps &&
-            Math.abs(a.height - b.height) < eps);
-    }
 };
 CombosDevelopmentToolSystem = __decorate([
     decorators.componentObserver({
@@ -1373,8 +1570,51 @@ var CombosDevelopmentToolSystem$1 = CombosDevelopmentToolSystem;
 /** Auto-generated by scripts/build-package.mjs — do not edit. */
 Object.assign(CombosDevelopmentToolSystem$1, {
     packageName: "@combos-fun/plugin-development-tool",
-    packageVersion: "0.0.47",
+    packageVersion: "0.0.49",
 });
 
-export { COMBOS_DEVELOPMENT_TOOL_APPLY_PROPERTY, COMBOS_DEVELOPMENT_TOOL_CLEAR_SELECTION, COMBOS_DEVELOPMENT_TOOL_GAMEOBJECT_DESELECTED, COMBOS_DEVELOPMENT_TOOL_GAMEOBJECT_SELECTED, COMBOS_DEVELOPMENT_TOOL_MARKER_OVERLAY_SUCCESS, COMBOS_DEVELOPMENT_TOOL_PICK_MODE_SUCCESS, COMBOS_DEVELOPMENT_TOOL_READY, COMBOS_DEVELOPMENT_TOOL_REFRESH, COMBOS_DEVELOPMENT_TOOL_SET_MARKER_OVERLAY, COMBOS_DEVELOPMENT_TOOL_SET_MUTED, COMBOS_DEVELOPMENT_TOOL_SET_PICK_MODE, COMBOS_DEVELOPMENT_TOOL_STATE_CHANGED, CombosDevelopmentToolSystem$1 as CombosDevelopmentToolSystem, CombosDevelopmentToolTarget, DEFAULT_ALLOWED_MESSAGE_HOST_SUFFIXES, MARKER_COMPONENTS, MARKER_ICON_SIZE, applyPropertyValue, applyPropertyWithHooks, buildGameObjectDeselectedPayload, buildGameObjectSnapshot, drawMarkerIcon, isAllowedMessageOrigin, isClearSelectionMessage, mergeAllowedMessageOrigins, readPropertyValue, readSourceAnchor, resolveMarkerDef, shouldNotifyGameObjectDeselected };
+function isInternalEditorGo(go) {
+    return typeof go.name === 'string' && go.name.startsWith('__');
+}
+function isSceneLike(go) {
+    return Array.isArray(go.gameObjects);
+}
+function sourceIsComplete(raw) {
+    if (!isSceneSourceAnchor(raw))
+        return false;
+    return Boolean(raw.file.trim()) && Boolean((raw.anchor ?? '').trim());
+}
+/**
+ * Marks `go` for editor pick / persist. Idempotent: existing Targets keep a
+ * complete `payload.source`; missing identity is filled from `source`.
+ *
+ * Inserted by `@combos-fun/plugin-development-tool/vite`. Game code should
+ * not call this by hand.
+ */
+function attachDevelopmentTarget(go, source) {
+    if (!go || go.destroyed || isInternalEditorGo(go) || isSceneLike(go)) {
+        return go;
+    }
+    const file = source.file.trim();
+    const anchor = source.anchor.trim();
+    if (!file || !anchor) {
+        return go;
+    }
+    const existing = go.getComponent(CombosDevelopmentToolTarget);
+    if (existing) {
+        if (!sourceIsComplete(existing.payload?.source)) {
+            existing.payload = {
+                ...(existing.payload ?? {}),
+                source: { file, anchor },
+            };
+        }
+        return go;
+    }
+    go.addComponent(new CombosDevelopmentToolTarget({
+        payload: { source: { file, anchor } },
+    }));
+    return go;
+}
+
+export { COMBOS_DEVELOPMENT_TOOL_APPLY_PROPERTY, COMBOS_DEVELOPMENT_TOOL_CLEAR_SELECTION, COMBOS_DEVELOPMENT_TOOL_GAMEOBJECT_DESELECTED, COMBOS_DEVELOPMENT_TOOL_GAMEOBJECT_SELECTED, COMBOS_DEVELOPMENT_TOOL_MARKER_OVERLAY_SUCCESS, COMBOS_DEVELOPMENT_TOOL_PICK_MODE_SUCCESS, COMBOS_DEVELOPMENT_TOOL_READY, COMBOS_DEVELOPMENT_TOOL_REFRESH, COMBOS_DEVELOPMENT_TOOL_SET_MARKER_OVERLAY, COMBOS_DEVELOPMENT_TOOL_SET_MUTED, COMBOS_DEVELOPMENT_TOOL_SET_PICK_MODE, COMBOS_DEVELOPMENT_TOOL_STATE_CHANGED, CombosDevelopmentToolSystem$1 as CombosDevelopmentToolSystem, CombosDevelopmentToolTarget, DEFAULT_ALLOWED_MESSAGE_HOST_SUFFIXES, MARKER_COMPONENTS, MARKER_ICON_SIZE, applyPropertyValue, applyPropertyWithHooks, attachDevelopmentTarget, buildGameObjectDeselectedPayload, buildGameObjectSnapshot, drawMarkerIcon, isAllowedMessageOrigin, isClearSelectionMessage, mergeAllowedMessageOrigins, readPropertyValue, readSourceAnchor, resolveMarkerDef, shouldNotifyGameObjectDeselected };
 //# sourceMappingURL=plugin-development-tool.esm.js.map