@hoardodile/ui 0.0.0

package/dist/hooks/use-mobile.js

@@ -0,0 +1,29 @@
+import { useMedia } from 'react-use';
+
+// src/viewport.ts
+var MOBILE_BREAKPOINT_PX = 768;
+var MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT_PX - 1}px)`;
+var SIDEBAR_BREAKPOINT_PX = 1150;
+var SIDEBAR_QUERY = `(max-width: ${SIDEBAR_BREAKPOINT_PX - 1}px)`;
+var PANEL_BREAKPOINT_PX = 1440;
+var PANEL_QUERY = `(max-width: ${PANEL_BREAKPOINT_PX - 1}px)`;
+function isBelowMd() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia(MOBILE_QUERY).matches;
+}
+function useBelowMd() {
+  return useMedia(MOBILE_QUERY, false);
+}
+function useBelowSidebar() {
+  return useMedia(SIDEBAR_QUERY, false);
+}
+function useBelowPanel() {
+  return useMedia(PANEL_QUERY, false);
+}
+function useIsMobile() {
+  return useBelowMd();
+}
+
+export { isBelowMd, useBelowMd, useBelowPanel, useBelowSidebar, useIsMobile };
+//# sourceMappingURL=use-mobile.js.map
+//# sourceMappingURL=use-mobile.js.map

package/dist/hooks/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/viewport.ts","../../src/hooks/use-mobile.ts"],"names":[],"mappings":";;;AAeO,IAAM,oBAAA,GAAuB,GAAA;AAgB7B,IAAM,YAAA,GAAe,CAAA,YAAA,EAAe,oBAAA,GAAuB,CAAC,CAAA,GAAA,CAAA;AAW5D,IAAM,qBAAA,GAAwB,IAAA;AAQ9B,IAAM,aAAA,GAAgB,CAAA,YAAA,EAAe,qBAAA,GAAwB,CAAC,CAAA,GAAA,CAAA;AAW9D,IAAM,mBAAA,GAAsB,IAAA;AAO5B,IAAM,WAAA,GAAc,CAAA,YAAA,EAAe,mBAAA,GAAsB,CAAC,CAAA,GAAA,CAAA;ACtD1D,SAAS,SAAA,GAAqB;AACpC,EAAA,IAAI,OAAO,MAAA,KAAW,WAAA,EAAa,OAAO,KAAA;AAC1C,EAAA,OAAO,MAAA,CAAO,UAAA,CAAW,YAAY,CAAA,CAAE,OAAA;AACxC;AAEO,SAAS,UAAA,GAAsB;AACrC,EAAA,OAAO,QAAA,CAAS,cAAc,KAAK,CAAA;AACpC;AASO,SAAS,eAAA,GAA2B;AAC1C,EAAA,OAAO,QAAA,CAAS,eAAe,KAAK,CAAA;AACrC;AAQO,SAAS,aAAA,GAAyB;AACxC,EAAA,OAAO,QAAA,CAAS,aAAa,KAAK,CAAA;AACnC;AASO,SAAS,WAAA,GAAuB;AACtC,EAAA,OAAO,UAAA,EAAW;AACnB","file":"use-mobile.js","sourcesContent":["/**\n * Mobile viewport initial-scale factor used across the app shell and\n * plugin iframe previews. Kept in one place so it can be changed\n * without hunting through HTML templates and CSS rules.\n */\nexport const MOBILE_INITIAL_SCALE = 0.8\n\n/**\n * Width in pixels at which the app switches from below-md to md+ layouts.\n *\n * This value is intentionally aligned with Tailwind's `md` breakpoint\n * (768 px) so that JS detection and CSS responsive prefixes stay in sync.\n * Components that need to know whether they are in the \"below md\" viewport\n * should use {@link isBelowMd} or {@link useBelowMd} from @hoardodile/ui/hooks/use-mobile.\n */\nexport const MOBILE_BREAKPOINT_PX = 768\n\n/**\n * Same breakpoint expressed in rems, matching Tailwind's default theme\n * (`--breakpoint-md: 48rem`). Useful for CSS media queries and comments.\n */\nexport const MOBILE_BREAKPOINT_REM = MOBILE_BREAKPOINT_PX / 16\n\n/**\n * Media query string that matches viewports below the `md` breakpoint\n * (< 768 px). Shared between JS hooks and anywhere else that needs to detect\n * a below-md viewport.\n *\n * Keep this in sync with the CSS/Tailwind breakpoint so JS and CSS never\n * disagree about the viewport size.\n */\nexport const MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT_PX - 1}px)`\n\n/**\n * Width in pixels at which the app switches from a drawer to a fixed left\n * sidebar (the \"app shell\"). Raised above `md` so mid-size viewports keep\n * the whole width for their content column — below this the sidebar hides\n * behind the hamburger drawer.\n *\n * Use the CSS `sidebar:` / `max-sidebar:` variants (`--breakpoint-sidebar`)\n * at call sites — this value is the single source of truth for both.\n */\nexport const SIDEBAR_BREAKPOINT_PX = 1150\n\n/**\n * Media query string that matches viewports below the sidebar breakpoint\n * (`max-sidebar`), i.e. where the shell shows the drawer instead of the fixed\n * sidebar. Shared between JS hooks and anywhere else that needs the\n * below-sidebar viewport.\n */\nexport const SIDEBAR_QUERY = `(max-width: ${SIDEBAR_BREAKPOINT_PX - 1}px)`\n\n/**\n * Width in pixels at which the right filter rail switches from a fixed\n * column to a drawer (DESIGN.md — Layout: \"the panel becomes an\n * overlay below 1440px\"). Below this the sidebar + panel + content no\n * longer fit comfortably, so the rail hides behind a Filters button.\n *\n * Use the CSS `panel:` / `max-panel:` variants (`--breakpoint-panel`)\n * at call sites — this value is the single source of truth for both.\n */\nexport const PANEL_BREAKPOINT_PX = 1440\n\n/**\n * Media query string that matches viewports below the panel breakpoint\n * (< 1440 px), i.e. where the filter rail lives in a drawer. Shared\n * between JS hooks and anywhere else that needs the below-panel viewport.\n */\nexport const PANEL_QUERY = `(max-width: ${PANEL_BREAKPOINT_PX - 1}px)`\n","import {\n\tMOBILE_QUERY,\n\tPANEL_QUERY,\n\tSIDEBAR_QUERY,\n} from \"@hoardodile/ui/viewport\"\nimport { useMedia } from \"react-use\"\n\n/**\n * One-shot check for viewports below the `md` breakpoint (< 768 px).\n *\n * Prefer {@link useBelowMd} in React components so they re-render when the\n * viewport crosses the breakpoint. Use this helper only in event handlers,\n * utility functions, or effects where a reactive hook is not appropriate.\n */\nexport function isBelowMd(): boolean {\n\tif (typeof window === \"undefined\") return false\n\treturn window.matchMedia(MOBILE_QUERY).matches\n}\n\nexport function useBelowMd(): boolean {\n\treturn useMedia(MOBILE_QUERY, false)\n}\n\n/**\n * Reactive check for viewports below the app-shell sidebar breakpoint\n * (`max-sidebar`), where the fixed sidebar is replaced by the hamburger\n * drawer. Keep in sync with `SIDEBAR_BREAKPOINT_PX` and the\n * `sidebar:` / `max-sidebar:` CSS variants. The shell alone decides its own chrome;\n * compact-UI consumers keep using {@link useBelowMd}.\n */\nexport function useBelowSidebar(): boolean {\n\treturn useMedia(SIDEBAR_QUERY, false)\n}\n\n/**\n * Reactive check for viewports below the filter-rail breakpoint\n * (< 1440 px), where the rail becomes a drawer instead of a fixed right\n * column. Keep in sync with `PANEL_BREAKPOINT_PX` and the\n * `panel:` / `max-panel:` CSS variants.\n */\nexport function useBelowPanel(): boolean {\n\treturn useMedia(PANEL_QUERY, false)\n}\n\n/**\n * Compatibility alias for official shadcn-generated components (e.g.\n * `sidebar.tsx`), which import `useIsMobile` from this module. Mobile\n * detection rules are owned by THIS file for the whole repo (apps and\n * plugins alike) — never let the registry version of `use-mobile.ts`\n * replace it; restore after every `shadcn add`.\n */\nexport function useIsMobile(): boolean {\n\treturn useBelowMd()\n}\n"]}

