@eifi1/ui-kit 0.33.1 → 0.35.0

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,53 @@
-import { RefObject } from 'react';
-
+import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from "react";
+/** A layer's handler, read through a ref so the stack holds one stable entry per open. */
+interface Layer {
+    escape: (e: KeyboardEvent) => void;
+}
+/** What {@link useDismissLayer} hands back: its layer while open, for
+ *  {@link runOwnKeyDown} to tell whether that layer is the one on top. */
+export type DismissLayer = RefObject<Layer | null>;
 /**
- * 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. The layer it returns is for the owner's {@link runOwnKeyDown}.
+ */
+export declare function useDismissLayer(open: boolean, onEscape: (e: KeyboardEvent) => void): DismissLayer;
+/**
+ * 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.
+ *
+ * Given the owner's `layer` (what {@link useDismissLayer} returned), an Escape that went
+ * down while another layer was above that one skips the handler: the press is the
+ * layer's on top, and the owner hears the next (0.35, KS). Without it, or while the
+ * owner's layer is not open, the handler sees every key, as before.
+ */
+export declare function runOwnKeyDown<E extends ReactKeyboardEvent>(e: E, handler: ((e: E) => void) | undefined, layer?: DismissLayer): 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 +69,5 @@ 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;
+export {};

package/dist/hooks/use-dismiss.js

@@ -1,18 +1,85 @@
 "use client";
 import { useEffect, useRef } from "react";
-function useEscapeKey(handler, enabled = true) {
-  const handlerRef = useRef(handler);
+import { isComposing } from "../lib/ime.js";
+const layers = [];
+const claimed = /* @__PURE__ */ new WeakSet();
+let inFlight = null;
+function nativeOf(e) {
+  return "nativeEvent" in e ? e.nativeEvent : e;
+}
+function onCapture(e) {
+  if (e.key !== "Escape") return;
+  const top = isComposing(e) ? void 0 : layers[layers.length - 1];
+  inFlight = top ? { event: e, layer: top, done: false } : null;
+}
+function onBubble(e) {
+  handOver(e, false);
+}
+function handOver(e, stop) {
+  const native = nativeOf(e);
+  const flight = inFlight;
+  if (native.key !== "Escape" || !flight || flight.event !== native || flight.done) return false;
+  if (claimed.has(native)) return false;
+  flight.done = true;
+  e.preventDefault();
+  if (stop) e.stopPropagation();
+  if (layers.includes(flight.layer)) flight.layer.escape(native);
+  return true;
+}
+function push(layer) {
+  if (layers.length === 0) {
+    document.addEventListener("keydown", onCapture, true);
+    document.addEventListener("keydown", onBubble);
+  }
+  layers.push(layer);
+}
+function pop(layer) {
+  const at = layers.indexOf(layer);
+  if (at >= 0) layers.splice(at, 1);
+  if (layers.length > 0) return;
+  document.removeEventListener("keydown", onCapture, true);
+  document.removeEventListener("keydown", onBubble);
+  inFlight = null;
+}
+function useDismissLayer(open, onEscape) {
+  const handlerRef = useRef(onEscape);
+  const layerRef = useRef(null);
   useEffect(() => {
-    handlerRef.current = handler;
+    handlerRef.current = onEscape;
   });
   useEffect(() => {
-    if (!enabled) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") handlerRef.current();
+    if (!open || typeof document === "undefined") return;
+    const layer = { escape: (e) => handlerRef.current(e) };
+    layerRef.current = layer;
+    push(layer);
+    return () => {
+      pop(layer);
+      layerRef.current = null;
     };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [enabled]);
+  }, [open]);
+  return layerRef;
+}
+function takeEscape(e) {
+  return handOver(e, true);
+}
+function claimEscape(e) {
+  claimed.add(nativeOf(e));
+  e.preventDefault();
+}
+function runOwnKeyDown(e, handler, layer) {
+  if (!handler) return;
+  if (layer && aboveOwner(e, layer.current)) return;
+  const before = e.defaultPrevented;
+  handler(e);
+  if (e.key === "Escape" && !before && e.defaultPrevented) claimed.add(nativeOf(e));
+}
+function aboveOwner(e, owner) {
+  const flight = inFlight;
+  if (e.key !== "Escape" || !owner || !flight || flight.event !== nativeOf(e)) return false;
+  return flight.layer !== owner && layers.includes(owner);
+}
+function useEscapeKey(handler, enabled = true) {
+  useDismissLayer(enabled, handler);
 }
 function useOutsideClick(refs, handler, enabled = true) {
   const refsRef = useRef(refs);
@@ -36,6 +103,10 @@ function useOutsideClick(refs, handler, enabled = true) {
   }, [enabled]);
 }
 export {
+  claimEscape,
+  runOwnKeyDown,
+  takeEscape,
+  useDismissLayer,
   useEscapeKey,
   useOutsideClick
 };

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

