@cosmicdrift/kumiko-renderer 0.386.0 → 0.387.0

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.js

@@ -1,7 +1,7 @@
-// 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 { CollapsibleSection } from "./collapsible-section.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/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;

package/dist/web/widgets/result-panel.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
-/** Ergebnis-Sektion eines Rechners: SectionCard mit Empty-Zustand (Banner)
- *  oder Kennzahl-Liste (DetailList) + optionalen Extras (Tabelle, Hinweise).
- *  Ersetzt die handgebauten `<dl>`/Banner-Blöcke in Custom-Screens. */
+/** Result section for a calculator: SectionCard with an empty state (Banner)
+ *  or a metric list (DetailList) plus optional extras (table, notes).
+ *  Replaces hand-built `<dl>`/banner blocks in custom screens. */
 export declare function ResultPanel({ title, subtitle, empty, emptyText, rows, footer, children, testId, }: {
     readonly title: string;
     readonly subtitle?: string;
@@ -12,7 +12,7 @@ export declare function ResultPanel({ title, subtitle, empty, emptyText, rows, f
         readonly value: ReactNode;
         readonly emphasize?: boolean;
     }[];
-    /** Action-Slot am Karten-Fuß (z.B. „In Finanzierung übernehmen"). */
+    /** Action slot at the bottom of the card (e.g. "Move to financing"). */
     readonly footer?: ReactNode;
     readonly children?: ReactNode;
     readonly testId?: string;
@@ -27,18 +27,18 @@ export interface ResultTableFooterRow {
     readonly value: ReactNode;
     readonly emphasize?: boolean;
 }
-/** Statische, prop-getriebene Ergebnistabelle für berechnete Zeilen (Tranchen,
- *  Szenarien). Nimmt dem Screen die `<table>`+tabular-nums-Ketten ab.
- *  ponytail: bewusst die minimale Read-only-Tabelle — für Sort/Pager/Facets
- *  stattdessen usePrimitives().DataTable bzw. QueryTable nutzen. */
+/** Static, prop-driven result table for calculated rows (tranches, scenarios).
+ *  Avoids repeating the `<table>`+tabular-nums pattern in each screen.
+ *  ponytail: intentionally minimal and read-only—for sorting, paging, or facets,
+ *  use usePrimitives().DataTable or QueryTable instead. */
 export declare function ResultTable<Row>({ columns, rows, rowKey, testId, className, card, footer, }: {
     readonly columns: readonly ResultColumn<Row>[];
     readonly rows: readonly Row[];
     readonly rowKey: (row: Row, index: number) => string;
     readonly testId?: string;
     readonly className?: string;
-    /** Rahmen-Look wie die CRUD-Liste (DataTable): gerundeter Border-Container +
-     *  bg-muted-Header-Band. Default = bare (nur die Tabelle, ohne Container). */
+    /** Framed appearance like the CRUD list (DataTable): rounded border container +
+     *  bg-muted header band. Default = bare (table only, without a container). */
     readonly card?: boolean;
     /** Summary rows (Subtotal/Tax/Total) rendered as real `<tr>`s in the same
      *  `<table>` instead of a separate flex-div next to it — guarantees
@@ -49,12 +49,12 @@ export declare function ResultTable<Row>({ columns, rows, rowKey, testId, classN
 export interface ComparisonMetric<Col> {
     readonly label: string;
     readonly value: (col: Col, index: number) => ReactNode;
-    /** Index der besten Spalte für diese Zeile (hervorgehoben); -1 = keine. */
+    /** Index of the best column for this row (highlighted); -1 = none. */
     readonly bestIndex?: (cols: readonly Col[]) => number;
 }
-/** Transponierte Vergleichstabelle: Zeile = Kennzahl, Spalte = Variante, je
- *  Kennzahl optional die beste Spalte hervorgehoben. Für Szenario-/Angebots-
- *  Vergleiche, wo ResultTable (Zeile=Datensatz) nicht passt. */
+/** Transposed comparison table: row = metric, column = variant, with the best
+ *  column optionally highlighted for each metric. For scenario/offer comparisons
+ *  where ResultTable (row = record) is not suitable. */
 export declare function ComparisonTable<Col>({ columns, columnHeader, columnKey, metrics, metricLabel, testId, className, card, }: {
     readonly columns: readonly Col[];
     readonly columnHeader: (col: Col, index: number) => string;
@@ -63,7 +63,7 @@ export declare function ComparisonTable<Col>({ columns, columnHeader, columnKey,
     readonly metricLabel: string;
     readonly testId?: string;
     readonly className?: string;
-    /** Rahmen-Look wie die CRUD-Liste (DataTable): gerundeter Border-Container +
-     *  bg-muted-Header-Band. Default = bare. */
+    /** Framed appearance like the CRUD list (DataTable): rounded border container +
+     *  bg-muted header band. Default = bare. */
     readonly card?: boolean;
 }): ReactNode;

package/dist/web/widgets/result-panel.js

@@ -3,24 +3,24 @@ import { usePrimitives } from "../../index.js";
 import { cn } from "../lib/cn.js";
 import { DetailList } from "./detail-list.js";
 import { SectionCard } from "./section-card.js";
-/** Ergebnis-Sektion eines Rechners: SectionCard mit Empty-Zustand (Banner)
- *  oder Kennzahl-Liste (DetailList) + optionalen Extras (Tabelle, Hinweise).
- *  Ersetzt die handgebauten `<dl>`/Banner-Blöcke in Custom-Screens. */
+/** Result section for a calculator: SectionCard with an empty state (Banner)
+ *  or a metric list (DetailList) plus optional extras (table, notes).
+ *  Replaces hand-built `<dl>`/banner blocks in custom screens. */
 export function ResultPanel({ title, subtitle, empty, emptyText, rows, footer, children, testId, }) {
     const { Banner } = usePrimitives();
     return (_jsx(SectionCard, { title: title, subtitle: subtitle, footer: footer, testId: testId, children: empty === true ? (_jsx(Banner, { variant: "info", padded: true, children: emptyText })) : (_jsxs("div", { className: "flex flex-col gap-4", children: [rows !== undefined && rows.length > 0 && _jsx(DetailList, { rows: rows }), children] })) }));
 }
-/** Statische, prop-getriebene Ergebnistabelle für berechnete Zeilen (Tranchen,
- *  Szenarien). Nimmt dem Screen die `<table>`+tabular-nums-Ketten ab.
- *  ponytail: bewusst die minimale Read-only-Tabelle — für Sort/Pager/Facets
- *  stattdessen usePrimitives().DataTable bzw. QueryTable nutzen. */
+/** Static, prop-driven result table for calculated rows (tranches, scenarios).
+ *  Avoids repeating the `<table>`+tabular-nums pattern in each screen.
+ *  ponytail: intentionally minimal and read-only—for sorting, paging, or facets,
+ *  use usePrimitives().DataTable or QueryTable instead. */
 export function ResultTable({ columns, rows, rowKey, testId, className, card, footer, }) {
     const table = (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { "data-testid": testId, className: cn("w-full text-sm", className), children: [_jsx("thead", { className: cn(card === true && "bg-muted"), children: _jsx("tr", { className: "border-b text-left text-muted-foreground", children: columns.map((col) => (_jsx("th", { className: cn("py-1.5 font-medium", card === true && "px-3", col.align === "right" && "text-right"), children: col.header }, col.header))) }) }), _jsxs("tbody", { children: [rows.map((row, i) => (_jsx("tr", { className: "border-b last:border-0", children: columns.map((col) => (_jsx("td", { className: cn("py-1.5", card === true && "px-3", col.align === "right" && "text-right tabular-nums"), children: col.cell(row) }, col.header))) }, rowKey(row, i)))), footer?.map((row, i) => (_jsxs("tr", { className: cn(i === 0 && "border-t", row.emphasize === true && "font-semibold"), children: [_jsxs("td", { colSpan: columns.length > 1 ? Math.max(columns.length - 1, 1) : undefined, className: cn("py-1.5 text-muted-foreground", card === true && "px-3", row.emphasize === true && "text-foreground", columns.length === 1 && "flex items-center justify-between gap-4"), children: [row.label, columns.length === 1 && (_jsx("span", { className: cn("text-right tabular-nums", row.emphasize === true && "text-foreground"), children: row.value }))] }), columns.length > 1 && (_jsx("td", { className: cn("py-1.5 text-right tabular-nums", card === true && "px-3"), children: row.value }))] }, row.label)))] })] }) }));
     return card === true ? (_jsx("div", { className: "overflow-hidden rounded-lg border bg-card", children: table })) : (table);
 }
-/** Transponierte Vergleichstabelle: Zeile = Kennzahl, Spalte = Variante, je
- *  Kennzahl optional die beste Spalte hervorgehoben. Für Szenario-/Angebots-
- *  Vergleiche, wo ResultTable (Zeile=Datensatz) nicht passt. */
+/** Transposed comparison table: row = metric, column = variant, with the best
+ *  column optionally highlighted for each metric. For scenario/offer comparisons
+ *  where ResultTable (row = record) is not suitable. */
 export function ComparisonTable({ columns, columnHeader, columnKey, metrics, metricLabel, testId, className, card, }) {
     const table = (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { "data-testid": testId, className: cn("w-full min-w-[24rem] text-sm", className), children: [_jsx("thead", { className: cn(card === true && "bg-muted"), children: _jsxs("tr", { className: "border-b text-left text-muted-foreground", children: [_jsx("th", { className: cn("py-1.5 font-medium", card === true && "px-3"), children: metricLabel }), columns.map((col, i) => (_jsx("th", { className: cn("py-1.5 text-right font-medium", card === true && "px-3"), children: columnHeader(col, i) }, columnKey(col, i))))] }) }), _jsx("tbody", { children: metrics.map((metric) => {
                         const best = metric.bestIndex !== undefined ? metric.bestIndex(columns) : -1;

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
-/** Sektion mit Titel + optionalem Action-Slot (Range-Umschalter, Filter) —
- *  ersetzt die wiederholten `<section className={CARD}>…<h2>`-Blöcke in
- *  Custom-Screens. Dünner Wrapper über das Card-Primitive. */
+/** Section with a title and optional action slot (range switcher, filter) —
+ * replaces repeated `<section className={CARD}>…<h2>` blocks in
+ * custom screens. Thin wrapper around the Card primitive. */
 export declare function SectionCard({ title, subtitle, action, footer, children, testId, }: {
     readonly title: string;
     readonly subtitle?: string;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { usePrimitives } from "../../index.js";
-/** Sektion mit Titel + optionalem Action-Slot (Range-Umschalter, Filter) —
- *  ersetzt die wiederholten `<section className={CARD}>…<h2>`-Blöcke in
- *  Custom-Screens. Dünner Wrapper über das Card-Primitive. */
+/** Section with a title and optional action slot (range switcher, filter) —
+ * replaces repeated `<section className={CARD}>…<h2>` blocks in
+ * custom screens. Thin wrapper around the Card primitive. */
 export function SectionCard({ title, subtitle, action, footer, children, testId, }) {
     const { Card } = usePrimitives();
     return (_jsx(Card, { slots: { title, subtitle, headerActions: action, footer }, testId: testId, children: _jsx("div", { className: "flex h-full flex-col gap-4", children: children }) }));

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

@@ -10,8 +10,8 @@ export declare function Sparkline({ points, className, }: {
     readonly points: readonly number[];
     readonly className?: string;
 }): ReactNode;
-/** Icon-tragende Kennzahl-Kachel mit optionalem Delta-Chip, Trend-Zeile
- *  und Sparkline. `icon` ist ein fertiger Knoten (App liefert ihr SVG). */
+/** Icon-bearing metric tile with an optional delta chip, trend line,
+ *  and sparkline. `icon` is a ready-made node (the app supplies its SVG). */
 export declare function StatCard({ icon, label, value, sub, tone, accentColor, delta, trend, spark, testId, children, }: {
     readonly icon?: ReactNode;
     readonly label: string;
@@ -41,8 +41,8 @@ export declare function StatStripCell({ icon, label, value, sub, tone, accentCol
     readonly spark?: readonly number[];
     readonly testId?: string;
 }): ReactNode;
-/** Kompakte Kennzahl-Kachel (ohne Icon) — für dichte KPI-Raster.
- *  StatCard ist die icon-tragende Variante. */
+/** Compact metric tile (without an icon) — for dense KPI grids.
+ *  StatCard is the icon-bearing variant. */
 export declare function MiniStat({ label, value, tone, emphasize, testId, labelTestId, valueTestId, }: {
     readonly label: string;
     readonly value: string;

package/dist/web/widgets/stat.js

@@ -15,8 +15,8 @@ const TONE_VALUE = {
     warn: "text-destructive",
     negative: "text-status-bad",
 };
-// Inline-SVG-Sparkline (kein Chart-Dep für eine 28px-Kurve): Linie +
-// schwacher Flächen-Verlauf, Farbe via currentColor (Caller setzt text-tone).
+// Inline SVG sparkline (no chart dependency for a 28px curve): line +
+// subtle area gradient, colored via currentColor (caller sets text-tone).
 export function Sparkline({ points, className, }) {
     if (points.length < 2)
         return null;
@@ -42,8 +42,8 @@ function StatIconChip({ icon, tone, accentColor, }) {
                 backgroundColor: `color-mix(in srgb, ${accentColor} 12%, transparent)`,
             }, children: icon }));
 }
-/** Icon-tragende Kennzahl-Kachel mit optionalem Delta-Chip, Trend-Zeile
- *  und Sparkline. `icon` ist ein fertiger Knoten (App liefert ihr SVG). */
+/** Icon-bearing metric tile with an optional delta chip, trend line,
+ *  and sparkline. `icon` is a ready-made node (the app supplies its SVG). */
 export function StatCard({ icon, label, value, sub, tone = "default", accentColor, delta, trend, spark, testId, children, }) {
     const { Card } = usePrimitives();
     // StatCard is a reusable small-tile widget (a metrics dashboard grid, not
@@ -57,8 +57,8 @@ export function StatCard({ icon, label, value, sub, tone = "default", accentColo
 export function StatStripCell({ icon, label, value, sub, tone = "default", accentColor, delta, spark, testId, }) {
     return (_jsxs("div", { "data-testid": testId, className: "flex min-w-0 flex-col gap-1 px-4 py-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-2 gap-y-1", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2 text-xs font-medium text-muted-foreground", children: [icon !== undefined && _jsx(StatIconChip, { icon: icon, tone: tone, accentColor: accentColor }), _jsx("span", { children: label })] }), delta !== undefined && (_jsxs("span", { className: cn("inline-flex shrink-0 items-center gap-0.5 whitespace-nowrap rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums", TONE_CHIP[delta.tone ?? tone]), children: [delta.direction === "up" ? "↑" : "↓", delta.value] }))] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: cn("text-xl font-semibold tabular-nums", TONE_VALUE[tone]), children: value }), spark !== undefined && (_jsx(Sparkline, { points: spark, className: cn("h-7 w-20 shrink-0", TONE_VALUE[tone]) }))] }), sub !== undefined && _jsx("div", { className: "text-xs text-muted-foreground", children: sub })] }));
 }
-/** Kompakte Kennzahl-Kachel (ohne Icon) — für dichte KPI-Raster.
- *  StatCard ist die icon-tragende Variante. */
+/** Compact metric tile (without an icon) — for dense KPI grids.
+ *  StatCard is the icon-bearing variant. */
 export function MiniStat({ label, value, tone = "default", emphasize = false, testId, labelTestId, valueTestId, }) {
     const { Card } = usePrimitives();
     return (_jsxs(Card, { options: { padded: false }, className: cn("p-3", emphasize && "ring-1 ring-primary/30"), testId: testId, children: [_jsx("div", { className: "text-xs text-muted-foreground", "data-testid": labelTestId, children: label }), _jsx("div", { className: cn("mt-0.5 font-semibold tabular-nums", TONE_VALUE[tone], emphasize ? "text-lg" : "text-sm"), "data-testid": valueTestId, children: value })] }));

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import type { DispatcherError } from "../../headless/index.ts";
-/** Leerer-Zustand mit optionalem Icon + CTA — die dashed-Box-Optik der
- *  entityList-Empty-States, als Standalone-Widget für Custom-Screens. */
+/** Empty state with an optional icon and CTA, using the dashed-box style of
+ *  entityList empty states as a standalone widget for custom screens. */
 export declare function EmptyState({ icon, title, description, action, testId, }: {
     readonly icon?: ReactNode;
     readonly title: string;
@@ -9,13 +9,13 @@ export declare function EmptyState({ icon, title, description, action, testId, }
     readonly action?: ReactNode;
     readonly testId?: string;
 }): ReactNode;
-/** Lade-Zustand: Skeleton-Zeilen in Card-Optik. `rows` steuert die Höhe. */
+/** Loading state with skeleton rows styled like cards; `rows` controls the height. */
 export declare function LoadingState({ rows, className, testId, }: {
     readonly rows?: number;
     readonly className?: string;
     readonly testId?: string;
 }): ReactNode;
-/** Fehler-Zustand auf Basis des Banner-Primitives, mit Retry-Button. */
+/** Error state based on the Banner primitive, with a retry button. */
 export declare function ErrorState({ error, onRetry, testId, }: {
     readonly error: DispatcherError;
     readonly onRetry?: () => void;

package/dist/web/widgets/states.js

@@ -2,17 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { dispatcherErrorText, usePrimitives, useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";
 import { Skeleton } from "../ui/skeleton.js";
-/** Leerer-Zustand mit optionalem Icon + CTA — die dashed-Box-Optik der
- *  entityList-Empty-States, als Standalone-Widget für Custom-Screens. */
+/** Empty state with an optional icon and CTA, using the dashed-box style of
+ *  entityList empty states as a standalone widget for custom screens. */
 export function EmptyState({ icon, title, description, action, testId, }) {
     return (_jsxs("div", { "data-testid": testId, className: "flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed px-6 py-10 text-center", children: [icon !== undefined && _jsx("div", { className: "text-muted-foreground", children: icon }), _jsx("div", { className: "text-sm font-medium", children: title }), description !== undefined && (_jsx("div", { className: "text-sm text-muted-foreground", children: description })), action !== undefined && _jsx("div", { className: "mt-2", children: action })] }));
 }
-/** Lade-Zustand: Skeleton-Zeilen in Card-Optik. `rows` steuert die Höhe. */
+/** Loading state with skeleton rows styled like cards; `rows` controls the height. */
 export function LoadingState({ rows = 3, className, testId, }) {
     const t = useTranslation();
     return (_jsx("output", { "data-testid": testId, "aria-label": t("kumiko.widget.loading"), className: cn("flex w-full flex-col gap-2", className), children: Array.from({ length: rows }, (_, i) => (_jsx(Skeleton, { className: "h-9 w-full" }, i))) }));
 }
-/** Fehler-Zustand auf Basis des Banner-Primitives, mit Retry-Button. */
+/** Error state based on the Banner primitive, with a retry button. */
 export function ErrorState({ error, onRetry, testId, }) {
     const { Banner, Button } = usePrimitives();
     const t = useTranslation();

package/dist/web/widgets/use-draft.d.ts

@@ -1,10 +1,10 @@
-/** Formular-State für Rechner-Screens: ein Draft-Objekt + `patch` für
- *  Teil-Updates + `field(name)` das die `{ id, name, value, onChange }`-Props
- *  fertig für die Feld-Widgets (NumberField/MoneyField/PercentField) liefert.
- *  Ersetzt das pro Screen wiederholte Draft-Interface + patch-Helper.
- *  `idPrefix` verhindert doppelte DOM-`id`s, wenn mehrere `useDraft`-Formulare
- *  mit gleichnamigen Feldern auf derselben Seite gemountet werden — `name`
- *  bleibt der reine Key fürs Form-Payload. */
+/** Form state for calculator screens: a draft object plus `patch` for
+ *  partial updates, and `field(name)` that provides `{ id, name, value, onChange }`
+ *  props ready for field widgets (NumberField/MoneyField/PercentField).
+ *  Replaces the repeated draft interface and patch helper in each screen.
+ *  `idPrefix` prevents duplicate DOM `id`s when multiple `useDraft` forms with
+ *  same-named fields are mounted on the same page; `name` remains the plain key
+ *  for the form payload. */
 export declare function useDraft<T extends object>(defaults: T, options?: {
     readonly idPrefix?: string;
 }): {

package/dist/web/widgets/use-draft.js

@@ -1,11 +1,11 @@
 import { useCallback, useState } from "react";
-/** Formular-State für Rechner-Screens: ein Draft-Objekt + `patch` für
- *  Teil-Updates + `field(name)` das die `{ id, name, value, onChange }`-Props
- *  fertig für die Feld-Widgets (NumberField/MoneyField/PercentField) liefert.
- *  Ersetzt das pro Screen wiederholte Draft-Interface + patch-Helper.
- *  `idPrefix` verhindert doppelte DOM-`id`s, wenn mehrere `useDraft`-Formulare
- *  mit gleichnamigen Feldern auf derselben Seite gemountet werden — `name`
- *  bleibt der reine Key fürs Form-Payload. */
+/** Form state for calculator screens: a draft object plus `patch` for
+ *  partial updates, and `field(name)` that provides `{ id, name, value, onChange }`
+ *  props ready for field widgets (NumberField/MoneyField/PercentField).
+ *  Replaces the repeated draft interface and patch helper in each screen.
+ *  `idPrefix` prevents duplicate DOM `id`s when multiple `useDraft` forms with
+ *  same-named fields are mounted on the same page; `name` remains the plain key
+ *  for the form payload. */
 export function useDraft(defaults, options) {
     const idPrefix = options?.idPrefix;
     const [draft, setDraft] = useState(defaults);