@agentiffai/design 1.5.5 → 1.5.6

package/dist/workflow/index.js

@@ -1,6 +1,6 @@
 import styled2, { keyframes, css } from 'styled-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 
 // src/components/workflow/WorkflowCard.tsx
 
@@ -10,6 +10,7 @@ var tokens = {
     primary: "#2CB0AB",
     accent: "#459FB9",
     background: {
+      darker: "#151a26",
       dark: "#1b2230",
       light: "#252d3d"
     },
@@ -53,10 +54,13 @@ var tokens = {
     fontSize: {
       xs: "0.875rem",
       sm: "1rem",
-      base: "1.125rem"},
+      base: "1.125rem",
+      "2xl": "1.5rem"},
     fontWeight: {
       medium: 500,
-      semibold: 600},
+      semibold: 600,
+      bold: 700
+    },
     lineHeight: {
       tight: 1.25,
       normal: 1.5,
@@ -68,7 +72,8 @@ var tokens = {
     sm: "0.5rem",
     md: "1rem",
     lg: "1.5rem",
-    xl: "2rem"},
+    xl: "2rem",
+    "2xl": "3rem"},
   borderRadius: {
     sm: "0.25rem",
     md: "0.5rem",
@@ -89,7 +94,9 @@ var tokens = {
   zIndex: {
     modal: 1200},
   breakpoints: {
-    tablet: 1024}
+    tablet: 1024,
+    desktop: 1280
+  }
 };
 var WorkflowCard = ({
   id,
@@ -1701,6 +1708,507 @@ var SourceLink = styled2.a`
     text-decoration-color: ${tokens.colors.border.hover};
   }
 `;
+var WorkflowDiscoveryPage = ({
+  title = "Workflows",
+  subtitle,
+  tabs,
+  activeTabId,
+  onTabChange,
+  filterSlot,
+  footerSlot,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(PageRoot, { className, "data-testid": "workflow-discovery-page", children: [
+    /* @__PURE__ */ jsxs(PageHeader, { children: [
+      /* @__PURE__ */ jsxs(PageTitleColumn, { children: [
+        /* @__PURE__ */ jsx(PageTitle, { children: title }),
+        subtitle && /* @__PURE__ */ jsx(PageSubtitle, { children: subtitle })
+      ] }),
+      tabs && tabs.length > 0 && /* @__PURE__ */ jsx(TabRow, { role: "tablist", "aria-label": "Workflow availability", children: tabs.map((tab) => {
+        const active = tab.id === activeTabId;
+        return /* @__PURE__ */ jsxs(
+          TabButton,
+          {
+            $active: active,
+            role: "tab",
+            type: "button",
+            "aria-selected": active,
+            onClick: () => onTabChange?.(tab.id),
+            children: [
+              tab.label,
+              tab.count != null && /* @__PURE__ */ jsx(TabCount, { $active: active, children: tab.count })
+            ]
+          },
+          tab.id
+        );
+      }) })
+    ] }),
+    filterSlot && /* @__PURE__ */ jsx(FilterRow, { children: filterSlot }),
+    /* @__PURE__ */ jsx(PageBody, { children }),
+    footerSlot && /* @__PURE__ */ jsx(PageFooter, { children: footerSlot })
+  ] });
+};
+WorkflowDiscoveryPage.displayName = "WorkflowDiscoveryPage";
+var WorkflowDiscoverySection = ({
+  label,
+  count,
+  workflows,
+  expandedId,
+  onToggle
+}) => {
+  const renderedCards = useMemo(
+    () => workflows.map((wf) => {
+      const isExpanded = expandedId === wf.id;
+      return /* @__PURE__ */ jsx(SectionGridCell, { $expanded: isExpanded, children: /* @__PURE__ */ jsx(
+        WorkflowDiscoveryCard,
+        {
+          ...wf,
+          isExpanded,
+          onToggleExpanded: (id, next) => onToggle?.(id, next)
+        }
+      ) }, wf.id);
+    }),
+    [workflows, expandedId, onToggle]
+  );
+  return /* @__PURE__ */ jsxs(SectionRoot, { children: [
+    label && /* @__PURE__ */ jsxs(SectionHeader, { children: [
+      /* @__PURE__ */ jsx(SectionLabel, { children: label }),
+      count != null && /* @__PURE__ */ jsx(SectionCount, { children: count })
+    ] }),
+    /* @__PURE__ */ jsx(SectionGrid, { children: renderedCards })
+  ] });
+};
+WorkflowDiscoverySection.displayName = "WorkflowDiscoverySection";
+var ClipboardIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "32",
+    height: "32",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "8", y: "4", width: "8", height: "3", rx: "1" }),
+      /* @__PURE__ */ jsx("path", { d: "M16 5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 12h6M9 16h4" })
+    ]
+  }
+);
+var AlertIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "32",
+    height: "32",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16.5", r: "0.75", fill: "currentColor" })
+    ]
+  }
+);
+var WorkflowDiscoveryEmptyState = ({
+  title = "No workflows yet",
+  message = "Workflows will appear here once they are enabled for your account.",
+  ctaLabel,
+  onCta
+}) => /* @__PURE__ */ jsxs(StateRoot, { "data-testid": "workflow-discovery-empty", children: [
+  /* @__PURE__ */ jsx(StateIconWrap, { $tone: "neutral", children: /* @__PURE__ */ jsx(ClipboardIcon, {}) }),
+  /* @__PURE__ */ jsx(StateTitle, { children: title }),
+  /* @__PURE__ */ jsx(StateMessage, { children: message }),
+  ctaLabel && onCta && /* @__PURE__ */ jsx(StatePrimaryButton, { type: "button", onClick: onCta, children: ctaLabel })
+] });
+WorkflowDiscoveryEmptyState.displayName = "WorkflowDiscoveryEmptyState";
+var WorkflowDiscoveryErrorState = ({
+  title = "Failed to load workflows",
+  message = "Something went wrong while fetching your workflows. Check your connection and try again.",
+  onRetry
+}) => /* @__PURE__ */ jsxs(StateRoot, { "data-testid": "workflow-discovery-error", children: [
+  /* @__PURE__ */ jsx(StateIconWrap, { $tone: "error", children: /* @__PURE__ */ jsx(AlertIcon, {}) }),
+  /* @__PURE__ */ jsx(StateTitle, { children: title }),
+  /* @__PURE__ */ jsx(StateMessage, { children: message }),
+  onRetry && /* @__PURE__ */ jsx(StatePrimaryButton, { type: "button", onClick: onRetry, children: "Retry" })
+] });
+WorkflowDiscoveryErrorState.displayName = "WorkflowDiscoveryErrorState";
+var WorkflowDiscoveryLoadingState = ({
+  count = 6
+}) => {
+  const items = useMemo(() => Array.from({ length: count }, (_, i) => i), [count]);
+  return /* @__PURE__ */ jsx(SectionGrid, { "data-testid": "workflow-discovery-loading", children: items.map((i) => /* @__PURE__ */ jsx(SectionGridCell, { $expanded: false, children: /* @__PURE__ */ jsxs(SkeletonCard, { children: [
+    /* @__PURE__ */ jsxs(SkeletonHeaderRow, { children: [
+      /* @__PURE__ */ jsxs(SkeletonTitleBlock, { children: [
+        /* @__PURE__ */ jsx(SkeletonLine, { $width: "60%", $height: "16px" }),
+        /* @__PURE__ */ jsx(SkeletonLine, { $width: "90%", $height: "12px" })
+      ] }),
+      /* @__PURE__ */ jsx(SkeletonChip, { $width: "24px", $height: "24px", $rounded: true })
+    ] }),
+    /* @__PURE__ */ jsxs(SkeletonFooterRow, { children: [
+      /* @__PURE__ */ jsx(SkeletonChip, { $width: "70px", $height: "20px" }),
+      /* @__PURE__ */ jsx(SkeletonChip, { $width: "24px", $height: "24px", $rounded: true }),
+      /* @__PURE__ */ jsx(SkeletonChip, { $width: "24px", $height: "24px", $rounded: true }),
+      /* @__PURE__ */ jsx(SkeletonChip, { $width: "50px", $height: "20px" })
+    ] })
+  ] }) }, `skeleton-${i}`)) });
+};
+WorkflowDiscoveryLoadingState.displayName = "WorkflowDiscoveryLoadingState";
+var ExternalLinkIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+      /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+      /* @__PURE__ */ jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+    ]
+  }
+);
+var WorkflowDiscoveryUpgradeBanner = ({
+  title = "Upgrade your plan to unlock these automations",
+  message,
+  ctaLabel = "Learn more",
+  onLearnMore
+}) => /* @__PURE__ */ jsxs(BannerRoot, { "data-testid": "workflow-discovery-upgrade-banner", children: [
+  /* @__PURE__ */ jsxs(BannerTextColumn, { children: [
+    /* @__PURE__ */ jsx(BannerTitle, { children: title }),
+    message && /* @__PURE__ */ jsx(BannerMessage, { children: message })
+  ] }),
+  onLearnMore && /* @__PURE__ */ jsxs(BannerCta, { type: "button", onClick: onLearnMore, children: [
+    /* @__PURE__ */ jsx(ExternalLinkIcon, {}),
+    /* @__PURE__ */ jsx("span", { children: ctaLabel })
+  ] })
+] });
+WorkflowDiscoveryUpgradeBanner.displayName = "WorkflowDiscoveryUpgradeBanner";
+var PageRoot = styled2.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: ${tokens.typography.fontFamily.primary};
+  color: ${tokens.colors.text.primary};
+`;
+var PageHeader = styled2.header`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.md};
+  padding-bottom: ${tokens.spacing.lg};
+
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: ${tokens.spacing.lg};
+  }
+`;
+var PageTitleColumn = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.xs};
+  min-width: 0;
+`;
+var PageTitle = styled2.h1`
+  margin: 0;
+  font-size: ${tokens.typography.fontSize["2xl"]};
+  font-weight: ${tokens.typography.fontWeight.bold};
+  line-height: ${tokens.typography.lineHeight.tight};
+  color: ${tokens.colors.text.primary};
+`;
+var PageSubtitle = styled2.p`
+  margin: 0;
+  font-size: ${tokens.typography.fontSize.sm};
+  color: ${tokens.colors.text.tertiary};
+  line-height: ${tokens.typography.lineHeight.normal};
+`;
+var TabRow = styled2.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.xs};
+  background: ${tokens.colors.background.darker};
+  border-radius: ${tokens.borderRadius.lg};
+  align-self: flex-start;
+
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    align-self: flex-end;
+  }
+`;
+var TabButton = styled2.button`
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.lg};
+  background: ${(p) => p.$active ? tokens.colors.primary : "transparent"};
+  color: ${(p) => p.$active ? tokens.colors.text.primary : tokens.colors.text.secondary};
+  border-radius: ${tokens.borderRadius.md};
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  cursor: pointer;
+  transition: background ${tokens.transitions.fast},
+    color ${tokens.transitions.fast};
+
+  &:hover {
+    color: ${tokens.colors.text.primary};
+    background: ${(p) => p.$active ? tokens.colors.primary : tokens.colors.surface.overlay};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+`;
+var TabCount = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: ${tokens.borderRadius.full};
+  background: ${(p) => p.$active ? "rgba(255, 255, 255, 0.18)" : tokens.colors.surface.overlay};
+  font-size: 11px;
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  color: inherit;
+`;
+var FilterRow = styled2.div`
+  padding-bottom: ${tokens.spacing.md};
+`;
+var PageBody = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.xl};
+`;
+var PageFooter = styled2.div`
+  padding-top: ${tokens.spacing.lg};
+`;
+var SectionRoot = styled2.section`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.sm};
+`;
+var SectionHeader = styled2.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.sm};
+  padding-bottom: ${tokens.spacing.xs};
+`;
+var SectionLabel = styled2.h2`
+  margin: 0;
+  font-size: 11px;
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: ${tokens.colors.text.tertiary};
+`;
+var SectionCount = styled2.span`
+  font-size: 11px;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.tertiary};
+  background: ${tokens.colors.surface.overlay};
+  padding: 1px ${tokens.spacing.xs};
+  border-radius: ${tokens.borderRadius.full};
+`;
+var SectionGrid = styled2.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: ${tokens.spacing.md};
+  width: 100%;
+
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width: ${tokens.breakpoints.desktop}px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+`;
+var SectionGridCell = styled2.div`
+  min-width: 0;
+
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    ${(p) => p.$expanded && css`
+        grid-column: 1 / -1;
+      `}
+  }
+`;
+var StateRoot = styled2.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing["2xl"]} ${tokens.spacing.lg};
+  text-align: center;
+  border: 1px dashed ${tokens.colors.border.subtle};
+  border-radius: ${tokens.borderRadius.lg};
+  background: ${tokens.colors.surface.subtle};
+`;
+var StateIconWrap = styled2.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: ${tokens.borderRadius.full};
+  background: ${(p) => p.$tone === "error" ? `${tokens.colors.error}1A` : tokens.colors.surface.overlay};
+  color: ${(p) => p.$tone === "error" ? tokens.colors.error : tokens.colors.text.tertiary};
+  margin-bottom: ${tokens.spacing.xs};
+`;
+var StateTitle = styled2.h3`
+  margin: 0;
+  font-size: ${tokens.typography.fontSize.base};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  color: ${tokens.colors.text.primary};
+`;
+var StateMessage = styled2.p`
+  margin: 0;
+  max-width: 420px;
+  font-size: ${tokens.typography.fontSize.sm};
+  line-height: ${tokens.typography.lineHeight.normal};
+  color: ${tokens.colors.text.secondary};
+`;
+var StatePrimaryButton = styled2.button`
+  all: unset;
+  margin-top: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.lg};
+  background: ${tokens.colors.primary};
+  color: #fff;
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  border-radius: ${tokens.borderRadius.md};
+  cursor: pointer;
+  transition: opacity ${tokens.transitions.fast};
+
+  &:hover {
+    opacity: 0.92;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+`;
+var pulse2 = keyframes`
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 0.3; }
+`;
+var SkeletonCard = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.md};
+  padding: ${tokens.spacing.md};
+  background: ${tokens.colors.background.dark};
+  border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.xl};
+`;
+var SkeletonHeaderRow = styled2.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${tokens.spacing.sm};
+`;
+var SkeletonTitleBlock = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.xs};
+  flex: 1;
+  min-width: 0;
+`;
+var SkeletonFooterRow = styled2.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  flex-wrap: wrap;
+`;
+var SkeletonLine = styled2.div`
+  width: ${(p) => p.$width};
+  height: ${(p) => p.$height};
+  background: ${tokens.colors.surface.overlay};
+  border-radius: ${tokens.borderRadius.sm};
+  animation: ${pulse2} ${tokens.animation.pulse.duration} ease-in-out infinite;
+`;
+var SkeletonChip = styled2.div`
+  width: ${(p) => p.$width};
+  height: ${(p) => p.$height};
+  background: ${tokens.colors.surface.overlay};
+  border-radius: ${(p) => p.$rounded ? tokens.borderRadius.full : tokens.borderRadius.md};
+  animation: ${pulse2} ${tokens.animation.pulse.duration} ease-in-out infinite;
+  flex-shrink: 0;
+`;
+var BannerRoot = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.md};
+  padding: ${tokens.spacing.md} ${tokens.spacing.lg};
+  background: ${tokens.colors.accent}14;
+  border: 1px solid ${tokens.colors.accent}33;
+  border-radius: ${tokens.borderRadius.lg};
+
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+var BannerTextColumn = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.xs};
+  min-width: 0;
+`;
+var BannerTitle = styled2.p`
+  margin: 0;
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  color: ${tokens.colors.text.primary};
+`;
+var BannerMessage = styled2.p`
+  margin: 0;
+  font-size: ${tokens.typography.fontSize.xs};
+  color: ${tokens.colors.text.tertiary};
+  line-height: ${tokens.typography.lineHeight.normal};
+`;
+var BannerCta = styled2.button`
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  background: ${tokens.colors.accent};
+  color: #fff;
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  border-radius: ${tokens.borderRadius.full};
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: opacity ${tokens.transitions.fast};
+
+  &:hover {
+    opacity: 0.92;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+`;
 var severityColors = {
   error: tokens.colors.error,
   warning: tokens.colors.warning,
@@ -2512,7 +3020,7 @@ var spin = keyframes`
     transform: rotate(360deg);
   }
 `;
-var pulse2 = keyframes`
+var pulse3 = keyframes`
   0%, 100% {
     opacity: 1;
   }
@@ -2590,7 +3098,7 @@ var IconContainer2 = styled2.div`
   animation: ${(props) => {
   if (props.$animated) {
     if (props.$status === "running") return spin;
-    if (props.$status === "pending") return pulse2;
+    if (props.$status === "pending") return pulse3;
   }
   return "none";
 }}
@@ -2719,6 +3227,6 @@ var WorkflowStatusBadge = ({
 };
 WorkflowStatusBadge.displayName = "WorkflowStatusBadge";
 
-export { WorkflowCard, WorkflowDiscoveryCard, WorkflowErrorAlert, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge };
+export { WorkflowCard, WorkflowDiscoveryCard, WorkflowDiscoveryEmptyState, WorkflowDiscoveryErrorState, WorkflowDiscoveryLoadingState, WorkflowDiscoveryPage, WorkflowDiscoverySection, WorkflowDiscoveryUpgradeBanner, WorkflowErrorAlert, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map