@vibecook/ice 0.1.0

package/dist/chunk-FIAXPNNY.js

@@ -0,0 +1,1446 @@
+import {
+  Camera,
+  CursorVisual,
+  Follows,
+  Grab,
+  HandleSpec,
+  MeasuredSize,
+  NO_MODS,
+  Port,
+  PortAnchor,
+  Position,
+  PrefabId,
+  PresenceInfo,
+  RoutedConnect,
+  Selected,
+  SelectionBox,
+  Size,
+  Wire,
+  WireFrom,
+  WirePorts,
+  WireTo,
+  defineQuery,
+  widgets
+} from "./chunk-5S7GSXJG.js";
+import {
+  planeCssTransform,
+  portAnchor,
+  wireCubic,
+  worldToScreen
+} from "./chunk-BCJ47SX7.js";
+
+// ../dom/src/host.ts
+var CONTAINER_STYLE = {
+  overflow: "hidden",
+  touchAction: "none",
+  userSelect: "none"
+};
+var PLANE_STYLE = {
+  position: "absolute",
+  left: "0",
+  top: "0",
+  transformOrigin: "0 0",
+  willChange: "transform"
+};
+function createCanvasHost(container) {
+  const view = container.ownerDocument.defaultView;
+  const position = container.style.position !== "" ? container.style.position : view?.getComputedStyle(container).position ?? "";
+  const promoteToRelative = position === "" || position === "static";
+  if (promoteToRelative) container.style.position = "relative";
+  Object.assign(container.style, CONTAINER_STYLE);
+  const contentPlane = container.ownerDocument.createElement("div");
+  Object.assign(contentPlane.style, PLANE_STYLE);
+  container.appendChild(contentPlane);
+  return {
+    container,
+    contentPlane,
+    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()}`)
+        );
+      }
+    }
+  };
+}
+
+// ../dom/src/planes.ts
+var LIFTED_PLANE_STYLE = {
+  position: "absolute",
+  left: "0",
+  top: "0",
+  transformOrigin: "0 0",
+  willChange: "transform"
+};
+function createPlanes(host) {
+  const lifted = host.container.ownerDocument.createElement("div");
+  Object.assign(lifted.style, LIFTED_PLANE_STYLE);
+  host.container.appendChild(lifted);
+  return {
+    content: host.contentPlane,
+    lifted,
+    // Without this a React StrictMode remount stacks a second P3
+    // (2026-07-11 reflector-teardown sweep, with the grid-canvas fix).
+    dispose() {
+      lifted.remove();
+    }
+  };
+}
+
+// ../dom/src/reflectors/plane-transform.ts
+function createPlaneTransformReflector(host) {
+  let writes = 0;
+  return {
+    name: "plane-transform",
+    observe: { resources: [Camera] },
+    flush(world) {
+      const camera = world.getResource(Camera);
+      if (camera === void 0) return;
+      const { tx, ty, scale } = planeCssTransform(camera);
+      const transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
+      host.contentPlane.style.transform = transform;
+      if (host.liftedPlane !== void 0) host.liftedPlane.style.transform = transform;
+      writes++;
+    },
+    transformWrites: () => writes
+  };
+}
+
+// ../dom/src/reflectors/graybox.ts
+var grayboxQuery = defineQuery([Position, Size]);
+function fillFor(entity) {
+  const n = entity;
+  const hash = (Math.imul(n, 2654435761) >>> 0) % 360;
+  return `hsl(${hash}, 55%, 55%)`;
+}
+function writeGeom(div, x, y, w, h) {
+  div.style.left = `${x}px`;
+  div.style.top = `${y}px`;
+  div.style.width = `${w}px`;
+  div.style.height = `${h}px`;
+}
+function createGrayboxReflector(host) {
+  const divs = /* @__PURE__ */ new Map();
+  const geom = /* @__PURE__ */ new Map();
+  const seen = /* @__PURE__ */ new Set();
+  const doc = host.container.ownerDocument;
+  let styleWrites = 0;
+  return {
+    name: "graybox",
+    observe: { queries: [{ q: grayboxQuery, cols: [Position, Size] }] },
+    flush(world) {
+      seen.clear();
+      let fragment = null;
+      world.query(grayboxQuery).each((batch) => {
+        const px = batch.col(Position).x;
+        const py = batch.col(Position).y;
+        const sw = batch.col(Size).w;
+        const sh = batch.col(Size).h;
+        for (const r of batch) {
+          const entity = batch.entity(r);
+          seen.add(entity);
+          const x = px[r];
+          const y = py[r];
+          const w = sw[r];
+          const h = sh[r];
+          const existing = divs.get(entity);
+          if (existing === void 0) {
+            const div = doc.createElement("div");
+            div.style.position = "absolute";
+            div.style.background = fillFor(entity);
+            writeGeom(div, x, y, w, h);
+            styleWrites++;
+            divs.set(entity, div);
+            geom.set(entity, { x, y, w, h });
+            if (fragment === null) fragment = doc.createDocumentFragment();
+            fragment.appendChild(div);
+            continue;
+          }
+          const prev = geom.get(entity);
+          if (prev === void 0) {
+            writeGeom(existing, x, y, w, h);
+            styleWrites++;
+            geom.set(entity, { x, y, w, h });
+          } else if (prev.x !== x || prev.y !== y || prev.w !== w || prev.h !== h) {
+            writeGeom(existing, x, y, w, h);
+            styleWrites++;
+            prev.x = x;
+            prev.y = y;
+            prev.w = w;
+            prev.h = h;
+          }
+        }
+      });
+      if (fragment !== null) host.contentPlane.appendChild(fragment);
+      for (const [entity, div] of divs) {
+        if (seen.has(entity)) continue;
+        div.remove();
+        divs.delete(entity);
+        geom.delete(entity);
+      }
+    },
+    styleWrites: () => styleWrites,
+    nodeCount: () => divs.size
+  };
+}
+
+// ../dom/src/reflectors/dom-widgets.ts
+var geometryQuery = defineQuery([Position, Size]);
+var measuredQuery = defineQuery([MeasuredSize]);
+var grabQuery = defineQuery([Grab]);
+function writeGeom2(el, x, y, w, h) {
+  el.style.left = `${x}px`;
+  el.style.top = `${y}px`;
+  el.style.width = `${w}px`;
+  el.style.height = `${h}px`;
+}
+function createDomWidgetsReflector(host, world, store) {
+  const doc = host.contentPlane.ownerDocument;
+  const hosts = /* @__PURE__ */ new Map();
+  let lastSnapshot;
+  let geometryWrites = 0;
+  let inert = false;
+  let geometryDirty = false;
+  let promoteDirty = false;
+  const unsubs = [
+    world.reactive.observeQuery(geometryQuery, () => {
+      geometryDirty = true;
+    }, { cols: [Position, Size] }),
+    // MeasuredSize rides its own observer: adding it to geometryQuery's cols
+    // would require it in the query and drop widgets without the rider.
+    world.reactive.observeQuery(measuredQuery, () => {
+      geometryDirty = true;
+    }, { cols: [MeasuredSize] }),
+    world.reactive.observeQuery(grabQuery, () => {
+      promoteDirty = true;
+    }, { cols: [] })
+  ];
+  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 createHost(e) {
+    const el = doc.createElement("div");
+    el.style.position = "absolute";
+    el.setAttribute("data-ice-entity", String(e));
+    const content = doc.createElement("div");
+    content.setAttribute("data-ice-content", "");
+    content.style.width = "100%";
+    content.style.height = "100%";
+    el.appendChild(content);
+    const g = readGeom(e);
+    writeGeom2(el, g.x, g.y, g.w, g.h);
+    geometryWrites++;
+    const lifted = world.has(e, Grab);
+    (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 };
+  }
+  function reconcile(snapshot) {
+    let membershipChanged = false;
+    const present = /* @__PURE__ */ new Set();
+    for (const entry of snapshot) {
+      present.add(entry.entity);
+      let rec = hosts.get(entry.entity);
+      if (rec === void 0) {
+        rec = createHost(entry.entity);
+        hosts.set(entry.entity, rec);
+        membershipChanged = true;
+      }
+      if (entry.hidden !== rec.hidden) {
+        rec.hidden = entry.hidden;
+        rec.host.style.display = entry.hidden ? "none" : "";
+      }
+    }
+    for (const [e, rec] of hosts) {
+      if (present.has(e)) continue;
+      rec.host.remove();
+      hosts.delete(e);
+      membershipChanged = true;
+    }
+    return membershipChanged;
+  }
+  function updateGeometry() {
+    for (const [e, rec] of hosts) {
+      const g = readGeom(e);
+      if (g.x !== rec.x || g.y !== rec.y || g.w !== rec.w || g.h !== rec.h) {
+        writeGeom2(rec.host, g.x, g.y, g.w, g.h);
+        rec.x = g.x;
+        rec.y = g.y;
+        rec.w = g.w;
+        rec.h = g.h;
+        geometryWrites++;
+      }
+    }
+  }
+  function updatePromote() {
+    let anyLifted = false;
+    for (const [e, rec] of hosts) {
+      const shouldLift = world.has(e, Grab);
+      if (shouldLift) anyLifted = true;
+      if (shouldLift !== rec.lifted) {
+        rec.lifted = shouldLift;
+        (shouldLift ? host.liftedPlane : host.contentPlane).appendChild(rec.host);
+      }
+    }
+    if (anyLifted !== inert) {
+      inert = anyLifted;
+      host.contentPlane.style.pointerEvents = inert ? "none" : "";
+      host.liftedPlane.style.pointerEvents = inert ? "none" : "";
+    }
+  }
+  return {
+    name: "domWidgets",
+    always: true,
+    // store membership has no ECS stamp; the flush self-gates cheaply
+    flush(_world) {
+      const snapshot = store.getSnapshot();
+      let membershipChanged = false;
+      if (snapshot !== lastSnapshot) {
+        lastSnapshot = snapshot;
+        membershipChanged = reconcile(snapshot);
+      }
+      if (geometryDirty) {
+        geometryDirty = false;
+        updateGeometry();
+      }
+      if (promoteDirty || membershipChanged) {
+        promoteDirty = false;
+        updatePromote();
+      }
+    },
+    hostFor: (entity) => hosts.get(entity)?.content,
+    hostCount: () => hosts.size,
+    geometryWrites: () => geometryWrites,
+    dispose() {
+      for (const u of unsubs) u();
+      unsubs.length = 0;
+    }
+  };
+}
+
+// ../dom/src/loop.ts
+function startRafLoop(engine) {
+  let handle = 0;
+  let stopped = false;
+  const tick = (now) => {
+    if (stopped) return;
+    engine.step(now);
+    handle = requestAnimationFrame(tick);
+  };
+  handle = requestAnimationFrame(tick);
+  return () => {
+    stopped = true;
+    cancelAnimationFrame(handle);
+  };
+}
+
+// ../dom/src/pointer-adapter.ts
+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) {
+  if (!(target instanceof Element)) return false;
+  const match = target.closest(INTERACTIVE_SELECTOR);
+  return match !== null && container.contains(match);
+}
+function pointerIdOf(e) {
+  if (e.pointerType === "touch") return `touch:${e.pointerId}`;
+  if (e.pointerType === "pen") return "pen";
+  return "mouse";
+}
+function deviceOf(e) {
+  if (e.pointerType === "touch") return "touch";
+  if (e.pointerType === "pen") return "pen";
+  return "mouse";
+}
+function attachPointerAdapter(host, queue, opts = {}) {
+  const { container } = host;
+  const view = container.ownerDocument.defaultView;
+  const { glRoute } = opts;
+  let spaceHeld = false;
+  const live = /* @__PURE__ */ new Map();
+  const CAPTURE_SLOP_PX = 4;
+  const capture = (pointerId) => {
+    if (typeof container.setPointerCapture !== "function") return;
+    try {
+      container.setPointerCapture(pointerId);
+    } catch {
+    }
+  };
+  let lastMods = { shift: false, ctrl: false, alt: false, meta: false, space: false };
+  const relative = (clientX, clientY) => {
+    const rect = container.getBoundingClientRect();
+    return { x: clientX - rect.left, y: clientY - rect.top };
+  };
+  const pointerMods = (e) => ({
+    shift: e.shiftKey,
+    ctrl: e.ctrlKey,
+    alt: e.altKey,
+    meta: e.metaKey,
+    space: spaceHeld
+  });
+  const onPointerDown = (e) => {
+    const id = pointerIdOf(e);
+    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;
+    live.set(id, { device, x, y, downX: x, downY: y, native, captured: glClaimed });
+    if (glClaimed) capture(e.pointerId);
+    const surfaceHandled = native || glClaimed;
+    queue.enqueue({
+      kind: "down",
+      pointerId: id,
+      device,
+      screenX: x,
+      screenY: y,
+      buttons: e.buttons,
+      mods: pointerMods(e),
+      tMs: e.timeStamp,
+      ...surfaceHandled ? { surfaceHandled: 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);
+    if (seen !== void 0) {
+      seen.x = x;
+      seen.y = y;
+      if (!seen.captured && !seen.native && e.buttons !== 0 && Math.hypot(x - seen.downX, y - seen.downY) > CAPTURE_SLOP_PX) {
+        capture(e.pointerId);
+        seen.captured = true;
+      }
+    }
+    const glHandled = glRoute?.("move", x, y, e) === true;
+    queue.enqueue({
+      kind: "move",
+      pointerId: id,
+      device,
+      screenX: x,
+      screenY: y,
+      buttons: e.buttons,
+      mods: pointerMods(e),
+      tMs: e.timeStamp,
+      ...glHandled ? { surfaceHandled: true } : {}
+    });
+  };
+  const endPointer = (kind) => (e) => {
+    const id = pointerIdOf(e);
+    const device = deviceOf(e);
+    const { x, y } = relative(e.clientX, e.clientY);
+    live.delete(id);
+    if (typeof container.releasePointerCapture === "function") {
+      try {
+        container.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+    }
+    const glHandled = glRoute?.(kind, x, y, e) === true;
+    queue.enqueue({
+      kind,
+      pointerId: id,
+      device,
+      screenX: x,
+      screenY: y,
+      buttons: e.buttons,
+      mods: pointerMods(e),
+      ...glHandled ? { surfaceHandled: true } : {}
+    });
+  };
+  const onPointerUp = endPointer("up");
+  const onPointerCancel = endPointer("cancel");
+  const onWheel = (e) => {
+    e.preventDefault();
+    const { x, y } = relative(e.clientX, e.clientY);
+    const scale = e.deltaMode === 1 ? WHEEL_LINE_PX : 1;
+    const wheel = e.ctrlKey ? { dx: 0, dy: 0, pinch: e.deltaY } : { dx: e.deltaX * scale, dy: e.deltaY * scale, pinch: 0 };
+    queue.enqueue({ kind: "wheel", pointerId: "mouse", device: "mouse", screenX: x, screenY: y, buttons: e.buttons, mods: pointerMods(e), wheel });
+  };
+  const emitKeyIfChanged = (e) => {
+    const mods = { shift: e.shiftKey, ctrl: e.ctrlKey, alt: e.altKey, meta: e.metaKey, space: spaceHeld };
+    if (mods.shift === lastMods.shift && mods.ctrl === lastMods.ctrl && mods.alt === lastMods.alt && mods.meta === lastMods.meta && mods.space === lastMods.space) {
+      return;
+    }
+    lastMods = { ...mods };
+    queue.enqueue({ kind: "key", pointerId: "", device: "mouse", screenX: 0, screenY: 0, buttons: 0, mods });
+  };
+  const isSpace = (e) => e.key === " " || e.code === "Space";
+  const onKeyDown = (e) => {
+    if (isSpace(e)) {
+      e.preventDefault();
+      spaceHeld = true;
+    }
+    emitKeyIfChanged(e);
+  };
+  const onKeyUp = (e) => {
+    if (isSpace(e)) {
+      e.preventDefault();
+      spaceHeld = false;
+    }
+    emitKeyIfChanged(e);
+  };
+  const onBlur = () => {
+    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 } });
+    }
+    live.clear();
+    spaceHeld = false;
+    if (lastMods.space || lastMods.shift || lastMods.ctrl || lastMods.alt || lastMods.meta) {
+      lastMods = { ...NO_MODS };
+      queue.enqueue({
+        kind: "key",
+        pointerId: "",
+        device: "mouse",
+        screenX: 0,
+        screenY: 0,
+        buttons: 0,
+        mods: { ...NO_MODS }
+      });
+    }
+  };
+  container.addEventListener("pointerdown", onPointerDown);
+  container.addEventListener("pointermove", onPointerMove);
+  container.addEventListener("pointerup", onPointerUp);
+  container.addEventListener("pointercancel", onPointerCancel);
+  container.addEventListener("wheel", onWheel, { passive: false });
+  view?.addEventListener("keydown", onKeyDown);
+  view?.addEventListener("keyup", onKeyUp);
+  view?.addEventListener("blur", onBlur);
+  return () => {
+    container.removeEventListener("pointerdown", onPointerDown);
+    container.removeEventListener("pointermove", onPointerMove);
+    container.removeEventListener("pointerup", onPointerUp);
+    container.removeEventListener("pointercancel", onPointerCancel);
+    container.removeEventListener("wheel", onWheel);
+    view?.removeEventListener("keydown", onKeyDown);
+    view?.removeEventListener("keyup", onKeyUp);
+    view?.removeEventListener("blur", onBlur);
+  };
+}
+
+// ../dom/src/reflectors/cursor.ts
+function createCursorReflector(host, readCursor) {
+  let writes = 0;
+  let last;
+  return {
+    name: "cursor",
+    always: true,
+    flush(_world) {
+      const next = readCursor();
+      if (next === last) return;
+      last = next;
+      host.container.style.cursor = next;
+      writes++;
+    },
+    writes: () => writes
+  };
+}
+
+// ../dom/src/reflectors/remote-cursors.ts
+var remoteCursorQ = defineQuery([Position, CursorVisual]);
+function createRemoteCursorsReflector(host, world) {
+  const doc = host.container.ownerDocument;
+  const plane = doc.createElement("div");
+  Object.assign(plane.style, {
+    position: "absolute",
+    inset: "0",
+    overflow: "hidden",
+    pointerEvents: "none"
+  });
+  host.container.appendChild(plane);
+  const pool = /* @__PURE__ */ new Map();
+  const ensure = (e) => {
+    let n = pool.get(e);
+    if (n !== void 0) return n;
+    const root = doc.createElement("div");
+    Object.assign(root.style, {
+      position: "absolute",
+      left: "0",
+      top: "0",
+      willChange: "transform",
+      pointerEvents: "none"
+    });
+    const arrow = doc.createElement("div");
+    Object.assign(arrow.style, {
+      width: "0",
+      height: "0",
+      borderLeft: "6px solid transparent",
+      borderRight: "6px solid transparent",
+      borderBottom: "14px solid currentColor",
+      transform: "rotate(-32deg)"
+    });
+    const label = doc.createElement("div");
+    Object.assign(label.style, {
+      marginTop: "2px",
+      marginLeft: "8px",
+      padding: "1px 6px",
+      borderRadius: "8px",
+      font: "11px system-ui, sans-serif",
+      color: "#fff",
+      whiteSpace: "nowrap"
+    });
+    root.appendChild(arrow);
+    root.appendChild(label);
+    plane.appendChild(root);
+    n = { root, label, color: "", name: "", x: Number.NaN, y: Number.NaN };
+    pool.set(e, n);
+    return n;
+  };
+  const reflector = {
+    name: "remoteCursors",
+    observe: {
+      resources: [Camera],
+      queries: [{ q: remoteCursorQ, cols: [Position, CursorVisual] }]
+    },
+    flush: (w) => {
+      const cam = w.getResource(Camera) ?? { x: 0, y: 0, zoom: 1 };
+      const seen = /* @__PURE__ */ new Set();
+      w.query(remoteCursorQ).each((b) => {
+        for (const r of b) {
+          const e = b.entity(r);
+          if (w.get(e, CursorVisual)?.kind !== "remote") continue;
+          seen.add(e);
+          const p = w.read(e, Position);
+          const s = worldToScreen(p.x, p.y, cam);
+          const n = ensure(e);
+          if (n.x !== s.x || n.y !== s.y) {
+            n.root.style.transform = `translate(${s.x}px, ${s.y}px)`;
+            n.x = s.x;
+            n.y = s.y;
+          }
+          const peer = w.getRelation(e, Follows);
+          const info = peer !== void 0 ? w.get(peer, PresenceInfo) : void 0;
+          const color = info?.color ?? "#7a8aa0";
+          const name = info?.name ?? "";
+          if (n.color !== color) {
+            n.root.style.color = color;
+            n.label.style.background = color;
+            n.color = color;
+          }
+          if (n.name !== name) {
+            n.label.textContent = name;
+            n.label.style.display = name === "" ? "none" : "block";
+            n.name = name;
+          }
+        }
+      });
+      for (const [e, n] of pool) {
+        if (!seen.has(e)) {
+          n.root.remove();
+          pool.delete(e);
+        }
+      }
+    }
+  };
+  return {
+    reflector,
+    destroy() {
+      pool.clear();
+      plane.remove();
+    }
+  };
+}
+
+// ../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]);
+var handleQ = defineQuery([HandleSpec, Position, Size]);
+function makeNode(doc, extra) {
+  const node = doc.createElement("div");
+  Object.assign(node.style, { position: "absolute", boxSizing: "border-box", pointerEvents: "none" }, extra);
+  return node;
+}
+function createChromeReflector(host, _world, marqueeBuffer) {
+  const doc = host.container.ownerDocument;
+  const plane = makeNode(doc, { left: "0", top: "0", width: "0", height: "0" });
+  host.container.appendChild(plane);
+  const boxNodes = /* @__PURE__ */ new Map();
+  const handleNodes = /* @__PURE__ */ new Map();
+  let marqueeNode = null;
+  const boxCache = /* @__PURE__ */ new Map();
+  const handleCache = /* @__PURE__ */ new Map();
+  let marqueeCache = null;
+  let drewLast = false;
+  const seenBox = /* @__PURE__ */ new Set();
+  const seenHandle = /* @__PURE__ */ new Set();
+  let writes = 0;
+  const writeRect = (node, left, top, w, h) => {
+    node.style.left = `${left}px`;
+    node.style.top = `${top}px`;
+    node.style.width = `${w}px`;
+    node.style.height = `${h}px`;
+    writes++;
+  };
+  return {
+    name: "chrome",
+    always: true,
+    observe: {
+      queries: [
+        { q: boxQ, cols: [SelectionBox] },
+        { q: handleQ, cols: [Position, Size] }
+      ],
+      resources: [Camera]
+    },
+    flush(w) {
+      const cam = w.getResource(Camera);
+      if (cam === void 0) return;
+      const marqueeRect = marqueeBuffer.rect;
+      const hasContent = marqueeRect !== null || w.firstOf(boxQ) !== void 0 || w.firstOf(handleQ) !== void 0;
+      if (!hasContent && !drewLast) return;
+      seenBox.clear();
+      seenHandle.clear();
+      w.query(boxQ).each((batch) => {
+        const bx = batch.col(SelectionBox).x;
+        const by = batch.col(SelectionBox).y;
+        const bw = batch.col(SelectionBox).w;
+        const bh = batch.col(SelectionBox).h;
+        for (const r of batch) {
+          const e = batch.entity(r);
+          seenBox.add(e);
+          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}`;
+          let node = boxNodes.get(e);
+          if (node === void 0) {
+            node = makeNode(doc, { border: "1px solid #4a90d9" });
+            node.dataset.chrome = "box";
+            boxNodes.set(e, node);
+            plane.appendChild(node);
+          }
+          if (boxCache.get(e) !== key) {
+            writeRect(node, tl.x, tl.y, sw, sh);
+            boxCache.set(e, key);
+          }
+        }
+      });
+      for (const [e, node] of boxNodes) {
+        if (seenBox.has(e)) continue;
+        node.remove();
+        boxNodes.delete(e);
+        boxCache.delete(e);
+      }
+      w.query(handleQ).each((batch) => {
+        const px = batch.col(Position).x;
+        const py = batch.col(Position).y;
+        const sw = batch.col(Size).w;
+        const sh = batch.col(Size).h;
+        for (const r of batch) {
+          const e = batch.entity(r);
+          seenHandle.add(e);
+          const cx = px[r] + sw[r] / 2;
+          const cy = py[r] + sh[r] / 2;
+          const sc = worldToScreen(cx, cy, cam);
+          const left = sc.x - HANDLE_DRAW_PX / 2;
+          const top = sc.y - HANDLE_DRAW_PX / 2;
+          const key = `${left}:${top}`;
+          let node = handleNodes.get(e);
+          if (node === void 0) {
+            node = makeNode(doc, {
+              width: `${HANDLE_DRAW_PX}px`,
+              height: `${HANDLE_DRAW_PX}px`,
+              background: "#fff",
+              border: "1px solid #4a90d9"
+            });
+            node.dataset.chrome = "handle";
+            handleNodes.set(e, node);
+            plane.appendChild(node);
+          }
+          if (handleCache.get(e) !== key) {
+            node.style.left = `${left}px`;
+            node.style.top = `${top}px`;
+            writes++;
+            handleCache.set(e, key);
+          }
+        }
+      });
+      for (const [e, node] of handleNodes) {
+        if (seenHandle.has(e)) continue;
+        node.remove();
+        handleNodes.delete(e);
+        handleCache.delete(e);
+      }
+      if (marqueeRect !== null) {
+        const tl = worldToScreen(marqueeRect.x, marqueeRect.y, cam);
+        const mw = marqueeRect.w * cam.zoom;
+        const mh = marqueeRect.h * cam.zoom;
+        const key = `${tl.x}:${tl.y}:${mw}:${mh}`;
+        if (marqueeNode === null) {
+          marqueeNode = makeNode(doc, { border: "1px dashed #4a90d9", background: "rgba(74,144,217,0.1)" });
+          marqueeNode.dataset.chrome = "marquee";
+          plane.appendChild(marqueeNode);
+        }
+        if (marqueeCache !== key) {
+          writeRect(marqueeNode, tl.x, tl.y, mw, mh);
+          marqueeCache = key;
+        }
+      } else if (marqueeNode !== null) {
+        marqueeNode.remove();
+        marqueeNode = null;
+        marqueeCache = null;
+      }
+      drewLast = boxNodes.size > 0 || handleNodes.size > 0 || marqueeNode !== null;
+    },
+    writes: () => writes,
+    // The P4 overlay plane is this factory's insertion — unregistering the
+    // reflector alone leaves it behind (2026-07-11 teardown sweep).
+    dispose() {
+      plane.remove();
+    }
+  };
+}
+
+// ../dom/src/measure-adapter.ts
+function isHidden(el) {
+  if (el.offsetParent !== null) return false;
+  const display = el.ownerDocument.defaultView?.getComputedStyle(el).display;
+  return display === "none";
+}
+function attachMeasureAdapter(hostFor, queue) {
+  const byElement = /* @__PURE__ */ new Map();
+  const byEntity = /* @__PURE__ */ new Map();
+  const ro = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const el = entry.target;
+      const entity = byElement.get(el);
+      if (entity === void 0) continue;
+      if (isHidden(el)) continue;
+      const box = entry.borderBoxSize?.[0];
+      const w = box !== void 0 ? box.inlineSize : entry.contentRect.width;
+      const h = box !== void 0 ? box.blockSize : entry.contentRect.height;
+      if (w === 0 && h === 0) continue;
+      queue.enqueue({ entity, w, h });
+    }
+  });
+  return {
+    observe(entity) {
+      const el = hostFor(entity);
+      if (el === void 0) return;
+      const prev = byEntity.get(entity);
+      if (prev !== void 0 && prev !== el) {
+        ro.unobserve(prev);
+        byElement.delete(prev);
+      }
+      byElement.set(el, entity);
+      byEntity.set(entity, el);
+      ro.observe(el);
+    },
+    unobserve(entity) {
+      const el = byEntity.get(entity);
+      if (el === void 0) return;
+      ro.unobserve(el);
+      byElement.delete(el);
+      byEntity.delete(entity);
+    },
+    dispose() {
+      ro.disconnect();
+      byElement.clear();
+      byEntity.clear();
+    }
+  };
+}
+
+// ../dom/src/measure-wiring.ts
+function defaultMeasure(el) {
+  const rect = el.getBoundingClientRect();
+  return { w: rect.width, h: rect.height };
+}
+function wireMeasurement(store, hosts, queue, opts = {}) {
+  const adapter = attachMeasureAdapter((e) => hosts.hostFor(e), queue);
+  const measure = opts.measure ?? defaultMeasure;
+  const state = /* @__PURE__ */ new Map();
+  let scheduled = false;
+  let disposed = false;
+  const forceRemeasure = (e) => {
+    const el = hosts.hostFor(e);
+    if (el === void 0) return;
+    const { w, h } = measure(el);
+    if (w <= 0 && h <= 0) return;
+    queue.enqueue({ entity: e, w, h });
+  };
+  const reconcile = () => {
+    if (disposed) return;
+    const snapshot = store.getSnapshot();
+    const present = /* @__PURE__ */ new Set();
+    for (const entry of snapshot) {
+      present.add(entry.entity);
+      const prev = state.get(entry.entity);
+      if (entry.hidden) {
+        if (prev === "visible") adapter.unobserve(entry.entity);
+        state.set(entry.entity, "hidden");
+      } else {
+        if (prev === void 0) {
+          adapter.observe(entry.entity);
+        } else if (prev === "hidden") {
+          adapter.observe(entry.entity);
+          forceRemeasure(entry.entity);
+        }
+        state.set(entry.entity, "visible");
+      }
+    }
+    for (const [e, s] of [...state]) {
+      if (present.has(e)) continue;
+      if (s === "visible") adapter.unobserve(e);
+      state.delete(e);
+    }
+  };
+  const onStoreChange = () => {
+    if (scheduled || disposed) return;
+    scheduled = true;
+    queueMicrotask(() => {
+      scheduled = false;
+      reconcile();
+    });
+  };
+  const unsub = store.subscribe(onStoreChange);
+  onStoreChange();
+  return () => {
+    disposed = true;
+    unsub();
+    adapter.dispose();
+    state.clear();
+  };
+}
+
+// ../dom/src/index.ts
+var DOM_VERSION = "0.0.0";
+
+export {
+  createCanvasHost,
+  createPlanes,
+  createPlaneTransformReflector,
+  createGrayboxReflector,
+  createDomWidgetsReflector,
+  startRafLoop,
+  attachPointerAdapter,
+  createCursorReflector,
+  createRemoteCursorsReflector,
+  DEFAULT_GRID_CONFIG,
+  createGridReflector,
+  DEFAULT_WIRES_CONFIG,
+  createWiresReflector,
+  createChromeReflector,
+  attachMeasureAdapter,
+  wireMeasurement,
+  DOM_VERSION
+};
+//# sourceMappingURL=chunk-FIAXPNNY.js.map