eidotter 0.40.2 → 0.41.0

package/dist/components/CmdPalette/components/CmdPalette.js

@@ -1,7 +1,7 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
-import { ModalOverlay as AriaModalOverlay, Modal as AriaModal, Dialog as AriaDialog, } from 'react-aria-components';
+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" }));
 /** Split hotkey string like "mod+shift+p" into a predicate. */
@@ -50,9 +50,10 @@ function scoreItem(item, query) {
  * Controlled component. Parent owns `open` and item list; CmdPalette handles
  * search, keyboard navigation, focus management, and hotkey binding.
  *
- * Built on React Aria `ModalOverlay` + `Modal` + `Dialog` — same primitives
- * as `<Modal>` — so focus trap, Esc-to-close, and backdrop dismissal are
- * standard.
+ * Built on the DosDialog shell (DMNC-1592), top placement, `lg` width: the
+ * shell supplies focus trap, Esc-to-close, backdrop dismissal, chrome, motion
+ * and the amber `▸ JUMP TO` strip (decorative; the dialog is named by
+ * `aria-label`).
  */
 export const CmdPalette = forwardRef(({ open, onOpenChange, items, placeholder = 'SEARCH · TYPE · ▸', hotkey = 'mod+k', emptyMessage = 'NO MATCHES', footerHint = defaultFooterHint, renderItem, maxResults = 20, className, 'aria-label': ariaLabel = 'Command palette', }, ref) => {
     const baseId = useId();
@@ -157,13 +158,17 @@ export const CmdPalette = forwardRef(({ open, onOpenChange, items, placeholder =
             }
         }
     };
-    return (_jsx(AriaModalOverlay, { isOpen: open, onOpenChange: onOpenChange, isDismissable: true, className: ({ isEntering, isExiting }) => cn('eidotter-cmdpal-overlay', isEntering && 'eidotter-cmdpal-overlay--entering', isExiting && 'eidotter-cmdpal-overlay--exiting'), children: _jsx(AriaModal, { className: ({ isEntering, isExiting }) => cn('eidotter-cmdpal', isEntering && 'eidotter-cmdpal--entering', isExiting && 'eidotter-cmdpal--exiting'), children: _jsxs(AriaDialog, { "aria-label": ariaLabel, className: cn('eidotter-cmdpal__container outline-none', className), ref: ref, children: [_jsxs("div", { className: "eidotter-cmdpal__head", "aria-hidden": "true", children: [_jsx("span", { children: "\u25B8 JUMP TO" }), _jsx("span", { className: "eidotter-cmdpal__blink", children: "_" })] }), _jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-controls": listboxId, "aria-expanded": true, "aria-autocomplete": "list", "aria-activedescendant": results[selected] ? `${baseId}-item-${results[selected].id}` : undefined, className: "eidotter-cmdpal__input", value: query, placeholder: placeholder, onChange: e => setQuery(e.target.value), onKeyDown: handleKeyDown }), _jsxs("ul", { ref: listRef, id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "eidotter-cmdpal__results", children: [results.length === 0 && (_jsx("li", { className: "eidotter-cmdpal__empty", role: "presentation", children: emptyMessage })), results.map((item, i) => {
-                                const isSelected = i === selected;
-                                return (_jsx("li", { id: `${baseId}-item-${item.id}`, role: "option", "aria-selected": isSelected, "data-index": i, className: cn('eidotter-cmdpal__item', isSelected && 'eidotter-cmdpal__item--selected'), onMouseMove: () => {
-                                        if (suppressHoverRef.current)
-                                            return;
-                                        setSelected(i);
-                                    }, onClick: () => handleSelect(item), children: renderItem ? renderItem(item, isSelected) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "eidotter-cmdpal__item-label", children: [_jsx("span", { className: "eidotter-cmdpal__item-caret", "aria-hidden": "true", children: isSelected ? '▸' : ' ' }), item.label] }), item.hint !== undefined && (_jsx("span", { className: "eidotter-cmdpal__item-hint", children: item.hint }))] })) }, item.id));
-                            })] }), footerHint && (_jsx("div", { className: "eidotter-cmdpal__footer", "aria-hidden": "true", children: footerHint }))] }) }) }));
+    return (_jsxs(DosDialog, { ref: ref, open: open, onOpenChange: onOpenChange, placement: "top", size: "lg", "aria-label": ariaLabel, className: cn('eidotter-cmdpal__container', className), head: {
+            title: 'JUMP TO',
+            end: _jsx("span", { className: "eidotter-cmdpal__blink", children: "_" }),
+            decorative: true,
+        }, footer: footerHint ? (_jsx("div", { className: "eidotter-cmdpal__footer", "aria-hidden": "true", children: footerHint })) : undefined, children: [_jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-controls": listboxId, "aria-expanded": true, "aria-autocomplete": "list", "aria-activedescendant": results[selected] ? `${baseId}-item-${results[selected].id}` : undefined, className: "eidotter-cmdpal__input", value: query, placeholder: placeholder, onChange: e => setQuery(e.target.value), onKeyDown: handleKeyDown }), _jsxs("ul", { ref: listRef, id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "eidotter-cmdpal__results", children: [results.length === 0 && (_jsx("li", { className: "eidotter-cmdpal__empty", role: "presentation", children: emptyMessage })), results.map((item, i) => {
+                        const isSelected = i === selected;
+                        return (_jsx("li", { id: `${baseId}-item-${item.id}`, role: "option", "aria-selected": isSelected, "data-index": i, className: cn('eidotter-cmdpal__item', isSelected && 'eidotter-cmdpal__item--selected'), onMouseMove: () => {
+                                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));
+                    })] })] }));
 });
 CmdPalette.displayName = 'CmdPalette';

