@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chart.ts"],"sourcesContent":["// `@eifi1/ui-kit/chart` — the chart shell and its colour system.\n//\n// A re-slicing of what the main barrel already exports, not a new API. It exists so a\n// consumer can reach the chart kit WITHOUT the barrel: `import(\"@eifi1/ui-kit/chart\")`\n// is a 31KB chunk, where the same lazy import through the barrel pulls 221KB, because\n// a dynamic import of the barrel cannot be tree-shaken down to one of its members.\n//\n// This is also the only entry point in the package that requires `recharts`.\nexport * from \"./components/chart\";\nexport * from \"./theme/chart-palette\";\n\n// The tile chart (treemap) the apps share — moved here from keksdose so every consumer\n// derives it from the package rather than from a copy.\nexport * from \"./components/treemap\";\n\n// lenkbank's zoomable series chart, its synced x-zoom, the toggle legend and the\n// mirrored-pair axis geometry — moved here so the apps derive them from the package.\nexport * from \"./components/series-chart\";\n// 0.32.1 (keksdose's 0.32 report): the height every chart takes, for an app's wrappers.\nexport type { ChartHeight } from \"./components/chart-height\";\nexport * from \"./components/chart-zoom\";\nexport * from \"./components/toggle-legend\";\nexport * from \"./components/facing-pair\";\nexport * from \"./components/series-chart-labels\";\n\n// The part-to-whole chart (donut / pie) — moved here from kastlan's dashboard and reports.\nexport * from \"./components/pie-chart\";\nexport * from \"./components/pie-chart-labels\";\n"],"mappings":";AAQA,cAAc;AACd,cAAc;AAId,cAAc;AAId,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/chart.ts"],"sourcesContent":["// `@eifi1/ui-kit/chart` — the chart shell and its colour system.\n//\n// A re-slicing of what the main barrel already exports, not a new API. It exists so a\n// consumer can reach the chart kit WITHOUT the barrel: `import(\"@eifi1/ui-kit/chart\")`\n// is a 31KB chunk, where the same lazy import through the barrel pulls 221KB, because\n// a dynamic import of the barrel cannot be tree-shaken down to one of its members.\n//\n// It is about chunk size, not about the peer: `recharts` is a REQUIRED peer (since 0.5.0),\n// because the main barrel re-exports everything here too, so `import { Button } from\n// \"@eifi1/ui-kit\"` reaches recharts as well (packaging-contract.test.ts asserts it).\nexport * from \"./components/chart\";\nexport * from \"./theme/chart-palette\";\n\n// The tile chart (treemap) the apps share — moved here from keksdose so every consumer\n// derives it from the package rather than from a copy.\nexport * from \"./components/treemap\";\n\n// lenkbank's zoomable series chart, its synced x-zoom, the toggle legend and the\n// mirrored-pair axis geometry — moved here so the apps derive them from the package.\nexport * from \"./components/series-chart\";\n// 0.32.1 (keksdose's 0.32 report): the height every chart takes, for an app's wrappers.\nexport type { ChartHeight } from \"./components/chart-height\";\nexport * from \"./components/chart-zoom\";\n// The zoom's own module since 0.34: SharedXZoom and the drag layer (recharts) live here,\n// ./chart-zoom is their public face. Named, so the arithmetic it also holds stays the\n// kit's (refactor audit 2026-10, API-6b) — the same binding the line above re-exports.\nexport { SharedXZoom } from \"./components/chart-zoom-core\";\nexport * from \"./components/toggle-legend\";\nexport * from \"./components/facing-pair\";\nexport * from \"./components/series-chart-labels\";\n\n// The part-to-whole chart (donut / pie) — moved here from kastlan's dashboard and reports.\nexport * from \"./components/pie-chart\";\nexport * from \"./components/pie-chart-labels\";\n"],"mappings":";AAUA,cAAc;AACd,cAAc;AAId,cAAc;AAId,cAAc;AAGd,cAAc;AAId,SAAS,mBAAmB;AAC5B,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;","names":[]}

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

@@ -0,0 +1,10 @@
+export declare const DEFAULT_ACCOUNT_STATE_LABELS: {
+    active: string;
+    inactive: string;
+    invited: string;
+    registered: string;
+    unverified: string;
+    passwordChange: string;
+    deletion: string;
+    deletionOn: (date: string) => string;
+};

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

