@principal-ai/principal-view-react 0.13.10 → 0.13.11

package/dist/components/MultiCanvasRenderer.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
+import type { GraphRendererProps, GraphRendererHandle } from './GraphRenderer';
+/**
+ * A canvas placement with its position in the combined coordinate space
+ */
+export interface CanvasPlacement {
+    /** Unique identifier for this canvas */
+    canvasId: string;
+    /** The canvas to include */
+    canvas: ExtendedCanvas;
+    /** Position offset - all nodes in this canvas will be translated by this amount */
+    position: {
+        x: number;
+        y: number;
+    };
+    /** Optional label for the canvas (for future visual grouping) */
+    label?: string;
+}
+/**
+ * Layout configuration for multiple canvases on a single graph
+ */
+export interface MultiCanvasLayout {
+    /** Array of canvas placements with positions */
+    placements: CanvasPlacement[];
+}
+/**
+ * Props for the MultiCanvasRenderer component
+ */
+export interface MultiCanvasRendererProps extends Omit<GraphRendererProps, 'canvas' | 'editable'> {
+    /** Layout configuration containing canvas placements */
+    layout: MultiCanvasLayout;
+    /** Callback when layout changes (canvas positions updated) */
+    onLayoutChange?: (layout: MultiCanvasLayout) => void;
+    /** Whether to show group borders around each canvas (default: true) */
+    showGroups?: boolean;
+}
+/**
+ * Merge multiple canvases into a single canvas with position offsets applied.
+ * Each canvas gets a group node border with its name as a label.
+ * Node IDs are prefixed with canvasId to avoid collisions (format: "canvasId:nodeId").
+ * Original IDs can be recovered using parseNodeId().
+ */
+export declare function mergeCanvases(placements: CanvasPlacement[], options?: {
+    showGroups?: boolean;
+}): ExtendedCanvas;
+/**
+ * Extract the original canvas ID and node ID from a merged node ID
+ */
+export declare function parseNodeId(mergedNodeId: string): {
+    canvasId: string;
+    nodeId: string;
+} | null;
+/**
+ * Renders multiple canvases merged into a single graph view.
+ *
+ * Each canvas is positioned at its specified offset, and all nodes/edges
+ * are combined into a unified viewport. Node IDs are prefixed with their
+ * source canvas ID to avoid collisions (format: "canvasId:nodeId").
+ *
+ * @example
+ * ```tsx
+ * <MultiCanvasRenderer
+ *   layout={{
+ *     placements: [
+ *       { canvasId: 'auth', canvas: authCanvas, position: { x: 0, y: 0 } },
+ *       { canvasId: 'data', canvas: dataCanvas, position: { x: 600, y: 0 } },
+ *     ],
+ *   }}
+ *   showControls
+ * />
+ * ```
+ */
+export declare const MultiCanvasRenderer: import("react").ForwardRefExoticComponent<MultiCanvasRendererProps & import("react").RefAttributes<GraphRendererHandle>>;
+//# sourceMappingURL=MultiCanvasRenderer.d.ts.map

package/dist/components/MultiCanvasRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiCanvasRenderer.d.ts","sourceRoot":"","sources":["../../src/components/MultiCanvasRenderer.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,cAAc,EAA0C,MAAM,mCAAmC,CAAC;AAEhH,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM/E;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,wCAAwC;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,mFAAmF;IACnF,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,UAAU,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC;IACvD,wDAAwD;IACxD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,8DAA8D;IAC9D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACrD,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAkDD;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,UAAU,EAAE,eAAe,EAAE,EAC7B,OAAO,GAAE;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAO,GACrC,cAAc,CA8DhB;AAED;;GAEG;AACH,wBAAgB,WAAW,CACzB,YAAY,EAAE,MAAM,GACnB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAO7C;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,mBAAmB,0HAqB9B,CAAC"}

