@get-enlace/ui 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 BugDiver Technologies
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @get-enlace/ui
+
+The canvas UI for [Enlace](https://github.com/get-enlace/enlace-ui) — a visual, chained-execution
+canvas for any OpenAPI-documented API. This package is the operations list, the drag-and-drop
+canvas, the node inspector, the debug pane, and the client-side chain-execution engine, built once
+and shipped as a static bundle.
+
+## You probably don't want to install this directly
+
+`@get-enlace/ui` is consumed by a framework adapter, which serves this package's built bundle
+alongside your API's OpenAPI document — that's almost always what you actually want to install:
+
+- Node/Express — [`@get-enlace/express`](https://www.npmjs.com/package/@get-enlace/express)
+- Node/NestJS — [`@get-enlace/nest`](https://www.npmjs.com/package/@get-enlace/nest)
+- ASP.NET Core — [`Enlace.AspNetCore`](https://www.nuget.org/packages/Enlace.AspNetCore) (NuGet)
+
+This package exists as a standalone npm dependency so those adapters — and any future ones — can
+each pull in the same UI bundle via their own ecosystem's normal install step, without duplicating
+or embedding it themselves.
+
+## Learn more
+
+See the [`enlace-ui` repo](https://github.com/get-enlace/enlace-ui) for the full picture: how
+Enlace works, its architecture, and the roadmap.

package/dist/assets/index-ClHXXbk6.css

@@ -0,0 +1 @@
+.react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "SF Mono", Consolas, Monaco, "Courier New", monospace;--color-bg: #1b1b1b;--color-panel-bg: #202124;--color-topbar-bg: #17181a;--color-border: #3b3b3f;--color-text: #e8e8e8;--color-text-muted: #9aa0a6;--color-get: #61affe;--color-get-bg: rgba(97, 175, 254, .12);--color-post: #49cc90;--color-post-bg: rgba(73, 204, 144, .12);--color-put: #fca130;--color-put-bg: rgba(252, 161, 48, .12);--color-patch: #50e3c2;--color-patch-bg: rgba(80, 227, 194, .12);--color-delete: #f93e3e;--color-delete-bg: rgba(249, 62, 62, .12);--color-error: #f93e3e;--color-focus: #61affe;--color-warning: #fca130;--color-popup: #a78bfa;--color-popup-bg: rgba(167, 139, 250, .14)}*{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg)}.app{display:flex;flex-direction:column;height:100vh}.app__header{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--color-topbar-bg);border-bottom:1px solid var(--color-border);color:var(--color-text)}.app__title{font-size:18px;font-weight:700;margin:0;flex:1;letter-spacing:.2px}.btn{border:none;border-radius:4px;padding:7px 20px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;color:#fff;transition:opacity .15s ease}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:not(:disabled):hover{opacity:.85}.btn--execute{background:var(--color-post)}.btn--authorize{background:transparent;border:2px solid var(--color-focus);color:var(--color-focus)}.btn--secondary{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted)}.app__body{display:grid;grid-template-columns:240px minmax(240px,1fr) minmax(220px,340px);flex:1;min-height:0}.app__body--inspector-collapsed{grid-template-columns:240px minmax(240px,1fr) 28px}.operation-list,.node-inspector{background:var(--color-panel-bg);padding:14px;overflow-y:auto;overflow-x:hidden}.node-inspector__topbar{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-muted);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--color-border)}.pane-collapse-btn{background:transparent;border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-muted);cursor:pointer;font-size:14px;line-height:1;padding:2px 7px}.pane-collapse-btn:hover{color:var(--color-text);border-color:var(--color-focus)}.pane-strip{background:var(--color-panel-bg);border:none;border-left:1px solid var(--color-border);color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;padding:0}.pane-strip:hover{background:var(--color-topbar-bg);color:var(--color-text)}.operation-list{border-right:1px solid var(--color-border)}.node-inspector{border-left:1px solid var(--color-border)}.operation-list h2,.node-inspector h2,.node-inspector h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-muted);margin:0 0 10px}.node-inspector h2{font-size:14px;color:var(--color-text);text-transform:none;letter-spacing:normal;font-family:var(--font-mono)}.node-inspector h3{margin-top:18px;padding-top:14px;border-top:1px solid var(--color-border)}.method-badge{display:inline-block;min-width:52px;text-align:center;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700;font-family:var(--font-mono);color:#1b1b1b}.method-badge--get{background:var(--color-get)}.method-badge--post{background:var(--color-post)}.method-badge--put{background:var(--color-put)}.method-badge--patch{background:var(--color-patch)}.method-badge--delete{background:var(--color-delete);color:#fff}.operation-list__search{margin:0 0 10px}.operation-list__search input{width:100%;border:1px solid var(--color-border);border-radius:4px;padding:5px 8px;font-size:12px;background:var(--color-panel-bg);color:var(--color-text)}.operation-list__empty{color:var(--color-text-muted);font-size:12px}.operation-list ul{list-style:none;padding:0;margin:0}.operation-list__item{display:flex;gap:8px;align-items:center;min-width:0;padding:8px 10px;margin:0 0 8px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-panel-bg);cursor:grab;font-size:13px;transition:box-shadow .15s ease}.operation-list__operation-id{padding:0 4px;font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted)}.operation-list__item:hover{border-color:var(--color-focus)}.operation-list__item--get{background:var(--color-get-bg);border-color:#61affe4d}.operation-list__item--post{background:var(--color-post-bg);border-color:#49cc904d}.operation-list__item--put{background:var(--color-put-bg);border-color:#fca1304d}.operation-list__item--patch{background:var(--color-patch-bg);border-color:#50e3c24d}.operation-list__item--delete{background:var(--color-delete-bg);border-color:#f93e3e4d}.operation-list__path{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.canvas{position:relative;border-right:1px solid var(--color-border);background:var(--color-bg)}.canvas .react-flow__attribution{background:transparent;color:var(--color-text-muted)}.canvas .edge-connection .react-flow__edge-path{stroke:var(--color-text-muted);stroke-width:1.5}.canvas .edge-mapping .react-flow__edge-path{stroke:var(--color-focus);stroke-width:1.5;stroke-dasharray:5}.canvas .react-flow__controls{box-shadow:none}.canvas .react-flow__controls-button{background:var(--color-panel-bg);border-bottom:1px solid var(--color-border);fill:var(--color-text)}.canvas .react-flow__controls-button:hover{background:var(--color-topbar-bg)}.canvas .react-flow__handle{cursor:crosshair}.canvas .react-flow__handle:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%,-50%) scale(calc(1 / var(--rf-zoom, 1)));border-radius:50%}.workflow-node{position:relative;margin:0;padding:10px 14px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-panel-bg);min-width:180px;max-width:280px;font-size:13px}.workflow-node__operation-id{padding:0 4px;font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted)}.workflow-node__remove-btn{position:absolute;top:-8px;right:-8px;width:18px;height:18px;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--color-border);background:var(--color-topbar-bg);color:var(--color-text-muted);font-size:13px;cursor:pointer;padding:0}.workflow-node__remove-btn:hover{background:var(--color-delete);border-color:var(--color-delete);color:#fff}.workflow-node--get{background:linear-gradient(var(--color-get-bg),var(--color-get-bg)),var(--color-panel-bg);border-color:#61affe66}.workflow-node--post{background:linear-gradient(var(--color-post-bg),var(--color-post-bg)),var(--color-panel-bg);border-color:#49cc9066}.workflow-node--put{background:linear-gradient(var(--color-put-bg),var(--color-put-bg)),var(--color-panel-bg);border-color:#fca13066}.workflow-node--patch{background:linear-gradient(var(--color-patch-bg),var(--color-patch-bg)),var(--color-panel-bg);border-color:#50e3c266}.workflow-node--delete{background:linear-gradient(var(--color-delete-bg),var(--color-delete-bg)),var(--color-panel-bg);border-color:#f93e3e66}.workflow-node--selected{border-color:var(--color-focus);border-width:2px}.workflow-node__header{display:flex;align-items:center;gap:8px}.workflow-node__path{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--color-text);overflow-wrap:anywhere}.workflow-node__summary{color:var(--color-text-muted);font-size:12px;margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}.node-inspector--empty{color:var(--color-text-muted);font-size:13px}.node-inspector__hint{color:var(--color-text-muted);font-size:12px;font-style:italic;margin:0 0 14px}.node-inspector__field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;font-size:13px}.node-inspector__field label{font-size:11px;font-weight:700;color:var(--color-text-muted);font-family:var(--font-mono)}.node-inspector__field-row{display:flex;gap:6px}.node-inspector__field-row+.node-inspector__field-row{margin-top:6px}.node-inspector__field-row select,.node-inspector__field-row input,.node-inspector__field-row textarea,.node-inspector label select{flex:1;min-width:0;border:1px solid var(--color-border);border-radius:4px;padding:6px 8px;font-size:13px;font-family:var(--font-sans);background:var(--color-topbar-bg);color:var(--color-text)}.node-inspector__field-row textarea{font-family:var(--font-mono);resize:vertical}.node-inspector__field-row select:focus,.node-inspector__field-row input:focus,.node-inspector__field-row textarea:focus{outline:none;border-color:var(--color-focus);box-shadow:0 0 0 1px var(--color-focus)}.node-inspector__field--disabled{opacity:.5;cursor:not-allowed}.node-inspector__field--disabled label{font-style:italic}.credentials-trigger{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--color-border);border-radius:999px;padding:6px 14px;font-size:12px;color:var(--color-text-muted);cursor:pointer;white-space:nowrap}.credentials-trigger:hover{color:var(--color-text);border-color:var(--color-focus)}.credentials-trigger__count{font-weight:700;color:var(--color-text)}.credentials-drawer__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:30}.credentials-drawer{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;z-index:31;display:flex;flex-direction:column;background:var(--color-panel-bg);border-left:1px solid var(--color-border);box-shadow:-8px 0 24px #00000073;animation:credentials-drawer-in .18s ease-out}@keyframes credentials-drawer-in{0%{transform:translate(100%)}to{transform:translate(0)}}.credentials-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--color-border)}.credentials-drawer__header h2{margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-muted)}.credentials-drawer__body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.credentials-drawer__empty{margin:0;color:var(--color-text-muted);font-size:12px;line-height:1.5}.credentials-drawer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.credential-card{border:1px solid var(--color-border);border-left:3px solid var(--color-border);border-radius:6px;padding:10px 12px;background:var(--color-topbar-bg)}.credential-card--bearer{border-left-color:var(--color-get)}.credential-card--basic{border-left-color:var(--color-patch)}.credential-card--apiKey{border-left-color:var(--color-put)}.credential-card--oauth2_clientCredentials{border-left-color:var(--color-post)}.credential-card--oauth2_password{border-left-color:var(--color-text-muted)}.credential-card--popup_login{border-left-color:var(--color-popup)}.credential-card__header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.credential-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}.credential-badge--bearer{background:var(--color-get-bg);color:var(--color-get)}.credential-badge--basic{background:var(--color-patch-bg);color:var(--color-patch)}.credential-badge--apiKey{background:var(--color-put-bg);color:var(--color-put)}.credential-badge--oauth2_clientCredentials{background:var(--color-post-bg);color:var(--color-post)}.credential-badge--oauth2_password{background:#9aa0a629;color:var(--color-text-muted)}.credential-badge--popup_login{background:var(--color-popup-bg);color:var(--color-popup)}.credential-card__actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.credential-card__login{background:transparent;border:none;color:var(--color-popup);font-size:11px;cursor:pointer;padding:2px 4px}.credential-card__login:hover{text-decoration:underline}.credential-card__edit{background:transparent;border:none;color:var(--color-focus);font-size:11px;cursor:pointer;padding:2px 4px}.credential-card__edit:hover{text-decoration:underline}.credential-card__delete{background:transparent;border:none;color:var(--color-error);font-size:11px;cursor:pointer;padding:2px 4px}.credential-card__delete:hover{text-decoration:underline}.credential-card__name{font-weight:700;font-size:13px;color:var(--color-text);overflow-wrap:anywhere}.credential-card__preview{margin-top:2px;font-family:monospace;font-size:11px;color:var(--color-text-muted);overflow-wrap:anywhere}.credential-card__usage{margin-top:6px;font-size:11px;color:var(--color-warning)}.credential-card__source{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:2px 8px;border:1px solid var(--color-focus);border-radius:999px;font-size:10px;color:var(--color-focus)}.credential-card__source code{color:inherit;font-weight:700}.credentials-drawer__declared{display:flex;flex-direction:column;gap:8px}.credentials-drawer__declared h3{margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-muted)}.credentials-drawer__declared-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.declared-credential{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px dashed var(--color-border);border-radius:6px;padding:8px 10px}.declared-credential__info{min-width:0}.declared-credential__name{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--color-text)}.declared-credential__name code{font-weight:700}.declared-credential__type{margin-top:2px;font-size:11px;color:var(--color-text-muted);overflow-wrap:anywhere}.declared-credential .btn{flex-shrink:0;padding:5px 12px;font-size:11px}.credentials-panel__spec-banner{margin:0;padding:6px 8px;border:1px solid var(--color-focus);border-radius:4px;font-size:11px;line-height:1.4;color:var(--color-focus)}.credentials-panel__spec-banner code{color:inherit}.credentials-drawer__add-btn{align-self:flex-start;background:transparent;border:1px dashed var(--color-border);border-radius:6px;padding:8px 14px;font-size:12px;color:var(--color-text-muted);cursor:pointer}.credentials-drawer__add-btn:hover{color:var(--color-text);border-color:var(--color-focus)}.credentials-drawer__form{display:flex;flex-direction:column;gap:8px;border:1px solid var(--color-border);border-radius:6px;padding:12px;background:var(--color-topbar-bg)}.credentials-panel__field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}.credentials-panel__field input,.credentials-panel__field select{border:1px solid var(--color-border);border-radius:4px;padding:5px 8px;font-size:12px;font-weight:400;text-transform:none;letter-spacing:normal;background:var(--color-panel-bg);color:var(--color-text)}.credentials-panel__warning{margin:0;padding:6px 8px;border:1px solid var(--color-warning);border-radius:4px;font-size:11px;line-height:1.4;color:var(--color-warning)}.credentials-panel__hint{margin:0;font-size:11px;line-height:1.4;color:var(--color-text-muted)}.credentials-panel__login-btn{align-self:flex-start;padding:5px 14px;font-size:11px;border-color:var(--color-popup);color:var(--color-popup)}.credentials-drawer__form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.credentials-drawer__form-actions .btn{padding:5px 14px;font-size:11px}.debug-pane{border-top:2px solid var(--color-border);background:var(--color-topbar-bg);display:flex;flex-direction:column;max-height:260px}.debug-pane__header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);flex-shrink:0}.debug-pane__count{font-weight:400;text-transform:none;letter-spacing:normal}.debug-pane__toggle{background:transparent;border:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;padding:0}.debug-pane__toggle:hover{color:var(--color-text)}.debug-pane__toggle-chevron{font-size:9px;color:var(--color-text-muted)}.debug-pane__body{overflow-y:auto;padding:4px 16px;font-size:12px}.debug-pane__status{color:var(--color-text-muted);padding:10px 0;margin:0}.debug-pane__status--error{color:var(--color-error);font-weight:600}.debug-step{border-bottom:1px solid var(--color-border);padding:8px 0}.debug-step:last-child{border-bottom:none}.debug-step__summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;color:var(--color-text)}.debug-step__summary::-webkit-details-marker{display:none}.debug-step__chevron{display:inline-block;font-size:10px;color:var(--color-text-muted);transition:transform .15s ease}.debug-step[open] .debug-step__chevron{transform:rotate(90deg)}.debug-step__url{font-family:var(--font-mono);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.debug-step__error{color:var(--color-error);font-size:11px}.status-badge{font-family:var(--font-mono);font-weight:700;font-size:11px;padding:2px 7px;border-radius:4px}.status-badge--ok{background:var(--color-post);color:#1b1b1b}.status-badge--error{background:var(--color-delete);color:#fff}.debug-step pre{background:#101113;color:#d8dde3;padding:10px 12px;border-radius:4px;overflow-x:auto;font-family:var(--font-mono);font-size:11px;margin:8px 0 0;border:1px solid var(--color-border)}