@eifi1/ui-kit 0.46.1 → 0.48.0

package/dist/notifications/quiet-hours-setting.d.ts

@@ -7,10 +7,6 @@ export interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<"div"
     start: string | null;
     /** The `GET`'s `quiet_hours_end`. */
     end: string | null;
-    /** The zone the 0.36 card showed, an IANA name, or `null`.
-     *  @deprecated 0.46 — pass `zone` (§10.3: the zone is the account's, automatic only); removed in 0.47.
-     *  Shown read-only while `zone` is left out; the card no longer offers a picker. */
-    timezone?: string | null;
     /**
      * 0.46 (§10.3, amended 2026-10-20: automatic only): the account's zone — `/auth/me`'s
      * `device_timezone`, the zone of the device last used; `null` while no device has
@@ -28,7 +24,7 @@ export interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<"div"
      * rejects.
      */
     onChange: (patch: NotificationSettingsPatch) => Promise<unknown> | void;
-    /** The zone named while neither `zone` nor `timezone` names one: the one the server
+    /** The zone named while `zone` names none: the one the server
      *  applies. Default `"Europe/Zurich"`, every app's. */
     fallbackZone?: string;
     /** The app keeps an inbox, and the description says a held push still reaches it. */
@@ -51,9 +47,8 @@ export interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<"div"
  *
  * - **Two times**, each saved as it is entered; a cleared time sends `null`. While only
  *   one is set the card says so: the window fails open until both are.
- * - **The zone** shows while a time is set: `zone`, else the deprecated `timezone`, else
- *   `fallbackZone`.
+ * - **The zone** shows while a time is set: `zone`, else `fallbackZone`.
  *
  * Under a write lock the fields are `commit` controls exempt from billing.
  */
-export declare function QuietHoursSetting({ start, end, timezone, zone, held, onChange, fallbackZone, inbox, disabled, describeError, labels: labelsProp, className, ...rest }: QuietHoursSettingProps): import("react").JSX.Element;
+export declare function QuietHoursSetting({ start, end, zone, held, onChange, fallbackZone, inbox, disabled, describeError, labels: labelsProp, className, ...rest }: QuietHoursSettingProps): import("react").JSX.Element;

package/dist/notifications/quiet-hours-setting.js