package/dist/components/MultiCanvasRenderer.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, forwardRef } from 'react';
+import { GraphRenderer } from './GraphRenderer';
+// ============================================================================
+// Canvas Merging Utilities
+// ============================================================================
+const DEFAULT_NODE_WIDTH = 200;
+const DEFAULT_NODE_HEIGHT = 100;
+const GROUP_PADDING = 40;
+/**
+ * Create a prefixed node ID to avoid collisions between canvases
+ */
+function prefixNodeId(canvasId, nodeId) {
+    return `${canvasId}:${nodeId}`;
+}
+/**
+ * Calculate the bounding box of nodes in a canvas (relative to canvas origin)
+ */
+function calculateCanvasBounds(canvas) {
+    if (!canvas.nodes || canvas.nodes.length === 0) {
+        return { minX: 0, minY: 0, maxX: DEFAULT_NODE_WIDTH, maxY: DEFAULT_NODE_HEIGHT };
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const node of canvas.nodes) {
+        const x = node.x ?? 0;
+        const y = node.y ?? 0;
+        const width = node.width ?? DEFAULT_NODE_WIDTH;
+        const height = node.height ?? DEFAULT_NODE_HEIGHT;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x + width);
+        maxY = Math.max(maxY, y + height);
+    }
+    return { minX, minY, maxX, maxY };
+}
+/**
+ * Merge multiple canvases into a single canvas with position offsets applied.
+ * Each canvas gets a group node border with its name as a label.
+ * Node IDs are prefixed with canvasId to avoid collisions (format: "canvasId:nodeId").
+ * Original IDs can be recovered using parseNodeId().
+ */
+export function mergeCanvases(placements, options = {}) {
+    const { showGroups = true } = options;
+    const groupNodes = [];
+    const mergedNodes = [];
+    const mergedEdges = [];
+    for (const placement of placements) {
+        const { canvasId, canvas, position, label } = placement;
+        // Calculate bounds for this canvas to create a group node
+        if (showGroups && canvas.nodes && canvas.nodes.length > 0) {
+            const bounds = calculateCanvasBounds(canvas);
+            const groupNode = {
+                id: `${canvasId}:__group__`,
+                type: 'group',
+                label: label ?? canvas.pv?.name ?? canvasId,
+                x: position.x + bounds.minX - GROUP_PADDING,
+                y: position.y + bounds.minY - GROUP_PADDING,
+                width: bounds.maxX - bounds.minX + GROUP_PADDING * 2,
+                height: bounds.maxY - bounds.minY + GROUP_PADDING * 2,
+            };
+            groupNodes.push(groupNode);
+        }
+        // Process nodes - apply position offset and prefix IDs
+        if (canvas.nodes) {
+            for (const node of canvas.nodes) {
+                const mergedNode = {
+                    ...node,
+                    id: prefixNodeId(canvasId, node.id),
+                    x: (node.x ?? 0) + position.x,
+                    y: (node.y ?? 0) + position.y,
+                };
+                mergedNodes.push(mergedNode);
+            }
+        }
+        // Process edges - update node references with prefixed IDs
+        if (canvas.edges) {
+            for (const edge of canvas.edges) {
+                const mergedEdge = {
+                    ...edge,
+                    id: prefixNodeId(canvasId, edge.id),
+                    fromNode: prefixNodeId(canvasId, edge.fromNode),
+                    toNode: prefixNodeId(canvasId, edge.toNode),
+                };
+                mergedEdges.push(mergedEdge);
+            }
+        }
+    }
+    // Create merged canvas - group nodes first so they render behind
+    const mergedCanvas = {
+        nodes: [...groupNodes, ...mergedNodes],
+        edges: mergedEdges,
+        pv: {
+            version: '1.0.0',
+            name: 'Multi-Canvas View',
+        },
+    };
+    return mergedCanvas;
+}
+/**
+ * Extract the original canvas ID and node ID from a merged node ID
+ */
+export function parseNodeId(mergedNodeId) {
+    const colonIndex = mergedNodeId.indexOf(':');
+    if (colonIndex === -1)
+        return null;
+    return {
+        canvasId: mergedNodeId.substring(0, colonIndex),
+        nodeId: mergedNodeId.substring(colonIndex + 1),
+    };
+}
+// ============================================================================
+// MultiCanvasRenderer Component
+// ============================================================================
+/**
+ * Renders multiple canvases merged into a single graph view.
+ *
+ * Each canvas is positioned at its specified offset, and all nodes/edges
+ * are combined into a unified viewport. Node IDs are prefixed with their
+ * source canvas ID to avoid collisions (format: "canvasId:nodeId").
+ *
+ * @example
+ * ```tsx
+ * <MultiCanvasRenderer
+ *   layout={{
+ *     placements: [
+ *       { canvasId: 'auth', canvas: authCanvas, position: { x: 0, y: 0 } },
+ *       { canvasId: 'data', canvas: dataCanvas, position: { x: 600, y: 0 } },
+ *     ],
+ *   }}
+ *   showControls
+ * />
+ * ```
+ */
+export const MultiCanvasRenderer = forwardRef(function MultiCanvasRenderer({ layout, onLayoutChange: _onLayoutChange, showGroups = true, ...graphRendererProps }, ref) {
+    // Merge all canvases into a single canvas
+    const mergedCanvas = useMemo(() => mergeCanvases(layout.placements, { showGroups }), [layout.placements, showGroups]);
+    return (_jsx(GraphRenderer, { ref: ref, canvas: mergedCanvas, editable: false, ...graphRendererProps }));
+});
+//# sourceMappingURL=MultiCanvasRenderer.js.map

