@industry-theme/principal-view-panels 0.1.5 → 0.1.6

package/dist/panels.bundle.js

@@ -13,32 +13,9 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import require$$0, { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React2, { createContext, useContext, forwardRef, createElement, useRef, useState, useCallback, useEffect, useMemo } from "react";
+import require$$0 from "react/jsx-runtime";
 import require$$2 from "react-dom";
-var ThemeContext;
-var getThemeContext = () => {
-  if (typeof window !== "undefined") {
-    const globalWindow = window;
-    if (!globalWindow.__principlemd_theme_context__) {
-      globalWindow.__principlemd_theme_context__ = createContext(void 0);
-    }
-    return globalWindow.__principlemd_theme_context__;
-  } else {
-    if (!ThemeContext) {
-      ThemeContext = createContext(void 0);
-    }
-    return ThemeContext;
-  }
-};
-var ThemeContextSingleton = getThemeContext();
-var useTheme = () => {
-  const context = useContext(ThemeContextSingleton);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-};
 function getAugmentedNamespace(n) {
   if (Object.prototype.hasOwnProperty.call(n, "__esModule")) return n;
   var f = n.default;
@@ -63,6 +40,59 @@ function getAugmentedNamespace(n) {
   });
   return a2;
 }
+var jsxDevRuntime = { exports: {} };
+var reactJsxDevRuntime_production = {};
+/**
+ * @license React
+ * react-jsx-dev-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactJsxDevRuntime_production;
+function requireReactJsxDevRuntime_production() {
+  if (hasRequiredReactJsxDevRuntime_production) return reactJsxDevRuntime_production;
+  hasRequiredReactJsxDevRuntime_production = 1;
+  var REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+  reactJsxDevRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
+  reactJsxDevRuntime_production.jsxDEV = void 0;
+  return reactJsxDevRuntime_production;
+}
+var hasRequiredJsxDevRuntime;
+function requireJsxDevRuntime() {
+  if (hasRequiredJsxDevRuntime) return jsxDevRuntime.exports;
+  hasRequiredJsxDevRuntime = 1;
+  {
+    jsxDevRuntime.exports = requireReactJsxDevRuntime_production();
+  }
+  return jsxDevRuntime.exports;
+}
+var jsxDevRuntimeExports = requireJsxDevRuntime();
+var ThemeContext;
+var getThemeContext = () => {
+  if (typeof window !== "undefined") {
+    const globalWindow = window;
+    if (!globalWindow.__principlemd_theme_context__) {
+      globalWindow.__principlemd_theme_context__ = createContext(void 0);
+    }
+    return globalWindow.__principlemd_theme_context__;
+  } else {
+    if (!ThemeContext) {
+      ThemeContext = createContext(void 0);
+    }
+    return ThemeContext;
+  }
+};
+var ThemeContextSingleton = getThemeContext();
+var useTheme = () => {
+  const context = useContext(ThemeContextSingleton);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
 var dist$1 = {};
 var GraphRenderer = {};
 var umd$1 = { exports: {} };
@@ -47233,7 +47263,7 @@ function requireCustomNode() {
       }
       return offsetStyle;
     };
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Top, id: "top", style: getHandleStyle("top") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Left, id: "left", style: getHandleStyle("left") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Right, id: "right", style: getHandleStyle("right") }), isHexagon ? (0, jsx_runtime_1.jsx)("div", { style: hexagonBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: hexagonInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Top, id: "top", style: getHandleStyle("top") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Bottom, id: "bottom", style: getHandleStyle("bottom") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Left, id: "left", style: getHandleStyle("left") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Right, id: "right", style: getHandleStyle("right") }), isHexagon ? (0, jsx_runtime_1.jsx)("div", { style: hexagonBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: hexagonInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       backgroundColor: color,
       color: "white",
@@ -47264,7 +47294,7 @@ function requireCustomNode() {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
-    }, children: "⚠️" })] }) }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Bottom, id: "bottom", style: getHandleStyle("bottom") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Left, id: "left-out", style: getHandleStyle("left") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Right, id: "right-out", style: getHandleStyle("right") }), (0, jsx_runtime_1.jsx)("style", { children: `
+    }, children: "⚠️" })] }) }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Top, id: "top-out", style: getHandleStyle("top") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Bottom, id: "bottom-out", style: getHandleStyle("bottom") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Left, id: "left-out", style: getHandleStyle("left") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Right, id: "right-out", style: getHandleStyle("right") }), (0, jsx_runtime_1.jsx)("style", { children: `
         /* Processing pulse - continuous breathing effect */
         .node-pulse {
           animation: node-pulse ease-in-out infinite;
@@ -47368,8 +47398,9 @@ function requireCustomEdge() {
   const CustomEdge$1 = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, markerEnd, selected }) => {
     var _a, _b, _c, _d, _e2;
     const edgeProps = data;
-    const { typeDefinition, hasViolations, data: edgeData, animationType, animationDuration = 1e3, animationDirection = "forward" } = edgeProps || {};
+    const { typeDefinition, hasViolations, data: edgeData, edgeType, animationType, animationDuration = 1e3, animationDirection = "forward" } = edgeProps || {};
     const [particlePosition, setParticlePosition] = (0, react_1.useState)(0);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const pathRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
       if (animationType !== "particle")
@@ -47446,7 +47477,7 @@ function requireCustomEdge() {
       return { x: point.x, y: point.y };
     };
     const particlePos = animationType === "particle" ? getParticleTransform() : null;
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { ref: pathRef, d: edgePath, fill: "none", stroke: "transparent", strokeWidth: 0, style: { pointerEvents: "none" } }), (0, jsx_runtime_1.jsx)("path", { d: edgePath, fill: "none", stroke: "transparent", strokeWidth: Math.max(width + 10, 20), style: { cursor: "pointer" } }), (0, jsx_runtime_1.jsx)(react_2.BaseEdge, { id, path: edgePath, markerEnd, style: {
+    return (0, jsx_runtime_1.jsxs)("g", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: { cursor: "pointer" }, children: [(0, jsx_runtime_1.jsx)("path", { ref: pathRef, d: edgePath, fill: "none", stroke: "transparent", strokeWidth: 0, style: { pointerEvents: "none" } }), (0, jsx_runtime_1.jsx)("path", { d: edgePath, fill: "none", stroke: "transparent", strokeWidth: Math.max(width + 10, 20), style: { pointerEvents: "stroke" } }), (0, jsx_runtime_1.jsx)(react_2.BaseEdge, { id, path: edgePath, markerEnd, style: {
       stroke: color,
       strokeWidth: selected ? width + 2 : width,
       strokeDasharray: getStrokeStyle(),
@@ -47474,7 +47505,20 @@ function requireCustomEdge() {
       fontWeight: 500,
       border: `1px solid ${color}`,
       pointerEvents: "all"
-    }, className: "nodrag nopan", children: labelText }) }), (0, jsx_runtime_1.jsx)("style", { children: `
+    }, className: "nodrag nopan", children: labelText }) }), isHovered && (0, jsx_runtime_1.jsx)(react_2.EdgeLabelRenderer, { children: (0, jsx_runtime_1.jsx)("div", { style: {
+      position: "absolute",
+      transform: `translate(-50%, -100%) translate(${labelX}px,${labelY - 12}px)`,
+      backgroundColor: "rgba(0, 0, 0, 0.85)",
+      color: "white",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      fontSize: "11px",
+      fontWeight: 500,
+      whiteSpace: "nowrap",
+      pointerEvents: "none",
+      zIndex: 1e3,
+      boxShadow: "0 2px 8px rgba(0,0,0,0.2)"
+    }, children: edgeType || "edge" }) }), (0, jsx_runtime_1.jsx)("style", { children: `
         /* Flow animation - forward direction */
         .edge-flow-forward {
           animation: flow-forward linear infinite;
@@ -47583,9 +47627,17 @@ function requireGraphConverter() {
       };
     });
   }
+  function sideToSourceHandle(side) {
+    if (!side)
+      return void 0;
+    return `${side}-out`;
+  }
+  function sideToTargetHandle(side) {
+    return side;
+  }
   function convertToXYFlowEdges(edges, configuration, violations = []) {
     return edges.map((edge) => {
-      var _a;
+      var _a, _b, _c;
       const typeDefinition = configuration.edgeTypes[edge.type];
       if (!typeDefinition) {
         console.warn(`Edge type "${edge.type}" not found in configuration for edge "${edge.id}"`);
@@ -47595,7 +47647,11 @@ function requireGraphConverter() {
         return ((_a2 = v.context) == null ? void 0 : _a2.edgeId) === edge.id;
       });
       const edgeWithHandles = edge;
-      const edgeColor = (_a = edge.data) == null ? void 0 : _a.color;
+      const fromSide = (_a = edge.data) == null ? void 0 : _a.fromSide;
+      const toSide = (_b = edge.data) == null ? void 0 : _b.toSide;
+      const sourceHandle = edgeWithHandles.sourceHandle || sideToSourceHandle(fromSide);
+      const targetHandle = edgeWithHandles.targetHandle || sideToTargetHandle(toSide);
+      const edgeColor = (_c = edge.data) == null ? void 0 : _c.color;
       const markerEnd = (typeDefinition == null ? void 0 : typeDefinition.directed) !== false ? {
         type: react_1.MarkerType.ArrowClosed,
         color: edgeColor || (typeDefinition == null ? void 0 : typeDefinition.color) || "#888",
@@ -47606,15 +47662,16 @@ function requireGraphConverter() {
         id: edge.id,
         source: edge.from,
         target: edge.to,
-        sourceHandle: edgeWithHandles.sourceHandle,
-        targetHandle: edgeWithHandles.targetHandle,
+        sourceHandle,
+        targetHandle,
         type: "custom",
         animated: (typeDefinition == null ? void 0 : typeDefinition.style) === "animated",
         markerEnd,
         data: {
           typeDefinition,
           hasViolations,
-          data: edge.data
+          data: edge.data,
+          edgeType: edge.type
         }
       };
     });
@@ -53145,7 +53202,7 @@ function applySugiyamaLayout(canvas, options = {}) {
   }
 }
 const ErrorStateContent = ({ theme, error, onRetry }) => {
-  return /* @__PURE__ */ jsxs("div", { style: {
+  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
@@ -53157,10 +53214,22 @@ const ErrorStateContent = ({ theme, error, onRetry }) => {
     fontFamily: theme.fonts.body,
     textAlign: "center"
   }, children: [
-    /* @__PURE__ */ jsx(CircleAlert, { size: 48 }),
-    /* @__PURE__ */ jsx("h3", { style: { marginTop: theme.space[3], marginBottom: theme.space[2] }, children: "Configuration Error" }),
-    /* @__PURE__ */ jsx("p", { style: { color: theme.colors.textMuted, marginTop: theme.space[2], maxWidth: "400px" }, children: error }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(CircleAlert, { size: 48 }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/ErrorStateContent.tsx",
+      lineNumber: 29,
+      columnNumber: 7
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("h3", { style: { marginTop: theme.space[3], marginBottom: theme.space[2] }, children: "Configuration Error" }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/ErrorStateContent.tsx",
+      lineNumber: 30,
+      columnNumber: 7
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("p", { style: { color: theme.colors.textMuted, marginTop: theme.space[2], maxWidth: "400px" }, children: error }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/ErrorStateContent.tsx",
+      lineNumber: 33,
+      columnNumber: 7
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
       "button",
       {
         onClick: onRetry,
@@ -53176,12 +53245,24 @@ const ErrorStateContent = ({ theme, error, onRetry }) => {
           fontSize: theme.fontSizes[2]
         },
         children: "Retry"
-      }
+      },
+      void 0,
+      false,
+      {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/ErrorStateContent.tsx",
+        lineNumber: 36,
+        columnNumber: 7
+      },
+      void 0
     )
-  ] });
+  ] }, void 0, true, {
+    fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/ErrorStateContent.tsx",
+    lineNumber: 17,
+    columnNumber: 5
+  }, void 0);
 };
 const EmptyStateContent = ({ theme }) => {
-  return /* @__PURE__ */ jsx("div", { style: {
+  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
@@ -53194,7 +53275,7 @@ const EmptyStateContent = ({ theme }) => {
     fontFamily: theme.fonts.body,
     textAlign: "center",
     boxSizing: "border-box"
-  }, children: /* @__PURE__ */ jsxs("div", { style: {
+  }, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
     maxWidth: "800px",
     width: "100%",
     paddingTop: theme.space[4],
@@ -53203,22 +53284,34 @@ const EmptyStateContent = ({ theme }) => {
     flexDirection: "column",
     alignItems: "center"
   }, children: [
-    /* @__PURE__ */ jsx(FileText, { size: 48, color: theme.colors.primary, style: { marginBottom: theme.space[3] } }),
-    /* @__PURE__ */ jsx("h2", { style: {
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(FileText, { size: 48, color: theme.colors.primary, style: { marginBottom: theme.space[3] } }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+      lineNumber: 39,
+      columnNumber: 9
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("h2", { style: {
       margin: 0,
       marginBottom: theme.space[3],
       fontSize: theme.fontSizes[4],
       fontWeight: theme.fontWeights.bold,
       color: theme.colors.text
-    }, children: "Principal View Graph Panel" }),
-    /* @__PURE__ */ jsx("p", { style: {
+    }, children: "Principal View Graph Panel" }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+      lineNumber: 41,
+      columnNumber: 9
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("p", { style: {
       margin: 0,
       marginBottom: theme.space[2],
       fontSize: theme.fontSizes[2],
       color: theme.colors.textSecondary,
       lineHeight: 1.6
-    }, children: "This panel visualizes your project's component architecture and validation flows using a declarative YAML configuration file." }),
-    /* @__PURE__ */ jsxs("div", { style: {
+    }, children: "This panel visualizes your project's component architecture and validation flows using a declarative YAML configuration file." }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+      lineNumber: 51,
+      columnNumber: 9
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       backgroundColor: theme.colors.backgroundSecondary,
       borderRadius: theme.radii[2],
       padding: theme.space[3],
@@ -53228,15 +53321,19 @@ const EmptyStateContent = ({ theme }) => {
       maxWidth: "600px",
       border: `1px solid ${theme.colors.border}`
     }, children: [
-      /* @__PURE__ */ jsx("h3", { style: {
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("h3", { style: {
         margin: 0,
         marginBottom: theme.space[2],
         fontSize: theme.fontSizes[2],
         fontWeight: theme.fontWeights.medium,
         color: theme.colors.text,
         textAlign: "left"
-      }, children: "What you'll see:" }),
-      /* @__PURE__ */ jsxs("ul", { style: {
+      }, children: "What you'll see:" }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+        lineNumber: 72,
+        columnNumber: 11
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("ul", { style: {
         margin: 0,
         padding: 0,
         listStyle: "none",
@@ -53244,42 +53341,102 @@ const EmptyStateContent = ({ theme }) => {
         color: theme.colors.textSecondary,
         fontSize: theme.fontSizes[1]
       }, children: [
-        /* @__PURE__ */ jsxs("li", { style: { marginBottom: theme.space[1], display: "flex", alignItems: "flex-start" }, children: [
-          /* @__PURE__ */ jsx("span", { style: { color: theme.colors.success, marginRight: theme.space[2], flexShrink: 0 }, children: "✓" }),
-          /* @__PURE__ */ jsx("span", { children: "Interactive graph of your components and their relationships" })
-        ] }),
-        /* @__PURE__ */ jsxs("li", { style: { marginBottom: theme.space[1], display: "flex", alignItems: "flex-start" }, children: [
-          /* @__PURE__ */ jsx("span", { style: { color: theme.colors.success, marginRight: theme.space[2], flexShrink: 0 }, children: "✓" }),
-          /* @__PURE__ */ jsx("span", { children: "Path-based validation rules and dependencies" })
-        ] }),
-        /* @__PURE__ */ jsxs("li", { style: { marginBottom: theme.space[1], display: "flex", alignItems: "flex-start" }, children: [
-          /* @__PURE__ */ jsx("span", { style: { color: theme.colors.success, marginRight: theme.space[2], flexShrink: 0 }, children: "✓" }),
-          /* @__PURE__ */ jsx("span", { children: "Visual feedback on component structure and integration points" })
-        ] }),
-        /* @__PURE__ */ jsxs("li", { style: { marginBottom: theme.space[1], display: "flex", alignItems: "flex-start" }, children: [
-          /* @__PURE__ */ jsx("span", { style: { color: theme.colors.success, marginRight: theme.space[2], flexShrink: 0 }, children: "✓" }),
-          /* @__PURE__ */ jsx("span", { children: "Customizable layouts and themes" })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: {
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("li", { style: { marginBottom: theme.space[1], display: "flex", alignItems: "flex-start" }, children: [
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { color: theme.colors.success, marginRight: theme.space[2], flexShrink: 0 }, children: "✓" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+            lineNumber: 92,
+            columnNumber: 15
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: "Interactive graph of your components and their relationships" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+            lineNumber: 93,
+            columnNumber: 15
+          }, void 0)
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+          lineNumber: 91,
+          columnNumber: 13
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("li", { style: { marginBottom: theme.space[1], display: "flex", alignItems: "flex-start" }, children: [
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { color: theme.colors.success, marginRight: theme.space[2], flexShrink: 0 }, children: "✓" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+            lineNumber: 96,
+            columnNumber: 15
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: "Path-based validation rules and dependencies" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+            lineNumber: 97,
+            columnNumber: 15
+          }, void 0)
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+          lineNumber: 95,
+          columnNumber: 13
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("li", { style: { marginBottom: theme.space[1], display: "flex", alignItems: "flex-start" }, children: [
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { color: theme.colors.success, marginRight: theme.space[2], flexShrink: 0 }, children: "✓" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+            lineNumber: 100,
+            columnNumber: 15
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: "Visual feedback on component structure and integration points" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+            lineNumber: 101,
+            columnNumber: 15
+          }, void 0)
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+          lineNumber: 99,
+          columnNumber: 13
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("li", { style: { marginBottom: theme.space[1], display: "flex", alignItems: "flex-start" }, children: [
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { color: theme.colors.success, marginRight: theme.space[2], flexShrink: 0 }, children: "✓" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+            lineNumber: 104,
+            columnNumber: 15
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: "Customizable layouts and themes" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+            lineNumber: 105,
+            columnNumber: 15
+          }, void 0)
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+          lineNumber: 103,
+          columnNumber: 13
+        }, void 0)
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+        lineNumber: 83,
+        columnNumber: 11
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+      lineNumber: 62,
+      columnNumber: 9
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       display: "flex",
       flexDirection: "column",
       gap: theme.space[3],
       marginTop: theme.space[4]
     }, children: [
-      /* @__PURE__ */ jsx("h3", { style: {
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("h3", { style: {
         margin: 0,
         fontSize: theme.fontSizes[2],
         fontWeight: theme.fontWeights.medium,
         color: theme.colors.text
-      }, children: "Get Started" }),
-      /* @__PURE__ */ jsxs("div", { style: {
+      }, children: "Get Started" }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+        lineNumber: 116,
+        columnNumber: 11
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
         display: "flex",
         flexDirection: "column",
         gap: theme.space[2]
       }, children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
           "a",
           {
             href: "https://github.com/principal-ai/principal-view-core-library/blob/main/docs/CONFIGURATION_REFERENCE.md",
@@ -53307,23 +53464,51 @@ const EmptyStateContent = ({ theme }) => {
               e.currentTarget.style.backgroundColor = theme.colors.backgroundSecondary;
             },
             children: [
-              /* @__PURE__ */ jsx(BookOpen, { size: 20, color: theme.colors.primary, style: { flexShrink: 0 } }),
-              /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                /* @__PURE__ */ jsx("div", { style: {
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(BookOpen, { size: 20, color: theme.colors.primary, style: { flexShrink: 0 } }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+                lineNumber: 156,
+                columnNumber: 15
+              }, void 0),
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
                   fontSize: theme.fontSizes[2],
                   fontWeight: theme.fontWeights.medium,
                   marginBottom: theme.space[1]
-                }, children: "Configuration Reference" }),
-                /* @__PURE__ */ jsx("div", { style: {
+                }, children: "Configuration Reference" }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+                  lineNumber: 158,
+                  columnNumber: 17
+                }, void 0),
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
                   fontSize: theme.fontSizes[0],
                   color: theme.colors.textSecondary
-                }, children: "Learn how to create .principal-views/ configurations with path-based validation" })
-              ] }),
-              /* @__PURE__ */ jsx(ExternalLink, { size: 16, color: theme.colors.textMuted, style: { flexShrink: 0 } })
+                }, children: "Learn how to create .principal-views/ configurations with path-based validation" }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+                  lineNumber: 165,
+                  columnNumber: 17
+                }, void 0)
+              ] }, void 0, true, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+                lineNumber: 157,
+                columnNumber: 15
+              }, void 0),
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ExternalLink, { size: 16, color: theme.colors.textMuted, style: { flexShrink: 0 } }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+                lineNumber: 172,
+                columnNumber: 15
+              }, void 0)
             ]
-          }
+          },
+          void 0,
+          true,
+          {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+            lineNumber: 130,
+            columnNumber: 13
+          },
+          void 0
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
           "a",
           {
             href: "https://www.npmjs.com/package/@principal-ai/principal-view-core",
@@ -53351,24 +53536,56 @@ const EmptyStateContent = ({ theme }) => {
               e.currentTarget.style.backgroundColor = theme.colors.backgroundSecondary;
             },
             children: [
-              /* @__PURE__ */ jsx(FileText, { size: 20, color: theme.colors.primary, style: { flexShrink: 0 } }),
-              /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                /* @__PURE__ */ jsx("div", { style: {
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(FileText, { size: 20, color: theme.colors.primary, style: { flexShrink: 0 } }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+                lineNumber: 201,
+                columnNumber: 15
+              }, void 0),
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
                   fontSize: theme.fontSizes[2],
                   fontWeight: theme.fontWeights.medium,
                   marginBottom: theme.space[1]
-                }, children: "NPM Package Documentation" }),
-                /* @__PURE__ */ jsx("div", { style: {
+                }, children: "NPM Package Documentation" }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+                  lineNumber: 203,
+                  columnNumber: 17
+                }, void 0),
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
                   fontSize: theme.fontSizes[0],
                   color: theme.colors.textSecondary
-                }, children: "View @principal-ai/principal-view-core on npm" })
-              ] }),
-              /* @__PURE__ */ jsx(ExternalLink, { size: 16, color: theme.colors.textMuted, style: { flexShrink: 0 } })
+                }, children: "View @principal-ai/principal-view-core on npm" }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+                  lineNumber: 210,
+                  columnNumber: 17
+                }, void 0)
+              ] }, void 0, true, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+                lineNumber: 202,
+                columnNumber: 15
+              }, void 0),
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ExternalLink, { size: 16, color: theme.colors.textMuted, style: { flexShrink: 0 } }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+                lineNumber: 217,
+                columnNumber: 15
+              }, void 0)
             ]
