@medalsocial/meda 2.0.0 → 2.2.0

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

@@ -0,0 +1,26 @@
+import { type Connection, type EdgeChange, type NodeChange, type ReactFlowProps } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import type { WorkflowEdge, WorkflowNode } from './types.js';
+export interface WorkflowCanvasProps {
+    nodes: WorkflowNode[];
+    edges: WorkflowEdge[];
+    onNodesChange: (changes: NodeChange[]) => void;
+    onEdgesChange: (changes: EdgeChange[]) => void;
+    onConnect: (connection: Connection) => void;
+    onNodeClick?: (node: WorkflowNode) => void;
+    onPaneClick?: () => void;
+    onSelectionChange?: (selection: {
+        nodes: WorkflowNode[];
+        edges: WorkflowEdge[];
+    }) => void;
+    readOnly?: boolean;
+    customNodeTypes?: ReactFlowProps['nodeTypes'];
+    customEdgeTypes?: ReactFlowProps['edgeTypes'];
+    className?: string;
+}
+/**
+ * The bare React Flow canvas, with sensible defaults wired in. No header / no
+ * toolbox — compose with `WorkflowBuilder` for the full surface, or use this
+ * alone when embedding in a custom layout.
+ */
+export declare function WorkflowCanvas({ nodes, edges, onNodesChange, onEdgesChange, onConnect, onNodeClick, onPaneClick, onSelectionChange, readOnly, customNodeTypes, customEdgeTypes, className, }: WorkflowCanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/workflow-canvas.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Background, BackgroundVariant, Controls, ReactFlow, } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { useCallback } from 'react';
+import { cn } from '../lib/utils.js';
+import { workflowEdgeTypes } from './edges/index.js';
+import { workflowNodeTypes } from './nodes/index.js';
+/**
+ * The bare React Flow canvas, with sensible defaults wired in. No header / no
+ * toolbox — compose with `WorkflowBuilder` for the full surface, or use this
+ * alone when embedding in a custom layout.
+ */
+export function WorkflowCanvas({ nodes, edges, onNodesChange, onEdgesChange, onConnect, onNodeClick, onPaneClick, onSelectionChange, readOnly = false, customNodeTypes, customEdgeTypes, className, }) {
+    const handleNodeClick = useCallback(
+    /* v8 ignore next 3 — React Flow only fires this in a real browser canvas */
+    (_e, node) => {
+        onNodeClick?.(node);
+    }, [onNodeClick]);
+    const handleSelectionChange = useCallback(
+    /* v8 ignore next 4 — React Flow only fires this in a real browser canvas */
+    (params) => {
+        onSelectionChange?.({
+            nodes: params.nodes,
+            edges: params.edges,
+        });
+    }, [onSelectionChange]);
+    return (_jsx("div", { "data-slot": "workflow-canvas", className: cn('@container relative h-full w-full bg-muted/40', className), children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: readOnly ? undefined : onNodesChange, onEdgesChange: readOnly ? undefined : onEdgesChange, onConnect: readOnly ? undefined : onConnect, onNodeClick: onNodeClick ? handleNodeClick : undefined, onPaneClick: onPaneClick, onSelectionChange: onSelectionChange ? handleSelectionChange : undefined, nodeTypes: customNodeTypes ?? workflowNodeTypes, edgeTypes: customEdgeTypes ?? workflowEdgeTypes, fitView: true, fitViewOptions: { padding: 0.3, maxZoom: 1.1 }, nodesDraggable: !readOnly, nodesConnectable: !readOnly, elementsSelectable: !readOnly, panOnScroll: true, proOptions: { hideAttribution: true }, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 20, size: 1, color: "var(--color-border)" }), _jsx(Controls, { showInteractive: false, className: "!bg-background !border-border !shadow-sm [&>button]:!bg-background [&>button]:!border-border [&>button]:!text-foreground [&>button:hover]:!bg-muted" })] }) }));
+}

package/dist/workflow-builder/workflow-card-compact.d.ts

