@dilipod/ui 0.3.4 → 0.4.1

package/dist/index.mjs

@@ -1,5 +1,6 @@
 "use client";
 import * as React28 from 'react';
+import { useState, useRef } from 'react';
 import { Slot, createSlot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -7,7 +8,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import * as react_star from '@phosphor-icons/react';
-import { X, Circle, CaretLeft, DotsThree, CaretRight, Check, House, Info, WarningCircle } from '@phosphor-icons/react';
+import { X, CaretDown, Circle, CaretLeft, DotsThree, CaretRight, Check, House, Info, WarningCircle, Play, Download, Folder, ArrowSquareOut, CircleNotch, File, FileVideo, Lightning, Plus, FileImage, FilePdf, FileDoc, Question, CheckCircle, Warning, PencilSimple, Trash } from '@phosphor-icons/react';
 import 'react-dom';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -104,6 +105,7 @@ __export(index_exports, {
   DropdownMenuTrigger: () => DropdownMenuTrigger,
   EmptyState: () => EmptyState,
   ErrorState: () => ErrorState,
+  FilePreview: () => FilePreview,
   FormField: () => FormField,
   IconBox: () => IconBox,
   Input: () => Input,
@@ -135,6 +137,7 @@ __export(index_exports, {
   RadioGroupCard: () => RadioGroupCard,
   RadioGroupItem: () => RadioGroupItem,
   RadioGroupOption: () => RadioGroupOption,
+  ScenariosManager: () => ScenariosManager,
   Select: () => Select,
   Separator: () => Separator2,
   SettingsNav: () => SettingsNav,
@@ -1279,24 +1282,33 @@ var Textarea = React28.forwardRef(
 Textarea.displayName = "Textarea";
 var Select = React28.forwardRef(
   ({ className, error, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "select",
-      {
-        ref,
-        className: cn(
-          "h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background",
-          "placeholder:text-gray-500",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-          "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors",
-          `appearance-none bg-[url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E")] bg-[length:16px_16px] bg-[right_12px_center] bg-no-repeat pr-10`,
-          error ? "border-red-500 focus-visible:ring-red-500" : "border-gray-300 focus-visible:ring-[var(--cyan)]",
-          className
-        ),
-        "aria-invalid": error ? "true" : void 0,
-        ...props,
-        children
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          ref,
+          className: cn(
+            "h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background",
+            "placeholder:text-gray-500",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+            "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors",
+            "appearance-none pr-10",
+            error ? "border-red-500 focus-visible:ring-red-500" : "border-gray-300 focus-visible:ring-[var(--cyan)]",
+            className
+          ),
+          "aria-invalid": error ? "true" : void 0,
+          ...props,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CaretDown,
+        {
+          size: 16,
+          className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none"
+        }
+      )
+    ] });
   }
 );
 Select.displayName = "Select";
@@ -2336,7 +2348,7 @@ var DialogContent = React28.forwardRef(({ className, children, ...props }, ref)
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg gap-4 border border-border bg-white p-6 shadow-lg rounded-sm",
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg gap-4 border border-border bg-white p-6 shadow-lg rounded-sm",
         className
       ),
       ...props,
@@ -3454,6 +3466,293 @@ function getDateRangeFromPreset(preset) {
   }
   return { start, end };
 }
+function getFileIcon(type) {
+  if (type.startsWith("video/") || type === "screen_recording") return FileVideo;
+  if (type.startsWith("image/") || type === "image") return FileImage;
+  if (type === "application/pdf" || type === "pdf") return FilePdf;
+  if (type.includes("document") || type === "document") return FileDoc;
+  return File;
+}
+function getTypeLabel(type) {
+  if (type.startsWith("video/") || type === "screen_recording") return "Video";
+  if (type.startsWith("audio/")) return "Audio";
+  if (type.startsWith("image/") || type === "image") return "Image";
+  if (type === "application/pdf" || type === "pdf") return "PDF";
+  if (type.includes("document") || type === "document") return "Document";
+  return "File";
+}
+function formatSize(size) {
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${Math.round(size / 1024)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
+function canPreview(file) {
+  const ext = file.filename.toLowerCase().split(".").pop() || "";
+  if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) return true;
+  if (["mp4", "webm", "mov", "avi", "mkv"].includes(ext)) return true;
+  if (ext === "pdf") return true;
+  if (file.type.startsWith("image/") || file.type === "image") return true;
+  if (file.type.startsWith("video/") || file.type === "screen_recording") return true;
+  if (file.type === "application/pdf" || file.type === "pdf") return true;
+  return false;
+}
+function getPreviewType(file) {
+  const ext = file.filename.toLowerCase().split(".").pop() || "";
+  if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext) || file.type.startsWith("image/") || file.type === "image") return "image";
+  if (["mp4", "webm", "mov", "avi", "mkv"].includes(ext) || file.type.startsWith("video/") || file.type === "screen_recording") return "video";
+  if (ext === "pdf" || file.type === "application/pdf" || file.type === "pdf") return "pdf";
+  return "none";
+}
+function FilePreview({
+  files,
+  title = "Uploaded Files",
+  getSignedUrl,
+  showCard = true,
+  emptyMessage = "No files uploaded"
+}) {
+  const [previewFile, setPreviewFile] = useState(null);
+  const [videoError, setVideoError] = useState(false);
+  const [signedUrl, setSignedUrl] = useState(null);
+  const [loadingUrl, setLoadingUrl] = useState(false);
+  const [urlError, setUrlError] = useState(null);
+  const videoRef = useRef(null);
+  const handleOpenPreview = async (file) => {
+    setVideoError(false);
+    setPreviewFile(file);
+    setUrlError(null);
+    if (file.url) {
+      setSignedUrl(file.url);
+    } else if (getSignedUrl) {
+      setLoadingUrl(true);
+      try {
+        const url = await getSignedUrl(file.path);
+        if (url) {
+          setSignedUrl(url);
+        } else {
+          setUrlError("Failed to load file URL");
+        }
+      } catch (error) {
+        setUrlError(error instanceof Error ? error.message : "Failed to load file");
+      } finally {
+        setLoadingUrl(false);
+      }
+    } else {
+      setUrlError("No URL available for this file");
+    }
+  };
+  const handleClosePreview = () => {
+    setPreviewFile(null);
+    setSignedUrl(null);
+    setUrlError(null);
+    setLoadingUrl(false);
+    setVideoError(false);
+  };
+  const handleDownload = async (e, file) => {
+    e.stopPropagation();
+    let url = file.url;
+    if (!url && getSignedUrl) {
+      url = await getSignedUrl(file.path) || void 0;
+    }
+    if (url) {
+      window.open(url, "_blank");
+    }
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    files.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children: files.map((file, i) => {
+      const FileIcon = getFileIcon(file.type);
+      const typeLabel = getTypeLabel(file.type);
+      const sizeLabel = formatSize(file.size);
+      const isPreviewable = canPreview(file);
+      const previewType = getPreviewType(file);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex items-center justify-between p-3 rounded-md bg-gray-50 transition-colors ${isPreviewable ? "hover:bg-gray-100 cursor-pointer" : ""}`,
+          onClick: () => isPreviewable && handleOpenPreview(file),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-sm bg-white border border-gray-200 flex items-center justify-center", children: /* @__PURE__ */ jsx(FileIcon, { className: "w-5 h-5 text-[var(--cyan)]", weight: "fill" }) }),
+                previewType === "video" && /* @__PURE__ */ jsx(Play, { className: "absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 text-[var(--cyan)] bg-white rounded-full", weight: "fill" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--black)] truncate", children: file.filename }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                  typeLabel,
+                  " \xB7 ",
+                  sizeLabel,
+                  isPreviewable && /* @__PURE__ */ jsx("span", { className: "text-[var(--cyan)] ml-1", children: "\xB7 Click to preview" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => handleDownload(e, file),
+                className: "p-2 rounded-sm hover:bg-gray-200 transition-colors shrink-0",
+                title: "Download",
+                children: /* @__PURE__ */ jsx(Download, { className: "w-4 h-4 text-muted-foreground" })
+              }
+            )
+          ]
+        },
+        i
+      );
+    }) }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32 border border-dashed border-gray-200 rounded-md", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Folder, { size: 24, className: "text-gray-300 mx-auto mb-2" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage })
+    ] }) }),
+    previewFile && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4",
+        onClick: handleClosePreview,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "bg-white rounded-lg max-w-5xl w-full max-h-[90vh] flex flex-col overflow-hidden shadow-2xl",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+                  (() => {
+                    const FileIcon = getFileIcon(previewFile.type);
+                    return /* @__PURE__ */ jsx(FileIcon, { className: "w-5 h-5 text-[var(--cyan)] flex-shrink-0", weight: "fill" });
+                  })(),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx("p", { className: "font-medium text-[var(--black)] truncate", children: previewFile.filename }),
+                    /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                      getTypeLabel(previewFile.type),
+                      " \xB7 ",
+                      formatSize(previewFile.size)
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                  signedUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: signedUrl,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        className: "p-2 rounded-md hover:bg-gray-100 transition-colors",
+                        title: "Open in new tab",
+                        children: /* @__PURE__ */ jsx(ArrowSquareOut, { className: "w-5 h-5 text-muted-foreground" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: signedUrl,
+                        download: previewFile.filename,
+                        className: "p-2 rounded-md hover:bg-gray-100 transition-colors",
+                        title: "Download",
+                        children: /* @__PURE__ */ jsx(Download, { className: "w-5 h-5 text-muted-foreground" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: handleClosePreview,
+                      className: "p-2 rounded-md hover:bg-gray-100 transition-colors ml-2",
+                      children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-4 bg-gray-900 flex items-center justify-center min-h-[400px]", children: [
+                loadingUrl && /* @__PURE__ */ jsxs("div", { className: "text-center text-white", children: [
+                  /* @__PURE__ */ jsx(CircleNotch, { className: "w-8 h-8 mx-auto mb-2 animate-spin text-[var(--cyan)]" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400", children: "Loading file..." })
+                ] }),
+                urlError && /* @__PURE__ */ jsxs("div", { className: "text-center text-white max-w-md", children: [
+                  /* @__PURE__ */ jsx(File, { className: "w-16 h-16 mx-auto mb-4 text-gray-500" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-lg font-medium mb-2", children: "Failed to Load File" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400", children: urlError })
+                ] }),
+                signedUrl && !loadingUrl && !urlError && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  getPreviewType(previewFile) === "image" && /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: signedUrl,
+                      alt: previewFile.filename,
+                      className: "max-w-full max-h-[70vh] object-contain rounded-md"
+                    }
+                  ),
+                  getPreviewType(previewFile) === "video" && !videoError && /* @__PURE__ */ jsx(
+                    "video",
+                    {
+                      ref: videoRef,
+                      src: signedUrl,
+                      controls: true,
+                      autoPlay: true,
+                      className: "w-full max-h-[70vh] rounded-md bg-black",
+                      onError: () => setVideoError(true),
+                      children: "Your browser does not support the video tag."
+                    }
+                  ),
+                  getPreviewType(previewFile) === "video" && videoError && /* @__PURE__ */ jsxs("div", { className: "text-center text-white max-w-md", children: [
+                    /* @__PURE__ */ jsx(FileVideo, { className: "w-16 h-16 mx-auto mb-4 text-gray-500" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-lg font-medium mb-2", children: "Video Preview Not Available" }),
+                    /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-400 mb-6", children: [
+                      "This video format (.",
+                      previewFile.filename.split(".").pop(),
+                      ") cannot be played directly in the browser."
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [
+                      /* @__PURE__ */ jsxs(
+                        "a",
+                        {
+                          href: signedUrl,
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          className: "inline-flex items-center gap-2 px-4 py-2 bg-white text-gray-900 rounded-full text-sm font-medium hover:bg-gray-100 transition-colors",
+                          children: [
+                            /* @__PURE__ */ jsx(ArrowSquareOut, { className: "w-4 h-4" }),
+                            "Open in New Tab"
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "a",
+                        {
+                          href: signedUrl,
+                          download: previewFile.filename,
+                          className: "inline-flex items-center gap-2 px-4 py-2 bg-[var(--cyan)] text-gray-900 rounded-full text-sm font-medium hover:bg-[var(--cyan)]/90 transition-colors",
+                          children: [
+                            /* @__PURE__ */ jsx(Download, { className: "w-4 h-4" }),
+                            "Download"
+                          ]
+                        }
+                      )
+                    ] })
+                  ] }),
+                  getPreviewType(previewFile) === "pdf" && /* @__PURE__ */ jsx(
+                    "iframe",
+                    {
+                      src: signedUrl,
+                      className: "w-full h-[70vh] rounded-md border-0 bg-white",
+                      title: previewFile.filename
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+  if (!showCard) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: title }) }),
+    /* @__PURE__ */ jsx(CardContent, { children: content })
+  ] });
+}
 var SettingsNav = React28.forwardRef(
   ({ groups, LinkComponent, className, ...props }, ref) => {
     const Link2 = LinkComponent || "a";
@@ -3512,10 +3811,298 @@ var SettingsNavLink = React28.forwardRef(
   }
 );
 SettingsNavLink.displayName = "SettingsNavLink";
+var typeConfig = {
+  escalation: {
+    label: "Ask me first",
+    icon: Warning,
+    color: "text-amber-600",
+    bgColor: "bg-amber-50",
+    description: "Stop and check with me before proceeding"
+  },
+  default_behavior: {
+    label: "Handle it",
+    icon: CheckCircle,
+    color: "text-blue-600",
+    bgColor: "bg-blue-50",
+    description: "Proceed automatically using this rule"
+  },
+  quality_check: {
+    label: "Must be correct",
+    icon: CheckCircle,
+    color: "text-emerald-600",
+    bgColor: "bg-emerald-50",
+    description: 'This is what "done right" looks like'
+  },
+  edge_case: {
+    label: "Watch out",
+    icon: Question,
+    color: "text-purple-600",
+    bgColor: "bg-purple-50",
+    description: "Common mistakes or tricky situations"
+  }
+};
+function ScenarioCard({
+  scenario,
+  onEdit,
+  onDelete
+}) {
+  const config = typeConfig[scenario.type];
+  const Icon = config.icon;
+  return /* @__PURE__ */ jsx("div", { className: "group relative border border-gray-200 rounded-sm p-4 hover:border-gray-300 transition-colors", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("w-8 h-8 rounded-sm flex items-center justify-center shrink-0", config.bgColor), children: /* @__PURE__ */ jsx(Icon, { size: 16, weight: "fill", className: config.color }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 mb-1", children: /* @__PURE__ */ jsx(Badge, { variant: "outline", size: "sm", children: config.label }) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--black)] font-medium", children: [
+          "When: ",
+          /* @__PURE__ */ jsx("span", { className: "font-normal", children: scenario.situation })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
+          "Action: ",
+          /* @__PURE__ */ jsx("span", { className: "text-[var(--black)]", children: scenario.action })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8",
+          onClick: onEdit,
+          children: /* @__PURE__ */ jsx(PencilSimple, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50",
+          onClick: onDelete,
+          children: /* @__PURE__ */ jsx(Trash, { size: 16 })
+        }
+      )
+    ] })
+  ] }) });
+}
+function SuggestionChip({
+  suggestion,
+  onAdd,
+  disabled
+}) {
+  const config = typeConfig[suggestion.type];
+  config.icon;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onAdd,
+      disabled,
+      className: cn(
+        "inline-flex items-center gap-2 px-3 py-2 rounded-sm border border-dashed border-gray-300",
+        "text-sm text-muted-foreground hover:border-[var(--cyan)] hover:text-[var(--cyan)] hover:bg-[var(--cyan)]/5",
+        "transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Plus, { size: 14 }),
+        suggestion.situation
+      ]
+    }
+  );
+}
+function ScenarioDialog({
+  open,
+  onOpenChange,
+  scenario,
+  onSave,
+  isLoading
+}) {
+  const [type, setType] = React28.useState(scenario?.type || "escalation");
+  const [situation, setSituation] = React28.useState(scenario?.situation || "");
+  const [action, setAction] = React28.useState(scenario?.action || "");
+  const [isSaving, setIsSaving] = React28.useState(false);
+  React28.useEffect(() => {
+    if (open) {
+      setType(scenario?.type || "escalation");
+      setSituation(scenario?.situation || "");
+      setAction(scenario?.action || "");
+    }
+  }, [open, scenario]);
+  const handleSave = async () => {
+    if (!situation.trim() || !action.trim()) return;
+    setIsSaving(true);
+    try {
+      await onSave({ type, situation: situation.trim(), action: action.trim() });
+      onOpenChange(false);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const isValid = situation.trim() && action.trim();
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: scenario ? "Edit scenario" : "Add scenario" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Define when something happens and what action to take." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--black)]", children: "Type" }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: type,
+            onChange: (e) => setType(e.target.value),
+            children: Object.entries(typeConfig).map(([key, config]) => /* @__PURE__ */ jsxs("option", { value: key, children: [
+              config.label,
+              " \u2014 ",
+              config.description
+            ] }, key))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--black)]", children: "When..." }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "e.g., Invoice amount doesn't match PO",
+            value: situation,
+            onChange: (e) => setSituation(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Describe the situation or trigger" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--black)]", children: "Then..." }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "e.g., Flag for review, don't process",
+            value: action,
+            onChange: (e) => setAction(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "What should happen in this situation" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleSave,
+          disabled: !isValid || isSaving,
+          loading: isSaving,
+          children: scenario ? "Save changes" : "Add scenario"
+        }
+      )
+    ] })
+  ] }) });
+}
+function ScenariosManager({
+  scenarios,
+  onAdd,
+  onUpdate,
+  onDelete,
+  suggestions = [],
+  isLoading,
+  className
+}) {
+  const [dialogOpen, setDialogOpen] = React28.useState(false);
+  const [editingScenario, setEditingScenario] = React28.useState(null);
+  const [deletingId, setDeletingId] = React28.useState(null);
+  const handleAddClick = () => {
+    setEditingScenario(null);
+    setDialogOpen(true);
+  };
+  const handleEditClick = (scenario) => {
+    setEditingScenario(scenario);
+    setDialogOpen(true);
+  };
+  const handleSave = async (data) => {
+    if (editingScenario) {
+      await onUpdate(editingScenario.id, data);
+    } else {
+      await onAdd(data);
+    }
+  };
+  const handleDelete = async (id) => {
+    setDeletingId(id);
+    try {
+      await onDelete(id);
+    } finally {
+      setDeletingId(null);
+    }
+  };
+  const handleSuggestionAdd = async (suggestion) => {
+    await onAdd(suggestion);
+  };
+  const filteredSuggestions = suggestions.filter(
+    (s) => !scenarios.some(
+      (existing) => existing.situation.toLowerCase() === s.situation.toLowerCase()
+    )
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-sm bg-[var(--cyan)]/10 flex items-center justify-center", children: /* @__PURE__ */ jsx(Lightning, { size: 20, weight: "fill", className: "text-[var(--cyan)]" }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[var(--black)]", children: "Scenarios" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: scenarios.length === 0 ? "Define rules for edge cases and escalations" : `${scenarios.length} scenario${scenarios.length === 1 ? "" : "s"} defined` })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: handleAddClick, children: [
+        /* @__PURE__ */ jsx(Plus, { size: 16, className: "mr-1" }),
+        "Add scenario"
+      ] })
+    ] }),
+    scenarios.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: scenarios.map((scenario) => /* @__PURE__ */ jsx(
+      ScenarioCard,
+      {
+        scenario,
+        onEdit: () => handleEditClick(scenario),
+        onDelete: () => handleDelete(scenario.id)
+      },
+      scenario.id
+    )) }),
+    scenarios.length === 0 && /* @__PURE__ */ jsxs("div", { className: "border border-dashed border-gray-300 rounded-sm p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lightning, { size: 32, className: "text-gray-300 mx-auto mb-3" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: "No scenarios yet. Add rules for how the worker should handle edge cases." }),
+      /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: handleAddClick, children: [
+        /* @__PURE__ */ jsx(Plus, { size: 16, className: "mr-1" }),
+        "Add your first scenario"
+      ] })
+    ] }),
+    filteredSuggestions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pt-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-2", children: "Suggested scenarios:" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: filteredSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+        SuggestionChip,
+        {
+          suggestion,
+          onAdd: () => handleSuggestionAdd(suggestion),
+          disabled: isLoading
+        },
+        index
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ScenarioDialog,
+      {
+        open: dialogOpen,
+        onOpenChange: setDialogOpen,
+        scenario: editingScenario,
+        onSave: handleSave,
+        isLoading
+      }
+    )
+  ] });
+}
 
 // src/index.ts
 __reExport(index_exports, icons_exports);
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, BreadcrumbLink, Breadcrumbs, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, ConfirmDialog, DateRangePicker, DateRangeSelect, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorState, FormField, IconBox, Input, Label2 as Label, LabeledSwitch, Logo, Metric, MetricCard, MetricLabel, MetricSubtext, MetricValue, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupCard, RadioGroupItem, RadioGroupOption, Select, Separator2 as Separator, SettingsNav, SettingsNavLink, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SimplePagination, SimpleTooltip, Skeleton, SkeletonCard, SkeletonText, Stat, StepDots, StepProgress, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsListUnderline, TabsTrigger, TabsTriggerUnderline, Tag, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastIcon, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, UsageBar, UsageChart, alertVariants, badgeVariants, buttonVariants, cn, getDateRangeFromPreset, iconBoxVariants, metricCardVariants, navigationMenuTriggerStyle, progressVariants, statVariants, tagVariants, toast, usageBarVariants, useToast, valueVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, BreadcrumbLink, Breadcrumbs, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, ConfirmDialog, DateRangePicker, DateRangeSelect, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorState, FilePreview, FormField, IconBox, Input, Label2 as Label, LabeledSwitch, Logo, Metric, MetricCard, MetricLabel, MetricSubtext, MetricValue, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupCard, RadioGroupItem, RadioGroupOption, ScenariosManager, Select, Separator2 as Separator, SettingsNav, SettingsNavLink, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SimplePagination, SimpleTooltip, Skeleton, SkeletonCard, SkeletonText, Stat, StepDots, StepProgress, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsListUnderline, TabsTrigger, TabsTriggerUnderline, Tag, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastIcon, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, UsageBar, UsageChart, alertVariants, badgeVariants, buttonVariants, cn, getDateRangeFromPreset, iconBoxVariants, metricCardVariants, navigationMenuTriggerStyle, progressVariants, statVariants, tagVariants, toast, usageBarVariants, useToast, valueVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map