@industry-theme/principal-view-panels 0.12.54 → 0.12.56

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,EAA+C,MAAM,mCAAmC,CAAC;AAC9L,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAKxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAiCrE;;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,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAEvC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA+gD9D,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,EAA+C,MAAM,mCAAmC,CAAC;AAC9L,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAKxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAiCrE;;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,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAEvC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqhD9D,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,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAsE9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA+pCvE,CAAC"}
+{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAsE9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA4yCvE,CAAC"}

package/dist/panels/execution-viewer/WorkflowRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkflowRenderer.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/WorkflowRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAoC,MAAM,mCAAmC,CAAC;AAKvI,MAAM,WAAW,qBAAqB;IACpC,6CAA6C;IAC7C,QAAQ,EAAE,gBAAgB,CAAC;IAE3B,4BAA4B;IAC5B,MAAM,EAAE,SAAS,EAAE,CAAC;IAEpB,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAC;IAEnB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,sFAAsF;IACtF,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9D,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,kFAAkF;IAClF,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,yCAAyC;IACzC,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAE/B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAinB5D,CAAC"}
+{"version":3,"file":"WorkflowRenderer.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/WorkflowRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAoC,MAAM,mCAAmC,CAAC;AAKvI,MAAM,WAAW,qBAAqB;IACpC,6CAA6C;IAC7C,QAAQ,EAAE,gBAAgB,CAAC;IAE3B,4BAA4B;IAC5B,MAAM,EAAE,SAAS,EAAE,CAAC;IAEpB,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAC;IAEnB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,sFAAsF;IACtF,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9D,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,kFAAkF;IAClF,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,yCAAyC;IACzC,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAE/B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAmnB5D,CAAC"}

package/dist/panels.bundle.js

@@ -14,7 +14,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { createContext, useContext, useState, useCallback, useMemo, memo, forwardRef, useRef, useEffect, useLayoutEffect, createElement, useImperativeHandle } from "react";
 import { createPortal } from "react-dom";
-import { CanvasConverter, buildScopeColorMap, DRAFT_NODE_COLOR, renderEventTemplate, CanvasDiscovery, ExecutionValidator, renderWorkflow, LibraryDiscovery, getSpanDuration } from "@principal-ai/principal-view-core";
+import { CanvasConverter, buildScopeColorMap, buildSpanColorMap, resolveEventSpanColor, DEFAULT_SPAN_COLOR, DRAFT_NODE_COLOR, renderEventTemplate, CanvasDiscovery, ExecutionValidator, renderWorkflow, LibraryDiscovery, getSpanDuration } from "@principal-ai/principal-view-core";
 import { StoryboardWorkflowsTreeCore, CanvasListTreeCore, hasWorkflowContent } from "@principal-ade/dynamic-file-tree";
 import { trace, context, SpanStatusCode } from "@opentelemetry/api";
 import { SpanStatusCode as SpanStatusCode2 } from "@opentelemetry/api";
@@ -86701,12 +86701,13 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
   }
   const nodeDataColor = nodeData.color;
   const scopeColor = nodeData.scopeColor;
-  const baseColor = scopeColor || nodeDataColor || typeDefinition.color || "#888";
+  const spanColor = nodeData.spanColor;
   const nodeDataStates = nodeData.states;
   const stateColor = state && (((_a = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _a.color) || ((_c = (_b = typeDefinition.states) == null ? void 0 : _b[state]) == null ? void 0 : _c.color));
-  const fillColor = stateColor || baseColor;
+  const baseFillColor = spanColor || nodeDataColor || typeDefinition.color || "#888";
+  const fillColor = stateColor || baseFillColor;
   const nodeDataStroke = nodeData.stroke;
-  const baseStrokeColor = nodeDataStroke || typeDefinition.stroke || fillColor;
+  const baseStrokeColor = nodeDataStroke || scopeColor || fillColor;
   const status = nodeData == null ? void 0 : nodeData.status;
   const strokeColor = baseStrokeColor;
   const color2 = fillColor;
@@ -88505,28 +88506,29 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     fontSize: "12px"
   }, children: "Cancel" })] })] });
 };
