@handled-ai/design-system 0.9.28 → 0.10.0

package/dist/components/rich-text-toolbar.js

@@ -0,0 +1,103 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Undo2, Redo2, Bold, Italic, Underline, AlignLeft, List, Trash2, ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function ToolbarButton({
+  action,
+  icon: Icon,
+  label,
+  extraClassName,
+  onAction
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "rich-text-toolbar-button",
+      onClick: () => onAction == null ? void 0 : onAction(action),
+      "aria-label": label,
+      className: cn("p-1.5 rounded hover:bg-muted/50 cursor-pointer text-muted-foreground", extraClassName),
+      children: /* @__PURE__ */ jsx(Icon, { size: 14 })
+    }
+  );
+}
+function RichTextToolbar(_a) {
+  var _b = _a, { onAction, className } = _b, rest = __objRest(_b, ["onAction", "className"]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "rich-text-toolbar",
+      role: "toolbar",
+      "aria-label": "Rich text formatting",
+      className: cn("px-3 py-1.5 flex items-center justify-between", className)
+    }, rest), {
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "undo", icon: Undo2, label: "Undo", onAction }),
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "redo", icon: Redo2, label: "Redo", onAction }),
+          /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "data-slot": "rich-text-toolbar-button",
+              onClick: () => onAction == null ? void 0 : onAction("font"),
+              "aria-label": "Font family",
+              "aria-haspopup": "true",
+              className: "text-[11px] text-muted-foreground px-1.5 py-0.5 rounded hover:bg-muted/50 cursor-pointer flex items-center gap-1",
+              children: [
+                "Sans Serif",
+                /* @__PURE__ */ jsx(ChevronDown, { size: 10 })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "bold", icon: Bold, label: "Bold", onAction }),
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "italic", icon: Italic, label: "Italic", onAction }),
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "underline", icon: Underline, label: "Underline", onAction }),
+          /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "align", icon: AlignLeft, label: "Align left", onAction }),
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "list", icon: List, label: "List", onAction })
+        ] }),
+        /* @__PURE__ */ jsx(ToolbarButton, { action: "delete", icon: Trash2, label: "Delete", extraClassName: "hover:text-destructive", onAction })
+      ]
+    })
+  );
+}
+export {
+  RichTextToolbar
+};
+//# sourceMappingURL=rich-text-toolbar.js.map

