@eifi1/ui-kit 0.31.1 → 0.32.1

package/dist/billing/subscription-status-chip.d.ts

@@ -0,0 +1,149 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { fb as SubscriptionStatus, e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-FLyJf-kZ.js';
+import { ChipTone, ChipSize, ChipVariant, ChipShape } from '../components/chip.js';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-kpAAVi6g.js';
+import '../components/data-table-sort.js';
+import '../components/swipeable-row.js';
+import '../components/mini-calendar.js';
+import '../components/calendar-heatmap.js';
+import '../components/popover.js';
+import '../hooks/use-breakpoint.js';
+import '../components/field-sync.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import '../components/month-picker.js';
+import '../components/page-contents.js';
+import '../components/series-chart-labels.js';
+import '../components/pie-chart-labels.js';
+import '../components/sparkline.js';
+import '../components/stat-tile.js';
+import '../components/signature-pad.js';
+import '../components/password-strength.js';
+import '../components/swatch-picker.js';
+import '../components/tile-radio.js';
+import '../components/icon-picker.js';
+import '../components/dialog-frame.js';
+import '../components/modal.js';
+import '../hooks/use-search-param-state.js';
+import '../components/measured-grid.js';
+import 'lucide-react';
+import '../components/user-avatar.js';
+import '../lib/person-name.js';
+import '../components/status-dot.js';
+import '../components/progress-bar.js';
+import '../components/signed-amount.js';
+import '../components/field-parts.js';
+import '../shell/topbar-action-menu.js';
+import '../components/menu-item.js';
+import '../components/floating-panel.js';
+import '../hooks/use-authed-src.js';
+import '../components/account-settings-labels.js';
+import '../components/bulk-action-bar.js';
+import '../components/list.js';
+import '../components/breadcrumbs.js';
+import '../components/toast.js';
+import '../components/description-list.js';
+import '../components/line-items.js';
+import '../components/error-boundary.js';
+import '../components/authed-image.js';
+import '../components/image-grid.js';
+import '../components/lightbox.js';
+import '../components/write-lock.js';
+import '../auth/sign-in-form.js';
+import '../landing/access.js';
+import '../landing/landing-labels.js';
+import '../shell/topbar-controls.js';
+import '../theme/palette-presets.js';
+import '../theme/chart-palette.js';
+import '../theme/theme-store.js';
+import 'zustand/middleware';
+import 'zustand';
+import '../auth/complete-name-dialog.js';
+import '../auth/forgot-password-form.js';
+import '../auth/status-parts.js';
+import '../auth/reset-password-form.js';
+import '../auth/verify-email.js';
+import '../auth/not-found-page.js';
+import '../auth/accept-invitation.js';
+import '../shell/company-switcher.js';
+import '../account/email-change-setting.js';
+import '../account/sessions-setting.js';
+import '../lib/format.js';
+import '../account/data-export-setting.js';
+import '../components/account-chips.js';
+import '../admin/admin-parts.js';
+import '../admin/admin-action-log.js';
+import '../settings/settings-labels.js';
+import '../demo/demo-labels.js';
+import '../components/appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
+import '../components/reauth-dialog.js';
+import '../components/server-wake.js';
+import '../lib/server-wake.js';
+import '../components/translation-review-labels.js';
+import '../lib/translation-review.js';
+import '../components/country-select.js';
+import '../components/inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import '../components/sign-chip.js';
+import '../components/column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import '../components/focus-ring.js';
+
+/**
+ * The tone of each status (docs/billing-harmonization.md §3.2, §3.3). The tone follows
+ * the STANDING, so a roster reads at a glance who can write:
+ *
+ * - `active` green: paid, in good standing;
+ * - `trialing` blue (info): in good standing until `trial_ends_at`, nothing wrong;
+ * - `past_due` amber: a payment failed, still in good standing while the provider retries;
+ * - `expired` red: out of good standing — read-only until a plan is chosen;
+ * - `canceled` grey: the payer's own choice, nothing to warn about;
+ * - `comped` purple, a hue rather than a tone: free by grant — neither paid nor in trouble,
+ *   only different from both.
+ */
+declare const SUBSCRIPTION_STATUS_TONES: Readonly<Record<SubscriptionStatus, ChipTone>>;
+interface SubscriptionStatusChipProps {
+    /**
+     * The row's `status` as the API sends it (§3.2). A value the kit does not know yet is
+     * shown as itself, in `neutral` — an unknown status is still a fact an operator should
+     * see. `null` / `undefined` renders nothing.
+     */
+    status: SubscriptionStatus | (string & {}) | null | undefined;
+    /** Over {@link SUBSCRIPTION_STATUS_TONES}. */
+    tone?: ChipTone;
+    /** Over the status's word, for an app whose word is its own. */
+    children?: ReactNode;
+    /** Default `sm` (a roster's `extra` column, §6). */
+    size?: ChipSize;
+    /** Default `soft`. */
+    variant?: ChipVariant;
+    /** Default `square`, the status tag of `AccountStateChip`. */
+    shape?: ChipShape;
+    /** Default true, as `AccountStateChip`. */
+    caps?: boolean;
+    className?: string;
+    /** Prop > `<UiKitProvider labels={{ billing: { status } }}>` > English. */
+    labels?: LabelOverride<BillingLabels>;
+    [key: `data-${string}`]: string | number | boolean | undefined;
+}
+/**
+ * A subscription's status as a chip, in the kit's words and tones (§6: the operator's
+ * roster shows the plan and the standing; §7: the subscription page). ALWAYS A WORD, never
+ * colour alone: "Trial", "Active", "Payment overdue", "Cancelled", "Expired",
+ * "Complimentary" — the tone repeats what the word says. Carries `data-status` with the
+ * key, for a test or a style hook.
+ */
+declare function SubscriptionStatusChip({ status, tone, children, size, variant, shape, caps, className, labels: labelsProp, ...rest }: SubscriptionStatusChipProps): react.JSX.Element | null;
+
+export { SUBSCRIPTION_STATUS_TONES, SubscriptionStatusChip, type SubscriptionStatusChipProps };

package/dist/billing/subscription-status-chip.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Chip } from "../components/chip.js";
+import { useBillingLabels } from "./billing-labels.js";
+const SUBSCRIPTION_STATUS_TONES = Object.freeze({
+  trialing: "info",
+  active: "success",
+  past_due: "warning",
+  canceled: "neutral",
+  expired: "danger",
+  comped: "purple"
+});
+const isKnown = (value) => Object.prototype.hasOwnProperty.call(SUBSCRIPTION_STATUS_TONES, value);
+function SubscriptionStatusChip({
+  status,
+  tone,
+  children,
+  size = "sm",
+  variant,
+  shape = "square",
+  caps = true,
+  className,
+  labels: labelsProp,
+  ...rest
+}) {
+  const labels = useBillingLabels(labelsProp);
+  if (status === null || status === void 0 || status === "") return null;
+  const known = isKnown(status);
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      ...rest,
+      "data-status": status,
+      tone: tone ?? (known ? SUBSCRIPTION_STATUS_TONES[status] : "neutral"),
+      size,
+      variant,
+      shape,
+      caps,
+      className,
+      children: children ?? (known ? labels.status[status] : status)
+    }
+  );
+}
+export {
+  SUBSCRIPTION_STATUS_TONES,
+  SubscriptionStatusChip
+};
+//# sourceMappingURL=subscription-status-chip.js.map

