@cosmicdrift/kumiko-renderer-web 0.246.0 → 0.248.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.246.0",
+  "version": "0.248.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.246.0",
-    "@cosmicdrift/kumiko-headless": "0.246.0",
-    "@cosmicdrift/kumiko-renderer": "0.246.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.248.0",
+    "@cosmicdrift/kumiko-headless": "0.248.0",
+    "@cosmicdrift/kumiko-renderer": "0.248.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.246.0"
+    "@cosmicdrift/kumiko-locale-de": "0.248.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/nav-tree.test.tsx

@@ -673,6 +673,105 @@ describe("NavTree dynamic provider nodes", () => {
     expect(dispatched).toEqual({ featureId: "cms", action: "create", args: { folder: "" } });
   });
 
+  // fw#2750: createAction/actions[] carry screen XOR target — same
+  // polymorphism as the node itself. A `screen` action renders a
+  // route-KumikoLink instead of a dispatch-button.
+  test("createAction mit screen rendert einen Link auf die richtige Route statt zu dispatchen", async () => {
+    let dispatched: TargetRef | undefined;
+    restoreDispatch = setDispatchListener((t) => {
+      dispatched = t;
+    });
+    const schema: FeatureSchema = {
+      featureName: "cms",
+      entities: {},
+      screens: [{ id: "new-page", type: "entityList", entity: "item", columns: [] }],
+      navs: [
+        {
+          id: "content",
+          label: "Content",
+          order: 10,
+          provider: true,
+          createAction: { icon: "plus", label: "New page", screen: "cms:screen:new-page" },
+        },
+      ],
+    } as FeatureSchema;
+    const provider: TreeChildrenSubscribe = () => (emit) => {
+      emit([pageLeaf("apex")]);
+      return () => {};
+    };
+    await act(async () => {
+      renderDynamic({ schema, providers: new Map([["cms:nav:content", provider]]) });
+    });
+
+    const link = screen.getByRole("link", { name: "New page" });
+    expect(link.getAttribute("href")).toBe("/new-page");
+    fireEvent.click(link);
+    expect(dispatched).toBeUndefined();
+  });
+
+  // fw#2750: same screen/target polymorphism applies to actions[] entries
+  // (hover-actions), not just createAction.
+  test("actions[]-Eintrag mit screen rendert einen Link auf die richtige Route statt zu dispatchen", async () => {
+    let dispatched: TargetRef | undefined;
+    restoreDispatch = setDispatchListener((t) => {
+      dispatched = t;
+    });
+    const schema: FeatureSchema = {
+      featureName: "cms",
+      entities: {},
+      screens: [{ id: "hero", type: "entityList", entity: "item", columns: [] }],
+      navs: [
+        {
+          id: "hero",
+          label: "Hero",
+          order: 10,
+          actions: [{ icon: "edit", label: "Edit hero", screen: "cms:screen:hero" }],
+        },
+      ],
+    } as FeatureSchema;
+    await act(async () => {
+      renderDynamic({ schema, providers: new Map() });
+    });
+
+    const link = screen.getByRole("link", { name: "Edit hero" });
+    expect(link.getAttribute("href")).toBe("/hero");
+    fireEvent.click(link);
+    expect(dispatched).toBeUndefined();
+  });
+
+  // fw#2751: boot validates screen XOR target for NavDefinition actions, but
+  // a schema handed straight to NavTree (as here, and as a provider-emitted
+  // TreeNode at runtime) bypasses that — neither must not render a dead
+  // button, it must warn once and drop the action.
+  test("actions[]-Eintrag ohne screen und ohne target rendert nichts und warnt einmal", async () => {
+    const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const schema: FeatureSchema = {
+        featureName: "cms",
+        entities: {},
+        screens: [],
+        navs: [
+          {
+            id: "hero",
+            label: "Hero",
+            order: 10,
+            actions: [{ icon: "edit", label: "Broken action" }],
+          },
+        ],
+      } as FeatureSchema;
+      await act(async () => {
+        renderDynamic({ schema, providers: new Map() });
+      });
+
+      expect(screen.queryByRole("button", { name: "Broken action" })).toBeNull();
+      expect(screen.queryByRole("link", { name: "Broken action" })).toBeNull();
+      expect(warnSpy).toHaveBeenCalledTimes(1);
+      expect(warnSpy.mock.calls[0]?.[0]).toContain("Broken action");
+    } finally {
+      warnSpy.mockRestore();
+    }
+  });
+
   test("target-Knoten dispatcht beim Klick (statt Route-Link)", async () => {
     let dispatched: TargetRef | undefined;
     restoreDispatch = setDispatchListener((t) => {
@@ -773,6 +872,58 @@ describe("NavTree dynamic provider nodes", () => {
   });
 });
 
+// fw#2750: the actions container clears the collapse chevron via `right-7`.
+// A node without a chevron (not expandable) has no chevron — the narrower
+// `right-1` spacing must only apply there.
+describe("NavTree Actions-Positionierung", () => {
+  test("expandable Knoten (mit Chevron) hält den weiten right-7-Abstand", async () => {
+    const provider: TreeChildrenSubscribe = () => (emit) => {
+      emit([pageLeaf("apex")]);
+      return () => {};
+    };
+    await act(async () => {
+      renderDynamic({
+        schema: dynamicSchema(),
+        providers: new Map([["cms:nav:content", provider]]),
+      });
+    });
+
+    const btn = screen.getByRole("button", { name: "New page" });
+    const actionsContainer = btn.parentElement;
+    expect(actionsContainer?.className).toContain("right-7");
+    expect(actionsContainer?.className).not.toContain("right-1");
+  });
+
+  test("nicht-expandable Knoten (kein Chevron) rückt auf right-1 auf", async () => {
+    const schema: FeatureSchema = {
+      featureName: "cms",
+      entities: {},
+      screens: [{ id: "hero", type: "entityList", entity: "item", columns: [] }],
+      navs: [
+        {
+          id: "hero",
+          label: "Hero",
+          order: 10,
+          screen: "hero",
+          createAction: {
+            icon: "plus",
+            label: "New sub-page",
+            target: { featureId: "cms", action: "create", args: {} },
+          },
+        },
+      ],
+    } as FeatureSchema;
+    await act(async () => {
+      renderDynamic({ schema, providers: new Map() });
+    });
+
+    const btn = screen.getByRole("button", { name: "New sub-page" });
+    const actionsContainer = btn.parentElement;
+    expect(actionsContainer?.className).toContain("right-1");
+    expect(actionsContainer?.className).not.toContain("right-7");
+  });
+});
+
 describe("NavTree Suchfeld", () => {
   // Das Suchfeld ist das einzige <input> im Baum; über die Rolle statt den
   // i18n-Placeholder gefunden (i18n-Bundle resolvt im Worktree gegen den

package/src/__tests__/primitives.test.tsx

@@ -465,6 +465,43 @@ describe("DataTable", () => {
     });
   });
 
+  // scrollBody (fw#2722): a relatedList section in a tabs-mode Akte must not
+  // stretch the whole page with a long list, or leave dead space below a
+  // short one — bounds the table to a fixed height and scrolls rows inside
+  // it, regardless of how many rows there are.
+  describe("scrollBody", () => {
+    const cols = [{ field: "name", label: "Name", type: "string", sortable: false }] as const;
+    const shortRows = [{ id: "r1", values: { name: "Alice" } }];
+    const longRows = Array.from({ length: 50 }, (_, i) => ({
+      id: `r${i}`,
+      values: { name: `Row ${i}` },
+    }));
+
+    test("default: table has no fixed height and grows with its content", () => {
+      render(<DataTable columns={cols} rows={longRows} testId="t" />);
+      const wrapper = screen.getByTestId("t").parentElement?.parentElement;
+      expect(wrapper?.className).not.toContain("overflow-y-auto");
+      expect(wrapper?.className).toContain("overflow-hidden");
+    });
+
+    test("scrollBody: a long list fills its flex container and scrolls internally", () => {
+      render(<DataTable columns={cols} rows={longRows} testId="t" scrollBody />);
+      const wrapper = screen.getByTestId("t").parentElement?.parentElement;
+      expect(wrapper?.className).toContain("overflow-y-auto");
+      expect(wrapper?.className).toContain("flex-1");
+      expect(wrapper?.className).toContain("min-h-0");
+      expect(screen.getAllByTestId(/^row-/)).toHaveLength(50);
+    });
+
+    test("scrollBody: a short list gets the same flex-fill treatment (fills space instead of shrinking)", () => {
+      render(<DataTable columns={cols} rows={shortRows} testId="t" scrollBody />);
+      const wrapper = screen.getByTestId("t").parentElement?.parentElement;
+      expect(wrapper?.className).toContain("overflow-y-auto");
+      expect(wrapper?.className).toContain("flex-1");
+      expect(wrapper?.className).toContain("min-h-0");
+    });
+  });
+
   // Sort-Header pinnt das 3-State-Toggle-Verhalten + Visual-Indicator
   // + aria-sort. Renderer-Vertrag mit dem Caller (RenderList): jede
   // sortable-Column liefert beim Click den nächsten Sort-State zurück
@@ -1478,6 +1515,37 @@ describe("Form", () => {
     const contentContainer = footer.previousElementSibling as HTMLElement;
     expect(contentContainer.className).not.toContain("max-sm:pb-32");
   });
+
+  // fillHeight (fw#2722): the flex-fill chain RenderEdit opts a lone
+  // relatedList tab into, so its table can scroll inside the tab panel
+  // instead of the whole page stretching to the row count.
+  test("fillHeight: form root and its content container size to h-full/flex-1 min-h-0", () => {
+    render(
+      <Form onSubmit={() => undefined} testId="form" fillHeight>
+        <div>content</div>
+      </Form>,
+    );
+    const form = screen.getByTestId("form");
+    expect(form.className).toContain("h-full");
+    expect(form.className).toContain("min-h-0");
+    // form > FormScreenShell > card(overflow-hidden) — the card is the
+    // flex-1 min-h-0 child that claims the remaining height below headerRegion.
+    const card = form.firstElementChild?.firstElementChild as HTMLElement;
+    expect(card.className).toContain("flex-1");
+    expect(card.className).toContain("min-h-0");
+  });
+
+  test("without fillHeight: form root keeps its normal, content-sized height", () => {
+    render(
+      <Form onSubmit={() => undefined} testId="form">
+        <div>content</div>
+      </Form>,
+    );
+    const form = screen.getByTestId("form");
+    expect(form.className).not.toContain("h-full");
+    const card = form.firstElementChild?.firstElementChild as HTMLElement;
+    expect(card.className).not.toContain("flex-1");
+  });
 });
 
 describe("Banner padded", () => {

package/src/layout/nav-tree.tsx

@@ -493,11 +493,87 @@ function ActionGlyph({ icon }: { readonly icon: string }): ReactNode {
   );
 }
 
-// Hover-Actions + „+"-Affordance, absolut rechts (links vom Chevron via
-// right-7). createAction ist persistent (User-sichtbares „+"), übrige
-// Actions erst bei Hover. stopPropagation, damit der Row-Click (toggle/
-// dispatch) nicht zusätzlich feuert.
-function NodeActions({ node }: { node: NavNode }): ReactNode {
+// Boot validates screen XOR target for NavDefinition actions, but a
+// provider-emitted TreeNode reaches here without going through boot — warn
+// once per label instead of rendering a dead button (fw#2751 review).
+const warnedTreeActionLabels = new Set<string>();
+
+function warnTreeActionDropped(label: string): void {
+  // skip: already warned for this label — suppresses the repeat, not the warning itself.
+  if (warnedTreeActionLabels.has(label)) return;
+  warnedTreeActionLabels.add(label);
+  // biome-ignore lint/suspicious/noConsole: dev-warning for a setup error
+  console.warn(
+    `[kumiko] Nav action "${label}" has neither "screen" nor "target" set — it will not render.`,
+  );
+}
+
+// An action button carries screen XOR target (see TreeAction) — `screen`
+// renders a KumikoLink to the route, `target` a dispatch button. Same
+// classes/size either way, only the element changes.
+function TreeActionControl({
+  action,
+  ariaLabel,
+  className,
+  dispatch,
+  workspaceId,
+  children,
+}: {
+  readonly action: TreeAction;
+  readonly ariaLabel: string;
+  readonly className: string;
+  readonly dispatch: (target: TargetRef) => void;
+  readonly workspaceId: string | undefined;
+  readonly children: ReactNode;
+}): ReactNode {
+  if (action.screen !== undefined) {
+    const screenId = lastSegment(action.screen);
+    return (
+      <KumikoLink
+        to={{ ...(workspaceId !== undefined && { workspaceId }), screenId }}
+        aria-label={ariaLabel}
+        className={className}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </KumikoLink>
+    );
+  }
+  if (action.target !== undefined) {
+    const target = action.target;
+    return (
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        className={className}
+        onClick={(e) => {
+          e.stopPropagation();
+          dispatch(target);
+        }}
+      >
+        {children}
+      </button>
+    );
+  }
+  warnTreeActionDropped(action.label);
+  return null;
+}
+
+// Hover-actions + the "+" affordance, positioned absolute right.
+// createAction is persistent (a user-visible "+"), the other actions only
+// show on hover. stopPropagation so the row click (toggle/dispatch) doesn't
+// also fire. `expandable` comes from useNavNodeState (s.expandable) instead
+// of being re-derived here — a node without a chevron doesn't need the
+// right-7 gap, otherwise the "+" hangs 28px off the edge.
+function NodeActions({
+  node,
+  expandable,
+  workspaceId,
+}: {
+  readonly node: NavNode;
+  readonly expandable: boolean;
+  readonly workspaceId: string | undefined;
+}): ReactNode {
   const dispatch = useDispatchTarget();
   const t = useTranslation();
   const create = node.createAction;
@@ -509,33 +585,31 @@ function NodeActions({ node }: { node: NavNode }): ReactNode {
   const hover =
     "opacity-0 group-hover/menu-item:opacity-100 group-hover/menu-sub-item:opacity-100 group-focus-within/menu-item:opacity-100";
   return (
-    <div className="absolute top-1 right-7 flex items-center gap-0.5">
+    <div
+      className={cn("absolute top-1 flex items-center gap-0.5", expandable ? "right-7" : "right-1")}
+    >
       {create !== undefined && (
-        <button
-          type="button"
-          aria-label={label(create.label)}
+        <TreeActionControl
+          action={create}
+          ariaLabel={label(create.label)}
           className={btn}
-          onClick={(e) => {
-            e.stopPropagation();
-            dispatch(create.target);
-          }}
+          dispatch={dispatch}
+          workspaceId={workspaceId}
         >
           <Plus className="size-3.5" />
-        </button>
+        </TreeActionControl>
       )}
       {actions.map((a: TreeAction) => (
-        <button
+        <TreeActionControl
           key={a.label}
-          type="button"
-          aria-label={label(a.label)}
+          action={a}
+          ariaLabel={label(a.label)}
           className={cn(btn, hover)}
-          onClick={(e) => {
-            e.stopPropagation();
-            dispatch(a.target);
-          }}
+          dispatch={dispatch}
+          workspaceId={workspaceId}
         >
           <ActionGlyph icon={a.icon} />
-        </button>
+        </TreeActionControl>
       ))}
     </div>
   );
@@ -649,7 +723,7 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             <NavBadge node={node} />
           </KumikoLink>
         </SidebarMenuButton>
-        <NodeActions node={node} />
+        <NodeActions node={node} expandable={s.expandable} workspaceId={s.workspaceId} />
         {chevron}
         {sub}
       </SidebarMenuItem>
@@ -674,7 +748,7 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
           </span>
           <NavBadge node={node} />
         </SidebarMenuButton>
-        <NodeActions node={node} />
+        <NodeActions node={node} expandable={s.expandable} workspaceId={s.workspaceId} />
         {chevron}
         {sub}
       </SidebarMenuItem>
@@ -700,7 +774,7 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             <ChevronRight className="ml-auto" />
           ))}
       </SidebarMenuButton>
-      <NodeActions node={node} />
+      <NodeActions node={node} expandable={s.expandable} workspaceId={s.workspaceId} />
       {sub}
     </SidebarMenuItem>
   );
