@multiplatform.one/components 7.7.6 → 7.8.0

package/src/layouts/PaneScaffold.spec.tsx

@@ -13,6 +13,37 @@ import * as Layouts from "./index";
 
 afterEach(cleanup);
 
+const originalInnerWidth = window.innerWidth;
+
+/** Drive the real size-class path from a viewport width (setup reads it at render). */
+function setViewportWidth(width: number) {
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: width });
+}
+
+afterEach(() => setViewportWidth(originalInnerWidth));
+
+/**
+ * Rail | (centre | inspector) — the three-region page the kit composes from
+ * two scaffolds. `sizeClass` is set on the OUTER one only, so this also
+ * covers whether the class reaches the inner scaffold.
+ */
+function ThreeRegionPage(props: {
+  sizeClass?: "compact" | "medium" | "expanded" | "large" | "xl";
+}) {
+  return (
+    <PaneScaffold
+      sizeClass={props.sizeClass}
+      primary={<Paragraph>Rail</Paragraph>}
+      secondary={
+        <PaneScaffold
+          primary={<Paragraph>Centre</Paragraph>}
+          secondary={<Paragraph>Inspector</Paragraph>}
+        />
+      }
+    />
+  );
+}
+
 describe("layouts index exports (W11)", () => {
   it("exports PaneScaffold canonical layouts + ReadingWidth", () => {
     expect(Layouts.PaneScaffold).toBe(PaneScaffold);
@@ -24,7 +55,7 @@ describe("layouts index exports (W11)", () => {
 });
 
 describe("PaneScaffold", () => {
-  it("shows one pane on compact/medium", () => {
+  it("stacks both panes below the two-pane budget", () => {
     renderWithProviders(
       <PaneScaffold
         sizeClass="compact"
@@ -33,8 +64,34 @@ describe("PaneScaffold", () => {
       />,
     );
     const root = screen.getByTestId("pane-scaffold");
-    expect(root).toHaveAttribute("data-panes", "1");
-    expect(screen.getByText("List")).toBeInTheDocument();
+    expect(root).toHaveAttribute("data-panes", "2");
+    expect(root).toHaveAttribute("data-pane-layout", "stack");
+    expect(screen.getByTestId("pane-primary")).toHaveTextContent("List");
+    expect(screen.getByTestId("pane-secondary")).toHaveTextContent("Detail");
+  });
+
+  it("drops the sash when stacked (nothing to drag with a thumb)", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="compact"
+        primary={<Paragraph>List</Paragraph>}
+        secondary={<Paragraph>Detail</Paragraph>}
+      />,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-sash", "false");
+    expect(screen.queryByTestId("pane-sash")).not.toBeInTheDocument();
+  });
+
+  it("narrowLayout=swap drops the inactive pane", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="compact"
+        narrowLayout="swap"
+        primary={<Paragraph>List</Paragraph>}
+        secondary={<Paragraph>Detail</Paragraph>}
+      />,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-panes", "1");
     expect(screen.queryByText("Detail")).not.toBeInTheDocument();
   });
 
@@ -66,12 +123,27 @@ describe("PaneScaffold", () => {
     expect(screen.getByTestId("pane-secondary")).toHaveTextContent("Detail");
   });
 
-  it("maxPanes=1 ejects to single column even when expanded", () => {
+  it("maxPanes=1 takes the narrow path even when expanded", () => {
     renderWithProviders(
       <PaneScaffold
         sizeClass="xl"
         maxPanes={1}
         primary={<Paragraph>Only</Paragraph>}
+        secondary={<Paragraph>Also</Paragraph>}
+      />,
+    );
+    const root = screen.getByTestId("pane-scaffold");
+    expect(root).toHaveAttribute("data-pane-layout", "stack");
+    expect(screen.getByText("Also")).toBeInTheDocument();
+  });
+
+  it("maxPanes=1 with activePane drops the other pane", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="xl"
+        maxPanes={1}
+        activePane="primary"
+        primary={<Paragraph>Only</Paragraph>}
         secondary={<Paragraph>Hidden</Paragraph>}
       />,
     );
@@ -80,7 +152,64 @@ describe("PaneScaffold", () => {
   });
 });
 
+// MPO-235: two scaffolds are how the kit builds three regions, and a phone
+// rendered only the outer primary — the centre and inspector were unreachable.
+describe("PaneScaffold nesting (MPO-235)", () => {
+  it("renders all three regions at a 402pt viewport", () => {
+    setViewportWidth(402);
+    renderWithProviders(<ThreeRegionPage />);
+
+    expect(screen.getByText("Rail")).toBeInTheDocument();
+    expect(screen.getByText("Centre")).toBeInTheDocument();
+    expect(screen.getByText("Inspector")).toBeInTheDocument();
+
+    const scaffolds = screen.getAllByTestId("pane-scaffold");
+    expect(scaffolds).toHaveLength(2);
+    for (const node of scaffolds) {
+      expect(node).toHaveAttribute("data-pane-layout", "stack");
+      expect(node).toHaveAttribute("data-size-class", "compact");
+    }
+    expect(screen.queryAllByTestId("pane-sash")).toHaveLength(0);
+  });
+
+  it("passes the outer size class to the inner scaffold", () => {
+    // Viewport stays wide: only the outer override may narrow the inner one.
+    setViewportWidth(1440);
+    renderWithProviders(<ThreeRegionPage sizeClass="compact" />);
+
+    expect(screen.getByText("Centre")).toBeInTheDocument();
+    expect(screen.getByText("Inspector")).toBeInTheDocument();
+    for (const node of screen.getAllByTestId("pane-scaffold")) {
+      expect(node).toHaveAttribute("data-pane-layout", "stack");
+    }
+  });
+
+  it("still splits both scaffolds when the viewport is wide", () => {
+    setViewportWidth(1440);
+    renderWithProviders(<ThreeRegionPage />);
+
+    const scaffolds = screen.getAllByTestId("pane-scaffold");
+    expect(scaffolds).toHaveLength(2);
+    for (const node of scaffolds) {
+      expect(node).toHaveAttribute("data-pane-layout", "split");
+    }
+    expect(screen.getAllByTestId("pane-sash")).toHaveLength(2);
+  });
+});
+
 describe("ListDetailLayout", () => {
+  it("keeps the swap idiom on compact: list only until an item is picked", () => {
+    renderWithProviders(
+      <ListDetailLayout
+        sizeClass="compact"
+        list={<Paragraph>Items</Paragraph>}
+        detail={<Paragraph>Item 1</Paragraph>}
+      />,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-panes", "1");
+    expect(screen.queryByText("Item 1")).not.toBeInTheDocument();
+  });
+
   it("flips to detail when selected on compact", () => {
     renderWithProviders(
       <ListDetailLayout
@@ -96,6 +225,17 @@ describe("ListDetailLayout", () => {
 });
 
 describe("SupportingPaneLayout", () => {
+  it("stacks the supporting pane on compact instead of hiding it", () => {
+    renderWithProviders(
+      <SupportingPaneLayout sizeClass="compact" supporting={<Paragraph>Meta</Paragraph>}>
+        <Paragraph>Body</Paragraph>
+      </SupportingPaneLayout>,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-pane-layout", "stack");
+    expect(screen.getByText("Body")).toBeInTheDocument();
+    expect(screen.getByText("Meta")).toBeInTheDocument();
+  });
+
   it("renders side-by-side at large", () => {
     renderWithProviders(
       <SupportingPaneLayout sizeClass="large" supporting={<Paragraph>Meta</Paragraph>}>

package/src/layouts/PaneScaffold.stories.tsx

@@ -113,7 +113,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 +123,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 +150,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">

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/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/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,