@medalsocial/meda 1.7.0 → 2.1.0

package/dist/shell/internal/mobile-drawers.js

@@ -11,7 +11,7 @@ import { useTheme } from '../theme.js';
  * any custom-content drawers. Mount once near the AppShell root; drawers
  * open/close via `ctx.mobileDrawer.open` provider state.
  */
-export function MobileDrawers({ menuItems = [], menuActiveId, menuRenderLink, workspaceMenuItems, workspaceMenuFooter, module, moduleAppId, panelViews = [], defaultView, customContent = {}, }) {
+export function MobileDrawers({ menuItems = [], menuActiveId, menuRenderLink, workspaceMenuItems, workspaceMenuFooter, module, moduleAppId, moduleHeader, moduleScroll, panelViews = [], defaultView, customContent = {}, }) {
     const ctx = useMedaShell();
     const open = ctx.mobileDrawer.open;
     const setOpen = ctx.mobileDrawer.setOpen;
@@ -24,7 +24,7 @@ export function MobileDrawers({ menuItems = [], menuActiveId, menuRenderLink, wo
         workspaceId: ctx.workspace.id,
         appId: moduleAppId ?? ctx.activeAppId,
     };
-    return (_jsxs(_Fragment, { children: [_jsx(MenuDrawer, { open: open === 'menu-drawer', onClose: close, items: menuItems, activeId: menuActiveId, renderLink: menuRenderLink, workspaceItems: workspaceMenuItems, workspaceFooter: workspaceMenuFooter }), _jsx(ModuleDrawer, { open: open === 'module-drawer', onClose: close, module: module, renderCtx: moduleRenderCtx }), _jsx(PanelsDrawer, { open: open === 'panels-drawer', onClose: close, panelViews: panelViews, defaultView: defaultView, renderCtx: renderCtx }), _jsx(AiDrawer, { open: open === 'ai-drawer', onClose: close, panelViews: panelViews, renderCtx: renderCtx }), Object.entries(customContent).map(([id, renderFn]) => (_jsx(Drawer, { open: open === id, onOpenChange: (o) => !o && close(), direction: "bottom", children: _jsx(DrawerContent, { children: renderFn(close) }) }, id)))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(MenuDrawer, { open: open === 'menu-drawer', onClose: close, items: menuItems, activeId: menuActiveId, renderLink: menuRenderLink, workspaceItems: workspaceMenuItems, workspaceFooter: workspaceMenuFooter }), _jsx(ModuleDrawer, { open: open === 'module-drawer', onClose: close, module: module, renderCtx: moduleRenderCtx, header: moduleHeader, scroll: moduleScroll }), _jsx(PanelsDrawer, { open: open === 'panels-drawer', onClose: close, panelViews: panelViews, defaultView: defaultView, renderCtx: renderCtx }), _jsx(AiDrawer, { open: open === 'ai-drawer', onClose: close, panelViews: panelViews, renderCtx: renderCtx }), Object.entries(customContent).map(([id, renderFn]) => (_jsx(Drawer, { open: open === id, onOpenChange: (o) => !o && close(), direction: "bottom", children: _jsx(DrawerContent, { children: renderFn(close) }) }, id)))] }));
 }
 // ---------------------------------------------------------------------------
 // Internal sub-drawers
@@ -110,14 +110,17 @@ function MobileThemeMenuItem({ onClose }) {
             onClose();
         }, children: [_jsx(Icon, { size: 18, "aria-hidden": "true" }), _jsx("span", { children: THEME_LABEL[theme] })] }));
 }
