@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/hooks/use-focus-trap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-focus-trap.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\n/**\n * Keep keyboard focus inside an open overlay, and give it back when it closes.\n *\n * Extracted from `Modal`, which was the ONLY component in this package that did any of\n * this. Every other overlay — the full-bleed dialog a phone's row editor opens, the\n * picker sheet, the numpad, the tour card — declared `role=\"dialog\" aria-modal=\"true\"`\n * and then left focus on the page behind it. That is the worst of the two possible\n * bugs: assistive technology hides the page because of `aria-modal`, while the user's\n * focus is still down there in the part that is now hidden, so Tab walks through\n * controls the screen reader refuses to describe.\n *\n * What this does beyond Modal's original copy:\n *\n *   - **Recomputes the tabbable list on every Tab**, not once when the overlay opens.\n *     These panels have conditionally-rendered contents — a search box that appears\n *     once options load, a \"clear\" button that exists only while a filter is set — and\n *     a list captured at open time traps focus against elements that have since gone.\n *   - **Guards the restore target.** The element focused before opening may have left\n *     the DOM by the time the overlay closes (the row that owned the button was\n *     filtered away). Calling `.focus()` on a detached node silently drops focus to\n *     `<body>`, which for a keyboard user means losing their place in the page\n *     entirely. When the target is gone, focus falls back to the nearest thing that\n *     still exists rather than to nothing.\n *   - **Leaves an app's own autofocus alone** (0.33.1). React honours a child's\n *     `autoFocus` while it commits, and this hook's effect runs AFTER that commit, so\n *     focusing the container there took focus straight back off the field the app had\n *     asked for. See `initialFocus`.\n *   - **Nests.** An overlay can open another — a picker inside a dialog. Only the\n *     innermost trap handles a keystroke, and closing it hands control back to the one\n *     underneath. Innermost is decided by DOM containment rather than by mount order;\n *     see the note on `TRAP_ATTR` for why the obvious stack is wrong.\n *     `use-overlay-history.ts` reasons about the same nesting problem for the back\n *     button; this is the focus half of it.\n */\n\n/**\n * Tabbable descendants, in DOM order.\n *\n * Deliberately the same selector `Modal` used, rather than a more thorough one that\n * also walks `inert`, `visibility: hidden` and open `<details>`: this is the set that\n * has been in production across three apps, and widening it here would change which\n * element receives focus in overlays nobody asked me to change the behaviour of.\n */\nconst FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Marks a container whose trap is currently active.\n *\n * \"Which trap is innermost?\" is answered by DOM CONTAINMENT, not by mount order. The\n * obvious implementation — a module-level stack pushed in the effect — is wrong, and\n * wrong in a way that passes a casual reading: React runs CHILD effects before PARENT\n * effects, so a nested overlay pushes first and the outer one ends up on top of the\n * stack, claiming to be innermost. The outer trap then handles the keystroke and wraps\n * focus to its own first element, jumping the user out of the picker they had open.\n *\n * An attribute on the live DOM cannot disagree with the DOM.\n */\nconst TRAP_ATTR = \"data-focus-trap\";\n\nexport interface FocusTrapOptions {\n  /** Trap only while this is true. Mount-time `true` is the common case. */\n  active?: boolean;\n  /** Return focus to whatever had it before the trap engaged. Default `true`. */\n  restoreFocus?: boolean;\n  /**\n   * What to focus when the trap engages. Default is the container itself, which is\n   * what `Modal` does and why: focusing the first FIELD pops the software keyboard on\n   * a phone the moment a dialog opens, before the user has asked to type.\n   * The container needs `tabIndex={-1}` for this to work.\n   *\n   * `\"container\"` and `\"first\"` both step aside when focus is ALREADY inside the\n   * container, on something other than the container itself. That is a child the app\n   * focused on purpose — an `autoFocus`, which React honours before this hook's effect\n   * runs — and the keyboard it brings up is the one the user was promised. Moving focus\n   * off it lost keksdose's create card its amount field the instant it got it, and on a\n   * phone the numpad sheet with it, which shows only while the field is focused (live\n   * #402). A function is the caller's explicit choice and is always followed.\n   */\n  initialFocus?: \"container\" | \"first\" | (() => HTMLElement | null);\n}\n\n/** Whatever has focus right now; nothing on the server, where there is no document. */\nfunction focusedElement(): Element | null {\n  return typeof document === \"undefined\" ? null : document.activeElement;\n}\n\nexport function useFocusTrap(\n  containerRef: React.RefObject<HTMLElement | null>,\n  { active = true, restoreFocus = true, initialFocus = \"container\" }: FocusTrapOptions = {},\n): void {\n  // Latest-ref so a caller passing an inline `initialFocus` thunk — which every caller\n  // will — does not tear the trap down and re-engage it on each render, stealing focus\n  // back to the top of the panel mid-interaction. Written in a LAYOUT effect so that\n  // the trap's cleanup, which runs after the layout effects of the same commit, reads\n  // this render's `active` rather than the last one's — see the cleanup for why.\n  const optsRef = useRef({ active, restoreFocus, initialFocus });\n  useLayoutEffect(() => {\n    optsRef.current = { active, restoreFocus, initialFocus };\n  });\n\n  // Where focus was BEFORE the trap engaged: the element it is given back to on close.\n  //\n  // Read DURING the render that turns the trap on, and that timing is the point. React\n  // honours a child's `autoFocus` while it commits that render, before any effect runs,\n  // so the effect below asking `document.activeElement` would get the child, inside the\n  // overlay. Restoring to that on close aimed focus at the dialog that was closing —\n  // already out of the DOM, so focus fell to <body> rather than going back to the\n  // button that opened it.\n  //\n  // State adjusted during render (the pattern `Modal` uses for `open`) rather than a\n  // ref written there: set once per opening and cleared on release, so a re-render\n  // while open cannot replace it with something inside, and StrictMode's second render\n  // and second effect both see the same element. `undefined` means \"not captured\";\n  // `null` is a capture that found nothing.\n  const [opener, setOpener] = useState<Element | null | undefined>(undefined);\n  if (active && opener === undefined) setOpener(focusedElement());\n  else if (!active && opener !== undefined) setOpener(undefined);\n\n  useEffect(() => {\n    if (!active) return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    container.setAttribute(TRAP_ATTR, \"\");\n\n    /** Is `node` inside a trap nested within this one? */\n    const inNestedTrap = (node: Element | null) => {\n      if (!node) return false;\n      const owner = node.closest(`[${TRAP_ATTR}]`);\n      return owner !== null && owner !== container;\n    };\n\n    const tabbables = () =>\n      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n        // A tabbable inside a NESTED open overlay belongs to that overlay's trap, not\n        // to this one — otherwise the outer list spans both panels and Tab from the\n        // inner panel's last control wraps to the OUTER panel's first.\n        (el) => !inNestedTrap(el),\n      );\n\n    const { initialFocus: how } = optsRef.current;\n    const focused = document.activeElement;\n    // A child that already has focus was given it on purpose — see `initialFocus`.\n    const childHasFocus = focused !== container && container.contains(focused);\n    if (typeof how === \"function\") {\n      (how() ?? container).focus();\n    } else if (!childHasFocus) {\n      (how === \"first\" ? (tabbables()[0] ?? container) : container).focus();\n    }\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== \"Tab\") return;\n      // Only the innermost trap acts. The event bubbles through every ancestor\n      // container, so without this an outer dialog and an inner picker both handle one\n      // Tab and fight over where focus lands.\n      if (inNestedTrap(document.activeElement)) return;\n\n      // Recomputed per keystroke — see the note at the top of this file.\n      const items = tabbables();\n      if (items.length === 0) {\n        e.preventDefault();\n        container.focus();\n        return;\n      }\n      const first = items[0];\n      const last = items[items.length - 1];\n      const activeEl = document.activeElement;\n      if (e.shiftKey && (activeEl === first || activeEl === container)) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && activeEl === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    // On the container, not the document: a portalled child panel (an open dropdown\n    // rendered to <body>) is outside this subtree and manages its own focus, which is\n    // the behaviour Modal's comment describes and consumers already depend on.\n    container.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      container.removeEventListener(\"keydown\", onKeyDown);\n      container.removeAttribute(TRAP_ATTR);\n\n      // Only when the trap is really being released: the container has left the page,\n      // or `active` has turned false. StrictMode runs this cleanup once more right after\n      // mounting, with the overlay still up, and then the effect again — and React does\n      // not re-apply `autoFocus` for that second run. Restoring here would pull focus\n      // out of the autofocused field for good: live #402 again, in development.\n      if (container.isConnected && optsRef.current.active) return;\n      if (!optsRef.current.restoreFocus) return;\n      // `isConnected` is the whole point: restoring to a node that has been removed\n      // sends focus to <body> and the user loses their place entirely. When the\n      // original is gone, leave focus where the browser put it rather than moving it\n      // somewhere arbitrary — a wrong guess is worse than no move.\n      if (opener?.isConnected) (opener as HTMLElement).focus?.();\n    };\n  }, [active, containerRef, opener]);\n}\n"],"mappings":";AAAA,SAAS,WAAW,iBAAiB,QAAQ,gBAAgB;AA6C7D,MAAM,YACJ;AAcF,MAAM,YAAY;AAyBlB,SAAS,iBAAiC;AACxC,SAAO,OAAO,aAAa,cAAc,OAAO,SAAS;AAC3D;AAEO,SAAS,aACd,cACA,EAAE,SAAS,MAAM,eAAe,MAAM,eAAe,YAAY,IAAsB,CAAC,GAClF;AAMN,QAAM,UAAU,OAAO,EAAE,QAAQ,cAAc,aAAa,CAAC;AAC7D,kBAAgB,MAAM;AACpB,YAAQ,UAAU,EAAE,QAAQ,cAAc,aAAa;AAAA,EACzD,CAAC;AAgBD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAqC,MAAS;AAC1E,MAAI,UAAU,WAAW,OAAW,WAAU,eAAe,CAAC;AAAA,WACrD,CAAC,UAAU,WAAW,OAAW,WAAU,MAAS;AAE7D,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,cAAU,aAAa,WAAW,EAAE;AAGpC,UAAM,eAAe,CAAC,SAAyB;AAC7C,UAAI,CAAC,KAAM,QAAO;AAClB,YAAM,QAAQ,KAAK,QAAQ,IAAI,SAAS,GAAG;AAC3C,aAAO,UAAU,QAAQ,UAAU;AAAA,IACrC;AAEA,UAAM,YAAY,MAChB,MAAM,KAAK,UAAU,iBAA8B,SAAS,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA,MAI7D,CAAC,OAAO,CAAC,aAAa,EAAE;AAAA,IAC1B;AAEF,UAAM,EAAE,cAAc,IAAI,IAAI,QAAQ;AACtC,UAAM,UAAU,SAAS;AAEzB,UAAM,gBAAgB,YAAY,aAAa,UAAU,SAAS,OAAO;AACzE,QAAI,OAAO,QAAQ,YAAY;AAC7B,OAAC,IAAI,KAAK,WAAW,MAAM;AAAA,IAC7B,WAAW,CAAC,eAAe;AACzB,OAAC,QAAQ,UAAW,UAAU,EAAE,CAAC,KAAK,YAAa,WAAW,MAAM;AAAA,IACtE;AAEA,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,MAAO;AAIrB,UAAI,aAAa,SAAS,aAAa,EAAG;AAG1C,YAAM,QAAQ,UAAU;AACxB,UAAI,MAAM,WAAW,GAAG;AACtB,UAAE,eAAe;AACjB,kBAAU,MAAM;AAChB;AAAA,MACF;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,YAAM,OAAO,MAAM,MAAM,SAAS,CAAC;AACnC,YAAM,WAAW,SAAS;AAC1B,UAAI,EAAE,aAAa,aAAa,SAAS,aAAa,YAAY;AAChE,UAAE,eAAe;AACjB,aAAK,MAAM;AAAA,MACb,WAAW,CAAC,EAAE,YAAY,aAAa,MAAM;AAC3C,UAAE,eAAe;AACjB,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAKA,cAAU,iBAAiB,WAAW,SAAS;AAE/C,WAAO,MAAM;AACX,gBAAU,oBAAoB,WAAW,SAAS;AAClD,gBAAU,gBAAgB,SAAS;AAOnC,UAAI,UAAU,eAAe,QAAQ,QAAQ,OAAQ;AACrD,UAAI,CAAC,QAAQ,QAAQ,aAAc;AAKnC,UAAI,QAAQ,YAAa,CAAC,OAAuB,QAAQ;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,MAAM,CAAC;AACnC;","names":[]}
+{"version":3,"sources":["../../src/hooks/use-focus-trap.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\n/**\n * Keep keyboard focus inside an open overlay, and give it back when it closes.\n *\n * Extracted from `Modal`, which was the ONLY component in this package that did any of\n * this. Every other overlay — the full-bleed dialog a phone's row editor opens, the\n * picker sheet, the numpad, the tour card — declared `role=\"dialog\" aria-modal=\"true\"`\n * and then left focus on the page behind it. That is the worst of the two possible\n * bugs: assistive technology hides the page because of `aria-modal`, while the user's\n * focus is still down there in the part that is now hidden, so Tab walks through\n * controls the screen reader refuses to describe.\n *\n * What this does beyond Modal's original copy:\n *\n *   - **Recomputes the tabbable list on every Tab**, not once when the overlay opens.\n *     These panels have conditionally-rendered contents — a search box that appears\n *     once options load, a \"clear\" button that exists only while a filter is set — and\n *     a list captured at open time traps focus against elements that have since gone.\n *   - **Guards the restore target.** The element focused before opening may have left\n *     the DOM by the time the overlay closes (the row that owned the button was\n *     filtered away). Calling `.focus()` on a detached node silently drops focus to\n *     `<body>`, which for a keyboard user means losing their place in the page\n *     entirely. When the target is gone, focus falls back to the nearest thing that\n *     still exists rather than to nothing.\n *   - **Leaves an app's own autofocus alone** (0.33.1). React honours a child's\n *     `autoFocus` while it commits, and this hook's effect runs AFTER that commit, so\n *     focusing the container there took focus straight back off the field the app had\n *     asked for. See `initialFocus`.\n *   - **Nests.** An overlay can open another — a picker inside a dialog. Only the\n *     innermost trap handles a keystroke, and closing it hands control back to the one\n *     underneath. Innermost is decided by DOM containment rather than by mount order;\n *     see the note on `TRAP_ATTR` for why the obvious stack is wrong.\n *     `use-overlay-history.ts` reasons about the same nesting problem for the back\n *     button; this is the focus half of it.\n */\n\n/**\n * Candidate tab stops, in DOM order — narrowed by {@link isTabStop} to the ones a Tab\n * really reaches.\n *\n * The selector is the one `Modal` used. On its own it was not enough (round 0.34\n * BUG-4): only the bare `[tabindex]` clause excluded `-1`, so a `button`, an `input` or\n * a link taken out of the tab order still counted. A panel that ends in a roving grid —\n * the calendar's days, the month grid, the picker sheet's rows, every one of them `-1`\n * but the active cell — then had a \"last\" stop no Tab ever reaches: Tab from the real\n * last stop was not wrapped and walked out of the open panel, and Shift+Tab from the\n * first landed on a cell that is not a stop at all.\n */\nconst FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * A stop the browser's own Tab would land on: in the tab order (`tabIndex` ≥ 0) and not\n * inside something `hidden` or `inert`. Removes only elements a native Tab never\n * reaches, so no correct order changes. `visibility: hidden` and closed `<details>` are\n * still not walked — they need layout, which this list has never read.\n */\nconst isTabStop = (el: HTMLElement): boolean =>\n  el.tabIndex >= 0 && !el.closest(\"[hidden],[inert]\");\n\n/**\n * Marks a container whose trap is currently active.\n *\n * \"Which trap is innermost?\" is answered by DOM CONTAINMENT, not by mount order. The\n * obvious implementation — a module-level stack pushed in the effect — is wrong, and\n * wrong in a way that passes a casual reading: React runs CHILD effects before PARENT\n * effects, so a nested overlay pushes first and the outer one ends up on top of the\n * stack, claiming to be innermost. The outer trap then handles the keystroke and wraps\n * focus to its own first element, jumping the user out of the picker they had open.\n *\n * An attribute on the live DOM cannot disagree with the DOM.\n */\nconst TRAP_ATTR = \"data-focus-trap\";\n\nexport interface FocusTrapOptions {\n  /** Trap only while this is true. Mount-time `true` is the common case. */\n  active?: boolean;\n  /** Return focus to whatever had it before the trap engaged. Default `true`. */\n  restoreFocus?: boolean;\n  /**\n   * What to focus when the trap engages. Default is the container itself, which is\n   * what `Modal` does and why: focusing the first FIELD pops the software keyboard on\n   * a phone the moment a dialog opens, before the user has asked to type.\n   * The container needs `tabIndex={-1}` for this to work.\n   *\n   * `\"container\"` and `\"first\"` both step aside when focus is ALREADY inside the\n   * container, on something other than the container itself. That is a child the app\n   * focused on purpose — an `autoFocus`, which React honours before this hook's effect\n   * runs — and the keyboard it brings up is the one the user was promised. Moving focus\n   * off it lost keksdose's create card its amount field the instant it got it, and on a\n   * phone the numpad sheet with it, which shows only while the field is focused (live\n   * #402). A function is the caller's explicit choice and is always followed.\n   */\n  initialFocus?: \"container\" | \"first\" | (() => HTMLElement | null);\n}\n\n/** Whatever has focus right now; nothing on the server, where there is no document. */\nfunction focusedElement(): Element | null {\n  return typeof document === \"undefined\" ? null : document.activeElement;\n}\n\nexport function useFocusTrap(\n  containerRef: React.RefObject<HTMLElement | null>,\n  { active = true, restoreFocus = true, initialFocus = \"container\" }: FocusTrapOptions = {},\n): void {\n  // Latest-ref so a caller passing an inline `initialFocus` thunk — which every caller\n  // will — does not tear the trap down and re-engage it on each render, stealing focus\n  // back to the top of the panel mid-interaction. Written in a LAYOUT effect so that\n  // the trap's cleanup, which runs after the layout effects of the same commit, reads\n  // this render's `active` rather than the last one's — see the cleanup for why.\n  const optsRef = useRef({ active, restoreFocus, initialFocus });\n  useLayoutEffect(() => {\n    optsRef.current = { active, restoreFocus, initialFocus };\n  });\n\n  // Where focus was BEFORE the trap engaged: the element it is given back to on close.\n  //\n  // Read DURING the render that turns the trap on, and that timing is the point. React\n  // honours a child's `autoFocus` while it commits that render, before any effect runs,\n  // so the effect below asking `document.activeElement` would get the child, inside the\n  // overlay. Restoring to that on close aimed focus at the dialog that was closing —\n  // already out of the DOM, so focus fell to <body> rather than going back to the\n  // button that opened it.\n  //\n  // State adjusted during render (the pattern `Modal` uses for `open`) rather than a\n  // ref written there: set once per opening and cleared on release, so a re-render\n  // while open cannot replace it with something inside, and StrictMode's second render\n  // and second effect both see the same element. `undefined` means \"not captured\";\n  // `null` is a capture that found nothing.\n  const [opener, setOpener] = useState<Element | null | undefined>(undefined);\n  if (active && opener === undefined) setOpener(focusedElement());\n  else if (!active && opener !== undefined) setOpener(undefined);\n\n  useEffect(() => {\n    if (!active) return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    container.setAttribute(TRAP_ATTR, \"\");\n\n    /** Is `node` inside a trap nested within this one? */\n    const inNestedTrap = (node: Element | null) => {\n      if (!node) return false;\n      const owner = node.closest(`[${TRAP_ATTR}]`);\n      return owner !== null && owner !== container;\n    };\n\n    const tabbables = () =>\n      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n        // A tabbable inside a NESTED open overlay belongs to that overlay's trap, not\n        // to this one — otherwise the outer list spans both panels and Tab from the\n        // inner panel's last control wraps to the OUTER panel's first.\n        (el) => isTabStop(el) && !inNestedTrap(el),\n      );\n\n    const { initialFocus: how } = optsRef.current;\n    const focused = document.activeElement;\n    // A child that already has focus was given it on purpose — see `initialFocus`.\n    const childHasFocus = focused !== container && container.contains(focused);\n    if (typeof how === \"function\") {\n      (how() ?? container).focus();\n    } else if (!childHasFocus) {\n      (how === \"first\" ? (tabbables()[0] ?? container) : container).focus();\n    }\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== \"Tab\") return;\n      // Only the innermost trap acts. The event bubbles through every ancestor\n      // container, so without this an outer dialog and an inner picker both handle one\n      // Tab and fight over where focus lands.\n      if (inNestedTrap(document.activeElement)) return;\n\n      // Recomputed per keystroke — see the note at the top of this file.\n      const items = tabbables();\n      if (items.length === 0) {\n        e.preventDefault();\n        container.focus();\n        return;\n      }\n      const first = items[0];\n      const last = items[items.length - 1];\n      const activeEl = document.activeElement;\n      if (e.shiftKey && (activeEl === first || activeEl === container)) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && activeEl === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    // On the container, not the document: a portalled child panel (an open dropdown\n    // rendered to <body>) is outside this subtree and manages its own focus, which is\n    // the behaviour Modal's comment describes and consumers already depend on.\n    container.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      container.removeEventListener(\"keydown\", onKeyDown);\n      container.removeAttribute(TRAP_ATTR);\n\n      // Only when the trap is really being released: the container has left the page,\n      // or `active` has turned false. StrictMode runs this cleanup once more right after\n      // mounting, with the overlay still up, and then the effect again — and React does\n      // not re-apply `autoFocus` for that second run. Restoring here would pull focus\n      // out of the autofocused field for good: live #402 again, in development.\n      if (container.isConnected && optsRef.current.active) return;\n      if (!optsRef.current.restoreFocus) return;\n      // `isConnected` is the whole point: restoring to a node that has been removed\n      // sends focus to <body> and the user loses their place entirely. When the\n      // original is gone, leave focus where the browser put it rather than moving it\n      // somewhere arbitrary — a wrong guess is worse than no move.\n      if (opener?.isConnected) (opener as HTMLElement).focus?.();\n    };\n  }, [active, containerRef, opener]);\n}\n"],"mappings":";AAAA,SAAS,WAAW,iBAAiB,QAAQ,gBAAgB;AAiD7D,MAAM,YACJ;AAQF,MAAM,YAAY,CAAC,OACjB,GAAG,YAAY,KAAK,CAAC,GAAG,QAAQ,kBAAkB;AAcpD,MAAM,YAAY;AAyBlB,SAAS,iBAAiC;AACxC,SAAO,OAAO,aAAa,cAAc,OAAO,SAAS;AAC3D;AAEO,SAAS,aACd,cACA,EAAE,SAAS,MAAM,eAAe,MAAM,eAAe,YAAY,IAAsB,CAAC,GAClF;AAMN,QAAM,UAAU,OAAO,EAAE,QAAQ,cAAc,aAAa,CAAC;AAC7D,kBAAgB,MAAM;AACpB,YAAQ,UAAU,EAAE,QAAQ,cAAc,aAAa;AAAA,EACzD,CAAC;AAgBD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAqC,MAAS;AAC1E,MAAI,UAAU,WAAW,OAAW,WAAU,eAAe,CAAC;AAAA,WACrD,CAAC,UAAU,WAAW,OAAW,WAAU,MAAS;AAE7D,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,cAAU,aAAa,WAAW,EAAE;AAGpC,UAAM,eAAe,CAAC,SAAyB;AAC7C,UAAI,CAAC,KAAM,QAAO;AAClB,YAAM,QAAQ,KAAK,QAAQ,IAAI,SAAS,GAAG;AAC3C,aAAO,UAAU,QAAQ,UAAU;AAAA,IACrC;AAEA,UAAM,YAAY,MAChB,MAAM,KAAK,UAAU,iBAA8B,SAAS,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA,MAI7D,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,aAAa,EAAE;AAAA,IAC3C;AAEF,UAAM,EAAE,cAAc,IAAI,IAAI,QAAQ;AACtC,UAAM,UAAU,SAAS;AAEzB,UAAM,gBAAgB,YAAY,aAAa,UAAU,SAAS,OAAO;AACzE,QAAI,OAAO,QAAQ,YAAY;AAC7B,OAAC,IAAI,KAAK,WAAW,MAAM;AAAA,IAC7B,WAAW,CAAC,eAAe;AACzB,OAAC,QAAQ,UAAW,UAAU,EAAE,CAAC,KAAK,YAAa,WAAW,MAAM;AAAA,IACtE;AAEA,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,MAAO;AAIrB,UAAI,aAAa,SAAS,aAAa,EAAG;AAG1C,YAAM,QAAQ,UAAU;AACxB,UAAI,MAAM,WAAW,GAAG;AACtB,UAAE,eAAe;AACjB,kBAAU,MAAM;AAChB;AAAA,MACF;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,YAAM,OAAO,MAAM,MAAM,SAAS,CAAC;AACnC,YAAM,WAAW,SAAS;AAC1B,UAAI,EAAE,aAAa,aAAa,SAAS,aAAa,YAAY;AAChE,UAAE,eAAe;AACjB,aAAK,MAAM;AAAA,MACb,WAAW,CAAC,EAAE,YAAY,aAAa,MAAM;AAC3C,UAAE,eAAe;AACjB,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAKA,cAAU,iBAAiB,WAAW,SAAS;AAE/C,WAAO,MAAM;AACX,gBAAU,oBAAoB,WAAW,SAAS;AAClD,gBAAU,gBAAgB,SAAS;AAOnC,UAAI,UAAU,eAAe,QAAQ,QAAQ,OAAQ;AACrD,UAAI,CAAC,QAAQ,QAAQ,aAAc;AAKnC,UAAI,QAAQ,YAAa,CAAC,OAAuB,QAAQ;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,MAAM,CAAC;AACnC;","names":[]}

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

