@01.software/sdk 0.4.3-dev.1774338319418 → 0.4.3-dev.1774340903661

package/dist/ui/flow.cjs

@@ -82,8 +82,6 @@ __export(Flow_exports, {
   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) {
@@ -477,7 +475,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 +494,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;
@@ -644,13 +645,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__ */ import_react4.default.createElement(
+    const defaultRender = typeDef ? /* @__PURE__ */ import_react5.default.createElement(
       EnhancedDynamicNode,
       {
         data: d,
@@ -658,7 +661,7 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
         width: props.width,
         height: props.height
       }
-    ) : /* @__PURE__ */ import_react4.default.createElement(DefaultDynamicNode, __spreadValues({}, props));
+    ) : /* @__PURE__ */ import_react5.default.createElement(DefaultDynamicNode, __spreadValues({}, props));
     const slotProps = {
       id: props.id,
       nodeTypeSlug: d.nodeTypeSlug,
@@ -670,14 +673,14 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
       height: props.height,
       defaultRender
     };
-    let content = CustomRenderer ? /* @__PURE__ */ import_react4.default.createElement(CustomRenderer, __spreadValues({}, slotProps)) : defaultRender;
+    let content = CustomRenderer ? /* @__PURE__ */ import_react5.default.createElement(CustomRenderer, __spreadValues({}, slotProps)) : defaultRender;
     if (renderNode) {
       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,
@@ -694,7 +697,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,
@@ -718,7 +721,7 @@ function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
     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,
@@ -735,6 +738,57 @@ 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;
@@ -757,18 +811,19 @@ function FocusHandler({
   responsive,
   extent,
   clampBounds,
-  minZoomProp
+  minZoomProp,
+  onInitialFit
 }) {
-  const { setViewport } = (0, import_react5.useReactFlow)();
-  const store = (0, import_react5.useStoreApi)();
-  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) => {
@@ -780,7 +835,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;
@@ -790,18 +845,17 @@ 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 zoomTarget = mode === "cover" && clampBounds ? clampBounds : b;
-    const padX = padding * zoomTarget.width;
-    const padY = padding * zoomTarget.height;
-    const bw = zoomTarget.width + padX * 2;
-    const bh = zoomTarget.height + padY * 2;
+    const padX = padding * b.width;
+    const padY = padding * b.height;
+    const bw = b.width + padX * 2;
+    const bh = b.height + padY * 2;
     if (bw === 0 || bh === 0) return;
     const zoomFn = mode === "cover" ? Math.max : Math.min;
     const zoom = zoomFn(containerSize.w / bw, containerSize.h / bh);
-    const cx = zoomTarget.x + zoomTarget.width / 2;
-    const cy = zoomTarget.y + zoomTarget.height / 2;
+    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;
     if (clampBounds) {
@@ -814,10 +868,15 @@ function FocusHandler({
       store.getState().setMinZoom(minZoomProp != null ? minZoomProp : 0.5);
     }
     let vp = { x, y, zoom };
-    if (extent) {
-      vp = clampViewport(vp, containerSize.w, containerSize.h, extent);
+    if (isInitial || isBoundsChange) {
+      setViewport(vp, { duration: isInitial ? 0 : duration });
+      onInitialFit == null ? void 0 : onInitialFit();
+    } else {
+      if (extent) {
+        vp = clampViewport(vp, containerSize.w, containerSize.h, extent);
+      }
+      setViewport(vp, { duration });
     }
-    setViewport(vp, { duration });
   }, [
     boundsKey,
     padding,
@@ -830,9 +889,10 @@ function FocusHandler({
     setViewport,
     clampBounds,
     minZoomProp,
-    store
+    store,
+    onInitialFit
   ]);
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(
     "div",
     {
       ref: containerRef,
@@ -845,45 +905,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,
@@ -921,15 +944,15 @@ function FlowRenderer({
   maxZoom: maxZoomProp
 }) {
   var _a;
-  const nodeTypeDefsMap = import_react4.default.useMemo(() => {
+  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(
+  const nodeTypes = import_react9.default.useMemo(
     () => createNodeTypes(
       nodeRenderers,
       nodeTypeDefsMap,
@@ -939,15 +962,15 @@ function FlowRenderer({
     ),
     [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) {
@@ -961,7 +984,7 @@ function FlowRenderer({
     }
     return edges;
   }, [data == null ? void 0 : data.edges, edgeTypeDefsMap, edgeRenderers]);
-  const translateExtent = import_react4.default.useMemo(() => {
+  const translateExtent = import_react9.default.useMemo(() => {
     if (translateExtentProp) return translateExtentProp;
     const es = clampBounds != null ? clampBounds : bounds;
     if (!es) return void 0;
@@ -971,9 +994,22 @@ 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 = import_react9.default.useRef(false);
+  const prevBoundsKeyRef = import_react9.default.useRef(boundsKey);
+  if (prevBoundsKeyRef.current !== boundsKey) {
+    prevBoundsKeyRef.current = boundsKey;
+    extentReadyRef.current = false;
+  }
+  const [, rerender] = import_react9.default.useReducer((x) => x + 1, 0);
+  const handleInitialFit = import_react9.default.useCallback(() => {
+    extentReadyRef.current = true;
+    rerender();
+  }, []);
+  const activeExtent = !bounds || extentReadyRef.current ? translateExtent : void 0;
   if (!data) return null;
   const resolvedDefaultViewport = defaultViewportProp != null ? defaultViewportProp : !fitView && data.viewport ? data.viewport : 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,
@@ -983,8 +1019,8 @@ function FlowRenderer({
         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 : [],
         edges: styledEdges,
@@ -992,7 +1028,7 @@ function FlowRenderer({
         edgeTypes: customEdgeTypes,
         defaultViewport: resolvedDefaultViewport,
         fitView: bounds ? false : fitView,
-        translateExtent,
+        translateExtent: activeExtent,
         onNodeClick,
         onNodeDoubleClick,
         onNodeContextMenu,
@@ -1013,16 +1049,16 @@ function FlowRenderer({
         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,
@@ -1032,7 +1068,8 @@ function FlowRenderer({
           responsive: responsiveFit != null ? responsiveFit : true,
           extent: translateExtent,
           clampBounds,
-          minZoomProp
+          minZoomProp,
+          onInitialFit: handleInitialFit
         }
       ),
       children