-          }
+          },
+          void 0,
+          true,
+          {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+            lineNumber: 175,
+            columnNumber: 13
+          },
+          void 0
         )
-      ] }),
-      /* @__PURE__ */ jsxs("p", { style: {
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+        lineNumber: 125,
+        columnNumber: 11
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("p", { style: {
         margin: 0,
         fontSize: theme.fontSizes[1],
         color: theme.colors.textMuted,
@@ -53376,17 +53593,37 @@ const EmptyStateContent = ({ theme }) => {
         textAlign: "center"
       }, children: [
         "Once you add a ",
-        /* @__PURE__ */ jsx("code", { style: {
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("code", { style: {
           backgroundColor: theme.colors.backgroundSecondary,
           padding: `2px ${theme.space[1]}`,
           borderRadius: theme.radii[0],
           fontFamily: theme.fonts.monospace,
           fontSize: theme.fontSizes[0]
-        }, children: ".principal-views/" }),
+        }, children: ".principal-views/" }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+          lineNumber: 228,
+          columnNumber: 28
+        }, void 0),
         " folder with YAML configuration files to your project root, the panel will automatically visualize your configurations."
-      ] })
-    ] })
-  ] }) });
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+        lineNumber: 221,
+        columnNumber: 11
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+      lineNumber: 110,
+      columnNumber: 9
+    }, void 0)
+  ] }, void 0, true, {
+    fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+    lineNumber: 30,
+    columnNumber: 7
+  }, void 0) }, void 0, false, {
+    fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/principal-view/EmptyStateContent.tsx",
+    lineNumber: 16,
+    columnNumber: 5
+  }, void 0);
 };
 const DEFAULT_LAYOUT_CONFIG = {
   direction: "TB",
@@ -53644,7 +53881,7 @@ const PrincipalViewGraphPanel = ({
     return unsubscribe;
   }, []);
   if (state.loading) {
-    return /* @__PURE__ */ jsxs("div", { style: {
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -53652,39 +53889,63 @@ const PrincipalViewGraphPanel = ({
       color: theme.colors.textMuted,
       fontFamily: theme.fonts.body
     }, children: [
-      /* @__PURE__ */ jsx(Loader, { size: 24, style: { animation: "spin 1s linear infinite" } }),
-      /* @__PURE__ */ jsx("span", { style: { marginLeft: theme.space[2] }, children: "Loading configuration..." })
-    ] });
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Loader, { size: 24, style: { animation: "spin 1s linear infinite" } }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+        lineNumber: 399,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { marginLeft: theme.space[2] }, children: "Loading configuration..." }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+        lineNumber: 400,
+        columnNumber: 9
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+      lineNumber: 391,
+      columnNumber: 7
+    }, void 0);
   }
   if (state.error) {
-    return /* @__PURE__ */ jsx(ErrorStateContent, { theme, error: state.error, onRetry: () => loadConfiguration() });
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ErrorStateContent, { theme, error: state.error, onRetry: () => loadConfiguration() }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+      lineNumber: 406,
+      columnNumber: 12
+    }, void 0);
   }
   if (!state.canvas) {
-    return /* @__PURE__ */ jsx(EmptyStateContent, { theme });
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(EmptyStateContent, { theme }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+      lineNumber: 410,
+      columnNumber: 12
+    }, void 0);
   }
