@eifi1/ui-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,151 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode, ReactElement } from 'react';
+
+/**
+ * The words a stat tile speaks. The delta's arrow is an icon, and an icon is not a
+ * sentence: a screen reader gets the direction (and, under `goodDirection`, the
+ * verdict) as words, and a sighted reader who cannot tell the two delta colours apart
+ * still has the arrow — neither judgement rides on colour alone.
+ */
+interface StatTileLabels {
+    /** The delta, rising. `amount` is already formatted and unsigned. */
+    increase: (amount: string) => string;
+    decrease: (amount: string) => string;
+    unchanged: string;
+    /** Wraps the direction sentence when `goodDirection` says the change is good. */
+    better: (change: string) => string;
+    worse: (change: string) => string;
+    /** Spoken in place of a missing value (the tile shows a dash). */
+    noValue: string;
+    /** Spoken while `loading`. */
+    loading: string;
+}
+declare const DEFAULT_STAT_TILE_LABELS: StatTileLabels;
+/**
+ * What colours a figure. Token-backed like everything else in the kit.
+ *
+ *  - `income` / `expense` / `net` — the money trio (teal / amber / violet, CVD-safe).
+ *  - `signed` — a money figure read by its own sign: above zero `income`, below zero
+ *    `expense`, exactly zero neutral (a zero balance is neither news). Needs a NUMBER
+ *    value; a pre-formatted string cannot be read and stays neutral.
+ *  - `success` / `warning` / `danger` / `info` — a threshold verdict ("phase margin
+ *    below 30°"). Say it in the hint or description as well; colour alone is not one.
+ */
+type StatTileTone = "neutral" | "brand" | "income" | "expense" | "net" | "signed" | "success" | "warning" | "danger" | "info";
+/** A change since the previous period. A bare number is shorthand for `{ value }`. */
+interface StatTileDelta {
+    /** Signed: above zero is "up". */
+    value: number;
+    /** `"value"` (default) formats it like the headline — same currency, same
+     *  notation. `"percent"` reads it as a RATIO: `0.12` is shown as 12 %. */
+    unit?: "value" | "percent";
+    /** What it is measured against, shown after it: "vs last month". */
+    label?: ReactNode;
+}
+/** A smaller figure under the headline — a prior period, a projection, a split. */
+interface StatTileSubValue {
+    label: ReactNode;
+    /** A number is formatted like the headline; anything else is rendered as given. */
+    value: ReactNode;
+    /** Defaults to the tile's own `tone`, read per figure (so a `signed` tile shows a
+     *  teal September above an amber August). Sub-values are always the muted weight
+     *  of their tone: they are history, and must not outshout the figure above them. */
+    tone?: StatTileTone;
+}
+/** What {@link StatTileProps.renderLink} is handed. Spread it onto your router's
+ *  link: the class is what stretches the link over the whole tile. */
+interface StatTileLinkProps {
+    href: string;
+    className: string;
+    "aria-describedby": string;
+    children: ReactNode;
+}
+interface StatTileProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
+    /** What is measured. Also the tile's accessible name when it is a link/button. */
+    label: ReactNode;
+    /**
+     * The headline. A number is formatted with `Intl.NumberFormat` in the kit's locale
+     * (see `currency`, `compact`, `numberFormat`, `format`); a string or element is
+     * rendered as given. `null`/`undefined` shows a dash and says "No data".
+     */
+    value?: ReactNode;
+    /** ISO 4217 code — formats a number value (and a `"value"` delta, and numeric
+     *  sub-values) as money. */
+    currency?: string;
+    /** Compact notation: 12 400 → "12K". */
+    compact?: boolean;
+    /** Any further `Intl.NumberFormat` options, merged over the two above. */
+    numberFormat?: Intl.NumberFormatOptions;
+    /** Formats every NUMBER the tile shows, replacing the `Intl` default outright. */
+    format?: (value: number) => string;
+    locale?: string;
+    /** A short unit after the value that `Intl` has no name for: "ms", "dB", "Hz". */
+    unit?: ReactNode;
+    /** The period the headline belongs to, shown to its left ("SEP"). */
+    valueLabel?: ReactNode;
+    tone?: StatTileTone;
+    delta?: number | StatTileDelta;
+    /** Which way is good news. Unset, the delta is stated and not judged (users up and
+     *  cost up are the same arrow); set, it is coloured and its sentence says so. */
+    goodDirection?: "up" | "down";
+    /** The explanation behind a "?" beside the label (a {@link FieldHint}). */
+    hint?: string;
+    /** A visible line under the value: "Last 12 months", "3 estates / 9 buildings". */
+    description?: ReactNode;
+    subValues?: StatTileSubValue[];
+    /** Shorthand for a fluid {@link Sparkline} named after the tile and speaking in
+     *  the tile's number format. */
+    trend?: ReadonlyArray<number | null | undefined>;
+    /** A custom sparkline (or any small graphic) in the same place. Wins over `trend`. */
+    sparkline?: ReactNode;
+    /** A decorative icon at the top end of the tile. */
+    icon?: ReactNode;
+    /** Anything below the rest — a progress bar, a link row. */
+    footer?: ReactNode;
+    /** Tag every figure `data-private`, so the host's demo-mode rule blurs it — the
+     *  same attribute `Tooltip redact` and the chart tooltip's value cell carry. */
+    sensitive?: boolean;
+    /** Skeleton in place of the value; delta, sub-values and trend are withheld. */
+    loading?: boolean;
+    /** `"sm"` for dense grids (a metrics wall); `"md"` the default KPI. */
+    size?: "sm" | "md";
+    /** 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>`. */
+    renderLink?: (props: StatTileLinkProps) => ReactElement;
+    /** Makes the tile a button (ignored when `href` is given). */
+    onClick?: () => void;
+    labels?: Partial<StatTileLabels>;
+}
+/**
+ * The KPI card: a label, one number, and optionally how it moved, what it is made of
+ * and which way it has been going.
+ *
+ * Replaces keksdose's `KpiCard` and admin `Tile`, lenkbank's metrics tiles and
+ * kastlan's `KpiCard` — the same card four times, with four answers to the same
+ * questions (how a currency is formatted, whether a delta is judged, what happens to
+ * the figures in demo mode).
+ *
+ * Interactive tiles use a STRETCHED link: the label is the `<a>`/`<button>`, and its
+ * `::after` covers the card. Making the card itself the link would nest the hint's
+ * `<button>` inside it, which is invalid HTML and an unreachable control; this way
+ * the hint sits above the overlay and stays its own tab stop. The link's name is the
+ * label, and it is described by the value and the delta.
+ */
+declare function StatTile({ label, value, currency, compact, numberFormat, format, locale, unit, valueLabel, tone, delta, goodDirection, hint, description, subValues, trend, sparkline, icon, footer, sensitive, loading, size, href, renderLink, onClick, labels, className, ...rest }: StatTileProps): react.JSX.Element;
+interface StatTileGridProps extends ComponentPropsWithoutRef<"div"> {
+    /** The narrowest a tile may get before the grid drops a column. The default fits
+     *  two tiles on a 320px phone. */
+    minTileWidth?: string;
+}
+/**
+ * The row of tiles every dashboard in the three apps lays out by hand, each with its
+ * own breakpoint ladder (`grid-cols-2 md:grid-cols-4 min-[2400px]:grid-cols-8` …).
+ * Those ladders read the VIEWPORT and so ignored the sidebar: 6-up tiles at 155px in
+ * the band where the sidebar was open. This fits as many columns as `minTileWidth`
+ * allows in the space the grid actually has, and needs no breakpoint at all.
+ */
+declare function StatTileGrid({ minTileWidth, className, style, ...rest }: StatTileGridProps): react.JSX.Element;
+
+export { DEFAULT_STAT_TILE_LABELS, StatTile, type StatTileDelta, StatTileGrid, type StatTileGridProps, type StatTileLabels, type StatTileLinkProps, type StatTileProps, type StatTileSubValue, type StatTileTone };