@@ -9,12 +9,17 @@ import { CARD_DESCRIPTION_CLASS } from "../settings/settings-card-classes.js";
 import { SettingsCardTitle } from "../settings/settings-heading.js";
 import { settle, useMounted } from "../account/account-parts.js";
 import { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from "./notification-parts.js";
-import { zoneName } from "./time-zone-select.js";
 const DEFAULT_FALLBACK_ZONE = "Europe/Zurich";
+function zoneName(zone, regions) {
+  const slash = zone.indexOf("/");
+  if (slash < 0) return zone;
+  const region = zone.slice(0, slash);
+  const named = Object.prototype.hasOwnProperty.call(regions, region) ? regions[region] : region;
+  return `${named} / ${zone.slice(slash + 1).replace(/_/g, " ").replace(/\//g, " / ")}`;
+}
 function QuietHoursSetting({
   start,
   end,
-  timezone = null,
   zone,
   held = false,
   onChange,
@@ -34,7 +39,7 @@ function QuietHoursSetting({
   const shown = (field, server) => overlay.has(field) ? overlay.get(field) ?? null : server;
   const startShown = shown("quiet_hours_start", start);
   const endShown = shown("quiet_hours_end", end);
-  const accountZone = (zone === void 0 ? timezone : zone) ?? fallbackZone;
+  const accountZone = zone ?? fallbackZone;
   const save = (patch) => {
     const fields = Object.keys(patch);
     setFailure(null);

package/dist/notifications/quiet-hours-setting.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/notifications/quiet-hours-setting.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { Card } from \"../components/card\";\nimport { TimeInput } from \"../components/time-input\";\nimport { COMMIT_EXCEPT_BILLING } from \"../components/write-lock\";\nimport { CARD_DESCRIPTION_CLASS } from \"../settings/settings-card-classes\";\nimport { SettingsCardTitle } from \"../settings/settings-heading\";\nimport { settle, useMounted } from \"../account/account-parts\";\nimport { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from \"./notification-parts\";\nimport type { NotificationsLabels } from \"./notifications-labels\";\nimport type { NotificationSettingsPatch } from \"./notification-types\";\nimport { zoneName } from \"./time-zone-select\";\n\n/** The zone the server applies while no device ever reported one (§10.3): every app's. */\nconst DEFAULT_FALLBACK_ZONE = \"Europe/Zurich\";\n\nexport interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"onChange\"> {\n  /** The `GET`'s `quiet_hours_start`, `\"HH:MM\"`, or `null`. */\n  start: string | null;\n  /** The `GET`'s `quiet_hours_end`. */\n  end: string | null;\n  /** The zone the 0.36 card showed, an IANA name, or `null`.\n   *  @deprecated 0.46 — pass `zone` (§10.3: the zone is the account's, automatic only); removed in 0.47.\n   *  Shown read-only while `zone` is left out; the card no longer offers a picker. */\n  timezone?: string | null;\n  /**\n   * 0.46 (§10.3, amended 2026-10-20: automatic only): the account's zone — `/auth/me`'s\n   * `device_timezone`, the zone of the device last used; `null` while no device has\n   * reported one, and the card then names `fallbackZone`, the zone the server applies.\n   * Shown read-only once a time is set (\"In your time zone (Europe / Zurich), which follows\n   * the device you last used.\"). No picker: the zone is never chosen.\n   */\n  zone?: string | null;\n  /** 0.46 (§10.4): the app queues a held push and sends it when the window ends (it runs\n   *  the notifications tick); the description says so. Default `false`: dropped. */\n  held?: boolean;\n  /**\n   * Save one change — `PATCH /notifications/settings`: a time, or `null` when cleared.\n   * Never a zone. The field shows the new value while the call runs and goes back if it\n   * rejects.\n   */\n  onChange: (patch: NotificationSettingsPatch) => Promise<unknown> | void;\n  /** The zone named while neither `zone` nor `timezone` names one: the one the server\n   *  applies. Default `\"Europe/Zurich\"`, every app's. */\n  fallbackZone?: string;\n  /** The app keeps an inbox, and the description says a held push still reaches it. */\n  inbox?: boolean;\n  disabled?: boolean;\n  /** The app's own words for a failed save, or `undefined` for the kit's `failed`. */\n  describeError?: (error: unknown) => ReactNode | undefined;\n  labels?: LabelOverride<NotificationsLabels>;\n}\n\ntype QuietField = \"quiet_hours_start\" | \"quiet_hours_end\";\n\n/**\n * Quiet hours (docs/notifications-harmonization.md §2.4, §2.6, §4.2): a window of local\n * times in the account's zone, which may cross midnight, when no push of a machine-sent\n * type is sent. A held push is dropped — or, with `held` (0.46, §10.4), sent when the\n * window ends; the inbox row and the mail go as usual. keksdose's block, as a card of its\n * own.\n *\n * **0.46 (§10.3, amended 2026-10-20, Marcel): the zone is the account's, automatic\n * only** — the zone of the device last used, else `Europe/Zurich`. The card names it\n * read-only and never sends one; there is no picker and no \"Use it\".\n *\n * - **Two times**, each saved as it is entered; a cleared time sends `null`. While only\n *   one is set the card says so: the window fails open until both are.\n * - **The zone** shows while a time is set: `zone`, else the deprecated `timezone`, else\n *   `fallbackZone`.\n *\n * Under a write lock the fields are `commit` controls exempt from billing.\n */\nexport function QuietHoursSetting({\n  start,\n  end,\n  timezone = null,\n  zone,\n  held = false,\n  onChange,\n  fallbackZone = DEFAULT_FALLBACK_ZONE,\n  inbox = false,\n  disabled = false,\n  describeError,\n  labels: labelsProp,\n  className,\n  ...rest\n}: QuietHoursSettingProps) {\n  const labels = useNotificationsLabels(labelsProp);\n  const overlay = useWriteOverlay<string | null>(`${start}|${end}`);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const mounted = useMounted();\n  const id = useId();\n\n  const shown = (field: QuietField, server: string | null) =>\n    overlay.has(field) ? (overlay.get(field) ?? null) : server;\n  const startShown = shown(\"quiet_hours_start\", start);\n  const endShown = shown(\"quiet_hours_end\", end);\n  const accountZone = (zone === undefined ? timezone : zone) ?? fallbackZone;\n\n  const save = (patch: NotificationSettingsPatch) => {\n    const fields = Object.keys(patch) as QuietField[];\n    setFailure(null);\n    for (const field of fields) overlay.set(field, patch[field] ?? null);\n    settle(() => onChange(patch)).then(\n      () => {\n        if (mounted.current) for (const field of fields) overlay.settle(field, true);\n      },\n      (error: unknown) => {\n        if (!mounted.current) return;\n        for (const field of fields) overlay.settle(field, false);\n        setFailure(describeFailure(describeError?.(error), labels.failed));\n      },\n    );\n  };\n\n  const saveTime = (field: \"quiet_hours_start\" | \"quiet_hours_end\", value: string) => {\n    const next = value || null;\n    if (next === shown(field, field === \"quiet_hours_start\" ? start : end)) return;\n    save({ [field]: next });\n  };\n\n  const anySet = Boolean(startShown || endShown);\n  const halfSet = Boolean(startShown) !== Boolean(endShown);\n\n  return (\n    <Card {...rest} className={cn(\"p-4 space-y-3\", className)}>\n      <div>\n        <SettingsCardTitle>{labels.quietTitle}</SettingsCardTitle>\n        <div className={CARD_DESCRIPTION_CLASS}>{labels.quietDescription(inbox, held)}</div>\n      </div>\n      <div className=\"flex flex-wrap items-end gap-3\">\n        <TimeInput\n          id={`${id}-start`}\n          label={labels.quietFrom}\n          value={startShown ?? \"\"}\n          disabled={disabled}\n          commit={COMMIT_EXCEPT_BILLING}\n          onValueChange={(value) => saveTime(\"quiet_hours_start\", value)}\n          className=\"w-36\"\n        />\n        <TimeInput\n          id={`${id}-end`}\n          label={labels.quietUntil}\n          value={endShown ?? \"\"}\n          disabled={disabled}\n          commit={COMMIT_EXCEPT_BILLING}\n          onValueChange={(value) => saveTime(\"quiet_hours_end\", value)}\n          className=\"w-36\"\n        />\n      </div>\n      {halfSet && (\n        <p className=\"text-xs text-warning\" data-quiet-incomplete=\"\">\n          {labels.quietIncomplete}\n        </p>\n      )}\n      {anySet && (\n        <p className={CARD_DESCRIPTION_CLASS} data-quiet-zone=\"\">\n          {labels.quietZone(zoneName(accountZone, labels.regions))}\n        </p>\n      )}\n      <FailureLine>{failure}</FailureLine>\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/notifications/quiet-hours-setting.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { Card } from \"../components/card\";\nimport { TimeInput } from \"../components/time-input\";\nimport { COMMIT_EXCEPT_BILLING } from \"../components/write-lock\";\nimport { CARD_DESCRIPTION_CLASS } from \"../settings/settings-card-classes\";\nimport { SettingsCardTitle } from \"../settings/settings-heading\";\nimport { settle, useMounted } from \"../account/account-parts\";\nimport { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from \"./notification-parts\";\nimport type { NotificationRegionLabels, NotificationsLabels } from \"./notifications-labels\";\nimport type { NotificationSettingsPatch } from \"./notification-types\";\n\n/** The zone the server applies while no device ever reported one (§10.3): every app's. */\nconst DEFAULT_FALLBACK_ZONE = \"Europe/Zurich\";\n\n/** A zone for a sentence: \"Europe / Zurich\", the region in the kit's words (`labels.regions`);\n *  a region the labels do not know keeps its IANA name, a zone with none (\"UTC\") is itself. */\nfunction zoneName(zone: string, regions: NotificationRegionLabels): string {\n  const slash = zone.indexOf(\"/\");\n  if (slash < 0) return zone;\n  const region = zone.slice(0, slash);\n  const named = Object.prototype.hasOwnProperty.call(regions, region)\n    ? regions[region as keyof NotificationRegionLabels]\n    : region;\n  return `${named} / ${zone.slice(slash + 1).replace(/_/g, \" \").replace(/\\//g, \" / \")}`;\n}\n\nexport interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"onChange\"> {\n  /** The `GET`'s `quiet_hours_start`, `\"HH:MM\"`, or `null`. */\n  start: string | null;\n  /** The `GET`'s `quiet_hours_end`. */\n  end: string | null;\n  /**\n   * 0.46 (§10.3, amended 2026-10-20: automatic only): the account's zone — `/auth/me`'s\n   * `device_timezone`, the zone of the device last used; `null` while no device has\n   * reported one, and the card then names `fallbackZone`, the zone the server applies.\n   * Shown read-only once a time is set (\"In your time zone (Europe / Zurich), which follows\n   * the device you last used.\"). No picker: the zone is never chosen.\n   */\n  zone?: string | null;\n  /** 0.46 (§10.4): the app queues a held push and sends it when the window ends (it runs\n   *  the notifications tick); the description says so. Default `false`: dropped. */\n  held?: boolean;\n  /**\n   * Save one change — `PATCH /notifications/settings`: a time, or `null` when cleared.\n   * Never a zone. The field shows the new value while the call runs and goes back if it\n   * rejects.\n   */\n  onChange: (patch: NotificationSettingsPatch) => Promise<unknown> | void;\n  /** The zone named while `zone` names none: the one the server\n   *  applies. Default `\"Europe/Zurich\"`, every app's. */\n  fallbackZone?: string;\n  /** The app keeps an inbox, and the description says a held push still reaches it. */\n  inbox?: boolean;\n  disabled?: boolean;\n  /** The app's own words for a failed save, or `undefined` for the kit's `failed`. */\n  describeError?: (error: unknown) => ReactNode | undefined;\n  labels?: LabelOverride<NotificationsLabels>;\n}\n\ntype QuietField = \"quiet_hours_start\" | \"quiet_hours_end\";\n\n/**\n * Quiet hours (docs/notifications-harmonization.md §2.4, §2.6, §4.2): a window of local\n * times in the account's zone, which may cross midnight, when no push of a machine-sent\n * type is sent. A held push is dropped — or, with `held` (0.46, §10.4), sent when the\n * window ends; the inbox row and the mail go as usual. keksdose's block, as a card of its\n * own.\n *\n * **0.46 (§10.3, amended 2026-10-20, Marcel): the zone is the account's, automatic\n * only** — the zone of the device last used, else `Europe/Zurich`. The card names it\n * read-only and never sends one; there is no picker and no \"Use it\".\n *\n * - **Two times**, each saved as it is entered; a cleared time sends `null`. While only\n *   one is set the card says so: the window fails open until both are.\n * - **The zone** shows while a time is set: `zone`, else `fallbackZone`.\n *\n * Under a write lock the fields are `commit` controls exempt from billing.\n */\nexport function QuietHoursSetting({\n  start,\n  end,\n  zone,\n  held = false,\n  onChange,\n  fallbackZone = DEFAULT_FALLBACK_ZONE,\n  inbox = false,\n  disabled = false,\n  describeError,\n  labels: labelsProp,\n  className,\n  ...rest\n}: QuietHoursSettingProps) {\n  const labels = useNotificationsLabels(labelsProp);\n  const overlay = useWriteOverlay<string | null>(`${start}|${end}`);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const mounted = useMounted();\n  const id = useId();\n\n  const shown = (field: QuietField, server: string | null) =>\n    overlay.has(field) ? (overlay.get(field) ?? null) : server;\n  const startShown = shown(\"quiet_hours_start\", start);\n  const endShown = shown(\"quiet_hours_end\", end);\n  const accountZone = zone ?? fallbackZone;\n\n  const save = (patch: NotificationSettingsPatch) => {\n    const fields = Object.keys(patch) as QuietField[];\n    setFailure(null);\n    for (const field of fields) overlay.set(field, patch[field] ?? null);\n    settle(() => onChange(patch)).then(\n      () => {\n        if (mounted.current) for (const field of fields) overlay.settle(field, true);\n      },\n      (error: unknown) => {\n        if (!mounted.current) return;\n        for (const field of fields) overlay.settle(field, false);\n        setFailure(describeFailure(describeError?.(error), labels.failed));\n      },\n    );\n  };\n\n  const saveTime = (field: \"quiet_hours_start\" | \"quiet_hours_end\", value: string) => {\n    const next = value || null;\n    if (next === shown(field, field === \"quiet_hours_start\" ? start : end)) return;\n    save({ [field]: next });\n  };\n\n  const anySet = Boolean(startShown || endShown);\n  const halfSet = Boolean(startShown) !== Boolean(endShown);\n\n  return (\n    <Card {...rest} className={cn(\"p-4 space-y-3\", className)}>\n      <div>\n        <SettingsCardTitle>{labels.quietTitle}</SettingsCardTitle>\n        <div className={CARD_DESCRIPTION_CLASS}>{labels.quietDescription(inbox, held)}</div>\n      </div>\n      <div className=\"flex flex-wrap items-end gap-3\">\n        <TimeInput\n          id={`${id}-start`}\n          label={labels.quietFrom}\n          value={startShown ?? \"\"}\n          disabled={disabled}\n          commit={COMMIT_EXCEPT_BILLING}\n          onValueChange={(value) => saveTime(\"quiet_hours_start\", value)}\n          className=\"w-36\"\n        />\n        <TimeInput\n          id={`${id}-end`}\n          label={labels.quietUntil}\n          value={endShown ?? \"\"}\n          disabled={disabled}\n          commit={COMMIT_EXCEPT_BILLING}\n          onValueChange={(value) => saveTime(\"quiet_hours_end\", value)}\n          className=\"w-36\"\n        />\n      </div>\n      {halfSet && (\n        <p className=\"text-xs text-warning\" data-quiet-incomplete=\"\">\n          {labels.quietIncomplete}\n        </p>\n      )}\n      {anySet && (\n        <p className={CARD_DESCRIPTION_CLASS} data-quiet-zone=\"\">\n          {labels.quietZone(zoneName(accountZone, labels.regions))}\n        </p>\n      )}\n      <FailureLine>{failure}</FailureLine>\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -21,6 +21,16 @@ export interface SettingsGroup<G extends string = string> {
     title: string;
     /** One line under the heading and in the phone list, where it is cut to one line. */
     help: string;
+    /**
+     * 0.48 (keksdose live #450): a count or a mark drawn on the group's ROW — at the end of
+     * its desktop sidebar row and before the chevron of its phone list row — never on the
+     * heading over its cards. The admin area's waiting work: `<AdminWaitingBadge count={n} />`
+     * (nothing for 0), so the account menu's badge leads to the section that holds it. It
+     * sits inside the row's link and is read with its name, so say what the number is (the
+     * waiting pill does: "3, 3 waiting"). While the page is searched the sidebar shows the
+     * hit count in its place. Default: none.
+     */
+    badge?: ReactNode;
     /**
      * `false` hides the group: no row, no hits, and its path acts as an unknown one — it
      * lands on the default group (desktop) or the list (phone), never on a 404 (§3.1).

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/settings/settings-catalogue.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { SearchEntry } from \"../search/search-index\";\n\n/**\n * The settings catalogue (docs/settings-harmonization.md §4.1), lifted from keksdose's\n * `settings-index.ts`: the groups a settings page is split into, and one entry per\n * SETTING — not per card — so a search for \"quiet hours\" finds the field inside the\n * notifications card. One list feeds the sidebar, the phone list, the in-page search and\n * ⌘K ({@link settingsSearchEntries}); keksdose's page and its palette drifted when they\n * had one each.\n *\n * The kit resolves no words: `title`, `help` and `keywords` arrive translated (an app's\n * own, or the core groups' from `DEFAULT_SETTINGS_LABELS.groups`).\n */\n\n/** One group of the page: a sidebar row on a desktop, a list row on a phone (§3.2, §3.3). */\nexport interface SettingsGroup<G extends string = string> {\n  /** The path segment, `/settings/<id>`: lowercase, a–z and \"-\". */\n  id: G;\n  /** The row's icon — a lucide icon at the row's size is sized by the row. */\n  icon: ReactNode;\n  /** The group's name: the sidebar row, the heading over its cards, the phone list. */\n  title: string;\n  /** One line under the heading and in the phone list, where it is cut to one line. */\n  help: string;\n  /**\n   * `false` hides the group: no row, no hits, and its path acts as an unknown one — it\n   * lands on the default group (desktop) or the list (phone), never on a 404 (§3.1).\n   * kastlan's `/admin/billing` while billing is off. Default: visible.\n   */\n  visible?: boolean;\n  /**\n   * 0.43: the group shows with no visible entry — a page of its own rather than of setting\n   * cards (the admin area's Overview, whose tiles are no settings; `adminSections` sets\n   * it). `visible: false` still hides it. Default: a group shows only with an entry once\n   * `entries` are given (§4.1).\n   */\n  standalone?: boolean;\n}\n\n/** One setting, and the card that holds it (§4.1). */\nexport interface SettingsEntry<G extends string = string> {\n  /** Unique within the catalogue. */\n  id: string;\n  /** The group whose page shows the card. */\n  group: G;\n  /** The card's DOM id, unique on the page — the `?focus=` target. Several entries may\n   *  share one: a card that holds four settings has four entries. */\n  anchor: string;\n  /** What a search hit says. */\n  title: string;\n  /** Localized, space-separated words people type that the title does not contain\n   *  (\"dark night\" for the theme, \"2fa totp\" for two-factor). Never shown. */\n  keywords?: string;\n  /**\n   * `false` drops the entry from the page's search and ⌘K. A group whose entries are\n   * ALL hidden is hidden with them (§4.1): a demo session marks every card it is refused\n   * (passkeys, 2FA, export, deletion …) and so never sees a page of cards that each\n   * answer 403. Default: visible.\n   */\n  visible?: boolean;\n}\n\n/**\n * The groups that show, in their order: not `visible: false`, and — when `entries` is\n * given — holding at least one visible entry (§4.1: Kurvenschmiede's notifications group\n * stays hidden until it has a card) or `standalone` (0.43). Without `entries` only the\n * groups' own flag counts.\n */\nexport function visibleSettingsGroups<G extends string>(\n  groups: readonly SettingsGroup<G>[],\n  entries?: readonly SettingsEntry<G>[],\n): SettingsGroup<G>[] {\n  if (!entries) return groups.filter((g) => g.visible !== false);\n  const filled = new Set<G>();\n  for (const e of entries) if (e.visible !== false) filled.add(e.group);\n  return groups.filter((g) => g.visible !== false && (g.standalone === true || filled.has(g.id)));\n}\n\n/** The visible entries of the visible groups — what search may find. */\nexport function visibleSettingsEntries<G extends string>(\n  groups: readonly SettingsGroup<G>[],\n  entries: readonly SettingsEntry<G>[],\n): SettingsEntry<G>[] {\n  const shown = new Set(visibleSettingsGroups(groups, entries).map((g) => g.id));\n  return entries.filter((e) => e.visible !== false && shown.has(e.group));\n}\n\n/** `basePath` without a trailing slash: \"/settings/\" and \"/settings\" are one page. */\nexport function normalizeSettingsBase(basePath: string): string {\n  const trimmed = basePath.replace(/\\/+$/, \"\");\n  return trimmed.startsWith(\"/\") || trimmed === \"\" ? trimmed : `/${trimmed}`;\n}\n\n/** `/settings/<group>`, and `?focus=<anchor>` when a card is named (§3.4). */\nexport function settingsHref(basePath: string, group: string, anchor?: string): string {\n  const path = `${normalizeSettingsBase(basePath)}/${group}`;\n  return anchor ? `${path}?focus=${encodeURIComponent(anchor)}` : path;\n}\n\n/** \"dark  night\" → [\"dark\", \"night\"]. */\nexport function settingsKeywords(keywords: string | undefined): string[] {\n  return keywords ? keywords.split(/\\s+/).filter(Boolean) : [];\n}\n\nexport interface SettingsSearchEntriesOptions {\n  /** `/settings` or `/admin` — the hits link to `<basePath>/<group>?focus=<anchor>`. */\n  basePath: string;\n}\n\n/**\n * The catalogue as {@link GlobalSearch} entries (§3.4): each visible setting, under its\n * group's name as the palette's section, linking to `/settings/<group>?focus=<anchor>` —\n * the same link the page's own search hit is, so ⌘K, a tour and a mail all land the\n * same way (§3.5). The group's name is a keyword too, as on the page: \"security\" lists\n * the security group's settings.\n *\n * Ids are prefixed with the base path (\"settings:theme\", \"admin:users\") so a palette\n * that also holds pages and actions keeps them unique.\n */\nexport function settingsSearchEntries<G extends string>(\n  groups: readonly SettingsGroup<G>[],\n  entries: readonly SettingsEntry<G>[],\n  options: SettingsSearchEntriesOptions,\n): SearchEntry[] {\n  const base = normalizeSettingsBase(options.basePath);\n  const prefix = base.replace(/^\\//, \"\").replace(/\\//g, \":\") || \"settings\";\n  const byId = new Map(visibleSettingsGroups(groups, entries).map((g) => [g.id, g]));\n  return visibleSettingsEntries(groups, entries).map((e) => {\n    const group = byId.get(e.group)!;\n    return {\n      id: `${prefix}:${e.id}`,\n      title: e.title,\n      keywords: [group.title, ...settingsKeywords(e.keywords)],\n      group: group.title,\n      icon: group.icon,\n      href: settingsHref(base, e.group, e.anchor),\n    };\n  });\n}\n"],"mappings":";AAqEO,SAAS,sBACd,QACA,SACoB;AACpB,MAAI,CAAC,QAAS,QAAO,OAAO,OAAO,CAAC,MAAM,EAAE,YAAY,KAAK;AAC7D,QAAM,SAAS,oBAAI,IAAO;AAC1B,aAAW,KAAK,QAAS,KAAI,EAAE,YAAY,MAAO,QAAO,IAAI,EAAE,KAAK;AACpE,SAAO,OAAO,OAAO,CAAC,MAAM,EAAE,YAAY,UAAU,EAAE,eAAe,QAAQ,OAAO,IAAI,EAAE,EAAE,EAAE;AAChG;AAGO,SAAS,uBACd,QACA,SACoB;AACpB,QAAM,QAAQ,IAAI,IAAI,sBAAsB,QAAQ,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AAC7E,SAAO,QAAQ,OAAO,CAAC,MAAM,EAAE,YAAY,SAAS,MAAM,IAAI,EAAE,KAAK,CAAC;AACxE;AAGO,SAAS,sBAAsB,UAA0B;AAC9D,QAAM,UAAU,SAAS,QAAQ,QAAQ,EAAE;AAC3C,SAAO,QAAQ,WAAW,GAAG,KAAK,YAAY,KAAK,UAAU,IAAI,OAAO;AAC1E;AAGO,SAAS,aAAa,UAAkB,OAAe,QAAyB;AACrF,QAAM,OAAO,GAAG,sBAAsB,QAAQ,CAAC,IAAI,KAAK;AACxD,SAAO,SAAS,GAAG,IAAI,UAAU,mBAAmB,MAAM,CAAC,KAAK;AAClE;AAGO,SAAS,iBAAiB,UAAwC;AACvE,SAAO,WAAW,SAAS,MAAM,KAAK,EAAE,OAAO,OAAO,IAAI,CAAC;AAC7D;AAiBO,SAAS,sBACd,QACA,SACA,SACe;AACf,QAAM,OAAO,sBAAsB,QAAQ,QAAQ;AACnD,QAAM,SAAS,KAAK,QAAQ,OAAO,EAAE,EAAE,QAAQ,OAAO,GAAG,KAAK;AAC9D,QAAM,OAAO,IAAI,IAAI,sBAAsB,QAAQ,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AACjF,SAAO,uBAAuB,QAAQ,OAAO,EAAE,IAAI,CAAC,MAAM;AACxD,UAAM,QAAQ,KAAK,IAAI,EAAE,KAAK;AAC9B,WAAO;AAAA,MACL,IAAI,GAAG,MAAM,IAAI,EAAE,EAAE;AAAA,MACrB,OAAO,EAAE;AAAA,MACT,UAAU,CAAC,MAAM,OAAO,GAAG,iBAAiB,EAAE,QAAQ,CAAC;AAAA,MACvD,OAAO,MAAM;AAAA,MACb,MAAM,MAAM;AAAA,MACZ,MAAM,aAAa,MAAM,EAAE,OAAO,EAAE,MAAM;AAAA,IAC5C;AAAA,EACF,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../src/settings/settings-catalogue.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { SearchEntry } from \"../search/search-index\";\n\n/**\n * The settings catalogue (docs/settings-harmonization.md §4.1), lifted from keksdose's\n * `settings-index.ts`: the groups a settings page is split into, and one entry per\n * SETTING — not per card — so a search for \"quiet hours\" finds the field inside the\n * notifications card. One list feeds the sidebar, the phone list, the in-page search and\n * ⌘K ({@link settingsSearchEntries}); keksdose's page and its palette drifted when they\n * had one each.\n *\n * The kit resolves no words: `title`, `help` and `keywords` arrive translated (an app's\n * own, or the core groups' from `DEFAULT_SETTINGS_LABELS.groups`).\n */\n\n/** One group of the page: a sidebar row on a desktop, a list row on a phone (§3.2, §3.3). */\nexport interface SettingsGroup<G extends string = string> {\n  /** The path segment, `/settings/<id>`: lowercase, a–z and \"-\". */\n  id: G;\n  /** The row's icon — a lucide icon at the row's size is sized by the row. */\n  icon: ReactNode;\n  /** The group's name: the sidebar row, the heading over its cards, the phone list. */\n  title: string;\n  /** One line under the heading and in the phone list, where it is cut to one line. */\n  help: string;\n  /**\n   * 0.48 (keksdose live #450): a count or a mark drawn on the group's ROW — at the end of\n   * its desktop sidebar row and before the chevron of its phone list row — never on the\n   * heading over its cards. The admin area's waiting work: `<AdminWaitingBadge count={n} />`\n   * (nothing for 0), so the account menu's badge leads to the section that holds it. It\n   * sits inside the row's link and is read with its name, so say what the number is (the\n   * waiting pill does: \"3, 3 waiting\"). While the page is searched the sidebar shows the\n   * hit count in its place. Default: none.\n   */\n  badge?: ReactNode;\n  /**\n   * `false` hides the group: no row, no hits, and its path acts as an unknown one — it\n   * lands on the default group (desktop) or the list (phone), never on a 404 (§3.1).\n   * kastlan's `/admin/billing` while billing is off. Default: visible.\n   */\n  visible?: boolean;\n  /**\n   * 0.43: the group shows with no visible entry — a page of its own rather than of setting\n   * cards (the admin area's Overview, whose tiles are no settings; `adminSections` sets\n   * it). `visible: false` still hides it. Default: a group shows only with an entry once\n   * `entries` are given (§4.1).\n   */\n  standalone?: boolean;\n}\n\n/** One setting, and the card that holds it (§4.1). */\nexport interface SettingsEntry<G extends string = string> {\n  /** Unique within the catalogue. */\n  id: string;\n  /** The group whose page shows the card. */\n  group: G;\n  /** The card's DOM id, unique on the page — the `?focus=` target. Several entries may\n   *  share one: a card that holds four settings has four entries. */\n  anchor: string;\n  /** What a search hit says. */\n  title: string;\n  /** Localized, space-separated words people type that the title does not contain\n   *  (\"dark night\" for the theme, \"2fa totp\" for two-factor). Never shown. */\n  keywords?: string;\n  /**\n   * `false` drops the entry from the page's search and ⌘K. A group whose entries are\n   * ALL hidden is hidden with them (§4.1): a demo session marks every card it is refused\n   * (passkeys, 2FA, export, deletion …) and so never sees a page of cards that each\n   * answer 403. Default: visible.\n   */\n  visible?: boolean;\n}\n\n/**\n * The groups that show, in their order: not `visible: false`, and — when `entries` is\n * given — holding at least one visible entry (§4.1: Kurvenschmiede's notifications group\n * stays hidden until it has a card) or `standalone` (0.43). Without `entries` only the\n * groups' own flag counts.\n */\nexport function visibleSettingsGroups<G extends string>(\n  groups: readonly SettingsGroup<G>[],\n  entries?: readonly SettingsEntry<G>[],\n): SettingsGroup<G>[] {\n  if (!entries) return groups.filter((g) => g.visible !== false);\n  const filled = new Set<G>();\n  for (const e of entries) if (e.visible !== false) filled.add(e.group);\n  return groups.filter((g) => g.visible !== false && (g.standalone === true || filled.has(g.id)));\n}\n\n/** The visible entries of the visible groups — what search may find. */\nexport function visibleSettingsEntries<G extends string>(\n  groups: readonly SettingsGroup<G>[],\n  entries: readonly SettingsEntry<G>[],\n): SettingsEntry<G>[] {\n  const shown = new Set(visibleSettingsGroups(groups, entries).map((g) => g.id));\n  return entries.filter((e) => e.visible !== false && shown.has(e.group));\n}\n\n/** `basePath` without a trailing slash: \"/settings/\" and \"/settings\" are one page. */\nexport function normalizeSettingsBase(basePath: string): string {\n  const trimmed = basePath.replace(/\\/+$/, \"\");\n  return trimmed.startsWith(\"/\") || trimmed === \"\" ? trimmed : `/${trimmed}`;\n}\n\n/** `/settings/<group>`, and `?focus=<anchor>` when a card is named (§3.4). */\nexport function settingsHref(basePath: string, group: string, anchor?: string): string {\n  const path = `${normalizeSettingsBase(basePath)}/${group}`;\n  return anchor ? `${path}?focus=${encodeURIComponent(anchor)}` : path;\n}\n\n/** \"dark  night\" → [\"dark\", \"night\"]. */\nexport function settingsKeywords(keywords: string | undefined): string[] {\n  return keywords ? keywords.split(/\\s+/).filter(Boolean) : [];\n}\n\nexport interface SettingsSearchEntriesOptions {\n  /** `/settings` or `/admin` — the hits link to `<basePath>/<group>?focus=<anchor>`. */\n  basePath: string;\n}\n\n/**\n * The catalogue as {@link GlobalSearch} entries (§3.4): each visible setting, under its\n * group's name as the palette's section, linking to `/settings/<group>?focus=<anchor>` —\n * the same link the page's own search hit is, so ⌘K, a tour and a mail all land the\n * same way (§3.5). The group's name is a keyword too, as on the page: \"security\" lists\n * the security group's settings.\n *\n * Ids are prefixed with the base path (\"settings:theme\", \"admin:users\") so a palette\n * that also holds pages and actions keeps them unique.\n */\nexport function settingsSearchEntries<G extends string>(\n  groups: readonly SettingsGroup<G>[],\n  entries: readonly SettingsEntry<G>[],\n  options: SettingsSearchEntriesOptions,\n): SearchEntry[] {\n  const base = normalizeSettingsBase(options.basePath);\n  const prefix = base.replace(/^\\//, \"\").replace(/\\//g, \":\") || \"settings\";\n  const byId = new Map(visibleSettingsGroups(groups, entries).map((g) => [g.id, g]));\n  return visibleSettingsEntries(groups, entries).map((e) => {\n    const group = byId.get(e.group)!;\n    return {\n      id: `${prefix}:${e.id}`,\n      title: e.title,\n      keywords: [group.title, ...settingsKeywords(e.keywords)],\n      group: group.title,\n      icon: group.icon,\n      href: settingsHref(base, e.group, e.anchor),\n    };\n  });\n}\n"],"mappings":";AA+EO,SAAS,sBACd,QACA,SACoB;AACpB,MAAI,CAAC,QAAS,QAAO,OAAO,OAAO,CAAC,MAAM,EAAE,YAAY,KAAK;AAC7D,QAAM,SAAS,oBAAI,IAAO;AAC1B,aAAW,KAAK,QAAS,KAAI,EAAE,YAAY,MAAO,QAAO,IAAI,EAAE,KAAK;AACpE,SAAO,OAAO,OAAO,CAAC,MAAM,EAAE,YAAY,UAAU,EAAE,eAAe,QAAQ,OAAO,IAAI,EAAE,EAAE,EAAE;AAChG;AAGO,SAAS,uBACd,QACA,SACoB;AACpB,QAAM,QAAQ,IAAI,IAAI,sBAAsB,QAAQ,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AAC7E,SAAO,QAAQ,OAAO,CAAC,MAAM,EAAE,YAAY,SAAS,MAAM,IAAI,EAAE,KAAK,CAAC;AACxE;AAGO,SAAS,sBAAsB,UAA0B;AAC9D,QAAM,UAAU,SAAS,QAAQ,QAAQ,EAAE;AAC3C,SAAO,QAAQ,WAAW,GAAG,KAAK,YAAY,KAAK,UAAU,IAAI,OAAO;AAC1E;AAGO,SAAS,aAAa,UAAkB,OAAe,QAAyB;AACrF,QAAM,OAAO,GAAG,sBAAsB,QAAQ,CAAC,IAAI,KAAK;AACxD,SAAO,SAAS,GAAG,IAAI,UAAU,mBAAmB,MAAM,CAAC,KAAK;AAClE;AAGO,SAAS,iBAAiB,UAAwC;AACvE,SAAO,WAAW,SAAS,MAAM,KAAK,EAAE,OAAO,OAAO,IAAI,CAAC;AAC7D;AAiBO,SAAS,sBACd,QACA,SACA,SACe;AACf,QAAM,OAAO,sBAAsB,QAAQ,QAAQ;AACnD,QAAM,SAAS,KAAK,QAAQ,OAAO,EAAE,EAAE,QAAQ,OAAO,GAAG,KAAK;AAC9D,QAAM,OAAO,IAAI,IAAI,sBAAsB,QAAQ,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AACjF,SAAO,uBAAuB,QAAQ,OAAO,EAAE,IAAI,CAAC,MAAM;AACxD,UAAM,QAAQ,KAAK,IAAI,EAAE,KAAK;AAC9B,WAAO;AAAA,MACL,IAAI,GAAG,MAAM,IAAI,EAAE,EAAE;AAAA,MACrB,OAAO,EAAE;AAAA,MACT,UAAU,CAAC,MAAM,OAAO,GAAG,iBAAiB,EAAE,QAAQ,CAAC;AAAA,MACvD,OAAO,MAAM;AAAA,MACb,MAAM,MAAM;AAAA,MACZ,MAAM,aAAa,MAAM,EAAE,OAAO,EAAE,MAAM;AAAA,IAC5C;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/settings/settings-layout.js

@@ -200,7 +200,13 @@ function SettingsLayout({
           ),
           title: g.title,
           subtitle: g.help,
-          trailing: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-4 rtl:-scale-x-100" })
+          trailing: g.badge == null ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-4 rtl:-scale-x-100" }) : (
+            // The group's badge (0.48) before the chevron, the two as one end.
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              g.badge,
+              /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-4 rtl:-scale-x-100" })
+            ] })
+          )
         },
         g.id
       )) }) }),
