@01.software/sdk 0.4.3-dev.1774339118317 → 0.4.3-dev.1774342104625

package/dist/ui/flow.js

@@ -39,19 +39,6 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
-// src/ui/Flow/index.tsx
-import React2 from "react";
-import {
-  ReactFlow,
-  ReactFlowProvider,
-  Background,
-  Controls,
-  MiniMap,
-  MarkerType,
-  useReactFlow,
-  useStoreApi
-} from "@xyflow/react";
-
 // src/ui/Flow/types.ts
 function isDynamicNode(node) {
   return node.type === "dynamic";
@@ -444,7 +431,21 @@ function clearTemplateCache() {
   componentCache.clear();
 }
 
-// src/ui/Flow/index.tsx
+// src/ui/Flow/FlowRenderer.tsx
+import React5 from "react";
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Background,
+  Controls,
+  MiniMap
+} from "@xyflow/react";
+
+// src/ui/Flow/node-types-factory.tsx
+import React3 from "react";
+
+// src/ui/Flow/node-renderers.tsx
+import React2 from "react";
 function sanitizeUrl(url) {
   if (!url) return url;
   try {
@@ -455,11 +456,6 @@ function sanitizeUrl(url) {
     return void 0;
   }
 }
-function toMarkerType(value) {
-  if (value === "arrow") return MarkerType.Arrow;
-  if (value === "arrowclosed") return MarkerType.ArrowClosed;
-  return void 0;
-}
 function renderFieldValue(key, val, fieldDef) {
   if (val == null || val === "") return null;
   const fieldType = fieldDef == null ? void 0 : fieldDef.fieldType;
@@ -611,13 +607,15 @@ 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];
-    const defaultRender = typeDef ? /* @__PURE__ */ React2.createElement(
+    const defaultRender = typeDef ? /* @__PURE__ */ React3.createElement(
       EnhancedDynamicNode,
       {
         data: d,
@@ -625,7 +623,7 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
         width: props.width,
         height: props.height
       }
-    ) : /* @__PURE__ */ React2.createElement(DefaultDynamicNode, __spreadValues({}, props));
+    ) : /* @__PURE__ */ React3.createElement(DefaultDynamicNode, __spreadValues({}, props));
     const slotProps = {
       id: props.id,
       nodeTypeSlug: d.nodeTypeSlug,
@@ -637,14 +635,14 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
       height: props.height,
       defaultRender
     };
-    let content = CustomRenderer ? /* @__PURE__ */ React2.createElement(CustomRenderer, __spreadValues({}, slotProps)) : defaultRender;
+    let content = CustomRenderer ? /* @__PURE__ */ React3.createElement(CustomRenderer, __spreadValues({}, slotProps)) : defaultRender;
     if (renderNode) {
       const result = renderNode(slotProps, content);
       if (result !== null) content = result;
     }
     if (nodeWrapper) {
       const Wrapper = nodeWrapper;
-      content = /* @__PURE__ */ React2.createElement(
+      content = /* @__PURE__ */ React3.createElement(
         Wrapper,
         {
           id: props.id,
@@ -661,7 +659,7 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
   types.frame = frameRenderer ? ((props) => {
     const d = props.data;
     const Renderer = frameRenderer;
-    return /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React3.createElement(
       Renderer,
       {
         id: props.id,
@@ -685,7 +683,7 @@ function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
     types[slug] = ((props) => {
       var _a;
       const def = edgeTypeDefsMap == null ? void 0 : edgeTypeDefsMap.get(slug);
-      return /* @__PURE__ */ React2.createElement(
+      return /* @__PURE__ */ React3.createElement(
         Renderer,
         {
           id: props.id,
@@ -702,6 +700,57 @@ function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
   }
   return types;
 }
+
+// src/ui/Flow/edge-styles.ts
+import { MarkerType } from "@xyflow/react";
+function toMarkerType(value) {
+  if (value === "arrow") return MarkerType.Arrow;
+  if (value === "arrowclosed") return 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
+import React4 from "react";
+import { useReactFlow, useStoreApi } from "@xyflow/react";
 function clampViewport(vp, cw, ch, extent) {
   const left = -vp.x / vp.zoom;
   const right = (cw - vp.x) / vp.zoom;
@@ -724,18 +773,19 @@ function FocusHandler({
   responsive,
   extent,
   clampBounds,
-  minZoomProp
+  minZoomProp,
+  onInitialFit
 }) {
   const { setViewport } = useReactFlow();
   const store = useStoreApi();
-  const containerRef = React2.useRef(null);
+  const containerRef = React4.useRef(null);
   const boundsKey = `${bounds.x},${bounds.y},${bounds.width},${bounds.height}`;
-  const boundsRef = React2.useRef(bounds);
+  const boundsRef = React4.useRef(bounds);
   boundsRef.current = bounds;
-  const [containerSize, setContainerSize] = React2.useState({ w: 0, h: 0 });
-  const prevBoundsKeyRef = React2.useRef(null);
-  const prevSizeRef = React2.useRef({ w: 0, h: 0 });
-  React2.useEffect(() => {
+  const [containerSize, setContainerSize] = React4.useState({ w: 0, h: 0 });
+  const prevBoundsKeyRef = React4.useRef(null);
+  const prevSizeRef = React4.useRef({ w: 0, h: 0 });
+  React4.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const observer = new ResizeObserver((entries) => {
@@ -747,7 +797,7 @@ function FocusHandler({
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (containerSize.w === 0 || containerSize.h === 0) return;
     const prevKey = prevBoundsKeyRef.current;
     const prevSize = prevSizeRef.current;
@@ -780,10 +830,24 @@ function FocusHandler({
       store.getState().setMinZoom(minZoomProp != null ? minZoomProp : 0.5);
     }
     let vp = { x, y, zoom };
-    if (extent && !isInitial) {
-      vp = clampViewport(vp, containerSize.w, containerSize.h, extent);
+    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 });
     }
-    setViewport(vp, { duration });
   }, [
     boundsKey,
     padding,
@@ -796,9 +860,10 @@ function FocusHandler({
     setViewport,
     clampBounds,
     minZoomProp,
-    store
+    store,
+    onInitialFit
   ]);
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "div",
     {
       ref: containerRef,
@@ -811,45 +876,8 @@ function FocusHandler({
     }
   );
 }
-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/FlowRenderer.tsx
 function FlowRenderer({
   data,
   className,
@@ -886,16 +914,16 @@ function FlowRenderer({
   minZoom: minZoomProp,
   maxZoom: maxZoomProp
 }) {
-  var _a;
-  const nodeTypeDefsMap = React2.useMemo(() => {
+  var _a, _b;
+  const nodeTypeDefsMap = React5.useMemo(() => {
     if (!(nodeTypeDefs == null ? void 0 : nodeTypeDefs.length)) return void 0;
     return new Map(nodeTypeDefs.map((d) => [d.slug, d]));
   }, [nodeTypeDefs]);
-  const edgeTypeDefsMap = React2.useMemo(() => {
+  const edgeTypeDefsMap = React5.useMemo(() => {
     if (!(edgeTypeDefs == null ? void 0 : edgeTypeDefs.length)) return void 0;
     return new Map(edgeTypeDefs.map((d) => [d.slug, d]));
   }, [edgeTypeDefs]);
-  const nodeTypes = React2.useMemo(
+  const nodeTypes = React5.useMemo(
     () => createNodeTypes(
       nodeRenderers,
       nodeTypeDefsMap,
@@ -905,15 +933,15 @@ function FlowRenderer({
     ),
     [nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode]
   );
-  const customEdgeTypes = React2.useMemo(
+  const customEdgeTypes = React5.useMemo(
     () => createEdgeTypes(edgeRenderers, edgeTypeDefsMap),
     [edgeRenderers, edgeTypeDefsMap]
   );
-  const mergedCSS = React2.useMemo(() => {
+  const mergedCSS = React5.useMemo(() => {
     if (!(nodeTypeDefs == null ? void 0 : nodeTypeDefs.length)) return "";
     return nodeTypeDefs.filter((d) => d.customCSS).map((d) => d.customCSS).join("\n");
   }, [nodeTypeDefs]);
-  const styledEdges = React2.useMemo(() => {
+  const styledEdges = React5.useMemo(() => {
     var _a2;
     let edges = applyEdgeStyles((_a2 = data == null ? void 0 : data.edges) != null ? _a2 : [], edgeTypeDefsMap);
     if (edgeRenderers) {
@@ -927,7 +955,7 @@ function FlowRenderer({
     }
     return edges;
   }, [data == null ? void 0 : data.edges, edgeTypeDefsMap, edgeRenderers]);
-  const translateExtent = React2.useMemo(() => {
+  const translateExtent = React5.useMemo(() => {
     if (translateExtentProp) return translateExtentProp;
     const es = clampBounds != null ? clampBounds : bounds;
     if (!es) return void 0;
@@ -937,9 +965,28 @@ function FlowRenderer({
       [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 = React5.useRef(false);
+  const expandedExtentRef = React5.useRef(void 0);
+  const prevBoundsKeyRef = React5.useRef(boundsKey);
+  if (prevBoundsKeyRef.current !== boundsKey) {
+    prevBoundsKeyRef.current = boundsKey;
+    extentReadyRef.current = false;
+    expandedExtentRef.current = void 0;
+  }
+  const [, rerender] = React5.useReducer((x) => x + 1, 0);
+  const handleInitialFit = React5.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;
-  return /* @__PURE__ */ React2.createElement(ReactFlowProvider, null, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React5.createElement(ReactFlowProvider, null, /* @__PURE__ */ React5.createElement(
     "div",
     {
       className,
@@ -949,16 +996,16 @@ function FlowRenderer({
         background: "transparent"
       }, style)
     },
-    /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React5.createElement(
       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,
@@ -979,16 +1026,16 @@ function FlowRenderer({
         maxZoom: maxZoomProp,
         proOptions: { hideAttribution: true }
       },
-      mergedCSS && /* @__PURE__ */ React2.createElement("style", { dangerouslySetInnerHTML: { __html: mergedCSS } }),
-      background && /* @__PURE__ */ React2.createElement(Background, null),
-      controls && /* @__PURE__ */ React2.createElement(Controls, null),
-      minimap && /* @__PURE__ */ React2.createElement(
+      mergedCSS && /* @__PURE__ */ React5.createElement("style", { dangerouslySetInnerHTML: { __html: mergedCSS } }),
+      background && /* @__PURE__ */ React5.createElement(Background, null),
+      controls && /* @__PURE__ */ React5.createElement(Controls, null),
+      minimap && /* @__PURE__ */ React5.createElement(
         MiniMap,
         {
           nodeColor: minimapNodeColor
         }
       ),
-      bounds && /* @__PURE__ */ React2.createElement(
+      bounds && /* @__PURE__ */ React5.createElement(
         FocusHandler,
         {
           bounds,
@@ -998,7 +1045,8 @@ function FlowRenderer({
           responsive: responsiveFit != null ? responsiveFit : true,
           extent: translateExtent,
           clampBounds,
-          minZoomProp
+          minZoomProp,
+          onInitialFit: handleInitialFit
         }
       ),
       children