@automa8e/ui 0.2.0

package/dist/components/automation/task-card.js

@@ -0,0 +1,114 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Card, CardContent } from "../ui/card.js";
+import { Avatar, AvatarImage, AvatarFallback } from "../ui/avatar.js";
+import { Badge } from "../ui/badge.js";
+import { StatusBadge } from "./status-badge.js";
+import Flag from "../../node_modules/lucide-react/dist/esm/icons/flag.js";
+import Calendar from "../../node_modules/lucide-react/dist/esm/icons/calendar.js";
+import Tag from "../../node_modules/lucide-react/dist/esm/icons/tag.js";
+const PRIORITY_CONFIG = {
+  critical: { label: "Critical", color: "text-destructive", dotClass: "bg-destructive" },
+  high: { label: "High", color: "text-warning", dotClass: "bg-warning" },
+  medium: { label: "Medium", color: "text-info", dotClass: "bg-info" },
+  low: { label: "Low", color: "text-muted-foreground", dotClass: "bg-muted-foreground" }
+};
+const TASK_TO_WORKFLOW_STATUS = {
+  running: "running",
+  completed: "completed",
+  failed: "failed",
+  pending: "pending",
+  skipped: "cancelled",
+  cancelled: "cancelled"
+};
+function TaskCard({
+  className,
+  task,
+  showPriority = true,
+  onSelect,
+  compact = false,
+  ...props
+}) {
+  const priority = PRIORITY_CONFIG[task.priority];
+  const workflowStatus = TASK_TO_WORKFLOW_STATUS[task.status];
+  const formattedDue = task.dueAt ? new Date(task.dueAt).toLocaleDateString("en-US", { month: "short", day: "numeric" }) : null;
+  const isOverdue = task.dueAt && task.status !== "completed" && task.status !== "cancelled" && new Date(task.dueAt) < /* @__PURE__ */ new Date();
+  if (compact) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-3 py-2 px-3 rounded-md hover:bg-muted/50 transition-colors",
+          onSelect && "cursor-pointer",
+          className
+        ),
+        onClick: () => onSelect == null ? void 0 : onSelect(task),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(StatusBadge, { status: workflowStatus, size: "xs" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm truncate", children: task.title }),
+          task.assignee && /* @__PURE__ */ jsxs(Avatar, { size: "xs", children: [
+            task.assignee.avatarUrl && /* @__PURE__ */ jsx(AvatarImage, { src: task.assignee.avatarUrl, alt: task.assignee.name }),
+            /* @__PURE__ */ jsx(AvatarFallback, { children: task.assignee.initials ?? task.assignee.name.slice(0, 2).toUpperCase() })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      className: cn(
+        "transition-all duration-200",
+        onSelect && "cursor-pointer hover:border-primary/40 hover:shadow-glow-primary",
+        className
+      ),
+      onClick: () => onSelect == null ? void 0 : onSelect(task),
+      ...props,
+      children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+            /* @__PURE__ */ jsx("h4", { className: cn(
+              "text-sm font-medium leading-tight",
+              task.status === "completed" && "line-through text-muted-foreground"
+            ), children: task.title }),
+            /* @__PURE__ */ jsx(StatusBadge, { status: workflowStatus, size: "xs" })
+          ] }),
+          task.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground line-clamp-2", children: task.description }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-3", children: [
+            showPriority && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 text-xs font-medium", priority.color), children: [
+              /* @__PURE__ */ jsx(Flag, { className: "h-3 w-3" }),
+              priority.label
+            ] }),
+            formattedDue && /* @__PURE__ */ jsxs("div", { className: cn(
+              "flex items-center gap-1 text-xs",
+              isOverdue ? "text-destructive font-medium" : "text-muted-foreground"
+            ), children: [
+              /* @__PURE__ */ jsx(Calendar, { className: "h-3 w-3" }),
+              isOverdue && "Overdue · ",
+              formattedDue
+            ] }),
+            task.tags && task.tags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(Tag, { className: "h-3 w-3 text-muted-foreground" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1 flex-wrap", children: [
+                task.tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "muted", size: "sm", children: tag }, tag)),
+                task.tags.length > 3 && /* @__PURE__ */ jsxs(Badge, { variant: "muted", size: "sm", children: [
+                  "+",
+                  task.tags.length - 3
+                ] })
+              ] })
+            ] })
+          ] })
+        ] }),
+        task.assignee && /* @__PURE__ */ jsxs(Avatar, { size: "sm", children: [
+          task.assignee.avatarUrl && /* @__PURE__ */ jsx(AvatarImage, { src: task.assignee.avatarUrl, alt: task.assignee.name }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: task.assignee.initials ?? task.assignee.name.slice(0, 2).toUpperCase() })
+        ] })
+      ] }) })
+    }
+  );
+}
+export {
+  TaskCard
+};
+//# sourceMappingURL=task-card.js.map

