@cosmicdrift/kumiko-renderer 0.399.0 → 0.401.0

package/dist/headless/view-model/types.d.ts

@@ -1,4 +1,4 @@
-import type { EditFieldSpec, EditSectionSpec, FieldAffix, FieldFillAction, FieldIconKey, FieldRenderer, IconKey, ListBulkAction, ListColumnSpec, ListFacetSpec, ListSortSpec, ListTableOptions, OptionsQueryPayload, PlatformComponent, RelatedListEmptyStateVariant, RelatedListRowTone, RelatedListToolbarAction, RowAction, RowActionMode, ScreenSlots, SelectOptionTone } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { EditFieldSpec, EditSectionSpec, EmbeddedDerivedCellDef, FieldAffix, FieldCondition, FieldFillAction, FieldIconKey, FieldRenderer, IconKey, ListBulkAction, ListColumnSpec, ListFacetSpec, ListSortSpec, ListTableOptions, OptionsQueryPayload, PlatformComponent, RelatedListEmptyStateVariant, RelatedListRowTone, RelatedListToolbarAction, RowAction, RowActionMode, ScreenSlots, SelectOptionTone } from "@cosmicdrift/kumiko-framework/ui-types";
 export type RuntimeRenderer = (value: unknown, row?: Readonly<Record<string, unknown>>) => string;
 /** Where a cell's text links to. `href` comes from NavApi.hrefFor (new-tab and
  *  copy-link work); `onPress` is the in-app navigation for a plain click. */
