@industry-theme/principal-view-panels 0.1.15 → 0.1.17

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

@@ -1 +1 @@
-{"version":3,"file":"PrincipalViewGraphPanel.d.ts","sourceRoot":"","sources":["../../src/panels/PrincipalViewGraphPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAoD/E;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8hCjE,CAAC"}
+{"version":3,"file":"PrincipalViewGraphPanel.d.ts","sourceRoot":"","sources":["../../src/panels/PrincipalViewGraphPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAsD/E;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2rCjE,CAAC"}

package/dist/panels.bundle.js

@@ -26674,7 +26674,7 @@ const __iconNode$dd = [
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
 ];
-const Info = createLucideIcon$1("info", __iconNode$dd);
+const Info$1 = createLucideIcon$1("info", __iconNode$dd);
 /**
  * @license lucide-react v0.554.0 - ISC
  *
@@ -27940,7 +27940,7 @@ const __iconNode$bX = [
   ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
   ["path", { d: "M7 11V7a5 5 0 0 1 9.9-1", key: "1mm8w8" }]
 ];
-const LockOpen$1 = createLucideIcon$1("lock-open", __iconNode$bX);
+const LockOpen = createLucideIcon$1("lock-open", __iconNode$bX);
 /**
  * @license lucide-react v0.554.0 - ISC
  *
@@ -27963,7 +27963,7 @@ const __iconNode$bV = [
   ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
   ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4", key: "fwvmzm" }]
 ];
-const Lock$1 = createLucideIcon$1("lock", __iconNode$bV);
+const Lock = createLucideIcon$1("lock", __iconNode$bV);
 /**
  * @license lucide-react v0.554.0 - ISC
  *
@@ -31263,7 +31263,7 @@ const __iconNode$8J = [
   ],
   ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
 ];
-const Pencil = createLucideIcon$1("pencil", __iconNode$8J);
+const Pencil$1 = createLucideIcon$1("pencil", __iconNode$8J);
 /**
  * @license lucide-react v0.554.0 - ISC
  *
@@ -40493,7 +40493,7 @@ const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   Inbox,
   IndianRupee,
   Infinity: Infinity$1,
-  Info,
+  Info: Info$1,
   InspectionPanel,
   Instagram,
   Italic,
@@ -40573,10 +40573,10 @@ const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   Locate,
   LocateFixed,
   LocateOff,
-  Lock: Lock$1,
+  Lock,
   LockKeyhole,
   LockKeyholeOpen,
-  LockOpen: LockOpen$1,
+  LockOpen,
   LogIn,
   LogOut,
   Logs,
@@ -40777,7 +40777,7 @@ const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   PenLine,
   PenOff,
   PenTool,
-  Pencil,
+  Pencil: Pencil$1,
   PencilLine,
   PencilOff,
   PencilRuler,
@@ -43249,8 +43249,8 @@ const lucideReact = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   IndianRupeeIcon: IndianRupee,
   Infinity: Infinity$1,
   InfinityIcon: Infinity$1,
-  Info,
-  InfoIcon: Info,
+  Info: Info$1,
+  InfoIcon: Info$1,
   Inspect: SquareMousePointer,
   InspectIcon: SquareMousePointer,
   InspectionPanel,
@@ -43431,14 +43431,14 @@ const lucideReact = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   LocateOffIcon: LocateOff,
   LocationEdit: MapPinPen,
   LocationEditIcon: MapPinPen,
-  Lock: Lock$1,
-  LockIcon: Lock$1,
+  Lock,
+  LockIcon: Lock,
   LockKeyhole,
   LockKeyholeIcon: LockKeyhole,
   LockKeyholeOpen,
   LockKeyholeOpenIcon: LockKeyholeOpen,
-  LockOpen: LockOpen$1,
-  LockOpenIcon: LockOpen$1,
+  LockOpen,
+  LockOpenIcon: LockOpen,
   LogIn,
   LogInIcon: LogIn,
   LogOut,
@@ -44407,7 +44407,7 @@ const lucideReact = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   LucideIndentIncrease: ListIndentIncrease,
   LucideIndianRupee: IndianRupee,
   LucideInfinity: Infinity$1,
-  LucideInfo: Info,
+  LucideInfo: Info$1,
   LucideInspect: SquareMousePointer,
   LucideInspectionPanel: InspectionPanel,
   LucideInstagram: Instagram,
@@ -44498,10 +44498,10 @@ const lucideReact = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   LucideLocateFixed: LocateFixed,
   LucideLocateOff: LocateOff,
   LucideLocationEdit: MapPinPen,
-  LucideLock: Lock$1,
+  LucideLock: Lock,
   LucideLockKeyhole: LockKeyhole,
   LucideLockKeyholeOpen: LockKeyholeOpen,
-  LucideLockOpen: LockOpen$1,
+  LucideLockOpen: LockOpen,
   LucideLogIn: LogIn,
   LucideLogOut: LogOut,
   LucideLogs: Logs,
@@ -44730,7 +44730,7 @@ const lucideReact = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   LucidePenOff: PenOff,
   LucidePenSquare: SquarePen,
   LucidePenTool: PenTool,
-  LucidePencil: Pencil,
+  LucidePencil: Pencil$1,
   LucidePencilLine: PencilLine,
   LucidePencilOff: PencilOff,
   LucidePencilRuler: PencilRuler,
@@ -45229,7 +45229,7 @@ const lucideReact = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   LucideUniversity: University,
   LucideUnlink: Unlink,
   LucideUnlink2: Unlink2,
-  LucideUnlock: LockOpen$1,
+  LucideUnlock: LockOpen,
   LucideUnlockKeyhole: LockKeyholeOpen,
   LucideUnplug: Unplug,
   LucideUpload: Upload,
@@ -45785,8 +45785,8 @@ const lucideReact = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   PenSquareIcon: SquarePen,
   PenTool,
   PenToolIcon: PenTool,
-  Pencil,
-  PencilIcon: Pencil,
+  Pencil: Pencil$1,
+  PencilIcon: Pencil$1,
   PencilLine,
   PencilLineIcon: PencilLine,
   PencilOff,
@@ -46783,8 +46783,8 @@ const lucideReact = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   Unlink2,
   Unlink2Icon: Unlink2,
   UnlinkIcon: Unlink,
-  Unlock: LockOpen$1,
-  UnlockIcon: LockOpen$1,
+  Unlock: LockOpen,
+  UnlockIcon: LockOpen,
   UnlockKeyhole: LockKeyholeOpen,
   UnlockKeyholeIcon: LockKeyholeOpen,
   Unplug,
@@ -48697,7 +48697,7 @@ function requireGraphRenderer() {
         }, 100);
         return () => clearTimeout(timeoutId);
       }, [baseNodesKey, fitView]);
-      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 100, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: theme.colors.border, gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
+      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: theme.colors.border, gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
         var _a;
         const nodeData = node.data;
         return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme.colors.secondary;
@@ -49300,19 +49300,31 @@ const FileBraces = createLucideIcon("file-braces", __iconNode$e);
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode$d = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 16v-4", key: "1dtifu" }],
+  ["path", { d: "M12 8h.01", key: "e9boi3" }]
+];
+const Info = createLucideIcon("info", __iconNode$d);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$c = [
   ["rect", { width: "7", height: "7", x: "3", y: "3", rx: "1", key: "1g98yp" }],
   ["rect", { width: "7", height: "7", x: "14", y: "3", rx: "1", key: "6d4xhi" }],
   ["rect", { width: "7", height: "7", x: "14", y: "14", rx: "1", key: "nxv5o0" }],
   ["rect", { width: "7", height: "7", x: "3", y: "14", rx: "1", key: "1bb6yr" }]
 ];
-const LayoutGrid = createLucideIcon("layout-grid", __iconNode$d);
+const LayoutGrid = createLucideIcon("layout-grid", __iconNode$c);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$b = [
   ["path", { d: "M12 2v4", key: "3427ic" }],
   ["path", { d: "m16.2 7.8 2.9-2.9", key: "r700ao" }],
   ["path", { d: "M18 12h4", key: "wj9ykh" }],
@@ -49322,18 +49334,7 @@ const __iconNode$c = [
   ["path", { d: "M2 12h4", key: "j09sii" }],
   ["path", { d: "m4.9 4.9 2.9 2.9", key: "giyufr" }]
 ];
-const Loader = createLucideIcon("loader", __iconNode$c);
-/**
- * @license lucide-react v0.552.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$b = [
-  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
-  ["path", { d: "M7 11V7a5 5 0 0 1 9.9-1", key: "1mm8w8" }]
-];
-const LockOpen = createLucideIcon("lock-open", __iconNode$b);
+const Loader = createLucideIcon("loader", __iconNode$b);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -49341,10 +49342,13 @@ const LockOpen = createLucideIcon("lock-open", __iconNode$b);
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode$a = [
-  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
-  ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4", key: "fwvmzm" }]
+  ["rect", { x: "16", y: "16", width: "6", height: "6", rx: "1", key: "4q2zg0" }],
+  ["rect", { x: "2", y: "16", width: "6", height: "6", rx: "1", key: "8cvhb9" }],
+  ["rect", { x: "9", y: "2", width: "6", height: "6", rx: "1", key: "1egb70" }],
+  ["path", { d: "M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3", key: "1jsf9p" }],
+  ["path", { d: "M12 12V8", key: "2874zd" }]
 ];
-const Lock = createLucideIcon("lock", __iconNode$a);
+const Network = createLucideIcon("network", __iconNode$a);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -49352,13 +49356,10 @@ const Lock = createLucideIcon("lock", __iconNode$a);
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode$9 = [
-  ["rect", { x: "16", y: "16", width: "6", height: "6", rx: "1", key: "4q2zg0" }],
-  ["rect", { x: "2", y: "16", width: "6", height: "6", rx: "1", key: "8cvhb9" }],
-  ["rect", { x: "9", y: "2", width: "6", height: "6", rx: "1", key: "1egb70" }],
-  ["path", { d: "M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3", key: "1jsf9p" }],
-  ["path", { d: "M12 12V8", key: "2874zd" }]
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }]
 ];
-const Network = createLucideIcon("network", __iconNode$9);
+const PanelLeft = createLucideIcon("panel-left", __iconNode$9);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -49366,10 +49367,10 @@ const Network = createLucideIcon("network", __iconNode$9);
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode$8 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M9 3v18", key: "fh3hqa" }]
+  ["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
+  ["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
 ];
-const PanelLeft = createLucideIcon("panel-left", __iconNode$8);
+const Pause = createLucideIcon("pause", __iconNode$8);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -49377,10 +49378,16 @@ const PanelLeft = createLucideIcon("panel-left", __iconNode$8);
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode$7 = [
-  ["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
-  ["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
+  [
+    "path",
+    {
+      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+      key: "1a8usu"
+    }
+  ],
+  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
 ];
-const Pause = createLucideIcon("pause", __iconNode$7);
+const Pencil = createLucideIcon("pencil", __iconNode$7);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -53278,7 +53285,7 @@ const PrincipalViewGraphPanel = ({
   actions,
   events
 }) => {
-  var _a;
+  var _a, _b, _c;
   const { theme } = useTheme();
   const graphRef = useRef(null);
   const [state, setState] = useState({
@@ -53291,6 +53298,7 @@ const PrincipalViewGraphPanel = ({
     selectedConfigId: null,
     showCanvasSelector: false,
     showHelp: false,
+    showLegend: false,
     isEditMode: false,
     hasUnsavedChanges: false,
     isSaving: false,
@@ -53306,8 +53314,9 @@ const PrincipalViewGraphPanel = ({
   const selectedConfigIdRef = useRef(null);
   selectedConfigIdRef.current = state.selectedConfigId;
   const skipNextFileChangeRef = useRef(false);
+  const [pathCopied, setPathCopied] = useState(false);
   const loadConfiguration = useCallback(async (configId) => {
-    var _a2, _b, _c;
+    var _a2, _b2, _c2;
     setState((prev) => ({ ...prev, loading: prev.canvas === null, error: null }));
     try {
       const ctx = contextRef.current;
@@ -53388,7 +53397,7 @@ const PrincipalViewGraphPanel = ({
       const configDescriptions = {};
       configDescriptions[selectedConfig.id] = {
         name: ((_a2 = canvas.pv) == null ? void 0 : _a2.name) || selectedConfig.name,
-        description: ((_b = canvas.pv) == null ? void 0 : _b.description) || null
+        description: ((_b2 = canvas.pv) == null ? void 0 : _b2.description) || null
       };
       const loadOtherDescriptions = async () => {
         for (const config of availableConfigs) {
@@ -53399,14 +53408,14 @@ const PrincipalViewGraphPanel = ({
             if (configContentStr && typeof configContentStr === "string") {
               const configCanvas = ConfigLoader.parseCanvas(configContentStr);
               setState((prev) => {
-                var _a3, _b2;
+                var _a3, _b3;
                 return {
                   ...prev,
                   configDescriptions: {
                     ...prev.configDescriptions,
                     [config.id]: {
                       name: ((_a3 = configCanvas.pv) == null ? void 0 : _a3.name) || config.name,
-                      description: ((_b2 = configCanvas.pv) == null ? void 0 : _b2.description) || null
+                      description: ((_b3 = configCanvas.pv) == null ? void 0 : _b3.description) || null
                     }
                   }
                 };
@@ -53428,7 +53437,7 @@ const PrincipalViewGraphPanel = ({
         selectedConfigId: selectedConfig.id,
         hasUnsavedChanges: false
       }));
-      (_c = graphRef.current) == null ? void 0 : _c.resetEditState();
+      (_c2 = graphRef.current) == null ? void 0 : _c2.resetEditState();
     } catch (error) {
       console.error("[PrincipalView] Error during config load:", error);
       setState((prev) => ({
@@ -53449,6 +53458,18 @@ const PrincipalViewGraphPanel = ({
   const toggleHelp = useCallback(() => {
     setState((prev) => ({ ...prev, showHelp: !prev.showHelp }));
   }, []);
+  const toggleLegend = useCallback(() => {
+    setState((prev) => ({ ...prev, showLegend: !prev.showLegend }));
+  }, []);
+  const copyConfigPath = useCallback(() => {
+    const currentConfig = state.availableConfigs.find((c2) => c2.id === state.selectedConfigId);
+    if (currentConfig == null ? void 0 : currentConfig.path) {
+      navigator.clipboard.writeText(currentConfig.path).then(() => {
+        setPathCopied(true);
+        setTimeout(() => setPathCopied(false), 2e3);
+      });
+    }
+  }, [state.availableConfigs, state.selectedConfigId]);
   const handleCanvasSelect = useCallback((configId) => {
     loadConfiguration(configId);
   }, [loadConfiguration]);
@@ -53466,7 +53487,7 @@ const PrincipalViewGraphPanel = ({
     setState((prev) => ({ ...prev, hasUnsavedChanges: false }));
   }, [loadConfiguration]);
   const saveAllChanges = useCallback(async () => {
-    var _a2, _b;
+    var _a2, _b2;
     if (!state.canvas) return;
     const pendingChanges = (_a2 = graphRef.current) == null ? void 0 : _a2.getPendingChanges();
     const hasGraphChanges = (pendingChanges == null ? void 0 : pendingChanges.hasChanges) ?? false;
@@ -53498,7 +53519,7 @@ const PrincipalViewGraphPanel = ({
         isSaving: false,
         hasUnsavedChanges: false
       }));
-      (_b = graphRef.current) == null ? void 0 : _b.resetEditState();
+      (_b2 = graphRef.current) == null ? void 0 : _b2.resetEditState();
     } catch (error) {
       console.error("[PrincipalView] Error saving changes:", error);
       setState((prev) => ({
@@ -53666,6 +53687,26 @@ const PrincipalViewGraphPanel = ({
             fontWeight: theme.fontWeights.medium,
             color: theme.colors.text
           }, children: ((_a = state.canvas.pv) == null ? void 0 : _a.name) || "Untitled" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: copyConfigPath,
+              title: pathCopied ? "Copied!" : "Copy path to clipboard",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: theme.space[1],
+                backgroundColor: "transparent",
+                color: pathCopied ? theme.colors.success || "#22c55e" : theme.colors.textMuted,
+                border: "none",
+                borderRadius: theme.radii[0],
+                cursor: "pointer",
+                transition: "all 0.15s"
+              },
+              children: pathCopied ? /* @__PURE__ */ jsx(Check, { size: 14 }) : /* @__PURE__ */ jsx(Copy, { size: 14 })
+            }
+          ),
           state.isEditMode && state.hasUnsavedChanges && /* @__PURE__ */ jsx("span", { style: {
             fontSize: theme.fontSizes[1],
             color: theme.colors.warning || "#f59e0b",
@@ -53727,6 +53768,29 @@ const PrincipalViewGraphPanel = ({
           )
         ] }) })
       ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: toggleLegend,
