@industry-theme/principal-view-panels 0.10.10 → 0.10.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/panels/StoryboardListPanel.d.ts.map +1 -1
  2. package/dist/panels.bundle.js +329 -236
  3. package/dist/panels.bundle.js.map +1 -1
  4. package/package.json +3 -3
package/dist/panels.bundle.js CHANGED
@@ -3,7 +3,7 @@
3
3
  try {
4
4
  if (typeof document != "undefined") {
5
5
  var elementStyle = document.createElement("style");
6
- 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}.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-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 14px);font-weight:var(--tab-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: 100px){.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-container.swipe-disabled{touch-action:pan-y pinch-zoom;overscroll-behavior-x: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}}.mobile-tab-layout{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.mobile-tab-content{flex:1;overflow:hidden;min-height:0}.mobile-tab-nav{display:flex;background:var(--tab-list-bg, #f5f5f5);border-top:1px solid var(--tab-border, #ddd);flex-shrink:0;padding:0;margin:0}.mobile-tab-button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:transparent;border:none;padding:14px 4px;padding-bottom:calc(14px + min(12px,env(safe-area-inset-bottom,0px)));cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 11px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #666);transition:color .2s ease;min-width:0}.mobile-tab-button:hover{color:var(--tab-text-hover, #333)}.mobile-tab-button.active{color:var(--mobile-tab-text-active, #007bff)}.mobile-tab-button .tab-icon{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--tab-icon-color, #999);transition:color .2s ease}.mobile-tab-button.active .tab-icon{color:var(--mobile-tab-icon-active, #007bff)}.mobile-tab-button .tab-label{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2;color:inherit;opacity:1}.mobile-tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:-2px;z-index:1}@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}'));
6
+ 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}'));
7
7
  document.head.appendChild(elementStyle);
8
8
  }
9
9
  } catch (e) {
@@ -12,12 +12,12 @@
12
12
  })();
13
13
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
14
14
  import * as React2 from "react";
15
- import React2__default, { createContext, useContext, useState, useCallback, useMemo, memo, forwardRef, useRef, useEffect, useLayoutEffect, createElement, useImperativeHandle } from "react";
15
+ import React2__default, { createContext, useContext, useState, memo, useCallback, useMemo, forwardRef, useLayoutEffect, useEffect, useRef, createElement, useImperativeHandle } from "react";
16
16
  import { createPortal } from "react-dom";
17
17
  import { CanvasConverter, renderWorkflow, computeAggregates, selectScenario, parseTemplate, ParsedTemplate, CanvasDiscovery, ExecutionValidator, LibraryDiscovery, getSpanDuration, parseNanoTime, getAttributeValue } from "@principal-ai/principal-view-core";
