eidotter 0.38.1 → 0.40.0

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formatValue, resolveLabels } from '../../../utils/health/index.js';
+const orientationClasses = {
+    vertical: 'eidotter-range-bar--vertical',
+    horizontal: 'eidotter-range-bar--horizontal',
+};
+const sizeClasses = {
+    sm: 'eidotter-range-bar--sm text-dos-text-xs',
+    md: 'eidotter-range-bar--md text-dos-text-sm',
+    lg: 'eidotter-range-bar--lg text-dos-text-md',
+};
+/** Bar thickness and length per orientation and size. */
+const trackClasses = {
+    'vertical-sm': 'w-[1rem] h-[8rem]',
+    'vertical-md': 'w-[1.5rem] h-[12rem]',
+    'vertical-lg': 'w-[2rem] h-[16rem]',
+    'horizontal-sm': 'h-[1rem] w-full',
+    'horizontal-md': 'h-[1.5rem] w-full',
+    'horizontal-lg': 'h-[2rem] w-full',
+};
+const toneClasses = {
+    neutral: 'eidotter-tone--neutral',
+    info: 'eidotter-tone--info',
+    success: 'eidotter-tone--success',
+    warning: 'eidotter-tone--warning',
+    critical: 'eidotter-tone--critical',
+};
+/**
+ * Neutral hue, set inline. Filled tones take `--eidotter-fill` from the
+ * `.eidotter-tone--*` class in health-patterns.css (KTD3), which sets none for
+ * neutral, so a neutral fill (e.g. with a pattern override) still paints.
+ */
+const NEUTRAL_FILL = 'var(--color-semantic-text-muted)';
+/** Reserved id for the synthesized remainder, so it cannot collide with a consumer id. */
+const OTHER_ID = '__eidotter-other';
+// Neutral is intentionally unpatterned here (unlike Meter, which reuses solid).
+const tonePatterns = {
+    neutral: 'none',
+    info: 'solid',
+    success: 'dither',
+    warning: 'hatch',
+    critical: 'dotted',
+};
+const patternClasses = {
+    none: 'eidotter-fill--none',
+    solid: 'eidotter-fill--solid',
+    dither: 'eidotter-fill--dither',
+    hatch: 'eidotter-fill--hatch',
+    dotted: 'eidotter-fill--dotted',
+};
+const resolveItem = (s, weight) => {
+    const toneKey = toneClasses[s.tone] ? s.tone : 'neutral';
+    const pattern = s.pattern ?? tonePatterns[toneKey];
+    return { ...s, weight, toneKey, patternClass: patternClasses[pattern] ?? patternClasses.solid };
+};
+const clean = (n) => Math.round(n * 1e6) / 1e6;
+/**
+ * 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 const RangeBar = forwardRef(({ segments, orientation = 'vertical', size = 'md', showLegend = true, target, minSegmentShare = 0.6, labelThreshold = 8, locale = 'en', labels: labelOverrides, className, ...props }, ref) => {
+    const labels = resolveLabels(labelOverrides);
+    const shares = segments.map((s) => (Number.isFinite(s.share) && s.share > 0 ? s.share : 0));
+    const sum = clean(shares.reduce((a, b) => a + b, 0));
+    const items = segments.map((s, i) => resolveItem(s, clean(sum > 100 ? (shares[i] / sum) * 100 : shares[i])));
+    if (sum < 100 && !segments.some((s) => s.id === OTHER_ID)) {
+        items.push(resolveItem({ id: OTHER_ID, label: labels.other, share: 0, tone: 'neutral' }, clean(100 - sum)));
+    }
+    const pct = (n) => formatValue(n, { locale, percent: true }).text;
+    const summary = items.map((s) => `${s.label} ${pct(s.weight)}`).join(', ');
+    return (_jsxs("div", { ref: ref, className: cn('eidotter-range-bar eidotter-health flex gap-3 font-dos', orientation === 'horizontal' ? 'flex-col' : 'flex-row items-start', orientationClasses[orientation] ?? orientationClasses.vertical, sizeClasses[size] ?? sizeClasses.md, className), ...props, children: [_jsxs("div", { className: cn('eidotter-range-bar__track flex gap-1', orientation === 'horizontal' ? 'flex-col w-full' : 'flex-row'), children: [_jsx("div", { role: "img", "aria-label": summary, className: cn('eidotter-range-bar__bar flex shrink-0', orientation === 'horizontal' ? 'flex-row' : 'flex-col', trackClasses[`${orientation}-${size}`] ?? trackClasses['vertical-md']), children: items.map((s) => {
+                            const isTarget = target?.segmentId === s.id;
+                            return (_jsx("div", { "data-segment-id": s.id, className: cn('eidotter-range-bar__seg relative', toneClasses[s.toneKey], s.patternClass), style: {
+                                    flexGrow: Math.max(s.weight, minSegmentShare),
+                                    flexBasis: 0,
+                                    ...(s.toneKey === 'neutral' && { '--eidotter-fill': NEUTRAL_FILL }),
+                                }, children: isTarget && target && (_jsx("span", { "aria-hidden": "true", className: "eidotter-range-bar__target absolute", style: {
+                                        [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-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) })), 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", children: items.map((s) => {
+                    return (_jsxs("li", { className: "eidotter-range-bar__row grid grid-cols-[auto_1fr_auto_auto] items-center 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: {
+                                    ...(s.toneKey === 'neutral' && { '--eidotter-fill': NEUTRAL_FILL }),
+                                } }), _jsxs("span", { className: "text-dos-text-primary truncate", title: s.label, children: [s.label, s.bound && _jsxs("span", { className: "text-dos-text-muted", 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));
+                }) }))] }));
+});
+RangeBar.displayName = 'RangeBar';

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

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

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

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

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

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

package/dist/components/RangeBar/index.js

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

package/dist/components/SeriesBars/components/SeriesBars.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { HealthLabels, Tone } from '../../../utils/health/index.js';
+export interface SeriesBarsPoint {
+    /** Tick and table label. */
+    label: string;
+    /** `null`, `NaN` and `Infinity` render as a placeholder gap. */
+    value: number | null;
+}
+export interface SeriesBarsProps {
+    /** Short series, one vertical bar each. */
+    points: SeriesBarsPoint[];
+    /** Value at full bar height. Defaults to the largest finite value (or goal). */
+    max?: number;
+    /** Goal value, drawn as a line. */
+    goal?: number;
+    /** Text shown on the goal line. */
+    goalLabel?: string;
+    /**
+     * Consumer-supplied tone thresholds. A point takes the tone of the entry with
+     * the largest `from` that is at or below its value. Without this prop, points
+     * at or above `goal` are success and the rest neutral.
+     */
+    toneFor?: {
+        from: number;
+        tone: Tone;
+    }[];
+    /** Label every n-th bar (default 1). */
+    tickEvery?: number;
+    /** Size variant. */
+    size?: 'sm' | 'md' | 'lg';
+    /** 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;
+}
+/**
+ * Short series as vertical bars with an optional goal line. The plot is one
+ * `img` with a composed summary; a visually hidden table beside it carries the
+ * values for assistive tech. Presentational and hook-free, so server-safe.
+ */
+export declare const SeriesBars: React.ForwardRefExoticComponent<SeriesBarsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/SeriesBars/components/SeriesBars.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formatValue, isKnown, resolveLabels, PLACEHOLDER } from '../../../utils/health/index.js';
+const sizeClasses = {
+    sm: 'eidotter-series-bars--sm text-dos-text-xs',
+    md: 'eidotter-series-bars--md text-dos-text-sm',
+    lg: 'eidotter-series-bars--lg text-dos-text-md',
+};
+const plotClasses = {
+    sm: 'h-[6rem]',
+    md: 'h-[10rem]',
+    lg: 'h-[14rem]',
+};
+const toneClasses = {
+    neutral: 'eidotter-tone--neutral',
+    info: 'eidotter-tone--info',
+    success: 'eidotter-tone--success',
+    warning: 'eidotter-tone--warning',
+    critical: 'eidotter-tone--critical',
+};
+/**
+ * Neutral hue, set inline. Filled tones take `--eidotter-fill` from the
+ * `.eidotter-tone--*` class in health-patterns.css (KTD3), which sets none for
+ * neutral, so a neutral fill (e.g. with a pattern override) still paints.
+ */
+const NEUTRAL_FILL = 'var(--color-semantic-text-muted)';
+// Neutral is intentionally unpatterned here (unlike Meter, which reuses solid).
+const patternClasses = {
+    neutral: 'eidotter-fill--none',
+    info: 'eidotter-fill--solid',
+    success: 'eidotter-fill--dither',
+    warning: 'eidotter-fill--hatch',
+    critical: 'eidotter-fill--dotted',
+};
+/**
+ * Short series as vertical bars with an optional goal line. The plot is one
+ * `img` with a composed summary; a visually hidden table beside it carries the
+ * values for assistive tech. Presentational and hook-free, so server-safe.
+ */
+export const SeriesBars = forwardRef(({ points, max, goal, goalLabel, toneFor, tickEvery = 1, size = 'md', locale = 'en', labels: labelOverrides, className, ...props }, ref) => {
+    const labels = resolveLabels(labelOverrides);
+    const known = points.map((p) => p.value).filter(isKnown);
+    const top = max ?? Math.max(...known, goal ?? 0, 0);
+    const scale = top > 0 ? top : 1;
+    const thresholds = toneFor ?? (goal !== undefined ? [{ from: goal, tone: 'success' }] : []);
+    const toneOf = (v) => thresholds
+        .filter((t) => v >= t.from)
+        .reduce((best, t) => (!best || t.from > best.from ? t : best), undefined)?.tone ?? 'neutral';
+    const text = (v) => (isKnown(v) ? formatValue(v, { locale }).text : labels.unknown);
+    const summary = [
+        ...points.map((p) => `${p.label} ${text(p.value)}`),
+        ...(goal !== undefined ? [`${goalLabel ?? ''} ${text(goal)}`.trim()] : []),
+    ].join(', ');
+    return (_jsxs("div", { ref: ref, className: cn('eidotter-series-bars eidotter-health relative font-dos', sizeClasses[size] ?? sizeClasses.md, className), ...props, children: [_jsxs("div", { role: "img", "aria-label": summary, children: [_jsxs("div", { className: cn('eidotter-series-bars__plot relative', plotClasses[size] ?? plotClasses.md), children: [goal !== undefined && (_jsx("div", { className: "eidotter-series-bars__goal absolute inset-x-0", style: { bottom: `${(Math.min(goal, scale) / scale) * 100}%` }, children: goalLabel && (_jsx("span", { className: "eidotter-series-bars__goal-tag text-dos-text-brand", children: goalLabel })) })), _jsx("div", { className: "eidotter-series-bars__cols flex items-end gap-1 h-full", children: points.map((p, i) => {
+                                    const v = p.value;
+                                    const tone = isKnown(v) ? toneOf(v) : 'neutral';
+                                    return (_jsx("div", { className: "eidotter-series-bars__col flex flex-col justify-end flex-1 min-w-0 h-full", title: `${p.label}: ${text(v)}`, children: isKnown(v) ? (_jsx("div", { className: cn('eidotter-series-bars__bar w-full', toneClasses[tone], patternClasses[tone]), style: {
+                                                height: `${(Math.min(Math.max(v, 0), scale) / scale) * 100}%`,
+                                                ...(tone === 'neutral' && { '--eidotter-fill': NEUTRAL_FILL }),
+                                            } })) : (_jsx("span", { className: "eidotter-series-bars__gap text-dos-text-muted text-center", children: PLACEHOLDER })) }, i));
+                                }) })] }), _jsx("div", { "aria-hidden": "true", className: "flex gap-1 text-dos-text-muted", children: points.map((p, i) => (_jsx("span", { className: "eidotter-series-bars__tick flex-1 min-w-0 truncate text-center tabular-nums", children: i % Math.max(tickEvery, 1) === 0 ? p.label : '' }, i))) })] }), _jsx("table", { className: "sr-only", children: _jsxs("tbody", { children: [points.map((p, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: p.label }), _jsx("td", { children: text(p.value) })] }, i))), goal !== undefined && (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: goalLabel }), _jsx("td", { children: text(goal) })] }))] }) })] }));
+});
+SeriesBars.displayName = 'SeriesBars';

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

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

