@cosmicdrift/kumiko-renderer 0.399.0 → 0.400.0

package/dist/web/primitives/embedded-list-input.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // EmbeddedListInput — row/totals table for a createEmbeddedListField
 // (invoice-positions-style) field. Controlled: rows, derived values, and
 // issue groups are computed by the caller; this component only renders
@@ -19,21 +19,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // MoneyInput text, IME composition) and focus are lost — accepted trade-off
 // for the single-mount-per-side fix above. Upgrade: lift per-cell draft
 // state into a `draftsByCellId` map here that survives the layout swap.
-import { ArrowDown, ArrowUp, Copy, Plus, Trash2 } from "lucide-react";
+import { Plus } from "lucide-react";
 import { Fragment, useEffect, useRef, useState, } from "react";
-import { fieldIssueText } from "../../field-issue-text.js";
-import { applyFormatSpec } from "../../headless/index.js";
 import { useLocale, useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";
 import { Button as UiButton } from "../ui/button.js";
-import { Checkbox } from "../ui/checkbox.js";
-import { Input as UiInput } from "../ui/input.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
-import { ComboboxInput } from "./combobox.js";
-import { DateInput } from "./date-input.js";
-import { formatMoney, MoneyInput } from "./money-input.js";
-import { SegmentedControl } from "./segmented-select.js";
-import { TimestampInput } from "./timestamp-input.js";
+import { EmbeddedListCards } from "./embedded-list-cards.js";
+import { columnAlignClass, IssueMessages, isDerivedCell, RowActions, renderCellControl, } from "./embedded-list-cell.js";
+import { formatMoney } from "./money-input.js";
 import { useIsNarrowViewport } from "./use-narrow-viewport.js";
 // `input[type=hidden]` excluded — ComboboxInput renders one as a plain
 // name-carrier before its focusable trigger button.
@@ -59,6 +53,9 @@ function fixedColumnRem(type) {
             return 4;
         case "select":
             return 12;
+        case "images":
+        case "files":
+            return 14;
         case "text":
         case "reference":
             return undefined;
@@ -80,26 +77,6 @@ function tableMinWidthRem(columns, hasActions) {
     const columnsRem = columns.reduce((sum, column) => sum + (fixedColumnRem(column.type) ?? FLEXIBLE_COLUMN_MIN_REM), 0);
     return columnsRem + (hasActions ? ACTIONS_COLUMN_REM : 0);
 }
-function columnAlignClass(type) {
-    switch (type) {
-        case "money":
-        case "number":
-        case "decimal":
-            return "text-right";
-        case "boolean":
-            return "text-center";
-        case "date":
-        case "timestamp":
-        case "text":
-        case "select":
-        case "reference":
-            return "text-left";
-        default: {
-            const exhaustiveCheck = type;
-            return exhaustiveCheck;
-        }
-    }
-}
 // Exported (unlike columnWidthClass/columnAlignClass above) because
 // happy-dom performs no layout — scrollWidth/clientWidth/getBoundingClientRect
 // always read 0 in tests, so the only way to cover this decision at all is
@@ -128,88 +105,7 @@ function parsePasteGrid(text) {
         return withoutCr.split("\t");
     });
 }
