@cosmicdrift/kumiko-renderer 0.232.0 → 0.234.0

package/src/components/render-field.tsx

@@ -1,5 +1,6 @@
 import {
   type EntityEditScreenDefinition,
+  type FieldIconKey,
   type FieldRenderer,
   isFormatSpec,
 } from "@cosmicdrift/kumiko-framework/ui-types";
@@ -61,11 +62,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 +136,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 (
@@ -145,7 +147,6 @@ export function RenderField({
       {...(issues !== undefined && { issues })}
       {...(labelAppendix !== undefined && { labelAppendix })}
       {...(fieldAppendix !== undefined && { fieldAppendix })}
-      {...(field.type === "boolean" && { layout: "inline" as const })}
       testId={`field-${field.field}`}
     >
       {control}
@@ -434,6 +435,44 @@ function isComplexFieldType(type: string): boolean {
   return type === "embedded" || type === "jsonb" || type === "files" || type === "images";
 }
 
+// Mirrors ACTION_ICON_BY_ID (kumiko-screen.tsx) for fields: only names with
+// an unambiguous matching FieldIconKey are listed here, everything else
+// stays iconless rather than guessing.
+const FIELD_ICON_BY_NAME: Readonly<Partial<Record<string, FieldIconKey>>> = {
+  email: "mail",
+  phone: "phone",
+  tel: "phone",
+  mobile: "phone",
+  url: "link",
+  website: "link",
+  link: "link",
+  password: "lock",
+  search: "search",
+  city: "map-pin",
+  address: "map-pin",
+  street: "map-pin",
+  user: "user",
+  owner: "user",
+  assignee: "user",
+};
+
+function kebabLastSegment(value: string): string {
+  const kebab = toKebab(value);
+  const lastDash = kebab.lastIndexOf("-");
+  return lastDash === -1 ? kebab : kebab.slice(lastDash + 1);
+}
+
+// Derives a prefix icon when the field declares none: field.icon wins, then
+// the field name. Deliberately no type-based fallback — a hash in front of a
+// number field restates what the field already shows and reads as noise.
+function resolveFieldIcon(field: EditFieldViewModel): FieldIconKey | undefined {
+  if (field.icon !== undefined) return field.icon;
+  const byName =
+    FIELD_ICON_BY_NAME[field.field.toLowerCase()] ??
+    FIELD_ICON_BY_NAME[kebabLastSegment(field.field)];
+  return byName;
+}
+
 // Dispatches field.type → Input-kind. Select threads options through
 // from the EditFieldViewModel (computeEditViewModel pulls them from
 // SelectFieldDef.options). Structural types without a widget (embedded,
@@ -449,6 +488,7 @@ function renderInput({
   Banner,
   Text,
   t,
+  row,
 }: {
   readonly field: EditFieldViewModel;
   readonly id: string;
@@ -459,6 +499,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,20 +515,25 @@ 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 icon = resolveFieldIcon(field);
+      const unit = resolveNumberUnit(field.unit, row);
       return (
         <Input
           kind="number"
           {...common}
           value={numberValue(field.value)}
           onChange={(v) => onChange(v)}
-          {...(field.icon !== undefined && { icon: field.icon })}
+          {...(icon !== undefined && { icon })}
+          {...(unit !== undefined && { unit })}
         />
       );
-    case "decimal":
+    }
+    case "decimal": {
       // step="any" disables the native stepMismatch constraint — without it
       // <input type="number"> defaults to step=1 and blocks form submit on
       // any fractional value via silent browser-native validation.
+      const icon = resolveFieldIcon(field);
       return (
         <Input
           kind="number"
@@ -495,9 +541,10 @@ function renderInput({
           value={numberValue(field.value)}
           onChange={(v) => onChange(v)}
           step="any"
-          {...(field.icon !== undefined && { icon: field.icon })}
+          {...(icon !== undefined && { icon })}
         />
       );
+    }
     case "tz":
       return (
         <Input
@@ -677,13 +724,14 @@ function renderInput({
           />
         );
       }
+      const icon = resolveFieldIcon(field);
       return (
         <Input
           kind="text"
           {...common}
           value={stringValue(field.value)}
           onChange={(v) => onChange(v)}
-          {...(field.icon !== undefined && { icon: field.icon })}
+          {...(icon !== undefined && { icon })}
         />
       );
     }
@@ -721,6 +769,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/components/render-list.tsx

@@ -2,6 +2,7 @@ import type { EagerloadedRow } from "@cosmicdrift/kumiko-framework/db";
 import type {
   EntityDefinition,
   EntityListScreenDefinition,
+  IconKey,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import type {
   ListColumnViewModel,
@@ -16,7 +17,13 @@ import { extensionSectionName, useExtensionSectionComponent } from "../app/exten
 import type { ListSort } from "../hooks/use-list-url-state";
 import { type ReferenceLookupMap, useReferenceLookup } from "../hooks/use-reference-lookup";
 import { useTranslation } from "../i18n";
-import { type DataTableFacet, type DataTableRowAction, usePrimitives } from "../primitives";
+import {
+  type DataTableFacet,
+  type DataTableRowAction,
+  type DataTableRowActionMode,
+  shouldRenderActionsIconOnly,
+  usePrimitives,
+} from "../primitives";
 
 // RenderList — präsentationaler View für entityList-Screens.
 //
@@ -85,6 +92,10 @@ export type RenderListProps = {
    *  EntityListScreenDefinition.rowActions: handler-QN → dispatcher-Call,
    *  i18n-Keys → translated Strings). */
   readonly rowActions?: readonly DataTableRowAction[];
+  /** How the row-action column renders (see `DataTableProps.rowActionMode`).
+   *  KumikoScreen derives it from the actions themselves; without it the
+   *  DataTable falls back to its adaptive default. */
+  readonly rowActionMode?: DataTableRowActionMode;
   /** Toolbar-Aktionen im List-Header — Resolved-Form (KumikoScreen baut
    *  das aus EntityListScreenDefinition.toolbarActions: navigate-target
    *  → useNav, handler-QN → dispatcher-Call). RenderList rendert die
@@ -112,6 +123,9 @@ export type ToolbarActionButton = {
   readonly confirm?: string;
   readonly confirmLabel?: string;
   readonly onTrigger: () => Promise<void> | void;
+  /** Id-derived default icon (ACTION_ICON_BY_ID in kumiko-screen.tsx) —
+   *  ToolbarAction has no author-declared icon field, unlike RowAction. */
+  readonly icon?: IconKey;
 };
 
 const SEARCH_DEBOUNCE_MS = 300;
@@ -138,6 +152,7 @@ export function RenderList(props: RenderListProps): ReactNode {
     loadingMore,
     hasMore,
     rowActions,
+    rowActionMode,
     toolbarActions,
     filterFacets,
     filterValues,
@@ -274,6 +289,7 @@ export function RenderList(props: RenderListProps): ReactNode {
   // "+ Neu" zuletzt weil das die häufigste/auffälligste CTA ist.
   const hasToolbarActions = toolbarActions !== undefined && toolbarActions.length > 0;
   const hasHeaderSlot = screen.slots?.header !== undefined;
+  const toolbarIconOnly = hasToolbarActions && shouldRenderActionsIconOnly(toolbarActions);
   const toolbarEnd =
     hasHeaderSlot || hasToolbarActions || onCreate !== undefined ? (
       <>
@@ -283,6 +299,7 @@ export function RenderList(props: RenderListProps): ReactNode {
             <ToolbarActionView
               key={a.id}
               action={a}
+              iconOnly={toolbarIconOnly}
               Button={Button}
               Dialog={Dialog}
               Banner={Banner}
@@ -350,6 +367,7 @@ export function RenderList(props: RenderListProps): ReactNode {
         {...(loadingMore !== undefined && { loadingMore })}
         {...(hasMore !== undefined && { hasMore })}
         {...(rowActions !== undefined && { rowActions })}
+        {...(rowActionMode !== undefined && { rowActionMode })}
         {...(filterFacets !== undefined && { filterFacets })}
         {...(filterValues !== undefined && { filterValues })}
         {...(onFilterChange !== undefined && { onFilterChange })}
@@ -427,11 +445,15 @@ function ReferenceLookupBridge({
 // öffnet sich vor dem Trigger wenn confirm/danger gesetzt.
 function ToolbarActionView({
   action,
+  iconOnly = false,
   Button,
   Dialog,
   Banner,
 }: {
   readonly action: ToolbarActionButton;
+  /** 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 Banner: ReturnType<typeof usePrimitives>["Banner"];
@@ -459,12 +481,15 @@ function ToolbarActionView({
 
   const variant: "primary" | "secondary" | "danger" = action.style ?? "secondary";
   const needsConfirm = action.confirm !== undefined || action.style === "danger";
+  const showIconOnly = iconOnly && action.icon !== undefined;
 
   return (
     <>
       <Button
         variant={variant}
         loading={busy}
+        {...(action.icon !== undefined && { icon: action.icon })}
+        {...(showIconOnly && { size: "icon" as const, ariaLabel: action.label })}
         onClick={() => {
           if (needsConfirm) {
             setConfirmOpen(true);
@@ -474,7 +499,7 @@ function ToolbarActionView({
         }}
         testId={`render-list-toolbar-action-${action.id}`}
       >
-        {action.label}
+        {showIconOnly ? null : action.label}
       </Button>
       <Dialog
         open={confirmOpen}

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/index.ts

@@ -206,7 +206,12 @@ export type {
   TextProps,
   WizardStepGroupProps,
 } from "./primitives";
-export { PrimitivesProvider, usePrimitives } from "./primitives";
+export {
+  PrimitivesProvider,
+  shouldRenderActionsIconOnly,
+  statusToneForValue,
+  usePrimitives,
+} from "./primitives";
 export { sortByAccessor } from "./sort-by-accessor";
 export type { LiveEvent, LiveEventSubscriber, LiveEventsProviderProps } from "./sse/live-events";
 export { LiveEventsProvider, useLiveEvents } from "./sse/live-events";

package/src/primitives.tsx

@@ -35,7 +35,12 @@ import type {
   ConfigScope,
   ConfigValueSource,
 } from "@cosmicdrift/kumiko-framework/engine";
-import type { FieldIconKey, FormWidth } from "@cosmicdrift/kumiko-framework/ui-types";
+import type {
+  FieldIconKey,
+  FormWidth,
+  IconKey,
+  NavIconKey,
+} from "@cosmicdrift/kumiko-framework/ui-types";
 import type {
   FieldIssue,
   ListColumnViewModel,
@@ -67,11 +72,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 +97,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 +237,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";
@@ -484,8 +497,22 @@ export type DataTableRowAction = {
   readonly onTrigger: (row: ListRowViewModel) => Promise<void> | void;
   /** Conditional Visibility pro Row (z.B. "Start" nur wenn status==="scheduled"). */
   readonly isVisible?: (row: ListRowViewModel) => boolean;
+  /** 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;
 };
 
+/** Teil-C action-icon collapse rule: a group of more than two actions where
+ *  every member carries an icon renders icon-only instead of wall-to-wall
+ *  text buttons; any icon-less member keeps the whole group on text so it
+ *  doesn't fall apart visually mid-group. */
+export function shouldRenderActionsIconOnly(
+  actions: readonly { readonly icon?: IconKey }[],
+): boolean {
+  return actions.length > 2 && actions.every((a) => a.icon !== undefined);
+}
+
 // Ein Faceted-Filter-Slot in der Toolbar: ein Outline-Dropdown-Button
 // (wie shadcns "Columns"-Toggle) mit Multi-Select-Checkboxen. KumikoScreen
 // baut das aus den filterable select/boolean-Feldern des Entity.
@@ -696,6 +723,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
@@ -736,6 +766,10 @@ export type SectionProps = {
    *  Default "default" (normal card border). */
   readonly variant?: "default" | "destructive";
   readonly testId?: string;
+  /** Rendered left of the title, `text-muted-foreground`, same optical
+   *  size as the title. No effect without a `title` — an icon alone would
+   *  have nothing to sit next to. */
+  readonly icon?: IconKey;
 };
 
 /** Columns-basiertes Layout. Web: CSS grid, Native: Flex-Wrap mit
@@ -977,6 +1011,45 @@ export type StatusBadgeProps = {
   readonly testId?: string;
 };
 
+// Status value -> StatusTone heuristic, shared by every surface that shows a
+// raw status value without a tone of its own (projectionDetail header badge,
+// list cells). Covers the common status vocabularies; unknown values stay
+// undefined so the caller keeps its own neutral default.
+const STATUS_TONE_BY_VALUE: Readonly<Record<string, StatusTone>> = {
+  ok: "ok",
+  active: "ok",
+  done: "ok",
+  complete: "ok",
+  completed: "ok",
+  paid: "ok",
+  approved: "ok",
+  published: "ok",
+  success: "ok",
+  pending: "warn",
+  processing: "warn",
+  review: "warn",
+  "in-review": "warn",
+  waiting: "warn",
+  open: "warn",
+  draft: "warn",
+  failed: "bad",
+  error: "bad",
+  overdue: "bad",
+  rejected: "bad",
+  blocked: "bad",
+  critical: "bad",
+};
+
+export function statusToneForValue(value: string): StatusTone | undefined {
+  const slug = value
+    .trim()
+    .toLowerCase()
+    .replace(/[\s_]+/g, "-");
+  // Own-key check: the value comes from row data, and a plain object lookup
+  // would hand back `Object.prototype.constructor` & friends as a "tone".
+  return Object.hasOwn(STATUS_TONE_BY_VALUE, slug) ? STATUS_TONE_BY_VALUE[slug] : 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. */