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

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

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAI5D,OAAO,KAAK,EAAyE,gBAAgB,EAAoC,MAAM,mCAAmC,CAAC;AAKnL,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AA6BrE;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;CACJ;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAioC9D,CAAC"}
+{"version":3,"file":"CanvasEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAI5D,OAAO,KAAK,EAAyE,gBAAgB,EAAoC,MAAM,mCAAmC,CAAC;AAKnL,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AA6BrE;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;CACJ;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAs7B9D,CAAC"}

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;
@@ -94246,11 +94330,9 @@ const CanvasEditorPanel = ({
   workflowFileInfo: _workflowFileInfo,
   traceMatchInfo
 }) => {
-  var _a, _b, _c, _d, _e2;
+  var _a, _b, _c;
   const { theme: theme2 } = useTheme();
   const graphRef = useRef(null);
-  const [dimensions, setDimensions] = useState({ width: 800, height: 600 });
-  const resizeObserverRef = useRef(null);
   const [state, setState] = useState({
     canvas: null,
     library: null,
@@ -94270,6 +94352,7 @@ const CanvasEditorPanel = ({
     highlightedNodeId: null
   });
   const [shouldFitToNodes, setShouldFitToNodes] = useState(false);
+  const [fitCounter, setFitCounter] = useState(0);
   const [isCarouselExpanded, setIsCarouselExpanded] = useState(false);
   const contextRef = useRef(context2);
   const actionsRef = useRef(actions);
@@ -94285,32 +94368,6 @@ const CanvasEditorPanel = ({
     return ((_a2 = slice == null ? void 0 : slice.data) == null ? void 0 : _a2.sha) || null;
   }, [context2]);
   const [pathCopied, setPathCopied] = useState(false);
-  const containerRef = useCallback((container) => {
-    if (resizeObserverRef.current) {
-      resizeObserverRef.current.disconnect();
-      resizeObserverRef.current = null;
-    }
-    if (!container) {
-      return;
-    }
-    const updateDimensions = () => {
-      const { width, height } = container.getBoundingClientRect();
-      setDimensions((prev) => {
-        const newWidth = Math.round(width);
-        const newHeight = Math.round(height);
-        if (prev.width === newWidth && prev.height === newHeight) {
-          return prev;
-        }
-        return { width: newWidth, height: newHeight };
-      });
-    };
-    updateDimensions();
-    const resizeObserver = new ResizeObserver(() => {
-      requestAnimationFrame(updateDimensions);
-    });
-    resizeObserver.observe(container);
-    resizeObserverRef.current = resizeObserver;
-  }, []);
   const loadConfiguration = useCallback(async () => {
     if (!canvasPath) {
       setState((prev) => ({ ...prev, canvas: null, library: null, loading: false, error: null }));
@@ -94409,6 +94466,7 @@ const CanvasEditorPanel = ({
       hoveredScenarioEventNames: eventNames
     }));
     if (eventNames && eventNames.length > 0) {
+      setFitCounter((c2) => c2 + 1);
       setShouldFitToNodes(true);
     }
   }, []);
@@ -94421,6 +94479,7 @@ const CanvasEditorPanel = ({
       highlightedNodeId: null
     }));
     setIsCarouselExpanded(true);
+    setFitCounter((c2) => c2 + 1);
     setShouldFitToNodes(true);
   }, []);
   const handleNarrativeEventClick = useCallback((event, eventIndex) => {
@@ -94432,6 +94491,7 @@ const CanvasEditorPanel = ({
         currentEventIndex: eventIndex
       };
     });
+    setFitCounter((c2) => c2 + 1);
     setShouldFitToNodes(true);
   }, []);
   const handleEventCarouselDismiss = useCallback(() => {
@@ -94519,20 +94579,37 @@ const CanvasEditorPanel = ({
         return [state.highlightedNodeId];
       }
       if (activeNodeIds && activeNodeIds.length > 0) {
-        return activeNodeIds;
+        return [...activeNodeIds];
       }
       if (((_a2 = state.canvas) == null ? void 0 : _a2.nodes) && state.canvas.nodes.length > 0) {
         return state.canvas.nodes.map((n) => n.id);
       }
     }
     return void 0;
-  }, [shouldFitToNodes, activeNodeIds, (_a = state.canvas) == null ? void 0 : _a.nodes, state.highlightedNodeId]);
+  }, [shouldFitToNodes, activeNodeIds, (_a = state.canvas) == null ? void 0 : _a.nodes, state.highlightedNodeId, fitCounter]);
   useEffect(() => {
     if (shouldFitToNodes) {
-      const timer2 = setTimeout(() => setShouldFitToNodes(false), 100);
+      const timer2 = setTimeout(() => setShouldFitToNodes(false), 300);
       return () => clearTimeout(timer2);
     }
   }, [shouldFitToNodes]);