-  return /* @__PURE__ */ jsxs("div", { style: {
+  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
     height: "100%",
     width: "100%",
     display: "flex",
     flexDirection: "column",
     fontFamily: theme.fonts.body
   }, children: [
-    /* @__PURE__ */ jsxs("div", { style: {
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       padding: "16px 20px",
       borderBottom: `1px solid ${theme.colors.border}`,
       backgroundColor: theme.colors.background,
       flexShrink: 0
     }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.space[3] }, children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: theme.space[3] }, children: [
-          /* @__PURE__ */ jsx("h2", { style: {
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.space[3] }, children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { display: "flex", alignItems: "center", gap: theme.space[3] }, children: [
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("h2", { style: {
             margin: 0,
             fontSize: theme.fontSizes[3],
             fontWeight: theme.fontWeights.medium,
             color: theme.colors.text
-          }, children: ((_a = state.canvas.pv) == null ? void 0 : _a.name) || "Untitled" }),
-          state.availableConfigs.length > 1 && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-            /* @__PURE__ */ jsx(
+          }, children: ((_a = state.canvas.pv) == null ? void 0 : _a.name) || "Untitled" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+            lineNumber: 431,
+            columnNumber: 13
+          }, void 0),
+          state.availableConfigs.length > 1 && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
               "select",
               {
                 value: state.selectedConfigId || "",
@@ -53705,10 +53966,22 @@ const PrincipalViewGraphPanel = ({
                   transition: "all 0.2s"
                 },
                 title: state.hasUnsavedChanges ? "Save or discard changes before switching configs" : void 0,
-                children: state.availableConfigs.map((config) => /* @__PURE__ */ jsx("option", { value: config.id, children: config.name }, config.id))
-              }
+                children: state.availableConfigs.map((config) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("option", { value: config.id, children: config.name }, config.id, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                  lineNumber: 464,
+                  columnNumber: 21
+                }, void 0))
+              },
+              void 0,
+              false,
+              {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                lineNumber: 443,
+                columnNumber: 17
+              },
+              void 0
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
               ChevronDown,
               {
                 size: 14,
@@ -53720,12 +53993,28 @@ const PrincipalViewGraphPanel = ({
                   pointerEvents: "none",
                   color: theme.colors.textMuted
                 }
-              }
+              },
+              void 0,
+              false,
+              {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                lineNumber: 467,
+                columnNumber: 17
+              },
+              void 0
             )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: theme.space[3] }, children: [
-          /* @__PURE__ */ jsxs(
+          ] }, void 0, true, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+            lineNumber: 442,
+            columnNumber: 15
+          }, void 0)
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 430,
+          columnNumber: 11
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { display: "flex", alignItems: "center", gap: theme.space[3] }, children: [
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
             "button",
             {
               onClick: toggleLayoutConfig,
@@ -53746,12 +54035,28 @@ const PrincipalViewGraphPanel = ({
                 transition: "all 0.2s"
               },
               children: [
-                /* @__PURE__ */ jsx(LayoutGrid, { size: 14 }),
-                /* @__PURE__ */ jsx("span", { children: "Auto Layout" })
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(LayoutGrid, { size: 14 }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                  lineNumber: 503,
+                  columnNumber: 15
+                }, void 0),
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: "Auto Layout" }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                  lineNumber: 504,
+                  columnNumber: 15
+                }, void 0)
               ]
-            }
+            },
+            void 0,
+            true,
+            {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+              lineNumber: 484,
+              columnNumber: 13
+            },
+            void 0
           ),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
             "button",
             {
               onClick: toggleEditMode,
@@ -53771,26 +54076,62 @@ const PrincipalViewGraphPanel = ({
                 transition: "all 0.2s"
               },
               children: [
-                state.isEditMode ? /* @__PURE__ */ jsx(LockOpen, { size: 14 }) : /* @__PURE__ */ jsx(Lock, { size: 14 }),
-                /* @__PURE__ */ jsx("span", { children: state.isEditMode ? "Editing" : "Edit" })
+                state.isEditMode ? /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(LockOpen, { size: 14 }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                  lineNumber: 526,
+                  columnNumber: 35
+                }, void 0) : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Lock, { size: 14 }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                  lineNumber: 526,
+                  columnNumber: 58
+                }, void 0),
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: state.isEditMode ? "Editing" : "Edit" }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                  lineNumber: 527,
+                  columnNumber: 15
+                }, void 0)
               ]