package/dist/billing/subscription-status-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/billing/subscription-status-chip.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { Chip } from \"../components/chip\";\nimport type { ChipShape, ChipSize, ChipTone, ChipVariant } from \"../components/chip\";\nimport { useBillingLabels } from \"./billing-labels\";\nimport type { BillingLabels, SubscriptionStatus } from \"./billing-labels\";\n\n/**\n * The tone of each status (docs/billing-harmonization.md §3.2, §3.3). The tone follows\n * the STANDING, so a roster reads at a glance who can write:\n *\n * - `active` green: paid, in good standing;\n * - `trialing` blue (info): in good standing until `trial_ends_at`, nothing wrong;\n * - `past_due` amber: a payment failed, still in good standing while the provider retries;\n * - `expired` red: out of good standing — read-only until a plan is chosen;\n * - `canceled` grey: the payer's own choice, nothing to warn about;\n * - `comped` purple, a hue rather than a tone: free by grant — neither paid nor in trouble,\n *   only different from both.\n */\nexport const SUBSCRIPTION_STATUS_TONES: Readonly<Record<SubscriptionStatus, ChipTone>> = Object.freeze({\n  trialing: \"info\",\n  active: \"success\",\n  past_due: \"warning\",\n  canceled: \"neutral\",\n  expired: \"danger\",\n  comped: \"purple\",\n});\n\nexport interface SubscriptionStatusChipProps {\n  /**\n   * The row's `status` as the API sends it (§3.2). A value the kit does not know yet is\n   * shown as itself, in `neutral` — an unknown status is still a fact an operator should\n   * see. `null` / `undefined` renders nothing.\n   */\n  status: SubscriptionStatus | (string & {}) | null | undefined;\n  /** Over {@link SUBSCRIPTION_STATUS_TONES}. */\n  tone?: ChipTone;\n  /** Over the status's word, for an app whose word is its own. */\n  children?: ReactNode;\n  /** Default `sm` (a roster's `extra` column, §6). */\n  size?: ChipSize;\n  /** Default `soft`. */\n  variant?: ChipVariant;\n  /** Default `square`, the status tag of `AccountStateChip`. */\n  shape?: ChipShape;\n  /** Default true, as `AccountStateChip`. */\n  caps?: boolean;\n  className?: string;\n  /** Prop > `<UiKitProvider labels={{ billing: { status } }}>` > English. */\n  labels?: LabelOverride<BillingLabels>;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\n// Own keys only: `\"toString\" in {}` is true.\nconst isKnown = (value: string): value is SubscriptionStatus =>\n  Object.prototype.hasOwnProperty.call(SUBSCRIPTION_STATUS_TONES, value);\n\n/**\n * A subscription's status as a chip, in the kit's words and tones (§6: the operator's\n * roster shows the plan and the standing; §7: the subscription page). ALWAYS A WORD, never\n * colour alone: \"Trial\", \"Active\", \"Payment overdue\", \"Cancelled\", \"Expired\",\n * \"Complimentary\" — the tone repeats what the word says. Carries `data-status` with the\n * key, for a test or a style hook.\n */\nexport function SubscriptionStatusChip({\n  status,\n  tone,\n  children,\n  size = \"sm\",\n  variant,\n  shape = \"square\",\n  caps = true,\n  className,\n  labels: labelsProp,\n  ...rest\n}: SubscriptionStatusChipProps) {\n  const labels = useBillingLabels(labelsProp);\n  if (status === null || status === undefined || status === \"\") return null;\n  const known = isKnown(status);\n  return (\n    <Chip\n      {...rest}\n      data-status={status}\n      tone={tone ?? (known ? SUBSCRIPTION_STATUS_TONES[status] : \"neutral\")}\n      size={size}\n      variant={variant}\n      shape={shape}\n      caps={caps}\n      className={className}\n    >\n      {children ?? (known ? labels.status[status] : status)}\n    </Chip>\n  );\n}\n"],"mappings":";AAiFI;AA9EJ,SAAS,YAAY;AAErB,SAAS,wBAAwB;AAe1B,MAAM,4BAA4E,OAAO,OAAO;AAAA,EACrG,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AACV,CAAC;AA4BD,MAAM,UAAU,CAAC,UACf,OAAO,UAAU,eAAe,KAAK,2BAA2B,KAAK;AAShE,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAgC;AAC9B,QAAM,SAAS,iBAAiB,UAAU;AAC1C,MAAI,WAAW,QAAQ,WAAW,UAAa,WAAW,GAAI,QAAO;AACrE,QAAM,QAAQ,QAAQ,MAAM;AAC5B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAa;AAAA,MACb,MAAM,SAAS,QAAQ,0BAA0B,MAAM,IAAI;AAAA,MAC3D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,uBAAa,QAAQ,OAAO,OAAO,MAAM,IAAI;AAAA;AAAA,EAChD;AAEJ;","names":[]}