@@ -769,7 +843,7 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             <NavBadge node={node} />
           </KumikoLink>
         </SidebarMenuSubButton>
-        <NodeActions node={node} />
+        <NodeActions node={node} expandable={s.expandable} workspaceId={s.workspaceId} />
         {chevron}
         {deeper}
       </SidebarMenuSubItem>
@@ -792,7 +866,7 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             <NavBadge node={node} />
           </button>
         </SidebarMenuSubButton>
-        <NodeActions node={node} />
+        <NodeActions node={node} expandable={s.expandable} workspaceId={s.workspaceId} />
         {chevron}
         {deeper}
       </SidebarMenuSubItem>
@@ -819,7 +893,7 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
           </span>
         </button>
       </SidebarMenuSubButton>
-      <NodeActions node={node} />
+      <NodeActions node={node} expandable={s.expandable} workspaceId={s.workspaceId} />
       {chevron}
       {deeper}
     </SidebarMenuSubItem>

package/src/primitives/index.tsx

@@ -25,6 +25,7 @@ import {
   type DataTableFacet,
   type DataTableProps,
   type FieldProps,
+  type FillContainerProps,
   type FormProps,
   type FormWidth,
   type GridCellProps,
@@ -904,6 +905,7 @@ function DefaultDataTable({
   getRowTestId,
   getCellTestId,
   chromeless,
+  scrollBody,
 }: DataTableProps): ReactNode {
   // One locale/translate subscription per table — not per cell (fw#2345).
   // Optional hooks: a bare DataTable outside LocaleProvider must not crash.
@@ -937,7 +939,19 @@ function DefaultDataTable({
       // sitzt auf derselben Card-Fläche wie Forms; auf Themes mit farbigem
       // Page-Background (z.B. Cream) matchen Listen sonst nicht die Cards.
       // `chromeless` drops that frame for a host with its own boundary already (a tab panel, fw#2722).
-      <div className={cn("overflow-hidden", chromeless !== true && "rounded-lg border bg-card")}>
+      // `scrollBody` fills the remaining height of its flex-col ancestor
+      // (see DefaultForm/FormScreenShell's `fillHeight` and this table's own
+      // outer wrapper below) and scrolls rows internally, instead of
+      // `overflow-hidden` (document-flow height, grows with row count) — for
+      // a host where a long list must not stretch the whole page (a tab
+      // panel, fw#2722). `min-h-0` overrides flex's default min-height:auto,
+      // which would otherwise let this grow past its flex-1 share to fit content.
+      <div
+        className={cn(
+          scrollBody === true ? "flex-1 min-h-0 overflow-y-auto" : "overflow-hidden",
+          chromeless !== true && "rounded-lg border bg-card",
+        )}
+      >
         <Table data-testid={testId}>
           <TableHeader className="bg-muted">
             <TableRow className="hover:bg-transparent">
@@ -1139,7 +1153,10 @@ function DefaultDataTable({
     return (
       <div
         data-testid={testId !== undefined ? `${testId}-cards` : "render-list-cards"}
-        className="flex flex-col gap-3"
+        className={cn(
+          "flex flex-col gap-3",
+          scrollBody === true && "flex-1 min-h-0 overflow-y-auto",
+        )}
       >
         {onSortChange !== undefined && sortableColumns.length > 0 && (
           <select
@@ -1241,7 +1258,7 @@ function DefaultDataTable({
   // der Tabelle im selben Padding-Block — kein separater bg-Bar, kein Screen-
   // Titel (der steht im Breadcrumb der Shell).
   return (
-    <div className="flex flex-col gap-4 p-6 w-full">
+    <div className={cn("flex flex-col gap-4 p-6 w-full", scrollBody === true && "flex-1 min-h-0")}>
       {hasToolbar && (
         <div
           data-testid={testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar"}
@@ -2134,6 +2151,7 @@ function DefaultForm({
   width,
   stickyActions,
   headerRegion,
+  fillHeight,
 }: FormProps): ReactNode {
   // Eingebettet (AuthCard etc.): nacktes <form>, gestapelte Felder mit gap —
   // der Container trägt Card/Titel selbst, sonst Card-in-Card.
@@ -2164,12 +2182,25 @@ function DefaultForm({
   // between each other, muted action footer. Shell width defaults to full
   // (same chrome as lists); pass width to narrow (auth-adjacent / dense).
   return (
-    <FormRoot onSubmit={onSubmit} testId={testId} className="flex flex-col w-full">
-      <FormScreenShell {...(width !== undefined && { maxWidth: width })}>
+    <FormRoot
+      onSubmit={onSubmit}
+      testId={testId}
+      className={cn("flex flex-col w-full", fillHeight === true && "h-full min-h-0")}
+    >
+      <FormScreenShell
+        {...(width !== undefined && { maxWidth: width })}
+        {...(fillHeight === true && { fillHeight: true })}
+      >
         {headerRegion !== undefined && (
           <div className="flex flex-col gap-6 mb-8">{headerRegion}</div>
         )}
-        <div className={cn(cardSurface(), "overflow-hidden")}>
+        <div
+          className={cn(
+            cardSurface(),
+            "overflow-hidden",
+            fillHeight === true && "flex-1 min-h-0 flex flex-col",
+          )}
+        >
           {(title !== undefined || subtitle !== undefined) && (
             <div className={cn(cardHeaderBorder, "px-6 pb-4 pt-5")}>
               {title !== undefined && (
@@ -2203,6 +2234,7 @@ function DefaultForm({
               // safe-area, fw#2528) — widen further if a wizard step's last field
               // ever renders visibly clipped under three or more wrapped rows.
               stickyActions === true && "max-sm:pb-32",
+              fillHeight === true && "flex-1 min-h-0",
             )}
           >
             <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
@@ -2257,18 +2289,30 @@ export function FormScreenShell({
   className,
   testId,
   maxWidth,
+  fillHeight,
 }: {
   readonly children: ReactNode;
   readonly className?: string;
   readonly testId?: string;
   readonly maxWidth?: FormScreenShellWidth;
+  /** Stacks children in a `h-full` flex column instead of normal document
+   *  flow, so a `flex-1 min-h-0` child can claim the remaining height below
+   *  the others (fw#2722 — DefaultForm's tabs+relatedList case). Default
+   *  false: unchanged, content-sized height. */
+  readonly fillHeight?: boolean;
 }): ReactNode {
   const contextWidth = useContext(ScreenWidthContext);
   const width = maxWidth ?? contextWidth;
   return (
     <div
       data-testid={testId}
-      className={cn(screenPaddingClassName, "w-full", screenWidthClassName[width], className)}
+      className={cn(
+        screenPaddingClassName,
+        "w-full",
+        screenWidthClassName[width],
+        fillHeight === true && "h-full flex flex-col min-h-0",
+        className,
+      )}
     >
       {children}
     </div>
@@ -2376,6 +2420,14 @@ function DefaultSection({
   );
 }
 
+function DefaultFillContainer({ children, testId }: FillContainerProps): ReactNode {
+  return (
+    <div data-testid={testId} className="flex flex-1 min-h-0 flex-col">
+      {children}
+    </div>
+  );
+}
+
 function DefaultGrid({ columns, children, testId, maxRows }: GridProps): ReactNode {
   // "auto": content-sized items in a wrapping row (e.g. a metrics band of
   // self-sized tiles) instead of N equal-width, container-stretched tracks.
@@ -2631,4 +2683,5 @@ export const defaultPrimitives: CorePrimitives = {
   StatusBadge: DefaultStatusBadge,
   Metric: DefaultMetric,
   JsonView: DefaultJsonView,
+  FillContainer: DefaultFillContainer,
 };