@industry-theme/principal-view-panels 0.3.0 → 0.3.2

package/dist/panels.bundle.js

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n}\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow__edges {\n  position: absolute;\n}\n.react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.center {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 4px;\n  height: 4px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  transform: translate(-50%, -50%);\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}"));
+      elementStyle.appendChild(document.createTextNode('/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n}\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow__edges {\n  position: absolute;\n}\n.react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.center {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 4px;\n  height: 4px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  transform: translate(-50%, -50%);\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n.animated-resizable-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.hybrid-panel{overflow:auto;height:100%;background-color:var(--panel-background)}.resize-handle{width:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:col-resize;position:relative;transition:background-color .2s,opacity .3s,width .3s}.resize-handle.collapsed{opacity:0;pointer-events:none}.resize-handle:hover{background-color:var(--panel-handle-hover)}.resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.collapse-toggle{position:absolute;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.animated-vertical-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.vertical-panel{overflow:auto;width:100%;background-color:var(--panel-background)}.panel-content-wrapper{width:100%;height:100%;overflow:auto}.vertical-resize-handle{height:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .2s,opacity .3s,height .3s}.vertical-resize-handle.collapsed{opacity:0;pointer-events:none}.vertical-resize-handle:hover{background-color:var(--panel-handle-hover)}.vertical-resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.collapse-toggle{background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.collapse-toggle:hover:not(:disabled){background-color:var(--panel-button-hover);box-shadow:0 2px 6px #00000026}.collapse-toggle:active:not(:disabled){opacity:.8}.three-panel-item.collapsible-panel.collapsed{flex:0!important;min-width:0!important}.panel-content-wrapper{flex:1;overflow:auto;will-change:opacity;box-sizing:border-box}.resize-handle.collapsed{width:0!important}.tab-group{display:flex;height:100%;width:100%;overflow:hidden}.tab-group.tab-position-top,.tab-group.tab-position-bottom{flex-direction:column}.tab-group.tab-position-left,.tab-group.tab-position-right{flex-direction:row}.tab-list{display:flex;background:var(--tab-list-bg, #f5f5f5);border-bottom:1px solid var(--tab-border, #ddd);gap:0;padding:0;flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.tab-list::-webkit-scrollbar{display:none}.tab-position-top .tab-list,.tab-position-bottom .tab-list{width:100%}.tab-list.centered{justify-content:flex-start}@media (min-width:0){.tab-list.centered{justify-content:center}.tab-list.centered:has(.tab-button:nth-child(n)){justify-content:flex-start}}.tab-position-bottom .tab-list{border-bottom:none;border-top:none}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:none;width:auto;min-width:120px}.tab-position-top .tab-button,.tab-position-bottom .tab-button{flex:1 1 0;min-width:40px;max-width:100%}.tab-button{background:var(--tab-bg, #fff);border:1px solid var(--tab-border, #ddd);border-radius:0;padding:8px 16px;cursor:pointer;font-size:14px;font-weight:500;color:var(--tab-text, #333);transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;height:39px;line-height:1;box-sizing:border-box;container-type:inline-size}.tab-position-top .tab-button{border-bottom:none;border-top:none;border-left:none}.tab-position-top .tab-button:last-child{border-right:none}.tab-position-bottom .tab-button{border-top:none;border-bottom:none;border-left:none}.tab-position-bottom .tab-button:last-child{border-right:none}.tab-position-left .tab-button{border-right:none;border-bottom:none}.tab-position-left .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-position-right .tab-button{border-left:none;border-bottom:none}.tab-position-right .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-label{display:none}@container (min-width: 250px){.tab-label{display:inline}.tab-icon{display:none}}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9)}.tab-button.active{background:var(--tab-bg-active, #007bff);color:var(--tab-text-active, #fff);border-color:var(--tab-border-active, #007bff)}.tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:2px}.tab-content{flex:1;overflow:auto;background:var(--tab-content-bg, #fff)}.tab-group-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tab-empty-text, #999);font-style:italic}.three-panel-layout{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item{display:flex;flex-direction:column;overflow:hidden;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item[data-edit-mode=true]{background-color:var(--panel-accent-bg);border-radius:12px}.three-panel-item.collapsible-panel{will-change:flex}.three-panel-item.collapsible-panel.animating{pointer-events:none}.three-panel-item.collapsible-panel.collapsed{flex:0!important;min-width:0!important;max-width:0!important;width:0!important;overflow:hidden!important;visibility:hidden}.three-panel-item.middle-panel{flex:1;min-width:200px}.panel-content-wrapper{flex:1;overflow-x:hidden;overflow-y:auto;will-change:opacity;box-sizing:border-box}.resize-handle{position:relative;display:flex;align-items:center;justify-content:center;width:1px!important;cursor:col-resize;background:var(--panel-border);overflow:visible!important}.resize-handle:before{content:"";position:absolute;top:0;right:-10px;bottom:0;left:-10px;background:transparent}.resize-handle:after{content:"";position:absolute;top:0;right:-10px;bottom:0;left:-10px;background:var(--panel-handle);opacity:0;transition:opacity .2s ease;z-index:-1}.resize-handle:hover:after{opacity:1}.resize-handle:hover{background:var(--panel-handle-hover)}.resize-handle:active:after{opacity:1;background:var(--panel-handle-active)}.resize-handle:active{background:var(--panel-handle-active)}.resize-handle.collapsed{width:0!important;visibility:hidden}.resize-handle.left-handle.collapsed{margin-right:-1px}.resize-handle.right-handle.collapsed{margin-left:-1px}.handle-bar{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}.collapse-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:40px;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--panel-button-icon);transition:all .2s ease;z-index:10;padding:0;line-height:1}.collapse-toggle:hover{background:var(--panel-button-hover)}.collapse-toggle:active{opacity:.8}.collapse-toggle:disabled{opacity:.5;cursor:not-allowed}@media (max-width:768px){.resize-handle:before{left:-8px;right:-8px}.resize-handle:after{left:-8px;right:-8px}.collapse-toggle{width:24px;height:48px;font-size:14px}}.snap-carousel-container{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:var(--snap-carousel-gap, 0px);padding:0;margin:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;position:relative;left:0;transform:none;container-type:inline-size;-ms-overflow-style:none;scrollbar-width:none}.snap-carousel-container::-webkit-scrollbar{display:none}.snap-carousel-panel{flex:0 0 auto;scroll-snap-align:start;scroll-snap-stop:always;width:var(--snap-carousel-panel-width, 33.33%);height:100%;box-sizing:border-box;overflow:hidden}@media (max-width:540px){.snap-carousel-panel{min-width:280px}}@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(1deg)}50%{transform:rotate(0)}75%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 8px #3b82f600}}.editable-panel-layout{position:relative;width:100%;height:100%}.editable-panel-layout.edit-mode-active{background:#0000000d}[data-slot][data-edit-mode=true]{transform:scale(.95);transform-origin:center center;cursor:grab;will-change:transform;transition:transform .3s cubic-bezier(.4,0,.2,1)}[data-slot][data-edit-mode=true]:active{cursor:grabbing}[data-slot][data-dragging=true]{cursor:grabbing!important;transform:scale(.95)!important;transition:none!important}.edit-mode-active [data-slot][data-edit-mode=true]{transform-origin:center center}.slot-with-overlay{position:relative;width:100%;height:100%}.slot-with-overlay.dragging{opacity:0;pointer-events:none}.slot-edit-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;border:none;pointer-events:auto;cursor:grab;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.slot-edit-overlay:hover{background:#3b82f608}.slot-edit-overlay:active{cursor:grabbing}.drag-indicator,.slot-position-label{display:none}.edit-mode-toggle{position:absolute;top:16px;right:16px;z-index:1000;padding:8px 16px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.edit-mode-toggle:hover{background:#f9fafb;box-shadow:0 4px 6px #0000001a}.edit-mode-toggle.active{background:#3b82f6;color:#fff;border-color:#2563eb}.edit-mode-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:998;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.edit-mode-configurator{position:relative;z-index:999;padding:20px;animation:scaleIn .3s ease}.panel-slot{position:relative;min-height:120px;border:2px dashed transparent;border-radius:12px;transition:all .3s ease;padding:12px}.panel-slot.edit-mode{border-color:#d1d5db;background:#ffffff80}.panel-slot.drag-over{border-color:#3b82f6;background:#3b82f61a;box-shadow:0 0 0 4px #3b82f61a}.panel-slot.empty{display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:14px}.draggable-panel{position:relative;padding:12px 16px;margin:8px 0;border-radius:8px;background:#fff;border:1px solid #e5e7eb;cursor:grab;transition:all .2s ease;-webkit-user-select:none;user-select:none}.draggable-panel:hover{border-color:#3b82f6;box-shadow:0 2px 8px #0000001a}.draggable-panel.dragging{opacity:.5;cursor:grabbing}.draggable-panel.edit-mode{animation:wiggle .4s ease-in-out infinite;transform-origin:center}.draggable-panel.edit-mode:nth-child(odd){animation-delay:.1s}.draggable-panel.edit-mode:nth-child(2n){animation-delay:.2s}.remove-button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid white;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:700;opacity:0;transform:scale(0);transition:all .2s ease;z-index:10;box-shadow:0 2px 4px #0003}.draggable-panel.edit-mode .remove-button{opacity:1;transform:scale(1);animation:pulse 2s infinite}.remove-button:hover{background:#dc2626;transform:scale(1.1)}.panel-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#374151}.panel-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.drag-handle{display:none;width:24px;height:24px;opacity:.4;cursor:grab}.edit-mode .drag-handle{display:flex;align-items:center;justify-content:center}.drag-overlay{padding:12px 16px;border-radius:8px;background:#fff;border:2px solid #3b82f6;box-shadow:0 8px 16px #0003;cursor:grabbing;opacity:.9}.panel-group{border:2px solid #e5e7eb;border-radius:12px;padding:8px;background:#fff}.panel-group.edit-mode{animation:wiggle .5s ease-in-out infinite;border-color:#3b82f6}.panel-group-header{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #e5e7eb;margin-bottom:8px}.panel-group-title{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase}.available-panels{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 6px #0000001a}.available-panels-title{font-size:16px;font-weight:600;color:#374151;margin-bottom:12px}.available-panels-list{display:flex;flex-direction:column;gap:8px}.slot-label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}.slot-indicator{width:8px;height:8px;border-radius:50%;background:#d1d5db}.slot-indicator.active{background:#3b82f6}.action-buttons{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:1001;display:flex;gap:12px;padding:12px 24px;background:#fff;border-radius:12px;box-shadow:0 8px 16px #00000026;animation:scaleIn .3s ease}.action-button{padding:10px 20px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.action-button:hover{background:#f9fafb}.action-button.primary{background:#3b82f6;color:#fff;border-color:#2563eb}.action-button.primary:hover{background:#2563eb}@media (max-width:768px){.edit-mode-toggle{top:8px;right:8px;padding:6px 12px;font-size:12px}.action-buttons{bottom:16px;padding:10px 16px}.action-button{padding:8px 16px;font-size:13px}}@media (prefers-color-scheme:dark){.edit-mode-toggle{background:#1f2937;color:#f9fafb;border-color:#374151}.edit-mode-toggle:hover{background:#374151}.draggable-panel{background:#1f2937;color:#f9fafb;border-color:#374151}.available-panels{background:#1f2937}.panel-label{color:#f9fafb}.action-buttons{background:#1f2937}.action-button{background:#1f2937;color:#f9fafb;border-color:#374151}.action-button:hover{background:#374151}}.panel-configurator{display:flex;flex-direction:column;gap:2rem;padding:1.5rem;background:var(--configurator-bg);border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.configurator-section{display:flex;flex-direction:column;gap:1rem}.section-title{margin:0;font-size:.875rem;font-weight:600;color:var(--configurator-title);text-transform:uppercase;letter-spacing:.05em;text-align:center}.slots-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:75%;margin:0 auto;align-items:start}.slot{position:relative;aspect-ratio:1 / 1.3;width:100%;padding:2.5rem 1rem 1rem;background:var(--slot-bg);border:2px solid var(--slot-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;box-sizing:border-box}.slot:hover{border-color:var(--slot-border-hover);box-shadow:0 2px 4px #0000000d}.slot.selected{border-color:var(--slot-border-selected);background:var(--slot-bg-selected);box-shadow:0 0 0 3px var(--slot-bg-selected)}.slot.empty{border-style:dashed}.slot-label{font-size:.75rem;font-weight:600;color:var(--slot-label);text-transform:capitalize;text-align:left}.slot[data-position=middle] .slot-label,.slot[data-position=middle] .slot-panel-name,.slot[data-position=middle] .slot-empty-state{text-align:center}.slot[data-position=right] .slot-label,.slot[data-position=right] .slot-panel-name,.slot[data-position=right] .slot-empty-state{text-align:right}.slot-content{flex:1;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;min-height:0}.slot-panel-name{font-weight:600;color:var(--slot-content-text);font-size:.875rem}.slot-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--slot-preview-bg);border-radius:4px;border:1px solid var(--slot-preview-border);font-size:.75rem;color:var(--slot-preview-text)}.slot-empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--slot-empty-text);font-size:.875rem;font-style:italic;min-height:0}.slot-clear-btn{position:absolute;top:.25rem;right:.25rem;width:24px;height:24px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:4px;cursor:pointer;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.slot:hover .slot-clear-btn{opacity:1}.slot-clear-btn:hover{background:var(--clear-btn-hover);transform:scale(1.1)}.available-panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;width:75%;margin:0 auto}.available-panel{min-height:80px;padding:.75rem;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem}.available-panel:hover{border-color:var(--panel-border-hover);box-shadow:0 2px 4px #0000000d;transform:translateY(-2px)}.available-panel.selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 3px var(--panel-bg-selected)}.available-panel.in-use{opacity:.5;border-style:dashed}.available-panel.in-use:hover{transform:translateY(0);opacity:.6}.panel-label{font-weight:600;color:var(--panel-label-text);font-size:.875rem}.panel-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--panel-preview-bg);border-radius:4px;font-size:.75rem;color:var(--panel-preview-text)}.selection-hint{padding:.75rem 1rem;background:var(--hint-bg);border:1px solid var(--hint-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.available-panel.multi-selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 2px var(--panel-bg-selected)}.multi-select-badge{margin-left:.5rem;padding:.25rem .5rem;background:var(--panel-border-selected);color:#fff;font-size:.75rem;border-radius:12px;font-weight:400}.multi-select-hint{background:var(--panel-bg-selected);border-color:var(--panel-border-selected)}.slot.tab-group{border-style:solid}.group-content{position:relative;overflow-y:auto;min-height:0}.group-badge{font-size:.75rem;font-weight:600;color:var(--panel-border-selected);margin-bottom:.5rem}.group-panels{display:flex;flex-direction:column;gap:.25rem;flex:1;overflow-y:auto;min-height:0}.group-panel-label{font-size:.75rem;color:var(--slot-content-text);padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.slot-panel-label{font-weight:600;color:var(--slot-content-text);font-size:.875rem;text-align:center}.create-tab-group-btn{margin-top:.5rem;padding:.5rem .75rem;background:var(--panel-border-selected);color:#fff;border:none;border-radius:4px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease}.create-tab-group-btn:hover{transform:scale(1.05);box-shadow:0 2px 4px #0000001a}.tab-mode-toggle{position:absolute;top:.5rem;left:.5rem;padding:.25rem .5rem;background:var(--slot-bg);border:1px solid var(--slot-border);border-radius:4px;font-size:.85rem;cursor:pointer;transition:all .2s ease;z-index:10;opacity:.7;color:var(--slot-content-text)}.tab-mode-toggle svg{display:block}.tab-mode-toggle:hover{opacity:1;border-color:var(--slot-border-hover);background:var(--slot-preview-bg)}.tab-mode-toggle.active{opacity:1;background:var(--panel-border-selected);color:#fff;border-color:var(--panel-border-selected)}.tab-config-controls{margin-bottom:.5rem}.tab-config-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--slot-label)}.tab-config-label select{padding:.25rem .5rem;border:1px solid var(--slot-border);border-radius:3px;background:var(--slot-bg);color:var(--slot-content-text);font-size:.7rem;cursor:pointer}.group-panel-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.group-panel-label{flex:1;font-size:.75rem;color:var(--slot-content-text);display:flex;align-items:center;gap:.25rem}.default-badge{color:var(--panel-border-selected);font-size:.9em}.remove-from-group-btn{width:18px;height:18px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:3px;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s ease}.remove-from-group-btn:hover{opacity:1;transform:scale(1.1)}.usage-hint{padding:.75rem 1rem;background:var(--slot-preview-bg);border:1px solid var(--slot-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}'));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -11,7 +11,8 @@
   }
 })();
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React2, { createContext, useContext, useState, memo, useCallback, useMemo, forwardRef, useLayoutEffect, useEffect, useRef, createElement, useImperativeHandle } from "react";
+import * as React2 from "react";
+import React2__default, { createContext, useContext, useState, memo, useCallback, useMemo, forwardRef, useLayoutEffect, useEffect, useRef, createElement, useImperativeHandle } from "react";
 import { createPortal } from "react-dom";
 import { PackageLayerModule } from "@principal-ai/codebase-composition";
 var ThemeContext$1;