package/dist/components/rich-text-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/rich-text-toolbar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport type { LucideIcon } from \"lucide-react\"\nimport { Undo2, Redo2, Bold, Italic, Underline, AlignLeft, List, Trash2, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\ntype RichTextAction =\n  | \"undo\" | \"redo\"\n  | \"font\"\n  | \"bold\" | \"italic\" | \"underline\"\n  | \"align\" | \"list\"\n  | \"delete\"\n\ninterface RichTextToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  onAction?: (action: RichTextAction) => void\n}\n\nfunction ToolbarButton({\n  action,\n  icon: Icon,\n  label,\n  extraClassName,\n  onAction,\n}: {\n  action: RichTextAction\n  icon: LucideIcon\n  label: string\n  extraClassName?: string\n  onAction?: (action: RichTextAction) => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"rich-text-toolbar-button\"\n      onClick={() => onAction?.(action)}\n      aria-label={label}\n      className={cn(\"p-1.5 rounded hover:bg-muted/50 cursor-pointer text-muted-foreground\", extraClassName)}\n    >\n      <Icon size={14} />\n    </button>\n  )\n}\n\nfunction RichTextToolbar({ onAction, className, ...rest }: RichTextToolbarProps) {\n  return (\n    <div\n      data-slot=\"rich-text-toolbar\"\n      role=\"toolbar\"\n      aria-label=\"Rich text formatting\"\n      className={cn(\"px-3 py-1.5 flex items-center justify-between\", className)}\n      {...rest}\n    >\n      <div className=\"flex items-center gap-0.5\">\n        <ToolbarButton action=\"undo\" icon={Undo2} label=\"Undo\" onAction={onAction} />\n        <ToolbarButton action=\"redo\" icon={Redo2} label=\"Redo\" onAction={onAction} />\n\n        <div className=\"w-px h-4 bg-border mx-1\" aria-hidden=\"true\" />\n\n        <button\n          type=\"button\"\n          data-slot=\"rich-text-toolbar-button\"\n          onClick={() => onAction?.(\"font\")}\n          aria-label=\"Font family\"\n          aria-haspopup=\"true\"\n          className=\"text-[11px] text-muted-foreground px-1.5 py-0.5 rounded hover:bg-muted/50 cursor-pointer flex items-center gap-1\"\n        >\n          Sans Serif\n          <ChevronDown size={10} />\n        </button>\n\n        <div className=\"w-px h-4 bg-border mx-1\" aria-hidden=\"true\" />\n\n        <ToolbarButton action=\"bold\" icon={Bold} label=\"Bold\" onAction={onAction} />\n        <ToolbarButton action=\"italic\" icon={Italic} label=\"Italic\" onAction={onAction} />\n        <ToolbarButton action=\"underline\" icon={Underline} label=\"Underline\" onAction={onAction} />\n\n        <div className=\"w-px h-4 bg-border mx-1\" aria-hidden=\"true\" />\n\n        <ToolbarButton action=\"align\" icon={AlignLeft} label=\"Align left\" onAction={onAction} />\n        <ToolbarButton action=\"list\" icon={List} label=\"List\" onAction={onAction} />\n      </div>\n\n      <ToolbarButton action=\"delete\" icon={Trash2} label=\"Delete\" extraClassName=\"hover:text-destructive\" onAction={onAction} />\n    </div>\n  )\n}\n\nexport { RichTextToolbar, type RichTextToolbarProps, type RichTextAction }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCM,cAoBE,YApBF;AApCN,SAAS,OAAO,OAAO,MAAM,QAAQ,WAAW,WAAW,MAAM,QAAQ,mBAAmB;AAE5F,SAAS,UAAU;AAanB,SAAS,cAAc;AAAA,EACrB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,SAAS,MAAM,qCAAW;AAAA,MAC1B,cAAY;AAAA,MACZ,WAAW,GAAG,wEAAwE,cAAc;AAAA,MAEpG,8BAAC,QAAK,MAAM,IAAI;AAAA;AAAA,EAClB;AAEJ;AAEA,SAAS,gBAAgB,IAAwD;AAAxD,eAAE,YAAU,UA7CrC,IA6CyB,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAW,GAAG,iDAAiD,SAAS;AAAA,OACpE,OALL;AAAA,MAOC;AAAA,6BAAC,SAAI,WAAU,6BACb;AAAA,8BAAC,iBAAc,QAAO,QAAO,MAAM,OAAO,OAAM,QAAO,UAAoB;AAAA,UAC3E,oBAAC,iBAAc,QAAO,QAAO,MAAM,OAAO,OAAM,QAAO,UAAoB;AAAA,UAE3E,oBAAC,SAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,UAE5D;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,aAAU;AAAA,cACV,SAAS,MAAM,qCAAW;AAAA,cAC1B,cAAW;AAAA,cACX,iBAAc;AAAA,cACd,WAAU;AAAA,cACX;AAAA;AAAA,gBAEC,oBAAC,eAAY,MAAM,IAAI;AAAA;AAAA;AAAA,UACzB;AAAA,UAEA,oBAAC,SAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,UAE5D,oBAAC,iBAAc,QAAO,QAAO,MAAM,MAAM,OAAM,QAAO,UAAoB;AAAA,UAC1E,oBAAC,iBAAc,QAAO,UAAS,MAAM,QAAQ,OAAM,UAAS,UAAoB;AAAA,UAChF,oBAAC,iBAAc,QAAO,aAAY,MAAM,WAAW,OAAM,aAAY,UAAoB;AAAA,UAEzF,oBAAC,SAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,UAE5D,oBAAC,iBAAc,QAAO,SAAQ,MAAM,WAAW,OAAM,cAAa,UAAoB;AAAA,UACtF,oBAAC,iBAAc,QAAO,QAAO,MAAM,MAAM,OAAM,QAAO,UAAoB;AAAA,WAC5E;AAAA,QAEA,oBAAC,iBAAc,QAAO,UAAS,MAAM,QAAQ,OAAM,UAAS,gBAAe,0BAAyB,UAAoB;AAAA;AAAA;AAAA,EAC1H;AAEJ;","names":[]}

