@octaviaflow/core 3.0.18-beta.2 → 3.0.18-beta.21

package/dist/workflow.js

@@ -12,6 +12,7 @@ import {
   GroupNode,
   Handle,
   HttpRequestNode,
+  NodeResizer,
   OutputNode,
   ParallelNode,
   StickyNode,
@@ -35,10 +36,21 @@ import {
   smoothStepPath,
   stepPath,
   straightPath,
+  useConnection,
+  useEdgeById,
+  useEdges,
   useFlow,
   useFlowNodeContext,
-  useFlowStore
-} from "./chunk-2RD5OERK.js";
+  useFlowSelector,
+  useIsEdgeSelected,
+  useIsNodeSelected,
+  useNodeById,
+  useNodeData,
+  useNodes,
+  useSelection,
+  useViewport,
+  useViewportOrNull
+} from "./chunk-2ZIOFEIS.js";
 import {
   cn
 } from "./chunk-ZAUUGK2Y.js";
@@ -339,60 +351,6 @@ function createElkEngine(elk, defaults = {}) {
   };
 }
 
-// src/workflow/store/selectors.ts
-import { useMemo as useMemo2, useSyncExternalStore } from "react";
-function useFlowSelector(selector, isEqual = Object.is) {
-  void isEqual;
-  const store = useFlowStore();
-  return useSyncExternalStore(
-    store.subscribe,
-    () => selector(store.getSnapshot()),
-    () => selector(store.getSnapshot())
-  );
-}
-function useNodes() {
-  return useFlowSelector((s) => s.nodes);
-}
-function useEdges() {
-  return useFlowSelector((s) => s.edges);
-}
-function useViewport() {
-  return useFlowSelector((s) => s.viewport);
-}
-function useNodeById(id) {
-  return useFlowSelector((s) => s.nodes.find((n) => n.id === id));
-}
-function useNodeData(id) {
-  return useFlowSelector(
-    (s) => s.nodes.find((n) => n.id === id)?.data ?? void 0
-  );
-}
-function useEdgeById(id) {
-  return useFlowSelector((s) => s.edges.find((e) => e.id === id));
-}
-function useIsNodeSelected(id) {
-  return useFlowSelector((s) => s.selectedNodeIds.has(id));
-}
-function useIsEdgeSelected(id) {
-  return useFlowSelector((s) => s.selectedEdgeIds.has(id));
-}
-function useConnection() {
-  return useFlowSelector((s) => s.connection);
-}
-function useSelection() {
-  const nodes = useNodes();
-  const edges = useEdges();
-  const selectedNodeIds = useFlowSelector((s) => s.selectedNodeIds);
-  const selectedEdgeIds = useFlowSelector((s) => s.selectedEdgeIds);
-  return useMemo2(
-    () => ({
-      nodes: nodes.filter((n) => selectedNodeIds.has(n.id)),
-      edges: edges.filter((e) => selectedEdgeIds.has(e.id))
-    }),
-    [nodes, edges, selectedNodeIds, selectedEdgeIds]
-  );
-}
-
 // src/workflow/components/ConfigPanel/ConfigPanel.tsx
 import {
   useCallback as useCallback3,
@@ -400,7 +358,7 @@ import {
   useRef as useRef3,
   useState as useState3
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var SAVE_STATE_LABEL = {
   clean: "Saved",
   dirty: "Unsaved changes",
@@ -418,26 +376,27 @@ var SAVE_STATE_DOT = {
 function ConfigPanel({
   open = true,
   title,
-  kindLabel,
   icon,
+  headerActions,
   banner,
   tabs,
   activeTab: controlledActive,
   defaultActiveTab,
   onTabChange,
-  saveState = "clean",
+  saveState,
   onTitleChange,
   onClose,
   onSave,
   onCancel,
+  padding = 12,
   resizable = true,
-  defaultWidth = 360,
-  minWidth = 280,
+  defaultWidth = 400,
+  minWidth = 400,
   maxWidth = 720,
   maxWidthContainerInset = 80,
   variant = "pinned",
   children,
-  footer,
+  footerActions,
   className,
   style
 }) {
@@ -534,55 +493,53 @@ function ConfigPanel({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsxs("header", { className: "ods-flow-config-panel__header", children: [
-          kindLabel && /* @__PURE__ */ jsx("span", { className: "ods-flow-config-panel__breadcrumb", children: kindLabel }),
-          /* @__PURE__ */ jsxs("div", { className: "ods-flow-config-panel__title-row", children: [
-            icon && /* @__PURE__ */ jsx("span", { className: "ods-flow-config-panel__icon", children: icon }),
-            editingTitle ? /* @__PURE__ */ jsx(
-              "input",
-              {
-                className: "ods-flow-config-panel__title-input",
-                value: draftTitle,
-                autoFocus: true,
-                onChange: (e) => setDraftTitle(e.target.value),
-                onBlur: () => commitTitle(draftTitle),
-                onKeyDown: titleKeyDown,
-                "aria-label": "Edit title"
-              }
-            ) : /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "ods-flow-config-panel__title",
-                onDoubleClick: () => {
-                  if (!onTitleChange) return;
-                  setDraftTitle(title ?? "");
-                  setEditingTitle(true);
-                },
-                title: onTitleChange ? "Double-click to rename" : void 0,
-                children: title ?? "Untitled"
-              }
-            ),
-            onClose && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "ods-flow-config-panel__close",
-                onClick: onClose,
-                "aria-label": "Close panel",
-                children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    d: "M3 3l8 8M11 3l-8 8",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round"
-                  }
-                ) })
-              }
-            )
-          ] })
-        ] }),
+        /* @__PURE__ */ jsx("header", { className: "ods-flow-config-panel__header", children: /* @__PURE__ */ jsxs("div", { className: "ods-flow-config-panel__title-row", children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "ods-flow-config-panel__icon", children: icon }),
+          editingTitle ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "ods-flow-config-panel__title-input",
+              value: draftTitle,
+              autoFocus: true,
+              onChange: (e) => setDraftTitle(e.target.value),
+              onBlur: () => commitTitle(draftTitle),
+              onKeyDown: titleKeyDown,
+              "aria-label": "Edit title"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-config-panel__title",
+              onDoubleClick: () => {
+                if (!onTitleChange) return;
+                setDraftTitle(title ?? "");
+                setEditingTitle(true);
+              },
+              title: onTitleChange ? "Double-click to rename" : void 0,
+              children: title ?? "Untitled"
+            }
+          ),
+          headerActions && /* @__PURE__ */ jsx("div", { className: "ods-flow-config-panel__header-actions", children: headerActions }),
+          onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-config-panel__close",
+              onClick: onClose,
+              "aria-label": "Close panel",
+              children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M3 3l8 8M11 3l-8 8",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round"
+                }
+              ) })
+            }
+          )
+        ] }) }),
         tabs && tabs.length > 1 && /* @__PURE__ */ jsx("nav", { className: "ods-flow-config-panel__tabs", role: "tablist", children: tabs.map((t) => /* @__PURE__ */ jsxs(
           "button",
           {
@@ -603,9 +560,17 @@ function ConfigPanel({
           t.id
         )) }),
         banner && /* @__PURE__ */ jsx("div", { className: "ods-flow-config-panel__banner", children: banner }),
-        /* @__PURE__ */ jsx("div", { className: "ods-flow-config-panel__body", role: "tabpanel", children: tabs ? activeTab?.content : children }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ods-flow-config-panel__body",
+            role: "tabpanel",
+            style: { padding },
+            children: tabs ? activeTab?.content : children
+          }
+        ),
         /* @__PURE__ */ jsxs("footer", { className: "ods-flow-config-panel__footer", children: [
-          /* @__PURE__ */ jsxs(
+          saveState && /* @__PURE__ */ jsxs(
             "span",
             {
               className: cn(
@@ -625,7 +590,7 @@ function ConfigPanel({
               ]
             }
           ),
-          footer ?? /* @__PURE__ */ jsxs("div", { className: "ods-flow-config-panel__footer-actions", children: [
+          /* @__PURE__ */ jsx("div", { className: "ods-flow-config-panel__footer-actions", children: footerActions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
             onCancel && /* @__PURE__ */ jsx(
               "button",
               {
@@ -641,164 +606,249 @@ function ConfigPanel({
                 type: "button",
                 className: "ods-flow-config-panel__btn ods-flow-config-panel__btn--primary",
                 onClick: onSave,
-                disabled: saveState === "saving" || saveState === "clean",
+                disabled: saveState === "saving",
                 children: saveState === "saving" ? "Saving\u2026" : "Save"
               }
             )
-          ] })
+          ] }) })
         ] })
       ]
     }
   );
 }
 