package/dist/components/MultiCanvasRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiCanvasRenderer.js","sourceRoot":"","sources":["../../src/components/MultiCanvasRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -8,6 +8,8 @@
 export type { GraphConfiguration, GraphEvent, GraphMetrics, Violation, Warning, ValidationResult, EventStream, NodeTypeDefinition, EdgeTypeDefinition, ConnectionRule, NodeState, EdgeState, ConfigurationFile, ConfigurationLoadResult, ComponentLibrary, LibraryNodeComponent, LibraryEdgeComponent, } from '@principal-ai/principal-view-core';
 export { GraphRenderer } from './components/GraphRenderer';
 export type { GraphRendererProps, GraphRendererHandle, NodePositionChange, PendingChanges, } from './components/GraphRenderer';
+export { MultiCanvasRenderer, mergeCanvases, parseNodeId } from './components/MultiCanvasRenderer';
+export type { MultiCanvasRendererProps, MultiCanvasLayout, CanvasPlacement, } from './components/MultiCanvasRenderer';
 export { ConfigurationSelector } from './components/ConfigurationSelector';
 export type { ConfigurationSelectorProps } from './components/ConfigurationSelector';
 export { GenericNode } from './nodes/GenericNode';
@@ -25,4 +27,6 @@ export type { EdgeStateWithHandles } from './utils/graphConverter';
 export { Icon, resolveIcon } from './utils/iconResolver';
 export type { IconProps } from './utils/iconResolver';
 export { swapGraphOrientation, swapNodePositions, swapEdgeSides, } from './utils/orientationUtils';
+export { getCanvasBounds, getCanvasDisplaySize } from './utils/canvasBounds';
+export type { CanvasBounds } from './utils/canvasBounds';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,YAAY,EACV,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,uBAAuB,EAEvB,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAGrF,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,GACd,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,YAAY,EACV,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,uBAAuB,EAEvB,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AACnG,YAAY,EACV,wBAAwB,EACxB,iBAAiB,EACjB,eAAe,GAChB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAGrF,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,GACd,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC7E,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -7,6 +7,7 @@
  */
 // Export components
 export { GraphRenderer } from './components/GraphRenderer';
+export { MultiCanvasRenderer, mergeCanvases, parseNodeId } from './components/MultiCanvasRenderer';
 export { ConfigurationSelector } from './components/ConfigurationSelector';
 // Export node/edge renderers
 export { GenericNode } from './nodes/GenericNode';
@@ -19,4 +20,5 @@ export { NodeTooltip } from './components/NodeTooltip';
 export { convertToXYFlowNodes, convertToXYFlowEdges, } from './utils/graphConverter';
 export { Icon, resolveIcon } from './utils/iconResolver';
 export { swapGraphOrientation, swapNodePositions, swapEdgeSides, } from './utils/orientationUtils';
+export { getCanvasBounds, getCanvasDisplaySize } from './utils/canvasBounds';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,6BAA6B;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,2BAA2B;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,mBAAmB;AACnB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,GACd,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAOnG,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,6BAA6B;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,2BAA2B;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,mBAAmB;AACnB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,GACd,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/utils/canvasBounds.d.ts

