eidotter 0.42.0 → 0.43.0

package/README.md

@@ -15,7 +15,7 @@
 [![license](https://img.shields.io/badge/license-CC--BY--NC--4.0-ffb000?labelColor=020003)](./LICENSE.md)
 [![React](https://img.shields.io/badge/React-18%20%7C%2019-ffb000?labelColor=020003)](https://react.dev/)
 
-**eiDotter** is a React component library that takes the DOS/CGA terminal aesthetic seriously: authentic 16-color palette, bitmap-accurate typography, phosphor glow physics, keyboard-first interactions. 59 components across forms, navigation, windowing, timelines, health displays, and terminal chrome — shipped as ES modules with a prebuilt stylesheet so consumers don't need Tailwind to use it.
+**eiDotter** is a React component library that takes the DOS/CGA terminal aesthetic seriously: authentic 16-color palette, bitmap-accurate typography, phosphor glow physics, keyboard-first interactions. 61 components across forms, navigation, windowing, timelines, health displays, and terminal chrome — shipped as ES modules with a prebuilt stylesheet so consumers don't need Tailwind to use it.
 
 → **[Storybook](https://cinimody.github.io/eiDotter/)**  ·  **[CHANGELOG](./CHANGELOG.md)**  ·  **[Accessibility](./ACCESSIBILITY.md)**  ·  **[Issues](https://github.com/CinimoDY/eiDotter/issues)**  ·  **[npm](https://www.npmjs.com/package/eidotter)**
 
@@ -116,9 +116,9 @@ for client apps and `'use client'` files.
 
 ## Upgrading
 
-Every minor with breaking or visible changes ships an upgrade guide in the package, at `node_modules/eidotter/migrations/<version>.md` (source: [`migrations/`](./migrations/)). Read every guide between your installed version and the target, oldest first. Start with [0.41.0](./migrations/0.41.0.md).
+Every minor with breaking or visible changes ships an upgrade guide in the package, at `node_modules/eidotter/migrations/<version>.md` (source: [`migrations/`](./migrations/)). Read every guide between your installed version and the target, oldest first. Start with [0.41.0](./migrations/0.41.0.md), then [0.43.0](./migrations/0.43.0.md).
 
-0.x caret ranges stop at the next minor (`^0.40.2` never resolves to 0.41.0), so bump the range explicitly: `npm install eidotter@^0.42.0` (0.41.0 shipped before its review fixes; use the latest 0.41.x, 0.41.3 or later).
+0.x caret ranges stop at the next minor (`^0.40.2` never resolves to 0.41.0), so bump the range explicitly: `npm install eidotter@^0.43.0`.
 
 ## Documentation
 
@@ -133,7 +133,7 @@ Every minor with breaking or visible changes ships an upgrade guide in the packa
 
 ## Components
 
-59 components across six families — [complete catalog in Storybook](https://cinimody.github.io/eiDotter/). Also exported but not tabled below: CalendarHeatmap, Connector, CopyButton, ChecklistRow, EmptyState, HoldToComplete, LabeledProgress, LedgerRow, ProgressRing, SectionHeading, Select, TimelineFeed, TimelinePage and the `Mark` brand component.
+61 components across six families — [complete catalog in Storybook](https://cinimody.github.io/eiDotter/). Also exported but not tabled below: Bench, CalendarHeatmap, Connector, CopyButton, ChecklistRow, EmptyState, HoldToComplete, LabeledProgress, LedgerRow, PageShell (with PageSection), ProgressRing, SectionHeading, Select, TimelineFeed, TimelinePage and the `Mark` brand component.
 
 <details>
 <summary><strong>Windowing &amp; shell</strong> — Terminal, DosDialog, DosWindow, IconButton, Modal, Lightbox, CommandPrompt, CmdPalette, Header, Footer, Nav, Brand</summary>

package/dist/components/Bench/components/Bench.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+export interface BenchPane {
+    /** Pane label (`Before`, `After · 390`, …), uppercase in the label row. */
+    label: React.ReactNode;
+    /** Pane body, usually a screenshot `<img>` (rendered block, full width). */
+    content: React.ReactNode;
+    /** `after` paints the label in the accent colour. Default `neutral`. */
+    tone?: 'before' | 'after' | 'neutral';
+    /**
+     * `desktop` (default): the scroll frame fills the pane. `phone`: a 390px
+     * frame centred with 12px of padding around it.
+     */
+    frame?: 'desktop' | 'phone';
+    /**
+     * Accessible name of the pane's scroll frame. Defaults to
+     * "<title>, <label>" when both are strings, else the label when it is a
+     * string, else "Scrollable pane".
+     */
+    frameLabel?: string;
+}
+export interface BenchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Strip title, rendered as a heading after DosWindow's `▸` marker. */
+    title: React.ReactNode;
+    /** Heading level of the title. Default `3` (inside a `PageSection` h2). */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Status chips (`Badge`s), right-aligned in the strip; they wrap. */
+    chips?: React.ReactNode;
+    /** One muted line under the strip, above the panes. */
+    note?: React.ReactNode;
+    /** One pane renders full width; two or more sit side by side in pairs. */
+    panes: BenchPane[];
+    /** Scroll-frame max height, any CSS length. Default `640px` (520px when stacked). */
+    maxHeight?: string;
+    className?: string;
+}
+/**
+ * Bench: a compare unit on DosWindow (0.42). Title strip with chips, an
+ * optional note, then panes side by side (before | after) separated by a 1px
+ * gap the grid background paints, so no divider elements. Each pane has an
+ * uppercase label row and a keyboard-scrollable frame. Below 760px of bench
+ * width the panes stack.
+ *
+ * Server-safe and presentational. Ref forwards to the DosWindow root.
+ */
+export declare const Bench: React.ForwardRefExoticComponent<BenchProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Bench/components/Bench.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { DosWindow } from '../../DosWindow/index.js';
+const toneClasses = {
+    before: 'eidotter-bench__pane--before',
+    after: 'eidotter-bench__pane--after',
+    neutral: 'eidotter-bench__pane--neutral',
+};
+function frameName(pane, title) {
+    if (pane.frameLabel)
+        return pane.frameLabel;
+    if (typeof pane.label === 'string') {
+        return typeof title === 'string' ? `${title}, ${pane.label}` : pane.label;
+    }
+    return 'Scrollable pane';
+}
+/**
+ * Bench: a compare unit on DosWindow (0.42). Title strip with chips, an
+ * optional note, then panes side by side (before | after) separated by a 1px
+ * gap the grid background paints, so no divider elements. Each pane has an
+ * uppercase label row and a keyboard-scrollable frame. Below 760px of bench
+ * width the panes stack.
+ *
+ * Server-safe and presentational. Ref forwards to the DosWindow root.
+ */
+export const Bench = forwardRef(({ title, headingLevel = 3, chips, note, panes, maxHeight, className, style, ...rest }, ref) => {
+    const Heading = `h${headingLevel}`;
+    const hasChips = chips != null && chips !== false && chips !== '';
+    const hasNote = note != null && note !== false && note !== '';
+    const height = maxHeight?.trim();
+    const mergedStyle = height
+        ? { ...style, '--eidotter-bench-max-height': height }
+        : style;
+    return (_jsxs(DosWindow, { ref: ref, className: cn('eidotter-bench', className), style: mergedStyle, title: _jsx(Heading, { className: "eidotter-bench__title", children: title }), controls: hasChips ? _jsx("div", { className: "eidotter-bench__chips", children: chips }) : undefined, ...rest, children: [hasNote && _jsx("p", { className: "eidotter-bench__note", children: note }), _jsx("div", { className: cn('eidotter-bench__panes', panes.length === 1 && 'eidotter-bench__panes--single'), children: panes.map((pane, i) => {
+                    const frame = (_jsx("div", { className: cn('eidotter-bench__frame', pane.frame === 'phone' && 'eidotter-bench__frame--phone'), 
+                        // Scroll containers must be keyboard-reachable (WCAG 2.1.1; the
+                        // ChatHistory lesson). role=group carries the name without
+                        // adding a landmark per pane.
+                        tabIndex: 0, role: "group", "aria-label": frameName(pane, title), children: pane.content }));
+                    return (_jsxs("div", { className: cn('eidotter-bench__pane', toneClasses[pane.tone ?? 'neutral']), children: [_jsx("div", { className: "eidotter-bench__label", children: pane.label }), pane.frame === 'phone'
+                                ? _jsx("div", { className: "eidotter-bench__phone", children: frame })
+                                : frame] }, i));
+                }) })] }));
+});
+Bench.displayName = 'Bench';

package/dist/components/Bench/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Bench } from './Bench.js';
+export type { BenchProps, BenchPane } from './Bench.js';

package/dist/components/Bench/components/index.js

@@ -0,0 +1 @@
+export { Bench } from './Bench.js';

package/dist/components/Bench/index.d.ts

@@ -0,0 +1,2 @@
+export { Bench } from './components/index.js';
+export type { BenchProps, BenchPane } from './components/index.js';

package/dist/components/Bench/index.js

@@ -0,0 +1 @@
+export { Bench } from './components/index.js';

package/dist/components/Header/components/Header.d.ts

@@ -56,12 +56,48 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
      * when `children` is provided, or when `brandName` is empty.
      */
     brand?: 'text' | 'lockup' | 'mark';
+    /**
+     * Narrow-header brand presentation for the icon brands (`brand` 'lockup' or
+     * 'mark'); ignored for `'text'`, `children` or an empty `brandName`.
+     * - `'none'` (default): the name always shows, wrapping onto more lines when
+     *   it does not fit.
+     * - `'mark'`: below 480px of header width (a container query on the header)
+     *   only the icon shows. The name stays in the DOM, visually hidden, so it
+     *   remains the brand link's accessible name.
+     */
+    brandCollapse?: 'none' | 'mark';
+    /**
+     * Row arrangement:
+     * - `'inline'` (default): brand left, nav (+ `end`) right, one row.
+     * - `'stacked'`: brand row on top with `end` and the mobile MENU trigger on
+     *   its right; the desktop nav on its own row below, left-aligned on the
+     *   brand's edge. Below 768px the nav row is absent (MENU takes over), as
+     *   in the inline layout.
+     */
+    layout?: 'inline' | 'stacked';
+    /**
+     * Bottom rule. `false` removes the 1px bottom border and the retro glow
+     * under it (for pages where the header sits in one block with the content).
+     * Default `true`.
+     */
+    rule?: boolean;
+    /**
+     * Centre the header's content in a max-width column so the brand's left edge
+     * lines up with a page column of the same width (e.g. `PageShell`). `true`
+     * uses 1240px (PageShell's default); a string is any CSS length
+     * (`'72rem'`, `'960px'`). The header itself (background, sticky) still spans
+     * the full width, and its inline padding follows the same
+     * `max(16px, safe-area inset)` gutter as PageShell. Default off.
+     */
+    contained?: boolean | string;
     /**
      * Trailing slot (theme toggle, ⌘K hint, …). Rendered once: after the desktop
      * nav on wide screens, and between the brand and the MENU trigger on mobile
      * (the desktop nav is hidden below 768px, the MENU trigger above it, so DOM
-     * order gives both placements without duplicating the node). Keep end
-     * content compact on mobile; it clips before the brand name does.
+     * order gives both placements without duplicating the node). With
+     * `layout="stacked"` it sits on the brand row at every width. Keep end
+     * content compact on mobile: when the row is short of room the brand wraps
+     * first, then the end slot clips.
      * The slot is `overflow: hidden` at every width, so dropdowns, menus and
      * tooltips opened from `end` must render in a portal (React Aria popovers,
      * e.g. `Select`, already do); an in-flow popover is clipped.

package/dist/components/Header/components/Header.js

@@ -9,7 +9,7 @@ const variantClasses = {
     retro: 'eidotter-header--retro',
     modern: 'eidotter-header--modern',
 };
-export const Header = forwardRef(({ brandName, brandHref = '/', items, activeHref, variant = 'retro', sticky = true, linkComponent, context, brand = 'lockup', end, skipLinkTarget, children, className, ...rest }, ref) => {
+export const Header = forwardRef(({ brandName, brandHref = '/', items, activeHref, variant = 'retro', sticky = true, linkComponent, context, brand = 'lockup', brandCollapse = 'none', layout = 'inline', rule = true, contained = false, end, skipLinkTarget, children, className, style, ...rest }, ref) => {
     const LinkTag = linkComponent ?? 'a';
     // The brand link is structural — an unsafe brandHref falls back to '/' rather
     // than unmounting the branding anchor.
@@ -20,6 +20,12 @@ export const Header = forwardRef(({ brandName, brandHref = '/', items, activeHre
     const safeSkipTarget = skipLinkTarget && isSafeHref(skipLinkTarget) ? skipLinkTarget : undefined;
     // children always win; the icon variants only apply to a non-empty brandName.
     const iconBrand = !children && !!brandName && brand !== 'text';
+    // Mark-only collapse needs an icon to collapse to.
+    const collapseToMark = iconBrand && brandCollapse === 'mark';
+    const stacked = layout === 'stacked';
+    // contained: true → CSS default width; a non-blank string → that CSS length.
+    const containedWidth = typeof contained === 'string' ? contained.trim() : '';
+    const isContained = contained === true || containedWidth !== '';
     const brandContent = children || (iconBrand ? (_jsxs(_Fragment, { children: [brand === 'mark'
                 ? _jsx(Mark, { size: 28, label: "", className: "eidotter-header__brand-icon" })
                 : _jsx(Logo, { size: 28, glow: true, title: "", className: "eidotter-header__brand-icon" }), _jsx("span", { className: "eidotter-header__brand-name uppercase tracking-[0.3em]", children: brandName })] })) : brandName);
@@ -33,10 +39,22 @@ export const Header = forwardRef(({ brandName, brandHref = '/', items, activeHre
     const hasItems = Array.isArray(items) && items.length > 0;
     const ActionsGroup = hasEnd ? 'div' : React.Fragment;
     const actionsProps = hasEnd ? { className: 'eidotter-header__actions flex items-center gap-4' } : {};
-    const main = (_jsxs(_Fragment, { children: [_jsx(LinkTag, { href: safeBrandHref, className: cn('no-underline text-dos-text-base font-bold tracking-wide', 'eidotter-header__branding', iconBrand && 'eidotter-header__branding--icon inline-flex items-center gap-3'), children: brandContent }), _jsxs(ActionsGroup, { ...actionsProps, children: [hasItems && (_jsx(DesktopNav, { items: items, activeHref: activeHref, variant: variant, linkComponent: linkComponent })), hasEnd && _jsx("div", { className: "eidotter-header__end flex items-center", children: end }), hasItems && (_jsx(MobileNav, { items: items, activeHref: activeHref, variant: variant, linkComponent: linkComponent }))] })] }));
+    const desktopNav = hasItems ? (_jsx(DesktopNav, { items: items, activeHref: activeHref, variant: variant, linkComponent: linkComponent, className: stacked ? 'eidotter-header__nav-row' : undefined })) : null;
+    const main = (_jsxs(_Fragment, { children: [_jsx(LinkTag, { href: safeBrandHref, className: cn('no-underline text-dos-text-base font-bold tracking-wide', 'eidotter-header__branding', iconBrand && 'eidotter-header__branding--icon inline-flex items-start gap-3'), children: brandContent }), _jsxs(ActionsGroup, { ...actionsProps, children: [!stacked && desktopNav, hasEnd && _jsx("div", { className: "eidotter-header__end flex items-center", children: end }), hasItems && (_jsx(MobileNav, { items: items, activeHref: activeHref, variant: variant, linkComponent: linkComponent }))] })] }));
     const skipLink = safeSkipTarget ? (_jsx("a", { href: safeSkipTarget, className: "eidotter-header__skip", children: "Skip to content" })) : null;
-    return (_jsxs("header", { ref: ref, className: cn(hasContext
-            ? 'flex flex-col gap-2 px-4 py-3 font-dos'
-            : 'flex items-center justify-between px-4 py-3 font-dos', 'eidotter-header', variantClasses[variant], sticky && 'sticky top-0 z-50 bg-dos-bg-primary', className), ...rest, children: [skipLink, hasContext ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "eidotter-header__main flex w-full items-center justify-between", children: main }), _jsx(HeaderContextRow, { context: context, linkComponent: linkComponent, activeHref: activeHref })] })) : (main)] }));
+    // Column layout whenever there is more than one row (context row, stacked nav
+    // row). The single-row inline header keeps its pre-0.42 DOM: no wrappers.
+    const columnLayout = hasContext || stacked;
+    const layoutClasses = columnLayout
+        ? 'flex flex-col gap-2'
+        : 'flex items-center justify-between';
+    const rows = columnLayout ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "eidotter-header__main flex w-full items-center justify-between", children: main }), stacked && desktopNav, hasContext && (_jsx(HeaderContextRow, { context: context, linkComponent: linkComponent, activeHref: activeHref }))] })) : (main);
+    const mergedStyle = containedWidth
+        ? { ...style, '--eidotter-header-max': containedWidth }
+        : style;
+    return (_jsxs("header", { ref: ref, className: cn(
+        // contained: the header is only the full-width band (padding, bg,
+        // sticky); the layout moves to the centred inner column.
+        isContained ? 'px-4 py-3 font-dos' : cn(layoutClasses, 'px-4 py-3 font-dos'), 'eidotter-header', variantClasses[variant], stacked && 'eidotter-header--stacked', isContained && 'eidotter-header--contained', !rule && 'eidotter-header--no-rule', collapseToMark && 'eidotter-header--collapse-mark', sticky && 'sticky top-0 z-50 bg-dos-bg-primary', className), style: mergedStyle, ...rest, children: [skipLink, isContained ? (_jsx("div", { className: cn('eidotter-header__inner w-full', layoutClasses), children: rows })) : (rows)] }));
 });
 Header.displayName = 'Header';

package/dist/components/PageShell/components/PageSection.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface PageSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /**
+     * Section heading, in the display face and accent colour, with no rule under
+     * it. Omit for an untitled section.
+     */
+    title?: React.ReactNode;
+    /** Heading level. Default `2` (sections directly under the page `<h1>`). */
+    headingLevel?: 2 | 3 | 4;
+    /**
+     * Anchor id (TOC target). When set with a `title`, the heading gets
+     * `${id}-heading` and the section is labelled by it, so it becomes a named
+     * region.
+     */
+    id?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * PageSection: one block of a `PageShell` page (0.43). A `<section>` whose
+ * heading and children stack with a 16px gap. No divider above or below.
+ *
+ * Server-safe. Ref forwards to the `<section>`.
+ */
+export declare const PageSection: React.ForwardRefExoticComponent<PageSectionProps & React.RefAttributes<HTMLElement>>;

package/dist/components/PageShell/components/PageSection.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+/**
+ * PageSection: one block of a `PageShell` page (0.43). A `<section>` whose
+ * heading and children stack with a 16px gap. No divider above or below.
+ *
+ * Server-safe. Ref forwards to the `<section>`.
+ */
+export const PageSection = forwardRef(({ title, headingLevel = 2, id, children, className, ...rest }, ref) => {
+    const hasTitle = title != null && title !== false && title !== '';
+    const Heading = `h${headingLevel}`;
+    const headingId = hasTitle && id ? `${id}-heading` : undefined;
+    return (_jsxs("section", { ref: ref, id: id, "aria-labelledby": headingId, className: cn('eidotter-page-section', className), ...rest, children: [hasTitle && (_jsx(Heading, { id: headingId, className: "eidotter-page-section__title", children: title })), children] }));
+});
+PageSection.displayName = 'PageSection';

package/dist/components/PageShell/components/PageShell.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+export interface PageShellTocItem {
+    /** In-page anchor (`#findings`) or any safe URL. Unsafe schemes render no anchor. */
+    href: string;
+    /** Chip text. */
+    label: React.ReactNode;
+}
+export interface PageShellIntro {
+    /** Small uppercase line above the title (context, version, date). */
+    eyebrow?: React.ReactNode;
+    /** The page title, rendered as the page's `<h1>` in the display face. */
+    title: React.ReactNode;
+    /** Lead paragraph under the title (max 68ch). */
+    lead?: React.ReactNode;
+    /** A wrapping row of facts (author, branch, captured at, …). */
+    meta?: React.ReactNode;
+    /** Table-of-contents chips. Rendered as a labelled `<nav>` of links. */
+    toc?: PageShellTocItem[];
+    /** Accessible name of the TOC `<nav>`. Default `"On this page"`. */
+    tocLabel?: string;
+}
+export interface PageShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Top slot, inside the column so it shares the content's left edge.
+     * Typically `<Header layout="stacked" rule={false} …/>`; a Header placed
+     * here loses its own inline padding so its brand sits on the column edge.
+     */
+    header?: React.ReactNode;
+    /** Structured page intro: eyebrow, `<h1>` title, lead, meta row, TOC chips. */
+    intro?: PageShellIntro;
+    /** Bottom slot, inside the column (e.g. `<Footer>`). */
+    footer?: React.ReactNode;
+    /** Column max-width, any CSS length. Default `1240px`. */
+    maxWidth?: string;
+    /**
+     * Element that wraps `intro` and `children`. `'main'` (default) makes it the
+     * page's main landmark; use `'div'` when the app layout already renders a
+     * `<main>`.
+     */
+    contentAs?: 'main' | 'div';
+    /** `id` for the content element, e.g. a Header `skipLinkTarget` (`#content`). */
+    contentId?: string;
+    /** Page sections (`PageSection`, Bench, …), stacked with a 40px gap. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * PageShell: the "one block" page layout (0.43).
+ *
+ * One centred column (1240px by default) with a `max(16px, safe-area)` side
+ * gutter and 24px / 64px block padding. Header, intro, sections and footer
+ * all live inside the column, so everything shares one left edge, stacked
+ * with a 40px gap. No dividers: the only lines on the page are the ones its
+ * children draw (window frames, pane gaps).
+ *
+ * Server-safe and presentational. Ref forwards to the root `<div>`.
+ */
+export declare const PageShell: React.ForwardRefExoticComponent<PageShellProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/PageShell/components/PageShell.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { isSafeHref } from '../../../utils/isSafeHref.js';
+function PageIntro({ intro }) {
+    const { eyebrow, title, lead, meta, toc, tocLabel = 'On this page' } = intro;
+    const has = (node) => node != null && node !== false && node !== '';
+    return (_jsxs("header", { className: "eidotter-page-shell__intro", children: [has(eyebrow) && _jsx("div", { className: "eidotter-page-shell__eyebrow", children: eyebrow }), _jsx("h1", { className: "eidotter-page-shell__title", children: title }), has(lead) && _jsx("p", { className: "eidotter-page-shell__lead", children: lead }), has(meta) && _jsx("div", { className: "eidotter-page-shell__meta", children: meta }), toc && toc.length > 0 && (_jsx("nav", { className: "eidotter-page-shell__toc", "aria-label": tocLabel, children: _jsx("ul", { className: "eidotter-page-shell__toc-list", children: toc.map((item, i) => (_jsx("li", { children: isSafeHref(item.href) ? (_jsx("a", { className: "eidotter-page-shell__toc-link", href: item.href, children: item.label })) : (_jsx("span", { className: "eidotter-page-shell__toc-link", children: item.label })) }, `${item.href}-${i}`))) }) }))] }));
+}
+/**
+ * PageShell: the "one block" page layout (0.43).
+ *
+ * One centred column (1240px by default) with a `max(16px, safe-area)` side
+ * gutter and 24px / 64px block padding. Header, intro, sections and footer
+ * all live inside the column, so everything shares one left edge, stacked
+ * with a 40px gap. No dividers: the only lines on the page are the ones its
+ * children draw (window frames, pane gaps).
+ *
+ * Server-safe and presentational. Ref forwards to the root `<div>`.
+ */
+export const PageShell = forwardRef(({ header, intro, footer, maxWidth, contentAs = 'main', contentId, children, className, style, ...rest }, ref) => {
+    const Content = contentAs;
+    const width = maxWidth?.trim();
+    const mergedStyle = width
+        ? { ...style, '--eidotter-page-shell-max': width }
+        : style;
+    return (_jsx("div", { ref: ref, className: cn('eidotter-page-shell', className), style: mergedStyle, ...rest, children: _jsxs("div", { className: "eidotter-page-shell__column", children: [header != null && header !== false && (_jsx("div", { className: "eidotter-page-shell__header", children: header })), _jsxs(Content, { id: contentId, className: "eidotter-page-shell__content", children: [intro && _jsx(PageIntro, { intro: intro }), children] }), footer != null && footer !== false && (_jsx("div", { className: "eidotter-page-shell__footer", children: footer }))] }) }));
+});
+PageShell.displayName = 'PageShell';

package/dist/components/PageShell/components/index.d.ts

@@ -0,0 +1,4 @@
+export { PageShell } from './PageShell.js';
+export type { PageShellProps, PageShellIntro, PageShellTocItem } from './PageShell.js';
+export { PageSection } from './PageSection.js';
+export type { PageSectionProps } from './PageSection.js';

package/dist/components/PageShell/components/index.js

@@ -0,0 +1,2 @@
+export { PageShell } from './PageShell.js';
+export { PageSection } from './PageSection.js';

package/dist/components/PageShell/index.d.ts

@@ -0,0 +1,2 @@
+export { PageShell, PageSection } from './components/index.js';
+export type { PageShellProps, PageShellIntro, PageShellTocItem, PageSectionProps } from './components/index.js';

package/dist/components/PageShell/index.js

@@ -0,0 +1 @@
+export { PageShell, PageSection } from './components/index.js';

package/dist/components/registry.js

@@ -688,8 +688,14 @@ export const componentRegistry = {
             'variant:modern': { description: 'Modern header without phosphor glow' },
             'context:categories': { description: 'Category badge row below the main row — measurable DOM target (stable eidotter-header__categories / __category classes + data-category-key) for the Mark arm-connector (DMNC-1325)', since: '0.39.0' },
             'context:returnTo': { description: 'Breadcrumb return pill — same-tab via linkComponent by default; reuseTab navigates via window.open(href, "rizomorf-shell") named-tab reuse', since: '0.39.0' },
+            'layout:inline': { description: 'Brand left, nav (+ end) right, one row (default)', since: '0.43.0' },
+            'layout:stacked': { description: 'Brand row on top (end + MENU on its right), desktop nav on its own row below, left-aligned on the brand edge', since: '0.43.0' },
+            'brandCollapse:none': { description: 'Icon brands always show the name, wrapping when short of room (default)', since: '0.43.0' },
+            'brandCollapse:mark': { description: 'Below 480px of header width (container query) only the icon shows; the name stays the accessible name', since: '0.43.0' },
         },
         changelog: [
+            { version: '0.43.0', type: 'added', description: '`layout` (inline | stacked), `rule` (false drops the bottom line and its glow), `contained` (true = 1240px column, or a CSS length, with the PageShell gutter, so the brand lines up with a page column) and `brandCollapse` (none | mark) props; all default to the previous rendering' },
+            { version: '0.43.0', type: 'changed', description: 'The brand name wraps instead of ellipsizing: the brand link shrinks first (the end slot clips only after the brand reaches its floor of icon + about 8 tracked characters), words break at spaces, a single over-long word breaks mid-word as a last resort; the icon top-aligns beside a two-line name' },
             { version: '0.41.3', type: 'changed', description: 'end slot clips the inline axis only (overflow-x: clip) with a 12px inline bleed, so focus rings and phosphor glows of controls in it are no longer cut; overflow: hidden fallback without clip support (DMNC-1611)' },
             { version: '0.41.3', type: 'changed', description: 'items={[]} renders no nav: no empty <nav> and no MENU trigger below 768px; the brand link gets the house focus ring (2px border-focus outline, 2px offset) in both variants (DMNC-1611)' },
             { version: '0.41.0', type: 'changed', description: 'Mobile Nav panel close is the shared IconButton (md 36x36, outline, hover invert) (DMNC-1592)' },
@@ -800,6 +806,30 @@ export const componentRegistry = {
             { version: '0.41.0', type: 'added', description: 'Initial DosWindow: title, marker, active, controls, footer, className; stable classes eidotter-window, __strip, __title, __controls, __body, __footer (DMNC-1592)' },
         ],
     },
+    Bench: {
+        origin: 'eidotter',
+        consumers: [],
+        since: '0.43.0',
+        originNote: 'Compare unit on DosWindow: title strip (heading after the ▸ marker) with wrapping status chips and an optional note, then before | after panes split by a 1px gap the grid background paints (no divider elements). Pane label row + keyboard-scrollable frame (max 640px, phone frame 390px); stacks below 760px of bench width (container query). From the review-page template (page-template-review-bench).',
+        platforms: { react: { path: 'src/components/Bench', status: 'canonical' } },
+        changelog: [
+            { version: '0.43.0', type: 'added', description: 'Initial Bench: title, headingLevel, chips, note, panes ({ label, content, tone, frame, frameLabel }), maxHeight; stable classes eidotter-bench, __panes, __pane, __label, __frame, __note' },
+        ],
+    },
+    PageShell: {
+        origin: 'eidotter',
+        consumers: [],
+        since: '0.43.0',
+        originNote: 'The "one block" page layout: one centred column (1240px default) with a max(16px, safe-area) gutter, 24/64px block padding, header/intro/sections/footer on one left edge with a 40px gap and no dividers. Structured intro (eyebrow, h1, lead, meta, TOC chips). PageSection (h2 in the display face, accent, no rule; 16px gap) ships alongside. Server-safe.',
+        variants: {
+            'contentAs:main': { description: 'Content is the page main landmark (default)', since: '0.43.0' },
+            'contentAs:div': { description: 'Content is a div, for app layouts that already render <main>', since: '0.43.0' },
+        },
+        platforms: { react: { path: 'src/components/PageShell', status: 'canonical' } },
+        changelog: [
+            { version: '0.43.0', type: 'added', description: 'Initial PageShell (header, intro, footer, maxWidth, contentAs, contentId) and PageSection (title, headingLevel, id); a Header in the header slot drops its inline padding so its brand sits on the column edge' },
+        ],
+    },
     Notification: {
         origin: 'eidotter',
         consumers: [],