@01.software/sdk 0.4.3-dev.260324.6dc30aa → 0.5.0

package/dist/ui/flow.cjs

@@ -78,12 +78,11 @@ __export(Flow_exports, {
   getNodeBounds: () => getNodeBounds,
   isDynamicNode: () => isDynamicNode,
   isFrameNode: () => isFrameNode,
+  prefetchFlow: () => prefetchFlow,
   useFlow: () => useFlow,
   useFlowData: () => useFlowData
 });
 module.exports = __toCommonJS(Flow_exports);
-var import_react4 = __toESM(require("react"), 1);
-var import_react5 = require("@xyflow/react");
 
 // src/ui/Flow/types.ts
 function isDynamicNode(node) {
@@ -251,6 +250,44 @@ function useFlow(options) {
   };
 }
 
+// src/ui/Flow/prefetchFlow.ts
+function prefetchFlow(options) {
+  return __async(this, null, function* () {
+    var _a;
+    const { client, slug, id } = options;
+    const identifier = (_a = id != null ? id : slug) != null ? _a : "";
+    yield Promise.all([
+      client.queryClient.prefetchQuery({
+        queryKey: collectionKeys("flows").detail(identifier),
+        queryFn: () => __async(null, null, function* () {
+          if (id) return client.from("flows").findById(id);
+          const result = yield client.from("flows").find({
+            where: { slug: { equals: slug } },
+            limit: 1
+          });
+          const doc = result.docs[0];
+          if (!doc) throw new Error(`Flow not found: ${slug}`);
+          return doc;
+        })
+      }),
+      client.queryClient.prefetchQuery({
+        queryKey: collectionKeys("flow-node-types").lists(),
+        queryFn: () => __async(null, null, function* () {
+          const result = yield client.from("flow-node-types").find({ limit: 100 });
+          return result.docs;
+        })
+      }),
+      client.queryClient.prefetchQuery({
+        queryKey: collectionKeys("flow-edge-types").lists(),
+        queryFn: () => __async(null, null, function* () {
+          const result = yield client.from("flow-edge-types").find({ limit: 100 });
+          return result.docs;
+        })
+      })
+    ]);
+  });
+}
+
 // src/ui/Flow/useFlowData.ts
 var import_react2 = require("react");
 function useFlowData(options) {
@@ -423,7 +460,7 @@ function validateTemplateCode(code) {
   return !BLOCKED_PATTERNS.some((pattern) => pattern.test(code));
 }
 function compileTemplate(code, slug) {
-  const cacheKey = `${slug}:${code.length}:${hashCode(code)}:${code.slice(0, 64)}`;
+  const cacheKey = `${slug}:${hashCode(code)}`;
   if (componentCache.has(cacheKey)) {
     const cached = componentCache.get(cacheKey);
     componentCache.delete(cacheKey);
@@ -477,7 +514,15 @@ function clearTemplateCache() {
   componentCache.clear();
 }
 
-// src/ui/Flow/index.tsx
+// src/ui/Flow/FlowRenderer.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react10 = require("@xyflow/react");
+
+// src/ui/Flow/node-types-factory.tsx
+var import_react5 = __toESM(require("react"), 1);
+
+// src/ui/Flow/node-renderers.tsx
+var import_react4 = __toESM(require("react"), 1);
 function sanitizeUrl(url) {
   if (!url) return url;
   try {
@@ -488,11 +533,6 @@ function sanitizeUrl(url) {
     return void 0;
   }
 }
-function toMarkerType(value) {
-  if (value === "arrow") return import_react5.MarkerType.Arrow;
-  if (value === "arrowclosed") return import_react5.MarkerType.ArrowClosed;
-  return void 0;
-}
 function renderFieldValue(key, val, fieldDef) {
   if (val == null || val === "") return null;
   const fieldType = fieldDef == null ? void 0 : fieldDef.fieldType;
@@ -574,10 +614,7 @@ function EnhancedDynamicNode({
         "div",
         {
           className: `flow-node flow-node--${typeDef.slug}${typeDef.transparentBackground ? " flow-node--transparent-bg" : ""}`,
-          style: {
-            width: "100%",
-            height: "100%"
-          }
+          style: { width: "100%", height: "100%" }
         },
         /* @__PURE__ */ import_react4.default.createElement(TemplateErrorBoundary, { resetKey: typeDef.template }, /* @__PURE__ */ import_react4.default.createElement(
           Component,
@@ -586,8 +623,8 @@ function EnhancedDynamicNode({
             label: data.label,
             color: typeDef.color,
             nodeTypeSlug: typeDef.slug,
-            width: width != null ? width : typeDef.defaultSize.width,
-            height: height != null ? height : typeDef.defaultSize.height
+            width: width || typeDef.defaultSize.width,
+            height: height || typeDef.defaultSize.height
           }
         ))
       );
@@ -613,7 +650,7 @@ function EnhancedDynamicNode({
 function DefaultFrameNode({ data }) {
   var _a, _b, _c, _d;
   const d = data;
-  const baseColor = (_a = d.color) != null ? _a : "rgba(128,128,128,0.15)";
+  const baseColor = (_a = d.color) != null ? _a : "rgb(128,128,128)";
   const padding = (_b = d.padding) != null ? _b : 20;
   const borderStyle = (_c = d.borderStyle) != null ? _c : "dashed";
   const opacity = (_d = d.opacity) != null ? _d : 0.15;
@@ -647,43 +684,42 @@ function DefaultFrameNode({ data }) {
     )
   );
 }
+
+// src/ui/Flow/node-types-factory.tsx
 function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode) {
   const types = {};
   types.dynamic = ((props) => {
     const d = props.data;
     const typeDef = nodeTypeDefsMap == null ? void 0 : nodeTypeDefsMap.get(d.nodeTypeSlug);
     const CustomRenderer = nodeRenderers == null ? void 0 : nodeRenderers[d.nodeTypeSlug];
-    let content;
-    if (CustomRenderer) {
-      content = /* @__PURE__ */ import_react4.default.createElement(
-        CustomRenderer,
-        {
-          id: props.id,
-          nodeTypeSlug: d.nodeTypeSlug,
-          label: d.label,
-          fields: d.fields,
-          nodeTypeDef: typeDef
-        }
-      );
-    } else if (typeDef) {
-      content = /* @__PURE__ */ import_react4.default.createElement(EnhancedDynamicNode, { data: d, typeDef, width: props.width, height: props.height });
-    } else {
-      content = /* @__PURE__ */ import_react4.default.createElement(DefaultDynamicNode, __spreadValues({}, props));
-    }
+    const defaultRender = typeDef ? /* @__PURE__ */ import_react5.default.createElement(
+      EnhancedDynamicNode,
+      {
+        data: d,
+        typeDef,
+        width: props.width,
+        height: props.height
+      }
+    ) : /* @__PURE__ */ import_react5.default.createElement(DefaultDynamicNode, __spreadValues({}, props));
+    const slotProps = {
+      id: props.id,
+      nodeTypeSlug: d.nodeTypeSlug,
+      label: d.label,
+      fields: d.fields,
+      nodeTypeDef: typeDef,
+      selected: props.selected,
+      width: props.width,
+      height: props.height,
+      defaultRender
+    };
+    let content = CustomRenderer ? /* @__PURE__ */ import_react5.default.createElement(CustomRenderer, __spreadValues({}, slotProps)) : defaultRender;
     if (renderNode) {
-      const slotProps = {
-        id: props.id,
-        nodeTypeSlug: d.nodeTypeSlug,
-        label: d.label,
-        fields: d.fields,
-        nodeTypeDef: typeDef
-      };
       const result = renderNode(slotProps, content);
       if (result !== null) content = result;
     }
     if (nodeWrapper) {
       const Wrapper = nodeWrapper;
-      content = /* @__PURE__ */ import_react4.default.createElement(
+      content = /* @__PURE__ */ import_react5.default.createElement(
         Wrapper,
         {
           id: props.id,
@@ -700,7 +736,7 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
   types.frame = frameRenderer ? ((props) => {
     const d = props.data;
     const Renderer = frameRenderer;
-    return /* @__PURE__ */ import_react4.default.createElement(
+    return /* @__PURE__ */ import_react5.default.createElement(
       Renderer,
       {
         id: props.id,
@@ -708,20 +744,23 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
         color: d.color,
         padding: d.padding,
         borderStyle: d.borderStyle,
-        opacity: d.opacity
+        opacity: d.opacity,
+        width: props.width,
+        height: props.height
       }
     );
   }) : DefaultFrameNode;
   return types;
 }
 function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
-  if (!edgeRenderers || Object.keys(edgeRenderers).length === 0) return void 0;
+  if (!edgeRenderers || Object.keys(edgeRenderers).length === 0)
+    return void 0;
   const types = {};
   for (const [slug, Renderer] of Object.entries(edgeRenderers)) {
     types[slug] = ((props) => {
       var _a;
       const def = edgeTypeDefsMap == null ? void 0 : edgeTypeDefsMap.get(slug);
-      return /* @__PURE__ */ import_react4.default.createElement(
+      return /* @__PURE__ */ import_react5.default.createElement(
         Renderer,
         {
           id: props.id,
@@ -738,22 +777,92 @@ function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
   }
   return types;
 }
+
+// src/ui/Flow/edge-styles.ts
+var import_react6 = require("@xyflow/react");
+function toMarkerType(value) {
+  if (value === "arrow") return import_react6.MarkerType.Arrow;
+  if (value === "arrowclosed") return import_react6.MarkerType.ArrowClosed;
+  return void 0;
+}
+var EDGE_TYPE_MAP = {
+  step: "step",
+  smoothstep: "smoothstep",
+  bezier: "default",
+  default: "default"
+};
+function applyEdgeStyles(edges, edgeTypeDefsMap) {
+  if (!(edgeTypeDefsMap == null ? void 0 : edgeTypeDefsMap.size)) return edges;
+  return edges.map((edge) => {
+    var _a;
+    const slug = edge.edgeTypeSlug;
+    if (!slug) return edge;
+    const def = edgeTypeDefsMap.get(slug);
+    if (!def) return edge;
+    const styled = __spreadValues({}, edge);
+    if (!styled.type && def.lineStyle) {
+      styled.type = (_a = EDGE_TYPE_MAP[def.lineStyle]) != null ? _a : "default";
+    }
+    styled.style = __spreadValues(__spreadValues(__spreadValues({}, def.color ? { stroke: def.color } : void 0), def.strokeWidth ? { strokeWidth: def.strokeWidth } : void 0), edge.style);
+    if (styled.animated == null && def.animated) styled.animated = true;
+    if (!styled.markerStart) {
+      const startType = toMarkerType(def.markerStart);
+      if (startType) {
+        styled.markerStart = __spreadValues({
+          type: startType
+        }, def.color ? { color: def.color } : void 0);
+      }
+    }
+    if (!styled.markerEnd) {
+      const endType = toMarkerType(def.markerEnd);
+      if (endType) {
+        styled.markerEnd = __spreadValues({
+          type: endType
+        }, def.color ? { color: def.color } : void 0);
+      }
+    }
+    return styled;
+  });
+}
+
+// src/ui/Flow/focus-handler.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react8 = require("@xyflow/react");
+function clampViewport(vp, cw, ch, extent) {
+  const left = -vp.x / vp.zoom;
+  const right = (cw - vp.x) / vp.zoom;
+  const top = -vp.y / vp.zoom;
+  const bottom = (ch - vp.y) / vp.zoom;
+  const dx0 = left - extent[0][0];
+  const dx1 = right - extent[1][0];
+  const dy0 = top - extent[0][1];
+  const dy1 = bottom - extent[1][1];
+  const cx = dx1 > dx0 ? (dx0 + dx1) / 2 : Math.min(0, dx0) || Math.max(0, dx1);
+  const cy = dy1 > dy0 ? (dy0 + dy1) / 2 : Math.min(0, dy0) || Math.max(0, dy1);
+  if (cx === 0 && cy === 0) return vp;
+  return { x: vp.x + cx * vp.zoom, y: vp.y + cy * vp.zoom, zoom: vp.zoom };
+}
 function FocusHandler({
   bounds,
   padding,
   animation,
   mode,
-  responsive
+  responsive,
+  extent,
+  clampBounds,
+  minZoomProp,
+  onInitialFit
 }) {
-  const { fitBounds, setViewport } = (0, import_react5.useReactFlow)();
-  const containerRef = import_react4.default.useRef(null);
+  const { setViewport } = (0, import_react8.useReactFlow)();
+  const store = (0, import_react8.useStoreApi)();
+  const containerRef = import_react7.default.useRef(null);
   const boundsKey = `${bounds.x},${bounds.y},${bounds.width},${bounds.height}`;
-  const boundsRef = import_react4.default.useRef(bounds);
+  const boundsRef = import_react7.default.useRef(bounds);
   boundsRef.current = bounds;
-  const [containerSize, setContainerSize] = import_react4.default.useState({ w: 0, h: 0 });
-  const prevBoundsKeyRef = import_react4.default.useRef(null);
-  const prevSizeRef = import_react4.default.useRef({ w: 0, h: 0 });
-  import_react4.default.useEffect(() => {
+  const [containerSize, setContainerSize] = import_react7.default.useState({ w: 0, h: 0 });
+  const prevBoundsKeyRef = import_react7.default.useRef(null);
+  const prevSizeRef = import_react7.default.useRef({ w: 0, h: 0 });
+  import_react7.default.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const observer = new ResizeObserver((entries) => {
@@ -765,7 +874,7 @@ function FocusHandler({
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  import_react4.default.useEffect(() => {
+  import_react7.default.useEffect(() => {
     if (containerSize.w === 0 || containerSize.h === 0) return;
     const prevKey = prevBoundsKeyRef.current;
     const prevSize = prevSizeRef.current;
@@ -775,70 +884,78 @@ function FocusHandler({
     const isResizeOnly = !isBoundsChange && (prevSize.w !== containerSize.w || prevSize.h !== containerSize.h);
     const isInitial = prevKey === null;
     if (isResizeOnly && !responsive) return;
-    const duration = isInitial || isBoundsChange ? animation === true ? 300 : typeof animation === "number" ? animation : 0 : 0;
+    const duration = isInitial ? 0 : isBoundsChange ? animation === true ? 300 : typeof animation === "number" ? animation : 0 : 0;
     const b = boundsRef.current;
     const padX = padding * b.width;
     const padY = padding * b.height;
     const bw = b.width + padX * 2;
     const bh = b.height + padY * 2;
-    if (mode === "cover") {
-      const zoom = Math.max(containerSize.w / bw, containerSize.h / bh);
-      const cx = b.x + b.width / 2;
-      const cy = b.y + b.height / 2;
-      const x = containerSize.w / 2 - cx * zoom;
-      const y = containerSize.h / 2 - cy * zoom;
-      setViewport({ x, y, zoom }, { duration });
+    if (bw === 0 || bh === 0) return;
+    const zoomFn = mode === "cover" ? Math.max : Math.min;
+    const zoom = zoomFn(containerSize.w / bw, containerSize.h / bh);
+    const centerTarget = clampBounds != null ? clampBounds : b;
+    const cx = centerTarget.x + centerTarget.width / 2;
+    const cy = centerTarget.y + centerTarget.height / 2;
+    const x = containerSize.w / 2 - cx * zoom;
+    const y = containerSize.h / 2 - cy * zoom;
+    if (clampBounds) {
+      const coverZoom = Math.max(
+        containerSize.w / clampBounds.width,
+        containerSize.h / clampBounds.height
+      );
+      store.getState().setMinZoom(Math.max(Math.min(coverZoom, zoom), minZoomProp != null ? minZoomProp : 0));
     } else {
-      fitBounds(boundsRef.current, { padding, duration });
+      store.getState().setMinZoom(minZoomProp != null ? minZoomProp : 0.5);
     }
-  }, [boundsKey, padding, animation, mode, responsive, containerSize.w, containerSize.h, fitBounds, setViewport]);
-  return /* @__PURE__ */ import_react4.default.createElement(
+    let vp = { x, y, zoom };
+    if (isInitial || isBoundsChange) {
+      setViewport(vp, { duration: isInitial ? 0 : duration });
+      if (extent) {
+        const visW = containerSize.w / zoom;
+        const visH = containerSize.h / zoom;
+        onInitialFit == null ? void 0 : onInitialFit([
+          [Math.min(extent[0][0], cx - visW / 2), Math.min(extent[0][1], cy - visH / 2)],
+          [Math.max(extent[1][0], cx + visW / 2), Math.max(extent[1][1], cy + visH / 2)]
+        ]);
+      } else {
+        onInitialFit == null ? void 0 : onInitialFit();
+      }
+    } else {
+      if (extent) {
+        vp = clampViewport(vp, containerSize.w, containerSize.h, extent);
+      }
+      setViewport(vp, { duration });
+    }
+  }, [
+    boundsKey,
+    padding,
+    animation,
+    mode,
+    responsive,
+    containerSize.w,
+    containerSize.h,
+    extent,
+    setViewport,
+    clampBounds,
+    minZoomProp,
+    store,
+    onInitialFit
+  ]);
+  return /* @__PURE__ */ import_react7.default.createElement(
     "div",
     {
       ref: containerRef,
-      style: { position: "absolute", inset: 0, pointerEvents: "none", visibility: "hidden" }
-    }
-  );
-}
-var EDGE_TYPE_MAP = {
-  step: "step",
-  smoothstep: "smoothstep",
-  bezier: "default",
-  default: "default"
-};
-function applyEdgeStyles(edges, edgeTypeDefsMap) {
-  if (!(edgeTypeDefsMap == null ? void 0 : edgeTypeDefsMap.size)) return edges;
-  return edges.map((edge) => {
-    var _a;
-    const slug = edge.edgeTypeSlug;
-    if (!slug) return edge;
-    const def = edgeTypeDefsMap.get(slug);
-    if (!def) return edge;
-    const styled = __spreadValues({}, edge);
-    if (!styled.type && def.lineStyle) {
-      styled.type = (_a = EDGE_TYPE_MAP[def.lineStyle]) != null ? _a : "default";
-    }
-    styled.style = __spreadValues(__spreadValues(__spreadValues({}, def.color ? { stroke: def.color } : void 0), def.strokeWidth ? { strokeWidth: def.strokeWidth } : void 0), edge.style);
-    if (styled.animated == null && def.animated) styled.animated = true;
-    if (!styled.markerStart) {
-      const startType = toMarkerType(def.markerStart);
-      if (startType) {
-        styled.markerStart = __spreadValues({
-          type: startType
-        }, def.color ? { color: def.color } : void 0);
-      }
-    }
-    if (!styled.markerEnd) {
-      const endType = toMarkerType(def.markerEnd);
-      if (endType) {
-        styled.markerEnd = __spreadValues({
-          type: endType
-        }, def.color ? { color: def.color } : void 0);
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        visibility: "hidden"
       }
     }
-    return styled;
-  });
+  );
 }
+
+// src/ui/Flow/FlowRenderer.tsx
 function FlowRenderer({
   data,
   className,
@@ -850,6 +967,10 @@ function FlowRenderer({
   interactive = false,
   fitView = true,
   onNodeClick,
+  onNodeDoubleClick,
+  onNodeContextMenu,
+  onNodeMouseEnter,
+  onNodeMouseLeave,
   onEdgeClick,
   frameRenderer,
   edgeRenderers,
@@ -867,30 +988,38 @@ function FlowRenderer({
   focusAnimation,
   focusMode = "contain",
   responsiveFit,
-  translateExtent: translateExtentProp
+  translateExtent: translateExtentProp,
+  minZoom: minZoomProp,
+  maxZoom: maxZoomProp
 }) {
-  var _a;
-  const nodeTypeDefsMap = import_react4.default.useMemo(() => {
+  var _a, _b;
+  const nodeTypeDefsMap = import_react9.default.useMemo(() => {
     if (!(nodeTypeDefs == null ? void 0 : nodeTypeDefs.length)) return void 0;
     return new Map(nodeTypeDefs.map((d) => [d.slug, d]));
   }, [nodeTypeDefs]);
-  const edgeTypeDefsMap = import_react4.default.useMemo(() => {
+  const edgeTypeDefsMap = import_react9.default.useMemo(() => {
     if (!(edgeTypeDefs == null ? void 0 : edgeTypeDefs.length)) return void 0;
     return new Map(edgeTypeDefs.map((d) => [d.slug, d]));
   }, [edgeTypeDefs]);
-  const nodeTypes = import_react4.default.useMemo(
-    () => createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode),
+  const nodeTypes = import_react9.default.useMemo(
+    () => createNodeTypes(
+      nodeRenderers,
+      nodeTypeDefsMap,
+      frameRenderer,
+      nodeWrapper,
+      renderNode
+    ),
     [nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode]
   );
-  const customEdgeTypes = import_react4.default.useMemo(
+  const customEdgeTypes = import_react9.default.useMemo(
     () => createEdgeTypes(edgeRenderers, edgeTypeDefsMap),
     [edgeRenderers, edgeTypeDefsMap]
   );
-  const mergedCSS = import_react4.default.useMemo(() => {
+  const mergedCSS = import_react9.default.useMemo(() => {
     if (!(nodeTypeDefs == null ? void 0 : nodeTypeDefs.length)) return "";
     return nodeTypeDefs.filter((d) => d.customCSS).map((d) => d.customCSS).join("\n");
   }, [nodeTypeDefs]);
-  const styledEdges = import_react4.default.useMemo(() => {
+  const styledEdges = import_react9.default.useMemo(() => {
     var _a2;
     let edges = applyEdgeStyles((_a2 = data == null ? void 0 : data.edges) != null ? _a2 : [], edgeTypeDefsMap);
     if (edgeRenderers) {
@@ -904,64 +1033,98 @@ function FlowRenderer({
     }
     return edges;
   }, [data == null ? void 0 : data.edges, edgeTypeDefsMap, edgeRenderers]);
+  const translateExtent = import_react9.default.useMemo(() => {
+    if (translateExtentProp) return translateExtentProp;
+    const es = clampBounds != null ? clampBounds : bounds;
+    if (!es) return void 0;
+    const ep = clampBounds ? 0 : focusPadding != null ? focusPadding : 0.1;
+    return [
+      [es.x - ep * es.width, es.y - ep * es.height],
+      [es.x + es.width * (1 + ep), es.y + es.height * (1 + ep)]
+    ];
+  }, [translateExtentProp, clampBounds, bounds, focusPadding]);
+  const boundsKey = bounds ? `${bounds.x},${bounds.y},${bounds.width},${bounds.height}` : "";
+  const extentReadyRef = import_react9.default.useRef(false);
+  const expandedExtentRef = import_react9.default.useRef(void 0);
+  const prevBoundsKeyRef = import_react9.default.useRef(boundsKey);
+  if (prevBoundsKeyRef.current !== boundsKey) {
+    prevBoundsKeyRef.current = boundsKey;
+    extentReadyRef.current = false;
+    expandedExtentRef.current = void 0;
+  }
+  const [, rerender] = import_react9.default.useReducer((x) => x + 1, 0);
+  const handleInitialFit = import_react9.default.useCallback(
+    (expandedExtent) => {
+      extentReadyRef.current = true;
+      expandedExtentRef.current = expandedExtent;
+      rerender();
+    },
+    []
+  );
+  const activeExtent = !bounds || extentReadyRef.current ? (_a = expandedExtentRef.current) != null ? _a : translateExtent : void 0;
   if (!data) return null;
   const resolvedDefaultViewport = defaultViewportProp != null ? defaultViewportProp : !fitView && data.viewport ? data.viewport : void 0;
-  const pad = focusPadding != null ? focusPadding : 0.1;
-  const extentSource = clampBounds != null ? clampBounds : bounds;
-  const extentPad = clampBounds ? 0 : pad;
-  const translateExtent = translateExtentProp != null ? translateExtentProp : extentSource ? [
-    [extentSource.x - extentPad * extentSource.width, extentSource.y - extentPad * extentSource.height],
-    [
-      extentSource.x + extentSource.width * (1 + extentPad),
-      extentSource.y + extentSource.height * (1 + extentPad)
-    ]
-  ] : void 0;
-  return /* @__PURE__ */ import_react4.default.createElement(import_react5.ReactFlowProvider, null, /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(import_react10.ReactFlowProvider, null, /* @__PURE__ */ import_react9.default.createElement(
     "div",
     {
       className,
-      style: __spreadValues({ width: "100%", height: "100%", background: "transparent" }, style)
+      style: __spreadValues({
+        width: "100%",
+        height: "100%",
+        background: "transparent"
+      }, style)
     },
-    /* @__PURE__ */ import_react4.default.createElement(
-      import_react5.ReactFlow,
+    /* @__PURE__ */ import_react9.default.createElement(
+      import_react10.ReactFlow,
       {
-        nodes: (_a = data.nodes) != null ? _a : [],
+        nodes: (_b = data.nodes) != null ? _b : [],
         edges: styledEdges,
         nodeTypes,
         edgeTypes: customEdgeTypes,
         defaultViewport: resolvedDefaultViewport,
         fitView: bounds ? false : fitView,
-        translateExtent,
+        translateExtent: activeExtent,
         onNodeClick,
+        onNodeDoubleClick,
+        onNodeContextMenu,
+        onNodeMouseEnter,
+        onNodeMouseLeave,
         onEdgeClick,
         onMoveEnd: onViewportChange ? ((_, vp) => {
           onViewportChange(vp);
         }) : void 0,
         nodesDraggable: interactive,
         nodesConnectable: false,
-        elementsSelectable: interactive || !!onNodeClick || !!onEdgeClick,
+        elementsSelectable: interactive || !!onNodeClick || !!onNodeDoubleClick || !!onEdgeClick,
         panOnDrag: interactive,
         zoomOnScroll: interactive,
         zoomOnPinch: interactive,
-        zoomOnDoubleClick: false
+        zoomOnDoubleClick: false,
+        minZoom: minZoomProp,
+        maxZoom: maxZoomProp,
+        proOptions: { hideAttribution: true }
       },
-      mergedCSS && /* @__PURE__ */ import_react4.default.createElement("style", { dangerouslySetInnerHTML: { __html: mergedCSS } }),
-      background && /* @__PURE__ */ import_react4.default.createElement(import_react5.Background, null),
-      controls && /* @__PURE__ */ import_react4.default.createElement(import_react5.Controls, null),
-      minimap && /* @__PURE__ */ import_react4.default.createElement(
-        import_react5.MiniMap,
+      mergedCSS && /* @__PURE__ */ import_react9.default.createElement("style", { dangerouslySetInnerHTML: { __html: mergedCSS } }),
+      background && /* @__PURE__ */ import_react9.default.createElement(import_react10.Background, null),
+      controls && /* @__PURE__ */ import_react9.default.createElement(import_react10.Controls, null),
+      minimap && /* @__PURE__ */ import_react9.default.createElement(
+        import_react10.MiniMap,
         {
           nodeColor: minimapNodeColor
         }
       ),
-      bounds && /* @__PURE__ */ import_react4.default.createElement(
+      bounds && /* @__PURE__ */ import_react9.default.createElement(
         FocusHandler,
         {
           bounds,
           padding: focusPadding != null ? focusPadding : 0.1,
           animation: focusAnimation != null ? focusAnimation : true,
           mode: focusMode,
-          responsive: responsiveFit != null ? responsiveFit : true
+          responsive: responsiveFit != null ? responsiveFit : true,
+          extent: translateExtent,
+          clampBounds,
+          minZoomProp,
+          onInitialFit: handleInitialFit
         }
       ),
       children