@multiplatform.one/components 7.7.6 → 7.10.0

package/src/layouts/PaneScaffold.stories.tsx

@@ -8,6 +8,7 @@ import {
 } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { Paragraph, Text, YStack } from "tamagui";
+import { Text as HouseText } from "../Text";
 import { componentColors } from "../componentColors";
 import {
   FeedLayout,
@@ -43,11 +44,7 @@ function PaneFill({ label, hint, muted }: { label: string; hint?: string; muted?
       gap="$2"
     >
       <Paragraph fontWeight="600">{label}</Paragraph>
-      {hint ? (
-        <Text color={componentColors.text.muted} fontSize="$2">
-          {hint}
-        </Text>
-      ) : null}
+      {hint ? <HouseText fontSize="$2">{hint}</HouseText> : null}
     </YStack>
   );
 }
@@ -113,7 +110,7 @@ const meta: Meta<typeof PaneScaffold> = {
     docs: {
       description: {
         component:
-          "Adaptive pane shell (DG-LAY-01/02). Size classes: compact <640, medium ≥640, expanded ≥860 (FloatingPanel), large ≥1024, xl ≥1280. Two panes from expanded up unless `maxPanes` ejects. Side-by-side uses a hairline sash (Linear / VS Code / Polaris Frame); pass `paneGap` to eject to spaced columns.",
+          'Adaptive TWO-pane shell (DG-LAY-01/02) — `primary` and `secondary`, no more. Size classes: compact <640, medium ≥640, expanded ≥860 (FloatingPanel), large ≥1024, xl ≥1280. Two panes from expanded up unless `maxPanes` ejects. Side-by-side uses a hairline sash (Linear / VS Code / Polaris Frame); pass `paneGap` to eject to spaced columns. Below expanded the panes stack and the sash goes away, so nothing is hidden on a phone; `narrowLayout="swap"` (what `activePane` opts into) is the list-detail exception. Three regions come from nesting a scaffold inside a pane — see the Nested three-region story; the size class rides down, so the inner scaffold stacks with the outer.',
       },
     },
   },
@@ -123,12 +120,12 @@ const meta: Meta<typeof PaneScaffold> = {
       options: ["compact", "medium", "expanded", "large", "xl"],
     },
     activePane: { control: "radio", options: ["primary", "secondary"] },
+    narrowLayout: { control: "radio", options: ["stack", "swap"] },
     maxPanes: { control: "radio", options: [1, 2, undefined] },
     resizable: { control: "boolean" },
   },
   args: {
     sizeClass: "expanded",
-    activePane: "primary",
   },
 };
 export default meta;
@@ -150,7 +147,63 @@ export const TwoPane: Story = {
   ),
 };
 
