@eifi1/ui-kit 0.4.0

package/dist/hooks/use-anchored-panel.d.ts

@@ -0,0 +1,80 @@
+import { RefObject } from 'react';
+import { AnchorRect } from './use-anchored-rect.js';
+
+/**
+ * Vertical placement for a portalled, `position: fixed` panel anchored to a trigger.
+ *
+ * The problem it solves (feedback #135): on a phone, opening a picker focuses its
+ * search box, the on-screen keyboard slides up, and a panel pinned below a trigger in
+ * the lower half of the screen ends up entirely behind that keyboard — with nothing
+ * the user can do about it, because `position: fixed` does not scroll.
+ *
+ * The keyboard is invisible to the usual measurements: on Android Chrome the LAYOUT
+ * viewport (`window.innerHeight`, and the origin `getBoundingClientRect` and
+ * `position: fixed` are relative to) does not shrink when it opens. Only
+ * `visualViewport` reports the region actually on screen, so that is what this reads.
+ */
+/** The on-screen region, in layout-viewport coordinates. */
+interface ViewportBox {
+    top: number;
+    height: number;
+}
+interface AnchoredPanelOptions {
+    /** Space between trigger and panel. */
+    gap?: number;
+    /** Space kept clear at the viewport edges. */
+    margin?: number;
+    /** The height the panel would like, when there is room. */
+    preferredHeight?: number;
+    /** Below this, the space under the trigger counts as unusable and a flip is considered. */
+    minHeight?: number;
+}
+interface AnchoredPanel {
+    /** The trigger's rect, or null while closed/unmeasured. */
+    rect: AnchorRect | null;
+    /** Viewport-space `top` for the panel. */
+    top: number;
+    /** Cap that keeps the panel inside the VISIBLE viewport — apply as `maxHeight`. */
+    maxHeight: number;
+    /** Whether the panel was flipped above the trigger. */
+    above: boolean;
+}
+/**
+ * The pure half of {@link useAnchoredPanel}: where a panel goes, given the trigger's
+ * rect and the region actually on screen.
+ *
+ * Prefers below the trigger — the conventional direction, and the one that keeps the
+ * trigger's own value visible. Flips above only when below cannot show a usable list
+ * AND above is roomier, so a panel never jumps sides for a few pixels' gain. The
+ * returned `maxHeight` is what makes the flip sufficient rather than merely different:
+ * without it a tall panel placed above just runs off the top instead of the bottom.
+ *
+ * Split out so the geometry is testable without a DOM and a fake keyboard — @hb/ui has
+ * no test runner of its own, so this is exercised from the consuming app.
+ */
+declare function anchoredPanelPlacement(rect: Pick<AnchorRect, "top" | "bottom">, viewport: ViewportBox, { gap, margin, preferredHeight, minHeight }?: AnchoredPanelOptions): Omit<AnchoredPanel, "rect">;
+/**
+ * Where to put a panel anchored under `ref`, tracking the visible viewport.
+ *
+ * Callers own horizontal placement — the pickers align to the trigger's left edge, the
+ * popovers to its right — and must apply `maxHeight` with an internal `overflow-y`.
+ */
+/**
+ * The region actually on screen, tracked while `active` (Keksdose live #328).
+ *
+ * The same measurement {@link useAnchoredPanel} caps a dropdown with, for the callers
+ * that need the box itself rather than a placement: a FULL-SCREEN sheet cannot use
+ * `inset-0`, because on Android the on-screen keyboard shrinks only the VISUAL
+ * viewport — `inset-0` still spans the whole screen, so the bottom of the sheet, and
+ * the end of whatever list is scrolling inside it, live behind the keyboard where no
+ * gesture reaches them.
+ *
+ * Returns `null` where there is nothing to correct: no `visualViewport` (jsdom, SSR,
+ * older browsers) or no keyboard taking a bite out of it. A caller then keeps its
+ * static layout, which is right at every width where this does not apply — and is why
+ * the desktop and the test suite see exactly the markup they saw before.
+ */
+declare function useVisualViewport(active: boolean): ViewportBox | null;
+declare function useAnchoredPanel<T extends HTMLElement>(ref: RefObject<T | null>, open: boolean, options?: AnchoredPanelOptions): AnchoredPanel;
+
+export { type AnchoredPanel, type AnchoredPanelOptions, type ViewportBox, anchoredPanelPlacement, useAnchoredPanel, useVisualViewport };

package/dist/hooks/use-anchored-panel.js

