@weasel-js/routing 1.7.0 → 1.7.1

package/dist/react.js

@@ -1,5 +1,6 @@
-import { createDepRegistry, createDispatcher, scopeBindings, liveScope, isDev, reportRouteConflicts, offhandKeyFor, makeToolOffhandAction, buildToolOffhandBindings, dlog, isTool, isEditableTarget, clientToCanvasRect, openPointerSession, publishLiveDispatch, pointerGestureId, itemsFromDataTransfer, itemsFromClipboardData, ScopeNode, pushOwner, validateActionId, validateActionDefaultBinding, depNodeOf, DepNode, buildDepsFromRequires } from './chunk-Q3Y3DPKH.js';
-import { createContext, useState, useContext, useMemo, useRef, useEffect, useCallback, useSyncExternalStore } from 'react';
+import { createDepRegistry, createDispatcher, isTool, scopeBindings, liveScope, isDev, reportRouteConflicts, offhandKeyFor, makeToolOffhandAction, buildToolOffhandBindings, dlog, isEditableTarget, clientToCanvasRect, openPointerSession, LONG_PRESS_MS, publishLiveDispatch, pointerGestureId, itemsFromDataTransfer, itemsFromClipboardData, ScopeNode, pushOwner, validateActionId, validateActionDefaultBinding, depNodeOf, DepNode, buildDepsFromRequires } from './chunk-ZGKJWZ4S.js';
+import { createContext, useState, useContext, useMemo, useEffect, useRef, useCallback, useSyncExternalStore } from 'react';
+import { useLatest, useStableByContent, sameList } from '@weasel-js/react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { pastDragThreshold } from '@weasel-js/gestures';
 import { resolveCursorTier } from '@weasel-js/cursor';