-            }
+            },
+            void 0,
+            true,
+            {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+              lineNumber: 508,
+              columnNumber: 13
+            },
+            void 0
           )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("div", { style: {
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 482,
+          columnNumber: 11
+        }, void 0)
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+        lineNumber: 429,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
         display: "flex",
         alignItems: "center",
         gap: theme.space[2],
         marginTop: theme.space[2]
-      }, children: state.isEditMode && state.hasUnsavedChanges ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { style: {
+      }, children: state.isEditMode && state.hasUnsavedChanges ? /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: {
           fontSize: theme.fontSizes[1],
           color: theme.colors.warning || "#f59e0b",
           fontStyle: "italic"
-        }, children: "Unsaved changes" }),
-        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-        /* @__PURE__ */ jsxs(
+        }, children: "Unsaved changes" }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 542,
+          columnNumber: 15
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { flex: 1 } }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 551,
+          columnNumber: 15
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
           "button",
           {
             onClick: saveAllChanges,
@@ -53811,12 +54152,32 @@ const PrincipalViewGraphPanel = ({
               transition: "all 0.2s"
             },
             children: [
-              state.isSaving ? /* @__PURE__ */ jsx(Loader, { size: 14, style: { animation: "spin 1s linear infinite" } }) : /* @__PURE__ */ jsx(Save, { size: 14 }),
-              /* @__PURE__ */ jsx("span", { children: "Save" })
+              state.isSaving ? /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Loader, { size: 14, style: { animation: "spin 1s linear infinite" } }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                lineNumber: 574,
+                columnNumber: 19
+              }, void 0) : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Save, { size: 14 }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                lineNumber: 576,
+                columnNumber: 19
+              }, void 0),
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: "Save" }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                lineNumber: 578,
+                columnNumber: 17
+              }, void 0)
             ]
-          }
+          },
+          void 0,
+          true,
+          {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+            lineNumber: 554,
+            columnNumber: 15
+          },
+          void 0
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
           "button",
           {
             onClick: discardChanges,
@@ -53837,23 +54198,71 @@ const PrincipalViewGraphPanel = ({
               transition: "all 0.2s"
             },
             children: [
-              /* @__PURE__ */ jsx(X$1, { size: 14 }),
-              /* @__PURE__ */ jsx("span", { children: "Discard" })
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(X$1, { size: 14 }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                lineNumber: 601,
+                columnNumber: 17
+              }, void 0),
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: "Discard" }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+                lineNumber: 602,
+                columnNumber: 17
+              }, void 0)
             ]
-          }
+          },
+          void 0,
+          true,
+          {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+            lineNumber: 582,
+            columnNumber: 15
+          },
+          void 0
         )
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        ((_b = state.canvas.pv) == null ? void 0 : _b.version) && /* @__PURE__ */ jsxs("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textMuted }, children: [
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+        lineNumber: 540,
+        columnNumber: 13
+      }, void 0) : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
+        ((_b = state.canvas.pv) == null ? void 0 : _b.version) && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textMuted }, children: [
           "v",
           state.canvas.pv.version
-        ] }),
-        ((_c = state.canvas.pv) == null ? void 0 : _c.description) && /* @__PURE__ */ jsxs(Fragment, { children: [
-          ((_d = state.canvas.pv) == null ? void 0 : _d.version) && /* @__PURE__ */ jsx("span", { style: { color: theme.colors.textMuted }, children: "•" }),
-          /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textMuted }, children: state.canvas.pv.description })
-        ] })
-      ] }) })
-    ] }),
-    state.showLayoutConfig && /* @__PURE__ */ jsxs("div", { style: {
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 608,
+          columnNumber: 17
+        }, void 0),
+        ((_c = state.canvas.pv) == null ? void 0 : _c.description) && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
+          ((_d = state.canvas.pv) == null ? void 0 : _d.version) && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { color: theme.colors.textMuted }, children: "•" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+            lineNumber: 614,
+            columnNumber: 48
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textMuted }, children: state.canvas.pv.description }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+            lineNumber: 615,
+            columnNumber: 19
+          }, void 0)
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 613,
+          columnNumber: 17
+        }, void 0)
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+        lineNumber: 606,
+        columnNumber: 13
+      }, void 0) }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+        lineNumber: 533,
+        columnNumber: 9
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+      lineNumber: 422,
+      columnNumber: 7
+    }, void 0),
+    state.showLayoutConfig && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       padding: `${theme.space[3]}px 20px`,
       backgroundColor: theme.colors.backgroundSecondary,
       borderBottom: `1px solid ${theme.colors.border}`,
@@ -53862,13 +54271,17 @@ const PrincipalViewGraphPanel = ({
       gap: theme.space[4],
       flexWrap: "wrap"
     }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: theme.space[2] }, children: [
-        /* @__PURE__ */ jsx("label", { style: {
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { display: "flex", alignItems: "center", gap: theme.space[2] }, children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { style: {
           fontSize: theme.fontSizes[1],
           color: theme.colors.textMuted,
           fontWeight: theme.fontWeights.medium
-        }, children: "Direction" }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: theme.space[1] }, children: ["TB", "BT", "LR", "RL"].map((dir) => /* @__PURE__ */ jsx(
+        }, children: "Direction" }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 638,
+          columnNumber: 13
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { display: "flex", gap: theme.space[1] }, children: ["TB", "BT", "LR", "RL"].map((dir) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
           "button",
           {
             onClick: () => updateLayoutConfig({ direction: dir }),
@@ -53891,16 +54304,35 @@ const PrincipalViewGraphPanel = ({
             },
             children: dir
           },
-          dir
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: theme.space[2] }, children: [
-        /* @__PURE__ */ jsx("label", { style: {
+          dir,
+          false,
+          {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+            lineNumber: 647,
+            columnNumber: 17
+          },
+          void 0
+        )) }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 645,
+          columnNumber: 13
+        }, void 0)
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+        lineNumber: 637,
+        columnNumber: 11
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { display: "flex", alignItems: "center", gap: theme.space[2] }, children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { style: {
           fontSize: theme.fontSizes[1],
           color: theme.colors.textMuted,
           fontWeight: theme.fontWeights.medium
-        }, children: "H-Spacing" }),
-        /* @__PURE__ */ jsx(
+        }, children: "H-Spacing" }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 676,
+          columnNumber: 13
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
           "input",
           {
             type: "range",
@@ -53910,22 +54342,42 @@ const PrincipalViewGraphPanel = ({
             value: state.layoutConfig.nodeSpacingX,
             onChange: (e) => updateLayoutConfig({ nodeSpacingX: Number(e.target.value) }),
             style: { width: 80, cursor: "pointer" }
-          }
+          },
+          void 0,
+          false,
+          {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+            lineNumber: 683,
+            columnNumber: 13
+          },
+          void 0
         ),
-        /* @__PURE__ */ jsx("span", { style: {
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: {
           fontSize: theme.fontSizes[0],
           color: theme.colors.textMuted,
           fontFamily: theme.fonts.monospace,
           minWidth: 32
-        }, children: state.layoutConfig.nodeSpacingX })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: theme.space[2] }, children: [
-        /* @__PURE__ */ jsx("label", { style: {
+        }, children: state.layoutConfig.nodeSpacingX }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 692,
+          columnNumber: 13
+        }, void 0)
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+        lineNumber: 675,
+        columnNumber: 11
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { display: "flex", alignItems: "center", gap: theme.space[2] }, children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { style: {
           fontSize: theme.fontSizes[1],
           color: theme.colors.textMuted,
           fontWeight: theme.fontWeights.medium
-        }, children: "V-Spacing" }),
-        /* @__PURE__ */ jsx(
+        }, children: "V-Spacing" }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 704,
+          columnNumber: 13
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
           "input",
           {
             type: "range",
@@ -53935,17 +54387,37 @@ const PrincipalViewGraphPanel = ({
             value: state.layoutConfig.nodeSpacingY,
             onChange: (e) => updateLayoutConfig({ nodeSpacingY: Number(e.target.value) }),
             style: { width: 80, cursor: "pointer" }
-          }
+          },
+          void 0,
+          false,
+          {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+            lineNumber: 711,
+            columnNumber: 13
+          },
+          void 0
         ),
-        /* @__PURE__ */ jsx("span", { style: {
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: {
           fontSize: theme.fontSizes[0],
           color: theme.colors.textMuted,
           fontFamily: theme.fonts.monospace,
           minWidth: 32
-        }, children: state.layoutConfig.nodeSpacingY })
-      ] }),
-      /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-      /* @__PURE__ */ jsxs(
+        }, children: state.layoutConfig.nodeSpacingY }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 720,
+          columnNumber: 13
+        }, void 0)
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+        lineNumber: 703,
+        columnNumber: 11
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { flex: 1 } }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+        lineNumber: 731,
+        columnNumber: 11
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "button",
         {
           onClick: applyAutoLayout,
@@ -53964,12 +54436,28 @@ const PrincipalViewGraphPanel = ({
             transition: "all 0.15s"
           },
           children: [
-            /* @__PURE__ */ jsx(LayoutGrid, { size: 14 }),
-            /* @__PURE__ */ jsx("span", { children: "Apply Layout" })
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(LayoutGrid, { size: 14 }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+              lineNumber: 751,
+              columnNumber: 13
+            }, void 0),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: "Apply Layout" }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+              lineNumber: 752,
+              columnNumber: 13
+            }, void 0)
           ]