package/dist/components/SeriesBars/components/index.js

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

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

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

package/dist/components/SeriesBars/index.js

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

package/dist/components/Stat/components/Stat.d.ts

@@ -10,6 +10,12 @@ export interface StatProps {
     trendValue?: string;
     /** Size variant. Use sm/md/lg — small/medium/large are @deprecated aliases. */
     size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+    /** Optional unit rendered after the value (e.g., "kg") */
+    unit?: string;
+    /** Optional muted note rendered below the value */
+    note?: string;
+    /** Optional target text rendered below the value; the consumer supplies the copy */
+    target?: string;
     /** Whether to animate value changes with a text scramble effect */
     scramble?: boolean;
     /** Optional CSS class name */

package/dist/components/Stat/components/Stat.js

@@ -30,13 +30,13 @@ const trendLabels = {
  * DOS-styled Stat component for displaying metrics with optional trends.
  * Pure presentational — no React Aria needed.
  */
-export const Stat = forwardRef(({ label, value, trend, trendValue, size = 'md', scramble = false, className, ...props }, ref) => {
+export const Stat = forwardRef(({ label, value, trend, trendValue, size = 'md', scramble = false, unit, note, target, className, ...props }, ref) => {
     const { text: scrambledValue } = useTextScramble(String(value), {
         speed: 30,
         enabled: scramble,
     });
     const displayValue = scramble ? scrambledValue : String(value);
     const s = sizeClasses[size] || sizeClasses.md;
-    return (_jsxs("div", { ref: ref, className: cn('flex flex-col font-dos', 'eidotter-stat', s.root, className), ...props, children: [_jsx("span", { className: cn('text-dos-text-brand uppercase tracking-wider leading-tight', s.label), children: label }), _jsx("span", { className: cn('text-dos-text-accent font-bold leading-none tabular-nums', s.value), children: displayValue }), trend && (_jsxs("span", { className: cn('inline-flex items-center gap-1 leading-none', trendColorClasses[trend], s.trend), "aria-label": `Trend: ${trendLabels[trend]}${trendValue ? `, ${trendValue}` : ''}`, children: [_jsx("span", { className: "text-[0.8em]", "aria-hidden": "true", children: trendIcons[trend] }), trendValue && (_jsx("span", { className: "tabular-nums", children: trendValue }))] }))] }));
+    return (_jsxs("div", { ref: ref, className: cn('flex flex-col font-dos', 'eidotter-stat', s.root, className), ...props, children: [_jsx("span", { className: cn('text-dos-text-brand uppercase tracking-wider leading-tight', s.label), children: label }), _jsxs("span", { className: cn('text-dos-text-accent font-bold leading-none tabular-nums', s.value), children: [displayValue, unit && (_jsx("span", { className: "eidotter-stat__unit ml-1 text-[0.5em] font-normal text-dos-text-brand", children: unit }))] }), note && (_jsx("span", { className: `eidotter-stat__note text-dos-text-muted leading-tight ${s.trend}`, children: note })), target && (_jsx("span", { className: `eidotter-stat__target text-dos-text-brand leading-tight ${s.trend}`, children: target })), trend && (_jsxs("span", { className: cn('inline-flex items-center gap-1 leading-none', trendColorClasses[trend], s.trend), "aria-label": `Trend: ${trendLabels[trend]}${trendValue ? `, ${trendValue}` : ''}`, children: [_jsx("span", { className: "text-[0.8em]", "aria-hidden": "true", children: trendIcons[trend] }), trendValue && (_jsx("span", { className: "tabular-nums", children: trendValue }))] }))] }));
 });
 Stat.displayName = 'Stat';

package/dist/components/TimelineFeed/components/TimelineFeed.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { NavProps } from '../../Nav/index.js';
+import type { TimelineEntryData } from '../../TimelineContainer/index.js';
+/** A filterable category: a dot/chip colour and a human label. */
+export interface TimelineCategory {
+    key: string;
+    label: string;
+    /** CSS colour for the dot + active chip. Omit → amber (currentColor). */
+    color?: string;
+}
+export interface TimelineFeedProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Entries to list, newest-first is the consumer's responsibility. */
+    entries: TimelineEntryData[];
+    /** Categories for the filter chip row + dot colours. Omit to hide the filter. */
+    categories?: TimelineCategory[];
+    /** Resolve an entry's category key. Default: `entry.tags?.[0]`. */
+    categoryOf?: (entry: TimelineEntryData) => string | undefined;
+    /** Controlled active category (null = ALL). Leave undefined for uncontrolled. */
+    activeCategory?: string | null;
+    /** Uncontrolled initial category. Default null (ALL). */
+    defaultCategory?: string | null;
+    /** Fired when the filter changes. */
+    onCategoryChange?: (key: string | null) => void;
+    /** Custom link component for entry titles that carry an `article` href. */
+    linkComponent?: NavProps['linkComponent'];
+}
+/**
+ * TimelineFeed — a dense, product-grade feed (the "J" layout): each row is a
+ * category dot · neutral date · title · a delicate outlined kind-tag, threaded
+ * by a thin amber spine. An optional category chip row culls the list
+ * ("navigation becomes a course through time"). Amber-mono; category colour
+ * lives only in the small dots + the active chip.
+ *
+ * Presentational — shares the `TimelineEntryData` model with TimelineContainer;
+ * the consumer owns ordering and data.
+ */
+export declare function TimelineFeed({ entries, categories, categoryOf, activeCategory, defaultCategory, onCategoryChange, linkComponent, className, ...rest }: TimelineFeedProps): React.JSX.Element;

package/dist/components/TimelineFeed/components/TimelineFeed.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { isSafeHref } from '../../../utils/isSafeHref.js';
+const KIND_LABEL = {
+    milestone: 'milestone',
+    project: 'project',
+    event: 'event',
+};
+const defaultCategoryOf = (entry) => entry.tags?.[0];
+/** Read an entry's optional read-more href (only the `article` kind has one). */
+function entryHref(entry) {
+    return entry.kind === 'article' ? entry.href : undefined;
+}
+/**
+ * TimelineFeed — a dense, product-grade feed (the "J" layout): each row is a
+ * category dot · neutral date · title · a delicate outlined kind-tag, threaded
+ * by a thin amber spine. An optional category chip row culls the list
+ * ("navigation becomes a course through time"). Amber-mono; category colour
+ * lives only in the small dots + the active chip.
+ *
+ * Presentational — shares the `TimelineEntryData` model with TimelineContainer;
+ * the consumer owns ordering and data.
+ */
+export function TimelineFeed({ entries, categories, categoryOf = defaultCategoryOf, activeCategory, defaultCategory = null, onCategoryChange, linkComponent, className, ...rest }) {
+    const LinkTag = linkComponent ?? 'a';
+    const isControlled = activeCategory !== undefined;
+    const [internal, setInternal] = useState(defaultCategory);
+    const active = isControlled ? activeCategory : internal;
+    const setActive = (key) => {
+        if (!isControlled)
+            setInternal(key);
+        onCategoryChange?.(key);
+    };
+    const colorByKey = useMemo(() => {
+        const map = new Map();
+        categories?.forEach((c) => map.set(c.key, c.color));
+        return map;
+    }, [categories]);
+    const dateFormatter = useMemo(() => new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: 'numeric' }), []);
+    const formatDate = (iso) => {
+        try {
+            return dateFormatter.format(new Date(iso));
+        }
+        catch {
+            return iso;
+        }
+    };
+    const visible = useMemo(() => (active ? entries.filter((e) => categoryOf(e) === active) : entries), [active, entries, categoryOf]);
+    return (_jsxs("section", { className: cn('eidotter-feed font-dos', className), ...rest, children: [categories && categories.length > 0 && (_jsxs("div", { className: "eidotter-feed__filter", role: "group", "aria-label": "Filter by category", children: [_jsxs("button", { type: "button", className: cn('eidotter-feed__chip', active === null && 'eidotter-feed__chip--active'), "aria-pressed": active === null, onClick: () => setActive(null), children: ["all", active !== null && _jsxs("span", { className: "eidotter-feed__count", children: [" \u00B7 ", visible.length, " of ", entries.length] })] }), categories.map((c) => (_jsxs("button", { type: "button", className: cn('eidotter-feed__chip', active === c.key && 'eidotter-feed__chip--active'), "aria-pressed": active === c.key, onClick: () => setActive(c.key), style: c.color ? { '--eidotter-feed-chip': c.color } : undefined, children: [_jsx("span", { className: "eidotter-feed__chip-dot", "aria-hidden": "true" }), c.label] }, c.key)))] })), _jsx("ol", { className: "eidotter-feed__list", "aria-label": rest['aria-label'] ?? 'Timeline feed', children: visible.map((entry) => {
+                    const catKey = categoryOf(entry);
+                    const dotColor = catKey ? colorByKey.get(catKey) : undefined;
+                    const href = entryHref(entry);
+                    const safeHref = href && isSafeHref(href) ? href : undefined;
+                    const kind = entry.type ? KIND_LABEL[entry.type] : undefined;
+                    return (_jsxs("li", { className: "eidotter-feed__row", children: [_jsx("span", { className: "eidotter-feed__dot", "aria-hidden": "true", style: dotColor ? { '--eidotter-feed-dot': dotColor } : undefined }), _jsx("time", { className: "eidotter-feed__date", dateTime: entry.date, children: formatDate(entry.date) }), _jsx("span", { className: "eidotter-feed__title", children: safeHref ? (_jsx(LinkTag, { href: safeHref, className: "eidotter-feed__title-link", children: entry.title })) : (entry.title) }), kind && _jsx("span", { className: "eidotter-feed__kind", children: kind })] }, entry.id));
+                }) })] }));
+}

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

@@ -0,0 +1,2 @@
+export { TimelineFeed } from './TimelineFeed.js';
+export type { TimelineFeedProps, TimelineCategory } from './TimelineFeed.js';

package/dist/components/TimelineFeed/components/index.js

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

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

@@ -0,0 +1,2 @@
+export { TimelineFeed } from './components/index.js';
+export type { TimelineFeedProps, TimelineCategory } from './components/index.js';

package/dist/components/TimelineFeed/index.js

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

package/dist/components/TimelinePage/components/TimelinePage.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { NavProps } from '../../Nav/index.js';
+import type { TimelineCategory } from '../../TimelineFeed/index.js';
+import type { TimelineEntryData } from '../../TimelineContainer/index.js';
+export interface TimelinePageProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Entries. Grouped by year and shown newest-first automatically. */
+    entries: TimelineEntryData[];
+    /** Categories for the filter chip row. Omit to hide the filter. */
+    categories?: TimelineCategory[];
+    /** Resolve an entry's category key. Default: `entry.tags?.[0]`. */
+    categoryOf?: (entry: TimelineEntryData) => string | undefined;
+    /** Resolve an entry's description line. Default: an `article` entry's `summary`. */
+    descriptionOf?: (entry: TimelineEntryData) => string | undefined;
+    /** Controlled active category (null = ALL). */
+    activeCategory?: string | null;
+    /** Uncontrolled initial category. Default null (ALL). */
+    defaultCategory?: string | null;
+    onCategoryChange?: (key: string | null) => void;
+    /** Brand slot at the start of the filter row (e.g. a `<Mark/>`). */
+    brand?: React.ReactNode;
+    /** Show the right-hand hover-preview panel. Default true. */
+    preview?: boolean;
+    /** Custom link component for entry titles that carry an `article` href. */
+    linkComponent?: NavProps['linkComponent'];
+}
+/**
+ * TimelinePage — a Bret-Victor-style blog timeline (the "K2" layout). A filter
+ * chip row (with an optional Mark brand slot) sits above a year-grouped
+ * timeline: an AMBER-ONLY spine + dots (never category-rainbow), neutral grey
+ * dates, big titles and a description line — content leads. A right-hand panel
+ * previews the focused entry's thumbnail on hover/focus.
+ *
+ * Presentational; shares the `TimelineEntryData` model with TimelineContainer.
+ */
+export declare function TimelinePage({ entries, categories, categoryOf, descriptionOf, activeCategory, defaultCategory, onCategoryChange, brand, preview, linkComponent, className, ...rest }: TimelinePageProps): React.JSX.Element;

