@cosmicdrift/kumiko-renderer 0.374.0 → 0.378.0

package/dist/web/widgets/public-shell.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+type PublicShellCommonProps = {
+    readonly brand: ReactNode;
+    readonly headerActions?: ReactNode;
+    readonly footer?: ReactNode;
+    readonly children: ReactNode;
+    readonly testId?: string;
+};
+export type PublicShellVariant = "marketing" | "focus" | "card";
+export type PublicShellProps = PublicShellCommonProps & ({
+    readonly variant: "marketing";
+    readonly notice?: ReactNode;
+} | {
+    readonly variant: "focus";
+    readonly progress?: ReactNode;
+} | {
+    readonly variant: "card";
+});
+/** One header and footer for anonymous pages; `focus` narrows to a task column,
+ *  `card` centers a single card (sign-in). */
+export declare function PublicShell(props: PublicShellProps): ReactNode;
+export {};

package/dist/web/widgets/public-shell.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CONTENT_WIDTH_CLASS = "mx-auto w-full max-w-6xl px-4 sm:px-6";
+const MAIN_CLASS = {
+    marketing: "w-full flex-1",
+    focus: "mx-auto w-full max-w-3xl flex-1 px-4 py-6 sm:px-6",
+    card: "flex w-full flex-1 items-center justify-center bg-muted px-4 py-10",
+};
+/** One header and footer for anonymous pages; `focus` narrows to a task column,
+ *  `card` centers a single card (sign-in). */
+export function PublicShell(props) {
+    const { variant, brand, headerActions, footer, children, testId = "public-shell" } = props;
+    const notice = props.variant === "marketing" ? props.notice : undefined;
+    const progress = props.variant === "focus" ? props.progress : undefined;
+    return (_jsxs("div", { "data-testid": testId, "data-variant": variant, className: "flex min-h-dvh flex-col bg-background text-foreground", children: [notice !== undefined && (_jsx("div", { "data-testid": `${testId}-notice`, className: "bg-promo px-4 py-2 text-center text-promo-foreground text-sm", children: notice })), _jsxs("header", { className: "border-border border-b", children: [_jsxs("div", { className: `${CONTENT_WIDTH_CLASS} flex min-h-16 items-center justify-between gap-4`, children: [_jsx("div", { className: "min-w-0", children: brand }), headerActions !== undefined && (_jsx("div", { className: "flex shrink-0 items-center gap-2", children: headerActions }))] }), progress !== undefined && (_jsx("div", { "data-testid": `${testId}-progress`, className: "mx-auto w-full max-w-3xl px-4 pb-3 sm:px-6", children: progress }))] }), _jsx("main", { className: MAIN_CLASS[variant], children: variant === "card" ? (_jsx("div", { "data-testid": `${testId}-card`, className: "w-full max-w-md rounded-(--card-radius) border border-border bg-card p-6 text-card-foreground shadow-sm sm:p-8", children: children })) : (children) }), footer !== undefined && (_jsx("footer", { className: "border-border border-t", children: _jsx("div", { className: `${CONTENT_WIDTH_CLASS} py-6 text-muted-foreground text-sm`, children: footer }) }))] }));
+}

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

@@ -0,0 +1,29 @@
+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). */
+    readonly label: string;
+    /** Field-Type für die Zell-Formatierung. 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). */
+    readonly live?: boolean;
+    readonly columns: readonly QueryTableColumn[];
+    /** Rows aus dem Query-Result ziehen. Default: Result selbst als Array. */
+    readonly rows?: (data: TData) => readonly Readonly<Record<string, unknown>>[];
+    /** Row-Id für Keys/Row-Click. Default: `row.id`, sonst der 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. */
+    readonly emptyState?: ReactNode;
+    readonly toolbarTitle?: ReactNode;
+    readonly toolbarEnd?: ReactNode;
+    readonly testId?: string;
+};
+export declare function QueryTable<TData = unknown>({ query, payload, live, columns, rows, rowId, onRowClick, rowActions, emptyState, toolbarTitle, toolbarEnd, testId, }: QueryTableProps<TData>): ReactNode;