package/dist/chart.d.ts

@@ -2,6 +2,7 @@ export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartSeri
 export { CHART_COLORS, HEATMAP_HEX, HeatStops, PALETTE_HEX, lerpHex, paletteFor, textOn } from './theme/chart-palette.js';
 export { Treemap, TreemapCell, TreemapCellProps, TreemapNode, TreemapProps, fitLabel } from './components/treemap.js';
 export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, SeriesChartAxis, SeriesChartHit, SeriesChartMarker, SeriesChartPoint, SeriesChartProps, SeriesChartReference, SeriesChartRow, SeriesChartSeries, SeriesChartSpan, SeriesChartTickValues, SeriesChartTone, SeriesChartTooltip, SeriesChartTooltipPlacement, SeriesChartType, SeriesChartX, SeriesChartXTick, SeriesChartXValue, SeriesLegendAxes, SeriesSource, StaticSeriesChart, anchoredBand, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, resolveTooltipPlacement, seriesKey, seriesLegendEntries, soleSeriesColor, visibleSeries } from './components/series-chart.js';
+export { ChartHeight } from './components/chart-height.js';
 export { DEFAULT_Y_AXIS, NO_ZOOM, SharedXZoom, ZOOM_MIN_DRAG, ZOOM_SQUARE_ENOUGH, ZoomAxes, ZoomAxesSetting, ZoomBinding, ZoomDrag, ZoomFitSeries, ZoomFitSource, ZoomRow, ZoomSelection, ZoomState, ZoomTarget, axisExtent, defaultZoomAxes, fitXToY, fitYToX, selectionFromDrag, withChartZoom, zoomAfter, zoomAxesFor, zoomDomains } from './components/chart-zoom.js';
 export { LegendColumn, LegendEntry, LegendGroup, STEP_DASH, STROKE_PATTERNS, StaticLegend, StaticLegendProps, ToggleLegend, ToggleLegendProps, strokeDash, toggleHidden } from './components/toggle-legend.js';
 export { FACING_SIDES, FacingSide, facingAxes, facingBand, facingHeadingPad } from './components/facing-pair.js';