-        }
+        },
+        void 0,
+        true,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 734,
+          columnNumber: 11
+        },
+        void 0
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "button",
         {
           onClick: toggleLayoutConfig,
@@ -53987,11 +54475,27 @@ const PrincipalViewGraphPanel = ({
             cursor: "pointer",
             transition: "all 0.15s"
           },
-          children: /* @__PURE__ */ jsx(X$1, { size: 16 })
-        }
+          children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(X$1, { size: 16 }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+            lineNumber: 773,
+            columnNumber: 13
+          }, void 0)
+        },
+        void 0,
+        false,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+          lineNumber: 756,
+          columnNumber: 11
+        },
+        void 0
       )
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx(
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+      lineNumber: 627,
+      columnNumber: 9
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
       distExports.GraphRenderer,
       {
         ref: graphRef,
@@ -54003,9 +54507,24 @@ const PrincipalViewGraphPanel = ({
         editable: state.isEditMode,
         onPendingChangesChange: handlePendingChangesChange
       },
-      `graph-${state.layoutVersion}`
-    ) })
-  ] });
+      `graph-${state.layoutVersion}`,
+      false,
+      {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+        lineNumber: 780,
+        columnNumber: 9
+      },
+      void 0
+    ) }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+      lineNumber: 779,
+      columnNumber: 7
+    }, void 0)
+  ] }, void 0, true, {
+    fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/PrincipalViewGraphPanel.tsx",
+    lineNumber: 414,
+    columnNumber: 5
+  }, void 0);
 };
 function applyChangesToCanvas(canvas, changes) {
   var _a, _b;
@@ -54474,7 +54993,7 @@ const ConfigLibraryBrowserPanel = ({
     );
   }, [state.library, state.libraryFilter]);
   if (state.loading) {
-    return /* @__PURE__ */ jsxs("div", { style: {
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       height: "100%",
       width: "100%",
       display: "flex",
@@ -54483,73 +55002,109 @@ const ConfigLibraryBrowserPanel = ({
       fontFamily: theme.fonts.body,
       overflow: "hidden"
     }, children: [
-      /* @__PURE__ */ jsx("style", { children: `
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("style", { children: `
           @keyframes shimmer {
             0% { background-position: -200% 0; }
             100% { background-position: 200% 0; }
           }
-        ` }),
-      /* @__PURE__ */ jsxs("div", { style: {
+        ` }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 389,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
         padding: `${theme.space[3]}px ${theme.space[3]}px`,
         borderBottom: `1px solid ${theme.colors.border}`,
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between"
       }, children: [
-        /* @__PURE__ */ jsx("div", { style: {
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
           width: "80px",
           height: "20px",
           borderRadius: theme.radii[1],
           background: `linear-gradient(90deg, ${theme.colors.backgroundSecondary} 25%, ${theme.colors.border} 50%, ${theme.colors.backgroundSecondary} 75%)`,
           backgroundSize: "200% 100%",
           animation: "shimmer 1.5s infinite"
-        } }),
-        /* @__PURE__ */ jsx("div", { style: {
+        } }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 404,
+          columnNumber: 11
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
           width: "28px",
           height: "28px",
           borderRadius: theme.radii[1],
           background: `linear-gradient(90deg, ${theme.colors.backgroundSecondary} 25%, ${theme.colors.border} 50%, ${theme.colors.backgroundSecondary} 75%)`,
           backgroundSize: "200% 100%",
           animation: "shimmer 1.5s infinite"
-        } })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: {
+        } }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 412,
+          columnNumber: 11
+        }, void 0)
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 397,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
         display: "flex",
         borderBottom: `1px solid ${theme.colors.border}`,
         backgroundColor: theme.colors.backgroundSecondary
       }, children: [
-        /* @__PURE__ */ jsx("div", { style: {
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
           flex: 1,
           padding: `${theme.space[2]}px ${theme.space[3]}px`,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           gap: theme.space[2]
-        }, children: /* @__PURE__ */ jsx("div", { style: {
+        }, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
           width: "60px",
           height: "16px",
           borderRadius: theme.radii[1],
           background: `linear-gradient(90deg, ${theme.colors.background} 25%, ${theme.colors.border} 50%, ${theme.colors.background} 75%)`,
           backgroundSize: "200% 100%",
           animation: "shimmer 1.5s infinite"
-        } }) }),
-        /* @__PURE__ */ jsx("div", { style: {
+        } }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 436,
+          columnNumber: 13
+        }, void 0) }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 428,
+          columnNumber: 11
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
           flex: 1,
           padding: `${theme.space[2]}px ${theme.space[3]}px`,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           gap: theme.space[2]
-        }, children: /* @__PURE__ */ jsx("div", { style: {
+        }, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
           width: "60px",
           height: "16px",
           borderRadius: theme.radii[1],
           background: `linear-gradient(90deg, ${theme.colors.background} 25%, ${theme.colors.border} 50%, ${theme.colors.background} 75%)`,
           backgroundSize: "200% 100%",
           animation: "shimmer 1.5s infinite"
-        } }) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { style: { padding: `${theme.space[3]}px ${theme.space[3]}px` }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs(
+        } }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 453,
+          columnNumber: 13
+        }, void 0) }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 445,
+          columnNumber: 11
+        }, void 0)
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 423,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { padding: `${theme.space[3]}px ${theme.space[3]}px` }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "div",
         {
           style: {
@@ -54563,7 +55118,7 @@ const ConfigLibraryBrowserPanel = ({
             border: `1px solid ${theme.colors.border}`
           },
           children: [
-            /* @__PURE__ */ jsx("div", { style: {
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
               width: "16px",
               height: "16px",
               borderRadius: theme.radii[1],
@@ -54571,8 +55126,12 @@ const ConfigLibraryBrowserPanel = ({
               backgroundSize: "200% 100%",
               animation: "shimmer 1.5s infinite",
               animationDelay: `${i * 0.1}s`
-            } }),
-            /* @__PURE__ */ jsx("div", { style: {
+            } }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 480,
+              columnNumber: 15
+            }, void 0),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
               flex: 1,
               height: "16px",
               borderRadius: theme.radii[1],
@@ -54580,15 +55139,34 @@ const ConfigLibraryBrowserPanel = ({
               backgroundSize: "200% 100%",
               animation: "shimmer 1.5s infinite",
               animationDelay: `${i * 0.1}s`
-            } })
+            } }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 489,
+              columnNumber: 15
+            }, void 0)
           ]
         },
-        i
-      )) })
-    ] });
+        i,
+        true,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 467,
+          columnNumber: 13
+        },
+        void 0
+      )) }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 465,
+        columnNumber: 9
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+      lineNumber: 380,
+      columnNumber: 7
+    }, void 0);
   }
   if (state.error) {
-    return /* @__PURE__ */ jsxs("div", { style: {
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -54600,8 +55178,12 @@ const ConfigLibraryBrowserPanel = ({
       fontFamily: theme.fonts.body,
       textAlign: "center"
     }, children: [
-      /* @__PURE__ */ jsx("span", { style: { color: theme.colors.error || "#ef4444", marginBottom: theme.space[2] }, children: state.error }),
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { color: theme.colors.error || "#ef4444", marginBottom: theme.space[2] }, children: state.error }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 519,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "button",
         {
           onClick: () => loadData(),
@@ -54619,17 +55201,33 @@ const ConfigLibraryBrowserPanel = ({
             fontSize: theme.fontSizes[1]
           },
           children: [
-            /* @__PURE__ */ jsx(RefreshCw, { size: 14 }),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(RefreshCw, { size: 14 }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 538,
+              columnNumber: 11
+            }, void 0),
             "Retry"
           ]
-        }
+        },
+        void 0,
+        true,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 522,
+          columnNumber: 9
+        },
+        void 0
       )
-    ] });
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+      lineNumber: 507,
+      columnNumber: 7
+    }, void 0);
   }
   const hasContent = state.configs.length > 0 || state.library;
   if (!hasContent) {
     const npmPackageUrl = "https://www.npmjs.com/package/@principal-ai/principal-view-cli";
-    return /* @__PURE__ */ jsxs("div", { style: {
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -54641,18 +55239,34 @@ const ConfigLibraryBrowserPanel = ({
       fontFamily: theme.fonts.body,
       textAlign: "center"
     }, children: [
-      /* @__PURE__ */ jsx(Network, { size: 56, style: { marginBottom: theme.space[3], opacity: 0.3 } }),
-      /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes[3], fontWeight: theme.fontWeights.medium, marginBottom: theme.space[2], color: theme.colors.text }, children: "No configurations found" }),
-      /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes[2], marginBottom: theme.space[3], maxWidth: "80%", lineHeight: 1.5 }, children: "Initialize Principal View to create architecture diagrams that connect to your codebase." }),
-      /* @__PURE__ */ jsxs("div", { style: {
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Network, { size: 56, style: { marginBottom: theme.space[3], opacity: 0.3 } }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 563,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { fontSize: theme.fontSizes[3], fontWeight: theme.fontWeights.medium, marginBottom: theme.space[2], color: theme.colors.text }, children: "No configurations found" }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 564,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { fontSize: theme.fontSizes[2], marginBottom: theme.space[3], maxWidth: "80%", lineHeight: 1.5 }, children: "Initialize Principal View to create architecture diagrams that connect to your codebase." }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 567,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
         display: "flex",
         flexDirection: "column",
         gap: theme.space[2],
         width: "90%",
         maxWidth: "400px"
       }, children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textMuted }, children: "Run this command to get started:" }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textMuted }, children: "Run this command to get started:" }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 579,
+          columnNumber: 11
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
           "button",
           {
             onClick: handleCopyCommand,
@@ -54673,13 +55287,37 @@ const ConfigLibraryBrowserPanel = ({
               transition: "all 0.15s"
             },
             children: [
-              /* @__PURE__ */ jsx("code", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: cliCommand }),
-              copied ? /* @__PURE__ */ jsx(Check, { size: 16, style: { color: theme.colors.success || "#22c55e", flexShrink: 0 } }) : /* @__PURE__ */ jsx(Copy, { size: 16, style: { color: theme.colors.textMuted, flexShrink: 0 } })
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("code", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: cliCommand }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                lineNumber: 601,
+                columnNumber: 13
+              }, void 0),
+              copied ? /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Check, { size: 16, style: { color: theme.colors.success || "#22c55e", flexShrink: 0 } }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                lineNumber: 605,
+                columnNumber: 15
+              }, void 0) : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Copy, { size: 16, style: { color: theme.colors.textMuted, flexShrink: 0 } }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                lineNumber: 607,
+                columnNumber: 15
+              }, void 0)
             ]
-          }
+          },
+          void 0,
+          true,
+          {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 582,
+            columnNumber: 11
+          },
+          void 0
         ),
-        /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textMuted }, children: cliCommandDescription }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textMuted }, children: cliCommandDescription }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 610,
+          columnNumber: 11
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
           "a",
           {
             href: npmPackageUrl,
@@ -54698,12 +55336,32 @@ const ConfigLibraryBrowserPanel = ({
             },
             children: [
               "Learn more on npm",
-              /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ExternalLink, { size: 14 }, void 0, false, {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                lineNumber: 632,
+                columnNumber: 13
+              }, void 0)
             ]
-          }
+          },
+          void 0,
+          true,
+          {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 615,
+            columnNumber: 11
+          },
+          void 0
         )
