@eifi1/ui-kit 0.31.1 → 0.32.1

package/dist/settings/settings-section.d.ts

@@ -1,17 +1,19 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { bZ as CardTone } from '../delete-account-setting-CpIhzxxZ.js';
+import { c4 as CardTone } from '../delete-account-setting-FLyJf-kZ.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-DUELeXpa.js';
+import '../data-table-labels-kpAAVi6g.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
 import '../components/mini-calendar.js';
 import '../components/calendar-heatmap.js';
 import '../components/popover.js';
+import '../hooks/use-breakpoint.js';
 import '../components/chip.js';
 import 'lucide-react';
+import '../components/field-parts.js';
 import '../components/field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -80,6 +82,9 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import './settings-labels.js';
 import '../demo/demo-labels.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';
@@ -93,7 +98,7 @@ import '../components/sign-chip.js';
 import '../components/column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import '../components/field-parts.js';
+import '../components/focus-ring.js';
 
 interface SettingsSectionProps extends Omit<ComponentPropsWithoutRef<"div">, "title" | "id"> {
     /** The card's DOM id — the catalogue entry's `anchor`, the `?focus=` target. */

package/dist/settings/use-account-appearance.d.ts

@@ -0,0 +1,92 @@
+import { TextSize } from '../theme/text-size.js';
+import { ContrastMode } from '../theme/contrast.js';
+import 'zustand/middleware';
+import 'zustand';
+
+/**
+ * The text size and contrast follow the account like the language does
+ * (docs/text-size-harmonization.md §2.2, §2.6, §6; settings contract §6.2) — the same
+ * rule as {@link useAccountLanguage}, for two values at once.
+ */
+/** Where a value in force came from, in the order they are asked. */
+type AppearanceSource = "device" | "account" | "default";
+/** The two fields of an `/auth/me` answer this reads — server-kit 0.6's `UserResponse`,
+ *  both nullable (null = never chosen). */
+interface AccountAppearanceFields {
+    text_size?: string | null;
+    contrast?: string | null;
+}
+/** This device's own choices — the text-size and contrast stores' values, `null` where
+ *  this device never chose. */
+interface DeviceAppearance {
+    textSize?: string | null;
+    contrast?: string | null;
+}
+/** The body of `PATCH /auth/me` for a pick: one field, as server-kit's `ProfileUpdate`
+ *  spells it. */
+type AccountAppearancePatch = {
+    text_size: TextSize;
+} | {
+    contrast: ContrastMode;
+};
+interface ResolvedAccountAppearance {
+    textSize: TextSize;
+    /** The stored MODE — "system" included — not whether more contrast is on now. */
+    contrast: ContrastMode;
+    sources: {
+        textSize: AppearanceSource;
+        contrast: AppearanceSource;
+    };
+}
+/**
+ * The values on a device (§2.6): **its own choice → the account's → the default**
+ * (Normal; "system" for contrast), each taken only when it is a known value. Pure.
+ */
+declare function resolveAccountAppearance(device: DeviceAppearance, account: AccountAppearanceFields | null | undefined): ResolvedAccountAppearance;
+interface UseAccountAppearanceOptions {
+    /** The signed-in account (`/auth/me`), or `null` / `undefined` while signed out or not
+     *  loaded yet — then nothing is saved to it. */
+    account: AccountAppearanceFields | null | undefined;
+    /** This device's own choices: `useTextSizeStore((s) => s.size)` and
+     *  `useContrastStore((s) => s.contrast)`. */
+    device: DeviceAppearance;
+    /** Store a device choice: `(patch) => { if (patch.textSize) setSize(patch.textSize);
+     *  if (patch.contrast) setContrast(patch.contrast); }`. */
+    setDevice: (patch: {
+        textSize?: TextSize;
+        contrast?: ContrastMode;
+    }) => void;
+    /** Write the account: `PATCH /auth/me` with the patch as its body. Return its promise. */
+    save: (patch: AccountAppearancePatch) => unknown;
+    /** A demo session: a pick stays on the device, the account is never written (§6). */
+    isDemo?: boolean;
+}
+interface AccountAppearance extends ResolvedAccountAppearance {
+    /** The user picked a size: it becomes the device's choice and — signed in, and not a
+     *  demo — the account's. The promise is `save`'s; the device keeps the pick if it
+     *  fails, and the app says so (`appearance.saveFailed`, 0.32.1). */
+    pickTextSize: (size: TextSize) => Promise<unknown>;
+    /** As {@link pickTextSize}, for the contrast mode. */
+    pickContrast: (mode: ContrastMode) => Promise<unknown>;
+}
+/**
+ * The account's text size and contrast on this device (§6): the order of
+ * {@link resolveAccountAppearance}, and the writes.
+ *
+ * - **Nothing writes the account on its own.** Rendering, signing in and adopting the
+ *   account's values call neither `save` nor `setDevice`, so a new device adopts the
+ *   account instead of overwriting it.
+ * - **A pick** writes the device's choice, then `save` — except in a demo session or
+ *   signed out.
+ *
+ * The hook only answers. The values are put in force by the stores' apply hooks, which
+ * resolve the same order from the same inputs:
+ *
+ * ```tsx
+ * useApplyTextSize({ account: me?.text_size });
+ * useApplyContrast({ account: me?.contrast });
+ * ```
+ */
+declare function useAccountAppearance(options: UseAccountAppearanceOptions): AccountAppearance;
+
+export { type AccountAppearance, type AccountAppearanceFields, type AccountAppearancePatch, type AppearanceSource, type DeviceAppearance, type ResolvedAccountAppearance, type UseAccountAppearanceOptions, resolveAccountAppearance, useAccountAppearance };

package/dist/settings/use-account-appearance.js

@@ -0,0 +1,63 @@
+"use client";
+import { useCallback, useMemo } from "react";
+import { isTextSize, resolveTextSize } from "../theme/text-size.js";
+import { isContrastMode, resolveContrastMode } from "../theme/contrast.js";
+function source(device, account) {
+  return device ? "device" : account ? "account" : "default";
+}
+function resolveAccountAppearance(device, account) {
+  return {
+    textSize: resolveTextSize(device.textSize, account?.text_size),
+    contrast: resolveContrastMode(device.contrast, account?.contrast),
+    sources: {
+      textSize: source(isTextSize(device.textSize), isTextSize(account?.text_size)),
+      contrast: source(isContrastMode(device.contrast), isContrastMode(account?.contrast))
+    }
+  };
+}
+function useAccountAppearance(options) {
+  const { account, device, setDevice, save, isDemo = false } = options;
+  const deviceTextSize = device.textSize;
+  const deviceContrast = device.contrast;
+  const accountTextSize = account?.text_size;
+  const accountContrast = account?.contrast;
+  const signedIn = account !== null && account !== void 0;
+  const resolved = useMemo(
+    () => resolveAccountAppearance(
+      { textSize: deviceTextSize, contrast: deviceContrast },
+      signedIn ? { text_size: accountTextSize, contrast: accountContrast } : void 0
+    ),
+    [deviceTextSize, deviceContrast, signedIn, accountTextSize, accountContrast]
+  );
+  const write = useCallback(
+    (patch) => {
+      if (isDemo || !signedIn) return Promise.resolve();
+      try {
+        return Promise.resolve(save(patch));
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    },
+    [save, isDemo, signedIn]
+  );
+  const pickTextSize = useCallback(
+    (size) => {
+      setDevice({ textSize: size });
+      return write({ text_size: size });
+    },
+    [setDevice, write]
+  );
+  const pickContrast = useCallback(
+    (mode) => {
+      setDevice({ contrast: mode });
+      return write({ contrast: mode });
+    },
+    [setDevice, write]
+  );
+  return { ...resolved, pickTextSize, pickContrast };
+}
+export {
+  resolveAccountAppearance,
+  useAccountAppearance
+};
+//# sourceMappingURL=use-account-appearance.js.map

package/dist/settings/use-account-appearance.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/settings/use-account-appearance.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { isTextSize, resolveTextSize } from \"../theme/text-size\";\nimport type { TextSize } from \"../theme/text-size\";\nimport { isContrastMode, resolveContrastMode } from \"../theme/contrast\";\nimport type { ContrastMode } from \"../theme/contrast\";\n\n/**\n * The text size and contrast follow the account like the language does\n * (docs/text-size-harmonization.md §2.2, §2.6, §6; settings contract §6.2) — the same\n * rule as {@link useAccountLanguage}, for two values at once.\n */\n\n/** Where a value in force came from, in the order they are asked. */\nexport type AppearanceSource = \"device\" | \"account\" | \"default\";\n\n/** The two fields of an `/auth/me` answer this reads — server-kit 0.6's `UserResponse`,\n *  both nullable (null = never chosen). */\nexport interface AccountAppearanceFields {\n  text_size?: string | null;\n  contrast?: string | null;\n}\n\n/** This device's own choices — the text-size and contrast stores' values, `null` where\n *  this device never chose. */\nexport interface DeviceAppearance {\n  textSize?: string | null;\n  contrast?: string | null;\n}\n\n/** The body of `PATCH /auth/me` for a pick: one field, as server-kit's `ProfileUpdate`\n *  spells it. */\nexport type AccountAppearancePatch = { text_size: TextSize } | { contrast: ContrastMode };\n\nexport interface ResolvedAccountAppearance {\n  textSize: TextSize;\n  /** The stored MODE — \"system\" included — not whether more contrast is on now. */\n  contrast: ContrastMode;\n  sources: { textSize: AppearanceSource; contrast: AppearanceSource };\n}\n\nfunction source(device: boolean, account: boolean): AppearanceSource {\n  return device ? \"device\" : account ? \"account\" : \"default\";\n}\n\n/**\n * The values on a device (§2.6): **its own choice → the account's → the default**\n * (Normal; \"system\" for contrast), each taken only when it is a known value. Pure.\n */\nexport function resolveAccountAppearance(\n  device: DeviceAppearance,\n  account: AccountAppearanceFields | null | undefined,\n): ResolvedAccountAppearance {\n  return {\n    textSize: resolveTextSize(device.textSize, account?.text_size),\n    contrast: resolveContrastMode(device.contrast, account?.contrast),\n    sources: {\n      textSize: source(isTextSize(device.textSize), isTextSize(account?.text_size)),\n      contrast: source(isContrastMode(device.contrast), isContrastMode(account?.contrast)),\n    },\n  };\n}\n\nexport interface UseAccountAppearanceOptions {\n  /** The signed-in account (`/auth/me`), or `null` / `undefined` while signed out or not\n   *  loaded yet — then nothing is saved to it. */\n  account: AccountAppearanceFields | null | undefined;\n  /** This device's own choices: `useTextSizeStore((s) => s.size)` and\n   *  `useContrastStore((s) => s.contrast)`. */\n  device: DeviceAppearance;\n  /** Store a device choice: `(patch) => { if (patch.textSize) setSize(patch.textSize);\n   *  if (patch.contrast) setContrast(patch.contrast); }`. */\n  setDevice: (patch: { textSize?: TextSize; contrast?: ContrastMode }) => void;\n  /** Write the account: `PATCH /auth/me` with the patch as its body. Return its promise. */\n  save: (patch: AccountAppearancePatch) => unknown;\n  /** A demo session: a pick stays on the device, the account is never written (§6). */\n  isDemo?: boolean;\n}\n\nexport interface AccountAppearance extends ResolvedAccountAppearance {\n  /** The user picked a size: it becomes the device's choice and — signed in, and not a\n   *  demo — the account's. The promise is `save`'s; the device keeps the pick if it\n   *  fails, and the app says so (`appearance.saveFailed`, 0.32.1). */\n  pickTextSize: (size: TextSize) => Promise<unknown>;\n  /** As {@link pickTextSize}, for the contrast mode. */\n  pickContrast: (mode: ContrastMode) => Promise<unknown>;\n}\n\n/**\n * The account's text size and contrast on this device (§6): the order of\n * {@link resolveAccountAppearance}, and the writes.\n *\n * - **Nothing writes the account on its own.** Rendering, signing in and adopting the\n *   account's values call neither `save` nor `setDevice`, so a new device adopts the\n *   account instead of overwriting it.\n * - **A pick** writes the device's choice, then `save` — except in a demo session or\n *   signed out.\n *\n * The hook only answers. The values are put in force by the stores' apply hooks, which\n * resolve the same order from the same inputs:\n *\n * ```tsx\n * useApplyTextSize({ account: me?.text_size });\n * useApplyContrast({ account: me?.contrast });\n * ```\n */\nexport function useAccountAppearance(options: UseAccountAppearanceOptions): AccountAppearance {\n  const { account, device, setDevice, save, isDemo = false } = options;\n  const deviceTextSize = device.textSize;\n  const deviceContrast = device.contrast;\n  const accountTextSize = account?.text_size;\n  const accountContrast = account?.contrast;\n  const signedIn = account !== null && account !== undefined;\n  // By value, so a fresh `/auth/me` object with the same two fields changes nothing.\n  const resolved = useMemo(\n    () =>\n      resolveAccountAppearance(\n        { textSize: deviceTextSize, contrast: deviceContrast },\n        signedIn ? { text_size: accountTextSize, contrast: accountContrast } : undefined,\n      ),\n    [deviceTextSize, deviceContrast, signedIn, accountTextSize, accountContrast],\n  );\n  const write = useCallback(\n    (patch: AccountAppearancePatch) => {\n      if (isDemo || !signedIn) return Promise.resolve();\n      try {\n        return Promise.resolve(save(patch));\n      } catch (error) {\n        return Promise.reject(error);\n      }\n    },\n    [save, isDemo, signedIn],\n  );\n  const pickTextSize = useCallback(\n    (size: TextSize) => {\n      setDevice({ textSize: size });\n      return write({ text_size: size });\n    },\n    [setDevice, write],\n  );\n  const pickContrast = useCallback(\n    (mode: ContrastMode) => {\n      setDevice({ contrast: mode });\n      return write({ contrast: mode });\n    },\n    [setDevice, write],\n  );\n  return { ...resolved, pickTextSize, pickContrast };\n}\n"],"mappings":";AAAA,SAAS,aAAa,eAAe;AACrC,SAAS,YAAY,uBAAuB;AAE5C,SAAS,gBAAgB,2BAA2B;AAqCpD,SAAS,OAAO,QAAiB,SAAoC;AACnE,SAAO,SAAS,WAAW,UAAU,YAAY;AACnD;AAMO,SAAS,yBACd,QACA,SAC2B;AAC3B,SAAO;AAAA,IACL,UAAU,gBAAgB,OAAO,UAAU,SAAS,SAAS;AAAA,IAC7D,UAAU,oBAAoB,OAAO,UAAU,SAAS,QAAQ;AAAA,IAChE,SAAS;AAAA,MACP,UAAU,OAAO,WAAW,OAAO,QAAQ,GAAG,WAAW,SAAS,SAAS,CAAC;AAAA,MAC5E,UAAU,OAAO,eAAe,OAAO,QAAQ,GAAG,eAAe,SAAS,QAAQ,CAAC;AAAA,IACrF;AAAA,EACF;AACF;AA6CO,SAAS,qBAAqB,SAAyD;AAC5F,QAAM,EAAE,SAAS,QAAQ,WAAW,MAAM,SAAS,MAAM,IAAI;AAC7D,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,kBAAkB,SAAS;AACjC,QAAM,kBAAkB,SAAS;AACjC,QAAM,WAAW,YAAY,QAAQ,YAAY;AAEjD,QAAM,WAAW;AAAA,IACf,MACE;AAAA,MACE,EAAE,UAAU,gBAAgB,UAAU,eAAe;AAAA,MACrD,WAAW,EAAE,WAAW,iBAAiB,UAAU,gBAAgB,IAAI;AAAA,IACzE;AAAA,IACF,CAAC,gBAAgB,gBAAgB,UAAU,iBAAiB,eAAe;AAAA,EAC7E;AACA,QAAM,QAAQ;AAAA,IACZ,CAAC,UAAkC;AACjC,UAAI,UAAU,CAAC,SAAU,QAAO,QAAQ,QAAQ;AAChD,UAAI;AACF,eAAO,QAAQ,QAAQ,KAAK,KAAK,CAAC;AAAA,MACpC,SAAS,OAAO;AACd,eAAO,QAAQ,OAAO,KAAK;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,MAAM,QAAQ,QAAQ;AAAA,EACzB;AACA,QAAM,eAAe;AAAA,IACnB,CAAC,SAAmB;AAClB,gBAAU,EAAE,UAAU,KAAK,CAAC;AAC5B,aAAO,MAAM,EAAE,WAAW,KAAK,CAAC;AAAA,IAClC;AAAA,IACA,CAAC,WAAW,KAAK;AAAA,EACnB;AACA,QAAM,eAAe;AAAA,IACnB,CAAC,SAAuB;AACtB,gBAAU,EAAE,UAAU,KAAK,CAAC;AAC5B,aAAO,MAAM,EAAE,UAAU,KAAK,CAAC;AAAA,IACjC;AAAA,IACA,CAAC,WAAW,KAAK;AAAA,EACnB;AACA,SAAO,EAAE,GAAG,UAAU,cAAc,aAAa;AACnD;","names":[]}

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