package/dist/components/stat-tile.js

@@ -0,0 +1,236 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { ArrowDown, ArrowUp, Minus } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { Card, FieldHint } from "./ui.js";
+import { Sparkline } from "./sparkline.js";
+const DEFAULT_STAT_TILE_LABELS = {
+  increase: (amount) => `Up ${amount}`,
+  decrease: (amount) => `Down ${amount}`,
+  unchanged: "No change",
+  better: (change) => `${change} (better)`,
+  worse: (change) => `${change} (worse)`,
+  noValue: "No data",
+  loading: "Loading\u2026"
+};
+const TONE_CLASS = {
+  neutral: "text-[var(--text-primary)]",
+  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 toneClass(tone, value) {
+  if (tone !== "signed") return TONE_CLASS[tone];
+  if (typeof value !== "number" || value === 0) return TONE_CLASS.neutral;
+  return value < 0 ? TONE_CLASS.expense : TONE_CLASS.income;
+}
+const formatters = /* @__PURE__ */ new Map();
+function numberFormatter(locale, options) {
+  const key = `${locale ?? ""}|${JSON.stringify(options)}`;
+  let f = formatters.get(key);
+  if (!f) {
+    f = new Intl.NumberFormat(locale, options);
+    formatters.set(key, f);
+  }
+  return f;
+}
+const VALUE_TEXT = {
+  md: "text-xl @[13rem]:text-2xl",
+  sm: "text-xs @[8.5rem]:text-sm @[13rem]:text-base"
+};
+const PADDING = { md: "p-3 sm:p-4", sm: "px-2.5 py-2" };
+const SKELETON = "animate-pulse rounded bg-[var(--bg-active)]";
+function StatTile({
+  label,
+  value,
+  currency,
+  compact = false,
+  numberFormat,
+  format,
+  locale,
+  unit,
+  valueLabel,
+  tone = "neutral",
+  delta,
+  goodDirection,
+  hint,
+  description,
+  subValues,
+  trend,
+  sparkline,
+  icon,
+  footer,
+  sensitive = false,
+  loading = false,
+  size = "md",
+  href,
+  renderLink,
+  onClick,
+  labels,
+  className,
+  ...rest
+}) {
+  const text = useKitLabels("statTile", DEFAULT_STAT_TILE_LABELS, labels);
+  const kitLocale = useKitLocale(locale);
+  const id = useId();
+  const valueId = `${id}-value`;
+  const deltaId = `${id}-delta`;
+  const priv = sensitive ? "" : void 0;
+  const fmt = format ?? ((n) => numberFormatter(kitLocale, {
+    ...currency ? { style: "currency", currency } : null,
+    ...compact ? { notation: "compact" } : null,
+    ...numberFormat
+  }).format(n));
+  const show = (v) => typeof v === "number" ? fmt(v) : v;
+  const d = typeof delta === "number" ? { value: delta } : delta;
+  const hasValue = value !== null && value !== void 0 && value !== "";
+  const labelText = typeof label === "string" ? label : void 0;
+  const stretched = cn(
+    "text-start uppercase tracking-wide",
+    "after:absolute after:inset-0 after:rounded-lg after:content-['']",
+    "focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]"
+  );
+  const describedBy = d ? `${valueId} ${deltaId}` : valueId;
+  let labelNode = label;
+  if (href !== void 0) {
+    const linkProps = {
+      href,
+      className: stretched,
+      "aria-describedby": describedBy,
+      children: label
+    };
+    labelNode = renderLink ? renderLink(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 });
+  }
+  const interactive = href !== void 0 || onClick !== void 0;
+  let deltaNode = null;
+  if (d && !loading && Number.isFinite(d.value)) {
+    const magnitude = Math.abs(d.value);
+    const amount = d.unit === "percent" ? numberFormatter(kitLocale, { style: "percent", maximumFractionDigits: 1 }).format(magnitude) : fmt(magnitude);
+    const dir = d.value > 0 ? "up" : d.value < 0 ? "down" : "flat";
+    const Icon = dir === "up" ? ArrowUp : dir === "down" ? ArrowDown : Minus;
+    let spoken = dir === "up" ? text.increase(amount) : dir === "down" ? text.decrease(amount) : text.unchanged;
+    let deltaTone = "text-[var(--text-muted)]";
+    if (goodDirection && dir !== "flat") {
+      const good = dir === goodDirection;
+      spoken = good ? text.better(spoken) : text.worse(spoken);
+      deltaTone = good ? "text-[var(--success)]" : "text-[var(--danger)]";
+    }
+    deltaNode = // `relative`: the containing block for the sr-only sentence (see the
+    // sr-only-containment test for what an escaped one does to the page).
+    /* @__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", { className: "sr-only", children: spoken })
+      ] }),
+      d.label != null && /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: d.label })
+    ] });
+  }
+  const valueClass = cn(
+    "whitespace-nowrap font-semibold tabular-nums",
+    VALUE_TEXT[size],
+    toneClass(tone, value)
+  );
+  const headline = loading ? /* @__PURE__ */ jsxs("span", { id: valueId, className: "relative block py-0.5", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(SKELETON, "block h-6 w-24 max-w-full") }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: text.loading })
+  ] }) : hasValue ? /* @__PURE__ */ jsxs("span", { id: valueId, "data-private": priv, className: cn(valueClass, valueLabel != null && "ms-auto"), children: [
+    show(value),
+    unit != null && /* @__PURE__ */ jsx("span", { className: "ms-1 text-[0.7em] font-medium text-[var(--text-muted)]", children: unit })
+  ] }) : /* @__PURE__ */ jsxs("span", { id: valueId, className: cn("relative", valueClass, "text-[var(--text-muted)]"), children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2014" }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: text.noValue })
+  ] });
+  const graphic = loading ? null : sparkline ?? (trend && /* @__PURE__ */ jsx(
+    Sparkline,
+    {
+      data: trend,
+      fluid: true,
+      height: size === "sm" ? 20 : 28,
+      label: labelText,
+      formatValue: fmt,
+      locale: kitLocale,
+      tone: tone === "signed" ? "signed" : tone === "neutral" ? "chart" : tone,
+      "data-private": priv
+    }
+  ));
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      ...rest,
+      "aria-busy": loading || void 0,
+      className: cn(
+        // @container: the headline sizes read the tile's width. relative: the stretched
+        // link's overlay. overflow-hidden: at pathological widths a figure clips inside
+        // the border instead of painting over the neighbouring tile.
+        "@container relative flex min-w-0 flex-col overflow-hidden",
+        PADDING[size],
+        interactive && "transition-colors hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 break-words text-xs uppercase tracking-wide text-[var(--text-muted)]", children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0", children: labelNode }),
+            hint && /* @__PURE__ */ jsx(FieldHint, { label: hint, side: "top", className: "relative z-10 shrink-0" })
+          ] }),
+          icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 text-[var(--text-muted)] [&_svg]:size-4", children: icon })
+        ] }),
+        valueLabel != null ? (
+          // Period-left / value-right, matching the sub-rows below it. flex-wrap lets a
+          // too-long amount drop to its own end-aligned line instead of overflowing.
+          /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-baseline gap-x-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs uppercase tracking-wide text-[var(--text-muted)]", children: valueLabel }),
+            headline
+          ] })
+        ) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: headline }),
+        deltaNode,
+        description != null && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-[var(--text-muted)]", children: description }),
+        graphic && /* @__PURE__ */ jsx("div", { className: "mt-2", children: graphic }),
+        !loading && subValues && subValues.length > 0 && /* @__PURE__ */ jsx("dl", { className: "mt-1.5 space-y-0.5", children: subValues.map((sv, i) => {
+          const svTone = sv.tone ?? (tone === "neutral" ? void 0 : tone);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex flex-wrap items-baseline gap-x-2 text-xs tabular-nums text-[var(--text-muted)]",
+              children: [
+                /* @__PURE__ */ jsx("dt", { className: "uppercase tracking-wide", children: sv.label }),
+                /* @__PURE__ */ jsx(
+                  "dd",
+                  {
+                    "data-private": priv,
+                    className: cn("ms-auto whitespace-nowrap", svTone && [toneClass(svTone, sv.value), "opacity-75"]),
+                    children: show(sv.value)
+                  }
+                )
+              ]
+            },
+            i
+          );
+        }) }),
+        footer != null && /* @__PURE__ */ jsx("div", { className: "mt-2", children: footer })
+      ]
+    }
+  );
+}
+function StatTileGrid({ minTileWidth = "9rem", className, style, ...rest }) {
+  const columns = {
+    gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${minTileWidth}), 1fr))`
+  };
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cn("grid gap-3", className), style: { ...columns, ...style } });
+}
+export {
+  DEFAULT_STAT_TILE_LABELS,
+  StatTile,
+  StatTileGrid
+};
+//# sourceMappingURL=stat-tile.js.map

package/dist/components/stat-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactElement, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { Card, FieldHint } from \"./ui\";\nimport { Sparkline } from \"./sparkline\";\n\n/**\n * The words a stat tile speaks. The delta's arrow is an icon, and an icon is not a\n * sentence: a screen reader gets the direction (and, under `goodDirection`, the\n * verdict) as words, and a sighted reader who cannot tell the two delta colours apart\n * still has the arrow — neither judgement rides on colour alone.\n */\nexport interface StatTileLabels {\n  /** The delta, rising. `amount` is already formatted and unsigned. */\n  increase: (amount: string) => string;\n  decrease: (amount: string) => string;\n  unchanged: string;\n  /** Wraps the direction sentence when `goodDirection` says the change is good. */\n  better: (change: string) => string;\n  worse: (change: string) => string;\n  /** Spoken in place of a missing value (the tile shows a dash). */\n  noValue: string;\n  /** Spoken while `loading`. */\n  loading: string;\n}\n\nexport const DEFAULT_STAT_TILE_LABELS: StatTileLabels = {\n  increase: (amount) => `Up ${amount}`,\n  decrease: (amount) => `Down ${amount}`,\n  unchanged: \"No change\",\n  better: (change) => `${change} (better)`,\n  worse: (change) => `${change} (worse)`,\n  noValue: \"No data\",\n  loading: \"Loading…\",\n};\n\n/**\n * What colours a figure. Token-backed like everything else in the kit.\n *\n *  - `income` / `expense` / `net` — the money trio (teal / amber / violet, CVD-safe).\n *  - `signed` — a money figure read by its own sign: above zero `income`, below zero\n *    `expense`, exactly zero neutral (a zero balance is neither news). Needs a NUMBER\n *    value; a pre-formatted string cannot be read and stays neutral.\n *  - `success` / `warning` / `danger` / `info` — a threshold verdict (\"phase margin\n *    below 30°\"). Say it in the hint or description as well; colour alone is not one.\n */\nexport type StatTileTone =\n  | \"neutral\"\n  | \"brand\"\n  | \"income\"\n  | \"expense\"\n  | \"net\"\n  | \"signed\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nconst TONE_CLASS: Record<Exclude<StatTileTone, \"signed\">, string> = {\n  neutral: \"text-[var(--text-primary)]\",\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\nfunction toneClass(tone: StatTileTone, value: unknown): string {\n  if (tone !== \"signed\") return TONE_CLASS[tone];\n  if (typeof value !== \"number\" || value === 0) return TONE_CLASS.neutral;\n  return value < 0 ? TONE_CLASS.expense : TONE_CLASS.income;\n}\n\n/** A change since the previous period. A bare number is shorthand for `{ value }`. */\nexport interface StatTileDelta {\n  /** Signed: above zero is \"up\". */\n  value: number;\n  /** `\"value\"` (default) formats it like the headline — same currency, same\n   *  notation. `\"percent\"` reads it as a RATIO: `0.12` is shown as 12 %. */\n  unit?: \"value\" | \"percent\";\n  /** What it is measured against, shown after it: \"vs last month\". */\n  label?: ReactNode;\n}\n\n/** A smaller figure under the headline — a prior period, a projection, a split. */\nexport interface StatTileSubValue {\n  label: ReactNode;\n  /** A number is formatted like the headline; anything else is rendered as given. */\n  value: ReactNode;\n  /** Defaults to the tile's own `tone`, read per figure (so a `signed` tile shows a\n   *  teal September above an amber August). Sub-values are always the muted weight\n   *  of their tone: they are history, and must not outshout the figure above them. */\n  tone?: StatTileTone;\n}\n\n/** What {@link StatTileProps.renderLink} is handed. Spread it onto your router's\n *  link: the class is what stretches the link over the whole tile. */\nexport interface StatTileLinkProps {\n  href: string;\n  className: string;\n  \"aria-describedby\": string;\n  children: ReactNode;\n}\n\nexport interface StatTileProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"onClick\"> {\n  /** What is measured. Also the tile's accessible name when it is a link/button. */\n  label: ReactNode;\n  /**\n   * The headline. A number is formatted with `Intl.NumberFormat` in the kit's locale\n   * (see `currency`, `compact`, `numberFormat`, `format`); a string or element is\n   * rendered as given. `null`/`undefined` shows a dash and says \"No data\".\n   */\n  value?: ReactNode;\n  /** ISO 4217 code — formats a number value (and a `\"value\"` delta, and numeric\n   *  sub-values) as money. */\n  currency?: string;\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Any further `Intl.NumberFormat` options, merged over the two above. */\n  numberFormat?: Intl.NumberFormatOptions;\n  /** Formats every NUMBER the tile shows, replacing the `Intl` default outright. */\n  format?: (value: number) => string;\n  locale?: string;\n  /** A short unit after the value that `Intl` has no name for: \"ms\", \"dB\", \"Hz\". */\n  unit?: ReactNode;\n  /** The period the headline belongs to, shown to its left (\"SEP\"). */\n  valueLabel?: ReactNode;\n  tone?: StatTileTone;\n  delta?: number | StatTileDelta;\n  /** Which way is good news. Unset, the delta is stated and not judged (users up and\n   *  cost up are the same arrow); set, it is coloured and its sentence says so. */\n  goodDirection?: \"up\" | \"down\";\n  /** The explanation behind a \"?\" beside the label (a {@link FieldHint}). */\n  hint?: string;\n  /** A visible line under the value: \"Last 12 months\", \"3 estates / 9 buildings\". */\n  description?: ReactNode;\n  subValues?: StatTileSubValue[];\n  /** Shorthand for a fluid {@link Sparkline} named after the tile and speaking in\n   *  the tile's number format. */\n  trend?: ReadonlyArray<number | null | undefined>;\n  /** A custom sparkline (or any small graphic) in the same place. Wins over `trend`. */\n  sparkline?: ReactNode;\n  /** A decorative icon at the top end of the tile. */\n  icon?: ReactNode;\n  /** Anything below the rest — a progress bar, a link row. */\n  footer?: ReactNode;\n  /** Tag every figure `data-private`, so the host's demo-mode rule blurs it — the\n   *  same attribute `Tooltip redact` and the chart tooltip's value cell carry. */\n  sensitive?: boolean;\n  /** Skeleton in place of the value; delta, sub-values and trend are withheld. */\n  loading?: boolean;\n  /** `\"sm\"` for dense grids (a metrics wall); `\"md\"` the default KPI. */\n  size?: \"sm\" | \"md\";\n  /** Makes the tile a link. See {@link renderLink} for a router. */\n  href?: string;\n  /** Renders the link for `href` — pass your router's `<Link>` here, since a plain\n   *  `<a>` reloads a single-page app. Default: `<a>`. */\n  renderLink?: (props: StatTileLinkProps) => ReactElement;\n  /** Makes the tile a button (ignored when `href` is given). */\n  onClick?: () => void;\n  labels?: Partial<StatTileLabels>;\n}\n\n// One formatter per option set: a metrics wall is twenty of these.\nconst formatters = new Map<string, Intl.NumberFormat>();\nfunction numberFormatter(locale: string | undefined, options: Intl.NumberFormatOptions): Intl.NumberFormat {\n  const key = `${locale ?? \"\"}|${JSON.stringify(options)}`;\n  let f = formatters.get(key);\n  if (!f) {\n    f = new Intl.NumberFormat(locale, options);\n    formatters.set(key, f);\n  }\n  return f;\n}\n\n// The headline sizes are keyed on the TILE's width (it is a @container), not the\n// viewport: a grid beside a sidebar makes tiles narrowest exactly where a viewport\n// breakpoint would hand them the larger font. `sm` is keksdose's compact headline,\n// sized so a worst-case \"CHF 123,456.78\" still fits a 320px phone's 2-up tiles.\nconst VALUE_TEXT = {\n  md: \"text-xl @[13rem]:text-2xl\",\n  sm: \"text-xs @[8.5rem]:text-sm @[13rem]:text-base\",\n} as const;\nconst PADDING = { md: \"p-3 sm:p-4\", sm: \"px-2.5 py-2\" } as const;\nconst SKELETON = \"animate-pulse rounded bg-[var(--bg-active)]\";\n\n/**\n * The KPI card: a label, one number, and optionally how it moved, what it is made of\n * and which way it has been going.\n *\n * Replaces keksdose's `KpiCard` and admin `Tile`, lenkbank's metrics tiles and\n * kastlan's `KpiCard` — the same card four times, with four answers to the same\n * questions (how a currency is formatted, whether a delta is judged, what happens to\n * the figures in demo mode).\n *\n * Interactive tiles use a STRETCHED link: the label is the `<a>`/`<button>`, and its\n * `::after` covers the card. Making the card itself the link would nest the hint's\n * `<button>` inside it, which is invalid HTML and an unreachable control; this way\n * the hint sits above the overlay and stays its own tab stop. The link's name is the\n * label, and it is described by the value and the delta.\n */\nexport function StatTile({\n  label,\n  value,\n  currency,\n  compact = false,\n  numberFormat,\n  format,\n  locale,\n  unit,\n  valueLabel,\n  tone = \"neutral\",\n  delta,\n  goodDirection,\n  hint,\n  description,\n  subValues,\n  trend,\n  sparkline,\n  icon,\n  footer,\n  sensitive = false,\n  loading = false,\n  size = \"md\",\n  href,\n  renderLink,\n  onClick,\n  labels,\n  className,\n  ...rest\n}: StatTileProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const kitLocale = useKitLocale(locale);\n  const id = useId();\n  const valueId = `${id}-value`;\n  const deltaId = `${id}-delta`;\n  const priv = sensitive ? \"\" : undefined;\n\n  const fmt =\n    format ??\n    ((n: number) =>\n      numberFormatter(kitLocale, {\n        ...(currency ? { style: \"currency\", currency } : null),\n        ...(compact ? { notation: \"compact\" } : null),\n        ...numberFormat,\n      }).format(n));\n  const show = (v: ReactNode) => (typeof v === \"number\" ? fmt(v) : v);\n\n  const d = typeof delta === \"number\" ? { value: delta } : delta;\n  const hasValue = value !== null && value !== undefined && value !== \"\";\n  const labelText = typeof label === \"string\" ? label : undefined;\n\n  // ── The label, which is also the link/button when the tile is interactive ──\n  const stretched = cn(\n    \"text-start uppercase tracking-wide\",\n    \"after:absolute after:inset-0 after:rounded-lg after:content-['']\",\n    \"focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]\",\n  );\n  const describedBy = d ? `${valueId} ${deltaId}` : valueId;\n  let labelNode: ReactNode = label;\n  if (href !== undefined) {\n    const linkProps: StatTileLinkProps = {\n      href,\n      className: stretched,\n      \"aria-describedby\": describedBy,\n      children: label,\n    };\n    labelNode = renderLink ? (\n      renderLink(linkProps)\n    ) : (\n      <a href={href} className={stretched} aria-describedby={describedBy}>\n        {label}\n      </a>\n    );\n  } else if (onClick) {\n    labelNode = (\n      <button type=\"button\" onClick={onClick} aria-describedby={describedBy} className={stretched}>\n        {label}\n      </button>\n    );\n  }\n  const interactive = href !== undefined || onClick !== undefined;\n\n  // ── Delta ──\n  let deltaNode: ReactNode = null;\n  if (d && !loading && Number.isFinite(d.value)) {\n    const magnitude = Math.abs(d.value);\n    const amount =\n      d.unit === \"percent\"\n        ? numberFormatter(kitLocale, { style: \"percent\", maximumFractionDigits: 1 }).format(magnitude)\n        : fmt(magnitude);\n    const dir = d.value > 0 ? \"up\" : d.value < 0 ? \"down\" : \"flat\";\n    const Icon = dir === \"up\" ? ArrowUp : dir === \"down\" ? ArrowDown : Minus;\n    let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n    let deltaTone = \"text-[var(--text-muted)]\";\n    if (goodDirection && dir !== \"flat\") {\n      const good = dir === goodDirection;\n      spoken = good ? text.better(spoken) : text.worse(spoken);\n      deltaTone = good ? \"text-[var(--success)]\" : \"text-[var(--danger)]\";\n    }\n    deltaNode = (\n      // `relative`: the containing block for the sr-only sentence (see the\n      // sr-only-containment test for what an escaped one does to the page).\n      <div className=\"relative mt-1 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums\">\n        <span id={deltaId} data-private={priv} className={cn(\"inline-flex items-center gap-0.5 font-medium\", deltaTone)}>\n          <Icon className=\"size-3 shrink-0\" aria-hidden />\n          <span aria-hidden>{dir === \"flat\" ? null : amount}</span>\n          <span className=\"sr-only\">{spoken}</span>\n        </span>\n        {d.label != null && <span className=\"text-[var(--text-muted)]\">{d.label}</span>}\n      </div>\n    );\n  }\n\n  // ── Headline ──\n  const valueClass = cn(\n    \"whitespace-nowrap font-semibold tabular-nums\",\n    VALUE_TEXT[size],\n    toneClass(tone, value),\n  );\n  const headline = loading ? (\n    <span id={valueId} className=\"relative block py-0.5\">\n      <span aria-hidden className={cn(SKELETON, \"block h-6 w-24 max-w-full\")} />\n      <span className=\"sr-only\">{text.loading}</span>\n    </span>\n  ) : hasValue ? (\n    <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && \"ms-auto\")}>\n      {show(value)}\n      {unit != null && (\n        <span className=\"ms-1 text-[0.7em] font-medium text-[var(--text-muted)]\">{unit}</span>\n      )}\n    </span>\n  ) : (\n    <span id={valueId} className={cn(\"relative\", valueClass, \"text-[var(--text-muted)]\")}>\n      <span aria-hidden>—</span>\n      <span className=\"sr-only\">{text.noValue}</span>\n    </span>\n  );\n\n  const graphic =\n    loading ? null : sparkline ??\n      (trend && (\n        <Sparkline\n          data={trend}\n          fluid\n          height={size === \"sm\" ? 20 : 28}\n          label={labelText}\n          formatValue={fmt}\n          locale={kitLocale}\n          tone={tone === \"signed\" ? \"signed\" : tone === \"neutral\" ? \"chart\" : tone}\n          data-private={priv}\n        />\n      ));\n\n  return (\n    <Card\n      {...rest}\n      aria-busy={loading || undefined}\n      className={cn(\n        // @container: the headline sizes read the tile's width. relative: the stretched\n        // link's overlay. overflow-hidden: at pathological widths a figure clips inside\n        // the border instead of painting over the neighbouring tile.\n        \"@container relative flex min-w-0 flex-col overflow-hidden\",\n        PADDING[size],\n        interactive && \"transition-colors hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-2\">\n        <div className=\"flex min-w-0 flex-1 items-center gap-1 break-words text-xs uppercase tracking-wide text-[var(--text-muted)]\">\n          <span className=\"min-w-0\">{labelNode}</span>\n          {/* Above the stretched link's overlay, so it stays hoverable and focusable. */}\n          {hint && <FieldHint label={hint} side=\"top\" className=\"relative z-10 shrink-0\" />}\n        </div>\n        {icon != null && (\n          <span aria-hidden className=\"shrink-0 text-[var(--text-muted)] [&_svg]:size-4\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      {valueLabel != null ? (\n        // Period-left / value-right, matching the sub-rows below it. flex-wrap lets a\n        // too-long amount drop to its own end-aligned line instead of overflowing.\n        <div className=\"mt-1 flex flex-wrap items-baseline gap-x-1.5\">\n          <span className=\"shrink-0 text-xs uppercase tracking-wide text-[var(--text-muted)]\">{valueLabel}</span>\n          {headline}\n        </div>\n      ) : (\n        <div className=\"mt-1\">{headline}</div>\n      )}\n\n      {deltaNode}\n      {description != null && <div className=\"mt-1 text-xs text-[var(--text-muted)]\">{description}</div>}\n      {graphic && <div className=\"mt-2\">{graphic}</div>}\n\n      {!loading && subValues && subValues.length > 0 && (\n        <dl className=\"mt-1.5 space-y-0.5\">\n          {subValues.map((sv, i) => {\n            const svTone = sv.tone ?? (tone === \"neutral\" ? undefined : tone);\n            return (\n              <div\n                key={i}\n                className=\"flex flex-wrap items-baseline gap-x-2 text-xs tabular-nums text-[var(--text-muted)]\"\n              >\n                <dt className=\"uppercase tracking-wide\">{sv.label}</dt>\n                <dd\n                  data-private={priv}\n                  className={cn(\"ms-auto whitespace-nowrap\", svTone && [toneClass(svTone, sv.value), \"opacity-75\"])}\n                >\n                  {show(sv.value)}\n                </dd>\n              </div>\n            );\n          })}\n        </dl>\n      )}\n\n      {footer != null && <div className=\"mt-2\">{footer}</div>}\n    </Card>\n  );\n}\n\nexport interface StatTileGridProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** The narrowest a tile may get before the grid drops a column. The default fits\n   *  two tiles on a 320px phone. */\n  minTileWidth?: string;\n}\n\n/**\n * The row of tiles every dashboard in the three apps lays out by hand, each with its\n * own breakpoint ladder (`grid-cols-2 md:grid-cols-4 min-[2400px]:grid-cols-8` …).\n * Those ladders read the VIEWPORT and so ignored the sidebar: 6-up tiles at 155px in\n * the band where the sidebar was open. This fits as many columns as `minTileWidth`\n * allows in the space the grid actually has, and needs no breakpoint at all.\n */\nexport function StatTileGrid({ minTileWidth = \"9rem\", className, style, ...rest }: StatTileGridProps) {\n  const columns: CSSProperties = {\n    gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${minTileWidth}), 1fr))`,\n  };\n  return <div {...rest} className={cn(\"grid gap-3\", className)} style={{ ...columns, ...style }} />;\n}\n"],"mappings":"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","names":[]}

