@eifi1/ui-kit 0.29.0 → 0.31.0

package/dist/components/number-input.d.ts

@@ -2,7 +2,10 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalculatorButtonLabels } from './calculator.js';
 import { NumberPadSheetLabels } from './numpad-sheet.js';
-import '../register-form-V1OeNlMr.js';
+import '../delete-account-setting-DCFS5Vof.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../data-table-labels-DUELeXpa.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
@@ -12,10 +15,6 @@ import './popover.js';
 import './chip.js';
 import 'lucide-react';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './field-parts.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -58,6 +57,14 @@ import './image-grid.js';
 import './lightbox.js';
 import './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';
@@ -66,8 +73,15 @@ import '../auth/verify-email.js';
 import '../auth/not-found-page.js';
 import '../auth/accept-invitation.js';
 import '../shell/company-switcher.js';
-import './account-chips.js';
+import '../account/email-change-setting.js';
+import '../account/sessions-setting.js';
 import '../lib/format.js';
+import '../account/data-export-setting.js';
+import './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 './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -81,12 +95,7 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.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 './field-parts.js';
 
 interface NumberInputProps {
     /** The text, DOT-decimal ("1234.5", or a calculation being typed: "12+5"), as

package/dist/components/numpad-sheet.d.ts

@@ -1,6 +1,9 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { bB as CalculatorLabels } from '../register-form-V1OeNlMr.js';
+import { bI as CalculatorLabels } from '../delete-account-setting-DCFS5Vof.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../data-table-labels-DUELeXpa.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
@@ -10,10 +13,6 @@ import './popover.js';
 import './chip.js';
 import 'lucide-react';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './field-parts.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -56,6 +55,14 @@ import './image-grid.js';
 import './lightbox.js';
 import './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';
@@ -64,8 +71,15 @@ import '../auth/verify-email.js';
 import '../auth/not-found-page.js';
 import '../auth/accept-invitation.js';
 import '../shell/company-switcher.js';
-import './account-chips.js';
+import '../account/email-change-setting.js';
+import '../account/sessions-setting.js';
 import '../lib/format.js';
+import '../account/data-export-setting.js';
+import './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 './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -79,12 +93,7 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.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 './field-parts.js';
 
 /**
  * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to

package/dist/components/passkeys-setting.js

@@ -7,6 +7,7 @@ import { useKitLocale } from "../i18n/kit-labels.js";
 import { Button, Card, EmptyState, Input } from "./ui.js";
 import { Skeleton } from "./skeleton.js";
 import { useAccountSettingsLabels } from "./account-settings-labels.js";
+import { SettingsCardTitle } from "../settings/settings-heading.js";
 function PasskeysSetting({
   passkeys,
   loading,
@@ -114,7 +115,7 @@ function PasskeysSetting({
     // `rest` is only `id` and `data-*`: everything else the props name is destructured.
     /* @__PURE__ */ jsxs(Card, { ...rest, className: cn("p-4 space-y-3", className), children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: labels.title }),
+        /* @__PURE__ */ jsx(SettingsCardTitle, { children: labels.title }),
         /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)]", children: mode === "alongside" ? labels.descriptionAlongside : labels.description })
       ] }),
       body

