@industry-theme/principal-view-panels 0.12.2 → 0.12.4

package/dist/panels/MultiCanvasPanel.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { type MultiCanvasLayout } from '@principal-ai/principal-view-react';
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
+export interface MultiCanvasPanelProps {
+    /** Layout configuration with canvas placements */
+    layout: MultiCanvasLayout;
+    /** Whether to show group borders around each canvas (default: true) */
+    showGroups?: boolean;
+    /** Show minimap for navigation (default: false) */
+    showMinimap?: boolean;
+    /** Show view controls (default: true) */
+    showControls?: boolean;
+    /** Show background pattern (default: true) */
+    showBackground?: boolean;
+    /** Background pattern variant */
+    backgroundVariant?: 'dots' | 'lines' | 'cross';
+    /** Width of the panel */
+    width?: number;
+    /** Height of the panel */
+    height?: number;
+    /** Optional click handler for nodes */
+    onNodeClick?: (nodeId: string) => void;
+}
+/**
+ * MultiCanvasPanel displays multiple canvases on a single unified view
+ * using the MultiCanvasRenderer from principal-view-react.
+ */
+export declare const MultiCanvasPanel: React.FC<MultiCanvasPanelProps>;
+/**
+ * Helper function to create a MultiCanvasLayout from an array of canvases
+ */
+export declare function createMultiCanvasLayout(canvases: Array<{
+    id: string;
+    canvas: ExtendedCanvas;
+    label?: string;
+}>, options?: {
+    direction?: 'vertical' | 'horizontal';
+    gap?: number;
+}): MultiCanvasLayout;
+//# sourceMappingURL=MultiCanvasPanel.d.ts.map

package/dist/panels/MultiCanvasPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiCanvasPanel.d.ts","sourceRoot":"","sources":["../../src/panels/MultiCanvasPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,KAAK,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACjG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,MAAM,WAAW,qBAAqB;IACpC,kDAAkD;IAClD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC/C,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwB5D,CAAC;AAEF;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,KAAK,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,EACF,OAAO,CAAC,EAAE;IACR,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GACA,iBAAiB,CA0BnB"}

package/dist/panels/StoryboardListPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAqE9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAy4BvE,CAAC"}
+{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAqE9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA+5BvE,CAAC"}

package/dist/panels.bundle.js

@@ -87144,7 +87144,7 @@ const CenterIndicator = ({ color: color2 }) => {
     zIndex: 5
   }, children: [jsx("line", { x1: screenX, y1: screenY - size, x2: screenX, y2: screenY + size, stroke: color2, strokeWidth, opacity: 0.7 }), jsx("line", { x1: screenX - size, y1: screenY, x2: screenX + size, y2: screenY, stroke: color2, strokeWidth, opacity: 0.7 }), jsx("circle", { cx: screenX, cy: screenY, r: 3, fill: color2, opacity: 0.7 })] });
 };
-const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "lines", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2 }) => {
+const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "lines", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp }) => {
   const { fitView: fitView2, fitBounds, getNodes } = useReactFlow();
   const updateNodeInternals2 = useUpdateNodeInternals();
   const { theme: theme2 } = useTheme();
@@ -87652,10 +87652,17 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     return converted.map((node2) => {
       const animation = animationState.nodeAnimations[node2.id];
       const pendingPosition = editStateRef.current.positionChanges.get(node2.id);
+      const isDraggable = editable || (draggableNodeIds == null ? void 0 : draggableNodeIds.has(node2.id));
+      if (isDraggable && !editable) {
+        console.log("[GraphRenderer] Setting draggable=true for node:", node2.id);
+      }
+      const hasDraggableNodeIds = draggableNodeIds && draggableNodeIds.size > 0;
       return {
         ...node2,
         ...pendingPosition ? { position: pendingPosition } : {},
         selected: selectedNodeIds.has(node2.id),
+        // Explicitly set draggable for each node when using draggableNodeIds
+        draggable: hasDraggableNodeIds ? isDraggable : editable || false,
         data: {
           ...node2.data,
           editable,
@@ -87671,7 +87678,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         }
       };
     });
-  }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds, hiddenNodeIds]);
+  }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds, hiddenNodeIds, draggableNodeIds]);
   const baseNodesKey = useMemo(() => {
     return nodes.map((n) => n.id).sort().join(",");
   }, [nodes]);
