@medalsocial/meda 0.1.1 → 0.3.0

package/README.md

@@ -56,12 +56,17 @@ See the [demo app](./demo) for a live playground.
 
 ## Alternative: shadcn registry
 
-Prefer to copy source into your project instead of installing? The shadcn-compatible registry lives at [`./registry`](./registry). Serve it statically and run:
+Prefer to copy source into your project instead of installing? The shadcn-compatible registry is served alongside the demo playground on Cloudflare Workers.
 
 ```bash
-npx shadcn add <registry-url>/r/meda-shell.json
+# Once DNS for meda.medalsocial.com is live:
+npx shadcn add https://meda.medalsocial.com/r/meda-shell.json
+npx shadcn add https://meda.medalsocial.com/r/meda-shell-state.json
+npx shadcn add https://meda.medalsocial.com/r/meda-workbench-layout.json
 ```
 
+The registry index is at `https://meda.medalsocial.com/registry.json`. Source JSON files live under [`./registry`](./registry) in this repo and are deployed as static assets via Cloudflare Workers — see `wrangler.toml` and `.github/workflows/deploy-worker.yml`.
+
 ## Development
 
 ```bash

package/dist/chat/index.d.ts

@@ -0,0 +1,11 @@
+export type { LatencyBadgeProps, LatencyKind } from './latency-badge.js';
+export { LatencyBadge } from './latency-badge.js';
+export type { LatencyBreakdownProps } from './latency-breakdown.js';
+export { LatencyBreakdown } from './latency-breakdown.js';
+export type { ToolCallBlockProps } from './tool-call-block.js';
+export { ToolCallBlock } from './tool-call-block.js';
+export type { TranscriptStreamProps } from './transcript-stream.js';
+export { TranscriptStream } from './transcript-stream.js';
+export type { TurnCardProps } from './turn-card.js';
+export { TurnCard } from './turn-card.js';
+export type { Speaker, ToolCall, Turn, TurnLatency } from './types.js';

package/dist/chat/index.js

@@ -0,0 +1,5 @@
+export { LatencyBadge } from './latency-badge.js';
+export { LatencyBreakdown } from './latency-breakdown.js';
+export { ToolCallBlock } from './tool-call-block.js';
+export { TranscriptStream } from './transcript-stream.js';
+export { TurnCard } from './turn-card.js';

package/dist/chat/latency-badge.d.ts

@@ -0,0 +1,7 @@
+export type LatencyKind = 'stt' | 'claude' | 'tts';
+export interface LatencyBadgeProps {
+    kind: LatencyKind;
+    ms: number;
+    className?: string;
+}
+export declare function LatencyBadge({ kind, ms, className }: LatencyBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/chat/latency-badge.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const KIND = {
+    stt: { label: 'STT', tone: 'text-sky-400' },
+    claude: { label: 'Claude', tone: 'text-primary' },
+    tts: { label: 'TTS', tone: 'text-emerald-500' },
+};
+function fmt(ms) {
+    if (ms >= 1000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    return `${Math.round(ms)}ms`;
+}
+export function LatencyBadge({ kind, ms, className }) {
+    const meta = KIND[kind];
+    return (_jsxs("span", { "data-kind": kind, className: [
+            'inline-flex items-center gap-1.5 text-[11px] tabular-nums',
+            meta.tone,
+            className ?? '',
+        ].join(' '), children: [_jsx("span", { "aria-hidden": "true", className: "size-1 rounded-full bg-current" }), meta.label, " ", fmt(ms)] }));
+}

package/dist/chat/latency-breakdown.d.ts

@@ -0,0 +1,8 @@
+export interface LatencyBreakdownProps {
+    sttMs: number;
+    claudeMs: number;
+    ttsMs: number;
+    showLegend?: boolean;
+    className?: string;
+}
+export declare function LatencyBreakdown({ sttMs, claudeMs, ttsMs, showLegend, className, }: LatencyBreakdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/chat/latency-breakdown.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LatencyBadge } from './latency-badge.js';
+export function LatencyBreakdown({ sttMs, claudeMs, ttsMs, showLegend = true, className, }) {
+    const total = Math.max(1, sttMs + claudeMs + ttsMs);
+    const sttPct = (sttMs / total) * 100;
+    const claudePct = (claudeMs / total) * 100;
+    const ttsPct = (ttsMs / total) * 100;
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "flex h-1.5 gap-0.5 overflow-hidden rounded-sm bg-muted", children: [_jsx("span", { "data-segment": "stt", className: "block bg-sky-400", style: { width: `${sttPct}%` } }), _jsx("span", { "data-segment": "claude", className: "block bg-primary", style: { width: `${claudePct}%` } }), _jsx("span", { "data-segment": "tts", className: "block bg-emerald-500", style: { width: `${ttsPct}%` } })] }), showLegend && (_jsxs("div", { className: "mt-1.5 flex flex-wrap gap-3 text-[11px] tabular-nums text-muted-foreground", children: [_jsx(LatencyBadge, { kind: "stt", ms: sttMs }), _jsx(LatencyBadge, { kind: "claude", ms: claudeMs }), _jsx(LatencyBadge, { kind: "tts", ms: ttsMs })] }))] }));
+}

package/dist/chat/public.d.ts

@@ -0,0 +1 @@
+export type { Speaker, ToolCall, Turn, TurnLatency } from './types.js';

package/dist/chat/public.js

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

package/dist/chat/tool-call-block.d.ts

@@ -0,0 +1,6 @@
+import type { ToolCall } from './types.js';
+export interface ToolCallBlockProps {
+    call: ToolCall;
+    className?: string;
+}
+export declare function ToolCallBlock({ call, className }: ToolCallBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/chat/tool-call-block.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Zap } from 'lucide-react';
+function safeStringify(v) {
+    // Tolerate values JSON.stringify can't handle (BigInt, circular refs, etc.)
+    // so a malformed tool arg never crashes the transcript view.
+    try {
+        const out = JSON.stringify(v);
+        return out === undefined ? String(v) : out;
+    }
+    catch {
+        return String(v);
+    }
+}
+export function ToolCallBlock({ call, className }) {
+    return (_jsxs("div", { className: [
+            'mt-3 rounded-md border border-border border-l-2 border-l-amber-500 bg-card p-3 font-mono text-xs',
+            className ?? '',
+        ].join(' '), children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-2 text-[11px]", children: [_jsx(Zap, { className: "size-3 text-amber-500" }), _jsx("strong", { className: "font-semibold text-foreground", children: call.name }), call.latencyMs != null && (_jsxs("span", { className: "ml-auto tabular-nums text-muted-foreground", children: [call.latencyMs, "ms"] }))] }), _jsxs("div", { className: "text-muted-foreground", children: [Object.entries(call.args && typeof call.args === 'object' ? call.args : {}).map(([k, v], i) => (_jsxs("span", { children: [i > 0 && ', ', _jsx("span", { className: "text-primary", children: k }), ": ", '', _jsx("span", { className: "text-emerald-500", children: safeStringify(v) })] }, k))), call.resultSummary && (_jsxs("span", { className: "text-muted-foreground", children: [" \u2192 ", call.resultSummary] }))] })] }));
+}

package/dist/chat/transcript-stream.d.ts

@@ -0,0 +1,10 @@
+import type { Turn } from './types.js';
+export interface TranscriptStreamProps {
+    turns: Turn[];
+    /** When true (default), auto-scroll to bottom on new turn IF user is already near bottom. */
+    autoScroll?: boolean;
+    tz?: string;
+    onTurnPlay?: (turnId: string) => void;
+    className?: string;
+}
+export declare function TranscriptStream({ turns, autoScroll, tz, onTurnPlay, className, }: TranscriptStreamProps): import("react/jsx-runtime").JSX.Element;

package/dist/chat/transcript-stream.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { TurnCard } from './turn-card.js';
+const SCROLL_THRESHOLD = 120;
+export function TranscriptStream({ turns, autoScroll = true, tz, onTurnPlay, className, }) {
+    const ref = useRef(null);
+    // Snapshot of "was the user near the bottom?" sampled BEFORE the new turn
+    // renders, so that a tall appended turn doesn't push the bottom off-screen
+    // and falsely look like the user scrolled away.
+    const wasAtBottomRef = useRef(true);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const onScroll = () => {
+            const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+            wasAtBottomRef.current = distanceFromBottom < SCROLL_THRESHOLD;
+        };
+        el.addEventListener('scroll', onScroll, { passive: true });
+        return () => el.removeEventListener('scroll', onScroll);
+    }, []);
+    // Auto-follow last turn when the user was near the bottom before the new turn appended.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: turns changes trigger scroll check
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !autoScroll)
+            return;
+        if (wasAtBottomRef.current) {
+            el.scrollTop = el.scrollHeight;
+        }
+    }, [turns, autoScroll]);
+    if (turns.length === 0) {
+        return (_jsx("div", { ref: ref, className: [
+                'flex flex-1 items-center justify-center text-sm text-muted-foreground',
+                className ?? '',
+            ].join(' '), children: "No turns yet." }));
+    }
+    const ref0 = turns[0]?.startedAt ?? 0;
+    return (_jsx("div", { ref: ref, className: ['flex-1 overflow-y-auto px-7 pb-6 pt-2', className ?? ''].join(' '), children: turns.map((t) => (_jsx(TurnCard, { turn: t, startedAtRef: ref0, tz: tz, onPlay: onTurnPlay }, t.id))) }));
+}

package/dist/chat/turn-card.d.ts

@@ -0,0 +1,10 @@
+import type { Turn } from './types.js';
+export interface TurnCardProps {
+    turn: Turn;
+    /** Reference instant for the relative offset column (typically the conversation start). */
+    startedAtRef: number;
+    tz?: string;
+    onPlay?: (turnId: string) => void;
+    className?: string;
+}
+export declare function TurnCard({ turn, startedAtRef, tz, onPlay, className }: TurnCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/chat/turn-card.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Play } from 'lucide-react';
+import { formatClock, formatRelativeOffset } from '../lib/format-time.js';
+import { LatencyBadge } from './latency-badge.js';
+import { ToolCallBlock } from './tool-call-block.js';
+const SPEAKER_LABEL = {
+    user: 'You',
+    assistant: 'Assistant',
+    system: 'System',
+};
+export function TurnCard({ turn, startedAtRef, tz, onPlay, className }) {
+    const label = turn.speakerLabel ?? SPEAKER_LABEL[turn.speaker];
+    const offset = turn.startedAt - startedAtRef;
+    const speakerColor = turn.speaker === 'assistant'
+        ? 'text-primary'
+        : turn.speaker === 'system'
+            ? 'text-amber-500'
+            : 'text-foreground';
+    return (_jsxs("div", { className: [
+            'grid grid-cols-[64px_1fr] gap-5 border-b border-border py-4 last:border-b-0',
+            className ?? '',
+        ].join(' '), children: [_jsxs("div", { className: "pt-1 text-[11px] tabular-nums text-muted-foreground", children: [_jsx("strong", { className: "mb-0.5 block text-[12px] font-medium text-muted-foreground", children: formatClock(new Date(turn.startedAt), { tz }) }), formatRelativeOffset(offset)] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-2", children: [_jsx("span", { className: ['text-[11px] font-semibold uppercase tracking-wider', speakerColor].join(' '), children: label }), turn.modelLabel && (_jsx("span", { className: "rounded bg-muted px-1.5 py-px text-[10px] font-medium text-muted-foreground", children: turn.modelLabel })), turn.spokenSeconds != null && turn.speaker === 'user' && (_jsxs("span", { className: "rounded bg-muted px-1.5 py-px text-[10px] font-medium text-muted-foreground", children: ["spoken \u00B7 ", turn.spokenSeconds.toFixed(1), "s"] }))] }), _jsxs("p", { className: "text-[15px] leading-relaxed text-foreground", "data-streaming": String(turn.streaming ?? false), children: [turn.text, turn.streaming && (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 animate-pulse text-primary", children: "\u258D" }))] }), turn.toolCalls?.map((c) => (_jsx(ToolCallBlock, { call: c }, c.id))), (turn.audioUrl || turn.latency) && (_jsxs("div", { className: "mt-2.5 flex flex-wrap items-center gap-4 text-[11px] text-muted-foreground", children: [turn.audioUrl && (_jsx("button", { type: "button", "aria-label": "Play this turn", onClick: () => onPlay?.(turn.id), className: "inline-flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground hover:text-foreground", children: _jsx(Play, { className: "size-3" }) })), turn.latency?.sttMs != null && _jsx(LatencyBadge, { kind: "stt", ms: turn.latency.sttMs }), turn.latency?.claudeMs != null && (_jsx(LatencyBadge, { kind: "claude", ms: turn.latency.claudeMs })), turn.latency?.ttsMs != null && _jsx(LatencyBadge, { kind: "tts", ms: turn.latency.ttsMs })] }))] })] }));
+}

package/dist/chat/types.d.ts

@@ -0,0 +1,36 @@
+export type Speaker = 'user' | 'assistant' | 'system';
+/** Per-stage latency breakdown for one turn. */
+export interface TurnLatency {
+    sttMs?: number;
+    claudeMs?: number;
+    ttsMs?: number;
+}
+/** A single AI tool / function-call invocation. */
+export interface ToolCall {
+    id: string;
+    name: string;
+    args: Record<string, unknown>;
+    /** Short human-readable summary, e.g. "3 events". */
+    resultSummary?: string;
+    latencyMs?: number;
+}
+/** One conversational exchange. */
+export interface Turn {
+    id: string;
+    speaker: Speaker;
+    /** Display label, e.g. "Morpheus" or "Operator (Ali)". Optional override of speaker. */
+    speakerLabel?: string;
+    /** Optional model identifier, e.g. "claude-opus-4-7". */
+    modelLabel?: string;
+    /** URL or blob: URL for per-turn replay. */
+    audioUrl?: string;
+    /** Spoken duration if known. */
+    spokenSeconds?: number;
+    text: string;
+    /** Unix ms. */
+    startedAt: number;
+    /** True if the assistant is still streaming this turn. */
+    streaming?: boolean;
+    latency?: TurnLatency;
+    toolCalls?: ToolCall[];
+}

package/dist/chat/types.js

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

package/dist/index.d.ts

@@ -1 +1,4 @@
+export * from './chat/public.js';
+export * from './panel/public.js';
 export * from './shell/public.js';
+export * from './timeline/public.js';

package/dist/index.js

@@ -1 +1,4 @@
+export * from './chat/public.js';
+export * from './panel/public.js';
 export * from './shell/public.js';
+export * from './timeline/public.js';

package/dist/lib/format-time.d.ts

@@ -0,0 +1,9 @@
+export interface FormatClockOptions {
+    /** IANA timezone, e.g. "Europe/Stockholm". Defaults to local tz. */
+    tz?: string;
+    /** Include seconds (default true). */
+    withSeconds?: boolean;
+}
+export declare function formatClock(date: Date, opts?: FormatClockOptions): string;
+export declare function formatDuration(ms: number): string;
+export declare function formatRelativeOffset(ms: number): string;

package/dist/lib/format-time.js

@@ -0,0 +1,34 @@
+export function formatClock(date, opts = {}) {
+    const { tz, withSeconds = true } = opts;
+    const fmt = new Intl.DateTimeFormat('en-GB', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: withSeconds ? '2-digit' : undefined,
+        hour12: false,
+        timeZone: tz,
+    });
+    return fmt.format(date);
+}
+export function formatDuration(ms) {
+    if (ms < 0)
+        ms = 0;
+    const totalSec = Math.floor(ms / 1000);
+    const h = Math.floor(totalSec / 3600);
+    const m = Math.floor((totalSec % 3600) / 60);
+    const s = totalSec % 60;
+    if (h > 0)
+        return `${h}h ${m}m`;
+    if (m > 0)
+        return `${m}m ${s}s`;
+    return `${s}s`;
+}
+export function formatRelativeOffset(ms) {
+    const sign = ms < 0 ? '-' : '+';
+    const abs = Math.abs(ms);
+    const totalSec = Math.floor(abs / 1000);
+    const m = Math.floor(totalSec / 60);
+    const s = totalSec % 60;
+    if (m === 0)
+        return `${sign}${s}s`;
+    return `${sign}${m}m ${s}s`;
+}

package/dist/panel/index.d.ts

@@ -0,0 +1,6 @@
+export type { InspectorProps } from './inspector.js';
+export { Inspector } from './inspector.js';
+export type { InspectorFieldProps } from './inspector-field.js';
+export { InspectorField } from './inspector-field.js';
+export type { InspectorJSONProps } from './inspector-json.js';
+export { InspectorJSON } from './inspector-json.js';

package/dist/panel/index.js

@@ -0,0 +1,3 @@
+export { Inspector } from './inspector.js';
+export { InspectorField } from './inspector-field.js';
+export { InspectorJSON } from './inspector-json.js';

package/dist/panel/inspector-field.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface InspectorFieldProps {
+    label: string;
+    value: ReactNode;
+    /** Optional smaller hint after the value, e.g. provider info. */
+    hint?: ReactNode;
+    className?: string;
+}
+export declare function InspectorField({ label, value, hint, className }: InspectorFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/panel/inspector-field.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function InspectorField({ label, value, hint, className }) {
+    return (_jsxs("div", { className: ['border-b border-border py-3 last:border-b-0', className ?? ''].join(' '), children: [_jsx("div", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }), _jsxs("div", { className: "text-[13px] tabular-nums text-foreground", children: [value, hint != null && _jsxs("span", { className: "text-[12px] text-muted-foreground", children: [" ", hint] })] })] }));
+}

package/dist/panel/inspector-json.d.ts

@@ -0,0 +1,7 @@
+export interface InspectorJSONProps {
+    data: unknown;
+    /** Indent size in spaces. */
+    indent?: number;
+    className?: string;
+}
+export declare function InspectorJSON({ data, indent, className }: InspectorJSONProps): import("react/jsx-runtime").JSX.Element;

package/dist/panel/inspector-json.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function tokenize(value, level, key, indent, seen) {
+    const out = [];
+    const pad = ' '.repeat(level * indent);
+    if (key !== null) {
+        out.push({ kind: 'punct', text: pad });
+        out.push({ kind: 'key', text: `"${key}"` });
+        out.push({ kind: 'punct', text: ': ' });
+    }
+    else {
+        out.push({ kind: 'punct', text: pad });
+    }
+    if (value === null) {
+        out.push({ kind: 'literal', text: 'null' });
+    }
+    else if (typeof value === 'string') {
+        out.push({ kind: 'string', text: JSON.stringify(value) });
+    }
+    else if (typeof value === 'number') {
+        out.push({ kind: 'number', text: String(value) });
+    }
+    else if (typeof value === 'boolean') {
+        out.push({ kind: 'literal', text: String(value) });
+    }
+    else if (Array.isArray(value)) {
+        if (seen.has(value)) {
+            out.push({ kind: 'literal', text: '"[Circular]"' });
+        }
+        else {
+            seen.add(value);
+            out.push({ kind: 'punct', text: '[\n' });
+            value.forEach((v, i) => {
+                out.push(...tokenize(v, level + 1, null, indent, seen));
+                out.push({ kind: 'punct', text: i < value.length - 1 ? ',\n' : '\n' });
+            });
+            out.push({ kind: 'punct', text: `${pad}]` });
+        }
+    }
+    else if (typeof value === 'object') {
+        const obj = value;
+        if (seen.has(obj)) {
+            out.push({ kind: 'literal', text: '"[Circular]"' });
+        }
+        else {
+            seen.add(obj);
+            out.push({ kind: 'punct', text: '{\n' });
+            const entries = Object.entries(obj);
+            entries.forEach(([k, v], i) => {
+                out.push(...tokenize(v, level + 1, k, indent, seen));
+                out.push({ kind: 'punct', text: i < entries.length - 1 ? ',\n' : '\n' });
+            });
+            out.push({ kind: 'punct', text: `${pad}}` });
+        }
+    }
+    else {
+        out.push({ kind: 'literal', text: String(value) });
+    }
+    return out;
+}
+const KIND_CLASS = {
+    punct: 'text-muted-foreground',
+    key: 'text-primary',
+    string: 'text-emerald-500',
+    number: 'text-amber-500',
+    literal: 'text-amber-500',
+};
+export function InspectorJSON({ data, indent = 2, className }) {
+    const tokens = tokenize(data, 0, null, indent, new WeakSet());
+    return (_jsx("pre", { className: [
+            'mt-1.5 overflow-x-auto rounded-md border border-border bg-background p-2.5 font-mono text-[11px] leading-relaxed text-foreground',
+            className ?? '',
+        ].join(' '), children: tokens.map((t, i) => (_jsx("span", { className: KIND_CLASS[t.kind], children: t.text }, i))) }));
+}

package/dist/panel/inspector.d.ts

@@ -0,0 +1,7 @@
+import type { InspectorTab } from './types.js';
+export interface InspectorProps {
+    tabs: InspectorTab[];
+    defaultTab?: string;
+    className?: string;
+}
+export declare function Inspector({ tabs, defaultTab, className }: InspectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/panel/inspector.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+export function Inspector({ tabs, defaultTab, className }) {
+    const [active, setActive] = useState(defaultTab ?? tabs[0]?.id ?? '');
+    const current = tabs.find((t) => t.id === active) ?? tabs[0];
+    return (_jsxs("aside", { className: ['flex h-full flex-col border-l border-border bg-card', className ?? ''].join(' '), children: [_jsx("div", { role: "tablist", className: "flex gap-0.5 border-b border-border px-3.5", children: tabs.map((t) => (_jsx("button", { type: "button", role: "tab", "aria-selected": t.id === active, onClick: () => setActive(t.id), className: [
+                        'border-b-2 px-2.5 py-3 text-xs',
+                        t.id === active
+                            ? 'border-primary text-foreground'
+                            : 'border-transparent text-muted-foreground hover:text-foreground',
+                    ].join(' '), children: t.label }, t.id))) }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 pb-8 pt-4", children: current?.content })] }));
+}

package/dist/panel/public.d.ts

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

package/dist/panel/public.js

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

package/dist/panel/types.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface InspectorTab {
+    id: string;
+    label: string;
+    content: ReactNode;
+}

package/dist/panel/types.js

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

package/dist/styles.css

@@ -2,3 +2,25 @@
   --meda-shell-panel-dock-radius: var(--radius-4xl, 1.5rem);
   --meda-shell-panel-dock-shadow: var(--shadow-panel-elevated, 0 32px 90px rgb(0 0 0 / 0.45));
 }
+
+/* VoiceOrb (WebGL): minimal container styles — visual identity lives in the GLSL shader. */
+.meda-voice-orb {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  isolation: isolate;
+  overflow: hidden;
+  border-radius: 9999px;
+  cursor: pointer;
+  position: relative;
+}
+.meda-voice-orb[disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.meda-voice-orb canvas {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+  pointer-events: none;
+}

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,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, ChevronLeft, ChevronRight } from 'lucide-react';
+// "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: ['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" }) })] }));
+}

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,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 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 }))] }));
+}
+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)]" }));
+}

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';