@eifi1/ui-kit 0.17.0 → 0.18.0

package/README.md

@@ -382,14 +382,14 @@ columns, strings and permissions (see the note at the top of `src/feedback/feedb
 
 <!-- BEGIN GENERATED: exports — node scripts/gen-export-inventory.mjs -->
 
-**1044 names from 161 modules** — 483 values and 561 types. _Italic_ is a type-only export.
+**1101 names from 167 modules** — 508 values and 593 types. _Italic_ is a type-only export.
 
 Generated from `dist/index.d.ts` by `node scripts/gen-export-inventory.mjs`; the count
 is pinned by `src/__tests__/public-surface.test.ts`. Do not edit between the markers.
 
 | Entry point | Names |
 |---|---|
-| `@eifi1/ui-kit` | 1044 |
+| `@eifi1/ui-kit` | 1101 |
 | `@eifi1/ui-kit/chart` | 104 |
 | `@eifi1/ui-kit/shell` | 24 |
 | `@eifi1/ui-kit/data-table` | 49 |
@@ -414,6 +414,7 @@ re-slicing of it, never a second API.
 | `lib/format` | `currencyMinorDigits`, `EMPTY_FORMATTED_VALUE`, `formatDate`, `formatMoney`, `formatNumber`, `formatPercent`, `formatRelativeTime`, `roundToCurrency`, `toDate`, `useKitFormat`, _`DateInput`_, _`FormatDateOptions`_, _`FormatDateStyle`_, _`FormatDigits`_, _`FormatMoneyOptions`_, _`FormatNumberBaseOptions`_, _`FormatNumberOptions`_, _`FormatPercentOptions`_, _`FormatRelativeTimeOptions`_, _`KitFormat`_, _`RoundToCurrencyOptions`_ |
 | `lib/safe-storage` | `readStored`, `writeStored` |
 | `lib/qr-encode` | `encodeQr`, _`QrEncodeOptions`_, _`QrErrorCorrection`_, _`QrMatrix`_ |
+| `lib/server-wake` | `attachServerWake`, `createServerWake`, `serverWake`, `watchReadsAnd`, `wrapFetch`, _`AxiosLikeInstance`_, _`ServerWakeAxiosConfig`_, _`ServerWakeFilter`_, _`ServerWakeOptions`_, _`ServerWakeRequest`_, _`ServerWakeStage`_, _`ServerWakeWatcher`_ |
 | `lib/clipping` | `CLIPS_ATTRIBUTE` |
 
 ### hooks
@@ -464,6 +465,7 @@ re-slicing of it, never a second API.
 | `components/copy-button` | `CopyButton`, `DEFAULT_COPY_BUTTON_LABELS`, _`CopyButtonLabels`_, _`CopyButtonProps`_ |
 | `components/file-button` | `DEFAULT_FILE_PICKER_LABELS`, `FileButton`, `matchesAccept`, `useFilePicker`, _`FileButtonProps`_, _`FilePickerLabels`_, _`FileRejection`_, _`FileRejectionReason`_, _`FileScreenOptions`_, _`UseFilePickerOptions`_, _`UseFilePickerReturn`_ |
 | `components/form-actions` | `DEFAULT_FORM_ACTIONS_LABELS`, `FormActions`, _`FormActionsAlign`_, _`FormActionsDestructive`_, _`FormActionsLabels`_, _`FormActionsPlacement`_, _`FormActionsProps`_, _`FormActionsStickyWithin`_, _`FormActionsSubmitProps`_, _`ResponsiveFormActionsPlacement`_ |
+| `components/share-card` | `DEFAULT_SHARE_CARD_LABELS`, `ShareCard`, `ShareDialog`, `SharePanel`, _`ShareAddRequest`_, _`ShareCandidate`_, _`ShareCardLabels`_, _`ShareCardProps`_, _`ShareDialogProps`_, _`ShareGrantee`_, _`SharePanelProps`_, _`SharePendingGrant`_, _`ShareRole`_ |
 | `components/field` | `Field`, _`FieldControlProps`_, _`FieldLabelVisibility`_, _`FieldProps`_, _`FieldRenderMeta`_ |
 | `components/search-field` | `SearchField`, _`SearchFieldProps`_ |
 | `components/dropdown` | `DropdownPanel`, `DropdownSearchHeader`, `useDropdown`, `useDropdownSearch`, _`DropdownPanelProps`_, _`DropdownSearchHeaderProps`_ |
@@ -497,7 +499,8 @@ re-slicing of it, never a second API.
 | `components/page-contents` | `DEFAULT_PAGE_CONTENTS_LABELS`, `PageContents`, `PageContentsLayout`, `useScrollSpy`, _`PageContentsItem`_, _`PageContentsLabels`_, _`PageContentsLayoutProps`_, _`PageContentsProps`_, _`UseScrollSpyOptions`_ |
 | `components/disclosure` | `Collapse`, `Disclosure`, _`CollapseProps`_, _`DisclosureProps`_, _`DisclosureTriggerProps`_ |
 | `components/dialog-frame` | `DEFAULT_DIALOG_FRAME_LABELS`, `DialogFrame`, _`DialogFrameLabels`_, _`DialogFrameProps`_ |
-| `components/danger-confirm` | `DangerConfirm`, `DEFAULT_DANGER_CONFIRM_LABELS`, _`DangerConfirmLabels`_, _`DangerConfirmProps`_ |
+| `components/danger-confirm` | `DangerConfirm`, `DEFAULT_DANGER_CONFIRM_LABELS`, `typedMatches`, _`DangerConfirmLabels`_, _`DangerConfirmProps`_, _`TypedMatch`_ |
+| `components/reauth-dialog` | `DEFAULT_REAUTH_DIALOG_LABELS`, `ReauthDialog`, _`ReauthDialogLabels`_, _`ReauthDialogProps`_ |
 | `components/confirm-dialog` | `ConfirmProvider`, `DEFAULT_CONFIRM_DIALOG_LABELS`, `useConfirm`, _`ConfirmDialogLabels`_, _`ConfirmFn`_, _`ConfirmOptions`_, _`ConfirmProviderProps`_, _`ConfirmTone`_ |
 | `components/floating-panel` | `DEFAULT_FLOATING_PANEL_LABELS`, `FloatingAction`, `FloatingActionButton`, `FloatingActionGroup`, `FloatingPanel`, _`FloatingActionButtonProps`_, _`FloatingActionGroupProps`_, _`FloatingActionLinkProps`_, _`FloatingActionProps`_, _`FloatingCorner`_, _`FloatingPanelLabels`_, _`FloatingPanelProps`_ |
 | `components/bulk-action-bar` | `BulkActionBar`, `DEFAULT_BULK_ACTION_BAR_LABELS`, _`BulkActionBarLabels`_, _`BulkActionBarProps`_, _`BulkActionBarVariant`_, _`ResponsiveBulkActionBarVariant`_ |
@@ -520,7 +523,7 @@ re-slicing of it, never a second API.
 | `components/alert-banner` | `AlertBanner`, `alertFrameClass`, `toneFrameClass`, _`AlertBannerProps`_, _`AlertSize`_, _`AlertTone`_ |
 | `components/toggle-group` | `ToggleGroup`, _`ToggleGroupBaseProps`_, _`ToggleGroupClearableProps`_, _`ToggleGroupProps`_, _`ToggleGroupRequiredProps`_, _`ToggleOption`_ |
 | `components/nav-pills` | `NavPills`, _`NavPillItem`_, _`NavPillLinkProps`_, _`NavPillsCurrent`_, _`NavPillsProps`_ |
-| `components/chip` | `Chip`, `ChipInput`, `DEFAULT_CHIP_INPUT_LABELS`, `resolveChipInputLabels`, _`ChipHue`_, _`ChipInputLabels`_, _`ChipInputProps`_, _`ChipLinkProps`_, _`ChipProps`_, _`ChipShape`_, _`ChipSize`_, _`ChipTone`_, _`ChipVariant`_ |
+| `components/chip` | `Chip`, `ChipInput`, `DEFAULT_CHIP_INPUT_LABELS`, `refreshChipEdges`, `resolveChipInputLabels`, _`ChipHue`_, _`ChipInputLabels`_, _`ChipInputProps`_, _`ChipLinkProps`_, _`ChipProps`_, _`ChipShape`_, _`ChipSize`_, _`ChipTone`_, _`ChipVariant`_ |
 | `components/wizard-stepper` | `WizardStepper` |
 | `components/hover-menu` | `HoverMenu`, _`HoverMenuProps`_ |
 | `components/modal` | `Modal`, `ModalCloseContext`, `useBackdropClose`, _`ModalProps`_ |
@@ -533,6 +536,9 @@ re-slicing of it, never a second API.
 | `components/tree-view` | `TreeRow`, `TreeView`, _`TreeItemState`_, _`TreeNode`_, _`TreeRowProps`_, _`TreeViewProps`_ |
 | `components/chart` | `ChartContainer`, `ChartLegend`, `ChartLegendContent`, `ChartTooltip`, `ChartTooltipContent`, `useChart`, _`ChartConfig`_, _`ChartSeriesConfig`_ |
 | `components/description-list` | `DEFAULT_DESCRIPTION_LIST_LABELS`, `DescriptionItem`, `DescriptionList`, _`DescriptionItemProps`_, _`DescriptionListColumns`_, _`DescriptionListDensity`_, _`DescriptionListLabels`_, _`DescriptionListLayout`_, _`DescriptionListProps`_ |
+| `components/write-lock` | `DEFAULT_WRITE_LOCK_LABELS`, `useWriteLock`, `WriteLockProvider`, _`WriteLock`_, _`WriteLockLabels`_, _`WriteLockProviderProps`_ |
+| `components/account-chips` | `ACCOUNT_STATE_TONES`, `AccountStateChip`, `dateColumn`, `DateMark`, `DEFAULT_ACCOUNT_STATE_LABELS`, `RoleChip`, _`AccountState`_, _`AccountStateChipProps`_, _`AccountStateLabels`_, _`DateColumnOptions`_, _`DateMarkProps`_, _`RoleChipProps`_, _`RoleDefinition`_, _`RoleVocabulary`_ |
+| `components/server-wake` | `DEFAULT_SERVER_WAKE_LABELS`, `ServerWakeNotice`, `useServerWakeStage`, _`ServerWakeLabels`_, _`ServerWakeNoticeProps`_ |
 | `components/line-items` | `DEFAULT_LINE_ITEMS_LABELS`, `LineItems`, _`LineItemCellContext`_, _`LineItemsColumn`_, _`LineItemsFieldLabels`_, _`LineItemsLabels`_, _`LineItemsProps`_, _`LineItemsRemoveAlign`_, _`LineItemsRemovePlacement`_, _`LineItemsSummary`_, _`LineItemsSummaryTone`_ |
 | `components/progress-bar` | `DEFAULT_PROGRESS_BAR_LABELS`, `ProgressBar`, _`ProgressBarLabels`_, _`ProgressBarProps`_, _`ProgressBarSegment`_, _`ProgressBarSize`_, _`ProgressBarTone`_ |
 | `components/skeleton` | `Skeleton`, _`SkeletonProps`_, _`SkeletonShape`_ |
@@ -724,6 +730,25 @@ pageChanged: (page: number, totalPages: number) => string;
 fieldValue: (field: string, value: string) => string;
 ```
 
+### Shipped catalogues
+
+The kit's own words come translated, one standalone subpath per language, so an app
+bundles only the language it imports: `@eifi1/ui-kit/i18n/<code>` exports
+`UI_KIT_LABELS_<CODE>` and a factory `uiKitLabels<Code>(numberLocale)` that keeps the words
+and changes only how counts and file sizes are written. Codes: `de-CH`, `fr`, `it`, `es`,
+`hu`, `zh`, and `en` (factory only — the constant is `DEFAULT_UI_KIT_LABELS`).
+
+There is ONE German: `de-CH`, Swiss Standard German, formal ("Sie"), with "ss" for every
+"ß" — `uiKitLabelsDeCh("de-DE")` keeps that text and writes German digits. An app that
+addresses its users with "du" overrides the few sentences that address the reader in its
+own provider; the kit does not ship a second register.
+
+```tsx
+import { UI_KIT_LABELS_DE_CH } from "@eifi1/ui-kit/i18n/de-CH";
+
+<UiKitProvider labels={UI_KIT_LABELS_DE_CH} locale="de-CH">…</UiKitProvider>
+```
+
 ### The worked example
 
 `showcase/src/i18n/` runs the whole showcase in seven locales — English, German, French,

package/dist/chart.d.ts

@@ -13,7 +13,7 @@ export { TimeTickUnit } from './components/series-chart-ticks.js';
 import 'recharts';
 import 'react';
 import './lib/direction.js';
-import './kit-labels-C4uB_zmg.js';
+import './kit-labels-CPbsjlXr.js';
 import './components/data-table-labels.js';
 import './components/mini-calendar.js';
 import './components/calendar-heatmap.js';
@@ -62,3 +62,12 @@ import './components/authed-image.js';
 import './hooks/use-authed-src.js';
 import './components/image-grid.js';
 import './components/lightbox.js';
+import './components/write-lock.js';
+import './components/account-chips.js';
+import './lib/format.js';
+import './data-table-3mi2R3so.js';
+import './components/data-table-sort.js';
+import './components/swipeable-row.js';
+import './components/reauth-dialog.js';
+import './components/server-wake.js';
+import './lib/server-wake.js';

package/dist/components/account-chips.d.ts

@@ -0,0 +1,153 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from '../lib/format.js';
+import { ChipTone, ChipSize, ChipVariant, ChipShape } from './chip.js';
+import { b as DataTableColumn } from '../data-table-3mi2R3so.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './data-table-labels.js';
+
+/**
+ * The parts an admin roster repeats (0.18.0) — and only those.
+ *
+ * Kurvenschmiede (features/admin/users-panel.tsx, allowlist-panel.tsx) and keksdose
+ * (features/admin/users-panel.tsx, the allowlist card in admin-page.tsx) each built the
+ * same table: name over email, a role, whether the account is active, created, last
+ * login, a row of actions, and an allowlist with a note. What they share is not the
+ * table — the columns around it (keksdose's plan and privacy mode, Kurvenschmiede's
+ * owned-work counts and its role SELECT), the actions and every rule about who may do
+ * what are each app's own. What they share is the vocabulary: both spelled the same
+ * square, uppercase status chip by hand (keksdose's `Badge` with its own tone map,
+ * Kurvenschmiede's inline `<Chip size="xs" shape="square" caps>`), and both formatted
+ * their two date columns by hand (`toLocaleDateString` in one, a "3 days ago" helper
+ * in the other). So: {@link RoleChip}, {@link AccountStateChip} and
+ * {@link dateColumn}, and the roster stays the app's `DataTable`.
+ */
+/** The chip look both rosters use: a square, uppercase status tag. Each can be changed. */
+interface AccountChipLook {
+    /** Default `sm` — keksdose's roster; Kurvenschmiede's denser lists pass `xs`. */
+    size?: ChipSize;
+    /** Default `soft`. `dot` for a column of them that should not outshout the names. */
+    variant?: ChipVariant;
+    /** Default `square`: a chip in a table cell, beside square controls. */
+    shape?: ChipShape;
+    /** Default true — the status-badge type. */
+    caps?: boolean;
+    className?: string;
+    [key: `data-${string}`]: string | number | boolean | undefined;
+}
+/** How one role is drawn. `label` is the app's, translated. */
+interface RoleDefinition {
+    label: string;
+    tone?: ChipTone;
+    /** A lucide component or an element — Kurvenschmiede marks its admins with a shield. */
+    icon?: LucideIcon | ReactElement;
+}
+/**
+ * Every role an app has, keyed by the value its API sends. Annotate the app's table
+ * with it (`const ROLES: RoleVocabulary<UserRole> = {…}`) and TypeScript asks for a
+ * label when a role is added.
+ */
+type RoleVocabulary<R extends string = string> = Readonly<Record<R, RoleDefinition>>;
+interface RoleChipProps<R extends string = string> extends AccountChipLook {
+    /**
+     * The role key as the API sends it. `null` / `undefined` renders nothing. Named
+     * `value`, not `role`, because `role` on a JSX element is the ARIA role — the lint
+     * rule and every reader would take it for one.
+     */
+    value: R | null | undefined;
+    /** What each key is called and how it is toned. A key missing here is shown as the
+     *  key itself, in `neutral`: an unknown role is still a fact the admin should see. */
+    roles: Readonly<Partial<Record<R, RoleDefinition>>>;
+}
+/**
+ * A role as a chip: the API's key looked up in the app's {@link RoleVocabulary}.
+ *
+ * The vocabulary is a prop and not kit English, because the roles are the app's —
+ * Kurvenschmiede has admin, member and customer, keksdose admin and user, kastlan its
+ * own — and so are their names. Carries `data-role` with the key, for a test or a
+ * style hook.
+ */
+declare function RoleChip<R extends string = string>({ value: role, roles, size, variant, shape, caps, className, ...rest }: RoleChipProps<R>): react.JSX.Element | null;
+/**
+ * The states both rosters show, each as the app's own flag maps onto it:
+ *
+ * - `active` / `inactive` — the account may sign in, or an admin switched it off
+ *   (both apps' `is_active`).
+ * - `invited` — on the allowlist and mailed, not registered yet (an allowlist row).
+ * - `registered` — an allowlist row whose address has an account now (Kurvenschmiede).
+ * - `unverified` — the email address is not confirmed (keksdose).
+ * - `passwordChange` — must set a new password at the next sign-in (keksdose).
+ *
+ * An account can be several at once (inactive AND unverified): render one chip per
+ * state, as keksdose's state column does.
+ */
+type AccountState = "active" | "inactive" | "invited" | "registered" | "unverified" | "passwordChange";
+type AccountStateLabels = Record<AccountState, string>;
+declare const DEFAULT_ACCOUNT_STATE_LABELS: AccountStateLabels;
+/** The default tone of each state: green for the normal case, red for switched off,
+ *  amber for something the user still has to do, blue for an open invitation. */
+declare const ACCOUNT_STATE_TONES: Readonly<Record<AccountState, ChipTone>>;
+interface AccountStateChipProps extends AccountChipLook {
+    state: AccountState;
+    /** Over {@link ACCOUNT_STATE_TONES} — Kurvenschmiede draws `inactive` neutral. */
+    tone?: ChipTone;
+    /** Over the label, for an app whose word for the state is its own ("Deactivated"). */
+    children?: ReactNode;
+    /** Prop > `<UiKitProvider labels={{ accountState }}>` > English. */
+    labels?: Partial<AccountStateLabels>;
+}
+/**
+ * An account's state as a chip, in the kit's words and tones. Carries `data-state`
+ * with the key.
+ */
+declare function AccountStateChip({ state, tone, children, labels: labelsProp, size, variant, shape, caps, className, ...rest }: AccountStateChipProps): react.JSX.Element;
+interface DateMarkProps {
+    value: DateInput;
+    /**
+     * `"date"` (default): the date in `dateStyle` — "Created". `"relative"`: how long
+     * ago — "Last login", where the question is "recently?" — with the full date and
+     * time in a tooltip (keksdose's last-seen column).
+     */
+    display?: "date" | "relative";
+    /** Default `medium`. Under `"relative"`, the style of the tooltip's date (default
+     *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. */
+    dateStyle?: FormatDateStyle | Intl.DateTimeFormatOptions;
+    /** `formatRelativeTime` options: `numeric`, `style`, `absoluteAfterDays`, `now`. */
+    relative?: Omit<FormatRelativeTimeOptions, "locale" | "empty" | "absoluteStyle">;
+    /** What a missing value reads as. Default "—"; a last-login column passes its
+     *  translated "Never". */
+    empty?: ReactNode;
+    /** Over the provider's locale. */
+    locale?: string;
+    className?: string;
+}
+/**
+ * A date in a table cell: a `<time>` with a machine-readable `dateTime`, nowrap and
+ * tabular figures, in the provider's locale — or `empty` when there is none.
+ */
+declare function DateMark({ value, display, dateStyle, relative, empty, locale: localeProp, className, }: DateMarkProps): react.JSX.Element;
+interface DateColumnOptions<T> extends Omit<DateMarkProps, "value" | "className"> {
+    key: string;
+    header: ReactNode;
+    /** The value of this row: an ISO string, epoch ms, a Date, or null for none. */
+    value: (row: T) => DateInput;
+    /** Sortable by the instant; rows with no date sort last either way. Default true. */
+    sortable?: boolean;
+    /** Default `desc` — a date column is sorted to find the newest. */
+    firstSort?: "asc" | "desc";
+    /** Add the table's from–to date filter over the column. Default false. */
+    filter?: boolean;
+    /** Further column settings (`mobileHidden`, `headClassName`, …), merged over. */
+    column?: Partial<DataTableColumn<T>>;
+}
+/**
+ * A {@link DataTableColumn} for a date: {@link DateMark} cells, sorted by the instant
+ * (newest first on the first click), optionally the date filter. The roster's
+ * "Created" is `dateColumn({ key, header, value })`; its "Last login" adds
+ * `display: "relative", empty: t("never")`.
+ */
+declare function dateColumn<T>({ key, header, value, sortable, firstSort, filter, column, ...mark }: DateColumnOptions<T>): DataTableColumn<T>;
+
+export { ACCOUNT_STATE_TONES, type AccountState, AccountStateChip, type AccountStateChipProps, type AccountStateLabels, DEFAULT_ACCOUNT_STATE_LABELS, type DateColumnOptions, DateMark, type DateMarkProps, RoleChip, type RoleChipProps, type RoleDefinition, type RoleVocabulary, dateColumn };

package/dist/components/account-chips.js

@@ -0,0 +1,135 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { formatDate, formatRelativeTime, toDate, EMPTY_FORMATTED_VALUE } from "../lib/format.js";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { Chip } from "./chip.js";
+import { Tooltip } from "./tooltip.js";
+function RoleChip({
+  value: role,
+  roles,
+  size = "sm",
+  variant,
+  shape = "square",
+  caps = true,
+  className,
+  ...rest
+}) {
+  if (role === null || role === void 0 || role === "") return null;
+  const def = roles[role];
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      ...rest,
+      "data-role": role,
+      tone: def?.tone ?? "neutral",
+      icon: def?.icon,
+      size,
+      variant,
+      shape,
+      caps,
+      className,
+      children: def?.label ?? role
+    }
+  );
+}
+const DEFAULT_ACCOUNT_STATE_LABELS = {
+  active: "Active",
+  inactive: "Inactive",
+  invited: "Invited",
+  registered: "Registered",
+  unverified: "Unverified",
+  passwordChange: "Must change password"
+};
+const ACCOUNT_STATE_TONES = {
+  active: "success",
+  inactive: "danger",
+  invited: "info",
+  registered: "neutral",
+  unverified: "warning",
+  passwordChange: "warning"
+};
+function AccountStateChip({
+  state,
+  tone,
+  children,
+  labels: labelsProp,
+  size = "sm",
+  variant,
+  shape = "square",
+  caps = true,
+  className,
+  ...rest
+}) {
+  const labels = useKitLabels("accountState", DEFAULT_ACCOUNT_STATE_LABELS, labelsProp);
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      ...rest,
+      "data-state": state,
+      tone: tone ?? ACCOUNT_STATE_TONES[state],
+      size,
+      variant,
+      shape,
+      caps,
+      className,
+      children: children ?? labels[state]
+    }
+  );
+}
+function DateMark({
+  value,
+  display = "date",
+  dateStyle,
+  relative,
+  empty = EMPTY_FORMATTED_VALUE,
+  locale: localeProp,
+  className
+}) {
+  const locale = useKitLocale(localeProp);
+  const date = toDate(value);
+  const cls = cn("whitespace-nowrap tabular-nums", className);
+  if (!date) return /* @__PURE__ */ jsx("span", { className: cn(cls, "text-[var(--text-muted)]"), children: empty });
+  if (display === "date") {
+    return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), className: cls, children: formatDate(date, dateStyle ?? "medium", { locale }) });
+  }
+  const text = formatRelativeTime(date, { ...relative, locale, absoluteStyle: dateStyle ?? "medium" });
+  return /* @__PURE__ */ jsx(Tooltip, { label: formatDate(date, dateStyle ?? "dateTime", { locale }), lazy: true, children: /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), className: cls, children: text }) });
+}
+function dateColumn({
+  key,
+  header,
+  value,
+  sortable = true,
+  firstSort = "desc",
+  filter = false,
+  column,
+  ...mark
+}) {
+  return {
+    key,
+    header,
+    cell: (row) => /* @__PURE__ */ jsx(DateMark, { value: value(row), ...mark }),
+    sortBy: sortable ? (row) => toDate(value(row))?.getTime() ?? null : void 0,
+    firstSort: sortable ? firstSort : void 0,
+    filter: filter ? {
+      type: "date",
+      // The filter compares the first ten characters, so hand it an ISO string.
+      getValue: (row) => {
+        const raw = value(row);
+        if (typeof raw === "string") return raw;
+        return toDate(raw)?.toISOString() ?? null;
+      }
+    } : void 0,
+    ...column
+  };
+}
+export {
+  ACCOUNT_STATE_TONES,
+  AccountStateChip,
+  DEFAULT_ACCOUNT_STATE_LABELS,
+  DateMark,
+  RoleChip,
+  dateColumn
+};
+//# sourceMappingURL=account-chips.js.map