package/dist/components/swipeable-row.d.ts

@@ -25,8 +25,14 @@ interface SwipeableRowProps {
     right?: SwipeAction[];
     /** Actions committed by dragging LEFT, nearest threshold first. */
     left?: SwipeAction[];
-    /** Turn the gesture off — an open editor, a pending mutation, a locked row. */
+    /** Turn the gesture off — an open editor, a pending mutation, a locked row. This
+     *  also withdraws the keyboard buttons below: a row that must not be acted on must
+     *  not be actionable by ANY input. */
     enabled?: boolean;
+    /** Names the revealed action buttons as a set ("Row actions"), for a reader that
+     *  reaches the group before it reaches any one button. Default:
+     *  `swipeableRow.actions` from the {@link UiKitProvider}, else English. */
+    actionsLabel?: string;
     className?: string;
     children: ReactNode;
 }
@@ -54,7 +60,24 @@ interface SwipeableRowProps {
  * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe
  * would also fire whatever click handler the row content carries (expanding it, opening
  * a dialog) on top of the action it just committed.
+ *
+ * ## The keyboard path is buttons, and deliberately not a typed gesture
+ *
+ * Every action here used to live exclusively inside a pointer drag — `onCommit` had no
+ * other caller — so with a keyboard, with a screen reader, or on any input that cannot
+ * express 120px of horizontal travel, the row's actions did not exist at all. That is
+ * not a rough edge on a phone control: {@link DataTable} mounts this for every row of
+ * its mobile layout, and the actions an app puts here are its destructive ones.
+ *
+ * The rejected fix was to map the gesture onto keys — arrows nudging `dx`, a chord that
+ * "swipes". That invents a private idiom with nothing to discover it by, and it makes
+ * the keyboard imitate a touchscreen instead of doing the job the touchscreen is doing.
+ * So each action is ALSO a real button, `sr-only` until it takes focus and then shown at
+ * the row's trailing edge, firing the identical `onCommit`: one definition of what an
+ * action is, two ways to reach it, and nothing to drift apart. `sr-only` hides from
+ * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be
+ * done to it rather than keeping it behind a gesture nobody can hear.
  */
-declare function SwipeableRow({ right, left, enabled, className, children, }: SwipeableRowProps): react.JSX.Element;
+declare function SwipeableRow({ right, left, enabled, actionsLabel, className, children, }: SwipeableRowProps): react.JSX.Element;
 
 export { type SwipeAction, SwipeableRow, type SwipeableRowProps };

package/dist/components/swipeable-row.js

@@ -1,15 +1,21 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { useRowSwipe } from "../hooks/use-row-swipe.js";
+import { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 const PEEK_PX = 40;
 function SwipeableRow({
   right,
   left,
   enabled = true,
+  actionsLabel,
   className,
   children
 }) {
+  const labels = useKitLabels("swipeableRow", DEFAULT_SWIPEABLE_ROW_LABELS, {
+    actions: actionsLabel
+  });
   const rowRef = useRef(null);
   const [rowWidth, setRowWidth] = useState(0);
   useEffect(() => {
@@ -106,6 +112,31 @@ function SwipeableRow({
         ...active ? swipe.handlers : {},
         children
       }
+    ),
+    active && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-label": labels.actions,
+        className: "pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center gap-1 pr-2",
+        children: [...rightActions, ...leftActions].map((action, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: action.onCommit,
+            className: cn(
+              "sr-only whitespace-nowrap rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs font-medium text-[var(--text-primary)] shadow-sm",
+              "focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5",
+              "focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+            ),
+            children: [
+              action.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "[&_svg]:size-4", children: action.icon }),
+              action.label
+            ]
+          },
+          `${action.label}-${i}`
+        ))
+      }
     )
   ] });
 }

