ai-design-system 0.1.37 → 0.1.39

package/dist/index.css

@@ -24,8 +24,13 @@
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-purple-50: oklch(97.7% 0.014 308.299);
+    --color-purple-200: oklch(90.2% 0.063 306.703);
+    --color-purple-400: oklch(71.4% 0.203 305.504);
     --color-purple-500: oklch(62.7% 0.265 303.9);
     --color-purple-600: oklch(55.8% 0.288 302.321);
+    --color-purple-800: oklch(43.8% 0.218 303.724);
+    --color-purple-950: oklch(29.1% 0.149 302.717);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
@@ -1622,6 +1627,9 @@
   .border-primary {
     border-color: var(--primary);
   }
+  .border-purple-200 {
+    border-color: var(--color-purple-200);
+  }
   .border-red-400\/40 {
     border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1820,6 +1828,9 @@
       background-color: color-mix(in oklab, var(--primary) 20%, transparent);
     }
   }
+  .bg-purple-50 {
+    background-color: var(--color-purple-50);
+  }
   .bg-purple-500 {
     background-color: var(--color-purple-500);
   }
@@ -4378,6 +4389,11 @@
       border-color: var(--color-orange-600);
     }
   }
+  .dark\:border-purple-800 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-purple-800);
+    }
+  }
   .dark\:border-white\/\[\.145\] {
     @media (prefers-color-scheme: dark) {
       border-color: color-mix(in srgb, #fff 14.499999999999998%, transparent);
@@ -4407,6 +4423,14 @@
       }
     }
   }
+  .dark\:bg-purple-950\/30 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(29.1% 0.149 302.717) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-purple-950) 30%, transparent);
+      }
+    }
+  }
   .dark\:bg-transparent {
     @media (prefers-color-scheme: dark) {
       background-color: transparent;
@@ -4442,6 +4466,11 @@
       color: var(--color-orange-500);
     }
   }
+  .dark\:text-purple-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-purple-400);
+    }
+  }
   .dark\:text-purple-500 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-purple-500);

package/dist/index.d.ts

@@ -805,9 +805,6 @@ export const WorkflowBuilder: React.FC<WorkflowBuilderProps>;
 // From components/features/WorkflowObservabilityFeature/WorkflowObservabilityFeature.tsx
 export const WorkflowObservabilityFeature: React.FC<WorkflowObservabilityFeatureProps>;
 