@@ -0,0 +1,71 @@
+import { useLayoutEffect, useState } from "react";
+import { useAnchoredRect } from "./use-anchored-rect.js";
+function readViewport() {
+  if (typeof window === "undefined") return { top: 0, height: 0 };
+  const vv = window.visualViewport;
+  return vv ? { top: vv.offsetTop, height: vv.height } : { top: 0, height: window.innerHeight };
+}
+const FLOOR = 96;
+function anchoredPanelPlacement(rect, viewport, { gap = 4, margin = 8, preferredHeight = 320, minHeight = 160 } = {}) {
+  const viewTop = viewport.top + margin;
+  const viewBottom = viewport.top + viewport.height - margin;
+  const spaceBelow = viewBottom - (rect.bottom + gap);
+  const spaceAbove = rect.top - gap - viewTop;
+  const above = spaceBelow < minHeight && spaceAbove > spaceBelow;
+  const space = Math.max(FLOOR, above ? spaceAbove : spaceBelow);
+  const maxHeight = Math.min(preferredHeight, space);
+  return {
+    top: above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap,
+    maxHeight,
+    above
+  };
+}
+function useVisualViewport(active) {
+  const [box, setBox] = useState(null);
+  useLayoutEffect(() => {
+    if (!active) return;
+    const update = () => {
+      const vv2 = typeof window === "undefined" ? void 0 : window.visualViewport;
+      setBox(vv2 && vv2.height < window.innerHeight - 1 ? { top: vv2.offsetTop, height: vv2.height } : null);
+    };
+    update();
+    const vv = window.visualViewport;
+    vv?.addEventListener("resize", update);
+    vv?.addEventListener("scroll", update);
+    window.addEventListener("resize", update);
+    return () => {
+      vv?.removeEventListener("resize", update);
+      vv?.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [active]);
+  return box;
+}
+function useAnchoredPanel(ref, open, options = {}) {
+  const rect = useAnchoredRect(ref, open);
+  const [viewport, setViewport] = useState(readViewport);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const update = () => setViewport(readViewport());
+    update();
+    const vv = window.visualViewport;
+    vv?.addEventListener("resize", update);
+    vv?.addEventListener("scroll", update);
+    window.addEventListener("resize", update);
+    return () => {
+      vv?.removeEventListener("resize", update);
+      vv?.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [open]);
+  if (!rect) {
+    return { rect: null, top: 0, maxHeight: options.preferredHeight ?? 320, above: false };
+  }
+  return { rect, ...anchoredPanelPlacement(rect, viewport, options) };
+}
+export {
+  anchoredPanelPlacement,
+  useAnchoredPanel,
+  useVisualViewport
+};
+//# sourceMappingURL=use-anchored-panel.js.map

package/dist/hooks/use-anchored-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-anchored-panel.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\nimport { useAnchoredRect, type AnchorRect } from \"./use-anchored-rect\";\n\n/**\n * Vertical placement for a portalled, `position: fixed` panel anchored to a trigger.\n *\n * The problem it solves (feedback #135): on a phone, opening a picker focuses its\n * search box, the on-screen keyboard slides up, and a panel pinned below a trigger in\n * the lower half of the screen ends up entirely behind that keyboard — with nothing\n * the user can do about it, because `position: fixed` does not scroll.\n *\n * The keyboard is invisible to the usual measurements: on Android Chrome the LAYOUT\n * viewport (`window.innerHeight`, and the origin `getBoundingClientRect` and\n * `position: fixed` are relative to) does not shrink when it opens. Only\n * `visualViewport` reports the region actually on screen, so that is what this reads.\n */\n\n/** The on-screen region, in layout-viewport coordinates. */\nexport interface ViewportBox {\n  top: number;\n  height: number;\n}\n\nfunction readViewport(): ViewportBox {\n  if (typeof window === \"undefined\") return { top: 0, height: 0 };\n  const vv = window.visualViewport;\n  // offsetTop, not 0: with the keyboard up the user can also pan the visual viewport\n  // within the layout viewport, which shifts where \"visible\" starts.\n  return vv ? { top: vv.offsetTop, height: vv.height } : { top: 0, height: window.innerHeight };\n}\n\nexport interface AnchoredPanelOptions {\n  /** Space between trigger and panel. */\n  gap?: number;\n  /** Space kept clear at the viewport edges. */\n  margin?: number;\n  /** The height the panel would like, when there is room. */\n  preferredHeight?: number;\n  /** Below this, the space under the trigger counts as unusable and a flip is considered. */\n  minHeight?: number;\n}\n\nexport interface AnchoredPanel {\n  /** The trigger's rect, or null while closed/unmeasured. */\n  rect: AnchorRect | null;\n  /** Viewport-space `top` for the panel. */\n  top: number;\n  /** Cap that keeps the panel inside the VISIBLE viewport — apply as `maxHeight`. */\n  maxHeight: number;\n  /** Whether the panel was flipped above the trigger. */\n  above: boolean;\n}\n\n/** Absolute floor: below this a list is useless, so overflow the margin instead. */\nconst FLOOR = 96;\n\n/**\n * The pure half of {@link useAnchoredPanel}: where a panel goes, given the trigger's\n * rect and the region actually on screen.\n *\n * Prefers below the trigger — the conventional direction, and the one that keeps the\n * trigger's own value visible. Flips above only when below cannot show a usable list\n * AND above is roomier, so a panel never jumps sides for a few pixels' gain. The\n * returned `maxHeight` is what makes the flip sufficient rather than merely different:\n * without it a tall panel placed above just runs off the top instead of the bottom.\n *\n * Split out so the geometry is testable without a DOM and a fake keyboard — @hb/ui has\n * no test runner of its own, so this is exercised from the consuming app.\n */\nexport function anchoredPanelPlacement(\n  rect: Pick<AnchorRect, \"top\" | \"bottom\">,\n  viewport: ViewportBox,\n  { gap = 4, margin = 8, preferredHeight = 320, minHeight = 160 }: AnchoredPanelOptions = {},\n): Omit<AnchoredPanel, \"rect\"> {\n  const viewTop = viewport.top + margin;\n  const viewBottom = viewport.top + viewport.height - margin;\n  const spaceBelow = viewBottom - (rect.bottom + gap);\n  const spaceAbove = rect.top - gap - viewTop;\n  const above = spaceBelow < minHeight && spaceAbove > spaceBelow;\n  const space = Math.max(FLOOR, above ? spaceAbove : spaceBelow);\n  const maxHeight = Math.min(preferredHeight, space);\n  return {\n    top: above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap,\n    maxHeight,\n    above,\n  };\n}\n\n/**\n * Where to put a panel anchored under `ref`, tracking the visible viewport.\n *\n * Callers own horizontal placement — the pickers align to the trigger's left edge, the\n * popovers to its right — and must apply `maxHeight` with an internal `overflow-y`.\n */\n/**\n * The region actually on screen, tracked while `active` (Keksdose live #328).\n *\n * The same measurement {@link useAnchoredPanel} caps a dropdown with, for the callers\n * that need the box itself rather than a placement: a FULL-SCREEN sheet cannot use\n * `inset-0`, because on Android the on-screen keyboard shrinks only the VISUAL\n * viewport — `inset-0` still spans the whole screen, so the bottom of the sheet, and\n * the end of whatever list is scrolling inside it, live behind the keyboard where no\n * gesture reaches them.\n *\n * Returns `null` where there is nothing to correct: no `visualViewport` (jsdom, SSR,\n * older browsers) or no keyboard taking a bite out of it. A caller then keeps its\n * static layout, which is right at every width where this does not apply — and is why\n * the desktop and the test suite see exactly the markup they saw before.\n */\nexport function useVisualViewport(active: boolean): ViewportBox | null {\n  const [box, setBox] = useState<ViewportBox | null>(null);\n\n  useLayoutEffect(() => {\n    if (!active) return;\n    const update = () => {\n      const vv = typeof window === \"undefined\" ? undefined : window.visualViewport;\n      // The 1px slack is not superstition: `visualViewport.height` is fractional on a\n      // device-pixel-ratio that is not an integer (his phone reports 1.25), so a\n      // strict comparison would report a \"keyboard\" of 0.4px on every phone and pin\n      // a height where none was needed.\n      setBox(vv && vv.height < window.innerHeight - 1 ? { top: vv.offsetTop, height: vv.height } : null);\n    };\n    update();\n    const vv = window.visualViewport;\n    vv?.addEventListener(\"resize\", update);\n    vv?.addEventListener(\"scroll\", update);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      vv?.removeEventListener(\"resize\", update);\n      vv?.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [active]);\n\n  return box;\n}\n\nexport function useAnchoredPanel<T extends HTMLElement>(\n  ref: RefObject<T | null>,\n  open: boolean,\n  options: AnchoredPanelOptions = {},\n): AnchoredPanel {\n  const rect = useAnchoredRect(ref, open);\n  const [viewport, setViewport] = useState<ViewportBox>(readViewport);\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => setViewport(readViewport());\n    update();\n    const vv = window.visualViewport;\n    // The visualViewport events are the ones that fire when the keyboard opens;\n    // window.resize is the fallback for browsers without the API (and for a genuine\n    // window resize on desktop).\n    vv?.addEventListener(\"resize\", update);\n    vv?.addEventListener(\"scroll\", update);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      vv?.removeEventListener(\"resize\", update);\n      vv?.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open]);\n\n  if (!rect) {\n    return { rect: null, top: 0, maxHeight: options.preferredHeight ?? 320, above: false };\n  }\n  return { rect, ...anchoredPanelPlacement(rect, viewport, options) };\n}\n"],"mappings":"AAAA,SAAS,iBAAiB,gBAAgB;AAE1C,SAAS,uBAAwC;AAsBjD,SAAS,eAA4B;AACnC,MAAI,OAAO,WAAW,YAAa,QAAO,EAAE,KAAK,GAAG,QAAQ,EAAE;AAC9D,QAAM,KAAK,OAAO;AAGlB,SAAO,KAAK,EAAE,KAAK,GAAG,WAAW,QAAQ,GAAG,OAAO,IAAI,EAAE,KAAK,GAAG,QAAQ,OAAO,YAAY;AAC9F;AAyBA,MAAM,QAAQ;AAeP,SAAS,uBACd,MACA,UACA,EAAE,MAAM,GAAG,SAAS,GAAG,kBAAkB,KAAK,YAAY,IAAI,IAA0B,CAAC,GAC5D;AAC7B,QAAM,UAAU,SAAS,MAAM;AAC/B,QAAM,aAAa,SAAS,MAAM,SAAS,SAAS;AACpD,QAAM,aAAa,cAAc,KAAK,SAAS;AAC/C,QAAM,aAAa,KAAK,MAAM,MAAM;AACpC,QAAM,QAAQ,aAAa,aAAa,aAAa;AACrD,QAAM,QAAQ,KAAK,IAAI,OAAO,QAAQ,aAAa,UAAU;AAC7D,QAAM,YAAY,KAAK,IAAI,iBAAiB,KAAK;AACjD,SAAO;AAAA,IACL,KAAK,QAAQ,KAAK,IAAI,SAAS,KAAK,MAAM,MAAM,SAAS,IAAI,KAAK,SAAS;AAAA,IAC3E;AAAA,IACA;AAAA,EACF;AACF;AAuBO,SAAS,kBAAkB,QAAqC;AACrE,QAAM,CAAC,KAAK,MAAM,IAAI,SAA6B,IAAI;AAEvD,kBAAgB,MAAM;AACpB,QAAI,CAAC,OAAQ;AACb,UAAM,SAAS,MAAM;AACnB,YAAMA,MAAK,OAAO,WAAW,cAAc,SAAY,OAAO;AAK9D,aAAOA,OAAMA,IAAG,SAAS,OAAO,cAAc,IAAI,EAAE,KAAKA,IAAG,WAAW,QAAQA,IAAG,OAAO,IAAI,IAAI;AAAA,IACnG;AACA,WAAO;AACP,UAAM,KAAK,OAAO;AAClB,QAAI,iBAAiB,UAAU,MAAM;AACrC,QAAI,iBAAiB,UAAU,MAAM;AACrC,WAAO,iBAAiB,UAAU,MAAM;AACxC,WAAO,MAAM;AACX,UAAI,oBAAoB,UAAU,MAAM;AACxC,UAAI,oBAAoB,UAAU,MAAM;AACxC,aAAO,oBAAoB,UAAU,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;AAEO,SAAS,iBACd,KACA,MACA,UAAgC,CAAC,GAClB;AACf,QAAM,OAAO,gBAAgB,KAAK,IAAI;AACtC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAsB,YAAY;AAElE,kBAAgB,MAAM;AACpB,QAAI,CAAC,KAAM;AACX,UAAM,SAAS,MAAM,YAAY,aAAa,CAAC;AAC/C,WAAO;AACP,UAAM,KAAK,OAAO;AAIlB,QAAI,iBAAiB,UAAU,MAAM;AACrC,QAAI,iBAAiB,UAAU,MAAM;AACrC,WAAO,iBAAiB,UAAU,MAAM;AACxC,WAAO,MAAM;AACX,UAAI,oBAAoB,UAAU,MAAM;AACxC,UAAI,oBAAoB,UAAU,MAAM;AACxC,aAAO,oBAAoB,UAAU,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,MAAM;AACT,WAAO,EAAE,MAAM,MAAM,KAAK,GAAG,WAAW,QAAQ,mBAAmB,KAAK,OAAO,MAAM;AAAA,EACvF;AACA,SAAO,EAAE,MAAM,GAAG,uBAAuB,MAAM,UAAU,OAAO,EAAE;AACpE;","names":["vv"]}