+          title: "Edge Legend",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 40,
+            height: 39,
+            padding: 0,
+            backgroundColor: state.showLegend ? theme.colors.primary : "transparent",
+            color: state.showLegend ? "white" : theme.colors.textMuted,
+            border: "none",
+            borderLeft: `1px solid ${theme.colors.border}`,
+            cursor: "pointer",
+            transition: "all 0.15s",
+            flexShrink: 0
+          },
+          children: /* @__PURE__ */ jsx(Info, { size: 18 })
+        }
+      ),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -53771,7 +53835,7 @@ const PrincipalViewGraphPanel = ({
             transition: "all 0.15s",
             flexShrink: 0
           },
-          children: state.isEditMode ? /* @__PURE__ */ jsx(LockOpen, { size: 18 }) : /* @__PURE__ */ jsx(Lock, { size: 18 })
+          children: /* @__PURE__ */ jsx(Pencil, { size: 18 })
         }
       )
     ] }),
@@ -54144,7 +54208,86 @@ const PrincipalViewGraphPanel = ({
           }
         ),
         /* @__PURE__ */ jsx(EmptyStateContent, { theme })
-      ] }) })
+      ] }) }),
+      state.showLegend && /* @__PURE__ */ jsxs("div", { style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 40,
+        backgroundColor: theme.colors.background,
+        borderBottom: `1px solid ${theme.colors.border}`,
+        padding: `0 ${theme.space[3]}`,
+        display: "flex",
+        alignItems: "center",
+        gap: theme.space[4],
+        overflowX: "auto",
+        zIndex: 50,
+        boxSizing: "border-box"
+      }, children: [
+        /* @__PURE__ */ jsx("span", { style: {
+          fontSize: theme.fontSizes[1],
+          fontWeight: theme.fontWeights.medium,
+          color: theme.colors.textMuted,
+          flexShrink: 0
+        }, children: "Edges:" }),
+        ((_c = (_b = state.canvas) == null ? void 0 : _b.pv) == null ? void 0 : _c.edgeTypes) && Object.keys(state.canvas.pv.edgeTypes).length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: theme.space[4], flexWrap: "wrap" }, children: Object.entries(state.canvas.pv.edgeTypes).map(([typeName, edgeType]) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: theme.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: theme.fontSizes[1],
+                color: theme.colors.text,
+                textTransform: "capitalize",
+                whiteSpace: "nowrap"
+              }, children: typeName.replace(/-/g, " ") })
+            ]
+          },
+          typeName
+        )) }) : /* @__PURE__ */ jsx("span", { style: {
+          fontSize: theme.fontSizes[1],
+          color: theme.colors.textMuted,
+          fontStyle: "italic"
+        }, children: "No edge types defined" })
+      ] })
     ] })
   ] });
 };