eidotter 0.40.2 → 0.41.0

package/README.md

@@ -100,6 +100,12 @@ on interactive components automatically, so they cross the client boundary corre
 presentational primitives stay server-renderable. The `.` barrel remains the right default
 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).
+
+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.0`.
+
 ## Documentation
 
 | | |
@@ -113,15 +119,18 @@ for client apps and `'use client'` files.
 
 ## Components
 
-47 components across six families — [complete catalog in Storybook](https://cinimody.github.io/eiDotter/).
+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.
 
 <details>
-<summary><strong>Windowing &amp; shell</strong> — Terminal, Modal, Lightbox, CommandPrompt, CmdPalette, Header, Footer, Nav, Brand</summary>
+<summary><strong>Windowing &amp; shell</strong> — Terminal, DosDialog, DosWindow, IconButton, Modal, Lightbox, CommandPrompt, CmdPalette, Header, Footer, Nav, Brand</summary>
 
 | Component | Purpose |
 |---|---|
 | `Terminal` | DOS window with title bar, minimize/maximize/close controls |
-| `Modal` | Dialog overlay on React Aria primitives (ModalOverlay + Modal + Dialog) |
+| `DosDialog` | The one overlay shell (CmdPalette chrome, dark title strip, placement and size map); Modal, Lightbox and CmdPalette are built on it |
+| `DosWindow` | In-page window chrome (title strip on a brand border with drop shadow); Card and DosFigure are built on it |
+| `IconButton` | The one icon-only control for close, prev/next and window controls |
+| `Modal` | Dialog overlay built on DosDialog (React Aria ModalOverlay + Modal + Dialog) |
 | `Lightbox` | Fullscreen image viewer on Modal's primitives — prev/next, counter, keyboard nav, swipe |
 | `CommandPrompt` | Interactive command-line input with blinking cursor |
 | `CmdPalette` | ⌘K overlay with scored search, keyboard nav, configurable hotkey |
@@ -201,7 +210,7 @@ All six are presentational and server-safe; bands, targets and clinical copy are
 </details>
 
 <details>
-<summary><strong>Time &amp; effects</strong> — TimelineContainer, TimelineNode, TextScramble, RetroEffects, Tokens</summary>
+<summary><strong>Time &amp; effects</strong> — TimelineContainer, TimelineNode, TextScramble, RetroEffects</summary>
 
 | Component | Purpose |
 |---|---|
@@ -209,7 +218,6 @@ All six are presentational and server-safe; bands, targets and clinical copy are
 | `TimelineNode` | Axis markers with shape variants and glow |
 | `TextScramble` | DOS text decode animation |
 | `RetroEffects` | CRT scanlines, noise, phosphor glow |
-| `Tokens` | Design-token reference display (Storybook only) |
 
 </details>
 

package/dist/components/Accordion/components/AccordionFill.js

@@ -8,5 +8,5 @@ export const AccordionFill = ({ sections, defaultExpandedIndex = -1, className,
     const handleToggle = (index, isExpanded) => {
         setExpandedIndex(isExpanded ? index : -1);
     };
-    return (_jsx("div", { className: cn('w-full flex flex-col items-stretch gap-2 text-left text-base font-dos text-dos-text-brand', 'eidotter-accordion-fill', className), children: sections.map((section, index) => (_jsx(Section, { title: section.title, defaultExpanded: index === defaultExpandedIndex, onToggle: (isExpanded) => handleToggle(index, isExpanded), children: section.content }, index))) }));
+    return (_jsx("div", { className: cn('w-full flex flex-col items-stretch gap-2 text-left text-dos-text-base leading-6 font-dos text-dos-text-brand', 'eidotter-accordion-fill', className), children: sections.map((section, index) => (_jsx(Section, { title: section.title, defaultExpanded: index === defaultExpandedIndex, onToggle: (isExpanded) => handleToggle(index, isExpanded), children: section.content }, index))) }));
 };

package/dist/components/Accordion/components/Section.js

@@ -18,5 +18,5 @@ export const Section = ({ title, children, defaultExpanded = false, isHovered =
         setIsExpanded(newExpanded);
         onToggle?.(newExpanded);
     };
-    return (_jsxs("div", { className: cn('w-full border border-dos-border-default text-dos-text-brand font-dos', 'eidotter-section', isExpanded && 'eidotter-section--expanded', isHovered && 'eidotter-section--hover', isActive && 'eidotter-section--active'), children: [_jsxs(AriaButton, { className: "eidotter-section__header w-full flex justify-between items-center px-4 py-2 bg-transparent border-0 text-inherit font-[inherit] cursor-pointer text-left", onPress: handleToggle, "aria-expanded": isExpanded, children: [_jsx("div", { className: "flex-1 text-base leading-6", children: title }), _jsx("div", { className: "eidotter-section__icon flex items-center justify-center w-6 h-6 ml-2 text-inherit", children: _jsx(Icon, { name: isExpanded ? 'Chevron Up' : 'Chevron Down', size: "S" }) })] }), _jsx("div", { className: "eidotter-section__content", inert: !isExpanded ? true : undefined, children: _jsx("div", { className: "eidotter-section__content-inner", children: children }) })] }));
+    return (_jsxs("div", { className: cn('w-full border border-dos-border-default text-dos-text-brand font-dos', 'eidotter-section', isExpanded && 'eidotter-section--expanded', isHovered && 'eidotter-section--hover', isActive && 'eidotter-section--active'), children: [_jsxs(AriaButton, { className: "eidotter-section__header w-full flex justify-between items-center px-4 py-2 bg-transparent border-0 text-inherit font-[inherit] cursor-pointer text-left", onPress: handleToggle, "aria-expanded": isExpanded, children: [_jsx("div", { className: "flex-1 text-dos-text-base leading-6", children: title }), _jsx("div", { className: "eidotter-section__icon flex items-center justify-center w-6 h-6 ml-2 text-inherit", children: _jsx(Icon, { name: isExpanded ? 'Chevron Up' : 'Chevron Down', size: "S" }) })] }), _jsx("div", { className: "eidotter-section__content", inert: !isExpanded ? true : undefined, children: _jsx("div", { className: "eidotter-section__content-inner", children: children }) })] }));
 };

package/dist/components/Alert/components/Alert.js

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 import { Button as AriaButton } from 'react-aria-components';
 import { cn } from '../../../utils/cn.js';
 import { Icon } from '../../Icon/components/Icon.js';
+import { IconButton } from '../../IconButton/components/IconButton.js';
 import { useAnimatedDismiss } from '../../../hooks/useAnimatedDismiss.js';
 const TYPE_TO_COLOR = {
     info: 'default',
@@ -40,12 +41,12 @@ function resolveSize(size) {
 export const Alert = forwardRef(({ color: colorProp, size = 'floating', type, title, children, actions, onClose, onClickHere, className, }, ref) => {
     const resolvedColor = resolveColor(colorProp, type);
     const resolvedSize = resolveSize(size);
-    const { isClosing, triggerClose, handleAnimationEnd } = useAnimatedDismiss('alert-exit', onClose);
+    const { isClosing, triggerClose, handleAnimationEnd } = useAnimatedDismiss('eidotter-pop-out', onClose);
     // Build actions list (new prop + legacy onClickHere)
     const allActions = [
         ...(actions || []),
         ...(onClickHere ? [{ label: 'Click here', onClick: onClickHere }] : []),
     ];
-    return (_jsxs("div", { ref: ref, className: cn('relative w-full flex flex-col gap-4 p-4', 'font-dos text-dos-text-sm', 'border border-dos-border-default rounded-dos-base', 'eidotter-alert', `eidotter-alert--${resolvedColor}`, resolvedSize === 'floating' && 'max-w-[1216px]', resolvedSize === 'full-width' && 'eidotter-alert--full-width max-w-none', isClosing && 'eidotter-alert--closing', className), onAnimationEnd: handleAnimationEnd, role: "alert", "data-color": resolvedColor, "data-size": resolvedSize, children: [_jsx("div", { className: "eidotter-alert__icon", children: _jsx(Icon, { name: COLOR_ICONS[resolvedColor] || 'Info', size: "S", "aria-label": `${resolvedColor} alert` }) }), _jsxs("div", { className: cn('flex-1 flex flex-col gap-3 min-w-0', onClose && 'pr-6'), children: [(title || children) && (_jsxs("div", { className: "flex flex-col gap-1", children: [title && (_jsx("div", { className: "eidotter-alert__title font-dos leading-[140%]", children: title })), children && (_jsx("div", { className: "eidotter-alert__text font-dos leading-[140%]", children: children }))] })), allActions.length > 0 && (_jsx("div", { className: "flex flex-row gap-3", children: allActions.map((action, i) => (_jsxs(AriaButton, { className: "eidotter-alert__action", onPress: action.onClick, children: [action.label, action.icon] }, i))) }))] }), onClose && (_jsx(AriaButton, { className: "eidotter-alert__close", onPress: triggerClose, "aria-label": "Close alert", children: _jsx(Icon, { name: "Close", size: "S" }) }))] }));
+    return (_jsxs("div", { ref: ref, className: cn('relative w-full flex flex-col gap-4 p-4', 'font-dos text-dos-text-sm', 'border border-dos-border-default', 'eidotter-alert', `eidotter-alert--${resolvedColor}`, resolvedSize === 'floating' && 'max-w-[1216px]', resolvedSize === 'full-width' && 'eidotter-alert--full-width max-w-none', isClosing && 'eidotter-alert--closing', className), onAnimationEnd: handleAnimationEnd, role: "alert", "data-color": resolvedColor, "data-size": resolvedSize, children: [_jsx("div", { className: "eidotter-alert__icon", children: _jsx(Icon, { name: COLOR_ICONS[resolvedColor] || 'Info', size: "S", "aria-label": `${resolvedColor} alert` }) }), _jsxs("div", { className: cn('flex-1 flex flex-col gap-3 min-w-0', onClose && 'pr-6'), children: [(title || children) && (_jsxs("div", { className: "flex flex-col gap-1", children: [title && (_jsx("div", { className: "eidotter-alert__title font-dos leading-[140%]", children: title })), children && (_jsx("div", { className: "eidotter-alert__text font-dos leading-[140%]", children: children }))] })), allActions.length > 0 && (_jsx("div", { className: "flex flex-row gap-3", children: allActions.map((action, i) => (_jsxs(AriaButton, { className: "eidotter-alert__action", onPress: action.onClick, children: [action.label, action.icon] }, i))) }))] }), onClose && (_jsx(IconButton, { icon: "Close", label: "Close alert", className: "eidotter-alert__close", onPress: triggerClose }))] }));
 });
 Alert.displayName = 'Alert';

package/dist/components/Brand/components/Logo.d.ts

@@ -3,20 +3,20 @@ import type { SVGProps } from 'react';
 export interface LogoProps extends Omit<SVGProps<SVGSVGElement>, 'viewBox' | 'children'> {
     /** Icon size in pixels. Defaults to 32. Pass a number or CSS-valid string. */
     size?: number | string;
-    /** Add the amber phosphor drop-shadow glow. Defaults to true. */
+    /** Add the amber phosphor drop-shadow glow (5px). Defaults to true. */
     glow?: boolean;
     /** Accessible label. Defaults to "eiDotter". Set to empty string for decorative use. */
     title?: string;
 }
 /**
- * eiDotter brand mark — the Foundation Logomark (Figma node 16-610):
- * a pixel-dotted ring (the "dotter") around the amber yolk, with pixel
+ * eiDotter brand mark, the Foundation Logomark (Figma node 16-610):
+ * a pixel-dotted ring (the "dotter") around a lit amber yolk, with pixel
  * specular highlights and a soft radial phosphor halo. Mark only, on
- * transparent — the iOS-style app-icon container in the Figma component
+ * transparent; the iOS-style app-icon container in the Figma component
  * is an app-icon artifact, not part of the inline mark.
  *
- * Fill colors are brand-locked (explicit amber hexes) rather than themed so
- * the mark reads identically across themes. Gradient ids are namespaced via
- * useId so multiple logos per page (header + footer) don't collide.
+ * Static counterpart of `<Mark>`: both render the internal `LogoGeometry`
+ * (DMNC-1586), so the logo, the animated mark and the favicon are one drawing.
+ * Logo itself is hook-free; the `useId` client leaf is LogoGeometry.
  */
 export declare const Logo: React.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/Brand/components/Logo.js

@@ -1,22 +1,17 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { cn } from '../../../utils/cn.js';
+import { LogoGeometry } from './LogoGeometry.js';
 /**
- * eiDotter brand mark — the Foundation Logomark (Figma node 16-610):
- * a pixel-dotted ring (the "dotter") around the amber yolk, with pixel
+ * eiDotter brand mark, the Foundation Logomark (Figma node 16-610):
+ * a pixel-dotted ring (the "dotter") around a lit amber yolk, with pixel
  * specular highlights and a soft radial phosphor halo. Mark only, on
- * transparent — the iOS-style app-icon container in the Figma component
+ * transparent; the iOS-style app-icon container in the Figma component
  * is an app-icon artifact, not part of the inline mark.
  *
- * Fill colors are brand-locked (explicit amber hexes) rather than themed so
- * the mark reads identically across themes. Gradient ids are namespaced via
- * useId so multiple logos per page (header + footer) don't collide.
+ * Static counterpart of `<Mark>`: both render the internal `LogoGeometry`
+ * (DMNC-1586), so the logo, the animated mark and the favicon are one drawing.
+ * Logo itself is hook-free; the `useId` client leaf is LogoGeometry.
  */
-export const Logo = forwardRef(({ size = 32, glow = true, title = 'eiDotter', className, ...props }, ref) => {
-    const uid = useId();
-    const haloId = `eidotter-logo-halo-${uid}`;
-    const coreId = `eidotter-logo-core-${uid}`;
-    return (_jsxs("svg", { ref: ref, width: size, height: size, viewBox: "8 7 22 22", xmlns: "http://www.w3.org/2000/svg", role: title ? 'img' : undefined, "aria-hidden": title ? undefined : true, className: cn('eidotter-logo', glow && 'eidotter-logo--glow', className), ...props, children: [title ? _jsx("title", { children: title }) : null, _jsxs("defs", { children: [_jsxs("radialGradient", { id: haloId, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(19 19.1) scale(13.2)", children: [_jsx("stop", { stopColor: "#FFB000", stopOpacity: "0.3" }), _jsx("stop", { offset: "1", stopColor: "#020003", stopOpacity: "0" })] }), _jsxs("radialGradient", { id: coreId, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(19 18.9) scale(9.9)", children: [_jsx("stop", { stopColor: "#FFB000", stopOpacity: "0.45" }), _jsx("stop", { offset: "0.6", stopColor: "#9A5700", stopOpacity: "0.22" }), _jsx("stop", { offset: "1", stopColor: "#020003", stopOpacity: "0" })] })] }), _jsx("path", { d: "M19 29C25.0751 29 30 24.0751 30 18C30 11.9249 25.0751 7 19 7C12.9249 7 8 11.9249 8 18C8 24.0751 12.9249 29 19 29Z", fill: `url(#${haloId})` }), _jsx("path", { d: "M19 27C23.9706 27 28 22.9706 28 18C28 13.0294 23.9706 9 19 9C14.0294 9 10 13.0294 10 18C10 22.9706 14.0294 27 19 27Z", fill: `url(#${coreId})` }), _jsx("path", { d: "M20.375 9.0625H17.625V9.75H20.375V9.0625Z", fill: "#FFB000" }), _jsx("path", { d: "M16.9375 9.75H15.5625V10.4375H16.9375V9.75Z", fill: "#FFB000" }), _jsx("path", { d: "M17.625 9.75H16.9375V10.4375H17.625V9.75Z", fill: "#FFB000" }), _jsx("path", { d: "M22.4375 9.75H20.375V10.4375H22.4375V9.75Z", fill: "#FFB000" }), _jsx("path", { d: "M15.5625 10.4375H14.1875V11.125H15.5625V10.4375Z", fill: "#FFB000" }), _jsx("path", { d: "M23.8125 10.4375H22.4375V11.125H23.8125V10.4375Z", fill: "#FFB000" }), _jsx("path", { d: "M14.1875 11.125H13.5V11.8125H14.1875V11.125Z", fill: "#FFB000" }), _jsx("path", { d: "M25.1875 11.125H23.8125V11.8125H25.1875V11.125Z", fill: "#FFB000" }), _jsx("path", { d: "M13.5 11.8125H12.8125V12.5H13.5V11.8125Z", fill: "#FFB000" }), _jsx("path", { d: "M25.875 11.8125H25.1875V13.1875H25.875V11.8125Z", fill: "#FFB000" }), _jsx("path", { d: "M12.8125 12.5H12.125V13.875H12.8125V12.5Z", fill: "#FFB000" }), _jsx("path", { d: "M12.125 13.875H11.4375V15.9375H12.125V13.875Z", fill: "#FFB000" }), _jsx("path", { d: "M11.4375 15.9375H10.75V18H11.4375V15.9375Z", fill: "#FFB000" }), _jsx("path", { d: "M10.75 18H10.0625V19.375H10.75V18Z", fill: "#FFB000" }), _jsx("path", { d: "M11.4375 19.375H10.75V20.75H11.4375V19.375Z", fill: "#FFB000" }), _jsx("path", { d: "M12.125 20.75H11.4375V22.125H12.125V20.75Z", fill: "#FFB000" }), _jsx("path", { d: "M12.8125 22.125H12.125V23.5H12.8125V22.125Z", fill: "#FFB000" }), _jsx("path", { d: "M26.5625 13.1875H25.875V15.25H26.5625V13.1875Z", fill: "#FFB000" }), _jsx("path", { d: "M27.25 15.25H26.5625V17.3125H27.25V15.25Z", fill: "#FFB000" }), _jsx("path", { d: "M27.9375 17.3125H27.25V19.375H27.9375V17.3125Z", fill: "#FFB000" }), _jsx("path", { d: "M27.25 19.375H26.5625V20.75H27.25V19.375Z", fill: "#FFB000" }), _jsx("path", { d: "M26.5625 20.75H25.875V22.125H26.5625V20.75Z", fill: "#FFB000" }), _jsx("path", { d: "M25.875 22.125H25.1875V23.5H25.875V22.125Z", fill: "#FFB000" }), _jsx("path", { d: "M14.1875 23.5H12.8125V24.1875H14.1875V23.5Z", fill: "#FFB000" }), _jsx("path", { d: "M16.25 24.1875H14.1875V24.875H16.25V24.1875Z", fill: "#FFB000" }), _jsx("path", { d: "M18.3125 24.875H16.25V25.5625H18.3125V24.875Z", fill: "#FFB000" }), _jsx("path", { d: "M20.375 25.5625H18.3125V26.25H20.375V25.5625Z", fill: "#FFB000" }), _jsx("path", { d: "M22.4375 24.875H20.375V25.5625H22.4375V24.875Z", fill: "#FFB000" }), _jsx("path", { d: "M24.5 24.1875H22.4375V24.875H24.5V24.1875Z", fill: "#FFB000" }), _jsx("path", { d: "M25.1875 23.5H24.5V24.1875H25.1875V23.5Z", fill: "#FFB000" }), _jsx("path", { d: "M10.0625 15.9375H9.375V16.625H10.0625V15.9375Z", fill: "#FFB000" }), _jsx("path", { d: "M29.3125 16.625H28.625V17.3125H29.3125V16.625Z", fill: "#FFB000" }), _jsx("path", { d: "M28.625 20.75H27.9375V21.4375H28.625V20.75Z", fill: "#FFB000" }), _jsx("path", { d: "M10.75 21.4375H10.0625V22.125H10.75V21.4375Z", fill: "#FFB000" }), _jsx("path", { d: "M18.4375 21C20.6466 21 22.4375 19.2091 22.4375 17C22.4375 14.7909 20.6466 13 18.4375 13C16.2284 13 14.4375 14.7909 14.4375 17C14.4375 19.2091 16.2284 21 18.4375 21Z", fill: "#FFB000" }), _jsx("path", { d: "M16.25 15.25H15.5625V17.3125H16.25V15.25Z", fill: "#FFC233" }), _jsx("path", { d: "M18.3125 13.875H16.25V14.5625H18.3125V13.875Z", fill: "#FFC233" }), _jsx("path", { d: "M16.25 14.5625H15.5625V15.25H16.25V14.5625Z", fill: "#FFC233" }), _jsx("path", { d: "M17.5 17C18.3284 17 19 16.3284 19 15.5C19 14.6716 18.3284 14 17.5 14C16.6716 14 16 14.6716 16 15.5C16 16.3284 16.6716 17 17.5 17Z", fill: "#FFD97A" }), _jsx("path", { d: "M17.5 15C17.7761 15 18 14.7761 18 14.5C18 14.2239 17.7761 14 17.5 14C17.2239 14 17 14.2239 17 14.5C17 14.7761 17.2239 15 17.5 15Z", fill: "#FFE8A8" })] }));
-});
+export const Logo = forwardRef(({ size = 32, glow = true, title = 'eiDotter', className, ...props }, ref) => (_jsx(LogoGeometry, { ref: ref, size: size, title: title, className: cn('eidotter-logo', glow && 'eidotter-logo--glow', className), ...props })));
 Logo.displayName = 'Logo';

