@cosmicdrift/kumiko-renderer-web 0.233.0 → 0.234.0

package/src/__tests__/projection-detail-record-layout.test.tsx

@@ -129,6 +129,69 @@ describe("KumikoScreen / projectionDetail — record header + metrics band", ()
     expect(screen.queryByTestId("kumiko-screen-projection-detail-title")).toBeNull();
     expect(screen.queryByTestId("kumiko-screen-projection-detail-metrics")).toBeNull();
   });
+
+  test("colors the status badge via the StatusTone heuristic for a recognized value", async () => {
+    const headerScreen: ProjectionDetailScreenDefinition = {
+      ...baseScreen,
+      header: { title: "tenantName", status: "state" },
+    };
+    const dispatcher = dispatcherReturning({ ...rowData, state: "overdue" });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(headerScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(screen.getByTestId("kumiko-screen-projection-detail-status").className).toContain(
+      "text-status-bad",
+    );
+  });
+
+  test("an unmapped status value falls back to the muted tone", async () => {
+    const headerScreen: ProjectionDetailScreenDefinition = {
+      ...baseScreen,
+      header: { title: "tenantName", status: "state" },
+    };
+    const dispatcher = dispatcherReturning({ ...rowData, state: "archived" });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(headerScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(screen.getByTestId("kumiko-screen-projection-detail-status").className).toContain(
+      "text-muted-foreground",
+    );
+  });
+
+  test("read-only detail screens render no footer action bar", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(baseScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(screen.queryByTestId("render-edit-form-actions")).toBeNull();
+  });
 });
 
 describe("KumikoScreen / projectionDetail — metric tiles render through the Metric primitive", () => {
@@ -399,6 +462,30 @@ describe("KumikoScreen / projectionDetail — layout.mode: 'tabs'", () => {
 
     expect(setSearchParamsCalls).toContainEqual({ tab: "payments" });
   });
+
+  test("relatedList tab content renders without its own Section card wrapper", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+    const { navApi } = navWithTab("payments");
+
+    render(
+      <NavProvider value={navApi}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={schemaFor(tabsScreen)}
+            qn="rentals:screen:rent-detail"
+            entityId="rent-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    await waitFor(() =>
+      expect(dispatcher.calls.some((c) => c.type === "rentals:query:rent:payments")).toBe(true),
+    );
+    // hideTitle (tabs mode) drops the Section wrapper — DataTable already
+    // draws its own card frame, so a second nested Card would double it up.
+    expect(screen.queryByTestId("related-list-Payments")).toBeNull();
+  });
 });
 
 // Only guard against a solon-shaped screen (relatedList-heavy) silently regressing.
@@ -448,6 +535,10 @@ describe("KumikoScreen / projectionDetail — unchanged for a solon-shaped scree
     // Contrast for the tabs-mode "form title suppressed" test above — outside
     // tabs mode (hideSectionTitles unset) the form's own title still renders.
     expect(screen.getByTestId("render-edit-form-title")).toBeTruthy();
+    // Contrast for the tabs-mode "no Section wrapper" test above — a stacked
+    // (non-tabs) relatedList section has a visible title, so it keeps its
+    // own Section card.
+    expect(screen.getByTestId("related-list-Payments")).toBeTruthy();
   });
 });
 

package/src/__tests__/render-edit.test.tsx