+  const prevWorkflowTemplateRef = useRef(workflowTemplate);
+  useEffect(() => {
+    const hadWorkflow = !!prevWorkflowTemplateRef.current;
+    const hasWorkflow = !!workflowTemplate;
+    prevWorkflowTemplateRef.current = workflowTemplate;
+    if (hadWorkflow !== hasWorkflow) {
+      setState((prev) => ({
+        ...prev,
+        selectedScenarioId: null,
+        selectedScenario: null,
+        hoveredScenarioEventNames: null,
+        highlightedNodeId: null,
+        currentEventIndex: 0
+      }));
+      setIsCarouselExpanded(false);
+    }
+  }, [workflowTemplate]);
   useEffect(() => {
     loadConfiguration();
   }, [canvasPath, loadConfiguration]);
@@ -94761,11 +94838,13 @@ const CanvasEditorPanel = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: workflowTemplate ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
       AnimatedResizableLayout,
       {
         theme: theme2,
-        leftPanel: /* @__PURE__ */ jsx("div", { style: { height: "100%", overflow: "hidden", background: theme2.colors.background }, children: /* @__PURE__ */ jsx(
+        collapsed: !workflowTemplate,
+        showCollapseButton: !!workflowTemplate,
+        leftPanel: workflowTemplate ? /* @__PURE__ */ jsx("div", { style: { height: "100%", overflow: "hidden", background: theme2.colors.background }, children: /* @__PURE__ */ jsx(
           ScenariosList,
           {
             workflowTemplate,
@@ -94774,7 +94853,7 @@ const CanvasEditorPanel = ({
             selectedScenarioId: state.selectedScenarioId ?? void 0,
             traceMatchInfo
           }
-        ) }),
+        ) }) : /* @__PURE__ */ jsx("div", {}),
         rightPanel: /* @__PURE__ */ jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column", background: theme2.colors.background, position: "relative" }, children: [
           /* @__PURE__ */ jsxs("div", { style: { flex: 1, position: "relative", minHeight: 0 }, children: [
             /* @__PURE__ */ jsx(
@@ -95010,189 +95089,6 @@ const CanvasEditorPanel = ({
           )
         ] })
       }
-    ) : (
-      /* Original editor layout when no workflow is present */
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", position: "relative", height: "100%", overflow: "hidden" }, children: [
-        /* @__PURE__ */ jsx("div", { ref: containerRef, style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx(
-          GraphRenderer,
-          {
-            ref: graphRef,
-            canvas: state.canvas,
-            library: state.library ?? void 0,
-            width: dimensions.width,
-            height: dimensions.height,
-            editable: state.isEditMode,
-            onPendingChangesChange: (hasChanges) => {
-              setState((prev) => ({ ...prev, hasUnsavedChanges: hasChanges }));
-            },
-            showBackground: state.showGridLines,
-            backgroundVariant: "lines",
-            highlightedNodeId: state.highlightedNodeId,
-            activeNodeIds,
-            fitViewToNodeIds,
-            fitViewPadding: 0.15
-          }
-        ) }),
-        state.isEditMode && state.hasUnsavedChanges && /* @__PURE__ */ jsxs("div", { style: {
-          position: "absolute",
-          top: 0,
-          right: 0,
-          height: 40,
-          display: "flex",
-          alignItems: "stretch",
-          backgroundColor: theme2.colors.background,
-          border: `1px solid ${theme2.colors.border}`,
-          borderRadius: 0,
-          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-          zIndex: 40
-        }, children: [
-          /* @__PURE__ */ jsx("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            padding: theme2.space[3],
-            fontSize: theme2.fontSizes[1],
-            color: theme2.colors.warning || "#f59e0b",
-            fontStyle: "italic",
-            fontWeight: theme2.fontWeights.medium
-          }, children: "Unsaved changes" }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: saveAllChanges,
-              disabled: state.isSaving,
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: theme2.space[1],
-                padding: `0 ${theme2.space[3]}`,
-                fontSize: theme2.fontSizes[1],
-                fontFamily: theme2.fonts.body,
-                color: "white",
-                backgroundColor: theme2.colors.primary,
-                border: "none",
-                borderRadius: 0,
-                cursor: state.isSaving ? "wait" : "pointer",
-                opacity: state.isSaving ? 0.7 : 1,
-                transition: "all 0.2s",
-                minWidth: 80
-              },
-              children: [
-                state.isSaving ? /* @__PURE__ */ jsx(Loader, { size: 14, style: { animation: "spin 1s linear infinite" } }) : /* @__PURE__ */ jsx(Save, { size: 14 }),
-                /* @__PURE__ */ jsx("span", { children: "Save" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: discardChanges,
-              disabled: state.isSaving,
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: theme2.space[1],
-                padding: `0 ${theme2.space[3]}`,
-                fontSize: theme2.fontSizes[1],
-                fontFamily: theme2.fonts.body,
-                color: theme2.colors.text,
-                backgroundColor: theme2.colors.backgroundSecondary,
-                border: "none",
-                borderLeft: `1px solid ${theme2.colors.border}`,
-                borderRadius: 0,
-                cursor: state.isSaving ? "wait" : "pointer",
-                opacity: state.isSaving ? 0.7 : 1,
-                transition: "all 0.2s",
-                minWidth: 80
-              },
-              children: [
-                /* @__PURE__ */ jsx(X, { size: 14 }),
-                /* @__PURE__ */ jsx("span", { children: "Discard" })
-              ]
-            }
-          )
-        ] }),
-        state.showLegend && /* @__PURE__ */ jsxs("div", { style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          height: 40,
-          backgroundColor: theme2.colors.background,
-          borderBottom: `1px solid ${theme2.colors.border}`,
-          padding: `0 ${theme2.space[3]}`,
-          display: "flex",
-          alignItems: "center",
-          gap: theme2.space[4],
-          overflowX: "auto",
-          zIndex: 50,
-          boxSizing: "border-box"
-        }, children: [
-          /* @__PURE__ */ jsx("span", { style: {
-            fontSize: theme2.fontSizes[1],
-            fontWeight: theme2.fontWeights.medium,
-            color: theme2.colors.textMuted,
-            flexShrink: 0
-          }, children: "Edges:" }),
-          ((_e2 = (_d = state.canvas) == null ? void 0 : _d.pv) == null ? void 0 : _e2.edgeTypes) && Object.keys(state.canvas.pv.edgeTypes).length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: theme2.space[4], flexWrap: "wrap" }, children: Object.entries(state.canvas.pv.edgeTypes).map(([typeName, edgeType]) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: theme2.space[2]
-              },
-              children: [
-                /* @__PURE__ */ jsxs("svg", { width: "40", height: "12", style: { flexShrink: 0 }, children: [
-                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-                    "marker",
-                    {
-                      id: `legend-arrow-${typeName}`,
-                      markerWidth: "8",
-                      markerHeight: "6",
-                      refX: "7",
-                      refY: "3",
-                      orient: "auto",
-                      children: /* @__PURE__ */ jsx(
-                        "polygon",
-                        {
-                          points: "0 0, 8 3, 0 6",
-                          fill: edgeType.color || "#64748b"
-                        }
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(
-                    "line",
-                    {
-                      x1: "2",
-                      y1: "6",
-                      x2: "32",
-                      y2: "6",
-                      stroke: edgeType.color || "#64748b",
-                      strokeWidth: Math.min(edgeType.width || 2, 3),
-                      strokeDasharray: edgeType.style === "dashed" ? "4,2" : edgeType.style === "dotted" ? "2,2" : void 0,
-                      markerEnd: edgeType.directed ? `url(#legend-arrow-${typeName})` : void 0
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx("span", { style: {
-                  fontSize: theme2.fontSizes[1],
-                  color: theme2.colors.text,
-                  textTransform: "capitalize",
-                  whiteSpace: "nowrap"
-                }, children: typeName.replace(/-/g, " ") })
-              ]
-            },
-            typeName
-          )) }) : /* @__PURE__ */ jsx("span", { style: {
-            fontSize: theme2.fontSizes[1],
-            color: theme2.colors.textMuted,
-            fontStyle: "italic"
-          }, children: "No edge types defined" })
-        ] })
-      ] })
     ) })
   ] });
 };
@@ -98900,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,
                             {