eidotter 0.41.3 → 0.42.0

package/README.md

@@ -59,6 +59,8 @@ import 'eidotter/utilities';                 // Optional: .dos-* typography clas
 
 Granular imports are still available (`eidotter/fonts.css`, `eidotter/tokens.css`) if you want to override the font or tokens independently.
 
+**Fonts in your build output:** your bundler emits the four JetBrains Mono Nerd Font woff2 files (body tier, about 4 MB) even if you never use the body tier. Browsers only download faces a page uses, so this is deploy size, not page weight. To leave them out, see "Fonts: what your build emits" in [`guidelines/README.md`](guidelines/README.md).
+
 **Favicon:** the logomark favicon ships as `eidotter/favicon.svg` (SVG only). Copy it into your site's public dir or point a bundler at it, then `<link rel="icon" href="/favicon.svg" type="image/svg+xml" />`.
 
 ### With Tailwind
@@ -116,7 +118,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.3` (0.41.0 shipped before its review fixes; use the latest 0.41.x, 0.41.3 or later).
+0.x caret ranges stop at the next minor (`^0.40.2` never resolves to 0.41.0), so bump the range explicitly: `npm install eidotter@^0.42.0` (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.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/RangeBar/components/RangeBar.js

@@ -85,9 +85,9 @@ export const RangeBar = forwardRef(({ segments, orientation = 'vertical', size =
                                         [orientation === 'horizontal' ? 'left' : 'top']: `${Math.min(Math.max(target.minShare / (s.weight || 1), 0), 1) * 100}%`,
                                     } })) }, s.id));
                         }) }), _jsx("div", { "aria-hidden": "true", className: cn('eidotter-range-bar__lane flex tabular-nums text-dos-text-accent', orientation === 'horizontal' ? 'flex-row w-full' : 'flex-col'), children: items.map((s) => (_jsxs("div", { className: cn('eidotter-range-bar__cell flex items-center justify-center gap-x-2 gap-y-1 min-w-0', orientation === 'horizontal' ? 'flex-col' : 'flex-row justify-start'), style: { flexGrow: Math.max(s.weight, minSegmentShare), flexBasis: 0 }, children: [s.weight >= labelThreshold && (_jsx("span", { className: "eidotter-range-bar__pct", children: pct(s.weight) })), s.weight >= labelThreshold && target?.segmentId === s.id && ' ', target?.segmentId === s.id && (_jsx("span", { className: "eidotter-range-bar__target-label text-dos-text-brand whitespace-nowrap", children: target.label }))] }, s.id))) })] }), showLegend && (_jsx("ul", { className: "eidotter-range-bar__legend flex flex-col gap-1 list-none p-0 m-0 min-w-0 max-w-full", children: items.map((s) => {
-                    return (_jsxs("li", { className: "eidotter-range-bar__row grid grid-cols-[auto_minmax(0,1fr)_auto_auto] items-baseline gap-2", children: [_jsx("span", { "aria-hidden": "true", className: cn('eidotter-range-bar__swatch inline-block w-[0.75rem] h-[0.75rem]', toneClasses[s.toneKey], s.patternClass), style: {
+                    return (_jsxs("li", { className: "eidotter-range-bar__row flex items-baseline gap-2", children: [_jsx("span", { "aria-hidden": "true", className: cn('eidotter-range-bar__swatch inline-block shrink-0 w-[0.75rem] h-[0.75rem]', toneClasses[s.toneKey], s.patternClass), style: {
                                     ...(s.toneKey === 'neutral' && { '--eidotter-fill': NEUTRAL_FILL }),
-                                } }), _jsxs("span", { className: "eidotter-range-bar__name text-dos-text-primary min-w-0 break-words", children: [s.label, s.bound && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "eidotter-range-bar__bound text-dos-text-muted whitespace-nowrap", children: s.bound })] }))] }), _jsx("span", { className: "text-dos-text-accent tabular-nums", children: pct(s.weight) }), _jsx("span", { className: "text-dos-text-muted tabular-nums text-right", children: s.duration ?? '' })] }, s.id));
+                                } }), _jsxs("span", { className: "eidotter-range-bar__text flex flex-1 flex-wrap items-baseline gap-x-2 min-w-0", children: [_jsxs("span", { className: "eidotter-range-bar__name text-dos-text-primary flex-auto min-w-0 max-w-full break-words", children: [s.label, s.bound && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "eidotter-range-bar__bound text-dos-text-muted whitespace-nowrap", children: s.bound })] }))] }), _jsxs("span", { className: "eidotter-range-bar__meta ml-auto flex flex-wrap items-baseline justify-end gap-x-2 max-w-full", children: [_jsx("span", { className: "text-dos-text-accent tabular-nums", children: pct(s.weight) }), s.duration && (_jsx("span", { className: "eidotter-range-bar__duration text-dos-text-muted tabular-nums text-right", children: s.duration }))] })] })] }, s.id));
                 }) }))] }));
 });
 RangeBar.displayName = 'RangeBar';

package/dist/components/registry.js

@@ -235,6 +235,7 @@ export const componentRegistry = {
             react: { path: 'src/components/CommandPrompt', status: 'canonical' },
         },
         changelog: [
+            { version: '0.42.0', type: 'changed', description: 'A placeholder (or unfocused value) wider than the input ends in an ellipsis instead of being cut mid-glyph; a consumer min-width wider than the line still clips (DMNC-1612)' },
             { version: '0.30.0', type: 'changed', description: 'A11y keyboard focus fixes' },
             { version: '0.18.0', type: 'changed', description: 'Migrate BEM to Tailwind-first; switch to Flexi IBM VGA font' },
             { version: '0.3.0', type: 'added', description: 'Initial CommandPrompt — prompt prop, onCommand, autoFocus, disabled' },
@@ -302,6 +303,7 @@ export const componentRegistry = {
         since: '0.22.0',
         originNote: 'Fullscreen image viewer on the DosDialog shell. Keyboard nav, prev/next, counter, swipe.',
         changelog: [
+            { version: '0.42.0', type: 'changed', description: 'A figure taller than the body (portrait image at phone width) scrolls from its top edge: the figure is centred with auto block margins instead of justify-content center; a single-image lightbox renders no prev/next, the [ 1 / 1 ] counter stays (DMNC-1612)' },
             { version: '0.41.0', type: 'changed', description: 'Close and prev/next (md 36px; pixel chevrons replacing the text arrows) are IconButtons; disabled nav opacity 0.5 (was 0.3); keyboard and swipe unchanged (DMNC-1592)' },
             { version: '0.41.0', type: 'changed', description: 'Rebuilt on DosDialog (size full): gains the title strip (dark, yellow title, dim-amber rule) with the [ n / N ] counter as its title and the Close icon at its end; z-index now --z-index-modal (was 60); panel pops in/out (150ms) (DMNC-1592)' },
         ],
@@ -703,6 +705,7 @@ export const componentRegistry = {
         consumers: [],
         originNote: 'DesktopNav + MobileNav (MENU trigger + slide-out panel) — retro/modern variants; composed by Header',
         changelog: [
+            { version: '0.42.0', type: 'changed', description: 'linkComponent is typed NavLinkComponent (ComponentType or ExoticComponent of NavLinkProps), so next/link is accepted directly under @types/react 18 and 19; NavLinkProps and NavLinkComponent exported (DMNC-1612)' },
             { version: '0.41.0', type: 'changed', description: 'Retro variant: desktop links, mobile panel links and the MENU trigger in brand amber with bright-brand-amber hover (no glow on the trigger); desktop and panel link labels render uppercase DOS. Modern variant unchanged (DMNC-1584)' },
         ],
     },
@@ -772,9 +775,13 @@ export const componentRegistry = {
             'size:window': { description: '28x28, 16px glyph, for dense chrome (no built-in adopter)', since: '0.41.0' },
             'variant:outline': { description: '1px border-default outline at rest (default)', since: '0.41.0' },
             'variant:bare': { description: 'No resting outline (Tag remove)', since: '0.41.0' },
+            'size:touch': { description: '44x44 touch target, 24px glyph, for stage and kiosk shells', since: '0.42.0' },
+            'tone:accent': { description: 'text-accent glyph, amber hover invert (default)', since: '0.42.0' },
+            'tone:inherit': { description: 'Glyph, outline and focus ring take the surrounding currentColor; hover tints with it, for coloured bars', since: '0.42.0' },
         },
         platforms: { react: { path: 'src/components/IconButton', status: 'canonical' } },
         changelog: [
+            { version: '0.42.0', type: 'added', description: 'size touch (44x44, 24px glyph) and tone prop: accent (default, unchanged) or inherit (currentColor glyph, outline and focus ring; hover tints with currentColor) for coloured bars (DMNC-1612)' },
             { version: '0.41.0', type: 'added', description: 'Initial IconButton: icon, required label (aria-label), size md/window, variant outline/bare, isDisabled, onPress, excludeFromTabOrder; adopted by Modal, Lightbox, Notification, Alert, Tag and Nav (DMNC-1592)' },
         ],
     },
@@ -810,6 +817,7 @@ export const componentRegistry = {
         originNote: '⌘K / Ctrl+K command palette overlay. Built on React Aria ModalOverlay/Modal/Dialog (same primitives as Modal). Generic items + scored search + keyboard navigation.',
         platforms: { react: { path: 'src/components/CmdPalette', status: 'canonical' } },
         changelog: [
+            { version: '0.42.0', type: 'changed', description: 'Row label keeps every character (label text in eidotter-cmdpal__item-text); the hint shrinks first and truncates with an ellipsis; default footer wraps between key hints, never inside ESC CLOSE; narrow rules are a container query on the palette (DMNC-1612)' },
             { version: '0.41.0', type: 'changed', description: 'Rebuilt on DosDialog (top placement, lg width, decorative strip); the JUMP TO head loses its amber fill (dark strip, yellow text); placeholder and row hints use text-muted, the selected row label and hint text-brand; the panel pops in/out (150ms) instead of the 8px drop; own cmdpal-enter/exit and backdrop keyframes removed (DMNC-1592)' },
             { version: '0.20.0', type: 'added', description: 'Initial CmdPalette — generic items with keywords, mod+k global hotkey, custom renderItem, useId() per-instance DOM ids, selected-clamp on items mutation' },
             { version: '0.41.0', type: 'changed', description: 'Fix: search input shows the 2px focus-visible ring instead of only a faint background tint (DMNC-1436)' },
@@ -1025,6 +1033,7 @@ export const componentRegistry = {
         changelog: [
             { version: '0.40.0', type: 'added', description: 'Initial RangeBar (health metabolism family)' },
             { version: '0.41.1', type: 'changed', description: 'Vertical legend wraps under the bar in a narrow container; legend names wrap instead of truncating and a bound moves to the next line whole; percent and target label separated by a gap and a space; lane and legend text print black on white (DMNC-1610)' },
+            { version: '0.42.0', type: 'changed', description: 'Legend name wins width: name and the percent/duration group share a wrapping line, so percent and duration move under the name (right-aligned) before the name wraps, and a word breaks only when it alone is wider than the row; no empty duration cell; eidotter-range-bar__text, __meta and __duration hooks (DMNC-1612)' },
         ],
     },
     SeriesBars: {