@@ -8,8 +8,8 @@
  * `KeyboardEvent.code` ("KeyF", "Digit1") when the physical key is what matters.
  * Several combos: pass an array.
  */
-type Hotkey = string;
-interface UseHotkeyOptions {
+export type Hotkey = string;
+export interface UseHotkeyOptions {
     /** Off while `false` (default `true`). */
     enabled?: boolean;
     /** Call `preventDefault()` on a match (default `true`): Ctrl+Shift+F must not also
@@ -28,7 +28,7 @@ interface UseHotkeyOptions {
     /** `keydown` (default) or `keyup`. */
     event?: "keydown" | "keyup";
 }
-interface ParsedHotkey {
+export interface ParsedHotkey {
     ctrl: boolean;
     meta: boolean;
     shift: boolean;
@@ -36,11 +36,11 @@ interface ParsedHotkey {
     key: string;
 }
 /** Whether this is an Apple platform, where `Mod` means Cmd. */
-declare function isApplePlatform(): boolean;
+export declare function isApplePlatform(): boolean;
 /** Parse one combo. `apple` decides what `Mod` is. Throws on an empty key. */
-declare function parseHotkey(combo: Hotkey, apple?: boolean): ParsedHotkey;
+export declare function parseHotkey(combo: Hotkey, apple?: boolean): ParsedHotkey;
 /** Whether `e` is `combo` — every modifier as named (no more, no fewer), and the key. */
-declare function matchesHotkey(e: KeyboardEvent, combo: ParsedHotkey): boolean;
+export declare function matchesHotkey(e: KeyboardEvent, combo: ParsedHotkey): boolean;
 /**
  * Call `handler` when `combo` is pressed — kastlan's feedback button (Ctrl+Shift+F,
  * feedback-button:60) wired it by hand, and so will every next shortcut.
@@ -54,6 +54,4 @@ declare function matchesHotkey(e: KeyboardEvent, combo: ParsedHotkey): boolean;
  *
  * `useCommandKey` (the ⌘K palette hook) is unchanged; this is its general form.
  */
-declare function useHotkey(combo: Hotkey | ReadonlyArray<Hotkey>, handler: (event: KeyboardEvent) => void, options?: UseHotkeyOptions): void;
-
-export { type Hotkey, type ParsedHotkey, type UseHotkeyOptions, isApplePlatform, matchesHotkey, parseHotkey, useHotkey };
+export declare function useHotkey(combo: Hotkey | ReadonlyArray<Hotkey>, handler: (event: KeyboardEvent) => void, options?: UseHotkeyOptions): void;

package/dist/hooks/use-large-text.d.ts

@@ -9,13 +9,13 @@
  */
 /** Large or Extra large is in force (`<html data-text-size>`) — the JS twin of the
  *  `large:` variant. */
-declare function useLargeText(): boolean;
+export declare function useLargeText(): boolean;
 /**
  * The primary pointer is a finger (`pointer: coarse`): a hover never happens, so a
  * tooltip opens only on the taps that do nothing else. A pointer query, so it stays
  * `useMediaQuery` (§10.4). `false` without `matchMedia` (SSR, jsdom).
  */
-declare function useCoarsePointer(): boolean;
+export declare function useCoarsePointer(): boolean;
 /**
  * Whether a fact may NOT live only in a tooltip here (§4 "No fact only in a tooltip"):
  * at Large and Extra large, where the reader is the one who asked for bigger type, and
@@ -24,6 +24,4 @@ declare function useCoarsePointer(): boolean;
  * control, a FieldHint as the field's caption, a StatTile hint as text — and keeps the
  * bubble only where there is no room (a top bar, a dense row's inline actions).
  */
-declare function useInlineFacts(): boolean;
-
-export { useCoarsePointer, useInlineFacts, useLargeText };
+export declare function useInlineFacts(): boolean;

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

@@ -3,6 +3,4 @@
  * re-rendering when it changes. `fallback` is the value used during SSR / when
  * `window.matchMedia` is unavailable.
  */
-declare function useMediaQuery(query: string, fallback: boolean): boolean;
-
-export { useMediaQuery };
+export declare function useMediaQuery(query: string, fallback: boolean): boolean;

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

@@ -21,6 +21,4 @@
  * preview inside another page (the showcase), where the host page's indexing is not its
  * business. Hooks cannot be called conditionally, so the switch is an argument.
  */
-declare function useNoIndex(active?: boolean): void;
-
-export { useNoIndex };
+export declare function useNoIndex(active?: boolean): void;

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

@@ -5,6 +5,4 @@
  *                  only while open (the common case) pass `true`.
  * @param onClose   the overlay's own close handler — the same one Escape calls.
  */
-declare function useOverlayHistory(open: boolean, onClose: () => void): void;
-
-export { useOverlayHistory };
+export declare function useOverlayHistory(open: boolean, onClose: () => void): void;

package/dist/hooks/use-row-swipe.d.ts

@@ -1,17 +1,16 @@
-import { PointerEvent } from 'react';
-
-interface SwipeStage {
+import type { PointerEvent } from "react";
+export interface SwipeStage {
     /** Drag magnitude (px) at which this stage arms. Stages must be sorted ascending. */
     threshold: number;
     onCommit: () => void;
 }
-interface RowSwipeOptions {
+export interface RowSwipeOptions {
     enabled: boolean;
     leftStages?: SwipeStage[];
     rightStages?: SwipeStage[];
     maxDrag?: number;
 }
-interface RowSwipeReturn {
+export interface RowSwipeReturn {
     dx: number;
     dragging: boolean;
     /** Highest armed stage index for the current drag (-1 when none armed). */
@@ -25,6 +24,4 @@ interface RowSwipeReturn {
     };
     consumeClick: () => boolean;
 }
-declare function useRowSwipe({ enabled, leftStages, rightStages, maxDrag, }: RowSwipeOptions): RowSwipeReturn;
-
-export { type RowSwipeOptions, type RowSwipeReturn, type SwipeStage, useRowSwipe };
+export declare function useRowSwipe({ enabled, leftStages, rightStages, maxDrag, }: RowSwipeOptions): RowSwipeReturn;

package/dist/hooks/use-search-param-state.d.ts

@@ -1,5 +1,5 @@
 type Updater<T> = T | ((prev: T) => T);
-interface SearchParamStateOptions<T> {
+export interface SearchParamStateOptions<T> {
     /**
      * The value of a param that IS present. Return `undefined` (or throw) for a value
      * that does not parse — a hand-edited or stale link — and the default is used.
@@ -52,21 +52,21 @@ interface SearchParamStateOptions<T> {
  *
  * Requires a react-router Router.
  */
-declare function useSearchParamState<T = string>(key: string, defaultValue: T, options?: SearchParamStateOptions<T>): [T, (next: Updater<T>) => void];
+export declare function useSearchParamState<T = string>(key: string, defaultValue: T, options?: SearchParamStateOptions<T>): [T, (next: Updater<T>) => void];
 /** One field of {@link useSearchParamsState}: its default, and the single hook's options. */
-interface SearchParamField<T> extends SearchParamStateOptions<T> {
+export interface SearchParamField<T> extends SearchParamStateOptions<T> {
     /** The value when the param is absent or does not parse; writing it removes the param. */
     default: T;
     /** The param's name in the URL. Default: the field's name (`namespace: { param: "ns" }`). */
     param?: string;
 }
 /** The fields of {@link useSearchParamsState}, one per key of the value object. */
-type SearchParamFields<V> = {
+export type SearchParamFields<V> = {
     [K in keyof V]: SearchParamField<V[K]>;
 };
 /** A partial value (fields left out — or `undefined` — stay as they are), or a function
  *  of the current value returning one. */
-type SearchParamsUpdate<V> = Partial<V> | ((prev: V) => Partial<V>);
+export type SearchParamsUpdate<V> = Partial<V> | ((prev: V) => Partial<V>);
 /**
  * Several URL search params as ONE state object, with one setter that writes them in
  * one navigation:
@@ -95,7 +95,7 @@ type SearchParamsUpdate<V> = Partial<V> | ((prev: V) => Partial<V>);
  * The value object keeps its identity while its params do not change, so it can sit in
  * a dependency array. Requires a react-router Router.
  */
-declare function useSearchParamsState<V extends object>(fields: SearchParamFields<V>): [V, (next: SearchParamsUpdate<V>) => void];
+export declare function useSearchParamsState<V extends object>(fields: SearchParamFields<V>): [V, (next: SearchParamsUpdate<V>) => void];
 /**
  * The active tab in `?tab=` (or `key`), with the default tab as the clean URL, for the
  * kit's `Tabs`:
@@ -108,13 +108,13 @@ declare function useSearchParamsState<V extends object>(fields: SearchParamField
  * renamed tab, an old link) into the default rather than into a blank panel.
  * kastlan's use-tab-param.ts, with the validation it did not have.
  */
-declare function useTabParam<T extends string>(defaultTab: T, options?: {
+export declare function useTabParam<T extends string>(defaultTab: T, options?: {
     key?: string;
     tabs?: readonly T[];
 }): [T, (tab: T) => void];
 /** Where a dialog's open state lives: a param's presence (`"edit"` → `?edit=1`), or one
  *  value of a shared param (`{ key: "dialog", value: "create-lease" }`). */
-type DialogParam = string | {
+export type DialogParam = string | {
     key: string;
     value: string;
 };
@@ -133,6 +133,5 @@ type DialogParam = string | {
  * leaves the history as it was before the dialog, and only the opener knows whether it
  * may.
  */
-declare function useDialogParam(param: DialogParam): [boolean, (open: boolean) => void];
-
-export { type DialogParam, type SearchParamField, type SearchParamFields, type SearchParamStateOptions, type SearchParamsUpdate, useDialogParam, useSearchParamState, useSearchParamsState, useTabParam };
+export declare function useDialogParam(param: DialogParam): [boolean, (open: boolean) => void];
+export {};

package/dist/hooks/use-windowed-rows.d.ts

@@ -1,11 +1,10 @@
-import { RefObject } from 'react';
-
+import type { RefObject } from "react";
 /** The attribute a measured row carries so {@link WindowedRows.measureRef} knows which
  *  row it is looking at: `data-row-index={index}`. */
-declare const WINDOWED_ROW_INDEX = "data-row-index";
+export declare const WINDOWED_ROW_INDEX = "data-row-index";
 /** What {@link useWindowedRows} answers: render rows `first` up to (not including)
  *  `last`, inside a scroll body `totalHeight` pixels tall. */
-interface WindowedRows {
+export interface WindowedRows {
     first: number;
     last: number;
     totalHeight: number;
@@ -68,6 +67,4 @@ interface WindowedRows {
  * rows of different heights — two copies of this would be two places to fix the day
  * the overscan turns out to be wrong.
  */
-declare function useWindowedRows(count: number, rowHeight: number, scrollRef: RefObject<HTMLElement | null>): WindowedRows;
-
-export { WINDOWED_ROW_INDEX, type WindowedRows, useWindowedRows };
+export declare function useWindowedRows(count: number, rowHeight: number, scrollRef: RefObject<HTMLElement | null>): WindowedRows;

package/dist/i18n/defaults.d.ts

@@ -1,105 +1,4 @@
-import { fJ as UiKitLabels } from '../delete-account-setting-DAgGBrbn.js';
-import 'react';
-import '../components/tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import '../components/data-table-sort.js';
-import '../components/swipeable-row.js';
-import '../components/status-dot.js';
-import '../components/progress-bar.js';
-import '../components/signed-amount.js';
-import '../components/stat-tile.js';
-import '../components/chip.js';
-import 'lucide-react';
-import '../components/field-parts.js';
-import '../components/write-lock.js';
-import '../components/mini-calendar.js';
-import '../components/calendar-heatmap.js';
-import '../components/popover.js';
-import '../hooks/use-breakpoint.js';
-import '../components/field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import '../components/month-picker.js';
-import '../components/page-contents.js';
-import '../components/series-chart-labels.js';
-import '../components/pie-chart-labels.js';
-import '../components/sparkline.js';
-import '../components/signature-pad.js';
-import '../components/password-strength.js';
-import '../components/swatch-picker.js';
-import '../components/tile-radio.js';
-import '../components/icon-picker.js';
-import '../components/dialog-frame.js';
-import '../components/modal.js';
-import '../hooks/use-search-param-state.js';
-import '../components/measured-grid.js';
-import '../components/user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import '../components/menu-item.js';
-import '../components/floating-panel.js';
-import '../hooks/use-authed-src.js';
-import '../components/account-settings-labels.js';
-import '../components/bulk-action-bar.js';
-import '../components/list.js';
-import '../components/breadcrumbs.js';
-import '../components/toast.js';
-import '../components/description-list.js';
-import '../components/line-items.js';
-import '../components/error-boundary.js';
-import '../components/authed-image.js';
-import '../components/image-grid.js';
-import '../components/lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import '../components/account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import './plurals.js';
-import '../components/appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import '../components/reauth-dialog.js';
-import '../components/server-wake.js';
-import '../lib/server-wake.js';
-import '../components/translation-review-labels.js';
-import '../lib/translation-review.js';
-import '../components/country-select.js';
-import '../components/inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import '../components/sign-chip.js';
-import '../components/column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import '../components/focus-ring.js';
-
+import type { UiKitLabels } from "./kit-labels.js";
 /**
  * The whole English tree in one object: what a translation is written against, and
  * the `reference` for {@link missingKitLabels}.
@@ -107,7 +6,14 @@ import '../components/focus-ring.js';
  * A separate module from the provider on purpose. Components import the provider's
  * hooks; this file imports the components' defaults. Kept together they would be an
  * import cycle through every component in the kit.
+ *
+ * Every import here is a module of WORDS — a `*-labels.ts` beside its component, which
+ * the component re-exports (`shared-labels` for the namespaces the provider types
+ * itself, which `kit-labels` re-exports) — never a component. The
+ * English catalogue (`locales/en.ts`) is built on this object, so a component imported
+ * here rides along with English: in 0.33 that was 79 of them, and an app fetching `en`
+ * lazily fetched ~40 chunks of component code with it, where every other language is one
+ * (0.34, KS U8). `__tests__/english-catalogue-graph.test.ts` holds the line, and the
+ * build makes `dist/i18n/locales/en.js` one file (scripts/flatten-en.mjs).
  */
-declare const DEFAULT_UI_KIT_LABELS: UiKitLabels;
-
-export { DEFAULT_UI_KIT_LABELS };
+export declare const DEFAULT_UI_KIT_LABELS: UiKitLabels;

package/dist/i18n/defaults.js

@@ -1,106 +1,106 @@
 "use client";
 import { DEFAULT_DATA_TABLE_LABELS } from "../components/data-table-labels.js";
-import { DEFAULT_MINI_CALENDAR_LABELS } from "../components/mini-calendar.js";
-import { DEFAULT_CALENDAR_HEATMAP_LABELS } from "../components/calendar-heatmap.js";
-import { DEFAULT_MONTH_PICKER_LABELS } from "../components/month-picker.js";
-import { DEFAULT_PAGE_CONTENTS_LABELS } from "../components/page-contents.js";
-import { DEFAULT_POPOVER_LABELS } from "../components/popover.js";
-import { DEFAULT_CHIP_INPUT_LABELS } from "../components/chip.js";
-import { DEFAULT_FIELD_SYNC_LABELS } from "../components/field-sync.js";
+import { DEFAULT_MINI_CALENDAR_LABELS } from "../components/mini-calendar-labels.js";
+import { DEFAULT_CALENDAR_HEATMAP_LABELS } from "../components/calendar-heatmap-labels.js";
+import { DEFAULT_MONTH_PICKER_LABELS } from "../components/month-picker-labels.js";
+import { DEFAULT_PAGE_CONTENTS_LABELS } from "../components/page-contents-labels.js";
+import { DEFAULT_POPOVER_LABELS } from "../components/popover-labels.js";
+import { DEFAULT_CHIP_INPUT_LABELS } from "../components/chip-labels.js";
+import { DEFAULT_FIELD_SYNC_LABELS } from "../components/field-sync-labels.js";
 import {
   DEFAULT_CHARACTER_COUNT_LABELS,
   DEFAULT_PASSWORD_REVEAL_LABELS,
   DEFAULT_TABS_LABELS
-} from "../components/ui.js";
-import { DEFAULT_WIZARD_LABELS } from "../wizard/types.js";
-import { DEFAULT_TOUR_LABELS } from "../tour/tour.js";
-import { DEFAULT_COMMAND_PALETTE_LABELS } from "../search/command-palette.js";
-import { DEFAULT_GLOBAL_SEARCH_LABELS } from "../search/global-search.js";
+} from "../components/ui-labels.js";
+import { DEFAULT_WIZARD_LABELS } from "../wizard/wizard-labels.js";
+import { DEFAULT_TOUR_LABELS } from "../tour/tour-labels.js";
+import { DEFAULT_COMMAND_PALETTE_LABELS } from "../search/command-palette-labels.js";
+import { DEFAULT_GLOBAL_SEARCH_LABELS } from "../search/global-search-labels.js";
 import { DEFAULT_SERIES_CHART_LABELS } from "../components/series-chart-labels.js";
 import { DEFAULT_PIE_CHART_LABELS } from "../components/pie-chart-labels.js";
-import { DEFAULT_SPARKLINE_LABELS } from "../components/sparkline.js";
-import { DEFAULT_STAT_TILE_LABELS } from "../components/stat-tile.js";
-import { DEFAULT_SIGNATURE_PAD_LABELS } from "../components/signature-pad.js";
-import { DEFAULT_PASSWORD_STRENGTH_LABELS } from "../components/password-strength.js";
-import { DEFAULT_DANGER_CONFIRM_LABELS } from "../components/danger-confirm.js";
-import { DEFAULT_SWATCH_PICKER_LABELS } from "../components/swatch-picker.js";
-import { DEFAULT_ICON_PICKER_LABELS } from "../components/icon-picker.js";
-import { DEFAULT_DIALOG_FRAME_LABELS } from "../components/dialog-frame.js";
-import { DEFAULT_FILE_PICKER_LABELS } from "../components/file-button.js";
-import { DEFAULT_MEASURED_GRID_LABELS } from "../components/measured-grid.js";
-import { DEFAULT_CONFIRM_DIALOG_LABELS } from "../components/confirm-dialog.js";
-import { DEFAULT_FLOATING_PANEL_LABELS } from "../components/floating-panel.js";
-import { DEFAULT_FEEDBACK_ATTACHMENT_LABELS } from "../feedback/feedback-attachment.js";
-import { DEFAULT_FEEDBACK_DIALOG_LABELS } from "../feedback/feedback-dialog.js";
+import { DEFAULT_SPARKLINE_LABELS } from "../components/sparkline-labels.js";
+import { DEFAULT_STAT_TILE_LABELS } from "../components/stat-tile-labels.js";
+import { DEFAULT_SIGNATURE_PAD_LABELS } from "../components/signature-pad-labels.js";
+import { DEFAULT_PASSWORD_STRENGTH_LABELS } from "../components/password-strength-labels.js";
+import { DEFAULT_DANGER_CONFIRM_LABELS } from "../components/danger-confirm-labels.js";
+import { DEFAULT_SWATCH_PICKER_LABELS } from "../components/swatch-picker-labels.js";
+import { DEFAULT_ICON_PICKER_LABELS } from "../components/icon-picker-labels.js";
+import { DEFAULT_DIALOG_FRAME_LABELS } from "../components/dialog-frame-labels.js";
+import { DEFAULT_FILE_PICKER_LABELS } from "../hooks/use-file-picker-labels.js";
+import { DEFAULT_MEASURED_GRID_LABELS } from "../components/measured-grid-labels.js";
+import { DEFAULT_CONFIRM_DIALOG_LABELS } from "../components/confirm-dialog-labels.js";
+import { DEFAULT_FLOATING_PANEL_LABELS } from "../components/floating-panel-labels.js";
+import { DEFAULT_FEEDBACK_ATTACHMENT_LABELS } from "../feedback/feedback-attachment-labels.js";
+import { DEFAULT_FEEDBACK_DIALOG_LABELS } from "../feedback/feedback-dialog-labels.js";
 import {
   DEFAULT_FEEDBACK_COMPOSER_LABELS,
   DEFAULT_FEEDBACK_THREAD_LABELS
-} from "../feedback/feedback-thread.js";
+} from "../feedback/feedback-thread-labels.js";
 import {
   DEFAULT_FEEDBACK_CATEGORY_LABELS,
   DEFAULT_FEEDBACK_STATUS_LABELS,
   DEFAULT_FEEDBACK_TOAST_LABELS
 } from "../feedback/feedback-labels.js";
-import { DEFAULT_FEEDBACK_MENU_LABELS } from "../feedback/feedback-menu.js";
-import { DEFAULT_FEEDBACK_CONTEXT_LABELS } from "../feedback/feedback-context.js";
-import { DEFAULT_FEEDBACK_PAGE_LABELS } from "../feedback/feedback-table.js";
-import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "../feedback/feedback-row-detail.js";
-import { DEFAULT_ACCOUNT_SETTINGS_LABELS } from "../components/account-settings-labels.js";
-import { DEFAULT_COPY_BUTTON_LABELS } from "../components/copy-button.js";
-import { DEFAULT_BULK_ACTION_BAR_LABELS } from "../components/bulk-action-bar.js";
-import { DEFAULT_LIST_LABELS } from "../components/list.js";
-import { DEFAULT_BREADCRUMBS_LABELS } from "../components/breadcrumbs.js";
-import { DEFAULT_TOAST_LABELS } from "../components/toast.js";
-import { DEFAULT_FORM_ACTIONS_LABELS } from "../components/form-actions.js";
-import { DEFAULT_DESCRIPTION_LIST_LABELS } from "../components/description-list.js";
-import { DEFAULT_LINE_ITEMS_LABELS } from "../components/line-items.js";
-import { DEFAULT_PROGRESS_BAR_LABELS } from "../components/progress-bar.js";
-import { DEFAULT_SIGNED_AMOUNT_LABELS } from "../components/signed-amount.js";
-import { DEFAULT_ERROR_BOUNDARY_LABELS } from "../components/error-boundary.js";
-import { DEFAULT_AUTHED_IMAGE_LABELS } from "../components/authed-image.js";
-import { DEFAULT_IMAGE_GRID_LABELS } from "../components/image-grid.js";
-import { DEFAULT_LIGHTBOX_LABELS } from "../components/lightbox.js";
-import { DEFAULT_WRITE_LOCK_LABELS } from "../components/write-lock.js";
-import { DEFAULT_LEGAL_LABELS } from "../components/legal.js";
-import { DEFAULT_SIGN_IN_LABELS } from "../auth/sign-in-form.js";
-import { DEFAULT_REGISTER_LABELS } from "../auth/register-form.js";
-import { DEFAULT_COMPLETE_NAME_LABELS } from "../auth/complete-name-dialog.js";
-import { DEFAULT_FORGOT_PASSWORD_LABELS } from "../auth/forgot-password-form.js";
-import { DEFAULT_RESET_PASSWORD_LABELS } from "../auth/reset-password-form.js";
-import { DEFAULT_VERIFY_EMAIL_LABELS } from "../auth/verify-email.js";
-import { DEFAULT_NOT_FOUND_LABELS } from "../auth/not-found-page.js";
-import { DEFAULT_ACCEPT_INVITATION_LABELS } from "../auth/accept-invitation.js";
-import { DEFAULT_COMPANY_SWITCHER_LABELS } from "../shell/company-switcher.js";
-import { DEFAULT_EMAIL_CHANGE_LABELS } from "../account/email-change-setting.js";
-import { DEFAULT_SESSIONS_LABELS } from "../account/sessions-setting.js";
-import { DEFAULT_DELETE_ACCOUNT_LABELS } from "../account/delete-account-setting.js";
-import { DEFAULT_DATA_EXPORT_LABELS } from "../account/data-export-setting.js";
-import { DEFAULT_USER_ROSTER_LABELS } from "../admin/user-roster.js";
-import { DEFAULT_ROLE_SELECT_LABELS } from "../admin/role-select.js";
-import { DEFAULT_REVIEWER_SCOPE_LABELS } from "../admin/reviewer-scope-editor.js";
-import { DEFAULT_ADMIN_ACTION_LABELS } from "../admin/admin-action-confirm.js";
-import { DEFAULT_ADMIN_ACTION_LOG_LABELS } from "../admin/admin-action-log.js";
-import { DEFAULT_TRANSFER_OWNERSHIP_LABELS } from "../admin/transfer-ownership-dialog.js";
-import { DEFAULT_INVITATIONS_LABELS } from "../admin/invitations-panel.js";
+import { DEFAULT_FEEDBACK_MENU_LABELS } from "../feedback/feedback-menu-labels.js";
+import { DEFAULT_FEEDBACK_CONTEXT_LABELS } from "../feedback/feedback-context-labels.js";
+import { DEFAULT_FEEDBACK_PAGE_LABELS } from "../feedback/feedback-table-labels.js";
+import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "../feedback/feedback-row-detail-labels.js";
+import { DEFAULT_ACCOUNT_SETTINGS_LABELS } from "../account/account-settings-labels.js";
+import { DEFAULT_COPY_BUTTON_LABELS } from "../components/copy-button-labels.js";
+import { DEFAULT_BULK_ACTION_BAR_LABELS } from "../components/bulk-action-bar-labels.js";
+import { DEFAULT_LIST_LABELS } from "../components/list-labels.js";
+import { DEFAULT_BREADCRUMBS_LABELS } from "../components/breadcrumbs-labels.js";
+import { DEFAULT_TOAST_LABELS } from "../components/toast-labels.js";
+import { DEFAULT_FORM_ACTIONS_LABELS } from "../components/form-actions-labels.js";
+import { DEFAULT_DESCRIPTION_LIST_LABELS } from "../components/description-list-labels.js";
+import { DEFAULT_LINE_ITEMS_LABELS } from "../components/line-items-labels.js";
+import { DEFAULT_PROGRESS_BAR_LABELS } from "../components/progress-bar-labels.js";
+import { DEFAULT_SIGNED_AMOUNT_LABELS } from "../components/signed-amount-labels.js";
+import { DEFAULT_ERROR_BOUNDARY_LABELS } from "../components/error-boundary-labels.js";
+import { DEFAULT_AUTHED_IMAGE_LABELS } from "../components/authed-image-labels.js";
+import { DEFAULT_IMAGE_GRID_LABELS } from "../components/image-grid-labels.js";
+import { DEFAULT_LIGHTBOX_LABELS } from "../components/lightbox-labels.js";
+import { DEFAULT_WRITE_LOCK_LABELS } from "../components/write-lock-labels.js";
+import { DEFAULT_LEGAL_LABELS } from "../components/legal-labels.js";
+import { DEFAULT_SIGN_IN_LABELS } from "../auth/sign-in-form-labels.js";
+import { DEFAULT_REGISTER_LABELS } from "../auth/register-form-labels.js";
+import { DEFAULT_COMPLETE_NAME_LABELS } from "../auth/complete-name-dialog-labels.js";
+import { DEFAULT_FORGOT_PASSWORD_LABELS } from "../auth/forgot-password-form-labels.js";
+import { DEFAULT_RESET_PASSWORD_LABELS } from "../auth/reset-password-form-labels.js";
+import { DEFAULT_VERIFY_EMAIL_LABELS } from "../auth/verify-email-labels.js";
+import { DEFAULT_NOT_FOUND_LABELS } from "../auth/not-found-page-labels.js";
+import { DEFAULT_ACCEPT_INVITATION_LABELS } from "../auth/accept-invitation-labels.js";
+import { DEFAULT_COMPANY_SWITCHER_LABELS } from "../shell/company-switcher-labels.js";
+import { DEFAULT_EMAIL_CHANGE_LABELS } from "../account/email-change-setting-labels.js";
+import { DEFAULT_SESSIONS_LABELS } from "../account/sessions-setting-labels.js";
+import { DEFAULT_DELETE_ACCOUNT_LABELS } from "../account/delete-account-setting-labels.js";
+import { DEFAULT_DATA_EXPORT_LABELS } from "../account/data-export-setting-labels.js";
+import { DEFAULT_USER_ROSTER_LABELS } from "../admin/user-roster-labels.js";
+import { DEFAULT_ROLE_SELECT_LABELS } from "../admin/role-select-labels.js";
+import { DEFAULT_REVIEWER_SCOPE_LABELS } from "../admin/reviewer-scope-editor-labels.js";
+import { DEFAULT_ADMIN_ACTION_LABELS } from "../admin/admin-action-confirm-labels.js";
+import { DEFAULT_ADMIN_ACTION_LOG_LABELS } from "../admin/admin-action-log-labels.js";
+import { DEFAULT_TRANSFER_OWNERSHIP_LABELS } from "../admin/transfer-ownership-dialog-labels.js";
+import { DEFAULT_INVITATIONS_LABELS } from "../admin/invitations-panel-labels.js";
 import { DEFAULT_SETTINGS_LABELS } from "../settings/settings-labels.js";
 import { DEFAULT_LANDING_LABELS } from "../landing/landing-labels.js";
 import { DEFAULT_DEMO_LABELS } from "../demo/demo-labels.js";
 import { DEFAULT_BILLING_LABELS } from "../billing/billing-labels.js";
-import { DEFAULT_PLAN_CHANGE_LABELS } from "../admin/plan-change.js";
+import { DEFAULT_PLAN_CHANGE_LABELS } from "../admin/plan-change-labels.js";
 import { DEFAULT_APPEARANCE_LABELS } from "../components/appearance-labels.js";
-import { DEFAULT_ROW_ACTIONS_LABELS } from "../components/row-actions.js";
-import { DEFAULT_APP_SHELL_MORE_LABELS } from "../shell/app-shell.js";
-import { DEFAULT_ACCOUNT_STATE_LABELS } from "../components/account-chips.js";
-import { DEFAULT_SHARE_CARD_LABELS } from "../components/share-card.js";
-import { DEFAULT_REAUTH_DIALOG_LABELS } from "../components/reauth-dialog.js";
-import { DEFAULT_SERVER_WAKE_LABELS } from "../components/server-wake.js";
+import { DEFAULT_ROW_ACTIONS_LABELS } from "../components/row-actions-labels.js";
+import { DEFAULT_APP_SHELL_MORE_LABELS } from "../shell/app-shell-labels.js";
+import { DEFAULT_ACCOUNT_STATE_LABELS } from "../components/account-chips-labels.js";
+import { DEFAULT_SHARE_CARD_LABELS } from "../components/share-card-labels.js";
+import { DEFAULT_REAUTH_DIALOG_LABELS } from "../components/reauth-dialog-labels.js";
+import { DEFAULT_SERVER_WAKE_LABELS } from "../components/server-wake-labels.js";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS } from "../components/translation-review-labels.js";
-import { DEFAULT_COUNTRY_SELECT_LABELS } from "../components/country-select.js";
-import { DEFAULT_INLINE_EDIT_LABELS } from "../components/inline-edit-field.js";
-import { DEFAULT_IBAN_INPUT_LABELS } from "../components/iban-input.js";
-import { DEFAULT_PHONE_INPUT_LABELS } from "../components/phone-input.js";
-import { DEFAULT_SIGN_CHIP_LABELS } from "../components/sign-chip.js";
-import { DEFAULT_COLUMN_MAPPER_LABELS } from "../components/column-mapper.js";
+import { DEFAULT_COUNTRY_SELECT_LABELS } from "../components/country-select-labels.js";
+import { DEFAULT_INLINE_EDIT_LABELS } from "../components/inline-edit-field-labels.js";
+import { DEFAULT_IBAN_INPUT_LABELS } from "../components/iban-input-labels.js";
+import { DEFAULT_PHONE_INPUT_LABELS } from "../components/phone-input-labels.js";
+import { DEFAULT_SIGN_CHIP_LABELS } from "../components/sign-chip-labels.js";
+import { DEFAULT_COLUMN_MAPPER_LABELS } from "../components/column-mapper-labels.js";
 import {
   DEFAULT_APP_SHELL_LABELS,
   DEFAULT_CALCULATOR_LABELS,
@@ -113,7 +113,7 @@ import {
   DEFAULT_PICKER_SHEET_LABELS,
   DEFAULT_SWIPEABLE_ROW_LABELS,
   DEFAULT_TOP_BAR_LABELS
-} from "./kit-labels.js";
+} from "./shared-labels.js";
 const DEFAULT_UI_KIT_LABELS = {
   common: DEFAULT_COMMON_LABELS,
   dataTable: DEFAULT_DATA_TABLE_LABELS,