-function IssueMessages({ issues, testId, constrainWidth, }) {
-    const t = useTranslation();
-    if (issues === undefined || issues.length === 0)
-        return null;
-    return (_jsx("div", { role: "alert", "data-testid": testId, className: cn("text-xs text-destructive", constrainWidth === true && "max-w-[16rem] whitespace-normal break-words"), children: issues.map((issue) => (_jsx("div", { children: fieldIssueText(t, issue) }, `${issue.path}:${issue.code}`))) }));
-}
-function readOnlyCellText(column, value, currency, locale) {
-    if (value === null || value === undefined || value === "")
-        return "";
-    switch (column.type) {
-        case "boolean":
-            return value === true ? "✓" : "";
-        case "date":
-        case "timestamp":
-            return applyFormatSpec({ format: column.type, locale }, value);
-        case "number":
-        case "decimal":
-            return typeof value === "number"
-                ? applyFormatSpec({ format: column.type, locale }, value)
-                : String(value);
-        case "money":
-            return typeof value === "number" ? formatMoney(value, currency, locale) : String(value);
-        case "select":
-            return typeof value === "string" ? (column.optionLabels?.[value] ?? value) : String(value);
-        case "reference":
-            return typeof value === "string"
-                ? (column.referenceOptions?.find((o) => o.value === value)?.label ?? value)
-                : String(value);
-        case "text":
-            return String(value);
-        default: {
-            const exhaustiveCheck = column.type;
-            return exhaustiveCheck;
-        }
-    }
-}
-function renderCellControl({ cellId, column, label, value, disabled, onChange, currency, locale, }) {
-    if (column.readOnly === true && !column.derived) {
-        return (_jsx("div", { "data-cell-id": cellId, "data-readonly-cell": "", className: cn("min-w-0 whitespace-normal break-words py-1.5 text-sm", columnAlignClass(column.type)), children: readOnlyCellText(column, value, currency, locale) }));
-    }
-    const isDisabled = disabled || column.derived;
-    switch (column.type) {
-        case "text":
-            return (_jsx(UiInput, { "data-cell-id": cellId, type: "text", "aria-label": label, className: "min-w-0", disabled: isDisabled, value: typeof value === "string" ? value : "", onChange: (e) => onChange(e.target.value) }));
-        case "number":
-        case "decimal":
-            return (_jsx(UiInput, { "data-cell-id": cellId, type: "number", "aria-label": label, disabled: isDisabled, className: "min-w-0 text-right tabular-nums", value: typeof value === "number" ? value : "", onChange: (e) => {
-                    const raw = e.target.value;
-                    onChange(raw === "" ? undefined : Number(raw));
-                } }));
-        case "boolean":
-            return (_jsx("div", { className: "flex justify-center", children: _jsx(Checkbox, { "data-cell-id": cellId, "aria-label": label, disabled: isDisabled, checked: value === true, onCheckedChange: (checked) => onChange(checked === true) }) }));
-        case "date":
-            return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(DateInput, { id: cellId, name: cellId, ariaLabel: label, value: typeof value === "string" ? value : "", onChange: (v) => onChange(v), disabled: isDisabled }) }));
-        case "timestamp":
-            return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(TimestampInput, { id: cellId, name: cellId, ariaLabel: label, value: typeof value === "string" ? value : "", onChange: (v) => onChange(v), disabled: isDisabled }) }));
-        case "money":
-            return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(MoneyInput, { id: cellId, name: cellId, ariaLabel: label, value: typeof value === "number" ? value : "", onChange: (v) => onChange(v), currency: currency, disabled: isDisabled }) }));
-        case "select": {
-            const options = (column.options ?? []).map((opt) => ({
-                value: opt,
-                label: column.optionLabels?.[opt] ?? opt,
-            }));
-            if (column.display === "radio" && options.length > 0) {
-                return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(SegmentedControl, { id: cellId, name: cellId, labelProps: { "aria-label": label }, value: typeof value === "string" ? value : "", onChange: (v) => onChange(v), options: options, disabled: isDisabled }) }));
-            }
-            return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(ComboboxInput, { id: cellId, name: cellId, ariaLabel: label, value: typeof value === "string" ? value : "", onChange: (v) => onChange(v), options: options, disabled: isDisabled }) }));
-        }
-        case "reference":
-            return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(ComboboxInput, { id: cellId, name: cellId, ariaLabel: label, value: typeof value === "string" ? value : "", onChange: (v) => onChange(v), options: column.referenceOptions ?? [], disabled: isDisabled, loading: column.referenceLoading }) }));
-        default: {
-            const exhaustiveCheck = column.type;
-            return exhaustiveCheck;
-        }
-    }
-}
-function RowActions({ rowIndex, rowsLength, minItems, maxItems, onDuplicateRow, onMoveRow, onRemoveRow, duplicateLabel, moveUpLabel, moveDownLabel, removeLabel, testIdPrefix, buttonSizeClass = "size-7", }) {
-    const duplicateDisabled = maxItems !== undefined && rowsLength >= maxItems;
-    const removeDisabled = rowsLength <= (minItems ?? 0);
-    return (_jsxs("div", { className: "inline-flex items-center", children: [_jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: buttonSizeClass, "aria-label": duplicateLabel, disabled: duplicateDisabled, onClick: () => onDuplicateRow(rowIndex), "data-testid": testIdPrefix !== undefined ? `${testIdPrefix}-duplicate` : undefined, children: _jsx(Copy, { className: "size-4", "aria-hidden": "true" }) }), _jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: buttonSizeClass, "aria-label": moveUpLabel, disabled: rowIndex === 0, onClick: () => onMoveRow(rowIndex, rowIndex - 1), "data-testid": testIdPrefix !== undefined ? `${testIdPrefix}-move-up` : undefined, children: _jsx(ArrowUp, { className: "size-4", "aria-hidden": "true" }) }), _jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: buttonSizeClass, "aria-label": moveDownLabel, disabled: rowIndex === rowsLength - 1, onClick: () => onMoveRow(rowIndex, rowIndex + 1), "data-testid": testIdPrefix !== undefined ? `${testIdPrefix}-move-down` : undefined, children: _jsx(ArrowDown, { className: "size-4", "aria-hidden": "true" }) }), _jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: buttonSizeClass, "aria-label": removeLabel, disabled: removeDisabled, onClick: () => onRemoveRow(rowIndex), "data-testid": testIdPrefix !== undefined ? `${testIdPrefix}-remove` : undefined, children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] }));
-}
-export function EmbeddedListInput({ id, columns, rows, totals, currency, disabled, fixedRows, minItems, maxItems, listIssues, rowIssues, cellIssues, onCellChange, onAddRow, onRemoveRow, onDuplicateRow, onMoveRow, onPasteCells, addLabel, actionsLabel, removeLabel, duplicateLabel, moveUpLabel, moveDownLabel, emptyLabel, emptyCtaLabel, testId, }) {
+export function EmbeddedListInput({ id, columns, rows, totals, currency, disabled, fixedRows, minItems, maxItems, listIssues, rowIssues, cellIssues, onCellChange, onAddRow, onRemoveRow, onDuplicateRow, onMoveRow, onPasteCells, addLabel, actionsLabel, removeLabel, duplicateLabel, moveUpLabel, moveDownLabel, emptyLabel, emptyCtaLabel, testId, uploadTarget, }) {
     // Callers that don't wire up the field-currency plumbing (or direct
     // callers/tests) keep getting the same "EUR" this
     // component always hardcoded.
@@ -339,6 +235,10 @@ export function EmbeddedListInput({ id, columns, rows, totals, currency, disable
         return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { ref: containerRef, "data-testid": testId !== undefined ? `${testId}-empty` : "embedded-list-empty", className: "flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-10 text-center text-sm text-muted-foreground", children: [_jsx("span", { children: emptyLabel }), showControls && (_jsxs(UiButton, { type: "button", variant: "outline", size: "sm", onClick: onAddRow, "data-testid": testId !== undefined ? `${testId}-empty-add` : "embedded-list-empty-add", children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), emptyCtaLabel] }))] }), _jsx(IssueMessages, { issues: listIssues, testId: testIdFor("list-issues") })] }));
     }
     const hasTotals = totals !== undefined && totals.length > 0;
