eidotter 0.38.1 → 0.40.0

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { NavProps } from '../../Nav/index.js';
+import type { HeaderContext } from './Header.js';
+export interface HeaderContextRowProps {
+    /** Category badge row + optional returnTo pill (DMNC-1326). */
+    context: HeaderContext;
+    /** Same custom link component threaded from Header for framework routing. */
+    linkComponent?: NavProps['linkComponent'];
+    /**
+     * Currently active href — the category whose href matches gets
+     * aria-current="page" + the underline active class (WCAG 1.4.1 non-color
+     * state, mirroring Nav). This is the non-SVG active state the future
+     * tentacle mode keys off (PLAN-tentacle-menu).
+     */
+    activeHref?: string;
+}
+/**
+ * The measurable second row of the Header (DMNC-1326).
+ *
+ * Emits the stable measurement/transform contract the Mark arm-connector
+ * (DMNC-1325) and the future tentacle overlay (PLAN-tentacle-menu) anchor off:
+ * `.eidotter-header__context` / `.eidotter-header__categories` /
+ * `.eidotter-header__category` + `li[data-category-key]`. Do not rename them.
+ *
+ * Internal only — never exported from a barrel. Carries `'use client'` because
+ * the reuseTab pill attaches an onClick handler (moves the RSC boundary here,
+ * keeping Header.tsx server-safe).
+ *
+ * Nav-link boundary safety (per #470's shared policy): category + returnTo
+ * hrefs pass through `isSafeHref` and fall back to a non-anchor span when an
+ * unsafe scheme (javascript:, data:, …) is supplied — same guard as Nav/Footer.
+ */
+export declare function HeaderContextRow({ context, linkComponent, activeHref }: HeaderContextRowProps): React.JSX.Element;

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

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+import { isSafeHref } from '../../../utils/isSafeHref.js';
+import { Badge } from '../../Badge/index.js';
+import { Icon, isIconName } from '../../Icon/index.js';
+const returnPillClasses = cn('eidotter-header__return', 'inline-flex items-center gap-1 no-underline', 'border border-dos-border-default rounded-dos-base', 'px-2 py-0.5 text-dos-text-xs uppercase tracking-wider');
+/**
+ * The measurable second row of the Header (DMNC-1326).
+ *
+ * Emits the stable measurement/transform contract the Mark arm-connector
+ * (DMNC-1325) and the future tentacle overlay (PLAN-tentacle-menu) anchor off:
+ * `.eidotter-header__context` / `.eidotter-header__categories` /
+ * `.eidotter-header__category` + `li[data-category-key]`. Do not rename them.
+ *
+ * Internal only — never exported from a barrel. Carries `'use client'` because
+ * the reuseTab pill attaches an onClick handler (moves the RSC boundary here,
+ * keeping Header.tsx server-safe).
+ *
+ * Nav-link boundary safety (per #470's shared policy): category + returnTo
+ * hrefs pass through `isSafeHref` and fall back to a non-anchor span when an
+ * unsafe scheme (javascript:, data:, …) is supplied — same guard as Nav/Footer.
+ */
+export function HeaderContextRow({ context, linkComponent, activeHref }) {
+    // Cast to ElementType so href/aria-current/className all type-check whether
+    // LinkTag resolves to a custom component or the intrinsic anchor.
+    const LinkTag = linkComponent ?? 'a';
+    const { categories, returnTo } = context;
+    const safeReturnHref = returnTo && isSafeHref(returnTo.href) ? returnTo.href : undefined;
+    const handleReuseTabClick = (event, href) => {
+        if (event.defaultPrevented)
+            return;
+        // Preserve native Cmd/Ctrl/Shift/Alt/middle-click "open in new tab".
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        const win = window.open(href, 'rizomorf-shell');
+        if (win) {
+            // Only cancel same-tab navigation when the named tab actually opened;
+            // a popup blocker returns null → fall back to normal same-tab nav.
+            event.preventDefault();
+            // Best-effort focus. Same-origin only — browsers ignore cross-origin focus.
+            win.focus();
+        }
+    };
+    const returnLabel = returnTo && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "\u2190" }), _jsx("span", { children: returnTo.label })] }));
+    return (_jsxs("div", { className: cn('eidotter-header__context', 'flex w-full flex-wrap items-center gap-x-4 gap-y-2'), children: [returnTo && (safeReturnHref === undefined ? (
+            // Unsafe href → render the label without an anchor (Nav's fallback).
+            _jsx("span", { className: returnPillClasses, children: returnLabel })) : returnTo.reuseTab ? (
+            // reuseTab bypasses linkComponent — a router link would intercept the
+            // click and window.open would never fire.
+            _jsx("a", { href: safeReturnHref, onClick: (e) => handleReuseTabClick(e, safeReturnHref), className: returnPillClasses, children: returnLabel })) : (_jsx(LinkTag, { href: safeReturnHref, className: returnPillClasses, children: returnLabel }))), categories.length > 0 && (_jsx("nav", { "aria-label": "Categories", className: "eidotter-header__categories-nav", children: _jsx("ul", { className: cn('eidotter-header__categories', 'm-0 flex list-none flex-wrap items-center gap-2 p-0'), children: categories.map((category) => {
+                        const safeHref = isSafeHref(category.href) ? category.href : undefined;
+                        const isActive = activeHref !== undefined && category.href === activeHref;
+                        const linkClass = cn('eidotter-header__category inline-flex no-underline', isActive && 'eidotter-header__category--active');
+                        const badge = (_jsxs(Badge, { size: "sm", variant: "default", children: [isIconName(category.icon) && (_jsx("span", { "aria-hidden": "true", className: "me-1 inline-flex", children: _jsx(Icon, { name: category.icon, size: "S", className: "eidotter-header__category-icon" }) })), category.label] }));
+                        return (_jsx("li", { "data-category-key": category.key, className: "eidotter-header__category-item", children: safeHref !== undefined ? (_jsx(LinkTag, { href: safeHref, className: linkClass, "aria-current": isActive ? 'page' : undefined, children: badge })) : (_jsx("span", { className: linkClass, children: badge })) }, category.key));
+                    }) }) }))] }));
+}

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