-function ModuleDrawer({ open, onClose, module, renderCtx, }) {
+function ModuleDrawer({ open, onClose, module, renderCtx, header = 'auto', scroll = 'auto', }) {
     const items = module?.items ?? [];
     if (!module || (items.length === 0 && !module.render))
         return null;
-    return (_jsx(Drawer, { open: open, onOpenChange: (o) => !o && onClose(), direction: "left", children: _jsxs(DrawerContent, { children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: module.label }), module.description && (_jsx(DrawerDescription, { className: "text-muted-foreground text-xs", children: module.description }))] }), items.length > 0 && (_jsx("nav", { className: "flex flex-col gap-0.5 p-2", children: items.map((item) => {
-                        const Icon = item.icon;
-                        return (_jsxs("a", { href: item.to, onClick: onClose, className: "flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground", children: [_jsx(Icon, { size: 16, "aria-hidden": "true" }), _jsx("span", { children: item.label })] }, item.id));
-                    }) })), module.render?.(renderCtx)] }) }));
+    const hasRender = typeof module.render === 'function';
+    const showHeader = header === 'visible' || (header === 'auto' && items.length > 0 && !hasRender);
+    const title = (_jsxs(_Fragment, { children: [_jsx(DrawerTitle, { className: showHeader ? undefined : 'sr-only', children: module.label }), module.description && (_jsx(DrawerDescription, { className: showHeader ? 'text-muted-foreground text-xs' : 'sr-only', children: module.description }))] }));
+    return (_jsx(Drawer, { open: open, onOpenChange: (o) => !o && onClose(), direction: "left", children: _jsxs(DrawerContent, { children: [showHeader ? _jsx(DrawerHeader, { children: title }) : title, _jsxs("div", { "data-meda-context-rail-scroll-area": "", className: cn('min-h-0 flex-1', scroll === 'auto' ? 'overflow-y-auto overflow-x-hidden' : 'overflow-hidden'), children: [items.length > 0 && (_jsx("nav", { className: "flex flex-col gap-0.5 p-2", children: items.map((item) => {
+                                const Icon = item.icon;
+                                return (_jsxs("a", { href: item.to, onClick: onClose, className: "flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground", children: [_jsx(Icon, { size: 16, "aria-hidden": "true" }), _jsx("span", { children: item.label })] }, item.id));
+                            }) })), module.render?.(renderCtx)] })] }) }));
 }
 function PanelsDrawer({ open, onClose, panelViews, defaultView, renderCtx, }) {
     const ctx = useMedaShell();

package/dist/shell/right-panel.js

@@ -123,7 +123,16 @@ export function RightPanel({ panelViews = EMPTY_PANEL_VIEWS, defaultView, modes
     // Z-index escalation: fullscreen covers header + rails
     const zIndexClass = mode === 'fullscreen' ? 'z-[var(--z-shell-fullscreen)]' : 'z-[var(--z-shell-panel)]';
     const activePanelView = resolvedPanelViews.find((v) => v.id === activeView);
-    const cycleAriaLabel = mode === 'panel' ? 'Expand panel' : mode === 'expanded' ? 'Maximize panel' : 'Restore panel';
+    let cycleAriaLabel;
+    if (mode === 'panel') {
+        cycleAriaLabel = 'Expand panel';
+    }
+    else if (mode === 'expanded') {
+        cycleAriaLabel = 'Maximize panel';
+    }
+    else {
+        cycleAriaLabel = 'Restore panel';
+    }
     const handleResize = (w) => setDisplayWidth(w);
     const handleCommit = (w) => {
         setDisplayWidth(null);

package/dist/shell/shell-header.js

@@ -83,7 +83,7 @@ export function AppTabs({ renderLink } = {}) {
                         },
                     }) }, app.id));
             }
-            return (_jsx("button", { type: "button", "aria-current": isActive ? 'page' : undefined, onClick: handleClick, onMouseEnter: () => { }, className: className, children: children }, app.id));
+            return (_jsx("button", { type: "button", "aria-current": isActive ? 'page' : undefined, onClick: handleClick, onMouseEnter: () => undefined, className: className, children: children }, app.id));
         }) }));
 }
 // ---------------------------------------------------------------------------

package/dist/shell/shell-provider.js

@@ -107,63 +107,79 @@ export function MedaShellProvider(props) {
         storage,
     });
     const isMobile = useShellViewport() === 'mobile';