package/dist/components/automation/task-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-card.js","sources":["../../../src/components/automation/task-card.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Calendar, Flag, Tag } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { StatusBadge } from './status-badge'\nimport type { Task, TaskPriority } from '@/types/automation'\n\nconst PRIORITY_CONFIG: Record<TaskPriority, { label: string; color: string; dotClass: string }> = {\n  critical: { label: 'Critical', color: 'text-destructive', dotClass: 'bg-destructive' },\n  high: { label: 'High', color: 'text-warning', dotClass: 'bg-warning' },\n  medium: { label: 'Medium', color: 'text-info', dotClass: 'bg-info' },\n  low: { label: 'Low', color: 'text-muted-foreground', dotClass: 'bg-muted-foreground' },\n}\n\n// Map TaskStatus to WorkflowStatus for the StatusBadge\nconst TASK_TO_WORKFLOW_STATUS = {\n  running: 'running',\n  completed: 'completed',\n  failed: 'failed',\n  pending: 'pending',\n  skipped: 'cancelled',\n  cancelled: 'cancelled',\n} as const\n\nexport interface TaskCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  task: Task\n  /** Show/hide priority indicator */\n  showPriority?: boolean\n  /** Called when card is clicked */\n  onSelect?: (task: Task) => void\n  /** Compact single-line mode */\n  compact?: boolean\n}\n\nfunction TaskCard({\n  className,\n  task,\n  showPriority = true,\n  onSelect,\n  compact = false,\n  ...props\n}: TaskCardProps) {\n  const priority = PRIORITY_CONFIG[task.priority]\n  const workflowStatus = TASK_TO_WORKFLOW_STATUS[task.status]\n\n  const formattedDue = task.dueAt\n    ? new Date(task.dueAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n    : null\n\n  const isOverdue =\n    task.dueAt &&\n    task.status !== 'completed' &&\n    task.status !== 'cancelled' &&\n    new Date(task.dueAt) < new Date()\n\n  if (compact) {\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-3 py-2 px-3 rounded-md hover:bg-muted/50 transition-colors',\n          onSelect && 'cursor-pointer',\n          className\n        )}\n        onClick={() => onSelect?.(task)}\n        {...props}\n      >\n        <StatusBadge status={workflowStatus} size=\"xs\" />\n        <span className=\"flex-1 text-sm truncate\">{task.title}</span>\n        {task.assignee && (\n          <Avatar size=\"xs\">\n            {task.assignee.avatarUrl && <AvatarImage src={task.assignee.avatarUrl} alt={task.assignee.name} />}\n            <AvatarFallback>{task.assignee.initials ?? task.assignee.name.slice(0, 2).toUpperCase()}</AvatarFallback>\n          </Avatar>\n        )}\n      </div>\n    )\n  }\n\n  return (\n    <Card\n      className={cn(\n        'transition-all duration-200',\n        onSelect && 'cursor-pointer hover:border-primary/40 hover:shadow-glow-primary',\n        className\n      )}\n      onClick={() => onSelect?.(task)}\n      {...props}\n    >\n      <CardContent className=\"p-4\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex-1 min-w-0\">\n            {/* Title + status */}\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              <h4 className={cn(\n                'text-sm font-medium leading-tight',\n                task.status === 'completed' && 'line-through text-muted-foreground'\n              )}>\n                {task.title}\n              </h4>\n              <StatusBadge status={workflowStatus} size=\"xs\" />\n            </div>\n\n            {task.description && (\n              <p className=\"mt-1 text-xs text-muted-foreground line-clamp-2\">{task.description}</p>\n            )}\n\n            {/* Meta row */}\n            <div className=\"mt-3 flex flex-wrap items-center gap-3\">\n              {showPriority && (\n                <div className={cn('flex items-center gap-1 text-xs font-medium', priority.color)}>\n                  <Flag className=\"h-3 w-3\" />\n                  {priority.label}\n                </div>\n              )}\n\n              {formattedDue && (\n                <div className={cn(\n                  'flex items-center gap-1 text-xs',\n                  isOverdue ? 'text-destructive font-medium' : 'text-muted-foreground'\n                )}>\n                  <Calendar className=\"h-3 w-3\" />\n                  {isOverdue && 'Overdue · '}\n                  {formattedDue}\n                </div>\n              )}\n\n              {task.tags && task.tags.length > 0 && (\n                <div className=\"flex items-center gap-1\">\n                  <Tag className=\"h-3 w-3 text-muted-foreground\" />\n                  <div className=\"flex gap-1 flex-wrap\">\n                    {task.tags.slice(0, 3).map((tag) => (\n                      <Badge key={tag} variant=\"muted\" size=\"sm\">\n                        {tag}\n                      </Badge>\n                    ))}\n                    {task.tags.length > 3 && (\n                      <Badge variant=\"muted\" size=\"sm\">+{task.tags.length - 3}</Badge>\n                    )}\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* Assignee */}\n          {task.assignee && (\n            <Avatar size=\"sm\">\n              {task.assignee.avatarUrl && (\n                <AvatarImage src={task.assignee.avatarUrl} alt={task.assignee.name} />\n              )}\n              <AvatarFallback>\n                {task.assignee.initials ?? task.assignee.name.slice(0, 2).toUpperCase()}\n              </AvatarFallback>\n            </Avatar>\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport { TaskCard }\n"],"names":[],"mappings":"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"}

