@eifi1/ui-kit 0.33.0 → 0.34.0

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

@@ -1,7 +1,6 @@
-import { RefObject } from 'react';
-
+import type { RefObject } from "react";
 /** The subset of an element's viewport rect used for anchored positioning. */
-interface AnchorRect {
+export interface AnchorRect {
     top: number;
     left: number;
     right: number;
@@ -9,6 +8,18 @@ interface AnchorRect {
     width: number;
     height: number;
 }
+/**
+ * Whether two measurements are the same box, so a re-measure that moved nothing keeps the
+ * state it had (no render). Top, left, width and height decide it: an `AnchorRect`'s
+ * right and bottom are those sums. The kit's one copy — the tour's spotlight asks it too
+ * (DUP-11, refactor audit 2026-10).
+ */
+export declare function sameRect<R extends {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}>(a: R | null, b: R | null): boolean;
 /**
  * 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
@@ -19,6 +30,4 @@ interface AnchorRect {
  * 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 };
+export declare function useAnchoredRect<T extends HTMLElement>(ref: RefObject<T | null>, open: boolean): AnchorRect | null;

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

@@ -3,7 +3,7 @@ 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;
+  return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;
 }
 function useAnchoredRect(ref, open) {
   const [rect, setRect] = useState(null);
@@ -36,6 +36,7 @@ function useAnchoredRect(ref, open) {
   return rect;
 }
 export {
+  sameRect,
   useAnchoredRect
 };
 //# sourceMappingURL=use-anchored-rect.js.map

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

@@ -1 +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":[]}
+{"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\n/**\n * Whether two measurements are the same box, so a re-measure that moved nothing keeps the\n * state it had (no render). Top, left, width and height decide it: an `AnchorRect`'s\n * right and bottom are those sums. The kit's one copy — the tour's spotlight asks it too\n * (DUP-11, refactor audit 2026-10).\n */\nexport function sameRect<R extends { top: number; left: number; width: number; height: number }>(\n  a: R | null,\n  b: R | null,\n): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;\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;AAmBnC,SAAS,SACd,GACA,GACS;AACT,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,SAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE;AACvF;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-announce.d.ts

@@ -19,7 +19,7 @@
  *     and needs confirmation that something happened. Clearing first and setting on the
  *     next tick forces a diff.
  */
-interface AnnounceRegionProps {
+export interface AnnounceRegionProps {
     role: "status" | "alert";
     "aria-live": "polite" | "assertive";
     "aria-atomic": true;
@@ -27,13 +27,13 @@ interface AnnounceRegionProps {
     className: string;
     children: string;
 }
-interface UseAnnounceReturn {
+export interface UseAnnounceReturn {
     /** Speak `message`. Passing the same string twice still speaks twice. */
     announce: (message: string) => void;
     /** Spread onto an element that is rendered unconditionally. */
     regionProps: AnnounceRegionProps;
 }
-interface UseAnnounceOptions {
+export interface UseAnnounceOptions {
     /**
      * `polite` (default) waits for a pause; `assertive` interrupts. Sorting and paging
      * are polite — interrupting someone mid-sentence to tell them a table re-sorted is
@@ -41,6 +41,4 @@ interface UseAnnounceOptions {
      */
     politeness?: "polite" | "assertive";
 }
-declare function useAnnounce({ politeness }?: UseAnnounceOptions): UseAnnounceReturn;
-
-export { type AnnounceRegionProps, type UseAnnounceOptions, type UseAnnounceReturn, useAnnounce };
+export declare function useAnnounce({ politeness }?: UseAnnounceOptions): UseAnnounceReturn;

package/dist/hooks/use-authed-src.d.ts

@@ -25,13 +25,13 @@
  * stops downloading. Ignoring it is safe; the result of a superseded call is discarded
  * either way.
  */
-type AuthedFetcher = (url: string, init: {
+export type AuthedFetcher = (url: string, init: {
     signal: AbortSignal;
 }) => Promise<Blob | Response>;
 /** `idle`: no URL. `loading`: the fetch is in flight. `ready`: `src` is usable.
  *  `error`: the fetch failed (see `error`). */
-type AuthedSrcStatus = "idle" | "loading" | "ready" | "error";
-interface UseAuthedSrcOptions {
+export type AuthedSrcStatus = "idle" | "loading" | "ready" | "error";
+export interface UseAuthedSrcOptions {
     /**
      * How to fetch. Left out (or `null`), the URL is used as it is — `src` is the URL and
      * the status `ready` at once — so a component that takes an OPTIONAL fetcher (the
@@ -41,7 +41,7 @@ interface UseAuthedSrcOptions {
     /** `false` holds the fetch — a lightbox slide that is not on screen. Default `true`. */
     enabled?: boolean;
 }
-interface UseAuthedSrcResult {
+export interface UseAuthedSrcResult {
     /** The object URL (or, without a fetcher, the URL itself); `null` until ready. */
     src: string | null;
     status: AuthedSrcStatus;
@@ -66,6 +66,4 @@ interface UseAuthedSrcResult {
  * The fetcher is read through a ref, so an inline arrow does not refetch on every
  * render; a change of `url` (or `retry`) does.
  */
-declare function useAuthedSrc(url: string | null | undefined, { fetcher, enabled }?: UseAuthedSrcOptions): UseAuthedSrcResult;
-
-export { type AuthedFetcher, type AuthedSrcStatus, type UseAuthedSrcOptions, type UseAuthedSrcResult, useAuthedSrc };
+export declare function useAuthedSrc(url: string | null | undefined, { fetcher, enabled }?: UseAuthedSrcOptions): UseAuthedSrcResult;

package/dist/hooks/use-authed-src.js

@@ -1,5 +1,6 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
+const NO_STATE = { key: null, src: null, status: "idle", error: void 0, type: void 0 };
 async function toBlob(res) {
   if (typeof Response !== "undefined" && res instanceof Response) {
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -15,13 +16,8 @@ function useAuthedSrc(url, { fetcher, enabled = true } = {}) {
   const hasFetcher = !!fetcher;
   const [attempt, setAttempt] = useState(0);
   const key = url && enabled && hasFetcher ? `${attempt}|${url}` : null;
-  const [state, setState] = useState({
-    key: null,
-    src: null,
-    status: "idle",
-    error: void 0,
-    type: void 0
-  });
+  const [state, setState] = useState(NO_STATE);
+  if (state.key !== null && state.key !== key) setState(NO_STATE);
   useEffect(() => {
     const fetchFn = fetcherRef.current;
     if (!key || !url || !fetchFn) return;

package/dist/hooks/use-authed-src.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-authed-src.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\n/**\n * Fetch a file with the app's own credentials and hand back an object URL for it.\n *\n * A plain `<img src=\"/api/v1/…\">` cannot carry a Bearer token, so the browser gets a\n * 401 and the image — and any \"open it\" link built on the same path — fails. Both apps\n * solved this once each, by hand: kastlan's `shared/components/authed-image.tsx` (ported\n * from keksdose) and its `useDocumentBlobUrl` for floor plans. This is that code, once,\n * with the two things neither copy did: a loading/error state a caller can render, and\n * an abort when the URL changes mid-flight (a stale response used to overwrite the new\n * one's object URL — and leak the old one, since nothing revoked it).\n *\n * The kit does no auth of its own: the caller hands over a {@link AuthedFetcher} — its\n * axios client, its `fetch` with the header — and the kit only manages the blob's life:\n *\n *   - created when the bytes arrive,\n *   - revoked when the URL changes, the fetcher reports an error, or the component\n *     unmounts — so a long gallery session does not accumulate blobs,\n *   - never exposed as a token-bearing URL: the object URL is `blob:` and local.\n */\n\n/**\n * The app's authenticated GET. Resolve to the file's bytes: a `Blob` (axios with\n * `responseType: \"blob\"`), or a `Response` (plain `fetch`), whose `ok` is checked here.\n *\n * Honour `signal` if you can — a thumbnail scrolled past, or a lightbox paged on, then\n * stops downloading. Ignoring it is safe; the result of a superseded call is discarded\n * either way.\n */\nexport type AuthedFetcher = (url: string, init: { signal: AbortSignal }) => Promise<Blob | Response>;\n\n/** `idle`: no URL. `loading`: the fetch is in flight. `ready`: `src` is usable.\n *  `error`: the fetch failed (see `error`). */\nexport type AuthedSrcStatus = \"idle\" | \"loading\" | \"ready\" | \"error\";\n\nexport interface UseAuthedSrcOptions {\n  /**\n   * How to fetch. Left out (or `null`), the URL is used as it is — `src` is the URL and\n   * the status `ready` at once — so a component that takes an OPTIONAL fetcher (the\n   * image grid, the lightbox) has one code path for public and protected images.\n   */\n  fetcher?: AuthedFetcher | null;\n  /** `false` holds the fetch — a lightbox slide that is not on screen. Default `true`. */\n  enabled?: boolean;\n}\n\nexport interface UseAuthedSrcResult {\n  /** The object URL (or, without a fetcher, the URL itself); `null` until ready. */\n  src: string | null;\n  status: AuthedSrcStatus;\n  /** What the fetcher threw, when `status` is `error`. */\n  error: unknown;\n  /** The blob's MIME type, once fetched (`\"\"` when the server sent none). `undefined`\n   *  without a fetcher — nothing was fetched to ask. Lets a caller that does not know\n   *  whether a URL is an image or a PDF find out. */\n  type: string | undefined;\n  /** Fetch again — after an `error`, or to pick up a changed file at the same URL. */\n  retry: () => void;\n}\n\ninterface State {\n  /** Which request this state belongs to — see the effect. */\n  key: string | null;\n  src: string | null;\n  status: AuthedSrcStatus;\n  error: unknown;\n  type: string | undefined;\n}\n\nasync function toBlob(res: Blob | Response): Promise<Blob> {\n  if (typeof Response !== \"undefined\" && res instanceof Response) {\n    if (!res.ok) throw new Error(`HTTP ${res.status}`);\n    return res.blob();\n  }\n  return res as Blob;\n}\n\n/**\n * `useAuthedSrc(url, { fetcher })` — see the module note.\n *\n * ```tsx\n * const fetcher: AuthedFetcher = (url, { signal }) =>\n *   apiClient.get(url, { responseType: \"blob\", signal }).then((r) => r.data);\n * const { src, status } = useAuthedSrc(photo.file_path, { fetcher });\n * ```\n *\n * The fetcher is read through a ref, so an inline arrow does not refetch on every\n * render; a change of `url` (or `retry`) does.\n */\nexport function useAuthedSrc(\n  url: string | null | undefined,\n  { fetcher, enabled = true }: UseAuthedSrcOptions = {},\n): UseAuthedSrcResult {\n  const fetcherRef = useRef(fetcher);\n  useEffect(() => {\n    fetcherRef.current = fetcher;\n  });\n  const hasFetcher = !!fetcher;\n  const [attempt, setAttempt] = useState(0);\n  const key = url && enabled && hasFetcher ? `${attempt}|${url}` : null;\n  const [state, setState] = useState<State>({\n    key: null,\n    src: null,\n    status: \"idle\",\n    error: undefined,\n    type: undefined,\n  });\n\n  useEffect(() => {\n    const fetchFn = fetcherRef.current;\n    if (!key || !url || !fetchFn) return;\n    const controller = new AbortController();\n    let created: string | null = null;\n    let active = true;\n    // Settled: the response is in (or failed). Aborting then would signal a request\n    // that is long over — a fetcher that listens for `abort` (to log, to cancel a\n    // retry it scheduled, to count cancellations) would see a cancellation that\n    // never happened on every URL change and unmount.\n    let settled = false;\n    // No \"loading\" state is set here: a key the state does not describe yet already\n    // reads as loading (see the end of the hook).\n    fetchFn(url, { signal: controller.signal })\n      .then(toBlob)\n      .then((blob) => {\n        settled = true;\n        if (!active) return;\n        created = URL.createObjectURL(blob);\n        setState({ key, src: created, status: \"ready\", error: undefined, type: blob.type });\n      })\n      .catch((error: unknown) => {\n        settled = true;\n        if (!active) return;\n        setState({ key, src: null, status: \"error\", error, type: undefined });\n      });\n    return () => {\n      // `active` first: an in-flight response that lands after this must neither set\n      // state on an unmounted component nor create a blob nobody will revoke.\n      active = false;\n      // Only a request still in flight is aborted; `active` above is the stale-response\n      // guard either way.\n      if (!settled) controller.abort();\n      if (created) URL.revokeObjectURL(created);\n    };\n  }, [key, url]);\n\n  const retry = useCallback(() => setAttempt((n) => n + 1), []);\n\n  if (!url || !enabled) {\n    return { src: null, status: \"idle\", error: undefined, type: undefined, retry };\n  }\n  if (!hasFetcher) {\n    return { src: url, status: \"ready\", error: undefined, type: undefined, retry };\n  }\n  // Until the effect for THIS key has run, the state still describes the previous URL\n  // — a render in between must not show the old picture under the new name.\n  if (state.key !== key) {\n    return { src: null, status: \"loading\", error: undefined, type: undefined, retry };\n  }\n  return { src: state.src, status: state.status, error: state.error, type: state.type, retry };\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAsEzD,eAAe,OAAO,KAAqC;AACzD,MAAI,OAAO,aAAa,eAAe,eAAe,UAAU;AAC9D,QAAI,CAAC,IAAI,GAAI,OAAM,IAAI,MAAM,QAAQ,IAAI,MAAM,EAAE;AACjD,WAAO,IAAI,KAAK;AAAA,EAClB;AACA,SAAO;AACT;AAcO,SAAS,aACd,KACA,EAAE,SAAS,UAAU,KAAK,IAAyB,CAAC,GAChC;AACpB,QAAM,aAAa,OAAO,OAAO;AACjC,YAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,CAAC;AACD,QAAM,aAAa,CAAC,CAAC;AACrB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,CAAC;AACxC,QAAM,MAAM,OAAO,WAAW,aAAa,GAAG,OAAO,IAAI,GAAG,KAAK;AACjE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgB;AAAA,IACxC,KAAK;AAAA,IACL,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AAED,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAS;AAC9B,UAAM,aAAa,IAAI,gBAAgB;AACvC,QAAI,UAAyB;AAC7B,QAAI,SAAS;AAKb,QAAI,UAAU;AAGd,YAAQ,KAAK,EAAE,QAAQ,WAAW,OAAO,CAAC,EACvC,KAAK,MAAM,EACX,KAAK,CAAC,SAAS;AACd,gBAAU;AACV,UAAI,CAAC,OAAQ;AACb,gBAAU,IAAI,gBAAgB,IAAI;AAClC,eAAS,EAAE,KAAK,KAAK,SAAS,QAAQ,SAAS,OAAO,QAAW,MAAM,KAAK,KAAK,CAAC;AAAA,IACpF,CAAC,EACA,MAAM,CAAC,UAAmB;AACzB,gBAAU;AACV,UAAI,CAAC,OAAQ;AACb,eAAS,EAAE,KAAK,KAAK,MAAM,QAAQ,SAAS,OAAO,MAAM,OAAU,CAAC;AAAA,IACtE,CAAC;AACH,WAAO,MAAM;AAGX,eAAS;AAGT,UAAI,CAAC,QAAS,YAAW,MAAM;AAC/B,UAAI,QAAS,KAAI,gBAAgB,OAAO;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,KAAK,GAAG,CAAC;AAEb,QAAM,QAAQ,YAAY,MAAM,WAAW,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5D,MAAI,CAAC,OAAO,CAAC,SAAS;AACpB,WAAO,EAAE,KAAK,MAAM,QAAQ,QAAQ,OAAO,QAAW,MAAM,QAAW,MAAM;AAAA,EAC/E;AACA,MAAI,CAAC,YAAY;AACf,WAAO,EAAE,KAAK,KAAK,QAAQ,SAAS,OAAO,QAAW,MAAM,QAAW,MAAM;AAAA,EAC/E;AAGA,MAAI,MAAM,QAAQ,KAAK;AACrB,WAAO,EAAE,KAAK,MAAM,QAAQ,WAAW,OAAO,QAAW,MAAM,QAAW,MAAM;AAAA,EAClF;AACA,SAAO,EAAE,KAAK,MAAM,KAAK,QAAQ,MAAM,QAAQ,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM;AAC7F;","names":[]}
+{"version":3,"sources":["../../src/hooks/use-authed-src.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\n/**\n * Fetch a file with the app's own credentials and hand back an object URL for it.\n *\n * A plain `<img src=\"/api/v1/…\">` cannot carry a Bearer token, so the browser gets a\n * 401 and the image — and any \"open it\" link built on the same path — fails. Both apps\n * solved this once each, by hand: kastlan's `shared/components/authed-image.tsx` (ported\n * from keksdose) and its `useDocumentBlobUrl` for floor plans. This is that code, once,\n * with the two things neither copy did: a loading/error state a caller can render, and\n * an abort when the URL changes mid-flight (a stale response used to overwrite the new\n * one's object URL — and leak the old one, since nothing revoked it).\n *\n * The kit does no auth of its own: the caller hands over a {@link AuthedFetcher} — its\n * axios client, its `fetch` with the header — and the kit only manages the blob's life:\n *\n *   - created when the bytes arrive,\n *   - revoked when the URL changes, the fetcher reports an error, or the component\n *     unmounts — so a long gallery session does not accumulate blobs,\n *   - never exposed as a token-bearing URL: the object URL is `blob:` and local.\n */\n\n/**\n * The app's authenticated GET. Resolve to the file's bytes: a `Blob` (axios with\n * `responseType: \"blob\"`), or a `Response` (plain `fetch`), whose `ok` is checked here.\n *\n * Honour `signal` if you can — a thumbnail scrolled past, or a lightbox paged on, then\n * stops downloading. Ignoring it is safe; the result of a superseded call is discarded\n * either way.\n */\nexport type AuthedFetcher = (url: string, init: { signal: AbortSignal }) => Promise<Blob | Response>;\n\n/** `idle`: no URL. `loading`: the fetch is in flight. `ready`: `src` is usable.\n *  `error`: the fetch failed (see `error`). */\nexport type AuthedSrcStatus = \"idle\" | \"loading\" | \"ready\" | \"error\";\n\nexport interface UseAuthedSrcOptions {\n  /**\n   * How to fetch. Left out (or `null`), the URL is used as it is — `src` is the URL and\n   * the status `ready` at once — so a component that takes an OPTIONAL fetcher (the\n   * image grid, the lightbox) has one code path for public and protected images.\n   */\n  fetcher?: AuthedFetcher | null;\n  /** `false` holds the fetch — a lightbox slide that is not on screen. Default `true`. */\n  enabled?: boolean;\n}\n\nexport interface UseAuthedSrcResult {\n  /** The object URL (or, without a fetcher, the URL itself); `null` until ready. */\n  src: string | null;\n  status: AuthedSrcStatus;\n  /** What the fetcher threw, when `status` is `error`. */\n  error: unknown;\n  /** The blob's MIME type, once fetched (`\"\"` when the server sent none). `undefined`\n   *  without a fetcher — nothing was fetched to ask. Lets a caller that does not know\n   *  whether a URL is an image or a PDF find out. */\n  type: string | undefined;\n  /** Fetch again — after an `error`, or to pick up a changed file at the same URL. */\n  retry: () => void;\n}\n\ninterface State {\n  /** Which request this state belongs to — see the effect. */\n  key: string | null;\n  src: string | null;\n  status: AuthedSrcStatus;\n  error: unknown;\n  type: string | undefined;\n}\n\nconst NO_STATE: State = { key: null, src: null, status: \"idle\", error: undefined, type: undefined };\n\nasync function toBlob(res: Blob | Response): Promise<Blob> {\n  if (typeof Response !== \"undefined\" && res instanceof Response) {\n    if (!res.ok) throw new Error(`HTTP ${res.status}`);\n    return res.blob();\n  }\n  return res as Blob;\n}\n\n/**\n * `useAuthedSrc(url, { fetcher })` — see the module note.\n *\n * ```tsx\n * const fetcher: AuthedFetcher = (url, { signal }) =>\n *   apiClient.get(url, { responseType: \"blob\", signal }).then((r) => r.data);\n * const { src, status } = useAuthedSrc(photo.file_path, { fetcher });\n * ```\n *\n * The fetcher is read through a ref, so an inline arrow does not refetch on every\n * render; a change of `url` (or `retry`) does.\n */\nexport function useAuthedSrc(\n  url: string | null | undefined,\n  { fetcher, enabled = true }: UseAuthedSrcOptions = {},\n): UseAuthedSrcResult {\n  const fetcherRef = useRef(fetcher);\n  useEffect(() => {\n    fetcherRef.current = fetcher;\n  });\n  const hasFetcher = !!fetcher;\n  const [attempt, setAttempt] = useState(0);\n  const key = url && enabled && hasFetcher ? `${attempt}|${url}` : null;\n  const [state, setState] = useState<State>(NO_STATE);\n  // The state answers one key, and only while that key is current. Once the key moves\n  // on, that request's effect is cleaned up and its object URL revoked, and a key can\n  // come back: Lightbox passes `enabled: open`, so closing and reopening a photo goes\n  // K → null → K, and paging back before the next picture loaded goes A → B → A. Kept,\n  // the state would answer the returning key with the revoked `blob:` as \"ready\" (or\n  // with the old error) until the refetch lands (BUG-3, refactor audit 2026-10).\n  // Dropped here, while rendering, rather than in the cleanup: a setState from a\n  // cleanup lands at a lower priority than the click that reopens, so that render\n  // could still see the old state.\n  if (state.key !== null && state.key !== key) setState(NO_STATE);\n\n  useEffect(() => {\n    const fetchFn = fetcherRef.current;\n    if (!key || !url || !fetchFn) return;\n    const controller = new AbortController();\n    let created: string | null = null;\n    let active = true;\n    // Settled: the response is in (or failed). Aborting then would signal a request\n    // that is long over — a fetcher that listens for `abort` (to log, to cancel a\n    // retry it scheduled, to count cancellations) would see a cancellation that\n    // never happened on every URL change and unmount.\n    let settled = false;\n    // No \"loading\" state is set here: a key the state does not describe yet already\n    // reads as loading (see the end of the hook).\n    fetchFn(url, { signal: controller.signal })\n      .then(toBlob)\n      .then((blob) => {\n        settled = true;\n        if (!active) return;\n        created = URL.createObjectURL(blob);\n        setState({ key, src: created, status: \"ready\", error: undefined, type: blob.type });\n      })\n      .catch((error: unknown) => {\n        settled = true;\n        if (!active) return;\n        setState({ key, src: null, status: \"error\", error, type: undefined });\n      });\n    return () => {\n      // `active` first: an in-flight response that lands after this must neither set\n      // state on an unmounted component nor create a blob nobody will revoke.\n      active = false;\n      // Only a request still in flight is aborted; `active` above is the stale-response\n      // guard either way.\n      if (!settled) controller.abort();\n      if (created) URL.revokeObjectURL(created);\n    };\n  }, [key, url]);\n\n  const retry = useCallback(() => setAttempt((n) => n + 1), []);\n\n  if (!url || !enabled) {\n    return { src: null, status: \"idle\", error: undefined, type: undefined, retry };\n  }\n  if (!hasFetcher) {\n    return { src: url, status: \"ready\", error: undefined, type: undefined, retry };\n  }\n  // Until the effect for THIS key has run, the state still describes the previous URL\n  // — a render in between must not show the old picture under the new name.\n  if (state.key !== key) {\n    return { src: null, status: \"loading\", error: undefined, type: undefined, retry };\n  }\n  return { src: state.src, status: state.status, error: state.error, type: state.type, retry };\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAsEzD,MAAM,WAAkB,EAAE,KAAK,MAAM,KAAK,MAAM,QAAQ,QAAQ,OAAO,QAAW,MAAM,OAAU;AAElG,eAAe,OAAO,KAAqC;AACzD,MAAI,OAAO,aAAa,eAAe,eAAe,UAAU;AAC9D,QAAI,CAAC,IAAI,GAAI,OAAM,IAAI,MAAM,QAAQ,IAAI,MAAM,EAAE;AACjD,WAAO,IAAI,KAAK;AAAA,EAClB;AACA,SAAO;AACT;AAcO,SAAS,aACd,KACA,EAAE,SAAS,UAAU,KAAK,IAAyB,CAAC,GAChC;AACpB,QAAM,aAAa,OAAO,OAAO;AACjC,YAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,CAAC;AACD,QAAM,aAAa,CAAC,CAAC;AACrB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,CAAC;AACxC,QAAM,MAAM,OAAO,WAAW,aAAa,GAAG,OAAO,IAAI,GAAG,KAAK;AACjE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgB,QAAQ;AAUlD,MAAI,MAAM,QAAQ,QAAQ,MAAM,QAAQ,IAAK,UAAS,QAAQ;AAE9D,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAS;AAC9B,UAAM,aAAa,IAAI,gBAAgB;AACvC,QAAI,UAAyB;AAC7B,QAAI,SAAS;AAKb,QAAI,UAAU;AAGd,YAAQ,KAAK,EAAE,QAAQ,WAAW,OAAO,CAAC,EACvC,KAAK,MAAM,EACX,KAAK,CAAC,SAAS;AACd,gBAAU;AACV,UAAI,CAAC,OAAQ;AACb,gBAAU,IAAI,gBAAgB,IAAI;AAClC,eAAS,EAAE,KAAK,KAAK,SAAS,QAAQ,SAAS,OAAO,QAAW,MAAM,KAAK,KAAK,CAAC;AAAA,IACpF,CAAC,EACA,MAAM,CAAC,UAAmB;AACzB,gBAAU;AACV,UAAI,CAAC,OAAQ;AACb,eAAS,EAAE,KAAK,KAAK,MAAM,QAAQ,SAAS,OAAO,MAAM,OAAU,CAAC;AAAA,IACtE,CAAC;AACH,WAAO,MAAM;AAGX,eAAS;AAGT,UAAI,CAAC,QAAS,YAAW,MAAM;AAC/B,UAAI,QAAS,KAAI,gBAAgB,OAAO;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,KAAK,GAAG,CAAC;AAEb,QAAM,QAAQ,YAAY,MAAM,WAAW,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5D,MAAI,CAAC,OAAO,CAAC,SAAS;AACpB,WAAO,EAAE,KAAK,MAAM,QAAQ,QAAQ,OAAO,QAAW,MAAM,QAAW,MAAM;AAAA,EAC/E;AACA,MAAI,CAAC,YAAY;AACf,WAAO,EAAE,KAAK,KAAK,QAAQ,SAAS,OAAO,QAAW,MAAM,QAAW,MAAM;AAAA,EAC/E;AAGA,MAAI,MAAM,QAAQ,KAAK;AACrB,WAAO,EAAE,KAAK,MAAM,QAAQ,WAAW,OAAO,QAAW,MAAM,QAAW,MAAM;AAAA,EAClF;AACA,SAAO,EAAE,KAAK,MAAM,KAAK,QAAQ,MAAM,QAAQ,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM;AAC7F;","names":[]}

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

@@ -4,6 +4,4 @@
  * 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 };
+export declare function useBodyScrollLock(locked: boolean): void;

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

@@ -14,7 +14,7 @@
  */
 /** The breakpoints at Normal, in rem: Tailwind's five, and `3xl` (keksdose's
  *  `min-[2400px]`, §10.4). tokens.css multiplies each by the text size. */
-declare const BREAKPOINT_REM: {
+export declare const BREAKPOINT_REM: {
     readonly sm: 40;
     readonly md: 48;
     readonly lg: 64;
@@ -22,10 +22,10 @@ declare const BREAKPOINT_REM: {
     readonly "2xl": 96;
     readonly "3xl": 150;
 };
-type Breakpoint = keyof typeof BREAKPOINT_REM;
+export type Breakpoint = keyof typeof BREAKPOINT_REM;
 /** A breakpoint variant, spelled as in a class: `"md"` is `md:` (at least md), `"max-md"`
  *  is `max-md:` (below md). */
-type BreakpointVariant = Breakpoint | `max-${Breakpoint}`;
+export type BreakpointVariant = Breakpoint | `max-${Breakpoint}`;
 /**
  * How many CSS px one `rem` is at `scale` (`TEXT_SCALE` of the size in force): the
  * browser's own default font size times the text size — what `<html>`'s computed font
@@ -33,18 +33,18 @@ type BreakpointVariant = Breakpoint | `max-${Breakpoint}`;
  * width against the viewport edge, a chart constant (§3.1, §3.2). 16 × `scale` outside a
  * browser and in jsdom, which computes no default font size.
  */
-declare function remPx(scale?: number): number;
+export declare function remPx(scale?: number): number;
 /** {@link remPx} at the text size in force, re-rendering when it changes. */
-declare function useRemPx(): number;
+export declare function useRemPx(): number;
 /** A length in rem as the kit spells one in JS — `"18rem"` — where a prop also takes px
  *  as a plain number. */
-type RemLength = `${number}rem`;
+export type RemLength = `${number}rem`;
 /**
  * A `number | RemLength` in CSS px now: a number is px as given, `"18rem"` is 18 ×
  * `rootRemPx` (see {@link remPx}). `undefined` stays `undefined`.
  */
-declare function lengthPx(length: number | RemLength, rootRemPx: number): number;
-declare function lengthPx(length: number | RemLength | undefined, rootRemPx: number): number | undefined;
+export declare function lengthPx(length: number | RemLength, rootRemPx: number): number;
+export declare function lengthPx(length: number | RemLength | undefined, rootRemPx: number): number | undefined;
 /**
  * The media query a breakpoint variant means at `scale` (`TEXT_SCALE` of the size in
  * force). `"md"` → `(min-width: 768px)` at Normal, `(min-width: 960px)` at Large;
@@ -65,24 +65,23 @@ declare function lengthPx(length: number | RemLength | undefined, rootRemPx: num
  * inside the floor the kit already sets: tokens.css's breakpoint variants are written in
  * it, and Tailwind v4 itself needs Safari 16.4, Chrome 111 and Firefox 128.
  *
- * A test's `matchMedia` stub that keyed on the old string (`"max-width: 767px"`, the
- * deprecated `PHONE_QUERY`) has to answer `(width < 768px)` now. `min-*` is unchanged,
- * character for character.
+ * A test's `matchMedia` stub that keyed on the old string (`"max-width: 767px"`,
+ * `PHONE_QUERY`'s, which went in 0.34) has to answer `(width < 768px)` now. `min-*` is
+ * unchanged, character for character.
  */
-declare function breakpointQuery(variant: BreakpointVariant, scale?: number, remPx?: number): string;
+export declare function breakpointQuery(variant: BreakpointVariant, scale?: number, remPx?: number): string;
 /**
  * Whether the viewport matches a breakpoint variant at the text size in force — the JS
  * twin of the class: `useBreakpoint("md")` is true exactly where `md:` applies,
  * `useBreakpoint("max-sm")` where `max-sm:` does. `fallback` answers where there is no
  * `matchMedia` (SSR, jsdom).
  */
-declare function useBreakpoint(variant: BreakpointVariant, fallback?: boolean): boolean;
+export declare function useBreakpoint(variant: BreakpointVariant, fallback?: boolean): boolean;
 /**
  * The phone layout: below `md` at the text size in force — `max-md:` in CSS. The single
  * answer for "is this the phone layout" (§10.4): the kit's own sheets and cards use it,
  * and an app's phone checks must too, so a tablet at 150 % gets every phone treatment
- * at once or none of them. Replaces `useMediaQuery(PHONE_QUERY)`.
+ * at once or none of them. Replaced `useMediaQuery(PHONE_QUERY)` in 0.32; that string
+ * went in 0.34.
  */
-declare function usePhoneLayout(fallback?: boolean): boolean;
-
-export { BREAKPOINT_REM, type Breakpoint, type BreakpointVariant, type RemLength, breakpointQuery, lengthPx, remPx, useBreakpoint, usePhoneLayout, useRemPx };
+export declare function usePhoneLayout(fallback?: boolean): boolean;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-breakpoint.ts"],"sourcesContent":["import { useMediaQuery } from \"./use-media-query\";\nimport { useTextSize } from \"../theme/text-size\";\n\n/**\n * Breakpoints that follow the text size, in JS (docs/text-size-harmonization.md §3.3,\n * §10.4).\n *\n * A media query's rem resolves against the browser's default font size, not `<html>`'s,\n * so Tailwind's `md:` would stay at 48rem when the root grows. tokens.css therefore\n * redefines every breakpoint variant per text size — `md:` is 48rem at Normal, 60rem at\n * Large, 72rem at Extra large — and these hooks ask the same question with the same\n * numbers, so the CSS and the JS answer always agree: AppShell's `md:hidden` and its\n * `isMdUp`, DataTable's cards and its full-screen dialog, an app's sticky footer\n * (keksdose's must be the SAME `usePhoneLayout()` the dialog uses, §10.4).\n *\n * Width queries only. Pointer and display-mode queries stay `useMediaQuery` (§10.4).\n */\n\n/** The breakpoints at Normal, in rem: Tailwind's five, and `3xl` (keksdose's\n *  `min-[2400px]`, §10.4). tokens.css multiplies each by the text size. */\nexport const BREAKPOINT_REM = { sm: 40, md: 48, lg: 64, xl: 80, \"2xl\": 96, \"3xl\": 150 } as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINT_REM;\n\n/** A breakpoint variant, spelled as in a class: `\"md\"` is `md:` (at least md), `\"max-md\"`\n *  is `max-md:` (below md). */\nexport type BreakpointVariant = Breakpoint | `max-${Breakpoint}`;\n\n/**\n * The browser's own default font size in px — what a media query's rem means (the\n * initial `font-size: medium`, never `<html>`'s). 16 unless the person changed it, and 16\n * outside a browser. Read once: changing it takes a browser setting, after which the\n * page is reloaded in practice.\n */\nlet browserRemPx: number | null = null;\nfunction readBrowserRemPx(): number {\n  if (browserRemPx !== null) return browserRemPx;\n  // Outside a browser (SSR): 16, uncached, so the client's first real read still counts.\n  if (typeof document === \"undefined\" || !document.body) return 16;\n  const probe = document.createElement(\"div\");\n  probe.style.cssText = \"position:absolute;visibility:hidden;font-size:medium\";\n  document.body.appendChild(probe);\n  const px = Number.parseFloat(getComputedStyle(probe).fontSize);\n  probe.remove();\n  // jsdom computes no font size (\"medium\" or nothing): the default it stands for.\n  browserRemPx = px > 0 ? px : 16;\n  return browserRemPx;\n}\n\n/**\n * How many CSS px one `rem` is at `scale` (`TEXT_SCALE` of the size in force): the\n * browser's own default font size times the text size — what `<html>`'s computed font\n * size is, by tokens.css. For the few lengths JS has to do arithmetic with: a popover's\n * width against the viewport edge, a chart constant (§3.1, §3.2). 16 × `scale` outside a\n * browser and in jsdom, which computes no default font size.\n */\nexport function remPx(scale = 1): number {\n  return readBrowserRemPx() * scale;\n}\n\n/** {@link remPx} at the text size in force, re-rendering when it changes. */\nexport function useRemPx(): number {\n  const { scale } = useTextSize();\n  return remPx(scale);\n}\n\n/** A length in rem as the kit spells one in JS — `\"18rem\"` — where a prop also takes px\n *  as a plain number. */\nexport type RemLength = `${number}rem`;\n\n/**\n * A `number | RemLength` in CSS px now: a number is px as given, `\"18rem\"` is 18 ×\n * `rootRemPx` (see {@link remPx}). `undefined` stays `undefined`.\n */\nexport function lengthPx(length: number | RemLength, rootRemPx: number): number;\nexport function lengthPx(length: number | RemLength | undefined, rootRemPx: number): number | undefined;\nexport function lengthPx(length: number | RemLength | undefined, rootRemPx: number): number | undefined {\n  if (length === undefined) return undefined;\n  return typeof length === \"number\" ? length : Number.parseFloat(length) * rootRemPx;\n}\n\n/**\n * The media query a breakpoint variant means at `scale` (`TEXT_SCALE` of the size in\n * force). `\"md\"` → `(min-width: 768px)` at Normal, `(min-width: 960px)` at Large;\n * `\"max-md\"` → `(width < 768px)` at Normal. In px, scaled by the browser's own default\n * font size as well, so a person who set 20 px in the browser gets 960 px for `md` at\n * Normal — as the CSS does.\n *\n * `max-*` is written in range syntax, `(width < N)`, against the same `N` its `min-*`\n * twin starts at, so the two are exact complements at EVERY width: exactly one of\n * `md` and `max-md` matches, as with tokens.css's `width >= 48rem` / `width < 48rem`\n * (and Tailwind's own `max-*`). Until 0.32.1 it was `(max-width: 767px)`, which left a\n * gap: on a fractional viewport width (767.5 px under zoom or at some Android\n * device-pixel ratios) neither query matched, so DataTable, asking `!md`, said phone\n * while `usePhoneLayout()`, asking `max-md`, said not (0.32.1, keksdose's 0.32 report;\n * docs/text-size-harmonization.md §3.3: \"the CSS and JS answers always agree\").\n *\n * Range syntax in media queries is Chrome / Edge 104, Firefox 63, Safari 16.4. That is\n * inside the floor the kit already sets: tokens.css's breakpoint variants are written in\n * it, and Tailwind v4 itself needs Safari 16.4, Chrome 111 and Firefox 128.\n *\n * A test's `matchMedia` stub that keyed on the old string (`\"max-width: 767px\"`, the\n * deprecated `PHONE_QUERY`) has to answer `(width < 768px)` now. `min-*` is unchanged,\n * character for character.\n */\nexport function breakpointQuery(variant: BreakpointVariant, scale = 1, remPx: number = readBrowserRemPx()): string {\n  const max = variant.startsWith(\"max-\");\n  const name = (max ? variant.slice(4) : variant) as Breakpoint;\n  const px = Math.round(BREAKPOINT_REM[name] * remPx * scale);\n  return max ? `(width < ${px}px)` : `(min-width: ${px}px)`;\n}\n\n/**\n * Whether the viewport matches a breakpoint variant at the text size in force — the JS\n * twin of the class: `useBreakpoint(\"md\")` is true exactly where `md:` applies,\n * `useBreakpoint(\"max-sm\")` where `max-sm:` does. `fallback` answers where there is no\n * `matchMedia` (SSR, jsdom).\n */\nexport function useBreakpoint(variant: BreakpointVariant, fallback = false): boolean {\n  const { scale } = useTextSize();\n  return useMediaQuery(breakpointQuery(variant, scale), fallback);\n}\n\n/**\n * The phone layout: below `md` at the text size in force — `max-md:` in CSS. The single\n * answer for \"is this the phone layout\" (§10.4): the kit's own sheets and cards use it,\n * and an app's phone checks must too, so a tablet at 150 % gets every phone treatment\n * at once or none of them. Replaces `useMediaQuery(PHONE_QUERY)`.\n */\nexport function usePhoneLayout(fallback = false): boolean {\n  return useBreakpoint(\"max-md\", fallback);\n}\n"],"mappings":";AAAA,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAmBrB,MAAM,iBAAiB,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,OAAO,IAAI,OAAO,IAAI;AActF,IAAI,eAA8B;AAClC,SAAS,mBAA2B;AAClC,MAAI,iBAAiB,KAAM,QAAO;AAElC,MAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAM,QAAO;AAC9D,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,MAAM,UAAU;AACtB,WAAS,KAAK,YAAY,KAAK;AAC/B,QAAM,KAAK,OAAO,WAAW,iBAAiB,KAAK,EAAE,QAAQ;AAC7D,QAAM,OAAO;AAEb,iBAAe,KAAK,IAAI,KAAK;AAC7B,SAAO;AACT;AASO,SAAS,MAAM,QAAQ,GAAW;AACvC,SAAO,iBAAiB,IAAI;AAC9B;AAGO,SAAS,WAAmB;AACjC,QAAM,EAAE,MAAM,IAAI,YAAY;AAC9B,SAAO,MAAM,KAAK;AACpB;AAYO,SAAS,SAAS,QAAwC,WAAuC;AACtG,MAAI,WAAW,OAAW,QAAO;AACjC,SAAO,OAAO,WAAW,WAAW,SAAS,OAAO,WAAW,MAAM,IAAI;AAC3E;AA0BO,SAAS,gBAAgB,SAA4B,QAAQ,GAAGA,SAAgB,iBAAiB,GAAW;AACjH,QAAM,MAAM,QAAQ,WAAW,MAAM;AACrC,QAAM,OAAQ,MAAM,QAAQ,MAAM,CAAC,IAAI;AACvC,QAAM,KAAK,KAAK,MAAM,eAAe,IAAI,IAAIA,SAAQ,KAAK;AAC1D,SAAO,MAAM,YAAY,EAAE,QAAQ,eAAe,EAAE;AACtD;AAQO,SAAS,cAAc,SAA4B,WAAW,OAAgB;AACnF,QAAM,EAAE,MAAM,IAAI,YAAY;AAC9B,SAAO,cAAc,gBAAgB,SAAS,KAAK,GAAG,QAAQ;AAChE;AAQO,SAAS,eAAe,WAAW,OAAgB;AACxD,SAAO,cAAc,UAAU,QAAQ;AACzC;","names":["remPx"]}
+{"version":3,"sources":["../../src/hooks/use-breakpoint.ts"],"sourcesContent":["import { useMediaQuery } from \"./use-media-query\";\nimport { useTextSize } from \"../theme/text-size\";\n\n/**\n * Breakpoints that follow the text size, in JS (docs/text-size-harmonization.md §3.3,\n * §10.4).\n *\n * A media query's rem resolves against the browser's default font size, not `<html>`'s,\n * so Tailwind's `md:` would stay at 48rem when the root grows. tokens.css therefore\n * redefines every breakpoint variant per text size — `md:` is 48rem at Normal, 60rem at\n * Large, 72rem at Extra large — and these hooks ask the same question with the same\n * numbers, so the CSS and the JS answer always agree: AppShell's `md:hidden` and its\n * `isMdUp`, DataTable's cards and its full-screen dialog, an app's sticky footer\n * (keksdose's must be the SAME `usePhoneLayout()` the dialog uses, §10.4).\n *\n * Width queries only. Pointer and display-mode queries stay `useMediaQuery` (§10.4).\n */\n\n/** The breakpoints at Normal, in rem: Tailwind's five, and `3xl` (keksdose's\n *  `min-[2400px]`, §10.4). tokens.css multiplies each by the text size. */\nexport const BREAKPOINT_REM = { sm: 40, md: 48, lg: 64, xl: 80, \"2xl\": 96, \"3xl\": 150 } as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINT_REM;\n\n/** A breakpoint variant, spelled as in a class: `\"md\"` is `md:` (at least md), `\"max-md\"`\n *  is `max-md:` (below md). */\nexport type BreakpointVariant = Breakpoint | `max-${Breakpoint}`;\n\n/**\n * The browser's own default font size in px — what a media query's rem means (the\n * initial `font-size: medium`, never `<html>`'s). 16 unless the person changed it, and 16\n * outside a browser. Read once: changing it takes a browser setting, after which the\n * page is reloaded in practice.\n */\nlet browserRemPx: number | null = null;\nfunction readBrowserRemPx(): number {\n  if (browserRemPx !== null) return browserRemPx;\n  // Outside a browser (SSR): 16, uncached, so the client's first real read still counts.\n  if (typeof document === \"undefined\" || !document.body) return 16;\n  const probe = document.createElement(\"div\");\n  probe.style.cssText = \"position:absolute;visibility:hidden;font-size:medium\";\n  document.body.appendChild(probe);\n  const px = Number.parseFloat(getComputedStyle(probe).fontSize);\n  probe.remove();\n  // jsdom computes no font size (\"medium\" or nothing): the default it stands for.\n  browserRemPx = px > 0 ? px : 16;\n  return browserRemPx;\n}\n\n/**\n * How many CSS px one `rem` is at `scale` (`TEXT_SCALE` of the size in force): the\n * browser's own default font size times the text size — what `<html>`'s computed font\n * size is, by tokens.css. For the few lengths JS has to do arithmetic with: a popover's\n * width against the viewport edge, a chart constant (§3.1, §3.2). 16 × `scale` outside a\n * browser and in jsdom, which computes no default font size.\n */\nexport function remPx(scale = 1): number {\n  return readBrowserRemPx() * scale;\n}\n\n/** {@link remPx} at the text size in force, re-rendering when it changes. */\nexport function useRemPx(): number {\n  const { scale } = useTextSize();\n  return remPx(scale);\n}\n\n/** A length in rem as the kit spells one in JS — `\"18rem\"` — where a prop also takes px\n *  as a plain number. */\nexport type RemLength = `${number}rem`;\n\n/**\n * A `number | RemLength` in CSS px now: a number is px as given, `\"18rem\"` is 18 ×\n * `rootRemPx` (see {@link remPx}). `undefined` stays `undefined`.\n */\nexport function lengthPx(length: number | RemLength, rootRemPx: number): number;\nexport function lengthPx(length: number | RemLength | undefined, rootRemPx: number): number | undefined;\nexport function lengthPx(length: number | RemLength | undefined, rootRemPx: number): number | undefined {\n  if (length === undefined) return undefined;\n  return typeof length === \"number\" ? length : Number.parseFloat(length) * rootRemPx;\n}\n\n/**\n * The media query a breakpoint variant means at `scale` (`TEXT_SCALE` of the size in\n * force). `\"md\"` → `(min-width: 768px)` at Normal, `(min-width: 960px)` at Large;\n * `\"max-md\"` → `(width < 768px)` at Normal. In px, scaled by the browser's own default\n * font size as well, so a person who set 20 px in the browser gets 960 px for `md` at\n * Normal — as the CSS does.\n *\n * `max-*` is written in range syntax, `(width < N)`, against the same `N` its `min-*`\n * twin starts at, so the two are exact complements at EVERY width: exactly one of\n * `md` and `max-md` matches, as with tokens.css's `width >= 48rem` / `width < 48rem`\n * (and Tailwind's own `max-*`). Until 0.32.1 it was `(max-width: 767px)`, which left a\n * gap: on a fractional viewport width (767.5 px under zoom or at some Android\n * device-pixel ratios) neither query matched, so DataTable, asking `!md`, said phone\n * while `usePhoneLayout()`, asking `max-md`, said not (0.32.1, keksdose's 0.32 report;\n * docs/text-size-harmonization.md §3.3: \"the CSS and JS answers always agree\").\n *\n * Range syntax in media queries is Chrome / Edge 104, Firefox 63, Safari 16.4. That is\n * inside the floor the kit already sets: tokens.css's breakpoint variants are written in\n * it, and Tailwind v4 itself needs Safari 16.4, Chrome 111 and Firefox 128.\n *\n * A test's `matchMedia` stub that keyed on the old string (`\"max-width: 767px\"`,\n * `PHONE_QUERY`'s, which went in 0.34) has to answer `(width < 768px)` now. `min-*` is\n * unchanged, character for character.\n */\nexport function breakpointQuery(variant: BreakpointVariant, scale = 1, remPx: number = readBrowserRemPx()): string {\n  const max = variant.startsWith(\"max-\");\n  const name = (max ? variant.slice(4) : variant) as Breakpoint;\n  const px = Math.round(BREAKPOINT_REM[name] * remPx * scale);\n  return max ? `(width < ${px}px)` : `(min-width: ${px}px)`;\n}\n\n/**\n * Whether the viewport matches a breakpoint variant at the text size in force — the JS\n * twin of the class: `useBreakpoint(\"md\")` is true exactly where `md:` applies,\n * `useBreakpoint(\"max-sm\")` where `max-sm:` does. `fallback` answers where there is no\n * `matchMedia` (SSR, jsdom).\n */\nexport function useBreakpoint(variant: BreakpointVariant, fallback = false): boolean {\n  const { scale } = useTextSize();\n  return useMediaQuery(breakpointQuery(variant, scale), fallback);\n}\n\n/**\n * The phone layout: below `md` at the text size in force — `max-md:` in CSS. The single\n * answer for \"is this the phone layout\" (§10.4): the kit's own sheets and cards use it,\n * and an app's phone checks must too, so a tablet at 150 % gets every phone treatment\n * at once or none of them. Replaced `useMediaQuery(PHONE_QUERY)` in 0.32; that string\n * went in 0.34.\n */\nexport function usePhoneLayout(fallback = false): boolean {\n  return useBreakpoint(\"max-md\", fallback);\n}\n"],"mappings":";AAAA,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAmBrB,MAAM,iBAAiB,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,OAAO,IAAI,OAAO,IAAI;AActF,IAAI,eAA8B;AAClC,SAAS,mBAA2B;AAClC,MAAI,iBAAiB,KAAM,QAAO;AAElC,MAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAM,QAAO;AAC9D,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,MAAM,UAAU;AACtB,WAAS,KAAK,YAAY,KAAK;AAC/B,QAAM,KAAK,OAAO,WAAW,iBAAiB,KAAK,EAAE,QAAQ;AAC7D,QAAM,OAAO;AAEb,iBAAe,KAAK,IAAI,KAAK;AAC7B,SAAO;AACT;AASO,SAAS,MAAM,QAAQ,GAAW;AACvC,SAAO,iBAAiB,IAAI;AAC9B;AAGO,SAAS,WAAmB;AACjC,QAAM,EAAE,MAAM,IAAI,YAAY;AAC9B,SAAO,MAAM,KAAK;AACpB;AAYO,SAAS,SAAS,QAAwC,WAAuC;AACtG,MAAI,WAAW,OAAW,QAAO;AACjC,SAAO,OAAO,WAAW,WAAW,SAAS,OAAO,WAAW,MAAM,IAAI;AAC3E;AA0BO,SAAS,gBAAgB,SAA4B,QAAQ,GAAGA,SAAgB,iBAAiB,GAAW;AACjH,QAAM,MAAM,QAAQ,WAAW,MAAM;AACrC,QAAM,OAAQ,MAAM,QAAQ,MAAM,CAAC,IAAI;AACvC,QAAM,KAAK,KAAK,MAAM,eAAe,IAAI,IAAIA,SAAQ,KAAK;AAC1D,SAAO,MAAM,YAAY,EAAE,QAAQ,eAAe,EAAE;AACtD;AAQO,SAAS,cAAc,SAA4B,WAAW,OAAgB;AACnF,QAAM,EAAE,MAAM,IAAI,YAAY;AAC9B,SAAO,cAAc,gBAAgB,SAAS,KAAK,GAAG,QAAQ;AAChE;AASO,SAAS,eAAe,WAAW,OAAgB;AACxD,SAAO,cAAc,UAAU,QAAQ;AACzC;","names":["remPx"]}

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

@@ -2,13 +2,15 @@
  *  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;
+export declare const OVERLAY_EXIT_MS = 220;
 /**
- * Whether the user has asked for no motion, read NOW. `true` where `matchMedia` is
- * absent (jsdom, SSR): nothing is painting there, so "no animation" is the only
- * correct answer. Shared by every exit timer in the package, so they agree.
+ * Whether an exit animation is skipped, read NOW: the user asked for no motion, or there
+ * is no `matchMedia` (jsdom, SSR) — nothing is painting there, so "no animation" is the
+ * only correct answer, and a closed overlay is gone at once in every test suite. Shared
+ * by every exit timer in the package, so they agree. The kit's one `prefersReducedMotion`
+ * (lib/reduced-motion), asked with that answer for the unknown case (DUP-11).
  */
-declare function prefersReducedMotion(): boolean;
+export declare function skipsExitAnimation(): boolean;
 /**
  * The state machine an exit animation needs, written once for every overlay in this
  * package (Keksdose live #320 rework: *"Recognized the opening transition. Choose
@@ -39,9 +41,7 @@ declare function prefersReducedMotion(): boolean;
  * 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): {
+export declare function useCloseTransition(onClose: () => void, ms?: number): {
     closing: boolean;
     requestClose: () => void;
 };
-
-export { OVERLAY_EXIT_MS, prefersReducedMotion, useCloseTransition };

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

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

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

@@ -1 +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 * Whether the user has asked for no motion, read NOW. `true` where `matchMedia` is\n * absent (jsdom, SSR): nothing is painting there, so \"no animation\" is the only\n * correct answer. Shared by every exit timer in the package, so they agree.\n */\nexport function prefersReducedMotion(): boolean {\n  return (\n    typeof window === \"undefined\" ||\n    typeof window.matchMedia !== \"function\" ||\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\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    if (prefersReducedMotion() || 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;AAOxB,SAAS,uBAAgC;AAC9C,SACE,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,EAAE;AAE1D;AAgCO,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,QAAI,qBAAqB,KAAK,MAAM,GAAG;AACrC,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":[]}
+{"version":3,"sources":["../../src/hooks/use-close-transition.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { prefersReducedMotion } from \"../lib/reduced-motion\";\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 * Whether an exit animation is skipped, read NOW: the user asked for no motion, or there\n * is no `matchMedia` (jsdom, SSR) — nothing is painting there, so \"no animation\" is the\n * only correct answer, and a closed overlay is gone at once in every test suite. Shared\n * by every exit timer in the package, so they agree. The kit's one `prefersReducedMotion`\n * (lib/reduced-motion), asked with that answer for the unknown case (DUP-11).\n */\nexport function skipsExitAnimation(): boolean {\n  return prefersReducedMotion(true);\n}\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    if (skipsExitAnimation() || 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;AACzD,SAAS,4BAA4B;AAM9B,MAAM,kBAAkB;AASxB,SAAS,qBAA8B;AAC5C,SAAO,qBAAqB,IAAI;AAClC;AAgCO,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,QAAI,mBAAmB,KAAK,MAAM,GAAG;AACnC,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-copy-to-clipboard.d.ts

@@ -1,10 +1,10 @@
-type CopyState = "idle" | "copied" | "failed";
-interface UseCopyToClipboardOptions {
+export type CopyState = "idle" | "copied" | "failed";
+export interface UseCopyToClipboardOptions {
     /** How long `copied` / `failed` stays up before the state returns to `idle`, in
      *  ms. `0` keeps it until the next copy or {@link UseCopyToClipboardReturn.reset}. */
     resetAfter?: number;
 }
-interface UseCopyToClipboardReturn {
+export interface UseCopyToClipboardReturn {
     state: CopyState;
     /** Copy `text`. Resolves to whether it actually reached the clipboard — the same
      *  answer `state` gives, for a caller that wants to act on it directly. */
@@ -14,7 +14,7 @@ interface UseCopyToClipboardReturn {
 /** Copy `text`, by the Clipboard API when there is one and the legacy path when
  *  there is not — or when the API refuses (a denied permission, a document that is
  *  not focused). Never throws. */
-declare function copyToClipboard(text: string): Promise<boolean>;
+export declare function copyToClipboard(text: string): Promise<boolean>;
 /**
  * Copy text and KNOW whether it worked.
  *
@@ -23,6 +23,4 @@ declare function copyToClipboard(text: string): Promise<boolean>;
  * confirmed a copy that had not happened. The state here is set from the result, and
  * a failure is a state of its own rather than a quiet return to idle.
  */
-declare function useCopyToClipboard({ resetAfter }?: UseCopyToClipboardOptions): UseCopyToClipboardReturn;
-
-export { type CopyState, type UseCopyToClipboardOptions, type UseCopyToClipboardReturn, copyToClipboard, useCopyToClipboard };
+export declare function useCopyToClipboard({ resetAfter }?: UseCopyToClipboardOptions): UseCopyToClipboardReturn;

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

@@ -8,9 +8,18 @@
  *
  * The first render returns `value` itself, not `undefined`: a list filtered by the
  * debounced query must render its initial state immediately, not after `ms`.
+ *
+ * **It re-arms when `value`'s IDENTITY changes** (an effect on `[value, ms]`), not its
+ * content. Pass a primitive — the typed query, a JSON string — or a value whose
+ * identity is stable (state, a `useMemo`). An object or array built in render is a new
+ * one every render, so the timer is re-armed on every render and the value never
+ * settles — or, when the debounced value feeds the render that built it, settles,
+ * renders, builds another and fires again, every `ms`, with nobody typing
+ * (Kurvenschmiede's control page, KS U9). Debounce `JSON.stringify(body)`, or a key that
+ * changes exactly when the content does, and build the object from that.
  */
-declare function useDebounce<T>(value: T, ms: number): T;
-interface DebouncedCallbackOptions {
+export declare function useDebounce<T>(value: T, ms: number): T;
+export interface DebouncedCallbackOptions {
     /**
      * The longest a call may be held back, however often it is re-triggered. Without
      * it a user who never stops typing never saves; with it, a draft autosave still
@@ -19,7 +28,7 @@ interface DebouncedCallbackOptions {
     maxWait?: number;
 }
 /** The debounced function, plus the two escapes a caller needs around it. */
-type DebouncedFunction<A extends unknown[]> = ((...args: A) => void) & {
+export type DebouncedFunction<A extends unknown[]> = ((...args: A) => void) & {
     /** Drop the pending call, if there is one. */
     cancel: () => void;
     /** Run the pending call now, if there is one — e.g. on blur or before navigating
@@ -38,6 +47,4 @@ type DebouncedFunction<A extends unknown[]> = ((...args: A) => void) & {
  * A pending call is cancelled on unmount: a debounced save firing into an unmounted
  * form is the bug kastlan reported, not a feature.
  */
-declare function useDebouncedCallback<A extends unknown[]>(fn: (...args: A) => void, ms: number, { maxWait }?: DebouncedCallbackOptions): DebouncedFunction<A>;
-
-export { type DebouncedCallbackOptions, type DebouncedFunction, useDebounce, useDebouncedCallback };
+export declare function useDebouncedCallback<A extends unknown[]>(fn: (...args: A) => void, ms: number, { maxWait }?: DebouncedCallbackOptions): DebouncedFunction<A>;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-debounce.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\n\n/**\n * A value that follows `value`, but only once it has stopped changing for `ms`.\n *\n * kastlan asked for the pair in this module because each of its search boxes carried\n * its own copy of the same six lines — a `useEffect` with a `setTimeout` — and two of\n * them forgot the cleanup, so a stale query landed AFTER the fresh one and replaced\n * its results. The cleanup is the whole point of having one implementation.\n *\n * The first render returns `value` itself, not `undefined`: a list filtered by the\n * debounced query must render its initial state immediately, not after `ms`.\n */\nexport function useDebounce<T>(value: T, ms: number): T {\n  const [debounced, setDebounced] = useState(value);\n  useEffect(() => {\n    const timer = setTimeout(() => setDebounced(value), ms);\n    return () => clearTimeout(timer);\n  }, [value, ms]);\n  return debounced;\n}\n\nexport interface DebouncedCallbackOptions {\n  /**\n   * The longest a call may be held back, however often it is re-triggered. Without\n   * it a user who never stops typing never saves; with it, a draft autosave still\n   * lands every `maxWait` ms while the typing goes on.\n   */\n  maxWait?: number;\n}\n\n/** The debounced function, plus the two escapes a caller needs around it. */\nexport type DebouncedFunction<A extends unknown[]> = ((...args: A) => void) & {\n  /** Drop the pending call, if there is one. */\n  cancel: () => void;\n  /** Run the pending call now, if there is one — e.g. on blur or before navigating\n   *  away, so the last keystrokes of a form are not lost. */\n  flush: () => void;\n  /** Whether a call is waiting. */\n  pending: () => boolean;\n};\n\n/**\n * `fn`, called only once calls have stopped arriving for `ms` — with the arguments\n * of the LAST call.\n *\n * The returned function keeps its identity across renders (so it can sit in an\n * effect's dependency list or be handed to a memoised child) and always calls the\n * LATEST `fn`, so a handler that closes over current state never runs a stale copy.\n * A pending call is cancelled on unmount: a debounced save firing into an unmounted\n * form is the bug kastlan reported, not a feature.\n */\nexport function useDebouncedCallback<A extends unknown[]>(\n  fn: (...args: A) => void,\n  ms: number,\n  { maxWait }: DebouncedCallbackOptions = {},\n): DebouncedFunction<A> {\n  const fnRef = useRef(fn);\n  // Layout effect, not render-time assignment: a ref written during render is a\n  // side effect React may replay or discard. Nothing can call the debounced function\n  // between this commit and the layout effect, so it is never one render behind.\n  useLayoutEffect(() => {\n    fnRef.current = fn;\n  });\n\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const maxTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const lastArgs = useRef<A | null>(null);\n\n  const clear = useCallback(() => {\n    if (timer.current) clearTimeout(timer.current);\n    if (maxTimer.current) clearTimeout(maxTimer.current);\n    timer.current = null;\n    maxTimer.current = null;\n  }, []);\n\n  const invoke = useCallback(() => {\n    const args = lastArgs.current;\n    clear();\n    lastArgs.current = null;\n    if (args) fnRef.current(...args);\n  }, [clear]);\n\n  useEffect(() => clear, [clear]);\n\n  return useMemo(() => {\n    const debounced = ((...args: A) => {\n      lastArgs.current = args;\n      if (timer.current) clearTimeout(timer.current);\n      timer.current = setTimeout(invoke, ms);\n      if (maxWait !== undefined && !maxTimer.current) {\n        maxTimer.current = setTimeout(invoke, maxWait);\n      }\n    }) as DebouncedFunction<A>;\n    debounced.cancel = () => {\n      clear();\n      lastArgs.current = null;\n    };\n    debounced.flush = () => {\n      if (lastArgs.current) invoke();\n    };\n    debounced.pending = () => lastArgs.current !== null;\n    return debounced;\n  }, [ms, maxWait, invoke, clear]);\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,iBAAiB,SAAS,QAAQ,gBAAgB;AAa5E,SAAS,YAAe,OAAU,IAAe;AACtD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,aAAa,KAAK,GAAG,EAAE;AACtD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,OAAO,EAAE,CAAC;AACd,SAAO;AACT;AAgCO,SAAS,qBACd,IACA,IACA,EAAE,QAAQ,IAA8B,CAAC,GACnB;AACtB,QAAM,QAAQ,OAAO,EAAE;AAIvB,kBAAgB,MAAM;AACpB,UAAM,UAAU;AAAA,EAClB,CAAC;AAED,QAAM,QAAQ,OAA6C,IAAI;AAC/D,QAAM,WAAW,OAA6C,IAAI;AAClE,QAAM,WAAW,OAAiB,IAAI;AAEtC,QAAM,QAAQ,YAAY,MAAM;AAC9B,QAAI,MAAM,QAAS,cAAa,MAAM,OAAO;AAC7C,QAAI,SAAS,QAAS,cAAa,SAAS,OAAO;AACnD,UAAM,UAAU;AAChB,aAAS,UAAU;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS,YAAY,MAAM;AAC/B,UAAM,OAAO,SAAS;AACtB,UAAM;AACN,aAAS,UAAU;AACnB,QAAI,KAAM,OAAM,QAAQ,GAAG,IAAI;AAAA,EACjC,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM,OAAO,CAAC,KAAK,CAAC;AAE9B,SAAO,QAAQ,MAAM;AACnB,UAAM,aAAa,IAAI,SAAY;AACjC,eAAS,UAAU;AACnB,UAAI,MAAM,QAAS,cAAa,MAAM,OAAO;AAC7C,YAAM,UAAU,WAAW,QAAQ,EAAE;AACrC,UAAI,YAAY,UAAa,CAAC,SAAS,SAAS;AAC9C,iBAAS,UAAU,WAAW,QAAQ,OAAO;AAAA,MAC/C;AAAA,IACF;AACA,cAAU,SAAS,MAAM;AACvB,YAAM;AACN,eAAS,UAAU;AAAA,IACrB;AACA,cAAU,QAAQ,MAAM;AACtB,UAAI,SAAS,QAAS,QAAO;AAAA,IAC/B;AACA,cAAU,UAAU,MAAM,SAAS,YAAY;AAC/C,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,SAAS,QAAQ,KAAK,CAAC;AACjC;","names":[]}
+{"version":3,"sources":["../../src/hooks/use-debounce.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\n\n/**\n * A value that follows `value`, but only once it has stopped changing for `ms`.\n *\n * kastlan asked for the pair in this module because each of its search boxes carried\n * its own copy of the same six lines — a `useEffect` with a `setTimeout` — and two of\n * them forgot the cleanup, so a stale query landed AFTER the fresh one and replaced\n * its results. The cleanup is the whole point of having one implementation.\n *\n * The first render returns `value` itself, not `undefined`: a list filtered by the\n * debounced query must render its initial state immediately, not after `ms`.\n *\n * **It re-arms when `value`'s IDENTITY changes** (an effect on `[value, ms]`), not its\n * content. Pass a primitive — the typed query, a JSON string — or a value whose\n * identity is stable (state, a `useMemo`). An object or array built in render is a new\n * one every render, so the timer is re-armed on every render and the value never\n * settles — or, when the debounced value feeds the render that built it, settles,\n * renders, builds another and fires again, every `ms`, with nobody typing\n * (Kurvenschmiede's control page, KS U9). Debounce `JSON.stringify(body)`, or a key that\n * changes exactly when the content does, and build the object from that.\n */\nexport function useDebounce<T>(value: T, ms: number): T {\n  const [debounced, setDebounced] = useState(value);\n  useEffect(() => {\n    const timer = setTimeout(() => setDebounced(value), ms);\n    return () => clearTimeout(timer);\n  }, [value, ms]);\n  return debounced;\n}\n\nexport interface DebouncedCallbackOptions {\n  /**\n   * The longest a call may be held back, however often it is re-triggered. Without\n   * it a user who never stops typing never saves; with it, a draft autosave still\n   * lands every `maxWait` ms while the typing goes on.\n   */\n  maxWait?: number;\n}\n\n/** The debounced function, plus the two escapes a caller needs around it. */\nexport type DebouncedFunction<A extends unknown[]> = ((...args: A) => void) & {\n  /** Drop the pending call, if there is one. */\n  cancel: () => void;\n  /** Run the pending call now, if there is one — e.g. on blur or before navigating\n   *  away, so the last keystrokes of a form are not lost. */\n  flush: () => void;\n  /** Whether a call is waiting. */\n  pending: () => boolean;\n};\n\n/**\n * `fn`, called only once calls have stopped arriving for `ms` — with the arguments\n * of the LAST call.\n *\n * The returned function keeps its identity across renders (so it can sit in an\n * effect's dependency list or be handed to a memoised child) and always calls the\n * LATEST `fn`, so a handler that closes over current state never runs a stale copy.\n * A pending call is cancelled on unmount: a debounced save firing into an unmounted\n * form is the bug kastlan reported, not a feature.\n */\nexport function useDebouncedCallback<A extends unknown[]>(\n  fn: (...args: A) => void,\n  ms: number,\n  { maxWait }: DebouncedCallbackOptions = {},\n): DebouncedFunction<A> {\n  const fnRef = useRef(fn);\n  // Layout effect, not render-time assignment: a ref written during render is a\n  // side effect React may replay or discard. Nothing can call the debounced function\n  // between this commit and the layout effect, so it is never one render behind.\n  useLayoutEffect(() => {\n    fnRef.current = fn;\n  });\n\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const maxTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const lastArgs = useRef<A | null>(null);\n\n  const clear = useCallback(() => {\n    if (timer.current) clearTimeout(timer.current);\n    if (maxTimer.current) clearTimeout(maxTimer.current);\n    timer.current = null;\n    maxTimer.current = null;\n  }, []);\n\n  const invoke = useCallback(() => {\n    const args = lastArgs.current;\n    clear();\n    lastArgs.current = null;\n    if (args) fnRef.current(...args);\n  }, [clear]);\n\n  useEffect(() => clear, [clear]);\n\n  return useMemo(() => {\n    const debounced = ((...args: A) => {\n      lastArgs.current = args;\n      if (timer.current) clearTimeout(timer.current);\n      timer.current = setTimeout(invoke, ms);\n      if (maxWait !== undefined && !maxTimer.current) {\n        maxTimer.current = setTimeout(invoke, maxWait);\n      }\n    }) as DebouncedFunction<A>;\n    debounced.cancel = () => {\n      clear();\n      lastArgs.current = null;\n    };\n    debounced.flush = () => {\n      if (lastArgs.current) invoke();\n    };\n    debounced.pending = () => lastArgs.current !== null;\n    return debounced;\n  }, [ms, maxWait, invoke, clear]);\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,iBAAiB,SAAS,QAAQ,gBAAgB;AAsB5E,SAAS,YAAe,OAAU,IAAe;AACtD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,aAAa,KAAK,GAAG,EAAE;AACtD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,OAAO,EAAE,CAAC;AACd,SAAO;AACT;AAgCO,SAAS,qBACd,IACA,IACA,EAAE,QAAQ,IAA8B,CAAC,GACnB;AACtB,QAAM,QAAQ,OAAO,EAAE;AAIvB,kBAAgB,MAAM;AACpB,UAAM,UAAU;AAAA,EAClB,CAAC;AAED,QAAM,QAAQ,OAA6C,IAAI;AAC/D,QAAM,WAAW,OAA6C,IAAI;AAClE,QAAM,WAAW,OAAiB,IAAI;AAEtC,QAAM,QAAQ,YAAY,MAAM;AAC9B,QAAI,MAAM,QAAS,cAAa,MAAM,OAAO;AAC7C,QAAI,SAAS,QAAS,cAAa,SAAS,OAAO;AACnD,UAAM,UAAU;AAChB,aAAS,UAAU;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS,YAAY,MAAM;AAC/B,UAAM,OAAO,SAAS;AACtB,UAAM;AACN,aAAS,UAAU;AACnB,QAAI,KAAM,OAAM,QAAQ,GAAG,IAAI;AAAA,EACjC,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM,OAAO,CAAC,KAAK,CAAC;AAE9B,SAAO,QAAQ,MAAM;AACnB,UAAM,aAAa,IAAI,SAAY;AACjC,eAAS,UAAU;AACnB,UAAI,MAAM,QAAS,cAAa,MAAM,OAAO;AAC7C,YAAM,UAAU,WAAW,QAAQ,EAAE;AACrC,UAAI,YAAY,UAAa,CAAC,SAAS,SAAS;AAC9C,iBAAS,UAAU,WAAW,QAAQ,OAAO;AAAA,MAC/C;AAAA,IACF;AACA,cAAU,SAAS,MAAM;AACvB,YAAM;AACN,eAAS,UAAU;AAAA,IACrB;AACA,cAAU,QAAQ,MAAM;AACtB,UAAI,SAAS,QAAS,QAAO;AAAA,IAC/B;AACA,cAAU,UAAU,MAAM,SAAS,YAAY;AAC/C,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,SAAS,QAAQ,KAAK,CAAC;AACjC;","names":[]}

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

@@ -1,13 +1,41 @@
-import { RefObject } from 'react';
-
+import type { KeyboardEvent as ReactKeyboardEvent, 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).
+ * An Escape layer on the stack while `open`: the topmost layer is handed the next
+ * Escape and calls `onEscape`, every layer under it waits its turn. A list opened inside
+ * a dialog is above the dialog; a popover opened from a list, above the list.
+ *
+ * Where focus can be INSIDE the layer, its element's `onKeyDown` calls
+ * {@link takeEscape} too, so the key stops there — see the module note. `onEscape` is
+ * read live, so it need not be memoised; the layer is pushed and popped only when
+ * `open` flips.
+ */
+export declare function useDismissLayer(open: boolean, onEscape: (e: KeyboardEvent) => void): void;
+/**
+ * For a layer's own element, in its `onKeyDown`: hands an Escape on its way up to the
+ * topmost layer — this one, unless something opened over it without taking focus (a
+ * tooltip, the numpad) — and stops it here. True when it did; false for any other key,
+ * a claimed Escape, or one already handed over.
+ */
+export declare function takeEscape(e: KeyboardEvent | ReactKeyboardEvent): boolean;
+/**
+ * For an Escape that means "undo this step", not "close": the key is the caller's, and
+ * no layer is handed it. `preventDefault()`s it as well, so a handler further out that
+ * checks `defaultPrevented` leaves it alone, as before.
+ */
+export declare function claimEscape(e: KeyboardEvent | ReactKeyboardEvent): void;
+/**
+ * Runs a layer owner's own key handler — a dialog's `onKeyDown` prop — and turns a
+ * `preventDefault()` it makes on Escape into a claim: the one way, beside
+ * {@link claimEscape}, to keep a layer open.
+ */
+export declare function runOwnKeyDown<E extends ReactKeyboardEvent>(e: E, handler: ((e: E) => void) | undefined): void;
+/**
+ * Calls `handler` on an Escape while `enabled` — as an Escape layer. Since 0.34 this is
+ * {@link useDismissLayer} with its arguments the other way round: it hears the key only
+ * while nothing opened above it, and inside a dialog it no longer loses the key to the
+ * dialog (Wave 2, DUP-1). `handler` is read live, so it need not be memoised.
  */
-declare function useEscapeKey(handler: () => void, enabled?: boolean): void;
+export 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
@@ -29,6 +57,4 @@ declare function useEscapeKey(handler: () => void, enabled?: boolean): void;
  * 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 };
+export declare function useOutsideClick(refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[], handler: () => void, enabled?: boolean): void;