@@ -1,2 +1,2 @@
 export { Header } from './Header.js';
-export type { HeaderProps } from './Header.js';
+export type { HeaderProps, HeaderContext, HeaderCategory, HeaderReturnTo } from './Header.js';

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

@@ -1,2 +1,2 @@
 export { Header } from './components/index.js';
-export type { HeaderProps } from './components/index.js';
+export type { HeaderProps, HeaderContext, HeaderCategory, HeaderReturnTo } from './components/index.js';

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

@@ -15,6 +15,13 @@ declare const ICON_MAP: {
     Add: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
 };
 export type IconName = keyof typeof ICON_MAP;
+/**
+ * Runtime guard for arbitrary icon-name strings (e.g. Header context
+ * categories whose `icon` is developer-supplied and not statically typed).
+ * Narrows to `IconName` so `<Icon>` can render only when the name is real —
+ * unknown strings should render label-only, never an empty icon wrapper.
+ */
+export declare function isIconName(name: string): name is IconName;
 export type IconSize = 'L' | 'S';
 export interface IconProps {
     /** The name of the icon to display */

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

@@ -43,6 +43,15 @@ const ICON_MAP = {
     'Fullscreen': Expand,
     'Add': Plus,
 };
+/**
+ * Runtime guard for arbitrary icon-name strings (e.g. Header context
+ * categories whose `icon` is developer-supplied and not statically typed).
+ * Narrows to `IconName` so `<Icon>` can render only when the name is real —
+ * unknown strings should render label-only, never an empty icon wrapper.
+ */
+export function isIconName(name) {
+    return name in ICON_MAP;
+}
 const SIZE_MAP = { L: 56, S: 24 };
 /**
  * Icon component backed by pixelarticons (MIT licensed).

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

@@ -1,2 +1,2 @@
-export { Icon } from './Icon.js';
+export { Icon, isIconName } from './Icon.js';
 export type { IconProps, IconName, IconSize } from './Icon.js';

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

@@ -1 +1 @@
-export { Icon } from './Icon.js';
+export { Icon, isIconName } from './Icon.js';

package/dist/components/InlineExpand/components/InlineExpand.d.ts

@@ -50,8 +50,10 @@ export interface InlineExpandProps {
  * - DOS-authentic styling with phosphor glow and CGA tokens
  * - WCAG 2.1 AA compliant
  *
- * Content stays in the DOM when collapsed (with visibility: hidden) to enable
- * smooth CSS transition exit animations. This differs from Section which
- * unmounts content on collapse via conditional rendering.
+ * Content is conditionally rendered — it mounts on expand and unmounts on
+ * collapse (like Section), so it occupies no inline space when closed. The
+ * expanded text continues the trigger's line with a marker-pen highlight per
+ * wrapped fragment; a trailing collapse control and a compact favicon-only
+ * sources cluster follow the last word. Reveal is an in-place opacity fade.
  */
 export declare const InlineExpand: React.FC<InlineExpandProps>;

package/dist/components/InlineExpand/components/InlineExpand.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useId, useRef } from 'react';
 import { Button as AriaButton } from 'react-aria-components';
 import { cn } from '../../../utils/cn.js';
