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

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

@@ -88086,6 +88086,90 @@ const GraphRenderer = forwardRef((props2, ref) => {
   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 }) }) });
 });
 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;
+}
+forwardRef(function MultiCanvasRenderer({ layout, onLayoutChange: _onLayoutChange, showGroups = true, ...graphRendererProps }, ref) {
+  const mergedCanvas = useMemo(() => mergeCanvases(layout.placements, { showGroups }), [layout.placements, showGroups]);
+  return jsx(GraphRenderer, { ref, canvas: mergedCanvas, editable: false, ...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 +98796,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,
                             {