package/dist/web/widgets/query-table.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePrimitives, useQuery, useTranslation } from "../../index.js";
+import { EmptyState, ErrorState, LoadingState } from "./states.js";
+function defaultRows(data) {
+    return Array.isArray(data) ? data : [];
+}
+export function QueryTable({ query, payload, live = false, columns, rows, rowId, onRowClick, rowActions, emptyState, toolbarTitle, toolbarEnd, testId, }) {
+    const { DataTable } = usePrimitives();
+    const t = useTranslation();
+    const { data, error, loading, refetch } = useQuery(query, payload ?? {}, { live });
+    if (loading && data === null)
+        return _jsx(LoadingState, { rows: 4, testId: testId });
+    if (error !== null)
+        return _jsx(ErrorState, { error: error, onRetry: () => void refetch(), testId: testId });
+    const rawRows = rows !== undefined ? rows(data) : defaultRows(data);
+    const vmRows = rawRows.map((row, index) => ({
+        id: rowId !== undefined
+            ? rowId(row, index)
+            : typeof row["id"] === "string"
+                ? row["id"]
+                : String(index),
+        values: row,
+    }));
+    return (_jsx(DataTable, { columns: columns.map((c) => ({
+            field: c.field,
+            label: c.label,
+            type: c.type ?? "text",
+            sortable: false,
+        })), rows: vmRows, onRowClick: onRowClick, rowActions: rowActions, emptyState: emptyState ?? _jsx(EmptyState, { title: t("kumiko.list.no-entries") }), toolbarTitle: toolbarTitle, toolbarEnd: toolbarEnd, testId: testId }));
+}

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

@@ -0,0 +1,69 @@
+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. */
+export declare function ResultPanel({ title, subtitle, empty, emptyText, rows, footer, children, testId, }: {
+    readonly title: string;
+    readonly subtitle?: string;
+    readonly empty?: boolean;
+    readonly emptyText?: ReactNode;
+    readonly rows?: readonly {
+        readonly label: string;
+        readonly value: ReactNode;
+        readonly emphasize?: boolean;
+    }[];
+    /** Action-Slot am Karten-Fuß (z.B. „In Finanzierung übernehmen"). */
+    readonly footer?: ReactNode;
+    readonly children?: ReactNode;
+    readonly testId?: string;
+}): ReactNode;
+export interface ResultColumn<Row> {
+    readonly header: string;
+    readonly align?: "left" | "right";
+    readonly cell: (row: Row) => ReactNode;
+}
+export interface ResultTableFooterRow {
+    readonly label: string;
+    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. */
+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). */
+    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
+     *  column-alignment to the last (typically "Amount") column instead of
+     *  approximating it with an independent layout. */
+    readonly footer?: readonly ResultTableFooterRow[];
+}): ReactNode;
+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. */
+    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. */
+export declare function ComparisonTable<Col>({ columns, columnHeader, columnKey, metrics, metricLabel, testId, className, card, }: {
+    readonly columns: readonly Col[];
+    readonly columnHeader: (col: Col, index: number) => string;
+    readonly columnKey: (col: Col, index: number) => string;
+    readonly metrics: readonly ComparisonMetric<Col>[];
+    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. */
+    readonly card?: boolean;
+}): ReactNode;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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. */
+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. */
+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. */
+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;
+                        return (_jsxs("tr", { className: "border-b last:border-0", children: [_jsx("td", { className: cn("py-1.5 text-muted-foreground", card === true && "px-3"), children: metric.label }), columns.map((col, i) => (_jsx("td", { className: cn("py-1.5 text-right tabular-nums", card === true && "px-3"), children: i === best ? (_jsx("span", { className: "inline-block rounded bg-primary/10 px-2 py-0.5 font-semibold text-primary", children: metric.value(col, i) })) : (metric.value(col, i)) }, columnKey(col, i))))] }, metric.label));
+                    }) })] }) }));
+    return card === true ? (_jsx("div", { className: "overflow-hidden rounded-lg border bg-card", children: table })) : (table);
+}

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

