@eifi1/ui-kit 0.30.0 → 0.31.1

package/dist/rhf/form.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactElement, ComponentProps } from 'react';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
-import { dW as LabelProps } from '../delete-account-setting-CGVMckMw.js';
+import { dW as LabelProps } from '../delete-account-setting-CpIhzxxZ.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -57,6 +57,8 @@ 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';
@@ -78,6 +80,8 @@ import '../account/data-export-setting.js';
 import '../components/account-chips.js';
 import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
+import '../settings/settings-labels.js';
+import '../demo/demo-labels.js';
 import '../components/reauth-dialog.js';
 import '../components/server-wake.js';
 import '../lib/server-wake.js';

package/dist/rhf.d.ts

@@ -4,7 +4,7 @@ export { RhfCheckbox, RhfCheckboxProps, RhfCombobox, RhfComboboxProps, RhfCountr
 export { RhfLineItemCellContext, RhfLineItems, RhfLineItemsColumn, RhfLineItemsProps } from './rhf/line-items.js';
 import 'react';
 import 'react-hook-form';
-import './delete-account-setting-CGVMckMw.js';
+import './delete-account-setting-CpIhzxxZ.js';
 import './components/tooltip.js';
 import './hooks/use-anchored-rect.js';
 import './lib/clipping.js';
@@ -59,6 +59,8 @@ 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';
@@ -80,6 +82,8 @@ import './account/data-export-setting.js';
 import './components/account-chips.js';
 import './admin/admin-parts.js';
 import './admin/admin-action-log.js';
+import './settings/settings-labels.js';
+import './demo/demo-labels.js';
 import './components/reauth-dialog.js';
 import './components/server-wake.js';
 import './lib/server-wake.js';

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

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+import { SearchEntry } from '../search/search-index.js';
+
+/**
+ * The settings catalogue (docs/settings-harmonization.md §4.1), lifted from keksdose's
+ * `settings-index.ts`: the groups a settings page is split into, and one entry per
+ * SETTING — not per card — so a search for "quiet hours" finds the field inside the
+ * notifications card. One list feeds the sidebar, the phone list, the in-page search and
+ * ⌘K ({@link settingsSearchEntries}); keksdose's page and its palette drifted when they
+ * had one each.
+ *
+ * The kit resolves no words: `title`, `help` and `keywords` arrive translated (an app's
+ * own, or the core groups' from `DEFAULT_SETTINGS_LABELS.groups`).
+ */
+/** One group of the page: a sidebar row on a desktop, a list row on a phone (§3.2, §3.3). */
+interface SettingsGroup<G extends string = string> {
+    /** The path segment, `/settings/<id>`: lowercase, a–z and "-". */
+    id: G;
+    /** The row's icon — a lucide icon at the row's size is sized by the row. */
+    icon: ReactNode;
+    /** The group's name: the sidebar row, the heading over its cards, the phone list. */
+    title: string;
+    /** One line under the heading and in the phone list, where it is cut to one line. */
+    help: string;
+    /**
+     * `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).
+     * kastlan's `/admin/billing` while billing is off. Default: visible.
+     */
+    visible?: boolean;
+}
+/** One setting, and the card that holds it (§4.1). */
+interface SettingsEntry<G extends string = string> {
+    /** Unique within the catalogue. */
+    id: string;
+    /** The group whose page shows the card. */
+    group: G;
+    /** The card's DOM id, unique on the page — the `?focus=` target. Several entries may
+     *  share one: a card that holds four settings has four entries. */
+    anchor: string;
+    /** What a search hit says. */
+    title: string;
+    /** Localized, space-separated words people type that the title does not contain
+     *  ("dark night" for the theme, "2fa totp" for two-factor). Never shown. */
+    keywords?: string;
+    /**
+     * `false` drops the entry from the page's search and ⌘K. A group whose entries are
+     * ALL hidden is hidden with them (§4.1): a demo session marks every card it is refused
+     * (passkeys, 2FA, export, deletion …) and so never sees a page of cards that each
+     * answer 403. Default: visible.
+     */
+    visible?: boolean;
+}
+/**
+ * The groups that show, in their order: not `visible: false`, and — when `entries` is
+ * given — holding at least one visible entry (§4.1: Kurvenschmiede's notifications group
+ * stays hidden until it has a card). Without `entries` only the groups' own flag counts.
+ */
+declare function visibleSettingsGroups<G extends string>(groups: readonly SettingsGroup<G>[], entries?: readonly SettingsEntry<G>[]): SettingsGroup<G>[];
+/** The visible entries of the visible groups — what search may find. */
+declare function visibleSettingsEntries<G extends string>(groups: readonly SettingsGroup<G>[], entries: readonly SettingsEntry<G>[]): SettingsEntry<G>[];
+/** `basePath` without a trailing slash: "/settings/" and "/settings" are one page. */
+declare function normalizeSettingsBase(basePath: string): string;
+/** `/settings/<group>`, and `?focus=<anchor>` when a card is named (§3.4). */
+declare function settingsHref(basePath: string, group: string, anchor?: string): string;
+/** "dark  night" → ["dark", "night"]. */
+declare function settingsKeywords(keywords: string | undefined): string[];
+interface SettingsSearchEntriesOptions {
+    /** `/settings` or `/admin` — the hits link to `<basePath>/<group>?focus=<anchor>`. */
+    basePath: string;
+}
+/**
+ * The catalogue as {@link GlobalSearch} entries (§3.4): each visible setting, under its
+ * group's name as the palette's section, linking to `/settings/<group>?focus=<anchor>` —
+ * the same link the page's own search hit is, so ⌘K, a tour and a mail all land the
+ * same way (§3.5). The group's name is a keyword too, as on the page: "security" lists
+ * the security group's settings.
+ *
+ * Ids are prefixed with the base path ("settings:theme", "admin:users") so a palette
+ * that also holds pages and actions keeps them unique.
+ */
+declare function settingsSearchEntries<G extends string>(groups: readonly SettingsGroup<G>[], entries: readonly SettingsEntry<G>[], options: SettingsSearchEntriesOptions): SearchEntry[];
+
+export { type SettingsEntry, type SettingsGroup, type SettingsSearchEntriesOptions, normalizeSettingsBase, settingsHref, settingsKeywords, settingsSearchEntries, visibleSettingsEntries, visibleSettingsGroups };

package/dist/settings/settings-catalogue.js

@@ -0,0 +1,47 @@
+"use client";
+function visibleSettingsGroups(groups, entries) {
+  if (!entries) return groups.filter((g) => g.visible !== false);
+  const filled = /* @__PURE__ */ new Set();
+  for (const e of entries) if (e.visible !== false) filled.add(e.group);
+  return groups.filter((g) => g.visible !== false && filled.has(g.id));
+}
+function visibleSettingsEntries(groups, entries) {
+  const shown = new Set(visibleSettingsGroups(groups, entries).map((g) => g.id));
+  return entries.filter((e) => e.visible !== false && shown.has(e.group));
+}
+function normalizeSettingsBase(basePath) {
+  const trimmed = basePath.replace(/\/+$/, "");
+  return trimmed.startsWith("/") || trimmed === "" ? trimmed : `/${trimmed}`;
+}
+function settingsHref(basePath, group, anchor) {
+  const path = `${normalizeSettingsBase(basePath)}/${group}`;
+  return anchor ? `${path}?focus=${encodeURIComponent(anchor)}` : path;
+}
+function settingsKeywords(keywords) {
+  return keywords ? keywords.split(/\s+/).filter(Boolean) : [];
+}
+function settingsSearchEntries(groups, entries, options) {
+  const base = normalizeSettingsBase(options.basePath);
+  const prefix = base.replace(/^\//, "").replace(/\//g, ":") || "settings";
+  const byId = new Map(visibleSettingsGroups(groups, entries).map((g) => [g.id, g]));
+  return visibleSettingsEntries(groups, entries).map((e) => {
+    const group = byId.get(e.group);
+    return {
+      id: `${prefix}:${e.id}`,
+      title: e.title,
+      keywords: [group.title, ...settingsKeywords(e.keywords)],
+      group: group.title,
+      icon: group.icon,
+      href: settingsHref(base, e.group, e.anchor)
+    };
+  });
+}
+export {
+  normalizeSettingsBase,
+  settingsHref,
+  settingsKeywords,
+  settingsSearchEntries,
+  visibleSettingsEntries,
+  visibleSettingsGroups
+};
+//# sourceMappingURL=settings-catalogue.js.map

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

@@ -0,0 +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\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). Without `entries` only the 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 && 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":";AA6DO,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,SAAS,OAAO,IAAI,EAAE,EAAE,CAAC;AACrE;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-context.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { SettingsHeadingTag } from './settings-heading.js';
+
+/**
+ * What {@link SettingsLayout} hands the cards it renders (docs/settings-harmonization.md
+ * §3.1, §3.7). Router-free on purpose, so `SettingsSection` and an app's cards can read
+ * it without importing the layout.
+ */
+interface SettingsLayoutContextValue {
+    /** `/settings` or `/admin`, without a trailing slash. */
+    basePath: string;
+    /** The group on screen; `null` on a phone's list. */
+    group: string | null;
+    /** The path segment after the group — the surface a card owns (keksdose's swipe card). */
+    sub: string | null;
+    /**
+     * Select the card's sub-surface: `/settings/<group>/<sub>`, or the group alone with
+     * `null`. A replace, keeping the query and the history marker: switching a tab inside a
+     * card is not a place to go back to. The card never builds the path itself (§3.1).
+     */
+    selectSub: (sub: string | null) => void;
+    /** The level the cards' titles are at: `h3` on a desktop, `h2` on a phone. */
+    headingLevel: SettingsHeadingTag;
+    /** Whether the catalogue has an entry with this anchor — `SettingsSection`'s check. */
+    hasAnchor: (anchor: string) => boolean;
+}
+declare const SettingsLayoutContext: react.Context<SettingsLayoutContextValue | null>;
+/** The {@link SettingsLayout} around this card, or `null` outside one. */
+declare function useSettingsLayout(): SettingsLayoutContextValue | null;
+
+export { SettingsLayoutContext, type SettingsLayoutContextValue, useSettingsLayout };

package/dist/settings/settings-context.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext, useContext } from "react";
+const SettingsLayoutContext = createContext(null);
+function useSettingsLayout() {
+  return useContext(SettingsLayoutContext);
+}
+export {
+  SettingsLayoutContext,
+  useSettingsLayout
+};
+//# sourceMappingURL=settings-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/settings/settings-context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { SettingsHeadingTag } from \"./settings-heading\";\n\n/**\n * What {@link SettingsLayout} hands the cards it renders (docs/settings-harmonization.md\n * §3.1, §3.7). Router-free on purpose, so `SettingsSection` and an app's cards can read\n * it without importing the layout.\n */\nexport interface SettingsLayoutContextValue {\n  /** `/settings` or `/admin`, without a trailing slash. */\n  basePath: string;\n  /** The group on screen; `null` on a phone's list. */\n  group: string | null;\n  /** The path segment after the group — the surface a card owns (keksdose's swipe card). */\n  sub: string | null;\n  /**\n   * Select the card's sub-surface: `/settings/<group>/<sub>`, or the group alone with\n   * `null`. A replace, keeping the query and the history marker: switching a tab inside a\n   * card is not a place to go back to. The card never builds the path itself (§3.1).\n   */\n  selectSub: (sub: string | null) => void;\n  /** The level the cards' titles are at: `h3` on a desktop, `h2` on a phone. */\n  headingLevel: SettingsHeadingTag;\n  /** Whether the catalogue has an entry with this anchor — `SettingsSection`'s check. */\n  hasAnchor: (anchor: string) => boolean;\n}\n\nexport const SettingsLayoutContext = createContext<SettingsLayoutContextValue | null>(null);\n\n/** The {@link SettingsLayout} around this card, or `null` outside one. */\nexport function useSettingsLayout(): SettingsLayoutContextValue | null {\n  return useContext(SettingsLayoutContext);\n}\n"],"mappings":";AAAA,SAAS,eAAe,kBAAkB;AA2BnC,MAAM,wBAAwB,cAAiD,IAAI;AAGnF,SAAS,oBAAuD;AACrE,SAAO,WAAW,qBAAqB;AACzC;","names":[]}

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