+    const firstColumn = columns[0];
+    const titleColumn = firstColumn?.type === "text" && firstColumn.readOnly === true && firstColumn.derived !== true
+        ? firstColumn
+        : undefined;
     return (_jsxs("div", { ref: containerRef, "data-testid": testId, className: "min-w-0", children: [!isMobile && (_jsxs("div", { "data-testid": testIdFor("desktop"), className: "hidden min-w-0 md:block", children: [_jsxs("div", { className: "min-w-0 overflow-hidden rounded-lg border bg-card", children: [_jsxs("div", { className: "relative min-w-0", children: [_jsx("div", { ref: setScrollContainerEl, "data-testid": testIdFor("desktop-scroll"), className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: _jsxs(Table, { className: "w-full table-fixed", style: { minWidth: `${tableMinWidthRem(columns, showControls)}rem` }, children: [_jsxs("colgroup", { children: [columns.map((column) => (_jsx("col", { style: columnWidthStyle(column.type) }, column.field))), showControls && _jsx("col", { style: { width: `${ACTIONS_COLUMN_REM}rem` } })] }), _jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [columns.map((column) => (_jsx(TableHead, { title: column.label, className: cn("truncate", columnAlignClass(column.type)), children: column.label }, column.field))), showControls && (_jsx(TableHead, { className: cn("sticky right-0 z-10 whitespace-nowrap bg-muted px-1 text-right", isHorizontallyScrollable &&
                                                                     "shadow-[inset_1px_0_0_var(--color-border)]"), "aria-label": actionsLabel }))] }) }), _jsx(TableBody, { children: rows.map((row, rowIndex) => {
                                                         const isLastRow = rowIndex === rows.length - 1;
@@ -348,36 +248,23 @@ export function EmbeddedListInput({ id, columns, rows, totals, currency, disable
                                                         , { children: [_jsxs(TableRow, { className: "group", "data-testid": testIdFor(`row-${rowIndex}`), children: [columns.map((column, columnIndex) => {
                                                                             const isLastCell = isLastRow && columnIndex === lastEditableIndex;
                                                                             const issues = cellIssues?.[`${rowIndex}.${column.field}`];
-                                                                            return (_jsxs(TableCell, { "data-testid": testIdFor(`cell-${rowIndex}-${column.field}`), onPaste: onPasteCells !== undefined
+                                                                            const hidden = column.isHiddenInRow?.(row) === true;
+                                                                            return (_jsx(TableCell, { "data-testid": testIdFor(`cell-${rowIndex}-${column.field}`), onPaste: onPasteCells !== undefined
                                                                                     ? handlePaste(rowIndex, columnIndex)
-                                                                                    : undefined, onKeyDown: isLastCell ? handleLastCellKeyDown : undefined, children: [renderCellControl({
-                                                                                        cellId: cellId(rowIndex, column.field),
-                                                                                        label: cellLabel(column, rowIndex),
-                                                                                        column,
-                                                                                        value: row[column.field],
-                                                                                        disabled: disabled === true,
-                                                                                        onChange: (value) => onCellChange(rowIndex, column.field, value),
-                                                                                        currency: effectiveCurrency,
-                                                                                        locale: resolvedLocale,
-                                                                                    }), _jsx(IssueMessages, { issues: issues, testId: testIdFor(`cell-${rowIndex}-${column.field}-errors`), constrainWidth: true })] }, column.field));
+                                                                                    : undefined, onKeyDown: isLastCell ? handleLastCellKeyDown : undefined, children: !hidden && (_jsxs(_Fragment, { children: [renderCellControl({
+                                                                                            cellId: cellId(rowIndex, column.field),
+                                                                                            label: cellLabel(column, rowIndex),
+                                                                                            column,
+                                                                                            value: row[column.field],
+                                                                                            disabled: disabled === true,
+                                                                                            onChange: (value) => onCellChange(rowIndex, column.field, value),
+                                                                                            currency: effectiveCurrency,
+                                                                                            locale: resolvedLocale,
+                                                                                            derived: isDerivedCell(column, row),
+                                                                                            touch: false,
+                                                                                            uploadTarget,
+                                                                                        }), _jsx(IssueMessages, { issues: issues, testId: testIdFor(`cell-${rowIndex}-${column.field}-errors`), constrainWidth: true })] })) }, column.field));
                                                                         }), showControls && (_jsx(TableCell, { className: cn("sticky right-0 z-10 whitespace-nowrap bg-card px-1 text-right group-hover:bg-muted", isHorizontallyScrollable &&
                                                                                 "shadow-[inset_1px_0_0_var(--color-border)]"), children: _jsx(RowActions, { rowIndex: rowIndex, rowsLength: rows.length, minItems: minItems, maxItems: maxItems, onDuplicateRow: onDuplicateRow, onMoveRow: onMoveRow, onRemoveRow: onRemoveRow, duplicateLabel: duplicateLabel, moveUpLabel: moveUpLabel, moveDownLabel: moveDownLabel, removeLabel: removeLabel, testIdPrefix: testIdFor(`row-${rowIndex}`) }) }))] }), rowIssuesForRow !== undefined && rowIssuesForRow.length > 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + (showControls ? 1 : 0), children: _jsx(IssueMessages, { issues: rowIssuesForRow, testId: testIdFor(`row-${rowIndex}-issues`) }) }) }))] }, rowIndex));
-                                                    }) })] }) }), scrollAffordance.canScrollLeft && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-card to-transparent" })), scrollAffordance.canScrollRight && !showControls && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-card to-transparent" }))] }), showControls && (_jsx("div", { className: "border-t p-2", children: _jsxs(UiButton, { type: "button", variant: "ghost", size: "sm", onClick: onAddRow, disabled: addDisabled, "data-testid": testIdFor("add"), children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), addLabel] }) })), hasTotals && (_jsx("div", { "data-testid": testIdFor("totals"), className: "flex flex-wrap items-center justify-end gap-6 border-t bg-muted/30 px-4 py-3 text-sm", children: totals.map((total) => (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: total.label }), _jsx("span", { className: "font-medium tabular-nums", children: formatTotalValue(total, columns, effectiveCurrency, resolvedLocale) })] }, total.field))) }))] }), _jsx(IssueMessages, { issues: listIssues, testId: testIdFor("list-issues") })] })), isMobile && (_jsxs("div", { "data-testid": testIdFor("mobile"), className: "md:hidden flex flex-col gap-3", children: [rows.map((row, rowIndex) => {
-                        const isLastRow = rowIndex === rows.length - 1;
-                        const rowIssuesForRow = rowIssues?.[rowIndex];
-                        return (_jsxs("div", { "data-testid": testIdFor(`row-${rowIndex}`), className: "flex flex-col gap-3 rounded-lg border bg-card p-4", children: [columns.map((column, columnIndex) => {
-                                    const isLastCell = isLastRow && columnIndex === lastEditableIndex;
-                                    const issues = cellIssues?.[`${rowIndex}.${column.field}`];
-                                    return (_jsxs("div", { className: "flex flex-col gap-1", onPaste: onPasteCells !== undefined ? handlePaste(rowIndex, columnIndex) : undefined, onKeyDown: isLastCell ? handleLastCellKeyDown : undefined, children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: column.label }), renderCellControl({
-                                                cellId: cellId(rowIndex, column.field),
-                                                label: cellLabel(column, rowIndex),
-                                                column,
-                                                value: row[column.field],
-                                                disabled: disabled === true,
-                                                onChange: (value) => onCellChange(rowIndex, column.field, value),
-                                                currency: effectiveCurrency,
-                                                locale: resolvedLocale,
-                                            }), _jsx(IssueMessages, { issues: issues, testId: testIdFor(`cell-${rowIndex}-${column.field}-errors`) })] }, column.field));
-                                }), rowIssuesForRow !== undefined && rowIssuesForRow.length > 0 && (_jsx(IssueMessages, { issues: rowIssuesForRow, testId: testIdFor(`row-${rowIndex}-issues`) })), showControls && (_jsx("div", { className: "flex items-center justify-end gap-1 border-t pt-3", children: _jsx(RowActions, { rowIndex: rowIndex, rowsLength: rows.length, minItems: minItems, maxItems: maxItems, onDuplicateRow: onDuplicateRow, onMoveRow: onMoveRow, onRemoveRow: onRemoveRow, duplicateLabel: duplicateLabel, moveUpLabel: moveUpLabel, moveDownLabel: moveDownLabel, removeLabel: removeLabel, testIdPrefix: testIdFor(`row-${rowIndex}`), buttonSizeClass: "size-10" }) }))] }, rowIndex));
-                    }), showControls && (_jsxs(UiButton, { type: "button", variant: "outline", onClick: onAddRow, disabled: addDisabled, "data-testid": testIdFor("add"), children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), addLabel] })), hasTotals && (_jsx("div", { "data-testid": testIdFor("totals"), className: "flex flex-col gap-2 rounded-lg border bg-muted/30 p-4 text-sm", children: totals.map((total) => (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: total.label }), _jsx("span", { className: "font-medium tabular-nums", children: formatTotalValue(total, columns, effectiveCurrency, resolvedLocale) })] }, total.field))) })), _jsx(IssueMessages, { issues: listIssues, testId: testIdFor("list-issues") })] }))] }));
+                                                    }) })] }) }), scrollAffordance.canScrollLeft && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-card to-transparent" })), scrollAffordance.canScrollRight && !showControls && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-card to-transparent" }))] }), showControls && (_jsx("div", { className: "border-t p-2", children: _jsxs(UiButton, { type: "button", variant: "ghost", size: "sm", onClick: onAddRow, disabled: addDisabled, "data-testid": testIdFor("add"), children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), addLabel] }) })), hasTotals && (_jsx("div", { "data-testid": testIdFor("totals"), className: "flex flex-wrap items-center justify-end gap-6 border-t bg-muted/30 px-4 py-3 text-sm", children: totals.map((total) => (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: total.label }), _jsx("span", { className: "font-medium tabular-nums", children: formatTotalValue(total, columns, effectiveCurrency, resolvedLocale) })] }, total.field))) }))] }), _jsx(IssueMessages, { issues: listIssues, testId: testIdFor("list-issues") })] })), isMobile && (_jsx(EmbeddedListCards, { columns: columns, rows: rows, titleColumn: titleColumn, lastEditableIndex: lastEditableIndex, rowIssues: rowIssues, cellIssues: cellIssues, listIssues: listIssues, totalsNode: hasTotals && (_jsx("div", { "data-testid": testIdFor("totals"), className: "flex flex-col gap-2 rounded-lg border bg-muted/30 p-4 text-sm", children: totals.map((total) => (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: total.label }), _jsx("span", { className: "font-medium tabular-nums", children: formatTotalValue(total, columns, effectiveCurrency, resolvedLocale) })] }, total.field))) })), disabled: disabled === true, showControls: showControls, addDisabled: addDisabled, minItems: minItems, maxItems: maxItems, currency: effectiveCurrency, locale: resolvedLocale, uploadTarget: uploadTarget, onCellChange: onCellChange, onAddRow: onAddRow, onRemoveRow: onRemoveRow, onDuplicateRow: onDuplicateRow, onMoveRow: onMoveRow, handlePaste: handlePaste, handleLastCellKeyDown: handleLastCellKeyDown, pasteEnabled: onPasteCells !== undefined, cellId: cellId, cellLabel: cellLabel, testId: testId, addLabel: addLabel, duplicateLabel: duplicateLabel, moveUpLabel: moveUpLabel, moveDownLabel: moveDownLabel, removeLabel: removeLabel }))] }));
 }

