@vibecook/ice 0.10.0 → 0.14.0

package/dist/react.js

@@ -1,51 +1,1058 @@
 import {
-  EngineProvider,
-  InfiniteCanvas,
-  REACT_VERSION,
-  WidgetHiddenContext,
-  WidgetPreview,
-  WidgetRoot,
-  attachKeymap,
-  getPreviewSnapshot,
-  hasPreviewSnapshot,
-  setPreviewSnapshot,
-  subscribePreviewSnapshots,
-  useBehavior,
-  useBreakpoint,
-  useCanvasEngine,
-  useCommit,
-  useFrameFreeze,
-  useOps,
-  usePresencePeers,
-  useSelected,
-  useStageHold,
-  useTool,
-  useToolState,
-  useUndoStatus,
-  useWidgetProps,
-  useWorld,
-  useWorldComponent
-} from "./chunk-MFTMPJUF.js";
-import "./chunk-JWRHAM7L.js";
-import "./chunk-5FQS7V2C.js";
-import "./chunk-OR5FNVUE.js";
+  createDeskHost,
+  isEditableTarget,
+  keyboardClaimOf
+} from "./chunk-IBWWLA6D.js";
+import {
+  ActiveTool,
+  Container,
+  DurableUndoStatus,
+  GestureActive,
+  Local,
+  Locked,
+  Not,
+  Position,
+  PrefabId,
+  PresenceInfo,
+  PresencePeer,
+  Selected,
+  WidgetBreakpoint,
+  closeTray,
+  currentNavEntry,
+  defineQuery,
+  devGuardsEnabled,
+  guardedTransaction,
+  heldEntity,
+  matchHeldTool,
+  selectedEntities,
+  tools,
+  trayOpen,
+  widgets
+} from "./chunk-DYK6KNLG.js";
+import "./chunk-JS6PG6YD.js";
+
+// ../react/src/hooks.ts
+import { useCallback, useMemo, useRef, useSyncExternalStore } from "react";
+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 last = useRef(void 0);
+  const subscribe = useCallback(
+    (onChange) => world.reactive.observeValue(entity, component, onChange),
+    [world, entity, component]
+  );
+  const getSnapshot = useCallback(() => {
+    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]);
+  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 useBehavior(world, entity, behavior) {
+  const raw = useWorldComponent(world, entity, behavior.component);
+  return useMemo(() => {
+    if (raw === void 0) return void 0;
+    const out = {};
+    for (const [name, spec] of Object.entries(behavior.schema)) {
+      const v = raw[name];
+      out[name] = spec.kind === "json" && typeof v === "string" ? parseJsonCell(v, spec.default) : v;
+    }
+    return out;
+  }, [raw, behavior]);
+}
+function parseJsonCell(cell, serializedDefault) {
+  try {
+    return JSON.parse(cell);
+  } catch {
+    try {
+      return JSON.parse(serializedDefault ?? "null");
+    } catch {
+      return null;
+    }
+  }
+}
+function useSelected(world, entity) {
+  const last = useRef(false);
+  const subscribe = useCallback(
+    (onChange) => world.reactive.observeQuery(selectedQ, onChange),
+    [world]
+  );
+  const getSnapshot = useCallback(() => {
+    last.current = world.isAlive(entity) && world.hasTag(entity, Selected);
+    return last.current;
+  }, [world, entity]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useBreakpoint(world, entity) {
+  const bp = useWorldComponent(world, entity, WidgetBreakpoint);
+  return bp?.tier ?? "normal";
+}
+
+// ../react/src/engine-context.tsx
+import { createContext, useContext, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+var EngineContext = createContext(null);
+function EngineProvider({ engine, children }) {
+  return /* @__PURE__ */ jsx(EngineContext.Provider, { value: engine, children });
+}
+function useCanvasEngine() {
+  const engine = useContext(EngineContext);
+  if (engine === null) {
+    throw new Error(
+      "ice: useCanvasEngine \u2014 no <EngineProvider>. Render inside <Desk> (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]);
+}
+function useFrameFreeze(engine, active, name) {
+  useEffect(() => {
+    if (!active) return void 0;
+    return engine.frame.freeze(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 useSyncExternalStore2 } 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 useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+}
+
+// ../react/src/use-tool.ts
+import { useCallback as useCallback3, useSyncExternalStore as useSyncExternalStore3 } 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 = useSyncExternalStore3(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/canvas-hooks.ts
+import { useCallback as useCallback4, useSyncExternalStore as useSyncExternalStore4 } from "react";
+function useCurrentCanvas() {
+  const engine = useCanvasEngine();
+  const subscribe = useCallback4(
+    (onChange) => engine.canvas.subscribe(onChange),
+    [engine]
+  );
+  return useSyncExternalStore4(subscribe, engine.canvas.current, engine.canvas.current);
+}
+function useCanvasCatalog() {
+  const engine = useCanvasEngine();
+  const subscribe = useCallback4(
+    (onChange) => engine.canvas.subscribe(onChange),
+    [engine]
+  );
+  return useSyncExternalStore4(subscribe, engine.canvas.catalog, engine.canvas.catalog);
+}
+function useCanvasTools() {
+  const engine = useCanvasEngine();
+  const subscribe = useCallback4(
+    (onChange) => engine.canvas.subscribe(onChange),
+    [engine]
+  );
+  return useSyncExternalStore4(subscribe, engine.canvas.tools, engine.canvas.tools);
+}
+function useCanvasDiagnostics() {
+  const engine = useCanvasEngine();
+  const subscribe = useCallback4(
+    (onChange) => engine.canvas.subscribe(onChange),
+    [engine]
+  );
+  return useSyncExternalStore4(
+    subscribe,
+    engine.canvas.diagnostics,
+    engine.canvas.diagnostics
+  );
+}
+function useFramePreview(frame) {
+  const engine = useCanvasEngine();
+  const subscribe = useCallback4(
+    (onChange) => engine.previews.subscribe(frame, onChange),
+    [engine, frame]
+  );
+  const getSnapshot = useCallback4(() => engine.previews.snapshot(frame), [engine, frame]);
+  return useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
+}
+
+// ../react/src/frame-preview-boundary.tsx
+import {
+  Component
+} from "react";
+var FramePreviewBoundary = class extends Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error, info) {
+    this.props.onError?.(error, info);
+  }
+  render() {
+    return this.state.failed ? this.props.fallback ?? null : this.props.children;
+  }
+};
+
+// ../react/src/use-presence.ts
+import { useCallback as useCallback5, useRef as useRef3, useSyncExternalStore as useSyncExternalStore5 } from "react";
+var remotePeersQ = defineQuery([PresencePeer, Not(Local)]);
+function usePresencePeers() {
+  const engine = useCanvasEngine();
+  const cache = useRef3({ key: "\0", value: [] });
+  const subscribe = useCallback5(
+    (onChange) => engine.world.reactive.observeQuery(remotePeersQ, onChange),
+    [engine]
+  );
+  const getSnapshot = useCallback5(() => {
+    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 useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
+}
+
+// ../react/src/keymap.ts
+var gestureActiveQ = defineQuery([GestureActive]);
+function openOrEnterSelected(engine) {
+  const { world } = engine;
+  if (heldEntity(world) !== void 0 || trayOpen(world)) return;
+  const selected = selectedEntities(world);
+  if (selected.length !== 1) return;
+  const target = selected[0];
+  if (target === void 0 || !world.isAlive(target)) return;
+  const typeId = world.get(target, PrefabId)?.id;
+  if (typeof typeId === "string" && engine.catalog.widget(typeId)?.openable === true) {
+    engine.ops.open(target);
+    return;
+  }
+  if (!world.hasTag(target, Container)) return;
+  engine.ops.enterContainer(target);
+}
+function escapeOrExit(engine) {
+  const { world } = engine;
+  if (trayOpen(world)) {
+    closeTray(world);
+    return;
+  }
+  if (heldEntity(world) !== void 0) {
+    engine.ops.putDown();
+    return;
+  }
+  const gestureLive = world.firstOf(gestureActiveQ) !== void 0;
+  if (!gestureLive && currentNavEntry(world) !== void 0) {
+    engine.ops.exitContainer();
+    return;
+  }
+  engine.ops.cancelActiveGestures();
+}
+var unlessInert = (run) => (engine) => {
+  if (heldEntity(engine.world) === void 0 && !trayOpen(engine.world)) run(engine);
+};
+function heldToolKey(engine, event) {
+  const held = heldEntity(engine.world);
+  if (held === void 0) return false;
+  const typeId = engine.world.get(held, PrefabId)?.id;
+  const tools2 = typeof typeId === "string" ? engine.catalog.widget(typeId)?.heldTools ?? [] : [];
+  const tool = matchHeldTool(tools2, { key: event.key, mod: event.metaKey || event.ctrlKey, shift: event.shiftKey, alt: event.altKey });
+  if (tool === void 0) return false;
+  engine.ops.useHeldTool(tool.id);
+  return true;
+}
+var signature = (key, mod, shift) => `${key.toLowerCase()}|${mod ? 1 : 0}|${shift ? 1 : 0}`;
+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 && !engine.world.hasTag(e, Locked));
+  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 toggleTape(engine) {
+  const selection = selectedEntities(engine.world);
+  if (selection.length === 0) return;
+  engine.ops.setLocked(selection, !selection.every((e) => engine.world.hasTag(e, Locked)));
+}
+function defaultEntries() {
+  const entries = [
+    { key: "Backspace", run: unlessInert((e) => e.ops.deleteSelection()) },
+    { key: "Delete", run: unlessInert((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: unlessInert((e) => e.ops.duplicateSelection()) },
+    { key: "a", mod: true, run: unlessInert((e) => e.ops.selectAll()) },
+    // design-015 §8 · §9 (D2b, D4b): ⏎ with ONE selected picks an openable object up, or flies into a container; Esc puts
+    // the held object down, else cancels a live gesture as ever, and with none to cancel flies back out of the current frame.
+    { key: "Enter", run: (e) => openOrEnterSelected(e) },
+    { key: "Escape", run: (e) => escapeOrExit(e) },
+    { key: "l", mod: true, shift: true, run: unlessInert(toggleTape) }
+  ];
+  for (const [key, dx, dy] of ARROWS) {
+    entries.push({ key, run: unlessInert((e) => nudgeSelection(e, dx, dy)) });
+    entries.push({ key, shift: true, run: unlessInert((e) => nudgeSelection(e, dx * 10, dy * 10)) });
+  }
+  const byLetter = /* @__PURE__ */ new Map();
+  for (const tool of tools.all()) {
+    if (tool.shortcut === void 0) continue;
+    byLetter.set(tool.shortcut, [...byLetter.get(tool.shortcut) ?? [], tool.id]);
+  }
+  for (const [key, ids] of byLetter) {
+    entries.push({
+      key,
+      run: (e) => {
+        const legal = e.canvas.tools();
+        const id = ids.find((t) => legal.some((tool) => tool.id === t));
+        if (id !== void 0) 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) {
+    if (entry.key === " ") {
+      console.warn(
+        "ice: attachKeymap \u2014 an override on Space can never fire: the pointer adapter owns Space as the pan modifier (design-003 \xA74.4) and preventDefaults it before the keymap's handled-by-content gate."
+      );
+    }
+    map.set(signature(entry.key, entry.mod, entry.shift), entry);
+  }
+  const onKeyDown = (event) => {
+    if (event.defaultPrevented) return;
+    const claim = keyboardClaimOf(event.target);
+    if (claim.claimed) {
+      if (event.key === "Escape" && !claim.ownsEscape) {
+        event.preventDefault();
+        const t = event.target;
+        if (t instanceof HTMLElement || t instanceof SVGElement) t.blur();
+      }
+      return;
+    }
+    if (isEditableTarget(event.target)) return;
+    if (heldToolKey(engine, event)) {
+      event.preventDefault();
+      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/selection-menu.tsx
+import { useEffect as useEffect2, useLayoutEffect, useMemo as useMemo2, useRef as useRef4, useState } from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SELECTION_MENU = { height: 40, gap: 10, margin: 16, edge: 8, awayMs: 90, backMs: 200, inMs: 180, outMs: 120, foot: 72, travelMs: 340 };
+var clamp = (x, a, b) => Math.min(Math.max(x, a), Math.max(a, b));
+function placeSelectionMenu(anchor, size, sheet = 0) {
+  const M = SELECTION_MENU;
+  const { width: W, height: H } = anchor.view;
+  if (anchor.held !== void 0 && !anchor.held.landing) {
+    return { x: clamp(W / 2 - size.w / 2, M.margin, W - size.w - M.margin), y: H - M.foot + (M.foot - size.h) / 2, below: false };
+  }
+  const b = anchor.box;
+  if (b === null || anchor.count === 0) return null;
+  let x = (b.x0 + b.x1) / 2 - size.w / 2;
+  let y = b.y0 - M.gap - size.h;
+  const top = anchor.rulers !== null ? anchor.rulers.margin + anchor.rulers.band + M.edge : M.edge;
+  const yBelow = b.y1 + M.gap;
+  const roomAbove = y - sheet - top;
+  const roomBelow = H - M.edge - (yBelow + size.h + sheet);
+  let below = false;
+  if (roomAbove < 0 && roomBelow > roomAbove) {
+    y = yBelow;
+    below = true;
+  }
+  x = clamp(x, M.margin, W - size.w - M.margin);
+  y = clamp(y, M.edge, H - size.h - M.edge);
+  return { x, y, below };
+}
+var stroke = (children) => /* @__PURE__ */ jsx2("g", { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children });
+var SELECTION_GLYPHS = {
+  agents: stroke(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "4.5", r: "2" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "5.5", cy: "15.75", r: "2" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "18.5", cy: "15.75", r: "2" })
+  ] })),
+  chevron: stroke(/* @__PURE__ */ jsx2("path", { d: "M9.5 6l6 6-6 6" })),
+  trash: stroke(/* @__PURE__ */ jsx2("path", { d: "M4.5 6.5h15M9.5 6.5V5a1.5 1.5 0 0 1 1.5-1.5h2A1.5 1.5 0 0 1 14.5 5v1.5M6.5 6.5l.9 12.2a2 2 0 0 0 2 1.8h5.2a2 2 0 0 0 2-1.8l.9-12.2M10 10.5v6M14 10.5v6" })),
+  duplicate: stroke(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "8.5", y: "8.5", width: "12", height: "12", rx: "3" }),
+    /* @__PURE__ */ jsx2("path", { d: "M15.5 8.5V6.5a3 3 0 0 0-3-3h-6a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h2" })
+  ] })),
+  lock: stroke(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "4.5", y: "10.5", width: "15", height: "10", rx: "3" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 10.5V8a4 4 0 0 1 8 0v2.5M12 14.5v2" })
+  ] })),
+  unlock: stroke(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "4.5", y: "10.5", width: "15", height: "10", rx: "3" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 10.5V8a4 4 0 0 1 7.7-1.5M12 14.5v2" })
+  ] })),
+  ellipsis: /* @__PURE__ */ jsx2("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.7 10.4h1.9a0.7 0.7 0 0 1 0.7 0.7v1.9a0.7 0.7 0 0 1 -0.7 0.7h-1.9a0.7 0.7 0 0 1 -0.7 -0.7v-1.9a0.7 0.7 0 0 1 0.7 -0.7ZM11.05 10.4h1.9a0.7 0.7 0 0 1 0.7 0.7v1.9a0.7 0.7 0 0 1 -0.7 0.7h-1.9a0.7 0.7 0 0 1 -0.7 -0.7v-1.9a0.7 0.7 0 0 1 0.7 -0.7ZM18.4 10.4h1.9a0.7 0.7 0 0 1 0.7 0.7v1.9a0.7 0.7 0 0 1 -0.7 0.7h-1.9a0.7 0.7 0 0 1 -0.7 -0.7v-1.9a0.7 0.7 0 0 1 0.7 -0.7Z" }),
+  // the held bar's (design-015 §8, D4b): the kinds' declared tools and Done — the same 24-box, one 2-unit stroke
+  "chevron-left": stroke(/* @__PURE__ */ jsx2("path", { d: "M14.5 6l-6 6 6 6" })),
+  pen: stroke(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M5 19l1.2-4.2L15.6 5.4a2 2 0 0 1 2.8 0l.2.2a2 2 0 0 1 0 2.8L9.2 17.8z" }),
+    /* @__PURE__ */ jsx2("path", { d: "M13.5 7.5l3 3" })
+  ] })),
+  eraser: stroke(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M4.5 15.5l7-7a2 2 0 0 1 2.8 0l4.2 4.2a2 2 0 0 1 0 2.8l-4 4H9.3l-4.8-4z" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9 19.5h11" })
+  ] })),
+  undo: stroke(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M8.5 7.5H15a4.5 4.5 0 0 1 0 9H7" }),
+    /* @__PURE__ */ jsx2("path", { d: "M11 4.5l-3.5 3 3.5 3" })
+  ] })),
+  redo: stroke(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M15.5 7.5H9a4.5 4.5 0 0 0 0 9h8" }),
+    /* @__PURE__ */ jsx2("path", { d: "M13 4.5l3.5 3-3.5 3" })
+  ] })),
+  today: stroke(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "4.5", y: "6", width: "15", height: "13.5", rx: "2.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M4.5 10.5h15M8.5 4v3.5M15.5 4v3.5" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "15", r: "1.4" })
+  ] })),
+  check: stroke(/* @__PURE__ */ jsx2("path", { d: "M5 12.5l4.5 4.5L19 7.5" }))
+};
+function Glyph({ glyph, size = 16 }) {
+  const body = typeof glyph === "string" ? SELECTION_GLYPHS[glyph] : glyph;
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", width: size, height: size, "aria-hidden": "true", focusable: "false", children: body });
+}
+var isDrawing = (g) => typeof g === "object" && g !== null && typeof g.path === "string";
+var drawn = (g) => g.fill === true ? /* @__PURE__ */ jsx2("path", { fill: "currentColor", fillRule: "evenodd", d: g.path }) : stroke(/* @__PURE__ */ jsx2("path", { d: g.path }));
+var initial = (label) => /* @__PURE__ */ jsx2("text", { x: "12", y: "16.5", textAnchor: "middle", fontSize: "13", fontWeight: "600", fill: "currentColor", children: (label.trim()[0] ?? "?").toUpperCase() });
+var missingSaid = /* @__PURE__ */ new Set();
+function actGlyph(k) {
+  return toolGlyph({ id: k.id, label: k.label, ...k.glyph !== void 0 ? { glyph: k.glyph } : {} }).node;
+}
+function toolGlyph(t) {
+  const g = t.glyph;
+  if (isDrawing(g)) return { node: drawn(g), missing: void 0 };
+  if (typeof g === "string" && g in SELECTION_GLYPHS) return { node: SELECTION_GLYPHS[g], missing: void 0 };
+  if (typeof g === "string" && !missingSaid.has(g)) {
+    missingSaid.add(g);
+    console.error(`[ice] the held tool "${t.id}" names the glyph "${g}", which the bar does not draw \u2014 declare its drawing (\`glyph: { path }\`) or a name of SELECTION_GLYPHS`);
+  }
+  return { node: initial(t.label), missing: typeof g === "string" ? g : void 0 };
+}
+function defaultSelectionActions() {
+  return [
+    { id: "duplicate", label: "Duplicate", glyph: "duplicate", keys: "\u2318D", when: (s) => !s.locked, run: (e) => {
+      e.ops.duplicateSelection();
+    } },
+    {
+      id: "tape",
+      label: (s) => s.locked ? "Lift the tape" : "Tape it down",
+      glyph: (s) => s.locked ? "unlock" : "lock",
+      keys: "\u21E7\u2318L",
+      on: (s) => s.locked,
+      run: (e, s) => {
+        e.ops.setLocked(selectedEntities(e.world), !s.locked);
+      }
+    },
+    { id: "more", label: "More", glyph: "ellipsis", run: () => {
+    } },
+    { id: "delete", label: "Delete", glyph: "trash", keys: "\u232B", place: "end", tone: "danger", run: (e) => {
+      e.ops.deleteSelection();
+    } }
+  ];
+}
+var labelOf = (a, s) => typeof a.label === "function" ? a.label(s) : a.label;
+var glyphOf = (a, s) => typeof a.glyph === "function" ? a.glyph(s) : a.glyph;
+var DESK_INK = "--ice-menu-ink:rgb(16 9 4 / .94);--ice-menu-ink-solid:rgb(16 9 4);--ice-menu-cream:rgb(255 237 215);--ice-menu-cream-rgb:255 237 215;--ice-menu-brass:rgb(196 165 116);--ice-menu-hair:rgb(196 165 116 / .24);--ice-menu-rule:rgb(196 165 116 / .34);--ice-menu-danger:rgb(255 69 58);--ice-menu-danger-bg:rgb(255 69 58 / .16);--ice-menu-shadow:-1px 2px 3px rgb(14 26 10 / .25),-8px 14px 32px rgb(14 26 10 / .38)";
+var STYLE = `
+[data-ice-selection-menu]{${DESK_INK};position:absolute;left:0;top:0;z-index:20;will-change:transform,opacity;font:500 12.5px/1 var(--ice-menu-font,system-ui,-apple-system,sans-serif);user-select:none}
+[data-ice-selection-menu] .ice-sm-bar{position:relative;display:flex;align-items:center;gap:2px;height:40px;padding:4px;box-sizing:border-box;white-space:nowrap;border-radius:20px;background:var(--ice-menu-ink);color:var(--ice-menu-cream);box-shadow:inset 0 0 0 1px var(--ice-menu-hair),var(--ice-menu-shadow)}
+[data-ice-selection-menu] button{appearance:none;border:0;margin:0;padding:0;background:none;color:inherit;font:inherit;cursor:pointer}
+[data-ice-selection-menu] .ice-sm-btn{width:32px;height:32px;border-radius:16px;display:grid;place-items:center;color:rgb(var(--ice-menu-cream-rgb) / .86);transition:background 120ms ease,color 120ms ease,transform 120ms ease}
+[data-ice-selection-menu] .ice-sm-btn:hover{background:rgb(var(--ice-menu-cream-rgb) / .09);color:var(--ice-menu-cream)}
+[data-ice-selection-menu] .ice-sm-btn:active{transform:scale(.95);background:rgb(var(--ice-menu-cream-rgb) / .15)}
+[data-ice-selection-menu] .ice-sm-btn[data-on="true"]{background:var(--ice-menu-cream);color:var(--ice-menu-ink-solid)}
+[data-ice-selection-menu] .ice-sm-btn[data-tone="danger"]:hover{color:var(--ice-menu-danger);background:var(--ice-menu-danger-bg)}
+[data-ice-selection-menu] .ice-sm-text{height:32px;padding:0 9px;border-radius:16px;display:inline-flex;align-items:center;gap:7px;color:var(--ice-menu-cream);background:rgb(var(--ice-menu-cream-rgb) / .08);transition:background 120ms ease,transform 120ms ease}
+[data-ice-selection-menu] .ice-sm-text:hover{background:rgb(var(--ice-menu-cream-rgb) / .15)}
+[data-ice-selection-menu] .ice-sm-text:active{transform:scale(.97)}
+[data-ice-selection-menu] .ice-sm-text svg:last-child{transform:rotate(-90deg);opacity:.55;margin-left:-1px;transition:transform 240ms cubic-bezier(.25,1,.3,1)}
+[data-ice-selection-menu][data-below="true"] .ice-sm-text svg:last-child{transform:rotate(90deg)}
+[data-ice-selection-menu] .ice-sm-rule{flex:none;width:0;height:22px;margin:0 4px;border-left:1px dashed var(--ice-menu-rule)}
+[data-ice-selection-menu] .ice-sm-sheet{position:absolute;left:0;min-width:208px;padding:6px;box-sizing:border-box;border-radius:14px;background:var(--ice-menu-ink);color:var(--ice-menu-cream);box-shadow:inset 0 0 0 1px var(--ice-menu-hair),var(--ice-menu-shadow)}
+[data-ice-selection-menu] .ice-sm-item{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px;border-radius:8px;text-align:left}
+[data-ice-selection-menu] .ice-sm-item:hover{background:rgb(var(--ice-menu-cream-rgb) / .09)}
+[data-ice-selection-menu] .ice-sm-item[data-tone="danger"]:hover{color:var(--ice-menu-danger);background:var(--ice-menu-danger-bg)}
+[data-ice-selection-menu] .ice-sm-item kbd{font:500 11px/1 var(--ice-menu-mono,ui-monospace,monospace);color:var(--ice-menu-brass)}
+[data-ice-selection-menu] .ice-sm-btn.is-dim{color:rgb(var(--ice-menu-cream-rgb) / .38);cursor:default}
+[data-ice-selection-menu] .ice-sm-btn.is-dim:hover{background:none;color:rgb(var(--ice-menu-cream-rgb) / .38)}
+[data-ice-selection-menu] .ice-sm-btn.is-dim:active{transform:none;background:none}
+[data-ice-selection-menu][data-held="true"] .ice-sm-text svg:last-child{display:none}
+[data-ice-selection-menu] .ice-sm-ink{width:28px;height:32px;border-radius:14px;display:grid;place-items:center}
+[data-ice-selection-menu] .ice-sm-ink i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16);transition:transform 160ms cubic-bezier(.3,1.4,.5,1),box-shadow 160ms ease}
+[data-ice-selection-menu] .ice-sm-ink:hover i{transform:scale(1.18)}
+[data-ice-selection-menu] .ice-sm-ink[data-on="true"] i{box-shadow:0 0 0 2px var(--ice-menu-ink-solid),0 0 0 3.5px var(--ice-menu-cream)}
+`;
+var shownOf = (a) => {
+  const held = a.held !== void 0 && !a.held.landing;
+  const landing = a.held?.landing === true;
+  const tools2 = held ? (a.held?.tools ?? []).map((t) => `${t.id}:${t.kind ?? ""}:${t.swatch ?? ""}`).join("|") : "";
+  const menu = (a.menu ?? []).map((m) => `${m.id}:${m.label}`).join("|");
+  return { count: a.count, locked: a.locked, visible: a.count > 0 && a.box !== null || held, gesturing: a.gesturing || a.editing === true || landing, held, tools: tools2, active: held ? a.held?.active ?? "" : "", menu };
+};
+var sameShown = (a, b) => a.count === b.count && a.locked === b.locked && a.visible === b.visible && a.gesturing === b.gesturing && a.held === b.held && a.tools === b.tools && a.active === b.active && a.menu === b.menu;
+var transitionOf = (away, visible, traveling) => {
+  const M = SELECTION_MENU;
+  const opacity = away ? `opacity ${M.awayMs}ms ease-out` : visible ? `opacity ${M.inMs}ms ease-out` : `opacity ${M.outMs}ms ease-out, visibility 0s linear ${M.outMs}ms`;
+  return traveling ? `${opacity}, transform ${M.travelMs}ms cubic-bezier(.25,1,.3,1)` : opacity;
+};
+function SelectionMenu({ source, actions, engine: given }) {
+  const provided = useOptionalEngine();
+  const engine = given ?? provided;
+  const acts = useMemo2(() => actions ?? defaultSelectionActions(), [actions]);
+  const root = useRef4(null);
+  const [shown, setShown] = useState(() => shownOf(source.anchor()));
+  const [away, setAway] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [below, setBelow] = useState(false);
+  const [traveling, setTraveling] = useState(false);
+  const tools2 = useRef4(source.anchor().held?.tools ?? []);
+  const kindActs = useRef4(source.anchor().menu ?? []);
+  const heldRef = useRef4(shown.held);
+  const travelTimer = useRef4(null);
+  const placeRef = useRef4(() => {
+  });
+  placeRef.current = () => {
+    const el = root.current;
+    const a = source.anchor();
+    const next = shownOf(a);
+    if (next.held) tools2.current = a.held?.tools ?? [];
+    kindActs.current = a.menu ?? [];
+    setShown((prev) => sameShown(prev, next) ? prev : next);
+    if (el === null) return;
+    if (next.held !== heldRef.current) {
+      heldRef.current = next.held;
+      el.style.transition = transitionOf(away, next.visible, true);
+      setTraveling(true);
+      if (travelTimer.current !== null) clearTimeout(travelTimer.current);
+      travelTimer.current = setTimeout(() => {
+        travelTimer.current = null;
+        setTraveling(false);
+      }, SELECTION_MENU.travelMs);
+    }
+    const bar = el.firstElementChild;
+    const sheet = el.querySelector(".ice-sm-sheet");
+    const p = placeSelectionMenu(a, { w: bar?.offsetWidth ?? 0, h: bar?.offsetHeight || SELECTION_MENU.height }, sheet?.offsetHeight ?? 0);
+    if (p === null) return;
+    el.style.transform = `translate(${p.x.toFixed(1)}px, ${p.y.toFixed(1)}px)`;
+    el.dataset.below = String(p.below);
+    setBelow((prev) => prev === p.below ? prev : p.below);
+  };
+  useEffect2(() => () => {
+    if (travelTimer.current !== null) clearTimeout(travelTimer.current);
+  }, []);
+  useLayoutEffect(() => {
+    const run = () => placeRef.current();
+    run();
+    return source.subscribe(run);
+  }, [source]);
+  useLayoutEffect(() => {
+    placeRef.current();
+  }, [shown.count, shown.locked, shown.visible, shown.held, shown.tools, shown.menu, open]);
+  useEffect2(() => {
+    if (shown.gesturing) {
+      setAway(true);
+      setOpen(false);
+      return;
+    }
+    const t = setTimeout(() => setAway(false), SELECTION_MENU.backMs);
+    return () => clearTimeout(t);
+  }, [shown.gesturing]);
+  useEffect2(() => {
+    setOpen(false);
+  }, [shown.count]);
+  if (engine === void 0) return null;
+  const state = { count: shown.count, locked: shown.locked };
+  const visible = shown.visible;
+  const kinds = kindActs.current.map((k) => ({
+    id: `kind.${k.id}`,
+    label: k.label,
+    glyph: actGlyph(k),
+    ...k.keys !== void 0 ? { keys: k.keys } : {},
+    run: (e) => {
+      e.ops.runMenuAction(k.id);
+    }
+  }));
+  const listed = [...kinds, ...acts].filter((a) => a.when === void 0 || a.when(state));
+  const at = (place) => listed.filter((a) => (a.place ?? "main") === place);
+  const button = (a) => {
+    const label = labelOf(a, state);
+    const tip = a.keys !== void 0 ? `${label} (${a.keys})` : label;
+    const run = () => {
+      if (a.id === "more") {
+        setOpen((o) => !o);
+        return;
+      }
+      setOpen(false);
+      a.run(engine, state);
+    };
+    if (a.text === true) {
+      return /* @__PURE__ */ jsxs("button", { type: "button", className: "ice-sm-text", "data-act": a.id, "aria-label": label, title: tip, onClick: run, children: [
+        /* @__PURE__ */ jsx2(Glyph, { glyph: glyphOf(a, state) }),
+        /* @__PURE__ */ jsx2("span", { children: label }),
+        /* @__PURE__ */ jsx2(Glyph, { glyph: "chevron", size: 12 })
+      ] }, a.id);
+    }
+    return /* @__PURE__ */ jsx2("button", { type: "button", className: "ice-sm-btn", "data-act": a.id, "data-on": a.on?.(state) === true ? "true" : void 0, "data-tone": a.tone, "data-glyph": typeof glyphOf(a, state) === "string" ? glyphOf(a, state) : void 0, "aria-label": label, title: tip, "aria-haspopup": a.id === "more" ? "menu" : void 0, "aria-expanded": a.id === "more" ? open : void 0, onClick: run, children: /* @__PURE__ */ jsx2(Glyph, { glyph: glyphOf(a, state) }) }, a.id);
+  };
+  const lead = at("lead");
+  const main = at("main");
+  const end = at("end");
+  const opacity = visible && !away ? 1 : 0;
+  const slot = (t) => {
+    const tip = t.hint !== void 0 ? `${t.label} (${t.hint})` : t.label;
+    const g = toolGlyph(t);
+    const glyph = /* @__PURE__ */ jsx2(Glyph, { glyph: g.node });
+    if (t.kind === void 0) {
+      return /* @__PURE__ */ jsx2("button", { type: "button", className: "ice-sm-btn is-dim", "data-tool": t.id, "data-glyph-missing": g.missing, "aria-label": t.label, "aria-disabled": "true", title: tip, tabIndex: -1, children: glyph }, t.id);
+    }
+    const on = t.kind === "mode" && t.id === shown.active;
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: t.swatch !== void 0 ? "ice-sm-ink" : "ice-sm-btn",
+        "data-tool": t.id,
+        "data-kind": t.kind,
+        "data-glyph-missing": g.missing,
+        "data-on": on ? "true" : void 0,
+        "aria-pressed": t.kind === "mode" ? on : void 0,
+        "aria-label": t.label,
+        title: tip,
+        onClick: () => {
+          setOpen(false);
+          engine.ops.useHeldTool(t.id);
+        },
+        children: t.swatch !== void 0 ? /* @__PURE__ */ jsx2("i", { style: { background: t.swatch } }) : glyph
+      },
+      t.id
+    );
+  };
+  const done = /* @__PURE__ */ jsxs("button", { type: "button", className: "ice-sm-text", "data-act": "done", "aria-label": "Done", title: "Done (Esc)", onClick: () => {
+    setOpen(false);
+    engine.ops.putDown();
+  }, children: [
+    /* @__PURE__ */ jsx2(Glyph, { glyph: "check" }),
+    /* @__PURE__ */ jsx2("span", { children: "Done" })
+  ] }, "done");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      "data-ice-selection-menu": "",
+      "data-canvas-interactive": "",
+      "data-away": String(away),
+      "data-visible": String(visible),
+      "data-held": String(shown.held),
+      role: "toolbar",
+      "aria-label": shown.held ? "In hand" : "Selection",
+      "aria-hidden": !visible,
+      onPointerDown: (e) => e.stopPropagation(),
+      style: {
+        opacity,
+        visibility: visible ? "visible" : "hidden",
+        pointerEvents: opacity === 1 ? "auto" : "none",
+        transition: transitionOf(away, visible, traveling)
+      },
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "ice-sm-bar", children: shown.held ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          lead.map(button),
+          lead.length > 0 ? /* @__PURE__ */ jsx2("span", { className: "ice-sm-rule", "aria-hidden": "true" }) : null,
+          tools2.current.map(slot),
+          tools2.current.length > 0 ? /* @__PURE__ */ jsx2("span", { className: "ice-sm-rule", "aria-hidden": "true" }) : null,
+          done
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          lead.map(button),
+          lead.length > 0 && main.length > 0 ? /* @__PURE__ */ jsx2("span", { className: "ice-sm-rule", "aria-hidden": "true" }) : null,
+          main.map(button),
+          end.length > 0 && lead.length + main.length > 0 ? /* @__PURE__ */ jsx2("span", { className: "ice-sm-rule", "aria-hidden": "true" }) : null,
+          end.map(button)
+        ] }) }),
+        open && !shown.held ? /* @__PURE__ */ jsx2("div", { className: "ice-sm-sheet", role: "menu", style: below ? { top: "calc(100% + 6px)" } : { bottom: "calc(100% + 6px)" }, children: listed.filter((a) => a.id !== "more").map((a) => /* @__PURE__ */ jsxs("button", { type: "button", role: "menuitem", className: "ice-sm-item", "data-act": a.id, "data-tone": a.tone, onClick: () => {
+          setOpen(false);
+          a.run(engine, state);
+        }, children: [
+          /* @__PURE__ */ jsx2("span", { children: labelOf(a, state) }),
+          a.keys !== void 0 ? /* @__PURE__ */ jsx2("kbd", { children: a.keys }) : null
+        ] }, a.id)) }) : null,
+        /* @__PURE__ */ jsx2("style", { children: STYLE })
+      ]
+    }
+  );
+}
+function useOptionalEngine() {
+  try {
+    return useCanvasEngine();
+  } catch {
+    return void 0;
+  }
+}
+function selectionTaped(engine) {
+  const sel = selectedEntities(engine.world);
+  return sel.length > 0 && sel.every((e) => engine.world.hasTag(e, Locked));
+}
+
+// ../react/src/tray-bar.tsx
+import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var TRAY_BAR = { height: 40, foot: 16, ride: 10, margin: 16, awayMs: 90, inMs: 180, headInset: 12, headFrom: 0.6 };
+function placeTrayBar(a, height = TRAY_BAR.height) {
+  const B = TRAY_BAR;
+  const foot = a.view.height - B.foot;
+  const d = a.drawer;
+  const bottom = d === null ? foot : Math.min(foot, d.y - B.ride);
+  if (d === null) return { y: bottom - height, head: null };
+  const t = Math.min(Math.max((d.p - B.headFrom) / (1 - B.headFrom), 0), 1);
+  return { y: bottom - height, head: { x: d.x + B.headInset, y: d.header.y, w: Math.max(0, d.w - 2 * B.headInset), h: d.header.h, opacity: t * t * (3 - 2 * t) } };
+}
+var stadium = (x, y) => /* @__PURE__ */ jsx3("rect", { x, y, width: "3.5", height: "8.5", rx: "1.75" });
+var TRAY_BAR_GLYPHS = {
+  pegboard: /* @__PURE__ */ jsxs2("g", { fill: "currentColor", children: [
+    stadium(5.75, 3.5),
+    stadium(14.75, 3.5),
+    stadium(10.25, 12)
+  ] }),
+  close: /* @__PURE__ */ jsx3("path", { d: "M7 7l10 10M17 7L7 17", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" })
+};
+var DESK_TAPE = '--ice-tape:#17181b;--ice-tape-letters-rgb:236 235 228;--ice-tape-chosen:#efe9da;--ice-tape-chosen-ink:rgb(16 9 4);--ice-tape-font:var(--vf-font-mono,ui-monospace,"SF Mono",Menlo,monospace)';
+var STYLE2 = `
+[data-ice-tray-bar]{${DESK_INK};${DESK_TAPE};--ice-tb-night:0;position:absolute;left:0;right:0;top:0;height:0;z-index:19;pointer-events:none;font:500 12.5px/1 var(--ice-menu-font,system-ui,-apple-system,sans-serif);user-select:none}
+[data-ice-tray-bar] .ice-tb-handle{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;pointer-events:none;will-change:transform}
+[data-ice-tray-bar] .ice-tb-bar{pointer-events:auto;display:flex;align-items:center;height:40px;padding:4px;box-sizing:border-box;white-space:nowrap;border-radius:20px;background:var(--ice-menu-ink);color:var(--ice-menu-cream);box-shadow:inset 0 0 0 1px var(--ice-menu-hair),var(--ice-menu-shadow);opacity:1;visibility:visible;transition:opacity ${TRAY_BAR.inMs}ms ease-out}
+[data-ice-tray-bar][data-visible="false"] .ice-tb-bar{opacity:0;visibility:hidden;pointer-events:none;transition:opacity ${TRAY_BAR.awayMs}ms ease-out,visibility 0s linear ${TRAY_BAR.awayMs}ms}
+[data-ice-tray-bar] button{appearance:none;border:0;margin:0;padding:0;background:none;color:inherit;font:inherit;cursor:pointer}
+[data-ice-tray-bar] button:focus-visible{outline:2px solid var(--ice-menu-brass);outline-offset:1px}
+[data-ice-tray-bar] .ice-tb-toggle{flex:none;height:32px;padding:0 12px 0 9px;border-radius:16px;display:inline-flex;align-items:center;gap:7px;background:rgb(var(--ice-menu-cream-rgb) / .08);transition:background 120ms ease,transform 120ms ease}
+[data-ice-tray-bar] .ice-tb-toggle:hover{background:rgb(var(--ice-menu-cream-rgb) / .15)}
+[data-ice-tray-bar] .ice-tb-toggle:active{transform:scale(.97)}
+[data-ice-tray-bar] .ice-tb-head{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;visibility:visible;will-change:transform,opacity}
+[data-ice-tray-bar][data-visible="false"] .ice-tb-head,[data-ice-tray-bar] .ice-tb-head[data-shown="false"]{visibility:hidden}
+[data-ice-tray-bar] .ice-tb-chips{pointer-events:auto;display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;padding:8px 7px;box-sizing:border-box;overflow-x:auto;scrollbar-width:none}
+[data-ice-tray-bar] .ice-tb-chips::-webkit-scrollbar{display:none}
+[data-ice-tray-bar] .ice-tb-chips[data-before="true"]{mask-image:linear-gradient(90deg,transparent 0,#000 18px)}
+[data-ice-tray-bar] .ice-tb-chips[data-after="true"]{mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%)}
+[data-ice-tray-bar] .ice-tb-chips[data-before="true"][data-after="true"]{mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
+[data-ice-tray-bar] .ice-tb-chip{--n:var(--ice-tb-night);flex:none;height:26px;padding:0 10px;border-radius:2.5px;display:inline-flex;align-items:center;font:600 11px/1 var(--ice-tape-font);letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--ice-tape-letters-rgb) / calc(1 - .45 * var(--n)));background:linear-gradient(180deg,rgb(255 255 255 / calc(.1 * (1 - var(--n)))) 0,rgb(255 255 255 / calc(.035 * (1 - var(--n)))) 46%,rgb(255 255 255 / 0) 54%),var(--ice-tape);text-shadow:0 1px 0 rgb(0 0 0 / .55),0 -.5px 0 rgb(255 255 255 / calc(.1 * (1 - var(--n))));box-shadow:inset 0 .75px 0 rgb(255 255 255 / calc(.1 * (1 - var(--n)))),.6px .9px 0 rgb(0 0 0 / calc(.24 * (1 - .5 * var(--n)))),1px 2px 3px rgb(0 0 0 / calc(.16 * (1 - .5 * var(--n))));transition:transform 120ms ease,box-shadow 120ms ease}
+[data-ice-tray-bar] .ice-tb-chip:hover{transform:translateY(-1px);box-shadow:inset 0 .75px 0 rgb(255 255 255 / calc(.1 * (1 - var(--n)))),1px 1.8px .5px rgb(0 0 0 / calc(.22 * (1 - .5 * var(--n)))),1.6px 3.2px 5px rgb(0 0 0 / calc(.2 * (1 - .5 * var(--n))))}
+[data-ice-tray-bar] .ice-tb-chip:active{transform:none}
+[data-ice-tray-bar] .ice-tb-chip:focus-visible{outline:2px solid var(--ice-menu-brass);outline-offset:2px}
+[data-ice-tray-bar] .ice-tb-chip[data-on="true"]{--ice-tape:var(--ice-tape-chosen);color:var(--ice-tape-chosen-ink);text-shadow:0 1px 0 rgb(255 255 255 / .5),0 -.5px 0 rgb(60 40 20 / .18);filter:saturate(calc(1 - .7 * var(--n))) brightness(calc(1 - .4 * var(--n)))}
+`;
+var shownOf2 = (a) => ({
+  visible: !a.held && a.entries > 0,
+  open: a.open,
+  category: a.category,
+  chips: a.categories.map((c) => `${c.id}:${c.label}:${c.count}`).join("|")
+});
+var sameShown2 = (a, b) => a.visible === b.visible && a.open === b.open && a.category === b.category && a.chips === b.chips;
+var pressed = (run) => (e) => {
+  if (e.key !== "Enter" && e.key !== " ") return;
+  e.preventDefault();
+  if (!e.repeat) run();
+};
+var spaceUp = (e) => {
+  if (e.key === " ") e.preventDefault();
+};
+var clicked = (run) => (e) => {
+  run();
+  if (e.detail > 0) e.currentTarget.blur();
+};
+function TrayBar({ source, label = "Objects", keys = "A" }) {
+  const root = useRef5(null);
+  const handle = useRef5(null);
+  const head = useRef5(null);
+  const chipsRef = useRef5(null);
+  const toggleRef = useRef5(null);
+  const cats = useRef5(source.anchor().categories);
+  const [shown, setShown] = useState2(() => shownOf2(source.anchor()));
+  const edges = () => {
+    const c = chipsRef.current;
+    if (c === null) return;
+    const more = c.scrollWidth - c.clientWidth;
+    c.dataset.before = String(more > 0.5 && c.scrollLeft > 0.5);
+    c.dataset.after = String(more > 0.5 && c.scrollLeft < more - 0.5);
+  };
+  const width = useRef5(-1);
+  const placeRef = useRef5(() => {
+  });
+  placeRef.current = () => {
+    const a = source.anchor();
+    cats.current = a.categories;
+    const next = shownOf2(a);
+    setShown((prev) => sameShown2(prev, next) ? prev : next);
+    const at = placeTrayBar(a);
+    if (handle.current !== null) handle.current.style.transform = `translateY(${at.y.toFixed(1)}px)`;
+    const h = head.current;
+    if (h !== null) {
+      const box = at.head;
+      h.dataset.shown = String(box !== null && box.opacity > 0);
+      if (box !== null) {
+        h.style.transform = `translate(${box.x.toFixed(1)}px, ${box.y.toFixed(1)}px)`;
+        h.style.width = `${box.w.toFixed(1)}px`;
+        h.style.height = `${box.h.toFixed(1)}px`;
+        h.style.opacity = box.opacity.toFixed(3);
+        if (box.w !== width.current) {
+          width.current = box.w;
+          edges();
+        }
+      }
+    }
+    root.current?.style.setProperty("--ice-tb-night", Math.min(Math.max(a.night, 0), 1).toFixed(3));
+  };
+  useLayoutEffect2(() => {
+    const run = () => placeRef.current();
+    run();
+    return source.subscribe(run);
+  }, [source]);
+  useLayoutEffect2(() => {
+    edges();
+  });
+  useEffect3(() => {
+    if (!shown.open && chipsRef.current?.contains(document.activeElement) === true) toggleRef.current?.focus();
+  }, [shown.open]);
+  const toggle = () => {
+    source.toggle();
+  };
+  const walk = (e) => {
+    const found = chipsRef.current?.querySelectorAll("button");
+    const list = found === void 0 ? [] : Array.from(found);
+    const at = list.indexOf(document.activeElement);
+    const to = e.key === "ArrowRight" ? at + 1 : e.key === "ArrowLeft" ? at - 1 : e.key === "Home" ? 0 : e.key === "End" ? list.length - 1 : null;
+    if (at < 0 || to === null) return;
+    e.preventDefault();
+    list[Math.min(Math.max(to, 0), list.length - 1)]?.focus();
+  };
+  const chips = [{ id: "", label: "All", count: 0 }, ...cats.current];
+  return /* @__PURE__ */ jsxs2("div", { ref: root, "data-ice-tray-bar": "", "data-open": String(shown.open), "data-visible": String(shown.visible), "aria-hidden": !shown.visible, children: [
+    /* @__PURE__ */ jsx3("div", { ref: handle, className: "ice-tb-handle", children: /* @__PURE__ */ jsx3("div", { className: "ice-tb-bar", "data-canvas-interactive": "", onPointerDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        ref: toggleRef,
+        type: "button",
+        className: "ice-tb-toggle",
+        "data-act": "tray",
+        "aria-expanded": shown.open,
+        "aria-keyshortcuts": keys,
+        title: `${label} (${keys})`,
+        onClick: clicked(toggle),
+        onKeyDown: pressed(toggle),
+        onKeyUp: spaceUp,
+        children: [
+          /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", width: 16, height: 16, "aria-hidden": "true", focusable: "false", children: shown.open ? TRAY_BAR_GLYPHS.close : TRAY_BAR_GLYPHS.pegboard }),
+          /* @__PURE__ */ jsx3("span", { children: label })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx3("div", { ref: head, className: "ice-tb-head", children: /* @__PURE__ */ jsx3("div", { ref: chipsRef, className: "ice-tb-chips", role: "toolbar", "aria-label": "Categories", "data-canvas-interactive": "", onKeyDown: walk, onScroll: edges, onPointerDown: (e) => e.stopPropagation(), children: chips.map((c) => {
+      const on = c.id === shown.category;
+      const choose = () => {
+        source.category(c.id);
+      };
+      return /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "ice-tb-chip",
+          "data-category": c.id,
+          "data-on": on ? "true" : void 0,
+          "aria-pressed": on,
+          tabIndex: shown.open ? void 0 : -1,
+          onClick: clicked(choose),
+          onKeyDown: pressed(choose),
+          onKeyUp: spaceUp,
+          children: c.label
+        },
+        c.id === "" ? "*" : `=${c.id}`
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx3("style", { children: STYLE2 })
+  ] });
+}
+
+// ../react/src/desk.tsx
+import { useEffect as useEffect4, useRef as useRef6 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Desk({ engine, layer, onReady, keymapOverrides, className, style, children }) {
+  const containerRef = useRef6(null);
+  const onReadyRef = useRef6(onReady);
+  onReadyRef.current = onReady;
+  const keymapOverridesRef = useRef6(keymapOverrides);
+  keymapOverridesRef.current = keymapOverrides;
+  useEffect4(() => {
+    const container = containerRef.current;
+    if (container === null) return;
+    const mount = createDeskHost({ container, engine, layer });
+    const detachKeymap = attachKeymap(engine, void 0, keymapOverridesRef.current ?? []);
+    const undoReady = onReadyRef.current?.({ engine, host: mount.host, layer: mount.layer, focus: mount.focus });
+    return () => {
+      if (typeof undoReady === "function") undoReady();
+      detachKeymap();
+      mount.dispose();
+    };
+  }, [engine, layer]);
+  return /* @__PURE__ */ jsx4(EngineProvider, { engine, children: /* @__PURE__ */ jsx4("div", { ref: containerRef, className, style: { width: "100%", height: "100%", ...style }, "data-ice-canvas": "", children }) });
+}
+
+// ../react/src/index.ts
+var REACT_VERSION = "0.0.0";
 export {
+  DESK_TAPE,
+  Desk,
   EngineProvider,
-  InfiniteCanvas,
+  FramePreviewBoundary,
   REACT_VERSION,
-  WidgetHiddenContext,
-  WidgetPreview,
-  WidgetRoot,
+  SELECTION_GLYPHS,
+  SELECTION_MENU,
+  SelectionMenu,
+  TRAY_BAR,
+  TRAY_BAR_GLYPHS,
+  TrayBar,
   attachKeymap,
-  getPreviewSnapshot,
-  hasPreviewSnapshot,
-  setPreviewSnapshot,
-  subscribePreviewSnapshots,
+  defaultSelectionActions,
+  nudgeSelection,
+  placeSelectionMenu,
+  placeTrayBar,
+  selectionTaped,
+  toggleTape,
+  unlessInert,
   useBehavior,
   useBreakpoint,
+  useCanvasCatalog,
+  useCanvasDiagnostics,
   useCanvasEngine,
+  useCanvasTools,
   useCommit,
+  useCurrentCanvas,
   useFrameFreeze,
+  useFramePreview,
   useOps,
   usePresencePeers,
   useSelected,