@@ -0,0 +1,50 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+
+/** The heading a settings card's title becomes. */
+type SettingsHeadingTag = "h2" | "h3" | "h4";
+interface SettingsHeadingLevelProps {
+    /** The element every kit setting card below titles itself with. */
+    level: SettingsHeadingTag;
+    children?: ReactNode;
+}
+/**
+ * The level the kit's setting cards title themselves at (docs/settings-harmonization.md
+ * §3.7). Inside {@link SettingsLayout} a card's title is a heading under the group's —
+ * `h3` under the desktop's `h2`, `h2` under a phone group page's `h1` — and the layout
+ * sets this for every card it renders. Outside one, nothing is set and the same cards
+ * keep the plain `div` title they always had, so a card on an app's own page does not
+ * suddenly put an `h3` into an outline that has no `h2`.
+ *
+ * Set it yourself only where an app lays out settings cards without the layout and
+ * wants them in its outline: `<SettingsHeadingLevel level="h3">…</SettingsHeadingLevel>`.
+ * `ProfileSetting`, `PasswordSetting`, `TwoFactorSetting`, `PasskeysSetting`,
+ * `EmailChangeSetting`, `SessionsSetting`, `DataExportSetting`, `DeleteAccountSetting`
+ * and `SettingsSection` read it.
+ */
+declare function SettingsHeadingLevel({ level, children }: SettingsHeadingLevelProps): react.JSX.Element;
+/** The nearest {@link SettingsHeadingLevel}, or `null` outside one. */
+declare function useSettingsHeadingLevel(): SettingsHeadingTag | null;
+/**
+ * A setting card's title at the settings type scale: a heading inside a
+ * {@link SettingsHeadingLevel}, the plain `div` outside one.
+ *
+ * As a heading it takes `tabIndex={-1}`: `?focus=` moves focus to the card's heading so a
+ * screen reader lands on the card it was sent to (§3.5), and a heading is not focusable
+ * otherwise. No outline of its own — the ring round the card marks it.
+ *
+ * @internal The kit's cards use it; not part of the barrel.
+ */
+declare function SettingsCardTitle({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
+/**
+ * A heading at a level chosen at run time. Its own component, taking the tag as a prop
+ * (as `CardTitle` does), so the element type is a prop and not a value computed in the
+ * caller's render.
+ *
+ * @internal
+ */
+declare function SettingsHeading({ as: Tag, ...props }: {
+    as: SettingsHeadingTag;
+} & ComponentPropsWithoutRef<"h2">): react.JSX.Element;
+
+export { SettingsCardTitle, SettingsHeading, SettingsHeadingLevel, type SettingsHeadingLevelProps, type SettingsHeadingTag, useSettingsHeadingLevel };

package/dist/settings/settings-heading.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { cn } from "../lib/cn.js";
+import { CARD_TITLE_CLASS } from "../account/account-parts.js";
+const SettingsHeadingLevelContext = createContext(null);
+function SettingsHeadingLevel({ level, children }) {
+  return /* @__PURE__ */ jsx(SettingsHeadingLevelContext.Provider, { value: level, children });
+}
+function useSettingsHeadingLevel() {
+  return useContext(SettingsHeadingLevelContext);
+}
+function SettingsCardTitle({ className, ...props }) {
+  const level = useSettingsHeadingLevel();
+  if (!level) return /* @__PURE__ */ jsx("div", { ...props, className: cn(CARD_TITLE_CLASS, className) });
+  return /* @__PURE__ */ jsx(SettingsHeading, { as: level, tabIndex: -1, ...props, className: cn(CARD_TITLE_CLASS, "outline-none", className) });
+}
+function SettingsHeading({ as: Tag, ...props }) {
+  return /* @__PURE__ */ jsx(Tag, { ...props });
+}
+export {
+  SettingsCardTitle,
+  SettingsHeading,
+  SettingsHeadingLevel,
+  useSettingsHeadingLevel
+};
+//# sourceMappingURL=settings-heading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/settings/settings-heading.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { CARD_TITLE_CLASS } from \"../account/account-parts\";\n\n/** The heading a settings card's title becomes. */\nexport type SettingsHeadingTag = \"h2\" | \"h3\" | \"h4\";\n\nconst SettingsHeadingLevelContext = createContext<SettingsHeadingTag | null>(null);\n\nexport interface SettingsHeadingLevelProps {\n  /** The element every kit setting card below titles itself with. */\n  level: SettingsHeadingTag;\n  children?: ReactNode;\n}\n\n/**\n * The level the kit's setting cards title themselves at (docs/settings-harmonization.md\n * §3.7). Inside {@link SettingsLayout} a card's title is a heading under the group's —\n * `h3` under the desktop's `h2`, `h2` under a phone group page's `h1` — and the layout\n * sets this for every card it renders. Outside one, nothing is set and the same cards\n * keep the plain `div` title they always had, so a card on an app's own page does not\n * suddenly put an `h3` into an outline that has no `h2`.\n *\n * Set it yourself only where an app lays out settings cards without the layout and\n * wants them in its outline: `<SettingsHeadingLevel level=\"h3\">…</SettingsHeadingLevel>`.\n * `ProfileSetting`, `PasswordSetting`, `TwoFactorSetting`, `PasskeysSetting`,\n * `EmailChangeSetting`, `SessionsSetting`, `DataExportSetting`, `DeleteAccountSetting`\n * and `SettingsSection` read it.\n */\nexport function SettingsHeadingLevel({ level, children }: SettingsHeadingLevelProps) {\n  return <SettingsHeadingLevelContext.Provider value={level}>{children}</SettingsHeadingLevelContext.Provider>;\n}\n\n/** The nearest {@link SettingsHeadingLevel}, or `null` outside one. */\nexport function useSettingsHeadingLevel(): SettingsHeadingTag | null {\n  return useContext(SettingsHeadingLevelContext);\n}\n\n/**\n * A setting card's title at the settings type scale: a heading inside a\n * {@link SettingsHeadingLevel}, the plain `div` outside one.\n *\n * As a heading it takes `tabIndex={-1}`: `?focus=` moves focus to the card's heading so a\n * screen reader lands on the card it was sent to (§3.5), and a heading is not focusable\n * otherwise. No outline of its own — the ring round the card marks it.\n *\n * @internal The kit's cards use it; not part of the barrel.\n */\nexport function SettingsCardTitle({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  const level = useSettingsHeadingLevel();\n  if (!level) return <div {...props} className={cn(CARD_TITLE_CLASS, className)} />;\n  return <SettingsHeading as={level} tabIndex={-1} {...props} className={cn(CARD_TITLE_CLASS, \"outline-none\", className)} />;\n}\n\n/**\n * A heading at a level chosen at run time. Its own component, taking the tag as a prop\n * (as `CardTitle` does), so the element type is a prop and not a value computed in the\n * caller's render.\n *\n * @internal\n */\nexport function SettingsHeading({ as: Tag, ...props }: { as: SettingsHeadingTag } & ComponentPropsWithoutRef<\"h2\">) {\n  return <Tag {...props} />;\n}\n"],"mappings":";AA+BS;AA/BT,SAAS,eAAe,kBAAkB;AAE1C,SAAS,UAAU;AACnB,SAAS,wBAAwB;AAKjC,MAAM,8BAA8B,cAAyC,IAAI;AAsB1E,SAAS,qBAAqB,EAAE,OAAO,SAAS,GAA8B;AACnF,SAAO,oBAAC,4BAA4B,UAA5B,EAAqC,OAAO,OAAQ,UAAS;AACvE;AAGO,SAAS,0BAAqD;AACnE,SAAO,WAAW,2BAA2B;AAC/C;AAYO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAoC;AAC1F,QAAM,QAAQ,wBAAwB;AACtC,MAAI,CAAC,MAAO,QAAO,oBAAC,SAAK,GAAG,OAAO,WAAW,GAAG,kBAAkB,SAAS,GAAG;AAC/E,SAAO,oBAAC,mBAAgB,IAAI,OAAO,UAAU,IAAK,GAAG,OAAO,WAAW,GAAG,kBAAkB,gBAAgB,SAAS,GAAG;AAC1H;AASO,SAAS,gBAAgB,EAAE,IAAI,KAAK,GAAG,MAAM,GAAgE;AAClH,SAAO,oBAAC,OAAK,GAAG,OAAO;AACzB;","names":[]}

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

@@ -0,0 +1,48 @@
+/**
+ * The `settings` namespace (docs/settings-harmonization.md §4.3): the settings page's
+ * own words, and the names and help lines of the five core groups every app shares —
+ * appearance, account, security, notifications, data (§2.6). An app's own groups bring
+ * their own words; any core label may be overridden like any kit label (prop >
+ * `<UiKitProvider labels={{ settings }}>` > English).
+ */
+/** A core group's two strings, as {@link SettingsGroup} takes them. */
+interface SettingsGroupLabels {
+    /** The group's name. */
+    title: string;
+    /** One line: under the heading, and in the phone list. */
+    help: string;
+}
+/** The five groups whose words the kit ships (§2.6, §4.2). */
+type SettingsCoreGroup = "appearance" | "account" | "security" | "notifications" | "data";
+interface SettingsLabels {
+    /** The page's heading, and the back link's visible text on a phone's group page. */
+    title: string;
+    /** The search field's accessible name. */
+    search: string;
+    /** The search field's placeholder. */
+    searchPlaceholder: string;
+    /** The hit list's accessible name. */
+    results: string;
+    /** No hits for the trimmed query (§3.4). */
+    noMatches: (query: string) => string;
+    /** The button beside it that empties the field. */
+    clearSearch: string;
+    /** The phone's back link's accessible name: "‹ Settings" says where, this says what. */
+    back: string;
+    /** The sidebar's accessible name (the vertical tablist). */
+    sections: string;
+    /** A sidebar row's hit badge, read in place of the bare number while searching. */
+    matchCount: (count: number) => string;
+    /** The core groups' names and help lines. */
+    groups: Record<SettingsCoreGroup, SettingsGroupLabels>;
+}
+declare const DEFAULT_SETTINGS_LABELS: SettingsLabels;
+/**
+ * 0.31.1: the `settings` namespace, resolved — English, then the provider, then `labels`.
+ * What an app reads for its catalogue's core group titles and help lines, and for the
+ * page title "<group> · Settings · <app>" (settings contract §3.1), without restating
+ * the namespace and its defaults (Kurvenschmiede's 0.31 adoption).
+ */
+declare function useSettingsLabels(labels?: Partial<SettingsLabels>): SettingsLabels;
+
+export { DEFAULT_SETTINGS_LABELS, type SettingsCoreGroup, type SettingsGroupLabels, type SettingsLabels, useSettingsLabels };

package/dist/settings/settings-labels.js

@@ -0,0 +1,43 @@
+"use client";
+import { useKitLabels } from "../i18n/kit-labels.js";
+const DEFAULT_SETTINGS_LABELS = {
+  title: "Settings",
+  search: "Search settings",
+  searchPlaceholder: "Search settings\u2026",
+  results: "Matching settings",
+  noMatches: (query) => `No settings match \u201C${query}\u201D.`,
+  clearSearch: "Clear search",
+  back: "Back to settings",
+  sections: "Settings sections",
+  matchCount: (count) => count === 1 ? "1 match" : `${count} matches`,
+  groups: {
+    appearance: {
+      title: "Appearance",
+      help: "Language, theme and how the app looks on this device."
+    },
+    account: {
+      title: "Account",
+      help: "Your profile and your email address."
+    },
+    security: {
+      title: "Security",
+      help: "How you sign in, and where you are signed in."
+    },
+    notifications: {
+      title: "Notifications",
+      help: "What you are told about, when, and on which devices."
+    },
+    data: {
+      title: "Data",
+      help: "Export what is yours, or delete it together with your account."
+    }
+  }
+};
+function useSettingsLabels(labels) {
+  return useKitLabels("settings", DEFAULT_SETTINGS_LABELS, labels);
+}
+export {
+  DEFAULT_SETTINGS_LABELS,
+  useSettingsLabels
+};
+//# sourceMappingURL=settings-labels.js.map

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

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

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 };