@@ -79,15 +79,26 @@ export type ListViewModel = {
 export type EmbeddedListCellViewModel = {
     readonly field: string;
     readonly label: string;
-    readonly type: "text" | "number" | "boolean" | "date" | "money" | "decimal" | "select" | "reference" | "timestamp";
+    readonly type: "text" | "number" | "boolean" | "date" | "money" | "decimal" | "select" | "reference" | "timestamp" | "images" | "files";
     readonly required: boolean;
+    /** Per-row state: hidden / required for a row where the condition holds. */
+    readonly visibleWhen?: Exclude<FieldCondition, boolean>;
+    readonly requiredWhen?: Exclude<FieldCondition, boolean>;
     /** Only for `type: "select"`. */
     readonly options?: readonly string[];
+    /** Only for `type: "select"`; tone of each option's badge or selected segment. */
+    readonly optionTones?: Readonly<Partial<Record<string, SelectOptionTone>>>;
+    /** Only for `type: "images" | "files"`. */
+    readonly capture?: "user" | "environment";
+    readonly maxCount?: number;
+    readonly accept?: readonly string[];
     readonly optionLabels?: Readonly<Record<string, string>>;
     /** Only for `type: "select"`; `"radio"` renders segmented buttons instead of a dropdown. */
     readonly display?: "radio" | "dropdown";
     /** Cell is shown but not editable (`EditFieldSpec.embeddedList.readOnlyCells`). */
     readonly readOnly?: boolean;
+    /** Not shown on phone cards (`EditFieldSpec.embeddedList.cardHiddenCells`). */
+    readonly hiddenInCard?: boolean;
     /** Only for `type: "reference"`. */
     readonly refEntity?: string;
     readonly refFeature?: string;
@@ -140,6 +151,8 @@ export type EditFieldViewModel = {
      *  `type: "select"` when SelectFieldDef.display is "radio" or "dropdown" —
      *  the renderer then skips its own radio-vs-dropdown heuristic. */
     readonly display?: "checkboxes" | "dropdown" | "radio";
+    /** `type: "select"` only: tone per option, shown on the selected radio segment. */
+    readonly optionTones?: Readonly<Partial<Record<string, SelectOptionTone>>>;
     /** Set for `type: "multiSelect"` when MultiSelectFieldDef.columns is
      *  defined — column count for the checkbox grid at the widest breakpoint.
      *  Ignored unless `display` is "checkboxes". */
@@ -249,10 +262,7 @@ export type EditFieldViewModel = {
     readonly embeddedListMaxItems?: number;
     /** Sub-field name → how to compute its cell from other sub-fields of the
      *  same row. From EmbeddedFieldDef.derived. */
-    readonly embeddedListDerived?: Readonly<Record<string, {
-        readonly op: "multiply" | "sum" | "subtract" | "percent";
-        readonly from: readonly string[];
-    }>>;
+    readonly embeddedListDerived?: Readonly<Record<string, EmbeddedDerivedCellDef>>;
     /** Footer totals: a sub-field name, or a labelled sum of several. From EmbeddedFieldDef.totals. */
     readonly embeddedListTotals?: readonly (string | {
         readonly label: string;
@@ -261,6 +271,13 @@ export type EditFieldViewModel = {
     /** No add, remove, duplicate or move; cells stay editable. From
      *  EditFieldSpec.embeddedList.fixedRows. */
     readonly embeddedListFixedRows?: boolean;
+    /** Where photos of a row's file cells are uploaded: the entity and the top-level list field;
+     *  the cell name travels as `subField`. Set when the list has a file cell. */
+    readonly embeddedListUploadTarget?: {
+        readonly entityType: string;
+        readonly fieldName: string;
+        readonly entityId?: string;
+    };
     /** Currency for the whole embedded list's money cells and totals row —
      *  currency lives on the head aggregate (EntityDefinition.defaultCurrency),
      *  not per row. Falls back to "EUR" when the entity has no defaultCurrency. */

package/dist/hooks/related-list-parent-payload.d.ts

@@ -0,0 +1,2 @@
+import type { EditRelatedListSection } from "@cosmicdrift/kumiko-framework/ui-types";
+export declare function buildRelatedListParentPayload(section: Pick<EditRelatedListSection, "parentFilter" | "parentParam">, parentId: string): Readonly<Record<string, unknown>>;

package/dist/hooks/related-list-parent-payload.js

@@ -0,0 +1,7 @@
+// `parentFilter` sends the parent id as a server-side `filter` clause: the generic
+// `<entity>:list` query understands `filter`, not an arbitrary `parentParam` key.
+export function buildRelatedListParentPayload(section, parentId) {
+    return section.parentFilter !== undefined
+        ? { filter: { field: section.parentFilter.field, op: "eq", value: parentId } }
+        : { [section.parentParam ?? "id"]: parentId };
+}

package/dist/i18n-defaults.js

@@ -50,6 +50,9 @@ export const kumikoDefaultTranslations = {
         "kumiko.field.writeOnly.willRemove": "Removed on save",
         "kumiko.field.embedded-list.actions": "Actions",
         "kumiko.field.embedded-list.cell-label": "{column}, row {row}",
+        "kumiko.field.embedded-list.limit-range": "Limit {min} to {max}",
+        "kumiko.field.embedded-list.limit-min": "At least {min}",
+        "kumiko.field.embedded-list.limit-max": "At most {max}",
         "kumiko.field.file-list.add": "Add file",
         "kumiko.field.file-list.move-up": "Move file up",
         "kumiko.field.file-list.move-down": "Move file down",

package/dist/primitives.d.ts

@@ -4,8 +4,10 @@ import { type ComponentType, type FormEvent, type KeyboardEvent, type ReactNode,
 import type { DataTableBulk } from "./data-table-bulk-types.ts";
 import type { DataTableDateRangeFacet, DataTableFacet } from "./data-table-facet-types.ts";
 import type { DataTableTableBlock } from "./data-table-view-types.ts";
+import type { EmbeddedListInputProps } from "./embedded-list-types.ts";
 import type { FieldIssue, ListColumnViewModel, ListRowViewModel, RuntimeRenderer } from "./headless/index.ts";
 import type { MetricBandProps, MetricProps } from "./metric-types.ts";
+export type { EmbeddedListCellType, EmbeddedListColumn, EmbeddedListInputProps, EmbeddedListTotal, } from "./embedded-list-types.ts";
 export type { RuntimeRenderer };
 /** Escape hatch for `data-*` test hooks (e.g. an E2E selector) that don't
  *  warrant a dedicated typed prop. Web merges these onto the rendered
@@ -460,6 +462,8 @@ export type InputProps = {
      *  decides; the web impl keeps its short-option-set heuristic. Custom
      *  impls may ignore it — it is a request, not a contract. */
     readonly display?: "radio" | "dropdown";
+    /** Tone per option value; the selected segment of a radio presentation takes its colors. */
+    readonly optionTones?: Readonly<Partial<Record<string, SelectOptionTone>>>;
 } | ({
     readonly kind: "combobox";
     readonly id: string;
@@ -797,94 +801,6 @@ export type DataTableProps = {
     readonly renderExpandedRow?: (row: ListRowViewModel) => ReactNode;
 } & DataTableTableBlock;
 export type DataTableTableBlockProps = Pick<DataTableProps, keyof DataTableTableBlock>;
-/** Cell type for one column of an embedded-list field. Mirrors
- *  EmbeddedListCellViewModel["type"] from `@cosmicdrift/kumiko-renderer/headless`. */
-export type EmbeddedListCellType = "text" | "number" | "boolean" | "date" | "money" | "decimal" | "select" | "reference" | "timestamp";
-/** One column of an embedded-list table (one entry per key of the source
- *  EmbeddedFieldDef's `schema`). */
-export type EmbeddedListColumn = {
-    readonly field: string;
-    readonly label: string;
-    readonly type: EmbeddedListCellType;
-    readonly required: boolean;
-    /** Read-only, value supplied by the caller (already computed from
-     *  sibling cells) — not directly user-editable. */
-    readonly derived: boolean;
-    /** Shown but not editable by the user; unlike `derived` it is not computed. */
-    readonly readOnly?: boolean;
-    /** Only for `type: "select"`. */
-    readonly options?: readonly string[];
-    readonly optionLabels?: Readonly<Record<string, string>>;
-    /** Only for `type: "select"`; `"radio"` renders segmented buttons, the
-     *  default is a dropdown. */
-    readonly display?: "radio" | "dropdown";
-    /** Only for `type: "reference"` — pre-fetched by the caller, ONE query
-     *  per column shared across every row (not one query per cell). */
-    readonly referenceOptions?: readonly {
-        readonly value: string;
-        readonly label: string;
-    }[];
-    readonly referenceLoading?: boolean;
-};
-/** One entry of an embedded-list totals row (e.g. an invoice's total
- *  amount, summed across all rows by the caller). */
-export type EmbeddedListTotal = {
-    readonly field: string;
-    readonly label: string;
-    readonly value: number;
-    /** Set for labelled multi-column totals, which have no single column to
-     *  read the money type from. */
-    readonly money?: boolean;
-};
-/** Row-array + totals table for a `createEmbeddedListField` (invoice-
- *  positions-style) field — structurally too different from `Input`'s
- *  value/onChange union to fit there, so it's its own primitive, same as
- *  `DataTable`. Controlled: the caller (the eventual form-field wrapper)
- *  computes rows/derived values/issue groups and wires every callback;
- *  this primitive only renders and reports interaction. */
-export type EmbeddedListInputProps = {
-    readonly id: string;
-    readonly columns: readonly EmbeddedListColumn[];
-    readonly rows: readonly Readonly<Record<string, unknown>>[];
-    readonly totals?: readonly EmbeddedListTotal[];
-    /** Currency for money cells and the totals row — one value for the whole
-     *  list (currency lives on the head aggregate, not the row). Web impl
-     *  falls back to "EUR" when absent. */
-    readonly currency?: string;
-    /** Whole-list read-only (e.g. a released invoice) — hides row-mutation
-     *  affordances and disables every cell. */
-    readonly disabled?: boolean;
-    /** Rows are fixed: no add, remove, duplicate or move; cells stay editable. */
-    readonly fixedRows?: boolean;
-    readonly minItems?: number;
-    readonly maxItems?: number;
-    /** Shown under the whole list (e.g. under the totals row). */
-    readonly listIssues?: readonly FieldIssue[];
-    /** Keyed by row index. */
-    readonly rowIssues?: Readonly<Record<number, readonly FieldIssue[]>>;
-    /** Keyed `${rowIndex}.${field}`. */
-    readonly cellIssues?: Readonly<Record<string, readonly FieldIssue[]>>;
-    readonly onCellChange: (rowIndex: number, field: string, value: unknown) => void;
-    readonly onAddRow: () => void;
-    readonly onRemoveRow: (rowIndex: number) => void;
-    readonly onDuplicateRow: (rowIndex: number) => void;
-    readonly onMoveRow: (fromIndex: number, toIndex: number) => void;
-    /** Tab/newline-delimited clipboard paste starting at (rowIndex,
-     *  columnIndex) — parsed to a 2D string grid by the Web impl (paste
-     *  events are a browser-only concept); undefined caller = no paste
-     *  handling wired up. */
-    readonly onPasteCells?: (rowIndex: number, columnIndex: number, grid: readonly (readonly string[])[]) => void;
-    readonly addLabel: string;
-    /** Accessible name of the (otherwise headerless) row-actions column. */
-    readonly actionsLabel: string;
-    readonly removeLabel: string;
-    readonly duplicateLabel: string;
-    readonly moveUpLabel: string;
-    readonly moveDownLabel: string;
-    readonly emptyLabel: string;
-    readonly emptyCtaLabel: string;
-    readonly testId?: string;
-};
 export type { FormWidth };
 /** One entry of a form's "on this page" navigation: `id` matches the
  *  `SectionProps.id` of the section it scrolls to. */

package/dist/web/app/dashboard-body.js

@@ -16,7 +16,7 @@ function panelSpanClassName(panel) {
         return HALF_PANEL;
     return WIDE_PANEL;
 }
-function PanelBody({ panel, label, screenId, screenParams, translate, }) {
+function PanelBody({ panel, label, featureName, screenId, screenParams, translate, }) {
     if (panel.kind === "stat-group") {
         return (_jsx(StatGroupPanelBody, { panel: panel, label: label, screenId: screenId, screenParams: screenParams, translate: translate }));
     }
@@ -36,7 +36,7 @@ function PanelBody({ panel, label, screenId, screenParams, translate, }) {
         return (_jsx(ChartPanelBody, { panel: panel, label: text, screenParams: screenParams, translate: translate }));
     }
     if (panel.kind === "list") {
-        return (_jsx(ListPanelBody, { panel: panel, label: text, screenParams: screenParams, translate: translate }));
+        return (_jsx(ListPanelBody, { panel: panel, label: text, featureName: featureName, screenParams: screenParams, translate: translate }));
     }
     if (panel.kind === "feed") {
         return (_jsx(FeedPanelBody, { panel: panel, label: text, screenParams: screenParams, translate: translate }));
@@ -51,7 +51,7 @@ function renderDashboardPanel(panel, featureName, screenId, screenParams, transl
         return (_jsx(ScreenPanelTile, { panel: panel, featureName: featureName, recordId: screenParams.recordId, translate: translate }, panel.id));
     }
     const label = panel.kind === "custom" || panel.label === undefined ? undefined : translate(panel.label);
-    return (_jsx(GatedGridCell, { panel: panel, screenParams: screenParams, label: label ?? panel.id, className: panelSpanClassName(panel), children: _jsx(PanelBody, { panel: panel, label: label, screenId: screenId, screenParams: screenParams, translate: translate }) }, panel.id));
+    return (_jsx(GatedGridCell, { panel: panel, screenParams: screenParams, label: label ?? panel.id, className: panelSpanClassName(panel), children: _jsx(PanelBody, { panel: panel, label: label, featureName: featureName, screenId: screenId, screenParams: screenParams, translate: translate }) }, panel.id));
 }
 export function WebDashboardBody({ featureName, screen, translate, }) {
     const t = useTranslation();

package/dist/web/app/dashboard-panels.d.ts

@@ -23,9 +23,10 @@ export declare function ChartPanelBody({ panel, label, screenParams, translate,
     readonly screenParams: ScreenParams;
     readonly translate: Translate;
 }): ReactNode;
-export declare function ListPanelBody({ panel, label, screenParams, translate, }: {
+export declare function ListPanelBody({ panel, label, featureName, screenParams, translate, }: {
     readonly panel: DashboardListPanel;
     readonly label: string;
+    readonly featureName: string;
     readonly screenParams: ScreenParams;
     readonly translate: Translate;
 }): ReactNode;

package/dist/web/app/dashboard-panels.js

@@ -8,13 +8,13 @@ import { EMPTY_VALUE_PLACEHOLDER } from "../../headless/index.js";
 import { extensionSectionName, lastSegment, useExtensionSectionComponent, useNav, usePrimitives, useTranslation, useUserRoles, } from "../../index.js";
 import { initialWindowSelection, } from "../widgets/chart-window.js";
 import { chartToneColor, SegmentBarChart, StackedAreaChart, StackedBarChart, TimeseriesChart, } from "../widgets/charts.js";
-import { DashboardListTable } from "../widgets/dashboard-list.js";
 import { FeedList } from "../widgets/feed-list.js";
 import { ModeSwitch } from "../widgets/mode-switch.js";
 import { ProgressList } from "../widgets/progress-list.js";
 import { SectionCard } from "../widgets/section-card.js";
 import { STAT_CARD_GRID_CLASSES, StatCard, StatStripCell, } from "../widgets/stat.js";
 import { EmptyState, LoadingState } from "../widgets/states.js";
+import { DashboardReferenceListTable } from "./dashboard-reference-list-table.js";
 import { DAY_MS, HOUR_MS, PanelError, PanelShell, panelPayload, QueryPanel, useDashboardFormats, useDashboardQuery, useReportPanelLoaded, } from "./dashboard-shared.js";
 import { isRecord, resolveDashboardText } from "./dashboard-text.js";
 function isSparkPoint(value) {
@@ -222,7 +222,7 @@ export function ChartPanelBody({ panel, label, screenParams, translate, }) {
                 }), ariaLabel: label, testId: testId }));
         } }));
 }
-export function ListPanelBody({ panel, label, screenParams, translate, }) {
+export function ListPanelBody({ panel, label, featureName, screenParams, translate, }) {
     const { formatPercent, formatNumber, formatDateTime } = useDashboardFormats();
     const columns = panel.columns.map((c) => {
         const normalized = normalizeListColumn(c);
@@ -233,9 +233,17 @@ export function ListPanelBody({ panel, label, screenParams, translate, }) {
             ...(normalized.badgeToneField !== undefined && {
                 badgeToneField: normalized.badgeToneField,
             }),
+            ...(normalized.refEntity !== undefined && {
+                reference: {
+                    refEntity: normalized.refEntity,
+                    ...(normalized.refLabelField !== undefined && {
+                        refLabelField: normalized.refLabelField,
+                    }),
+                },
+            }),
         };
     });
-    return (_jsx(QueryPanel, { panel: panel, label: label, screenParams: screenParams, translate: translate, skeleton: "rows", isEmpty: (data) => (data.rows ?? []).length === 0, children: (data) => (_jsx(DashboardListTable, { columns: columns, rows: data.rows ?? [], formatPercent: formatPercent, formatNumber: formatNumber, formatDateTime: formatDateTime, translate: translate })) }));
+    return (_jsx(QueryPanel, { panel: panel, label: label, screenParams: screenParams, translate: translate, skeleton: "rows", isEmpty: (data) => (data.rows ?? []).length === 0, children: (data) => (_jsx(DashboardReferenceListTable, { columns: columns, rows: data.rows ?? [], featureName: featureName, formatPercent: formatPercent, formatNumber: formatNumber, formatDateTime: formatDateTime, translate: translate })) }));
 }
 export function FeedPanelBody({ panel, label, screenParams, translate, }) {
     return (_jsx(QueryPanel, { panel: panel, label: label, screenParams: screenParams, translate: translate, skeleton: "rows", isEmpty: (data) => (data.rows ?? []).length === 0, children: (data, formats) => {

package/dist/web/app/dashboard-reference-list-table.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentProps, type ReactNode } from "react";
+import type { Translate } from "../../headless/index.ts";
+import { type DashboardListColumn, DashboardListTable } from "../widgets/dashboard-list.tsx";
+export type DashboardReferenceTarget = {
+    readonly refEntity: string;
+    readonly refLabelField?: string;
+};
+export type DashboardListTableColumn = DashboardListColumn & {
+    readonly reference?: DashboardReferenceTarget;
+};
+type Props = Omit<ComponentProps<typeof DashboardListTable>, "columns"> & {
+    readonly columns: readonly DashboardListTableColumn[];
+    readonly featureName: string;
+    readonly translate: Translate;
+};
+export declare function DashboardReferenceListTable({ columns, rows, featureName, translate, ...tableProps }: Props): ReactNode;
+export {};

package/dist/web/app/dashboard-reference-list-table.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parseRefTarget } from "@cosmicdrift/kumiko-framework/ui-types";
+import { useMemo } from "react";
+import { useReferenceLinkResolver } from "../../app/reference-link.js";
+import { renderReferenceLookupBridges } from "../../components/render-list-reference-bridge.js";
+import { enrichReferenceColumns, selectReferenceColumns, } from "../../components/render-list-reference-columns.js";
+import { useReferenceColumnLookups } from "../../components/use-reference-column-lookups.js";
+import { DashboardListTable } from "../widgets/dashboard-list.js";
+function toReferenceViewColumn(column, featureName) {
+    if (column.reference === undefined)
+        return undefined;
+    const target = parseRefTarget(column.reference.refEntity, featureName);
+    return {
+        field: column.field,
+        label: column.label,
+        type: "reference",
+        sortable: false,
+        refEntity: target.entityName,
+        refFeature: target.featureName,
+        refLabelField: column.reference.refLabelField ?? "id",
+    };
+}
+// Dashboard list rows carry raw ids; reference columns resolve them to the target's label
+// the way entity lists do.
+export function DashboardReferenceListTable({ columns, rows, featureName, translate, ...tableProps }) {
+    const viewColumns = useMemo(() => columns.flatMap((column) => {
+        const viewColumn = toReferenceViewColumn(column, featureName);
+        return viewColumn === undefined ? [] : [viewColumn];
+    }), [columns, featureName]);
+    const referenceColumns = useMemo(() => selectReferenceColumns(viewColumns, featureName), [viewColumns, featureName]);
+    const { referenceRequests, handleLookupMap, referenceLookups } = useReferenceColumnLookups(rows, referenceColumns);
+    const resolveReferenceLink = useReferenceLinkResolver();
+    const enriched = useMemo(() => enrichReferenceColumns({
+        columns: viewColumns,
+        referenceColumns,
+        referenceLookups,
+        resolveReferenceLink,
+        featureName,
+        translate,
+    }), [viewColumns, referenceColumns, referenceLookups, resolveReferenceLink, featureName, translate]);
+    const tableColumns = columns.map((column) => {
+        const renderer = enriched.find((c) => c.field === column.field)?.renderer;
+        const { reference: _reference, ...base } = column;
+        return typeof renderer === "function" ? { ...base, renderValue: renderer } : base;
+    });
+    return (_jsxs(_Fragment, { children: [renderReferenceLookupBridges(referenceRequests, handleLookupMap), _jsx(DashboardListTable, { columns: tableColumns, rows: rows, translate: translate, ...tableProps })] }));
+}

package/dist/web/lib/file-upload-form-data.d.ts

@@ -3,6 +3,8 @@ export type FileUploadFormDataInput = {
     readonly entityType?: string | undefined;
     readonly entityId?: string | undefined;
     readonly fieldName?: string | undefined;
+    /** File sub-field of the embedded `fieldName`. */
+    readonly subField?: string | undefined;
     /** Screen QN of an actionForm: the upload is pending for that form's field, not for an entity. */
     readonly actionForm?: string | undefined;
 };

package/dist/web/lib/file-upload-form-data.js

@@ -7,6 +7,8 @@ export function buildFileUploadFormData(input) {
         formData.append("entityId", input.entityId);
     if (input.fieldName !== undefined)
         formData.append("fieldName", input.fieldName);
+    if (input.subField !== undefined)
+        formData.append("subField", input.subField);
     if (input.actionForm !== undefined)
         formData.append("actionForm", input.actionForm);
     return formData;

package/dist/web/lib/upload-file-ref.d.ts

@@ -1,5 +1,5 @@
 import { type FileUploadFormDataInput } from "./file-upload-form-data.ts";
-export type FileRefTarget = Pick<FileUploadFormDataInput, "entityType" | "entityId" | "fieldName" | "actionForm">;
+export type FileRefTarget = Pick<FileUploadFormDataInput, "entityType" | "entityId" | "fieldName" | "subField" | "actionForm">;
 /** Carries the server's own `error` message when the upload endpoint sent one. */
 export declare class FileUploadFailedError extends Error {
     readonly fromServer: boolean;

package/dist/web/primitives/data-table-cell.d.ts

@@ -1,6 +1,7 @@
 import type { SelectOptionTone } from "@cosmicdrift/kumiko-framework/ui-types";
 import { type ReactNode } from "react";
 import type { CellLink, CellLinkItem, ListColumnFileDisplay, ListRowViewModel, RuntimeCellLink, RuntimeCellLinkItems } from "../../headless/index.ts";
+import { type PrimitivesRegistry } from "../../index.ts";
 import "../react-css-custom-properties.ts";
 export declare function isEmptyCellValue(value: unknown): boolean;
 export declare function isUnlabeledFalse(type: string, value: unknown, renderer: unknown): boolean;
@@ -22,6 +23,7 @@ export declare function isComponentRendererRef(renderer: unknown): {
 } | undefined;
 export declare function defaultCellRender(value: unknown, type: string, optionLabels?: Readonly<Record<string, string>>, locale?: string, columnKey?: string, grouping?: boolean): string;
 export declare function cellTitle(value: unknown): string | undefined;
+export declare function selectPill(value: unknown, optionLabels: Readonly<Record<string, string>> | undefined, optionTones: Readonly<Partial<Record<string, SelectOptionTone>>> | undefined, locale: string | undefined, RegisteredStatusBadge: PrimitivesRegistry["StatusBadge"]): ReactNode;
 type DataTableCellProps = {
     readonly value: unknown;
     readonly row: Readonly<Record<string, unknown>>;

package/dist/web/primitives/data-table-cell.js

@@ -201,7 +201,7 @@ export function cellTitle(value) {
         return String(value);
     return undefined;
 }
-function selectPill(value, optionLabels, optionTones, locale, RegisteredStatusBadge) {
+export function selectPill(value, optionLabels, optionTones, locale, RegisteredStatusBadge) {
     const label = defaultCellRender(value, "select", optionLabels, locale);
     const declaredTone = typeof value === "string" && optionTones && Object.hasOwn(optionTones, value)
         ? optionTones[value]

package/dist/web/primitives/embedded-file-cell.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import type { EmbeddedListColumn, EmbeddedListInputProps } from "../../index.ts";
+export declare function EmbeddedFileCell({ cellId, label, column, value, readOnly, uploadTarget, onChange, }: {
+    readonly cellId: string;
+    readonly label: string;
+    readonly column: EmbeddedListColumn;
+    readonly value: unknown;
+    readonly readOnly: boolean;
+    readonly uploadTarget: EmbeddedListInputProps["uploadTarget"];
+    readonly onChange: (value: unknown) => void;
+}): ReactNode;

package/dist/web/primitives/embedded-file-cell.js

@@ -0,0 +1,50 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// File/image cell of an embedded list row: thumbs plus an add tile. The value is a fileRef id
+// array; uploads carry the list's field name and the cell's `subField` so the server can
+// resolve the sub-field's accept/maxSize and attach the ref to the right slot.
+import { Loader2, Plus, X } from "lucide-react";
+import { useRef, useState } from "react";
+import { fileIdsOf } from "../../file-ids-of.js";
+import { useSessionEndedSignal, useTranslation } from "../../index.js";
+import { toAcceptAttr } from "../lib/accept-attr.js";
+import { cn } from "../lib/cn.js";
+import { resizeImageBeforeUpload } from "../lib/resize-image.js";
+import { uploadErrorKey } from "../lib/upload-error-key.js";
+import { isSessionEndedUploadError, uploadFileRef } from "../lib/upload-file-ref.js";
+import { FileNameLink, FileThumbnail } from "./file-thumbnail.js";
+export function EmbeddedFileCell({ cellId, label, column, value, readOnly, uploadTarget, onChange, }) {
+    const t = useTranslation();
+    const sessionEnded = useSessionEndedSignal();
+    const inputRef = useRef(null);
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState(null);
+    const ids = fileIdsOf(value);
+    const isImage = column.type === "images";
+    const canAdd = !readOnly &&
+        uploadTarget !== undefined &&
+        (column.maxCount === undefined || ids.length < column.maxCount);
+    const acceptAttr = toAcceptAttr(column.accept);
+    async function onPick(e) {
+        const file = e.target.files?.[0];
+        if (file === undefined || uploadTarget === undefined)
+            return;
+        setUploading(true);
+        setError(null);
+        try {
+            const uploadFile = await resizeImageBeforeUpload(file);
+            const id = await uploadFileRef(uploadFile, { ...uploadTarget, subField: column.field });
+            onChange([...ids, id]);
+        }
+        catch (cause) {
+            if (isSessionEndedUploadError(cause))
+                sessionEnded?.notify();
+            setError(t(uploadErrorKey(cause)));
+        }
+        finally {
+            setUploading(false);
+            if (inputRef.current)
+                inputRef.current.value = "";
+        }
+    }
+    return (_jsxs("div", { "data-cell-id": cellId, className: "flex min-w-0 flex-wrap items-center gap-2", children: [ids.map((fileId) => (_jsxs("div", { className: "relative", children: [isImage ? (_jsx(FileThumbnail, { fileId: fileId, className: "size-16" })) : (_jsx(FileNameLink, { fileId: fileId, fallbackLabel: t("kumiko.field.file-upload.attached") })), !readOnly && (_jsx("button", { type: "button", "aria-label": t("kumiko.field.file-upload.remove"), className: "absolute -right-2 -top-2 flex size-6 items-center justify-center rounded-full border bg-card text-muted-foreground", onClick: () => onChange(ids.filter((id) => id !== fileId)), children: _jsx(X, { className: "size-3", "aria-hidden": "true" }) }))] }, fileId))), canAdd && (_jsxs(_Fragment, { children: [_jsx("input", { ref: inputRef, type: "file", className: "hidden", ...(acceptAttr !== undefined && { accept: acceptAttr }), ...(column.capture !== undefined && { capture: column.capture }), onChange: (e) => void onPick(e) }), _jsx("button", { type: "button", "aria-label": `${label}: ${t("kumiko.field.file-upload.upload")}`, disabled: uploading, className: cn("flex size-16 items-center justify-center rounded-md border border-dashed text-muted-foreground"), onClick: () => inputRef.current?.click(), children: uploading ? (_jsx(Loader2, { className: "size-5 animate-spin", "aria-hidden": "true" })) : (_jsx(Plus, { className: "size-5", "aria-hidden": "true" })) })] })), error !== null && _jsx("span", { className: "w-full text-xs text-destructive", children: error })] }));
+}

package/dist/web/primitives/embedded-list-cards.d.ts

@@ -0,0 +1,38 @@
+import type { ClipboardEvent, KeyboardEvent, ReactNode } from "react";
+import type { FieldIssue } from "../../headless/index.ts";
+import type { EmbeddedListColumn, EmbeddedListInputProps } from "../../index.ts";
+export type EmbeddedListCardsProps = {
+    readonly columns: readonly EmbeddedListColumn[];
+    readonly rows: EmbeddedListInputProps["rows"];
+    readonly titleColumn: EmbeddedListColumn | undefined;
+    readonly lastEditableIndex: number;
+    readonly rowIssues: EmbeddedListInputProps["rowIssues"];
+    readonly cellIssues: EmbeddedListInputProps["cellIssues"];
+    readonly listIssues: readonly FieldIssue[] | undefined;
+    readonly totalsNode: ReactNode;
+    readonly disabled: boolean;
+    readonly showControls: boolean;
+    readonly addDisabled: boolean;
+    readonly minItems: number | undefined;
+    readonly maxItems: number | undefined;
+    readonly currency: string;
+    readonly locale: string;
+    readonly uploadTarget: EmbeddedListInputProps["uploadTarget"];
+    readonly onCellChange: EmbeddedListInputProps["onCellChange"];
+    readonly onAddRow: () => void;
+    readonly onRemoveRow: (rowIndex: number) => void;
+    readonly onDuplicateRow: (rowIndex: number) => void;
+    readonly onMoveRow: (fromIndex: number, toIndex: number) => void;
+    readonly handlePaste: (rowIndex: number, columnIndex: number) => (event: ClipboardEvent<HTMLElement>) => void;
+    readonly handleLastCellKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    readonly pasteEnabled: boolean;
+    readonly cellId: (rowIndex: number, field: string) => string;
+    readonly cellLabel: (column: EmbeddedListColumn, rowIndex: number) => string;
+    readonly testId: string | undefined;
+    readonly addLabel: string;
+    readonly duplicateLabel: string;
+    readonly moveUpLabel: string;
+    readonly moveDownLabel: string;
+    readonly removeLabel: string;
+};
+export declare function EmbeddedListCards(props: EmbeddedListCardsProps): ReactNode;

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Mobile card layout for EmbeddedListInput. One card per row: the title, then
+// one block per visible column. Columns marked hiddenInCard are skipped, and a
+// column with cardAttachedTo sits unlabeled next to its anchor control.
+import { Plus } from "lucide-react";
+import { useTranslation } from "../../index.js";
+import { Button as UiButton } from "../ui/button.js";
+import { IssueMessages, isDerivedCell, RowActions, readOnlyCellText, renderCellControl, } from "./embedded-list-cell.js";
+import { formatLocaleNumber } from "./locale-number.js";
+function CardLimitsHint({ limits, row, locale, testId, }) {
+    const t = useTranslation();
+    const rawMin = row[limits.min];
+    const rawMax = row[limits.max];
+    const min = typeof rawMin === "number" ? formatLocaleNumber(rawMin, locale, { grouping: true }) : undefined;
+    const max = typeof rawMax === "number" ? formatLocaleNumber(rawMax, locale, { grouping: true }) : undefined;
+    let text;
+    if (min !== undefined && max !== undefined) {
+        text = t("kumiko.field.embedded-list.limit-range", { min, max });
+    }
+    else if (min !== undefined) {
+        text = t("kumiko.field.embedded-list.limit-min", { min });
+    }
+    else if (max !== undefined) {
+        text = t("kumiko.field.embedded-list.limit-max", { max });
+    }
+    if (text === undefined)
+        return null;
+    return (_jsx("div", { "data-testid": testId, className: "text-xs text-muted-foreground", children: text }));
+}
+export function EmbeddedListCards(props) {
+    const { columns, rows, titleColumn, lastEditableIndex, rowIssues, cellIssues, listIssues, totalsNode, disabled, showControls, addDisabled, minItems, maxItems, currency, locale, uploadTarget, onCellChange, onAddRow, onRemoveRow, onDuplicateRow, onMoveRow, handlePaste, handleLastCellKeyDown, pasteEnabled, cellId, cellLabel, testId, addLabel, duplicateLabel, moveUpLabel, moveDownLabel, removeLabel, } = props;
+    const testIdFor = (suffix) => testId !== undefined ? `${testId}-${suffix}` : undefined;
+    return (_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];
+                const isVisible = (column) => column !== titleColumn &&
+                    column.hiddenInCard !== true &&
+                    column.isHiddenInRow?.(row) !== true;
+                const renderControl = (column) => renderCellControl({
+                    cellId: cellId(rowIndex, column.field),
+                    label: cellLabel(column, rowIndex),
+                    column,
+                    value: row[column.field],
+                    disabled,
+                    onChange: (value) => onCellChange(rowIndex, column.field, value),
+                    currency,
+                    locale,
+                    derived: isDerivedCell(column, row),
+                    touch: true,
+                    uploadTarget,
+                });
+                const renderIssues = (column) => (_jsx(IssueMessages, { issues: cellIssues?.[`${rowIndex}.${column.field}`], testId: testIdFor(`cell-${rowIndex}-${column.field}-errors`) }));
+                const anchorHasAttachment = (anchor) => columns.find((other) => other.cardAttachedTo === anchor.field &&
+                    other.hiddenInCard !== true &&
+                    other.field !== anchor.field);
+                return (_jsxs("div", { "data-testid": testIdFor(`row-${rowIndex}`), className: "flex flex-col gap-3 rounded-lg border bg-card p-4", children: [titleColumn !== undefined && (_jsxs("div", { "data-testid": testIdFor(`row-${rowIndex}-title`), className: "font-medium", children: [rowIndex + 1, " ", readOnlyCellText(titleColumn, row[titleColumn.field], currency, locale)] })), columns.map((column, columnIndex) => {
+                            if (!isVisible(column))
+                                return null;
+                            const anchor = column.cardAttachedTo !== undefined
+                                ? columns.find((other) => other.field === column.cardAttachedTo)
+                                : undefined;
+                            if (anchor !== undefined && isVisible(anchor))
+                                return null;
+                            const attached = anchorHasAttachment(column);
+                            const isLastCell = isLastRow && columnIndex === lastEditableIndex;
+                            const showLabel = column.cardAttachedTo === undefined;
+                            const control = (_jsxs("div", { className: attached !== undefined ? "min-w-0 flex-1" : undefined, children: [renderControl(column), column.cardLimits !== undefined && (_jsx(CardLimitsHint, { limits: column.cardLimits, row: row, locale: locale, testId: testIdFor(`cell-${rowIndex}-${column.field}-limits`) }))] }));
+                            return (_jsxs("div", { className: "flex flex-col gap-1", onPaste: pasteEnabled ? handlePaste(rowIndex, columnIndex) : undefined, onKeyDown: isLastCell ? handleLastCellKeyDown : undefined, children: [showLabel && (_jsxs("span", { className: "text-xs font-medium text-muted-foreground", children: [column.label, column.isRequiredInRow?.(row) === true && " *"] })), attached !== undefined ? (_jsxs("div", { className: "flex items-start gap-3", children: [control, _jsx("div", { className: "shrink-0", children: renderControl(attached) })] })) : (control), renderIssues(column), attached !== undefined && renderIssues(attached)] }, 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] })), totalsNode, _jsx(IssueMessages, { issues: listIssues, testId: testIdFor("list-issues") })] }));
+}