@burdenoff/fluidgrids-fe-sdk 2026.728.1 → 2026.730.2

package/dist/chunk-XPUAUQ3I.js

@@ -0,0 +1,589 @@
+import { useWorkflowDefinitions, useDuplicateWorkflow, useDeleteWorkflow } from './chunk-42PCKNPK.js';
+import { useFlowStore } from './chunk-KU64CCSV.js';
+import { SdkPermissionButton, FLUIDGRIDS_PERMISSIONS, SdkPermissionGate } from './chunk-UIY2HBWA.js';
+import { config } from './chunk-WWU2O2SR.js';
+import { useState, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { v4 } from 'uuid';
+import { Icon } from '@iconify/react';
+import { Button, Badge, Input, IllustratedEmptyState, Skeleton, TooltipProvider, Card, Tooltip, TooltipTrigger, TooltipContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '@burdenoff/fe-libs/ui';
+import { cn } from '@burdenoff/fe-libs/utils';
+import { toast } from 'sonner';
+import { Share2, Copy } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function SharePopup({
+  url = window.location.href,
+  embedSrc = `${config.fluidgridFrontendUrl}/workflow-view/565201ec-e803-4281-ad39-a135c46daa89/1.0`
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [width, setWidth] = useState(600);
+  const [height, setHeight] = useState(400);
+  const [activeTab, setActiveTab] = useState("link");
+  const embedCode = `<iframe src="${embedSrc}" width="${width}" height="${height}"></iframe>`;
+  const copyToClipboard = (text, message) => {
+    navigator.clipboard.writeText(text);
+    toast.success(message);
+  };
+  if (!isOpen) {
+    return /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", onClick: () => setIsOpen(true), children: [
+      /* @__PURE__ */ jsx(Share2, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Share" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+      onClick: () => setIsOpen(false),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "bg-card rounded-lg p-6 max-w-md w-full mx-4",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Share" }),
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: () => setIsOpen(false), children: "\xD7" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mb-4", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: activeTab === "link" ? "default" : "outline",
+                  size: "sm",
+                  onClick: () => setActiveTab("link"),
+                  children: "Share Link"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: activeTab === "embed" ? "default" : "outline",
+                  size: "sm",
+                  onClick: () => setActiveTab("embed"),
+                  children: "Embed"
+                }
+              )
+            ] }),
+            activeTab === "link" && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  readOnly: true,
+                  value: url,
+                  className: "flex-1 h-9 px-3 rounded-md border bg-background text-sm"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  onClick: () => copyToClipboard(url, "Link copied to clipboard"),
+                  children: /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            activeTab === "embed" && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Width" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "number",
+                      value: width,
+                      onChange: (e) => setWidth(Number(e.target.value)),
+                      className: "w-full h-9 px-3 rounded-md border bg-background text-sm mt-1"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Height" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "number",
+                      value: height,
+                      onChange: (e) => setHeight(Number(e.target.value)),
+                      className: "w-full h-9 px-3 rounded-md border bg-background text-sm mt-1"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Embed Code" }),
+                /* @__PURE__ */ jsxs("div", { className: "relative mt-1", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      readOnly: true,
+                      value: embedCode,
+                      className: "w-full h-9 px-3 pr-12 rounded-md border bg-background text-sm font-mono"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "sm",
+                      className: "absolute right-1 top-1/2 -translate-y-1/2 h-7",
+                      onClick: () => copyToClipboard(embedCode, "Embed code copied to clipboard"),
+                      children: /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+var STATUS_STYLES = {
+  DRAFT: { label: "Draft", dotClass: "bg-muted-foreground/60" },
+  ACTIVE: {
+    label: "Active",
+    dotClass: "bg-[var(--color-status-success-text)]"
+  },
+  ARCHIVED: { label: "Archived", dotClass: "bg-muted-foreground/30" },
+  DEPRECATED: {
+    label: "Deprecated",
+    dotClass: "bg-[var(--color-status-error-text)]"
+  }
+};
+function relativeTime(iso) {
+  if (!iso) return "\u2014";
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "\u2014";
+  const mins = Math.floor((Date.now() - then) / 6e4);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }).format(new Date(then));
+}
+var CardWorkflow = ({
+  workflow,
+  onUpdateSuccess
+}) => {
+  const navigate = useNavigate();
+  const resetWorkflow = useFlowStore((s) => s.actions.resetWorkflow);
+  const { duplicateWorkflow: duplicateWorkflowMutation } = useDuplicateWorkflow();
+  const { deleteWorkflow: deleteWorkflowMutation } = useDeleteWorkflow();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  async function handleDuplicateWorkflow() {
+    try {
+      resetWorkflow();
+      const result = await duplicateWorkflowMutation(
+        workflow.workflow_key,
+        workflow.version,
+        {
+          newWorkflowKey: `${workflow.workflow_key}_copy_${Date.now()}`
+        }
+      );
+      if (result?.success && result.workflow) {
+        navigate(
+          `../workflow/${result.workflow.workflowKey}/${result.workflow.version}`
+        );
+      } else {
+        throw new Error(result?.message || "Failed to duplicate workflow");
+      }
+    } catch (error) {
+      console.error("Error duplicating workflow:", error);
+      toast.error(
+        `Error duplicating workflow: ${error instanceof Error ? error.message : String(error)}`
+      );
+    }
+  }
+  const handleDeleteWorkflow = async () => {
+    if (!workflow.workflow_key) {
+      console.error("Workflow ID is required to delete.");
+      return;
+    }
+    setIsDeleting(true);
+    try {
+      const success = await deleteWorkflowMutation(workflow.workflow_key);
+      if (success) {
+        setShowDeleteDialog(false);
+      }
+    } catch (error) {
+      console.error("Error deleting workflow:", error);
+      toast.error(
+        `Error deleting workflow: ${error instanceof Error ? error.message : String(error)}`
+      );
+    } finally {
+      setIsDeleting(false);
+      setShowDeleteDialog(false);
+      onUpdateSuccess();
+    }
+  };
+  const handleOnEdit = () => {
+    navigate("../workflow/" + workflow.workflow_key + "/" + workflow.version);
+  };
+  const handleCardClick = (e) => {
+    const el = e.target;
+    if (el.closest("button, a, input, [role='dialog'], .fixed")) return;
+    handleOnEdit();
+  };
+  const statusInfo = STATUS_STYLES[workflow.status ?? "DRAFT"] ?? STATUS_STYLES.DRAFT;
+  const updatedExact = workflow.updated_at ? new Date(workflow.updated_at).toLocaleString() : void 0;
+  return /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+    /* @__PURE__ */ jsxs(
+      Card,
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": `Open workflow ${workflow.name}`,
+        onClick: handleCardClick,
+        onKeyDown: (e) => {
+          if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            handleOnEdit();
+          }
+        },
+        className: cn(
+          "group relative flex min-h-44 cursor-pointer flex-col gap-0 rounded-xl border-border bg-card p-0",
+          "transition-all duration-150 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-start gap-3 p-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex size-9 shrink-0 items-center justify-center rounded-lg border border-primary/20 bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:transit-connection-variant", className: "size-5" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                /* @__PURE__ */ jsx("h3", { className: "truncate font-semibold leading-6 text-card-foreground", children: workflow?.name }),
+                /* @__PURE__ */ jsxs("span", { className: "mt-0.5 inline-flex shrink-0 items-center gap-1.5 rounded-full border border-border px-2 py-0.5 text-[11px] font-medium text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn("size-1.5 rounded-full", statusInfo.dotClass)
+                    }
+                  ),
+                  statusInfo.label
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-xs leading-snug text-muted-foreground", children: workflow.description || "No description" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-border px-4 py-1.5", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground",
+                title: updatedExact,
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { icon: "mdi:clock-outline", className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+                    "Updated ",
+                    relativeTime(workflow.updated_at)
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+                  /* @__PURE__ */ jsxs("span", { className: "shrink-0 font-mono", children: [
+                    workflow.version,
+                    workflow.alias ? ` (${workflow.alias})` : ""
+                  ] }),
+                  workflow.total_versions && workflow.total_versions > 1 ? /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
+                    "\xB7 ",
+                    workflow.total_versions,
+                    " versions"
+                  ] }) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5 opacity-60 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: [
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "size-8",
+                    onClick: handleOnEdit,
+                    "aria-label": "Edit workflow",
+                    children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:edit", className: "size-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx("p", { children: "Edit workflow" }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+                  SharePopup,
+                  {
+                    url: `${config.fluidgridFrontendUrl}/workflow-view/${workflow.workflow_key}/${workflow.version}`,
+                    embedSrc: `${config.fluidgridFrontendUrl}/workflow-view/${workflow.workflow_key}/${workflow.version}`
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx("p", { children: "Share workflow" }) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                SdkPermissionGate,
+                {
+                  permission: FLUIDGRIDS_PERMISSIONS.WORKFLOW_CREATE,
+                  children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "size-8",
+                        onClick: () => handleDuplicateWorkflow(),
+                        "aria-label": "Duplicate workflow",
+                        children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:copy", className: "size-4" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx("p", { children: "Duplicate workflow" }) })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SdkPermissionGate,
+                {
+                  permission: FLUIDGRIDS_PERMISSIONS.WORKFLOW_DELETE,
+                  children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "size-8 text-[var(--color-status-error-text)] hover:text-[var(--color-status-error-text)]",
+                        onClick: () => setShowDeleteDialog(true),
+                        "aria-label": "Delete workflow",
+                        children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:trash", className: "size-4" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx("p", { children: "Delete workflow" }) })
+                  ] })
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AlertDialog, { open: showDeleteDialog, onOpenChange: setShowDeleteDialog, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Delete Workflow" }),
+        /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
+          'Are you sure you want to delete workflow "',
+          workflow.name,
+          '" and all its versions? This action cannot be undone.'
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx(AlertDialogCancel, { disabled: isDeleting, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          AlertDialogAction,
+          {
+            onClick: handleDeleteWorkflow,
+            disabled: isDeleting,
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            children: isDeleting ? "Deleting..." : "Delete"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+var STATUS_FILTERS = [
+  { value: "ACTIVE", label: "Active" },
+  { value: "DRAFT", label: "Draft" },
+  { value: "ARCHIVED", label: "Archived" },
+  { value: "DEPRECATED", label: "Deprecated" }
+];
+function SkeletonCard() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-40 flex-col justify-between rounded-xl border border-border bg-card p-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2.5", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-2/3 bg-card-foreground/15" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full bg-card-foreground/10" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "mr-4 h-6 w-full bg-card-foreground/10" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-8 bg-card-foreground/10" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-8 bg-card-foreground/10" })
+    ] })
+  ] });
+}
+function WorkflowsList() {
+  const navigate = useNavigate();
+  const { workflows, loading, error, refetch } = useWorkflowDefinitions({
+    limit: 100,
+    latestOnly: true
+  });
+  const [search, setSearch] = useState("");
+  const [statusFilter, setStatusFilter] = useState(null);
+  const presentStatuses = useMemo(() => {
+    const seen = new Set(workflows.map((w) => w.status ?? "DRAFT"));
+    return STATUS_FILTERS.filter((s) => seen.has(s.value));
+  }, [workflows]);
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return workflows.filter((w) => {
+      if (statusFilter && (w.status ?? "DRAFT") !== statusFilter) return false;
+      if (!q) return true;
+      return [w.name, w.description, w.alias].filter((v) => typeof v === "string").some((v) => v.toLowerCase().includes(q));
+    });
+  }, [workflows, search, statusFilter]);
+  search.trim() !== "" || statusFilter !== null;
+  const createButton = /* @__PURE__ */ jsx(
+    SdkPermissionButton,
+    {
+      permission: FLUIDGRIDS_PERMISSIONS.WORKFLOW_CREATE,
+      deniedTooltip: "You don't have permission to create workflows",
+      children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "default",
+          size: "default",
+          className: "font-bold text-primary-foreground",
+          onClick: () => navigate(`../workflow/${v4()}/v1`),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { icon: "mynaui:plus", className: "size-5 text-primary-foreground" }),
+            "Create Workflow"
+          ]
+        }
+      )
+    }
+  );
+  return (
+    // min-h-screen (matching the sibling pages) makes short content still fill
+    // the viewport, keeping the shell footer below the fold.
+    /* @__PURE__ */ jsx("main", { className: "flex min-h-screen w-full flex-col bg-background-primary", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-5 p-4 sm:p-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "Workflows" }),
+            !loading && !error && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "font-mono", children: workflows.length })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Build, run, and manage your automations. Open a workflow to edit it in the visual builder." })
+        ] }),
+        createButton
+      ] }),
+      !loading && !error && workflows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-xs", children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: "mynaui:search",
+              className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              placeholder: "Search workflows\u2026",
+              "aria-label": "Search workflows",
+              className: "pl-8"
+            }
+          )
+        ] }),
+        presentStatuses.length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setStatusFilter(null),
+              className: cn(
+                "rounded-full border px-3 py-1 text-xs font-medium transition-colors",
+                statusFilter === null ? "border-transparent bg-primary text-primary-foreground" : "border-border bg-card text-muted-foreground hover:text-foreground"
+              ),
+              children: "All"
+            }
+          ),
+          presentStatuses.map((s) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setStatusFilter(
+                (cur) => cur === s.value ? null : s.value
+              ),
+              className: cn(
+                "rounded-full border px-3 py-1 text-xs font-medium transition-colors",
+                statusFilter === s.value ? "border-transparent bg-primary text-primary-foreground" : "border-border bg-card text-muted-foreground hover:text-foreground"
+              ),
+              children: s.label
+            },
+            s.value
+          ))
+        ] })
+      ] }),
+      loading ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4", children: Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsx(SkeletonCard, {}, i)) }) : error ? /* @__PURE__ */ jsx("div", { className: "grid flex-1 place-items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-md flex-col items-center gap-3 rounded-xl border border-border bg-card p-8 text-center", children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "mynaui:danger-triangle",
+            className: "size-8 text-destructive"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-semibold", children: "Couldn't load workflows" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: error.message })
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: () => refetch(), children: [
+          /* @__PURE__ */ jsx(Icon, { icon: "mynaui:refresh", className: "size-4" }),
+          "Try again"
+        ] })
+      ] }) }) : workflows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "grid flex-1 place-items-center", children: /* @__PURE__ */ jsx(
+        IllustratedEmptyState,
+        {
+          illustration: "onboarding",
+          title: "Create your first workflow",
+          description: "Workflows automate multi-step processes \u2014 sync signups into your CRM, post alerts to Slack, or transform data between apps. Start from a blank canvas or a template.",
+          action: createButton
+        }
+      ) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "grid flex-1 place-items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "mynaui:search",
+            className: "size-8 text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: "No workflows match your filters" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => {
+              setSearch("");
+              setStatusFilter(null);
+            },
+            children: "Clear filters"
+          }
+        )
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4", children: filtered.map((workflow) => /* @__PURE__ */ jsx(
+        CardWorkflow,
+        {
+          workflow: {
+            id: workflow.id,
+            workflow_key: workflow.workflowKey,
+            version: workflow.version,
+            name: workflow.name,
+            description: workflow.description ?? void 0,
+            status: workflow.status ?? void 0,
+            alias: workflow.alias ?? void 0,
+            updated_at: workflow.updatedAt ?? void 0,
+            created_at: workflow.createdAt ?? void 0,
+            total_versions: workflow.totalVersions ?? void 0
+          },
+          onUpdateSuccess: () => refetch()
+        },
+        workflow.id
+      )) })
+    ] }) })
+  );
+}
+
+export { WorkflowsList };
+//# sourceMappingURL=chunk-XPUAUQ3I.js.map
+//# sourceMappingURL=chunk-XPUAUQ3I.js.map