@eifi1/ui-kit 0.29.0 → 0.31.0

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

@@ -0,0 +1,77 @@
+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';
+
+/** 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";
+/** 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> {
+    /** The page's `h1`: "Settings", "Administration". Default: `labels.title`. */
+    title?: ReactNode;
+    /** The groups, in order (§4.2). */
+    groups: readonly SettingsGroup<G>[];
+    /** One entry per setting (§4.1). Hidden entries leave search; a group left without a
+     *  visible one is hidden. */
+    entries: readonly SettingsEntry<G>[];
+    /** `/settings` or `/admin`. The layout owns every path below it. */
+    basePath: string;
+    /** The group `/settings` opens on a desktop. Default: the first visible one. */
+    defaultGroup?: G;
+    /** Retired group ids and their successors, replaced in the address (§3.1). */
+    aliases?: Readonly<Partial<Record<string, G>>>;
+    /**
+     * The search field. Left out, it shows once more than {@link SETTINGS_SEARCH_THRESHOLD}
+     * entries are visible; `true` or `false` wins over the count — keksdose's admin keeps
+     * none (§3.4, §10.3). ⌘K gets the entries either way ({@link settingsSearchEntries}).
+     */
+    search?: boolean;
+    /** See {@link SettingsLayoutWidth}. Default `"6xl"`. */
+    width?: SettingsLayoutWidth;
+    /** The group's cards, in one column. `sub` is the path segment after the group, which
+     *  a card owns (`useSettingsLayout().selectSub`). */
+    renderGroup: (group: G, sub: string | null) => ReactNode;
+    /**
+     * Rows under the phone's group list that LEAVE settings — kastlan's "Administration",
+     * its import page (§3.3, §5). `ListItem`s with an `href`; the layout puts them in a list
+     * of their own, so they never read as a group. Not shown on a desktop, where the app's
+     * own navigation carries them.
+     */
+    phoneFooter?: ReactNode;
+    /** Prop > `<UiKitProvider labels={{ settings }}>` > English. */
+    labels?: Partial<SettingsLabels>;
+    /** See {@link SettingsLayoutMode}. Default `"auto"`: the screen decides. */
+    layout?: SettingsLayoutMode;
+    className?: string;
+}
+/**
+ * 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
+ * the path segments are new for all three apps.
+ *
+ * **Desktop** (§3.2): the page's `PageHeader`, the search field, then a 14rem sidebar —
+ * the kit's vertical `Tabs`, a link per group, sticky so a long group keeps the list in
+ * view — beside the open group: its heading (`h2`), its help line and its cards in ONE
+ * column, never a masonry (keksdose dev#490/#493).
+ *
+ * **Phone** (§3.3, below `md`): a drill-down. `/settings` is a list of the groups (icon,
+ * name, help line, chevron) with `phoneFooter` under it; a group is a page of its own with
+ * a back link, its name as the `h1` and the cards under it. It replaces keksdose's chip
+ * strip.
+ *
+ * **Routes, history and `?focus=`** are {@link useSettingsRoute}'s and
+ * {@link useSettingsFocus}'s. **Search** (§3.4) runs the kit's matcher over the catalogue:
+ * accents folded, ranked, over the title, the group's name and the keywords. On a desktop
+ * the sidebar dims the groups without hits and counts the others' while the hits replace
+ * the group; on a phone they replace the list. A hit is a link to its card.
+ *
+ * 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 };

package/dist/settings/settings-layout.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, 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 { Chip } from "../components/chip.js";
+import { List, ListItem } from "../components/list.js";
+import { PageHeader } from "../components/page-header.js";
+import { SearchField } from "../components/search-field.js";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { createSearchIndex } from "../search/search-index.js";
+import {
+  normalizeSettingsBase,
+  settingsHref,
+  settingsKeywords,
+  visibleSettingsEntries
+} from "./settings-catalogue.js";
+import { SettingsLayoutContext } from "./settings-context.js";
+import { SettingsHeadingLevel } from "./settings-heading.js";
+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 SettingsLayout({
+  title,
+  groups,
+  entries,
+  basePath,
+  defaultGroup,
+  aliases,
+  search,
+  width = "6xl",
+  renderGroup,
+  phoneFooter,
+  labels: labelsProp,
+  layout = "auto",
+  className
+}) {
+  const labels = useKitLabels("settings", DEFAULT_SETTINGS_LABELS, labelsProp);
+  const base = normalizeSettingsBase(basePath);
+  const route = useSettingsRoute({ groups, entries, basePath: base, defaultGroup, aliases, layout });
+  const location = useLocation();
+  const root = useHref("/").replace(/\/$/, "");
+  const panelId = useId();
+  const searchRef = useRef(null);
+  const [query, setQuery] = useState("");
+  const visibleEntries = useMemo(() => visibleSettingsEntries(groups, entries), [groups, entries]);
+  const showSearch = search ?? visibleEntries.length > SETTINGS_SEARCH_THRESHOLD;
+  const trimmed = query.trim();
+  const searching = showSearch && trimmed !== "";
+  const groupById = useMemo(() => new Map(route.groups.map((g) => [g.id, g])), [route.groups]);
+  const index = useMemo(
+    () => createSearchIndex(
+      visibleEntries.map((e) => ({
+        id: e.id,
+        title: e.title,
+        keywords: [groupById.get(e.group)?.title ?? e.group, ...settingsKeywords(e.keywords)],
+        group: e.group,
+        anchor: e.anchor,
+        settingsGroup: e.group
+      })),
+      // Every hit: the list is the page's whole answer, not a palette's top few.
+      { groupLimit: Infinity }
+    ),
+    [visibleEntries, groupById]
+  );
+  const hits = useMemo(() => searching ? index.search(trimmed).map((h) => h.entry) : [], [searching, index, trimmed]);
+  const hitsByGroup = useMemo(() => {
+    const counts = /* @__PURE__ */ new Map();
+    for (const hit of hits) counts.set(hit.settingsGroup, (counts.get(hit.settingsGroup) ?? 0) + 1);
+    return counts;
+  }, [hits]);
+  const anchors = useMemo(() => new Set(entries.map((e) => e.anchor)), [entries]);
+  const { phone, group, sub, selectSub, select } = route;
+  const headingLevel = phone ? "h2" : "h3";
+  const context = useMemo(
+    () => ({
+      basePath: base,
+      group,
+      sub,
+      selectSub,
+      headingLevel,
+      hasAnchor: (anchor) => anchors.has(anchor)
+    }),
+    [base, group, sub, selectSub, headingLevel, anchors]
+  );
+  const hitsShown = searching && (!phone || group === null);
+  useSettingsFocus(route.redirecting || group === null || hitsShown ? null : route.focus);
+  const { state } = location;
+  const renderLink = useCallback(
+    ({ href, ...props }) => /* @__PURE__ */ jsx(Link, { to: href, replace: !phone, state: phone ? settingsFromListState() : state, ...props }),
+    [phone, state]
+  );
+  const clearSearch = () => {
+    setQuery("");
+    searchRef.current?.focus();
+  };
+  const pageTitle = title ?? labels.title;
+  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,
+    {
+      ref: searchRef,
+      className: "max-w-md",
+      value: query,
+      onChange: setQuery,
+      "aria-label": labels.search,
+      placeholder: labels.searchPlaceholder
+    }
+  ) : null;
+  const results = hits.length === 0 ? /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      title: labels.noMatches(trimmed),
+      action: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: clearSearch, children: labels.clearSearch })
+    }
+  ) : /* @__PURE__ */ jsx(Card, { className: "p-1", children: /* @__PURE__ */ jsx(List, { separator: "divider", density: "comfortable", "aria-label": labels.results, children: hits.map((hit) => /* @__PURE__ */ jsx(
+    ListItem,
+    {
+      title: hit.title,
+      trailing: groupById.get(hit.settingsGroup)?.title,
+      href: settingsHref(base, hit.settingsGroup, hit.anchor),
+      renderLink,
+      onClick: () => setQuery("")
+    },
+    hit.id
+  )) }) });
+  const cards = (open) => /* @__PURE__ */ jsx(SettingsHeadingLevel, { level: headingLevel, children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderGroup(open, sub) }) });
+  let body;
+  if (phone) {
+    const open = group === null ? void 0 : groupById.get(group);
+    body = open ? /* @__PURE__ */ jsxs("div", { className: pageClass, "data-settings-view": "group", children: [
+      /* @__PURE__ */ jsx(
+        PageHeader,
+        {
+          size: "compact",
+          title: open.title,
+          description: open.help,
+          breadcrumbs: /* @__PURE__ */ jsxs(
+            Link,
+            {
+              to: base || "/",
+              "aria-label": labels.back,
+              onClick: (e) => {
+                if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+                e.preventDefault();
+                route.back();
+              },
+              className: "-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-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+              children: [
+                /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true, className: "size-4 rtl:-scale-x-100" }),
+                pageTitle
+              ]
+            }
+          )
+        }
+      ),
+      cards(open.id)
+    ] }) : /* @__PURE__ */ jsxs("div", { className: pageClass, "data-settings-view": "list", children: [
+      /* @__PURE__ */ jsx(PageHeader, { size: "compact", title: pageTitle }),
+      searchField,
+      searching ? results : /* @__PURE__ */ jsx(Card, { className: "p-1", children: /* @__PURE__ */ jsx(List, { separator: "divider", density: "comfortable", "aria-label": labels.sections, children: route.groups.map((g) => /* @__PURE__ */ jsx(
+        ListItem,
+        {
+          href: settingsHref(base, g.id),
+          renderLink,
+          leading: /* @__PURE__ */ jsx(
+            "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",
+              children: g.icon
+            }
+          ),
+          title: g.title,
+          subtitle: g.help,
+          trailing: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-4 rtl:-scale-x-100" })
+        },
+        g.id
+      )) }) }),
+      !searching && phoneFooter != null && /* @__PURE__ */ jsx(Card, { className: "p-1", children: /* @__PURE__ */ jsx(List, { separator: "divider", density: "comfortable", children: phoneFooter }) })
+    ] });
+  } else {
+    const open = group === null ? void 0 : groupById.get(group);
+    body = /* @__PURE__ */ jsxs("div", { className: pageClass, "data-settings-view": "desktop", children: [
+      /* @__PURE__ */ jsx(PageHeader, { size: "compact", title: pageTitle }),
+      searchField,
+      /* @__PURE__ */ jsxs("div", { className: "md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:gap-6", children: [
+        /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            orientation: "vertical",
+            "aria-label": labels.sections,
+            className: "mb-4 md:sticky md:top-6 md:mb-0 md:self-start",
+            panelId: open && !searching ? panelId : void 0,
+            tabs: route.groups.map((g) => {
+              const count = hitsByGroup.get(g.id) ?? 0;
+              const dim = searching && count === 0;
+              return {
+                id: g.id,
+                href: `${root}${settingsHref(base, g.id)}`,
+                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: [
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: count }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only-fixed", children: labels.matchCount(count) })
+                ] }) : void 0
+              };
+            }),
+            active: open?.id ?? route.groups[0]?.id,
+            onChange: (id) => {
+              setQuery("");
+              select(id);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-4", children: searching ? results : open ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: panelId,
+            role: "tabpanel",
+            "aria-labelledby": `${panelId}-tab`,
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsx(PageHeader, { as: "h2", size: "sm", title: open.title, description: open.help }),
+              cards(open.id)
+            ]
+          }
+        ) : null })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(SettingsLayoutContext.Provider, { value: context, children: body });
+}
+export {
+  SETTINGS_SEARCH_THRESHOLD,
+  SettingsLayout
+};
+//# sourceMappingURL=settings-layout.js.map

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

