@01.software/sdk 0.2.9-dev.260310.cf511cb → 0.2.9-dev.260311.892250f

package/dist/{flow.cjs → ui/flow.cjs}

@@ -62,9 +62,9 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
-// src/components/FlowRenderer/index.tsx
-var FlowRenderer_exports = {};
-__export(FlowRenderer_exports, {
+// src/ui/Flow/index.tsx
+var Flow_exports = {};
+__export(Flow_exports, {
   BUILT_IN_EDGE_TYPES: () => BUILT_IN_EDGE_TYPES,
   BUILT_IN_NODE_TYPES: () => BUILT_IN_NODE_TYPES,
   FlowRenderer: () => FlowRenderer,
@@ -72,11 +72,11 @@ __export(FlowRenderer_exports, {
   isFrameNode: () => isFrameNode,
   useFlow: () => useFlow
 });
-module.exports = __toCommonJS(FlowRenderer_exports);
+module.exports = __toCommonJS(Flow_exports);
 var import_react2 = __toESM(require("react"), 1);
 var import_react3 = require("@xyflow/react");
 
-// src/components/FlowRenderer/types.ts
+// src/ui/Flow/types.ts
 function isDynamicNode(node) {
   return node.type === "dynamic";
 }
@@ -84,7 +84,7 @@ function isFrameNode(node) {
   return node.type === "frame";
 }
 
-// src/components/FlowRenderer/built-in-node-types.ts
+// src/ui/Flow/built-in-node-types.ts
 var BUILT_IN_NODE_TYPES = [
   {
     slug: "text",
@@ -107,68 +107,69 @@ var BUILT_IN_NODE_TYPES = [
   }
 ];
 
-// src/components/FlowRenderer/built-in-edge-types.ts
+// src/ui/Flow/built-in-edge-types.ts
 var BUILT_IN_EDGE_TYPES = [
   {
     slug: "default",
     name: "Default",
     color: "",
     strokeWidth: 2,
-    animated: true,
+    animated: false,
     lineStyle: "default",
+    markerStart: "none",
+    markerEnd: "arrow",
     fields: []
   }
 ];
 
-// src/components/FlowRenderer/useFlow.ts
+// src/ui/Flow/useFlow.ts
 var import_react_query = require("@tanstack/react-query");
 var import_react = require("react");
-var UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-function isId(value) {
-  return UUID_RE.test(value);
-}
-function apiNodeTypeToNodeTypeDef(doc) {
+function toNodeTypeDef(doc) {
   var _a, _b, _c, _d;
   return {
     slug: String((_a = doc.slug) != null ? _a : ""),
-    name: String((_b = doc.name) != null ? _b : ""),
+    name: String((_b = doc.title) != null ? _b : ""),
     color: String((_c = doc.color) != null ? _c : "#e5e7eb"),
     defaultSize: (_d = doc.defaultSize) != null ? _d : { width: 200, height: 200 },
     fields: Array.isArray(doc.fields) ? doc.fields : [],
     transparentBackground: Boolean(doc.transparentBackground)
   };
 }
-function apiEdgeTypeToEdgeTypeDef(doc) {
-  var _a, _b, _c, _d, _e, _f;
+function toEdgeTypeDef(doc) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   return {
     slug: String((_a = doc.slug) != null ? _a : ""),
     name: String((_b = doc.title) != null ? _b : ""),
     color: String((_c = doc.color) != null ? _c : ""),
     strokeWidth: (_d = doc.strokeWidth) != null ? _d : 2,
-    animated: (_e = doc.animated) != null ? _e : true,
+    animated: (_e = doc.animated) != null ? _e : false,
     lineStyle: String((_f = doc.lineStyle) != null ? _f : "default"),
+    markerStart: String((_g = doc.markerStart) != null ? _g : "none"),
+    markerEnd: String((_h = doc.markerEnd) != null ? _h : "arrow"),
     fields: Array.isArray(doc.fields) ? doc.fields : []
   };
 }
-function useFlow(slugOrId, options) {
-  var _a, _b;
-  const { client, enabled = true } = options;
-  const idDetected = isId(slugOrId);
+function useFlow(options) {
+  var _a, _b, _c;
+  const { client, slug, id, enabled = true } = options;
+  const hasIdentifier = !!(slug || id);
+  const identifier = (_a = id != null ? id : slug) != null ? _a : "";
   const flowQuery = (0, import_react_query.useQuery)({
-    queryKey: ["flows", slugOrId],
+    queryKey: ["flows", identifier],
     queryFn: () => __async(null, null, function* () {
-      if (idDetected) {
-        return client.from("flows").findById(slugOrId);
+      if (id) {
+        return client.from("flows").findById(id);
       }
       const result = yield client.from("flows").find({
-        where: { slug: { equals: slugOrId } },
+        where: { slug: { equals: slug } },
         limit: 1
       });
       const doc = result.docs[0];
-      if (!doc) throw new Error(`Flow not found: ${slugOrId}`);
+      if (!doc) throw new Error(`Flow not found: ${slug}`);
       return doc;
     }),
-    enabled
+    enabled: enabled && hasIdentifier
   }, client.queryClient);
   const nodeTypesQuery = (0, import_react_query.useQuery)({
     queryKey: ["flow-node-types"],
@@ -188,14 +189,14 @@ function useFlow(slugOrId, options) {
   }, client.queryClient);
   const nodeTypeDefs = (0, import_react.useMemo)(() => {
     var _a2;
-    const apiDefs = ((_a2 = nodeTypesQuery.data) != null ? _a2 : []).map(apiNodeTypeToNodeTypeDef);
+    const apiDefs = ((_a2 = nodeTypesQuery.data) != null ? _a2 : []).map(toNodeTypeDef);
     const builtInSlugs = new Set(BUILT_IN_NODE_TYPES.map((t) => t.slug));
     const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug));
     return [...BUILT_IN_NODE_TYPES, ...customDefs];
   }, [nodeTypesQuery.data]);
   const edgeTypeDefs = (0, import_react.useMemo)(() => {
     var _a2;
-    const apiDefs = ((_a2 = edgeTypesQuery.data) != null ? _a2 : []).map(apiEdgeTypeToEdgeTypeDef);
+    const apiDefs = ((_a2 = edgeTypesQuery.data) != null ? _a2 : []).map(toEdgeTypeDef);
     const builtInSlugs = new Set(BUILT_IN_EDGE_TYPES.map((t) => t.slug));
     const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug));
     return [...BUILT_IN_EDGE_TYPES, ...customDefs];
@@ -208,11 +209,11 @@ function useFlow(slugOrId, options) {
     edgeTypeDefs,
     flow,
     isLoading: flowQuery.isLoading || nodeTypesQuery.isLoading || edgeTypesQuery.isLoading,
-    error: (_b = (_a = flowQuery.error) != null ? _a : nodeTypesQuery.error) != null ? _b : edgeTypesQuery.error
+    error: (_c = (_b = flowQuery.error) != null ? _b : nodeTypesQuery.error) != null ? _c : edgeTypesQuery.error
   };
 }
 
-// src/components/FlowRenderer/index.tsx
+// src/ui/Flow/index.tsx
 function sanitizeUrl(url) {
   if (!url) return url;
   try {
@@ -223,6 +224,11 @@ function sanitizeUrl(url) {
     return void 0;
   }
 }
+function toMarkerType(value) {
+  if (value === "arrow") return import_react3.MarkerType.Arrow;
+  if (value === "arrowclosed") return import_react3.MarkerType.ArrowClosed;
+  return void 0;
+}
 function renderFieldValue(key, val, fieldDef) {
   if (val == null || val === "") return null;
   const fieldType = fieldDef == null ? void 0 : fieldDef.fieldType;
@@ -236,87 +242,58 @@ function renderFieldValue(key, val, fieldDef) {
         key,
         src: safeUrl,
         alt: "",
-        style: { width: "100%", marginTop: 8, borderRadius: 4 }
+        draggable: false,
+        style: { flex: 1, minHeight: 0, width: "100%", objectFit: "contain" }
       }
     );
   }
-  if (fieldType === "url") {
-    const safeUrl = sanitizeUrl(String(val));
-    if (!safeUrl) return null;
-    return /* @__PURE__ */ import_react2.default.createElement(
-      "a",
-      {
-        key,
-        href: safeUrl,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        style: { display: "block", marginTop: 4, fontSize: "0.85em", color: "#3b82f6", wordBreak: "break-all" }
-      },
-      String(val)
-    );
-  }
-  if (fieldType === "color") {
-    return /* @__PURE__ */ import_react2.default.createElement("div", { key, style: { display: "flex", alignItems: "center", gap: 6, marginTop: 4 } }, /* @__PURE__ */ import_react2.default.createElement(
-      "span",
-      {
-        style: {
-          display: "inline-block",
-          width: 14,
-          height: 14,
-          borderRadius: 3,
-          backgroundColor: String(val),
-          border: "1px solid rgba(0,0,0,0.1)",
-          flexShrink: 0
-        }
+  return /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      key,
+      style: {
+        fontSize: 11,
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        overflow: "hidden",
+        flexShrink: 0
       }
-    ), /* @__PURE__ */ import_react2.default.createElement("span", { style: { fontSize: "0.85em" } }, String(val)));
-  }
-  if (fieldType === "toggle") {
-    const isOn = val === true || val === "true";
-    return /* @__PURE__ */ import_react2.default.createElement("p", { key, style: { margin: "4px 0 0", fontSize: "0.85em" } }, isOn ? "On" : "Off");
-  }
-  return /* @__PURE__ */ import_react2.default.createElement("p", { key, style: { margin: "4px 0 0", fontSize: "0.85em", whiteSpace: "pre-wrap" } }, String(val));
+    },
+    String(val)
+  );
 }
 function DefaultDynamicNode({ data }) {
   const d = data;
-  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: 12 } }, /* @__PURE__ */ import_react2.default.createElement("strong", null, d.label), d.fields && Object.entries(d.fields).map(([key, val]) => renderFieldValue(key, val)));
+  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" } }, d.fields && Object.entries(d.fields).filter(([, v]) => v != null && v !== "").map(([key, val]) => renderFieldValue(key, val)));
 }
 function EnhancedDynamicNode({ data, typeDef }) {
-  const fieldMap = new Map(typeDef.fields.map((f) => [f.name, f]));
-  const transparent = typeDef.transparentBackground;
-  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: transparent ? 0 : void 0 } }, !transparent && /* @__PURE__ */ import_react2.default.createElement(
-    "div",
-    {
-      style: {
-        backgroundColor: typeDef.color,
-        padding: "4px 12px",
-        borderRadius: "6px 6px 0 0",
-        fontSize: "0.75em",
-        fontWeight: 600,
-        color: "rgba(0,0,0,0.6)"
-      }
-    },
-    typeDef.name
-  ), /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: transparent ? 0 : 12 } }, /* @__PURE__ */ import_react2.default.createElement("strong", { style: { display: "block", marginBottom: 4 } }, data.label), data.fields && Object.entries(data.fields).map(([key, val]) => {
-    const fieldDef = fieldMap.get(key);
-    return renderFieldValue(key, val, fieldDef);
-  })));
+  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" } }, typeDef.fields.map((f) => {
+    const val = data.fields[f.name];
+    if (val == null || val === "") return null;
+    return renderFieldValue(f.name, val, f);
+  }));
 }
 function DefaultFrameNode({ data }) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const d = data;
