@vibecook/ice 0.1.0 → 0.2.0

package/dist/{chunk-FIAXPNNY.js → chunk-IASTQMU5.js}

@@ -6,28 +6,21 @@ import {
   HandleSpec,
   MeasuredSize,
   NO_MODS,
-  Port,
-  PortAnchor,
+  Opacity,
   Position,
   PrefabId,
   PresenceInfo,
-  RoutedConnect,
-  Selected,
   SelectionBox,
   Size,
-  Wire,
-  WireFrom,
-  WirePorts,
-  WireTo,
+  compareStackOrder,
+  createSiblingOrderIndex,
   defineQuery,
   widgets
-} from "./chunk-5S7GSXJG.js";
+} from "./chunk-DXU3RZZS.js";
 import {
   planeCssTransform,
-  portAnchor,
-  wireCubic,
   worldToScreen
-} from "./chunk-BCJ47SX7.js";
+} from "./chunk-OR5FNVUE.js";
 
 // ../dom/src/host.ts
 var CONTAINER_STYLE = {
@@ -47,6 +40,10 @@ function createCanvasHost(container) {
   const position = container.style.position !== "" ? container.style.position : view?.getComputedStyle(container).position ?? "";
   const promoteToRelative = position === "" || position === "static";
   if (promoteToRelative) container.style.position = "relative";
+  const priorContainerStyle = Object.keys(CONTAINER_STYLE).map((prop) => {
+    const cssName = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+    return [cssName, container.style.getPropertyValue(cssName)];
+  });
   Object.assign(container.style, CONTAINER_STYLE);
   const contentPlane = container.ownerDocument.createElement("div");
   Object.assign(contentPlane.style, PLANE_STYLE);
@@ -57,11 +54,9 @@ function createCanvasHost(container) {
     dispose() {
       contentPlane.remove();
       if (promoteToRelative) container.style.removeProperty("position");
-      for (const prop of Object.keys(CONTAINER_STYLE)) {
-        container.style.removeProperty(
-          // camelCase → kebab-case for removeProperty (touchAction → touch-action).
-          prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)
-        );
+      for (const [cssName, prior] of priorContainerStyle) {
+        if (prior !== "") container.style.setProperty(cssName, prior);
+        else container.style.removeProperty(cssName);
       }
     }
   };
@@ -73,7 +68,12 @@ var LIFTED_PLANE_STYLE = {
   left: "0",
   top: "0",
   transformOrigin: "0 0",
-  willChange: "transform"
+  willChange: "transform",
+  // The ONE explicit z in the plane sandwich (2026-07-19): in-container app
+  // chrome may slot BETWEEN the planes with z-index 1 — resting widgets
+  // slide under it while the dragged (promoted) widget floats over it. DOM
+  // order alone leaves no gap for that; everything else stays order-stacked.
+  zIndex: "2"
 };
 function createPlanes(host) {
   const lifted = host.container.ownerDocument.createElement("div");
@@ -191,6 +191,7 @@ function createGrayboxReflector(host) {
 var geometryQuery = defineQuery([Position, Size]);
 var measuredQuery = defineQuery([MeasuredSize]);
 var grabQuery = defineQuery([Grab]);
+var opacityQuery = defineQuery([Opacity]);
 function writeGeom2(el, x, y, w, h) {
   el.style.left = `${x}px`;
   el.style.top = `${y}px`;
@@ -200,11 +201,14 @@ function writeGeom2(el, x, y, w, h) {
 function createDomWidgetsReflector(host, world, store) {
   const doc = host.contentPlane.ownerDocument;
   const hosts = /* @__PURE__ */ new Map();
+  const order = createSiblingOrderIndex(world);
   let lastSnapshot;
   let geometryWrites = 0;
   let inert = false;
   let geometryDirty = false;
   let promoteDirty = false;
+  let opacityDirty = false;
+  let orderDirty = false;
   const unsubs = [
     world.reactive.observeQuery(geometryQuery, () => {
       geometryDirty = true;
@@ -216,14 +220,35 @@ function createDomWidgetsReflector(host, world, store) {
     }, { cols: [MeasuredSize] }),
     world.reactive.observeQuery(grabQuery, () => {
       promoteDirty = true;
-    }, { cols: [] })
+    }, { cols: [] }),
+    // Opacity is an optional rider like MeasuredSize: membership (attach/detach)
+    // and value changes both arm the flag; detach resets the host to the
+    // default via the `?? 1` read.
+    world.reactive.observeQuery(opacityQuery, () => {
+      opacityDirty = true;
+    }, { cols: [Opacity] }),
+    // Within-plane stacking IS the frame's ChildOf sibling sequence (petition
+    // 8, superseding the StackZ sort that fixed the 2026-07-18 comment-box
+    // paint bug). The wake names the relation (Related grammar — pure
+    // reorders fire it); the ordinal cache's stamp check in updateOrder
+    // keeps other-frame churn cheap.
+    order.observe(() => {
+      orderDirty = true;
+    })
   ];
+  function promotable(e) {
+    const type = world.get(e, PrefabId)?.id;
+    return typeof type !== "string" || widgets.get(type)?.surface !== "gl";
+  }
   function readGeom(e) {
     const p = world.get(e, Position);
     const measured = world.get(e, MeasuredSize);
     const s = measured !== void 0 && measured.w > 0 ? measured : world.get(e, Size);
     return { x: p?.x ?? 0, y: p?.y ?? 0, w: s?.w ?? 0, h: s?.h ?? 0 };
   }
+  function readOpacity(e) {
+    return world.get(e, Opacity)?.a ?? 1;
+  }
   function createHost(e) {
     const el = doc.createElement("div");
     el.style.position = "absolute";
@@ -236,9 +261,11 @@ function createDomWidgetsReflector(host, world, store) {
     const g = readGeom(e);
     writeGeom2(el, g.x, g.y, g.w, g.h);
     geometryWrites++;
-    const lifted = world.has(e, Grab);
+    const opacity = readOpacity(e);
+    if (opacity !== 1) el.style.opacity = String(opacity);
+    const lifted = world.has(e, Grab) && promotable(e);
     (lifted ? host.liftedPlane : host.contentPlane).appendChild(el);
-    return { host: el, content, x: g.x, y: g.y, w: g.w, h: g.h, hidden: false, lifted };
+    return { host: el, content, x: g.x, y: g.y, w: g.w, h: g.h, hidden: false, lifted, opacity };
   }
   function reconcile(snapshot) {
     let membershipChanged = false;
@@ -277,14 +304,57 @@ function createDomWidgetsReflector(host, world, store) {
       }
     }
   }
+  function updateOrder() {
+    const ordinals = order.ordinals();
+    for (const plane of [host.contentPlane, host.liftedPlane]) {
+      const active = doc.activeElement;
+      if (active !== null && active !== doc.body && plane.contains(active)) continue;
+      const mine = [];
+      for (const [e, rec] of hosts) {
+        if (rec.host.parentNode !== plane) continue;
+        mine.push({ el: rec.host, e });
+      }
+      if (mine.length < 2) continue;
+      const target = [...mine].sort((a, b) => compareStackOrder(world, ordinals, a.e, b.e));
+      let cursor = 0;
+      let inOrder = true;
+      for (let i = 0; i < plane.children.length; i++) {
+        const child = plane.children.item(i);
+        if (cursor >= target.length || child === null) break;
+        if (child === target[cursor].el) cursor += 1;
+        else if (mine.some((m) => m.el === child)) {
+          inOrder = false;
+          break;
+        }
+      }
+      if (inOrder && cursor === target.length) continue;
+      for (const m of target) plane.appendChild(m.el);
+    }
+  }
+  function updateOpacity() {
+    for (const [e, rec] of hosts) {
+      const o = readOpacity(e);
+      if (o !== rec.opacity) {
+        rec.host.style.opacity = o === 1 ? "" : String(o);
+        rec.opacity = o;
+      }
+    }
+  }
   function updatePromote() {
     let anyLifted = false;
     for (const [e, rec] of hosts) {
-      const shouldLift = world.has(e, Grab);
+      const grabbed = world.has(e, Grab);
+      const shouldLift = grabbed && promotable(e);
       if (shouldLift) anyLifted = true;
       if (shouldLift !== rec.lifted) {
         rec.lifted = shouldLift;
         (shouldLift ? host.liftedPlane : host.contentPlane).appendChild(rec.host);
+        orderDirty = true;
+      }
+      if (grabbed && !shouldLift) {
+        if (rec.host.style.zIndex !== "1000") rec.host.style.zIndex = "1000";
+      } else if (rec.host.style.zIndex !== "") {
+        rec.host.style.zIndex = "";
       }
     }
     if (anyLifted !== inert) {
@@ -308,10 +378,18 @@ function createDomWidgetsReflector(host, world, store) {
         geometryDirty = false;
         updateGeometry();
       }
+      if (opacityDirty) {
+        opacityDirty = false;
+        updateOpacity();
+      }
       if (promoteDirty || membershipChanged) {
         promoteDirty = false;
         updatePromote();
       }
+      if (orderDirty || membershipChanged) {
+        orderDirty = false;
+        updateOrder();
+      }
     },
     hostFor: (entity) => hosts.get(entity)?.content,
     hostCount: () => hosts.size,
@@ -340,6 +418,7 @@ function startRafLoop(engine) {
 }
 
 // ../dom/src/pointer-adapter.ts
+var asVerdict = (v) => typeof v === "object" ? v : { handled: v === true };
 var WHEEL_LINE_PX = 16;
 var INTERACTIVE_SELECTOR = 'input, textarea, select, button, a[href], [contenteditable=""], [contenteditable="true"], audio[controls], video[controls], [data-canvas-interactive]';
 function crossesInteractive(target, container) {
@@ -388,7 +467,8 @@ function attachPointerAdapter(host, queue, opts = {}) {
     const device = deviceOf(e);
     const { x, y } = relative(e.clientX, e.clientY);
     const native = crossesInteractive(e.target, container);
-    const glClaimed = glRoute?.("down", x, y, e) === true;
+    const gl = asVerdict(glRoute?.("down", x, y, e));
+    const glClaimed = gl.handled;
     live.set(id, { device, x, y, downX: x, downY: y, native, captured: glClaimed });
     if (glClaimed) capture(e.pointerId);
     const surfaceHandled = native || glClaimed;
@@ -401,14 +481,21 @@ function attachPointerAdapter(host, queue, opts = {}) {
       buttons: e.buttons,
       mods: pointerMods(e),
       tMs: e.timeStamp,
-      ...surfaceHandled ? { surfaceHandled: true } : {}
+      ...surfaceHandled ? { surfaceHandled: true } : {},
+      // The down IS a hover-bearing fact: a touch's first event must seed the
+      // pointer's OverInteractive truth (no prior moves exist to).
+      overInteractive: surfaceHandled || gl.overInteractive === true
     });
   };
   const onPointerMove = (e) => {
     const id = pointerIdOf(e);
     const device = deviceOf(e);
     const { x, y } = relative(e.clientX, e.clientY);
-    const seen = live.get(id);
+    let seen = live.get(id);
+    if (seen === void 0 && e.buttons !== 0 && !crossesInteractive(e.target, container)) {
+      seen = { device, x, y, downX: x, downY: y, native: false, captured: false };
+      live.set(id, seen);
+    }
     if (seen !== void 0) {
       seen.x = x;
       seen.y = y;
@@ -417,7 +504,7 @@ function attachPointerAdapter(host, queue, opts = {}) {
         seen.captured = true;
       }
     }
-    const glHandled = glRoute?.("move", x, y, e) === true;
+    const gl = asVerdict(glRoute?.("move", x, y, e));
     queue.enqueue({
       kind: "move",
       pointerId: id,
@@ -427,7 +514,10 @@ function attachPointerAdapter(host, queue, opts = {}) {
       buttons: e.buttons,
       mods: pointerMods(e),
       tMs: e.timeStamp,
-      ...glHandled ? { surfaceHandled: true } : {}
+      ...gl.handled ? { surfaceHandled: true } : {},
+      // Hover fact, every move: DOM chain check ∪ GL verdict. A gl-captured
+      // move (island drag) counts — the widget owns the pointer right now.
+      overInteractive: crossesInteractive(e.target, container) || gl.handled || gl.overInteractive === true
     });
   };
   const endPointer = (kind) => (e) => {
@@ -441,7 +531,7 @@ function attachPointerAdapter(host, queue, opts = {}) {
       } catch {
       }
     }
-    const glHandled = glRoute?.(kind, x, y, e) === true;
+    const gl = asVerdict(glRoute?.(kind, x, y, e));
     queue.enqueue({
       kind,
       pointerId: id,
@@ -450,7 +540,9 @@ function attachPointerAdapter(host, queue, opts = {}) {
       screenY: y,
       buttons: e.buttons,
       mods: pointerMods(e),
-      ...glHandled ? { surfaceHandled: true } : {}
+      ...gl.handled ? { surfaceHandled: true } : {}
+      // No overInteractive stamp: a capture-retargeted up reads the container,
+      // not the content under the pointer — the next real move re-truths it.
     });
   };
   const onPointerUp = endPointer("up");
@@ -485,7 +577,7 @@ function attachPointerAdapter(host, queue, opts = {}) {
     }
     emitKeyIfChanged(e);
   };
-  const onBlur = () => {
+  const cancelAllInput = () => {
     for (const [id, s] of live) {
       queue.enqueue({ kind: "cancel", pointerId: id, device: s.device, screenX: s.x, screenY: s.y, buttons: 0, mods: { ...NO_MODS, space: spaceHeld } });
     }
@@ -504,6 +596,9 @@ function attachPointerAdapter(host, queue, opts = {}) {
       });
     }
   };
+  const onBlur = () => {
+    cancelAllInput();
+  };
   container.addEventListener("pointerdown", onPointerDown);
   container.addEventListener("pointermove", onPointerMove);
   container.addEventListener("pointerup", onPointerUp);
@@ -513,6 +608,7 @@ function attachPointerAdapter(host, queue, opts = {}) {
   view?.addEventListener("keyup", onKeyUp);
   view?.addEventListener("blur", onBlur);
   return () => {
+    cancelAllInput();
     container.removeEventListener("pointerdown", onPointerDown);
     container.removeEventListener("pointermove", onPointerMove);
     container.removeEventListener("pointerup", onPointerUp);
@@ -647,519 +743,6 @@ function createRemoteCursorsReflector(host, world) {
   };
 }
 
-// ../dom/src/reflectors/grid.ts
-var DEFAULT_GRID_CONFIG = {
-  spacings: [20, 100, 500],
-  dotColor: [0.75, 0.77, 0.8],
-  dotAlpha: 1,
-  fadeIn: [8, 16],
-  fadeOut: [120, 200],
-  dotRadius: [0.75, 0.75],
-  levelWeight: [1, 0]
-};
-var VERTEX_SHADER = (
-  /* glsl */
-  `
-attribute vec2 position;
-void main() {
-	gl_Position = vec4(position, 0.0, 1.0);
-}
-`
-);
-var FRAGMENT_SHADER = (
-  /* glsl */
-  `
-precision highp float;
-
-uniform vec2 u_resolution;    // device pixels
-uniform vec2 u_camera;        // world-space top-left
-uniform float u_zoom;         // CSS zoom
-uniform float u_dpr;          // device pixel ratio
-uniform vec3 u_spacings;      // world-unit grid spacings
-uniform vec3 u_dotColor;      // dot RGB
-uniform float u_dotAlpha;     // dot base alpha
-uniform vec2 u_fadeIn;        // CSS-px [start, end]
-uniform vec2 u_fadeOut;       // CSS-px [start, end]
-uniform vec2 u_dotRadius;     // CSS-px [min, max]
-uniform vec2 u_levelWeight;   // [base, step]
-
-void main() {
-	vec2 devicePos = gl_FragCoord.xy;
-	devicePos.y = u_resolution.y - devicePos.y;
-
-	float effectiveZoom = u_zoom * u_dpr;
-	vec2 worldPos = devicePos / effectiveZoom + u_camera;
-
-	float totalAlpha = 0.0;
-
-	for (int i = 0; i < 3; i++) {
-		float spacing;
-		if (i == 0) spacing = u_spacings.x;
-		else if (i == 1) spacing = u_spacings.y;
-		else spacing = u_spacings.z;
-
-		// Screen spacing in CSS pixels (DPR-independent for consistent fading)
-		float cssSpacing = spacing * u_zoom;
-
-		// Fade curve
-		float opacity = 0.0;
-		if (cssSpacing >= u_fadeIn.x && cssSpacing < u_fadeIn.y) {
-			opacity = (cssSpacing - u_fadeIn.x) / (u_fadeIn.y - u_fadeIn.x);
-		} else if (cssSpacing >= u_fadeIn.y && cssSpacing < u_fadeOut.x) {
-			opacity = 1.0;
-		} else if (cssSpacing >= u_fadeOut.x && cssSpacing < u_fadeOut.y) {
-			opacity = 1.0 - (cssSpacing - u_fadeOut.x) / (u_fadeOut.y - u_fadeOut.x);
-		}
-		if (opacity <= 0.001) continue;
-
-		// Distance to nearest grid intersection in device pixels
-		vec2 f = fract(worldPos / spacing + 0.5) - 0.5;
-		float dist = length(f) * spacing * effectiveZoom;
-
-		// Dot radius in device pixels \u2014 optionally grows for sparser levels
-		// (set u_dotRadius.x == u_dotRadius.y for Freeform/FigJam-style
-		// constant-size dots)
-		float t = clamp((cssSpacing - u_fadeIn.x) / 40.0, 0.0, 1.0);
-		float radius = mix(u_dotRadius.x, u_dotRadius.y, t) * u_dpr;
-
-		// Anti-aliased dot (0.5 device pixel smoothstep)
-		float dot = 1.0 - smoothstep(radius - 0.5, radius + 0.5, dist);
-
-		// Per-level weight: base + i * step. Step=0 keeps all levels at equal
-		// intensity; positive step emphasizes coarser levels (CAD feel).
-		float weight = u_levelWeight.x + float(i) * u_levelWeight.y;
-
-		// Composite with max, not sum. Additive compositing causes anti-
-		// aliased dot rims to stack at joint intersections (every N-th dot
-		// visibly fatter \u2014 a CAD tell). max() guarantees a joint intersection
-		// looks identical to a single-level dot, matching Freeform / FigJam.
-		totalAlpha = max(totalAlpha, dot * opacity * weight);
-	}
-
-	gl_FragColor = vec4(u_dotColor, clamp(totalAlpha * u_dotAlpha, 0.0, 1.0));
-}
-`
-);
-var FULLSCREEN_TRIANGLE = new Float32Array([-1, -1, 3, -1, -1, 3]);
-var UNIFORM_NAMES = [
-  "u_resolution",
-  "u_camera",
-  "u_zoom",
-  "u_dpr",
-  "u_spacings",
-  "u_dotColor",
-  "u_dotAlpha",
-  "u_fadeIn",
-  "u_fadeOut",
-  "u_dotRadius",
-  "u_levelWeight"
-];
-function compileShader(gl, type, source) {
-  const shader = gl.createShader(type);
-  if (shader === null) return null;
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  if (gl.getShaderParameter(shader, gl.COMPILE_STATUS) !== true) {
-    gl.deleteShader(shader);
-    return null;
-  }
-  return shader;
-}
-function linkProgram(gl) {
-  const vs = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
-  const fs = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
-  if (vs === null || fs === null) return null;
-  const program = gl.createProgram();
-  if (program === null) return null;
-  gl.attachShader(program, vs);
-  gl.attachShader(program, fs);
-  gl.linkProgram(program);
-  const linked = gl.getProgramParameter(program, gl.LINK_STATUS) === true;
-  gl.deleteShader(vs);
-  gl.deleteShader(fs);
-  if (!linked) {
-    gl.deleteProgram(program);
-    return null;
-  }
-  return program;
-}
-function setupGeometry(gl, program) {
-  const buffer = gl.createBuffer();
-  if (buffer === null) return false;
-  const loc = gl.getAttribLocation(program, "position");
-  if (loc < 0) return false;
-  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-  gl.bufferData(gl.ARRAY_BUFFER, FULLSCREEN_TRIANGLE, gl.STATIC_DRAW);
-  gl.enableVertexAttribArray(loc);
-  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
-  return true;
-}
-function collectUniforms(gl, program) {
-  const out = {};
-  for (const name of UNIFORM_NAMES) out[name] = gl.getUniformLocation(program, name);
-  return out;
-}
-function createGridReflector(host, opts = {}) {
-  const config = { ...DEFAULT_GRID_CONFIG, ...opts };
-  const doc = host.container.ownerDocument;
-  const canvas = doc.createElement("canvas");
-  canvas.style.position = "absolute";
-  canvas.style.left = "0";
-  canvas.style.top = "0";
-  canvas.style.width = "100%";
-  canvas.style.height = "100%";
-  canvas.style.display = "block";
-  canvas.style.pointerEvents = "none";
-  host.container.insertBefore(canvas, host.container.firstChild);
-  let gl = null;
-  let program = null;
-  let uniforms = null;
-  let dpr = 1;
-  let lastCamera = { x: 0, y: 0, zoom: 1 };
-  try {
-    const attrs = { alpha: true, antialias: false, premultipliedAlpha: false };
-    gl = canvas.getContext("webgl2", attrs) ?? canvas.getContext("webgl", attrs);
-    if (gl !== null) {
-      const prog = linkProgram(gl);
-      if (prog !== null && setupGeometry(gl, prog)) {
-        program = prog;
-        uniforms = collectUniforms(gl, prog);
-      } else {
-        gl = null;
-      }
-    }
-  } catch {
-    gl = null;
-    program = null;
-    uniforms = null;
-  }
-  function draw(camera) {
-    if (gl === null || program === null || uniforms === null) return;
-    lastCamera = camera;
-    gl.viewport(0, 0, canvas.width, canvas.height);
-    gl.useProgram(program);
-    gl.uniform2f(uniforms.u_resolution, canvas.width, canvas.height);
-    gl.uniform2f(uniforms.u_camera, camera.x, camera.y);
-    gl.uniform1f(uniforms.u_zoom, camera.zoom);
-    gl.uniform1f(uniforms.u_dpr, dpr);
-    gl.uniform3f(uniforms.u_spacings, ...config.spacings);
-    gl.uniform3f(uniforms.u_dotColor, ...config.dotColor);
-    gl.uniform1f(uniforms.u_dotAlpha, config.dotAlpha);
-    gl.uniform2f(uniforms.u_fadeIn, ...config.fadeIn);
-    gl.uniform2f(uniforms.u_fadeOut, ...config.fadeOut);
-    gl.uniform2f(uniforms.u_dotRadius, ...config.dotRadius);
-    gl.uniform2f(uniforms.u_levelWeight, ...config.levelWeight);
-    gl.clearColor(0, 0, 0, 0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    gl.drawArrays(gl.TRIANGLES, 0, 3);
-  }
-  function applySize(cssWidth, cssHeight) {
-    dpr = doc.defaultView?.devicePixelRatio ?? 1;
-    const bufW = Math.max(1, Math.round(cssWidth * dpr));
-    const bufH = Math.max(1, Math.round(cssHeight * dpr));
-    if (canvas.width !== bufW) canvas.width = bufW;
-    if (canvas.height !== bufH) canvas.height = bufH;
-    try {
-      draw(lastCamera);
-    } catch {
-      gl = null;
-      program = null;
-      uniforms = null;
-    }
-  }
-  const initialRect = host.container.getBoundingClientRect();
-  applySize(initialRect.width, initialRect.height);
-  let ro;
-  try {
-    ro = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry === void 0) return;
-      applySize(entry.contentRect.width, entry.contentRect.height);
-    });
-    ro.observe(host.container);
-  } catch {
-  }
-  return {
-    name: "grid",
-    observe: { resources: [Camera] },
-    flush(world) {
-      if (gl === null) return;
-      const camera = world.getResource(Camera);
-      if (camera === void 0) return;
-      try {
-        draw(camera);
-      } catch {
-        gl = null;
-        program = null;
-        uniforms = null;
-      }
-    },
-    available: () => gl !== null,
-    // Live re-tune (theme switches, settings panels): draw() uploads every
-    // config uniform per call, so a merge + one redraw at the last camera is
-    // the whole story. Outside the frame contract by design — config is host
-    // input, not world state (same class as the RO resize path).
-    configure(next) {
-      Object.assign(config, next);
-      if (gl !== null) {
-        try {
-          draw(lastCamera);
-        } catch {
-          gl = null;
-          program = null;
-          uniforms = null;
-        }
-      }
-    },
-    // Unregistering a reflector only stops its flushes — the canvas this
-    // factory inserted (and its ResizeObserver) must be torn down explicitly,
-    // or a React StrictMode remount stacks a second frozen grid under the
-    // live one (field report 2026-07-11).
-    dispose() {
-      ro?.disconnect();
-      gl = null;
-      program = null;
-      uniforms = null;
-      canvas.remove();
-    }
-  };
-}
-
-// ../dom/src/reflectors/wires.ts
-var INACTIVE_PREVIEW = { sx: 0, sy: 0, tx: 0, ty: 0, active: false, compatible: false };
-var DEFAULT_WIRES_CONFIG = {
-  wireColor: "rgba(120, 132, 145, 0.9)",
-  selectedColor: "#4a90d9",
-  wireWidth: 1.5,
-  selectedWidth: 2,
-  portRadius: 4,
-  portColor: "rgba(120, 132, 145, 0.9)",
-  portActiveColor: "#4a90d9"
-};
-var wireQ = defineQuery([Wire]);
-var geometryQ = defineQuery([Position, Size]);
-var selectedQ = defineQuery([Selected]);
-var portQ = defineQuery([Port, PortAnchor]);
-var routedConnectQ = defineQuery([RoutedConnect]);
-function readRect(world, e) {
-  const p = world.get(e, Position);
-  if (p === void 0) return void 0;
-  const measured = world.get(e, MeasuredSize);
-  const s = measured !== void 0 && measured.w > 0 ? measured : world.get(e, Size);
-  if (s === void 0) return void 0;
-  return { x: p.x, y: p.y, width: s.w, height: s.h };
-}
-function makePortSlotResolver() {
-  const cache = /* @__PURE__ */ new Map();
-  const build = (wt) => {
-    const bySide = /* @__PURE__ */ new Map();
-    for (const d of wt.ports) {
-      let list = bySide.get(d.side);
-      if (list === void 0) {
-        list = [];
-        bySide.set(d.side, list);
-      }
-      list.push(d);
-    }
-    const out = /* @__PURE__ */ new Map();
-    for (const [side, list] of bySide) {
-      for (let i = 0; i < list.length; i++) {
-        const d = list[i];
-        if (d === void 0) continue;
-        out.set(d.id, { side, index: d.index ?? i, count: list.length });
-      }
-    }
-    return out;
-  };
-  return (wt, portId) => {
-    let slots = cache.get(wt.type);
-    if (slots === void 0) {
-      slots = build(wt);
-      cache.set(wt.type, slots);
-    }
-    return slots.get(portId);
-  };
-}
-function cubicToScreen(c, cam) {
-  const p0 = worldToScreen(c.x0, c.y0, cam);
-  const p1 = worldToScreen(c.x1, c.y1, cam);
-  const p2 = worldToScreen(c.x2, c.y2, cam);
-  const p3 = worldToScreen(c.x3, c.y3, cam);
-  return { x0: p0.x, y0: p0.y, x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, x3: p3.x, y3: p3.y };
-}
-function createWiresReflector(host, world, opts = {}) {
-  const config = { ...DEFAULT_WIRES_CONFIG, ...opts.config };
-  const readPreview = opts.readPreview ?? (() => INACTIVE_PREVIEW);
-  const doc = host.container.ownerDocument;
-  const canvas = doc.createElement("canvas");
-  canvas.style.position = "absolute";
-  canvas.style.left = "0";
-  canvas.style.top = "0";
-  canvas.style.width = "100%";
-  canvas.style.height = "100%";
-  canvas.style.display = "block";
-  canvas.style.pointerEvents = "none";
-  host.container.insertBefore(canvas, host.contentPlane);
-  let ctx = null;
-  try {
-    ctx = canvas.getContext("2d");
-  } catch {
-    ctx = null;
-  }
-  let dpr = 1;
-  const slotOf = makePortSlotResolver();
-  let dirty = true;
-  let lastPreviewKey = "";
-  let redraws = 0;
-  const wake = () => {
-    dirty = true;
-  };
-  const unsubs = [
-    world.reactive.observeResource(Camera, wake),
-    world.reactive.observeQuery(wireQ, wake, { cols: [] }),
-    world.reactive.observeQuery(geometryQ, wake, { cols: [Position, Size] }),
-    world.reactive.observeQuery(selectedQ, wake, { cols: [] }),
-    world.reactive.observeQuery(portQ, wake, { cols: [PortAnchor] }),
-    world.reactive.observeQuery(routedConnectQ, wake, { cols: [] })
-  ];
-  function applySize(cssWidth, cssHeight) {
-    dpr = doc.defaultView?.devicePixelRatio ?? 1;
-    const bufW = Math.max(1, Math.round(cssWidth * dpr));
-    const bufH = Math.max(1, Math.round(cssHeight * dpr));
-    if (canvas.width !== bufW) canvas.width = bufW;
-    if (canvas.height !== bufH) canvas.height = bufH;
-    dirty = true;
-  }
-  const initialRect = host.container.getBoundingClientRect();
-  applySize(initialRect.width, initialRect.height);
-  let ro = null;
-  try {
-    ro = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry === void 0) return;
-      applySize(entry.contentRect.width, entry.contentRect.height);
-    });
-    ro.observe(host.container);
-  } catch {
-    ro = null;
-  }
-  function strokeCubic(c2d, s) {
-    c2d.beginPath();
-    c2d.moveTo(s.x0, s.y0);
-    c2d.bezierCurveTo(s.x1, s.y1, s.x2, s.y2, s.x3, s.y3);
-    c2d.stroke();
-  }
-  function endpointAnchor(widget, portId) {
-    if (widget === void 0) return void 0;
-    const rect = readRect(world, widget);
-    if (rect === void 0) return void 0;
-    const type = world.get(widget, PrefabId)?.id;
-    if (typeof type !== "string") return void 0;
-    const wt = widgets.get(type);
-    if (wt === void 0) return void 0;
-    const slot = slotOf(wt, portId);
-    if (slot === void 0) return void 0;
-    return { anchor: rect, slot };
-  }
-  function drawWires(c2d, cam) {
-    world.query(wireQ).each((batch) => {
-      for (const r of batch) {
-        const wire = batch.entity(r);
-        const ports = world.get(wire, WirePorts);
-        if (ports === void 0) continue;
-        const from = endpointAnchor(world.getRelation(wire, WireFrom), ports.from ?? "");
-        const to = endpointAnchor(world.getRelation(wire, WireTo), ports.to ?? "");
-        if (from === void 0 || to === void 0) continue;
-        const a0 = portAnchor(from.anchor, from.slot);
-        const a1 = portAnchor(to.anchor, to.slot);
-        const cubic = wireCubic(a0, from.slot.side, a1, to.slot.side);
-        const selected = world.hasTag(wire, Selected);
-        c2d.strokeStyle = selected ? config.selectedColor : config.wireColor;
-        c2d.lineWidth = selected ? config.selectedWidth : config.wireWidth;
-        c2d.setLineDash([]);
-        strokeCubic(c2d, cubicToScreen(cubic, cam));
-      }
-    });
-  }
-  function drawPreview(c2d, cam, preview) {
-    if (!preview.active) return;
-    const stub = Math.max(24, Math.abs(preview.tx - preview.sx) * 0.5);
-    const cubic = {
-      x0: preview.sx,
-      y0: preview.sy,
-      x1: preview.sx + stub,
-      y1: preview.sy,
-      x2: preview.tx - stub,
-      y2: preview.ty,
-      x3: preview.tx,
-      y3: preview.ty
-    };
-    c2d.strokeStyle = preview.compatible ? config.selectedColor : config.wireColor;
-    c2d.lineWidth = config.wireWidth;
-    c2d.setLineDash(preview.compatible ? [] : [6, 4]);
-    strokeCubic(c2d, cubicToScreen(cubic, cam));
-    c2d.setLineDash([]);
-  }
-  function drawPorts(c2d, cam) {
-    const connecting = world.firstOf(routedConnectQ) !== void 0;
-    c2d.fillStyle = connecting ? config.portActiveColor : config.portColor;
-    world.query(portQ).each((batch) => {
-      const ax = batch.col(PortAnchor).x;
-      const ay = batch.col(PortAnchor).y;
-      for (const r of batch) {
-        const s = worldToScreen(ax[r], ay[r], cam);
-        c2d.beginPath();
-        c2d.arc(s.x, s.y, config.portRadius, 0, Math.PI * 2);
-        c2d.fill();
-      }
-    });
-  }
-  function redraw(c2d, cam, preview) {
-    c2d.setTransform(1, 0, 0, 1, 0, 0);
-    c2d.clearRect(0, 0, canvas.width, canvas.height);
-    c2d.setTransform(dpr, 0, 0, dpr, 0, 0);
-    redraws++;
-    drawWires(c2d, cam);
-    drawPreview(c2d, cam, preview);
-    drawPorts(c2d, cam);
-  }
-  return {
-    name: "wires",
-    // The preview buffer has no ECS stamp; self-gate on a private dirty flag
-    // (chrome/dom-widgets pattern) rather than the registry's observe dirt.
-    always: true,
-    flush(w) {
-      if (ctx === null) return;
-      const cam = w.getResource(Camera);
-      if (cam === void 0) return;
-      const preview = readPreview();
-      const previewKey = preview.active ? `${preview.sx},${preview.sy},${preview.tx},${preview.ty},${preview.compatible ? 1 : 0}` : "";
-      if (previewKey !== lastPreviewKey) {
-        lastPreviewKey = previewKey;
-        dirty = true;
-      }
-      if (!dirty) return;
-      dirty = false;
-      try {
-        redraw(ctx, cam, preview);
-      } catch {
-        ctx = null;
-      }
-    },
-    available: () => ctx !== null,
-    redraws: () => redraws,
-    dispose() {
-      for (const u of unsubs) u();
-      unsubs.length = 0;
-      ro?.disconnect();
-      ro = null;
-      canvas.remove();
-    }
-  };
-}
-
 // ../dom/src/reflectors/chrome.ts
 var HANDLE_DRAW_PX = 8;
 var boxQ = defineQuery([SelectionBox]);
@@ -1219,7 +802,7 @@ function createChromeReflector(host, _world, marqueeBuffer) {
           const tl = worldToScreen(bx[r], by[r], cam);
           const sw = bw[r] * cam.zoom;
           const sh = bh[r] * cam.zoom;
-          const key = `${tl.x}:${tl.y}:${sw}:${sh}`;
+          const key = `${tl.x}:${tl.y}:${sw}:${sh}:${cam.zoom}`;
           let node = boxNodes.get(e);
           if (node === void 0) {
             node = makeNode(doc, { border: "1px solid #4a90d9" });
@@ -1229,6 +812,7 @@ function createChromeReflector(host, _world, marqueeBuffer) {
           }
           if (boxCache.get(e) !== key) {
             writeRect(node, tl.x, tl.y, sw, sh);
+            node.style.borderRadius = `calc(var(--ic-selection-radius, 0px) * ${cam.zoom})`;
             boxCache.set(e, key);
           }
         }
@@ -1361,8 +945,7 @@ function attachMeasureAdapter(hostFor, queue) {
 
 // ../dom/src/measure-wiring.ts
 function defaultMeasure(el) {
-  const rect = el.getBoundingClientRect();
-  return { w: rect.width, h: rect.height };
+  return { w: el.offsetWidth, h: el.offsetHeight };
 }
 function wireMeasurement(store, hosts, queue, opts = {}) {
   const adapter = attachMeasureAdapter((e) => hosts.hostFor(e), queue);
@@ -1434,13 +1017,9 @@ export {
   attachPointerAdapter,
   createCursorReflector,
   createRemoteCursorsReflector,
-  DEFAULT_GRID_CONFIG,
-  createGridReflector,
-  DEFAULT_WIRES_CONFIG,
-  createWiresReflector,
   createChromeReflector,
   attachMeasureAdapter,
   wireMeasurement,
   DOM_VERSION
 };
-//# sourceMappingURL=chunk-FIAXPNNY.js.map
+//# sourceMappingURL=chunk-IASTQMU5.js.map