@cosmicdrift/kumiko-renderer 0.390.1 → 0.391.0

package/dist/app/projection-detail-header.js

@@ -50,20 +50,24 @@ export function buildMetricItems(model) {
     return screen.metrics?.map((metric) => {
         const field = metric.field;
         const label = effectiveTranslate(metric.label);
-        const value = String(record[field] ?? "");
+        const rawValue = record[field];
+        const value = String(rawValue ?? "");
+        const tiles = screen.metricsStyle === "tiles";
+        // Same rule as the dashboard stat panels: a fixed tone must not paint an all-clear 0.
+        const tone = rawValue === 0 ? undefined : metric.tone;
         const testId = `kumiko-screen-projection-detail-metric-${field}`;
         const navigate = metric.navigate;
         const onPress = navigate !== undefined && navigateTargetAllows(navigate, appFeatures, userRoles)
             ? () => runMetricNavigate(nav, navigate, record, host)
             : undefined;
-        return Metric !== undefined ? (_jsx(Metric, { label: label, value: value, testId: testId, ...(onPress !== undefined && { onPress }) }, field)) : (_jsxs(GridCell, { children: [_jsx(Text, { variant: "small", testId: `${testId}-label`, children: label }), _jsx(Text, { testId: `${testId}-value`, children: value })] }, field));
+        return Metric !== undefined ? (_jsx(Metric, { label: label, value: value, testId: testId, ...(onPress !== undefined && { onPress }), ...(tiles && { tile: true }), ...(tone !== undefined && { tone }), ...(metric.icon !== undefined && { icon: metric.icon }) }, field)) : (_jsxs(GridCell, { children: [_jsx(Text, { variant: "small", testId: `${testId}-label`, children: label }), _jsx(Text, { testId: `${testId}-value`, children: value })] }, field));
     });
 }
 // Metrics are a dl band when the primitive exists; the old Grid stays as the fallback.
 export function renderMetricsBlock(model, metricItems, subtitle, lead) {
     const { screen, primitives } = model;
     const { MetricBand, Grid } = primitives;
-    return MetricBand !== undefined ? (_jsx(MetricBand, { testId: "kumiko-screen-projection-detail-metrics", subtitle: subtitle, ...(lead !== undefined && { lead }), children: metricItems })) : (_jsx(Grid, { columns: screen.metrics?.length ?? 1, testId: "kumiko-screen-projection-detail-metrics", children: metricItems }));
+    return MetricBand !== undefined ? (_jsx(MetricBand, { testId: "kumiko-screen-projection-detail-metrics", subtitle: subtitle, ...(lead !== undefined && { lead }), ...(screen.metricsStyle === "tiles" && { tiles: true }), children: metricItems })) : (_jsx(Grid, { columns: screen.metrics?.length ?? 1, testId: "kumiko-screen-projection-detail-metrics", children: metricItems }));
 }
 // The phone shell header clips a long status mid-word, so on phones the badge
 // sits in the body instead of the shell header slot.

package/dist/app/reference-link.d.ts

@@ -3,3 +3,7 @@ import type { CellLink } from "../headless/index.ts";
  *  navigation, the user may not open that screen, or no detail screen exists. */
 export type ReferenceLinkResolver = (refEntity: string, id: string) => CellLink | undefined;
 export declare function useReferenceLinkResolver(): ReferenceLinkResolver;
+/** Link to a screen named by its QN, or undefined when there is no navigation
+ *  or the user may not open that screen. */
+export type ScreenLinkResolver = (screenQn: string) => CellLink | undefined;
+export declare function useScreenLinkResolver(): ScreenLinkResolver;

package/dist/app/reference-link.js

@@ -2,6 +2,7 @@ import { useCallback } from "react";
 import { useUserRoles } from "../context/user-roles-context.js";
 import { useAppFeatures } from "./app-features-context.js";
 import { useOptionalNav } from "./nav.js";
+import { lastSegment } from "./qn.js";
 import { navigateWithReturnTo, useReturnHost } from "./return-to.js";
 import { navigateTargetAllows } from "./screen-access.js";
 export function useReferenceLinkResolver() {
@@ -30,3 +31,18 @@ export function useReferenceLinkResolver() {
         return { href, onPress: () => navigateWithReturnTo(nav, target, host) };
     }, [nav, appFeatures, userRoles, host]);
 }
+export function useScreenLinkResolver() {
+    const nav = useOptionalNav();
+    const appFeatures = useAppFeatures();
+    const userRoles = useUserRoles();
+    const host = useReturnHost();
+    return useCallback((screenQn) => {
+        const screenId = lastSegment(screenQn);
+        if (nav === undefined || screenId === "")
+            return undefined;
+        if (!navigateTargetAllows({ screen: screenId }, appFeatures, userRoles))
+            return undefined;
+        const target = { screenId };
+        return { href: nav.hrefFor(target), onPress: () => navigateWithReturnTo(nav, target, host) };
+    }, [nav, appFeatures, userRoles, host]);
+}

package/dist/app/use-projection-detail-data.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { rendererWarn } from "../dev-console.js";
 import { useQuery } from "../hooks/use-query.js";
 import { synthesizeProjectionDetailEntity, synthesizeProjectionDetailScreen, } from "./projection-detail-shim.js";
@@ -29,7 +29,8 @@ export function useProjectionDetailData(input) {
             : screen;
         return synthesizeProjectionDetailScreen(source);
     }, [screen, activeSection]);
-    const detailQuery = useQuery(screen.query, effectiveEntityId !== undefined ? { [idParam]: effectiveEntityId } : {});
+    const live = screen.live === true;
+    const detailQuery = useQuery(screen.query, effectiveEntityId !== undefined ? { [idParam]: effectiveEntityId } : {}, { live });
     // A writeForm section's handler creates a new record (see EditWriteFormSection's
     // doc) — both the outer record (header/metrics/other sections) and a sibling
     // relatedList section's own independently-fetched rows must reflect it. A
