ai-design-system 0.1.2 → 0.1.3

package/components/features/WorkflowBuilder/WorkflowBuilder.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Redo2, Save, Undo2, X } from "lucide-react";
+import { Redo2, Save, Undo2 } from "lucide-react";
 import { WorkflowToolbar, WorkflowToolbarActions } from "@/components/composites/WorkflowToolbar";
 import { WorkflowCanvas } from "@/components/blocks/WorkflowCanvas";
 import type { WorkflowNode, WorkflowEdge } from "@/components/blocks/WorkflowCanvas";
-import type { WorkflowVersion } from "@/components/composites/WorkflowToolbar";
+import type { ToolbarAction, WorkflowVersion } from "@/components/composites/WorkflowToolbar";
 import type { Connection, NodeChange, EdgeChange } from "@xyflow/react";
 
 export interface WorkflowBuilderProps {
@@ -27,10 +27,12 @@ export interface WorkflowBuilderProps {
   canUndo?: boolean;
   canRedo?: boolean;
   onSave?: () => void;
-  onCancel?: () => void;
   onUndo?: () => void;
   onRedo?: () => void;
 
+  /** Extra toolbar action groups prepended before the default undo/redo/save buttons. */
+  extraActions?: ToolbarAction[][];
+
   showMinimap?: boolean;
   interactive?: boolean;
   className?: string;
@@ -51,13 +53,27 @@ export function WorkflowBuilder({
   canUndo = false,
   canRedo = false,
   onSave,
-  onCancel,
   onUndo,
   onRedo,
+  extraActions,
   showMinimap,
   interactive = false,
   className,
 }: WorkflowBuilderProps) {
+  const defaultActionGroups: ToolbarAction[][] = [
+    [
+      { id: "undo", icon: <Undo2 className="size-4" />, title: "Undo", onClick: onUndo, disabled: !canUndo },
+      { id: "redo", icon: <Redo2 className="size-4" />, title: "Redo", onClick: onRedo, disabled: !canRedo },
+    ],
+    [
+      { id: "save", icon: <Save className="size-4" />, title: "Save", onClick: onSave, loading: isSaving, indicator: hasUnsavedChanges },
+    ],
+  ];
+
+  const allActionGroups = extraActions
+    ? [...extraActions, ...defaultActionGroups]
+    : defaultActionGroups;
+
   return (
     <div className="relative h-full w-full" data-testid="workflow-builder">
       <WorkflowCanvas
@@ -75,18 +91,7 @@ export function WorkflowBuilder({
           />
         }
         topRight={
-          <WorkflowToolbarActions
-            actionGroups={[
-              [
-                { id: "undo", icon: <Undo2 className="size-4" />, title: "Undo", onClick: onUndo, disabled: !canUndo },
-                { id: "redo", icon: <Redo2 className="size-4" />, title: "Redo", onClick: onRedo, disabled: !canRedo },
-              ],
-              [
-                { id: "save", icon: <Save className="size-4" />, title: "Save", onClick: onSave, loading: isSaving, indicator: hasUnsavedChanges },
-                { id: "cancel", icon: <X className="size-4" />, title: "Cancel", onClick: onCancel },
-              ],
-            ]}
-          />
+          <WorkflowToolbarActions actionGroups={allActionGroups} />
         }
         onConnect={onConnect}
         onEdgesChange={onEdgesChange}

package/components/features/WorkflowBuilder/index.ts

@@ -1,2 +1,3 @@
 export { WorkflowBuilder } from "./WorkflowBuilder";
 export type { WorkflowBuilderProps } from "./WorkflowBuilder";
+export type { ToolbarAction } from "@/components/composites/WorkflowToolbar";

package/dist/index.cjs

@@ -8108,13 +8108,23 @@ function WorkflowBuilder({
   canUndo = false,
   canRedo = false,
   onSave,
-  onCancel,
   onUndo,
   onRedo,
+  extraActions,
   showMinimap,
   interactive = false,
   className
 }) {
+  const defaultActionGroups = [
+    [
+      { id: "undo", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { className: "size-4" }), title: "Undo", onClick: onUndo, disabled: !canUndo },
+      { id: "redo", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { className: "size-4" }), title: "Redo", onClick: onRedo, disabled: !canRedo }
+    ],
+    [
+      { id: "save", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "size-4" }), title: "Save", onClick: onSave, loading: isSaving, indicator: hasUnsavedChanges }
+    ]
+  ];
+  const allActionGroups = extraActions ? [...extraActions, ...defaultActionGroups] : defaultActionGroups;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full w-full", "data-testid": "workflow-builder", children: /* @__PURE__ */ jsxRuntime.jsx(
     WorkflowCanvas,
     {
@@ -8132,21 +8142,7 @@ function WorkflowBuilder({
           onVersionSelect
         }
       ),
-      topRight: /* @__PURE__ */ jsxRuntime.jsx(
-        WorkflowToolbarActions,
-        {
-          actionGroups: [
-            [
-              { id: "undo", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { className: "size-4" }), title: "Undo", onClick: onUndo, disabled: !canUndo },
-              { id: "redo", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { className: "size-4" }), title: "Redo", onClick: onRedo, disabled: !canRedo }
-            ],
-            [
-              { id: "save", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "size-4" }), title: "Save", onClick: onSave, loading: isSaving, indicator: hasUnsavedChanges },
-              { id: "cancel", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4" }), title: "Cancel", onClick: onCancel }
-            ]
-          ]
-        }
-      ),
+      topRight: /* @__PURE__ */ jsxRuntime.jsx(WorkflowToolbarActions, { actionGroups: allActionGroups }),
       onConnect,
       onEdgesChange,
       onNodesChange