@cosmicdrift/kumiko-renderer 0.231.0 → 0.233.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.231.0",
+  "version": "0.233.0",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -15,8 +15,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.231.0",
-    "@cosmicdrift/kumiko-headless": "0.231.0",
+    "@cosmicdrift/kumiko-framework": "0.233.0",
+    "@cosmicdrift/kumiko-headless": "0.233.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
@@ -25,7 +25,7 @@
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "jsdom": "^29.1.1",
-    "@cosmicdrift/kumiko-locale-de": "0.231.0"
+    "@cosmicdrift/kumiko-locale-de": "0.233.0"
   },
   "repository": {
     "type": "git",

package/src/app/__tests__/entity-list-row-action-entity-target.test.tsx

@@ -292,10 +292,13 @@ const TestButton: ComponentType<ButtonProps> = ({ children, onClick, testId }) =
   </button>
 );
 
-const FormWithActions: ComponentType<FormProps> = ({ children, actions }) => (
+const FormWithActions: ComponentType<FormProps> = ({ children, actions, secondaryActions }) => (
   <>
     <div data-testid="form-body">{children}</div>
-    <div data-testid="form-actions">{actions}</div>
+    <div data-testid="form-actions">
+      {secondaryActions}
+      {actions}
+    </div>
   </>
 );
 

package/src/app/__tests__/projection-detail-actions.test.tsx

@@ -43,14 +43,18 @@ const TestButton: ComponentType<ButtonProps> = ({ children, onClick, testId }) =
   </button>
 );
 
