@eifi1/ui-kit 0.33.1 → 0.34.0

package/dist/settings/use-settings-focus.d.ts

@@ -5,9 +5,9 @@
  * flash: the destructive cards already own a background tint, and a ring reads the same
  * on every card.
  */
-declare const SETTINGS_FOCUS_RING: string[];
+export declare const SETTINGS_FOCUS_RING: string[];
 /** How long the ring stays (§3.5). */
-declare const SETTINGS_FOCUS_MS = 1800;
+export declare const SETTINGS_FOCUS_MS = 1800;
 /**
  * `?focus=<anchor>` (docs/settings-harmonization.md §3.5): scroll the card into view, ring
  * it for 1.8 s, move focus to its heading for a screen reader, then remove `focus` — and
@@ -29,6 +29,4 @@ declare const SETTINGS_FOCUS_MS = 1800;
  * data) is waited for, for a few seconds, before the hook gives up and leaves the URL
  * as it is.
  */
-declare function useSettingsFocus(anchor?: string | null): void;
-
-export { SETTINGS_FOCUS_MS, SETTINGS_FOCUS_RING, useSettingsFocus };
+export declare function useSettingsFocus(anchor?: string | null): void;

package/dist/settings/use-settings-focus.js

@@ -1,13 +1,11 @@
 "use client";
 import { useEffect, useRef } from "react";
 import { useLocation, useNavigate } from "react-router";
-const SETTINGS_FOCUS_RING = ["ring-2", "ring-[var(--brand)]", "ring-offset-2", "ring-offset-[var(--bg-page)]"];
+import { prefersReducedMotion } from "../lib/reduced-motion.js";
+const SETTINGS_FOCUS_RING = ["ring-2", "ring-brand", "ring-offset-2", "ring-offset-page"];
 const SETTINGS_FOCUS_MS = 1800;
 const WAIT_MS = 5e3;
 const HEADING = "[data-settings-heading], h1, h2, h3, h4, h5, h6";