@@ -39,9 +40,23 @@ export function useProjectionDetailData(input) {
     // remount (a `key`) so unsaved input in the other writeForm sections and
     // the related lists' local state survive.
     const [reloadNonce, setReloadNonce] = useState(0);
+    // Live mode: every refetched record bumps the nonce below, a write included.
     const reloadDetail = useCallback(async () => {
         await refetchAfterWrite(detailQuery.refetch);
-        setReloadNonce((n) => n + 1);
-    }, [detailQuery.refetch]);
+        if (!live)
+            setReloadNonce((n) => n + 1);
+    }, [detailQuery.refetch, live]);
+    // A live refetch only reaches the record; the related lists hold their own rows.
+    const liveRecord = live ? (detailQuery.data ?? undefined) : undefined;
+    const shownLiveRecord = useRef(liveRecord);
+    useEffect(() => {
+        const previous = shownLiveRecord.current;
+        // skip: the shown record is unchanged, the related lists need no reload.
+        if (previous === liveRecord)
+            return;
+        shownLiveRecord.current = liveRecord;
+        if (previous !== undefined)
+            setReloadNonce((n) => n + 1);
+    }, [liveRecord]);
     return { activeSection, hasTabs, entity, detailScreen, detailQuery, reloadNonce, reloadDetail };
 }

package/dist/components/grid-cell-for-field.d.ts