@@ -233,10 +239,11 @@ function SettingsLayout({
                   name: g.title,
                   label: /* @__PURE__ */ jsx("span", { className: cn(dim && "opacity-40"), children: g.title }),
                   icon: /* @__PURE__ */ jsx("span", { className: cn("inline-flex [&_svg]:size-4", dim && "opacity-40"), children: g.icon }),
-                  badge: searching && count > 0 ? /* @__PURE__ */ jsxs(Chip, { size: "sm", tone: "brand", children: [
+                  // While searching, the hit count; otherwise the group's own badge (0.48).
+                  badge: searching ? count > 0 ? /* @__PURE__ */ jsxs(Chip, { size: "sm", tone: "brand", children: [
                     /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: count }),
                     /* @__PURE__ */ jsx("span", { className: "sr-only-fixed", children: labels.matchCount(count) })
-                  ] }) : void 0
+                  ] }) : void 0 : g.badge
                 };
               }),
               active: open?.id ?? route.groups[0]?.id,

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

@@ -1 +1 @@
-{"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\n/** The desktop sidebar's column: sticky beside a long group (§3.2). */\nconst SIDEBAR_COLUMN = \"mb-4 md:sticky md:top-6 md:mb-0 md:self-start\";\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  /**\n   * 0.42.0 (docs/admin-harmonization.md §2.5 decision 16): content under the section\n   * list on a desktop, in the same sticky column — the admin area's Tools list\n   * (`AdminToolLinks`). Not shown on a phone, where `phoneFooter` carries the same links.\n   */\n  sidebarFooter?: 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  sidebarFooter,\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    // The section list alone, or (0.42) with the app's `sidebarFooter` under it in one\n    // sticky column.\n    const withSidebarFooter = (tabs: ReactNode) =>\n      sidebarFooter == null ? (\n        tabs\n      ) : (\n        <div className={cn(SIDEBAR_COLUMN, \"space-y-6\")}>\n          {tabs}\n          <div data-slot=\"settings-sidebar-footer\">{sidebarFooter}</div>\n        </div>\n      );\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          {withSidebarFooter(\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. With a\n              // `sidebarFooter` the column round both is the sticky one.\n              className={sidebarFooter == null ? SIDEBAR_COLUMN : undefined}\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          )}\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\n/** The desktop sidebar's column: sticky beside a long group (§3.2). */\nconst SIDEBAR_COLUMN = \"mb-4 md:sticky md:top-6 md:mb-0 md:self-start\";\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  /**\n   * 0.42.0 (docs/admin-harmonization.md §2.5 decision 16): content under the section\n   * list on a desktop, in the same sticky column — the admin area's Tools list\n   * (`AdminToolLinks`). Not shown on a phone, where `phoneFooter` carries the same links.\n   */\n  sidebarFooter?: 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  sidebarFooter,\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={\n                    g.badge == null ? (\n                      <ChevronRight aria-hidden className=\"size-4 rtl:-scale-x-100\" />\n                    ) : (\n                      // The group's badge (0.48) before the chevron, the two as one end.\n                      <span className=\"flex items-center gap-2\">\n                        {g.badge}\n                        <ChevronRight aria-hidden className=\"size-4 rtl:-scale-x-100\" />\n                      </span>\n                    )\n                  }\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    // The section list alone, or (0.42) with the app's `sidebarFooter` under it in one\n    // sticky column.\n    const withSidebarFooter = (tabs: ReactNode) =>\n      sidebarFooter == null ? (\n        tabs\n      ) : (\n        <div className={cn(SIDEBAR_COLUMN, \"space-y-6\")}>\n          {tabs}\n          <div data-slot=\"settings-sidebar-footer\">{sidebarFooter}</div>\n        </div>\n      );\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          {withSidebarFooter(\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. With a\n              // `sidebarFooter` the column round both is the sticky one.\n              className={sidebarFooter == null ? SIDEBAR_COLUMN : undefined}\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                  // While searching, the hit count; otherwise the group's own badge (0.48).\n                  badge: searching ? (\n                    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                    g.badge\n                  ),\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          )}\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":[]}

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