@@ -1561,21 +1562,21 @@ function tanh(x) {
 }
 const interpolateZoom = (function zoomRho(rho, rho2, rho4) {
   function zoom2(p0, p1) {
-    var ux0 = p0[0], uy0 = p0[1], w0 = p0[2], ux1 = p1[0], uy1 = p1[1], w1 = p1[2], dx = ux1 - ux0, dy = uy1 - uy0, d2 = dx * dx + dy * dy, i, S;
+    var ux0 = p0[0], uy0 = p0[1], w0 = p0[2], ux1 = p1[0], uy1 = p1[1], w1 = p1[2], dx = ux1 - ux0, dy = uy1 - uy0, d2 = dx * dx + dy * dy, i, S2;
     if (d2 < epsilon2) {
-      S = Math.log(w1 / w0) / rho;
+      S2 = Math.log(w1 / w0) / rho;
       i = function(t) {
         return [
           ux0 + t * dx,
           uy0 + t * dy,
-          w0 * Math.exp(rho * t * S)
+          w0 * Math.exp(rho * t * S2)
         ];
       };
     } else {
       var d1 = Math.sqrt(d2), b0 = (w1 * w1 - w0 * w0 + rho4 * d2) / (2 * w0 * rho2 * d1), b1 = (w1 * w1 - w0 * w0 - rho4 * d2) / (2 * w1 * rho2 * d1), r0 = Math.log(Math.sqrt(b0 * b0 + 1) - b0), r1 = Math.log(Math.sqrt(b1 * b1 + 1) - b1);
-      S = (r1 - r0) / rho;
+      S2 = (r1 - r0) / rho;
       i = function(t) {
-        var s = t * S, coshr0 = cosh(r0), u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s + r0) - sinh(r0));
+        var s = t * S2, coshr0 = cosh(r0), u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s + r0) - sinh(r0));
         return [
           ux0 + u * dx,
           uy0 + u * dy,
@@ -1583,7 +1584,7 @@ const interpolateZoom = (function zoomRho(rho, rho2, rho4) {
         ];
       };
     }
-    i.duration = S * 1e3 * rho / Math.SQRT2;
+    i.duration = S2 * 1e3 * rho / Math.SQRT2;
     return i;
   }
   zoom2.rho = function(_) {
@@ -3094,10 +3095,10 @@ function isInputDOMNode(event) {
   const isInput = inputTags.includes(target == null ? void 0 : target.nodeName) || (target == null ? void 0 : target.hasAttribute("contenteditable"));
   return isInput || !!(target == null ? void 0 : target.closest(".nokey"));
 }
-const isMouseEvent = (event) => "clientX" in event;
+const isMouseEvent$1 = (event) => "clientX" in event;
 const getEventPosition = (event, bounds) => {
   var _a, _b;
-  const isMouse = isMouseEvent(event);
+  const isMouse = isMouseEvent$1(event);
   const evtX = isMouse ? event.clientX : (_a = event.touches) == null ? void 0 : _a[0].clientX;
   const evtY = isMouse ? event.clientY : (_b = event.touches) == null ? void 0 : _b[0].clientY;
   return {
@@ -3562,14 +3563,14 @@ function updateChildPosition(node, nodeLookup, parentLookup, options) {
     parentLookup.set(parentId, /* @__PURE__ */ new Map([[node.id, node]]));
   }
   const selectedNodeZ = (options == null ? void 0 : options.elevateNodesOnSelect) ? 1e3 : 0;
-  const { x, y, z } = calculateChildXYZ(node, parentNode, _options.nodeOrigin, selectedNodeZ);
+  const { x, y, z: z2 } = calculateChildXYZ(node, parentNode, _options.nodeOrigin, selectedNodeZ);
   const currPosition = node.internals.positionAbsolute;
   const positionChanged = x !== currPosition.x || y !== currPosition.y;
-  if (positionChanged || z !== node.internals.z) {
+  if (positionChanged || z2 !== node.internals.z) {
     node.internals = {
       ...node.internals,
       positionAbsolute: positionChanged ? { x, y } : currPosition,
-      z
+      z: z2
     };
   }
 }
@@ -4988,7 +4989,7 @@ var hasRequiredUseSyncExternalStoreShim_production;
 function requireUseSyncExternalStoreShim_production() {
   if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
   hasRequiredUseSyncExternalStoreShim_production = 1;
-  var React = React2;
+  var React = React2__default;
   function is(x, y) {
     return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
   }
@@ -5054,7 +5055,7 @@ var hasRequiredWithSelector_production;
 function requireWithSelector_production() {
   if (hasRequiredWithSelector_production) return withSelector_production;
   hasRequiredWithSelector_production = 1;
-  var React = React2, shim2 = requireShim();
+  var React = React2__default, shim2 = requireShim();
   function is(x, y) {
     return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
   }
@@ -5154,7 +5155,7 @@ const createStoreImpl = (createState) => {
   return api;
 };
 const createStore$1 = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
-const { useDebugValue } = React2;
+const { useDebugValue } = React2__default;
 const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
 const identity = (arg) => arg;
 function useStoreWithEqualityFn(api, selector2 = identity, equalityFn) {
@@ -5256,7 +5257,7 @@ function A11yDescriptions({ rfId, disableKeyboardA11y }) {
   return jsxs(Fragment, { children: [jsxs("div", { id: `${ARIA_NODE_DESC_KEY}-${rfId}`, style, children: ["Press enter or space to select a node.", !disableKeyboardA11y && "You can then use the arrow keys to move the node around.", " Press delete to remove it and escape to cancel.", " "] }), jsx("div", { id: `${ARIA_EDGE_DESC_KEY}-${rfId}`, style, children: "Press enter or space to select an edge. You can then press delete to remove it or escape to cancel." }), !disableKeyboardA11y && jsx(AriaLiveMessage, { rfId })] });
 }
 const selector$o = (s) => s.userSelectionActive ? "none" : "all";
-function Panel({ position = "top-left", children: children2, className, style: style2, ...rest }) {
+function Panel$1({ position = "top-left", children: children2, className, style: style2, ...rest }) {
   const pointerEvents = useStore(selector$o);
   const positionClasses = `${position}`.split("-");
   return jsx("div", { className: cc(["react-flow__panel", className, ...positionClasses]), style: { ...style2, pointerEvents }, ...rest, children: children2 });
@@ -5265,7 +5266,7 @@ function Attribution({ proOptions, position = "bottom-right" }) {
   if (proOptions == null ? void 0 : proOptions.hideAttribution) {
     return null;
   }
-  return jsx(Panel, { position, className: "react-flow__attribution", "data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev", children: jsx("a", { href: "https://reactflow.dev", target: "_blank", rel: "noopener noreferrer", "aria-label": "React Flow attribution", children: "React Flow" }) });
+  return jsx(Panel$1, { position, className: "react-flow__attribution", "data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev", children: jsx("a", { href: "https://reactflow.dev", target: "_blank", rel: "noopener noreferrer", "aria-label": "React Flow attribution", children: "React Flow" }) });
 }
 const selector$n = (s) => {
   const selectedNodes = [];
@@ -5283,12 +5284,12 @@ const selector$n = (s) => {
   return { selectedNodes, selectedEdges };
 };
 const selectId = (obj) => obj.id;
-function areEqual(a, b) {
+function areEqual$1(a, b) {
   return shallow$1(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) && shallow$1(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId));
 }
 function SelectionListenerInner({ onSelectionChange }) {
   const store = useStoreApi();
-  const { selectedNodes, selectedEdges } = useStore(selector$n, areEqual);
+  const { selectedNodes, selectedEdges } = useStore(selector$n, areEqual$1);
   useEffect(() => {
     const params = { nodes: selectedNodes, edges: selectedEdges };
     onSelectionChange == null ? void 0 : onSelectionChange(params);
@@ -5757,11 +5758,11 @@ const isEdge = (element) => isEdgeBase(element);
 function fixedForwardRef(render) {
   return forwardRef(render);
 }
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useQueue(runQueue) {
   const [shouldFlush, setShouldFlush] = useState(false);
   const [queue] = useState(() => createQueue(() => setShouldFlush(true)));
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     if (!shouldFlush) {
       queue.reset();
       return;
@@ -6439,7 +6440,7 @@ function HandleComponent({ type: type2 = "source", position = Position.Top, isVa
     if (!nodeId) {
       return;
     }
-    const isMouseTriggered = isMouseEvent(event.nativeEvent);
+    const isMouseTriggered = isMouseEvent$1(event.nativeEvent);
     if (isConnectableStart && (isMouseTriggered && event.button === 0 || !isMouseTriggered)) {
       const currentStore = store.getState();
       XYHandle.onPointerDown(event.nativeEvent, {
@@ -7876,7 +7877,7 @@ function ControlsComponent({ style: style2, showZoom = true, showFitView = true,
     onInteractiveChange == null ? void 0 : onInteractiveChange(!isInteractive);
   };
   const orientationClass = orientation === "horizontal" ? "horizontal" : "vertical";
-  return jsxs(Panel, { className: cc(["react-flow__controls", orientationClass, className]), position, style: style2, "data-testid": "rf__controls", "aria-label": ariaLabel, children: [showZoom && jsxs(Fragment, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] }), showFitView && jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) }), showInteractive && jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) }), children2] });
+  return jsxs(Panel$1, { className: cc(["react-flow__controls", orientationClass, className]), position, style: style2, "data-testid": "rf__controls", "aria-label": ariaLabel, children: [showZoom && jsxs(Fragment, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] }), showFitView && jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) }), showInteractive && jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) }), children2] });
 }
 ControlsComponent.displayName = "Controls";
 const Controls = memo(ControlsComponent);
@@ -8034,7 +8035,7 @@ function MiniMapComponent({
     const node = store.getState().nodeLookup.get(nodeId);
     onNodeClick(event, node);
   }, []) : void 0;
-  return jsx(Panel, { position, style: {
+  return jsx(Panel$1, { position, style: {
     ...style2,
     "--xy-minimap-background-color-props": typeof bgColor === "string" ? bgColor : void 0,
     "--xy-minimap-mask-background-color-props": typeof maskColor === "string" ? maskColor : void 0,
@@ -8333,7 +8334,7 @@ class CanvasConverter {
    * Convert Extended Canvas to internal NodeState/EdgeState format
    */
   static canvasToGraph(canvas) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e2;
     const nodes = [];
     const edges = [];
     const now2 = Date.now();
@@ -8404,7 +8405,7 @@ class CanvasConverter {
     if (canvas.edges) {
       for (const edge of canvas.edges) {
         const pv = edge.pv;
-        const edgeTypeDef = (pv == null ? void 0 : pv.edgeType) ? (_e = (_d = canvas.pv) == null ? void 0 : _d.edgeTypes) == null ? void 0 : _e[pv.edgeType] : void 0;
+        const edgeTypeDef = (pv == null ? void 0 : pv.edgeType) ? (_e2 = (_d = canvas.pv) == null ? void 0 : _d.edgeTypes) == null ? void 0 : _e2[pv.edgeType] : void 0;
         edges.push({
           id: edge.id,
           type: (pv == null ? void 0 : pv.edgeType) || "default",
@@ -8431,7 +8432,7 @@ class CanvasConverter {
    * Convert React Flow nodes/edges back to Extended Canvas format
    */
   static reactFlowToCanvas(nodes, edges, metadata) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e2;
     const canvas = {
       nodes: [],
       edges: [],
@@ -8488,7 +8489,7 @@ ${description}` : `# ${name}`;
       if ((_d = edge.style) == null ? void 0 : _d.stroke) {
         canvasEdge.color = edge.style.stroke;
       }
-      if ((_e = edge.data) == null ? void 0 : _e.edgeType) {
+      if ((_e2 = edge.data) == null ? void 0 : _e2.edgeType) {
         canvasEdge.pv = {
           edgeType: edge.data.edgeType,
           style: edge.data.style,
@@ -42989,7 +42990,7 @@ function hexToLightColor(hexColor, lightness = 0.88) {
   return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
 }
 const CustomNode = ({ data, selected: selected2, dragging }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const [isHovered, setIsHovered] = useState(false);
   const nodeRef = useRef(null);
   const nodeProps = data;
@@ -43047,7 +43048,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
   const strokeColor = nodeDataStroke || typeDefinition.stroke || fillColor;
   const color2 = fillColor;
   const displayName = nodeProps.name;
-  const icon = nodeData.icon || state && (((_d = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _d.icon) || ((_f = (_e = typeDefinition.states) == null ? void 0 : _e[state]) == null ? void 0 : _f.icon)) || typeDefinition.icon;
+  const icon = nodeData.icon || state && (((_d = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _d.icon) || ((_f = (_e2 = typeDefinition.states) == null ? void 0 : _e2[state]) == null ? void 0 : _f.icon)) || typeDefinition.icon;
   const getAnimationClass = () => {
     switch (animationType) {
       case "pulse":
@@ -43342,7 +43343,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
       ` })] });
 };
 const CustomEdge = ({ id: id2, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, markerEnd, selected: selected2 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e2;
   const edgeProps = data;
   const { typeDefinition, hasViolations, data: edgeData, edgeType, animationType, animationDuration = 1e3, animationDirection = "forward", tooltipsEnabled = true, shiftKeyPressed = false } = edgeProps || {};
   const [particlePosition, setParticlePosition] = useState(0);
@@ -43439,7 +43440,7 @@ const CustomEdge = ({ id: id2, sourceX, sourceY, targetX, targetY, sourcePositio
     filter: "blur(3px)"
   } }), animationType === "particle" && particlePos && jsx("circle", { cx: particlePos.x, cy: particlePos.y, r: width * 1.5, fill: ((_d = typeDefinition.animation) == null ? void 0 : _d.color) || color2, style: {
     filter: "drop-shadow(0 0 3px rgba(0,0,0,0.3))"
-  } }), !animationType && typeDefinition.style === "animated" && jsx("path", { d: edgePath, fill: "none", stroke: ((_e = typeDefinition.animation) == null ? void 0 : _e.color) || color2, strokeWidth: width, strokeDasharray: "5 5", className: "edge-flow-forward", style: {
+  } }), !animationType && typeDefinition.style === "animated" && jsx("path", { d: edgePath, fill: "none", stroke: ((_e2 = typeDefinition.animation) == null ? void 0 : _e2.color) || color2, strokeWidth: width, strokeDasharray: "5 5", className: "edge-flow-forward", style: {
     animationDuration: "500ms"
   } }), labelText && jsx(EdgeLabelRenderer, { children: jsx("div", { style: {
     position: "absolute",
@@ -43766,7 +43767,7 @@ const COMMON_ICONS = [
   "GitPullRequest"
 ];
 const NodeInfoPanel = ({ node, typeDefinition, availableNodeTypes, onClose, onDelete, onUpdate, onSourceClick }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j;
   const { theme } = useTheme();
   const nodeColor = ((_a = node.data) == null ? void 0 : _a.color) || (typeDefinition == null ? void 0 : typeDefinition.color) || theme.colors.primary;
   const canEdit = Boolean(onUpdate);
@@ -43805,7 +43806,7 @@ const NodeInfoPanel = ({ node, typeDefinition, availableNodeTypes, onClose, onDe
   ];
   const otelInfo = (_d = node.data) == null ? void 0 : _d.otel;
   const nodeDataEntries = node.data ? Object.entries(node.data).filter(([key]) => !internalFields.includes(key)) : [];
-  const sources = ((_e = node.data) == null ? void 0 : _e.sources) || [];
+  const sources = ((_e2 = node.data) == null ? void 0 : _e2.sources) || [];
   const handleTypeChange = (newType) => {
     if (onUpdate && newType !== node.type) {
       onUpdate(node.id, { type: newType });
@@ -44074,7 +44075,7 @@ const SelectionSidebar = ({ selectedNodeIds, nodes, nodeTypeDefinitions, onClose
     alignItems: "center",
     justifyContent: "center"
   }, children: "x" })] }), jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: selectedNodes.map((node) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e2, _f, _g;
     const typeDefinition = nodeTypeDefinitions[node.type];
     const nodeColor = ((_a = node.data) == null ? void 0 : _a.color) || (typeDefinition == null ? void 0 : typeDefinition.color) || theme.colors.secondary;
     const icon = ((_b = node.data) == null ? void 0 : _b.icon) || (typeDefinition == null ? void 0 : typeDefinition.icon);
@@ -44147,7 +44148,7 @@ const SelectionSidebar = ({ selectedNodeIds, nodes, nodeTypeDefinitions, onClose
     }, children: "State" }), jsx("div", { style: {
       fontSize: "11px",
       padding: "3px 8px",
-      backgroundColor: ((_e = (_d = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _d[node.state]) == null ? void 0 : _e.color) || theme.colors.secondary,
+      backgroundColor: ((_e2 = (_d = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _d[node.state]) == null ? void 0 : _e2.color) || theme.colors.secondary,
       color: "white",
       borderRadius: "4px",
       display: "inline-block"
@@ -44887,7 +44888,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
 };
 function useCanvasToLegacy(canvas, library) {
   return useMemo(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k;
     if (!canvas)
       return null;
     const { nodes, edges } = CanvasConverter.canvasToGraph(canvas);
@@ -44969,7 +44970,7 @@ function useCanvasToLegacy(canvas, library) {
     }
     const allowedConnections = [];
     for (const edge of canvas.edges || []) {
-      const edgeType = ((_e = edge.pv) == null ? void 0 : _e.edgeType) || "default";
+      const edgeType = ((_e2 = edge.pv) == null ? void 0 : _e2.edgeType) || "default";
       if (!edgeTypes2[edgeType]) {
         edgeTypes2[edgeType] = {
           style: ((_f = edge.pv) == null ? void 0 : _f.style) || "solid",
@@ -49074,659 +49075,6 @@ function applyChangesToCanvas(canvas, changes) {
   }
   return updatedCanvas;
 }
-const TRACE_FILE_PATTERNS = [
-  // Packages monorepo pattern: packages/core/__traces__/test-run.canvas.json
-  /^packages\/([^/]+)\/__traces__\/(.+)\.canvas\.json$/,
-  // Inside .principal-views: .principal-views/__traces__/test-run.canvas.json
-  /^\.principal-views\/__traces__\/(.+)\.canvas\.json$/,
-  // Direct __traces__ folder: __traces__/test-run.canvas.json
-  /^__traces__\/(.+)\.canvas\.json$/
-];
-function getTraceNameFromFilename(filename) {
-  return filename.replace(/\.canvas\.json$/, "").split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
-}
-class TraceLoader {
-  /**
-   * Parse JSON canvas content
-   */
-  static parseTraceCanvas(content) {
-    try {
-      return JSON.parse(content);
-    } catch (error) {
-      throw new Error(`Failed to parse trace canvas JSON: ${error.message}`);
-    }
-  }
-  /**
-   * Extract metadata from a trace canvas
-   */
-  static getTraceMetadata(canvas) {
-    var _a, _b;
-    const nodes = canvas.nodes || [];
-    const spanCount = nodes.filter((n) => {
-      var _a2;
-      return ((_a2 = n.pv) == null ? void 0 : _a2.nodeType) === "span";
-    }).length;
-    const serviceNodes = nodes.filter(
-      (n) => {
-        var _a2;
-        return ((_a2 = n.pv) == null ? void 0 : _a2.nodeType) === "service" || n.type === "group";
-      }
-    );
-    const serviceCount = serviceNodes.length;
-    const serviceNames = serviceNodes.map((n) => {
-      var _a2;
-      if ((_a2 = n.pv) == null ? void 0 : _a2.name) return n.pv.name;
-      if (n.type === "group" && "label" in n) return n.label;
-      return n.id;
-    }).filter((name) => typeof name === "string");
-    let exportedAt;
-    const description = (_a = canvas.pv) == null ? void 0 : _a.description;
-    if (description) {
-      const match = description.match(/Exported at (.+)$/);
-      if (match) {
-        exportedAt = match[1];
-      }
-    }
-    return {
-      name: ((_b = canvas.pv) == null ? void 0 : _b.name) || "Untitled Trace",
-      exportedAt,
-      spanCount,
-      serviceCount,
-      serviceNames
-    };
-  }
-  /**
-   * Find all trace canvas files in the file tree
-   */
-  static findTraceFiles(files) {
-    const traceFiles = [];
-    for (const file of files) {
-      const filePath = file.relativePath || file.path || "";
-      const fileName = file.name || filePath.split("/").pop() || "";
-      for (const pattern of TRACE_FILE_PATTERNS) {
-        const match = filePath.match(pattern);
-        if (match) {
-          let id2;
-          let packageName;
-          let baseName;
-          if (pattern === TRACE_FILE_PATTERNS[0]) {
-            packageName = match[1];
-            baseName = match[2];
-            id2 = `${packageName}-${baseName}`;
-          } else if (pattern === TRACE_FILE_PATTERNS[1]) {
-            baseName = match[1];
-            id2 = `pv-${baseName}`;
-          } else {
-            baseName = match[1];
-            id2 = baseName;
-          }
-          traceFiles.push({
-            id: id2,
-            name: getTraceNameFromFilename(fileName),
-            path: filePath,
-            packageName
-          });
-          break;
-        }
-      }
-    }
-    return traceFiles.sort((a, b) => {
-      if (a.packageName && b.packageName) {
-        const pkgCompare = a.packageName.localeCompare(b.packageName);
-        if (pkgCompare !== 0) return pkgCompare;
-      } else if (a.packageName) {
-        return -1;
-      } else if (b.packageName) {
-        return 1;
-      }
-      return a.name.localeCompare(b.name);
-    });
-  }
-}
-const TraceStats = ({ metadata, theme }) => {
-  const formattedTime = metadata.exportedAt ? formatExportTime(metadata.exportedAt) : null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: theme.space[4],
-        padding: `${theme.space[2]}px ${theme.space[3]}px`,
-        fontSize: theme.fontSizes[1],
-        color: theme.colors.textMuted,
-        fontFamily: theme.fonts.body,
-        borderTop: `1px solid ${theme.colors.border}`,
-        backgroundColor: theme.colors.background,
-        flexShrink: 0
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          StatItem,
-          {
-            label: "Spans",
-            value: metadata.spanCount.toString(),
-            theme
-          }
-        ),
-        metadata.serviceCount > 0 && /* @__PURE__ */ jsx(
-          StatItem,
-          {
-            label: metadata.serviceCount === 1 ? "Service" : "Services",
-            value: metadata.serviceCount.toString(),
-            theme
-          }
-        ),
-        formattedTime && /* @__PURE__ */ jsx(StatItem, { label: "Exported", value: formattedTime, theme })
-      ]
-    }
-  );
-};
-const StatItem = ({ label, value, theme }) => {
-  var _a;
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: theme.space[1] }, children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        style: {
-          fontWeight: ((_a = theme.fontWeights) == null ? void 0 : _a.medium) || 500,
-          color: theme.colors.text
-        },
-        children: value
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { children: label })
-  ] });
-};
-function formatExportTime(isoString) {
-  try {
-    const date = new Date(isoString);
-    const now2 = /* @__PURE__ */ new Date();
-    const diff = now2.getTime() - date.getTime();
-    if (diff < 24 * 60 * 60 * 1e3) {
-      const hours = Math.floor(diff / (60 * 60 * 1e3));
-      const minutes = Math.floor(diff % (60 * 60 * 1e3) / (60 * 1e3));
-      if (hours > 0) {
-        return `${hours}h ${minutes}m ago`;
-      }
-      if (minutes > 0) {
-        return `${minutes}m ago`;
-      }
-      return "just now";
-    }
-    return date.toLocaleString(void 0, {
-      month: "short",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit"
-    });
-  } catch {
-    return isoString;
-  }
-}
-const TraceViewerPanel = ({
-  context,
-  actions,
-  events
-}) => {
-  var _a, _b, _c, _d, _e, _f;
-  const { theme } = useTheme$1();
-  const [state, setState] = useState({
-    canvas: null,
-    metadata: null,
-    loading: true,
-    error: null,
-    availableTraces: [],
-    selectedTraceId: null,
-    showTraceSelector: false
-  });
-  const contextRef = useRef(context);
-  const actionsRef = useRef(actions);
-  const eventsRef = useRef(events);
-  contextRef.current = context;
-  actionsRef.current = actions;
-  eventsRef.current = events;
-  const selectedTraceIdRef = useRef(null);
-  selectedTraceIdRef.current = state.selectedTraceId;
-  const loadTrace = useCallback(async (traceId) => {
-    setState((prev) => ({ ...prev, loading: prev.canvas === null, error: null }));
-    try {
-      const ctx = contextRef.current;
-      const acts = actionsRef.current;
-      if (!ctx.hasSlice("fileTree")) {
-        throw new Error("File tree data not available");
-      }
-      if (ctx.isSliceLoading("fileTree")) {
-        return;
-      }
-      const fileTreeSlice = ctx.getSlice("fileTree");
-      const fileTreeData = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
-      if (!(fileTreeData == null ? void 0 : fileTreeData.allFiles)) {
-        setState((prev) => ({
-          ...prev,
-          canvas: null,
-          metadata: null,
-          loading: false,
-          error: null,
-          availableTraces: [],
-          selectedTraceId: null
-        }));
-        return;
-      }
-      const availableTraces = TraceLoader.findTraceFiles(fileTreeData.allFiles);
-      if (availableTraces.length === 0) {
-        setState((prev) => ({
-          ...prev,
-          canvas: null,
-          metadata: null,
-          loading: false,
-          error: null,
-          availableTraces: [],
-          selectedTraceId: null
-        }));
-        return;
-      }
-      let selectedTrace2;
-      if (traceId) {
-        const found = availableTraces.find((t) => t.id === traceId);
-        if (!found) {
-          throw new Error(`Trace with ID '${traceId}' not found`);
-        }
-        selectedTrace2 = found;
-      } else if (selectedTraceIdRef.current) {
-        const found = availableTraces.find((t) => t.id === selectedTraceIdRef.current);
-        selectedTrace2 = found || availableTraces[0];
-      } else {
-        selectedTrace2 = availableTraces[0];
-      }
-      const readFile = acts.readFile;
-      if (!readFile) {
-        throw new Error("readFile action not available");
-      }
-      const repositoryPath = ctx.repositoryPath;
-      if (!repositoryPath) {
-        throw new Error("Repository path not available");
-      }
-      const fullPath = `${repositoryPath}/${selectedTrace2.path}`;
-      const traceContent = await readFile(fullPath);
-      if (!traceContent || typeof traceContent !== "string") {
-        throw new Error("Failed to read trace file");
-      }
-      const canvas = TraceLoader.parseTraceCanvas(traceContent);
-      const metadata = TraceLoader.getTraceMetadata(canvas);
-      setState((prev) => ({
-        ...prev,
-        canvas,
-        metadata,
-        loading: false,
-        error: null,
-        availableTraces,
-        selectedTraceId: selectedTrace2.id
-      }));
-    } catch (error) {
-      console.error("[TraceViewer] Error loading trace:", error);
-      setState((prev) => ({
-        ...prev,
-        canvas: null,
-        metadata: null,
-        loading: false,
-        error: error.message
-      }));
-    }
-  }, []);
-  const toggleTraceSelector = useCallback(() => {
-    setState((prev) => ({ ...prev, showTraceSelector: !prev.showTraceSelector }));
-  }, []);
-  const handleTraceSelect = useCallback(
-    (traceId) => {
-      setState((prev) => ({ ...prev, showTraceSelector: false }));
-      loadTrace(traceId);
-    },
-    [loadTrace]
-  );
-  const fileTreeLoading = context.hasSlice("fileTree") && context.isSliceLoading("fileTree");
-  const fileTreeLoadingRef = useRef(fileTreeLoading);
-  useEffect(() => {
-    loadTrace();
-  }, []);
-  useEffect(() => {
-    const wasLoading = fileTreeLoadingRef.current;
-    fileTreeLoadingRef.current = fileTreeLoading;
-    if (wasLoading && !fileTreeLoading) {
-      loadTrace();
-    }
-  }, [fileTreeLoading, loadTrace]);
-  useEffect(() => {
-    const unsubscribe = eventsRef.current.on("data:refresh", () => {
-      loadTrace();
-    });
-    return unsubscribe;
-  }, []);
-  useEffect(() => {
-    const unsubscribe = eventsRef.current.on("trace:load", (event) => {
-      const payload = event.payload;
-      if (payload.traceId) {
-        loadTrace(payload.traceId);
-      } else if (payload.tracePath) {
-        const pathMatch = payload.tracePath.match(
-          /(?:packages\/([^/]+)\/)?__traces__\/(.+)\.canvas\.json$/
-        );
-        if (pathMatch) {
-          const packageName = pathMatch[1];
-          const baseName = pathMatch[2];
-          const traceId = packageName ? `${packageName}-${baseName}` : baseName;
-          loadTrace(traceId);
-        }
-      }
-    });
-    return unsubscribe;
-  }, []);
-  if (state.loading) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100%",
-          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 traces..." })
-        ]
-      }
-    );
-  }
-  if (state.error) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100%",
-          color: theme.colors.textMuted,
-          fontFamily: theme.fonts.body,
-          gap: theme.space[3],
-          padding: theme.space[4]
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: { color: theme.colors.error || "#ef4444" }, children: [
-            "Error: ",
-            state.error
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => loadTrace(),
-              style: {
-                padding: `${theme.space[2]}px ${theme.space[3]}px`,
-                backgroundColor: theme.colors.primary,
-                color: "white",
-                border: "none",
-                borderRadius: ((_a = theme.radii) == null ? void 0 : _a[1]) || 4,
-                cursor: "pointer",
-                fontFamily: theme.fonts.body
-              },
-              children: "Retry"
-            }
-          )
-        ]
-      }
-    );
-  }
-  if (!state.canvas) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100%",
-          color: theme.colors.textMuted,
-          fontFamily: theme.fonts.body,
-          gap: theme.space[3],
-          padding: theme.space[4],
-          textAlign: "center"
-        },
-        children: [
-          /* @__PURE__ */ jsx(Activity, { size: 48, style: { opacity: 0.5 } }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(
-              "h3",
-              {
-                style: {
-                  margin: 0,
-                  marginBottom: theme.space[2],
-                  color: theme.colors.text,
-                  fontSize: theme.fontSizes[3]
-                },
-                children: "No Traces Found"
-              }
-            ),
-            /* @__PURE__ */ jsx("p", { style: { margin: 0, maxWidth: 400, lineHeight: 1.5 }, children: "No trace canvas files were found in this repository." }),
-            /* @__PURE__ */ jsxs(
-              "p",
-              {
-                style: {
-                  margin: 0,
-                  marginTop: theme.space[2],
-                  maxWidth: 400,
-                  lineHeight: 1.5,
-                  fontSize: theme.fontSizes[1]
-                },
-                children: [
-                  "Traces should be saved to ",
-                  /* @__PURE__ */ jsx("code", { children: "__traces__/*.canvas.json" }),
-                  " or",
-                  " ",
-                  /* @__PURE__ */ jsx("code", { children: "packages/*/__traces__/*.canvas.json" })
-                ]
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-  const selectedTrace = state.availableTraces.find(
-    (t) => t.id === state.selectedTraceId
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        height: "100%",
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        fontFamily: theme.fonts.body
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              height: 39,
-              borderBottom: `1px solid ${theme.colors.border}`,
-              backgroundColor: theme.colors.background,
-              flexShrink: 0,
-              display: "flex",
-              alignItems: "center",
-              padding: `0 ${theme.space[3]}px`,
-              boxSizing: "content-box"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                Activity,
-                {
-                  size: 18,
-                  style: { color: theme.colors.primary, marginRight: theme.space[2] }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  style: {
-                    margin: 0,
-                    fontSize: theme.fontSizes[3],
-                    fontWeight: ((_b = theme.fontWeights) == null ? void 0 : _b.medium) || 500,
-                    color: theme.colors.text,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    minWidth: 0,
-                    flex: 1
-                  },
-                  children: ((_c = state.metadata) == null ? void 0 : _c.name) || "Trace Viewer"
-                }
-              ),
-              (selectedTrace == null ? void 0 : selectedTrace.packageName) && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    marginLeft: theme.space[2],
-                    padding: `2px ${theme.space[2]}px`,
-                    fontSize: theme.fontSizes[0],
-                    color: theme.colors.textMuted,
-                    backgroundColor: theme.colors.backgroundSecondary,
-                    borderRadius: ((_d = theme.radii) == null ? void 0 : _d[1]) || 4,
-                    flexShrink: 0
-                  },
-                  children: selectedTrace.packageName
-                }
-              ),
-              state.availableTraces.length > 1 && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: toggleTraceSelector,
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: theme.space[1],
-                      padding: `${theme.space[1]}px ${theme.space[2]}px`,
-                      fontSize: theme.fontSizes[1],
-                      fontFamily: theme.fonts.body,
-                      color: theme.colors.text,
-                      backgroundColor: theme.colors.backgroundSecondary,
-                      border: `1px solid ${theme.colors.border}`,
-                      borderRadius: ((_e = theme.radii) == null ? void 0 : _e[1]) || 4,
-                      cursor: "pointer",
-                      transition: "all 0.15s"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxs("span", { children: [
-                        state.availableTraces.length,
-                        " trace",
-                        state.availableTraces.length !== 1 ? "s" : ""
-                      ] }),
-                      /* @__PURE__ */ jsx(
-                        ChevronDown,
-                        {
-                          size: 14,
-                          style: {
-                            transform: state.showTraceSelector ? "rotate(180deg)" : "rotate(0deg)",
-                            transition: "transform 0.15s"
-                          }
-                        }
-                      )
-                    ]
-                  }
-                ),
-                state.showTraceSelector && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      top: "100%",
-                      right: 0,
-                      marginTop: theme.space[1],
-                      minWidth: 250,
-                      maxHeight: 300,
-                      overflow: "auto",
-                      backgroundColor: theme.colors.background,
-                      border: `1px solid ${theme.colors.border}`,
-                      borderRadius: ((_f = theme.radii) == null ? void 0 : _f[2]) || 6,
-                      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-                      zIndex: 100
-                    },
-                    children: state.availableTraces.map((trace) => {
-                      const isSelected = trace.id === state.selectedTraceId;
-                      return /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          onClick: () => handleTraceSelect(trace.id),
-                          style: {
-                            display: "flex",
-                            flexDirection: "column",
-                            alignItems: "flex-start",
-                            gap: 2,
-                            width: "100%",
-                            padding: `${theme.space[2]}px ${theme.space[3]}px`,
-                            backgroundColor: isSelected ? `${theme.colors.primary}15` : "transparent",
-                            color: isSelected ? theme.colors.primary : theme.colors.text,
-                            border: "none",
-                            borderBottom: `1px solid ${theme.colors.border}`,
-                            cursor: "pointer",
-                            textAlign: "left",
-                            transition: "all 0.15s",
-                            fontFamily: theme.fonts.body
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                style: {
-                                  fontSize: theme.fontSizes[1],
-                                  fontWeight: isSelected ? 500 : 400
-                                },
-                                children: trace.name
-                              }
-                            ),
-                            trace.packageName && /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                style: {
-                                  fontSize: theme.fontSizes[0],
-                                  color: theme.colors.textMuted
-                                },
-                                children: trace.packageName
-                              }
-                            )
-                          ]
-                        },
-                        trace.id
-                      );
-                    })
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { style: { flex: 1, position: "relative", overflow: "hidden" }, children: /* @__PURE__ */ jsx(
-          GraphRenderer,
-          {
-            canvas: state.canvas,
-            showMinimap: false,
-            showControls: true,
-            showBackground: true,
-            editable: false
-          }
-        ) }),
-        state.metadata && /* @__PURE__ */ jsx(TraceStats, { metadata: state.metadata, theme })
-      ]
-    }
-  );
-};
 /*! js-yaml 4.1.0 https://github.com/nodeca/js-yaml @license MIT */
 function isNothing(subject) {
   return typeof subject === "undefined" || subject === null;
@@ -53900,6 +53248,28 @@ const CanvasDetailPanel = ({
   const handleViewModeChange = useCallback((mode) => {
     setState((prev) => ({ ...prev, viewMode: mode }));
   }, []);
+  const handleOpenInEditor = useCallback(() => {
+    if (!state.canvas || !state.selectedCanvasId || !canvasPathProp) {
+      console.warn("[CanvasDetailPanel] Cannot open in editor: missing canvas path prop");
+      return;
+    }
+    if (eventsRef.current) {
+      eventsRef.current.emit({
+        type: "custom",
+        source: "canvas-detail-panel",
+        timestamp: Date.now(),
+        payload: {
+          action: "selectCanvas",
+          canvasId: state.selectedCanvasId,
+          canvas: {
+            id: state.selectedCanvasId,
+            path: canvasPathProp,
+            name: state.canvasName || state.selectedCanvasId
+          }
+        }
+      });
+    }
+  }, [state.canvas, state.selectedCanvasId, state.canvasName, canvasPathProp]);
   const handleExecutionSelect = useCallback(async (executionId) => {
     try {
       const ctx = contextRef.current;
@@ -54364,6 +53734,31 @@ const CanvasDetailPanel = ({
                   children: /* @__PURE__ */ jsx(Grid3x3, { size: 14 })
                 }
               ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: handleOpenInEditor,
+                  disabled: !canvasPathProp,
+                  style: {
+                    padding: "6px 12px",
+                    background: "#2a2a2a",
+                    border: "1px solid #3a3a3a",
+                    borderRadius: "4px",
+                    color: "#fff",
+                    cursor: canvasPathProp ? "pointer" : "not-allowed",
+                    opacity: canvasPathProp ? 1 : 0.5,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    fontSize: "13px"
+                  },
+                  title: canvasPathProp ? "Open in Canvas Editor" : "Canvas path not available",
+                  children: [
+                    /* @__PURE__ */ jsx(Pencil, { size: 14 }),
+                    /* @__PURE__ */ jsx("span", { children: "Edit" })
+                  ]
+                }
+              ),
               state.canvas && !state.execution && state.availableNarratives.length === 0 && /* @__PURE__ */ jsx("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsxs(
                 "button",
                 {
@@ -54555,6 +53950,2068 @@ const CanvasDetailPanel = ({
     }
   );
 };
+const PanelGroupContext = createContext(null);
+PanelGroupContext.displayName = "PanelGroupContext";
+const DATA_ATTRIBUTES = {
+  group: "data-panel-group",
+  groupDirection: "data-panel-group-direction",
+  groupId: "data-panel-group-id",
+  panel: "data-panel",
+  panelCollapsible: "data-panel-collapsible",
+  panelId: "data-panel-id",
+  panelSize: "data-panel-size",
+  resizeHandleId: "data-panel-resize-handle-id"
+};
+const PRECISION = 10;
+const useIsomorphicLayoutEffect = useLayoutEffect;
+const useId = React2["useId".toString()];
+const wrappedUseId = typeof useId === "function" ? useId : () => null;
+let counter = 0;
+function useUniqueId(idFromParams = null) {
+  const idFromUseId = wrappedUseId();
+  const idRef = useRef(idFromParams || idFromUseId || null);
+  if (idRef.current === null) {
+    idRef.current = "" + counter++;
+  }
+  return idFromParams !== null && idFromParams !== void 0 ? idFromParams : idRef.current;
+}
+function PanelWithForwardedRef({
+  children: children2,
+  className: classNameFromProps = "",
+  collapsedSize,
+  collapsible,
+  defaultSize: defaultSize2,
+  forwardedRef,
+  id: idFromProps,
+  maxSize,
+  minSize,
+  onCollapse,
+  onExpand,
+  onResize,
+  order,
+  style: styleFromProps,
+  tagName: Type2 = "div",
+  ...rest
+}) {
+  const context = useContext(PanelGroupContext);
+  if (context === null) {
+    throw Error(`Panel components must be rendered within a PanelGroup container`);
+  }
+  const {
+    collapsePanel,
+    expandPanel,
+    getPanelSize,
+    getPanelStyle,
+    groupId,
+    isPanelCollapsed,
+    reevaluatePanelConstraints,
+    registerPanel,
+    resizePanel: resizePanel2,
+    unregisterPanel
+  } = context;
+  const panelId = useUniqueId(idFromProps);
+  const panelDataRef = useRef({
+    callbacks: {
+      onCollapse,
+      onExpand,
+      onResize
+    },
+    constraints: {
+      collapsedSize,
+      collapsible,
+      defaultSize: defaultSize2,
+      maxSize,
+      minSize
+    },
+    id: panelId,
+    idIsFromProps: idFromProps !== void 0,
+    order
+  });
+  useRef({
+    didLogMissingDefaultSizeWarning: false
+  });
+  useIsomorphicLayoutEffect(() => {
+    const {
+      callbacks,
+      constraints
+    } = panelDataRef.current;
+    const prevConstraints = {
+      ...constraints
+    };
+    panelDataRef.current.id = panelId;
+    panelDataRef.current.idIsFromProps = idFromProps !== void 0;
+    panelDataRef.current.order = order;
+    callbacks.onCollapse = onCollapse;
+    callbacks.onExpand = onExpand;
+    callbacks.onResize = onResize;
+    constraints.collapsedSize = collapsedSize;
+    constraints.collapsible = collapsible;
+    constraints.defaultSize = defaultSize2;
+    constraints.maxSize = maxSize;
+    constraints.minSize = minSize;
+    if (prevConstraints.collapsedSize !== constraints.collapsedSize || prevConstraints.collapsible !== constraints.collapsible || prevConstraints.maxSize !== constraints.maxSize || prevConstraints.minSize !== constraints.minSize) {
+      reevaluatePanelConstraints(panelDataRef.current, prevConstraints);
+    }
+  });
+  useIsomorphicLayoutEffect(() => {
+    const panelData = panelDataRef.current;
+    registerPanel(panelData);
+    return () => {
+      unregisterPanel(panelData);
+    };
+  }, [order, panelId, registerPanel, unregisterPanel]);
+  useImperativeHandle(forwardedRef, () => ({
+    collapse: () => {
+      collapsePanel(panelDataRef.current);
+    },
+    expand: (minSize2) => {
+      expandPanel(panelDataRef.current, minSize2);
+    },
+    getId() {
+      return panelId;
+    },
+    getSize() {
+      return getPanelSize(panelDataRef.current);
+    },
+    isCollapsed() {
+      return isPanelCollapsed(panelDataRef.current);
+    },
+    isExpanded() {
+      return !isPanelCollapsed(panelDataRef.current);
+    },
+    resize: (size) => {
+      resizePanel2(panelDataRef.current, size);
+    }
+  }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel2]);
+  const style2 = getPanelStyle(panelDataRef.current, defaultSize2);
+  return createElement(Type2, {
+    ...rest,
+    children: children2,
+    className: classNameFromProps,
+    id: panelId,
+    style: {
+      ...style2,
+      ...styleFromProps
+    },
+    // CSS selectors
+    [DATA_ATTRIBUTES.groupId]: groupId,
+    [DATA_ATTRIBUTES.panel]: "",
+    [DATA_ATTRIBUTES.panelCollapsible]: collapsible || void 0,
+    [DATA_ATTRIBUTES.panelId]: panelId,
+    [DATA_ATTRIBUTES.panelSize]: parseFloat("" + style2.flexGrow).toFixed(1)
+  });
+}
+const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
+  ...props,
+  forwardedRef: ref
+}));
+PanelWithForwardedRef.displayName = "Panel";
+Panel.displayName = "forwardRef(Panel)";
+function isKeyDown(event) {
+  return event.type === "keydown";
+}
+function isPointerEvent(event) {
+  return event.type.startsWith("pointer");
+}
+function isMouseEvent(event) {
+  return event.type.startsWith("mouse");
+}
+function getResizeEventCoordinates(event) {
+  if (isPointerEvent(event)) {
+    if (event.isPrimary) {
+      return {
+        x: event.clientX,
+        y: event.clientY
+      };
+    }
+  } else if (isMouseEvent(event)) {
+    return {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }
+  return {
+    x: Infinity,
+    y: Infinity
+  };
+}
+function getInputType() {
+  if (typeof matchMedia === "function") {
+    return matchMedia("(pointer:coarse)").matches ? "coarse" : "fine";
+  }
+}
+const EXCEEDED_HORIZONTAL_MIN = 1;
+const EXCEEDED_HORIZONTAL_MAX = 2;
+const EXCEEDED_VERTICAL_MIN = 4;
+const EXCEEDED_VERTICAL_MAX = 8;
+getInputType() === "coarse";
+let panelConstraintFlags = /* @__PURE__ */ new Map();
+function reportConstraintsViolation(resizeHandleId, flag) {
+  panelConstraintFlags.set(resizeHandleId, flag);
+}
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount((prevCount) => prevCount + 1), []);
+}
+function assert(expectedCondition, message) {
+  if (!expectedCondition) {
+    console.error(message);
+    throw Error(message);
+  }
+}
+function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
+  if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) {
+    return 0;
+  } else {
+    return actual > expected ? 1 : -1;
+  }
+}
+function fuzzyNumbersEqual$1(actual, expected, fractionDigits = PRECISION) {
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+}
+function fuzzyNumbersEqual(actual, expected, fractionDigits) {
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+}
+function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
+  if (actual.length !== expected.length) {
+    return false;
+  }
+  for (let index2 = 0; index2 < actual.length; index2++) {
+    const actualSize = actual[index2];
+    const expectedSize = expected[index2];
+    if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
+      return false;
+    }
+  }
+  return true;
+}
+function resizePanel({
+  panelConstraints: panelConstraintsArray,
+  panelIndex,
+  size
+}) {
+  const panelConstraints = panelConstraintsArray[panelIndex];
+  assert(panelConstraints != null, `Panel constraints not found for index ${panelIndex}`);
+  let {
+    collapsedSize = 0,
+    collapsible,
+    maxSize = 100,
+    minSize = 0
+  } = panelConstraints;
+  if (fuzzyCompareNumbers(size, minSize) < 0) {
+    if (collapsible) {
+      const halfwayPoint = (collapsedSize + minSize) / 2;
+      if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
+        size = collapsedSize;
+      } else {
+        size = minSize;
+      }
+    } else {
+      size = minSize;
+    }
+  }
+  size = Math.min(maxSize, size);
+  size = parseFloat(size.toFixed(PRECISION));
+  return size;
+}
+function adjustLayoutByDelta({
+  delta,
+  initialLayout,
+  panelConstraints: panelConstraintsArray,
+  pivotIndices,
+  prevLayout,
+  trigger
+}) {
+  if (fuzzyNumbersEqual(delta, 0)) {
+    return initialLayout;
+  }
+  const nextLayout = [...initialLayout];
+  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
+  assert(firstPivotIndex != null, "Invalid first pivot index");
+  assert(secondPivotIndex != null, "Invalid second pivot index");
+  let deltaApplied = 0;
+  {
+    if (trigger === "keyboard") {
+      {
+        const index2 = delta < 0 ? secondPivotIndex : firstPivotIndex;
+        const panelConstraints = panelConstraintsArray[index2];
+        assert(panelConstraints, `Panel constraints not found for index ${index2}`);
+        const {
+          collapsedSize = 0,
+          collapsible,
+          minSize = 0
+        } = panelConstraints;
+        if (collapsible) {
+          const prevSize = initialLayout[index2];
+          assert(prevSize != null, `Previous layout not found for panel index ${index2}`);
+          if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
+            const localDelta = minSize - prevSize;
+            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
+              delta = delta < 0 ? 0 - localDelta : localDelta;
+            }
+          }
+        }
+      }
+      {
+        const index2 = delta < 0 ? firstPivotIndex : secondPivotIndex;
+        const panelConstraints = panelConstraintsArray[index2];
+        assert(panelConstraints, `No panel constraints found for index ${index2}`);
+        const {
+          collapsedSize = 0,
+          collapsible,
+          minSize = 0
+        } = panelConstraints;
+        if (collapsible) {
+          const prevSize = initialLayout[index2];
+          assert(prevSize != null, `Previous layout not found for panel index ${index2}`);
+          if (fuzzyNumbersEqual(prevSize, minSize)) {
+            const localDelta = prevSize - collapsedSize;
+            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
+              delta = delta < 0 ? 0 - localDelta : localDelta;
+            }
+          }
+        }
+      }
+    }
+  }
+  {
+    const increment = delta < 0 ? 1 : -1;
+    let index2 = delta < 0 ? secondPivotIndex : firstPivotIndex;
+    let maxAvailableDelta = 0;
+    while (true) {
+      const prevSize = initialLayout[index2];
+      assert(prevSize != null, `Previous layout not found for panel index ${index2}`);
+      const maxSafeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index2,
+        size: 100
+      });
+      const delta2 = maxSafeSize - prevSize;
+      maxAvailableDelta += delta2;
+      index2 += increment;
+      if (index2 < 0 || index2 >= panelConstraintsArray.length) {
+        break;
+      }
+    }
+    const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
+    delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
+  }
+  {
+    const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
+    let index2 = pivotIndex;
+    while (index2 >= 0 && index2 < panelConstraintsArray.length) {
+      const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+      const prevSize = initialLayout[index2];
+      assert(prevSize != null, `Previous layout not found for panel index ${index2}`);
+      const unsafeSize = prevSize - deltaRemaining;
+      const safeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index2,
+        size: unsafeSize
+      });
+      if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+        deltaApplied += prevSize - safeSize;
+        nextLayout[index2] = safeSize;
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), void 0, {
+          numeric: true
+        }) >= 0) {
+          break;
+        }
+      }
+      if (delta < 0) {
+        index2--;
+      } else {
+        index2++;
+      }
+    }
+  }
+  if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
+    return prevLayout;
+  }
+  {
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+    const prevSize = initialLayout[pivotIndex];
+    assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
+    const unsafeSize = prevSize + deltaApplied;
+    const safeSize = resizePanel({
+      panelConstraints: panelConstraintsArray,
+      panelIndex: pivotIndex,
+      size: unsafeSize
+    });
+    nextLayout[pivotIndex] = safeSize;
+    if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
+      let deltaRemaining = unsafeSize - safeSize;
+      const pivotIndex2 = delta < 0 ? secondPivotIndex : firstPivotIndex;
+      let index2 = pivotIndex2;
+      while (index2 >= 0 && index2 < panelConstraintsArray.length) {
+        const prevSize2 = nextLayout[index2];
+        assert(prevSize2 != null, `Previous layout not found for panel index ${index2}`);
+        const unsafeSize2 = prevSize2 + deltaRemaining;
+        const safeSize2 = resizePanel({
+          panelConstraints: panelConstraintsArray,
+          panelIndex: index2,
+          size: unsafeSize2
+        });
+        if (!fuzzyNumbersEqual(prevSize2, safeSize2)) {
+          deltaRemaining -= safeSize2 - prevSize2;
+          nextLayout[index2] = safeSize2;
+        }
+        if (fuzzyNumbersEqual(deltaRemaining, 0)) {
+          break;
+        }
+        if (delta > 0) {
+          index2--;
+        } else {
+          index2++;
+        }
+      }
+    }
+  }
+  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
+  if (!fuzzyNumbersEqual(totalSize, 100)) {
+    return prevLayout;
+  }
+  return nextLayout;
+}
+function calculateAriaValues({
+  layout,
+  panelsArray,
+  pivotIndices
+}) {
+  let currentMinSize = 0;
+  let currentMaxSize = 100;
+  let totalMinSize = 0;
+  let totalMaxSize = 0;
+  const firstIndex = pivotIndices[0];
+  assert(firstIndex != null, "No pivot index found");
+  panelsArray.forEach((panelData, index2) => {
+    const {
+      constraints
+    } = panelData;
+    const {
+      maxSize = 100,
+      minSize = 0
+    } = constraints;
+    if (index2 === firstIndex) {
+      currentMinSize = minSize;
+      currentMaxSize = maxSize;
+    } else {
+      totalMinSize += minSize;
+      totalMaxSize += maxSize;
+    }
+  });
+  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
+  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
+  const valueNow = layout[firstIndex];
+  return {
+    valueMax,
+    valueMin,
+    valueNow
+  };
+}
+function getResizeHandleElementsForGroup(groupId, scope = document) {
+  return Array.from(scope.querySelectorAll(`[${DATA_ATTRIBUTES.resizeHandleId}][data-panel-group-id="${groupId}"]`));
+}
+function getResizeHandleElementIndex(groupId, id2, scope = document) {
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
+  const index2 = handles.findIndex((handle) => handle.getAttribute(DATA_ATTRIBUTES.resizeHandleId) === id2);
+  return index2 !== null && index2 !== void 0 ? index2 : null;
+}
+function determinePivotIndices(groupId, dragHandleId, panelGroupElement) {
+  const index2 = getResizeHandleElementIndex(groupId, dragHandleId, panelGroupElement);
+  return index2 != null ? [index2, index2 + 1] : [-1, -1];
+}
+function isHTMLElement(target) {
+  if (target instanceof HTMLElement) {
+    return true;
+  }
+  return typeof target === "object" && target !== null && "tagName" in target && "getAttribute" in target;
+}
+function getPanelGroupElement(id2, rootElement = document) {
+  if (isHTMLElement(rootElement) && rootElement.dataset.panelGroupId == id2) {
+    return rootElement;
+  }
+  const element = rootElement.querySelector(`[data-panel-group][data-panel-group-id="${id2}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+function getResizeHandleElement(id2, scope = document) {
+  const element = scope.querySelector(`[${DATA_ATTRIBUTES.resizeHandleId}="${id2}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+function getResizeHandlePanelIds(groupId, handleId, panelsArray, scope = document) {
+  var _panelsArray$index$id, _panelsArray$index, _panelsArray$id, _panelsArray;
+  const handle = getResizeHandleElement(handleId, scope);
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
+  const index2 = handle ? handles.indexOf(handle) : -1;
+  const idBefore = (_panelsArray$index$id = (_panelsArray$index = panelsArray[index2]) === null || _panelsArray$index === void 0 ? void 0 : _panelsArray$index.id) !== null && _panelsArray$index$id !== void 0 ? _panelsArray$index$id : null;
+  const idAfter = (_panelsArray$id = (_panelsArray = panelsArray[index2 + 1]) === null || _panelsArray === void 0 ? void 0 : _panelsArray.id) !== null && _panelsArray$id !== void 0 ? _panelsArray$id : null;
+  return [idBefore, idAfter];
+}
+function useWindowSplitterPanelGroupBehavior({
+  committedValuesRef,
+  eagerValuesRef,
+  groupId,
+  layout,
+  panelDataArray,
+  panelGroupElement,
+  setLayout
+}) {
+  useRef({
+    didWarnAboutMissingResizeHandle: false
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!panelGroupElement) {
+      return;
+    }
+    const resizeHandleElements = getResizeHandleElementsForGroup(groupId, panelGroupElement);
+    for (let index2 = 0; index2 < panelDataArray.length - 1; index2++) {
+      const {
+        valueMax,
+        valueMin,
+        valueNow
+      } = calculateAriaValues({
+        layout,
+        panelsArray: panelDataArray,
+        pivotIndices: [index2, index2 + 1]
+      });
+      const resizeHandleElement = resizeHandleElements[index2];
+      if (resizeHandleElement == null) ;
+      else {
+        const panelData = panelDataArray[index2];
+        assert(panelData, `No panel data found for index "${index2}"`);
+        resizeHandleElement.setAttribute("aria-controls", panelData.id);
+        resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
+        resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
+        resizeHandleElement.setAttribute("aria-valuenow", valueNow != null ? "" + Math.round(valueNow) : "");
+      }
+    }
+    return () => {
+      resizeHandleElements.forEach((resizeHandleElement, index2) => {
+        resizeHandleElement.removeAttribute("aria-controls");
+        resizeHandleElement.removeAttribute("aria-valuemax");
+        resizeHandleElement.removeAttribute("aria-valuemin");
+        resizeHandleElement.removeAttribute("aria-valuenow");
+      });
+    };
+  }, [groupId, layout, panelDataArray, panelGroupElement]);
+  useEffect(() => {
+    if (!panelGroupElement) {
+      return;
+    }
+    const eagerValues = eagerValuesRef.current;
+    assert(eagerValues, `Eager values not found`);
+    const {
+      panelDataArray: panelDataArray2
+    } = eagerValues;
+    const groupElement = getPanelGroupElement(groupId, panelGroupElement);
+    assert(groupElement != null, `No group found for id "${groupId}"`);
+    const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
+    assert(handles, `No resize handles found for group id "${groupId}"`);
+    const cleanupFunctions = handles.map((handle) => {
+      const handleId = handle.getAttribute(DATA_ATTRIBUTES.resizeHandleId);
+      assert(handleId, `Resize handle element has no handle id attribute`);
+      const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray2, panelGroupElement);
+      if (idBefore == null || idAfter == null) {
+        return () => {
+        };
+      }
+      const onKeyDown = (event) => {
+        if (event.defaultPrevented) {
+          return;
+        }
+        switch (event.key) {
+          case "Enter": {
+            event.preventDefault();
+            const index2 = panelDataArray2.findIndex((panelData) => panelData.id === idBefore);
+            if (index2 >= 0) {
+              const panelData = panelDataArray2[index2];
+              assert(panelData, `No panel data found for index ${index2}`);
+              const size = layout[index2];
+              const {
+                collapsedSize = 0,
+                collapsible,
+                minSize = 0
+              } = panelData.constraints;
+              if (size != null && collapsible) {
+                const nextLayout = adjustLayoutByDelta({
+                  delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
+                  initialLayout: layout,
+                  panelConstraints: panelDataArray2.map((panelData2) => panelData2.constraints),
+                  pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
+                  prevLayout: layout,
+                  trigger: "keyboard"
+                });
+                if (layout !== nextLayout) {
+                  setLayout(nextLayout);
+                }
+              }
+            }
+            break;
+          }
+        }
+      };
+      handle.addEventListener("keydown", onKeyDown);
+      return () => {
+        handle.removeEventListener("keydown", onKeyDown);
+      };
+    });
+    return () => {
+      cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());
+    };
+  }, [panelGroupElement, committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
+}
+function areEqual(arrayA, arrayB) {
+  if (arrayA.length !== arrayB.length) {
+    return false;
+  }
+  for (let index2 = 0; index2 < arrayA.length; index2++) {
+    if (arrayA[index2] !== arrayB[index2]) {
+      return false;
+    }
+  }
+  return true;
+}
+function getResizeEventCursorPosition(direction, event) {
+  const isHorizontal = direction === "horizontal";
+  const {
+    x,
+    y
+  } = getResizeEventCoordinates(event);
+  return isHorizontal ? x : y;
+}
+function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement) {
+  const isHorizontal = direction === "horizontal";
+  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
+  assert(handleElement, `No resize handle element found for id "${dragHandleId}"`);
+  const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
+  assert(groupId, `Resize handle element has no group id attribute`);
+  let {
+    initialCursorPosition
+  } = initialDragState;
+  const cursorPosition = getResizeEventCursorPosition(direction, event);
+  const groupElement = getPanelGroupElement(groupId, panelGroupElement);
+  assert(groupElement, `No group element found for id "${groupId}"`);
+  const groupRect = groupElement.getBoundingClientRect();
+  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
+  const offsetPixels = cursorPosition - initialCursorPosition;
+  const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
+  return offsetPercentage;
+}
+function calculateDeltaPercentage(event, dragHandleId, direction, initialDragState, keyboardResizeBy, panelGroupElement) {
+  if (isKeyDown(event)) {
+    const isHorizontal = direction === "horizontal";
+    let delta = 0;
+    if (event.shiftKey) {
+      delta = 100;
+    } else if (keyboardResizeBy != null) {
+      delta = keyboardResizeBy;
+    } else {
+      delta = 10;
+    }
+    let movement = 0;
+    switch (event.key) {
+      case "ArrowDown":
+        movement = isHorizontal ? 0 : delta;
+        break;
+      case "ArrowLeft":
+        movement = isHorizontal ? -delta : 0;
+        break;
+      case "ArrowRight":
+        movement = isHorizontal ? delta : 0;
+        break;
+      case "ArrowUp":
+        movement = isHorizontal ? 0 : -delta;
+        break;
+      case "End":
+        movement = 100;
+        break;
+      case "Home":
+        movement = -100;
+        break;
+    }
+    return movement;
+  } else {
+    if (initialDragState == null) {
+      return 0;
+    }
+    return calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement);
+  }
+}
+function calculateUnsafeDefaultLayout({
+  panelDataArray
+}) {
+  const layout = Array(panelDataArray.length);
+  const panelConstraintsArray = panelDataArray.map((panelData) => panelData.constraints);
+  let numPanelsWithSizes = 0;
+  let remainingSize = 100;
+  for (let index2 = 0; index2 < panelDataArray.length; index2++) {
+    const panelConstraints = panelConstraintsArray[index2];
+    assert(panelConstraints, `Panel constraints not found for index ${index2}`);
+    const {
+      defaultSize: defaultSize2
+    } = panelConstraints;
+    if (defaultSize2 != null) {
+      numPanelsWithSizes++;
+      layout[index2] = defaultSize2;
+      remainingSize -= defaultSize2;
+    }
+  }
+  for (let index2 = 0; index2 < panelDataArray.length; index2++) {
+    const panelConstraints = panelConstraintsArray[index2];
+    assert(panelConstraints, `Panel constraints not found for index ${index2}`);
+    const {
+      defaultSize: defaultSize2
+    } = panelConstraints;
+    if (defaultSize2 != null) {
+      continue;
+    }
+    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
+    const size = remainingSize / numRemainingPanels;
+    numPanelsWithSizes++;
+    layout[index2] = size;
+    remainingSize -= size;
+  }
+  return layout;
+}
+function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
+  layout.forEach((size, index2) => {
+    const panelData = panelsArray[index2];
+    assert(panelData, `Panel data not found for index ${index2}`);
+    const {
+      callbacks,
+      constraints,
+      id: panelId
+    } = panelData;
+    const {
+      collapsedSize = 0,
+      collapsible
+    } = constraints;
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
+    if (lastNotifiedSize == null || size !== lastNotifiedSize) {
+      panelIdToLastNotifiedSizeMap[panelId] = size;
+      const {
+        onCollapse,
+        onExpand,
+        onResize
+      } = callbacks;
+      if (onResize) {
+        onResize(size, lastNotifiedSize);
+      }
+      if (collapsible && (onCollapse || onExpand)) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
+          onExpand();
+        }
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
+          onCollapse();
+        }
+      }
+    }
+  });
+}
+function compareLayouts(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  } else {
+    for (let index2 = 0; index2 < a.length; index2++) {
+      if (a[index2] != b[index2]) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function computePanelFlexBoxStyle({
+  defaultSize: defaultSize2,
+  dragState,
+  layout,
+  panelData,
+  panelIndex,
+  precision = 3
+}) {
+  const size = layout[panelIndex];
+  let flexGrow;
+  if (size == null) {
+    flexGrow = defaultSize2 != void 0 ? defaultSize2.toFixed(precision) : "1";
+  } else if (panelData.length === 1) {
+    flexGrow = "1";
+  } else {
+    flexGrow = size.toFixed(precision);
+  }
+  return {
+    flexBasis: 0,
+    flexGrow,
+    flexShrink: 1,
+    // Without this, Panel sizes may be unintentionally overridden by their content
+    overflow: "hidden",
+    // Disable pointer events inside of a panel during resize
+    // This avoid edge cases like nested iframes
+    pointerEvents: dragState !== null ? "none" : void 0
+  };
+}
+function debounce(callback, durationMs = 10) {
+  let timeoutId = null;
+  let callable = (...args) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      callback(...args);
+    }, durationMs);
+  };
+  return callable;
+}
+function initializeDefaultStorage(storageObject) {
+  try {
+    if (typeof localStorage !== "undefined") {
+      storageObject.getItem = (name) => {
+        return localStorage.getItem(name);
+      };
+      storageObject.setItem = (name, value) => {
+        localStorage.setItem(name, value);
+      };
+    } else {
+      throw new Error("localStorage not supported in this environment");
+    }
+  } catch (error) {
+    console.error(error);
+    storageObject.getItem = () => null;
+    storageObject.setItem = () => {
+    };
+  }
+}
+function getPanelGroupKey(autoSaveId) {
+  return `react-resizable-panels:${autoSaveId}`;
+}
+function getPanelKey(panels2) {
+  return panels2.map((panel) => {
+    const {
+      constraints,
+      id: id2,
+      idIsFromProps,
+      order
+    } = panel;
+    if (idIsFromProps) {
+      return id2;
+    } else {
+      return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
+    }
+  }).sort((a, b) => a.localeCompare(b)).join(",");
+}
+function loadSerializedPanelGroupState(autoSaveId, storage) {
+  try {
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
+    if (serialized) {
+      const parsed = JSON.parse(serialized);
+      if (typeof parsed === "object" && parsed != null) {
+        return parsed;
+      }
+    }
+  } catch (error) {
+  }
+  return null;
+}
+function loadPanelGroupState(autoSaveId, panels2, storage) {
+  var _loadSerializedPanelG, _state$panelKey;
+  const state = (_loadSerializedPanelG = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG !== void 0 ? _loadSerializedPanelG : {};
+  const panelKey = getPanelKey(panels2);
+  return (_state$panelKey = state[panelKey]) !== null && _state$panelKey !== void 0 ? _state$panelKey : null;
+}
+function savePanelGroupState(autoSaveId, panels2, panelSizesBeforeCollapse, sizes, storage) {
+  var _loadSerializedPanelG2;
+  const panelGroupKey = getPanelGroupKey(autoSaveId);
+  const panelKey = getPanelKey(panels2);
+  const state = (_loadSerializedPanelG2 = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG2 !== void 0 ? _loadSerializedPanelG2 : {};
+  state[panelKey] = {
+    expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
+    layout: sizes
+  };
+  try {
+    storage.setItem(panelGroupKey, JSON.stringify(state));
+  } catch (error) {
+    console.error(error);
+  }
+}
+function validatePanelGroupLayout({
+  layout: prevLayout,
+  panelConstraints
+}) {
+  const nextLayout = [...prevLayout];
+  const nextLayoutTotalSize = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
+  if (nextLayout.length !== panelConstraints.length) {
+    throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map((size) => `${size}%`).join(", ")}`);
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
+    for (let index2 = 0; index2 < panelConstraints.length; index2++) {
+      const unsafeSize = nextLayout[index2];
+      assert(unsafeSize != null, `No layout data found for index ${index2}`);
+      const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
+      nextLayout[index2] = safeSize;
+    }
+  }
+  let remainingSize = 0;
+  for (let index2 = 0; index2 < panelConstraints.length; index2++) {
+    const unsafeSize = nextLayout[index2];
+    assert(unsafeSize != null, `No layout data found for index ${index2}`);
+    const safeSize = resizePanel({
+      panelConstraints,
+      panelIndex: index2,
+      size: unsafeSize
+    });
+    if (unsafeSize != safeSize) {
+      remainingSize += unsafeSize - safeSize;
+      nextLayout[index2] = safeSize;
+    }
+  }
+  if (!fuzzyNumbersEqual(remainingSize, 0)) {
+    for (let index2 = 0; index2 < panelConstraints.length; index2++) {
+      const prevSize = nextLayout[index2];
+      assert(prevSize != null, `No layout data found for index ${index2}`);
+      const unsafeSize = prevSize + remainingSize;
+      const safeSize = resizePanel({
+        panelConstraints,
+        panelIndex: index2,
+        size: unsafeSize
+      });
+      if (prevSize !== safeSize) {
+        remainingSize -= safeSize - prevSize;
+        nextLayout[index2] = safeSize;
+        if (fuzzyNumbersEqual(remainingSize, 0)) {
+          break;
+        }
+      }
+    }
+  }
+  return nextLayout;
+}
+const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
+const defaultStorage = {
+  getItem: (name) => {
+    initializeDefaultStorage(defaultStorage);
+    return defaultStorage.getItem(name);
+  },
+  setItem: (name, value) => {
+    initializeDefaultStorage(defaultStorage);
+    defaultStorage.setItem(name, value);
+  }
+};
+const debounceMap = {};
+function PanelGroupWithForwardedRef({
+  autoSaveId = null,
+  children: children2,
+  className: classNameFromProps = "",
+  direction,
+  forwardedRef,
+  id: idFromProps = null,
+  onLayout = null,
+  keyboardResizeBy = null,
+  storage = defaultStorage,
+  style: styleFromProps,
+  tagName: Type2 = "div",
+  ...rest
+}) {
+  const groupId = useUniqueId(idFromProps);
+  const panelGroupElementRef = useRef(null);
+  const [dragState, setDragState] = useState(null);
+  const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
+  const panelIdToLastNotifiedSizeMapRef = useRef({});
+  const panelSizeBeforeCollapseRef = useRef(/* @__PURE__ */ new Map());
+  const prevDeltaRef = useRef(0);
+  const committedValuesRef = useRef({
+    autoSaveId,
+    direction,
+    dragState,
+    id: groupId,
+    keyboardResizeBy,
+    onLayout,
+    storage
+  });
+  const eagerValuesRef = useRef({
+    layout,
+    panelDataArray: [],
+    panelDataArrayChanged: false
+  });
+  useRef({
+    didLogIdAndOrderWarning: false,
+    didLogPanelConstraintsWarning: false,
+    prevPanelIds: []
+  });
+  useImperativeHandle(forwardedRef, () => ({
+    getId: () => committedValuesRef.current.id,
+    getLayout: () => {
+      const {
+        layout: layout2
+      } = eagerValuesRef.current;
+      return layout2;
+    },
+    setLayout: (unsafeLayout) => {
+      const {
+        onLayout: onLayout2
+      } = committedValuesRef.current;
+      const {
+        layout: prevLayout,
+        panelDataArray
+      } = eagerValuesRef.current;
+      const safeLayout = validatePanelGroupLayout({
+        layout: unsafeLayout,
+        panelConstraints: panelDataArray.map((panelData) => panelData.constraints)
+      });
+      if (!areEqual(prevLayout, safeLayout)) {
+        setLayout(safeLayout);
+        eagerValuesRef.current.layout = safeLayout;
+        if (onLayout2) {
+          onLayout2(safeLayout);
+        }
+        callPanelCallbacks(panelDataArray, safeLayout, panelIdToLastNotifiedSizeMapRef.current);
+      }
+    }
+  }), []);
+  useIsomorphicLayoutEffect(() => {
+    committedValuesRef.current.autoSaveId = autoSaveId;
+    committedValuesRef.current.direction = direction;
+    committedValuesRef.current.dragState = dragState;
+    committedValuesRef.current.id = groupId;
+    committedValuesRef.current.onLayout = onLayout;
+    committedValuesRef.current.storage = storage;
+  });
+  useWindowSplitterPanelGroupBehavior({
+    committedValuesRef,
+    eagerValuesRef,
+    groupId,
+    layout,
+    panelDataArray: eagerValuesRef.current.panelDataArray,
+    setLayout,
+    panelGroupElement: panelGroupElementRef.current
+  });
+  useEffect(() => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
+    if (autoSaveId) {
+      if (layout.length === 0 || layout.length !== panelDataArray.length) {
+        return;
+      }
+      let debouncedSave = debounceMap[autoSaveId];
+      if (debouncedSave == null) {
+        debouncedSave = debounce(savePanelGroupState, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
+        debounceMap[autoSaveId] = debouncedSave;
+      }
+      const clonedPanelDataArray = [...panelDataArray];
+      const clonedPanelSizesBeforeCollapse = new Map(panelSizeBeforeCollapseRef.current);
+      debouncedSave(autoSaveId, clonedPanelDataArray, clonedPanelSizesBeforeCollapse, layout, storage);
+    }
+  }, [autoSaveId, layout, storage]);
+  useEffect(() => {
+  });
+  const collapsePanel = useCallback((panelData) => {
+    const {
+      onLayout: onLayout2
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    if (panelData.constraints.collapsible) {
+      const panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints);
+      const {
+        collapsedSize = 0,
+        panelSize,
+        pivotIndices
+      } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+      if (!fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
+        panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+        const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          initialLayout: prevLayout,
+          panelConstraints: panelConstraintsArray,
+          pivotIndices,
+          prevLayout,
+          trigger: "imperative-api"
+        });
+        if (!compareLayouts(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+          eagerValuesRef.current.layout = nextLayout;
+          if (onLayout2) {
+            onLayout2(nextLayout);
+          }
+          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+        }
+      }
+    }
+  }, []);
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
+    const {
+      onLayout: onLayout2
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    if (panelData.constraints.collapsible) {
+      const panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints);
+      const {
+        collapsedSize = 0,
+        panelSize = 0,
+        minSize: minSizeFromProps = 0,
+        pivotIndices
+      } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
+      if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
+        const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
+        const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+        const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          initialLayout: prevLayout,
+          panelConstraints: panelConstraintsArray,
+          pivotIndices,
+          prevLayout,
+          trigger: "imperative-api"
+        });
+        if (!compareLayouts(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+          eagerValuesRef.current.layout = nextLayout;
+          if (onLayout2) {
+            onLayout2(nextLayout);
+          }
+          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+        }
+      }
+    }
+  }, []);
+  const getPanelSize = useCallback((panelData) => {
+    const {
+      layout: layout2,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout2);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+    return panelSize;
+  }, []);
+  const getPanelStyle = useCallback((panelData, defaultSize2) => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
+    return computePanelFlexBoxStyle({
+      defaultSize: defaultSize2,
+      dragState,
+      layout,
+      panelData: panelDataArray,
+      panelIndex
+    });
+  }, [dragState, layout]);
+  const isPanelCollapsed = useCallback((panelData) => {
+    const {
+      layout: layout2,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize = 0,
+      collapsible,
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout2);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+    return collapsible === true && fuzzyNumbersEqual$1(panelSize, collapsedSize);
+  }, []);
+  const isPanelExpanded = useCallback((panelData) => {
+    const {
+      layout: layout2,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize = 0,
+      collapsible,
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout2);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+    return !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
+  }, []);
+  const registerPanel = useCallback((panelData) => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
+    panelDataArray.push(panelData);
+    panelDataArray.sort((panelA, panelB) => {
+      const orderA = panelA.order;
+      const orderB = panelB.order;
+      if (orderA == null && orderB == null) {
+        return 0;
+      } else if (orderA == null) {
+        return -1;
+      } else if (orderB == null) {
+        return 1;
+      } else {
+        return orderA - orderB;
+      }
+    });
+    eagerValuesRef.current.panelDataArrayChanged = true;
+    forceUpdate();
+  }, [forceUpdate]);
+  useIsomorphicLayoutEffect(() => {
+    if (eagerValuesRef.current.panelDataArrayChanged) {
+      eagerValuesRef.current.panelDataArrayChanged = false;
+      const {
+        autoSaveId: autoSaveId2,
+        onLayout: onLayout2,
+        storage: storage2
+      } = committedValuesRef.current;
+      const {
+        layout: prevLayout,
+        panelDataArray
+      } = eagerValuesRef.current;
+      let unsafeLayout = null;
+      if (autoSaveId2) {
+        const state = loadPanelGroupState(autoSaveId2, panelDataArray, storage2);
+        if (state) {
+          panelSizeBeforeCollapseRef.current = new Map(Object.entries(state.expandToSizes));
+          unsafeLayout = state.layout;
+        }
+      }
+      if (unsafeLayout == null) {
+        unsafeLayout = calculateUnsafeDefaultLayout({
+          panelDataArray
+        });
+      }
+      const nextLayout = validatePanelGroupLayout({
+        layout: unsafeLayout,
+        panelConstraints: panelDataArray.map((panelData) => panelData.constraints)
+      });
+      if (!areEqual(prevLayout, nextLayout)) {
+        setLayout(nextLayout);
+        eagerValuesRef.current.layout = nextLayout;
+        if (onLayout2) {
+          onLayout2(nextLayout);
+        }
+        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+      }
+    }
+  });
+  useIsomorphicLayoutEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    return () => {
+      eagerValues.layout = [];
+    };
+  }, []);
+  const registerResizeHandle = useCallback((dragHandleId) => {
+    let isRTL = false;
+    const panelGroupElement = panelGroupElementRef.current;
+    if (panelGroupElement) {
+      const style3 = window.getComputedStyle(panelGroupElement, null);
+      if (style3.getPropertyValue("direction") === "rtl") {
+        isRTL = true;
+      }
+    }
+    return function resizeHandler(event) {
+      event.preventDefault();
+      const panelGroupElement2 = panelGroupElementRef.current;
+      if (!panelGroupElement2) {
+        return () => null;
+      }
+      const {
+        direction: direction2,
+        dragState: dragState2,
+        id: groupId2,
+        keyboardResizeBy: keyboardResizeBy2,
+        onLayout: onLayout2
+      } = committedValuesRef.current;
+      const {
+        layout: prevLayout,
+        panelDataArray
+      } = eagerValuesRef.current;
+      const {
+        initialLayout
+      } = dragState2 !== null && dragState2 !== void 0 ? dragState2 : {};
+      const pivotIndices = determinePivotIndices(groupId2, dragHandleId, panelGroupElement2);
+      let delta = calculateDeltaPercentage(event, dragHandleId, direction2, dragState2, keyboardResizeBy2, panelGroupElement2);
+      const isHorizontal = direction2 === "horizontal";
+      if (isHorizontal && isRTL) {
+        delta = -delta;
+      }
+      const panelConstraints = panelDataArray.map((panelData) => panelData.constraints);
+      const nextLayout = adjustLayoutByDelta({
+        delta,
+        initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
+        panelConstraints,
+        pivotIndices,
+        prevLayout,
+        trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
+      });
+      const layoutChanged = !compareLayouts(prevLayout, nextLayout);
+      if (isPointerEvent(event) || isMouseEvent(event)) {
+        if (prevDeltaRef.current != delta) {
+          prevDeltaRef.current = delta;
+          if (!layoutChanged && delta !== 0) {
+            if (isHorizontal) {
+              reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_HORIZONTAL_MIN : EXCEEDED_HORIZONTAL_MAX);
+            } else {
+              reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_VERTICAL_MIN : EXCEEDED_VERTICAL_MAX);
+            }
+          } else {
+            reportConstraintsViolation(dragHandleId, 0);
+          }
+        }
+      }
+      if (layoutChanged) {
+        setLayout(nextLayout);
+        eagerValuesRef.current.layout = nextLayout;
+        if (onLayout2) {
+          onLayout2(nextLayout);
+        }
+        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+      }
+    };
+  }, []);
+  const resizePanel2 = useCallback((panelData, unsafePanelSize) => {
+    const {
+      onLayout: onLayout2
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints);
+    const {
+      panelSize,
+      pivotIndices
+    } = panelDataHelper(panelDataArray, panelData, prevLayout);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+    const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+    const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
+    const nextLayout = adjustLayoutByDelta({
+      delta,
+      initialLayout: prevLayout,
+      panelConstraints: panelConstraintsArray,
+      pivotIndices,
+      prevLayout,
+      trigger: "imperative-api"
+    });
+    if (!compareLayouts(prevLayout, nextLayout)) {
+      setLayout(nextLayout);
+      eagerValuesRef.current.layout = nextLayout;
+      if (onLayout2) {
+        onLayout2(nextLayout);
+      }
+      callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+    }
+  }, []);
+  const reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout: layout2,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout2);
+    if (prevPanelSize == null) {
+      return;
+    }
+    if (prevCollapsible && nextCollapsible && fuzzyNumbersEqual$1(prevPanelSize, prevCollapsedSize)) {
+      if (!fuzzyNumbersEqual$1(prevCollapsedSize, nextCollapsedSize)) {
+        resizePanel2(panelData, nextCollapsedSize);
+      }
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel2(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel2(panelData, nextMaxSize);
+    }
+  }, [resizePanel2]);
+  const startDragging = useCallback((dragHandleId, event) => {
+    const {
+      direction: direction2
+    } = committedValuesRef.current;
+    const {
+      layout: layout2
+    } = eagerValuesRef.current;
+    if (!panelGroupElementRef.current) {
+      return;
+    }
+    const handleElement = getResizeHandleElement(dragHandleId, panelGroupElementRef.current);
+    assert(handleElement, `Drag handle element not found for id "${dragHandleId}"`);
+    const initialCursorPosition = getResizeEventCursorPosition(direction2, event);
+    setDragState({
+      dragHandleId,
+      dragHandleRect: handleElement.getBoundingClientRect(),
+      initialCursorPosition,
+      initialLayout: layout2
+    });
+  }, []);
+  const stopDragging = useCallback(() => {
+    setDragState(null);
+  }, []);
+  const unregisterPanel = useCallback((panelData) => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
+    const index2 = findPanelDataIndex(panelDataArray, panelData);
+    if (index2 >= 0) {
+      panelDataArray.splice(index2, 1);
+      delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
+      eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
+    }
+  }, [forceUpdate]);
+  const context = useMemo(() => ({
+    collapsePanel,
+    direction,
+    dragState,
+    expandPanel,
+    getPanelSize,
+    getPanelStyle,
+    groupId,
+    isPanelCollapsed,
+    isPanelExpanded,
+    reevaluatePanelConstraints,
+    registerPanel,
+    registerResizeHandle,
+    resizePanel: resizePanel2,
+    startDragging,
+    stopDragging,
+    unregisterPanel,
+    panelGroupElement: panelGroupElementRef.current
+  }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, reevaluatePanelConstraints, registerPanel, registerResizeHandle, resizePanel2, startDragging, stopDragging, unregisterPanel]);
+  const style2 = {
+    display: "flex",
+    flexDirection: direction === "horizontal" ? "row" : "column",
+    height: "100%",
+    overflow: "hidden",
+    width: "100%"
+  };
+  return createElement(PanelGroupContext.Provider, {
+    value: context
+  }, createElement(Type2, {
+    ...rest,
+    children: children2,
+    className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
+    style: {
+      ...style2,
+      ...styleFromProps
+    },
+    // CSS selectors
+    [DATA_ATTRIBUTES.group]: "",
+    [DATA_ATTRIBUTES.groupDirection]: direction,
+    [DATA_ATTRIBUTES.groupId]: groupId
+  }));
+}
+const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
+  ...props,
+  forwardedRef: ref
+}));
+PanelGroupWithForwardedRef.displayName = "PanelGroup";
+PanelGroup.displayName = "forwardRef(PanelGroup)";
+function findPanelDataIndex(panelDataArray, panelData) {
+  return panelDataArray.findIndex((prevPanelData) => prevPanelData === panelData || prevPanelData.id === panelData.id);
+}
+function panelDataHelper(panelDataArray, panelData, layout) {
+  const panelIndex = findPanelDataIndex(panelDataArray, panelData);
+  const isLastPanel = panelIndex === panelDataArray.length - 1;
+  const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
+  const panelSize = layout[panelIndex];
+  return {
+    ...panelData.constraints,
+    panelSize,
+    pivotIndices
+  };
+}
+function S(e) {
+  return { "--panel-background": e.colors.background, "--panel-border": e.colors.border, "--panel-handle": e.colors.backgroundSecondary, "--panel-handle-hover": e.colors.backgroundHover, "--panel-handle-active": e.colors.primary, "--panel-button-bg": e.colors.surface, "--panel-button-hover": e.colors.backgroundHover, "--panel-button-border": e.colors.border, "--panel-button-icon": e.colors.textSecondary, "--panel-accent-bg": e.colors.primary + "15" };
+}
+const z = forwardRef(({ panels: o, className: a = "", style: s, theme: d, minPanelWidth: u = 350, idealPanelWidth: p = 0.333, showSeparator: h = false, onPanelChange: m, preventKeyboardScroll: f = true }, g) => {
+  const v = useRef(null), b = S(d);
+  useImperativeHandle(g, () => ({ scrollToPanel: (e) => {
+    if (!v.current) return;
+    const t = v.current, n = t.children[e];
+    if (n) {
+      const e2 = n.offsetLeft;
+      t.scrollTo({ left: e2, behavior: "smooth" });
+    }
+  }, getCurrentPanel: () => {
+    if (!v.current || 0 === v.current.children.length) return 0;
+    const e = v.current, t = e.getBoundingClientRect().left;
+    let n = 0, r = 1 / 0;
+    for (let o2 = 0; o2 < e.children.length; o2++) {
+      const i = e.children[o2].getBoundingClientRect(), a2 = Math.abs(i.left - t);
+      a2 < r && (r = a2, n = o2);
+    }
+    return n;
+  } }));
+  useEffect(() => {
+    if (!f || !v.current) return;
+    const e = v.current, t = (e2) => {
+      const t2 = e2.target;
+      if ("INPUT" === t2.tagName || "TEXTAREA" === t2.tagName || "SELECT" === t2.tagName || t2.isContentEditable || null !== t2.closest(".xterm") || null !== t2.closest('[contenteditable="true"]')) return;
+      [" ", "Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown"].includes(e2.key) && e2.preventDefault();
+    };
+    return e.addEventListener("keydown", t), () => {
+      e.removeEventListener("keydown", t);
+    };
+  }, [f]);
+  const y = o.length, w = 2 * u;
+  let x;
+  x = 1 === y || 2 === y ? "100%" : `max(${u}px, ${100 * p}%)`;
+  const C = React2__default.useId().replace(/:/g, "_");
+  return jsxs(Fragment, { children: [
+    2 === y && /* @__PURE__ */ jsx("style", { children: `
+            .snap-carousel-container[data-carousel-id="${C}"][data-panel-count="2"] .snap-carousel-panel {
+              width: 100%;
+            }
+            @container (min-width: ${w}px) {
+              .snap-carousel-container[data-carousel-id="${C}"][data-panel-count="2"] .snap-carousel-panel {
+                width: 50%;
+              }
+            }
+          ` }),
+    /* @__PURE__ */ jsx("div", { ref: v, className: `snap-carousel-container ${a}`, style: { ...b, ...s, "--snap-carousel-min-width": `${u}px`, "--snap-carousel-ideal-width": 100 * p + "%", "--snap-carousel-gap": h ? "1px" : "0px", "--snap-carousel-panel-width": x, "--snap-carousel-panel-count": y, "--snap-carousel-two-panel-threshold": `${w}px` }, onScroll: (e) => {
+      if (!m || !v.current || 0 === v.current.children.length) return;
+      const t = v.current, n = t.getBoundingClientRect().left;
+      let r = 0, o2 = 1 / 0;
+      for (let i = 0; i < t.children.length; i++) {
+        const e2 = t.children[i].getBoundingClientRect(), a2 = Math.abs(e2.left - n);
+        a2 < o2 && (o2 = a2, r = i);
+      }
+      m(r);
+    }, "data-panel-count": y, "data-carousel-id": C, children: o.map((t, n) => /* @__PURE__ */ jsx("div", { className: "snap-carousel-panel", children: t }, n)) })
+  ] });
+});
+z.displayName = "SnapCarousel";
+var le, se;
+(se = le || (le = {})).DragStart = "dragStart", se.DragMove = "dragMove", se.DragEnd = "dragEnd", se.DragCancel = "dragCancel", se.DragOver = "dragOver", se.RegisterDroppable = "registerDroppable", se.SetDroppableDisabled = "setDroppableDisabled", se.UnregisterDroppable = "unregisterDroppable";
+const de = /* @__PURE__ */ Object.freeze({ x: 0, y: 0 });
+var Te, Ae;
+(Ae = Te || (Te = {}))[Ae.Forward = 1] = "Forward", Ae[Ae.Backward = -1] = "Backward";
+var _e, je, He, Ke;
+(je = _e || (_e = {})).Click = "click", je.DragStart = "dragstart", je.Keydown = "keydown", je.ContextMenu = "contextmenu", je.Resize = "resize", je.SelectionChange = "selectionchange", je.VisibilityChange = "visibilitychange", (Ke = He || (He = {})).Space = "Space", Ke.Down = "ArrowDown", Ke.Right = "ArrowRight", Ke.Left = "ArrowLeft", Ke.Up = "ArrowUp", Ke.Esc = "Escape", Ke.Enter = "Enter", Ke.Tab = "Tab";
+({ start: [He.Space, He.Enter], cancel: [He.Esc], end: [He.Space, He.Enter, He.Tab] });
+var rt, ot;
+(ot = rt || (rt = {}))[ot.RightClick = 2] = "RightClick";
+var at$1, lt, st, ct;
+(lt = at$1 || (at$1 = {}))[lt.Pointer = 0] = "Pointer", lt[lt.DraggableRect = 1] = "DraggableRect", (ct = st || (st = {}))[ct.TreeOrder = 0] = "TreeOrder", ct[ct.ReversedTreeOrder = 1] = "ReversedTreeOrder";
+({ x: { [Te.Backward]: false, [Te.Forward]: false }, y: { [Te.Backward]: false, [Te.Forward]: false } });
+var pt, ht, mt;
+(ht = pt || (pt = {}))[ht.Always = 0] = "Always", ht[ht.BeforeDragging = 1] = "BeforeDragging", ht[ht.WhileDragging = 2] = "WhileDragging", (mt || (mt = {})).Optimized = "optimized";
+({ droppable: { strategy: pt.WhileDragging, frequency: mt.Optimized } });
+/* @__PURE__ */ createContext({ ...de, scaleX: 1, scaleY: 1 });
+var $t, Bt;
+(Bt = $t || ($t = {}))[Bt.Uninitialized = 0] = "Uninitialized", Bt[Bt.Initializing = 1] = "Initializing", Bt[Bt.Initialized = 2] = "Initialized";
+var Ut;
+(() => {
+  if ("undefined" != typeof window) {
+    const e = window;
+    return e.__principlemd_theme_context__ || (e.__principlemd_theme_context__ = createContext(void 0)), e.__principlemd_theme_context__;
+  }
+  return Ut || (Ut = createContext(void 0)), Ut;
+})();
+var Pe = Object.defineProperty;
+var We = (o, e, t) => e in o ? Pe(o, e, { enumerable: true, configurable: true, writable: true, value: t }) : o[e] = t;
+var Y = (o, e, t) => We(o, typeof e != "symbol" ? e + "" : e, t);
+class Le {
+  constructor() {
+    Y(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
+    Y(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
+  }
+  /**
+   * Load all user-created workspace presets
+   */
+  async loadWorkspacePresets() {
+    try {
+      const e = localStorage.getItem(this.PRESETS_KEY);
+      return e ? JSON.parse(e) : {};
+    } catch (e) {
+      return console.error("Failed to load workspace presets:", e), {};
+    }
+  }
+  /**
+   * Save workspace presets
+   */
+  async saveWorkspacePresets(e) {
+    try {
+      localStorage.setItem(this.PRESETS_KEY, JSON.stringify(e));
+    } catch (t) {
+      throw console.error("Failed to save workspace presets:", t), t;
+    }
+  }
+  /**
+   * Load repository-specific workspace state
+   */
+  async loadRepositoryState(e) {
+    try {
+      const t = `${this.REPO_STATE_PREFIX}${e}`, r = localStorage.getItem(t);
+      return r ? JSON.parse(r) : null;
+    } catch (t) {
+      return console.error(
+        `Failed to load repository state for ${e}:`,
+        t
+      ), null;
+    }
+  }
+  /**
+   * Save repository-specific workspace state
+   */
+  async saveRepositoryState(e, t) {
+    try {
+      const r = `${this.REPO_STATE_PREFIX}${e}`;
+      localStorage.setItem(r, JSON.stringify(t));
+    } catch (r) {
+      throw console.error(
+        `Failed to save repository state for ${e}:`,
+        r
+      ), r;
+    }
+  }
+  /**
+   * Load all repository states
+   */
+  async loadAllRepositoryStates() {
+    try {
+      const e = {};
+      for (let t = 0; t < localStorage.length; t++) {
+        const r = localStorage.key(t);
+        if (r && r.startsWith(this.REPO_STATE_PREFIX)) {
+          const n = r.substring(this.REPO_STATE_PREFIX.length), a = localStorage.getItem(r);
+          if (a)
+            try {
+              e[n] = JSON.parse(a);
+            } catch (i) {
+              console.error(
+                `Failed to parse repository state for ${n}:`,
+                i
+              );
+            }
+        }
+      }
+      return e;
+    } catch (e) {
+      return console.error("Failed to load all repository states:", e), {};
+    }
+  }
+}
+class D {
+  /**
+   * Configure a custom storage adapter (for Electron IPC or remote storage)
+   */
+  static setAdapter(e) {
+    this.adapter = e;
+  }
+  /**
+   * Get all workspace layouts (including built-in)
+   */
+  static async getWorkspaceLayouts() {
+    const e = this.getBuiltInWorkspaceLayouts();
+    return {
+      ...await this.adapter.loadWorkspacePresets(),
+      ...e
+    };
+  }
+  /**
+   * Get a specific workspace layout by ID
+   */
+  static async getWorkspaceLayout(e) {
+    return (await this.getWorkspaceLayouts())[e] || null;
+  }
+  /**
+   * Create a new workspace layout
+   */
+  static async createWorkspaceLayout(e) {
+    const t = await this.adapter.loadWorkspacePresets(), r = this.generateWorkspaceId(e.name), n = {
+      id: r,
+      name: e.name,
+      description: e.description,
+      layout: e.layout,
+      defaultSizes: e.defaultSizes,
+      defaultCollapsed: e.defaultCollapsed,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      isBuiltIn: false
+    }, a = {
+      ...t,
+      [r]: n
+    };
+    return await this.adapter.saveWorkspacePresets(a), n;
+  }
+  /**
+   * Update an existing workspace layout
+   */
+  static async updateWorkspaceLayout(e, t) {
+    const r = await this.adapter.loadWorkspacePresets(), n = r[e];
+    if (!n)
+      return console.error(`Workspace layout ${e} not found`), null;
+    if (n.isBuiltIn)
+      return console.error(`Cannot update built-in workspace layout ${e}`), null;
+    const a = {
+      ...n,
+      ...t,
+      id: e,
+      // Preserve ID
+      createdAt: n.createdAt,
+      // Preserve creation time
+      updatedAt: Date.now()
+    }, i = {
+      ...r,
+      [e]: a
+    };
+    return await this.adapter.saveWorkspacePresets(i), a;
+  }
+  /**
+   * Delete a workspace layout
+   */
+  static async deleteWorkspaceLayout(e) {
+    const t = await this.adapter.loadWorkspacePresets(), r = t[e];
+    if (!r)
+      return console.error(`Workspace layout ${e} not found`), false;
+    if (r.isBuiltIn)
+      return console.error(`Cannot delete built-in workspace layout ${e}`), false;
+    const n = { ...t };
+    return delete n[e], await this.adapter.saveWorkspacePresets(n), true;
+  }
+  /**
+   * Get repository state (which workspace + current sizes/collapsed)
+   */
+  static async getRepositoryState(e) {
+    return await this.adapter.loadRepositoryState(e);
+  }
+  /**
+   * Set repository state (which workspace + current sizes/collapsed/layout)
+   */
+  static async setRepositoryState(e, t) {
+    await this.adapter.saveRepositoryState(e, t);
+  }
+  /**
+   * Update only sizes in repository state
+   */
+  static async updateRepositorySizes(e, t) {
+    const r = await this.getRepositoryState(e);
+    r && await this.setRepositoryState(e, {
+      ...r,
+      sizes: t
+    });
+  }
+  /**
+   * Update only collapsed state in repository state
+   */
+  static async updateRepositoryCollapsed(e, t) {
+    const r = await this.getRepositoryState(e);
+    r && await this.setRepositoryState(e, {
+      ...r,
+      collapsed: t
+    });
+  }
+  /**
+   * Check if repository state differs from workspace defaults
+   */
+  static hasStateDeviation(e, t) {
+    const r = t.defaultSizes ? JSON.stringify(e.sizes) !== JSON.stringify(t.defaultSizes) : false, n = t.defaultCollapsed ? JSON.stringify(e.collapsed) !== JSON.stringify(t.defaultCollapsed) : false;
+    return { hasSizeDeviation: r, hasCollapsedDeviation: n };
+  }
+  /**
+   * Update workspace defaults from repository state
+   */
+  static async updateWorkspaceFromRepositoryState(e, t) {
+    const r = await this.getWorkspaceLayout(e), n = await this.getRepositoryState(t);
+    if (!r || !n || r.isBuiltIn) {
+      console.error(
+        "Cannot update built-in workspace or workspace/state not found"
+      );
+      return;
+    }
+    await this.updateWorkspaceLayout(e, {
+      defaultSizes: n.sizes,
+      defaultCollapsed: n.collapsed
+    });
+  }
+  /**
+   * Reset repository state to workspace defaults
+   */
+  static async resetRepositoryToWorkspaceDefaults(e, t) {
+    const r = await this.getWorkspaceLayout(t);
+    if (!r) {
+      console.error(`Workspace ${t} not found`);
+      return;
+    }
+    const n = await this.getRepositoryState(e);
+    n && await this.setRepositoryState(e, {
+      ...n,
+      sizes: r.defaultSizes || { left: 20, middle: 45, right: 35 },
+      collapsed: r.defaultCollapsed || { left: false, right: false }
+    });
+  }
+  /**
+   * Check if a layout matches a workspace layout
+   */
+  static isLayoutMatchingWorkspace(e, t) {
+    return this.areLayoutsEqual(e, t.layout);
+  }
+  /**
+   * Find workspace ID that matches the given layout
+   */
+  static async findMatchingWorkspace(e) {
+    const t = await this.getWorkspaceLayouts();
+    for (const [r, n] of Object.entries(t))
+      if (this.isLayoutMatchingWorkspace(e, n))
+        return r;
+    return null;
+  }
+  /**
+   * Deep comparison of two panel layouts
+   */
+  static areLayoutsEqual(e, t) {
+    return JSON.stringify(e) === JSON.stringify(t);
+  }
+  /**
+   * Generate a unique ID from a workspace name
+   */
+  static generateWorkspaceId(e) {
+    return `${e.toLowerCase().replace(/[^a-z0-9]+/g, "-")}-${Date.now()}`;
+  }
+  /**
+   * Get built-in workspace layouts
+   */
+  static getBuiltInWorkspaceLayouts() {
+    const e = Date.now();
+    return {
+      "project-management": {
+        id: "project-management",
+        name: "Project Management",
+        description: "Tasks, dependencies, issues, file tree, docs, drawings, multi terminal, city visualization, code viewer, markdown slides, and excalidraw",
+        layout: {
+          left: {
+            type: "tabs",
+            panels: [
+              "tasks",
+              "dependencies",
+              "gitIssues",
+              "fileTree",
+              "docs",
+              "drawings"
+            ],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          middle: "multiTerminal",
+          right: {
+            type: "tabs",
+            panels: [
+              "cityVisualization",
+              "codeViewer",
+              "markdownViewer",
+              "excalidrawDiagram"
+            ],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          }
+        },
+        defaultSizes: { left: 20, middle: 45, right: 35 },
+        defaultCollapsed: { left: false, right: false },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: true
+      },
+      "code-review": {
+        id: "code-review",
+        name: "Code Review",
+        description: "Git changes, pull requests, and file tree on left, git diff and code viewer in middle, city map on right",
+        layout: {
+          left: {
+            type: "tabs",
+            panels: ["gitChanges", "gitPullRequests", "fileTree"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          middle: {
+            type: "tabs",
+            panels: ["gitDiff", "codeViewer"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          right: "cityVisualization"
+        },
+        defaultSizes: { left: 20, middle: 50, right: 30 },
+        defaultCollapsed: { left: false, right: false },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: true
+      },
+      documentation: {
+        id: "documentation",
+        name: "Documentation",
+        description: "Docs, markdown viewer, and code viewer",
+        layout: {
+          left: "docs",
+          middle: "markdownViewer",
+          right: "codeViewer"
+        },
+        defaultSizes: { left: 20, middle: 50, right: 30 },
+        defaultCollapsed: { left: false, right: true },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: true
+      },
+      "agent-work": {
+        id: "agent-work",
+        name: "Agent Work",
+        description: "Tasks, agent sessions, file tree, agent context, git changes, docs, multi terminal, city map, agent events, code viewer, and markdown slides",
+        layout: {
+          left: {
+            type: "tabs",
+            panels: [
+              "tasks",
+              "agentSessions",
+              "fileTree",
+              "agentContext",
+              "gitChanges",
+              "docs"
+            ],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          middle: "multiTerminal",
+          right: {
+            type: "tabs",
+            panels: [
+              "cityVisualization",
+              "agentEvents",
+              "codeViewer",
+              "markdownViewer"
+            ],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          }
+        },
+        defaultSizes: { left: 20, middle: 45, right: 35 },
+        defaultCollapsed: { left: false, right: false },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: true
+      },
+      "quality-check": {
+        id: "quality-check",
+        name: "Quality Check",
+        description: "Package information, tools, and dependencies on left; city visualization map in middle; multi terminal and code viewer on right (collapsed)",
+        layout: {
+          left: {
+            type: "tabs",
+            panels: ["packageInfo", "tools", "dependencies"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          middle: "cityVisualization",
+          right: {
+            type: "tabs",
+            panels: ["multiTerminal", "codeViewer"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          }
+        },
+        defaultSizes: { left: 20, middle: 45, right: 35 },
+        defaultCollapsed: { left: false, right: true },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: true
+      },
+      drawing: {
+        id: "drawing",
+        name: "Drawing",
+        description: "Drawings and docs, excalidraw diagram, multi terminal and markdown viewer",
+        layout: {
+          left: {
+            type: "tabs",
+            panels: ["drawings", "docs"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          middle: "excalidrawDiagram",
+          right: {
+            type: "tabs",
+            panels: ["multiTerminal", "markdownViewer"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          }
+        },
+        defaultSizes: { left: 20, middle: 50, right: 30 },
+        defaultCollapsed: { left: false, right: true },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: true
+      },
+      "old-school": {
+        id: "old-school",
+        name: "Old School",
+        description: "File tree, search, git changes, and docs on left; code viewer and markdown viewer in middle; multi terminal and city map on right (collapsed)",
+        layout: {
+          left: {
+            type: "tabs",
+            panels: ["fileTree", "search", "gitChanges", "docs"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          middle: {
+            type: "tabs",
+            panels: ["codeViewer", "markdownViewer"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          right: {
+            type: "tabs",
+            panels: ["multiTerminal", "cityVisualization"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          }
+        },
+        defaultSizes: { left: 20, middle: 50, right: 30 },
+        defaultCollapsed: { left: false, right: true },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: true
+      },
+      "principal-office": {
+        id: "principal-office",
+        name: "Principal Office",
+        description: "Alexandria docs on left, MDX editor in middle, multi terminal on right",
+        layout: {
+          left: "docs",
+          middle: "mdxEditor",
+          right: "multiTerminal"
+        },
+        defaultSizes: { left: 20, middle: 50, right: 30 },
+        defaultCollapsed: { left: false, right: false },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: true
+      }
+    };
+  }
+  /**
+   * Initialize workspace layouts with built-in defaults if none exist
+   */
+  static async initializeWorkspaceLayouts() {
+    const e = await this.adapter.loadWorkspacePresets();
+    Object.keys(e).length;
+  }
+}
+Y(D, "adapter", new Le());
+function at(o, e, t, r) {
+  useEffect(() => {
+    const n = e.on(
+      "panel:focus",
+      (i) => {
+        i.payload.panelId === o && t();
+      }
+    );
+    return () => {
+      n();
+    };
+  }, [o, e, t, r]);
+}
 const EMPTY_CANVAS_ARRAY = [];
 const useCanvasData = ({
   context
@@ -54778,6 +56235,10 @@ const CanvasListPanel = ({
 }) => {
   const { theme } = useTheme$1();
   const panelRef = useRef(null);
+  at("canvas-list", events, () => {
+    var _a;
+    return (_a = panelRef.current) == null ? void 0 : _a.focus();
+  });
   const [selectedCanvasId, setSelectedCanvasId] = useState(null);
   const [searchQuery, setSearchQuery] = useState("");
   const [isRefreshing, setIsRefreshing] = useState(false);
@@ -54837,10 +56298,10 @@ const CanvasListPanel = ({
     setIsRefreshing(true);
     if (events) {
       events.emit({
-        type: "custom",
+        type: "canvas:refresh",
         source: "canvas-list-panel",
         timestamp: Date.now(),
-        payload: { action: "refreshCanvases" }
+        payload: {}
       });
     }
     try {
@@ -62497,6 +63958,936 @@ const ChangeImpactAnalysisExplainerPanel = ({ className }) => {
     }
   );
 };
+const Step1TraditionalDevelopment = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 250", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "100", cy: "100", r: "30", fill: "#3b82f6", stroke: "#60a5fa", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "105", textAnchor: "middle", fill: "#fff", fontSize: "28", children: "👨‍💻" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "150", textAnchor: "middle", fill: "#94a3b8", fontSize: "12", fontWeight: "600", children: "DEVELOPER" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "140", y1: "100", x2: "220", y2: "100", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen)" }),
+        /* @__PURE__ */ jsx("text", { x: "180", y: "90", textAnchor: "middle", fill: "#10b981", fontSize: "10", fontWeight: "600", children: "Builds Code" }),
+        /* @__PURE__ */ jsx("text", { x: "180", y: "118", textAnchor: "middle", fill: "#10b981", fontSize: "9", children: "Gains Expertise" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "230", y: "70", width: "120", height: "60", fill: "#1e293b", stroke: "#475569", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "92", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "CODE" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "106", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "system.ts" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "120", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "features.ts" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "290", y1: "140", x2: "290", y2: "180", stroke: "#3b82f6", strokeWidth: "2", markerEnd: "url(#arrowblue)" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "165", fill: "#3b82f6", fontSize: "10", fontWeight: "600", children: "Monitors" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "230", y: "190", width: "120", height: "45", fill: "#064e3b", stroke: "#059669", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "210", textAnchor: "middle", fill: "#6ee7b7", fontSize: "11", fontWeight: "600", children: "PRODUCTION" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "224", textAnchor: "middle", fill: "#a7f3d0", fontSize: "9", children: "Running System" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 360 100 Q 420 100, 420 160 Q 420 220, 360 220",
+            stroke: "#fbbf24",
+            strokeWidth: "2",
+            fill: "none",
+            strokeDasharray: "5,5",
+            markerEnd: "url(#arrowyellow)"
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "160", fill: "#fbbf24", fontSize: "10", fontWeight: "600", children: "Developer" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "172", fill: "#fbbf24", fontSize: "10", fontWeight: "600", children: "Knowledge" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "184", fill: "#fbbf24", fontSize: "10", fontWeight: "600", children: "= Monitoring" })
+      ] }),
+      /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsx("marker", { id: "arrowgreen", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#10b981" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowblue", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#3b82f6" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowyellow", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#fbbf24" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#cbd5e1",
+      backgroundColor: "#1e293b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #475569"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Traditional Development:" }),
+      " Engineers built deep system knowledge while writing code. Their expertise was the monitoring system - they could debug because they understood every piece."
+    ] })
+  ] });
+};
+const Step2AgentDevelopment = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 250", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "100", cy: "100", r: "30", fill: "#3b82f6", stroke: "#60a5fa", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "105", textAnchor: "middle", fill: "#fff", fontSize: "28", children: "👨‍💻" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "150", textAnchor: "middle", fill: "#94a3b8", fontSize: "12", fontWeight: "600", children: "DEVELOPER" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "130", y1: "80", x2: "210", y2: "50", stroke: "#a78bfa", strokeWidth: "2", markerEnd: "url(#arrowpurple)" }),
+        /* @__PURE__ */ jsx("text", { x: "170", y: "55", textAnchor: "middle", fill: "#a78bfa", fontSize: "10", fontWeight: "600", children: "Directs" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "220", y: "20", width: "100", height: "50", fill: "#4c1d95", stroke: "#a78bfa", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "270", y: "42", textAnchor: "middle", fill: "#e9d5ff", fontSize: "24", children: "🤖" }),
+        /* @__PURE__ */ jsx("text", { x: "270", y: "63", textAnchor: "middle", fill: "#c4b5fd", fontSize: "10", fontWeight: "600", children: "AI AGENT" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "270", y1: "80", x2: "270", y2: "120", stroke: "#ef4444", strokeWidth: "2", markerEnd: "url(#arrowred)", strokeDasharray: "5,5" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "105", fill: "#ef4444", fontSize: "10", fontWeight: "600", children: "Generates" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "117", fill: "#ef4444", fontSize: "9", children: "Without Context" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "220", y: "130", width: "100", height: "60", fill: "#1e293b", stroke: "#ef4444", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "270", y: "150", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "CODE" }),
+        /* @__PURE__ */ jsx("text", { x: "270", y: "164", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "agent-gen.ts" }),
+        /* @__PURE__ */ jsx("text", { x: "270", y: "178", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "auto-feat.ts" }),
+        /* @__PURE__ */ jsx("text", { x: "245", y: "148", fill: "#ef4444", fontSize: "24", children: "⚠️" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "380", y: "130", width: "120", height: "60", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "152", textAnchor: "middle", fill: "#fca5a5", fontSize: "11", fontWeight: "600", children: "PRODUCTION" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "166", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: "Unknown Behavior" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "180", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: "No Understanding" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "330", y1: "160", x2: "370", y2: "160", stroke: "#64748b", strokeWidth: "2", markerEnd: "url(#arrowgray)" }),
+        /* @__PURE__ */ jsx("text", { x: "350", y: "150", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "Deploy" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 100 130 Q 100 200, 440 200",
+            stroke: "#ef4444",
+            strokeWidth: "3",
+            fill: "none",
+            strokeDasharray: "5,5"
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { x: "70", y: "225", fill: "#ef4444", fontSize: "11", fontWeight: "700", children: "❌ KNOWLEDGE GAP" }),
+        /* @__PURE__ */ jsx("text", { x: "240", y: "225", fill: "#ef4444", fontSize: "9", children: "Developer didn't build it = No debugging context" })
+      ] }),
+      /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsx("marker", { id: "arrowpurple", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#a78bfa" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowred", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#ef4444" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowgray", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#64748b" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#fca5a5",
+      backgroundColor: "#7f1d1d",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #ef4444"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "The Agent Gap:" }),
+      " AI generates code without building developer understanding. When issues arise in production, there's no expertise to rely on. Traditional monitoring can't fill this gap."
+    ] })
+  ] });
+};
+const Step3TheGap = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 320", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "THE MONITORING GAP" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "220", height: "250", fill: "#1e293b", stroke: "#475569", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "75", textAnchor: "middle", fill: "#10b981", fontSize: "12", fontWeight: "600", children: "TRADITIONAL (Before)" }),
+        /* @__PURE__ */ jsx("rect", { x: "60", y: "90", width: "180", height: "50", fill: "#064e3b", stroke: "#059669", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "108", textAnchor: "middle", fill: "#6ee7b7", fontSize: "11", fontWeight: "600", children: "Developer Expertise" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "122", textAnchor: "middle", fill: "#a7f3d0", fontSize: "9", children: "Built while coding" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "133", textAnchor: "middle", fill: "#a7f3d0", fontSize: "9", children: "Deep system knowledge" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "160", textAnchor: "middle", fill: "#94a3b8", fontSize: "10", children: "+" }),
+        /* @__PURE__ */ jsx("rect", { x: "60", y: "170", width: "180", height: "45", fill: "#0f172a", stroke: "#334155", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "188", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "Basic Monitoring" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "202", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "Logs, metrics, traces" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "235", textAnchor: "middle", fill: "#10b981", fontSize: "11", children: "=" }),
+        /* @__PURE__ */ jsx("rect", { x: "60", y: "245", width: "180", height: "40", fill: "#064e3b", stroke: "#059669", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "264", textAnchor: "middle", fill: "#6ee7b7", fontSize: "11", fontWeight: "700", children: "✓ Effective Monitoring" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "277", textAnchor: "middle", fill: "#a7f3d0", fontSize: "9", children: "Human knowledge filled gaps" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "340", y: "50", width: "220", height: "250", fill: "#1e293b", stroke: "#475569", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "75", textAnchor: "middle", fill: "#ef4444", fontSize: "12", fontWeight: "600", children: "AI-ERA (Now)" }),
+        /* @__PURE__ */ jsx("rect", { x: "360", y: "90", width: "180", height: "50", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "108", textAnchor: "middle", fill: "#fca5a5", fontSize: "11", fontWeight: "600", children: "❌ No Expertise" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "122", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: "AI wrote the code" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "133", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: "Developer has no context" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "160", textAnchor: "middle", fill: "#94a3b8", fontSize: "10", children: "+" }),
+        /* @__PURE__ */ jsx("rect", { x: "360", y: "170", width: "180", height: "45", fill: "#0f172a", stroke: "#334155", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "188", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "Basic Monitoring" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "202", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "Same logs, metrics, traces" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "235", textAnchor: "middle", fill: "#ef4444", fontSize: "11", children: "=" }),
+        /* @__PURE__ */ jsx("rect", { x: "360", y: "245", width: "180", height: "40", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "264", textAnchor: "middle", fill: "#fca5a5", fontSize: "11", fontWeight: "700", children: "❌ Monitoring Gap" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "277", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: "No knowledge to fill gaps" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("path", { d: "M 280 200 L 320 200", stroke: "#fbbf24", strokeWidth: "3", markerEnd: "url(#arrowyellow2)" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "190", textAnchor: "middle", fill: "#fbbf24", fontSize: "11", fontWeight: "700", children: "THE GAP" })
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrowyellow2", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#fbbf24" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#fef3c7",
+      backgroundColor: "#78350f",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "2px solid #fbbf24"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "The Critical Gap:" }),
+      " Traditional monitoring worked because developer expertise filled the gaps. With AI agents, that expertise is missing. ",
+      /* @__PURE__ */ jsx("strong", { children: "We need tools to encapsulate what was once in developers' heads." })
+    ] })
+  ] });
+};
+const Step4ImplicationsDevelopers = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 280", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "WHAT THIS MEANS FOR DEVELOPERS" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "250", height: "100", fill: "#1e293b", stroke: "#60a5fa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "165", y: "72", textAnchor: "middle", fill: "#60a5fa", fontSize: "12", fontWeight: "700", children: "Every Engineer = Team Lead" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "92", fill: "#94a3b8", fontSize: "10", children: "✓ Manages AI agents making changes" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "108", fill: "#94a3b8", fontSize: "10", children: "✓ Reviews agent-generated code" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "124", fill: "#94a3b8", fontSize: "10", children: "✓ Ensures quality & correctness" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "140", fill: "#10b981", fontSize: "10", fontWeight: "600", children: "→ Time shifts from coding to oversight" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "310", y: "50", width: "250", height: "100", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "435", y: "72", textAnchor: "middle", fill: "#fca5a5", fontSize: "12", fontWeight: "700", children: "The Challenge" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "92", fill: "#fca5a5", fontSize: "10", children: "❌ Can't fully trust agent output" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "108", fill: "#fca5a5", fontSize: "10", children: "❌ No context for debugging issues" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "124", fill: "#fca5a5", fontSize: "10", children: "❌ Traditional tools don't help" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "140", fill: "#fca5a5", fontSize: "10", fontWeight: "600", children: "→ Can't leverage agents without risk" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "170", width: "520", height: "90", fill: "#064e3b", stroke: "#10b981", strokeWidth: "3", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "195", textAnchor: "middle", fill: "#6ee7b7", fontSize: "13", fontWeight: "700", children: "WHAT DEVELOPERS NEED" }),
+        /* @__PURE__ */ jsxs("text", { x: "60", y: "218", fill: "#a7f3d0", fontSize: "11", children: [
+          "1. ",
+          /* @__PURE__ */ jsx("tspan", { fontWeight: "600", children: "Encode Expectations:" }),
+          " Define what the system should do"
+        ] }),
+        /* @__PURE__ */ jsxs("text", { x: "60", y: "235", fill: "#a7f3d0", fontSize: "11", children: [
+          "2. ",
+          /* @__PURE__ */ jsx("tspan", { fontWeight: "600", children: "Automatic Validation:" }),
+          " Verify agent changes against expectations"
+        ] }),
+        /* @__PURE__ */ jsxs("text", { x: "60", y: "252", fill: "#a7f3d0", fontSize: "11", children: [
+          "3. ",
+          /* @__PURE__ */ jsx("tspan", { fontWeight: "600", children: "Confidence to Deploy:" }),
+          " Trust that agents' work is correct"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#cbd5e1",
+      backgroundColor: "#1e293b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #475569"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "The Opportunity:" }),
+      " Developers have time to craft system expectations instead of writing every line. They need tools that turn those expectations into automated verification - making agent work trustworthy."
+    ] })
+  ] });
+};
+const AgentMonitoringGapExplainerPanel = ({
+  className
+}) => {
+  var _a;
+  const [activeSection, setActiveSection] = useState("traditional");
+  const sections2 = [
+    { id: "traditional", title: "Traditional Development", component: Step1TraditionalDevelopment },
+    { id: "agent-era", title: "Agent Era", component: Step2AgentDevelopment },
+    { id: "the-gap", title: "The Gap", component: Step3TheGap },
+    { id: "implications", title: "What Developers Need", component: Step4ImplicationsDevelopers }
+  ];
+  const ActiveComponent = ((_a = sections2.find((s) => s.id === activeSection)) == null ? void 0 : _a.component) || Step1TraditionalDevelopment;
+  return /* @__PURE__ */ jsxs("div", { className, style: {
+    backgroundColor: "#0f172a",
+    color: "#cbd5e1",
+    padding: "24px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    minHeight: "100vh"
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "24px" }, children: [
+      /* @__PURE__ */ jsx("h1", { style: {
+        fontSize: "24px",
+        fontWeight: "700",
+        color: "#f1f5f9",
+        marginBottom: "8px"
+      }, children: "The Agent Monitoring Gap" }),
+      /* @__PURE__ */ jsx("p", { style: {
+        fontSize: "14px",
+        color: "#94a3b8",
+        margin: 0
+      }, children: "Why traditional monitoring fails with AI-generated code" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      gap: "8px",
+      marginBottom: "24px",
+      borderBottom: "1px solid #334155",
+      paddingBottom: "12px"
+    }, children: sections2.map((section) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActiveSection(section.id),
+        style: {
+          padding: "8px 16px",
+          backgroundColor: activeSection === section.id ? "#3b82f6" : "#1e293b",
+          color: activeSection === section.id ? "#fff" : "#94a3b8",
+          border: "1px solid",
+          borderColor: activeSection === section.id ? "#60a5fa" : "#334155",
+          borderRadius: "6px",
+          cursor: "pointer",
+          fontSize: "13px",
+          fontWeight: activeSection === section.id ? "600" : "400",
+          transition: "all 0.2s"
+        },
+        children: section.title
+      },
+      section.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { style: {
+      backgroundColor: "#1e293b",
+      borderRadius: "8px",
+      padding: "24px",
+      border: "1px solid #334155"
+    }, children: /* @__PURE__ */ jsx(ActiveComponent, {}) })
+  ] });
+};
+const Step1WhatAreStories = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 240", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "STORIES = HOW HUMANS UNDERSTAND SYSTEMS" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "240", height: "170", fill: "#1e293b", stroke: "#ef4444", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "73", textAnchor: "middle", fill: "#fca5a5", fontSize: "12", fontWeight: "700", children: "❌ Traditional Monitoring" }),
+        /* @__PURE__ */ jsx("rect", { x: "60", y: "85", width: "200", height: "120", fill: "#0f172a", stroke: "#334155", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "100", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: "span.duration = 1234ms" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "115", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: "http.status_code = 200" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "130", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: "db.query.count = 12" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "145", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: 'event.type = "order.created"' }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "160", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: 'trace.id = "abc123..."' }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "175", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: "error.count = 0" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "190", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: "..." }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "215", textAnchor: "middle", fill: "#fca5a5", fontSize: "10", fontStyle: "italic", children: "Needle in haystack" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "290", y1: "135", x2: "310", y2: "135", stroke: "#3b82f6", strokeWidth: "2", markerEnd: "url(#arrowblue)" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "127", textAnchor: "middle", fill: "#3b82f6", fontSize: "10", fontWeight: "600", children: "vs" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "320", y: "50", width: "240", height: "170", fill: "#064e3b", stroke: "#10b981", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "73", textAnchor: "middle", fill: "#6ee7b7", fontSize: "12", fontWeight: "700", children: "✓ System Stories" }),
+        /* @__PURE__ */ jsx("rect", { x: "340", y: "85", width: "200", height: "120", fill: "#022c22", stroke: "#059669", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "103", textAnchor: "middle", fill: "#d1fae5", fontSize: "11", fontWeight: "600", children: 'Story: "User Checkout"' }),
+        /* @__PURE__ */ jsx("text", { x: "350", y: "120", fill: "#a7f3d0", fontSize: "9", children: "When user completes checkout:" }),
+        /* @__PURE__ */ jsx("text", { x: "355", y: "135", fill: "#a7f3d0", fontSize: "9", children: "• Payment processes in <2s" }),
+        /* @__PURE__ */ jsx("text", { x: "355", y: "148", fill: "#a7f3d0", fontSize: "9", children: "• Order confirmation sent" }),
+        /* @__PURE__ */ jsx("text", { x: "355", y: "161", fill: "#a7f3d0", fontSize: "9", children: "• Inventory decremented" }),
+        /* @__PURE__ */ jsx("text", { x: "355", y: "174", fill: "#a7f3d0", fontSize: "9", children: "• Analytics event fired" }),
+        /* @__PURE__ */ jsx("text", { x: "355", y: "187", fill: "#a7f3d0", fontSize: "9", children: "• User redirected to success" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "215", textAnchor: "middle", fill: "#6ee7b7", fontSize: "10", fontStyle: "italic", children: "Human-readable expectations" })
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrowblue", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#3b82f6" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#d1fae5",
+      backgroundColor: "#064e3b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #059669"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Stories work because:" }),
+      ' Humans naturally think in narratives, not metrics. "User checkout should take <2s and send confirmation" is clearer than tracking 50 telemetry signals.'
+    ] })
+  ] });
+};
+const Step2HowStoriesWork = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 280", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "30", y: "30", width: "180", height: "80", fill: "#1e293b", stroke: "#60a5fa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "52", textAnchor: "middle", fill: "#60a5fa", fontSize: "11", fontWeight: "700", children: "1. DEFINE STORY" }),
+        /* @__PURE__ */ jsx("text", { x: "40", y: "70", fill: "#cbd5e1", fontSize: "9", children: 'Story: "Payment Flow"' }),
+        /* @__PURE__ */ jsx("text", { x: "45", y: "84", fill: "#94a3b8", fontSize: "8", children: "Expected behavior:" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "96", fill: "#94a3b8", fontSize: "8", children: "• Charge succeeds" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "105", fill: "#94a3b8", fontSize: "8", children: "• Receipt generated" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "220", y1: "70", x2: "270", y2: "70", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen)" }),
+        /* @__PURE__ */ jsx("text", { x: "245", y: "65", textAnchor: "middle", fill: "#10b981", fontSize: "9", children: "Maps to" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "280", y: "30", width: "180", height: "80", fill: "#0f172a", stroke: "#6366f1", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "370", y: "52", textAnchor: "middle", fill: "#a78bfa", fontSize: "11", fontWeight: "700", children: "2. TELEMETRY SIGNALS" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "70", fill: "#c4b5fd", fontSize: "8", fontFamily: "monospace", children: 'span: "ProcessPayment"' }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "82", fill: "#c4b5fd", fontSize: "8", fontFamily: "monospace", children: 'event: "payment.success"' }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "94", fill: "#c4b5fd", fontSize: "8", fontFamily: "monospace", children: 'event: "receipt.generated"' }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "106", fill: "#c4b5fd", fontSize: "8", fontFamily: "monospace", children: "attr: amount, customer_id" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "370", y1: "120", x2: "370", y2: "160", stroke: "#fbbf24", strokeWidth: "2", markerEnd: "url(#arrowyellow)" }),
+        /* @__PURE__ */ jsx("text", { x: "400", y: "145", fill: "#fbbf24", fontSize: "9", children: "Monitors" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "280", y: "170", width: "180", height: "80", fill: "#064e3b", stroke: "#059669", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "370", y: "192", textAnchor: "middle", fill: "#6ee7b7", fontSize: "11", fontWeight: "700", children: "3. PRODUCTION SYSTEM" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "210", fill: "#a7f3d0", fontSize: "9", children: "Real telemetry events" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "224", fill: "#a7f3d0", fontSize: "9", children: "flowing from system" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "238", fill: "#10b981", fontSize: "9", fontWeight: "600", children: "✓ Story validated in real-time" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 270 210 Q 120 210, 120 120",
+            stroke: "#3b82f6",
+            strokeWidth: "2",
+            fill: "none",
+            strokeDasharray: "5,5",
+            markerEnd: "url(#arrowblue2)"
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { x: "180", y: "230", fill: "#3b82f6", fontSize: "9", children: "Alert if story breaks" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "120", cy: "195", r: "25", fill: "#3b82f6", stroke: "#60a5fa", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "200", textAnchor: "middle", fill: "#fff", fontSize: "20", children: "👨‍💻" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "235", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", fontWeight: "600", children: "ENGINEER" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "247", textAnchor: "middle", fill: "#10b981", fontSize: "8", children: "Gets alerts" })
+      ] }),
+      /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsx("marker", { id: "arrowgreen", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#10b981" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowyellow", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#fbbf24" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowblue2", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#3b82f6" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#cbd5e1",
+      backgroundColor: "#1e293b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #475569"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "How it works:" }),
+      " Define expected behavior as a story → Map to telemetry signals → Monitor production in real-time → Get alerts when expectations are violated."
+    ] })
+  ] });
+};
+const Step3AvoidNeedleInHaystack = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 300", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "AVOIDING THE NEEDLE IN THE HAYSTACK" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "240", height: "220", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "73", textAnchor: "middle", fill: "#fca5a5", fontSize: "12", fontWeight: "700", children: "❌ Reactive Monitoring" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "88", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: '"Something is wrong, find it!"' }),
+        /* @__PURE__ */ jsx("rect", { x: "60", y: "100", width: "200", height: "130", fill: "#450a0a", stroke: "#991b1b", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "118", textAnchor: "middle", fill: "#7f1d1d", fontSize: "40", children: "🌾" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "155", fill: "#fca5a5", fontSize: "8", fontFamily: "monospace", children: "10,000 spans/sec" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "168", fill: "#fca5a5", fontSize: "8", fontFamily: "monospace", children: "500 services" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "181", fill: "#fca5a5", fontSize: "8", fontFamily: "monospace", children: "millions of events" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "194", fill: "#fca5a5", fontSize: "8", fontFamily: "monospace", children: "complex traces" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "207", fill: "#fca5a5", fontSize: "8", fontFamily: "monospace", children: "distributed systems" }),
+        /* @__PURE__ */ jsx("text", { x: "180", y: "175", fill: "#ef4444", fontSize: "28", children: "📍" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "248", textAnchor: "middle", fill: "#fca5a5", fontSize: "10", fontStyle: "italic", children: "Hours hunting for root cause" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "290", y1: "160", x2: "310", y2: "160", stroke: "#10b981", strokeWidth: "3", markerEnd: "url(#arrowgreen2)" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "150", textAnchor: "middle", fill: "#10b981", fontSize: "10", fontWeight: "700", children: "VS" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "320", y: "50", width: "240", height: "220", fill: "#064e3b", stroke: "#10b981", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "73", textAnchor: "middle", fill: "#6ee7b7", fontSize: "12", fontWeight: "700", children: "✓ Proactive Stories" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "88", textAnchor: "middle", fill: "#a7f3d0", fontSize: "9", children: '"This is what should happen"' }),
+        /* @__PURE__ */ jsx("rect", { x: "340", y: "100", width: "200", height: "130", fill: "#022c22", stroke: "#059669", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "120", textAnchor: "middle", fill: "#d1fae5", fontSize: "10", fontWeight: "600", children: "Expected Stories:" }),
+        /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: "355", cy: "138", r: "4", fill: "#10b981" }),
+          /* @__PURE__ */ jsx("text", { x: "365", y: "142", fill: "#a7f3d0", fontSize: "9", children: "✓ User Login (Active)" })
+        ] }),
+        /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: "355", cy: "155", r: "4", fill: "#10b981" }),
+          /* @__PURE__ */ jsx("text", { x: "365", y: "159", fill: "#a7f3d0", fontSize: "9", children: "✓ Checkout Flow (Active)" })
+        ] }),
+        /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: "355", cy: "172", r: "4", fill: "#10b981" }),
+          /* @__PURE__ */ jsx("text", { x: "365", y: "176", fill: "#a7f3d0", fontSize: "9", children: "✓ Payment Process (Active)" })
+        ] }),
+        /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: "355", cy: "189", r: "4", fill: "#ef4444" }),
+          /* @__PURE__ */ jsx("text", { x: "365", y: "193", fill: "#fca5a5", fontSize: "9", children: "❌ Email Send (VIOLATED!)" }),
+          /* @__PURE__ */ jsx("text", { x: "375", y: "203", fill: "#fbbf24", fontSize: "8", children: "→ Immediate alert" })
+        ] }),
+        /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: "355", cy: "215", r: "4", fill: "#10b981" }),
+          /* @__PURE__ */ jsx("text", { x: "365", y: "219", fill: "#a7f3d0", fontSize: "9", children: "✓ Analytics Track (Active)" })
+        ] }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "248", textAnchor: "middle", fill: "#6ee7b7", fontSize: "10", fontStyle: "italic", children: "Know immediately what broke" })
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrowgreen2", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#10b981" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#d1fae5",
+      backgroundColor: "#064e3b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #059669"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "The Key Insight:" }),
+      " Instead of searching millions of events for problems, define expected behaviors upfront. When a story is violated, you know exactly what broke and why."
+    ] })
+  ] });
+};
+const Step4AgentIntegration = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 340", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "STORIES MAKE AGENT WORK TRUSTWORTHY" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "160", height: "80", fill: "#4c1d95", stroke: "#a78bfa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "70", textAnchor: "middle", fill: "#e9d5ff", fontSize: "11", fontWeight: "700", children: "1. AGENT WRITES CODE" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "88", textAnchor: "middle", fill: "#e9d5ff", fontSize: "24", children: "🤖" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "110", textAnchor: "middle", fill: "#c4b5fd", fontSize: "9", children: "Makes change to" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "122", textAnchor: "middle", fill: "#c4b5fd", fontSize: "9", children: "checkout flow" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "210", y1: "90", x2: "270", y2: "90", stroke: "#3b82f6", strokeWidth: "2", markerEnd: "url(#arrowblue3)" }),
+        /* @__PURE__ */ jsx("text", { x: "240", y: "82", textAnchor: "middle", fill: "#3b82f6", fontSize: "9", children: "Deploy" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "280", y: "50", width: "160", height: "80", fill: "#1e293b", stroke: "#60a5fa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "360", y: "70", textAnchor: "middle", fill: "#60a5fa", fontSize: "11", fontWeight: "700", children: "2. STORIES VALIDATE" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "90", fill: "#94a3b8", fontSize: "9", children: 'Story: "Checkout"' }),
+        /* @__PURE__ */ jsx("text", { x: "295", y: "103", fill: "#a7f3d0", fontSize: "8", children: "✓ Payment processes" }),
+        /* @__PURE__ */ jsx("text", { x: "295", y: "114", fill: "#fca5a5", fontSize: "8", children: "❌ Email not sent!" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "360", y1: "140", x2: "360", y2: "180", stroke: "#ef4444", strokeWidth: "2", markerEnd: "url(#arrowred)" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "165", fill: "#ef4444", fontSize: "9", fontWeight: "600", children: "Alert!" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "280", y: "190", width: "160", height: "80", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "360", y: "210", textAnchor: "middle", fill: "#fca5a5", fontSize: "11", fontWeight: "700", children: "3. IMMEDIATE FEEDBACK" }),
+        /* @__PURE__ */ jsx("text", { x: "360", y: "228", textAnchor: "middle", fill: "#fca5a5", fontSize: "24", children: "⚠️" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "250", fill: "#fca5a5", fontSize: "9", children: '"Agent broke checkout' }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "262", fill: "#fca5a5", fontSize: "9", children: 'confirmation emails"' })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 270 230 Q 220 230, 220 190",
+            stroke: "#fbbf24",
+            strokeWidth: "2",
+            fill: "none",
+            markerEnd: "url(#arrowyellow2)"
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { x: "235", y: "225", fill: "#fbbf24", fontSize: "9", children: "Fix & redeploy" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "190", width: "160", height: "80", fill: "#064e3b", stroke: "#10b981", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "210", textAnchor: "middle", fill: "#6ee7b7", fontSize: "11", fontWeight: "700", children: "4. CONFIDENCE" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "228", textAnchor: "middle", fill: "#10b981", fontSize: "24", children: "✓" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "250", fill: "#a7f3d0", fontSize: "9", children: "All stories pass =" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "262", fill: "#a7f3d0", fontSize: "9", children: "Safe to trust agent" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "290", width: "520", height: "40", fill: "#1e293b", stroke: "#60a5fa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "310", textAnchor: "middle", fill: "#60a5fa", fontSize: "11", fontWeight: "700", children: "RESULT: Engineers can leverage agents without fear" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "323", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "Stories act as automated acceptance tests for all agent changes" })
+      ] }),
+      /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsx("marker", { id: "arrowblue3", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#3b82f6" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowred", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#ef4444" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowyellow2", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#fbbf24" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#d1fae5",
+      backgroundColor: "#064e3b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #059669"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Why This Works:" }),
+      " Every engineer now spends time defining system stories instead of writing all code. Stories automatically verify agent changes in production. When all stories pass, you can trust the agent's work."
+    ] })
+  ] });
+};
+const SystemStoriesSolutionExplainerPanel = ({
+  className
+}) => {
+  var _a;
+  const [activeSection, setActiveSection] = useState("what");
+  const sections2 = [
+    { id: "what", title: "What Are Stories?", component: Step1WhatAreStories },
+    { id: "how", title: "How They Work", component: Step2HowStoriesWork },
+    { id: "avoid-haystack", title: "Avoid Haystack Problem", component: Step3AvoidNeedleInHaystack },
+    { id: "agent-integration", title: "Agent Integration", component: Step4AgentIntegration }
+  ];
+  const ActiveComponent = ((_a = sections2.find((s) => s.id === activeSection)) == null ? void 0 : _a.component) || Step1WhatAreStories;
+  return /* @__PURE__ */ jsxs("div", { className, style: {
+    backgroundColor: "#0f172a",
+    color: "#cbd5e1",
+    padding: "24px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    minHeight: "100vh"
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "24px" }, children: [
+      /* @__PURE__ */ jsx("h1", { style: {
+        fontSize: "24px",
+        fontWeight: "700",
+        color: "#f1f5f9",
+        marginBottom: "8px"
+      }, children: "System Stories: The Solution" }),
+      /* @__PURE__ */ jsx("p", { style: {
+        fontSize: "14px",
+        color: "#94a3b8",
+        margin: 0
+      }, children: "How stories transform telemetry into trustworthy agent monitoring" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      gap: "8px",
+      marginBottom: "24px",
+      borderBottom: "1px solid #334155",
+      paddingBottom: "12px",
+      flexWrap: "wrap"
+    }, children: sections2.map((section) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActiveSection(section.id),
+        style: {
+          padding: "8px 16px",
+          backgroundColor: activeSection === section.id ? "#3b82f6" : "#1e293b",
+          color: activeSection === section.id ? "#fff" : "#94a3b8",
+          border: "1px solid",
+          borderColor: activeSection === section.id ? "#60a5fa" : "#334155",
+          borderRadius: "6px",
+          cursor: "pointer",
+          fontSize: "13px",
+          fontWeight: activeSection === section.id ? "600" : "400",
+          transition: "all 0.2s"
+        },
+        children: section.title
+      },
+      section.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { style: {
+      backgroundColor: "#1e293b",
+      borderRadius: "8px",
+      padding: "24px",
+      border: "1px solid #334155"
+    }, children: /* @__PURE__ */ jsx(ActiveComponent, {}) })
+  ] });
+};
+const Step1AgentAdoption = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 280", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "THE AGENT REVOLUTION IS HERE" }),
+      /* @__PURE__ */ jsx("line", { x1: "50", y1: "100", x2: "550", y2: "100", stroke: "#475569", strokeWidth: "3" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "100", cy: "100", r: "8", fill: "#64748b" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "125", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "2020" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "140", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "GPT-3" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "152", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "Copilot beta" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "220", cy: "100", r: "10", fill: "#3b82f6" }),
+        /* @__PURE__ */ jsx("text", { x: "220", y: "125", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "2022" }),
+        /* @__PURE__ */ jsx("text", { x: "220", y: "140", textAnchor: "middle", fill: "#60a5fa", fontSize: "9", children: "ChatGPT" }),
+        /* @__PURE__ */ jsx("text", { x: "220", y: "152", textAnchor: "middle", fill: "#60a5fa", fontSize: "9", children: "GitHub Copilot GA" }),
+        /* @__PURE__ */ jsx("text", { x: "220", y: "164", textAnchor: "middle", fill: "#60a5fa", fontSize: "9", children: "~30% code assist" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "380", cy: "100", r: "12", fill: "#8b5cf6" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "125", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "2024" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "140", textAnchor: "middle", fill: "#c4b5fd", fontSize: "9", children: "Claude Sonnet 3.5" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "152", textAnchor: "middle", fill: "#c4b5fd", fontSize: "9", children: "Cursor, Claude Code" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "164", textAnchor: "middle", fill: "#c4b5fd", fontSize: "9", children: "Agents write entire features" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "176", textAnchor: "middle", fill: "#a78bfa", fontSize: "9", fontWeight: "600", children: "~50-80% agent-written" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "500", cy: "100", r: "14", fill: "#10b981" }),
+        /* @__PURE__ */ jsx("text", { x: "500", y: "125", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "700", children: "2025+" }),
+        /* @__PURE__ */ jsx("text", { x: "500", y: "140", textAnchor: "middle", fill: "#6ee7b7", fontSize: "9", children: "Autonomous agents" }),
+        /* @__PURE__ */ jsx("text", { x: "500", y: "152", textAnchor: "middle", fill: "#6ee7b7", fontSize: "9", children: "Full feature ownership" }),
+        /* @__PURE__ */ jsx("text", { x: "500", y: "164", textAnchor: "middle", fill: "#6ee7b7", fontSize: "9", children: "Engineers = reviewers" }),
+        /* @__PURE__ */ jsx("text", { x: "500", y: "176", textAnchor: "middle", fill: "#10b981", fontSize: "9", fontWeight: "700", children: "~90%+ agent-written" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 100 250 Q 220 240, 380 200 Q 440 180, 500 150",
+            stroke: "#10b981",
+            strokeWidth: "3",
+            fill: "none",
+            markerEnd: "url(#arrowgreen)"
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "230", textAnchor: "middle", fill: "#10b981", fontSize: "11", fontWeight: "600", children: "Exponential Agent Adoption" })
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrowgreen", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#10b981" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#d1fae5",
+      backgroundColor: "#064e3b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #059669"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "200%+ YoY Growth:" }),
+      ` AI coding assistants went from autocomplete to writing entire features in 3 years. GitHub Copilot, Cursor, Claude Code are now table stakes. The question isn't "if" but "how much" code is agent-generated.`
+    ] })
+  ] });
+};
+const Step2GrowingGap = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 300", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "THE EXPERIENCE GAP IS GROWING" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "220", height: "220", fill: "#1e293b", stroke: "#60a5fa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "72", textAnchor: "middle", fill: "#60a5fa", fontSize: "12", fontWeight: "700", children: "CODE VOLUME" }),
+        /* @__PURE__ */ jsx("rect", { x: "60", y: "220", width: "40", height: "30", fill: "#3b82f6" }),
+        /* @__PURE__ */ jsx("text", { x: "80", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2020" }),
+        /* @__PURE__ */ jsx("rect", { x: "110", y: "190", width: "40", height: "60", fill: "#3b82f6" }),
+        /* @__PURE__ */ jsx("text", { x: "130", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2022" }),
+        /* @__PURE__ */ jsx("rect", { x: "160", y: "140", width: "40", height: "110", fill: "#6366f1" }),
+        /* @__PURE__ */ jsx("text", { x: "180", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2024" }),
+        /* @__PURE__ */ jsx("rect", { x: "210", y: "90", width: "40", height: "160", fill: "#8b5cf6" }),
+        /* @__PURE__ */ jsx("text", { x: "230", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2026" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "95", textAnchor: "middle", fill: "#a78bfa", fontSize: "20", children: "📈" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "115", textAnchor: "middle", fill: "#c4b5fd", fontSize: "10", fontWeight: "600", children: "10x more code" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "128", textAnchor: "middle", fill: "#c4b5fd", fontSize: "9", children: "Agents ship faster" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "340", y: "50", width: "220", height: "220", fill: "#1e293b", stroke: "#ef4444", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "72", textAnchor: "middle", fill: "#fca5a5", fontSize: "12", fontWeight: "700", children: "DEVELOPER CONTEXT" }),
+        /* @__PURE__ */ jsx("rect", { x: "360", y: "140", width: "40", height: "110", fill: "#10b981" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2020" }),
+        /* @__PURE__ */ jsx("rect", { x: "410", y: "170", width: "40", height: "80", fill: "#fbbf24" }),
+        /* @__PURE__ */ jsx("text", { x: "430", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2022" }),
+        /* @__PURE__ */ jsx("rect", { x: "460", y: "210", width: "40", height: "40", fill: "#f97316" }),
+        /* @__PURE__ */ jsx("text", { x: "480", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2024" }),
+        /* @__PURE__ */ jsx("rect", { x: "510", y: "235", width: "40", height: "15", fill: "#ef4444" }),
+        /* @__PURE__ */ jsx("text", { x: "530", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2026" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "95", textAnchor: "middle", fill: "#fca5a5", fontSize: "20", children: "📉" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "115", textAnchor: "middle", fill: "#fca5a5", fontSize: "10", fontWeight: "600", children: "90% less context" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "128", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: "Didn't write code" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("path", { d: "M 270 160 L 330 160", stroke: "#fbbf24", strokeWidth: "4", strokeDasharray: "8,4" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "155", textAnchor: "middle", fill: "#fbbf24", fontSize: "11", fontWeight: "700", children: "WIDENING" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "175", textAnchor: "middle", fill: "#fbbf24", fontSize: "11", fontWeight: "700", children: "GAP" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#fef3c7",
+      backgroundColor: "#78350f",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "2px solid #fbbf24"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "The Scissors Problem:" }),
+      " Code volume exploding while developer understanding plummets. Junior devs manage agent output without context. Senior devs lose touch with details. Traditional monitoring can't bridge this gap."
+    ] })
+  ] });
+};
+const Step3InfrastructureReady = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 280", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "TELEMETRY INFRASTRUCTURE IS MATURE" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "80", y: "200", width: "440", height: "60", fill: "#064e3b", stroke: "#059669", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "222", textAnchor: "middle", fill: "#6ee7b7", fontSize: "12", fontWeight: "700", children: "MATURE FOUNDATION" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "240", fill: "#a7f3d0", fontSize: "10", children: "✓ OpenTelemetry standard" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "253", fill: "#a7f3d0", fontSize: "10", children: "✓ Distributed tracing" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "240", fill: "#a7f3d0", fontSize: "10", children: "✓ Cloud-native observability" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "253", fill: "#a7f3d0", fontSize: "10", children: "✓ Wide adoption" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "80", y: "120", width: "440", height: "60", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", strokeDasharray: "8,4", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "142", textAnchor: "middle", fill: "#fca5a5", fontSize: "12", fontWeight: "700", children: "MISSING: INTELLIGENCE LAYER" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "160", fill: "#fca5a5", fontSize: "10", children: "❌ No behavior expectations" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "173", fill: "#fca5a5", fontSize: "10", children: "❌ No story understanding" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "160", fill: "#fca5a5", fontSize: "10", children: "❌ No agent validation" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "173", fill: "#fca5a5", fontSize: "10", children: "❌ Reactive, not proactive" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "80", y: "40", width: "440", height: "60", fill: "#1e40af", stroke: "#3b82f6", strokeWidth: "3", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "62", textAnchor: "middle", fill: "#60a5fa", fontSize: "13", fontWeight: "700", children: "PRINCIPAL AI: THE INTELLIGENCE LAYER" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "80", fill: "#bfdbfe", fontSize: "10", children: "✓ Story-based expectations" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "93", fill: "#bfdbfe", fontSize: "10", children: "✓ Telemetry synthesis" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "80", fill: "#bfdbfe", fontSize: "10", children: "✓ Agent workflow integration" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "93", fill: "#bfdbfe", fontSize: "10", children: "✓ Automated validation" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "300", y1: "110", x2: "300", y2: "115", stroke: "#3b82f6", strokeWidth: "2", markerEnd: "url(#arrowblue)" }),
+        /* @__PURE__ */ jsx("line", { x1: "300", y1: "190", x2: "300", y2: "195", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen2)" })
+      ] }),
+      /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsx("marker", { id: "arrowblue", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#3b82f6" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowgreen2", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#10b981" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#cbd5e1",
+      backgroundColor: "#1e293b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #475569"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Perfect Timing:" }),
+      " OpenTelemetry and distributed tracing solved the data collection problem. The infrastructure is ready for an intelligent layer that understands behavior, not just metrics."
+    ] })
+  ] });
+};
+const Step4MarketOpportunity = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 320", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "CONVERGING MARKET FORCES" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "250", height: "80", fill: "#4c1d95", stroke: "#a78bfa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "165", y: "72", textAnchor: "middle", fill: "#e9d5ff", fontSize: "12", fontWeight: "700", children: "🤖 AGENT ADOPTION" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "90", fill: "#c4b5fd", fontSize: "10", children: "• Every team using AI coding tools" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "104", fill: "#c4b5fd", fontSize: "10", children: "• 50-80% code now agent-generated" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "118", fill: "#c4b5fd", fontSize: "10", children: "• Growing dependency on automation" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "310", y: "50", width: "250", height: "80", fill: "#1e40af", stroke: "#3b82f6", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "435", y: "72", textAnchor: "middle", fill: "#bfdbfe", fontSize: "12", fontWeight: "700", children: "⚡ PRODUCTIVITY PRESSURE" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "90", fill: "#bfdbfe", fontSize: "10", children: "• Ship faster with fewer engineers" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "104", fill: "#bfdbfe", fontSize: "10", children: "• Do more with AI leverage" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "118", fill: "#bfdbfe", fontSize: "10", children: "• Need confidence to deploy" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "150", width: "250", height: "80", fill: "#7c2d12", stroke: "#f97316", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "165", y: "172", textAnchor: "middle", fill: "#fed7aa", fontSize: "12", fontWeight: "700", children: "🌐 SYSTEM COMPLEXITY" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "190", fill: "#fed7aa", fontSize: "10", children: "• Microservices proliferation" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "204", fill: "#fed7aa", fontSize: "10", children: "• Distributed systems everywhere" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "218", fill: "#fed7aa", fontSize: "10", children: "• Traditional monitoring overwhelmed" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "310", y: "150", width: "250", height: "80", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "435", y: "172", textAnchor: "middle", fill: "#fca5a5", fontSize: "12", fontWeight: "700", children: "🧠 KNOWLEDGE PROBLEM" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "190", fill: "#fca5a5", fontSize: "10", children: "• Junior devs managing agent output" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "204", fill: "#fca5a5", fontSize: "10", children: "• Team scaling loses context" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "218", fill: "#fca5a5", fontSize: "10", children: "• Tribal knowledge doesn't scale" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("path", { d: "M 165 140 L 300 270", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen3)" }),
+        /* @__PURE__ */ jsx("path", { d: "M 435 140 L 300 270", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen3)" }),
+        /* @__PURE__ */ jsx("path", { d: "M 165 240 L 300 270", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen3)" }),
+        /* @__PURE__ */ jsx("path", { d: "M 435 240 L 300 270", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen3)" }),
+        /* @__PURE__ */ jsx("circle", { cx: "300", cy: "275", r: "30", fill: "#064e3b", stroke: "#10b981", strokeWidth: "3" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "280", textAnchor: "middle", fill: "#6ee7b7", fontSize: "12", fontWeight: "700", children: "PERFECT" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "293", textAnchor: "middle", fill: "#6ee7b7", fontSize: "12", fontWeight: "700", children: "TIMING" })
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrowgreen3", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#10b981" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#d1fae5",
+      backgroundColor: "#064e3b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "2px solid #10b981"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Why Now:" }),
+      " Agent adoption + productivity pressure + system complexity + knowledge distribution = urgent need for story-based monitoring. The market timing has never been better."
+    ] })
+  ] });
+};
+const WhyNowAgentRevolutionExplainerPanel = ({
+  className
+}) => {
+  var _a;
+  const [activeSection, setActiveSection] = useState("adoption");
+  const sections2 = [
+    { id: "adoption", title: "Agent Adoption", component: Step1AgentAdoption },
+    { id: "growing-gap", title: "Growing Gap", component: Step2GrowingGap },
+    { id: "infrastructure", title: "Infrastructure Ready", component: Step3InfrastructureReady },
+    { id: "market", title: "Market Opportunity", component: Step4MarketOpportunity }
+  ];
+  const ActiveComponent = ((_a = sections2.find((s) => s.id === activeSection)) == null ? void 0 : _a.component) || Step1AgentAdoption;
+  return /* @__PURE__ */ jsxs("div", { className, style: {
+    backgroundColor: "#0f172a",
+    color: "#cbd5e1",
+    padding: "24px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    minHeight: "100vh"
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "24px" }, children: [
+      /* @__PURE__ */ jsx("h1", { style: {
+        fontSize: "24px",
+        fontWeight: "700",
+        color: "#f1f5f9",
+        marginBottom: "8px"
+      }, children: "Why Now: The Agent Revolution" }),
+      /* @__PURE__ */ jsx("p", { style: {
+        fontSize: "14px",
+        color: "#94a3b8",
+        margin: 0
+      }, children: "Understanding the perfect market timing for story-based monitoring" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      gap: "8px",
+      marginBottom: "24px",
+      borderBottom: "1px solid #334155",
+      paddingBottom: "12px",
+      flexWrap: "wrap"
+    }, children: sections2.map((section) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActiveSection(section.id),
+        style: {
+          padding: "8px 16px",
+          backgroundColor: activeSection === section.id ? "#3b82f6" : "#1e293b",
+          color: activeSection === section.id ? "#fff" : "#94a3b8",
+          border: "1px solid",
+          borderColor: activeSection === section.id ? "#60a5fa" : "#334155",
+          borderRadius: "6px",
+          cursor: "pointer",
+          fontSize: "13px",
+          fontWeight: activeSection === section.id ? "600" : "400",
+          transition: "all 0.2s"
+        },
+        children: section.title
+      },
+      section.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { style: {
+      backgroundColor: "#1e293b",
+      borderRadius: "8px",
+      padding: "24px",
+      border: "1px solid #334155"
+    }, children: /* @__PURE__ */ jsx(ActiveComponent, {}) })
+  ] });
+};
 class PanelFileSystemAdapter {
   constructor(options) {
     this.fileContentCache = /* @__PURE__ */ new Map();
@@ -62692,31 +65083,6 @@ const panels = [
       console.log("Canvas Editor Panel unmounting");
     }
   },
-  {
-    metadata: {
-      id: "principal-ai.trace-viewer",
-      name: "Trace Viewer",
-      icon: "📊",
-      version: "0.1.0",
-      author: "Principal AI",
-      description: "Visualizes OpenTelemetry traces captured from test runs as canvas diagrams",
-      slices: ["fileTree"]
-    },
-    component: TraceViewerPanel,
-    onMount: async (context) => {
-      var _a;
-      console.log(
-        "Trace Viewer Panel mounted",
-        (_a = context.currentScope.repository) == null ? void 0 : _a.path
-      );
-      if (context.hasSlice("fileTree") && !context.isSliceLoading("fileTree")) {
-        await context.refresh("repository", "fileTree");
-      }
-    },
-    onUnmount: async (_context) => {
-      console.log("Trace Viewer Panel unmounting");
-    }
-  },
   {
     metadata: {
       id: "principal-ai.canvas-detail",
@@ -62775,6 +65141,7 @@ const onPackageUnload = async () => {
   console.log("Panel package unloading - Principal View Panels");
 };
 export {
+  AgentMonitoringGapExplainerPanel,
   BookAnalogyExplainerPanel,
   CanvasDetailPanel,
   CanvasEditorPanel,
@@ -62791,9 +65158,10 @@ export {
   ProductionDebuggingExplainerPanel,
   RuntimeValidationExplainerPanel,
   ScenarioEnumerationExplainerPanel,
+  SystemStoriesSolutionExplainerPanel,
   TelemetryCoverageExplainerPanel,
   TestVsProductionExplainerPanel,
-  TraceViewerPanel,
+  WhyNowAgentRevolutionExplainerPanel,
   focusNodeTool,
   onPackageLoad,
   onPackageUnload,