package/dist/components/automation/workflow-node.d.ts

@@ -0,0 +1,20 @@
+import { WorkflowNodeData } from '../../types/automation';
+import * as React from 'react';
+export interface WorkflowNodeProps extends React.HTMLAttributes<HTMLDivElement> {
+    node: WorkflowNodeData;
+    /** Show as a compact inline node */
+    compact?: boolean;
+    /** Whether to show the connector line below */
+    showConnector?: boolean;
+    /** Whether this is the last node in the chain */
+    isLast?: boolean;
+}
+declare function WorkflowNode({ className, node, compact, showConnector, isLast, ...props }: WorkflowNodeProps): import("react/jsx-runtime").JSX.Element;
+/** Renders a vertical workflow pipeline from an array of nodes */
+export interface WorkflowPipelineProps extends React.HTMLAttributes<HTMLDivElement> {
+    nodes: WorkflowNodeData[];
+    compact?: boolean;
+}
+declare function WorkflowPipeline({ className, nodes, compact, ...props }: WorkflowPipelineProps): import("react/jsx-runtime").JSX.Element;
+export { WorkflowNode, WorkflowPipeline };
+//# sourceMappingURL=workflow-node.d.ts.map

package/dist/components/automation/workflow-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-node.d.ts","sourceRoot":"","sources":["../../../src/components/automation/workflow-node.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AA8C1D,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,IAAI,EAAE,gBAAgB,CAAA;IACtB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,IAAI,EACJ,OAAe,EACf,aAAqB,EACrB,MAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAoFnB;AAED,kEAAkE;AAClE,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAe,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAc/F;AAED,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/automation/workflow-node.js