@@ -6,6 +6,8 @@ export type GridCellForFieldProps = {
     readonly columns: number;
     readonly issues: readonly FieldIssue[] | undefined;
     readonly onChange: (value: unknown) => void;
+    /** Passed through to RenderField — see RenderFieldProps.onSuggest. */
+    readonly onSuggest?: (value: string) => void;
     readonly GridCell: ReturnType<typeof usePrimitives>["GridCell"];
     /** Passed through so Reference fields can build the correct
      *  lookup query QN (`<feature>:query:<refEntity>:list`). */
@@ -33,4 +35,4 @@ export type GridCellForFieldProps = {
     readonly sectionTitle?: string;
 };
 export declare function fieldCellWidth(field: EditFieldViewModel): FieldCellWidth;
-export declare function GridCellForField({ field, columns, issues, onChange, GridCell, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay, row, changed, flow, layout, accent, fillDisabled, sectionTitle, }: GridCellForFieldProps): ReactNode;
+export declare function GridCellForField({ field, columns, issues, onChange, onSuggest, GridCell, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay, row, changed, flow, layout, accent, fillDisabled, sectionTitle, }: GridCellForFieldProps): ReactNode;

package/dist/components/grid-cell-for-field.js

@@ -29,7 +29,7 @@ export function fieldCellWidth(field) {
         return "full";
     return FIELD_CELL_WIDTH_BY_TYPE[field.type] ?? "text";
 }
-export function GridCellForField({ field, columns, issues, onChange, GridCell, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay, row, changed, flow, layout, accent, fillDisabled, sectionTitle, }) {
+export function GridCellForField({ field, columns, issues, onChange, onSuggest, GridCell, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay, row, changed, flow, layout, accent, fillDisabled, sectionTitle, }) {
     // RenderField renders nothing for a hidden field, but the GridCell around it still claims the row.
     if (!field.visible)
         return null;
@@ -38,5 +38,5 @@ export function GridCellForField({ field, columns, issues, onChange, GridCell, f
         field.embeddedListCells !== undefined &&
         field.label === sectionTitle;
     const effectiveSpan = field.span !== undefined ? Math.min(field.span, columns) : 1;
-    return (_jsx(GridCell, { span: effectiveSpan, ...(flow === true && { width: fieldCellWidth(field) }), children: _jsx(RenderField, { field: field, ...(issues !== undefined && { issues }), onChange: onChange, featureName: featureName, ...(labelAppendix !== undefined && { labelAppendix }), ...(fieldAppendix !== undefined && { fieldAppendix }), ...(appendixPlacement !== undefined && { appendixPlacement }), ...(description !== undefined && { description }), ...(status !== undefined && { status }), allIssues: allIssues, valueDisplay: valueDisplay, row: row, ...(changed === true && { changed }), ...(layout !== undefined && { layout }), ...(accent === true && { accent }), ...(fillDisabled === true && { fillDisabled }), ...(hideLabel && { hideLabel }) }) }));
+    return (_jsx(GridCell, { span: effectiveSpan, ...(flow === true && { width: fieldCellWidth(field) }), children: _jsx(RenderField, { field: field, ...(issues !== undefined && { issues }), onChange: onChange, ...(onSuggest !== undefined && { onSuggest }), featureName: featureName, ...(labelAppendix !== undefined && { labelAppendix }), ...(fieldAppendix !== undefined && { fieldAppendix }), ...(appendixPlacement !== undefined && { appendixPlacement }), ...(description !== undefined && { description }), ...(status !== undefined && { status }), allIssues: allIssues, valueDisplay: valueDisplay, row: row, ...(changed === true && { changed }), ...(layout !== undefined && { layout }), ...(accent === true && { accent }), ...(fillDisabled === true && { fillDisabled }), ...(hideLabel && { hideLabel }) }) }));
 }

package/dist/components/query-options-select.d.ts

@@ -11,8 +11,9 @@ type QueryOptionsSelectProps = {
     readonly id: string;
     readonly hasError: boolean;
     readonly onChange: (value: unknown) => void;
+    readonly onSuggest?: (value: string) => void;
 };
-export declare function QueryOptionsSelect({ field, query, payload, row, id, hasError, onChange, }: QueryOptionsSelectProps): ReactNode;
+export declare function QueryOptionsSelect({ field, query, payload, row, id, hasError, onChange, onSuggest, }: QueryOptionsSelectProps): ReactNode;
 export declare function QueryOptionLabel({ query, payload, value, }: {
     readonly query: string;
     readonly payload: ResolvedOptionsQueryPayload;

package/dist/components/query-options-select.js

@@ -22,7 +22,7 @@ export function resolveOptionsQueryPayload(payload, row) {
 // Select whose options come from a query (SelectFieldDef.optionsQuery), so it
 // has to be a mounted component for useQuery. useQuery re-fetches on the
 // serialized payload, hence no payload memoization here.
-export function QueryOptionsSelect({ field, query, payload, row, id, hasError, onChange, }) {
+export function QueryOptionsSelect({ field, query, payload, row, id, hasError, onChange, onSuggest, }) {
     const { Input } = usePrimitives();
     const resolvedPayload = resolveOptionsQueryPayload(payload, row);
     const payloadKey = JSON.stringify(resolvedPayload);
@@ -41,8 +41,20 @@ export function QueryOptionsSelect({ field, query, payload, row, id, hasError, o
         const previousKey = settledPayloadKey.current;
         settledPayloadKey.current = payloadKey;
         const payloadChanged = previousKey !== null && previousKey !== payloadKey;
-        if (payloadChanged && current !== "" && !data.rows.some((row) => row.value === current)) {
-            onChange("");
+        const discarded = payloadChanged && current !== "" && !data.rows.some((row) => row.value === current);
+        const suggestion = onSuggest === undefined ? undefined : data.rows.find((row) => row.default === true);
+        if (payloadChanged) {
+            // The user's sibling edit caused this load, so the form is dirty anyway: a
+            // discarded value is replaced by the suggestion in one change.
+            if (current !== "" && !discarded)
+                return;
+            if (suggestion)
+                onChange(suggestion.value);
+            else if (discarded)
+                onChange("");
+        }
+        else if (current === "" && suggestion) {
+            onSuggest?.(suggestion.value);
         }
     }, [data]);
     // A stored value missing from the result (still loading, or dropped from the

package/dist/components/render-edit-field-grid.js

@@ -28,7 +28,9 @@ function createFieldCellRenderer(model, section, columns) {
         }), issues: snapshot.errors[field.field], onChange: (v) => {
             model.setFieldUntyped(field.field, v);
             clearErrorsAndValidate(field.field);
-        }, GridCell: GridCell, featureName: props.featureName, ...appendixCellProps(props, field.field), allIssues: snapshot.errors, valueDisplay: props.valueDisplay, row: snapshot.values, ...(disabled && { fillDisabled: true }), ...(props.hideSectionTitles !== true &&
+        }, ...(props.actionFormScreenQn !== undefined && {
+            onSuggest: (value) => form.controller.seedField(field.field, value),
+        }), GridCell: GridCell, featureName: props.featureName, ...appendixCellProps(props, field.field), allIssues: snapshot.errors, valueDisplay: props.valueDisplay, row: snapshot.values, ...(disabled && { fillDisabled: true }), ...(props.hideSectionTitles !== true &&
             section.title !== undefined && { sectionTitle: section.title }), ...(showsChangedMarker && field.field in snapshot.changes && { changed: true }) }, field.field));
 }
 export function renderFieldGrid(model, section, fields, columns, gridKey, columnsDeclared) {

package/dist/components/render-edit-layout.js

@@ -41,7 +41,7 @@ function buildFormHeadingProps(model) {
         ...(props.hideSectionTitles !== true &&
             !layout.titleInShell &&
             !titles.titleInSettingsHeader &&
-            !titles.recordTitleInHeaderRegion && { title: titles.formTitle }),
+            !titles.titleInHeaderRegion && { title: titles.formTitle }),
         ...(titles.formSubtitle !== undefined &&
             !titles.stepRail &&
             !titles.titleInSettingsHeader && { subtitle: titles.formSubtitle }),

package/dist/components/render-edit-titles.d.ts

@@ -8,7 +8,7 @@ export type TitleModel = {
     readonly formSubtitle: string | undefined;
     readonly titleInSettingsHeader: boolean;
     readonly usesFieldFlow: boolean;
-    readonly recordTitleInHeaderRegion: boolean;
+    readonly titleInHeaderRegion: boolean;
     readonly stepRail: boolean;
     readonly upNextSection: EditSectionViewModel | undefined;
     readonly sectionNavItems: readonly FormSectionNavItem[];

package/dist/components/render-edit-titles.js

@@ -83,12 +83,9 @@ export function deriveTitles(engine, layout, footer) {
         // floating as a heading above the band.
         titleInSettingsHeader: footer.isSettingsList && !layout.titleInShell,
         usesFieldFlow: layout.isScreenForm || state.insideDrawer,
-        // The caller's headerRegion already shows the record title in the shell page
-        // header, so the type title ("Release") above the form would repeat it.
-        recordTitleInHeaderRegion: headerRegion !== undefined &&
-            recordTitle !== undefined &&
-            PageHeader !== undefined &&
-            state.pageHeaderSlotAvailable,
+        // The caller's headerRegion fills the shell page header with the record title
+        // or, without one, the screen title, so a form title above the sections repeats it.
+        titleInHeaderRegion: headerRegion !== undefined && PageHeader !== undefined && state.pageHeaderSlotAvailable,
         stepRail: state.isWizard && layout.isScreenForm && StepBar !== undefined,
         upNextSection: screen.layout.wizard?.aside?.upNext === true ? filteredSections[currentStep + 1] : undefined,
         sectionNavItems: layout.isScreenForm && !state.isStepped

package/dist/components/render-field-control.d.ts

@@ -7,6 +7,7 @@ export type ControlContext = RenderInputArgs & {
     readonly allIssues: Readonly<Record<string, readonly FieldIssue[]>> | undefined;
     readonly changed: boolean | undefined;
     readonly fillDisabled: boolean | undefined;
+    readonly onSuggest?: (value: string) => void;
 };
 export declare function listPrintsOwnIssues(field: EditFieldViewModel): boolean;
 export declare function renderControl(ctx: ControlContext): ReactNode;

package/dist/components/render-field-control.js

@@ -42,11 +42,11 @@ const referenceRule = ({ field, id, hasError, onChange, Input, featureName, read
     return (_jsx(ReferenceInput, { field: field, id: id, hasError: hasError, onChange: onChange, Input: Input, featureName: featureName ?? "" }));
 };
 const selectQueryRule = (ctx) => {
-    const { field, id, hasError, onChange, readOnlyText } = ctx;
+    const { field, id, hasError, onChange, onSuggest, readOnlyText } = ctx;
     const source = field.selectOptionsQuery;
     if (field.type !== "select" || source === undefined || readOnlyText)
         return undefined;
-    return (_jsx(QueryOptionsSelect, { field: field, query: source.query, payload: source.payload, row: rowOf(ctx), id: id, hasError: hasError, onChange: onChange }));
+    return (_jsx(QueryOptionsSelect, { field: field, query: source.query, payload: source.payload, row: rowOf(ctx), id: id, hasError: hasError, onChange: onChange, ...(onSuggest !== undefined && { onSuggest }) }));
 };
 const selectAvailabilityRule = (ctx) => {
     const { field, id, hasError, onChange, readOnlyText } = ctx;

package/dist/components/render-field.d.ts

@@ -5,6 +5,9 @@ export type RenderFieldProps = {
     readonly field: EditFieldViewModel;
     readonly issues?: readonly FieldIssue[];
     readonly onChange: (val: unknown) => void;
+    /** Seeds an empty optionsQuery select with the query's default row as a baseline
+     *  value (not a change). Only set where that is wanted (actionForm). */
+    readonly onSuggest?: (value: string) => void;
     /** Relevant only for type:"reference": the feature name for the lookup
      *  query QN (`<feature>:query:<refEntity>:list`). Other field types
      *  ignore this prop. */
@@ -46,4 +49,4 @@ export type RenderFieldProps = {
     readonly hideLabel?: boolean;
 };
 export declare const AllFieldsRequiredProvider: import("react").Provider<boolean>;
-export declare function RenderField({ field, issues, onChange, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay, row, changed, layout, accent, fillDisabled, hideLabel, }: RenderFieldProps): ReactNode;
+export declare function RenderField({ field, issues, onChange, onSuggest, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay, row, changed, layout, accent, fillDisabled, hideLabel, }: RenderFieldProps): ReactNode;

package/dist/components/render-field.js

@@ -20,7 +20,7 @@ function fieldOptionalProps({ issues, printsIssues, labelAppendix, fieldAppendix
         ...(hideLabel === true && { hideLabel }),
     };
 }
-export function RenderField({ field, issues, onChange, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay = "form", row, changed, layout, accent, fillDisabled, hideLabel, }) {
+export function RenderField({ field, issues, onChange, onSuggest, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay = "form", row, changed, layout, accent, fillDisabled, hideLabel, }) {
     const { Field, Input, Banner, Text, JsonView } = usePrimitives();
     // The app locale is required for money/date inputs; otherwise they fall back
     // to navigator.language instead of the selected app language. RenderField is
@@ -43,6 +43,7 @@ export function RenderField({ field, issues, onChange, featureName, labelAppendi
         id,
         hasError: issues !== undefined && issues.length > 0,
         onChange,
+        ...(onSuggest !== undefined && { onSuggest }),
         Input,
         appLocale,
         Banner,

package/dist/components/use-render-list-columns.d.ts

@@ -1,6 +1,8 @@
 import type { EntityDefinition, EntityListScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import { type ScreenLinkResolver } from "../app/reference-link.ts";
 import type { ListColumnViewModel, ListViewModel, Translate } from "../headless/index.ts";
 import { type PublishedReferenceLookup } from "./render-list-reference-columns.ts";
+export declare function withScreenLinks(columns: readonly ListColumnViewModel[], screen: EntityListScreenDefinition, resolveScreenLink: ScreenLinkResolver): readonly ListColumnViewModel[];
 type RenderListColumnsInput = {
     readonly screen: EntityListScreenDefinition;
     readonly entity: Pick<EntityDefinition, "fields" | "derivedFields">;

package/dist/components/use-render-list-columns.js

@@ -1,7 +1,32 @@
+import { normalizeListColumn } from "@cosmicdrift/kumiko-framework/ui-types";
 import { useCallback, useMemo, useState } from "react";
-import { useReferenceLinkResolver } from "../app/reference-link.js";
+import { useReferenceLinkResolver, useScreenLinkResolver, } from "../app/reference-link.js";
 import { computeListViewModel } from "../headless/index.js";
 import { enrichReferenceColumns, selectReferenceColumns, } from "./render-list-reference-columns.js";
+// A column whose rows name their own target screen links each cell there.
+export function withScreenLinks(columns, screen, resolveScreenLink) {
+    const linkFields = new Map();
+    for (const spec of screen.columns) {
+        const normalized = normalizeListColumn(spec);
+        if (normalized.linkScreenField !== undefined) {
+            linkFields.set(normalized.field, normalized.linkScreenField);
+        }
+    }
+    if (linkFields.size === 0)
+        return columns;
+    return columns.map((col) => {
+        const linkScreenField = linkFields.get(col.field);
+        if (linkScreenField === undefined)
+            return col;
+        return {
+            ...col,
+            linkFor: (_value, row) => {
+                const screenQn = row?.[linkScreenField];
+                return typeof screenQn === "string" ? resolveScreenLink(screenQn) : undefined;
+            },
+        };
+    });
+}
 export function useRenderListColumns(input) {
     const { screen, entity, rows, featureName, translate } = input;
     const vm = useMemo(() => computeListViewModel({ screen, entity, rows, translate, featureName }), [screen, entity, rows, translate, featureName]);
@@ -25,14 +50,24 @@ export function useRenderListColumns(input) {
         });
     }, []);
     const resolveReferenceLink = useReferenceLinkResolver();
-    const enrichedColumns = useMemo(() => enrichReferenceColumns({
+    const resolveScreenLink = useScreenLinkResolver();
+    const enrichedColumns = useMemo(() => withScreenLinks(enrichReferenceColumns({
         columns: vm.columns,
         referenceColumns,
         referenceLookups,
         resolveReferenceLink,
         featureName,
         translate,
-    }), [vm.columns, referenceColumns, referenceLookups, resolveReferenceLink, featureName, translate]);
+    }), screen, resolveScreenLink), [
+        vm.columns,
+        referenceColumns,
+        referenceLookups,
+        resolveReferenceLink,
+        resolveScreenLink,
+        screen,
+        featureName,
+        translate,
+    ]);
     const enrichedVm = useMemo(() => ({
         ...vm,
         columns: enrichedColumns,

package/dist/headless/form/form-controller.js

@@ -224,6 +224,14 @@ export function createFormController(options) {
         };
         invalidate();
     }
+    function runSeedField(field, value) {
+        // skip: touched field keeps the user's input, a seed must not overwrite it
+        if (!Object.is(values[field], initial[field]))
+            return;
+        initial = { ...initial, [field]: value };
+        values = { ...values, [field]: value };
+        invalidate();
+    }
     // Stale-submit-safe rebase. Difference to runRebase: the baseline is
     // taken from the values that were actually SENT to the server, not
     // from `values` at the moment the server replied. If the user typed
@@ -304,6 +312,7 @@ export function createFormController(options) {
         },
         rebase: runRebase,
         rebaseFields: runRebaseFields,
+        seedField: runSeedField,
         setCtx(nextCtx) {
             // Cast back to TCtx: setCtx's public signature takes unknown so
             // callers don't need to plumb generics. If conditions depend on ctx

package/dist/headless/form/types.d.ts

@@ -34,6 +34,7 @@ export type FormController<TValues extends FormValues> = {
     reset(): void;
     rebase(): void;
     rebaseFields(fields: readonly string[]): void;
+    seedField(field: string, value: unknown): void;
     setCtx(ctx: unknown): void;
     submit<TData = unknown>(): Promise<SubmitResult<TData>>;
 };

package/dist/headless/format/index.d.ts

@@ -9,4 +9,4 @@ export { type HtmlValue, html, RawHtml, raw } from "./html-template.ts";
 export { currencyDecimals, formatMoney, resolveSafeMoneyLocale } from "./money.ts";
 export declare function applyFormatSpec(spec: {
     format: string;
-} & Record<string, unknown>, value: unknown, translate?: (key: string) => string): string;
+} & Record<string, unknown>, value: unknown, translate?: (key: string, params?: Readonly<Record<string, string | number>>) => string): string;

package/dist/headless/format/index.js

@@ -246,6 +246,28 @@ function formatEnumOptionCell(spec, value, translate) {
     // multiSelect-style columns hold an array of option values
     return Array.isArray(value) ? value.map(labelFor).join(", ") : labelFor(value);
 }
+function isRecordValue(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+// Only string and number params: money/date params need the dashboard formats.
+function textParams(params) {
+    if (!isRecordValue(params))
+        return undefined;
+    const out = {};
+    for (const [name, param] of Object.entries(params)) {
+        if (typeof param === "string" || typeof param === "number")
+            out[name] = param;
+    }
+    return out;
+}
+function formatI18nTextCell(_spec, value, translate) {
+    if (typeof value === "string")
+        return translate === undefined ? value : translate(value);
+    if (!isRecordValue(value) || typeof value["i18nKey"] !== "string")
+        return String(value);
+    const key = value["i18nKey"];
+    return translate === undefined ? key : translate(key, textParams(value["i18nParams"]));
+}
 // Thumbnails and file links are drawn by the web list cell; this is the
 // text fallback for every other surface.
 function formatFileCell(_spec, value) {
@@ -265,6 +287,7 @@ const CELL_FORMATTERS = {
     unit: formatUnitSpecCell,
     priority: formatPriorityCell,
     enumOption: formatEnumOptionCell,
+    i18nText: formatI18nTextCell,
     image: formatFileCell,
     file: formatFileCell,
     json: formatJsonCell,

package/dist/metric-types.d.ts

@@ -0,0 +1,29 @@
+import type { NavIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { DashboardStatTone } from "@cosmicdrift/kumiko-types/screen";
+import type { ReactNode } from "react";
+/** Compact label/value tile (record-detail metrics band). `testId` is the
+ *  tile's own id — the impl derives `${testId}-label`/`${testId}-value` for
+ *  the two rendered nodes, so a caller only ever needs to know the base id. */
+export type MetricProps = {
+    readonly label: string;
+    readonly value: string;
+    readonly testId?: string;
+    /** Click handler — set when the metric declares a `navigate` target
+     *  (see `MetricSpec`). Omitted for a plain, non-interactive metric. */
+    readonly onPress?: () => void;
+    /** Draw as a KPI tile (the dashboard StatCard) instead of a band entry. */
+    readonly tile?: boolean;
+    readonly tone?: DashboardStatTone;
+    readonly icon?: NavIconKey;
+};
+/** Band above the tabs of a record detail: optional subtitle line plus the
+ *  metrics as a definition list. `children` are `Metric` tiles. */
+export type MetricBandProps = {
+    /** Free-form block rendered unstyled as the first full-width row of the band. */
+    readonly lead?: ReactNode;
+    readonly subtitle?: ReactNode;
+    readonly children: ReactNode;
+    /** The children are KPI tiles, laid out as a tile grid instead of a definition list. */
+    readonly tiles?: boolean;
+    readonly testId?: string;
+};

package/dist/metric-types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives.d.ts

@@ -5,6 +5,7 @@ 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 { FieldIssue, ListColumnViewModel, ListRowViewModel, RuntimeRenderer } from "./headless/index.ts";
+import type { MetricBandProps, MetricProps } from "./metric-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
@@ -652,6 +653,7 @@ export declare function shouldRenderActionsIconOnly(actions: readonly {
 }[]): boolean;
 export type { BulkRowOutcome, DataTableBulk, DataTableBulkAction, } from "./data-table-bulk-types.ts";
 export type { DataTableDateRangeFacet, DataTableFacet, DataTableFacetChip, } from "./data-table-facet-types.ts";
+export type { MetricBandProps, MetricProps } from "./metric-types.ts";
 export type DataTableProps = {
     readonly columns: readonly ListColumnViewModel[];
     readonly rows: readonly ListRowViewModel[];
@@ -1340,17 +1342,6 @@ export type StatusBadgeProps = {
 };
 export declare function statusToneForOptionTone(tone: SelectOptionTone): StatusTone | undefined;
 export declare function statusToneForValue(value: string): StatusTone | undefined;
-/** Compact label/value tile (record-detail metrics band). `testId` is the
- *  tile's own id — the impl derives `${testId}-label`/`${testId}-value` for
- *  the two rendered nodes, so a caller only ever needs to know the base id. */
-export type MetricProps = {
-    readonly label: string;
-    readonly value: string;
-    readonly testId?: string;
-    /** Click handler — set when the metric declares a `navigate` target
-     *  (see `MetricSpec`). Omitted for a plain, non-interactive metric. */
-    readonly onPress?: () => void;
-};
 /** Structured JSON display (audit payload/metadata, job logs, unsupported
  *  jsonb/embedded field fallback). Takes the raw value, not a pre-stringified
  *  one — the implementation owns `JSON.stringify` (and must not throw on
@@ -1369,15 +1360,6 @@ export type FileValueListProps = {
     readonly previewOpenByDefault?: boolean;
     readonly testId?: string;
 };
-/** Band above the tabs of a record detail: optional subtitle line plus the
- *  metrics as a definition list. `children` are `Metric` tiles. */
-export type MetricBandProps = {
-    /** Free-form block rendered unstyled as the first full-width row of the band. */
-    readonly lead?: ReactNode;
-    readonly subtitle?: ReactNode;
-    readonly children: ReactNode;
-    readonly testId?: string;
-};
 /** Page title area rendered by the app shell's header instead of inside the
  *  screen: `title` replaces the last breadcrumb, `status` sits right after it,
  *  `actions` at the right edge. Renders nothing itself; without a shell slot

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

@@ -13,7 +13,7 @@ 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 { StatCard, StatStripCell } from "../widgets/stat.js";
+import { STAT_CARD_GRID_CLASSES, StatCard, StatStripCell, } from "../widgets/stat.js";
 import { EmptyState, LoadingState } from "../widgets/states.js";
 import { DAY_MS, HOUR_MS, PanelError, PanelShell, panelPayload, QueryPanel, useDashboardFormats, useDashboardQuery, useReportPanelLoaded, } from "./dashboard-shared.js";
 import { isRecord, resolveDashboardText } from "./dashboard-text.js";
@@ -107,7 +107,7 @@ export function StatGroupPanelBody({ panel, label, screenId, screenParams, trans
     if (label === undefined) {
         return (_jsx("div", { "data-testid": testId, className: "grid grid-cols-2 gap-y-2 rounded-lg border border-border bg-card py-1 lg:auto-cols-fr lg:grid-flow-col lg:divide-x lg:divide-border-row", children: panel.stats.map((stat) => (_jsx(StatPanelBody, { panel: stat, label: translate(stat.label), screenId: screenId, screenParams: screenParams, translate: translate, variant: "strip" }, stat.id))) }));
     }
-    return (_jsx(SectionCard, { title: label, ...(panel.subtitle !== undefined && { subtitle: translate(panel.subtitle) }), testId: testId, children: _jsx("section", { className: "grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3", children: panel.stats.map((stat) => (_jsx(StatPanelBody, { panel: stat, label: translate(stat.label), screenId: screenId, screenParams: screenParams, translate: translate, variant: "card" }, stat.id))) }) }));
+    return (_jsx(SectionCard, { title: label, ...(panel.subtitle !== undefined && { subtitle: translate(panel.subtitle) }), testId: testId, children: _jsx("section", { className: STAT_CARD_GRID_CLASSES, children: panel.stats.map((stat) => (_jsx(StatPanelBody, { panel: stat, label: translate(stat.label), screenId: screenId, screenParams: screenParams, translate: translate, variant: "card" }, stat.id))) }) }));
 }
 function markerKindColor(kind) {
     if (kind === undefined)

package/dist/web/layout/shell-header.js

@@ -19,7 +19,7 @@ import { HeaderOverflowMenuContext, headerOverflowMenuItemClass } from "./header
 import { buildNavRegistrySliceForApp, lastSegment } from "./nav-tree.js";
 import { usePageHeaderSlot } from "./page-header-slot.js";
 import { resolveDetailBreadcrumb, screenTitleKey, } from "./shell-breadcrumb.js";
-import { UNIFORM_BAR_CONTROLS_CLASSES } from "./uniform-bar-controls.js";
+import { SHELL_HEADER_CONTROLS_CLASSES } from "./uniform-bar-controls.js";
 export function ShellHeader({ schema, user, headerActions, }) {
     const nav = useNav();
     const t = useTranslation();
@@ -69,7 +69,7 @@ export function ShellHeader({ schema, user, headerActions, }) {
                                                     e.preventDefault();
                                                     nav.navigate({ screenId });
                                                 }, children: crumb.label })) : isLast ? (_jsx("h1", { "aria-current": "page", title: titleOverride ?? crumb.label, className: "truncate text-lg font-semibold text-foreground", children: titleOverride ?? crumb.label })) : (_jsx(BreadcrumbPage, { className: "whitespace-nowrap text-foreground-secondary", children: crumb.label })) })] }, screenId ?? crumb.label));
-                            }) }) })), _jsx("div", { ref: setStatusElement, "data-kumiko-layout": "page-header-status", className: cn("flex items-center gap-2 empty:hidden", compact ? "min-w-0 overflow-hidden" : "shrink-0") })] }), _jsxs("div", { className: cn("ml-auto flex items-center gap-2", compact ? "min-w-0 max-w-[60%]" : "min-w-0 max-w-[50%] shrink-0 sm:max-w-none"), children: [_jsx("div", { ref: setActionsElement, "data-kumiko-layout": "page-header-actions", className: cn(UNIFORM_BAR_CONTROLS_CLASSES, "flex min-w-0 items-center gap-2 empty:hidden [&_*]:min-w-0 [&_*]:max-w-full [&_button]:overflow-hidden [&_button]:whitespace-nowrap", compact && "overflow-hidden") }), !compact && headerActions !== undefined && (_jsx("div", { "data-kumiko-layout": "header-actions", className: "flex items-center gap-2", children: headerActions })), hasOverflow && _jsx(HeaderOverflow, { items: overflowItems, headerActions: headerActions })] })] }));
+                            }) }) })), _jsx("div", { ref: setStatusElement, "data-kumiko-layout": "page-header-status", className: cn("flex items-center gap-2 empty:hidden", compact ? "min-w-0 overflow-hidden" : "shrink-0") })] }), _jsxs("div", { className: cn("ml-auto flex items-center gap-2", compact ? "min-w-0 max-w-[60%]" : "min-w-0 max-w-[50%] shrink-0 sm:max-w-none"), children: [_jsx("div", { ref: setActionsElement, "data-kumiko-layout": "page-header-actions", className: cn(SHELL_HEADER_CONTROLS_CLASSES, "flex min-w-0 items-center gap-2 empty:hidden [&_*]:min-w-0 [&_*]:max-w-full [&_button]:overflow-hidden [&_button]:whitespace-nowrap", compact && "overflow-hidden") }), !compact && headerActions !== undefined && (_jsx("div", { "data-kumiko-layout": "header-actions", className: "flex items-center gap-2", children: headerActions })), hasOverflow && _jsx(HeaderOverflow, { items: overflowItems, headerActions: headerActions })] })] }));
 }
 // A hand-rolled menu instead of Radix DropdownMenu: app headerActions are opaque
 // nodes with their own popovers, and the panel stays mounted while closed so their

package/dist/web/layout/uniform-bar-controls.d.ts

@@ -1 +1,2 @@
 export declare const UNIFORM_BAR_CONTROLS_CLASSES = "[&_[data-slot=button]:not([data-size^=icon])]:h-9 [&_[data-slot=input]]:h-9";
+export declare const SHELL_HEADER_CONTROLS_CLASSES = "[&_[data-slot=button]:not([data-size^=icon])]:h-8 [&_[data-slot=input]]:h-8";

package/dist/web/layout/uniform-bar-controls.js

@@ -2,3 +2,6 @@
 // primitive asked for: the descendant selector outranks the button's own
 // size utilities. Icon-only buttons keep their square size.
 export const UNIFORM_BAR_CONTROLS_CLASSES = "[&_[data-slot=button]:not([data-size^=icon])]:h-9 [&_[data-slot=input]]:h-9";
+// The shell header's own controls (workspace and tenant switcher, language, theme) are h-8,
+// so screen actions portalled next to them get h-8 too instead of the toolbar's h-9.
+export const SHELL_HEADER_CONTROLS_CLASSES = "[&_[data-slot=button]:not([data-size^=icon])]:h-8 [&_[data-slot=input]]:h-8";

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

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SELECT_OPTION_TONES } from "@cosmicdrift/kumiko-types/fields";
 import { PII_ERASED_SENTINEL } from "@cosmicdrift/kumiko-types/kms-adapter-types";
 import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
 import { Check } from "lucide-react";
@@ -217,6 +218,22 @@ function selectPill(value, optionLabels, optionTones, locale, RegisteredStatusBa
     // dashboard-01 pattern: outline badge + muted instead of a filled secondary.
     return (_jsx(Badge, { variant: "outline", className: "px-1.5 text-muted-foreground", children: label }));
 }
+function isSelectOptionTone(value) {
+    return SELECT_OPTION_TONES.some((tone) => tone === value);
+}
+// enumOption's `tones` arrive with the untyped spec, so each entry is checked here.
+function enumOptionTones(spec) {
+    const tones = spec["tones"];
+    if (spec["format"] !== "enumOption" || typeof tones !== "object" || tones === null) {
+        return undefined;
+    }
+    const out = {};
+    for (const [option, tone] of Object.entries(tones)) {
+        if (isSelectOptionTone(tone))
+            out[option] = tone;
+    }
+    return out;
+}
 // A multi reference may list the same id twice; the occurrence count keeps React keys unique.
 function uniqueLinkItemKeys(items) {
     const seen = new Map();
@@ -303,7 +320,12 @@ export function DataTableCell({ value, row, field, type, renderer, optionLabels,
     }
     if (typeof renderer === "object" && renderer !== null && "format" in renderer) {
         const spec = renderer;
-        return applyFormatSpec({ ...spec, locale: spec.locale ?? locale }, value, translate);
+        const text = applyFormatSpec({ ...spec, locale: spec.locale ?? locale }, value, translate);
+        const tones = enumOptionTones(spec);
+        if (tones !== undefined && typeof value === "string") {
+            return selectPill(value, { [value]: text }, tones, locale, RegisteredStatusBadge);
+        }
+        return link === undefined ? text : _jsx(CellTextLink, { link: link, children: text });
     }
     if (typeof renderer === "function") {
         if (linkItems !== undefined) {
@@ -342,5 +364,6 @@ export function DataTableCell({ value, row, field, type, renderer, optionLabels,
     if (type === "multiSelect" && Array.isArray(value) && value.length > 0) {
         return (_jsx("span", { className: "flex flex-wrap gap-1", children: value.map((entry) => (_jsx(Fragment, { children: selectPill(entry, optionLabels, optionTones, locale, RegisteredStatusBadge) }, String(entry)))) }));
     }
-    return defaultCellRender(value, type, optionLabels, locale, field, grouping);
+    const text = defaultCellRender(value, type, optionLabels, locale, field, grouping);
+    return link === undefined ? text : _jsx(CellTextLink, { link: link, children: text });
 }

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

@@ -33,5 +33,5 @@ export function DefaultDataTable(props) {
     // (that lives in the shell's breadcrumb). The toolbar is NOT sticky: lists
     // typically scroll with the page container, not internally. Sticky would
     // compete with the topbar.
-    return (_jsxs("div", { className: wrapperClassName(model), children: [hasToolbar && renderToolbar(model, facetCluster), renderToolbarDescription(model, hasToolbar), renderTableContent(model)] }));
+    return (_jsxs("div", { className: wrapperClassName(model), children: [!model.fillsHeight && renderToolbarDescription(model, hasToolbar), hasToolbar && renderToolbar(model, facetCluster), model.fillsHeight && renderToolbarDescription(model, hasToolbar), renderTableContent(model)] }));
 }

package/dist/web/primitives/metric.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
 import type { MetricBandProps, MetricProps } from "../../index.ts";
 export declare const InsideScreenFormColumnContext: import("react").Context<boolean>;
-export declare function DefaultMetricBand({ lead, subtitle, children, testId, }: MetricBandProps): ReactNode;
-export declare function DefaultMetric({ label, value, testId, onPress }: MetricProps): ReactNode;
+export declare function DefaultMetricBand({ lead, subtitle, children, testId, tiles, }: MetricBandProps): ReactNode;
+export declare function DefaultMetric(props: MetricProps): ReactNode;

package/dist/web/primitives/metric.js

@@ -1,18 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
+import { Icon } from "../icons.js";
 import { cn } from "../lib/cn.js";
+import { STAT_CARD_GRID_CLASSES, StatCard } from "../widgets/stat.js";
 const InsideMetricBandContext = createContext(false);
 // The screen-form column already insets and spaces its children; a band in its
 // header region must not add its own padding on top. DefaultCard resets this
 // to false because a card body is a different inset surface.
 export const InsideScreenFormColumnContext = createContext(false);
-// Column counts follow the board: 2 below md, 3 below lg, 5 from lg.
-export function DefaultMetricBand({ lead, subtitle, children, testId, }) {
+// Band column counts follow the board: 2 below md, 3 below lg, 5 from lg.
+export function DefaultMetricBand({ lead, subtitle, children, testId, tiles, }) {
     const insideScreenFormColumn = useContext(InsideScreenFormColumnContext);
-    return (_jsxs("div", { className: cn("flex shrink-0 flex-col gap-3", !insideScreenFormColumn && "px-6 pb-4 pt-3.5"), "data-testid": testId, children: [lead !== undefined && _jsx("div", { "data-kumiko-layout": "metric-band-lead", children: lead }), subtitle !== undefined && (_jsx("div", { className: "flex flex-wrap items-center gap-x-2 text-[13px] text-foreground-secondary [&_a]:text-primary", children: subtitle })), _jsx(InsideMetricBandContext.Provider, { value: true, children: _jsx("dl", { className: "m-0 grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5", children: children }) })] }));
+    return (_jsxs("div", { className: cn("flex shrink-0 flex-col gap-3", !insideScreenFormColumn && "px-6 pb-4 pt-3.5"), "data-testid": testId, children: [lead !== undefined && _jsx("div", { "data-kumiko-layout": "metric-band-lead", children: lead }), subtitle !== undefined && (_jsx("div", { className: "flex flex-wrap items-center gap-x-2 text-[13px] text-foreground-secondary [&_a]:text-primary", children: subtitle })), tiles === true ? (_jsx("div", { className: STAT_CARD_GRID_CLASSES, children: children })) : (_jsx(InsideMetricBandContext.Provider, { value: true, children: _jsx("dl", { className: "m-0 grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5", children: children }) }))] }));
 }
-export function DefaultMetric({ label, value, testId, onPress }) {
+function MetricTile({ label, value, testId, onPress, tone, icon }) {
+    const card = (_jsx(StatCard, { label: label, value: value, ...(icon !== undefined && { icon: _jsx(Icon, { name: icon, className: "size-4" }) }), ...(tone !== undefined && { tone }), ...(testId !== undefined && { testId }) }));
+    return onPress !== undefined ? (_jsx("button", { type: "button", className: "text-left", onClick: onPress, children: card })) : (card);
+}
+export function DefaultMetric(props) {
     const insideBand = useContext(InsideMetricBandContext);
+    if (props.tile === true)
+        return _jsx(MetricTile, { ...props });
+    const { label, value, testId, onPress } = props;
     const item = (_jsxs("div", { "data-testid": testId, className: cn("flex min-w-0 flex-col gap-0.5", onPress !== undefined && "cursor-pointer"), ...(onPress !== undefined && { onClick: onPress }), children: [_jsx("dt", { className: "text-xs text-muted-foreground", "data-testid": testId !== undefined ? `${testId}-label` : undefined, children: label }), _jsx("dd", { className: "m-0 text-base font-medium tabular-nums text-foreground", "data-testid": testId !== undefined ? `${testId}-value` : undefined, children: onPress !== undefined ? (_jsx("button", { type: "button", className: "text-left hover:underline", children: value })) : (value) })] }));
     return insideBand ? item : _jsx("dl", { className: "m-0", children: item });
 }

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

@@ -1,6 +1,7 @@
 import type { DashboardStatTone } from "@cosmicdrift/kumiko-types/screen";
 import type { ReactNode } from "react";
 export type StatTone = DashboardStatTone;
+export declare const STAT_CARD_GRID_CLASSES = "grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3";
 export type StatDelta = {
     readonly value: string;
     readonly direction: "up" | "down";

package/dist/web/widgets/stat.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePrimitives } from "../../index.js";
 import { cn } from "../lib/cn.js";
+// One grid for every row of StatCards (dashboard stat groups, detail metric tiles), so the
+// cards fill the row at any count instead of leaving fixed empty columns.
+export const STAT_CARD_GRID_CLASSES = "grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3";
 const TONE_CHIP = {
     default: "bg-muted text-foreground",
     positive: "bg-primary/10 text-primary",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.390.1",
+  "version": "0.391.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.390.1",
-    "@cosmicdrift/kumiko-types": "0.390.1",
+    "@cosmicdrift/kumiko-framework": "0.391.0",
+    "@cosmicdrift/kumiko-types": "0.391.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -92,8 +92,8 @@
     }
   },
   "devDependencies": {
-    "@cosmicdrift/kumiko-locale-de": "0.390.1",
-    "@cosmicdrift/kumiko-testing": "0.390.1",
+    "@cosmicdrift/kumiko-locale-de": "0.391.0",
+    "@cosmicdrift/kumiko-testing": "0.391.0",
     "@tailwindcss/cli": "^4.3.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

package/src/changes.json

@@ -1,4 +1,22 @@
 [
+  {
+    "version": "0.391.0",
+    "type": "improvement",
+    "title": "Translated text cells, toned status pills, screen links in rows and live detail screens",
+    "detail": "An i18nText cell renders the text in the user's language. An enumOption column with tones draws the translated label as a status pill. A column with linkScreenField links the cell to the screen the row names, but only when the user may open that screen. A projectionDetail with live: true refetches the record and its relatedList sections on entity events. With metricsStyle \"tiles\" its metrics render as the dashboard KPI tiles (StatCard), the icon chip colored by the metric's tone; like on dashboards a value of 0 keeps the neutral tone."
+  },
+  {
+    "version": "0.391.0",
+    "type": "fix",
+    "title": "No repeated screen title on detail screens, header actions as high as the header controls, embedded table description first",
+    "detail": "A projectionDetail without a record title no longer repeats the screen title above its sections when the shell header already shows it. Screen actions in the shell header are now as high as the header's own controls (h-8) instead of the toolbar height. An embedded table (one that does not fill the screen height) shows its description above its toolbar, right under the section title."
+  },
+  {
+    "version": "0.391.0",
+    "type": "improvement",
+    "title": "actionForm optionsQuery selects seed the row marked default",
+    "detail": "A row of an optionsQuery result can carry default: true. In an actionForm the first such row fills an empty field as a baseline value, like a prefill, so the form stays unchanged and leaving it asks nothing; set submitPrefilled to submit the suggestion unchanged. When a sibling field changes the payload and the old value drops out of the new rows, the new default replaces it as a normal change. configEdit never pre-selects, and a set value is never replaced."
+  },
   {
     "version": "0.390.0",
     "type": "fix",