-      ] })
-    ] });
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 572,
+        columnNumber: 9
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+      lineNumber: 551,
+      columnNumber: 7
+    }, void 0);
   }
   const getTabStyle = (tabId, isActive) => ({
     flex: 1,
@@ -54722,7 +55380,7 @@ const ConfigLibraryBrowserPanel = ({
     fontWeight: isActive ? theme.fontWeights.medium : theme.fontWeights.body,
     transition: "all 0.15s"
   });
-  return /* @__PURE__ */ jsxs("div", { style: {
+  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
     height: "100%",
     width: "100%",
     display: "flex",
@@ -54732,7 +55390,7 @@ const ConfigLibraryBrowserPanel = ({
     overflow: "hidden",
     position: "relative"
   }, children: [
-    /* @__PURE__ */ jsxs("div", { style: {
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       padding: `${theme.space[3]}px ${theme.space[3]}px`,
       borderBottom: `1px solid ${theme.colors.border}`,
       backgroundColor: theme.colors.background,
@@ -54741,14 +55399,18 @@ const ConfigLibraryBrowserPanel = ({
       justifyContent: "space-between",
       flexShrink: 0
     }, children: [
-      /* @__PURE__ */ jsx("h2", { style: {
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("h2", { style: {
         margin: 0,
         fontSize: theme.fontSizes[3],
         fontWeight: theme.fontWeights.medium,
         color: theme.colors.text
-      }, children: "Browser" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: theme.space[1] }, children: [
-        /* @__PURE__ */ jsx(
+      }, children: "Browser" }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 679,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { display: "flex", gap: theme.space[1] }, children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
           "button",
           {
             onClick: () => setShowSetupInfo(true),
@@ -54766,10 +55428,22 @@ const ConfigLibraryBrowserPanel = ({
               transition: "color 0.2s"
             },
             title: "Setup instructions",
-            children: /* @__PURE__ */ jsx(CircleQuestionMark, { size: 16 })
-          }
+            children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(CircleQuestionMark, { size: 16 }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 705,
+              columnNumber: 13
+            }, void 0)
+          },
+          void 0,
+          false,
+          {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 688,
+            columnNumber: 11
+          },
+          void 0
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
           "button",
           {
             onClick: () => loadData(),
@@ -54787,57 +55461,121 @@ const ConfigLibraryBrowserPanel = ({
               transition: "color 0.2s"
             },
             title: "Refresh",
-            children: /* @__PURE__ */ jsx(RefreshCw, { size: 16 })
-          }
+            children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(RefreshCw, { size: 16 }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 724,
+              columnNumber: 13
+            }, void 0)
+          },
+          void 0,
+          false,
+          {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 707,
+            columnNumber: 11
+          },
+          void 0
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: {
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 687,
+        columnNumber: 9
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+      lineNumber: 670,
+      columnNumber: 7
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       display: "flex",
       borderBottom: `1px solid ${theme.colors.border}`,
       backgroundColor: theme.colors.backgroundSecondary,
       flexShrink: 0
     }, children: [
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "button",
         {
           onClick: () => handleTabChange("canvas"),
           style: getTabStyle("canvas", state.activeTab === "canvas"),
           children: [
-            /* @__PURE__ */ jsx(FileBraces, { size: 16 }),
-            /* @__PURE__ */ jsx("span", { children: "Canvas" }),
-            state.configs.length > 0 && /* @__PURE__ */ jsx("span", { style: {
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(FileBraces, { size: 16 }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 740,
+              columnNumber: 11
+            }, void 0),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: "Canvas" }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 741,
+              columnNumber: 11
+            }, void 0),
+            state.configs.length > 0 && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: {
               fontSize: theme.fontSizes[0],
               color: state.activeTab === "canvas" ? theme.colors.primary : theme.colors.textMuted,
               backgroundColor: state.activeTab === "canvas" ? `${theme.colors.primary}20` : theme.colors.background,
               padding: `0 ${theme.space[1]}`,
               borderRadius: theme.radii[1]
-            }, children: state.configs.length })
+            }, children: state.configs.length }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 743,
+              columnNumber: 13
+            }, void 0)
           ]
-        }
+        },
+        void 0,
+        true,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 736,
+          columnNumber: 9
+        },
+        void 0
       ),
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "button",
         {
           onClick: () => handleTabChange("library"),
           style: getTabStyle("library", state.activeTab === "library"),
           disabled: !state.library,
           children: [
-            /* @__PURE__ */ jsx(Library, { size: 16 }),
-            /* @__PURE__ */ jsx("span", { children: "Library" })
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Library, { size: 16 }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 759,
+              columnNumber: 11
+            }, void 0),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: "Library" }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 760,
+              columnNumber: 11
+            }, void 0)
           ]
-        }
+        },
+        void 0,
+        true,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 754,
+          columnNumber: 9
+        },
+        void 0
       )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: {
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+      lineNumber: 730,
+      columnNumber: 7
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       flex: 1,
       overflow: "auto"
     }, children: [
-      state.activeTab === "canvas" && /* @__PURE__ */ jsx("div", { style: { padding: `${theme.space[3]}px ${theme.space[3]}px` }, children: state.configs.length === 0 ? /* @__PURE__ */ jsx("div", { style: {
+      state.activeTab === "canvas" && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { padding: `${theme.space[3]}px ${theme.space[3]}px` }, children: state.configs.length === 0 ? /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
         textAlign: "center",
         padding: theme.space[4],
         color: theme.colors.textMuted
-      }, children: "No canvas files found" }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: theme.space[2] }, children: state.configs.map((config) => /* @__PURE__ */ jsxs(
+      }, children: "No canvas files found" }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 773,
+        columnNumber: 15
+      }, void 0) : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { display: "flex", flexDirection: "column", gap: theme.space[2] }, children: state.configs.map((config) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "button",
         {
           onClick: () => handleConfigSelect(config),
@@ -54858,19 +55596,46 @@ const ConfigLibraryBrowserPanel = ({
             transition: "all 0.15s"
           },
           children: [
-            /* @__PURE__ */ jsx(FileBraces, { size: 16, style: { color: theme.colors.primary, flexShrink: 0 } }),
-            /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: config.displayName }),
-            /* @__PURE__ */ jsx(ArrowRight, { size: 14, style: { color: theme.colors.textMuted, opacity: 0.5 } })
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(FileBraces, { size: 16, style: { color: theme.colors.primary, flexShrink: 0 } }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 807,
+              columnNumber: 21
+            }, void 0),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { flex: 1 }, children: config.displayName }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 808,
+              columnNumber: 21
+            }, void 0),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ArrowRight, { size: 14, style: { color: theme.colors.textMuted, opacity: 0.5 } }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 809,
+              columnNumber: 21
+            }, void 0)
           ]
         },
-        config.id
-      )) }) }),
-      state.activeTab === "library" && state.library && /* @__PURE__ */ jsxs("div", { style: { padding: `${theme.space[3]}px ${theme.space[3]}px` }, children: [
-        /* @__PURE__ */ jsxs("div", { style: {
+        config.id,
+        true,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 783,
+          columnNumber: 19
+        },
+        void 0
+      )) }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 781,
+        columnNumber: 15
+      }, void 0) }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 771,
+        columnNumber: 11
+      }, void 0),
+      state.activeTab === "library" && state.library && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { padding: `${theme.space[3]}px ${theme.space[3]}px` }, children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
           position: "relative",
           marginBottom: theme.space[3]
         }, children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
             Search,
             {
               size: 16,
@@ -54882,9 +55647,17 @@ const ConfigLibraryBrowserPanel = ({
                 color: theme.colors.textMuted,
                 pointerEvents: "none"
               }
-            }
+            },
+            void 0,
+            false,
+            {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 825,
+              columnNumber: 15
+            },
+            void 0
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
             "input",
             {
               type: "text",
@@ -54904,24 +55677,44 @@ const ConfigLibraryBrowserPanel = ({
                 outline: "none",
                 boxSizing: "border-box"
               }
-            }
+            },
+            void 0,
+            false,
+            {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 836,
+              columnNumber: 15
+            },
+            void 0
           )
-        ] }),
-        nodeComponents.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: theme.space[3] }, children: [
-          /* @__PURE__ */ jsx("div", { style: {
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 821,
+          columnNumber: 13
+        }, void 0),
+        nodeComponents.length > 0 && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { marginBottom: theme.space[3] }, children: [
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
             marginBottom: theme.space[2]
-          }, children: /* @__PURE__ */ jsx("span", { style: {
+          }, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: {
             fontSize: theme.fontSizes[1],
             fontWeight: theme.fontWeights.medium,
             color: theme.colors.text
-          }, children: "Node Components" }) }),
-          /* @__PURE__ */ jsx("div", { style: {
+          }, children: "Node Components" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 863,
+            columnNumber: 19
+          }, void 0) }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 860,
+            columnNumber: 17
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
             display: "flex",
             flexDirection: "column",
             gap: theme.space[2]
           }, children: nodeComponents.map(([key, node]) => {
             const ShapeIcon = getShapeIcon(node.shape);
-            return /* @__PURE__ */ jsxs(
+            return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
               "div",
               {
                 style: {
@@ -54934,45 +55727,88 @@ const ConfigLibraryBrowserPanel = ({
                   border: `1px solid ${theme.colors.border}`
                 },
                 children: [
-                  /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
                     ShapeIcon,
                     {
                       size: 16,
                       style: { color: node.color || theme.colors.textMuted, flexShrink: 0 }
-                    }
+                    },
+                    void 0,
+                    false,
+                    {
+                      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                      lineNumber: 892,
+                      columnNumber: 25
+                    },
+                    void 0
                   ),
-                  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-                    /* @__PURE__ */ jsx("div", { style: {
+                  /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { flex: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
                       fontSize: theme.fontSizes[1],
                       color: theme.colors.text
-                    }, children: key }),
-                    node.description && /* @__PURE__ */ jsx("div", { style: {
+                    }, children: key }, void 0, false, {
+                      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                      lineNumber: 897,
+                      columnNumber: 27
+                    }, void 0),
+                    node.description && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
                       fontSize: theme.fontSizes[0],
                       color: theme.colors.textMuted,
                       whiteSpace: "nowrap",
                       overflow: "hidden",
                       textOverflow: "ellipsis"
-                    }, children: node.description })
-                  ] })
+                    }, children: node.description }, void 0, false, {
+                      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                      lineNumber: 904,
+                      columnNumber: 29
+                    }, void 0)
+                  ] }, void 0, true, {
+                    fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                    lineNumber: 896,
+                    columnNumber: 25
+                  }, void 0)
                 ]
               },
-              key
+              key,
+              true,
+              {
+                fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                lineNumber: 880,
+                columnNumber: 23
+              },
+              void 0
             );
