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

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,19 @@ 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
-}) {
-  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 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 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%" };
-    }
-  };
-  return /* @__PURE__ */ jsx2("div", { className: cn("ods-node-resizer"), "data-flow-no-drag": "true", children: ["nw", "ne", "sw", "se"].map((corner) => /* @__PURE__ */ jsx2(
-    "div",
-    {
-      style: handleStyle(corner),
-      onPointerDown: (e) => beginResize(e, corner),
-      onPointerMove: onMove,
-      onPointerUp: onUp,
-      onPointerCancel: onUp,
-      "aria-label": `Resize ${corner}`
-    },
-    corner
-  )) });
-}
-function cursorFor(corner) {
-  switch (corner) {
-    case "nw":
-    case "se":
-      return "nwse-resize";
-    case "ne":
-    case "sw":
-      return "nesw-resize";
-  }
-}
-
 // src/workflow/components/NodeToolbar/NodeToolbar.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function NodeToolbar({
   isVisible,
   position = "top",
@@ -813,7 +633,7 @@ function NodeToolbar({
   const show = isVisible ?? node.selected;
   if (!show) return null;
   const inverseScale = 1 / viewport.zoom;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       className: cn("ods-node-toolbar", `ods-node-toolbar--${position}`, className),
@@ -825,7 +645,7 @@ function NodeToolbar({
       onPointerDown: (e) => e.stopPropagation(),
       onMouseDown: (e) => e.stopPropagation(),
       onClick: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx2(
         "div",
         {
           className: "ods-node-toolbar__inner",
@@ -1024,6 +844,7 @@ export {
   useNodeData,
   useNodes,
   useSelection,
-  useViewport
+  useViewport,
+  useViewportOrNull
 };
 //# sourceMappingURL=workflow.js.map