-// src/workflow/components/NodeResizer/NodeResizer.tsx
-import { useRef as useRef4 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function NodeResizer({
-  isVisible,
-  minWidth = 80,
-  minHeight = 60,
-  maxWidth,
-  maxHeight,
-  keepAspectRatio = false,
-  onResize,
-  onResizeEnd,
-  color
+// src/workflow/components/FxPanel/FxPanel.tsx
+import {
+  useMemo as useMemo2,
+  useState as useState4
+} from "react";
+import {
+  ChevronRightIcon,
+  CloseIcon,
+  SearchIcon
+} from "@octaviaflow/icons";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var KIND_GLYPH = {
+  function: "\u0192",
+  variable: "\u2B21"
+};
+function FxPanel({
+  categories,
+  title = "FX / IO",
+  hint = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    "Drag items into any input field with the ",
+    /* @__PURE__ */ jsx2("strong", { children: "FX" }),
+    " indicator"
+  ] }),
+  search: controlledSearch,
+  defaultSearch = "",
+  onSearchChange,
+  expandedCategory: controlledExpanded,
+  defaultExpandedCategory,
+  onExpandedCategoryChange,
+  onClose,
+  onItemDragStart,
+  onItemSelect,
+  width = 292,
+  emptyLabel = "No matches",
+  searchPlaceholder = "Search functions & variables\u2026",
+  className,
+  style
 }) {
-  const { node, selected } = useFlowNodeContext();
-  const viewport = useViewport();
-  const flow = useFlow();
-  const dragRef = useRef4(null);
-  const show = isVisible ?? selected;
-  if (!show) return null;
-  const beginResize = (e, corner) => {
-    e.preventDefault();
-    e.stopPropagation();
-    e.target.setPointerCapture(e.pointerId);
-    const w = node.width ?? DEFAULT_NODE_WIDTH;
-    const h = node.height ?? DEFAULT_NODE_HEIGHT;
-    dragRef.current = {
-      pointerId: e.pointerId,
-      corner,
-      startClientX: e.clientX,
-      startClientY: e.clientY,
-      startWidth: w,
-      startHeight: h,
-      startX: node.position.x,
-      startY: node.position.y,
-      aspect: w / Math.max(1, h)
-    };
-  };
-  const onMove = (e) => {
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== e.pointerId) return;
-    const dx = (e.clientX - drag.startClientX) / viewport.zoom;
-    const dy = (e.clientY - drag.startClientY) / viewport.zoom;
-    let nextW = drag.startWidth;
-    let nextH = drag.startHeight;
-    let nextX = drag.startX;
-    let nextY = drag.startY;
-    switch (drag.corner) {
-      case "se":
-        nextW = drag.startWidth + dx;
-        nextH = drag.startHeight + dy;
-        break;
-      case "sw":
-        nextW = drag.startWidth - dx;
-        nextH = drag.startHeight + dy;
-        nextX = drag.startX + dx;
-        break;
-      case "ne":
-        nextW = drag.startWidth + dx;
-        nextH = drag.startHeight - dy;
-        nextY = drag.startY + dy;
-        break;
-      case "nw":
-        nextW = drag.startWidth - dx;
-        nextH = drag.startHeight - dy;
-        nextX = drag.startX + dx;
-        nextY = drag.startY + dy;
-        break;
-    }
-    if (keepAspectRatio) {
-      nextH = nextW / drag.aspect;
-      if (drag.corner === "nw" || drag.corner === "ne") {
-        nextY = drag.startY + (drag.startHeight - nextH);
-      }
-    }
-    nextW = Math.max(minWidth, maxWidth ? Math.min(maxWidth, nextW) : nextW);
-    nextH = Math.max(minHeight, maxHeight ? Math.min(maxHeight, nextH) : nextH);
-    flow.updateNode(node.id, {
-      width: nextW,
-      height: nextH,
-      position: { x: nextX, y: nextY }
-    });
-    onResize?.({ width: nextW, height: nextH });
+  const [internalSearch, setInternalSearch] = useState4(defaultSearch);
+  const search = controlledSearch ?? internalSearch;
+  const setSearch = (next) => {
+    if (controlledSearch === void 0) setInternalSearch(next);
+    onSearchChange?.(next);
   };
-  const onUp = (e) => {
-    if (dragRef.current?.pointerId === e.pointerId) {
-      const cur = flow.getNode(node.id);
-      if (cur) {
-        onResizeEnd?.({
-          width: cur.width ?? DEFAULT_NODE_WIDTH,
-          height: cur.height ?? DEFAULT_NODE_HEIGHT
-        });
-      }
-      dragRef.current = null;
-    }
+  const [internalExpanded, setInternalExpanded] = useState4(
+    defaultExpandedCategory !== void 0 ? defaultExpandedCategory : categories.find((c) => c.items.length > 0)?.id ?? null
+  );
+  const expanded = controlledExpanded ?? internalExpanded;
+  const setExpanded = (id) => {
+    if (controlledExpanded === void 0) setInternalExpanded(id);
+    onExpandedCategoryChange?.(id);
   };
-  const handleColor = color ?? "var(--ods-accent)";
-  const handleStyle = (corner) => {
-    const base = {
-      position: "absolute",
-      width: 12,
-      height: 12,
-      background: "var(--ods-surface-canvas)",
-      border: `2px solid ${handleColor}`,
-      borderRadius: 2,
-      cursor: cursorFor(corner),
-      touchAction: "none",
-      // Place each handle so its CENTRE sits on the corresponding corner.
-      transform: "translate(-50%, -50%)"
-    };
-    switch (corner) {
-      case "nw":
-        return { ...base, top: 0, left: 0 };
-      case "ne":
-        return { ...base, top: 0, left: "100%" };
-      case "sw":
-        return { ...base, top: "100%", left: 0 };
-      case "se":
-        return { ...base, top: "100%", left: "100%" };
+  const [draggingId, setDraggingId] = useState4(null);
+  const filtered = useMemo2(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return categories;
+    return categories.map((cat) => {
+      if (cat.label.toLowerCase().includes(q)) return cat;
+      const items = cat.items.filter(
+        (it) => it.label.toLowerCase().includes(q) || (it.description?.toLowerCase().includes(q) ?? false)
+      );
+      return { ...cat, items };
+    }).filter((cat) => cat.items.length > 0);
+  }, [categories, search]);
+  const hasResults = filtered.length > 0;
+  const handleDragStart = (item, category) => (e) => {
+    setDraggingId(item.id);
+    if (onItemDragStart) {
+      onItemDragStart(item, category, e);
+    } else {
+      e.dataTransfer.setData("text/plain", item.insertValue);
+      e.dataTransfer.setData("application/x-fx-insert", item.insertValue);
+      e.dataTransfer.setData(
+        "application/x-fx-type",
+        category.kind ?? "function"
+      );
+      e.dataTransfer.effectAllowed = "copy";
     }
   };
-  return /* @__PURE__ */ jsx2("div", { className: cn("ods-node-resizer"), "data-flow-no-drag": "true", children: ["nw", "ne", "sw", "se"].map((corner) => /* @__PURE__ */ jsx2(
-    "div",
+  return /* @__PURE__ */ jsxs2(
+    "aside",
     {
-      style: handleStyle(corner),
-      onPointerDown: (e) => beginResize(e, corner),
-      onPointerMove: onMove,
-      onPointerUp: onUp,
-      onPointerCancel: onUp,
-      "aria-label": `Resize ${corner}`
-    },
-    corner
-  )) });
+      className: cn("ods-flow-fx-panel", className),
+      style: { width, ...style },
+      "aria-label": typeof title === "string" ? title : "FX / IO",
+      children: [
+        /* @__PURE__ */ jsxs2("header", { className: "ods-flow-fx-panel__header", children: [
+          /* @__PURE__ */ jsx2("h3", { className: "ods-flow-fx-panel__title", children: title }),
+          onClose && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-fx-panel__close",
+              onClick: onClose,
+              "aria-label": "Close FX panel",
+              children: /* @__PURE__ */ jsx2(CloseIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "ods-flow-fx-panel__search", children: [
+          /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__search-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(SearchIcon, { size: "sm" }) }),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "text",
+              className: "ods-flow-fx-panel__search-input",
+              placeholder: searchPlaceholder,
+              "aria-label": "Search functions and variables",
+              value: search,
+              onChange: (e) => setSearch(e.target.value)
+            }
+          ),
+          search && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-fx-panel__search-clear",
+              onClick: () => setSearch(""),
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ jsx2(CloseIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        hint && /* @__PURE__ */ jsx2("p", { className: "ods-flow-fx-panel__hint", children: hint }),
+        /* @__PURE__ */ jsxs2("div", { className: "ods-flow-fx-panel__list", children: [
+          filtered.map((cat) => {
+            const isOpen = expanded === cat.id;
+            const kind = cat.kind ?? "function";
+            return /* @__PURE__ */ jsxs2("div", { className: "ods-flow-fx-panel__category", children: [
+              /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  className: "ods-flow-fx-panel__category-header",
+                  "aria-expanded": isOpen,
+                  onClick: () => setExpanded(isOpen ? null : cat.id),
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      ChevronRightIcon,
+                      {
+                        size: "sm",
+                        className: cn(
+                          "ods-flow-fx-panel__chevron",
+                          isOpen && "ods-flow-fx-panel__chevron--open"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs2(
+                      "span",
+                      {
+                        className: cn(
+                          "ods-flow-fx-panel__badge",
+                          `ods-flow-fx-panel__badge--${kind}`
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx2(
+                            "span",
+                            {
+                              className: "ods-flow-fx-panel__badge-glyph",
+                              "aria-hidden": "true",
+                              children: KIND_GLYPH[kind]
+                            }
+                          ),
+                          cat.label
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__count", children: cat.items.length })
+                  ]
+                }
+              ),
+              isOpen && /* @__PURE__ */ jsx2("div", { className: "ods-flow-fx-panel__items", children: cat.items.map((item) => /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  className: cn(
+                    "ods-flow-fx-panel__item",
+                    draggingId === item.id && "ods-flow-fx-panel__item--dragging"
+                  ),
+                  draggable: true,
+                  title: item.insertValue,
+                  onDragStart: handleDragStart(item, cat),
+                  onDragEnd: () => setDraggingId(null),
+                  onClick: onItemSelect ? () => onItemSelect(item, cat) : void 0,
+                  children: [
+                    /* @__PURE__ */ jsx2("code", { className: "ods-flow-fx-panel__item-label", children: item.label }),
+                    item.description && /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__item-desc", children: item.description })
+                  ]
+                },
+                item.id
+              )) })
+            ] }, cat.id);
+          }),
+          !hasResults && /* @__PURE__ */ jsx2("div", { className: "ods-flow-fx-panel__empty", children: emptyLabel })
+        ] })
+      ]
+    }
+  );
 }
-function cursorFor(corner) {
-  switch (corner) {
-    case "nw":
-    case "se":
-      return "nwse-resize";
-    case "ne":
-    case "sw":
-      return "nesw-resize";
-  }
+
+// src/workflow/components/FxPanel/FxToggleButton.tsx
+import { FunctionIcon } from "@octaviaflow/icons";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function FxToggleButton({
+  active = false,
+  label = "FX",
+  className,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      ...rest,
+      type,
+      className: cn(
+        "ods-flow-fx-toggle",
+        active && "ods-flow-fx-toggle--active",
+        label == null && "ods-flow-fx-toggle--icon-only",
+        className
+      ),
+      "aria-pressed": active,
+      title: active ? "Hide FX / IO" : "Show FX / IO",
+      children: [
+        /* @__PURE__ */ jsx3(FunctionIcon, { size: "sm", className: "ods-flow-fx-toggle__icon" }),
+        label != null && /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-toggle__label", children: label })
+      ]
+    }
+  );
 }
 
 // src/workflow/components/NodeToolbar/NodeToolbar.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function NodeToolbar({
   isVisible,
   position = "top",
@@ -813,7 +863,7 @@ function NodeToolbar({
   const show = isVisible ?? node.selected;
   if (!show) return null;
   const inverseScale = 1 / viewport.zoom;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: cn("ods-node-toolbar", `ods-node-toolbar--${position}`, className),
@@ -825,7 +875,7 @@ function NodeToolbar({
       onPointerDown: (e) => e.stopPropagation(),
       onMouseDown: (e) => e.stopPropagation(),
       onClick: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx4(
         "div",
         {
           className: "ods-node-toolbar__inner",
@@ -978,6 +1028,8 @@ export {
   FlowEdge,
   FlowNode,
   ForEachNode,
+  FxPanel,
+  FxToggleButton,
   GroupNode,
   Handle,
   HttpRequestNode,
@@ -1024,6 +1076,7 @@ export {
   useNodeData,
   useNodes,
   useSelection,
-  useViewport
+  useViewport,
+  useViewportOrNull
 };
 //# sourceMappingURL=workflow.js.map