@@ -109,11 +110,10 @@ function useOptionalDepRegistry() {
 }
 function useDepSource(name, source) {
   const registry = useDepRegistry();
-  const sourceRef = useRef(source);
-  sourceRef.current = source;
+  const sourceRef = useLatest(source);
   useEffect(() => {
     return registry.register(name, () => sourceRef.current());
-  }, [name, registry]);
+  }, [name, registry, sourceRef]);
 }
 var DROPOVER_CLASS = "weasel-dropover";
 function stylusOf(e) {
@@ -156,23 +156,21 @@ function computeMultiTouchGeometry(positions) {
   return { centroid, spread };
 }
 function useGestureDispatcher(opts) {
-  const { canvasRef, actions, entriesById, enabled = true, keyboard = true, affordanceAt, classifyTarget, dispatcher: dispatcherOpt, clientToWorld, requestRedraw, paintedCursor, getRuleCtx, onDoubleClick, views, channels } = opts;
+  const { canvasRef, actions, entriesById, enabled = true, keyboard = true, affordanceAt, classifyTarget, dispatcher: dispatcherOpt, clientToWorld, requestRedraw, paintedCursor, getRuleCtx, onDoubleClick, views, channels, longPress } = opts;
   const pointerChannel = channels?.pointer !== false;
   const wheelChannel = channels?.wheel !== false;
   const pinchChannel = channels?.pinch !== false;
   const contextMenuChannel = channels?.contextMenu !== false;
   const ingestChannel = channels?.ingest !== false;
-  const onDoubleClickRef = useRef(onDoubleClick);
-  onDoubleClickRef.current = onDoubleClick;
+  const onDoubleClickRef = useLatest(onDoubleClick);
   const activeTool = useActiveToolContext();
   const depRegistry = useDepRegistry();
   const dispatcherRef = useRef(null);
   if (!dispatcherRef.current) {
     dispatcherRef.current = dispatcherOpt ?? createDispatcher();
   }
-  const registryRef = useRef(actions);
-  registryRef.current = actions;
-  const ctxRef = useRef({
+  const registryRef = useLatest(actions);
+  const ctxRef = useLatest({
     actions,
     depRegistry,
     activeToolId: activeTool.active,
@@ -180,15 +178,7 @@ function useGestureDispatcher(opts) {
     entriesById,
     isMac: IS_MAC
   });
-  ctxRef.current = {
-    actions,
-    depRegistry,
-    activeToolId: activeTool.active,
-    hotkeyStack: activeTool.hotkeyStack,
-    entriesById,
-    isMac: IS_MAC
-  };
-  const rootTargetRef = useRef({
+  const rootTargetRef = useLatest({
     id: null,
     dispatcher: dispatcherRef.current,
     affordanceAt,
@@ -196,30 +186,19 @@ function useGestureDispatcher(opts) {
     clientToWorld,
     getRuleCtx
   });
-  rootTargetRef.current = {
-    id: null,
-    dispatcher: dispatcherRef.current,
-    affordanceAt,
-    classifyTarget,
-    clientToWorld,
-    getRuleCtx
-  };
-  const viewsRef = useRef(views);
-  viewsRef.current = views;
-  const allDispatchers = () => [
+  const viewsRef = useLatest(views);
+  const allDispatchers = useCallback(() => [
     rootTargetRef.current.dispatcher,
     ...(viewsRef.current?.targets() ?? []).map((t) => t.dispatcher)
-  ];
-  const requestRedrawRef = useRef(requestRedraw);
-  requestRedrawRef.current = requestRedraw;
-  const paintedCursorRef = useRef(paintedCursor);
-  paintedCursorRef.current = paintedCursor;
+  ], [rootTargetRef, viewsRef]);
+  const requestRedrawRef = useLatest(requestRedraw);
+  const paintedCursorRef = useLatest(paintedCursor);
+  const longPressRef = useLatest(longPress);
   const lastClickRef = useRef(null);
   const liveToolsRef = useRef(/* @__PURE__ */ new Set());
   const prevActiveRef = useRef(activeTool.active);
-  const entriesByIdRef = useRef(entriesById);
-  entriesByIdRef.current = entriesById;
-  const fireLifecycle = (id, hook) => {
+  const entriesByIdRef = useLatest(entriesById);
+  const fireLifecycle = useCallback((id, hook) => {
     const tool = entriesByIdRef.current.get(id);
     if (!tool || !isTool(tool)) return;
     const fn = tool[hook];
@@ -229,7 +208,7 @@ function useGestureDispatcher(opts) {
     } catch (err) {
       console.error(`weasel: tool "${id}".${hook} threw`, err);
     }
-  };
+  }, [entriesByIdRef]);
   useEffect(() => {
     const prev = liveToolsRef.current;
     const next = new Set(
@@ -247,7 +226,7 @@ function useGestureDispatcher(opts) {
     const live = liveToolsRef.current;
     liveToolsRef.current = /* @__PURE__ */ new Set();
     for (const id of live) fireLifecycle(id, "onDeactivate");
-  }, []);
+  }, [fireLifecycle]);
   useEffect(() => {
     if (!enabled) return;
     let disposed = false;
@@ -312,22 +291,27 @@ function useGestureDispatcher(opts) {
     };
     let multiTouchStart = null;
     const TAP_THRESHOLD_PX = 8;
-    const LONG_PRESS_MS = 500;
     const longPressTimers = /* @__PURE__ */ new Map();
+    const clearPending = (pointerId) => {
+      const store = longPressRef.current?.state;
+      const p = store?.get();
+      if (p && (pointerId === void 0 || p.pointerId === pointerId)) store.set(null);
+    };
     const cancelLongPress = (pointerId) => {
       const t = longPressTimers.get(pointerId);
       if (t !== void 0) {
         clearTimeout(t);
         longPressTimers.delete(pointerId);
       }
+      clearPending(pointerId);
     };
     const cancelAllLongPress = () => {
       for (const t of longPressTimers.values()) clearTimeout(t);
       longPressTimers.clear();
+      clearPending();
     };
-    const fireLongPress = (pointerId) => {
-      const down = held.get(pointerId)?.down;
-      if (!down) return;
+    const HAPTIC_MS = 15;
+    const longPressEvents = (down) => {
       const shared = {
         target: down.target,
         altKey: down.altKey,
@@ -338,23 +322,26 @@ function useGestureDispatcher(opts) {
         ...down.bodyTarget !== void 0 ? { bodyTarget: down.bodyTarget } : {},
         ...down.bodyKind !== void 0 ? { bodyKind: down.bodyKind } : {}
       };
-      const result = dispatch({
-        kind: "longpress",
-        x: down.worldX,
-        y: down.worldY,
-        clientX: down.clientX,
-        clientY: down.clientY,
-        ...shared
-      });
-      if (result === "unhandled") {
-        dispatch({
-          kind: "contextmenu",
-          x: down.worldX,
-          y: down.worldY,
-          clientX: down.clientX,
-          clientY: down.clientY,
-          ...shared
-        });
+      const at = { x: down.worldX, y: down.worldY, clientX: down.clientX, clientY: down.clientY };
+      return {
+        longpress: { kind: "longpress", ...at, ...shared },
+        contextmenu: { kind: "contextmenu", ...at, ...shared }
+      };
+    };
+    const longPressWouldFire = (down) => {
+      const evs = longPressEvents(down);
+      const d = dispatcherNow();
+      return d.resolveOnly(evs.longpress, ctxNow()) !== null || d.resolveOnly(evs.contextmenu, ctxNow()) !== null;
+    };
+    const fireLongPress = (pointerId, pointerType) => {
+      const down = held.get(pointerId)?.down;
+      clearPending(pointerId);
+      if (!down) return;
+      const evs = longPressEvents(down);
+      let result = dispatch(evs.longpress);
+      if (result === "unhandled") result = dispatch(evs.contextmenu);
+      if (result === "handled" && longPressRef.current?.haptics !== false && (pointerType === "touch" || pointerType === "pen") && typeof navigator !== "undefined" && typeof navigator.vibrate === "function") {
+        navigator.vibrate(HAPTIC_MS);
       }
     };
     const DOUBLE_CLICK_MAX_MS = 600;
@@ -567,14 +554,30 @@ function useGestureDispatcher(opts) {
       if (held.size < 2) dispatch({ ...ev, stage: "press" });
       if ((e.pointerType === "touch" || e.pointerType === "pen") && held.size === 1) {
         cancelLongPress(e.pointerId);
+        const duration = longPressRef.current?.duration ?? LONG_PRESS_MS;
         longPressTimers.set(
           e.pointerId,
           setTimeout(() => {
             longPressTimers.delete(e.pointerId);
             if (disposed) return;
-            fireLongPress(e.pointerId);
-          }, LONG_PRESS_MS)
+            fireLongPress(e.pointerId, e.pointerType);
+          }, duration)
         );
+        const store = longPressRef.current?.state;
+        const rec = held.get(e.pointerId);
+        if (store && rec) {
+          store.set({
+            pointerId: e.pointerId,
+            pointerType: e.pointerType,
+            client: { x: e.clientX, y: e.clientY },
+            local: toCanvasLocal({ x: e.clientX, y: e.clientY }),
+            world: { x: w.x, y: w.y },
+            viewId: target().id,
+            startedAt: performance.now(),
+            duration,
+            armed: longPressWouldFire(rec.down)
+          });
+        }
       }
       if (held.size >= 2) {
         cancelAllLongPress();
@@ -1017,7 +1020,25 @@ function useGestureDispatcher(opts) {
       held.clear();
       for (const d of allDispatchers()) d.cancelAll("cancel");
     };
-  }, [enabled, keyboard, canvasRef, pointerChannel, wheelChannel, pinchChannel, contextMenuChannel, ingestChannel]);
+  }, [
+    enabled,
+    keyboard,
+    canvasRef,
+    pointerChannel,
+    wheelChannel,
+    pinchChannel,
+    contextMenuChannel,
+    ingestChannel,
+    allDispatchers,
+    ctxRef,
+    longPressRef,
+    onDoubleClickRef,
+    paintedCursorRef,
+    registryRef,
+    requestRedrawRef,
+    rootTargetRef,
+    viewsRef
+  ]);
 }
 var ActionsContext = createContext(null);
 function depsFor(a, r) {
@@ -1162,9 +1183,8 @@ function actionsNodeOf(registry) {
 }
 function ActionsProvider({ children }) {
   const depReg = useOptionalDepRegistry();
-  const depRegRef = useRef(depReg);
-  depRegRef.current = depReg;
-  const node = useMemo(() => new ActionsNode(null, true, () => depRegRef.current), []);
+  const depRegRef = useLatest(depReg);
+  const node = useMemo(() => new ActionsNode(null, true, () => depRegRef.current), [depRegRef]);
   return /* @__PURE__ */ jsx(ActionsContext.Provider, { value: node.registry, children });
 }
 var IS_DEV = (() => {
@@ -1228,10 +1248,8 @@ function Yoke({ value, children }) {
 }
 function useOngoingAction(actionId) {
   const reg = useActionsRegistry();
-  const regRef = useRef(reg);
-  regRef.current = reg;
-  const idRef = useRef(actionId);
-  idRef.current = actionId;
+  const regRef = useLatest(reg);
+  const idRef = useLatest(actionId);
   const ctrlRef = useRef(null);
   const edit = useMemo(() => {
     const end = (reason) => {
@@ -1255,51 +1273,43 @@ function useOngoingAction(actionId) {
         end("cancel");
       }
     };
-  }, []);
+  }, [regRef, idRef]);
   useEffect(() => () => edit.commit(), [edit, actionId]);
   return edit;
 }
 function useContributions(opts) {
   const ctx = useActiveToolContext();
   const actionsRegistry = useActionsRegistry();
-  const hasInitializedRef = useRef(false);
-  const isFirstRender = !hasInitializedRef.current;
-  const needsFirstMountSyncRef = useRef(false);
-  if (isFirstRender) {
-    hasInitializedRef.current = true;
-    needsFirstMountSyncRef.current = ctx.active === null && opts.focused !== null;
-  }
+  const firstMountRef = useRef(null);
+  const isFirstRender = firstMountRef.current == null;
+  if (firstMountRef.current == null) firstMountRef.current = { sync: ctx.active === null && opts.focused !== null };
   useEffect(() => {
-    if (!needsFirstMountSyncRef.current) return;
-    needsFirstMountSyncRef.current = false;
+    const first = firstMountRef.current;
+    if (!first?.sync) return;
+    first.sync = false;
     ctx.setActive(opts.focused);
   }, []);
   const focused = isFirstRender && ctx.active === null && opts.focused !== null ? opts.focused : ctx.active;
-  const entriesRef = useRef(opts.entries);
-  entriesRef.current = opts.entries;
-  const focusedRef = useRef(focused);
-  focusedRef.current = focused;
-  const engagedRef = useRef(ctx.hotkeyStack);
-  engagedRef.current = ctx.hotkeyStack;
+  const entries = useStableByContent(opts.entries, sameList);
+  const engaged = ctx.hotkeyStack;
   const setFocused = useCallback((id) => {
     ctx.setActive(id);
   }, [ctx]);
   const snapshot = useCallback(() => {
-    const engaged = engagedRef.current;
     const engagedIds = new Set(engaged);
     const ordered = [];
     for (const id of engaged) {
-      const entry = entriesRef.current.find((e) => e.id === id);
+      const entry = entries.find((e) => e.id === id);
       if (entry && !ordered.includes(entry)) ordered.push(entry);
     }
-    for (const entry of entriesRef.current) {
+    for (const entry of entries) {
       if (!ordered.includes(entry)) ordered.push(entry);
     }
     return {
       ordered,
-      state: { focusedId: focusedRef.current, engagedIds }
+      state: { focusedId: focused, engagedIds }
     };
-  }, []);
+  }, [entries, focused, engaged]);
   const scopedBindings = useCallback(() => {
     const { ordered, state } = snapshot();
     return scopeBindings(ordered, state);
@@ -1320,9 +1330,9 @@ function useContributions(opts) {
     }
     return [...active, ...hotkey, ...ambient];
   }, [snapshot]);
-  useOffhandAction(opts.entries);
+  useOffhandAction(entries);
   const lastConflictSigRef = useRef(null);
-  const entrySig = opts.entries.map((e) => e.id).join(",");
+  const entrySig = entries.map((e) => e.id).join(",");
   const modesRegistry = opts.modes;
   useEffect(() => {
     if (!isDev()) return;
@@ -1331,7 +1341,7 @@ function useContributions(opts) {
     lastConflictSigRef.current = { sig: entrySig, modes: modesRegistry };
     const registry = [];
     const ambient = [];
-    for (const entry of entriesRef.current) {
+    for (const entry of entries) {
       if (entry.eligibility?.focus) registry.push(entry);
       if (entry.eligibility?.always || entry.eligibility?.claimed) ambient.push(entry);
     }
@@ -1341,18 +1351,10 @@ function useContributions(opts) {
       actions: actionsRegistry?.list() ?? [],
       ...modesRegistry ? { modes: modesRegistry.list().map(activeModeOf) } : {}
     });
-  }, [entrySig, actionsRegistry, modesRegistry]);
+  }, [entrySig, entries, actionsRegistry, modesRegistry]);
   return useMemo(
-    () => ({
-      get entries() {
-        return entriesRef.current;
-      },
-      focused,
-      setFocused,
-      scopedBindings,
-      overlays
-    }),
-    [focused, setFocused, scopedBindings, overlays]
+    () => ({ entries, focused, setFocused, scopedBindings, overlays }),
+    [entries, focused, setFocused, scopedBindings, overlays]
   );
 }
 function useOffhandAction(entries) {
@@ -1365,8 +1367,6 @@ function useOffhandAction(entries) {
     return actionsRegistry.register(makeToolOffhandAction(buildToolOffhandBindings(specs)));
   }, [actionsRegistry, offhandSig]);
 }
-
-// src/tools/useTools.ts
 function declareSlot(tool, slot) {
   const hotkey = tool.def?.hotkey;
   const eligibility = {
@@ -1378,22 +1378,16 @@ function declareSlot(tool, slot) {
 }
 var NO_AMBIENT = [];
 function useStableSources(registry, ambient) {
-  const next = { registry, ambient: ambient ?? NO_AMBIENT };
-  const ref = useRef(next);
-  const prev = ref.current;
-  if (prev !== next && !(sameRecord(prev.registry, next.registry) && sameList(prev.ambient, next.ambient))) {
-    ref.current = next;
-  }
-  return ref.current;
+  return useStableByContent(
+    { registry, ambient: ambient ?? NO_AMBIENT },
+    (a, b) => sameRecord(a.registry, b.registry) && sameList(a.ambient, b.ambient)
+  );
 }
 function sameRecord(a, b) {
   const ak = Object.keys(a);
   if (ak.length !== Object.keys(b).length) return false;
   return ak.every((k) => k in b && a[k] === b[k]);
 }
-function sameList(a, b) {
-  return a.length === b.length && a.every((t, i) => t === b[i]);
-}
 function sameEligibility(a, b) {
   if (!a) return false;
   const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
@@ -1427,12 +1421,9 @@ function useTools(opts) {
     ...opts.modes ? { modes: opts.modes } : {}
   });
   const hotkeyEngaged = ctx.hotkeyStack.at(-1) ?? null;
-  const slottedRef = useRef(slotted);
-  slottedRef.current = slotted;
-  const activeRef = useRef(contributions.focused);
-  activeRef.current = contributions.focused;
-  const hotkeyRef = useRef(hotkeyEngaged);
-  hotkeyRef.current = hotkeyEngaged;
+  const slottedRef = useLatest(slotted);
+  const activeRef = useLatest(contributions.focused);
+  const hotkeyRef = useLatest(hotkeyEngaged);
   const setFocused = contributions.setFocused;
   const setActive = useCallback(
     (id) => {
@@ -1442,7 +1433,7 @@ function useTools(opts) {
       dlog("tools", "active:", activeRef.current, "\u2192", id);
       setFocused(id);
     },
-    [setFocused]
+    [setFocused, slottedRef, activeRef]
   );
   const engageHotkey = useCallback(
     (id) => {
@@ -1452,15 +1443,15 @@ function useTools(opts) {
       dlog("tools", "hotkey engaged:", id);
       ctx.pushHotkey(id);
     },
-    [ctx]
+    [ctx, slottedRef]
   );
   const disengageHotkey = useCallback(() => {
     if (hotkeyRef.current) dlog("tools", "hotkey disengaged:", hotkeyRef.current);
     ctx.popHotkey();
-  }, [ctx]);
+  }, [ctx, hotkeyRef]);
   const has = useCallback(
-    (id) => id in slottedRef.current.registry || slottedRef.current.ambient.some((t) => t.id === id),
-    []
+    (id) => id in slotted.registry || slotted.ambient.some((t) => t.id === id),
+    [slotted]
   );
   const active = contributions.focused;
   const getActiveOverlays = contributions.overlays;