@@ -87712,14 +87719,20 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
   }, [editable, xyflowNodesBase, updateNodeInternals2]);
   const xyflowNodes = editable ? xyflowLocalNodes : xyflowNodesBase;
   const handleNodeDrag = useCallback((_event, node2) => {
-    if (!editable)
+    const canDrag = editable || (draggableNodeIds == null ? void 0 : draggableNodeIds.has(node2.id));
+    if (!canDrag)
       return;
-    const guides = detectAlignmentGuides(node2.id, xyflowNodes);
-    setAlignmentGuides(guides);
-  }, [editable, xyflowNodes, detectAlignmentGuides]);
-  const handleNodeDragStop = useCallback(() => {
+    if (editable) {
+      const guides = detectAlignmentGuides(node2.id, xyflowNodes);
+      setAlignmentGuides(guides);
+    }
+  }, [editable, draggableNodeIds, xyflowNodes, detectAlignmentGuides]);
+  const handleNodeDragStop = useCallback((_event, node2) => {
     setAlignmentGuides([]);
-  }, []);
+    if (onNodeDragStopProp && node2.position) {
+      onNodeDragStopProp(node2.id, node2.position);
+    }
+  }, [onNodeDragStopProp]);
   const handleNodesChange = useCallback((changes) => {
     if (!editable)
       return;
@@ -87869,7 +87882,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, 150);
     return () => clearTimeout(timeoutId);
   }, [fitViewToNodeIdsKey, fitViewToNodeIds, fitViewPadding, fitView2, fitViewDuration, getNodes, fitBounds]);
-  return jsxs(Fragment, { children: [jsxs(index$2, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, onNodeDoubleClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: editable, selectNodesOnDrag: false, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, selectionOnDrag: false, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && jsx(Background, { color: backgroundVariant === "dots" ? theme2.colors.border : theme2.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === "dots" ? 16 : 50), size: backgroundVariant === "dots" ? 1 : 0.5, variant: backgroundVariant === "dots" ? BackgroundVariant.Dots : backgroundVariant === "lines" ? BackgroundVariant.Lines : BackgroundVariant.Cross }), showControls && jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && jsx(MiniMap, { nodeColor: (node2) => {
+  return jsxs(Fragment, { children: [jsxs(index$2, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, onNodeDoubleClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable || draggableNodeIds && draggableNodeIds.size > 0, elementsSelectable: editable, selectNodesOnDrag: false, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, selectionOnDrag: false, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && jsx(Background, { color: backgroundVariant === "dots" ? theme2.colors.border : theme2.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === "dots" ? 16 : 50), size: backgroundVariant === "dots" ? 1 : 0.5, variant: backgroundVariant === "dots" ? BackgroundVariant.Dots : backgroundVariant === "lines" ? BackgroundVariant.Lines : BackgroundVariant.Cross }), showControls && jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && jsx(MiniMap, { nodeColor: (node2) => {
     var _a;
     const nodeData = node2.data;
     return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme2.colors.secondary;
@@ -88082,10 +88095,158 @@ const GraphRenderer = forwardRef((props2, ref) => {
     }, children: jsx("p", { children: "No canvas data provided." }) });
   }
   const { configuration, nodes, edges } = canvasData;
-  const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, onNodeClick, fitViewToNodeIds, fitViewPadding } = props2;
-  return jsx("div", { className, style: { width, height, position: "relative" }, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, onNodeClick, fitViewToNodeIds, fitViewPadding }) }) });
+  const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop } = props2;
+  return jsx("div", { className, style: { width, height, position: "relative" }, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop }) }) });
 });
 GraphRenderer.displayName = "GraphRenderer";
