@medalsocial/meda 0.2.0 → 1.0.0

package/README.md

@@ -52,6 +52,7 @@ See the [demo app](./demo) for a live playground.
 
 - `@medalsocial/meda` — curated public API (components + helpers)
 - `@medalsocial/meda/shell` — shell-only subpath
+- `@medalsocial/meda/marketing` — marketing sections and campaign blocks
 - `@medalsocial/meda/styles.css` — design tokens + base styles
 
 ## Alternative: shadcn registry
@@ -73,10 +74,35 @@ The registry index is at `https://meda.medalsocial.com/registry.json`. Source JS
 pnpm install
 pnpm build             # compile dist/
 pnpm test              # vitest (jsdom)
+pnpm typecheck
+pnpm lint
 pnpm registry:validate
 pnpm demo:dev          # run the playground locally
+pnpm storybook         # http://localhost:6006
+pnpm storybook:build   # storybook-static/
+pnpm size-limit        # bundle-size gate
 ```
 
+## Storybook + Chromatic
+
+Stories are colocated as `Component.stories.tsx` next to each primitive. Build
+the static bundle with:
+
+```bash
+pnpm storybook:build
+```
+
+Visual review runs via **Chromatic**. The `Chromatic` GitHub workflow publishes
+Storybook on pushes and pull requests targeting `dev` or `prod`, using the
+repository secret `CHROMATIC_PROJECT_TOKEN`.
+
+```bash
+pnpm chromatic
+```
+
+Chromatic handles UI diffs and review state, so visual snapshot baselines are
+not committed to this repository.
+
 ## Release
 
 Changesets + GitHub Actions (OIDC trusted publishing). Add a changeset with `pnpm changeset`, merge to the release branch, and the `Release` workflow handles npm publish with provenance.

package/dist/brand/index.d.ts

@@ -0,0 +1,2 @@
+export type { MedalSocialMarkProps } from './medal-social-mark.js';
+export { MedalSocialMark } from './medal-social-mark.js';

package/dist/brand/index.js

@@ -0,0 +1 @@
+export { MedalSocialMark } from './medal-social-mark.js';

package/dist/brand/medal-social-mark.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+export interface MedalSocialMarkProps extends SVGProps<SVGSVGElement> {
+    title?: string;
+    backgroundColor?: string;
+    markColor?: string;
+}
+export declare function MedalSocialMark({ title, backgroundColor, markColor, role, focusable, 'aria-hidden': ariaHidden, ...props }: MedalSocialMarkProps): import("react/jsx-runtime").JSX.Element;

package/dist/brand/medal-social-mark.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function MedalSocialMark({ title, backgroundColor = 'hsl(0, 0%, 10%)', markColor = 'hsl(0, 0%, 90%)', role, focusable = 'false', 'aria-hidden': ariaHidden, ...props }) {
+    const accessibleTitle = title?.trim();
+    const hasAccessibleName = Boolean(accessibleTitle || props['aria-label'] || props['aria-labelledby']);
+    return (_jsxs("svg", { ...props, viewBox: "0 0 48 48", fill: "none", role: hasAccessibleName ? (role ?? 'img') : role, "aria-hidden": hasAccessibleName ? ariaHidden : (ariaHidden ?? true), focusable: focusable, children: [_jsx("title", { children: accessibleTitle || 'Medal Social' }), _jsx("circle", { cx: "24", cy: "24", r: "23", fill: backgroundColor }), _jsx("path", { d: "M8 24L24 8L40 24L24 40L8 24Z", stroke: markColor, strokeWidth: "1.3", fill: "none" }), _jsx("circle", { cx: "24", cy: "8.5", r: "2.5", fill: markColor }), _jsx("circle", { cx: "39.5", cy: "24", r: "2.5", fill: markColor }), _jsx("circle", { cx: "24", cy: "39.5", r: "2.5", fill: markColor }), _jsx("circle", { cx: "8.5", cy: "24", r: "2.5", fill: markColor }), _jsx("g", { transform: "translate(12, 12) scale(1)", children: _jsx("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z", fill: "none", stroke: markColor, strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
+}

package/dist/brand/public.d.ts

@@ -0,0 +1,2 @@
+export type { MedalSocialMarkProps } from './medal-social-mark.js';
+export { MedalSocialMark } from './medal-social-mark.js';

package/dist/brand/public.js

@@ -0,0 +1 @@
+export { MedalSocialMark } from './medal-social-mark.js';

package/dist/chat/index.d.ts

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

package/dist/chat/index.js

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

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

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

package/dist/chat/latency-badge.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Tones use 700-shade variants so 11px badge text clears WCAG AA (4.5:1)
+// against the white/card background. The 400/500 shades chosen for visual
+// consistency with the colored bar segments don't satisfy contrast at this
+// size, so the *bar* keeps the lighter shade and the *label* uses the darker.
+const KIND = {
+    stt: { label: 'STT', tone: 'text-sky-700' },
+    claude: { label: 'Claude', tone: 'text-primary' },
+    tts: { label: 'TTS', tone: 'text-emerald-700' },
+};
+function fmt(ms) {
+    if (ms >= 1000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    return `${Math.round(ms)}ms`;
+}
+export function LatencyBadge({ kind, ms, className }) {
+    const meta = KIND[kind];
+    return (_jsxs("span", { "data-kind": kind, className: [
+            'inline-flex items-center gap-1.5 text-[11px] tabular-nums',
+            meta.tone,
+            className ?? '',
+        ].join(' '), children: [_jsx("span", { "aria-hidden": "true", className: "size-1 rounded-full bg-current" }), meta.label, " ", fmt(ms)] }));
+}

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

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

package/dist/chat/latency-breakdown.js

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

package/dist/chat/public.d.ts

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

package/dist/chat/public.js

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

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

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

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

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

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

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

package/dist/chat/transcript-stream.js

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

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

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

package/dist/chat/turn-card.js

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

package/dist/chat/types.d.ts

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

package/dist/chat/types.js

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

package/dist/components/ui/command.d.ts

@@ -0,0 +1,19 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import type * as React from 'react';
+import { Dialog } from './dialog.js';
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function CommandItem({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };

package/dist/components/ui/command.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog.js';
+function Command({ className, ...props }) {
+    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn('flex size-full flex-col overflow-hidden bg-popover text-popover-foreground', className), ...props }));
+}
+function CommandDialog({ title = 'Command Palette', description = 'Search for a command to run...', children, className, showCloseButton = false, ...props }) {
+    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn('top-[38%] overflow-hidden rounded-xl! p-0 sm:max-w-2xl', className), showCloseButton: showCloseButton, children: children })] }));
+}
+function CommandInput({ className, ...props }) {
+    return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex items-center gap-3 border-b px-4 py-3", children: [_jsx(SearchIcon, { className: "size-5 shrink-0 text-muted-foreground/60" }), _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('flex-1 bg-transparent text-base outline-none placeholder:text-muted-foreground/60 disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] }));
+}
+function CommandList({ className, ...props }) {
+    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn('no-scrollbar max-h-[400px] scroll-py-1 overflow-y-auto overflow-x-hidden p-2 outline-none', className), ...props }));
+}
+function CommandEmpty({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: cn('py-6 text-center text-sm', className), ...props }));
+}
+function CommandGroup({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn(
+        // group heading uses solid muted-foreground (not /70) so 12px
+        // labels meet WCAG AA contrast on the popover background.
+        'overflow-hidden text-foreground [&:first-child_[cmdk-group-heading]]:pt-1 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:pt-4 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs', className), ...props }));
+}
+function CommandSeparator({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn('-mx-1 h-px bg-border', className), ...props }));
+}
+function CommandItem({ className, children, ...props }) {
+    return (_jsx(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("group/command-item relative flex cursor-default select-none items-center gap-3 rounded-lg px-3 py-2 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-selected:bg-accent data-selected:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-selected:[&_svg]:text-accent-foreground", className), ...props, children: children }));
+}
+function CommandShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn('ml-auto text-muted-foreground text-xs tracking-widest group-data-selected/command-item:text-foreground', className), ...props }));
+}
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };

package/dist/components/ui/dialog.d.ts

@@ -0,0 +1,26 @@
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import type * as React from 'react';
+interface DialogProps extends DialogPrimitive.Root.Props {
+    /**
+     * When false, prevents closing via backdrop/outside clicks.
+     * Escape key and X button still work (WCAG compliance).
+     * @default true
+     */
+    dismissible?: boolean;
+}
+declare function Dialog({ dismissible, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+interface DialogTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>, 'render'> {
+    render?: React.ReactElement;
+}
+declare function DialogTrigger({ render, children, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: DialogPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, children, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/ui/dialog.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { XIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+function Dialog({ dismissible = true, ...props }) {
+    return (_jsx(DialogPrimitive.Root, { "data-slot": "dialog", disablePointerDismissal: !dismissible, ...props }));
+}
+function DialogTrigger({ render, children, ...props }) {
+    if (render) {
+        return (_jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", render: render, ...props, children: children }));
+    }
+    return (_jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props, children: children }));
+}
+function DialogPortal({ ...props }) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn('data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/20 duration-100 data-closed:animate-out data-open:animate-in motion-reduce:duration-0 supports-backdrop-filter:backdrop-blur-xs dark:bg-black/40', className), ...props }));
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn('data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg bg-background p-4 text-sm outline-none ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in motion-reduce:duration-0 sm:max-w-sm overscroll-behavior-y-contain dark:ring-border', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "absolute top-2 right-2 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2', className), ...props }));
+}
+function DialogFooter({ className, children, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-footer", className: cn('-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end dark:bg-muted/70', className), ...props, children: children }));
+}
+function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn('font-semibold text-base leading-snug tracking-tight', className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn('text-muted-foreground text-sm *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground', className), ...props }));
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/ui/drawer.d.ts

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerContent({ className, children, showOverlay, overlayClassName, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+    showOverlay?: boolean;
+    overlayClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };

package/dist/components/ui/drawer.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as DrawerPrimitive } from 'vaul';
+import { cn } from '../../lib/utils.js';
+function Drawer({ ...props }) {
+    return _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({ ...props }) {
+    return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+    return _jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+    return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Overlay, { "data-slot": "drawer-overlay", className: cn('data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 data-closed:animate-out data-open:animate-in supports-backdrop-filter:backdrop-blur-xs dark:bg-black/40', className), ...props }));
+}
+function DrawerContent({ className, children, showOverlay = true, overlayClassName, ...props }) {
+    return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [showOverlay ? _jsx(DrawerOverlay, { className: overlayClassName }) : null, _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn('group/drawer-content fixed z-50 flex h-auto flex-col bg-card text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=right]:border-l border-border data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm', className), ...props, children: [_jsx("div", { className: "mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children] })] }));
+}
+function DrawerHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-header", className: cn('flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left', className), ...props }));
+}
+function DrawerFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-footer", className: cn('mt-auto flex flex-col gap-2 p-4', className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn('font-semibold text-base text-foreground leading-snug tracking-tight', className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,32 @@
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import type * as React from 'react';
+declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): import("react/jsx-runtime").JSX.Element;
+interface DropdownMenuTriggerProps extends Omit<MenuPrimitive.Trigger.Props, 'render'> {
+    render?: React.ReactElement | MenuPrimitive.Trigger.Props['render'];
+}
+declare function DropdownMenuTrigger({ render, children, ...props }: DropdownMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+interface MenuItemProps extends Omit<MenuPrimitive.Item.Props, 'render' | 'onClick' | 'onSelect'> {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+    render?: React.ReactElement;
+    onClick?: MenuPrimitive.Item.Props['onClick'];
+    onSelect?: MenuPrimitive.Item.Props['onClick'];
+}
+declare function DropdownMenuItem({ className, inset, variant, render, onClick, onSelect, children, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: MenuPrimitive.CheckboxItem.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type MenuItemProps, };