package/dist/components/step-timeline.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+type StepType = "email" | "call" | "task" | "wait" | (string & {});
+interface TimelineStep {
+    id: string;
+    type: StepType;
+    label: string;
+}
+interface StepTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+    steps: TimelineStep[];
+    expandedStepId?: string;
+    onStepClick?: (stepId: string) => void;
+    onInsert?: (index: number) => void;
+    renderStepBody?: (step: TimelineStep) => React.ReactNode;
+    renderStepAccessory?: (step: TimelineStep) => React.ReactNode;
+}
+declare function StepTimeline({ steps, expandedStepId, onStepClick, onInsert, renderStepBody, renderStepAccessory, className, ...rest }: StepTimelineProps): React.JSX.Element;
+
+export { StepTimeline, type StepTimelineProps, type StepType, type TimelineStep };

package/dist/components/step-timeline.js

@@ -0,0 +1,134 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Mail, Phone, CheckSquare, Clock, Circle, ChevronUp, ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+const stepTypeConfig = {
+  email: { icon: Mail, classes: "bg-blue-500/10 text-blue-600" },
+  call: { icon: Phone, classes: "bg-emerald-500/10 text-emerald-600" },
+  task: { icon: CheckSquare, classes: "bg-purple-500/10 text-purple-600" },
+  wait: { icon: Clock, classes: "bg-muted text-muted-foreground" }
+};
+const defaultStepConfig = { icon: Circle, classes: "bg-muted text-muted-foreground" };
+function StepTimeline(_a) {
+  var _b = _a, {
+    steps,
+    expandedStepId,
+    onStepClick,
+    onInsert,
+    renderStepBody,
+    renderStepAccessory,
+    className
+  } = _b, rest = __objRest(_b, [
+    "steps",
+    "expandedStepId",
+    "onStepClick",
+    "onInsert",
+    "renderStepBody",
+    "renderStepAccessory",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ "data-slot": "step-timeline", className: cn("relative ml-5", className) }, rest), { children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 bottom-0 border-l-2 border-border" }),
+    steps.map((step, index) => {
+      var _a2;
+      const expanded = step.id === expandedStepId;
+      const config = (_a2 = stepTypeConfig[step.type]) != null ? _a2 : defaultStepConfig;
+      const TypeIcon = config.icon;
+      const isInteractive = !!(onStepClick || renderStepBody);
+      const bodyId = `step-timeline-body-${step.id}`;
+      const headerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: cn("w-8 h-8 rounded-full flex items-center justify-center shrink-0", config.classes), children: /* @__PURE__ */ jsx(TypeIcon, { size: 16 }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wider", children: step.type }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: step.label })
+        ] })
+      ] });
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        index > 0 && onInsert && /* @__PURE__ */ jsx("div", { className: "relative pl-8 py-1", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "step-timeline-insert",
+            onClick: () => onInsert(index),
+            className: "border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full",
+            children: "+ Add Step"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { "data-slot": "step-timeline-step", className: "relative pl-8 py-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full border-2 border-border bg-background z-10" }),
+          /* @__PURE__ */ jsxs("div", { "data-slot": "step-timeline-card", className: "border border-border rounded-lg overflow-hidden", children: [
+            isInteractive ? /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full px-4 py-3 gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-expanded": expanded,
+                  "aria-controls": bodyId,
+                  onClick: () => onStepClick == null ? void 0 : onStepClick(step.id),
+                  className: "flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity text-left",
+                  children: headerContent
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2 shrink-0", children: [
+                renderStepAccessory && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: renderStepAccessory(step) }),
+                /* @__PURE__ */ jsx("div", { className: "shrink-0 text-muted-foreground", children: expanded ? /* @__PURE__ */ jsx(ChevronUp, { size: 16 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
+              ] })
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "w-full px-4 py-3 flex items-center gap-3", children: [
+              headerContent,
+              renderStepAccessory && /* @__PURE__ */ jsx("div", { className: "ml-auto shrink-0", children: renderStepAccessory(step) })
+            ] }),
+            expanded && renderStepBody && /* @__PURE__ */ jsx("div", { id: bodyId, "data-slot": "step-timeline-body", children: renderStepBody(step) })
+          ] })
+        ] })
+      ] }, step.id);
+    }),
+    onInsert && /* @__PURE__ */ jsx("div", { className: "relative pl-8 py-1", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "step-timeline-insert",
+        onClick: () => onInsert(steps.length),
+        className: "border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full",
+        children: "+ Add Step"
+      }
+    ) })
+  ] }));
+}
+export {
+  StepTimeline
+};
+//# sourceMappingURL=step-timeline.js.map

