eidotter 0.39.0 → 0.40.1

package/README.md

@@ -15,7 +15,7 @@
 [![license](https://img.shields.io/badge/license-CC--BY--NC--4.0-ffb000?labelColor=020003)](./LICENSE.md)
 [![React](https://img.shields.io/badge/React-18%20%7C%2019-ffb000?labelColor=020003)](https://react.dev/)
 
-**eiDotter** is a React component library that takes the DOS/CGA terminal aesthetic seriously: authentic 16-color palette, bitmap-accurate typography, phosphor glow physics, keyboard-first interactions. 40 components across forms, navigation, windowing, timelines, and terminal chrome — shipped as ES modules with a prebuilt stylesheet so consumers don't need Tailwind to use it.
+**eiDotter** is a React component library that takes the DOS/CGA terminal aesthetic seriously: authentic 16-color palette, bitmap-accurate typography, phosphor glow physics, keyboard-first interactions. 47 components across forms, navigation, windowing, timelines, health displays, and terminal chrome — shipped as ES modules with a prebuilt stylesheet so consumers don't need Tailwind to use it.
 
 → **[Storybook](https://cinimody.github.io/eiDotter/)**  ·  **[CHANGELOG](./CHANGELOG.md)**  ·  **[Accessibility](./ACCESSIBILITY.md)**  ·  **[Issues](https://github.com/CinimoDY/eiDotter/issues)**  ·  **[npm](https://www.npmjs.com/package/eidotter)**
 
@@ -111,7 +111,7 @@ for client apps and `'use client'` files.
 
 ## Components
 
-40 components across five families — [complete catalog in Storybook](https://cinimody.github.io/eiDotter/).
+47 components across six families — [complete catalog in Storybook](https://cinimody.github.io/eiDotter/).
 
 <details>
 <summary><strong>Windowing &amp; shell</strong> — Terminal, Modal, Lightbox, CommandPrompt, CmdPalette, Header, Footer, Nav, Brand</summary>
@@ -130,6 +130,23 @@ for client apps and `'use client'` files.
 
 </details>
 
+<details>
+<summary><strong>Health &amp; metabolism</strong> — Gauge, Meter, MeterGroup, RangeBar, SeriesBars, DecayStrip, VitalsStrip</summary>
+
+| Component | Purpose |
+|---|---|
+| `Gauge` | Quantised ring with a dominant percent, secondary value, tone, status, provenance tag and overflow marker |
+| `Meter` | Single fill bar (vertical / horizontal) with an optimal tick or range and pattern fills |
+| `MeterGroup` | Row or grid of Meters with an optional shared scale |
+| `RangeBar` | Stacked range bar of ordered segments with legend and target tick (time-in-range style) |
+| `SeriesBars` | Short bar series with a goal line and consumer-supplied threshold tones |
+| `DecayStrip` | On-board decay over time from consumer-supplied samples — now marker, dimmed future, provenance required |
+| `VitalsStrip` | Monitor-style vitals tiles with per-tile tone, status and paired values |
+
+All six are presentational and server-safe; bands, targets and clinical copy are consumer props (no medical defaults), and tone is never the only signal.
+
+</details>
+
 <details>
 <summary><strong>Content surfaces</strong> — Card, Accordion, Alert, Badge, Tag, Notification, Stat, Progress, Skeleton, Separator, Breadcrumb, LegalPage</summary>
 

package/dist/components/Chat/components/ChatInput.js

@@ -33,5 +33,5 @@ export const ChatInput = ({ onSend, prompt = '>', placeholder, disabled = false,
             textareaRef.current.focus();
         }
     };
-    return (_jsxs("div", { className: cn('flex items-start font-dos text-dos-text-md p-2 cursor-text', 'text-dos-text-brand', 'eidotter-chat-input', disabled && 'eidotter-chat-input--disabled', className), onClick: handleContainerClick, ...props, children: [_jsx("span", { className: "text-dos-text-brand mr-2 mt-0.5 whitespace-nowrap select-none", "aria-hidden": "true", children: prompt }), _jsxs("div", { className: "flex items-start flex-1 min-w-0", children: [_jsx("textarea", { ref: textareaRef, className: "eidotter-chat-input__textarea", value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": "Chat input" }), _jsx("span", { className: "eidotter-chat-input__cursor", "aria-hidden": "true", children: "\u2588" })] })] }));
+    return (_jsxs("div", { className: cn('flex items-start font-dos text-dos-text-md p-2 cursor-text', 'text-dos-text-brand', 'eidotter-chat-input', disabled && 'eidotter-chat-input--disabled', className), onClick: handleContainerClick, ...props, children: [_jsx("span", { className: "text-dos-text-brand mr-2 mt-0.5 whitespace-nowrap select-none", "aria-hidden": "true", children: prompt }), _jsxs("div", { className: "flex items-start flex-1 min-w-0", children: [_jsx("textarea", { ref: textareaRef, className: "eidotter-chat-input__textarea", value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": "Chat input" }), _jsx("span", { className: "eidotter-chat-input__cursor", "aria-hidden": "true", children: "_" })] })] }));
 };

package/dist/components/Chat/components/ChatMessage.d.ts

@@ -18,6 +18,6 @@ export interface ChatMessageProps {
  *
  * User messages display with a `>` prefix, assistant messages with `C:\>`,
  * and system messages appear dimmed. When `isStreaming` is true, a blinking
- * block cursor appears after the content.
+ * underscore cursor appears after the content.
  */
 export declare const ChatMessage: React.FC<ChatMessageProps & React.HTMLAttributes<HTMLDivElement>>;

package/dist/components/Chat/components/ChatMessage.js

@@ -10,9 +10,9 @@ const roleClasses = {
  *
  * User messages display with a `>` prefix, assistant messages with `C:\>`,
  * and system messages appear dimmed. When `isStreaming` is true, a blinking
- * block cursor appears after the content.
+ * underscore cursor appears after the content.
  */
 export const ChatMessage = ({ role, content, isStreaming = false, userPrefix = '>', assistantPrefix = 'C:\\>', className, ...props }) => {
     const prefix = role === 'user' ? userPrefix : role === 'assistant' ? assistantPrefix : '';
-    return (_jsxs("div", { className: cn('flex gap-2 font-dos text-dos-text-md leading-[1.4] py-1 whitespace-pre-wrap break-words', roleClasses[role], isStreaming && 'eidotter-chat-message--streaming', className), ...props, children: [prefix && (_jsx("span", { className: "shrink-0 select-none", "aria-hidden": "true", children: prefix })), _jsx("span", { className: "min-w-0", children: content }), isStreaming && (_jsx("span", { className: "eidotter-chat-message__cursor", "aria-hidden": "true", children: "\u2588" }))] }));
+    return (_jsxs("div", { className: cn('flex gap-2 font-dos text-dos-text-md leading-[1.4] py-1 whitespace-pre-wrap break-words', roleClasses[role], isStreaming && 'eidotter-chat-message--streaming', className), ...props, children: [prefix && (_jsx("span", { className: "shrink-0 select-none", "aria-hidden": "true", children: prefix })), _jsx("span", { className: "min-w-0", children: content }), isStreaming && (_jsx("span", { className: "eidotter-chat-message__cursor", "aria-hidden": "true", children: "_" }))] }));
 };

package/dist/components/CommandPrompt/components/CommandPrompt.js

@@ -30,5 +30,5 @@ export const CommandPrompt = ({ prompt = 'C:\\>', onCommand, autoFocus = false,
             inputRef.current.focus();
         }
     };
-    return (_jsxs("div", { className: `command-prompt ${disabled ? 'command-prompt--disabled' : ''} ${className}`.trim(), onClick: handleContainerClick, children: [_jsx("span", { className: "command-prompt__prompt", "aria-hidden": "true", children: prompt }), _jsxs("div", { className: "command-prompt__input-wrapper", children: [_jsx("input", { ref: inputRef, className: "command-prompt__input", value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, autoFocus: autoFocus, spellCheck: false, autoComplete: "off", autoCapitalize: "off", autoCorrect: "off", placeholder: placeholder, disabled: disabled, "aria-label": "Command input", size: value.length || placeholder?.length || 1 }), _jsx("span", { className: "command-prompt__cursor", "aria-hidden": "true", children: "\u2588" })] })] }));
+    return (_jsxs("div", { className: `command-prompt ${disabled ? 'command-prompt--disabled' : ''} ${className}`.trim(), onClick: handleContainerClick, children: [_jsx("span", { className: "command-prompt__prompt", "aria-hidden": "true", children: prompt }), _jsxs("div", { className: "command-prompt__input-wrapper", children: [_jsx("input", { ref: inputRef, className: "command-prompt__input", value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, autoFocus: autoFocus, spellCheck: false, autoComplete: "off", autoCapitalize: "off", autoCorrect: "off", placeholder: placeholder, disabled: disabled, "aria-label": "Command input", size: value.length || placeholder?.length || 1 }), _jsx("span", { className: "command-prompt__cursor", "aria-hidden": "true", children: "_" })] })] }));
 };

package/dist/components/DecayStrip/components/DecayStrip.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { HealthLabels, Provenance, Tone } from '../../../utils/health/index.js';
+import type { DecaySample, TimeInput } from './resample.js';
+export interface DecayStripItem {
+    /** Stable key for the row. */
+    id: string;
+    label: string;
+    /** Starting amount, e.g. 40. `null` renders as unknown. */
+    amount: number | null;
+    unit: string;
+    /** Share still active, 0..1. `null`, `NaN` and `Infinity` render as unknown. */
+    remainingShare: number | null;
+    /** Required: where the share comes from. */
+    provenance: Provenance;
+}
+export interface DecayStripProps {
+    /** What is still active. An empty list renders EmptyState; the strip still renders. */
+    items: DecayStripItem[];
+    /**
+     * Consumer-computed decay curve. `t` is epoch ms or an ISO string;
+     * `remaining` is a 0..1 share. eidotter does no absorption math (KTD5).
+     */
+    samples: DecaySample[];
+    /** Current time, epoch ms or ISO string. Pass it in; the strip never reads the clock. */
+    now: TimeInput;
+    /** Time span the strip covers. */
+    window: {
+        from: TimeInput;
+        to: TimeInput;
+    };
+    /** Required: where the samples come from. */
+    provenance: Provenance;
+    /** Size variant. `sm` renders items as a text list, `md` and `lg` as small Gauges. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Tone of the strip and the item Gauges. */
+    tone?: Tone;
+    /** Number of strip cells (default 24). */
+    columns?: number;
+    /** BCP 47 locale for numbers and times (default `en`). */
+    locale?: string;
+    /**
+     * IANA time zone for the from, to and now labels (e.g. `Europe/Berlin`).
+     * Defaults to the runtime zone, which on a server render is the server's.
+     */
+    timeZone?: string;
+    /** Overrides for the built-in label text. */
+    labels?: Partial<HealthLabels>;
+    /** Opt in to a polite live region and the now-marker pulse (R14). */
+    announce?: boolean;
+    /** Additional CSS class name. */
+    className?: string;
+}
+/**
+ * Horizontal time strip of what is still active (a meal, a dose): past cells
+ * as stepped block glyphs scaled by the consumer's `remaining` samples, future
+ * cells dimmed, and a now marker. Item rows sit above the strip.
+ * The strip is `role="img"` with a composed summary, so the glyphs are never
+ * the only reading. Presentational and hook-free, so it stays server-safe.
+ */
+export declare const DecayStrip: React.ForwardRefExoticComponent<DecayStripProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,99 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Gauge } from '../../Gauge/index.js';
+import { EmptyState } from '../../EmptyState/index.js';
+import { formatValue, isKnown, PLACEHOLDER, provenanceLabel, resolveLabels, } from '../../../utils/health/index.js';
+import { normaliseSamples, resample, toMs } from './resample.js';
+const sizeClasses = {
+    sm: 'eidotter-decay-strip--sm text-dos-text-xs',
+    md: 'eidotter-decay-strip--md text-dos-text-sm',
+    lg: 'eidotter-decay-strip--lg text-dos-text-md',
+};
+const toneClasses = {
+    neutral: 'eidotter-tone--neutral',
+    info: 'eidotter-tone--info',
+    success: 'eidotter-tone--success',
+    warning: 'eidotter-tone--warning',
+    critical: 'eidotter-tone--critical',
+};
+/** Progress glyph ladder, empty to full. */
+const LADDER = ['░', '▒', '▓', '█'];
+const MARKER = '│';
+const NO_DATA = '·';
+function glyph(value) {
+    if (value === null)
+        return NO_DATA;
+    const v = Math.min(1, Math.max(0, value));
+    return LADDER[Math.round(v * (LADDER.length - 1))];
+}
+/**
+ * Time from `now` until the curve reaches zero for good (the first zero
+ * sample after the last positive one), as locale text. Null when the curve
+ * never reaches zero or is already at zero before `now`.
+ */
+function timeToZero(samples, now, locale) {
+    const points = normaliseSamples(samples);
+    let lastPositive = -1;
+    points.forEach((p, i) => {
+        if (p.v > 0)
+            lastPositive = i;
+    });
+    const zero = points.slice(lastPositive + 1).find((p) => p.v <= 0);
+    if (!zero || !Number.isFinite(now) || zero.t < now)
+        return null;
+    const minutes = (zero.t - now) / 60000;
+    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'always' });
+    return minutes < 60
+        ? rtf.format(Math.round(minutes), 'minute')
+        : rtf.format(Math.round(minutes / 6) / 10, 'hour');
+}
+/**
+ * Horizontal time strip of what is still active (a meal, a dose): past cells
+ * as stepped block glyphs scaled by the consumer's `remaining` samples, future
+ * cells dimmed, and a now marker. Item rows sit above the strip.
+ * The strip is `role="img"` with a composed summary, so the glyphs are never
+ * the only reading. Presentational and hook-free, so it stays server-safe.
+ */
+export const DecayStrip = forwardRef(({ items, samples, now, window, provenance, size = 'md', tone = 'neutral', columns = 24, locale = 'en', timeZone, labels: labelOverrides, announce = false, className, ...props }, ref) => {
+    const labels = resolveLabels(labelOverrides);
+    const nowMs = toMs(now);
+    const cells = resample(samples, window, columns);
+    const time = new Intl.DateTimeFormat(locale, {
+        timeStyle: 'short',
+        ...(timeZone && { timeZone }),
+    });
+    const formatTime = (ms) => (Number.isFinite(ms) ? time.format(ms) : PLACEHOLDER);
+    const fromText = formatTime(toMs(window.from));
+    const toText = formatTime(toMs(window.to));
+    const tag = (p) => provenanceLabel(labels, p);
+    const zeroPercent = formatValue(0, { locale, percent: true }).text;
+    const rows = items.map((item) => {
+        const amountText = formatValue(item.amount, { locale, unit: item.unit }).text;
+        const share = isKnown(item.remainingShare) ? item.remainingShare : null;
+        const shareText = share === null
+            ? labels.unknown
+            : `${formatValue(share * 100, { locale, percent: true }).text} ${labels.remaining}`;
+        return { item, amountText, share, shareText, tagText: tag(item.provenance) };
+    });
+    const zeroText = timeToZero(samples, nowMs, locale);
+    const stripTag = tag(provenance);
+    const summary = [
+        ...rows.map((r) => `${r.item.label} ${r.amountText}: ${r.shareText}${r.tagText ? `, ${r.tagText}` : ''}`),
+        `${fromText}–${toText}`,
+        Number.isFinite(nowMs) && `${labels.now} ${time.format(nowMs)}`,
+        zeroText && `${zeroPercent} ${zeroText}`,
+        stripTag,
+    ]
+        .filter(Boolean)
+        .join('; ');
+    const compact = size === 'sm';
+    return (_jsxs("div", { ref: ref, className: cn('eidotter-decay-strip eidotter-health flex flex-col gap-2 w-full min-w-0 font-dos text-dos-text-brand', sizeClasses[size] ?? sizeClasses.md, toneClasses[tone], className), ...props, children: [items.length === 0 ? (_jsx(EmptyState, { title: `${zeroPercent} ${labels.remaining}`, className: "py-2" })) : (_jsx("ul", { className: cn('flex gap-2 min-w-0', compact ? 'flex-col' : 'flex-wrap'), children: rows.map((r) => (_jsx("li", { className: cn('eidotter-decay-strip__item min-w-0', compact ? 'flex flex-wrap items-baseline gap-2 tabular-nums' : 'flex-1'), children: compact ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate text-dos-text-accent", title: r.item.label, children: r.item.label }), _jsx("span", { children: r.amountText }), _jsx("span", { children: r.shareText }), r.tagText && (_jsx("span", { className: "eidotter-decay-strip__item-provenance border border-dos-border-brand px-1", children: r.tagText }))] })) : (_jsx(Gauge, { label: r.item.label, value: r.share === null ? null : r.share * 100, secondary: r.item.amount === null ? undefined : r.amountText, size: "sm", tone: tone, provenance: r.item.provenance, locale: locale, labels: labelOverrides })) }, r.item.id))) })), _jsxs("div", { className: "eidotter-decay-strip__strip flex items-center gap-2 min-w-0 tabular-nums", role: "img", "aria-label": summary, children: [_jsx("span", { className: "eidotter-decay-strip__from shrink-0", children: fromText }), _jsx("span", { className: "eidotter-decay-strip__cells flex-1 min-w-0 overflow-hidden whitespace-nowrap leading-none", style: tone === 'neutral' ? undefined : { color: 'var(--eidotter-fill)' }, children: cells.map((cell, i) => {
+                            const last = i === cells.length - 1;
+                            const isNow = nowMs >= cell.start && (nowMs < cell.end || (last && nowMs === cell.end));
+                            const future = !isNow && nowMs < cell.start && nowMs >= cells[0].start;
+                            const state = isNow ? 'now' : future ? 'future' : 'past';
+                            return (_jsx("span", { className: cn('eidotter-decay-strip__cell', `eidotter-decay-strip__cell--${state}`, future && 'opacity-50', isNow && 'text-dos-text-accent', isNow && announce && 'eidotter-health-pulse'), children: isNow ? MARKER : glyph(cell.value) }, i));
+                        }) }), _jsx("span", { className: "eidotter-decay-strip__to shrink-0", children: toText })] }), stripTag && (_jsx("span", { className: "eidotter-decay-strip__provenance self-start border border-dos-border-brand px-1", children: stripTag })), announce && (_jsx("p", { className: "sr-only", "aria-live": "polite", children: summary }))] }));
+});
+DecayStrip.displayName = 'DecayStrip';

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

@@ -0,0 +1,3 @@
+export { DecayStrip } from './DecayStrip.js';
+export type { DecayStripProps, DecayStripItem } from './DecayStrip.js';
+export type { DecaySample, TimeInput } from './resample.js';

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

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

package/dist/components/DecayStrip/components/resample.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Pure resampling for DecayStrip. No absorption or insulin math lives here
+ * (KTD5): the consumer supplies `remaining` samples and this only bins them.
+ */
+/** Epoch milliseconds, or an ISO 8601 string. */
+export type TimeInput = number | string;
+export interface DecaySample {
+    t: TimeInput;
+    /** Share still active, 0..1 (0 = gone, 1 = all of it). */
+    remaining: number;
+}
+export interface DecayCell {
+    /** Cell start, epoch ms, inclusive. */
+    start: number;
+    /** Cell end, epoch ms, exclusive (the last cell includes the window end). */
+    end: number;
+    /** Mean `remaining` of the samples in the span, the nearest earlier sample when empty, or null. */
+    value: number | null;
+}
+export declare function toMs(t: TimeInput): number;
+/** Finite, time-sorted `{t, v}` points (stable for equal times); non-finite samples are dropped. */
+export declare function normaliseSamples(samples: DecaySample[]): {
+    t: number;
+    v: number;
+}[];
+/**
+ * Split `window` into `columns` equal cells. A cell's value is the mean of the
+ * samples whose time falls in its span; an empty cell carries the value of
+ * the nearest earlier sample, or null when no earlier sample exists.
+ */
+export declare function resample(samples: DecaySample[], window: {
+    from: TimeInput;
+    to: TimeInput;
+}, columns: number): DecayCell[];

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

@@ -0,0 +1,44 @@
+/**
+ * Pure resampling for DecayStrip. No absorption or insulin math lives here
+ * (KTD5): the consumer supplies `remaining` samples and this only bins them.
+ */
+export function toMs(t) {
+    return typeof t === 'number' ? t : Date.parse(t);
+}
+/** Finite, time-sorted `{t, v}` points (stable for equal times); non-finite samples are dropped. */
+export function normaliseSamples(samples) {
+    return samples
+        .map((s) => ({ t: toMs(s.t), v: s.remaining }))
+        .filter((p) => Number.isFinite(p.t) && Number.isFinite(p.v))
+        .sort((a, b) => a.t - b.t);
+}
+/**
+ * Split `window` into `columns` equal cells. A cell's value is the mean of the
+ * samples whose time falls in its span; an empty cell carries the value of
+ * the nearest earlier sample, or null when no earlier sample exists.
+ */
+export function resample(samples, window, columns) {
+    const from = toMs(window.from);
+    const to = toMs(window.to);
+    const span = (to - from) / columns;
+    const points = normaliseSamples(samples);
+    const cells = [];
+    let next = 0;
+    let carry = null;
+    for (let i = 0; i < columns; i++) {
+        const start = from + i * span;
+        const end = i === columns - 1 ? to : from + (i + 1) * span;
+        const last = i === columns - 1;
+        while (next < points.length && points[next].t < start)
+            carry = points[next++].v;
+        let sum = 0;
+        let count = 0;
+        while (next < points.length && (points[next].t < end || (last && points[next].t === end))) {
+            sum += points[next].v;
+            carry = points[next++].v;
+            count++;
+        }
+        cells.push({ start, end, value: count > 0 ? sum / count : carry });
+    }
+    return cells;
+}

package/dist/components/DecayStrip/components/resample.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { DecayStrip } from './components/index.js';
+export type { DecayStripProps, DecayStripItem, DecaySample, TimeInput } from './components/index.js';

package/dist/components/DecayStrip/index.js

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

package/dist/components/Gauge/components/Gauge.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { Band, HealthLabels, Provenance, Tone, ValueStatus } from '../../../utils/health/index.js';
+export interface GaugeProps {
+    /** 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 of `value`, used only to flag mismatched band units in dev. */
+    unit?: string;
+    /** Absolute value text shown beneath the percent, e.g. "890 kcal". */
+    secondary?: string;
+    /** Size variant. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Explicit tone. Wins over `bands`. */
+    tone?: Tone;
+    /** Data status. */
+    status?: ValueStatus;
+    /** Tag shown for `estimated` and `modelled` values. */
+    provenance?: Provenance;
+    /** 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>;
+    /** Enable the phosphor glow on the ring. */
+    glow?: boolean;
+    /** Additional CSS class name. */
+    className?: string;
+    /** Replaces `label` in the composed accessible name. */
+    'aria-label'?: string;
+}
+/**
+ * Ring gauge: a quantised ProgressRing arc with a dominant percent, optional
+ * secondary value, tone, status, provenance tag and overflow marker.
+ * The root owns the `meter` semantics; the ring is decorative (KTD7).
+ * Presentational and hook-free, so it stays server-safe.
+ */
+export declare const Gauge: React.ForwardRefExoticComponent<GaugeProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ProgressRing } from '../../ProgressRing/index.js';
+import { Skeleton } from '../../Skeleton/index.js';
+import { formatValue, isKnown, provenanceLabel, resolveBand, resolveLabels, PLACEHOLDER, } from '../../../utils/health/index.js';
+const sizeClasses = {
+    sm: 'eidotter-gauge--sm text-dos-text-xs',
+    md: 'eidotter-gauge--md text-dos-text-sm',
+    lg: 'eidotter-gauge--lg text-dos-text-md',
+};
+const valueSizeClasses = {
+    sm: 'text-dos-text-sm',
+    md: 'text-dos-display-xs',
+    lg: 'text-dos-display-sm',
+};
+const ringSizes = { sm: 72, md: 104, lg: 136 };
+const toneClasses = {
+    neutral: 'eidotter-tone--neutral',
+    info: 'eidotter-tone--info',
+    success: 'eidotter-tone--success',
+    warning: 'eidotter-tone--warning',
+    critical: 'eidotter-tone--critical',
+};
+/** Segment rhythm per filled tone: SVG strokes cannot take gradient fills (KTD3). */
+const toneSegments = {
+    neutral: 16,
+    info: 12,
+    success: 16,
+    warning: 20,
+    critical: 24,
+};
+const statusClasses = {
+    ok: '',
+    loading: 'eidotter-gauge--loading',
+    empty: 'eidotter-gauge--empty',
+    stale: 'eidotter-gauge--stale',
+    unknown: 'eidotter-gauge--unknown',
+};
+/**
+ * Ring gauge: a quantised ProgressRing arc with a dominant percent, optional
+ * secondary value, tone, status, provenance tag and overflow marker.
+ * The root owns the `meter` semantics; the ring is decorative (KTD7).
+ * Presentational and hook-free, so it stays server-safe.
+ */
+export const Gauge = forwardRef(({ label, shortLabel, value, max = 100, unit, secondary, size = 'md', tone, status = 'ok', provenance, bands, locale = 'en', labels: labelOverrides, glow = false, className, 'aria-label': ariaLabel, ...props }, ref) => {
+    const labels = resolveLabels(labelOverrides);
+    const loading = status === 'loading';
+    const unknown = !isKnown(value) ||
+        !(max > 0) ||
+        !Number.isFinite(max) ||
+        status === 'empty' ||
+        status === 'unknown';
+    const pct = unknown ? 0 : (value / max) * 100;
+    const overflow = !unknown && value > max;
+    const resolved = resolveBand(unknown ? null : value, bands, unit);
+    const effectiveTone = tone ?? resolved.tone;
+    const valueText = unknown
+        ? PLACEHOLDER
+        : formatValue(pct, { locale, percent: true }).text;
+    const stale = status === 'stale' && !unknown;
+    const valuetext = [unknown || loading ? labels.unknown : valueText, stale && labels.stale]
+        .filter(Boolean)
+        .join(', ');
+    const name = `${ariaLabel ?? label}: ${valuetext}`;
+    const diameter = ringSizes[size] ?? ringSizes.md;
+    const tagText = provenanceLabel(labels, provenance);
+    return (_jsxs("div", { ref: ref, className: cn('eidotter-gauge eidotter-health flex flex-col items-center gap-1 w-full font-dos', sizeClasses[size] ?? sizeClasses.md, toneClasses[effectiveTone], statusClasses[status], className), style: { minWidth: diameter }, role: "meter", "aria-valuemin": 0, "aria-valuemax": unknown ? 100 : max, "aria-valuenow": unknown || loading ? 0 : Math.max(0, Math.min(value, max)), "aria-valuetext": valuetext, "aria-label": name, "aria-busy": loading || undefined, ...props, children: [_jsxs("div", { className: "relative inline-flex items-center justify-center", children: [_jsx(ProgressRing, { decorative: true, value: loading ? 0 : pct, max: 100, size: diameter, thickness: Math.round(diameter / 8), segments: toneSegments[effectiveTone] ?? 16, color: effectiveTone === 'neutral' ? undefined : 'var(--eidotter-fill)', glow: false, className: cn(glow && 'eidotter-health-glow') }), _jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center leading-none", children: loading ? (_jsx("div", { "aria-hidden": "true", className: "eidotter-gauge__skeleton w-full overflow-hidden", children: _jsx(Skeleton, { variant: "figure", lines: 2, animated: false }) })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('eidotter-gauge__value text-dos-text-accent tabular-nums', valueSizeClasses[size] ?? valueSizeClasses.md, stale && 'opacity-60'), children: valueText }), secondary && !unknown && (_jsx("span", { className: "eidotter-gauge__secondary text-dos-text-brand text-dos-text-xs tabular-nums", children: secondary }))] })) })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-1 text-dos-text-brand uppercase tracking-wider leading-tight max-w-full", children: [effectiveTone === 'critical' && (_jsx("span", { "aria-hidden": "true", className: "eidotter-gauge__glyph text-dos-text-error", children: "\u25B2" })), _jsxs("span", { className: "eidotter-gauge__label truncate", title: label, children: [_jsx("span", { className: "eidotter-gauge__label--full", children: label }), shortLabel && _jsx("span", { className: "eidotter-gauge__label--short", children: shortLabel })] }), overflow && (_jsx("span", { "aria-hidden": "true", className: "eidotter-gauge__overflow text-dos-text-warning", children: "+" })), tagText !== null && (_jsx("span", { className: "eidotter-gauge__provenance border border-dos-border-brand px-1 normal-case", children: tagText })), stale && _jsx("span", { className: "eidotter-gauge__stale normal-case", children: labels.stale })] }), resolved.label && (_jsx("span", { className: "eidotter-gauge__band text-dos-text-brand normal-case", children: resolved.label }))] }));
+});
+Gauge.displayName = 'Gauge';

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

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

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

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

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

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

package/dist/components/Gauge/index.js

@@ -0,0 +1 @@
+export { Gauge } from './components/index.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/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>>;