@agentiffai/design 0.1.5 → 0.1.7

package/dist/workflow/index.cjs

@@ -0,0 +1,995 @@
+'use strict';
+
+var styled4 = require('styled-components');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styled4__default = /*#__PURE__*/_interopDefault(styled4);
+
+// src/components/workflow/WorkflowStatusBadge.tsx
+var spin = styled4.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var pulse = styled4.keyframes`
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+`;
+var BadgeContainer = styled4__default.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${(props) => {
+  switch (props.$size) {
+    case "sm":
+      return "4px";
+    case "lg":
+      return "8px";
+    case "md":
+    default:
+      return "6px";
+  }
+}};
+  padding: ${(props) => {
+  switch (props.$size) {
+    case "sm":
+      return "4px 8px";
+    case "lg":
+      return "8px 16px";
+    case "md":
+    default:
+      return "6px 12px";
+  }
+}};
+  background-color: ${(props) => {
+  switch (props.$status) {
+    case "pending":
+      return "rgba(107, 114, 128, 0.1)";
+    // Gray
+    case "running":
+      return "rgba(59, 130, 246, 0.1)";
+    // Blue
+    case "completed":
+      return "rgba(16, 185, 129, 0.1)";
+    // Green
+    case "failed":
+      return "rgba(239, 68, 68, 0.1)";
+    // Red
+    case "timeout":
+      return "rgba(245, 158, 11, 0.1)";
+  }
+}};
+  border: 1px solid
+    ${(props) => {
+  switch (props.$status) {
+    case "pending":
+      return "rgba(107, 114, 128, 0.3)";
+    case "running":
+      return "rgba(59, 130, 246, 0.3)";
+    case "completed":
+      return "rgba(16, 185, 129, 0.3)";
+    case "failed":
+      return "rgba(239, 68, 68, 0.3)";
+    case "timeout":
+      return "rgba(245, 158, 11, 0.3)";
+  }
+}};
+  border-radius: ${(props) => {
+  switch (props.$size) {
+    case "sm":
+      return "4px";
+    case "lg":
+      return "8px";
+    case "md":
+    default:
+      return "6px";
+  }
+}};
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: ${(props) => {
+  switch (props.$size) {
+    case "sm":
+      return "11px";
+    case "lg":
+      return "15px";
+    case "md":
+    default:
+      return "13px";
+  }
+}};
+  font-weight: 500;
+  color: ${(props) => {
+  switch (props.$status) {
+    case "pending":
+      return "#6B7280";
+    case "running":
+      return "#3B82F6";
+    case "completed":
+      return "#10B981";
+    case "failed":
+      return "#EF4444";
+    case "timeout":
+      return "#F59E0B";
+  }
+}};
+  line-height: 1.4;
+`;
+var IconContainer = styled4__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  animation: ${(props) => {
+  if (props.$animated) {
+    if (props.$status === "running") return spin;
+    if (props.$status === "pending") return pulse;
+  }
+  return "none";
+}}
+    ${(props) => props.$status === "running" ? "1s" : "2s"} linear infinite;
+`;
+var PendingIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" }) });
+var RunningIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z", opacity: "0.3" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
+] });
+var CompletedIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) });
+var FailedIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" }) });
+var TimeoutIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) });
+var Label = styled4__default.default.span`
+  white-space: nowrap;
+`;
+var getDefaultLabel = (status) => {
+  switch (status) {
+    case "pending":
+      return "Pending";
+    case "running":
+      return "Running";
+    case "completed":
+      return "Completed";
+    case "failed":
+      return "Failed";
+    case "timeout":
+      return "Timeout";
+  }
+};
+var getStatusIcon = (status) => {
+  switch (status) {
+    case "pending":
+      return /* @__PURE__ */ jsxRuntime.jsx(PendingIcon, {});
+    case "running":
+      return /* @__PURE__ */ jsxRuntime.jsx(RunningIcon, {});
+    case "completed":
+      return /* @__PURE__ */ jsxRuntime.jsx(CompletedIcon, {});
+    case "failed":
+      return /* @__PURE__ */ jsxRuntime.jsx(FailedIcon, {});
+    case "timeout":
+      return /* @__PURE__ */ jsxRuntime.jsx(TimeoutIcon, {});
+  }
+};
+var WorkflowStatusBadge = ({
+  status,
+  size = "md",
+  showIcon = true,
+  showLabel = true,
+  animated = true,
+  label,
+  className
+}) => {
+  const displayLabel = label || getDefaultLabel(status);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    BadgeContainer,
+    {
+      $status: status,
+      $size: size,
+      className,
+      role: "status",
+      "aria-label": displayLabel,
+      children: [
+        showIcon && /* @__PURE__ */ jsxRuntime.jsx(IconContainer, { $animated: animated, $status: status, "aria-hidden": "true", children: getStatusIcon(status) }),
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { children: displayLabel })
+      ]
+    }
+  );
+};
+WorkflowStatusBadge.displayName = "WorkflowStatusBadge";
+var indeterminate = styled4.keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+`;
+var rotate = styled4.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var Container = styled4__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+`;
+var ProgressMessage = styled4__default.default.div`
+  font-size: ${(props) => {
+  switch (props.size) {
+    case "sm":
+      return "12px";
+    case "lg":
+      return "16px";
+    case "md":
+    default:
+      return "14px";
+  }
+}};
+  color: #9CA3AF;
+  line-height: 1.5;
+`;
+var ProgressInfo = styled4__default.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+`;
+var PercentageText = styled4__default.default.span`
+  font-size: ${(props) => {
+  switch (props.size) {
+    case "sm":
+      return "11px";
+    case "lg":
+      return "15px";
+    case "md":
+    default:
+      return "13px";
+  }
+}};
+  font-weight: 500;
+  color: #FFFFFF;
+`;
+var LinearTrack = styled4__default.default.div`
+  position: relative;
+  width: 100%;
+  height: ${(props) => {
+  switch (props.size) {
+    case "sm":
+      return "4px";
+    case "lg":
+      return "8px";
+    case "md":
+    default:
+      return "6px";
+  }
+}};
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 9999px;
+  overflow: hidden;
+`;
+var LinearFill = styled4__default.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: ${(props) => props.indeterminate ? "25%" : `${props.progress}%`};
+  background-color: ${(props) => {
+  switch (props.status) {
+    case "pending":
+      return "#6B7280";
+    // Gray
+    case "running":
+      return "#3B82F6";
+    // Blue
+    case "completed":
+      return "#10B981";
+    // Green
+    case "failed":
+      return "#EF4444";
+    // Red
+    case "timeout":
+      return "#F59E0B";
+  }
+}};
+  border-radius: 9999px;
+  transition: ${(props) => props.animated && !props.indeterminate ? "width 0.3s ease-out" : "none"};
+  animation: ${(props) => props.indeterminate ? indeterminate : "none"} 1.5s ease-in-out infinite;
+`;
+var CircularContainer = styled4__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+var CircularSvg = styled4__default.default.svg`
+  width: ${(props) => {
+  switch (props.size) {
+    case "sm":
+      return "40px";
+    case "lg":
+      return "80px";
+    case "md":
+    default:
+      return "60px";
+  }
+}};
+  height: ${(props) => {
+  switch (props.size) {
+    case "sm":
+      return "40px";
+    case "lg":
+      return "80px";
+    case "md":
+    default:
+      return "60px";
+  }
+}};
+  transform: rotate(-90deg);
+`;
+var getCircularSize = (size) => {
+  switch (size) {
+    case "sm":
+      return { radius: 16, strokeWidth: 3 };
+    case "lg":
+      return { radius: 36, strokeWidth: 6 };
+    case "md":
+    default:
+      return { radius: 26, strokeWidth: 4 };
+  }
+};
+var CircularTrack = styled4__default.default.circle`
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.1);
+  stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
+`;
+var CircularFill = styled4__default.default.circle`
+  fill: none;
+  stroke: ${(props) => {
+  switch (props.status) {
+    case "pending":
+      return "#6B7280";
+    case "running":
+      return "#3B82F6";
+    case "completed":
+      return "#10B981";
+    case "failed":
+      return "#EF4444";
+    case "timeout":
+      return "#F59E0B";
+  }
+}};
+  stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
+  stroke-dasharray: ${(props) => {
+  const { radius } = getCircularSize(props.size);
+  const circumference = 2 * Math.PI * radius;
+  return props.indeterminate ? `${circumference * 0.25} ${circumference}` : circumference;
+}};
+  stroke-dashoffset: ${(props) => {
+  const { radius } = getCircularSize(props.size);
+  const circumference = 2 * Math.PI * radius;
+  return props.indeterminate ? 0 : circumference * (1 - props.progress / 100);
+}};
+  stroke-linecap: round;
+  transition: ${(props) => props.animated && !props.indeterminate ? "stroke-dashoffset 0.3s ease-out" : "none"};
+  animation: ${(props) => props.indeterminate ? rotate : "none"} 1.5s linear infinite;
+`;
+var CircularPercentage = styled4__default.default.text`
+  fill: #FFFFFF;
+  font-size: ${(props) => {
+  switch (props.size) {
+    case "sm":
+      return "10px";
+    case "lg":
+      return "16px";
+    case "md":
+    default:
+      return "12px";
+  }
+}};
+  font-weight: 600;
+  text-anchor: middle;
+  dominant-baseline: middle;
+  transform: rotate(90deg);
+  transform-origin: center;
+`;
+var WorkflowProgressBar = ({
+  progress,
+  message,
+  status = "running",
+  variant = "linear",
+  size = "md",
+  showPercentage = true,
+  animated = true,
+  className
+}) => {
+  const isIndeterminate = progress === void 0;
+  const progressValue = progress ?? 0;
+  if (variant === "circular") {
+    const { radius } = getCircularSize(size);
+    const center = radius + getCircularSize(size).strokeWidth;
+    return /* @__PURE__ */ jsxRuntime.jsxs(Container, { className, children: [
+      message && /* @__PURE__ */ jsxRuntime.jsx(ProgressMessage, { size, children: message }),
+      /* @__PURE__ */ jsxRuntime.jsx(CircularContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        CircularSvg,
+        {
+          size,
+          viewBox: `0 0 ${center * 2} ${center * 2}`,
+          role: "progressbar",
+          "aria-valuenow": progressValue,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-label": message || `${progressValue}% complete`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CircularTrack, { size, cx: center, cy: center, r: radius }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CircularFill,
+              {
+                progress: progressValue,
+                status,
+                size,
+                animated,
+                indeterminate: isIndeterminate,
+                cx: center,
+                cy: center,
+                r: radius
+              }
+            ),
+            showPercentage && !isIndeterminate && /* @__PURE__ */ jsxRuntime.jsxs(CircularPercentage, { size, x: center, y: center, children: [
+              Math.round(progressValue),
+              "%"
+            ] })
+          ]
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { className, children: [
+    (message || showPercentage) && /* @__PURE__ */ jsxRuntime.jsxs(ProgressInfo, { children: [
+      message && /* @__PURE__ */ jsxRuntime.jsx(ProgressMessage, { size, children: message }),
+      showPercentage && !isIndeterminate && /* @__PURE__ */ jsxRuntime.jsxs(PercentageText, { size, children: [
+        Math.round(progressValue),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LinearTrack,
+      {
+        size,
+        role: "progressbar",
+        "aria-valuenow": progressValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": message || `${progressValue}% complete`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          LinearFill,
+          {
+            progress: progressValue,
+            status,
+            animated,
+            indeterminate: isIndeterminate
+          }
+        )
+      }
+    )
+  ] });
+};
+WorkflowProgressBar.displayName = "WorkflowProgressBar";
+var Panel = styled4__default.default.div`
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+`;
+var Header = styled4__default.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background-color: rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: ${(props) => props.collapsible ? "pointer" : "default"};
+  user-select: none;
+
+  &:hover {
+    background-color: ${(props) => props.collapsible ? "rgba(255, 255, 255, 0.05)" : "rgba(255, 255, 255, 0.02)"};
+  }
+`;
+var Title = styled4__default.default.div`
+  font-size: 14px;
+  font-weight: 500;
+  color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+var Actions = styled4__default.default.div`
+  display: flex;
+  gap: 8px;
+`;
+var IconButton = styled4__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  color: #9CA3AF;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: #FFFFFF;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+var CollapseIcon = styled4__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease-in-out;
+  transform: ${(props) => props.expanded ? "rotate(180deg)" : "rotate(0deg)"};
+  color: #9CA3AF;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+var Content = styled4__default.default.div`
+  padding: 16px;
+  max-height: ${(props) => {
+  if (!props.expanded) return "0";
+  return props.maxHeight || "400px";
+}};
+  overflow: ${(props) => props.expanded ? "auto" : "hidden"};
+  transition: max-height 0.3s ease-in-out;
+
+  /* Custom scrollbar */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+`;
+var JsonView = styled4__default.default.pre`
+  margin: 0;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #E5E7EB;
+  white-space: pre-wrap;
+  word-break: break-word;
+`;
+var FormattedView = styled4__default.default.div`
+  font-size: 14px;
+  line-height: 1.6;
+  color: #E5E7EB;
+`;
+var TableView = styled4__default.default.table`
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+
+  th {
+    text-align: left;
+    padding: 8px 12px;
+    background-color: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    font-weight: 500;
+    color: #FFFFFF;
+  }
+
+  td {
+    padding: 8px 12px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    color: #E5E7EB;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+`;
+var EmptyState = styled4__default.default.div`
+  padding: 32px;
+  text-align: center;
+  color: #6B7280;
+  font-size: 14px;
+`;
+var DownloadIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }) });
+var CopyIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) });
+var ChevronIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" }) });
+var WorkflowResultPanel = ({
+  outputData,
+  variant = "json",
+  collapsible = true,
+  defaultExpanded = true,
+  maxHeight,
+  onDownload,
+  onCopy,
+  title = "Result",
+  className
+}) => {
+  const [expanded, setExpanded] = react.useState(defaultExpanded);
+  const handleToggle = () => {
+    if (collapsible) {
+      setExpanded(!expanded);
+    }
+  };
+  const renderContent = () => {
+    if (!outputData) {
+      return /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "No results available" });
+    }
+    switch (variant) {
+      case "json":
+        return /* @__PURE__ */ jsxRuntime.jsx(JsonView, { children: JSON.stringify(outputData, null, 2) });
+      case "formatted":
+        if (typeof outputData === "object") {
+          return /* @__PURE__ */ jsxRuntime.jsx(FormattedView, { children: Object.entries(outputData).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+              key,
+              ":"
+            ] }),
+            " ",
+            String(value)
+          ] }, key)) });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(FormattedView, { children: String(outputData) });
+      case "table":
+        if (Array.isArray(outputData) && outputData.length > 0) {
+          const keys = Object.keys(outputData[0]);
+          return /* @__PURE__ */ jsxRuntime.jsxs(TableView, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: keys.map((key) => /* @__PURE__ */ jsxRuntime.jsx("th", { children: key }, key)) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: outputData.map((row, idx) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: keys.map((key) => /* @__PURE__ */ jsxRuntime.jsx("td", { children: String(row[key]) }, key)) }, idx)) })
+          ] });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "Data is not in table format" });
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "Unsupported variant" });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Panel, { collapsible, expanded, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header, { collapsible, onClick: handleToggle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
+        title,
+        collapsible && /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, { expanded, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Actions, { onClick: (e) => e.stopPropagation(), children: [
+        onCopy && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: onCopy, title: "Copy to clipboard", "aria-label": "Copy to clipboard", children: /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, {}) }),
+        onDownload && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: onDownload, title: "Download", "aria-label": "Download results", children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, {}) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Content, { maxHeight, expanded, children: renderContent() })
+  ] });
+};
+WorkflowResultPanel.displayName = "WorkflowResultPanel";
+var AlertContainer = styled4__default.default.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(props) => {
+  const alpha = props.variant === "modal" ? "0.15" : props.variant === "banner" ? "0.1" : "0.05";
+  switch (props.severity) {
+    case "error":
+      return `rgba(239, 68, 68, ${alpha})`;
+    case "warning":
+      return `rgba(245, 158, 11, ${alpha})`;
+    case "info":
+      return `rgba(59, 130, 246, ${alpha})`;
+  }
+}};
+  border: 1px solid
+    ${(props) => {
+  const alpha = props.variant === "modal" ? "0.4" : "0.3";
+  switch (props.severity) {
+    case "error":
+      return `rgba(239, 68, 68, ${alpha})`;
+    case "warning":
+      return `rgba(245, 158, 11, ${alpha})`;
+    case "info":
+      return `rgba(59, 130, 246, ${alpha})`;
+  }
+}};
+  border-radius: ${(props) => props.variant === "banner" ? "0" : "8px"};
+  padding: ${(props) => props.variant === "modal" ? "20px" : "16px"};
+  margin: ${(props) => props.variant === "banner" ? "0" : "8px 0"};
+  width: ${(props) => props.variant === "modal" ? "auto" : "100%"};
+  max-width: ${(props) => props.variant === "inline" ? "600px" : "100%"};
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+`;
+var ModalOverlay = styled4__default.default.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: ${(props) => props.isOpen ? "flex" : "none"};
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+`;
+var ModalContent = styled4__default.default.div`
+  background-color: #1A1A1A;
+  border-radius: 12px;
+  max-width: 500px;
+  width: 100%;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+`;
+var Header2 = styled4__default.default.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+`;
+var IconContainer2 = styled4__default.default.div`
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  color: ${(props) => {
+  switch (props.severity) {
+    case "error":
+      return "#EF4444";
+    case "warning":
+      return "#F59E0B";
+    case "info":
+      return "#3B82F6";
+  }
+}};
+`;
+var Content2 = styled4__default.default.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+var Title2 = styled4__default.default.div`
+  font-size: 15px;
+  font-weight: 600;
+  color: #FFFFFF;
+  line-height: 1.4;
+`;
+var ErrorMessage = styled4__default.default.div`
+  font-size: 14px;
+  line-height: 1.5;
+  color: #E5E7EB;
+`;
+var ErrorCode = styled4__default.default.div`
+  font-size: 12px;
+  color: #9CA3AF;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  margin-top: 4px;
+`;
+var Timestamp = styled4__default.default.div`
+  font-size: 12px;
+  color: #6B7280;
+  margin-top: 4px;
+`;
+var Details = styled4__default.default.details`
+  margin-top: 12px;
+  cursor: pointer;
+
+  summary {
+    font-size: 13px;
+    font-weight: 500;
+    color: #9CA3AF;
+    user-select: none;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    &:hover {
+      color: #FFFFFF;
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+`;
+var DetailsIcon = styled4__default.default.span`
+  display: inline-block;
+  transition: transform 0.2s ease-in-out;
+  transform: ${(props) => props.open ? "rotate(90deg)" : "rotate(0deg)"};
+`;
+var StackTrace = styled4__default.default.pre`
+  margin: 8px 0 0 0;
+  padding: 12px;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  color: #D1D5DB;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
+`;
+var Actions2 = styled4__default.default.div`
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+`;
+var Button = styled4__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${(props) => props.variant === "primary" ? "#FFFFFF" : "#9CA3AF"};
+  background: ${(props) => props.variant === "primary" ? "#EF4444" : "rgba(255, 255, 255, 0.05)"};
+  border: 1px solid
+    ${(props) => props.variant === "primary" ? "#EF4444" : "rgba(255, 255, 255, 0.1)"};
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+
+  &:hover {
+    background: ${(props) => props.variant === "primary" ? "#DC2626" : "rgba(255, 255, 255, 0.1)"};
+    border-color: ${(props) => props.variant === "primary" ? "#DC2626" : "rgba(255, 255, 255, 0.2)"};
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var CloseButton = styled4__default.default.button`
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: #9CA3AF;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.15s ease-in-out;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #FFFFFF;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+var ErrorIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "24", height: "24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) });
+var WarningIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "24", height: "24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) });
+var InfoIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "24", height: "24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) });
+var CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) });
+var ChevronIcon2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) });
+var WorkflowErrorAlert = ({
+  error,
+  errorCode,
+  timestamp,
+  variant = "inline",
+  severity = "error",
+  retryable = false,
+  onRetry,
+  onDismiss,
+  showDetails = false,
+  stackTrace,
+  title,
+  className
+}) => {
+  const [detailsOpen, setDetailsOpen] = react.useState(false);
+  const [isModalOpen, setIsModalOpen] = react.useState(variant === "modal");
+  const errorMessage = typeof error === "string" ? error : error.message;
+  const defaultTitle = severity === "error" ? "Workflow Error" : severity === "warning" ? "Warning" : "Information";
+  const displayTitle = title || defaultTitle;
+  const handleDismiss = () => {
+    if (variant === "modal") {
+      setIsModalOpen(false);
+    }
+    onDismiss?.();
+  };
+  const getIcon = () => {
+    switch (severity) {
+      case "error":
+        return /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {});
+      case "warning":
+        return /* @__PURE__ */ jsxRuntime.jsx(WarningIcon, {});
+      case "info":
+        return /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, {});
+    }
+  };
+  const alertContent = /* @__PURE__ */ jsxRuntime.jsx(AlertContainer, { variant, severity, className, role: "alert", children: /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(IconContainer2, { severity, "aria-hidden": "true", children: getIcon() }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Content2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: displayTitle }),
+      /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { children: errorMessage }),
+      errorCode && /* @__PURE__ */ jsxRuntime.jsxs(ErrorCode, { children: [
+        "Error Code: ",
+        errorCode
+      ] }),
+      timestamp && /* @__PURE__ */ jsxRuntime.jsx(Timestamp, { children: new Date(timestamp).toLocaleString() }),
+      showDetails && (stackTrace || typeof error === "object" && error.stack) && /* @__PURE__ */ jsxRuntime.jsxs(Details, { open: detailsOpen, onToggle: (e) => setDetailsOpen(e.target.open), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("summary", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DetailsIcon, { open: detailsOpen, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon2, {}) }),
+          "Show Details"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(StackTrace, { children: stackTrace || (typeof error === "object" ? error.stack : "") })
+      ] }),
+      (retryable || onDismiss) && /* @__PURE__ */ jsxRuntime.jsxs(Actions2, { children: [
+        retryable && onRetry && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: onRetry, children: "Retry" }),
+        onDismiss && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: handleDismiss, children: "Dismiss" })
+      ] })
+    ] }),
+    variant !== "modal" && onDismiss && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: handleDismiss, "aria-label": "Dismiss alert", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
+  ] }) });
+  if (variant === "modal") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, { isOpen: isModalOpen, onClick: handleDismiss, children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { onClick: (e) => e.stopPropagation(), children: [
+      alertContent,
+      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: handleDismiss, "aria-label": "Close modal", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
+    ] }) });
+  }
+  return alertContent;
+};
+WorkflowErrorAlert.displayName = "WorkflowErrorAlert";
+
+exports.WorkflowErrorAlert = WorkflowErrorAlert;
+exports.WorkflowProgressBar = WorkflowProgressBar;
+exports.WorkflowResultPanel = WorkflowResultPanel;
+exports.WorkflowStatusBadge = WorkflowStatusBadge;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map