package/dist/components/Brand/components/LogoGeometry.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * Pixel-dotted ring (the "dotter"): 34 axis-aligned rects, brand-locked amber.
+ * Shared by Logo, Mark and the static favicon (public/favicon.svg).
+ */
+export declare const RING_PATHS: readonly ["M20.375 9.0625H17.625V9.75H20.375V9.0625Z", "M16.9375 9.75H15.5625V10.4375H16.9375V9.75Z", "M17.625 9.75H16.9375V10.4375H17.625V9.75Z", "M22.4375 9.75H20.375V10.4375H22.4375V9.75Z", "M15.5625 10.4375H14.1875V11.125H15.5625V10.4375Z", "M23.8125 10.4375H22.4375V11.125H23.8125V10.4375Z", "M14.1875 11.125H13.5V11.8125H14.1875V11.125Z", "M25.1875 11.125H23.8125V11.8125H25.1875V11.125Z", "M13.5 11.8125H12.8125V12.5H13.5V11.8125Z", "M25.875 11.8125H25.1875V13.1875H25.875V11.8125Z", "M12.8125 12.5H12.125V13.875H12.8125V12.5Z", "M12.125 13.875H11.4375V15.9375H12.125V13.875Z", "M11.4375 15.9375H10.75V18H11.4375V15.9375Z", "M10.75 18H10.0625V19.375H10.75V18Z", "M11.4375 19.375H10.75V20.75H11.4375V19.375Z", "M12.125 20.75H11.4375V22.125H12.125V20.75Z", "M12.8125 22.125H12.125V23.5H12.8125V22.125Z", "M26.5625 13.1875H25.875V15.25H26.5625V13.1875Z", "M27.25 15.25H26.5625V17.3125H27.25V15.25Z", "M27.9375 17.3125H27.25V19.375H27.9375V17.3125Z", "M27.25 19.375H26.5625V20.75H27.25V19.375Z", "M26.5625 20.75H25.875V22.125H26.5625V20.75Z", "M25.875 22.125H25.1875V23.5H25.875V22.125Z", "M14.1875 23.5H12.8125V24.1875H14.1875V23.5Z", "M16.25 24.1875H14.1875V24.875H16.25V24.1875Z", "M18.3125 24.875H16.25V25.5625H18.3125V24.875Z", "M20.375 25.5625H18.3125V26.25H20.375V25.5625Z", "M22.4375 24.875H20.375V25.5625H22.4375V24.875Z", "M24.5 24.1875H22.4375V24.875H24.5V24.1875Z", "M25.1875 23.5H24.5V24.1875H25.1875V23.5Z", "M10.0625 15.9375H9.375V16.625H10.0625V15.9375Z", "M29.3125 16.625H28.625V17.3125H29.3125V16.625Z", "M28.625 20.75H27.9375V21.4375H28.625V20.75Z", "M10.75 21.4375H10.0625V22.125H10.75V21.4375Z"];
+/** Leading RING_PATHS rects that form the continuous ring (the rest are stray dots). */
+export declare const RING_MAIN_COUNT: number;
+export interface LogoGeometryProps extends Omit<SVGProps<SVGSVGElement>, 'viewBox' | 'children'> {
+    /** Rendered size in px (number) or any CSS length. Default 32. */
+    size?: number | string;
+    /** Accessible title. Empty string renders the SVG decorative (aria-hidden, no role). */
+    title?: string;
+}
+/**
+ * Internal: the one egg-yolk drawing (DMNC-1586). Logo and Mark both render
+ * this, so the static logo, the animated Mark and the favicon share one
+ * geometry: soft radial halo, pixel ring, a lit yolk (the Mark's radial
+ * gradient #FFD97A to #FFB000 to #B87C00, lit from the upper left), two pixel
+ * highlights and a white specular dot.
+ *
+ * Fill colours are brand-locked hexes (brand artwork reads identically across
+ * themes; the "no hardcoded hex" rule governs UI surfaces). Gradient ids are
+ * namespaced via useId so several marks on one page never collide; useId is
+ * the only hook (it marks this leaf 'use client' for the RSC classifier).
+ */
+export declare const LogoGeometry: React.ForwardRefExoticComponent<Omit<LogoGeometryProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/Brand/components/LogoGeometry.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+/**
+ * Pixel-dotted ring (the "dotter"): 34 axis-aligned rects, brand-locked amber.
+ * Shared by Logo, Mark and the static favicon (public/favicon.svg).
+ */
+export const RING_PATHS = [
+    'M20.375 9.0625H17.625V9.75H20.375V9.0625Z',
+    'M16.9375 9.75H15.5625V10.4375H16.9375V9.75Z',
+    'M17.625 9.75H16.9375V10.4375H17.625V9.75Z',
+    'M22.4375 9.75H20.375V10.4375H22.4375V9.75Z',
+    'M15.5625 10.4375H14.1875V11.125H15.5625V10.4375Z',
+    'M23.8125 10.4375H22.4375V11.125H23.8125V10.4375Z',
+    'M14.1875 11.125H13.5V11.8125H14.1875V11.125Z',
+    'M25.1875 11.125H23.8125V11.8125H25.1875V11.125Z',
+    'M13.5 11.8125H12.8125V12.5H13.5V11.8125Z',
+    'M25.875 11.8125H25.1875V13.1875H25.875V11.8125Z',
+    'M12.8125 12.5H12.125V13.875H12.8125V12.5Z',
+    'M12.125 13.875H11.4375V15.9375H12.125V13.875Z',
+    'M11.4375 15.9375H10.75V18H11.4375V15.9375Z',
+    'M10.75 18H10.0625V19.375H10.75V18Z',
+    'M11.4375 19.375H10.75V20.75H11.4375V19.375Z',
+    'M12.125 20.75H11.4375V22.125H12.125V20.75Z',
+    'M12.8125 22.125H12.125V23.5H12.8125V22.125Z',
+    'M26.5625 13.1875H25.875V15.25H26.5625V13.1875Z',
+    'M27.25 15.25H26.5625V17.3125H27.25V15.25Z',
+    'M27.9375 17.3125H27.25V19.375H27.9375V17.3125Z',
+    'M27.25 19.375H26.5625V20.75H27.25V19.375Z',
+    'M26.5625 20.75H25.875V22.125H26.5625V20.75Z',
+    'M25.875 22.125H25.1875V23.5H25.875V22.125Z',
+    'M14.1875 23.5H12.8125V24.1875H14.1875V23.5Z',
+    'M16.25 24.1875H14.1875V24.875H16.25V24.1875Z',
+    'M18.3125 24.875H16.25V25.5625H18.3125V24.875Z',
+    'M20.375 25.5625H18.3125V26.25H20.375V25.5625Z',
+    'M22.4375 24.875H20.375V25.5625H22.4375V24.875Z',
+    'M24.5 24.1875H22.4375V24.875H24.5V24.1875Z',
+    'M25.1875 23.5H24.5V24.1875H25.1875V23.5Z',
+    // Last 4: stray outlying dots beyond the continuous ring.
+    'M10.0625 15.9375H9.375V16.625H10.0625V15.9375Z',
+    'M29.3125 16.625H28.625V17.3125H29.3125V16.625Z',
+    'M28.625 20.75H27.9375V21.4375H28.625V20.75Z',
+    'M10.75 21.4375H10.0625V22.125H10.75V21.4375Z',
+];
+/** Leading RING_PATHS rects that form the continuous ring (the rest are stray dots). */
+export const RING_MAIN_COUNT = RING_PATHS.length - 4;
+/** Soft radial halo disc and inner core disc (behind the ring). */
+const HALO_PATH = 'M19 29C25.0751 29 30 24.0751 30 18C30 11.9249 25.0751 7 19 7C12.9249 7 8 11.9249 8 18C8 24.0751 12.9249 29 19 29Z';
+const CORE_PATH = 'M19 27C23.9706 27 28 22.9706 28 18C28 13.0294 23.9706 9 19 9C14.0294 9 10 13.0294 10 18C10 22.9706 14.0294 27 19 27Z';
+/** The yolk circle (r=4 centred at 18.4375,17 in viewBox units). */
+const YOLK_PATH = 'M18.4375 21C20.6466 21 22.4375 19.2091 22.4375 17C22.4375 14.7909 20.6466 13 18.4375 13C16.2284 13 14.4375 14.7909 14.4375 17C14.4375 19.2091 16.2284 21 18.4375 21Z';
+/** The two pixel highlights on the yolk's upper-left shoulder. */
+const HIGHLIGHT_PATHS = [
+    'M16.25 15.25H15.5625V17.3125H16.25V15.25Z',
+    'M18.3125 13.875H16.25V14.5625H18.3125V13.875Z',
+];
+/** Small specular dot. */
+const SPECULAR_PATH = 'M17.5 15C17.7761 15 18 14.7761 18 14.5C18 14.2239 17.7761 14 17.5 14C17.2239 14 17 14.2239 17 14.5C17 14.7761 17.2239 15 17.5 15Z';
+/**
+ * Internal: the one egg-yolk drawing (DMNC-1586). Logo and Mark both render
+ * this, so the static logo, the animated Mark and the favicon share one
+ * geometry: soft radial halo, pixel ring, a lit yolk (the Mark's radial
+ * gradient #FFD97A to #FFB000 to #B87C00, lit from the upper left), two pixel
+ * highlights and a white specular dot.
+ *
+ * Fill colours are brand-locked hexes (brand artwork reads identically across
+ * themes; the "no hardcoded hex" rule governs UI surfaces). Gradient ids are
+ * namespaced via useId so several marks on one page never collide; useId is
+ * the only hook (it marks this leaf 'use client' for the RSC classifier).
+ */
+export const LogoGeometry = forwardRef(({ size = 32, title = 'eiDotter', ...props }, ref) => {
+    const uid = useId();
+    const haloId = `eidotter-logo-halo-${uid}`;
+    const coreId = `eidotter-logo-core-${uid}`;
+    const yolkId = `eidotter-logo-yolk-${uid}`;
+    return (_jsxs("svg", { ref: ref, width: size, height: size, viewBox: "8 7 22 22", xmlns: "http://www.w3.org/2000/svg", role: title ? 'img' : undefined, "aria-hidden": title ? undefined : true, ...props, children: [title ? _jsx("title", { children: title }) : null, _jsxs("defs", { children: [_jsxs("radialGradient", { id: haloId, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(19 19.1) scale(13.2)", children: [_jsx("stop", { stopColor: "#FFB000", stopOpacity: "0.3" }), _jsx("stop", { offset: "1", stopColor: "#020003", stopOpacity: "0" })] }), _jsxs("radialGradient", { id: coreId, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(19 18.9) scale(9.9)", children: [_jsx("stop", { stopColor: "#FFB000", stopOpacity: "0.45" }), _jsx("stop", { offset: "0.6", stopColor: "#9A5700", stopOpacity: "0.22" }), _jsx("stop", { offset: "1", stopColor: "#020003", stopOpacity: "0" })] }), _jsxs("radialGradient", { id: yolkId, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(16.9 15.5) scale(5.6)", children: [_jsx("stop", { stopColor: "#FFD97A" }), _jsx("stop", { offset: "0.55", stopColor: "#FFB000" }), _jsx("stop", { offset: "1", stopColor: "#B87C00" })] })] }), _jsx("path", { d: HALO_PATH, fill: `url(#${haloId})` }), _jsx("path", { d: CORE_PATH, fill: `url(#${coreId})` }), RING_PATHS.map((d) => (_jsx("path", { d: d, fill: "#FFB000" }, d))), _jsx("path", { d: YOLK_PATH, fill: `url(#${yolkId})` }), HIGHLIGHT_PATHS.map((d) => (_jsx("path", { d: d, fill: "#FFE8A8", opacity: "0.8" }, d))), _jsx("path", { d: SPECULAR_PATH, fill: "#FFFFFF", opacity: "0.9" })] }));
+});
+LogoGeometry.displayName = 'LogoGeometry';

package/dist/components/Brand/components/Mark.d.ts

@@ -18,8 +18,14 @@ export interface MarkProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'c
     size?: number | string;
     /** Accessible label. Default 'eiDotter'. Empty string → decorative (aria-hidden). */
     label?: string;
-    /** Enable the border-radius morph loop. Default true. */
+    /**
+     * Enable the breath animation (scale 1 to 1.045 with a glow swell, ~4.3s
+     * loop; off under prefers-reduced-motion). Default true. The name is kept
+     * from the retired border-radius morph (DMNC-1586): `morph` now means breath.
+     */
     morph?: boolean;
+    /** Amber phosphor drop-shadow glow (5px, same as Logo). Default true. */
+    glow?: boolean;
     /**
      * Arm-connector configuration. Omit to render the mark alone.
      *
@@ -37,11 +43,12 @@ export interface MarkProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'c
     arms?: MarkArmsConfig;
 }
 /**
- * eiDotter Mark — a small organic blob that continuously morphs its silhouette
- * (a ~6s border-radius loop) with an optional set of SVG arm connectors drawn
- * from the mark to a variable set of nav badges, measured at runtime via
- * getBoundingClientRect(). Arms redraw on resize and on badge-set change, never
- * intercept pointer events, and are aria-hidden.
+ * eiDotter Mark: the Logo's egg-yolk drawing (pixel ring + lit yolk, shared
+ * via the internal `LogoGeometry`, DMNC-1586) with a slow breath animation and
+ * an optional set of SVG arm connectors drawn from the mark to a variable set
+ * of nav badges, measured at runtime via getBoundingClientRect(). Arms redraw
+ * on resize and on badge-set change, never intercept pointer events, and are
+ * aria-hidden.
  *
  * The root class `eidotter-mark` is a stable contract — the future tentacle
  * mode discovers the anchor via `scope.querySelector('.eidotter-mark')`; never

package/dist/components/Brand/components/Mark.js

@@ -2,15 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { computeArmPaths } from './markGeometry.js';
+import { computeArmPaths, MARK_RING_RADIUS_RATIO } from './markGeometry.js';
+import { LogoGeometry } from './LogoGeometry.js';
 /** Stable empty-array reference so the no-arms early return can't loop setState. */
 const EMPTY = [];
 /**
- * eiDotter Mark — a small organic blob that continuously morphs its silhouette
- * (a ~6s border-radius loop) with an optional set of SVG arm connectors drawn
- * from the mark to a variable set of nav badges, measured at runtime via
- * getBoundingClientRect(). Arms redraw on resize and on badge-set change, never
- * intercept pointer events, and are aria-hidden.
+ * eiDotter Mark: the Logo's egg-yolk drawing (pixel ring + lit yolk, shared
+ * via the internal `LogoGeometry`, DMNC-1586) with a slow breath animation and
+ * an optional set of SVG arm connectors drawn from the mark to a variable set
+ * of nav badges, measured at runtime via getBoundingClientRect(). Arms redraw
+ * on resize and on badge-set change, never intercept pointer events, and are
+ * aria-hidden.
  *
  * The root class `eidotter-mark` is a stable contract — the future tentacle
  * mode discovers the anchor via `scope.querySelector('.eidotter-mark')`; never
@@ -21,7 +23,7 @@ const EMPTY = [];
  * `prefersReducedMotion()` (src/utils/prefersReducedMotion.ts) plus a CSS media
  * block.
  */
-export const Mark = forwardRef(({ size = 48, label = 'eiDotter', morph = true, arms, className, style, ...rest }, ref) => {
+export const Mark = forwardRef(({ size = 48, label = 'eiDotter', morph = true, glow = true, arms, className, style, ...rest }, ref) => {
     const rootRef = useRef(null);
     const [paths, setPaths] = useState(EMPTY);
     const setRefs = useCallback((node) => {
@@ -36,7 +38,7 @@ export const Mark = forwardRef(({ size = 48, label = 'eiDotter', morph = true, a
     // effects run bottom-up, so an ancestor's ref is still null during a child's
     // layout effect — arms would never wire. Passive effects run after the whole
     // commit, when every ref (scope included) is attached. The one-frame-later
-    // arm paint is imperceptible; the blob is already on screen.
+    // arm paint is imperceptible; the mark is already on screen.
     useEffect(() => {
         if (!arms) {
             setPaths(EMPTY);
@@ -49,7 +51,9 @@ export const Mark = forwardRef(({ size = 48, label = 'eiDotter', morph = true, a
         let targets = [];
         const update = () => {
             const markRect = root.getBoundingClientRect();
-            const next = computeArmPaths(markRect, targets.map((t) => t.getBoundingClientRect()));
+            const next = computeArmPaths(markRect, targets.map((t) => t.getBoundingClientRect()), 
+            // Arms leave from the ring's outer edge, not the centre (DMNC-1586).
+            { startRadius: markRect.width * MARK_RING_RADIUS_RATIO });
             setPaths((prev) => prev.length === next.length && prev.every((p, i) => p === next[i]) ? prev : next);
         };
         const collectTargets = () => arms.targetRefs
@@ -82,6 +86,6 @@ export const Mark = forwardRef(({ size = 48, label = 'eiDotter', morph = true, a
         // (consumers inline it → re-wiring every render).
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [arms?.scopeRef, arms?.targetSelector, arms?.refreshKey, arms?.targetRefs?.length, arms ? 1 : 0]);
-    return (_jsxs("div", { ref: setRefs, role: label ? 'img' : undefined, "aria-label": label || undefined, "aria-hidden": label ? undefined : true, className: cn('eidotter-mark relative inline-block', className), style: { width: size, height: size, ...style }, ...rest, children: [arms && (_jsx("svg", { className: "eidotter-mark__arms pointer-events-none absolute inset-0 h-full w-full overflow-visible text-dos-text-accent", "aria-hidden": "true", focusable: "false", children: paths.map((d, i) => (_jsx("path", { d: d, fill: "none", stroke: "currentColor", strokeWidth: 2 }, i))) })), _jsx("span", { className: cn('eidotter-mark__blob relative block h-full w-full', morph && 'eidotter-mark__blob--morph') })] }));
+    return (_jsxs("div", { ref: setRefs, role: label ? 'img' : undefined, "aria-label": label || undefined, "aria-hidden": label ? undefined : true, className: cn('eidotter-mark relative inline-block', morph && 'eidotter-mark--breath', glow && 'eidotter-mark--glow', className), style: { width: size, height: size, ...style }, ...rest, children: [arms && (_jsx("svg", { className: "eidotter-mark__arms pointer-events-none absolute inset-0 h-full w-full overflow-visible text-dos-text-accent", "aria-hidden": "true", focusable: "false", children: paths.map((d, i) => (_jsx("path", { d: d, fill: "none", stroke: "currentColor", strokeWidth: 2 }, i))) })), _jsx(LogoGeometry, { size: "100%", title: "", focusable: "false", className: "eidotter-mark__logo relative block h-full w-full" })] }));
 });
 Mark.displayName = 'Mark';

package/dist/components/Brand/components/Wordmark.js

@@ -9,5 +9,5 @@ import { cn } from '../../../utils/cn.js';
  * default so it inherits from the surrounding type scale. Wrap in a heading
  * element if you need semantic weight.
  */
-export const Wordmark = forwardRef(({ glow = true, className, ...props }, ref) => (_jsxs("span", { ref: ref, className: cn('eidotter-wordmark font-dos', glow && 'eidotter-wordmark--glow', className), "aria-label": "eiDotter", ...props, children: [_jsx("span", { className: "eidotter-wordmark__prefix", "aria-hidden": "true", children: "ei" }), _jsx("span", { className: "eidotter-wordmark__body", "aria-hidden": "true", children: "Dotter" })] })));
+export const Wordmark = forwardRef(({ glow = true, className, ...props }, ref) => (_jsxs("span", { ref: ref, className: cn('eidotter-wordmark font-dos', glow && 'eidotter-wordmark--glow', className), role: "img", "aria-label": "eiDotter", ...props, children: [_jsx("span", { className: "eidotter-wordmark__prefix", "aria-hidden": "true", children: "ei" }), _jsx("span", { className: "eidotter-wordmark__body", "aria-hidden": "true", children: "Dotter" })] })));
 Wordmark.displayName = 'Wordmark';

package/dist/components/Brand/components/markGeometry.d.ts

@@ -17,7 +17,22 @@ export interface RectLike {
 export interface ArmPathOptions {
     /** Perpendicular control-point offset in px. Default 24. */
     curvature?: number;
+    /**
+     * Distance in px from the mark centre at which each arm starts, along the
+     * line to its badge. Default 0 (arms start at the centre). The Mark passes
+     * its ring radius (`width * MARK_RING_RADIUS_RATIO`) so arms leave from the
+     * ring's outer edge (DMNC-1586). Badges whose anchor lies within this radius
+     * get no arm.
+     */
+    startRadius?: number;
 }
+/**
+ * Outer radius of the Logo's pixel ring as a fraction of the Mark's box width:
+ * the farthest outer corner of the continuous ring rects (~9.25 viewBox units)
+ * from (19,18), the centre of the 22-unit viewBox `8 7 22 22`. The four stray
+ * outlying dots are excluded. Pinned to LogoGeometry by a test (DMNC-1586).
+ */
+export declare const MARK_RING_RADIUS_RATIO: number;
 /**
  * Build one quadratic-bezier arm path per badge, from the Mark centre to the
  * midpoint of the badge edge facing the mark. Control points alternate sign

package/dist/components/Brand/components/markGeometry.js

@@ -8,6 +8,13 @@
  *
  * No DOM, no React, no hooks — testable with plain rect objects.
  */
+/**
+ * Outer radius of the Logo's pixel ring as a fraction of the Mark's box width:
+ * the farthest outer corner of the continuous ring rects (~9.25 viewBox units)
+ * from (19,18), the centre of the 22-unit viewBox `8 7 22 22`. The four stray
+ * outlying dots are excluded. Pinned to LogoGeometry by a test (DMNC-1586).
+ */
+export const MARK_RING_RADIUS_RATIO = 9.25 / 22;
 /** Round to 2 decimals so path strings are stable for assertions. */
 const r2 = (n) => Math.round(n * 100) / 100;
 /**
@@ -16,29 +23,35 @@ const r2 = (n) => Math.round(n * 100) / 100;
  * for an organic branching feel, clamped so short arms don't balloon.
  */
 export function computeArmPaths(markRect, badgeRects, options = {}) {
-    const { curvature = 24 } = options;
+    const { curvature = 24, startRadius = 0 } = options;
     // jsdom / hidden guard — a zero-sized mark can't anchor arms.
     if (markRect.width === 0 || markRect.height === 0)
         return [];
     const badges = badgeRects.filter((b) => !(b.width === 0 && b.height === 0));
     if (badges.length === 0)
         return [];
-    // Start anchor: mark centre in local coords (the blob paints over it).
-    const sx = markRect.width / 2;
-    const sy = markRect.height / 2;
+    // Mark centre in local coords; each arm starts `startRadius` out from it.
+    const ox = markRect.width / 2;
+    const oy = markRect.height / 2;
     const paths = [];
     badges.forEach((badge, i) => {
         const bx = badge.x - markRect.x;
         const by = badge.y - markRect.y;
         // Anchor on the badge edge that faces the mark: a badge to the right of the
         // mark uses its LEFT edge; a badge to the left uses its RIGHT edge.
-        const ex = bx + badge.width / 2 >= sx ? bx : bx + badge.width;
+        const ex = bx + badge.width / 2 >= ox ? bx : bx + badge.width;
         const ey = by + badge.height / 2;
+        // Start on the circle of radius startRadius, facing the badge anchor.
+        const rx = ex - ox;
+        const ry = ey - oy;
+        const reach = Math.hypot(rx, ry);
+        if (reach - startRadius < 1)
+            return;
+        const sx = ox + (rx / reach) * startRadius;
+        const sy = oy + (ry / reach) * startRadius;
         const dx = ex - sx;
         const dy = ey - sy;
         const dist = Math.hypot(dx, dy);
-        if (dist < 1)
-            return;
         // Control point = segment midpoint offset along the perpendicular unit
         // vector. Sign alternates per badge; the dist/3 clamp stops short arms from
         // ballooning past the curvature default.

package/dist/components/Breadcrumb/components/Breadcrumb.js

@@ -25,9 +25,9 @@ export const Breadcrumb = ({ trail = [], currentLabel, showBackArrow = true, sep
         }
         return _jsx("span", { className: linkClasses, children: linkContent });
     };
-    return (_jsx("nav", { "aria-label": "Breadcrumb", className: cn('font-dos text-xs uppercase tracking-[0.35em]', 'eidotter-breadcrumb', className), children: _jsxs("ol", { className: "flex flex-wrap items-center gap-2 list-none m-0 p-0", children: [trail.map((item, index) => {
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: cn('font-dos text-dos-text-base uppercase tracking-[0.1em]', 'eidotter-breadcrumb', className), children: _jsxs("ol", { className: "flex flex-wrap items-center gap-2 list-none m-0 p-0", children: [trail.map((item, index) => {
                     const isBackTarget = index === trail.length - 1;
                     const showSep = index < trail.length - 1;
                     return (_jsxs("li", { className: "flex items-center gap-2", children: [renderLink(item, isBackTarget), showSep && (_jsx("span", { className: "text-dos-text-accent opacity-40 select-none", "aria-hidden": "true", children: separator }))] }, `${item.href ?? item.label}-${index}`));
-                }), trail.length > 0 && (_jsx("li", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-dos-text-accent opacity-40 select-none", "aria-hidden": "true", children: separator }) })), _jsx("li", { className: "flex items-center gap-2", "aria-current": "page", children: _jsx("span", { className: "text-dos-text-brand", children: currentLabel }) })] }) }));
+                }), trail.length > 0 && (_jsx("li", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-dos-text-accent opacity-40 select-none", "aria-hidden": "true", children: separator }) })), _jsx("li", { className: "flex items-center gap-2", "aria-current": "page", children: _jsx("span", { className: "text-dos-text-primary", children: currentLabel }) })] }) }));
 };

package/dist/components/Button/components/Button.js

@@ -44,6 +44,6 @@ export const Button = forwardRef(({ variant = 'primary', size = 'md', type = 'bu
         // `eidotter-btn--{variant}` modifiers, so consumer overrides written
         // against `.eidotter-button` / `.eidotter-btn` silently no-op'd. Matches
         // Badge (`eidotter-badge`) / Tag (`eidotter-tag`) which already emit a block class.
-        'eidotter-btn', 'inline-flex items-center justify-center relative', 'border-2 border-solid', 'font-dos leading-none whitespace-nowrap select-none', 'outline-none cursor-pointer', 'transition-all duration-100 ease-linear', sizeClasses[size] || sizeClasses.md, variantClasses[variant] || variantClasses.primary, isDisabled && 'opacity-50 cursor-not-allowed', loading && 'cursor-wait', fullWidth && 'w-full', iconOnly && 'aspect-square !px-0', 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dos-border-focus', className), "data-loading": loading || undefined, "data-variant": variant, ...props, children: [loading && (_jsx("span", { className: "eidotter-btn__loading", "aria-hidden": "true", children: "\u2588" })), _jsx("span", { className: cn('inline-flex items-center justify-center', loading && 'opacity-70'), children: children })] }));
+        'eidotter-btn', 'inline-flex items-center justify-center relative', 'border-2 border-solid', 'font-dos leading-none whitespace-nowrap select-none', 'outline-none cursor-pointer', 'transition-all duration-100 ease-linear', sizeClasses[size] || sizeClasses.md, variantClasses[variant] || variantClasses.primary, isDisabled && 'opacity-50 cursor-not-allowed', loading && 'cursor-wait', fullWidth && 'w-full', iconOnly && 'aspect-square !px-0', 'focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-dos-border-focus', className), "data-loading": loading || undefined, "data-variant": variant, ...props, children: [loading && (_jsx("span", { className: "eidotter-btn__loading", "aria-hidden": "true", children: "\u2588" })), _jsx("span", { className: cn('inline-flex items-center justify-center', loading && 'opacity-70'), children: children })] }));
 });
 Button.displayName = 'Button';

package/dist/components/Card/components/Card.d.ts

@@ -21,4 +21,9 @@ export interface CardProps {
      */
     className?: string;
 }
+/**
+ * Card on the DosWindow chrome (DMNC-1592): `title` becomes the window strip
+ * (dark, xs uppercase, `▸` marker, dim-amber rule) and `footer` the window
+ * footer. Variants set the frame's border colour and shadow. Server-safe.
+ */
 export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Card/components/Card.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../../../utils/cn.js';
+import { DosWindow } from '../../DosWindow/components/DosWindow.js';
 const variantClasses = {
     default: 'eidotter-card--default',
     elevated: 'eidotter-card--elevated',
@@ -10,7 +11,12 @@ const variantClasses = {
     minimal: 'eidotter-card--minimal',
     callout: 'eidotter-card--callout',
 };
+/**
+ * Card on the DosWindow chrome (DMNC-1592): `title` becomes the window strip
+ * (dark, xs uppercase, `▸` marker, dim-amber rule) and `footer` the window
+ * footer. Variants set the frame's border colour and shadow. Server-safe.
+ */
 export const Card = forwardRef(({ title, children, footer, variant = 'default', className, ...props }, ref) => {
-    return (_jsxs("div", { ref: ref, className: cn('border-2 border-solid border-dos-border-default', 'font-dos text-dos-text-brand', 'eidotter-card', variantClasses[variant] || variantClasses.default, className), ...props, children: [title && (_jsx("div", { className: "eidotter-card__header px-3 py-2 border-b border-dos-text-disabled bg-dos-bg-brand-dim", children: _jsx("span", { className: "text-dos-text-secondary text-dos-text-md uppercase", children: title }) })), _jsx("div", { className: "p-3", children: children }), footer && (_jsx("div", { className: "eidotter-card__footer px-3 py-2 border-t border-dos-text-disabled bg-dos-bg-secondary", children: footer }))] }));
+    return (_jsx(DosWindow, { ref: ref, title: title, footer: footer || undefined, className: cn('font-dos text-dos-text-brand', 'eidotter-card', variantClasses[variant] || variantClasses.default, className), ...props, children: children }));
 });
 Card.displayName = 'Card';

package/dist/components/CmdPalette/components/CmdPalette.d.ts

@@ -46,8 +46,9 @@ export interface CmdPaletteProps {
  * 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 declare const CmdPalette: React.ForwardRefExoticComponent<CmdPaletteProps & React.RefAttributes<HTMLElement>>;