@@ -0,0 +1,2 @@
+import type { WorkflowCardCompactProps } from './types.js';
+export declare function WorkflowCardCompact({ workflow, onClick, className }: WorkflowCardCompactProps): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/workflow-card-compact.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pause, Play, Zap } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+const STATUS_CLASSES = {
+    draft: 'bg-muted text-muted-foreground',
+    active: 'bg-success-100 text-success-700 dark:bg-success-900/30 dark:text-success-400',
+    paused: 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400',
+};
+const STATUS_ICONS = {
+    draft: null,
+    active: _jsx(Play, { className: "h-3 w-3", "aria-hidden": true }),
+    paused: _jsx(Pause, { className: "h-3 w-3", "aria-hidden": true }),
+};
+export function WorkflowCardCompact({ workflow, onClick, className }) {
+    return (_jsxs("div", { "data-slot": "workflow-card-compact", "data-status": workflow.status, className: cn('cursor-pointer space-y-2 rounded-md border border-border bg-card p-3 transition-colors hover:bg-accent/50', className), onClick: onClick, onKeyDown: (e) => {
+            if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                onClick();
+            }
+        }, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [_jsx("div", { className: "truncate font-medium text-foreground text-sm", children: workflow.name }), workflow.description ? (_jsx("p", { className: "line-clamp-2 text-muted-foreground text-xs", children: workflow.description })) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-medium text-xs', STATUS_CLASSES[workflow.status]), children: [STATUS_ICONS[workflow.status], _jsx("span", { className: "capitalize", children: workflow.status })] }), workflow.triggerLabel ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-muted-foreground text-xs", children: [_jsx(Zap, { className: "h-3 w-3", "aria-hidden": true }), workflow.triggerLabel] })) : null] })] }));
+}

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

@@ -0,0 +1,2 @@
+import type { WorkflowCardProps } from './types.js';
+export declare function WorkflowCard({ workflow, onClick, className }: WorkflowCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/workflow-card.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pause, Play, Zap } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+const STATUS_CLASSES = {
+    draft: 'bg-muted text-muted-foreground',
+    active: 'bg-success-100 text-success-700 dark:bg-success-900/30 dark:text-success-400',
+    paused: 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400',
+};
+function formatRelative(ts) {
+    const diff = Date.now() - ts;
+    const seconds = Math.round(diff / 1000);
+    if (seconds < 60)
+        return 'just now';
+    const minutes = Math.round(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.round(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.round(hours / 24);
+    return `${days}d ago`;
+}
+function getInitials(value) {
+    return value
+        .split(' ')
+        .map((part) => part[0] ?? '')
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+}
+const STATUS_ICONS = {
+    draft: null,
+    active: _jsx(Play, { className: "h-3 w-3", "aria-hidden": true }),
+    paused: _jsx(Pause, { className: "h-3 w-3", "aria-hidden": true }),
+};
+export function WorkflowCard({ workflow, onClick, className }) {
+    return (_jsxs("div", { "data-slot": "workflow-card", "data-status": workflow.status, className: cn('group cursor-pointer rounded-lg border border-border bg-card p-4 shadow-sm transition-all hover:shadow-md', className), onClick: onClick, onKeyDown: (e) => {
+            if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                onClick();
+            }
+        }, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [_jsx("div", { className: "mb-3 flex items-start justify-between gap-3", children: _jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [_jsx("h3", { className: "truncate font-semibold text-base text-foreground", children: workflow.name }), workflow.description ? (_jsx("p", { className: "line-clamp-2 text-muted-foreground text-sm", children: workflow.description })) : null] }) }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-medium text-xs', STATUS_CLASSES[workflow.status]), children: [STATUS_ICONS[workflow.status], _jsx("span", { className: "capitalize", children: workflow.status })] }), workflow.triggerLabel ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-muted-foreground text-sm", children: [_jsx(Zap, { className: "h-3.5 w-3.5", "aria-hidden": true }), workflow.triggerLabel] })) : null] }), workflow.meta?.length ? (_jsx("dl", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-muted-foreground text-sm", children: workflow.meta.map((m) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("dt", { className: "font-medium", children: [m.label, ":"] }), _jsx("dd", { className: "tabular-nums", children: m.value })] }, m.label))) })) : null, workflow.creatorName || workflow.createdAt ? (_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs", children: [workflow.creatorName ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [workflow.creatorAvatarUrl ? (_jsx("img", { src: workflow.creatorAvatarUrl, alt: "", className: "h-5 w-5 rounded-full" })) : (_jsx("span", { className: "inline-flex h-5 w-5 items-center justify-center rounded-full bg-muted font-medium text-[10px]", children: getInitials(workflow.creatorName) })), _jsx("span", { className: "truncate", children: workflow.creatorName })] })) : null, workflow.createdAt ? _jsx("span", { children: formatRelative(workflow.createdAt) }) : null] })) : null] })] }));
+}

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

@@ -0,0 +1,2 @@
+import { type WorkflowHeaderProps } from './types.js';
+export declare function WorkflowHeader({ name, onNameChange, status, onSave, onPublish, onPause, onBack, isSaving, readOnly, labels, className, }: WorkflowHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/workflow-header.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, Pause, Play, Save } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { defaultWorkflowBuilderLabels, } from './types.js';
+const STATUS_CLASSES = {
+    draft: 'bg-muted text-muted-foreground',
+    active: 'bg-success-100 text-success-700 dark:bg-success-900/30 dark:text-success-400',
+    paused: 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400',
+};
+const STATUS_TEXT = {
+    draft: 'Draft',
+    active: 'Active',
+    paused: 'Paused',
+};
+export function WorkflowHeader({ name, onNameChange, status = 'draft', onSave, onPublish, onPause, onBack, isSaving = false, readOnly = false, labels, className, }) {
+    const resolvedLabels = { ...defaultWorkflowBuilderLabels, ...(labels ?? {}) };
+    const [isEditing, setIsEditing] = useState(false);
+    const inputRef = useRef(null);
+    const handleNameClick = () => {
+        /* v8 ignore next — button is disabled when readOnly or no handler; browser blocks the click */
+        if (readOnly || !onNameChange)
+            return;
+        setIsEditing(true);
+        setTimeout(() => inputRef.current?.select(), 0);
+    };
+    return (_jsxs("header", { "data-slot": "workflow-header", className: cn('flex h-14 items-center justify-between border-border border-b bg-background px-4', className), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [onBack ? (_jsx("button", { type: "button", onClick: onBack, "aria-label": "Back", className: "inline-flex h-11 w-11 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground", children: _jsx(ArrowLeft, { className: "h-4 w-4", "aria-hidden": true }) })) : null, isEditing && onNameChange ? (_jsx("input", { ref: inputRef, value: name, onChange: (e) => onNameChange(e.target.value), onBlur: () => setIsEditing(false), onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === 'Escape')
+                                setIsEditing(false);
+                        }, className: "h-9 w-64 rounded-md border border-border bg-background px-2 font-semibold text-foreground text-sm" })) : (_jsx("button", { type: "button", onClick: handleNameClick, disabled: readOnly || !onNameChange, className: "rounded-md px-2 py-1 font-semibold text-foreground text-sm transition-colors hover:bg-accent disabled:cursor-default disabled:hover:bg-transparent", children: name || 'Untitled workflow' })), _jsx("span", { "data-slot": "workflow-status-badge", className: cn('inline-flex items-center rounded-full px-2 py-0.5 font-medium text-xs', STATUS_CLASSES[status]), children: STATUS_TEXT[status] })] }), !readOnly ? (_jsxs("div", { className: "flex items-center gap-2", children: [(status === 'draft' || status === 'paused') && onPublish ? (_jsxs("button", { type: "button", onClick: onPublish, className: "inline-flex h-9 min-h-9 items-center gap-1.5 rounded-md border border-border bg-background px-3 font-medium text-sm transition-colors hover:bg-accent", children: [_jsx(Play, { className: "h-3.5 w-3.5", "aria-hidden": true }), resolvedLabels.publishAction] })) : null, status === 'active' && onPause ? (_jsxs("button", { type: "button", onClick: onPause, className: "inline-flex h-9 min-h-9 items-center gap-1.5 rounded-md border border-border bg-background px-3 font-medium text-sm transition-colors hover:bg-accent", children: [_jsx(Pause, { className: "h-3.5 w-3.5", "aria-hidden": true }), resolvedLabels.pauseAction] })) : null, onSave ? (_jsxs("button", { type: "button", onClick: onSave, disabled: isSaving, className: "inline-flex h-9 min-h-9 items-center gap-1.5 rounded-md bg-primary px-3 font-medium text-primary-foreground text-sm transition-colors hover:bg-primary/90 disabled:opacity-50", children: [_jsx(Save, { className: "h-3.5 w-3.5", "aria-hidden": true }), isSaving ? resolvedLabels.saving : resolvedLabels.saveAction] })) : null] })) : null] }));
+}

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

@@ -0,0 +1,2 @@
+import { type WorkflowToolboxProps } from './types.js';
+export declare function WorkflowToolbox({ items, onAddNode, readOnly, labels, className, }: WorkflowToolboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/workflow-toolbox.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+import { renderWorkflowIcon } from './internal/trigger-icons.js';
+import { defaultWorkflowBuilderLabels, } from './types.js';
+function defaultItems(labels) {
+    return [
+        { kind: 'trigger', label: labels.addTrigger, iconName: 'zap' },
+        { kind: 'action', label: labels.addAction, iconName: 'send' },
+        { kind: 'condition', label: labels.addCondition, iconName: 'git-branch' },
+        { kind: 'delay', label: labels.addDelay, iconName: 'clock' },
+        { kind: 'end', label: labels.addEnd, iconName: 'flag' },
+    ];
+}
+export function WorkflowToolbox({ items, onAddNode, readOnly = false, labels, className, }) {
+    const resolvedLabels = { ...defaultWorkflowBuilderLabels, ...(labels ?? {}) };
+    const resolvedItems = items ?? defaultItems(resolvedLabels);
+    return (_jsxs("aside", { "data-slot": "workflow-toolbox", className: cn('flex h-full w-full flex-col border-border border-r bg-background', className), children: [_jsx("div", { className: "border-border border-b px-4 py-3", children: _jsx("h2", { className: "font-semibold text-foreground text-sm", children: resolvedLabels.toolboxTitle }) }), _jsx("div", { className: "flex-1 overflow-y-auto px-3 py-3", children: readOnly ? (_jsx("p", { className: "px-1 py-2 text-muted-foreground text-xs", children: resolvedLabels.toolboxReadOnlyHint })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "mb-2 px-1 text-muted-foreground text-xs", children: resolvedLabels.toolboxHint }), _jsx("ul", { className: "space-y-1.5", children: resolvedItems.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", "data-slot": "workflow-toolbox-item", "data-kind": item.kind, onClick: () => onAddNode?.(item.kind), className: "flex min-h-11 w-full items-center gap-2.5 rounded-md px-2 py-2.5 text-left text-sm transition-colors hover:bg-accent/60 focus-visible:bg-accent/80 focus-visible:outline-none", children: [_jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: renderWorkflowIcon(item.kind, item.iconName, 'h-4 w-4') }), _jsx("span", { className: "flex-1 font-medium", children: item.label })] }) }, item.kind))) })] })) })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -55,6 +55,14 @@
       "types": "./dist/kanban/index.d.ts",
       "import": "./dist/kanban/index.js"
     },
+    "./calendar": {
+      "types": "./dist/calendar/index.d.ts",
+      "import": "./dist/calendar/index.js"
+    },
+    "./workflow-builder": {
+      "types": "./dist/workflow-builder/index.d.ts",
+      "import": "./dist/workflow-builder/index.js"
+    },
     "./list": {
       "types": "./dist/list/index.d.ts",
       "import": "./dist/list/index.js"
@@ -67,10 +75,18 @@
       "types": "./dist/chat/index.d.ts",
       "default": "./dist/chat/index.js"
     },
+    "./email-builder": {
+      "types": "./dist/email-builder/index.d.ts",
+      "default": "./dist/email-builder/index.js"
+    },
     "./panel": {
       "types": "./dist/panel/index.d.ts",
       "default": "./dist/panel/index.js"
     },
+    "./post-preview": {
+      "types": "./dist/post-preview/index.d.ts",
+      "default": "./dist/post-preview/index.js"
+    },
     "./styles": {
       "default": "./dist/styles/theme.css"
     },
@@ -105,6 +121,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-three/fiber": "^9.0.0",
+    "@xyflow/react": "^12.0.0",
     "lucide-react": "^1.8.0",
     "next-themes": "^0.4.0",
     "react": ">=19",
@@ -123,62 +140,66 @@
     "@react-three/fiber": {
       "optional": true
     },
+    "@xyflow/react": {
+      "optional": false
+    },
     "next-themes": {
       "optional": true
     }
   },
   "dependencies": {
-    "@base-ui/react": "^1.4.0",
-    "@fontsource-variable/geist": "^5.2.8",
-    "@fontsource-variable/geist-mono": "^5.2.7",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "react-resizable-panels": "^4.10.0",
-    "tailwind-merge": "^3.5.0",
-    "three": "^0.170.0",
-    "vaul": "^1.1.2"
+    "@base-ui/react": "1.4.1",
+    "@fontsource-variable/geist": "5.2.8",
+    "@fontsource-variable/geist-mono": "5.2.7",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "react-resizable-panels": "4.11.0",
+    "tailwind-merge": "3.5.0",
+    "three": "0.184.0",
+    "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@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",
-    "@storybook/addon-a11y": "^10.3.5",
-    "@storybook/addon-docs": "10.3.5",
-    "@storybook/addon-mcp": "^0.6.0",
-    "@storybook/addon-themes": "^10.3.5",
-    "@storybook/addon-vitest": "^10.3.5",
-    "@storybook/react-vite": "^10.3.5",
-    "@tailwindcss/vite": "^4.2.4",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@types/three": "^0.184.0",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/browser-playwright": "4.1.4",
-    "@vitest/coverage-v8": "4.1.4",
-    "chromatic": "^16.6.0",
-    "husky": "^9.1.7",
-    "jsdom": "^29.0.2",
-    "next-themes": "^0.4.0",
-    "playwright": "^1.59.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "size-limit": "^12.1.0",
-    "storybook": "^10.3.5",
-    "tailwindcss": "^4.2.4",
-    "typescript": "~6.0.2",
-    "vite": "^8.0.4",
-    "vitest": "^4.1.4",
-    "vitest-axe": "^0.1.0",
-    "wrangler": "^4.0.0"
+    "@biomejs/biome": "2.4.14",
+    "@changesets/changelog-github": "0.6.0",
+    "@changesets/cli": "2.31.0",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@react-three/fiber": "9.6.1",
+    "@size-limit/preset-small-lib": "12.1.0",
+    "@storybook/addon-a11y": "10.3.6",
+    "@storybook/addon-docs": "10.3.6",
+    "@storybook/addon-mcp": "0.6.0",
+    "@storybook/addon-themes": "10.3.6",
+    "@storybook/addon-vitest": "10.3.6",
+    "@storybook/react-vite": "10.3.6",
+    "@tailwindcss/vite": "4.2.4",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@types/three": "0.184.0",
+    "@vitejs/plugin-react": "6.0.1",
+    "@vitest/browser-playwright": "4.1.5",
+    "@vitest/coverage-istanbul": "4.1.5",
+    "@vitest/coverage-v8": "4.1.5",
+    "@xyflow/react": "12.10.2",
+    "chromatic": "16.6.3",
+    "husky": "9.1.7",
+    "jsdom": "29.1.1",
+    "next-themes": "0.4.6",
+    "playwright": "1.59.1",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "size-limit": "12.1.0",
+    "storybook": "10.3.6",
+    "tailwindcss": "4.2.4",
+    "typescript": "~6.0.3",
+    "vite": "8.0.10",
+    "vitest": "4.1.5",
+    "vitest-axe": "0.1.0",
+    "wrangler": "4.87.0"
   },
   "scripts": {
     "build": "pnpm exec tsc -p tsconfig.build.json && node ./scripts/build.mjs",
@@ -193,6 +214,7 @@
     "worker:deploy": "pnpm worker:build && wrangler deploy",
     "test": "vitest run --environment jsdom",
     "test:run": "vitest run --environment jsdom",
+    "test:coverage": "vitest run --environment jsdom --project unit --coverage",
     "test:integration": "vitest run --config vitest.config.integration.ts",
     "typecheck": "tsc --noEmit",
     "storybook": "storybook dev -p 6006 --no-open",

package/dist/styles/theme.test.ts

@@ -1,41 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-// Read theme.css via Node's runtime APIs without pulling in @types/node.
-// Declared locally so the package-level tsconfig (which doesn't include
-// node typings) still typechecks cleanly under jsdom Vitest runs.
-declare const require: (id: string) => unknown;
-declare const __dirname: string;
-
-const fs = require('node:fs') as { readFileSync(p: string, enc: string): string };
-const path = require('node:path') as { join(...parts: string[]): string };
-const themeCss = fs.readFileSync(path.join(__dirname, 'theme.css'), 'utf8');
-
-describe('theme.css', () => {
-  // Tailwind v4 only generates utility classes for class names it sees in
-  // scanned files. Consumer apps don't reference every utility used by meda
-  // components (e.g. `h-full`, `mt-auto`, `py-3.5`, `bg-shell-rail` on
-  // IconRail), so without an @source directive pointing at meda's compiled
-  // dist files, those classes silently disappear and component layouts
-  // collapse — most visibly, the IconRail's utility items fail to pin to
-  // the bottom of the viewport because `mt-auto` never gets generated.
-  //
-  // The directive is resolved relative to this CSS file at build time. Since
-  // src/styles/theme.css is copied verbatim to dist/styles/theme.css by the
-  // build script, `../**/*.js` from the dist location scans every emitted
-  // component module — exactly the surface consumers import from.
-  it('declares an @source directive that scans meda component output', () => {
-    expect(themeCss).toMatch(/@source\s+["']\.\.\/\*\*\/\*\.js["']/);
-  });
-
-  it('declares dedicated auth gradient tokens for consumer overrides', () => {
-    expect(themeCss).toContain('--auth-gradient-primary: var(--color-brand-500);');
-    expect(themeCss).toContain('--auth-gradient-secondary: var(--color-brand-700);');
-    expect(themeCss).toContain('--auth-gradient-base: var(--color-brand-800);');
-  });
-
-  it('neutralizes vaul drawer layer hints after mobile drawers are open', () => {
-    expect(themeCss).toMatch(
-      /\[data-vaul-drawer\]\[data-state=["']open["']\]\s*\{[^}]*will-change:\s*auto;/s
-    );
-  });
-});