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

package/dist/ui/flow.cjs

@@ -71,6 +71,9 @@ __export(Flow_exports, {
   BUILT_IN_EDGE_TYPES: () => BUILT_IN_EDGE_TYPES,
   BUILT_IN_NODE_TYPES: () => BUILT_IN_NODE_TYPES,
   FlowRenderer: () => FlowRenderer,
+  clearTemplateCache: () => clearTemplateCache,
+  compileTemplate: () => compileTemplate,
+  getFrameData: () => getFrameData,
   getFrames: () => getFrames,
   getNodeBounds: () => getNodeBounds,
   isDynamicNode: () => isDynamicNode,
@@ -79,8 +82,8 @@ __export(Flow_exports, {
   useFlowData: () => useFlowData
 });
 module.exports = __toCommonJS(Flow_exports);
-var import_react3 = __toESM(require("react"), 1);
-var import_react4 = require("@xyflow/react");
+var import_react4 = __toESM(require("react"), 1);
+var import_react5 = require("@xyflow/react");
 
 // src/ui/Flow/types.ts
 function isDynamicNode(node) {
@@ -147,7 +150,7 @@ function collectionKeys(collection) {
 
 // src/ui/Flow/useFlow.ts
 function toNodeTypeDef(doc) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   return {
     slug: String((_a = doc.slug) != null ? _a : ""),
     name: String((_b = doc.title) != null ? _b : ""),
@@ -157,7 +160,9 @@ function toNodeTypeDef(doc) {
       height: 200
     },
     fields: Array.isArray(doc.fields) ? doc.fields : [],
-    transparentBackground: Boolean(doc.transparentBackground)
+    transparentBackground: Boolean(doc.transparentBackground),
+    template: (_e = doc.template) != null ? _e : null,
+    customCSS: (_f = doc.customCSS) != null ? _f : null
   };
 }
 function toEdgeTypeDef(doc) {
@@ -275,37 +280,57 @@ function useFlowData(options) {
 }
 
 // src/ui/Flow/utils.ts
-function getNodeBounds(nodes, nodeIds) {
+function getNodeSize(node) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  return {
+    width: (_e = (_d = (_c = (_a = node.style) == null ? void 0 : _a.width) != null ? _c : (_b = node.measured) == null ? void 0 : _b.width) != null ? _d : node.width) != null ? _e : 200,
+    height: (_j = (_i = (_h = (_f = node.style) == null ? void 0 : _f.height) != null ? _h : (_g = node.measured) == null ? void 0 : _g.height) != null ? _i : node.height) != null ? _j : 200
+  };
+}
+function getAbsolutePosition(node, nodeMap) {
+  let x = node.position.x;
+  let y = node.position.y;
+  let current = node;
+  const visited = /* @__PURE__ */ new Set([node.id]);
+  while (current.parentId) {
+    const parentId = current.parentId;
+    if (visited.has(parentId)) break;
+    const parent = nodeMap.get(parentId);
+    if (!parent) break;
+    visited.add(parent.id);
+    x += parent.position.x;
+    y += parent.position.y;
+    current = parent;
+  }
+  return { x, y };
+}
+function collectDescendants(nodes, rootId) {
+  const result = /* @__PURE__ */ new Set([rootId]);
+  const queue = [rootId];
+  let i = 0;
+  while (i < queue.length) {
+    const current = queue[i++];
+    for (const n of nodes) {
+      if (n.parentId === current && !result.has(n.id)) {
+        result.add(n.id);
+        queue.push(n.id);
+      }
+    }
+  }
+  return result;
+}
+function getNodeBounds(nodes, nodeIds) {
   const idSet = new Set(nodeIds);
   const targetNodes = nodes.filter((n) => idSet.has(n.id));
   if (targetNodes.length === 0) return void 0;
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
-  function getAbsolutePosition(node) {
-    let x = node.position.x;
-    let y = node.position.y;
-    let current = node;
-    const visited = /* @__PURE__ */ new Set([node.id]);
-    while (current.parentId) {
-      const parentId = current.parentId;
-      if (visited.has(parentId)) break;
-      const parent = nodeMap.get(parentId);
-      if (!parent) break;
-      visited.add(parent.id);
-      x += parent.position.x;
-      y += parent.position.y;
-      current = parent;
-    }
-    return { x, y };
-  }
   let minX = Infinity;
   let minY = Infinity;
   let maxX = -Infinity;
   let maxY = -Infinity;
   for (const node of targetNodes) {
-    const abs = getAbsolutePosition(node);
-    const w = (_e = (_d = (_c = (_a = node.style) == null ? void 0 : _a.width) != null ? _c : (_b = node.measured) == null ? void 0 : _b.width) != null ? _d : node.width) != null ? _e : 200;
-    const h = (_j = (_i = (_h = (_f = node.style) == null ? void 0 : _f.height) != null ? _h : (_g = node.measured) == null ? void 0 : _g.height) != null ? _i : node.height) != null ? _j : 200;
+    const abs = getAbsolutePosition(node, nodeMap);
+    const { width: w, height: h } = getNodeSize(node);
     minX = Math.min(minX, abs.x);
     minY = Math.min(minY, abs.y);
     maxX = Math.max(maxX, abs.x + w);
@@ -317,32 +342,140 @@ function getFrames(nodes) {
   const frames = nodes.filter((n) => n.type === "frame");
   if (frames.length === 0) return [];
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
-  function getAbsolutePosition(node) {
-    let x = node.position.x;
-    let y = node.position.y;
-    let current = node;
-    const visited = /* @__PURE__ */ new Set([node.id]);
-    while (current.parentId) {
-      const parentId = current.parentId;
-      if (visited.has(parentId)) break;
-      const parent = nodeMap.get(parentId);
-      if (!parent) break;
-      visited.add(parent.id);
-      x += parent.position.x;
-      y += parent.position.y;
-      current = parent;
-    }
-    return { x, y };
-  }
   return frames.map((f) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a;
     const data = f.data;
-    const abs = getAbsolutePosition(f);
-    const w = (_e = (_d = (_c = (_a = f.style) == null ? void 0 : _a.width) != null ? _c : (_b = f.measured) == null ? void 0 : _b.width) != null ? _d : f.width) != null ? _e : 200;
-    const h = (_j = (_i = (_h = (_f = f.style) == null ? void 0 : _f.height) != null ? _h : (_g = f.measured) == null ? void 0 : _g.height) != null ? _i : f.height) != null ? _j : 200;
-    return { id: f.id, label: (_k = data.label) != null ? _k : "", bounds: { x: abs.x, y: abs.y, width: w, height: h } };
+    const abs = getAbsolutePosition(f, nodeMap);
+    const { width: w, height: h } = getNodeSize(f);
+    return {
+      id: f.id,
+      label: (_a = data.label) != null ? _a : "",
+      bounds: { x: abs.x, y: abs.y, width: w, height: h }
+    };
   }).sort((a, b) => a.bounds.y - b.bounds.y || a.bounds.x - b.bounds.x);
 }
+function getFrameData(data, frameId) {
+  const frame = data.nodes.find((n) => n.id === frameId);
+  if (!frame || frame.type !== "frame") return void 0;
+  const descendantIds = collectDescendants(data.nodes, frameId);
+  const childNodes = data.nodes.filter((n) => descendantIds.has(n.id)).map((n) => __spreadProps(__spreadValues({}, n), { draggable: false }));
+  const childEdges = data.edges.filter(
+    (e) => descendantIds.has(e.source) && descendantIds.has(e.target)
+  );
+  const frameBounds = getNodeBounds(data.nodes, [frameId]);
+  const { width: w, height: h } = getNodeSize(frame);
+  const clampBounds = frameBounds != null ? frameBounds : {
+    x: frame.position.x,
+    y: frame.position.y,
+    width: w,
+    height: h
+  };
+  const contentNodeIds = childNodes.filter((n) => n.id !== frameId).map((n) => n.id);
+  const contentBounds = contentNodeIds.length > 0 ? getNodeBounds(data.nodes, contentNodeIds) : void 0;
+  const fitBounds = contentBounds != null ? contentBounds : clampBounds;
+  return {
+    data: {
+      nodes: childNodes,
+      edges: childEdges,
+      viewport: data.viewport
+    },
+    fitBounds,
+    clampBounds,
+    bounds: clampBounds
+  };
+}
+
+// src/ui/Flow/template-compiler.ts
+var import_react3 = __toESM(require("react"), 1);
+var import_sucrase = require("sucrase");
+var MAX_CACHE_SIZE = 100;
+var componentCache = /* @__PURE__ */ new Map();
+function hashCode(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char | 0;
+  }
+  return hash.toString(36);
+}
+var BLOCKED_PATTERNS = [
+  /\bdocument\s*\./,
+  /\bwindow\s*\./,
+  /\bwindow\s*\[/,
+  /\bglobalThis\s*\./,
+  /\bfetch\s*\(/,
+  /\bXMLHttpRequest/,
+  /\beval\s*\(/,
+  /\bFunction\s*\(/,
+  /\bimport\s*\(/,
+  /\blocalStorage/,
+  /\bsessionStorage/,
+  /\bcookie/,
+  /\bpostMessage\s*\(/,
+  /\blocation\s*[.=]/,
+  /\bnavigator\s*\./,
+  /\bsetTimeout\s*\(/,
+  /\bsetInterval\s*\(/,
+  /\bsetImmediate\s*\(/,
+  /\brequire\s*\(/
+];
+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)}`;
+  if (componentCache.has(cacheKey)) {
+    const cached = componentCache.get(cacheKey);
+    componentCache.delete(cacheKey);
+    componentCache.set(cacheKey, cached);
+    return cached;
+  }
+  if (!validateTemplateCode(code)) {
+    console.warn(`[flow] Template "${slug}" contains blocked patterns`);
+    return null;
+  }
+  try {
+    const { code: jsCode } = (0, import_sucrase.transform)(code, {
+      transforms: ["typescript", "jsx", "imports"],
+      jsxRuntime: "classic",
+      jsxPragma: "React.createElement",
+      jsxFragmentPragma: "React.Fragment"
+    });
+    const factory = new Function(
+      "React",
+      `
+      var window = undefined;
+      var document = undefined;
+      var globalThis = undefined;
+      var setTimeout = undefined;
+      var setInterval = undefined;
+      var setImmediate = undefined;
+      var fetch = undefined;
+      var XMLHttpRequest = undefined;
+      var navigator = undefined;
+      var location = undefined;
+      var exports = {};
+      var module = { exports: exports };
+      ${jsCode}
+      return module.exports.default || module.exports;
+    `
+    );
+    const Component = factory(import_react3.default);
+    if (typeof Component !== "function") return null;
+    if (componentCache.size >= MAX_CACHE_SIZE) {
+      const oldestKey = componentCache.keys().next().value;
+      if (oldestKey) componentCache.delete(oldestKey);
+    }
+    componentCache.set(cacheKey, Component);
+    return Component;
+  } catch (e) {
+    console.warn(`[flow] Failed to compile template for "${slug}":`, e);
+    return null;
+  }
+}
+function clearTemplateCache() {
+  componentCache.clear();
+}
 
 // src/ui/Flow/index.tsx
 function sanitizeUrl(url) {
@@ -356,8 +489,8 @@ function sanitizeUrl(url) {
   }
 }
 function toMarkerType(value) {
-  if (value === "arrow") return import_react4.MarkerType.Arrow;
-  if (value === "arrowclosed") return import_react4.MarkerType.ArrowClosed;
+  if (value === "arrow") return import_react5.MarkerType.Arrow;
+  if (value === "arrowclosed") return import_react5.MarkerType.ArrowClosed;
   return void 0;
 }
 function renderFieldValue(key, val, fieldDef) {
@@ -367,7 +500,7 @@ function renderFieldValue(key, val, fieldDef) {
     const imgUrl = typeof val === "string" ? val : val == null ? void 0 : val.url;
     const safeUrl = sanitizeUrl(imgUrl);
     if (!safeUrl) return null;
-    return /* @__PURE__ */ import_react3.default.createElement(
+    return /* @__PURE__ */ import_react4.default.createElement(
       "img",
       {
         key,
@@ -378,7 +511,7 @@ function renderFieldValue(key, val, fieldDef) {
       }
     );
   }
-  return /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "div",
     {
       key,
@@ -395,7 +528,7 @@ function renderFieldValue(key, val, fieldDef) {
 }
 function DefaultDynamicNode({ data }) {
   const d = data;
-  return /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "div",
     {
       style: {
@@ -408,11 +541,59 @@ function DefaultDynamicNode({ data }) {
     d.fields && Object.entries(d.fields).filter(([, v]) => v != null && v !== "").map(([key, val]) => renderFieldValue(key, val))
   );
 }
+var TemplateErrorBoundary = class extends import_react4.default.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.resetKey !== this.props.resetKey && this.state.error) {
+      this.setState({ error: null });
+    }
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ import_react4.default.createElement("div", { style: { padding: 8, fontSize: 11, color: "#ef4444" } }, /* @__PURE__ */ import_react4.default.createElement("strong", null, "Render error"), /* @__PURE__ */ import_react4.default.createElement("pre", { style: { fontSize: 10, whiteSpace: "pre-wrap" } }, this.state.error.message));
+    }
+    return this.props.children;
+  }
+};
 function EnhancedDynamicNode({
   data,
-  typeDef
+  typeDef,
+  width,
+  height
 }) {
-  return /* @__PURE__ */ import_react3.default.createElement(
+  if (typeDef.template) {
+    const Component = compileTemplate(typeDef.template, typeDef.slug);
+    if (Component) {
+      return /* @__PURE__ */ import_react4.default.createElement(
+        "div",
+        {
+          className: `flow-node flow-node--${typeDef.slug}${typeDef.transparentBackground ? " flow-node--transparent-bg" : ""}`,
+          style: {
+            width: "100%",
+            height: "100%"
+          }
+        },
+        /* @__PURE__ */ import_react4.default.createElement(TemplateErrorBoundary, { resetKey: typeDef.template }, /* @__PURE__ */ import_react4.default.createElement(
+          Component,
+          {
+            fields: data.fields,
+            label: data.label,
+            color: typeDef.color,
+            nodeTypeSlug: typeDef.slug,
+            width: width != null ? width : typeDef.defaultSize.width,
+            height: height != null ? height : typeDef.defaultSize.height
+          }
+        ))
+      );
+    }
+  }
+  return /* @__PURE__ */ import_react4.default.createElement(
     "div",
     {
       style: {
@@ -441,7 +622,7 @@ function DefaultFrameNode({ data }) {
     if (m) return `rgba(${m[1]},${m[2]},${m[3]},${opacity})`;
     return baseColor;
   })();
-  return /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "div",
     {
       style: {
@@ -452,7 +633,7 @@ function DefaultFrameNode({ data }) {
         border: borderStyle === "none" ? "none" : `2px ${borderStyle} rgba(128,128,128,0.3)`
       }
     },
-    /* @__PURE__ */ import_react3.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       "div",
       {
         style: {
@@ -474,7 +655,7 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
     const CustomRenderer = nodeRenderers == null ? void 0 : nodeRenderers[d.nodeTypeSlug];
     let content;
     if (CustomRenderer) {
-      content = /* @__PURE__ */ import_react3.default.createElement(
+      content = /* @__PURE__ */ import_react4.default.createElement(
         CustomRenderer,
         {
           id: props.id,
@@ -485,9 +666,9 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
         }
       );
     } else if (typeDef) {
-      content = /* @__PURE__ */ import_react3.default.createElement(EnhancedDynamicNode, { data: d, typeDef });
+      content = /* @__PURE__ */ import_react4.default.createElement(EnhancedDynamicNode, { data: d, typeDef, width: props.width, height: props.height });
     } else {
-      content = /* @__PURE__ */ import_react3.default.createElement(DefaultDynamicNode, __spreadValues({}, props));
+      content = /* @__PURE__ */ import_react4.default.createElement(DefaultDynamicNode, __spreadValues({}, props));
     }
     if (renderNode) {
       const slotProps = {
@@ -502,7 +683,7 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
     }
     if (nodeWrapper) {
       const Wrapper = nodeWrapper;
-      content = /* @__PURE__ */ import_react3.default.createElement(
+      content = /* @__PURE__ */ import_react4.default.createElement(
         Wrapper,
         {
           id: props.id,
@@ -519,7 +700,7 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
   types.frame = frameRenderer ? ((props) => {
     const d = props.data;
     const Renderer = frameRenderer;
-    return /* @__PURE__ */ import_react3.default.createElement(
+    return /* @__PURE__ */ import_react4.default.createElement(
       Renderer,
       {
         id: props.id,
@@ -540,7 +721,7 @@ function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
     types[slug] = ((props) => {
       var _a;
       const def = edgeTypeDefsMap == null ? void 0 : edgeTypeDefsMap.get(slug);
-      return /* @__PURE__ */ import_react3.default.createElement(
+      return /* @__PURE__ */ import_react4.default.createElement(
         Renderer,
         {
           id: props.id,
@@ -560,17 +741,64 @@ function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
 function FocusHandler({
   bounds,
   padding,
-  animation
+  animation,
+  mode,
+  responsive
 }) {
-  const { fitBounds } = (0, import_react4.useReactFlow)();
+  const { fitBounds, setViewport } = (0, import_react5.useReactFlow)();
+  const containerRef = import_react4.default.useRef(null);
   const boundsKey = `${bounds.x},${bounds.y},${bounds.width},${bounds.height}`;
-  const boundsRef = import_react3.default.useRef(bounds);
+  const boundsRef = import_react4.default.useRef(bounds);
   boundsRef.current = bounds;
-  import_react3.default.useEffect(() => {
-    const duration = animation === true ? 300 : typeof animation === "number" ? animation : 0;
-    fitBounds(boundsRef.current, { padding, duration });
-  }, [boundsKey, padding, animation, fitBounds]);
-  return null;
+  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 el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      setContainerSize({ w: width, h: height });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  import_react4.default.useEffect(() => {
+    if (containerSize.w === 0 || containerSize.h === 0) return;
+    const prevKey = prevBoundsKeyRef.current;
+    const prevSize = prevSizeRef.current;
+    prevBoundsKeyRef.current = boundsKey;
+    prevSizeRef.current = { w: containerSize.w, h: containerSize.h };
+    const isBoundsChange = prevKey !== boundsKey;
+    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 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 });
+    } else {
+      fitBounds(boundsRef.current, { padding, duration });
+    }
+  }, [boundsKey, padding, animation, mode, responsive, containerSize.w, containerSize.h, fitBounds, setViewport]);
+  return /* @__PURE__ */ import_react4.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: { position: "absolute", inset: 0, pointerEvents: "none", visibility: "hidden" }
+    }
+  );
 }
 var EDGE_TYPE_MAP = {
   step: "step",
@@ -634,27 +862,35 @@ function FlowRenderer({
   onViewportChange,
   defaultViewport: defaultViewportProp,
   bounds,
+  clampBounds,
   focusPadding,
-  focusAnimation
+  focusAnimation,
+  focusMode = "contain",
+  responsiveFit,
+  translateExtent: translateExtentProp
 }) {
   var _a;
-  const nodeTypeDefsMap = import_react3.default.useMemo(() => {
+  const nodeTypeDefsMap = import_react4.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_react3.default.useMemo(() => {
+  const edgeTypeDefsMap = import_react4.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_react3.default.useMemo(
+  const nodeTypes = import_react4.default.useMemo(
     () => createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode),
     [nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode]
   );
-  const customEdgeTypes = import_react3.default.useMemo(
+  const customEdgeTypes = import_react4.default.useMemo(
     () => createEdgeTypes(edgeRenderers, edgeTypeDefsMap),
     [edgeRenderers, edgeTypeDefsMap]
   );
-  const styledEdges = import_react3.default.useMemo(() => {
+  const mergedCSS = import_react4.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(() => {
     var _a2;
     let edges = applyEdgeStyles((_a2 = data == null ? void 0 : data.edges) != null ? _a2 : [], edgeTypeDefsMap);
     if (edgeRenderers) {
@@ -670,27 +906,38 @@ function FlowRenderer({
   }, [data == null ? void 0 : data.edges, edgeTypeDefsMap, edgeRenderers]);
   if (!data) return null;
   const resolvedDefaultViewport = defaultViewportProp != null ? defaultViewportProp : !fitView && data.viewport ? data.viewport : void 0;
-  return /* @__PURE__ */ import_react3.default.createElement(import_react4.ReactFlowProvider, null, /* @__PURE__ */ import_react3.default.createElement(
+  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(
     "div",
     {
       className,
-      style: __spreadValues({ width: "100%", height: "100%" }, style)
+      style: __spreadValues({ width: "100%", height: "100%", background: "transparent" }, style)
     },
-    /* @__PURE__ */ import_react3.default.createElement(
-      import_react4.ReactFlow,
+    /* @__PURE__ */ import_react4.default.createElement(
+      import_react5.ReactFlow,
       {
         nodes: (_a = data.nodes) != null ? _a : [],
         edges: styledEdges,
         nodeTypes,
         edgeTypes: customEdgeTypes,
         defaultViewport: resolvedDefaultViewport,
-        fitView,
+        fitView: bounds ? false : fitView,
+        translateExtent,
         onNodeClick,
         onEdgeClick,
         onMoveEnd: onViewportChange ? ((_, vp) => {
           onViewportChange(vp);
         }) : void 0,
-        nodesDraggable: interactive ? void 0 : false,
+        nodesDraggable: interactive,
         nodesConnectable: false,
         elementsSelectable: interactive || !!onNodeClick || !!onEdgeClick,
         panOnDrag: interactive,
@@ -698,20 +945,23 @@ function FlowRenderer({
         zoomOnPinch: interactive,
         zoomOnDoubleClick: false
       },
-      background && /* @__PURE__ */ import_react3.default.createElement(import_react4.Background, null),
-      controls && /* @__PURE__ */ import_react3.default.createElement(import_react4.Controls, null),
-      minimap && /* @__PURE__ */ import_react3.default.createElement(
-        import_react4.MiniMap,
+      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,
         {
           nodeColor: minimapNodeColor
         }
       ),
-      bounds && /* @__PURE__ */ import_react3.default.createElement(
+      bounds && /* @__PURE__ */ import_react4.default.createElement(
         FocusHandler,
         {
           bounds,
           padding: focusPadding != null ? focusPadding : 0.1,
-          animation: focusAnimation != null ? focusAnimation : true
+          animation: focusAnimation != null ? focusAnimation : true,
+          mode: focusMode,
+          responsive: responsiveFit != null ? responsiveFit : true
         }
       ),
       children