@@ -0,0 +1,132 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import Send from "../../node_modules/lucide-react/dist/esm/icons/send.js";
+import Timer from "../../node_modules/lucide-react/dist/esm/icons/timer.js";
+import GitBranch from "../../node_modules/lucide-react/dist/esm/icons/git-branch.js";
+import Play from "../../node_modules/lucide-react/dist/esm/icons/play.js";
+import Zap from "../../node_modules/lucide-react/dist/esm/icons/zap.js";
+import Clock from "../../node_modules/lucide-react/dist/esm/icons/clock.js";
+import CircleAlert from "../../node_modules/lucide-react/dist/esm/icons/circle-alert.js";
+import Pause from "../../node_modules/lucide-react/dist/esm/icons/pause.js";
+import CircleCheck from "../../node_modules/lucide-react/dist/esm/icons/circle-check.js";
+import LoaderCircle from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+const NODE_TYPE_CONFIG = {
+  trigger: {
+    icon: Zap,
+    label: "Trigger",
+    className: "border-primary/50 bg-primary/10 text-primary",
+    headerClass: "bg-primary/10"
+  },
+  action: {
+    icon: Play,
+    label: "Action",
+    className: "border-border bg-card text-foreground",
+    headerClass: "bg-muted"
+  },
+  condition: {
+    icon: GitBranch,
+    label: "Condition",
+    className: "border-info/50 bg-info/10 text-foreground",
+    headerClass: "bg-info/10"
+  },
+  delay: {
+    icon: Timer,
+    label: "Delay",
+    className: "border-warning/50 bg-warning/10 text-foreground",
+    headerClass: "bg-warning/10"
+  },
+  output: {
+    icon: Send,
+    label: "Output",
+    className: "border-success/50 bg-success/10 text-foreground",
+    headerClass: "bg-success/10"
+  }
+};
+const STATUS_INDICATOR = {
+  running: { icon: LoaderCircle, className: "text-workflow-running animate-spin" },
+  completed: { icon: CircleCheck, className: "text-workflow-completed" },
+  failed: { icon: CircleAlert, className: "text-workflow-failed" },
+  pending: { icon: Clock, className: "text-workflow-pending" },
+  paused: { icon: Pause, className: "text-workflow-paused" },
+  cancelled: { icon: CircleAlert, className: "text-workflow-cancelled" },
+  idle: { icon: Clock, className: "text-muted-foreground" },
+  scheduled: { icon: Clock, className: "text-info" }
+};
+function WorkflowNode({
+  className,
+  node,
+  compact = false,
+  showConnector = false,
+  isLast = false,
+  ...props
+}) {
+  const typeConfig = NODE_TYPE_CONFIG[node.type];
+  const statusIndicator = STATUS_INDICATOR[node.status];
+  const TypeIcon = typeConfig.icon;
+  const StatusIcon = statusIndicator.icon;
+  const formatDuration = (ms) => {
+    if (ms < 1e3) return `${ms}ms`;
+    if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+    return `${Math.floor(ms / 6e4)}m ${Math.floor(ms % 6e4 / 1e3)}s`;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "w-full rounded-lg border transition-all duration-200",
+          typeConfig.className,
+          node.status === "running" && "shadow-glow-primary animate-workflow-pulse",
+          node.status === "failed" && "border-workflow-failed/60",
+          compact ? "p-3" : "overflow-hidden",
+          className
+        ),
+        ...props,
+        children: compact ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: cn("flex h-6 w-6 shrink-0 items-center justify-center rounded", typeConfig.headerClass), children: /* @__PURE__ */ jsx(TypeIcon, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-medium truncate", children: node.label }),
+          /* @__PURE__ */ jsx(StatusIcon, { className: cn("h-4 w-4 shrink-0", statusIndicator.className) })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5 px-3 py-2.5", typeConfig.headerClass), children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-background/50", children: /* @__PURE__ */ jsx(TypeIcon, { className: "h-4 w-4" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider opacity-70", children: typeConfig.label }) }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold leading-tight truncate", children: node.label })
+            ] }),
+            /* @__PURE__ */ jsx(StatusIcon, { className: cn("h-4 w-4 shrink-0", statusIndicator.className) })
+          ] }),
+          (node.description || node.error || node.duration !== void 0) && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2.5 space-y-1.5", children: [
+            node.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: node.description }),
+            node.error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive font-mono bg-destructive/5 rounded px-2 py-1", children: node.error }),
+            node.duration !== void 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[10px] text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx("span", { children: formatDuration(node.duration) })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    showConnector && !isLast && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center my-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border" }),
+      /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-border" }),
+      /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border" })
+    ] })
+  ] });
+}
+function WorkflowPipeline({ className, nodes, compact = false, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", className), ...props, children: nodes.map((node, i) => /* @__PURE__ */ jsx(
+    WorkflowNode,
+    {
+      node,
+      compact,
+      showConnector: true,
+      isLast: i === nodes.length - 1
+    },
+    node.id
+  )) });
+}
+export {
+  WorkflowNode,
+  WorkflowPipeline
+};
+//# sourceMappingURL=workflow-node.js.map