package/dist/web/primitives/file-upload.d.ts

@@ -10,6 +10,7 @@ export type FileUploadInputProps = {
     readonly uploadActionForm?: string;
     readonly entityId?: string;
     readonly fieldName?: string;
+    readonly subField?: string;
     readonly imageVariant?: string;
     readonly capture?: "environment" | "user";
     /** Folder picker (web-only, `webkitdirectory`): hands the picked files with
@@ -19,4 +20,4 @@ export type FileUploadInputProps = {
     readonly pickLabel?: string;
     readonly testId?: string;
 };
-export declare function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, uploadActionForm, entityId, fieldName, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }: FileUploadInputProps): ReactNode;
+export declare function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, uploadActionForm, entityId, fieldName, subField, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }: FileUploadInputProps): ReactNode;

package/dist/web/primitives/file-upload.js

@@ -15,7 +15,7 @@ import { Button as UiButton } from "../ui/button.js";
 import { FileNameLink, FileThumbnail } from "./file-thumbnail.js";
 // React's input typings have no `webkitdirectory`; spreading keeps it typed-cast-free.
 const DIRECTORY_INPUT_ATTRS = { webkitdirectory: "", multiple: true };
-export function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, uploadActionForm, entityId, fieldName, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }) {
+export function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, uploadActionForm, entityId, fieldName, subField, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }) {
     const t = useTranslation();
     const sessionEnded = useSessionEndedSignal();
     const inputRef = useRef(null);
@@ -39,6 +39,7 @@ export function FileUploadInput({ kind, id, value, onChange, accept, disabled, e
                 entityType,
                 entityId,
                 fieldName,
+                subField,
                 actionForm: uploadActionForm,
             }));
         }

package/dist/web/primitives/input-choice-kinds.js

@@ -33,7 +33,7 @@ export const renderSelectKind = (props) => {
         return (_jsx(RadioListSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...(props.radioVariant !== undefined && { variant: props.radioVariant }), ...stateProps(props) }));
     }
     if (presentation === "segmented" && radioGroupOptions.length > 0) {
-        return (_jsx(SegmentedSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...stateProps(props) }));
+        return (_jsx(SegmentedSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...(props.optionTones !== undefined && { tones: props.optionTones }), ...stateProps(props) }));
     }
     // The dropdown shows a disabled option's hint inline, so it stays readable in the trigger and search.
     return (_jsx(ComboboxInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: comboOptions.map(withInlineDisabledHint), ...stateProps(props) }));

package/dist/web/primitives/input-optional-props.d.ts

@@ -13,8 +13,9 @@ type UploadTargetInput = {
     readonly uploadActionForm?: string;
     readonly entityId?: string;
     readonly fieldName?: string;
+    readonly subField?: string;
 };
 export declare function stateProps({ disabled, required, hasError }: StateInput): StateInput;
 export declare function localeBoundsProps({ locale, min, max }: LocaleBoundsInput): LocaleBoundsInput;
-export declare function uploadTargetProps({ entityType, uploadActionForm, entityId, fieldName, }: UploadTargetInput): UploadTargetInput;
+export declare function uploadTargetProps({ entityType, uploadActionForm, entityId, fieldName, subField, }: UploadTargetInput): UploadTargetInput;
 export {};

package/dist/web/primitives/input-optional-props.js

@@ -14,11 +14,12 @@ export function localeBoundsProps({ locale, min, max }) {
         ...(max !== undefined && { max }),
     };
 }
-export function uploadTargetProps({ entityType, uploadActionForm, entityId, fieldName, }) {
+export function uploadTargetProps({ entityType, uploadActionForm, entityId, fieldName, subField, }) {
     return {
         ...(entityType !== undefined && { entityType }),
         ...(uploadActionForm !== undefined && { uploadActionForm }),
         ...(entityId !== undefined && { entityId }),
         ...(fieldName !== undefined && { fieldName }),
+        ...(subField !== undefined && { subField }),
     };
 }

package/dist/web/primitives/locale-number.d.ts

@@ -1,2 +1,5 @@
 export declare function resolveSafeLocale(locale: string | undefined): string;
+export declare function formatLocaleNumber(value: number, locale: string, options: {
+    readonly grouping: boolean;
+}): string;
 export declare function parseLocaleNumber(raw: string, locale: string): number;

package/dist/web/primitives/locale-number.js

@@ -13,6 +13,14 @@ export function resolveSafeLocale(locale) {
         return FALLBACK_LOCALE;
     }
 }
+// 20 is the Intl maximum: the display must never round a stored value.
+const MAX_FRACTION_DIGITS = 20;
+export function formatLocaleNumber(value, locale, options) {
+    return new Intl.NumberFormat(resolveSafeLocale(locale), {
+        maximumFractionDigits: MAX_FRACTION_DIGITS,
+        useGrouping: options.grouping,
+    }).format(value);
+}
 // Separators come from Intl for the locale. A minus is only accepted at the
 // very start: "1-23" is invalid rather than -123, so a typo never turns into
 // a wrong amount. Anything besides digits and separators yields NaN so callers

package/dist/web/primitives/number-input.d.ts

@@ -14,5 +14,6 @@ export type NumberInputProps = {
     readonly testId?: string;
     readonly className?: string;
     readonly ariaDescribedBy?: string;
+    readonly ariaLabel?: string;
 };
-export declare function NumberInput({ id, name, value, onChange, locale, grouping, integer, disabled, required, hasError, placeholder, testId, className, ariaDescribedBy, }: NumberInputProps): ReactNode;
+export declare function NumberInput({ id, name, value, onChange, locale, grouping, integer, disabled, required, hasError, placeholder, testId, className, ariaDescribedBy, ariaLabel, }: NumberInputProps): ReactNode;

package/dist/web/primitives/number-input.js

@@ -9,10 +9,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { Input as UiInput } from "../ui/input.js";
-import { parseLocaleNumber, resolveSafeLocale } from "./locale-number.js";
-// 20 is the Intl maximum: the display must never round a stored value.
-const MAX_FRACTION_DIGITS = 20;
-export function NumberInput({ id, name, value, onChange, locale, grouping = true, integer = false, disabled, required, hasError, placeholder, testId, className, ariaDescribedBy, }) {
+import { formatLocaleNumber, parseLocaleNumber, resolveSafeLocale } from "./locale-number.js";
+export function NumberInput({ id, name, value, onChange, locale, grouping = true, integer = false, disabled, required, hasError, placeholder, testId, className, ariaDescribedBy, ariaLabel, }) {
     const resolvedLocale = resolveSafeLocale(locale);
     const [focused, setFocused] = useState(false);
     const [draft, setDraft] = useState("");
@@ -25,12 +23,7 @@ export function NumberInput({ id, name, value, onChange, locale, grouping = true
         if (focused)
             inputRef.current?.select();
     }, [focused]);
-    const format = (useGrouping) => value === ""
-        ? ""
-        : new Intl.NumberFormat(resolvedLocale, {
-            maximumFractionDigits: MAX_FRACTION_DIGITS,
-            useGrouping,
-        }).format(value);
+    const format = (useGrouping) => value === "" ? "" : formatLocaleNumber(value, resolvedLocale, { grouping: useGrouping });
     const handleChange = (raw) => {
         setDraft(raw);
         if (raw.trim() === "") {
@@ -46,7 +39,7 @@ export function NumberInput({ id, name, value, onChange, locale, grouping = true
         }
         onChange(parsed);
     };
-    return (_jsx(UiInput, { ref: inputRef, type: "text", inputMode: integer ? "numeric" : "decimal", autoComplete: "off", id: id, name: name, disabled: disabled, "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "aria-describedby": ariaDescribedBy, "data-testid": testId, value: focused ? draft : format(grouping), onFocus: () => {
+    return (_jsx(UiInput, { ref: inputRef, type: "text", inputMode: integer ? "numeric" : "decimal", autoComplete: "off", id: id, name: name, disabled: disabled, "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "data-testid": testId, value: focused ? draft : format(grouping), onFocus: () => {
             setDraft(format(false));
             setFocused(true);
         }, onBlur: () => setFocused(false), onChange: (e) => handleChange(e.target.value), ...(placeholder !== undefined && { placeholder }), className: cn("text-left tabular-nums", className) }));

package/dist/web/primitives/segmented-select.d.ts

@@ -1,5 +1,6 @@
+import type { SelectOptionTone } from "@cosmicdrift/kumiko-framework/ui-types";
 import { type ReactNode } from "react";
-export declare function SegmentedControl({ id, name, value, onChange, options, disabled, required, hasError, labelProps, }: {
+export declare function SegmentedControl({ id, name, value, onChange, options, disabled, required, hasError, labelProps, tones, size, }: {
     readonly id: string;
     readonly name: string;
     readonly value: string;
@@ -18,4 +19,8 @@ export declare function SegmentedControl({ id, name, value, onChange, options, d
     } | {
         "aria-label": string;
     };
+    /** Status tone per option value; the selected segment takes the tone's colors. */
+    readonly tones?: Readonly<Partial<Record<string, SelectOptionTone>>>;
+    /** `"touch"` makes every segment at least 44px high for fingers. */
+    readonly size?: "touch";
 }): ReactNode;