-// Form's `actions` slot carries the header buttons under test — passChildren
-// alone would drop it. Wrapped in distinct testid'd containers so a test can
-// assert a banner rendered as a Form CHILD (formError/actionError region)
-// rather than inside the actions row — the review finding this proves.
-const FormWithActions: ComponentType<FormProps> = ({ children, actions }) => (
+// Form's `actions`/`secondaryActions` slots carry the header buttons under
+// test — passChildren alone would drop them. Wrapped in distinct testid'd
+// containers so a test can assert a banner rendered as a Form CHILD
+// (formError/actionError region) rather than inside the actions row — the
+// review finding this proves.
+const FormWithActions: ComponentType<FormProps> = ({ children, actions, secondaryActions }) => (
   <>
     <div data-testid="form-body">{children}</div>
-    <div data-testid="form-actions">{actions}</div>
+    <div data-testid="form-actions">
+      {secondaryActions}
+      {actions}
+    </div>
   </>
 );
 

package/src/components/__tests__/render-edit-submit-actions.test.tsx

@@ -44,8 +44,9 @@ const testButton: ComponentType<{
 const testForm: ComponentType<{
   children?: ReactNode;
   actions?: ReactNode;
+  secondaryActions?: ReactNode;
   onSubmit?: () => void;
-}> = ({ children, actions, onSubmit }) => (
+}> = ({ children, actions, secondaryActions, onSubmit }) => (
   <form
     onSubmit={(e) => {
       e.preventDefault();
@@ -53,6 +54,7 @@ const testForm: ComponentType<{
     }}
   >
     {children}
+    {secondaryActions}
     {actions}
   </form>
 );

package/src/components/__tests__/render-field-number-unit.test.tsx

@@ -0,0 +1,191 @@
+// Editable number-field unit-of-measure suffix (static or sibling-field
+// reference). Complements render-field-unit-format.test.tsx, which only
+// covers the pre-existing read-only `format: "unit"` FieldRenderer path —
+// this feature is display-only decoration on the editable Input widget,
+// never a value conversion.
+
+import { describe, expect, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { computeEditViewModel, type EditFieldViewModel } from "@cosmicdrift/kumiko-headless";
+import { render } from "@testing-library/react";
+import type { ComponentType, ReactNode } from "react";
+import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
+import { type CorePrimitives, type InputProps, PrimitivesProvider } from "../../primitives";
+import { RenderField } from "../render-field";
+
+let captured: InputProps | undefined;
+const captureInput: ComponentType<InputProps> = (props) => {
+  captured = props;
+  return null;
+};
+const noop = (): ReactNode => null;
+const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
+
+const testPrimitives: CorePrimitives = {
+  Button: noop,
+  Banner: noop,
+  Field: passChildren,
+  Input: captureInput,
+  DataTable: noop,
+  Form: noop,
+  Section: noop,
+  Card: noop,
+  Grid: noop,
+  GridCell: noop,
+  Text: noop,
+  Heading: noop,
+  Dialog: noop,
+  Modal: noop,
+  Lightbox: noop,
+  ConfigSourceBadge: noop,
+  ConfigCascadeView: noop,
+  Link: noop,
+};
+
+function buildEntity(
+  mileageUnit: string | { readonly field: string } | undefined,
+): EntityDefinition {
+  return {
+    fields: {
+      mileage: {
+        type: "number",
+        required: false,
+        ...(mileageUnit !== undefined && { unit: mileageUnit }),
+      },
+      mileageUnit: { type: "text", required: false },
+    },
+  } as EntityDefinition;
+}
+
+function buildScreen(): EntityEditScreenDefinition {
+  return {
+    id: "vehicle-edit",
+    type: "entityEdit",
+    entity: "vehicle",
+    layout: { sections: [{ columns: 1, fields: ["mileage", "mileageUnit"] }] },
+  } as EntityEditScreenDefinition;
+}
+
+function mileageField(
+  entity: EntityDefinition,
+  values: Record<string, unknown>,
+): EditFieldViewModel {
+  const vm = computeEditViewModel({
+    screen: buildScreen(),
+    entity,
+    values,
+    translate: (key) => key,
+    featureName: "fleet",
+  });
+  const section = vm.sections[0];
+  if (section === undefined || section.kind !== "fields") {
+    throw new Error("expected a fields section");
+  }
+  const field = section.fields.find((f) => f.field === "mileage");
+  if (field === undefined) throw new Error("expected a mileage field");
+  return field;
+}
+
+function currentInput(): InputProps {
+  if (captured === undefined) throw new Error("expected an Input to be captured");
+  return captured;
+}
+
+function renderMileageField(
+  entity: EntityDefinition,
+  values: Record<string, unknown>,
+  row?: Record<string, unknown>,
+): InputProps {
+  captured = undefined;
+  render(
+    <LocaleProvider resolver={createStaticLocaleResolver({ locale: "en-US" })}>
+      <PrimitivesProvider value={testPrimitives}>
+        <RenderField
+          field={mileageField(entity, values)}
+          onChange={() => {}}
+          {...(row !== undefined && { row })}
+        />
+      </PrimitivesProvider>
+    </LocaleProvider>,
+  );
+  if (captured === undefined) throw new Error("mileage field did not render an Input");
+  return captured;
+}
+
+describe("RenderField — editable number unit suffix", () => {
+  test("static unit resolves onto Input.unit, value stays untouched", () => {
+    const field = renderMileageField(buildEntity("km"), { mileage: 58 });
+    expect(field.kind).toBe("number");
+    if (field.kind !== "number") return;
+    expect(field.unit).toBe("km");
+    expect(field.value).toBe(58);
+  });
+
+  test("no unit configured: Input.unit is undefined", () => {
+    const field = renderMileageField(buildEntity(undefined), { mileage: 58 });
+    expect(field.kind).toBe("number");
+    if (field.kind !== "number") return;
+    expect(field.unit).toBeUndefined();
+  });
+
+  test("sibling-field unit resolves from the live row and updates when the sibling changes", () => {
+    const entity = buildEntity({ field: "mileageUnit" });
+    captured = undefined;
+    const { rerender } = render(
+      <LocaleProvider resolver={createStaticLocaleResolver({ locale: "en-US" })}>
+        <PrimitivesProvider value={testPrimitives}>
+          <RenderField
+            field={mileageField(entity, { mileage: 58, mileageUnit: "mi" })}
+            onChange={() => {}}
+            row={{ mileage: 58, mileageUnit: "mi" }}
+          />
+        </PrimitivesProvider>
+      </LocaleProvider>,
+    );
+    const first = currentInput();
+    if (first.kind !== "number") throw new Error("expected a number Input");
+    expect(first.unit).toBe("mi");
+
+    captured = undefined;
+    rerender(
+      <LocaleProvider resolver={createStaticLocaleResolver({ locale: "en-US" })}>
+        <PrimitivesProvider value={testPrimitives}>
+          <RenderField
+            field={mileageField(entity, { mileage: 58, mileageUnit: "km" })}
+            onChange={() => {}}
+            row={{ mileage: 58, mileageUnit: "km" }}
+          />
+        </PrimitivesProvider>
+      </LocaleProvider>,
+    );
+    const second = currentInput();
+    if (second.kind !== "number") throw new Error("expected a number Input");
+    expect(second.unit).toBe("km");
+  });
+
+  test("missing sibling field: no suffix, no crash, no guessed default", () => {
+    const entity = buildEntity({ field: "mileageUnit" });
+    const field = renderMileageField(entity, { mileage: 58 }, { mileage: 58 });
+    expect(field.kind).toBe("number");
+    if (field.kind !== "number") return;
+    expect(field.unit).toBeUndefined();
+  });
+
+  test("empty-string sibling value: no suffix, no guessed default", () => {
+    const entity = buildEntity({ field: "mileageUnit" });
+    const field = renderMileageField(
+      entity,
+      { mileage: 58, mileageUnit: "" },
+      {
+        mileage: 58,
+        mileageUnit: "",
+      },
+    );
+    expect(field.kind).toBe("number");
+    if (field.kind !== "number") return;
+    expect(field.unit).toBeUndefined();
+  });
+});

package/src/components/render-edit.tsx

@@ -914,25 +914,33 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
   }
   handleSubmitRef.current = handleSubmit;
 
-  // Sticky-top Action-Bar: Delete (links, destructive) + Cancel +
-  // Save. Delete sitzt links abgesetzt damit die Click-Distanz zu
-  // Save is large; red styling + confirm dialog are enough protection
-  // gegen Fehlklicks. Save bleibt rechts (primary affordance).
-  const formActions = (
+  // Two groups — wizard navigation on the right/top, record actions on the
+  // left/below; destructive action sits outermost, farthest from the target
+  // action.
+  const hasSecondaryFormActions =
+    onDelete !== undefined ||
+    onCopyLink !== undefined ||
+    (actions !== undefined && actions.length > 0) ||
+    onCancel !== undefined;
+  const secondaryFormActions = (
     <>
-      {actions?.map((action) => (
-        <RenderEditActionButton
-          key={action.id}
-          action={action}
-          Button={Button}
-          Dialog={Dialog}
-          onError={setActionError}
-        />
-      ))}
+      {onDelete !== undefined && (
+        <Button
+          type="button"
+          variant="danger-ghost"
+          icon="trash"
+          testId="render-edit-delete"
+          disabled={disabled}
+          onClick={() => setConfirmDeleteOpen(true)}
+        >
+          {translate("kumiko.actions.delete")}
+        </Button>
+      )}
       {onCopyLink !== undefined && (
         <Button
           type="button"
-          variant="secondary"
+          variant="link"
+          icon={linkCopied ? "check" : "link"}
           testId="render-edit-copy-link"
           onClick={async () => {
             await onCopyLink();
@@ -942,31 +950,35 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
           {translate(linkCopied ? "kumiko.actions.copyLinkCopied" : "kumiko.actions.copyLink")}
         </Button>
       )}
-      {onDelete !== undefined && (
-        <Button
-          type="button"
-          variant="danger"
-          testId="render-edit-delete"
-          disabled={disabled}
-          onClick={() => setConfirmDeleteOpen(true)}
-        >
-          {translate("kumiko.actions.delete")}
-        </Button>
-      )}
+      {actions?.map((action) => (
+        <RenderEditActionButton
+          key={action.id}
+          action={action}
+          Button={Button}
+          Dialog={Dialog}
+          onError={setActionError}
+        />
+      ))}
       {onCancel !== undefined && (
         <Button
           type="button"
-          variant="secondary"
+          variant="link"
+          icon="x"
           onClick={() => onCancel()}
           testId="render-edit-cancel"
         >
           {translate("kumiko.actions.cancel")}
         </Button>
       )}
+    </>
+  );
+  const formActions = (
+    <>
       {isWizard && currentStep > 0 && (
         <Button
           type="button"
           variant="secondary"
+          icon="arrow-left"
           onClick={handleWizardBack}
           testId="render-edit-wizard-back"
         >
@@ -974,7 +986,12 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
         </Button>
       )}
       {isWizard && !isLastWizardStep && (
-        <Button type="submit" variant="primary" testId="render-edit-wizard-next">
+        <Button
+          type="submit"
+          variant="primary"
+          iconEnd="arrow-right"
+          testId="render-edit-wizard-next"
+        >
           {translate("kumiko.actions.next")}
         </Button>
       )}
@@ -984,6 +1001,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
           disabled={(snapshot.isUnchanged && !extensionDirty) || isSubmitting || disabled}
           loading={isSubmitting}
           variant="primary"
+          icon="check"
           testId="render-edit-submit"
         >
           {translate(submitLabel ?? (isWizard ? "kumiko.actions.finish" : "kumiko.actions.save"))}
@@ -1022,6 +1040,8 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
         {...(hideSectionTitles !== true &&
           formSubtitle !== undefined && { subtitle: formSubtitle })}
         {...(hideActions !== true && { actions: formActions })}
+        {...(hideActions !== true &&
+          hasSecondaryFormActions && { secondaryActions: secondaryFormActions })}
         testId="render-edit-form"
         stickyActions={isWizard}
         {...(screen.layout.width !== undefined && { width: screen.layout.width })}

package/src/components/render-field.tsx

@@ -61,11 +61,12 @@ export type RenderFieldProps = {
    *  `field.readOnly` field as plain text instead (projectionDetail's read
    *  view, fw#2245); editable fields are untouched by this prop either way. */
   readonly valueDisplay?: "form" | "text";
-  /** Current form values, keyed by field name — only consulted when
+  /** Current form values, keyed by field name. Consulted when
    *  `field.renderer` resolves to a `{ react: { __component } }` registry
-   *  component, passed through as `ColumnRendererProps.row` (same contract
-   *  as list-column renderers, fw#2245). Omitted → falls back to a
-   *  single-key `{ [field.field]: field.value }` row. */
+   *  component (passed through as `ColumnRendererProps.row`, same contract
+   *  as list-column renderers, fw#2245), and to resolve a `type: "number"`
+   *  field's sibling-field `unit`. Omitted → falls back to a single-key
+   *  `{ [field.field]: field.value }` row. */
   readonly row?: Readonly<Record<string, unknown>>;
 };
 
@@ -134,7 +135,7 @@ export function RenderField({
     ) : readOnlyText && !isComplexFieldType(field.type) ? (
       <Text testId={`field-value-${field.field}`}>{readOnlyDisplayText(field, appLocale)}</Text>
     ) : (
-      renderInput({ field, id, hasError, onChange, Input, appLocale, Banner, Text, t })
+      renderInput({ field, id, hasError, onChange, Input, appLocale, Banner, Text, t, row })
     );
 
   return (
@@ -449,6 +450,7 @@ function renderInput({
   Banner,
   Text,
   t,
+  row,
 }: {
   readonly field: EditFieldViewModel;
   readonly id: string;
@@ -459,6 +461,7 @@ function renderInput({
   readonly Banner: ReturnType<typeof usePrimitives>["Banner"];
   readonly Text: ReturnType<typeof usePrimitives>["Text"];
   readonly t: ReturnType<typeof useTranslation>;
+  readonly row?: Readonly<Record<string, unknown>>;
 }): ReactNode {
   const common = {
     id,
@@ -474,7 +477,8 @@ function renderInput({
     // already emits `number | undefined`, so no extra coercion is needed
     // beyond what "number" already does (#1925).
     case "number":
-    case "bigInt":
+    case "bigInt": {
+      const unit = resolveNumberUnit(field.unit, row);
       return (
         <Input
           kind="number"
@@ -482,8 +486,10 @@ function renderInput({
           value={numberValue(field.value)}
           onChange={(v) => onChange(v)}
           {...(field.icon !== undefined && { icon: field.icon })}
+          {...(unit !== undefined && { unit })}
         />
       );
+    }
     case "decimal":
       // step="any" disables the native stepMismatch constraint — without it
       // <input type="number"> defaults to step=1 and blocks form submit on
@@ -721,6 +727,18 @@ function resolveMoneyCurrency(value: unknown, fieldCurrency: string | undefined)
   return fieldCurrency ?? "EUR";
 }
 
+// Static unit → used as-is. Sibling-field reference → read the live row
+// value; missing/empty/non-string sibling means no suffix, never a guess.
+function resolveNumberUnit(
+  unit: string | { readonly field: string } | undefined,
+  row: Readonly<Record<string, unknown>> | undefined,
+): string | undefined {
+  if (unit === undefined) return undefined;
+  if (typeof unit === "string") return unit;
+  const sibling = row?.[unit.field];
+  return typeof sibling === "string" && sibling.length > 0 ? sibling : undefined;
+}
+
 function moneyMinorValue(v: unknown, currency: string): number | "" {
   if (v === undefined || v === null || v === "") return "";
   if (typeof v === "number") return Math.round(v * 10 ** currencyDecimals(currency));

package/src/i18n-defaults.ts

@@ -62,6 +62,8 @@ export const kumikoDefaultTranslations: TranslationsByLocale = {
     "kumiko.list.empty.hint": "Create the first one to get started.",
     "kumiko.list.no-entries": "No entries.",
     "kumiko.list.end-of-list": "— End of list —",
+    "kumiko.list.sort.label": "Sort",
+    "kumiko.list.sort.unsorted": "Unsorted",
 
     "kumiko.pager.status": "{from}–{to} of {total}",
     "kumiko.pager.previousPage": "Previous page",

package/src/primitives.tsx

@@ -35,7 +35,7 @@ import type {
   ConfigScope,
   ConfigValueSource,
 } from "@cosmicdrift/kumiko-framework/engine";
-import type { FieldIconKey, FormWidth } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { FieldIconKey, FormWidth, NavIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
 import type {
   FieldIssue,
   ListColumnViewModel,
@@ -67,11 +67,12 @@ export type ButtonProps = {
    *  setzen wenn die Action blockiert bis das Loading abgeschlossen
    *  ist (verhindert Double-Submit). */
   readonly loading?: boolean;
-  /** Semantische Klasse — default="primary". Custom-Impls entscheiden
-   *  was daraus visuell wird; die Renderer verwenden "primary" für
-   *  Save, "danger" für Delete, "secondary" für Confirm-State,
-   *  "link" für Inline-Aktionen im Fließtext (kein BG, underline). */
-  readonly variant?: "primary" | "secondary" | "danger" | "link";
+  /** Semantic class — default="primary". Custom impls decide what this
+   *  becomes visually; the renderers use "primary" for Save, "danger" for
+   *  Delete, "secondary" for a Confirm state, "link" for inline actions in
+   *  running text (no background, underline), "danger-ghost" for a
+   *  destructive action as red text instead of a red fill. */
+  readonly variant?: "primary" | "secondary" | "danger" | "link" | "danger-ghost";
   /** Größe — default="md". "sm" für kompakte Inline-Aktionen (Toolbar,
    *  Listen-Zeilen), "icon" für quadratische Icon-only-Buttons. */
   readonly size?: "sm" | "md" | "icon";
@@ -91,6 +92,10 @@ export type ButtonProps = {
    *  a click (e.g. binding a drop-target handler). Web forwards it, native
    *  impls ignore it (no native equivalent). */
   readonly ref?: Ref<HTMLButtonElement>;
+  /** Icon before the label. */
+  readonly icon?: NavIconKey;
+  /** Icon after the label (e.g. "Continue →"). */
+  readonly iconEnd?: NavIconKey;
 };
 
 /** Navigations-Link. `variant="button"` rendert die Button-Optik auf einem
@@ -227,6 +232,9 @@ export type InputProps =
       /** `<input step>`. "any" disables the native stepMismatch constraint
        *  (needed for decimal fields — integer fields leave this unset). */
       readonly step?: number | "any";
+      /** Resolved display suffix (static or from a sibling field) — never
+       *  part of the numeric value. */
+      readonly unit?: string;
     }
   | {
       readonly kind: "range";
@@ -696,6 +704,9 @@ export type FormProps = {
    *  your catalog") — gibt dem Form-Header Kontext statt nur ein Label. */
   readonly subtitle?: ReactNode;
   readonly actions?: ReactNode;
+  /** Secondary, record-related actions — rendered on the left on desktop,
+   *  on their own row below the primary action on a narrow viewport. */
+  readonly secondaryActions?: ReactNode;
   readonly testId?: string;
   /** Max width of the form container. Default "full" — see FormWidth
    *  (`packages/types/src/screen.ts`, EditLayout.width). Native impls may