@eifi1/ui-kit 0.33.0 → 0.34.0

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

@@ -1,3 +1,4 @@
+import { type LabelOverride } from "../i18n/kit-labels.js";
 /**
  * The `settings` namespace (docs/settings-harmonization.md §4.3): the settings page's
  * own words, and the names and help lines of the five core groups every app shares —
@@ -6,15 +7,15 @@
  * `<UiKitProvider labels={{ settings }}>` > English).
  */
 /** A core group's two strings, as {@link SettingsGroup} takes them. */
-interface SettingsGroupLabels {
+export interface SettingsGroupLabels {
     /** The group's name. */
     title: string;
     /** One line: under the heading, and in the phone list. */
     help: string;
 }
 /** The five groups whose words the kit ships (§2.6, §4.2). */
-type SettingsCoreGroup = "appearance" | "account" | "security" | "notifications" | "data";
-interface SettingsLabels {
+export type SettingsCoreGroup = "appearance" | "account" | "security" | "notifications" | "data";
+export interface SettingsLabels {
     /** The page's heading, and the back link's visible text on a phone's group page. */
     title: string;
     /** The search field's accessible name. */
@@ -36,13 +37,11 @@ interface SettingsLabels {
     /** The core groups' names and help lines. */
     groups: Record<SettingsCoreGroup, SettingsGroupLabels>;
 }
-declare const DEFAULT_SETTINGS_LABELS: SettingsLabels;
+export declare const DEFAULT_SETTINGS_LABELS: SettingsLabels;
 /**
  * 0.31.1: the `settings` namespace, resolved — English, then the provider, then `labels`.
  * What an app reads for its catalogue's core group titles and help lines, and for the
  * page title "<group> · Settings · <app>" (settings contract §3.1), without restating
  * the namespace and its defaults (Kurvenschmiede's 0.31 adoption).
  */
-declare function useSettingsLabels(labels?: Partial<SettingsLabels>): SettingsLabels;
-
-export { DEFAULT_SETTINGS_LABELS, type SettingsCoreGroup, type SettingsGroupLabels, type SettingsLabels, useSettingsLabels };
+export declare function useSettingsLabels(labels?: LabelOverride<SettingsLabels>): SettingsLabels;

package/dist/settings/settings-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/settings/settings-labels.ts"],"sourcesContent":["import { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * The `settings` namespace (docs/settings-harmonization.md §4.3): the settings page's\n * own words, and the names and help lines of the five core groups every app shares —\n * appearance, account, security, notifications, data (§2.6). An app's own groups bring\n * their own words; any core label may be overridden like any kit label (prop >\n * `<UiKitProvider labels={{ settings }}>` > English).\n */\n\n/** A core group's two strings, as {@link SettingsGroup} takes them. */\nexport interface SettingsGroupLabels {\n  /** The group's name. */\n  title: string;\n  /** One line: under the heading, and in the phone list. */\n  help: string;\n}\n\n/** The five groups whose words the kit ships (§2.6, §4.2). */\nexport type SettingsCoreGroup = \"appearance\" | \"account\" | \"security\" | \"notifications\" | \"data\";\n\nexport interface SettingsLabels {\n  /** The page's heading, and the back link's visible text on a phone's group page. */\n  title: string;\n  /** The search field's accessible name. */\n  search: string;\n  /** The search field's placeholder. */\n  searchPlaceholder: string;\n  /** The hit list's accessible name. */\n  results: string;\n  /** No hits for the trimmed query (§3.4). */\n  noMatches: (query: string) => string;\n  /** The button beside it that empties the field. */\n  clearSearch: string;\n  /** The phone's back link's accessible name: \"‹ Settings\" says where, this says what. */\n  back: string;\n  /** The sidebar's accessible name (the vertical tablist). */\n  sections: string;\n  /** A sidebar row's hit badge, read in place of the bare number while searching. */\n  matchCount: (count: number) => string;\n  /** The core groups' names and help lines. */\n  groups: Record<SettingsCoreGroup, SettingsGroupLabels>;\n}\n\nexport const DEFAULT_SETTINGS_LABELS: SettingsLabels = {\n  title: \"Settings\",\n  search: \"Search settings\",\n  searchPlaceholder: \"Search settings…\",\n  results: \"Matching settings\",\n  noMatches: (query) => `No settings match “${query}”.`,\n  clearSearch: \"Clear search\",\n  back: \"Back to settings\",\n  sections: \"Settings sections\",\n  matchCount: (count) => (count === 1 ? \"1 match\" : `${count} matches`),\n  groups: {\n    appearance: {\n      title: \"Appearance\",\n      help: \"Language, theme and how the app looks on this device.\",\n    },\n    account: {\n      title: \"Account\",\n      help: \"Your profile and your email address.\",\n    },\n    security: {\n      title: \"Security\",\n      help: \"How you sign in, and where you are signed in.\",\n    },\n    notifications: {\n      title: \"Notifications\",\n      help: \"What you are told about, when, and on which devices.\",\n    },\n    data: {\n      title: \"Data\",\n      help: \"Export what is yours, or delete it together with your account.\",\n    },\n  },\n};\n\n/**\n * 0.31.1: the `settings` namespace, resolved — English, then the provider, then `labels`.\n * What an app reads for its catalogue's core group titles and help lines, and for the\n * page title \"<group> · Settings · <app>\" (settings contract §3.1), without restating\n * the namespace and its defaults (Kurvenschmiede's 0.31 adoption).\n */\nexport function useSettingsLabels(labels?: Partial<SettingsLabels>): SettingsLabels {\n  return useKitLabels(\"settings\", DEFAULT_SETTINGS_LABELS, labels);\n}\n"],"mappings":";AAAA,SAAS,oBAAoB;AA4CtB,MAAM,0BAA0C;AAAA,EACrD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,WAAW,CAAC,UAAU,2BAAsB,KAAK;AAAA,EACjD,aAAa;AAAA,EACb,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY,CAAC,UAAW,UAAU,IAAI,YAAY,GAAG,KAAK;AAAA,EAC1D,QAAQ;AAAA,IACN,YAAY;AAAA,MACV,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAQO,SAAS,kBAAkB,QAAkD;AAClF,SAAO,aAAa,YAAY,yBAAyB,MAAM;AACjE;","names":[]}
+{"version":3,"sources":["../../src/settings/settings-labels.ts"],"sourcesContent":["import { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\n\n/**\n * The `settings` namespace (docs/settings-harmonization.md §4.3): the settings page's\n * own words, and the names and help lines of the five core groups every app shares —\n * appearance, account, security, notifications, data (§2.6). An app's own groups bring\n * their own words; any core label may be overridden like any kit label (prop >\n * `<UiKitProvider labels={{ settings }}>` > English).\n */\n\n/** A core group's two strings, as {@link SettingsGroup} takes them. */\nexport interface SettingsGroupLabels {\n  /** The group's name. */\n  title: string;\n  /** One line: under the heading, and in the phone list. */\n  help: string;\n}\n\n/** The five groups whose words the kit ships (§2.6, §4.2). */\nexport type SettingsCoreGroup = \"appearance\" | \"account\" | \"security\" | \"notifications\" | \"data\";\n\nexport interface SettingsLabels {\n  /** The page's heading, and the back link's visible text on a phone's group page. */\n  title: string;\n  /** The search field's accessible name. */\n  search: string;\n  /** The search field's placeholder. */\n  searchPlaceholder: string;\n  /** The hit list's accessible name. */\n  results: string;\n  /** No hits for the trimmed query (§3.4). */\n  noMatches: (query: string) => string;\n  /** The button beside it that empties the field. */\n  clearSearch: string;\n  /** The phone's back link's accessible name: \"‹ Settings\" says where, this says what. */\n  back: string;\n  /** The sidebar's accessible name (the vertical tablist). */\n  sections: string;\n  /** A sidebar row's hit badge, read in place of the bare number while searching. */\n  matchCount: (count: number) => string;\n  /** The core groups' names and help lines. */\n  groups: Record<SettingsCoreGroup, SettingsGroupLabels>;\n}\n\nexport const DEFAULT_SETTINGS_LABELS: SettingsLabels = {\n  title: \"Settings\",\n  search: \"Search settings\",\n  searchPlaceholder: \"Search settings…\",\n  results: \"Matching settings\",\n  noMatches: (query) => `No settings match “${query}”.`,\n  clearSearch: \"Clear search\",\n  back: \"Back to settings\",\n  sections: \"Settings sections\",\n  matchCount: (count) => (count === 1 ? \"1 match\" : `${count} matches`),\n  groups: {\n    appearance: {\n      title: \"Appearance\",\n      help: \"Language, theme and how the app looks on this device.\",\n    },\n    account: {\n      title: \"Account\",\n      help: \"Your profile and your email address.\",\n    },\n    security: {\n      title: \"Security\",\n      help: \"How you sign in, and where you are signed in.\",\n    },\n    notifications: {\n      title: \"Notifications\",\n      help: \"What you are told about, when, and on which devices.\",\n    },\n    data: {\n      title: \"Data\",\n      help: \"Export what is yours, or delete it together with your account.\",\n    },\n  },\n};\n\n/**\n * 0.31.1: the `settings` namespace, resolved — English, then the provider, then `labels`.\n * What an app reads for its catalogue's core group titles and help lines, and for the\n * page title \"<group> · Settings · <app>\" (settings contract §3.1), without restating\n * the namespace and its defaults (Kurvenschmiede's 0.31 adoption).\n */\nexport function useSettingsLabels(labels?: LabelOverride<SettingsLabels>): SettingsLabels {\n  return useKitLabels(\"settings\", DEFAULT_SETTINGS_LABELS, labels);\n}\n"],"mappings":";AAAA,SAAS,oBAAwC;AA4C1C,MAAM,0BAA0C;AAAA,EACrD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,WAAW,CAAC,UAAU,2BAAsB,KAAK;AAAA,EACjD,aAAa;AAAA,EACb,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY,CAAC,UAAW,UAAU,IAAI,YAAY,GAAG,KAAK;AAAA,EAC1D,QAAQ;AAAA,IACN,YAAY;AAAA,MACV,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAQO,SAAS,kBAAkB,QAAwD;AACxF,SAAO,aAAa,YAAY,yBAAyB,MAAM;AACjE;","names":[]}

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

@@ -1,16 +1,15 @@
-import { ReactNode, ReactElement } from 'react';
-import { SettingsGroup, SettingsEntry } from './settings-catalogue.js';
-import { SettingsLabels } from './settings-labels.js';
-import { SettingsLayoutMode } from './use-settings-route.js';
-import '../search/search-index.js';
-
+import type { ReactElement, ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { SettingsEntry, SettingsGroup } from "./settings-catalogue.js";
+import type { SettingsLabels } from "./settings-labels.js";
+import type { SettingsLayoutMode } from "./use-settings-route.js";
 /** The page's width cap (§3.2): `6xl` for settings, `7xl` for keksdose's admin, whose
  *  user table scrolled sideways at 6xl (dev#488). */
-type SettingsLayoutWidth = "6xl" | "7xl";
+export type SettingsLayoutWidth = "6xl" | "7xl";
 /** More entries than this and the search field shows by itself (§3.4): Kurvenschmiede has
  *  about twelve, keksdose 26; a page of six needs none. */
-declare const SETTINGS_SEARCH_THRESHOLD = 8;
-interface SettingsLayoutProps<G extends string> {
+export declare const SETTINGS_SEARCH_THRESHOLD = 8;
+export interface SettingsLayoutProps<G extends string> {
     /** The page's `h1`: "Settings", "Administration". Default: `labels.title`. */
     title?: ReactNode;
     /** The groups, in order (§4.2). */
@@ -43,11 +42,37 @@ interface SettingsLayoutProps<G extends string> {
      */
     phoneFooter?: ReactNode;
     /** Prop > `<UiKitProvider labels={{ settings }}>` > English. */
-    labels?: Partial<SettingsLabels>;
+    labels?: LabelOverride<SettingsLabels>;
     /** See {@link SettingsLayoutMode}. Default `"auto"`: the screen decides. */
     layout?: SettingsLayoutMode;
+    /**
+     * The app's name, the last part of the window's title: "Security · Settings ·
+     * Kastlan" (§3.1). Left out, the title ends at the page: "Security · Settings".
+     */
+    appName?: string;
+    /**
+     * The window's title (`document.title`, §3.1) — round 0.34 C8, KS U7. By default the
+     * layout writes "<group> · <page> · <appName>" while a group is open and
+     * "<page> · <appName>" on the phone's list, and puts back the title it found when it
+     * unmounts. `<page>` is `title` when that is a string, else `labels.title`.
+     *
+     * A function writes another order or another separator from the same parts; `false`
+     * leaves `document.title` to the app. Kastlan's `SettingsChrome` and Kurvenschmiede's
+     * `GroupTitle` were this effect written by hand, and Kurvenschmiede's admin page, on
+     * the same layout, had none — every admin section was titled "Kurvenschmiede".
+     */
+    documentTitle?: false | ((parts: SettingsDocumentTitleParts) => string);
     className?: string;
 }
+/** What {@link SettingsLayoutProps.documentTitle} is given to write the window's title. */
+export interface SettingsDocumentTitleParts {
+    /** The open group's name, or `null` on the phone's list of groups. */
+    group: string | null;
+    /** The page: `title` when it is a string, else `labels.title` ("Settings"). */
+    page: string;
+    /** The `appName` prop, or `undefined`. */
+    appName: string | undefined;
+}
 /**
  * The settings page (docs/settings-harmonization.md §3), and the admin page built the
  * same way (§5). keksdose's page is the reference for the desktop; the phone pattern and
@@ -72,6 +97,4 @@ interface SettingsLayoutProps<G extends string> {
  * The cards inside read {@link useSettingsLayout} for `selectSub`, and their titles are
  * headings under the group's ({@link SettingsHeadingLevel}).
  */
-declare function SettingsLayout<G extends string>({ title, groups, entries, basePath, defaultGroup, aliases, search, width, renderGroup, phoneFooter, labels: labelsProp, layout, className, }: SettingsLayoutProps<G>): ReactElement;
-
-export { SETTINGS_SEARCH_THRESHOLD, SettingsLayout, type SettingsLayoutProps, type SettingsLayoutWidth };
+export declare function SettingsLayout<G extends string>({ title, groups, entries, basePath, defaultGroup, aliases, search, width, renderGroup, phoneFooter, labels: labelsProp, layout, appName, documentTitle, className, }: SettingsLayoutProps<G>): ReactElement;

package/dist/settings/settings-layout.js

@@ -1,9 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Link, useHref, useLocation } from "react-router";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { Button, Card, EmptyState, Tabs } from "../components/ui.js";
+import { Button } from "../components/button.js";
+import { Card } from "../components/card.js";
+import { EmptyState } from "../components/empty-state.js";
+import { Tabs } from "../components/tabs.js";
 import { FOCUS_RING } from "../components/focus-ring.js";
 import { Chip } from "../components/chip.js";
 import { List, ListItem } from "../components/list.js";
@@ -24,6 +27,9 @@ import { DEFAULT_SETTINGS_LABELS } from "./settings-labels.js";
 import { settingsFromListState, useSettingsRoute } from "./use-settings-route.js";
 import { useSettingsFocus } from "./use-settings-focus.js";
 const SETTINGS_SEARCH_THRESHOLD = 8;
+function defaultDocumentTitle({ group, page, appName }) {
+  return [group, page, appName].filter((part) => Boolean(part)).join(" \xB7 ");
+}
 function SettingsLayout({
   title,
   groups,
@@ -37,6 +43,8 @@ function SettingsLayout({
   phoneFooter,
   labels: labelsProp,
   layout = "auto",
+  appName,
+  documentTitle,
   className
 }) {
   const labels = useKitLabels("settings", DEFAULT_SETTINGS_LABELS, labelsProp);
@@ -99,6 +107,19 @@ function SettingsLayout({
     searchRef.current?.focus();
   };
   const pageTitle = title ?? labels.title;
+  const windowTitle = documentTitle === false ? null : (documentTitle ?? defaultDocumentTitle)({
+    group: group === null ? null : groupById.get(group)?.title ?? null,
+    page: typeof title === "string" ? title : labels.title,
+    appName
+  });
+  useEffect(() => {
+    if (windowTitle === null) return;
+    const before = document.title;
+    document.title = windowTitle;
+    return () => {
+      document.title = before;
+    };
+  }, [windowTitle]);
   const pageClass = cn("mx-auto w-full space-y-4 p-4 md:p-6", width === "7xl" ? "max-w-7xl" : "max-w-6xl", className);
   const searchField = showSearch ? /* @__PURE__ */ jsx(
     SearchField,
@@ -149,7 +170,7 @@ function SettingsLayout({
                 e.preventDefault();
                 route.back();
               },
-              className: cn("-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-[var(--text-muted)] hover:text-[var(--text-primary)]", FOCUS_RING),
+              className: cn("-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-muted hover:text-primary", FOCUS_RING),
               children: [
                 /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true, className: "size-4 rtl:-scale-x-100" }),
                 pageTitle
@@ -171,7 +192,7 @@ function SettingsLayout({
             "span",
             {
               "aria-hidden": true,
-              className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-[var(--bg-surface-2)] text-[var(--text-secondary)] [&_svg]:size-4",
+              className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-surface-2 text-secondary [&_svg]:size-4",
               children: g.icon
             }
           ),

package/dist/settings/settings-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/settings/settings-layout.tsx"],"sourcesContent":["import { useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Link, useHref, useLocation } from \"react-router\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { Button, Card, EmptyState, Tabs } from \"../components/ui\";\nimport { FOCUS_RING } from \"../components/focus-ring\";\nimport { Chip } from \"../components/chip\";\nimport { List, ListItem } from \"../components/list\";\nimport type { ListItemLinkProps } from \"../components/list\";\nimport { PageHeader } from \"../components/page-header\";\nimport { SearchField } from \"../components/search-field\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { createSearchIndex } from \"../search/search-index\";\nimport type { SearchEntry } from \"../search/search-index\";\nimport {\n  normalizeSettingsBase,\n  settingsHref,\n  settingsKeywords,\n  visibleSettingsEntries,\n} from \"./settings-catalogue\";\nimport type { SettingsEntry, SettingsGroup } from \"./settings-catalogue\";\nimport { SettingsLayoutContext } from \"./settings-context\";\nimport type { SettingsLayoutContextValue } from \"./settings-context\";\nimport { SettingsHeadingLevel } from \"./settings-heading\";\nimport { DEFAULT_SETTINGS_LABELS } from \"./settings-labels\";\nimport type { SettingsLabels } from \"./settings-labels\";\nimport { settingsFromListState, useSettingsRoute } from \"./use-settings-route\";\nimport type { SettingsLayoutMode } from \"./use-settings-route\";\nimport { useSettingsFocus } from \"./use-settings-focus\";\n\n/** The page's width cap (§3.2): `6xl` for settings, `7xl` for keksdose's admin, whose\n *  user table scrolled sideways at 6xl (dev#488). */\nexport type SettingsLayoutWidth = \"6xl\" | \"7xl\";\n\n/** More entries than this and the search field shows by itself (§3.4): Kurvenschmiede has\n *  about twelve, keksdose 26; a page of six needs none. */\nexport const SETTINGS_SEARCH_THRESHOLD = 8;\n\nexport interface SettingsLayoutProps<G extends string> {\n  /** The page's `h1`: \"Settings\", \"Administration\". Default: `labels.title`. */\n  title?: ReactNode;\n  /** The groups, in order (§4.2). */\n  groups: readonly SettingsGroup<G>[];\n  /** One entry per setting (§4.1). Hidden entries leave search; a group left without a\n   *  visible one is hidden. */\n  entries: readonly SettingsEntry<G>[];\n  /** `/settings` or `/admin`. The layout owns every path below it. */\n  basePath: string;\n  /** The group `/settings` opens on a desktop. Default: the first visible one. */\n  defaultGroup?: G;\n  /** Retired group ids and their successors, replaced in the address (§3.1). */\n  aliases?: Readonly<Partial<Record<string, G>>>;\n  /**\n   * The search field. Left out, it shows once more than {@link SETTINGS_SEARCH_THRESHOLD}\n   * entries are visible; `true` or `false` wins over the count — keksdose's admin keeps\n   * none (§3.4, §10.3). ⌘K gets the entries either way ({@link settingsSearchEntries}).\n   */\n  search?: boolean;\n  /** See {@link SettingsLayoutWidth}. Default `\"6xl\"`. */\n  width?: SettingsLayoutWidth;\n  /** The group's cards, in one column. `sub` is the path segment after the group, which\n   *  a card owns (`useSettingsLayout().selectSub`). */\n  renderGroup: (group: G, sub: string | null) => ReactNode;\n  /**\n   * Rows under the phone's group list that LEAVE settings — kastlan's \"Administration\",\n   * its import page (§3.3, §5). `ListItem`s with an `href`; the layout puts them in a list\n   * of their own, so they never read as a group. Not shown on a desktop, where the app's\n   * own navigation carries them.\n   */\n  phoneFooter?: ReactNode;\n  /** Prop > `<UiKitProvider labels={{ settings }}>` > English. */\n  labels?: Partial<SettingsLabels>;\n  /** See {@link SettingsLayoutMode}. Default `\"auto\"`: the screen decides. */\n  layout?: SettingsLayoutMode;\n  className?: string;\n}\n\ninterface Searchable<G extends string> extends SearchEntry {\n  anchor: string;\n  settingsGroup: G;\n}\n\n/**\n * The settings page (docs/settings-harmonization.md §3), and the admin page built the\n * same way (§5). keksdose's page is the reference for the desktop; the phone pattern and\n * the path segments are new for all three apps.\n *\n * **Desktop** (§3.2): the page's `PageHeader`, the search field, then a 14rem sidebar —\n * the kit's vertical `Tabs`, a link per group, sticky so a long group keeps the list in\n * view — beside the open group: its heading (`h2`), its help line and its cards in ONE\n * column, never a masonry (keksdose dev#490/#493).\n *\n * **Phone** (§3.3, below `md`): a drill-down. `/settings` is a list of the groups (icon,\n * name, help line, chevron) with `phoneFooter` under it; a group is a page of its own with\n * a back link, its name as the `h1` and the cards under it. It replaces keksdose's chip\n * strip.\n *\n * **Routes, history and `?focus=`** are {@link useSettingsRoute}'s and\n * {@link useSettingsFocus}'s. **Search** (§3.4) runs the kit's matcher over the catalogue:\n * accents folded, ranked, over the title, the group's name and the keywords. On a desktop\n * the sidebar dims the groups without hits and counts the others' while the hits replace\n * the group; on a phone they replace the list. A hit is a link to its card.\n *\n * The cards inside read {@link useSettingsLayout} for `selectSub`, and their titles are\n * headings under the group's ({@link SettingsHeadingLevel}).\n */\nexport function SettingsLayout<G extends string>({\n  title,\n  groups,\n  entries,\n  basePath,\n  defaultGroup,\n  aliases,\n  search,\n  width = \"6xl\",\n  renderGroup,\n  phoneFooter,\n  labels: labelsProp,\n  layout = \"auto\",\n  className,\n}: SettingsLayoutProps<G>): ReactElement {\n  const labels = useKitLabels(\"settings\", DEFAULT_SETTINGS_LABELS, labelsProp);\n  const base = normalizeSettingsBase(basePath);\n  const route = useSettingsRoute({ groups, entries, basePath: base, defaultGroup, aliases, layout });\n  const location = useLocation();\n  // The browser URL of an app path, for the sidebar's real links (a middle click opens a\n  // tab): `#/settings/…` under a hash router, the basename in front under a browser one.\n  const root = useHref(\"/\").replace(/\\/$/, \"\");\n  const panelId = useId();\n  const searchRef = useRef<HTMLInputElement>(null);\n  const [query, setQuery] = useState(\"\");\n\n  const visibleEntries = useMemo(() => visibleSettingsEntries(groups, entries), [groups, entries]);\n  const showSearch = search ?? visibleEntries.length > SETTINGS_SEARCH_THRESHOLD;\n  const trimmed = query.trim();\n  const searching = showSearch && trimmed !== \"\";\n\n  const groupById = useMemo(() => new Map(route.groups.map((g) => [g.id, g])), [route.groups]);\n  const index = useMemo(\n    () =>\n      createSearchIndex<Searchable<G>>(\n        visibleEntries.map((e) => ({\n          id: e.id,\n          title: e.title,\n          keywords: [groupById.get(e.group)?.title ?? e.group, ...settingsKeywords(e.keywords)],\n          group: e.group,\n          anchor: e.anchor,\n          settingsGroup: e.group,\n        })),\n        // Every hit: the list is the page's whole answer, not a palette's top few.\n        { groupLimit: Infinity },\n      ),\n    [visibleEntries, groupById],\n  );\n  const hits = useMemo(() => (searching ? index.search(trimmed).map((h) => h.entry) : []), [searching, index, trimmed]);\n  const hitsByGroup = useMemo(() => {\n    const counts = new Map<G, number>();\n    for (const hit of hits) counts.set(hit.settingsGroup, (counts.get(hit.settingsGroup) ?? 0) + 1);\n    return counts;\n  }, [hits]);\n\n  const anchors = useMemo(() => new Set(entries.map((e) => e.anchor)), [entries]);\n  const { phone, group, sub, selectSub, select } = route;\n  const headingLevel = phone ? \"h2\" : \"h3\";\n  const context = useMemo<SettingsLayoutContextValue>(\n    () => ({\n      basePath: base,\n      group,\n      sub,\n      selectSub,\n      headingLevel,\n      hasAnchor: (anchor) => anchors.has(anchor),\n    }),\n    [base, group, sub, selectSub, headingLevel, anchors],\n  );\n\n  // Not while the address is about to be replaced (its removal of `focus` would undo the\n  // replace), not on the list, and not while the hits stand where the cards would be (a\n  // phone's group page has no search: a query left from its list does not count there).\n  const hitsShown = searching && (!phone || group === null);\n  useSettingsFocus(route.redirecting || group === null || hitsShown ? null : route.focus);\n\n  // A link inside the page. On a phone it opens a page of its own — a push that marks the\n  // list as the entry before it, so the group page's back is a real back. On a desktop\n  // it switches the group in place — a replace.\n  const { state } = location;\n  const renderLink = useCallback(\n    ({ href, ...props }: ListItemLinkProps) => (\n      <Link to={href} replace={!phone} state={phone ? settingsFromListState() : state} {...props} />\n    ),\n    [phone, state],\n  );\n\n  const clearSearch = () => {\n    setQuery(\"\");\n    // The button that was pressed goes with the empty state; the field is where the\n    // next query is typed.\n    searchRef.current?.focus();\n  };\n\n  const pageTitle = title ?? labels.title;\n  const pageClass = cn(\"mx-auto w-full space-y-4 p-4 md:p-6\", width === \"7xl\" ? \"max-w-7xl\" : \"max-w-6xl\", className);\n\n  const searchField = showSearch ? (\n    <SearchField\n      ref={searchRef}\n      className=\"max-w-md\"\n      value={query}\n      onChange={setQuery}\n      aria-label={labels.search}\n      placeholder={labels.searchPlaceholder}\n    />\n  ) : null;\n\n  const results =\n    hits.length === 0 ? (\n      <EmptyState\n        title={labels.noMatches(trimmed)}\n        action={\n          <Button variant=\"secondary\" size=\"sm\" onClick={clearSearch}>\n            {labels.clearSearch}\n          </Button>\n        }\n      />\n    ) : (\n      <Card className=\"p-1\">\n        <List separator=\"divider\" density=\"comfortable\" aria-label={labels.results}>\n          {hits.map((hit) => (\n            <ListItem\n              key={hit.id}\n              title={hit.title}\n              trailing={groupById.get(hit.settingsGroup)?.title}\n              href={settingsHref(base, hit.settingsGroup, hit.anchor)}\n              renderLink={renderLink}\n              // Leave search on the way: the hit's card is what the user asked for.\n              onClick={() => setQuery(\"\")}\n            />\n          ))}\n        </List>\n      </Card>\n    );\n\n  const cards = (open: G) => (\n    <SettingsHeadingLevel level={headingLevel}>\n      <div className=\"space-y-4\">{renderGroup(open, sub)}</div>\n    </SettingsHeadingLevel>\n  );\n\n  let body: ReactNode;\n  if (phone) {\n    const open = group === null ? undefined : groupById.get(group);\n    body = open ? (\n      <div className={pageClass} data-settings-view=\"group\">\n        <PageHeader\n          size=\"compact\"\n          title={open.title}\n          description={open.help}\n          breadcrumbs={\n            <Link\n              to={base || \"/\"}\n              aria-label={labels.back}\n              onClick={(e) => {\n                // A real link for a middle click; a plain click is the page's own back,\n                // which is `navigate(-1)` when the list is the entry before this one.\n                if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n                e.preventDefault();\n                route.back();\n              }}\n              className={cn(\"-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-[var(--text-muted)] hover:text-[var(--text-primary)]\", FOCUS_RING)}\n            >\n              <ChevronLeft aria-hidden className=\"size-4 rtl:-scale-x-100\" />\n              {pageTitle}\n            </Link>\n          }\n        />\n        {cards(open.id)}\n      </div>\n    ) : (\n      <div className={pageClass} data-settings-view=\"list\">\n        <PageHeader size=\"compact\" title={pageTitle} />\n        {searchField}\n        {searching ? (\n          results\n        ) : (\n          <Card className=\"p-1\">\n            <List separator=\"divider\" density=\"comfortable\" aria-label={labels.sections}>\n              {route.groups.map((g) => (\n                <ListItem\n                  key={g.id}\n                  href={settingsHref(base, g.id)}\n                  renderLink={renderLink}\n                  leading={\n                    <span\n                      aria-hidden\n                      className=\"flex size-8 shrink-0 items-center justify-center rounded-md bg-[var(--bg-surface-2)] text-[var(--text-secondary)] [&_svg]:size-4\"\n                    >\n                      {g.icon}\n                    </span>\n                  }\n                  title={g.title}\n                  subtitle={g.help}\n                  trailing={<ChevronRight aria-hidden className=\"size-4 rtl:-scale-x-100\" />}\n                />\n              ))}\n            </List>\n          </Card>\n        )}\n        {!searching && phoneFooter != null && (\n          <Card className=\"p-1\">\n            <List separator=\"divider\" density=\"comfortable\">\n              {phoneFooter}\n            </List>\n          </Card>\n        )}\n      </div>\n    );\n  } else {\n    const open = group === null ? undefined : groupById.get(group);\n    body = (\n      <div className={pageClass} data-settings-view=\"desktop\">\n        <PageHeader size=\"compact\" title={pageTitle} />\n        {searchField}\n        <div className=\"md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:gap-6\">\n          <Tabs<G>\n            orientation=\"vertical\"\n            aria-label={labels.sections}\n            // Sticky (new in the harmonisation, §3.2): keksdose's notifications group\n            // scrolls for screens, and the list should stay in view beside it.\n            className=\"mb-4 md:sticky md:top-6 md:mb-0 md:self-start\"\n            panelId={open && !searching ? panelId : undefined}\n            tabs={route.groups.map((g) => {\n              const count = hitsByGroup.get(g.id) ?? 0;\n              // While searching, the groups with nothing to show step back (keksdose).\n              const dim = searching && count === 0;\n              return {\n                id: g.id,\n                href: `${root}${settingsHref(base, g.id)}`,\n                name: g.title,\n                label: <span className={cn(dim && \"opacity-40\")}>{g.title}</span>,\n                icon: <span className={cn(\"inline-flex [&_svg]:size-4\", dim && \"opacity-40\")}>{g.icon}</span>,\n                badge:\n                  searching && count > 0 ? (\n                    <Chip size=\"sm\" tone=\"brand\">\n                      <span aria-hidden>{count}</span>\n                      <span className=\"sr-only-fixed\">{labels.matchCount(count)}</span>\n                    </Chip>\n                  ) : undefined,\n              };\n            })}\n            active={(open?.id ?? route.groups[0]?.id) as G}\n            onChange={(id) => {\n              // While searching the hits stand where the group would; a click on a group\n              // means \"go there\", so the search makes way (keksdose).\n              setQuery(\"\");\n              select(id);\n            }}\n          />\n          <div className=\"min-w-0 space-y-4\">\n            {searching ? (\n              results\n            ) : open ? (\n              <div\n                id={panelId}\n                role=\"tabpanel\"\n                aria-labelledby={`${panelId}-tab`}\n                className=\"space-y-4\"\n              >\n                <PageHeader as=\"h2\" size=\"sm\" title={open.title} description={open.help} />\n                {cards(open.id)}\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return <SettingsLayoutContext.Provider value={context}>{body}</SettingsLayoutContext.Provider>;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/settings/settings-layout.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Link, useHref, useLocation } from \"react-router\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { Button } from \"../components/button\";\nimport { Card } from \"../components/card\";\nimport { EmptyState } from \"../components/empty-state\";\nimport { Tabs } from \"../components/tabs\";\nimport { FOCUS_RING } from \"../components/focus-ring\";\nimport { Chip } from \"../components/chip\";\nimport { List, ListItem } from \"../components/list\";\nimport type { ListItemLinkProps } from \"../components/list\";\nimport { PageHeader } from \"../components/page-header\";\nimport { SearchField } from \"../components/search-field\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { createSearchIndex } from \"../search/search-index\";\nimport type { SearchEntry } from \"../search/search-index\";\nimport {\n  normalizeSettingsBase,\n  settingsHref,\n  settingsKeywords,\n  visibleSettingsEntries,\n} from \"./settings-catalogue\";\nimport type { SettingsEntry, SettingsGroup } from \"./settings-catalogue\";\nimport { SettingsLayoutContext } from \"./settings-context\";\nimport type { SettingsLayoutContextValue } from \"./settings-context\";\nimport { SettingsHeadingLevel } from \"./settings-heading\";\nimport { DEFAULT_SETTINGS_LABELS } from \"./settings-labels\";\nimport type { SettingsLabels } from \"./settings-labels\";\nimport { settingsFromListState, useSettingsRoute } from \"./use-settings-route\";\nimport type { SettingsLayoutMode } from \"./use-settings-route\";\nimport { useSettingsFocus } from \"./use-settings-focus\";\n\n/** The page's width cap (§3.2): `6xl` for settings, `7xl` for keksdose's admin, whose\n *  user table scrolled sideways at 6xl (dev#488). */\nexport type SettingsLayoutWidth = \"6xl\" | \"7xl\";\n\n/** More entries than this and the search field shows by itself (§3.4): Kurvenschmiede has\n *  about twelve, keksdose 26; a page of six needs none. */\nexport const SETTINGS_SEARCH_THRESHOLD = 8;\n\nexport interface SettingsLayoutProps<G extends string> {\n  /** The page's `h1`: \"Settings\", \"Administration\". Default: `labels.title`. */\n  title?: ReactNode;\n  /** The groups, in order (§4.2). */\n  groups: readonly SettingsGroup<G>[];\n  /** One entry per setting (§4.1). Hidden entries leave search; a group left without a\n   *  visible one is hidden. */\n  entries: readonly SettingsEntry<G>[];\n  /** `/settings` or `/admin`. The layout owns every path below it. */\n  basePath: string;\n  /** The group `/settings` opens on a desktop. Default: the first visible one. */\n  defaultGroup?: G;\n  /** Retired group ids and their successors, replaced in the address (§3.1). */\n  aliases?: Readonly<Partial<Record<string, G>>>;\n  /**\n   * The search field. Left out, it shows once more than {@link SETTINGS_SEARCH_THRESHOLD}\n   * entries are visible; `true` or `false` wins over the count — keksdose's admin keeps\n   * none (§3.4, §10.3). ⌘K gets the entries either way ({@link settingsSearchEntries}).\n   */\n  search?: boolean;\n  /** See {@link SettingsLayoutWidth}. Default `\"6xl\"`. */\n  width?: SettingsLayoutWidth;\n  /** The group's cards, in one column. `sub` is the path segment after the group, which\n   *  a card owns (`useSettingsLayout().selectSub`). */\n  renderGroup: (group: G, sub: string | null) => ReactNode;\n  /**\n   * Rows under the phone's group list that LEAVE settings — kastlan's \"Administration\",\n   * its import page (§3.3, §5). `ListItem`s with an `href`; the layout puts them in a list\n   * of their own, so they never read as a group. Not shown on a desktop, where the app's\n   * own navigation carries them.\n   */\n  phoneFooter?: ReactNode;\n  /** Prop > `<UiKitProvider labels={{ settings }}>` > English. */\n  labels?: LabelOverride<SettingsLabels>;\n  /** See {@link SettingsLayoutMode}. Default `\"auto\"`: the screen decides. */\n  layout?: SettingsLayoutMode;\n  /**\n   * The app's name, the last part of the window's title: \"Security · Settings ·\n   * Kastlan\" (§3.1). Left out, the title ends at the page: \"Security · Settings\".\n   */\n  appName?: string;\n  /**\n   * The window's title (`document.title`, §3.1) — round 0.34 C8, KS U7. By default the\n   * layout writes \"<group> · <page> · <appName>\" while a group is open and\n   * \"<page> · <appName>\" on the phone's list, and puts back the title it found when it\n   * unmounts. `<page>` is `title` when that is a string, else `labels.title`.\n   *\n   * A function writes another order or another separator from the same parts; `false`\n   * leaves `document.title` to the app. Kastlan's `SettingsChrome` and Kurvenschmiede's\n   * `GroupTitle` were this effect written by hand, and Kurvenschmiede's admin page, on\n   * the same layout, had none — every admin section was titled \"Kurvenschmiede\".\n   */\n  documentTitle?: false | ((parts: SettingsDocumentTitleParts) => string);\n  className?: string;\n}\n\n/** What {@link SettingsLayoutProps.documentTitle} is given to write the window's title. */\nexport interface SettingsDocumentTitleParts {\n  /** The open group's name, or `null` on the phone's list of groups. */\n  group: string | null;\n  /** The page: `title` when it is a string, else `labels.title` (\"Settings\"). */\n  page: string;\n  /** The `appName` prop, or `undefined`. */\n  appName: string | undefined;\n}\n\n/** \"Security · Settings · Kastlan\" (§3.1); a part that is missing is left out. */\nfunction defaultDocumentTitle({ group, page, appName }: SettingsDocumentTitleParts): string {\n  return [group, page, appName].filter((part): part is string => Boolean(part)).join(\" · \");\n}\n\ninterface Searchable<G extends string> extends SearchEntry {\n  anchor: string;\n  settingsGroup: G;\n}\n\n/**\n * The settings page (docs/settings-harmonization.md §3), and the admin page built the\n * same way (§5). keksdose's page is the reference for the desktop; the phone pattern and\n * the path segments are new for all three apps.\n *\n * **Desktop** (§3.2): the page's `PageHeader`, the search field, then a 14rem sidebar —\n * the kit's vertical `Tabs`, a link per group, sticky so a long group keeps the list in\n * view — beside the open group: its heading (`h2`), its help line and its cards in ONE\n * column, never a masonry (keksdose dev#490/#493).\n *\n * **Phone** (§3.3, below `md`): a drill-down. `/settings` is a list of the groups (icon,\n * name, help line, chevron) with `phoneFooter` under it; a group is a page of its own with\n * a back link, its name as the `h1` and the cards under it. It replaces keksdose's chip\n * strip.\n *\n * **Routes, history and `?focus=`** are {@link useSettingsRoute}'s and\n * {@link useSettingsFocus}'s. **Search** (§3.4) runs the kit's matcher over the catalogue:\n * accents folded, ranked, over the title, the group's name and the keywords. On a desktop\n * the sidebar dims the groups without hits and counts the others' while the hits replace\n * the group; on a phone they replace the list. A hit is a link to its card.\n *\n * The cards inside read {@link useSettingsLayout} for `selectSub`, and their titles are\n * headings under the group's ({@link SettingsHeadingLevel}).\n */\nexport function SettingsLayout<G extends string>({\n  title,\n  groups,\n  entries,\n  basePath,\n  defaultGroup,\n  aliases,\n  search,\n  width = \"6xl\",\n  renderGroup,\n  phoneFooter,\n  labels: labelsProp,\n  layout = \"auto\",\n  appName,\n  documentTitle,\n  className,\n}: SettingsLayoutProps<G>): ReactElement {\n  const labels = useKitLabels(\"settings\", DEFAULT_SETTINGS_LABELS, labelsProp);\n  const base = normalizeSettingsBase(basePath);\n  const route = useSettingsRoute({ groups, entries, basePath: base, defaultGroup, aliases, layout });\n  const location = useLocation();\n  // The browser URL of an app path, for the sidebar's real links (a middle click opens a\n  // tab): `#/settings/…` under a hash router, the basename in front under a browser one.\n  const root = useHref(\"/\").replace(/\\/$/, \"\");\n  const panelId = useId();\n  const searchRef = useRef<HTMLInputElement>(null);\n  const [query, setQuery] = useState(\"\");\n\n  const visibleEntries = useMemo(() => visibleSettingsEntries(groups, entries), [groups, entries]);\n  const showSearch = search ?? visibleEntries.length > SETTINGS_SEARCH_THRESHOLD;\n  const trimmed = query.trim();\n  const searching = showSearch && trimmed !== \"\";\n\n  const groupById = useMemo(() => new Map(route.groups.map((g) => [g.id, g])), [route.groups]);\n  const index = useMemo(\n    () =>\n      createSearchIndex<Searchable<G>>(\n        visibleEntries.map((e) => ({\n          id: e.id,\n          title: e.title,\n          keywords: [groupById.get(e.group)?.title ?? e.group, ...settingsKeywords(e.keywords)],\n          group: e.group,\n          anchor: e.anchor,\n          settingsGroup: e.group,\n        })),\n        // Every hit: the list is the page's whole answer, not a palette's top few.\n        { groupLimit: Infinity },\n      ),\n    [visibleEntries, groupById],\n  );\n  const hits = useMemo(() => (searching ? index.search(trimmed).map((h) => h.entry) : []), [searching, index, trimmed]);\n  const hitsByGroup = useMemo(() => {\n    const counts = new Map<G, number>();\n    for (const hit of hits) counts.set(hit.settingsGroup, (counts.get(hit.settingsGroup) ?? 0) + 1);\n    return counts;\n  }, [hits]);\n\n  const anchors = useMemo(() => new Set(entries.map((e) => e.anchor)), [entries]);\n  const { phone, group, sub, selectSub, select } = route;\n  const headingLevel = phone ? \"h2\" : \"h3\";\n  const context = useMemo<SettingsLayoutContextValue>(\n    () => ({\n      basePath: base,\n      group,\n      sub,\n      selectSub,\n      headingLevel,\n      hasAnchor: (anchor) => anchors.has(anchor),\n    }),\n    [base, group, sub, selectSub, headingLevel, anchors],\n  );\n\n  // Not while the address is about to be replaced (its removal of `focus` would undo the\n  // replace), not on the list, and not while the hits stand where the cards would be (a\n  // phone's group page has no search: a query left from its list does not count there).\n  const hitsShown = searching && (!phone || group === null);\n  useSettingsFocus(route.redirecting || group === null || hitsShown ? null : route.focus);\n\n  // A link inside the page. On a phone it opens a page of its own — a push that marks the\n  // list as the entry before it, so the group page's back is a real back. On a desktop\n  // it switches the group in place — a replace.\n  const { state } = location;\n  const renderLink = useCallback(\n    ({ href, ...props }: ListItemLinkProps) => (\n      <Link to={href} replace={!phone} state={phone ? settingsFromListState() : state} {...props} />\n    ),\n    [phone, state],\n  );\n\n  const clearSearch = () => {\n    setQuery(\"\");\n    // The button that was pressed goes with the empty state; the field is where the\n    // next query is typed.\n    searchRef.current?.focus();\n  };\n\n  const pageTitle = title ?? labels.title;\n\n  // The window's title (§3.1). Computed to a string during render so the effect below\n  // runs when the words change, not whenever an inline `documentTitle` function is new.\n  // Each run puts back the title it found before writing its own, so a group switch\n  // ends where it began and the unmount leaves the title the page had before settings.\n  const windowTitle =\n    documentTitle === false\n      ? null\n      : (documentTitle ?? defaultDocumentTitle)({\n          group: group === null ? null : (groupById.get(group)?.title ?? null),\n          page: typeof title === \"string\" ? title : labels.title,\n          appName,\n        });\n  useEffect(() => {\n    if (windowTitle === null) return;\n    const before = document.title;\n    document.title = windowTitle;\n    return () => {\n      document.title = before;\n    };\n  }, [windowTitle]);\n\n  const pageClass = cn(\"mx-auto w-full space-y-4 p-4 md:p-6\", width === \"7xl\" ? \"max-w-7xl\" : \"max-w-6xl\", className);\n\n  const searchField = showSearch ? (\n    <SearchField\n      ref={searchRef}\n      className=\"max-w-md\"\n      value={query}\n      onChange={setQuery}\n      aria-label={labels.search}\n      placeholder={labels.searchPlaceholder}\n    />\n  ) : null;\n\n  const results =\n    hits.length === 0 ? (\n      <EmptyState\n        title={labels.noMatches(trimmed)}\n        action={\n          <Button variant=\"secondary\" size=\"sm\" onClick={clearSearch}>\n            {labels.clearSearch}\n          </Button>\n        }\n      />\n    ) : (\n      <Card className=\"p-1\">\n        <List separator=\"divider\" density=\"comfortable\" aria-label={labels.results}>\n          {hits.map((hit) => (\n            <ListItem\n              key={hit.id}\n              title={hit.title}\n              trailing={groupById.get(hit.settingsGroup)?.title}\n              href={settingsHref(base, hit.settingsGroup, hit.anchor)}\n              renderLink={renderLink}\n              // Leave search on the way: the hit's card is what the user asked for.\n              onClick={() => setQuery(\"\")}\n            />\n          ))}\n        </List>\n      </Card>\n    );\n\n  const cards = (open: G) => (\n    <SettingsHeadingLevel level={headingLevel}>\n      <div className=\"space-y-4\">{renderGroup(open, sub)}</div>\n    </SettingsHeadingLevel>\n  );\n\n  let body: ReactNode;\n  if (phone) {\n    const open = group === null ? undefined : groupById.get(group);\n    body = open ? (\n      <div className={pageClass} data-settings-view=\"group\">\n        <PageHeader\n          size=\"compact\"\n          title={open.title}\n          description={open.help}\n          breadcrumbs={\n            <Link\n              to={base || \"/\"}\n              aria-label={labels.back}\n              onClick={(e) => {\n                // A real link for a middle click; a plain click is the page's own back,\n                // which is `navigate(-1)` when the list is the entry before this one.\n                if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n                e.preventDefault();\n                route.back();\n              }}\n              className={cn(\"-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-muted hover:text-primary\", FOCUS_RING)}\n            >\n              <ChevronLeft aria-hidden className=\"size-4 rtl:-scale-x-100\" />\n              {pageTitle}\n            </Link>\n          }\n        />\n        {cards(open.id)}\n      </div>\n    ) : (\n      <div className={pageClass} data-settings-view=\"list\">\n        <PageHeader size=\"compact\" title={pageTitle} />\n        {searchField}\n        {searching ? (\n          results\n        ) : (\n          <Card className=\"p-1\">\n            <List separator=\"divider\" density=\"comfortable\" aria-label={labels.sections}>\n              {route.groups.map((g) => (\n                <ListItem\n                  key={g.id}\n                  href={settingsHref(base, g.id)}\n                  renderLink={renderLink}\n                  leading={\n                    <span\n                      aria-hidden\n                      className=\"flex size-8 shrink-0 items-center justify-center rounded-md bg-surface-2 text-secondary [&_svg]:size-4\"\n                    >\n                      {g.icon}\n                    </span>\n                  }\n                  title={g.title}\n                  subtitle={g.help}\n                  trailing={<ChevronRight aria-hidden className=\"size-4 rtl:-scale-x-100\" />}\n                />\n              ))}\n            </List>\n          </Card>\n        )}\n        {!searching && phoneFooter != null && (\n          <Card className=\"p-1\">\n            <List separator=\"divider\" density=\"comfortable\">\n              {phoneFooter}\n            </List>\n          </Card>\n        )}\n      </div>\n    );\n  } else {\n    const open = group === null ? undefined : groupById.get(group);\n    body = (\n      <div className={pageClass} data-settings-view=\"desktop\">\n        <PageHeader size=\"compact\" title={pageTitle} />\n        {searchField}\n        <div className=\"md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:gap-6\">\n          <Tabs<G>\n            orientation=\"vertical\"\n            aria-label={labels.sections}\n            // Sticky (new in the harmonisation, §3.2): keksdose's notifications group\n            // scrolls for screens, and the list should stay in view beside it.\n            className=\"mb-4 md:sticky md:top-6 md:mb-0 md:self-start\"\n            panelId={open && !searching ? panelId : undefined}\n            tabs={route.groups.map((g) => {\n              const count = hitsByGroup.get(g.id) ?? 0;\n              // While searching, the groups with nothing to show step back (keksdose).\n              const dim = searching && count === 0;\n              return {\n                id: g.id,\n                href: `${root}${settingsHref(base, g.id)}`,\n                name: g.title,\n                label: <span className={cn(dim && \"opacity-40\")}>{g.title}</span>,\n                icon: <span className={cn(\"inline-flex [&_svg]:size-4\", dim && \"opacity-40\")}>{g.icon}</span>,\n                badge:\n                  searching && count > 0 ? (\n                    <Chip size=\"sm\" tone=\"brand\">\n                      <span aria-hidden>{count}</span>\n                      <span className=\"sr-only-fixed\">{labels.matchCount(count)}</span>\n                    </Chip>\n                  ) : undefined,\n              };\n            })}\n            active={(open?.id ?? route.groups[0]?.id) as G}\n            onChange={(id) => {\n              // While searching the hits stand where the group would; a click on a group\n              // means \"go there\", so the search makes way (keksdose).\n              setQuery(\"\");\n              select(id);\n            }}\n          />\n          <div className=\"min-w-0 space-y-4\">\n            {searching ? (\n              results\n            ) : open ? (\n              <div\n                id={panelId}\n                role=\"tabpanel\"\n                aria-labelledby={`${panelId}-tab`}\n                className=\"space-y-4\"\n              >\n                <PageHeader as=\"h2\" size=\"sm\" title={open.title} description={open.help} />\n                {cards(open.id)}\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return <SettingsLayoutContext.Provider value={context}>{body}</SettingsLayoutContext.Provider>;\n}\n"],"mappings":";AAkOM,cA4FM,YA5FN;AAlON,SAAS,aAAa,WAAW,OAAO,SAAS,QAAQ,gBAAgB;AAEzE,SAAS,MAAM,SAAS,mBAAmB;AAC3C,SAAS,aAAa,oBAAoB;AAC1C,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,MAAM,gBAAgB;AAE/B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AACnB,SAAS,oBAAwC;AACjD,SAAS,yBAAyB;AAElC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,6BAA6B;AAEtC,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAExC,SAAS,uBAAuB,wBAAwB;AAExD,SAAS,wBAAwB;AAQ1B,MAAM,4BAA4B;AAqEzC,SAAS,qBAAqB,EAAE,OAAO,MAAM,QAAQ,GAAuC;AAC1F,SAAO,CAAC,OAAO,MAAM,OAAO,EAAE,OAAO,CAAC,SAAyB,QAAQ,IAAI,CAAC,EAAE,KAAK,QAAK;AAC1F;AA+BO,SAAS,eAAiC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,GAAyC;AACvC,QAAM,SAAS,aAAa,YAAY,yBAAyB,UAAU;AAC3E,QAAM,OAAO,sBAAsB,QAAQ;AAC3C,QAAM,QAAQ,iBAAiB,EAAE,QAAQ,SAAS,UAAU,MAAM,cAAc,SAAS,OAAO,CAAC;AACjG,QAAM,WAAW,YAAY;AAG7B,QAAM,OAAO,QAAQ,GAAG,EAAE,QAAQ,OAAO,EAAE;AAC3C,QAAM,UAAU,MAAM;AACtB,QAAM,YAAY,OAAyB,IAAI;AAC/C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AAErC,QAAM,iBAAiB,QAAQ,MAAM,uBAAuB,QAAQ,OAAO,GAAG,CAAC,QAAQ,OAAO,CAAC;AAC/F,QAAM,aAAa,UAAU,eAAe,SAAS;AACrD,QAAM,UAAU,MAAM,KAAK;AAC3B,QAAM,YAAY,cAAc,YAAY;AAE5C,QAAM,YAAY,QAAQ,MAAM,IAAI,IAAI,MAAM,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,MAAM,CAAC;AAC3F,QAAM,QAAQ;AAAA,IACZ,MACE;AAAA,MACE,eAAe,IAAI,CAAC,OAAO;AAAA,QACzB,IAAI,EAAE;AAAA,QACN,OAAO,EAAE;AAAA,QACT,UAAU,CAAC,UAAU,IAAI,EAAE,KAAK,GAAG,SAAS,EAAE,OAAO,GAAG,iBAAiB,EAAE,QAAQ,CAAC;AAAA,QACpF,OAAO,EAAE;AAAA,QACT,QAAQ,EAAE;AAAA,QACV,eAAe,EAAE;AAAA,MACnB,EAAE;AAAA;AAAA,MAEF,EAAE,YAAY,SAAS;AAAA,IACzB;AAAA,IACF,CAAC,gBAAgB,SAAS;AAAA,EAC5B;AACA,QAAM,OAAO,QAAQ,MAAO,YAAY,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI,CAAC,GAAI,CAAC,WAAW,OAAO,OAAO,CAAC;AACpH,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,SAAS,oBAAI,IAAe;AAClC,eAAW,OAAO,KAAM,QAAO,IAAI,IAAI,gBAAgB,OAAO,IAAI,IAAI,aAAa,KAAK,KAAK,CAAC;AAC9F,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,UAAU,QAAQ,MAAM,IAAI,IAAI,QAAQ,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC;AAC9E,QAAM,EAAE,OAAO,OAAO,KAAK,WAAW,OAAO,IAAI;AACjD,QAAM,eAAe,QAAQ,OAAO;AACpC,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,CAAC,WAAW,QAAQ,IAAI,MAAM;AAAA,IAC3C;AAAA,IACA,CAAC,MAAM,OAAO,KAAK,WAAW,cAAc,OAAO;AAAA,EACrD;AAKA,QAAM,YAAY,cAAc,CAAC,SAAS,UAAU;AACpD,mBAAiB,MAAM,eAAe,UAAU,QAAQ,YAAY,OAAO,MAAM,KAAK;AAKtF,QAAM,EAAE,MAAM,IAAI;AAClB,QAAM,aAAa;AAAA,IACjB,CAAC,EAAE,MAAM,GAAG,MAAM,MAChB,oBAAC,QAAK,IAAI,MAAM,SAAS,CAAC,OAAO,OAAO,QAAQ,sBAAsB,IAAI,OAAQ,GAAG,OAAO;AAAA,IAE9F,CAAC,OAAO,KAAK;AAAA,EACf;AAEA,QAAM,cAAc,MAAM;AACxB,aAAS,EAAE;AAGX,cAAU,SAAS,MAAM;AAAA,EAC3B;AAEA,QAAM,YAAY,SAAS,OAAO;AAMlC,QAAM,cACJ,kBAAkB,QACd,QACC,iBAAiB,sBAAsB;AAAA,IACtC,OAAO,UAAU,OAAO,OAAQ,UAAU,IAAI,KAAK,GAAG,SAAS;AAAA,IAC/D,MAAM,OAAO,UAAU,WAAW,QAAQ,OAAO;AAAA,IACjD;AAAA,EACF,CAAC;AACP,YAAU,MAAM;AACd,QAAI,gBAAgB,KAAM;AAC1B,UAAM,SAAS,SAAS;AACxB,aAAS,QAAQ;AACjB,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,YAAY,GAAG,uCAAuC,UAAU,QAAQ,cAAc,aAAa,SAAS;AAElH,QAAM,cAAc,aAClB;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,cAAY,OAAO;AAAA,MACnB,aAAa,OAAO;AAAA;AAAA,EACtB,IACE;AAEJ,QAAM,UACJ,KAAK,WAAW,IACd;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,OAAO,UAAU,OAAO;AAAA,MAC/B,QACE,oBAAC,UAAO,SAAQ,aAAY,MAAK,MAAK,SAAS,aAC5C,iBAAO,aACV;AAAA;AAAA,EAEJ,IAEA,oBAAC,QAAK,WAAU,OACd,8BAAC,QAAK,WAAU,WAAU,SAAQ,eAAc,cAAY,OAAO,SAChE,eAAK,IAAI,CAAC,QACT;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO,IAAI;AAAA,MACX,UAAU,UAAU,IAAI,IAAI,aAAa,GAAG;AAAA,MAC5C,MAAM,aAAa,MAAM,IAAI,eAAe,IAAI,MAAM;AAAA,MACtD;AAAA,MAEA,SAAS,MAAM,SAAS,EAAE;AAAA;AAAA,IANrB,IAAI;AAAA,EAOX,CACD,GACH,GACF;AAGJ,QAAM,QAAQ,CAAC,SACb,oBAAC,wBAAqB,OAAO,cAC3B,8BAAC,SAAI,WAAU,aAAa,sBAAY,MAAM,GAAG,GAAE,GACrD;AAGF,MAAI;AACJ,MAAI,OAAO;AACT,UAAM,OAAO,UAAU,OAAO,SAAY,UAAU,IAAI,KAAK;AAC7D,WAAO,OACL,qBAAC,SAAI,WAAW,WAAW,sBAAmB,SAC5C;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,KAAK;AAAA,UACZ,aAAa,KAAK;AAAA,UAClB,aACE;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,QAAQ;AAAA,cACZ,cAAY,OAAO;AAAA,cACnB,SAAS,CAAC,MAAM;AAGd,oBAAI,EAAE,WAAW,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,OAAQ;AACxE,kBAAE,eAAe;AACjB,sBAAM,KAAK;AAAA,cACb;AAAA,cACA,WAAW,GAAG,uHAAuH,UAAU;AAAA,cAE/I;AAAA,oCAAC,eAAY,eAAW,MAAC,WAAU,2BAA0B;AAAA,gBAC5D;AAAA;AAAA;AAAA,UACH;AAAA;AAAA,MAEJ;AAAA,MACC,MAAM,KAAK,EAAE;AAAA,OAChB,IAEA,qBAAC,SAAI,WAAW,WAAW,sBAAmB,QAC5C;AAAA,0BAAC,cAAW,MAAK,WAAU,OAAO,WAAW;AAAA,MAC5C;AAAA,MACA,YACC,UAEA,oBAAC,QAAK,WAAU,OACd,8BAAC,QAAK,WAAU,WAAU,SAAQ,eAAc,cAAY,OAAO,UAChE,gBAAM,OAAO,IAAI,CAAC,MACjB;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,aAAa,MAAM,EAAE,EAAE;AAAA,UAC7B;AAAA,UACA,SACE;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cAET,YAAE;AAAA;AAAA,UACL;AAAA,UAEF,OAAO,EAAE;AAAA,UACT,UAAU,EAAE;AAAA,UACZ,UAAU,oBAAC,gBAAa,eAAW,MAAC,WAAU,2BAA0B;AAAA;AAAA,QAbnE,EAAE;AAAA,MAcT,CACD,GACH,GACF;AAAA,MAED,CAAC,aAAa,eAAe,QAC5B,oBAAC,QAAK,WAAU,OACd,8BAAC,QAAK,WAAU,WAAU,SAAQ,eAC/B,uBACH,GACF;AAAA,OAEJ;AAAA,EAEJ,OAAO;AACL,UAAM,OAAO,UAAU,OAAO,SAAY,UAAU,IAAI,KAAK;AAC7D,WACE,qBAAC,SAAI,WAAW,WAAW,sBAAmB,WAC5C;AAAA,0BAAC,cAAW,MAAK,WAAU,OAAO,WAAW;AAAA,MAC5C;AAAA,MACD,qBAAC,SAAI,WAAU,uDACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,aAAY;AAAA,YACZ,cAAY,OAAO;AAAA,YAGnB,WAAU;AAAA,YACV,SAAS,QAAQ,CAAC,YAAY,UAAU;AAAA,YACxC,MAAM,MAAM,OAAO,IAAI,CAAC,MAAM;AAC5B,oBAAM,QAAQ,YAAY,IAAI,EAAE,EAAE,KAAK;AAEvC,oBAAM,MAAM,aAAa,UAAU;AACnC,qBAAO;AAAA,gBACL,IAAI,EAAE;AAAA,gBACN,MAAM,GAAG,IAAI,GAAG,aAAa,MAAM,EAAE,EAAE,CAAC;AAAA,gBACxC,MAAM,EAAE;AAAA,gBACR,OAAO,oBAAC,UAAK,WAAW,GAAG,OAAO,YAAY,GAAI,YAAE,OAAM;AAAA,gBAC1D,MAAM,oBAAC,UAAK,WAAW,GAAG,8BAA8B,OAAO,YAAY,GAAI,YAAE,MAAK;AAAA,gBACtF,OACE,aAAa,QAAQ,IACnB,qBAAC,QAAK,MAAK,MAAK,MAAK,SACnB;AAAA,sCAAC,UAAK,eAAW,MAAE,iBAAM;AAAA,kBACzB,oBAAC,UAAK,WAAU,iBAAiB,iBAAO,WAAW,KAAK,GAAE;AAAA,mBAC5D,IACE;AAAA,cACR;AAAA,YACF,CAAC;AAAA,YACD,QAAS,MAAM,MAAM,MAAM,OAAO,CAAC,GAAG;AAAA,YACtC,UAAU,CAAC,OAAO;AAGhB,uBAAS,EAAE;AACX,qBAAO,EAAE;AAAA,YACX;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,SAAI,WAAU,qBACZ,sBACC,UACE,OACF;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,MAAK;AAAA,YACL,mBAAiB,GAAG,OAAO;AAAA,YAC3B,WAAU;AAAA,YAEV;AAAA,kCAAC,cAAW,IAAG,MAAK,MAAK,MAAK,OAAO,KAAK,OAAO,aAAa,KAAK,MAAM;AAAA,cACxE,MAAM,KAAK,EAAE;AAAA;AAAA;AAAA,QAChB,IACE,MACN;AAAA,SACF;AAAA,OACF;AAAA,EAEJ;AAEA,SAAO,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,SAAU,gBAAK;AAC/D;","names":[]}

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

@@ -1,106 +1,6 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { c4 as CardTone } from '../delete-account-setting-DiPX4Vue.js';
-import '../components/tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import '../components/data-table-sort.js';
-import '../components/swipeable-row.js';
-import '../components/status-dot.js';
-import '../components/progress-bar.js';
-import '../components/signed-amount.js';
-import '../components/stat-tile.js';
-import '../components/chip.js';
-import 'lucide-react';
-import '../components/field-parts.js';
-import '../components/write-lock.js';
-import '../components/mini-calendar.js';
-import '../components/calendar-heatmap.js';
-import '../components/popover.js';
-import '../hooks/use-breakpoint.js';
-import '../components/field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import '../components/month-picker.js';
-import '../components/page-contents.js';
-import '../components/series-chart-labels.js';
-import '../components/pie-chart-labels.js';
-import '../components/sparkline.js';
-import '../components/signature-pad.js';
-import '../components/password-strength.js';
-import '../components/swatch-picker.js';
-import '../components/tile-radio.js';
-import '../components/icon-picker.js';
-import '../components/dialog-frame.js';
-import '../components/modal.js';
-import '../hooks/use-search-param-state.js';
-import '../components/measured-grid.js';
-import '../components/user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import '../components/menu-item.js';
-import '../components/floating-panel.js';
-import '../hooks/use-authed-src.js';
-import '../components/account-settings-labels.js';
-import '../components/bulk-action-bar.js';
-import '../components/list.js';
-import '../components/breadcrumbs.js';
-import '../components/toast.js';
-import '../components/description-list.js';
-import '../components/line-items.js';
-import '../components/error-boundary.js';
-import '../components/authed-image.js';
-import '../components/image-grid.js';
-import '../components/lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import '../components/account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import './settings-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';
-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';
-
-interface SettingsSectionProps extends Omit<ComponentPropsWithoutRef<"div">, "title" | "id"> {
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { CardTone } from "../components/card.js";
+export interface SettingsSectionProps extends Omit<ComponentPropsWithRef<"div">, "title" | "id"> {
     /** The card's DOM id — the catalogue entry's `anchor`, the `?focus=` target. */
     anchor: string;
     /** The card's name: a heading at the layout's level (`h3` by default). */
@@ -133,6 +33,4 @@ interface SettingsSectionProps extends Omit<ComponentPropsWithoutRef<"div">, "ti
  * inside a {@link SettingsLayout}, which holds the catalogue; outside one there is
  * nothing to check against.
  */
-declare function SettingsSection({ anchor, title, titleVisible, description, tone, action, children, className, ...rest }: SettingsSectionProps): react.JSX.Element;
-
-export { SettingsSection, type SettingsSectionProps };
+export declare function SettingsSection({ anchor, title, titleVisible, description, tone, action, children, className, ...rest }: SettingsSectionProps): import("react").JSX.Element;

package/dist/settings/settings-section.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Card } from "../components/ui.js";
+import { Card } from "../components/card.js";
 import { cn } from "../lib/cn.js";
-import { CARD_DESCRIPTION_CLASS, CARD_TITLE_CLASS } from "../account/account-parts.js";
+import { CARD_DESCRIPTION_CLASS, CARD_TITLE_CLASS } from "./settings-card-classes.js";
 import { SettingsHeading, useSettingsHeadingLevel } from "./settings-heading.js";
 import { useSettingsLayout } from "./settings-context.js";
 function devChecks() {

package/dist/settings/settings-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/settings/settings-section.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { Card } from \"../components/ui\";\nimport type { CardTone } from \"../components/ui\";\nimport { cn } from \"../lib/cn\";\nimport { CARD_DESCRIPTION_CLASS, CARD_TITLE_CLASS } from \"../account/account-parts\";\nimport { SettingsHeading, useSettingsHeadingLevel } from \"./settings-heading\";\nimport { useSettingsLayout } from \"./settings-context\";\n\nexport interface SettingsSectionProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\" | \"id\"> {\n  /** The card's DOM id — the catalogue entry's `anchor`, the `?focus=` target. */\n  anchor: string;\n  /** The card's name: a heading at the layout's level (`h3` by default). */\n  title: ReactNode;\n  /**\n   * `false` keeps the title for screen readers only — for a card alone in a group named\n   * after it, so the page does not print the same heading twice (§3.7, keksdose's admin,\n   * dev#490/#493/#494). The heading is still there: the outline and `?focus=` need it.\n   * Default `true`.\n   */\n  titleVisible?: boolean;\n  /** One muted line under the title. */\n  description?: ReactNode;\n  /** `danger` for the destructive cards at the end of \"data\" (§3.7). */\n  tone?: CardTone;\n  /** A control at the title's end — a refresh, a toggle. It drops under the title when\n   *  the card is too narrow for both. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Is this a development build? The consumer's bundler makes `import.meta.env.DEV` false in\n * production, so the check below is dead code there. Unlike the kit's warnings it stays\n * on under vitest: a card that cannot be found is a bug a test should fail on.\n * Optional-chained: `import.meta.env` is a Vite injection, absent under plain Node.\n */\nfunction devChecks(): boolean {\n  return Boolean(import.meta.env?.DEV);\n}\n\n/**\n * An app's own settings card (docs/settings-harmonization.md §3.7, §7.1): a kit `Card` at\n * the settings type scale — the title `text-sm font-medium`, the description `text-xs`\n * muted, as the kit's own setting cards — with the catalogue anchor as its id, the title\n * as a heading under the group's, and the `?focus=` ring landing on it.\n *\n * **A card without a catalogue entry throws in development** (keksdose's `section()`\n * guard). A card search cannot find breaks the rule that every setting is findable\n * (§4.1), and the old failure was silent: a hit that scrolled nowhere. The check runs\n * inside a {@link SettingsLayout}, which holds the catalogue; outside one there is\n * nothing to check against.\n */\nexport function SettingsSection({\n  anchor,\n  title,\n  titleVisible = true,\n  description,\n  tone,\n  action,\n  children,\n  className,\n  ...rest\n}: SettingsSectionProps) {\n  const layout = useSettingsLayout();\n  const level = useSettingsHeadingLevel() ?? \"h3\";\n  if (layout && devChecks() && !layout.hasAnchor(anchor)) {\n    throw new Error(\n      `SettingsSection \"${anchor}\" has no catalogue entry: add a SettingsEntry with anchor \"${anchor}\" so search and ?focus= can reach it.`,\n    );\n  }\n  const heading = (\n    <SettingsHeading\n      as={level}\n      // Focusable from script only: `?focus=` moves focus here (§3.5).\n      tabIndex={-1}\n      data-settings-heading=\"\"\n      className={cn(CARD_TITLE_CLASS, \"outline-none\", !titleVisible && \"sr-only-fixed\")}\n    >\n      {title}\n    </SettingsHeading>\n  );\n  const header =\n    titleVisible || description != null || action != null ? (\n      <div className=\"flex flex-wrap items-start justify-between gap-x-3 gap-y-2\">\n        <div className=\"min-w-0 flex-1 basis-48\">\n          {heading}\n          {description != null && <div className={CARD_DESCRIPTION_CLASS}>{description}</div>}\n        </div>\n        {action != null && <div className=\"flex shrink-0 items-center gap-2\">{action}</div>}\n      </div>\n    ) : (\n      heading\n    );\n  return (\n    <Card\n      {...rest}\n      id={anchor}\n      tone={tone}\n      // A column with a gap, not `space-y-3`: a hidden title is `position: fixed` and so\n      // out of the flow, and a gap is only drawn between items in it — `space-y` would\n      // still push the first card part down by a gap for the title nobody sees.\n      className={cn(\"flex flex-col gap-3 p-4 transition-shadow motion-reduce:transition-none\", className)}\n    >\n      {header}\n      {children}\n    </Card>\n  );\n}\n"],"mappings":";AAuEI,cAaI,YAbJ;AAtEJ,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,wBAAwB,wBAAwB;AACzD,SAAS,iBAAiB,+BAA+B;AACzD,SAAS,yBAAyB;AA8BlC,SAAS,YAAqB;AAC5B,SAAO,QAAQ,YAAY,KAAK,GAAG;AACrC;AAcO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,SAAS,kBAAkB;AACjC,QAAM,QAAQ,wBAAwB,KAAK;AAC3C,MAAI,UAAU,UAAU,KAAK,CAAC,OAAO,UAAU,MAAM,GAAG;AACtD,UAAM,IAAI;AAAA,MACR,oBAAoB,MAAM,8DAA8D,MAAM;AAAA,IAChG;AAAA,EACF;AACA,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MAEJ,UAAU;AAAA,MACV,yBAAsB;AAAA,MACtB,WAAW,GAAG,kBAAkB,gBAAgB,CAAC,gBAAgB,eAAe;AAAA,MAE/E;AAAA;AAAA,EACH;AAEF,QAAM,SACJ,gBAAgB,eAAe,QAAQ,UAAU,OAC/C,qBAAC,SAAI,WAAU,8DACb;AAAA,yBAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,MACA,eAAe,QAAQ,oBAAC,SAAI,WAAW,wBAAyB,uBAAY;AAAA,OAC/E;AAAA,IACC,UAAU,QAAQ,oBAAC,SAAI,WAAU,oCAAoC,kBAAO;AAAA,KAC/E,IAEA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI;AAAA,MACJ;AAAA,MAIA,WAAW,GAAG,2EAA2E,SAAS;AAAA,MAEjG;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/settings/settings-section.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { Card } from \"../components/card\";\nimport type { CardTone } from \"../components/card\";\nimport { cn } from \"../lib/cn\";\nimport { CARD_DESCRIPTION_CLASS, CARD_TITLE_CLASS } from \"./settings-card-classes\";\nimport { SettingsHeading, useSettingsHeadingLevel } from \"./settings-heading\";\nimport { useSettingsLayout } from \"./settings-context\";\n\nexport interface SettingsSectionProps extends Omit<ComponentPropsWithRef<\"div\">, \"title\" | \"id\"> {\n  /** The card's DOM id — the catalogue entry's `anchor`, the `?focus=` target. */\n  anchor: string;\n  /** The card's name: a heading at the layout's level (`h3` by default). */\n  title: ReactNode;\n  /**\n   * `false` keeps the title for screen readers only — for a card alone in a group named\n   * after it, so the page does not print the same heading twice (§3.7, keksdose's admin,\n   * dev#490/#493/#494). The heading is still there: the outline and `?focus=` need it.\n   * Default `true`.\n   */\n  titleVisible?: boolean;\n  /** One muted line under the title. */\n  description?: ReactNode;\n  /** `danger` for the destructive cards at the end of \"data\" (§3.7). */\n  tone?: CardTone;\n  /** A control at the title's end — a refresh, a toggle. It drops under the title when\n   *  the card is too narrow for both. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Is this a development build? The consumer's bundler makes `import.meta.env.DEV` false in\n * production, so the check below is dead code there. Unlike the kit's warnings it stays\n * on under vitest: a card that cannot be found is a bug a test should fail on.\n * Optional-chained: `import.meta.env` is a Vite injection, absent under plain Node.\n */\nfunction devChecks(): boolean {\n  return Boolean(import.meta.env?.DEV);\n}\n\n/**\n * An app's own settings card (docs/settings-harmonization.md §3.7, §7.1): a kit `Card` at\n * the settings type scale — the title `text-sm font-medium`, the description `text-xs`\n * muted, as the kit's own setting cards — with the catalogue anchor as its id, the title\n * as a heading under the group's, and the `?focus=` ring landing on it.\n *\n * **A card without a catalogue entry throws in development** (keksdose's `section()`\n * guard). A card search cannot find breaks the rule that every setting is findable\n * (§4.1), and the old failure was silent: a hit that scrolled nowhere. The check runs\n * inside a {@link SettingsLayout}, which holds the catalogue; outside one there is\n * nothing to check against.\n */\nexport function SettingsSection({\n  anchor,\n  title,\n  titleVisible = true,\n  description,\n  tone,\n  action,\n  children,\n  className,\n  ...rest\n}: SettingsSectionProps) {\n  const layout = useSettingsLayout();\n  const level = useSettingsHeadingLevel() ?? \"h3\";\n  if (layout && devChecks() && !layout.hasAnchor(anchor)) {\n    throw new Error(\n      `SettingsSection \"${anchor}\" has no catalogue entry: add a SettingsEntry with anchor \"${anchor}\" so search and ?focus= can reach it.`,\n    );\n  }\n  const heading = (\n    <SettingsHeading\n      as={level}\n      // Focusable from script only: `?focus=` moves focus here (§3.5).\n      tabIndex={-1}\n      data-settings-heading=\"\"\n      className={cn(CARD_TITLE_CLASS, \"outline-none\", !titleVisible && \"sr-only-fixed\")}\n    >\n      {title}\n    </SettingsHeading>\n  );\n  const header =\n    titleVisible || description != null || action != null ? (\n      <div className=\"flex flex-wrap items-start justify-between gap-x-3 gap-y-2\">\n        <div className=\"min-w-0 flex-1 basis-48\">\n          {heading}\n          {description != null && <div className={CARD_DESCRIPTION_CLASS}>{description}</div>}\n        </div>\n        {action != null && <div className=\"flex shrink-0 items-center gap-2\">{action}</div>}\n      </div>\n    ) : (\n      heading\n    );\n  return (\n    <Card\n      {...rest}\n      id={anchor}\n      tone={tone}\n      // A column with a gap, not `space-y-3`: a hidden title is `position: fixed` and so\n      // out of the flow, and a gap is only drawn between items in it — `space-y` would\n      // still push the first card part down by a gap for the title nobody sees.\n      className={cn(\"flex flex-col gap-3 p-4 transition-shadow motion-reduce:transition-none\", className)}\n    >\n      {header}\n      {children}\n    </Card>\n  );\n}\n"],"mappings":";AAuEI,cAaI,YAbJ;AAtEJ,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,wBAAwB,wBAAwB;AACzD,SAAS,iBAAiB,+BAA+B;AACzD,SAAS,yBAAyB;AA8BlC,SAAS,YAAqB;AAC5B,SAAO,QAAQ,YAAY,KAAK,GAAG;AACrC;AAcO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,SAAS,kBAAkB;AACjC,QAAM,QAAQ,wBAAwB,KAAK;AAC3C,MAAI,UAAU,UAAU,KAAK,CAAC,OAAO,UAAU,MAAM,GAAG;AACtD,UAAM,IAAI;AAAA,MACR,oBAAoB,MAAM,8DAA8D,MAAM;AAAA,IAChG;AAAA,EACF;AACA,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MAEJ,UAAU;AAAA,MACV,yBAAsB;AAAA,MACtB,WAAW,GAAG,kBAAkB,gBAAgB,CAAC,gBAAgB,eAAe;AAAA,MAE/E;AAAA;AAAA,EACH;AAEF,QAAM,SACJ,gBAAgB,eAAe,QAAQ,UAAU,OAC/C,qBAAC,SAAI,WAAU,8DACb;AAAA,yBAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,MACA,eAAe,QAAQ,oBAAC,SAAI,WAAW,wBAAyB,uBAAY;AAAA,OAC/E;AAAA,IACC,UAAU,QAAQ,oBAAC,SAAI,WAAU,oCAAoC,kBAAO;AAAA,KAC/E,IAEA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI;AAAA,MACJ;AAAA,MAIA,WAAW,GAAG,2EAA2E,SAAS;AAAA,MAEjG;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

@@ -1,35 +1,32 @@
-import { TextSize } from '../theme/text-size.js';
-import { ContrastMode } from '../theme/contrast.js';
-import 'zustand/middleware';
-import 'zustand';
-
+import type { TextSize } from "../theme/text-size.js";
+import type { ContrastMode } from "../theme/contrast.js";
 /**
  * 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";
+export 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 {
+export 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 {
+export 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 = {
+export type AccountAppearancePatch = {
     text_size: TextSize;
 } | {
     contrast: ContrastMode;
 };
-interface ResolvedAccountAppearance {
+export interface ResolvedAccountAppearance {
     textSize: TextSize;
     /** The stored MODE — "system" included — not whether more contrast is on now. */
     contrast: ContrastMode;
@@ -42,8 +39,8 @@ interface ResolvedAccountAppearance {
  * 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 {
+export declare function resolveAccountAppearance(device: DeviceAppearance, account: AccountAppearanceFields | null | undefined): ResolvedAccountAppearance;
+export 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;
@@ -61,7 +58,7 @@ interface UseAccountAppearanceOptions {
     /** A demo session: a pick stays on the device, the account is never written (§6). */
     isDemo?: boolean;
 }
-interface AccountAppearance extends ResolvedAccountAppearance {
+export 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). */
@@ -87,6 +84,4 @@ interface AccountAppearance extends ResolvedAccountAppearance {
  * 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 };
+export declare function useAccountAppearance(options: UseAccountAppearanceOptions): AccountAppearance;

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

@@ -2,15 +2,15 @@
  * Where the language on screen came from (docs/settings-harmonization.md §6.2), in the
  * order they are asked.
  */
-type AccountLanguageSource = "device" | "account" | "browser" | "default";
+export type AccountLanguageSource = "device" | "account" | "browser" | "default";
 /**
  * The offered language a tag means, or `null` — the client's half of server-kit's
  * `canonical_locale(tag, offered)` (§6.2): case and `_` normalised; an offered tag matches
  * exactly; otherwise the first offered tag of the same language (`de`, `de-DE` → `de-CH`
  * where `de-CH` is what the app offers); anything else is no match.
  */
-declare function matchOfferedLanguage(tag: string | null | undefined, offered: readonly string[]): string | null;
-interface ResolveAccountLanguageInput {
+export declare function matchOfferedLanguage(tag: string | null | undefined, offered: readonly string[]): string | null;
+export interface ResolveAccountLanguageInput {
     /** This device's own choice — made on this device, stored only when the user picks. */
     device: string | null | undefined;
     /** The signed-in account's `locale`; `undefined` while signed out. */
@@ -22,7 +22,7 @@ interface ResolveAccountLanguageInput {
     /** The app's default, when nothing else matches. */
     fallback: string;
 }
-interface ResolvedAccountLanguage {
+export interface ResolvedAccountLanguage {
     language: string;
     source: AccountLanguageSource;
 }
@@ -35,8 +35,8 @@ interface ResolvedAccountLanguage {
  * nothing more: once the account's locale arrives it outranks the browser, never the
  * device's pick.
  */
-declare function resolveAccountLanguage(input: ResolveAccountLanguageInput): ResolvedAccountLanguage;
-interface UseAccountLanguageOptions {
+export declare function resolveAccountLanguage(input: ResolveAccountLanguageInput): ResolvedAccountLanguage;
+export interface UseAccountLanguageOptions {
     /** The signed-in account's `locale` (`/auth/me`). `undefined` while signed out or not
      *  loaded yet; `null` for an account with no language set. */
     account: string | null | undefined;
@@ -56,7 +56,7 @@ interface UseAccountLanguageOptions {
     /** The browser's languages. Default: `navigator.languages`. */
     browser?: readonly string[];
 }
-interface AccountLanguage extends ResolvedAccountLanguage {
+export interface AccountLanguage extends ResolvedAccountLanguage {
     /**
      * The user picked `code` (the language card, the top bar's quick switch): it becomes the
      * device's own choice and — signed in, and not a demo — the account's locale. The
@@ -78,6 +78,4 @@ interface AccountLanguage extends ResolvedAccountLanguage {
  * The hook only answers; the app applies `language` (`i18n.changeLanguage`) where it
  * applies languages today.
  */
-declare function useAccountLanguage(options: UseAccountLanguageOptions): AccountLanguage;
-
-export { type AccountLanguage, type AccountLanguageSource, type ResolveAccountLanguageInput, type ResolvedAccountLanguage, type UseAccountLanguageOptions, matchOfferedLanguage, resolveAccountLanguage, useAccountLanguage };
+export declare function useAccountLanguage(options: UseAccountLanguageOptions): AccountLanguage;