@vibecook/ice 0.1.0 → 0.2.0

package/README.md

@@ -42,7 +42,7 @@ function StickyView({ entity, world }) {
 
 const engine = createCanvasEngine({ widgets: [Sticky] });
 engine.docs.create(); // a local-first document
-engine.ops.spawnWidget("sticky", { at: { x: 120, y: 120 } });
+engine.ops.spawnWidget("sticky", { x: 120, y: 120 });
 attachKeymap(engine); // ⌫ · ⌘Z · ⌘D · ⌘A · Esc · arrows · v/h/c
 
 createRoot(document.getElementById("root")).render(
@@ -66,6 +66,7 @@ per-gesture undo, gesture-aware autosave, and live presence when you
 | `@vibecook/ice/react` | `<InfiniteCanvas>`, `<EngineProvider>`, hooks (`useCommit`, `useWidgetProps`, `useSelected`, `useUndoStatus`, `usePresencePeers`, …), `attachKeymap`. |
 | `@vibecook/ice/r3f` | GL widget islands + virtual-texture compositor, `<GLViews>`, `useIslandFrame`, the GL pointer router. Peers: `three`, `@react-three/fiber`. |
 | `@vibecook/ice/dom` | DOM planes, adapters, and reflectors — for custom shells without React. |
+| `@vibecook/ice/ground` | The P0 ground stratum as one WebGPU canvas (grid, wires, snap guides) with automatic WebGL2 fallback. Passed to `<InfiniteCanvas ground={…}>`. Peer: `three`. |
 | `@vibecook/ice/devtools` | `attachDevtools(engine)` — live pointers/gestures, planes, sovereignty, and loop tabs. |
 | `@vibecook/ice/kernel` | Pure math: coordinates, spatial index, snap, wire geometry, zoom bands. Zero dependencies beyond `rbush`. |
 
@@ -73,4 +74,38 @@ React, `react-dom`, `three`, and `@react-three/fiber` are **optional** peer
 dependencies — install only what your surfaces use. The core entry is fully
 headless.
 
-MIT © James Yong
+## Limits
+
+Measured, not estimated. The bench source in `packages/core/bench/` is the source
+of truth; [`docs/benchmarks.md`](https://github.com/jamesyong-42/infinite-canvas-engine/blob/main/docs/benchmarks.md)
+records the full output (Apple M1 Max, 2026-07-15).
+
+**Collaboration is the tightest ceiling — plan shared boards around ~3,000
+objects.** A local-only document scales to ~100k, but a collaboratively-edited one
+is bounded by how fast a peer applies an incoming edit, which still scales with
+document size: roughly **3,000 objects for an actively-editing peer**, **~40,000
+for a receive-only one**. Partition large shared boards into containers.
+
+**Scale through containers, not flat boards.** Idle frames no longer scale with the
+board (872 µs at 100k entities). Camera gestures still can: nested boards stay cheap
+(276–460 µs at 10k, 2.6–4.4 ms at 100k), but a **flat, all-active 100k board costs
+40–64 ms per gesture frame** — the honest O(N) ceiling, since nothing can be skipped
+when everything is active. Containers let active-scoped queries skip whole chunks.
+
+**Opening a big document is a one-time cost**: full-document projection at attach is
+~0.3–0.5 s at 10k rows, ~3.2–3.9 s at 100k. Envelope ≈ 100 B/row.
+
+**Deliberately out of scope** — each has a named extension seam rather than a hidden
+TODO: a general layout engine (beyond `ops.arrange`), rich text, comments/threads,
+and permissions. strata has no authority model, so multi-user trust is the
+application's to own.
+
+**Not yet built**: an engine-level focus model for widget keyboard exclusivity and
+wheel/scroll opt-out. Native form controls already work — the keymap ignores
+keystrokes targeting an `input`, `textarea`, `select`, or `contenteditable` — but a
+widget wanting arrow keys or its own scrolling has no engine contract yet.
+
+**The substrate is pre-1.0**: `@vibecook/strata-ecs` minor versions may break APIs.
+
+[Changelog](https://github.com/jamesyong-42/infinite-canvas-engine/blob/main/CHANGELOG.md)
+· MIT © James Yong

package/dist/chunk-5SJYHQI4.js

@@ -0,0 +1,636 @@
+import {
+  attachPointerAdapter,
+  createCanvasHost,
+  createChromeReflector,
+  createCursorReflector,
+  createDomWidgetsReflector,
+  createPlaneTransformReflector,
+  createPlanes,
+  createRemoteCursorsReflector,
+  startRafLoop,
+  wireMeasurement
+} from "./chunk-IASTQMU5.js";
+import {
+  ActiveTool,
+  DurableUndoStatus,
+  Local,
+  Not,
+  Position,
+  PrefabId,
+  PresenceInfo,
+  PresencePeer,
+  Selected,
+  Viewport,
+  WidgetBreakpoint,
+  createCanvasEngine,
+  defineQuery,
+  devGuardsEnabled,
+  guardedTransaction,
+  selectedEntities,
+  tools,
+  widgets,
+  writeRuntimeResource
+} from "./chunk-DXU3RZZS.js";
+
+// ../react/src/hooks.ts
+import { createContext, useCallback, useContext, useMemo, useRef, useSyncExternalStore } from "react";
+var WidgetHiddenContext = createContext(false);
+var selectedQ = defineQuery([Selected]);
+function shallowEq(a, b) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+  const ka = Object.keys(a);
+  const kb = Object.keys(b);
+  if (ka.length !== kb.length) return false;
+  for (const k of ka) {
+    if (!Object.is(a[k], b[k])) return false;
+  }
+  return true;
+}
+function useWorldComponent(world, entity, component) {
+  const hidden = useContext(WidgetHiddenContext);
+  const last = useRef(void 0);
+  const subscribe = useCallback(
+    (onChange) => {
+      if (hidden) return () => {
+      };
+      return world.reactive.observeValue(entity, component, onChange);
+    },
+    [world, entity, component, hidden]
+  );
+  const getSnapshot = useCallback(() => {
+    if (hidden) return last.current;
+    const v = world.isAlive(entity) ? world.get(entity, component) : void 0;
+    if (!shallowEq(v, last.current)) last.current = v;
+    return last.current;
+  }, [world, entity, component, hidden]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useWidgetProps(world, entity, type, group = "props") {
+  const widget = widgets.get(type);
+  const g = widget?.groups.find((x) => x.name === group);
+  if (widget === void 0 || g === void 0) {
+    throw new Error(`ice: useWidgetProps \u2014 unknown widget type/group "${type}"/"${group}".`);
+  }
+  const raw = useWorldComponent(world, entity, g.component);
+  return useMemo(() => {
+    if (raw === void 0) return void 0;
+    const out = {};
+    for (const [name, spec] of Object.entries(g.fields)) {
+      const v = raw[name];
+      out[name] = spec.kind === "json" && typeof v === "string" ? parseJsonCell(v, spec.default) : v;
+    }
+    return out;
+  }, [raw, g]);
+}
+function parseJsonCell(cell, serializedDefault) {
+  try {
+    return JSON.parse(cell);
+  } catch {
+    try {
+      return JSON.parse(serializedDefault ?? "null");
+    } catch {
+      return null;
+    }
+  }
+}
+function useSelected(world, entity) {
+  const hidden = useContext(WidgetHiddenContext);
+  const last = useRef(false);
+  const subscribe = useCallback(
+    (onChange) => {
+      if (hidden) return () => {
+      };
+      return world.reactive.observeQuery(selectedQ, onChange);
+    },
+    [world, hidden]
+  );
+  const getSnapshot = useCallback(() => {
+    if (hidden) return last.current;
+    last.current = world.isAlive(entity) && world.hasTag(entity, Selected);
+    return last.current;
+  }, [world, entity, hidden]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useBreakpoint(world, entity) {
+  const bp = useWorldComponent(world, entity, WidgetBreakpoint);
+  return bp?.tier ?? "normal";
+}
+
+// ../react/src/widget-root.tsx
+import { createElement } from "react";
+import { createPortal } from "react-dom";
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+function WidgetRoot({ world, store, hosts }) {
+  const entries = useSyncExternalStore2(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const portals = [];
+  for (const entry of entries) {
+    if (!world.isAlive(entry.entity)) continue;
+    const type = world.get(entry.entity, PrefabId)?.id;
+    const widget = typeof type === "string" ? widgets.get(type) : void 0;
+    if (widget === void 0) continue;
+    const view = widget.surface === "dom" ? widget.component : widget.chrome;
+    if (view == null) continue;
+    const target = hosts.hostFor(entry.entity);
+    if (target === void 0) continue;
+    const View = view;
+    portals.push(
+      createPortal(
+        createElement(
+          WidgetHiddenContext.Provider,
+          { value: entry.hidden },
+          createElement(View, { entity: entry.entity, world })
+        ),
+        target,
+        String(entry.entity)
+      )
+    );
+  }
+  return createElement("div", { "data-ice-widget-root": "" }, portals);
+}
+
+// ../react/src/engine-context.tsx
+import { createContext as createContext2, useContext as useContext2, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+var EngineContext = createContext2(null);
+function EngineProvider({ engine, children }) {
+  return /* @__PURE__ */ jsx(EngineContext.Provider, { value: engine, children });
+}
+function useCanvasEngine() {
+  const engine = useContext2(EngineContext);
+  if (engine === null) {
+    throw new Error(
+      "ice: useCanvasEngine \u2014 no <EngineProvider>. Render widgets inside <InfiniteCanvas> (which provides it) or wrap your tree in <EngineProvider engine={...}>."
+    );
+  }
+  return engine;
+}
+function useOps() {
+  return useCanvasEngine().ops;
+}
+function useStageHold(engine, active, name) {
+  useEffect(() => {
+    if (!active) return void 0;
+    return engine.stage.background(name);
+  }, [engine, active, name]);
+}
+var warnedUseWorld = false;
+function useWorld() {
+  const engine = useCanvasEngine();
+  if (devGuardsEnabled() && !warnedUseWorld) {
+    warnedUseWorld = true;
+    console.warn(
+      "ice: useWorld() is a READ/OBSERVE escape hatch \u2014 never write to the world directly. Use useOps()/useCommit() for mutation (design-005 \xA75)."
+    );
+  }
+  return engine.world;
+}
+
+// ../react/src/use-commit.ts
+import { useCallback as useCallback2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore3 } from "react";
+function useCommit() {
+  const engine = useCanvasEngine();
+  return useCallback2(
+    (fn, opts) => {
+      const session = engine.docs.current();
+      if (session === void 0) {
+        throw new Error(
+          "ice: useCommit \u2014 no active document. Attach one with engine.docs.create()/open()/join() before committing widget edits."
+        );
+      }
+      if (session.readOnly) {
+        throw new Error("ice: useCommit \u2014 the document is read-only (version gate); widget edits are disabled.");
+      }
+      guardedTransaction(session.store, engine.world, fn, opts);
+    },
+    [engine]
+  );
+}
+var NO_UNDO = { canUndo: false, canRedo: false };
+function useUndoStatus() {
+  const engine = useCanvasEngine();
+  const last = useRef2(NO_UNDO);
+  const subscribe = useCallback2(
+    (onChange) => engine.world.reactive.observeResource(DurableUndoStatus, onChange),
+    [engine]
+  );
+  const getSnapshot = useCallback2(() => {
+    const status = engine.world.getResource(DurableUndoStatus);
+    const canUndo = status?.canUndo ?? false;
+    const canRedo = status?.canRedo ?? false;
+    if (last.current.canUndo !== canUndo || last.current.canRedo !== canRedo) {
+      last.current = { canUndo, canRedo };
+    }
+    return last.current;
+  }, [engine]);
+  return useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
+}
+
+// ../react/src/preview-snapshots.ts
+var images = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+function setPreviewSnapshot(type, image) {
+  images.set(type, image);
+  for (const l of listeners) l();
+}
+function getPreviewSnapshot(type) {
+  return images.get(type);
+}
+function hasPreviewSnapshot(type) {
+  return images.has(type);
+}
+function subscribePreviewSnapshots(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+// ../react/src/widget-preview.tsx
+import {
+  Component,
+  useEffect as useEffect2,
+  useRef as useRef3,
+  useSyncExternalStore as useSyncExternalStore4
+} from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var sandbox = null;
+function ensurePreviewEntity(def) {
+  if (sandbox === null) {
+    const ce = createCanvasEngine();
+    ce.docs.create();
+    ce.world.sync();
+    ce.step(16);
+    sandbox = { ce, entities: /* @__PURE__ */ new Map() };
+  }
+  const existing = sandbox.entities.get(def.type);
+  if (existing !== void 0) return existing;
+  try {
+    const e = sandbox.ce.ops.spawnWidget(def.type, {
+      x: 0,
+      y: 0,
+      undoable: false,
+      ...def.previewProps !== void 0 ? { props: def.previewProps } : {}
+    });
+    sandbox.ce.world.sync();
+    sandbox.ce.step(32);
+    sandbox.entities.set(def.type, e);
+    return e;
+  } catch (err) {
+    console.warn(`ice: WidgetPreview("${def.type}") sandbox spawn failed \u2014 falling back.`, err);
+    return void 0;
+  }
+}
+var PreviewBoundary = class extends Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error) {
+    console.warn("ice: a widget preview threw while rendering \u2014 showing the fallback.", error);
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+};
+function SnapshotLayer({ image }) {
+  const ref = useRef3(null);
+  useEffect2(() => {
+    const canvas = ref.current;
+    if (canvas === null) return;
+    canvas.width = image.width;
+    canvas.height = image.height;
+    try {
+      canvas.getContext("2d")?.drawImage(image, 0, 0);
+    } catch {
+    }
+  }, [image]);
+  return /* @__PURE__ */ jsx2(
+    "canvas",
+    {
+      ref,
+      "data-preview-snapshot": "",
+      style: { position: "absolute", inset: 0, width: "100%", height: "100%" }
+    }
+  );
+}
+function defaultPlaceholder(label) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        borderRadius: 12,
+        background: "rgba(127, 127, 127, 0.12)",
+        boxShadow: "inset 0 0 0 1px rgba(127, 127, 127, 0.25)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 11,
+        color: "rgba(127, 127, 127, 0.8)",
+        overflow: "hidden"
+      },
+      children: label
+    }
+  );
+}
+function WidgetPreview({ type, width, height, fallback, className, style }) {
+  const snapshot = useSyncExternalStore4(subscribePreviewSnapshots, () => getPreviewSnapshot(type));
+  const def = widgets.get(type);
+  const safeFallback = fallback ?? defaultPlaceholder(type);
+  if (def === void 0 || def.defaultSize.w <= 0 || def.defaultSize.h <= 0) {
+    return /* @__PURE__ */ jsx2("div", { className, style: { width, height, ...style }, children: safeFallback });
+  }
+  const s = Math.min(width / def.defaultSize.w, height / def.defaultSize.h);
+  const fitW = def.defaultSize.w * s;
+  const fitH = def.defaultSize.h * s;
+  const stage = (content) => /* @__PURE__ */ jsx2("div", { className, style: { width: fitW, height: fitH, overflow: "hidden", ...style }, children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      inert: true,
+      style: {
+        width: def.defaultSize.w,
+        height: def.defaultSize.h,
+        transform: `scale(${s})`,
+        transformOrigin: "0 0",
+        pointerEvents: "none",
+        userSelect: "none"
+      },
+      children: /* @__PURE__ */ jsx2(PreviewBoundary, { fallback: safeFallback, children: content })
+    }
+  ) });
+  if (def.previewComponent !== null && def.previewComponent !== void 0) {
+    const Declared = def.previewComponent;
+    return stage(/* @__PURE__ */ jsx2(Declared, {}));
+  }
+  if (def.surface === "gl" && snapshot !== void 0) {
+    let chromeLayer = null;
+    if (def.chrome !== null && def.chrome !== void 0) {
+      const entity = ensurePreviewEntity(def);
+      if (entity !== void 0 && sandbox !== null) {
+        const Chrome = def.chrome;
+        chromeLayer = /* @__PURE__ */ jsx2(EngineProvider, { engine: sandbox.ce, children: /* @__PURE__ */ jsx2("div", { style: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ jsx2(Chrome, { entity, world: sandbox.ce.world }) }) });
+      }
+    }
+    return stage(
+      /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+        chromeLayer,
+        /* @__PURE__ */ jsx2(SnapshotLayer, { image: snapshot })
+      ] })
+    );
+  }
+  if (def.surface === "dom" && def.component !== null && def.component !== void 0) {
+    const entity = ensurePreviewEntity(def);
+    if (entity !== void 0 && sandbox !== null) {
+      const View = def.component;
+      return stage(
+        /* @__PURE__ */ jsx2(EngineProvider, { engine: sandbox.ce, children: /* @__PURE__ */ jsx2(View, { entity, world: sandbox.ce.world }) })
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx2("div", { className, style: { width: fitW, height: fitH, ...style }, children: safeFallback });
+}
+
+// ../react/src/use-tool.ts
+import { useCallback as useCallback3, useSyncExternalStore as useSyncExternalStore5 } from "react";
+function useTool() {
+  const engine = useCanvasEngine();
+  const subscribe = useCallback3(
+    (onChange) => engine.world.reactive.observeResource(ActiveTool, onChange),
+    [engine]
+  );
+  const getSnapshot = useCallback3(() => engine.world.getResource(ActiveTool)?.id ?? "select", [engine]);
+  const active = useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
+  const setTool = useCallback3((id) => engine.ops.setTool(id), [engine]);
+  return [active, setTool];
+}
+function useToolState(id) {
+  const [active] = useTool();
+  return active === id;
+}
+
+// ../react/src/use-presence.ts
+import { useCallback as useCallback4, useRef as useRef4, useSyncExternalStore as useSyncExternalStore6 } from "react";
+var remotePeersQ = defineQuery([PresencePeer, Not(Local)]);
+function usePresencePeers() {
+  const engine = useCanvasEngine();
+  const cache = useRef4({ key: "\0", value: [] });
+  const subscribe = useCallback4(
+    (onChange) => engine.world.reactive.observeQuery(remotePeersQ, onChange),
+    [engine]
+  );
+  const getSnapshot = useCallback4(() => {
+    const world = engine.world;
+    const ids = [];
+    world.query(remotePeersQ).each((b) => {
+      for (const r of b) ids.push(b.entity(r));
+    });
+    const key = ids.join(",");
+    if (key !== cache.current.key) {
+      cache.current = {
+        key,
+        value: ids.map((entity) => ({ entity, info: world.get(entity, PresenceInfo) }))
+      };
+    }
+    return cache.current.value;
+  }, [engine]);
+  return useSyncExternalStore6(subscribe, getSnapshot, getSnapshot);
+}
+
+// ../react/src/keymap.ts
+var signature = (key, mod, shift) => `${key.toLowerCase()}|${mod ? 1 : 0}|${shift ? 1 : 0}`;
+function isEditableTarget(target) {
+  if (target === null || !(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable;
+}
+function nudgeSelection(engine, dx, dy) {
+  const session = engine.docs.current();
+  if (session === void 0) return;
+  const selection = selectedEntities(engine.world).filter((e) => session.store.keyOf(e) !== void 0);
+  if (selection.length === 0) return;
+  guardedTransaction(session.store, engine.world, (tx) => {
+    for (const e of selection) {
+      const p = engine.world.get(e, Position);
+      if (p === void 0) continue;
+      tx.edit(e).set(Position, { x: p.x + dx, y: p.y + dy });
+    }
+  });
+}
+var ARROWS = [
+  ["ArrowLeft", -1, 0],
+  ["ArrowRight", 1, 0],
+  ["ArrowUp", 0, -1],
+  ["ArrowDown", 0, 1]
+];
+function defaultEntries() {
+  const entries = [
+    { key: "Backspace", run: (e) => e.ops.deleteSelection() },
+    { key: "Delete", run: (e) => e.ops.deleteSelection() },
+    { key: "z", mod: true, run: (e) => e.docs.undo() },
+    { key: "z", mod: true, shift: true, run: (e) => e.docs.redo() },
+    { key: "d", mod: true, run: (e) => e.ops.duplicateSelection() },
+    { key: "a", mod: true, run: (e) => e.ops.selectAll() },
+    { key: "Escape", run: (e) => e.ops.cancelActiveGestures() }
+  ];
+  for (const [key, dx, dy] of ARROWS) {
+    entries.push({ key, run: (e) => nudgeSelection(e, dx, dy) });
+    entries.push({ key, shift: true, run: (e) => nudgeSelection(e, dx * 10, dy * 10) });
+  }
+  for (const tool of tools.all()) {
+    if (tool.shortcut !== void 0) {
+      const id = tool.id;
+      entries.push({ key: tool.shortcut, run: (e) => e.ops.setTool(id) });
+    }
+  }
+  return entries;
+}
+function resolveTarget(target) {
+  if (target !== void 0) return target;
+  return typeof window !== "undefined" ? window : void 0;
+}
+function attachKeymap(engine, target, overrides = []) {
+  const el = resolveTarget(target);
+  if (el === void 0) return () => {
+  };
+  const map = /* @__PURE__ */ new Map();
+  for (const entry of defaultEntries()) map.set(signature(entry.key, entry.mod, entry.shift), entry);
+  for (const entry of overrides) map.set(signature(entry.key, entry.mod, entry.shift), entry);
+  const onKeyDown = (event) => {
+    if (isEditableTarget(event.target)) return;
+    const mod = event.metaKey || event.ctrlKey;
+    const entry = map.get(signature(event.key, mod, event.shiftKey));
+    if (entry === void 0) return;
+    event.preventDefault();
+    entry.run(engine);
+  };
+  el.addEventListener("keydown", onKeyDown);
+  return () => el.removeEventListener("keydown", onKeyDown);
+}
+
+// ../react/src/infinite-canvas.tsx
+import { useEffect as useEffect3, useRef as useRef5, useState } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function InfiniteCanvas({
+  engine,
+  measureQueue,
+  onReady,
+  ground,
+  grid: gridConfig,
+  glRoute,
+  className,
+  style,
+  children
+}) {
+  const containerRef = useRef5(null);
+  const [hosts, setHosts] = useState(void 0);
+  const onReadyRef = useRef5(onReady);
+  onReadyRef.current = onReady;
+  const groundRef = useRef5(null);
+  const gridConfigRef = useRef5(gridConfig);
+  gridConfigRef.current = gridConfig;
+  const glRouteRef = useRef5(glRoute);
+  glRouteRef.current = glRoute;
+  useEffect3(() => {
+    const container = containerRef.current;
+    if (container === null) return;
+    const { world, engine: core, stack, runtime } = engine;
+    const host = createCanvasHost(container);
+    const planes = createPlanes(host);
+    const planeArgs = { contentPlane: planes.content, liftedPlane: planes.lifted };
+    const domWidgets = createDomWidgetsReflector(planeArgs, world, runtime.store);
+    const remoteCursors = createRemoteCursorsReflector(host, world);
+    const groundLayer = ground?.({ host, world, readWirePreview: () => stack.wirePreview }) ?? null;
+    groundRef.current = groundLayer;
+    if (groundLayer !== null && gridConfigRef.current !== void 0) {
+      groundLayer.configureGrid(gridConfigRef.current);
+    }
+    const chrome = createChromeReflector(host, world, stack.marqueeBuffer);
+    const unregister = [
+      core.registerReflector(createPlaneTransformReflector(planeArgs)),
+      ...groundLayer !== null ? [core.registerReflector(groundLayer.reflector)] : [],
+      core.registerReflector(domWidgets),
+      core.registerReflector(chrome),
+      core.registerReflector(createCursorReflector(host, stack.readCursor)),
+      core.registerReflector(remoteCursors.reflector)
+    ];
+    const detachPointer = attachPointerAdapter(
+      host,
+      stack.queue,
+      glRouteRef.current !== void 0 ? (
+        // Pass the verdict through UNCOERCED: a rich GLRouteVerdict return
+        // (hover-time overInteractive, 2026-07-18) must survive this seam.
+        { glRoute: (kind, x, y, e) => glRouteRef.current?.(kind, x, y, e) ?? false }
+      ) : {}
+    );
+    const detachMeasure = measureQueue !== void 0 ? wireMeasurement(runtime.store, domWidgets, measureQueue) : void 0;
+    const detachKeymap = attachKeymap(engine);
+    const syncViewport = () => {
+      const rect = container.getBoundingClientRect();
+      const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+      writeRuntimeResource(world, Viewport, { w: rect.width, h: rect.height, dpr });
+    };
+    syncViewport();
+    let resizeObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(syncViewport);
+      resizeObserver.observe(container);
+    }
+    const stopLoop = startRafLoop(core);
+    setHosts(domWidgets);
+    onReadyRef.current?.({ engine, host, planes });
+    return () => {
+      stopLoop();
+      detachKeymap();
+      detachMeasure?.();
+      detachPointer();
+      resizeObserver?.disconnect();
+      for (const unreg of unregister) unreg();
+      remoteCursors.destroy();
+      groundLayer?.dispose();
+      groundRef.current = null;
+      domWidgets.dispose();
+      chrome.dispose();
+      planes.dispose();
+      host.dispose();
+      setHosts(void 0);
+    };
+  }, [engine, measureQueue, ground]);
+  useEffect3(() => {
+    if (gridConfig !== void 0) groundRef.current?.configureGrid(gridConfig);
+  }, [gridConfig]);
+  return /* @__PURE__ */ jsx3(EngineProvider, { engine, children: /* @__PURE__ */ jsxs2("div", { ref: containerRef, className, style: { width: "100%", height: "100%", ...style }, "data-ice-canvas": "", children: [
+    hosts !== void 0 ? /* @__PURE__ */ jsx3(WidgetRoot, { world: engine.world, store: engine.runtime.store, hosts }) : null,
+    children
+  ] }) });
+}
+
+// ../react/src/index.ts
+var REACT_VERSION = "0.0.0";
+
+export {
+  WidgetHiddenContext,
+  useWorldComponent,
+  useWidgetProps,
+  useSelected,
+  useBreakpoint,
+  WidgetRoot,
+  EngineProvider,
+  useCanvasEngine,
+  useOps,
+  useStageHold,
+  useWorld,
+  useCommit,
+  useUndoStatus,
+  setPreviewSnapshot,
+  getPreviewSnapshot,
+  hasPreviewSnapshot,
+  subscribePreviewSnapshots,
+  WidgetPreview,
+  useTool,
+  useToolState,
+  usePresencePeers,
+  attachKeymap,
+  InfiniteCanvas,
+  REACT_VERSION
+};
+//# sourceMappingURL=chunk-5SJYHQI4.js.map