package/dist/components/swipeable-row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The two background classes are the idle and armed states. Before the first\n * threshold is crossed the panel previews the nearest action in its IDLE colour, so\n * the user can see what a little more drag will do; crossing the threshold flips it to\n * `armedClassName`. Passing the same value for both simply removes that feedback.\n */\nexport interface SwipeAction {\n  onCommit: () => void;\n  label: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n  /** Background utility class while the action is previewed but not yet armed. */\n  className: string;\n  /** Background utility class once the drag has passed this action's threshold. */\n  armedClassName: string;\n}\n\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. */\n  enabled?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from dimmed to solid, the icon grows and gains a filled disc, and the\n * label turns bold — plus the existing haptic tick per newly armed stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Written during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms) and `setState` in an effect body is an eslint error in\n  // the consuming app. The value is derived from this render's own dx, so a\n  // concurrent re-render recomputes it identically.\n  const lastSide = useRef<\"left\" | \"right\">(\"right\");\n  if (dx !== 0) lastSide.current = dx < 0 ? \"left\" : \"right\";\n  const draggingLeft = dx !== 0 ? dx < 0 : lastSide.current === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {active && shown && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium text-white transition-all\",\n            // Dimmed until the drag has actually passed a threshold: \"nothing will\n            // happen yet\" has to look different from \"let go and this fires\", and on\n            // a moving row a one-step colour change was too quiet to notice.\n            armed ? \"opacity-100\" : \"opacity-60\",\n            armed ? shown.armedClassName : shown.className,\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen.\n            draggingLeft && \"flex-row-reverse\",\n          )}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance.\n                armed ? \"size-8 scale-110 bg-white/25\" : \"size-7 bg-white/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-[var(--bg-surface)]\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The two background classes are the idle and armed states. Before the first\n * threshold is crossed the panel previews the nearest action in its IDLE colour, so\n * the user can see what a little more drag will do; crossing the threshold flips it to\n * `armedClassName`. Passing the same value for both simply removes that feedback.\n */\nexport interface SwipeAction {\n  onCommit: () => void;\n  label: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n  /** Background utility class while the action is previewed but not yet armed. */\n  className: string;\n  /** Background utility class once the drag has passed this action's threshold. */\n  armedClassName: string;\n}\n\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. This\n   *  also withdraws the keyboard buttons below: a row that must not be acted on must\n   *  not be actionable by ANY input. */\n  enabled?: boolean;\n  /** Names the revealed action buttons as a set (\"Row actions\"), for a reader that\n   *  reaches the group before it reaches any one button. Default:\n   *  `swipeableRow.actions` from the {@link UiKitProvider}, else English. */\n  actionsLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from dimmed to solid, the icon grows and gains a filled disc, and the\n * label turns bold — plus the existing haptic tick per newly armed stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n *\n * ## The keyboard path is buttons, and deliberately not a typed gesture\n *\n * Every action here used to live exclusively inside a pointer drag — `onCommit` had no\n * other caller — so with a keyboard, with a screen reader, or on any input that cannot\n * express 120px of horizontal travel, the row's actions did not exist at all. That is\n * not a rough edge on a phone control: {@link DataTable} mounts this for every row of\n * its mobile layout, and the actions an app puts here are its destructive ones.\n *\n * The rejected fix was to map the gesture onto keys — arrows nudging `dx`, a chord that\n * \"swipes\". That invents a private idiom with nothing to discover it by, and it makes\n * the keyboard imitate a touchscreen instead of doing the job the touchscreen is doing.\n * So each action is ALSO a real button, `sr-only` until it takes focus and then shown at\n * the row's trailing edge, firing the identical `onCommit`: one definition of what an\n * action is, two ways to reach it, and nothing to drift apart. `sr-only` hides from\n * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be\n * done to it rather than keeping it behind a gesture nobody can hear.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  actionsLabel,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const labels = useKitLabels(\"swipeableRow\", DEFAULT_SWIPEABLE_ROW_LABELS, {\n    actions: actionsLabel,\n  });\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Written during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms) and `setState` in an effect body is an eslint error in\n  // the consuming app. The value is derived from this render's own dx, so a\n  // concurrent re-render recomputes it identically.\n  const lastSide = useRef<\"left\" | \"right\">(\"right\");\n  if (dx !== 0) lastSide.current = dx < 0 ? \"left\" : \"right\";\n  const draggingLeft = dx !== 0 ? dx < 0 : lastSide.current === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {active && shown && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium text-white transition-all\",\n            // Dimmed until the drag has actually passed a threshold: \"nothing will\n            // happen yet\" has to look different from \"let go and this fires\", and on\n            // a moving row a one-step colour change was too quiet to notice.\n            armed ? \"opacity-100\" : \"opacity-60\",\n            armed ? shown.armedClassName : shown.className,\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen.\n            draggingLeft && \"flex-row-reverse\",\n          )}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance.\n                armed ? \"size-8 scale-110 bg-white/25\" : \"size-7 bg-white/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-[var(--bg-surface)]\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n      {active && (\n        <div\n          role=\"group\"\n          aria-label={labels.actions}\n          // OUTSIDE the sliding div on purpose: an action that travels with the row it\n          // acts on is a moving target, and the drag transform would carry it off the\n          // screen mid-gesture.\n          //\n          // `pointer-events-none` here, restored on a button only once it HAS focus: a\n          // sr-only button is clipped to nothing but is still a hit target, and this\n          // strip sits at the row's right edge — exactly where a leftward drag begins.\n          // A gesture that silently failed to start because it landed on an invisible\n          // button is not a bug anyone would find by looking at the screen.\n          className=\"pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center gap-1 pr-2\"\n        >\n          {/* Both sides, each still nearest-threshold first, so the tab order reads in\n              the order the gesture arms them. */}\n          {[...rightActions, ...leftActions].map((action, i) => (\n            <button\n              key={`${action.label}-${i}`}\n              type=\"button\"\n              onClick={action.onCommit}\n              className={cn(\n                \"sr-only whitespace-nowrap rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs font-medium text-[var(--text-primary)] shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                \"focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n              )}\n            >\n              {/* The label is the button's accessible name, so the caller's icon is\n                  decoration on top of it rather than a second reading of it. */}\n              {action.icon && (\n                <span aria-hidden=\"true\" className=\"[&_svg]:size-4\">\n                  {action.icon}\n                </span>\n              )}\n              {action.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}