package/dist/components/passkeys-setting.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/passkeys-setting.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { KeyRound } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { Button, Card, EmptyState, Input } from \"./ui\";\nimport { Skeleton } from \"./skeleton\";\nimport { useAccountSettingsLabels } from \"./account-settings-labels\";\nimport type { PasskeysSettingLabels } from \"./account-settings-labels\";\n\n/** What a passkey's `id` may be: the app's own key type, string or numeric. */\nexport type PasskeyId = string | number;\n\n/**\n * One registered passkey, as the app's API lists it.\n *\n * Generic in its `id` (0.16.0): `PasskeysSetting` infers `Id` from `passkeys`, so an\n * app whose ids are numbers gets numbers back in `onRename` / `onDelete` — keksdose\n * cast `id as number` in both. Left unparameterised it is the old `string | number`.\n */\nexport interface PasskeyItem<Id extends PasskeyId = PasskeyId> {\n  id: Id;\n  name: string;\n  /** A `Date`, an ISO string or epoch ms. */\n  createdAt?: Date | string | number | null;\n  /** Null (or left out) reads as \"Never used\". */\n  lastUsedAt?: Date | string | number | null;\n}\n\n/** `data-*` attributes, passed through to the element they are given for. */\nexport type PasskeyDataAttributes = { [key: `data-${string}`]: string | number | boolean | undefined };\n\nexport interface PasskeysSettingProps<Id extends PasskeyId = PasskeyId> extends PasskeyDataAttributes {\n  /** `undefined` while the first load is in flight (or pass `loading`). */\n  passkeys: readonly PasskeyItem<Id>[] | undefined;\n  loading?: boolean;\n  /**\n   * Run the WebAuthn ceremony and register the passkey — app-side, since the options\n   * and the attestation are the app's server's business. Called with the trimmed name\n   * field, which may be EMPTY: pick your own default (\"Passkey\", the device name).\n   * Return the promise and the field clears when it resolves; a rejection (including\n   * the user cancelling the OS prompt) keeps what was typed.\n   */\n  onAdd: (name: string) => void | Promise<unknown>;\n  /**\n   * A step the app runs BEFORE `onAdd` (0.18.0) — re-asking for the current password,\n   * a policy notice, anything that may stop the add. Called with the same trimmed name;\n   * resolve `true` to go on to `onAdd`, `false` to stop quietly (nothing is said, the\n   * typed name stays). A rejection, or a throw, stops the same way: the app reports\n   * its own errors. While it runs the add button is disabled and busy, so a second\n   * click cannot start a second check.\n   *\n   * Kurvenschmiede asked for the password in its own dialog by handing `onAdd` a\n   * promise it kept open across that dialog (passkeys-card.tsx) — which still works.\n   * This is the documented place for it: open the dialog here, resolve with whether it\n   * was confirmed, and keep what it produced (the server's registration options) for\n   * `onAdd` in a ref. The ceremony then starts from the dialog's click rather than the\n   * card's, which is the user activation `navigator.credentials.create` wants.\n   *\n   * Left out, `onAdd` is called synchronously in the click, exactly as before.\n   */\n  beforeAdd?: (name: string) => boolean | Promise<boolean>;\n  /**\n   * What a passkey does to the password, which picks the line under the title (0.18.0).\n   * `\"instead\"` (default): it replaces it — `labels.description`, kastlan's promise.\n   * `\"alongside\"`: the password stays and the passkey is a second way in —\n   * `labels.descriptionAlongside`. Kurvenschmiede overrode `description` for exactly\n   * this; an app that sets `mode` needs no override.\n   */\n  mode?: \"instead\" | \"alongside\";\n  /** The ceremony is running. The add button says so and does not start a second one. */\n  adding?: boolean;\n  /** Offer \"Rename\" on each row. Return a promise to leave edit mode only on success. */\n  onRename?: (id: Id, name: string) => void | Promise<unknown>;\n  /** Offer \"Delete\" on each row — always behind an inline confirmation. */\n  onDelete?: (id: Id) => void | Promise<unknown>;\n  /** A row whose rename or delete is in flight; its buttons are disabled. */\n  busyId?: Id | null;\n  /** Show the name field above the add button. Default true. */\n  nameField?: boolean;\n  /**\n   * Shown INSTEAD of the list and the add button — passkeys are not supported by this\n   * browser, or the page is not a secure context. Its wording is the app's: only the\n   * app knows which of those it detected.\n   */\n  unavailable?: ReactNode;\n  /** A date for the \"Added …\" / \"Last used …\" lines. Default: the locale's medium date. */\n  formatDate?: (date: Date) => string;\n  /** Overrides the provider's locale for the default date format. */\n  locale?: string;\n  /** Prop > `<UiKitProvider labels={{ accountSettings: { passkeys } }}>` > English. */\n  labels?: Partial<PasskeysSettingLabels>;\n  className?: string;\n  /** On the card (0.16.0), for an in-page link (`#passkeys`) or a test hook. `data-*`\n   *  attributes go there too. */\n  id?: string;\n  /** Extra attributes for one row's `<li>` (0.16.0) — an `id` to scroll a just-added\n   *  key into view, `data-*` for a test. Every row also carries `data-passkey-id`. */\n  rowProps?: (item: PasskeyItem<Id>) => ({ id?: string } & PasskeyDataAttributes) | undefined;\n}\n\n/**\n * The passkeys section of an account page: what is registered, when it was last used,\n * rename and delete, and \"Add passkey\" — the fourth card beside `ProfileSetting`,\n * `PasswordSetting` and `TwoFactorSetting`, and built the same way (a self-contained\n * `<Card>` owning its transient form state; the app owns the data and the API).\n *\n * Lifted from kastlan's passkeys-card. **The WebAuthn ceremony stays app-side**:\n * `navigator.credentials.create` needs options minted by the app's server and hands\n * back an attestation only that server can verify, so the kit calls `onAdd` and waits.\n *\n * **Delete confirms inline**, in the row, rather than through `useConfirm`: this card\n * must work in an app without a `ConfirmProvider`, and the question belongs next to\n * the passkey it names. Focus moves to Cancel, as in every destructive confirm in the\n * kit, so the Enter that pressed Delete cannot also answer it.\n */\nexport function PasskeysSetting<Id extends PasskeyId = PasskeyId>({\n  passkeys,\n  loading,\n  onAdd,\n  beforeAdd,\n  mode = \"instead\",\n  adding = false,\n  onRename,\n  onDelete,\n  busyId,\n  nameField = true,\n  unavailable,\n  formatDate,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  rowProps,\n  ...rest\n}: PasskeysSettingProps<Id>) {\n  const labels = useAccountSettingsLabels(\"passkeys\", labelsProp);\n  const locale = useKitLocale(localeProp);\n  const [name, setName] = useState(\"\");\n  // `beforeAdd` is running. State for the button, and a ref for the guard: two clicks\n  // in one frame both read the state from before either set it.\n  const [checking, setChecking] = useState(false);\n  const checkingRef = useRef(false);\n\n  const date = (value: PasskeyItem[\"createdAt\"]): string | null => {\n    if (value === null || value === undefined || value === \"\") return null;\n    const d = value instanceof Date ? value : new Date(value);\n    if (Number.isNaN(d.getTime())) return null;\n    return formatDate ? formatDate(d) : new Intl.DateTimeFormat(locale, { dateStyle: \"medium\" }).format(d);\n  };\n\n  const add = () => {\n    if (adding || checkingRef.current) return;\n    const typed = name;\n    const value = typed.trim();\n    const send = () =>\n      Promise.resolve(onAdd(value))\n        // Clear only what was sent: the field stays editable while the OS prompt is up.\n        .then(() => setName((current) => (current === typed ? \"\" : current)));\n    if (!beforeAdd) {\n      send().catch(() => {});\n      return;\n    }\n    const done = () => {\n      checkingRef.current = false;\n      setChecking(false);\n    };\n    checkingRef.current = true;\n    setChecking(true);\n    let gate: Promise<boolean>;\n    // Called in the click, not a microtask later, so a step that itself needs the\n    // user's activation (a popup, the clipboard) still has it; a throw is a \"no\".\n    try {\n      gate = Promise.resolve(beforeAdd(value));\n    } catch (error) {\n      gate = Promise.reject(error);\n    }\n    gate\n      .then((go) => {\n        done();\n        // Strictly `true`: an app whose step resolves `undefined` meant nothing.\n        if (go === true) return send();\n      })\n      .catch(done);\n  };\n  const busy = adding || checking;\n\n  const isLoading = loading || passkeys === undefined;\n  const items = passkeys ?? [];\n\n  const body = (() => {\n    if (unavailable != null && unavailable !== false) {\n      return <EmptyState variant=\"inline\" size=\"sm\" icon={<KeyRound />} title={unavailable} />;\n    }\n    return (\n      <>\n        {isLoading ? (\n          <Skeleton lines={2} label={labels.loading} />\n        ) : items.length === 0 ? (\n          <EmptyState variant=\"inline\" size=\"sm\" icon={<KeyRound />} title={labels.empty} />\n        ) : (\n          <ul aria-label={labels.list} className=\"divide-y divide-[var(--border)]\">\n            {items.map((item) => (\n              <PasskeyRow\n                key={item.id}\n                item={item}\n                created={date(item.createdAt)}\n                lastUsed={date(item.lastUsedAt)}\n                attributes={rowProps?.(item)}\n                busy={busyId !== undefined && busyId !== null && busyId === item.id}\n                onRename={onRename}\n                onDelete={onDelete}\n                labels={labels}\n              />\n            ))}\n          </ul>\n        )}\n        <div className=\"space-y-2 pt-1\">\n          {nameField && (\n            <Input\n              label={labels.nameLabel}\n              placeholder={labels.namePlaceholder}\n              value={name}\n              maxLength={120}\n              onChange={(e) => setName(e.target.value)}\n              onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"Enter\") {\n                  e.preventDefault();\n                  add();\n                }\n              }}\n            />\n          )}\n          <Button onClick={add} disabled={busy} aria-busy={busy || undefined}>\n            <KeyRound className=\"size-4\" aria-hidden />\n            {adding ? labels.adding : labels.add}\n          </Button>\n        </div>\n      </>\n    );\n  })();\n\n  return (\n    // `rest` is only `id` and `data-*`: everything else the props name is destructured.\n    <Card {...rest} className={cn(\"p-4 space-y-3\", className)}>\n      <div>\n        <div className=\"text-sm font-medium\">{labels.title}</div>\n        <div className=\"text-xs text-[var(--text-muted)]\">\n          {mode === \"alongside\"\n            ? labels.descriptionAlongside\n            : labels.description}\n        </div>\n      </div>\n      {body}\n    </Card>\n  );\n}\n\ntype RowMode = \"view\" | \"rename\" | \"delete\";\n\nfunction PasskeyRow<Id extends PasskeyId>({\n  item,\n  created,\n  lastUsed,\n  attributes,\n  busy,\n  onRename,\n  onDelete,\n  labels,\n}: {\n  item: PasskeyItem<Id>;\n  created: string | null;\n  lastUsed: string | null;\n  attributes?: { id?: string } & PasskeyDataAttributes;\n  busy: boolean;\n  onRename?: PasskeysSettingProps<Id>[\"onRename\"];\n  onDelete?: PasskeysSettingProps<Id>[\"onDelete\"];\n  labels: PasskeysSettingLabels;\n}) {\n  const [mode, setMode] = useState<RowMode>(\"view\");\n  const [draft, setDraft] = useState(item.name);\n  // Which button opened the sub-mode, so leaving it puts focus back there — the\n  // confirm or the field unmounts under the focus, which otherwise falls to <body>.\n  const [returnTo, setReturnTo] = useState<\"rename\" | \"delete\" | null>(null);\n  const cancelDeleteRef = useRef<HTMLButtonElement>(null);\n  const renameRef = useRef<HTMLInputElement>(null);\n  const renameButtonRef = useRef<HTMLButtonElement>(null);\n  const deleteButtonRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (mode === \"delete\") cancelDeleteRef.current?.focus();\n    else if (mode === \"rename\") renameRef.current?.select();\n    else if (returnTo) (returnTo === \"rename\" ? renameButtonRef : deleteButtonRef).current?.focus();\n  }, [mode, returnTo]);\n\n  const open = (next: \"rename\" | \"delete\") => {\n    setReturnTo(next);\n    setDraft(item.name);\n    setMode(next);\n  };\n  const leave = () => setMode(\"view\");\n  const escapeLeaves = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      e.stopPropagation();\n      leave();\n    }\n  };\n\n  const saveRename = () => {\n    const next = draft.trim();\n    if (!onRename || !next || busy) return;\n    if (next === item.name) {\n      leave();\n      return;\n    }\n    Promise.resolve(onRename(item.id, next))\n      .then(leave)\n      .catch(() => {});\n  };\n\n  const confirmDelete = () => {\n    if (!onDelete || busy) return;\n    // The row unmounts once the list refreshes; on a failure it stays, confirm open.\n    Promise.resolve(onDelete(item.id))\n      .then(() => setMode(\"view\"))\n      .catch(() => {});\n  };\n\n  // On every mode's <li>, so an id the app scrolls to survives a rename or a confirm.\n  const li = { ...attributes, \"data-passkey-id\": String(item.id) };\n\n  const meta = [created && labels.created(created), lastUsed ? labels.lastUsed(lastUsed) : labels.neverUsed]\n    .filter(Boolean)\n    .join(\" · \");\n\n  if (mode === \"rename\") {\n    return (\n      <li {...li} className=\"flex flex-wrap items-center gap-2 py-2\">\n        <Input\n          ref={renameRef}\n          aria-label={labels.renameField(item.name)}\n          className=\"min-w-0 flex-1\"\n          value={draft}\n          maxLength={120}\n          onChange={(e) => setDraft(e.target.value)}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n              saveRename();\n            } else if (e.key === \"Escape\") {\n              e.preventDefault();\n              e.stopPropagation();\n              leave();\n            }\n          }}\n        />\n        <Button size=\"sm\" onClick={saveRename} disabled={busy || !draft.trim()}>\n          {labels.save}\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" onClick={leave}>\n          {labels.cancel}\n        </Button>\n      </li>\n    );\n  }\n\n  if (mode === \"delete\") {\n    return (\n      <li {...li} className=\"space-y-2 py-2\">\n        <p role=\"alert\" className=\"text-sm\">\n          {labels.deleteConfirm(item.name)}\n        </p>\n        <div className=\"flex flex-wrap gap-2\">\n          <Button size=\"sm\" variant=\"danger\" onClick={confirmDelete} onKeyDown={escapeLeaves} disabled={busy}>\n            {labels.confirmDelete}\n          </Button>\n          <Button ref={cancelDeleteRef} size=\"sm\" variant=\"ghost\" onClick={leave} onKeyDown={escapeLeaves}>\n            {labels.cancel}\n          </Button>\n        </div>\n      </li>\n    );\n  }\n\n  return (\n    <li {...li} className=\"flex items-center gap-3 py-2\">\n      <KeyRound className=\"size-4 shrink-0 text-[var(--text-muted)]\" aria-hidden />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"truncate text-sm font-medium\">{item.name}</div>\n        <div className=\"text-xs text-[var(--text-muted)]\">{meta}</div>\n      </div>\n      {onRename && (\n        <Button\n          ref={renameButtonRef}\n          size=\"sm\"\n          variant=\"ghost\"\n          disabled={busy}\n          onClick={() => open(\"rename\")}\n          aria-label={labels.renameItem(item.name)}\n        >\n          {labels.rename}\n        </Button>\n      )}\n      {onDelete && (\n        <Button\n          ref={deleteButtonRef}\n          size=\"sm\"\n          variant=\"ghost\"\n          tone=\"danger\"\n          disabled={busy}\n          onClick={() => open(\"delete\")}\n          aria-label={labels.deleteItem(item.name)}\n        >\n          {labels.delete}\n        </Button>\n      )}\n    </li>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/passkeys-setting.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { KeyRound } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { Button, Card, EmptyState, Input } from \"./ui\";\nimport { Skeleton } from \"./skeleton\";\nimport { useAccountSettingsLabels } from \"./account-settings-labels\";\nimport { SettingsCardTitle } from \"../settings/settings-heading\";\nimport type { PasskeysSettingLabels } from \"./account-settings-labels\";\n\n/** What a passkey's `id` may be: the app's own key type, string or numeric. */\nexport type PasskeyId = string | number;\n\n/**\n * One registered passkey, as the app's API lists it.\n *\n * Generic in its `id` (0.16.0): `PasskeysSetting` infers `Id` from `passkeys`, so an\n * app whose ids are numbers gets numbers back in `onRename` / `onDelete` — keksdose\n * cast `id as number` in both. Left unparameterised it is the old `string | number`.\n */\nexport interface PasskeyItem<Id extends PasskeyId = PasskeyId> {\n  id: Id;\n  name: string;\n  /** A `Date`, an ISO string or epoch ms. */\n  createdAt?: Date | string | number | null;\n  /** Null (or left out) reads as \"Never used\". */\n  lastUsedAt?: Date | string | number | null;\n}\n\n/** `data-*` attributes, passed through to the element they are given for. */\nexport type PasskeyDataAttributes = { [key: `data-${string}`]: string | number | boolean | undefined };\n\nexport interface PasskeysSettingProps<Id extends PasskeyId = PasskeyId> extends PasskeyDataAttributes {\n  /** `undefined` while the first load is in flight (or pass `loading`). */\n  passkeys: readonly PasskeyItem<Id>[] | undefined;\n  loading?: boolean;\n  /**\n   * Run the WebAuthn ceremony and register the passkey — app-side, since the options\n   * and the attestation are the app's server's business. Called with the trimmed name\n   * field, which may be EMPTY: pick your own default (\"Passkey\", the device name).\n   * Return the promise and the field clears when it resolves; a rejection (including\n   * the user cancelling the OS prompt) keeps what was typed.\n   */\n  onAdd: (name: string) => void | Promise<unknown>;\n  /**\n   * A step the app runs BEFORE `onAdd` (0.18.0) — re-asking for the current password,\n   * a policy notice, anything that may stop the add. Called with the same trimmed name;\n   * resolve `true` to go on to `onAdd`, `false` to stop quietly (nothing is said, the\n   * typed name stays). A rejection, or a throw, stops the same way: the app reports\n   * its own errors. While it runs the add button is disabled and busy, so a second\n   * click cannot start a second check.\n   *\n   * Kurvenschmiede asked for the password in its own dialog by handing `onAdd` a\n   * promise it kept open across that dialog (passkeys-card.tsx) — which still works.\n   * This is the documented place for it: open the dialog here, resolve with whether it\n   * was confirmed, and keep what it produced (the server's registration options) for\n   * `onAdd` in a ref. The ceremony then starts from the dialog's click rather than the\n   * card's, which is the user activation `navigator.credentials.create` wants.\n   *\n   * Left out, `onAdd` is called synchronously in the click, exactly as before.\n   */\n  beforeAdd?: (name: string) => boolean | Promise<boolean>;\n  /**\n   * What a passkey does to the password, which picks the line under the title (0.18.0).\n   * `\"instead\"` (default): it replaces it — `labels.description`, kastlan's promise.\n   * `\"alongside\"`: the password stays and the passkey is a second way in —\n   * `labels.descriptionAlongside`. Kurvenschmiede overrode `description` for exactly\n   * this; an app that sets `mode` needs no override.\n   */\n  mode?: \"instead\" | \"alongside\";\n  /** The ceremony is running. The add button says so and does not start a second one. */\n  adding?: boolean;\n  /** Offer \"Rename\" on each row. Return a promise to leave edit mode only on success. */\n  onRename?: (id: Id, name: string) => void | Promise<unknown>;\n  /** Offer \"Delete\" on each row — always behind an inline confirmation. */\n  onDelete?: (id: Id) => void | Promise<unknown>;\n  /** A row whose rename or delete is in flight; its buttons are disabled. */\n  busyId?: Id | null;\n  /** Show the name field above the add button. Default true. */\n  nameField?: boolean;\n  /**\n   * Shown INSTEAD of the list and the add button — passkeys are not supported by this\n   * browser, or the page is not a secure context. Its wording is the app's: only the\n   * app knows which of those it detected.\n   */\n  unavailable?: ReactNode;\n  /** A date for the \"Added …\" / \"Last used …\" lines. Default: the locale's medium date. */\n  formatDate?: (date: Date) => string;\n  /** Overrides the provider's locale for the default date format. */\n  locale?: string;\n  /** Prop > `<UiKitProvider labels={{ accountSettings: { passkeys } }}>` > English. */\n  labels?: Partial<PasskeysSettingLabels>;\n  className?: string;\n  /** On the card (0.16.0), for an in-page link (`#passkeys`) or a test hook. `data-*`\n   *  attributes go there too. */\n  id?: string;\n  /** Extra attributes for one row's `<li>` (0.16.0) — an `id` to scroll a just-added\n   *  key into view, `data-*` for a test. Every row also carries `data-passkey-id`. */\n  rowProps?: (item: PasskeyItem<Id>) => ({ id?: string } & PasskeyDataAttributes) | undefined;\n}\n\n/**\n * The passkeys section of an account page: what is registered, when it was last used,\n * rename and delete, and \"Add passkey\" — the fourth card beside `ProfileSetting`,\n * `PasswordSetting` and `TwoFactorSetting`, and built the same way (a self-contained\n * `<Card>` owning its transient form state; the app owns the data and the API).\n *\n * Lifted from kastlan's passkeys-card. **The WebAuthn ceremony stays app-side**:\n * `navigator.credentials.create` needs options minted by the app's server and hands\n * back an attestation only that server can verify, so the kit calls `onAdd` and waits.\n *\n * **Delete confirms inline**, in the row, rather than through `useConfirm`: this card\n * must work in an app without a `ConfirmProvider`, and the question belongs next to\n * the passkey it names. Focus moves to Cancel, as in every destructive confirm in the\n * kit, so the Enter that pressed Delete cannot also answer it.\n */\nexport function PasskeysSetting<Id extends PasskeyId = PasskeyId>({\n  passkeys,\n  loading,\n  onAdd,\n  beforeAdd,\n  mode = \"instead\",\n  adding = false,\n  onRename,\n  onDelete,\n  busyId,\n  nameField = true,\n  unavailable,\n  formatDate,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  rowProps,\n  ...rest\n}: PasskeysSettingProps<Id>) {\n  const labels = useAccountSettingsLabels(\"passkeys\", labelsProp);\n  const locale = useKitLocale(localeProp);\n  const [name, setName] = useState(\"\");\n  // `beforeAdd` is running. State for the button, and a ref for the guard: two clicks\n  // in one frame both read the state from before either set it.\n  const [checking, setChecking] = useState(false);\n  const checkingRef = useRef(false);\n\n  const date = (value: PasskeyItem[\"createdAt\"]): string | null => {\n    if (value === null || value === undefined || value === \"\") return null;\n    const d = value instanceof Date ? value : new Date(value);\n    if (Number.isNaN(d.getTime())) return null;\n    return formatDate ? formatDate(d) : new Intl.DateTimeFormat(locale, { dateStyle: \"medium\" }).format(d);\n  };\n\n  const add = () => {\n    if (adding || checkingRef.current) return;\n    const typed = name;\n    const value = typed.trim();\n    const send = () =>\n      Promise.resolve(onAdd(value))\n        // Clear only what was sent: the field stays editable while the OS prompt is up.\n        .then(() => setName((current) => (current === typed ? \"\" : current)));\n    if (!beforeAdd) {\n      send().catch(() => {});\n      return;\n    }\n    const done = () => {\n      checkingRef.current = false;\n      setChecking(false);\n    };\n    checkingRef.current = true;\n    setChecking(true);\n    let gate: Promise<boolean>;\n    // Called in the click, not a microtask later, so a step that itself needs the\n    // user's activation (a popup, the clipboard) still has it; a throw is a \"no\".\n    try {\n      gate = Promise.resolve(beforeAdd(value));\n    } catch (error) {\n      gate = Promise.reject(error);\n    }\n    gate\n      .then((go) => {\n        done();\n        // Strictly `true`: an app whose step resolves `undefined` meant nothing.\n        if (go === true) return send();\n      })\n      .catch(done);\n  };\n  const busy = adding || checking;\n\n  const isLoading = loading || passkeys === undefined;\n  const items = passkeys ?? [];\n\n  const body = (() => {\n    if (unavailable != null && unavailable !== false) {\n      return <EmptyState variant=\"inline\" size=\"sm\" icon={<KeyRound />} title={unavailable} />;\n    }\n    return (\n      <>\n        {isLoading ? (\n          <Skeleton lines={2} label={labels.loading} />\n        ) : items.length === 0 ? (\n          <EmptyState variant=\"inline\" size=\"sm\" icon={<KeyRound />} title={labels.empty} />\n        ) : (\n          <ul aria-label={labels.list} className=\"divide-y divide-[var(--border)]\">\n            {items.map((item) => (\n              <PasskeyRow\n                key={item.id}\n                item={item}\n                created={date(item.createdAt)}\n                lastUsed={date(item.lastUsedAt)}\n                attributes={rowProps?.(item)}\n                busy={busyId !== undefined && busyId !== null && busyId === item.id}\n                onRename={onRename}\n                onDelete={onDelete}\n                labels={labels}\n              />\n            ))}\n          </ul>\n        )}\n        <div className=\"space-y-2 pt-1\">\n          {nameField && (\n            <Input\n              label={labels.nameLabel}\n              placeholder={labels.namePlaceholder}\n              value={name}\n              maxLength={120}\n              onChange={(e) => setName(e.target.value)}\n              onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"Enter\") {\n                  e.preventDefault();\n                  add();\n                }\n              }}\n            />\n          )}\n          <Button onClick={add} disabled={busy} aria-busy={busy || undefined}>\n            <KeyRound className=\"size-4\" aria-hidden />\n            {adding ? labels.adding : labels.add}\n          </Button>\n        </div>\n      </>\n    );\n  })();\n\n  return (\n    // `rest` is only `id` and `data-*`: everything else the props name is destructured.\n    <Card {...rest} className={cn(\"p-4 space-y-3\", className)}>\n      <div>\n        <SettingsCardTitle>{labels.title}</SettingsCardTitle>\n        <div className=\"text-xs text-[var(--text-muted)]\">\n          {mode === \"alongside\"\n            ? labels.descriptionAlongside\n            : labels.description}\n        </div>\n      </div>\n      {body}\n    </Card>\n  );\n}\n\ntype RowMode = \"view\" | \"rename\" | \"delete\";\n\nfunction PasskeyRow<Id extends PasskeyId>({\n  item,\n  created,\n  lastUsed,\n  attributes,\n  busy,\n  onRename,\n  onDelete,\n  labels,\n}: {\n  item: PasskeyItem<Id>;\n  created: string | null;\n  lastUsed: string | null;\n  attributes?: { id?: string } & PasskeyDataAttributes;\n  busy: boolean;\n  onRename?: PasskeysSettingProps<Id>[\"onRename\"];\n  onDelete?: PasskeysSettingProps<Id>[\"onDelete\"];\n  labels: PasskeysSettingLabels;\n}) {\n  const [mode, setMode] = useState<RowMode>(\"view\");\n  const [draft, setDraft] = useState(item.name);\n  // Which button opened the sub-mode, so leaving it puts focus back there — the\n  // confirm or the field unmounts under the focus, which otherwise falls to <body>.\n  const [returnTo, setReturnTo] = useState<\"rename\" | \"delete\" | null>(null);\n  const cancelDeleteRef = useRef<HTMLButtonElement>(null);\n  const renameRef = useRef<HTMLInputElement>(null);\n  const renameButtonRef = useRef<HTMLButtonElement>(null);\n  const deleteButtonRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (mode === \"delete\") cancelDeleteRef.current?.focus();\n    else if (mode === \"rename\") renameRef.current?.select();\n    else if (returnTo) (returnTo === \"rename\" ? renameButtonRef : deleteButtonRef).current?.focus();\n  }, [mode, returnTo]);\n\n  const open = (next: \"rename\" | \"delete\") => {\n    setReturnTo(next);\n    setDraft(item.name);\n    setMode(next);\n  };\n  const leave = () => setMode(\"view\");\n  const escapeLeaves = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      e.stopPropagation();\n      leave();\n    }\n  };\n\n  const saveRename = () => {\n    const next = draft.trim();\n    if (!onRename || !next || busy) return;\n    if (next === item.name) {\n      leave();\n      return;\n    }\n    Promise.resolve(onRename(item.id, next))\n      .then(leave)\n      .catch(() => {});\n  };\n\n  const confirmDelete = () => {\n    if (!onDelete || busy) return;\n    // The row unmounts once the list refreshes; on a failure it stays, confirm open.\n    Promise.resolve(onDelete(item.id))\n      .then(() => setMode(\"view\"))\n      .catch(() => {});\n  };\n\n  // On every mode's <li>, so an id the app scrolls to survives a rename or a confirm.\n  const li = { ...attributes, \"data-passkey-id\": String(item.id) };\n\n  const meta = [created && labels.created(created), lastUsed ? labels.lastUsed(lastUsed) : labels.neverUsed]\n    .filter(Boolean)\n    .join(\" · \");\n\n  if (mode === \"rename\") {\n    return (\n      <li {...li} className=\"flex flex-wrap items-center gap-2 py-2\">\n        <Input\n          ref={renameRef}\n          aria-label={labels.renameField(item.name)}\n          className=\"min-w-0 flex-1\"\n          value={draft}\n          maxLength={120}\n          onChange={(e) => setDraft(e.target.value)}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n              saveRename();\n            } else if (e.key === \"Escape\") {\n              e.preventDefault();\n              e.stopPropagation();\n              leave();\n            }\n          }}\n        />\n        <Button size=\"sm\" onClick={saveRename} disabled={busy || !draft.trim()}>\n          {labels.save}\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" onClick={leave}>\n          {labels.cancel}\n        </Button>\n      </li>\n    );\n  }\n\n  if (mode === \"delete\") {\n    return (\n      <li {...li} className=\"space-y-2 py-2\">\n        <p role=\"alert\" className=\"text-sm\">\n          {labels.deleteConfirm(item.name)}\n        </p>\n        <div className=\"flex flex-wrap gap-2\">\n          <Button size=\"sm\" variant=\"danger\" onClick={confirmDelete} onKeyDown={escapeLeaves} disabled={busy}>\n            {labels.confirmDelete}\n          </Button>\n          <Button ref={cancelDeleteRef} size=\"sm\" variant=\"ghost\" onClick={leave} onKeyDown={escapeLeaves}>\n            {labels.cancel}\n          </Button>\n        </div>\n      </li>\n    );\n  }\n\n  return (\n    <li {...li} className=\"flex items-center gap-3 py-2\">\n      <KeyRound className=\"size-4 shrink-0 text-[var(--text-muted)]\" aria-hidden />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"truncate text-sm font-medium\">{item.name}</div>\n        <div className=\"text-xs text-[var(--text-muted)]\">{meta}</div>\n      </div>\n      {onRename && (\n        <Button\n          ref={renameButtonRef}\n          size=\"sm\"\n          variant=\"ghost\"\n          disabled={busy}\n          onClick={() => open(\"rename\")}\n          aria-label={labels.renameItem(item.name)}\n        >\n          {labels.rename}\n        </Button>\n      )}\n      {onDelete && (\n        <Button\n          ref={deleteButtonRef}\n          size=\"sm\"\n          variant=\"ghost\"\n          tone=\"danger\"\n          disabled={busy}\n          onClick={() => open(\"delete\")}\n          aria-label={labels.deleteItem(item.name)}\n        >\n          {labels.delete}\n        </Button>\n      )}\n    </li>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/phone-input.d.ts

@@ -1,6 +1,9 @@
 import 'react';
 import '../lib/phone.js';
-export { cp as DEFAULT_PHONE_INPUT_LABELS, dO as PhoneInput, dP as PhoneInputLabels, dQ as PhoneInputProps } from '../register-form-V1OeNlMr.js';
+export { cz as DEFAULT_PHONE_INPUT_LABELS, ee as PhoneInput, ef as PhoneInputLabels, eg as PhoneInputProps } from '../delete-account-setting-DCFS5Vof.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../data-table-labels-DUELeXpa.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
@@ -10,10 +13,6 @@ import './popover.js';
 import './chip.js';
 import 'lucide-react';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './field-parts.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -56,6 +55,14 @@ import './image-grid.js';
 import './lightbox.js';
 import './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';
@@ -64,8 +71,15 @@ import '../auth/verify-email.js';
 import '../auth/not-found-page.js';
 import '../auth/accept-invitation.js';
 import '../shell/company-switcher.js';
-import './account-chips.js';
+import '../account/email-change-setting.js';
+import '../account/sessions-setting.js';
 import '../lib/format.js';
+import '../account/data-export-setting.js';
+import './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 './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -78,9 +92,4 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.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 './field-parts.js';

package/dist/components/series-chart.d.ts

@@ -5,8 +5,11 @@ import { LegendEntry } from './toggle-legend.js';
 import { SeriesChartLabels } from './series-chart-labels.js';
 import { TimeTickUnit } from './series-chart-ticks.js';
 import { SeriesChartAxisBudget } from './series-chart-budget.js';
-import { bU as ChartTooltipPlacement } from '../register-form-V1OeNlMr.js';
+import { b$ as ChartTooltipPlacement } from '../delete-account-setting-DCFS5Vof.js';
 import 'recharts';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../data-table-labels-DUELeXpa.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
@@ -16,10 +19,6 @@ import './popover.js';
 import './chip.js';
 import 'lucide-react';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './field-parts.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -61,6 +60,14 @@ import './image-grid.js';
 import './lightbox.js';
 import './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';
@@ -69,8 +76,15 @@ import '../auth/verify-email.js';
 import '../auth/not-found-page.js';
 import '../auth/accept-invitation.js';
 import '../shell/company-switcher.js';
-import './account-chips.js';
+import '../account/email-change-setting.js';
+import '../account/sessions-setting.js';
 import '../lib/format.js';
+import '../account/data-export-setting.js';
+import './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 './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -84,12 +98,7 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.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 './field-parts.js';
 
 interface SeriesChartSeries {
     /** The row key this line reads — and the `--color-<key>` it is painted with, so it

package/dist/components/settings-fields.d.ts

@@ -1,7 +1,11 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { dY as SelectProps } from '../register-form-V1OeNlMr.js';
+import { eD as SelectProps } from '../delete-account-setting-DCFS5Vof.js';
+import { ToggleGroupBaseProps } from './toggle-group.js';
 import { ThemePreference } from '../theme/theme-store.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../data-table-labels-DUELeXpa.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
@@ -11,10 +15,6 @@ import './popover.js';
 import './chip.js';
 import 'lucide-react';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './field-parts.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -57,6 +57,13 @@ import './image-grid.js';
 import './lightbox.js';
 import './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 'zustand/middleware';
+import 'zustand';
 import '../auth/complete-name-dialog.js';
 import '../auth/forgot-password-form.js';
 import '../auth/status-parts.js';
@@ -65,8 +72,15 @@ import '../auth/verify-email.js';
 import '../auth/not-found-page.js';
 import '../auth/accept-invitation.js';
 import '../shell/company-switcher.js';
-import './account-chips.js';
+import '../account/email-change-setting.js';
+import '../account/sessions-setting.js';
 import '../lib/format.js';
+import '../account/data-export-setting.js';
+import './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 './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -80,11 +94,7 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import 'zustand/middleware';
-import 'zustand';
+import './field-parts.js';
 
 /**
  * App-agnostic settings-field components (feedback #333): the language + theme
@@ -101,6 +111,8 @@ import 'zustand';
  * this a settings FIELD rather than a fixed widget.
  */
 interface ThemeSettingProps extends Omit<SelectProps, "value" | "onChange" | "children"> {
+    /** The `Select` (default). See {@link ThemeSettingToggleProps} for `"toggle"`. */
+    variant?: "select";
     value: ThemePreference;
     onChange: (value: ThemePreference) => void;
     label: ReactNode;
@@ -112,7 +124,37 @@ interface ThemeSettingProps extends Omit<SelectProps, "value" | "onChange" | "ch
     };
     id?: string;
 }
-declare function ThemeSetting({ value, onChange, label, optionLabels, id, ...rest }: ThemeSettingProps): react.JSX.Element;
+/**
+ * `variant="toggle"` (0.31.0, docs/settings-harmonization.md §2.8): the three choices as
+ * one segmented control instead of a select — system, light and dark side by side, the
+ * choice visible without opening anything, in every app (keksdose offered light and dark
+ * only; its store already knew "system"). A {@link ToggleGroup}'s props pass through —
+ * `labelPlacement`, `disabledReason`, `commit`, `size` — minus the options and the value,
+ * which this owns.
+ *
+ * Bind it to the PREFERENCE (`"system"` included), never to the resolved mode: on a
+ * system-dark device a control bound to the mode shows "dark" and cannot say "follow the
+ * system" (keksdose's control, §8).
+ */
+interface ThemeSettingToggleProps extends Omit<ToggleGroupBaseProps<ThemePreference>, "options" | "label" | "ariaLabel"> {
+    variant: "toggle";
+    value: ThemePreference;
+    onChange: (value: ThemePreference) => void;
+    /**
+     * Names the group: the field's label, or the label above it (`labelPlacement`). Leave
+     * it out inside a card already titled "Theme" and name the group with `aria-label` or
+     * `aria-labelledby` instead, so the card does not say "Theme" twice.
+     */
+    label?: ReactNode;
+    /** Translated option labels. */
+    optionLabels: {
+        system: string;
+        light: string;
+        dark: string;
+    };
+    id?: string;
+}
+declare function ThemeSetting(props: ThemeSettingProps | ThemeSettingToggleProps): react.JSX.Element;
 /** See {@link ThemeSettingProps}: a `Select`'s props with the value and the change
  *  handler re-typed to the language CODE the caller stores. */
 interface LanguageSettingProps extends Omit<SelectProps, "value" | "onChange" | "children"> {
@@ -127,4 +169,4 @@ interface LanguageSettingProps extends Omit<SelectProps, "value" | "onChange" |
 }
 declare function LanguageSetting({ value, onChange, label, options, id, ...rest }: LanguageSettingProps): react.JSX.Element;
 
-export { LanguageSetting, type LanguageSettingProps, ThemeSetting, type ThemeSettingProps };
+export { LanguageSetting, type LanguageSettingProps, ThemeSetting, type ThemeSettingProps, type ThemeSettingToggleProps };

package/dist/components/settings-fields.js

@@ -1,7 +1,26 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "./ui.js";
-function ThemeSetting({ value, onChange, label, optionLabels, id, ...rest }) {
+import { ToggleGroup } from "./toggle-group.js";
+function ThemeSetting(props) {
+  if (props.variant === "toggle") {
+    const { variant: _variant2, value: value2, onChange: onChange2, label: label2, optionLabels: optionLabels2, ...rest2 } = props;
+    return /* @__PURE__ */ jsx(
+      ToggleGroup,
+      {
+        ...rest2,
+        label: label2,
+        value: value2,
+        onChange: onChange2,
+        options: [
+          { value: "system", label: optionLabels2.system },
+          { value: "light", label: optionLabels2.light },
+          { value: "dark", label: optionLabels2.dark }
+        ]
+      }
+    );
+  }
+  const { variant: _variant, value, onChange, label, optionLabels, id, ...rest } = props;
   return /* @__PURE__ */ jsxs(
     Select,
     {

package/dist/components/settings-fields.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/settings-fields.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Select } from \"./ui\";\nimport type { SelectProps } from \"./ui\";\nimport type { ThemePreference } from \"../theme/theme-store\";\n\n/**\n * App-agnostic settings-field components (feedback #333): the language + theme\n * controls that every app's settings page needs, so they live in @hb/ui and the\n * app just supplies the current value, a change handler and translated labels.\n * The app owns WHERE these render (its own settings page) and any app-specific\n * fields around them.\n */\n\n/**\n * Everything a {@link Select} takes, minus the two this component owns: the value is a\n * {@link ThemePreference} rather than a string, and `onChange` hands over the preference\n * itself because no caller of this wants the event. The rest — `disabled`, `required`,\n * `invalid`, `error`, a `data-tour` anchor — passes straight through, which is what makes\n * this a settings FIELD rather than a fixed widget.\n */\nexport interface ThemeSettingProps\n  extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\"> {\n  value: ThemePreference;\n  onChange: (value: ThemePreference) => void;\n  label: ReactNode;\n  /** Translated option labels. */\n  optionLabels: { system: string; light: string; dark: string };\n  id?: string;\n}\n\nexport function ThemeSetting({ value, onChange, label, optionLabels, id, ...rest }: ThemeSettingProps) {\n  return (\n    <Select\n      {...rest}\n      id={id}\n      label={label}\n      value={value}\n      onChange={(e) => onChange(e.target.value as ThemePreference)}\n    >\n      <option value=\"system\">{optionLabels.system}</option>\n      <option value=\"light\">{optionLabels.light}</option>\n      <option value=\"dark\">{optionLabels.dark}</option>\n    </Select>\n  );\n}\n\n/** See {@link ThemeSettingProps}: a `Select`'s props with the value and the change\n *  handler re-typed to the language CODE the caller stores. */\nexport interface LanguageSettingProps\n  extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\"> {\n  value: string;\n  onChange: (code: string) => void;\n  label: ReactNode;\n  options: { code: string; label: string }[];\n  id?: string;\n}\n\nexport function LanguageSetting({ value, onChange, label, options, id, ...rest }: LanguageSettingProps) {\n  return (\n    <Select {...rest} id={id} label={label} value={value} onChange={(e) => onChange(e.target.value)}>\n      {options.map((o) => (\n        <option key={o.code} value={o.code}>\n          {o.label}\n        </option>\n      ))}\n    </Select>\n  );\n}\n"],"mappings":";AAgCI,SAOE,KAPF;AA/BJ,SAAS,cAAc;AA6BhB,SAAS,aAAa,EAAE,OAAO,UAAU,OAAO,cAAc,IAAI,GAAG,KAAK,GAAsB;AACrG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAwB;AAAA,MAE3D;AAAA,4BAAC,YAAO,OAAM,UAAU,uBAAa,QAAO;AAAA,QAC5C,oBAAC,YAAO,OAAM,SAAS,uBAAa,OAAM;AAAA,QAC1C,oBAAC,YAAO,OAAM,QAAQ,uBAAa,MAAK;AAAA;AAAA;AAAA,EAC1C;AAEJ;AAaO,SAAS,gBAAgB,EAAE,OAAO,UAAU,OAAO,SAAS,IAAI,GAAG,KAAK,GAAyB;AACtG,SACE,oBAAC,UAAQ,GAAG,MAAM,IAAQ,OAAc,OAAc,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK,GAC3F,kBAAQ,IAAI,CAAC,MACZ,oBAAC,YAAoB,OAAO,EAAE,MAC3B,YAAE,SADQ,EAAE,IAEf,CACD,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/settings-fields.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Select } from \"./ui\";\nimport type { SelectProps } from \"./ui\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport type { ToggleGroupBaseProps } from \"./toggle-group\";\nimport type { ThemePreference } from \"../theme/theme-store\";\n\n/**\n * App-agnostic settings-field components (feedback #333): the language + theme\n * controls that every app's settings page needs, so they live in @hb/ui and the\n * app just supplies the current value, a change handler and translated labels.\n * The app owns WHERE these render (its own settings page) and any app-specific\n * fields around them.\n */\n\n/**\n * Everything a {@link Select} takes, minus the two this component owns: the value is a\n * {@link ThemePreference} rather than a string, and `onChange` hands over the preference\n * itself because no caller of this wants the event. The rest — `disabled`, `required`,\n * `invalid`, `error`, a `data-tour` anchor — passes straight through, which is what makes\n * this a settings FIELD rather than a fixed widget.\n */\nexport interface ThemeSettingProps\n  extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\"> {\n  /** The `Select` (default). See {@link ThemeSettingToggleProps} for `\"toggle\"`. */\n  variant?: \"select\";\n  value: ThemePreference;\n  onChange: (value: ThemePreference) => void;\n  label: ReactNode;\n  /** Translated option labels. */\n  optionLabels: { system: string; light: string; dark: string };\n  id?: string;\n}\n\n/**\n * `variant=\"toggle\"` (0.31.0, docs/settings-harmonization.md §2.8): the three choices as\n * one segmented control instead of a select — system, light and dark side by side, the\n * choice visible without opening anything, in every app (keksdose offered light and dark\n * only; its store already knew \"system\"). A {@link ToggleGroup}'s props pass through —\n * `labelPlacement`, `disabledReason`, `commit`, `size` — minus the options and the value,\n * which this owns.\n *\n * Bind it to the PREFERENCE (`\"system\"` included), never to the resolved mode: on a\n * system-dark device a control bound to the mode shows \"dark\" and cannot say \"follow the\n * system\" (keksdose's control, §8).\n */\nexport interface ThemeSettingToggleProps\n  extends Omit<ToggleGroupBaseProps<ThemePreference>, \"options\" | \"label\" | \"ariaLabel\"> {\n  variant: \"toggle\";\n  value: ThemePreference;\n  onChange: (value: ThemePreference) => void;\n  /**\n   * Names the group: the field's label, or the label above it (`labelPlacement`). Leave\n   * it out inside a card already titled \"Theme\" and name the group with `aria-label` or\n   * `aria-labelledby` instead, so the card does not say \"Theme\" twice.\n   */\n  label?: ReactNode;\n  /** Translated option labels. */\n  optionLabels: { system: string; light: string; dark: string };\n  id?: string;\n}\n\nexport function ThemeSetting(props: ThemeSettingProps | ThemeSettingToggleProps) {\n  if (props.variant === \"toggle\") {\n    const { variant: _variant, value, onChange, label, optionLabels, ...rest } = props;\n    return (\n      <ToggleGroup<ThemePreference>\n        {...rest}\n        label={label}\n        value={value}\n        onChange={onChange}\n        options={[\n          { value: \"system\", label: optionLabels.system },\n          { value: \"light\", label: optionLabels.light },\n          { value: \"dark\", label: optionLabels.dark },\n        ]}\n      />\n    );\n  }\n  const { variant: _variant, value, onChange, label, optionLabels, id, ...rest } = props;\n  return (\n    <Select\n      {...rest}\n      id={id}\n      label={label}\n      value={value}\n      onChange={(e) => onChange(e.target.value as ThemePreference)}\n    >\n      <option value=\"system\">{optionLabels.system}</option>\n      <option value=\"light\">{optionLabels.light}</option>\n      <option value=\"dark\">{optionLabels.dark}</option>\n    </Select>\n  );\n}\n\n/** See {@link ThemeSettingProps}: a `Select`'s props with the value and the change\n *  handler re-typed to the language CODE the caller stores. */\nexport interface LanguageSettingProps\n  extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\"> {\n  value: string;\n  onChange: (code: string) => void;\n  label: ReactNode;\n  options: { code: string; label: string }[];\n  id?: string;\n}\n\nexport function LanguageSetting({ value, onChange, label, options, id, ...rest }: LanguageSettingProps) {\n  return (\n    <Select {...rest} id={id} label={label} value={value} onChange={(e) => onChange(e.target.value)}>\n      {options.map((o) => (\n        <option key={o.code} value={o.code}>\n          {o.label}\n        </option>\n      ))}\n    </Select>\n  );\n}\n"],"mappings":";AAkEM,cAeF,YAfE;AAjEN,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AA2DrB,SAAS,aAAa,OAAoD;AAC/E,MAAI,MAAM,YAAY,UAAU;AAC9B,UAAM,EAAE,SAASA,WAAU,OAAAC,QAAO,UAAAC,WAAU,OAAAC,QAAO,cAAAC,eAAc,GAAGC,MAAK,IAAI;AAC7E,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAGA;AAAA,QACJ,OAAOF;AAAA,QACP,OAAOF;AAAA,QACP,UAAUC;AAAA,QACV,SAAS;AAAA,UACP,EAAE,OAAO,UAAU,OAAOE,cAAa,OAAO;AAAA,UAC9C,EAAE,OAAO,SAAS,OAAOA,cAAa,MAAM;AAAA,UAC5C,EAAE,OAAO,QAAQ,OAAOA,cAAa,KAAK;AAAA,QAC5C;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,QAAM,EAAE,SAAS,UAAU,OAAO,UAAU,OAAO,cAAc,IAAI,GAAG,KAAK,IAAI;AACjF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAwB;AAAA,MAE3D;AAAA,4BAAC,YAAO,OAAM,UAAU,uBAAa,QAAO;AAAA,QAC5C,oBAAC,YAAO,OAAM,SAAS,uBAAa,OAAM;AAAA,QAC1C,oBAAC,YAAO,OAAM,QAAQ,uBAAa,MAAK;AAAA;AAAA;AAAA,EAC1C;AAEJ;AAaO,SAAS,gBAAgB,EAAE,OAAO,UAAU,OAAO,SAAS,IAAI,GAAG,KAAK,GAAyB;AACtG,SACE,oBAAC,UAAQ,GAAG,MAAM,IAAQ,OAAc,OAAc,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK,GAC3F,kBAAQ,IAAI,CAAC,MACZ,oBAAC,YAAoB,OAAO,EAAE,MAC3B,YAAE,SADQ,EAAE,IAEf,CACD,GACH;AAEJ;","names":["_variant","value","onChange","label","optionLabels","rest"]}

package/dist/components/share-card.d.ts

@@ -1,7 +1,7 @@
 import 'react';
 import './account-chips.js';
 import './dialog-frame.js';
-export { cs as DEFAULT_SHARE_CARD_LABELS, dZ as ShareAddRequest, d_ as ShareCandidate, d$ as ShareCard, e0 as ShareCardLabels, e1 as ShareCardProps, e2 as ShareDialog, e3 as ShareDialogProps, e4 as ShareGrantee, e5 as SharePanel, e6 as SharePanelProps, e7 as SharePendingGrant, e8 as ShareRole } from '../register-form-V1OeNlMr.js';
+export { cE as DEFAULT_SHARE_CARD_LABELS, eE as ShareAddRequest, eF as ShareCandidate, eG as ShareCard, eH as ShareCardLabels, eI as ShareCardProps, eJ as ShareDialog, eK as ShareDialogProps, eL as ShareGrantee, eM as SharePanel, eN as SharePanelProps, eO as SharePendingGrant, eP as ShareRole } from '../delete-account-setting-DCFS5Vof.js';
 import 'lucide-react';
 import '../lib/format.js';
 import './chip.js';
@@ -10,14 +10,13 @@ import './data-table-sort.js';
 import './swipeable-row.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './field-parts.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -57,6 +56,14 @@ import './image-grid.js';
 import './lightbox.js';
 import './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';
@@ -65,6 +72,13 @@ 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 '../account/data-export-setting.js';
+import '../admin/admin-parts.js';
+import '../admin/admin-action-log.js';
+import '../settings/settings-labels.js';
+import '../demo/demo-labels.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -78,9 +92,4 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.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 './field-parts.js';