package/dist/hooks/use-anchored-rect.d.ts

@@ -0,0 +1,24 @@
+import { RefObject } from 'react';
+
+/** The subset of an element's viewport rect used for anchored positioning. */
+interface AnchorRect {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+/**
+ * Tracks an anchor element's viewport rect while `open`, re-measuring on scroll
+ * (capture phase, so nested scroll containers are caught too) and resize, and
+ * returning null when closed or unmeasured. Callers derive their own panel
+ * position from the rect — this hook owns only the measure + listener lifecycle
+ * that every portalled, position:fixed popover/flyout otherwise re-implements.
+ *
+ * Measured in a layout effect so the position is ready before paint (no flicker
+ * on open).
+ */
+declare function useAnchoredRect<T extends HTMLElement>(ref: RefObject<T | null>, open: boolean): AnchorRect | null;
+
+export { type AnchorRect, useAnchoredRect };

package/dist/hooks/use-anchored-rect.js

@@ -0,0 +1,40 @@
+import { useLayoutEffect, useState } from "react";
+function sameRect(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.top === b.top && a.left === b.left && a.right === b.right && a.bottom === b.bottom && a.width === b.width && a.height === b.height;
+}
+function useAnchoredRect(ref, open) {
+  const [rect, setRect] = useState(null);
+  useLayoutEffect(() => {
+    if (!open) {
+      setRect(null);
+      return;
+    }
+    const measure = () => {
+      const r = ref.current?.getBoundingClientRect();
+      if (!r) return;
+      const next = {
+        top: r.top,
+        left: r.left,
+        right: r.right,
+        bottom: r.bottom,
+        width: r.width,
+        height: r.height
+      };
+      setRect((prev) => sameRect(prev, next) ? prev : next);
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, true);
+    return () => {
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure, true);
+    };
+  }, [open, ref]);
+  return rect;
+}
+export {
+  useAnchoredRect
+};
+//# sourceMappingURL=use-anchored-rect.js.map