@@ -26,23 +26,21 @@ function getGoogleFaviconUrl(sourceUrl) {
  * - DOS-authentic styling with phosphor glow and CGA tokens
  * - WCAG 2.1 AA compliant
  *
- * Content stays in the DOM when collapsed (with visibility: hidden) to enable
- * smooth CSS transition exit animations. This differs from Section which
- * unmounts content on collapse via conditional rendering.
+ * Content is conditionally rendered — it mounts on expand and unmounts on
+ * collapse (like Section), so it occupies no inline space when closed. The
+ * expanded text continues the trigger's line with a marker-pen highlight per
+ * wrapped fragment; a trailing collapse control and a compact favicon-only
+ * sources cluster follow the last word. Reveal is an in-place opacity fade.
  */
 export const InlineExpand = ({ children, content, defaultExpanded = false, expanded, onToggle, sources = [], className, ...props }) => {
     const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
     // Tracks the current fallback stage per source URL:
     // undefined = try primary; 'google' = primary failed, try Google Favicons; 'icon' = both failed
     const [faviconFallbacks, setFaviconFallbacks] = useState({});
-    const hasBeenExpanded = useRef(defaultExpanded);
     const contentId = useId();
     const triggerRef = useRef(null);
     const isControlled = expanded !== undefined;
     const isExpanded = isControlled ? expanded : internalExpanded;
-    if (isExpanded) {
-        hasBeenExpanded.current = true;
-    }
     const handleToggle = () => {
         const next = !isExpanded;
         if (!isControlled) {
@@ -50,6 +48,13 @@ export const InlineExpand = ({ children, content, defaultExpanded = false, expan
         }
         onToggle?.(next);
     };
+    // The trailing [-] control unmounts when it collapses the content; return
+    // focus to the trigger so a keyboard/screen-reader user isn't dropped to
+    // <body>. Routes through handleToggle so controlled mode still works.
+    const handleCollapseFromTrailing = () => {
+        handleToggle();
+        triggerRef.current?.focus();
+    };
     const handleKeyDown = (event) => {
         if (event.key === 'Escape' && isExpanded) {
             event.stopPropagation();
@@ -57,10 +62,7 @@ export const InlineExpand = ({ children, content, defaultExpanded = false, expan
             triggerRef.current?.focus();
         }
     };
-    return (_jsxs("span", { className: cn('eidotter-inline-expand', isExpanded && 'eidotter-inline-expand--expanded', className), onKeyDown: handleKeyDown, ...props, children: [_jsxs(AriaButton, { ref: triggerRef, className: "eidotter-inline-expand__trigger", "aria-expanded": isExpanded, "aria-controls": contentId, onPress: handleToggle, children: [children, _jsx("span", { className: "eidotter-inline-expand__indicator", "aria-hidden": "true", children: isExpanded ? '[-]' : '[+]' })] }), _jsx("span", { id: contentId, className: "eidotter-inline-expand__content", role: "region", inert: !isExpanded, children: _jsxs("span", { className: "eidotter-inline-expand__content-clip", children: [_jsx("span", { className: "eidotter-inline-expand__inner", children: content }), sources.length > 0 && (_jsx("span", { className: "eidotter-inline-expand__sources", role: "list", children: sources.map((source) => (_jsx("span", { className: "eidotter-inline-expand__source-item", role: "listitem", children: _jsxs("a", { href: isSafeUrl(source.url) ? source.url : undefined, className: "eidotter-inline-expand__source-link", target: "_blank", rel: "noopener noreferrer", "aria-label": `${source.title} (opens external website)`, children: [(() => {
-                                            if (!hasBeenExpanded.current) {
-                                                return _jsx("span", { className: "eidotter-inline-expand__source-icon", "aria-hidden": "true", children: "[\u2192]" });
-                                            }
+    return (_jsxs("span", { className: cn('eidotter-inline-expand', isExpanded && 'eidotter-inline-expand--expanded', className), "aria-live": "polite", onKeyDown: handleKeyDown, ...props, children: [_jsxs(AriaButton, { ref: triggerRef, className: "eidotter-inline-expand__trigger", "aria-expanded": isExpanded, "aria-controls": contentId, onPress: handleToggle, children: [children, _jsx("span", { className: "eidotter-inline-expand__indicator", "aria-hidden": "true", children: isExpanded ? '[-]' : '[+]' })] }), isExpanded && (_jsxs(_Fragment, { children: [' ', _jsxs("span", { id: contentId, className: "eidotter-inline-expand__content", "data-ai-skip": "true", children: [content, _jsx(AriaButton, { className: "eidotter-inline-expand__collapse", "aria-expanded": true, "aria-controls": contentId, "aria-label": "Collapse", onPress: handleCollapseFromTrailing, children: "[-]" }), sources.length > 0 && (_jsx("span", { className: "eidotter-inline-expand__sources", role: "list", children: sources.map((source) => (_jsx("span", { className: "eidotter-inline-expand__source-item", role: "listitem", children: _jsx("a", { href: isSafeUrl(source.url) ? source.url : undefined, className: "eidotter-inline-expand__source-link", target: "_blank", rel: "noopener noreferrer", title: source.title, "aria-label": `${source.title} (opens external website)`, children: (() => {
                                             const stage = faviconFallbacks[source.url];
                                             if (stage === 'icon') {
                                                 return _jsx("span", { className: "eidotter-inline-expand__source-icon", "aria-hidden": "true", children: "[\u2192]" });
@@ -74,5 +76,5 @@ export const InlineExpand = ({ children, content, defaultExpanded = false, expan
                                                 return (_jsx("img", { className: "eidotter-inline-expand__source-favicon", src: googleUrl, alt: "", width: 16, height: 16, decoding: "async", onError: () => setFaviconFallbacks(prev => ({ ...prev, [source.url]: 'icon' })) }));
                                             }
                                             return _jsx("span", { className: "eidotter-inline-expand__source-icon", "aria-hidden": "true", children: "[\u2192]" });
-                                        })(), _jsx("span", { className: "eidotter-inline-expand__source-title", children: source.title })] }) }, source.url))) }))] }) })] }));
+                                        })() }) }, source.url))) }))] })] }))] }));
 };

package/dist/components/InlineLink/components/InlineLink.js

@@ -1,21 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../../../utils/cn.js';
+import { isSafeHref } from '../../../utils/isSafeHref.js';
 // Relative paths, hash/query fragments, and standard nav schemes are allowed.
 // Everything else (javascript:, data:, vbscript:, unknown schemes) collapses
-// to a safe "#" sentinel.
+// to a safe "#" sentinel. Delegates to the shared isSafeHref util with
+// InlineLink's wider allowlist (tel/ftp/sms); behavior is unchanged — the empty
+// passthrough and "#" fallback are InlineLink-specific and preserved here.
 function sanitizeHref(href) {
     const trimmed = href.trim();
     if (trimmed === '')
         return trimmed;
-    if (/^[#?/]/.test(trimmed))
-        return trimmed;
-    const schemeMatch = /^([a-z][a-z0-9+\-.]*):/i.exec(trimmed);
-    if (!schemeMatch)
-        return trimmed;
-    const scheme = schemeMatch[1].toLowerCase();
-    const allowed = ['http', 'https', 'mailto', 'tel', 'ftp', 'sms'];
-    return allowed.includes(scheme) ? trimmed : '#';
+    return isSafeHref(trimmed, { extraSchemes: ['tel', 'ftp', 'sms'] }) ? trimmed : '#';
 }
 // Union-merge caller rel tokens with the required safety tokens so
 // consumer-supplied `rel="external"` still gets `noopener noreferrer` when the

package/dist/components/Meter/components/Meter.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { Band, HealthLabels, Tone } from '../../../utils/health/index.js';
+export interface MeterProps {
+    /** Full label. Always part of the accessible name. */
+    label: string;
+    /** Shown instead of `label` below the medium container width. */
+    shortLabel?: string;
+    /** Current value. `null`, `NaN` and `Infinity` render as unknown. */
+    value: number | null;
+    /** Maximum value (default 100). Zero or negative renders as unknown. */
+    max?: number;
+    /** Unit appended to the value text and used to flag mismatched band units in dev. */
+    unit?: string;
+    /** Optimal value (tick) or `[lo, hi]` range (band), on the same scale as `value`. */
+    optimal?: number | [number, number];
+    /** Bar direction. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Size variant. */
+    size?: 'xs' | 'sm' | 'md';
+    /** Explicit tone. Wins over `bands`. */
+    tone?: Tone;
+    /** Fill pattern. Defaults to the pattern paired with the tone. */
+    pattern?: 'solid' | 'dither' | 'hatch' | 'dotted';
+    /** Render the bar as this many quantised blocks (round half away). */
+    segments?: number;
+    /** Consumer-supplied bands. Resolved on the raw value. */
+    bands?: Band[];
+    /** BCP 47 locale for number formatting (default `en`). */
+    locale?: string;
+    /** Overrides for the built-in label text. */
+    labels?: Partial<HealthLabels>;
+    /** Show the value text (default true). The accessible value text is unaffected. */
+    showValue?: boolean;
+    /** Additional CSS class name. */
+    className?: string;
+    /** Replaces `label` in the composed accessible name. */
+    'aria-label'?: string;
+}
+/**
+ * Single-bar meter, vertical or horizontal, with label, value text, optional
+ * optimal tick or range, tone with a paired fill pattern, and optional
+ * quantised blocks. Text never sits on the fill (R13). Presentational and
+ * hook-free, so it stays server-safe.
+ */
+export declare const Meter: React.ForwardRefExoticComponent<MeterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Meter/components/Meter.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formatValue, isKnown, resolveBand, resolveLabels, PLACEHOLDER } from '../../../utils/health/index.js';
+const orientationClasses = {
+    vertical: 'eidotter-meter--vertical flex-col items-center gap-1',
+    horizontal: 'eidotter-meter--horizontal flex-row items-center gap-2',
+};
+const sizeClasses = {
+    xs: 'eidotter-meter--xs text-dos-text-xs',
+    sm: 'eidotter-meter--sm text-dos-text-xs',
+    md: 'eidotter-meter--md text-dos-text-sm',
+};
+const toneClasses = {
+    neutral: 'eidotter-tone--neutral',
+    info: 'eidotter-tone--info',
+    success: 'eidotter-tone--success',
+    warning: 'eidotter-tone--warning',
+    critical: 'eidotter-tone--critical',
+};
+const patternClasses = {
+    solid: 'eidotter-fill--solid',
+    dither: 'eidotter-fill--dither',
+    hatch: 'eidotter-fill--hatch',
+    dotted: 'eidotter-fill--dotted',
+};
+/** Default pattern per tone (KTD3): neutral reuses solid on its own hue. */
+const tonePatterns = {
+    neutral: 'solid',
+    info: 'solid',
+    success: 'dither',
+    warning: 'hatch',
+    critical: 'dotted',
+};
+const round4 = (n) => Math.round(n * 10000) / 10000;
+const clamp01 = (n) => Math.min(1, Math.max(0, n));
+/** CSS custom properties for the optimal tick or range; `max` must be valid. */
+function optimalStyle(optimal, max) {
+    if (optimal === undefined)
+        return undefined;
+    if (Array.isArray(optimal)) {
+        const lo = clamp01(optimal[0] / max);
+        const hi = clamp01(optimal[1] / max);
+        return {
+            '--eidotter-meter-optimal-start': String(round4(lo)),
+            '--eidotter-meter-optimal-size': String(round4(hi - lo)),
+        };
+    }
+    return { '--eidotter-meter-optimal': String(round4(clamp01(optimal / max))) };
+}
+/**
+ * Single-bar meter, vertical or horizontal, with label, value text, optional
+ * optimal tick or range, tone with a paired fill pattern, and optional
+ * quantised blocks. Text never sits on the fill (R13). Presentational and
+ * hook-free, so it stays server-safe.
+ */
+export const Meter = forwardRef(({ label, shortLabel, value, max = 100, unit, optimal, orientation = 'vertical', size = 'sm', tone, pattern, segments, bands, locale = 'en', labels: labelOverrides, showValue = true, className, 'aria-label': ariaLabel, ...props }, ref) => {
+    const labels = resolveLabels(labelOverrides);
+    const maxValid = max > 0 && Number.isFinite(max);
+    const unknown = !isKnown(value) || !maxValid;
+    const ratio = unknown ? 0 : clamp01(value / max);
+    const overflow = !unknown && value > max;
+    const resolved = resolveBand(unknown ? null : value, bands, unit);
+    const effectiveTone = tone ?? resolved.tone;
+    const effectivePattern = pattern ?? tonePatterns[effectiveTone] ?? 'solid';
+    const fillClass = patternClasses[effectivePattern] ?? patternClasses.solid;
+    const valueText = unknown ? PLACEHOLDER : formatValue(value, { locale, unit }).text;
+    const valuetext = unknown ? labels.unknown : valueText;
+    const name = `${ariaLabel ?? label}: ${valuetext}`;
+    const isRange = Array.isArray(optimal);
+    const optimalProps = maxValid ? optimalStyle(optimal, max) : undefined;
+    const blockCount = segments !== undefined ? Math.max(0, Math.floor(segments)) : 0;
+    const filledBlocks = Math.round(ratio * blockCount);
+    const valuePart = showValue || overflow ? (_jsxs("div", { className: "eidotter-meter__readout flex items-center gap-1 leading-none", children: [showValue && (_jsx("span", { className: "eidotter-meter__value text-dos-text-accent tabular-nums", children: valueText })), overflow && (_jsx("span", { "aria-hidden": "true", className: "eidotter-meter__overflow text-dos-text-warning", children: "+" }))] })) : null;
+    const trackPart = (_jsxs("div", { className: "eidotter-meter__track relative bg-dos-bg-primary border border-dos-border-disabled", children: [blockCount > 0 ? (_jsx("div", { className: "eidotter-meter__segments", "aria-hidden": "true", children: Array.from({ length: blockCount }, (_, i) => (_jsx("span", { className: cn('eidotter-meter__segment', i < filledBlocks && `eidotter-meter__segment--filled ${fillClass}`) }, i))) })) : (_jsx("div", { className: cn('eidotter-meter__fill', fillClass), style: { '--eidotter-meter-fill': String(round4(ratio)) } })), optimalProps && (_jsx("div", { "aria-hidden": "true", className: cn('eidotter-meter__optimal', isRange && 'eidotter-meter__optimal--range'), style: optimalProps }))] }));
+    const labelPart = (_jsxs("div", { className: "eidotter-meter__caption flex flex-wrap items-center justify-center gap-1 text-dos-text-brand uppercase tracking-wider leading-tight min-w-0 max-w-full", children: [effectiveTone === 'critical' && (_jsx("span", { "aria-hidden": "true", className: "eidotter-meter__glyph text-dos-text-error", children: "\u25B2" })), _jsxs("span", { className: "eidotter-meter__label truncate", title: label, children: [_jsx("span", { className: "eidotter-meter__label--full", children: label }), shortLabel && _jsx("span", { className: "eidotter-meter__label--short", children: shortLabel })] }), resolved.label && (_jsx("span", { className: "eidotter-meter__band normal-case", children: resolved.label }))] }));
+    return (_jsx("div", { ref: ref, className: cn('eidotter-meter eidotter-health flex font-dos', orientationClasses[orientation] ?? orientationClasses.vertical, sizeClasses[size] ?? sizeClasses.sm, toneClasses[effectiveTone], className), role: "meter", "aria-valuemin": 0, "aria-valuemax": maxValid ? max : 100, "aria-valuenow": unknown ? 0 : Math.max(0, Math.min(value, max)), "aria-valuetext": valuetext, "aria-label": name, ...props, children: orientation === 'horizontal' ? (_jsxs(_Fragment, { children: [labelPart, trackPart, valuePart] })) : (_jsxs(_Fragment, { children: [valuePart, trackPart, labelPart] })) }));
+});
+Meter.displayName = 'Meter';

package/dist/components/Meter/components/MeterGroup.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { HealthLabels } from '../../../utils/health/index.js';
+import type { MeterProps } from './Meter.js';
+export interface MeterGroupProps {
+    /** Row wraps under the medium container width; grid uses `columns`. */
+    layout?: 'row' | 'grid';
+    /** Fixed column count for `layout="grid"`. Omit to auto-fit. */
+    columns?: number;
+    /** Scale every bar to the largest `max` in `items`. */
+    sharedMax?: boolean;
+    /** Meters to render. Takes precedence over `children`. */
+    items?: MeterProps[];
+    /** Meter elements, used when `items` is not given. */
+    children?: React.ReactNode;
+    /** Overrides for built-in text (the empty state uses `unknown`). */
+    labels?: Partial<HealthLabels>;
+    /** Additional CSS class name. */
+    className?: string;
+    /** Accessible name for the group. */
+    'aria-label'?: string;
+}
+/**
+ * Lays Meters out as a row or grid, optionally on one shared scale.
+ * Renders EmptyState when there is nothing to show. Hook-free.
+ */
+export declare const MeterGroup: React.ForwardRefExoticComponent<MeterGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Meter/components/MeterGroup.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { EmptyState } from '../../EmptyState/index.js';
+import { resolveLabels } from '../../../utils/health/index.js';
+import { Meter } from './Meter.js';
+const layoutClasses = {
+    row: 'eidotter-meter-group--row',
+    grid: 'eidotter-meter-group--grid',
+};
+/**
+ * Lays Meters out as a row or grid, optionally on one shared scale.
+ * Renders EmptyState when there is nothing to show. Hook-free.
+ */
+export const MeterGroup = forwardRef(({ layout = 'row', columns, sharedMax = false, items, children, labels: labelOverrides, className, ...props }, ref) => {
+    const hasChildren = React.Children.count(children) > 0;
+    if ((!items || items.length === 0) && !hasChildren) {
+        return _jsx(EmptyState, { title: resolveLabels(labelOverrides).unknown, className: className });
+    }
+    const scale = sharedMax && items ? Math.max(...items.map((i) => i.max ?? 100)) : undefined;
+    const fixedColumns = layout === 'grid' && columns !== undefined;
+    return (_jsx("div", { ref: ref, role: "group", className: cn('eidotter-meter-group', layoutClasses[layout] ?? layoutClasses.row, fixedColumns && 'eidotter-meter-group--columns', className), style: fixedColumns
+            ? { '--eidotter-meter-columns': String(columns) }
+            : undefined, ...props, children: items
+            ? items.map((item, i) => (_jsx(Meter, { ...item, ...(scale !== undefined && { max: scale }) }, `${item.label}-${i}`)))
+            : children }));
+});
+MeterGroup.displayName = 'MeterGroup';

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

@@ -0,0 +1,4 @@
+export { Meter } from './Meter.js';
+export type { MeterProps } from './Meter.js';
+export { MeterGroup } from './MeterGroup.js';
+export type { MeterGroupProps } from './MeterGroup.js';

package/dist/components/Meter/components/index.js

@@ -0,0 +1,2 @@
+export { Meter } from './Meter.js';
+export { MeterGroup } from './MeterGroup.js';

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

@@ -0,0 +1,2 @@
+export { Meter, MeterGroup } from './components/index.js';
+export type { MeterProps, MeterGroupProps } from './components/index.js';

package/dist/components/Meter/index.js

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

package/dist/components/Nav/components/Nav.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { cn } from '../../../utils/cn.js';
+import { isSafeHref } from '../../../utils/isSafeHref.js';
 import { Icon } from '../../Icon/index.js';
 const variantClasses = {
     retro: 'eidotter-nav--retro',
@@ -9,7 +10,13 @@ const variantClasses = {
 };
 export const DesktopNav = ({ items, activeHref, variant = 'retro', linkComponent, className, }) => {
     const LinkTag = linkComponent || 'a';
-    return (_jsx("nav", { className: cn('eidotter-nav eidotter-nav--desktop', variantClasses[variant], className), "aria-label": "Main navigation", children: _jsx("ul", { className: "eidotter-nav__desktop-list", children: items.map((item) => (_jsx("li", { className: "eidotter-nav__desktop-item", children: _jsx(LinkTag, { href: item.href, className: cn('eidotter-nav__link', activeHref === item.href && 'eidotter-nav__link--active'), "aria-current": activeHref === item.href ? 'page' : undefined, children: item.label }) }, item.href))) }) }));
+    return (_jsx("nav", { className: cn('eidotter-nav eidotter-nav--desktop', variantClasses[variant], className), "aria-label": "Main navigation", children: _jsx("ul", { className: "eidotter-nav__desktop-list", children: items.map((item) => {
+                // Unsafe hrefs (javascript, data, vbscript, …) render the label as a
+                // plain span instead of an anchor.
+                const safeHref = isSafeHref(item.href) ? item.href : undefined;
+                const linkClassName = cn('eidotter-nav__link', activeHref === item.href && 'eidotter-nav__link--active');
+                return (_jsx("li", { className: "eidotter-nav__desktop-item", children: safeHref ? (_jsx(LinkTag, { href: safeHref, className: linkClassName, "aria-current": activeHref === item.href ? 'page' : undefined, children: item.label })) : (_jsx("span", { className: linkClassName, children: item.label })) }, item.href));
+            }) }) }));
 };
 export const MobileNav = ({ items, activeHref, variant = 'retro', linkComponent, className, }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -62,7 +69,12 @@ export const MobileNav = ({ items, activeHref, variant = 'retro', linkComponent,
             first.focus();
         }
     };
-    return (_jsxs("div", { className: cn('eidotter-nav eidotter-nav--mobile', variantClasses[variant], className), children: [_jsx("button", { ref: triggerRef, onClick: toggle, className: "eidotter-nav__menu-trigger", "aria-label": isOpen ? 'Close menu' : 'Open menu', "aria-expanded": isOpen, "aria-controls": "eidotter-mobile-nav-panel", children: "MENU" }), isOpen && (_jsx("div", { className: "eidotter-nav__overlay", onClick: close, "aria-hidden": "true" })), _jsxs("nav", { ref: panelRef, id: "eidotter-mobile-nav-panel", className: cn('eidotter-nav__panel', isOpen && 'eidotter-nav__panel--open'), "aria-label": "Mobile navigation", inert: !isOpen, onKeyDown: handlePanelKeyDown, children: [_jsx("div", { className: "eidotter-nav__panel-header", children: _jsx("button", { ref: closeButtonRef, onClick: close, className: "eidotter-nav__close", "aria-label": "Close menu", children: _jsx(Icon, { name: "Close", size: "S" }) }) }), _jsx("ul", { className: "eidotter-nav__list", children: items.map((item) => (_jsx("li", { className: "eidotter-nav__item", children: _jsx(LinkTag, { href: item.href, className: cn('eidotter-nav__link', activeHref === item.href && 'eidotter-nav__link--active'), "aria-current": activeHref === item.href ? 'page' : undefined, onClick: close, children: item.label }) }, item.href))) })] })] }));
+    return (_jsxs("div", { className: cn('eidotter-nav eidotter-nav--mobile', variantClasses[variant], className), children: [_jsx("button", { ref: triggerRef, onClick: toggle, className: "eidotter-nav__menu-trigger", "aria-label": isOpen ? 'Close menu' : 'Open menu', "aria-expanded": isOpen, "aria-controls": "eidotter-mobile-nav-panel", children: "MENU" }), isOpen && (_jsx("div", { className: "eidotter-nav__overlay", onClick: close, "aria-hidden": "true" })), _jsxs("nav", { ref: panelRef, id: "eidotter-mobile-nav-panel", className: cn('eidotter-nav__panel', isOpen && 'eidotter-nav__panel--open'), "aria-label": "Mobile navigation", inert: !isOpen, onKeyDown: handlePanelKeyDown, children: [_jsx("div", { className: "eidotter-nav__panel-header", children: _jsx("button", { ref: closeButtonRef, onClick: close, className: "eidotter-nav__close", "aria-label": "Close menu", children: _jsx(Icon, { name: "Close", size: "S" }) }) }), _jsx("ul", { className: "eidotter-nav__list", children: items.map((item) => {
+                            // Same guard as desktop — mobile panel is a second render path.
+                            const safeHref = isSafeHref(item.href) ? item.href : undefined;
+                            const linkClassName = cn('eidotter-nav__link', activeHref === item.href && 'eidotter-nav__link--active');
+                            return (_jsx("li", { className: "eidotter-nav__item", children: safeHref ? (_jsx(LinkTag, { href: safeHref, className: linkClassName, "aria-current": activeHref === item.href ? 'page' : undefined, onClick: close, children: item.label })) : (_jsx("span", { className: linkClassName, children: item.label })) }, item.href));
+                        }) })] })] }));
 };
 export const Nav = (props) => {
     return (_jsxs(_Fragment, { children: [_jsx(MobileNav, { ...props }), _jsx(DesktopNav, { ...props })] }));

package/dist/components/ProgressRing/components/ProgressRing.d.ts

@@ -24,6 +24,11 @@ export interface ProgressRingProps {
     className?: string;
     /** Accessible label for screen readers. */
     'aria-label'?: string;
+    /**
+     * Render as a purely visual ring: `aria-hidden`, no `progressbar` role and no
+     * aria value attributes. Use when a parent owns the semantics (e.g. Gauge).
+     */
+    decorative?: boolean;
 }
 /**
  * Blocky DOS-style progress ring: the arc is split into `segments` chunky

package/dist/components/ProgressRing/components/ProgressRing.js

@@ -9,7 +9,7 @@ const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
  * presentational and swappable. Ported from the Tracker habit app (DMNC-1040),
  * where it powers the hold-to-complete feedback ring.
  */
-export const ProgressRing = forwardRef(({ value = 0, max = 100, size = 64, thickness = 8, segments = 16, color, showLabel = false, glow = false, className, 'aria-label': ariaLabel, ...props }, ref) => {
+export const ProgressRing = forwardRef(({ value = 0, max = 100, size = 64, thickness = 8, segments = 16, color, showLabel = false, glow = false, decorative = false, className, 'aria-label': ariaLabel, ...props }, ref) => {
     const segmentCount = Math.max(1, Math.floor(segments));
     const fraction = clamp(max === 0 ? 0 : value / max, 0, 1);
     const filled = Math.floor(fraction * segmentCount);
@@ -29,6 +29,14 @@ export const ProgressRing = forwardRef(({ value = 0, max = 100, size = 64, thick
             // Draw exactly one segment arc: skip i*per, draw `dash`, then gap.
             strokeDasharray: `0 ${i * per} ${dash} ${circumference}`, className: cn('eidotter-progress-ring__seg', isFilled && 'eidotter-progress-ring__seg--filled') }, i));
     });
-    return (_jsxs("div", { ref: ref, className: cn('eidotter-progress-ring', glow && 'eidotter-progress-ring--glow', className), style: { width: size, height: size }, role: "progressbar", "aria-valuenow": quantizedPct, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": ariaLabel ?? `Progress: ${quantizedPct}%`, ...props, children: [_jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", focusable: "false", children: _jsx("g", { transform: `rotate(-90 ${cx} ${cy})`, children: arcs }) }), showLabel && (_jsxs("span", { className: "eidotter-progress-ring__label font-dos", children: [quantizedPct, "%"] }))] }));
+    return (_jsxs("div", { ref: ref, className: cn('eidotter-progress-ring', glow && 'eidotter-progress-ring--glow', className), style: { width: size, height: size }, ...(decorative
+            ? { 'aria-hidden': true }
+            : {
+                role: 'progressbar',
+                'aria-valuenow': quantizedPct,
+                'aria-valuemin': 0,
+                'aria-valuemax': 100,
+                'aria-label': ariaLabel ?? `Progress: ${quantizedPct}%`,
+            }), ...props, children: [_jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", focusable: "false", children: _jsx("g", { transform: `rotate(-90 ${cx} ${cy})`, children: arcs }) }), showLabel && (_jsxs("span", { className: "eidotter-progress-ring__label font-dos", children: [quantizedPct, "%"] }))] }));
 });
 ProgressRing.displayName = 'ProgressRing';

package/dist/components/RangeBar/components/RangeBar.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { HealthLabels, Tone } from '../../../utils/health/index.js';
+export interface RangeBarSegment {
+    /** Stable id, used by `target.segmentId`. */
+    id: string;
+    /** Segment name, shown in the legend and the accessible summary. */
+    label: string;
+    /** Share of the whole, 0-100. Non-finite counts as 0. */
+    share: number;
+    tone: Tone;
+    /** Fill pattern. Defaults to the pattern paired with `tone`. */
+    pattern?: 'solid' | 'dither' | 'hatch' | 'dotted' | 'none';
+    /** Bound text shown in the legend, e.g. "< 1". */
+    bound?: string;
+    /** Duration text shown in the legend, e.g. "14 h". */
+    duration?: string;
+}
+export interface RangeBarProps {
+    /** Ordered segments. Shares are normalised to 100. */
+    segments: RangeBarSegment[];
+    /** Stack direction (default vertical). */
+    orientation?: 'vertical' | 'horizontal';
+    /** Size variant. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Render the legend list (default true). */
+    showLegend?: boolean;
+    /** Target tick on one segment. `minShare` is the share the segment should reach; the tick sits at that point along the segment, clamped to its end. */
+    target?: {
+        segmentId: string;
+        minShare: number;
+        label: string;
+    };
+    /** Floor for a segment's flex weight so tiny segments stay visible (default 0.6). */
+    minSegmentShare?: number;
+    /** Inline percent shows only at or above this share (default 8). */
+    labelThreshold?: number;
+    /** BCP 47 locale for number formatting (default `en`). */
+    locale?: string;
+    /** Overrides for the built-in label text. */
+    labels?: Partial<HealthLabels>;
+    /** Additional CSS class name. */
+    className?: string;
+}
+/**
+ * Stacked range bar: ordered segments sized by share, an optional target tick
+ * and a legend. Percent text sits in a lane beside the bar, never on a
+ * patterned fill (R13). The bar is a single `img` with a composed summary.
+ * Presentational and hook-free, so it stays server-safe.
+ */
+export declare const RangeBar: React.ForwardRefExoticComponent<RangeBarProps & React.RefAttributes<HTMLDivElement>>;