@@ -13,18 +14,20 @@ export { TimeTickUnit } from './components/series-chart-ticks.js';
 import 'recharts';
 import 'react';
 import './lib/direction.js';
-import './delete-account-setting-CpIhzxxZ.js';
+import './delete-account-setting-FLyJf-kZ.js';
 import './components/tooltip.js';
 import './hooks/use-anchored-rect.js';
 import './lib/clipping.js';
-import './data-table-labels-DUELeXpa.js';
+import './data-table-labels-kpAAVi6g.js';
 import './components/data-table-sort.js';
 import './components/swipeable-row.js';
 import './components/mini-calendar.js';
 import './components/calendar-heatmap.js';
 import './components/popover.js';
+import './hooks/use-breakpoint.js';
 import './components/chip.js';
 import 'lucide-react';
+import './components/field-parts.js';
 import './components/field-sync.js';
 import './wizard/types.js';
 import './tour/tour.js';
@@ -90,6 +93,9 @@ import './admin/admin-parts.js';
 import './admin/admin-action-log.js';
 import './settings/settings-labels.js';
 import './demo/demo-labels.js';
+import './components/appearance-labels.js';
+import './theme/contrast.js';
+import './theme/text-size.js';
 import './components/reauth-dialog.js';
 import './components/server-wake.js';
 import './lib/server-wake.js';
@@ -103,4 +109,4 @@ import './components/sign-chip.js';
 import './components/column-mapper.js';
 import './lib/column-mapping.js';
 import './lib/table-text.js';
-import './components/field-parts.js';
+import './components/focus-ring.js';

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\";\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;AACd,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// 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":[]}

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

@@ -3,7 +3,11 @@ 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-DUELeXpa.js';
+import { d as DataTableColumn } from '../data-table-labels-kpAAVi6g.js';
+import './field-parts.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
 
