@medalsocial/meda 1.1.1 → 1.2.0

package/dist/list/list-row.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from '../components/ui/checkbox.js';
+import { cn } from '../lib/utils.js';
+/**
+ * A Linear-style list row with checkbox, hover states, and click handling.
+ * Compact ~40-48px height for dense, scannable lists.
+ */
+export function ListRow({ selected, selectionActive, onSelect, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, focused, children, className, }) {
+    const isInteractive = !!onClick;
+    const interactiveProps = isInteractive
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            onClick,
+            onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onClick?.();
+                }
+            },
+        }
+        : {};
+    return (_jsxs("div", { ...interactiveProps, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, className: cn('group relative flex items-center gap-3 border-border border-b px-3 py-2.5', 'transition-all duration-150', isInteractive && 'cursor-pointer hover:bg-accent/50', isInteractive &&
+            "before:absolute before:inset-y-0 before:left-0 before:w-[2px] before:scale-y-0 before:bg-primary before:transition-transform before:duration-150 before:content-['']", isInteractive && 'hover:before:scale-y-100', isInteractive && 'focus-within:bg-accent/30 focus-within:before:scale-y-100', selected && isInteractive && 'before:!scale-y-100 bg-accent', selected && !isInteractive && 'bg-accent', focused &&
+            isInteractive &&
+            'before:!scale-y-100 bg-accent/30 ring-1 ring-primary/50 ring-inset', focused && !isInteractive && 'bg-accent/30 ring-1 ring-primary/50 ring-inset', className), children: [onSelect && (_jsx("div", { className: "w-6 flex-shrink-0", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: selected, onClick: (e) => {
+                        e.preventDefault();
+                        onSelect(!selected, e.shiftKey);
+                    }, className: cn('transition-opacity', selectionActive || selected
+                        ? 'opacity-100'
+                        : 'opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100') }) })), children] }));
+}
+export function ListCell({ width = 'flex-1', shrink = true, align = 'left', children, className, }) {
+    return (_jsx("div", { className: cn(width, shrink === false && 'flex-shrink-0', align === 'center' && 'text-center', align === 'right' && 'text-right', 'min-w-0', // Allow truncation
+        className), children: children }));
+}

package/dist/shell/drag-mode-banner.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+/**
+ * Props for DragModeBanner.
+ *
+ * **Important:** This component uses `useDndMonitor` internally and must be
+ * rendered inside the same `<DndContext>` tree it is monitoring.
+ *
+ * **Known limitation:** The ESC chip is decorative only. Keyboard-initiated
+ * drags cancel naturally via dnd-kit's KeyboardSensor; pointer-initiated drags
+ * require the user to release outside any drop zone — a manual ESC handler for
+ * pointer drags is not yet implemented.
+ */
+export interface DragModeBannerProps {
+    /** Banner message shown while a drag is active. */
+    message: ReactNode;
+    /**
+     * When provided, render an ESC chip indicating the user can press Escape to
+     * cancel. See known limitation note above.
+     */
+    cancelKey?: 'ESC';
+    /**
+     * Optional predicate; when supplied only activates the banner for matching
+     * drag ids. Receives the `active.id` of the current drag.
+     */
+    isActive?: (activeId: string | number) => boolean;
+    className?: string;
+}
+export declare function DragModeBanner({ message, cancelKey, isActive, className }: DragModeBannerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace DragModeBanner {
+    var displayName: string;
+}

package/dist/shell/drag-mode-banner.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDndMonitor } from '@dnd-kit/core';
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+export function DragModeBanner({ message, cancelKey, isActive, className }) {
+    const [activeId, setActiveId] = useState(null);
+    useDndMonitor({
+        onDragStart: (e) => setActiveId(e.active.id),
+        onDragEnd: () => setActiveId(null),
+        onDragCancel: () => setActiveId(null),
+    });
+    if (activeId == null)
+        return null;
+    if (isActive && !isActive(activeId))
+        return null;
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cn('pointer-events-none flex items-center justify-center gap-3 px-4 py-2 text-sm text-muted-foreground', className), children: [_jsx("span", { children: message }), cancelKey === 'ESC' && (_jsx("kbd", { className: "rounded border border-border bg-muted px-1.5 py-0.5 font-medium font-mono text-xs", children: "ESC" }))] }));
+}
+DragModeBanner.displayName = 'DragModeBanner';

package/dist/shell/index.d.ts

@@ -2,11 +2,17 @@ export { AppShell, AppShellBody } from './app-shell.js';
 export type { CommandGroupDefinition } from './command-palette.js';
 export { CommandPalette, useCommandGroup, useCommands } from './command-palette.js';
 export { ContextRail } from './context-rail.js';