-function prefersReducedMotion() {
-  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
 function useSettingsFocus(anchor) {
   const location = useLocation();
   const navigate = useNavigate();

package/dist/settings/use-settings-focus.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/settings/use-settings-focus.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useLocation, useNavigate } from \"react-router\";\n\n/**\n * The ring a `?focus=` target wears for {@link SETTINGS_FOCUS_MS} — keksdose's\n * `HIGHLIGHT`, in tokens: `--brand` for the ring and the page's own surface for the gap,\n * where keksdose named a slate for the dark theme. A ring rather than a background\n * flash: the destructive cards already own a background tint, and a ring reads the same\n * on every card.\n */\nexport const SETTINGS_FOCUS_RING = [\"ring-2\", \"ring-[var(--brand)]\", \"ring-offset-2\", \"ring-offset-[var(--bg-page)]\"];\n\n/** How long the ring stays (§3.5). */\nexport const SETTINGS_FOCUS_MS = 1800;\n\n/** How long a target that is not on the page yet (a lazy card, a card waiting for its\n *  data) is waited for before the hook gives up on it. */\nconst WAIT_MS = 5000;\n\nconst HEADING = \"[data-settings-heading], h1, h2, h3, h4, h5, h6\";\n\nfunction prefersReducedMotion(): boolean {\n  return typeof window.matchMedia === \"function\" && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\n/**\n * `?focus=<anchor>` (docs/settings-harmonization.md §3.5): scroll the card into view, ring\n * it for 1.8 s, move focus to its heading for a screen reader, then remove `focus` — and\n * ONLY `focus` — with a replace, so a reload does not ring it again. Every other\n * parameter stays: a tour's `tour` / `tourStep`, the admin roster's filters (dropping URL\n * parts broke keksdose's tours once, dev#495). The hash and `location.state` stay too.\n *\n * A search hit, ⌘K, a tour and a mail link all arrive this way. `SettingsLayout` calls it\n * for its own page; an app's own page can call it with no argument to act on its URL.\n *\n * `anchor`:\n *  - left out: the URL's `focus` parameter;\n *  - a string: that anchor (the layout passes the URL's, once its route is canonical);\n *  - `null`: nothing to do yet — the layout passes it while the address is about to be\n *    replaced, so a removal here cannot undo a redirect there.\n *\n * \"Once its group has rendered\": the effect runs after the commit that mounted the\n * group's cards, so the card is there; a card that mounts later (lazy, or behind its\n * data) is waited for, for a few seconds, before the hook gives up and leaves the URL\n * as it is.\n */\nexport function useSettingsFocus(anchor?: string | null): void {\n  const location = useLocation();\n  const navigate = useNavigate();\n  const target = anchor === undefined ? new URLSearchParams(location.search).get(\"focus\") : anchor;\n  // The ring outlives the effect that drew it: removing `focus` from the URL re-runs the\n  // effect (and cleans it up) at once, and the ring must still stay its 1.8 s.\n  const ring = useRef<{ el: HTMLElement; timer: number } | null>(null);\n\n  useEffect(() => {\n    if (!target) return;\n    const { pathname, search, hash, state } = location;\n\n    const land = (el: HTMLElement) => {\n      el.scrollIntoView?.({ behavior: prefersReducedMotion() ? \"auto\" : \"smooth\", block: \"center\" });\n\n      if (ring.current) {\n        window.clearTimeout(ring.current.timer);\n        ring.current.el.classList.remove(...SETTINGS_FOCUS_RING);\n      }\n      el.classList.add(...SETTINGS_FOCUS_RING);\n      el.setAttribute(\"data-settings-focus\", \"\");\n      const timer = window.setTimeout(() => {\n        el.classList.remove(...SETTINGS_FOCUS_RING);\n        el.removeAttribute(\"data-settings-focus\");\n        if (ring.current?.el === el) ring.current = null;\n      }, SETTINGS_FOCUS_MS);\n      ring.current = { el, timer };\n\n      // The heading, so a screen reader starts at the card's name; the card itself when\n      // it has none. `preventScroll`: the smooth scroll above is already on its way.\n      const heading = el.querySelector<HTMLElement>(HEADING) ?? el;\n      if (!heading.hasAttribute(\"tabindex\")) heading.setAttribute(\"tabindex\", \"-1\");\n      heading.focus({ preventScroll: true });\n\n      const params = new URLSearchParams(search);\n      if (params.get(\"focus\") !== target) return;\n      params.delete(\"focus\");\n      const rest = params.toString();\n      navigate({ pathname, search: rest ? `?${rest}` : \"\", hash }, { replace: true, state });\n    };\n\n    const found = document.getElementById(target);\n    if (found) {\n      land(found);\n      return;\n    }\n    const observer = new MutationObserver(() => {\n      const el = document.getElementById(target);\n      if (!el) return;\n      observer.disconnect();\n      window.clearTimeout(giveUp);\n      land(el);\n    });\n    observer.observe(document.body, { childList: true, subtree: true });\n    const giveUp = window.setTimeout(() => observer.disconnect(), WAIT_MS);\n    return () => {\n      observer.disconnect();\n      window.clearTimeout(giveUp);\n    };\n    // `location`, a new object per navigation: the same hit picked twice is two\n    // navigations, and rings twice.\n  }, [target, location, navigate]);\n\n  useEffect(\n    () => () => {\n      const current = ring.current;\n      if (!current) return;\n      window.clearTimeout(current.timer);\n      current.el.classList.remove(...SETTINGS_FOCUS_RING);\n      current.el.removeAttribute(\"data-settings-focus\");\n    },\n    [],\n  );\n}\n"],"mappings":";AAAA,SAAS,WAAW,cAAc;AAClC,SAAS,aAAa,mBAAmB;AASlC,MAAM,sBAAsB,CAAC,UAAU,uBAAuB,iBAAiB,8BAA8B;AAG7G,MAAM,oBAAoB;AAIjC,MAAM,UAAU;AAEhB,MAAM,UAAU;AAEhB,SAAS,uBAAgC;AACvC,SAAO,OAAO,OAAO,eAAe,cAAc,OAAO,WAAW,kCAAkC,EAAE;AAC1G;AAuBO,SAAS,iBAAiB,QAA8B;AAC7D,QAAM,WAAW,YAAY;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,WAAW,SAAY,IAAI,gBAAgB,SAAS,MAAM,EAAE,IAAI,OAAO,IAAI;AAG1F,QAAM,OAAO,OAAkD,IAAI;AAEnE,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,EAAE,UAAU,QAAQ,MAAM,MAAM,IAAI;AAE1C,UAAM,OAAO,CAAC,OAAoB;AAChC,SAAG,iBAAiB,EAAE,UAAU,qBAAqB,IAAI,SAAS,UAAU,OAAO,SAAS,CAAC;AAE7F,UAAI,KAAK,SAAS;AAChB,eAAO,aAAa,KAAK,QAAQ,KAAK;AACtC,aAAK,QAAQ,GAAG,UAAU,OAAO,GAAG,mBAAmB;AAAA,MACzD;AACA,SAAG,UAAU,IAAI,GAAG,mBAAmB;AACvC,SAAG,aAAa,uBAAuB,EAAE;AACzC,YAAM,QAAQ,OAAO,WAAW,MAAM;AACpC,WAAG,UAAU,OAAO,GAAG,mBAAmB;AAC1C,WAAG,gBAAgB,qBAAqB;AACxC,YAAI,KAAK,SAAS,OAAO,GAAI,MAAK,UAAU;AAAA,MAC9C,GAAG,iBAAiB;AACpB,WAAK,UAAU,EAAE,IAAI,MAAM;AAI3B,YAAM,UAAU,GAAG,cAA2B,OAAO,KAAK;AAC1D,UAAI,CAAC,QAAQ,aAAa,UAAU,EAAG,SAAQ,aAAa,YAAY,IAAI;AAC5E,cAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAErC,YAAM,SAAS,IAAI,gBAAgB,MAAM;AACzC,UAAI,OAAO,IAAI,OAAO,MAAM,OAAQ;AACpC,aAAO,OAAO,OAAO;AACrB,YAAM,OAAO,OAAO,SAAS;AAC7B,eAAS,EAAE,UAAU,QAAQ,OAAO,IAAI,IAAI,KAAK,IAAI,KAAK,GAAG,EAAE,SAAS,MAAM,MAAM,CAAC;AAAA,IACvF;AAEA,UAAM,QAAQ,SAAS,eAAe,MAAM;AAC5C,QAAI,OAAO;AACT,WAAK,KAAK;AACV;AAAA,IACF;AACA,UAAM,WAAW,IAAI,iBAAiB,MAAM;AAC1C,YAAM,KAAK,SAAS,eAAe,MAAM;AACzC,UAAI,CAAC,GAAI;AACT,eAAS,WAAW;AACpB,aAAO,aAAa,MAAM;AAC1B,WAAK,EAAE;AAAA,IACT,CAAC;AACD,aAAS,QAAQ,SAAS,MAAM,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AAClE,UAAM,SAAS,OAAO,WAAW,MAAM,SAAS,WAAW,GAAG,OAAO;AACrE,WAAO,MAAM;AACX,eAAS,WAAW;AACpB,aAAO,aAAa,MAAM;AAAA,IAC5B;AAAA,EAGF,GAAG,CAAC,QAAQ,UAAU,QAAQ,CAAC;AAE/B;AAAA,IACE,MAAM,MAAM;AACV,YAAM,UAAU,KAAK;AACrB,UAAI,CAAC,QAAS;AACd,aAAO,aAAa,QAAQ,KAAK;AACjC,cAAQ,GAAG,UAAU,OAAO,GAAG,mBAAmB;AAClD,cAAQ,GAAG,gBAAgB,qBAAqB;AAAA,IAClD;AAAA,IACA,CAAC;AAAA,EACH;AACF;","names":[]}
+{"version":3,"sources":["../../src/settings/use-settings-focus.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useLocation, useNavigate } from \"react-router\";\nimport { prefersReducedMotion } from \"../lib/reduced-motion\";\n\n/**\n * The ring a `?focus=` target wears for {@link SETTINGS_FOCUS_MS} — keksdose's\n * `HIGHLIGHT`, in tokens: `--brand` for the ring and the page's own surface for the gap,\n * where keksdose named a slate for the dark theme. A ring rather than a background\n * flash: the destructive cards already own a background tint, and a ring reads the same\n * on every card.\n */\nexport const SETTINGS_FOCUS_RING = [\"ring-2\", \"ring-brand\", \"ring-offset-2\", \"ring-offset-page\"];\n\n/** How long the ring stays (§3.5). */\nexport const SETTINGS_FOCUS_MS = 1800;\n\n/** How long a target that is not on the page yet (a lazy card, a card waiting for its\n *  data) is waited for before the hook gives up on it. */\nconst WAIT_MS = 5000;\n\nconst HEADING = \"[data-settings-heading], h1, h2, h3, h4, h5, h6\";\n\n/**\n * `?focus=<anchor>` (docs/settings-harmonization.md §3.5): scroll the card into view, ring\n * it for 1.8 s, move focus to its heading for a screen reader, then remove `focus` — and\n * ONLY `focus` — with a replace, so a reload does not ring it again. Every other\n * parameter stays: a tour's `tour` / `tourStep`, the admin roster's filters (dropping URL\n * parts broke keksdose's tours once, dev#495). The hash and `location.state` stay too.\n *\n * A search hit, ⌘K, a tour and a mail link all arrive this way. `SettingsLayout` calls it\n * for its own page; an app's own page can call it with no argument to act on its URL.\n *\n * `anchor`:\n *  - left out: the URL's `focus` parameter;\n *  - a string: that anchor (the layout passes the URL's, once its route is canonical);\n *  - `null`: nothing to do yet — the layout passes it while the address is about to be\n *    replaced, so a removal here cannot undo a redirect there.\n *\n * \"Once its group has rendered\": the effect runs after the commit that mounted the\n * group's cards, so the card is there; a card that mounts later (lazy, or behind its\n * data) is waited for, for a few seconds, before the hook gives up and leaves the URL\n * as it is.\n */\nexport function useSettingsFocus(anchor?: string | null): void {\n  const location = useLocation();\n  const navigate = useNavigate();\n  const target = anchor === undefined ? new URLSearchParams(location.search).get(\"focus\") : anchor;\n  // The ring outlives the effect that drew it: removing `focus` from the URL re-runs the\n  // effect (and cleans it up) at once, and the ring must still stay its 1.8 s.\n  const ring = useRef<{ el: HTMLElement; timer: number } | null>(null);\n\n  useEffect(() => {\n    if (!target) return;\n    const { pathname, search, hash, state } = location;\n\n    const land = (el: HTMLElement) => {\n      el.scrollIntoView?.({ behavior: prefersReducedMotion() ? \"auto\" : \"smooth\", block: \"center\" });\n\n      if (ring.current) {\n        window.clearTimeout(ring.current.timer);\n        ring.current.el.classList.remove(...SETTINGS_FOCUS_RING);\n      }\n      el.classList.add(...SETTINGS_FOCUS_RING);\n      el.setAttribute(\"data-settings-focus\", \"\");\n      const timer = window.setTimeout(() => {\n        el.classList.remove(...SETTINGS_FOCUS_RING);\n        el.removeAttribute(\"data-settings-focus\");\n        if (ring.current?.el === el) ring.current = null;\n      }, SETTINGS_FOCUS_MS);\n      ring.current = { el, timer };\n\n      // The heading, so a screen reader starts at the card's name; the card itself when\n      // it has none. `preventScroll`: the smooth scroll above is already on its way.\n      const heading = el.querySelector<HTMLElement>(HEADING) ?? el;\n      if (!heading.hasAttribute(\"tabindex\")) heading.setAttribute(\"tabindex\", \"-1\");\n      heading.focus({ preventScroll: true });\n\n      const params = new URLSearchParams(search);\n      if (params.get(\"focus\") !== target) return;\n      params.delete(\"focus\");\n      const rest = params.toString();\n      navigate({ pathname, search: rest ? `?${rest}` : \"\", hash }, { replace: true, state });\n    };\n\n    const found = document.getElementById(target);\n    if (found) {\n      land(found);\n      return;\n    }\n    const observer = new MutationObserver(() => {\n      const el = document.getElementById(target);\n      if (!el) return;\n      observer.disconnect();\n      window.clearTimeout(giveUp);\n      land(el);\n    });\n    observer.observe(document.body, { childList: true, subtree: true });\n    const giveUp = window.setTimeout(() => observer.disconnect(), WAIT_MS);\n    return () => {\n      observer.disconnect();\n      window.clearTimeout(giveUp);\n    };\n    // `location`, a new object per navigation: the same hit picked twice is two\n    // navigations, and rings twice.\n  }, [target, location, navigate]);\n\n  useEffect(\n    () => () => {\n      const current = ring.current;\n      if (!current) return;\n      window.clearTimeout(current.timer);\n      current.el.classList.remove(...SETTINGS_FOCUS_RING);\n      current.el.removeAttribute(\"data-settings-focus\");\n    },\n    [],\n  );\n}\n"],"mappings":";AAAA,SAAS,WAAW,cAAc;AAClC,SAAS,aAAa,mBAAmB;AACzC,SAAS,4BAA4B;AAS9B,MAAM,sBAAsB,CAAC,UAAU,cAAc,iBAAiB,kBAAkB;AAGxF,MAAM,oBAAoB;AAIjC,MAAM,UAAU;AAEhB,MAAM,UAAU;AAuBT,SAAS,iBAAiB,QAA8B;AAC7D,QAAM,WAAW,YAAY;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,WAAW,SAAY,IAAI,gBAAgB,SAAS,MAAM,EAAE,IAAI,OAAO,IAAI;AAG1F,QAAM,OAAO,OAAkD,IAAI;AAEnE,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,EAAE,UAAU,QAAQ,MAAM,MAAM,IAAI;AAE1C,UAAM,OAAO,CAAC,OAAoB;AAChC,SAAG,iBAAiB,EAAE,UAAU,qBAAqB,IAAI,SAAS,UAAU,OAAO,SAAS,CAAC;AAE7F,UAAI,KAAK,SAAS;AAChB,eAAO,aAAa,KAAK,QAAQ,KAAK;AACtC,aAAK,QAAQ,GAAG,UAAU,OAAO,GAAG,mBAAmB;AAAA,MACzD;AACA,SAAG,UAAU,IAAI,GAAG,mBAAmB;AACvC,SAAG,aAAa,uBAAuB,EAAE;AACzC,YAAM,QAAQ,OAAO,WAAW,MAAM;AACpC,WAAG,UAAU,OAAO,GAAG,mBAAmB;AAC1C,WAAG,gBAAgB,qBAAqB;AACxC,YAAI,KAAK,SAAS,OAAO,GAAI,MAAK,UAAU;AAAA,MAC9C,GAAG,iBAAiB;AACpB,WAAK,UAAU,EAAE,IAAI,MAAM;AAI3B,YAAM,UAAU,GAAG,cAA2B,OAAO,KAAK;AAC1D,UAAI,CAAC,QAAQ,aAAa,UAAU,EAAG,SAAQ,aAAa,YAAY,IAAI;AAC5E,cAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAErC,YAAM,SAAS,IAAI,gBAAgB,MAAM;AACzC,UAAI,OAAO,IAAI,OAAO,MAAM,OAAQ;AACpC,aAAO,OAAO,OAAO;AACrB,YAAM,OAAO,OAAO,SAAS;AAC7B,eAAS,EAAE,UAAU,QAAQ,OAAO,IAAI,IAAI,KAAK,IAAI,KAAK,GAAG,EAAE,SAAS,MAAM,MAAM,CAAC;AAAA,IACvF;AAEA,UAAM,QAAQ,SAAS,eAAe,MAAM;AAC5C,QAAI,OAAO;AACT,WAAK,KAAK;AACV;AAAA,IACF;AACA,UAAM,WAAW,IAAI,iBAAiB,MAAM;AAC1C,YAAM,KAAK,SAAS,eAAe,MAAM;AACzC,UAAI,CAAC,GAAI;AACT,eAAS,WAAW;AACpB,aAAO,aAAa,MAAM;AAC1B,WAAK,EAAE;AAAA,IACT,CAAC;AACD,aAAS,QAAQ,SAAS,MAAM,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AAClE,UAAM,SAAS,OAAO,WAAW,MAAM,SAAS,WAAW,GAAG,OAAO;AACrE,WAAO,MAAM;AACX,eAAS,WAAW;AACpB,aAAO,aAAa,MAAM;AAAA,IAC5B;AAAA,EAGF,GAAG,CAAC,QAAQ,UAAU,QAAQ,CAAC;AAE/B;AAAA,IACE,MAAM,MAAM;AACV,YAAM,UAAU,KAAK;AACrB,UAAI,CAAC,QAAS;AACd,aAAO,aAAa,QAAQ,KAAK;AACjC,cAAQ,GAAG,UAAU,OAAO,GAAG,mBAAmB;AAClD,cAAQ,GAAG,gBAAgB,qBAAqB;AAAA,IAClD;AAAA,IACA,CAAC;AAAA,EACH;AACF;","names":[]}