package/dist/components/step-timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/step-timeline.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport type { LucideIcon } from \"lucide-react\"\nimport { Mail, Phone, CheckSquare, Clock, Circle, ChevronUp, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\ntype StepType = \"email\" | \"call\" | \"task\" | \"wait\" | (string & {})\n\ninterface TimelineStep {\n  id: string\n  type: StepType\n  label: string\n}\n\ninterface StepTimelineProps extends React.HTMLAttributes<HTMLDivElement> {\n  steps: TimelineStep[]\n  expandedStepId?: string\n  onStepClick?: (stepId: string) => void\n  onInsert?: (index: number) => void\n  renderStepBody?: (step: TimelineStep) => React.ReactNode\n  renderStepAccessory?: (step: TimelineStep) => React.ReactNode\n}\n\nconst stepTypeConfig: Record<string, { icon: LucideIcon; classes: string }> = {\n  email: { icon: Mail, classes: \"bg-blue-500/10 text-blue-600\" },\n  call: { icon: Phone, classes: \"bg-emerald-500/10 text-emerald-600\" },\n  task: { icon: CheckSquare, classes: \"bg-purple-500/10 text-purple-600\" },\n  wait: { icon: Clock, classes: \"bg-muted text-muted-foreground\" },\n}\n\nconst defaultStepConfig: { icon: LucideIcon; classes: string } = { icon: Circle, classes: \"bg-muted text-muted-foreground\" }\n\nfunction StepTimeline({\n  steps,\n  expandedStepId,\n  onStepClick,\n  onInsert,\n  renderStepBody,\n  renderStepAccessory,\n  className,\n  ...rest\n}: StepTimelineProps) {\n  return (\n    <div data-slot=\"step-timeline\" className={cn(\"relative ml-5\", className)} {...rest}>\n      <div className=\"absolute left-0 top-0 bottom-0 border-l-2 border-border\" />\n\n      {steps.map((step, index) => {\n        const expanded = step.id === expandedStepId\n        const config = stepTypeConfig[step.type] ?? defaultStepConfig\n        const TypeIcon = config.icon\n        const isInteractive = !!(onStepClick || renderStepBody)\n        const bodyId = `step-timeline-body-${step.id}`\n\n        const headerContent = (\n          <>\n            <div className={cn(\"w-8 h-8 rounded-full flex items-center justify-center shrink-0\", config.classes)}>\n              <TypeIcon size={16} />\n            </div>\n            <div className=\"flex flex-col min-w-0\">\n              <span className=\"text-[11px] font-medium text-muted-foreground uppercase tracking-wider\">\n                {step.type}\n              </span>\n              <span className=\"text-sm font-medium\">{step.label}</span>\n            </div>\n          </>\n        )\n\n        return (\n          <React.Fragment key={step.id}>\n            {index > 0 && onInsert && (\n              <div className=\"relative pl-8 py-1\">\n                <button\n                  type=\"button\"\n                  data-slot=\"step-timeline-insert\"\n                  onClick={() => onInsert(index)}\n                  className=\"border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full\"\n                >\n                  + Add Step\n                </button>\n              </div>\n            )}\n\n            <div data-slot=\"step-timeline-step\" className=\"relative pl-8 py-2\">\n              <div className=\"absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full border-2 border-border bg-background z-10\" />\n\n              <div data-slot=\"step-timeline-card\" className=\"border border-border rounded-lg overflow-hidden\">\n                {isInteractive ? (\n                  <div className=\"flex items-center w-full px-4 py-3 gap-3\">\n                    <button\n                      type=\"button\"\n                      aria-expanded={expanded}\n                      aria-controls={bodyId}\n                      onClick={() => onStepClick?.(step.id)}\n                      className=\"flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity text-left\"\n                    >\n                      {headerContent}\n                    </button>\n                    <div className=\"ml-auto flex items-center gap-2 shrink-0\">\n                      {renderStepAccessory && (\n                        <div className=\"shrink-0\">\n                          {renderStepAccessory(step)}\n                        </div>\n                      )}\n                      <div className=\"shrink-0 text-muted-foreground\">\n                        {expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}\n                      </div>\n                    </div>\n                  </div>\n                ) : (\n                  <div className=\"w-full px-4 py-3 flex items-center gap-3\">\n                    {headerContent}\n                    {renderStepAccessory && (\n                      <div className=\"ml-auto shrink-0\">\n                        {renderStepAccessory(step)}\n                      </div>\n                    )}\n                  </div>\n                )}\n\n                {expanded && renderStepBody && (\n                  <div id={bodyId} data-slot=\"step-timeline-body\">\n                    {renderStepBody(step)}\n                  </div>\n                )}\n              </div>\n            </div>\n          </React.Fragment>\n        )\n      })}\n\n      {onInsert && (\n        <div className=\"relative pl-8 py-1\">\n          <button\n            type=\"button\"\n            data-slot=\"step-timeline-insert\"\n            onClick={() => onInsert(steps.length)}\n            className=\"border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full\"\n          >\n            + Add Step\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { StepTimeline, type StepTimelineProps, type TimelineStep, type StepType }\n"],"mappings":"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","names":["_a"]}