package/dist/components/TimelinePage/components/TimelinePage.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { isSafeHref } from '../../../utils/isSafeHref.js';
+const defaultCategoryOf = (entry) => entry.tags?.[0];
+const defaultDescriptionOf = (entry) => entry.kind === 'article' ? entry.summary : undefined;
+function previewImage(entry) {
+    if (entry.kind === 'image')
+        return entry.image;
+    if (entry.kind === 'gallery')
+        return entry.images[0];
+    if (entry.kind === 'article')
+        return entry.images?.[0];
+    return undefined;
+}
+function entryHref(entry) {
+    return entry.kind === 'article' ? entry.href : undefined;
+}
+function yearOf(iso) {
+    const y = new Date(iso).getFullYear();
+    return Number.isNaN(y) ? iso.slice(0, 4) : String(y);
+}
+/**
+ * TimelinePage — a Bret-Victor-style blog timeline (the "K2" layout). A filter
+ * chip row (with an optional Mark brand slot) sits above a year-grouped
+ * timeline: an AMBER-ONLY spine + dots (never category-rainbow), neutral grey
+ * dates, big titles and a description line — content leads. A right-hand panel
+ * previews the focused entry's thumbnail on hover/focus.
+ *
+ * Presentational; shares the `TimelineEntryData` model with TimelineContainer.
+ */
+export function TimelinePage({ entries, categories, categoryOf = defaultCategoryOf, descriptionOf = defaultDescriptionOf, activeCategory, defaultCategory = null, onCategoryChange, brand, preview = true, linkComponent, className, ...rest }) {
+    const LinkTag = linkComponent ?? 'a';
+    const isControlled = activeCategory !== undefined;
+    const [internal, setInternal] = useState(defaultCategory);
+    const active = isControlled ? activeCategory : internal;
+    const setActive = (key) => {
+        if (!isControlled)
+            setInternal(key);
+        onCategoryChange?.(key);
+    };
+    const dateFormatter = useMemo(() => new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric' }), []);
+    const formatDate = (iso) => {
+        try {
+            return dateFormatter.format(new Date(iso));
+        }
+        catch {
+            return iso;
+        }
+    };
+    const visible = useMemo(() => (active ? entries.filter((e) => categoryOf(e) === active) : entries), [active, entries, categoryOf]);
+    const groups = useMemo(() => {
+        const byYear = new Map();
+        for (const e of visible) {
+            const y = yearOf(e.date);
+            const list = byYear.get(y);
+            if (list)
+                list.push(e);
+            else
+                byYear.set(y, [e]);
+        }
+        return Array.from(byYear.entries())
+            .map(([year, es]) => ({ year, entries: [...es].sort((a, b) => b.date.localeCompare(a.date)) }))
+            .sort((a, b) => b.year.localeCompare(a.year));
+    }, [visible]);
+    const [focusedId, setFocusedId] = useState(null);
+    const focused = useMemo(() => visible.find((e) => e.id === focusedId) ?? visible[0], [visible, focusedId]);
+    const focusedImage = focused ? previewImage(focused) : undefined;
+    return (_jsxs("section", { className: cn('eidotter-blog font-dos', className), ...rest, children: [(brand || (categories && categories.length > 0)) && (_jsxs("div", { className: "eidotter-blog__filter", children: [brand && _jsx("div", { className: "eidotter-blog__brand", children: brand }), categories && categories.length > 0 && (_jsxs("div", { className: "eidotter-blog__chips", role: "group", "aria-label": "Filter by category", children: [_jsx("button", { type: "button", className: cn('eidotter-blog__chip', active === null && 'eidotter-blog__chip--active'), "aria-pressed": active === null, onClick: () => setActive(null), children: "all" }), categories.map((c) => (_jsxs("button", { type: "button", className: cn('eidotter-blog__chip', active === c.key && 'eidotter-blog__chip--active'), "aria-pressed": active === c.key, onClick: () => setActive(c.key), style: c.color ? { '--eidotter-blog-chip': c.color } : undefined, children: [_jsx("span", { className: "eidotter-blog__chip-dot", "aria-hidden": "true" }), c.label] }, c.key))), active !== null && (_jsxs("span", { className: "eidotter-blog__count", children: [visible.length, " of ", entries.length] }))] }))] })), _jsxs("div", { className: "eidotter-blog__body", children: [_jsxs("div", { className: "eidotter-blog__timeline", children: [groups.map((group) => (_jsxs("div", { className: "eidotter-blog__year-group", children: [_jsx("h2", { className: "eidotter-blog__year", children: group.year }), _jsx("ol", { className: "eidotter-blog__entries", children: group.entries.map((entry) => {
+                                            const href = entryHref(entry);
+                                            const safeHref = href && isSafeHref(href) ? href : undefined;
+                                            const desc = descriptionOf(entry);
+                                            const focus = () => setFocusedId(entry.id);
+                                            return (_jsxs("li", { className: cn('eidotter-blog__entry', focused?.id === entry.id && 'eidotter-blog__entry--focused'), onMouseEnter: focus, onFocus: focus, children: [_jsx("span", { className: "eidotter-blog__dot", "aria-hidden": "true" }), _jsx("time", { className: "eidotter-blog__date", dateTime: entry.date, children: formatDate(entry.date) }), _jsx("h3", { className: "eidotter-blog__title", children: safeHref ? (_jsx(LinkTag, { href: safeHref, className: "eidotter-blog__title-link", children: entry.title })) : (entry.title) }), desc && _jsx("p", { className: "eidotter-blog__desc", children: desc })] }, entry.id));
+                                        }) })] }, group.year))), groups.length === 0 && _jsx("p", { className: "eidotter-blog__empty", children: "C:\\LOG> No entries." })] }), preview && (_jsx("aside", { className: "eidotter-blog__preview", "aria-hidden": "true", children: _jsxs("div", { className: "eidotter-blog__preview-inner", children: [focusedImage ? (_jsx("img", { className: "eidotter-blog__preview-img", src: focusedImage.thumbnail ?? focusedImage.src, alt: "", loading: "lazy" })) : (_jsx("div", { className: "eidotter-blog__preview-placeholder", children: "\u2593\u2592\u2591 \u00B7 \u2591\u2592\u2593" })), focused && (_jsx("div", { className: "eidotter-blog__preview-caption", children: _jsx("span", { className: "eidotter-blog__preview-title", children: focused.title }) }))] }) }))] })] }));
+}

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

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

package/dist/components/TimelinePage/components/index.js

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

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

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

package/dist/components/TimelinePage/index.js

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

package/dist/components/VitalsStrip/components/VitalsStrip.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { Band, HealthLabels, Tone, ValueStatus } from '../../../utils/health/index.js';
+export interface VitalTile {
+    /** Stable key for the tile. */
+    id: string;
+    /** Tile label. Always part of the accessible name. */
+    label: string;
+    /** Single value. `null`, `NaN` and `Infinity` render as offline or unknown. Ignored when `pair` is set. */
+    value: number | null;
+    /** Unit shown after the value. */
+    unit?: string;
+    /** Muted line below the value, e.g. a reading time. */
+    secondary?: string;
+    /** Paired reading rendered as "a/b", e.g. [124, 78]. */
+    pair?: [number, number];
+    /** Explicit tone. Wins over `bands`. */
+    tone?: Tone;
+    /** Data status. */
+    status?: ValueStatus;
+    /** Consumer-supplied bands, resolved on the raw value (or the first pair part). */
+    bands?: Band[];
+}
+export interface VitalsStripProps {
+    /** Tiles to render, in order. */
+    tiles: VitalTile[];
+    /** Size variant. */
+    size?: 'sm' | 'md' | 'lg';
+    /** 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;
+}
+/**
+ * Monitor strip of vital tiles. Tiles are rendered here with Stat's size and
+ * text token classes rather than by importing Stat, which is a client
+ * component (KTD4). Presentational and hook-free, so it stays server-safe.
+ */
+export declare const VitalsStrip: React.ForwardRefExoticComponent<VitalsStripProps & React.RefAttributes<HTMLDivElement>>;