package/dist/hooks/use-anchored-rect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-anchored-rect.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\n\n/** The subset of an element's viewport rect used for anchored positioning. */\nexport interface AnchorRect {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n  width: number;\n  height: number;\n}\n\nfunction sameRect(a: AnchorRect | null, b: AnchorRect | null): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  return (\n    a.top === b.top &&\n    a.left === b.left &&\n    a.right === b.right &&\n    a.bottom === b.bottom &&\n    a.width === b.width &&\n    a.height === b.height\n  );\n}\n\n/**\n * Tracks an anchor element's viewport rect while `open`, re-measuring on scroll\n * (capture phase, so nested scroll containers are caught too) and resize, and\n * returning null when closed or unmeasured. Callers derive their own panel\n * position from the rect — this hook owns only the measure + listener lifecycle\n * that every portalled, position:fixed popover/flyout otherwise re-implements.\n *\n * Measured in a layout effect so the position is ready before paint (no flicker\n * on open).\n */\nexport function useAnchoredRect<T extends HTMLElement>(\n  ref: RefObject<T | null>,\n  open: boolean,\n): AnchorRect | null {\n  const [rect, setRect] = useState<AnchorRect | null>(null);\n\n  useLayoutEffect(() => {\n    if (!open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset when closed\n      setRect(null);\n      return;\n    }\n    const measure = () => {\n      const r = ref.current?.getBoundingClientRect();\n      if (!r) return;\n      const next = {\n        top: r.top,\n        left: r.left,\n        right: r.right,\n        bottom: r.bottom,\n        width: r.width,\n        height: r.height,\n      };\n      // Only publish a rect that actually MOVED. Every measurement allocates a fresh\n      // object and React compares state by identity, so an unguarded `setRect` here\n      // re-rendered the anchored panel on every scroll and resize event whether or not\n      // the anchor had moved — and this listens on the capture phase, so that is every\n      // ancestor scroll container, roughly per frame through a momentum scroll.\n      // `tour.tsx` already does exactly this on the same problem.\n      setRect((prev) => (sameRect(prev, next) ? prev : next));\n    };\n    measure();\n    window.addEventListener(\"resize\", measure);\n    window.addEventListener(\"scroll\", measure, true);\n    return () => {\n      window.removeEventListener(\"resize\", measure);\n      window.removeEventListener(\"scroll\", measure, true);\n    };\n  }, [open, ref]);\n\n  return rect;\n}\n"],"mappings":"AAAA,SAAS,iBAAiB,gBAAgB;AAa1C,SAAS,SAAS,GAAsB,GAA+B;AACrE,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,SACE,EAAE,QAAQ,EAAE,OACZ,EAAE,SAAS,EAAE,QACb,EAAE,UAAU,EAAE,SACd,EAAE,WAAW,EAAE,UACf,EAAE,UAAU,EAAE,SACd,EAAE,WAAW,EAAE;AAEnB;AAYO,SAAS,gBACd,KACA,MACmB;AACnB,QAAM,CAAC,MAAM,OAAO,IAAI,SAA4B,IAAI;AAExD,kBAAgB,MAAM;AACpB,QAAI,CAAC,MAAM;AAET,cAAQ,IAAI;AACZ;AAAA,IACF;AACA,UAAM,UAAU,MAAM;AACpB,YAAM,IAAI,IAAI,SAAS,sBAAsB;AAC7C,UAAI,CAAC,EAAG;AACR,YAAM,OAAO;AAAA,QACX,KAAK,EAAE;AAAA,QACP,MAAM,EAAE;AAAA,QACR,OAAO,EAAE;AAAA,QACT,QAAQ,EAAE;AAAA,QACV,OAAO,EAAE;AAAA,QACT,QAAQ,EAAE;AAAA,MACZ;AAOA,cAAQ,CAAC,SAAU,SAAS,MAAM,IAAI,IAAI,OAAO,IAAK;AAAA,IACxD;AACA,YAAQ;AACR,WAAO,iBAAiB,UAAU,OAAO;AACzC,WAAO,iBAAiB,UAAU,SAAS,IAAI;AAC/C,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,OAAO;AAC5C,aAAO,oBAAoB,UAAU,SAAS,IAAI;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,MAAM,GAAG,CAAC;AAEd,SAAO;AACT;","names":[]}

package/dist/hooks/use-body-scroll-lock.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Lock background scrolling while `locked` is true, restoring the prior value once
+ * the LAST holder releases. Composable with every other caller of this hook — see
+ * the note above for why that has to be a property of the hook rather than of each
+ * caller's discipline.
+ */
+declare function useBodyScrollLock(locked: boolean): void;
+
+export { useBodyScrollLock };

package/dist/hooks/use-body-scroll-lock.js

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+let lockCount = 0;
+let previousOverflow = "";
+let previousPaddingRight = "";
+function scrollbarWidth() {
+  return Math.max(0, window.innerWidth - document.documentElement.clientWidth);
+}
+function acquire() {
+  if (lockCount === 0) {
+    const gap = scrollbarWidth();
+    previousOverflow = document.body.style.overflow;
+    previousPaddingRight = document.body.style.paddingRight;
+    document.body.style.overflow = "hidden";
+    if (gap > 0) {
+      const existing = parseFloat(getComputedStyle(document.body).paddingRight) || 0;
+      document.body.style.paddingRight = `${existing + gap}px`;
+    }
+  }
+  lockCount += 1;
+}
+function release() {
+  if (lockCount === 0) return;
+  lockCount -= 1;
+  if (lockCount === 0) {
+    document.body.style.overflow = previousOverflow;
+    document.body.style.paddingRight = previousPaddingRight;
+    previousOverflow = "";
+    previousPaddingRight = "";
+  }
+}
+function useBodyScrollLock(locked) {
+  useEffect(() => {
+    if (!locked) return;
+    acquire();
+    return release;
+  }, [locked]);
+}
+export {
+  useBodyScrollLock
+};
+//# sourceMappingURL=use-body-scroll-lock.js.map

package/dist/hooks/use-body-scroll-lock.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-body-scroll-lock.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\n/**\n * How many locks are currently held, and what `body.style.overflow` was before the\n * first of them. Module scope on purpose: the whole point is that the lockers do not\n * know about each other, so the only place they can agree is here.\n *\n * This used to be per-locker — each one saved the previous value and restored it on\n * cleanup — and five places in this package do that (Modal, PickerSheet,\n * NumberPadSheet, and the DataTable's row dialog and settings panel). Save/restore\n * composes only if the releases are strictly nested in reverse order of the\n * acquisitions, and React runs unmount cleanups PARENT FIRST, which is the opposite\n * of what the idiom needs.\n *\n * The gesture that broke it is an ordinary one: open the transaction dialog, tap the\n * amount — the numpad sheet opens on focus, in a later commit, capturing the\n * \"hidden\" the dialog had already set — then press Save. Both unmount together, the\n * dialog restores \"\" first, the sheet then puts \"hidden\" back, and the page is left\n * unscrollable with no overlay on screen. The only way out was a reload.\n *\n * A count has neither failure: the first acquire records the real previous value, the\n * last release restores it, and the order in between does not matter.\n */\nlet lockCount = 0;\nlet previousOverflow = \"\";\nlet previousPaddingRight = \"\";\n\n/**\n * How much width the scrollbar of the DOCUMENT is currently taking.\n *\n * Zero on every platform with overlay scrollbars (macOS, most Linux, every phone) and\n * zero whenever the page does not scroll; ~15px on Windows with classic ones. Read\n * BEFORE `overflow: hidden` is applied, because applying it is what makes it vanish.\n */\nfunction scrollbarWidth(): number {\n  return Math.max(0, window.innerWidth - document.documentElement.clientWidth);\n}\n\nfunction acquire(): void {\n  if (lockCount === 0) {\n    // ⚠️ Hiding the document's overflow REMOVES its scrollbar, and on a platform where\n    // that scrollbar occupied layout space the page gets ~15px wider for as long as the\n    // dialog is open — then snaps back on close. Keksdose dev #561 from a 500px-wide\n    // desktop window: *\"remove the scroll bar to stop horizontal resizing when opening\n    // edit tx and closing\"*.\n    //\n    // Replacing the width we are about to take away is the standard fix and the narrow\n    // one. The alternatives both cost more than the bug: `scrollbar-gutter` on `html`\n    // shrinks the initial containing block, so every `position: fixed` overlay stops\n    // 15px short on each edge (measured, and documented in tokens.css), and moving the\n    // scroll container to `main` below `md` stops a phone's URL bar collapsing. This\n    // touches neither — only the element already being modified, only while locked.\n    //\n    // Note this fixes the DIALOG jump specifically. The separate page-to-page width\n    // change, where one route scrolls and the next does not, is the open decision\n    // recorded in tokens.css and is untouched here.\n    const gap = scrollbarWidth();\n    previousOverflow = document.body.style.overflow;\n    previousPaddingRight = document.body.style.paddingRight;\n    document.body.style.overflow = \"hidden\";\n    if (gap > 0) {\n      // Added to whatever the body already had rather than assigned, so a consumer\n      // that sets its own padding keeps it.\n      const existing = parseFloat(getComputedStyle(document.body).paddingRight) || 0;\n      document.body.style.paddingRight = `${existing + gap}px`;\n    }\n  }\n  lockCount += 1;\n}\n\nfunction release(): void {\n  if (lockCount === 0) return;\n  lockCount -= 1;\n  if (lockCount === 0) {\n    document.body.style.overflow = previousOverflow;\n    document.body.style.paddingRight = previousPaddingRight;\n    previousOverflow = \"\";\n    previousPaddingRight = \"\";\n  }\n}\n\n/**\n * Lock background scrolling while `locked` is true, restoring the prior value once\n * the LAST holder releases. Composable with every other caller of this hook — see\n * the note above for why that has to be a property of the hook rather than of each\n * caller's discipline.\n */\nexport function useBodyScrollLock(locked: boolean): void {\n  useEffect(() => {\n    if (!locked) return;\n    acquire();\n    return release;\n  }, [locked]);\n}\n"],"mappings":"AAAA,SAAS,iBAAiB;AAuB1B,IAAI,YAAY;AAChB,IAAI,mBAAmB;AACvB,IAAI,uBAAuB;AAS3B,SAAS,iBAAyB;AAChC,SAAO,KAAK,IAAI,GAAG,OAAO,aAAa,SAAS,gBAAgB,WAAW;AAC7E;AAEA,SAAS,UAAgB;AACvB,MAAI,cAAc,GAAG;AAiBnB,UAAM,MAAM,eAAe;AAC3B,uBAAmB,SAAS,KAAK,MAAM;AACvC,2BAAuB,SAAS,KAAK,MAAM;AAC3C,aAAS,KAAK,MAAM,WAAW;AAC/B,QAAI,MAAM,GAAG;AAGX,YAAM,WAAW,WAAW,iBAAiB,SAAS,IAAI,EAAE,YAAY,KAAK;AAC7E,eAAS,KAAK,MAAM,eAAe,GAAG,WAAW,GAAG;AAAA,IACtD;AAAA,EACF;AACA,eAAa;AACf;AAEA,SAAS,UAAgB;AACvB,MAAI,cAAc,EAAG;AACrB,eAAa;AACb,MAAI,cAAc,GAAG;AACnB,aAAS,KAAK,MAAM,WAAW;AAC/B,aAAS,KAAK,MAAM,eAAe;AACnC,uBAAmB;AACnB,2BAAuB;AAAA,EACzB;AACF;AAQO,SAAS,kBAAkB,QAAuB;AACvD,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,YAAQ;AACR,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AACb;","names":[]}

package/dist/hooks/use-close-transition.d.ts

@@ -0,0 +1,41 @@
+/** How long the exit animation runs, in ms. Mirrors `.animate-sheet-out` in
+ *  tokens.css — the sheet is the slower of the two, so it is what the unmount waits
+ *  for. Exported so a test can advance a fake clock by the real number rather than
+ *  by a copy of it. */
+declare const OVERLAY_EXIT_MS = 220;
+/**
+ * The state machine an exit animation needs, written once for every overlay in this
+ * package (Keksdose live #320 rework: *"Recognized the opening transition. Choose
+ * transition should be the same, only backwards"*).
+ *
+ * ## Why a hook and not a class on the panel
+ *
+ * An enter animation is free: the element mounts, the keyframes run. An exit is not —
+ * by the time the state says "closed" the element is already gone, so something has to
+ * hold it on screen for exactly as long as the animation lasts. That something cannot
+ * be the caller (every caller would need the same timer) and it cannot be the panel's
+ * markup. It is this: the overlay's own affordances call {@link requestClose} instead
+ * of `onClose`, render the `-out` classes while `closing` is true, and the real
+ * `onClose` — the one that unmounts them — fires when the animation has finished.
+ *
+ * ## What it deliberately does not do
+ *
+ * It does not intercept a close the CALLER decides on. A dialog that closes itself
+ * after a successful save sets its own state and unmounts, with no exit animation, and
+ * that is the right trade: making it otherwise would mean every overlay owning an
+ * `open` prop and every caller waiting on a callback to learn when its own state took
+ * effect. What is animated is what the user dismissed — the X, the backdrop, Escape,
+ * the Back gesture — which is the motion the row was about.
+ *
+ * ## Reduced motion
+ *
+ * Closes immediately, without the delay. A user who has asked for no motion must not
+ * be made to wait 220ms for an animation they are not being shown, and the `-out`
+ * classes are never applied, so tokens.css needs no reduced-motion rule for them.
+ */
+declare function useCloseTransition(onClose: () => void, ms?: number): {
+    closing: boolean;
+    requestClose: () => void;
+};
+
+export { OVERLAY_EXIT_MS, useCloseTransition };

package/dist/hooks/use-close-transition.js

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+const OVERLAY_EXIT_MS = 220;
+function useCloseTransition(onClose, ms = OVERLAY_EXIT_MS) {
+  const [closing, setClosing] = useState(false);
+  const timer = useRef(null);
+  const latest = useRef(onClose);
+  useEffect(() => {
+    latest.current = onClose;
+  });
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  const requestClose = useCallback(() => {
+    if (timer.current) return;
+    const reduced = typeof window === "undefined" || typeof window.matchMedia !== "function" || window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduced || ms <= 0) {
+      latest.current();
+      return;
+    }
+    setClosing(true);
+    timer.current = setTimeout(() => {
+      timer.current = null;
+      setClosing(false);
+      latest.current();
+    }, ms);
+  }, [ms]);
+  return { closing, requestClose };
+}
+export {
+  OVERLAY_EXIT_MS,
+  useCloseTransition
+};
+//# sourceMappingURL=use-close-transition.js.map

package/dist/hooks/use-close-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-close-transition.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\n/** How long the exit animation runs, in ms. Mirrors `.animate-sheet-out` in\n *  tokens.css — the sheet is the slower of the two, so it is what the unmount waits\n *  for. Exported so a test can advance a fake clock by the real number rather than\n *  by a copy of it. */\nexport const OVERLAY_EXIT_MS = 220;\n\n/**\n * The state machine an exit animation needs, written once for every overlay in this\n * package (Keksdose live #320 rework: *\"Recognized the opening transition. Choose\n * transition should be the same, only backwards\"*).\n *\n * ## Why a hook and not a class on the panel\n *\n * An enter animation is free: the element mounts, the keyframes run. An exit is not —\n * by the time the state says \"closed\" the element is already gone, so something has to\n * hold it on screen for exactly as long as the animation lasts. That something cannot\n * be the caller (every caller would need the same timer) and it cannot be the panel's\n * markup. It is this: the overlay's own affordances call {@link requestClose} instead\n * of `onClose`, render the `-out` classes while `closing` is true, and the real\n * `onClose` — the one that unmounts them — fires when the animation has finished.\n *\n * ## What it deliberately does not do\n *\n * It does not intercept a close the CALLER decides on. A dialog that closes itself\n * after a successful save sets its own state and unmounts, with no exit animation, and\n * that is the right trade: making it otherwise would mean every overlay owning an\n * `open` prop and every caller waiting on a callback to learn when its own state took\n * effect. What is animated is what the user dismissed — the X, the backdrop, Escape,\n * the Back gesture — which is the motion the row was about.\n *\n * ## Reduced motion\n *\n * Closes immediately, without the delay. A user who has asked for no motion must not\n * be made to wait 220ms for an animation they are not being shown, and the `-out`\n * classes are never applied, so tokens.css needs no reduced-motion rule for them.\n */\nexport function useCloseTransition(\n  onClose: () => void,\n  ms: number = OVERLAY_EXIT_MS,\n): { closing: boolean; requestClose: () => void } {\n  const [closing, setClosing] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  // Latest-ref rather than a dependency: callers pass inline arrows, so a dependency\n  // would hand every render a new `requestClose` — and this one is read once, by a\n  // timer that has already been scheduled. Assigned in an effect, never during render\n  // (`react-hooks/refs`), matching `use-long-press.ts` next door.\n  const latest = useRef(onClose);\n  useEffect(() => {\n    latest.current = onClose;\n  });\n\n  // One timer, ever. A second Escape while the panel is already leaving must not\n  // schedule a second unmount — two `onClose` calls is a caller's state machine being\n  // run twice, which is how a \"close\" ends up also discarding the row behind it.\n  useEffect(\n    () => () => {\n      if (timer.current) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  const requestClose = useCallback(() => {\n    if (timer.current) return;\n    // Read at close time, not at mount: the setting can change under a long-lived\n    // page, and `matchMedia` is absent in jsdom and in SSR — where \"no animation\" is\n    // also the only correct answer, since nothing is painting.\n    const reduced =\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\" ||\n      window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    if (reduced || ms <= 0) {\n      latest.current();\n      return;\n    }\n    setClosing(true);\n    timer.current = setTimeout(() => {\n      timer.current = null;\n      // ⚠️ Reset BEFORE handing control back — reported from a phone within the hour\n      // of the 0.4.52 deploy that first shipped this hook, against every table at once.\n      // A panel that returns `null` while closed is still MOUNTED — `FullBleedDialog`\n      // early-returns after its hooks, and DataTable renders it once and flips `open`\n      // — so this state outlives the panel it describes. Left true, the NEXT open\n      // rendered `animate-*-out` with `animation-fill-mode: forwards` on a sheet that\n      // had only just arrived: it lowered itself off the screen in 220ms and stayed\n      // there, invisible but still holding the backdrop's pointer events. Every table\n      // on every phone, first open fine and every one after it not, until a route\n      // change remounted the component.\n      //\n      // Batched with the `onClose` below, so a caller that unmounts on close still\n      // renders exactly once and nothing flashes.\n      setClosing(false);\n      latest.current();\n    }, ms);\n  }, [ms]);\n\n  return { closing, requestClose };\n}\n"],"mappings":"AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAMlD,MAAM,kBAAkB;AAgCxB,SAAS,mBACd,SACA,KAAa,iBACmC;AAChD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,QAAQ,OAA6C,IAAI;AAK/D,QAAM,SAAS,OAAO,OAAO;AAC7B,YAAU,MAAM;AACd,WAAO,UAAU;AAAA,EACnB,CAAC;AAKD;AAAA,IACE,MAAM,MAAM;AACV,UAAI,MAAM,QAAS,cAAa,MAAM,OAAO;AAAA,IAC/C;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,MAAM,QAAS;AAInB,UAAM,UACJ,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,EAAE;AACxD,QAAI,WAAW,MAAM,GAAG;AACtB,aAAO,QAAQ;AACf;AAAA,IACF;AACA,eAAW,IAAI;AACf,UAAM,UAAU,WAAW,MAAM;AAC/B,YAAM,UAAU;AAchB,iBAAW,KAAK;AAChB,aAAO,QAAQ;AAAA,IACjB,GAAG,EAAE;AAAA,EACP,GAAG,CAAC,EAAE,CAAC;AAEP,SAAO,EAAE,SAAS,aAAa;AACjC;","names":[]}

package/dist/hooks/use-dismiss.d.ts

@@ -0,0 +1,34 @@
+import { RefObject } from 'react';
+
+/**
+ * Calls `handler` on an Escape keydown while `enabled`. A single document-level
+ * listener owns the "press Escape to dismiss" behaviour that popovers, flyouts
+ * and menus otherwise each re-implement. `handler` is read live at event time,
+ * so it need not be memoised and the listener only re-subscribes when `enabled`
+ * flips (typically the open/closed transition).
+ */
+declare function useEscapeKey(handler: () => void, enabled?: boolean): void;
+/**
+ * Calls `handler` on a press that lands outside every supplied element, while
+ * `enabled` — the outside-click-to-close half of the same dismissal story. Pass one
+ * ref or several (trigger + panel); a press inside any of them is ignored. Refs and
+ * `handler` are read live, so an inline `[triggerRef, panelRef]` array is fine and
+ * won't churn the listener.
+ *
+ * **`pointerdown`, not `mousedown`** — one event covering mouse, touch and pen.
+ * This listened for `mousedown` alone, which on a touch platform is a SYNTHESISED
+ * event: the browser emits it for most taps, which is why nothing obviously broke,
+ * but the synthesis is not guaranteed. A tap that begins a scroll, or one that lands
+ * on an element which preventDefaults the touch sequence, may never produce one — and
+ * on a phone-first PWA whose pickers, menus and flyouts all dismiss through this hook,
+ * inheriting that is worse than choosing it.
+ *
+ * The one behaviour this changes deliberately: a touch-drag that starts outside an
+ * open panel now dismisses it at touch-down, where before it did not dismiss at all
+ * (a drag synthesises no mousedown). That matches every other platform surface, and
+ * the anchored panels re-measure on scroll precisely because the page moves under
+ * them.
+ */
+declare function useOutsideClick(refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[], handler: () => void, enabled?: boolean): void;
+
+export { useEscapeKey, useOutsideClick };

package/dist/hooks/use-dismiss.js

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from "react";
+function useEscapeKey(handler, enabled = true) {
+  const handlerRef = useRef(handler);
+  useEffect(() => {
+    handlerRef.current = handler;
+  });
+  useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") handlerRef.current();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled]);
+}
+function useOutsideClick(refs, handler, enabled = true) {
+  const refsRef = useRef(refs);
+  const handlerRef = useRef(handler);
+  useEffect(() => {
+    refsRef.current = refs;
+    handlerRef.current = handler;
+  });
+  useEffect(() => {
+    if (!enabled) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      const list = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];
+      for (const r of list) {
+        if (r.current?.contains(target)) return;
+      }
+      handlerRef.current();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [enabled]);
+}
+export {
+  useEscapeKey,
+  useOutsideClick
+};
+//# sourceMappingURL=use-dismiss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-dismiss.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { RefObject } from \"react\";\n\n/**\n * Calls `handler` on an Escape keydown while `enabled`. A single document-level\n * listener owns the \"press Escape to dismiss\" behaviour that popovers, flyouts\n * and menus otherwise each re-implement. `handler` is read live at event time,\n * so it need not be memoised and the listener only re-subscribes when `enabled`\n * flips (typically the open/closed transition).\n */\nexport function useEscapeKey(handler: () => void, enabled = true): void {\n  const handlerRef = useRef(handler);\n  // Written in an effect, not during render, so it satisfies react-hooks/refs: a\n  // render that React starts and then discards — a transition, a Suspense retry —\n  // would otherwise leave this holding a handler from a tree that never committed,\n  // and the document listener below would go on to call it. Keydown events fire\n  // after the commit, so the ref is always current by the time one arrives.\n  useEffect(() => {\n    handlerRef.current = handler;\n  });\n  useEffect(() => {\n    if (!enabled) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") handlerRef.current();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [enabled]);\n}\n\n/**\n * Calls `handler` on a press that lands outside every supplied element, while\n * `enabled` — the outside-click-to-close half of the same dismissal story. Pass one\n * ref or several (trigger + panel); a press inside any of them is ignored. Refs and\n * `handler` are read live, so an inline `[triggerRef, panelRef]` array is fine and\n * won't churn the listener.\n *\n * **`pointerdown`, not `mousedown`** — one event covering mouse, touch and pen.\n * This listened for `mousedown` alone, which on a touch platform is a SYNTHESISED\n * event: the browser emits it for most taps, which is why nothing obviously broke,\n * but the synthesis is not guaranteed. A tap that begins a scroll, or one that lands\n * on an element which preventDefaults the touch sequence, may never produce one — and\n * on a phone-first PWA whose pickers, menus and flyouts all dismiss through this hook,\n * inheriting that is worse than choosing it.\n *\n * The one behaviour this changes deliberately: a touch-drag that starts outside an\n * open panel now dismisses it at touch-down, where before it did not dismiss at all\n * (a drag synthesises no mousedown). That matches every other platform surface, and\n * the anchored panels re-measure on scroll precisely because the page moves under\n * them.\n */\nexport function useOutsideClick(\n  refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],\n  handler: () => void,\n  enabled = true,\n): void {\n  const refsRef = useRef(refs);\n  const handlerRef = useRef(handler);\n  // In an effect rather than during render — see the note on useEscapeKey.\n  useEffect(() => {\n    refsRef.current = refs;\n    handlerRef.current = handler;\n  });\n  useEffect(() => {\n    if (!enabled) return;\n    const onPointerDown = (e: Event) => {\n      const target = e.target as Node;\n      const list = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];\n      for (const r of list) {\n        if (r.current?.contains(target)) return;\n      }\n      handlerRef.current();\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  }, [enabled]);\n}\n"],"mappings":"AAAA,SAAS,WAAW,cAAc;AAU3B,SAAS,aAAa,SAAqB,UAAU,MAAY;AACtE,QAAM,aAAa,OAAO,OAAO;AAMjC,YAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,CAAC;AACD,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU,YAAW,QAAQ;AAAA,IAC7C;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AACd;AAuBO,SAAS,gBACd,MACA,SACA,UAAU,MACJ;AACN,QAAM,UAAU,OAAO,IAAI;AAC3B,QAAM,aAAa,OAAO,OAAO;AAEjC,YAAU,MAAM;AACd,YAAQ,UAAU;AAClB,eAAW,UAAU;AAAA,EACvB,CAAC;AACD,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,gBAAgB,CAAC,MAAa;AAClC,YAAM,SAAS,EAAE;AACjB,YAAM,OAAO,MAAM,QAAQ,QAAQ,OAAO,IAAI,QAAQ,UAAU,CAAC,QAAQ,OAAO;AAChF,iBAAW,KAAK,MAAM;AACpB,YAAI,EAAE,SAAS,SAAS,MAAM,EAAG;AAAA,MACnC;AACA,iBAAW,QAAQ;AAAA,IACrB;AACA,aAAS,iBAAiB,eAAe,aAAa;AACtD,WAAO,MAAM,SAAS,oBAAoB,eAAe,aAAa;AAAA,EACxE,GAAG,CAAC,OAAO,CAAC;AACd;","names":[]}

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Subscribe to a CSS media query, returning whether it currently matches and
+ * re-rendering when it changes. `fallback` is the value used during SSR / when
+ * `window.matchMedia` is unavailable.
+ */
+declare function useMediaQuery(query: string, fallback: boolean): boolean;
+
+export { useMediaQuery };

package/dist/hooks/use-media-query.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+function useMediaQuery(query, fallback) {
+  const get = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : fallback;
+  const [matches, setMatches] = useState(get);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mql = window.matchMedia(query);
+    const update = () => setMatches(mql.matches);
+    update();
+    mql.addEventListener("change", update);
+    return () => mql.removeEventListener("change", update);
+  }, [query]);
+  return matches;
+}
+export {
+  useMediaQuery
+};
+//# sourceMappingURL=use-media-query.js.map

