@eifi1/ui-kit 0.11.0 → 0.13.0

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

@@ -1,10 +1,58 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { SelectProps } from './ui.js';
+import { aJ as SelectProps } from '../kit-labels-Mz8zZHIF.js';
 import { ThemePreference } from '../theme/theme-store.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './danger-confirm.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import '../feedback/feedback-attachment.js';
+import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
+import './confirm-dialog.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
 import 'zustand/middleware';
 import 'zustand';
 

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

@@ -0,0 +1,122 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { StatTileLabels } from './stat-tile.js';
+
+/**
+ * The text colours a figure can carry, token-backed — `StatTile`'s tones, as a class
+ * any span can take.
+ *
+ *  - `default` — the primary text colour. `muted` — the secondary, quiet one.
+ *  - `income` / `expense` / `net` — the money trio (CVD-safe teal / amber / violet).
+ *  - `success` / `warning` / `danger` / `info` — a verdict: a rent rise is the tenant's
+ *    bad news (kastlan lease-columns), a vote "for" is green (meeting-agenda-tab).
+ *  - `brand` — the app's accent.
+ *
+ * Colour is never the only carrier: pair a verdict with an arrow, a word, or a sign.
+ */
+type TextTone = "default" | "muted" | "brand" | "income" | "expense" | "net" | "success" | "warning" | "danger" | "info";
+/**
+ * The class that colours text in `tone` — for the spans kastlan colours by hand with
+ * `text-[var(--danger)]` / `text-emerald-600` (settlement-table, changelog-page,
+ * meeting-agenda-tab), so the palette they draw from is the kit's tokens.
+ */
+declare function toneTextClass(tone: TextTone): string;
+interface ToneProps extends ComponentPropsWithoutRef<"span"> {
+    tone: TextTone;
+}
+/** A `<span>` in a {@link TextTone} — `<Tone tone="success">{votesFor}</Tone>`. */
+declare function Tone({ tone, className, ...rest }: ToneProps): react.JSX.Element;
+/** Which way is +1: `up` for a figure where more is good news (income, savings),
+ *  `down` where less is (a rent the tenant pays, a cost). */
+type GoodDirection = "up" | "down";
+/**
+ * How a signed figure is coloured:
+ *  - `signed` (default) — money read by its own sign: above zero `income`, below zero
+ *    `expense`, zero muted. A balance, a net.
+ *  - `income` / `expense` / `neutral` — one colour whatever the sign (`neutral` is the
+ *    text's own colour).
+ *  - `verdict` — the change judged by {@link SignedAmountProps.goodDirection}: good
+ *    news `success`, bad news `danger`, zero muted. Setting `goodDirection` implies it.
+ */
+type SignedAmountTone = "signed" | "income" | "expense" | "neutral" | "verdict";
+/** What a signed figure says to a screen reader, whose readers disagree about a
+ *  leading "+" (most skip it) and a "−" (some read "dash", some nothing). */
+interface SignedAmountLabels {
+    /** A figure above zero. `amount` is formatted and unsigned. */
+    positive: (amount: string) => string;
+    /** A figure below zero. `amount` is formatted and unsigned. */
+    negative: (amount: string) => string;
+}
+declare const DEFAULT_SIGNED_AMOUNT_LABELS: SignedAmountLabels;
+interface SignedFormatProps {
+    /** ISO 4217 code: format as money. */
+    currency?: string;
+    /** `"percent"` reads `value` as a RATIO (`0.12` → 12 %), as `StatTile`'s delta does. */
+    unit?: "value" | "percent";
+    /** Compact notation: 12 400 → "12K". */
+    compact?: boolean;
+    /** Fraction digits, as `formatNumber`'s `digits`. */
+    digits?: number | {
+        min?: number;
+        max?: number;
+    };
+    /** Formats the UNSIGNED magnitude, replacing the `Intl` default outright. The sign
+     *  is the component's. */
+    format?: (magnitude: number) => string;
+    locale?: string;
+}
+interface SignedAmountProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<"span">, "children"> {
+    value: number;
+    /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */
+    tone?: SignedAmountTone;
+    /** Which way is good news — colours by verdict (`success` / `danger`). */
+    goodDirection?: GoodDirection;
+    /** Print "+" before a positive figure (default `true`). A negative always shows its
+     *  minus; zero shows neither. */
+    showPlus?: boolean;
+    /** An arrow before the figure (up / down / a dash at zero) — so the direction does not
+     *  ride on colour alone. Decorative; the words say the same. */
+    arrow?: boolean;
+    /** Tag the figure `data-private`, for the host's demo-mode blur. */
+    sensitive?: boolean;
+    labels?: Partial<SignedAmountLabels>;
+}
+/**
+ * A figure with a sign that matters: a balance, a rent change, a net.
+ *
+ * kastlan writes it by hand in five places — `{change > 0 ? "+" : ""}{formatCurrency(
+ * change)}` in a span coloured by a ternary (lease-columns:190, settlement-table:58,
+ * the tenancy `formatPct`) — and each picks its own colours for the same verdict.
+ *
+ * The visible figure (sign, digits, arrow) is hidden from assistive tech and spoken as
+ * words instead ("plus CHF 50.00" / "minus CHF 50.00", `signedAmount.*`): a "+" is
+ * skipped by most screen readers, and `Intl`'s "−" is read as "dash" or not at all.
+ */
+declare function SignedAmount({ value, currency, unit, compact, digits, format, locale, tone, goodDirection, showPlus, arrow, sensitive, labels, className, ...rest }: SignedAmountProps): react.JSX.Element;
+interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<"span">, "children"> {
+    /** The change. Above zero is "up". */
+    value: number;
+    /** Which way is good news. Unset, the change is stated and not judged (muted); set,
+     *  it is coloured `success` / `danger` and its sentence says "(better)" / "(worse)". */
+    goodDirection?: GoodDirection;
+    /** What it is measured against, after it: "vs last month". */
+    label?: ReactNode;
+    /** Hide the arrow (shown by default, as on a StatTile). At zero the arrow is a flat
+     *  dash BESIDE the figure ("– 0.00 %"), never in place of it. */
+    arrow?: boolean;
+    sensitive?: boolean;
+    /** The `statTile` namespace's direction words — a delta says the same as a tile's. */
+    labels?: Partial<Pick<StatTileLabels, "increase" | "decrease" | "unchanged" | "better" | "worse">>;
+}
+/**
+ * `StatTile`'s delta on its own: an arrow, the unsigned magnitude, and a sentence for
+ * screen readers ("Up 12% (worse)"), coloured only when `goodDirection` judges it —
+ * users up and cost up are the same arrow until someone says which is good.
+ *
+ * For a change shown outside a tile: kastlan's rent-change column
+ * (lease-columns:219, a "+1.25%" chip), the breakdown rows of the rent calculator
+ * (breakdown-row:5, a trend icon coloured by hand).
+ */
+declare function Delta({ value, currency, unit, compact, digits, format, locale, goodDirection, label, arrow, sensitive, labels, className, ...rest }: DeltaProps): react.JSX.Element | null;
+
+export { DEFAULT_SIGNED_AMOUNT_LABELS, Delta, type DeltaProps, type GoodDirection, SignedAmount, type SignedAmountLabels, type SignedAmountProps, type SignedAmountTone, type TextTone, Tone, type ToneProps, toneTextClass };