package/dist/settings/use-settings-route.d.ts

@@ -1,14 +1,11 @@
-import { SettingsGroup, SettingsEntry } from './settings-catalogue.js';
-import 'react';
-import '../search/search-index.js';
-
+import type { SettingsEntry, SettingsGroup } from "./settings-catalogue.js";
 /**
  * Which layout the settings page is in. `"auto"` follows the screen (`usePhoneLayout()`,
  * as `Tabs` does); `"desktop"` / `"phone"` pin one — for a preview of both side by side,
  * where the window is one width.
  */
-type SettingsLayoutMode = "auto" | "desktop" | "phone";
-interface UseSettingsRouteOptions<G extends string> {
+export type SettingsLayoutMode = "auto" | "desktop" | "phone";
+export interface UseSettingsRouteOptions<G extends string> {
     groups: readonly SettingsGroup<G>[];
     /** The catalogue's entries. Given, a group with no visible entry is hidden (§4.1), and
      *  `/settings?focus=<anchor>` finds the anchor's group. */
@@ -23,7 +20,7 @@ interface UseSettingsRouteOptions<G extends string> {
     /** See {@link SettingsLayoutMode}. Default `"auto"`. */
     layout?: SettingsLayoutMode;
 }
-interface SettingsRoute<G extends string> {
+export interface SettingsRoute<G extends string> {
     /** The group on screen. `null` on a phone's list (and while there is no visible group). */
     group: G | null;
     /** The segment after the group, owned by a card; `null` without one. */
@@ -56,16 +53,16 @@ interface SettingsRoute<G extends string> {
  * the phone list's links and {@link SettingsRoute.select}; carried over by every replace
  * the page makes, since a replace does not change what came before.
  */
-declare const SETTINGS_FROM_LIST_STATE = "eifi1.settings.fromList";
+export declare const SETTINGS_FROM_LIST_STATE = "eifi1.settings.fromList";
 /** `location.state` with the marker set — for an app's own link to a group page that is
  *  opened FROM the list it renders. */
-declare function settingsFromListState(): Record<string, true>;
-interface SettingsLocation {
+export declare function settingsFromListState(): Record<string, true>;
+export interface SettingsLocation {
     pathname: string;
     search: string;
     hash: string;
 }
-interface SettingsLocationRules<G extends string> {
+export interface SettingsLocationRules<G extends string> {
     basePath: string;
     /** The visible group ids. */
     groups: readonly G[];
@@ -76,7 +73,7 @@ interface SettingsLocationRules<G extends string> {
     anchorGroup?: ReadonlyMap<string, G>;
     phone: boolean;
 }
-interface SettingsLocationResult<G extends string> {
+export interface SettingsLocationResult<G extends string> {
     group: G | null;
     sub: string | null;
     /** The path (with query) to replace the location with, or `null` when it is already
@@ -97,7 +94,7 @@ interface SettingsLocationResult<G extends string> {
  *    `tour`/`tourStep` as well as `focus`), then resolved by the rules above;
  *  - `/settings?focus=<anchor>` with no group → the anchor's group, where it can ring.
  */
-declare function resolveSettingsLocation<G extends string>(location: SettingsLocation, rules: SettingsLocationRules<G>): SettingsLocationResult<G>;
+export declare function resolveSettingsLocation<G extends string>(location: SettingsLocation, rules: SettingsLocationRules<G>): SettingsLocationResult<G>;
 /**
  * The settings page's route (docs/settings-harmonization.md §3.1): which group the URL
  * names, and the history rules for moving between groups.
@@ -113,6 +110,4 @@ declare function resolveSettingsLocation<G extends string>(location: SettingsLoc
  * reload — so a legacy `/settings#security` arriving while the page is open converts too
  * (§10.1).
  */
-declare function useSettingsRoute<G extends string>(options: UseSettingsRouteOptions<G>): SettingsRoute<G>;
-
-export { SETTINGS_FROM_LIST_STATE, type SettingsLayoutMode, type SettingsLocation, type SettingsLocationResult, type SettingsLocationRules, type SettingsRoute, type UseSettingsRouteOptions, resolveSettingsLocation, settingsFromListState, useSettingsRoute };
+export declare function useSettingsRoute<G extends string>(options: UseSettingsRouteOptions<G>): SettingsRoute<G>;

package/dist/shell/app-shell-labels.d.ts

@@ -0,0 +1,2 @@
+import type { AppShellMoreLabels } from "./app-shell.js";
+export declare const DEFAULT_APP_SHELL_MORE_LABELS: AppShellMoreLabels;

package/dist/shell/app-shell-labels.js

@@ -0,0 +1,9 @@
+"use client";
+const DEFAULT_APP_SHELL_MORE_LABELS = {
+  more: "More",
+  moreTitle: "More pages"
+};
+export {
+  DEFAULT_APP_SHELL_MORE_LABELS
+};
+//# sourceMappingURL=app-shell-labels.js.map

package/dist/shell/app-shell-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/app-shell-labels.ts"],"sourcesContent":["// The English words of ./app-shell, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./app-shell re-exports them.\n\nimport type { AppShellMoreLabels } from \"./app-shell\";\n\nexport const DEFAULT_APP_SHELL_MORE_LABELS: AppShellMoreLabels = {\n  more: \"More\",\n  moreTitle: \"More pages\",\n};\n"],"mappings":";AAMO,MAAM,gCAAoD;AAAA,EAC/D,MAAM;AAAA,EACN,WAAW;AACb;","names":[]}

package/dist/shell/app-shell.d.ts

@@ -1,101 +1,216 @@
-import 'react';
-import 'lucide-react';
-import '../theme/text-size.js';
-export { bA as AppShell, bC as AppShellMoreLabels, bD as AppShellNavItem, bE as AppShellProps, bF as AppShellSidebarFooterItem, bG as AppShellSubItem, co as DEFAULT_APP_SHELL_MORE_LABELS, cG as DEFAULT_MOBILE_BAR_MAX, ga as splitMobileBar } from '../delete-account-setting-DAgGBrbn.js';
-import 'zustand/middleware';
-import 'zustand';
-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 '../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 './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 './topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-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 './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 '../i18n/plurals.js';
-import '../components/appearance-labels.js';
-import '../theme/contrast.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 { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import type { LucideIcon } from "lucide-react";
+import type { TextSize } from "../theme/text-size.js";
+import type { KitLinkComponent } from "../i18n/kit-labels.js";
+import { DEFAULT_APP_SHELL_MORE_LABELS } from "./app-shell-labels.js";
+export interface AppShellSubItem {
+    to: string;
+    label: string;
+    icon: LucideIcon;
+    /** Passed to NavLink's `end` (exact match). Defaults to true. */
+    end?: boolean;
+}
+export interface AppShellNavItem {
+    to: string;
+    label: string;
+    /** Optional shorter label for the MOBILE BOTTOM BAR only (the sidebar, its
+     *  tooltips and any palette built on this list keep `label`).
+     *
+     *  The bar divides the viewport into `nav.length` equal cells, so a label's room
+     *  shrinks with every entry added — at six entries on a 406 px phone that is ~67 px,
+     *  and "Import & Export" wrapped to two lines and pushed the row taller than its
+     *  neighbours (keksdose feedback live #210). A per-item override is better than
+     *  shortening the real label, which the sidebar has ample room for and which is the
+     *  name the rest of the product uses. */
+    shortLabel?: string;
+    /** 0.31.0: leave this entry out of the MOBILE BOTTOM BAR; the sidebar keeps it.
+     *  For an entry a phone reaches another way — the brand link to the start page —
+     *  when one cell fewer is what keeps the others' labels whole (the bar divides its
+     *  width evenly, see `shortLabel`). Its group's sub-row still shows while one of its
+     *  pages is open. Named like `DataTable`'s column `mobileHidden`. */
+    mobileHidden?: boolean;
+    icon: LucideIcon;
+    /** Passed to NavLink's `end` (exact match). Defaults to true. */
+    end?: boolean;
+    /** Optional `data-tour` value rendered on this item's link (both the desktop
+     *  sidebar and the mobile bottom bar), so a guided tour can spotlight ONE nav
+     *  entry precisely instead of matching by href (feedback #338). */
+    dataTour?: string;
+    /** Optional sub-items. When present, hovering (or focusing) the item opens a
+     *  flyout to the right of the sidebar with a header (this item's label) and the
+     *  sub-items as icon + title links. Works collapsed or expanded; the mobile
+     *  bottom bar ignores sub-items and links to `to`. */
+    items?: AppShellSubItem[];
+}
+/**
+ * One entry of the sidebar's bottom area ({@link AppShellProps.sidebarFooterItems}) —
+ * the version link and the legal links kastlan hand-built in `sidebarFooter`.
+ *
+ * - `link` (default): one link. Expanded it shows `icon` + `text` (default `label`),
+ *   with `hint` as a tooltip if given; collapsed it is the icon alone, named and
+ *   tooltipped by `label`.
+ * - `links`: a small group — the legal links. Expanded, a `<nav>` named `label` holding
+ *   the links as a wrapping row of small text; collapsed, ONE icon link to `to` (default
+ *   the first link's), named and tooltipped by `label`, since a column of icons for
+ *   "Imprint", "Privacy" and "Terms" would say nothing an icon can.
+ */
+export type AppShellSidebarFooterItem = {
+    kind?: "link";
+    key: string;
+    to: string;
+    icon: LucideIcon;
+    /** The link's name, and the tooltip when collapsed ("What's new · v1.4.0"). */
+    label: string;
+    /** Visible text when expanded ("Kastlan v1.4.0"). Default `label`. */
+    text?: ReactNode;
+    /** A tooltip on the expanded link ("What's new"). */
+    hint?: string;
+    /** Leaves the app: a plain `<a target="_blank" rel="noopener noreferrer">`. */
+    external?: boolean;
+} | {
+    kind: "links";
+    key: string;
+    icon: LucideIcon;
+    /** The group's name — its `<nav>` label, and the collapsed icon's name ("Legal"). */
+    label: string;
+    /** The collapsed icon's target. Default the first link's `to`. */
+    to?: string;
+    links: {
+        to: string;
+        label: string;
+        external?: boolean;
+    }[];
+};
+/**
+ * The words of the phone bar's "More" cell and its sheet (0.32,
+ * docs/text-size-harmonization.md §4 Navigation, §10.7) — the `appShellMore` namespace of
+ * `<UiKitProvider labels>`, overridable per shell through `moreLabels`.
+ */
+export interface AppShellMoreLabels {
+    /** The cell's visible label, under its icon — one short word. */
+    more: string;
+    /** The sheet's heading, and so its accessible name. */
+    moreTitle: string;
+}
+export { DEFAULT_APP_SHELL_MORE_LABELS };
+/**
+ * The most entries the phone bar shows before the rest go under "More", per text size
+ * (§10.7): every entry at Normal, four at Large, three at Extra large. A fifth of a
+ * 360 px phone at 150 % is 48 px of Normal-sized room, and the cells hold a word each.
+ */
+export declare const DEFAULT_MOBILE_BAR_MAX: Readonly<Record<TextSize, number>>;
+/**
+ * Split the bar's entries into the cells shown and the ones under "More", in the app's
+ * order (§10.7: the app puts its four most used first, or orders by role). One hidden
+ * entry is no saving — the More cell would take its place — so the bar then shows them
+ * all: the cell count is the same either way, and a real entry beats a detour.
+ */
+export declare function splitMobileBar<T>(entries: readonly T[], max: number): {
+    shown: T[];
+    hidden: T[];
+};
+/**
+ * Exported and `<div>`-shaped. This is the outermost element of every consuming app, so
+ * there is nothing above it to hang an id, a landmark label or a `data-tour` anchor on —
+ * and nothing a consumer can wrap it in either, since the root owns the `h-dvh` and
+ * `overflow-hidden` the whole layout is built on (audit §api-design).
+ */
+export interface AppShellProps extends ComponentPropsWithoutRef<"div"> {
+    /** Navigation entries — shared by the desktop sidebar and mobile bottom bar. */
+    nav: AppShellNavItem[];
+    /** The composed top bar (e.g. the shared TopBar with app-owned actions). */
+    topBar: ReactNode;
+    /** Main content — typically the router `<Outlet />`. */
+    children: ReactNode;
+    /** Desktop-only footer rendered below the content (hidden on mobile). */
+    footer?: ReactNode;
+    /** Extra sidebar content above the collapse toggle (e.g. a version link).
+     *  Receives the collapsed state so it can render compact vs. full. */
+    sidebarFooter?: (collapsed: boolean) => ReactNode;
+    /** The sidebar's bottom area as data — a version link, the legal links — drawn full
+     *  when expanded and as icon + tooltip when collapsed. Rendered above
+     *  `sidebarFooter`, which stays for anything the data cannot describe. */
+    sidebarFooterItems?: AppShellSidebarFooterItem[];
+    /** The router link for `sidebarFooterItems`. Default: the provider's
+     *  `linkComponent`, else react-router's `Link`. */
+    renderLink?: KitLinkComponent;
+    /** localStorage key for the persisted collapse state. */
+    collapseStorageKey?: string;
+    /** Default: `appShell.collapse` from the {@link UiKitProvider}, else English. */
+    collapseLabel?: string;
+    /** Default: `appShell.expand` from the {@link UiKitProvider}, else English. */
+    expandLabel?: string;
+    /** How an entry's `items` are revealed in the EXPANDED desktop sidebar.
+     *
+     *  - `"flyout"` (default) — a panel beside the sidebar on hover/focus. Compact: the
+     *    sidebar stays one row per group however many pages a group holds.
+     *  - `"inline"` — a disclosure under the entry, the pattern of MUI's nested List and
+     *    most documentation sites. Every page is visible at once, and the group holding
+     *    the current page opens on its own, so the reader can see where they are without
+     *    hovering anything.
+     *
+     *  The icon-only (collapsed) sidebar always uses the flyout: an indented list has no
+     *  room there. The mobile bottom bar ignores `items` in both modes. */
+    subNav?: "flyout" | "inline";
+    /** Accessible name of the inline disclosure button, given the group's label.
+     *  Only used with `subNav="inline"`. Its expanded state is carried by
+     *  `aria-expanded`, so one wording serves both directions. Default:
+     *  `appShell.toggleGroup` from the {@link UiKitProvider}, else English. */
+    toggleGroupLabel?: (groupLabel: string) => string;
+    /** Below `md`: show the current group's `items` as a scrollable row above the
+     *  bottom bar — the phone's counterpart of the sidebar's second level. Default true;
+     *  `false` keeps the single bar, where a group entry only links to its own `to`. */
+    mobileSubNav?: boolean;
+    /**
+     * How the phone sub-nav lays out a group with more pages than fit on one row.
+     * `"wrap"`: every page in view, on as many rows as it takes — the bar grows.
+     * `"scroll"`: one row that scrolls sideways, faded at a cut edge, with the current
+     * page scrolled into view. A long group took four rows (~130px) of a 390px screen
+     * above the bottom bar (showcase audit); scrolling gives that back at the price of
+     * pages hidden past the edge, so it is the app's call, per shell.
+     *
+     * Unset (0.32.2, kastlan's 0.32.1 report): `"wrap"` at Normal and `"scroll"` at Large
+     * and Extra large, where a wrapped group of eight pages took six or seven rows and
+     * covered the page — the other half of what `mobileBarMax` does for the bar.
+     */
+    mobileSubNavLayout?: "wrap" | "scroll";
+    /**
+     * The most entries the phone bar shows; the rest move into a "More" cell that opens a
+     * sheet listing them, each group with its pages (0.32, docs/text-size-harmonization.md
+     * §4, §10.7). The bar takes `nav` in the app's order — after `mobileHidden` — so the
+     * app puts its most used entries first (or orders by role: kastlan's manager and
+     * accountant see different firsts).
+     *
+     * Default {@link DEFAULT_MOBILE_BAR_MAX}: unlimited at Normal, 4 at Large, 3 at Extra
+     * large, because the cells' words grow with the text and the phone does not. A number
+     * replaces the default at every size; `{ large: 5 }` replaces it at one size only.
+     * Never fewer than one entry; and one entry over the limit shows in full rather than
+     * behind a More that would take the same cell.
+     */
+    mobileBarMax?: number | Partial<Record<TextSize, number>>;
+    /** The More cell's words over the provider's `appShellMore`. */
+    moreLabels?: Partial<AppShellMoreLabels>;
+    /**
+     * Lay the shell out inside its PARENT'S box instead of the viewport: `h-full` rather
+     * than `h-dvh`, its own scroll container at every width, a bottom bar pinned to the
+     * shell rather than the window, `--app-nav-h` published on the shell alone, and no
+     * persisted collapse state unless `collapseStorageKey` is passed. For an app preview,
+     * a device frame, a docs example.
+     *
+     * Implied for a shell rendered inside another AppShell, which is the case this
+     * exists for: the inner one used to publish its own nav height on `<html>`, fight
+     * the outer one over it, and remove it on unmount from under the outer app.
+     */
+    embedded?: boolean;
+    /** The shell's root, where the rest of the props go (0.34, API-2, refactor audit
+     *  2026-10) — merged with its own ref, which `--app-nav-h` is published on. */
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The responsive application shell: a top bar, a collapsible desktop sidebar
+ * (icon-only when collapsed, with tooltips), a mobile bottom nav bar, the main
+ * content area, and an optional desktop footer. Router-aware via react-router
+ * `NavLink`; domain-free — nav items, brand, footer and the top bar's actions
+ * are all supplied by the app.
+ */
+export declare function AppShell({ nav, topBar, children, footer, sidebarFooter, sidebarFooterItems, renderLink, collapseStorageKey: collapseStorageKeyProp, collapseLabel, expandLabel, subNav, mobileSubNav, mobileSubNavLayout: mobileSubNavLayoutProp, mobileBarMax, moreLabels, toggleGroupLabel, embedded: embeddedProp, className, ref, ...rest }: AppShellProps): import("react").JSX.Element;