package/dist/components/automation/workflow-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-node.js","sources":["../../../src/components/automation/workflow-node.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  Zap,\n  Play,\n  GitBranch,\n  Timer,\n  Send,\n  AlertCircle,\n  CheckCircle2,\n  Loader2,\n  Clock,\n  Pause,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { WorkflowNodeData } from '@/types/automation'\n\nconst NODE_TYPE_CONFIG = {\n  trigger: {\n    icon: Zap,\n    label: 'Trigger',\n    className: 'border-primary/50 bg-primary/10 text-primary',\n    headerClass: 'bg-primary/10',\n  },\n  action: {\n    icon: Play,\n    label: 'Action',\n    className: 'border-border bg-card text-foreground',\n    headerClass: 'bg-muted',\n  },\n  condition: {\n    icon: GitBranch,\n    label: 'Condition',\n    className: 'border-info/50 bg-info/10 text-foreground',\n    headerClass: 'bg-info/10',\n  },\n  delay: {\n    icon: Timer,\n    label: 'Delay',\n    className: 'border-warning/50 bg-warning/10 text-foreground',\n    headerClass: 'bg-warning/10',\n  },\n  output: {\n    icon: Send,\n    label: 'Output',\n    className: 'border-success/50 bg-success/10 text-foreground',\n    headerClass: 'bg-success/10',\n  },\n}\n\nconst STATUS_INDICATOR = {\n  running: { icon: Loader2, className: 'text-workflow-running animate-spin' },\n  completed: { icon: CheckCircle2, className: 'text-workflow-completed' },\n  failed: { icon: AlertCircle, className: 'text-workflow-failed' },\n  pending: { icon: Clock, className: 'text-workflow-pending' },\n  paused: { icon: Pause, className: 'text-workflow-paused' },\n  cancelled: { icon: AlertCircle, className: 'text-workflow-cancelled' },\n  idle: { icon: Clock, className: 'text-muted-foreground' },\n  scheduled: { icon: Clock, className: 'text-info' },\n}\n\nexport interface WorkflowNodeProps extends React.HTMLAttributes<HTMLDivElement> {\n  node: WorkflowNodeData\n  /** Show as a compact inline node */\n  compact?: boolean\n  /** Whether to show the connector line below */\n  showConnector?: boolean\n  /** Whether this is the last node in the chain */\n  isLast?: boolean\n}\n\nfunction WorkflowNode({\n  className,\n  node,\n  compact = false,\n  showConnector = false,\n  isLast = false,\n  ...props\n}: WorkflowNodeProps) {\n  const typeConfig = NODE_TYPE_CONFIG[node.type]\n  const statusIndicator = STATUS_INDICATOR[node.status]\n  const TypeIcon = typeConfig.icon\n  const StatusIcon = statusIndicator.icon\n\n  const formatDuration = (ms: number) => {\n    if (ms < 1000) return `${ms}ms`\n    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`\n    return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`\n  }\n\n  return (\n    <div className=\"relative flex flex-col items-center\">\n      <div\n        className={cn(\n          'w-full rounded-lg border transition-all duration-200',\n          typeConfig.className,\n          node.status === 'running' && 'shadow-glow-primary animate-workflow-pulse',\n          node.status === 'failed' && 'border-workflow-failed/60',\n          compact ? 'p-3' : 'overflow-hidden',\n          className\n        )}\n        {...props}\n      >\n        {compact ? (\n          <div className=\"flex items-center gap-2\">\n            <div className={cn('flex h-6 w-6 shrink-0 items-center justify-center rounded', typeConfig.headerClass)}>\n              <TypeIcon className=\"h-3.5 w-3.5\" />\n            </div>\n            <span className=\"flex-1 text-sm font-medium truncate\">{node.label}</span>\n            <StatusIcon className={cn('h-4 w-4 shrink-0', statusIndicator.className)} />\n          </div>\n        ) : (\n          <>\n            {/* Node header */}\n            <div className={cn('flex items-center gap-2.5 px-3 py-2.5', typeConfig.headerClass)}>\n              <div className=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-background/50\">\n                <TypeIcon className=\"h-4 w-4\" />\n              </div>\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"flex items-center gap-1.5\">\n                  <span className=\"text-[10px] font-semibold uppercase tracking-wider opacity-70\">\n                    {typeConfig.label}\n                  </span>\n                </div>\n                <p className=\"text-sm font-semibold leading-tight truncate\">{node.label}</p>\n              </div>\n              <StatusIcon className={cn('h-4 w-4 shrink-0', statusIndicator.className)} />\n            </div>\n\n            {/* Node body */}\n            {(node.description || node.error || node.duration !== undefined) && (\n              <div className=\"px-3 py-2.5 space-y-1.5\">\n                {node.description && (\n                  <p className=\"text-xs text-muted-foreground\">{node.description}</p>\n                )}\n                {node.error && (\n                  <p className=\"text-xs text-destructive font-mono bg-destructive/5 rounded px-2 py-1\">\n                    {node.error}\n                  </p>\n                )}\n                {node.duration !== undefined && (\n                  <div className=\"flex items-center gap-1 text-[10px] text-muted-foreground\">\n                    <Clock className=\"h-3 w-3\" />\n                    <span>{formatDuration(node.duration)}</span>\n                  </div>\n                )}\n              </div>\n            )}\n          </>\n        )}\n      </div>\n\n      {/* Connector line */}\n      {showConnector && !isLast && (\n        <div className=\"flex flex-col items-center my-1\">\n          <div className=\"w-px h-4 bg-border\" />\n          <div className=\"w-1.5 h-1.5 rounded-full bg-border\" />\n          <div className=\"w-px h-4 bg-border\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\n/** Renders a vertical workflow pipeline from an array of nodes */\nexport interface WorkflowPipelineProps extends React.HTMLAttributes<HTMLDivElement> {\n  nodes: WorkflowNodeData[]\n  compact?: boolean\n}\n\nfunction WorkflowPipeline({ className, nodes, compact = false, ...props }: WorkflowPipelineProps) {\n  return (\n    <div className={cn('flex flex-col', className)} {...props}>\n      {nodes.map((node, i) => (\n        <WorkflowNode\n          key={node.id}\n          node={node}\n          compact={compact}\n          showConnector\n          isLast={i === nodes.length - 1}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport { WorkflowNode, WorkflowPipeline }\n"],"names":["Loader2","CheckCircle2","AlertCircle"],"mappings":"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"}