package/dist/components/signed-amount.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, Minus } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { formatMoney, formatNumber, formatPercent } from "../lib/format.js";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { DEFAULT_STAT_TILE_LABELS } from "./stat-tile.js";
+const TEXT_TONE = {
+  default: "text-[var(--text-primary)]",
+  muted: "text-[var(--text-muted)]",
+  brand: "text-[var(--brand)]",
+  income: "text-[var(--money-income)]",
+  expense: "text-[var(--money-expense)]",
+  net: "text-[var(--money-net)]",
+  success: "text-[var(--success)]",
+  warning: "text-[var(--warning)]",
+  danger: "text-[var(--danger)]",
+  info: "text-[var(--info)]"
+};
+function toneTextClass(tone) {
+  return TEXT_TONE[tone];
+}
+function Tone({ tone, className, ...rest }) {
+  return /* @__PURE__ */ jsx("span", { ...rest, className: cn(TEXT_TONE[tone], className) });
+}
+const DEFAULT_SIGNED_AMOUNT_LABELS = {
+  positive: (amount) => `plus ${amount}`,
+  negative: (amount) => `minus ${amount}`
+};
+function useMagnitudeFormatter({ currency, unit, compact, digits, format, locale }) {
+  const kitLocale = useKitLocale(locale);
+  return (magnitude) => {
+    if (format) return format(magnitude);
+    if (unit === "percent") return formatPercent(magnitude, { locale: kitLocale, compact, digits });
+    if (currency) return formatMoney(magnitude, currency, { locale: kitLocale, compact, digits });
+    return formatNumber(magnitude, { locale: kitLocale, compact, digits });
+  };
+}
+function directionOf(value) {
+  return value > 0 ? "up" : value < 0 ? "down" : "flat";
+}
+function signedToneClass(tone, dir, goodDirection) {
+  if (tone === "verdict" || goodDirection && tone === "signed") {
+    if (dir === "flat" || !goodDirection) return TEXT_TONE.muted;
+    return dir === goodDirection ? TEXT_TONE.success : TEXT_TONE.danger;
+  }
+  if (tone === "signed") return dir === "flat" ? TEXT_TONE.muted : dir === "up" ? TEXT_TONE.income : TEXT_TONE.expense;
+  if (tone === "neutral") return "";
+  return TEXT_TONE[tone];
+}
+const ARROW = { up: ArrowUp, down: ArrowDown, flat: Minus };
+function SignedAmount({
+  value,
+  currency,
+  unit,
+  compact,
+  digits,
+  format,
+  locale,
+  tone = "signed",
+  goodDirection,
+  showPlus = true,
+  arrow = false,
+  sensitive = false,
+  labels,
+  className,
+  ...rest
+}) {
+  const text = useKitLabels("signedAmount", DEFAULT_SIGNED_AMOUNT_LABELS, labels);
+  const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });
+  const finite = Number.isFinite(value);
+  const dir = finite ? directionOf(value) : "flat";
+  const amount = finite ? fmt(Math.abs(value)) : "\u2014";
+  const sign = dir === "up" ? showPlus ? "+" : "" : dir === "down" ? "\u2212" : "";
+  const spoken = dir === "up" ? text.positive(amount) : dir === "down" ? text.negative(amount) : amount;
+  const Icon = ARROW[dir];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      "data-private": sensitive ? "" : void 0,
+      "data-direction": dir,
+      className: cn(
+        "relative inline-flex items-center gap-0.5 whitespace-nowrap tabular-nums",
+        signedToneClass(tone, dir, goodDirection),
+        className
+      ),
+      children: [
+        arrow && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-[1em] shrink-0" }),
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
+          sign,
+          amount
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: spoken })
+      ]
+    }
+  );
+}
+function Delta({
+  value,
+  currency,
+  unit,
+  compact,
+  digits,
+  format,
+  locale,
+  goodDirection,
+  label,
+  arrow = true,
+  sensitive = false,
+  labels,
+  className,
+  ...rest
+}) {
+  const text = useKitLabels("statTile", DEFAULT_STAT_TILE_LABELS, labels);
+  const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });
+  if (!Number.isFinite(value)) return null;
+  const amount = fmt(Math.abs(value));
+  const dir = directionOf(value);
+  const Icon = ARROW[dir];
+  let spoken = dir === "up" ? text.increase(amount) : dir === "down" ? text.decrease(amount) : text.unchanged;
+  let tone = TEXT_TONE.muted;
+  if (goodDirection && dir !== "flat") {
+    const good = dir === goodDirection;
+    spoken = good ? text.better(spoken) : text.worse(spoken);
+    tone = good ? TEXT_TONE.success : TEXT_TONE.danger;
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      "data-direction": dir,
+      className: cn("relative inline-flex flex-wrap items-center gap-x-1.5 tabular-nums", className),
+      children: [
+        /* @__PURE__ */ jsxs("span", { "data-private": sensitive ? "" : void 0, className: cn("inline-flex items-center gap-0.5 font-medium", tone), children: [
+          arrow && /* @__PURE__ */ jsx(Icon, { className: "size-[1em] shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: amount }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: spoken })
+        ] }),
+        label != null && /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: label })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_SIGNED_AMOUNT_LABELS,
+  Delta,
+  SignedAmount,
+  Tone,
+  toneTextClass
+};
+//# sourceMappingURL=signed-amount.js.map

package/dist/components/signed-amount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/signed-amount.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { formatMoney, formatNumber, formatPercent } from \"../lib/format\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { DEFAULT_STAT_TILE_LABELS } from \"./stat-tile\";\nimport type { StatTileLabels } from \"./stat-tile\";\n\n/**\n * The text colours a figure can carry, token-backed — `StatTile`'s tones, as a class\n * any span can take.\n *\n *  - `default` — the primary text colour. `muted` — the secondary, quiet one.\n *  - `income` / `expense` / `net` — the money trio (CVD-safe teal / amber / violet).\n *  - `success` / `warning` / `danger` / `info` — a verdict: a rent rise is the tenant's\n *    bad news (kastlan lease-columns), a vote \"for\" is green (meeting-agenda-tab).\n *  - `brand` — the app's accent.\n *\n * Colour is never the only carrier: pair a verdict with an arrow, a word, or a sign.\n */\nexport type TextTone =\n  | \"default\"\n  | \"muted\"\n  | \"brand\"\n  | \"income\"\n  | \"expense\"\n  | \"net\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nconst TEXT_TONE: Record<TextTone, string> = {\n  default: \"text-[var(--text-primary)]\",\n  muted: \"text-[var(--text-muted)]\",\n  brand: \"text-[var(--brand)]\",\n  income: \"text-[var(--money-income)]\",\n  expense: \"text-[var(--money-expense)]\",\n  net: \"text-[var(--money-net)]\",\n  success: \"text-[var(--success)]\",\n  warning: \"text-[var(--warning)]\",\n  danger: \"text-[var(--danger)]\",\n  info: \"text-[var(--info)]\",\n};\n\n/**\n * The class that colours text in `tone` — for the spans kastlan colours by hand with\n * `text-[var(--danger)]` / `text-emerald-600` (settlement-table, changelog-page,\n * meeting-agenda-tab), so the palette they draw from is the kit's tokens.\n */\nexport function toneTextClass(tone: TextTone): string {\n  return TEXT_TONE[tone];\n}\n\nexport interface ToneProps extends ComponentPropsWithoutRef<\"span\"> {\n  tone: TextTone;\n}\n\n/** A `<span>` in a {@link TextTone} — `<Tone tone=\"success\">{votesFor}</Tone>`. */\nexport function Tone({ tone, className, ...rest }: ToneProps) {\n  return <span {...rest} className={cn(TEXT_TONE[tone], className)} />;\n}\n\n/* ── Signed amounts ──────────────────────────────────────────────────────── */\n\n/** Which way is +1: `up` for a figure where more is good news (income, savings),\n *  `down` where less is (a rent the tenant pays, a cost). */\nexport type GoodDirection = \"up\" | \"down\";\n\n/**\n * How a signed figure is coloured:\n *  - `signed` (default) — money read by its own sign: above zero `income`, below zero\n *    `expense`, zero muted. A balance, a net.\n *  - `income` / `expense` / `neutral` — one colour whatever the sign (`neutral` is the\n *    text's own colour).\n *  - `verdict` — the change judged by {@link SignedAmountProps.goodDirection}: good\n *    news `success`, bad news `danger`, zero muted. Setting `goodDirection` implies it.\n */\nexport type SignedAmountTone = \"signed\" | \"income\" | \"expense\" | \"neutral\" | \"verdict\";\n\n/** What a signed figure says to a screen reader, whose readers disagree about a\n *  leading \"+\" (most skip it) and a \"−\" (some read \"dash\", some nothing). */\nexport interface SignedAmountLabels {\n  /** A figure above zero. `amount` is formatted and unsigned. */\n  positive: (amount: string) => string;\n  /** A figure below zero. `amount` is formatted and unsigned. */\n  negative: (amount: string) => string;\n}\n\nexport const DEFAULT_SIGNED_AMOUNT_LABELS: SignedAmountLabels = {\n  positive: (amount) => `plus ${amount}`,\n  negative: (amount) => `minus ${amount}`,\n};\n\ninterface SignedFormatProps {\n  /** ISO 4217 code: format as money. */\n  currency?: string;\n  /** `\"percent\"` reads `value` as a RATIO (`0.12` → 12 %), as `StatTile`'s delta does. */\n  unit?: \"value\" | \"percent\";\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Fraction digits, as `formatNumber`'s `digits`. */\n  digits?: number | { min?: number; max?: number };\n  /** Formats the UNSIGNED magnitude, replacing the `Intl` default outright. The sign\n   *  is the component's. */\n  format?: (magnitude: number) => string;\n  locale?: string;\n}\n\nfunction useMagnitudeFormatter({ currency, unit, compact, digits, format, locale }: SignedFormatProps) {\n  const kitLocale = useKitLocale(locale);\n  return (magnitude: number): string => {\n    if (format) return format(magnitude);\n    if (unit === \"percent\") return formatPercent(magnitude, { locale: kitLocale, compact, digits });\n    if (currency) return formatMoney(magnitude, currency, { locale: kitLocale, compact, digits });\n    return formatNumber(magnitude, { locale: kitLocale, compact, digits });\n  };\n}\n\nfunction directionOf(value: number): \"up\" | \"down\" | \"flat\" {\n  return value > 0 ? \"up\" : value < 0 ? \"down\" : \"flat\";\n}\n\nfunction signedToneClass(\n  tone: SignedAmountTone,\n  dir: \"up\" | \"down\" | \"flat\",\n  goodDirection: GoodDirection | undefined,\n): string {\n  if (tone === \"verdict\" || (goodDirection && tone === \"signed\")) {\n    if (dir === \"flat\" || !goodDirection) return TEXT_TONE.muted;\n    return dir === goodDirection ? TEXT_TONE.success : TEXT_TONE.danger;\n  }\n  if (tone === \"signed\") return dir === \"flat\" ? TEXT_TONE.muted : dir === \"up\" ? TEXT_TONE.income : TEXT_TONE.expense;\n  if (tone === \"neutral\") return \"\";\n  return TEXT_TONE[tone];\n}\n\nconst ARROW = { up: ArrowUp, down: ArrowDown, flat: Minus } as const;\n\nexport interface SignedAmountProps\n  extends SignedFormatProps,\n    Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  value: number;\n  /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */\n  tone?: SignedAmountTone;\n  /** Which way is good news — colours by verdict (`success` / `danger`). */\n  goodDirection?: GoodDirection;\n  /** Print \"+\" before a positive figure (default `true`). A negative always shows its\n   *  minus; zero shows neither. */\n  showPlus?: boolean;\n  /** An arrow before the figure (up / down / a dash at zero) — so the direction does not\n   *  ride on colour alone. Decorative; the words say the same. */\n  arrow?: boolean;\n  /** Tag the figure `data-private`, for the host's demo-mode blur. */\n  sensitive?: boolean;\n  labels?: Partial<SignedAmountLabels>;\n}\n\n/**\n * A figure with a sign that matters: a balance, a rent change, a net.\n *\n * kastlan writes it by hand in five places — `{change > 0 ? \"+\" : \"\"}{formatCurrency(\n * change)}` in a span coloured by a ternary (lease-columns:190, settlement-table:58,\n * the tenancy `formatPct`) — and each picks its own colours for the same verdict.\n *\n * The visible figure (sign, digits, arrow) is hidden from assistive tech and spoken as\n * words instead (\"plus CHF 50.00\" / \"minus CHF 50.00\", `signedAmount.*`): a \"+\" is\n * skipped by most screen readers, and `Intl`'s \"−\" is read as \"dash\" or not at all.\n */\nexport function SignedAmount({\n  value,\n  currency,\n  unit,\n  compact,\n  digits,\n  format,\n  locale,\n  tone = \"signed\",\n  goodDirection,\n  showPlus = true,\n  arrow = false,\n  sensitive = false,\n  labels,\n  className,\n  ...rest\n}: SignedAmountProps) {\n  const text = useKitLabels(\"signedAmount\", DEFAULT_SIGNED_AMOUNT_LABELS, labels);\n  const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });\n  const finite = Number.isFinite(value);\n  const dir = finite ? directionOf(value) : \"flat\";\n  const amount = finite ? fmt(Math.abs(value)) : \"—\";\n  // U+2212, the typographic minus: the same width as \"+\", so a column of signed figures\n  // lines up under `tabular-nums`.\n  const sign = dir === \"up\" ? (showPlus ? \"+\" : \"\") : dir === \"down\" ? \"−\" : \"\";\n  const spoken = dir === \"up\" ? text.positive(amount) : dir === \"down\" ? text.negative(amount) : amount;\n  const Icon = ARROW[dir];\n  return (\n    <span\n      {...rest}\n      data-private={sensitive ? \"\" : undefined}\n      data-direction={dir}\n      className={cn(\n        \"relative inline-flex items-center gap-0.5 whitespace-nowrap tabular-nums\",\n        signedToneClass(tone, dir, goodDirection),\n        className,\n      )}\n    >\n      {arrow && <Icon aria-hidden className=\"size-[1em] shrink-0\" />}\n      <span aria-hidden>\n        {sign}\n        {amount}\n      </span>\n      <span className=\"sr-only\">{spoken}</span>\n    </span>\n  );\n}\n\nexport interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  /** The change. Above zero is \"up\". */\n  value: number;\n  /** Which way is good news. Unset, the change is stated and not judged (muted); set,\n   *  it is coloured `success` / `danger` and its sentence says \"(better)\" / \"(worse)\". */\n  goodDirection?: GoodDirection;\n  /** What it is measured against, after it: \"vs last month\". */\n  label?: ReactNode;\n  /** Hide the arrow (shown by default, as on a StatTile). At zero the arrow is a flat\n   *  dash BESIDE the figure (\"– 0.00 %\"), never in place of it. */\n  arrow?: boolean;\n  sensitive?: boolean;\n  /** The `statTile` namespace's direction words — a delta says the same as a tile's. */\n  labels?: Partial<Pick<StatTileLabels, \"increase\" | \"decrease\" | \"unchanged\" | \"better\" | \"worse\">>;\n}\n\n/**\n * `StatTile`'s delta on its own: an arrow, the unsigned magnitude, and a sentence for\n * screen readers (\"Up 12% (worse)\"), coloured only when `goodDirection` judges it —\n * users up and cost up are the same arrow until someone says which is good.\n *\n * For a change shown outside a tile: kastlan's rent-change column\n * (lease-columns:219, a \"+1.25%\" chip), the breakdown rows of the rent calculator\n * (breakdown-row:5, a trend icon coloured by hand).\n */\nexport function Delta({\n  value,\n  currency,\n  unit,\n  compact,\n  digits,\n  format,\n  locale,\n  goodDirection,\n  label,\n  arrow = true,\n  sensitive = false,\n  labels,\n  className,\n  ...rest\n}: DeltaProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });\n  if (!Number.isFinite(value)) return null;\n  const amount = fmt(Math.abs(value));\n  const dir = directionOf(value);\n  const Icon = ARROW[dir];\n  let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n  let tone = TEXT_TONE.muted;\n  if (goodDirection && dir !== \"flat\") {\n    const good = dir === goodDirection;\n    spoken = good ? text.better(spoken) : text.worse(spoken);\n    tone = good ? TEXT_TONE.success : TEXT_TONE.danger;\n  }\n  return (\n    <span\n      {...rest}\n      data-direction={dir}\n      className={cn(\"relative inline-flex flex-wrap items-center gap-x-1.5 tabular-nums\", className)}\n    >\n      <span data-private={sensitive ? \"\" : undefined} className={cn(\"inline-flex items-center gap-0.5 font-medium\", tone)}>\n        {arrow && <Icon className=\"size-[1em] shrink-0\" aria-hidden />}\n        {/* The figure at zero too, beside the flat dash (kastlan feedback #48). Before\n            this a flat delta with an arrow drew the dash ALONE, as a StatTile does — so\n            a rent-change column that printed \"0.00 %\" for an unchanged lease showed a\n            bare \"–\" in its place, and a bare dash is what a table prints for a MISSING\n            value: \"unchanged\" and \"not known\" looked the same. The Minus icon is the\n            neutral indicator, the muted tone the neutral colour, and the figure says\n            how much (none) in the column's own digits. A value that is missing never\n            reaches here — a non-finite one renders nothing, above. Visible change for\n            every `<Delta value={0}>` with the default arrow: \"–\" became \"– 0 %\". */}\n        <span aria-hidden>{amount}</span>\n        <span className=\"sr-only\">{spoken}</span>\n      </span>\n      {label != null && <span className=\"text-[var(--text-muted)]\">{label}</span>}\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/skeleton.d.ts

@@ -19,6 +19,13 @@ interface SkeletonProps extends Omit<ComponentPropsWithoutRef<"div">, "children"
     shape?: SkeletonShape;
     /** For `line`: this many lines, the last one shorter — a paragraph's outline. */
     lines?: number;
+    /**
+     * Say what is loading, once: wraps the placeholder in a `role="status"` region with
+     * this as its (visually hidden) text — kastlan's activity feed (activity-feed:52)
+     * built exactly that by hand around `<Skeleton lines={5} />`. The placeholder itself
+     * stays hidden. Left out, nothing is announced, as before.
+     */
+    label?: string;
 }
 /**
  * A grey stand-in for content that is on its way.
@@ -28,9 +35,9 @@ interface SkeletonProps extends Omit<ComponentPropsWithoutRef<"div">, "children"
  *
  * ALWAYS `aria-hidden`. A placeholder is not content, and a reader that met twelve
  * unnamed grey boxes would have learned nothing. Say "loading" once, where it
- * belongs: `aria-busy` on the region being filled, or a `Spinner` / sr-only line
- * beside the skeletons.
+ * belongs: `aria-busy` on the region being filled, a `Spinner` / sr-only line
+ * beside the skeletons, or this component's own `label`.
  */
