@vibecook/ice 0.11.0 → 0.14.0

package/dist/chunk-IBWWLA6D.js

@@ -0,0 +1,634 @@
+import {
+  Camera,
+  CursorVisual,
+  Follows,
+  NO_MODS,
+  Position,
+  PresenceInfo,
+  Viewport,
+  defineQuery,
+  writeRuntimeResource
+} from "./chunk-DYK6KNLG.js";
+import {
+  worldToScreen
+} from "./chunk-JS6PG6YD.js";
+
+// ../dom/src/host.ts
+var CONTAINER_STYLE = {
+  overflow: "hidden",
+  touchAction: "none",
+  userSelect: "none"
+};
+function createCanvasHost(container) {
+  const view = container.ownerDocument.defaultView;
+  const position = container.style.position !== "" ? container.style.position : view?.getComputedStyle(container).position ?? "";
+  const promoteToRelative = position === "" || position === "static";
+  if (promoteToRelative) container.style.position = "relative";
+  const priorContainerStyle = Object.keys(CONTAINER_STYLE).map((prop) => {
+    const cssName = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+    return [cssName, container.style.getPropertyValue(cssName)];
+  });
+  Object.assign(container.style, CONTAINER_STYLE);
+  return {
+    container,
+    dispose() {
+      if (promoteToRelative) container.style.removeProperty("position");
+      for (const [cssName, prior] of priorContainerStyle) {
+        if (prior !== "") container.style.setProperty(cssName, prior);
+        else container.style.removeProperty(cssName);
+      }
+    }
+  };
+}
+
+// ../dom/src/loop.ts
+function startRafLoop(engine, beforeStep, opts = {}) {
+  const sleepy = opts.sleep === true;
+  const frame = engine.frame;
+  let handle = 0;
+  let stopped = false;
+  let parked = false;
+  let asleep = false;
+  let timer;
+  const tick = (now) => {
+    if (stopped) return;
+    if (!frame.claimStep()) {
+      parked = true;
+      handle = 0;
+      return;
+    }
+    try {
+      beforeStep?.(now);
+      engine.step(now);
+    } finally {
+      if (!stopped) schedule();
+    }
+  };
+  const schedule = () => {
+    if (!sleepy) {
+      handle = requestAnimationFrame(tick);
+      return;
+    }
+    const t = performance.now();
+    const due = frame.nextStep(t);
+    if (due <= t) {
+      handle = requestAnimationFrame(tick);
+      return;
+    }
+    handle = 0;
+    asleep = true;
+    frame.sleeping(true);
+    if (due !== Number.POSITIVE_INFINITY) timer = setTimeout(() => rise(true), Math.max(0, due - t));
+  };
+  const rise = (timed) => {
+    if (stopped || !asleep) return;
+    asleep = false;
+    if (timer !== void 0) clearTimeout(timer);
+    timer = void 0;
+    frame.sleeping(false, timed);
+    handle = requestAnimationFrame(tick);
+  };
+  const wake = () => {
+    if (stopped || !parked || frame.isFrozen()) return;
+    parked = false;
+    handle = requestAnimationFrame(tick);
+  };
+  const unsubscribe = frame.onChange(wake);
+  const unsubscribeWake = sleepy ? frame.onWake(() => rise(false)) : void 0;
+  handle = requestAnimationFrame(tick);
+  return () => {
+    stopped = true;
+    unsubscribe();
+    unsubscribeWake?.();
+    if (timer !== void 0) clearTimeout(timer);
+    if (asleep) frame.sleeping(false);
+    cancelAnimationFrame(handle);
+  };
+}
+
+// ../dom/src/input-ownership.ts
+var KEYBOARD_CLAIM_ATTR = "data-canvas-keyboard";
+var CLAIM_OWNS_ESCAPE = "escape";
+var NO_CLAIM = { claimed: false, ownsEscape: false };
+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 keyboardClaimOf(target) {
+  if (!(target instanceof Element)) return NO_CLAIM;
+  const marked = target.closest(`[${KEYBOARD_CLAIM_ATTR}]`);
+  if (marked === null) return NO_CLAIM;
+  return { claimed: true, ownsEscape: marked.getAttribute(KEYBOARD_CLAIM_ATTR) === CLAIM_OWNS_ESCAPE };
+}
+var SCROLL_OPT_OUT_SELECTOR = `[${KEYBOARD_CLAIM_ATTR}], [data-canvas-interactive], input, textarea, select, [contenteditable=""], [contenteditable="true"]`;
+var SCROLL_EPS = 1;
+function hasScrollRoom(el, dx, dy) {
+  const style = el.ownerDocument.defaultView?.getComputedStyle(el);
+  if (style === void 0 || style === null) return false;
+  if (Math.abs(dy) >= Math.abs(dx)) {
+    if (dy === 0) return false;
+    const oy = style.overflowY;
+    if (oy !== "auto" && oy !== "scroll") return false;
+    if (el.scrollHeight <= el.clientHeight + SCROLL_EPS) return false;
+    return dy > 0 ? el.scrollTop + el.clientHeight < el.scrollHeight - SCROLL_EPS : el.scrollTop > SCROLL_EPS;
+  }
+  if (dx === 0) return false;
+  const ox = style.overflowX;
+  if (ox !== "auto" && ox !== "scroll") return false;
+  if (el.scrollWidth <= el.clientWidth + SCROLL_EPS) return false;
+  return dx > 0 ? el.scrollLeft + el.clientWidth < el.scrollWidth - SCROLL_EPS : el.scrollLeft > SCROLL_EPS;
+}
+function wheelCede(target, container, dx, dy) {
+  if (!(target instanceof Element)) return false;
+  if (dx === 0 && dy === 0) return false;
+  let sawScrollableRoom = false;
+  for (let el = target; el !== null && el !== container; el = el.parentElement) {
+    if (el instanceof HTMLElement && hasScrollRoom(el, dx, dy)) sawScrollableRoom = true;
+    if (sawScrollableRoom && el.matches(SCROLL_OPT_OUT_SELECTOR)) return true;
+  }
+  return false;
+}
+
+// ../dom/src/pointer-adapter.ts
+var WHEEL_LINE_PX = 16;
+var INTERACTIVE_SELECTOR = 'input, textarea, select, button, a[href], [contenteditable=""], [contenteditable="true"], audio[controls], video[controls], [data-canvas-interactive]';
+function crossesInteractive(target, container) {
+  if (!(target instanceof Element)) return false;
+  const match = target.closest(INTERACTIVE_SELECTOR);
+  return match !== null && container.contains(match);
+}
+function pointerIdOf(e) {
+  if (e.pointerType === "touch") return `touch:${e.pointerId}`;
+  if (e.pointerType === "pen") return "pen";
+  return "mouse";
+}
+function deviceOf(e) {
+  if (e.pointerType === "touch") return "touch";
+  if (e.pointerType === "pen") return "pen";
+  return "mouse";
+}
+function attachPointerAdapter(host, queue) {
+  const { container } = host;
+  const view = container.ownerDocument.defaultView;
+  let spaceHeld = false;
+  const live = /* @__PURE__ */ new Map();
+  const CAPTURE_SLOP_PX = 4;
+  const capture = (pointerId) => {
+    if (typeof container.setPointerCapture !== "function") return;
+    try {
+      container.setPointerCapture(pointerId);
+    } catch {
+    }
+  };
+  let lastMods = { shift: false, ctrl: false, alt: false, meta: false, space: false };
+  const relative = (clientX, clientY) => {
+    const rect = container.getBoundingClientRect();
+    return { x: clientX - rect.left, y: clientY - rect.top };
+  };
+  const pointerMods = (e) => ({
+    shift: e.shiftKey,
+    ctrl: e.ctrlKey,
+    alt: e.altKey,
+    meta: e.metaKey,
+    space: spaceHeld
+  });
+  const onPointerDown = (e) => {
+    const id = pointerIdOf(e);
+    const device = deviceOf(e);
+    const { x, y } = relative(e.clientX, e.clientY);
+    const native = crossesInteractive(e.target, container);
+    live.set(id, { device, x, y, downX: x, downY: y, native, captured: false });
+    const surfaceHandled = native;
+    queue.enqueue({
+      kind: "down",
+      pointerId: id,
+      device,
+      screenX: x,
+      screenY: y,
+      buttons: e.buttons,
+      mods: pointerMods(e),
+      tMs: e.timeStamp,
+      ...surfaceHandled ? { surfaceHandled: true } : {},
+      // The down IS a hover-bearing fact: a touch's first event must seed the
+      // pointer's OverInteractive truth (no prior moves exist to).
+      overInteractive: surfaceHandled
+    });
+  };
+  const onPointerMove = (e) => {
+    const id = pointerIdOf(e);
+    const device = deviceOf(e);
+    const { x, y } = relative(e.clientX, e.clientY);
+    let seen = live.get(id);
+    if (seen === void 0 && e.buttons !== 0 && !crossesInteractive(e.target, container)) {
+      seen = { device, x, y, downX: x, downY: y, native: false, captured: false };
+      live.set(id, seen);
+    }
+    if (seen !== void 0) {
+      seen.x = x;
+      seen.y = y;
+      if (!seen.captured && !seen.native && e.buttons !== 0 && Math.hypot(x - seen.downX, y - seen.downY) > CAPTURE_SLOP_PX) {
+        capture(e.pointerId);
+        seen.captured = true;
+      }
+    }
+    queue.enqueue({
+      kind: "move",
+      pointerId: id,
+      device,
+      screenX: x,
+      screenY: y,
+      buttons: e.buttons,
+      mods: pointerMods(e),
+      tMs: e.timeStamp,
+      // Hover fact, every move: the DOM chain check.
+      overInteractive: crossesInteractive(e.target, container)
+    });
+  };
+  const endPointer = (kind) => (e) => {
+    const id = pointerIdOf(e);
+    const device = deviceOf(e);
+    const { x, y } = relative(e.clientX, e.clientY);
+    live.delete(id);
+    if (typeof container.releasePointerCapture === "function") {
+      try {
+        container.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+    }
+    queue.enqueue({
+      kind,
+      pointerId: id,
+      device,
+      screenX: x,
+      screenY: y,
+      buttons: e.buttons,
+      mods: pointerMods(e)
+      // No overInteractive stamp: a capture-retargeted up reads the container,
+      // not the content under the pointer — the next real move re-truths it.
+    });
+  };
+  const onPointerUp = endPointer("up");
+  const onPointerCancel = endPointer("cancel");
+  const onWheel = (e) => {
+    const { x, y } = relative(e.clientX, e.clientY);
+    const scale = e.deltaMode === 1 ? WHEEL_LINE_PX : 1;
+    if (e.ctrlKey) {
+      e.preventDefault();
+      queue.enqueue({ kind: "wheel", pointerId: "mouse", device: "mouse", screenX: x, screenY: y, buttons: e.buttons, mods: pointerMods(e), wheel: { dx: 0, dy: 0, pinch: e.deltaY } });
+      return;
+    }
+    const wheel = { dx: e.deltaX * scale, dy: e.deltaY * scale, pinch: 0 };
+    if (wheelCede(e.target, container, e.deltaX, e.deltaY)) {
+      queue.enqueue({ kind: "wheel", pointerId: "mouse", device: "mouse", screenX: x, screenY: y, buttons: e.buttons, mods: pointerMods(e), wheel, wheelHandled: true });
+      return;
+    }
+    e.preventDefault();
+    queue.enqueue({ kind: "wheel", pointerId: "mouse", device: "mouse", screenX: x, screenY: y, buttons: e.buttons, mods: pointerMods(e), wheel });
+  };
+  const emitKeyIfChanged = (e) => {
+    const mods = { shift: e.shiftKey, ctrl: e.ctrlKey, alt: e.altKey, meta: e.metaKey, space: spaceHeld };
+    if (mods.shift === lastMods.shift && mods.ctrl === lastMods.ctrl && mods.alt === lastMods.alt && mods.meta === lastMods.meta && mods.space === lastMods.space) {
+      return;
+    }
+    lastMods = { ...mods };
+    queue.enqueue({ kind: "key", pointerId: "", device: "mouse", screenX: 0, screenY: 0, buttons: 0, mods });
+  };
+  const isSpace = (e) => e.key === " " || e.code === "Space";
+  const onKeyDown = (e) => {
+    if (isSpace(e) && !e.defaultPrevented) {
+      if (isEditableTarget(e.target)) {
+      } else if (keyboardClaimOf(e.target).claimed) {
+        e.preventDefault();
+      } else {
+        e.preventDefault();
+        spaceHeld = true;
+      }
+    }
+    emitKeyIfChanged(e);
+  };
+  const onKeyUp = (e) => {
+    if (isSpace(e)) {
+      if (!e.defaultPrevented && !isEditableTarget(e.target) && !keyboardClaimOf(e.target).claimed) {
+        e.preventDefault();
+      }
+      spaceHeld = false;
+    }
+    emitKeyIfChanged(e);
+  };
+  const cancelAllInput = () => {
+    for (const [id, s] of live) {
+      queue.enqueue({ kind: "cancel", pointerId: id, device: s.device, screenX: s.x, screenY: s.y, buttons: 0, mods: { ...NO_MODS, space: spaceHeld } });
+    }
+    live.clear();
+    spaceHeld = false;
+    if (lastMods.space || lastMods.shift || lastMods.ctrl || lastMods.alt || lastMods.meta) {
+      lastMods = { ...NO_MODS };
+      queue.enqueue({
+        kind: "key",
+        pointerId: "",
+        device: "mouse",
+        screenX: 0,
+        screenY: 0,
+        buttons: 0,
+        mods: { ...NO_MODS }
+      });
+    }
+  };
+  const onBlur = () => {
+    cancelAllInput();
+  };
+  container.addEventListener("pointerdown", onPointerDown);
+  container.addEventListener("pointermove", onPointerMove);
+  container.addEventListener("pointerup", onPointerUp);
+  container.addEventListener("pointercancel", onPointerCancel);
+  container.addEventListener("wheel", onWheel, { passive: false });
+  view?.addEventListener("keydown", onKeyDown);
+  view?.addEventListener("keyup", onKeyUp);
+  view?.addEventListener("blur", onBlur);
+  return () => {
+    cancelAllInput();
+    container.removeEventListener("pointerdown", onPointerDown);
+    container.removeEventListener("pointermove", onPointerMove);
+    container.removeEventListener("pointerup", onPointerUp);
+    container.removeEventListener("pointercancel", onPointerCancel);
+    container.removeEventListener("wheel", onWheel);
+    view?.removeEventListener("keydown", onKeyDown);
+    view?.removeEventListener("keyup", onKeyUp);
+    view?.removeEventListener("blur", onBlur);
+  };
+}
+
+// ../dom/src/reflectors/cursor.ts
+function createCursorReflector(host, readCursor) {
+  let writes = 0;
+  let last;
+  return {
+    name: "cursor",
+    always: true,
+    flush(_world) {
+      const next = readCursor();
+      if (next === last) return;
+      last = next;
+      host.container.style.cursor = next;
+      writes++;
+    },
+    writes: () => writes
+  };
+}
+
+// ../dom/src/reflectors/remote-cursors.ts
+var remoteCursorQ = defineQuery([Position, CursorVisual]);
+function createRemoteCursorsReflector(host, world) {
+  const doc = host.container.ownerDocument;
+  const plane = doc.createElement("div");
+  Object.assign(plane.style, {
+    position: "absolute",
+    inset: "0",
+    overflow: "hidden",
+    pointerEvents: "none"
+  });
+  host.container.appendChild(plane);
+  const pool = /* @__PURE__ */ new Map();
+  const ensure = (e) => {
+    let n = pool.get(e);
+    if (n !== void 0) return n;
+    const root = doc.createElement("div");
+    Object.assign(root.style, {
+      position: "absolute",
+      left: "0",
+      top: "0",
+      willChange: "transform",
+      pointerEvents: "none"
+    });
+    const arrow = doc.createElement("div");
+    Object.assign(arrow.style, {
+      width: "0",
+      height: "0",
+      borderLeft: "6px solid transparent",
+      borderRight: "6px solid transparent",
+      borderBottom: "14px solid currentColor",
+      transform: "rotate(-32deg)"
+    });
+    const label = doc.createElement("div");
+    Object.assign(label.style, {
+      marginTop: "2px",
+      marginLeft: "8px",
+      padding: "1px 6px",
+      borderRadius: "8px",
+      font: "11px system-ui, sans-serif",
+      color: "#fff",
+      whiteSpace: "nowrap"
+    });
+    root.appendChild(arrow);
+    root.appendChild(label);
+    plane.appendChild(root);
+    n = { root, label, color: "", name: "", x: Number.NaN, y: Number.NaN };
+    pool.set(e, n);
+    return n;
+  };
+  const reflector = {
+    name: "remoteCursors",
+    observe: {
+      resources: [Camera],
+      queries: [{ q: remoteCursorQ, cols: [Position, CursorVisual] }]
+    },
+    flush: (w) => {
+      const cam = w.getResource(Camera) ?? { x: 0, y: 0, zoom: 1 };
+      const seen = /* @__PURE__ */ new Set();
+      w.query(remoteCursorQ).each((b) => {
+        for (const r of b) {
+          const e = b.entity(r);
+          if (w.get(e, CursorVisual)?.kind !== "remote") continue;
+          seen.add(e);
+          const p = w.read(e, Position);
+          const s = worldToScreen(p.x, p.y, cam);
+          const n = ensure(e);
+          if (n.x !== s.x || n.y !== s.y) {
+            n.root.style.transform = `translate(${s.x}px, ${s.y}px)`;
+            n.x = s.x;
+            n.y = s.y;
+          }
+          const peer = w.getRelation(e, Follows);
+          const info = peer !== void 0 ? w.get(peer, PresenceInfo) : void 0;
+          const color = info?.color ?? "#7a8aa0";
+          const name = info?.name ?? "";
+          if (n.color !== color) {
+            n.root.style.color = color;
+            n.label.style.background = color;
+            n.color = color;
+          }
+          if (n.name !== name) {
+            n.label.textContent = name;
+            n.label.style.display = name === "" ? "none" : "block";
+            n.name = name;
+          }
+        }
+      });
+      for (const [e, n] of pool) {
+        if (!seen.has(e)) {
+          n.root.remove();
+          pool.delete(e);
+        }
+      }
+    }
+  };
+  return {
+    reflector,
+    destroy() {
+      pool.clear();
+      plane.remove();
+    }
+  };
+}
+
+// ../dom/src/widget-focus.ts
+var FOCUS_PROXY_ATTR = "data-canvas-focus";
+var FOCUSABLE_SELECTOR = 'input, textarea, select, button, a[href], [contenteditable=""], [contenteditable="true"], [tabindex], audio[controls], video[controls], iframe';
+function focusNodeOf(claimHost) {
+  const proxy = claimHost.querySelector(`[${FOCUS_PROXY_ATTR}]`);
+  return proxy ?? claimHost;
+}
+function attachWidgetFocus(host, lookup) {
+  const { container } = host;
+  const doc = container.ownerDocument;
+  const onPointerDown = (e) => {
+    if (!(e.target instanceof Element)) return;
+    const marked = e.target.closest(`[${KEYBOARD_CLAIM_ATTR}]`);
+    if (!(marked instanceof HTMLElement) || !container.contains(marked)) return;
+    const focusable = e.target.closest(FOCUSABLE_SELECTOR);
+    if (focusable !== null && focusable !== marked && marked.contains(focusable)) return;
+    const node = focusNodeOf(marked);
+    if (doc.activeElement === node) return;
+    e.preventDefault();
+    node.focus({ preventScroll: true });
+  };
+  container.addEventListener("pointerdown", onPointerDown, true);
+  return {
+    focusWidget(entity) {
+      const content = lookup?.hostFor(entity);
+      const hostEl = content?.parentElement;
+      if (!(hostEl instanceof HTMLElement) || !hostEl.hasAttribute(KEYBOARD_CLAIM_ATTR)) return false;
+      const node = focusNodeOf(hostEl);
+      node.focus({ preventScroll: true });
+      return doc.activeElement === node;
+    },
+    blurFocus() {
+      const active = doc.activeElement;
+      if (!(active instanceof HTMLElement || active instanceof SVGElement)) return false;
+      if (active.closest(`[${KEYBOARD_CLAIM_ATTR}]`) === null) return false;
+      active.blur();
+      return true;
+    },
+    detach() {
+      container.removeEventListener("pointerdown", onPointerDown, true);
+    }
+  };
+}
+
+// ../dom/src/desk-host.ts
+function createDeskHost(opts) {
+  const { container, engine } = opts;
+  const { world, engine: core, stack } = engine;
+  const host = createCanvasHost(container);
+  let layer;
+  try {
+    layer = opts.layer({
+      host,
+      world,
+      framePick: stack.framePick,
+      navGeometry: stack.navGeometry,
+      heldPose: stack.heldPose,
+      trayPose: stack.trayPose,
+      transitions: engine.transitions,
+      catalog: engine.catalog,
+      readMarquee: () => stack.marqueeBuffer,
+      spatial: stack.index,
+      ...engine.compositorDevice !== void 0 ? { gpu: engine.compositorDevice } : {},
+      frame: core.frame
+    });
+  } catch (err) {
+    host.dispose();
+    throw err;
+  }
+  const remoteCursors = createRemoteCursorsReflector(host, world);
+  const unregister = [
+    core.registerReflector(layer.reflector),
+    core.registerReflector(createCursorReflector(host, stack.readCursor)),
+    core.registerReflector(remoteCursors.reflector)
+  ];
+  const motionQuery = container.ownerDocument.defaultView?.matchMedia("(prefers-reduced-motion: reduce)");
+  const syncReducedMotion = () => {
+    engine.transitions.setReducedMotion(motionQuery?.matches === true);
+  };
+  syncReducedMotion();
+  motionQuery?.addEventListener("change", syncReducedMotion);
+  const detachPointer = attachPointerAdapter(host, stack.queue);
+  const focus = attachWidgetFocus(host);
+  const ratio = () => typeof window !== "undefined" ? window.devicePixelRatio : 1;
+  let synced = 0;
+  const syncViewport = () => {
+    const rect = container.getBoundingClientRect();
+    synced = ratio();
+    writeRuntimeResource(world, Viewport, { w: rect.width, h: rect.height, dpr: synced });
+  };
+  syncViewport();
+  let resizeObserver;
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(syncViewport);
+    resizeObserver.observe(container);
+  }
+  const stopLoop = startRafLoop(
+    core,
+    () => {
+      if (ratio() !== synced) syncViewport();
+    },
+    { sleep: opts.sleep !== false }
+  );
+  const ratioPoll = opts.sleep !== false ? setInterval(() => {
+    if (ratio() !== synced) syncViewport();
+  }, 500) : void 0;
+  let disposed = false;
+  return {
+    engine,
+    host,
+    layer,
+    focus,
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      stopLoop();
+      if (ratioPoll !== void 0) clearInterval(ratioPoll);
+      resizeObserver?.disconnect();
+      focus.detach();
+      detachPointer();
+      motionQuery?.removeEventListener("change", syncReducedMotion);
+      engine.transitions.setReducedMotion(false);
+      for (const unreg of unregister) unreg();
+      remoteCursors.destroy();
+      layer.dispose();
+      host.dispose();
+    }
+  };
+}
+
+// ../dom/src/index.ts
+var DOM_VERSION = "0.0.0";
+
+export {
+  createCanvasHost,
+  startRafLoop,
+  KEYBOARD_CLAIM_ATTR,
+  CLAIM_OWNS_ESCAPE,
+  isEditableTarget,
+  keyboardClaimOf,
+  wheelCede,
+  attachPointerAdapter,
+  createCursorReflector,
+  createRemoteCursorsReflector,
+  FOCUS_PROXY_ATTR,
+  attachWidgetFocus,
+  createDeskHost,
+  DOM_VERSION
+};
+//# sourceMappingURL=chunk-IBWWLA6D.js.map