-function useCanvasToLegacy(canvas, library) {
+function useCanvasToLegacy(canvas, library, spansCanvas, workflowSpanPattern) {
   return useMemo(() => {
-    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l;
     if (!canvas)
       return null;
     const { nodes, edges } = CanvasConverter.canvasToGraph(canvas);
     const scopeColorMap = buildScopeColorMap(library == null ? void 0 : library.resources);
+    const spanColorMap = buildSpanColorMap(spansCanvas);
+    const spanColor = resolveEventSpanColor(workflowSpanPattern, spanColorMap);
     for (const node2 of nodes) {
       const otel = (_a = node2.data) == null ? void 0 : _a.otel;
       const scope = otel == null ? void 0 : otel.scope;
-      const status = (_b = node2.data) == null ? void 0 : _b.status;
+      let nodeScopeColor;
       if (scope && scopeColorMap[scope]) {
-        node2.data = {
-          ...node2.data,
-          scopeColor: scopeColorMap[scope]
-        };
-      } else if (status === "draft" || !scope) {
-        node2.data = {
-          ...node2.data,
-          scopeColor: DRAFT_NODE_COLOR
-        };
+        nodeScopeColor = scopeColorMap[scope];
+      } else {
+        nodeScopeColor = DRAFT_NODE_COLOR;
       }
+      node2.data = {
+        ...node2.data,
+        scopeColor: nodeScopeColor,
+        spanColor: workflowSpanPattern ? spanColor : DEFAULT_SPAN_COLOR
+      };
     }
     const nodeTypes2 = {};
     const edgeTypes2 = {};
@@ -88555,7 +88557,7 @@ function useCanvasToLegacy(canvas, library) {
         };
       }
     }
-    if ((_c = canvas.pv) == null ? void 0 : _c.nodeTypes) {
+    if ((_b = canvas.pv) == null ? void 0 : _b.nodeTypes) {
       for (const [id2, def] of Object.entries(canvas.pv.nodeTypes)) {
         nodeTypes2[id2] = {
           description: def.description,
@@ -88570,7 +88572,7 @@ function useCanvasToLegacy(canvas, library) {
       const vv = node2.pv;
       const nodeType = (vv == null ? void 0 : vv.nodeType) || node2.type;
       if (!nodeTypes2[nodeType]) {
-        const fillColor = (vv == null ? void 0 : vv.fill) || (typeof node2.color === "string" ? node2.color : void 0) || ((_e2 = (_d = vv == null ? void 0 : vv.states) == null ? void 0 : _d.idle) == null ? void 0 : _e2.color);
+        const fillColor = (vv == null ? void 0 : vv.fill) || (typeof node2.color === "string" ? node2.color : void 0) || ((_d = (_c = vv == null ? void 0 : vv.states) == null ? void 0 : _c.idle) == null ? void 0 : _d.color);
         let nodeDescription = `${nodeType} node`;
         if (node2.type === "text" && "text" in node2) {
           const lines = node2.text.split("\n");
@@ -88592,7 +88594,7 @@ function useCanvasToLegacy(canvas, library) {
         };
       }
     }
-    if ((_f = canvas.pv) == null ? void 0 : _f.edgeTypes) {
+    if ((_e2 = canvas.pv) == null ? void 0 : _e2.edgeTypes) {
       for (const [id2, def] of Object.entries(canvas.pv.edgeTypes)) {
         edgeTypes2[id2] = {
           style: def.style || "solid",
@@ -88606,12 +88608,12 @@ function useCanvasToLegacy(canvas, library) {
     }
     const allowedConnections = [];
     for (const edge of canvas.edges || []) {
-      const edgeType = ((_g = edge.pv) == null ? void 0 : _g.edgeType) || "default";
+      const edgeType = ((_f = edge.pv) == null ? void 0 : _f.edgeType) || "default";
       if (!edgeTypes2[edgeType]) {
         edgeTypes2[edgeType] = {
-          style: ((_h = edge.pv) == null ? void 0 : _h.style) || "solid",
+          style: ((_g = edge.pv) == null ? void 0 : _g.style) || "solid",
           color: typeof edge.color === "string" ? edge.color : void 0,
-          width: (_i = edge.pv) == null ? void 0 : _i.width,
+          width: (_h = edge.pv) == null ? void 0 : _h.width,
           directed: true
         };
       }
@@ -88621,16 +88623,16 @@ function useCanvasToLegacy(canvas, library) {
         via: edgeType
       });
     }
-    const display = ((_j = canvas.pv) == null ? void 0 : _j.display) ? {
+    const display = ((_i = canvas.pv) == null ? void 0 : _i.display) ? {
       layout: canvas.pv.display.layout || "manual",
       theme: canvas.pv.display.theme,
       animations: canvas.pv.display.animations
     } : { layout: "manual" };
     const configuration = {
       metadata: {
-        name: ((_k = canvas.pv) == null ? void 0 : _k.name) || "Untitled",
-        version: ((_l = canvas.pv) == null ? void 0 : _l.version) || "1.0.0",
-        description: (_m = canvas.pv) == null ? void 0 : _m.description
+        name: ((_j = canvas.pv) == null ? void 0 : _j.name) || "Untitled",
+        version: ((_k = canvas.pv) == null ? void 0 : _k.version) || "1.0.0",
+        description: (_l = canvas.pv) == null ? void 0 : _l.description
       },
       nodeTypes: nodeTypes2,
       edgeTypes: edgeTypes2,
@@ -88638,17 +88640,17 @@ function useCanvasToLegacy(canvas, library) {
       display
     };
     return { configuration, nodes, edges };
-  }, [canvas, library]);
+  }, [canvas, library, spansCanvas, workflowSpanPattern]);
 }
 const GraphRenderer = forwardRef((props2, ref) => {
-  const { canvas, library, className, width = "100%", height = "100%" } = props2;
+  const { canvas, library, spansCanvas, workflowSpanPattern, className, width = "100%", height = "100%" } = props2;
   const { theme: theme2 } = useTheme();
   const containerRef = useRef(null);
   const [portalTarget, setPortalTarget] = useState(null);
   useEffect(() => {
     setPortalTarget(containerRef.current);
   }, []);
-  const canvasData = useCanvasToLegacy(canvas, library);
+  const canvasData = useCanvasToLegacy(canvas, library, spansCanvas, workflowSpanPattern);
   const editStateRef = useRef(createEmptyEditState());
   const resetVisualStateRef = useRef(null);
   const { canUndo: canUndoState, canRedo: canRedoState, undo: undoFromStack, redo: redoFromStack, pushHistory, clearHistory } = useUndoRedo();
@@ -95383,7 +95385,7 @@ const CanvasEditorPanel = ({
     setIsCarouselExpanded(false);
   }, []);
   const saveAllChanges = useCallback(async () => {
-    var _a2;
+    var _a2, _b2;
     if (!state.canvas || !canvasPath) return;
     const pendingChanges = (_a2 = graphRef.current) == null ? void 0 : _a2.getPendingChanges();
     const hasGraphChanges = (pendingChanges == null ? void 0 : pendingChanges.hasChanges) ?? false;
@@ -95410,6 +95412,7 @@ const CanvasEditorPanel = ({
         isSaving: false,
         hasUnsavedChanges: false
       }));
+      (_b2 = graphRef.current) == null ? void 0 : _b2.resetEditState();
     } catch (error) {
       console.error("[PrincipalView] Error saving changes:", error);
       setState((prev) => ({
@@ -95899,13 +95902,15 @@ const CanvasEditorPanel = ({
           }
         ) }) : /* @__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__ */ jsxs("div", { style: { flex: 1, position: "relative", minHeight: 0, width: "100%", height: "100%" }, children: [
             /* @__PURE__ */ jsx(
               GraphRenderer,
               {
                 ref: graphRef,
                 canvas: state.canvas,
                 library: state.library ?? void 0,
+                width: "100%",
+                height: "100%",
                 editable: state.isEditMode,
                 onPendingChangesChange: (hasChanges) => {
                   setState((prev) => ({ ...prev, hasUnsavedChanges: hasChanges }));
@@ -99690,6 +99695,9 @@ const StoryboardListPanel = ({
   const [showHelp, setShowHelp] = useState(false);
   const [cliCommandCopied, setCliCommandCopied] = useState(false);
   const [canvasTypeFilter, setCanvasTypeFilter] = useState(null);
+  const [contextMenu, setContextMenu] = useState(null);
+  const [contextMenuCopied, setContextMenuCopied] = useState(false);
+  const contextMenuRef = useRef(null);
   const { storyboards, workflows, testTraces, isLoading, error, discovery } = useCanvasWorkflowData({ context: context2, actions });
   useEffect(() => {
     if (!events) return;
@@ -99858,7 +99866,8 @@ const StoryboardListPanel = ({
         let draft = 0;
         for (const node2 of canvas.nodes) {
           const pv = node2.pv;
-          const status = (pv == null ? void 0 : pv.status) ?? "draft";
+          if (!pv) continue;
+          const status = pv.status ?? "draft";
           if (status === "implemented") {
             implemented++;
           } else if (status === "approved") {
@@ -99980,6 +99989,63 @@ const StoryboardListPanel = ({
       }
     }
   }, [events, getCanvasFileInfo, workflows]);
+  const getNodeFilePath = useCallback((node2) => {
+    var _a, _b, _c, _d, _e2;
+    if (node2.type === "canvas" && ((_a = node2.canvas) == null ? void 0 : _a.path)) {
+      return node2.canvas.path;
+    } else if (node2.type === "workflow" && "workflow" in node2 && ((_b = node2.workflow) == null ? void 0 : _b.path)) {
+      return node2.workflow.path;
+    } else if (node2.type === "overview" && node2.markdownPath) {
+      return node2.markdownPath;
+    } else if (node2.type === "storyboard" && "storyboard" in node2 && ((_d = (_c = node2.storyboard) == null ? void 0 : _c.canvas) == null ? void 0 : _d.path)) {
+      return node2.storyboard.canvas.path;
+    } else if (node2.type === "canvas-folder" && ((_e2 = node2.canvas) == null ? void 0 : _e2.path)) {
+      return node2.canvas.path;
+    }
+    return void 0;
+  }, []);
+  const handleContextMenu = useCallback((event, node2) => {
+    event.preventDefault();
+    const path2 = getNodeFilePath(node2);
+    if (path2) {
+      setContextMenu({ x: event.clientX, y: event.clientY, node: node2 });
+      setContextMenuCopied(false);
+    }
+  }, [getNodeFilePath]);
+  const handleCopyPath = useCallback(async () => {
+    if (!contextMenu) return;
+    const path2 = getNodeFilePath(contextMenu.node);
+    if (path2) {
+      try {
+        await navigator.clipboard.writeText(path2);
+        setContextMenuCopied(true);
+        setTimeout(() => {
+          setContextMenu(null);
+          setContextMenuCopied(false);
+        }, 800);
+      } catch {
+        console.error("Failed to copy path to clipboard");
+        setContextMenu(null);
+      }
+    }
+  }, [contextMenu, getNodeFilePath]);
+  useEffect(() => {
+    if (!contextMenu) return;
+    const handleClickOutside = (e) => {
+      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target)) {
+        setContextMenu(null);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setContextMenu(null);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [contextMenu]);
   useEffect(() => {
     handleTreeNodeClickRef.current = handleTreeNodeClick;
   }, [handleTreeNodeClick]);
@@ -100478,6 +100544,7 @@ const StoryboardListPanel = ({
                 storyboards: filteredStoryboards,
                 theme: theme2,
                 onClick: handleTreeNodeClick,
+                onContextMenu: handleContextMenu,
                 selectedNodeId: selectedNodeId ?? void 0,
                 defaultOpen: filteredStoryboards.length <= 2,
                 openState,
@@ -100495,6 +100562,7 @@ const StoryboardListPanel = ({
                 canvases: filteredCanvases,
                 theme: theme2,
                 onClick: handleTreeNodeClick,
+                onContextMenu: handleContextMenu,
                 selectedNodeId: selectedNodeId ?? void 0,
                 defaultOpen: filteredCanvases.length <= 2,
                 openState,
@@ -100650,7 +100718,66 @@ const StoryboardListPanel = ({
           @keyframes spin {
             to { transform: rotate(360deg); }
           }
-        ` })
+        ` }),
+        contextMenu && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: contextMenuRef,
+              style: {
+                position: "fixed",
+                top: contextMenu.y,
+                left: contextMenu.x,
+                backgroundColor: theme2.colors.background,
+                border: `1px solid ${theme2.colors.border}`,
+                borderRadius: "6px",
+                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                zIndex: 1e3,
+                minWidth: "180px",
+                padding: "4px 0",
+                fontFamily: theme2.fonts.body
+              },
+              children: [
+                /* @__PURE__ */ jsx("style", { children: `
+              .storyboard-context-menu-item {
+                transition: background-color 0.15s ease;
+              }
+              .storyboard-context-menu-item:hover {
+                background-color: ${theme2.colors.backgroundTertiary} !important;
+              }
+            ` }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleCopyPath,
+                    className: "storyboard-context-menu-item",
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      width: "100%",
+                      padding: "8px 12px",
+                      border: "none",
+                      background: "none",
+                      cursor: "pointer",
+                      fontSize: theme2.fontSizes[1],
+                      color: theme2.colors.text,
+                      textAlign: "left"
+                    },
+                    children: contextMenuCopied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Check, { size: 14, style: { color: theme2.colors.success || "#22c55e" } }),
+                      /* @__PURE__ */ jsx("span", { children: "Copied!" })
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Copy, { size: 14 }),
+                      /* @__PURE__ */ jsx("span", { children: "Copy Path" })
+                    ] })
+                  }
+                )
+              ]
+            }
+          ),
+          document.body
+        )
       ]
     }
   );