@industry-theme/principal-view-panels 0.12.13 → 0.12.15

package/dist/panels/CanvasEditorPanel.d.ts

@@ -45,6 +45,11 @@ export interface CanvasEditorPanelProps extends CanvasEditorPanelPropsTyped {
         matchType: 'full' | 'partial';
         coveragePercent?: number;
     }>;
+    /**
+     * Optional callback to close the panel.
+     * When provided, displays a close button (X) in the header.
+     */
+    onClosePanel?: () => void;
 }
 /**
  * Principal View Graph Panel

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,CAs7B9D,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;IAEH;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAs9B9D,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,CA48BvE,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,CAg9BvE,CAAC"}

package/dist/panels.bundle.js

@@ -86408,7 +86408,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     // Default to not hidden
   } = nodeProps;
   const nodeOpacity = isHidden ? 0.4 : isActive ? 1 : 0.1;
-  const showTooltip = isHovered && !dragging && shiftKeyPressed;
+  const showTooltip = isHovered && !dragging && shiftKeyPressed || !editable && !!selected2;
   const otelInfo = nodeData == null ? void 0 : nodeData.otel;
   const description = nodeData == null ? void 0 : nodeData.description;
   const sources = nodeData == null ? void 0 : nodeData.sources;
@@ -87231,6 +87231,15 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       setAnimationState({ nodeAnimations: {}, edgeAnimations: {} });
     }
   }, [propNodes, propEdges, editStateRef, onEditStateChange, onPendingChangesChange]);
+  const propNodesRef = useRef(propNodes);
+  useEffect(() => {
+    if (!draggableNodeIds || draggableNodeIds.size === 0)
+      return;
+    if (propNodesRef.current === propNodes)
+      return;
+    propNodesRef.current = propNodes;
+    setLocalNodes(propNodes);
+  }, [propNodes, draggableNodeIds]);
   const nodes = localNodes;
   const edges = editable ? localEdges : propEdges;
   const checkHasChanges = useCallback((state) => {
@@ -87680,19 +87689,23 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
   const xyflowNodesBase = useMemo(() => {
     const converted = convertToXYFlowNodes(localNodes, configuration, violations);
     return converted.map((node2) => {
+      var _a, _b;
       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;
+      const dataWidth = typeof ((_a = node2.data) == null ? void 0 : _a.width) === "number" ? node2.data.width : void 0;
+      const dataHeight = typeof ((_b = node2.data) == null ? void 0 : _b.height) === "number" ? node2.data.height : void 0;
+      const nodeWidth = node2.width ?? dataWidth ?? 200;
+      const nodeHeight = node2.height ?? dataHeight ?? 100;
       return {
         ...node2,
         ...pendingPosition ? { position: pendingPosition } : {},
         selected: selectedNodeIds.has(node2.id),
         // Explicitly set draggable for each node when using draggableNodeIds
         draggable: hasDraggableNodeIds ? isDraggable : editable || false,
+        // Set measured dimensions for React Flow v12 controlled drag
+        measured: { width: nodeWidth, height: nodeHeight },
         data: {
           ...node2.data,
           editable,
@@ -87747,7 +87760,21 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }
     prevEditableRef.current = editable;
   }, [editable, xyflowNodesBase, updateNodeInternals2]);
-  const xyflowNodes = editable ? xyflowLocalNodes : xyflowNodesBase;
+  const hasDraggableNodes = draggableNodeIds && draggableNodeIds.size > 0;
+  const xyflowNodes = editable || hasDraggableNodes ? xyflowLocalNodes : xyflowNodesBase;
+  const prevHasDraggableNodesRef = useRef(false);
+  useEffect(() => {
+    const hadDraggableNodes = prevHasDraggableNodesRef.current;
+    prevHasDraggableNodesRef.current = hasDraggableNodes || false;
+    if (hasDraggableNodes && !hadDraggableNodes) {
+      setXyflowLocalNodes(xyflowNodesBase);
+      setTimeout(() => {
+        draggableNodeIds == null ? void 0 : draggableNodeIds.forEach((nodeId) => {
+          updateNodeInternals2(nodeId);
+        });
+      }, 50);
+    }
+  }, [hasDraggableNodes, xyflowNodesBase, draggableNodeIds, updateNodeInternals2]);
   const handleNodeDrag = useCallback((_event, node2) => {
     const canDrag = editable || (draggableNodeIds == null ? void 0 : draggableNodeIds.has(node2.id));
     if (!canDrag)
@@ -87764,12 +87791,43 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }
   }, [onNodeDragStopProp]);
   const handleNodesChange = useCallback((changes) => {
-    if (!editable)
+    const hasDraggableNodes2 = draggableNodeIds && draggableNodeIds.size > 0;
+    if (!editable && !hasDraggableNodes2)
       return;
-    const nonSelectionChanges = changes.filter((change) => change.type !== "select");
-    if (nonSelectionChanges.length > 0) {
+    let changesToApply = changes.filter((change) => change.type !== "select");
+    if (!editable && hasDraggableNodes2) {
+      changesToApply = changesToApply.filter((change) => change.type === "position" && "id" in change && draggableNodeIds.has(change.id));
+    }
+    if (changesToApply.length > 0) {
       setXyflowLocalNodes((nds) => {
-        const updated = applyNodeChanges(nonSelectionChanges, nds);
+        const groupPositionChanges = changesToApply.filter((change) => change.type === "position" && "id" in change && typeof change.id === "string" && change.id.endsWith(":__group__") && "position" in change && change.position !== void 0);
+        const groupDeltas = /* @__PURE__ */ new Map();
+        for (const change of groupPositionChanges) {
+          const canvasPrefix = change.id.replace(":__group__", ":");
+          const currentNode = nds.find((n) => n.id === change.id);
+          if (currentNode && change.position) {
+            const dx = change.position.x - currentNode.position.x;
+            const dy = change.position.y - currentNode.position.y;
+            groupDeltas.set(canvasPrefix, { dx, dy });
+          }
+        }
+        let updated = applyNodeChanges(changesToApply, nds);
+        if (groupDeltas.size > 0) {
+          updated = updated.map((node2) => {
+            for (const [prefix, delta] of groupDeltas) {
+              if (node2.id.startsWith(prefix) && !node2.id.endsWith(":__group__")) {
+                return {
+                  ...node2,
+                  position: {
+                    x: node2.position.x + delta.dx,
+                    y: node2.position.y + delta.dy
+                  }
+                };
+              }
+            }
+            return node2;
+          });
+        }
         return updated.map((node2) => ({
           ...node2,
           selected: selectedNodeIds.has(node2.id)
@@ -87804,7 +87862,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         return { ...prev, positionChanges: newPositions };
       });
     }
