eidotter 0.41.2 → 0.41.3

package/README.md

@@ -79,6 +79,18 @@ module.exports = {
 </div>
 ```
 
+### With Tailwind v4: load eiDotter's CSS in a cascade layer
+
+`dist/eidotter.css` ships the stock utilities its components use (`.flex`, `.flex-col`, `.hidden`, about 200) unlayered, and unlayered CSS beats Tailwind v4's `@layer utilities` whatever the order: your `md:flex-row` loses to eiDotter's `.flex-col`. Import eiDotter into a named layer before your utilities, in the CSS file that imports Tailwind:
+
+```css
+@layer theme, base, components, eidotter, utilities;
+@import "tailwindcss";
+@import "eidotter/styles" layer(eidotter);
+```
+
+Drop the JS `import 'eidotter/styles'` (it would add an unlayered second copy) and do not point `@source` at `node_modules/eidotter/dist`. Trade-off: inside the layer, eiDotter loses to any unlayered global rule of yours (an unlayered `* { margin: 0; padding: 0 }` beats eiDotter's component utilities), and eiDotter's reset beats element defaults in your `@layer base`. Keep your resets layered, and put global element styles in a layer declared after `eidotter`. Details: [migrations/0.41.0.md](./migrations/0.41.0.md#tailwind-v4-apps-load-eidotters-css-in-a-cascade-layer-recommended).
+
 The preset auto-registers `tailwindcss-react-aria-components` and `tailwindcss-animate` if they resolve. Migrating from the pre-0.19.2 dual-preset split? See [CHANGELOG → 0.19.2](./CHANGELOG.md#0192--2026-04-18).
 
 ### Server Components (RSC / Next.js App Router)
@@ -104,7 +116,7 @@ for client apps and `'use client'` files.
 
 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.2` (0.41.0 shipped before its review fixes; use 0.41.1 or later).
+0.x caret ranges stop at the next minor (`^0.40.2` never resolves to 0.41.0), so bump the range explicitly: `npm install eidotter@^0.41.3` (0.41.0 shipped before its review fixes; use the latest 0.41.x, 0.41.3 or later).
 
 ## Documentation
 

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

@@ -33,7 +33,12 @@ export interface CmdPaletteProps {
     footerHint?: React.ReactNode;
     /** Custom renderer for each row. Falls back to label + hint. */
     renderItem?: (item: CmdPaletteItem, isSelected: boolean) => React.ReactNode;
-    /** Cap on filtered result rows. */
+    /**
+     * Cap on result rows, default `20`. It also applies to the empty query: with
+     * no search text the palette lists only the first `maxResults` items, so a
+     * site with more than 20 routes hides the rest until the user types. Pass a
+     * larger value (e.g. `items.length`) to list every item up front.
+     */
     maxResults?: number;
     /** Extra class names merged onto the dialog container. */
     className?: string;

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

@@ -1,17 +1,28 @@
 import React from 'react';
 export type DosDialogPlacement = 'center' | 'top';
 export type DosDialogSize = 'sm' | 'md' | 'lg' | 'full';
+/** Heading level for a structured, non-decorative head title. */
+export type DosDialogHeadingLevel = 2 | 3 | 4 | 5 | 6;
 /** Structured head for the title strip. */
 export interface DosDialogHead {
-    /** Title text. Rendered as the dialog's `<h2>` unless `decorative` is set. */
+    /**
+     * Title text. Rendered as the dialog's heading (`<h2>` by default, see
+     * `headingLevel`) unless `decorative` is set.
+     */
     title: React.ReactNode;
+    /**
+     * Heading level of the title, `2` (default) to `6`. Use it when the dialog
+     * sits under an existing heading, e.g. an `inline` preview inside a card
+     * whose own title is an `<h3>` (pass `4`). Ignored when `decorative` is set.
+     */
+    headingLevel?: DosDialogHeadingLevel;
     /** 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`
+     * `<span>` instead of a heading. 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.
      */

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

@@ -4,6 +4,7 @@ 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';
+const HEADING_LEVELS = [2, 3, 4, 5, 6];
 function isHeadObject(head) {
     return (typeof head === 'object' &&
         head !== null &&
@@ -50,8 +51,9 @@ export const DosDialog = forwardRef(({ open, onOpenChange, inline = false, place
     }, [unnamed]);
     let strip = null;
     if (structured) {
-        const { title, end, marker = true, decorative = false } = structured;
-        const TitleTag = decorative ? 'span' : 'h2';
+        const { title, end, marker = true, decorative = false, headingLevel = 2 } = structured;
+        const level = HEADING_LEVELS.includes(headingLevel) ? headingLevel : 2;
+        const TitleTag = decorative ? 'span' : `h${level}`;
         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) {

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

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

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

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

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

@@ -26,7 +26,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
     brandName?: string;
     /** Href for the brand link (default: "/") */
     brandHref?: string;
-    /** Navigation items passed through to Nav */
+    /** Navigation items passed through to Nav. An empty array renders no nav and no MENU trigger. */
     items: NavItem[];
     /** Currently active href (highlights matching nav link) */
     activeHref?: string;

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

@@ -28,9 +28,12 @@ export const Header = forwardRef(({ brandName, brandHref = '/', items, activeHre
     // 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 !== '';
+    // No items → no nav at all: no empty <nav> landmark on desktop and no MENU
+    // trigger opening an empty panel on mobile (DMNC-1611).
+    const hasItems = Array.isArray(items) && items.length > 0;
     const ActionsGroup = hasEnd ? 'div' : React.Fragment;
     const actionsProps = hasEnd ? { className: 'eidotter-header__actions flex items-center gap-4' } : {};
-    const main = (_jsxs(_Fragment, { children: [_jsx(LinkTag, { href: safeBrandHref, className: cn('no-underline text-dos-text-base font-bold tracking-wide', 'eidotter-header__branding', iconBrand && 'eidotter-header__branding--icon inline-flex items-center gap-3'), children: brandContent }), _jsxs(ActionsGroup, { ...actionsProps, children: [_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 main = (_jsxs(_Fragment, { children: [_jsx(LinkTag, { href: safeBrandHref, className: cn('no-underline text-dos-text-base font-bold tracking-wide', 'eidotter-header__branding', iconBrand && 'eidotter-header__branding--icon inline-flex items-center gap-3'), children: brandContent }), _jsxs(ActionsGroup, { ...actionsProps, children: [hasItems && (_jsx(DesktopNav, { items: items, activeHref: activeHref, variant: variant, linkComponent: linkComponent })), hasEnd && _jsx("div", { className: "eidotter-header__end flex items-center", children: end }), hasItems && (_jsx(MobileNav, { items: items, activeHref: activeHref, variant: variant, linkComponent: linkComponent }))] })] }));
     const 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'

package/dist/components/Terminal/components/Terminal.js

@@ -39,5 +39,5 @@ export const Terminal = ({ size = 'md', title = 'MS-DOS Terminal', state = 'acti
     if (windowState === 'minimized') {
         return (_jsx(AriaButton, { className: `terminal terminal--minimized ${className}`.trim(), onPress: handleFocus, "aria-label": `Restore ${title} window`, children: _jsxs("div", { className: "terminal__taskbar-item", children: [_jsx(Icon, { name: "App", size: "S" }), _jsx("span", { className: "terminal__taskbar-title", children: title })] }) }));
     }
-    return (_jsxs("div", { ref: terminalRef, className: `terminal terminal--${normalizedSize} terminal--${windowState} ${isMaximized ? 'terminal--maximized' : ''} ${className}`.trim(), tabIndex: 0, role: "dialog", "aria-label": `${title} terminal window`, onFocus: handleFocus, onKeyDown: handleKeyDown, children: [_jsxs("div", { className: "terminal__title-bar", children: [_jsxs("div", { className: "terminal__title", children: [_jsx(Icon, { name: "App", size: "S", "aria-hidden": "true" }), _jsx("span", { className: "terminal__title-text", children: title })] }), (minimizable || maximizable || closeable) && (_jsxs("div", { className: "terminal__controls", children: [minimizable && (_jsx(AriaButton, { className: "terminal__control terminal__control--minimize", onPress: handleMinimize, "aria-label": "Minimize window", children: _jsx(Icon, { name: "Cancel", size: "S" }) })), maximizable && (_jsx(AriaButton, { className: "terminal__control terminal__control--maximize", onPress: handleMaximize, "aria-label": isMaximized ? "Restore window" : "Maximize window", children: _jsx(Icon, { name: isMaximized ? "Fullscreen" : "Add", size: "S" }) })), closeable && (_jsx(AriaButton, { className: "terminal__control terminal__control--close", onPress: handleClose, "aria-label": "Close window", children: _jsx(Icon, { name: "Close", size: "S" }) }))] }))] }), _jsx("div", { className: "terminal__content", role: "main", children: children || (_jsx("div", { className: "terminal__default-content", children: _jsxs("div", { className: "terminal__prompt", children: [_jsx("span", { className: "terminal__path", children: "C:\\\\>" }), _jsx("span", { className: "terminal__cursor", "aria-hidden": "true" })] }) })) }), resizable && (_jsx("div", { className: "terminal__resize-handle", "aria-hidden": "true" }))] }));
+    return (_jsxs("div", { ref: terminalRef, className: `terminal terminal--${normalizedSize} terminal--${windowState} ${isMaximized ? 'terminal--maximized' : ''} ${className}`.trim(), tabIndex: 0, role: "group", "aria-label": `${title} terminal window`, onFocus: handleFocus, onKeyDown: handleKeyDown, children: [_jsxs("div", { className: "terminal__title-bar", children: [_jsxs("div", { className: "terminal__title", children: [_jsx(Icon, { name: "App", size: "S", "aria-hidden": "true" }), _jsx("span", { className: "terminal__title-text", children: title })] }), (minimizable || maximizable || closeable) && (_jsxs("div", { className: "terminal__controls", children: [minimizable && (_jsx(AriaButton, { className: "terminal__control terminal__control--minimize", onPress: handleMinimize, "aria-label": "Minimize window", children: _jsx(Icon, { name: "Cancel", size: "S" }) })), maximizable && (_jsx(AriaButton, { className: "terminal__control terminal__control--maximize", onPress: handleMaximize, "aria-label": isMaximized ? "Restore window" : "Maximize window", children: _jsx(Icon, { name: isMaximized ? "Fullscreen" : "Add", size: "S" }) })), closeable && (_jsx(AriaButton, { className: "terminal__control terminal__control--close", onPress: handleClose, "aria-label": "Close window", children: _jsx(Icon, { name: "Close", size: "S" }) }))] }))] }), _jsx("div", { className: "terminal__content", role: "main", children: children || (_jsx("div", { className: "terminal__default-content", children: _jsxs("div", { className: "terminal__prompt", children: [_jsx("span", { className: "terminal__path", children: "C:\\\\>" }), _jsx("span", { className: "terminal__cursor", "aria-hidden": "true" })] }) })) }), resizable && (_jsx("div", { className: "terminal__resize-handle", "aria-hidden": "true" }))] }));
 };

package/dist/components/registry.js

@@ -555,6 +555,7 @@ export const componentRegistry = {
             react: { path: 'src/components/Terminal', status: 'canonical' },
         },
         changelog: [
+            { version: '0.41.3', type: 'changed', description: 'Window root is role=group (named "<title> terminal window"), not role=dialog: it is in-page chrome with no focus trap or aria-modal (DMNC-1611)' },
             { version: '0.30.0', type: 'changed', description: 'A11y keyboard focus fixes for window controls' },
             { version: '0.18.0', type: 'changed', description: 'Migrate BEM to Tailwind-first; switch to Flexi IBM VGA font' },
             { version: '0.14.0', type: 'changed', description: 'Breaking: minimizable/maximizable/closeable default to false — consumers must opt in' },
@@ -687,6 +688,8 @@ export const componentRegistry = {
             'context:returnTo': { description: 'Breadcrumb return pill — same-tab via linkComponent by default; reuseTab navigates via window.open(href, "rizomorf-shell") named-tab reuse', since: '0.39.0' },
         },
         changelog: [
+            { version: '0.41.3', type: 'changed', description: 'end slot clips the inline axis only (overflow-x: clip) with a 12px inline bleed, so focus rings and phosphor glows of controls in it are no longer cut; overflow: hidden fallback without clip support (DMNC-1611)' },
+            { version: '0.41.3', type: 'changed', description: 'items={[]} renders no nav: no empty <nav> and no MENU trigger below 768px; the brand link gets the house focus ring (2px border-focus outline, 2px offset) in both variants (DMNC-1611)' },
             { version: '0.41.0', type: 'changed', description: 'Mobile Nav panel close is the shared IconButton (md 36x36, outline, hover invert) (DMNC-1592)' },
             { version: '0.41.0', type: 'changed', description: 'One portfolio header (DMNC-1584): retro variant now has a 1px dim-amber bottom line with a soft glow under it, brand-amber text (branding + returnTo pill, hover to bright brand amber, no text-shadow), uppercase returnTo pill; brandName without children renders the lockup by default' },
             { version: '0.41.0', type: 'added', description: '`brand` prop (lockup | mark | text, default lockup), `end` trailing slot (rendered once; after the desktop nav / before MENU on mobile), `skipLinkTarget` skip link (WCAG 2.4.1, off by default) (DMNC-1584)' },
@@ -753,6 +756,7 @@ export const componentRegistry = {
         },
         platforms: { react: { path: 'src/components/DosDialog', status: 'canonical' } },
         changelog: [
+            { version: '0.41.3', type: 'added', description: 'head.headingLevel (2-6, default 2) sets the title heading level in modal and inline mode, e.g. an inline preview under a card h3; ignored on a decorative head (DMNC-1611)' },
             { version: '0.41.1', type: 'added', description: 'inline prop: renders the same frame, strip, head, body, footer and end control in place without ModalOverlay, portal or focus trap, as a role=group with no aria-modal; server HTML carries the chrome (DMNC-1605)' },
             { version: '0.41.1', type: 'changed', description: 'Last end IconButton docks flush in the frame corner (0px top, 0px right, was 0px top, 4px right), the same rule as DosWindow controls (DMNC-1605)' },
             { version: '0.41.0', type: 'added', description: 'Initial DosDialog: open/onOpenChange, placement, size, head strip (title/end/marker/decorative or ReactNode), footer, isDismissable, pop-in/out panel (150ms) over a fading scrim, reduced-motion bypass' },