-export const WorkflowToolbarActions: React.FC<any>;
-export const WorkflowToolbar: React.FC<any>;
-
 // From components/composites/WorkflowRunObservabilityPanel/WorkflowRunObservabilityPanel.tsx
 export interface WorkflowRunSummary {
   runId: string
@@ -909,6 +906,9 @@ export const WorkflowRunObservabilityTracePanel: React.FC<WorkflowRunObservabili
 export const WorkflowRunObservabilityDetailsPanel: React.FC<WorkflowRunObservabilityDetailsPanelProps>;
 export const WorkflowRunObservabilityPanel: React.FC<WorkflowRunObservabilityPanelProps>;
 
+export const WorkflowToolbarActions: React.FC<any>;
+export const WorkflowToolbar: React.FC<any>;
+
 // From components/composites/UserMessage/UserMessage.tsx
 export interface UserMessageData {
   id: string
@@ -930,6 +930,17 @@ export interface UserMessageProps {
 
 export const UserMessage: React.FC<UserMessageProps>;
 
+// From components/composites/TriggerNode/TriggerNode.tsx
+export type TriggerNodeData = {
+  label: string;
+  description?: string;
+  type: "trigger";
+  status?: "idle" | "running" | "success" | "error";
+  enabled?: boolean;
+};
+
+export const TriggerNode: React.FC<any>;
+
 // From components/composites/TransitionNode/TransitionNode.tsx
 export type TransitionNodeConfig = {
   /** For conditional transitions: form field comparison e.g. "{{record.orderValue}} > {{record.acceptedRange}}" */
@@ -1040,19 +1051,6 @@ export interface TablePaginationProps {
 
 export const TablePagination: React.FC<TablePaginationProps>;
 
-// From components/composites/StateNode/StateNode.tsx
-export type StateNodeData = {
-  label: string;
-  description?: string;
-  type: "state";
-  /** True for terminal states — marks workflow completion, no outgoing transitions */
-  isTerminal?: boolean;
-  status?: "idle" | "running" | "success" | "error";
-  enabled?: boolean;
-};
-
-export const StateNode: React.FC<any>;
-
 // From components/composites/StatsCard/StatsCard.tsx
 export interface StatsCardProps {
   /**
@@ -1085,6 +1083,19 @@ export interface StatsCardProps {
 
 export const StatsCard: React.FC<StatsCardProps>;
 
+// From components/composites/StateNode/StateNode.tsx
+export type StateNodeData = {
+  label: string;
+  description?: string;
+  type: "state";
+  /** True for terminal states — marks workflow completion, no outgoing transitions */
+  isTerminal?: boolean;
+  status?: "idle" | "running" | "success" | "error";
+  enabled?: boolean;
+};
+
+export const StateNode: React.FC<any>;
+
 // From components/composites/SpecialistMessage/SpecialistMessage.tsx
 export interface SpecialistMessageData {
   id: string
@@ -1338,18 +1349,6 @@ export interface FormReportsDrawerFormProps {
 
 export const FormReportsDrawerForm: React.FC<FormReportsDrawerFormProps>;
 
-// From components/composites/FileQueue/FileStatusBadge.tsx
-export type FileStatus = "pending" | "modified" | "created" | "deleted";
-
-export interface FileStatusBadgeProps {
-  status: FileStatus;
-  className?: string;
-}
-
-export const FileStatusBadge: React.FC<FileStatusBadgeProps>;
-
-export const FileQueue: React.FC<any>;
-
 // From components/composites/FilePreviewDialog/FilePreviewDialog.tsx
 export interface FilePreviewDialogProps {
   open: boolean;
@@ -1363,6 +1362,18 @@ export interface FilePreviewDialogProps {
 
 export const FilePreviewDialog: React.FC<FilePreviewDialogProps>;
 
+// From components/composites/FileQueue/FileStatusBadge.tsx
+export type FileStatus = "pending" | "modified" | "created" | "deleted";
+
+export interface FileStatusBadgeProps {
+  status: FileStatus;
+  className?: string;
+}
+
+export const FileStatusBadge: React.FC<FileStatusBadgeProps>;
+
+export const FileQueue: React.FC<any>;
+
 // From components/composites/DocumentTabBar/DocumentTabBar.tsx
 export interface DocumentTabBarProps {
   /**
@@ -1508,8 +1519,6 @@ export const Confirmation: React.FC<ConfirmationProps>;
 
 export const CommentBox: React.FC<any>;
 
-export const AppHeader: React.FC<any>;
-
 // From components/composites/AgentIndicator/AgentIndicator.tsx
 export interface SubAgent {
   id: string
@@ -1537,6 +1546,8 @@ export interface AgentIndicatorProps {
 
 export const AgentIndicator: React.FC<AgentIndicatorProps>;
 
+export const AppHeader: React.FC<any>;
+
 // From components/composites/AdjustableLayout/AdjustableLayout.tsx
 export interface AdjustableLayoutSection {
   id: string
@@ -1564,6 +1575,7 @@ export const AdjustableLayout: React.FC<AdjustableLayoutProps>;
 // ============================================================================
 
 export { ModeSwitcher } from './composites';
+export { getLayoutedElements } from './blocks';
 export { ReactFlowProvider, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
 export type { NodeChange, EdgeChange, Connection } from '@xyflow/react';
 export { cn } from '@/lib/utils';

package/dist/index.js

@@ -9,7 +9,7 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Send, Circle, X, EyeOff, Zap, Check, XCircle, GitBranch, Plus, WrenchIcon, ChevronDownIcon, ChevronsUpDownIcon, ArrowDownIcon, CheckIcon, XIcon, ArrowLeft, ArrowRight, SearchIcon, ChevronUpIcon, MoreVertical, Columns3, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, XCircleIcon, CheckCircleIcon, ClockIcon, CircleIcon, SendIcon, GripVertical, Loader2Icon, SquareIcon, Undo2, Redo2, Save, Loader2 } from 'lucide-react';
+import { Send, Circle, X, EyeOff, Zap, Check, XCircle, GitBranch, Play, Plus, WrenchIcon, ChevronDownIcon, ChevronsUpDownIcon, ArrowDownIcon, CheckIcon, XIcon, ArrowLeft, ArrowRight, SearchIcon, ChevronUpIcon, MoreVertical, Columns3, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, XCircleIcon, CheckCircleIcon, ClockIcon, CircleIcon, SendIcon, GripVertical, Loader2Icon, SquareIcon, Undo2, Redo2, Save, Loader2 } from 'lucide-react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { motion } from 'motion/react';
 import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
@@ -46,9 +46,10 @@ import { CSS } from '@dnd-kit/utilities';
 import 'sonner';
 import { z } from 'zod';
 import { dynamicTableSchema, DYNAMIC_TABLE_SCHEMA_VERSION, FORM_SCHEMA_VERSION } from 'ui-schema-contracts';
-import { Handle, Position, ReactFlowProvider, useReactFlow, ConnectionMode, MiniMap, ReactFlow, Background, getSimpleBezierPath, BaseEdge, getSmoothStepPath, Panel as Panel$1, Controls as Controls$1 } from '@xyflow/react';
+import { Handle, Position, ReactFlowProvider, useReactFlow, ConnectionMode, ReactFlow, Background, getSimpleBezierPath, BaseEdge, getSmoothStepPath, Panel as Panel$1, Controls as Controls$1 } from '@xyflow/react';
 export { ReactFlowProvider, addEdge, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import ELK from 'elkjs';
 import { formSchema } from 'design-schema/schemas/form';
 
 var __defProp = Object.defineProperty;
@@ -8328,6 +8329,34 @@ var TransitionNode = memo(
   }
 );
 TransitionNode.displayName = "TransitionNode";
+var TriggerNode = memo(({ data, selected, id }) => {
+  if (!data) {
+    return null;
+  }
+  const displayTitle = data.label || "Trigger";
+  const displayDescription = data.description;
+  const status = data.status;
+  return /* @__PURE__ */ jsx(
+    Node2,
+    {
+      className: cn(
+        "relative flex flex-col items-center justify-center bg-purple-50 dark:bg-purple-950/30 border border-purple-200 dark:border-purple-800 shadow-none transition-all duration-150 ease-out",
+        selected && "border-primary border-2"
+      ),
+      "data-testid": `trigger-node-${id}`,
+      handles: { target: false, source: true },
+      status,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full items-center justify-center gap-1.5 px-3 py-2", children: [
+        /* @__PURE__ */ jsx(Play, { className: "size-3 shrink-0 text-purple-600 dark:text-purple-400", strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-center", children: [
+          /* @__PURE__ */ jsx(NodeTitle, { className: "line-clamp-2 text-center text-xs font-medium leading-tight", title: displayTitle, children: displayTitle }),
+          displayDescription && /* @__PURE__ */ jsx(NodeDescription, { className: "mt-0.5 line-clamp-2 text-center text-[10px] leading-tight", title: displayDescription, children: displayDescription })
+        ] })
+      ] })
+    }
+  );
+});
+TriggerNode.displayName = "TriggerNode";
 function WorkflowToolbarActions({
   actionGroups = [],
   className
@@ -9299,7 +9328,8 @@ var edgeTypes = {
 };
 var nodeTypes = {
   state: StateNode,
-  transition: TransitionNode
+  transition: TransitionNode,
+  trigger: TriggerNode
 };
 function WorkflowCanvasInner({
   nodes,
@@ -9312,7 +9342,6 @@ function WorkflowCanvasInner({
   onPaneClick,
   onNodeClick,
   onEdgeClick,
-  showMinimap = false,
   interactive = false,
   topLeft,
   topRight,
@@ -9405,8 +9434,7 @@ function WorkflowCanvasInner({
                 position: "bottom-left",
                 children: /* @__PURE__ */ jsx(Controls, {})
               }
-            ),
-            showMinimap && /* @__PURE__ */ jsx(MiniMap, { bgColor: "var(--sidebar)", nodeStrokeColor: "var(--border)" })
+            )
           ]
         }
       )
@@ -9416,6 +9444,50 @@ function WorkflowCanvasInner({
 function WorkflowCanvas(props) {
   return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowCanvasInner, __spreadValues({}, props)) });
 }
+var NODE_WIDTH = 180;
+var NODE_HEIGHT = 52;
+var elk = new ELK();
+async function getLayoutedElements(nodes, edges) {
+  const graph = {
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": "DOWN",
+      "elk.layered.spacing.nodeNodeBetweenLayers": "60",
+      "elk.spacing.nodeNode": "40",
+      "elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+      "elk.layered.nodePlacement.bk.fixedAlignment": "BALANCED",
+      "elk.layered.considerModelOrder": "true",
+      "elk.hierarchyHandling": "INCLUDE_CHILDREN"
+    },
+    children: nodes.map((n) => ({
+      id: n.id,
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT
+    })),
+    edges: edges.map((e) => {
+      return {
+        id: e.id,
+        sources: [e.source],
+        targets: [e.target]
+      };
+    })
+  };
+  const layout = await elk.layout(graph);
+  const layoutedNodes = nodes.map((n) => {
+    var _a;
+    const elkNode = ((_a = layout.children) != null ? _a : []).find((c) => c.id === n.id);
+    if (!elkNode || elkNode.x == null || elkNode.y == null) return n;
+    return __spreadProps(__spreadValues({}, n), {
+      position: { x: elkNode.x, y: elkNode.y }
+    });
+  });
+  const layoutedEdges = edges.map((e) => __spreadProps(__spreadValues({}, e), {
+    sourceHandle: "source-bottom",
+    targetHandle: "target-top"
+  }));
+  return { nodes: layoutedNodes, edges: layoutedEdges };
+}
 function WorkflowBuilder({
   workflowName,
   versions,
@@ -10430,7 +10502,14 @@ var selectedWorkflowRunMock = {
     suspensionReason: "-"
   })
 });
+var DashboardHeader = React3.memo(({ ctaLabel = "Quick Create" }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button2, { variant: "outline", size: "sm", className: "hidden sm:flex", children: ctaLabel }),
+    /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "GitHub" })
+  ] });
+});
+DashboardHeader.displayName = "DashboardHeader";
 
-export { AIDocEditor, DashboardFeature, FormReportsFeature, ModeSwitcher, PageLayout, RefinementPanel, SpecNavigator, WorkflowBuilder, WorkflowObservabilityFeature, cn };
+export { AIDocEditor, DashboardFeature, FormReportsFeature, ModeSwitcher, PageLayout, RefinementPanel, SpecNavigator, WorkflowBuilder, WorkflowObservabilityFeature, cn, getLayoutedElements };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map