package/dist/components/account-chips.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/account-chips.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { formatDate, formatRelativeTime, toDate, EMPTY_FORMATTED_VALUE } from \"../lib/format\";\nimport type { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from \"../lib/format\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { Chip } from \"./chip\";\nimport type { ChipShape, ChipSize, ChipTone, ChipVariant } from \"./chip\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableColumn } from \"./data-table\";\n\n/**\n * The parts an admin roster repeats (0.18.0) — and only those.\n *\n * Kurvenschmiede (features/admin/users-panel.tsx, allowlist-panel.tsx) and keksdose\n * (features/admin/users-panel.tsx, the allowlist card in admin-page.tsx) each built the\n * same table: name over email, a role, whether the account is active, created, last\n * login, a row of actions, and an allowlist with a note. What they share is not the\n * table — the columns around it (keksdose's plan and privacy mode, Kurvenschmiede's\n * owned-work counts and its role SELECT), the actions and every rule about who may do\n * what are each app's own. What they share is the vocabulary: both spelled the same\n * square, uppercase status chip by hand (keksdose's `Badge` with its own tone map,\n * Kurvenschmiede's inline `<Chip size=\"xs\" shape=\"square\" caps>`), and both formatted\n * their two date columns by hand (`toLocaleDateString` in one, a \"3 days ago\" helper\n * in the other). So: {@link RoleChip}, {@link AccountStateChip} and\n * {@link dateColumn}, and the roster stays the app's `DataTable`.\n */\n\n/** The chip look both rosters use: a square, uppercase status tag. Each can be changed. */\ninterface AccountChipLook {\n  /** Default `sm` — keksdose's roster; Kurvenschmiede's denser lists pass `xs`. */\n  size?: ChipSize;\n  /** Default `soft`. `dot` for a column of them that should not outshout the names. */\n  variant?: ChipVariant;\n  /** Default `square`: a chip in a table cell, beside square controls. */\n  shape?: ChipShape;\n  /** Default true — the status-badge type. */\n  caps?: boolean;\n  className?: string;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/* ── RoleChip ──────────────────────────────────────────────────────────────── */\n\n/** How one role is drawn. `label` is the app's, translated. */\nexport interface RoleDefinition {\n  label: string;\n  tone?: ChipTone;\n  /** A lucide component or an element — Kurvenschmiede marks its admins with a shield. */\n  icon?: LucideIcon | ReactElement;\n}\n\n/**\n * Every role an app has, keyed by the value its API sends. Annotate the app's table\n * with it (`const ROLES: RoleVocabulary<UserRole> = {…}`) and TypeScript asks for a\n * label when a role is added.\n */\nexport type RoleVocabulary<R extends string = string> = Readonly<Record<R, RoleDefinition>>;\n\nexport interface RoleChipProps<R extends string = string> extends AccountChipLook {\n  /**\n   * The role key as the API sends it. `null` / `undefined` renders nothing. Named\n   * `value`, not `role`, because `role` on a JSX element is the ARIA role — the lint\n   * rule and every reader would take it for one.\n   */\n  value: R | null | undefined;\n  /** What each key is called and how it is toned. A key missing here is shown as the\n   *  key itself, in `neutral`: an unknown role is still a fact the admin should see. */\n  roles: Readonly<Partial<Record<R, RoleDefinition>>>;\n}\n\n/**\n * A role as a chip: the API's key looked up in the app's {@link RoleVocabulary}.\n *\n * The vocabulary is a prop and not kit English, because the roles are the app's —\n * Kurvenschmiede has admin, member and customer, keksdose admin and user, kastlan its\n * own — and so are their names. Carries `data-role` with the key, for a test or a\n * style hook.\n */\nexport function RoleChip<R extends string = string>({\n  value: role,\n  roles,\n  size = \"sm\",\n  variant,\n  shape = \"square\",\n  caps = true,\n  className,\n  ...rest\n}: RoleChipProps<R>) {\n  if (role === null || role === undefined || role === \"\") return null;\n  const def = roles[role];\n  return (\n    <Chip\n      {...rest}\n      data-role={role}\n      tone={def?.tone ?? \"neutral\"}\n      icon={def?.icon}\n      size={size}\n      variant={variant}\n      shape={shape}\n      caps={caps}\n      className={className}\n    >\n      {def?.label ?? role}\n    </Chip>\n  );\n}\n\n/* ── AccountStateChip ──────────────────────────────────────────────────────── */\n\n/**\n * The states both rosters show, each as the app's own flag maps onto it:\n *\n * - `active` / `inactive` — the account may sign in, or an admin switched it off\n *   (both apps' `is_active`).\n * - `invited` — on the allowlist and mailed, not registered yet (an allowlist row).\n * - `registered` — an allowlist row whose address has an account now (Kurvenschmiede).\n * - `unverified` — the email address is not confirmed (keksdose).\n * - `passwordChange` — must set a new password at the next sign-in (keksdose).\n *\n * An account can be several at once (inactive AND unverified): render one chip per\n * state, as keksdose's state column does.\n */\nexport type AccountState = \"active\" | \"inactive\" | \"invited\" | \"registered\" | \"unverified\" | \"passwordChange\";\n\nexport type AccountStateLabels = Record<AccountState, string>;\n\nexport const DEFAULT_ACCOUNT_STATE_LABELS: AccountStateLabels = {\n  active: \"Active\",\n  inactive: \"Inactive\",\n  invited: \"Invited\",\n  registered: \"Registered\",\n  unverified: \"Unverified\",\n  passwordChange: \"Must change password\",\n};\n\n/** The default tone of each state: green for the normal case, red for switched off,\n *  amber for something the user still has to do, blue for an open invitation. */\nexport const ACCOUNT_STATE_TONES: Readonly<Record<AccountState, ChipTone>> = {\n  active: \"success\",\n  inactive: \"danger\",\n  invited: \"info\",\n  registered: \"neutral\",\n  unverified: \"warning\",\n  passwordChange: \"warning\",\n};\n\nexport interface AccountStateChipProps extends AccountChipLook {\n  state: AccountState;\n  /** Over {@link ACCOUNT_STATE_TONES} — Kurvenschmiede draws `inactive` neutral. */\n  tone?: ChipTone;\n  /** Over the label, for an app whose word for the state is its own (\"Deactivated\"). */\n  children?: ReactNode;\n  /** Prop > `<UiKitProvider labels={{ accountState }}>` > English. */\n  labels?: Partial<AccountStateLabels>;\n}\n\n/**\n * An account's state as a chip, in the kit's words and tones. Carries `data-state`\n * with the key.\n */\nexport function AccountStateChip({\n  state,\n  tone,\n  children,\n  labels: labelsProp,\n  size = \"sm\",\n  variant,\n  shape = \"square\",\n  caps = true,\n  className,\n  ...rest\n}: AccountStateChipProps) {\n  // An `undefined` in the prop is skipped (the provider's merge does that), so an\n  // optional value cannot blank a default.\n  const labels = useKitLabels(\"accountState\", DEFAULT_ACCOUNT_STATE_LABELS, labelsProp);\n  return (\n    <Chip\n      {...rest}\n      data-state={state}\n      tone={tone ?? ACCOUNT_STATE_TONES[state]}\n      size={size}\n      variant={variant}\n      shape={shape}\n      caps={caps}\n      className={className}\n    >\n      {children ?? labels[state]}\n    </Chip>\n  );\n}\n\n/* ── Date columns ──────────────────────────────────────────────────────────── */\n\nexport interface DateMarkProps {\n  value: DateInput;\n  /**\n   * `\"date\"` (default): the date in `dateStyle` — \"Created\". `\"relative\"`: how long\n   * ago — \"Last login\", where the question is \"recently?\" — with the full date and\n   * time in a tooltip (keksdose's last-seen column).\n   */\n  display?: \"date\" | \"relative\";\n  /** Default `medium`. Under `\"relative\"`, the style of the tooltip's date (default\n   *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. */\n  dateStyle?: FormatDateStyle | Intl.DateTimeFormatOptions;\n  /** `formatRelativeTime` options: `numeric`, `style`, `absoluteAfterDays`, `now`. */\n  relative?: Omit<FormatRelativeTimeOptions, \"locale\" | \"empty\" | \"absoluteStyle\">;\n  /** What a missing value reads as. Default \"—\"; a last-login column passes its\n   *  translated \"Never\". */\n  empty?: ReactNode;\n  /** Over the provider's locale. */\n  locale?: string;\n  className?: string;\n}\n\n/**\n * A date in a table cell: a `<time>` with a machine-readable `dateTime`, nowrap and\n * tabular figures, in the provider's locale — or `empty` when there is none.\n */\nexport function DateMark({\n  value,\n  display = \"date\",\n  dateStyle,\n  relative,\n  empty = EMPTY_FORMATTED_VALUE,\n  locale: localeProp,\n  className,\n}: DateMarkProps) {\n  const locale = useKitLocale(localeProp);\n  const date = toDate(value);\n  const cls = cn(\"whitespace-nowrap tabular-nums\", className);\n  if (!date) return <span className={cn(cls, \"text-[var(--text-muted)]\")}>{empty}</span>;\n  if (display === \"date\") {\n    return (\n      <time dateTime={date.toISOString()} className={cls}>\n        {formatDate(date, dateStyle ?? \"medium\", { locale })}\n      </time>\n    );\n  }\n  const text = formatRelativeTime(date, { ...relative, locale, absoluteStyle: dateStyle ?? \"medium\" });\n  return (\n    <Tooltip label={formatDate(date, dateStyle ?? \"dateTime\", { locale })} lazy>\n      {/* Not a tab stop: a roster of fifty rows would be fifty more of them, and the\n          relative words already answer the column's question; the exact time is extra. */}\n      <time dateTime={date.toISOString()} className={cls}>\n        {text}\n      </time>\n    </Tooltip>\n  );\n}\n\nexport interface DateColumnOptions<T> extends Omit<DateMarkProps, \"value\" | \"className\"> {\n  key: string;\n  header: ReactNode;\n  /** The value of this row: an ISO string, epoch ms, a Date, or null for none. */\n  value: (row: T) => DateInput;\n  /** Sortable by the instant; rows with no date sort last either way. Default true. */\n  sortable?: boolean;\n  /** Default `desc` — a date column is sorted to find the newest. */\n  firstSort?: \"asc\" | \"desc\";\n  /** Add the table's from–to date filter over the column. Default false. */\n  filter?: boolean;\n  /** Further column settings (`mobileHidden`, `headClassName`, …), merged over. */\n  column?: Partial<DataTableColumn<T>>;\n}\n\n/**\n * A {@link DataTableColumn} for a date: {@link DateMark} cells, sorted by the instant\n * (newest first on the first click), optionally the date filter. The roster's\n * \"Created\" is `dateColumn({ key, header, value })`; its \"Last login\" adds\n * `display: \"relative\", empty: t(\"never\")`.\n */\nexport function dateColumn<T>({\n  key,\n  header,\n  value,\n  sortable = true,\n  firstSort = \"desc\",\n  filter = false,\n  column,\n  ...mark\n}: DateColumnOptions<T>): DataTableColumn<T> {\n  return {\n    key,\n    header,\n    cell: (row) => <DateMark value={value(row)} {...mark} />,\n    sortBy: sortable ? (row) => toDate(value(row))?.getTime() ?? null : undefined,\n    firstSort: sortable ? firstSort : undefined,\n    filter: filter\n      ? {\n          type: \"date\",\n          // The filter compares the first ten characters, so hand it an ISO string.\n          getValue: (row) => {\n            const raw = value(row);\n            if (typeof raw === \"string\") return raw;\n            return toDate(raw)?.toISOString() ?? null;\n          },\n        }\n      : undefined,\n    ...column,\n  };\n}\n"],"mappings":";AA4FI;AA1FJ,SAAS,UAAU;AACnB,SAAS,YAAY,oBAAoB,QAAQ,6BAA6B;AAE9E,SAAS,cAAc,oBAAoB;AAC3C,SAAS,YAAY;AAErB,SAAS,eAAe;AAuEjB,SAAS,SAAoC;AAAA,EAClD,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,MAAI,SAAS,QAAQ,SAAS,UAAa,SAAS,GAAI,QAAO;AAC/D,QAAM,MAAM,MAAM,IAAI;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAW;AAAA,MACX,MAAM,KAAK,QAAQ;AAAA,MACnB,MAAM,KAAK;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,eAAK,SAAS;AAAA;AAAA,EACjB;AAEJ;AAqBO,MAAM,+BAAmD;AAAA,EAC9D,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,gBAAgB;AAClB;AAIO,MAAM,sBAAgE;AAAA,EAC3E,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,gBAAgB;AAClB;AAgBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAA0B;AAGxB,QAAM,SAAS,aAAa,gBAAgB,8BAA8B,UAAU;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,MAAM,QAAQ,oBAAoB,KAAK;AAAA,MACvC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,sBAAY,OAAO,KAAK;AAAA;AAAA,EAC3B;AAEJ;AA6BO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AACF,GAAkB;AAChB,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,OAAO,OAAO,KAAK;AACzB,QAAM,MAAM,GAAG,kCAAkC,SAAS;AAC1D,MAAI,CAAC,KAAM,QAAO,oBAAC,UAAK,WAAW,GAAG,KAAK,0BAA0B,GAAI,iBAAM;AAC/E,MAAI,YAAY,QAAQ;AACtB,WACE,oBAAC,UAAK,UAAU,KAAK,YAAY,GAAG,WAAW,KAC5C,qBAAW,MAAM,aAAa,UAAU,EAAE,OAAO,CAAC,GACrD;AAAA,EAEJ;AACA,QAAM,OAAO,mBAAmB,MAAM,EAAE,GAAG,UAAU,QAAQ,eAAe,aAAa,SAAS,CAAC;AACnG,SACE,oBAAC,WAAQ,OAAO,WAAW,MAAM,aAAa,YAAY,EAAE,OAAO,CAAC,GAAG,MAAI,MAGzE,8BAAC,UAAK,UAAU,KAAK,YAAY,GAAG,WAAW,KAC5C,gBACH,GACF;AAEJ;AAuBO,SAAS,WAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,GAA6C;AAC3C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,MAAM,CAAC,QAAQ,oBAAC,YAAS,OAAO,MAAM,GAAG,GAAI,GAAG,MAAM;AAAA,IACtD,QAAQ,WAAW,CAAC,QAAQ,OAAO,MAAM,GAAG,CAAC,GAAG,QAAQ,KAAK,OAAO;AAAA,IACpE,WAAW,WAAW,YAAY;AAAA,IAClC,QAAQ,SACJ;AAAA,MACE,MAAM;AAAA;AAAA,MAEN,UAAU,CAAC,QAAQ;AACjB,cAAM,MAAM,MAAM,GAAG;AACrB,YAAI,OAAO,QAAQ,SAAU,QAAO;AACpC,eAAO,OAAO,GAAG,GAAG,YAAY,KAAK;AAAA,MACvC;AAAA,IACF,IACA;AAAA,IACJ,GAAG;AAAA,EACL;AACF;","names":[]}

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

@@ -56,8 +56,16 @@ interface TwoFactorSettingLabels {
 }
 interface PasskeysSettingLabels {
     title: string;
-    /** The line under the title saying what a passkey is for. */
+    /** The line under the title saying what a passkey is for — `mode="instead"` (the
+     *  default): the passkey stands in for the password. */
     description: string;
+    /**
+     * The same line for `mode="alongside"` (0.18.0): the password keeps working and the
+     * passkey is a second way in. OPTIONAL for the reason `TwoFactorSettingLabels.qrAlt`
+     * is — this interface is annotated at call sites — and filled from the provider's
+     * `accountSettings.passkeys`, then English.
+     */
+    descriptionAlongside?: string;
     empty: string;
     loading: string;
     /** Accessible name of the list. */
@@ -91,7 +99,7 @@ interface AccountSettingsLabels {
     profile: ProfileSettingLabels;
     password: PasswordSettingLabels;
     twoFactor: Required<TwoFactorSettingLabels>;
-    passkeys: PasskeysSettingLabels;
+    passkeys: Required<PasskeysSettingLabels>;
 }
 declare const DEFAULT_ACCOUNT_SETTINGS_LABELS: AccountSettingsLabels;
 /**

package/dist/components/account-settings-labels.js

@@ -38,6 +38,9 @@ const DEFAULT_ACCOUNT_SETTINGS_LABELS = {
   passkeys: {
     title: "Passkeys",
     description: "Sign in with your fingerprint, face or device PIN instead of a password.",
+    // Kurvenschmiede overrode `description` because "instead of" is false where the
+    // password stays; this is the sentence for those apps, picked by `mode`.
+    descriptionAlongside: "Sign in with your fingerprint, face or device PIN. Your password keeps working too.",
     empty: "No passkeys yet",
     loading: "Loading passkeys\u2026",
     list: "Your passkeys",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/account-settings-labels.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useKitLabelOverrides } from \"../i18n/kit-labels\";\n\n/**\n * The `accountSettings` namespace of `<UiKitProvider labels>`: one record per section —\n * `profile`, `password`, `twoFactor`, `passkeys` — each merged key by key, so an app\n * can translate `accountSettings.twoFactor.scanHint` alone.\n *\n * Before 0.12.0 every section took a REQUIRED `labels` prop and had no English of its\n * own, so each app spelled out 30-odd keys at the call site and still hard-coded some\n * (kastlan's profile page passed `email: \"Email\"` in English to a German page). The\n * prop stays, now partial, and wins over the provider as everywhere else in the kit.\n *\n * Its own module, beside the components rather than in them, so `PasskeysSetting`\n * (its own file) and the older three read one tree without importing each other.\n */\n\nexport interface ProfileSettingLabels {\n  title: string;\n  email: string;\n  role: string;\n  memberSince: string;\n  displayName: string;\n  save: string;\n}\n\nexport interface PasswordSettingLabels {\n  title: string;\n  current: string;\n  next: string;\n  confirm: string;\n  submit: string;\n  tooShort: string;\n  mismatch: string;\n}\n\nexport interface TwoFactorSettingLabels {\n  status: string;\n  enabledText: string;\n  disabledText: string;\n  enable: string;\n  scanHint: string;\n  codeLabel: string;\n  verify: string;\n  disableSection: string;\n  password: string;\n  disable: string;\n  /**\n   * Alt text for the setup QR code, which shipped as a hardcoded `alt=\"QR\"`.\n   *\n   * OPTIONAL, like the two keys below, and not because it matters less: this interface\n   * is annotated at consumer call sites (`const LABELS: TwoFactorSettingLabels = {…}`),\n   * so a new REQUIRED key is a compile error in every app on the next `npm update` —\n   * the additive-API rule in the README. Each falls back to the provider's\n   * `accountSettings.twoFactor`, then English.\n   */\n  qrAlt?: string;\n  /** The line over the manual-entry key, for a phone that cannot scan its own screen. */\n  secretHint?: string;\n  /** The copy button beside that key. */\n  copySecret?: string;\n}\n\nexport interface PasskeysSettingLabels {\n  title: string;\n  /** The line under the title saying what a passkey is for. */\n  description: string;\n  empty: string;\n  loading: string;\n  /** Accessible name of the list. */\n  list: string;\n  nameLabel: string;\n  namePlaceholder: string;\n  add: string;\n  /** The add button while the app's WebAuthn ceremony runs — the OS prompt is open. */\n  adding: string;\n  rename: string;\n  /** The row's rename button, named for its passkey — it starts with `rename`, the\n   *  visible text, so voice control finds it by what it says. */\n  renameItem: (name: string) => string;\n  /** Accessible name of the inline rename field. */\n  renameField: (name: string) => string;\n  save: string;\n  cancel: string;\n  delete: string;\n  /** The row's delete button, named for its passkey (see `renameItem`). */\n  deleteItem: (name: string) => string;\n  /** The inline question a delete asks first. */\n  deleteConfirm: (name: string) => string;\n  /** The destructive button that answers it. */\n  confirmDelete: string;\n  /** `date` arrives formatted in the provider's locale. */\n  created: (date: string) => string;\n  lastUsed: (date: string) => string;\n  neverUsed: string;\n}\n\nexport interface AccountSettingsLabels {\n  profile: ProfileSettingLabels;\n  password: PasswordSettingLabels;\n  twoFactor: Required<TwoFactorSettingLabels>;\n  passkeys: PasskeysSettingLabels;\n}\n\nexport const DEFAULT_ACCOUNT_SETTINGS_LABELS: AccountSettingsLabels = {\n  profile: {\n    title: \"Profile\",\n    email: \"Email\",\n    role: \"Role\",\n    memberSince: \"Member since\",\n    displayName: \"Display name\",\n    save: \"Save\",\n  },\n  password: {\n    title: \"Change password\",\n    current: \"Current password\",\n    next: \"New password\",\n    confirm: \"Confirm new password\",\n    submit: \"Change password\",\n    tooShort: \"The new password is too short.\",\n    mismatch: \"The passwords don’t match.\",\n  },\n  twoFactor: {\n    status: \"Two-factor authentication\",\n    enabledText: \"On\",\n    disabledText: \"Off\",\n    enable: \"Set up two-factor authentication\",\n    scanHint: \"Scan this code with your authenticator app, then enter the code it shows.\",\n    codeLabel: \"Verification code\",\n    verify: \"Verify and turn on\",\n    disableSection: \"Turn off two-factor authentication\",\n    password: \"Current password\",\n    disable: \"Turn off\",\n    // Unchanged from the fallback it had before the namespace (i18n-labels.test pins it).\n    qrAlt: \"QR code\",\n    secretHint: \"Can’t scan it? Enter this key in the app instead:\",\n    copySecret: \"Copy key\",\n  },\n  passkeys: {\n    title: \"Passkeys\",\n    description: \"Sign in with your fingerprint, face or device PIN instead of a password.\",\n    empty: \"No passkeys yet\",\n    loading: \"Loading passkeys…\",\n    list: \"Your passkeys\",\n    nameLabel: \"Name (optional)\",\n    namePlaceholder: \"e.g. Laptop, Phone\",\n    add: \"Add passkey\",\n    adding: \"Waiting for your device…\",\n    rename: \"Rename\",\n    renameItem: (name) => `Rename ${name}`,\n    renameField: (name) => `New name for ${name}`,\n    save: \"Save\",\n    cancel: \"Cancel\",\n    delete: \"Delete\",\n    deleteItem: (name) => `Delete ${name}`,\n    deleteConfirm: (name) => `Delete “${name}”? It can no longer be used to sign in.`,\n    confirmDelete: \"Delete passkey\",\n    created: (date) => `Added ${date}`,\n    lastUsed: (date) => `Last used ${date}`,\n    neverUsed: \"Never used\",\n  },\n};\n\n/**\n * One section of the namespace, resolved: English, then the provider's\n * `accountSettings.<section>`, then the component's own `labels` prop. An `undefined`\n * in either source is skipped, so a prop object built from optional values cannot\n * blank out a default.\n */\nexport function useAccountSettingsLabels<K extends keyof AccountSettingsLabels>(\n  section: K,\n  prop?: Partial<AccountSettingsLabels[K]>,\n): AccountSettingsLabels[K] {\n  const fromProvider = useKitLabelOverrides(\"accountSettings\")?.[section] as\n    | Partial<AccountSettingsLabels[K]>\n    | undefined;\n  return useMemo(\n    () => ({\n      ...DEFAULT_ACCOUNT_SETTINGS_LABELS[section],\n      ...definedOnly(fromProvider),\n      ...definedOnly(prop),\n    }),\n    [section, fromProvider, prop],\n  );\n}\n\nfunction definedOnly<T extends object>(value: T | undefined): Partial<T> {\n  if (!value) return {};\n  return Object.fromEntries(Object.entries(value).filter(([, v]) => v !== undefined)) as Partial<T>;\n}\n"],"mappings":";AAAA,SAAS,eAAe;AACxB,SAAS,4BAA4B;AAuG9B,MAAM,kCAAyD;AAAA,EACpE,SAAS;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,IACb,aAAa;AAAA,IACb,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA;AAAA,IAET,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,CAAC,SAAS,UAAU,IAAI;AAAA,IACpC,aAAa,CAAC,SAAS,gBAAgB,IAAI;AAAA,IAC3C,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,CAAC,SAAS,UAAU,IAAI;AAAA,IACpC,eAAe,CAAC,SAAS,gBAAW,IAAI;AAAA,IACxC,eAAe;AAAA,IACf,SAAS,CAAC,SAAS,SAAS,IAAI;AAAA,IAChC,UAAU,CAAC,SAAS,aAAa,IAAI;AAAA,IACrC,WAAW;AAAA,EACb;AACF;AAQO,SAAS,yBACd,SACA,MAC0B;AAC1B,QAAM,eAAe,qBAAqB,iBAAiB,IAAI,OAAO;AAGtE,SAAO;AAAA,IACL,OAAO;AAAA,MACL,GAAG,gCAAgC,OAAO;AAAA,MAC1C,GAAG,YAAY,YAAY;AAAA,MAC3B,GAAG,YAAY,IAAI;AAAA,IACrB;AAAA,IACA,CAAC,SAAS,cAAc,IAAI;AAAA,EAC9B;AACF;AAEA,SAAS,YAA8B,OAAkC;AACvE,MAAI,CAAC,MAAO,QAAO,CAAC;AACpB,SAAO,OAAO,YAAY,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,MAAM,MAAM,MAAS,CAAC;AACpF;","names":[]}
+{"version":3,"sources":["../../src/components/account-settings-labels.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useKitLabelOverrides } from \"../i18n/kit-labels\";\n\n/**\n * The `accountSettings` namespace of `<UiKitProvider labels>`: one record per section —\n * `profile`, `password`, `twoFactor`, `passkeys` — each merged key by key, so an app\n * can translate `accountSettings.twoFactor.scanHint` alone.\n *\n * Before 0.12.0 every section took a REQUIRED `labels` prop and had no English of its\n * own, so each app spelled out 30-odd keys at the call site and still hard-coded some\n * (kastlan's profile page passed `email: \"Email\"` in English to a German page). The\n * prop stays, now partial, and wins over the provider as everywhere else in the kit.\n *\n * Its own module, beside the components rather than in them, so `PasskeysSetting`\n * (its own file) and the older three read one tree without importing each other.\n */\n\nexport interface ProfileSettingLabels {\n  title: string;\n  email: string;\n  role: string;\n  memberSince: string;\n  displayName: string;\n  save: string;\n}\n\nexport interface PasswordSettingLabels {\n  title: string;\n  current: string;\n  next: string;\n  confirm: string;\n  submit: string;\n  tooShort: string;\n  mismatch: string;\n}\n\nexport interface TwoFactorSettingLabels {\n  status: string;\n  enabledText: string;\n  disabledText: string;\n  enable: string;\n  scanHint: string;\n  codeLabel: string;\n  verify: string;\n  disableSection: string;\n  password: string;\n  disable: string;\n  /**\n   * Alt text for the setup QR code, which shipped as a hardcoded `alt=\"QR\"`.\n   *\n   * OPTIONAL, like the two keys below, and not because it matters less: this interface\n   * is annotated at consumer call sites (`const LABELS: TwoFactorSettingLabels = {…}`),\n   * so a new REQUIRED key is a compile error in every app on the next `npm update` —\n   * the additive-API rule in the README. Each falls back to the provider's\n   * `accountSettings.twoFactor`, then English.\n   */\n  qrAlt?: string;\n  /** The line over the manual-entry key, for a phone that cannot scan its own screen. */\n  secretHint?: string;\n  /** The copy button beside that key. */\n  copySecret?: string;\n}\n\nexport interface PasskeysSettingLabels {\n  title: string;\n  /** The line under the title saying what a passkey is for — `mode=\"instead\"` (the\n   *  default): the passkey stands in for the password. */\n  description: string;\n  /**\n   * The same line for `mode=\"alongside\"` (0.18.0): the password keeps working and the\n   * passkey is a second way in. OPTIONAL for the reason `TwoFactorSettingLabels.qrAlt`\n   * is — this interface is annotated at call sites — and filled from the provider's\n   * `accountSettings.passkeys`, then English.\n   */\n  descriptionAlongside?: string;\n  empty: string;\n  loading: string;\n  /** Accessible name of the list. */\n  list: string;\n  nameLabel: string;\n  namePlaceholder: string;\n  add: string;\n  /** The add button while the app's WebAuthn ceremony runs — the OS prompt is open. */\n  adding: string;\n  rename: string;\n  /** The row's rename button, named for its passkey — it starts with `rename`, the\n   *  visible text, so voice control finds it by what it says. */\n  renameItem: (name: string) => string;\n  /** Accessible name of the inline rename field. */\n  renameField: (name: string) => string;\n  save: string;\n  cancel: string;\n  delete: string;\n  /** The row's delete button, named for its passkey (see `renameItem`). */\n  deleteItem: (name: string) => string;\n  /** The inline question a delete asks first. */\n  deleteConfirm: (name: string) => string;\n  /** The destructive button that answers it. */\n  confirmDelete: string;\n  /** `date` arrives formatted in the provider's locale. */\n  created: (date: string) => string;\n  lastUsed: (date: string) => string;\n  neverUsed: string;\n}\n\nexport interface AccountSettingsLabels {\n  profile: ProfileSettingLabels;\n  password: PasswordSettingLabels;\n  // `Required` here, optional on the section interfaces: the namespace is what a full\n  // catalogue (`@eifi1/ui-kit/i18n/<code>`, `missingKitLabels`) is written against, so\n  // it must name the late keys; the section interfaces are annotated at call sites.\n  twoFactor: Required<TwoFactorSettingLabels>;\n  passkeys: Required<PasskeysSettingLabels>;\n}\n\nexport const DEFAULT_ACCOUNT_SETTINGS_LABELS: AccountSettingsLabels = {\n  profile: {\n    title: \"Profile\",\n    email: \"Email\",\n    role: \"Role\",\n    memberSince: \"Member since\",\n    displayName: \"Display name\",\n    save: \"Save\",\n  },\n  password: {\n    title: \"Change password\",\n    current: \"Current password\",\n    next: \"New password\",\n    confirm: \"Confirm new password\",\n    submit: \"Change password\",\n    tooShort: \"The new password is too short.\",\n    mismatch: \"The passwords don’t match.\",\n  },\n  twoFactor: {\n    status: \"Two-factor authentication\",\n    enabledText: \"On\",\n    disabledText: \"Off\",\n    enable: \"Set up two-factor authentication\",\n    scanHint: \"Scan this code with your authenticator app, then enter the code it shows.\",\n    codeLabel: \"Verification code\",\n    verify: \"Verify and turn on\",\n    disableSection: \"Turn off two-factor authentication\",\n    password: \"Current password\",\n    disable: \"Turn off\",\n    // Unchanged from the fallback it had before the namespace (i18n-labels.test pins it).\n    qrAlt: \"QR code\",\n    secretHint: \"Can’t scan it? Enter this key in the app instead:\",\n    copySecret: \"Copy key\",\n  },\n  passkeys: {\n    title: \"Passkeys\",\n    description: \"Sign in with your fingerprint, face or device PIN instead of a password.\",\n    // Kurvenschmiede overrode `description` because \"instead of\" is false where the\n    // password stays; this is the sentence for those apps, picked by `mode`.\n    descriptionAlongside: \"Sign in with your fingerprint, face or device PIN. Your password keeps working too.\",\n    empty: \"No passkeys yet\",\n    loading: \"Loading passkeys…\",\n    list: \"Your passkeys\",\n    nameLabel: \"Name (optional)\",\n    namePlaceholder: \"e.g. Laptop, Phone\",\n    add: \"Add passkey\",\n    adding: \"Waiting for your device…\",\n    rename: \"Rename\",\n    renameItem: (name) => `Rename ${name}`,\n    renameField: (name) => `New name for ${name}`,\n    save: \"Save\",\n    cancel: \"Cancel\",\n    delete: \"Delete\",\n    deleteItem: (name) => `Delete ${name}`,\n    deleteConfirm: (name) => `Delete “${name}”? It can no longer be used to sign in.`,\n    confirmDelete: \"Delete passkey\",\n    created: (date) => `Added ${date}`,\n    lastUsed: (date) => `Last used ${date}`,\n    neverUsed: \"Never used\",\n  },\n};\n\n/**\n * One section of the namespace, resolved: English, then the provider's\n * `accountSettings.<section>`, then the component's own `labels` prop. An `undefined`\n * in either source is skipped, so a prop object built from optional values cannot\n * blank out a default.\n */\nexport function useAccountSettingsLabels<K extends keyof AccountSettingsLabels>(\n  section: K,\n  prop?: Partial<AccountSettingsLabels[K]>,\n): AccountSettingsLabels[K] {\n  const fromProvider = useKitLabelOverrides(\"accountSettings\")?.[section] as\n    | Partial<AccountSettingsLabels[K]>\n    | undefined;\n  return useMemo(\n    () => ({\n      ...DEFAULT_ACCOUNT_SETTINGS_LABELS[section],\n      ...definedOnly(fromProvider),\n      ...definedOnly(prop),\n    }),\n    [section, fromProvider, prop],\n  );\n}\n\nfunction definedOnly<T extends object>(value: T | undefined): Partial<T> {\n  if (!value) return {};\n  return Object.fromEntries(Object.entries(value).filter(([, v]) => v !== undefined)) as Partial<T>;\n}\n"],"mappings":";AAAA,SAAS,eAAe;AACxB,SAAS,4BAA4B;AAkH9B,MAAM,kCAAyD;AAAA,EACpE,SAAS;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,IACb,aAAa;AAAA,IACb,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA;AAAA,IAET,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,aAAa;AAAA;AAAA;AAAA,IAGb,sBAAsB;AAAA,IACtB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,CAAC,SAAS,UAAU,IAAI;AAAA,IACpC,aAAa,CAAC,SAAS,gBAAgB,IAAI;AAAA,IAC3C,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,CAAC,SAAS,UAAU,IAAI;AAAA,IACpC,eAAe,CAAC,SAAS,gBAAW,IAAI;AAAA,IACxC,eAAe;AAAA,IACf,SAAS,CAAC,SAAS,SAAS,IAAI;AAAA,IAChC,UAAU,CAAC,SAAS,aAAa,IAAI;AAAA,IACrC,WAAW;AAAA,EACb;AACF;AAQO,SAAS,yBACd,SACA,MAC0B;AAC1B,QAAM,eAAe,qBAAqB,iBAAiB,IAAI,OAAO;AAGtE,SAAO;AAAA,IACL,OAAO;AAAA,MACL,GAAG,gCAAgC,OAAO;AAAA,MAC1C,GAAG,YAAY,YAAY;AAAA,MAC3B,GAAG,YAAY,IAAI;AAAA,IACrB;AAAA,IACA,CAAC,SAAS,cAAc,IAAI;AAAA,EAC9B;AACF;AAEA,SAAS,YAA8B,OAAkC;AACvE,MAAI,CAAC,MAAO,QAAO,CAAC;AACpB,SAAO,OAAO,YAAY,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,MAAM,MAAM,MAAS,CAAC;AACpF;","names":[]}

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

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalculatorButtonLabels } from './calculator.js';
 import { NumberPadSheetLabels } from './numpad-sheet.js';