-          }) })
-        ] }),
-        edgeComponents.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { style: {
+          }) }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 872,
+            columnNumber: 17
+          }, void 0)
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 859,
+          columnNumber: 15
+        }, void 0),
+        edgeComponents.length > 0 && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { children: [
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
             marginBottom: theme.space[2]
-          }, children: /* @__PURE__ */ jsx("span", { style: {
+          }, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: {
             fontSize: theme.fontSizes[1],
             fontWeight: theme.fontWeights.medium,
             color: theme.colors.text
-          }, children: "Edge Components" }) }),
-          /* @__PURE__ */ jsx("div", { style: {
+          }, children: "Edge Components" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 928,
+            columnNumber: 19
+          }, void 0) }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 925,
+            columnNumber: 17
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
             display: "flex",
             flexDirection: "column",
             gap: theme.space[2]
-          }, children: edgeComponents.map(([key, edge]) => /* @__PURE__ */ jsxs(
+          }, children: edgeComponents.map(([key, edge]) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
             "div",
             {
               style: {
@@ -54985,14 +55821,18 @@ const ConfigLibraryBrowserPanel = ({
                 border: `1px solid ${theme.colors.border}`
               },
               children: [
-                /* @__PURE__ */ jsx("div", { style: {
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
                   width: "20px",
                   height: "2px",
                   backgroundColor: edge.color || theme.colors.textMuted,
                   flexShrink: 0
-                } }),
-                /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-                  /* @__PURE__ */ jsxs("div", { style: {
+                } }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                  lineNumber: 955,
+                  columnNumber: 23
+                }, void 0),
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
                     display: "flex",
                     alignItems: "center",
                     gap: theme.space[1],
@@ -55000,33 +55840,88 @@ const ConfigLibraryBrowserPanel = ({
                     color: theme.colors.text
                   }, children: [
                     key,
-                    edge.directed && /* @__PURE__ */ jsx(ArrowRight, { size: 12, style: { color: theme.colors.textMuted } })
-                  ] }),
-                  edge.description && /* @__PURE__ */ jsx("div", { style: {
+                    edge.directed && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ArrowRight, { size: 12, style: { color: theme.colors.textMuted } }, void 0, false, {
+                      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                      lineNumber: 971,
+                      columnNumber: 29
+                    }, void 0)
+                  ] }, void 0, true, {
+                    fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                    lineNumber: 962,
+                    columnNumber: 25
+                  }, void 0),
+                  edge.description && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
                     fontSize: theme.fontSizes[0],
                     color: theme.colors.textMuted,
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                     textOverflow: "ellipsis"
-                  }, children: edge.description })
-                ] })
+                  }, children: edge.description }, void 0, false, {
+                    fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                    lineNumber: 975,
+                    columnNumber: 27
+                  }, void 0)
+                ] }, void 0, true, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                  lineNumber: 961,
+                  columnNumber: 23
+                }, void 0)
               ]
             },
-            key
-          )) })
-        ] })
-      ] }),
-      state.activeTab === "library" && !state.library && /* @__PURE__ */ jsxs("div", { style: {
+            key,
+            true,
+            {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 943,
+              columnNumber: 21
+            },
+            void 0
+          )) }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 937,
+            columnNumber: 17
+          }, void 0)
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 924,
+          columnNumber: 15
+        }, void 0)
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 819,
+        columnNumber: 11
+      }, void 0),
+      state.activeTab === "library" && !state.library && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
         textAlign: "center",
         padding: theme.space[4],
         color: theme.colors.textMuted
       }, children: [
-        /* @__PURE__ */ jsx(Library, { size: 32, style: { marginBottom: theme.space[2], opacity: 0.5 } }),
-        /* @__PURE__ */ jsx("div", { children: "No component library found" }),
-        /* @__PURE__ */ jsx("div", { style: { fontSize: theme.fontSizes[0], marginTop: theme.space[1] }, children: "Add library.yaml to the .principal-views/ folder" })
-      ] })
-    ] }),
-    showSetupInfo && /* @__PURE__ */ jsxs("div", { style: {
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Library, { size: 32, style: { marginBottom: theme.space[2], opacity: 0.5 } }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 1001,
+          columnNumber: 13
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { children: "No component library found" }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 1002,
+          columnNumber: 13
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { fontSize: theme.fontSizes[0], marginTop: theme.space[1] }, children: "Add library.yaml to the .principal-views/ folder" }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 1003,
+          columnNumber: 13
+        }, void 0)
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 996,
+        columnNumber: 11
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+      lineNumber: 765,
+      columnNumber: 7
+    }, void 0),
+    showSetupInfo && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       position: "absolute",
       top: 0,
       left: 0,
@@ -55037,7 +55932,7 @@ const ConfigLibraryBrowserPanel = ({
       flexDirection: "column",
       zIndex: 10
     }, children: [
-      /* @__PURE__ */ jsxs("div", { style: {
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
         padding: `${theme.space[3]}px ${theme.space[3]}px`,
         borderBottom: `1px solid ${theme.colors.border}`,
         display: "flex",
@@ -55045,13 +55940,17 @@ const ConfigLibraryBrowserPanel = ({
         justifyContent: "space-between",
         flexShrink: 0
       }, children: [
-        /* @__PURE__ */ jsx("h2", { style: {
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("h2", { style: {
           margin: 0,
           fontSize: theme.fontSizes[3],
           fontWeight: theme.fontWeights.medium,
           color: theme.colors.text
-        }, children: "Setup" }),
-        /* @__PURE__ */ jsx(
+        }, children: "Setup" }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 1032,
+          columnNumber: 13
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
           "button",
           {
             onClick: () => setShowSetupInfo(false),
@@ -55069,11 +55968,27 @@ const ConfigLibraryBrowserPanel = ({
               transition: "color 0.2s"
             },
             title: "Close",
-            children: /* @__PURE__ */ jsx(X$1, { size: 16 })
-          }
+            children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(X$1, { size: 16 }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 1057,
+              columnNumber: 15
+            }, void 0)
+          },
+          void 0,
+          false,
+          {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 1040,
+            columnNumber: 13
+          },
+          void 0
         )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: {
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 1024,
+        columnNumber: 11
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
         flex: 1,
         display: "flex",
         flexDirection: "column",
@@ -55084,18 +55999,34 @@ const ConfigLibraryBrowserPanel = ({
         textAlign: "center",
         overflow: "auto"
       }, children: [
-        /* @__PURE__ */ jsx(Network, { size: 56, style: { marginBottom: theme.space[3], opacity: 0.3 } }),
-        /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes[3], fontWeight: theme.fontWeights.medium, marginBottom: theme.space[2], color: theme.colors.text }, children: "Visual Validation Setup" }),
-        /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes[2], marginBottom: theme.space[3], maxWidth: "80%", lineHeight: 1.5 }, children: "Initialize Visual Validation to create architecture diagrams that connect to your codebase." }),
-        /* @__PURE__ */ jsxs("div", { style: {
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Network, { size: 56, style: { marginBottom: theme.space[3], opacity: 0.3 } }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 1073,
+          columnNumber: 13
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { fontSize: theme.fontSizes[3], fontWeight: theme.fontWeights.medium, marginBottom: theme.space[2], color: theme.colors.text }, children: "Visual Validation Setup" }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 1074,
+          columnNumber: 13
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { fontSize: theme.fontSizes[2], marginBottom: theme.space[3], maxWidth: "80%", lineHeight: 1.5 }, children: "Initialize Visual Validation to create architecture diagrams that connect to your codebase." }, void 0, false, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 1077,
+          columnNumber: 13
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
           display: "flex",
           flexDirection: "column",
           gap: theme.space[2],
           width: "90%",
           maxWidth: "400px"
         }, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textMuted }, children: "Run this command to get started:" }),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textMuted }, children: "Run this command to get started:" }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 1089,
+            columnNumber: 15
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
             "button",
             {
               onClick: handleCopyCommand,
@@ -55116,13 +56047,37 @@ const ConfigLibraryBrowserPanel = ({
                 transition: "all 0.15s"
               },
               children: [
-                /* @__PURE__ */ jsx("code", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: cliCommand }),
-                copied ? /* @__PURE__ */ jsx(Check, { size: 16, style: { color: theme.colors.success || "#22c55e", flexShrink: 0 } }) : /* @__PURE__ */ jsx(Copy, { size: 16, style: { color: theme.colors.textMuted, flexShrink: 0 } })
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("code", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: cliCommand }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                  lineNumber: 1111,
+                  columnNumber: 17
+                }, void 0),
+                copied ? /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Check, { size: 16, style: { color: theme.colors.success || "#22c55e", flexShrink: 0 } }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                  lineNumber: 1115,
+                  columnNumber: 19
+                }, void 0) : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Copy, { size: 16, style: { color: theme.colors.textMuted, flexShrink: 0 } }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                  lineNumber: 1117,
+                  columnNumber: 19
+                }, void 0)
               ]
-            }
+            },
+            void 0,
+            true,
+            {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 1092,
+              columnNumber: 15
+            },
+            void 0
           ),
-          /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textMuted }, children: cliCommandDescription }),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textMuted }, children: cliCommandDescription }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+            lineNumber: 1120,
+            columnNumber: 15
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
             "a",
             {
               href: "https://www.npmjs.com/package/@principal-ai/principal-view-cli",
@@ -55141,14 +56096,42 @@ const ConfigLibraryBrowserPanel = ({
               },
               children: [
                 "Learn more on npm",
-                /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ExternalLink, { size: 14 }, void 0, false, {
+                  fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+                  lineNumber: 1142,
+                  columnNumber: 17
+                }, void 0)
               ]
-            }
+            },
+            void 0,
+            true,
+            {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+              lineNumber: 1125,
+              columnNumber: 15
+            },
+            void 0
           )