package/dist/components/sticky-action-bar.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+interface StickyActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    bordered?: boolean;
+}
+declare function StickyActionBar({ left, right, bordered, className, ...rest }: StickyActionBarProps): React.JSX.Element;
+
+export { StickyActionBar, type StickyActionBarProps };

package/dist/components/sticky-action-bar.js

@@ -0,0 +1,56 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function StickyActionBar(_a) {
+  var _b = _a, { left, right, bordered = true, className } = _b, rest = __objRest(_b, ["left", "right", "bordered", "className"]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "sticky-action-bar",
+      className: cn(
+        "flex items-center justify-between sticky bottom-0 bg-background",
+        bordered && "pt-3 border-t border-border/50",
+        className
+      )
+    }, rest), {
+      children: [
+        left && /* @__PURE__ */ jsx("div", { "data-slot": "sticky-action-bar-left", className: "flex items-center gap-1", children: left }),
+        right && /* @__PURE__ */ jsx("div", { "data-slot": "sticky-action-bar-right", className: "ml-auto flex items-center gap-2", children: right })
+      ]
+    })
+  );
+}
+export {
+  StickyActionBar
+};
+//# sourceMappingURL=sticky-action-bar.js.map

package/dist/components/sticky-action-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/sticky-action-bar.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\ninterface StickyActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  left?: React.ReactNode\n  right?: React.ReactNode\n  bordered?: boolean\n}\n\nfunction StickyActionBar({ left, right, bordered = true, className, ...rest }: StickyActionBarProps) {\n  return (\n    <div\n      data-slot=\"sticky-action-bar\"\n      className={cn(\n        \"flex items-center justify-between sticky bottom-0 bg-background\",\n        bordered && \"pt-3 border-t border-border/50\",\n        className\n      )}\n      {...rest}\n    >\n      {left && (\n        <div data-slot=\"sticky-action-bar-left\" className=\"flex items-center gap-1\">\n          {left}\n        </div>\n      )}\n      {right && (\n        <div data-slot=\"sticky-action-bar-right\" className=\"ml-auto flex items-center gap-2\">\n          {right}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { StickyActionBar, type StickyActionBarProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYI,SAUI,KAVJ;AAVJ,SAAS,UAAU;AAQnB,SAAS,gBAAgB,IAA4E;AAA5E,eAAE,QAAM,OAAO,WAAW,MAAM,UAVzD,IAUyB,IAA8C,iBAA9C,IAA8C,CAA5C,QAAM,SAAO,YAAiB;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,OACI,OAPL;AAAA,MASE;AAAA,gBACC,oBAAC,SAAI,aAAU,0BAAyB,WAAU,2BAC/C,gBACH;AAAA,QAED,SACC,oBAAC,SAAI,aAAU,2BAA0B,WAAU,mCAChD,iBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/switch.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Switch as Switch$1 } from 'radix-ui';
+
+declare function Switch({ className, ...props }: React.ComponentProps<typeof Switch$1.Root>): React.JSX.Element;
+
+export { Switch };

package/dist/components/switch.js

@@ -0,0 +1,66 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
+function Switch(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    __spreadProps(__spreadValues({
+      "data-slot": "switch",
+      className: cn(
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        }
+      )
+    })
+  );
+}
+export {
+  Switch
+};
+//# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../lib/utils\"\n\nfunction Switch({\n  className,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBM;AAjBN,SAAS,UAAU,uBAAuB;AAE1C,SAAS,UAAU;AAEnB,SAAS,OAAO,IAGsC;AAHtC,eACd;AAAA;AAAA,EARF,IAOgB,IAEX,kBAFW,IAEX;AAAA,IADH;AAAA;AAGA,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,OACI,QANL;AAAA,MAQC;AAAA,QAAC,gBAAgB;AAAA,QAAhB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA;AAAA,MACZ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/tabs.d.ts

@@ -5,7 +5,7 @@ import { Tabs as Tabs$1 } from 'radix-ui';
 
 declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof Tabs$1.Root>): React.JSX.Element;
 declare const tabsListVariants: (props?: ({
-    variant?: "default" | "line" | null | undefined;
+    variant?: "line" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof Tabs$1.Trigger>): React.JSX.Element;

package/dist/components/variable-autocomplete.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+interface VariableDef {
+    name: string;
+    description?: string;
+    source?: string;
+}
+interface VariableGroup {
+    label: string;
+    variables: VariableDef[];
+}
+interface VariableAutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    groups: VariableGroup[];
+    filter?: string;
+    onSelect: (variable: VariableDef) => void;
+    onClose: () => void;
+    maxResults?: number;
+}
+declare function VariableAutocomplete({ groups, filter, onSelect, onClose, maxResults, className, ...rest }: VariableAutocompleteProps): React.JSX.Element | null;
+
+export { VariableAutocomplete, type VariableAutocompleteProps, type VariableDef, type VariableGroup };

package/dist/components/variable-autocomplete.js

@@ -0,0 +1,171 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+function VariableAutocomplete(_a) {
+  var _b = _a, {
+    groups,
+    filter = "",
+    onSelect,
+    onClose,
+    maxResults = 10,
+    className
+  } = _b, rest = __objRest(_b, [
+    "groups",
+    "filter",
+    "onSelect",
+    "onClose",
+    "maxResults",
+    "className"
+  ]);
+  const containerRef = React.useRef(null);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const filteredGroups = React.useMemo(
+    () => groups.map((group) => __spreadProps(__spreadValues({}, group), {
+      variables: group.variables.filter(
+        (v) => v.name.toLowerCase().startsWith(filter.toLowerCase())
+      )
+    })).filter((group) => group.variables.length > 0),
+    [groups, filter]
+  );
+  const allFiltered = React.useMemo(() => {
+    const result = [];
+    for (const group of filteredGroups) {
+      for (const variable of group.variables) {
+        if (result.length >= maxResults) break;
+        result.push({ group, variable });
+      }
+      if (result.length >= maxResults) break;
+    }
+    return result;
+  }, [filteredGroups, maxResults]);
+  React.useEffect(() => {
+    setActiveIndex(-1);
+  }, [filter]);
+  React.useEffect(() => {
+    function handleMouseDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        onClose();
+      }
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        onClose();
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((prev) => prev < allFiltered.length - 1 ? prev + 1 : 0);
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((prev) => prev > 0 ? prev - 1 : allFiltered.length - 1);
+      }
+      if (e.key === "Enter" && activeIndex >= 0 && activeIndex < allFiltered.length) {
+        e.preventDefault();
+        onSelect(allFiltered[activeIndex].variable);
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose, onSelect, allFiltered, activeIndex]);
+  if (allFiltered.length === 0) {
+    return null;
+  }
+  const groupsToRender = [];
+  let flatIndex = 0;
+  for (const group of filteredGroups) {
+    const items = [];
+    for (const variable of group.variables) {
+      if (flatIndex >= maxResults) break;
+      items.push({ variable, flatIndex });
+      flatIndex++;
+    }
+    if (items.length > 0) {
+      groupsToRender.push({ label: group.label, items });
+    }
+    if (flatIndex >= maxResults) break;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      ref: containerRef,
+      "data-slot": "variable-autocomplete",
+      className: cn(
+        "absolute z-50 bg-popover border border-border rounded-lg shadow-lg w-64 overflow-hidden",
+        className
+      )
+    }, rest), {
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-slot": "variable-autocomplete-header", className: "px-3 py-1.5 border-b border-border", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wider", children: "Insert variable" }) }),
+        /* @__PURE__ */ jsx("div", { role: "listbox", "aria-label": "Variables", className: "overflow-y-auto", style: { maxHeight: "312px" }, children: groupsToRender.map((group) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": group.label, children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "variable-autocomplete-group-label", className: "px-3 py-1 text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider", children: group.label }),
+          group.items.map(({ variable, flatIndex: idx }) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": idx === activeIndex,
+              "data-slot": "variable-autocomplete-item",
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => onSelect(variable),
+              onMouseEnter: () => setActiveIndex(idx),
+              className: cn(
+                "w-full text-left px-3 py-2 cursor-pointer transition-colors flex items-start justify-between gap-2",
+                idx === activeIndex ? "bg-muted/50" : "hover:bg-muted/30"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-xs font-mono text-blue-600", children: `{{${variable.name}}}` }),
+                  variable.description && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground", children: variable.description })
+                ] }),
+                variable.source && /* @__PURE__ */ jsx("span", { className: "text-[9px] px-1.5 py-0.5 rounded bg-muted/30 text-muted-foreground shrink-0 mt-0.5 capitalize", children: variable.source })
+              ]
+            },
+            `${group.label}:${variable.name}`
+          ))
+        ] }, group.label)) })
+      ]
+    })
+  );
+}
+export {
+  VariableAutocomplete
+};
+//# sourceMappingURL=variable-autocomplete.js.map