@@ -119,8 +119,8 @@ describe("RenderEdit", () => {
     // notes is hidden (isUrgent=false): title, count, isUrgent → 3 cells.
     expect(grid?.children.length).toBe(3);
 
-    const urgentCheckbox = screen.getByTestId("field-isUrgent").querySelector('[role="checkbox"]');
-    fireEvent.click(urgentCheckbox as HTMLElement);
+    const urgentSwitch = screen.getByTestId("field-isUrgent").querySelector('[role="switch"]');
+    fireEvent.click(urgentSwitch as HTMLElement);
 
     // notes becomes visible → 4 cells, no leftover empty cell from before.
     expect(grid?.children.length).toBe(4);
@@ -240,10 +240,9 @@ describe("RenderEdit", () => {
     );
 
     expect(screen.queryByTestId("field-notes")).toBeNull();
-    // boolean-Feld = vendored Radix-Checkbox → button[role=checkbox], kein
-    // native input[type=checkbox] mehr.
-    const urgentCheckbox = screen.getByTestId("field-isUrgent").querySelector('[role="checkbox"]');
-    fireEvent.click(urgentCheckbox as HTMLElement);
+    // boolean field in a standard form = vendored Radix Switch → button[role=switch].
+    const urgentSwitch = screen.getByTestId("field-isUrgent").querySelector('[role="switch"]');
+    fireEvent.click(urgentSwitch as HTMLElement);
     expect(screen.queryByTestId("field-notes")).toBeTruthy();
   });
 
@@ -284,7 +283,7 @@ describe("RenderEdit", () => {
     expect(seenResults[0]?.isSuccess).toBe(true);
   });
 
-  test("layout.width defaults the form shell to max-w-full when unset", () => {
+  test("layout.width defaults the form shell to max-w-4xl when unset", () => {
     render(
       <DispatcherProvider dispatcher={makeDispatcher()}>
         <RenderEdit<TestValues>
@@ -298,7 +297,7 @@ describe("RenderEdit", () => {
     );
 
     const shell = screen.getByTestId("render-edit-form").firstElementChild;
-    expect(shell?.className).toContain("max-w-full");
+    expect(shell?.className).toContain("max-w-4xl");
     expect(shell?.className).not.toContain("max-w-3xl");
   });
 
@@ -2858,8 +2857,8 @@ describe("RenderEdit locked state (#1896)", () => {
     expect((titleInput as HTMLInputElement).disabled).toBe(true);
     const countInput = screen.getByTestId("field-count").querySelector("input");
     expect((countInput as HTMLInputElement).disabled).toBe(true);
-    const urgentCheckbox = screen.getByTestId("field-isUrgent").querySelector('[role="checkbox"]');
-    expect((urgentCheckbox as HTMLButtonElement).disabled).toBe(true);
+    const urgentSwitch = screen.getByTestId("field-isUrgent").querySelector('[role="switch"]');
+    expect((urgentSwitch as HTMLButtonElement).disabled).toBe(true);
     expect((screen.getByTestId("render-edit-submit") as HTMLButtonElement).disabled).toBe(true);
   });
 

package/src/__tests__/workspace-shell.test.tsx

@@ -440,13 +440,12 @@ describe("WorkspaceShell", () => {
     expect(screen.queryByText("Tours")).toBeNull();
   });
 
-  test("fill=true applies h-svh on root and min-h-0 on inset/main", () => {
+  test("fill defaults to true: applies h-svh on root and min-h-0 on inset/main", () => {
     renderShell(
       <WorkspaceShell
         brand={<div>Brand</div>}
         schema={schema}
         user={{ id: "u1", roles: ["admin"] }}
-        fill
       >
         <div>content</div>
       </WorkspaceShell>,
@@ -462,13 +461,15 @@ describe("WorkspaceShell", () => {
     expect(innerMain?.classList.contains("overflow-auto")).toBe(true);
   });
 
-  // #1692: default (no fill) must not force viewport-lock classes
-  test("without fill does not apply h-svh or min-h-0", () => {
+  // fill={false} is the escape hatch back to page-scroll: must not apply
+  // viewport-lock classes.
+  test("fill={false} does not apply h-svh or min-h-0", () => {
     renderShell(
       <WorkspaceShell
         brand={<div>Brand</div>}
         schema={schema}
         user={{ id: "u1", roles: ["admin"] }}
+        fill={false}
       >
         <div>content</div>
       </WorkspaceShell>,

package/src/icons.tsx

@@ -1,5 +1,20 @@
+// Icon registry: symbolic `NavIconKey` → lucide-react component. `NavIconKey`
+// is the closed vocabulary a feature author can write (packages/types/src/
+// nav-icon.ts); `satisfies` below makes this map a compile-time drift
+// guard — a key added to one without the other fails the build.
+//
+// Runtime data (provider-supplied nav/action icons) is only typed as plain
+// `string` at the resolved-tree layer, so an unknown key can still show up
+// at runtime on occasion — `Icon` falls back to rendering the raw key as
+// text rather than crashing, mirroring the old `ActionGlyph` behavior in
+// nav-tree.tsx.
+//
+// Buttons resolve icons through the same map — importing it from the nav
+// layout module would couple them to the sidebar.
 import type { NavIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
 import {
+  AlertTriangle,
+  Archive,
   ArrowLeft,
   ArrowRight,
   BarChart3,
@@ -9,17 +24,27 @@ import {
   Calculator,
   CalendarDays,
   Check,
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
   ClipboardList,
+  Clock,
   Coins,
   Copy,
   CreditCard,
   Download,
+  ExternalLink,
+  Eye,
+  EyeOff,
   FileText,
+  Filter,
+  Flag,
   Folder,
   FolderOpen,
   Gauge,
   Hash,
   Home,
+  Info,
   KeyRound,
   Languages,
   Layers,
@@ -28,14 +53,23 @@ import {
   LineChart,
   Link,
   List,
+  Loader2,
   Lock,
   Mail,
+  MapPin,
+  MoreHorizontal,
+  MoreVertical,
   Package,
   Palette,
+  Pencil,
+  Phone,
   PiggyBank,
   Plus,
+  Printer,
   Receipt,
+  RefreshCw,
   Rocket,
+  Save,
   Search,
   Send,
   Server,
@@ -44,19 +78,23 @@ import {
   Shield,
   ShieldCheck,
   Sparkles,
+  Star,
   Table,
   Tag,
   Trash2,
   TrendingUp,
+  Undo2,
   Upload,
   User,
   Users,
   Wallet,
   Wand2,
   X,
+  XCircle,
 } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "./lib/cn";
 
-// Buttons resolve icons through the same map, importing it from the nav layout module would couple them to the sidebar.
 export const NAV_ICONS = {
   dashboard: LayoutDashboard,
   "layout-grid": LayoutGrid,
@@ -113,4 +151,49 @@ export const NAV_ICONS = {
   "arrow-left": ArrowLeft,
   "arrow-right": ArrowRight,
   copy: Copy,
+  pencil: Pencil,
+  eye: Eye,
+  "eye-off": EyeOff,
+  filter: Filter,
+  refresh: RefreshCw,
+  "more-horizontal": MoreHorizontal,
+  "more-vertical": MoreVertical,
+  "external-link": ExternalLink,
+  "chevron-down": ChevronDown,
+  "chevron-right": ChevronRight,
+  save: Save,
+  undo: Undo2,
+  archive: Archive,
+  star: Star,
+  flag: Flag,
+  clock: Clock,
+  "map-pin": MapPin,
+  phone: Phone,
+  printer: Printer,
+  "alert-triangle": AlertTriangle,
+  info: Info,
+  "check-circle": CheckCircle2,
+  "x-circle": XCircle,
+  loader: Loader2,
 } as const satisfies Readonly<Record<NavIconKey, typeof Folder>>;
+
+// Widened alias for runtime lookups against the plain `string` icon keys
+// resolved-tree nodes carry — not the closed NavIconKey union NAV_ICONS
+// itself is typed against.
+const ICON_LOOKUP: Readonly<Record<string, typeof Folder | undefined>> = NAV_ICONS;
+
+export function Icon({
+  name,
+  className,
+}: {
+  readonly name: NavIconKey;
+  readonly className?: string;
+}): ReactNode {
+  const LucideIcon = Object.hasOwn(NAV_ICONS, name) ? ICON_LOOKUP[name] : undefined;
+  if (LucideIcon !== undefined) return <LucideIcon aria-hidden="true" className={className} />;
+  return (
+    <span aria-hidden="true" className={cn("text-xs", className)}>
+      {name}
+    </span>
+  );
+}

package/src/layout/app-layout.tsx

@@ -13,12 +13,12 @@ export type AppLayoutProps = {
   readonly sidebar?: ReactNode;
   readonly children: ReactNode;
   readonly testId?: string;
-  /** Viewport-fit Shell. true → Wurzel = `h-screen` (fixe Viewport-Höhe),
-   *  Sidebar/Topbar bleiben stehen, der Main-Bereich scrollt INNEN
-   *  (`min-h-0` + `overflow-auto`). false (Default) → klassischer
-   *  `min-h-screen`-Flow, die ganze Seite scrollt. Dashboard-artige Apps
-   *  wollen `true`; eine öffentliche, lange Content-Seite eher `false`.
-   *  Clippt nie — der Content scrollt in `main` statt im Body. */
+  /** Viewport-fit Shell. Default `true` → Wurzel = `h-screen` (fixe
+   *  Viewport-Höhe), Sidebar/Topbar bleiben stehen, der Main-Bereich
+   *  scrollt INNEN (`min-h-0` + `overflow-auto`). `false` → klassischer
+   *  `min-h-screen`-Flow, die ganze Seite scrollt — Escape-Hatch für
+   *  eine öffentliche, lange Content-Seite die echten Body-Scroll
+   *  braucht. Clippt nie — der Content scrollt in `main` statt im Body. */
   readonly fill?: boolean;
   /** Optionaler Klassen-Append an die Wurzel (eigener Hintergrund etc.).
    *  Erweitert die Defaults, ersetzt sie nicht (cn-merge). */
@@ -32,7 +32,7 @@ export function AppLayout({
   sidebar,
   children,
   testId,
-  fill,
+  fill = true,
   className,
   mainClassName,
 }: AppLayoutProps): ReactNode {

package/src/layout/default-app-shell.tsx

@@ -68,7 +68,8 @@ export type DefaultAppShellProps = {
    *  Plan-Banner. */
   readonly sidebarFooter?: ReactNode;
   /** Viewport-fit Shell. true → fixe Viewport-Höhe (`h-svh`), der Content
-   *  scrollt INNEN statt der ganzen Seite. Default false (Seiten-Scroll). */
+   *  scrollt INNEN statt der ganzen Seite. Default true — `fill={false}`
+   *  schaltet zurück auf Seiten-Scroll. */
   readonly fill?: boolean;
   /** Screen-Content der im SidebarInset gerendert wird. */
   readonly children: ReactNode;
@@ -82,7 +83,7 @@ export function DefaultAppShell({
   headerActions,
   navBadges,
   sidebarFooter,
-  fill,
+  fill = true,
   children,
 }: DefaultAppShellProps): ReactNode {
   const fillCls = fillClasses(fill);

package/src/layout/workspace-shell.tsx

@@ -80,7 +80,8 @@ export type WorkspaceShellProps = {
   /** Runtime badge slot per nav leaf (bare nav id), same as DefaultAppShell. */
   readonly navBadges?: ReadonlyMap<string, ReactNode>;
   /** Viewport-fit shell. true → fixed viewport height (`h-svh`), content
-   *  scrolls INSIDE instead of the whole page. Default false (page scroll). */
+   *  scrolls INSIDE instead of the whole page. Default true — set
+   *  `fill={false}` to opt back into page scroll. */
   readonly fill?: boolean;
   /** Screen content. */
   readonly children: ReactNode;
@@ -94,7 +95,7 @@ export function WorkspaceShell({
   initialWorkspaceId,
   sidebarFooter,
   navBadges,
-  fill,
+  fill = true,
   children,
 }: WorkspaceShellProps): ReactNode {
   const app = useMemo(() => toAppSchema(schema), [schema]);

package/src/primitives/__tests__/button.test.tsx

@@ -25,3 +25,40 @@ describe("DefaultButton className/ref (fw#1831)", () => {
     expect(ref.current).toBe(screen.getByTestId("btn"));
   });
 });
+
+describe("DefaultButton icon (fw-ui-defaults)", () => {
+  test("icon prop renders the resolved icon left of the text", () => {
+    render(
+      <Button icon="trash" testId="btn">
+        Delete
+      </Button>,
+    );
+    const btn = screen.getByTestId("btn");
+    expect(btn.querySelector("svg")).not.toBeNull();
+    expect(btn.textContent).toBe("Delete");
+  });
+
+  test("size='icon' + a resolved icon still renders icon, children and aria-label", () => {
+    render(
+      <Button icon="trash" size="icon" ariaLabel="Delete" testId="btn">
+        Delete
+      </Button>,
+    );
+    const btn = screen.getByTestId("btn");
+    expect(btn.textContent).toBe("Delete");
+    expect(btn.querySelector("svg")).not.toBeNull();
+    expect(btn.getAttribute("aria-label")).toBe("Delete");
+  });
+
+  test("unknown icon key: no crash, falls back to rendering children only", () => {
+    render(
+      // @ts-expect-error — exercising the runtime fallback for a schema-supplied key outside the closed IconKey union
+      <Button icon="not-a-real-icon" testId="btn">
+        Delete
+      </Button>,
+    );
+    const btn = screen.getByTestId("btn");
+    expect(btn.querySelector("svg")).toBeNull();
+    expect(btn.textContent).toBe("Delete");
+  });
+});

package/src/primitives/__tests__/select-segmented.test.tsx

@@ -0,0 +1,84 @@
+// Segment control for `kind: "select"` with a small closed option set
+// (edit-existing screenshot feedback): a Status field with 3 short values
+// no longer stretches into a full-width dropdown. Threshold: ≤4 options,
+// each label ≤14 chars — otherwise the unchanged ComboboxInput dropdown.
+
+import { describe, expect, test } from "bun:test";
+import { fireEvent } from "@testing-library/react";
+import { render, screen } from "../../__tests__/test-utils";
+import { defaultPrimitives } from "../index";
+
+const { Field, Input } = defaultPrimitives;
+
+function renderSelect(
+  options: readonly string[],
+  overrides: { readonly value?: string; readonly disabled?: boolean } = {},
+): string[] {
+  const changes: string[] = [];
+  render(
+    <Field id="status" label="Status" testId="field-status">
+      <Input
+        kind="select"
+        id="status"
+        name="status"
+        value={overrides.value ?? options[0] ?? ""}
+        onChange={(v) => changes.push(v)}
+        options={options}
+        {...(overrides.disabled !== undefined && { disabled: overrides.disabled })}
+      />
+    </Field>,
+  );
+  return changes;
+}
+
+describe("DefaultInput select → segmented control (edit-existing feedback)", () => {
+  test("≤4 short options render the segmented control, not the dropdown", () => {
+    renderSelect(["Draft", "Review", "Published"]);
+    expect(screen.queryByTestId("combobox-status")).toBeNull();
+    expect(screen.getByRole("radiogroup")).toBeTruthy();
+    expect(screen.getAllByRole("radio")).toHaveLength(3);
+  });
+
+  test("4 options render the segmented control", () => {
+    renderSelect(["Draft", "Review", "Published", "Archived"]);
+    expect(screen.queryByTestId("combobox-status")).toBeNull();
+    expect(screen.getByRole("radiogroup")).toBeTruthy();
+    expect(screen.getAllByRole("radio")).toHaveLength(4);
+  });
+
+  test("5 options keep the dropdown", () => {
+    renderSelect(["Draft", "Review", "Published", "Archived", "Deleted"]);
+    expect(screen.queryByRole("radiogroup")).toBeNull();
+    expect(screen.getByTestId("combobox-status")).toBeTruthy();
+  });
+
+  test("3 options with one long label (>14 chars) keep the dropdown", () => {
+    renderSelect(["Draft", "Review", "Published Status"]);
+    expect(screen.queryByRole("radiogroup")).toBeNull();
+    expect(screen.getByTestId("combobox-status")).toBeTruthy();
+  });
+
+  test("clicking a segment reports the same value the dropdown's onChange would give", () => {
+    const changes = renderSelect(["Draft", "Review", "Published"], { value: "Draft" });
+    fireEvent.click(screen.getByRole("radio", { name: "Review" }));
+    expect(changes).toEqual(["Review"]);
+  });
+
+  test("group has an accessible name and the selected segment is aria-checked", () => {
+    renderSelect(["Draft", "Review", "Published"], { value: "Review" });
+    expect(screen.getByRole("radiogroup", { name: "Status" })).toBeTruthy();
+    expect(screen.getByRole("radio", { name: "Review" }).getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByRole("radio", { name: "Draft" }).getAttribute("aria-checked")).toBe("false");
+  });
+
+  test("disabled prevents selection", () => {
+    const changes = renderSelect(["Draft", "Review", "Published"], {
+      value: "Draft",
+      disabled: true,
+    });
+    const review = screen.getByRole("radio", { name: "Review" });
+    expect((review as HTMLButtonElement).disabled).toBe(true);
+    fireEvent.click(review);
+    expect(changes).toEqual([]);
+  });
+});