-import '../kit-labels-C4uB_zmg.js';
+import '../kit-labels-CPbsjlXr.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -53,6 +53,15 @@ import './authed-image.js';
 import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
+import './write-lock.js';
+import './account-chips.js';
+import '../lib/format.js';
+import '../data-table-3mi2R3so.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
 
 interface AmountInputProps {
     value: string;

package/dist/components/button-group.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, ReactElement } from 'react';
-import { f as ButtonVariant, d as ButtonSize } from '../kit-labels-C4uB_zmg.js';
+import { f as ButtonVariant, d as ButtonSize } from '../kit-labels-CPbsjlXr.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -51,6 +51,15 @@ import './authed-image.js';
 import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
+import './write-lock.js';
+import './account-chips.js';
+import '../lib/format.js';
+import '../data-table-3mi2R3so.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
 
 interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
     /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —

package/dist/components/calculator.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { C as CalculatorLabels } from '../kit-labels-C4uB_zmg.js';
+import { C as CalculatorLabels } from '../kit-labels-CPbsjlXr.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -50,6 +50,15 @@ import './authed-image.js';
 import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
+import './write-lock.js';
+import './account-chips.js';
+import '../lib/format.js';
+import '../data-table-3mi2R3so.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
 
 /** Screen-reader names for the calculator panel's own controls — any part of the
  *  kit's `calculator` namespace. Once three optional keys of its own; widened, not

package/dist/components/chip.d.ts

@@ -74,6 +74,13 @@ interface ChipLinkProps {
     [key: `aria-${string}`]: string | boolean | number | undefined;
     [key: `data-${string}`]: unknown;
 }
+/**
+ * Re-snap every chip rendered with `snapEdges`, now. The kit already re-snaps when a
+ * chip renders, resizes, or the window or the ratio changes; call this after moving
+ * chips some other way (a side panel sliding in beside a table of status chips),
+ * since a move is not something an observer can see.
+ */
+declare function refreshChipEdges(): void;
 interface ChipBaseProps {
     children: ReactNode;
     tone?: ChipTone;
@@ -156,6 +163,23 @@ interface ChipBaseProps {
     id?: string;
     /** A native tooltip. For anything a user must read, prefer the kit's `Tooltip`. */
     title?: string;
+    /**
+     * Even hairlines on fractional-ratio displays (0.18.0). At a device-pixel ratio of
+     * 1.25 — a 125 % Windows display, or 125 % zoom — Chrome draws a chip's two 1px
+     * side borders on different sub-pixel phases, one crisp and one a half-strength
+     * smear that reads as a thinner line (worst on the 60 %-alpha `danger` border).
+     * `snapEdges` widens the chip by under 4px, from where it sits, so the two edges
+     * rasterise as mirror images, and centres its content in the extra.
+     *
+     * Off by default: it reads the chip's position (batched for every snapped chip into
+     * one pass a frame, through one shared observer), and the fix is only as fresh as the
+     * last pass — it re-snaps on render, resize, zoom and ratio change, but not when
+     * something else moves the chip; call {@link refreshChipEdges} then. At an integer
+     * ratio, and at 1.5, it writes nothing. Turn it on for status chips that sit in a
+     * column and are compared side by side; a chip with no visible border (`dot`) has
+     * nothing to snap.
+     */
+    snapEdges?: boolean;
 }
 /**
  * A chip is a link OR a button, never both — so the types say so. Before 0.7.0 both were
@@ -280,4 +304,4 @@ interface ChipInputProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange
  */
 declare function ChipInput({ value, onChange, placeholder, label, ariaLabel, validate, separators, allowDuplicates, max, tone, size, disabled, invalid, error, labels, className, "aria-label": ariaLabelAttr, ...rest }: ChipInputProps): react.JSX.Element;
 
-export { Chip, type ChipHue, ChipInput, type ChipInputLabels, type ChipInputProps, type ChipLinkProps, type ChipProps, type ChipShape, type ChipSize, type ChipTone, type ChipVariant, DEFAULT_CHIP_INPUT_LABELS, resolveChipInputLabels };
+export { Chip, type ChipHue, ChipInput, type ChipInputLabels, type ChipInputProps, type ChipLinkProps, type ChipProps, type ChipShape, type ChipSize, type ChipTone, type ChipVariant, DEFAULT_CHIP_INPUT_LABELS, refreshChipEdges, resolveChipInputLabels };