@@ -0,0 +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 { 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=\"-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-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\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":[]}

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

@@ -0,0 +1,133 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { bZ as CardTone } from '../delete-account-setting-DCFS5Vof.js';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-DUELeXpa.js';
+import '../components/data-table-sort.js';
+import '../components/swipeable-row.js';
+import '../components/mini-calendar.js';
+import '../components/calendar-heatmap.js';
+import '../components/popover.js';
+import '../components/chip.js';
+import 'lucide-react';
+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/stat-tile.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 '../components/status-dot.js';
+import '../components/progress-bar.js';
+import '../components/signed-amount.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 '../components/write-lock.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/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/field-parts.js';
+
+interface SettingsSectionProps extends Omit<ComponentPropsWithoutRef<"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). */
+    title: ReactNode;
+    /**
+     * `false` keeps the title for screen readers only — for a card alone in a group named
+     * after it, so the page does not print the same heading twice (§3.7, keksdose's admin,
+     * dev#490/#493/#494). The heading is still there: the outline and `?focus=` need it.
+     * Default `true`.
+     */
+    titleVisible?: boolean;
+    /** One muted line under the title. */
+    description?: ReactNode;
+    /** `danger` for the destructive cards at the end of "data" (§3.7). */
+    tone?: CardTone;
+    /** A control at the title's end — a refresh, a toggle. It drops under the title when
+     *  the card is too narrow for both. */
+    action?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * An app's own settings card (docs/settings-harmonization.md §3.7, §7.1): a kit `Card` at
+ * the settings type scale — the title `text-sm font-medium`, the description `text-xs`
+ * muted, as the kit's own setting cards — with the catalogue anchor as its id, the title
+ * as a heading under the group's, and the `?focus=` ring landing on it.
+ *
+ * **A card without a catalogue entry throws in development** (keksdose's `section()`
+ * guard). A card search cannot find breaks the rule that every setting is findable
+ * (§4.1), and the old failure was silent: a hit that scrolled nowhere. The check runs
+ * 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 };