@@ -3,7 +3,7 @@ import 'react';
 import '../search/search-index.js';
 
 /**
- * Which layout the settings page is in. `"auto"` follows the screen ({@link PHONE_QUERY},
+ * 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.
  */

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

@@ -1,8 +1,7 @@
 "use client";
 import { useCallback, useEffect, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router";
-import { useMediaQuery } from "../hooks/use-media-query.js";
-import { PHONE_QUERY } from "../components/ui.js";
+import { usePhoneLayout } from "../hooks/use-breakpoint.js";
 import { normalizeSettingsBase, visibleSettingsGroups } from "./settings-catalogue.js";
 const SETTINGS_FROM_LIST_STATE = "eifi1.settings.fromList";
 function settingsFromListState() {
@@ -55,7 +54,7 @@ function useSettingsRoute(options) {
   const { groups, entries, basePath, defaultGroup, aliases, layout = "auto" } = options;
   const location = useLocation();
   const navigate = useNavigate();
-  const narrow = useMediaQuery(PHONE_QUERY, false);
+  const narrow = usePhoneLayout();
   const phone = layout === "phone" || layout === "auto" && narrow;
   const base = normalizeSettingsBase(basePath);
   const visible = useMemo(() => visibleSettingsGroups(groups, entries), [groups, entries]);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/settings/use-settings-route.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo } from \"react\";\nimport { useLocation, useNavigate } from \"react-router\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { PHONE_QUERY } from \"../components/ui\";\nimport { normalizeSettingsBase, visibleSettingsGroups } from \"./settings-catalogue\";\nimport type { SettingsEntry, SettingsGroup } from \"./settings-catalogue\";\n\n/**\n * Which layout the settings page is in. `\"auto\"` follows the screen ({@link PHONE_QUERY},\n * as `Tabs` does); `\"desktop\"` / `\"phone\"` pin one — for a preview of both side by side,\n * where the window is one width.\n */\nexport type SettingsLayoutMode = \"auto\" | \"desktop\" | \"phone\";\n\nexport interface UseSettingsRouteOptions<G extends string> {\n  groups: readonly SettingsGroup<G>[];\n  /** The catalogue's entries. Given, a group with no visible entry is hidden (§4.1), and\n   *  `/settings?focus=<anchor>` finds the anchor's group. */\n  entries?: readonly SettingsEntry<G>[];\n  /** `/settings` or `/admin`. */\n  basePath: string;\n  /** The group `/settings` opens on a desktop. Default: the first visible group (§4.1). */\n  defaultGroup?: G;\n  /** Retired group ids and their successors — `{ overview: \"metrics\" }` — applied with a\n   *  replace (§3.1, keksdose's admin). */\n  aliases?: Readonly<Partial<Record<string, G>>>;\n  /** See {@link SettingsLayoutMode}. Default `\"auto\"`. */\n  layout?: SettingsLayoutMode;\n}\n\nexport interface SettingsRoute<G extends string> {\n  /** The group on screen. `null` on a phone's list (and while there is no visible group). */\n  group: G | null;\n  /** The segment after the group, owned by a card; `null` without one. */\n  sub: string | null;\n  /** `?focus=<anchor>`, or `null`. */\n  focus: string | null;\n  /** Open a group: a PUSH on a phone, so the system back gesture returns to the list; a\n   *  REPLACE on a desktop, so back leaves settings instead of walking every group looked\n   *  at (§3.1, keksdose's rule). */\n  select: (group: G) => void;\n  /** See {@link SettingsLayoutContextValue.selectSub}. */\n  selectSub: (sub: string | null) => void;\n  /** To the list: `navigate(-1)` when the list is the previous entry, else a replace to\n   *  the base path — so a deep link from a mail never sends \"back\" out of the app. */\n  back: () => void;\n  /** The visible groups, in order. */\n  groups: SettingsGroup<G>[];\n  /** Whether the phone layout is in force. */\n  phone: boolean;\n  /** Whether this location is about to be replaced (a legacy hash, an alias, an unknown\n   *  group): what renders meanwhile is already the destination's, but nothing should\n   *  act on the URL until it is. */\n  redirecting: boolean;\n  /** Whether the list is the entry before this one (the marker {@link select} and the\n   *  list's links leave in `location.state`). */\n  fromList: boolean;\n}\n\n/**\n * The `location.state` key that says \"the list is the entry before this one\". Written by\n * the phone list's links and {@link SettingsRoute.select}; carried over by every replace\n * the page makes, since a replace does not change what came before.\n */\nexport const SETTINGS_FROM_LIST_STATE = \"eifi1.settings.fromList\";\n\n/** `location.state` with the marker set — for an app's own link to a group page that is\n *  opened FROM the list it renders. */\nexport function settingsFromListState(): Record<string, true> {\n  return { [SETTINGS_FROM_LIST_STATE]: true };\n}\n\nfunction isFromList(state: unknown): boolean {\n  return typeof state === \"object\" && state !== null && (state as Record<string, unknown>)[SETTINGS_FROM_LIST_STATE] === true;\n}\n\nexport interface SettingsLocation {\n  pathname: string;\n  search: string;\n  hash: string;\n}\n\nexport interface SettingsLocationRules<G extends string> {\n  basePath: string;\n  /** The visible group ids. */\n  groups: readonly G[];\n  /** The resolved default group, `null` with no visible group. */\n  defaultGroup: G | null;\n  aliases?: Readonly<Partial<Record<string, G>>>;\n  /** Anchor → group, for `/settings?focus=<anchor>` with no group named. */\n  anchorGroup?: ReadonlyMap<string, G>;\n  phone: boolean;\n}\n\nexport interface SettingsLocationResult<G extends string> {\n  group: G | null;\n  sub: string | null;\n  /** The path (with query) to replace the location with, or `null` when it is already\n   *  canonical. */\n  redirect: string | null;\n}\n\n/**\n * Where a location lands on the settings page — pure, so the rules of §3.1 are testable\n * without a router:\n *\n *  - `/settings` → the default group on a desktop (a replace), the list on a phone;\n *  - `/settings/<group>[/<sub>]` → that group, the rest of the path as `sub`;\n *  - an alias → its successor, with a replace, `sub`, query and hash kept;\n *  - an unknown or hidden group → the default group (desktop) or the list (phone), with\n *    a replace and the query kept — never a 404, so an old bookmark still lands;\n *  - keksdose's legacy `/settings?<query>#<group>[/<sub>]` →\n *    `/settings/<group>[/<sub>]?<query>`, the WHOLE query carried (a tour's\n *    `tour`/`tourStep` as well as `focus`), then resolved by the rules above;\n *  - `/settings?focus=<anchor>` with no group → the anchor's group, where it can ring.\n */\nexport function resolveSettingsLocation<G extends string>(\n  location: SettingsLocation,\n  rules: SettingsLocationRules<G>,\n): SettingsLocationResult<G> {\n  const base = normalizeSettingsBase(rules.basePath);\n  const { pathname, search, hash } = location;\n  const known = new Set<string>(rules.groups);\n  const atBase = pathname === base || pathname === `${base}/` || (base === \"\" && pathname === \"/\");\n\n  if (atBase) {\n    const legacy = hash.replace(/^#/, \"\").replace(/^\\/+/, \"\");\n    if (legacy) {\n      // The hash becomes the path; whatever the path then says (an alias, an unknown\n      // group) is resolved in the same step, so the history sees one replace.\n      const converted = `${base}/${legacy}`;\n      const next = resolveSettingsLocation({ pathname: converted, search, hash: \"\" }, rules);\n      return { ...next, redirect: next.redirect ?? `${converted}${search}` };\n    }\n    const anchor = new URLSearchParams(search).get(\"focus\");\n    const anchorGroup = anchor ? rules.anchorGroup?.get(anchor) : undefined;\n    if (anchorGroup && known.has(anchorGroup)) {\n      return { group: anchorGroup, sub: null, redirect: `${base}/${anchorGroup}${search}` };\n    }\n    if (rules.phone || rules.defaultGroup === null) return { group: null, sub: null, redirect: null };\n    return { group: rules.defaultGroup, sub: null, redirect: `${base}/${rules.defaultGroup}${search}` };\n  }\n\n  if (!pathname.startsWith(`${base}/`)) {\n    // Mounted somewhere `basePath` does not name: a misconfiguration, not a link to\n    // correct. Show what the base path would, and leave the address alone.\n    return { group: rules.phone ? null : rules.defaultGroup, sub: null, redirect: null };\n  }\n  const rest = pathname.slice(base.length + 1);\n  const [segment = \"\", ...subParts] = rest.split(\"/\");\n  const sub = subParts.filter(Boolean).join(\"/\") || null;\n  if (known.has(segment)) return { group: segment as G, sub, redirect: null };\n\n  const successor = rules.aliases?.[segment];\n  if (successor !== undefined && known.has(successor)) {\n    return {\n      group: successor,\n      sub,\n      redirect: `${base}/${successor}${sub ? `/${sub}` : \"\"}${search}${hash}`,\n    };\n  }\n\n  // Unknown or hidden. The hash is dropped: on the list it would read as a legacy group\n  // and send the page round again.\n  if (rules.phone || rules.defaultGroup === null) {\n    return { group: null, sub: null, redirect: `${base || \"/\"}${search}` };\n  }\n  return { group: rules.defaultGroup, sub: null, redirect: `${base}/${rules.defaultGroup}${search}` };\n}\n\n/**\n * The settings page's route (docs/settings-harmonization.md §3.1): which group the URL\n * names, and the history rules for moving between groups.\n *\n * The URL IS the selection, as it was in keksdose (where it was the hash): there is no\n * state to keep in step with it, so a deep link, a reload, back and forward all land\n * where the address says. Everything that is not canonical — `/settings` on a desktop, a\n * legacy hash, an alias, an unknown or hidden group — is replaced by its canonical path.\n *\n * **The replace runs on every navigation**, keyed on `location.key`, not once on mount:\n * the router keeps the page mounted across links followed inside the app — keksdose's\n * inbox renders admin-typed URLs, and a push click routes an open window without a\n * reload — so a legacy `/settings#security` arriving while the page is open converts too\n * (§10.1).\n */\nexport function useSettingsRoute<G extends string>(options: UseSettingsRouteOptions<G>): SettingsRoute<G> {\n  const { groups, entries, basePath, defaultGroup, aliases, layout = \"auto\" } = options;\n  const location = useLocation();\n  const navigate = useNavigate();\n  const narrow = useMediaQuery(PHONE_QUERY, false);\n  const phone = layout === \"phone\" || (layout === \"auto\" && narrow);\n  const base = normalizeSettingsBase(basePath);\n\n  const visible = useMemo(() => visibleSettingsGroups(groups, entries), [groups, entries]);\n  const anchorGroup = useMemo(() => {\n    const map = new Map<string, G>();\n    for (const e of entries ?? []) if (e.visible !== false && !map.has(e.anchor)) map.set(e.anchor, e.group);\n    return map;\n  }, [entries]);\n  const ids = visible.map((g) => g.id);\n  const fallback =\n    defaultGroup !== undefined && ids.includes(defaultGroup) ? defaultGroup : (ids[0] ?? null);\n\n  const { group, sub, redirect } = resolveSettingsLocation(location, {\n    basePath: base,\n    groups: ids,\n    defaultGroup: fallback,\n    aliases,\n    anchorGroup,\n    phone,\n  });\n\n  const { key, state, search } = location;\n  useEffect(() => {\n    // `state` rides along: the marker describes the entry BEFORE this one, which a\n    // replace does not change.\n    if (redirect) navigate(redirect, { replace: true, state });\n  }, [key, redirect, state, navigate]);\n\n  const select = useCallback(\n    (next: G) => {\n      const to = `${base}/${next}`;\n      // From the list, the push marks it, so the group page's back is a real back.\n      if (phone) navigate(to, group === null ? { state: settingsFromListState() } : undefined);\n      // A new group is a new page: the old one's query (a focus, a roster filter) stays\n      // behind, as keksdose's `selectGroup` left it.\n      else navigate(to, { replace: true, state });\n    },\n    [base, phone, group, state, navigate],\n  );\n\n  const selectSub = useCallback(\n    (next: string | null) => {\n      if (group === null) return;\n      navigate(`${base}/${group}${next ? `/${next}` : \"\"}${search}`, { replace: true, state });\n    },\n    [base, group, search, state, navigate],\n  );\n\n  const fromList = isFromList(state);\n  const back = useCallback(() => {\n    if (fromList) navigate(-1);\n    else navigate(base || \"/\", { replace: true });\n  }, [fromList, base, navigate]);\n\n  return {\n    group,\n    sub,\n    focus: new URLSearchParams(search).get(\"focus\"),\n    select,\n    selectSub,\n    back,\n    groups: visible,\n    phone,\n    redirecting: redirect !== null,\n    fromList,\n  };\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,eAAe;AAChD,SAAS,aAAa,mBAAmB;AACzC,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB,6BAA6B;AA4DtD,MAAM,2BAA2B;AAIjC,SAAS,wBAA8C;AAC5D,SAAO,EAAE,CAAC,wBAAwB,GAAG,KAAK;AAC5C;AAEA,SAAS,WAAW,OAAyB;AAC3C,SAAO,OAAO,UAAU,YAAY,UAAU,QAAS,MAAkC,wBAAwB,MAAM;AACzH;AA0CO,SAAS,wBACd,UACA,OAC2B;AAC3B,QAAM,OAAO,sBAAsB,MAAM,QAAQ;AACjD,QAAM,EAAE,UAAU,QAAQ,KAAK,IAAI;AACnC,QAAM,QAAQ,IAAI,IAAY,MAAM,MAAM;AAC1C,QAAM,SAAS,aAAa,QAAQ,aAAa,GAAG,IAAI,OAAQ,SAAS,MAAM,aAAa;AAE5F,MAAI,QAAQ;AACV,UAAM,SAAS,KAAK,QAAQ,MAAM,EAAE,EAAE,QAAQ,QAAQ,EAAE;AACxD,QAAI,QAAQ;AAGV,YAAM,YAAY,GAAG,IAAI,IAAI,MAAM;AACnC,YAAM,OAAO,wBAAwB,EAAE,UAAU,WAAW,QAAQ,MAAM,GAAG,GAAG,KAAK;AACrF,aAAO,EAAE,GAAG,MAAM,UAAU,KAAK,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG;AAAA,IACvE;AACA,UAAM,SAAS,IAAI,gBAAgB,MAAM,EAAE,IAAI,OAAO;AACtD,UAAM,cAAc,SAAS,MAAM,aAAa,IAAI,MAAM,IAAI;AAC9D,QAAI,eAAe,MAAM,IAAI,WAAW,GAAG;AACzC,aAAO,EAAE,OAAO,aAAa,KAAK,MAAM,UAAU,GAAG,IAAI,IAAI,WAAW,GAAG,MAAM,GAAG;AAAA,IACtF;AACA,QAAI,MAAM,SAAS,MAAM,iBAAiB,KAAM,QAAO,EAAE,OAAO,MAAM,KAAK,MAAM,UAAU,KAAK;AAChG,WAAO,EAAE,OAAO,MAAM,cAAc,KAAK,MAAM,UAAU,GAAG,IAAI,IAAI,MAAM,YAAY,GAAG,MAAM,GAAG;AAAA,EACpG;AAEA,MAAI,CAAC,SAAS,WAAW,GAAG,IAAI,GAAG,GAAG;AAGpC,WAAO,EAAE,OAAO,MAAM,QAAQ,OAAO,MAAM,cAAc,KAAK,MAAM,UAAU,KAAK;AAAA,EACrF;AACA,QAAM,OAAO,SAAS,MAAM,KAAK,SAAS,CAAC;AAC3C,QAAM,CAAC,UAAU,IAAI,GAAG,QAAQ,IAAI,KAAK,MAAM,GAAG;AAClD,QAAM,MAAM,SAAS,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAClD,MAAI,MAAM,IAAI,OAAO,EAAG,QAAO,EAAE,OAAO,SAAc,KAAK,UAAU,KAAK;AAE1E,QAAM,YAAY,MAAM,UAAU,OAAO;AACzC,MAAI,cAAc,UAAa,MAAM,IAAI,SAAS,GAAG;AACnD,WAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA,UAAU,GAAG,IAAI,IAAI,SAAS,GAAG,MAAM,IAAI,GAAG,KAAK,EAAE,GAAG,MAAM,GAAG,IAAI;AAAA,IACvE;AAAA,EACF;AAIA,MAAI,MAAM,SAAS,MAAM,iBAAiB,MAAM;AAC9C,WAAO,EAAE,OAAO,MAAM,KAAK,MAAM,UAAU,GAAG,QAAQ,GAAG,GAAG,MAAM,GAAG;AAAA,EACvE;AACA,SAAO,EAAE,OAAO,MAAM,cAAc,KAAK,MAAM,UAAU,GAAG,IAAI,IAAI,MAAM,YAAY,GAAG,MAAM,GAAG;AACpG;AAiBO,SAAS,iBAAmC,SAAuD;AACxG,QAAM,EAAE,QAAQ,SAAS,UAAU,cAAc,SAAS,SAAS,OAAO,IAAI;AAC9E,QAAM,WAAW,YAAY;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,cAAc,aAAa,KAAK;AAC/C,QAAM,QAAQ,WAAW,WAAY,WAAW,UAAU;AAC1D,QAAM,OAAO,sBAAsB,QAAQ;AAE3C,QAAM,UAAU,QAAQ,MAAM,sBAAsB,QAAQ,OAAO,GAAG,CAAC,QAAQ,OAAO,CAAC;AACvF,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,MAAM,oBAAI,IAAe;AAC/B,eAAW,KAAK,WAAW,CAAC,EAAG,KAAI,EAAE,YAAY,SAAS,CAAC,IAAI,IAAI,EAAE,MAAM,EAAG,KAAI,IAAI,EAAE,QAAQ,EAAE,KAAK;AACvG,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AACZ,QAAM,MAAM,QAAQ,IAAI,CAAC,MAAM,EAAE,EAAE;AACnC,QAAM,WACJ,iBAAiB,UAAa,IAAI,SAAS,YAAY,IAAI,eAAgB,IAAI,CAAC,KAAK;AAEvF,QAAM,EAAE,OAAO,KAAK,SAAS,IAAI,wBAAwB,UAAU;AAAA,IACjE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,KAAK,OAAO,OAAO,IAAI;AAC/B,YAAU,MAAM;AAGd,QAAI,SAAU,UAAS,UAAU,EAAE,SAAS,MAAM,MAAM,CAAC;AAAA,EAC3D,GAAG,CAAC,KAAK,UAAU,OAAO,QAAQ,CAAC;AAEnC,QAAM,SAAS;AAAA,IACb,CAAC,SAAY;AACX,YAAM,KAAK,GAAG,IAAI,IAAI,IAAI;AAE1B,UAAI,MAAO,UAAS,IAAI,UAAU,OAAO,EAAE,OAAO,sBAAsB,EAAE,IAAI,MAAS;AAAA,UAGlF,UAAS,IAAI,EAAE,SAAS,MAAM,MAAM,CAAC;AAAA,IAC5C;AAAA,IACA,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ;AAAA,EACtC;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,SAAwB;AACvB,UAAI,UAAU,KAAM;AACpB,eAAS,GAAG,IAAI,IAAI,KAAK,GAAG,OAAO,IAAI,IAAI,KAAK,EAAE,GAAG,MAAM,IAAI,EAAE,SAAS,MAAM,MAAM,CAAC;AAAA,IACzF;AAAA,IACA,CAAC,MAAM,OAAO,QAAQ,OAAO,QAAQ;AAAA,EACvC;AAEA,QAAM,WAAW,WAAW,KAAK;AACjC,QAAM,OAAO,YAAY,MAAM;AAC7B,QAAI,SAAU,UAAS,EAAE;AAAA,QACpB,UAAS,QAAQ,KAAK,EAAE,SAAS,KAAK,CAAC;AAAA,EAC9C,GAAG,CAAC,UAAU,MAAM,QAAQ,CAAC;AAE7B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO,IAAI,gBAAgB,MAAM,EAAE,IAAI,OAAO;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,aAAa,aAAa;AAAA,IAC1B;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/settings/use-settings-route.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo } from \"react\";\nimport { useLocation, useNavigate } from \"react-router\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { normalizeSettingsBase, visibleSettingsGroups } from \"./settings-catalogue\";\nimport type { SettingsEntry, SettingsGroup } from \"./settings-catalogue\";\n\n/**\n * Which layout the settings page is in. `\"auto\"` follows the screen (`usePhoneLayout()`,\n * as `Tabs` does); `\"desktop\"` / `\"phone\"` pin one — for a preview of both side by side,\n * where the window is one width.\n */\nexport type SettingsLayoutMode = \"auto\" | \"desktop\" | \"phone\";\n\nexport interface UseSettingsRouteOptions<G extends string> {\n  groups: readonly SettingsGroup<G>[];\n  /** The catalogue's entries. Given, a group with no visible entry is hidden (§4.1), and\n   *  `/settings?focus=<anchor>` finds the anchor's group. */\n  entries?: readonly SettingsEntry<G>[];\n  /** `/settings` or `/admin`. */\n  basePath: string;\n  /** The group `/settings` opens on a desktop. Default: the first visible group (§4.1). */\n  defaultGroup?: G;\n  /** Retired group ids and their successors — `{ overview: \"metrics\" }` — applied with a\n   *  replace (§3.1, keksdose's admin). */\n  aliases?: Readonly<Partial<Record<string, G>>>;\n  /** See {@link SettingsLayoutMode}. Default `\"auto\"`. */\n  layout?: SettingsLayoutMode;\n}\n\nexport interface SettingsRoute<G extends string> {\n  /** The group on screen. `null` on a phone's list (and while there is no visible group). */\n  group: G | null;\n  /** The segment after the group, owned by a card; `null` without one. */\n  sub: string | null;\n  /** `?focus=<anchor>`, or `null`. */\n  focus: string | null;\n  /** Open a group: a PUSH on a phone, so the system back gesture returns to the list; a\n   *  REPLACE on a desktop, so back leaves settings instead of walking every group looked\n   *  at (§3.1, keksdose's rule). */\n  select: (group: G) => void;\n  /** See {@link SettingsLayoutContextValue.selectSub}. */\n  selectSub: (sub: string | null) => void;\n  /** To the list: `navigate(-1)` when the list is the previous entry, else a replace to\n   *  the base path — so a deep link from a mail never sends \"back\" out of the app. */\n  back: () => void;\n  /** The visible groups, in order. */\n  groups: SettingsGroup<G>[];\n  /** Whether the phone layout is in force. */\n  phone: boolean;\n  /** Whether this location is about to be replaced (a legacy hash, an alias, an unknown\n   *  group): what renders meanwhile is already the destination's, but nothing should\n   *  act on the URL until it is. */\n  redirecting: boolean;\n  /** Whether the list is the entry before this one (the marker {@link select} and the\n   *  list's links leave in `location.state`). */\n  fromList: boolean;\n}\n\n/**\n * The `location.state` key that says \"the list is the entry before this one\". Written by\n * the phone list's links and {@link SettingsRoute.select}; carried over by every replace\n * the page makes, since a replace does not change what came before.\n */\nexport const SETTINGS_FROM_LIST_STATE = \"eifi1.settings.fromList\";\n\n/** `location.state` with the marker set — for an app's own link to a group page that is\n *  opened FROM the list it renders. */\nexport function settingsFromListState(): Record<string, true> {\n  return { [SETTINGS_FROM_LIST_STATE]: true };\n}\n\nfunction isFromList(state: unknown): boolean {\n  return typeof state === \"object\" && state !== null && (state as Record<string, unknown>)[SETTINGS_FROM_LIST_STATE] === true;\n}\n\nexport interface SettingsLocation {\n  pathname: string;\n  search: string;\n  hash: string;\n}\n\nexport interface SettingsLocationRules<G extends string> {\n  basePath: string;\n  /** The visible group ids. */\n  groups: readonly G[];\n  /** The resolved default group, `null` with no visible group. */\n  defaultGroup: G | null;\n  aliases?: Readonly<Partial<Record<string, G>>>;\n  /** Anchor → group, for `/settings?focus=<anchor>` with no group named. */\n  anchorGroup?: ReadonlyMap<string, G>;\n  phone: boolean;\n}\n\nexport interface SettingsLocationResult<G extends string> {\n  group: G | null;\n  sub: string | null;\n  /** The path (with query) to replace the location with, or `null` when it is already\n   *  canonical. */\n  redirect: string | null;\n}\n\n/**\n * Where a location lands on the settings page — pure, so the rules of §3.1 are testable\n * without a router:\n *\n *  - `/settings` → the default group on a desktop (a replace), the list on a phone;\n *  - `/settings/<group>[/<sub>]` → that group, the rest of the path as `sub`;\n *  - an alias → its successor, with a replace, `sub`, query and hash kept;\n *  - an unknown or hidden group → the default group (desktop) or the list (phone), with\n *    a replace and the query kept — never a 404, so an old bookmark still lands;\n *  - keksdose's legacy `/settings?<query>#<group>[/<sub>]` →\n *    `/settings/<group>[/<sub>]?<query>`, the WHOLE query carried (a tour's\n *    `tour`/`tourStep` as well as `focus`), then resolved by the rules above;\n *  - `/settings?focus=<anchor>` with no group → the anchor's group, where it can ring.\n */\nexport function resolveSettingsLocation<G extends string>(\n  location: SettingsLocation,\n  rules: SettingsLocationRules<G>,\n): SettingsLocationResult<G> {\n  const base = normalizeSettingsBase(rules.basePath);\n  const { pathname, search, hash } = location;\n  const known = new Set<string>(rules.groups);\n  const atBase = pathname === base || pathname === `${base}/` || (base === \"\" && pathname === \"/\");\n\n  if (atBase) {\n    const legacy = hash.replace(/^#/, \"\").replace(/^\\/+/, \"\");\n    if (legacy) {\n      // The hash becomes the path; whatever the path then says (an alias, an unknown\n      // group) is resolved in the same step, so the history sees one replace.\n      const converted = `${base}/${legacy}`;\n      const next = resolveSettingsLocation({ pathname: converted, search, hash: \"\" }, rules);\n      return { ...next, redirect: next.redirect ?? `${converted}${search}` };\n    }\n    const anchor = new URLSearchParams(search).get(\"focus\");\n    const anchorGroup = anchor ? rules.anchorGroup?.get(anchor) : undefined;\n    if (anchorGroup && known.has(anchorGroup)) {\n      return { group: anchorGroup, sub: null, redirect: `${base}/${anchorGroup}${search}` };\n    }\n    if (rules.phone || rules.defaultGroup === null) return { group: null, sub: null, redirect: null };\n    return { group: rules.defaultGroup, sub: null, redirect: `${base}/${rules.defaultGroup}${search}` };\n  }\n\n  if (!pathname.startsWith(`${base}/`)) {\n    // Mounted somewhere `basePath` does not name: a misconfiguration, not a link to\n    // correct. Show what the base path would, and leave the address alone.\n    return { group: rules.phone ? null : rules.defaultGroup, sub: null, redirect: null };\n  }\n  const rest = pathname.slice(base.length + 1);\n  const [segment = \"\", ...subParts] = rest.split(\"/\");\n  const sub = subParts.filter(Boolean).join(\"/\") || null;\n  if (known.has(segment)) return { group: segment as G, sub, redirect: null };\n\n  const successor = rules.aliases?.[segment];\n  if (successor !== undefined && known.has(successor)) {\n    return {\n      group: successor,\n      sub,\n      redirect: `${base}/${successor}${sub ? `/${sub}` : \"\"}${search}${hash}`,\n    };\n  }\n\n  // Unknown or hidden. The hash is dropped: on the list it would read as a legacy group\n  // and send the page round again.\n  if (rules.phone || rules.defaultGroup === null) {\n    return { group: null, sub: null, redirect: `${base || \"/\"}${search}` };\n  }\n  return { group: rules.defaultGroup, sub: null, redirect: `${base}/${rules.defaultGroup}${search}` };\n}\n\n/**\n * The settings page's route (docs/settings-harmonization.md §3.1): which group the URL\n * names, and the history rules for moving between groups.\n *\n * The URL IS the selection, as it was in keksdose (where it was the hash): there is no\n * state to keep in step with it, so a deep link, a reload, back and forward all land\n * where the address says. Everything that is not canonical — `/settings` on a desktop, a\n * legacy hash, an alias, an unknown or hidden group — is replaced by its canonical path.\n *\n * **The replace runs on every navigation**, keyed on `location.key`, not once on mount:\n * the router keeps the page mounted across links followed inside the app — keksdose's\n * inbox renders admin-typed URLs, and a push click routes an open window without a\n * reload — so a legacy `/settings#security` arriving while the page is open converts too\n * (§10.1).\n */\nexport function useSettingsRoute<G extends string>(options: UseSettingsRouteOptions<G>): SettingsRoute<G> {\n  const { groups, entries, basePath, defaultGroup, aliases, layout = \"auto\" } = options;\n  const location = useLocation();\n  const navigate = useNavigate();\n  const narrow = usePhoneLayout();\n  const phone = layout === \"phone\" || (layout === \"auto\" && narrow);\n  const base = normalizeSettingsBase(basePath);\n\n  const visible = useMemo(() => visibleSettingsGroups(groups, entries), [groups, entries]);\n  const anchorGroup = useMemo(() => {\n    const map = new Map<string, G>();\n    for (const e of entries ?? []) if (e.visible !== false && !map.has(e.anchor)) map.set(e.anchor, e.group);\n    return map;\n  }, [entries]);\n  const ids = visible.map((g) => g.id);\n  const fallback =\n    defaultGroup !== undefined && ids.includes(defaultGroup) ? defaultGroup : (ids[0] ?? null);\n\n  const { group, sub, redirect } = resolveSettingsLocation(location, {\n    basePath: base,\n    groups: ids,\n    defaultGroup: fallback,\n    aliases,\n    anchorGroup,\n    phone,\n  });\n\n  const { key, state, search } = location;\n  useEffect(() => {\n    // `state` rides along: the marker describes the entry BEFORE this one, which a\n    // replace does not change.\n    if (redirect) navigate(redirect, { replace: true, state });\n  }, [key, redirect, state, navigate]);\n\n  const select = useCallback(\n    (next: G) => {\n      const to = `${base}/${next}`;\n      // From the list, the push marks it, so the group page's back is a real back.\n      if (phone) navigate(to, group === null ? { state: settingsFromListState() } : undefined);\n      // A new group is a new page: the old one's query (a focus, a roster filter) stays\n      // behind, as keksdose's `selectGroup` left it.\n      else navigate(to, { replace: true, state });\n    },\n    [base, phone, group, state, navigate],\n  );\n\n  const selectSub = useCallback(\n    (next: string | null) => {\n      if (group === null) return;\n      navigate(`${base}/${group}${next ? `/${next}` : \"\"}${search}`, { replace: true, state });\n    },\n    [base, group, search, state, navigate],\n  );\n\n  const fromList = isFromList(state);\n  const back = useCallback(() => {\n    if (fromList) navigate(-1);\n    else navigate(base || \"/\", { replace: true });\n  }, [fromList, base, navigate]);\n\n  return {\n    group,\n    sub,\n    focus: new URLSearchParams(search).get(\"focus\"),\n    select,\n    selectSub,\n    back,\n    groups: visible,\n    phone,\n    redirecting: redirect !== null,\n    fromList,\n  };\n}\n"],"mappings":"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","names":[]}

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

