ai-design-system 0.1.37 → 0.1.39

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -2,17 +2,11 @@
 
 import {
   ConnectionMode,
-  MiniMap,
   ReactFlowProvider,
-  type Node,
-  type NodeChange,
-  type EdgeChange,
   type Connection,
-  type OnConnectStartParams,
   useReactFlow,
 } from "@xyflow/react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { ReactNode } from "react";
 import { Canvas } from "@/components/ai-elements/canvas";
 import { Connection as ConnectionLine } from "@/components/ai-elements/connection";
 import { Controls } from "@/components/ai-elements/controls";
@@ -20,6 +14,7 @@ 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 { TriggerNode } from "@/components/composites/TriggerNode";
 import type { WorkflowCanvasProps, WorkflowEdge } from "./interfaces";
 import "@xyflow/react/dist/style.css";
 
@@ -32,6 +27,7 @@ const edgeTypes = {
 const nodeTypes = {
   state: StateNode,
   transition: TransitionNode,
+  trigger: TriggerNode,
 };
 
 function WorkflowCanvasInner({
@@ -45,7 +41,6 @@ function WorkflowCanvasInner({
   onPaneClick,
   onNodeClick,
   onEdgeClick,
-  showMinimap = false,
   interactive = false,
   topLeft,
   topRight,
@@ -139,9 +134,6 @@ function WorkflowCanvasInner({
         >
           <Controls />
         </Panel>
-        {showMinimap && (
-          <MiniMap bgColor="var(--sidebar)" nodeStrokeColor="var(--border)" />
-        )}
       </Canvas>
     </div>
   );

package/components/blocks/WorkflowCanvas/index.ts

@@ -1,2 +1,3 @@
 export { WorkflowCanvas } from "./WorkflowCanvas";
 export type { WorkflowCanvasProps, WorkflowNode, WorkflowEdge, WorkflowNodeData } from "./interfaces";
+export { getLayoutedElements } from "./layout-engine";

package/components/blocks/WorkflowCanvas/layout-engine.ts

@@ -0,0 +1,59 @@
+import ELK from 'elkjs';
+import type { WorkflowNode, WorkflowEdge } from './interfaces';
+
+const NODE_WIDTH = 180;
+const NODE_HEIGHT = 52;
+
+const elk = new ELK();
+
+export async function getLayoutedElements(
+  nodes: WorkflowNode[],
+  edges: WorkflowEdge[],
+): Promise<{ nodes: WorkflowNode[]; edges: WorkflowEdge[] }> {
+  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],
+      };
+    }),
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const layout = await elk.layout(graph as any);
+
+  const layoutedNodes: WorkflowNode[] = nodes.map((n) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const elkNode = (layout.children ?? []).find((c: any) => c.id === n.id);
+    if (!elkNode || elkNode.x == null || elkNode.y == null) return n;
+    return {
+      ...n,
+      position: { x: elkNode.x, y: elkNode.y },
+    };
+  });
+
+  const layoutedEdges: WorkflowEdge[] = edges.map((e) => ({
+    ...e,
+    sourceHandle: 'source-bottom',
+    targetHandle: 'target-top',
+  }));
+
+  return { nodes: layoutedNodes, edges: layoutedEdges };
+}

package/components/blocks/index.ts

@@ -15,7 +15,7 @@ export * from './LayoutProvider'
 export * from './SectionLayout'
 export type { LayoutProviderProps } from './LayoutProvider'
 
-export { WorkflowCanvas } from './WorkflowCanvas'
+export { WorkflowCanvas, getLayoutedElements } from './WorkflowCanvas'
 export type { WorkflowCanvasProps, WorkflowNode, WorkflowEdge, WorkflowNodeData } from './WorkflowCanvas'
 
 export { DashboardHeader } from './DashboardHeader'

package/components/composites/TriggerNode/TriggerNode.tsx

@@ -0,0 +1,62 @@
+"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 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 h-full w-full items-center justify-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="min-w-0 flex-1 text-center">
+          <NodeTitle className="line-clamp-2 text-center text-xs font-medium leading-tight" title={displayTitle}>
+            {displayTitle}
+          </NodeTitle>
+          {displayDescription && (
+            <NodeDescription className="mt-0.5 line-clamp-2 text-center text-[10px] leading-tight" title={displayDescription}>
+              {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/components/index.ts

@@ -9,6 +9,7 @@ export type * from './features';
 
 // Composites (value exports not covered by export type *)
 export { ModeSwitcher } from './composites';
+export { getLayoutedElements } from './blocks';
 
 // External library re-exports
 export { ReactFlowProvider, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';

package/dist/index.cjs

@@ -48,6 +48,7 @@ var zod = require('zod');
 var uiSchemaContracts = require('ui-schema-contracts');
 var react = require('@xyflow/react');
 require('@xyflow/react/dist/style.css');
+var ELK = require('elkjs');
 var form = require('design-schema/schemas/form');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -92,6 +93,7 @@ var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimit
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 var Highlight__default = /*#__PURE__*/_interopDefault(Highlight);
+var ELK__default = /*#__PURE__*/_interopDefault(ELK);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -8370,6 +8372,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 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 h-full w-full items-center justify-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: "min-w-0 flex-1 text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(NodeTitle, { className: "line-clamp-2 text-center text-xs font-medium leading-tight", title: displayTitle, children: displayTitle }),
+          displayDescription && /* @__PURE__ */ jsxRuntime.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
@@ -9341,7 +9371,8 @@ var edgeTypes = {
 };
 var nodeTypes = {
   state: StateNode,
-  transition: TransitionNode
+  transition: TransitionNode,
+  trigger: TriggerNode
 };
 function WorkflowCanvasInner({
   nodes,
@@ -9354,7 +9385,6 @@ function WorkflowCanvasInner({
   onPaneClick,
   onNodeClick,
   onEdgeClick,
-  showMinimap = false,
   interactive = false,
   topLeft,
   topRight,
@@ -9447,8 +9477,7 @@ function WorkflowCanvasInner({
                 position: "bottom-left",
                 children: /* @__PURE__ */ jsxRuntime.jsx(Controls, {})
               }
-            ),
-            showMinimap && /* @__PURE__ */ jsxRuntime.jsx(react.MiniMap, { bgColor: "var(--sidebar)", nodeStrokeColor: "var(--border)" })
+            )
           ]
         }
       )
@@ -9458,6 +9487,50 @@ function WorkflowCanvasInner({
 function WorkflowCanvas(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowCanvasInner, __spreadValues({}, props)) });
 }
+var NODE_WIDTH = 180;
+var NODE_HEIGHT = 52;
+var elk = new ELK__default.default();
+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,
@@ -10472,6 +10545,13 @@ var selectedWorkflowRunMock = {
     suspensionReason: "-"
   })
 });
+var DashboardHeader = React3__namespace.memo(({ ctaLabel = "Quick Create" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "outline", size: "sm", className: "hidden sm:flex", children: ctaLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: "GitHub" })
+  ] });
+});
+DashboardHeader.displayName = "DashboardHeader";
 
 Object.defineProperty(exports, "ReactFlowProvider", {
   enumerable: true,
@@ -10499,5 +10579,6 @@ exports.SpecNavigator = SpecNavigator;
 exports.WorkflowBuilder = WorkflowBuilder;
 exports.WorkflowObservabilityFeature = WorkflowObservabilityFeature;
 exports.cn = cn;
+exports.getLayoutedElements = getLayoutedElements;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map