+const DEFAULT_NODE_WIDTH = 200;
+const DEFAULT_NODE_HEIGHT = 100;
+const GROUP_PADDING = 40;
+function prefixNodeId(canvasId, nodeId) {
+  return `${canvasId}:${nodeId}`;
+}
+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 node2 of canvas.nodes) {
+    const x = node2.x ?? 0;
+    const y = node2.y ?? 0;
+    const width = node2.width ?? DEFAULT_NODE_WIDTH;
+    const height = node2.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 };
+}
+function mergeCanvases(placements, options = {}) {
+  var _a;
+  const { showGroups = true } = options;
+  const groupNodes = [];
+  const mergedNodes = [];
+  const mergedEdges = [];
+  for (const placement of placements) {
+    const { canvasId, canvas, position: position2, label } = placement;
+    if (showGroups && canvas.nodes && canvas.nodes.length > 0) {
+      const bounds = calculateCanvasBounds(canvas);
+      const groupNode = {
+        id: `${canvasId}:__group__`,
+        type: "group",
+        label: label ?? ((_a = canvas.pv) == null ? void 0 : _a.name) ?? canvasId,
+        x: position2.x + bounds.minX - GROUP_PADDING,
+        y: position2.y + bounds.minY - GROUP_PADDING,
+        width: bounds.maxX - bounds.minX + GROUP_PADDING * 2,
+        height: bounds.maxY - bounds.minY + GROUP_PADDING * 2
+      };
+      groupNodes.push(groupNode);
+    }
+    if (canvas.nodes) {
+      for (const node2 of canvas.nodes) {
+        const mergedNode = {
+          ...node2,
+          id: prefixNodeId(canvasId, node2.id),
+          x: (node2.x ?? 0) + position2.x,
+          y: (node2.y ?? 0) + position2.y
+        };
+        mergedNodes.push(mergedNode);
+      }
+    }
+    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);
+      }
+    }
+  }
+  const mergedCanvas = {
+    nodes: [...groupNodes, ...mergedNodes],
+    edges: mergedEdges,
+    pv: {
+      version: "1.0.0",
+      name: "Multi-Canvas View"
+    }
+  };
+  return mergedCanvas;
+}
+function parseNodeId(mergedNodeId) {
+  const colonIndex = mergedNodeId.indexOf(":");
+  if (colonIndex === -1)
+    return null;
+  return {
+    canvasId: mergedNodeId.substring(0, colonIndex),
+    nodeId: mergedNodeId.substring(colonIndex + 1)
+  };
+}
+forwardRef(function MultiCanvasRenderer({ layout, onLayoutChange, showGroups = true, ...graphRendererProps }, ref) {
+  const groupPositionsRef = useRef(/* @__PURE__ */ new Map());
+  const mergedCanvas = useMemo(() => mergeCanvases(layout.placements, { showGroups }), [layout.placements, showGroups]);
+  const draggableNodeIds = useMemo(() => {
+    if (!showGroups)
+      return void 0;
+    const ids = /* @__PURE__ */ new Set();
+    for (const placement of layout.placements) {
+      if (placement.canvas.nodes && placement.canvas.nodes.length > 0) {
+        ids.add(`${placement.canvasId}:__group__`);
+      }
+    }
+    console.log("[MultiCanvasRenderer] draggableNodeIds:", [...ids]);
+    return ids.size > 0 ? ids : void 0;
+  }, [layout.placements, showGroups]);
+  useMemo(() => {
+    groupPositionsRef.current.clear();
+    for (const placement of layout.placements) {
+      if (placement.canvas.nodes && placement.canvas.nodes.length > 0) {
+        const bounds = calculateCanvasBounds(placement.canvas);
+        groupPositionsRef.current.set(`${placement.canvasId}:__group__`, {
+          x: placement.position.x + bounds.minX - GROUP_PADDING,
+          y: placement.position.y + bounds.minY - GROUP_PADDING
+        });
+      }
+    }
+  }, [layout.placements]);
+  const handleNodeDragStop = useCallback((nodeId, newPosition) => {
+    if (!nodeId.endsWith(":__group__"))
+      return;
+    if (!onLayoutChange)
+      return;
+    const parsed = parseNodeId(nodeId);
+    if (!parsed)
+      return;
+    const { canvasId } = parsed;
+    const originalGroupPos = groupPositionsRef.current.get(nodeId);
+    if (!originalGroupPos)
+      return;
+    const deltaX = newPosition.x - originalGroupPos.x;
+    const deltaY = newPosition.y - originalGroupPos.y;
+    if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1)
+      return;
+    const updatedPlacements = layout.placements.map((placement) => {
+      if (placement.canvasId === canvasId) {
+        return {
+          ...placement,
+          position: {
+            x: placement.position.x + deltaX,
+            y: placement.position.y + deltaY
+          }
+        };
+      }
+      return placement;
+    });
+    onLayoutChange({ placements: updatedPlacements });
+  }, [layout.placements, onLayoutChange]);
+  return jsx(GraphRenderer, { ref, canvas: mergedCanvas, editable: false, draggableNodeIds, onNodeDragStop: handleNodeDragStop, ...graphRendererProps });
+});
 /*! js-yaml 4.1.1 https://github.com/nodeca/js-yaml @license MIT */
 function isNothing(subject) {
   return typeof subject === "undefined" || subject === null;
@@ -98712,18 +98873,36 @@ const StoryboardListPanel = ({
                         "button",
                         {
                           onClick: toggleHelp,
+                          draggable: true,
+                          onDragStart: (e) => {
+                            const cliCommand = storyboards.length > 0 ? "npx @principal-ai/principal-view-cli@latest --help" : "npx @principal-ai/principal-view-cli@latest init";
+                            const dragData = {
+                              dataType: "cli-command",
+                              primaryData: cliCommand,
+                              metadata: {
+                                description: "Principal View CLI command",
+                                action: storyboards.length > 0 ? "help" : "init"
+                              },
+                              suggestedActions: ["paste", "execute"],
+                              sourcePanel: "storyboard-list",
+                              dragPreview: cliCommand
+                            };
+                            e.dataTransfer.setData("application/x-panel-data", JSON.stringify(dragData));
+                            e.dataTransfer.setData("text/plain", cliCommand);
+                            e.dataTransfer.effectAllowed = "copy";
+                          },
                           style: {
                             background: showHelp ? theme2.colors.primary : theme2.colors.backgroundSecondary,
                             border: `1px solid ${theme2.colors.border}`,
                             borderRadius: theme2.radii[1],
                             padding: "6px",
-                            cursor: "pointer",
+                            cursor: "grab",
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "center",
                             transition: "all 0.2s ease"
                           },
-                          title: "Help & Getting Started",
+                          title: "Help & Getting Started (drag to copy CLI command)",
                           children: /* @__PURE__ */ jsx(
                             CircleQuestionMark,
                             {