@juwel-development/design-system 3.11.0 → 4.1.0

package/src/Interaction/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 import {
   createContext,
   type FocusEvent,
@@ -11,6 +11,16 @@ import {
 import type { Subject } from 'rxjs';
 import { TabsCompositionError } from './TabsCompositionError';
 
+const tabsRoot = cva('', {
+  variants: {
+    fill: {
+      true: 'flex h-full min-h-0 min-w-0 flex-col',
+      false: '',
+    },
+  },
+  defaultVariants: { fill: false },
+});
+
 // The row is one scrolling line of controls, never a second row. The ring room is written from the
 // two focus-ring tokens so it cannot drift from the ring it exists for: padding holds the scroll
 // clip off the outline, the negative margin hands the room back to the page, and scroll-padding
@@ -22,6 +32,7 @@ const tabsList = cva(
     'm-[calc(-1*(var(--focus-ring-width)+var(--focus-ring-offset)))]',
     'scroll-p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]',
   ].join(' '),
+  { variants: { fill: { true: 'shrink-0', false: '' } } },
 );
 
 // Navigation typography - the tracked grotesk label, muted at rest, foreground when current -
@@ -45,6 +56,7 @@ const tabsTab = cva(
 // the ring follows focusability, not control-ness.
 const tabsPanel = cva(
   'outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]',
+  { variants: { fill: { true: 'min-h-0 min-w-0 flex-auto', false: '' } } },
 );
 
 type TabsContract = {
@@ -52,6 +64,7 @@ type TabsContract = {
   onSelect$: Subject<string>;
   label: string;
   baseId: string;
+  fill: boolean;
 };
 
 const TabsContext = createContext<TabsContract | undefined>(undefined);
@@ -99,7 +112,11 @@ const neighbourTab = (
   return tabs[(index + step + tabs.length) % tabs.length];
 };
 
-export interface ITabsRootProps {
+export interface ITabsRootProps extends VariantProps<typeof tabsRoot> {
+  /** Fill the allocated parent height, keeping List at content height and giving Panel the rest.
+   * In an unsized parent, panels retain content height. Compose List and Panels directly in Root;
+   * an unsized spacing wrapper does not pass the bound. No spacing is added. */
+  fill?: VariantProps<typeof tabsRoot>['fill'];
   /** The key of the active tab. Must name a declared tab/panel pair; the consumer owns it. */
   active: string;
   /** Emits the selected key on click and on arrow navigation. Tabs never selects on its own. */
@@ -141,24 +158,29 @@ const TabsRoot: FunctionComponent<ITabsRootProps> = ({
   active,
   onSelect$,
   label,
+  fill,
   children,
   testId,
 }) => {
   const baseId = useId();
   return (
-    <TabsContext.Provider value={{ active, onSelect$, label, baseId }}>
-      <div data-testid={testId}>{children}</div>
+    <TabsContext.Provider
+      value={{ active, onSelect$, label, baseId, fill: fill === true }}
+    >
+      <div className={tabsRoot({ fill })} data-testid={testId}>
+        {children}
+      </div>
     </TabsContext.Provider>
   );
 };
 
 const TabsList: FunctionComponent<ITabsListProps> = ({ children, testId }) => {
-  const { label } = useTabsContract('List');
+  const { label, fill } = useTabsContract('List');
   return (
     <div
       role="tablist"
       aria-label={label}
-      className={tabsList()}
+      className={tabsList({ fill })}
       data-testid={testId}
     >
       {children}
@@ -221,7 +243,7 @@ const TabsPanel: FunctionComponent<ITabsPanelProps> = ({
   children,
   testId,
 }) => {
-  const { active, baseId } = useTabsContract('Panel');
+  const { active, baseId, fill } = useTabsContract('Panel');
   const isActive = active === value;
   return (
     <div
@@ -230,7 +252,7 @@ const TabsPanel: FunctionComponent<ITabsPanelProps> = ({
       aria-labelledby={tabId(baseId, value)}
       hidden={!isActive}
       tabIndex={isActive ? 0 : undefined}
-      className={tabsPanel()}
+      className={tabsPanel({ fill })}
       data-testid={testId}
     >
       {isActive ? children : undefined}
@@ -271,11 +293,23 @@ const TabsPanel: FunctionComponent<ITabsPanelProps> = ({
  *   `foreground`, constant thickness in both states, so switching shifts no widths and no weights.
  *   Keyboard focus is the separate shared focus ring. Colour moves on the one motion token.
  *
+ * - With `fill`, Root takes the allocated parent height; List keeps its content height and the
+ *   active Panel takes the remainder. Its definite height bounds a direct Pane or bounded Table.
+ *   Switching views changes neither Root height nor List position. No scrolling or spacing is added.
+ *   In an unsized parent the panel retains content height; no bound is invented.
+ * - Without `fill` (including false or null), the existing content-height composition is unchanged.
+ *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - One List with Tab elements as direct DOM children (arrays and fragments are supported),
  *   and the Panels under the same Root - as siblings of the List, or with it inside one
  *   arrangement such as a `Stack` (see the separation guidance below). Do not wrap tabs in host
  *   elements.
+ * - For `fill`, List and Panels must be direct DOM children of Root (fragments are fine), with
+ *   one height-accepting child directly inside the active Panel. Supply a definite parent height
+ *   and enough room for List and the child's fixed content. An unsized Stack between Root and
+ *   members, or between Panel and its child, breaks that height chain. Compose content spacing
+ *   inside the Pane's slots instead; Tabs adds no gap. In an unsized parent the enclosing page
+ *   owns overflow. A bounded Table requires the separate #142 API.
  * - A label is a meaningful visible text name, with non-interactive decoration at most: no link,
  *   button, input or other focusable descendant, since the tab is the one control and a nested
  *   control inside a `button` is invalid. Decorative parts - an icon that repeats the text - carry
@@ -295,8 +329,8 @@ const TabsPanel: FunctionComponent<ITabsPanelProps> = ({
  *   do not fit, so a label is never the reason to shorten a name.
  * - This is not a router: no location, no history, no deep links. Wire `onSelect$` to whatever
  *   owns the active key and pass that key back in.
- * - Tabs sets no spacing between the row and the panel; the separation is a `Stack` between Root
- *   and its members - `<Tabs.Root><Stack gap="region"><Tabs.List/>…<Tabs.Panel/>…</Stack>
+ * - In the default content-height mode, Tabs sets no spacing between the row and the panel;
+ *   the separation is a `Stack` between Root and its members - `<Tabs.Root><Stack gap="region"><Tabs.List/>…<Tabs.Panel/>…</Stack>
  *   </Tabs.Root>`. `gap="stack"` holds the row and its view together as one block; `gap="region"`
  *   sets the view apart as a region of its own. Inactive panels are hidden, so the gap is exactly
  *   one whichever panel is active, from the token the consumer's other groups already use.

package/src/Layout/Dialog/Dialog.tsx

@@ -19,7 +19,7 @@ import { DialogNamingError } from './DialogNamingError';
 // The layout classes ride the open: variant - a bare `flex` would defeat the UA's
 // dialog:not([open]) hiding. Tailwind's preflight zeroes the UA's centering margins (m-auto
 // restores them) and strips ::backdrop, so the Scrim colour and blur are declared here.
-// overflow-hidden overrides the UA's `dialog { overflow: auto }` - only Content may scroll.
+// overflow-hidden overrides the UA's `dialog { overflow: auto }` - Content or its delegated child owns scrolling.
 const dialogRoot = cva(
   [
     'open:flex open:flex-col m-auto p-0 overflow-hidden',
@@ -67,10 +67,16 @@ const dialogDescription = cva(
 // this scrolls. Its hairline exists only when a header region stands before it.
 const dialogContent = cva(
   [
-    'grow shrink min-h-0 overflow-y-auto',
+    'grow shrink min-h-0 min-w-0',
     'px-[var(--space-region)] py-[var(--space-region)]',
     '[&:not(:first-child)]:border-t [&:not(:first-child)]:border-border',
   ].join(' '),
+  {
+    variants: {
+      scrollOwner: { body: 'overflow-y-auto', child: 'flex flex-col' },
+    },
+    defaultVariants: { scrollOwner: 'body' },
+  },
 );
 
 // An end-aligned row in consumer DOM order, wrapping on narrow screens without reversing. Its
@@ -173,7 +179,8 @@ export interface IDialogDescriptionProps {
   testId?: string;
 }
 
-export interface IDialogContentProps {
+export interface IDialogContentProps
+  extends VariantProps<typeof dialogContent> {
   /** Arbitrary task content, composed and owned by the consumer. */
   children: ReactNode;
   testId?: string;
@@ -385,13 +392,14 @@ const DialogDescription: FunctionComponent<IDialogDescriptionProps> = ({
 
 const DialogContent: FunctionComponent<IDialogContentProps> = ({
   children,
+  scrollOwner,
   testId,
 }) => {
   useDialogContract('Content');
   return (
     <div
       data-dialog-member={'content'}
-      className={dialogContent()}
+      className={dialogContent({ scrollOwner })}
       data-testid={testId}
     >
       {children}
@@ -420,7 +428,7 @@ const DialogActions: FunctionComponent<IDialogActionsProps> = ({
  * the platform `<dialog>` and `showModal()`: the browser owns the top layer, background inertness
  * and the modal keyboard boundary; the consumer owns all wording, controls, outcomes and
  * replacement. Composed from five members: `Root` carries the contract, `Title` the visible name,
- * `Description` one connected line, `Content` the only scrollable region, `Actions` the controls.
+ * `Description` one connected line, `Content` the scrolling region or holder of one bounded child, `Actions` the controls.
  *
  * @Guarantees — enforced on every render
  * - Presents through `showModal()`/`close()` - no portal, focus trap or polyfill - so background
@@ -443,7 +451,9 @@ const DialogActions: FunctionComponent<IDialogActionsProps> = ({
  * - `extent="screen"` (the default) fills the viewport minus the `--gutter` inline and
  *   `--space-region` block insets, header and Actions fixed, only `Content` scrolling.
  *   `extent="content"` holds a fixed 32rem capped to the viewport with content-driven height;
- *   `Content` scrolls only as the emergency fallback when fitting is physically impossible.
+ *   Default `Content` scrolls as the fallback when its content exceeds available space.
+ * - `Content scrollOwner="child"` passes available height to one bounded child without scrolling.
+ *   A bounded Table then owns both axes and pins its header; title, description and actions stay fixed.
  * - Regions take `--space-region` padding with `--space-stack` between Title and Description and
  *   between Actions controls; hairlines separate header from `Content` and `Content` from
  *   `Actions` only where both neighbours exist. The surface reads `--radius-dialog`,
@@ -451,6 +461,9 @@ const DialogActions: FunctionComponent<IDialogActionsProps> = ({
  *   with the theme's optional `--scrim-blur`.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
+ * - In child-scroll mode provide one child that accepts the height allocation and owns overflow.
+ *   Intermediate wrappers must preserve that allocation. Fixed regions must fit the viewport and
+ *   leave usable room for the child; a Table needs room for its header and readable rows.
  * - Direct children in the order `Title`, `Description`, `Content`, `Actions`, at most one of
  *   each; `Actions` is present and holds at least one explicit dismissal control, wired to the
  *   same dismissal and visibility transitions. Cancel-before-Confirm order puts initial focus on

package/src/Layout/Form/Form.tsx

@@ -1,5 +1,6 @@
 import { cva } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
+import { FormConfigurationError } from './FormConfigurationError';
 
 /** Which of the four states the page has put the form in. Owned by the page, never by Form: the
  *  component renders the state it is given and never decides which one it is in. */
@@ -78,7 +79,7 @@ export const Form: FunctionComponent<IFormProps> = ({
     note !== undefined && note !== null && typeof note !== 'boolean';
 
   if (state === 'sent' && !hasNote) {
-    throw new Error(
+    throw new FormConfigurationError(
       'Form in the `sent` state must be given a `note` - it is the outcome message.',
     );
   }

package/src/Layout/Form/FormConfigurationError.ts

@@ -0,0 +1,6 @@
+export class FormConfigurationError extends Error {
+  constructor(reason: string) {
+    super(`Form configuration is invalid: ${reason}`);
+    this.name = 'FormConfigurationError';
+  }
+}

package/src/Layout/Pane/Pane.tsx

@@ -0,0 +1,272 @@
+import { ScreenBodyAllocation } from 'Layout/Screen/ScreenBodyAllocation';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  type FunctionComponent,
+  type ReactNode,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+
+const pane = cva(
+  'box-border flex h-full min-h-0 min-w-0 flex-col gap-[var(--space-stack)] border border-solid border-border bg-surface text-foreground p-[var(--space-box-inset)] [overflow-wrap:anywhere]',
+);
+const paneSection = cva('min-w-0 shrink-0');
+const paneBody = cva('min-h-0 min-w-0 flex-[0_1_auto]', {
+  variants: {
+    scrollOwner: {
+      body: '[&>div]:flow-root [&>div]:w-fit [&>div]:min-w-full [&>div]:p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))] overflow-auto overscroll-contain outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]',
+      child: '',
+    },
+  },
+  defaultVariants: { scrollOwner: 'body' },
+});
+
+const useOverflow = (
+  container: { current: HTMLDivElement | null },
+  content: { current: HTMLDivElement | null },
+  ownsScroll: boolean,
+): boolean => {
+  const [isScrollable, setIsScrollable] = useState(true);
+  useLayoutEffect(() => {
+    const element = container.current;
+    if (!element || !ownsScroll) return;
+    const measure = () =>
+      setIsScrollable(
+        element.scrollHeight > element.clientHeight ||
+          element.scrollWidth > element.clientWidth ||
+          element === element.ownerDocument.activeElement,
+      );
+    measure();
+    const observer =
+      typeof ResizeObserver === 'undefined'
+        ? undefined
+        : new ResizeObserver(measure);
+    observer?.observe(element);
+    if (content.current) observer?.observe(content.current);
+    const mutations = new MutationObserver(measure);
+    mutations.observe(element, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+    window.addEventListener('resize', measure);
+    element.addEventListener('blur', measure);
+    return () => {
+      observer?.disconnect();
+      mutations.disconnect();
+      window.removeEventListener('resize', measure);
+      element.removeEventListener('blur', measure);
+    };
+  }, [container, content, ownsScroll]);
+  return isScrollable;
+};
+
+export interface IPaneRootProps {
+  children?: ReactNode;
+  /** A non-empty name makes the enclosure an accessible group, as with Box. */
+  name?: string;
+  testId?: string;
+}
+export interface IPaneSectionProps {
+  children?: ReactNode;
+  testId?: string;
+}
+export interface IPaneBodyProps extends VariantProps<typeof paneBody> {
+  children?: ReactNode;
+  /** Names the body while overflowing. Unused when the child owns scrolling. */
+  ariaLabel: string;
+  testId?: string;
+}
+
+const parseLength = (value: string): number => Number.parseFloat(value) || 0;
+
+const blockEdges = (element: Element): number => {
+  const style = getComputedStyle(element);
+  return (
+    parseLength(style.paddingTop) +
+    parseLength(style.paddingBottom) +
+    parseLength(style.borderTopWidth) +
+    parseLength(style.borderBottomWidth)
+  );
+};
+
+// HTML semantics describe the minimum usable item, including delegated tables. No Table internals
+// or consumer selectors participate. A tall row/control must fit intact, with its focus extent.
+const usableBodyHeight = (body: HTMLElement): number => {
+  let minimum = 0;
+  for (const element of [body, ...body.querySelectorAll('*')]) {
+    const style = getComputedStyle(element);
+    if (style.display === 'none') continue;
+    const line = parseLength(style.lineHeight) || parseLength(style.fontSize);
+    const ring = parseLength(
+      getComputedStyle(body.firstElementChild ?? body).paddingTop,
+    );
+    const item = element.matches(
+      'tr, button, input, select, textarea, [role="button"]',
+    )
+      ? element.getBoundingClientRect().height
+      : line;
+    minimum = Math.max(minimum, item + 2 * ring);
+  }
+  const table = body.querySelector('table');
+  const fixedTable = table
+    ? Array.from(table.children)
+        .filter((element) => element.matches('caption, thead'))
+        .reduce(
+          (height, element) => height + element.getBoundingClientRect().height,
+          0,
+        )
+    : 0;
+  return minimum + fixedTable + blockEdges(body);
+};
+
+const useScreenFallback = (root: {
+  current: HTMLDivElement | null;
+}): boolean => {
+  const allocation = useContext(ScreenBodyAllocation);
+  const [isUnusable, setIsUnusable] = useState(false);
+  useLayoutEffect(() => {
+    const element = root.current;
+    const frame = allocation;
+    if (!element || !frame) return;
+    const measure = () => {
+      const sections = Array.from(element.children);
+      const body = sections.find((section) =>
+        section.hasAttribute('data-pane-body'),
+      );
+      const fixed = sections
+        .filter((section) => section !== body)
+        .reduce(
+          (height, section) => height + section.getBoundingClientRect().height,
+          0,
+        );
+      const gaps =
+        Math.max(0, sections.length - 1) *
+        parseLength(getComputedStyle(element).rowGap);
+      setIsUnusable(
+        frame.getBoundingClientRect().height <
+          fixed +
+            gaps +
+            blockEdges(element) +
+            (body instanceof HTMLElement ? usableBodyHeight(body) : 0),
+      );
+    };
+    const observer =
+      typeof ResizeObserver === 'undefined'
+        ? undefined
+        : new ResizeObserver(measure);
+    const observe = () => {
+      observer?.disconnect();
+      observer?.observe(frame);
+      observer?.observe(element);
+      for (const child of element.querySelectorAll('*'))
+        observer?.observe(child);
+      measure();
+    };
+    observe();
+    const mutations = new MutationObserver(observe);
+    mutations.observe(element, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+    window.addEventListener('resize', measure);
+    return () => {
+      observer?.disconnect();
+      mutations.disconnect();
+      window.removeEventListener('resize', measure);
+    };
+  }, [allocation, root]);
+  return isUnusable;
+};
+
+const Root: FunctionComponent<IPaneRootProps> = ({
+  children,
+  name,
+  testId,
+}) => {
+  const root = useRef<HTMLDivElement>(null);
+  const isUnusable = useScreenFallback(root);
+  return (
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: the name and group role are assigned together
+    <div
+      ref={root}
+      data-screen-unusable={isUnusable || undefined}
+      className={pane()}
+      role={name ? 'group' : undefined}
+      aria-label={name || undefined}
+      data-testid={testId}
+    >
+      {children}
+    </div>
+  );
+};
+const Head: FunctionComponent<IPaneSectionProps> = ({ children, testId }) => (
+  <div className={paneSection()} data-testid={testId}>
+    {children}
+  </div>
+);
+const Foot: FunctionComponent<IPaneSectionProps> = ({ children, testId }) => (
+  <div className={paneSection()} data-testid={testId}>
+    {children}
+  </div>
+);
+const Body: FunctionComponent<IPaneBodyProps> = ({
+  children,
+  ariaLabel,
+  scrollOwner,
+  testId,
+}) => {
+  const container = useRef<HTMLDivElement>(null);
+  const content = useRef<HTMLDivElement>(null);
+  const ownsScroll = scrollOwner !== 'child';
+  const isScrollable =
+    useOverflow(container, content, ownsScroll) && ownsScroll;
+  return (
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: the name and group role are assigned together
+    <div
+      data-pane-body=""
+      ref={container}
+      className={paneBody({ scrollOwner: scrollOwner ?? 'body' })}
+      role={isScrollable ? 'group' : undefined}
+      aria-label={isScrollable ? ariaLabel : undefined}
+      tabIndex={isScrollable ? 0 : undefined}
+      data-testid={testId}
+    >
+      {ownsScroll ? <div ref={content}>{children}</div> : children}
+    </div>
+  );
+};
+
+/**
+ * A parent-bounded enclosure with optional content-height Head and Foot around a shrinking Body.
+ *
+ * @Guarantees
+ * - Root fills the allocated height, including its border and box inset. Without a definite
+ *   parent height it grows with content; a stacked parent or enclosing body owns scrolling.
+ * - Head and Foot never shrink. Body scrolls both axes as needed and short content does not
+ *   stretch: Foot follows it, with any unused height left in Root rather than inside Body.
+ * - Root paints surface, foreground, border and box inset, square and without elevation.
+ *   The stack space role separates slots; a non-empty name exposes a group, never a landmark.
+ * - Default Body is the sole scroll region: a named group and keyboard stop only while
+ *   overflowing, retained while focused. It reserves the shared focus ring's room and leaves
+ *   native focus reveal, scrolling and child keyboard interactions intact.
+ * - Body scrollOwner="child" passes its allocated height directly to its child, without an
+ *   inner wrapper, overflow, group or keyboard stop. The child owns scroll semantics and naming.
+ *   Use this for a bounded Table: its wrapper must own both axes so its header stays in view.
+ *
+ * @CallerMustEnsure
+ * - Compose at most one Head, Body and Foot, in that order, directly inside Root; all are optional.
+ *   Do not nest panes. The consumer owns all wording, facts, actions and internal arrangement.
+ * - Supply a finite parent height to bound a pane, and enough room for Head, Foot, inset and gaps.
+ *   At smaller sizes use an unsized stacked arrangement in a scrolling page or Shell body.
+ * - In child mode supply one child that accepts its parent's allocated height and handles its
+ *   own overflow and focus ring. Intermediate wrappers must preserve that allocation.
+ * - Inside Screen, fixed regions and the usable body minimum participate in whole-content
+ *   fallback and restoration. Outside Screen the parent remains responsible for that policy.
+ * - Filled ColumnLayout columns and active Stepper panels can pass the bound to Root. Keep
+ *   those holders and Pane directly composed so no intermediate wrapper loses the allocation.
+ */
+export const Pane = { Root, Head, Body, Foot } as const;

package/src/Layout/Screen/Screen.tsx

@@ -0,0 +1,61 @@
+import { cva } from 'class-variance-authority';
+import { type FunctionComponent, type ReactNode, useState } from 'react';
+import { ScreenBodyAllocation } from './ScreenBodyAllocation';
+
+const screen = cva(
+  'box-border grid h-full min-h-0 min-w-0 grid-rows-[minmax(0,1fr)] px-[var(--gutter)] py-[var(--space-region)] [&:has(>header)]:grid-rows-[auto_minmax(0,1fr)] [&:has(>header)]:gap-[var(--space-region)]',
+);
+const screenHeading = cva('min-w-0');
+const screenBody = cva(
+  'h-full min-h-0 min-w-0 [&>div]:h-full [&:has([data-screen-unusable])>div]:h-auto',
+);
+export interface IScreenProps {
+  /** Consumer-owned visible heading; omit when the heading belongs inside a Pane. */
+  heading?: ReactNode;
+  /** Height-passing content, normally a filling ColumnLayout with direct Panes. */
+  children: ReactNode;
+  testId?: string;
+}
+/**
+ * One semantic main with an optional heading and the remaining allocated height for its content.
+ *
+ * @Guarantees
+ * - Uses the page gutter horizontally and region spacing vertically and beneath a present heading.
+ * - Omitted, undefined, null and false headings reserve no wrapper, track or gap. Arbitrary
+ *   components are not inspected for emptiness. Changing the slot never remounts content.
+ * - Adds no scrollport or tab stop. Pane bodies scroll independently while fixed regions plus a
+ *   complete text line or ordinary row/control and focus room fit. Otherwise all content grows
+ *   into the enclosing scroll owner. Bounds restore without probing or remounting children.
+ * - Unsized parents use natural height; ColumnLayout retains its container-fit stacking rule.
+ *
+ * @CallerMustEnsure
+ * - Supply the visible heading here or inside a panel, and exactly one main for the page.
+ * - Use Shell's console body, optionally Sidebar.Root fill / Sidebar.Content, to allocate height
+ *   and own fallback scrolling. Every intermediate wrapper must pass that allocation through.
+ * - Compose filling ColumnLayout with direct Pane children; retain Pane's Head/Body/Foot order.
+ *   Body can delegate to one bounded Table. Additional height-consuming wrappers need their own
+ *   allocation contract and are not measured as panel fixed regions by Screen.
+ * - Keep the Shell bar short enough to leave a usable enclosing scrollport. This is representative
+ *   panel fit, not a guarantee that arbitrary content fits any particular viewport.
+ */
+export const Screen: FunctionComponent<IScreenProps> = ({
+  heading,
+  children,
+  testId,
+}) => {
+  const [allocation, setAllocation] = useState<HTMLDivElement | null>(null);
+  return (
+    <main className={screen()} data-testid={testId}>
+      {heading !== undefined && heading !== null && heading !== false && (
+        <header className={screenHeading()}>{heading}</header>
+      )}
+      <div ref={setAllocation} className={screenBody()}>
+        <div>
+          <ScreenBodyAllocation.Provider value={allocation}>
+            {children}
+          </ScreenBodyAllocation.Provider>
+        </div>
+      </div>
+    </main>
+  );
+};

package/src/Layout/Screen/ScreenBodyAllocation.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+// Screen's persistent remainder, not its growing fallback content. Pane reads this same box
+// in both modes, so restoration never needs a temporary bound or a second render of children.
+export const ScreenBodyAllocation = createContext<HTMLDivElement | null>(null);