@cosmicdrift/kumiko-renderer 0.232.0 → 0.234.0

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/__tests__/render-list-toolbar-icon-only.test.tsx

@@ -0,0 +1,146 @@
+// ToolbarActionView collapses a group of >2 icon-carrying toolbar actions to
+// icon-only buttons (`shouldRenderActionsIconOnly`). The button then has no
+// accessible name from its children, so the label has to move to `ariaLabel`
+// and must NOT stay in the children — otherwise the text renders inside a
+// button sized for an icon.
+
+import { describe, expect, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityListScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { render, screen as rtlScreen } from "@testing-library/react";
+import type { ComponentType, ReactNode } from "react";
+import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
+import { kumikoDefaultTranslations } from "../../i18n-defaults";
+import {
+  type ButtonProps,
+  type CorePrimitives,
+  type DataTableProps,
+  PrimitivesProvider,
+} from "../../primitives";
+import { RenderList, type ToolbarActionButton } from "../render-list";
+
+const TestButton: ComponentType<ButtonProps> = ({ children, onClick, testId, ariaLabel, size }) => (
+  <button
+    type="button"
+    data-testid={testId}
+    data-size={size ?? "md"}
+    aria-label={ariaLabel}
+    onClick={() => {
+      void onClick?.();
+    }}
+  >
+    {children}
+  </button>
+);
+
+const toolbarOnlyDataTable: ComponentType<DataTableProps> = ({ toolbarEnd }) => (
+  <div>{toolbarEnd}</div>
+);
+
+const noop = (): ReactNode => null;
+const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
+
+const testPrimitives: CorePrimitives = {
+  Button: TestButton,
+  Banner: passChildren,
+  Field: passChildren,
+  Input: noop,
+  DataTable: toolbarOnlyDataTable,
+  Form: passChildren,
+  Section: passChildren,
+  Card: passChildren,
+  Grid: passChildren,
+  GridCell: passChildren,
+  Text: passChildren,
+  Heading: noop,
+  Dialog: noop,
+  Modal: noop,
+  Lightbox: noop,
+  ConfigSourceBadge: noop,
+  ConfigCascadeView: noop,
+  Link: noop,
+};
+
+const entity: EntityDefinition = {
+  fields: {
+    name: { type: "text", maxLength: 50, required: false, searchable: false, sortable: false },
+  },
+};
+
+const listScreen: EntityListScreenDefinition = {
+  id: "widget-list",
+  type: "entityList",
+  entity: "widget",
+  columns: ["name"],
+};
+
+function toolbarAction(id: string, label: string, withIcon: boolean): ToolbarActionButton {
+  return {
+    id,
+    label,
+    onTrigger: () => {},
+    ...(withIcon && { icon: "archive" as const }),
+  };
+}
+
+function renderToolbar(actions: readonly ToolbarActionButton[]): void {
+  render(
+    <LocaleProvider
+      resolver={createStaticLocaleResolver({ locale: "en" })}
+      fallbackBundles={[kumikoDefaultTranslations]}
+    >
+      <PrimitivesProvider value={testPrimitives}>
+        <RenderList
+          screen={listScreen}
+          entity={entity}
+          rows={[]}
+          featureName="toolbar-fixture"
+          toolbarActions={actions}
+        />
+      </PrimitivesProvider>
+    </LocaleProvider>,
+  );
+}
+
+describe("RenderList toolbar actions collapse to icon-only", () => {
+  test("three icon actions render buttons with no visible text but an aria-label", () => {
+    renderToolbar([
+      toolbarAction("sync", "Sync", true),
+      toolbarAction("export", "Export", true),
+      toolbarAction("archive", "Archive", true),
+    ]);
+
+    for (const [id, label] of [
+      ["sync", "Sync"],
+      ["export", "Export"],
+      ["archive", "Archive"],
+    ] as const) {
+      const button = rtlScreen.getByTestId(`render-list-toolbar-action-${id}`);
+      expect(button.getAttribute("data-size")).toBe("icon");
+      expect(button.getAttribute("aria-label")).toBe(label);
+      expect(button.textContent).toBe("");
+    }
+  });
+
+  test("two actions stay on text buttons carrying the label as children", () => {
+    renderToolbar([toolbarAction("sync", "Sync", true), toolbarAction("export", "Export", true)]);
+
+    const button = rtlScreen.getByTestId("render-list-toolbar-action-sync");
+    expect(button.getAttribute("data-size")).toBe("md");
+    expect(button.textContent).toBe("Sync");
+  });
+
+  test("an icon-less member keeps the whole group on text buttons", () => {
+    renderToolbar([
+      toolbarAction("sync", "Sync", true),
+      toolbarAction("export", "Export", true),
+      toolbarAction("archive", "Archive", false),
+    ]);
+
+    const button = rtlScreen.getByTestId("render-list-toolbar-action-sync");
+    expect(button.getAttribute("data-size")).toBe("md");
+    expect(button.textContent).toBe("Sync");
+  });
+});

package/src/components/related-list-section.tsx

@@ -93,26 +93,36 @@ export function RelatedListSection({
         }
       : undefined;
 
+  const content =
+    rowsQuery.loading && rowsQuery.data === null ? (
+      <Banner padded variant="loading" testId="related-list-loading">
+        Loading…
+      </Banner>
+    ) : rowsQuery.error ? (
+      <Banner padded variant="error" testId="related-list-error">
+        {dispatcherErrorText(rowsQuery.error, effectiveTranslate)}
+      </Banner>
+    ) : (
+      <RenderList
+        screen={listScreen}
+        entity={entity}
+        rows={rowsQuery.data?.rows ?? []}
+        featureName={featureName}
+        translate={effectiveTranslate}
+        {...(onRowClick !== undefined && { onRowClick })}
+      />
+    );
+
+  // hideTitle (tabs mode) → this section carries no header content of its
+  // own, and RenderList's DataTable already draws its own card frame — a
+  // Section wrapper here would only add a second, nested card (fw record-
+  // screen-type polish). Stacked (non-tabs) sections keep their Section
+  // card since they render a visible title.
+  if (hideTitle) return content;
+
   return (
-    <Section title={hideTitle ? undefined : section.title} testId={`related-list-${section.title}`}>
-      {rowsQuery.loading && rowsQuery.data === null ? (
-        <Banner padded variant="loading" testId="related-list-loading">
-          Loading…
-        </Banner>
-      ) : rowsQuery.error ? (
-        <Banner padded variant="error" testId="related-list-error">
-          {dispatcherErrorText(rowsQuery.error, effectiveTranslate)}
-        </Banner>
-      ) : (
-        <RenderList
-          screen={listScreen}
-          entity={entity}
-          rows={rowsQuery.data?.rows ?? []}
-          featureName={featureName}
-          translate={effectiveTranslate}
-          {...(onRowClick !== undefined && { onRowClick })}
-        />
-      )}
+    <Section title={section.title} testId={`related-list-${section.title}`}>
+      {content}
     </Section>
   );
 }

package/src/components/render-edit-action-button.tsx

@@ -9,11 +9,15 @@ import type { RenderEditAction } from "./render-edit-types";
 // to hook into like the built-in onDelete/onSubmit paths have).
 export function RenderEditActionButton({
   action,
+  iconOnly = false,
   Button,
   Dialog,
   onError,
 }: {
   readonly action: RenderEditAction;
+  /** Group-level collapse (see `shouldRenderActionsIconOnly`) — only takes
+   *  effect when this action actually resolved an icon. */
+  readonly iconOnly?: boolean;
   readonly Button: ReturnType<typeof usePrimitives>["Button"];
   readonly Dialog: ReturnType<typeof usePrimitives>["Dialog"];
   readonly onError: (text: string | null) => void;
@@ -37,6 +41,7 @@ export function RenderEditActionButton({
   // Same rule as RowActionWriteHandler: "danger" forces a confirm even
   // without an explicit confirm key.
   const needsConfirm = action.confirm !== undefined || action.style === "danger";
+  const showIconOnly = iconOnly && action.icon !== undefined;
 
   return (
     <>
@@ -44,6 +49,8 @@ export function RenderEditActionButton({
         type="button"
         variant={variant}
         loading={busy}
+        {...(action.icon !== undefined && { icon: action.icon })}
+        {...(showIconOnly && { size: "icon" as const, ariaLabel: action.label })}
         onClick={() => {
           if (needsConfirm) {
             setConfirmOpen(true);
@@ -53,7 +60,7 @@ export function RenderEditActionButton({
         }}
         testId={`render-edit-action-${action.id}`}
       >
-        {action.label}
+        {showIconOnly ? null : action.label}
       </Button>
       <Dialog
         open={confirmOpen}

package/src/components/render-edit-types.ts

@@ -1,6 +1,7 @@
 import type {
   EntityDefinition,
   EntityEditScreenDefinition,
+  IconKey,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import type {
   FormSnapshot,
@@ -156,6 +157,10 @@ export type RenderEditAction = {
   readonly style?: "primary" | "secondary" | "danger";
   readonly confirm?: string;
   readonly confirmLabel?: string;
+  /** Resolved icon (author `RowAction.icon` or the id-derived default) —
+   *  drives both the icon-left-of-text render and the icon-only collapse
+   *  rule (see `shouldRenderActionsIconOnly`). */
+  readonly icon?: IconKey;
 };
 
 export type RenderEditChangeState<TValues extends FormValues> = {

package/src/components/render-edit.tsx

@@ -36,7 +36,7 @@ import { useDraftStorage } from "../context/draft-storage-context";
 import { formatWhen } from "../format-when";
 import { useForm } from "../hooks/use-form";
 import { useTranslation } from "../i18n";
-import { usePrimitives } from "../primitives";
+import { shouldRenderActionsIconOnly, usePrimitives } from "../primitives";
 import { RelatedListSection } from "./related-list-section";
 import {
   filterEditSections,
@@ -914,59 +914,92 @@ 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;
+  // Teil-C collapse rule: driven by the custom `actions` group only — a
+  // resolved true also folds the Copy-Link button (same visual group in the
+  // footer), but never Delete/Cancel, which keep their text regardless.
+  const iconOnlyMidActions = actions !== undefined && shouldRenderActionsIconOnly(actions);
+  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={iconOnlyMidActions ? "secondary" : "link"}
+          icon={linkCopied ? "check" : "link"}
           testId="render-edit-copy-link"
+          {...(iconOnlyMidActions && {
+            size: "icon" as const,
+            ariaLabel: translate(
+              linkCopied ? "kumiko.actions.copyLinkCopied" : "kumiko.actions.copyLink",
+            ),
+          })}
           onClick={async () => {
             await onCopyLink();
             setLinkCopied(true);
           }}
         >
-          {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")}
+          {iconOnlyMidActions
+            ? null
+            : translate(linkCopied ? "kumiko.actions.copyLinkCopied" : "kumiko.actions.copyLink")}
         </Button>
       )}
+      {actions?.map((action) => (
+        <RenderEditActionButton
+          key={action.id}
+          action={action}
+          iconOnly={iconOnlyMidActions}
+          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>
       )}
+    </>
+  );
+  // Mirrors every branch inside formActions below — without this guard
+  // DefaultForm renders an empty footer strip (border + padding, no content)
+  // on read-only detail screens, since `actions` would otherwise always be
+  // a defined (if empty) fragment.
+  const hasFormActions =
+    (isWizard && currentStep > 0) ||
+    (isWizard && !isLastWizardStep) ||
+    ((isFormEditable || hasExtensionRegistrations) && (!isWizard || isLastWizardStep));
+  const formActions = (
+    <>
       {isWizard && currentStep > 0 && (
         <Button
           type="button"
           variant="secondary"
+          icon="arrow-left"
           onClick={handleWizardBack}
           testId="render-edit-wizard-back"
         >
@@ -974,7 +1007,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 +1022,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"))}
@@ -1021,7 +1060,9 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
         {...(hideSectionTitles !== true && { title: formTitle })}
         {...(hideSectionTitles !== true &&
           formSubtitle !== undefined && { subtitle: formSubtitle })}
-        {...(hideActions !== true && { actions: formActions })}
+        {...(hideActions !== true && hasFormActions && { actions: formActions })}
+        {...(hideActions !== true &&
+          hasSecondaryFormActions && { secondaryActions: secondaryFormActions })}
         testId="render-edit-form"
         stickyActions={isWizard}
         {...(screen.layout.width !== undefined && { width: screen.layout.width })}
@@ -1186,6 +1227,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
               key={sectionKey}
               {...(sectionTitle !== undefined && { title: sectionTitle })}
               {...(section.description !== undefined && { subtitle: section.description })}
+              {...(section.icon !== undefined && { icon: section.icon })}
               testId={`section-${sectionKey}`}
             >
               <Grid columns={section.columns}>