@medalsocial/meda 0.2.0 → 1.0.0

package/dist/styles/tokens.css

@@ -0,0 +1,338 @@
+/* ============================================================
+   Meda design tokens — canonical from 00-design-system.lib.pen
+   Source: /Users/ali/Library/CloudStorage/GoogleDrive-ali@medalsocial.com/
+           Delte disker/03 Product/Pencil Design/00-design-system.lib.pen
+   Retrieved via mcp__pencil__get_variables 2026-04-27.
+
+   NOTE: 00-design-system.pen and 050-meda-ui.pen are illustrative
+   companion boards — not normative. This file is derived from the
+   .lib.pen (library file) which is the sole canonical contract.
+   ============================================================ */
+
+/* ============================================================
+   Layer 0 — Color primitives (theme: brand, constant)
+   ============================================================ */
+:root {
+  /* Brand (purple) — 11 stops */
+  --color-brand-50: #fafafd;
+  --color-brand-100: #eeeaf5;
+  --color-brand-200: #dcd4e8;
+  --color-brand-300: #b8a3d2;
+  --color-brand-400: #9a6ac2;
+  --color-brand-500: #7e3fac;
+  --color-brand-600: #6a2e96;
+  --color-brand-700: #482070;
+  --color-brand-800: #2f1552;
+  --color-brand-900: #1c0e38;
+  --color-brand-950: #120a24;
+
+  /* Neutral (zinc-aligned) — 11 stops */
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f4f4f5;
+  --color-neutral-200: #e4e4e7;
+  --color-neutral-300: #a1a1aa;
+  --color-neutral-400: #71717a;
+  --color-neutral-500: #52525b;
+  --color-neutral-600: #3f3f46;
+  --color-neutral-700: #27272a;
+  --color-neutral-800: #18181b;
+  --color-neutral-900: #111113;
+  --color-neutral-950: #09090b;
+
+  /* Error (rose) — 10 stops */
+  --color-error-50: #fff1f2;
+  --color-error-100: #ffe4e6;
+  --color-error-200: #fecdd3;
+  --color-error-300: #fda4af;
+  --color-error-400: #fb7185;
+  --color-error-500: #f43f5e;
+  --color-error-600: #e11d48;
+  --color-error-700: #be123c;
+  --color-error-800: #9f1239;
+  --color-error-900: #881337;
+
+  /* Info (blue) — 10 stops */
+  --color-info-50: #eff6ff;
+  --color-info-100: #dbeafe;
+  --color-info-200: #bfdbfe;
+  --color-info-300: #93c5fd;
+  --color-info-400: #60a5fa;
+  --color-info-500: #3b82f6;
+  --color-info-600: #2563eb;
+  --color-info-700: #1d4ed8;
+  --color-info-800: #1e3a8a;
+  --color-info-900: #172554;
+
+  /* Success (teal) — 10 stops */
+  --color-success-50: #f0fdfa;
+  --color-success-100: #ccfbf1;
+  --color-success-200: #99f6e4;
+  --color-success-300: #5eead4;
+  --color-success-400: #2dd4bf;
+  --color-success-500: #14b8a6;
+  --color-success-600: #0d9488;
+  --color-success-700: #0f766e;
+  --color-success-800: #115e59;
+  --color-success-900: #134e4a;
+
+  /* Warning (amber) — 10 stops */
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde68a;
+  --color-warning-300: #fcd34d;
+  --color-warning-400: #fbbf24;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+  --color-warning-800: #92400e;
+  --color-warning-900: #78350f;
+
+  /* Surface primitives (dark-mode only) */
+  --color-surface-bg: #09090b;
+  --color-surface-card: #18181b;
+  --color-surface-muted: #27272a;
+  --color-surface-border: #2e2e33;
+  --color-surface-sidebar: #0f0f12;
+}
+
+/* ============================================================
+   Layer 1 — shadcn semantic + status + sidebar + chart + text
+   Light mode (default on :root)
+   ============================================================ */
+:root {
+  /* shadcn shape */
+  --background: var(--color-neutral-50);
+  --foreground: var(--color-neutral-950);
+  --card: var(--color-neutral-50);
+  --card-foreground: var(--color-neutral-950);
+  --popover: var(--color-neutral-50);
+  --popover-foreground: var(--color-neutral-950);
+  --primary: var(--color-brand-800);
+  --primary-foreground: var(--color-brand-50);
+  --secondary: var(--color-neutral-200);
+  --secondary-foreground: var(--color-neutral-950);
+  --muted: var(--color-neutral-100);
+  --muted-foreground: var(--color-neutral-500);
+  --muted-foreground-strong: var(--color-neutral-600);
+  --accent: var(--color-neutral-200);
+  --accent-foreground: var(--color-neutral-950);
+  --destructive: var(--color-error-600);
+  --destructive-foreground: var(--color-neutral-50);
+  --destructive-bg: var(--color-error-50);
+  --danger: var(--color-error-600);
+  --border: var(--color-neutral-200);
+  --input: var(--color-neutral-200);
+  --ring: var(--color-brand-600);
+
+  /* Status */
+  --success: var(--color-success-600);
+  --success-foreground: var(--color-neutral-950);
+  --success-text: var(--color-success-700);
+  --warning: var(--color-warning-600);
+  --warning-foreground: var(--color-neutral-950);
+  --warning-text: var(--color-warning-800);
+  --info: var(--color-info-600);
+  --info-foreground: var(--color-neutral-50);
+
+  /* Sidebar */
+  --sidebar: var(--color-neutral-100);
+  --sidebar-foreground: var(--color-neutral-950);
+  --sidebar-primary: var(--color-brand-700);
+  --sidebar-primary-foreground: var(--color-neutral-50);
+  --sidebar-accent: var(--color-neutral-50);
+  --sidebar-accent-foreground: var(--color-neutral-950);
+  --sidebar-border: var(--color-neutral-200);
+  --sidebar-ring: var(--color-brand-500);
+
+  /* Chart */
+  --chart-1: var(--color-brand-600);
+  --chart-2: var(--color-info-600);
+  --chart-3: var(--color-success-600);
+  --chart-4: var(--color-warning-600);
+  --chart-5: var(--color-error-600);
+
+  /* Text */
+  --text: var(--color-neutral-950);
+  --text-foreground: var(--color-neutral-950);
+  --text-muted: var(--color-neutral-500);
+  --text-link: var(--color-brand-600);
+  --text-primary: var(--color-neutral-950);
+  --text-secondary: var(--color-neutral-600);
+  --highlight-foreground: var(--color-brand-500);
+}
+
+/* Dark mode overrides — class AND data-theme to support both runtime + Storybook */
+.dark,
+[data-theme="dark"] {
+  /* shadcn shape */
+  --background: var(--color-surface-bg);
+  --foreground: var(--color-neutral-50);
+  --card: var(--color-surface-card);
+  --card-foreground: var(--color-neutral-50);
+  --popover: var(--color-surface-card);
+  --popover-foreground: var(--color-neutral-50);
+  --primary: var(--color-brand-100);
+  --primary-foreground: var(--color-brand-900);
+  --secondary: var(--color-surface-muted);
+  --secondary-foreground: var(--color-neutral-50);
+  --muted: var(--color-surface-muted);
+  --muted-foreground: var(--color-neutral-300);
+  --muted-foreground-strong: var(--color-neutral-300);
+  --accent: var(--color-surface-muted);
+  --accent-foreground: var(--color-neutral-50);
+  --destructive: var(--color-error-400);
+  --destructive-foreground: var(--color-neutral-950);
+  --destructive-bg: var(--color-error-900);
+  --danger: var(--color-error-400);
+  --border: var(--color-surface-border);
+  --input: var(--color-surface-muted);
+  --ring: var(--color-brand-400);
+
+  /* Status */
+  --success: var(--color-success-400);
+  --success-foreground: var(--color-neutral-950);
+  --success-text: var(--color-success-400);
+  --warning: var(--color-warning-400);
+  --warning-foreground: var(--color-neutral-950);
+  --warning-text: var(--color-warning-400);
+  --info: var(--color-info-400);
+  --info-foreground: var(--color-neutral-950);
+
+  /* Sidebar */
+  --sidebar: var(--color-surface-sidebar);
+  --sidebar-foreground: var(--color-neutral-50);
+  --sidebar-primary: var(--color-brand-400);
+  --sidebar-primary-foreground: var(--color-neutral-950);
+  --sidebar-accent: var(--color-surface-card);
+  --sidebar-accent-foreground: var(--color-neutral-50);
+  --sidebar-border: var(--color-surface-border);
+  --sidebar-ring: var(--color-brand-400);
+
+  /* Chart */
+  --chart-1: var(--color-brand-500);
+  --chart-2: var(--color-info-500);
+  --chart-3: var(--color-success-400);
+  --chart-4: var(--color-warning-500);
+  --chart-5: var(--color-error-400);
+
+  /* Text */
+  --text: var(--color-neutral-50);
+  --text-foreground: var(--color-neutral-50);
+  --text-muted: var(--color-neutral-300);
+  --text-link: var(--color-brand-400);
+  --text-primary: var(--color-neutral-100);
+  --text-secondary: var(--color-neutral-300);
+  --highlight-foreground: var(--color-brand-200);
+}
+
+/* ============================================================
+   Layer 2 — Shell semantic + sizing
+   ============================================================ */
+:root {
+  --shell-header: var(--color-neutral-50);
+  --shell-rail: var(--color-neutral-50);
+  --shell-context: var(--color-neutral-50);
+  --shell-main: var(--color-neutral-100);
+  --shell-panel: var(--color-neutral-50);
+  --shell-border: var(--color-neutral-200);
+  --shell-shadow: 0 4px 12px hsl(0 0% 0% / 0.04);
+  --shell-header-height: 56px;
+  --shell-rail-width: 60px;
+  --shell-context-default: 300px;
+  --shell-context-min: 240px;
+  --shell-context-max: 420px;
+  --shell-panel-default: 340px;
+  --shell-panel-min: 300px;
+  --shell-panel-max: 520px;
+  --shell-bottom-nav-height: 56px;
+  --z-shell-header: 40;
+  --z-shell-panel: 45;
+  --z-shell-fullscreen: 60;
+}
+
+.dark,
+[data-theme="dark"] {
+  --shell-header: var(--color-surface-card);
+  --shell-rail: var(--color-surface-sidebar);
+  --shell-context: var(--color-surface-sidebar);
+  --shell-main: var(--color-surface-bg);
+  --shell-panel: var(--color-surface-card);
+  --shell-border: var(--color-surface-border);
+  --shell-shadow: 0 4px 12px hsl(0 0% 0% / 0.45);
+}
+
+/* ============================================================
+   Motion (theme: base, constant)
+   Mirror of motion.ts (Phase 5)
+   ============================================================ */
+:root {
+  --motion-fast: 140ms;
+  --motion-default: 200ms;
+  --motion-panel: 240ms;
+  --motion-fullscreen: 280ms;
+  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+/* ============================================================
+   Typography (theme: base, constant)
+   Font family: Geist + Geist Mono only. No Inter.
+   ============================================================ */
+:root {
+  --font-family-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: "Geist Mono", "SF Mono", "Fira Code", monospace;
+  --font-size-display: 36px;
+  --font-size-h1: 30px;
+  --font-size-h2: 24px;
+  --font-size-h3: 20px;
+  --font-size-h4: 18px;
+  --font-size-body-lg: 16px;
+  --font-size-body: 14px;
+  --font-size-body-sm: 13px;
+  --font-size-caption: 11px;
+  --font-size-overline: 10px;
+  --font-size-mono-data: 12px;
+  --font-size-mono-caption: 10px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --line-height-display: 1.1;
+  --line-height-heading: 1.15;
+  --line-height-tight: 1.2;
+  --line-height-snug: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.6;
+  --letter-spacing-tighter: -0.5px;
+  --letter-spacing-tight: -0.2px;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 1.2px;
+}
+
+/* ============================================================
+   Radii (theme: base, constant)
+   ============================================================ */
+:root {
+  --radius: 8px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 20px;
+  --radius-4xl: 24px;
+  --radius-full: 9999px;
+}
+
+/* ============================================================
+   Spacing scale (theme: base, constant)
+   ============================================================ */
+:root {
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --spacing-3xl: 48px;
+  --spacing-4xl: 64px;
+}

package/dist/timeline/date-switcher.d.ts

@@ -0,0 +1,11 @@
+export interface DateSwitcherProps {
+    /** Currently selected date. */
+    value: Date;
+    /** Reference for "today" comparison and forward-disable. */
+    now: Date;
+    /** IANA timezone for "same day" / display semantics. Defaults to local. */
+    tz?: string;
+    onChange: (next: Date) => void;
+    className?: string;
+}
+export declare function DateSwitcher({ value, now, tz, onChange, className }: DateSwitcherProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/date-switcher.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+// "YYYY-MM-DD" in the given tz (or local if undefined). Comparing these
+// strings is a robust same-day check that doesn't depend on local-time math.
+function ymdInTz(d, tz) {
+    return new Intl.DateTimeFormat('en-CA', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        timeZone: tz,
+    }).format(d);
+}
+function isSameDay(a, b, tz) {
+    return ymdInTz(a, tz) === ymdInTz(b, tz);
+}
+// Returns the tz offset (in minutes) for `date` in `tz`. Positive = east of
+// UTC, e.g. Europe/Stockholm CET → +60. Tolerates "GMT", "GMT+05", and
+// "GMT+05:30" formats from Intl.DateTimeFormat.
+function tzOffsetMinutes(date, tz) {
+    const parts = new Intl.DateTimeFormat('en-US', {
+        timeZone: tz,
+        timeZoneName: 'longOffset',
+    }).formatToParts(date);
+    const name = parts.find((p) => p.type === 'timeZoneName')?.value ?? 'GMT';
+    const m = /GMT(?:([+-])(\d{1,2})(?::?(\d{2}))?)?/.exec(name);
+    if (!m?.[1])
+        return 0;
+    const sign = m[1] === '+' ? 1 : -1;
+    const hours = Number.parseInt(m[2] ?? '0', 10);
+    const mins = Number.parseInt(m[3] ?? '0', 10);
+    return sign * (hours * 60 + mins);
+}
+function addDays(d, delta, tz) {
+    if (!tz) {
+        // No tz: step the calendar day in the browser's local timezone (DST-safe
+        // there because setDate honors local DST transitions).
+        const c = new Date(d);
+        c.setDate(c.getDate() + delta);
+        return c;
+    }
+    // tz-aware: advance 24h, then correct for any DST shift between the
+    // original day and the target day so the *wall clock* in `tz` lands on the
+    // same hour:minute on the next/previous calendar day.
+    const offsetBefore = tzOffsetMinutes(d, tz);
+    const candidate = new Date(d.getTime() + delta * 86_400_000);
+    const offsetAfter = tzOffsetMinutes(candidate, tz);
+    return new Date(candidate.getTime() + (offsetBefore - offsetAfter) * 60_000);
+}
+function fmtDate(d, tz) {
+    return new Intl.DateTimeFormat('en-US', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+        timeZone: tz,
+    }).format(d);
+}
+export function DateSwitcher({ value, now, tz, onChange, className }) {
+    const isToday = isSameDay(value, now, tz);
+    const goPrev = () => onChange(addDays(value, -1, tz));
+    const goNext = () => onChange(addDays(value, 1, tz));
+    return (_jsxs("div", { className: cn('flex items-center gap-2', className), children: [_jsx("button", { type: "button", "aria-label": "Previous day", onClick: goPrev, className: "inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground", children: _jsx(ChevronLeft, { className: "size-4" }) }), _jsxs("div", { className: "flex flex-1 items-center justify-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-sm", children: [_jsx(Calendar, { className: "size-3.5 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: fmtDate(value, tz) }), isToday && (_jsx("span", { className: "ml-1 rounded-full bg-success/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-success-800", children: "today" }))] }), _jsx("button", { type: "button", "aria-label": "Next day", disabled: isToday, onClick: goNext, className: "inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent", children: _jsx(ChevronRight, { className: "size-4" }) })] }));
+}

package/dist/timeline/event-card.d.ts

@@ -0,0 +1,9 @@
+import type { TimelineEvent } from './types.js';
+export type EventCardSize = 'default' | 'tiny';
+export interface EventCardProps {
+    event: TimelineEvent;
+    size?: EventCardSize;
+    onSelect?: (event: TimelineEvent) => void;
+    className?: string;
+}
+export declare function EventCard({ event, size, onSelect, className }: EventCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/event-card.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+export function EventCard({ event, size = 'default', onSelect, className }) {
+    const isLive = event.isLive ?? false;
+    const isSelected = event.selected ?? false;
+    const isError = event.kind === 'error';
+    const liveClasses = isLive ? 'border-success/40 bg-gradient-to-b from-success/10 to-card' : '';
+    const errorClasses = isError ? 'border-destructive/40' : '';
+    const selectedClasses = isSelected
+        ? 'border-primary/60 bg-primary/[0.10] shadow-[0_4px_12px_rgba(0,0,0,0.15)]'
+        : '';
+    const sizeClasses = size === 'tiny' ? 'px-2 py-1 text-[11px]' : 'px-2.5 py-2 text-xs';
+    return (_jsxs("button", { type: "button", "data-live": String(isLive), "data-selected": String(isSelected), "data-kind": event.kind, onClick: () => onSelect?.(event), className: cn('relative w-full cursor-pointer rounded-md border border-border bg-card text-left transition-[border-color,transform] duration-100', 'hover:translate-x-px hover:border-primary/40', sizeClasses, liveClasses, errorClasses, selectedClasses, className), children: [_jsx("span", { "aria-hidden": "true", className: "absolute -left-2.5 top-1/2 h-px w-2.5 bg-border" }), _jsxs("span", { className: "flex items-center gap-1.5 font-medium", children: [isLive && _jsx(LiveDot, {}), _jsx("span", { className: "min-w-0 flex-1 truncate", children: event.primary })] }), size === 'default' && event.secondary != null && (_jsx("span", { className: "mt-0.5 block text-[10px] text-muted-foreground tabular-nums", children: event.secondary }))] }));
+}
+function LiveDot() {
+    return (_jsx("span", { "aria-hidden": "true", className: "inline-block size-1.5 shrink-0 animate-pulse rounded-full bg-success shadow-[0_0_0_3px_rgba(16,185,129,0.20)]" }));
+}

package/dist/timeline/index.d.ts

@@ -0,0 +1,13 @@
+export type { DateSwitcherProps } from './date-switcher.js';
+export { DateSwitcher } from './date-switcher.js';
+export type { EventCardProps, EventCardSize } from './event-card.js';
+export { EventCard } from './event-card.js';
+export type { LiveIndicatorProps } from './live-indicator.js';
+export { LiveIndicator } from './live-indicator.js';
+export type { ScrubBarProps } from './scrub-bar.js';
+export { ScrubBar } from './scrub-bar.js';
+export type { TimelineRailProps } from './timeline-rail.js';
+export { TimelineRail } from './timeline-rail.js';
+export type { TimelineTapeProps } from './timeline-tape.js';
+export { TimelineTape } from './timeline-tape.js';
+export type { ScrubMark, TimelineEvent, TimelineEventKind } from './types.js';

package/dist/timeline/index.js

@@ -0,0 +1,6 @@
+export { DateSwitcher } from './date-switcher.js';
+export { EventCard } from './event-card.js';
+export { LiveIndicator } from './live-indicator.js';
+export { ScrubBar } from './scrub-bar.js';
+export { TimelineRail } from './timeline-rail.js';
+export { TimelineTape } from './timeline-tape.js';

package/dist/timeline/live-indicator.d.ts

@@ -0,0 +1,7 @@
+export interface LiveIndicatorProps {
+    now: Date;
+    /** Optional IANA timezone for the displayed clock. */
+    tz?: string;
+    className?: string;
+}
+export declare function LiveIndicator({ now, tz, className }: LiveIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/live-indicator.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatClock } from '../lib/format-time.js';
+import { cn } from '../lib/utils.js';
+export function LiveIndicator({ now, tz, className }) {
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cn('relative h-0 pointer-events-none', className), children: [_jsx("span", { className: "pointer-events-auto absolute left-0 top-0 inline-flex items-center rounded-md bg-success-700 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wider text-white shadow-[0_6px_18px_rgba(16,185,129,0.35)]", children: "LIVE" }), _jsx("span", { "aria-hidden": "true", className: "absolute right-0 top-1/2 left-[60px] h-px bg-gradient-to-r from-success via-success/30 to-transparent" }), _jsx("span", { className: "absolute right-1.5 top-[-2px] text-[10px] font-semibold tabular-nums text-success-700", children: formatClock(now, { tz }) })] }));
+}

package/dist/timeline/public.d.ts

@@ -0,0 +1 @@
+export type { ScrubMark, TimelineEvent, TimelineEventKind } from './types.js';

package/dist/timeline/public.js

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

package/dist/timeline/scrub-bar.d.ts

@@ -0,0 +1,14 @@
+import type { ScrubMark } from './types.js';
+export interface ScrubBarProps {
+    durationMs: number;
+    positionMs: number;
+    isLive?: boolean;
+    marks: ScrubMark[];
+    onSeek: (positionMs: number) => void;
+    isPlaying?: boolean;
+    onPlayPause?: () => void;
+    onSkipBack?: () => void;
+    onSkipForward?: () => void;
+    className?: string;
+}
+export declare function ScrubBar({ durationMs, positionMs, isLive, marks, onSeek, isPlaying, onPlayPause, onSkipBack, onSkipForward, className, }: ScrubBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/scrub-bar.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pause, Play, SkipBack, SkipForward } from 'lucide-react';
+import { useRef } from 'react';
+import { formatDuration } from '../lib/format-time.js';
+import { cn } from '../lib/utils.js';
+const KIND_COLOR = {
+    turn: 'bg-primary',
+    tool: 'bg-warning',
+    barge: 'bg-success',
+    error: 'bg-destructive',
+};
+export function ScrubBar({ durationMs, positionMs, isLive = false, marks, onSeek, isPlaying, onPlayPause, onSkipBack, onSkipForward, className, }) {
+    const trackRef = useRef(null);
+    const showPlayPause = isPlaying !== undefined;
+    const isPlayingValue = isPlaying ?? false;
+    const fillPct = durationMs > 0 ? Math.min(100, (positionMs / durationMs) * 100) : 0;
+    const handleSeek = (e) => {
+        const rect = trackRef.current?.getBoundingClientRect();
+        if (!rect || rect.width === 0)
+            return;
+        const x = e.clientX - rect.left;
+        const pct = Math.max(0, Math.min(1, x / rect.width));
+        onSeek(pct * durationMs);
+    };
+    const handleKeyDown = (e) => {
+        const step = durationMs / 100;
+        if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            onSeek(Math.max(0, positionMs - step));
+        }
+        else if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            onSeek(Math.min(durationMs, positionMs + step));
+        }
+    };
+    return (_jsxs("div", { className: cn('rounded-2xl border border-border bg-card p-3.5', className), children: [_jsxs("div", { className: "mb-2.5 flex items-center justify-between", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Timeline \u00B7 this call" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("span", { className: "px-1.5 text-[11px] tabular-nums text-muted-foreground", children: [formatDuration(positionMs), isLive ? ' / live' : ` / ${formatDuration(durationMs)}`] }), onSkipBack && (_jsx(TransportBtn, { label: "Skip back", onClick: onSkipBack, children: _jsx(SkipBack, { className: "size-3.5" }) })), showPlayPause && (_jsx(TransportBtn, { label: isPlayingValue ? 'Pause' : 'Play', variant: "primary", onClick: onPlayPause ?? (() => { }), children: isPlayingValue ? _jsx(Pause, { className: "size-3.5" }) : _jsx(Play, { className: "size-3.5" }) })), onSkipForward && (_jsx(TransportBtn, { label: "Skip forward", onClick: onSkipForward, children: _jsx(SkipForward, { className: "size-3.5" }) }))] })] }), _jsxs("div", { ref: trackRef, role: "slider", "aria-label": "Conversation position", "aria-valuemin": 0, "aria-valuemax": durationMs, "aria-valuenow": positionMs, onClick: handleSeek, onKeyDown: handleKeyDown, tabIndex: 0, className: "relative h-8 cursor-pointer overflow-hidden rounded-md bg-muted focus:outline-none focus:ring-2 focus:ring-primary/50", children: [_jsx("span", { "aria-hidden": "true", className: "absolute inset-y-0 left-0 bg-primary/10", style: { width: `${fillPct}%` } }), marks.map((m) => (_jsx("span", { "data-mark-kind": m.kind, title: m.label ?? m.kind, className: cn('absolute inset-y-1 w-0.5 rounded-sm', KIND_COLOR[m.kind]), style: { left: `${m.positionPct}%` } }, m.id))), _jsx("span", { "aria-hidden": "true", className: "absolute -inset-y-0.5 w-0.5 bg-foreground", style: { left: `${fillPct}%` } })] }), _jsxs("div", { className: "flex justify-between pt-2 text-[10px] tabular-nums text-muted-foreground", children: [_jsx("span", { children: "0:00" }), _jsx("span", { children: isLive ? 'now' : formatDuration(durationMs) })] })] }));
+}
+function TransportBtn({ label, onClick, variant, children, }) {
+    return (_jsx("button", { type: "button", "aria-label": label, onClick: onClick, className: cn('inline-flex size-6 items-center justify-center rounded', variant === 'primary'
+            ? 'bg-primary text-primary-foreground'
+            : 'text-muted-foreground hover:bg-muted hover:text-foreground'), children: children }));
+}

package/dist/timeline/timeline-rail.d.ts

@@ -0,0 +1,19 @@
+import type { TimelineEvent } from './types.js';
+export interface TimelineRailProps {
+    date: Date;
+    now: Date;
+    events: TimelineEvent[];
+    /** px per second. Default 1.2 (72 px/min). */
+    zoom?: number;
+    /** When true (default), tape auto-scrolls to keep LIVE pinned. */
+    followLive?: boolean;
+    tz?: string;
+    onZoomChange?: (px: number) => void;
+    onDateChange?: (next: Date) => void;
+    onSelect?: (event: TimelineEvent) => void;
+    onFollowChange?: (following: boolean) => void;
+    /** Click target on the "Manage retention" footer. */
+    onManageRetention?: () => void;
+    className?: string;
+}
+export declare function TimelineRail({ date, now, events, zoom, followLive, tz, onZoomChange, onDateChange, onSelect, onFollowChange, onManageRetention, className, }: TimelineRailProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/timeline-rail.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Archive } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { DateSwitcher } from './date-switcher.js';
+import { LiveIndicator } from './live-indicator.js';
+import { TimelineTape } from './timeline-tape.js';
+const FUTURE_PAD_SEC = 300;
+const PAST_SPAN_SEC = 6 * 60 * 60;
+const STICKY_TOP_PX = 12;
+export function TimelineRail({ date, now, events, zoom = 1.2, followLive = true, tz, onZoomChange, onDateChange, onSelect, onFollowChange, onManageRetention, className, }) {
+    const scrollRef = useRef(null);
+    const [isFollowing, setIsFollowing] = useState(followLive);
+    // Mirror parent prop changes into local state so a controlled toggle of
+    // `followLive` from outside actually flips auto-follow.
+    useEffect(() => {
+        setIsFollowing(followLive);
+    }, [followLive]);
+    const liveCount = useMemo(() => events.filter((e) => e.isLive).length, [events]);
+    const totalCalls = useMemo(() => events.filter((e) => e.kind === 'session').length, [events]);
+    // NOW y inside the tape canvas
+    const nowY = FUTURE_PAD_SEC * zoom;
+    // Keep LIVE pinned by auto-scrolling when isFollowing
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        if (isFollowing) {
+            el.scrollTop = nowY - STICKY_TOP_PX;
+        }
+    }, [isFollowing, nowY]);
+    // Detect manual scroll-away → flip off auto-follow
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const onScroll = () => {
+            if (!el)
+                return;
+            const expected = nowY - STICKY_TOP_PX;
+            const drift = Math.abs(el.scrollTop - expected);
+            if (drift > 32 && isFollowing) {
+                setIsFollowing(false);
+                onFollowChange?.(false);
+            }
+        };
+        el.addEventListener('scroll', onScroll, { passive: true });
+        return () => el.removeEventListener('scroll', onScroll);
+    }, [nowY, isFollowing, onFollowChange]);
+    const jumpToLive = () => {
+        setIsFollowing(true);
+        onFollowChange?.(true);
+    };
+    return (_jsxs("aside", { className: cn('relative flex h-full flex-col border-r border-border bg-card text-sm', className), "data-meda-component": "timeline-rail", children: [_jsx("div", { className: "px-3.5 pb-2.5 pt-3.5", children: _jsx(DateSwitcher, { value: date, now: now, tz: tz, onChange: (d) => onDateChange?.(d) }) }), _jsxs("div", { className: "flex items-center gap-2.5 px-3.5 pb-3", children: [_jsx(ZoomBtn, { label: "\u2212", onClick: () => onZoomChange?.(Math.max(0.2, zoom - 0.4)) }), _jsx(ZoomTrack, { value: zoom, min: 0.2, max: 6 }), _jsx(ZoomBtn, { label: "+", onClick: () => onZoomChange?.(Math.min(6, zoom + 0.4)) })] }), _jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3.5 pb-2.5 text-[11px] tabular-nums text-muted-foreground", children: [liveCount > 0 && (_jsxs("span", { className: "inline-flex items-center gap-1.5 font-semibold text-success-700", children: [_jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-success shadow-[0_0_0_3px_rgba(16,185,129,0.18)]" }), liveCount, " live"] })), _jsxs("span", { className: "ml-auto", children: [_jsx("strong", { className: "font-semibold text-foreground", children: totalCalls }), " sessions"] })] }), _jsxs("div", { ref: scrollRef, className: "relative flex-1 overflow-y-auto overflow-x-hidden pb-16", children: [_jsx("div", { className: "sticky top-3 z-10 mx-3.5", children: _jsx(LiveIndicator, { now: now, tz: tz }) }), _jsx(TimelineTape, { now: now, events: events, pxPerSec: zoom, futurePadSec: FUTURE_PAD_SEC, pastSpanSec: PAST_SPAN_SEC, tz: tz, onSelect: onSelect })] }), !isFollowing && (_jsx("button", { type: "button", onClick: jumpToLive, 
+                // bg-success-700/-800 (vs. -600/-700) so 11px white text clears
+                // WCAG AA on hover and at rest.
+                className: "absolute right-3 top-32 z-20 inline-flex items-center gap-1.5 rounded-full bg-success-700 px-3 py-1 text-[11px] font-semibold text-white shadow-md hover:bg-success-800", children: "Jump to live" })), _jsxs("button", { type: "button", onClick: () => onManageRetention?.(), className: "absolute inset-x-0 bottom-0 z-20 flex items-center justify-center gap-1.5 bg-gradient-to-t from-card via-card/85 to-transparent px-3.5 py-2.5 text-[12px] text-primary hover:text-primary/80", children: [_jsx(Archive, { className: "size-3.5" }), " Manage retention"] })] }));
+}
+function ZoomBtn({ label, onClick }) {
+    return (_jsx("button", { type: "button", onClick: onClick, className: "inline-flex size-5 items-center justify-center rounded bg-muted text-sm leading-none text-muted-foreground hover:text-foreground", children: label }));
+}
+function ZoomTrack({ value, min, max }) {
+    const pct = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+    return (_jsx("div", { tabIndex: 0, role: "slider", "aria-label": "Zoom", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, className: "relative h-1 flex-1 rounded-sm bg-muted", children: _jsx("span", { className: "absolute -top-[3px] size-2.5 -translate-x-1/2 rounded-full bg-primary shadow-[0_0_0_4px_rgba(137,117,255,0.18)]", style: { left: `${pct}%` } }) }));
+}

package/dist/timeline/timeline-tape.d.ts

@@ -0,0 +1,19 @@
+import type { TimelineEvent } from './types.js';
+export interface TimelineTapeProps {
+    /** "Now" reference; canvas top represents `now + futurePadSec`. */
+    now: Date;
+    /** Event list. Order doesn't matter — placement uses startedAt. */
+    events: TimelineEvent[];
+    /** px per second of vertical scroll. Default 1.2 = 72 px/min. */
+    pxPerSec?: number;
+    /** Seconds of "future" rendered above NOW. Default 300 (5 min). */
+    futurePadSec?: number;
+    /** Total seconds visible past NOW (governs canvas height). Default 6h. */
+    pastSpanSec?: number;
+    /** Timezone for tick labels (caller's local tz by default). */
+    tz?: string;
+    /** Selection callback. */
+    onSelect?: (event: TimelineEvent) => void;
+    className?: string;
+}
+export declare function TimelineTape({ now, events, pxPerSec, futurePadSec, pastSpanSec, tz, onSelect, className, }: TimelineTapeProps): import("react/jsx-runtime").JSX.Element;