@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f77aaf2

package/src/Layout/Layout.spec.md

@@ -1,243 +0,0 @@
----
-schema_version: 3
-template_version: 7
-kind: component
-id: component:Layout
-authority: current
-archive_reason: null
-superseded_by: null
-approved_by: cixzhang
-approved_at: 2026-10-30
-owners: [cixzhang]
-review_triggers: [public-api, behavior, layout, theming, accessibility]
-verified_by:
-  [
-    packages/core/src/Layout/Layout.test.tsx,
-    packages/core/src/Layout/LayoutSlots.test.tsx,
-    packages/core/src/Layout/__tests__/childrenAsContent.test.tsx,
-    packages/core/src/Layout/__tests__/contentWidth.test.tsx,
-    packages/core/src/Layout/__tests__/nestedPadding.test.tsx,
-    packages/core/src/theme/themingTargets.test.ts,
-    .github/visual-baseline/manifest.json,
-    scripts/check-knowledge.mjs,
-  ]
-modules: []
-families: [family:layout-regions]
-design_specs: []
-architecture:
-  [
-    architecture:container-padding,
-    architecture:component-theming-surface,
-    architecture:public-component-api,
-  ]
-contributing: []
-system_specs: [spec:AST-038]
----
-
-# Layout component contract
-
-## Contract at a glance
-
-| Area                    | Contract                                                                                                                                                          |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Public contract         | Five ReactNode slots (`header`, `start`, `content`, `end`, `footer`), `children` as content shorthand, `height`, `padding`, `contentWidth`, `defaultHasDividers`. |
-| Behavior                | Layout arranges caller content in five named slots, fills or grows with its container, and sets the inset and content width its region components use.            |
-| End-user impact         | People see headers, side panels, content, and footers in stable positions that mirror in right-to-left, with content aligned to one readable width.               |
-| Builder impact          | None; the record describes shipped behavior.                                                                                                                      |
-| Compatibility/readiness | Released behavior recorded as current; no API, default, or output changes. One implementation gap is listed under Current-state impact.                           |
-| Review checks           | Reject a target added to arbitrary slot content, an inherited parent Layout padding, a content scrollbar moved off the open edge, or overridable `data-height`.   |
-| Governing rules         | `family:layout-regions` FR1–FR12; `architecture:container-padding`; `architecture:component-theming-surface`; `architecture:public-component-api` INV5–INV8.      |
-
-This table is a review projection; the body below is authoritative.
-
-## Intent
-
-Layout is a general layout primitive that arranges five optional named slots —
-header, logical-start panel, content, logical-end panel, and footer — within a
-page or a bounded container. AppShell owns the page shell.
-
-Consumer syntax and examples belong in `Layout.doc.mjs`.
-
-## Compatibility and migration
-
-- Released default preserved: `yes` — `height="fill"`, no padding override,
-  no content width, divider defaults inherited.
-- Compatibility class: records shipped behavior; no public prop, default, DOM,
-  target, or styling output changes.
-- Controlled/uncontrolled behavior: not applicable
-- Migration decision: none
-
-Consumer migration instructions belong in consumer docs and release notes.
-
-## Current-state impact
-
-- **A `false` slot still counts as present (FR1).** Slot presence is
-  `!= null`, so `header={isOpen && <LayoutHeader />}` renders no header when
-  `isOpen` is false, yet the content and panels keep the inner inset on their
-  block-start edge instead of the outer inset `family:layout-regions` FR3 gives
-  an edge on the Layout boundary. With `contentWidth`, a `false` start or end
-  slot (the `showPanel && <LayoutPanel />` idiom) switches Layout to its
-  one- or two-panel composition, so LayoutContent stops at the content-width frame on
-  that side, and with a `false` end slot its scrollbar does too, instead of
-  reaching the Layout edge (FR6).
-
-## Ownership boundary
-
-**Owns**
-
-- The Layout container, its `layout` target, and the five slot positions.
-- Height, the Layout-edge inset, content width, and the header and footer
-  divider default that its region components read.
-- The aggregate consumer document and theming map for the `layout`,
-  `layout-header`, `layout-panel`, `layout-content`, and `layout-footer`
-  targets.
-
-**Does not own / non-goals**
-
-- The page shell, app-wide navigation, responsive shell substitution, skip
-  link, or main landmark — owned by AppShell.
-- Product meaning or content in any slot — owned by the caller.
-- Region semantics, scrolling, insets, and dividers — owned by
-  `component:LayoutHeader`, `component:LayoutContent`,
-  `component:LayoutFooter`, and `component:LayoutPanel`.
-- Resize interaction — owned by useResizable and ResizeHandle.
-
-## Public concepts
-
-| Concept           | Closed values or states                       | Meaning                                                                 | Availability by variant/orientation/state | Default             | Owner              | Stability | Invalid-value behavior              |
-| ----------------- | --------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------- | ------------------- | ------------------ | --------- | ----------------------------------- |
-| Slot topology     | `header`, `start`, `content`, `end`, `footer` | Positions caller content; an omitted slot renders nothing.              | Always                                    | all omitted         | `component:Layout` | Stable    | —                                   |
-| Content shorthand | `children`                                    | Fills the content slot when `content` is omitted.                       | Always                                    | omitted             | `component:Layout` | Stable    | `content` wins when both are given. |
-| Height            | `fill`, `auto`                                | Fill the container, or grow with content.                               | Always                                    | `fill`              | `component:Layout` | Stable    | Closed union; rejected by types.    |
-| Layout-edge inset | spacing step; `0`                             | The inset regions apply at the Layout's outer edges; `0` is full bleed. | Always                                    | inherited or step 4 | `component:Layout` | Stable    | Closed union; rejected by types.    |
-| Content width     | number (px); CSS length string                | Width of the aligned content in every slot.                             | Always                                    | none                | `component:Layout` | Stable    | —                                   |
-| Divider default   | `true`, `false`, unset                        | Divider default for LayoutHeader and LayoutFooter children.             | Always                                    | inherited           | `component:Layout` | Stable    | —                                   |
-
-## Behavioral and layout contract
-
-| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Basis                                                                                          |
-| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| FR1 | Layout renders an outer `div` carrying the `layout` target, which reflects `height`, around an inner vertical stack: the header slot, a middle row holding the start slot, the content slot, and the end slot, then the footer slot. An omitted header, start, end, or footer slot renders nothing; a slot that renders nothing is absent, so the neighbouring regions take the outer inset on that side (`family:layout-regions` FR3); the middle row and the content slot's fill wrapper always render. `content` fills the content slot, and `children` fill it when `content` is omitted. Slot position adds no element, region component, or target to the caller's content. Implementation gap: a slot counts as present unless it is `null` or `undefined`, so a `false` slot renders nothing yet leaves its neighbours on the inner inset, and with `contentWidth` a `false` start or end slot switches to the one- or two-panel composition of FR6 (Current-state impact). | Current source, docs, and tests; `family:layout-regions` FR1, FR3                              |
-| FR2 | The outer `div` escapes the parent's published container padding on all four edges, and the inner stack publishes zero container padding before its regions publish their own. `fill` (the default) makes the Layout fill its container's height, including the escaped block padding; `auto` lets it grow with content, at least as tall as its container.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Current source and tests; `architecture:container-padding`                                     |
-| FR3 | `padding` sets the inset that this Layout's own region components apply at its outer edges; `0` is full bleed. A nested Layout does not inherit a parent Layout's padding: without its own `padding`, its regions use the nearest padding container's padding (Card, Section, Dialog, Drawer, or BottomSheet), or spacing step 4. How each region applies and publishes that inset is owned by its record (`component:LayoutHeader`, `component:LayoutContent`, `component:LayoutFooter`, `component:LayoutPanel`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Current source, docs, and tests; `family:layout-regions` FR4; `architecture:container-padding` |
-| FR4 | When the caller supplies LayoutHeader, LayoutContent, LayoutFooter, or LayoutPanel, that component carries its own `layout-header`, `layout-content`, `layout-footer`, or `layout-panel` target. LayoutPanel at logical start, end, or both is one Panel part and one `layout-panel` target.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Current source, docs, and tests; `family:layout-regions` FR11                                  |
-| FR5 | `defaultHasDividers` sets the divider default for LayoutHeader and LayoutFooter descendants; an explicit `hasDivider` wins, and when unset a nested Layout keeps its parent's default within the same layer; the default stops at a Dialog, Drawer, BottomSheet, or other layer boundary (`spec:AST-038` FR7). LayoutPanel does not read the default (`component:LayoutPanel` FR4).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Current source, docs, and tests                                                                |
-| FR6 | With `contentWidth` and no panels, LayoutContent spans the middle area and aligns its direct children to the content width, so its scrollbar stays at the outer edge. With exactly one panel, the panel stays aligned while LayoutContent extends through the opposite open side; start and end mirror. With both panels, or a percentage (including percentage-bearing CSS math), intrinsic, or bare-variable width, the whole middle composition stays constrained; a length-valued variable uses `calc(var(...))`. Numbers are pixels. A nested Layout without `contentWidth` does not inherit its parent's.                                                                                                                                                                                                                                                                                                                                                                     | Current source, docs, and tests; `family:layout-regions` FR12                                  |
-| FR7 | `ref`, DOM, data, ARIA, and event props, `xstyle`, `className`, and `style` reach or compose on the outer `div`; the reflected `data-height` replaces a caller's value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Current source and tests; `architecture:public-component-api` INV5–INV8                        |
-
-### Allowed variation
-
-- **AV1 — Slot presence and content.** Any slot may be present or absent and
-  hold any ReactNode; content does not become Layout anatomy by position.
-- **AV2 — Region composition.** Callers choose which region components to
-  supply; Layout does not insert them.
-
-### Representative states
-
-| State                  | Required invariant                                                                             | Allowed variation              |
-| ---------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------ |
-| Arbitrary content only | `layout` target on the root; slot content gains no target.                                     | Content and height.            |
-| Composed regions       | Each supplied region carries its own target.                                                   | Which regions are supplied.    |
-| One panel              | The panel aligns to the content width; content extends to the open side.                       | Start or end; mirrored in RTL. |
-| Two panels             | The whole middle composition is constrained to the content width.                              | Panel widths.                  |
-| Nested Layout          | No inherited Layout padding or content width; divider default inherited within the same layer. | Its own explicit values.       |
-
-### Transformation and precedence order
-
-- **ORD1 — Content slot.** `content` → `children`.
-- **ORD2 — Inset.** This Layout's `padding` → the enclosing Card, Section,
-  Dialog, Drawer, or BottomSheet padding → spacing step 4; a parent Layout's padding never applies.
-- **ORD3 — Divider default.** A region's `hasDivider` → the nearest
-  `defaultHasDividers` in the same layer → no divider.
-
-### Performance and resources
-
-- **PR1 — No external lifecycle.** Layout adds no listener, observer, timer,
-  or measurement; content-width alignment is CSS-only.
-
-## Accessibility contract
-
-- **AR1 — No inferred landmarks.** Layout adds no role or name; landmark
-  semantics come only from a region component's caller-supplied `role` and
-  `label` (`family:layout-regions` FR8).
-- **AR2 — Logical order.** Slots render in DOM order header, start, content,
-  end, footer, and start and end follow writing direction
-  (`family:layout-regions` FR2).
-
-## Design relationships
-
-| Anatomy or state | Design requirement                                     | Representation authority     | Hierarchy role | Component contract |
-| ---------------- | ------------------------------------------------------ | ---------------------------- | -------------- | ------------------ |
-| Layout container | Places caller content in five named slots.             | Current source, docs, family | Supporting     | FR1, FR2           |
-| Header           | An optional caller-supplied LayoutHeader.              | Current source, docs, family | Supporting     | FR4, FR5           |
-| Panel            | A caller-supplied LayoutPanel at logical start or end. | Current source, docs, family | Supporting     | FR4, FR5           |
-| Content area     | An optional caller-supplied LayoutContent.             | Current source, docs, family | Prominent      | FR4, FR6           |
-| Footer           | An optional caller-supplied LayoutFooter.              | Current source, docs, family | Supporting     | FR4, FR5           |
-
-Slot position is topology, not anatomy.
-
-### Theming anatomy
-
-<!-- anatomy-theming:v1 -->
-
-```json
-{
-  "Layout container": {"target": "layout"},
-  "Header": {"target": "layout-header"},
-  "Panel": {"target": "layout-panel"},
-  "Content area": {"target": "layout-content"},
-  "Footer": {"target": "layout-footer"}
-}
-```
-
-Panel stands for every LayoutPanel, at logical start, end, or both.
-
-## Family and system relationships
-
-- `family:layout-regions` owns region topology, logical direction, boundaries,
-  scrolling, landmarks, and content-width scrollbar placement; FR1–FR6 and
-  AR1–AR2 apply it.
-- `architecture:container-padding` owns publication and escape of container
-  inset; FR2 and FR3 apply it.
-- `component:LayoutHeader`, `component:LayoutContent`, `component:LayoutFooter`,
-  and `component:LayoutPanel` own each region's behavior, including the
-  publication gaps LayoutContent and LayoutPanel record.
-- `architecture:component-theming-surface` owns anatomy and target mapping.
-- `architecture:public-component-api` owns caller-input routing; FR7 applies
-  it.
-
-## Verification map
-
-| Contract            | Verification                                                                                     | Representative states                                                                         | Mutation or failure expectation                                                                                                                                                                                                                                     | Audit section                |
-| ------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
-| FR1, ORD1, AV1      | `Layout.test.tsx` slot and content tests; `childrenAsContent.test.tsx`                           | Every slot; omitted slots; `content` and `children`                                           | A missing slot or `children` beating `content` fails. Gap: the omitted-slot test checks only the content text, so a wrapper rendered for an omitted slot passes, and no test asserts that slot content gains no target or element. No test covers a `false` slot.   | `audit:Layout/anatomy`       |
-| FR2                 | `Layout.test.tsx` height-reflection tests                                                        | `fill`, `auto`                                                                                | A lost `data-height` reflection fails. Gap: the escape margins, the zero publication, and the fill and auto heights have no automated check.                                                                                                                        | `audit:Layout/layout`        |
-| FR3, ORD2           | `nestedPadding.test.tsx`                                                                         | Inside AppShell, Card, Section; nested full-bleed and padded Layouts; explicit nested padding | A nested Layout inheriting a parent Layout's padding, or losing the enclosing Card or Section padding or the default inset, fails. Gap: `Layout.test.tsx` padding tests assert only that rendering succeeds.                                                        | `audit:Layout/layout`        |
-| FR4                 | `LayoutSlots.test.tsx` class tests; `themingTargets.test.ts`                                     | Each region component; start and end panels                                                   | A lost region target fails.                                                                                                                                                                                                                                         | `audit:Layout/theming`       |
-| FR5, ORD3           | `Layout.test.tsx` divider-default tests                                                          | Default true; unset; explicit `false`                                                         | A header or footer that ignores the default, or an explicit `hasDivider={false}` that loses, fails. Gap: nested inheritance has no check. No test covers the default stopping at a layer boundary.                                                                  | `audit:Layout/layout`        |
-| FR6                 | `contentWidth.test.tsx`; stable visual baseline `core-layout--content-width-scrollbar-placement` | No panels, start only, end only, both; zero padding; nested                                   | A no-panel content region that is not full width, a both-panel middle that is not constrained, or a nested Layout inheriting content width fails; a scrollbar moved off its content edge comes back changed for review. No test covers a `false` start or end slot. | `audit:Layout/layout`        |
-| FR7                 | `Layout.test.tsx` ref, className, style, passthrough, and owned-metadata tests                   | Ref; caller inputs; colliding `data-height`                                                   | A ref on another element, a dropped caller input, or a caller `data-height` that wins fails. Gap: no test covers event props or the `xstyle` merge order.                                                                                                           | `audit:Layout/api`           |
-| AR1, AR2, PR1       | Source review                                                                                    | Every slot                                                                                    | Gap: no automated check fails if Layout adds a role, reorders slots, or adds a listener or measurement.                                                                                                                                                             | `audit:Layout/accessibility` |
-| Theming anatomy map | `scripts/check-knowledge.mjs`                                                                    | Consumer anatomy and current targets                                                          | Missing, extra, or stale mappings fail repository validation.                                                                                                                                                                                                       | `audit:Layout/theming`       |
-
-## Decision log
-
-### DEC-1 — AppShell owns the page shell; Layout owns five-slot arrangement
-
-**Reference:** `component:Layout/DEC-1`
-**Decider:** `cixzhang`, `2026-08-31`
-
-AppShell is the page shell. Layout is the general layout primitive for arranging
-the `header`, `start`, `content`, `end`, and `footer` slots within a page or
-bounded container. Container-padding participation by Section, Table, Toolbar,
-and Divider does not make those components Layout-owned anatomy.
-
-## Open questions
-
-None.
-
-## Content boundary
-
-This file does not duplicate consumer prop tables or examples, family region
-rules, container-padding mechanics, resize interaction, implementation steps,
-or system rules. It links to their owners.