+export type { DragModeBannerProps } from './drag-mode-banner.js';
+export { DragModeBanner } from './drag-mode-banner.js';
 export * as Extras from './extras/index.js';
 export { IconRail, RailDivider } from './icon-rail.js';
 export type { ShellStorageAdapter } from './layout-state.js';
 export { createLocalStorageAdapter } from './layout-state.js';
 export { motion } from './motion.js';
+export type { RailDropSlotProps, RailDropSlotState } from './rail-drop-slot.js';
+export { RailDropSlot } from './rail-drop-slot.js';
+export type { RailDropZonesProps } from './rail-drop-zones.js';
+export { RailDropZones } from './rail-drop-zones.js';
 export { ResizableHandle, ResizableShell, ResizableShellPanel } from './resizable-shell.js';
 export { RightPanel } from './right-panel.js';
 export { AppTabs, PanelToggle, ShellHeader, WorkspaceSwitcher } from './shell-header.js';

package/dist/shell/index.js

@@ -8,6 +8,8 @@ export { AppShell, AppShellBody } from './app-shell.js';
 // Command palette
 export { CommandPalette, useCommandGroup, useCommands } from './command-palette.js';
 export { ContextRail } from './context-rail.js';
+// Drag-and-drop utilities
+export { DragModeBanner } from './drag-mode-banner.js';
 // Extras (legacy components ported during Phase 15 — opt-in for apps that need them)
 export * as Extras from './extras/index.js';
 // Rails + main + panel
@@ -17,6 +19,8 @@ export { createLocalStorageAdapter } from './layout-state.js';
 // Hooks + tokens
 export { motion } from './motion.js';
 // Resize primitives
+export { RailDropSlot } from './rail-drop-slot.js';
+export { RailDropZones } from './rail-drop-zones.js';
 export { ResizableHandle, ResizableShell, ResizableShellPanel } from './resizable-shell.js';
 export { RightPanel } from './right-panel.js';
 // Header (and its individual children for advanced composition)

