@cosmicdrift/kumiko-renderer-web 0.232.0 → 0.234.0

package/src/primitives/index.tsx

@@ -8,7 +8,7 @@
 // basierte Stile. Radix-UI-Unterbau für interaktive Elemente (Modal,
 // Dropdown etc. kommen später).
 
-import type { FieldIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { FieldIconKey, IconKey } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { ListRowViewModel } from "@cosmicdrift/kumiko-headless";
 import { applyFormatSpec, isSafeHref } from "@cosmicdrift/kumiko-headless";
 import type {
@@ -35,6 +35,8 @@ import {
   type ProgressProps,
   type SectionProps,
   type StepBarProps,
+  shouldRenderActionsIconOnly,
+  statusToneForValue,
   type TextProps,
   useColumnRenderer,
   useOptionalLocale,
@@ -73,6 +75,7 @@ import {
   Children,
   type CSSProperties,
   createContext,
+  type KeyboardEvent,
   type MouseEvent,
   type ReactNode,
   useContext,
@@ -80,15 +83,18 @@ import {
   useRef,
   useState,
 } from "react";
+import { Icon, NAV_ICONS } from "../icons";
 import { cn } from "../lib/cn";
 import { Badge } from "../ui/badge";
 import { buttonVariants, Button as UiButton } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import { Input as UiInput } from "../ui/input";
 import { Label as UiLabel } from "../ui/label";
+import { Switch } from "../ui/switch";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
 import { Textarea } from "../ui/textarea";
 import { ProgressBar } from "../widgets/progress-bar";
+import { StatusBadge } from "../widgets/status-badge";
 import { StepBar } from "../widgets/step-bar";
 import { ComboboxInput } from "./combobox";
 import { DateInput } from "./date-input";
@@ -113,6 +119,7 @@ import { DefaultTabs } from "./tabs";
 import { TimestampInput } from "./timestamp-input";
 import { useToast } from "./toast";
 import { TzInput } from "./tz-input";
+import { useIsNarrowViewport } from "./use-narrow-viewport";
 
 // ---- Card-Chrome (eine Definition für Form/Section/Card) ----
 
@@ -129,7 +136,10 @@ const cardSurface = cva(
 );
 // Wraps instead of running off-screen when the row outgrows its container (fw#2528).
 const cardFooter = "flex flex-wrap items-center justify-end gap-2 px-[var(--card-padding)] py-4";
-const cardFooterBorder = "border-t bg-muted/30";
+// /30 read as nearly invisible against the light-theme card (white card,
+// muted at 94% lightness) — /50 keeps the same token, just a stronger step.
+const cardFooterBorder = "border-t bg-muted/50";
+const cardHeaderBorder = "border-b bg-muted/50";
 
 // ---- Button (vendored shadcn ui/button) ----
 
@@ -141,6 +151,7 @@ const BUTTON_VARIANT = {
   secondary: "outline",
   danger: "destructive",
   link: "link",
+  "danger-ghost": "ghost",
 } as const;
 
 const BUTTON_SIZE = {
@@ -149,6 +160,14 @@ const BUTTON_SIZE = {
   icon: "icon",
 } as const;
 
+// Closed IconKey vocabulary, checked against the shared NAV_ICONS registry
+// (icons.tsx) — an unknown key (schema data isn't statically typed against
+// IconKey the way this prop is) renders no icon instead of crashing, same
+// fallback shape as fieldIconFor above.
+function actionIconFor(icon: IconKey | undefined): IconKey | undefined {
+  return icon !== undefined && Object.hasOwn(NAV_ICONS, icon) ? icon : undefined;
+}
+
 function DefaultButton({
   type = "button",
   onClick,
@@ -162,14 +181,29 @@ function DefaultButton({
   testId,
   className,
   ref,
+  icon,
+  iconEnd,
 }: ButtonProps): ReactNode {
   // link-Variant rendert text-artig (Inline-Link im Fließtext/Banner), nicht als
   // gepolsterte Fläche; width="full" streckt CTA-Buttons in Karten/Panels.
   const resolvedClassName = cn(
     variant === "link" ? "h-auto px-0 py-0" : "",
+    variant === "danger-ghost"
+      ? "text-destructive hover:text-destructive hover:bg-destructive/10"
+      : "",
     width === "full" ? "w-full" : "",
     className,
   );
+  const IconStart = icon !== undefined ? NAV_ICONS[icon] : undefined;
+  const IconEnd = iconEnd !== undefined ? NAV_ICONS[iconEnd] : undefined;
+  // Loading swaps the leading icon slot for a spinner and keeps `children` —
+  // replacing the label would shift the button's width mid-submit.
+  const leading =
+    loading === true ? (
+      <Loader2 className="size-4 animate-spin" aria-hidden="true" />
+    ) : IconStart !== undefined ? (
+      <IconStart className="size-4" aria-hidden="true" />
+    ) : null;
   return (
     <UiButton
       ref={ref}
@@ -183,7 +217,9 @@ function DefaultButton({
       aria-label={ariaLabel}
       className={resolvedClassName}
     >
-      {loading === true ? <Loader2 className="size-4 animate-spin" aria-hidden="true" /> : children}
+      {leading}
+      {children}
+      {IconEnd !== undefined && <IconEnd className="size-4" aria-hidden="true" />}
     </UiButton>
   );
 }
@@ -236,6 +272,13 @@ function fieldLabelId(id: string): string {
   return `${id}-label`;
 }
 
+// Boolean optics depend on the surrounding Field layout: layout="inline"
+// (checkbox lists like MultiSelectCheckboxes, the BooleanField widget) keeps
+// the checkbox, the standard form field (layout="stacked"/default) gets the
+// new switch. Pure web-renderer rendering decision, no contract field needed
+// — Field hands its resolved layout down to the nested Input via context.
+const FieldLayoutContext = createContext<FieldProps["layout"]>("stacked");
+
 function DefaultField({
   id,
   label,
@@ -284,7 +327,7 @@ function DefaultField({
     return (
       <div data-testid={testId} className="flex flex-col gap-1.5">
         <div className="flex items-center gap-2">
-          {children}
+          <FieldLayoutContext.Provider value="inline">{children}</FieldLayoutContext.Provider>
           {labelEl}
           {labelAppendix !== undefined && labelAppendix}
         </div>
@@ -359,9 +402,134 @@ function withFieldIcon(icon: string | undefined, input: ReactNode): ReactNode {
   );
 }
 
+// Mirrors withFieldIcon on the right side: a muted, non-interactive unit
+// suffix rendered inside the input's visual box. Pure decoration — never
+// focusable, never touches the input's value.
+function withUnitSuffix(unit: string | undefined, input: ReactNode): ReactNode {
+  if (unit === undefined) return input;
+  return (
+    <div className="relative">
+      {input}
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-sm text-muted-foreground"
+      >
+        {unit}
+      </span>
+    </div>
+  );
+}
+
+// Segmented control for `kind: "select"` with a small closed option set —
+// a 4-value Status field looked wrong stretched into a full-width dropdown
+// (edit-existing screenshot feedback). Purely a rendering choice inside the
+// "select" branch below; the primitives contract is untouched (still
+// `options` + string value/onChange).
+const SEGMENTED_SELECT_MAX_OPTIONS = 4;
+const SEGMENTED_SELECT_MAX_LABEL_LENGTH = 14;
+
+function isSegmentedSelectEligible(options: readonly { readonly label: string }[]): boolean {
+  return (
+    options.length > 0 &&
+    options.length <= SEGMENTED_SELECT_MAX_OPTIONS &&
+    options.every((o) => o.label.length <= SEGMENTED_SELECT_MAX_LABEL_LENGTH)
+  );
+}
+
+// WAI-ARIA radiogroup pattern (role="radiogroup" + role="radio" children):
+// arrow keys move focus AND selection in the same step, only the checked
+// segment (or the first when none is checked) sits in the tab order.
+function SegmentedSelect({
+  id,
+  name,
+  value,
+  onChange,
+  options,
+  disabled,
+  required,
+  hasError,
+}: {
+  readonly id: string;
+  readonly name: string;
+  readonly value: string;
+  readonly onChange: (v: string) => void;
+  readonly options: readonly { readonly value: string; readonly label: string }[];
+  readonly disabled?: boolean;
+  readonly required?: boolean;
+  readonly hasError?: boolean;
+}): ReactNode {
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const selectAt = (index: number): void => {
+    const target = options[index];
+    if (target === undefined) return;
+    onChange(target.value);
+    buttonRefs.current[index]?.focus();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number): void => {
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      selectAt((index + 1) % options.length);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      selectAt((index - 1 + options.length) % options.length);
+    }
+  };
+
+  return (
+    <div
+      role="radiogroup"
+      aria-labelledby={fieldLabelId(id)}
+      aria-required={required}
+      aria-invalid={hasError === true ? true : undefined}
+      data-testid={`segmented-${id}`}
+      className={cn(
+        "inline-flex w-fit flex-wrap divide-x overflow-hidden rounded-md border",
+        hasError === true
+          ? "divide-destructive/50 border-destructive"
+          : "divide-border border-input",
+      )}
+    >
+      <input type="hidden" name={name} value={value} />
+      {options.map((opt, index) => {
+        const checked = opt.value === value;
+        return (
+          // biome-ignore lint/a11y/useSemanticElements: a native <input type="radio"> can't render the segment's label as content — button+role="radio" is the standard WAI-ARIA composite-widget substitute.
+          <button
+            key={opt.value}
+            ref={(node) => {
+              buttonRefs.current[index] = node;
+            }}
+            type="button"
+            role="radio"
+            aria-checked={checked}
+            tabIndex={checked || (value === "" && index === 0) ? 0 : -1}
+            disabled={disabled}
+            data-testid={`segmented-${id}-${opt.value}`}
+            onClick={() => onChange(opt.value)}
+            onKeyDown={(e) => handleKeyDown(e, index)}
+            className={cn(
+              "px-3 py-1.5 text-sm font-medium transition-colors",
+              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+              checked
+                ? "bg-primary text-primary-foreground"
+                : "bg-transparent text-foreground hover:bg-accent",
+            )}
+          >
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
 function DefaultInput(props: InputProps): ReactNode {
   // Vendored ui/input + ui/checkbox stylen Fehler über `aria-invalid`
   // selbst — kein manuelles border-destructive mehr nötig.
+  const booleanLayout = useContext(FieldLayoutContext);
   const common = {
     id: props.id,
     name: props.name,
@@ -409,23 +577,27 @@ function DefaultInput(props: InputProps): ReactNode {
         />
       );
     case "number":
-      return withFieldIcon(
-        props.icon,
-        <UiInput
-          type="number"
-          {...common}
-          data-testid={props.testId}
-          value={props.value}
-          step={props.step}
-          onChange={(e: ChangeEvent<HTMLInputElement>) => {
-            const v = e.target.value;
-            props.onChange(v === "" ? undefined : Number(v));
-          }}
-          className={cn(
-            "text-right tabular-nums",
-            fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined,
-          )}
-        />,
+      return withUnitSuffix(
+        props.unit,
+        withFieldIcon(
+          props.icon,
+          <UiInput
+            type="number"
+            {...common}
+            data-testid={props.testId}
+            value={props.value}
+            step={props.step}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              const v = e.target.value;
+              props.onChange(v === "" ? undefined : Number(v));
+            }}
+            className={cn(
+              "text-right tabular-nums",
+              fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined,
+              props.unit !== undefined ? "pr-8" : undefined,
+            )}
+          />,
+        ),
       );
     case "range":
       return (
@@ -441,7 +613,10 @@ function DefaultInput(props: InputProps): ReactNode {
         />
       );
     case "boolean":
-      return (
+      // layout="inline" (checkbox lists like MultiSelectCheckboxes, the
+      // BooleanField widget) keeps the checkbox optics; the standard form
+      // field (render-field.tsx, layout="stacked") gets the switch.
+      return booleanLayout === "inline" ? (
         <Checkbox
           id={props.id}
           name={props.name}
@@ -451,6 +626,17 @@ function DefaultInput(props: InputProps): ReactNode {
           checked={props.value}
           onCheckedChange={(checked) => props.onChange(checked === true)}
         />
+      ) : (
+        <Switch
+          id={props.id}
+          name={props.name}
+          disabled={props.disabled}
+          aria-required={props.required}
+          aria-invalid={props.hasError === true ? true : undefined}
+          checked={props.value}
+          onCheckedChange={(checked) => props.onChange(checked === true)}
+          className="aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
+        />
       );
     case "file":
     case "image":
@@ -495,6 +681,20 @@ function DefaultInput(props: InputProps): ReactNode {
       const comboOptions = props.options.map((o) =>
         typeof o === "string" ? { value: o, label: o } : o,
       );
+      if (isSegmentedSelectEligible(comboOptions)) {
+        return (
+          <SegmentedSelect
+            id={props.id}
+            name={props.name}
+            value={props.value}
+            onChange={props.onChange}
+            options={comboOptions}
+            {...(props.disabled !== undefined && { disabled: props.disabled })}
+            {...(props.required !== undefined && { required: props.required })}
+            {...(props.hasError !== undefined && { hasError: props.hasError })}
+          />
+        );
+      }
       return (
         <ComboboxInput
           id={props.id}
@@ -682,20 +882,29 @@ function DefaultDataTable({
   // Optional hooks: a bare DataTable outside LocaleProvider must not crash.
   const tableTranslate = useOptionalTranslation();
   const tableLocale = useOptionalLocale();
+  // Below 768px a table scrolls its columns out of reach with no visible
+  // affordance (fw#2159 fixed the desktop case; narrow viewports never had
+  // one). Cards replace the table entirely below the breakpoint — same
+  // single-mount pattern as EmbeddedListInput/embedded-list-input.tsx.
+  const isNarrow = useIsNarrowViewport();
   // Toolbar-Wrapper: gemeinsamer Container für Toolbar+Tabelle damit
   // beide visuell zusammengehören. Toolbar ist NICHT sticky — Lists
   // scrollen typischerweise mit dem Page-Container, nicht intern.
   // Sticky würde mit der Topbar konkurrieren.
   const hasTableActions = rowActions !== undefined && rowActions.length > 0;
+  const isEmpty = rows.length === 0;
+  const emptyBlock: ReactNode = (
+    <div
+      data-testid={testId !== undefined ? `${testId}-empty` : "render-list-empty"}
+      className="flex flex-col items-center justify-center rounded-md border border-dashed p-12 text-sm text-muted-foreground gap-3"
+    >
+      {emptyState ?? <span>No entries.</span>}
+    </div>
+  );
+
   function tableInner(): ReactNode {
-    return rows.length === 0 ? (
-      <div
-        data-testid={testId !== undefined ? `${testId}-empty` : "render-list-empty"}
-        className="flex flex-col items-center justify-center rounded-md border border-dashed p-12 text-sm text-muted-foreground gap-3"
-      >
-        {emptyState ?? <span>No entries.</span>}
-      </div>
-    ) : (
+    if (isEmpty) return emptyBlock;
+    return (
       // dashboard-01-Muster: `rounded-lg border`-Rahmen, die Header-Zeile
       // trägt den bg-muted-Grauton. `bg-card` (statt transparent) → die Liste
       // sitzt auf derselben Card-Fläche wie Forms; auf Themes mit farbigem
@@ -794,7 +1003,147 @@ function DefaultDataTable({
       </div>
     );
   }
-  const tableContent = tableInner();
+
+  // No column headers below the breakpoint, so the click-to-sort affordance
+  // on SortableHeader has nothing to attach to. A single native <select> is
+  // the whole fix — no custom widget, no menu — fed straight from the
+  // columns marked sortable in the ViewModel. Options carry the resolved
+  // {field, dir} directly so onChange can look the pick up by value instead
+  // of parsing/casting the option string back apart.
+  const sortableColumns = columns.filter((col) => col.sortable);
+  const sortOptions: readonly {
+    readonly value: string;
+    readonly field: string;
+    readonly dir: DataTableSortDir;
+    readonly label: string;
+  }[] = sortableColumns.flatMap((col) => [
+    { value: `${col.field}:asc`, field: col.field, dir: "asc", label: `${col.label} ↑` },
+    { value: `${col.field}:desc`, field: col.field, dir: "desc", label: `${col.label} ↓` },
+  ]);
+
+  function renderCard(row: ListRowViewModel): ReactNode {
+    const titleColumn = columns.find((col) => col.highlighted === true) ?? columns[0];
+    const detailColumns = columns.filter((col) => col !== titleColumn);
+    return (
+      <div
+        key={row.id}
+        data-testid={getRowTestId?.(row) ?? `row-${row.id}`}
+        {...(onRowClick !== undefined && {
+          role: "button" as const,
+          tabIndex: 0,
+          onClick: () => onRowClick(row),
+          onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {
+            if (e.key !== "Enter" && e.key !== " ") return;
+            e.preventDefault();
+            onRowClick(row);
+          },
+        })}
+        className={cn(
+          "flex flex-col gap-3 rounded-lg border bg-card p-4",
+          onRowClick !== undefined && "cursor-pointer",
+        )}
+      >
+        {titleColumn !== undefined && (
+          <div
+            data-testid={
+              getCellTestId?.(row, titleColumn.field) ?? `cell-${row.id}-${titleColumn.field}`
+            }
+            className="text-base font-medium"
+          >
+            <DataTableCell
+              value={row.values[titleColumn.field]}
+              row={row.values}
+              field={titleColumn.field}
+              type={titleColumn.type}
+              renderer={titleColumn.renderer}
+              translate={tableTranslate}
+              locale={tableLocale}
+              {...(titleColumn.optionLabels !== undefined && {
+                optionLabels: titleColumn.optionLabels,
+              })}
+              {...(onCellChange !== undefined && {
+                onChange: (value: unknown) => onCellChange(row.id, titleColumn.field, value),
+              })}
+            />
+          </div>
+        )}
+        <div className="flex flex-col gap-2">
+          {detailColumns.map((col) => (
+            <div key={col.field} className="flex flex-col gap-0.5">
+              <span className="text-xs text-muted-foreground">{col.label}</span>
+              <span
+                data-testid={getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`}
+                className="text-sm"
+              >
+                <DataTableCell
+                  value={row.values[col.field]}
+                  row={row.values}
+                  field={col.field}
+                  type={col.type}
+                  renderer={col.renderer}
+                  translate={tableTranslate}
+                  locale={tableLocale}
+                  {...(col.optionLabels !== undefined && { optionLabels: col.optionLabels })}
+                  {...(onCellChange !== undefined && {
+                    onChange: (value: unknown) => onCellChange(row.id, col.field, value),
+                  })}
+                />
+              </span>
+            </div>
+          ))}
+        </div>
+        {hasTableActions && (
+          // biome-ignore lint/a11y/noStaticElementInteractions: stopPropagation only — not a control
+          <div
+            className="flex items-center justify-end gap-1 border-t pt-3"
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <RowActionsCell row={row} actions={rowActions} mode={rowActionMode} />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  function cardsInner(): ReactNode {
+    if (isEmpty) return emptyBlock;
+    return (
+      <div
+        data-testid={testId !== undefined ? `${testId}-cards` : "render-list-cards"}
+        className="flex flex-col gap-3"
+      >
+        {onSortChange !== undefined && sortableColumns.length > 0 && (
+          <select
+            aria-label={tableTranslate?.("kumiko.list.sort.label") ?? "Sort"}
+            data-testid={testId !== undefined ? `${testId}-sort` : "render-list-sort"}
+            value={sort !== undefined && sort !== null ? `${sort.field}:${sort.dir}` : ""}
+            onChange={(e) => {
+              const raw = e.target.value;
+              if (raw === "") {
+                onSortChange(null);
+                return;
+              }
+              const picked = sortOptions.find((o) => o.value === raw);
+              if (picked === undefined) return;
+              onSortChange({ field: picked.field, dir: picked.dir });
+            }}
+            className="h-9 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+          >
+            <option value="">{tableTranslate?.("kumiko.list.sort.unsorted") ?? "Unsorted"}</option>
+            {sortOptions.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        )}
+        {rows.map((row) => renderCard(row))}
+      </div>
+    );
+  }
+
+  const tableContent = isNarrow ? cardsInner() : tableInner();
 
   // Pager wird IMMER unter der Tabelle gerendert (auch bei rows=[]),
   // damit der User bei einem Filter-Hit-of-Zero zurückblättern kann
@@ -904,10 +1253,14 @@ function RowActionsCell({
   const visible = actions.filter((a) => a.isVisible === undefined || a.isVisible(row));
   if (visible.length === 0) return null;
   if (mode === "inline") {
+    // Teil C: >2 actions all carrying an icon collapse to icon-only —
+    // otherwise "inline" is exactly the wall-to-wall text-button problem
+    // this feature exists to fix.
+    const iconOnly = shouldRenderActionsIconOnly(visible);
     return (
       <div className="flex w-full items-center gap-1 justify-start">
         {visible.map((a) => (
-          <RowActionButton key={a.id} row={row} action={a} />
+          <RowActionButton key={a.id} row={row} action={a} iconOnly={iconOnly} />
         ))}
       </div>
     );
@@ -963,9 +1316,13 @@ function useRowActionTrigger(row: ListRowViewModel) {
 function RowActionButton({
   row,
   action,
+  iconOnly = false,
 }: {
   readonly row: ListRowViewModel;
   readonly action: DataTableRowAction;
+  /** Group-level collapse (see `shouldRenderActionsIconOnly`) — only takes
+   *  effect when this action actually resolved an icon. */
+  readonly iconOnly?: boolean;
 }): ReactNode {
   const { busy, triggerNow } = useRowActionTrigger(row);
   const [confirmOpen, setConfirmOpen] = useState(false);
@@ -977,12 +1334,16 @@ function RowActionButton({
         ? "text-primary hover:bg-primary/10"
         : "text-foreground hover:bg-accent";
 
+  const resolvedIcon = actionIconFor(action.icon);
+  const showIconOnly = iconOnly && resolvedIcon !== undefined;
+
   return (
     <>
       <button
         type="button"
         data-testid={`row-${row.id}-action-${action.id}`}
         disabled={busy}
+        {...(showIconOnly && { "aria-label": action.label, title: action.label })}
         onClick={(e) => {
           e.stopPropagation();
           if (needsConfirm(action)) {
@@ -992,13 +1353,25 @@ function RowActionButton({
           }
         }}
         className={cn(
-          "inline-flex h-8 items-center justify-center rounded-sm px-2 text-sm",
+          "inline-flex h-8 items-center justify-center gap-1.5 rounded-sm text-sm",
+          showIconOnly ? "w-8" : "px-2",
           "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
           "disabled:opacity-50 disabled:pointer-events-none",
           variantClass,
         )}
       >
-        {busy ? <Loader2 className="size-3.5 animate-spin" aria-hidden="true" /> : action.label}
+        {busy ? (
+          <Loader2 className="size-3.5 animate-spin" aria-hidden="true" />
+        ) : resolvedIcon === undefined ? (
+          action.label
+        ) : showIconOnly ? (
+          <Icon name={resolvedIcon} className="size-4" />
+        ) : (
+          <>
+            <Icon name={resolvedIcon} className="size-4" />
+            {action.label}
+          </>
+        )}
       </button>
       <DefaultDialog
         open={confirmOpen}
@@ -1456,11 +1829,30 @@ function isMoneyValue(value: unknown): value is MoneyCellValue {
 //   - select/multiSelect → human-readable (kebab-case → Title Case), multiSelect values joined with ", "
 //   - money → { amount, currency } formatted via Intl (not "[object Object]")
 //   - text/else → toString
+
+const ISO_DATETIME_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})?$/;
+const warnedTimestampColumns = new Set<string>();
+
+// A raw ISO string in a "text" column means the author forgot `renderer:
+// { format: "timestamp" }` — guessing a format here could be wrong, so we
+// warn and leave the value as-is instead of auto-formatting.
+function warnMissingTimestampFormat(columnKey: string | undefined): void {
+  if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+  const key = columnKey ?? "<unknown column>";
+  if (warnedTimestampColumns.has(key)) return;
+  warnedTimestampColumns.add(key);
+  // biome-ignore lint/suspicious/noConsole: dev-only assertion
+  console.warn(
+    `[kumiko] column "${key}" renders a raw ISO timestamp as text — add renderer: { format: "timestamp" } to its column definition.`,
+  );
+}
+
 export function defaultCellRender(
   value: unknown,
   type: string,
   optionLabels?: Readonly<Record<string, string>>,
   locale?: string,
+  columnKey?: string,
 ): string {
   if (value === null || value === undefined || value === "") return "";
   if (type === "boolean") return value === true ? "✓" : "";
@@ -1495,6 +1887,9 @@ export function defaultCellRender(
       })
       .join(", ");
   }
+  if (type === "text" && typeof value === "string" && ISO_DATETIME_RE.test(value)) {
+    warnMissingTimestampFormat(columnKey);
+  }
   return typeof value === "string" ? value : String(value);
 }
 
@@ -1593,17 +1988,25 @@ function DataTableCell({
     // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
     console.warn(`[kumiko] columnRenderer "${componentRef.name}" not registered`);
   }
-  // select-Werte als neutrale Badge-Pill (shadcn secondary) statt Plain-Text.
-  // Farbige Status-Semantik (grün/amber) bleibt App-Sache via columnRenderer.
+  // A select value renders as a pill instead of plain text. When the raw
+  // value is a known status word, it carries the same tone as the
+  // projectionDetail header badge — a status column stayed grey while the
+  // detail view of the same value was coloured (fw#2579). Unknown values
+  // keep the neutral outline pill.
   if (type === "select" && value !== null && value !== undefined && value !== "") {
-    // dashboard-01-Muster: outline-Badge + muted statt gefülltem secondary.
+    const label = defaultCellRender(value, type, optionLabels, locale);
+    const tone = typeof value === "string" ? statusToneForValue(value) : undefined;
+    if (tone !== undefined) {
+      return <StatusBadge tone={tone}>{label}</StatusBadge>;
+    }
+    // dashboard-01 pattern: outline badge + muted instead of a filled secondary.
     return (
       <Badge variant="outline" className="px-1.5 text-muted-foreground">
-        {defaultCellRender(value, type, optionLabels, locale)}
+        {label}
       </Badge>
     );
   }
-  return defaultCellRender(value, type, optionLabels, locale);
+  return defaultCellRender(value, type, optionLabels, locale, field);
 }
 
 // ---- Form + Section + Grid + Text ----
@@ -1630,6 +2033,7 @@ function DefaultForm({
   title,
   subtitle,
   actions,
+  secondaryActions,
   testId,
   width,
   stickyActions,
@@ -1653,8 +2057,11 @@ function DefaultForm({
         )}
       >
         <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
-        {actions !== undefined && (
-          <div className="flex items-center justify-end gap-2">{actions}</div>
+        {(secondaryActions !== undefined || actions !== undefined) && (
+          <div className="flex items-center justify-end gap-2">
+            {secondaryActions}
+            {actions}
+          </div>
         )}
       </form>
     );
@@ -1678,7 +2085,7 @@ function DefaultForm({
         )}
         <div className={cn(cardSurface(), "overflow-hidden")}>
           {(title !== undefined || subtitle !== undefined) && (
-            <div className="px-6 pb-2 pt-5">
+            <div className={cn(cardHeaderBorder, "px-6 pb-4 pt-5")}>
               {title !== undefined && (
                 <h2
                   data-testid={testId !== undefined ? `${testId}-title` : undefined}
@@ -1714,11 +2121,10 @@ function DefaultForm({
           >
             <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
           </div>
-          {actions !== undefined && (
+          {(secondaryActions !== undefined || actions !== undefined) && (
             <div
-              data-testid={testId !== undefined ? `${testId}-actions` : undefined}
               className={cn(
-                cardFooter,
+                "flex flex-col-reverse gap-3 px-[var(--card-padding)] py-3 sm:flex-row sm:items-center sm:justify-between sm:py-4",
                 cardFooterBorder,
                 // Below sm (640px): pin to the viewport bottom instead of normal
                 // flow, so a virtual keyboard shrinking the viewport can't push
@@ -1729,7 +2135,22 @@ function DefaultForm({
                   "max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:bg-background max-sm:shadow-[0_-4px_12px_-4px_rgb(0_0_0_/_0.15)] max-sm:pb-4",
               )}
             >
-              {actions}
+              {secondaryActions !== undefined && (
+                <div
+                  data-testid={testId !== undefined ? `${testId}-actions-secondary` : undefined}
+                  className="flex flex-wrap items-center gap-1 max-sm:[&_button]:text-xs"
+                >
+                  {secondaryActions}
+                </div>
+              )}
+              {actions !== undefined && (
+                <div
+                  data-testid={testId !== undefined ? `${testId}-actions` : undefined}
+                  className="flex items-center gap-2 max-sm:w-full max-sm:[&>button]:flex-1 max-sm:[&>button]:min-h-11 sm:ml-auto"
+                >
+                  {actions}
+                </div>
+              )}
             </div>
           )}
         </div>
@@ -1754,7 +2175,7 @@ export function FormScreenShell({
   children,
   className,
   testId,
-  maxWidth = "full",
+  maxWidth = "4xl",
 }: {
   readonly children: ReactNode;
   readonly className?: string;
@@ -1778,20 +2199,24 @@ function DefaultSection({
   actions,
   variant = "default",
   testId,
+  icon,
 }: SectionProps): ReactNode {
   const insideForm = useContext(InsideFormContext);
 
   // h3 statt CardTitle (= div): erhält die Heading-Semantik für
   // Screenreader-Navigation. Subtitle fließt darunter (kein Divider —
   // shadcn CardTitle+CardDescription-Muster).
+  // icon only renders alongside a title — a title-less section has nothing
+  // for a lone icon to sit next to, so it stays as-is (no heading grows).
   const header =
     title !== undefined || subtitle !== undefined ? (
       <div className="flex flex-col gap-1">
         {title !== undefined && (
           <h3
             data-testid={testId !== undefined ? `${testId}-title` : undefined}
-            className="text-base font-semibold leading-none tracking-tight"
+            className="flex items-center gap-2 text-base font-semibold leading-none tracking-tight"
           >
+            {icon !== undefined && <Icon name={icon} className="size-4 text-muted-foreground" />}
             {title}
           </h3>
         )}
@@ -1836,8 +2261,8 @@ function DefaultSection({
     );
   }
 
-  // Standalone: eigene Card, Header fließt in den Body (kein Divider).
-  // actions = abgehobene Footer-Row (border-t bg-muted/30, wie DefaultForm).
+  // Standalone: own card, header flows into the body (no divider).
+  // actions = raised footer row (cardFooterBorder, same as DefaultForm).
   // overflow-hidden clips the footer-corner radius correctly for portaled
   // overlays (Combobox/Select/Tooltip escape to document.body, unaffected).
   // A non-portaled overlay (e.g. a custom dropdown built directly into