package/dist/hooks/use-pinch-pan.d.ts

@@ -0,0 +1,56 @@
+import { RefObject } from 'react';
+
+/**
+ * Shared pinch/pan viewport gesture for media viewers. One finger pans,
+ * two fingers zoom around their midpoint, a quick tap reports a click,
+ * and a second quick tap reports a double tap. The transform is
+ * `translate(x, y) scale(scale)` with the target's center as origin.
+ */
+type ViewportTransform = {
+    readonly x: number;
+    readonly y: number;
+    readonly scale: number;
+};
+type ViewportPoint = {
+    readonly x: number;
+    readonly y: number;
+};
+type PinchPanOptions = {
+    readonly target: RefObject<HTMLElement | null>;
+    readonly initial?: ViewportTransform;
+    readonly minScale?: number;
+    readonly maxScale?: number;
+    /** Max travel for a tap before it becomes a drag, in CSS pixels. */
+    readonly tapThreshold?: number;
+    /** When this value changes, the viewport returns to `initial`. */
+    readonly resetKey?: string | number;
+    readonly onChange?: (next: ViewportTransform) => void;
+    readonly onTap?: (point: ViewportPoint) => void;
+    readonly onDoubleTap?: (point: ViewportPoint) => void;
+};
+/**
+ * Clamp a scale into the viewer's zoom range. Pure so tests can hold the
+ * same arithmetic the DOM hook uses.
+ */
+declare function clampViewportScale(scale: number, options: {
+    readonly minScale: number;
+    readonly maxScale: number;
+}): number;
+/** Pan a transform by screen-space pixels. */
+declare function panViewport(transform: ViewportTransform, delta: ViewportPoint): ViewportTransform;
+/**
+ * Zoom `transform` to `nextScale` while keeping the content under
+ * `anchor` (relative to the transform origin) visually fixed.
+ */
+declare function zoomViewportAt(transform: ViewportTransform, anchor: ViewportPoint, nextScale: number, options: {
+    readonly minScale: number;
+    readonly maxScale: number;
+}): ViewportTransform;
+/** True when a press counts as a tap rather than a drag. */
+declare function isTapGesture(start: ViewportPoint, end: ViewportPoint, tapThreshold: number): boolean;
+declare function usePinchPan(options: PinchPanOptions): {
+    readonly transform: ViewportTransform;
+    readonly reset: () => void;
+};
+
+export { type PinchPanOptions, type ViewportPoint, type ViewportTransform, clampViewportScale, isTapGesture, panViewport, usePinchPan, zoomViewportAt };