+export const CompactStacked: Story = {
+  name: "Compact (stacked)",
+  args: { sizeClass: "compact" },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Below the two-pane budget the secondary sits under the primary and the sash is gone. Reflow, not hide.",
+      },
+    },
+  },
+  render: (args) => (
+    <YStack height={400} padding="$4">
+      <SplitFrame>
+        <PaneScaffold
+          {...args}
+          primary={<PaneFill label="Primary" />}
+          secondary={<PaneFill label="Secondary" muted />}
+        />
+      </SplitFrame>
+    </YStack>
+  ),
+};
+
+export const NestedThreeRegion: Story = {
+  name: "Nested three-region",
+  args: { sizeClass: "compact" },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Rail | (centre | inspector): the recipe for three regions. Switch `sizeClass` to `xl` for two seams side by side; on compact all three stack, none is dropped.",
+      },
+    },
+  },
+  render: (args) => (
+    <YStack height={520} padding="$4">
+      <SplitFrame height={480}>
+        <PaneScaffold
+          {...args}
+          paneFlex={[1, 3]}
+          primary={<PaneFill label="Rail" muted />}
+          secondary={
+            <PaneScaffold
+              paneFlex={[2, 1]}
+              primary={<PaneFill label="Centre" hint="Main canvas" />}
+              secondary={<PaneFill label="Inspector" muted />}
+            />
+          }
+        />
+      </SplitFrame>
+    </YStack>
+  ),
+};
+
 export const CompactActiveSecondary: Story = {
+  name: "Compact (swap)",
   args: { sizeClass: "compact", activePane: "secondary" },
   render: (args) => (
     <YStack height={400} padding="$4">
@@ -218,9 +271,7 @@ export const ProseReadingWidth: StoryObj<typeof ReadingWidth> = {
         </Paragraph>
       </ReadingWidth>
       <ReadingWidth measure="none">
-        <Paragraph color={componentColors.text.muted}>
-          Ejected measure (full width of parent).
-        </Paragraph>
+        <HouseText>Ejected measure (full width of parent).</HouseText>
       </ReadingWidth>
     </YStack>
   ),

package/src/layouts/PaneScaffold.tsx

@@ -1,6 +1,11 @@
 /**
  * PaneScaffold + canonical layouts (DG-LAY-02) — W11.
  *
+ * PaneScaffold is a TWO-pane scaffold: `primary` and `secondary`, no more.
+ * Three regions come from NESTING one scaffold inside a pane of another. The
+ * resolved size class rides a context down, so an inner scaffold reflows with
+ * the outer one instead of splitting inside a stacked column.
+ *
  * Devs declare pane roles; the scaffold picks 1 vs 2 columns from the
  * canonical layout size class (`expanded` @ 860 = two-pane budget).
  *
@@ -13,7 +18,10 @@
  * - **Supporting-pane**: secondary is meaningful only relative to primary.
  * - **Feed**: equal-weight cards in a responsive grid.
  *
- * Compact/medium show one pane; pass `activePane` to choose which.
+ * Below the two-pane budget the panes STACK (primary above secondary) and the
+ * sash goes away — a drag handle is a pointer affordance and there is nothing
+ * to drag with a thumb. Hiding a pane is the list-detail navigation idiom, not
+ * the responsive default: pass `activePane` (or `narrowLayout="swap"`) for it.
  */
 
 import {
@@ -31,7 +39,17 @@ import {
   type LayoutSizeClass,
   READING_WIDTH_CH,
 } from "@multiplatform.one/theme";
-import { Children, useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react";
+import {
+  Children,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import type { XStackProps, YStackProps } from "tamagui";
 import { isWeb, XStack, YStack } from "tamagui";
 import { useDirection } from "../hooks/useDirection";
@@ -51,10 +69,17 @@ export interface PaneScaffoldProps extends Omit<XStackProps, "children"> {
   primary: ReactNode;
   secondary?: ReactNode;
   /**
-   * Which pane to show when only one column fits. Default: `primary`.
-   * List-detail on compact typically flips to `secondary` once an item is selected.
+   * Which pane to show when `narrowLayout` is `swap`. Default: `primary`.
+   * List-detail on compact typically flips to `secondary` once an item is
+   * selected. Passing this prop opts the scaffold into `swap`.
    */
   activePane?: PaneRole;
+  /**
+   * What happens below the two-pane budget. `stack` (the default) puts
+   * secondary under primary so no content is unreachable; `swap` renders
+   * `activePane` alone, which is the list-detail navigation idiom.
+   */
+  narrowLayout?: "stack" | "swap";
   /** Override the default pane budget (compact/medium → 1, expanded+ → 2). */
   maxPanes?: 1 | 2;
   /**
@@ -82,6 +107,14 @@ export interface PaneScaffoldProps extends Omit<XStackProps, "children"> {
   sizeClass?: LayoutSizeClass;
 }
 
+/**
+ * Resolved size class handed down to nested scaffolds. Without it an inner
+ * scaffold reads the WINDOW while the outer one was overridden (Storybook
+ * viewport, template test), so a stacked outer could still hold a split
+ * inner and the narrow reflow would only go one level deep.
+ */
+const PaneSizeClassContext = createContext<LayoutSizeClass | null>(null);
+
 /**
  * Adaptive one-/two-pane shell. Geometry only — surface colors stay stable
  * across breakpoints (Material M-L5).
@@ -89,7 +122,8 @@ export interface PaneScaffoldProps extends Omit<XStackProps, "children"> {
 export function PaneScaffold({
   primary,
   secondary,
-  activePane = "primary",
+  activePane: activePaneProp,
+  narrowLayout: narrowLayoutProp,
   maxPanes: maxPanesProp,
   paneFlex = [1, 1],
   paneGap,
@@ -102,23 +136,73 @@ export function PaneScaffold({
   ...rest
 }: PaneScaffoldProps) {
   const liveClass = useLayoutSizeClass();
-  const sizeClass = sizeClassProp ?? liveClass;
+  const inheritedClass = useContext(PaneSizeClassContext);
+  const sizeClass = sizeClassProp ?? inheritedClass ?? liveClass;
   // Explicit `maxPanes` is the eject hatch (force 1 or 2 regardless of class).
   const budget = maxPanesProp ?? defaultMaxPanes(sizeClass);
   const hasSecondary = secondary !== null && secondary !== undefined;
-  const multi = budget >= 2 && hasSecondary;
+  const split = budget >= 2 && hasSecondary;
   const gapped = paneGap !== undefined;
   const gap = gapped ? paneGap : undefined;
-  const resizable = (resizableProp ?? !gapped) && multi && !gapped;
+  const resizable = (resizableProp ?? !gapped) && split && !gapped;
+  // `activePane` only decides anything when a pane is dropped, so passing it
+  // IS the swap opt-in. Everything else stacks: a scaffold that hides its
+  // secondary by default leaves that content unreachable on a phone.
+  const narrowLayout = narrowLayoutProp ?? (activePaneProp === undefined ? "stack" : "swap");
+  const stacked = !split && hasSecondary && narrowLayout === "stack";
+  const [primaryFlex, secondaryFlex] = paneFlex;
 
   // flexBasis auto, not the flex:1 shorthand's 0%: react-native-web resets
   // min-height to 0, so a 0% basis contributes zero intrinsic height inside
   // auto-height scroll flows (Screen scroll pages) and the scaffold collapses,
   // painting pane content over whatever follows. Bounded parents still fill
   // (grow 1) exactly as before.
-  if (!multi) {
+  let content: ReactNode;
+  if (stacked) {
+    content = (
+      <YStack
+        flexGrow={1}
+        flexShrink={1}
+        flexBasis="auto"
+        minWidth={0}
+        width="100%"
+        gap={gap ?? 0}
+        data-testid="pane-scaffold"
+        data-panes="2"
+        data-pane-layout="stack"
+        data-size-class={sizeClass}
+        data-sash="false"
+        {...rest}
+      >
+        <YStack
+          flexGrow={1}
+          flexShrink={1}
+          flexBasis="auto"
+          minWidth={0}
+          minHeight={0}
+          width="100%"
+          {...(gapped ? undefined : paneHairlineBottom)}
+          data-testid="pane-primary"
+        >
+          {primary}
+        </YStack>
+        <YStack
+          flexGrow={1}
+          flexShrink={1}
+          flexBasis="auto"
+          minWidth={0}
+          minHeight={0}
+          width="100%"
+          data-testid="pane-secondary"
+        >
+          {secondary}
+        </YStack>
+      </YStack>
+    );
+  } else if (!split) {
+    const activePane = activePaneProp ?? "primary";
     const shown = activePane === "secondary" && hasSecondary ? secondary : primary;
-    return (
+    content = (
       <YStack
         flexGrow={1}
         flexShrink={1}
@@ -127,62 +211,64 @@ export function PaneScaffold({
         width="100%"
         data-testid="pane-scaffold"
         data-panes="1"
+        data-pane-layout="single"
         data-size-class={sizeClass}
         {...rest}
       >
         {shown}
       </YStack>
     );
+  } else {
+    content = (
+      <XStack
+        flexGrow={1}
+        flexShrink={1}
+        flexBasis="auto"
+        minWidth={0}
+        minHeight={0}
+        width="100%"
+        alignItems="stretch"
+        gap={gap ?? 0}
+        position="relative"
+        data-testid="pane-scaffold"
+        data-panes="2"
+        data-pane-layout="split"
+        data-size-class={sizeClass}
+        data-sash={resizable ? "true" : "false"}
+        {...rest}
+      >
+        {resizable ? (
+          <ResizablePanes
+            primary={primary}
+            secondary={secondary}
+            primaryFlex={primaryFlex}
+            secondaryFlex={secondaryFlex}
+            minFraction={minPaneFraction}
+            maxFraction={maxPaneFraction}
+            fraction={primaryFractionProp}
+            onFractionChange={onPrimaryFractionChange}
+          />
+        ) : (
+          <>
+            <YStack
+              flex={primaryFlex}
+              minWidth={0}
+              minHeight={0}
+              {...(gapped ? undefined : paneHairlineEnd)}
+              data-testid="pane-primary"
+            >
+              {primary}
+            </YStack>
+            <YStack flex={secondaryFlex} minWidth={0} minHeight={0} data-testid="pane-secondary">
+              {secondary}
+            </YStack>
+          </>
+        )}
+      </XStack>
+    );
   }
 
-  const [primaryFlex, secondaryFlex] = paneFlex;
-
-  return (
-    <XStack
-      flexGrow={1}
-      flexShrink={1}
-      flexBasis="auto"
-      minWidth={0}
-      minHeight={0}
-      width="100%"
-      alignItems="stretch"
-      gap={gap ?? 0}
-      position="relative"
-      data-testid="pane-scaffold"
-      data-panes="2"
-      data-size-class={sizeClass}
-      data-sash={resizable ? "true" : "false"}
-      {...rest}
-    >
-      {resizable ? (
-        <ResizablePanes
-          primary={primary}
-          secondary={secondary}
-          primaryFlex={primaryFlex}
-          secondaryFlex={secondaryFlex}
-          minFraction={minPaneFraction}
-          maxFraction={maxPaneFraction}
-          fraction={primaryFractionProp}
-          onFractionChange={onPrimaryFractionChange}
-        />
-      ) : (
-        <>
-          <YStack
-            flex={primaryFlex}
-            minWidth={0}
-            minHeight={0}
-            {...(gapped ? undefined : paneHairlineEnd)}
-            data-testid="pane-primary"
-          >
-            {primary}
-          </YStack>
-          <YStack flex={secondaryFlex} minWidth={0} minHeight={0} data-testid="pane-secondary">
-            {secondary}
-          </YStack>
-        </>
-      )}
-    </XStack>
-  );
+  return <PaneSizeClassContext.Provider value={sizeClass}>{content}</PaneSizeClassContext.Provider>;
 }
 
 const paneHairlineEnd = isWeb
@@ -194,6 +280,9 @@ const paneHairlineEnd = isWeb
     }
   : { borderEndWidth: hairlineWidth, borderColor: "$borderColor" };
 
+/** Stacked seam: the horizontal twin of `paneHairlineEnd`. */
+const paneHairlineBottom = { ...hairline.bottom, borderColor: "$borderColor" };
+
 function clampFraction(value: number, min: number, max: number): number {
   return Math.min(max, Math.max(min, value));
 }
@@ -458,12 +547,17 @@ export interface ListDetailLayoutProps extends Omit<
  * Canonical list-detail: explorative list + item detail. Detail remains
  * meaningful without the list (Material M-L4). List is the narrower pane
  * (Linear issue view / VS Code explorer), not a 50/50 split.
+ *
+ * Below the two-pane budget this SWAPS rather than stacks — list and detail
+ * are two steps of one navigation, so `selected` decides which is on screen.
+ * Pass `narrowLayout="stack"` to show both instead.
  */
 export function ListDetailLayout({
   list,
   detail,
   selected = false,
   activePane,
+  narrowLayout,
   ...rest
 }: ListDetailLayoutProps) {
   return (
@@ -472,6 +566,7 @@ export function ListDetailLayout({
       secondary={detail}
       paneFlex={[1, 2]}
       activePane={activePane ?? (selected ? "secondary" : "primary")}
+      narrowLayout={narrowLayout ?? "swap"}
       data-canonical="list-detail"
       {...rest}
     />
@@ -493,6 +588,9 @@ export interface SupportingPaneLayoutProps extends Omit<
  * Canonical supporting-pane: primary content + contextual support (~⅔ / ⅓).
  * Supporting content is only meaningful relative to primary (Material M-L4).
  * Seam is a hairline (Polaris Frame navigation / Linear properties column).
+ *
+ * Below the two-pane budget the supporting content stacks under the primary.
+ * It is never dropped: it has no screen of its own to be reached from.
  */
 export function SupportingPaneLayout({ children, supporting, ...rest }: SupportingPaneLayoutProps) {
   return (

package/src/layouts/SafeAreaWrapper/SafeAreaWrapper.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Paragraph, YStack } from "tamagui";
-import { componentColors } from "../../componentColors";
+import { Text } from "../../Text";
 import { SafeAreaWrapper } from "./index";
 
 const meta: Meta<typeof SafeAreaWrapper> = {
@@ -26,10 +26,10 @@ export const Default: Story = {
     <SafeAreaWrapper>
       <YStack>
         <Paragraph>Content inside SafeAreaWrapper</Paragraph>
-        <Paragraph color={componentColors.text.muted}>
+        <Text>
           On native, this respects device safe area insets. On web, it is a simple passthrough
           wrapper.
-        </Paragraph>
+        </Text>
       </YStack>
     </SafeAreaWrapper>
   ),

package/src/layouts/ScreenToolbar.stories.tsx

@@ -26,16 +26,10 @@ export const Default: Story = {
   name: "Main",
   render: () => (
     <ScreenToolbar
-      leading={
-        <Button compact variant="outlined">
-          Back
-        </Button>
-      }
+      leading={<Button compact>Back</Button>}
       trailing={
         <>
-          <Button compact variant="outlined">
-            Cancel
-          </Button>
+          <Button compact>Cancel</Button>
           <Button compact>Save</Button>
         </>
       }
@@ -59,7 +53,6 @@ export const DisabledAndLoading: Story = {
         // the toolbar row's shared control height.
         <Button
           compact
-          variant="outlined"
           disabled
           disabledReason="No screen to go back to"
           disabledReasonPlacement="inline"
@@ -82,22 +75,12 @@ export const ManyActionsNarrow: Story = {
   render: () => (
     <YStack maxWidth={320} borderWidth={1} borderColor="$color6" borderStyle="dashed">
       <ScreenToolbar
-        leading={
-          <Button compact variant="outlined">
-            Back to the previous screen
-          </Button>
-        }
+        leading={<Button compact>Back to the previous screen</Button>}
         trailing={
           <>
-            <Button compact variant="outlined">
-              Duplicate
-            </Button>
-            <Button compact variant="outlined">
-              Archive
-            </Button>
-            <Button compact variant="outlined">
-              Delete permanently
-            </Button>
+            <Button compact>Duplicate</Button>
+            <Button compact>Archive</Button>
+            <Button compact>Delete permanently</Button>
             <Button compact>Save changes</Button>
           </>
         }

package/src/layouts/attachments.tsx

@@ -454,7 +454,7 @@ function AttachmentRow({
               {attachment.fileName}
             </Text>
             <XStack gap="$2" alignItems="center">
-              <Text fontSize="$2" color={componentColors.text.muted}>
+              <Text fontSize="$2" color={knobProps.textAccentColor}>
                 {attachment.formattedSize || formatFileSize(attachment.fileSize)}
               </Text>
               {ext ? (
@@ -627,7 +627,7 @@ export function Attachments({
       {...dropHandlers}
     >
       <PaperclipIcon size={compact ? 20 : 28} />
-      <Text color={componentColors.text.muted} fontSize={compact ? "$2" : "$3"} marginTop="$2">
+      <Text color={knobProps.textAccentColor} fontSize={compact ? "$2" : "$3"} marginTop="$2">
         {noAttachmentsLabel}
       </Text>
     </YStack>
@@ -657,7 +657,7 @@ export function Attachments({
               {label}
               {/* Count hides on error so the badge can't lie (DG-ST-04) */}
               {maxAttachments > 0 && !hasError && (
-                <Text color={componentColors.text.muted} fontSize="$2">
+                <Text color={knobProps.textAccentColor} fontSize="$2">
                   {" "}
                   ({items.length}/{maxAttachments})
                 </Text>
@@ -766,7 +766,7 @@ export function Attachments({
             ) : previewFile ? (
               <YStack alignItems="center" {...knobProps.gap} paddingVertical="$4">
                 {getFileIcon(previewFile, 40)}
-                <Text color={componentColors.text.muted} textAlign="center">
+                <Text color={knobProps.textAccentColor} textAlign="center">
                   {previewUnavailableLabel}
                 </Text>
               </YStack>

package/src/layouts/breadcrumbs.tsx

@@ -23,7 +23,6 @@ import {
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Anchor, Text, XStack, isWeb } from "tamagui";
-import { componentColors } from "../componentColors";
 import { withInterp } from "../shared/t";
 
 /** Approx medium body line box before press-target padding (DG-LAY-04). */
@@ -240,7 +239,7 @@ export function Breadcrumbs({ items, onNavigate, label, maxVisible }: Breadcrumb
             ) : (
               <Text
                 {...knobProps.body}
-                color={componentColors.text.muted}
+                color={knobProps.textAccentColor}
                 fontSize={textSize}
                 fontWeight="400"
                 {...(slot.isCurrent ? { "aria-current": "page" as const } : null)}

package/src/layouts/index.tsx

@@ -12,6 +12,17 @@ export * from "./page";
 export * from "./pageHeadingScope";
 export * from "./PageTemplates";
 export * from "./PaneScaffold";
+// EmptyState is NAMED here rather than left to reach the barrel through
+// `export * from "./page"` (page.tsx re-exports it, so it has always been
+// importable from @multiplatform.one/components — MPO-223's "not exported"
+// premise was wrong, measured against published 7.7.1). Naming it is still
+// worth doing: reachability that rides a transitive star through an unrelated
+// module is the fragility that dropped ProgressCard twice (MPO-53, 5c7af7134),
+// and it reads as absent to anyone grepping this file, which is how a consumer
+// talked itself into a deep `src/layouts/EmptyState` import. `layouts.spec.tsx`
+// asserts every module in this directory is reachable from here, so the next
+// omission fails a test.
+export { EmptyState, type EmptyStateProps } from "./EmptyState";
 export {
   AsyncBoundary,
   AsyncSkeleton,

package/src/layouts/layouts.spec.tsx

@@ -13,6 +13,7 @@ import * as React from "react";
 import { TamaguiProvider, createTamagui } from "tamagui";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import * as Debug from "./Debug";
+import * as EmptyStateModule from "./EmptyState";
 import * as Layouts from "./index";
 import { Sidebar, type SidebarSection } from "./sidebar";
 import { Toolbar, type ToolbarAction } from "./toolbar";
@@ -72,6 +73,56 @@ describe("Layouts Index", () => {
   it("should export Timeline", () => {
     expect(Layouts).toHaveProperty("Timeline");
   });
+
+  // MPO-223. The per-component `it`s above are a hand-kept list, and a hand-kept
+  // list is how ProgressCard fell off the catalog twice (MPO-53, then 5c7af7134):
+  // nobody adds a line for the module they forgot. This walks the directory
+  // instead, so a new module in src/layouts that nothing re-exports fails here
+  // rather than in a consumer's app.
+  //
+  // Scope is this directory's own modules: the top-level files, plus each
+  // subdirectory's index. A subdirectory's internals stay internal on purpose
+  // (SafeAreaWrapper/insets, KeyboardAvoidingWrapper/behavior), and `.native`
+  // variants are the same module on a platform this runner is not.
+  //
+  // Runtime names only — `import * as` cannot see type-only exports, so the
+  // interfaces ride the typecheck. That is enough for the failure this guards:
+  // a missing VALUE is what breaks a build.
+  it("reaches every module under src/layouts from the barrel", () => {
+    // Negations live in the GLOB, not in a filter below it: `eager: true`
+    // imports every match up front, so a `.stories.tsx` skipped afterwards has
+    // already been loaded — and loading one drags the storybook runtime into a
+    // vitest environment that has no preview API (measured: "does not provide
+    // an export named 'definePreview'", whole suite fails to collect).
+    const modules = import.meta.glob<Record<string, unknown>>(
+      [
+        "./*.tsx",
+        "./*/index.tsx",
+        "!./index.tsx",
+        "!./*.spec.tsx",
+        "!./*.stories.tsx",
+        "!./**/*.spec.tsx",
+        "!./**/*.stories.tsx",
+      ],
+      { eager: true },
+    );
+    const unreachable: string[] = [];
+    for (const [file, mod] of Object.entries(modules)) {
+      for (const name of Object.keys(mod)) {
+        if (name === "default") continue;
+        if (!(name in Layouts)) unreachable.push(`${file} -> ${name}`);
+      }
+    }
+    expect(unreachable).toEqual([]);
+  });
+
+  // The import a consumer actually writes. It passed before EmptyState was
+  // named in index.tsx too — page.tsx re-exported it — and this locks the
+  // identity, not just the presence, so a future shadow cannot quietly swap it.
+  it("exports the same EmptyState from the barrel and from its module", () => {
+    expect(Layouts).toHaveProperty("EmptyState");
+    expect(Layouts.EmptyState).toBe(EmptyStateModule.EmptyState);
+  });
 });
 
 // ---------------------------------------------------------------------------

package/src/layouts/page.designLaw.spec.tsx

@@ -135,4 +135,29 @@ describe("density unpinned (LC-76)", () => {
     const frame = container.querySelector('[data-testid="page-section"]') as HTMLElement;
     expect(frame.getAttribute("data-density")).toBe("compact");
   });
+
+  it("Screen's explicit density override reaches nested page primitives", () => {
+    renderWithProviders(
+      <Preset overrides={{ density: "comfortable" }}>
+        <Screen compact scroll={false}>
+          <PageHeader title="Compact screen" />
+          <PageSection title="Inherited section" />
+        </Screen>
+      </Preset>,
+    );
+    expect(screen.getByTestId("page-header").getAttribute("data-density")).toBe("compact");
+    expect(screen.getByTestId("page-section").getAttribute("data-density")).toBe("compact");
+  });
+
+  it("a painted section steps its interior density without shrinking its heading", () => {
+    renderWithProviders(
+      <Preset overrides={{ density: "comfortable" }}>
+        <PageSection surface title="Outer" data-testid="outer-section">
+          <PageSection title="Inner" data-testid="inner-section" />
+        </PageSection>
+      </Preset>,
+    );
+    expect(screen.getByTestId("outer-section").getAttribute("data-density")).toBe("comfortable");
+    expect(screen.getByTestId("inner-section").getAttribute("data-density")).toBe("compact");
+  });
 });