-  const color = (_a = d.color) != null ? _a : "rgba(128,128,128,0.06)";
+  const baseColor = (_a = d.color) != null ? _a : "rgba(128,128,128,0.15)";
   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;
+  const bgColor = (() => {
+    const m = baseColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (m) return `rgba(${m[1]},${m[2]},${m[3]},${opacity})`;
+    return baseColor;
+  })();
   return /* @__PURE__ */ import_react2.default.createElement(
     "div",
     {
       style: {
-        backgroundColor: color,
+        backgroundColor: bgColor,
         padding,
         width: "100%",
         height: "100%",
-        borderRadius: 8,
-        border: "2px dashed rgba(128,128,128,0.3)"
+        border: borderStyle === "none" ? "none" : `2px ${borderStyle} rgba(128,128,128,0.3)`
       }
     },
     /* @__PURE__ */ import_react2.default.createElement(
@@ -359,40 +336,87 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap) {
   types.frame = DefaultFrameNode;
   return types;
 }
+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;
+  });
+}
 function FlowRenderer({
   data,
   className,
   style,
   nodeRenderers,
   nodeTypeDefs,
+  edgeTypeDefs,
   background = true,
   interactive = false,
   fitView = true,
   onNodeClick,
   onEdgeClick
 }) {
-  var _a, _b;
+  var _a;
   const nodeTypeDefsMap = import_react2.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_react2.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_react2.default.useMemo(
     () => createNodeTypes(nodeRenderers, nodeTypeDefsMap),
     [nodeRenderers, nodeTypeDefsMap]
   );
+  const styledEdges = import_react2.default.useMemo(
+    () => {
+      var _a2;
+      return applyEdgeStyles((_a2 = data == null ? void 0 : data.edges) != null ? _a2 : [], edgeTypeDefsMap);
+    },
+    [data == null ? void 0 : data.edges, edgeTypeDefsMap]
+  );
   if (!data) return null;
   const defaultViewport = !fitView && data.viewport ? data.viewport : void 0;
   return /* @__PURE__ */ import_react2.default.createElement(import_react3.ReactFlowProvider, null, /* @__PURE__ */ import_react2.default.createElement("div", { className, style: __spreadValues({ width: "100%", height: "100%" }, style) }, /* @__PURE__ */ import_react2.default.createElement(
     import_react3.ReactFlow,
     {
       nodes: (_a = data.nodes) != null ? _a : [],
-      edges: (_b = data.edges) != null ? _b : [],
+      edges: styledEdges,
       nodeTypes,
       defaultViewport,
       fitView,
       onNodeClick,
       onEdgeClick,
-      nodesDraggable: interactive,
+      nodesDraggable: interactive ? void 0 : false,
       nodesConnectable: false,
       elementsSelectable: interactive || !!onNodeClick || !!onEdgeClick,
       panOnDrag: interactive,

package/dist/ui/flow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/Flow/index.tsx","../../src/ui/Flow/types.ts","../../src/ui/Flow/built-in-node-types.ts","../../src/ui/Flow/built-in-edge-types.ts","../../src/ui/Flow/useFlow.ts"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport {\n  ReactFlow,\n  ReactFlowProvider,\n  Background,\n  MarkerType,\n  type NodeTypes,\n  type NodeProps,\n  type Edge,\n} from '@xyflow/react'\nimport type {\n  CanvasData,\n  DynamicNodeData,\n  DynamicNodeSlotProps,\n  EdgeTypeDef,\n  FlowEdge,\n  FlowNode,\n  FrameNodeData,\n  NodeTypeDef,\n  NodeTypeFieldDef,\n} from './types'\n\nexport type {\n  CanvasData,\n  DynamicNodeSlotProps,\n  FlowNode,\n  FlowEdge,\n  FlowViewport,\n  FlowNodePosition,\n  FlowNodeData,\n  DynamicNodeData,\n  FrameNodeData,\n  NodeTypeDef,\n  NodeTypeFieldDef,\n  EdgeTypeDef,\n} from './types'\nexport { isDynamicNode, isFrameNode } from './types'\nexport { BUILT_IN_NODE_TYPES } from './built-in-node-types'\nexport { BUILT_IN_EDGE_TYPES } from './built-in-edge-types'\nexport { useFlow } from './useFlow'\nexport type { SDKClient, UseFlowOptions, UseFlowResult } from './useFlow'\n\n// ── Helpers ──\n\nfunction sanitizeUrl(url: string | undefined): string | undefined {\n  if (!url) return url\n  try {\n    const parsed = new URL(url)\n    if (parsed.protocol === 'http:' || parsed.protocol === 'https:') return url\n    return undefined\n  } catch {\n    return undefined\n  }\n}\n\nfunction toMarkerType(value: string): MarkerType | undefined {\n  if (value === 'arrow') return MarkerType.Arrow\n  if (value === 'arrowclosed') return MarkerType.ArrowClosed\n  return undefined\n}\n\n// ── Field renderer (type-aware, matching console style) ──\n\nfunction renderFieldValue(\n  key: string,\n  val: unknown,\n  fieldDef?: NodeTypeFieldDef,\n): React.ReactNode {\n  if (val == null || val === '') return null\n\n  const fieldType = fieldDef?.fieldType\n\n  // Image field — image only, no decoration\n  if (fieldType === 'image' || (typeof val === 'object' && val !== null && 'url' in val)) {\n    const imgUrl = typeof val === 'string' ? val : (val as { url?: string })?.url\n    const safeUrl = sanitizeUrl(imgUrl)\n    if (!safeUrl) return null\n    return (\n      <img\n        key={key}\n        src={safeUrl}\n        alt=\"\"\n        draggable={false}\n        style={{ flex: 1, minHeight: 0, width: '100%', objectFit: 'contain' }}\n      />\n    )\n  }\n\n  // All other fields — text only\n  return (\n    <div\n      key={key}\n      style={{\n        fontSize: 11,\n        whiteSpace: 'pre-wrap',\n        wordBreak: 'break-word',\n        overflow: 'hidden',\n        flexShrink: 0,\n      }}\n    >\n      {String(val)}\n    </div>\n  )\n}\n\n// ── Default dynamic node renderer (no typeDef) ──\n\nfunction DefaultDynamicNode({ data }: NodeProps) {\n  const d = data as unknown as DynamicNodeData\n  return (\n    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>\n      {d.fields &&\n        Object.entries(d.fields)\n          .filter(([, v]) => v != null && v !== '')\n          .map(([key, val]) => renderFieldValue(key, val))}\n    </div>\n  )\n}\n\n// ── Enhanced dynamic node renderer (with NodeTypeDef) ──\n\nfunction EnhancedDynamicNode({ data, typeDef }: { data: DynamicNodeData; typeDef: NodeTypeDef }) {\n  return (\n    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>\n      {typeDef.fields.map((f) => {\n        const val = data.fields[f.name]\n        if (val == null || val === '') return null\n        return renderFieldValue(f.name, val, f)\n      })}\n    </div>\n  )\n}\n\n// ── Default frame node renderer ──\n\nfunction DefaultFrameNode({ data }: NodeProps) {\n  const d = data as unknown as FrameNodeData\n  const baseColor = d.color ?? 'rgba(128,128,128,0.15)'\n  const padding = d.padding ?? 20\n  const borderStyle = d.borderStyle ?? 'dashed'\n  const opacity = d.opacity ?? 0.15\n\n  // Apply opacity to rgba colors\n  const bgColor = (() => {\n    const m = baseColor.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/)\n    if (m) return `rgba(${m[1]},${m[2]},${m[3]},${opacity})`\n    return baseColor\n  })()\n\n  return (\n    <div\n      style={{\n        backgroundColor: bgColor,\n        padding,\n        width: '100%',\n        height: '100%',\n        border: borderStyle === 'none' ? 'none' : `2px ${borderStyle} rgba(128,128,128,0.3)`,\n      }}\n    >\n      <div\n        style={{\n          fontSize: 11,\n          fontWeight: 600,\n          color: 'rgba(128,128,128,0.6)',\n          userSelect: 'none',\n        }}\n      >\n        {d.label}\n      </div>\n    </div>\n  )\n}\n\n// ── Node types builder ──\n\nfunction createNodeTypes(\n  nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>,\n  nodeTypeDefsMap?: Map<string, NodeTypeDef>,\n): NodeTypes {\n  const types: NodeTypes = {} as NodeTypes\n\n  // Dynamic node type\n  types.dynamic = ((props: NodeProps) => {\n    const d = props.data as unknown as DynamicNodeData\n    const typeDef = nodeTypeDefsMap?.get(d.nodeTypeSlug)\n    const CustomRenderer = nodeRenderers?.[d.nodeTypeSlug]\n    if (CustomRenderer) {\n      return (\n        <CustomRenderer\n          id={props.id}\n          nodeTypeSlug={d.nodeTypeSlug}\n          label={d.label}\n          fields={d.fields}\n          nodeTypeDef={typeDef}\n        />\n      )\n    }\n    if (typeDef) {\n      return <EnhancedDynamicNode data={d} typeDef={typeDef} />\n    }\n    return <DefaultDynamicNode {...props} />\n  }) as NodeTypes[string]\n\n  // Frame node type\n  types.frame = DefaultFrameNode as NodeTypes[string]\n\n  return types\n}\n\n// ── Edge style resolver ──\n\nconst EDGE_TYPE_MAP: Record<string, string> = {\n  step: 'step',\n  smoothstep: 'smoothstep',\n  bezier: 'default',\n  default: 'default',\n}\n\nfunction applyEdgeStyles(\n  edges: FlowEdge[],\n  edgeTypeDefsMap?: Map<string, EdgeTypeDef>,\n): Edge[] {\n  if (!edgeTypeDefsMap?.size) return edges as unknown as Edge[]\n\n  return edges.map((edge) => {\n    const slug = edge.edgeTypeSlug\n    if (!slug) return edge as unknown as Edge\n\n    const def = edgeTypeDefsMap.get(slug)\n    if (!def) return edge as unknown as Edge\n\n    const styled: Edge = { ...(edge as unknown as Edge) }\n\n    // Edge type (line style) — canvas value takes precedence\n    if (!styled.type && def.lineStyle) {\n      styled.type = EDGE_TYPE_MAP[def.lineStyle] ?? 'default'\n    }\n\n    // Visual style — canvas style merged with def as fallback\n    styled.style = {\n      ...(def.color ? { stroke: def.color } : undefined),\n      ...(def.strokeWidth ? { strokeWidth: def.strokeWidth } : undefined),\n      ...edge.style,\n    }\n\n    // Animation — canvas value takes precedence\n    if (styled.animated == null && def.animated) styled.animated = true\n\n    // Markers — canvas value takes precedence over def\n    if (!styled.markerStart) {\n      const startType = toMarkerType(def.markerStart)\n      if (startType) {\n        styled.markerStart = { type: startType, ...(def.color ? { color: def.color } : undefined) }\n      }\n    }\n    if (!styled.markerEnd) {\n      const endType = toMarkerType(def.markerEnd)\n      if (endType) {\n        styled.markerEnd = { type: endType, ...(def.color ? { color: def.color } : undefined) }\n      }\n    }\n\n    return styled\n  })\n}\n\n// ── FlowRenderer ──\n\n/**\n * Renders a Flow canvas in read-only mode.\n *\n * Requires `@xyflow/react` peer dependency and its CSS:\n * ```ts\n * import '@xyflow/react/dist/style.css'\n * ```\n */\nexport interface FlowRendererProps {\n  /** Canvas data from Flow document's `canvas` field */\n  data: CanvasData\n  /** Container className */\n  className?: string\n  /** Container style */\n  style?: React.CSSProperties\n  /** Custom renderers by node type slug (e.g., `{ 'product-card': MyProductCard }`) */\n  nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>\n  /** Node type definitions for enhanced rendering (field-type-aware display) */\n  nodeTypeDefs?: NodeTypeDef[]\n  /** Edge type definitions for styled edges (color, stroke, markers, animation) */\n  edgeTypeDefs?: EdgeTypeDef[]\n  /** Show background pattern (default: true) */\n  background?: boolean\n  /** Allow user interaction - pan, zoom (default: false for read-only display) */\n  interactive?: boolean\n  /** Fit view on mount (default: true) */\n  fitView?: boolean\n  /** Called when a node is clicked */\n  onNodeClick?: (event: React.MouseEvent, node: FlowNode) => void\n  /** Called when an edge is clicked */\n  onEdgeClick?: (event: React.MouseEvent, edge: FlowEdge) => void\n}\n\nexport function FlowRenderer({\n  data,\n  className,\n  style,\n  nodeRenderers,\n  nodeTypeDefs,\n  edgeTypeDefs,\n  background = true,\n  interactive = false,\n  fitView = true,\n  onNodeClick,\n  onEdgeClick,\n}: FlowRendererProps) {\n  const nodeTypeDefsMap = React.useMemo(() => {\n    if (!nodeTypeDefs?.length) return undefined\n    return new Map(nodeTypeDefs.map((d) => [d.slug, d]))\n  }, [nodeTypeDefs])\n\n  const edgeTypeDefsMap = React.useMemo(() => {\n    if (!edgeTypeDefs?.length) return undefined\n    return new Map(edgeTypeDefs.map((d) => [d.slug, d]))\n  }, [edgeTypeDefs])\n\n  const nodeTypes = React.useMemo(\n    () => createNodeTypes(nodeRenderers, nodeTypeDefsMap),\n    [nodeRenderers, nodeTypeDefsMap],\n  )\n\n  const styledEdges = React.useMemo(\n    () => applyEdgeStyles(data?.edges ?? [], edgeTypeDefsMap),\n    [data?.edges, edgeTypeDefsMap],\n  )\n\n  if (!data) return null\n\n  const defaultViewport = !fitView && data.viewport ? data.viewport : undefined\n\n  return (\n    <ReactFlowProvider>\n      <div className={className} style={{ width: '100%', height: '100%', ...style }}>\n        <ReactFlow\n          nodes={(data.nodes ?? []) as unknown as Parameters<typeof ReactFlow>[0]['nodes']}\n          edges={styledEdges}\n          nodeTypes={nodeTypes}\n          defaultViewport={defaultViewport}\n          fitView={fitView}\n          onNodeClick={onNodeClick as Parameters<typeof ReactFlow>[0]['onNodeClick']}\n          onEdgeClick={onEdgeClick as Parameters<typeof ReactFlow>[0]['onEdgeClick']}\n          nodesDraggable={interactive ? undefined : false}\n          nodesConnectable={false}\n          elementsSelectable={interactive || !!onNodeClick || !!onEdgeClick}\n          panOnDrag={interactive}\n          zoomOnScroll={interactive}\n          zoomOnPinch={interactive}\n          zoomOnDoubleClick={false}\n        >\n          {background && <Background />}\n        </ReactFlow>\n      </div>\n    </ReactFlowProvider>\n  )\n}\n","import type React from 'react'\n\n// ── Dynamic node data ──\n\nexport interface DynamicNodeData {\n  nodeTypeSlug: string\n  label: string\n  fields: Record<string, unknown>\n}\n\nexport type FlowNodeData = DynamicNodeData & Record<string, unknown>\n\n// ── Canvas types (mirrors @xyflow/react but standalone) ──\n\nexport interface FlowNodePosition {\n  x: number\n  y: number\n}\n\nexport interface FlowNode {\n  id: string\n  type?: string\n  position: FlowNodePosition\n  data: FlowNodeData\n  style?: React.CSSProperties\n  width?: number\n  height?: number\n  measured?: { width?: number; height?: number }\n  draggable?: boolean\n  selectable?: boolean\n  [key: string]: unknown\n}\n\nexport interface FlowEdge {\n  id: string\n  source: string\n  target: string\n  sourceHandle?: string | null\n  targetHandle?: string | null\n  type?: string\n  style?: React.CSSProperties\n  animated?: boolean\n  markerStart?: unknown\n  markerEnd?: unknown\n  edgeTypeSlug?: string\n  fields?: Record<string, unknown>\n  [key: string]: unknown\n}\n\nexport interface FlowViewport {\n  x: number\n  y: number\n  zoom: number\n}\n\nexport interface CanvasData {\n  nodes: FlowNode[]\n  edges: FlowEdge[]\n  viewport: FlowViewport\n}\n\n// ── Node type definitions (mirrors console's NodeTypeDef) ──\n\nexport interface NodeTypeFieldDef {\n  name: string\n  label: string\n  fieldType: 'text' | 'textarea' | 'number' | 'url' | 'color' | 'image' | 'select' | 'toggle'\n  options?: { label: string; value: string }[]\n  defaultValue?: string\n  required?: boolean\n}\n\nexport interface NodeTypeDef {\n  slug: string\n  name: string\n  color: string\n  defaultSize: { width: number; height: number }\n  fields: NodeTypeFieldDef[]\n  transparentBackground?: boolean\n}\n\n// ── Edge type definitions (mirrors console's EdgeTypeDef) ──\n\nexport interface EdgeTypeDef {\n  slug: string\n  name: string\n  color: string\n  strokeWidth: number\n  animated: boolean\n  lineStyle: string\n  markerStart: string\n  markerEnd: string\n  fields: NodeTypeFieldDef[]\n}\n\n// ── Type guards ──\n\nexport function isDynamicNode(node: FlowNode): node is FlowNode & { data: DynamicNodeData } {\n  return node.type === 'dynamic'\n}\n\nexport function isFrameNode(node: FlowNode): node is FlowNode & { data: FrameNodeData } {\n  return node.type === 'frame'\n}\n\n// ── Component slot props ──\n\nexport interface DynamicNodeSlotProps {\n  id: string\n  nodeTypeSlug: string\n  label: string\n  fields: Record<string, unknown>\n  nodeTypeDef?: NodeTypeDef\n}\n\n// ── Frame node data ──\n\nexport interface FrameNodeData {\n  label: string\n  color?: string\n  padding?: number\n  borderStyle?: 'dashed' | 'solid' | 'none'\n  opacity?: number\n}\n","import type { NodeTypeDef } from './types'\n\nexport const BUILT_IN_NODE_TYPES: NodeTypeDef[] = [\n  {\n    slug: 'text',\n    name: 'Text',\n    color: '#e5e7eb',\n    defaultSize: { width: 200, height: 200 },\n    fields: [{ name: 'body', label: 'Body', fieldType: 'textarea' }],\n  },\n  {\n    slug: 'image',\n    name: 'Image',\n    color: '#e5e7eb',\n    transparentBackground: true,\n    defaultSize: { width: 200, height: 200 },\n    fields: [\n      { name: 'image', label: 'Image', fieldType: 'image' },\n      { name: 'alt', label: 'Alt Text', fieldType: 'text' },\n      { name: 'caption', label: 'Caption', fieldType: 'text' },\n    ],\n  },\n]\n","import type { EdgeTypeDef } from './types'\n\nexport const BUILT_IN_EDGE_TYPES: EdgeTypeDef[] = [\n  {\n    slug: 'default',\n    name: 'Default',\n    color: '',\n    strokeWidth: 2,\n    animated: false,\n    lineStyle: 'default',\n    markerStart: 'none',\n    markerEnd: 'arrow',\n    fields: [],\n  },\n]\n","'use client'\n\nimport { useQuery, type QueryClient } from '@tanstack/react-query'\nimport { useMemo } from 'react'\nimport type { CanvasData, NodeTypeDef, EdgeTypeDef } from './types'\nimport { BUILT_IN_NODE_TYPES } from './built-in-node-types'\nimport { BUILT_IN_EDGE_TYPES } from './built-in-edge-types'\n\n// ── Client interface ──\n// Structurally compatible with both BrowserClient and ServerClient.\n// Lists only the collections useFlow actually queries so the generic\n// `from<T extends PublicCollection>` on the real clients satisfies this.\n\ntype FlowCollection = 'flows' | 'flow-node-types' | 'flow-edge-types'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyFn = (...args: any[]) => any\n\nexport interface SDKClient {\n  from(collection: FlowCollection): {\n    find: AnyFn\n    findById: AnyFn\n  }\n  queryClient: QueryClient\n}\n\n// ── Options & Result ──\n\nexport interface UseFlowOptions {\n  /** SDK client instance (BrowserClient or ServerClient) */\n  client: SDKClient\n  /** Flow slug (URL-friendly identifier) */\n  slug?: string\n  /** Flow document ID (UUID) */\n  id?: string\n  /** Enable/disable data fetching (default: true) */\n  enabled?: boolean\n}\n\nexport interface UseFlowResult {\n  data: CanvasData | undefined\n  nodeTypeDefs: NodeTypeDef[]\n  edgeTypeDefs: EdgeTypeDef[]\n  flow: Record<string, unknown> | undefined\n  isLoading: boolean\n  error: Error | null\n}\n\n// ── Helpers ──\n\nfunction toNodeTypeDef(doc: Record<string, unknown>): NodeTypeDef {\n  return {\n    slug: String(doc.slug ?? ''),\n    name: String(doc.title ?? ''),\n    color: String(doc.color ?? '#e5e7eb'),\n    defaultSize: (doc.defaultSize as NodeTypeDef['defaultSize']) ?? { width: 200, height: 200 },\n    fields: Array.isArray(doc.fields)\n      ? (doc.fields as NodeTypeDef['fields'])\n      : [],\n    transparentBackground: Boolean(doc.transparentBackground),\n  }\n}\n\nfunction toEdgeTypeDef(doc: Record<string, unknown>): EdgeTypeDef {\n  return {\n    slug: String(doc.slug ?? ''),\n    name: String(doc.title ?? ''),\n    color: String(doc.color ?? ''),\n    strokeWidth: (doc.strokeWidth as number) ?? 2,\n    animated: (doc.animated as boolean) ?? false,\n    lineStyle: String(doc.lineStyle ?? 'default'),\n    markerStart: String(doc.markerStart ?? 'none'),\n    markerEnd: String(doc.markerEnd ?? 'arrow'),\n    fields: Array.isArray(doc.fields)\n      ? (doc.fields as EdgeTypeDef['fields'])\n      : [],\n  }\n}\n\n// ── Hook ──\n\nexport function useFlow(options: UseFlowOptions): UseFlowResult {\n  const { client, slug, id, enabled = true } = options\n  const hasIdentifier = !!(slug || id)\n  const identifier = (id ?? slug) ?? ''\n\n  // Fetch flow document\n  const flowQuery = useQuery<Record<string, unknown>>({\n    queryKey: ['flows', identifier],\n    queryFn: async () => {\n      if (id) {\n        return client.from('flows').findById(id)\n      }\n      const result = await client.from('flows').find({\n        where: { slug: { equals: slug } },\n        limit: 1,\n      })\n      const doc = result.docs[0]\n      if (!doc) throw new Error(`Flow not found: ${slug}`)\n      return doc\n    },\n    enabled: enabled && hasIdentifier,\n  }, client.queryClient)\n\n  // Fetch tenant's custom node types\n  const nodeTypesQuery = useQuery<Record<string, unknown>[]>({\n    queryKey: ['flow-node-types'],\n    queryFn: async () => {\n      const result = await client.from('flow-node-types').find({ limit: 100 })\n      return result.docs\n    },\n    enabled,\n  }, client.queryClient)\n\n  // Fetch tenant's custom edge types\n  const edgeTypesQuery = useQuery<Record<string, unknown>[]>({\n    queryKey: ['flow-edge-types'],\n    queryFn: async () => {\n      const result = await client.from('flow-edge-types').find({ limit: 100 })\n      return result.docs\n    },\n    enabled,\n  }, client.queryClient)\n\n  // Merge built-in + API node types\n  const nodeTypeDefs = useMemo<NodeTypeDef[]>(() => {\n    const apiDefs = (nodeTypesQuery.data ?? []).map(toNodeTypeDef)\n    const builtInSlugs = new Set(BUILT_IN_NODE_TYPES.map((t) => t.slug))\n    const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug))\n    return [...BUILT_IN_NODE_TYPES, ...customDefs]\n  }, [nodeTypesQuery.data])\n\n  // Merge built-in + API edge types\n  const edgeTypeDefs = useMemo<EdgeTypeDef[]>(() => {\n    const apiDefs = (edgeTypesQuery.data ?? []).map(toEdgeTypeDef)\n    const builtInSlugs = new Set(BUILT_IN_EDGE_TYPES.map((t) => t.slug))\n    const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug))\n    return [...BUILT_IN_EDGE_TYPES, ...customDefs]\n  }, [edgeTypesQuery.data])\n\n  const flow = flowQuery.data\n  const canvas = flow?.canvas as CanvasData | undefined\n\n  return {\n    data: canvas,\n    nodeTypeDefs,\n    edgeTypeDefs,\n    flow,\n    isLoading: flowQuery.isLoading || nodeTypesQuery.isLoading || edgeTypesQuery.isLoading,\n    error: (flowQuery.error as Error | null) ?? (nodeTypesQuery.error as Error | null) ?? (edgeTypesQuery.error as Error | null),\n  }\n}\n"],"mappings":"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","names":["import_react","_a","React","_a"]}

package/dist/{flow.d.cts → ui/flow.d.cts}

@@ -24,6 +24,7 @@ interface FlowNode {
         height?: number;
     };
     draggable?: boolean;
+    selectable?: boolean;
     [key: string]: unknown;
 }
 interface FlowEdge {
@@ -34,6 +35,9 @@ interface FlowEdge {
     targetHandle?: string | null;
     type?: string;
     style?: React.CSSProperties;
+    animated?: boolean;
+    markerStart?: unknown;
+    markerEnd?: unknown;
     edgeTypeSlug?: string;
     fields?: Record<string, unknown>;
     [key: string]: unknown;
@@ -77,6 +81,8 @@ interface EdgeTypeDef {
     strokeWidth: number;
     animated: boolean;
     lineStyle: string;
+    markerStart: string;
+    markerEnd: string;
     fields: NodeTypeFieldDef[];
 }
 declare function isDynamicNode(node: FlowNode): node is FlowNode & {
@@ -96,23 +102,31 @@ interface FrameNodeData {
     label: string;
     color?: string;
     padding?: number;
+    borderStyle?: 'dashed' | 'solid' | 'none';
+    opacity?: number;
 }
 
 declare const BUILT_IN_NODE_TYPES: NodeTypeDef[];
 
 declare const BUILT_IN_EDGE_TYPES: EdgeTypeDef[];
 
-interface FlowClient {
-    from(collection: string): {
-        find(options?: Record<string, unknown>): Promise<{
-            docs: Record<string, unknown>[];
-        }>;
-        findById(id: string, options?: Record<string, unknown>): Promise<Record<string, unknown>>;
+type FlowCollection = 'flows' | 'flow-node-types' | 'flow-edge-types';
+type AnyFn = (...args: any[]) => any;
+interface SDKClient {
+    from(collection: FlowCollection): {
+        find: AnyFn;
+        findById: AnyFn;
     };
     queryClient: QueryClient;
 }
 interface UseFlowOptions {
-    client: FlowClient;
+    /** SDK client instance (BrowserClient or ServerClient) */
+    client: SDKClient;
+    /** Flow slug (URL-friendly identifier) */
+    slug?: string;
+    /** Flow document ID (UUID) */
+    id?: string;
+    /** Enable/disable data fetching (default: true) */
     enabled?: boolean;
 }
 interface UseFlowResult {
@@ -123,7 +137,7 @@ interface UseFlowResult {
     isLoading: boolean;
     error: Error | null;
 }
-declare function useFlow(slugOrId: string, options: UseFlowOptions): UseFlowResult;
+declare function useFlow(options: UseFlowOptions): UseFlowResult;
 
 /**
  * Renders a Flow canvas in read-only mode.
@@ -142,8 +156,10 @@ interface FlowRendererProps {
     style?: React.CSSProperties;
     /** Custom renderers by node type slug (e.g., `{ 'product-card': MyProductCard }`) */
     nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>;
-    /** Node type definitions for enhanced rendering (color badges, field-type-aware display) */
+    /** Node type definitions for enhanced rendering (field-type-aware display) */
     nodeTypeDefs?: NodeTypeDef[];
+    /** Edge type definitions for styled edges (color, stroke, markers, animation) */
+    edgeTypeDefs?: EdgeTypeDef[];
     /** Show background pattern (default: true) */
     background?: boolean;
     /** Allow user interaction - pan, zoom (default: false for read-only display) */
@@ -155,6 +171,6 @@ interface FlowRendererProps {
     /** Called when an edge is clicked */
     onEdgeClick?: (event: React.MouseEvent, edge: FlowEdge) => void;
 }
-declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, background, interactive, fitView, onNodeClick, onEdgeClick, }: FlowRendererProps): React.JSX.Element | null;
+declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, edgeTypeDefs, background, interactive, fitView, onNodeClick, onEdgeClick, }: FlowRendererProps): React.JSX.Element | null;
 
-export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES, type CanvasData, type DynamicNodeData, type DynamicNodeSlotProps, type EdgeTypeDef, type FlowEdge, type FlowNode, type FlowNodeData, type FlowNodePosition, FlowRenderer, type FlowRendererProps, type FlowViewport, type FrameNodeData, type NodeTypeDef, type NodeTypeFieldDef, type UseFlowOptions, type UseFlowResult, isDynamicNode, isFrameNode, useFlow };
+export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES, type CanvasData, type DynamicNodeData, type DynamicNodeSlotProps, type EdgeTypeDef, type FlowEdge, type FlowNode, type FlowNodeData, type FlowNodePosition, FlowRenderer, type FlowRendererProps, type FlowViewport, type FrameNodeData, type NodeTypeDef, type NodeTypeFieldDef, type SDKClient, type UseFlowOptions, type UseFlowResult, isDynamicNode, isFrameNode, useFlow };

package/dist/{flow.d.ts → ui/flow.d.ts}

@@ -24,6 +24,7 @@ interface FlowNode {
         height?: number;
     };
     draggable?: boolean;
+    selectable?: boolean;
     [key: string]: unknown;
 }
 interface FlowEdge {
@@ -34,6 +35,9 @@ interface FlowEdge {
     targetHandle?: string | null;
     type?: string;
     style?: React.CSSProperties;
+    animated?: boolean;
+    markerStart?: unknown;
+    markerEnd?: unknown;
     edgeTypeSlug?: string;
     fields?: Record<string, unknown>;
     [key: string]: unknown;
@@ -77,6 +81,8 @@ interface EdgeTypeDef {
     strokeWidth: number;
     animated: boolean;
     lineStyle: string;
+    markerStart: string;
+    markerEnd: string;
     fields: NodeTypeFieldDef[];
 }
 declare function isDynamicNode(node: FlowNode): node is FlowNode & {
@@ -96,23 +102,31 @@ interface FrameNodeData {
     label: string;
     color?: string;
     padding?: number;
+    borderStyle?: 'dashed' | 'solid' | 'none';
+    opacity?: number;
 }
 
 declare const BUILT_IN_NODE_TYPES: NodeTypeDef[];
 
 declare const BUILT_IN_EDGE_TYPES: EdgeTypeDef[];
 
-interface FlowClient {
-    from(collection: string): {
-        find(options?: Record<string, unknown>): Promise<{
-            docs: Record<string, unknown>[];
-        }>;
-        findById(id: string, options?: Record<string, unknown>): Promise<Record<string, unknown>>;
+type FlowCollection = 'flows' | 'flow-node-types' | 'flow-edge-types';
+type AnyFn = (...args: any[]) => any;
+interface SDKClient {
+    from(collection: FlowCollection): {
+        find: AnyFn;
+        findById: AnyFn;
     };
     queryClient: QueryClient;
 }
 interface UseFlowOptions {
-    client: FlowClient;
+    /** SDK client instance (BrowserClient or ServerClient) */
+    client: SDKClient;
+    /** Flow slug (URL-friendly identifier) */
+    slug?: string;
+    /** Flow document ID (UUID) */
+    id?: string;
+    /** Enable/disable data fetching (default: true) */
     enabled?: boolean;
 }
 interface UseFlowResult {
@@ -123,7 +137,7 @@ interface UseFlowResult {
     isLoading: boolean;
     error: Error | null;
 }
-declare function useFlow(slugOrId: string, options: UseFlowOptions): UseFlowResult;
+declare function useFlow(options: UseFlowOptions): UseFlowResult;
 
 /**
  * Renders a Flow canvas in read-only mode.
@@ -142,8 +156,10 @@ interface FlowRendererProps {
     style?: React.CSSProperties;
     /** Custom renderers by node type slug (e.g., `{ 'product-card': MyProductCard }`) */
     nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>;
-    /** Node type definitions for enhanced rendering (color badges, field-type-aware display) */
+    /** Node type definitions for enhanced rendering (field-type-aware display) */
     nodeTypeDefs?: NodeTypeDef[];
+    /** Edge type definitions for styled edges (color, stroke, markers, animation) */
+    edgeTypeDefs?: EdgeTypeDef[];
     /** Show background pattern (default: true) */
     background?: boolean;
     /** Allow user interaction - pan, zoom (default: false for read-only display) */
@@ -155,6 +171,6 @@ interface FlowRendererProps {
     /** Called when an edge is clicked */
     onEdgeClick?: (event: React.MouseEvent, edge: FlowEdge) => void;
 }
-declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, background, interactive, fitView, onNodeClick, onEdgeClick, }: FlowRendererProps): React.JSX.Element | null;
+declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, edgeTypeDefs, background, interactive, fitView, onNodeClick, onEdgeClick, }: FlowRendererProps): React.JSX.Element | null;
 
-export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES, type CanvasData, type DynamicNodeData, type DynamicNodeSlotProps, type EdgeTypeDef, type FlowEdge, type FlowNode, type FlowNodeData, type FlowNodePosition, FlowRenderer, type FlowRendererProps, type FlowViewport, type FrameNodeData, type NodeTypeDef, type NodeTypeFieldDef, type UseFlowOptions, type UseFlowResult, isDynamicNode, isFrameNode, useFlow };
+export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES, type CanvasData, type DynamicNodeData, type DynamicNodeSlotProps, type EdgeTypeDef, type FlowEdge, type FlowNode, type FlowNodeData, type FlowNodePosition, FlowRenderer, type FlowRendererProps, type FlowViewport, type FrameNodeData, type NodeTypeDef, type NodeTypeFieldDef, type SDKClient, type UseFlowOptions, type UseFlowResult, isDynamicNode, isFrameNode, useFlow };