package/dist/web/primitives/segmented-select.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
+import { statusToneForOptionTone } from "../../index.js";
 import { cn } from "../lib/cn.js";
+import { TONE_PILL } from "../widgets/status-badge.js";
 const EQUAL_WIDTH_MAX_SEGMENTS = 4;
 // WAI-ARIA radiogroup pattern (role="radiogroup" + role="radio" children):
 // arrow keys move focus AND selection in the same step, only the checked
 // segment (or the first when none is checked) sits in the tab order.
-export function SegmentedControl({ id, name, value, onChange, options, disabled, required, hasError, labelProps, }) {
+export function SegmentedControl({ id, name, value, onChange, options, disabled, required, hasError, labelProps, tones, size, }) {
     const buttonRefs = useRef([]);
     // An unknown/legacy value checks no segment; the first one must still be tabbable.
     const selectedIndex = options.findIndex((opt) => opt.value === value);
@@ -41,8 +43,10 @@ export function SegmentedControl({ id, name, value, onChange, options, disabled,
         // their segment instead of leaving one tall and its siblings short.
         options.length <= EQUAL_WIDTH_MAX_SEGMENTS
             ? "inline-grid max-w-full grid-flow-col auto-cols-fr"
-            : "inline-flex w-fit flex-wrap", "min-h-9 overflow-hidden rounded-md border", hasError === true ? "border-destructive" : "border-input"), children: [_jsx("input", { type: "hidden", name: name, value: value }), options.map((opt, index) => {
+            : "inline-flex w-fit flex-wrap", size === "touch" ? "min-h-11" : "min-h-9", "overflow-hidden rounded-md border", hasError === true ? "border-destructive" : "border-input"), children: [_jsx("input", { type: "hidden", name: name, value: value }), options.map((opt, index) => {
                 const checked = opt.value === value;
+                const declaredTone = tones !== undefined && Object.hasOwn(tones, opt.value) ? tones[opt.value] : undefined;
+                const badgeTone = declaredTone !== undefined ? statusToneForOptionTone(declaredTone) : undefined;
                 return (_jsx("button", { ref: (node) => {
                         buttonRefs.current[index] = node;
                     }, type: "button", role: "radio", "aria-checked": checked, tabIndex: index === tabStopIndex ? 0 : -1, disabled: disabled === true || opt.disabled === true, "data-testid": `segmented-${id}-${opt.value}`, onClick: () => onChange(opt.value), onKeyDown: (e) => handleKeyDown(e, index), className: cn(
@@ -61,8 +65,8 @@ export function SegmentedControl({ id, name, value, onChange, options, disabled,
                     // and the next row's top border cut a notch into the row above.
                     // Harmless on a single-row layout: there's no leftover space to
                     // grow into, so `w-fit` on the container still holds.
-                    "-ml-px -mt-px grow border-l border-t px-3 py-1.5 text-center text-sm transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50", hasError === true ? "border-destructive/50" : "border-border", checked
-                        ? "bg-primary/10 font-semibold text-primary"
+                    "-ml-px -mt-px grow border-l border-t px-3 py-1.5 text-center text-sm transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50", hasError === true ? "border-destructive/50" : "border-border", size === "touch" && "min-h-11", checked
+                        ? cn("font-semibold", badgeTone !== undefined ? TONE_PILL[badgeTone] : "bg-primary/10 text-primary")
                         : "bg-transparent font-medium text-foreground hover:bg-accent"), children: opt.label }, opt.value));
             })] }));
 }

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

@@ -4,6 +4,7 @@ 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";
+export declare const TONE_PILL: Record<StatusBadgeTone, string>;
 /** 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. */

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

@@ -8,7 +8,7 @@ export const STATUS_TONE_TEXT = {
     muted: "text-muted-foreground",
 };
 // `muted` maps to the neutral tokens, not a status-* palette.
-const TONE_PILL = {
+export 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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.399.0",
+  "version": "0.400.0",
   "description": "React renderer for Kumiko screens. The root export holds the platform-agnostic logic (primitives contract, hooks, KumikoScreen, navigation and SSE abstractions); ./headless the DOM-free UI logic, ./live the HTTP dispatcher, ./web the browser bindings (HTML primitives, history navigation, EventSource live events, createKumikoApp).",
   "license": "MIT",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -48,8 +48,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.399.0",
-    "@cosmicdrift/kumiko-types": "0.399.0",
+    "@cosmicdrift/kumiko-framework": "0.400.0",
+    "@cosmicdrift/kumiko-types": "0.400.0",
     "@types/qrcode": "^1.5.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -79,8 +79,8 @@
     }
   },
   "devDependencies": {
-    "@cosmicdrift/kumiko-locale-de": "0.399.0",
-    "@cosmicdrift/kumiko-testing": "0.399.0",
+    "@cosmicdrift/kumiko-locale-de": "0.400.0",
+    "@cosmicdrift/kumiko-testing": "0.400.0",
     "@tailwindcss/cli": "^4.3.3",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.8",