package/src/Layout/Layout.test.tsx

@@ -1,375 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Layout.test.tsx
- * @input Uses vitest, @testing-library/react, Layout + layout contexts
- * @output Characterization tests for the five-slot Layout primitive
- * @position Testing; validates slot rendering, context provisioning, and
- *   divider/padding/height wiring
- *
- * SYNC: When Layout.tsx changes, update tests to match new behavior
- */
-
-import {describe, it, expect} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import {use, createRef} from 'react';
-import {Layout} from './Layout';
-import {LayoutHeader} from './LayoutHeader';
-import {LayoutFooter} from './LayoutFooter';
-import {LayoutAreaContext} from './LayoutAreaContext';
-import {LayoutSlotsContext} from './LayoutSlotsContext';
-
-/** Reports which layout area it is rendered inside. */
-function AreaProbe({testid}: {testid: string}) {
-  const area = use(LayoutAreaContext);
-  return <span data-testid={testid}>{String(area)}</span>;
-}
-
-/** Reports the current LayoutSlots record as JSON. */
-function SlotsProbe() {
-  const slots = use(LayoutSlotsContext);
-  return <span data-testid="slots">{JSON.stringify(slots)}</span>;
-}
-
-/** The Layout root is the outermost element rendered by the component. */
-function root(container: HTMLElement): HTMLElement {
-  return container.firstElementChild as HTMLElement;
-}
-
-describe('Layout', () => {
-  describe('content / children resolution', () => {
-    it('renders the content prop', () => {
-      render(<Layout content={<div>main body</div>} />);
-      expect(screen.getByText('main body')).toBeInTheDocument();
-    });
-
-    it('renders children as a shorthand for the content slot', () => {
-      render(
-        <Layout>
-          <div>child body</div>
-        </Layout>,
-      );
-      expect(screen.getByText('child body')).toBeInTheDocument();
-    });
-
-    it('content wins when both content and children are provided', () => {
-      render(
-        <Layout content={<div>from-content</div>}>
-          <div>from-children</div>
-        </Layout>,
-      );
-      expect(screen.getByText('from-content')).toBeInTheDocument();
-      expect(screen.queryByText('from-children')).not.toBeInTheDocument();
-    });
-
-    it('renders an empty shell without crashing when no slots are given', () => {
-      const {container} = render(<Layout />);
-      expect(root(container)).toBeInTheDocument();
-    });
-  });
-
-  describe('slots', () => {
-    it('renders all four surrounding slots plus content', () => {
-      render(
-        <Layout
-          header={<div>the-header</div>}
-          start={<div>the-start</div>}
-          end={<div>the-end</div>}
-          footer={<div>the-footer</div>}
-          content={<div>the-content</div>}
-        />,
-      );
-      expect(screen.getByText('the-header')).toBeInTheDocument();
-      expect(screen.getByText('the-start')).toBeInTheDocument();
-      expect(screen.getByText('the-end')).toBeInTheDocument();
-      expect(screen.getByText('the-footer')).toBeInTheDocument();
-      expect(screen.getByText('the-content')).toBeInTheDocument();
-    });
-
-    it('does not render an area wrapper for an omitted slot', () => {
-      render(<Layout content={<AreaProbe testid="content" />} />);
-      // Only the content probe exists; header/start/end/footer probes absent.
-      expect(screen.getByTestId('content')).toHaveTextContent('content');
-    });
-  });
-
-  describe('LayoutAreaContext provisioning', () => {
-    it('tags each slot with its area name', () => {
-      render(
-        <Layout
-          header={<AreaProbe testid="h" />}
-          start={<AreaProbe testid="s" />}
-          end={<AreaProbe testid="e" />}
-          footer={<AreaProbe testid="f" />}
-          content={<AreaProbe testid="c" />}
-        />,
-      );
-      expect(screen.getByTestId('h')).toHaveTextContent('header');
-      expect(screen.getByTestId('s')).toHaveTextContent('start');
-      expect(screen.getByTestId('e')).toHaveTextContent('end');
-      expect(screen.getByTestId('f')).toHaveTextContent('footer');
-      expect(screen.getByTestId('c')).toHaveTextContent('content');
-    });
-  });
-
-  describe('LayoutSlotsContext provisioning', () => {
-    it('reports which slots are filled to descendants', () => {
-      render(
-        <Layout
-          header={<div>h</div>}
-          start={<div>s</div>}
-          content={<SlotsProbe />}
-        />,
-      );
-      const slots = JSON.parse(screen.getByTestId('slots').textContent ?? '{}');
-      expect(slots).toEqual({
-        hasHeader: true,
-        hasFooter: false,
-        hasStart: true,
-        hasEnd: false,
-      });
-    });
-
-    it('reports all-false when only content is present', () => {
-      render(<Layout content={<SlotsProbe />} />);
-      const slots = JSON.parse(screen.getByTestId('slots').textContent ?? '{}');
-      expect(slots).toEqual({
-        hasHeader: false,
-        hasFooter: false,
-        hasStart: false,
-        hasEnd: false,
-      });
-    });
-
-    it('reports every slot filled', () => {
-      render(
-        <Layout
-          header={<div>h</div>}
-          footer={<div>f</div>}
-          start={<div>s</div>}
-          end={<div>e</div>}
-          content={<SlotsProbe />}
-        />,
-      );
-      const slots = JSON.parse(screen.getByTestId('slots').textContent ?? '{}');
-      expect(slots).toEqual({
-        hasHeader: true,
-        hasFooter: true,
-        hasStart: true,
-        hasEnd: true,
-      });
-    });
-  });
-
-  describe('theme props (class + data attributes)', () => {
-    it('renders the astryx-layout class on the root', () => {
-      const {container} = render(<Layout content={<div>x</div>} />);
-      expect(root(container).className).toContain('astryx-layout');
-    });
-
-    it('defaults data-height to "fill"', () => {
-      const {container} = render(<Layout content={<div>x</div>} />);
-      expect(root(container).getAttribute('data-height')).toBe('fill');
-    });
-
-    it('reflects height="auto" as data-height', () => {
-      const {container} = render(
-        <Layout height="auto" content={<div>x</div>} />,
-      );
-      expect(root(container).getAttribute('data-height')).toBe('auto');
-    });
-  });
-
-  describe('defaultHasDividers → LayoutDividerContext', () => {
-    it('makes headers default to having a divider', () => {
-      render(
-        <Layout
-          defaultHasDividers
-          header={<LayoutHeader>H</LayoutHeader>}
-          content={<div>c</div>}
-        />,
-      );
-      const header = screen.getByText('H').closest('[data-divider]');
-      expect(header).not.toBeNull();
-      expect(header?.getAttribute('data-divider')).toBe('true');
-    });
-
-    it('makes footers default to having a divider', () => {
-      const {container} = render(
-        <Layout
-          defaultHasDividers
-          footer={<LayoutFooter>F</LayoutFooter>}
-          content={<div>c</div>}
-        />,
-      );
-      expect(
-        container.querySelector('.astryx-layout-footer[data-divider]'),
-      ).not.toBeNull();
-    });
-
-    it('does not force dividers when defaultHasDividers is unset', () => {
-      const {container} = render(
-        <Layout
-          header={<LayoutHeader>H</LayoutHeader>}
-          content={<div>c</div>}
-        />,
-      );
-      expect(
-        container.querySelector('.astryx-layout-header[data-divider]'),
-      ).toBeNull();
-    });
-
-    it('an explicit hasDivider={false} on a header overrides the context default', () => {
-      const {container} = render(
-        <Layout
-          defaultHasDividers
-          header={<LayoutHeader hasDivider={false}>H</LayoutHeader>}
-          content={<div>c</div>}
-        />,
-      );
-      expect(
-        container.querySelector('.astryx-layout-header[data-divider]'),
-      ).toBeNull();
-    });
-  });
-
-  describe('padding / contentWidth', () => {
-    it('accepts a numeric padding step without crashing', () => {
-      const {container} = render(<Layout padding={4} content={<div>c</div>} />);
-      expect(root(container)).toBeInTheDocument();
-    });
-
-    it('accepts padding={0} (full bleed) without crashing', () => {
-      const {container} = render(<Layout padding={0} content={<div>c</div>} />);
-      expect(root(container)).toBeInTheDocument();
-    });
-
-    it('accepts a numeric contentWidth without crashing', () => {
-      const {container} = render(
-        <Layout contentWidth={640} content={<div>c</div>} />,
-      );
-      expect(root(container)).toBeInTheDocument();
-    });
-
-    it('accepts a string contentWidth without crashing', () => {
-      const {container} = render(
-        <Layout contentWidth="60ch" content={<div>c</div>} />,
-      );
-      expect(root(container)).toBeInTheDocument();
-    });
-  });
-
-  describe('LayoutHeader paddingBlockEnd', () => {
-    /** StyleX classes on the header's inner (padding-owning) element, minus
-     * dev-only provenance classes (they contain "__"). */
-    function innerClassSet(container: HTMLElement): Set<string> {
-      const inner = container.firstElementChild!
-        .firstElementChild as HTMLElement;
-      return new Set(
-        inner.className
-          .split(' ')
-          .filter(Boolean)
-          .filter(c => !c.includes('__') && !c.includes('.')),
-      );
-    }
-
-    it('applies a class when paddingBlockEnd is set on its own', () => {
-      const {container, rerender} = render(<LayoutHeader>H</LayoutHeader>);
-      const baseline = innerClassSet(container);
-      rerender(<LayoutHeader paddingBlockEnd={0}>H</LayoutHeader>);
-      expect(innerClassSet(container)).not.toEqual(baseline);
-    });
-
-    it('overrides only the block-end edge of padding', () => {
-      // padding={4} sets all four edges; paddingBlockEnd={0} may only move the
-      // bottom edge, so every other padding class must survive unchanged.
-      const {container, rerender} = render(
-        <LayoutHeader padding={4}>H</LayoutHeader>,
-      );
-      const uniform = innerClassSet(container);
-      rerender(
-        <LayoutHeader padding={4} paddingBlockEnd={0}>
-          H
-        </LayoutHeader>,
-      );
-      const overridden = innerClassSet(container);
-      const removed = [...uniform].filter(c => !overridden.has(c));
-      const added = [...overridden].filter(c => !uniform.has(c));
-      // Something block-end related was dropped and replaced...
-      expect(removed.length).toBeGreaterThan(0);
-      expect(added.length).toBeGreaterThan(0);
-      // ...while the inline and block-start classes are shared by both renders.
-      expect(uniform.size - removed.length).toBeGreaterThan(0);
-    });
-
-    it('spells the override with the shared per-edge family', () => {
-      // The classes the override adds are exactly the ones the standalone
-      // per-edge prop produces, so LayoutHeader and Section stay one family.
-      const {container, rerender} = render(
-        <LayoutHeader padding={4}>H</LayoutHeader>,
-      );
-      const uniform = innerClassSet(container);
-      rerender(
-        <LayoutHeader padding={4} paddingBlockEnd={0}>
-          H
-        </LayoutHeader>,
-      );
-      const added = [...innerClassSet(container)].filter(c => !uniform.has(c));
-      rerender(<LayoutHeader paddingBlockEnd={0}>H</LayoutHeader>);
-      const standalone = innerClassSet(container);
-      for (const cls of added) {
-        expect(standalone.has(cls)).toBe(true);
-      }
-    });
-  });
-
-  describe('styling & ref', () => {
-    it('forwards ref to the root div', () => {
-      const ref = createRef<HTMLDivElement>();
-      render(<Layout ref={ref} content={<div>c</div>} />);
-      expect(ref.current).toBeInstanceOf(HTMLDivElement);
-      expect(ref.current?.className).toContain('astryx-layout');
-    });
-
-    it('merges a caller className onto the root', () => {
-      const {container} = render(
-        <Layout className="my-layout" content={<div>c</div>} />,
-      );
-      expect(root(container).className).toContain('my-layout');
-      expect(root(container).className).toContain('astryx-layout');
-    });
-
-    it('merges a caller inline style onto the root', () => {
-      const {container} = render(
-        <Layout style={{outline: '1px solid red'}} content={<div>c</div>} />,
-      );
-      expect(root(container).style.outline).toBe('1px solid red');
-    });
-  });
-
-  describe('pass-through props', () => {
-    it('forwards pass-through props to the root element', () => {
-      const {container} = render(
-        <Layout
-          aria-label="Records workspace"
-          id="records-layout"
-          data-testid="layout-root"
-          data-zone="admin"
-          content={<div>c</div>}
-        />,
-      );
-      const el = root(container);
-      expect(el).toHaveAttribute('aria-label', 'Records workspace');
-      expect(el).toHaveAttribute('id', 'records-layout');
-      expect(el).toHaveAttribute('data-testid', 'layout-root');
-      expect(el).toHaveAttribute('data-zone', 'admin');
-    });
-
-    it('keeps component-owned theme metadata over a colliding pass-through', () => {
-      const {container} = render(
-        <Layout height="fill" data-height="auto" content={<div>c</div>} />,
-      );
-      expect(root(container)).toHaveAttribute('data-height', 'fill');
-    });
-  });
-});