@@ -0,0 +1,29 @@
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
+export interface CanvasBounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+    width: number;
+    height: number;
+}
+/**
+ * Calculate the bounding box of all nodes in a canvas.
+ * Returns the min/max coordinates and total dimensions.
+ */
+export declare function getCanvasBounds(canvas: ExtendedCanvas): CanvasBounds;
+/**
+ * Calculate a recommended display size for a canvas cell.
+ * Adds padding and enforces minimum dimensions.
+ */
+export declare function getCanvasDisplaySize(canvas: ExtendedCanvas, options?: {
+    padding?: number;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+}): {
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=canvasBounds.d.ts.map

package/dist/utils/canvasBounds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasBounds.d.ts","sourceRoot":"","sources":["../../src/utils/canvasBounds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAKD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,cAAc,GAAG,YAAY,CAqCpE;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,cAAc,EACtB,OAAO,GAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACf,GACL;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAoBnC"}

package/dist/utils/canvasBounds.js

@@ -0,0 +1,56 @@
+const DEFAULT_NODE_WIDTH = 200;
+const DEFAULT_NODE_HEIGHT = 100;
+/**
+ * Calculate the bounding box of all nodes in a canvas.
+ * Returns the min/max coordinates and total dimensions.
+ */
+export function getCanvasBounds(canvas) {
+    if (!canvas.nodes || canvas.nodes.length === 0) {
+        return {
+            minX: 0,
+            minY: 0,
+            maxX: DEFAULT_NODE_WIDTH,
+            maxY: DEFAULT_NODE_HEIGHT,
+            width: DEFAULT_NODE_WIDTH,
+            height: DEFAULT_NODE_HEIGHT,
+        };
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const node of canvas.nodes) {
+        const x = node.x ?? 0;
+        const y = node.y ?? 0;
+        const width = node.width ?? DEFAULT_NODE_WIDTH;
+        const height = node.height ?? DEFAULT_NODE_HEIGHT;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x + width);
+        maxY = Math.max(maxY, y + height);
+    }
+    return {
+        minX,
+        minY,
+        maxX,
+        maxY,
+        width: maxX - minX,
+        height: maxY - minY,
+    };
+}
+/**
+ * Calculate a recommended display size for a canvas cell.
+ * Adds padding and enforces minimum dimensions.
+ */
+export function getCanvasDisplaySize(canvas, options = {}) {
+    const { padding = 100, minWidth = 300, minHeight = 200, maxWidth = 1200, maxHeight = 800, } = options;
+    const bounds = getCanvasBounds(canvas);
+    // Add padding to content dimensions
+    const contentWidth = bounds.width + padding * 2;
+    const contentHeight = bounds.height + padding * 2;
+    // Clamp to min/max
+    const width = Math.min(maxWidth, Math.max(minWidth, contentWidth));
+    const height = Math.min(maxHeight, Math.max(minHeight, contentHeight));
+    return { width, height };
+}
+//# sourceMappingURL=canvasBounds.js.map

package/dist/utils/canvasBounds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasBounds.js","sourceRoot":"","sources":["../../src/utils/canvasBounds.ts"],"names":[],"mappings":"AAWA,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAC/B,MAAM,mBAAmB,GAAG,GAAG,CAAC;AAEhC;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,MAAsB;IACpD,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9C,OAAO;YACL,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,kBAAkB;YACxB,IAAI,EAAE,mBAAmB;YACzB,KAAK,EAAE,kBAAkB;YACzB,MAAM,EAAE,mBAAmB;SAC5B,CAAC;KACH;IAED,IAAI,IAAI,GAAG,QAAQ,CAAC;IACpB,IAAI,IAAI,GAAG,QAAQ,CAAC;IACpB,IAAI,IAAI,GAAG,CAAC,QAAQ,CAAC;IACrB,IAAI,IAAI,GAAG,CAAC,QAAQ,CAAC;IAErB,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC/B,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;QACtB,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,kBAAkB,CAAC;QAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,mBAAmB,CAAC;QAElD,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QACzB,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QACzB,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC;QACjC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC;KACnC;IAED,OAAO;QACL,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,KAAK,EAAE,IAAI,GAAG,IAAI;QAClB,MAAM,EAAE,IAAI,GAAG,IAAI;KACpB,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAClC,MAAsB,EACtB,UAMI,EAAE;IAEN,MAAM,EACJ,OAAO,GAAG,GAAG,EACb,QAAQ,GAAG,GAAG,EACd,SAAS,GAAG,GAAG,EACf,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,GAAG,GAChB,GAAG,OAAO,CAAC;IAEZ,MAAM,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IAEvC,oCAAoC;IACpC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC;IAElD,mBAAmB;IACnB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IACnE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAEvE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/principal-view-react",
-  "version": "0.13.10",
+  "version": "0.13.11",
   "description": "React components for graph-based principal view framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/MultiCanvasRenderer.tsx