-        ] })
-      ] })
-    ] })
-  ] });
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+          lineNumber: 1082,
+          columnNumber: 13
+        }, void 0)
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+        lineNumber: 1062,
+        columnNumber: 11
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+      lineNumber: 1012,
+      columnNumber: 9
+    }, void 0)
+  ] }, void 0, true, {
+    fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/ConfigLibraryBrowserPanel.tsx",
+    lineNumber: 659,
+    columnNumber: 5
+  }, void 0);
 };
 ConfigLibraryBrowserPanel.displayName = "ConfigLibraryBrowserPanel";
 const focusNodeTool = {
@@ -55437,7 +56420,7 @@ const EventControllerPanel = ({
         return theme.colors.textMuted;
     }
   };
-  return /* @__PURE__ */ jsxs("div", { style: {
+  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
     height: "100%",
     width: "100%",
     backgroundColor: theme.colors.background,
@@ -55451,32 +56434,44 @@ const EventControllerPanel = ({
     overflow: "hidden",
     boxSizing: "border-box"
   }, children: [
-    /* @__PURE__ */ jsxs("div", { style: {
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       borderBottom: `1px solid ${theme.colors.border}`,
       paddingBottom: theme.space[3]
     }, children: [
-      /* @__PURE__ */ jsx("h3", { style: {
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("h3", { style: {
         margin: 0,
         fontSize: theme.fontSizes[2],
         fontWeight: theme.fontWeights.medium,
         color: theme.colors.text
-      }, children: "Event Controller" }),
-      /* @__PURE__ */ jsxs("span", { style: { color: theme.colors.textMuted, fontSize: theme.fontSizes[1] }, children: [
+      }, children: "Event Controller" }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+        lineNumber: 301,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { color: theme.colors.textMuted, fontSize: theme.fontSizes[1] }, children: [
         events.length,
         " events"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: {
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+        lineNumber: 309,
+        columnNumber: 9
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+      lineNumber: 294,
+      columnNumber: 7
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
       gap: theme.space[2],
       padding: `${theme.space[2]} 0`
     }, children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "button",
         {
           onClick: stepPrevious,
@@ -55496,10 +56491,22 @@ const EventControllerPanel = ({
             transition: "all 0.2s"
           },
           title: "Step Back",
-          children: /* @__PURE__ */ jsx(SkipBack, { size: 16 })
-        }
+          children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(SkipBack, { size: 16 }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+            lineNumber: 342,
+            columnNumber: 11
+          }, void 0)
+        },
+        void 0,
+        false,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+          lineNumber: 323,
+          columnNumber: 9
+        },
+        void 0
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "button",
         {
           onClick: handleStop,
@@ -55517,10 +56524,22 @@ const EventControllerPanel = ({
             transition: "all 0.2s"
           },
           title: "Stop",
-          children: /* @__PURE__ */ jsx(Square, { size: 16 })
-        }
+          children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Square, { size: 16 }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+            lineNumber: 363,
+            columnNumber: 11
+          }, void 0)
+        },
+        void 0,
+        false,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+          lineNumber: 346,
+          columnNumber: 9
+        },
+        void 0
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "button",
         {
           onClick: status === "playing" ? handlePause : handlePlay,
@@ -55540,10 +56559,26 @@ const EventControllerPanel = ({
             transition: "all 0.2s"
           },
           title: status === "playing" ? "Pause" : "Play",
-          children: status === "playing" ? /* @__PURE__ */ jsx(Pause, { size: 20 }) : /* @__PURE__ */ jsx(Play, { size: 20 })
-        }
+          children: status === "playing" ? /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Pause, { size: 20 }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+            lineNumber: 390,
+            columnNumber: 35
+          }, void 0) : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Play, { size: 20 }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+            lineNumber: 390,
+            columnNumber: 57
+          }, void 0)
+        },
+        void 0,
+        false,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+          lineNumber: 367,
+          columnNumber: 9
+        },
+        void 0
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "button",
         {
           onClick: stepNext,
@@ -55563,10 +56598,22 @@ const EventControllerPanel = ({
             transition: "all 0.2s"
           },
           title: "Step Forward",
-          children: /* @__PURE__ */ jsx(SkipForward, { size: 16 })
-        }
+          children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(SkipForward, { size: 16 }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+            lineNumber: 413,
+            columnNumber: 11
+          }, void 0)
+        },
+        void 0,
+        false,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+          lineNumber: 394,
+          columnNumber: 9
+        },
+        void 0
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "button",
         {
           onClick: handleStop,
@@ -55584,29 +56631,57 @@ const EventControllerPanel = ({
             transition: "all 0.2s"
           },
           title: "Reset",
-          children: /* @__PURE__ */ jsx(RotateCcw, { size: 16 })
-        }
+          children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(RotateCcw, { size: 16 }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+            lineNumber: 434,
+            columnNumber: 11
+          }, void 0)
+        },
+        void 0,
+        false,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+          lineNumber: 417,
+          columnNumber: 9
+        },
+        void 0
       )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { padding: `0 ${theme.space[1]}` }, children: [
-      /* @__PURE__ */ jsxs("div", { style: {
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+      lineNumber: 315,
+      columnNumber: 7
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { padding: `0 ${theme.space[1]}` }, children: [
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
         display: "flex",
         justifyContent: "space-between",
         marginBottom: theme.space[1],
         fontSize: theme.fontSizes[0],
         color: theme.colors.textMuted
       }, children: [
-        /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: [
           currentIndex + 1,
           " / ",
           events.length
-        ] }),
-        /* @__PURE__ */ jsxs("span", { children: [
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+          lineNumber: 447,
+          columnNumber: 11
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: [
           speed,
           "x"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
+        ] }, void 0, true, {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+          lineNumber: 448,
+          columnNumber: 11
+        }, void 0)
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+        lineNumber: 440,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "input",
         {
           type: "range",
@@ -55620,14 +56695,26 @@ const EventControllerPanel = ({
             cursor: "pointer",
             accentColor: theme.colors.primary
           }
-        }
+        },
+        void 0,
+        false,
+        {
+          fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+          lineNumber: 450,
+          columnNumber: 9
+        },
+        void 0
       )
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: {
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+      lineNumber: 439,
+      columnNumber: 7
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       display: "flex",
       justifyContent: "center",
       gap: theme.space[1]
-    }, children: SPEED_OPTIONS.map((s) => /* @__PURE__ */ jsxs(
+    }, children: SPEED_OPTIONS.map((s) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
       "button",
       {
         onClick: () => setSpeed(s),
@@ -55647,9 +56734,20 @@ const EventControllerPanel = ({
           "x"
         ]
       },
-      s
-    )) }),
-    /* @__PURE__ */ jsxs("div", { style: {
+      s,
+      true,
+      {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+        lineNumber: 472,
+        columnNumber: 11
+      },
+      void 0
+    )) }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+      lineNumber: 466,
+      columnNumber: 7
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: theme.space[2],
@@ -55658,24 +56756,40 @@ const EventControllerPanel = ({
       borderRadius: theme.radii[1],
       border: `1px solid ${theme.colors.border}`
     }, children: [
-      /* @__PURE__ */ jsx("div", { style: {
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
         width: "8px",
         height: "8px",
         borderRadius: "50%",
         backgroundColor: getStatusColor()
-      } }),
-      /* @__PURE__ */ jsx("span", { style: {
+      } }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+        lineNumber: 502,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: {
         textTransform: "capitalize",
         fontSize: theme.fontSizes[1],
         color: theme.colors.text
-      }, children: status }),
-      status === "playing" && /* @__PURE__ */ jsxs("span", { style: { color: theme.colors.textMuted, fontSize: theme.fontSizes[0] }, children: [
+      }, children: status }, void 0, false, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+        lineNumber: 508,
+        columnNumber: 9
+      }, void 0),
+      status === "playing" && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: { color: theme.colors.textMuted, fontSize: theme.fontSizes[0] }, children: [
         "@ ",
         speed,
         "x speed"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: {
+      ] }, void 0, true, {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+        lineNumber: 516,
+        columnNumber: 11
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+      lineNumber: 493,
+      columnNumber: 7
+    }, void 0),
+    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       flex: 1,
       overflow: "auto",
       backgroundColor: theme.colors.backgroundSecondary,
@@ -55683,12 +56797,16 @@ const EventControllerPanel = ({
       border: `1px solid ${theme.colors.border}`,
       minHeight: 0
       // Allow shrinking in flex container
-    }, children: /* @__PURE__ */ jsx("div", { style: { padding: theme.space[2] }, children: events.length === 0 ? /* @__PURE__ */ jsx("div", { style: {
+    }, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: { padding: theme.space[2] }, children: events.length === 0 ? /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
       color: theme.colors.textMuted,
       textAlign: "center",
       padding: theme.space[5],
       fontSize: theme.fontSizes[1]
-    }, children: "No events loaded" }) : events.map((event, index2) => /* @__PURE__ */ jsxs(
+    }, children: "No events loaded" }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+      lineNumber: 533,
+      columnNumber: 13
+    }, void 0) : events.map((event, index2) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
       "div",
       {
         onClick: () => handleSeek(index2),
@@ -55702,34 +56820,69 @@ const EventControllerPanel = ({
           transition: "background-color 0.15s"
         },
         children: [
-          /* @__PURE__ */ jsxs("div", { style: {
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center"
           }, children: [
-            /* @__PURE__ */ jsx("span", { style: {
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: {
               fontFamily: theme.fonts.monospace,
               fontSize: theme.fontSizes[0],
               color: index2 === currentIndex ? "white" : index2 <= currentIndex ? theme.colors.primary : theme.colors.textMuted
-            }, children: getEventTypeDisplay(event) }),
-            /* @__PURE__ */ jsxs("span", { style: {
+            }, children: getEventTypeDisplay(event) }, void 0, false, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+              lineNumber: 567,
+              columnNumber: 19
+            }, void 0),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { style: {
               fontSize: theme.fontSizes[0],
               color: index2 === currentIndex ? "rgba(255,255,255,0.7)" : theme.colors.textMuted
             }, children: [
               "#",
               index2 + 1
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { style: {
+            ] }, void 0, true, {
+              fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+              lineNumber: 578,
+              columnNumber: 19
+            }, void 0)
+          ] }, void 0, true, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+            lineNumber: 562,
+            columnNumber: 17
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { style: {
             fontSize: theme.fontSizes[0],
             color: index2 === currentIndex ? "rgba(255,255,255,0.8)" : index2 <= currentIndex ? theme.colors.textSecondary : theme.colors.textMuted,
             marginTop: theme.space[1]
-          }, children: getEventTargetDisplay(event) })
+          }, children: getEventTargetDisplay(event) }, void 0, false, {
+            fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+            lineNumber: 585,
+            columnNumber: 17
+          }, void 0)
         ]
       },
-      event.id
-    )) }) })
-  ] });
+      event.id,
+      true,
+      {
+        fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+        lineNumber: 543,
+        columnNumber: 15
+      },
+      void 0
+    )) }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+      lineNumber: 531,
+      columnNumber: 9
+    }, void 0) }, void 0, false, {
+      fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+      lineNumber: 523,
+      columnNumber: 7
+    }, void 0)
+  ] }, void 0, true, {
+    fileName: "/Users/griever/Developer/visual-validation/industry-themed-principal-view-panels/src/panels/EventControllerPanel.tsx",
+    lineNumber: 279,
+    columnNumber: 5
+  }, void 0);
 };
 EventControllerPanel.displayName = "EventControllerPanel";
 const panels = [