package/dist/hooks/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-media-query.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * Subscribe to a CSS media query, returning whether it currently matches and\n * re-rendering when it changes. `fallback` is the value used during SSR / when\n * `window.matchMedia` is unavailable.\n */\nexport function useMediaQuery(query: string, fallback: boolean): boolean {\n  const get = () =>\n    typeof window !== \"undefined\" && typeof window.matchMedia === \"function\"\n      ? window.matchMedia(query).matches\n      : fallback;\n  const [matches, setMatches] = useState<boolean>(get);\n  useEffect(() => {\n    if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return;\n    const mql = window.matchMedia(query);\n    const update = () => setMatches(mql.matches);\n    update();\n    mql.addEventListener(\"change\", update);\n    return () => mql.removeEventListener(\"change\", update);\n  }, [query]);\n  return matches;\n}\n"],"mappings":"AAAA,SAAS,WAAW,gBAAgB;AAO7B,SAAS,cAAc,OAAe,UAA4B;AACvE,QAAM,MAAM,MACV,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,aAC1D,OAAO,WAAW,KAAK,EAAE,UACzB;AACN,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,GAAG;AACnD,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,WAAY;AAC9E,UAAM,MAAM,OAAO,WAAW,KAAK;AACnC,UAAM,SAAS,MAAM,WAAW,IAAI,OAAO;AAC3C,WAAO;AACP,QAAI,iBAAiB,UAAU,MAAM;AACrC,WAAO,MAAM,IAAI,oBAAoB,UAAU,MAAM;AAAA,EACvD,GAAG,CAAC,KAAK,CAAC;AACV,SAAO;AACT;","names":[]}

