@industry-theme/principal-view-panels 0.8.4 → 0.8.6

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 (3) hide show
  1. package/dist/panels.bundle.js +244 -210
  2. package/dist/panels.bundle.js.map +1 -1
  3. package/package.json +14 -13
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 } from "@principal-ai/principal-view-core";
18
18
  import { StoryboardWorkflowsTreeCore } from "@principal-ade/dynamic-file-tree";
19
- var ThemeContext;
20
- var getThemeContext = () => {
19
+ var ThemeContext$1;
20
+ var getThemeContext$1 = () => {
21
21
  if (typeof window !== "undefined") {
22
22
  const globalWindow = window;
23
23
  if (!globalWindow.__principlemd_theme_context__) {
@@ -25,13 +25,13 @@ var getThemeContext = () => {
25
25
  }
26
26
  return globalWindow.__principlemd_theme_context__;
27
27
  } else {
28
- if (!ThemeContext) {
29
- ThemeContext = createContext(void 0);
28
+ if (!ThemeContext$1) {
29
+ ThemeContext$1 = createContext(void 0);
30
30
  }
31
- return ThemeContext;
31
+ return ThemeContext$1;
32
32
  }
33
33
  };
34
- var ThemeContextSingleton = getThemeContext();
34
+ var ThemeContextSingleton = getThemeContext$1();
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 s = t * S, coshr0 = cosh(r0), u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s + r0) - sinh(r0));
1580
+ var s = t * S2, coshr0 = cosh(r0), u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s + 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 h(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 : h, l = e.useState, m = e.useEffect, n = e.useLayoutEffect, p = e.useDebugValue;
4998
- function q(a, b) {
4999
- var d = b(), f = l({ inst: { value: d, getSnapshot: b } }), c = f[0].inst, g = f[1];
5000
- n(function() {
5001
- c.value = d;
5002
- c.getSnapshot = b;
5003
- r(c) && g({ inst: c });
5004
- }, [a, d, b]);
5005
- m(function() {
5006
- r(c) && g({ inst: c });
5007
- return a(function() {
5008
- r(c) && g({ inst: c });
5009
- });
5010
- }, [a]);
5011
- p(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 r(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 h = React2__default, n = requireShim();
5054
- function p(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 : p, r = n.useSyncExternalStore, t = h.useRef, u = h.useEffect, v = h.useMemo, w = h.useDebugValue;
5058
- withSelector_production_min.useSyncExternalStoreWithSelector = function(a, b, e, l, g) {
5059
- var c = t(null);
5060
- if (null === c.current) {
5061
- var f = { hasValue: false, value: null };
5062
- c.current = f;
5063
- } else f = c.current;
5064
- c = v(function() {
5065
- function a2(a3) {
5066
- if (!c2) {
5067
- c2 = 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 c2 = 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 = r(a, c[0], c[1]);
5091
- u(function() {
5092
- f.hasValue = true;
5093
- f.value = d;
5094
- }, [d]);
5095
- w(d);
5096
- return d;
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;
5097
5114
  };
5098
- return withSelector_production_min;
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
  }
@@ -42007,6 +42022,15 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
42007
42022
  const strokeColor = nodeDataStroke || typeDefinition.stroke || fillColor;
42008
42023
  const color2 = fillColor;
42009
42024
  const displayName = nodeProps.name;
42025
+ const eventData = nodeData == null ? void 0 : nodeData.event;
42026
+ const eventName = eventData == null ? void 0 : eventData.name;
42027
+ const showEventName = eventName && eventName !== displayName;
42028
+ const renderNameWithEvent = (centered = true) => jsxs("div", { style: { textAlign: centered ? "center" : "left", wordBreak: "break-word" }, children: [jsx("div", { children: displayName }), showEventName && jsx("div", { style: {
42029
+ fontSize: theme.fontSizes[0] * 0.75,
42030
+ color: "rgba(0, 0, 0, 0.5)",
42031
+ marginTop: "2px",
42032
+ fontFamily: theme.fonts.monospace
42033
+ }, children: eventName })] });
42010
42034
  const icon = nodeData.icon || state && (((_d = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _d.icon) || ((_f = (_e2 = typeDefinition.states) == null ? void 0 : _e2[state]) == null ? void 0 : _f.icon)) || typeDefinition.icon;
42011
42035
  const getAnimationClass = () => {
42012
42036
  switch (animationType) {
@@ -42202,7 +42226,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
42202
42226
  height: "100%",
42203
42227
  boxShadow: isHighlighted ? `0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)` : selected2 ? `0 0 0 2px ${strokeColor}` : "none",
42204
42228
  transition: "box-shadow 0.2s ease"
42205
- }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderSourcesBadge(), renderOtelBadge(), jsx("div", { style: hexagonBorderStyle, className: animationClass, children: jsxs("div", { style: hexagonInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), jsx("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && jsx("div", { style: {
42229
+ }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderSourcesBadge(), renderOtelBadge(), jsx("div", { style: hexagonBorderStyle, className: animationClass, children: jsxs("div", { style: hexagonInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent(), state && jsx("div", { style: {
42206
42230
  fontSize: theme.fontSizes[0],
42207
42231
  fontFamily: theme.fonts.body,
42208
42232
  backgroundColor: color2,
@@ -42221,7 +42245,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
42221
42245
  height: "100%",
42222
42246
  boxShadow: isHighlighted ? `0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)` : selected2 ? `0 0 0 2px ${strokeColor}` : "none",
42223
42247
  transition: "box-shadow 0.2s ease"
42224
- }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderSourcesBadge(), renderOtelBadge(), jsx("div", { style: diamondBorderStyle, className: animationClass, children: jsxs("div", { style: diamondInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), jsx("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && jsx("div", { style: {
42248
+ }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderSourcesBadge(), renderOtelBadge(), jsx("div", { style: diamondBorderStyle, className: animationClass, children: jsxs("div", { style: diamondInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent(), state && jsx("div", { style: {
42225
42249
  fontSize: theme.fontSizes[0],
42226
42250
  fontFamily: theme.fonts.body,
42227
42251
  backgroundColor: color2,
@@ -42242,7 +42266,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
42242
42266
  justifyContent: "center",
42243
42267
  gap: "6px",
42244
42268
  width: "100%"
42245
- }, children: [icon && resolveIcon(icon, 18), jsx("div", { style: { wordBreak: "break-word" }, children: displayName })] }) : jsxs(Fragment, { children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), jsx("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName })] }), state && jsx("div", { style: {
42269
+ }, children: [icon && resolveIcon(icon, 18), renderNameWithEvent(false)] }) : jsxs(Fragment, { children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent()] }), state && jsx("div", { style: {
42246
42270
  fontSize: theme.fontSizes[0],
42247
42271
  fontFamily: theme.fonts.body,
42248
42272
  backgroundColor: color2,
@@ -50257,38 +50281,38 @@ function PanelResizeHandle({
50257
50281
  });
50258
50282
  }
50259
50283
  PanelResizeHandle.displayName = "PanelResizeHandle";
50260
- function C(e) {
50284
+ function S(e) {
50261
50285
  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" };
50262
50286
  }
50263
- const R = ({ leftPanel: n, rightPanel: r, collapsibleSide: s = "left", defaultSize: c = 25, minSize: d = 5, className: u = "", collapsed: p = false, style: h, 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 }) => {
50264
- const [E, D] = useState(p), [z2, M] = useState(false), [T, A] = useState(false), [k, L] = useState(p), [P, F] = useState(p ? 0 : c), $ = useRef(null), B = useRef(void 0), O2 = useRef(void 0), I = useRef(void 0), q = useCallback((e, t, n2) => {
50287
+ const R = ({ leftPanel: n, rightPanel: r, collapsibleSide: s = "left", defaultSize: c = 25, minSize: d = 5, className: u = "", collapsed: p = false, style: h, showCollapseButton: m = false, animationDuration: f = 300, animationEasing: y = "cubic-bezier(0.4, 0, 0.2, 1)", onCollapseStart: w, onCollapseComplete: x, onExpandStart: C, onExpandComplete: R2, theme: E }) => {
50288
+ const [N, D2] = useState(p), [z2, M] = useState(false), [T, A] = useState(false), [k, L] = useState(p), [P, F] = useState(p ? 0 : c), $ = useRef(null), B = useRef(void 0), O = useRef(void 0), I = useRef(void 0), q = useCallback((e, t, n2) => {
50265
50289
  if (!$.current) return;
50266
- B.current && cancelAnimationFrame(B.current), O2.current = performance.now();
50290
+ B.current && cancelAnimationFrame(B.current), O.current = performance.now();
50267
50291
  const r2 = (o) => {
50268
- if (!O2.current || !$.current) return;
50269
- 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, s2 = e + (t - e) * l;
50292
+ if (!O.current || !$.current) return;
50293
+ 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, s2 = e + (t - e) * l;
50270
50294
  $.current.resize(s2), a < 1 ? B.current = requestAnimationFrame(r2) : (0 === t ? $.current.collapse() : $.current.resize(t), M(false), n2 && n2());
50271
50295
  };
50272
50296
  B.current = requestAnimationFrame(r2);
50273
50297
  }, [f]), W = useCallback(() => {
50274
- z2 || T || (M(true), D(true), w && w(), q(P, 0, () => {
50298
+ z2 || T || (M(true), D2(true), w && w(), q(P, 0, () => {
50275
50299
  F(0), L(true), x && x();
50276
50300
  }));
50277
50301
  }, [z2, T, P, q, w, x]), _ = useCallback(() => {
50278
- z2 || T || (M(true), D(false), L(false), S && S(), q(0, c, () => {
50302
+ z2 || T || (M(true), D2(false), L(false), C && C(), q(0, c, () => {
50279
50303
  F(c), R2 && R2();
50280
50304
  }));
50281
- }, [z2, T, c, q, S, R2]), j = useCallback(() => {
50282
- E ? _() : W();
50283
- }, [E, W, _]), H = useCallback((e) => {
50284
- z2 || (F(e), e > 0 && D(false));
50305
+ }, [z2, T, c, q, C, R2]), j = useCallback(() => {
50306
+ N ? _() : W();
50307
+ }, [N, W, _]), H = useCallback((e) => {
50308
+ z2 || (F(e), e > 0 && D2(false));
50285
50309
  }, [z2]), K = useCallback(() => {
50286
50310
  A(true);
50287
50311
  }, []), U = useCallback(() => {
50288
50312
  A(false);
50289
50313
  }, []);
50290
50314
  useEffect(() => {
50291
- p !== E && (p ? W() : _());
50315
+ p !== N && (p ? W() : _());
50292
50316
  }, [p]), useEffect(() => {
50293
50317
  p && !z2 ? L(true) : p || z2 || L(false);
50294
50318
  }, [p, z2]), useEffect(() => {
@@ -50297,30 +50321,27 @@ const R = ({ leftPanel: n, rightPanel: r, collapsibleSide: s = "left", defaultSi
50297
50321
  e && cancelAnimationFrame(e), t && clearTimeout(t);
50298
50322
  };
50299
50323
  }, []);
50300
- const X2 = "left" === s, Y = E ? X2 ? "▸" : "◂" : X2 ? "◂" : "▸", V = C(N), J = z2 && !T ? { transition: `flex ${f}ms ${y}` } : void 0, G = (e) => {
50324
+ const X2 = "left" === s, Y2 = N ? X2 ? "▸" : "◂" : X2 ? "◂" : "▸", V = S(E), J = z2 && !T ? { transition: `flex ${f}ms ${y}` } : void 0, G = (e) => {
50301
50325
  let t = "hybrid-panel";
50302
- return e && (t += " collapsible-panel", z2 && !T && (t += " animating"), E && (t += " collapsed")), t;
50326
+ return e && (t += " collapsible-panel", z2 && !T && (t += " animating"), N && (t += " collapsed")), t;
50303
50327
  };
50304
50328
  return jsx("div", { className: `animated-resizable-layout ${u}`, style: { ...V, ...h }, children: /* @__PURE__ */ jsxs(PanelGroup, { direction: "horizontal", onLayout: U, children: [
50305
- /* @__PURE__ */ jsx(Panel, { ref: X2 ? $ : void 0, collapsible: X2, defaultSize: X2 ? p ? 0 : c : 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 }) }),
50306
- /* @__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 }) }) }),
50307
- /* @__PURE__ */ jsx(Panel, { ref: X2 ? void 0 : $, collapsible: !X2, defaultSize: X2 ? void 0 : p ? 0 : c, 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: r }) })
50329
+ /* @__PURE__ */ jsx(Panel, { ref: X2 ? $ : void 0, collapsible: X2, defaultSize: X2 ? p ? 0 : c : 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 }) }),
50330
+ /* @__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 }) }) }),
50331
+ /* @__PURE__ */ jsx(Panel, { ref: X2 ? void 0 : $, collapsible: !X2, defaultSize: X2 ? void 0 : p ? 0 : c, 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: r }) })
50308
50332
  ] }) });
50309
- }, z = forwardRef(({ panels: o, className: a = "", style: s, theme: d, minPanelWidth: u = 350, idealPanelWidth: p = 0.333, showSeparator: h = false, onPanelChange: m, preventKeyboardScroll: f = true, disableSwipe: g = false }, v) => {
50310
- const b = useRef(null), y = useRef(false), w = useRef(null), x = C(d);
50311
- useImperativeHandle(v, () => ({ scrollToPanel: (e) => {
50312
- if (!b.current) return;
50313
- const t = b.current, n = t.children[e];
50333
+ }, z = forwardRef(({ panels: o, className: a = "", style: s, theme: d, minPanelWidth: u = 350, idealPanelWidth: p = 0.333, showSeparator: h = false, onPanelChange: m, preventKeyboardScroll: f = true }, g) => {
50334
+ const v = useRef(null), b = S(d);
50335
+ useImperativeHandle(g, () => ({ scrollToPanel: (e) => {
50336
+ if (!v.current) return;
50337
+ const t = v.current, n = t.children[e];
50314
50338
  if (n) {
50315
- y.current = true, w.current && clearTimeout(w.current);
50316
50339
  const e2 = n.offsetLeft;
50317
- t.scrollTo({ left: e2, behavior: "smooth" }), w.current = setTimeout(() => {
50318
- y.current = false;
50319
- }, 500);
50340
+ t.scrollTo({ left: e2, behavior: "smooth" });
50320
50341
  }
50321
50342
  }, getCurrentPanel: () => {
50322
- if (!b.current || 0 === b.current.children.length) return 0;
50323
- const e = b.current, t = e.getBoundingClientRect().left;
50343
+ if (!v.current || 0 === v.current.children.length) return 0;
50344
+ const e = v.current, t = e.getBoundingClientRect().left;
50324
50345
  let n = 0, r = 1 / 0;
50325
50346
  for (let o2 = 0; o2 < e.children.length; o2++) {
50326
50347
  const i = e.children[o2].getBoundingClientRect(), a2 = Math.abs(i.left - t);
@@ -50329,8 +50350,8 @@ const R = ({ leftPanel: n, rightPanel: r, collapsibleSide: s = "left", defaultSi
50329
50350
  return n;
50330
50351
  } }));
50331
50352
  useEffect(() => {
50332
- if (!f || !b.current) return;
50333
- const e = b.current, t = (e2) => {
50353
+ if (!f || !v.current) return;
50354
+ const e = v.current, t = (e2) => {
50334
50355
  const t2 = e2.target;
50335
50356
  if ("INPUT" === t2.tagName || "TEXTAREA" === t2.tagName || "SELECT" === t2.tagName || t2.isContentEditable || null !== t2.closest(".xterm") || null !== t2.closest('[contenteditable="true"]')) return;
50336
50357
  [" ", "Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown"].includes(e2.key) && e2.preventDefault();
@@ -50338,40 +50359,37 @@ const R = ({ leftPanel: n, rightPanel: r, collapsibleSide: s = "left", defaultSi
50338
50359
  return e.addEventListener("keydown", t), () => {
50339
50360
  e.removeEventListener("keydown", t);
50340
50361
  };
50341
- }, [f]), useEffect(() => () => {
50342
- w.current && clearTimeout(w.current);
50343
- }, []);
50344
- const S = o.length, R2 = 2 * u;
50345
- let N;
50346
- N = 1 === S || 2 === S ? "100%" : `max(${u}px, ${100 * p}%)`;
50347
- const E = React2__default.useId().replace(/:/g, "_");
50362
+ }, [f]);
50363
+ const y = o.length, w = 2 * u;
50364
+ let x;
50365
+ x = 1 === y || 2 === y ? "100%" : `max(${u}px, ${100 * p}%)`;
50366
+ const C = React2__default.useId().replace(/:/g, "_");
50348
50367
  return jsxs(Fragment, { children: [
50349
- 2 === S && /* @__PURE__ */ jsx("style", { children: `
50350
- .snap-carousel-container[data-carousel-id="${E}"][data-panel-count="2"] .snap-carousel-panel {
50368
+ 2 === y && /* @__PURE__ */ jsx("style", { children: `
50369
+ .snap-carousel-container[data-carousel-id="${C}"][data-panel-count="2"] .snap-carousel-panel {
50351
50370
  width: 100%;
50352
50371
  }
50353
- @container (min-width: ${R2}px) {
50354
- .snap-carousel-container[data-carousel-id="${E}"][data-panel-count="2"] .snap-carousel-panel {
50372
+ @container (min-width: ${w}px) {
50373
+ .snap-carousel-container[data-carousel-id="${C}"][data-panel-count="2"] .snap-carousel-panel {
50355
50374
  width: 50%;
50356
50375
  }
50357
50376
  }
50358
50377
  ` }),
50359
- /* @__PURE__ */ jsx("div", { ref: b, className: `snap-carousel-container ${g ? "swipe-disabled" : ""} ${a}`, style: { ...x, ...s, "--snap-carousel-min-width": `${u}px`, "--snap-carousel-ideal-width": 100 * p + "%", "--snap-carousel-gap": h ? "1px" : "0px", "--snap-carousel-panel-width": N, "--snap-carousel-panel-count": S, "--snap-carousel-two-panel-threshold": `${R2}px` }, onScroll: (e) => {
50360
- if (!m || !b.current || 0 === b.current.children.length) return;
50361
- if (y.current) return;
50362
- const t = b.current, n = t.getBoundingClientRect().left;
50378
+ /* @__PURE__ */ jsx("div", { ref: v, className: `snap-carousel-container ${a}`, style: { ...b, ...s, "--snap-carousel-min-width": `${u}px`, "--snap-carousel-ideal-width": 100 * p + "%", "--snap-carousel-gap": h ? "1px" : "0px", "--snap-carousel-panel-width": x, "--snap-carousel-panel-count": y, "--snap-carousel-two-panel-threshold": `${w}px` }, onScroll: (e) => {
50379
+ if (!m || !v.current || 0 === v.current.children.length) return;
50380
+ const t = v.current, n = t.getBoundingClientRect().left;
50363
50381
  let r = 0, o2 = 1 / 0;
50364
50382
  for (let i = 0; i < t.children.length; i++) {
50365
50383
  const e2 = t.children[i].getBoundingClientRect(), a2 = Math.abs(e2.left - n);
50366
50384
  a2 < o2 && (o2 = a2, r = i);
50367
50385
  }
50368
50386
  m(r);
50369
- }, "data-panel-count": S, "data-carousel-id": E, children: o.map((t, n) => /* @__PURE__ */ jsx("div", { className: "snap-carousel-panel", children: t }, n)) })
50387
+ }, "data-panel-count": y, "data-carousel-id": C, children: o.map((t, n) => /* @__PURE__ */ jsx("div", { className: "snap-carousel-panel", children: t }, n)) })
50370
50388
  ] });
50371
50389
  });
50372
50390
  z.displayName = "SnapCarousel";
50373
- var le$1, se;
50374
- (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";
50391
+ var le, se;
50392
+ (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";
50375
50393
  const de = /* @__PURE__ */ Object.freeze({ x: 0, y: 0 });
50376
50394
  var Te, Ae;
50377
50395
  (Ae = Te || (Te = {}))[Ae.Forward = 1] = "Forward", Ae[Ae.Backward = -1] = "Backward";
@@ -50380,8 +50398,8 @@ var _e, je, He, Ke;
50380
50398
  ({ start: [He.Space, He.Enter], cancel: [He.Esc], end: [He.Space, He.Enter, He.Tab] });
50381
50399
  var rt, ot;
50382
50400
  (ot = rt || (rt = {}))[ot.RightClick = 2] = "RightClick";
50383
- var at, lt, st, ct;
50384
- (lt = at || (at = {}))[lt.Pointer = 0] = "Pointer", lt[lt.DraggableRect = 1] = "DraggableRect", (ct = st || (st = {}))[ct.TreeOrder = 0] = "TreeOrder", ct[ct.ReversedTreeOrder = 1] = "ReversedTreeOrder";
50401
+ var at$1, lt, st, ct;
50402
+ (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";
50385
50403
  ({ x: { [Te.Backward]: false, [Te.Forward]: false }, y: { [Te.Backward]: false, [Te.Forward]: false } });
50386
50404
  var pt, ht, mt;
50387
50405
  (ht = pt || (pt = {}))[ht.Always = 0] = "Always", ht[ht.BeforeDragging = 1] = "BeforeDragging", ht[ht.WhileDragging = 2] = "WhileDragging", (mt || (mt = {})).Optimized = "optimized";
@@ -54093,13 +54111,29 @@ const WorkflowScenariosPanel = ({
54093
54111
  }
54094
54112
  );
54095
54113
  };
54096
- var Ee = Object.defineProperty;
54097
- var Re = (o, e, t) => e in o ? Ee(o, e, { enumerable: true, configurable: true, writable: true, value: t }) : o[e] = t;
54098
- var le = (o, e, t) => Re(o, typeof e != "symbol" ? e + "" : e, t);
54099
- class Me {
54114
+ var ThemeContext;
54115
+ var getThemeContext = () => {
54116
+ if (typeof window !== "undefined") {
54117
+ const globalWindow = window;
54118
+ if (!globalWindow.__principlemd_theme_context__) {
54119
+ globalWindow.__principlemd_theme_context__ = createContext(void 0);
54120
+ }
54121
+ return globalWindow.__principlemd_theme_context__;
54122
+ } else {
54123
+ if (!ThemeContext) {
54124
+ ThemeContext = createContext(void 0);
54125
+ }
54126
+ return ThemeContext;
54127
+ }
54128
+ };
54129
+ getThemeContext();
54130
+ var Pe = Object.defineProperty;
54131
+ var We = (o, e, t) => e in o ? Pe(o, e, { enumerable: true, configurable: true, writable: true, value: t }) : o[e] = t;
54132
+ var Y = (o, e, t) => We(o, typeof e != "symbol" ? e + "" : e, t);
54133
+ class Le {
54100
54134
  constructor() {
54101
- le(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
54102
- le(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
54135
+ Y(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
54136
+ Y(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
54103
54137
  }
54104
54138
  /**
54105
54139
  * Load all user-created workspace presets
@@ -54159,14 +54193,14 @@ class Me {
54159
54193
  for (let t = 0; t < localStorage.length; t++) {
54160
54194
  const r = localStorage.key(t);
54161
54195
  if (r && r.startsWith(this.REPO_STATE_PREFIX)) {
54162
- const s = r.substring(this.REPO_STATE_PREFIX.length), i = localStorage.getItem(r);
54163
- if (i)
54196
+ const n = r.substring(this.REPO_STATE_PREFIX.length), a = localStorage.getItem(r);
54197
+ if (a)
54164
54198
  try {
54165
- e[s] = JSON.parse(i);
54166
- } catch (a) {
54199
+ e[n] = JSON.parse(a);
54200
+ } catch (i) {
54167
54201
  console.error(
54168
- `Failed to parse repository state for ${s}:`,
54169
- a
54202
+ `Failed to parse repository state for ${n}:`,
54203
+ i
54170
54204
  );
54171
54205
  }
54172
54206
  }
@@ -54177,7 +54211,7 @@ class Me {
54177
54211
  }
54178
54212
  }
54179
54213
  }
54180
- class O {
54214
+ class D {
54181
54215
  /**
54182
54216
  * Configure a custom storage adapter (for Electron IPC or remote storage)
54183
54217
  */
@@ -54204,7 +54238,7 @@ class O {
54204
54238
  * Create a new workspace layout
54205
54239
  */
54206
54240
  static async createWorkspaceLayout(e) {
54207
- const t = await this.adapter.loadWorkspacePresets(), r = this.generateWorkspaceId(e.name), s = {
54241
+ const t = await this.adapter.loadWorkspacePresets(), r = this.generateWorkspaceId(e.name), n = {
54208
54242
  id: r,
54209
54243
  name: e.name,
54210
54244
  description: e.description,
@@ -54214,34 +54248,34 @@ class O {
54214
54248
  createdAt: Date.now(),
54215
54249
  updatedAt: Date.now(),
54216
54250
  isBuiltIn: false
54217
- }, i = {
54251
+ }, a = {
54218
54252
  ...t,
54219
- [r]: s
54253
+ [r]: n
54220
54254
  };
54221
- return await this.adapter.saveWorkspacePresets(i), s;
54255
+ return await this.adapter.saveWorkspacePresets(a), n;
54222
54256
  }
54223
54257
  /**
54224
54258
  * Update an existing workspace layout
54225
54259
  */
54226
54260
  static async updateWorkspaceLayout(e, t) {
54227
- const r = await this.adapter.loadWorkspacePresets(), s = r[e];
54228
- if (!s)
54261
+ const r = await this.adapter.loadWorkspacePresets(), n = r[e];
54262
+ if (!n)
54229
54263
  return console.error(`Workspace layout ${e} not found`), null;
54230
- if (s.isBuiltIn)
54264
+ if (n.isBuiltIn)
54231
54265
  return console.error(`Cannot update built-in workspace layout ${e}`), null;
54232
- const i = {
54233
- ...s,
54266
+ const a = {
54267
+ ...n,
54234
54268
  ...t,
54235
54269
  id: e,
54236
54270
  // Preserve ID
54237
- createdAt: s.createdAt,
54271
+ createdAt: n.createdAt,
54238
54272
  // Preserve creation time
54239
54273
  updatedAt: Date.now()
54240
- }, a = {
54274
+ }, i = {
54241
54275
  ...r,
54242
- [e]: i
54276
+ [e]: a
54243
54277
  };
54244
- return await this.adapter.saveWorkspacePresets(a), i;
54278
+ return await this.adapter.saveWorkspacePresets(i), a;
54245
54279
  }
54246
54280
  /**
54247
54281
  * Delete a workspace layout
@@ -54252,8 +54286,8 @@ class O {
54252
54286
  return console.error(`Workspace layout ${e} not found`), false;
54253
54287
  if (r.isBuiltIn)
54254
54288
  return console.error(`Cannot delete built-in workspace layout ${e}`), false;
54255
- const s = { ...t };
54256
- return delete s[e], await this.adapter.saveWorkspacePresets(s), true;
54289
+ const n = { ...t };
54290
+ return delete n[e], await this.adapter.saveWorkspacePresets(n), true;
54257
54291
  }
54258
54292
  /**
54259
54293
  * Get repository state (which workspace + current sizes/collapsed)
@@ -54291,23 +54325,23 @@ class O {
54291
54325
  * Check if repository state differs from workspace defaults
54292
54326
  */
54293
54327
  static hasStateDeviation(e, t) {
54294
- const r = t.defaultSizes ? JSON.stringify(e.sizes) !== JSON.stringify(t.defaultSizes) : false, s = t.defaultCollapsed ? JSON.stringify(e.collapsed) !== JSON.stringify(t.defaultCollapsed) : false;
54295
- return { hasSizeDeviation: r, hasCollapsedDeviation: s };
54328
+ const r = t.defaultSizes ? JSON.stringify(e.sizes) !== JSON.stringify(t.defaultSizes) : false, n = t.defaultCollapsed ? JSON.stringify(e.collapsed) !== JSON.stringify(t.defaultCollapsed) : false;
54329
+ return { hasSizeDeviation: r, hasCollapsedDeviation: n };
54296
54330
  }
54297
54331
  /**
54298
54332
  * Update workspace defaults from repository state
54299
54333
  */
54300
54334
  static async updateWorkspaceFromRepositoryState(e, t) {
54301
- const r = await this.getWorkspaceLayout(e), s = await this.getRepositoryState(t);
54302
- if (!r || !s || r.isBuiltIn) {
54335
+ const r = await this.getWorkspaceLayout(e), n = await this.getRepositoryState(t);
54336
+ if (!r || !n || r.isBuiltIn) {
54303
54337
  console.error(
54304
54338
  "Cannot update built-in workspace or workspace/state not found"
54305
54339
  );
54306
54340
  return;
54307
54341
  }
54308
54342
  await this.updateWorkspaceLayout(e, {
54309
- defaultSizes: s.sizes,
54310
- defaultCollapsed: s.collapsed
54343
+ defaultSizes: n.sizes,
54344
+ defaultCollapsed: n.collapsed
54311
54345
  });
54312
54346
  }
54313
54347
  /**
@@ -54319,9 +54353,9 @@ class O {
54319
54353
  console.error(`Workspace ${t} not found`);
54320
54354
  return;
54321
54355
  }
54322
- const s = await this.getRepositoryState(e);
54323
- s && await this.setRepositoryState(e, {
54324
- ...s,
54356
+ const n = await this.getRepositoryState(e);
54357
+ n && await this.setRepositoryState(e, {
54358
+ ...n,
54325
54359
  sizes: r.defaultSizes || { left: 20, middle: 45, right: 35 },
54326
54360
  collapsed: r.defaultCollapsed || { left: false, right: false }
54327
54361
  });
@@ -54337,8 +54371,8 @@ class O {
54337
54371
  */
54338
54372
  static async findMatchingWorkspace(e) {
54339
54373
  const t = await this.getWorkspaceLayouts();
54340
- for (const [r, s] of Object.entries(t))
54341
- if (this.isLayoutMatchingWorkspace(e, s))
54374
+ for (const [r, n] of Object.entries(t))
54375
+ if (this.isLayoutMatchingWorkspace(e, n))
54342
54376
  return r;
54343
54377
  return null;
54344
54378
  }
@@ -54566,17 +54600,17 @@ class O {
54566
54600
  Object.keys(e).length;
54567
54601
  }
54568
54602
  }
54569
- le(O, "adapter", new Me());
54570
- function gt(o, e, t, r) {
54603
+ Y(D, "adapter", new Le());
54604
+ function at(o, e, t, r) {
54571
54605
  useEffect(() => {
54572
- const s = e.on(
54606
+ const n = e.on(
54573
54607
  "panel:focus",
54574
- (a) => {
54575
- a.payload.panelId === o && t();
54608
+ (i) => {
54609
+ i.payload.panelId === o && t();
54576
54610
  }
54577
54611
  );
54578
54612
  return () => {
54579
- s();
54613
+ n();
54580
54614
  };
54581
54615
  }, [o, e, t, r]);
54582
54616
  }
@@ -54682,7 +54716,7 @@ const StoryboardListPanel = ({
54682
54716
  }) => {
54683
54717
  const { theme } = useTheme();
54684
54718
  const panelRef = useRef(null);
54685
- gt("storyboard-list", events, () => {
54719
+ at("storyboard-list", events, () => {
54686
54720
  var _a;
54687
54721
  return (_a = panelRef.current) == null ? void 0 : _a.focus();
54688
54722
  });