ai-design-system 0.1.38 → 0.1.40

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -2,25 +2,19 @@
 
 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";
 import { Edge } from "@/components/ai-elements/edge";
 import { Panel } from "@/components/ai-elements/panel";
-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 { 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";
 
@@ -47,7 +41,6 @@ function WorkflowCanvasInner({
   onPaneClick,
   onNodeClick,
   onEdgeClick,
-  showMinimap = false,
   interactive = false,
   topLeft,
   topRight,
@@ -141,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/StateNode/StateNode.tsx

@@ -66,13 +66,12 @@ export const StateNode = memo(({ data, selected, id }: StateNodeProps) => {
   const isTerminal = data.isTerminal === true;
 
   return (
-    <Node
-      className={cn(
-        "relative flex flex-col items-center justify-center border border-border bg-card shadow-none transition-all duration-150 ease-out",
-        selected && "border-primary border-2",
-        isTerminal && "border-2 border-primary",
-        isDisabled && "opacity-50"
-      )}
+      <Node
+        className={cn(
+          "relative flex flex-col items-center justify-center border border-border bg-card shadow-none transition-all duration-150 ease-out",
+          selected ? "border-primary border-2" : "border border-border",
+          isDisabled && "opacity-50"
+        )}
       data-testid={`state-node-${id}`}
       handles={{ target: true, source: true }}
       status={status}

package/components/composites/TriggerNode/TriggerNode.tsx

@@ -35,19 +35,21 @@ export const TriggerNode = memo(({ data, selected, id }: TriggerNodeProps) => {
   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",
+        "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 items-center gap-1.5 px-3 py-2">
+      <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="flex flex-col">
-          <NodeTitle className="text-xs font-medium leading-tight">{displayTitle}</NodeTitle>
+        <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="text-[10px] leading-tight mt-0.5">
+            <NodeDescription className="mt-0.5 line-clamp-2 text-center text-[10px] leading-tight" title={displayDescription}>
               {displayDescription}
             </NodeDescription>
           )}

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;
@@ -8296,14 +8298,13 @@ var StateNode = React3.memo(({ data, selected, id }) => {
   const displayDescription = data.description;
   const status = data.status;
   const isDisabled = data.enabled === false;
-  const isTerminal = data.isTerminal === true;
+  data.isTerminal === true;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Node2,
     {
       className: cn(
         "relative flex flex-col items-center justify-center border border-border bg-card shadow-none transition-all duration-150 ease-out",
-        selected && "border-primary border-2",
-        isTerminal && "border-2 border-primary",
+        selected ? "border-primary border-2" : "border border-border",
         isDisabled && "opacity-50"
       ),
       "data-testid": `state-node-${id}`,
@@ -8381,17 +8382,17 @@ var TriggerNode = React3.memo(({ data, selected, id }) => {
     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",
+        "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 items-center gap-1.5 px-3 py-2", children: [
+      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: "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 })
+        /* @__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 })
         ] })
       ] })
     }
@@ -9383,7 +9384,6 @@ function WorkflowCanvasInner({
   onPaneClick,
   onNodeClick,
   onEdgeClick,
-  showMinimap = false,
   interactive = false,
   topLeft,
   topRight,
@@ -9476,8 +9476,7 @@ function WorkflowCanvasInner({
                 position: "bottom-left",
                 children: /* @__PURE__ */ jsxRuntime.jsx(Controls, {})
               }
-            ),
-            showMinimap && /* @__PURE__ */ jsxRuntime.jsx(react.MiniMap, { bgColor: "var(--sidebar)", nodeStrokeColor: "var(--border)" })
+            )
           ]
         }
       )
@@ -9487,6 +9486,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,
@@ -10501,6 +10544,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,
@@ -10528,5 +10578,6 @@ exports.SpecNavigator = SpecNavigator;
 exports.WorkflowBuilder = WorkflowBuilder;
 exports.WorkflowObservabilityFeature = WorkflowObservabilityFeature;
 exports.cn = cn;
+exports.getLayoutedElements = getLayoutedElements;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map