ai-design-system 0.1.2 → 0.1.4

package/components/composites/WorkflowToolbar/WorkflowToolbar.tsx

@@ -10,6 +10,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/primitives/DropdownMenu";
+import { Icon } from "@/components/primitives/Icon";
 import { cn } from "@/lib/utils";
 
 // ---------------------------------------------------------------------------
@@ -23,8 +24,12 @@ export interface WorkflowVersion {
 
 export interface ToolbarAction {
   id: string;
-  /** Icon element to render inside the button */
-  icon: ReactNode;
+  /**
+   * Icon to render inside the button.
+   * Pass a string icon name from the icon registry (preferred — no icon package needed in consumer)
+   * or a ReactNode for custom icons.
+   */
+  icon: string | ReactNode;
   /** Tooltip text */
   title: string;
   onClick?: () => void;
@@ -76,6 +81,8 @@ export function WorkflowToolbarActions({
             >
               {action.loading ? (
                 <Loader2 className="size-4 animate-spin" />
+              ) : typeof action.icon === 'string' ? (
+                <Icon name={action.icon} size="sm" />
               ) : (
                 action.icon
               )}

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

@@ -2296,6 +2296,11 @@ var defaultIcons = {
     name: "file-text",
     viewBox: "0 0 24 24",
     path: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6M16 13H8m8 4H8m8-8H8"
+  },
+  "message-square": {
+    name: "message-square",
+    viewBox: "0 0 24 24",
+    path: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"
   }
 };
 var IconRegistry = class {
@@ -7165,7 +7170,7 @@ function WorkflowToolbarActions({
       title: action.title,
       variant: "secondary",
       children: [
-        action.loading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin" }) : action.icon,
+        action.loading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin" }) : typeof action.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "sm" }) : action.icon,
         action.indicator && !action.loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1.5 right-1.5 size-2 rounded-full bg-primary" })
       ]
     },
@@ -8108,13 +8113,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 +8147,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