@@ -147,10 +151,18 @@ interface DateMarkProps {
     /**
      * `"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).
+     * time beside it (keksdose's last-seen column; see `absolute`).
      */
     display?: "date" | "relative";
-    /** Default `medium`. Under `"relative"`, the style of the tooltip's date (default
+    /**
+     * Where a `"relative"` mark puts the exact date and time (0.32,
+     * docs/text-size-harmonization.md §4: "relative dates show the absolute one beside
+     * them", at every size — a touch screen never opens the tooltip it used to live in):
+     * `"below"` (default), a muted second line under the words, so a table column keeps
+     * its width; `"inline"`, after them on the same line, for a sentence or a wide cell.
+     */
+    absolute?: "below" | "inline";
+    /** Default `medium`. Under `"relative"`, the style of the exact date beside it (default
      *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. Given, it wins
      *  over the provider's `formatDate`. */
     dateStyle?: FormatDateStyle | Intl.DateTimeFormatOptions;
@@ -174,7 +186,7 @@ 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, empty, locale: localeProp, className, }: DateMarkProps): react.JSX.Element;
+declare function DateMark({ value, display, dateStyle, relative, absolute, empty, locale: localeProp, className, }: DateMarkProps): react.JSX.Element;
 interface DateColumnOptions<T> extends Omit<DateMarkProps, "value" | "className"> {
     key: string;
     header: ReactNode;

package/dist/components/account-chips.js

@@ -1,11 +1,10 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 import { formatDate, formatRelativeTime, toDate, EMPTY_FORMATTED_VALUE } from "../lib/format.js";
 import { useKitDateFormatter, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { toLocalIso } from "../lib/dates.js";
 import { Chip } from "./chip.js";
-import { Tooltip } from "./tooltip.js";
 function RoleChip({
   value: role,
   roles,
@@ -99,6 +98,7 @@ function DateMark({
   display = "date",
   dateStyle,
   relative,
+  absolute = "below",
   empty = EMPTY_FORMATTED_VALUE,
   locale: localeProp,
   className
@@ -113,7 +113,25 @@ function DateMark({
     return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), className: cls, children: own || 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 }) });
+  const exact = formatDate(date, dateStyle ?? "dateTime", { locale });
+  const sameDay = text === formatDate(date, dateStyle ?? "medium", { locale });
+  const iso = date.toISOString();
+  if (sameDay) {
+    return /* @__PURE__ */ jsx("time", { dateTime: iso, className: cls, children: exact });
+  }
+  return /* @__PURE__ */ jsxs(
+    "time",
+    {
+      dateTime: iso,
+      "data-slot": "date-mark",
+      className: cn(absolute === "below" ? "inline-flex flex-col leading-tight" : "inline", className),
+      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 })
+      ]
+    }
+  );
 }
 function dateColumn({
   key,

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 { 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 * - `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 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. 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  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  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":"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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 } 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":[]}

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

@@ -16,7 +16,12 @@ type AlertSize = "sm" | "md";
 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. */
+ * compensating the 2px colored border so toggling tones never shifts layout.
+ *
+ * The compensation is `calc(<the neutral padding in rem> - 1px)`, not a px figure
+ * (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;
 interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "onClick"> {
     /** Default `danger`. `info` for news, `neutral` for a plain note — see

package/dist/components/alert-banner.js

@@ -2,6 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from "lucide-react";
 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)]",
@@ -22,7 +23,7 @@ function toneFrameClass(tone) {
   return TONE_FRAME[tone];
 }
 function alertFrameClass(tone, size = "md") {
-  const box = size === "sm" ? tone === "neutral" ? "rounded-md px-2.5 py-1.5" : "rounded-md px-[9px] py-[5px]" : tone === "neutral" ? "rounded-md p-3" : "rounded-md p-[11px]";
+  const box = size === "sm" ? tone === "neutral" ? "rounded-md px-2.5 py-1.5" : "rounded-md px-[calc(0.625rem-1px)] py-[calc(0.375rem-1px)]" : tone === "neutral" ? "rounded-md p-3" : "rounded-md p-[calc(0.75rem-1px)]";
   return `${box} ${TONE_FRAME[tone]}`;
 }
 function stripFrameClass(tone, size) {
@@ -99,7 +100,7 @@ function AlertBanner({
     strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),
     elevated && cn(ELEVATED, TONE_ELEVATED[tone])
   );
-  const focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] 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-[var(--bg-surface)]");
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     glyph,
     /* @__PURE__ */ jsx("span", { className: cn(!inlineRow && (nested ? "flex-1" : grow), "min-w-0 text-start"), children }),
@@ -134,7 +135,7 @@ function AlertBanner({
     "div",
     {
       className: cn(
-        "relative z-10 flex shrink-0 items-center gap-2",
+        "relative z-10 flex max-w-full shrink-0 flex-wrap items-center gap-2",
         !strip && !inlineRow && "self-center",
         strip && "ms-auto",
         // Last, on a line of its own, lined up with the message (past the glyph).
@@ -167,7 +168,7 @@ 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-2 focus-visible:after:ring-[var(--brand)]"
+    "focus-visible:after:ring-[length:var(--focus-ring-width)] focus-visible:after:ring-[var(--brand)]"
   ) : cn(row, !inlineRow && "w-full", frame, TONE_TEXT[tone], hover, focusRing, className);
   const actionRest = split ? {} : rest;
   const rowAction = href !== void 0 ? /* @__PURE__ */ jsx(