@@ -0,0 +1,225 @@
+import { useMemo, forwardRef } from 'react';
+import type { ExtendedCanvas, ExtendedCanvasNode, ExtendedCanvasEdge } from '@principal-ai/principal-view-core';
+import { GraphRenderer } from './GraphRenderer';
+import type { GraphRendererProps, GraphRendererHandle } from './GraphRenderer';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * A canvas placement with its position in the combined coordinate space
+ */
+export interface CanvasPlacement {
+  /** Unique identifier for this canvas */
+  canvasId: string;
+  /** The canvas to include */
+  canvas: ExtendedCanvas;
+  /** Position offset - all nodes in this canvas will be translated by this amount */
+  position: { x: number; y: number };
+  /** Optional label for the canvas (for future visual grouping) */
+  label?: string;
+}
+
+/**
+ * Layout configuration for multiple canvases on a single graph
+ */
+export interface MultiCanvasLayout {
+  /** Array of canvas placements with positions */
+  placements: CanvasPlacement[];
+}
+
+/**
+ * Props for the MultiCanvasRenderer component
+ */
+export interface MultiCanvasRendererProps
+  extends Omit<GraphRendererProps, 'canvas' | 'editable'> {
+  /** Layout configuration containing canvas placements */
+  layout: MultiCanvasLayout;
+  /** Callback when layout changes (canvas positions updated) */
+  onLayoutChange?: (layout: MultiCanvasLayout) => void;
+  /** Whether to show group borders around each canvas (default: true) */
+  showGroups?: boolean;
+}
+
+// ============================================================================
+// Canvas Merging Utilities
+// ============================================================================
+
+const DEFAULT_NODE_WIDTH = 200;
+const DEFAULT_NODE_HEIGHT = 100;
+const GROUP_PADDING = 40;
+
+/**
+ * Create a prefixed node ID to avoid collisions between canvases
+ */
+function prefixNodeId(canvasId: string, nodeId: string): string {
+  return `${canvasId}:${nodeId}`;
+}
+
+/**
+ * Calculate the bounding box of nodes in a canvas (relative to canvas origin)
+ */
+function calculateCanvasBounds(canvas: ExtendedCanvas): {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+} {
+  if (!canvas.nodes || canvas.nodes.length === 0) {
+    return { minX: 0, minY: 0, maxX: DEFAULT_NODE_WIDTH, maxY: DEFAULT_NODE_HEIGHT };
+  }
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const node of canvas.nodes) {
+    const x = node.x ?? 0;
+    const y = node.y ?? 0;
+    const width = node.width ?? DEFAULT_NODE_WIDTH;
+    const height = node.height ?? DEFAULT_NODE_HEIGHT;
+
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x + width);
+    maxY = Math.max(maxY, y + height);
+  }
+
+  return { minX, minY, maxX, maxY };
+}
+
+/**
+ * Merge multiple canvases into a single canvas with position offsets applied.
+ * Each canvas gets a group node border with its name as a label.
+ * Node IDs are prefixed with canvasId to avoid collisions (format: "canvasId:nodeId").
+ * Original IDs can be recovered using parseNodeId().
+ */
+export function mergeCanvases(
+  placements: CanvasPlacement[],
+  options: { showGroups?: boolean } = {}
+): ExtendedCanvas {
+  const { showGroups = true } = options;
+  const groupNodes: ExtendedCanvasNode[] = [];
+  const mergedNodes: ExtendedCanvasNode[] = [];
+  const mergedEdges: ExtendedCanvasEdge[] = [];
+
+  for (const placement of placements) {
+    const { canvasId, canvas, position, label } = placement;
+
+    // Calculate bounds for this canvas to create a group node
+    if (showGroups && canvas.nodes && canvas.nodes.length > 0) {
+      const bounds = calculateCanvasBounds(canvas);
+      const groupNode: ExtendedCanvasNode = {
+        id: `${canvasId}:__group__`,
+        type: 'group',
+        label: label ?? canvas.pv?.name ?? canvasId,
+        x: position.x + bounds.minX - GROUP_PADDING,
+        y: position.y + bounds.minY - GROUP_PADDING,
+        width: bounds.maxX - bounds.minX + GROUP_PADDING * 2,
+        height: bounds.maxY - bounds.minY + GROUP_PADDING * 2,
+      };
+      groupNodes.push(groupNode);
+    }
+
+    // Process nodes - apply position offset and prefix IDs
+    if (canvas.nodes) {
+      for (const node of canvas.nodes) {
+        const mergedNode: ExtendedCanvasNode = {
+          ...node,
+          id: prefixNodeId(canvasId, node.id),
+          x: (node.x ?? 0) + position.x,
+          y: (node.y ?? 0) + position.y,
+        };
+        mergedNodes.push(mergedNode);
+      }
+    }
+
+    // Process edges - update node references with prefixed IDs
+    if (canvas.edges) {
+      for (const edge of canvas.edges) {
+        const mergedEdge: ExtendedCanvasEdge = {
+          ...edge,
+          id: prefixNodeId(canvasId, edge.id),
+          fromNode: prefixNodeId(canvasId, edge.fromNode),
+          toNode: prefixNodeId(canvasId, edge.toNode),
+        };
+        mergedEdges.push(mergedEdge);
+      }
+    }
+  }
+
+  // Create merged canvas - group nodes first so they render behind
+  const mergedCanvas: ExtendedCanvas = {
+    nodes: [...groupNodes, ...mergedNodes],
+    edges: mergedEdges,
+    pv: {
+      version: '1.0.0',
+      name: 'Multi-Canvas View',
+    },
+  };
+
+  return mergedCanvas;
+}
+
+/**
+ * Extract the original canvas ID and node ID from a merged node ID
+ */
+export function parseNodeId(
+  mergedNodeId: string
+): { canvasId: string; nodeId: string } | null {
+  const colonIndex = mergedNodeId.indexOf(':');
+  if (colonIndex === -1) return null;
+  return {
+    canvasId: mergedNodeId.substring(0, colonIndex),
+    nodeId: mergedNodeId.substring(colonIndex + 1),
+  };
+}
+
+// ============================================================================
+// MultiCanvasRenderer Component
+// ============================================================================
+
+/**
+ * Renders multiple canvases merged into a single graph view.
+ *
+ * Each canvas is positioned at its specified offset, and all nodes/edges
+ * are combined into a unified viewport. Node IDs are prefixed with their
+ * source canvas ID to avoid collisions (format: "canvasId:nodeId").
+ *
+ * @example
+ * ```tsx
+ * <MultiCanvasRenderer
+ *   layout={{
+ *     placements: [
+ *       { canvasId: 'auth', canvas: authCanvas, position: { x: 0, y: 0 } },
+ *       { canvasId: 'data', canvas: dataCanvas, position: { x: 600, y: 0 } },
+ *     ],
+ *   }}
+ *   showControls
+ * />
+ * ```
+ */
+export const MultiCanvasRenderer = forwardRef<
+  GraphRendererHandle,
+  MultiCanvasRendererProps
+>(function MultiCanvasRenderer(
+  { layout, onLayoutChange: _onLayoutChange, showGroups = true, ...graphRendererProps },
+  ref
+) {
+  // Merge all canvases into a single canvas
+  const mergedCanvas = useMemo(
+    () => mergeCanvases(layout.placements, { showGroups }),
+    [layout.placements, showGroups]
+  );
+
+  return (
+    <GraphRenderer
+      ref={ref}
+      canvas={mergedCanvas}
+      editable={false}
+      {...graphRendererProps}
+    />
+  );
+});