-declare function Skeleton({ shape, lines, className, ...rest }: SkeletonProps): react.JSX.Element;
+declare function Skeleton({ label, ...props }: SkeletonProps): react.JSX.Element;
 
 export { SKELETON_CLASS, Skeleton, type SkeletonProps, type SkeletonShape };

package/dist/components/skeleton.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 const SKELETON_CLASS = "animate-pulse rounded bg-[var(--bg-active)] motion-reduce:animate-none";
 const SHAPE = {
@@ -7,7 +7,17 @@ const SHAPE = {
   block: "h-24 w-full rounded-md",
   circle: "size-10 rounded-full"
 };
-function Skeleton({ shape = "line", lines, className, ...rest }) {
+function Skeleton({ label, ...props }) {
+  if (!label) return /* @__PURE__ */ jsx(SkeletonFill, { ...props });
+  return (
+    // `relative`: the containing block for the sr-only text (sr-only-containment.test).
+    /* @__PURE__ */ jsxs("div", { role: "status", className: "relative", "data-skeleton-status": "", children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+      /* @__PURE__ */ jsx(SkeletonFill, { ...props })
+    ] })
+  );
+}
+function SkeletonFill({ shape = "line", lines, className, ...rest }) {
   if (shape === "line" && lines !== void 0 && lines > 1) {
     return /* @__PURE__ */ jsx("div", { ...rest, "aria-hidden": true, className: cn("flex flex-col gap-2", className), "data-skeleton": "lines", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(
       "div",

package/dist/components/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * The look of a placeholder, as one class string — the same fill and pulse\n * `StatTile`'s `loading` headline draws (it imports this), so a tile and the list\n * beside it shimmer as one surface.\n *\n * `motion-reduce:animate-none`: a pulse is motion with no information in it, which\n * is exactly what `prefers-reduced-motion` asks to be dropped. The fill stays, so the\n * shape of what is coming is still there.\n */\nexport const SKELETON_CLASS = \"animate-pulse rounded bg-[var(--bg-active)] motion-reduce:animate-none\";\n\nexport type SkeletonShape = \"line\" | \"block\" | \"circle\";\n\nexport interface SkeletonProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** `line` (default): a bar the height of a line of small text. `block`: an area\n   *  (an image, a chart, a card body). `circle`: an avatar. Size any of them with\n   *  `className` (`w-32`, `h-40`, `size-8`). */\n  shape?: SkeletonShape;\n  /** For `line`: this many lines, the last one shorter — a paragraph's outline. */\n  lines?: number;\n}\n\nconst SHAPE: Record<SkeletonShape, string> = {\n  line: \"h-3 w-full\",\n  block: \"h-24 w-full rounded-md\",\n  circle: \"size-10 rounded-full\",\n};\n\n/**\n * A grey stand-in for content that is on its way.\n *\n * keksdose and kastlan both drew these by hand — `animate-pulse bg-slate-200` in one\n * place, a token in the next, a pulse that ran under reduced motion everywhere.\n *\n * ALWAYS `aria-hidden`. A placeholder is not content, and a reader that met twelve\n * unnamed grey boxes would have learned nothing. Say \"loading\" once, where it\n * belongs: `aria-busy` on the region being filled, or a `Spinner` / sr-only line\n * beside the skeletons.\n */\nexport function Skeleton({ shape = \"line\", lines, className, ...rest }: SkeletonProps) {\n  if (shape === \"line\" && lines !== undefined && lines > 1) {\n    return (\n      <div {...rest} aria-hidden className={cn(\"flex flex-col gap-2\", className)} data-skeleton=\"lines\">\n        {Array.from({ length: lines }, (_, i) => (\n          <div\n            key={i}\n            className={cn(SKELETON_CLASS, SHAPE.line, i === lines - 1 && \"w-2/3\")}\n            data-skeleton=\"line\"\n          />\n        ))}\n      </div>\n    );\n  }\n  return (\n    <div\n      {...rest}\n      aria-hidden\n      data-skeleton={shape}\n      className={cn(SKELETON_CLASS, SHAPE[shape], className)}\n    />\n  );\n}\n"],"mappings":";AA+CU;AA9CV,SAAS,UAAU;AAWZ,MAAM,iBAAiB;AAa9B,MAAM,QAAuC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAaO,SAAS,SAAS,EAAE,QAAQ,QAAQ,OAAO,WAAW,GAAG,KAAK,GAAkB;AACrF,MAAI,UAAU,UAAU,UAAU,UAAa,QAAQ,GAAG;AACxD,WACE,oBAAC,SAAK,GAAG,MAAM,eAAW,MAAC,WAAW,GAAG,uBAAuB,SAAS,GAAG,iBAAc,SACvF,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW,GAAG,gBAAgB,MAAM,MAAM,MAAM,QAAQ,KAAK,OAAO;AAAA,QACpE,iBAAc;AAAA;AAAA,MAFT;AAAA,IAGP,CACD,GACH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,MACX,iBAAe;AAAA,MACf,WAAW,GAAG,gBAAgB,MAAM,KAAK,GAAG,SAAS;AAAA;AAAA,EACvD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * The look of a placeholder, as one class string — the same fill and pulse\n * `StatTile`'s `loading` headline draws (it imports this), so a tile and the list\n * beside it shimmer as one surface.\n *\n * `motion-reduce:animate-none`: a pulse is motion with no information in it, which\n * is exactly what `prefers-reduced-motion` asks to be dropped. The fill stays, so the\n * shape of what is coming is still there.\n */\nexport const SKELETON_CLASS = \"animate-pulse rounded bg-[var(--bg-active)] motion-reduce:animate-none\";\n\nexport type SkeletonShape = \"line\" | \"block\" | \"circle\";\n\nexport interface SkeletonProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** `line` (default): a bar the height of a line of small text. `block`: an area\n   *  (an image, a chart, a card body). `circle`: an avatar. Size any of them with\n   *  `className` (`w-32`, `h-40`, `size-8`). */\n  shape?: SkeletonShape;\n  /** For `line`: this many lines, the last one shorter — a paragraph's outline. */\n  lines?: number;\n  /**\n   * Say what is loading, once: wraps the placeholder in a `role=\"status\"` region with\n   * this as its (visually hidden) text — kastlan's activity feed (activity-feed:52)\n   * built exactly that by hand around `<Skeleton lines={5} />`. The placeholder itself\n   * stays hidden. Left out, nothing is announced, as before.\n   */\n  label?: string;\n}\n\nconst SHAPE: Record<SkeletonShape, string> = {\n  line: \"h-3 w-full\",\n  block: \"h-24 w-full rounded-md\",\n  circle: \"size-10 rounded-full\",\n};\n\n/**\n * A grey stand-in for content that is on its way.\n *\n * keksdose and kastlan both drew these by hand — `animate-pulse bg-slate-200` in one\n * place, a token in the next, a pulse that ran under reduced motion everywhere.\n *\n * ALWAYS `aria-hidden`. A placeholder is not content, and a reader that met twelve\n * unnamed grey boxes would have learned nothing. Say \"loading\" once, where it\n * belongs: `aria-busy` on the region being filled, a `Spinner` / sr-only line\n * beside the skeletons, or this component's own `label`.\n */\nexport function Skeleton({ label, ...props }: SkeletonProps) {\n  if (!label) return <SkeletonFill {...props} />;\n  return (\n    // `relative`: the containing block for the sr-only text (sr-only-containment.test).\n    <div role=\"status\" className=\"relative\" data-skeleton-status=\"\">\n      <span className=\"sr-only\">{label}</span>\n      <SkeletonFill {...props} />\n    </div>\n  );\n}\n\nfunction SkeletonFill({ shape = \"line\", lines, className, ...rest }: Omit<SkeletonProps, \"label\">) {\n  if (shape === \"line\" && lines !== undefined && lines > 1) {\n    return (\n      <div {...rest} aria-hidden className={cn(\"flex flex-col gap-2\", className)} data-skeleton=\"lines\">\n        {Array.from({ length: lines }, (_, i) => (\n          <div\n            key={i}\n            className={cn(SKELETON_CLASS, SHAPE.line, i === lines - 1 && \"w-2/3\")}\n            data-skeleton=\"line\"\n          />\n        ))}\n      </div>\n    );\n  }\n  return (\n    <div\n      {...rest}\n      aria-hidden\n      data-skeleton={shape}\n      className={cn(SKELETON_CLASS, SHAPE[shape], className)}\n    />\n  );\n}\n"],"mappings":";AAkDqB,cAGjB,YAHiB;AAjDrB,SAAS,UAAU;AAWZ,MAAM,iBAAiB;AAoB9B,MAAM,QAAuC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAaO,SAAS,SAAS,EAAE,OAAO,GAAG,MAAM,GAAkB;AAC3D,MAAI,CAAC,MAAO,QAAO,oBAAC,gBAAc,GAAG,OAAO;AAC5C;AAAA;AAAA,IAEE,qBAAC,SAAI,MAAK,UAAS,WAAU,YAAW,wBAAqB,IAC3D;AAAA,0BAAC,UAAK,WAAU,WAAW,iBAAM;AAAA,MACjC,oBAAC,gBAAc,GAAG,OAAO;AAAA,OAC3B;AAAA;AAEJ;AAEA,SAAS,aAAa,EAAE,QAAQ,QAAQ,OAAO,WAAW,GAAG,KAAK,GAAiC;AACjG,MAAI,UAAU,UAAU,UAAU,UAAa,QAAQ,GAAG;AACxD,WACE,oBAAC,SAAK,GAAG,MAAM,eAAW,MAAC,WAAW,GAAG,uBAAuB,SAAS,GAAG,iBAAc,SACvF,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW,GAAG,gBAAgB,MAAM,MAAM,MAAM,QAAQ,KAAK,OAAO;AAAA,QACpE,iBAAc;AAAA;AAAA,MAFT;AAAA,IAGP,CACD,GACH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,MACX,iBAAe;AAAA,MACf,WAAW,GAAG,gBAAgB,MAAM,KAAK,GAAG,SAAS;AAAA;AAAA,EACvD;AAEJ;","names":[]}

package/dist/components/stat-tile.d.ts

@@ -166,7 +166,8 @@ interface StatTileProps extends Omit<ComponentPropsWithoutRef<"div">, "children"
     /** Makes the tile a link. See {@link renderLink} for a router. */
     href?: string;
     /** Renders the link for `href` — pass your router's `<Link>` here, since a plain
-     *  `<a>` reloads a single-page app. Default: `<a>`. */
+     *  `<a>` reloads a single-page app. Default: the `<UiKitProvider linkComponent>`
+     *  (for an in-app `href`), then `<a>`. */
     renderLink?: (props: StatTileLinkProps) => ReactElement;
     /** Makes the tile a button (ignored when `href` is given). */
     onClick?: () => void;

package/dist/components/stat-tile.js

@@ -3,7 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { isValidElement, useId, useLayoutEffect, useState } from "react";
 import { ArrowDown, ArrowUp, Minus } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { useKitLabels, useKitLink, useKitLocale } from "../i18n/kit-labels.js";
+import { pickLinkRenderer, RenderedKitLink } from "./text-link.js";
 import { Card, FieldHint } from "./ui.js";
 import { Sparkline } from "./sparkline.js";
 import { Tooltip } from "./tooltip.js";
@@ -82,6 +83,7 @@ function StatTile({
   ...rest
 }) {
   const text = useKitLabels("statTile", DEFAULT_STAT_TILE_LABELS, labels);
+  const kitLink = useKitLink();
   const [labelEl, setLabelEl] = useState(null);
   const labelCut = useIsTruncated(truncateLabel ? labelEl : null);
   const kitLocale = useKitLocale(locale);
@@ -112,7 +114,8 @@ function StatTile({
       "aria-describedby": describedBy,
       children: label
     };
-    labelNode = renderLink ? renderLink(linkProps) : /* @__PURE__ */ jsx("a", { href, className: stretched, "aria-describedby": describedBy, children: label });
+    const kit = pickLinkRenderer(void 0, kitLink, href);
+    labelNode = renderLink ? renderLink(linkProps) : kit ? /* @__PURE__ */ jsx(RenderedKitLink, { render: kit, props: linkProps }) : /* @__PURE__ */ jsx("a", { href, className: stretched, "aria-describedby": describedBy, children: label });
   } else if (onClick) {
     labelNode = /* @__PURE__ */ jsx("button", { type: "button", onClick, "aria-describedby": describedBy, className: stretched, children: label });
   }
@@ -135,7 +138,7 @@ function StatTile({
     /* @__PURE__ */ jsxs("div", { className: "relative mt-1 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums", children: [
       /* @__PURE__ */ jsxs("span", { id: deltaId, "data-private": priv, className: cn("inline-flex items-center gap-0.5 font-medium", deltaTone), children: [
         /* @__PURE__ */ jsx(Icon, { className: "size-3 shrink-0", "aria-hidden": true }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: dir === "flat" ? null : amount }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: amount }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: spoken })
       ] }),
       d.label != null && /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: d.label })