package/dist/components/layout/app-shell.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The sidebar component */
+    sidebar?: React.ReactNode;
+    /** The top header component */
+    header?: React.ReactNode;
+    /** Main content */
+    children: React.ReactNode;
+    /** Whether the sidebar is currently shown (for mobile overlay handling) */
+    sidebarOpen?: boolean;
+}
+/**
+ * AppShell provides the top-level layout structure:
+ * - Sidebar (left)
+ * - Main area (header + content)
+ */
+declare function AppShell({ className, sidebar, header, children, sidebarOpen, ...props }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+/** Content wrapper with standard page padding */
+declare function PageContent({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { AppShell, PageContent };
+//# sourceMappingURL=app-shell.d.ts.map

package/dist/components/layout/app-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../src/components/layout/app-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,4BAA4B;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA2BtG;AAED,iDAAiD;AACjD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAM3F;AAED,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/layout/app-shell.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function AppShell({ className, sidebar, header, children, sidebarOpen = true, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex h-screen w-full overflow-hidden bg-background", className),
+      ...props,
+      children: [
+        sidebar && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "shrink-0 h-full transition-all duration-200",
+              !sidebarOpen && "hidden md:flex"
+            ),
+            children: sidebar
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden min-w-0", children: [
+          header,
+          /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto", children })
+        ] })
+      ]
+    }
+  );
+}
+function PageContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("p-6", className), ...props, children });
+}
+export {
+  AppShell,
+  PageContent
+};
+//# sourceMappingURL=app-shell.js.map

package/dist/components/layout/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.js","sources":["../../../src/components/layout/app-shell.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The sidebar component */\n  sidebar?: React.ReactNode\n  /** The top header component */\n  header?: React.ReactNode\n  /** Main content */\n  children: React.ReactNode\n  /** Whether the sidebar is currently shown (for mobile overlay handling) */\n  sidebarOpen?: boolean\n}\n\n/**\n * AppShell provides the top-level layout structure:\n * - Sidebar (left)\n * - Main area (header + content)\n */\nfunction AppShell({ className, sidebar, header, children, sidebarOpen = true, ...props }: AppShellProps) {\n  return (\n    <div\n      className={cn('flex h-screen w-full overflow-hidden bg-background', className)}\n      {...props}\n    >\n      {/* Sidebar */}\n      {sidebar && (\n        <div\n          className={cn(\n            'shrink-0 h-full transition-all duration-200',\n            !sidebarOpen && 'hidden md:flex'\n          )}\n        >\n          {sidebar}\n        </div>\n      )}\n\n      {/* Main column */}\n      <div className=\"flex flex-1 flex-col overflow-hidden min-w-0\">\n        {header}\n        <main className=\"flex-1 overflow-y-auto\">\n          {children}\n        </main>\n      </div>\n    </div>\n  )\n}\n\n/** Content wrapper with standard page padding */\nfunction PageContent({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn('p-6', className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\nexport { AppShell, PageContent }\n"],"names":[],"mappings":";;AAmBA,SAAS,SAAS,EAAE,WAAW,SAAS,QAAQ,UAAU,cAAc,MAAM,GAAG,SAAwB;AACvG,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,sDAAsD,SAAS;AAAA,MAC5E,GAAG;AAAA,MAGH,UAAA;AAAA,QAAA,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,CAAC,eAAe;AAAA,YAAA;AAAA,YAGjB,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAKL,qBAAC,OAAA,EAAI,WAAU,gDACZ,UAAA;AAAA,UAAA;AAAA,UACD,oBAAC,QAAA,EAAK,WAAU,0BACb,SAAA,CACH;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAGA,SAAS,YAAY,EAAE,WAAW,UAAU,GAAG,SAA+C;AAC5F,SACE,oBAAC,SAAI,WAAW,GAAG,OAAO,SAAS,GAAI,GAAG,OACvC,UACH;AAEJ;"}