package/dist/hooks/use-pinch-pan.js

@@ -0,0 +1,223 @@
+import { useState, useRef, useEffect } from 'react';
+
+// src/hooks/use-pinch-pan.ts
+var DEFAULT_TRANSFORM = { x: 0, y: 0, scale: 1 };
+function clampViewportScale(scale, options) {
+  return Math.max(options.minScale, Math.min(options.maxScale, scale));
+}
+function panViewport(transform, delta) {
+  return { ...transform, x: transform.x + delta.x, y: transform.y + delta.y };
+}
+function zoomViewportAt(transform, anchor, nextScale, options) {
+  const scale = clampViewportScale(nextScale, options);
+  const scaleDelta = scale - transform.scale;
+  return {
+    scale,
+    x: transform.x - anchor.x * scaleDelta,
+    y: transform.y - anchor.y * scaleDelta
+  };
+}
+function isTapGesture(start, end, tapThreshold) {
+  return Math.hypot(end.x - start.x, end.y - start.y) < tapThreshold;
+}
+function usePinchPan(options) {
+  const {
+    target,
+    initial = DEFAULT_TRANSFORM,
+    minScale = 0.5,
+    maxScale = 4,
+    tapThreshold = 8,
+    resetKey,
+    onChange,
+    onTap,
+    onDoubleTap
+  } = options;
+  const [transform, setTransform] = useState(initial);
+  const initialRef = useRef(initial);
+  initialRef.current = initial;
+  const transformRef = useRef(transform);
+  transformRef.current = transform;
+  const sessionRef = useRef(null);
+  const lastTapRef = useRef(null);
+  const boundsRef = useRef({ minScale, maxScale, tapThreshold });
+  boundsRef.current = { minScale, maxScale, tapThreshold };
+  function update(next) {
+    setTransform(next);
+    onChange?.(next);
+  }
+  function reset() {
+    update({ ...DEFAULT_TRANSFORM });
+  }
+  useEffect(() => {
+    if (resetKey === void 0) return;
+    update({ ...initialRef.current });
+  }, [resetKey]);
+  useEffect(() => {
+    const currentTarget = target.current;
+    if (currentTarget === null) return;
+    const element = currentTarget;
+    function startPointer(event) {
+      const current = transformRef.current;
+      const session = sessionRef.current;
+      if (session === null) {
+        sessionRef.current = {
+          pointers: /* @__PURE__ */ new Map([[event.pointerId, activePointer(event)]]),
+          start: current,
+          startDistance: 0,
+          startMidpoint: eventPoint(event),
+          moved: false
+        };
+        element.setPointerCapture(event.pointerId);
+        return;
+      }
+      const pointers = new Map(session.pointers);
+      pointers.set(event.pointerId, activePointer(event));
+      const entries = [...pointers.values()];
+      if (entries.length >= 2) {
+        const first = entries[0];
+        const second = entries[1];
+        if (first !== void 0 && second !== void 0) {
+          sessionRef.current = {
+            pointers,
+            start: current,
+            startDistance: distance(first, second),
+            startMidpoint: midpoint(first, second),
+            moved: session.moved
+          };
+        }
+      }
+      element.setPointerCapture(event.pointerId);
+    }
+    function movePointer(event) {
+      const session = sessionRef.current;
+      if (session === null) return;
+      const pointers = new Map(session.pointers);
+      pointers.set(
+        event.pointerId,
+        activePointer(event, session.pointers.get(event.pointerId))
+      );
+      const entries = [...pointers.values()];
+      if (entries.length === 0) return;
+      if (entries.length === 1) {
+        const pointer = entries[0];
+        if (pointer === void 0) return;
+        const delta = {
+          x: pointer.x - pointer.startX,
+          y: pointer.y - pointer.startY
+        };
+        if (!isTapGesture(
+          session.startMidpoint,
+          pointer,
+          boundsRef.current.tapThreshold
+        )) {
+          session.moved = true;
+        }
+        sessionRef.current = {
+          ...session,
+          pointers,
+          moved: session.moved || movedBeyondTap(pointer, boundsRef.current.tapThreshold)
+        };
+        update(panViewport(session.start, delta));
+        return;
+      }
+      const first = entries[0];
+      const second = entries[1];
+      if (first === void 0 || second === void 0) return;
+      const nextDistance = Math.max(1, distance(first, second));
+      const ratio = nextDistance / Math.max(1, session.startDistance);
+      const nextMidpoint = midpoint(first, second);
+      const centerMidpoint = relativeMidpoint(element, nextMidpoint);
+      const next = zoomViewportAt(
+        session.start,
+        centerMidpoint,
+        session.start.scale * ratio,
+        {
+          minScale: boundsRef.current.minScale,
+          maxScale: boundsRef.current.maxScale
+        }
+      );
+      sessionRef.current = { ...session, pointers, moved: true };
+      update(next);
+    }
+    function endPointer(event) {
+      const session = sessionRef.current;
+      if (session === null) return;
+      const pointers = new Map(session.pointers);
+      pointers.delete(event.pointerId);
+      if (pointers.size > 0) {
+        sessionRef.current = { ...session, pointers };
+        return;
+      }
+      sessionRef.current = null;
+      if (!session.moved && session.pointers.size === 1) {
+        const point = eventPoint(event);
+        handleTap(point);
+      }
+    }
+    function cancelPointer(event) {
+      const session = sessionRef.current;
+      if (session === null) return;
+      const pointers = new Map(session.pointers);
+      pointers.delete(event.pointerId);
+      sessionRef.current = pointers.size > 0 ? { ...session, pointers } : null;
+    }
+    function handleTap(point) {
+      onTap?.(point);
+      const now = performance.now();
+      const last = lastTapRef.current;
+      lastTapRef.current = { point, time: now };
+      if (last !== null && now - last.time < 300 && Math.hypot(point.x - last.point.x, point.y - last.point.y) < 30) {
+        lastTapRef.current = null;
+        onDoubleTap?.(point);
+      }
+    }
+    element.addEventListener("pointerdown", startPointer);
+    element.addEventListener("pointermove", movePointer);
+    element.addEventListener("pointerup", endPointer);
+    element.addEventListener("pointercancel", cancelPointer);
+    return () => {
+      element.removeEventListener("pointerdown", startPointer);
+      element.removeEventListener("pointermove", movePointer);
+      element.removeEventListener("pointerup", endPointer);
+      element.removeEventListener("pointercancel", cancelPointer);
+    };
+  }, [target, onTap, onDoubleTap, onChange]);
+  return { transform, reset };
+}
+function activePointer(event, start) {
+  const origin = start ?? eventPoint(event);
+  return {
+    id: event.pointerId,
+    x: event.clientX,
+    y: event.clientY,
+    startX: origin.x,
+    startY: origin.y
+  };
+}
+function eventPoint(event) {
+  return { x: event.clientX, y: event.clientY };
+}
+function distance(a, b) {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+function midpoint(a, b) {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+function movedBeyondTap(pointer, tapThreshold) {
+  return isTapGesture(
+    { x: pointer.startX, y: pointer.startY },
+    { x: pointer.x, y: pointer.y },
+    tapThreshold
+  ) === false;
+}
+function relativeMidpoint(element, point) {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: point.x - (rect.left + rect.width / 2),
+    y: point.y - (rect.top + rect.height / 2)
+  };
+}
+
+export { clampViewportScale, isTapGesture, panViewport, usePinchPan, zoomViewportAt };
+//# sourceMappingURL=use-pinch-pan.js.map
+//# sourceMappingURL=use-pinch-pan.js.map

package/dist/hooks/use-pinch-pan.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-pinch-pan.ts"],"names":[],"mappings":"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","file":"use-pinch-pan.js","sourcesContent":["import { type RefObject, useEffect, useRef, useState } from \"react\"\n\n/**\n * Shared pinch/pan viewport gesture for media viewers. One finger pans,\n * two fingers zoom around their midpoint, a quick tap reports a click,\n * and a second quick tap reports a double tap. The transform is\n * `translate(x, y) scale(scale)` with the target's center as origin.\n */\n\nexport type ViewportTransform = {\n\treadonly x: number\n\treadonly y: number\n\treadonly scale: number\n}\n\nexport type ViewportPoint = {\n\treadonly x: number\n\treadonly y: number\n}\n\nexport type PinchPanOptions = {\n\treadonly target: RefObject<HTMLElement | null>\n\treadonly initial?: ViewportTransform\n\treadonly minScale?: number\n\treadonly maxScale?: number\n\t/** Max travel for a tap before it becomes a drag, in CSS pixels. */\n\treadonly tapThreshold?: number\n\t/** When this value changes, the viewport returns to `initial`. */\n\treadonly resetKey?: string | number\n\treadonly onChange?: (next: ViewportTransform) => void\n\treadonly onTap?: (point: ViewportPoint) => void\n\treadonly onDoubleTap?: (point: ViewportPoint) => void\n}\n\nconst DEFAULT_TRANSFORM: ViewportTransform = { x: 0, y: 0, scale: 1 }\n\ntype ActivePointer = {\n\treadonly id: number\n\treadonly x: number\n\treadonly y: number\n\treadonly startX: number\n\treadonly startY: number\n}\n\ntype GestureSession = {\n\treadonly pointers: ReadonlyMap<number, ActivePointer>\n\treadonly start: ViewportTransform\n\treadonly startDistance: number\n\treadonly startMidpoint: ViewportPoint\n\tmoved: boolean\n}\n\n/**\n * Clamp a scale into the viewer's zoom range. Pure so tests can hold the\n * same arithmetic the DOM hook uses.\n */\nexport function clampViewportScale(\n\tscale: number,\n\toptions: { readonly minScale: number; readonly maxScale: number },\n): number {\n\treturn Math.max(options.minScale, Math.min(options.maxScale, scale))\n}\n\n/** Pan a transform by screen-space pixels. */\nexport function panViewport(\n\ttransform: ViewportTransform,\n\tdelta: ViewportPoint,\n): ViewportTransform {\n\treturn { ...transform, x: transform.x + delta.x, y: transform.y + delta.y }\n}\n\n/**\n * Zoom `transform` to `nextScale` while keeping the content under\n * `anchor` (relative to the transform origin) visually fixed.\n */\nexport function zoomViewportAt(\n\ttransform: ViewportTransform,\n\tanchor: ViewportPoint,\n\tnextScale: number,\n\toptions: { readonly minScale: number; readonly maxScale: number },\n): ViewportTransform {\n\tconst scale = clampViewportScale(nextScale, options)\n\tconst scaleDelta = scale - transform.scale\n\treturn {\n\t\tscale,\n\t\tx: transform.x - anchor.x * scaleDelta,\n\t\ty: transform.y - anchor.y * scaleDelta,\n\t}\n}\n\n/** True when a press counts as a tap rather than a drag. */\nexport function isTapGesture(\n\tstart: ViewportPoint,\n\tend: ViewportPoint,\n\ttapThreshold: number,\n): boolean {\n\treturn Math.hypot(end.x - start.x, end.y - start.y) < tapThreshold\n}\n\nexport function usePinchPan(options: PinchPanOptions): {\n\treadonly transform: ViewportTransform\n\treadonly reset: () => void\n} {\n\tconst {\n\t\ttarget,\n\t\tinitial = DEFAULT_TRANSFORM,\n\t\tminScale = 0.5,\n\t\tmaxScale = 4,\n\t\ttapThreshold = 8,\n\t\tresetKey,\n\t\tonChange,\n\t\tonTap,\n\t\tonDoubleTap,\n\t} = options\n\tconst [transform, setTransform] = useState<ViewportTransform>(initial)\n\tconst initialRef = useRef(initial)\n\tinitialRef.current = initial\n\tconst transformRef = useRef(transform)\n\ttransformRef.current = transform\n\tconst sessionRef = useRef<GestureSession | null>(null)\n\tconst lastTapRef = useRef<{\n\t\treadonly point: ViewportPoint\n\t\treadonly time: number\n\t} | null>(null)\n\tconst boundsRef = useRef({ minScale, maxScale, tapThreshold })\n\tboundsRef.current = { minScale, maxScale, tapThreshold }\n\n\tfunction update(next: ViewportTransform) {\n\t\tsetTransform(next)\n\t\tonChange?.(next)\n\t}\n\n\tfunction reset() {\n\t\tupdate({ ...DEFAULT_TRANSFORM })\n\t}\n\n\tuseEffect(() => {\n\t\tif (resetKey === undefined) return\n\t\tupdate({ ...initialRef.current })\n\t}, [resetKey])\n\n\tuseEffect(() => {\n\t\tconst currentTarget = target.current\n\t\tif (currentTarget === null) return\n\t\tconst element: HTMLElement = currentTarget\n\n\t\tfunction startPointer(event: PointerEvent): void {\n\t\t\tconst current = transformRef.current\n\t\t\tconst session = sessionRef.current\n\t\t\tif (session === null) {\n\t\t\t\tsessionRef.current = {\n\t\t\t\t\tpointers: new Map([[event.pointerId, activePointer(event)]]),\n\t\t\t\t\tstart: current,\n\t\t\t\t\tstartDistance: 0,\n\t\t\t\t\tstartMidpoint: eventPoint(event),\n\t\t\t\t\tmoved: false,\n\t\t\t\t}\n\t\t\t\telement.setPointerCapture(event.pointerId)\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst pointers = new Map(session.pointers)\n\t\t\tpointers.set(event.pointerId, activePointer(event))\n\t\t\tconst entries = [...pointers.values()]\n\t\t\tif (entries.length >= 2) {\n\t\t\t\tconst first = entries[0]\n\t\t\t\tconst second = entries[1]\n\t\t\t\tif (first !== undefined && second !== undefined) {\n\t\t\t\t\tsessionRef.current = {\n\t\t\t\t\t\tpointers,\n\t\t\t\t\t\tstart: current,\n\t\t\t\t\t\tstartDistance: distance(first, second),\n\t\t\t\t\t\tstartMidpoint: midpoint(first, second),\n\t\t\t\t\t\tmoved: session.moved,\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\telement.setPointerCapture(event.pointerId)\n\t\t}\n\n\t\tfunction movePointer(event: PointerEvent): void {\n\t\t\tconst session = sessionRef.current\n\t\t\tif (session === null) return\n\t\t\tconst pointers = new Map(session.pointers)\n\t\t\tpointers.set(\n\t\t\t\tevent.pointerId,\n\t\t\t\tactivePointer(event, session.pointers.get(event.pointerId)),\n\t\t\t)\n\t\t\tconst entries = [...pointers.values()]\n\t\t\tif (entries.length === 0) return\n\n\t\t\tif (entries.length === 1) {\n\t\t\t\tconst pointer = entries[0]\n\t\t\t\tif (pointer === undefined) return\n\t\t\t\tconst delta = {\n\t\t\t\t\tx: pointer.x - pointer.startX,\n\t\t\t\t\ty: pointer.y - pointer.startY,\n\t\t\t\t}\n\t\t\t\tif (\n\t\t\t\t\t!isTapGesture(\n\t\t\t\t\t\tsession.startMidpoint,\n\t\t\t\t\t\tpointer,\n\t\t\t\t\t\tboundsRef.current.tapThreshold,\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\tsession.moved = true\n\t\t\t\t}\n\t\t\t\tsessionRef.current = {\n\t\t\t\t\t...session,\n\t\t\t\t\tpointers,\n\t\t\t\t\tmoved:\n\t\t\t\t\t\tsession.moved ||\n\t\t\t\t\t\tmovedBeyondTap(pointer, boundsRef.current.tapThreshold),\n\t\t\t\t}\n\t\t\t\tupdate(panViewport(session.start, delta))\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst first = entries[0]\n\t\t\tconst second = entries[1]\n\t\t\tif (first === undefined || second === undefined) return\n\t\t\tconst nextDistance = Math.max(1, distance(first, second))\n\t\t\tconst ratio = nextDistance / Math.max(1, session.startDistance)\n\t\t\tconst nextMidpoint = midpoint(first, second)\n\t\t\tconst centerMidpoint = relativeMidpoint(element, nextMidpoint)\n\t\t\tconst next = zoomViewportAt(\n\t\t\t\tsession.start,\n\t\t\t\tcenterMidpoint,\n\t\t\t\tsession.start.scale * ratio,\n\t\t\t\t{\n\t\t\t\t\tminScale: boundsRef.current.minScale,\n\t\t\t\t\tmaxScale: boundsRef.current.maxScale,\n\t\t\t\t},\n\t\t\t)\n\t\t\tsessionRef.current = { ...session, pointers, moved: true }\n\t\t\tupdate(next)\n\t\t}\n\n\t\tfunction endPointer(event: PointerEvent): void {\n\t\t\tconst session = sessionRef.current\n\t\t\tif (session === null) return\n\t\t\tconst pointers = new Map(session.pointers)\n\t\t\tpointers.delete(event.pointerId)\n\t\t\tif (pointers.size > 0) {\n\t\t\t\tsessionRef.current = { ...session, pointers }\n\t\t\t\treturn\n\t\t\t}\n\t\t\tsessionRef.current = null\n\t\t\tif (!session.moved && session.pointers.size === 1) {\n\t\t\t\tconst point = eventPoint(event)\n\t\t\t\thandleTap(point)\n\t\t\t}\n\t\t}\n\n\t\tfunction cancelPointer(event: PointerEvent): void {\n\t\t\tconst session = sessionRef.current\n\t\t\tif (session === null) return\n\t\t\tconst pointers = new Map(session.pointers)\n\t\t\tpointers.delete(event.pointerId)\n\t\t\tsessionRef.current = pointers.size > 0 ? { ...session, pointers } : null\n\t\t}\n\n\t\tfunction handleTap(point: ViewportPoint): void {\n\t\t\tonTap?.(point)\n\t\t\tconst now = performance.now()\n\t\t\tconst last = lastTapRef.current\n\t\t\tlastTapRef.current = { point, time: now }\n\t\t\tif (\n\t\t\t\tlast !== null &&\n\t\t\t\tnow - last.time < 300 &&\n\t\t\t\tMath.hypot(point.x - last.point.x, point.y - last.point.y) < 30\n\t\t\t) {\n\t\t\t\tlastTapRef.current = null\n\t\t\t\tonDoubleTap?.(point)\n\t\t\t}\n\t\t}\n\n\t\telement.addEventListener(\"pointerdown\", startPointer)\n\t\telement.addEventListener(\"pointermove\", movePointer)\n\t\telement.addEventListener(\"pointerup\", endPointer)\n\t\telement.addEventListener(\"pointercancel\", cancelPointer)\n\t\treturn () => {\n\t\t\telement.removeEventListener(\"pointerdown\", startPointer)\n\t\t\telement.removeEventListener(\"pointermove\", movePointer)\n\t\t\telement.removeEventListener(\"pointerup\", endPointer)\n\t\t\telement.removeEventListener(\"pointercancel\", cancelPointer)\n\t\t}\n\t}, [target, onTap, onDoubleTap, onChange])\n\n\treturn { transform, reset }\n}\n\nfunction activePointer(\n\tevent: PointerEvent,\n\tstart?: ActivePointer | ViewportPoint,\n): ActivePointer {\n\tconst origin = start ?? eventPoint(event)\n\treturn {\n\t\tid: event.pointerId,\n\t\tx: event.clientX,\n\t\ty: event.clientY,\n\t\tstartX: origin.x,\n\t\tstartY: origin.y,\n\t}\n}\n\nfunction eventPoint(event: {\n\treadonly clientX: number\n\treadonly clientY: number\n}): ViewportPoint {\n\treturn { x: event.clientX, y: event.clientY }\n}\n\nfunction distance(a: ViewportPoint, b: ViewportPoint): number {\n\treturn Math.hypot(a.x - b.x, a.y - b.y)\n}\n\nfunction midpoint(a: ViewportPoint, b: ViewportPoint): ViewportPoint {\n\treturn { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }\n}\n\nfunction movedBeyondTap(pointer: ActivePointer, tapThreshold: number): boolean {\n\treturn (\n\t\tisTapGesture(\n\t\t\t{ x: pointer.startX, y: pointer.startY },\n\t\t\t{ x: pointer.x, y: pointer.y },\n\t\t\ttapThreshold,\n\t\t) === false\n\t)\n}\n\nfunction relativeMidpoint(\n\telement: HTMLElement,\n\tpoint: ViewportPoint,\n): ViewportPoint {\n\tconst rect = element.getBoundingClientRect()\n\treturn {\n\t\tx: point.x - (rect.left + rect.width / 2),\n\t\ty: point.y - (rect.top + rect.height / 2),\n\t}\n}\n"]}