@@ -0,0 +1,15 @@
+"use client";
+const DEFAULT_ACCOUNT_STATE_LABELS = {
+  active: "Active",
+  inactive: "Inactive",
+  invited: "Invited",
+  registered: "Registered",
+  unverified: "Unverified",
+  passwordChange: "Must change password",
+  deletion: "Deletion requested",
+  deletionOn: (date) => `Deletion on ${date}`
+};
+export {
+  DEFAULT_ACCOUNT_STATE_LABELS
+};
+//# sourceMappingURL=account-chips-labels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/account-chips-labels.ts"],"sourcesContent":["// The English words of ./account-chips, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./account-chips re-exports them.\n\nimport type { AccountStateLabels } from \"./account-chips\";\n\nexport const DEFAULT_ACCOUNT_STATE_LABELS = {\n  active: \"Active\",\n  inactive: \"Inactive\",\n  invited: \"Invited\",\n  registered: \"Registered\",\n  unverified: \"Unverified\",\n  passwordChange: \"Must change password\",\n  deletion: \"Deletion requested\",\n  deletionOn: (date: string) => `Deletion on ${date}`,\n} satisfies Required<AccountStateLabels>;\n"],"mappings":";AAMO,MAAM,+BAA+B;AAAA,EAC1C,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,YAAY,CAAC,SAAiB,eAAe,IAAI;AACnD;","names":[]}

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