package/dist/components/layout/header.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /** Left slot — typically logo + nav */
+    left?: React.ReactNode;
+    /** Center slot — search, breadcrumbs */
+    center?: React.ReactNode;
+    /** Right slot — user menu, notifications, settings */
+    right?: React.ReactNode;
+    /** Makes header sticky at top */
+    sticky?: boolean;
+    /** Adds a bottom border */
+    bordered?: boolean;
+}
+declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
+export { Header };
+//# sourceMappingURL=header.d.ts.map

package/dist/components/layout/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/layout/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,uCAAuC;IACvC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,wCAAwC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,sDAAsD;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,MAAM,iFAmBX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/layout/header.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const Header = React.forwardRef(
+  ({ className, left, center, right, sticky = false, bordered = true, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref,
+      className: cn(
+        "z-40 flex h-14 w-full items-center gap-4 bg-background px-4",
+        sticky && "sticky top-0",
+        bordered && "border-b border-border",
+        className
+      ),
+      ...props,
+      children: [
+        left && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: left }),
+        center && /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: center }),
+        !center && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+        right && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: right }),
+        children
+      ]
+    }
+  )
+);
+Header.displayName = "Header";
+export {
+  Header
+};
+//# sourceMappingURL=header.js.map

package/dist/components/layout/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sources":["../../../src/components/layout/header.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement> {\n  /** Left slot — typically logo + nav */\n  left?: React.ReactNode\n  /** Center slot — search, breadcrumbs */\n  center?: React.ReactNode\n  /** Right slot — user menu, notifications, settings */\n  right?: React.ReactNode\n  /** Makes header sticky at top */\n  sticky?: boolean\n  /** Adds a bottom border */\n  bordered?: boolean\n}\n\nconst Header = React.forwardRef<HTMLElement, HeaderProps>(\n  ({ className, left, center, right, sticky = false, bordered = true, children, ...props }, ref) => (\n    <header\n      ref={ref}\n      className={cn(\n        'z-40 flex h-14 w-full items-center gap-4 bg-background px-4',\n        sticky && 'sticky top-0',\n        bordered && 'border-b border-border',\n        className\n      )}\n      {...props}\n    >\n      {left && <div className=\"flex items-center gap-3\">{left}</div>}\n      {center && <div className=\"flex flex-1 items-center justify-center\">{center}</div>}\n      {!center && <div className=\"flex-1\" />}\n      {right && <div className=\"flex items-center gap-2\">{right}</div>}\n      {children}\n    </header>\n  )\n)\nHeader.displayName = 'Header'\n\nexport { Header }\n"],"names":[],"mappings":";;;AAgBA,MAAM,SAAS,MAAM;AAAA,EACnB,CAAC,EAAE,WAAW,MAAM,QAAQ,OAAO,SAAS,OAAO,WAAW,MAAM,UAAU,GAAG,MAAA,GAAS,QACxF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,UAAU;AAAA,QACV,YAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,QAAQ,oBAAC,OAAA,EAAI,WAAU,2BAA2B,UAAA,MAAK;AAAA,QACvD,UAAU,oBAAC,OAAA,EAAI,WAAU,2CAA2C,UAAA,QAAO;AAAA,QAC3E,CAAC,UAAU,oBAAC,OAAA,EAAI,WAAU,SAAA,CAAS;AAAA,QACnC,SAAS,oBAAC,OAAA,EAAI,WAAU,2BAA2B,UAAA,OAAM;AAAA,QACzD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AACA,OAAO,cAAc;"}

package/dist/components/layout/page-header.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Page title */
+    title: string;
+    /** Subtitle / description */
+    description?: string;
+    /** Slot for breadcrumbs above the title */
+    breadcrumbs?: React.ReactNode;
+    /** Slot for action buttons (top-right) */
+    actions?: React.ReactNode;
+    /** Optional decorative badge next to the title */
+    badge?: React.ReactNode;
+}
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export { PageHeader };
+//# sourceMappingURL=page-header.d.ts.map