18
- import { StoryboardWorkflowsTreeCore } from "@principal-ade/dynamic-file-tree";
19
- var ThemeContext$1;
20
- var getThemeContext$1 = () => {
18
+ import { StoryboardWorkflowsTreeCore, CanvasListTreeCore } from "@principal-ade/dynamic-file-tree";
19
+ var ThemeContext$2;
20
+ var getThemeContext$2 = () => {
21
21
  if (typeof window !== "undefined") {
22
22
  const globalWindow = window;
23
23
  if (!globalWindow.__principlemd_theme_context__) {
@@ -25,13 +25,13 @@ var getThemeContext$1 = () => {
25
25
  }
26
26
  return globalWindow.__principlemd_theme_context__;
27
27
  } else {
28
- if (!ThemeContext$1) {
29
- ThemeContext$1 = createContext(void 0);
28
+ if (!ThemeContext$2) {
29
+ ThemeContext$2 = createContext(void 0);
30
30
  }
31
- return ThemeContext$1;
31
+ return ThemeContext$2;
32
32
  }
33
33
  };
34
- var ThemeContextSingleton = getThemeContext$1();
34
+ var ThemeContextSingleton = getThemeContext$2();
35
35
  var useTheme = () => {
36
36
  const context = useContext(ThemeContextSingleton);
37
37
  if (!context) {
@@ -1563,21 +1563,21 @@ function tanh(x) {
1563
1563
  }
1564
1564
  const interpolateZoom = (function zoomRho(rho, rho2, rho4) {
1565
1565
  function zoom2(p0, p1) {
1566
- 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;
1566
+ 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;
1567
1567
  if (d2 < epsilon2) {
1568
- S = Math.log(w1 / w0) / rho;
1568
+ S2 = Math.log(w1 / w0) / rho;
1569
1569
  i = function(t) {
1570
1570
  return [
1571
1571
  ux0 + t * dx,
1572
1572
  uy0 + t * dy,
1573
- w0 * Math.exp(rho * t * S)
1573
+ w0 * Math.exp(rho * t * S2)
1574
1574
  ];
1575
1575
  };
1576
1576
  } else {
1577
1577
  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);
1578
- S = (r1 - r0) / rho;
1578
+ S2 = (r1 - r0) / rho;
1579
1579
  i = function(t) {
1580
- var s2 = t * S, coshr0 = cosh(r0), u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s2 + r0) - sinh(r0));
1580
+ var s2 = t * S2, coshr0 = cosh(r0), u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s2 + r0) - sinh(r0));
1581
1581
  return [
1582
1582
  ux0 + u * dx,
1583
1583
  uy0 + u * dy,
@@ -1585,7 +1585,7 @@ const interpolateZoom = (function zoomRho(rho, rho2, rho4) {
1585
1585
  ];
1586
1586
  };
1587
1587
  }
1588
- i.duration = S * 1e3 * rho / Math.SQRT2;
1588
+ i.duration = S2 * 1e3 * rho / Math.SQRT2;
1589
1589
  return i;
1590
1590
  }
1591
1591
  zoom2.rho = function(_) {
@@ -4974,135 +4974,152 @@ function getDefaultExportFromCjs(x) {
4974
4974
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
4975
4975
  }
4976
4976
  var withSelector = { exports: {} };
4977
- var withSelector_production_min = {};
4977
+ var withSelector_production = {};
4978
4978
  var shim = { exports: {} };
4979
- var useSyncExternalStoreShim_production_min = {};
4979
+ var useSyncExternalStoreShim_production = {};
4980
4980
  /**
4981
4981
  * @license React
4982
- * use-sync-external-store-shim.production.min.js
4982
+ * use-sync-external-store-shim.production.js
4983
4983
  *
4984
- * Copyright (c) Facebook, Inc. and its affiliates.
4984
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
4985
4985
  *
4986
4986
  * This source code is licensed under the MIT license found in the
4987
4987
  * LICENSE file in the root directory of this source tree.
4988
4988
  */
4989
- var hasRequiredUseSyncExternalStoreShim_production_min;
4990
- function requireUseSyncExternalStoreShim_production_min() {
4991
- if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
4992
- hasRequiredUseSyncExternalStoreShim_production_min = 1;
4993
- var e = React2__default;
4994
- function h2(a, b) {
4995
- return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
4996
- }
4997
- var k = "function" === typeof Object.is ? Object.is : h2, l = e.useState, m = e.useEffect, n = e.useLayoutEffect, p2 = e.useDebugValue;
4998
- function q(a, b) {
4999
- var d = b(), f = l({ inst: { value: d, getSnapshot: b } }), c2 = f[0].inst, g = f[1];
5000
- n(function() {
5001
- c2.value = d;
5002
- c2.getSnapshot = b;
5003
- r2(c2) && g({ inst: c2 });
5004
- }, [a, d, b]);
5005
- m(function() {
5006
- r2(c2) && g({ inst: c2 });
5007
- return a(function() {
5008
- r2(c2) && g({ inst: c2 });
5009
- });
5010
- }, [a]);
5011
- p2(d);
5012
- return d;
4989
+ var hasRequiredUseSyncExternalStoreShim_production;
4990
+ function requireUseSyncExternalStoreShim_production() {
4991
+ if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
4992
+ hasRequiredUseSyncExternalStoreShim_production = 1;
4993
+ var React = React2__default;
4994
+ function is(x, y) {
4995
+ return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
4996
+ }
4997
+ var objectIs = "function" === typeof Object.is ? Object.is : is, useState2 = React.useState, useEffect2 = React.useEffect, useLayoutEffect2 = React.useLayoutEffect, useDebugValue2 = React.useDebugValue;
4998
+ function useSyncExternalStore$2(subscribe, getSnapshot) {
4999
+ var value = getSnapshot(), _useState = useState2({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
5000
+ useLayoutEffect2(
5001
+ function() {
5002
+ inst.value = value;
5003
+ inst.getSnapshot = getSnapshot;
5004
+ checkIfSnapshotChanged(inst) && forceUpdate({ inst });
5005
+ },
5006
+ [subscribe, value, getSnapshot]
5007
+ );
5008
+ useEffect2(
5009
+ function() {
5010
+ checkIfSnapshotChanged(inst) && forceUpdate({ inst });
5011
+ return subscribe(function() {
5012
+ checkIfSnapshotChanged(inst) && forceUpdate({ inst });
5013
+ });
5014
+ },
5015
+ [subscribe]
5016
+ );
5017
+ useDebugValue2(value);
5018
+ return value;
5013
5019
  }
5014
- function r2(a) {
5015
- var b = a.getSnapshot;
5016
- a = a.value;
5020
+ function checkIfSnapshotChanged(inst) {
5021
+ var latestGetSnapshot = inst.getSnapshot;
5022
+ inst = inst.value;
5017
5023
  try {
5018
- var d = b();
5019
- return !k(a, d);
5020
- } catch (f) {
5024
+ var nextValue = latestGetSnapshot();
5025
+ return !objectIs(inst, nextValue);
5026
+ } catch (error) {
5021
5027
  return true;
5022
5028
  }
5023
5029
  }
5024
- function t(a, b) {
5025
- return b();
5030
+ function useSyncExternalStore$1(subscribe, getSnapshot) {
5031
+ return getSnapshot();
5026
5032
  }
5027
- var u = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? t : q;
5028
- useSyncExternalStoreShim_production_min.useSyncExternalStore = void 0 !== e.useSyncExternalStore ? e.useSyncExternalStore : u;
5029
- return useSyncExternalStoreShim_production_min;
5033
+ var shim2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
5034
+ useSyncExternalStoreShim_production.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim2;
5035
+ return useSyncExternalStoreShim_production;
5030
5036
  }
5031
5037
  var hasRequiredShim;
5032
5038
  function requireShim() {
5033
5039
  if (hasRequiredShim) return shim.exports;
5034
5040
  hasRequiredShim = 1;
5035
5041
  {
5036
- shim.exports = requireUseSyncExternalStoreShim_production_min();
5042
+ shim.exports = requireUseSyncExternalStoreShim_production();
5037
5043
  }
5038
5044
  return shim.exports;
5039
5045
  }
5040
5046
  /**
5041
5047
  * @license React
5042
- * use-sync-external-store-shim/with-selector.production.min.js
5048
+ * use-sync-external-store-shim/with-selector.production.js
5043
5049
  *
5044
- * Copyright (c) Facebook, Inc. and its affiliates.
5050
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
5045
5051
  *
5046
5052
  * This source code is licensed under the MIT license found in the
5047
5053
  * LICENSE file in the root directory of this source tree.
5048
5054
  */
5049
- var hasRequiredWithSelector_production_min;
5050
- function requireWithSelector_production_min() {
5051
- if (hasRequiredWithSelector_production_min) return withSelector_production_min;
5052
- hasRequiredWithSelector_production_min = 1;
5053
- var h2 = React2__default, n = requireShim();
5054
- function p2(a, b) {
5055
- return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
5056
- }
5057
- var q = "function" === typeof Object.is ? Object.is : p2, r2 = n.useSyncExternalStore, t = h2.useRef, u = h2.useEffect, v = h2.useMemo, w = h2.useDebugValue;
5058
- withSelector_production_min.useSyncExternalStoreWithSelector = function(a, b, e, l, g) {
5059
- var c2 = t(null);
5060
- if (null === c2.current) {
5061
- var f = { hasValue: false, value: null };
5062
- c2.current = f;
5063
- } else f = c2.current;
5064
- c2 = v(function() {
5065
- function a2(a3) {
5066
- if (!c3) {
5067
- c3 = true;
5068
- d2 = a3;
5069
- a3 = l(a3);
5070
- if (void 0 !== g && f.hasValue) {
5071
- var b2 = f.value;
5072
- if (g(b2, a3)) return k = b2;
5055
+ var hasRequiredWithSelector_production;
5056
+ function requireWithSelector_production() {
5057
+ if (hasRequiredWithSelector_production) return withSelector_production;
5058
+ hasRequiredWithSelector_production = 1;
5059
+ var React = React2__default, shim2 = requireShim();
5060
+ function is(x, y) {
5061
+ return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
5062
+ }
5063
+ var objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim2.useSyncExternalStore, useRef2 = React.useRef, useEffect2 = React.useEffect, useMemo2 = React.useMemo, useDebugValue2 = React.useDebugValue;
5064
+ withSelector_production.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector2, isEqual) {
5065
+ var instRef = useRef2(null);
5066
+ if (null === instRef.current) {
5067
+ var inst = { hasValue: false, value: null };
5068
+ instRef.current = inst;
5069
+ } else inst = instRef.current;
5070
+ instRef = useMemo2(
5071
+ function() {
5072
+ function memoizedSelector(nextSnapshot) {
5073
+ if (!hasMemo) {
5074
+ hasMemo = true;
5075
+ memoizedSnapshot = nextSnapshot;
5076
+ nextSnapshot = selector2(nextSnapshot);
5077
+ if (void 0 !== isEqual && inst.hasValue) {
5078
+ var currentSelection = inst.value;
5079
+ if (isEqual(currentSelection, nextSnapshot))
5080
+ return memoizedSelection = currentSelection;
5081
+ }
5082
+ return memoizedSelection = nextSnapshot;
5073
5083
  }
5074
- return k = a3;
5084
+ currentSelection = memoizedSelection;
5085
+ if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
5086
+ var nextSelection = selector2(nextSnapshot);
5087
+ if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
5088
+ return memoizedSnapshot = nextSnapshot, currentSelection;
5089
+ memoizedSnapshot = nextSnapshot;
5090
+ return memoizedSelection = nextSelection;
5075
5091
  }
5076
- b2 = k;
5077
- if (q(d2, a3)) return b2;
5078
- var e2 = l(a3);
5079
- if (void 0 !== g && g(b2, e2)) return b2;
5080
- d2 = a3;
5081
- return k = e2;
5082
- }
5083
- var c3 = false, d2, k, m = void 0 === e ? null : e;
5084
- return [function() {
5085
- return a2(b());
5086
- }, null === m ? void 0 : function() {
5087
- return a2(m());
5088
- }];
5089
- }, [b, e, l, g]);
5090
- var d = r2(a, c2[0], c2[1]);
5091
- u(function() {
5092
- f.hasValue = true;
5093
- f.value = d;
5094
- }, [d]);
5095
- w(d);
5096
- return d;
5097
- };
5098
- return withSelector_production_min;
5092
+ var hasMemo = false, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
5093
+ return [
5094
+ function() {
5095
+ return memoizedSelector(getSnapshot());
5096
+ },
5097
+ null === maybeGetServerSnapshot ? void 0 : function() {
5098
+ return memoizedSelector(maybeGetServerSnapshot());
5099
+ }
5100
+ ];
5101
+ },
5102
+ [getSnapshot, getServerSnapshot, selector2, isEqual]
5103
+ );
5104
+ var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
5105
+ useEffect2(
5106
+ function() {
5107
+ inst.hasValue = true;
5108
+ inst.value = value;
5109
+ },
5110
+ [value]
5111
+ );
5112
+ useDebugValue2(value);
5113
+ return value;
5114
+ };
5115
+ return withSelector_production;
5099
5116
  }
5100
5117
  var hasRequiredWithSelector;
5101
5118
  function requireWithSelector() {
5102
5119
  if (hasRequiredWithSelector) return withSelector.exports;
5103
5120
  hasRequiredWithSelector = 1;
5104
5121
  {
5105
- withSelector.exports = requireWithSelector_production_min();
5122
+ withSelector.exports = requireWithSelector_production();
5106
5123
  }
5107
5124
  return withSelector.exports;
5108
5125
  }
@@ -5168,8 +5185,7 @@ function shallow$1(objA, objB) {
5168
5185
  return false;
5169
5186
  }
5170
5187
  if (objA instanceof Map && objB instanceof Map) {
5171
- if (objA.size !== objB.size)
5172
- return false;
5188
+ if (objA.size !== objB.size) return false;
5173
5189
  for (const [key, value] of objA) {
5174
5190
  if (!Object.is(value, objB.get(key))) {
5175
5191
  return false;
@@ -5178,8 +5194,7 @@ function shallow$1(objA, objB) {
5178
5194
  return true;
5179
5195
  }
5180
5196
  if (objA instanceof Set && objB instanceof Set) {
5181
- if (objA.size !== objB.size)
5182
- return false;
5197
+ if (objA.size !== objB.size) return false;
5183
5198
  for (const value of objA) {
5184
5199
  if (!objB.has(value)) {
5185
5200
  return false;
@@ -5191,8 +5206,8 @@ function shallow$1(objA, objB) {
5191
5206
  if (keysA.length !== Object.keys(objB).length) {
5192
5207
  return false;
5193
5208
  }
5194
- for (let i = 0; i < keysA.length; i++) {
5195
- if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
5209
+ for (const keyA of keysA) {
5210
+ if (!Object.prototype.hasOwnProperty.call(objB, keyA) || !Object.is(objA[keyA], objB[keyA])) {
5196
5211
  return false;
5197
5212
  }
5198
5213
  }
@@ -81550,8 +81565,8 @@ var terminalTheme = {
81550
81565
  }
81551
81566
  }
81552
81567
  };
81553
- var ThemeContext;
81554
- var getThemeContext = () => {
81568
+ var ThemeContext$1;
81569
+ var getThemeContext$1 = () => {
81555
81570
  if (typeof window !== "undefined") {
81556
81571
  const globalWindow = window;
81557
81572
  if (!globalWindow.__principlemd_theme_context__) {
@@ -81559,13 +81574,13 @@ var getThemeContext = () => {
81559
81574
  }
81560
81575
  return globalWindow.__principlemd_theme_context__;
81561
81576
  } else {
81562
- if (!ThemeContext) {
81563
- ThemeContext = createContext(void 0);
81577
+ if (!ThemeContext$1) {
81578
+ ThemeContext$1 = createContext(void 0);
81564
81579
  }
81565
- return ThemeContext;
81580
+ return ThemeContext$1;
81566
81581
  }
81567
81582
  };
81568
- getThemeContext();
81583
+ getThemeContext$1();
81569
81584
  var theme = terminalTheme;
81570
81585
  function highlightSearchMatches(content2, searchQuery) {
81571
81586
  if (!searchQuery || !searchQuery.trim()) {
@@ -86120,11 +86135,11 @@ function panelDataHelper$1(panelDataArray, panelData, layout) {
86120
86135
  pivotIndices
86121
86136
  };
86122
86137
  }
86123
- function C$1(e2) {
86138
+ function C(e2) {
86124
86139
  return { "--panel-background": e2.colors.background, "--panel-border": e2.colors.border, "--panel-handle": e2.colors.backgroundSecondary, "--panel-handle-hover": e2.colors.backgroundHover, "--panel-handle-active": e2.colors.primary, "--panel-button-bg": e2.colors.surface, "--panel-button-hover": e2.colors.backgroundHover, "--panel-button-border": e2.colors.border, "--panel-button-icon": e2.colors.textSecondary, "--panel-accent-bg": e2.colors.primary + "15" };
86125
86140
  }
86126
86141
  var z$1 = forwardRef(({ panels: o2, className: a2 = "", style: s2, theme: d2, minPanelWidth: u2 = 350, idealPanelWidth: p2 = 0.333, showSeparator: h2 = false, onPanelChange: m2, preventKeyboardScroll: f2 = true, disableSwipe: g = false }, v) => {
86127
- const b = useRef(null), y2 = useRef(false), w2 = useRef(null), x2 = C$1(d2);
86142
+ const b = useRef(null), y2 = useRef(false), w2 = useRef(null), x2 = C(d2);
86128
86143
  useImperativeHandle(v, () => ({ scrollToPanel: (e2) => {
86129
86144
  if (!b.current)
86130
86145
  return;
@@ -86162,12 +86177,12 @@ var z$1 = forwardRef(({ panels: o2, className: a2 = "", style: s2, theme: d2, mi
86162
86177
  }, [f2]), useEffect(() => () => {
86163
86178
  w2.current && clearTimeout(w2.current);
86164
86179
  }, []);
86165
- const S = o2.length, R2 = 2 * u2;
86180
+ const S2 = o2.length, R2 = 2 * u2;
86166
86181
  let N;
86167
- N = S === 1 || S === 2 ? "100%" : `max(${u2}px, ${100 * p2}%)`;
86182
+ N = S2 === 1 || S2 === 2 ? "100%" : `max(${u2}px, ${100 * p2}%)`;
86168
86183
  const E = React2__default.useId().replace(/:/g, "_");
86169
86184
  return jsxs(Fragment, { children: [
86170
- S === 2 && /* @__PURE__ */ jsx("style", { children: `
86185
+ S2 === 2 && /* @__PURE__ */ jsx("style", { children: `
86171
86186
  .snap-carousel-container[data-carousel-id="${E}"][data-panel-count="2"] .snap-carousel-panel {
86172
86187
  width: 100%;
86173
86188
  }
@@ -86177,7 +86192,7 @@ var z$1 = forwardRef(({ panels: o2, className: a2 = "", style: s2, theme: d2, mi
86177
86192
  }
86178
86193
  }
86179
86194
  ` }),
86180
- /* @__PURE__ */ jsx("div", { ref: b, className: `snap-carousel-container ${g ? "swipe-disabled" : ""} ${a2}`, style: { ...x2, ...s2, "--snap-carousel-min-width": `${u2}px`, "--snap-carousel-ideal-width": 100 * p2 + "%", "--snap-carousel-gap": h2 ? "1px" : "0px", "--snap-carousel-panel-width": N, "--snap-carousel-panel-count": S, "--snap-carousel-two-panel-threshold": `${R2}px` }, onScroll: (e2) => {
86195
+ /* @__PURE__ */ jsx("div", { ref: b, className: `snap-carousel-container ${g ? "swipe-disabled" : ""} ${a2}`, style: { ...x2, ...s2, "--snap-carousel-min-width": `${u2}px`, "--snap-carousel-ideal-width": 100 * p2 + "%", "--snap-carousel-gap": h2 ? "1px" : "0px", "--snap-carousel-panel-width": N, "--snap-carousel-panel-count": S2, "--snap-carousel-two-panel-threshold": `${R2}px` }, onScroll: (e2) => {
86181
86196
  if (!m2 || !b.current || b.current.children.length === 0)
86182
86197
  return;
86183
86198
  if (y2.current)
@@ -86189,13 +86204,13 @@ var z$1 = forwardRef(({ panels: o2, className: a2 = "", style: s2, theme: d2, mi
86189
86204
  a3 < o3 && (o3 = a3, r2 = i2);
86190
86205
  }
86191
86206
  m2(r2);
86192
- }, "data-panel-count": S, "data-carousel-id": E, children: o2.map((t2, n2) => /* @__PURE__ */ jsx("div", { className: "snap-carousel-panel", children: t2 }, n2)) })
86207
+ }, "data-panel-count": S2, "data-carousel-id": E, children: o2.map((t2, n2) => /* @__PURE__ */ jsx("div", { className: "snap-carousel-panel", children: t2 }, n2)) })
86193
86208
  ] });
86194
86209
  });
86195
86210
  z$1.displayName = "SnapCarousel";
86196
- var le$2;
86211
+ var le$1;
86197
86212
  var se$1;
86198
- (se$1 = le$2 || (le$2 = {})).DragStart = "dragStart", se$1.DragMove = "dragMove", se$1.DragEnd = "dragEnd", se$1.DragCancel = "dragCancel", se$1.DragOver = "dragOver", se$1.RegisterDroppable = "registerDroppable", se$1.SetDroppableDisabled = "setDroppableDisabled", se$1.UnregisterDroppable = "unregisterDroppable";
86213
+ (se$1 = le$1 || (le$1 = {})).DragStart = "dragStart", se$1.DragMove = "dragMove", se$1.DragEnd = "dragEnd", se$1.DragCancel = "dragCancel", se$1.DragOver = "dragOver", se$1.RegisterDroppable = "registerDroppable", se$1.SetDroppableDisabled = "setDroppableDisabled", se$1.UnregisterDroppable = "unregisterDroppable";
86199
86214
  var de$1 = /* @__PURE__ */ Object.freeze({ x: 0, y: 0 });
86200
86215
  var Te$1;
86201
86216
  var Ae$1;
@@ -86209,11 +86224,11 @@ var Ke$1;
86209
86224
  var rt$1;
86210
86225
  var ot$1;
86211
86226
  (ot$1 = rt$1 || (rt$1 = {}))[ot$1.RightClick = 2] = "RightClick";
86212
- var at$1;
86227
+ var at$2;
86213
86228
  var lt$1;
86214
86229
  var st$1;
86215
86230
  var ct$1;
86216
- (lt$1 = at$1 || (at$1 = {}))[lt$1.Pointer = 0] = "Pointer", lt$1[lt$1.DraggableRect = 1] = "DraggableRect", (ct$1 = st$1 || (st$1 = {}))[ct$1.TreeOrder = 0] = "TreeOrder", ct$1[ct$1.ReversedTreeOrder = 1] = "ReversedTreeOrder";
86231
+ (lt$1 = at$2 || (at$2 = {}))[lt$1.Pointer = 0] = "Pointer", lt$1[lt$1.DraggableRect = 1] = "DraggableRect", (ct$1 = st$1 || (st$1 = {}))[ct$1.TreeOrder = 0] = "TreeOrder", ct$1[ct$1.ReversedTreeOrder = 1] = "ReversedTreeOrder";
86217
86232
  ({ x: { [Te$1.Backward]: false, [Te$1.Forward]: false }, y: { [Te$1.Backward]: false, [Te$1.Forward]: false } });
86218
86233
  var pt$1;
86219
86234
  var ht$1;
@@ -94274,38 +94289,38 @@ function PanelResizeHandle({
94274
94289
  });
94275
94290
  }
94276
94291
  PanelResizeHandle.displayName = "PanelResizeHandle";
94277
- function C(e) {
94292
+ function S(e) {
94278
94293
  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" };
94279
94294
  }
94280
- const R = ({ leftPanel: n, rightPanel: r2, collapsibleSide: s2 = "left", defaultSize: c2 = 25, minSize: d = 5, className: u = "", collapsed: p2 = false, style: h2, showCollapseButton: m = false, animationDuration: f = 300, animationEasing: y = "cubic-bezier(0.4, 0, 0.2, 1)", onCollapseStart: w, onCollapseComplete: x, onExpandStart: S, onExpandComplete: R2, theme: N }) => {
94281
- const [E, D] = useState(p2), [z2, M] = useState(false), [T, A] = useState(false), [k, L] = useState(p2), [P, F] = useState(p2 ? 0 : c2), $2 = useRef(null), B = useRef(void 0), O2 = useRef(void 0), I = useRef(void 0), q = useCallback((e, t, n2) => {
94295
+ const R = ({ leftPanel: n, rightPanel: r2, collapsibleSide: s2 = "left", defaultSize: c2 = 25, minSize: d = 5, className: u = "", collapsed: p2 = false, style: h2, showCollapseButton: m = false, animationDuration: f = 300, animationEasing: y = "cubic-bezier(0.4, 0, 0.2, 1)", onCollapseStart: w, onCollapseComplete: x, onExpandStart: C2, onExpandComplete: R2, theme: E }) => {
94296
+ const [N, D2] = useState(p2), [z2, M] = useState(false), [T, A] = useState(false), [k, L] = useState(p2), [P, F] = useState(p2 ? 0 : c2), $2 = useRef(null), B = useRef(void 0), O = useRef(void 0), I = useRef(void 0), q = useCallback((e, t, n2) => {
94282
94297
  if (!$2.current) return;
94283
- B.current && cancelAnimationFrame(B.current), O2.current = performance.now();
94298
+ B.current && cancelAnimationFrame(B.current), O.current = performance.now();
94284
94299
  const r3 = (o) => {
94285
- if (!O2.current || !$2.current) return;
94286
- const i = o - O2.current, a = Math.min(i / f, 1), l = a < 0.5 ? 4 * a * a * a : 1 - Math.pow(-2 * a + 2, 3) / 2, s3 = e + (t - e) * l;
94300
+ if (!O.current || !$2.current) return;
94301
+ const i = o - O.current, a = Math.min(i / f, 1), l = a < 0.5 ? 4 * a * a * a : 1 - Math.pow(-2 * a + 2, 3) / 2, s3 = e + (t - e) * l;
94287
94302
  $2.current.resize(s3), a < 1 ? B.current = requestAnimationFrame(r3) : (0 === t ? $2.current.collapse() : $2.current.resize(t), M(false), n2 && n2());
94288
94303
  };
94289
94304
  B.current = requestAnimationFrame(r3);
94290
94305
  }, [f]), W = useCallback(() => {
94291
- z2 || T || (M(true), D(true), w && w(), q(P, 0, () => {
94306
+ z2 || T || (M(true), D2(true), w && w(), q(P, 0, () => {
94292
94307
  F(0), L(true), x && x();
94293
94308
  }));
94294
94309
  }, [z2, T, P, q, w, x]), _ = useCallback(() => {
94295
- z2 || T || (M(true), D(false), L(false), S && S(), q(0, c2, () => {
94310
+ z2 || T || (M(true), D2(false), L(false), C2 && C2(), q(0, c2, () => {
94296
94311
  F(c2), R2 && R2();
94297
94312
  }));
94298
- }, [z2, T, c2, q, S, R2]), j = useCallback(() => {
94299
- E ? _() : W();
94300
- }, [E, W, _]), H = useCallback((e) => {
94301
- z2 || (F(e), e > 0 && D(false));
94313
+ }, [z2, T, c2, q, C2, R2]), j = useCallback(() => {
94314
+ N ? _() : W();
94315
+ }, [N, W, _]), H = useCallback((e) => {
94316
+ z2 || (F(e), e > 0 && D2(false));
94302
94317
  }, [z2]), K = useCallback(() => {
94303
94318
  A(true);
94304
94319
  }, []), U = useCallback(() => {
94305
94320
  A(false);
94306
94321
  }, []);
94307
94322
  useEffect(() => {
94308
- p2 !== E && (p2 ? W() : _());
94323
+ p2 !== N && (p2 ? W() : _());
94309
94324
  }, [p2]), useEffect(() => {
94310
94325
  p2 && !z2 ? L(true) : p2 || z2 || L(false);
94311
94326
  }, [p2, z2]), useEffect(() => {
@@ -94314,30 +94329,27 @@ const R = ({ leftPanel: n, rightPanel: r2, collapsibleSide: s2 = "left", default
94314
94329
  e && cancelAnimationFrame(e), t && clearTimeout(t);
94315
94330
  };
94316
94331
  }, []);
94317
- const X2 = "left" === s2, Y = E ? X2 ? "▸" : "◂" : X2 ? "◂" : "▸", V = C(N), J = z2 && !T ? { transition: `flex ${f}ms ${y}` } : void 0, G = (e) => {
94332
+ const X2 = "left" === s2, Y2 = N ? X2 ? "▸" : "◂" : X2 ? "◂" : "▸", V = S(E), J = z2 && !T ? { transition: `flex ${f}ms ${y}` } : void 0, G = (e) => {
94318
94333
  let t = "hybrid-panel";
94319
- return e && (t += " collapsible-panel", z2 && !T && (t += " animating"), E && (t += " collapsed")), t;
94334
+ return e && (t += " collapsible-panel", z2 && !T && (t += " animating"), N && (t += " collapsed")), t;
94320
94335
  };
94321
94336
  return jsx("div", { className: `animated-resizable-layout ${u}`, style: { ...V, ...h2 }, children: /* @__PURE__ */ jsxs(PanelGroup, { direction: "horizontal", onLayout: U, children: [
94322
- /* @__PURE__ */ jsx(Panel, { ref: X2 ? $2 : void 0, collapsible: X2, defaultSize: X2 ? p2 ? 0 : c2 : void 0, minSize: X2 ? d : 30, collapsedSize: 0, onResize: X2 ? H : void 0, onCollapse: X2 ? () => D(true) : void 0, onExpand: X2 ? () => D(false) : void 0, className: G(X2), style: X2 ? J : void 0, children: /* @__PURE__ */ jsx("div", { className: "panel-content-wrapper", style: { opacity: X2 && E ? 0 : 1, transition: z2 ? `opacity ${0.5 * f}ms ${y}` : "none" }, children: n }) }),
94323
- /* @__PURE__ */ jsx(PanelResizeHandle, { className: "resize-handle " + (k ? "collapsed" : ""), onDragging: K, style: k ? { visibility: "hidden", width: 0 } : void 0, children: m && /* @__PURE__ */ jsx("div", { className: "handle-bar", children: /* @__PURE__ */ jsx("button", { onClick: j, className: "collapse-toggle", disabled: z2, "aria-label": E ? "Expand panel" : "Collapse panel", children: Y }) }) }),
94324
- /* @__PURE__ */ jsx(Panel, { ref: X2 ? void 0 : $2, collapsible: !X2, defaultSize: X2 ? void 0 : p2 ? 0 : c2, minSize: X2 ? 30 : d, collapsedSize: 0, onResize: X2 ? void 0 : H, onCollapse: X2 ? void 0 : () => D(true), onExpand: X2 ? void 0 : () => D(false), className: G(!X2), style: X2 ? void 0 : J, children: /* @__PURE__ */ jsx("div", { className: "panel-content-wrapper", style: { opacity: !X2 && E ? 0 : 1, transition: z2 ? `opacity ${0.5 * f}ms ${y}` : "none" }, children: r2 }) })
94337
+ /* @__PURE__ */ jsx(Panel, { ref: X2 ? $2 : void 0, collapsible: X2, defaultSize: X2 ? p2 ? 0 : c2 : void 0, minSize: X2 ? d : 30, collapsedSize: 0, onResize: X2 ? H : void 0, onCollapse: X2 ? () => D2(true) : void 0, onExpand: X2 ? () => D2(false) : void 0, className: G(X2), style: X2 ? J : void 0, children: /* @__PURE__ */ jsx("div", { className: "panel-content-wrapper", style: { opacity: X2 && N ? 0 : 1, transition: z2 ? `opacity ${0.5 * f}ms ${y}` : "none" }, children: n }) }),
94338
+ /* @__PURE__ */ jsx(PanelResizeHandle, { className: "resize-handle " + (k ? "collapsed" : ""), onDragging: K, style: k ? { visibility: "hidden", width: 0 } : void 0, children: m && /* @__PURE__ */ jsx("div", { className: "handle-bar", children: /* @__PURE__ */ jsx("button", { onClick: j, className: "collapse-toggle", disabled: z2, "aria-label": N ? "Expand panel" : "Collapse panel", children: Y2 }) }) }),
94339
+ /* @__PURE__ */ jsx(Panel, { ref: X2 ? void 0 : $2, collapsible: !X2, defaultSize: X2 ? void 0 : p2 ? 0 : c2, minSize: X2 ? 30 : d, collapsedSize: 0, onResize: X2 ? void 0 : H, onCollapse: X2 ? void 0 : () => D2(true), onExpand: X2 ? void 0 : () => D2(false), className: G(!X2), style: X2 ? void 0 : J, children: /* @__PURE__ */ jsx("div", { className: "panel-content-wrapper", style: { opacity: !X2 && N ? 0 : 1, transition: z2 ? `opacity ${0.5 * f}ms ${y}` : "none" }, children: r2 }) })
94325
94340
  ] }) });
94326
- }, z = forwardRef(({ panels: o, className: a = "", style: s2, theme: d, minPanelWidth: u = 350, idealPanelWidth: p2 = 0.333, showSeparator: h2 = false, onPanelChange: m, preventKeyboardScroll: f = true, disableSwipe: g = false }, v) => {
94327
- const b = useRef(null), y = useRef(false), w = useRef(null), x = C(d);
94328
- useImperativeHandle(v, () => ({ scrollToPanel: (e) => {
94329
- if (!b.current) return;
94330
- const t = b.current, n = t.children[e];
94341
+ }, z = forwardRef(({ panels: o, className: a = "", style: s2, theme: d, minPanelWidth: u = 350, idealPanelWidth: p2 = 0.333, showSeparator: h2 = false, onPanelChange: m, preventKeyboardScroll: f = true }, g) => {
94342
+ const v = useRef(null), b = S(d);
94343
+ useImperativeHandle(g, () => ({ scrollToPanel: (e) => {
94344
+ if (!v.current) return;
94345
+ const t = v.current, n = t.children[e];
94331
94346
  if (n) {
94332
- y.current = true, w.current && clearTimeout(w.current);
94333
94347
  const e2 = n.offsetLeft;
94334
- t.scrollTo({ left: e2, behavior: "smooth" }), w.current = setTimeout(() => {
94335
- y.current = false;
94336
- }, 500);
94348
+ t.scrollTo({ left: e2, behavior: "smooth" });
94337
94349
  }
94338
94350
  }, getCurrentPanel: () => {
94339
- if (!b.current || 0 === b.current.children.length) return 0;
94340
- const e = b.current, t = e.getBoundingClientRect().left;
94351
+ if (!v.current || 0 === v.current.children.length) return 0;
94352
+ const e = v.current, t = e.getBoundingClientRect().left;
94341
94353
  let n = 0, r2 = 1 / 0;
94342
94354
  for (let o2 = 0; o2 < e.children.length; o2++) {
94343
94355
  const i = e.children[o2].getBoundingClientRect(), a2 = Math.abs(i.left - t);
@@ -94346,8 +94358,8 @@ const R = ({ leftPanel: n, rightPanel: r2, collapsibleSide: s2 = "left", default
94346
94358
  return n;
94347
94359
  } }));
94348
94360
  useEffect(() => {
94349
- if (!f || !b.current) return;
94350
- const e = b.current, t = (e2) => {
94361
+ if (!f || !v.current) return;
94362
+ const e = v.current, t = (e2) => {
94351
94363
  const t2 = e2.target;
94352
94364
  if ("INPUT" === t2.tagName || "TEXTAREA" === t2.tagName || "SELECT" === t2.tagName || t2.isContentEditable || null !== t2.closest(".xterm") || null !== t2.closest('[contenteditable="true"]')) return;
94353
94365
  [" ", "Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown"].includes(e2.key) && e2.preventDefault();
@@ -94355,40 +94367,37 @@ const R = ({ leftPanel: n, rightPanel: r2, collapsibleSide: s2 = "left", default
94355
94367
  return e.addEventListener("keydown", t), () => {
94356
94368
  e.removeEventListener("keydown", t);
94357
94369
  };
94358
- }, [f]), useEffect(() => () => {
94359
- w.current && clearTimeout(w.current);
94360
- }, []);
94361
- const S = o.length, R2 = 2 * u;
94362
- let N;
94363
- N = 1 === S || 2 === S ? "100%" : `max(${u}px, ${100 * p2}%)`;
94364
- const E = React2__default.useId().replace(/:/g, "_");
94370
+ }, [f]);
94371
+ const y = o.length, w = 2 * u;
94372
+ let x;
94373
+ x = 1 === y || 2 === y ? "100%" : `max(${u}px, ${100 * p2}%)`;
94374
+ const C2 = React2__default.useId().replace(/:/g, "_");
94365
94375
  return jsxs(Fragment, { children: [
94366
- 2 === S && /* @__PURE__ */ jsx("style", { children: `
94367
- .snap-carousel-container[data-carousel-id="${E}"][data-panel-count="2"] .snap-carousel-panel {
94376
+ 2 === y && /* @__PURE__ */ jsx("style", { children: `
94377
+ .snap-carousel-container[data-carousel-id="${C2}"][data-panel-count="2"] .snap-carousel-panel {
94368
94378
  width: 100%;
94369
94379
  }
94370
- @container (min-width: ${R2}px) {
94371
- .snap-carousel-container[data-carousel-id="${E}"][data-panel-count="2"] .snap-carousel-panel {
94380
+ @container (min-width: ${w}px) {
94381
+ .snap-carousel-container[data-carousel-id="${C2}"][data-panel-count="2"] .snap-carousel-panel {
94372
94382
  width: 50%;
94373
94383
  }
94374
94384
  }
94375
94385
  ` }),
94376
- /* @__PURE__ */ jsx("div", { ref: b, className: `snap-carousel-container ${g ? "swipe-disabled" : ""} ${a}`, style: { ...x, ...s2, "--snap-carousel-min-width": `${u}px`, "--snap-carousel-ideal-width": 100 * p2 + "%", "--snap-carousel-gap": h2 ? "1px" : "0px", "--snap-carousel-panel-width": N, "--snap-carousel-panel-count": S, "--snap-carousel-two-panel-threshold": `${R2}px` }, onScroll: (e) => {
94377
- if (!m || !b.current || 0 === b.current.children.length) return;
94378
- if (y.current) return;
94379
- const t = b.current, n = t.getBoundingClientRect().left;
94386
+ /* @__PURE__ */ jsx("div", { ref: v, className: `snap-carousel-container ${a}`, style: { ...b, ...s2, "--snap-carousel-min-width": `${u}px`, "--snap-carousel-ideal-width": 100 * p2 + "%", "--snap-carousel-gap": h2 ? "1px" : "0px", "--snap-carousel-panel-width": x, "--snap-carousel-panel-count": y, "--snap-carousel-two-panel-threshold": `${w}px` }, onScroll: (e) => {
94387
+ if (!m || !v.current || 0 === v.current.children.length) return;
94388
+ const t = v.current, n = t.getBoundingClientRect().left;
94380
94389
  let r2 = 0, o2 = 1 / 0;
94381
94390
  for (let i = 0; i < t.children.length; i++) {
94382
94391
  const e2 = t.children[i].getBoundingClientRect(), a2 = Math.abs(e2.left - n);
94383
94392
  a2 < o2 && (o2 = a2, r2 = i);
94384
94393
  }
94385
94394
  m(r2);
94386
- }, "data-panel-count": S, "data-carousel-id": E, children: o.map((t, n) => /* @__PURE__ */ jsx("div", { className: "snap-carousel-panel", children: t }, n)) })
94395
+ }, "data-panel-count": y, "data-carousel-id": C2, children: o.map((t, n) => /* @__PURE__ */ jsx("div", { className: "snap-carousel-panel", children: t }, n)) })
94387
94396
  ] });
94388
94397
  });
94389
94398
  z.displayName = "SnapCarousel";
94390
- var le$1, se;
94391
- (se = le$1 || (le$1 = {})).DragStart = "dragStart", se.DragMove = "dragMove", se.DragEnd = "dragEnd", se.DragCancel = "dragCancel", se.DragOver = "dragOver", se.RegisterDroppable = "registerDroppable", se.SetDroppableDisabled = "setDroppableDisabled", se.UnregisterDroppable = "unregisterDroppable";
94399
+ var le, se;
94400
+ (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";
94392
94401
  const de = /* @__PURE__ */ Object.freeze({ x: 0, y: 0 });
94393
94402
  var Te, Ae;
94394
94403
  (Ae = Te || (Te = {}))[Ae.Forward = 1] = "Forward", Ae[Ae.Backward = -1] = "Backward";
@@ -94397,8 +94406,8 @@ var _e, je, He, Ke;
94397
94406
  ({ start: [He.Space, He.Enter], cancel: [He.Esc], end: [He.Space, He.Enter, He.Tab] });
94398
94407
  var rt, ot;
94399
94408
  (ot = rt || (rt = {}))[ot.RightClick = 2] = "RightClick";
94400
- var at, lt, st, ct;
94401
- (lt = at || (at = {}))[lt.Pointer = 0] = "Pointer", lt[lt.DraggableRect = 1] = "DraggableRect", (ct = st || (st = {}))[ct.TreeOrder = 0] = "TreeOrder", ct[ct.ReversedTreeOrder = 1] = "ReversedTreeOrder";
94409
+ var at$1, lt, st, ct;
94410
+ (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";
94402
94411
  ({ x: { [Te.Backward]: false, [Te.Forward]: false }, y: { [Te.Backward]: false, [Te.Forward]: false } });
94403
94412
  var pt, ht, mt;
94404
94413
  (ht = pt || (pt = {}))[ht.Always = 0] = "Always", ht[ht.BeforeDragging = 1] = "BeforeDragging", ht[ht.WhileDragging = 2] = "WhileDragging", (mt || (mt = {})).Optimized = "optimized";
@@ -98090,13 +98099,29 @@ const WorkflowScenariosPanel = ({
98090
98099
  }
98091
98100
  );
98092
98101
  };
98093
- var Ee = Object.defineProperty;
98094
- var Re = (o, e, t) => e in o ? Ee(o, e, { enumerable: true, configurable: true, writable: true, value: t }) : o[e] = t;
98095
- var le = (o, e, t) => Re(o, typeof e != "symbol" ? e + "" : e, t);
98096
- class Me {
98102
+ var ThemeContext;
98103
+ var getThemeContext = () => {
98104
+ if (typeof window !== "undefined") {
98105
+ const globalWindow = window;
98106
+ if (!globalWindow.__principlemd_theme_context__) {
98107
+ globalWindow.__principlemd_theme_context__ = createContext(void 0);
98108
+ }
98109
+ return globalWindow.__principlemd_theme_context__;
98110
+ } else {
98111
+ if (!ThemeContext) {
98112
+ ThemeContext = createContext(void 0);
98113
+ }
98114
+ return ThemeContext;
98115
+ }
98116
+ };
98117
+ getThemeContext();
98118
+ var Pe = Object.defineProperty;
98119
+ var We = (o, e, t) => e in o ? Pe(o, e, { enumerable: true, configurable: true, writable: true, value: t }) : o[e] = t;
98120
+ var Y = (o, e, t) => We(o, typeof e != "symbol" ? e + "" : e, t);
98121
+ class Le {
98097
98122
  constructor() {
98098
- le(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
98099
- le(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
98123
+ Y(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
98124
+ Y(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
98100
98125
  }
98101
98126
  /**
98102
98127
  * Load all user-created workspace presets
@@ -98156,14 +98181,14 @@ class Me {
98156
98181
  for (let t = 0; t < localStorage.length; t++) {
98157
98182
  const r2 = localStorage.key(t);
98158
98183
  if (r2 && r2.startsWith(this.REPO_STATE_PREFIX)) {
98159
- const s2 = r2.substring(this.REPO_STATE_PREFIX.length), i = localStorage.getItem(r2);
98160
- if (i)
98184
+ const n = r2.substring(this.REPO_STATE_PREFIX.length), a = localStorage.getItem(r2);
98185
+ if (a)
98161
98186
  try {
98162
- e[s2] = JSON.parse(i);
98163
- } catch (a) {
98187
+ e[n] = JSON.parse(a);
98188
+ } catch (i) {
98164
98189
  console.error(
98165
- `Failed to parse repository state for ${s2}:`,
98166
- a
98190
+ `Failed to parse repository state for ${n}:`,
98191
+ i
98167
98192
  );
98168
98193
  }
98169
98194
  }
@@ -98174,7 +98199,7 @@ class Me {
98174
98199
  }
98175
98200
  }
98176
98201
  }
98177
- class O {
98202
+ class D {
98178
98203
  /**
98179
98204
  * Configure a custom storage adapter (for Electron IPC or remote storage)
98180
98205
  */
@@ -98201,7 +98226,7 @@ class O {
98201
98226
  * Create a new workspace layout
98202
98227
  */
98203
98228
  static async createWorkspaceLayout(e) {
98204
- const t = await this.adapter.loadWorkspacePresets(), r2 = this.generateWorkspaceId(e.name), s2 = {
98229
+ const t = await this.adapter.loadWorkspacePresets(), r2 = this.generateWorkspaceId(e.name), n = {
98205
98230
  id: r2,
98206
98231
  name: e.name,
98207
98232
  description: e.description,
@@ -98211,34 +98236,34 @@ class O {
98211
98236
  createdAt: Date.now(),
98212
98237
  updatedAt: Date.now(),
98213
98238
  isBuiltIn: false
98214
- }, i = {
98239
+ }, a = {
98215
98240
  ...t,
98216
- [r2]: s2
98241
+ [r2]: n
98217
98242
  };
98218
- return await this.adapter.saveWorkspacePresets(i), s2;
98243
+ return await this.adapter.saveWorkspacePresets(a), n;
98219
98244
  }
98220
98245
  /**
98221
98246
  * Update an existing workspace layout
98222
98247
  */
98223
98248
  static async updateWorkspaceLayout(e, t) {
98224
- const r2 = await this.adapter.loadWorkspacePresets(), s2 = r2[e];
98225
- if (!s2)
98249
+ const r2 = await this.adapter.loadWorkspacePresets(), n = r2[e];
98250
+ if (!n)
98226
98251
  return console.error(`Workspace layout ${e} not found`), null;
98227
- if (s2.isBuiltIn)
98252
+ if (n.isBuiltIn)
98228
98253
  return console.error(`Cannot update built-in workspace layout ${e}`), null;
98229
- const i = {
98230
- ...s2,
98254
+ const a = {
98255
+ ...n,
98231
98256
  ...t,
98232
98257
  id: e,
98233
98258
  // Preserve ID
98234
- createdAt: s2.createdAt,
98259
+ createdAt: n.createdAt,
98235
98260
  // Preserve creation time
98236
98261
  updatedAt: Date.now()
98237
- }, a = {
98262
+ }, i = {
98238
98263
  ...r2,
98239
- [e]: i
98264
+ [e]: a
98240
98265
  };
98241
- return await this.adapter.saveWorkspacePresets(a), i;
98266
+ return await this.adapter.saveWorkspacePresets(i), a;
98242
98267
  }
98243
98268
  /**
98244
98269
  * Delete a workspace layout
@@ -98249,8 +98274,8 @@ class O {
98249
98274
  return console.error(`Workspace layout ${e} not found`), false;
98250
98275
  if (r2.isBuiltIn)
98251
98276
  return console.error(`Cannot delete built-in workspace layout ${e}`), false;
98252
- const s2 = { ...t };
98253
- return delete s2[e], await this.adapter.saveWorkspacePresets(s2), true;
98277
+ const n = { ...t };
98278
+ return delete n[e], await this.adapter.saveWorkspacePresets(n), true;
98254
98279
  }
98255
98280
  /**
98256
98281
  * Get repository state (which workspace + current sizes/collapsed)
@@ -98288,23 +98313,23 @@ class O {
98288
98313
  * Check if repository state differs from workspace defaults
98289
98314
  */
98290
98315
  static hasStateDeviation(e, t) {
98291
- const r2 = t.defaultSizes ? JSON.stringify(e.sizes) !== JSON.stringify(t.defaultSizes) : false, s2 = t.defaultCollapsed ? JSON.stringify(e.collapsed) !== JSON.stringify(t.defaultCollapsed) : false;
98292
- return { hasSizeDeviation: r2, hasCollapsedDeviation: s2 };
98316
+ const r2 = t.defaultSizes ? JSON.stringify(e.sizes) !== JSON.stringify(t.defaultSizes) : false, n = t.defaultCollapsed ? JSON.stringify(e.collapsed) !== JSON.stringify(t.defaultCollapsed) : false;
98317
+ return { hasSizeDeviation: r2, hasCollapsedDeviation: n };
98293
98318
  }
98294
98319
  /**
98295
98320
  * Update workspace defaults from repository state
98296
98321
  */
98297
98322
  static async updateWorkspaceFromRepositoryState(e, t) {
98298
- const r2 = await this.getWorkspaceLayout(e), s2 = await this.getRepositoryState(t);
98299
- if (!r2 || !s2 || r2.isBuiltIn) {
98323
+ const r2 = await this.getWorkspaceLayout(e), n = await this.getRepositoryState(t);
98324
+ if (!r2 || !n || r2.isBuiltIn) {
98300
98325
  console.error(
98301
98326
  "Cannot update built-in workspace or workspace/state not found"
98302
98327
  );
98303
98328
  return;
98304
98329
  }
98305
98330
  await this.updateWorkspaceLayout(e, {
98306
- defaultSizes: s2.sizes,
98307
- defaultCollapsed: s2.collapsed
98331
+ defaultSizes: n.sizes,
98332
+ defaultCollapsed: n.collapsed
98308
98333
  });
98309
98334
  }
98310
98335
  /**
@@ -98316,9 +98341,9 @@ class O {
98316
98341
  console.error(`Workspace ${t} not found`);
98317
98342
  return;
98318
98343
  }
98319
- const s2 = await this.getRepositoryState(e);
98320
- s2 && await this.setRepositoryState(e, {
98321
- ...s2,
98344
+ const n = await this.getRepositoryState(e);
98345
+ n && await this.setRepositoryState(e, {
98346
+ ...n,
98322
98347
  sizes: r2.defaultSizes || { left: 20, middle: 45, right: 35 },
98323
98348
  collapsed: r2.defaultCollapsed || { left: false, right: false }
98324
98349
  });
@@ -98334,8 +98359,8 @@ class O {
98334
98359
  */
98335
98360
  static async findMatchingWorkspace(e) {
98336
98361
  const t = await this.getWorkspaceLayouts();
98337
- for (const [r2, s2] of Object.entries(t))
98338
- if (this.isLayoutMatchingWorkspace(e, s2))
98362
+ for (const [r2, n] of Object.entries(t))
98363
+ if (this.isLayoutMatchingWorkspace(e, n))
98339
98364
  return r2;
98340
98365
  return null;
98341
98366
  }
@@ -98563,17 +98588,17 @@ class O {
98563
98588
  Object.keys(e).length;
98564
98589
  }
98565
98590
  }
98566
- le(O, "adapter", new Me());
98567
- function gt(o, e, t, r2) {
98591
+ Y(D, "adapter", new Le());
98592
+ function at(o, e, t, r2) {
98568
98593
  useEffect(() => {
98569
- const s2 = e.on(
98594
+ const n = e.on(
98570
98595
  "panel:focus",
98571
- (a) => {
98572
- a.payload.panelId === o && t();
98596
+ (i) => {
98597
+ i.payload.panelId === o && t();
98573
98598
  }
98574
98599
  );
98575
98600
  return () => {
98576
- s2();
98601
+ n();
98577
98602
  };
98578
98603
  }, [o, e, t, r2]);
98579
98604
  }
@@ -98679,7 +98704,7 @@ const StoryboardListPanel = ({
98679
98704
  }) => {
98680
98705
  const { theme: theme2 } = useTheme();
98681
98706
  const panelRef = useRef(null);
98682
- gt("storyboard-list", events, () => {
98707
+ at("storyboard-list", events, () => {
98683
98708
  var _a;
98684
98709
  return (_a = panelRef.current) == null ? void 0 : _a.focus();
98685
98710
  });
@@ -98688,6 +98713,7 @@ const StoryboardListPanel = ({
98688
98713
  const [isRefreshing, setIsRefreshing] = useState(false);
98689
98714
  const [showHelp, setShowHelp] = useState(false);
98690
98715
  const [cliCommandCopied, setCliCommandCopied] = useState(false);
98716
+ const [canvasTypeFilter, setCanvasTypeFilter] = useState("otel");
98691
98717
  const { storyboards, workflows, testTraces, isLoading, error } = useCanvasWorkflowData({ context, actions });
98692
98718
  const fileTreeSlice = context.getSlice("fileTree");
98693
98719
  const fileTreeData = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
@@ -98755,6 +98781,7 @@ const StoryboardListPanel = ({
98755
98781
  }, [workflows, testTraces, storyboards]);
98756
98782
  const filteredStoryboards = useMemo(() => {
98757
98783
  let filtered = storyboards;
98784
+ filtered = filtered.filter((storyboard) => storyboard.canvas.type === canvasTypeFilter);
98758
98785
  if (searchQuery.trim()) {
98759
98786
  const query = searchQuery.toLowerCase().trim();
98760
98787
  filtered = filtered.filter((storyboard) => {
@@ -98768,11 +98795,15 @@ const StoryboardListPanel = ({
98768
98795
  });
98769
98796
  }
98770
98797
  return filtered;
98771
- }, [storyboards, searchQuery]);
98798
+ }, [storyboards, searchQuery, canvasTypeFilter]);
98799
+ const filteredCanvases = useMemo(() => {
98800
+ return filteredStoryboards.map((storyboard) => storyboard.canvas);
98801
+ }, [filteredStoryboards]);
98772
98802
  const handleTreeNodeClick = useCallback((node2) => {
98773
- var _a;
98803
+ var _a, _b, _c;
98774
98804
  if (node2.type === "overview" && node2.markdownPath) {
98775
- setSelectedNodeId(`overview:${(_a = node2.storyboard) == null ? void 0 : _a.id}`);
98805
+ const canvasId = ((_a = node2.canvas) == null ? void 0 : _a.id) || "storyboard" in node2 && ((_c = (_b = node2.storyboard) == null ? void 0 : _b.canvas) == null ? void 0 : _c.id) || "unknown";
98806
+ setSelectedNodeId(`overview:${canvasId}`);
98776
98807
  if (events) {
98777
98808
  console.log("[StoryboardListPanel] Opening documentation:", node2.markdownPath);
98778
98809
  events.emit({
@@ -98800,7 +98831,7 @@ const StoryboardListPanel = ({
98800
98831
  }
98801
98832
  });
98802
98833
  }
98803
- } else if (node2.type === "workflow" && node2.workflow && node2.storyboard) {
98834
+ } else if (node2.type === "workflow" && "workflow" in node2 && node2.workflow && "storyboard" in node2 && node2.storyboard) {
98804
98835
  setSelectedNodeId(`workflow:${node2.workflow.id}`);
98805
98836
  if (events) {
98806
98837
  const canvasFileInfo = getCanvasFileInfo(node2.storyboard.canvas.path);
@@ -98901,6 +98932,56 @@ const StoryboardListPanel = ({
98901
98932
  }
98902
98933
  ),
98903
98934
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", flex: storyboards.length >= 10 ? "1 1 200px" : "0 0 auto", maxWidth: storyboards.length >= 10 ? "400px" : "none" }, children: [
98935
+ /* @__PURE__ */ jsxs("div", { style: {
98936
+ display: "flex",
98937
+ alignItems: "center",
98938
+ gap: "4px",
98939
+ background: theme2.colors.backgroundSecondary,
98940
+ border: `1px solid ${theme2.colors.border}`,
98941
+ borderRadius: theme2.radii[2],
98942
+ padding: "4px"
98943
+ }, children: [
98944
+ /* @__PURE__ */ jsx(
98945
+ "button",
98946
+ {
98947
+ onClick: () => setCanvasTypeFilter("otel"),
98948
+ style: {
98949
+ background: canvasTypeFilter === "otel" ? theme2.colors.primary : "transparent",
98950
+ border: "none",
98951
+ borderRadius: theme2.radii[1],
98952
+ padding: "6px 12px",
98953
+ cursor: "pointer",
98954
+ fontSize: theme2.fontSizes[1],
98955
+ fontFamily: theme2.fonts.body,
98956
+ fontWeight: canvasTypeFilter === "otel" ? 600 : 400,
98957
+ color: canvasTypeFilter === "otel" ? "white" : theme2.colors.text,
98958
+ transition: "all 0.2s ease"
98959
+ },
98960
+ title: "Runtime validated .otel.canvas files",
98961
+ children: "OTEL"
98962
+ }
98963
+ ),
98964
+ /* @__PURE__ */ jsx(
98965
+ "button",
98966
+ {
98967
+ onClick: () => setCanvasTypeFilter("regular"),
98968
+ style: {
98969
+ background: canvasTypeFilter === "regular" ? theme2.colors.primary : "transparent",
98970
+ border: "none",
98971
+ borderRadius: theme2.radii[1],
98972
+ padding: "6px 12px",
98973
+ cursor: "pointer",
98974
+ fontSize: theme2.fontSizes[1],
98975
+ fontFamily: theme2.fonts.body,
98976
+ fontWeight: canvasTypeFilter === "regular" ? 600 : 400,
98977
+ color: canvasTypeFilter === "regular" ? "white" : theme2.colors.text,
98978
+ transition: "all 0.2s ease"
98979
+ },
98980
+ title: "Static documentation .canvas files",
98981
+ children: "Static"
98982
+ }
98983
+ )
98984
+ ] }),
98904
98985
  storyboards.length >= 10 && /* @__PURE__ */ jsxs(
98905
98986
  "div",
98906
98987
  {
@@ -99085,11 +99166,11 @@ const StoryboardListPanel = ({
99085
99166
  padding: "24px"
99086
99167
  },
99087
99168
  children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
99088
- /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: theme2.fontSizes[2] }, children: searchQuery ? "No storyboards match your search" : "No storyboards found" }),
99089
- /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0 0", fontSize: theme2.fontSizes[1] }, children: searchQuery ? "Try a different search term" : "Add .canvas or .otel.canvas files to .principal-views/ to get started" })
99169
+ /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: theme2.fontSizes[2] }, children: searchQuery ? "No storyboards match your search" : `No ${canvasTypeFilter === "otel" ? ".otel.canvas" : ".canvas"} files found` }),
99170
+ /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0 0", fontSize: theme2.fontSizes[1] }, children: searchQuery ? "Try a different search term" : `Add ${canvasTypeFilter === "otel" ? ".otel.canvas" : ".canvas"} files to .principal-views/ to get started` })
99090
99171
  ] })
99091
99172
  }
99092
- ) : /* @__PURE__ */ jsx(
99173
+ ) : canvasTypeFilter === "otel" ? /* @__PURE__ */ jsx(
99093
99174
  StoryboardWorkflowsTreeCore,
99094
99175
  {
99095
99176
  storyboards: filteredStoryboards,
@@ -99101,6 +99182,17 @@ const StoryboardListPanel = ({
99101
99182
  verticalPadding: "10px",
99102
99183
  workflowCoverageMap
99103
99184
  }
99185
+ ) : /* @__PURE__ */ jsx(
99186
+ CanvasListTreeCore,
99187
+ {
99188
+ canvases: filteredCanvases,
99189
+ theme: theme2,
99190
+ onClick: handleTreeNodeClick,
99191
+ selectedNodeId: selectedNodeId ?? void 0,
99192
+ defaultOpen: filteredCanvases.length <= 2,
99193
+ horizontalNodePadding: "clamp(16px, 4vw, 24px)",
99194
+ verticalPadding: "10px"
99195
+ }
99104
99196
  )
99105
99197
  }
99106
99198
  ),
@@ -99167,7 +99259,7 @@ const StoryboardListPanel = ({
99167
99259
  fontSize: theme2.fontSizes[2],
99168
99260
  color: theme2.colors.textMuted,
99169
99261
  lineHeight: 1.5
99170
- }, children: "This panel displays all .canvas and .otel.canvas files found in your project's .principal-views/ directory." }),
99262
+ }, children: "This panel displays .canvas (static) and .otel.canvas (runtime validated) files found in your project's .principal-views/ directory. Use the toggle to switch between types." }),
99171
99263
  /* @__PURE__ */ jsxs("div", { style: {
99172
99264
  display: "flex",
99173
99265
  flexDirection: "column",
@@ -99186,6 +99278,7 @@ const StoryboardListPanel = ({
99186
99278
  color: theme2.colors.textMuted,
99187
99279
  lineHeight: 1.6
99188
99280
  }, children: [
99281
+ /* @__PURE__ */ jsx("li", { children: "Toggle between runtime validated (.otel.canvas) and static (.canvas) files" }),
99189
99282
  /* @__PURE__ */ jsx("li", { children: "Browse and search through available storyboards" }),
99190
99283
  /* @__PURE__ */ jsx("li", { children: "Filter by package if you have a monorepo structure" }),
99191
99284
  /* @__PURE__ */ jsx("li", { children: "Click a storyboard to view the canvas in the editor" }),
@@ -100022,7 +100115,7 @@ const TraceListPanel = ({
100022
100115
  }) => {
100023
100116
  const { theme: theme2 } = useTheme();
100024
100117
  const panelRef = useRef(null);
100025
- gt("trace-list", events, () => {
100118
+ at("trace-list", events, () => {
100026
100119
  var _a;
100027
100120
  return (_a = panelRef.current) == null ? void 0 : _a.focus();
100028
100121
  });
@@ -101499,7 +101592,7 @@ const TraceDetailsPanel = ({
101499
101592
  var _a;
101500
101593
  const { theme: theme2 } = useTheme();
101501
101594
  const panelRef = useRef(null);
101502
- gt("trace-details", events, () => {
101595
+ at("trace-details", events, () => {
101503
101596
  var _a2;
101504
101597
  return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
101505
101598
  });