package/src/index.ts

@@ -37,6 +37,13 @@ export type {
   PendingChanges,
 } from './components/GraphRenderer';
 
+export { MultiCanvasRenderer, mergeCanvases, parseNodeId } from './components/MultiCanvasRenderer';
+export type {
+  MultiCanvasRendererProps,
+  MultiCanvasLayout,
+  CanvasPlacement,
+} from './components/MultiCanvasRenderer';
+
 export { ConfigurationSelector } from './components/ConfigurationSelector';
 export type { ConfigurationSelectorProps } from './components/ConfigurationSelector';
 
@@ -70,3 +77,5 @@ export {
   swapNodePositions,
   swapEdgeSides,
 } from './utils/orientationUtils';
+export { getCanvasBounds, getCanvasDisplaySize } from './utils/canvasBounds';
+export type { CanvasBounds } from './utils/canvasBounds';

package/src/stories/MultiCanvasRenderer.stories.tsx

@@ -0,0 +1,329 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MultiCanvasRenderer } from '../components/MultiCanvasRenderer';
+import type { MultiCanvasLayout } from '../components/MultiCanvasRenderer';
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+
+const meta = {
+  title: 'Components/MultiCanvasRenderer',
+  component: MultiCanvasRenderer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <div style={{ width: '100vw', height: '100vh' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof MultiCanvasRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Sample Canvases
+// ============================================================================
+
+const authFlowCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'login',
+      type: 'text',
+      x: 0,
+      y: 0,
+      width: 120,
+      height: 60,
+      text: 'Login',
+      color: '#4A90E2',
+      pv: { nodeType: 'process', shape: 'rectangle', icon: 'User' },
+    },
+    {
+      id: 'validate',
+      type: 'text',
+      x: 170,
+      y: 0,
+      width: 120,
+      height: 60,
+      text: 'Validate',
+      color: '#F5A623',
+      pv: { nodeType: 'process', shape: 'rectangle', icon: 'Shield' },
+    },
+    {
+      id: 'session',
+      type: 'text',
+      x: 340,
+      y: 0,
+      width: 120,
+      height: 60,
+      text: 'Session',
+      color: '#7ED321',
+      pv: { nodeType: 'data', shape: 'rectangle', icon: 'Key' },
+    },
+  ],
+  edges: [
+    { id: 'e1', fromNode: 'login', toNode: 'validate', pv: { edgeType: 'flow' } },
+    { id: 'e2', fromNode: 'validate', toNode: 'session', pv: { edgeType: 'flow' } },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Authentication Flow',
+  },
+};
+
+const dataProcessingCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'input',
+      type: 'text',
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      text: 'Input',
+      color: '#7B68EE',
+      pv: { nodeType: 'data', shape: 'circle', icon: 'Download' },
+    },
+    {
+      id: 'transform',
+      type: 'text',
+      x: 150,
+      y: 15,
+      width: 140,
+      height: 70,
+      text: 'Transform',
+      color: '#4A90E2',
+      pv: { nodeType: 'process', shape: 'rectangle', icon: 'Settings' },
+    },
+    {
+      id: 'output',
+      type: 'text',
+      x: 340,
+      y: 0,
+      width: 100,
+      height: 100,
+      text: 'Output',
+      color: '#7B68EE',
+      pv: { nodeType: 'data', shape: 'circle', icon: 'Upload' },
+    },
+  ],
+  edges: [
+    { id: 'e1', fromNode: 'input', toNode: 'transform', pv: { edgeType: 'dataflow' } },
+    { id: 'e2', fromNode: 'transform', toNode: 'output', pv: { edgeType: 'dataflow' } },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Data Processing Pipeline',
+  },
+};
+
+const notificationCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'event',
+      type: 'text',
+      x: 0,
+      y: 30,
+      width: 100,
+      height: 60,
+      text: 'Event',
+      color: '#F5A623',
+      pv: { nodeType: 'trigger', shape: 'rectangle', icon: 'Zap' },
+    },
+    {
+      id: 'router',
+      type: 'text',
+      x: 150,
+      y: 0,
+      width: 100,
+      height: 100,
+      text: 'Router',
+      color: '#4A90E2',
+      pv: { nodeType: 'process', shape: 'diamond', icon: 'GitBranch' },
+    },
+    {
+      id: 'email',
+      type: 'text',
+      x: 300,
+      y: -30,
+      width: 100,
+      height: 50,
+      text: 'Email',
+      color: '#7ED321',
+      pv: { nodeType: 'action', shape: 'rectangle', icon: 'Mail' },
+    },
+    {
+      id: 'sms',
+      type: 'text',
+      x: 300,
+      y: 40,
+      width: 100,
+      height: 50,
+      text: 'SMS',
+      color: '#7ED321',
+      pv: { nodeType: 'action', shape: 'rectangle', icon: 'MessageSquare' },
+    },
+    {
+      id: 'push',
+      type: 'text',
+      x: 300,
+      y: 110,
+      width: 100,
+      height: 50,
+      text: 'Push',
+      color: '#7ED321',
+      pv: { nodeType: 'action', shape: 'rectangle', icon: 'Bell' },
+    },
+  ],
+  edges: [
+    { id: 'e1', fromNode: 'event', toNode: 'router', pv: { edgeType: 'flow' } },
+    { id: 'e2', fromNode: 'router', toNode: 'email', pv: { edgeType: 'flow' } },
+    { id: 'e3', fromNode: 'router', toNode: 'sms', pv: { edgeType: 'flow' } },
+    { id: 'e4', fromNode: 'router', toNode: 'push', pv: { edgeType: 'flow' } },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Notification System',
+  },
+};
+
+const monitoringCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'metrics',
+      type: 'text',
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 60,
+      text: 'Metrics',
+      color: '#4A90E2',
+      pv: { nodeType: 'data', shape: 'rectangle', icon: 'BarChart2' },
+    },
+    {
+      id: 'alert',
+      type: 'text',
+      x: 150,
+      y: 0,
+      width: 100,
+      height: 60,
+      text: 'Alert',
+      color: '#D0021B',
+      pv: { nodeType: 'process', shape: 'rectangle', icon: 'AlertTriangle' },
+    },
+  ],
+  edges: [
+    { id: 'e1', fromNode: 'metrics', toNode: 'alert', pv: { edgeType: 'flow' } },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Monitoring',
+  },
+};
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+/**
+ * Two canvases side by side on the same graph
+ */
+const twoCanvasLayout: MultiCanvasLayout = {
+  placements: [
+    { canvasId: 'auth', canvas: authFlowCanvas, position: { x: 0, y: 0 } },
+    { canvasId: 'data', canvas: dataProcessingCanvas, position: { x: 600, y: 0 } },
+  ],
+};
+
+export const TwoCanvasesSideBySide: Story = {
+  args: {
+    layout: twoCanvasLayout,
+    showControls: true,
+    showBackground: true,
+  },
+};
+
+/**
+ * Four canvases arranged in a 2x2 grid pattern
+ */
+const fourCanvasLayout: MultiCanvasLayout = {
+  placements: [
+    { canvasId: 'auth', canvas: authFlowCanvas, position: { x: 0, y: 0 } },
+    { canvasId: 'data', canvas: dataProcessingCanvas, position: { x: 600, y: 0 } },
+    { canvasId: 'notify', canvas: notificationCanvas, position: { x: 0, y: 200 } },
+    { canvasId: 'monitor', canvas: monitoringCanvas, position: { x: 600, y: 200 } },
+  ],
+};
+
+export const FourCanvasesGrid: Story = {
+  args: {
+    layout: fourCanvasLayout,
+    showControls: true,
+    showBackground: true,
+  },
+};
+
+/**
+ * Canvases stacked vertically
+ */
+const verticalLayout: MultiCanvasLayout = {
+  placements: [
+    { canvasId: 'auth', canvas: authFlowCanvas, position: { x: 0, y: 0 } },
+    { canvasId: 'data', canvas: dataProcessingCanvas, position: { x: 0, y: 150 } },
+    { canvasId: 'notify', canvas: notificationCanvas, position: { x: 0, y: 300 } },
+  ],
+};
+
+export const VerticalStack: Story = {
+  args: {
+    layout: verticalLayout,
+    showControls: true,
+    showBackground: true,
+  },
+};
+
+/**
+ * Single canvas (baseline comparison)
+ */
+const singleCanvasLayout: MultiCanvasLayout = {
+  placements: [
+    { canvasId: 'notify', canvas: notificationCanvas, position: { x: 0, y: 0 } },
+  ],
+};
+
+export const SingleCanvas: Story = {
+  args: {
+    layout: singleCanvasLayout,
+    showControls: true,
+    showBackground: true,
+  },
+};
+
+/**
+ * With minimap enabled to navigate the combined view
+ */
+export const WithMinimap: Story = {
+  args: {
+    layout: fourCanvasLayout,
+    showControls: true,
+    showMinimap: true,
+    showBackground: true,
+  },
+};
+
+/**
+ * Without group borders - just the nodes merged together
+ */
+export const WithoutGroups: Story = {
+  args: {
+    layout: fourCanvasLayout,
+    showControls: true,
+    showBackground: true,
+    showGroups: false,
+  },
+};