-  }, [editable, updateEditState, selectedNodeIds]);
+  }, [editable, updateEditState, selectedNodeIds, draggableNodeIds]);
   const xyflowEdgesBase = useMemo(() => {
     const converted = convertToXYFlowEdges(edges, configuration, violations);
     const filtered = converted.filter((edge) => {
@@ -88230,7 +88288,6 @@ const MultiCanvasRenderer = forwardRef(function MultiCanvasRenderer2({ layout, o
         ids.add(`${placement.canvasId}:__group__`);
       }
     }
-    console.log("[MultiCanvasRenderer] draggableNodeIds:", [...ids]);
     return ids.size > 0 ? ids : void 0;
   }, [layout.placements, showGroups]);
   useMemo(() => {
@@ -94435,7 +94492,8 @@ const CanvasEditorPanel = ({
   selectedWorkflowId: _selectedWorkflowId,
   workflowPath: _workflowPath,
   workflowFileInfo: _workflowFileInfo,
-  traceMatchInfo
+  traceMatchInfo,
+  onClosePanel
 }) => {
   var _a, _b, _c;
   const { theme: theme2 } = useTheme();
@@ -94468,6 +94526,7 @@ const CanvasEditorPanel = ({
   actionsRef.current = actions;
   eventsRef.current = events;
   const skipNextFileChangeRef = useRef(false);
+  const canEdit = !!actions.writeFile;
   const canvasFileTimestampRef = useRef(null);
   const fileTreeSha = React__default.useMemo(() => {
     var _a2;
@@ -94621,8 +94680,7 @@ const CanvasEditorPanel = ({
     try {
       const ctx = contextRef.current;
       const acts = actionsRef.current;
-      const writeFile = acts.writeFile;
-      if (!writeFile) {
+      if (!acts.writeFile) {
         throw new Error("writeFile action not available");
       }
       const repositoryPath = ctx.repositoryPath;
@@ -94632,7 +94690,7 @@ const CanvasEditorPanel = ({
       const updatedCanvas = hasGraphChanges && pendingChanges ? applyChangesToCanvas(state.canvas, pendingChanges) : state.canvas;
       const jsonContent = JSON.stringify(updatedCanvas, null, 2);
       const fullPath = `${repositoryPath}/${canvasPath}`;
-      await writeFile(fullPath, jsonContent);
+      await acts.writeFile(fullPath, jsonContent);
       skipNextFileChangeRef.current = true;
       setState((prev) => ({
         ...prev,
@@ -94849,7 +94907,7 @@ const CanvasEditorPanel = ({
         ] }),
         /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: theme2.space[2], flexShrink: 0 } })
       ] }),
-      /* @__PURE__ */ jsx(
+      canEdit && /* @__PURE__ */ jsx(
         "button",
         {
           onClick: () => loadConfiguration(),
@@ -94920,7 +94978,7 @@ const CanvasEditorPanel = ({
           children: /* @__PURE__ */ jsx(Info2, { size: 18 })
         }
       ),
-      /* @__PURE__ */ jsx(
+      canEdit && /* @__PURE__ */ jsx(
         "button",
         {
           onClick: toggleEditMode,
@@ -94943,6 +95001,29 @@ const CanvasEditorPanel = ({
           },
           children: /* @__PURE__ */ jsx(Pencil, { size: 18 })
         }
+      ),
+      onClosePanel && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClosePanel,
+          title: "Close panel",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 40,
+            height: 39,
+            padding: 0,
+            backgroundColor: "transparent",
+            color: theme2.colors.textMuted,
+            border: "none",
+            borderLeft: `1px solid ${theme2.colors.border}`,
+            cursor: "pointer",
+            transition: "all 0.15s",
+            flexShrink: 0
+          },
+          children: /* @__PURE__ */ jsx(X, { size: 18 })
+        }
       )
     ] }),
     /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
@@ -98805,7 +98886,10 @@ const StoryboardListPanel = ({
     const cliCommand = storyboards.length > 0 ? "npx @principal-ai/principal-view-cli@latest --help" : "npx @principal-ai/principal-view-cli@latest init";
     navigator.clipboard.writeText(cliCommand).then(() => {
       setCliCommandCopied(true);
-      setTimeout(() => setCliCommandCopied(false), 2e3);
+      setTimeout(() => {
+        setShowHelp(false);
+        setCliCommandCopied(false);
+      }, 600);
     });
   }, [storyboards.length]);
   const handleCopyInitCommand = useCallback(() => {