package/dist/hooks/useMobileBackToClose.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Optional navigation-resolver registration injected by the host app.
+ *
+ * When set (via {@link setNavigationResolver}), `scheduleStateRestore`
+ * uses it to receive a deterministic "navigation complete" signal from
+ * the router instead of guessing timing via `requestAnimationFrame`.
+ *
+ * The registered function accepts a one-shot callback and returns an
+ * unsubscribe function. The hook calls it, inspects `history.state`
+ * inside the callback, then unsubscribes.
+ */
+type NavigationResolver = (onResolved: () => void) => () => void;
+/**
+ * Registers a navigation-resolver factory so that
+ * {@link useMobileBackToClose} can wait for the router to finish
+ * flushing its history mutations before inspecting `history.state`.
+ *
+ * Call this once at app startup, after the router is created:
+ *
+ * ```ts
+ * import { setNavigationResolver } from "@hoardodile/ui"
+ * import { router } from "./router"
+ *
+ * setNavigationResolver((fn) => router.subscribe("onResolved", fn))
+ * ```
+ *
+ * When no resolver is registered, the hook falls back to
+ * `requestAnimationFrame` (correct for microtask-based routers but
+ * less deterministic).
+ */
+declare function setNavigationResolver(resolver: NavigationResolver): void;
+/**
+ * On mobile (< sm), when an overlay (dialog/sheet/popover) opens we push a
+ * synthetic history entry so the device back gesture closes it instead of
+ * navigating away from the page.
+ *
+ * **Closing via UI** calls `history.back()` to navigate past the
+ * synthetic entry, then uses `replaceState` (inside the resulting
+ * popstate handler) to restore the original history state.
+ *
+ * **Closing via back gesture** is handled by the popstate listener,
+ * which pops the stack entry and calls the close callback.
+ *
+ * **Closing via route navigation**: the `pushState` interceptor
+ * closes all overlays synchronously but does NOT strip the synthetic
+ * marker. The React effect's `scheduleStateRestore` waits for the
+ * router's navigation-resolved signal (or falls back to
+ * `requestAnimationFrame`); by then the router's push has completed
+ * and the marker is gone from `history.state`, so `back()` is
+ * skipped. The stranded synthetic entry is later auto-skipped by the
+ * capture-phase popstate listener when the user navigates past it.
+ *
+ * Multiple overlays open at once stack: pressing back closes the most
+ * recently opened one first, matching the visual stacking order.
+ *
+ * No-op on non-mobile viewports and when no `onOpenChange` is provided
+ * (uncontrolled overlays cannot be closed externally).
+ */
+declare function useMobileBackToClose(open: boolean | undefined, onOpenChange: ((open: boolean) => void) | undefined): void;
+
+export { setNavigationResolver, useMobileBackToClose };

