ai-design-system 0.1.84 → 0.1.85

package/components/ai-elements/canvas.tsx

@@ -7,16 +7,21 @@ type CanvasProps = ReactFlowProps & {
   children?: ReactNode;
 };
 
-export const Canvas = ({ children, ...props }: CanvasProps) => (
+export const Canvas = ({
+  children,
+  panOnDrag = false,
+  selectionOnDrag,
+  ...props
+}: CanvasProps) => (
   <ReactFlow
-    {...props}
     deleteKeyCode={["Backspace", "Delete"]}
     fitView
-    panOnDrag={false}
     panOnScroll
     proOptions={{ hideAttribution: true }}
-    selectionOnDrag={true}
     zoomOnDoubleClick={false}
+    panOnDrag={panOnDrag}
+    selectionOnDrag={selectionOnDrag !== undefined ? selectionOnDrag : !panOnDrag}
+    {...props}
   >
     <Background bgColor="var(--sidebar)" />
     <Controls />

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -47,6 +47,8 @@ function WorkflowCanvasInner({
   onNodeClick,
   onEdgeClick,
   interactive = false,
+  panOnDrag = false,
+  selectionOnDrag,
   topLeft,
   topRight,
   topCenter,
@@ -84,6 +86,8 @@ function WorkflowCanvasInner({
       }}
     >
       <Canvas
+        panOnDrag={panOnDrag}
+        selectionOnDrag={selectionOnDrag}
         className="bg-background [&_.react-flow\_\_handle]:opacity-0 [&_.react-flow\_\_handle]:pointer-events-none [&_.react-flow\_\_node:hover_.react-flow\_\_handle]:opacity-100 [&_.react-flow\_\_node:hover_.react-flow\_\_handle]:pointer-events-auto [&_.react-flow\_\_node.selected_.react-flow\_\_handle]:opacity-100 [&_.react-flow\_\_node.selected_.react-flow\_\_handle]:pointer-events-auto [&_.react-flow\_\_handle]:transition-opacity [&_.react-flow\_\_handle]:duration-150"
         connectionLineComponent={ConnectionLine}
         connectionMode={ConnectionMode.Strict}

package/components/features/NodeEditor/NodeEditor.tsx

@@ -52,6 +52,8 @@ export interface NodeEditorProps {
 
   showMinimap?: boolean;
   interactive?: boolean;
+  panOnDrag?: boolean | number[];
+  selectionOnDrag?: boolean;
   hideDefaultActions?: boolean;
   hideWorkflowName?: boolean;
   className?: string;
@@ -99,6 +101,8 @@ export function NodeEditor({
   extraActions,
   showMinimap,
   interactive = false,
+  panOnDrag = false,
+  selectionOnDrag,
   hideDefaultActions = false,
   hideWorkflowName = false,
   className,
@@ -159,6 +163,8 @@ export function NodeEditor({
         className="h-full w-full"
         edges={edges}
         interactive={interactive}
+        panOnDrag={panOnDrag}
+        selectionOnDrag={selectionOnDrag}
         nodes={highlightedNodes}
         showMinimap={showMinimap}
         topLeft={

package/components/features/NodeEditor/bookgeek.preview.json

@@ -23,7 +23,23 @@
             "label": "Get Started",
             "top": 779
           }
-        ]
+        ],
+        "action": {
+          "after": [
+            {
+              "stepId": "await-nav-welcome",
+              "actionType": "step/await-navigation",
+              "semantics": {
+                "label": "Await navigation from Welcome",
+                "description": "Pause and wait for user to trigger a navigation event"
+              },
+              "config": {
+                "screenId": "welcome",
+                "route": "/welcome"
+              }
+            }
+          ]
+        }
       }
     },
     {
@@ -61,7 +77,23 @@
             "label": "Sign Up",
             "top": 371
           }
-        ]
+        ],
+        "action": {
+          "after": [
+            {
+              "stepId": "await-nav-signup",
+              "actionType": "step/await-navigation",
+              "semantics": {
+                "label": "Await navigation from Sign Up",
+                "description": "Pause and wait for user to trigger a navigation event"
+              },
+              "config": {
+                "screenId": "signup",
+                "route": "/signup"
+              }
+            }
+          ]
+        }
       }
     },
     {
@@ -99,7 +131,23 @@
             "label": "Next",
             "top": 791
           }
-        ]
+        ],
+        "action": {
+          "after": [
+            {
+              "stepId": "await-nav-categories",
+              "actionType": "step/await-navigation",
+              "semantics": {
+                "label": "Await navigation from Categories",
+                "description": "Pause and wait for user to trigger a navigation event"
+              },
+              "config": {
+                "screenId": "categories",
+                "route": "/categories"
+              }
+            }
+          ]
+        }
       }
     },
     {
@@ -137,7 +185,23 @@
             "label": "Done",
             "top": 791
           }
