@cosmicdrift/kumiko-renderer 0.386.0 → 0.388.0

package/dist/web/widgets/bounded-load-cache.js

@@ -1,6 +1,8 @@
 // Evicts the oldest entry once `max` is exceeded and disposes only that one,
-// so several documents on one page keep their own loading tasks alive.
-export function createBoundedLoadCache(max, dispose) {
+// so several documents on one page keep their own loading tasks alive. A
+// resolved value that `shouldKeep` rejects (a handled failure) is dropped so
+// the next mount retries.
+export function createBoundedLoadCache(max, dispose, shouldKeep = () => true) {
     const entries = new Map();
     return (key, load) => {
         const cached = entries.get(key);
@@ -9,10 +11,14 @@ export function createBoundedLoadCache(max, dispose) {
         const loading = load();
         entries.set(key, loading);
         // A failed load must not stick: the next mount retries instead of replaying the rejection.
-        loading.catch(() => {
+        const forget = () => {
             if (entries.get(key) === loading)
                 entries.delete(key);
-        });
+        };
+        loading.then((value) => {
+            if (!shouldKeep(value))
+                forget();
+        }, forget);
         if (entries.size > max) {
             const [oldestKey, oldest] = entries.entries().next().value ?? [];
             if (oldestKey !== undefined && oldest !== undefined) {

package/dist/web/widgets/charts.d.ts

@@ -4,10 +4,10 @@ import { type StatusTone } from "./status-badge.tsx";
 export type StatusBarEntry = {
     /** Stable key (z.B. ISO-Datum). */
     readonly key: string;
-    /** Balkenhöhe 0..1 (z.B. operational=1, degraded=0.75, outage=0.25). */
+    /** Bar height from 0 to 1 (e.g. operational=1, degraded=0.75, outage=0.25). */
     readonly level: number;
     readonly tone: StatusTone;
-    /** Tooltip-Text (<title>) — translated vom Caller. */
+    /** Tooltip text (<title>), supplied translated by the caller. */
     readonly label?: string;
 };
 /** Status bar strip (e.g. 90-day uptime): variable-height bars with
@@ -17,7 +17,7 @@ export type StatusBarEntry = {
 export declare function StatusBarChart({ entries, ariaLabel, startLabel, endLabel, highlightLast, dense, testId, }: {
     readonly entries: readonly StatusBarEntry[];
     readonly ariaLabel: string;
-    /** Achsen-Beschriftung links/rechts unter dem Chart — translated. */
+    /** Left and right axis labels below the chart, supplied translated. */
     readonly startLabel?: string;
     readonly endLabel?: string;
     readonly highlightLast?: boolean;
@@ -25,15 +25,15 @@ export declare function StatusBarChart({ entries, ariaLabel, startLabel, endLabe
     readonly dense?: boolean;
     readonly testId?: string;
 }): ReactNode;
-/** Quadratic-durch-Mittelpunkte-Trick: glättet die Zick-Zack-Linie ohne
- *  Overshoot (~5 Zeilen statt Catmull-Rom/Bezier-Fit). */
+/** Quadratic midpoint technique: smooths the zigzag line without overshoot
+ *  (~5 lines instead of a Catmull-Rom/Bezier fit). */
 export declare function smoothPath(pts: ReadonlyArray<{
     readonly x: number;
     readonly y: number;
 }>): string;
 export type TimeseriesPoint = {
     readonly atMs: number;
-    /** null = Ausfall/kein Wert → fällt auf die Grundlinie (sichtbarer Einbruch). */
+    /** null = outage/no value → falls to the baseline for a visible drop. */
     readonly value: number | null;
 };
 export type TimeseriesYAxis = {
@@ -65,16 +65,16 @@ export type TimeseriesReferenceLine = {
     readonly label: string;
     readonly tone?: StatusTone;
 };
-/** Zeitreihen-Linien-Chart (geglättete Linie + Flächen-Verlauf). x-Achse =
- *  ZEIT im Fenster windowStartMs..windowEndMs, nicht Index — 5 Min Daten in
- *  einem 30-Tage-Fenster ergeben ehrlich einen schmalen Streifen rechts. */
+/** Time-series line chart (smoothed line with area fill). The x-axis uses
+ *  TIME within windowStartMs..windowEndMs rather than the index, so 5-minute
+ *  data in a 30-day window correctly appears as a narrow strip on the right. */
 export declare function TimeseriesChart({ points, windowStartMs, windowEndMs, tone, ariaLabel, axisLabels, xAxis, yAxis, height, markers, formatMarkerTime, referenceLines, emptyContent, testId, }: {
     readonly points: readonly TimeseriesPoint[];
     readonly windowStartMs: number;
     readonly windowEndMs: number;
     readonly tone?: StatusTone;
     readonly ariaLabel: string;
-    /** Achsen-Zeile unter dem Chart (translated/formatiert vom Caller). */
+    /** Axis row below the chart, formatted and translated by the caller. */
     readonly axisLabels?: {
         readonly start: string;
         readonly mid?: string;

package/dist/web/widgets/charts.js

@@ -5,9 +5,9 @@ import { NARROW_VIEWPORT_BREAKPOINT_PX, useIsViewportBelow, } from "../primitive
 import { bucketIndexAtFraction, initialWindowSelection, nearestIndex, pointsWithin, resolveStackedAreaWindow, snapBrushWindow, snapMovedBrushWindow, stackedAreaAxisTicks, stackedAreaDateFormatFor, } from "./chart-window.js";
 import { ModeSwitch } from "./mode-switch.js";
 import { STATUS_TONE_TEXT } from "./status-badge.js";
-// Inline-SVG-Charts — kein Chart-Dep. Farben ausschließlich über die
-// --color-status-* / --color-foreground Theme-Tokens; Achsen-Labels
-// kommen translated vom Caller (keine Locale-Annahmen im Widget).
+// Inline SVG charts without a chart dependency. Colors come exclusively from the
+// --color-status-* / --color-foreground theme tokens; axis labels are supplied
+// translated by the caller, so the widget makes no locale assumptions.
 const HOUR_MS = 3_600_000;
 const DAY_MS = 24 * HOUR_MS;
 const TONE_VAR = {
@@ -47,8 +47,8 @@ const SINGLE_POINT_RADIUS = 3;
 function clampDotY(y, height) {
     return Math.max(SINGLE_POINT_RADIUS, Math.min(height - SINGLE_POINT_RADIUS, y));
 }
-/** Quadratic-durch-Mittelpunkte-Trick: glättet die Zick-Zack-Linie ohne
- *  Overshoot (~5 Zeilen statt Catmull-Rom/Bezier-Fit). */
+/** Quadratic midpoint technique: smooths the zigzag line without overshoot
+ *  (~5 lines instead of a Catmull-Rom/Bezier fit). */
 export function smoothPath(pts) {
     const first = pts[0];
     if (!first)
@@ -85,9 +85,9 @@ function yTickPosition(index, count) {
         return "";
     return "-translate-y-1/2";
 }
-/** Zeitreihen-Linien-Chart (geglättete Linie + Flächen-Verlauf). x-Achse =
- *  ZEIT im Fenster windowStartMs..windowEndMs, nicht Index — 5 Min Daten in
- *  einem 30-Tage-Fenster ergeben ehrlich einen schmalen Streifen rechts. */
+/** Time-series line chart (smoothed line with area fill). The x-axis uses
+ *  TIME within windowStartMs..windowEndMs rather than the index, so 5-minute
+ *  data in a 30-day window correctly appears as a narrow strip on the right. */
 export function TimeseriesChart({ points, windowStartMs, windowEndMs, tone = "ok", ariaLabel, axisLabels, xAxis, yAxis, height, markers, formatMarkerTime, referenceLines, emptyContent, testId, }) {
     const gradientId = useId();
     const descId = useId();

package/dist/web/widgets/choice-cards.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+/** Card-styled radio group for mutually exclusive choices that need a description or price line. */
+export declare function ChoiceCards<T extends string>({ value, options, onChange, ariaLabel, testId, }: {
+    /** `null`: nothing selected. */
+    readonly value: T | null;
+    readonly options: readonly {
+        readonly value: T;
+        readonly title: string;
+        readonly description?: string;
+        /** Right-aligned next to the title, e.g. a price. */
+        readonly aside?: string;
+        readonly disabled?: boolean;
+    }[];
+    readonly onChange: (value: T) => void;
+    readonly ariaLabel?: string;
+    readonly testId?: string;
+}): ReactNode;

package/dist/web/widgets/choice-cards.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { useId } from "react";
+import { cn } from "../lib/cn.js";
+/** Card-styled radio group for mutually exclusive choices that need a description or price line. */
+export function ChoiceCards({ value, options, onChange, ariaLabel, testId, }) {
+    const groupName = useId();
+    return (_jsx("div", { role: "radiogroup", "aria-label": ariaLabel, "data-testid": testId, className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: options.map((option) => {
+            const selected = option.value === value;
+            return (_jsxs("label", { "data-testid": testId !== undefined ? `${testId}-${option.value}` : undefined, className: cn("relative flex cursor-pointer flex-col gap-1 rounded-lg border bg-card p-4 transition-colors", "hover:bg-muted/50 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring", selected ? "border-primary ring-1 ring-primary" : "border-border", option.disabled && "cursor-not-allowed opacity-50"), children: [_jsx("input", { type: "radio", className: "sr-only", name: groupName, value: option.value, checked: selected, disabled: option.disabled, onChange: () => onChange(option.value) }), _jsxs("span", { className: "flex items-start justify-between gap-2", children: [_jsx("span", { className: "font-semibold", children: option.title }), _jsxs("span", { className: "flex items-center gap-2", children: [option.aside !== undefined && (_jsx("span", { className: "font-semibold tabular-nums", children: option.aside })), _jsx("span", { "aria-hidden": "true", className: cn("flex size-5 shrink-0 items-center justify-center rounded-full border", selected ? "border-primary bg-primary text-primary-foreground" : "border-input"), children: selected && _jsx(Check, { className: "size-3" }) })] })] }), option.description !== undefined && (_jsx("span", { className: "text-sm text-muted-foreground", children: option.description }))] }, option.value));
+        }) }));
+}

package/dist/web/widgets/collapsible-section.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from "react";
-/** Aufklappbare Sektion (native <details>, aber React-kontrolliert: sonst
- *  springt das open-Attribut bei jedem Parent-Re-Render auf den Initialwert
- *  zurück). Eine Optik für alle „Erweitert"/„Mehr"-Abschnitte. */
+/** Collapsible section using native <details> with React-controlled state; otherwise
+ *  the open attribute resets to its initial value on every parent re-render.
+ *  Provides consistent styling for all “Erweitert”/“Mehr” sections. */
 export declare function CollapsibleSection({ title, defaultOpen, children, testId, }: {
     readonly title: string;
     readonly defaultOpen?: boolean;

package/dist/web/widgets/collapsible-section.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 import { useEffect, useState } from "react";
-/** Aufklappbare Sektion (native <details>, aber React-kontrolliert: sonst
- *  springt das open-Attribut bei jedem Parent-Re-Render auf den Initialwert
- *  zurück). Eine Optik für alle „Erweitert"/„Mehr"-Abschnitte. */
+/** Collapsible section using native <details> with React-controlled state; otherwise
+ *  the open attribute resets to its initial value on every parent re-render.
+ *  Provides consistent styling for all “Erweitert”/“Mehr” sections. */
 export function CollapsibleSection({ title, defaultOpen = false, children, testId, }) {
     const [open, setOpen] = useState(defaultOpen);
-    // useState(defaultOpen) liest nur den Mount-Wert — ein async hydrierter
-    // Draft flippt `defaultOpen` zu spät für den Lazy-Initializer. Open-only
-    // Effect: kämpft nie gegen ein manuelles Zuklappen des Users.
+    // useState(defaultOpen) reads only the mount-time value; an asynchronously hydrated
+    // draft flips `defaultOpen` too late for the lazy initializer. An open-only
+    // effect never overrides the user's manual collapse.
     useEffect(() => {
         if (defaultOpen)
             setOpen(true);
     }, [defaultOpen]);
-    return (_jsxs("details", { "data-testid": testId, className: "group rounded-lg border bg-card", open: open, onToggle: (e) => setOpen(e.currentTarget.open), children: [_jsxs("summary", { className: "flex cursor-pointer select-none items-center justify-between gap-2 rounded-lg px-4 py-2.5 text-sm font-medium hover:bg-muted/50 [&::-webkit-details-marker]:hidden", children: [_jsx("span", { children: title }), _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 text-muted-foreground transition-transform group-open:rotate-90" })] }), _jsx("div", { className: "border-t px-4 py-3", children: children })] }));
+    return (_jsxs("details", { "data-testid": testId, className: "group rounded-lg border bg-card", open: open, onToggle: (e) => setOpen(e.currentTarget.open), children: [_jsxs("summary", { className: "flex h-9 cursor-pointer select-none items-center justify-between gap-2 rounded-lg px-4 text-sm font-medium hover:bg-muted/50 [&::-webkit-details-marker]:hidden", children: [_jsx("span", { children: title }), _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 text-muted-foreground transition-transform group-open:rotate-90" })] }), _jsx("div", { className: "border-t px-4 py-3", children: children })] }));
 }

package/dist/web/widgets/detail-list.d.ts

@@ -1,7 +1,9 @@
 import type { ReactNode } from "react";
-/** Read-only Schlüssel-Wert-Liste für Detail-Masken (Label links gedimmt,
- *  Wert rechts). Wert ist ReactNode → Badges/Chips möglich. `emphasize` hebt
- *  eine Zeile hervor (z.B. das Endergebnis in einem Rechner). */
+/**
+ * Read-only key-value list for detail views (dimmed label on the left, value on the right). The
+ * value is a ReactNode, so badges and chips are supported. `emphasize` highlights a row, such as
+ * the final result in a calculator.
+ */
 export declare function DetailList({ rows, testId, }: {
     readonly rows: readonly {
         /** Optional stable key -- falls back to the label when omitted (fine as

package/dist/web/widgets/detail-list.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
-/** Read-only Schlüssel-Wert-Liste für Detail-Masken (Label links gedimmt,
- *  Wert rechts). Wert ist ReactNode → Badges/Chips möglich. `emphasize` hebt
- *  eine Zeile hervor (z.B. das Endergebnis in einem Rechner). */
+/**
+ * Read-only key-value list for detail views (dimmed label on the left, value on the right). The
+ * value is a ReactNode, so badges and chips are supported. `emphasize` highlights a row, such as
+ * the final result in a calculator.
+ */
 export function DetailList({ rows, testId, }) {
     return (_jsx("dl", { "data-testid": testId, className: "@container flex flex-col divide-y", children: rows.map((row) => (_jsxs("div", { className: "grid grid-cols-1 gap-0.5 py-2.5 @md:grid-cols-[200px_1fr] @md:gap-4", children: [_jsx("dt", { className: cn("text-sm text-muted-foreground", row.emphasize === true && "font-semibold text-foreground"), children: row.label }), _jsx("dd", { className: cn("text-sm font-medium", row.emphasize === true && "font-semibold"), children: row.value })] }, row.id ?? row.label))) }));
 }

package/dist/web/widgets/feed-list.d.ts

@@ -4,8 +4,8 @@ export type FeedRow = {
     readonly primary: string;
     readonly trailing?: string;
 };
-/** Nicht-tabellarische Kurzliste (z.B. "nächste Termine") — Primary-Text +
- *  optionaler rechtsbündiger Trailing-Wert pro Zeile. */
+/** Non-tabular compact list (e.g. "upcoming appointments") — primary text plus
+ *  an optional right-aligned trailing value for each row. */
 export declare function FeedList({ rows, emptyContent, testId, }: {
     readonly rows: readonly FeedRow[];
     readonly emptyContent?: ReactNode;

package/dist/web/widgets/feed-list.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Nicht-tabellarische Kurzliste (z.B. "nächste Termine") — Primary-Text +
- *  optionaler rechtsbündiger Trailing-Wert pro Zeile. */
+/** Non-tabular compact list (e.g. "upcoming appointments") — primary text plus
+ *  an optional right-aligned trailing value for each row. */
 export function FeedList({ rows, emptyContent, testId, }) {
     if (rows.length === 0) {
         return _jsx("div", { "data-testid": testId, children: emptyContent });

package/dist/web/widgets/form-fields.d.ts

@@ -12,10 +12,10 @@ export interface NumberFieldProps {
     /** `false` renders without thousands separators (e.g. a year). Default `true`. */
     readonly grouping?: boolean;
 }
-/** Zahlenfeld = Field + Input(kind:"number") in einem — nimmt der Screen die
- *  wiederholte id/name/value/onChange-Verdrahtung ab. `value` darf `undefined`
- *  sein (leeres Feld), intern auf den `""`-Empty-State des Inputs gemappt.
- *  Einheiten (€/%) gehören ins Label (`t("…Summe (€)")`), nicht als Badge. */
+/** Number field = Field + Input(kind:"number"); avoids repeating the
+ *  id/name/value/onChange wiring at each screen. `value` may be `undefined`
+ *  (empty field) and is mapped internally to the Input's `""` empty state.
+ *  Units (€/%) belong in the label (`t("…Summe (€)")`), not in a badge. */
 export declare function NumberField({ label, id, name, value, onChange, required, disabled, hideLabel, testId, grouping, }: NumberFieldProps): ReactNode;
 export declare const MoneyField: typeof NumberField;
 export declare const PercentField: typeof NumberField;
@@ -34,7 +34,7 @@ export interface TextFieldProps extends FieldBase {
     readonly placeholder?: string;
     readonly autoComplete?: string;
 }
-/** Textfeld = Field + Input(kind:"text"). */
+/** Text field = Field + Input(kind:"text"). */
 export declare function TextField({ label, id, name, value, onChange, required, disabled, placeholder, autoComplete, hideLabel, testId, }: TextFieldProps): ReactNode;
 export interface SelectFieldProps extends FieldBase {
     readonly value: string;
@@ -44,7 +44,7 @@ export interface SelectFieldProps extends FieldBase {
         readonly label: string;
     }[];
 }
-/** Auswahlfeld = Field + Input(kind:"select"). */
+/** Select field = Field + Input(kind:"select"). */
 export declare function SelectField({ label, id, name, value, onChange, options, required, disabled, hideLabel, testId, }: SelectFieldProps): ReactNode;
 export interface DateFieldProps extends FieldBase {
     readonly value: string;
@@ -52,7 +52,7 @@ export interface DateFieldProps extends FieldBase {
     readonly min?: string;
     readonly max?: string;
 }
-/** Datumsfeld = Field + Input(kind:"date"), ISO yyyy-mm-dd. */
+/** Date field = Field + Input(kind:"date"), ISO yyyy-mm-dd. */
 export declare function DateField({ label, id, name, value, onChange, min, max, required, disabled, hideLabel, testId, }: DateFieldProps): ReactNode;
 export interface BooleanFieldProps extends FieldBase {
     readonly value: boolean;
@@ -65,7 +65,7 @@ export interface TextareaFieldProps extends FieldBase {
     readonly onChange: (v: string) => void;
     readonly rows?: number;
 }
-/** Mehrzeiliges Textfeld = Field + Input(kind:"textarea"). */
+/** Multi-line text field = Field + Input(kind:"textarea"). */
 export declare function TextareaField({ label, id, name, value, onChange, rows, required, disabled, hideLabel, testId, }: TextareaFieldProps): ReactNode;
 export interface RangeFieldProps extends FieldBase {
     readonly value: number;
@@ -74,20 +74,20 @@ export interface RangeFieldProps extends FieldBase {
     readonly max: number;
     readonly step?: number;
 }
-/** Schieberegler = Field + Input(kind:"range"). */
+/** Slider = Field + Input(kind:"range"). */
 export declare function RangeField({ label, id, name, value, onChange, min, max, step, required, disabled, hideLabel, testId, }: RangeFieldProps): ReactNode;
 export interface FileFieldProps extends FieldBase {
-    /** FileRef-UUID der gespeicherten Datei, oder null. */
+    /** FileRef UUID of the stored file, or null. */
     readonly value: string | null;
     readonly onChange: (fileId: string | null) => void;
     readonly accept?: readonly string[];
-    /** "image" zeigt eine Vorschau, "file" nur den Dateinamen. Default "file". */
+    /** "image" shows a preview; "file" shows only the file name. Default "file". */
     readonly variant?: "file" | "image";
-    /** Bindet den Upload an ein konkretes Entity-Feld — der `/api/files`-Endpoint
-     *  prüft `accept`/`maxSize` dann serverseitig gegen dessen Feld-Definition. */
+    /** Binds the upload to a specific entity field; the `/api/files` endpoint
+     *  then validates `accept`/`maxSize` server-side against that field's definition. */
     readonly entityType?: string;
     readonly fieldName?: string;
 }
-/** Datei-Upload = Field + Input(kind:"file"|"image") — FileRef-basiert. */
+/** File upload = Field + Input(kind:"file"|"image"), based on FileRef. */
 export declare function FileField({ label, id, name, value, onChange, accept, variant, entityType, fieldName, required, disabled, hideLabel, testId, }: FileFieldProps): ReactNode;
 export {};

package/dist/web/widgets/form-fields.js

@@ -1,29 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { usePrimitives } from "../../index.js";
-/** Zahlenfeld = Field + Input(kind:"number") in einem — nimmt der Screen die
- *  wiederholte id/name/value/onChange-Verdrahtung ab. `value` darf `undefined`
- *  sein (leeres Feld), intern auf den `""`-Empty-State des Inputs gemappt.
- *  Einheiten (€/%) gehören ins Label (`t("…Summe (€)")`), nicht als Badge. */
+/** Number field = Field + Input(kind:"number"); avoids repeating the
+ *  id/name/value/onChange wiring at each screen. `value` may be `undefined`
+ *  (empty field) and is mapped internally to the Input's `""` empty state.
+ *  Units (€/%) belong in the label (`t("…Summe (€)")`), not in a badge. */
 export function NumberField({ label, id, name, value, onChange, required, disabled, hideLabel, testId, grouping, }) {
     const { Field, Input } = usePrimitives();
     return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "number", id: id, name: name, value: value ?? "", onChange: onChange, required: required, disabled: disabled, ...(grouping !== undefined && { grouping }) }) }));
 }
-// Aliase markieren die Feld-Absicht am Call-Site (lesbarer als NumberField
-// überall) ohne eigene Wrapper-Funktion vorzutäuschen — beide sind identisch
-// zu NumberField, kein Ort für künftige geld-/prozent-spezifische Formatierung.
+// Aliases convey the field's intent at the call site (more readable than
+// using NumberField everywhere) without pretending to be wrapper functions;
+// both are identical to NumberField and are not intended for future
+// money-/percentage-specific formatting.
 export const MoneyField = NumberField;
 export const PercentField = NumberField;
-/** Textfeld = Field + Input(kind:"text"). */
+/** Text field = Field + Input(kind:"text"). */
 export function TextField({ label, id, name, value, onChange, required, disabled, placeholder, autoComplete, hideLabel, testId, }) {
     const { Field, Input } = usePrimitives();
     return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "text", id: id, name: name, value: value, onChange: onChange, required: required, disabled: disabled, ...(placeholder !== undefined && { placeholder }), ...(autoComplete !== undefined && { autoComplete }) }) }));
 }
-/** Auswahlfeld = Field + Input(kind:"select"). */
+/** Select field = Field + Input(kind:"select"). */
 export function SelectField({ label, id, name, value, onChange, options, required, disabled, hideLabel, testId, }) {
     const { Field, Input } = usePrimitives();
     return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "select", id: id, name: name, value: value, onChange: onChange, options: options, required: required, disabled: disabled }) }));
 }
-/** Datumsfeld = Field + Input(kind:"date"), ISO yyyy-mm-dd. */
+/** Date field = Field + Input(kind:"date"), ISO yyyy-mm-dd. */
 export function DateField({ label, id, name, value, onChange, min, max, required, disabled, hideLabel, testId, }) {
     const { Field, Input } = usePrimitives();
     return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "date", id: id, name: name, value: value, onChange: (v) => onChange(v ?? ""), required: required, disabled: disabled, ...(min !== undefined && { min }), ...(max !== undefined && { max }) }) }));
@@ -33,17 +34,17 @@ export function BooleanField({ label, id, name, value, onChange, required, disab
     const { Field, Input } = usePrimitives();
     return (_jsx(Field, { id: id, label: label, required: required, layout: "inline", hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "boolean", id: id, name: name, value: value, onChange: onChange, required: required, disabled: disabled }) }));
 }
-/** Mehrzeiliges Textfeld = Field + Input(kind:"textarea"). */
+/** Multi-line text field = Field + Input(kind:"textarea"). */
 export function TextareaField({ label, id, name, value, onChange, rows, required, disabled, hideLabel, testId, }) {
     const { Field, Input } = usePrimitives();
     return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "textarea", id: id, name: name, value: value, onChange: onChange, required: required, disabled: disabled, ...(rows !== undefined && { rows }) }) }));
 }
-/** Schieberegler = Field + Input(kind:"range"). */
+/** Slider = Field + Input(kind:"range"). */
 export function RangeField({ label, id, name, value, onChange, min, max, step, required, disabled, hideLabel, testId, }) {
     const { Field, Input } = usePrimitives();
     return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "range", id: id, name: name, value: value, onChange: onChange, min: min, max: max, required: required, disabled: disabled, ...(step !== undefined && { step }) }) }));
 }
-/** Datei-Upload = Field + Input(kind:"file"|"image") — FileRef-basiert. */
+/** File upload = Field + Input(kind:"file"|"image"), based on FileRef. */
 export function FileField({ label, id, name, value, onChange, accept, variant = "file", entityType, fieldName, required, disabled, hideLabel, testId, }) {
     const { Field, Input } = usePrimitives();
     return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: variant, id: id, name: name, value: value, onChange: onChange, required: required, disabled: disabled, ...(accept !== undefined && { accept }), ...(entityType !== undefined && { entityType }), ...(fieldName !== undefined && { fieldName }) }) }));

package/dist/web/widgets/index.d.ts

@@ -1,6 +1,7 @@
 export { AiTextArea, type AiTextAreaProps, AiTextField, type AiTextFieldProps, } from "./ai-text-field.tsx";
 export type { StackedAreaDateFormat, StackedAreaInitialWindow, StackedAreaRangeOption, StackedAreaRanges, StackedAreaWindowSelection, } from "./chart-window.ts";
 export { type ChartMarker, type ChartSeries, type ChartTone, SegmentBarChart, type SegmentBarRow, StackedAreaChart, StackedBarChart, StatusBarChart, type StatusBarEntry, smoothPath, TimeseriesChart, type TimeseriesHeight, type TimeseriesPoint, type TimeseriesReferenceLine, type TimeseriesXAxis, type TimeseriesYAxis, } from "./charts.tsx";
+export { ChoiceCards } from "./choice-cards.tsx";
 export { CollapsibleSection } from "./collapsible-section.tsx";
 export { type DashboardListColumn, DashboardListTable } from "./dashboard-list.tsx";
 export { DetailList } from "./detail-list.tsx";

package/dist/web/widgets/index.js

@@ -1,9 +1,10 @@
-// Mid-Level-Widgets — Kompositionen über den Primitives (Card, DataTable,
-// Banner) + Theme-Tokens. Für Custom-Screens: erst hier schauen, dann bauen.
-// Katalog: docs.kumiko.rocks → Guides → Widgets; visueller Überblick im
-// styleguide-Sample.
+// Mid-level widgets — compositions built from primitives (Card, DataTable,
+// Banner) and theme tokens. For custom screens, check here before building.
+// Catalog: docs.kumiko.rocks → Guides → Widgets; visual overview in the
+// styleguide sample.
 export { AiTextArea, AiTextField, } from "./ai-text-field.js";
 export { SegmentBarChart, StackedAreaChart, StackedBarChart, StatusBarChart, smoothPath, TimeseriesChart, } from "./charts.js";
+export { ChoiceCards } from "./choice-cards.js";
 export { CollapsibleSection } from "./collapsible-section.js";
 export { DashboardListTable } from "./dashboard-list.js";
 export { DetailList } from "./detail-list.js";

package/dist/web/widgets/infinity-list.js

@@ -28,7 +28,7 @@ export function InfinityList({ query, payload, pageSize = 50, rows, nextCursor,
     // Discards a response whose request was superseded by a newer one before
     // it resolved (e.g. two searches fired in quick succession) — without
     // this, a slow earlier response can land after a faster later one and
-    // overwrite it, leaving stale rows on screen (fw#1705).
+    // overwrite it, leaving stale rows on screen.
     const requestSeq = useRef(0);
     // IDs of the most recently loaded first page. refreshFirstPage() needs
     // this to tell "row dropped from page 1 elsewhere" (must be pruned) apart
@@ -84,7 +84,7 @@ export function InfinityList({ query, payload, pageSize = 50, rows, nextCursor,
     // to the front (newest-first feeds), rows it dropped (edited/deleted
     // elsewhere) are pruned, and everything beyond page 1 stays untouched.
     // A full reload would collapse already-accumulated pages and jump the
-    // scroll position; see fw#1827.
+    // scroll position.
     // biome-ignore lint/correctness/useExhaustiveDependencies: payload goes through payloadKey
     const refreshFirstPage = useCallback(async () => {
         // Read, don't bump: a concurrent load() (e.g. the mount fetch still
@@ -127,7 +127,7 @@ export function InfinityList({ query, payload, pageSize = 50, rows, nextCursor,
         });
     }, [dispatcher, query, pageSize, payloadKey]);
     // Trailing debounce + in-flight coalesce: bulk SSE storms must not fan out
-    // into one query per event (fw#1829). A refresh already running schedules
+    // into one query per event. A refresh already running schedules
     // exactly one trailing pass after it settles.
     const liveTimerRef = useRef(null);
     const liveInFlightRef = useRef(false);

package/dist/web/widgets/mode-switch.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 export type ModeSwitchVariant = "outline" | "pill";
-/** Segmented-Control für sich ausschließende Modi — die prominente
- *  Alternative zum vergrabenen <select>. */
+/** Segmented control for mutually exclusive modes—the prominent
+ * alternative to the buried <select>. */
 export declare function ModeSwitch<T extends string>({ value, options, onChange, ariaLabel, variant, className, testId, }: {
     /** `null`: no option active. */
     readonly value: T | null;

package/dist/web/widgets/mode-switch.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
-/** Segmented-Control für sich ausschließende Modi — die prominente
- *  Alternative zum vergrabenen <select>. */
+/** Segmented control for mutually exclusive modes—the prominent
+ * alternative to the buried <select>. */
 export function ModeSwitch({ value, options, onChange, ariaLabel, variant = "outline", className, testId, }) {
     const pill = variant === "pill";
     return (_jsx("div", { "data-testid": testId, role: "group", "aria-label": ariaLabel, className: cn("flex min-h-8", pill

package/dist/web/widgets/pdf-preview.js

@@ -10,7 +10,7 @@ const MAX_CACHED_DOCUMENTS = 4;
 const cachedDocument = createBoundedLoadCache(MAX_CACHED_DOCUMENTS, (loaded) => {
     if (loaded.ok)
         void loaded.loadingTask.destroy();
-});
+}, (loaded) => loaded.ok);
 function decodeBase64(base64) {
     const binary = atob(base64);
     const bytes = new Uint8Array(binary.length);

package/dist/web/widgets/plan-card.d.ts

@@ -2,6 +2,8 @@ import type { ReactNode } from "react";
 export type PlanCardPrice = {
     readonly amount: string;
     readonly period?: string;
+    /** Shown before the amount, e.g. "from" when prices differ per provider. */
+    readonly prefix?: string;
 };
 export type PlanCardActionSlot = {
     readonly label: string;

package/dist/web/widgets/plan-card.js

@@ -6,7 +6,7 @@ export function PlanCard({ title, description, price, features, current = false,
     const t = useTranslation();
     const compact = variant === "compact";
     const footer = cta !== undefined || ctaLink !== undefined || secondaryAction !== undefined ? (_jsxs("div", { className: "flex w-full flex-col gap-2", children: [ctaLink !== undefined && (_jsx(Link, { href: ctaLink.href, variant: "button", target: ctaLink.target, className: "w-full justify-center", testId: testId !== undefined ? `${testId}-cta` : "plan-card-cta", children: ctaLink.label })), ctaLink === undefined && cta !== undefined && (_jsx(Button, { width: "full", disabled: cta.disabled, onClick: cta.onClick, testId: testId !== undefined ? `${testId}-cta` : "plan-card-cta", children: cta.label })), secondaryAction !== undefined && (_jsx(Button, { variant: "secondary", width: "full", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, children: secondaryAction.label }))] })) : undefined;
-    return (_jsxs(Card, { testId: testId ?? "plan-card", className: cn(current && "border-primary"), slots: { footer }, children: [_jsxs("div", { className: cn("flex items-start justify-between gap-2", compact && "items-center"), children: [_jsx("h2", { className: cn("font-semibold", compact ? "text-base" : "text-lg"), children: title }), current && (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-current` : "plan-card-current", className: "inline-block rounded-xl bg-primary/10 px-2.5 py-1 text-xs font-semibold text-primary", children: t("kumiko.planCard.current") }))] }), description !== undefined && !compact && (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })), price !== undefined && (_jsx("div", { className: cn(compact ? "mt-1" : "mt-1 mb-3"), children: price === null ? (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-price-unavailable` : "plan-card-price-unavailable", className: "text-sm text-muted-foreground", children: t("kumiko.planCard.priceUnavailable") })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-2xl font-bold", children: price.amount }), price.period !== undefined && (_jsx("span", { className: "ml-1 text-sm text-muted-foreground", children: price.period }))] })) })), !compact && features !== undefined && features.length > 0 && (_jsx("ul", { className: "space-y-1 text-sm", children: features.map((feature, index) => (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { "aria-hidden": "true", children: "\u2713" }), _jsx("span", { children: feature })] }, index))) }))] }));
+    return (_jsxs(Card, { testId: testId ?? "plan-card", className: cn(current && "border-primary"), slots: { footer }, children: [_jsxs("div", { className: cn("flex items-start justify-between gap-2", compact && "items-center"), children: [_jsx("h2", { className: cn("font-semibold", compact ? "text-base" : "text-lg"), children: title }), current && (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-current` : "plan-card-current", className: "inline-block rounded-xl bg-primary/10 px-2.5 py-1 text-xs font-semibold text-primary", children: t("kumiko.planCard.current") }))] }), description !== undefined && !compact && (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })), price !== undefined && (_jsx("div", { className: cn(compact ? "mt-1" : "mt-1 mb-3"), children: price === null ? (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-price-unavailable` : "plan-card-price-unavailable", className: "text-sm text-muted-foreground", children: t("kumiko.planCard.priceUnavailable") })) : (_jsxs(_Fragment, { children: [price.prefix !== undefined && (_jsx("span", { className: "mr-1 text-sm text-muted-foreground", children: price.prefix })), _jsx("span", { className: "text-2xl font-bold", children: price.amount }), price.period !== undefined && (_jsx("span", { className: "ml-1 text-sm text-muted-foreground", children: price.period }))] })) })), !compact && features !== undefined && features.length > 0 && (_jsx("ul", { className: "space-y-1 text-sm", children: features.map((feature, index) => (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { "aria-hidden": "true", children: "\u2713" }), _jsx("span", { children: feature })] }, index))) }))] }));
 }
 export function PlanGrid({ children, testId }) {
     return (_jsx("div", { "data-testid": testId, className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: children }));

package/dist/web/widgets/progress-list.d.ts

@@ -10,8 +10,7 @@ export type ProgressListRow = {
     /** Small line under the bar, e.g. "42 % repaid". */
     readonly sub?: string;
 };
-/** Liste aus Label/Wert-Kopfzeile + Fortschrittsbalken pro Eintrag (z.B.
- *  Tilgungsfortschritt pro Kredit). */
+/** Label/value header and progress bar for each entry (for example, loan repayment progress). */
 export declare function ProgressList({ rows, emptyContent, testId, }: {
     readonly rows: readonly ProgressListRow[];
     readonly emptyContent?: ReactNode;

package/dist/web/widgets/progress-list.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 import { ProgressBar } from "./progress-bar.js";
-/** Liste aus Label/Wert-Kopfzeile + Fortschrittsbalken pro Eintrag (z.B.
- *  Tilgungsfortschritt pro Kredit). */
+/** Label/value header and progress bar for each entry (for example, loan repayment progress). */
 export function ProgressList({ rows, emptyContent, testId, }) {
     if (rows.length === 0) {
         return _jsx("div", { "data-testid": testId, children: emptyContent });

package/dist/web/widgets/query-table.d.ts

@@ -2,25 +2,25 @@ import type { ReactNode } from "react";
 import { type DataTableProps } from "../../index.ts";
 export type QueryTableColumn = {
     readonly field: string;
-    /** Translated Header-Label (i18n-Key auflösen liegt beim Caller). */
+    /** Translated header label (resolving the i18n key is the caller's responsibility). */
     readonly label: string;
-    /** Field-Type für die Zell-Formatierung. Default "text". */
+    /** Field type for cell formatting. Default: "text". */
     readonly type?: string;
 };
 export type QueryTableProps<TData = unknown> = {
     /** Dispatcher-Query-Type (`<feature>:query:<entity>:<verb>`). */
     readonly query: string;
     readonly payload?: unknown;
-    /** SSE-Invalidierung — refetcht bei Entity-Events (useQuery live-mode). */
+    /** SSE invalidation — refetches on entity events (useQuery live mode). */
     readonly live?: boolean;
     readonly columns: readonly QueryTableColumn[];
-    /** Rows aus dem Query-Result ziehen. Default: Result selbst als Array. */
+    /** Extracts rows from the query result. Default: the result itself as an array. */
     readonly rows?: (data: TData) => readonly Readonly<Record<string, unknown>>[];
-    /** Row-Id für Keys/Row-Click. Default: `row.id`, sonst der Index. */
+    /** Row ID for keys and row clicks. Default: `row.id`, otherwise the index. */
     readonly rowId?: (row: Readonly<Record<string, unknown>>, index: number) => string;
     readonly onRowClick?: DataTableProps["onRowClick"];
     readonly rowActions?: DataTableProps["rowActions"];
-    /** Empty-Inhalt — Default ist der Standard-Empty-State der Listen. */
+    /** Empty content — defaults to the standard list empty state. */
     readonly emptyState?: ReactNode;
     readonly toolbarTitle?: ReactNode;
     readonly toolbarEnd?: ReactNode;