+    const setPanelMode = useCallback((mode) => setLayoutState((prev) => ({
+        ...prev,
+        rightPanel: { ...prev.rightPanel, mode },
+    })), [setLayoutState]);
+    const setPanelActiveView = useCallback((activeView) => setLayoutState((prev) => ({
+        ...prev,
+        rightPanel: { ...prev.rightPanel, activeView },
+    })), [setLayoutState]);
+    const setPanelWidth = useCallback((width) => setLayoutState((prev) => ({
+        ...prev,
+        rightPanel: { ...prev.rightPanel, width },
+    })), [setLayoutState]);
+    const openPanel = useCallback(() => {
+        if (isMobile)
+            setMobileDrawerOpen('panels-drawer');
+        setLayoutState((prev) => ({
+            ...prev,
+            rightPanel: {
+                ...prev.rightPanel,
+                mode: prev.rightPanel.mode === 'closed' ? 'panel' : prev.rightPanel.mode,
+            },
+        }));
+    }, [isMobile, setLayoutState]);
+    const closePanel = useCallback(() => {
+        if (isMobile)
+            setMobileDrawerOpen((open) => (open === 'panels-drawer' ? null : open));
+        setLayoutState((prev) => ({
+            ...prev,
+            rightPanel: { ...prev.rightPanel, mode: 'closed' },
+        }));
+    }, [isMobile, setLayoutState]);
+    const togglePanel = useCallback(() => {
+        if (isMobile) {
+            setMobileDrawerOpen((open) => (open === 'panels-drawer' ? null : 'panels-drawer'));
+        }
+        setLayoutState((prev) => ({
+            ...prev,
+            rightPanel: {
+                ...prev.rightPanel,
+                mode: prev.rightPanel.mode === 'closed' ? 'panel' : 'closed',
+            },
+        }));
+    }, [isMobile, setLayoutState]);
+    const focusPanel = useCallback((viewId) => setLayoutState((prev) => {
+        const nextMode = prev.rightPanel.mode === 'closed' ? 'panel' : prev.rightPanel.mode;
+        return {
+            ...prev,
+            rightPanel: { ...prev.rightPanel, mode: nextMode, activeView: viewId },
+        };
+    }), [setLayoutState]);
     const panel = useMemo(() => ({
         mode: layoutState.rightPanel.mode,
         activeView: layoutState.rightPanel.activeView,
         width: layoutState.rightPanel.width,
-        setMode: (mode) => setLayoutState((prev) => ({
-            ...prev,
-            rightPanel: { ...prev.rightPanel, mode },
-        })),
-        setActiveView: (activeView) => setLayoutState((prev) => ({
-            ...prev,
-            rightPanel: { ...prev.rightPanel, activeView },
-        })),
-        setWidth: (width) => setLayoutState((prev) => ({
-            ...prev,
-            rightPanel: { ...prev.rightPanel, width },
-        })),
-        open: () => {
-            if (isMobile)
-                setMobileDrawerOpen('panels-drawer');
-            setLayoutState((prev) => ({
-                ...prev,
-                rightPanel: {
-                    ...prev.rightPanel,
-                    mode: prev.rightPanel.mode === 'closed' ? 'panel' : prev.rightPanel.mode,
-                },
-            }));
-        },
-        close: () => {
-            if (isMobile)
-                setMobileDrawerOpen((open) => (open === 'panels-drawer' ? null : open));
-            setLayoutState((prev) => ({
-                ...prev,
-                rightPanel: { ...prev.rightPanel, mode: 'closed' },
-            }));
-        },
-        toggle: () => {
-            if (isMobile) {
-                setMobileDrawerOpen((open) => (open === 'panels-drawer' ? null : 'panels-drawer'));
-            }
-            setLayoutState((prev) => ({
-                ...prev,
-                rightPanel: {
-                    ...prev.rightPanel,
-                    mode: prev.rightPanel.mode === 'closed' ? 'panel' : 'closed',
-                },
-            }));
-        },
-        // focus(viewId) — opens panel + switches to view in one call.
-        // Only flips closed → panel; preserves expanded / fullscreen modes.
-        focus: (viewId) => setLayoutState((prev) => {
-            const nextMode = prev.rightPanel.mode === 'closed' ? 'panel' : prev.rightPanel.mode;
-            return {
-                ...prev,
-                rightPanel: { ...prev.rightPanel, mode: nextMode, activeView: viewId },
-            };
-        }),
-    }), [isMobile, layoutState, setLayoutState]);
+        setMode: setPanelMode,
+        setActiveView: setPanelActiveView,
+        setWidth: setPanelWidth,
+        open: openPanel,
+        close: closePanel,
+        toggle: togglePanel,
+        focus: focusPanel,
+    }), [
+        layoutState.rightPanel.mode,
+        layoutState.rightPanel.activeView,
+        layoutState.rightPanel.width,
+        setPanelMode,
+        setPanelActiveView,
+        setPanelWidth,
+        openPanel,
+        closePanel,
+        togglePanel,
+        focusPanel,
+    ]);
     const contextRail = useMemo(() => ({
         width: layoutState.contextRail.width,
         collapsed: layoutState.contextRail.collapsed,

package/dist/shell/theme-next-themes.js

@@ -46,7 +46,7 @@ function getClientThemeSnapshot() {
 }
 function subscribeToSystemTheme(mql, listener) {
     if (!mql)
-        return () => { };
+        return () => undefined;
     if (typeof mql.addEventListener === 'function') {
         mql.addEventListener('change', listener);
         return () => mql.removeEventListener('change', listener);
@@ -55,7 +55,7 @@ function subscribeToSystemTheme(mql, listener) {
         mql.addListener(listener);
         return () => mql.removeListener?.(listener);
     }
-    return () => { };
+    return () => undefined;
 }
 export function NextThemesAdapter({ children }) {
     const [theme, setThemeState] = useState('system');

package/dist/shell/theme.js

@@ -31,7 +31,13 @@ export function DefaultThemeProvider({ children }) {
     useEffect(() => {
         const mq = window.matchMedia('(prefers-color-scheme: dark)');
         const apply = () => {
-            const resolved = theme === 'system' ? (mq.matches ? 'dark' : 'light') : theme;
+            let resolved;
+            if (theme !== 'system') {
+                resolved = theme;
+            }
+            else {
+                resolved = mq.matches ? 'dark' : 'light';
+            }
             setResolvedTheme(resolved);
             document.documentElement.classList.toggle('dark', resolved === 'dark');
         };

package/dist/shell/types.d.ts

@@ -50,6 +50,8 @@ export interface PanelView {
 export type PanelMode = 'closed' | 'panel' | 'expanded' | 'fullscreen';
 export type ShellMainLayout = 'workspace' | 'centered' | 'fullbleed';
 export type ShellViewport = 'mobile' | 'tablet' | 'desktop' | 'wide' | 'ultrawide';
+export type ContextRailHeader = 'auto' | 'visible' | 'hidden';
+export type ContextRailScroll = 'auto' | 'none';
 export interface MobileBottomNavItem {
     id: string;
     label: string | (() => string);
@@ -103,6 +105,8 @@ export interface AppShellContextRailConfig {
     appId: string;
     module: ContextModule;
     activeItemId?: string;
+    header?: ContextRailHeader;
+    scroll?: ContextRailScroll;
 }
 /** RightPanel configuration for `<AppShell variant="workspace">`. */
 export interface AppShellRightPanelConfig {

package/dist/shell/use-shell-viewport.js

@@ -7,11 +7,18 @@ const BREAKPOINTS = {
     wide: '(min-width: 1280px) and (max-width: 1535px)',
     ultrawide: '(min-width: 1536px)',
 };
-function detectViewport() {
+function getMatchMedia() {
     if (typeof window === 'undefined')
+        return null;
+    if (typeof window.matchMedia !== 'function')
+        return null;
+    return window.matchMedia.bind(window);
+}
+function detectViewport(matchMedia = getMatchMedia()) {
+    if (!matchMedia)
         return 'desktop';
     for (const [band, query] of Object.entries(BREAKPOINTS)) {
-        if (window.matchMedia(query).matches)
+        if (matchMedia(query).matches)
             return band;
     }
     return 'desktop';
@@ -21,9 +28,12 @@ export function useShellViewport() {
     // client's first paint — actual band resolves in the post-mount effect.
     const [viewport, setViewport] = useState('desktop');
     useEffect(() => {
-        setViewport(detectViewport());
+        const matchMedia = getMatchMedia();
+        setViewport(detectViewport(matchMedia));
+        if (!matchMedia)
+            return;
         const cleanups = Object.entries(BREAKPOINTS).map(([band, query]) => {
-            const mql = window.matchMedia(query);
+            const mql = matchMedia(query);
             const onChange = () => {
                 if (mql.matches)
                     setViewport(band);

package/dist/timeline/lane-timeline.js

@@ -65,7 +65,7 @@ function formatTime(d) {
 }
 function buildTicks(start, end, range) {
     const span = end.getTime() - start.getTime();
-    const tickCount = range === '7d' ? 7 : range === '24h' ? 8 : 7;
+    const tickCount = range === '24h' ? 8 : 7;
     const out = [];
     for (let i = 0; i <= tickCount; i++) {
         const t = new Date(start.getTime() + (span * i) / tickCount);

package/dist/timeline/scrub-bar.js

@@ -34,7 +34,7 @@ export function ScrubBar({ durationMs, positionMs, isLive = false, marks, onSeek
             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", "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) })] })] }));
+    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 ?? (() => undefined), 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: cn('inline-flex size-6 items-center justify-center rounded', variant === 'primary'

package/dist/timeline/timeline-tape.js

@@ -6,6 +6,13 @@ 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;
+function getSegmentColorClass(event) {
+    if (event.isLive)
+        return 'bg-success-600 shadow-[0_0_12px_rgba(16,185,129,0.5)]';
+    if (event.kind === 'error')
+        return 'bg-destructive';
+    return 'bg-info-500 shadow-[0_0_8px_rgba(56,189,248,0.35)]';
+}
 /** 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;
@@ -53,11 +60,7 @@ 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: 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) => {
+    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', getSegmentColorClass(event)), 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-orb-scene.js

@@ -23,13 +23,13 @@ const PHASE_TARGET = {
 function splitmix32(seed) {
     let a = seed;
     return () => {
-        a = (a + 0x9e3779b9) | 0;
+        a = (a + 0x9e_37_79_b9) | 0;
         let t = a ^ (a >>> 16);
-        t = Math.imul(t, 0x21f0aaad);
+        t = Math.imul(t, 0x21_f0_aa_ad);
         t = t ^ (t >>> 15);
-        t = Math.imul(t, 0x735a2d97);
+        t = Math.imul(t, 0x73_5a_2d_97);
         t = t ^ (t >>> 15);
-        return (t >>> 0) / 4294967296;
+        return (t >>> 0) / 4_294_967_296;
     };
 }
 export function Scene({ level = 0, outputLevel = 0, phase = 'idle', colors, reducedMotion = false, pressed = false, variant = 'aurora', }) {

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

@@ -9,13 +9,14 @@ const PHASE_LABEL = {
     error: 'Error',
 };
 export function VoiceStatusPill({ phase, thinkingForMs, className }) {
-    const tone = phase === 'listening'
-        ? 'bg-primary text-primary-foreground'
-        : phase === 'speaking'
-            ? 'bg-success text-success-foreground'
-            : phase === 'error'
-                ? 'bg-destructive text-destructive-foreground'
-                : 'bg-muted text-muted-foreground';
+    const TONE_MAP = {
+        listening: 'bg-primary text-primary-foreground',
+        speaking: 'bg-success text-success-foreground',
+        error: 'bg-destructive text-destructive-foreground',
+        idle: 'bg-muted text-muted-foreground',
+        thinking: 'bg-muted text-muted-foreground',
+    };
+    const tone = TONE_MAP[phase];
     const seconds = thinkingForMs ? (thinkingForMs / 1000).toFixed(1) : null;
     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/dist/workflow-builder/edges/default-edge.d.ts

@@ -0,0 +1,10 @@
+import { type EdgeProps } from '@xyflow/react';
+interface DefaultEdgeData {
+    readOnly?: boolean;
+}
+type DefaultWorkflowEdgeProps = EdgeProps & {
+    data?: DefaultEdgeData;
+};
+declare function DefaultWorkflowEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, }: DefaultWorkflowEdgeProps): import("react/jsx-runtime").JSX.Element;
+export declare const DefaultWorkflowEdge: import("react").MemoExoticComponent<typeof DefaultWorkflowEdgeComponent>;
+export {};

package/dist/workflow-builder/edges/default-edge.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseEdge, getBezierPath } from '@xyflow/react';
+import { memo } from 'react';
+function DefaultWorkflowEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, }) {
+    const [edgePath] = getBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+    });
+    const edgeStyle = {
+        ...style,
+        stroke: 'var(--color-border)',
+        strokeWidth: 2,
+    };
+    return _jsx(BaseEdge, { path: edgePath, markerEnd: markerEnd, style: edgeStyle });
+}
+export const DefaultWorkflowEdge = memo(DefaultWorkflowEdgeComponent);

package/dist/workflow-builder/edges/index.d.ts

@@ -0,0 +1,3 @@
+import type { EdgeTypes } from '@xyflow/react';
+export { DefaultWorkflowEdge } from './default-edge.js';
+export declare const workflowEdgeTypes: EdgeTypes;

package/dist/workflow-builder/edges/index.js

@@ -0,0 +1,5 @@
+import { DefaultWorkflowEdge } from './default-edge.js';
+export { DefaultWorkflowEdge } from './default-edge.js';
+export const workflowEdgeTypes = {
+    default: DefaultWorkflowEdge,
+};

package/dist/workflow-builder/index.d.ts

@@ -0,0 +1,5 @@
+export type { WorkflowBuilderLabels, WorkflowBuilderProps, WorkflowCardCompactProps, WorkflowCardProps, WorkflowEdge, WorkflowHeaderProps, WorkflowNode, WorkflowNodeData, WorkflowNodeKind, WorkflowStatus, WorkflowSummary, WorkflowToolboxItem, } from './types.js';
+export { defaultWorkflowBuilderLabels } from './types.js';
+export { WorkflowBuilder } from './workflow-builder.js';
+export { WorkflowCard } from './workflow-card.js';
+export { WorkflowCardCompact } from './workflow-card-compact.js';

package/dist/workflow-builder/index.js

@@ -0,0 +1,12 @@
+// open/meda/src/workflow-builder/index.ts
+//
+// Subpath barrel for `@medalsocial/meda/workflow-builder`.
+//
+// Top-level `WorkflowBuilder` component plus the sibling list-row components
+// (`WorkflowCard`, `WorkflowCardCompact`) used to render workflow summaries
+// outside of the builder. Canvas, header, toolbox, nodes, edges, and node
+// helpers remain internal implementation details.
+export { defaultWorkflowBuilderLabels } from './types.js';
+export { WorkflowBuilder } from './workflow-builder.js';
+export { WorkflowCard } from './workflow-card.js';
+export { WorkflowCardCompact } from './workflow-card-compact.js';

package/dist/workflow-builder/internal/trigger-icons.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType, ReactNode, SVGProps } from 'react';
+import type { WorkflowNodeKind } from '../types.js';
+export declare function resolveWorkflowIcon(kind: WorkflowNodeKind, iconName?: string): ComponentType<SVGProps<SVGSVGElement>>;
+export declare function renderWorkflowIcon(kind: WorkflowNodeKind, iconName?: string, className?: string): ReactNode;

package/dist/workflow-builder/internal/trigger-icons.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertCircle, Bell, Bot, Clock, Flag, GitBranch, Mail, Play, Send, Square, Webhook, Zap, } from 'lucide-react';
+/**
+ * Resolve a Lucide icon by free-form string. Unknown values fall back to
+ * `Zap` so consumers don't have to import lucide just to set an icon.
+ */
+const ICON_MAP = {
+    zap: Zap,
+    webhook: Webhook,
+    clock: Clock,
+    mail: Mail,
+    bell: Bell,
+    bot: Bot,
+    send: Send,
+    flag: Flag,
+    play: Play,
+    square: Square,
+    branch: GitBranch,
+    'git-branch': GitBranch,
+    alert: AlertCircle,
+    warning: AlertCircle,
+};
+/** Default icons per kind; used when the node data omits `iconName`. */
+const KIND_ICONS = {
+    trigger: Zap,
+    action: Send,
+    condition: GitBranch,
+    delay: Clock,
+    end: Flag,
+};
+export function resolveWorkflowIcon(kind, iconName) {
+    if (iconName) {
+        const lower = iconName.toLowerCase();
+        if (ICON_MAP[lower])
+            return ICON_MAP[lower];
+    }
+    return KIND_ICONS[kind];
+}
+export function renderWorkflowIcon(kind, iconName, className = 'h-5 w-5') {
+    const Icon = resolveWorkflowIcon(kind, iconName);
+    return _jsx(Icon, { className: className, "aria-hidden": true });
+}

package/dist/workflow-builder/internal/trigger-sentence.d.ts

@@ -0,0 +1,14 @@
+import type { WorkflowNodeKind } from '../types.js';
+/**
+ * Returns a short human-readable description for a workflow node based on its
+ * kind. Consumers can override per-node via `data.description`.
+ */
+export declare function getDefaultNodeSentence(kind: WorkflowNodeKind, label?: string): string;
+/** Tailwind class tokens per kind. Mapped to the meda token system. */
+export declare const NODE_KIND_STYLES: Record<WorkflowNodeKind, {
+    bg: string;
+    border: string;
+    icon: string;
+}>;
+export declare const NODE_WIDTH = 264;
+export declare const NODE_HEIGHT = 80;

package/dist/workflow-builder/internal/trigger-sentence.js

@@ -0,0 +1,50 @@
+/**
+ * Returns a short human-readable description for a workflow node based on its
+ * kind. Consumers can override per-node via `data.description`.
+ */
+export function getDefaultNodeSentence(kind, label) {
+    switch (kind) {
+        case 'trigger':
+            return label ? `When ${label.toLowerCase()}` : 'When event occurs';
+        case 'action':
+            return label ?? 'Run action';
+        case 'condition':
+            return label ?? 'Branch on condition';
+        case 'delay':
+            return label ?? 'Wait before continuing';
+        case 'end':
+            return label ?? 'End of workflow';
+        default:
+            return label ?? '';
+    }
+}
+/** Tailwind class tokens per kind. Mapped to the meda token system. */
+export const NODE_KIND_STYLES = {
+    trigger: {
+        bg: 'bg-info-50 dark:bg-info-950/40',
+        border: 'border-info-300 dark:border-info-700',
+        icon: 'text-info-600 dark:text-info-400',
+    },
+    action: {
+        bg: 'bg-success-50 dark:bg-success-950/40',
+        border: 'border-success-300 dark:border-success-700',
+        icon: 'text-success-600 dark:text-success-400',
+    },
+    condition: {
+        bg: 'bg-brand-50 dark:bg-brand-950/40',
+        border: 'border-brand-300 dark:border-brand-700',
+        icon: 'text-brand-600 dark:text-brand-400',
+    },
+    delay: {
+        bg: 'bg-warning-50 dark:bg-warning-950/40',
+        border: 'border-warning-300 dark:border-warning-700',
+        icon: 'text-warning-600 dark:text-warning-400',
+    },
+    end: {
+        bg: 'bg-neutral-50 dark:bg-neutral-900/40',
+        border: 'border-neutral-300 dark:border-neutral-600',
+        icon: 'text-neutral-600 dark:text-neutral-400',
+    },
+};
+export const NODE_WIDTH = 264;
+export const NODE_HEIGHT = 80;

package/dist/workflow-builder/nodes/action-node.d.ts

@@ -0,0 +1,3 @@
+import type { NodeProps } from '@xyflow/react';
+import type { WorkflowNode } from '../types.js';
+export declare function ActionNode({ data, selected }: NodeProps<WorkflowNode>): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/nodes/action-node.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWorkflowIcon } from '../internal/trigger-icons.js';
+import { BaseWorkflowNode } from './base-node.js';
+export function ActionNode({ data, selected }) {
+    return (_jsx(BaseWorkflowNode, { kind: "action", selected: selected, icon: renderWorkflowIcon('action', data.iconName), label: data.label || 'Action', description: data.description, warning: data.state === 'warning' ? 'Needs config' : undefined }));
+}

package/dist/workflow-builder/nodes/base-node.d.ts

@@ -0,0 +1,20 @@
+import { Position } from '@xyflow/react';
+import type { ReactNode } from 'react';
+import type { WorkflowNodeKind } from '../types.js';
+export interface BaseWorkflowNodeProps {
+    kind: WorkflowNodeKind;
+    icon: ReactNode;
+    label: string;
+    description?: string;
+    warning?: string;
+    selected?: boolean;
+    showSourceHandle?: boolean;
+    showTargetHandle?: boolean;
+    /** Optional named handles (e.g. for condition true/false branches). */
+    sourceHandles?: Array<{
+        id: string;
+        position: Position;
+        label?: string;
+    }>;
+}
+export declare function BaseWorkflowNode({ kind, icon, label, description, warning, selected, showSourceHandle, showTargetHandle, sourceHandles, }: BaseWorkflowNodeProps): import("react/jsx-runtime").JSX.Element;