package/dist/components/layout/page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/components/layout/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAED,QAAA,MAAM,UAAU,wFAsBf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/layout/page-header.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const PageHeader = React.forwardRef(
+  ({ className, title, description, breadcrumbs, actions, badge, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-1 pb-6 md:flex-row md:items-start md:justify-between", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          breadcrumbs && /* @__PURE__ */ jsx("div", { className: "mb-2", children: breadcrumbs }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
+            /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight font-display", children: title }),
+            badge
+          ] }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-2xl", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0 mt-2 md:mt-0", children: actions })
+      ]
+    }
+  )
+);
+PageHeader.displayName = "PageHeader";
+export {
+  PageHeader
+};
+//# sourceMappingURL=page-header.js.map

package/dist/components/layout/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","sources":["../../../src/components/layout/page-header.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Page title */\n  title: string\n  /** Subtitle / description */\n  description?: string\n  /** Slot for breadcrumbs above the title */\n  breadcrumbs?: React.ReactNode\n  /** Slot for action buttons (top-right) */\n  actions?: React.ReactNode\n  /** Optional decorative badge next to the title */\n  badge?: React.ReactNode\n}\n\nconst PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(\n  ({ className, title, description, breadcrumbs, actions, badge, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex flex-col gap-1 pb-6 md:flex-row md:items-start md:justify-between', className)}\n      {...props}\n    >\n      <div className=\"space-y-1.5\">\n        {breadcrumbs && <div className=\"mb-2\">{breadcrumbs}</div>}\n        <div className=\"flex items-center gap-3 flex-wrap\">\n          <h1 className=\"text-2xl font-bold tracking-tight font-display\">{title}</h1>\n          {badge}\n        </div>\n        {description && (\n          <p className=\"text-sm text-muted-foreground max-w-2xl\">{description}</p>\n        )}\n      </div>\n      {actions && (\n        <div className=\"flex items-center gap-2 shrink-0 mt-2 md:mt-0\">{actions}</div>\n      )}\n    </div>\n  )\n)\nPageHeader.displayName = 'PageHeader'\n\nexport { PageHeader }\n"],"names":[],"mappings":";;;AAgBA,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,OAAO,aAAa,aAAa,SAAS,OAAO,GAAG,SAAS,QACzE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,0EAA0E,SAAS;AAAA,MAChG,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,eACZ,UAAA;AAAA,UAAA,eAAe,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,aAAY;AAAA,UACnD,qBAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,YAAA,oBAAC,MAAA,EAAG,WAAU,kDAAkD,UAAA,OAAM;AAAA,YACrE;AAAA,UAAA,GACH;AAAA,UACC,eACC,oBAAC,KAAA,EAAE,WAAU,2CAA2C,UAAA,YAAA,CAAY;AAAA,QAAA,GAExE;AAAA,QACC,WACC,oBAAC,OAAA,EAAI,WAAU,iDAAiD,UAAA,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhF;AACA,WAAW,cAAc;"}

package/dist/components/layout/sidebar.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export interface SidebarNavItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    href?: string;
+    badge?: string | number;
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    children?: SidebarNavItem[];
+}
+export interface SidebarSection {
+    id: string;
+    label?: string;
+    items: SidebarNavItem[];
+}
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    sections?: SidebarSection[];
+    /** Whether sidebar is collapsed to icon-only mode */
+    collapsed?: boolean;
+    /** Called when collapse toggle is pressed */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Show collapse toggle button */
+    collapsible?: boolean;
+    /** Width when expanded */
+    width?: string;
+    /** Slot for logo/brand area */
+    header?: React.ReactNode;
+    /** Slot for footer content (user menu, etc.) */
+    footer?: React.ReactNode;
+}
+declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
+export { Sidebar };
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/components/layout/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAChD,kCAAkC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,gDAAgD;IAChD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAwDD,QAAA,MAAM,OAAO,qFA2FZ,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,CAAA"}