eidotter 0.41.3 → 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)**
 
@@ -59,6 +59,8 @@ import 'eidotter/utilities';                 // Optional: .dos-* typography clas
 
 Granular imports are still available (`eidotter/fonts.css`, `eidotter/tokens.css`) if you want to override the font or tokens independently.
 
+**Fonts in your build output:** your bundler emits the four JetBrains Mono Nerd Font woff2 files (body tier, about 4 MB) even if you never use the body tier. Browsers only download faces a page uses, so this is deploy size, not page weight. To leave them out, see "Fonts: what your build emits" in [`guidelines/README.md`](guidelines/README.md).
+
 **Favicon:** the logomark favicon ships as `eidotter/favicon.svg` (SVG only). Copy it into your site's public dir or point a bundler at it, then `<link rel="icon" href="/favicon.svg" type="image/svg+xml" />`.
 
 ### With Tailwind
@@ -114,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.41.3` (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
 
@@ -131,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/CmdPalette/components/CmdPalette.js

@@ -1,9 +1,11 @@
 'use client';
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { DosDialog } from '../../DosDialog/components/DosDialog.js';
 import { cn } from '../../../utils/cn.js';
-const defaultFooterHint = (_jsx(_Fragment, { children: "\u2191/\u2193 NAVIGATE \u00B7 \u21B5 OPEN \u00B7 ESC CLOSE" }));
+// Each key hint is one no-wrap unit, so a narrow palette wraps between hints
+// ("ESC CLOSE" never splits across lines, DMNC-1612). Text is unchanged.
+const defaultFooterHint = (_jsxs(_Fragment, { children: [_jsx("span", { className: "eidotter-cmdpal__key-hint", children: "\u2191/\u2193 NAVIGATE" }), ' · ', _jsx("span", { className: "eidotter-cmdpal__key-hint", children: "\u21B5 OPEN" }), ' · ', _jsx("span", { className: "eidotter-cmdpal__key-hint", children: "ESC CLOSE" })] }));
 /** Split hotkey string like "mod+shift+p" into a predicate. */
 function parseHotkey(hotkey) {
     const parts = hotkey.toLowerCase().split('+').map(p => p.trim());
@@ -168,7 +170,7 @@ export const CmdPalette = forwardRef(({ open, onOpenChange, items, placeholder =
                                 if (suppressHoverRef.current)
                                     return;
                                 setSelected(i);
-                            }, onClick: () => handleSelect(item), children: renderItem ? renderItem(item, isSelected) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: cn('eidotter-cmdpal__item-label', isSelected && 'eidotter-cmdpal__text--bright'), children: [_jsx("span", { className: "eidotter-cmdpal__item-caret", "aria-hidden": "true", children: isSelected ? '▸' : ' ' }), item.label] }), item.hint !== undefined && (_jsx("span", { className: cn('eidotter-cmdpal__item-hint', isSelected ? 'eidotter-cmdpal__text--bright' : 'eidotter-cmdpal__text--muted'), children: item.hint }))] })) }, item.id));
+                            }, onClick: () => handleSelect(item), children: renderItem ? renderItem(item, isSelected) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: cn('eidotter-cmdpal__item-label', isSelected && 'eidotter-cmdpal__text--bright'), children: [_jsx("span", { className: "eidotter-cmdpal__item-caret", "aria-hidden": "true", children: isSelected ? '▸' : ' ' }), _jsx("span", { className: "eidotter-cmdpal__item-text", children: item.label })] }), item.hint !== undefined && (_jsx("span", { className: cn('eidotter-cmdpal__item-hint', isSelected ? 'eidotter-cmdpal__text--bright' : 'eidotter-cmdpal__text--muted'), children: item.hint }))] })) }, item.id));
                     })] })] }));
 });
 CmdPalette.displayName = 'CmdPalette';

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/IconButton/components/IconButton.d.ts

@@ -1,22 +1,39 @@
 import React from 'react';
 import type { PressEvent } from 'react-aria-components';
 import type { IconName } from '../../Icon/components/Icon.js';
-/** `md` = 36×36 hit area, 20px glyph (every built-in adopter). `window` = 28×28, 16px glyph, for dense chrome. */
-export type IconButtonSize = 'md' | 'window';
+/**
+ * `md` = 36×36 hit area, 20px glyph (every built-in adopter). `window` = 28×28,
+ * 16px glyph, for dense chrome. `touch` = 44×44, 24px glyph, a full-size touch
+ * target for stage and kiosk shells.
+ */
+export type IconButtonSize = 'md' | 'window' | 'touch';
 /** `outline` = 1px square outline at rest (default). `bare` = no resting outline. */
 export type IconButtonVariant = 'outline' | 'bare';
+/**
+ * `accent` = the house `text-accent` glyph with the amber hover invert
+ * (default). `inherit` = glyph, outline and focus ring take the surrounding
+ * `currentColor`, for coloured bars; hover and press tint the button with that
+ * colour instead of the amber fill.
+ */
+export type IconButtonTone = 'accent' | 'inherit';
 export interface IconButtonProps {
     /** Glyph from the `<Icon>` set: `Close` (X), `Cancel` (minus, minimise), `Fullscreen` (maximise), `Chevron Left/Right/Up/Down`. */
     icon: IconName;
     /** Accessible name. Required: the button has no visible text. Rendered as `aria-label`. */
     label: string;
-    /** Hit-area size. Defaults to `md` (36×36). */
+    /** Hit-area size. Defaults to `md` (36×36); `touch` is 44×44. */
     size?: IconButtonSize;
     /**
      * `outline` (default) shows the thin square outline at rest. `bare` drops
      * it, for places where an outline would fight a neighbouring rule.
      */
     variant?: IconButtonVariant;
+    /**
+     * Colour source. `accent` (default) is the house look. `inherit` uses the
+     * parent's text colour (`currentColor`) for the glyph, outline and focus
+     * ring, so the button reads on a coloured status bar; set the bar's `color`.
+     */
+    tone?: IconButtonTone;
     /** Disables the button (opacity 0.5, no hover invert). */
     isDisabled?: boolean;
     /** Called on press (mouse, touch, Enter, Space). */

package/dist/components/IconButton/components/IconButton.js

@@ -15,5 +15,5 @@ import { cn } from '../../../utils/cn.js';
  * React Aria `Button` handles press, keyboard and focus-visible. Ref forwards
  * to the `<button>`.
  */
-export const IconButton = forwardRef(({ icon, label, size = 'md', variant = 'outline', isDisabled, onPress, excludeFromTabOrder, className, }, ref) => (_jsx(AriaButton, { ref: ref, "aria-label": label, isDisabled: isDisabled, onPress: onPress, excludeFromTabOrder: excludeFromTabOrder, className: cn('inline-flex items-center justify-center shrink-0', 'eidotter-icon-button', size === 'window' && 'eidotter-icon-button--window', variant === 'bare' && 'eidotter-icon-button--bare', className), children: _jsx("span", { className: "eidotter-icon-button__glyph", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: "S", decorative: true }) }) })));
+export const IconButton = forwardRef(({ icon, label, size = 'md', variant = 'outline', tone = 'accent', isDisabled, onPress, excludeFromTabOrder, className, }, ref) => (_jsx(AriaButton, { ref: ref, "aria-label": label, isDisabled: isDisabled, onPress: onPress, excludeFromTabOrder: excludeFromTabOrder, className: cn('inline-flex items-center justify-center shrink-0', 'eidotter-icon-button', size === 'window' && 'eidotter-icon-button--window', size === 'touch' && 'eidotter-icon-button--touch', variant === 'bare' && 'eidotter-icon-button--bare', tone === 'inherit' && 'eidotter-icon-button--inherit', className), children: _jsx("span", { className: "eidotter-icon-button__glyph", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: "S", decorative: true }) }) })));
 IconButton.displayName = 'IconButton';

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

@@ -1,2 +1,2 @@
 export { IconButton } from './IconButton.js';
-export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton.js';
+export type { IconButtonProps, IconButtonSize, IconButtonVariant, IconButtonTone } from './IconButton.js';

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

@@ -1,2 +1,2 @@
 export { IconButton } from './components/index.js';
-export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './components/index.js';
+export type { IconButtonProps, IconButtonSize, IconButtonVariant, IconButtonTone } from './components/index.js';

package/dist/components/Lightbox/components/Lightbox.d.ts

@@ -18,7 +18,8 @@ export interface LightboxProps {
  * The shell supplies the overlay, chrome, motion and the title strip;
  * the `[ n / N ]` counter is the strip's title and the close control sits at
  * its end (an IconButton). Lightbox adds prev/next (IconButtons with the pixel
- * chevrons), caption, keyboard nav, and touch swipe.
+ * chevrons; omitted when there is only one image), caption, keyboard nav, and
+ * touch swipe. A figure taller than the body scrolls from its top edge.
  * It shares the shell's z-index (`--z-index-modal`) with Modal; stacking a
  * Lightbox over an open Modal is not a supported case.
  *

package/dist/components/Lightbox/components/Lightbox.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useState } from 'react';
 import { IconButton } from '../../IconButton/components/IconButton.js';
 import { DosDialog } from '../../DosDialog/components/DosDialog.js';
@@ -9,7 +9,8 @@ import { DosDialog } from '../../DosDialog/components/DosDialog.js';
  * The shell supplies the overlay, chrome, motion and the title strip;
  * the `[ n / N ]` counter is the strip's title and the close control sits at
  * its end (an IconButton). Lightbox adds prev/next (IconButtons with the pixel
- * chevrons), caption, keyboard nav, and touch swipe.
+ * chevrons; omitted when there is only one image), caption, keyboard nav, and
+ * touch swipe. A figure taller than the body scrolls from its top edge.
  * It shares the shell's z-index (`--z-index-modal`) with Modal; stacking a
  * Lightbox over an open Modal is not a supported case.
  *
@@ -96,10 +97,14 @@ export const Lightbox = ({ images, initialIndex = 0, isOpen, onClose, onIndexCha
     const current = images[safeIndex];
     const hasPrev = safeIndex > 0;
     const hasNext = safeIndex < images.length - 1;
+    // One image: nothing to navigate, so no prev/next at all (two permanently
+    // disabled buttons are noise). The `[ 1 / 1 ]` counter stays as the strip
+    // title, so the strip keeps its heading and the position stays explicit.
+    const canNavigate = images.length > 1;
     return (_jsx(DosDialog, { open: isOpen, onOpenChange: (open) => { if (!open)
             onClose(); }, placement: "center", size: "full", "aria-label": current.alt || 'Image viewer', className: "eidotter-lightbox__container", head: {
             title: (_jsxs("span", { className: "eidotter-lightbox__counter", "aria-live": "polite", children: ["[ ", safeIndex + 1, " / ", images.length, " ]"] })),
             end: (_jsx(IconButton, { icon: "Close", label: "Close lightbox", className: "eidotter-lightbox__close", onPress: onClose })),
-        }, children: _jsxs("figure", { className: "eidotter-lightbox__figure", children: [_jsx("img", { className: "eidotter-lightbox__image", src: current.src, alt: current.alt, width: current.width, height: current.height, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd }), _jsx(IconButton, { icon: "Chevron Left", label: "Previous image", className: "eidotter-lightbox__nav eidotter-lightbox__nav--prev", onPress: goPrev, isDisabled: !hasPrev }), _jsx(IconButton, { icon: "Chevron Right", label: "Next image", className: "eidotter-lightbox__nav eidotter-lightbox__nav--next", onPress: goNext, isDisabled: !hasNext }), current.caption && (_jsx("figcaption", { className: "eidotter-lightbox__caption", children: current.caption }))] }) }));
+        }, children: _jsxs("figure", { className: "eidotter-lightbox__figure", children: [_jsx("img", { className: "eidotter-lightbox__image", src: current.src, alt: current.alt, width: current.width, height: current.height, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd }), canNavigate && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: "Chevron Left", label: "Previous image", className: "eidotter-lightbox__nav eidotter-lightbox__nav--prev", onPress: goPrev, isDisabled: !hasPrev }), _jsx(IconButton, { icon: "Chevron Right", label: "Next image", className: "eidotter-lightbox__nav eidotter-lightbox__nav--next", onPress: goNext, isDisabled: !hasNext })] })), current.caption && (_jsx("figcaption", { className: "eidotter-lightbox__caption", children: current.caption }))] }) }));
 };
 Lightbox.displayName = 'Lightbox';

package/dist/components/Nav/components/Nav.d.ts

@@ -5,6 +5,24 @@ export interface NavItem {
     /** URL/path for the link */
     href: string;
 }
+/** Props eidotter passes to a custom link component. */
+export interface NavLinkProps {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: () => void;
+    'aria-current'?: 'page';
+}
+/**
+ * A router link component for `linkComponent`: any component that accepts
+ * {@link NavLinkProps}. Its own props may be wider (Next.js `Link` takes
+ * `href: string | UrlObject`). Function and class components match
+ * `ComponentType`; `forwardRef`/`memo` components such as `next/link` match
+ * `ExoticComponent`, which has no `propTypes` member, so the `propTypes`
+ * comparison that rejected `next/link` under @types/react 18 does not apply
+ * (DMNC-1612). Works with @types/react 18 and 19, no wrapper needed.
+ */
+export type NavLinkComponent = React.ComponentType<NavLinkProps> | React.ExoticComponent<NavLinkProps>;
 export interface NavProps {
     /** Navigation items */
     items: NavItem[];
@@ -13,15 +31,10 @@ export interface NavProps {
     /** Visual variant */
     variant?: 'retro' | 'modern';
     /**
-     * Custom link component (e.g., Next.js Link).
+     * Custom link component (e.g. Next.js `Link`, passed directly).
      * If not provided, uses regular anchor tags.
      */
-    linkComponent?: React.ComponentType<{
-        href: string;
-        className?: string;
-        children: React.ReactNode;
-        onClick?: () => void;
-    }>;
+    linkComponent?: NavLinkComponent;
     /** Additional CSS class name */
     className?: string;
 }

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

@@ -1,2 +1,2 @@
 export { Nav, DesktopNav, MobileNav } from './Nav.js';
-export type { NavProps, NavItem } from './Nav.js';
+export type { NavProps, NavItem, NavLinkProps, NavLinkComponent } from './Nav.js';

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

@@ -1,2 +1,2 @@
 export { Nav, DesktopNav, MobileNav } from './components/index.js';
-export type { NavProps, NavItem } from './components/index.js';
+export type { NavProps, NavItem, NavLinkProps, NavLinkComponent } from './components/index.js';

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';