package/dist/hooks/use-overlay-history.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Make the platform Back gesture dismiss an overlay.
+ *
+ * @param open      whether the overlay is currently showing. Components that mount
+ *                  only while open (the common case) pass `true`.
+ * @param onClose   the overlay's own close handler — the same one Escape calls.
+ */
+declare function useOverlayHistory(open: boolean, onClose: () => void): void;
+
+export { useOverlayHistory };

package/dist/hooks/use-overlay-history.js

@@ -0,0 +1,99 @@
+import { useEffect, useRef } from "react";
+const SENTINEL_KEY = "__hbUiOverlayHistory";
+const stack = [];
+const pushed = [];
+const consumed = /* @__PURE__ */ new Set();
+let pendingProgrammatic = 0;
+let listening = false;
+let nextId = 0;
+let unwind = null;
+function runUnwind() {
+  const job = unwind;
+  unwind = null;
+  if (!job) return;
+  if (currentSentinel() !== job.id || currentHref() !== job.href) return;
+  pendingProgrammatic += 1;
+  window.history.go(-job.entries.length);
+}
+function currentHref() {
+  return typeof window === "undefined" ? "" : window.location.href;
+}
+function forgetPushed(id) {
+  const at = pushed.findIndex((p) => p.id === id);
+  if (at >= 0) pushed.splice(at, 1);
+}
+function currentSentinel() {
+  const state = typeof window !== "undefined" ? window.history.state : null;
+  if (!state || typeof state !== "object") return null;
+  const id = state[SENTINEL_KEY];
+  return typeof id === "string" ? id : null;
+}
+function handlePop() {
+  if (pendingProgrammatic > 0) {
+    pendingProgrammatic -= 1;
+    return;
+  }
+  const top = stack[stack.length - 1];
+  if (!top) return;
+  if (currentSentinel() === top.id) return;
+  stack.pop();
+  consumed.add(top.id);
+  forgetPushed(top.id);
+  top.close();
+}
+function ensureListening() {
+  if (listening || typeof window === "undefined") return;
+  window.addEventListener("popstate", handlePop);
+  listening = true;
+}
+function useOverlayHistory(open, onClose) {
+  const closeRef = useRef(onClose);
+  useEffect(() => {
+    closeRef.current = onClose;
+  });
+  useEffect(() => {
+    if (!open || typeof window === "undefined") return;
+    ensureListening();
+    const id = `overlay-${nextId += 1}`;
+    const entry = { id, close: () => closeRef.current() };
+    stack.push(entry);
+    const prev = window.history.state;
+    const marked = { ...prev && typeof prev === "object" ? prev : {}, [SENTINEL_KEY]: id };
+    const adopting = unwind && unwind.id === currentSentinel() && unwind.href === currentHref();
+    if (adopting && unwind) {
+      clearTimeout(unwind.timer);
+      const inherited = unwind.entries;
+      unwind = null;
+      window.history.replaceState(marked, "");
+      for (const owed of inherited.slice(0, -1)) pushed.push({ ...owed, dead: true });
+      pushed.push({ id, href: currentHref(), dead: false });
+    } else {
+      const under = pushed.findIndex((p) => p.id === currentSentinel());
+      pushed.splice(under + 1);
+      window.history.pushState(marked, "");
+      pushed.push({ id, href: currentHref(), dead: false });
+    }
+    return () => {
+      const at = stack.indexOf(entry);
+      if (at >= 0) stack.splice(at, 1);
+      if (consumed.delete(id)) return;
+      const mine = pushed.findIndex((p) => p.id === id);
+      if (currentSentinel() !== id) {
+        if (mine >= 0) pushed[mine].dead = true;
+        return;
+      }
+      const here = currentHref();
+      let steps = 1;
+      while (steps <= mine && pushed[mine - steps].dead && pushed[mine - steps].href === here) {
+        steps += 1;
+      }
+      const leaving = pushed.splice(mine - (steps - 1), steps);
+      if (unwind) clearTimeout(unwind.timer);
+      unwind = { timer: setTimeout(runUnwind, 0), id, href: here, entries: leaving };
+    };
+  }, [open]);
+}
+export {
+  useOverlayHistory
+};
+//# sourceMappingURL=use-overlay-history.js.map