package/src/utils/canvasBounds.ts

@@ -0,0 +1,91 @@
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
+
+export interface CanvasBounds {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+  width: number;
+  height: number;
+}
+
+const DEFAULT_NODE_WIDTH = 200;
+const DEFAULT_NODE_HEIGHT = 100;
+
+/**
+ * Calculate the bounding box of all nodes in a canvas.
+ * Returns the min/max coordinates and total dimensions.
+ */
+export function getCanvasBounds(canvas: ExtendedCanvas): CanvasBounds {
+  if (!canvas.nodes || canvas.nodes.length === 0) {
+    return {
+      minX: 0,
+      minY: 0,
+      maxX: DEFAULT_NODE_WIDTH,
+      maxY: DEFAULT_NODE_HEIGHT,
+      width: DEFAULT_NODE_WIDTH,
+      height: DEFAULT_NODE_HEIGHT,
+    };
+  }
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const node of canvas.nodes) {
+    const x = node.x ?? 0;
+    const y = node.y ?? 0;
+    const width = node.width ?? DEFAULT_NODE_WIDTH;
+    const height = node.height ?? DEFAULT_NODE_HEIGHT;
+
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x + width);
+    maxY = Math.max(maxY, y + height);
+  }
+
+  return {
+    minX,
+    minY,
+    maxX,
+    maxY,
+    width: maxX - minX,
+    height: maxY - minY,
+  };
+}
+
+/**
+ * Calculate a recommended display size for a canvas cell.
+ * Adds padding and enforces minimum dimensions.
+ */
+export function getCanvasDisplaySize(
+  canvas: ExtendedCanvas,
+  options: {
+    padding?: number;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+  } = {}
+): { width: number; height: number } {
+  const {
+    padding = 100,
+    minWidth = 300,
+    minHeight = 200,
+    maxWidth = 1200,
+    maxHeight = 800,
+  } = options;
+
+  const bounds = getCanvasBounds(canvas);
+
+  // Add padding to content dimensions
+  const contentWidth = bounds.width + padding * 2;
+  const contentHeight = bounds.height + padding * 2;
+
+  // Clamp to min/max
+  const width = Math.min(maxWidth, Math.max(minWidth, contentWidth));
+  const height = Math.min(maxHeight, Math.max(minHeight, contentHeight));
+
+  return { width, height };
+}