@@ -1,21 +1,10 @@
-import * as react from 'react';
-import { ReactElement, ReactNode } from 'react';
-import { LucideIcon } from 'lucide-react';
-import { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from '../lib/format.js';
-import { ChipTone, ChipSize, ChipVariant, ChipShape } from './chip.js';
-import { d as DataTableColumn } from '../data-table-labels-BJ5JE_X2.js';
-import './field-parts.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './write-lock.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-
+import type { ReactElement, ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import type { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from "../lib/format.js";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { ChipShape, ChipSize, ChipTone, ChipVariant } from "./chip.js";
+import type { DataTableColumn } from "./data-table.js";
+import { DEFAULT_ACCOUNT_STATE_LABELS } from "./account-chips-labels.js";
 /**
  * The parts an admin roster repeats (0.18.0) — and only those.
  *
@@ -46,7 +35,7 @@ interface AccountChipLook {
     [key: `data-${string}`]: string | number | boolean | undefined;
 }
 /** How one role is drawn. `label` is the app's, translated. */
-interface RoleDefinition {
+export interface RoleDefinition {
     label: string;
     tone?: ChipTone;
     /** A lucide component or an element — Kurvenschmiede marks its admins with a shield. */
@@ -57,8 +46,8 @@ interface RoleDefinition {
  * 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 {
+export type RoleVocabulary<R extends string = string> = Readonly<Record<R, RoleDefinition>>;
+export 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
@@ -77,7 +66,7 @@ interface RoleChipProps<R extends string = string> extends AccountChipLook {
  * 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;
+export declare function RoleChip<R extends string = string>({ value: role, roles, size, variant, shape, caps, className, ...rest }: RoleChipProps<R>): import("react").JSX.Element | null;
 /**
  * The states both rosters show, each as the app's own flag maps onto it:
  *
@@ -97,7 +86,7 @@ declare function RoleChip<R extends string = string>({ value: role, roles, size,
  * 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" | "deletion";
+export type AccountState = "active" | "inactive" | "invited" | "registered" | "unverified" | "passwordChange" | "deletion";
 /**
  * The `accountState` namespace. One word per state, plus the two forms of `deletion`.
  *
@@ -105,7 +94,7 @@ type AccountState = "active" | "inactive" | "invited" | "registered" | "unverifi
  * (`const L: AccountStateLabels = {…}`): a new required key would be a compile error in
  * each app on its next update. Left out, they fall back to the provider's, then English.
  */
-interface AccountStateLabels extends Record<Exclude<AccountState, "deletion">, string> {
+export interface AccountStateLabels extends Record<Exclude<AccountState, "deletion">, string> {
     /** 0.30.0: an account marked for deletion with no date — kastlan's `operator` mode,
      *  where an operator erases it (§6.4). "Deletion requested". */
     deletion?: string;
@@ -113,21 +102,12 @@ interface AccountStateLabels extends Record<Exclude<AccountState, "deletion">, s
      *  reader's locale — the `after_days` mode. "Deletion on 6 Nov 2026". */
     deletionOn?: (date: string) => string;
 }
-declare const DEFAULT_ACCOUNT_STATE_LABELS: {
-    active: string;
-    inactive: string;
-    invited: string;
-    registered: string;
-    unverified: string;
-    passwordChange: string;
-    deletion: string;
-    deletionOn: (date: string) => string;
-};
+export { DEFAULT_ACCOUNT_STATE_LABELS };
 /** The default tone of each state: green for the normal case, red for switched off
  *  (and for going, `deletion`), 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 {
+export declare const ACCOUNT_STATE_TONES: Readonly<Record<AccountState, ChipTone>>;
+export interface AccountStateChipProps extends AccountChipLook {
     state: AccountState;
     /**
      * 0.30.0, `state="deletion"` only: the day the account will be erased — the row's
@@ -144,14 +124,14 @@ interface AccountStateChipProps extends AccountChipLook {
     /** 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>;
+    labels?: LabelOverride<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, date, locale: localeProp, tone, children, labels: labelsProp, size, variant, shape, caps, className, ...rest }: AccountStateChipProps): react.JSX.Element;
-interface DateMarkProps {
+export declare function AccountStateChip({ state, date, locale: localeProp, tone, children, labels: labelsProp, size, variant, shape, caps, className, ...rest }: AccountStateChipProps): import("react").JSX.Element;
+export interface DateMarkProps {
     value: DateInput;
     /**
      * `"date"` (default): the date in `dateStyle` — "Created". `"relative"`: how long
@@ -191,8 +171,8 @@ interface DateMarkProps {
  * an empty answer, it is `Intl`'s `medium` date as before. The relative display is not
  * a calendar day and keeps `formatRelativeTime`.
  */
-declare function DateMark({ value, display, dateStyle, relative, absolute, empty, locale: localeProp, className, }: DateMarkProps): react.JSX.Element;
-interface DateColumnOptions<T> extends Omit<DateMarkProps, "value" | "className"> {
+export declare function DateMark({ value, display, dateStyle, relative, absolute, empty, locale: localeProp, className, }: DateMarkProps): import("react").JSX.Element;
+export 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. */
@@ -212,6 +192,4 @@ interface DateColumnOptions<T> extends Omit<DateMarkProps, "value" | "className"
  * "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 };
+export declare function dateColumn<T>({ key, header, value, sortable, firstSort, filter, column, ...mark }: DateColumnOptions<T>): DataTableColumn<T>;

package/dist/components/account-chips.js

@@ -5,6 +5,7 @@ import { formatDate, formatRelativeTime, toDate, EMPTY_FORMATTED_VALUE } from ".
 import { useKitDateFormatter, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { toLocalIso } from "../lib/dates.js";
 import { Chip } from "./chip.js";
+import { DEFAULT_ACCOUNT_STATE_LABELS } from "./account-chips-labels.js";
 function RoleChip({
   value: role,
   roles,
@@ -33,16 +34,6 @@ function RoleChip({
     }
   );
 }
-const DEFAULT_ACCOUNT_STATE_LABELS = {
-  active: "Active",
-  inactive: "Inactive",
-  invited: "Invited",
-  registered: "Registered",
-  unverified: "Unverified",
-  passwordChange: "Must change password",
-  deletion: "Deletion requested",
-  deletionOn: (date) => `Deletion on ${date}`
-};
 const ACCOUNT_STATE_TONES = {
   active: "success",
   inactive: "danger",
@@ -107,7 +98,7 @@ function DateMark({
   const fromProvider = useKitDateFormatter();
   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 (!date) return /* @__PURE__ */ jsx("span", { className: cn(cls, "text-muted"), children: empty });
   if (display === "date") {
     const own = dateStyle === void 0 && fromProvider ? fromProvider(toLocalIso(date), { unit: "day", source: "dateMark", locale, weekday: true }) : "";
     return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), className: cls, children: own || formatDate(date, dateStyle ?? "medium", { locale }) });
@@ -128,7 +119,7 @@ function DateMark({
       children: [
         /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap tabular-nums", children: text }),
         absolute === "inline" && " \xB7 ",
-        /* @__PURE__ */ jsx("span", { className: cn("whitespace-nowrap tabular-nums text-[var(--text-muted)]", absolute === "below" && "text-xs"), children: exact })
+        /* @__PURE__ */ jsx("span", { className: cn("whitespace-nowrap tabular-nums text-muted", absolute === "below" && "text-xs"), children: exact })
       ]
     }
   );
@@ -151,11 +142,15 @@ function dateColumn({
     firstSort: sortable ? firstSort : void 0,
     filter: filter ? {
       type: "date",
-      // The filter compares the first ten characters, so hand it an ISO string.
+      // A string goes as it is: the filter reads a timestamp's local day itself.
+      // A Date or epoch value goes as its LOCAL day, the one the cell shows —
+      // `toISOString()` handed over the UTC day, and in Berlin a 00:30 row was
+      // filtered under the day before (round 0.34 BUG-2).
       getValue: (row) => {
         const raw = value(row);
         if (typeof raw === "string") return raw;
-        return toDate(raw)?.toISOString() ?? null;
+        const date = toDate(raw);
+        return date ? toLocalIso(date) : null;
       }
     } : void 0,
     ...column

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

@@ -1 +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 { useKitDateFormatter, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { toLocalIso } from \"../lib/dates\";\nimport { Chip } from \"./chip\";\nimport type { ChipShape, ChipSize, ChipTone, ChipVariant } from \"./chip\";\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 * - `deletion` — 0.30.0: the user asked for the account to be deleted\n *   (docs/user-admin-harmonization.md §2.1, §6.4). It is deactivated at once and erased\n *   on a date (`after_days`: keksdose, Kurvenschmiede) or by an operator (kastlan). The\n *   chip says the date when there is one ({@link AccountStateChipProps.date}), and\n *   \"Deletion requested\" when there is none. It stands IN PLACE of `inactive`: an\n *   account marked for deletion is always deactivated, and two chips would say it twice.\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 =\n  | \"active\"\n  | \"inactive\"\n  | \"invited\"\n  | \"registered\"\n  | \"unverified\"\n  | \"passwordChange\"\n  | \"deletion\";\n\n/**\n * The `accountState` namespace. One word per state, plus the two forms of `deletion`.\n *\n * The 0.30 keys are OPTIONAL, like every key added to a namespace an app annotates\n * (`const L: AccountStateLabels = {…}`): a new required key would be a compile error in\n * each app on its next update. Left out, they fall back to the provider's, then English.\n */\nexport interface AccountStateLabels extends Record<Exclude<AccountState, \"deletion\">, string> {\n  /** 0.30.0: an account marked for deletion with no date — kastlan's `operator` mode,\n   *  where an operator erases it (§6.4). \"Deletion requested\". */\n  deletion?: string;\n  /** 0.30.0: an account that will be erased on `date`, already formatted in the\n   *  reader's locale — the `after_days` mode. \"Deletion on 6 Nov 2026\". */\n  deletionOn?: (date: string) => string;\n}\n\nexport const DEFAULT_ACCOUNT_STATE_LABELS = {\n  active: \"Active\",\n  inactive: \"Inactive\",\n  invited: \"Invited\",\n  registered: \"Registered\",\n  unverified: \"Unverified\",\n  passwordChange: \"Must change password\",\n  deletion: \"Deletion requested\",\n  deletionOn: (date: string) => `Deletion on ${date}`,\n} satisfies Required<AccountStateLabels>;\n\n/** The default tone of each state: green for the normal case, red for switched off\n *  (and for going, `deletion`), amber for something the user still has to do, blue for\n *  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  // Red like `inactive`, which it replaces: the account cannot sign in, and it is going.\n  deletion: \"danger\",\n};\n\nexport interface AccountStateChipProps extends AccountChipLook {\n  state: AccountState;\n  /**\n   * 0.30.0, `state=\"deletion\"` only: the day the account will be erased — the row's\n   * `deletion_scheduled_at` (§3.2, §6.4). Formatted as a date in the reader's locale\n   * (\"Deletion on 6 Nov 2026\"), through the provider's `formatDate` when the app set\n   * one, as {@link DateMark} does. Missing or `null` — an operator erases it, so there\n   * is no date — the chip says \"Deletion requested\". Ignored for every other state.\n   */\n  date?: DateInput;\n  /** Over the provider's locale, for the `deletion` date. */\n  locale?: string;\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  date,\n  locale: localeProp,\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  const locale = useKitLocale(localeProp);\n  const fromProvider = useKitDateFormatter();\n  const when = state === \"deletion\" ? toDate(date ?? null) : null;\n  let text: ReactNode;\n  if (state !== \"deletion\") text = labels[state];\n  else if (when) {\n    // A date in a SENTENCE, so no weekday (keksdose's rule, KitDateFormatContext).\n    const day =\n      (fromProvider && fromProvider(toLocalIso(when), { unit: \"day\", source: \"dateMark\", locale, weekday: false })) ||\n      formatDate(when, \"medium\", { locale });\n    text = (labels.deletionOn ?? DEFAULT_ACCOUNT_STATE_LABELS.deletionOn)(day);\n  } else text = labels.deletion ?? DEFAULT_ACCOUNT_STATE_LABELS.deletion;\n  return (\n    <Chip\n      {...rest}\n      data-state={state}\n      data-date={when ? toLocalIso(when) : undefined}\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 ?? text}\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 beside it (keksdose's last-seen column; see `absolute`).\n   */\n  display?: \"date\" | \"relative\";\n  /**\n   * Where a `\"relative\"` mark puts the exact date and time (0.32,\n   * docs/text-size-harmonization.md §4: \"relative dates show the absolute one beside\n   * them\", at every size — a touch screen never opens the tooltip it used to live in):\n   * `\"below\"` (default), a muted second line under the words, so a table column keeps\n   * its width; `\"inline\"`, after them on the same line, for a sentence or a wide cell.\n   */\n  absolute?: \"below\" | \"inline\";\n  /** Default `medium`. Under `\"relative\"`, the style of the exact date beside it (default\n   *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. Given, it wins\n   *  over the provider's `formatDate`. */\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 *\n * `display=\"date\"` without a `dateStyle` is written by `<UiKitProvider formatDate>` when\n * the app set one (keksdose K12: its `DateCell` exists to put every column's date in the\n * app's date-format preference, weekday and all — dev#546), called with the LOCAL\n * calendar day of the value as `\"YYYY-MM-DD\"` and `weekday: true`. Without one, or for\n * an empty answer, it is `Intl`'s `medium` date as before. The relative display is not\n * a calendar day and keeps `formatRelativeTime`.\n */\nexport function DateMark({\n  value,\n  display = \"date\",\n  dateStyle,\n  relative,\n  absolute = \"below\",\n  empty = EMPTY_FORMATTED_VALUE,\n  locale: localeProp,\n  className,\n}: DateMarkProps) {\n  const locale = useKitLocale(localeProp);\n  const fromProvider = useKitDateFormatter();\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    const own =\n      dateStyle === undefined && fromProvider\n        ? fromProvider(toLocalIso(date), { unit: \"day\", source: \"dateMark\", locale, weekday: true })\n        : \"\";\n    return (\n      <time dateTime={date.toISOString()} className={cls}>\n        {own || formatDate(date, dateStyle ?? \"medium\", { locale })}\n      </time>\n    );\n  }\n  const text = formatRelativeTime(date, { ...relative, locale, absoluteStyle: dateStyle ?? \"medium\" });\n  const exact = formatDate(date, dateStyle ?? \"dateTime\", { locale });\n  // Past `absoluteAfterDays` the relative words already ARE the date; then the exact\n  // line alone, rather than the same day twice.\n  const sameDay = text === formatDate(date, dateStyle ?? \"medium\", { locale });\n  const iso = date.toISOString();\n  if (sameDay) {\n    return (\n      <time dateTime={iso} className={cls}>\n        {exact}\n      </time>\n    );\n  }\n  // The exact date and time in the layout, never only in a tooltip (§4). Still no tab\n  // stop: a roster of fifty rows would be fifty more of them.\n  return (\n    <time\n      dateTime={iso}\n      data-slot=\"date-mark\"\n      className={cn(absolute === \"below\" ? \"inline-flex flex-col leading-tight\" : \"inline\", className)}\n    >\n      <span className=\"whitespace-nowrap tabular-nums\">{text}</span>\n      {absolute === \"inline\" && \" · \"}\n      <span className={cn(\"whitespace-nowrap tabular-nums text-[var(--text-muted)]\", absolute === \"below\" && \"text-xs\")}>\n        {exact}\n      </span>\n    </time>\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":"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","names":[]}
+{"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 { useKitDateFormatter, useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { toLocalIso } from \"../lib/dates\";\nimport { Chip } from \"./chip\";\nimport type { ChipShape, ChipSize, ChipTone, ChipVariant } from \"./chip\";\nimport type { DataTableColumn } from \"./data-table\";\nimport { DEFAULT_ACCOUNT_STATE_LABELS } from \"./account-chips-labels\";\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 * - `deletion` — 0.30.0: the user asked for the account to be deleted\n *   (docs/user-admin-harmonization.md §2.1, §6.4). It is deactivated at once and erased\n *   on a date (`after_days`: keksdose, Kurvenschmiede) or by an operator (kastlan). The\n *   chip says the date when there is one ({@link AccountStateChipProps.date}), and\n *   \"Deletion requested\" when there is none. It stands IN PLACE of `inactive`: an\n *   account marked for deletion is always deactivated, and two chips would say it twice.\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 =\n  | \"active\"\n  | \"inactive\"\n  | \"invited\"\n  | \"registered\"\n  | \"unverified\"\n  | \"passwordChange\"\n  | \"deletion\";\n\n/**\n * The `accountState` namespace. One word per state, plus the two forms of `deletion`.\n *\n * The 0.30 keys are OPTIONAL, like every key added to a namespace an app annotates\n * (`const L: AccountStateLabels = {…}`): a new required key would be a compile error in\n * each app on its next update. Left out, they fall back to the provider's, then English.\n */\nexport interface AccountStateLabels extends Record<Exclude<AccountState, \"deletion\">, string> {\n  /** 0.30.0: an account marked for deletion with no date — kastlan's `operator` mode,\n   *  where an operator erases it (§6.4). \"Deletion requested\". */\n  deletion?: string;\n  /** 0.30.0: an account that will be erased on `date`, already formatted in the\n   *  reader's locale — the `after_days` mode. \"Deletion on 6 Nov 2026\". */\n  deletionOn?: (date: string) => string;\n}\n\n// Defined in ./account-chips-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_ACCOUNT_STATE_LABELS };\n\n/** The default tone of each state: green for the normal case, red for switched off\n *  (and for going, `deletion`), amber for something the user still has to do, blue for\n *  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  // Red like `inactive`, which it replaces: the account cannot sign in, and it is going.\n  deletion: \"danger\",\n};\n\nexport interface AccountStateChipProps extends AccountChipLook {\n  state: AccountState;\n  /**\n   * 0.30.0, `state=\"deletion\"` only: the day the account will be erased — the row's\n   * `deletion_scheduled_at` (§3.2, §6.4). Formatted as a date in the reader's locale\n   * (\"Deletion on 6 Nov 2026\"), through the provider's `formatDate` when the app set\n   * one, as {@link DateMark} does. Missing or `null` — an operator erases it, so there\n   * is no date — the chip says \"Deletion requested\". Ignored for every other state.\n   */\n  date?: DateInput;\n  /** Over the provider's locale, for the `deletion` date. */\n  locale?: string;\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?: LabelOverride<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  date,\n  locale: localeProp,\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  const locale = useKitLocale(localeProp);\n  const fromProvider = useKitDateFormatter();\n  const when = state === \"deletion\" ? toDate(date ?? null) : null;\n  let text: ReactNode;\n  if (state !== \"deletion\") text = labels[state];\n  else if (when) {\n    // A date in a SENTENCE, so no weekday (keksdose's rule, KitDateFormatContext).\n    const day =\n      (fromProvider && fromProvider(toLocalIso(when), { unit: \"day\", source: \"dateMark\", locale, weekday: false })) ||\n      formatDate(when, \"medium\", { locale });\n    text = (labels.deletionOn ?? DEFAULT_ACCOUNT_STATE_LABELS.deletionOn)(day);\n  } else text = labels.deletion ?? DEFAULT_ACCOUNT_STATE_LABELS.deletion;\n  return (\n    <Chip\n      {...rest}\n      data-state={state}\n      data-date={when ? toLocalIso(when) : undefined}\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 ?? text}\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 beside it (keksdose's last-seen column; see `absolute`).\n   */\n  display?: \"date\" | \"relative\";\n  /**\n   * Where a `\"relative\"` mark puts the exact date and time (0.32,\n   * docs/text-size-harmonization.md §4: \"relative dates show the absolute one beside\n   * them\", at every size — a touch screen never opens the tooltip it used to live in):\n   * `\"below\"` (default), a muted second line under the words, so a table column keeps\n   * its width; `\"inline\"`, after them on the same line, for a sentence or a wide cell.\n   */\n  absolute?: \"below\" | \"inline\";\n  /** Default `medium`. Under `\"relative\"`, the style of the exact date beside it (default\n   *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. Given, it wins\n   *  over the provider's `formatDate`. */\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 *\n * `display=\"date\"` without a `dateStyle` is written by `<UiKitProvider formatDate>` when\n * the app set one (keksdose K12: its `DateCell` exists to put every column's date in the\n * app's date-format preference, weekday and all — dev#546), called with the LOCAL\n * calendar day of the value as `\"YYYY-MM-DD\"` and `weekday: true`. Without one, or for\n * an empty answer, it is `Intl`'s `medium` date as before. The relative display is not\n * a calendar day and keeps `formatRelativeTime`.\n */\nexport function DateMark({\n  value,\n  display = \"date\",\n  dateStyle,\n  relative,\n  absolute = \"below\",\n  empty = EMPTY_FORMATTED_VALUE,\n  locale: localeProp,\n  className,\n}: DateMarkProps) {\n  const locale = useKitLocale(localeProp);\n  const fromProvider = useKitDateFormatter();\n  const date = toDate(value);\n  const cls = cn(\"whitespace-nowrap tabular-nums\", className);\n  if (!date) return <span className={cn(cls, \"text-muted\")}>{empty}</span>;\n  if (display === \"date\") {\n    const own =\n      dateStyle === undefined && fromProvider\n        ? fromProvider(toLocalIso(date), { unit: \"day\", source: \"dateMark\", locale, weekday: true })\n        : \"\";\n    return (\n      <time dateTime={date.toISOString()} className={cls}>\n        {own || formatDate(date, dateStyle ?? \"medium\", { locale })}\n      </time>\n    );\n  }\n  const text = formatRelativeTime(date, { ...relative, locale, absoluteStyle: dateStyle ?? \"medium\" });\n  const exact = formatDate(date, dateStyle ?? \"dateTime\", { locale });\n  // Past `absoluteAfterDays` the relative words already ARE the date; then the exact\n  // line alone, rather than the same day twice.\n  const sameDay = text === formatDate(date, dateStyle ?? \"medium\", { locale });\n  const iso = date.toISOString();\n  if (sameDay) {\n    return (\n      <time dateTime={iso} className={cls}>\n        {exact}\n      </time>\n    );\n  }\n  // The exact date and time in the layout, never only in a tooltip (§4). Still no tab\n  // stop: a roster of fifty rows would be fifty more of them.\n  return (\n    <time\n      dateTime={iso}\n      data-slot=\"date-mark\"\n      className={cn(absolute === \"below\" ? \"inline-flex flex-col leading-tight\" : \"inline\", className)}\n    >\n      <span className=\"whitespace-nowrap tabular-nums\">{text}</span>\n      {absolute === \"inline\" && \" · \"}\n      <span className={cn(\"whitespace-nowrap tabular-nums text-muted\", absolute === \"below\" && \"text-xs\")}>\n        {exact}\n      </span>\n    </time>\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          // A string goes as it is: the filter reads a timestamp's local day itself.\n          // A Date or epoch value goes as its LOCAL day, the one the cell shows —\n          // `toISOString()` handed over the UTC day, and in Berlin a 00:30 row was\n          // filtered under the day before (round 0.34 BUG-2).\n          getValue: (row) => {\n            const raw = value(row);\n            if (typeof raw === \"string\") return raw;\n            const date = toDate(raw);\n            return date ? toLocalIso(date) : null;\n          },\n        }\n      : undefined,\n    ...column,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/components/alert-banner.d.ts

@@ -1,19 +1,17 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, MouseEvent } from 'react';
-
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from "react";
 /** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's
  *  preview and beta-performance banners, which borrowed `warning` for want of it and
  *  so told every user of the preview build that something was wrong. */
-type AlertTone = "danger" | "warning" | "info" | "success" | "neutral";
+export type AlertTone = "danger" | "warning" | "info" | "success" | "neutral";
 /** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total
  *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand
  *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two
  *  key states, goal-form). At body size those read as a second heading. */
-type AlertSize = "sm" | "md";
+export type AlertSize = "sm" | "md";
 /** The tone's border + surface on their own — for a caller that already has a box
  * with its own radius and padding (e.g. a Card). Remember to shave 1px off that
  * padding for the colored tones, whose border is 2px wide. */
-declare function toneFrameClass(tone: AlertTone): string;
+export declare function toneFrameClass(tone: AlertTone): string;
 /** Single source for the warning-callout frame (feedback #277): the tone's border
  * and surface plus this component's own radius and padding, the latter
  * compensating the 2px colored border so toggling tones never shifts layout.
@@ -22,7 +20,7 @@ declare function toneFrameClass(tone: AlertTone): string;
  * (0.32, docs/text-size-harmonization.md §3.2): the padding grows with the text size,
  * the 1px it gives back to the border does not — an 11 px padding stopped matching `p-3`
  * at 125 %, and toggling the tone shifted the layout again. */
-declare function alertFrameClass(tone: AlertTone, size?: AlertSize): string;
+export declare function alertFrameClass(tone: AlertTone, size?: AlertSize): string;
 interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "onClick"> {
     /** Default `danger`. `info` for news, `neutral` for a plain note — see
      *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */
@@ -100,6 +98,13 @@ interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "on
      *  {@link UiKitProvider}, else "Dismiss". */
     dismissLabel?: string;
     children: ReactNode;
+    /**
+     * The banner's frame — where the rest of the props go (0.34, API-2, refactor audit
+     * 2026-10). Which element that is depends on the mode: the `<div>`; with `href` or
+     * `onClick` the `<a>` or `<button>` that IS the row; with an × or an `action` beside
+     * that row, the `<div>` holding the two. Hence `HTMLElement`.
+     */
+    ref?: Ref<HTMLElement>;
 }
 /**
  * The whole-row modes. keksdose's budget-summary card is a banner you tap to open
@@ -113,7 +118,7 @@ interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "on
  * button, stretched over the whole frame, and the × on top of it. It still looks and
  * clicks like one banner with an × in its corner, and the two are separate tab stops.
  */
-type AlertBannerProps = AlertBannerBaseProps & ({
+export type AlertBannerProps = AlertBannerBaseProps & ({
     /** Makes the whole banner one link. Mutually exclusive with `onClick`. */
     href?: string;
     onClick?: never;
@@ -125,6 +130,5 @@ type AlertBannerProps = AlertBannerBaseProps & ({
 });
 /** Warning/danger/info callout box with the shared frame and an icon — or, with
  *  `variant="inline"`, the same message as a frameless line of toned text. */
-declare function AlertBanner({ tone, variant, size, block, live, elevated, action, icon, onDismiss, dismissLabel, href, onClick, className, children, role, ...rest }: AlertBannerProps): react.JSX.Element;
-
-export { AlertBanner, type AlertBannerProps, type AlertSize, type AlertTone, alertFrameClass, toneFrameClass };
+export declare function AlertBanner({ tone, variant, size, block, live, elevated, action, icon, onDismiss, dismissLabel, href, onClick, className, children, role, ref, ...rest }: AlertBannerProps): import("react").JSX.Element;
+export {};

package/dist/components/alert-banner.js

@@ -5,11 +5,11 @@ import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 const TONE_FRAME = {
-  danger: "border-2 border-[var(--danger-border-strong)] bg-[var(--danger-bg)]",
-  warning: "border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]",
-  info: "border-2 border-[var(--info-border)] bg-[var(--info-bg)]",
-  success: "border-2 border-[var(--success-border)] bg-[var(--success-bg)]",
-  neutral: "border border-[var(--border)]"
+  danger: "border-2 border-danger-strong bg-danger-soft",
+  warning: "border-2 border-warning bg-warning-soft",
+  info: "border-2 border-info bg-info-soft",
+  success: "border-2 border-success bg-success-soft",
+  neutral: "border border-subtle"
 };
 const TONE_ELEVATED = {
   danger: "bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]",
@@ -18,7 +18,7 @@ const TONE_ELEVATED = {
   success: "bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]",
   neutral: ""
 };
-const ELEVATED = "bg-[var(--bg-surface)] shadow-lg";
+const ELEVATED = "bg-surface shadow-lg";
 function toneFrameClass(tone) {
   return TONE_FRAME[tone];
 }
@@ -34,18 +34,18 @@ function stripFrameClass(tone, size) {
   );
 }
 const TONE_TEXT = {
-  danger: "text-[var(--danger)]",
-  warning: "text-[var(--warning)]",
-  info: "text-[var(--info)]",
-  success: "text-[var(--success)]",
-  neutral: "text-[var(--text-secondary)]"
+  danger: "text-danger",
+  warning: "text-warning",
+  info: "text-info",
+  success: "text-success",
+  neutral: "text-secondary"
 };
 const TONE_ICON = {
-  danger: "text-[var(--danger)]",
-  warning: "text-[var(--warning)]",
-  info: "text-[var(--info)]",
-  success: "text-[var(--success)]",
-  neutral: "text-[var(--text-muted)]"
+  danger: "text-danger",
+  warning: "text-warning",
+  info: "text-info",
+  success: "text-success",
+  neutral: "text-muted"
 };
 const TONE_GLYPH = {
   danger: AlertTriangle,
@@ -70,6 +70,7 @@ function AlertBanner({
   className,
   children,
   role,
+  ref,
   ...rest
 }) {
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });
@@ -100,7 +101,7 @@ function AlertBanner({
     strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),
     elevated && cn(ELEVATED, TONE_ELEVATED[tone])
   );
-  const focusRing = cn(FOCUS_RING, "focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]");
+  const focusRing = cn(FOCUS_RING, "focus-visible:ring-offset-1 focus-visible:ring-offset-surface");
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     glyph,
     /* @__PURE__ */ jsx("span", { className: cn(!inlineRow && (nested ? "flex-1" : grow), "min-w-0 text-start"), children }),
@@ -148,7 +149,9 @@ function AlertBanner({
     return /* @__PURE__ */ jsxs(
       "div",
       {
+        "data-tone": tone,
         ...rest,
+        ref,
         role: resolvedRole,
         className: cn(row, frame, TONE_TEXT[tone], className),
         children: [
@@ -168,13 +171,16 @@ function AlertBanner({
     inlineRow || strip ? "items-center" : "items-start",
     "outline-none after:absolute after:inset-0 after:content-['']",
     strip ? "after:rounded-none" : "after:rounded-md",
-    "focus-visible:after:ring-[length:var(--focus-ring-width)] focus-visible:after:ring-[var(--brand)]"
+    "focus-visible:after:ring-focus focus-visible:after:ring-brand"
   ) : cn(row, !inlineRow && "w-full", frame, TONE_TEXT[tone], hover, focusRing, className);
   const actionRest = split ? {} : rest;
+  const rowRef = split ? void 0 : ref;
   const rowAction = href !== void 0 ? /* @__PURE__ */ jsx(
     "a",
     {
+      "data-tone": split ? void 0 : tone,
       ...actionRest,
+      ref: rowRef,
       href,
       className: actionClass,
       children: content
@@ -182,7 +188,9 @@ function AlertBanner({
   ) : /* @__PURE__ */ jsx(
     "button",
     {
+      "data-tone": split ? void 0 : tone,
       ...actionRest,
+      ref: rowRef,
       type: "button",
       onClick,
       className: actionClass,
@@ -193,7 +201,9 @@ function AlertBanner({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-tone": tone,
       ...rest,
+      ref,
       role: resolvedRole,
       className: cn("relative", row, frame, TONE_TEXT[tone], hover, className),
       children: [