@@ -0,0 +1,12 @@
+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. */
+export declare function SectionCard({ title, subtitle, action, footer, children, testId, }: {
+    readonly title: string;
+    readonly subtitle?: string;
+    readonly action?: ReactNode;
+    readonly footer?: ReactNode;
+    readonly children: ReactNode;
+    readonly testId?: string;
+}): ReactNode;

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

@@ -0,0 +1,9 @@
+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. */
+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/sheet-parts.d.ts

@@ -0,0 +1,9 @@
+import { Dialog as SheetPrimitive } from "radix-ui";
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+export type DrawerSheetContentProps = ComponentProps<typeof SheetPrimitive.Content> & {
+    readonly side?: "top" | "right" | "bottom" | "left";
+    readonly showCloseButton?: boolean;
+    readonly overlayStyle?: CSSProperties;
+    readonly closeLabel: string;
+};
+export declare function DrawerSheetContent({ className, overlayStyle, children, side, showCloseButton, closeLabel, ...props }: DrawerSheetContentProps): ReactNode;

package/dist/web/widgets/sheet-parts.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+export function DrawerSheetContent({ className, overlayStyle, children, side = "right", showCloseButton = true, closeLabel, ...props }) {
+    return (_jsxs(SheetPrimitive.Portal, { "data-slot": "sheet-portal", children: [_jsx(SheetPrimitive.Overlay, { "data-slot": "sheet-overlay", style: overlayStyle, className: "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" }), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", className: cn("fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500", side === "right" &&
+                    "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", side === "left" &&
+                    "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", side === "top" &&
+                    "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", side === "bottom" &&
+                    "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
+}

package/dist/web/widgets/side-by-side-table.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+export type SideBySideTableColumn = {
+    readonly id: string;
+    readonly label: string;
+};
+export type SideBySideTableCell = {
+    readonly content: ReactNode;
+    /** Spans this cell over following columns (a value that is identical on
+     *  both sides shown once). */
+    readonly colSpan?: number;
+};
+export type SideBySideTableRow = {
+    readonly id: string;
+    readonly header: ReactNode;
+    readonly cells: readonly SideBySideTableCell[];
+    /** Highlights a row that needs attention (e.g. differing values). */
+    readonly tone?: "warn";
+};
+/** Small read-only grid with real table semantics (`th scope`) whose cells
+ *  are arbitrary React nodes — for side-by-side comparisons like "from the
+ *  document" vs. "in stock". Not a `DataTable`: no sorting, paging, or
+ *  view-model columns. */
+export declare function SideBySideTable({ caption, rowHeaderLabel, columns, rows, rowHeaderWidth, testId, }: {
+    /** Accessible name of the table, not rendered visibly. */
+    readonly caption: string;
+    readonly rowHeaderLabel: string;
+    readonly columns: readonly SideBySideTableColumn[];
+    readonly rows: readonly SideBySideTableRow[];
+    readonly rowHeaderWidth?: number;
+    readonly testId?: string;
+}): ReactNode;

package/dist/web/widgets/side-by-side-table.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/** Small read-only grid with real table semantics (`th scope`) whose cells
+ *  are arbitrary React nodes — for side-by-side comparisons like "from the
+ *  document" vs. "in stock". Not a `DataTable`: no sorting, paging, or
+ *  view-model columns. */
+export function SideBySideTable({ caption, rowHeaderLabel, columns, rows, rowHeaderWidth = 120, testId, }) {
+    return (_jsxs("table", { "data-testid": testId, className: "w-full table-fixed border-collapse border border-border text-sm", children: [_jsx("caption", { className: "sr-only", children: caption }), _jsx("thead", { children: _jsxs("tr", { className: "bg-muted text-[13px] text-muted-foreground", children: [_jsx("th", { scope: "col", style: { width: rowHeaderWidth }, className: "border-b border-border px-3 py-2 text-left font-medium", children: rowHeaderLabel }), columns.map((column) => (_jsx("th", { scope: "col", className: "border-b border-border px-3 py-2 text-left font-medium", children: column.label }, column.id)))] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: cn(row.tone === "warn" && "bg-status-warn-surface"), children: [_jsx("th", { scope: "row", className: cn("border-b border-border-row px-3 py-2 text-left align-top", row.tone === "warn"
+                                ? "font-semibold text-status-warn"
+                                : "font-normal text-muted-foreground"), children: row.header }), row.cells.map((cell, index) => (_jsx("td", { colSpan: cell.colSpan, className: "border-b border-border-row px-3 py-2 align-top", children: cell.content }, index)))] }, row.id))) })] }));
+}

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

@@ -0,0 +1,54 @@
+import type { DashboardStatTone } from "@cosmicdrift/kumiko-types/screen";
+import type { ReactNode } from "react";
+export type StatTone = DashboardStatTone;
+export type StatDelta = {
+    readonly value: string;
+    readonly direction: "up" | "down";
+    readonly tone?: StatTone;
+};
+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). */
+export declare function StatCard({ icon, label, value, sub, tone, accentColor, delta, trend, spark, testId, children, }: {
+    readonly icon?: ReactNode;
+    readonly label: string;
+    readonly value: string;
+    readonly sub?: string;
+    readonly tone?: StatTone;
+    readonly accentColor?: string;
+    readonly delta?: StatDelta;
+    readonly trend?: string;
+    readonly spark?: readonly number[];
+    readonly testId?: string;
+    /** Extra content below the built-in fields (e.g. a usage meter) — kept
+     *  inside the same card chrome instead of stacking a second bordered box. */
+    readonly children?: ReactNode;
+}): ReactNode;
+/** Flat KPI cell for a strip (divider instead of card): label, value with
+ *  sparkline beside it, sub line. */
+export declare function StatStripCell({ icon, label, value, sub, tone, accentColor, delta, spark, testId, }: {
+    /** Chip before the label, colored like StatCard's (`accentColor` or the tone). */
+    readonly icon?: ReactNode;
+    readonly label: string;
+    readonly value: string;
+    readonly sub?: string;
+    readonly tone?: StatTone;
+    readonly accentColor?: string;
+    readonly delta?: StatDelta;
+    readonly spark?: readonly number[];
+    readonly testId?: string;
+}): ReactNode;
+/** Kompakte Kennzahl-Kachel (ohne Icon) — für dichte KPI-Raster.
+ *  StatCard ist die icon-tragende Variante. */
+export declare function MiniStat({ label, value, tone, emphasize, testId, labelTestId, valueTestId, }: {
+    readonly label: string;
+    readonly value: string;
+    readonly tone?: StatTone;
+    readonly emphasize?: boolean;
+    readonly testId?: string;
+    readonly labelTestId?: string;
+    readonly valueTestId?: string;
+}): ReactNode;

package/dist/web/widgets/stat.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePrimitives } from "../../index.js";
+import { cn } from "../lib/cn.js";
+const TONE_CHIP = {
+    default: "bg-muted text-foreground",
+    positive: "bg-primary/10 text-primary",
+    ok: "bg-status-ok-surface text-status-ok",
+    warn: "bg-destructive/10 text-destructive",
+    negative: "bg-status-bad-surface text-status-bad",
+};
+const TONE_VALUE = {
+    default: "text-foreground",
+    positive: "text-primary",
+    ok: "text-status-ok",
+    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).
+export function Sparkline({ points, className, }) {
+    if (points.length < 2)
+        return null;
+    const w = 100;
+    const h = 28;
+    const min = Math.min(...points);
+    const max = Math.max(...points);
+    const span = max - min || 1;
+    const line = points
+        .map((p, i) => {
+        const x = (i / (points.length - 1)) * w;
+        const y = h - ((p - min) / span) * h;
+        return `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+        .join(" ");
+    return (_jsxs("svg", { viewBox: `0 0 ${w} ${h}`, preserveAspectRatio: "none", className: className ?? "h-7 w-full", "aria-hidden": "true", children: [_jsx("path", { d: `${line} L${w},${h} L0,${h} Z`, fill: "currentColor", fillOpacity: 0.12 }), _jsx("path", { d: line, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })] }));
+}
+function StatIconChip({ icon, tone, accentColor, }) {
+    return (_jsx("span", { className: cn("flex size-7 shrink-0 items-center justify-center rounded-lg", accentColor === undefined && TONE_CHIP[tone]), style: accentColor === undefined
+            ? undefined
+            : {
+                color: 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). */
+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
+    // a whole-section frame) — an extension section mounting several of
+    // these renders a grid of tiles inside its own host Card, not a
+    // duplicate outer frame around the section's full content.
+    return (_jsxs(Card, { options: { padded: false }, className: "p-4", testId: testId, children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-2 gap-y-1", children: [_jsxs("div", { className: "flex min-w-0 flex-1 basis-[7rem] items-center gap-2 text-muted-foreground", children: [icon !== undefined && _jsx(StatIconChip, { icon: icon, tone: tone, accentColor: accentColor }), _jsx("span", { title: label, className: "min-w-0 line-clamp-2 text-xs font-medium", 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] }))] }), _jsx("div", { className: "mt-2 text-xl font-semibold tabular-nums text-foreground", children: value }), sub !== undefined && _jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: sub }), trend !== undefined && (_jsx("div", { className: "mt-0.5 text-xs font-medium text-foreground/80", children: trend })), spark !== undefined && (_jsx(Sparkline, { points: spark, className: cn("mt-2 h-7 w-full", TONE_VALUE[tone]) })), children !== undefined && _jsx("div", { className: "mt-3", children: children })] }));
+}
+/** Flat KPI cell for a strip (divider instead of card): label, value with
+ *  sparkline beside it, sub line. */
+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. */
+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

@@ -0,0 +1,23 @@
+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. */
+export declare function EmptyState({ icon, title, description, action, testId, }: {
+    readonly icon?: ReactNode;
+    readonly title: string;
+    readonly description?: string;
+    readonly action?: ReactNode;
+    readonly testId?: string;
+}): ReactNode;
+/** Lade-Zustand: Skeleton-Zeilen in Card-Optik. `rows` steuert die Höhe. */
+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. */
+export declare function ErrorState({ error, onRetry, testId, }: {
+    readonly error: DispatcherError;
+    readonly onRetry?: () => void;
+    readonly testId?: string;
+}): ReactNode;

package/dist/web/widgets/states.js

@@ -0,0 +1,20 @@
+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. */
+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. */
+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. */
+export function ErrorState({ error, onRetry, testId, }) {
+    const { Banner, Button } = usePrimitives();
+    const t = useTranslation();
+    return (_jsxs(Banner, { variant: "error", testId: testId, actions: onRetry !== undefined ? (_jsx(Button, { variant: "secondary", onClick: onRetry, children: t("kumiko.actions.reload") })) : undefined, children: [t("kumiko.widget.error.title"), " ", dispatcherErrorText(error, t)] }));
+}

package/dist/web/widgets/status-badge.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export type StatusTone = "ok" | "warn" | "bad" | "critical" | "muted";
+export declare const STATUS_TONE_TEXT: Record<StatusTone, string>;
+/** `accent` is a brand-colored call-out (e.g. "3 suggestions"), not a status —
+ *  hence not part of `StatusTone`, which toasts and select options share. */
+export type StatusBadgeTone = StatusTone | "accent";
+/** Pill badge with a status dot. Caller maps domain values to a tone
+ *  (e.g. operational→ok, investigating→warn) and passes the translated
+ *  label as children. */
+export declare function StatusBadge({ tone, children, className, testId, }: {
+    readonly tone: StatusBadgeTone;
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly testId?: string;
+}): ReactNode;

package/dist/web/widgets/status-badge.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+export const STATUS_TONE_TEXT = {
+    ok: "text-status-ok",
+    warn: "text-status-warn",
+    bad: "text-status-bad",
+    critical: "text-status-critical",
+    muted: "text-muted-foreground",
+};
+// `muted` maps to the neutral tokens, not a status-* palette.
+const TONE_PILL = {
+    accent: "bg-primary/10 text-primary",
+    ok: "bg-status-ok-surface text-status-ok",
+    warn: "bg-status-warn-surface text-status-warn",
+    bad: "bg-status-bad-surface text-status-bad",
+    critical: "bg-status-critical-surface text-status-critical",
+    muted: "bg-status-neutral-surface text-status-neutral",
+};
+/** Pill badge with a status dot. Caller maps domain values to a tone
+ *  (e.g. operational→ok, investigating→warn) and passes the translated
+ *  label as children. */
+export function StatusBadge({ tone, children, className, testId, }) {
+    return (_jsxs("span", { "data-testid": testId, className: cn("inline-flex h-[22px] items-center gap-1.5 whitespace-nowrap rounded-full px-2 text-xs font-medium", TONE_PILL[tone], className), children: [_jsx("span", { "aria-hidden": "true", "data-status-dot": true, className: "size-1.5 rounded-full bg-current" }), children] }));
+}

package/dist/web/widgets/step-bar.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+/** Wizard step overview — numbered chips with a connector line between
+ *  them. With `onStepSelect`, done chips render as buttons for jumping back
+ *  (every non-current chip with `selectableSteps="all"`); the current chip
+ *  never does. `doneSteps` overrides the position-based done state. With
+ *  `onStepSelect` and `selectableSteps="all"` the narrow-viewport label becomes
+ *  a dropdown listing every step (same rows as the rail), so phones can jump
+ *  too. Three visual states, none conveyed by color alone:
+ *  done (checkmark replaces the number, `aria-current` absent, a sr-only
+ *  label says so since the number itself is gone), current (`aria-current
+ *  ="step"`, own background), upcoming (dimmed, number visible). Below
+ *  `sm` the chip row hides in favor of `compactLabel` (seven step names
+ *  don't fit on a phone) — both live in the DOM, Tailwind's
+ *  `hidden`/`sm:hidden` pair picks the visible one per viewport (same
+ *  pattern as embedded-list-input.tsx's desktop/mobile split). */
+export declare function StepBar({ steps, currentIndex, compactLabel, onStepSelect, doneSteps, selectableSteps, narrowLayout, orientation, heading, description, subtitles, upNext, testId, compactTestId, }: {
+    readonly steps: readonly string[];
+    readonly currentIndex: number;
+    readonly compactLabel: string;
+    readonly onStepSelect?: (index: number) => void;
+    readonly doneSteps?: readonly boolean[];
+    readonly selectableSteps?: "done" | "all";
+    readonly narrowLayout?: "label" | "steps";
+    readonly orientation?: "horizontal" | "vertical";
+    readonly heading?: string;
+    readonly description?: string;
+    readonly subtitles?: readonly (string | undefined)[];
+    readonly upNext?: {
+        readonly heading: string;
+        readonly title: string;
+        readonly subtitle?: string;
+    };
+    readonly testId?: string;
+    readonly compactTestId?: string;
+}): ReactNode;