-        ]
+        ],
+        "action": {
+          "after": [
+            {
+              "stepId": "await-nav-authors",
+              "actionType": "step/await-navigation",
+              "semantics": {
+                "label": "Await navigation from Authors",
+                "description": "Pause and wait for user to trigger a navigation event"
+              },
+              "config": {
+                "screenId": "authors",
+                "route": "/authors"
+              }
+            }
+          ]
+        }
       }
     },
     {
@@ -160,7 +224,23 @@
             "label": "Sign In",
             "top": 307
           }
-        ]
+        ],
+        "action": {
+          "after": [
+            {
+              "stepId": "await-nav-signin",
+              "actionType": "step/await-navigation",
+              "semantics": {
+                "label": "Await navigation from Sign In",
+                "description": "Pause and wait for user to trigger a navigation event"
+              },
+              "config": {
+                "screenId": "signin",
+                "route": "/signin"
+              }
+            }
+          ]
+        }
       }
     },
     {
@@ -183,7 +263,23 @@
             "label": "Sign Up",
             "top": 327
           }
-        ]
+        ],
+        "action": {
+          "after": [
+            {
+              "stepId": "await-nav-google-signup",
+              "actionType": "step/await-navigation",
+              "semantics": {
+                "label": "Await navigation from Google Sign Up",
+                "description": "Pause and wait for user to trigger a navigation event"
+              },
+              "config": {
+                "screenId": "google-signup",
+                "route": "/google-signup"
+              }
+            }
+          ]
+        }
       }
     },
     {
@@ -236,7 +332,23 @@
             "label": "Collection",
             "top": 826
           }
-        ]
+        ],
+        "action": {
+          "after": [
+            {
+              "stepId": "await-nav-home",
+              "actionType": "step/await-navigation",
+              "semantics": {
+                "label": "Await navigation from Home",
+                "description": "Pause and wait for user to trigger a navigation event"
+              },
+              "config": {
+                "screenId": "home",
+                "route": "/home"
+              }
+            }
+          ]
+        }
       }
     }
   ],
@@ -308,4 +420,4 @@
       "type": "straight"
     }
   ]
-}
+}

package/dist/index.cjs

@@ -13006,17 +13006,26 @@ var Controls = (_a) => {
   );
 };
 var Canvas = (_a) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  var _b = _a, {
+    children,
+    panOnDrag = false,
+    selectionOnDrag
+  } = _b, props = __objRest(_b, [
+    "children",
+    "panOnDrag",
+    "selectionOnDrag"
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react.ReactFlow,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
       deleteKeyCode: ["Backspace", "Delete"],
       fitView: true,
-      panOnDrag: false,
       panOnScroll: true,
       proOptions: { hideAttribution: true },
-      selectionOnDrag: true,
       zoomOnDoubleClick: false,
+      panOnDrag,
+      selectionOnDrag: selectionOnDrag !== void 0 ? selectionOnDrag : !panOnDrag
+    }, props), {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.Background, { bgColor: "var(--sidebar)" }),
         /* @__PURE__ */ jsxRuntime.jsx(Controls, {}),
@@ -13199,6 +13208,8 @@ function WorkflowCanvasInner({
   onNodeClick,
   onEdgeClick,
   interactive = false,
+  panOnDrag = false,
+  selectionOnDrag,
   topLeft,
   topRight,
   topCenter,
@@ -13235,6 +13246,8 @@ function WorkflowCanvasInner({
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         Canvas,
         {
+          panOnDrag,
+          selectionOnDrag,
           className: "bg-background [&_.react-flow\\_\\_handle]:opacity-0 [&_.react-flow\\_\\_handle]:pointer-events-none [&_.react-flow\\_\\_node:hover_.react-flow\\_\\_handle]:opacity-100 [&_.react-flow\\_\\_node:hover_.react-flow\\_\\_handle]:pointer-events-auto [&_.react-flow\\_\\_node.selected_.react-flow\\_\\_handle]:opacity-100 [&_.react-flow\\_\\_node.selected_.react-flow\\_\\_handle]:pointer-events-auto [&_.react-flow\\_\\_handle]:transition-opacity [&_.react-flow\\_\\_handle]:duration-150",
           connectionLineComponent: Connection,
           connectionMode: react.ConnectionMode.Strict,
@@ -13399,6 +13412,8 @@ function NodeEditor({
   extraActions,
   showMinimap,
   interactive = false,
+  panOnDrag = false,
+  selectionOnDrag,
   hideDefaultActions = false,
   hideWorkflowName = false,
   className,
@@ -13451,6 +13466,8 @@ function NodeEditor({
           className: "h-full w-full",
           edges,
           interactive,
+          panOnDrag,
+          selectionOnDrag,
           nodes: highlightedNodes,
           showMinimap,
           topLeft: showTopLeftToolbar ? /* @__PURE__ */ jsxRuntime.jsx(