@dreamboard-games/sdk 0.5.0-alpha.2 → 0.5.0-alpha.21

package/dist/react.js

@@ -0,0 +1,1119 @@
+import {
+  createGameInstance,
+  createGestureRecognizer,
+  isSameDropTarget,
+  magneticDropPoint
+} from "./chunk-3RFGPBES.js";
+import {
+  inputValueKey
+} from "./chunk-CZRPUWCT.js";
+
+// src/react/create-game-hook.tsx
+import { createStore as createStore2 } from "@tanstack/store";
+
+// src/react/shortcuts.ts
+import { useLayoutEffect, useRef } from "react";
+function canHandle(event) {
+  const target = event.target;
+  return !event.defaultPrevented && !event.repeat && !event.isComposing && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && !(target instanceof Element && target.closest(
+    "input:not([type='radio']), textarea, select, [contenteditable]:not([contenteditable='false']), [role='textbox']"
+  )) && !Array.from(
+    document.querySelectorAll(
+      "[aria-modal='true'], dialog[open], [role='dialog'], [role='menu'], [role='listbox']"
+    )
+  ).some(
+    (surface) => !surface.closest("[aria-hidden='true']") && surface.checkVisibility({
+      visibilityProperty: true,
+      opacityProperty: true
+    })
+  );
+}
+function useShortcutsAdapter(game, controller, session, options, onResult) {
+  const latest = useRef({ options, onResult });
+  const registration = useRef(null);
+  useLayoutEffect(() => {
+    latest.current = { options, onResult };
+  });
+  useLayoutEffect(() => {
+    let mounted = true;
+    const owned = controller.register(latest.current.options);
+    registration.current = owned;
+    let source = game.getOptions().source;
+    let seat = game.snapshot?.me;
+    let lifetime = 0;
+    const unsubscribe = game.subscribe(() => {
+      const nextSource = game.getOptions().source;
+      const nextSeat = game.snapshot?.me;
+      if (source === nextSource && seat === nextSeat) return;
+      source = nextSource;
+      seat = nextSeat;
+      ++lifetime;
+    });
+    function keydown(event) {
+      if (!canHandle(event)) return;
+      const started = lifetime;
+      const active = () => mounted && lifetime === started;
+      const pending = controller.handle(
+        event.key,
+        session.getActiveTarget(),
+        session.getShortcutActivity()
+      );
+      if (!pending) return;
+      event.preventDefault();
+      void pending.then(
+        (result) => {
+          if (active()) latest.current.onResult(result);
+        },
+        (cause) => {
+          if (active())
+            latest.current.onResult(
+              cause instanceof Error ? cause : new Error(String(cause))
+            );
+        }
+      );
+    }
+    window.addEventListener("keydown", keydown);
+    return () => {
+      mounted = false;
+      unsubscribe();
+      window.removeEventListener("keydown", keydown);
+      registration.current = null;
+      owned.dispose();
+    };
+  }, [game, controller, session]);
+  useLayoutEffect(() => {
+    registration.current?.update(options);
+  });
+}
+
+// src/react/gesture.tsx
+import { createStore } from "@tanstack/store";
+import { useSelector } from "@tanstack/react-store";
+import {
+  createContext,
+  useContext
+} from "react";
+var CARD_STYLE = Object.freeze({
+  // Sideways movement stays native scrolling; everything else reaches the recognizer.
+  touchAction: "pan-x",
+  userSelect: "none",
+  WebkitUserSelect: "none",
+  WebkitTouchCallout: "none"
+});
+var INSPECTION_STYLE = Object.freeze({
+  ...CARD_STYLE,
+  // Inspection-only cards should not block their table's native scrolling.
+  touchAction: "manipulation"
+});
+var ROW_STYLE = Object.freeze({
+  // A row that fits never scrolls; its cards' sideways movement scrubs instead.
+  touchAction: "none"
+});
+var px = (value) => `${value}px`;
+function resolveDropArea(drag, binding) {
+  if (!drag || !binding) return null;
+  if ("interactionKey" in binding)
+    return drag.getIsDropTarget(binding) ? binding : null;
+  const { position } = binding;
+  const matches = drag.getDropTargets().filter(
+    (target2) => target2.kind === (position ? "position" : "interaction") && target2.interactionKey === binding.interaction && (!binding.input || target2.cardInputKey === binding.input) && (!position || target2.kind === "position" && inputValueKey(target2.value) === inputValueKey(position))
+  );
+  if (position)
+    return matches.length === 1 && drag.getIsDropTarget(matches[0]) ? matches[0] : null;
+  if (matches.length !== 1) return null;
+  const target = {
+    ...matches[0],
+    ...binding.params === void 0 ? {} : { params: binding.params }
+  };
+  return drag.getIsDropTarget(target) ? target : null;
+}
+var sameDropTarget = (left, right) => left === right || !!left && !!right && isSameDropTarget(left, right);
+var sessions = 0;
+function createGestureSession(game) {
+  const id = `g${++sessions}`;
+  const store = createStore({
+    activeTarget: null,
+    focusedTarget: null,
+    pointerActive: false,
+    drag: null,
+    inspect: null
+  });
+  const targets = /* @__PURE__ */ new Map();
+  const sameTarget = (left, right) => inputValueKey(left) === inputValueKey(right);
+  const areas = /* @__PURE__ */ new Map();
+  const presentations = /* @__PURE__ */ new Map();
+  const rows = /* @__PURE__ */ new Map();
+  const controls = /* @__PURE__ */ new Map();
+  const followers = /* @__PURE__ */ new Set();
+  let press = null;
+  let hover = null;
+  let hoverPoint = null;
+  let focused = null;
+  let domFocused = null;
+  let alt = false;
+  let pointer = { x: 0, y: 0 };
+  let swallowing = false;
+  let guardingClicks = false;
+  let disposed = false;
+  const set = (patch) => store.setState((previous) => {
+    const next = { ...previous, ...patch };
+    return {
+      ...next,
+      focusedTarget: domFocused,
+      pointerActive: press !== null || next.drag !== null
+    };
+  });
+  let snapshot = game.snapshot;
+  let source = game.getOptions().source;
+  function admitted(target) {
+    if (!target || !game.snapshot) return null;
+    const zones = game.snapshot.frame.zones;
+    if (target.kind === "zone")
+      return zones[target.zoneId]?.[target.hostId] ? target : null;
+    if (target.kind === "card")
+      return Object.entries(snapshot?.frame.zones ?? {}).some(
+        ([zoneId, hosts]) => Object.entries(hosts).some(
+          ([hostId, zone]) => zone.cardIds.includes(target.value) && zones[zoneId]?.[hostId]?.cardIds.includes(target.value)
+        )
+      ) ? target : null;
+    return [...targets.values()].some((read) => sameTarget(read(), target)) ? target : null;
+  }
+  function admittedFocus(target) {
+    if (!target || !sameTarget(target, targetOf(document.activeElement)))
+      return null;
+    if (target.kind !== "card") return admitted(target);
+    return Object.values(game.snapshot?.frame.zones ?? {}).some(
+      (hosts) => Object.values(hosts).some((zone) => zone.cardIds.includes(target.value))
+    ) ? target : null;
+  }
+  const unsubscribe = game.subscribe(() => {
+    const nextSource = game.getOptions().source;
+    const changedLifetime = source !== nextSource || snapshot?.me !== game.snapshot?.me;
+    const changedSnapshot = snapshot !== game.snapshot;
+    if (changedLifetime || snapshot !== game.snapshot) {
+      press?.recognizer.cancel();
+      const nextHover = changedLifetime ? null : admitted(hover);
+      const nextFocused = changedLifetime ? null : admitted(focused);
+      const nextDomFocused = changedLifetime ? null : admittedFocus(domFocused);
+      source = nextSource;
+      snapshot = game.snapshot;
+      alt = false;
+      hover = nextHover;
+      focused = nextFocused;
+      domFocused = nextDomFocused;
+      if (changedLifetime) hoverPoint = null;
+      set({ activeTarget: hover ?? focused, inspect: null });
+    }
+    if (press?.dragging && !game.drag?.active) press.recognizer.cancel();
+    const drag = store.get().drag;
+    if (drag?.settling && (game.request === null || changedSnapshot || changedLifetime))
+      set({ drag: null });
+  });
+  function hitArea(at) {
+    for (const element of document.elementsFromPoint(at.x, at.y)) {
+      if (element.closest("[data-drag-overlay]")) continue;
+      const area = element.closest("[data-drop-area]");
+      if (area) return area.getAttribute("data-drop-area");
+    }
+    return null;
+  }
+  function retarget(at) {
+    if (!press?.dragging) return at;
+    let area = hitArea(at);
+    const read = area === null ? void 0 : areas.get(area);
+    let target = read ? resolveDropArea(game.drag, read(at)) : null;
+    let point = at;
+    if (!target) {
+      const candidates = [...areas].sort(
+        ([left], [right]) => left === press?.area ? -1 : right === press?.area ? 1 : 0
+      );
+      let distance = Infinity;
+      for (const [id2, binding] of candidates) {
+        const resolved = resolveDropArea(game.drag, binding(at));
+        if (!resolved || !game.drag?.getDropTargets().some((item) => sameDropTarget(item, resolved)))
+          continue;
+        const element = document.querySelector(
+          `[data-drop-area="${CSS.escape(id2)}"]`
+        );
+        if (!(element instanceof HTMLElement)) continue;
+        const snapped = magneticDropPoint(
+          at,
+          element.getBoundingClientRect(),
+          id2 === press.area,
+          press.pointerType === "touch"
+        );
+        if (!snapped) continue;
+        const nextDistance = Math.hypot(at.x - snapped.x, at.y - snapped.y);
+        if (nextDistance >= distance) continue;
+        area = id2;
+        target = resolved;
+        point = snapped;
+        distance = nextDistance;
+        if (id2 === press.area) break;
+      }
+    }
+    if (area !== press.area || !sameDropTarget(target, press.target)) {
+      press.area = area;
+      press.target = target;
+      game.drag?.setDropTarget(target);
+      const drag = store.get().drag;
+      if (drag) set({ drag: { ...drag, area, target } });
+    }
+    return point;
+  }
+  function swallow(event) {
+    if (!swallowing || event.detail === 0) return;
+    swallowing = false;
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  function newPress() {
+    swallowing = false;
+  }
+  function swallowNextClick() {
+    swallowing = true;
+    if (guardingClicks) return;
+    guardingClicks = true;
+    addEventListener("click", swallow, true);
+    addEventListener("pointerdown", newPress, true);
+  }
+  function clearHover() {
+    hover = null;
+  }
+  function inspectWithAlt() {
+    const target = hover ?? focused;
+    const cardId = target?.kind === "card" ? target.value : null;
+    const pending = store.get().drag;
+    set({
+      activeTarget: target,
+      inspect: alt && cardId && !press && !(pending?.settling && pending.cardIds.includes(cardId)) ? { cardId, via: "hover" } : null
+    });
+  }
+  function targetOf(element) {
+    const hit = element?.closest("[data-card-gesture], [data-shortcut-target]");
+    const control = hit?.getAttribute("data-gesture-session") === id ? hit : null;
+    const targetId = control?.getAttribute("data-shortcut-target");
+    const cardId = control?.getAttribute("data-card-gesture");
+    return targetId ? targets.get(targetId)?.() ?? null : cardId ? { kind: "card", value: cardId } : null;
+  }
+  function hoverAt(at) {
+    hoverPoint = at;
+    const wasFocused = focused !== null;
+    focused = null;
+    const next = targetOf(document.elementFromPoint(at.x, at.y));
+    if (sameTarget(hover, next) && !wasFocused) return;
+    hover = next;
+    inspectWithAlt();
+  }
+  const browse = (event) => {
+    if (event.pointerType !== "mouse" || press) return;
+    if (hoverPoint?.x === event.clientX && hoverPoint.y === event.clientY)
+      return;
+    alt = event.altKey;
+    hoverAt({ x: event.clientX, y: event.clientY });
+  };
+  const key = (event) => {
+    if (event.key === "Escape") {
+      press?.recognizer.cancel();
+      alt = false;
+      set({ inspect: null });
+    } else if (event.key === "Alt") {
+      alt = event.type === "keydown";
+      inspectWithAlt();
+    }
+  };
+  const loseFocus = () => {
+    alt = false;
+    clearHover();
+    hoverPoint = null;
+    focused = null;
+    domFocused = null;
+    set({ activeTarget: null, inspect: null });
+  };
+  addEventListener("keydown", key);
+  addEventListener("keyup", key);
+  addEventListener("blur", loseFocus);
+  const leaveWindow = (event) => {
+    if (event.pointerType !== "mouse" || event.relatedTarget !== null) return;
+    clearHover();
+    hoverPoint = null;
+    focused = null;
+    alt = false;
+    inspectWithAlt();
+  };
+  addEventListener("pointermove", browse);
+  addEventListener("pointerout", leaveWindow);
+  function release() {
+    press?.detach();
+    press = null;
+    set({});
+  }
+  function start(event, cardId, element, options) {
+    if (disposed || press || event.button !== 0) return;
+    const pending = store.get().drag;
+    if (pending?.settling && pending.cardIds.includes(cardId)) return;
+    let card = { cardId, element, options };
+    const row = event.pointerType === "mouse" ? null : element.closest("[data-card-row]");
+    const cardAt = rows.get(row?.getAttribute("data-card-row") ?? "");
+    const scrubbing = cardAt !== void 0;
+    const activate = (next) => {
+      if ((hover?.kind === "card" ? hover.value : null) === next) return;
+      hover = next === null ? null : { kind: "card", value: next };
+      inspectWithAlt();
+    };
+    function scrubTo(at) {
+      const next = cardAt(at);
+      const control = next === null ? null : row.querySelector(`[data-card-gesture="${CSS.escape(next)}"]`);
+      const routes = controls.get(
+        control?.getAttribute("data-card-control") ?? ""
+      );
+      card = next === null || !control || !routes ? null : { cardId: next, element: control, options: routes() };
+      activate(card?.cardId ?? null);
+    }
+    const recognizer = createGestureRecognizer(
+      event,
+      {
+        // A hold comes before any movement, so the pressed card is still chosen.
+        hold() {
+          set({ inspect: { cardId, via: "hold" } });
+        },
+        dragStart(origin) {
+          if (!card) return false;
+          const { cardId: cardId2, element: element2, options: options2 } = card;
+          if (options2 === false || !game.drag?.begin(cardId2, options2))
+            return false;
+          const box = element2.getBoundingClientRect();
+          clearHover();
+          focused = null;
+          press.dragging = true;
+          set({
+            drag: {
+              cardIds: game.drag?.active?.cardIds ?? [cardId2],
+              cardId: cardId2,
+              grab: { x: origin.x - box.left, y: origin.y - box.top },
+              size: { width: box.width, height: box.height },
+              settling: false,
+              area: null,
+              target: null,
+              landing: null
+            },
+            inspect: null,
+            activeTarget: null
+          });
+          return true;
+        },
+        dragMove(at) {
+          pointer = retarget(at);
+          for (const follow of followers) follow(pointer);
+        },
+        browse: scrubTo,
+        end(kind, at) {
+          const dragging = press.dragging;
+          const pointerType = press.pointerType;
+          const chosen = scrubbing && kind === "browse" ? card?.element : null;
+          if (dragging) retarget(at);
+          release();
+          if (scrubbing) activate(null);
+          if (chosen instanceof HTMLElement) chosen.click();
+          if (kind !== "tap") swallowNextClick();
+          if (kind === "hold") set({ inspect: null });
+          if (!dragging) {
+            if (kind === "browse" && pointerType === "mouse") hoverAt(at);
+            return;
+          }
+          const before = game.request;
+          const drag = store.get().drag;
+          const areaPresentation = drag?.area ? presentations.get(drag.area)?.() : void 0;
+          const position = drag?.target?.kind === "position" ? drag.target.value : null;
+          const zone = position ?? areaPresentation?.zone;
+          const presentation = zone ? [
+            areaPresentation,
+            ...Array.from(presentations.values(), (read) => read())
+          ].find(
+            (candidate) => candidate?.zone.zoneId === zone.zoneId && candidate.zone.hostId === zone.hostId
+          ) : void 0;
+          const destination = zone && game.zones.find(zone.zoneId, zone.hostId);
+          const cards = drag?.cardIds.flatMap((id2) => {
+            const card2 = game.cards.find(id2);
+            return card2 ? [card2] : [];
+          }) ?? [];
+          const landing = destination && zone && cards.length ? Object.freeze({
+            zoneId: zone.zoneId,
+            hostId: zone.hostId,
+            index: position?.index ?? presentation?.index ?? destination.getCards().length,
+            concealed: presentation ? presentation.visibility === "hidden" || presentation.visibility === "ownerOnly" && zone.hostId !== game.me?.id : cards.some(
+              (card2) => card2.zone !== zone.zoneId || card2.hostId !== zone.hostId || card2.hidden
+            ),
+            cards: Object.freeze(cards),
+            snapshot: game.snapshot
+          }) : null;
+          game.drag?.drop();
+          if (drag && game.request !== null && game.request !== before)
+            set({ drag: { ...drag, settling: true, landing } });
+          else set({ drag: null });
+        },
+        cancel(kind) {
+          const dragging = press.dragging;
+          release();
+          if (scrubbing) activate(null);
+          if (kind !== "tap") swallowNextClick();
+          if (kind === "hold") set({ inspect: null });
+          if (dragging) {
+            game.drag?.cancel();
+            set({ drag: null });
+          }
+        }
+      },
+      { scrub: scrubbing }
+    );
+    const move = (next) => recognizer.move(next);
+    const up = (next) => recognizer.up(next);
+    const cancel = (next) => recognizer.cancel(next);
+    const blur = () => recognizer.cancel();
+    addEventListener("pointermove", move);
+    addEventListener("pointerup", up);
+    addEventListener("pointercancel", cancel);
+    addEventListener("blur", blur);
+    if (event.pointerType === "mouse") {
+      try {
+        element.setPointerCapture(event.pointerId);
+      } catch {
+      }
+    }
+    press = {
+      recognizer,
+      pointerType: event.pointerType,
+      dragging: false,
+      area: null,
+      target: null,
+      detach() {
+        removeEventListener("pointermove", move);
+        removeEventListener("pointerup", up);
+        removeEventListener("pointercancel", cancel);
+        removeEventListener("blur", blur);
+      }
+    };
+    set({});
+  }
+  function cardProps(cardId, control, options, flags) {
+    return {
+      onPointerDown(event) {
+        if (event.pointerType === "mouse") {
+          hover = { kind: "card", value: cardId };
+          alt = event.altKey;
+          inspectWithAlt();
+        }
+        start(event.nativeEvent, cardId, event.currentTarget, options);
+      },
+      onFocus(event) {
+        focused = event.currentTarget.matches(":focus-visible") ? { kind: "card", value: cardId } : null;
+        domFocused = { kind: "card", value: cardId };
+        if (focused) hover = null;
+        inspectWithAlt();
+      },
+      onBlur() {
+        if (focused?.kind === "card" && focused.value === cardId)
+          focused = null;
+        if (domFocused?.kind === "card" && domFocused.value === cardId)
+          domFocused = null;
+        inspectWithAlt();
+      },
+      onContextMenu(event) {
+        if (press && press.pointerType !== "mouse" || swallowing)
+          event.preventDefault();
+      },
+      onDragStart: (event) => event.preventDefault(),
+      style: options === false ? INSPECTION_STYLE : CARD_STYLE,
+      "data-dragging": flags.dragging || void 0,
+      "data-inspecting": flags.inspecting ?? void 0,
+      "data-card-gesture": cardId,
+      "data-card-control": control,
+      "data-gesture-session": id
+    };
+  }
+  function overlayRef(element) {
+    const drag = store.get().drag;
+    if (!element || !drag) return;
+    element.setAttribute("data-drag-overlay", "");
+    Object.assign(element.style, {
+      position: "fixed",
+      margin: "0",
+      pointerEvents: "none",
+      width: px(drag.size.width),
+      height: px(drag.size.height)
+    });
+    const follow = (at) => {
+      element.style.left = px(at.x - drag.grab.x);
+      element.style.top = px(at.y - drag.grab.y);
+    };
+    follow(pointer);
+    followers.add(follow);
+    return () => {
+      followers.delete(follow);
+    };
+  }
+  return {
+    id,
+    store,
+    cardProps,
+    getActiveCardId() {
+      const target = store.get().activeTarget;
+      return target?.kind === "card" ? target.value : null;
+    },
+    getActiveTarget: () => store.get().activeTarget,
+    getShortcutActivity: () => ({
+      // Removal can change DOM focus without emitting blur. Admit the current mounted control.
+      focusedTarget: sameTarget(domFocused, targetOf(document.activeElement)) ? domFocused : null,
+      pointerActive: store.get().pointerActive
+    }),
+    registerTarget(targetId, read) {
+      const target = read();
+      targets.set(targetId, read);
+      return () => {
+        targets.delete(targetId);
+        if (sameTarget(hover, target)) hover = null;
+        if (sameTarget(focused, target)) focused = null;
+        if (sameTarget(domFocused, target)) domFocused = null;
+        inspectWithAlt();
+      };
+    },
+    targetProps(targetId) {
+      return {
+        "data-shortcut-target": targetId,
+        "data-gesture-session": id,
+        onPointerDown(event) {
+          if (event.pointerType !== "mouse") return;
+          hover = targets.get(targetId)?.() ?? null;
+          alt = event.altKey;
+          inspectWithAlt();
+        },
+        onFocus(event) {
+          focused = event.currentTarget.matches(":focus-visible") ? targets.get(targetId)?.() ?? null : null;
+          domFocused = targets.get(targetId)?.() ?? null;
+          if (focused) hover = null;
+          inspectWithAlt();
+        },
+        onBlur() {
+          const target = targets.get(targetId)?.() ?? null;
+          if (sameTarget(focused, target)) focused = null;
+          if (sameTarget(domFocused, target)) domFocused = null;
+          inspectWithAlt();
+        }
+      };
+    },
+    overlayRef,
+    /** `read` returns the area's current binding; targets resolve when hit. */
+    registerArea(area, read, presentation) {
+      areas.set(area, read);
+      presentations.set(area, presentation);
+      return () => {
+        areas.delete(area);
+        presentations.delete(area);
+      };
+    },
+    /** `read` returns a mounted card control's current drag routes. */
+    registerControl(control, read) {
+      controls.set(control, read);
+      return () => {
+        controls.delete(control);
+      };
+    },
+    registerRow(row, cardAt) {
+      rows.set(row, cardAt);
+      return () => {
+        rows.delete(row);
+      };
+    },
+    rowProps(row) {
+      return { "data-card-row": row, style: ROW_STYLE };
+    },
+    dispose() {
+      disposed = true;
+      press?.recognizer.cancel();
+      clearHover();
+      removeEventListener("keydown", key);
+      removeEventListener("keyup", key);
+      removeEventListener("blur", loseFocus);
+      removeEventListener("pointermove", browse);
+      removeEventListener("pointerout", leaveWindow);
+      unsubscribe();
+      followers.clear();
+      targets.clear();
+      areas.clear();
+      presentations.clear();
+      rows.clear();
+      controls.clear();
+      if (!guardingClicks) return;
+      removeEventListener("click", swallow, true);
+      removeEventListener("pointerdown", newPress, true);
+    }
+  };
+}
+var GestureContext = createContext(null);
+function useGestureSession() {
+  const session = useContext(GestureContext);
+  if (!session) throw new Error("Gesture hooks require their GameProvider.");
+  return session;
+}
+function useGestureState(session, select) {
+  return useSelector(session.store, select);
+}
+
+// src/react/create-game-hook.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useId,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef2,
+  useState,
+  useMemo
+} from "react";
+import { useSelector as useSelector2 } from "@tanstack/react-store";
+import { jsx } from "react/jsx-runtime";
+function createGameHook() {
+  return function(defaults) {
+    const Context = createContext2(null);
+    function GameProvider({ children, ...overrides }) {
+      const [owned, setOwned] = useState(null);
+      const lifetime = useRef2(null);
+      const options = {
+        ...defaults,
+        ...overrides
+      };
+      useLayoutEffect2(() => {
+        let current = lifetime.current;
+        if (!current) {
+          const instance = createGameInstance()(options);
+          current = {
+            instance,
+            // One bound game crosses into the framework adapter's erased runtime.
+            session: createGestureSession(instance),
+            generation: 0
+          };
+          lifetime.current = current;
+          setOwned({ instance, session: current.session });
+        }
+        const owned2 = current;
+        ++owned2.generation;
+        return () => {
+          const generation = ++owned2.generation;
+          queueMicrotask(() => {
+            if (owned2.generation !== generation) return;
+            owned2.session.dispose();
+            owned2.instance.dispose();
+            if (lifetime.current === owned2) lifetime.current = null;
+          });
+        };
+      }, []);
+      useLayoutEffect2(() => {
+        lifetime.current?.instance.setOptions(options);
+      });
+      return owned ? /* @__PURE__ */ jsx(Context.Provider, { value: owned.instance, children: /* @__PURE__ */ jsx(GestureContext.Provider, { value: owned.session, children }) }) : null;
+    }
+    function useInstance() {
+      const instance = useContext2(Context);
+      if (!instance) throw new Error("useGame requires its GameProvider.");
+      return instance;
+    }
+    function useGame(selector, options) {
+      const instance = useInstance();
+      const selected = useSelector2(
+        instance.store,
+        (snapshot) => selector ? { value: selector(snapshot) } : { snapshot },
+        {
+          compare: (previous, next) => "value" in previous && "value" in next ? (options?.compare ?? Object.is)(previous.value, next.value) : "snapshot" in previous && "snapshot" in next && Object.is(previous.snapshot, next.snapshot)
+        }
+      );
+      return "value" in selected ? selected.value : instance;
+    }
+    function Subscribe({
+      selector,
+      compare,
+      children
+    }) {
+      return children(useGame(selector, { compare }));
+    }
+    const dragOf = (snapshot) => snapshot.drag;
+    function useCardGesture(cardId, options) {
+      const session = useGestureSession();
+      const control = `${session.id}${useId()}`;
+      const routes = options.drag;
+      const latestRoutes = useRef2(routes);
+      useLayoutEffect2(() => {
+        latestRoutes.current = routes;
+      });
+      useLayoutEffect2(
+        () => session.registerControl(control, () => latestRoutes.current),
+        [session, control]
+      );
+      const canDrag = useGame(
+        (snapshot) => routes !== false && (dragOf(snapshot)?.getCanDrag(cardId, routes) ?? false)
+      );
+      const dragging = useGestureState(
+        session,
+        (state) => state.drag?.cardIds.includes(cardId) ?? false
+      );
+      const pending = useGestureState(
+        session,
+        (state) => !!state.drag?.settling && state.drag.cardIds.includes(cardId)
+      );
+      const inspecting = useGestureState(
+        session,
+        (state) => state.inspect?.cardId === cardId ? state.inspect.via : null
+      );
+      const isActive = useGestureState(
+        session,
+        (state) => state.activeTarget?.kind === "card" && state.activeTarget.value === cardId
+      );
+      return {
+        props: session.cardProps(cardId, control, routes, {
+          dragging,
+          inspecting
+        }),
+        canDrag,
+        isDragging: dragging,
+        isPending: pending,
+        isActive,
+        inspecting
+      };
+    }
+    function useDropArea(binding, options) {
+      const session = useGestureSession();
+      const id = `${session.id}${useId()}`;
+      const erased = binding;
+      const fixed = typeof erased === "function" ? null : erased;
+      const target = useGame(
+        (snapshot) => resolveDropArea(dragOf(snapshot), fixed),
+        { compare: sameDropTarget }
+      );
+      const isOver = useGame((snapshot) => {
+        const active = dragOf(snapshot)?.active?.target;
+        return !!target && sameDropTarget(active ?? null, target);
+      });
+      const following = useGestureState(
+        session,
+        (state) => typeof erased === "function" && state.drag?.area === id && state.drag.target !== null
+      );
+      const latest = useRef2(erased);
+      const latestPresentation = useRef2(options);
+      useLayoutEffect2(() => {
+        latest.current = erased;
+        latestPresentation.current = options;
+      });
+      useLayoutEffect2(
+        () => session.registerArea(
+          id,
+          (point) => {
+            const current = latest.current;
+            return typeof current === "function" ? current(point) : current;
+          },
+          () => latestPresentation.current
+        ),
+        [session, id]
+      );
+      return {
+        props: {
+          "data-drop-area": id,
+          "data-drop-target": target || following ? "true" : void 0,
+          "data-drop-over": isOver || following || void 0
+        },
+        isEligible: target !== null || following,
+        isOver: isOver || following
+      };
+    }
+    function useZonePresentation(zoneId, hostId, options) {
+      const game = useGame();
+      const session = useGestureSession();
+      const landing = useGestureState(
+        session,
+        (state) => state.drag?.settling ? state.drag.landing : null
+      );
+      const zone = game.zones.find(zoneId, hostId);
+      const actual = useMemo(
+        () => zone?.getCards() ?? [],
+        [zone]
+      );
+      const active = landing?.snapshot === game.snapshot ? landing : null;
+      const incoming = active?.zoneId === zoneId && active.hostId === hostId;
+      const outgoing = active?.cards.filter(
+        (card) => card.zone === zoneId && card.hostId === hostId
+      ) ?? [];
+      const cards = useMemo(() => {
+        const ordered = options ? options.order.flatMap((id) => {
+          const card = actual.find((card2) => card2.id === id);
+          return card ? [card] : [];
+        }) : actual;
+        if (!active) return ordered;
+        const moving = new Set(active.cards.map((card) => card.id));
+        const remaining = ordered.filter((card) => !moving.has(card.id));
+        if (incoming) {
+          const before = ordered.slice(0, active.index).filter((card) => moving.has(card.id)).length;
+          const index = Math.max(
+            0,
+            Math.min(remaining.length, active.index - before)
+          );
+          remaining.splice(
+            index,
+            0,
+            ...active.cards
+          );
+        }
+        return remaining;
+      }, [actual, active, incoming, options]);
+      const source = game.getOptions().source;
+      const me = game.me?.id;
+      const count = (zone?.count ?? 0) - outgoing.length + (incoming ? active.cards.length : 0);
+      const previous = useRef2({
+        source,
+        me,
+        ids: new Set(actual.map((card) => card.id)),
+        incoming: 0,
+        count: zone?.count ?? 0
+      });
+      const newlyArriving = previous.current.source === source && previous.current.me === me ? cards.filter(
+        (card) => !previous.current.ids.has(card.id) && !active?.cards.some((pending) => pending.id === card.id)
+      ).map((card) => card.id) : [];
+      const arrivingIds = previous.current.incoming > 0 && newlyArriving.length === previous.current.incoming && count === previous.current.count ? [] : newlyArriving;
+      useLayoutEffect2(() => {
+        previous.current = {
+          source,
+          me,
+          ids: new Set([...actual, ...cards].map((card) => card.id)),
+          incoming: incoming ? active.cards.length : 0,
+          count
+        };
+      });
+      return {
+        cards,
+        count,
+        arrivingIds
+      };
+    }
+    function useCardPresentation(cardId) {
+      const game = useGame();
+      const session = useGestureSession();
+      const landing = useGestureState(
+        session,
+        (state) => state.drag?.settling ? state.drag.landing : null
+      );
+      const active = landing?.snapshot === game.snapshot ? landing : null;
+      const captured = active?.cards.find((card2) => card2.id === cardId);
+      const card = game.cards.find(cardId) ?? captured;
+      return {
+        card,
+        isPending: !!captured,
+        hidden: card?.hidden === true || !!captured && active?.concealed === true
+      };
+    }
+    const shortcutsOf = (snapshot) => snapshot.shortcuts;
+    const noShortcutsConfiguration = createStore2(
+      null
+    );
+    const sameHints = (left, right) => left.length === right.length && left.every((hint, index) => {
+      const next = right[index];
+      return hint.label === next.label && hint.kind === next.kind && (hint.kind !== "interaction" || next.kind === "interaction" && hint.interaction === next.interaction) && hint.keys.length === next.keys.length && hint.keys.every((key, at) => key === next.keys[at]);
+    });
+    function useShortcutHints(target) {
+      const controller = shortcutsOf(useInstance());
+      const session = useGestureSession();
+      useSelector2(session.store, () => session.getShortcutActivity(), {
+        compare: (left, right) => left.focusedTarget === right.focusedTarget && left.pointerActive === right.pointerActive
+      });
+      useGame(
+        (snapshot) => shortcutsOf(snapshot)?.getHints(
+          target,
+          session.getShortcutActivity()
+        ) ?? [],
+        {
+          compare: sameHints
+        }
+      );
+      return useSelector2(
+        controller?.configuration ?? noShortcutsConfiguration,
+        () => controller?.getHints(
+          target,
+          session.getShortcutActivity()
+        ) ?? [],
+        { compare: sameHints }
+      );
+    }
+    function useGameShortcuts(options) {
+      const instance = useInstance();
+      const session = useGestureSession();
+      const controller = shortcutsOf(instance);
+      if (!controller)
+        throw new Error(
+          "useGameShortcuts requires shortcutsFeature in the game binding."
+        );
+      useShortcutsAdapter(instance, controller, session, options, (result) => {
+        if (result instanceof Error) instance.getOptions().onError?.(result);
+        else if (result.kind === "interaction" && !result.result.accepted)
+          instance.getOptions().onError?.(
+            new Error(result.result.message ?? result.result.errorCode, {
+              cause: result.result
+            })
+          );
+      });
+      const target = useGestureState(
+        session,
+        (state) => state.activeTarget
+      );
+      const hints = useShortcutHints(target);
+      return { target, hints };
+    }
+    function useShortcutTarget(target) {
+      const session = useGestureSession();
+      const id = `${session.id}${useId()}`;
+      const latest = useRef2(target);
+      const targetKey = inputValueKey(target);
+      useLayoutEffect2(() => {
+        latest.current = target;
+      });
+      useLayoutEffect2(
+        () => session.registerTarget(id, () => latest.current),
+        [session, id, targetKey]
+      );
+      return { props: session.targetProps(id) };
+    }
+    function useDragOverlay() {
+      const session = useGestureSession();
+      const drag = useGestureState(session, (state) => state.drag);
+      return drag ? {
+        cardId: drag.cardId,
+        cardIds: drag.cardIds,
+        settling: drag.settling,
+        // The drag feature resolved this target from this game's routes.
+        target: drag.target,
+        landing: drag.landing ? {
+          zoneId: drag.landing.zoneId,
+          hostId: drag.landing.hostId,
+          index: drag.landing.index
+        } : null,
+        ref: session.overlayRef
+      } : null;
+    }
+    function useCardRow(cardAt) {
+      const session = useGestureSession();
+      const id = `${session.id}${useId()}`;
+      const latest = useRef2(cardAt);
+      useLayoutEffect2(() => {
+        latest.current = cardAt;
+      });
+      useLayoutEffect2(
+        () => session.registerRow(id, (point) => latest.current(point)),
+        [session, id]
+      );
+      return { props: session.rowProps(id) };
+    }
+    function useActiveCard() {
+      const session = useGestureSession();
+      return useGestureState(
+        session,
+        (state) => state.activeTarget?.kind === "card" ? state.activeTarget.value : null
+      );
+    }
+    return {
+      GameProvider,
+      useGame,
+      Subscribe,
+      useCardGesture,
+      useCardRow,
+      useActiveCard,
+      useGameShortcuts,
+      useShortcutTarget,
+      useShortcutHints,
+      useDropArea,
+      useDragOverlay,
+      useZonePresentation,
+      useCardPresentation
+    };
+  };
+}
+
+// src/react/marquee.ts
+import { useEffect, useRef as useRef3, useState as useState2 } from "react";
+function useMarqueeSelection(options) {
+  const latest = useRef3(options);
+  latest.current = options;
+  const [bounds, setBounds] = useState2(null);
+  const cleanup = useRef3(null);
+  useEffect(() => () => cleanup.current?.(), []);
+  useEffect(() => {
+    if (!options.enabled) {
+      cleanup.current?.();
+      setBounds(null);
+    }
+  }, [options.enabled]);
+  return {
+    bounds,
+    props: {
+      onPointerDown(event) {
+        if (!latest.current.enabled || event.button !== 0 || event.pointerType === "touch" || event.altKey || event.ctrlKey || event.metaKey || event.target.closest(
+          "button, input, select, textarea, a, [contenteditable], [data-card-gesture]"
+        ))
+          return;
+        event.preventDefault();
+        cleanup.current?.();
+        const x = event.clientX, y = event.clientY, pointerId = event.pointerId;
+        const area = event.currentTarget;
+        const additive = event.shiftKey;
+        const doc = event.currentTarget.ownerDocument;
+        let rectangle = null;
+        function move(next) {
+          if (next.pointerId !== pointerId) return;
+          if (!rectangle && Math.hypot(next.clientX - x, next.clientY - y) < 8)
+            return;
+          const box = area.getBoundingClientRect();
+          const right = Math.min(box.right, Math.max(x, next.clientX));
+          const bottom = Math.min(box.bottom, Math.max(y, next.clientY));
+          const left = Math.max(box.left, Math.min(x, next.clientX));
+          const top = Math.max(box.top, Math.min(y, next.clientY));
+          rectangle = { left, top, width: right - left, height: bottom - top };
+          setBounds(rectangle);
+          next.preventDefault();
+        }
+        function stop() {
+          doc.removeEventListener("pointermove", move);
+          doc.removeEventListener("pointerup", up);
+          doc.removeEventListener("pointercancel", cancel);
+          doc.removeEventListener("keydown", key);
+          doc.defaultView?.removeEventListener("blur", cancel);
+          cleanup.current = null;
+        }
+        function cancel() {
+          stop();
+          setBounds(null);
+        }
+        function key(next) {
+          if (next.key === "Escape") {
+            next.preventDefault();
+            cancel();
+          }
+        }
+        function up(next) {
+          if (next.pointerId !== pointerId) return;
+          const ids = rectangle ? latest.current.getCards().filter(({ element }) => {
+            const box = element.getBoundingClientRect();
+            const region = rectangle;
+            return box.right > region.left && box.left < region.left + region.width && box.bottom > region.top && box.top < region.top + region.height;
+          }).map((card) => card.id) : [];
+          stop();
+          setBounds(null);
+          latest.current.onSelect(ids, additive);
+        }
+        cleanup.current = stop;
+        doc.addEventListener("pointermove", move, { passive: false });
+        doc.addEventListener("pointerup", up);
+        doc.addEventListener("pointercancel", cancel);
+        doc.addEventListener("keydown", key);
+        doc.defaultView?.addEventListener("blur", cancel);
+      }
+    }
+  };
+}
+export {
+  createGameHook,
+  useMarqueeSelection
+};
+//# sourceMappingURL=react.js.map