ai-design-system 0.1.36 → 0.1.38

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -18,8 +18,9 @@ import { Connection as ConnectionLine } from "@/components/ai-elements/connectio
 import { Controls } from "@/components/ai-elements/controls";
 import { Edge } from "@/components/ai-elements/edge";
 import { Panel } from "@/components/ai-elements/panel";
-import { StateNode } from "@/components/composites/StateNode";
-import { TransitionNode } from "@/components/composites/TransitionNode";
+import { StateNode, type StateNodeData } from "@/components/composites/StateNode";
+import { TransitionNode, type TransitionNodeData } from "@/components/composites/TransitionNode";
+import { TriggerNode, type TriggerNodeData } from "@/components/composites/TriggerNode";
 import type { WorkflowCanvasProps, WorkflowEdge } from "./interfaces";
 import "@xyflow/react/dist/style.css";
 
@@ -32,6 +33,7 @@ const edgeTypes = {
 const nodeTypes = {
   state: StateNode,
   transition: TransitionNode,
+  trigger: TriggerNode,
 };
 
 function WorkflowCanvasInner({

package/components/composites/TriggerNode/TriggerNode.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import type { NodeProps } from "@xyflow/react";
+import { Play } from "lucide-react";
+import { memo } from "react";
+import {
+  Node,
+  NodeDescription,
+  NodeTitle,
+} from "@/components/ai-elements/node";
+import { cn } from "@/lib/utils";
+
+export type TriggerNodeData = {
+  label: string;
+  description?: string;
+  type: "trigger";
+  status?: "idle" | "running" | "success" | "error";
+  enabled?: boolean;
+};
+
+type TriggerNodeProps = NodeProps & {
+  data?: TriggerNodeData;
+  id: string;
+};
+
+export const TriggerNode = memo(({ data, selected, id }: TriggerNodeProps) => {
+  if (!data) {
+    return null;
+  }
+
+  const displayTitle = data.label || "Trigger";
+  const displayDescription = data.description;
+  const status = data.status;
+
+  return (
+    <Node
+      className={cn(
+        "relative flex h-auto w-auto min-w-[120px] max-w-[180px] 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={status}
+    >
+      <div className="flex items-center gap-1.5 px-3 py-2">
+        <Play className="size-3 shrink-0 text-purple-600 dark:text-purple-400" strokeWidth={1.5} />
+        <div className="flex flex-col">
+          <NodeTitle className="text-xs font-medium leading-tight">{displayTitle}</NodeTitle>
+          {displayDescription && (
+            <NodeDescription className="text-[10px] leading-tight mt-0.5">
+              {displayDescription}
+            </NodeDescription>
+          )}
+        </div>
+      </div>
+    </Node>
+  );
+});
+
+TriggerNode.displayName = "TriggerNode";

package/components/composites/TriggerNode/index.ts

@@ -0,0 +1,2 @@
+export { TriggerNode } from "./TriggerNode";
+export type { TriggerNodeData } from "./TriggerNode";

package/components/composites/index.ts

@@ -130,6 +130,10 @@ export type { StateNodeData } from './StateNode'
 export { TransitionNode } from './TransitionNode'
 export type { TransitionNodeData } from './TransitionNode'
 
+// TriggerNode Composite
+export { TriggerNode } from './TriggerNode'
+export type { TriggerNodeData } from './TriggerNode'
+
 // WorkflowToolbar Composite
 export { WorkflowToolbar, WorkflowToolbarActions } from './WorkflowToolbar'
 export type { WorkflowToolbarProps, WorkflowToolbarActionsProps, WorkflowVersion, ToolbarAction } from './WorkflowToolbar'

package/dist/index.cjs

@@ -8370,6 +8370,34 @@ var TransitionNode = React3.memo(
   }
 );
 TransitionNode.displayName = "TransitionNode";
+var TriggerNode = React3.memo(({ data, selected, id }) => {
+  if (!data) {
+    return null;
+  }
+  const displayTitle = data.label || "Trigger";
+  const displayDescription = data.description;
+  const status = data.status;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Node2,
+    {
+      className: cn(
+        "relative flex h-auto w-auto min-w-[120px] max-w-[180px] 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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "size-3 shrink-0 text-purple-600 dark:text-purple-400", strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(NodeTitle, { className: "text-xs font-medium leading-tight", children: displayTitle }),
+          displayDescription && /* @__PURE__ */ jsxRuntime.jsx(NodeDescription, { className: "text-[10px] leading-tight mt-0.5", children: displayDescription })
+        ] })
+      ] })
+    }
+  );
+});
+TriggerNode.displayName = "TriggerNode";
 function WorkflowToolbarActions({
   actionGroups = [],
   className
@@ -9341,7 +9369,8 @@ var edgeTypes = {
 };
 var nodeTypes = {
   state: StateNode,
-  transition: TransitionNode
+  transition: TransitionNode,
+  trigger: TriggerNode
 };
 function WorkflowCanvasInner({
   nodes,