@vibecook/ice 0.1.0 → 0.3.0

package/dist/ground.js

@@ -0,0 +1,715 @@
+import {
+  Active,
+  Camera,
+  Culled,
+  DEFAULT_GRID_CONFIG,
+  DEFAULT_SNAP_GUIDES_CONFIG,
+  DEFAULT_WIRES_CONFIG,
+  Drag,
+  GuideLine,
+  MeasuredSize,
+  Port,
+  PortAnchor,
+  Position,
+  PrefabId,
+  RoutedConnect,
+  Selected,
+  Size,
+  SpacingBar,
+  Wire,
+  WireFrom,
+  WirePorts,
+  WireTo,
+  defineQuery,
+  portSlots,
+  widgets
+} from "./chunk-5QY7HK6G.js";
+import {
+  portAnchor,
+  tessellateCubic,
+  wireCubic,
+  worldToScreen
+} from "./chunk-OR5FNVUE.js";
+
+// ../ground/src/layer.ts
+import { OrthographicCamera, Scene } from "three/webgpu";
+function createLayer(host, world, renderer, passes) {
+  const doc = host.container.ownerDocument;
+  const canvas = renderer.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);
+  const scene = new Scene();
+  const camera = new OrthographicCamera(0, 1, 0, 1, -1e3, 1e3);
+  for (const pass of passes) scene.add(pass.object);
+  const dirty = /* @__PURE__ */ new Map();
+  for (const pass of passes) dirty.set(pass, true);
+  let anyDirty = true;
+  const wakeAll = () => {
+    for (const pass of passes) dirty.set(pass, true);
+    anyDirty = true;
+  };
+  const unsubs = [
+    // Camera moves re-map every pass's screen-space geometry (2D-canvas parity).
+    world.reactive.observeResource(Camera, wakeAll)
+  ];
+  for (const pass of passes) {
+    unsubs.push(
+      ...pass.arm(world, () => {
+        dirty.set(pass, true);
+        anyDirty = true;
+      })
+    );
+  }
+  renderer.onReady(wakeAll);
+  let cssW = 0;
+  let cssH = 0;
+  let dpr = 1;
+  const applySize = (w, h) => {
+    dpr = doc.defaultView?.devicePixelRatio ?? 1;
+    cssW = w;
+    cssH = h;
+    renderer.setSize(w, h, dpr);
+    camera.left = 0;
+    camera.right = Math.max(1, w);
+    camera.top = 0;
+    camera.bottom = Math.max(1, h);
+    camera.updateProjectionMatrix();
+    wakeAll();
+  };
+  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;
+  }
+  let redraws = 0;
+  const reflector = {
+    name: "ground",
+    // Self-gated on the dirty union (wires/chrome precedent) — the every-frame
+    // cost is one boolean check.
+    always: true,
+    flush(w) {
+      if (!anyDirty || renderer.failed()) return;
+      if (!renderer.ready()) return;
+      const cam = w.getResource(Camera);
+      if (cam === void 0) return;
+      anyDirty = false;
+      const frame = { width: cssW, height: cssH, dpr, camera: cam };
+      for (const pass of passes) {
+        if (dirty.get(pass) === true) {
+          dirty.set(pass, false);
+          pass.collect(w, frame);
+        }
+      }
+      redraws++;
+      renderer.render(scene, camera);
+    },
+    available: () => renderer.ready() && !renderer.failed(),
+    redraws: () => redraws
+  };
+  return {
+    reflector,
+    invalidateAll: wakeAll,
+    dispose() {
+      for (const u of unsubs) u();
+      unsubs.length = 0;
+      ro?.disconnect();
+      ro = null;
+      for (const pass of passes) pass.dispose();
+      renderer.dispose();
+      canvas.remove();
+    }
+  };
+}
+
+// ../ground/src/passes/grid.ts
+import {
+  clamp,
+  float,
+  fract,
+  length,
+  max,
+  min,
+  mix,
+  positionGeometry,
+  screenCoordinate,
+  smoothstep,
+  uniform,
+  vec4
+} from "three/tsl";
+import {
+  BufferAttribute,
+  BufferGeometry,
+  Mesh,
+  MeshBasicNodeMaterial,
+  Vector2,
+  Vector3
+} from "three/webgpu";
+var FULLSCREEN_TRIANGLE = new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]);
+function createGridPass(initial = {}) {
+  let cfg = { ...DEFAULT_GRID_CONFIG, ...initial };
+  const uCamera = uniform(new Vector2(0, 0));
+  const uZoom = uniform(1);
+  const uDpr = uniform(1);
+  const uSpacings = uniform(new Vector3(...cfg.spacings));
+  const uDotColor = uniform(new Vector3(...cfg.dotColor));
+  const uDotAlpha = uniform(cfg.dotAlpha);
+  const uFadeIn = uniform(new Vector2(...cfg.fadeIn));
+  const uFadeOut = uniform(new Vector2(...cfg.fadeOut));
+  const uDotRadius = uniform(new Vector2(...cfg.dotRadius));
+  const uLevelWeight = uniform(new Vector2(...cfg.levelWeight));
+  const effZoom = uZoom.mul(uDpr);
+  const worldPos = screenCoordinate.xy.div(effZoom).add(uCamera);
+  let total = float(0);
+  for (let i = 0; i < 3; i++) {
+    const spacing = i === 0 ? uSpacings.x : i === 1 ? uSpacings.y : uSpacings.z;
+    const cssSpacing = spacing.mul(uZoom);
+    const rise = cssSpacing.sub(uFadeIn.x).div(uFadeIn.y.sub(uFadeIn.x));
+    const fall = float(1).sub(cssSpacing.sub(uFadeOut.x).div(uFadeOut.y.sub(uFadeOut.x)));
+    const opacity = clamp(min(rise, fall), 0, 1);
+    const f = fract(worldPos.div(spacing).add(0.5)).sub(0.5);
+    const dist = length(f).mul(spacing).mul(effZoom);
+    const t = clamp(cssSpacing.sub(uFadeIn.x).div(40), 0, 1);
+    const radius = mix(uDotRadius.x, uDotRadius.y, t).mul(uDpr);
+    const dot = smoothstep(radius.sub(0.5), radius.add(0.5), dist).oneMinus();
+    const weight = uLevelWeight.x.add(float(i).mul(uLevelWeight.y));
+    total = max(total, dot.mul(opacity).mul(weight));
+  }
+  const material = new MeshBasicNodeMaterial();
+  material.vertexNode = vec4(positionGeometry.xy, 0, 1);
+  material.fragmentNode = vec4(uDotColor, clamp(total.mul(uDotAlpha), 0, 1));
+  material.transparent = true;
+  material.depthTest = false;
+  material.depthWrite = false;
+  const geometry = new BufferGeometry();
+  geometry.setAttribute("position", new BufferAttribute(FULLSCREEN_TRIANGLE, 3));
+  const mesh = new Mesh(geometry, material);
+  mesh.frustumCulled = false;
+  mesh.renderOrder = 0;
+  return {
+    name: "grid",
+    object: mesh,
+    arm: () => [],
+    // camera/resize dirt is layer-owned; config re-tunes call invalidate
+    collect(_world, frame) {
+      uCamera.value.set(frame.camera.x, frame.camera.y);
+      uZoom.value = frame.camera.zoom;
+      uDpr.value = frame.dpr;
+    },
+    configure(next) {
+      cfg = { ...cfg, ...next };
+      uSpacings.value.set(...cfg.spacings);
+      uDotColor.value.set(...cfg.dotColor);
+      uDotAlpha.value = cfg.dotAlpha;
+      uFadeIn.value.set(...cfg.fadeIn);
+      uFadeOut.value.set(...cfg.fadeOut);
+      uDotRadius.value.set(...cfg.dotRadius);
+      uLevelWeight.value.set(...cfg.levelWeight);
+    },
+    dispose() {
+      geometry.dispose();
+      material.dispose();
+    }
+  };
+}
+
+// ../ground/src/passes/soup-collect.ts
+var SoupBuilder = class {
+  pos = [];
+  col = [];
+  vert(x, y, c) {
+    this.pos.push(x, y, 0);
+    this.col.push(c[0], c[1], c[2], c[3]);
+  }
+  /** Axis-aligned rect (two triangles). */
+  rect(x, y, w, h, c) {
+    this.vert(x, y, c);
+    this.vert(x + w, y, c);
+    this.vert(x + w, y + h, c);
+    this.vert(x, y, c);
+    this.vert(x + w, y + h, c);
+    this.vert(x, y + h, c);
+  }
+  /** Stroke segment (a→b) of `width`, flat caps — a quad across the segment normal. */
+  segment(ax, ay, bx, by, width, c) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const len = Math.hypot(dx, dy);
+    if (len < 1e-6) return;
+    const nx = -dy / len * (width / 2);
+    const ny = dx / len * (width / 2);
+    this.vert(ax + nx, ay + ny, c);
+    this.vert(bx + nx, by + ny, c);
+    this.vert(bx - nx, by - ny, c);
+    this.vert(ax + nx, ay + ny, c);
+    this.vert(bx - nx, by - ny, c);
+    this.vert(ax - nx, ay - ny, c);
+  }
+  /** Stroke a polyline (interleaved xy) as per-segment quads (smooth-curve joins). */
+  polyline(points, width, c) {
+    const n = Math.floor(points.length / 2);
+    for (let i = 1; i < n; i++) {
+      this.segment(
+        points[(i - 1) * 2],
+        points[(i - 1) * 2 + 1],
+        points[i * 2],
+        points[i * 2 + 1],
+        width,
+        c
+      );
+    }
+  }
+  /** Filled disc as a triangle fan (MSAA smooths the rim; 16 segs ≈ round at ≤8 px). */
+  disc(cx, cy, r, c, segments = 16) {
+    for (let i = 0; i < segments; i++) {
+      const a0 = i / segments * Math.PI * 2;
+      const a1 = (i + 1) / segments * Math.PI * 2;
+      this.vert(cx, cy, c);
+      this.vert(cx + Math.cos(a0) * r, cy + Math.sin(a0) * r, c);
+      this.vert(cx + Math.cos(a1) * r, cy + Math.sin(a1) * r, c);
+    }
+  }
+  build() {
+    return {
+      positions: new Float32Array(this.pos),
+      colors: new Float32Array(this.col),
+      vertexCount: this.pos.length / 3
+    };
+  }
+};
+function parseCssColor(css) {
+  const rgba = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/.exec(css);
+  if (rgba !== null) {
+    return [
+      Number(rgba[1]) / 255,
+      Number(rgba[2]) / 255,
+      Number(rgba[3]) / 255,
+      rgba[4] === void 0 ? 1 : Number(rgba[4])
+    ];
+  }
+  const hex = /^#([0-9a-f]{6})$/i.exec(css);
+  if (hex !== null) {
+    const v = Number.parseInt(hex[1], 16);
+    return [(v >> 16 & 255) / 255, (v >> 8 & 255) / 255, (v & 255) / 255, 1];
+  }
+  return [0.5, 0.5, 0.5, 1];
+}
+
+// ../ground/src/passes/guides-collect.ts
+var guideQ = defineQuery([GuideLine]);
+var barQ = defineQuery([SpacingBar]);
+function collectGuides(world, frame, config = DEFAULT_SNAP_GUIDES_CONFIG) {
+  const soup = new SoupBuilder();
+  const cam = frame.camera;
+  const lw = config.lineWidth;
+  const guideColor = [config.color[0], config.color[1], config.color[2], config.guideAlpha];
+  const barColor = [config.color[0], config.color[1], config.color[2], config.spacingAlpha];
+  world.query(guideQ).each((b) => {
+    for (const r of b) {
+      const g = world.read(b.entity(r), GuideLine);
+      const fullSpan = g.from === g.to;
+      if (g.axis === "x") {
+        const sx = worldToScreen(g.at, 0, cam).x;
+        if (frame.width > 0 && (sx < -1 || sx > frame.width + 1)) continue;
+        const y0 = fullSpan ? 0 : worldToScreen(0, g.from, cam).y;
+        const y1 = fullSpan ? frame.height : worldToScreen(0, g.to, cam).y;
+        soup.rect(sx - lw / 2, Math.min(y0, y1), lw, Math.abs(y1 - y0), guideColor);
+      } else {
+        const sy = worldToScreen(0, g.at, cam).y;
+        if (frame.height > 0 && (sy < -1 || sy > frame.height + 1)) continue;
+        const x0 = fullSpan ? 0 : worldToScreen(g.from, 0, cam).x;
+        const x1 = fullSpan ? frame.width : worldToScreen(g.to, 0, cam).x;
+        soup.rect(Math.min(x0, x1), sy - lw / 2, Math.abs(x1 - x0), lw, guideColor);
+      }
+    }
+  });
+  world.query(barQ).each((b) => {
+    for (const r of b) {
+      const s = world.read(b.entity(r), SpacingBar);
+      const t = config.tickPx;
+      if (s.axis === "x") {
+        const a = worldToScreen(s.from, s.perp, cam);
+        const bp = worldToScreen(s.to, s.perp, cam);
+        if (frame.width > 0 && (Math.max(a.x, bp.x) < 0 || Math.min(a.x, bp.x) > frame.width)) continue;
+        soup.rect(Math.min(a.x, bp.x), a.y - lw / 2, Math.abs(bp.x - a.x), lw, barColor);
+        soup.rect(a.x - lw / 2, a.y - t, lw, t * 2, barColor);
+        soup.rect(bp.x - lw / 2, bp.y - t, lw, t * 2, barColor);
+      } else {
+        const a = worldToScreen(s.perp, s.from, cam);
+        const bp = worldToScreen(s.perp, s.to, cam);
+        if (frame.height > 0 && (Math.max(a.y, bp.y) < 0 || Math.min(a.y, bp.y) > frame.height)) continue;
+        soup.rect(a.x - lw / 2, Math.min(a.y, bp.y), lw, Math.abs(bp.y - a.y), barColor);
+        soup.rect(a.x - t, a.y - lw / 2, t * 2, lw, barColor);
+        soup.rect(bp.x - t, bp.y - lw / 2, t * 2, lw, barColor);
+      }
+    }
+  });
+  return soup.build();
+}
+
+// ../ground/src/passes/soup-mesh.ts
+import { attribute } from "three/tsl";
+import { BufferAttribute as BufferAttribute2, BufferGeometry as BufferGeometry2, DoubleSide, Mesh as Mesh2, MeshBasicNodeMaterial as MeshBasicNodeMaterial2 } from "three/webgpu";
+function createSoupMesh(renderOrder) {
+  const material = new MeshBasicNodeMaterial2();
+  material.fragmentNode = attribute("color", "vec4");
+  material.transparent = true;
+  material.depthTest = false;
+  material.depthWrite = false;
+  material.side = DoubleSide;
+  let geometry = new BufferGeometry2();
+  let capacity = 0;
+  const mesh = new Mesh2(geometry, material);
+  mesh.frustumCulled = false;
+  mesh.renderOrder = renderOrder;
+  mesh.visible = false;
+  return {
+    mesh,
+    update(soup) {
+      if (soup.vertexCount === 0) {
+        mesh.visible = false;
+        geometry.setDrawRange(0, 0);
+        return;
+      }
+      if (soup.vertexCount > capacity) {
+        capacity = Math.max(soup.vertexCount, capacity * 2, 256);
+        const old = geometry;
+        geometry = new BufferGeometry2();
+        const pos = new Float32Array(capacity * 3);
+        const col = new Float32Array(capacity * 4);
+        pos.set(soup.positions);
+        col.set(soup.colors);
+        geometry.setAttribute("position", new BufferAttribute2(pos, 3));
+        geometry.setAttribute("color", new BufferAttribute2(col, 4));
+        mesh.geometry = geometry;
+        old.dispose();
+      } else {
+        const pos = geometry.getAttribute("position");
+        const col = geometry.getAttribute("color");
+        pos.array.set(soup.positions);
+        col.array.set(soup.colors);
+        pos.needsUpdate = true;
+        col.needsUpdate = true;
+      }
+      geometry.setDrawRange(0, soup.vertexCount);
+      mesh.visible = true;
+    },
+    dispose() {
+      geometry.dispose();
+      material.dispose();
+    }
+  };
+}
+
+// ../ground/src/passes/guides.ts
+function createGuidesPass(initial = {}) {
+  const config = { ...DEFAULT_SNAP_GUIDES_CONFIG, ...initial };
+  const soup = createSoupMesh(2);
+  return {
+    name: "snap-guides",
+    object: soup.mesh,
+    arm(world, wake) {
+      return [
+        world.reactive.observeQuery(guideQ, wake, { cols: [GuideLine] }),
+        world.reactive.observeQuery(barQ, wake, { cols: [SpacingBar] })
+      ];
+    },
+    collect(world, frame) {
+      soup.update(collectGuides(world, frame, config));
+    },
+    dispose() {
+      soup.dispose();
+    }
+  };
+}
+
+// ../ground/src/passes/wires-collect.ts
+var wireQ = defineQuery([Wire]);
+var geometryQ = defineQuery([Position, Size]);
+var measuredQ = defineQuery([MeasuredSize]);
+var selectedQ = defineQuery([Selected]);
+var portQ = defineQuery([Port, PortAnchor]);
+var routedConnectQ = defineQuery([RoutedConnect]);
+var connectDragQ = defineQuery([RoutedConnect, Drag]);
+var activeQ = defineQuery([Active]);
+function outOfScope(world, e) {
+  return world.hasTag(e, Culled) && !world.hasTag(e, Active);
+}
+var TESSELLATION_TOLERANCE_PX = 0.25;
+var DASH_PX = 6;
+var GAP_PX = 4;
+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 };
+}
+var slotCache = /* @__PURE__ */ new Map();
+function slotOf(wt, portId) {
+  let slots = slotCache.get(wt.type);
+  if (slots === void 0) {
+    slots = portSlots(wt.ports);
+    slotCache.set(wt.type, slots);
+  }
+  return slots.get(portId);
+}
+function endpointAnchor(world, 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 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 pointAtLength(t, d) {
+  const arc = t.arcLength;
+  const n = arc.length;
+  let lo = 0;
+  let hi = n - 1;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (arc[mid] < d) lo = mid + 1;
+    else hi = mid;
+  }
+  const i = Math.max(1, lo);
+  const a = arc[i - 1];
+  const b = arc[i];
+  const f = b > a ? (d - a) / (b - a) : 0;
+  const x0 = t.points[(i - 1) * 2];
+  const y0 = t.points[(i - 1) * 2 + 1];
+  const x1 = t.points[i * 2];
+  const y1 = t.points[i * 2 + 1];
+  return { x: x0 + (x1 - x0) * f, y: y0 + (y1 - y0) * f };
+}
+function dashedStroke(soup, t, width, c) {
+  const total = t.arcLength[t.arcLength.length - 1];
+  for (let d = 0; d < total; d += DASH_PX + GAP_PX) {
+    const a = pointAtLength(t, d);
+    const b = pointAtLength(t, Math.min(d + DASH_PX, total));
+    soup.segment(a.x, a.y, b.x, b.y, width, c);
+  }
+}
+function collectWires(world, frame, config = DEFAULT_WIRES_CONFIG, preview) {
+  const soup = new SoupBuilder();
+  const cam = frame.camera;
+  const wireColor = parseCssColor(config.wireColor);
+  const selectedColor = parseCssColor(config.selectedColor);
+  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 fromWidget = world.getRelation(wire, WireFrom);
+      const toWidget = world.getRelation(wire, WireTo);
+      if (fromWidget !== void 0 && outOfScope(world, fromWidget)) continue;
+      if (toWidget !== void 0 && outOfScope(world, toWidget)) continue;
+      const from = endpointAnchor(world, fromWidget, ports.from ?? "");
+      const to = endpointAnchor(world, toWidget, ports.to ?? "");
+      if (from === void 0 || to === void 0) continue;
+      const cubic = wireCubic(
+        portAnchor(from.anchor, from.slot),
+        from.slot.side,
+        portAnchor(to.anchor, to.slot),
+        to.slot.side
+      );
+      const selected = world.hasTag(wire, Selected);
+      const t = tessellateCubic(cubicToScreen(cubic, cam), TESSELLATION_TOLERANCE_PX);
+      soup.polyline(t.points, selected ? config.selectedWidth : config.wireWidth, selected ? selectedColor : wireColor);
+    }
+  });
+  if (preview?.active === true) {
+    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
+    };
+    const t = tessellateCubic(cubicToScreen(cubic, cam), TESSELLATION_TOLERANCE_PX);
+    if (preview.compatible) soup.polyline(t.points, config.wireWidth, selectedColor);
+    else dashedStroke(soup, t, config.wireWidth, wireColor);
+  }
+  const connecting = world.firstOf(routedConnectQ) !== void 0;
+  const dotColor = parseCssColor(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);
+      soup.disc(s.x, s.y, config.portRadius, dotColor);
+    }
+  });
+  return soup.build();
+}
+
+// ../ground/src/passes/wires.ts
+function createWiresPass(initial = {}, readPreview) {
+  const config = { ...DEFAULT_WIRES_CONFIG, ...initial };
+  const soup = createSoupMesh(1);
+  return {
+    name: "wires",
+    object: soup.mesh,
+    arm(world, wake) {
+      return [
+        world.reactive.observeQuery(wireQ, wake, { cols: [] }),
+        world.reactive.observeQuery(geometryQ, wake, { cols: [Position, Size] }),
+        // MeasuredSize rides its own observer (readRect prefers it over Size):
+        // in geometryQ's cols it would REQUIRE the rider and drop plain widgets.
+        world.reactive.observeQuery(measuredQ, wake, { cols: [MeasuredSize] }),
+        world.reactive.observeQuery(selectedQ, wake, { cols: [] }),
+        // Nav churn: Active membership flips gate the scope filter (a wire
+        // whose endpoints left the current frame must disappear this frame).
+        world.reactive.observeQuery(activeQ, wake, { cols: [] }),
+        world.reactive.observeQuery(portQ, wake, { cols: [PortAnchor] }),
+        world.reactive.observeQuery(routedConnectQ, wake, { cols: [] }),
+        world.reactive.observeQuery(connectDragQ, wake, { cols: [Drag] })
+      ];
+    },
+    collect(world, frame) {
+      soup.update(collectWires(world, frame, config, readPreview?.()));
+    },
+    dispose() {
+      soup.dispose();
+    }
+  };
+}
+
+// ../ground/src/renderer.ts
+import { WebGPURenderer } from "three/webgpu";
+function createGroundRenderer(doc, opts = {}) {
+  const canvas = doc.createElement("canvas");
+  let renderer = null;
+  let isReady = false;
+  let isFailed = false;
+  const readyCbs = [];
+  const gpu = globalThis.navigator?.gpu;
+  if (gpu == null || opts.forceWebGL === true) {
+    let gl2 = null;
+    try {
+      gl2 = doc.createElement("canvas").getContext("webgl2");
+    } catch {
+      gl2 = null;
+    }
+    if (gl2 === null) isFailed = true;
+  }
+  if (!isFailed) {
+    try {
+      renderer = new WebGPURenderer({
+        canvas,
+        alpha: true,
+        // transparent clear — the page background shows through P0
+        antialias: true,
+        ...opts.forceWebGL === true ? { forceWebGL: true } : {}
+      });
+      renderer.init().then(() => {
+        isReady = true;
+        for (const cb of readyCbs.splice(0)) cb();
+      }).catch(() => {
+        isFailed = true;
+      });
+    } catch {
+      isFailed = true;
+    }
+  }
+  let lastW = 0;
+  let lastH = 0;
+  let lastDpr = 0;
+  return {
+    canvas,
+    ready: () => isReady,
+    failed: () => isFailed,
+    onReady(cb) {
+      if (isReady) cb();
+      else readyCbs.push(cb);
+    },
+    setSize(cssW, cssH, dpr) {
+      if (renderer === null || cssW === lastW && cssH === lastH && dpr === lastDpr) return;
+      lastW = cssW;
+      lastH = cssH;
+      lastDpr = dpr;
+      try {
+        renderer.setPixelRatio(dpr);
+        renderer.setSize(Math.max(1, cssW), Math.max(1, cssH), false);
+      } catch {
+        isFailed = true;
+      }
+    },
+    render(scene, camera) {
+      if (renderer === null || !isReady || isFailed) return;
+      try {
+        renderer.render(scene, camera);
+      } catch {
+        isFailed = true;
+      }
+    },
+    dispose() {
+      try {
+        renderer?.dispose();
+      } catch {
+      }
+      renderer = null;
+    }
+  };
+}
+
+// ../ground/src/index.ts
+function ground(opts = {}) {
+  return (ctx) => {
+    const doc = ctx.host.container.ownerDocument;
+    const renderer = opts.rendererOverride ?? createGroundRenderer(doc, { forceWebGL: opts.forceWebGL === true });
+    const grid = createGridPass(opts.grid ?? {});
+    const wires = createWiresPass(opts.wires ?? {}, ctx.readWirePreview);
+    const guides = createGuidesPass(opts.guides ?? {});
+    const passes = [grid, wires, guides, ...opts.passes ?? []];
+    const layer = createLayer(ctx.host, ctx.world, renderer, passes);
+    return {
+      reflector: layer.reflector,
+      configureGrid(cfg) {
+        grid.configure(cfg);
+        layer.invalidateAll();
+      },
+      dispose: layer.dispose
+    };
+  };
+}
+export {
+  DEFAULT_GRID_CONFIG,
+  DEFAULT_SNAP_GUIDES_CONFIG,
+  DEFAULT_WIRES_CONFIG,
+  SoupBuilder,
+  collectGuides,
+  collectWires,
+  ground,
+  parseCssColor
+};
+//# sourceMappingURL=ground.js.map