@medalsocial/meda 0.3.0 → 1.1.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.js

@@ -1,5 +1,7 @@
+'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) {
@@ -58,5 +60,5 @@ 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: ['flex items-center gap-2', className ?? ''].join(' '), 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-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-emerald-500", 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" }) })] }));
+    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.js

@@ -1,26 +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-emerald-500/40 bg-gradient-to-b from-emerald-500/10 to-card'
-        : '';
+    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: [
-            '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 ?? '',
-        ].join(' '), 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 }))] }));
+    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-emerald-500 shadow-[0_0_0_3px_rgba(16,185,129,0.20)]" }));
+    return (_jsx("span", { "aria-hidden": "true", "data-chromatic": "ignore", 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/live-indicator.js

@@ -1,5 +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: ['relative h-0 pointer-events-none', className ?? ''].join(' '), children: [_jsx("span", { className: "pointer-events-auto absolute left-0 top-0 inline-flex items-center rounded-md bg-emerald-500 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-emerald-500 via-emerald-500/30 to-transparent" }), _jsx("span", { className: "absolute right-1.5 top-[-2px] text-[10px] font-semibold tabular-nums text-emerald-500", children: formatClock(now, { tz }) })] }));
+    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", { "data-chromatic": "ignore", className: "absolute right-1.5 top-[-2px] text-[10px] font-semibold tabular-nums text-success-700", children: formatClock(now, { tz }) })] }));
 }

package/dist/timeline/scrub-bar.js

@@ -1,11 +1,13 @@
+'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-amber-500',
-    barge: 'bg-emerald-500',
+    tool: 'bg-warning',
+    barge: 'bg-success',
     error: 'bg-destructive',
 };
 export function ScrubBar({ durationMs, positionMs, isLive = false, marks, onSeek, isPlaying, onPlayPause, onSkipBack, onSkipForward, className, }) {
@@ -32,13 +34,10 @@ export function ScrubBar({ durationMs, positionMs, isLive = false, marks, onSeek
             onSeek(Math.min(durationMs, positionMs + step));
         }
     };
-    return (_jsxs("div", { className: ['rounded-2xl border border-border bg-card p-3.5', className ?? ''].join(' '), 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: ['absolute inset-y-1 w-0.5 rounded-sm', KIND_COLOR[m.kind]].join(' '), 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) })] })] }));
+    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", "data-chromatic": "ignore", 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: [
-            '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',
-        ].join(' '), children: 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.js

