@medalsocial/meda 0.2.0 → 1.0.0

package/dist/timeline/timeline-tape.js

@@ -0,0 +1,65 @@
+'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;
+const DEFAULT_PAST_SPAN_SEC = 6 * 60 * 60;
+/** Convert a unix-ms instant to canvas y (px). y=0 at canvas top. */
+function instantToY(instantMs, nowMs, pxPerSec, futurePadSec) {
+    const secsAfterNow = (instantMs - nowMs) / 1000;
+    // future is above now → smaller y. past is below now → larger y.
+    return (futurePadSec - secsAfterNow) * pxPerSec;
+}
+export function TimelineTape({ now, events, pxPerSec = DEFAULT_PX_PER_SEC, futurePadSec = DEFAULT_FUTURE_PAD_SEC, pastSpanSec = DEFAULT_PAST_SPAN_SEC, tz, onSelect, className, }) {
+    const nowMs = now.getTime();
+    const totalSec = futurePadSec + pastSpanSec;
+    const canvasHeight = totalSec * pxPerSec;
+    const nowY = instantToY(nowMs, nowMs, pxPerSec, futurePadSec);
+    // Compute tick positions at minute boundaries. Start from the future edge, go down.
+    const ticks = [];
+    const futureEdgeMs = nowMs + futurePadSec * 1000;
+    const pastEdgeMs = nowMs - pastSpanSec * 1000;
+    const firstTick = new Date(futureEdgeMs);
+    firstTick.setSeconds(0, 0);
+    for (let t = firstTick.getTime(); t >= pastEdgeMs; t -= 60_000) {
+        const y = instantToY(t, nowMs, pxPerSec, futurePadSec);
+        if (y < 0 || y > canvasHeight)
+            continue;
+        ticks.push({
+            y,
+            label: formatClock(new Date(t), { tz, withSeconds: false }),
+            major: true,
+        });
+        // 5 sub-ticks every 10s under each major
+        for (let sub = 1; sub <= 5; sub++) {
+            const subT = t - sub * 10_000;
+            if (subT < pastEdgeMs)
+                break;
+            const subY = instantToY(subT, nowMs, pxPerSec, futurePadSec);
+            ticks.push({ y: subY, label: '', major: false });
+        }
+    }
+    // Build tape segments + cards
+    const segments = events
+        .filter((e) => e.kind === 'session' || e.kind === 'error')
+        .map((e) => {
+        const startY = instantToY(e.startedAt, nowMs, pxPerSec, futurePadSec);
+        const endInstant = e.endedAt ?? (e.isLive ? nowMs : e.startedAt + 1000);
+        const endY = instantToY(endInstant, nowMs, pxPerSec, futurePadSec);
+        // "Top" of the segment is the more recent (smaller y).
+        const top = Math.min(startY, endY);
+        const height = Math.max(2, Math.abs(endY - startY));
+        return { event: e, top, height };
+    });
+    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));
+            }), _jsx("span", { "aria-hidden": "true", "data-now-y": nowY, className: "absolute", style: { top: `${nowY}px`, left: 0, width: 0, height: 0 } })] }));
+}

package/dist/timeline/types.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+/** What kind of timeline entry this is. */
+export type TimelineEventKind = 'session' | 'sub-event' | 'scheduled' | 'error';
+/**
+ * Generic timeline entry. Apps map their domain (a phone call, a chat session, a workflow run)
+ * onto this shape and pass an array to <TimelineRail/>.
+ */
+export interface TimelineEvent {
+    /** Stable identifier across re-renders. */
+    id: string;
+    /** Unix ms — when the event began. */
+    startedAt: number;
+    /** Unix ms — when the event ended. Omit for live or instantaneous events. */
+    endedAt?: number;
+    /** Coarse category — drives default styling. */
+    kind: TimelineEventKind;
+    /** Optional narrower tag for app-specific styling, e.g. "tool-call", "barge-in". */
+    variant?: string;
+    /** Card primary line content (typically a name). */
+    primary?: ReactNode;
+    /** Card secondary line content (typically meta — counts, cost). */
+    secondary?: ReactNode;
+    /** Highlight as currently selected. */
+    selected?: boolean;
+    /** Render with the live treatment (green pulse, etc). */
+    isLive?: boolean;
+    /**
+     * Optional override for the tape segment color expressed as a CSS color value.
+     * Defaults derived from kind + isLive + variant.
+     */
+    fillColor?: string;
+}
+/** Marks rendered along the per-conversation <ScrubBar/>. */
+export interface ScrubMark {
+    id: string;
+    /** Position along the bar, 0..100. */
+    positionPct: number;
+    kind: 'turn' | 'tool' | 'barge' | 'error';
+    label?: string;
+}