@@ -1,17 +1,21 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { LucideIcon } from 'lucide-react';
-import { dR as KitLinkComponent } from '../delete-account-setting-CpIhzxxZ.js';
+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, fZ as splitMobileBar } from '../delete-account-setting-FLyJf-kZ.js';
+import 'zustand/middleware';
+import 'zustand';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-DUELeXpa.js';
+import '../data-table-labels-kpAAVi6g.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
 import '../components/mini-calendar.js';
 import '../components/calendar-heatmap.js';
 import '../components/popover.js';
+import '../hooks/use-breakpoint.js';
 import '../components/chip.js';
+import '../components/field-parts.js';
 import '../components/field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -61,8 +65,6 @@ import './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';
@@ -80,6 +82,8 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.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';
@@ -93,167 +97,4 @@ import '../components/sign-chip.js';
 import '../components/column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import '../components/field-parts.js';
-
-interface AppShellSubItem {
-    to: string;
-    label: string;
-    icon: LucideIcon;
-    /** Passed to NavLink's `end` (exact match). Defaults to true. */
-    end?: boolean;
-}
-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.
- */
-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;
-    }[];
-};
-/**
- * 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).
- */
-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"` (default): 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.
-     */
-    mobileSubNavLayout?: "wrap" | "scroll";
-    /**
-     * 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 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.
- */
-declare function AppShell({ nav, topBar, children, footer, sidebarFooter, sidebarFooterItems, renderLink, collapseStorageKey: collapseStorageKeyProp, collapseLabel, expandLabel, subNav, mobileSubNav, mobileSubNavLayout, toggleGroupLabel, embedded: embeddedProp, className, ...rest }: AppShellProps): react.JSX.Element;
-
-export { AppShell, type AppShellNavItem, type AppShellProps, type AppShellSidebarFooterItem, type AppShellSubItem };
+import '../components/focus-ring.js';