@@ -1,6 +1,8 @@
+'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';
@@ -50,10 +52,10 @@ export function TimelineRail({ date, now, events, zoom = 1.2, followLive = true,
         setIsFollowing(true);
         onFollowChange?.(true);
     };
-    return (_jsxs("aside", { className: [
-            'relative flex h-full flex-col border-r border-border bg-card text-sm',
-            className ?? '',
-        ].join(' '), "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-emerald-500", children: [_jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-emerald-500 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, className: "absolute right-3 top-32 z-20 inline-flex items-center gap-1.5 rounded-full bg-emerald-500 px-3 py-1 text-[11px] font-semibold text-white shadow-md hover:bg-emerald-600", 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"] })] }));
+    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 }));

package/dist/timeline/timeline-tape.js

@@ -1,5 +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';
 import { EventCard } from './event-card.js';
 const DEFAULT_PX_PER_SEC = 1.2;
 const DEFAULT_FUTURE_PAD_SEC = 300;
@@ -51,14 +53,11 @@ export function TimelineTape({ now, events, pxPerSec = DEFAULT_PX_PER_SEC, futur
         const height = Math.max(2, Math.abs(endY - startY));
         return { event: e, top, height };
     });
-    return (_jsxs("div", { className: ['relative ml-3.5 mr-3', className ?? ''].join(' '), style: { height: `${canvasHeight}px` }, "data-canvas-height": canvasHeight, children: [ticks.map((t) => t.major ? (_jsxs("div", { children: [_jsx("span", { className: "absolute left-0 w-[30px] -translate-y-[7px] text-right text-[11px] font-medium tabular-nums text-muted-foreground", style: { top: `${t.y}px` }, children: t.label }), _jsx("span", { className: "absolute h-px w-2 bg-border", style: { left: 32, top: `${t.y}px` } })] }, `maj-${t.y}`)) : (_jsx("span", { className: "absolute h-px w-1.5 bg-border/40", style: { left: 35, top: `${t.y}px` } }, `min-${t.y}`))), segments.map(({ event, top, height }) => (_jsx("span", { "aria-hidden": "true", "data-tape-segment-id": event.id, "data-tape-segment-live": String(event.isLive ?? false), className: [
-                    'absolute w-1 rounded-sm',
-                    event.isLive
-                        ? 'bg-emerald-500 shadow-[0_0_12px_rgba(16,185,129,0.5)]'
-                        : event.kind === 'error'
-                            ? 'bg-destructive'
-                            : 'bg-sky-400 shadow-[0_0_8px_rgba(56,189,248,0.35)]',
-                ].join(' '), style: { left: 44, top: `${top}px`, height: `${height}px` } }, `seg-${event.id}`))), events.map((event) => {
+    return (_jsxs("div", { className: cn('relative ml-3.5 mr-3', className), style: { height: `${canvasHeight}px` }, "data-canvas-height": canvasHeight, children: [ticks.map((t) => t.major ? (_jsxs("div", { children: [_jsx("span", { className: "absolute left-0 w-[30px] -translate-y-[7px] text-right text-[11px] font-medium tabular-nums text-muted-foreground", style: { top: `${t.y}px` }, children: t.label }), _jsx("span", { className: "absolute h-px w-2 bg-border", style: { left: 32, top: `${t.y}px` } })] }, `maj-${t.y}`)) : (_jsx("span", { className: "absolute h-px w-1.5 bg-border/40", style: { left: 35, top: `${t.y}px` } }, `min-${t.y}`))), segments.map(({ event, top, height }) => (_jsx("span", { "aria-hidden": "true", "data-tape-segment-id": event.id, "data-tape-segment-live": String(event.isLive ?? false), className: cn('absolute w-1 rounded-sm', event.isLive
+                    ? 'bg-success-600 shadow-[0_0_12px_rgba(16,185,129,0.5)]'
+                    : event.kind === 'error'
+                        ? 'bg-destructive'
+                        : 'bg-info-500 shadow-[0_0_8px_rgba(56,189,248,0.35)]'), style: { left: 44, top: `${top}px`, height: `${height}px` } }, `seg-${event.id}`))), events.map((event) => {
                 const startY = instantToY(event.startedAt, nowMs, pxPerSec, futurePadSec);
                 const isSubEvent = event.kind === 'sub-event';
                 return (_jsx("div", { "data-event-id": event.id, className: "absolute", style: { top: `${startY}px`, left: 56, right: 0 }, children: _jsx(EventCard, { event: event, size: isSubEvent ? 'tiny' : 'default', onSelect: onSelect }) }, event.id));

package/dist/voice/voice-level.js

@@ -1,5 +1,7 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { cn } from '../lib/utils.js';
 const BAR_COUNT = 9;
 export function VoiceLevel({ level, variant = 'bars', width = 140, height = 48, className, }) {
     const historyRef = React.useRef(Array(BAR_COUNT).fill(0));
@@ -14,7 +16,7 @@ export function VoiceLevel({ level, variant = 'bars', width = 140, height = 48,
         force((v) => v + 1);
     }, [level, variant]);
     if (variant === 'bars') {
-        return (_jsx("div", { role: "presentation", className: ['flex items-end gap-1', className ?? ''].join(' '), style: { width, height }, children: historyRef.current.map((v, i) => (_jsx("span", { className: "flex-1 rounded-sm bg-primary", style: { height: `${15 + v * 85}%`, opacity: 0.4 + v * 0.6 } }, i))) }));
+        return (_jsx("div", { role: "presentation", className: cn('flex items-end gap-1', className), style: { width, height }, children: historyRef.current.map((v, i) => (_jsx("span", { className: "flex-1 rounded-sm bg-primary", style: { height: `${15 + v * 85}%`, opacity: 0.4 + v * 0.6 } }, i))) }));
     }
     if (variant === 'ring') {
         const r = Math.min(width, height) / 2 - 4;

package/dist/voice/voice-orb-scene.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: Apache-2.0
 // Portions adapted from ElevenLabs UI's Orb component (MIT):

package/dist/voice/voice-orb.js

@@ -1,7 +1,9 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 // SPDX-License-Identifier: Apache-2.0
 import { Canvas } from '@react-three/fiber';
 import * as React from 'react';
+import { cn } from '../lib/utils.js';
 import { Scene } from './voice-orb-scene.js';
 // Note: CSS for `.meda-voice-orb` is shipped via @medalsocial/meda/styles.css
 // (re-exported from globals.css). We avoid a JS-side CSS import here so
@@ -9,7 +11,11 @@ import { Scene } from './voice-orb-scene.js';
 // ---------------------------------------------------------------------------
 // Theming helpers
 // ---------------------------------------------------------------------------
-const FALLBACK_COLOR = '#9A6AC2'; // Pilot purple
+// Fallback colors used only if CSS custom properties fail to resolve.
+// Both values are from the canonical brand ramp (.lib.pen):
+//   brand-400 (#9A6AC2) and brand-500 (#7E3FAC).
+// Runtime path reads --primary and --accent first.
+const FALLBACK_COLOR = '#9A6AC2'; // brand-400
 function hslToHex(h, s, l) {
     const sl = s / 100;
     const ll = l / 100;
@@ -70,7 +76,7 @@ function readMedaColors(el) {
     const colorB = accent ? parseColor(accent) : colorA;
     return [colorA, colorB];
 }
-const DEFAULT_COLORS = ['#9A6AC2', '#7B4FAB'];
+const DEFAULT_COLORS = ['#9A6AC2', '#7E3FAC']; // brand-400 → brand-500
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -111,13 +117,5 @@ export const VoiceOrb = React.forwardRef(function VoiceOrb({ pressed, level = 0,
         height: size,
         ...style,
     };
-    return (_jsx("button", { ref: buttonRef, type: "button", "aria-pressed": pressed, "aria-label": label, disabled: disabled, "data-phase": phase, "data-pressed": pressed, className: [
-            'meda-voice-orb',
-            'relative inline-flex items-center justify-center rounded-full',
-            'select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-            'transition-transform duration-200 ease-out',
-            disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
-            pressed ? 'scale-[0.97]' : 'scale-100',
-            className ?? '',
-        ].join(' '), style: btnStyle, ...rest, children: _jsx(Canvas, { gl: { alpha: true, antialias: true, premultipliedAlpha: true }, style: { pointerEvents: 'none' }, children: _jsx(Scene, { level: level, outputLevel: outputLevel, phase: phase, colors: resolvedColors, reducedMotion: reducedMotion, pressed: pressed, variant: variant }) }) }));
+    return (_jsx("button", { ref: buttonRef, type: "button", "aria-pressed": pressed, "aria-label": label, disabled: disabled, "data-phase": phase, "data-pressed": pressed, className: cn('meda-voice-orb', 'relative inline-flex items-center justify-center rounded-full', 'select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'transition-transform duration-200 ease-out', disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer', pressed ? 'scale-[0.97]' : 'scale-100', className), style: btnStyle, ...rest, children: _jsx(Canvas, { gl: { alpha: true, antialias: true, premultipliedAlpha: true }, style: { pointerEvents: 'none' }, children: _jsx(Scene, { level: level, outputLevel: outputLevel, phase: phase, colors: resolvedColors, reducedMotion: reducedMotion, pressed: pressed, variant: variant }) }) }));
 });

package/dist/voice/voice-status-pill.js

@@ -1,4 +1,6 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
 const PHASE_LABEL = {
     idle: 'Idle',
     listening: 'Listening',
@@ -10,17 +12,10 @@ export function VoiceStatusPill({ phase, thinkingForMs, className }) {
     const tone = phase === 'listening'
         ? 'bg-primary text-primary-foreground'
         : phase === 'speaking'
-            ? 'bg-emerald-500 text-white'
+            ? 'bg-success text-success-foreground'
             : phase === 'error'
                 ? 'bg-destructive text-destructive-foreground'
                 : 'bg-muted text-muted-foreground';
     const seconds = thinkingForMs ? (thinkingForMs / 1000).toFixed(1) : null;
-    return (_jsxs("span", { role: "status", "data-phase": phase, className: [
-            'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium',
-            tone,
-            className ?? '',
-        ].join(' '), children: [_jsx("span", { className: [
-                    'size-1.5 rounded-full bg-current',
-                    phase === 'thinking' ? 'animate-pulse' : '',
-                ].join(' ') }), PHASE_LABEL[phase], phase === 'thinking' && seconds && _jsxs("span", { className: "opacity-70", children: ["\u00B7 ", seconds, "s"] })] }));
+    return (_jsxs("span", { role: "status", "data-phase": phase, className: cn('inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium', tone, className), children: [_jsx("span", { className: cn('size-1.5 rounded-full bg-current', phase === 'thinking' && 'animate-pulse') }), PHASE_LABEL[phase], phase === 'thinking' && seconds && _jsxs("span", { children: ["\u00B7 ", seconds, "s"] })] }));
 }