package/dist/timeline/types.js

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

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"] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -24,6 +24,10 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./brand": {
+      "types": "./dist/brand/index.d.ts",
+      "default": "./dist/brand/index.js"
+    },
     "./shell": {
       "types": "./dist/shell/index.d.ts",
       "default": "./dist/shell/index.js"
@@ -32,19 +36,52 @@
       "types": "./dist/voice/index.d.ts",
       "default": "./dist/voice/index.js"
     },
-    "./styles.css": "./dist/styles.css"
+    "./timeline": {
+      "types": "./dist/timeline/index.d.ts",
+      "default": "./dist/timeline/index.js"
+    },
+    "./marketing": {
+      "types": "./dist/marketing/index.d.ts",
+      "default": "./dist/marketing/index.js"
+    },
+    "./chat": {
+      "types": "./dist/chat/index.d.ts",
+      "default": "./dist/chat/index.js"
+    },
+    "./panel": {
+      "types": "./dist/panel/index.d.ts",
+      "default": "./dist/panel/index.js"
+    },
+    "./styles": {
+      "default": "./dist/styles/theme.css"
+    },
+    "./styles.css": {
+      "default": "./dist/styles/theme.css"
+    },
+    "./styles/tokens": {
+      "default": "./dist/styles/tokens.css"
+    }
   },
+  "sideEffects": [
+    "**/*.css",
+    "./dist/styles/*.css"
+  ],
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
     "@react-three/fiber": "^9.0.0",
+    "lucide-react": "^1.8.0",
+    "next-themes": "^0.4.0",
     "react": ">=19",
     "react-dom": ">=19"
   },
   "peerDependenciesMeta": {
     "@react-three/fiber": {
       "optional": true
+    },
+    "next-themes": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -54,7 +91,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "lucide-react": "^1.8.0",
     "react-resizable-panels": "^4.10.0",
     "tailwind-merge": "^3.5.0",
     "three": "^0.170.0",
@@ -66,21 +102,36 @@
     "@changesets/cli": "^2.29.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.6.0",
+    "@size-limit/preset-small-lib": "^12.1.0",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-mcp": "^0.6.0",
+    "@storybook/addon-themes": "^10.3.5",
+    "@storybook/addon-vitest": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
     "@tailwindcss/vite": "^4.2.4",
-    "@types/three": "^0.184.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.184.0",
     "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "4.1.4",
+    "@vitest/coverage-v8": "4.1.4",
+    "chromatic": "^16.6.0",
     "husky": "^9.1.7",
     "jsdom": "^29.0.2",
+    "next-themes": "^0.4.0",
+    "playwright": "^1.59.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "size-limit": "^12.1.0",
+    "storybook": "^10.3.5",
     "tailwindcss": "^4.2.4",
     "typescript": "~6.0.2",
     "vite": "^8.0.4",
     "vitest": "^4.1.4",
+    "vitest-axe": "^0.1.0",
     "wrangler": "^4.0.0"
   },
   "scripts": {
@@ -90,14 +141,23 @@
     "format": "biome format --write .",
     "demo:dev": "vite --config vite.config.demo.ts",
     "demo:build": "vite build --config vite.config.demo.ts",
-    "worker:build": "pnpm demo:build && node ./scripts/copy-registry-to-dist.mjs",
-    "worker:dev": "pnpm worker:build && wrangler dev",
+    "worker:build": "pnpm demo:build && pnpm storybook:build && node ./scripts/copy-registry-to-dist.mjs",
+    "worker:build:dev": "pnpm demo:build && node ./scripts/copy-registry-to-dist.mjs --skip-storybook",
+    "worker:dev": "pnpm worker:build:dev && wrangler dev",
     "worker:deploy": "pnpm worker:build && wrangler deploy",
     "test": "vitest run --environment jsdom",
     "test:run": "vitest run --environment jsdom",
+    "test:integration": "vitest run --config vitest.config.integration.ts",
     "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "storybook:build": "storybook build -o storybook-static",
+    "chromatic": "chromatic --build-script-name=storybook:build --exit-zero-on-changes",
+    "size-limit": "size-limit",
+    "size-limit:why": "size-limit --why",
     "version": "changeset version",
     "release": "pnpm build && changeset publish",
-    "registry:validate": "node ./registry/scripts/validate-registry.mjs"
+    "registry:validate": "node ./registry/scripts/validate-registry.mjs",
+    "lint:tokens": "node scripts/lint-tokens.mjs",
+    "quality": "pnpm lint && pnpm typecheck && pnpm lint:tokens && pnpm test"
   }
 }