package/dist/components/DecayStrip/components/DecayStrip.js

@@ -88,7 +88,12 @@ export const DecayStrip = forwardRef(({ items, samples, now, window, provenance,
         .filter(Boolean)
         .join('; ');
     const compact = size === 'sm';
-    return (_jsxs("div", { ref: ref, className: cn('eidotter-decay-strip eidotter-health flex flex-col gap-2 w-full min-w-0 font-dos text-dos-text-brand', sizeClasses[size] ?? sizeClasses.md, toneClasses[tone], className), ...props, children: [items.length === 0 ? (_jsx(EmptyState, { title: `${zeroPercent} ${labels.remaining}`, className: "py-2" })) : (_jsx("ul", { className: cn('flex gap-2 min-w-0', compact ? 'flex-col' : 'flex-wrap'), children: rows.map((r) => (_jsx("li", { className: cn('eidotter-decay-strip__item min-w-0', compact ? 'flex flex-wrap items-baseline gap-2 tabular-nums' : 'flex-1'), children: compact ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate text-dos-text-accent", title: r.item.label, children: r.item.label }), _jsx("span", { children: r.amountText }), _jsx("span", { children: r.shareText }), r.tagText && (_jsx("span", { className: "eidotter-decay-strip__item-provenance border border-dos-border-brand px-1", children: r.tagText }))] })) : (_jsx(Gauge, { label: r.item.label, value: r.share === null ? null : r.share * 100, secondary: r.item.amount === null ? undefined : r.amountText, size: "sm", tone: tone, provenance: r.item.provenance, locale: locale, labels: labelOverrides })) }, r.item.id))) })), _jsxs("div", { className: "eidotter-decay-strip__strip flex items-center gap-2 min-w-0 tabular-nums", role: "img", "aria-label": summary, children: [_jsx("span", { className: "eidotter-decay-strip__from shrink-0", children: fromText }), _jsx("span", { className: "eidotter-decay-strip__cells flex-1 min-w-0 overflow-hidden whitespace-nowrap leading-none", style: tone === 'neutral' ? undefined : { color: 'var(--eidotter-fill)' }, children: cells.map((cell, i) => {
+    return (_jsxs("div", { ref: ref, className: [
+            // The size class (a text-* font size) is joined outside cn(): twMerge
+            // reads it as a colour and would drop text-dos-text-brand.
+            cn('eidotter-decay-strip eidotter-health flex flex-col gap-2 w-full min-w-0 font-dos text-dos-text-brand', toneClasses[tone], className),
+            sizeClasses[size] ?? sizeClasses.md,
+        ].join(' '), ...props, children: [items.length === 0 ? (_jsx(EmptyState, { title: `${zeroPercent} ${labels.remaining}`, className: "py-2" })) : (_jsx("ul", { className: cn('flex gap-2 min-w-0', compact ? 'flex-col' : 'flex-wrap'), children: rows.map((r) => (_jsx("li", { className: cn('eidotter-decay-strip__item min-w-0', compact ? 'flex flex-wrap items-baseline gap-2 tabular-nums' : 'flex-1'), children: compact ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate text-dos-text-accent", title: r.item.label, children: r.item.label }), _jsx("span", { children: r.amountText }), _jsx("span", { children: r.shareText }), r.tagText && (_jsx("span", { className: "eidotter-decay-strip__item-provenance border border-dos-border-brand px-1", children: r.tagText }))] })) : (_jsx(Gauge, { label: r.item.label, value: r.share === null ? null : r.share * 100, secondary: r.item.amount === null ? undefined : r.amountText, size: "sm", tone: tone, provenance: r.item.provenance, locale: locale, labels: labelOverrides })) }, r.item.id))) })), _jsxs("div", { className: "eidotter-decay-strip__strip flex items-center gap-2 min-w-0 tabular-nums", role: "img", "aria-label": summary, children: [_jsx("span", { className: "eidotter-decay-strip__from shrink-0", children: fromText }), _jsx("span", { className: "eidotter-decay-strip__cells flex flex-1 min-w-0 overflow-hidden whitespace-nowrap leading-none", style: tone === 'neutral' ? undefined : { color: 'var(--eidotter-fill)' }, children: cells.map((cell, i) => {
                             const last = i === cells.length - 1;
                             const isNow = nowMs >= cell.start && (nowMs < cell.end || (last && nowMs === cell.end));
                             const future = !isNow && nowMs < cell.start && nowMs >= cells[0].start;

package/dist/components/DosDialog/components/DosDialog.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+export type DosDialogPlacement = 'center' | 'top';
+export type DosDialogSize = 'sm' | 'md' | 'lg' | 'full';
+/** Structured head for the title strip. */
+export interface DosDialogHead {
+    /** Title text. Rendered as the dialog's `<h2>` unless `decorative` is set. */
+    title: React.ReactNode;
+    /** Trailing slot on the right of the strip: close button, status, controls. */
+    end?: React.ReactNode;
+    /** Show the leading `▸` marker. Defaults to `true`. */
+    marker?: boolean;
+    /**
+     * Visual-only strip: hidden from assistive tech, and the title renders as a
+     * `<span>` instead of an `<h2>`. Use when the dialog is named by `aria-label`
+     * and the strip repeats nothing a screen reader needs (CmdPalette's
+     * `JUMP TO` banner). Do not put focusable controls in `end` when this is set.
+     */
+    decorative?: boolean;
+}
+export interface DosDialogProps {
+    /** Controlled open state. */
+    open: boolean;
+    /** Called when the dialog requests open/close (Escape, backdrop click). */
+    onOpenChange?: (open: boolean) => void;
+    /** Vertical anchor: `center` (default) or `top` (~18vh, CmdPalette's anchor). */
+    placement?: DosDialogPlacement;
+    /**
+     * Width step, shared by every dialog: `sm` 24rem, `md` 30rem (default),
+     * `lg` 40rem, `full` = viewport width minus 2 × spacing-4. Every step is
+     * capped at the viewport minus 32px.
+     */
+    size?: DosDialogSize;
+    /**
+     * The title strip (dark, yellow title, dim-amber rule). Pass `{ title, end?, marker?, decorative? }` for the
+     * standard strip, or any ReactNode to fill the strip yourself. Omit for no strip.
+     */
+    head?: React.ReactNode | DosDialogHead;
+    /** Footer row, separated from the body by a 1px rule. Rendered in a `<div>` (no contentinfo landmark). */
+    footer?: React.ReactNode;
+    /** Close on backdrop click / outside interaction. Escape always closes. Defaults to `true`. */
+    isDismissable?: boolean;
+    /**
+     * Accessible name. When omitted, a non-decorative `head.title` names the dialog.
+     * A ReactNode head, a `decorative` head or no head names nothing: pass
+     * `aria-label` or `aria-labelledby` then, or the dialog has no accessible
+     * name (outside production builds, an open unnamed dialog logs a `console.warn`).
+     */
+    'aria-label'?: string;
+    /** Id of the element that names the dialog. */
+    'aria-labelledby'?: string;
+    /** Extra classes merged onto the visible container (`.eidotter-dialog__container`). */
+    className?: string;
+    /** Dialog body. */
+    children?: React.ReactNode;
+}
+/**
+ * DosDialog: the one overlay shell (DMNC-1592).
+ *
+ * The CmdPalette chrome, generalised: brand-coloured medium border with an
+ * amber phosphor glow, square corners, a blurred scrim, and a dark title
+ * strip (yellow title, `▸` marker, dim-amber rule below). Modal, Lightbox and
+ * CmdPalette are built on it.
+ *
+ * React Aria `ModalOverlay > Modal > Dialog` provides the focus trap, scroll
+ * lock, Escape and backdrop dismissal. The panel pops in/out with the shared
+ * `eidotter-pop-in/out` keyframes (scale 0.8 to 1, the CRT turn-on) and the
+ * scrim fades; under reduced motion the entering/exiting classes are not applied at all.
+ *
+ * Accessible name: a non-decorative structured `head.title` names the dialog;
+ * otherwise pass `aria-label` / `aria-labelledby`. Outside production builds
+ * an open dialog with no name logs a `console.warn`.
+ *
+ * The strip title is one line with an ellipsis by default; Modal lets it wrap.
+ *
+ * Ref forwards to the dialog element (`.eidotter-dialog__container`).
+ */
+export declare const DosDialog: React.ForwardRefExoticComponent<DosDialogProps & React.RefAttributes<HTMLElement>>;

package/dist/components/DosDialog/components/DosDialog.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, isValidElement, useEffect, useId } from 'react';
+import { ModalOverlay as AriaModalOverlay, Modal as AriaModal, Dialog as AriaDialog, } from 'react-aria-components';
+import { cn } from '../../../utils/cn.js';
+import { prefersReducedMotion } from '../../../utils/prefersReducedMotion.js';
+function isHeadObject(head) {
+    return (typeof head === 'object' &&
+        head !== null &&
+        !isValidElement(head) &&
+        !Array.isArray(head) &&
+        'title' in head);
+}
+/**
+ * DosDialog: the one overlay shell (DMNC-1592).
+ *
+ * The CmdPalette chrome, generalised: brand-coloured medium border with an
+ * amber phosphor glow, square corners, a blurred scrim, and a dark title
+ * strip (yellow title, `▸` marker, dim-amber rule below). Modal, Lightbox and
+ * CmdPalette are built on it.
+ *
+ * React Aria `ModalOverlay > Modal > Dialog` provides the focus trap, scroll
+ * lock, Escape and backdrop dismissal. The panel pops in/out with the shared
+ * `eidotter-pop-in/out` keyframes (scale 0.8 to 1, the CRT turn-on) and the
+ * scrim fades; under reduced motion the entering/exiting classes are not applied at all.
+ *
+ * Accessible name: a non-decorative structured `head.title` names the dialog;
+ * otherwise pass `aria-label` / `aria-labelledby`. Outside production builds
+ * an open dialog with no name logs a `console.warn`.
+ *
+ * The strip title is one line with an ellipsis by default; Modal lets it wrap.
+ *
+ * Ref forwards to the dialog element (`.eidotter-dialog__container`).
+ */
+export const DosDialog = forwardRef(({ open, onOpenChange, placement = 'center', size = 'md', head, footer, isDismissable = true, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }, ref) => {
+    const titleId = useId();
+    const reduced = prefersReducedMotion();
+    const structured = isHeadObject(head) ? head : null;
+    const labelledBy = ariaLabelledBy ??
+        (!ariaLabel && structured && !structured.decorative ? titleId : undefined);
+    const unnamed = open && !ariaLabel && !labelledBy;
+    useEffect(() => {
+        if (unnamed && process.env.NODE_ENV !== 'production') {
+            console.warn('[eidotter] DosDialog has no accessible name. A ReactNode or decorative head ' +
+                'does not name the dialog: pass aria-label or aria-labelledby.');
+        }
+    }, [unnamed]);
+    let strip = null;
+    if (structured) {
+        const { title, end, marker = true, decorative = false } = structured;
+        const TitleTag = decorative ? 'span' : 'h2';
+        strip = (_jsxs("div", { className: "eidotter-dialog__head", "aria-hidden": decorative || undefined, children: [_jsxs("div", { className: "eidotter-dialog__lead", children: [marker && (_jsx("span", { className: "eidotter-dialog__marker", "aria-hidden": "true", children: "\u25B8" })), _jsx(TitleTag, { id: titleId, className: "eidotter-dialog__title", children: title })] }), end != null && end !== false && (_jsx("div", { className: "eidotter-dialog__end", children: end }))] }));
+    }
+    else if (head != null && head !== false) {
+        strip = _jsx("div", { className: "eidotter-dialog__head", children: head });
+    }
+    return (_jsx(AriaModalOverlay, { isOpen: open, onOpenChange: onOpenChange, isDismissable: isDismissable, className: ({ isEntering, isExiting }) => cn('eidotter-dialog__overlay', `eidotter-dialog__overlay--${placement}`, !reduced && isEntering && 'eidotter-dialog__overlay--entering', !reduced && isExiting && 'eidotter-dialog__overlay--exiting'), children: _jsx(AriaModal, { className: ({ isEntering, isExiting }) => cn('eidotter-dialog', `eidotter-dialog--${size}`, `eidotter-dialog--${placement}`, !reduced && isEntering && 'eidotter-dialog--entering', !reduced && isExiting && 'eidotter-dialog--exiting'), children: _jsxs(AriaDialog, { ref: ref, "aria-label": ariaLabel, "aria-labelledby": labelledBy, className: cn('eidotter-dialog__container outline-none', className), children: [strip, _jsx("div", { className: "eidotter-dialog__body", children: children }), footer != null && footer !== false && (_jsx("div", { className: "eidotter-dialog__footer", children: footer }))] }) }) }));
+});
+DosDialog.displayName = 'DosDialog';

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

@@ -0,0 +1,2 @@
+export { DosDialog } from './DosDialog.js';
+export type { DosDialogProps, DosDialogHead, DosDialogPlacement, DosDialogSize, } from './DosDialog.js';

package/dist/components/DosDialog/components/index.js

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

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

@@ -0,0 +1,2 @@
+export { DosDialog } from './components/index.js';
+export type { DosDialogProps, DosDialogHead, DosDialogPlacement, DosDialogSize, } from './components/index.js';

package/dist/components/DosDialog/index.js

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

package/dist/components/DosFigure/components/DosFigure.d.ts

@@ -30,8 +30,8 @@ export interface DosFigureProps {
  *
  * Sierra / LucasArts / demoscene title cards painted the screen with a
  * limited palette, dithering, and annotated frames. DosFigure recreates
- * that aesthetic: amber chrome, scanline sweep, optional pins, and a
- * resolution tag. Use as a lead-in for blog articles or as a placeholder
+ * that aesthetic: the DosWindow chrome (title strip, brand border, drop
+ * shadow), scanline sweep, optional pins, and a resolution tag. Use as a lead-in for blog articles or as a placeholder
  * where a photograph would otherwise go.
  *
  * Not intended as a replacement for semantic imagery — pass `aria-label`

package/dist/components/DosFigure/components/DosFigure.js

@@ -2,13 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from 'react';
 import { cn } from '../../../utils/cn.js';
+import { DosWindow } from '../../DosWindow/components/DosWindow.js';
 /**
  * DosFigure — demoscene-style placeholder for media.
  *
  * Sierra / LucasArts / demoscene title cards painted the screen with a
  * limited palette, dithering, and annotated frames. DosFigure recreates
- * that aesthetic: amber chrome, scanline sweep, optional pins, and a
- * resolution tag. Use as a lead-in for blog articles or as a placeholder
+ * that aesthetic: the DosWindow chrome (title strip, brand border, drop
+ * shadow), scanline sweep, optional pins, and a resolution tag. Use as a lead-in for blog articles or as a placeholder
  * where a photograph would otherwise go.
  *
  * Not intended as a replacement for semantic imagery — pass `aria-label`
@@ -17,10 +18,16 @@ import { cn } from '../../../utils/cn.js';
 export const DosFigure = forwardRef(({ title, resolution, subject, caption, pins = [], animated = true, 'aria-label': ariaLabel, className, }, ref) => {
     const captionId = useId();
     const describedById = caption ? captionId : undefined;
-    return (_jsxs("figure", { ref: ref, className: cn('eidotter-dos-figure', animated && 'eidotter-dos-figure--animated', className), role: "img", "aria-label": ariaLabel, "aria-describedby": describedById, children: [title && (_jsx("div", { className: "eidotter-dos-figure__title", "aria-hidden": "true", children: _jsx("span", { children: title }) })), _jsxs("div", { className: "eidotter-dos-figure__frame", children: [_jsx("div", { className: "eidotter-dos-figure__subject", children: subject }), pins.length > 0 && (_jsx("ul", { className: "eidotter-dos-figure__pins", role: "list", children: pins.map((pin, idx) => {
-                            const x = Number.isFinite(pin.x) ? Math.max(0, Math.min(100, pin.x)) : 0;
-                            const y = Number.isFinite(pin.y) ? Math.max(0, Math.min(100, pin.y)) : 0;
-                            return (_jsxs("li", { className: "eidotter-dos-figure__pin", style: { left: `${x}%`, top: `${y}%` }, children: [_jsx("span", { className: "eidotter-dos-figure__pin-dot", "aria-hidden": "true" }), _jsx("span", { className: "eidotter-dos-figure__pin-label", children: pin.label })] }, `${x}-${y}-${idx}`));
-                        }) })), _jsx("span", { className: "eidotter-dos-figure__scanline", "aria-hidden": "true" }), resolution && (_jsx("span", { className: "eidotter-dos-figure__resolution", "aria-hidden": "true", children: resolution }))] }), caption && (_jsx("figcaption", { id: captionId, className: "eidotter-dos-figure__caption", children: caption }))] }));
+    return (_jsxs("figure", { ref: ref, className: cn('eidotter-dos-figure', animated && 'eidotter-dos-figure--animated', className), role: "img", "aria-label": ariaLabel, "aria-describedby": describedById, children: [_jsx(DosWindow
+            // Decorative chrome: the figure is named by its aria-label, so the
+            // strip text stays out of the accessible content.
+            , { 
+                // Decorative chrome: the figure is named by its aria-label, so the
+                // strip text stays out of the accessible content.
+                title: title && _jsx("span", { "aria-hidden": "true", children: title }), className: "eidotter-dos-figure__window", children: _jsxs("div", { className: "eidotter-dos-figure__frame", children: [_jsx("div", { className: "eidotter-dos-figure__subject", children: subject }), pins.length > 0 && (_jsx("ul", { className: "eidotter-dos-figure__pins", role: "list", children: pins.map((pin, idx) => {
+                                const x = Number.isFinite(pin.x) ? Math.max(0, Math.min(100, pin.x)) : 0;
+                                const y = Number.isFinite(pin.y) ? Math.max(0, Math.min(100, pin.y)) : 0;
+                                return (_jsxs("li", { className: "eidotter-dos-figure__pin", style: { left: `${x}%`, top: `${y}%` }, children: [_jsx("span", { className: "eidotter-dos-figure__pin-dot", "aria-hidden": "true" }), _jsx("span", { className: "eidotter-dos-figure__pin-label", children: pin.label })] }, `${x}-${y}-${idx}`));
+                            }) })), _jsx("span", { className: "eidotter-dos-figure__scanline", "aria-hidden": "true" }), resolution && (_jsx("span", { className: "eidotter-dos-figure__resolution", "aria-hidden": "true", children: resolution }))] }) }), caption && (_jsx("figcaption", { id: captionId, className: "eidotter-dos-figure__caption", children: caption }))] }));
 });
 DosFigure.displayName = 'DosFigure';

package/dist/components/DosWindow/components/DosWindow.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export interface DosWindowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Strip title. Omit (with no `controls`) for a frame without a strip. */
+    title?: React.ReactNode;
+    /** Show the leading `▸` marker in the strip. Defaults to `true`. */
+    marker?: boolean;
+    /**
+     * Active window: strip title in the active colour. Inactive dims the
+     * strip title to `text-muted`. Defaults to `true`.
+     */
+    active?: boolean;
+    /**
+     * Window controls for the strip's end slot, usually `IconButton`s at the
+     * default `md` size (36px; they overhang the strip padding so the strip
+     * keeps its height). Consumer-supplied so DosWindow stays presentational.
+     */
+    controls?: React.ReactNode;
+    /** Footer row, separated from the body by a 1px rule. */
+    footer?: React.ReactNode;
+    /** Extra classes merged onto the root (`.eidotter-window`). */
+    className?: string;
+    /** Window body. */
+    children?: React.ReactNode;
+}
+/**
+ * DosWindow: the window chrome for in-page panels (DMNC-1592).
+ *
+ * The same title strip as DosDialog (dark, uppercase xs title, `▸` marker,
+ * 1px dim-amber rule) on a frame of brand border plus `--shadow-drop`, with
+ * no glow and no backdrop. DosFigure and Card are built on it.
+ *
+ * Server-safe and presentational: no hooks, no handlers. Controls are passed
+ * in by the consumer. The strip title is a plain `<span>`; it is not a
+ * heading, so pass your own heading element as `title` if the window needs
+ * one in the document outline.
+ *
+ * Ref forwards to the root `<div>`.
+ */
+export declare const DosWindow: React.ForwardRefExoticComponent<DosWindowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DosWindow/components/DosWindow.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+/**
+ * DosWindow: the window chrome for in-page panels (DMNC-1592).
+ *
+ * The same title strip as DosDialog (dark, uppercase xs title, `▸` marker,
+ * 1px dim-amber rule) on a frame of brand border plus `--shadow-drop`, with
+ * no glow and no backdrop. DosFigure and Card are built on it.
+ *
+ * Server-safe and presentational: no hooks, no handlers. Controls are passed
+ * in by the consumer. The strip title is a plain `<span>`; it is not a
+ * heading, so pass your own heading element as `title` if the window needs
+ * one in the document outline.
+ *
+ * Ref forwards to the root `<div>`.
+ */
+export const DosWindow = forwardRef(({ title, marker = true, active = true, controls, footer, className, children, ...rest }, ref) => {
+    const hasTitle = title != null && title !== false && title !== '';
+    const hasControls = controls != null && controls !== false;
+    return (_jsxs("div", { ref: ref, className: cn('eidotter-window', !active && 'eidotter-window--inactive', className), "data-active": active ? 'true' : 'false', ...rest, children: [(hasTitle || hasControls) && (_jsxs("div", { className: "eidotter-window__strip", children: [_jsxs("div", { className: "eidotter-window__lead", children: [marker && hasTitle && (_jsx("span", { className: "eidotter-window__marker", "aria-hidden": "true", children: "\u25B8" })), hasTitle && _jsx("span", { className: "eidotter-window__title", children: title })] }), hasControls && _jsx("div", { className: "eidotter-window__controls", children: controls })] })), _jsx("div", { className: "eidotter-window__body", children: children }), footer != null && footer !== false && (_jsx("div", { className: "eidotter-window__footer", children: footer }))] }));
+});
+DosWindow.displayName = 'DosWindow';

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

@@ -0,0 +1,2 @@
+export { DosWindow } from './DosWindow.js';
+export type { DosWindowProps } from './DosWindow.js';

package/dist/components/DosWindow/components/index.js

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

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

@@ -0,0 +1,2 @@
+export { DosWindow } from './components/index.js';
+export type { DosWindowProps } from './components/index.js';

package/dist/components/DosWindow/index.js

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

package/dist/components/FilterBar/components/FilterBar.d.ts

@@ -9,10 +9,13 @@ export interface FilterBarItem {
     /** Whether this item is disabled */
     disabled?: boolean;
     /**
-     * Optional colour-role token for the active state, applied as a CSS custom
-     * property. Prefer a semantic role (e.g. `--color-semantic-text-accent`) so
-     * the active colour follows the active theme; raw `--color-cga-*` primitives
-     * are accepted but won't re-theme. (A themeable per-category palette is
+     * Optional fill token for the active state, applied as a CSS custom
+     * property. The active label is drawn in `text-on-brand` ink, so pass a
+     * bright fill: `--color-semantic-background-brand` (follows the theme), or a
+     * bright CGA primitive (`--color-cga-bright-cyan`, `-bright-green`,
+     * `-yellow`, `-light-gray`). Each clears 4.5:1 in every theme. Text roles
+     * such as `--color-semantic-text-accent` are dark in the light theme and
+     * drop to about 3:1 as a fill. (A themeable per-category palette is
      * tracked with the token rationalization, DMNC-922/1059.)
      */
     color?: string;

package/dist/components/Footer/components/Footer.js

@@ -15,7 +15,7 @@ export const Footer = ({ copyright, links, linkComponent, children, className, .
     const resolvedLinks = links ?? defaultLegalLinks;
     const LinkTag = linkComponent ?? 'a';
     const linkClassName = 'eidotter-footer__link text-dos-text-brand no-underline';
-    return (_jsxs("footer", { className: cn('font-dos text-sm py-4 px-2 text-center', 'eidotter-footer', className), ...props, children: [_jsx("div", { className: "h-px bg-dos-border-default mb-4", role: "separator" }), children && _jsx("div", { className: "mb-3", children: children }), resolvedLinks.length > 0 && (_jsx("nav", { className: "flex justify-center items-center flex-wrap gap-2 mb-2", "aria-label": "Footer links", children: resolvedLinks.map((link, index) => {
+    return (_jsxs("footer", { className: cn('font-dos text-dos-text-base py-4 px-2 text-center', 'eidotter-footer', className), ...props, children: [_jsx("div", { className: "h-px bg-dos-border-default mb-4", role: "separator" }), children && _jsx("div", { className: "mb-3", children: children }), resolvedLinks.length > 0 && (_jsx("nav", { className: "flex justify-center items-center flex-wrap gap-2 mb-2", "aria-label": "Footer links", children: resolvedLinks.map((link, index) => {
                     // Unsafe hrefs (javascript, data, vbscript, …) render the label without an anchor.
                     const safeHref = isSafeHref(link.href) ? link.href : undefined;
                     return (_jsxs(React.Fragment, { children: [index > 0 && _jsx("span", { className: "text-dos-text-muted select-none eidotter-footer__dot", "aria-hidden": "true", children: "\u00B7" }), !safeHref ? (_jsx("span", { className: linkClassName, children: link.label })) : link.external ? (_jsx("a", { className: linkClassName, href: safeHref, target: "_blank", rel: "noopener noreferrer", children: link.label })) : (_jsx(LinkTag, { className: linkClassName, href: safeHref, children: link.label }))] }, link.href));

package/dist/components/Gauge/components/Gauge.js

@@ -15,6 +15,11 @@ const valueSizeClasses = {
     lg: 'text-dos-display-sm',
 };
 const ringSizes = { sm: 72, md: 104, lg: 136 };
+/** Splits "720 units" at the first space into the reading and the rest, so the rest can wrap. */
+function splitSecondary(text) {
+    const i = text.indexOf(' ');
+    return i > 0 ? [text.slice(0, i), text.slice(i + 1)] : [text, null];
+}
 const toneClasses = {
     neutral: 'eidotter-tone--neutral',
     info: 'eidotter-tone--info',
@@ -63,8 +68,20 @@ export const Gauge = forwardRef(({ label, shortLabel, value, max = 100, unit, se
         .filter(Boolean)
         .join(', ');
     const name = `${ariaLabel ?? label}: ${valuetext}`;
-    const diameter = ringSizes[size] ?? ringSizes.md;
+    const sizeKey = size in ringSizes ? size : 'md';
+    const diameter = ringSizes[sizeKey];
+    const thickness = Math.round(diameter / 8);
+    // The small ring's hole cannot hold a secondary line, so it sits under the ring.
+    const secondaryBelow = sizeKey === 'sm';
+    const [secondaryHead, secondaryTail] = splitSecondary(secondary ?? '');
+    const secondaryPart = secondary && !unknown && !loading ? (_jsxs("span", { className: "eidotter-gauge__secondary text-dos-text-brand text-dos-text-xs tabular-nums leading-none", children: [_jsx("span", { className: "eidotter-gauge__secondary-head", children: secondaryHead }), secondaryTail !== null && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "eidotter-gauge__secondary-tail", children: secondaryTail })] }))] })) : null;
     const tagText = provenanceLabel(labels, provenance);
-    return (_jsxs("div", { ref: ref, className: cn('eidotter-gauge eidotter-health flex flex-col items-center gap-1 w-full font-dos', sizeClasses[size] ?? sizeClasses.md, toneClasses[effectiveTone], statusClasses[status], className), style: { minWidth: diameter }, role: "meter", "aria-valuemin": 0, "aria-valuemax": unknown ? 100 : max, "aria-valuenow": unknown || loading ? 0 : Math.max(0, Math.min(value, max)), "aria-valuetext": valuetext, "aria-label": name, "aria-busy": loading || undefined, ...props, children: [_jsxs("div", { className: "relative inline-flex items-center justify-center", children: [_jsx(ProgressRing, { decorative: true, value: loading ? 0 : pct, max: 100, size: diameter, thickness: Math.round(diameter / 8), segments: toneSegments[effectiveTone] ?? 16, color: effectiveTone === 'neutral' ? undefined : 'var(--eidotter-fill)', glow: false, className: cn(glow && 'eidotter-health-glow') }), _jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center leading-none", children: loading ? (_jsx("div", { "aria-hidden": "true", className: "eidotter-gauge__skeleton w-full overflow-hidden", children: _jsx(Skeleton, { variant: "figure", lines: 2, animated: false }) })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('eidotter-gauge__value text-dos-text-accent tabular-nums', valueSizeClasses[size] ?? valueSizeClasses.md, stale && 'opacity-60'), children: valueText }), secondary && !unknown && (_jsx("span", { className: "eidotter-gauge__secondary text-dos-text-brand text-dos-text-xs tabular-nums", children: secondary }))] })) })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-1 text-dos-text-brand uppercase tracking-wider leading-tight max-w-full", children: [effectiveTone === 'critical' && (_jsx("span", { "aria-hidden": "true", className: "eidotter-gauge__glyph text-dos-text-error", children: "\u25B2" })), _jsxs("span", { className: "eidotter-gauge__label truncate", title: label, children: [_jsx("span", { className: "eidotter-gauge__label--full", children: label }), shortLabel && _jsx("span", { className: "eidotter-gauge__label--short", children: shortLabel })] }), overflow && (_jsx("span", { "aria-hidden": "true", className: "eidotter-gauge__overflow text-dos-text-warning", children: "+" })), tagText !== null && (_jsx("span", { className: "eidotter-gauge__provenance border border-dos-border-brand px-1 normal-case", children: tagText })), stale && _jsx("span", { className: "eidotter-gauge__stale normal-case", children: labels.stale })] }), resolved.label && (_jsx("span", { className: "eidotter-gauge__band text-dos-text-brand normal-case", children: resolved.label }))] }));
+    return (_jsxs("div", { ref: ref, className: cn('eidotter-gauge eidotter-health flex flex-col items-center gap-1 w-full font-dos', sizeClasses[size] ?? sizeClasses.md, toneClasses[effectiveTone], statusClasses[status], className), style: { minWidth: diameter }, "data-size": sizeKey, "data-has-short": shortLabel ? 'true' : 'false', role: "meter", "aria-valuemin": 0, "aria-valuemax": unknown ? 100 : max, "aria-valuenow": unknown || loading ? 0 : Math.max(0, Math.min(value, max)), "aria-valuetext": valuetext, "aria-label": name, "aria-busy": loading || undefined, ...props, children: [_jsxs("div", { className: "relative inline-flex items-center justify-center", children: [_jsx(ProgressRing, { decorative: true, value: loading ? 0 : pct, max: 100, size: diameter, thickness: thickness, segments: toneSegments[effectiveTone] ?? 16, color: effectiveTone === 'neutral' ? undefined : 'var(--eidotter-fill)', glow: false, className: cn(glow && 'eidotter-health-glow') }), _jsx("div", { className: "eidotter-gauge__center absolute flex flex-col items-center justify-center min-w-0 text-center leading-none", style: { inset: thickness + 2 }, children: loading ? (_jsx("div", { "aria-hidden": "true", className: "eidotter-gauge__skeleton w-full overflow-hidden", children: _jsx(Skeleton, { variant: "figure", lines: 2, animated: false }) })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: [
+                                        'eidotter-gauge__value text-dos-text-accent tabular-nums',
+                                        valueSizeClasses[sizeKey],
+                                        stale && 'opacity-60',
+                                    ]
+                                        .filter(Boolean)
+                                        .join(' '), children: valueText }), !secondaryBelow && secondaryPart] })) })] }), secondaryBelow && secondaryPart, _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-1 text-dos-text-brand uppercase tracking-wider leading-tight max-w-full", children: [effectiveTone === 'critical' && (_jsx("span", { "aria-hidden": "true", className: "eidotter-gauge__glyph text-dos-text-error", children: "\u25B2" })), _jsxs("span", { className: "eidotter-gauge__label truncate", title: label, children: [_jsx("span", { className: "eidotter-gauge__label--full", children: label }), shortLabel && _jsx("span", { className: "eidotter-gauge__label--short", children: shortLabel })] }), overflow && (_jsx("span", { "aria-hidden": "true", className: "eidotter-gauge__overflow text-dos-text-warning", children: "+" })), tagText !== null && (_jsx("span", { className: "eidotter-gauge__provenance border border-dos-border-brand px-1 normal-case", children: tagText })), stale && _jsx("span", { className: "eidotter-gauge__stale normal-case", children: labels.stale })] }), resolved.label && (_jsx("span", { className: "eidotter-gauge__band text-dos-text-brand normal-case", children: resolved.label }))] }));
 });
 Gauge.displayName = 'Gauge';

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

@@ -46,7 +46,35 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
      * is identical to a header without this prop.
      */
     context?: HeaderContext;
-    /** Custom branding content — replaces brandName when provided */
+    /**
+     * How `brandName` is presented when no `children` are passed:
+     * - `'lockup'` (default): the eiDotter Logo (28px, glow) + the name in
+     *   uppercase, wide-tracked DOS text.
+     * - `'mark'`: the morphing `Mark` (28px) + the same name text.
+     * - `'text'`: the name as plain text (the pre-0.41 behaviour).
+     * The icon is decorative (the name is the link's accessible name). Ignored
+     * when `children` is provided, or when `brandName` is empty.
+     */
+    brand?: 'text' | 'lockup' | 'mark';
+    /**
+     * 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.
+     * 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.
+     */
+    end?: React.ReactNode;
+    /**
+     * When set (e.g. `'#main'`), renders a "SKIP TO CONTENT" anchor as the
+     * header's first child, visually hidden until keyboard-focused (WCAG 2.4.1).
+     * Off by default — sites with their own skip link leave it unset. Unsafe
+     * schemes render no anchor.
+     */
+    skipLinkTarget?: string;
+    /** Custom branding content — replaces brandName (and `brand`) when provided */
     children?: React.ReactNode;
     /** Additional CSS class name */
     className?: string;

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

@@ -1,14 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { isSafeHref } from '../../../utils/isSafeHref.js';
 import { DesktopNav, MobileNav } from '../../Nav/index.js';
+import { Logo, Mark } from '../../Brand/index.js';
 import { HeaderContextRow } from './HeaderContextRow.js';
 const variantClasses = {
     retro: 'eidotter-header--retro',
     modern: 'eidotter-header--modern',
 };
-export const Header = forwardRef(({ brandName, brandHref = '/', items, activeHref, variant = 'retro', sticky = true, linkComponent, context, children, className, ...rest }, ref) => {
+export const Header = forwardRef(({ brandName, brandHref = '/', items, activeHref, variant = 'retro', sticky = true, linkComponent, context, brand = 'lockup', end, skipLinkTarget, children, className, ...rest }, ref) => {
     const LinkTag = linkComponent ?? 'a';
     // The brand link is structural — an unsafe brandHref falls back to '/' rather
     // than unmounting the branding anchor.
@@ -16,9 +17,23 @@ export const Header = forwardRef(({ brandName, brandHref = '/', items, activeHre
     // An empty context (no categories, no returnTo) is treated as absent so the
     // rendered DOM stays byte-identical to a header without the prop.
     const hasContext = !!context && (context.categories.length > 0 || !!context.returnTo);
-    const main = (_jsxs(_Fragment, { children: [_jsx(LinkTag, { href: safeBrandHref, className: cn('no-underline text-base font-bold tracking-wide', 'eidotter-header__branding'), children: children || brandName }), _jsx(DesktopNav, { items: items, activeHref: activeHref, variant: variant, linkComponent: linkComponent }), _jsx(MobileNav, { items: items, activeHref: activeHref, variant: variant, linkComponent: linkComponent })] }));
-    return (_jsx("header", { ref: ref, className: cn(hasContext
+    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';
+    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);
+    // `end` is rendered once: DesktopNav is hidden <768px and the MENU trigger
+    // ≥768px, so this DOM order gives "nav · end" on desktop and "end · MENU" on
+    // mobile. The right-hand group wrapper only exists when `end` is passed, so
+    // headers without it keep their previous DOM.
+    const hasEnd = end != null && end !== false && end !== '';
+    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: [_jsx(DesktopNav, { items: items, activeHref: activeHref, variant: variant, linkComponent: linkComponent }), hasEnd && _jsx("div", { className: "eidotter-header__end flex items-center", children: end }), _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: 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) }));
+            : '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)] }));
 });
 Header.displayName = 'Header';

package/dist/components/Icon/components/Icon.d.ts

@@ -9,6 +9,8 @@ declare const ICON_MAP: {
     Close: PixelIcon;
     'Chevron Up': (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
     'Chevron Down': (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    'Chevron Left': (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    'Chevron Right': (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
     App: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
     Cancel: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
     Fullscreen: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/components/Icon/components/Icon.js

@@ -6,6 +6,8 @@ import { SquareAlert } from 'pixelarticons/react/SquareAlert';
 import { Check } from 'pixelarticons/react/Check';
 import { ChevronUp } from 'pixelarticons/react/ChevronUp';
 import { ChevronDown } from 'pixelarticons/react/ChevronDown';
+import { ChevronLeft } from 'pixelarticons/react/ChevronLeft';
+import { ChevronRight } from 'pixelarticons/react/ChevronRight';
 import { WindowFrame } from 'pixelarticons/react/WindowFrame';
 import { Minus } from 'pixelarticons/react/Minus';
 import { Expand } from 'pixelarticons/react/Expand';
@@ -17,7 +19,7 @@ import { cn } from '../../../utils/cn.js';
  * currentColor inheritance, 2×2 unit "pixels" on the grid.
  */
 const PixelX = (props) => (_jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M5 5h2v2H5zM7 7h2v2H7zM9 9h2v2H9zM11 11h2v2h-2zM13 13h2v2h-2zM15 15h2v2h-2zM17 17h2v2h-2zM17 5h2v2h-2zM15 7h2v2h-2zM13 9h2v2h-2zM9 13h2v2H9zM7 15h2v2H7zM5 17h2v2H5z" }) }));
-// 12 public icon names mapping to 11 unique pixelarticons components.
+// 14 public icon names mapping to 13 unique glyphs (12 pixelarticons + PixelX).
 // Done and Check both map to the Check component intentionally — consumers
 // can use either semantic name for a checkmark glyph.
 //
@@ -38,6 +40,8 @@ const ICON_MAP = {
     'Close': PixelX, // custom pixel-art X mark (pixelarticons has no X glyph)
     'Chevron Up': ChevronUp,
     'Chevron Down': ChevronDown,
+    'Chevron Left': ChevronLeft, // Lightbox prev (IconButton, DMNC-1592)
+    'Chevron Right': ChevronRight, // Lightbox next
     'App': WindowFrame,
     'Cancel': Minus, // window minimize control, not abort
     'Fullscreen': Expand,