@medalsocial/meda 1.1.2 → 1.3.0

package/dist/shell/right-panel.js

@@ -18,6 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Maximize2, Minimize2, X } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { cn } from '../lib/utils.js';
+import { useResolvedPanelViews } from './panel-views-provider.js';
 import { useMedaShell } from './shell-provider.js';
 import { useShellViewport } from './use-shell-viewport.js';
 // ---------------------------------------------------------------------------
@@ -25,6 +26,7 @@ import { useShellViewport } from './use-shell-viewport.js';
 // ---------------------------------------------------------------------------
 const MIN_WIDTH = 300;
 const MAX_WIDTH = 520;
+const EMPTY_PANEL_VIEWS = [];
 function ResizeHandle({ currentWidth, onResize, onCommit }) {
     const startWidthRef = useRef(currentWidth);
     const startXRef = useRef(0);
@@ -61,17 +63,28 @@ function ResizeHandle({ currentWidth, onResize, onCommit }) {
 // ---------------------------------------------------------------------------
 // RightPanel
 // ---------------------------------------------------------------------------
-export function RightPanel({ panelViews = [], defaultView, modes = ['panel', 'expanded', 'fullscreen'], className, }) {
+export function RightPanel({ panelViews = EMPTY_PANEL_VIEWS, defaultView, modes = ['panel', 'expanded', 'fullscreen'], className, }) {
     const band = useShellViewport();
     const ctx = useMedaShell();
     const { mode, activeView, width, setMode, setActiveView, setWidth } = ctx.panel;
-    // Hydrate defaultView on mount if no active view set
-    // biome-ignore lint/correctness/useExhaustiveDependencies: intentional one-time mount effect
+    const { panelViews: resolvedPanelViews, defaultView: resolvedDefaultView } = useResolvedPanelViews(panelViews, defaultView);
+    const hydratedDefaultRef = useRef(null);
+    // Hydrate a default when static or route-registered views become available.
     useEffect(() => {
-        if (!activeView && defaultView) {
-            setActiveView(defaultView);
+        const defaultExists = resolvedDefaultView != null &&
+            resolvedPanelViews.some((view) => view.id === resolvedDefaultView);
+        if (!defaultExists)
+            return;
+        const source = resolvedDefaultView !== defaultView ? 'registered' : 'static';
+        const canReplaceStaticDefault = activeView === hydratedDefaultRef.current?.id &&
+            hydratedDefaultRef.current.source === 'static' &&
+            source === 'registered' &&
+            activeView !== resolvedDefaultView;
+        if (!activeView || canReplaceStaticDefault) {
+            hydratedDefaultRef.current = { id: resolvedDefaultView, source };
+            setActiveView(resolvedDefaultView);
         }
-    }, []);
+    }, [activeView, defaultView, resolvedDefaultView, resolvedPanelViews, setActiveView]);
     // Local display width tracks pointer-move updates live;
     // setWidth (persist) is called on pointerUp.
     const [displayWidth, setDisplayWidth] = useState(null);
@@ -109,14 +122,14 @@ export function RightPanel({ panelViews = [], defaultView, modes = ['panel', 'ex
     })();
     // Z-index escalation: fullscreen covers header + rails
     const zIndexClass = mode === 'fullscreen' ? 'z-[var(--z-shell-fullscreen)]' : 'z-[var(--z-shell-panel)]';
-    const activePanelView = panelViews.find((v) => v.id === activeView);
+    const activePanelView = resolvedPanelViews.find((v) => v.id === activeView);
     const cycleAriaLabel = mode === 'panel' ? 'Expand panel' : mode === 'expanded' ? 'Maximize panel' : 'Restore panel';
     const handleResize = (w) => setDisplayWidth(w);
     const handleCommit = (w) => {
         setDisplayWidth(null);
         setWidth(w);
     };
-    return (_jsx("aside", { "data-meda-panel-mode": mode, "aria-hidden": mode === 'closed' ? 'true' : undefined, className: cn('relative h-full shrink-0 overflow-hidden border-l border-shell-border bg-shell-panel', 'transition-[width] ease-[var(--motion-ease)] duration-[var(--motion-panel)]', mode === 'fullscreen' && 'fixed inset-0 h-screen w-screen border-none', zIndexClass, className), style: widthStyle, children: mode !== 'closed' && (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-shell-border px-3 py-2", children: [_jsx("div", { className: "flex items-center gap-1", children: panelViews.map((view) => {
+    return (_jsx("aside", { "data-meda-panel-mode": mode, "aria-hidden": mode === 'closed' ? 'true' : undefined, className: cn('relative h-full shrink-0 overflow-hidden border-l border-shell-border bg-shell-panel', 'transition-[width] ease-[var(--motion-ease)] duration-[var(--motion-panel)]', mode === 'fullscreen' && 'fixed inset-0 h-screen w-screen border-none', zIndexClass, className), style: widthStyle, children: mode !== 'closed' && (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-shell-border px-3 py-2", children: [_jsx("div", { className: "flex items-center gap-1", children: resolvedPanelViews.map((view) => {
                                 const isActive = view.id === activeView;
                                 const Icon = view.icon;
                                 return (_jsxs("button", { type: "button", "aria-current": isActive ? 'true' : undefined, onClick: () => setActiveView(view.id), className: cn('inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors', isActive

package/dist/shell/shell-provider.d.ts

@@ -1,7 +1,12 @@
 import { type ReactNode } from 'react';
 import { type ShellStorageAdapter } from './layout-state.js';
-import type { AppDefinition, MobileBottomNavItem, PanelMode, ThemeAdapter, WorkspaceDefinition } from './types.js';
+import type { AppDefinition, MobileBottomNavItem, PanelMode, PanelView, ThemeAdapter, WorkspaceDefinition } from './types.js';
 export type MobileDrawerKind = 'menu-drawer' | 'module-drawer' | 'panels-drawer' | 'ai-drawer' | (string & {}) | null;
+export interface PanelViewRegistration {
+    id: string;
+    views: PanelView[];
+    defaultView?: string;
+}
 interface MedaShellContextValue {
     workspace: WorkspaceDefinition;
     workspaces: WorkspaceDefinition[];
@@ -15,6 +20,9 @@ interface MedaShellContextValue {
         setMode: (m: PanelMode) => void;
         setActiveView: (v: string | null) => void;
         setWidth: (w: number) => void;
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
         /** Opens panel + switches to viewId in one call.
          * Sugar for app keyboard shortcuts (e.g. Cmd+J → panel.focus('ai')).
          * If already open in 'panel', 'expanded', or 'fullscreen', the existing
@@ -26,6 +34,7 @@ interface MedaShellContextValue {
         collapsed: boolean;
         setWidth: (w: number) => void;
         setCollapsed: (c: boolean) => void;
+        toggle: () => void;
     };
     mobileBottomNav: MobileBottomNavItem[];
     mobileDrawer: {
@@ -36,6 +45,10 @@ interface MedaShellContextValue {
         open: boolean;
         setOpen: (open: boolean) => void;
     };
+    panelViews: {
+        registrations: PanelViewRegistration[];
+        register: (id: string, views: PanelView[], defaultView?: string) => () => void;
+    };
     commandPaletteHotkey: string;
     /** Selection bridge between main workspace and right panel views (spec §17). */
     selection: unknown | null;

package/dist/shell/shell-provider.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LayoutGrid, Menu, PanelTop, Sparkles } from 'lucide-react';
-import { createContext, lazy, Suspense, useContext, useMemo, useState, } from 'react';
+import { createContext, lazy, Suspense, useCallback, useContext, useMemo, useState, } from 'react';
 import { createLocalStorageAdapter, useShellLayoutState, } from './layout-state.js';
 import { DefaultThemeProvider, ThemeCtx } from './theme.js';
+import { useShellViewport } from './use-shell-viewport.js';
 // ---------------------------------------------------------------------------
 // Theme adapter wiring
 // ---------------------------------------------------------------------------
@@ -78,11 +79,35 @@ export function MedaShellProvider(props) {
         open: commandPaletteOpen,
         setOpen: setCommandPaletteOpen,
     }), [commandPaletteOpen]);
+    const [panelViewRegistrations, setPanelViewRegistrations] = useState([]);
+    const registerPanelViews = useCallback((id, views, defaultView) => {
+        setPanelViewRegistrations((prev) => {
+            const existing = prev.find((registration) => registration.id === id);
+            if (existing?.views === views && existing.defaultView === defaultView)
+                return prev;
+            const nextRegistration = defaultView === undefined ? { id, views } : { id, views, defaultView };
+            if (existing == null)
+                return [...prev, nextRegistration];
+            return prev.map((registration) => (registration.id === id ? nextRegistration : registration));
+        });
+        return () => {
+            setPanelViewRegistrations((prev) => prev.some((registration) => registration.id === id &&
+                registration.views === views &&
+                registration.defaultView === defaultView)
+                ? prev.filter((registration) => registration.id !== id)
+                : prev);
+        };
+    }, []);
+    const panelViews = useMemo(() => ({
+        registrations: panelViewRegistrations,
+        register: registerPanelViews,
+    }), [panelViewRegistrations, registerPanelViews]);
     const [layoutState, setLayoutState] = useShellLayoutState({
         workspaceId: props.workspace.id,
         appId: activeAppId,
         storage,
     });
+    const isMobile = useShellViewport() === 'mobile';
     const panel = useMemo(() => ({
         mode: layoutState.rightPanel.mode,
         activeView: layoutState.rightPanel.activeView,
@@ -99,6 +124,37 @@ export function MedaShellProvider(props) {
             ...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) => {
@@ -108,7 +164,7 @@ export function MedaShellProvider(props) {
                 rightPanel: { ...prev.rightPanel, mode: nextMode, activeView: viewId },
             };
         }),
-    }), [layoutState, setLayoutState]);
+    }), [isMobile, layoutState, setLayoutState]);
     const contextRail = useMemo(() => ({
         width: layoutState.contextRail.width,
         collapsed: layoutState.contextRail.collapsed,
@@ -120,6 +176,10 @@ export function MedaShellProvider(props) {
             ...prev,
             contextRail: { ...prev.contextRail, collapsed },
         })),
+        toggle: () => setLayoutState((prev) => ({
+            ...prev,
+            contextRail: { ...prev.contextRail, collapsed: !prev.contextRail.collapsed },
+        })),
     }), [layoutState, setLayoutState]);
     const value = useMemo(() => ({
         workspace: props.workspace,
@@ -132,6 +192,7 @@ export function MedaShellProvider(props) {
         mobileBottomNav: props.mobileBottomNav ?? defaultMobileBottomNav,
         mobileDrawer,
         commandPalette,
+        panelViews,
         commandPaletteHotkey: props.commandPaletteHotkey ?? 'mod+k',
         selection,
         setSelection,
@@ -145,6 +206,7 @@ export function MedaShellProvider(props) {
         props.mobileBottomNav,
         mobileDrawer,
         commandPalette,
+        panelViews,
         props.commandPaletteHotkey,
         selection,
     ]);

package/dist/shell/types.d.ts

@@ -14,7 +14,8 @@ export interface ContextModule {
     id: string;
     label: string;
     description?: string;
-    items: ContextItem[];
+    items?: ContextItem[];
+    render?: (ctx: ShellRenderContext) => ReactNode;
 }
 export interface ContextItem {
     id: string;
@@ -55,6 +56,8 @@ export interface CommandDefinition {
     icon?: LucideIcon;
     group: string;
     shortcut?: string;
+    /** Display-only alias for `shortcut`; `shortcut` wins when both are supplied. */
+    hotkey?: string;
     run: () => void | Promise<void>;
 }
 export interface ThemeAdapter {
@@ -76,6 +79,7 @@ export interface AppShellIconRailConfig {
     utilityItems?: import('./icon-rail.js').IconRailItem[];
     footer?: ReactNode;
     activeId?: string;
+    renderLink?: import('./icon-rail.js').IconRailProps['renderLink'];
 }
 /** ContextRail configuration for `<AppShell variant="workspace">`. */
 export interface AppShellContextRailConfig {

package/dist/timeline/index.d.ts

@@ -2,6 +2,9 @@ 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 { LaneTimeline } from './lane-timeline.js';
+export type { Lane, LaneBar, LaneLegendItem, LaneTimelineLabels, LaneTimelineProps, LaneTimelineRange, } from './lane-timeline-types.js';
+export { defaultLaneTimelineLabels } from './lane-timeline-types.js';
 export type { LiveIndicatorProps } from './live-indicator.js';
 export { LiveIndicator } from './live-indicator.js';
 export type { ScrubBarProps } from './scrub-bar.js';

package/dist/timeline/index.js

@@ -1,5 +1,7 @@
 export { DateSwitcher } from './date-switcher.js';
 export { EventCard } from './event-card.js';
+export { LaneTimeline } from './lane-timeline.js';
+export { defaultLaneTimelineLabels } from './lane-timeline-types.js';
 export { LiveIndicator } from './live-indicator.js';
 export { ScrubBar } from './scrub-bar.js';
 export { TimelineRail } from './timeline-rail.js';

package/dist/timeline/lane-timeline-types.d.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react';
+export type LaneTimelineRange = '1h' | '6h' | '24h' | '7d';
+export interface LaneBar {
+    id: string;
+    start: Date;
+    end: Date;
+    label: string;
+    /** Tailwind class for the bar fill, e.g. 'bg-success-500/80'. */
+    fillClass: string;
+    /** Optional left-edge accent class, e.g. 'border-l-4 border-l-success-700'. */
+    accentClass?: string;
+}
+export interface Lane {
+    id: string;
+    label: string;
+    /** Optional secondary line under label (e.g. "3 sessions" or "offline"). */
+    sublabel?: string;
+    /** Tailwind class for the leading status dot (e.g. 'bg-success-500'). */
+    statusDotClass?: string;
+    bars: LaneBar[];
+    /** Render lane label muted; bars still render. */
+    muted?: boolean;
+}
+export interface LaneLegendItem {
+    label: string;
+    swatchClass: string;
+}
+export interface LaneTimelineLabels {
+    previousDate: string;
+    nextDate: string;
+    now: string;
+    /** "{n} active" — `{n}` replaced at render. */
+    activeCount: string;
+}
+export declare const defaultLaneTimelineLabels: LaneTimelineLabels;
+export interface TimeTick {
+    /** Display label, e.g. "09:00". */
+    label: string;
+    /** Position as percentage 0–100 along the time axis. */
+    position: number;
+}
+export interface LaneTimelineProps {
+    lanes: Lane[];
+    /** Reference time for now-line + window end. Defaults to `new Date()`. */
+    now?: Date;
+    defaultRange?: LaneTimelineRange;
+    range?: LaneTimelineRange;
+    onRangeChange?: (range: LaneTimelineRange) => void;
+    selectedDate?: Date;
+    onDateChange?: (date: Date) => void;
+    title?: ReactNode;
+    /** Render-prop slot for a "Group: …" chip in the header. */
+    groupChip?: ReactNode;
+    /** Number of currently-active bars; powers the "● {n} active" indicator. */
+    activeCount?: number;
+    legend?: LaneLegendItem[];
+    selectedBarId?: string;
+    onSelectBar?: (bar: LaneBar, lane: Lane) => void;
+    labels?: Partial<LaneTimelineLabels>;
+    className?: string;
+}

package/dist/timeline/lane-timeline-types.js

@@ -0,0 +1,6 @@
+export const defaultLaneTimelineLabels = {
+    previousDate: 'Previous day',
+    nextDate: 'Next day',
+    now: 'now',
+    activeCount: '{n} active',
+};

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

@@ -0,0 +1,2 @@
+import { type LaneTimelineProps } from './lane-timeline-types.js';
+export declare function LaneTimeline({ lanes, now, defaultRange, range: controlledRange, onRangeChange, selectedDate: controlledDate, onDateChange, title, groupChip, activeCount, legend, selectedBarId, onSelectBar, labels, className, }: LaneTimelineProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/lane-timeline.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { LaneRow } from './lane.js';
+import { defaultLaneTimelineLabels, } from './lane-timeline-types.js';
+import { TimeAxis } from './time-axis.js';
+const LABEL_GUTTER_PX = 140;
+const RANGE_MS = {
+    '1h': 60 * 60_000,
+    '6h': 6 * 60 * 60_000,
+    '24h': 24 * 60 * 60_000,
+    '7d': 7 * 24 * 60 * 60_000,
+};
+export function LaneTimeline({ lanes, now, defaultRange = '6h', range: controlledRange, onRangeChange, selectedDate: controlledDate, onDateChange, title, groupChip, activeCount, legend, selectedBarId, onSelectBar, labels, className, }) {
+    const resolvedLabels = { ...defaultLaneTimelineLabels, ...(labels ?? {}) };
+    const [internalRange, setInternalRange] = useState(defaultRange);
+    const [internalDate, setInternalDate] = useState(() => now ?? new Date());
+    const range = controlledRange ?? internalRange;
+    const selectedDate = controlledDate ?? internalDate;
+    const referenceNow = now ?? new Date();
+    const { windowStart, windowEnd } = useMemo(() => {
+        const rangeMs = RANGE_MS[range];
+        const futurePadMs = Math.max(rangeMs / 6, 5 * 60_000);
+        const isToday = selectedDate.toDateString() === referenceNow.toDateString();
+        const end = isToday ? new Date(referenceNow.getTime() + futurePadMs) : endOfDay(selectedDate);
+        // futurePadMs is only relevant for the "today" path (gives the now-line breathing room).
+        // Historical days should render exactly rangeMs of window — no asymmetric pad.
+        const start = new Date(end.getTime() - rangeMs - (isToday ? futurePadMs : 0));
+        return { windowStart: start, windowEnd: end };
+    }, [range, selectedDate, referenceNow]);
+    const ticks = useMemo(() => buildTicks(windowStart, windowEnd, range), [windowStart, windowEnd, range]);
+    const handleRange = (r) => {
+        if (controlledRange === undefined)
+            setInternalRange(r);
+        onRangeChange?.(r);
+    };
+    const handleDate = (d) => {
+        if (controlledDate === undefined)
+            setInternalDate(d);
+        onDateChange?.(d);
+    };
+    const showNowLine = referenceNow.getTime() >= windowStart.getTime() &&
+        referenceNow.getTime() <= windowEnd.getTime();
+    const nowPositionPct = showNowLine
+        ? ((referenceNow.getTime() - windowStart.getTime()) /
+            (windowEnd.getTime() - windowStart.getTime())) *
+            100
+        : 0;
+    return (_jsxs("section", { className: cn('flex flex-col rounded-lg border border-border bg-card p-4', className), children: [_jsx(TimeAxis, { range: range, onRangeChange: handleRange, selectedDate: selectedDate, onDateChange: handleDate, now: referenceNow, title: title, groupChip: groupChip, activeCount: activeCount, labels: resolvedLabels, ticks: ticks, labelGutterPx: LABEL_GUTTER_PX }), _jsxs("div", { className: "relative", children: [lanes.map((lane) => (_jsx(LaneRow, { lane: lane, windowStart: windowStart, windowEnd: windowEnd, labelGutterPx: LABEL_GUTTER_PX, selectedBarId: selectedBarId, onSelectBar: onSelectBar }, lane.id))), showNowLine && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute top-0 bottom-0 w-px bg-primary", style: {
+                            left: `calc(${LABEL_GUTTER_PX}px + (100% - ${LABEL_GUTTER_PX}px) * ${nowPositionPct / 100})`,
+                        }, children: _jsx("div", { className: "-translate-x-1/2 -top-1 absolute size-2 rounded-full bg-primary" }) }))] }), legend && legend.length > 0 && (_jsxs("div", { className: "mt-3 flex items-center gap-4 border-border/40 border-t pt-3 text-muted-foreground text-xs", children: [_jsx("span", { className: "uppercase tracking-wider", children: "Legend" }), legend.map((item) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: cn('inline-block size-2 rounded-sm', item.swatchClass) }), item.label] }, item.label))), showNowLine && (_jsxs("span", { className: "ml-auto flex items-center gap-1.5", children: [_jsx("span", { className: "inline-block size-2 rounded-full bg-primary" }), resolvedLabels.now, " \u00B7 ", formatTime(referenceNow)] }))] }))] }));
+}
+function endOfDay(d) {
+    const e = new Date(d);
+    e.setHours(23, 59, 59, 999);
+    return e;
+}
+function formatTime(d) {
+    return new Intl.DateTimeFormat(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    }).format(d);
+}
+function buildTicks(start, end, range) {
+    const span = end.getTime() - start.getTime();
+    const tickCount = range === '7d' ? 7 : range === '24h' ? 8 : 7;
+    const out = [];
+    for (let i = 0; i <= tickCount; i++) {
+        const t = new Date(start.getTime() + (span * i) / tickCount);
+        out.push({ position: (i / tickCount) * 100, label: formatTickLabel(t, range) });
+    }
+    return out;
+}
+function formatTickLabel(d, range) {
+    if (range === '7d') {
+        return new Intl.DateTimeFormat(undefined, { weekday: 'short' }).format(d);
+    }
+    return new Intl.DateTimeFormat(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    }).format(d);
+}

package/dist/timeline/lane.d.ts

@@ -0,0 +1,10 @@
+import type { Lane, LaneBar } from './lane-timeline-types.js';
+export interface LaneRowProps {
+    lane: Lane;
+    windowStart: Date;
+    windowEnd: Date;
+    labelGutterPx: number;
+    selectedBarId?: string;
+    onSelectBar?: (bar: LaneBar, lane: Lane) => void;
+}
+export declare function LaneRow({ lane, windowStart, windowEnd, labelGutterPx, selectedBarId, onSelectBar, }: LaneRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/lane.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+export function LaneRow({ lane, windowStart, windowEnd, labelGutterPx, selectedBarId, onSelectBar, }) {
+    return (_jsxs("div", { className: "grid items-center gap-0 border-border/40 border-b py-3", style: { gridTemplateColumns: `${labelGutterPx}px 1fr` }, children: [_jsxs("div", { className: "flex flex-col gap-0.5 pr-3", children: [_jsxs("div", { className: cn('flex items-center gap-2 text-sm', lane.muted && 'text-muted-foreground'), children: [lane.statusDotClass && (_jsx("span", { className: cn('inline-block size-2 rounded-full', lane.statusDotClass, lane.muted && 'opacity-40') })), _jsx("span", { className: "font-medium", children: lane.label })] }), lane.sublabel && _jsx("div", { className: "text-muted-foreground text-xs", children: lane.sublabel })] }), _jsx("div", { className: "relative h-7", children: lane.bars.map((bar) => {
+                    const placement = placeBar(bar, windowStart, windowEnd);
+                    if (!placement)
+                        return null;
+                    const selected = selectedBarId === bar.id;
+                    const isSelectable = !!onSelectBar;
+                    const barClassName = cn('absolute top-0 flex h-full items-center overflow-hidden rounded-md px-2 text-left text-xs text-white', bar.fillClass, bar.accentClass, isSelectable && [
+                        'data-[selected]:ring-2 data-[selected]:ring-primary data-[selected]:ring-offset-1 data-[selected]:ring-offset-background',
+                        'hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                    ]);
+                    const barStyle = { left: `${placement.left}%`, width: `${placement.width}%` };
+                    const ariaLabel = `${lane.label} — ${bar.label}`;
+                    if (!isSelectable) {
+                        return (_jsx("div", { role: "img", "aria-label": ariaLabel, className: barClassName, style: barStyle, children: _jsx("span", { "aria-hidden": "true", className: "truncate", children: bar.label }) }, bar.id));
+                    }
+                    return (_jsx("button", { type: "button", onClick: () => onSelectBar(bar, lane), "data-selected": selected || undefined, className: barClassName, style: barStyle, "aria-label": ariaLabel, children: _jsx("span", { "aria-hidden": "true", className: "truncate", children: bar.label }) }, bar.id));
+                }) })] }));
+}
+function placeBar(bar, windowStart, windowEnd) {
+    const ws = windowStart.getTime();
+    const we = windowEnd.getTime();
+    const span = we - ws;
+    if (span <= 0)
+        return null;
+    const bs = bar.start.getTime();
+    const be = bar.end.getTime();
+    // Bar entirely outside the window (or exactly touching boundary) — skip.
+    if (be <= ws || bs >= we)
+        return null;
+    const clampedStart = Math.max(bs, ws);
+    const clampedEnd = Math.min(be, we);
+    const left = ((clampedStart - ws) / span) * 100;
+    const width = Math.max(((clampedEnd - clampedStart) / span) * 100, 0.5);
+    return { left, width };
+}

package/dist/timeline/public.d.ts

@@ -1 +1,2 @@
+export type { Lane, LaneBar, LaneLegendItem, LaneTimelineRange, } from './lane-timeline-types.js';
 export type { ScrubMark, TimelineEvent, TimelineEventKind } from './types.js';

package/dist/timeline/time-axis.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { LaneTimelineLabels, LaneTimelineRange, TimeTick } from './lane-timeline-types.js';
+export interface TimeAxisProps {
+    range: LaneTimelineRange;
+    onRangeChange: (range: LaneTimelineRange) => void;
+    selectedDate: Date;
+    onDateChange: (date: Date) => void;
+    /** Reference time used to determine whether `selectedDate` is "today" in the header label. */
+    now: Date;
+    title?: ReactNode;
+    groupChip?: ReactNode;
+    activeCount?: number;
+    labels: LaneTimelineLabels;
+    ticks: TimeTick[];
+    /** Width of the lane-label gutter on the left, in px (matches Lane component). */
+    labelGutterPx: number;
+}
+export declare function TimeAxis({ range, onRangeChange, selectedDate, onDateChange, now, title, groupChip, activeCount, labels, ticks, labelGutterPx, }: TimeAxisProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/time-axis.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+const RANGES = ['1h', '6h', '24h', '7d'];
+export function TimeAxis({ range, onRangeChange, selectedDate, onDateChange, now, title, groupChip, activeCount, labels, ticks, labelGutterPx, }) {
+    const stepDate = (delta) => {
+        const next = new Date(selectedDate);
+        next.setDate(next.getDate() + delta);
+        onDateChange(next);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3 border-border border-b pb-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [title && _jsx("div", { className: "font-medium text-sm", children: title }), _jsx("div", { className: "flex items-center gap-1 rounded-md bg-muted p-0.5", children: RANGES.map((r) => (_jsx("button", { type: "button", "aria-pressed": r === range, onClick: () => onRangeChange(r), "data-active": r === range || undefined, className: cn('rounded px-2 py-0.5 text-xs', 'data-[active]:bg-background data-[active]:text-foreground', r !== range && 'text-muted-foreground hover:text-foreground'), children: r }, r))) }), groupChip && _jsx("div", { className: "text-muted-foreground text-xs", children: groupChip }), typeof activeCount === 'number' && (_jsxs("div", { className: "text-muted-foreground text-xs", children: [_jsx("span", { className: "mr-1 inline-block size-1.5 rounded-full bg-success-500" }), labels.activeCount.replace('{n}', String(activeCount))] })), _jsxs("div", { className: "ml-auto flex items-center gap-1 rounded-md border border-border bg-card px-2 py-1 text-xs", children: [_jsx("button", { type: "button", "aria-label": labels.previousDate, onClick: () => stepDate(-1), className: "text-muted-foreground hover:text-foreground", children: _jsx(ChevronLeft, { className: "size-3.5" }) }), _jsx("div", { className: "px-1", children: formatDateHeader(selectedDate, now) }), _jsx("button", { type: "button", "aria-label": labels.nextDate, onClick: () => stepDate(1), className: "text-muted-foreground hover:text-foreground", children: _jsx(ChevronRight, { className: "size-3.5" }) })] })] }), _jsxs("div", { className: "grid items-end gap-0", style: { gridTemplateColumns: `${labelGutterPx}px 1fr` }, children: [_jsx("div", {}), _jsx("div", { className: "relative h-5", children: ticks.map((t) => (_jsx("div", { className: "-translate-x-1/2 absolute top-0 text-muted-foreground text-xs", style: { left: `${t.position}%` }, children: t.label }, `${t.position}:${t.label}`))) })] })] }));
+}
+function formatDateHeader(d, referenceNow) {
+    const isToday = d.toDateString() === referenceNow.toDateString();
+    const fmt = new Intl.DateTimeFormat(undefined, {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+    }).format(d);
+    return isToday ? `Today · ${fmt}` : fmt;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -43,6 +43,14 @@
       "types": "./dist/timeline/index.d.ts",
       "default": "./dist/timeline/index.js"
     },
+    "./kanban": {
+      "types": "./dist/kanban/index.d.ts",
+      "import": "./dist/kanban/index.js"
+    },
+    "./list": {
+      "types": "./dist/list/index.d.ts",
+      "import": "./dist/list/index.js"
+    },
     "./marketing": {
       "types": "./dist/marketing/index.d.ts",
       "default": "./dist/marketing/index.js"
@@ -73,6 +81,9 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@react-three/fiber": "^9.0.0",
     "lucide-react": "^1.8.0",
     "next-themes": "^0.4.0",
@@ -80,6 +91,15 @@
     "react-dom": ">=19"
   },
   "peerDependenciesMeta": {
+    "@dnd-kit/core": {
+      "optional": false
+    },
+    "@dnd-kit/sortable": {
+      "optional": false
+    },
+    "@dnd-kit/utilities": {
+      "optional": false
+    },
     "@react-three/fiber": {
       "optional": true
     },
@@ -103,6 +123,9 @@
     "@biomejs/biome": "^2.4.12",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.29.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.6.0",
     "@size-limit/preset-small-lib": "^12.1.0",