npm - @hexclave/tanstack-start - Versions diffs - 1.0.41 → 1.0.42 - Mend

@hexclave/tanstack-start 1.0.41 → 1.0.42

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 (1120) hide show

package/dist/esm/dev-tool/dev-tool-styles.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import { getInPageUiBaseCSS } from "../in-page-ui/base-styles.js";
 //#region src/dev-tool/dev-tool-styles.ts
 const devToolCSS = getInPageUiBaseCSS(".hexclave-devtool") + `
   /* Trigger pill */
@@ -2612,7 +2611,7 @@ const devToolCSS = getInPageUiBaseCSS(".hexclave-devtool") + `
   }
 `;
 //#endregion
 export { devToolCSS };
 //# sourceMappingURL=dev-tool-styles.js.map

package/dist/esm/dev-tool/dev-tool-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dev-tool-styles.js","names":[],"sources":["../../../src/dev-tool/dev-tool-styles.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n// Theme-aware CSS for the dev tool indicator\n// Respects Stack theme (data-stack-theme attribute) and system prefers-color-scheme\n// Uses .hexclave-devtool scope to avoid conflicts with host app styles\n// Design tokens + base reset come from the shared in-page-ui module.\n\nimport { getInPageUiBaseCSS } from \"../in-page-ui/base-styles\";\n\nexport const devToolCSS = getInPageUiBaseCSS('.hexclave-devtool') + `\n /* Trigger pill /\n .hexclave-devtool .sdt-trigger {\n position: fixed;\n z-index: 2147483647;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border);\n border-radius: 10px;\n cursor: grab;\n box-shadow: var(--sdt-trigger-shadow);\n transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n user-select: none;\n touch-action: none;\n }\n\n .hexclave-devtool .sdt-trigger-position-animated {\n transition: left 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n }\n\n .hexclave-devtool .sdt-trigger:hover {\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-accent);\n box-shadow: var(--sdt-trigger-shadow), 0 0 0 1px var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-trigger:active {\n cursor: grabbing;\n }\n\n .hexclave-devtool .sdt-trigger-logo {\n width: 22px;\n height: 22px;\n border-radius: 6px;\n background: var(--sdt-accent);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n line-height: 0;\n }\n\n / Panel overlay /\n .hexclave-devtool .sdt-panel {\n position: fixed;\n bottom: 60px;\n right: 16px;\n z-index: 2147483647;\n width: 800px;\n max-width: calc(100vw - 32px);\n height: 520px;\n max-height: calc(100vh - 80px);\n background: var(--sdt-bg);\n border: 1px solid var(--sdt-border);\n border-radius: var(--sdt-radius-lg);\n box-shadow: var(--sdt-shadow);\n display: flex;\n flex-direction: column;\n overflow: visible;\n }\n\n .hexclave-devtool .sdt-panel-geometry-animated {\n transition: width 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n height 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n right 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n bottom 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n border-radius 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n border-color 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);\n }\n\n .hexclave-devtool .sdt-panel-fullscreen {\n right: 0;\n bottom: 0;\n width: 100vw;\n max-width: none;\n height: 100vh;\n max-height: none;\n border: none;\n border-radius: 0;\n }\n\n .hexclave-devtool .sdt-panel-inner {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: var(--sdt-radius-lg);\n animation: sdt-panel-enter 0.2s ease-out;\n }\n\n .hexclave-devtool .sdt-panel-fullscreen .sdt-panel-inner {\n border-radius: 0;\n }\n\n .hexclave-devtool .sdt-panel-fullscreen .sdt-resize-handle {\n display: none;\n }\n\n @keyframes sdt-panel-enter {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(8px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }\n\n .hexclave-devtool .sdt-panel-exiting {\n animation: sdt-panel-exit 0.15s ease-in forwards;\n }\n\n @keyframes sdt-panel-exit {\n from {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n to {\n opacity: 0;\n transform: scale(0.95) translateY(8px);\n }\n }\n\n / Tab bar /\n .hexclave-devtool .sdt-tabbar {\n position: relative;\n display: flex;\n align-items: center;\n height: 44px;\n padding: 0 8px;\n background: var(--sdt-bg-subtle);\n border-bottom: 1px solid var(--sdt-border);\n flex-shrink: 0;\n gap: 2px;\n overflow-x: auto;\n overflow-y: hidden;\n }\n\n .hexclave-devtool .sdt-panel-fullscreen .sdt-tabbar {\n position: absolute;\n top: 8px;\n left: 8px;\n right: 8px;\n z-index: 2;\n background: var(--sdt-overlay-bg);\n border: 1px solid var(--sdt-border);\n border-radius: var(--sdt-radius);\n box-shadow: var(--sdt-trigger-shadow);\n }\n\n .hexclave-devtool .sdt-tab-indicator {\n position: absolute;\n top: 6px;\n left: 0;\n height: 32px;\n background: var(--sdt-bg-active);\n border-radius: var(--sdt-radius);\n transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n pointer-events: none;\n z-index: 0;\n }\n\n .hexclave-devtool .sdt-tab {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n gap: 6px;\n height: 32px;\n padding: 0 12px;\n background: transparent;\n border: none;\n border-radius: var(--sdt-radius);\n cursor: pointer;\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n color: var(--sdt-text-secondary);\n transition: color 0.15s ease;\n white-space: nowrap;\n outline: none;\n }\n\n .hexclave-devtool .sdt-tab:hover {\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-tab[data-active=\"true\"] {\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-tab-icon {\n width: 14px;\n height: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-tabbar-spacer {\n flex: 1;\n }\n\n .hexclave-devtool .sdt-tabbar-actions {\n position: sticky;\n right: 0;\n z-index: 2;\n display: flex;\n align-items: center;\n align-self: stretch;\n gap: 4px;\n padding-left: 6px;\n background: inherit;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-docs-link {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n height: 28px;\n padding: 0 8px;\n color: var(--sdt-text-secondary);\n border-radius: var(--sdt-radius-sm);\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .hexclave-devtool .sdt-docs-link:hover {\n color: var(--sdt-text);\n background: var(--sdt-bg-hover);\n }\n\n .hexclave-devtool .sdt-docs-link-icon {\n display: flex;\n width: 13px;\n height: 13px;\n line-height: 0;\n }\n\n .hexclave-devtool .sdt-close-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n background: transparent;\n border: none;\n border-radius: var(--sdt-radius-sm);\n cursor: pointer;\n color: var(--sdt-text-tertiary);\n transition: all 0.15s ease;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-close-btn:hover {\n color: var(--sdt-text);\n background: var(--sdt-bg-hover);\n }\n\n / Tab content area /\n .hexclave-devtool .sdt-content {\n flex: 1;\n position: relative;\n overflow: hidden;\n min-height: 0;\n }\n\n .hexclave-devtool .sdt-panel-fullscreen .sdt-content {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n }\n\n .hexclave-devtool .sdt-tab-layers {\n position: absolute;\n inset: 0;\n }\n\n .hexclave-devtool .sdt-tab-pane {\n position: absolute;\n inset: 0;\n display: none;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 16px;\n background: var(--sdt-bg);\n opacity: 0;\n pointer-events: none;\n z-index: 0;\n }\n\n .hexclave-devtool .sdt-tab-pane-iframe {\n padding: 0;\n overflow: hidden;\n }\n\n .hexclave-devtool .sdt-tab-pane-active {\n display: block;\n opacity: 1;\n pointer-events: auto;\n z-index: 1;\n }\n\n / ===== Overview tab — single column ===== /\n\n .hexclave-devtool .sdt-ov {\n display: flex;\n flex-direction: column;\n gap: 10px;\n max-width: 660px;\n margin: 0 auto;\n }\n\n / Card base /\n .hexclave-devtool .sdt-ov-card {\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: 12px;\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 0;\n transition: box-shadow 0.2s ease, border-color 0.2s ease;\n overflow: hidden;\n min-width: 0;\n }\n\n .hexclave-devtool .sdt-ov-card-hero {\n background: linear-gradient(135deg, rgba(99,102,241,0.04) 0%, transparent 50%), var(--sdt-bg-elevated);\n }\n\n .hexclave-devtool .sdt-ov-label {\n font-size: 9px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1.2px;\n color: var(--sdt-text-tertiary);\n margin-bottom: 10px;\n }\n\n .hexclave-devtool .sdt-ov-user-row {\n display: flex;\n align-items: center;\n gap: 14px;\n margin-bottom: 14px;\n }\n\n .hexclave-devtool .sdt-ov-avatar {\n width: 52px;\n height: 52px;\n border-radius: 50%;\n background: var(--sdt-bg-hover);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n font-weight: 700;\n color: var(--sdt-text-tertiary);\n flex-shrink: 0;\n border: 2px solid var(--sdt-border-subtle);\n overflow: hidden;\n }\n\n .hexclave-devtool .sdt-ov-avatar-active {\n background: var(--sdt-accent-muted);\n color: var(--sdt-accent);\n border-color: rgba(99,102,241,0.3);\n }\n\n .hexclave-devtool .sdt-ov-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n }\n\n .hexclave-devtool .sdt-ov-user-meta {\n min-width: 0;\n flex: 1;\n }\n\n .hexclave-devtool .sdt-ov-user-name {\n font-size: 16px;\n font-weight: 700;\n color: var(--sdt-text);\n line-height: 1.2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .hexclave-devtool .sdt-ov-user-email {\n font-size: 12px;\n font-family: var(--sdt-font-mono);\n color: var(--sdt-text-secondary);\n margin-top: 2px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .hexclave-devtool .sdt-ov-auth-indicator {\n display: flex;\n align-items: center;\n gap: 5px;\n margin-top: 5px;\n font-size: 11px;\n font-weight: 600;\n color: var(--sdt-success);\n }\n\n .hexclave-devtool .sdt-ov-auth-indicator::before {\n content: '';\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--sdt-success);\n box-shadow: 0 0 6px rgba(34,197,94,0.5);\n }\n\n / Actions /\n .hexclave-devtool .sdt-ov-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 4px;\n }\n\n .hexclave-devtool .sdt-ov-btn {\n height: 30px;\n padding: 0 12px;\n border-radius: 6px;\n border: none;\n font-size: 12px;\n font-weight: 600;\n font-family: var(--sdt-font);\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n }\n .hexclave-devtool .sdt-ov-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n .hexclave-devtool .sdt-ov-btn-primary {\n background: var(--sdt-accent);\n color: #fff;\n }\n .hexclave-devtool .sdt-ov-btn-primary:hover { background: var(--sdt-accent-hover); }\n\n .hexclave-devtool .sdt-ov-btn-secondary {\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n }\n .hexclave-devtool .sdt-ov-btn-secondary:hover { background: var(--sdt-bg-active); }\n\n .hexclave-devtool .sdt-ov-btn-danger {\n background: var(--sdt-error-muted);\n color: var(--sdt-error);\n border: 1px solid rgba(239, 68, 68, 0.15);\n }\n .hexclave-devtool .sdt-ov-btn-danger:hover { background: rgba(239, 68, 68, 0.2); }\n\n .hexclave-devtool .sdt-ov-btn-wide { flex: 1; }\n\n .hexclave-devtool .sdt-ov-email-input {\n display: flex;\n flex: 1 1 180px;\n border: 1px solid var(--sdt-border-subtle);\n border-radius: 6px;\n overflow: hidden;\n background: var(--sdt-bg);\n transition: border-color 0.15s ease;\n }\n .hexclave-devtool .sdt-ov-email-input:focus-within {\n border-color: var(--sdt-accent);\n box-shadow: 0 0 0 2px var(--sdt-accent-muted);\n }\n .hexclave-devtool .sdt-ov-email-input input {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n background: transparent;\n border: none;\n color: var(--sdt-text);\n font-size: 11px;\n font-family: var(--sdt-font);\n outline: none;\n min-width: 0;\n }\n .hexclave-devtool .sdt-ov-email-input input::placeholder { color: var(--sdt-text-tertiary); }\n .hexclave-devtool .sdt-ov-email-input button {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-left: 1px solid var(--sdt-border-subtle);\n background: transparent;\n color: var(--sdt-accent);\n cursor: pointer;\n flex-shrink: 0;\n font-family: var(--sdt-font);\n }\n .hexclave-devtool .sdt-ov-email-input button:hover { background: var(--sdt-accent-muted); }\n .hexclave-devtool .sdt-ov-email-input button:disabled { opacity: 0.3; cursor: not-allowed; }\n\n .hexclave-devtool .sdt-ov-toast {\n font-size: 11px;\n padding: 5px 10px;\n border-radius: 6px;\n margin-top: 8px;\n line-height: 1.4;\n }\n .hexclave-devtool .sdt-ov-toast-success { background: var(--sdt-success-muted); color: var(--sdt-success); }\n .hexclave-devtool .sdt-ov-toast-error { background: var(--sdt-error-muted); color: var(--sdt-error); }\n\n / --- Auth methods card --- /\n .hexclave-devtool .sdt-ov-card-auth {\n padding: 14px 16px;\n }\n\n .hexclave-devtool .sdt-ov-auth-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n }\n\n .hexclave-devtool .sdt-ov-method {\n display: flex;\n align-items: center;\n gap: 5px;\n padding: 4px 8px;\n border-radius: 6px;\n font-size: 11px;\n font-weight: 600;\n border: 1px solid var(--sdt-border-subtle);\n background: var(--sdt-bg);\n transition: all 0.15s ease;\n }\n\n .hexclave-devtool .sdt-ov-method-on {\n color: var(--sdt-text);\n background: var(--sdt-success-muted);\n border-color: rgba(34, 197, 94, 0.12);\n }\n\n .hexclave-devtool .sdt-ov-method-off {\n color: var(--sdt-text-tertiary);\n opacity: 0.5;\n border-style: dashed;\n }\n\n .hexclave-devtool .sdt-ov-method-oauth {\n text-transform: capitalize;\n }\n\n .hexclave-devtool .sdt-ov-method-warn {\n color: var(--sdt-warning);\n border-color: rgba(234, 179, 8, 0.2);\n }\n\n .hexclave-devtool .sdt-ov-skeleton-pill {\n width: 64px;\n height: 26px;\n border-radius: 6px;\n background: var(--sdt-bg-hover);\n border: 1px solid var(--sdt-border-subtle);\n animation: sdt-ov-shimmer 1.5s ease-in-out infinite;\n }\n\n @keyframes sdt-ov-shimmer {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 0.7; }\n }\n\n / --- Setup checklist card (only shown when something is incomplete) --- /\n .hexclave-devtool .sdt-ov-card-checks {\n padding: 14px 16px;\n border-color: rgba(234, 179, 8, 0.25);\n }\n\n .hexclave-devtool .sdt-ov-checks-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n margin-bottom: 8px;\n }\n\n .hexclave-devtool .sdt-ov-checks-badge {\n font-size: 10px;\n font-weight: 700;\n padding: 1px 6px;\n border-radius: 4px;\n }\n\n .hexclave-devtool .sdt-ov-checks-badge-ok {\n background: var(--sdt-success-muted);\n color: var(--sdt-success);\n }\n\n .hexclave-devtool .sdt-ov-checks-badge-warn {\n background: var(--sdt-warning-muted);\n color: var(--sdt-warning);\n }\n\n .hexclave-devtool .sdt-ov-checks-bar {\n height: 3px;\n border-radius: 2px;\n background: var(--sdt-border-subtle);\n margin-bottom: 10px;\n overflow: hidden;\n }\n\n .hexclave-devtool .sdt-ov-checks-bar-fill {\n height: 100%;\n border-radius: 2px;\n background: var(--sdt-warning);\n transition: width 0.4s ease;\n }\n\n .hexclave-devtool .sdt-ov-setup-row {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 0;\n font-size: 12px;\n border-bottom: 1px solid var(--sdt-border-subtle);\n }\n\n .hexclave-devtool .sdt-ov-setup-row:last-child { border-bottom: none; }\n\n .hexclave-devtool .sdt-ov-setup-dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-ov-setup-dot-ok { background: var(--sdt-success); }\n .hexclave-devtool .sdt-ov-setup-dot-warn { background: var(--sdt-warning); }\n\n .hexclave-devtool .sdt-ov-setup-label {\n color: var(--sdt-text);\n font-size: 12px;\n }\n\n .hexclave-devtool .sdt-ov-setup-hint {\n margin-left: auto;\n font-size: 11px;\n color: var(--sdt-text-tertiary);\n }\n\n / Status badges (shared across tabs) /\n .hexclave-devtool .sdt-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 500;\n }\n .hexclave-devtool .sdt-badge-success { background: var(--sdt-success-muted); color: var(--sdt-success); }\n .hexclave-devtool .sdt-badge-warning { background: var(--sdt-warning-muted); color: var(--sdt-warning); }\n .hexclave-devtool .sdt-badge-error { background: var(--sdt-error-muted); color: var(--sdt-error); }\n .hexclave-devtool .sdt-badge-info { background: var(--sdt-info-muted); color: var(--sdt-info); }\n\n / ===== Components / Pages tab ===== /\n\n .hexclave-devtool .sdt-pg-layout {\n display: flex;\n height: calc(100% + 32px);\n margin: -16px;\n }\n\n / --- Sidebar --- /\n .hexclave-devtool .sdt-pg-sidebar {\n width: 250px;\n flex-shrink: 0;\n border-right: 1px solid var(--sdt-border);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .hexclave-devtool .sdt-pg-sidebar-head {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 12px 14px 8px;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-pg-sidebar-title {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: var(--sdt-text-tertiary);\n }\n\n .hexclave-devtool .sdt-pg-sidebar-count {\n font-size: 10px;\n font-weight: 700;\n color: var(--sdt-text-tertiary);\n background: var(--sdt-bg-active);\n padding: 0 5px;\n border-radius: 6px;\n line-height: 18px;\n }\n\n .hexclave-devtool .sdt-pg-sidebar-warn {\n margin-left: auto;\n font-size: 10px;\n font-weight: 700;\n color: var(--sdt-warning);\n background: var(--sdt-warning-muted);\n padding: 0 6px;\n border-radius: 6px;\n line-height: 18px;\n }\n\n .hexclave-devtool .sdt-pg-list {\n flex: 1;\n overflow-y: auto;\n padding: 0 6px 6px;\n }\n\n / --- List item --- /\n .hexclave-devtool .sdt-pg-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 7px 10px;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.12s ease;\n font-size: 13px;\n color: var(--sdt-text);\n position: relative;\n }\n\n .hexclave-devtool .sdt-pg-item:hover {\n background: var(--sdt-bg-hover);\n }\n\n .hexclave-devtool .sdt-pg-item[data-selected=\"true\"] {\n background: var(--sdt-accent-muted);\n }\n\n .hexclave-devtool .sdt-pg-item[data-selected=\"true\"] .sdt-pg-item-label {\n color: var(--sdt-accent-hover);\n font-weight: 600;\n }\n\n .hexclave-devtool .sdt-pg-item-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n .hexclave-devtool .sdt-pg-item-dot-handler { background: var(--sdt-info); }\n .hexclave-devtool .sdt-pg-item-dot-custom { background: var(--sdt-success); }\n .hexclave-devtool .sdt-pg-item-dot-warn {\n background: var(--sdt-warning);\n box-shadow: 0 0 6px rgba(234, 179, 8, 0.4);\n }\n\n .hexclave-devtool .sdt-pg-item-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n / --- Badges --- /\n .hexclave-devtool .sdt-pg-badge {\n display: inline-flex;\n align-items: center;\n height: 20px;\n padding: 0 7px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.2px;\n flex-shrink: 0;\n line-height: 1;\n }\n\n .hexclave-devtool .sdt-pg-badge-outdated { background: var(--sdt-warning-muted); color: var(--sdt-warning); }\n\n / --- Empty state --- /\n .hexclave-devtool .sdt-pg-empty {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n text-align: center;\n }\n\n .hexclave-devtool .sdt-pg-empty-icon {\n color: var(--sdt-text-tertiary);\n opacity: 0.35;\n margin-bottom: 4px;\n }\n\n .hexclave-devtool .sdt-pg-empty-text {\n font-size: 14px;\n font-weight: 600;\n color: var(--sdt-text-secondary);\n }\n\n .hexclave-devtool .sdt-pg-empty-sub {\n font-size: 12px;\n color: var(--sdt-text-tertiary);\n }\n\n / --- Main panel --- /\n .hexclave-devtool .sdt-pg-main {\n flex: 1;\n overflow-y: auto;\n padding: 16px 18px;\n display: flex;\n flex-direction: column;\n }\n\n / --- Detail view --- /\n .hexclave-devtool .sdt-pg-detail {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n / Header /\n .hexclave-devtool .sdt-pg-header {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .hexclave-devtool .sdt-pg-header-top {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n }\n\n .hexclave-devtool .sdt-pg-title {\n font-size: 15px;\n font-weight: 700;\n margin: 0;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-pg-title-url {\n min-width: 0;\n max-width: 280px;\n color: var(--sdt-text-tertiary);\n font-family: var(--sdt-font-mono);\n font-size: 11px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-decoration: none;\n }\n\n .hexclave-devtool .sdt-pg-title-url:hover {\n color: var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-pg-subtitle {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n line-height: 1.4;\n }\n\n .hexclave-devtool .sdt-pg-code-inline {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 4px;\n }\n\n .hexclave-devtool .sdt-pg-code {\n flex: 1;\n min-width: 0;\n font-family: var(--sdt-font-mono);\n font-size: 12px;\n color: var(--sdt-accent);\n background: var(--sdt-bg-elevated);\n border-radius: 6px;\n padding: 6px 10px;\n border: 1px solid var(--sdt-border-subtle);\n }\n\n / --- Copy button --- /\n .hexclave-devtool .sdt-pg-copy-btn {\n height: 26px;\n padding: 0 10px;\n border-radius: 6px;\n border: 1px solid var(--sdt-border);\n background: var(--sdt-bg-active);\n color: var(--sdt-text-secondary);\n cursor: pointer;\n font-size: 11px;\n font-weight: 600;\n font-family: var(--sdt-font);\n transition: all 0.12s ease;\n flex-shrink: 0;\n white-space: nowrap;\n }\n\n .hexclave-devtool .sdt-pg-open-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n height: 32px;\n padding: 0 12px;\n font-size: 12px;\n }\n\n .hexclave-devtool .sdt-pg-open-btn svg {\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-pg-copy-btn:hover {\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n border-color: var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-pg-copy-btn-ok {\n border-color: rgba(34, 197, 94, 0.3);\n color: var(--sdt-success);\n background: var(--sdt-success-muted);\n }\n\n / --- Update banner --- /\n .hexclave-devtool .sdt-pg-update-banner {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 10px 14px;\n background: rgba(234, 179, 8, 0.08);\n border: 1px solid rgba(234, 179, 8, 0.3);\n border-radius: 10px;\n }\n\n .hexclave-devtool .sdt-pg-update-banner-icon {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: rgba(234, 179, 8, 0.2);\n color: var(--sdt-warning);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 800;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .hexclave-devtool .sdt-pg-update-banner-body {\n flex: 1;\n min-width: 0;\n }\n\n .hexclave-devtool .sdt-pg-update-banner-title {\n font-size: 13px;\n font-weight: 700;\n color: var(--sdt-warning);\n margin-bottom: 2px;\n }\n\n .hexclave-devtool .sdt-pg-update-banner-text {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n line-height: 1.5;\n }\n\n .hexclave-devtool .sdt-pg-update-banner-text strong {\n color: var(--sdt-text);\n font-weight: 600;\n }\n\n / --- Sections (changelog, prompt) --- /\n .hexclave-devtool .sdt-pg-section {\n border: 1px solid var(--sdt-border-subtle);\n border-radius: 10px;\n padding: 12px 14px;\n background: var(--sdt-bg-elevated);\n }\n\n .hexclave-devtool .sdt-pg-section-warn {\n border-color: rgba(234, 179, 8, 0.25);\n background: rgba(234, 179, 8, 0.03);\n }\n\n .hexclave-devtool .sdt-pg-section-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sdt-text-secondary);\n margin-bottom: 8px;\n }\n\n .hexclave-devtool .sdt-pg-section-warn .sdt-pg-section-label {\n color: var(--sdt-warning);\n }\n\n .hexclave-devtool .sdt-pg-section-footer {\n display: flex;\n margin-top: 8px;\n }\n\n / Changelog list /\n .hexclave-devtool .sdt-pg-changelog-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .hexclave-devtool .sdt-pg-changelog-item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 12px;\n color: var(--sdt-text);\n line-height: 1.5;\n }\n\n .hexclave-devtool .sdt-pg-changelog-bullet {\n flex-shrink: 0;\n font-size: 12px;\n line-height: 1.5;\n }\n\n / Pre block /\n .hexclave-devtool .sdt-pg-pre {\n font-family: var(--sdt-font-mono);\n font-size: 11px;\n line-height: 1.6;\n color: var(--sdt-text);\n background: var(--sdt-bg);\n border-radius: 6px;\n padding: 10px 12px;\n margin: 0;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--sdt-border-subtle);\n }\n\n .hexclave-devtool .sdt-preview-loading,\n .hexclave-devtool .sdt-preview-unavailable {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n line-height: 1.5;\n }\n\n .hexclave-devtool .sdt-preview-error {\n font-size: 12px;\n color: var(--sdt-error);\n line-height: 1.5;\n }\n\n .hexclave-devtool .sdt-preview-code {\n font-family: var(--sdt-font-mono);\n font-size: 11px;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-props-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n }\n\n .hexclave-devtool .sdt-props-table th {\n text-align: left;\n font-weight: 600;\n color: var(--sdt-text-tertiary);\n padding: 6px 8px;\n border-bottom: 1px solid var(--sdt-border);\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .hexclave-devtool .sdt-props-table td {\n padding: 6px 8px;\n border-bottom: 1px solid var(--sdt-border-subtle);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-props-table td:first-child {\n font-family: var(--sdt-font-mono);\n color: var(--sdt-accent-hover);\n }\n\n .hexclave-devtool .sdt-props-table td:last-child {\n font-family: var(--sdt-font-mono);\n color: var(--sdt-text-secondary);\n }\n\n / Iframe tabs /\n .hexclave-devtool .sdt-iframe-container {\n position: relative;\n flex: 1;\n min-height: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .hexclave-devtool .sdt-iframe-toolbar {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 1;\n flex-shrink: 0;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 8px;\n padding: 0;\n }\n\n .hexclave-devtool .sdt-panel-fullscreen .sdt-iframe-toolbar {\n top: 60px;\n right: 12px;\n }\n\n .hexclave-devtool .sdt-iframe-open-link {\n display: inline-flex;\n align-items: center;\n min-height: 28px;\n padding: 0 10px;\n background: var(--sdt-overlay-bg);\n border: 1px solid var(--sdt-border);\n border-radius: var(--sdt-radius-sm);\n color: var(--sdt-accent-hover);\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n text-decoration: none;\n }\n\n .hexclave-devtool .sdt-iframe-open-link:hover {\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-iframe-container iframe {\n flex: 1;\n min-height: 0;\n width: 100%;\n height: 100%;\n border: none;\n background: white;\n border-radius: 0;\n }\n\n .hexclave-devtool .sdt-iframe-loading {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--sdt-text-secondary);\n font-size: 13px;\n }\n\n .hexclave-devtool .sdt-iframe-error {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: var(--sdt-text-secondary);\n font-size: 13px;\n }\n\n .hexclave-devtool .sdt-iframe-error-btn {\n padding: 6px 16px;\n background: var(--sdt-accent);\n color: white;\n border: none;\n border-radius: var(--sdt-radius);\n cursor: pointer;\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n transition: background 0.15s ease;\n }\n\n .hexclave-devtool .sdt-iframe-error-btn:hover {\n background: var(--sdt-accent-hover);\n }\n\n / Shared content fade animation /\n .hexclave-devtool .sdt-tab-content-fade {\n animation: sdt-tab-fade-in 0.15s ease-out;\n }\n\n / Console tab /\n .hexclave-devtool .sdt-console-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n }\n\n .hexclave-devtool .sdt-console-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 12px;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-console-title {\n color: var(--sdt-text);\n font-size: 13px;\n font-weight: 600;\n }\n\n .hexclave-devtool .sdt-console-actions {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n justify-content: flex-end;\n }\n\n .hexclave-devtool .sdt-console-action-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n height: 28px;\n padding: 0 9px;\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border);\n border-radius: var(--sdt-radius-sm);\n color: var(--sdt-text-secondary);\n cursor: pointer;\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;\n white-space: nowrap;\n }\n\n .hexclave-devtool .sdt-console-action-btn:hover {\n color: var(--sdt-text);\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-border);\n }\n\n .hexclave-devtool .sdt-console-action-btn svg {\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-console-log-scroll {\n flex: 1;\n min-height: 0;\n overflow: auto;\n }\n\n .hexclave-devtool .sdt-console-tabs {\n position: relative;\n display: flex;\n flex: 1;\n gap: 2px;\n background: var(--sdt-bg-subtle);\n border-radius: var(--sdt-radius);\n padding: 2px;\n }\n\n .hexclave-devtool .sdt-console-tab-indicator {\n position: absolute;\n top: 2px;\n left: 0;\n background: var(--sdt-bg-active);\n border-radius: var(--sdt-radius-sm);\n transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n pointer-events: none;\n z-index: 0;\n }\n\n .hexclave-devtool .sdt-console-tab {\n position: relative;\n z-index: 1;\n flex: 1;\n padding: 6px 12px;\n background: transparent;\n border: none;\n border-radius: var(--sdt-radius-sm);\n cursor: pointer;\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n color: var(--sdt-text-secondary);\n transition: color 0.15s ease;\n text-align: center;\n }\n\n .hexclave-devtool .sdt-console-tab:hover {\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-console-tab[data-active=\"true\"] {\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-log-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .hexclave-devtool .sdt-log-load-hint {\n padding: 8px 10px;\n color: var(--sdt-text-tertiary);\n font-family: var(--sdt-font);\n font-size: 12px;\n text-align: center;\n }\n\n .hexclave-devtool .sdt-log-item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 8px 10px;\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius-sm);\n font-size: 12px;\n font-family: var(--sdt-font-mono);\n }\n\n .hexclave-devtool .sdt-log-time {\n color: var(--sdt-text-tertiary);\n flex-shrink: 0;\n font-size: 11px;\n }\n\n .hexclave-devtool .sdt-log-type {\n padding: 1px 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-log-message {\n flex: 1;\n color: var(--sdt-text);\n word-break: break-all;\n }\n\n .hexclave-devtool .sdt-log-method {\n padding: 1px 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-log-method-get {\n background: var(--sdt-info-muted);\n color: var(--sdt-info);\n }\n\n .hexclave-devtool .sdt-log-method-post {\n background: var(--sdt-success-muted);\n color: var(--sdt-success);\n }\n\n .hexclave-devtool .sdt-log-method-put, .hexclave-devtool .sdt-log-method-patch {\n background: var(--sdt-warning-muted);\n color: var(--sdt-warning);\n }\n\n .hexclave-devtool .sdt-log-method-delete {\n background: var(--sdt-error-muted);\n color: var(--sdt-error);\n }\n\n .hexclave-devtool .sdt-log-status {\n font-size: 11px;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-log-status-ok {\n color: var(--sdt-success);\n }\n\n .hexclave-devtool .sdt-log-status-err {\n color: var(--sdt-error);\n }\n\n .hexclave-devtool .sdt-log-url {\n flex: 1;\n color: var(--sdt-text);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .hexclave-devtool .sdt-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n padding: 40px 20px;\n color: var(--sdt-text-tertiary);\n font-size: 13px;\n text-align: center;\n gap: 4px;\n }\n\n .hexclave-devtool .sdt-empty-state-icon {\n font-size: 24px;\n margin-bottom: 8px;\n opacity: 0.5;\n }\n\n / Config info table /\n .hexclave-devtool .sdt-config-table {\n width: 100%;\n border-collapse: collapse;\n }\n\n .hexclave-devtool .sdt-config-table td {\n padding: 8px 10px;\n border-bottom: 1px solid var(--sdt-border-subtle);\n font-size: 12px;\n }\n\n .hexclave-devtool .sdt-config-table td:first-child {\n color: var(--sdt-text-secondary);\n width: 160px;\n font-weight: 500;\n }\n\n .hexclave-devtool .sdt-config-table td:last-child {\n color: var(--sdt-text);\n font-family: var(--sdt-font-mono);\n word-break: break-all;\n }\n\n .hexclave-devtool .sdt-config-table td .sdt-config-link {\n font-family: inherit;\n color: var(--sdt-accent);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .hexclave-devtool .sdt-config-table td .sdt-config-link:hover {\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-config-muted {\n color: var(--sdt-text-tertiary);\n font-style: italic;\n }\n\n / Resize handle /\n .hexclave-devtool .sdt-resize-handle {\n position: absolute;\n top: 0;\n left: -4px;\n width: 8px;\n height: 100%;\n cursor: ew-resize;\n z-index: 10;\n }\n\n .hexclave-devtool .sdt-resize-handle::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 3px;\n width: 2px;\n height: 32px;\n transform: translateY(-50%);\n background: transparent;\n border-radius: 1px;\n transition: background 0.15s ease;\n }\n\n .hexclave-devtool .sdt-resize-handle:hover::after,\n .hexclave-devtool .sdt-resize-handle:active::after {\n background: var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-resize-handle-top {\n position: absolute;\n top: -4px;\n left: 0;\n width: 100%;\n height: 8px;\n cursor: ns-resize;\n z-index: 10;\n }\n\n .hexclave-devtool .sdt-resize-handle-top::after {\n content: '';\n position: absolute;\n left: 50%;\n top: 3px;\n height: 2px;\n width: 32px;\n transform: translateX(-50%);\n background: transparent;\n border-radius: 1px;\n transition: background 0.15s ease;\n }\n\n .hexclave-devtool .sdt-resize-handle-top:hover::after,\n .hexclave-devtool .sdt-resize-handle-top:active::after {\n background: var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-resize-handle-corner {\n position: absolute;\n top: -6px;\n left: -6px;\n width: 14px;\n height: 14px;\n cursor: nwse-resize;\n z-index: 11;\n }\n\n .hexclave-devtool .sdt-resize-handle-corner::after {\n content: '';\n position: absolute;\n bottom: 4px;\n right: 4px;\n width: 5px;\n height: 5px;\n background: transparent;\n border-radius: 50%;\n transition: background 0.15s ease;\n }\n\n .hexclave-devtool .sdt-resize-handle-corner:hover::after,\n .hexclave-devtool .sdt-resize-handle-corner:active::after {\n background: var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-no-components {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: var(--sdt-text-tertiary);\n font-size: 13px;\n text-align: center;\n padding: 20px;\n }\n\n / Support tab /\n .hexclave-devtool .sdt-support-tab {\n display: flex;\n flex-direction: column;\n height: calc(100% + 32px);\n margin: -16px;\n }\n\n .hexclave-devtool .sdt-support-feedback-pane {\n padding: 20px;\n height: 100%;\n overflow-y: auto;\n }\n\n / Form layout /\n .hexclave-devtool .sdt-support-form {\n display: flex;\n flex-direction: column;\n gap: 14px;\n }\n\n / Type cards /\n .hexclave-devtool .sdt-support-type-cards {\n display: flex;\n gap: 8px;\n }\n\n .hexclave-devtool .sdt-support-type-card {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 8px 10px;\n background: var(--sdt-bg);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius);\n cursor: pointer;\n font-family: var(--sdt-font);\n font-size: 11px;\n font-weight: 500;\n color: var(--sdt-text-secondary);\n transition: all 0.15s ease;\n }\n\n .hexclave-devtool .sdt-support-type-card svg {\n flex-shrink: 0;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n }\n\n .hexclave-devtool .sdt-support-type-card:hover {\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-border);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-support-type-card:hover svg {\n opacity: 1;\n }\n\n .hexclave-devtool .sdt-support-type-card-active {\n border-color: var(--sdt-accent);\n background: var(--sdt-accent-muted);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-support-type-card-active svg {\n opacity: 1;\n color: var(--sdt-accent);\n }\n\n / Field group /\n .hexclave-devtool .sdt-support-field {\n display: flex;\n flex-direction: column;\n gap: 5px;\n }\n\n .hexclave-devtool .sdt-support-label {\n font-size: 11px;\n font-weight: 600;\n color: var(--sdt-text-secondary);\n letter-spacing: 0.3px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .hexclave-devtool .sdt-support-optional {\n font-size: 10px;\n font-weight: 400;\n color: var(--sdt-text-tertiary);\n text-transform: none;\n letter-spacing: 0;\n }\n\n / Inputs /\n .hexclave-devtool .sdt-support-input,\n .hexclave-devtool .sdt-support-textarea {\n width: 100%;\n padding: 9px 12px;\n background: var(--sdt-bg);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius-sm);\n color: var(--sdt-text);\n font-family: var(--sdt-font);\n font-size: 13px;\n outline: none;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n }\n\n .hexclave-devtool .sdt-support-input::placeholder,\n .hexclave-devtool .sdt-support-textarea::placeholder {\n color: var(--sdt-text-tertiary);\n }\n\n .hexclave-devtool .sdt-support-input:focus,\n .hexclave-devtool .sdt-support-textarea:focus {\n border-color: var(--sdt-accent);\n box-shadow: 0 0 0 3px var(--sdt-accent-muted);\n }\n\n .hexclave-devtool .sdt-support-textarea {\n resize: vertical;\n min-height: 100px;\n line-height: 1.6;\n }\n\n / Submit button /\n .hexclave-devtool .sdt-support-submit {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 9px 20px;\n background: var(--sdt-accent);\n color: white;\n border: none;\n border-radius: var(--sdt-radius);\n cursor: pointer;\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.2px;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);\n }\n\n .hexclave-devtool .sdt-support-submit:hover:not(:disabled) {\n background: var(--sdt-accent-hover);\n box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);\n transform: translateY(-1px);\n }\n\n .hexclave-devtool .sdt-support-submit:active:not(:disabled) {\n transform: translateY(0);\n box-shadow: 0 1px 2px rgba(99, 102, 241, 0.2);\n }\n\n .hexclave-devtool .sdt-support-submit:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .hexclave-devtool .sdt-support-submit svg {\n flex-shrink: 0;\n }\n\n @keyframes sdt-spin {\n to { transform: rotate(360deg); }\n }\n\n .hexclave-devtool .sdt-support-spinner {\n animation: sdt-spin 1s linear infinite;\n }\n\n / Status screens (success / error) /\n .hexclave-devtool .sdt-support-status {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 32px 20px;\n border-radius: var(--sdt-radius-lg);\n text-align: center;\n gap: 6px;\n }\n\n .hexclave-devtool .sdt-support-status-success {\n background: linear-gradient(180deg, var(--sdt-success-muted), transparent 80%);\n border: 1px solid rgba(34, 197, 94, 0.15);\n }\n\n .hexclave-devtool .sdt-support-status-error {\n background: linear-gradient(180deg, var(--sdt-error-muted), transparent 80%);\n border: 1px solid rgba(239, 68, 68, 0.15);\n }\n\n .hexclave-devtool .sdt-support-status-icon {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 6px;\n }\n\n .hexclave-devtool .sdt-support-status-success .sdt-support-status-icon {\n background: rgba(34, 197, 94, 0.15);\n color: var(--sdt-success);\n box-shadow: 0 0 20px rgba(34, 197, 94, 0.1);\n }\n\n .hexclave-devtool .sdt-support-status-error .sdt-support-status-icon {\n background: rgba(239, 68, 68, 0.15);\n color: var(--sdt-error);\n box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);\n }\n\n .hexclave-devtool .sdt-support-status-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-support-status-msg {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n line-height: 1.5;\n max-width: 260px;\n }\n\n / Support channels /\n .hexclave-devtool .sdt-support-channels {\n display: flex;\n gap: 8px;\n }\n\n .hexclave-devtool .sdt-support-channel {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 8px 10px;\n background: var(--sdt-bg);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius);\n color: var(--sdt-text-secondary);\n text-decoration: none;\n font-size: 11px;\n font-weight: 500;\n transition: all 0.15s ease;\n }\n\n .hexclave-devtool .sdt-support-channel:hover {\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-border);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-support-channel svg {\n flex-shrink: 0;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n }\n\n .hexclave-devtool .sdt-support-channel:hover svg {\n opacity: 1;\n }\n\n / Light theme + data-stack-theme overrides come from the shared in-page-ui\n base styles (in-page-ui/base-styles.ts). /\n\n / Export dialog — positioned inside the dev tool panel /\n .hexclave-devtool .sdt-share-overlay {\n position: absolute;\n inset: 0;\n z-index: 20;\n background: rgba(0, 0, 0, 0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n animation: sdt-tab-fade-in 0.15s ease-out;\n border-radius: var(--sdt-radius-lg);\n }\n\n .hexclave-devtool .sdt-share-dialog {\n width: 380px;\n max-width: calc(100% - 32px);\n background: var(--sdt-bg);\n border: 1px solid var(--sdt-border);\n border-radius: var(--sdt-radius-lg);\n box-shadow: var(--sdt-shadow);\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n .hexclave-devtool .sdt-share-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .hexclave-devtool .sdt-share-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-share-status {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 20px;\n color: var(--sdt-text-secondary);\n font-size: 13px;\n }\n\n .hexclave-devtool .sdt-share-url-row {\n display: flex;\n gap: 6px;\n align-items: center;\n }\n\n .hexclave-devtool .sdt-share-url-row .sdt-support-input {\n flex: 1;\n font-family: var(--sdt-font-mono);\n font-size: 12px;\n }\n\n .hexclave-devtool .sdt-share-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n flex-shrink: 0;\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius-sm);\n color: var(--sdt-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .hexclave-devtool .sdt-share-copy-btn:hover {\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-share-actions {\n display: flex;\n gap: 8px;\n }\n\n .hexclave-devtool .sdt-share-action-btn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 12px;\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius);\n color: var(--sdt-text-secondary);\n text-decoration: none;\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .hexclave-devtool .sdt-share-action-btn:hover {\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-border);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-share-action-btn svg {\n flex-shrink: 0;\n opacity: 0.7;\n }\n\n .hexclave-devtool .sdt-share-action-btn:hover svg {\n opacity: 1;\n }\n\n .hexclave-devtool .sdt-share-action-btn-accent {\n background: var(--sdt-accent);\n border-color: var(--sdt-accent);\n color: white;\n }\n\n .hexclave-devtool .sdt-share-action-btn-accent:hover {\n background: var(--sdt-accent-hover);\n border-color: var(--sdt-accent-hover);\n color: white;\n }\n\n .hexclave-devtool .sdt-share-action-btn-accent svg {\n opacity: 1;\n }\n\n / --- AI Chat tab --- /\n\n .hexclave-devtool .sdt-ai-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n }\n\n .hexclave-devtool .sdt-ai-messages {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 16px;\n scroll-behavior: smooth;\n }\n\n .hexclave-devtool .sdt-ai-message-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n / --- Empty state --- /\n\n .hexclave-devtool .sdt-ai-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n gap: 12px;\n padding: 24px;\n text-align: center;\n }\n\n .hexclave-devtool .sdt-ai-empty-icon {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--sdt-accent-muted);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--sdt-accent);\n margin-bottom: 4px;\n }\n\n .hexclave-devtool .sdt-ai-empty-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-ai-empty-desc {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n max-width: 320px;\n line-height: 1.5;\n }\n\n .hexclave-devtool .sdt-ai-suggestions {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-top: 8px;\n width: 100%;\n max-width: 340px;\n }\n\n .hexclave-devtool .sdt-ai-suggestion {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n border-radius: var(--sdt-radius);\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n color: var(--sdt-text-secondary);\n font-size: 12px;\n cursor: pointer;\n text-align: left;\n transition: all 0.15s ease;\n font-family: var(--sdt-font);\n line-height: 1.4;\n }\n\n .hexclave-devtool .sdt-ai-suggestion:hover {\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-border);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-ai-suggestion-icon {\n font-size: 14px;\n flex-shrink: 0;\n }\n\n / --- Messages --- /\n\n .hexclave-devtool .sdt-ai-msg {\n display: flex;\n gap: 10px;\n align-items: flex-start;\n }\n\n .hexclave-devtool .sdt-ai-msg-user {\n justify-content: flex-end;\n }\n\n .hexclave-devtool .sdt-ai-msg-assistant {\n justify-content: flex-start;\n }\n\n .hexclave-devtool .sdt-ai-avatar {\n width: 26px;\n height: 26px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n .hexclave-devtool .sdt-ai-avatar-user {\n background: var(--sdt-info-muted);\n color: var(--sdt-info);\n order: 2;\n }\n\n .hexclave-devtool .sdt-ai-avatar-assistant {\n background: var(--sdt-accent-muted);\n color: var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-ai-bubble {\n min-width: 0;\n max-width: 85%;\n border-radius: var(--sdt-radius-lg);\n padding: 10px 14px;\n }\n\n .hexclave-devtool .sdt-ai-bubble-user {\n background: var(--sdt-info-muted);\n border: 1px solid rgba(59, 130, 246, 0.1);\n }\n\n .hexclave-devtool .sdt-ai-bubble-user p {\n font-size: 13px;\n line-height: 1.55;\n color: var(--sdt-text);\n margin: 0;\n word-break: break-word;\n }\n\n .hexclave-devtool .sdt-ai-bubble-assistant {\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n }\n\n / --- Thinking dots --- /\n\n .hexclave-devtool .sdt-ai-thinking {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 0;\n }\n\n .hexclave-devtool .sdt-ai-thinking-dot {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--sdt-accent);\n opacity: 0.5;\n animation: sdt-ai-pulse 1.2s ease-in-out infinite;\n }\n\n .hexclave-devtool .sdt-ai-thinking-dot:nth-child(2) { animation-delay: 0.15s; }\n .hexclave-devtool .sdt-ai-thinking-dot:nth-child(3) { animation-delay: 0.3s; }\n\n @keyframes sdt-ai-pulse {\n 0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }\n 40% { opacity: 1; transform: scale(1.1); }\n }\n\n .hexclave-devtool .sdt-ai-streaming-indicator {\n display: flex;\n align-items: center;\n gap: 3px;\n margin-top: 6px;\n }\n\n / --- Markdown content inside assistant bubble --- /\n\n .hexclave-devtool .sdt-ai-paragraph {\n font-size: 13px;\n line-height: 1.6;\n color: var(--sdt-text);\n margin: 0 0 10px;\n word-break: break-word;\n }\n\n .hexclave-devtool .sdt-ai-paragraph:last-child { margin-bottom: 0; }\n\n .hexclave-devtool .sdt-ai-bold {\n font-weight: 600;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-ai-inline-code {\n display: inline;\n padding: 1.5px 5px;\n border-radius: 4px;\n font-family: var(--sdt-font-mono);\n font-size: 11.5px;\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n border: 1px solid var(--sdt-border-subtle);\n }\n\n .hexclave-devtool .sdt-ai-link {\n color: var(--sdt-info);\n text-decoration: none;\n transition: color 0.1s;\n }\n\n .hexclave-devtool .sdt-ai-link:hover {\n color: var(--sdt-accent-hover);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .hexclave-devtool .sdt-ai-heading {\n font-weight: 600;\n color: var(--sdt-text);\n margin: 12px 0 6px;\n line-height: 1.35;\n }\n\n .hexclave-devtool .sdt-ai-heading:first-child { margin-top: 0; }\n\n .hexclave-devtool .sdt-ai-bubble-assistant h1.sdt-ai-heading { font-size: 15px; }\n .hexclave-devtool .sdt-ai-bubble-assistant h2.sdt-ai-heading { font-size: 13.5px; }\n .hexclave-devtool .sdt-ai-bubble-assistant h3.sdt-ai-heading { font-size: 13px; }\n\n .hexclave-devtool .sdt-ai-list {\n font-size: 13px;\n line-height: 1.6;\n color: var(--sdt-text);\n margin: 0 0 10px;\n padding-left: 20px;\n }\n\n .hexclave-devtool .sdt-ai-list:last-child { margin-bottom: 0; }\n\n .hexclave-devtool .sdt-ai-list li {\n margin-bottom: 3px;\n padding-left: 2px;\n }\n\n .hexclave-devtool .sdt-ai-list li::marker {\n color: var(--sdt-text-tertiary);\n }\n\n .hexclave-devtool .sdt-ai-list-ordered {\n list-style-type: decimal;\n }\n\n .hexclave-devtool .sdt-ai-tools {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin: 6px 0;\n }\n\n .hexclave-devtool .sdt-ai-part-text {\n margin: 6px 0;\n }\n\n .hexclave-devtool .sdt-ai-tool-card {\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius);\n background: var(--sdt-bg-subtle);\n overflow: hidden;\n }\n\n .hexclave-devtool .sdt-ai-tool-header {\n width: 100%;\n border: none;\n background: transparent;\n color: inherit;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n cursor: pointer;\n text-align: left;\n font-family: var(--sdt-font);\n }\n\n .hexclave-devtool .sdt-ai-tool-header:hover {\n background: var(--sdt-bg-hover);\n }\n\n .hexclave-devtool .sdt-ai-tool-name {\n font-size: 12px;\n font-weight: 600;\n color: var(--sdt-text);\n flex: 1;\n }\n\n .hexclave-devtool .sdt-ai-tool-status {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n font-weight: 600;\n }\n\n .hexclave-devtool .sdt-ai-tool-status-running { color: var(--sdt-warning); }\n .hexclave-devtool .sdt-ai-tool-status-success { color: var(--sdt-success); }\n .hexclave-devtool .sdt-ai-tool-status-error { color: var(--sdt-error); }\n\n .hexclave-devtool .sdt-ai-tool-chevron {\n color: var(--sdt-text-tertiary);\n font-size: 10px;\n transition: transform 0.15s ease;\n }\n\n .hexclave-devtool .sdt-ai-tool-chevron-open {\n transform: rotate(180deg);\n }\n\n .hexclave-devtool .sdt-ai-tool-body {\n border-top: 1px solid var(--sdt-border-subtle);\n padding: 8px 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .hexclave-devtool .sdt-ai-tool-label {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--sdt-text-tertiary);\n font-weight: 600;\n }\n\n .hexclave-devtool .sdt-ai-tool-pre {\n margin: 0;\n padding: 8px;\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius-sm);\n background: var(--sdt-bg);\n font-family: var(--sdt-font-mono);\n font-size: 11px;\n line-height: 1.5;\n color: var(--sdt-text-secondary);\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .hexclave-devtool .sdt-ai-tool-running {\n font-size: 11px;\n color: var(--sdt-text-secondary);\n }\n\n .hexclave-devtool .sdt-ai-blockquote {\n border-left: 3px solid var(--sdt-accent);\n padding-left: 12px;\n margin: 8px 0;\n font-size: 13px;\n color: var(--sdt-text-secondary);\n font-style: italic;\n }\n\n .hexclave-devtool .sdt-ai-hr {\n border: none;\n border-top: 1px solid var(--sdt-border-subtle);\n margin: 12px 0;\n }\n\n / --- Code blocks --- /\n\n .hexclave-devtool .sdt-ai-code-block {\n border-radius: var(--sdt-radius);\n overflow: hidden;\n margin: 8px 0;\n border: 1px solid var(--sdt-border-subtle);\n background: var(--sdt-bg-subtle);\n }\n\n .hexclave-devtool .sdt-ai-code-block:last-child { margin-bottom: 0; }\n\n .hexclave-devtool .sdt-ai-code-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 5px 10px;\n border-bottom: 1px solid var(--sdt-border-subtle);\n background: var(--sdt-bg);\n }\n\n .hexclave-devtool .sdt-ai-code-lang {\n font-size: 9px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--sdt-text-tertiary);\n font-family: var(--sdt-font);\n }\n\n .hexclave-devtool .sdt-ai-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: var(--sdt-radius-sm);\n border: none;\n background: transparent;\n color: var(--sdt-text-tertiary);\n cursor: pointer;\n font-size: 12px;\n font-family: var(--sdt-font);\n transition: all 0.15s ease;\n }\n\n .hexclave-devtool .sdt-ai-copy-btn:hover {\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-ai-copy-btn-copied {\n color: var(--sdt-success) !important;\n }\n\n .hexclave-devtool .sdt-ai-code-pre {\n margin: 0;\n padding: 10px 12px;\n overflow-x: auto;\n font-family: var(--sdt-font-mono);\n font-size: 11.5px;\n line-height: 1.6;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-ai-code-pre code {\n font-family: inherit;\n background: none;\n border: none;\n padding: 0;\n }\n\n / --- Error --- /\n\n .hexclave-devtool .sdt-ai-error {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 10px 14px;\n margin: 8px 16px;\n border-radius: var(--sdt-radius);\n background: var(--sdt-error-muted);\n border: 1px solid rgba(239, 68, 68, 0.2);\n font-size: 12px;\n color: var(--sdt-error);\n line-height: 1.4;\n }\n\n / --- Input area --- /\n\n .hexclave-devtool .sdt-ai-input-area {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border-top: 1px solid var(--sdt-border-subtle);\n background: var(--sdt-bg);\n }\n\n .hexclave-devtool .sdt-ai-new-chat {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: var(--sdt-radius);\n border: 1px solid var(--sdt-border-subtle);\n background: var(--sdt-bg-elevated);\n color: var(--sdt-text-secondary);\n cursor: pointer;\n flex-shrink: 0;\n transition: all 0.15s ease;\n font-family: var(--sdt-font);\n }\n\n .hexclave-devtool .sdt-ai-new-chat:hover {\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-border);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-ai-input-wrapper {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 6px;\n border-radius: var(--sdt-radius);\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n padding: 0 4px 0 12px;\n transition: border-color 0.15s ease;\n }\n\n .hexclave-devtool .sdt-ai-input-wrapper:focus-within {\n border-color: var(--sdt-accent);\n box-shadow: 0 0 0 2px var(--sdt-accent-muted);\n }\n\n .hexclave-devtool .sdt-ai-input {\n flex: 1;\n background: transparent;\n border: none;\n outline: none;\n color: var(--sdt-text);\n font-size: 13px;\n font-family: var(--sdt-font);\n padding: 8px 0;\n min-width: 0;\n }\n\n .hexclave-devtool .sdt-ai-input::placeholder {\n color: var(--sdt-text-tertiary);\n }\n\n .hexclave-devtool .sdt-ai-input:disabled {\n opacity: 0.5;\n }\n\n .hexclave-devtool .sdt-ai-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border-radius: 6px;\n border: none;\n background: transparent;\n color: var(--sdt-text-tertiary);\n cursor: not-allowed;\n flex-shrink: 0;\n transition: all 0.15s ease;\n font-family: var(--sdt-font);\n }\n\n .hexclave-devtool .sdt-ai-send-btn-active {\n background: var(--sdt-accent);\n color: white;\n cursor: pointer;\n }\n\n .hexclave-devtool .sdt-ai-send-btn-active:hover {\n background: var(--sdt-accent-hover);\n }\n\n .hexclave-devtool .sdt-ai-stop-btn,\n .hexclave-devtool .sdt-ai-stop-btn:hover {\n background: var(--sdt-error);\n color: white;\n }\n\n / Accessible focus indicator for keyboard navigation /\n .hexclave-devtool .sdt-tab:focus-visible {\n outline: 2px solid var(--sdt-accent);\n outline-offset: -2px;\n border-radius: var(--sdt-radius);\n }\n\n / Reduced motion: disable animations for users who prefer it */\n @media (prefers-reduced-motion: reduce) {\n .hexclave-devtool .sdt-panel-inner,\n .hexclave-devtool .sdt-panel-exiting,\n .hexclave-devtool .sdt-tab-content,\n .hexclave-devtool .sdt-ov-pulse-dot,\n .hexclave-devtool .sdt-ov-skeleton-pill,\n .hexclave-devtool .sdt-support-spinner,\n .hexclave-devtool .sdt-ai-thinking-dot {\n animation: none !important;\n }\n\n .hexclave-devtool .sdt-tab-indicator,\n .hexclave-devtool .sdt-tab {\n transition: none !important;\n }\n }\n\n`;\n"],"mappings":";;;AAWA,MAAa,aAAa,mBAAmB,oBAAoB,GAAG"}
1	+ {"version":3,"file":"dev-tool-styles.js","names":[],"sources":["../../../src/dev-tool/dev-tool-styles.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n// Theme-aware CSS for the dev tool indicator\n// Respects Stack theme (data-stack-theme attribute) and system prefers-color-scheme\n// Uses .hexclave-devtool scope to avoid conflicts with host app styles\n// Design tokens + base reset come from the shared in-page-ui module.\n\nimport { getInPageUiBaseCSS } from \"../in-page-ui/base-styles\";\n\nexport const devToolCSS = getInPageUiBaseCSS('.hexclave-devtool') + `\n /* Trigger pill /\n .hexclave-devtool .sdt-trigger {\n position: fixed;\n z-index: 2147483647;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border);\n border-radius: 10px;\n cursor: grab;\n box-shadow: var(--sdt-trigger-shadow);\n transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n user-select: none;\n touch-action: none;\n }\n\n .hexclave-devtool .sdt-trigger-position-animated {\n transition: left 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n }\n\n .hexclave-devtool .sdt-trigger:hover {\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-accent);\n box-shadow: var(--sdt-trigger-shadow), 0 0 0 1px var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-trigger:active {\n cursor: grabbing;\n }\n\n .hexclave-devtool .sdt-trigger-logo {\n width: 22px;\n height: 22px;\n border-radius: 6px;\n background: var(--sdt-accent);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n line-height: 0;\n }\n\n / Panel overlay /\n .hexclave-devtool .sdt-panel {\n position: fixed;\n bottom: 60px;\n right: 16px;\n z-index: 2147483647;\n width: 800px;\n max-width: calc(100vw - 32px);\n height: 520px;\n max-height: calc(100vh - 80px);\n background: var(--sdt-bg);\n border: 1px solid var(--sdt-border);\n border-radius: var(--sdt-radius-lg);\n box-shadow: var(--sdt-shadow);\n display: flex;\n flex-direction: column;\n overflow: visible;\n }\n\n .hexclave-devtool .sdt-panel-geometry-animated {\n transition: width 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n height 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n right 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n bottom 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n border-radius 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n border-color 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);\n }\n\n .hexclave-devtool .sdt-panel-fullscreen {\n right: 0;\n bottom: 0;\n width: 100vw;\n max-width: none;\n height: 100vh;\n max-height: none;\n border: none;\n border-radius: 0;\n }\n\n .hexclave-devtool .sdt-panel-inner {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: var(--sdt-radius-lg);\n animation: sdt-panel-enter 0.2s ease-out;\n }\n\n .hexclave-devtool .sdt-panel-fullscreen .sdt-panel-inner {\n border-radius: 0;\n }\n\n .hexclave-devtool .sdt-panel-fullscreen .sdt-resize-handle {\n display: none;\n }\n\n @keyframes sdt-panel-enter {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(8px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }\n\n .hexclave-devtool .sdt-panel-exiting {\n animation: sdt-panel-exit 0.15s ease-in forwards;\n }\n\n @keyframes sdt-panel-exit {\n from {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n to {\n opacity: 0;\n transform: scale(0.95) translateY(8px);\n }\n }\n\n / Tab bar /\n .hexclave-devtool .sdt-tabbar {\n position: relative;\n display: flex;\n align-items: center;\n height: 44px;\n padding: 0 8px;\n background: var(--sdt-bg-subtle);\n border-bottom: 1px solid var(--sdt-border);\n flex-shrink: 0;\n gap: 2px;\n overflow-x: auto;\n overflow-y: hidden;\n }\n\n .hexclave-devtool .sdt-panel-fullscreen .sdt-tabbar {\n position: absolute;\n top: 8px;\n left: 8px;\n right: 8px;\n z-index: 2;\n background: var(--sdt-overlay-bg);\n border: 1px solid var(--sdt-border);\n border-radius: var(--sdt-radius);\n box-shadow: var(--sdt-trigger-shadow);\n }\n\n .hexclave-devtool .sdt-tab-indicator {\n position: absolute;\n top: 6px;\n left: 0;\n height: 32px;\n background: var(--sdt-bg-active);\n border-radius: var(--sdt-radius);\n transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n pointer-events: none;\n z-index: 0;\n }\n\n .hexclave-devtool .sdt-tab {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n gap: 6px;\n height: 32px;\n padding: 0 12px;\n background: transparent;\n border: none;\n border-radius: var(--sdt-radius);\n cursor: pointer;\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n color: var(--sdt-text-secondary);\n transition: color 0.15s ease;\n white-space: nowrap;\n outline: none;\n }\n\n .hexclave-devtool .sdt-tab:hover {\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-tab[data-active=\"true\"] {\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-tab-icon {\n width: 14px;\n height: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-tabbar-spacer {\n flex: 1;\n }\n\n .hexclave-devtool .sdt-tabbar-actions {\n position: sticky;\n right: 0;\n z-index: 2;\n display: flex;\n align-items: center;\n align-self: stretch;\n gap: 4px;\n padding-left: 6px;\n background: inherit;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-docs-link {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n height: 28px;\n padding: 0 8px;\n color: var(--sdt-text-secondary);\n border-radius: var(--sdt-radius-sm);\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .hexclave-devtool .sdt-docs-link:hover {\n color: var(--sdt-text);\n background: var(--sdt-bg-hover);\n }\n\n .hexclave-devtool .sdt-docs-link-icon {\n display: flex;\n width: 13px;\n height: 13px;\n line-height: 0;\n }\n\n .hexclave-devtool .sdt-close-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n background: transparent;\n border: none;\n border-radius: var(--sdt-radius-sm);\n cursor: pointer;\n color: var(--sdt-text-tertiary);\n transition: all 0.15s ease;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-close-btn:hover {\n color: var(--sdt-text);\n background: var(--sdt-bg-hover);\n }\n\n / Tab content area /\n .hexclave-devtool .sdt-content {\n flex: 1;\n position: relative;\n overflow: hidden;\n min-height: 0;\n }\n\n .hexclave-devtool .sdt-panel-fullscreen .sdt-content {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n }\n\n .hexclave-devtool .sdt-tab-layers {\n position: absolute;\n inset: 0;\n }\n\n .hexclave-devtool .sdt-tab-pane {\n position: absolute;\n inset: 0;\n display: none;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 16px;\n background: var(--sdt-bg);\n opacity: 0;\n pointer-events: none;\n z-index: 0;\n }\n\n .hexclave-devtool .sdt-tab-pane-iframe {\n padding: 0;\n overflow: hidden;\n }\n\n .hexclave-devtool .sdt-tab-pane-active {\n display: block;\n opacity: 1;\n pointer-events: auto;\n z-index: 1;\n }\n\n / ===== Overview tab — single column ===== /\n\n .hexclave-devtool .sdt-ov {\n display: flex;\n flex-direction: column;\n gap: 10px;\n max-width: 660px;\n margin: 0 auto;\n }\n\n / Card base /\n .hexclave-devtool .sdt-ov-card {\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: 12px;\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 0;\n transition: box-shadow 0.2s ease, border-color 0.2s ease;\n overflow: hidden;\n min-width: 0;\n }\n\n .hexclave-devtool .sdt-ov-card-hero {\n background: linear-gradient(135deg, rgba(99,102,241,0.04) 0%, transparent 50%), var(--sdt-bg-elevated);\n }\n\n .hexclave-devtool .sdt-ov-label {\n font-size: 9px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1.2px;\n color: var(--sdt-text-tertiary);\n margin-bottom: 10px;\n }\n\n .hexclave-devtool .sdt-ov-user-row {\n display: flex;\n align-items: center;\n gap: 14px;\n margin-bottom: 14px;\n }\n\n .hexclave-devtool .sdt-ov-avatar {\n width: 52px;\n height: 52px;\n border-radius: 50%;\n background: var(--sdt-bg-hover);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n font-weight: 700;\n color: var(--sdt-text-tertiary);\n flex-shrink: 0;\n border: 2px solid var(--sdt-border-subtle);\n overflow: hidden;\n }\n\n .hexclave-devtool .sdt-ov-avatar-active {\n background: var(--sdt-accent-muted);\n color: var(--sdt-accent);\n border-color: rgba(99,102,241,0.3);\n }\n\n .hexclave-devtool .sdt-ov-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n }\n\n .hexclave-devtool .sdt-ov-user-meta {\n min-width: 0;\n flex: 1;\n }\n\n .hexclave-devtool .sdt-ov-user-name {\n font-size: 16px;\n font-weight: 700;\n color: var(--sdt-text);\n line-height: 1.2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .hexclave-devtool .sdt-ov-user-email {\n font-size: 12px;\n font-family: var(--sdt-font-mono);\n color: var(--sdt-text-secondary);\n margin-top: 2px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .hexclave-devtool .sdt-ov-auth-indicator {\n display: flex;\n align-items: center;\n gap: 5px;\n margin-top: 5px;\n font-size: 11px;\n font-weight: 600;\n color: var(--sdt-success);\n }\n\n .hexclave-devtool .sdt-ov-auth-indicator::before {\n content: '';\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--sdt-success);\n box-shadow: 0 0 6px rgba(34,197,94,0.5);\n }\n\n / Actions /\n .hexclave-devtool .sdt-ov-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 4px;\n }\n\n .hexclave-devtool .sdt-ov-btn {\n height: 30px;\n padding: 0 12px;\n border-radius: 6px;\n border: none;\n font-size: 12px;\n font-weight: 600;\n font-family: var(--sdt-font);\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n }\n .hexclave-devtool .sdt-ov-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n .hexclave-devtool .sdt-ov-btn-primary {\n background: var(--sdt-accent);\n color: #fff;\n }\n .hexclave-devtool .sdt-ov-btn-primary:hover { background: var(--sdt-accent-hover); }\n\n .hexclave-devtool .sdt-ov-btn-secondary {\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n }\n .hexclave-devtool .sdt-ov-btn-secondary:hover { background: var(--sdt-bg-active); }\n\n .hexclave-devtool .sdt-ov-btn-danger {\n background: var(--sdt-error-muted);\n color: var(--sdt-error);\n border: 1px solid rgba(239, 68, 68, 0.15);\n }\n .hexclave-devtool .sdt-ov-btn-danger:hover { background: rgba(239, 68, 68, 0.2); }\n\n .hexclave-devtool .sdt-ov-btn-wide { flex: 1; }\n\n .hexclave-devtool .sdt-ov-email-input {\n display: flex;\n flex: 1 1 180px;\n border: 1px solid var(--sdt-border-subtle);\n border-radius: 6px;\n overflow: hidden;\n background: var(--sdt-bg);\n transition: border-color 0.15s ease;\n }\n .hexclave-devtool .sdt-ov-email-input:focus-within {\n border-color: var(--sdt-accent);\n box-shadow: 0 0 0 2px var(--sdt-accent-muted);\n }\n .hexclave-devtool .sdt-ov-email-input input {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n background: transparent;\n border: none;\n color: var(--sdt-text);\n font-size: 11px;\n font-family: var(--sdt-font);\n outline: none;\n min-width: 0;\n }\n .hexclave-devtool .sdt-ov-email-input input::placeholder { color: var(--sdt-text-tertiary); }\n .hexclave-devtool .sdt-ov-email-input button {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-left: 1px solid var(--sdt-border-subtle);\n background: transparent;\n color: var(--sdt-accent);\n cursor: pointer;\n flex-shrink: 0;\n font-family: var(--sdt-font);\n }\n .hexclave-devtool .sdt-ov-email-input button:hover { background: var(--sdt-accent-muted); }\n .hexclave-devtool .sdt-ov-email-input button:disabled { opacity: 0.3; cursor: not-allowed; }\n\n .hexclave-devtool .sdt-ov-toast {\n font-size: 11px;\n padding: 5px 10px;\n border-radius: 6px;\n margin-top: 8px;\n line-height: 1.4;\n }\n .hexclave-devtool .sdt-ov-toast-success { background: var(--sdt-success-muted); color: var(--sdt-success); }\n .hexclave-devtool .sdt-ov-toast-error { background: var(--sdt-error-muted); color: var(--sdt-error); }\n\n / --- Auth methods card --- /\n .hexclave-devtool .sdt-ov-card-auth {\n padding: 14px 16px;\n }\n\n .hexclave-devtool .sdt-ov-auth-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n }\n\n .hexclave-devtool .sdt-ov-method {\n display: flex;\n align-items: center;\n gap: 5px;\n padding: 4px 8px;\n border-radius: 6px;\n font-size: 11px;\n font-weight: 600;\n border: 1px solid var(--sdt-border-subtle);\n background: var(--sdt-bg);\n transition: all 0.15s ease;\n }\n\n .hexclave-devtool .sdt-ov-method-on {\n color: var(--sdt-text);\n background: var(--sdt-success-muted);\n border-color: rgba(34, 197, 94, 0.12);\n }\n\n .hexclave-devtool .sdt-ov-method-off {\n color: var(--sdt-text-tertiary);\n opacity: 0.5;\n border-style: dashed;\n }\n\n .hexclave-devtool .sdt-ov-method-oauth {\n text-transform: capitalize;\n }\n\n .hexclave-devtool .sdt-ov-method-warn {\n color: var(--sdt-warning);\n border-color: rgba(234, 179, 8, 0.2);\n }\n\n .hexclave-devtool .sdt-ov-skeleton-pill {\n width: 64px;\n height: 26px;\n border-radius: 6px;\n background: var(--sdt-bg-hover);\n border: 1px solid var(--sdt-border-subtle);\n animation: sdt-ov-shimmer 1.5s ease-in-out infinite;\n }\n\n @keyframes sdt-ov-shimmer {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 0.7; }\n }\n\n / --- Setup checklist card (only shown when something is incomplete) --- /\n .hexclave-devtool .sdt-ov-card-checks {\n padding: 14px 16px;\n border-color: rgba(234, 179, 8, 0.25);\n }\n\n .hexclave-devtool .sdt-ov-checks-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n margin-bottom: 8px;\n }\n\n .hexclave-devtool .sdt-ov-checks-badge {\n font-size: 10px;\n font-weight: 700;\n padding: 1px 6px;\n border-radius: 4px;\n }\n\n .hexclave-devtool .sdt-ov-checks-badge-ok {\n background: var(--sdt-success-muted);\n color: var(--sdt-success);\n }\n\n .hexclave-devtool .sdt-ov-checks-badge-warn {\n background: var(--sdt-warning-muted);\n color: var(--sdt-warning);\n }\n\n .hexclave-devtool .sdt-ov-checks-bar {\n height: 3px;\n border-radius: 2px;\n background: var(--sdt-border-subtle);\n margin-bottom: 10px;\n overflow: hidden;\n }\n\n .hexclave-devtool .sdt-ov-checks-bar-fill {\n height: 100%;\n border-radius: 2px;\n background: var(--sdt-warning);\n transition: width 0.4s ease;\n }\n\n .hexclave-devtool .sdt-ov-setup-row {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 0;\n font-size: 12px;\n border-bottom: 1px solid var(--sdt-border-subtle);\n }\n\n .hexclave-devtool .sdt-ov-setup-row:last-child { border-bottom: none; }\n\n .hexclave-devtool .sdt-ov-setup-dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-ov-setup-dot-ok { background: var(--sdt-success); }\n .hexclave-devtool .sdt-ov-setup-dot-warn { background: var(--sdt-warning); }\n\n .hexclave-devtool .sdt-ov-setup-label {\n color: var(--sdt-text);\n font-size: 12px;\n }\n\n .hexclave-devtool .sdt-ov-setup-hint {\n margin-left: auto;\n font-size: 11px;\n color: var(--sdt-text-tertiary);\n }\n\n / Status badges (shared across tabs) /\n .hexclave-devtool .sdt-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 500;\n }\n .hexclave-devtool .sdt-badge-success { background: var(--sdt-success-muted); color: var(--sdt-success); }\n .hexclave-devtool .sdt-badge-warning { background: var(--sdt-warning-muted); color: var(--sdt-warning); }\n .hexclave-devtool .sdt-badge-error { background: var(--sdt-error-muted); color: var(--sdt-error); }\n .hexclave-devtool .sdt-badge-info { background: var(--sdt-info-muted); color: var(--sdt-info); }\n\n / ===== Components / Pages tab ===== /\n\n .hexclave-devtool .sdt-pg-layout {\n display: flex;\n height: calc(100% + 32px);\n margin: -16px;\n }\n\n / --- Sidebar --- /\n .hexclave-devtool .sdt-pg-sidebar {\n width: 250px;\n flex-shrink: 0;\n border-right: 1px solid var(--sdt-border);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .hexclave-devtool .sdt-pg-sidebar-head {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 12px 14px 8px;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-pg-sidebar-title {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: var(--sdt-text-tertiary);\n }\n\n .hexclave-devtool .sdt-pg-sidebar-count {\n font-size: 10px;\n font-weight: 700;\n color: var(--sdt-text-tertiary);\n background: var(--sdt-bg-active);\n padding: 0 5px;\n border-radius: 6px;\n line-height: 18px;\n }\n\n .hexclave-devtool .sdt-pg-sidebar-warn {\n margin-left: auto;\n font-size: 10px;\n font-weight: 700;\n color: var(--sdt-warning);\n background: var(--sdt-warning-muted);\n padding: 0 6px;\n border-radius: 6px;\n line-height: 18px;\n }\n\n .hexclave-devtool .sdt-pg-list {\n flex: 1;\n overflow-y: auto;\n padding: 0 6px 6px;\n }\n\n / --- List item --- /\n .hexclave-devtool .sdt-pg-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 7px 10px;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.12s ease;\n font-size: 13px;\n color: var(--sdt-text);\n position: relative;\n }\n\n .hexclave-devtool .sdt-pg-item:hover {\n background: var(--sdt-bg-hover);\n }\n\n .hexclave-devtool .sdt-pg-item[data-selected=\"true\"] {\n background: var(--sdt-accent-muted);\n }\n\n .hexclave-devtool .sdt-pg-item[data-selected=\"true\"] .sdt-pg-item-label {\n color: var(--sdt-accent-hover);\n font-weight: 600;\n }\n\n .hexclave-devtool .sdt-pg-item-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n .hexclave-devtool .sdt-pg-item-dot-handler { background: var(--sdt-info); }\n .hexclave-devtool .sdt-pg-item-dot-custom { background: var(--sdt-success); }\n .hexclave-devtool .sdt-pg-item-dot-warn {\n background: var(--sdt-warning);\n box-shadow: 0 0 6px rgba(234, 179, 8, 0.4);\n }\n\n .hexclave-devtool .sdt-pg-item-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n / --- Badges --- /\n .hexclave-devtool .sdt-pg-badge {\n display: inline-flex;\n align-items: center;\n height: 20px;\n padding: 0 7px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.2px;\n flex-shrink: 0;\n line-height: 1;\n }\n\n .hexclave-devtool .sdt-pg-badge-outdated { background: var(--sdt-warning-muted); color: var(--sdt-warning); }\n\n / --- Empty state --- /\n .hexclave-devtool .sdt-pg-empty {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n text-align: center;\n }\n\n .hexclave-devtool .sdt-pg-empty-icon {\n color: var(--sdt-text-tertiary);\n opacity: 0.35;\n margin-bottom: 4px;\n }\n\n .hexclave-devtool .sdt-pg-empty-text {\n font-size: 14px;\n font-weight: 600;\n color: var(--sdt-text-secondary);\n }\n\n .hexclave-devtool .sdt-pg-empty-sub {\n font-size: 12px;\n color: var(--sdt-text-tertiary);\n }\n\n / --- Main panel --- /\n .hexclave-devtool .sdt-pg-main {\n flex: 1;\n overflow-y: auto;\n padding: 16px 18px;\n display: flex;\n flex-direction: column;\n }\n\n / --- Detail view --- /\n .hexclave-devtool .sdt-pg-detail {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n / Header /\n .hexclave-devtool .sdt-pg-header {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .hexclave-devtool .sdt-pg-header-top {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n }\n\n .hexclave-devtool .sdt-pg-title {\n font-size: 15px;\n font-weight: 700;\n margin: 0;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-pg-title-url {\n min-width: 0;\n max-width: 280px;\n color: var(--sdt-text-tertiary);\n font-family: var(--sdt-font-mono);\n font-size: 11px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-decoration: none;\n }\n\n .hexclave-devtool .sdt-pg-title-url:hover {\n color: var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-pg-subtitle {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n line-height: 1.4;\n }\n\n .hexclave-devtool .sdt-pg-code-inline {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 4px;\n }\n\n .hexclave-devtool .sdt-pg-code {\n flex: 1;\n min-width: 0;\n font-family: var(--sdt-font-mono);\n font-size: 12px;\n color: var(--sdt-accent);\n background: var(--sdt-bg-elevated);\n border-radius: 6px;\n padding: 6px 10px;\n border: 1px solid var(--sdt-border-subtle);\n }\n\n / --- Copy button --- /\n .hexclave-devtool .sdt-pg-copy-btn {\n height: 26px;\n padding: 0 10px;\n border-radius: 6px;\n border: 1px solid var(--sdt-border);\n background: var(--sdt-bg-active);\n color: var(--sdt-text-secondary);\n cursor: pointer;\n font-size: 11px;\n font-weight: 600;\n font-family: var(--sdt-font);\n transition: all 0.12s ease;\n flex-shrink: 0;\n white-space: nowrap;\n }\n\n .hexclave-devtool .sdt-pg-open-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n height: 32px;\n padding: 0 12px;\n font-size: 12px;\n }\n\n .hexclave-devtool .sdt-pg-open-btn svg {\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-pg-copy-btn:hover {\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n border-color: var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-pg-copy-btn-ok {\n border-color: rgba(34, 197, 94, 0.3);\n color: var(--sdt-success);\n background: var(--sdt-success-muted);\n }\n\n / --- Update banner --- /\n .hexclave-devtool .sdt-pg-update-banner {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 10px 14px;\n background: rgba(234, 179, 8, 0.08);\n border: 1px solid rgba(234, 179, 8, 0.3);\n border-radius: 10px;\n }\n\n .hexclave-devtool .sdt-pg-update-banner-icon {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: rgba(234, 179, 8, 0.2);\n color: var(--sdt-warning);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 800;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .hexclave-devtool .sdt-pg-update-banner-body {\n flex: 1;\n min-width: 0;\n }\n\n .hexclave-devtool .sdt-pg-update-banner-title {\n font-size: 13px;\n font-weight: 700;\n color: var(--sdt-warning);\n margin-bottom: 2px;\n }\n\n .hexclave-devtool .sdt-pg-update-banner-text {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n line-height: 1.5;\n }\n\n .hexclave-devtool .sdt-pg-update-banner-text strong {\n color: var(--sdt-text);\n font-weight: 600;\n }\n\n / --- Sections (changelog, prompt) --- /\n .hexclave-devtool .sdt-pg-section {\n border: 1px solid var(--sdt-border-subtle);\n border-radius: 10px;\n padding: 12px 14px;\n background: var(--sdt-bg-elevated);\n }\n\n .hexclave-devtool .sdt-pg-section-warn {\n border-color: rgba(234, 179, 8, 0.25);\n background: rgba(234, 179, 8, 0.03);\n }\n\n .hexclave-devtool .sdt-pg-section-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sdt-text-secondary);\n margin-bottom: 8px;\n }\n\n .hexclave-devtool .sdt-pg-section-warn .sdt-pg-section-label {\n color: var(--sdt-warning);\n }\n\n .hexclave-devtool .sdt-pg-section-footer {\n display: flex;\n margin-top: 8px;\n }\n\n / Changelog list /\n .hexclave-devtool .sdt-pg-changelog-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .hexclave-devtool .sdt-pg-changelog-item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 12px;\n color: var(--sdt-text);\n line-height: 1.5;\n }\n\n .hexclave-devtool .sdt-pg-changelog-bullet {\n flex-shrink: 0;\n font-size: 12px;\n line-height: 1.5;\n }\n\n / Pre block /\n .hexclave-devtool .sdt-pg-pre {\n font-family: var(--sdt-font-mono);\n font-size: 11px;\n line-height: 1.6;\n color: var(--sdt-text);\n background: var(--sdt-bg);\n border-radius: 6px;\n padding: 10px 12px;\n margin: 0;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--sdt-border-subtle);\n }\n\n .hexclave-devtool .sdt-preview-loading,\n .hexclave-devtool .sdt-preview-unavailable {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n line-height: 1.5;\n }\n\n .hexclave-devtool .sdt-preview-error {\n font-size: 12px;\n color: var(--sdt-error);\n line-height: 1.5;\n }\n\n .hexclave-devtool .sdt-preview-code {\n font-family: var(--sdt-font-mono);\n font-size: 11px;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-props-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n }\n\n .hexclave-devtool .sdt-props-table th {\n text-align: left;\n font-weight: 600;\n color: var(--sdt-text-tertiary);\n padding: 6px 8px;\n border-bottom: 1px solid var(--sdt-border);\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .hexclave-devtool .sdt-props-table td {\n padding: 6px 8px;\n border-bottom: 1px solid var(--sdt-border-subtle);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-props-table td:first-child {\n font-family: var(--sdt-font-mono);\n color: var(--sdt-accent-hover);\n }\n\n .hexclave-devtool .sdt-props-table td:last-child {\n font-family: var(--sdt-font-mono);\n color: var(--sdt-text-secondary);\n }\n\n / Iframe tabs /\n .hexclave-devtool .sdt-iframe-container {\n position: relative;\n flex: 1;\n min-height: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .hexclave-devtool .sdt-iframe-toolbar {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 1;\n flex-shrink: 0;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 8px;\n padding: 0;\n }\n\n .hexclave-devtool .sdt-panel-fullscreen .sdt-iframe-toolbar {\n top: 60px;\n right: 12px;\n }\n\n .hexclave-devtool .sdt-iframe-open-link {\n display: inline-flex;\n align-items: center;\n min-height: 28px;\n padding: 0 10px;\n background: var(--sdt-overlay-bg);\n border: 1px solid var(--sdt-border);\n border-radius: var(--sdt-radius-sm);\n color: var(--sdt-accent-hover);\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n text-decoration: none;\n }\n\n .hexclave-devtool .sdt-iframe-open-link:hover {\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-iframe-container iframe {\n flex: 1;\n min-height: 0;\n width: 100%;\n height: 100%;\n border: none;\n background: white;\n border-radius: 0;\n }\n\n .hexclave-devtool .sdt-iframe-loading {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--sdt-text-secondary);\n font-size: 13px;\n }\n\n .hexclave-devtool .sdt-iframe-error {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: var(--sdt-text-secondary);\n font-size: 13px;\n }\n\n .hexclave-devtool .sdt-iframe-error-btn {\n padding: 6px 16px;\n background: var(--sdt-accent);\n color: white;\n border: none;\n border-radius: var(--sdt-radius);\n cursor: pointer;\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n transition: background 0.15s ease;\n }\n\n .hexclave-devtool .sdt-iframe-error-btn:hover {\n background: var(--sdt-accent-hover);\n }\n\n / Shared content fade animation /\n .hexclave-devtool .sdt-tab-content-fade {\n animation: sdt-tab-fade-in 0.15s ease-out;\n }\n\n / Console tab /\n .hexclave-devtool .sdt-console-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n }\n\n .hexclave-devtool .sdt-console-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 12px;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-console-title {\n color: var(--sdt-text);\n font-size: 13px;\n font-weight: 600;\n }\n\n .hexclave-devtool .sdt-console-actions {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n justify-content: flex-end;\n }\n\n .hexclave-devtool .sdt-console-action-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n height: 28px;\n padding: 0 9px;\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border);\n border-radius: var(--sdt-radius-sm);\n color: var(--sdt-text-secondary);\n cursor: pointer;\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;\n white-space: nowrap;\n }\n\n .hexclave-devtool .sdt-console-action-btn:hover {\n color: var(--sdt-text);\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-border);\n }\n\n .hexclave-devtool .sdt-console-action-btn svg {\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-console-log-scroll {\n flex: 1;\n min-height: 0;\n overflow: auto;\n }\n\n .hexclave-devtool .sdt-console-tabs {\n position: relative;\n display: flex;\n flex: 1;\n gap: 2px;\n background: var(--sdt-bg-subtle);\n border-radius: var(--sdt-radius);\n padding: 2px;\n }\n\n .hexclave-devtool .sdt-console-tab-indicator {\n position: absolute;\n top: 2px;\n left: 0;\n background: var(--sdt-bg-active);\n border-radius: var(--sdt-radius-sm);\n transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n pointer-events: none;\n z-index: 0;\n }\n\n .hexclave-devtool .sdt-console-tab {\n position: relative;\n z-index: 1;\n flex: 1;\n padding: 6px 12px;\n background: transparent;\n border: none;\n border-radius: var(--sdt-radius-sm);\n cursor: pointer;\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n color: var(--sdt-text-secondary);\n transition: color 0.15s ease;\n text-align: center;\n }\n\n .hexclave-devtool .sdt-console-tab:hover {\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-console-tab[data-active=\"true\"] {\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-log-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .hexclave-devtool .sdt-log-load-hint {\n padding: 8px 10px;\n color: var(--sdt-text-tertiary);\n font-family: var(--sdt-font);\n font-size: 12px;\n text-align: center;\n }\n\n .hexclave-devtool .sdt-log-item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 8px 10px;\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius-sm);\n font-size: 12px;\n font-family: var(--sdt-font-mono);\n }\n\n .hexclave-devtool .sdt-log-time {\n color: var(--sdt-text-tertiary);\n flex-shrink: 0;\n font-size: 11px;\n }\n\n .hexclave-devtool .sdt-log-type {\n padding: 1px 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-log-message {\n flex: 1;\n color: var(--sdt-text);\n word-break: break-all;\n }\n\n .hexclave-devtool .sdt-log-method {\n padding: 1px 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-log-method-get {\n background: var(--sdt-info-muted);\n color: var(--sdt-info);\n }\n\n .hexclave-devtool .sdt-log-method-post {\n background: var(--sdt-success-muted);\n color: var(--sdt-success);\n }\n\n .hexclave-devtool .sdt-log-method-put, .hexclave-devtool .sdt-log-method-patch {\n background: var(--sdt-warning-muted);\n color: var(--sdt-warning);\n }\n\n .hexclave-devtool .sdt-log-method-delete {\n background: var(--sdt-error-muted);\n color: var(--sdt-error);\n }\n\n .hexclave-devtool .sdt-log-status {\n font-size: 11px;\n flex-shrink: 0;\n }\n\n .hexclave-devtool .sdt-log-status-ok {\n color: var(--sdt-success);\n }\n\n .hexclave-devtool .sdt-log-status-err {\n color: var(--sdt-error);\n }\n\n .hexclave-devtool .sdt-log-url {\n flex: 1;\n color: var(--sdt-text);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .hexclave-devtool .sdt-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n padding: 40px 20px;\n color: var(--sdt-text-tertiary);\n font-size: 13px;\n text-align: center;\n gap: 4px;\n }\n\n .hexclave-devtool .sdt-empty-state-icon {\n font-size: 24px;\n margin-bottom: 8px;\n opacity: 0.5;\n }\n\n / Config info table /\n .hexclave-devtool .sdt-config-table {\n width: 100%;\n border-collapse: collapse;\n }\n\n .hexclave-devtool .sdt-config-table td {\n padding: 8px 10px;\n border-bottom: 1px solid var(--sdt-border-subtle);\n font-size: 12px;\n }\n\n .hexclave-devtool .sdt-config-table td:first-child {\n color: var(--sdt-text-secondary);\n width: 160px;\n font-weight: 500;\n }\n\n .hexclave-devtool .sdt-config-table td:last-child {\n color: var(--sdt-text);\n font-family: var(--sdt-font-mono);\n word-break: break-all;\n }\n\n .hexclave-devtool .sdt-config-table td .sdt-config-link {\n font-family: inherit;\n color: var(--sdt-accent);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .hexclave-devtool .sdt-config-table td .sdt-config-link:hover {\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-config-muted {\n color: var(--sdt-text-tertiary);\n font-style: italic;\n }\n\n / Resize handle /\n .hexclave-devtool .sdt-resize-handle {\n position: absolute;\n top: 0;\n left: -4px;\n width: 8px;\n height: 100%;\n cursor: ew-resize;\n z-index: 10;\n }\n\n .hexclave-devtool .sdt-resize-handle::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 3px;\n width: 2px;\n height: 32px;\n transform: translateY(-50%);\n background: transparent;\n border-radius: 1px;\n transition: background 0.15s ease;\n }\n\n .hexclave-devtool .sdt-resize-handle:hover::after,\n .hexclave-devtool .sdt-resize-handle:active::after {\n background: var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-resize-handle-top {\n position: absolute;\n top: -4px;\n left: 0;\n width: 100%;\n height: 8px;\n cursor: ns-resize;\n z-index: 10;\n }\n\n .hexclave-devtool .sdt-resize-handle-top::after {\n content: '';\n position: absolute;\n left: 50%;\n top: 3px;\n height: 2px;\n width: 32px;\n transform: translateX(-50%);\n background: transparent;\n border-radius: 1px;\n transition: background 0.15s ease;\n }\n\n .hexclave-devtool .sdt-resize-handle-top:hover::after,\n .hexclave-devtool .sdt-resize-handle-top:active::after {\n background: var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-resize-handle-corner {\n position: absolute;\n top: -6px;\n left: -6px;\n width: 14px;\n height: 14px;\n cursor: nwse-resize;\n z-index: 11;\n }\n\n .hexclave-devtool .sdt-resize-handle-corner::after {\n content: '';\n position: absolute;\n bottom: 4px;\n right: 4px;\n width: 5px;\n height: 5px;\n background: transparent;\n border-radius: 50%;\n transition: background 0.15s ease;\n }\n\n .hexclave-devtool .sdt-resize-handle-corner:hover::after,\n .hexclave-devtool .sdt-resize-handle-corner:active::after {\n background: var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-no-components {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: var(--sdt-text-tertiary);\n font-size: 13px;\n text-align: center;\n padding: 20px;\n }\n\n / Support tab /\n .hexclave-devtool .sdt-support-tab {\n display: flex;\n flex-direction: column;\n height: calc(100% + 32px);\n margin: -16px;\n }\n\n .hexclave-devtool .sdt-support-feedback-pane {\n padding: 20px;\n height: 100%;\n overflow-y: auto;\n }\n\n / Form layout /\n .hexclave-devtool .sdt-support-form {\n display: flex;\n flex-direction: column;\n gap: 14px;\n }\n\n / Type cards /\n .hexclave-devtool .sdt-support-type-cards {\n display: flex;\n gap: 8px;\n }\n\n .hexclave-devtool .sdt-support-type-card {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 8px 10px;\n background: var(--sdt-bg);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius);\n cursor: pointer;\n font-family: var(--sdt-font);\n font-size: 11px;\n font-weight: 500;\n color: var(--sdt-text-secondary);\n transition: all 0.15s ease;\n }\n\n .hexclave-devtool .sdt-support-type-card svg {\n flex-shrink: 0;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n }\n\n .hexclave-devtool .sdt-support-type-card:hover {\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-border);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-support-type-card:hover svg {\n opacity: 1;\n }\n\n .hexclave-devtool .sdt-support-type-card-active {\n border-color: var(--sdt-accent);\n background: var(--sdt-accent-muted);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-support-type-card-active svg {\n opacity: 1;\n color: var(--sdt-accent);\n }\n\n / Field group /\n .hexclave-devtool .sdt-support-field {\n display: flex;\n flex-direction: column;\n gap: 5px;\n }\n\n .hexclave-devtool .sdt-support-label {\n font-size: 11px;\n font-weight: 600;\n color: var(--sdt-text-secondary);\n letter-spacing: 0.3px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .hexclave-devtool .sdt-support-optional {\n font-size: 10px;\n font-weight: 400;\n color: var(--sdt-text-tertiary);\n text-transform: none;\n letter-spacing: 0;\n }\n\n / Inputs /\n .hexclave-devtool .sdt-support-input,\n .hexclave-devtool .sdt-support-textarea {\n width: 100%;\n padding: 9px 12px;\n background: var(--sdt-bg);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius-sm);\n color: var(--sdt-text);\n font-family: var(--sdt-font);\n font-size: 13px;\n outline: none;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n }\n\n .hexclave-devtool .sdt-support-input::placeholder,\n .hexclave-devtool .sdt-support-textarea::placeholder {\n color: var(--sdt-text-tertiary);\n }\n\n .hexclave-devtool .sdt-support-input:focus,\n .hexclave-devtool .sdt-support-textarea:focus {\n border-color: var(--sdt-accent);\n box-shadow: 0 0 0 3px var(--sdt-accent-muted);\n }\n\n .hexclave-devtool .sdt-support-textarea {\n resize: vertical;\n min-height: 100px;\n line-height: 1.6;\n }\n\n / Submit button /\n .hexclave-devtool .sdt-support-submit {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 9px 20px;\n background: var(--sdt-accent);\n color: white;\n border: none;\n border-radius: var(--sdt-radius);\n cursor: pointer;\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.2px;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);\n }\n\n .hexclave-devtool .sdt-support-submit:hover:not(:disabled) {\n background: var(--sdt-accent-hover);\n box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);\n transform: translateY(-1px);\n }\n\n .hexclave-devtool .sdt-support-submit:active:not(:disabled) {\n transform: translateY(0);\n box-shadow: 0 1px 2px rgba(99, 102, 241, 0.2);\n }\n\n .hexclave-devtool .sdt-support-submit:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .hexclave-devtool .sdt-support-submit svg {\n flex-shrink: 0;\n }\n\n @keyframes sdt-spin {\n to { transform: rotate(360deg); }\n }\n\n .hexclave-devtool .sdt-support-spinner {\n animation: sdt-spin 1s linear infinite;\n }\n\n / Status screens (success / error) /\n .hexclave-devtool .sdt-support-status {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 32px 20px;\n border-radius: var(--sdt-radius-lg);\n text-align: center;\n gap: 6px;\n }\n\n .hexclave-devtool .sdt-support-status-success {\n background: linear-gradient(180deg, var(--sdt-success-muted), transparent 80%);\n border: 1px solid rgba(34, 197, 94, 0.15);\n }\n\n .hexclave-devtool .sdt-support-status-error {\n background: linear-gradient(180deg, var(--sdt-error-muted), transparent 80%);\n border: 1px solid rgba(239, 68, 68, 0.15);\n }\n\n .hexclave-devtool .sdt-support-status-icon {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 6px;\n }\n\n .hexclave-devtool .sdt-support-status-success .sdt-support-status-icon {\n background: rgba(34, 197, 94, 0.15);\n color: var(--sdt-success);\n box-shadow: 0 0 20px rgba(34, 197, 94, 0.1);\n }\n\n .hexclave-devtool .sdt-support-status-error .sdt-support-status-icon {\n background: rgba(239, 68, 68, 0.15);\n color: var(--sdt-error);\n box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);\n }\n\n .hexclave-devtool .sdt-support-status-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-support-status-msg {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n line-height: 1.5;\n max-width: 260px;\n }\n\n / Support channels /\n .hexclave-devtool .sdt-support-channels {\n display: flex;\n gap: 8px;\n }\n\n .hexclave-devtool .sdt-support-channel {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 8px 10px;\n background: var(--sdt-bg);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius);\n color: var(--sdt-text-secondary);\n text-decoration: none;\n font-size: 11px;\n font-weight: 500;\n transition: all 0.15s ease;\n }\n\n .hexclave-devtool .sdt-support-channel:hover {\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-border);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-support-channel svg {\n flex-shrink: 0;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n }\n\n .hexclave-devtool .sdt-support-channel:hover svg {\n opacity: 1;\n }\n\n / Light theme + data-stack-theme overrides come from the shared in-page-ui\n base styles (in-page-ui/base-styles.ts). /\n\n / Export dialog — positioned inside the dev tool panel /\n .hexclave-devtool .sdt-share-overlay {\n position: absolute;\n inset: 0;\n z-index: 20;\n background: rgba(0, 0, 0, 0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n animation: sdt-tab-fade-in 0.15s ease-out;\n border-radius: var(--sdt-radius-lg);\n }\n\n .hexclave-devtool .sdt-share-dialog {\n width: 380px;\n max-width: calc(100% - 32px);\n background: var(--sdt-bg);\n border: 1px solid var(--sdt-border);\n border-radius: var(--sdt-radius-lg);\n box-shadow: var(--sdt-shadow);\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n .hexclave-devtool .sdt-share-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .hexclave-devtool .sdt-share-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-share-status {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 20px;\n color: var(--sdt-text-secondary);\n font-size: 13px;\n }\n\n .hexclave-devtool .sdt-share-url-row {\n display: flex;\n gap: 6px;\n align-items: center;\n }\n\n .hexclave-devtool .sdt-share-url-row .sdt-support-input {\n flex: 1;\n font-family: var(--sdt-font-mono);\n font-size: 12px;\n }\n\n .hexclave-devtool .sdt-share-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n flex-shrink: 0;\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius-sm);\n color: var(--sdt-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .hexclave-devtool .sdt-share-copy-btn:hover {\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-share-actions {\n display: flex;\n gap: 8px;\n }\n\n .hexclave-devtool .sdt-share-action-btn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 12px;\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius);\n color: var(--sdt-text-secondary);\n text-decoration: none;\n font-family: var(--sdt-font);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .hexclave-devtool .sdt-share-action-btn:hover {\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-border);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-share-action-btn svg {\n flex-shrink: 0;\n opacity: 0.7;\n }\n\n .hexclave-devtool .sdt-share-action-btn:hover svg {\n opacity: 1;\n }\n\n .hexclave-devtool .sdt-share-action-btn-accent {\n background: var(--sdt-accent);\n border-color: var(--sdt-accent);\n color: white;\n }\n\n .hexclave-devtool .sdt-share-action-btn-accent:hover {\n background: var(--sdt-accent-hover);\n border-color: var(--sdt-accent-hover);\n color: white;\n }\n\n .hexclave-devtool .sdt-share-action-btn-accent svg {\n opacity: 1;\n }\n\n / --- AI Chat tab --- /\n\n .hexclave-devtool .sdt-ai-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n }\n\n .hexclave-devtool .sdt-ai-messages {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 16px;\n scroll-behavior: smooth;\n }\n\n .hexclave-devtool .sdt-ai-message-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n / --- Empty state --- /\n\n .hexclave-devtool .sdt-ai-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n gap: 12px;\n padding: 24px;\n text-align: center;\n }\n\n .hexclave-devtool .sdt-ai-empty-icon {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--sdt-accent-muted);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--sdt-accent);\n margin-bottom: 4px;\n }\n\n .hexclave-devtool .sdt-ai-empty-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-ai-empty-desc {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n max-width: 320px;\n line-height: 1.5;\n }\n\n .hexclave-devtool .sdt-ai-suggestions {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-top: 8px;\n width: 100%;\n max-width: 340px;\n }\n\n .hexclave-devtool .sdt-ai-suggestion {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n border-radius: var(--sdt-radius);\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n color: var(--sdt-text-secondary);\n font-size: 12px;\n cursor: pointer;\n text-align: left;\n transition: all 0.15s ease;\n font-family: var(--sdt-font);\n line-height: 1.4;\n }\n\n .hexclave-devtool .sdt-ai-suggestion:hover {\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-border);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-ai-suggestion-icon {\n font-size: 14px;\n flex-shrink: 0;\n }\n\n / --- Messages --- /\n\n .hexclave-devtool .sdt-ai-msg {\n display: flex;\n gap: 10px;\n align-items: flex-start;\n }\n\n .hexclave-devtool .sdt-ai-msg-user {\n justify-content: flex-end;\n }\n\n .hexclave-devtool .sdt-ai-msg-assistant {\n justify-content: flex-start;\n }\n\n .hexclave-devtool .sdt-ai-avatar {\n width: 26px;\n height: 26px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n .hexclave-devtool .sdt-ai-avatar-user {\n background: var(--sdt-info-muted);\n color: var(--sdt-info);\n order: 2;\n }\n\n .hexclave-devtool .sdt-ai-avatar-assistant {\n background: var(--sdt-accent-muted);\n color: var(--sdt-accent);\n }\n\n .hexclave-devtool .sdt-ai-bubble {\n min-width: 0;\n max-width: 85%;\n border-radius: var(--sdt-radius-lg);\n padding: 10px 14px;\n }\n\n .hexclave-devtool .sdt-ai-bubble-user {\n background: var(--sdt-info-muted);\n border: 1px solid rgba(59, 130, 246, 0.1);\n }\n\n .hexclave-devtool .sdt-ai-bubble-user p {\n font-size: 13px;\n line-height: 1.55;\n color: var(--sdt-text);\n margin: 0;\n word-break: break-word;\n }\n\n .hexclave-devtool .sdt-ai-bubble-assistant {\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n }\n\n / --- Thinking dots --- /\n\n .hexclave-devtool .sdt-ai-thinking {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 0;\n }\n\n .hexclave-devtool .sdt-ai-thinking-dot {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--sdt-accent);\n opacity: 0.5;\n animation: sdt-ai-pulse 1.2s ease-in-out infinite;\n }\n\n .hexclave-devtool .sdt-ai-thinking-dot:nth-child(2) { animation-delay: 0.15s; }\n .hexclave-devtool .sdt-ai-thinking-dot:nth-child(3) { animation-delay: 0.3s; }\n\n @keyframes sdt-ai-pulse {\n 0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }\n 40% { opacity: 1; transform: scale(1.1); }\n }\n\n .hexclave-devtool .sdt-ai-streaming-indicator {\n display: flex;\n align-items: center;\n gap: 3px;\n margin-top: 6px;\n }\n\n / --- Markdown content inside assistant bubble --- /\n\n .hexclave-devtool .sdt-ai-paragraph {\n font-size: 13px;\n line-height: 1.6;\n color: var(--sdt-text);\n margin: 0 0 10px;\n word-break: break-word;\n }\n\n .hexclave-devtool .sdt-ai-paragraph:last-child { margin-bottom: 0; }\n\n .hexclave-devtool .sdt-ai-bold {\n font-weight: 600;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-ai-inline-code {\n display: inline;\n padding: 1.5px 5px;\n border-radius: 4px;\n font-family: var(--sdt-font-mono);\n font-size: 11.5px;\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n border: 1px solid var(--sdt-border-subtle);\n }\n\n .hexclave-devtool .sdt-ai-link {\n color: var(--sdt-info);\n text-decoration: none;\n transition: color 0.1s;\n }\n\n .hexclave-devtool .sdt-ai-link:hover {\n color: var(--sdt-accent-hover);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .hexclave-devtool .sdt-ai-heading {\n font-weight: 600;\n color: var(--sdt-text);\n margin: 12px 0 6px;\n line-height: 1.35;\n }\n\n .hexclave-devtool .sdt-ai-heading:first-child { margin-top: 0; }\n\n .hexclave-devtool .sdt-ai-bubble-assistant h1.sdt-ai-heading { font-size: 15px; }\n .hexclave-devtool .sdt-ai-bubble-assistant h2.sdt-ai-heading { font-size: 13.5px; }\n .hexclave-devtool .sdt-ai-bubble-assistant h3.sdt-ai-heading { font-size: 13px; }\n\n .hexclave-devtool .sdt-ai-list {\n font-size: 13px;\n line-height: 1.6;\n color: var(--sdt-text);\n margin: 0 0 10px;\n padding-left: 20px;\n }\n\n .hexclave-devtool .sdt-ai-list:last-child { margin-bottom: 0; }\n\n .hexclave-devtool .sdt-ai-list li {\n margin-bottom: 3px;\n padding-left: 2px;\n }\n\n .hexclave-devtool .sdt-ai-list li::marker {\n color: var(--sdt-text-tertiary);\n }\n\n .hexclave-devtool .sdt-ai-list-ordered {\n list-style-type: decimal;\n }\n\n .hexclave-devtool .sdt-ai-tools {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin: 6px 0;\n }\n\n .hexclave-devtool .sdt-ai-part-text {\n margin: 6px 0;\n }\n\n .hexclave-devtool .sdt-ai-tool-card {\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius);\n background: var(--sdt-bg-subtle);\n overflow: hidden;\n }\n\n .hexclave-devtool .sdt-ai-tool-header {\n width: 100%;\n border: none;\n background: transparent;\n color: inherit;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n cursor: pointer;\n text-align: left;\n font-family: var(--sdt-font);\n }\n\n .hexclave-devtool .sdt-ai-tool-header:hover {\n background: var(--sdt-bg-hover);\n }\n\n .hexclave-devtool .sdt-ai-tool-name {\n font-size: 12px;\n font-weight: 600;\n color: var(--sdt-text);\n flex: 1;\n }\n\n .hexclave-devtool .sdt-ai-tool-status {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n font-weight: 600;\n }\n\n .hexclave-devtool .sdt-ai-tool-status-running { color: var(--sdt-warning); }\n .hexclave-devtool .sdt-ai-tool-status-success { color: var(--sdt-success); }\n .hexclave-devtool .sdt-ai-tool-status-error { color: var(--sdt-error); }\n\n .hexclave-devtool .sdt-ai-tool-chevron {\n color: var(--sdt-text-tertiary);\n font-size: 10px;\n transition: transform 0.15s ease;\n }\n\n .hexclave-devtool .sdt-ai-tool-chevron-open {\n transform: rotate(180deg);\n }\n\n .hexclave-devtool .sdt-ai-tool-body {\n border-top: 1px solid var(--sdt-border-subtle);\n padding: 8px 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .hexclave-devtool .sdt-ai-tool-label {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--sdt-text-tertiary);\n font-weight: 600;\n }\n\n .hexclave-devtool .sdt-ai-tool-pre {\n margin: 0;\n padding: 8px;\n border: 1px solid var(--sdt-border-subtle);\n border-radius: var(--sdt-radius-sm);\n background: var(--sdt-bg);\n font-family: var(--sdt-font-mono);\n font-size: 11px;\n line-height: 1.5;\n color: var(--sdt-text-secondary);\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .hexclave-devtool .sdt-ai-tool-running {\n font-size: 11px;\n color: var(--sdt-text-secondary);\n }\n\n .hexclave-devtool .sdt-ai-blockquote {\n border-left: 3px solid var(--sdt-accent);\n padding-left: 12px;\n margin: 8px 0;\n font-size: 13px;\n color: var(--sdt-text-secondary);\n font-style: italic;\n }\n\n .hexclave-devtool .sdt-ai-hr {\n border: none;\n border-top: 1px solid var(--sdt-border-subtle);\n margin: 12px 0;\n }\n\n / --- Code blocks --- /\n\n .hexclave-devtool .sdt-ai-code-block {\n border-radius: var(--sdt-radius);\n overflow: hidden;\n margin: 8px 0;\n border: 1px solid var(--sdt-border-subtle);\n background: var(--sdt-bg-subtle);\n }\n\n .hexclave-devtool .sdt-ai-code-block:last-child { margin-bottom: 0; }\n\n .hexclave-devtool .sdt-ai-code-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 5px 10px;\n border-bottom: 1px solid var(--sdt-border-subtle);\n background: var(--sdt-bg);\n }\n\n .hexclave-devtool .sdt-ai-code-lang {\n font-size: 9px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--sdt-text-tertiary);\n font-family: var(--sdt-font);\n }\n\n .hexclave-devtool .sdt-ai-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: var(--sdt-radius-sm);\n border: none;\n background: transparent;\n color: var(--sdt-text-tertiary);\n cursor: pointer;\n font-size: 12px;\n font-family: var(--sdt-font);\n transition: all 0.15s ease;\n }\n\n .hexclave-devtool .sdt-ai-copy-btn:hover {\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-ai-copy-btn-copied {\n color: var(--sdt-success) !important;\n }\n\n .hexclave-devtool .sdt-ai-code-pre {\n margin: 0;\n padding: 10px 12px;\n overflow-x: auto;\n font-family: var(--sdt-font-mono);\n font-size: 11.5px;\n line-height: 1.6;\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-ai-code-pre code {\n font-family: inherit;\n background: none;\n border: none;\n padding: 0;\n }\n\n / --- Error --- /\n\n .hexclave-devtool .sdt-ai-error {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 10px 14px;\n margin: 8px 16px;\n border-radius: var(--sdt-radius);\n background: var(--sdt-error-muted);\n border: 1px solid rgba(239, 68, 68, 0.2);\n font-size: 12px;\n color: var(--sdt-error);\n line-height: 1.4;\n }\n\n / --- Input area --- /\n\n .hexclave-devtool .sdt-ai-input-area {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border-top: 1px solid var(--sdt-border-subtle);\n background: var(--sdt-bg);\n }\n\n .hexclave-devtool .sdt-ai-new-chat {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: var(--sdt-radius);\n border: 1px solid var(--sdt-border-subtle);\n background: var(--sdt-bg-elevated);\n color: var(--sdt-text-secondary);\n cursor: pointer;\n flex-shrink: 0;\n transition: all 0.15s ease;\n font-family: var(--sdt-font);\n }\n\n .hexclave-devtool .sdt-ai-new-chat:hover {\n background: var(--sdt-bg-hover);\n border-color: var(--sdt-border);\n color: var(--sdt-text);\n }\n\n .hexclave-devtool .sdt-ai-input-wrapper {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 6px;\n border-radius: var(--sdt-radius);\n background: var(--sdt-bg-elevated);\n border: 1px solid var(--sdt-border-subtle);\n padding: 0 4px 0 12px;\n transition: border-color 0.15s ease;\n }\n\n .hexclave-devtool .sdt-ai-input-wrapper:focus-within {\n border-color: var(--sdt-accent);\n box-shadow: 0 0 0 2px var(--sdt-accent-muted);\n }\n\n .hexclave-devtool .sdt-ai-input {\n flex: 1;\n background: transparent;\n border: none;\n outline: none;\n color: var(--sdt-text);\n font-size: 13px;\n font-family: var(--sdt-font);\n padding: 8px 0;\n min-width: 0;\n }\n\n .hexclave-devtool .sdt-ai-input::placeholder {\n color: var(--sdt-text-tertiary);\n }\n\n .hexclave-devtool .sdt-ai-input:disabled {\n opacity: 0.5;\n }\n\n .hexclave-devtool .sdt-ai-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border-radius: 6px;\n border: none;\n background: transparent;\n color: var(--sdt-text-tertiary);\n cursor: not-allowed;\n flex-shrink: 0;\n transition: all 0.15s ease;\n font-family: var(--sdt-font);\n }\n\n .hexclave-devtool .sdt-ai-send-btn-active {\n background: var(--sdt-accent);\n color: white;\n cursor: pointer;\n }\n\n .hexclave-devtool .sdt-ai-send-btn-active:hover {\n background: var(--sdt-accent-hover);\n }\n\n .hexclave-devtool .sdt-ai-stop-btn,\n .hexclave-devtool .sdt-ai-stop-btn:hover {\n background: var(--sdt-error);\n color: white;\n }\n\n / Accessible focus indicator for keyboard navigation /\n .hexclave-devtool .sdt-tab:focus-visible {\n outline: 2px solid var(--sdt-accent);\n outline-offset: -2px;\n border-radius: var(--sdt-radius);\n }\n\n / Reduced motion: disable animations for users who prefer it */\n @media (prefers-reduced-motion: reduce) {\n .hexclave-devtool .sdt-panel-inner,\n .hexclave-devtool .sdt-panel-exiting,\n .hexclave-devtool .sdt-tab-content,\n .hexclave-devtool .sdt-ov-pulse-dot,\n .hexclave-devtool .sdt-ov-skeleton-pill,\n .hexclave-devtool .sdt-support-spinner,\n .hexclave-devtool .sdt-ai-thinking-dot {\n animation: none !important;\n }\n\n .hexclave-devtool .sdt-tab-indicator,\n .hexclave-devtool .sdt-tab {\n transition: none !important;\n }\n }\n\n`;\n"],"mappings":";;AAWA,MAAa,aAAa,mBAAmB,mBAAmB,IAAI"}

package/dist/esm/dev-tool/dev-tool-trigger-position.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dev-tool-trigger-position.d.ts","names":[],"sources":["../../../src/dev-tool/dev-tool-trigger-position.ts"],"mappings":";KAIY,aAAA;AAAA,KAEA,gBAAA;EACV,MAAA,EAAQ,~~aAAA~~;AAAA;AAAA,~~KAGE~~,eAAA;EACV,IAAA;EACA,~~GAAA~~;AAAA;AAAA,~~KAGU~~,WAAA;EACV,KAAA;EACA,~~MAAA~~;AAAA;AAAA,~~KAGU~~,eAAA;EACV,KAAA;EACA,~~MAAA~~;AAAA;AAAA,~~cAGW~~,mBAAA~~;;;;;iBAsBG~~,oBAAA,CACd,QAAA,EAAU,eAAA,EACV,WAAA,EAAa,WAAA,EACb,QAAA,EAAU,eAAA,GACT,eAAA~~;;;;;iBAaa~~,sBAAA,CACd,SAAA,EAAW,gBAAA,EACX,WAAA,EAAa,WAAA,EACb,QAAA,EAAU,eAAA,GACT,eAAA~~;;;;;iBA0Ba~~,0BAAA,CACd,QAAA,EAAU,eAAA,EACV,WAAA,EAAa,WAAA,EACb,QAAA,EAAU,eAAA,GACT,gBAAA"}
1	+ {"version":3,"file":"dev-tool-trigger-position.d.ts","names":[],"sources":["../../../src/dev-tool/dev-tool-trigger-position.ts"],"mappings":";KAIY,aAAA;AAAA,KAEA,gBAAA;EACV,MAAA,EAAQ,aAAa;AAAA;AAAA,KAGX,eAAA;EACV,IAAA;EACA,GAAG;AAAA;AAAA,KAGO,WAAA;EACV,KAAA;EACA,MAAM;AAAA;AAAA,KAGI,eAAA;EACV,KAAA;EACA,MAAM;AAAA;AAAA,cAGK,mBAAA;;;;AARL;iBA8BQ,oBAAA,CACd,QAAA,EAAU,eAAA,EACV,WAAA,EAAa,WAAA,EACb,QAAA,EAAU,eAAA,GACT,eAAA;;;;AA7BK;iBA0CQ,sBAAA,CACd,SAAA,EAAW,gBAAA,EACX,WAAA,EAAa,WAAA,EACb,QAAA,EAAU,eAAA,GACT,eAAA;;;;AA3C6B;iBAqEhB,0BAAA,CACd,QAAA,EAAU,eAAA,EACV,WAAA,EAAa,WAAA,EACb,QAAA,EAAU,eAAA,GACT,gBAAA"}

package/dist/esm/dev-tool/dev-tool-trigger-position.js CHANGED Viewed

@@ -3,13 +3,13 @@ const TRIGGER_EDGE_MARGIN = 16;
 function getSnapBounds(triggerSize, viewport) {
 	const maxLeft = Math.max(0, viewport.width - triggerSize.width);
 	const maxTop = Math.max(0, viewport.height - triggerSize.height);
-	const minLeft = Math.min(TRIGGER_EDGE_MARGIN, maxLeft);
-	const minTop = Math.min(TRIGGER_EDGE_MARGIN, maxTop);
+	const minLeft = Math.min(16, maxLeft);
+	const minTop = Math.min(16, maxTop);
 	return {
 		minLeft,
-		maxLeft: Math.max(minLeft, maxLeft - TRIGGER_EDGE_MARGIN),
+		maxLeft: Math.max(minLeft, maxLeft - 16),
 		minTop,
-		maxTop: Math.max(minTop, maxTop - TRIGGER_EDGE_MARGIN)
+		maxTop: Math.max(minTop, maxTop - 16)
 	};
 }
 /**
@@ -59,7 +59,7 @@ function getSnappedTriggerPlacement(position, triggerSize, viewport) {
 	const cx = position.left + triggerSize.width / 2;
 	return { corner: position.top + triggerSize.height / 2 < viewport.height / 2 ? cx < viewport.width / 2 ? "top-left" : "top-right" : cx < viewport.width / 2 ? "bottom-left" : "bottom-right" };
 }
 //#endregion
 export { TRIGGER_EDGE_MARGIN, clampTriggerPosition, getSnappedTriggerPlacement, resolveTriggerPosition };
 //# sourceMappingURL=dev-tool-trigger-position.js.map

package/dist/esm/dev-tool/dev-tool-trigger-position.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dev-tool-trigger-position.js","names":[],"sources":["../../../src/dev-tool/dev-tool-trigger-position.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nexport type TriggerCorner = 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right';\n\nexport type TriggerPlacement = {\n corner: TriggerCorner;\n};\n\nexport type TriggerPosition = {\n left: number;\n top: number;\n};\n\nexport type TriggerSize = {\n width: number;\n height: number;\n};\n\nexport type TriggerViewport = {\n width: number;\n height: number;\n};\n\nexport const TRIGGER_EDGE_MARGIN = 16;\n\nfunction getSnapBounds(\n triggerSize: TriggerSize,\n viewport: TriggerViewport,\n) {\n const maxLeft = Math.max(0, viewport.width - triggerSize.width);\n const maxTop = Math.max(0, viewport.height - triggerSize.height);\n const minLeft = Math.min(TRIGGER_EDGE_MARGIN, maxLeft);\n const minTop = Math.min(TRIGGER_EDGE_MARGIN, maxTop);\n return {\n minLeft,\n maxLeft: Math.max(minLeft, maxLeft - TRIGGER_EDGE_MARGIN),\n minTop,\n maxTop: Math.max(minTop, maxTop - TRIGGER_EDGE_MARGIN),\n };\n}\n\n/*\n Clamps a position so the trigger stays fully within the viewport.\n * Used during drag to prevent the pill from leaving the screen.\n /\nexport function clampTriggerPosition(\n position: TriggerPosition,\n triggerSize: TriggerSize,\n viewport: TriggerViewport,\n): TriggerPosition {\n const maxLeft = Math.max(0, viewport.width - triggerSize.width);\n const maxTop = Math.max(0, viewport.height - triggerSize.height);\n return {\n left: Math.max(0, Math.min(position.left, maxLeft)),\n top: Math.max(0, Math.min(position.top, maxTop)),\n };\n}\n\n/\n Returns the exact pixel position for a corner placement.\n * The trigger is always `TRIGGER_EDGE_MARGIN` px from both adjacent edges.\n /\nexport function resolveTriggerPosition(\n placement: TriggerPlacement,\n triggerSize: TriggerSize,\n viewport: TriggerViewport,\n): TriggerPosition {\n const bounds = getSnapBounds(triggerSize, viewport);\n const position = (() => {\n switch (placement.corner) {\n case 'top-left': {\n return { left: bounds.minLeft, top: bounds.minTop };\n }\n case 'top-right': {\n return { left: bounds.maxLeft, top: bounds.minTop };\n }\n case 'bottom-left': {\n return { left: bounds.minLeft, top: bounds.maxTop };\n }\n case 'bottom-right': {\n return { left: bounds.maxLeft, top: bounds.maxTop };\n }\n }\n })();\n\n return clampTriggerPosition(position, triggerSize, viewport);\n}\n\n/\n Snaps a free position to the nearest corner by checking which viewport\n * quadrant the trigger center falls in.\n */\nexport function getSnappedTriggerPlacement(\n position: TriggerPosition,\n triggerSize: TriggerSize,\n viewport: TriggerViewport,\n): TriggerPlacement {\n const cx = position.left + triggerSize.width / 2;\n const cy = position.top + triggerSize.height / 2;\n\n const corner: TriggerCorner =\n cy < viewport.height / 2\n ? cx < viewport.width / 2 ? 'top-left' : 'top-right'\n : cx < viewport.width / 2 ? 'bottom-left' : 'bottom-right';\n\n return { corner };\n}\n"],"mappings":";AAyBA,MAAa,sBAAsB;AAEnC,SAAS,cACP,aACA,UACA;CACA,MAAM,UAAU,KAAK,IAAI,GAAG,SAAS,QAAQ,YAAY,~~MAAM~~;~~CAC/D~~,MAAM,SAAS,KAAK,IAAI,GAAG,SAAS,SAAS,YAAY,~~OAAO~~;~~CAChE~~,MAAM,UAAU,KAAK,~~IAAI~~,~~qBAAqB~~,~~QAAQ~~;~~CACtD~~,MAAM,SAAS,KAAK,~~IAAI~~,~~qBAAqB~~,~~OAAO~~;~~AACpD~~,~~QAAO~~;EACL;EACA,SAAS,KAAK,IAAI,SAAS,~~UAAU~~,~~oBAAoB~~;~~EACzD~~;EACA,QAAQ,KAAK,IAAI,QAAQ,~~SAAS~~,~~oBAAoB~~;~~EACvD;;;;;;AAOH~~,SAAgB,qBACd,UACA,aACA,UACiB;CACjB,MAAM,UAAU,KAAK,IAAI,GAAG,SAAS,QAAQ,YAAY,~~MAAM~~;~~CAC/D~~,MAAM,SAAS,KAAK,IAAI,GAAG,SAAS,SAAS,YAAY,~~OAAO~~;~~AAChE~~,~~QAAO~~;EACL,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,MAAM,~~QAAQ~~,CAAC;~~EACnD~~,KAAK,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,KAAK,~~OAAO~~,CAAC;~~EACjD;;;;;;AAOH~~,SAAgB,uBACd,WACA,aACA,UACiB;CACjB,MAAM,SAAS,cAAc,aAAa,~~SAAS~~;~~AAkBnD~~,~~QAAO~~,4BAjBiB;~~AACtB~~,~~UAAQ~~,UAAU,QAAlB;GACE,KAAK,~~WACH~~,~~QAAO~~;IAAE,MAAM,OAAO;IAAS,KAAK,OAAO;~~IAAQ~~;~~GAErD~~,KAAK,~~YACH~~,~~QAAO~~;IAAE,MAAM,OAAO;IAAS,KAAK,OAAO;~~IAAQ~~;~~GAErD~~,KAAK,~~cACH~~,~~QAAO~~;IAAE,MAAM,OAAO;IAAS,KAAK,OAAO;~~IAAQ~~;~~GAErD~~,KAAK,~~eACH~~,~~QAAO~~;IAAE,MAAM,OAAO;IAAS,KAAK,OAAO;~~IAAQ;;KAGrD~~,~~EAEkC~~,aAAa,~~SAAS;;;;;;AAO9D~~,SAAgB,2BACd,UACA,aACA,UACkB;CAClB,MAAM,KAAK,SAAS,OAAO,YAAY,QAAQ;~~AAQ~~/C,~~QAAO~~,EAAE,QAPE,SAAS,MAAM,YAAY,SAAS,IAGxC,SAAS,SAAS,IACnB,KAAK,SAAS,QAAQ,IAAI,aAAa,cACvC,KAAK,SAAS,QAAQ,IAAI,gBAAgB,~~gBAE/B~~"}
1	+ {"version":3,"file":"dev-tool-trigger-position.js","names":[],"sources":["../../../src/dev-tool/dev-tool-trigger-position.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nexport type TriggerCorner = 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right';\n\nexport type TriggerPlacement = {\n corner: TriggerCorner;\n};\n\nexport type TriggerPosition = {\n left: number;\n top: number;\n};\n\nexport type TriggerSize = {\n width: number;\n height: number;\n};\n\nexport type TriggerViewport = {\n width: number;\n height: number;\n};\n\nexport const TRIGGER_EDGE_MARGIN = 16;\n\nfunction getSnapBounds(\n triggerSize: TriggerSize,\n viewport: TriggerViewport,\n) {\n const maxLeft = Math.max(0, viewport.width - triggerSize.width);\n const maxTop = Math.max(0, viewport.height - triggerSize.height);\n const minLeft = Math.min(TRIGGER_EDGE_MARGIN, maxLeft);\n const minTop = Math.min(TRIGGER_EDGE_MARGIN, maxTop);\n return {\n minLeft,\n maxLeft: Math.max(minLeft, maxLeft - TRIGGER_EDGE_MARGIN),\n minTop,\n maxTop: Math.max(minTop, maxTop - TRIGGER_EDGE_MARGIN),\n };\n}\n\n/*\n Clamps a position so the trigger stays fully within the viewport.\n * Used during drag to prevent the pill from leaving the screen.\n /\nexport function clampTriggerPosition(\n position: TriggerPosition,\n triggerSize: TriggerSize,\n viewport: TriggerViewport,\n): TriggerPosition {\n const maxLeft = Math.max(0, viewport.width - triggerSize.width);\n const maxTop = Math.max(0, viewport.height - triggerSize.height);\n return {\n left: Math.max(0, Math.min(position.left, maxLeft)),\n top: Math.max(0, Math.min(position.top, maxTop)),\n };\n}\n\n/\n Returns the exact pixel position for a corner placement.\n * The trigger is always `TRIGGER_EDGE_MARGIN` px from both adjacent edges.\n /\nexport function resolveTriggerPosition(\n placement: TriggerPlacement,\n triggerSize: TriggerSize,\n viewport: TriggerViewport,\n): TriggerPosition {\n const bounds = getSnapBounds(triggerSize, viewport);\n const position = (() => {\n switch (placement.corner) {\n case 'top-left': {\n return { left: bounds.minLeft, top: bounds.minTop };\n }\n case 'top-right': {\n return { left: bounds.maxLeft, top: bounds.minTop };\n }\n case 'bottom-left': {\n return { left: bounds.minLeft, top: bounds.maxTop };\n }\n case 'bottom-right': {\n return { left: bounds.maxLeft, top: bounds.maxTop };\n }\n }\n })();\n\n return clampTriggerPosition(position, triggerSize, viewport);\n}\n\n/\n Snaps a free position to the nearest corner by checking which viewport\n * quadrant the trigger center falls in.\n */\nexport function getSnappedTriggerPlacement(\n position: TriggerPosition,\n triggerSize: TriggerSize,\n viewport: TriggerViewport,\n): TriggerPlacement {\n const cx = position.left + triggerSize.width / 2;\n const cy = position.top + triggerSize.height / 2;\n\n const corner: TriggerCorner =\n cy < viewport.height / 2\n ? cx < viewport.width / 2 ? 'top-left' : 'top-right'\n : cx < viewport.width / 2 ? 'bottom-left' : 'bottom-right';\n\n return { corner };\n}\n"],"mappings":";AAyBA,MAAa,sBAAsB;AAEnC,SAAS,cACP,aACA,UACA;CACA,MAAM,UAAU,KAAK,IAAI,GAAG,SAAS,QAAQ,YAAY,KAAK;CAC9D,MAAM,SAAS,KAAK,IAAI,GAAG,SAAS,SAAS,YAAY,MAAM;CAC/D,MAAM,UAAU,KAAK,IAAA,IAAyB,OAAO;CACrD,MAAM,SAAS,KAAK,IAAA,IAAyB,MAAM;CACnD,OAAO;EACL;EACA,SAAS,KAAK,IAAI,SAAS,UAAA,EAA6B;EACxD;EACA,QAAQ,KAAK,IAAI,QAAQ,SAAA,EAA4B;CACvD;AACF;;;;;AAMA,SAAgB,qBACd,UACA,aACA,UACiB;CACjB,MAAM,UAAU,KAAK,IAAI,GAAG,SAAS,QAAQ,YAAY,KAAK;CAC9D,MAAM,SAAS,KAAK,IAAI,GAAG,SAAS,SAAS,YAAY,MAAM;CAC/D,OAAO;EACL,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,MAAM,OAAO,CAAC;EAClD,KAAK,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,KAAK,MAAM,CAAC;CACjD;AACF;;;;;AAMA,SAAgB,uBACd,WACA,aACA,UACiB;CACjB,MAAM,SAAS,cAAc,aAAa,QAAQ;CAkBlD,OAAO,4BAjBiB;EACtB,QAAQ,UAAU,QAAlB;GACE,KAAK,YACH,OAAO;IAAE,MAAM,OAAO;IAAS,KAAK,OAAO;GAAO;GAEpD,KAAK,aACH,OAAO;IAAE,MAAM,OAAO;IAAS,KAAK,OAAO;GAAO;GAEpD,KAAK,eACH,OAAO;IAAE,MAAM,OAAO;IAAS,KAAK,OAAO;GAAO;GAEpD,KAAK,gBACH,OAAO;IAAE,MAAM,OAAO;IAAS,KAAK,OAAO;GAAO;EAEtD;CACF,EAAA,CAEmC,GAAG,aAAa,QAAQ;AAC7D;;;;;AAMA,SAAgB,2BACd,UACA,aACA,UACkB;CAClB,MAAM,KAAK,SAAS,OAAO,YAAY,QAAQ;CAQ/C,OAAO,EAAE,QAPE,SAAS,MAAM,YAAY,SAAS,IAGxC,SAAS,SAAS,IACnB,KAAK,SAAS,QAAQ,IAAI,aAAa,cACvC,KAAK,SAAS,QAAQ,IAAI,gBAAgB,eAEhC;AAClB"}

package/dist/esm/dev-tool/dev-tool-trigger-position.test.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { describe, expect, it } from "vitest";
 import { clampTriggerPosition, getSnappedTriggerPlacement, resolveTriggerPosition } from "./dev-tool-trigger-position.js";
 //#region src/dev-tool/dev-tool-trigger-position.test.ts
 const triggerSize = {
 	width: 36,
@@ -149,7 +148,7 @@ describe("clampTriggerPosition", () => {
 		expect(clampTriggerPosition(pos, triggerSize, viewport)).toEqual(pos);
 	});
 });
 //#endregion
-export {  };
+export {};
 //# sourceMappingURL=dev-tool-trigger-position.test.js.map

package/dist/esm/dev-tool/dev-tool-trigger-position.test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dev-tool-trigger-position.test.js","names":[],"sources":["../../../src/dev-tool/dev-tool-trigger-position.test.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { describe, expect, it } from \"vitest\";\nimport { clampTriggerPosition, getSnappedTriggerPlacement, resolveTriggerPosition } from \"./dev-tool-trigger-position\";\n\nconst triggerSize = { width: 36, height: 36 };\nconst viewport = { width: 1000, height: 700 };\n\ndescribe(\"corner snapping\", () => {\n it(\"snaps to bottom-right when trigger is in the bottom-right quadrant\", () => {\n const placement = getSnappedTriggerPlacement({ left: 800, top: 600 }, triggerSize, viewport);\n expect(placement).toEqual({ corner: \"bottom-right\" });\n });\n\n it(\"snaps to top-left when trigger is in the top-left quadrant\", () => {\n const placement = getSnappedTriggerPlacement({ left: 10, top: 20 }, triggerSize, viewport);\n expect(placement).toEqual({ corner: \"top-left\" });\n });\n\n it(\"snaps to top-right when trigger is in the top-right quadrant\", () => {\n const placement = getSnappedTriggerPlacement({ left: 900, top: 50 }, triggerSize, viewport);\n expect(placement).toEqual({ corner: \"top-right\" });\n });\n\n it(\"snaps to bottom-left when trigger is in the bottom-left quadrant\", () => {\n const placement = getSnappedTriggerPlacement({ left: 50, top: 650 }, triggerSize, viewport);\n expect(placement).toEqual({ corner: \"bottom-left\" });\n });\n});\n\ndescribe(\"corner position resolution\", () => {\n it(\"resolves bottom-right to margin from bottom and right edges\", () => {\n const pos = resolveTriggerPosition({ corner: \"bottom-right\" }, triggerSize, viewport);\n expect(pos).toEqual({ left: 1000 - 36 - 16, top: 700 - 36 - 16 });\n });\n\n it(\"resolves top-left to margin from top and left edges\", () => {\n const pos = resolveTriggerPosition({ corner: \"top-left\" }, triggerSize, viewport);\n expect(pos).toEqual({ left: 16, top: 16 });\n });\n\n it(\"resolves top-right to margin from top and right edges\", () => {\n const pos = resolveTriggerPosition({ corner: \"top-right\" }, triggerSize, viewport);\n expect(pos).toEqual({ left: 1000 - 36 - 16, top: 16 });\n });\n\n it(\"resolves bottom-left to margin from bottom and left edges\", () => {\n const pos = resolveTriggerPosition({ corner: \"bottom-left\" }, triggerSize, viewport);\n expect(pos).toEqual({ left: 16, top: 700 - 36 - 16 });\n });\n\n it(\"has equal left/top margin for top-left corner\", () => {\n const pos = resolveTriggerPosition({ corner: \"top-left\" }, triggerSize, viewport);\n expect(pos.left).toBe(pos.top);\n });\n\n it(\"keeps the trigger on-screen when the viewport is smaller than the margin and trigger\", () => {\n const tinyViewport = { width: 40, height: 40 };\n const pos = resolveTriggerPosition({ corner: \"bottom-right\" }, triggerSize, tinyViewport);\n expect(pos).toEqual({ left: 4, top: 4 });\n });\n});\n\ndescribe(\"resize anchor regression\", () => {\n it(\"bottom-right corner tracks the bottom-right edge after viewport shrinks\", () => {\n const placement = { corner: \"bottom-right\" } as const;\n const pos1 = resolveTriggerPosition(placement, triggerSize, { width: 800, height: 600 });\n expect(pos1).toEqual({ left: 800 - 36 - 16, top: 600 - 36 - 16 });\n });\n\n it(\"bottom-right corner tracks the bottom-right edge after viewport grows\", () => {\n const placement = { corner: \"bottom-right\" } as const;\n const pos2 = resolveTriggerPosition(placement, triggerSize, { width: 1440, height: 900 });\n expect(pos2).toEqual({ left: 1440 - 36 - 16, top: 900 - 36 - 16 });\n });\n\n it(\"top-right corner tracks the top-right edge across resize cycles\", () => {\n const placement = { corner: \"top-right\" } as const;\n for (const vw of [600, 800, 1000, 1440]) {\n const pos = resolveTriggerPosition(placement, triggerSize, { width: vw, height: 700 });\n expect(pos.left).toBe(vw - 36 - 16);\n expect(pos.top).toBe(16);\n }\n });\n\n it(\"corner does not change on resize (placement is stable)\", () => {\n // The same corner placement always resolves without changing its corner.\n const placement = getSnappedTriggerPlacement({ left: 950, top: 650 }, triggerSize, viewport);\n expect(placement.corner).toBe(\"bottom-right\");\n\n // After resize, applying resolveTriggerPosition still produces bottom-right geometry.\n const smallVp = resolveTriggerPosition(placement, triggerSize, { width: 400, height: 300 });\n expect(smallVp.left).toBe(400 - 36 - 16);\n expect(smallVp.top).toBe(300 - 36 - 16);\n });\n});\n\ndescribe(\"clampTriggerPosition\", () => {\n it(\"clamps positions outside the viewport\", () => {\n expect(clampTriggerPosition({ left: -50, top: -20 }, triggerSize, viewport)).toEqual({ left: 0, top: 0 });\n expect(clampTriggerPosition({ left: 9999, top: 9999 }, triggerSize, viewport)).toEqual({\n left: viewport.width - triggerSize.width,\n top: viewport.height - triggerSize.height,\n });\n });\n\n it(\"preserves positions already within bounds\", () => {\n const pos = { left: 200, top: 300 };\n expect(clampTriggerPosition(pos, triggerSize, viewport)).toEqual(pos);\n });\n});\n"],"mappings":"~~;;;;~~AAOA,MAAM,cAAc;CAAE,OAAO;CAAI,QAAQ;~~CAAI~~;~~AAC7C~~,MAAM,WAAW;CAAE,OAAO;CAAM,QAAQ;~~CAAK~~;~~AAE7C~~,SAAS,yBAAyB;~~AAChC~~,~~IAAG~~,4EAA4E;~~AAE7E~~,~~SADkB~~,2BAA2B;GAAE,MAAM;GAAK,KAAK;~~GAAK~~,~~EAAE~~,aAAa,~~SAAS~~,~~CAC3E~~,CAAC,QAAQ,EAAE,QAAQ,~~gBAAgB~~,CAAC;~~GACrD~~;~~AAEF~~,~~IAAG~~,oEAAoE;~~AAErE~~,~~SADkB~~,2BAA2B;GAAE,MAAM;GAAI,KAAK;~~GAAI~~,~~EAAE~~,aAAa,~~SAAS~~,~~CACzE~~,CAAC,QAAQ,EAAE,QAAQ,~~YAAY~~,CAAC;~~GACjD~~;~~AAEF~~,~~IAAG~~,sEAAsE;~~AAEvE~~,~~SADkB~~,2BAA2B;GAAE,MAAM;GAAK,KAAK;~~GAAI~~,~~EAAE~~,aAAa,~~SAAS~~,~~CAC1E~~,CAAC,QAAQ,EAAE,QAAQ,~~aAAa~~,CAAC;~~GAClD~~;~~AAEF~~,~~IAAG~~,0EAA0E;~~AAE3E~~,~~SADkB~~,2BAA2B;GAAE,MAAM;GAAI,KAAK;~~GAAK~~,~~EAAE~~,aAAa,~~SAAS~~,~~CAC1E~~,CAAC,QAAQ,EAAE,QAAQ,~~eAAe~~,CAAC;~~GACpD~~;~~EACF~~;~~AAEF~~,SAAS,oCAAoC;~~AAC3C~~,~~IAAG~~,qEAAqE;~~AAEtE~~,~~SADY~~,uBAAuB,EAAE,QAAQ,~~gBAAgB~~,~~EAAE~~,aAAa,~~SAAS~~,~~CAC1E~~,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;~~GAAe~~,CAAC;~~GACjE~~;~~AAEF~~,~~IAAG~~,6DAA6D;~~AAE9D~~,~~SADY~~,uBAAuB,EAAE,QAAQ,~~YAAY~~,~~EAAE~~,aAAa,~~SAAS~~,~~CACtE~~,CAAC,QAAQ;GAAE,MAAM;GAAI,KAAK;~~GAAI~~,CAAC;~~GAC1C~~;~~AAEF~~,~~IAAG~~,+DAA+D;~~AAEhE~~,~~SADY~~,uBAAuB,EAAE,QAAQ,~~aAAa~~,~~EAAE~~,aAAa,~~SAAS~~,~~CACvE~~,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;~~GAAI~~,CAAC;~~GACtD~~;~~AAEF~~,~~IAAG~~,mEAAmE;~~AAEpE~~,~~SADY~~,uBAAuB,EAAE,QAAQ,~~eAAe~~,~~EAAE~~,aAAa,~~SAAS~~,~~CACzE~~,CAAC,QAAQ;GAAE,MAAM;GAAI,KAAK;~~GAAe~~,CAAC;~~GACrD~~;~~AAEF~~,~~IAAG~~,uDAAuD;EACxD,MAAM,MAAM,uBAAuB,EAAE,QAAQ,~~YAAY~~,~~EAAE~~,aAAa,~~SAAS~~;~~AACjF~~,~~SAAO~~,IAAI,~~KAAK~~,CAAC,KAAK,IAAI,~~IAAI~~;~~GAC9B~~;~~AAEF~~,~~IAAG~~,8FAA8F;~~AAG~~/F,~~SADY~~,uBAAuB,EAAE,QAAQ,~~gBAAgB~~,~~EAAE~~,~~aAD1C~~;~~GAAE~~,OAAO;GAAI,QAAQ;~~GAAI~~,~~CAC2C,~~CAC9E,CAAC,QAAQ;GAAE,MAAM;GAAG,KAAK;~~GAAG~~,CAAC;~~GACxC~~;~~EACF~~;~~AAEF~~,SAAS,kCAAkC;~~AACzC~~,~~IAAG~~,iFAAiF;~~AAGlF~~,~~SADa~~,~~uBADK~~,~~EAAE~~,QAAQ,~~gBAAgB~~,~~EACG~~,aAAa;GAAE,OAAO;GAAK,QAAQ;~~GAAK~~,CAAC,~~CAC5E~~,CAAC,QAAQ;GAAE,MAAM;GAAe,KAAK;~~GAAe~~,CAAC;~~GACjE~~;~~AAEF~~,~~IAAG~~,+EAA+E;~~AAGhF~~,~~SADa~~,~~uBADK~~,~~EAAE~~,QAAQ,~~gBAAgB~~,~~EACG~~,aAAa;GAAE,OAAO;GAAM,QAAQ;~~GAAK~~,CAAC,~~CAC7E~~,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;~~GAAe~~,CAAC;~~GAClE~~;~~AAEF~~,~~IAAG~~,yEAAyE;EAC1E,MAAM,YAAY,EAAE,QAAQ,~~aAAa~~;~~AACzC~~,~~OAAK~~,MAAM,MAAM;GAAC;GAAK;GAAK;GAAM;~~GAAK~~,~~EAAE~~;GACvC,MAAM,MAAM,uBAAuB,WAAW,aAAa;IAAE,OAAO;IAAI,QAAQ;~~IAAK~~,CAAC;~~AACtF~~,~~UAAO~~,IAAI,~~KAAK~~,CAAC,KAAK,KAAK,KAAK,~~GAAG~~;~~AACnC~~,~~UAAO~~,IAAI,~~IAAI~~,CAAC,KAAK,~~GAAG;;GAE1B~~;~~AAEF~~,~~IAAG~~,gEAAgE;EAEjE,MAAM,YAAY,2BAA2B;GAAE,MAAM;GAAK,KAAK;~~GAAK~~,~~EAAE~~,aAAa,~~SAAS~~;~~AAC5F~~,~~SAAO~~,UAAU,~~OAAO~~,CAAC,KAAK,~~eAAe~~;~~EAG7C~~,MAAM,UAAU,uBAAuB,WAAW,aAAa;GAAE,OAAO;GAAK,QAAQ;~~GAAK~~,CAAC;~~AAC3F~~,~~SAAO~~,QAAQ,~~KAAK~~,CAAC,KAAK,~~IAAc~~;~~AACxC~~,~~SAAO~~,QAAQ,~~IAAI~~,CAAC,KAAK,~~IAAc~~;~~GACvC~~;~~EACF~~;~~AAEF~~,SAAS,8BAA8B;~~AACrC~~,~~IAAG~~,+CAA+C;~~AAChD~~,~~SAAO~~,qBAAqB;GAAE,MAAM;GAAK,KAAK;~~GAAK~~,~~EAAE~~,aAAa,~~SAAS~~,CAAC,CAAC,QAAQ;GAAE,MAAM;GAAG,KAAK;~~GAAG~~,CAAC;~~AACzG~~,~~SAAO~~,qBAAqB;GAAE,MAAM;GAAM,KAAK;~~GAAM~~,~~EAAE~~,aAAa,~~SAAS~~,CAAC,CAAC,QAAQ;GACrF,MAAM,SAAS,QAAQ,YAAY;GACnC,KAAK,SAAS,SAAS,YAAY;~~GACpC~~,CAAC;~~GACF~~;~~AAEF~~,~~IAAG~~,mDAAmD;EACpD,MAAM,MAAM;GAAE,MAAM;GAAK,KAAK;~~GAAK~~;~~AACnC~~,~~SAAO~~,qBAAqB,KAAK,aAAa,~~SAAS~~,CAAC,CAAC,QAAQ,~~IAAI~~;~~GACrE~~;~~EACF~~"}
1	+ {"version":3,"file":"dev-tool-trigger-position.test.js","names":[],"sources":["../../../src/dev-tool/dev-tool-trigger-position.test.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { describe, expect, it } from \"vitest\";\nimport { clampTriggerPosition, getSnappedTriggerPlacement, resolveTriggerPosition } from \"./dev-tool-trigger-position\";\n\nconst triggerSize = { width: 36, height: 36 };\nconst viewport = { width: 1000, height: 700 };\n\ndescribe(\"corner snapping\", () => {\n it(\"snaps to bottom-right when trigger is in the bottom-right quadrant\", () => {\n const placement = getSnappedTriggerPlacement({ left: 800, top: 600 }, triggerSize, viewport);\n expect(placement).toEqual({ corner: \"bottom-right\" });\n });\n\n it(\"snaps to top-left when trigger is in the top-left quadrant\", () => {\n const placement = getSnappedTriggerPlacement({ left: 10, top: 20 }, triggerSize, viewport);\n expect(placement).toEqual({ corner: \"top-left\" });\n });\n\n it(\"snaps to top-right when trigger is in the top-right quadrant\", () => {\n const placement = getSnappedTriggerPlacement({ left: 900, top: 50 }, triggerSize, viewport);\n expect(placement).toEqual({ corner: \"top-right\" });\n });\n\n it(\"snaps to bottom-left when trigger is in the bottom-left quadrant\", () => {\n const placement = getSnappedTriggerPlacement({ left: 50, top: 650 }, triggerSize, viewport);\n expect(placement).toEqual({ corner: \"bottom-left\" });\n });\n});\n\ndescribe(\"corner position resolution\", () => {\n it(\"resolves bottom-right to margin from bottom and right edges\", () => {\n const pos = resolveTriggerPosition({ corner: \"bottom-right\" }, triggerSize, viewport);\n expect(pos).toEqual({ left: 1000 - 36 - 16, top: 700 - 36 - 16 });\n });\n\n it(\"resolves top-left to margin from top and left edges\", () => {\n const pos = resolveTriggerPosition({ corner: \"top-left\" }, triggerSize, viewport);\n expect(pos).toEqual({ left: 16, top: 16 });\n });\n\n it(\"resolves top-right to margin from top and right edges\", () => {\n const pos = resolveTriggerPosition({ corner: \"top-right\" }, triggerSize, viewport);\n expect(pos).toEqual({ left: 1000 - 36 - 16, top: 16 });\n });\n\n it(\"resolves bottom-left to margin from bottom and left edges\", () => {\n const pos = resolveTriggerPosition({ corner: \"bottom-left\" }, triggerSize, viewport);\n expect(pos).toEqual({ left: 16, top: 700 - 36 - 16 });\n });\n\n it(\"has equal left/top margin for top-left corner\", () => {\n const pos = resolveTriggerPosition({ corner: \"top-left\" }, triggerSize, viewport);\n expect(pos.left).toBe(pos.top);\n });\n\n it(\"keeps the trigger on-screen when the viewport is smaller than the margin and trigger\", () => {\n const tinyViewport = { width: 40, height: 40 };\n const pos = resolveTriggerPosition({ corner: \"bottom-right\" }, triggerSize, tinyViewport);\n expect(pos).toEqual({ left: 4, top: 4 });\n });\n});\n\ndescribe(\"resize anchor regression\", () => {\n it(\"bottom-right corner tracks the bottom-right edge after viewport shrinks\", () => {\n const placement = { corner: \"bottom-right\" } as const;\n const pos1 = resolveTriggerPosition(placement, triggerSize, { width: 800, height: 600 });\n expect(pos1).toEqual({ left: 800 - 36 - 16, top: 600 - 36 - 16 });\n });\n\n it(\"bottom-right corner tracks the bottom-right edge after viewport grows\", () => {\n const placement = { corner: \"bottom-right\" } as const;\n const pos2 = resolveTriggerPosition(placement, triggerSize, { width: 1440, height: 900 });\n expect(pos2).toEqual({ left: 1440 - 36 - 16, top: 900 - 36 - 16 });\n });\n\n it(\"top-right corner tracks the top-right edge across resize cycles\", () => {\n const placement = { corner: \"top-right\" } as const;\n for (const vw of [600, 800, 1000, 1440]) {\n const pos = resolveTriggerPosition(placement, triggerSize, { width: vw, height: 700 });\n expect(pos.left).toBe(vw - 36 - 16);\n expect(pos.top).toBe(16);\n }\n });\n\n it(\"corner does not change on resize (placement is stable)\", () => {\n // The same corner placement always resolves without changing its corner.\n const placement = getSnappedTriggerPlacement({ left: 950, top: 650 }, triggerSize, viewport);\n expect(placement.corner).toBe(\"bottom-right\");\n\n // After resize, applying resolveTriggerPosition still produces bottom-right geometry.\n const smallVp = resolveTriggerPosition(placement, triggerSize, { width: 400, height: 300 });\n expect(smallVp.left).toBe(400 - 36 - 16);\n expect(smallVp.top).toBe(300 - 36 - 16);\n });\n});\n\ndescribe(\"clampTriggerPosition\", () => {\n it(\"clamps positions outside the viewport\", () => {\n expect(clampTriggerPosition({ left: -50, top: -20 }, triggerSize, viewport)).toEqual({ left: 0, top: 0 });\n expect(clampTriggerPosition({ left: 9999, top: 9999 }, triggerSize, viewport)).toEqual({\n left: viewport.width - triggerSize.width,\n top: viewport.height - triggerSize.height,\n });\n });\n\n it(\"preserves positions already within bounds\", () => {\n const pos = { left: 200, top: 300 };\n expect(clampTriggerPosition(pos, triggerSize, viewport)).toEqual(pos);\n });\n});\n"],"mappings":";;;AAOA,MAAM,cAAc;CAAE,OAAO;CAAI,QAAQ;AAAG;AAC5C,MAAM,WAAW;CAAE,OAAO;CAAM,QAAQ;AAAI;AAE5C,SAAS,yBAAyB;CAChC,GAAG,4EAA4E;EAE7E,OADkB,2BAA2B;GAAE,MAAM;GAAK,KAAK;EAAI,GAAG,aAAa,QACpE,CAAC,CAAC,CAAC,QAAQ,EAAE,QAAQ,eAAe,CAAC;CACtD,CAAC;CAED,GAAG,oEAAoE;EAErE,OADkB,2BAA2B;GAAE,MAAM;GAAI,KAAK;EAAG,GAAG,aAAa,QAClE,CAAC,CAAC,CAAC,QAAQ,EAAE,QAAQ,WAAW,CAAC;CAClD,CAAC;CAED,GAAG,sEAAsE;EAEvE,OADkB,2BAA2B;GAAE,MAAM;GAAK,KAAK;EAAG,GAAG,aAAa,QACnE,CAAC,CAAC,CAAC,QAAQ,EAAE,QAAQ,YAAY,CAAC;CACnD,CAAC;CAED,GAAG,0EAA0E;EAE3E,OADkB,2BAA2B;GAAE,MAAM;GAAI,KAAK;EAAI,GAAG,aAAa,QACnE,CAAC,CAAC,CAAC,QAAQ,EAAE,QAAQ,cAAc,CAAC;CACrD,CAAC;AACH,CAAC;AAED,SAAS,oCAAoC;CAC3C,GAAG,qEAAqE;EAEtE,OADY,uBAAuB,EAAE,QAAQ,eAAe,GAAG,aAAa,QACnE,CAAC,CAAC,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;EAAc,CAAC;CAClE,CAAC;CAED,GAAG,6DAA6D;EAE9D,OADY,uBAAuB,EAAE,QAAQ,WAAW,GAAG,aAAa,QAC/D,CAAC,CAAC,CAAC,QAAQ;GAAE,MAAM;GAAI,KAAK;EAAG,CAAC;CAC3C,CAAC;CAED,GAAG,+DAA+D;EAEhE,OADY,uBAAuB,EAAE,QAAQ,YAAY,GAAG,aAAa,QAChE,CAAC,CAAC,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;EAAG,CAAC;CACvD,CAAC;CAED,GAAG,mEAAmE;EAEpE,OADY,uBAAuB,EAAE,QAAQ,cAAc,GAAG,aAAa,QAClE,CAAC,CAAC,CAAC,QAAQ;GAAE,MAAM;GAAI,KAAK;EAAc,CAAC;CACtD,CAAC;CAED,GAAG,uDAAuD;EACxD,MAAM,MAAM,uBAAuB,EAAE,QAAQ,WAAW,GAAG,aAAa,QAAQ;EAChF,OAAO,IAAI,IAAI,CAAC,CAAC,KAAK,IAAI,GAAG;CAC/B,CAAC;CAED,GAAG,8FAA8F;EAG/F,OADY,uBAAuB,EAAE,QAAQ,eAAe,GAAG,aAAa;GADrD,OAAO;GAAI,QAAQ;EAC6C,CAC9E,CAAC,CAAC,CAAC,QAAQ;GAAE,MAAM;GAAG,KAAK;EAAE,CAAC;CACzC,CAAC;AACH,CAAC;AAED,SAAS,kCAAkC;CACzC,GAAG,iFAAiF;EAGlF,OADa,uBAAuB,EADhB,QAAQ,eACgB,GAAG,aAAa;GAAE,OAAO;GAAK,QAAQ;EAAI,CAC5E,CAAC,CAAC,CAAC,QAAQ;GAAE,MAAM;GAAe,KAAK;EAAc,CAAC;CAClE,CAAC;CAED,GAAG,+EAA+E;EAGhF,OADa,uBAAuB,EADhB,QAAQ,eACgB,GAAG,aAAa;GAAE,OAAO;GAAM,QAAQ;EAAI,CAC7E,CAAC,CAAC,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;EAAc,CAAC;CACnE,CAAC;CAED,GAAG,yEAAyE;EAC1E,MAAM,YAAY,EAAE,QAAQ,YAAY;EACxC,KAAK,MAAM,MAAM;GAAC;GAAK;GAAK;GAAM;EAAI,GAAG;GACvC,MAAM,MAAM,uBAAuB,WAAW,aAAa;IAAE,OAAO;IAAI,QAAQ;GAAI,CAAC;GACrF,OAAO,IAAI,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,EAAE;GAClC,OAAO,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE;EACzB;CACF,CAAC;CAED,GAAG,gEAAgE;EAEjE,MAAM,YAAY,2BAA2B;GAAE,MAAM;GAAK,KAAK;EAAI,GAAG,aAAa,QAAQ;EAC3F,OAAO,UAAU,MAAM,CAAC,CAAC,KAAK,cAAc;EAG5C,MAAM,UAAU,uBAAuB,WAAW,aAAa;GAAE,OAAO;GAAK,QAAQ;EAAI,CAAC;EAC1F,OAAO,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAa;EACvC,OAAO,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAa;CACxC,CAAC;AACH,CAAC;AAED,SAAS,8BAA8B;CACrC,GAAG,+CAA+C;EAChD,OAAO,qBAAqB;GAAE,MAAM;GAAK,KAAK;EAAI,GAAG,aAAa,QAAQ,CAAC,CAAC,CAAC,QAAQ;GAAE,MAAM;GAAG,KAAK;EAAE,CAAC;EACxG,OAAO,qBAAqB;GAAE,MAAM;GAAM,KAAK;EAAK,GAAG,aAAa,QAAQ,CAAC,CAAC,CAAC,QAAQ;GACrF,MAAM,SAAS,QAAQ,YAAY;GACnC,KAAK,SAAS,SAAS,YAAY;EACrC,CAAC;CACH,CAAC;CAED,GAAG,mDAAmD;EACpD,MAAM,MAAM;GAAE,MAAM;GAAK,KAAK;EAAI;EAClC,OAAO,qBAAqB,KAAK,aAAa,QAAQ,CAAC,CAAC,CAAC,QAAQ,GAAG;CACtE,CAAC;AACH,CAAC"}

package/dist/esm/dev-tool/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { StackClientApp } from "../lib/hexclave-app";
+import { StackClientApp } from "../lib/hexclave-app/index.js";
 //#region src/dev-tool/index.d.ts
 /**

package/dist/esm/dev-tool/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/dev-tool/index.ts"],"mappings":";;;;;AAsGA~~;;;;;;;;;;;iBAAgB~~,YAAA,CAAa,GAAA,EAAK,~~cAAA~~,~~QAAsB~~,aAAA"}
1	+ {"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/dev-tool/index.ts"],"mappings":";;;;;AAsGA;;;;;;;;AAAwF;;;iBAAxE,YAAA,CAAa,GAAA,EAAK,cAAc,QAAQ,aAAA"}

package/dist/esm/dev-tool/index.js CHANGED Viewed

@@ -3,7 +3,6 @@ import { canMountIntoDom } from "../in-page-ui/dom.js";
 import { captureError } from "@hexclave/shared/dist/utils/errors";
 import { isLocalhost } from "@hexclave/shared/dist/utils/urls";
 import { envVars } from "../generated/env.js";
 //#region src/dev-tool/index.ts
 const OVERRIDE_KEY = "__hexclave-dev-tool-override";
 function getOverride() {
@@ -114,7 +113,7 @@ if (typeof window !== "undefined") window.HexclaveDevTool = window.HexclaveDevTo
 		console.log("[Stack DevTool] Reset to default (auto-detect based on NODE_ENV or localhost/file: origin).");
 	}
 };
 //#endregion
 export { mountDevTool };
 //# sourceMappingURL=index.js.map

package/dist/esm/dev-tool/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../src/dev-tool/index.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport type { StackClientApp } from \"../lib/hexclave-app\";\nimport { captureError } from \"@hexclave/shared/dist/utils/errors\";\nimport { runAsynchronously } from \"@hexclave/shared/dist/utils/promises\";\nimport { isLocalhost } from \"@hexclave/shared/dist/utils/urls\";\nimport { canMountIntoDom } from \"../in-page-ui/dom\";\nimport { envVars } from \"../generated/env\";\nimport type { createDevTool as CreateDevToolFn } from \"./dev-tool-core\";\n\n// Hexclave rebrand: UI-only local pref — straight rename (one-time reset is harmless)\nconst OVERRIDE_KEY = '__hexclave-dev-tool-override';\n\nfunction getOverride(): boolean \| null {\n try {\n const val = localStorage.getItem(OVERRIDE_KEY);\n if (val === 'true') return true;\n if (val === 'false') return false;\n } catch {}\n return null;\n}\n\nlet activeDevToolOption: true \| \"auto\" \| undefined = undefined;\n\nfunction shouldShow(): boolean {\n const override = getOverride();\n if (override !== null) return override;\n if (!canMountIntoDom()) return false;\n\n // If devTool was explicitly set to true, always show\n if (activeDevToolOption === true) return true;\n\n // \"auto\" behavior (the default):\n const nodeEnv = envVars.NODE_ENV;\n if (nodeEnv !== undefined) {\n // NODE_ENV is available (bundler/process env exists) — only show in development\n return nodeEnv === \"development\";\n }\n\n // NODE_ENV not found (no process.env/import.meta) — show on localhost or file: protocol\n try {\n const url = new URL(window.location.href);\n if (url.protocol === \"file:\") return true;\n } catch {}\n return isLocalhost(window.location.href);\n}\n\nlet activeCleanup: (() => void) \| null = null;\nlet activeApp: StackClientApp<true> \| null = null;\nlet mountGeneration = 0;\n\nlet createDevToolPromise: Promise<typeof CreateDevToolFn> \| null = null;\nfunction loadCreateDevTool(): Promise<typeof CreateDevToolFn> {\n if (!createDevToolPromise) {\n createDevToolPromise = import(\"./dev-tool-core\").then(m => m.createDevTool).catch((err) => {\n createDevToolPromise = null;\n throw err;\n });\n }\n return createDevToolPromise;\n}\n\nfunction tryMount() {\n if (activeCleanup) {\n activeCleanup();\n activeCleanup = null;\n }\n\n if (!shouldShow() \|\| !activeApp \|\| !canMountIntoDom()) return;\n\n const generation = ++mountGeneration;\n const app = activeApp;\n\n runAsynchronously(async () => {\n const createDevTool = await loadCreateDevTool();\n if (generation !== mountGeneration) return;\n if (!shouldShow() \|\| activeApp !== app \|\| !canMountIntoDom()) return;\n activeCleanup = createDevTool(app);\n }, {\n noErrorLogging: true,\n onError: (error) => {\n captureError(\"dev-tool-mount\", error);\n },\n });\n}\n\n/*\n Mounts the Hexclave dev tool on the page.\n \n Visibility is determined by the `devTool` option:\n * - `true`: always show\n * - `false`: never show (caller gates this — mountDevTool won't be called)\n * - `\"auto\"` / `undefined`: show based on NODE_ENV or localhost/file: heuristics\n \n Console commands (also work in production):\n * HexclaveDevTool.enable() — force-show the dev tool\n * HexclaveDevTool.disable() — force-hide the dev tool\n * HexclaveDevTool.reset() — revert to auto behavior\n */\nexport function mountDevTool(app: StackClientApp<true>, devToolOption?: boolean \| \"auto\"): () => void {\n activeApp = app;\n activeDevToolOption = devToolOption === false ? undefined : devToolOption ?? undefined;\n tryMount();\n\n // Capture the cleanup created by THIS specific mount call so that React\n // StrictMode's double-invoke doesn't let the first effect's cleanup tear\n // down the second mount (which would cause the tool to disappear silently).\n const myCleanup = activeCleanup;\n\n return () => {\n activeApp = null;\n if (activeCleanup === myCleanup && myCleanup != null) {\n activeCleanup = null;\n myCleanup();\n }\n };\n}\n\n// Expose console commands: HexclaveDevTool.enable() / .disable() / .reset()\nif (typeof window !== 'undefined') {\n // Hexclave rebrand: expose under both the legacy and new global names.\n (window as any).HexclaveDevTool = (window as any).HexclaveDevTool = {\n enable() {\n try {\n localStorage.setItem(OVERRIDE_KEY, 'true');\n } catch {}\n tryMount();\n console.log('[Stack DevTool] Enabled. Refresh if the panel does not appear.');\n },\n disable() {\n try {\n localStorage.setItem(OVERRIDE_KEY, 'false');\n } catch {}\n if (activeCleanup) {\n activeCleanup();\n activeCleanup = null;\n }\n console.log('[Stack DevTool] Disabled.');\n },\n reset() {\n try {\n localStorage.removeItem(OVERRIDE_KEY);\n } catch {}\n if (shouldShow()) {\n tryMount();\n } else if (activeCleanup) {\n activeCleanup();\n activeCleanup = null;\n }\n console.log('[Stack DevTool] Reset to default (auto-detect based on NODE_ENV or localhost/file: origin).');\n },\n };\n}\n\n"],"mappings":"~~;;;;;;;~~AAcA,MAAM,eAAe;AAErB,SAAS,cAA8B;~~AACrC~~,~~KAAI~~;EACF,MAAM,MAAM,aAAa,QAAQ,~~aAAa~~;~~AAC9C~~,~~MAAI~~,QAAQ,~~OAAQ~~,~~QAAO~~;~~AAC3B~~,~~MAAI~~,QAAQ,~~QAAS~~,~~QAAO~~;~~SACtB~~;~~AACR~~,~~QAAO;;AAGT~~,IAAI,sBAAiD;AAErD,SAAS,aAAsB;CAC7B,MAAM,WAAW,~~aAAa~~;~~AAC9B~~,~~KAAI~~,aAAa,~~KAAM~~,~~QAAO~~;~~AAC9B~~,~~KAAI~~,CAAC,~~iBAAiB~~,~~CAAE~~,~~QAAO~~;~~AAG~~/B,~~KAAI~~,wBAAwB,~~KAAM~~,~~QAAO~~;CAGzC,MAAM,UAAU,QAAQ;~~AACxB~~,~~KAAI~~,YAAY,~~OAEd~~,~~QAAO~~,YAAY;~~AAIrB~~,~~KAAI~~;~~AAEF~~,~~MADY,~~IAAI,IAAI,OAAO,SAAS,~~KAAK~~,~~CACjC~~,aAAa,~~QAAS~~,~~QAAO~~;~~SAC/B~~;~~AACR~~,~~QAAO~~,YAAY,OAAO,SAAS,~~KAAK;;AAG1C~~,IAAI,gBAAqC;AACzC,IAAI,YAAyC;AAC7C,IAAI,kBAAkB;AAEtB,IAAI,uBAA+D;AACnE,SAAS,oBAAqD;~~AAC5D~~,~~KAAI~~,CAAC,~~qBACH~~,~~wBAAuB~~,OAAO,~~sBAAmB~~,MAAK,MAAK,EAAE,~~cAAc~~,CAAC,OAAO,QAAQ;~~AACzF~~,~~yBAAuB~~;~~AACvB~~,~~QAAM~~;~~GACN~~;~~AAEJ~~,~~QAAO;;AAGT~~,SAAS,WAAW;~~AAClB~~,~~KAAI~~,eAAe;~~AACjB~~,~~iBAAe~~;~~AACf~~,~~kBAAgB;;AAGlB~~,~~KAAI~~,CAAC,~~YAAY~~,~~IAAI~~,CAAC,aAAa,CAAC,~~iBAAiB~~,~~CAAE~~;CAEvD,MAAM,aAAa,EAAE;CACrB,MAAM,MAAM;~~AAEZ~~,~~mBAAkB~~,YAAY;EAC5B,MAAM,gBAAgB,MAAM,~~mBAAmB~~;~~AAC/C~~,~~MAAI~~,eAAe,~~gBAAiB~~;~~AACpC~~,~~MAAI~~,CAAC,~~YAAY~~,~~IAAI~~,cAAc,OAAO,CAAC,~~iBAAiB~~,~~CAAE~~;~~AAC9D~~,~~kBAAgB~~,cAAc,~~IAAI~~;~~IACjC~~;EACD,gBAAgB;EAChB,UAAU,UAAU;~~AAClB~~,~~gBAAa~~,kBAAkB,~~MAAM;;EAExC~~,CAAC~~;;;;;;;;;;;;;;;AAgBJ~~,SAAgB,aAAa,KAA2B,eAA8C;~~AACpG~~,~~aAAY~~;~~AACZ~~,~~uBAAsB~~,kBAAkB,QAAQ,~~SAAY~~,iBAAiB;~~AAC7E~~,~~WAAU~~;~~CAKV~~,MAAM,YAAY;~~AAElB~~,~~cAAa~~;~~AACX~~,~~cAAY~~;~~AACZ~~,~~MAAI~~,kBAAkB,aAAa,aAAa,MAAM;~~AACpD~~,~~mBAAgB~~;~~AAChB~~,~~cAAW;;;;AAMjB~~,IAAI,OAAO,WAAW,~~YAEpB~~,~~CAAC~~,~~OAAe,~~kBAAkB,~~AAAC~~,~~OAAe,~~kBAAkB;CAClE,SAAS;~~AACP~~,~~MAAI~~;~~AACF~~,~~gBAAa~~,QAAQ,cAAc,~~OAAO~~;~~UACpC~~;~~AACR~~,~~YAAU~~;~~AACV~~,~~UAAQ~~,IAAI,~~iEAAiE;;CAE/E~~,UAAU;~~AACR~~,~~MAAI~~;~~AACF~~,~~gBAAa~~,QAAQ,cAAc,QAAQ;~~UACrC;AACR~~,~~MAAI~~,eAAe;~~AACjB~~,~~kBAAe~~;~~AACf~~,~~mBAAgB;;AAElB~~,~~UAAQ~~,IAAI,~~4BAA4B;;CAE1C~~,QAAQ;~~AACN~~,~~MAAI~~;~~AACF~~,~~gBAAa~~,WAAW,~~aAAa~~;~~UAC/B~~;~~AACR~~,~~MAAI~~,~~YAAY~~,~~CACd~~,~~WAAU~~;~~WACD~~,eAAe;~~AACxB~~,~~kBAAe~~;~~AACf~~,~~mBAAgB;;AAElB~~,~~UAAQ~~,IAAI,~~8FAA8F;;CAE7G~~"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/dev-tool/index.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport type { StackClientApp } from \"../lib/hexclave-app\";\nimport { captureError } from \"@hexclave/shared/dist/utils/errors\";\nimport { runAsynchronously } from \"@hexclave/shared/dist/utils/promises\";\nimport { isLocalhost } from \"@hexclave/shared/dist/utils/urls\";\nimport { canMountIntoDom } from \"../in-page-ui/dom\";\nimport { envVars } from \"../generated/env\";\nimport type { createDevTool as CreateDevToolFn } from \"./dev-tool-core\";\n\n// Hexclave rebrand: UI-only local pref — straight rename (one-time reset is harmless)\nconst OVERRIDE_KEY = '__hexclave-dev-tool-override';\n\nfunction getOverride(): boolean \| null {\n try {\n const val = localStorage.getItem(OVERRIDE_KEY);\n if (val === 'true') return true;\n if (val === 'false') return false;\n } catch {}\n return null;\n}\n\nlet activeDevToolOption: true \| \"auto\" \| undefined = undefined;\n\nfunction shouldShow(): boolean {\n const override = getOverride();\n if (override !== null) return override;\n if (!canMountIntoDom()) return false;\n\n // If devTool was explicitly set to true, always show\n if (activeDevToolOption === true) return true;\n\n // \"auto\" behavior (the default):\n const nodeEnv = envVars.NODE_ENV;\n if (nodeEnv !== undefined) {\n // NODE_ENV is available (bundler/process env exists) — only show in development\n return nodeEnv === \"development\";\n }\n\n // NODE_ENV not found (no process.env/import.meta) — show on localhost or file: protocol\n try {\n const url = new URL(window.location.href);\n if (url.protocol === \"file:\") return true;\n } catch {}\n return isLocalhost(window.location.href);\n}\n\nlet activeCleanup: (() => void) \| null = null;\nlet activeApp: StackClientApp<true> \| null = null;\nlet mountGeneration = 0;\n\nlet createDevToolPromise: Promise<typeof CreateDevToolFn> \| null = null;\nfunction loadCreateDevTool(): Promise<typeof CreateDevToolFn> {\n if (!createDevToolPromise) {\n createDevToolPromise = import(\"./dev-tool-core\").then(m => m.createDevTool).catch((err) => {\n createDevToolPromise = null;\n throw err;\n });\n }\n return createDevToolPromise;\n}\n\nfunction tryMount() {\n if (activeCleanup) {\n activeCleanup();\n activeCleanup = null;\n }\n\n if (!shouldShow() \|\| !activeApp \|\| !canMountIntoDom()) return;\n\n const generation = ++mountGeneration;\n const app = activeApp;\n\n runAsynchronously(async () => {\n const createDevTool = await loadCreateDevTool();\n if (generation !== mountGeneration) return;\n if (!shouldShow() \|\| activeApp !== app \|\| !canMountIntoDom()) return;\n activeCleanup = createDevTool(app);\n }, {\n noErrorLogging: true,\n onError: (error) => {\n captureError(\"dev-tool-mount\", error);\n },\n });\n}\n\n/*\n Mounts the Hexclave dev tool on the page.\n \n Visibility is determined by the `devTool` option:\n * - `true`: always show\n * - `false`: never show (caller gates this — mountDevTool won't be called)\n * - `\"auto\"` / `undefined`: show based on NODE_ENV or localhost/file: heuristics\n \n Console commands (also work in production):\n * HexclaveDevTool.enable() — force-show the dev tool\n * HexclaveDevTool.disable() — force-hide the dev tool\n * HexclaveDevTool.reset() — revert to auto behavior\n */\nexport function mountDevTool(app: StackClientApp<true>, devToolOption?: boolean \| \"auto\"): () => void {\n activeApp = app;\n activeDevToolOption = devToolOption === false ? undefined : devToolOption ?? undefined;\n tryMount();\n\n // Capture the cleanup created by THIS specific mount call so that React\n // StrictMode's double-invoke doesn't let the first effect's cleanup tear\n // down the second mount (which would cause the tool to disappear silently).\n const myCleanup = activeCleanup;\n\n return () => {\n activeApp = null;\n if (activeCleanup === myCleanup && myCleanup != null) {\n activeCleanup = null;\n myCleanup();\n }\n };\n}\n\n// Expose console commands: HexclaveDevTool.enable() / .disable() / .reset()\nif (typeof window !== 'undefined') {\n // Hexclave rebrand: expose under both the legacy and new global names.\n (window as any).HexclaveDevTool = (window as any).HexclaveDevTool = {\n enable() {\n try {\n localStorage.setItem(OVERRIDE_KEY, 'true');\n } catch {}\n tryMount();\n console.log('[Stack DevTool] Enabled. Refresh if the panel does not appear.');\n },\n disable() {\n try {\n localStorage.setItem(OVERRIDE_KEY, 'false');\n } catch {}\n if (activeCleanup) {\n activeCleanup();\n activeCleanup = null;\n }\n console.log('[Stack DevTool] Disabled.');\n },\n reset() {\n try {\n localStorage.removeItem(OVERRIDE_KEY);\n } catch {}\n if (shouldShow()) {\n tryMount();\n } else if (activeCleanup) {\n activeCleanup();\n activeCleanup = null;\n }\n console.log('[Stack DevTool] Reset to default (auto-detect based on NODE_ENV or localhost/file: origin).');\n },\n };\n}\n\n"],"mappings":";;;;;;AAcA,MAAM,eAAe;AAErB,SAAS,cAA8B;CACrC,IAAI;EACF,MAAM,MAAM,aAAa,QAAQ,YAAY;EAC7C,IAAI,QAAQ,QAAQ,OAAO;EAC3B,IAAI,QAAQ,SAAS,OAAO;CAC9B,QAAQ,CAAC;CACT,OAAO;AACT;AAEA,IAAI,sBAAiD,KAAA;AAErD,SAAS,aAAsB;CAC7B,MAAM,WAAW,YAAY;CAC7B,IAAI,aAAa,MAAM,OAAO;CAC9B,IAAI,CAAC,gBAAgB,GAAG,OAAO;CAG/B,IAAI,wBAAwB,MAAM,OAAO;CAGzC,MAAM,UAAU,QAAQ;CACxB,IAAI,YAAY,KAAA,GAEd,OAAO,YAAY;CAIrB,IAAI;EAEF,IAAI,IADY,IAAI,OAAO,SAAS,IAC9B,CAAC,CAAC,aAAa,SAAS,OAAO;CACvC,QAAQ,CAAC;CACT,OAAO,YAAY,OAAO,SAAS,IAAI;AACzC;AAEA,IAAI,gBAAqC;AACzC,IAAI,YAAyC;AAC7C,IAAI,kBAAkB;AAEtB,IAAI,uBAA+D;AACnE,SAAS,oBAAqD;CAC5D,IAAI,CAAC,sBACH,uBAAuB,OAAO,qBAAkB,CAAC,MAAK,MAAK,EAAE,aAAa,CAAC,CAAC,OAAO,QAAQ;EACzF,uBAAuB;EACvB,MAAM;CACR,CAAC;CAEH,OAAO;AACT;AAEA,SAAS,WAAW;CAClB,IAAI,eAAe;EACjB,cAAc;EACd,gBAAgB;CAClB;CAEA,IAAI,CAAC,WAAW,KAAK,CAAC,aAAa,CAAC,gBAAgB,GAAG;CAEvD,MAAM,aAAa,EAAE;CACrB,MAAM,MAAM;CAEZ,kBAAkB,YAAY;EAC5B,MAAM,gBAAgB,MAAM,kBAAkB;EAC9C,IAAI,eAAe,iBAAiB;EACpC,IAAI,CAAC,WAAW,KAAK,cAAc,OAAO,CAAC,gBAAgB,GAAG;EAC9D,gBAAgB,cAAc,GAAG;CACnC,GAAG;EACD,gBAAgB;EAChB,UAAU,UAAU;GAClB,aAAa,kBAAkB,KAAK;EACtC;CACF,CAAC;AACH;;;;;;;;;;;;;;AAeA,SAAgB,aAAa,KAA2B,eAA8C;CACpG,YAAY;CACZ,sBAAsB,kBAAkB,QAAQ,KAAA,IAAY,iBAAiB,KAAA;CAC7E,SAAS;CAKT,MAAM,YAAY;CAElB,aAAa;EACX,YAAY;EACZ,IAAI,kBAAkB,aAAa,aAAa,MAAM;GACpD,gBAAgB;GAChB,UAAU;EACZ;CACF;AACF;AAGA,IAAI,OAAO,WAAW,aAEpB,OAAgB,kBAAkB,OAAgB,kBAAkB;CAClE,SAAS;EACP,IAAI;GACF,aAAa,QAAQ,cAAc,MAAM;EAC3C,QAAQ,CAAC;EACT,SAAS;EACT,QAAQ,IAAI,gEAAgE;CAC9E;CACA,UAAU;EACR,IAAI;GACF,aAAa,QAAQ,cAAc,OAAO;EAC5C,QAAQ,CAAC;EACT,IAAI,eAAe;GACjB,cAAc;GACd,gBAAgB;EAClB;EACA,QAAQ,IAAI,2BAA2B;CACzC;CACA,QAAQ;EACN,IAAI;GACF,aAAa,WAAW,YAAY;EACtC,QAAQ,CAAC;EACT,IAAI,WAAW,GACb,SAAS;OACJ,IAAI,eAAe;GACxB,cAAc;GACd,gBAAgB;EAClB;EACA,QAAQ,IAAI,6FAA6F;CAC3G;AACF"}

package/dist/esm/generated/env.js CHANGED Viewed

@@ -61,7 +61,7 @@ const envVars = {
 		return (typeof process !== "undefined" ? process.env.NODE_ENV : void 0) || import.meta.env?.NODE_ENV || void 0;
 	}
 };
 //#endregion
 export { envVars };
 //# sourceMappingURL=env.js.map