package/dist/hooks/useMobileBackToClose.js

@@ -0,0 +1,234 @@
+import 'react-use';
+import { useRef, useEffect } from 'react';
+
+// src/viewport.ts
+var MOBILE_BREAKPOINT_PX = 768;
+var MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT_PX - 1}px)`;
+function isBelowMd() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia(MOBILE_QUERY).matches;
+}
+var HISTORY_KEY = "__appMobileOverlay";
+var overlayStack = [];
+var popListenerInstalled = false;
+var historyPatched = false;
+var nextOverlayId = 0;
+var suppressPopCount = 0;
+var seenSyntheticIds = /* @__PURE__ */ new Set();
+var navigationResolver;
+function setNavigationResolver(resolver) {
+  navigationResolver = resolver;
+}
+function patchHistory() {
+  if (historyPatched) return;
+  if (typeof window === "undefined") return;
+  historyPatched = true;
+  const origPush = window.history.pushState.bind(window.history);
+  window.history.pushState = (data, unused, url) => {
+    const state = data;
+    if (state !== null && typeof state === "object" && HISTORY_KEY in state) {
+      origPush(data, unused, url);
+      return;
+    }
+    if (overlayStack.length > 0) {
+      closeAllOverlays();
+    }
+    origPush(data, unused, url);
+  };
+}
+function closeAllOverlays() {
+  while (overlayStack.length > 0) {
+    const entry = overlayStack.pop();
+    if (entry?.close !== void 0) {
+      const fn = entry.close;
+      entry.close = void 0;
+      fn();
+    }
+  }
+}
+function ensurePopListener() {
+  if (popListenerInstalled) return;
+  if (typeof window === "undefined") return;
+  popListenerInstalled = true;
+  window.addEventListener(
+    "popstate",
+    (e) => {
+      if (suppressPopCount > 0) return;
+      const state = e.state;
+      if (state !== null && typeof state === "object" && HISTORY_KEY in state) {
+        const id = state[HISTORY_KEY];
+        if (typeof id === "number" && overlayStack.some((entry) => entry.id === id)) {
+          closeTopOverlay();
+          e.stopImmediatePropagation();
+          return;
+        }
+        e.stopImmediatePropagation();
+        if (typeof id === "number" && seenSyntheticIds.has(id)) {
+          window.history.back();
+        }
+      }
+    },
+    true
+    // capture phase
+  );
+  window.addEventListener("popstate", handlePop);
+  patchHistory();
+}
+function closeTopOverlay() {
+  const top = overlayStack.pop();
+  if (top === void 0) return;
+  if (top.close === void 0) return;
+  const closeFn = top.close;
+  top.close = void 0;
+  closeFn();
+}
+function handlePop() {
+  if (suppressPopCount > 0) {
+    suppressPopCount--;
+    return;
+  }
+  closeTopOverlay();
+}
+function removeFromStack(id) {
+  const idx = overlayStack.findIndex((e) => e.id === id);
+  if (idx === -1) return { removed: false, parkedBelow: 0 };
+  const wasTop = idx === overlayStack.length - 1;
+  if (!wasTop) {
+    const entry = overlayStack[idx];
+    if (entry !== void 0) entry.close = void 0;
+    return { removed: true, parkedBelow: 0 };
+  }
+  overlayStack.pop();
+  const remaining = overlayStack.splice(0, overlayStack.length);
+  const active = remaining.filter((e) => e.close !== void 0);
+  const parkedBelow = remaining.length - active.length;
+  overlayStack.push(...active);
+  return { removed: true, parkedBelow };
+}
+function scheduleStateRestore(id, baseState, parkedBelow) {
+  function check() {
+    const currentState = window.history.state;
+    if (currentState === null || typeof currentState !== "object" || !(HISTORY_KEY in currentState) || currentState[HISTORY_KEY] !== id) {
+      sweepParkedEntries();
+      return;
+    }
+    const totalBacks = 1 + parkedBelow;
+    let done = false;
+    function restore() {
+      if (done) return;
+      done = true;
+      window.removeEventListener("popstate", onPop);
+      window.history.replaceState(baseState, "");
+      const sweptIds = sweepParkedEntries();
+      cleanupSeenIds(sweptIds);
+    }
+    function onPop() {
+      if (suppressPopCount > 0) {
+        suppressPopCount--;
+        return;
+      }
+      restore();
+    }
+    window.addEventListener("popstate", onPop);
+    suppressPopCount += totalBacks;
+    for (let i = 0; i < totalBacks; i++) {
+      window.history.back();
+    }
+  }
+  let disposed = false;
+  let rafId;
+  let unsub;
+  function run() {
+    if (disposed) return;
+    disposed = true;
+    unsub?.();
+    if (rafId !== void 0) {
+      cancelAnimationFrame(rafId);
+    }
+    check();
+  }
+  if (navigationResolver !== void 0) {
+    unsub = navigationResolver(run);
+  }
+  rafId = requestAnimationFrame(run);
+}
+function sweepParkedEntries() {
+  const sweptIds = [];
+  for (let i = overlayStack.length - 1; i >= 0; i--) {
+    const entry = overlayStack[i];
+    if (entry !== void 0 && entry.close === void 0) {
+      sweptIds.push(entry.id);
+      overlayStack.splice(i, 1);
+    }
+  }
+  return sweptIds;
+}
+function cleanupSeenIds(sweptIds) {
+  const activeIds = new Set(overlayStack.map((e) => e.id));
+  for (const id of sweptIds) {
+    if (!activeIds.has(id)) {
+      seenSyntheticIds.delete(id);
+    }
+  }
+}
+function useMobileBackToClose(open, onOpenChange) {
+  const idRef = useRef(void 0);
+  const onChangeRef = useRef(onOpenChange);
+  onChangeRef.current = onOpenChange;
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (onChangeRef.current === void 0) return;
+    if (!isBelowMd()) return;
+    ensurePopListener();
+    if (open === true && idRef.current === void 0) {
+      const id = ++nextOverlayId;
+      idRef.current = id;
+      seenSyntheticIds.add(id);
+      const baseState = window.history.state ?? null;
+      window.history.pushState(
+        {
+          ...baseState ?? {},
+          [HISTORY_KEY]: id
+        },
+        ""
+      );
+      overlayStack.push({
+        id,
+        baseState,
+        close() {
+          idRef.current = void 0;
+          onChangeRef.current?.(false);
+        }
+      });
+      return;
+    }
+    if (open !== true && idRef.current !== void 0) {
+      const id = idRef.current;
+      idRef.current = void 0;
+      const entryIdx = overlayStack.findIndex((e) => e.id === id);
+      const entry = entryIdx !== -1 ? overlayStack[entryIdx] : void 0;
+      const { removed, parkedBelow } = removeFromStack(id);
+      if (removed && entry !== void 0) {
+        scheduleStateRestore(id, entry.baseState, parkedBelow);
+      }
+    }
+  }, [open]);
+  useEffect(() => {
+    return () => {
+      if (idRef.current !== void 0) {
+        const id = idRef.current;
+        idRef.current = void 0;
+        const entryIdx = overlayStack.findIndex((e) => e.id === id);
+        const entry = entryIdx !== -1 ? overlayStack[entryIdx] : void 0;
+        const { removed, parkedBelow } = removeFromStack(id);
+        if (removed && entry !== void 0) {
+          scheduleStateRestore(id, entry.baseState, parkedBelow);
+        }
+      }
+    };
+  }, []);
+}
+
+export { setNavigationResolver, useMobileBackToClose };
+//# sourceMappingURL=useMobileBackToClose.js.map
+//# sourceMappingURL=useMobileBackToClose.js.map