@eifi1/ui-kit 0.17.0 → 0.19.0

package/dist/components/progress-bar.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../lib/cn.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { toneTextClass } from "./signed-amount.js";
 const DEFAULT_PROGRESS_BAR_LABELS = {
   unlimited: "Unlimited",
   overLimit: (amount) => `${amount} over the limit`
@@ -51,6 +52,7 @@ function ProgressBar({
   segments,
   legend = false,
   legendValue,
+  legendTone = "muted",
   hint,
   overage,
   sensitive = false,
@@ -202,7 +204,12 @@ function ProgressBar({
         {
           "data-part": "legend-value",
           "data-private": priv,
-          className: "ms-auto shrink-0 text-xs tabular-nums text-[var(--text-muted)]",
+          className: cn(
+            "ms-auto shrink-0 text-xs tabular-nums",
+            toneTextClass(
+              (typeof legendTone === "function" ? legendTone(seg, i) : legendTone) ?? "muted"
+            )
+          ),
           children: legendValue ? legendValue(seg, formatPart(seg.value), i) : formatPart(seg.value)
         }
       )

package/dist/components/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/** The words a progress bar adds of its own. */\nexport interface ProgressBarLabels {\n  /** Shown after the value when `max={null}`: a quota with no ceiling. */\n  unlimited: string;\n  /** The `overage` line: how far past `max` the value is. `amount` is formatted. */\n  overLimit: (amount: string) => string;\n}\n\nexport const DEFAULT_PROGRESS_BAR_LABELS: ProgressBarLabels = {\n  unlimited: \"Unlimited\",\n  overLimit: (amount) => `${amount} over the limit`,\n};\n\n/**\n * `income` / `expense` are the money pair (`--money-income` / `--money-expense`), the\n * names `Chip`, `StatTile` and `Sparkline` already use for them: a share bar of what\n * came in or went out is money, and painting it `success` / `warning` said \"good\" and\n * \"careful\" about a figure that is neither. keksdose's report meters (food-group-card,\n * drilldown-modal) sit beside amounts that are already in the money colours.\n */\nexport type ProgressBarTone =\n  | \"brand\"\n  | \"neutral\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\"\n  | \"income\"\n  | \"expense\";\n/**\n * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a\n * letter because the letters are taken in order — an `xs` at 6px would be THICKER than\n * `sm` — and renaming `sm` would move every bar already on it. 6px is the Slider's\n * track and keksdose's hand-drawn meters (`h-1.5`, landing-visuals), for a bar under a\n * line of text where 8px outweighs the text.\n */\nexport type ProgressBarSize = \"sm\" | \"slim\" | \"md\" | \"lg\";\n\nconst FILL: Record<ProgressBarTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: \"h-1\", slim: \"h-1.5\", md: \"h-2\", lg: \"h-3\" };\n\n// A segment with no tone of its own takes the next categorical chart colour, so a\n// stacked bar of unnamed parts is still a set of tellable parts rather than one fill.\nconst SERIES_FILL = [\n  \"bg-[var(--chart-1)]\",\n  \"bg-[var(--chart-2)]\",\n  \"bg-[var(--chart-3)]\",\n  \"bg-[var(--chart-4)]\",\n  \"bg-[var(--chart-5)]\",\n  \"bg-[var(--chart-6)]\",\n  \"bg-[var(--chart-7)]\",\n  \"bg-[var(--chart-8)]\",\n  \"bg-[var(--chart-9)]\",\n];\n\n/** Each segment's fill classes: its own classes, else its tone, else (with no `color`)\n *  the next chart colour. \"Next\" counts the UNCOLOURED segments only — a segment with\n *  its own `className`/`tone`/`color` does not use up `--chart-1`, so an \"Other\" in grey\n *  ahead of two plain parts leaves them `--chart-1` and `--chart-2`. */\nfunction segmentFills(segments: ProgressBarSegment[]): Array<string | undefined> {\n  let next = 0;\n  return segments.map((seg) => {\n    if (seg.className) return seg.className;\n    if (seg.tone) return FILL[seg.tone];\n    return seg.color ? undefined : SERIES_FILL[next++ % SERIES_FILL.length];\n  });\n}\n\n/** One part of a stacked bar. See {@link ProgressBarProps.segments}. */\nexport interface ProgressBarSegment {\n  /** Its size, on the bar's own `min`–`max` scale. */\n  value: number;\n  /** A kit tone. Left out (and no `color`/`className`), the next `--chart-N` colour. */\n  tone?: ProgressBarTone;\n  /** Any CSS colour (`var(--token)`), for a palette the tones do not cover. Wins over `tone`. */\n  color?: string;\n  /** Classes for the segment's fill — keksdose's `STEP_CLASS` ramp. Wins over `tone`. */\n  className?: string;\n  /** The part's name: said in the bar's `aria-valuetext` and shown in the legend. */\n  label?: ReactNode;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n  /**\n   * List it in the `legend` but leave it out of the bar — its value, its share of the\n   * `aria-valuetext`, and the sum. keksdose's cut card (reports/cut-card:132) names\n   * EVERY bucket under its bar, the empty ones included, while the bar draws only the\n   * ones with a share: pass the empty buckets as `legendOnly` entries.\n   */\n  legendOnly?: boolean;\n}\n\nexport interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  /**\n   * `\"span\"` builds the bar from spans, for a place only phrasing content may go: inside\n   * a button or a link (ListItem's `content`). The `legend` stays a list, so leave it off\n   * there. Default `\"div\"`.\n   */\n  as?: \"div\" | \"span\";\n  /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way\n   *  and nobody knows how much is left (an import that reports no count). */\n  value?: number;\n  min?: number;\n  /**\n   * The top of the scale (default 100). `null` is a quota with NO ceiling — kastlan's\n   * billing usage on an unlimited plan (usage-progress-bar:25): nothing to fill, so no\n   * bar is drawn; the label row shows the value and \"Unlimited\" (`progressBar.unlimited`)\n   * as plain text. `formatValue` is then called with `max` = `Infinity`; without it,\n   * the value is a plain number in the kit's locale.\n   */\n  max?: number | null;\n  /**\n   * `progress` (default): a task moving toward completion — `role=\"progressbar\"`.\n   * `meter`: a share of a known whole that is not going anywhere (budget used, disk\n   * space, one category's slice of spending) — `role=\"meter\"`. keksdose's share bars\n   * were progress bars to a screen reader, which reads \"busy\" into a figure that is\n   * simply a figure. A meter is never indeterminate; a missing value reads as `min`.\n   */\n  variant?: \"progress\" | \"meter\";\n  /** Visible label above the bar, and its accessible name. Without it, pass\n   *  `aria-label` (an indeterminate bar with neither is named `common.loading`). */\n  label?: ReactNode;\n  /** Show the value text at the end of the label row. */\n  showValue?: boolean;\n  /**\n   * The value as words — both the visible `showValue` text and `aria-valuetext`.\n   * Default: the fraction as a percentage in the kit's locale (\"42 %\" in French).\n   * Pass one for anything that is not a percentage: `(v, max) => \\`${v} of ${max} files\\``.\n   */\n  formatValue?: (value: number, max: number, min: number) => string;\n  tone?: ProgressBarTone;\n  size?: ProgressBarSize;\n  locale?: string;\n  /**\n   * Draw a METER OF PARTS: one bar, several fills side by side in order, a 2px gap\n   * between them — keksdose's discretionary-spending bar (cut-card:133), a whole\n   * split into the steps of a scale. Forces `variant=\"meter\"`: parts of a whole are\n   * never \"busy\". `aria-valuenow` is the sum; `aria-valuetext` names every part\n   * (\"Rent: 40%, Food: 25%\"), each part's value through `formatValue` and joined in the\n   * kit's locale — the words keksdose's hand-drawn bar had to hide from a reader\n   * altogether, leaving the legend as the only way in. The sum is clamped to `max`,\n   * and parts past it are cut off at the track's end.\n   */\n  segments?: ProgressBarSegment[];\n  /** With `segments`: a list under the bar naming each part with its swatch and value\n   *  — the table view of the bar, in text tokens rather than the segment colour. */\n  legend?: boolean;\n  /**\n   * What a legend row shows at its end, in place of the part's formatted value — which\n   * it is handed, with the segment and its index. That value is the part's OWN, signed\n   * and unclamped (`formatValue`, or a percentage of the scale): a part of −40 on a\n   * 0–100 scale says \"-40%\" though the bar draws nothing for it. keksdose's cut card\n   * shows the share AND a private outflow amount per bucket (cut-card:150), which one\n   * figure could not:\n   * `legendValue={(seg, share) => <>{share} <Amount … /></>}`.\n   */\n  legendValue?: (segment: ProgressBarSegment, formatted: string, index: number) => ReactNode;\n  /** A muted line under the bar — the plan's reset date, \"3 of 5 seats in use\". It\n   *  describes the bar (`aria-describedby`). */\n  hint?: ReactNode;\n  /**\n   * When `value` is past `max`, say by how much, in a danger-coloured line under the bar\n   * (kastlan usage-progress-bar:46): `true` prints `progressBar.overLimit` with the\n   * excess as a plain number; a function renders the line itself from the excess (a\n   * currency, \"2 seats\"). The bar stays full at `max` either way — colour it with\n   * `tone=\"danger\"` if it should read as over. Ignored for `segments` and `max={null}`.\n   */\n  overage?: boolean | ((over: number) => ReactNode);\n  /**\n   * Tag every figure the bar PRINTS `data-private`, so the host's demo-mode rule blurs\n   * it — the attribute `StatTile sensitive` and `Tooltip redact` carry: the `showValue`\n   * text, each `legend` row's value (yours from `legendValue` too), the unlimited\n   * figure and the `overage` line. The track, the swatches and the part names stay\n   * readable — a blurred bar is no picture at all. Before this an app with a demo-mode\n   * blur had to pass `legendValue` only to wrap the figure in a tagged span (keksdose).\n   * The `aria-valuetext` is not touched: a screen reader is not a screen-share.\n   */\n  sensitive?: boolean;\n  labels?: Partial<ProgressBarLabels>;\n}\n\n/**\n * A horizontal bar that fills toward `max`.\n *\n * keksdose (import progress, budget share bars) and kastlan (upload and job\n * progress) each drew their own div-in-a-div. None had a role, so a reader heard\n * nothing at all; the share bars that did have one claimed to be progress.\n *\n * `aria-valuetext` is always set when there is a value: a bare `aria-valuenow=\"37\"`\n * is read as \"37\" by some readers and \"37 percent\" by others, and neither is right\n * when `max` is 212 files.\n *\n * The indeterminate sweep stops under `prefers-reduced-motion`. It becomes a still,\n * half-strength bar across the whole track — still visibly \"something is happening\",\n * with nothing moving. The sweep is a Tailwind arbitrary `animate-[…]` rather than\n * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an\n * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.\n */\nexport function ProgressBar({\n  value,\n  min = 0,\n  max: maxProp = 100,\n  variant = \"progress\",\n  label,\n  showValue = false,\n  formatValue,\n  tone = \"brand\",\n  size = \"md\",\n  locale,\n  segments,\n  legend = false,\n  legendValue,\n  hint,\n  overage,\n  sensitive = false,\n  labels,\n  className,\n  as = \"div\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: ProgressBarProps) {\n  // `as=\"span\"`: the same bar from phrasing elements only, so it is valid inside a\n  // <button> or <a> — ListItem's `content` puts a budget bar inside the row's target\n  // (keksdose P2). Every span is made a block except those already laid out as flex.\n  const Tag = as;\n  const inlineClass = as === \"span\" ? \"block [&_span:not(.flex):not(.inline-flex)]:block\" : undefined;\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const text = useKitLabels(\"progressBar\", DEFAULT_PROGRESS_BAR_LABELS, labels);\n  const kitLocale = useKitLocale(locale);\n  const labelId = useId();\n  const priv = sensitive ? \"\" : undefined;\n  const hintId = useId();\n  const hintNode =\n    hint != null ? (\n      <p id={hintId} data-part=\"hint\" className=\"mt-1 text-xs text-[var(--text-muted)]\">\n        {hint}\n      </p>\n    ) : null;\n\n  if (maxProp === null) {\n    // No ceiling: no bar, no role — a meter with no maximum is not one. The value and\n    // \"Unlimited\" are the content, so they are plain visible text.\n    const shown =\n      value === undefined || !Number.isFinite(value)\n        ? undefined\n        : formatValue\n          ? formatValue(value, Infinity, min)\n          : new Intl.NumberFormat(kitLocale).format(value);\n    return (\n      <Tag {...rest} className={cn(\"min-w-0\", inlineClass, className)} data-state=\"unlimited\">\n        <Tag className=\"flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          <span data-part=\"unlimited\" data-private={priv} className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n            {shown !== undefined && `${shown} · `}\n            {text.unlimited}\n          </span>\n        </Tag>\n        {hintNode}\n      </Tag>\n    );\n  }\n  const max = maxProp;\n\n  const stacked = segments !== undefined;\n  const meter = stacked || variant === \"meter\";\n  const span = max - min;\n  const partValue = (v: number) => (Number.isFinite(v) ? Math.max(0, v - min) : 0);\n  // Colours are dealt over EVERY segment, legend-only ones included, so an entry keeps\n  // its swatch whether or not it is in the bar this time.\n  const fills = stacked ? segmentFills(segments) : [];\n  const barParts = stacked ? segments.filter((seg) => !seg.legendOnly) : [];\n  const partTotal = stacked ? min + barParts.reduce((sum, seg) => sum + partValue(seg.value), 0) : undefined;\n  const format = (v: number) =>\n    formatValue\n      ? formatValue(v, max, min)\n      : new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(\n          span <= 0 ? 0 : (Math.min(max, Math.max(min, v)) - min) / span,\n        );\n  // A PART is stated as its own value, sign and all — not as the slice of track it\n  // draws. The bar cannot draw a negative part (a refund inside a month's spending) or\n  // one past `max`, but the legend and the reader can still say it: before 0.16 a\n  // −CHF 40 part read \"0 %\" in both, and keksdose had to pass `legendValue` just to get\n  // the minus back. For a part inside `min`–`max` this is the same text as before.\n  const formatPart = (v: number) => {\n    if (!Number.isFinite(v)) return format(min);\n    if (formatValue) return formatValue(v, max, min);\n    return new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(\n      span <= 0 ? 0 : (v - min) / span,\n    );\n  };\n  const partTexts = stacked\n    ? barParts.map((seg) => {\n        const text = formatPart(seg.value);\n        return typeof seg.label === \"string\" || typeof seg.label === \"number\"\n          ? common.fieldValue(String(seg.label), text)\n          : text;\n      })\n    : [];\n  const current =\n    partTotal ?? (value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value);\n  const indeterminate = current === undefined;\n  const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));\n  const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;\n\n  const valueText = clamped === undefined ? undefined : format(clamped);\n  const ariaValueText =\n    stacked && partTexts.length > 0\n      ? new Intl.ListFormat(kitLocale, { style: \"short\", type: \"unit\" }).format(partTexts)\n      : valueText;\n\n  const over =\n    overage && !stacked && value !== undefined && Number.isFinite(value) && value > max ? value - max : 0;\n  const overageNode =\n    over > 0 ? (\n      <p id={`${hintId}-over`} data-part=\"overage\" data-private={priv} className=\"mt-1 text-xs text-[var(--danger)]\">\n        {typeof overage === \"function\"\n          ? overage(over)\n          : text.overLimit(new Intl.NumberFormat(kitLocale).format(over))}\n      </p>\n    ) : null;\n  const describedBy =\n    [ariaDescribedBy, hintNode && hintId, overageNode && `${hintId}-over`].filter(Boolean).join(\" \") || undefined;\n\n  const labelledBy = ariaLabelledBy ?? (label != null ? labelId : undefined);\n  const name = labelledBy ? undefined : (ariaLabel ?? (indeterminate ? common.loading : undefined));\n\n  return (\n    <Tag className={cn(\"min-w-0\", inlineClass, className)} data-state={indeterminate ? \"indeterminate\" : \"determinate\"}>\n      {(label != null || (showValue && valueText !== undefined)) && (\n        <Tag className=\"mb-1 flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          {showValue && valueText !== undefined && (\n            // Hidden: the same words are the bar's aria-valuetext, and reading them\n            // twice in a row is noise.\n            <span aria-hidden data-part=\"value\" data-private={priv} className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n              {valueText}\n            </span>\n          )}\n        </Tag>\n      )}\n      <Tag\n        {...rest}\n        role={meter ? \"meter\" : \"progressbar\"}\n        aria-label={name}\n        aria-labelledby={labelledBy}\n        aria-describedby={describedBy}\n        aria-valuemin={indeterminate ? undefined : min}\n        aria-valuemax={indeterminate ? undefined : max}\n        aria-valuenow={clamped}\n        aria-valuetext={ariaValueText}\n        aria-busy={!meter && indeterminate ? true : undefined}\n        // `relative` + `overflow-hidden`: the indeterminate segment is positioned in\n        // here and must not paint past the rounded ends.\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-[var(--bg-active)]\", TRACK_HEIGHT[size])}\n      >\n        {stacked ? (\n          // The parts in a flex row with a 2px gap, so two neighbouring steps of one\n          // hue are parted by the track rather than by their difference in lightness.\n          <Tag className=\"flex h-full w-full gap-0.5\">\n            {segments.map((seg, i) =>\n              seg.legendOnly ? null : (\n                <Tag\n                  key={seg.key ?? i}\n                  data-part=\"segment\"\n                  className={cn(\n                    \"h-full shrink-0 rounded-full transition-[width] duration-300 motion-reduce:transition-none\",\n                    fills[i],\n                  )}\n                  style={{\n                    width: `${span <= 0 ? 0 : (partValue(seg.value) / span) * 100}%`,\n                    backgroundColor: seg.className ? undefined : seg.color,\n                  }}\n                />\n              ),\n            )}\n          </Tag>\n        ) : indeterminate ? (\n          <Tag\n            data-part=\"fill\"\n            className={cn(\n              // `left-0`, deliberately physical: the keyframes (tokens.css\n              // `indeterminate-sweep`) translate along the physical x axis, and under\n              // RTL the same keyframes are run in REVERSE — from the right edge back\n              // to the left. A logical `start-0` would park the segment at the right\n              // in RTL and the reversed sweep would then start off-screen.\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[indeterminate-sweep_1.4s_ease-in-out_infinite] rtl:[animation-direction:reverse]\",\n              \"motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-50\",\n              FILL[tone],\n            )}\n          />\n        ) : (\n          <Tag\n            data-part=\"fill\"\n            // Block flow starts at the inline start, so a plain width fills from the\n            // right under `dir=\"rtl\"` with nothing extra.\n            className={cn(\"h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none\", FILL[tone])}\n            style={{ width: `${fraction * 100}%` }}\n          />\n        )}\n      </Tag>\n      {stacked && legend && segments.length > 0 && (\n        <ul className=\"mt-2 space-y-1 text-sm\" data-part=\"legend\">\n          {segments.map((seg, i) => (\n            <li key={seg.key ?? i} className=\"flex items-center gap-2\">\n              <span\n                aria-hidden\n                className={cn(\n                  \"size-2.5 shrink-0 rounded-sm\",\n                  fills[i],\n                )}\n                style={{ backgroundColor: seg.className ? undefined : seg.color }}\n              />\n              {seg.label != null && (\n                <span className=\"min-w-0 flex-1 truncate text-[var(--text-secondary)]\">{seg.label}</span>\n              )}\n              <span\n                data-part=\"legend-value\"\n                data-private={priv}\n                className=\"ms-auto shrink-0 text-xs tabular-nums text-[var(--text-muted)]\"\n              >\n                {legendValue ? legendValue(seg, formatPart(seg.value), i) : formatPart(seg.value)}\n              </span>\n            </li>\n          ))}\n        </ul>\n      )}\n      {overageNode}\n      {hintNode}\n    </Tag>\n  );\n}\n"],"mappings":"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","names":["text"]}
+{"version":3,"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { toneTextClass } from \"./signed-amount\";\nimport type { TextTone } from \"./signed-amount\";\n\n/** The words a progress bar adds of its own. */\nexport interface ProgressBarLabels {\n  /** Shown after the value when `max={null}`: a quota with no ceiling. */\n  unlimited: string;\n  /** The `overage` line: how far past `max` the value is. `amount` is formatted. */\n  overLimit: (amount: string) => string;\n}\n\nexport const DEFAULT_PROGRESS_BAR_LABELS: ProgressBarLabels = {\n  unlimited: \"Unlimited\",\n  overLimit: (amount) => `${amount} over the limit`,\n};\n\n/**\n * `income` / `expense` are the money pair (`--money-income` / `--money-expense`), the\n * names `Chip`, `StatTile` and `Sparkline` already use for them: a share bar of what\n * came in or went out is money, and painting it `success` / `warning` said \"good\" and\n * \"careful\" about a figure that is neither. keksdose's report meters (food-group-card,\n * drilldown-modal) sit beside amounts that are already in the money colours.\n */\nexport type ProgressBarTone =\n  | \"brand\"\n  | \"neutral\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\"\n  | \"income\"\n  | \"expense\";\n/**\n * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a\n * letter because the letters are taken in order — an `xs` at 6px would be THICKER than\n * `sm` — and renaming `sm` would move every bar already on it. 6px is the Slider's\n * track and keksdose's hand-drawn meters (`h-1.5`, landing-visuals), for a bar under a\n * line of text where 8px outweighs the text.\n */\nexport type ProgressBarSize = \"sm\" | \"slim\" | \"md\" | \"lg\";\n\nconst FILL: Record<ProgressBarTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: \"h-1\", slim: \"h-1.5\", md: \"h-2\", lg: \"h-3\" };\n\n// A segment with no tone of its own takes the next categorical chart colour, so a\n// stacked bar of unnamed parts is still a set of tellable parts rather than one fill.\nconst SERIES_FILL = [\n  \"bg-[var(--chart-1)]\",\n  \"bg-[var(--chart-2)]\",\n  \"bg-[var(--chart-3)]\",\n  \"bg-[var(--chart-4)]\",\n  \"bg-[var(--chart-5)]\",\n  \"bg-[var(--chart-6)]\",\n  \"bg-[var(--chart-7)]\",\n  \"bg-[var(--chart-8)]\",\n  \"bg-[var(--chart-9)]\",\n];\n\n/** Each segment's fill classes: its own classes, else its tone, else (with no `color`)\n *  the next chart colour. \"Next\" counts the UNCOLOURED segments only — a segment with\n *  its own `className`/`tone`/`color` does not use up `--chart-1`, so an \"Other\" in grey\n *  ahead of two plain parts leaves them `--chart-1` and `--chart-2`. */\nfunction segmentFills(segments: ProgressBarSegment[]): Array<string | undefined> {\n  let next = 0;\n  return segments.map((seg) => {\n    if (seg.className) return seg.className;\n    if (seg.tone) return FILL[seg.tone];\n    return seg.color ? undefined : SERIES_FILL[next++ % SERIES_FILL.length];\n  });\n}\n\n/** One part of a stacked bar. See {@link ProgressBarProps.segments}. */\nexport interface ProgressBarSegment {\n  /** Its size, on the bar's own `min`–`max` scale. */\n  value: number;\n  /** A kit tone. Left out (and no `color`/`className`), the next `--chart-N` colour. */\n  tone?: ProgressBarTone;\n  /** Any CSS colour (`var(--token)`), for a palette the tones do not cover. Wins over `tone`. */\n  color?: string;\n  /** Classes for the segment's fill — keksdose's `STEP_CLASS` ramp. Wins over `tone`. */\n  className?: string;\n  /** The part's name: said in the bar's `aria-valuetext` and shown in the legend. */\n  label?: ReactNode;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n  /**\n   * List it in the `legend` but leave it out of the bar — its value, its share of the\n   * `aria-valuetext`, and the sum. keksdose's cut card (reports/cut-card:132) names\n   * EVERY bucket under its bar, the empty ones included, while the bar draws only the\n   * ones with a share: pass the empty buckets as `legendOnly` entries.\n   */\n  legendOnly?: boolean;\n}\n\nexport interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  /**\n   * `\"span\"` builds the bar from spans, for a place only phrasing content may go: inside\n   * a button or a link (ListItem's `content`). The `legend` stays a list, so leave it off\n   * there. Default `\"div\"`.\n   */\n  as?: \"div\" | \"span\";\n  /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way\n   *  and nobody knows how much is left (an import that reports no count). */\n  value?: number;\n  min?: number;\n  /**\n   * The top of the scale (default 100). `null` is a quota with NO ceiling — kastlan's\n   * billing usage on an unlimited plan (usage-progress-bar:25): nothing to fill, so no\n   * bar is drawn; the label row shows the value and \"Unlimited\" (`progressBar.unlimited`)\n   * as plain text. `formatValue` is then called with `max` = `Infinity`; without it,\n   * the value is a plain number in the kit's locale.\n   */\n  max?: number | null;\n  /**\n   * `progress` (default): a task moving toward completion — `role=\"progressbar\"`.\n   * `meter`: a share of a known whole that is not going anywhere (budget used, disk\n   * space, one category's slice of spending) — `role=\"meter\"`. keksdose's share bars\n   * were progress bars to a screen reader, which reads \"busy\" into a figure that is\n   * simply a figure. A meter is never indeterminate; a missing value reads as `min`.\n   */\n  variant?: \"progress\" | \"meter\";\n  /** Visible label above the bar, and its accessible name. Without it, pass\n   *  `aria-label` (an indeterminate bar with neither is named `common.loading`). */\n  label?: ReactNode;\n  /** Show the value text at the end of the label row. */\n  showValue?: boolean;\n  /**\n   * The value as words — both the visible `showValue` text and `aria-valuetext`.\n   * Default: the fraction as a percentage in the kit's locale (\"42 %\" in French).\n   * Pass one for anything that is not a percentage: `(v, max) => \\`${v} of ${max} files\\``.\n   */\n  formatValue?: (value: number, max: number, min: number) => string;\n  tone?: ProgressBarTone;\n  size?: ProgressBarSize;\n  locale?: string;\n  /**\n   * Draw a METER OF PARTS: one bar, several fills side by side in order, a 2px gap\n   * between them — keksdose's discretionary-spending bar (cut-card:133), a whole\n   * split into the steps of a scale. Forces `variant=\"meter\"`: parts of a whole are\n   * never \"busy\". `aria-valuenow` is the sum; `aria-valuetext` names every part\n   * (\"Rent: 40%, Food: 25%\"), each part's value through `formatValue` and joined in the\n   * kit's locale — the words keksdose's hand-drawn bar had to hide from a reader\n   * altogether, leaving the legend as the only way in. The sum is clamped to `max`,\n   * and parts past it are cut off at the track's end.\n   */\n  segments?: ProgressBarSegment[];\n  /** With `segments`: a list under the bar naming each part with its swatch and value\n   *  — the table view of the bar, in text tokens rather than the segment colour. */\n  legend?: boolean;\n  /**\n   * What a legend row shows at its end, in place of the part's formatted value — which\n   * it is handed, with the segment and its index. That value is the part's OWN, signed\n   * and unclamped (`formatValue`, or a percentage of the scale): a part of −40 on a\n   * 0–100 scale says \"-40%\" though the bar draws nothing for it. keksdose's cut card\n   * shows the share AND a private outflow amount per bucket (cut-card:150), which one\n   * figure could not:\n   * `legendValue={(seg, share) => <>{share} <Amount … /></>}`.\n   */\n  legendValue?: (segment: ProgressBarSegment, formatted: string, index: number) => ReactNode;\n  /**\n   * The colour of each legend row's figure, as a {@link TextTone} — `toneTextClass`'s\n   * palette, the money pair included. Default `\"muted\"`: the legend explains the bar and\n   * should not outshout the headline above it. One tone for every row, or a function\n   * per row. A tone and not the segment's own `tone`: keksdose's tax card fills its\n   * three parts with one bucket's certainty ramp (`className`), while the FIGURES carry\n   * the bucket's money direction — `legendTone=\"expense\"` for the tax owed — which it\n   * could only say before through `legendValue` and an app-side `Amount`. A function\n   * returning `undefined` keeps that row muted. Applies to `legendValue`'s node too\n   * (it inherits the colour unless it sets its own).\n   */\n  legendTone?: TextTone | ((segment: ProgressBarSegment, index: number) => TextTone | undefined);\n  /** A muted line under the bar — the plan's reset date, \"3 of 5 seats in use\". It\n   *  describes the bar (`aria-describedby`). */\n  hint?: ReactNode;\n  /**\n   * When `value` is past `max`, say by how much, in a danger-coloured line under the bar\n   * (kastlan usage-progress-bar:46): `true` prints `progressBar.overLimit` with the\n   * excess as a plain number; a function renders the line itself from the excess (a\n   * currency, \"2 seats\"). The bar stays full at `max` either way — colour it with\n   * `tone=\"danger\"` if it should read as over. Ignored for `segments` and `max={null}`.\n   */\n  overage?: boolean | ((over: number) => ReactNode);\n  /**\n   * Tag every figure the bar PRINTS `data-private`, so the host's demo-mode rule blurs\n   * it — the attribute `StatTile sensitive` and `Tooltip redact` carry: the `showValue`\n   * text, each `legend` row's value (yours from `legendValue` too), the unlimited\n   * figure and the `overage` line. The track, the swatches and the part names stay\n   * readable — a blurred bar is no picture at all. Before this an app with a demo-mode\n   * blur had to pass `legendValue` only to wrap the figure in a tagged span (keksdose).\n   * The `aria-valuetext` is not touched: a screen reader is not a screen-share.\n   */\n  sensitive?: boolean;\n  labels?: Partial<ProgressBarLabels>;\n}\n\n/**\n * A horizontal bar that fills toward `max`.\n *\n * keksdose (import progress, budget share bars) and kastlan (upload and job\n * progress) each drew their own div-in-a-div. None had a role, so a reader heard\n * nothing at all; the share bars that did have one claimed to be progress.\n *\n * `aria-valuetext` is always set when there is a value: a bare `aria-valuenow=\"37\"`\n * is read as \"37\" by some readers and \"37 percent\" by others, and neither is right\n * when `max` is 212 files.\n *\n * The indeterminate sweep stops under `prefers-reduced-motion`. It becomes a still,\n * half-strength bar across the whole track — still visibly \"something is happening\",\n * with nothing moving. The sweep is a Tailwind arbitrary `animate-[…]` rather than\n * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an\n * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.\n */\nexport function ProgressBar({\n  value,\n  min = 0,\n  max: maxProp = 100,\n  variant = \"progress\",\n  label,\n  showValue = false,\n  formatValue,\n  tone = \"brand\",\n  size = \"md\",\n  locale,\n  segments,\n  legend = false,\n  legendValue,\n  legendTone = \"muted\",\n  hint,\n  overage,\n  sensitive = false,\n  labels,\n  className,\n  as = \"div\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: ProgressBarProps) {\n  // `as=\"span\"`: the same bar from phrasing elements only, so it is valid inside a\n  // <button> or <a> — ListItem's `content` puts a budget bar inside the row's target\n  // (keksdose P2). Every span is made a block except those already laid out as flex.\n  const Tag = as;\n  const inlineClass = as === \"span\" ? \"block [&_span:not(.flex):not(.inline-flex)]:block\" : undefined;\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const text = useKitLabels(\"progressBar\", DEFAULT_PROGRESS_BAR_LABELS, labels);\n  const kitLocale = useKitLocale(locale);\n  const labelId = useId();\n  const priv = sensitive ? \"\" : undefined;\n  const hintId = useId();\n  const hintNode =\n    hint != null ? (\n      <p id={hintId} data-part=\"hint\" className=\"mt-1 text-xs text-[var(--text-muted)]\">\n        {hint}\n      </p>\n    ) : null;\n\n  if (maxProp === null) {\n    // No ceiling: no bar, no role — a meter with no maximum is not one. The value and\n    // \"Unlimited\" are the content, so they are plain visible text.\n    const shown =\n      value === undefined || !Number.isFinite(value)\n        ? undefined\n        : formatValue\n          ? formatValue(value, Infinity, min)\n          : new Intl.NumberFormat(kitLocale).format(value);\n    return (\n      <Tag {...rest} className={cn(\"min-w-0\", inlineClass, className)} data-state=\"unlimited\">\n        <Tag className=\"flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          <span data-part=\"unlimited\" data-private={priv} className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n            {shown !== undefined && `${shown} · `}\n            {text.unlimited}\n          </span>\n        </Tag>\n        {hintNode}\n      </Tag>\n    );\n  }\n  const max = maxProp;\n\n  const stacked = segments !== undefined;\n  const meter = stacked || variant === \"meter\";\n  const span = max - min;\n  const partValue = (v: number) => (Number.isFinite(v) ? Math.max(0, v - min) : 0);\n  // Colours are dealt over EVERY segment, legend-only ones included, so an entry keeps\n  // its swatch whether or not it is in the bar this time.\n  const fills = stacked ? segmentFills(segments) : [];\n  const barParts = stacked ? segments.filter((seg) => !seg.legendOnly) : [];\n  const partTotal = stacked ? min + barParts.reduce((sum, seg) => sum + partValue(seg.value), 0) : undefined;\n  const format = (v: number) =>\n    formatValue\n      ? formatValue(v, max, min)\n      : new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(\n          span <= 0 ? 0 : (Math.min(max, Math.max(min, v)) - min) / span,\n        );\n  // A PART is stated as its own value, sign and all — not as the slice of track it\n  // draws. The bar cannot draw a negative part (a refund inside a month's spending) or\n  // one past `max`, but the legend and the reader can still say it: before 0.16 a\n  // −CHF 40 part read \"0 %\" in both, and keksdose had to pass `legendValue` just to get\n  // the minus back. For a part inside `min`–`max` this is the same text as before.\n  const formatPart = (v: number) => {\n    if (!Number.isFinite(v)) return format(min);\n    if (formatValue) return formatValue(v, max, min);\n    return new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(\n      span <= 0 ? 0 : (v - min) / span,\n    );\n  };\n  const partTexts = stacked\n    ? barParts.map((seg) => {\n        const text = formatPart(seg.value);\n        return typeof seg.label === \"string\" || typeof seg.label === \"number\"\n          ? common.fieldValue(String(seg.label), text)\n          : text;\n      })\n    : [];\n  const current =\n    partTotal ?? (value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value);\n  const indeterminate = current === undefined;\n  const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));\n  const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;\n\n  const valueText = clamped === undefined ? undefined : format(clamped);\n  const ariaValueText =\n    stacked && partTexts.length > 0\n      ? new Intl.ListFormat(kitLocale, { style: \"short\", type: \"unit\" }).format(partTexts)\n      : valueText;\n\n  const over =\n    overage && !stacked && value !== undefined && Number.isFinite(value) && value > max ? value - max : 0;\n  const overageNode =\n    over > 0 ? (\n      <p id={`${hintId}-over`} data-part=\"overage\" data-private={priv} className=\"mt-1 text-xs text-[var(--danger)]\">\n        {typeof overage === \"function\"\n          ? overage(over)\n          : text.overLimit(new Intl.NumberFormat(kitLocale).format(over))}\n      </p>\n    ) : null;\n  const describedBy =\n    [ariaDescribedBy, hintNode && hintId, overageNode && `${hintId}-over`].filter(Boolean).join(\" \") || undefined;\n\n  const labelledBy = ariaLabelledBy ?? (label != null ? labelId : undefined);\n  const name = labelledBy ? undefined : (ariaLabel ?? (indeterminate ? common.loading : undefined));\n\n  return (\n    <Tag className={cn(\"min-w-0\", inlineClass, className)} data-state={indeterminate ? \"indeterminate\" : \"determinate\"}>\n      {(label != null || (showValue && valueText !== undefined)) && (\n        <Tag className=\"mb-1 flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          {showValue && valueText !== undefined && (\n            // Hidden: the same words are the bar's aria-valuetext, and reading them\n            // twice in a row is noise.\n            <span aria-hidden data-part=\"value\" data-private={priv} className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n              {valueText}\n            </span>\n          )}\n        </Tag>\n      )}\n      <Tag\n        {...rest}\n        role={meter ? \"meter\" : \"progressbar\"}\n        aria-label={name}\n        aria-labelledby={labelledBy}\n        aria-describedby={describedBy}\n        aria-valuemin={indeterminate ? undefined : min}\n        aria-valuemax={indeterminate ? undefined : max}\n        aria-valuenow={clamped}\n        aria-valuetext={ariaValueText}\n        aria-busy={!meter && indeterminate ? true : undefined}\n        // `relative` + `overflow-hidden`: the indeterminate segment is positioned in\n        // here and must not paint past the rounded ends.\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-[var(--bg-active)]\", TRACK_HEIGHT[size])}\n      >\n        {stacked ? (\n          // The parts in a flex row with a 2px gap, so two neighbouring steps of one\n          // hue are parted by the track rather than by their difference in lightness.\n          <Tag className=\"flex h-full w-full gap-0.5\">\n            {segments.map((seg, i) =>\n              seg.legendOnly ? null : (\n                <Tag\n                  key={seg.key ?? i}\n                  data-part=\"segment\"\n                  className={cn(\n                    \"h-full shrink-0 rounded-full transition-[width] duration-300 motion-reduce:transition-none\",\n                    fills[i],\n                  )}\n                  style={{\n                    width: `${span <= 0 ? 0 : (partValue(seg.value) / span) * 100}%`,\n                    backgroundColor: seg.className ? undefined : seg.color,\n                  }}\n                />\n              ),\n            )}\n          </Tag>\n        ) : indeterminate ? (\n          <Tag\n            data-part=\"fill\"\n            className={cn(\n              // `left-0`, deliberately physical: the keyframes (tokens.css\n              // `indeterminate-sweep`) translate along the physical x axis, and under\n              // RTL the same keyframes are run in REVERSE — from the right edge back\n              // to the left. A logical `start-0` would park the segment at the right\n              // in RTL and the reversed sweep would then start off-screen.\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[indeterminate-sweep_1.4s_ease-in-out_infinite] rtl:[animation-direction:reverse]\",\n              \"motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-50\",\n              FILL[tone],\n            )}\n          />\n        ) : (\n          <Tag\n            data-part=\"fill\"\n            // Block flow starts at the inline start, so a plain width fills from the\n            // right under `dir=\"rtl\"` with nothing extra.\n            className={cn(\"h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none\", FILL[tone])}\n            style={{ width: `${fraction * 100}%` }}\n          />\n        )}\n      </Tag>\n      {stacked && legend && segments.length > 0 && (\n        <ul className=\"mt-2 space-y-1 text-sm\" data-part=\"legend\">\n          {segments.map((seg, i) => (\n            <li key={seg.key ?? i} className=\"flex items-center gap-2\">\n              <span\n                aria-hidden\n                className={cn(\n                  \"size-2.5 shrink-0 rounded-sm\",\n                  fills[i],\n                )}\n                style={{ backgroundColor: seg.className ? undefined : seg.color }}\n              />\n              {seg.label != null && (\n                <span className=\"min-w-0 flex-1 truncate text-[var(--text-secondary)]\">{seg.label}</span>\n              )}\n              <span\n                data-part=\"legend-value\"\n                data-private={priv}\n                className={cn(\n                  \"ms-auto shrink-0 text-xs tabular-nums\",\n                  toneTextClass(\n                    (typeof legendTone === \"function\" ? legendTone(seg, i) : legendTone) ?? \"muted\",\n                  ),\n                )}\n              >\n                {legendValue ? legendValue(seg, formatPart(seg.value), i) : formatPart(seg.value)}\n              </span>\n            </li>\n          ))}\n        </ul>\n      )}\n      {overageNode}\n      {hintNode}\n    </Tag>\n  );\n}\n"],"mappings":";AAyQM,cAsBI,YAtBJ;AAzQN,SAAS,aAAa;AAEtB,SAAS,UAAU;AACnB,SAAS,uBAAuB,cAAc,oBAAoB;AAClE,SAAS,qBAAqB;AAWvB,MAAM,8BAAiD;AAAA,EAC5D,WAAW;AAAA,EACX,WAAW,CAAC,WAAW,GAAG,MAAM;AAClC;AA2BA,MAAM,OAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,MAAM,eAAgD,EAAE,IAAI,OAAO,MAAM,SAAS,IAAI,OAAO,IAAI,MAAM;AAIvG,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAMA,SAAS,aAAa,UAA2D;AAC/E,MAAI,OAAO;AACX,SAAO,SAAS,IAAI,CAAC,QAAQ;AAC3B,QAAI,IAAI,UAAW,QAAO,IAAI;AAC9B,QAAI,IAAI,KAAM,QAAO,KAAK,IAAI,IAAI;AAClC,WAAO,IAAI,QAAQ,SAAY,YAAY,SAAS,YAAY,MAAM;AAAA,EACxE,CAAC;AACH;AA+IO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,MAAM;AAAA,EACN,KAAK,UAAU;AAAA,EACf,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,KAAK;AAAA,EACL,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,GAAG;AACL,GAAqB;AAInB,QAAM,MAAM;AACZ,QAAM,cAAc,OAAO,SAAS,sDAAsD;AAC1F,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,OAAO,aAAa,eAAe,6BAA6B,MAAM;AAC5E,QAAM,YAAY,aAAa,MAAM;AACrC,QAAM,UAAU,MAAM;AACtB,QAAM,OAAO,YAAY,KAAK;AAC9B,QAAM,SAAS,MAAM;AACrB,QAAM,WACJ,QAAQ,OACN,oBAAC,OAAE,IAAI,QAAQ,aAAU,QAAO,WAAU,yCACvC,gBACH,IACE;AAEN,MAAI,YAAY,MAAM;AAGpB,UAAM,QACJ,UAAU,UAAa,CAAC,OAAO,SAAS,KAAK,IACzC,SACA,cACE,YAAY,OAAO,UAAU,GAAG,IAChC,IAAI,KAAK,aAAa,SAAS,EAAE,OAAO,KAAK;AACrD,WACE,qBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,WAAW,aAAa,SAAS,GAAG,cAAW,aAC1E;AAAA,2BAAC,OAAI,WAAU,qCACZ;AAAA,iBAAS,QACR,oBAAC,UAAK,IAAI,SAAS,WAAU,wCAC1B,iBACH;AAAA,QAEF,qBAAC,UAAK,aAAU,aAAY,gBAAc,MAAM,WAAU,0DACvD;AAAA,oBAAU,UAAa,GAAG,KAAK;AAAA,UAC/B,KAAK;AAAA,WACR;AAAA,SACF;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AACA,QAAM,MAAM;AAEZ,QAAM,UAAU,aAAa;AAC7B,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,OAAO,MAAM;AACnB,QAAM,YAAY,CAAC,MAAe,OAAO,SAAS,CAAC,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI;AAG9E,QAAM,QAAQ,UAAU,aAAa,QAAQ,IAAI,CAAC;AAClD,QAAM,WAAW,UAAU,SAAS,OAAO,CAAC,QAAQ,CAAC,IAAI,UAAU,IAAI,CAAC;AACxE,QAAM,YAAY,UAAU,MAAM,SAAS,OAAO,CAAC,KAAK,QAAQ,MAAM,UAAU,IAAI,KAAK,GAAG,CAAC,IAAI;AACjG,QAAM,SAAS,CAAC,MACd,cACI,YAAY,GAAG,KAAK,GAAG,IACvB,IAAI,KAAK,aAAa,WAAW,EAAE,OAAO,WAAW,uBAAuB,EAAE,CAAC,EAAE;AAAA,IAC/E,QAAQ,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,CAAC,CAAC,IAAI,OAAO;AAAA,EAC5D;AAMN,QAAM,aAAa,CAAC,MAAc;AAChC,QAAI,CAAC,OAAO,SAAS,CAAC,EAAG,QAAO,OAAO,GAAG;AAC1C,QAAI,YAAa,QAAO,YAAY,GAAG,KAAK,GAAG;AAC/C,WAAO,IAAI,KAAK,aAAa,WAAW,EAAE,OAAO,WAAW,uBAAuB,EAAE,CAAC,EAAE;AAAA,MACtF,QAAQ,IAAI,KAAK,IAAI,OAAO;AAAA,IAC9B;AAAA,EACF;AACA,QAAM,YAAY,UACd,SAAS,IAAI,CAAC,QAAQ;AACpB,UAAMA,QAAO,WAAW,IAAI,KAAK;AACjC,WAAO,OAAO,IAAI,UAAU,YAAY,OAAO,IAAI,UAAU,WACzD,OAAO,WAAW,OAAO,IAAI,KAAK,GAAGA,KAAI,IACzCA;AAAA,EACN,CAAC,IACD,CAAC;AACL,QAAM,UACJ,cAAc,UAAU,UAAa,CAAC,OAAO,SAAS,KAAK,IAAK,QAAQ,MAAM,SAAa;AAC7F,QAAM,gBAAgB,YAAY;AAClC,QAAM,UAAU,gBAAgB,SAAY,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,OAAO,CAAC;AAChF,QAAM,WAAW,YAAY,UAAa,QAAQ,IAAI,KAAK,UAAU,OAAO;AAE5E,QAAM,YAAY,YAAY,SAAY,SAAY,OAAO,OAAO;AACpE,QAAM,gBACJ,WAAW,UAAU,SAAS,IAC1B,IAAI,KAAK,WAAW,WAAW,EAAE,OAAO,SAAS,MAAM,OAAO,CAAC,EAAE,OAAO,SAAS,IACjF;AAEN,QAAM,OACJ,WAAW,CAAC,WAAW,UAAU,UAAa,OAAO,SAAS,KAAK,KAAK,QAAQ,MAAM,QAAQ,MAAM;AACtG,QAAM,cACJ,OAAO,IACL,oBAAC,OAAE,IAAI,GAAG,MAAM,SAAS,aAAU,WAAU,gBAAc,MAAM,WAAU,qCACxE,iBAAO,YAAY,aAChB,QAAQ,IAAI,IACZ,KAAK,UAAU,IAAI,KAAK,aAAa,SAAS,EAAE,OAAO,IAAI,CAAC,GAClE,IACE;AACN,QAAM,cACJ,CAAC,iBAAiB,YAAY,QAAQ,eAAe,GAAG,MAAM,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAEtG,QAAM,aAAa,mBAAmB,SAAS,OAAO,UAAU;AAChE,QAAM,OAAO,aAAa,SAAa,cAAc,gBAAgB,OAAO,UAAU;AAEtF,SACE,qBAAC,OAAI,WAAW,GAAG,WAAW,aAAa,SAAS,GAAG,cAAY,gBAAgB,kBAAkB,eACjG;AAAA,cAAS,QAAS,aAAa,cAAc,WAC7C,qBAAC,OAAI,WAAU,0CACZ;AAAA,eAAS,QACR,oBAAC,UAAK,IAAI,SAAS,WAAU,wCAC1B,iBACH;AAAA,MAED,aAAa,cAAc;AAAA;AAAA,MAG1B,oBAAC,UAAK,eAAW,MAAC,aAAU,SAAQ,gBAAc,MAAM,WAAU,0DAC/D,qBACH;AAAA,OAEJ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAM,QAAQ,UAAU;AAAA,QACxB,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,kBAAgB;AAAA,QAChB,aAAW,CAAC,SAAS,gBAAgB,OAAO;AAAA,QAG5C,WAAW,GAAG,sEAAsE,aAAa,IAAI,CAAC;AAAA,QAErG;AAAA;AAAA;AAAA,UAGC,oBAAC,OAAI,WAAU,8BACZ,mBAAS;AAAA,YAAI,CAAC,KAAK,MAClB,IAAI,aAAa,OACf;AAAA,cAAC;AAAA;AAAA,gBAEC,aAAU;AAAA,gBACV,WAAW;AAAA,kBACT;AAAA,kBACA,MAAM,CAAC;AAAA,gBACT;AAAA,gBACA,OAAO;AAAA,kBACL,OAAO,GAAG,QAAQ,IAAI,IAAK,UAAU,IAAI,KAAK,IAAI,OAAQ,GAAG;AAAA,kBAC7D,iBAAiB,IAAI,YAAY,SAAY,IAAI;AAAA,gBACnD;AAAA;AAAA,cATK,IAAI,OAAO;AAAA,YAUlB;AAAA,UAEJ,GACF;AAAA,YACE,gBACF;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMT;AAAA,cACA;AAAA,cACA;AAAA,cACA,KAAK,IAAI;AAAA,YACX;AAAA;AAAA,QACF,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YAGV,WAAW,GAAG,qFAAqF,KAAK,IAAI,CAAC;AAAA,YAC7G,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI;AAAA;AAAA,QACvC;AAAA;AAAA,IAEJ;AAAA,IACC,WAAW,UAAU,SAAS,SAAS,KACtC,oBAAC,QAAG,WAAU,0BAAyB,aAAU,UAC9C,mBAAS,IAAI,CAAC,KAAK,MAClB,qBAAC,QAAsB,WAAU,2BAC/B;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,MAAM,CAAC;AAAA,UACT;AAAA,UACA,OAAO,EAAE,iBAAiB,IAAI,YAAY,SAAY,IAAI,MAAM;AAAA;AAAA,MAClE;AAAA,MACC,IAAI,SAAS,QACZ,oBAAC,UAAK,WAAU,wDAAwD,cAAI,OAAM;AAAA,MAEpF;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,gBAAc;AAAA,UACd,WAAW;AAAA,YACT;AAAA,YACA;AAAA,eACG,OAAO,eAAe,aAAa,WAAW,KAAK,CAAC,IAAI,eAAe;AAAA,YAC1E;AAAA,UACF;AAAA,UAEC,wBAAc,YAAY,KAAK,WAAW,IAAI,KAAK,GAAG,CAAC,IAAI,WAAW,IAAI,KAAK;AAAA;AAAA,MAClF;AAAA,SAvBO,IAAI,OAAO,CAwBpB,CACD,GACH;AAAA,IAED;AAAA,IACA;AAAA,KACH;AAEJ;","names":["text"]}

package/dist/components/reauth-dialog.d.ts

@@ -0,0 +1,90 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Every string the dialog renders — the `reauthDialog` namespace of
+ * `<UiKitProvider labels>`, and overridable per instance through `labels`. The title,
+ * description and submit button are usually worded per action ("Add a passkey"),
+ * which is what the `title` / `description` / `submitLabel` props are for; these are
+ * the fallbacks.
+ */
+interface ReauthDialogLabels {
+    title: string;
+    description: string;
+    /** Label of the password field. */
+    password: string;
+    submit: string;
+    cancel: string;
+}
+declare const DEFAULT_REAUTH_DIALOG_LABELS: ReauthDialogLabels;
+interface ReauthDialogProps {
+    /**
+     * Verifies the password — the app's call, e.g. the request the password guards.
+     *
+     * Return a promise and the dialog manages itself: busy until it settles, closes
+     * (`onClose(true)`) when it resolves, STAYS OPEN with the password kept and selected
+     * when it rejects — a wrong password is a typo to correct, not a sign-out. Pass the
+     * reason as `error`. Return nothing and the app owns the rest: `busy` for the
+     * pending state, unmounting the dialog once it is done.
+     */
+    onSubmit: (password: string) => void | Promise<unknown>;
+    /**
+     * The dialog has closed: `true` after a resolved `onSubmit`, `false` for Cancel,
+     * Escape, the backdrop and Back. A dismissal while `onSubmit` is still running also
+     * answers `false`, and that call's late result is then ignored.
+     */
+    onClose: (confirmed: boolean) => void;
+    /**
+     * Why the last attempt failed ("Wrong password"), shown under the field, which turns
+     * invalid (`aria-invalid`, `--danger-border-strong`). The app decides the wording —
+     * a 400 is a wrong password, a 500 is not. Hidden again as soon as the user edits
+     * the field (the message is about the password they had typed), and shown again by
+     * the next failed submit.
+     */
+    error?: ReactNode;
+    /** The check is running, for a caller that tracks it itself (a mutation's
+     *  `isPending`); a promise returned from `onSubmit` does the same on its own. */
+    busy?: boolean;
+    /** Default: `labels.title` — "Confirm it’s you". */
+    title?: ReactNode;
+    /** The line under the title. Default: `labels.description`. */
+    description?: ReactNode;
+    /** Text of the submit button. Default: `labels.submit` — "Continue". */
+    submitLabel?: ReactNode;
+    /** `"danger"` when what the password unlocks cannot be undone: the submit is then the
+     *  destructive button. Default `"neutral"`. */
+    tone?: "neutral" | "danger";
+    /** Extra body above the field — what is about to happen, a warning. */
+    children?: ReactNode;
+    /** Kept-mounted mode, as on `Modal`: left out, the dialog is open while mounted. A
+     *  flip to `false` animates it out and wipes the password. */
+    open?: boolean;
+    /** User-facing strings; see {@link ReauthDialogLabels}. */
+    labels?: Partial<ReauthDialogLabels>;
+}
+/**
+ * "Enter your current password to continue" — the step-up check in front of an
+ * action that changes how an account signs in (adding a passkey) or what it can
+ * reach. Kurvenschmiede asked for the password before registering a passkey in a
+ * dialog of its own; keksdose asks for it inline in `DangerConfirm`'s
+ * `requirePassword` tile. Both are the same three facts — the field is the CURRENT
+ * password (the password manager fills it, never generates one), a wrong one stays in
+ * the dialog with its error, and the APP verifies it — so the promise handling is
+ * `DangerConfirm`'s own, shared, the field is its `CurrentPasswordInput` spelled out
+ * with an `error`, and this is the modal form of them.
+ *
+ * A component rather than a `useReauth()` promise: the step that follows the check
+ * (Kurvenschmiede's WebAuthn ceremony) needs what the server answered, and the error
+ * wording needs the app's own status codes — both already live in the app's mutation,
+ * which this dialog only has to be handed (`onSubmit={(pw) => begin.mutateAsync(pw)}`,
+ * `error={…}`).
+ *
+ * The field is a `<form>`, so Enter submits once something is typed. Focus starts in
+ * the field and returns to the trigger through `Modal`'s trap. While a check runs,
+ * the field is read-only, Cancel is disabled and Escape is held: a request that has
+ * left cannot be cancelled by closing the dialog, and the dialog should not pretend it
+ * can.
+ */
+declare function ReauthDialog({ onSubmit, onClose, error, busy: busyProp, title, description, submitLabel, tone, children, open, labels: labelsProp, }: ReauthDialogProps): react.JSX.Element;
+
+export { DEFAULT_REAUTH_DIALOG_LABELS, ReauthDialog, type ReauthDialogLabels, type ReauthDialogProps };

package/dist/components/reauth-dialog.js

@@ -0,0 +1,158 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useId, useRef, useState } from "react";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { usePromisePending } from "./danger-confirm.js";
+import { DialogFrame } from "./dialog-frame.js";
+import { ModalCloseContext } from "./modal.js";
+import { Button, Input, Spinner } from "./ui.js";
+const DEFAULT_REAUTH_DIALOG_LABELS = {
+  title: "Confirm it\u2019s you",
+  description: "Enter your current password to continue.",
+  password: "Current password",
+  submit: "Continue",
+  cancel: "Cancel"
+};
+function ReauthDialog({
+  onSubmit,
+  onClose,
+  error,
+  busy: busyProp,
+  title,
+  description,
+  submitLabel,
+  tone = "neutral",
+  children,
+  open,
+  labels: labelsProp
+}) {
+  const labels = useKitLabels("reauthDialog", DEFAULT_REAUTH_DIALOG_LABELS, labelsProp);
+  const [password, setPassword] = useState("");
+  const [edited, setEdited] = useState(false);
+  const { pending, run } = usePromisePending();
+  const busy = Boolean(busyProp) || pending;
+  const inputRef = useRef(null);
+  const [done, setDone] = useState(false);
+  const confirmed = useRef(false);
+  const formId = useId();
+  const isOpen = open ?? true;
+  const [wasOpen, setWasOpen] = useState(isOpen);
+  if (wasOpen !== isOpen) {
+    setWasOpen(isOpen);
+    if (!isOpen) {
+      setPassword("");
+      setEdited(false);
+      setDone(false);
+    }
+  }
+  useEffect(() => {
+    if (!isOpen) return;
+    confirmed.current = false;
+    inputRef.current?.focus();
+  }, [isOpen]);
+  const submit = () => {
+    if (busy || password === "") return;
+    setEdited(false);
+    run(onSubmit(password), () => {
+      confirmed.current = true;
+      setDone(true);
+    });
+  };
+  const wasPending = useRef(false);
+  useEffect(() => {
+    if (wasPending.current && !pending && !done) inputRef.current?.select();
+    wasPending.current = pending;
+  }, [pending, done]);
+  const shownError = edited ? void 0 : error;
+  return /* @__PURE__ */ jsxs(
+    DialogFrame,
+    {
+      open,
+      title: title ?? labels.title,
+      description: description ?? labels.description,
+      onClose: () => onClose(confirmed.current),
+      onKeyDown: (e) => {
+        if (busy && e.key === "Escape") e.preventDefault();
+      },
+      "aria-busy": busy || void 0,
+      actions: /* @__PURE__ */ jsx(
+        ReauthActions,
+        {
+          formId,
+          done,
+          busy,
+          canSubmit: password !== "",
+          danger: tone === "danger",
+          cancelLabel: labels.cancel,
+          submitLabel: submitLabel ?? labels.submit
+        }
+      ),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "form",
+          {
+            id: formId,
+            noValidate: true,
+            onSubmit: (e) => {
+              e.preventDefault();
+              submit();
+            },
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref: inputRef,
+                type: "password",
+                autoComplete: "current-password",
+                label: labels.password,
+                value: password,
+                readOnly: busy,
+                error: shownError,
+                onChange: (e) => {
+                  setPassword(e.target.value);
+                  setEdited(true);
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ReauthActions({
+  formId,
+  done,
+  busy,
+  canSubmit,
+  danger,
+  cancelLabel,
+  submitLabel
+}) {
+  const close = useContext(ModalCloseContext);
+  useEffect(() => {
+    if (done) close?.();
+  }, [done, close]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", disabled: busy, onClick: () => close?.(), children: cancelLabel }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "submit",
+        form: formId,
+        variant: danger ? "danger" : "primary",
+        disabled: !canSubmit || busy,
+        "aria-busy": busy || void 0,
+        children: [
+          busy && /* @__PURE__ */ jsx(Spinner, { label: null, className: "h-4 w-4" }),
+          submitLabel
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DEFAULT_REAUTH_DIALOG_LABELS,
+  ReauthDialog
+};
+//# sourceMappingURL=reauth-dialog.js.map

package/dist/components/reauth-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/reauth-dialog.tsx"],"sourcesContent":["import { useContext, useEffect, useId, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { usePromisePending } from \"./danger-confirm\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { ModalCloseContext } from \"./modal\";\nimport { Button, Input, Spinner } from \"./ui\";\n\n/**\n * Every string the dialog renders — the `reauthDialog` namespace of\n * `<UiKitProvider labels>`, and overridable per instance through `labels`. The title,\n * description and submit button are usually worded per action (\"Add a passkey\"),\n * which is what the `title` / `description` / `submitLabel` props are for; these are\n * the fallbacks.\n */\nexport interface ReauthDialogLabels {\n  title: string;\n  description: string;\n  /** Label of the password field. */\n  password: string;\n  submit: string;\n  cancel: string;\n}\n\nexport const DEFAULT_REAUTH_DIALOG_LABELS: ReauthDialogLabels = {\n  title: \"Confirm it’s you\",\n  description: \"Enter your current password to continue.\",\n  password: \"Current password\",\n  submit: \"Continue\",\n  cancel: \"Cancel\",\n};\n\nexport interface ReauthDialogProps {\n  /**\n   * Verifies the password — the app's call, e.g. the request the password guards.\n   *\n   * Return a promise and the dialog manages itself: busy until it settles, closes\n   * (`onClose(true)`) when it resolves, STAYS OPEN with the password kept and selected\n   * when it rejects — a wrong password is a typo to correct, not a sign-out. Pass the\n   * reason as `error`. Return nothing and the app owns the rest: `busy` for the\n   * pending state, unmounting the dialog once it is done.\n   */\n  onSubmit: (password: string) => void | Promise<unknown>;\n  /**\n   * The dialog has closed: `true` after a resolved `onSubmit`, `false` for Cancel,\n   * Escape, the backdrop and Back. A dismissal while `onSubmit` is still running also\n   * answers `false`, and that call's late result is then ignored.\n   */\n  onClose: (confirmed: boolean) => void;\n  /**\n   * Why the last attempt failed (\"Wrong password\"), shown under the field, which turns\n   * invalid (`aria-invalid`, `--danger-border-strong`). The app decides the wording —\n   * a 400 is a wrong password, a 500 is not. Hidden again as soon as the user edits\n   * the field (the message is about the password they had typed), and shown again by\n   * the next failed submit.\n   */\n  error?: ReactNode;\n  /** The check is running, for a caller that tracks it itself (a mutation's\n   *  `isPending`); a promise returned from `onSubmit` does the same on its own. */\n  busy?: boolean;\n  /** Default: `labels.title` — \"Confirm it’s you\". */\n  title?: ReactNode;\n  /** The line under the title. Default: `labels.description`. */\n  description?: ReactNode;\n  /** Text of the submit button. Default: `labels.submit` — \"Continue\". */\n  submitLabel?: ReactNode;\n  /** `\"danger\"` when what the password unlocks cannot be undone: the submit is then the\n   *  destructive button. Default `\"neutral\"`. */\n  tone?: \"neutral\" | \"danger\";\n  /** Extra body above the field — what is about to happen, a warning. */\n  children?: ReactNode;\n  /** Kept-mounted mode, as on `Modal`: left out, the dialog is open while mounted. A\n   *  flip to `false` animates it out and wipes the password. */\n  open?: boolean;\n  /** User-facing strings; see {@link ReauthDialogLabels}. */\n  labels?: Partial<ReauthDialogLabels>;\n}\n\n/**\n * \"Enter your current password to continue\" — the step-up check in front of an\n * action that changes how an account signs in (adding a passkey) or what it can\n * reach. Kurvenschmiede asked for the password before registering a passkey in a\n * dialog of its own; keksdose asks for it inline in `DangerConfirm`'s\n * `requirePassword` tile. Both are the same three facts — the field is the CURRENT\n * password (the password manager fills it, never generates one), a wrong one stays in\n * the dialog with its error, and the APP verifies it — so the promise handling is\n * `DangerConfirm`'s own, shared, the field is its `CurrentPasswordInput` spelled out\n * with an `error`, and this is the modal form of them.\n *\n * A component rather than a `useReauth()` promise: the step that follows the check\n * (Kurvenschmiede's WebAuthn ceremony) needs what the server answered, and the error\n * wording needs the app's own status codes — both already live in the app's mutation,\n * which this dialog only has to be handed (`onSubmit={(pw) => begin.mutateAsync(pw)}`,\n * `error={…}`).\n *\n * The field is a `<form>`, so Enter submits once something is typed. Focus starts in\n * the field and returns to the trigger through `Modal`'s trap. While a check runs,\n * the field is read-only, Cancel is disabled and Escape is held: a request that has\n * left cannot be cancelled by closing the dialog, and the dialog should not pretend it\n * can.\n */\nexport function ReauthDialog({\n  onSubmit,\n  onClose,\n  error,\n  busy: busyProp,\n  title,\n  description,\n  submitLabel,\n  tone = \"neutral\",\n  children,\n  open,\n  labels: labelsProp,\n}: ReauthDialogProps) {\n  const labels = useKitLabels(\"reauthDialog\", DEFAULT_REAUTH_DIALOG_LABELS, labelsProp);\n  const [password, setPassword] = useState(\"\");\n  // The error describes the password that was submitted; once the user edits it, it\n  // describes nothing on screen. Cleared by the next submit, so a second failure with\n  // the same message shows again.\n  const [edited, setEdited] = useState(false);\n  const { pending, run } = usePromisePending();\n  const busy = Boolean(busyProp) || pending;\n  const inputRef = useRef<HTMLInputElement>(null);\n  // `onSubmit` resolved: the actions row lowers the panel (state, so it re-renders),\n  // and `onClose` answers true (a ref, because `Modal` may call the `onClose` it saw\n  // BEFORE that re-render — its latest-callback ref is refreshed in an effect that runs\n  // after the actions row's).\n  const [done, setDone] = useState(false);\n  const confirmed = useRef(false);\n  const formId = useId();\n  const isOpen = open ?? true;\n\n  // A close (kept-mounted) wipes the password: it must not sit in a hidden dialog.\n  // During render, like DangerConfirm's disarm, so no frame holds it.\n  const [wasOpen, setWasOpen] = useState(isOpen);\n  if (wasOpen !== isOpen) {\n    setWasOpen(isOpen);\n    if (!isOpen) {\n      setPassword(\"\");\n      setEdited(false);\n      setDone(false);\n    }\n  }\n\n  // After `Modal`'s own effect (a parent's effects run after its children's), so the\n  // trap has recorded the trigger as its restore target before focus moves in.\n  useEffect(() => {\n    if (!isOpen) return;\n    confirmed.current = false;\n    inputRef.current?.focus();\n  }, [isOpen]);\n\n  const submit = () => {\n    if (busy || password === \"\") return;\n    setEdited(false);\n    run(onSubmit(password), () => {\n      confirmed.current = true;\n      setDone(true);\n    });\n  };\n\n  // A rejection leaves focus where it was (the field, or the submit button) — select\n  // the password there so the retry replaces it rather than appending to it.\n  const wasPending = useRef(false);\n  useEffect(() => {\n    if (wasPending.current && !pending && !done) inputRef.current?.select();\n    wasPending.current = pending;\n  }, [pending, done]);\n\n  const shownError = edited ? undefined : error;\n\n  return (\n    <DialogFrame\n      open={open}\n      title={title ?? labels.title}\n      description={description ?? labels.description}\n      onClose={() => onClose(confirmed.current)}\n      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n        if (busy && e.key === \"Escape\") e.preventDefault();\n      }}\n      aria-busy={busy || undefined}\n      actions={\n        <ReauthActions\n          formId={formId}\n          done={done}\n          busy={busy}\n          canSubmit={password !== \"\"}\n          danger={tone === \"danger\"}\n          cancelLabel={labels.cancel}\n          submitLabel={submitLabel ?? labels.submit}\n        />\n      }\n    >\n      {children}\n      <form\n        id={formId}\n        noValidate\n        onSubmit={(e) => {\n          e.preventDefault();\n          submit();\n        }}\n      >\n        {/* CurrentPasswordInput's field — the password manager fills it with the CURRENT\n            password and never offers to generate one; `readOnly`, not `disabled`, while\n            busy, because disabling the field that has focus drops focus to <body> —\n            plus `Input`'s own `error`, which that helper does not take. The message\n            paints the field, sits under it and is its `aria-describedby`; passing the\n            prop on every render keeps the field's box steady, so the message going away\n            on the first keystroke of a retry no longer remounts the <input> under the\n            typist (it did, which is why this used to draw its own message). */}\n        <Input\n          ref={inputRef}\n          type=\"password\"\n          autoComplete=\"current-password\"\n          label={labels.password}\n          value={password}\n          readOnly={busy}\n          error={shownError}\n          onChange={(e) => {\n            setPassword(e.target.value);\n            setEdited(true);\n          }}\n        />\n      </form>\n    </DialogFrame>\n  );\n}\n\n/**\n * The actions row. A component of its own because it renders INSIDE the `Modal`, where\n * the panel's animated close is in context: a resolved `onSubmit` lowers the panel\n * through it, the way Cancel and Escape do, and `Modal` then calls `onClose`.\n */\nfunction ReauthActions({\n  formId,\n  done,\n  busy,\n  canSubmit,\n  danger,\n  cancelLabel,\n  submitLabel,\n}: {\n  formId: string;\n  done: boolean;\n  busy: boolean;\n  canSubmit: boolean;\n  danger: boolean;\n  cancelLabel: ReactNode;\n  submitLabel: ReactNode;\n}) {\n  const close = useContext(ModalCloseContext);\n  useEffect(() => {\n    if (done) close?.();\n  }, [done, close]);\n  return (\n    <>\n      <Button type=\"button\" variant=\"ghost\" disabled={busy} onClick={() => close?.()}>\n        {cancelLabel}\n      </Button>\n      <Button\n        type=\"submit\"\n        form={formId}\n        variant={danger ? \"danger\" : \"primary\"}\n        disabled={!canSubmit || busy}\n        aria-busy={busy || undefined}\n      >\n        {busy && <Spinner label={null} className=\"h-4 w-4\" />}\n        {submitLabel}\n      </Button>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/series-chart.d.ts

@@ -5,7 +5,7 @@ import { LegendEntry } from './toggle-legend.js';
 import { SeriesChartLabels } from './series-chart-labels.js';
 import { TimeTickUnit } from './series-chart-ticks.js';
 import { SeriesChartAxisBudget } from './series-chart-budget.js';
-import { x as ChartTooltipPlacement } from '../kit-labels-C4uB_zmg.js';
+import { x as ChartTooltipPlacement } from '../kit-labels-D1J2_jyD.js';
 import 'recharts';
 import './data-table-labels.js';
 import './mini-calendar.js';
@@ -56,6 +56,18 @@ import './authed-image.js';
 import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
+import './write-lock.js';
+import './legal.js';
+import './account-chips.js';
+import '../lib/format.js';
+import '../data-table-3mi2R3so.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
 
 interface SeriesChartSeries {
     /** The row key this line reads — and the `--color-<key>` it is painted with, so it

package/dist/components/server-wake.d.ts

@@ -0,0 +1,60 @@
+import * as react from 'react';
+import { ServerWakeWatcher, ServerWakeStage } from '../lib/server-wake.js';
+
+/**
+ * The visible half of the cold-start watchdog (`lib/server-wake.ts`), keksdose's
+ * `app/server-wake-notice.tsx` lifted into the kit: after a couple of seconds of an
+ * unanswered read it says the app is still loading, and after seven it says WHY — the
+ * server sleeps when nobody is using it, and the first request has to start it again.
+ *
+ * Corner-anchored and non-blocking on purpose. The pages underneath already show their
+ * own skeletons; what was missing is the explanation, not another overlay. Start
+ * corner, above the phone's bottom nav, so it collides with neither the centred toasts
+ * nor the nav bar — and above any FloatingActionButton it would otherwise cover
+ * (kastlan's offline pill shares the corner; on a phone the notice spans both).
+ *
+ * Mount it next to the router, not inside the app layout, so it also covers the login
+ * screen and the landing page — a cold start is at its most confusing exactly there,
+ * before anything of the app is on screen.
+ */
+interface ServerWakeLabels {
+    /** Past `slowMs` (2 s): a warm server would have answered by now. */
+    slow: string;
+    /** Past `wakingMs` (7 s): the explanation. `appName` is the notice's prop; without
+     *  one the sentence says "the app". */
+    waking: (appName?: string) => string;
+}
+declare const DEFAULT_SERVER_WAKE_LABELS: ServerWakeLabels;
+/** The watcher's current stage, re-rendering on every change. Default: the shared
+ *  {@link serverWake} instance. */
+declare function useServerWakeStage(watcher?: ServerWakeWatcher): ServerWakeStage;
+interface ServerWakeNoticeProps {
+    /** Default: the shared {@link serverWake} instance. Pass the app's own when it was
+     *  made with {@link createServerWake} (e.g. to watch the login POST too). */
+    watcher?: ServerWakeWatcher;
+    /** Named in the `waking` sentence ("…when nobody is using Keksdose…"). Default: the
+     *  label says "the app". */
+    appName?: string;
+    labels?: Partial<ServerWakeLabels>;
+    /**
+     * The height to keep clear at the bottom — AppShell's bottom nav. Default: its
+     * measured `--app-nav-h` (0px from `md` up and on pages without a shell, such as the
+     * login screen), so nothing has to be passed under an AppShell. The safe area is
+     * respected either way, and a 1rem gap is added. Numbers are px.
+     */
+    navOffset?: string | number;
+    /** Extra classes on the fixed anchor — a different width or `start-*`. The bottom
+     *  offset is an inline style, so move it vertically with {@link navOffset}. Either
+     *  way it rises above a visible FloatingActionButton under it. */
+    className?: string;
+}
+/**
+ * Renders nothing visible while idle. The LIVE REGION, though, is always mounted: a
+ * `role="status"` element inserted together with its text is announced unreliably
+ * (several screen readers only speak changes to a region they already knew about),
+ * so the region waits empty and the banner appears inside it. keksdose's notice
+ * mounted the region and the words at once.
+ */
+declare function ServerWakeNotice({ watcher, appName, labels: labelsProp, navOffset, className }: ServerWakeNoticeProps): react.JSX.Element;
+
+export { DEFAULT_SERVER_WAKE_LABELS, type ServerWakeLabels, ServerWakeNotice, type ServerWakeNoticeProps, useServerWakeStage };

package/dist/components/server-wake.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { cn } from "../lib/cn.js";
+import { clearanceAbove, subscribeFloating } from "../lib/floating-stack.js";
+import { serverWake } from "../lib/server-wake.js";
+import { AlertBanner } from "./alert-banner.js";
+import { Spinner } from "./ui.js";
+const DEFAULT_SERVER_WAKE_LABELS = {
+  slow: "Still loading \u2014 this is taking longer than usual.",
+  waking: (appName) => `The server goes to sleep when nobody is using ${appName ?? "the app"}, so the first request after a break has to start it again. That can take a moment \u2014 nothing is lost, the page fills in by itself.`
+};
+function useServerWakeStage(watcher = serverWake) {
+  return useSyncExternalStore(watcher.subscribe, watcher.getStage, () => "idle");
+}
+const px = (v) => typeof v === "number" ? `${v}px` : v;
+const STACK_GAP = "0.5rem";
+function useFloatingClearance(anchor, stage) {
+  const [clearance, setClearance] = useState(null);
+  useLayoutEffect(() => {
+    if (stage === "idle") return;
+    const measure = () => setClearance(clearanceAbove(anchor.current));
+    measure();
+    const unsubscribe = subscribeFloating(measure);
+    window.addEventListener("resize", measure);
+    return () => {
+      unsubscribe();
+      window.removeEventListener("resize", measure);
+    };
+  }, [anchor, stage]);
+  return stage === "idle" ? null : clearance;
+}
+function ServerWakeNotice({ watcher, appName, labels: labelsProp, navOffset, className }) {
+  const labels = useKitLabels("serverWake", DEFAULT_SERVER_WAKE_LABELS, labelsProp);
+  const stage = useServerWakeStage(watcher);
+  const waking = stage === "waking";
+  const anchor = useRef(null);
+  const clearance = useFloatingClearance(anchor, stage);
+  const base = `calc(max(${navOffset === void 0 ? "var(--app-nav-h, 0px)" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 1rem)`;
+  const style = {
+    bottom: clearance === null ? base : `max(${base}, calc(${clearance}px + ${STACK_GAP}))`
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: anchor,
+      role: "status",
+      "aria-live": "polite",
+      "data-stage": stage,
+      style,
+      className: cn(
+        "fixed start-4 z-50 max-w-[min(24rem,calc(100vw-2rem))]",
+        stage === "idle" && "pointer-events-none",
+        className
+      ),
+      children: stage !== "idle" && // `elevated`: OPAQUE in both themes (keksdose live #209) — the notice that
+      // explains a stall is read over whatever stalled, and a translucent dark tint
+      // let the page's own text show through it. A box banner is role-less, so the
+      // wrapper above stays the one live region.
+      /* @__PURE__ */ jsx(
+        AlertBanner,
+        {
+          tone: waking ? "warning" : "neutral",
+          size: "sm",
+          elevated: true,
+          icon: /* @__PURE__ */ jsx(Spinner, { label: null, className: "h-3.5 w-3.5" }),
+          children: waking ? labels.waking(appName) : labels.slow
+        }
+      )
+    }
+  );
+}
+export {
+  DEFAULT_SERVER_WAKE_LABELS,
+  ServerWakeNotice,
+  useServerWakeStage
+};
+//# sourceMappingURL=server-wake.js.map

package/dist/components/server-wake.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/server-wake.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport type { CSSProperties, RefObject } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { clearanceAbove, subscribeFloating } from \"../lib/floating-stack\";\nimport { serverWake } from \"../lib/server-wake\";\nimport type { ServerWakeStage, ServerWakeWatcher } from \"../lib/server-wake\";\nimport { AlertBanner } from \"./alert-banner\";\nimport { Spinner } from \"./ui\";\n\n/**\n * The visible half of the cold-start watchdog (`lib/server-wake.ts`), keksdose's\n * `app/server-wake-notice.tsx` lifted into the kit: after a couple of seconds of an\n * unanswered read it says the app is still loading, and after seven it says WHY — the\n * server sleeps when nobody is using it, and the first request has to start it again.\n *\n * Corner-anchored and non-blocking on purpose. The pages underneath already show their\n * own skeletons; what was missing is the explanation, not another overlay. Start\n * corner, above the phone's bottom nav, so it collides with neither the centred toasts\n * nor the nav bar — and above any FloatingActionButton it would otherwise cover\n * (kastlan's offline pill shares the corner; on a phone the notice spans both).\n *\n * Mount it next to the router, not inside the app layout, so it also covers the login\n * screen and the landing page — a cold start is at its most confusing exactly there,\n * before anything of the app is on screen.\n */\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\nexport interface ServerWakeLabels {\n  /** Past `slowMs` (2 s): a warm server would have answered by now. */\n  slow: string;\n  /** Past `wakingMs` (7 s): the explanation. `appName` is the notice's prop; without\n   *  one the sentence says \"the app\". */\n  waking: (appName?: string) => string;\n}\n\nexport const DEFAULT_SERVER_WAKE_LABELS: ServerWakeLabels = {\n  slow: \"Still loading — this is taking longer than usual.\",\n  waking: (appName) =>\n    `The server goes to sleep when nobody is using ${appName ?? \"the app\"}, so the first request after a break has to start it again. That can take a moment — nothing is lost, the page fills in by itself.`,\n};\n\n// ── Hook ──────────────────────────────────────────────────────────────────────\n\n/** The watcher's current stage, re-rendering on every change. Default: the shared\n *  {@link serverWake} instance. */\nexport function useServerWakeStage(watcher: ServerWakeWatcher = serverWake): ServerWakeStage {\n  // The server snapshot is `idle`: nothing is in flight while the HTML is rendered.\n  return useSyncExternalStore(watcher.subscribe, watcher.getStage, () => \"idle\");\n}\n\n// ── Notice ────────────────────────────────────────────────────────────────────\n\nexport interface ServerWakeNoticeProps {\n  /** Default: the shared {@link serverWake} instance. Pass the app's own when it was\n   *  made with {@link createServerWake} (e.g. to watch the login POST too). */\n  watcher?: ServerWakeWatcher;\n  /** Named in the `waking` sentence (\"…when nobody is using Keksdose…\"). Default: the\n   *  label says \"the app\". */\n  appName?: string;\n  labels?: Partial<ServerWakeLabels>;\n  /**\n   * The height to keep clear at the bottom — AppShell's bottom nav. Default: its\n   * measured `--app-nav-h` (0px from `md` up and on pages without a shell, such as the\n   * login screen), so nothing has to be passed under an AppShell. The safe area is\n   * respected either way, and a 1rem gap is added. Numbers are px.\n   */\n  navOffset?: string | number;\n  /** Extra classes on the fixed anchor — a different width or `start-*`. The bottom\n   *  offset is an inline style, so move it vertically with {@link navOffset}. Either\n   *  way it rises above a visible FloatingActionButton under it. */\n  className?: string;\n}\n\nconst px = (v: string | number) => (typeof v === \"number\" ? `${v}px` : v);\n\n/** Gap between the notice and a floating control it stacks above. */\nconst STACK_GAP = \"0.5rem\";\n\n/**\n * How far off the bottom the notice must sit to clear the FloatingActionButtons under\n * it (`lib/floating-stack.ts`), re-measured when one appears, goes, resizes or the\n * viewport does — or `null` while it is idle or nothing is under it. kastlan 0.18.\n */\nfunction useFloatingClearance(anchor: RefObject<HTMLDivElement | null>, stage: ServerWakeStage): number | null {\n  const [clearance, setClearance] = useState<number | null>(null);\n  useLayoutEffect(() => {\n    if (stage === \"idle\") return;\n    const measure = () => setClearance(clearanceAbove(anchor.current));\n    measure();\n    const unsubscribe = subscribeFloating(measure);\n    window.addEventListener(\"resize\", measure);\n    return () => {\n      unsubscribe();\n      window.removeEventListener(\"resize\", measure);\n    };\n  }, [anchor, stage]);\n  // Idle, the last measurement is stale and nothing shows anyway.\n  return stage === \"idle\" ? null : clearance;\n}\n\n/**\n * Renders nothing visible while idle. The LIVE REGION, though, is always mounted: a\n * `role=\"status\"` element inserted together with its text is announced unreliably\n * (several screen readers only speak changes to a region they already knew about),\n * so the region waits empty and the banner appears inside it. keksdose's notice\n * mounted the region and the words at once.\n */\nexport function ServerWakeNotice({ watcher, appName, labels: labelsProp, navOffset, className }: ServerWakeNoticeProps) {\n  const labels = useKitLabels(\"serverWake\", DEFAULT_SERVER_WAKE_LABELS, labelsProp);\n  const stage = useServerWakeStage(watcher);\n  const waking = stage === \"waking\";\n  const anchor = useRef<HTMLDivElement>(null);\n  const clearance = useFloatingClearance(anchor, stage);\n  const base = `calc(max(${navOffset === undefined ? \"var(--app-nav-h, 0px)\" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 1rem)`;\n  const style: CSSProperties = {\n    bottom: clearance === null ? base : `max(${base}, calc(${clearance}px + ${STACK_GAP}))`,\n  };\n\n  return (\n    <div\n      ref={anchor}\n      role=\"status\"\n      aria-live=\"polite\"\n      data-stage={stage}\n      style={style}\n      // `pointer-events-none` on the empty anchor: a fixed box, even an empty one, is not\n      // allowed to swallow a tap on what it sits over.\n      className={cn(\n        \"fixed start-4 z-50 max-w-[min(24rem,calc(100vw-2rem))]\",\n        stage === \"idle\" && \"pointer-events-none\",\n        className,\n      )}\n    >\n      {stage !== \"idle\" && (\n        // `elevated`: OPAQUE in both themes (keksdose live #209) — the notice that\n        // explains a stall is read over whatever stalled, and a translucent dark tint\n        // let the page's own text show through it. A box banner is role-less, so the\n        // wrapper above stays the one live region.\n        <AlertBanner\n          tone={waking ? \"warning\" : \"neutral\"}\n          size=\"sm\"\n          elevated\n          // `label={null}`: a Spinner is its own `role=\"status\"` saying \"Loading…\" —\n          // nested here, a second live region and a second announcement ahead of the\n          // words that actually explain the wait. Here it is decoration.\n          icon={<Spinner label={null} className=\"h-3.5 w-3.5\" />}\n        >\n          {waking ? labels.waking(appName) : labels.slow}\n        </AlertBanner>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoJgB;AApJhB,SAAS,iBAAiB,QAAQ,UAAU,4BAA4B;AAGxE,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,gBAAgB,yBAAyB;AAClD,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AA6BjB,MAAM,6BAA+C;AAAA,EAC1D,MAAM;AAAA,EACN,QAAQ,CAAC,YACP,iDAAiD,WAAW,SAAS;AACzE;AAMO,SAAS,mBAAmB,UAA6B,YAA6B;AAE3F,SAAO,qBAAqB,QAAQ,WAAW,QAAQ,UAAU,MAAM,MAAM;AAC/E;AAyBA,MAAM,KAAK,CAAC,MAAwB,OAAO,MAAM,WAAW,GAAG,CAAC,OAAO;AAGvE,MAAM,YAAY;AAOlB,SAAS,qBAAqB,QAA0C,OAAuC;AAC7G,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,kBAAgB,MAAM;AACpB,QAAI,UAAU,OAAQ;AACtB,UAAM,UAAU,MAAM,aAAa,eAAe,OAAO,OAAO,CAAC;AACjE,YAAQ;AACR,UAAM,cAAc,kBAAkB,OAAO;AAC7C,WAAO,iBAAiB,UAAU,OAAO;AACzC,WAAO,MAAM;AACX,kBAAY;AACZ,aAAO,oBAAoB,UAAU,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SAAO,UAAU,SAAS,OAAO;AACnC;AASO,SAAS,iBAAiB,EAAE,SAAS,SAAS,QAAQ,YAAY,WAAW,UAAU,GAA0B;AACtH,QAAM,SAAS,aAAa,cAAc,4BAA4B,UAAU;AAChF,QAAM,QAAQ,mBAAmB,OAAO;AACxC,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,OAAuB,IAAI;AAC1C,QAAM,YAAY,qBAAqB,QAAQ,KAAK;AACpD,QAAM,OAAO,YAAY,cAAc,SAAY,0BAA0B,GAAG,SAAS,CAAC;AAC1F,QAAM,QAAuB;AAAA,IAC3B,QAAQ,cAAc,OAAO,OAAO,OAAO,IAAI,UAAU,SAAS,QAAQ,SAAS;AAAA,EACrF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ;AAAA,MAGA,WAAW;AAAA,QACT;AAAA,QACA,UAAU,UAAU;AAAA,QACpB;AAAA,MACF;AAAA,MAEC,oBAAU;AAAA;AAAA;AAAA;AAAA,MAKT;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,SAAS,YAAY;AAAA,UAC3B,MAAK;AAAA,UACL,UAAQ;AAAA,UAIR,MAAM,oBAAC,WAAQ,OAAO,MAAM,WAAU,eAAc;AAAA,UAEnD,mBAAS,OAAO,OAAO,OAAO,IAAI,OAAO;AAAA;AAAA,MAC5C;AAAA;AAAA,EAEJ;AAEJ;","names":[]}