package/dist/settings/settings-section.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card } from "../components/ui.js";
+import { cn } from "../lib/cn.js";
+import { CARD_DESCRIPTION_CLASS, CARD_TITLE_CLASS } from "../account/account-parts.js";
+import { SettingsHeading, useSettingsHeadingLevel } from "./settings-heading.js";
+import { useSettingsLayout } from "./settings-context.js";
+function devChecks() {
+  return Boolean(import.meta.env?.DEV);
+}
+function SettingsSection({
+  anchor,
+  title,
+  titleVisible = true,
+  description,
+  tone,
+  action,
+  children,
+  className,
+  ...rest
+}) {
+  const layout = useSettingsLayout();
+  const level = useSettingsHeadingLevel() ?? "h3";
+  if (layout && devChecks() && !layout.hasAnchor(anchor)) {
+    throw new Error(
+      `SettingsSection "${anchor}" has no catalogue entry: add a SettingsEntry with anchor "${anchor}" so search and ?focus= can reach it.`
+    );
+  }
+  const heading = /* @__PURE__ */ jsx(
+    SettingsHeading,
+    {
+      as: level,
+      tabIndex: -1,
+      "data-settings-heading": "",
+      className: cn(CARD_TITLE_CLASS, "outline-none", !titleVisible && "sr-only-fixed"),
+      children: title
+    }
+  );
+  const header = titleVisible || description != null || action != null ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-3 gap-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 basis-48", children: [
+      heading,
+      description != null && /* @__PURE__ */ jsx("div", { className: CARD_DESCRIPTION_CLASS, children: description })
+    ] }),
+    action != null && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: action })
+  ] }) : heading;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      ...rest,
+      id: anchor,
+      tone,
+      className: cn("flex flex-col gap-3 p-4 transition-shadow motion-reduce:transition-none", className),
+      children: [
+        header,
+        children
+      ]
+    }
+  );
+}
+export {
+  SettingsSection
+};
+//# sourceMappingURL=settings-section.js.map

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

@@ -0,0 +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":[]}