package/dist/shell/rail-drop-slot.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode, type Ref } from 'react';
+/**
+ * Describes the slot's current relation to an active drag operation.
+ *
+ * - `'idle'`     — no drag in progress.
+ * - `'active'`   — a drag is in progress and this slot would accept it, but
+ *                  the cursor is not currently over this slot.
+ * - `'over'`     — the dragged item is hovering over this slot and it would
+ *                  accept the drop.
+ * - `'rejected'` — the dragged item is hovering over this slot but the slot
+ *                  cannot accept it (disabled or `accepts` returns false), OR
+ *                  the slot is `disabled` while any drag is active.
+ */
+export type RailDropSlotState = 'idle' | 'active' | 'over' | 'rejected';
+export interface RailDropSlotProps {
+    /** Stable id used by dnd-kit; also rendered as `data-slot-id`. */
+    id: string;
+    /** Decide whether this slot accepts the dragged card. */
+    accepts?: (activeId: string) => boolean;
+    /** Whether this slot can currently receive a drop (e.g. capacity, online). */
+    disabled?: boolean;
+    /**
+     * Static content. Mutually exclusive with `render`.
+     * Use `render` when you need state-aware content.
+     */
+    children?: ReactNode;
+    /**
+     * State-aware content factory. Receives the slot's current `RailDropSlotState`
+     * so you can render different UI for idle / active / over / rejected states.
+     * Mutually exclusive with `children`.
+     */
+    render?: (state: RailDropSlotState) => ReactNode;
+    className?: string;
+    /** Visible label for assistive tech. */
+    ariaLabel?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function RailDropSlot({ id, accepts, disabled, children, render, className, ariaLabel, ref, }: RailDropSlotProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RailDropSlot {
+    var displayName: string;
+}

package/dist/shell/rail-drop-slot.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDndMonitor, useDroppable } from '@dnd-kit/core';
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+export function RailDropSlot({ id, accepts, disabled, children, render, className, ariaLabel, ref, }) {
+    const { isOver, active, setNodeRef } = useDroppable({
+        id,
+        disabled,
+        data: { type: 'rail-drop-slot' },
+    });
+    const [globalDragActive, setGlobalDragActive] = useState(false);
+    useDndMonitor({
+        onDragStart: () => setGlobalDragActive(true),
+        onDragEnd: () => setGlobalDragActive(false),
+        onDragCancel: () => setGlobalDragActive(false),
+    });
+    const wouldAccept = !disabled && (!accepts || (active?.id != null && accepts(String(active.id))));
+    let state;
+    if (isOver && wouldAccept) {
+        state = 'over';
+    }
+    else if (isOver && !wouldAccept) {
+        state = 'rejected';
+    }
+    else if (globalDragActive && disabled) {
+        state = 'rejected';
+    }
+    else if (globalDragActive && wouldAccept) {
+        state = 'active';
+    }
+    else {
+        state = 'idle';
+    }
+    // Legacy boolean aliases kept for backward-compat data attributes
+    const showHover = state === 'over';
+    const showRejected = state === 'rejected';
+    return (_jsx("section", { ref: (el) => {
+            setNodeRef(el);
+            if (typeof ref === 'function')
+                ref(el);
+            else if (ref)
+                ref.current = el;
+        }, "data-slot-id": id, "data-state": state, "aria-label": ariaLabel, "aria-disabled": disabled || undefined, className: cn('relative rounded-lg border border-border bg-card transition-all duration-150', state === 'idle' && '', state === 'active' && 'border-dashed border-primary/60 bg-primary/5', state === 'over' &&
+            'border-primary bg-primary/5 ring-2 ring-primary/30 shadow-[0_0_0_4px_hsl(var(--primary)/0.1)]', state === 'rejected' && 'border-destructive/40 opacity-60', 
+        // Legacy classes — keep working for consumers using data-state selectors
+        showHover && '', showRejected && '', disabled && state === 'idle' && 'opacity-60', className), children: render ? render(state) : children }));
+}
+RailDropSlot.displayName = 'RailDropSlot';

package/dist/shell/rail-drop-zones.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+export interface RailDropZonesProps {
+    /** Section title — uppercased in the header. Defaults to "Drop zones". */
+    title?: string;
+    /** Subtitle shown under the title (e.g. "Eligible machines for ENG-405 · claude"). */
+    subtitle?: ReactNode;
+    /** Count badge rendered in the header corner, e.g. "3 / 4". */
+    count?: ReactNode;
+    /** Optional icon rendered at the start of the header. */
+    icon?: ReactNode;
+    /**
+     * When set, overrides the auto-detected drag-active state. Useful for
+     * Storybook stories that want to demonstrate the active visual without a
+     * real drag in progress.
+     */
+    forceActive?: boolean;
+    /**
+     * Optional predicate; when supplied only activates the rail outline for
+     * matching drag ids. Receives `active.id` of the current drag.
+     */
+    isActive?: (activeId: string | number) => boolean;
+    children: ReactNode;
+    className?: string;
+}
+export declare function RailDropZones({ title, subtitle, count, icon, forceActive, isActive, children, className, }: RailDropZonesProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RailDropZones {
+    var displayName: string;
+}

package/dist/shell/rail-drop-zones.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDndMonitor } from '@dnd-kit/core';
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+export function RailDropZones({ title = 'Drop zones', subtitle, count, icon, forceActive, isActive, children, className, }) {
+    const [activeId, setActiveId] = useState(null);
+    useDndMonitor({
+        onDragStart: (e) => setActiveId(e.active.id),
+        onDragEnd: () => setActiveId(null),
+        onDragCancel: () => setActiveId(null),
+    });
+    const auto = activeId != null && (!isActive || isActive(activeId));
+    const active = forceActive ?? auto;
+    return (_jsxs("section", { "data-active": active || undefined, className: cn('flex flex-col gap-3 rounded-lg border border-transparent p-3 transition-colors', active && 'border-2 border-dashed border-primary/60 bg-primary/5', className), children: [(title || subtitle || count) && (_jsxs("header", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-start gap-2", children: [icon && _jsx("span", { className: "text-primary", children: icon }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [title && (_jsx("span", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wider", children: title })), subtitle && _jsx("span", { className: "text-muted-foreground text-xs", children: subtitle })] })] }), count && _jsx("span", { className: "text-muted-foreground text-xs", children: count })] })), _jsx("div", { className: "flex flex-col gap-2", children: children })] }));
+}
+RailDropZones.displayName = 'RailDropZones';

package/dist/shell/shell-main.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../lib/utils.js';
 const layoutClass = {
-    workspace: 'mx-auto w-full max-w-[1280px] px-4 py-6 sm:px-6 lg:px-8',
+    workspace: 'w-full max-w-[1280px] px-4 py-6 sm:px-6 lg:px-8',
     centered: 'mx-auto w-full max-w-2xl px-4 py-6 sm:px-6',
     fullbleed: 'w-full',
 };

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.1",
+  "version": "1.2.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",