@@ -23,6 +23,11 @@ export interface AppShellNavItem {
      *  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.48: the text size from which the bar uses {@link shortLabel} — `"large"` keeps the
+     *  full label at Normal, where five cells hold "Transactions" whole, and shortens it
+     *  from Large up (keksdose dev#613, which read `useTextSize()` in its layout to decide).
+     *  Default `"normal"`: the short label at every size, as before. */
+    shortLabelFrom?: TextSize;
     /** 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

package/dist/shell/app-shell.js

@@ -18,7 +18,7 @@ import { useAnchoredRect } from "../hooks/use-anchored-rect.js";
 import { anchoredInline } from "../hooks/use-anchored-panel.js";
 import { useDismissLayer } from "../hooks/use-dismiss.js";
 import { useBreakpoint } from "../hooks/use-breakpoint.js";
-import { useTextSize } from "../theme/text-size.js";
+import { TEXT_SIZES, useTextSize } from "../theme/text-size.js";
 import { DEFAULT_APP_SHELL_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
 import { DEFAULT_APP_SHELL_MORE_LABELS } from "./app-shell-labels.js";
 const DEFAULT_MOBILE_BAR_MAX = {
@@ -186,7 +186,7 @@ function AppShell({
                 "main",
                 {
                   className: cn(
-                    "relative flex-1 max-w-full overflow-x-clip pb-[calc(var(--app-nav-h,4rem)+1.5rem)] md:pb-0 md:min-h-0 md:overflow-y-auto md:[scrollbar-gutter:stable_both-edges]",
+                    "relative flex-1 max-w-full overflow-x-clip pb-[calc(var(--app-nav-h,4rem)+max(1.5rem,var(--app-float-clearance,0px)))] md:pb-0 md:min-h-0 md:overflow-y-auto md:[scrollbar-gutter:stable_both-edges]",
                     // The list page's fill (0.40, docs/page-layout-harmonization.md §1.3): while
                     // a `fillHeight` DataTable is inside, a flex column — a banner above the
                     // page keeps its own height and the page (a `FillHeight`) takes the rest,
@@ -320,6 +320,8 @@ function MobileCellLabel({ children }) {
 }
 function MobileNavItem({ item }) {
   const subActive = useSubItemActive(item);
+  const { size } = useTextSize();
+  const short = item.shortLabel !== void 0 && TEXT_SIZES.indexOf(size) >= TEXT_SIZES.indexOf(item.shortLabelFrom ?? "normal") ? item.shortLabel : void 0;
   return /* @__PURE__ */ jsxs(
     NavLink,
     {
@@ -329,7 +331,7 @@ function MobileNavItem({ item }) {
       className: ({ isActive }) => mobileCellClass(isActive || subActive),
       children: [
         /* @__PURE__ */ jsx("span", { className: "relative", children: /* @__PURE__ */ jsx(item.icon, { className: "size-5" }) }),
-        /* @__PURE__ */ jsx(MobileCellLabel, { children: item.shortLabel ?? item.label })
+        /* @__PURE__ */ jsx(MobileCellLabel, { children: short ?? item.label })
       ]
     }
   );