@cosmicdrift/kumiko-renderer-web 0.233.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,
@@ -81,16 +83,18 @@ import {
   useRef,
   useState,
 } from "react";
-import { NAV_ICONS } from "../icons";
+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";
@@ -132,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) ----
 
@@ -153,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,
@@ -257,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,
@@ -305,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>
@@ -398,9 +420,116 @@ function withUnitSuffix(unit: string | undefined, input: ReactNode): ReactNode {
   );
 }
 
+// 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,
@@ -484,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}
@@ -494,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":
@@ -538,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}
@@ -1096,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>
     );
@@ -1155,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);
@@ -1169,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)) {
@@ -1184,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}
@@ -1807,13 +1988,21 @@ 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>
     );
   }
@@ -1896,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}
@@ -1986,7 +2175,7 @@ export function FormScreenShell({
   children,
   className,
   testId,
-  maxWidth = "full",
+  maxWidth = "4xl",
 }: {
   readonly children: ReactNode;
   readonly className?: string;
@@ -2010,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>
         )}
@@ -2068,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

package/src/primitives/metric.tsx

@@ -1,17 +1,25 @@
 import type { MetricProps } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
-import { MiniStat } from "../widgets/stat";
 
+// Borderless cell in the metrics-band Grid — `first:border-l-0` drops the
+// divider on the first cell purely from DOM position, so the tiles read as
+// one row of vertical dividers instead of individual cards (fw record-
+// screen-type polish). Typo matches StatCard's label/value rhythm.
 export function DefaultMetric({ label, value, testId }: MetricProps): ReactNode {
   return (
-    <MiniStat
-      label={label}
-      value={value}
-      testId={testId}
-      {...(testId !== undefined && {
-        labelTestId: `${testId}-label`,
-        valueTestId: `${testId}-value`,
-      })}
-    />
+    <div data-testid={testId} className="border-l first:border-l-0 px-4 py-3">
+      <div
+        className="text-xs text-muted-foreground"
+        data-testid={testId !== undefined ? `${testId}-label` : undefined}
+      >
+        {label}
+      </div>
+      <div
+        className="mt-0.5 text-xl font-semibold tabular-nums text-foreground"
+        data-testid={testId !== undefined ? `${testId}-value` : undefined}
+      >
+        {value}
+      </div>
+    </div>
   );
 }

package/src/styles.css

@@ -38,14 +38,15 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  /* Dark-Mode (Default) — shadcn-Preset „Rhea"/Neutral (hue 0, reines Grau —
-     kein zinc-Blaustich). background == card; Cards trennen über Border +
-     Shadow. Primary near-white, Apps überschreiben mit ihrer Brand. */
+  /* Dark-Mode (Default) — shadcn preset "Rhea"/Neutral (hue 0, pure gray,
+     no zinc blue tint). Card is raised above background (8% vs. 3.9%) so it
+     separates by surface color, not just border + shadow. Primary
+     near-white, apps override with their own brand. */
   --color-background: hsl(0 0% 3.9%);
   --color-foreground: hsl(0 0% 98%);
-  --color-card: hsl(0 0% 3.9%);
+  --color-card: hsl(0 0% 8%);
   --color-card-foreground: hsl(0 0% 98%);
-  --color-popover: hsl(0 0% 3.9%);
+  --color-popover: hsl(0 0% 9%);
   --color-popover-foreground: hsl(0 0% 98%);
   --color-primary: hsl(0 0% 98%);
   --color-primary-foreground: hsl(0 0% 9%);
@@ -107,10 +108,12 @@
    auf light, greifen diese Werte. */
 @layer base {
   :root:not(.dark) {
-    /* Light-Mode — Neutral (hue 0, reines Grau). Weißes Background, Cards ==
-       weiß, trennen über Border + Shadow. Primary near-black; Apps überschreiben
-       mit Brand. Werte = shadcn-Preset (aus dem Live-Preview verifiziert). */
-    --color-background: hsl(0 0% 100%);
+    /* Light-Mode — Neutral (hue 0, pure gray). Background is tinted slightly
+       (96.5%), card stays pure white — card lifts off the page instead of
+       blending into it. Border + shadow remain additional cues. Primary
+       near-black; apps override with brand. Values = shadcn preset, adapted
+       to this hue-0 elevation scheme. */
+    --color-background: hsl(0 0% 96.5%);
     --color-foreground: hsl(0 0% 3.9%);
     --color-card: hsl(0 0% 100%);
     --color-card-foreground: hsl(0 0% 3.9%);
@@ -118,11 +121,11 @@
     --color-popover-foreground: hsl(0 0% 3.9%);
     --color-primary: hsl(0 0% 9%);
     --color-primary-foreground: hsl(0 0% 98%);
-    --color-secondary: hsl(0 0% 96.1%);
+    --color-secondary: hsl(0 0% 94%);
     --color-secondary-foreground: hsl(0 0% 9%);
-    --color-muted: hsl(0 0% 96.1%);
-    --color-muted-foreground: hsl(0 0% 45.1%);
-    --color-accent: hsl(0 0% 96.1%);
+    --color-muted: hsl(0 0% 94%);
+    --color-muted-foreground: hsl(0 0% 42%);
+    --color-accent: hsl(0 0% 94%);
     --color-accent-foreground: hsl(0 0% 9%);
     --color-destructive: hsl(0 84.2% 60.2%);
     --color-destructive-foreground: hsl(0 0% 98%);
@@ -130,10 +133,11 @@
     --color-input: hsl(0 0% 89.8%);
     --color-ring: hsl(0 0% 63%);
 
-    /* Sidebar-Familie Light (Neutral) = shadcn-Werte: Rail 98%, aktiv 96.1%,
-       Border 89.8%. Inset-Panel (100%) schwebt via Shadow + Rounded auf dem
-       Rail; der Kontrast ist bewusst subtil (wie im Original). */
-    --color-sidebar: hsl(0 0% 98%);
+    /* Sidebar family light (neutral): rail 98.5% (clearly between background
+       96.5% and card 100%, otherwise the tinted page would swallow the
+       rail), active 96.1%, border 89.8%. Inset panel (100%) floats via
+       shadow + rounded on the rail. */
+    --color-sidebar: hsl(0 0% 98.5%);
     --color-sidebar-foreground: hsl(0 0% 26.1%);
     --color-sidebar-primary: hsl(0 0% 9%);
     --color-sidebar-primary-foreground: hsl(0 0% 98%);

package/src/ui/switch.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }