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

package/dist/server-B80o7igg.d.ts

@@ -0,0 +1,242 @@
+import { QueryClient } from '@tanstack/react-query';
+import React from 'react';
+
+interface DynamicNodeData {
+    nodeTypeSlug: string;
+    label: string;
+    fields: Record<string, unknown>;
+}
+type FlowNodeData = (DynamicNodeData | FrameNodeData) & Record<string, unknown>;
+interface FlowNodePosition {
+    x: number;
+    y: number;
+}
+interface FlowNode {
+    id: string;
+    type?: string;
+    position: FlowNodePosition;
+    data: FlowNodeData;
+    parentId?: string;
+    style?: React.CSSProperties;
+    width?: number;
+    height?: number;
+    measured?: {
+        width?: number;
+        height?: number;
+    };
+    draggable?: boolean;
+    selectable?: boolean;
+    [key: string]: unknown;
+}
+interface FlowEdge {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle?: string | null;
+    targetHandle?: string | null;
+    type?: string;
+    style?: React.CSSProperties;
+    animated?: boolean;
+    markerStart?: unknown;
+    markerEnd?: unknown;
+    edgeTypeSlug?: string;
+    fields?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+interface FlowViewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+interface CanvasData {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    viewport: FlowViewport;
+}
+interface NodeTypeFieldDef {
+    name: string;
+    label: string;
+    fieldType: 'text' | 'textarea' | 'number' | 'url' | 'color' | 'image' | 'select' | 'toggle';
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    defaultValue?: string;
+    required?: boolean;
+}
+interface NodeTypeDef {
+    slug: string;
+    name: string;
+    color: string;
+    defaultSize: {
+        width: number;
+        height: number;
+    };
+    fields: NodeTypeFieldDef[];
+    transparentBackground?: boolean;
+    template?: string | null;
+    customCSS?: string | null;
+}
+interface EdgeTypeDef {
+    slug: string;
+    name: string;
+    color: string;
+    strokeWidth: number;
+    animated: boolean;
+    lineStyle: string;
+    markerStart: string;
+    markerEnd: string;
+    fields: NodeTypeFieldDef[];
+}
+declare function isDynamicNode(node: FlowNode): node is FlowNode & {
+    data: DynamicNodeData;
+};
+declare function isFrameNode(node: FlowNode): node is FlowNode & {
+    data: FrameNodeData;
+};
+interface DynamicNodeSlotProps {
+    id: string;
+    nodeTypeSlug: string;
+    label: string;
+    fields: Record<string, unknown>;
+    nodeTypeDef?: NodeTypeDef;
+    /** Whether this node is currently selected */
+    selected?: boolean;
+    /** Measured node width (undefined before first measurement) */
+    width?: number;
+    /** Measured node height (undefined before first measurement) */
+    height?: number;
+    /** The default rendering (template or field-based). Allows custom renderers to wrap/extend instead of replacing entirely. */
+    defaultRender?: React.ReactElement;
+}
+interface FrameNodeData {
+    label: string;
+    color?: string;
+    padding?: number;
+    borderStyle?: 'dashed' | 'solid' | 'none';
+    opacity?: number;
+}
+interface FrameNodeSlotProps {
+    id: string;
+    label: string;
+    color?: string;
+    padding?: number;
+    borderStyle?: 'dashed' | 'solid' | 'none';
+    opacity?: number;
+    width?: number;
+    height?: number;
+    children?: React.ReactNode;
+}
+interface EdgeSlotProps {
+    id: string;
+    edgeTypeSlug?: string;
+    source: string;
+    target: string;
+    label?: string;
+    fields?: Record<string, unknown>;
+    edgeTypeDef?: EdgeTypeDef;
+    style?: React.CSSProperties;
+}
+interface NodeWrapperSlotProps {
+    id: string;
+    nodeTypeSlug: string;
+    label: string;
+    selected?: boolean;
+    nodeTypeDef?: NodeTypeDef;
+    children: React.ReactNode;
+}
+interface FlowBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+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 {
+    /** SDK client instance (Client 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 {
+    data: CanvasData | undefined;
+    nodeTypeDefs: NodeTypeDef[];
+    edgeTypeDefs: EdgeTypeDef[];
+    flow: Record<string, unknown> | undefined;
+    isLoading: boolean;
+    error: Error | null;
+}
+declare function useFlow(options: UseFlowOptions): UseFlowResult;
+
+interface PrefetchFlowOptions {
+    /** SDK client instance (Client or ServerClient) */
+    client: SDKClient;
+    /** Flow slug (URL-friendly identifier) */
+    slug?: string;
+    /** Flow document ID (UUID) */
+    id?: string;
+}
+/**
+ * Prefetch flow data into the query cache.
+ * Call in route loaders or server components to eliminate loading states on mount.
+ *
+ * ```ts
+ * // React Router loader / Server Component
+ * await prefetchFlow({ client, slug: 'Home' })
+ * ```
+ */
+declare function prefetchFlow(options: PrefetchFlowOptions): Promise<void>;
+
+/**
+ * Calculate bounding box for given node IDs.
+ * Pure function — usable in SSR, server components, or outside React.
+ */
+declare function getNodeBounds(nodes: FlowNode[], nodeIds: string[]): FlowBounds | undefined;
+/**
+ * Get all frame nodes with their bounds.
+ * Sorted by position (top-left to bottom-right).
+ */
+declare function getFrames(nodes: FlowNode[]): Array<{
+    id: string;
+    label: string;
+    bounds: FlowBounds;
+}>;
+/** Result of getFrameData — contains filtered canvas + dual bounds. */
+interface FrameData {
+    /** Canvas data containing only the frame's descendants (nodes have draggable: false). */
+    data: CanvasData;
+    /** Bounding box of child content nodes — use for initial viewport fit (centering). */
+    fitBounds: FlowBounds;
+    /** Bounding box of the frame itself — use for panning/zoom restriction (clamp). */
+    clampBounds: FlowBounds;
+    /** @deprecated Use fitBounds instead. Alias for clampBounds for backward compatibility. */
+    bounds: FlowBounds;
+}
+/**
+ * Extract a frame's descendants and related edges from canvas data.
+ * Recursively collects all nested children (supports nested frames).
+ * Returns undefined if frameId is not found or is not a frame node.
+ *
+ * Child nodes are marked `draggable: false` to prevent interfering with canvas panning.
+ * The frame node itself is included (use `frameRenderer={() => null}` to hide it).
+ *
+ * Returns dual bounds:
+ * - `fitBounds`: child content bounding box (for centering the viewport)
+ * - `clampBounds`: frame area bounding box (for panning restriction)
+ */
+declare function getFrameData(data: CanvasData, frameId: string): FrameData | undefined;
+
+export { type CanvasData as C, type DynamicNodeSlotProps as D, type EdgeTypeDef as E, type FlowNode as F, type NodeTypeDef as N, type PrefetchFlowOptions as P, type SDKClient as S, type UseFlowOptions as U, type FlowEdge as a, type FrameNodeSlotProps as b, type EdgeSlotProps as c, type NodeWrapperSlotProps as d, type FlowViewport as e, type FlowBounds as f, type FlowNodePosition as g, type FlowNodeData as h, type DynamicNodeData as i, type FrameNodeData as j, type NodeTypeFieldDef as k, isDynamicNode as l, isFrameNode as m, type UseFlowResult as n, getNodeBounds as o, prefetchFlow as p, getFrames as q, getFrameData as r, type FrameData as s, useFlow as u };

package/dist/ui/flow/server.cjs

@@ -0,0 +1,233 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/ui/Flow/server.ts
+var server_exports = {};
+__export(server_exports, {
+  getFrameData: () => getFrameData,
+  getFrames: () => getFrames,
+  getNodeBounds: () => getNodeBounds,
+  isDynamicNode: () => isDynamicNode,
+  isFrameNode: () => isFrameNode,
+  prefetchFlow: () => prefetchFlow
+});
+module.exports = __toCommonJS(server_exports);
+
+// src/core/query/query-keys.ts
+function collectionKeys(collection) {
+  return {
+    all: [collection],
+    lists: () => [collection, "list"],
+    list: (options) => [collection, "list", options],
+    details: () => [collection, "detail"],
+    detail: (id, options) => [collection, "detail", id, options],
+    infinites: () => [collection, "infinite"],
+    infinite: (options) => [collection, "infinite", options]
+  };
+}
+
+// src/ui/Flow/prefetchFlow.ts
+function prefetchFlow(options) {
+  return __async(this, null, function* () {
+    var _a;
+    const { client, slug, id } = options;
+    const identifier = (_a = id != null ? id : slug) != null ? _a : "";
+    yield Promise.all([
+      client.queryClient.prefetchQuery({
+        queryKey: collectionKeys("flows").detail(identifier),
+        queryFn: () => __async(null, null, function* () {
+          if (id) return client.from("flows").findById(id);
+          const result = yield client.from("flows").find({
+            where: { slug: { equals: slug } },
+            limit: 1
+          });
+          const doc = result.docs[0];
+          if (!doc) throw new Error(`Flow not found: ${slug}`);
+          return doc;
+        })
+      }),
+      client.queryClient.prefetchQuery({
+        queryKey: collectionKeys("flow-node-types").lists(),
+        queryFn: () => __async(null, null, function* () {
+          const result = yield client.from("flow-node-types").find({ limit: 100 });
+          return result.docs;
+        })
+      }),
+      client.queryClient.prefetchQuery({
+        queryKey: collectionKeys("flow-edge-types").lists(),
+        queryFn: () => __async(null, null, function* () {
+          const result = yield client.from("flow-edge-types").find({ limit: 100 });
+          return result.docs;
+        })
+      })
+    ]);
+  });
+}
+
+// src/ui/Flow/utils.ts
+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]));
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const node of targetNodes) {
+    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);
+    maxY = Math.max(maxY, abs.y + h);
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+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]));
+  return frames.map((f) => {
+    var _a;
+    const data = f.data;
+    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/types.ts
+function isDynamicNode(node) {
+  return node.type === "dynamic";
+}
+function isFrameNode(node) {
+  return node.type === "frame";
+}
+//# sourceMappingURL=server.cjs.map

package/dist/ui/flow/server.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/Flow/server.ts","../../../src/core/query/query-keys.ts","../../../src/ui/Flow/prefetchFlow.ts","../../../src/ui/Flow/utils.ts","../../../src/ui/Flow/types.ts"],"sourcesContent":["// Server-safe exports (no 'use client' directive).\n// Use `@01.software/sdk/ui/flow/server` for server components and route loaders.\n\nexport { prefetchFlow } from './prefetchFlow'\nexport type { PrefetchFlowOptions } from './prefetchFlow'\nexport { getNodeBounds, getFrames, getFrameData } from './utils'\nexport type { FrameData } from './utils'\nexport type {\n  CanvasData,\n  FlowNode,\n  FlowEdge,\n  FlowViewport,\n  FlowNodePosition,\n  FlowNodeData,\n  DynamicNodeData,\n  FrameNodeData,\n  FlowBounds,\n  NodeTypeDef,\n  NodeTypeFieldDef,\n  EdgeTypeDef,\n} from './types'\nexport { isDynamicNode, isFrameNode } from './types'\n","import type { PublicCollection, ApiQueryOptions } from '../client/types'\n\nexport function collectionKeys<T extends PublicCollection>(collection: T) {\n  return {\n    all: [collection] as const,\n    lists: () => [collection, 'list'] as const,\n    list: (options?: ApiQueryOptions) => [collection, 'list', options] as const,\n    details: () => [collection, 'detail'] as const,\n    detail: (id: string, options?: ApiQueryOptions) =>\n      [collection, 'detail', id, options] as const,\n    infinites: () => [collection, 'infinite'] as const,\n    infinite: (options?: Omit<ApiQueryOptions, 'page'>) =>\n      [collection, 'infinite', options] as const,\n  }\n}\n\nexport const customerKeys = {\n  all: ['customer'] as const,\n  me: () => ['customer', 'me'] as const,\n}\n","import type { SDKClient } from './useFlow'\nimport { collectionKeys } from '../../core/query/query-keys'\n\nexport interface PrefetchFlowOptions {\n  /** SDK client instance (Client or ServerClient) */\n  client: SDKClient\n  /** Flow slug (URL-friendly identifier) */\n  slug?: string\n  /** Flow document ID (UUID) */\n  id?: string\n}\n\n/**\n * Prefetch flow data into the query cache.\n * Call in route loaders or server components to eliminate loading states on mount.\n *\n * ```ts\n * // React Router loader / Server Component\n * await prefetchFlow({ client, slug: 'Home' })\n * ```\n */\nexport async function prefetchFlow(\n  options: PrefetchFlowOptions,\n): Promise<void> {\n  const { client, slug, id } = options\n  const identifier = id ?? slug ?? ''\n\n  await Promise.all([\n    client.queryClient.prefetchQuery({\n      queryKey: collectionKeys('flows').detail(identifier),\n      queryFn: async () => {\n        if (id) return client.from('flows').findById(id)\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    }),\n    client.queryClient.prefetchQuery({\n      queryKey: collectionKeys('flow-node-types').lists(),\n      queryFn: async () => {\n        const result = await client\n          .from('flow-node-types')\n          .find({ limit: 100 })\n        return result.docs\n      },\n    }),\n    client.queryClient.prefetchQuery({\n      queryKey: collectionKeys('flow-edge-types').lists(),\n      queryFn: async () => {\n        const result = await client\n          .from('flow-edge-types')\n          .find({ limit: 100 })\n        return result.docs\n      },\n    }),\n  ])\n}\n","import type { FlowNode, FlowEdge, FlowBounds, CanvasData } from './types'\n\n// ── Shared helpers ──\n\nfunction getNodeSize(node: FlowNode): { width: number; height: number } {\n  return {\n    width:\n      (node.style?.width as number) ??\n      node.measured?.width ??\n      node.width ??\n      200,\n    height:\n      (node.style?.height as number) ??\n      node.measured?.height ??\n      node.height ??\n      200,\n  }\n}\n\nfunction getAbsolutePosition(\n  node: FlowNode,\n  nodeMap: Map<string, FlowNode>,\n): { x: number; y: number } {\n  let x = node.position.x\n  let y = node.position.y\n  let current = node\n  const visited = new Set<string>([node.id])\n  while (current.parentId) {\n    const parentId = current.parentId\n    if (visited.has(parentId)) break\n    const parent = nodeMap.get(parentId)\n    if (!parent) break\n    visited.add(parent.id)\n    x += parent.position.x\n    y += parent.position.y\n    current = parent\n  }\n  return { x, y }\n}\n\n/** Collect a node and all its descendants (BFS with index pointer to avoid O(Q²) shift). */\nfunction collectDescendants(\n  nodes: FlowNode[],\n  rootId: string,\n): Set<string> {\n  const result = new Set<string>([rootId])\n  const queue = [rootId]\n  let i = 0\n  while (i < queue.length) {\n    const current = queue[i++]\n    for (const n of nodes) {\n      if (n.parentId === current && !result.has(n.id)) {\n        result.add(n.id)\n        queue.push(n.id)\n      }\n    }\n  }\n  return result\n}\n\n// ── Public utilities ──\n\n/**\n * Calculate bounding box for given node IDs.\n * Pure function — usable in SSR, server components, or outside React.\n */\nexport function getNodeBounds(\n  nodes: FlowNode[],\n  nodeIds: string[],\n): FlowBounds | undefined {\n  const idSet = new Set(nodeIds)\n  const targetNodes = nodes.filter((n) => idSet.has(n.id))\n  if (targetNodes.length === 0) return undefined\n\n  const nodeMap = new Map(nodes.map((n) => [n.id, n]))\n\n  let minX = Infinity\n  let minY = Infinity\n  let maxX = -Infinity\n  let maxY = -Infinity\n\n  for (const node of targetNodes) {\n    const abs = getAbsolutePosition(node, nodeMap)\n    const { width: w, height: h } = getNodeSize(node)\n    minX = Math.min(minX, abs.x)\n    minY = Math.min(minY, abs.y)\n    maxX = Math.max(maxX, abs.x + w)\n    maxY = Math.max(maxY, abs.y + h)\n  }\n\n  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }\n}\n\n/**\n * Get all frame nodes with their bounds.\n * Sorted by position (top-left to bottom-right).\n */\nexport function getFrames(\n  nodes: FlowNode[],\n): Array<{ id: string; label: string; bounds: FlowBounds }> {\n  const frames = nodes.filter((n) => n.type === 'frame')\n  if (frames.length === 0) return []\n\n  const nodeMap = new Map(nodes.map((n) => [n.id, n]))\n\n  return frames\n    .map((f) => {\n      const data = f.data as { label?: string }\n      const abs = getAbsolutePosition(f, nodeMap)\n      const { width: w, height: h } = getNodeSize(f)\n      return {\n        id: f.id,\n        label: data.label ?? '',\n        bounds: { x: abs.x, y: abs.y, width: w, height: h },\n      }\n    })\n    .sort((a, b) => a.bounds.y - b.bounds.y || a.bounds.x - b.bounds.x)\n}\n\n/** Result of getFrameData — contains filtered canvas + dual bounds. */\nexport interface FrameData {\n  /** Canvas data containing only the frame's descendants (nodes have draggable: false). */\n  data: CanvasData\n  /** Bounding box of child content nodes — use for initial viewport fit (centering). */\n  fitBounds: FlowBounds\n  /** Bounding box of the frame itself — use for panning/zoom restriction (clamp). */\n  clampBounds: FlowBounds\n  /** @deprecated Use fitBounds instead. Alias for clampBounds for backward compatibility. */\n  bounds: FlowBounds\n}\n\n/**\n * Extract a frame's descendants and related edges from canvas data.\n * Recursively collects all nested children (supports nested frames).\n * Returns undefined if frameId is not found or is not a frame node.\n *\n * Child nodes are marked `draggable: false` to prevent interfering with canvas panning.\n * The frame node itself is included (use `frameRenderer={() => null}` to hide it).\n *\n * Returns dual bounds:\n * - `fitBounds`: child content bounding box (for centering the viewport)\n * - `clampBounds`: frame area bounding box (for panning restriction)\n */\nexport function getFrameData(\n  data: CanvasData,\n  frameId: string,\n): FrameData | undefined {\n  const frame = data.nodes.find((n) => n.id === frameId)\n  if (!frame || frame.type !== 'frame') return undefined\n\n  // Recursively collect frame + all descendants\n  const descendantIds = collectDescendants(data.nodes, frameId)\n  const childNodes = data.nodes\n    .filter((n) => descendantIds.has(n.id))\n    .map((n) => ({ ...n, draggable: false }))\n\n  // Keep only edges where both source and target are within the frame\n  const childEdges = data.edges.filter(\n    (e: FlowEdge) => descendantIds.has(e.source) && descendantIds.has(e.target),\n  )\n\n  // clampBounds: frame's own bounding box (for panning restriction)\n  const frameBounds = getNodeBounds(data.nodes, [frameId])\n  const { width: w, height: h } = getNodeSize(frame)\n  const clampBounds: FlowBounds = frameBounds ?? {\n    x: frame.position.x,\n    y: frame.position.y,\n    width: w,\n    height: h,\n  }\n\n  // fitBounds: child content bounding box (for centering)\n  const contentNodeIds = childNodes\n    .filter((n) => n.id !== frameId)\n    .map((n) => n.id)\n  const contentBounds = contentNodeIds.length > 0\n    ? getNodeBounds(data.nodes, contentNodeIds)\n    : undefined\n  const fitBounds = contentBounds ?? clampBounds\n\n  return {\n    data: {\n      nodes: childNodes,\n      edges: childEdges,\n      viewport: data.viewport,\n    },\n    fitBounds,\n    clampBounds,\n    bounds: clampBounds,\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 | FrameNodeData) &\n  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  parentId?: string\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:\n    | 'text'\n    | 'textarea'\n    | 'number'\n    | 'url'\n    | 'color'\n    | 'image'\n    | 'select'\n    | '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  template?: string | null\n  customCSS?: string | null\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(\n  node: FlowNode,\n): node is FlowNode & { data: DynamicNodeData } {\n  return node.type === 'dynamic'\n}\n\nexport function isFrameNode(\n  node: FlowNode,\n): 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  /** Whether this node is currently selected */\n  selected?: boolean\n  /** Measured node width (undefined before first measurement) */\n  width?: number\n  /** Measured node height (undefined before first measurement) */\n  height?: number\n  /** The default rendering (template or field-based). Allows custom renderers to wrap/extend instead of replacing entirely. */\n  defaultRender?: React.ReactElement\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\n// S1: Frame renderer slot\nexport interface FrameNodeSlotProps {\n  id: string\n  label: string\n  color?: string\n  padding?: number\n  borderStyle?: 'dashed' | 'solid' | 'none'\n  opacity?: number\n  width?: number\n  height?: number\n  children?: React.ReactNode\n}\n\n// S2: Edge renderer slot\nexport interface EdgeSlotProps {\n  id: string\n  edgeTypeSlug?: string\n  source: string\n  target: string\n  label?: string\n  fields?: Record<string, unknown>\n  edgeTypeDef?: EdgeTypeDef\n  style?: React.CSSProperties\n}\n\n// S3: Node wrapper slot\nexport interface NodeWrapperSlotProps {\n  id: string\n  nodeTypeSlug: string\n  label: string\n  selected?: boolean\n  nodeTypeDef?: NodeTypeDef\n  children: React.ReactNode\n}\n\n// S8: Viewport focus\nexport interface FlowBounds {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n"],"mappings":"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","names":[]}

package/dist/ui/flow/server.d.cts

@@ -0,0 +1,3 @@
+export { C as CanvasData, i as DynamicNodeData, E as EdgeTypeDef, f as FlowBounds, a as FlowEdge, F as FlowNode, h as FlowNodeData, g as FlowNodePosition, e as FlowViewport, s as FrameData, j as FrameNodeData, N as NodeTypeDef, k as NodeTypeFieldDef, P as PrefetchFlowOptions, r as getFrameData, q as getFrames, o as getNodeBounds, l as isDynamicNode, m as isFrameNode, p as prefetchFlow } from '../../server-B80o7igg.cjs';
+import '@tanstack/react-query';
+import 'react';

package/dist/ui/flow/server.d.ts

@@ -0,0 +1,3 @@
+export { C as CanvasData, i as DynamicNodeData, E as EdgeTypeDef, f as FlowBounds, a as FlowEdge, F as FlowNode, h as FlowNodeData, g as FlowNodePosition, e as FlowViewport, s as FrameData, j as FrameNodeData, N as NodeTypeDef, k as NodeTypeFieldDef, P as PrefetchFlowOptions, r as getFrameData, q as getFrames, o as getNodeBounds, l as isDynamicNode, m as isFrameNode, p as prefetchFlow } from '../../server-B80o7igg.js';
+import '@tanstack/react-query';
+import 'react';