@@ -1 +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":[]}
+{"version":3,"sources":["../../src/hooks/use-dismiss.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, RefObject } from \"react\";\nimport { isComposing } from \"../lib/ime\";\n\n/*\n * # One Escape stack (round 0.34 Wave 2, DUP-1)\n *\n * Escape closes the TOPMOST thing on screen, and only that: a list open in a dialog\n * closes and the dialog stays; the next press closes the dialog.\n *\n * \"Who owns Escape\" used to be decided five ways. The anchored pickers listened on the\n * document; Modal, FullBleedDialog, PickerSheet and Popover closed in their own panel's\n * `onKeyDown` and stopped the key; CommandPalette closed without stopping it. A dialog's\n * handler sits earlier on the key's path than any document listener, so Escape in an\n * open list inside a Modal closed the MODAL and threw the form away (BUG-1, sev 4,\n * kastlan's lease dialog), and HoverMenu, the numpad and a tooltip could not be\n * dismissed inside a dialog at all. And Modal and FullBleedDialog disagreed on when a\n * child had \"claimed\" the key: a ChipInput clearing its draft kept a Modal open and\n * closed a FullBleedDialog.\n *\n * Now every overlay and picker pushes a layer while it is open ({@link useDismissLayer}),\n * last in, first out, the way `use-overlay-history` stacks the Back gesture. One\n * capture-phase listener on the document notes which layer is on top as each Escape\n * goes down — before any handler on the page runs, so a layer that closes on the way\n * cannot pass the key on to the one beneath it. That layer, and only that one, is\n * handed the key:\n *\n * - at the first layer element the key passes on its way back up ({@link takeEscape},\n *   which Modal's panel, a picker's search box and the rest call from their\n *   `onKeyDown`). The key is stopped there, so nothing around the layers — a\n *   FloatingPanel, an app's own panel — closes with it;\n * - or, when focus is in none of them (a hover menu, a tooltip, the numpad over its\n *   field, a press on the page), at the document once the key has been everywhere else.\n *\n * Layers stack in the order they OPEN, which is the order their effects run. Two that\n * open in the same commit stack child first — the one case that order gets wrong, and\n * one no overlay in the kit does: each opens on a press, after whatever it sits in.\n *\n * ## Claiming the key: one rule\n *\n * An Escape that means \"undo this step\" is not a dismissal: ChipInput clearing its\n * draft, InlineEditField cancelling its edit, the date picker's month grid going back to\n * the days. Those call {@link claimEscape}, and no layer is handed the key. The only\n * other claim is the layer owner's OWN handler — a dialog's `onKeyDown` prop calling\n * `preventDefault()` on Escape (a busy reauth dialog holding itself open, Kurvenschmiede's\n * gear wizard asking first), through {@link runOwnKeyDown}. A `preventDefault()`\n * anywhere else claims nothing: a search box keeping Chromium from clearing itself\n * must not hold a dialog open (FullBleedDialog's 0.8.0 fix, which Modal never had).\n *\n * The owner's handler hears Escape only while its own layer is on top (0.35, KS). It\n * runs before the stack is asked, so with a tooltip, a hover menu or a list open over\n * the dialog and focus on the panel, the gear wizard asked \"Discard this gear?\" and the\n * tooltip stayed. Now the layer above takes that press, and the next one is the\n * owner's. Every other key reaches the handler as before.\n *\n * A handler that STOPS the key before it reaches a layer element has taken it too —\n * that is the DOM, and it is what the kit's cell editors and confirm buttons do.\n */\n\n/** A layer's handler, read through a ref so the stack holds one stable entry per open. */\ninterface Layer {\n  escape: (e: KeyboardEvent) => void;\n}\n\n/** What {@link useDismissLayer} hands back: its layer while open, for\n *  {@link runOwnKeyDown} to tell whether that layer is the one on top. */\nexport type DismissLayer = RefObject<Layer | null>;\n\n/** Open layers, oldest first. Module-level, because the order is ACROSS instances. */\nconst layers: Layer[] = [];\n\n/** Escapes a claimant has taken — see {@link claimEscape}. Weak: an event is garbage\n *  once its dispatch is over. */\nconst claimed = new WeakSet<Event>();\n\n/** The Escape on its way through the page: the layer that was topmost as it went down,\n *  and whether that layer has been handed it yet. */\nlet inFlight: { event: KeyboardEvent; layer: Layer; done: boolean } | null = null;\n\nfunction nativeOf(e: KeyboardEvent | ReactKeyboardEvent): KeyboardEvent {\n  return \"nativeEvent\" in e ? e.nativeEvent : e;\n}\n\nfunction onCapture(e: KeyboardEvent): void {\n  if (e.key !== \"Escape\") return;\n  // An Escape inside an IME composition cancels the composition and nothing else.\n  const top = isComposing(e) ? undefined : layers[layers.length - 1];\n  inFlight = top ? { event: e, layer: top, done: false } : null;\n}\n\n/** The fallback: no layer element was on the key's path, or none took it. */\nfunction onBubble(e: KeyboardEvent): void {\n  handOver(e, false);\n}\n\nfunction handOver(e: KeyboardEvent | ReactKeyboardEvent, stop: boolean): boolean {\n  const native = nativeOf(e);\n  const flight = inFlight;\n  if (native.key !== \"Escape\" || !flight || flight.event !== native || flight.done) return false;\n  if (claimed.has(native)) return false;\n  flight.done = true;\n  // Consumed: a type=\"search\" box does not clear itself as well, and a handler further\n  // out that checks `defaultPrevented` (FloatingPanel, an app's own panel) leaves it.\n  e.preventDefault();\n  if (stop) e.stopPropagation();\n  // A layer that closed on the way, by a handler of its own, has had its Escape.\n  if (layers.includes(flight.layer)) flight.layer.escape(native);\n  return true;\n}\n\nfunction push(layer: Layer): void {\n  if (layers.length === 0) {\n    document.addEventListener(\"keydown\", onCapture, true);\n    document.addEventListener(\"keydown\", onBubble);\n  }\n  layers.push(layer);\n}\n\nfunction pop(layer: Layer): void {\n  const at = layers.indexOf(layer);\n  if (at >= 0) layers.splice(at, 1);\n  if (layers.length > 0) return;\n  document.removeEventListener(\"keydown\", onCapture, true);\n  document.removeEventListener(\"keydown\", onBubble);\n  inFlight = null;\n}\n\n/**\n * An Escape layer on the stack while `open`: the topmost layer is handed the next\n * Escape and calls `onEscape`, every layer under it waits its turn. A list opened inside\n * a dialog is above the dialog; a popover opened from a list, above the list.\n *\n * Where focus can be INSIDE the layer, its element's `onKeyDown` calls\n * {@link takeEscape} too, so the key stops there — see the module note. `onEscape` is\n * read live, so it need not be memoised; the layer is pushed and popped only when\n * `open` flips. The layer it returns is for the owner's {@link runOwnKeyDown}.\n */\nexport function useDismissLayer(open: boolean, onEscape: (e: KeyboardEvent) => void): DismissLayer {\n  const handlerRef = useRef(onEscape);\n  const layerRef = useRef<Layer | null>(null);\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 stack would go on to call it. Keydown events fire after the commit, so\n  // the ref is always current by the time one arrives.\n  useEffect(() => {\n    handlerRef.current = onEscape;\n  });\n  useEffect(() => {\n    if (!open || typeof document === \"undefined\") return;\n    const layer: Layer = { escape: (e) => handlerRef.current(e) };\n    layerRef.current = layer;\n    push(layer);\n    return () => {\n      pop(layer);\n      layerRef.current = null;\n    };\n  }, [open]);\n  return layerRef;\n}\n\n/**\n * For a layer's own element, in its `onKeyDown`: hands an Escape on its way up to the\n * topmost layer — this one, unless something opened over it without taking focus (a\n * tooltip, the numpad) — and stops it here. True when it did; false for any other key,\n * a claimed Escape, or one already handed over.\n */\nexport function takeEscape(e: KeyboardEvent | ReactKeyboardEvent): boolean {\n  return handOver(e, true);\n}\n\n/**\n * For an Escape that means \"undo this step\", not \"close\": the key is the caller's, and\n * no layer is handed it. `preventDefault()`s it as well, so a handler further out that\n * checks `defaultPrevented` leaves it alone, as before.\n */\nexport function claimEscape(e: KeyboardEvent | ReactKeyboardEvent): void {\n  claimed.add(nativeOf(e));\n  e.preventDefault();\n}\n\n/**\n * Runs a layer owner's own key handler — a dialog's `onKeyDown` prop — and turns a\n * `preventDefault()` it makes on Escape into a claim: the one way, beside\n * {@link claimEscape}, to keep a layer open.\n *\n * Given the owner's `layer` (what {@link useDismissLayer} returned), an Escape that went\n * down while another layer was above that one skips the handler: the press is the\n * layer's on top, and the owner hears the next (0.35, KS). Without it, or while the\n * owner's layer is not open, the handler sees every key, as before.\n */\nexport function runOwnKeyDown<E extends ReactKeyboardEvent>(\n  e: E,\n  handler: ((e: E) => void) | undefined,\n  layer?: DismissLayer,\n): void {\n  if (!handler) return;\n  if (layer && aboveOwner(e, layer.current)) return;\n  const before = e.defaultPrevented;\n  handler(e);\n  if (e.key === \"Escape\" && !before && e.defaultPrevented) claimed.add(nativeOf(e));\n}\n\n/** Whether this Escape went down with a layer above `owner` — the topmost one then was\n *  another, and `owner` is on the stack. An Escape the stack did not note (one inside an\n *  IME composition) is nobody else's. */\nfunction aboveOwner(e: ReactKeyboardEvent, owner: Layer | null): boolean {\n  const flight = inFlight;\n  if (e.key !== \"Escape\" || !owner || !flight || flight.event !== nativeOf(e)) return false;\n  return flight.layer !== owner && layers.includes(owner);\n}\n\n/**\n * Calls `handler` on an Escape while `enabled` — as an Escape layer. Since 0.34 this is\n * {@link useDismissLayer} with its arguments the other way round: it hears the key only\n * while nothing opened above it, and inside a dialog it no longer loses the key to the\n * dialog (Wave 2, DUP-1). `handler` is read live, so it need not be memoised.\n */\nexport function useEscapeKey(handler: () => void, enabled = true): void {\n  useDismissLayer(enabled, handler);\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 in useDismissLayer.\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;AAElC,SAAS,mBAAmB;AAmE5B,MAAM,SAAkB,CAAC;AAIzB,MAAM,UAAU,oBAAI,QAAe;AAInC,IAAI,WAAyE;AAE7E,SAAS,SAAS,GAAsD;AACtE,SAAO,iBAAiB,IAAI,EAAE,cAAc;AAC9C;AAEA,SAAS,UAAU,GAAwB;AACzC,MAAI,EAAE,QAAQ,SAAU;AAExB,QAAM,MAAM,YAAY,CAAC,IAAI,SAAY,OAAO,OAAO,SAAS,CAAC;AACjE,aAAW,MAAM,EAAE,OAAO,GAAG,OAAO,KAAK,MAAM,MAAM,IAAI;AAC3D;AAGA,SAAS,SAAS,GAAwB;AACxC,WAAS,GAAG,KAAK;AACnB;AAEA,SAAS,SAAS,GAAuC,MAAwB;AAC/E,QAAM,SAAS,SAAS,CAAC;AACzB,QAAM,SAAS;AACf,MAAI,OAAO,QAAQ,YAAY,CAAC,UAAU,OAAO,UAAU,UAAU,OAAO,KAAM,QAAO;AACzF,MAAI,QAAQ,IAAI,MAAM,EAAG,QAAO;AAChC,SAAO,OAAO;AAGd,IAAE,eAAe;AACjB,MAAI,KAAM,GAAE,gBAAgB;AAE5B,MAAI,OAAO,SAAS,OAAO,KAAK,EAAG,QAAO,MAAM,OAAO,MAAM;AAC7D,SAAO;AACT;AAEA,SAAS,KAAK,OAAoB;AAChC,MAAI,OAAO,WAAW,GAAG;AACvB,aAAS,iBAAiB,WAAW,WAAW,IAAI;AACpD,aAAS,iBAAiB,WAAW,QAAQ;AAAA,EAC/C;AACA,SAAO,KAAK,KAAK;AACnB;AAEA,SAAS,IAAI,OAAoB;AAC/B,QAAM,KAAK,OAAO,QAAQ,KAAK;AAC/B,MAAI,MAAM,EAAG,QAAO,OAAO,IAAI,CAAC;AAChC,MAAI,OAAO,SAAS,EAAG;AACvB,WAAS,oBAAoB,WAAW,WAAW,IAAI;AACvD,WAAS,oBAAoB,WAAW,QAAQ;AAChD,aAAW;AACb;AAYO,SAAS,gBAAgB,MAAe,UAAoD;AACjG,QAAM,aAAa,OAAO,QAAQ;AAClC,QAAM,WAAW,OAAqB,IAAI;AAM1C,YAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,CAAC;AACD,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,OAAO,aAAa,YAAa;AAC9C,UAAM,QAAe,EAAE,QAAQ,CAAC,MAAM,WAAW,QAAQ,CAAC,EAAE;AAC5D,aAAS,UAAU;AACnB,SAAK,KAAK;AACV,WAAO,MAAM;AACX,UAAI,KAAK;AACT,eAAS,UAAU;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AACT,SAAO;AACT;AAQO,SAAS,WAAW,GAAgD;AACzE,SAAO,SAAS,GAAG,IAAI;AACzB;AAOO,SAAS,YAAY,GAA6C;AACvE,UAAQ,IAAI,SAAS,CAAC,CAAC;AACvB,IAAE,eAAe;AACnB;AAYO,SAAS,cACd,GACA,SACA,OACM;AACN,MAAI,CAAC,QAAS;AACd,MAAI,SAAS,WAAW,GAAG,MAAM,OAAO,EAAG;AAC3C,QAAM,SAAS,EAAE;AACjB,UAAQ,CAAC;AACT,MAAI,EAAE,QAAQ,YAAY,CAAC,UAAU,EAAE,iBAAkB,SAAQ,IAAI,SAAS,CAAC,CAAC;AAClF;AAKA,SAAS,WAAW,GAAuB,OAA8B;AACvE,QAAM,SAAS;AACf,MAAI,EAAE,QAAQ,YAAY,CAAC,SAAS,CAAC,UAAU,OAAO,UAAU,SAAS,CAAC,EAAG,QAAO;AACpF,SAAO,OAAO,UAAU,SAAS,OAAO,SAAS,KAAK;AACxD;AAQO,SAAS,aAAa,SAAqB,UAAU,MAAY;AACtE,kBAAgB,SAAS,OAAO;AAClC;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":[]}