npm - @hexclave/js - Versions diffs - 1.0.2 → 1.0.5 - Mend

@hexclave/js 1.0.2 → 1.0.5

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

package/dist/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, INSTEAD 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 .stack-devtool scope to avoid conflicts with host app styles\n\nexport const devToolCSS = `\n .stack-devtool {\n --sdt-bg: #0a0a0b;\n --sdt-bg-elevated: #141416;\n --sdt-bg-hover: #1c1c1f;\n --sdt-bg-active: #232326;\n --sdt-bg-subtle: #111113;\n --sdt-border: #2a2a2e;\n --sdt-border-subtle: #1e1e22;\n --sdt-text: #ececef;\n --sdt-text-secondary: #8b8b93;\n --sdt-text-tertiary: #5c5c66;\n --sdt-accent: #6366f1;\n --sdt-accent-hover: #818cf8;\n --sdt-accent-muted: rgba(99, 102, 241, 0.15);\n --sdt-success: #22c55e;\n --sdt-success-muted: rgba(34, 197, 94, 0.15);\n --sdt-warning: #eab308;\n --sdt-warning-muted: rgba(234, 179, 8, 0.15);\n --sdt-error: #ef4444;\n --sdt-error-muted: rgba(239, 68, 68, 0.15);\n --sdt-info: #3b82f6;\n --sdt-info-muted: rgba(59, 130, 246, 0.15);\n --sdt-overlay-bg: rgba(17, 17, 19, 0.92);\n --sdt-radius: 8px;\n --sdt-radius-sm: 4px;\n --sdt-radius-lg: 12px;\n --sdt-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n --sdt-font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;\n --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);\n --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);\n\n all: initial;\n font-family: var(--sdt-font);\n color: var(--sdt-text);\n font-size: 13px;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n box-sizing: border-box;\n }\n\n .stack-devtool , .stack-devtool ::before, .stack-devtool ::after {\n box-sizing: border-box;\n }\n\n / Trigger pill /\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-trigger:active {\n cursor: grabbing;\n }\n\n .stack-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 .stack-devtool .sdt-panel {\n position: fixed;\n bottom: 60px;\n right: 16px;\n z-index: 99998;\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 .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-panel-fullscreen .sdt-panel-inner {\n border-radius: 0;\n }\n\n .stack-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 .stack-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 .stack-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 }\n\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-tab:hover {\n color: var(--sdt-text);\n }\n\n .stack-devtool .sdt-tab[data-active=\"true\"] {\n color: var(--sdt-text);\n }\n\n .stack-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 .stack-devtool .sdt-tabbar-spacer {\n flex: 1;\n }\n\n .stack-devtool .sdt-tabbar-actions {\n display: flex;\n align-items: center;\n gap: 4px;\n flex-shrink: 0;\n }\n\n .stack-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 .stack-devtool .sdt-docs-link:hover {\n color: var(--sdt-text);\n background: var(--sdt-bg-hover);\n }\n\n .stack-devtool .sdt-docs-link-icon {\n display: flex;\n width: 13px;\n height: 13px;\n line-height: 0;\n }\n\n .stack-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 .stack-devtool .sdt-close-btn:hover {\n color: var(--sdt-text);\n background: var(--sdt-bg-hover);\n }\n\n / Tab content area /\n .stack-devtool .sdt-content {\n flex: 1;\n position: relative;\n overflow: hidden;\n min-height: 0;\n }\n\n .stack-devtool .sdt-panel-fullscreen .sdt-content {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n }\n\n .stack-devtool .sdt-tab-layers {\n position: absolute;\n inset: 0;\n }\n\n .stack-devtool .sdt-tab-pane {\n position: absolute;\n inset: 0;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 16px;\n visibility: hidden;\n pointer-events: none;\n }\n\n .stack-devtool .sdt-tab-pane-iframe {\n padding: 0;\n overflow: hidden;\n }\n\n .stack-devtool .sdt-tab-pane-active {\n visibility: visible;\n pointer-events: auto;\n animation: sdt-tab-fade-in 0.15s ease-out;\n }\n\n @keyframes sdt-tab-fade-in {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .stack-devtool .sdt-tab-pane::-webkit-scrollbar {\n width: 6px;\n }\n\n .stack-devtool .sdt-tab-pane::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .stack-devtool .sdt-tab-pane::-webkit-scrollbar-thumb {\n background: var(--sdt-border);\n border-radius: 3px;\n }\n\n / ===== Overview tab — single column ===== /\n\n .stack-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 .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-ov-user-row {\n display: flex;\n align-items: center;\n gap: 14px;\n margin-bottom: 14px;\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-ov-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n }\n\n .stack-devtool .sdt-ov-user-meta {\n min-width: 0;\n flex: 1;\n }\n\n .stack-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 .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-ov-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 4px;\n }\n\n .stack-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 .stack-devtool .sdt-ov-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n .stack-devtool .sdt-ov-btn-primary {\n background: var(--sdt-accent);\n color: #fff;\n }\n .stack-devtool .sdt-ov-btn-primary:hover { background: var(--sdt-accent-hover); }\n\n .stack-devtool .sdt-ov-btn-secondary {\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n }\n .stack-devtool .sdt-ov-btn-secondary:hover { background: var(--sdt-bg-active); }\n\n .stack-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 .stack-devtool .sdt-ov-btn-danger:hover { background: rgba(239, 68, 68, 0.2); }\n\n .stack-devtool .sdt-ov-btn-wide { flex: 1; }\n\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-ov-email-input input::placeholder { color: var(--sdt-text-tertiary); }\n .stack-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 .stack-devtool .sdt-ov-email-input button:hover { background: var(--sdt-accent-muted); }\n .stack-devtool .sdt-ov-email-input button:disabled { opacity: 0.3; cursor: not-allowed; }\n\n .stack-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 .stack-devtool .sdt-ov-toast-success { background: var(--sdt-success-muted); color: var(--sdt-success); }\n .stack-devtool .sdt-ov-toast-error { background: var(--sdt-error-muted); color: var(--sdt-error); }\n\n / --- Auth methods card --- /\n .stack-devtool .sdt-ov-card-auth {\n padding: 14px 16px;\n }\n\n .stack-devtool .sdt-ov-auth-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-ov-method-off {\n color: var(--sdt-text-tertiary);\n opacity: 0.5;\n border-style: dashed;\n }\n\n .stack-devtool .sdt-ov-method-oauth {\n text-transform: capitalize;\n }\n\n .stack-devtool .sdt-ov-method-warn {\n color: var(--sdt-warning);\n border-color: rgba(234, 179, 8, 0.2);\n }\n\n .stack-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 .stack-devtool .sdt-ov-card-checks {\n padding: 14px 16px;\n border-color: rgba(234, 179, 8, 0.25);\n }\n\n .stack-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 .stack-devtool .sdt-ov-checks-badge {\n font-size: 10px;\n font-weight: 700;\n padding: 1px 6px;\n border-radius: 4px;\n }\n\n .stack-devtool .sdt-ov-checks-badge-ok {\n background: var(--sdt-success-muted);\n color: var(--sdt-success);\n }\n\n .stack-devtool .sdt-ov-checks-badge-warn {\n background: var(--sdt-warning-muted);\n color: var(--sdt-warning);\n }\n\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-ov-setup-row:last-child { border-bottom: none; }\n\n .stack-devtool .sdt-ov-setup-dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n\n .stack-devtool .sdt-ov-setup-dot-ok { background: var(--sdt-success); }\n .stack-devtool .sdt-ov-setup-dot-warn { background: var(--sdt-warning); }\n\n .stack-devtool .sdt-ov-setup-label {\n color: var(--sdt-text);\n font-size: 12px;\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-badge-success { background: var(--sdt-success-muted); color: var(--sdt-success); }\n .stack-devtool .sdt-badge-warning { background: var(--sdt-warning-muted); color: var(--sdt-warning); }\n .stack-devtool .sdt-badge-error { background: var(--sdt-error-muted); color: var(--sdt-error); }\n .stack-devtool .sdt-badge-info { background: var(--sdt-info-muted); color: var(--sdt-info); }\n\n / ===== Components / Pages tab ===== /\n\n .stack-devtool .sdt-pg-layout {\n display: flex;\n height: calc(100% + 32px);\n margin: -16px;\n }\n\n / --- Sidebar --- /\n .stack-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 .stack-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 .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-pg-list {\n flex: 1;\n overflow-y: auto;\n padding: 0 6px 6px;\n }\n\n / --- List item --- /\n .stack-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 .stack-devtool .sdt-pg-item:hover {\n background: var(--sdt-bg-hover);\n }\n\n .stack-devtool .sdt-pg-item[data-selected=\"true\"] {\n background: var(--sdt-accent-muted);\n }\n\n .stack-devtool .sdt-pg-item[data-selected=\"true\"] .sdt-pg-item-label {\n color: var(--sdt-accent-hover);\n font-weight: 600;\n }\n\n .stack-devtool .sdt-pg-item-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n .stack-devtool .sdt-pg-item-dot-handler { background: var(--sdt-info); }\n .stack-devtool .sdt-pg-item-dot-custom { background: var(--sdt-success); }\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-pg-badge-outdated { background: var(--sdt-warning-muted); color: var(--sdt-warning); }\n\n / --- Empty state --- /\n .stack-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 .stack-devtool .sdt-pg-empty-icon {\n color: var(--sdt-text-tertiary);\n opacity: 0.35;\n margin-bottom: 4px;\n }\n\n .stack-devtool .sdt-pg-empty-text {\n font-size: 14px;\n font-weight: 600;\n color: var(--sdt-text-secondary);\n }\n\n .stack-devtool .sdt-pg-empty-sub {\n font-size: 12px;\n color: var(--sdt-text-tertiary);\n }\n\n / --- Main panel --- /\n .stack-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 .stack-devtool .sdt-pg-detail {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n / Header /\n .stack-devtool .sdt-pg-header {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .stack-devtool .sdt-pg-header-top {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n }\n\n .stack-devtool .sdt-pg-title {\n font-size: 15px;\n font-weight: 700;\n margin: 0;\n color: var(--sdt-text);\n }\n\n .stack-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 .stack-devtool .sdt-pg-title-url:hover {\n color: var(--sdt-accent);\n }\n\n .stack-devtool .sdt-pg-subtitle {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n line-height: 1.4;\n }\n\n .stack-devtool .sdt-pg-code-inline {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 4px;\n }\n\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-pg-open-btn svg {\n flex-shrink: 0;\n }\n\n .stack-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 .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-pg-update-banner-body {\n flex: 1;\n min-width: 0;\n }\n\n .stack-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 .stack-devtool .sdt-pg-update-banner-text {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n line-height: 1.5;\n }\n\n .stack-devtool .sdt-pg-update-banner-text strong {\n color: var(--sdt-text);\n font-weight: 600;\n }\n\n / --- Sections (changelog, prompt) --- /\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-pg-section-warn .sdt-pg-section-label {\n color: var(--sdt-warning);\n }\n\n .stack-devtool .sdt-pg-section-footer {\n display: flex;\n margin-top: 8px;\n }\n\n / Changelog list /\n .stack-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 .stack-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 .stack-devtool .sdt-pg-changelog-bullet {\n flex-shrink: 0;\n font-size: 12px;\n line-height: 1.5;\n }\n\n / Pre block /\n .stack-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 .stack-devtool .sdt-preview-loading,\n .stack-devtool .sdt-preview-unavailable {\n font-size: 12px;\n color: var(--sdt-text-secondary);\n line-height: 1.5;\n }\n\n .stack-devtool .sdt-preview-error {\n font-size: 12px;\n color: var(--sdt-error);\n line-height: 1.5;\n }\n\n .stack-devtool .sdt-preview-code {\n font-family: var(--sdt-font-mono);\n font-size: 11px;\n color: var(--sdt-text);\n }\n\n .stack-devtool .sdt-props-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-props-table td:first-child {\n font-family: var(--sdt-font-mono);\n color: var(--sdt-accent-hover);\n }\n\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-panel-fullscreen .sdt-iframe-toolbar {\n top: 60px;\n right: 12px;\n }\n\n .stack-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 .stack-devtool .sdt-iframe-open-link:hover {\n color: var(--sdt-text);\n }\n\n .stack-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 .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-iframe-error-btn:hover {\n background: var(--sdt-accent-hover);\n }\n\n / Shared content fade animation /\n .stack-devtool .sdt-tab-content-fade {\n animation: sdt-tab-fade-in 0.15s ease-out;\n }\n\n / Console tab /\n .stack-devtool .sdt-console-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n }\n\n .stack-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 .stack-devtool .sdt-console-title {\n color: var(--sdt-text);\n font-size: 13px;\n font-weight: 600;\n }\n\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-console-action-btn svg {\n flex-shrink: 0;\n }\n\n .stack-devtool .sdt-console-log-scroll {\n flex: 1;\n min-height: 0;\n overflow: auto;\n }\n\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-console-tab:hover {\n color: var(--sdt-text);\n }\n\n .stack-devtool .sdt-console-tab[data-active=\"true\"] {\n color: var(--sdt-text);\n }\n\n .stack-devtool .sdt-log-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-log-time {\n color: var(--sdt-text-tertiary);\n flex-shrink: 0;\n font-size: 11px;\n }\n\n .stack-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 .stack-devtool .sdt-log-message {\n flex: 1;\n color: var(--sdt-text);\n word-break: break-all;\n }\n\n .stack-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 .stack-devtool .sdt-log-method-get {\n background: var(--sdt-info-muted);\n color: var(--sdt-info);\n }\n\n .stack-devtool .sdt-log-method-post {\n background: var(--sdt-success-muted);\n color: var(--sdt-success);\n }\n\n .stack-devtool .sdt-log-method-put, .stack-devtool .sdt-log-method-patch {\n background: var(--sdt-warning-muted);\n color: var(--sdt-warning);\n }\n\n .stack-devtool .sdt-log-method-delete {\n background: var(--sdt-error-muted);\n color: var(--sdt-error);\n }\n\n .stack-devtool .sdt-log-status {\n font-size: 11px;\n flex-shrink: 0;\n }\n\n .stack-devtool .sdt-log-status-ok {\n color: var(--sdt-success);\n }\n\n .stack-devtool .sdt-log-status-err {\n color: var(--sdt-error);\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-empty-state-icon {\n font-size: 24px;\n margin-bottom: 8px;\n opacity: 0.5;\n }\n\n / Config info table /\n .stack-devtool .sdt-config-table {\n width: 100%;\n border-collapse: collapse;\n }\n\n .stack-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 .stack-devtool .sdt-config-table td:first-child {\n color: var(--sdt-text-secondary);\n width: 160px;\n font-weight: 500;\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-config-table td .sdt-config-link:hover {\n color: var(--sdt-text);\n }\n\n .stack-devtool .sdt-config-muted {\n color: var(--sdt-text-tertiary);\n font-style: italic;\n }\n\n / Resize handle /\n .stack-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 .stack-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 .stack-devtool .sdt-resize-handle:hover::after,\n .stack-devtool .sdt-resize-handle:active::after {\n background: var(--sdt-accent);\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-resize-handle-top:hover::after,\n .stack-devtool .sdt-resize-handle-top:active::after {\n background: var(--sdt-accent);\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-resize-handle-corner:hover::after,\n .stack-devtool .sdt-resize-handle-corner:active::after {\n background: var(--sdt-accent);\n }\n\n .stack-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 .stack-devtool .sdt-support-tab {\n display: flex;\n flex-direction: column;\n height: calc(100% + 32px);\n margin: -16px;\n }\n\n .stack-devtool .sdt-support-feedback-pane {\n padding: 20px;\n height: 100%;\n overflow-y: auto;\n }\n\n / Form layout /\n .stack-devtool .sdt-support-form {\n display: flex;\n flex-direction: column;\n gap: 14px;\n }\n\n / Type cards /\n .stack-devtool .sdt-support-type-cards {\n display: flex;\n gap: 8px;\n }\n\n .stack-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 .stack-devtool .sdt-support-type-card svg {\n flex-shrink: 0;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n }\n\n .stack-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 .stack-devtool .sdt-support-type-card:hover svg {\n opacity: 1;\n }\n\n .stack-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 .stack-devtool .sdt-support-type-card-active svg {\n opacity: 1;\n color: var(--sdt-accent);\n }\n\n / Field group /\n .stack-devtool .sdt-support-field {\n display: flex;\n flex-direction: column;\n gap: 5px;\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-support-input,\n .stack-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 .stack-devtool .sdt-support-input::placeholder,\n .stack-devtool .sdt-support-textarea::placeholder {\n color: var(--sdt-text-tertiary);\n }\n\n .stack-devtool .sdt-support-input:focus,\n .stack-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 .stack-devtool .sdt-support-textarea {\n resize: vertical;\n min-height: 100px;\n line-height: 1.6;\n }\n\n / Submit button /\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-support-submit:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .stack-devtool .sdt-support-submit svg {\n flex-shrink: 0;\n }\n\n @keyframes sdt-spin {\n to { transform: rotate(360deg); }\n }\n\n .stack-devtool .sdt-support-spinner {\n animation: sdt-spin 1s linear infinite;\n }\n\n / Status screens (success / error) /\n .stack-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 .stack-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 .stack-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 .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-support-status-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--sdt-text);\n }\n\n .stack-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 .stack-devtool .sdt-support-channels {\n display: flex;\n gap: 8px;\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-support-channel svg {\n flex-shrink: 0;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n }\n\n .stack-devtool .sdt-support-channel:hover svg {\n opacity: 1;\n }\n\n / --- Light theme: system preference fallback --- /\n @media (prefers-color-scheme: light) {\n .stack-devtool {\n --sdt-bg: #ffffff;\n --sdt-bg-elevated: #f8f8fa;\n --sdt-bg-hover: #f0f0f3;\n --sdt-bg-active: #e8e8ec;\n --sdt-bg-subtle: #fafafa;\n --sdt-border: #e0e0e5;\n --sdt-border-subtle: #eaeaef;\n --sdt-text: #111113;\n --sdt-text-secondary: #6b6b73;\n --sdt-text-tertiary: #9b9ba3;\n --sdt-accent: #6366f1;\n --sdt-accent-hover: #4f46e5;\n --sdt-accent-muted: rgba(99, 102, 241, 0.1);\n --sdt-success: #16a34a;\n --sdt-success-muted: rgba(22, 163, 74, 0.1);\n --sdt-warning: #ca8a04;\n --sdt-warning-muted: rgba(202, 138, 4, 0.1);\n --sdt-error: #dc2626;\n --sdt-error-muted: rgba(220, 38, 38, 0.1);\n --sdt-info: #2563eb;\n --sdt-info-muted: rgba(37, 99, 235, 0.1);\n --sdt-overlay-bg: rgba(255, 255, 255, 0.92);\n --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);\n }\n }\n\n / Export dialog — positioned inside the dev tool panel /\n .stack-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 .stack-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 .stack-devtool .sdt-share-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .stack-devtool .sdt-share-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--sdt-text);\n }\n\n .stack-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 .stack-devtool .sdt-share-url-row {\n display: flex;\n gap: 6px;\n align-items: center;\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-share-copy-btn:hover {\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n }\n\n .stack-devtool .sdt-share-actions {\n display: flex;\n gap: 8px;\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-share-action-btn svg {\n flex-shrink: 0;\n opacity: 0.7;\n }\n\n .stack-devtool .sdt-share-action-btn:hover svg {\n opacity: 1;\n }\n\n .stack-devtool .sdt-share-action-btn-accent {\n background: var(--sdt-accent);\n border-color: var(--sdt-accent);\n color: white;\n }\n\n .stack-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 .stack-devtool .sdt-share-action-btn-accent svg {\n opacity: 1;\n }\n\n / --- AI Chat tab --- /\n\n .stack-devtool .sdt-ai-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n }\n\n .stack-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 .stack-devtool .sdt-ai-message-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n / --- Empty state --- /\n\n .stack-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 .stack-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 .stack-devtool .sdt-ai-empty-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--sdt-text);\n }\n\n .stack-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 .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-ai-suggestion-icon {\n font-size: 14px;\n flex-shrink: 0;\n }\n\n / --- Messages --- /\n\n .stack-devtool .sdt-ai-msg {\n display: flex;\n gap: 10px;\n align-items: flex-start;\n }\n\n .stack-devtool .sdt-ai-msg-user {\n justify-content: flex-end;\n }\n\n .stack-devtool .sdt-ai-msg-assistant {\n justify-content: flex-start;\n }\n\n .stack-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 .stack-devtool .sdt-ai-avatar-user {\n background: var(--sdt-info-muted);\n color: var(--sdt-info);\n order: 2;\n }\n\n .stack-devtool .sdt-ai-avatar-assistant {\n background: var(--sdt-accent-muted);\n color: var(--sdt-accent);\n }\n\n .stack-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 .stack-devtool .sdt-ai-bubble-user {\n background: var(--sdt-info-muted);\n border: 1px solid rgba(59, 130, 246, 0.1);\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-ai-thinking {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 0;\n }\n\n .stack-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 .stack-devtool .sdt-ai-thinking-dot:nth-child(2) { animation-delay: 0.15s; }\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-ai-paragraph:last-child { margin-bottom: 0; }\n\n .stack-devtool .sdt-ai-bold {\n font-weight: 600;\n color: var(--sdt-text);\n }\n\n .stack-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 .stack-devtool .sdt-ai-link {\n color: var(--sdt-info);\n text-decoration: none;\n transition: color 0.1s;\n }\n\n .stack-devtool .sdt-ai-link:hover {\n color: var(--sdt-accent-hover);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .stack-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 .stack-devtool .sdt-ai-heading:first-child { margin-top: 0; }\n\n .stack-devtool .sdt-ai-bubble-assistant h1.sdt-ai-heading { font-size: 15px; }\n .stack-devtool .sdt-ai-bubble-assistant h2.sdt-ai-heading { font-size: 13.5px; }\n .stack-devtool .sdt-ai-bubble-assistant h3.sdt-ai-heading { font-size: 13px; }\n\n .stack-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 .stack-devtool .sdt-ai-list:last-child { margin-bottom: 0; }\n\n .stack-devtool .sdt-ai-list li {\n margin-bottom: 3px;\n padding-left: 2px;\n }\n\n .stack-devtool .sdt-ai-list li::marker {\n color: var(--sdt-text-tertiary);\n }\n\n .stack-devtool .sdt-ai-list-ordered {\n list-style-type: decimal;\n }\n\n .stack-devtool .sdt-ai-tools {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin: 6px 0;\n }\n\n .stack-devtool .sdt-ai-part-text {\n margin: 6px 0;\n }\n\n .stack-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 .stack-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 .stack-devtool .sdt-ai-tool-header:hover {\n background: var(--sdt-bg-hover);\n }\n\n .stack-devtool .sdt-ai-tool-name {\n font-size: 12px;\n font-weight: 600;\n color: var(--sdt-text);\n flex: 1;\n }\n\n .stack-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 .stack-devtool .sdt-ai-tool-status-running { color: var(--sdt-warning); }\n .stack-devtool .sdt-ai-tool-status-success { color: var(--sdt-success); }\n .stack-devtool .sdt-ai-tool-status-error { color: var(--sdt-error); }\n\n .stack-devtool .sdt-ai-tool-chevron {\n color: var(--sdt-text-tertiary);\n font-size: 10px;\n transition: transform 0.15s ease;\n }\n\n .stack-devtool .sdt-ai-tool-chevron-open {\n transform: rotate(180deg);\n }\n\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-ai-tool-running {\n font-size: 11px;\n color: var(--sdt-text-secondary);\n }\n\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-ai-code-block:last-child { margin-bottom: 0; }\n\n .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-ai-copy-btn:hover {\n background: var(--sdt-bg-hover);\n color: var(--sdt-text);\n }\n\n .stack-devtool .sdt-ai-copy-btn-copied {\n color: var(--sdt-success) !important;\n }\n\n .stack-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 .stack-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 .stack-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 .stack-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 .stack-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 .stack-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 .stack-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 .stack-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 .stack-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 .stack-devtool .sdt-ai-input::placeholder {\n color: var(--sdt-text-tertiary);\n }\n\n .stack-devtool .sdt-ai-input:disabled {\n opacity: 0.5;\n }\n\n .stack-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 .stack-devtool .sdt-ai-send-btn-active {\n background: var(--sdt-accent);\n color: white;\n cursor: pointer;\n }\n\n .stack-devtool .sdt-ai-send-btn-active:hover {\n background: var(--sdt-accent-hover);\n }\n\n .stack-devtool .sdt-ai-stop-btn,\n .stack-devtool .sdt-ai-stop-btn:hover {\n background: var(--sdt-error);\n color: white;\n }\n\n / Accessible focus indicator for keyboard navigation /\n .stack-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 .stack-devtool .sdt-panel-inner,\n .stack-devtool .sdt-panel-exiting,\n .stack-devtool .sdt-tab-content,\n .stack-devtool .sdt-ov-pulse-dot,\n .stack-devtool .sdt-ov-skeleton-pill,\n .stack-devtool .sdt-support-spinner,\n .stack-devtool .sdt-ai-thinking-dot {\n animation: none !important;\n }\n\n .stack-devtool .sdt-tab-indicator,\n .stack-devtool .sdt-tab {\n transition: none !important;\n }\n }\n\n / --- Stack theme explicit overrides (take priority over system preference) --- */\n html:has(head > [data-stack-theme=\"light\"]) .stack-devtool {\n --sdt-bg: #ffffff;\n --sdt-bg-elevated: #f8f8fa;\n --sdt-bg-hover: #f0f0f3;\n --sdt-bg-active: #e8e8ec;\n --sdt-bg-subtle: #fafafa;\n --sdt-border: #e0e0e5;\n --sdt-border-subtle: #eaeaef;\n --sdt-text: #111113;\n --sdt-text-secondary: #6b6b73;\n --sdt-text-tertiary: #9b9ba3;\n --sdt-accent: #6366f1;\n --sdt-accent-hover: #4f46e5;\n --sdt-accent-muted: rgba(99, 102, 241, 0.1);\n --sdt-success: #16a34a;\n --sdt-success-muted: rgba(22, 163, 74, 0.1);\n --sdt-warning: #ca8a04;\n --sdt-warning-muted: rgba(202, 138, 4, 0.1);\n --sdt-error: #dc2626;\n --sdt-error-muted: rgba(220, 38, 38, 0.1);\n --sdt-info: #2563eb;\n --sdt-info-muted: rgba(37, 99, 235, 0.1);\n --sdt-overlay-bg: rgba(255, 255, 255, 0.92);\n --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);\n }\n\n html:has(head > [data-stack-theme=\"dark\"]) .stack-devtool {\n --sdt-bg: #0a0a0b;\n --sdt-bg-elevated: #141416;\n --sdt-bg-hover: #1c1c1f;\n --sdt-bg-active: #232326;\n --sdt-bg-subtle: #111113;\n --sdt-border: #2a2a2e;\n --sdt-border-subtle: #1e1e22;\n --sdt-text: #ececef;\n --sdt-text-secondary: #8b8b93;\n --sdt-text-tertiary: #5c5c66;\n --sdt-accent: #6366f1;\n --sdt-accent-hover: #818cf8;\n --sdt-accent-muted: rgba(99, 102, 241, 0.15);\n --sdt-success: #22c55e;\n --sdt-success-muted: rgba(34, 197, 94, 0.15);\n --sdt-warning: #eab308;\n --sdt-warning-muted: rgba(234, 179, 8, 0.15);\n --sdt-error: #ef4444;\n --sdt-error-muted: rgba(239, 68, 68, 0.15);\n --sdt-info: #3b82f6;\n --sdt-info-muted: rgba(59, 130, 246, 0.15);\n --sdt-overlay-bg: rgba(17, 17, 19, 0.92);\n --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);\n --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n`;\n"],"mappings":";;;AAQA,MAAa,aAAa"}
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\nexport const devToolCSS = `\n .hexclave-devtool {\n --sdt-bg: #0a0a0b;\n --sdt-bg-elevated: #141416;\n --sdt-bg-hover: #1c1c1f;\n --sdt-bg-active: #232326;\n --sdt-bg-subtle: #111113;\n --sdt-border: #2a2a2e;\n --sdt-border-subtle: #1e1e22;\n --sdt-text: #ececef;\n --sdt-text-secondary: #8b8b93;\n --sdt-text-tertiary: #5c5c66;\n --sdt-accent: #6366f1;\n --sdt-accent-hover: #818cf8;\n --sdt-accent-muted: rgba(99, 102, 241, 0.15);\n --sdt-success: #22c55e;\n --sdt-success-muted: rgba(34, 197, 94, 0.15);\n --sdt-warning: #eab308;\n --sdt-warning-muted: rgba(234, 179, 8, 0.15);\n --sdt-error: #ef4444;\n --sdt-error-muted: rgba(239, 68, 68, 0.15);\n --sdt-info: #3b82f6;\n --sdt-info-muted: rgba(59, 130, 246, 0.15);\n --sdt-overlay-bg: rgba(17, 17, 19, 0.92);\n --sdt-radius: 8px;\n --sdt-radius-sm: 4px;\n --sdt-radius-lg: 12px;\n --sdt-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n --sdt-font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;\n --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);\n --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);\n\n all: initial;\n font-family: var(--sdt-font);\n color: var(--sdt-text);\n font-size: 13px;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n box-sizing: border-box;\n }\n\n .hexclave-devtool , .hexclave-devtool ::before, .hexclave-devtool ::after {\n box-sizing: border-box;\n }\n\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: 99998;\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 }\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 display: flex;\n align-items: center;\n gap: 4px;\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 overflow-y: auto;\n overflow-x: hidden;\n padding: 16px;\n visibility: hidden;\n pointer-events: none;\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 visibility: visible;\n pointer-events: auto;\n animation: sdt-tab-fade-in 0.15s ease-out;\n }\n\n @keyframes sdt-tab-fade-in {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .hexclave-devtool .sdt-tab-pane::-webkit-scrollbar {\n width: 6px;\n }\n\n .hexclave-devtool .sdt-tab-pane::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .hexclave-devtool .sdt-tab-pane::-webkit-scrollbar-thumb {\n background: var(--sdt-border);\n border-radius: 3px;\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: system preference fallback --- /\n @media (prefers-color-scheme: light) {\n .hexclave-devtool {\n --sdt-bg: #ffffff;\n --sdt-bg-elevated: #f8f8fa;\n --sdt-bg-hover: #f0f0f3;\n --sdt-bg-active: #e8e8ec;\n --sdt-bg-subtle: #fafafa;\n --sdt-border: #e0e0e5;\n --sdt-border-subtle: #eaeaef;\n --sdt-text: #111113;\n --sdt-text-secondary: #6b6b73;\n --sdt-text-tertiary: #9b9ba3;\n --sdt-accent: #6366f1;\n --sdt-accent-hover: #4f46e5;\n --sdt-accent-muted: rgba(99, 102, 241, 0.1);\n --sdt-success: #16a34a;\n --sdt-success-muted: rgba(22, 163, 74, 0.1);\n --sdt-warning: #ca8a04;\n --sdt-warning-muted: rgba(202, 138, 4, 0.1);\n --sdt-error: #dc2626;\n --sdt-error-muted: rgba(220, 38, 38, 0.1);\n --sdt-info: #2563eb;\n --sdt-info-muted: rgba(37, 99, 235, 0.1);\n --sdt-overlay-bg: rgba(255, 255, 255, 0.92);\n --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);\n }\n }\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 / --- Stack theme explicit overrides (take priority over system preference) --- */\n html:has(head > [data-stack-theme=\"light\"]) .hexclave-devtool {\n --sdt-bg: #ffffff;\n --sdt-bg-elevated: #f8f8fa;\n --sdt-bg-hover: #f0f0f3;\n --sdt-bg-active: #e8e8ec;\n --sdt-bg-subtle: #fafafa;\n --sdt-border: #e0e0e5;\n --sdt-border-subtle: #eaeaef;\n --sdt-text: #111113;\n --sdt-text-secondary: #6b6b73;\n --sdt-text-tertiary: #9b9ba3;\n --sdt-accent: #6366f1;\n --sdt-accent-hover: #4f46e5;\n --sdt-accent-muted: rgba(99, 102, 241, 0.1);\n --sdt-success: #16a34a;\n --sdt-success-muted: rgba(22, 163, 74, 0.1);\n --sdt-warning: #ca8a04;\n --sdt-warning-muted: rgba(202, 138, 4, 0.1);\n --sdt-error: #dc2626;\n --sdt-error-muted: rgba(220, 38, 38, 0.1);\n --sdt-info: #2563eb;\n --sdt-info-muted: rgba(37, 99, 235, 0.1);\n --sdt-overlay-bg: rgba(255, 255, 255, 0.92);\n --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);\n }\n\n html:has(head > [data-stack-theme=\"dark\"]) .hexclave-devtool {\n --sdt-bg: #0a0a0b;\n --sdt-bg-elevated: #141416;\n --sdt-bg-hover: #1c1c1f;\n --sdt-bg-active: #232326;\n --sdt-bg-subtle: #111113;\n --sdt-border: #2a2a2e;\n --sdt-border-subtle: #1e1e22;\n --sdt-text: #ececef;\n --sdt-text-secondary: #8b8b93;\n --sdt-text-tertiary: #5c5c66;\n --sdt-accent: #6366f1;\n --sdt-accent-hover: #818cf8;\n --sdt-accent-muted: rgba(99, 102, 241, 0.15);\n --sdt-success: #22c55e;\n --sdt-success-muted: rgba(34, 197, 94, 0.15);\n --sdt-warning: #eab308;\n --sdt-warning-muted: rgba(234, 179, 8, 0.15);\n --sdt-error: #ef4444;\n --sdt-error-muted: rgba(239, 68, 68, 0.15);\n --sdt-info: #3b82f6;\n --sdt-info-muted: rgba(59, 130, 246, 0.15);\n --sdt-overlay-bg: rgba(17, 17, 19, 0.92);\n --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);\n --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n`;\n"],"mappings":";;;AAQA,MAAa,aAAa"}

package/dist/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, ~~INSTEAD~~ 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,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"}

package/dist/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, ~~INSTEAD~~ 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;qBAEpC,yBAAyB;AAChC,gBAAG,4EAA4E;AAE7E,oFAD6C;GAAE,MAAM;GAAK,KAAK;GAAK,EAAE,aAAa,SAAS,CAC3E,CAAC,QAAQ,EAAE,QAAQ,gBAAgB,CAAC;GACrD;AAEF,gBAAG,oEAAoE;AAErE,oFAD6C;GAAE,MAAM;GAAI,KAAK;GAAI,EAAE,aAAa,SAAS,CACzE,CAAC,QAAQ,EAAE,QAAQ,YAAY,CAAC;GACjD;AAEF,gBAAG,sEAAsE;AAEvE,oFAD6C;GAAE,MAAM;GAAK,KAAK;GAAI,EAAE,aAAa,SAAS,CAC1E,CAAC,QAAQ,EAAE,QAAQ,aAAa,CAAC;GAClD;AAEF,gBAAG,0EAA0E;AAE3E,oFAD6C;GAAE,MAAM;GAAI,KAAK;GAAK,EAAE,aAAa,SAAS,CAC1E,CAAC,QAAQ,EAAE,QAAQ,eAAe,CAAC;GACpD;EACF;qBAEO,oCAAoC;AAC3C,gBAAG,qEAAqE;AAEtE,gFADmC,EAAE,QAAQ,gBAAgB,EAAE,aAAa,SAAS,CAC1E,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;GAAe,CAAC;GACjE;AAEF,gBAAG,6DAA6D;AAE9D,gFADmC,EAAE,QAAQ,YAAY,EAAE,aAAa,SAAS,CACtE,CAAC,QAAQ;GAAE,MAAM;GAAI,KAAK;GAAI,CAAC;GAC1C;AAEF,gBAAG,+DAA+D;AAEhE,gFADmC,EAAE,QAAQ,aAAa,EAAE,aAAa,SAAS,CACvE,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;GAAI,CAAC;GACtD;AAEF,gBAAG,mEAAmE;AAEpE,gFADmC,EAAE,QAAQ,eAAe,EAAE,aAAa,SAAS,CACzE,CAAC,QAAQ;GAAE,MAAM;GAAI,KAAK;GAAe,CAAC;GACrD;AAEF,gBAAG,uDAAuD;EACxD,MAAM,iEAA6B,EAAE,QAAQ,YAAY,EAAE,aAAa,SAAS;AACjF,qBAAO,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI;GAC9B;AAEF,gBAAG,8FAA8F;AAG/F,gFADmC,EAAE,QAAQ,gBAAgB,EAAE,aAD1C;GAAE,OAAO;GAAI,QAAQ;GAAI,CAC2C,CAC9E,CAAC,QAAQ;GAAE,MAAM;GAAG,KAAK;GAAG,CAAC;GACxC;EACF;qBAEO,kCAAkC;AACzC,gBAAG,iFAAiF;AAGlF,gFAFkB,EAAE,QAAQ,gBAAgB,EACG,aAAa;GAAE,OAAO;GAAK,QAAQ;GAAK,CAAC,CAC5E,CAAC,QAAQ;GAAE,MAAM;GAAe,KAAK;GAAe,CAAC;GACjE;AAEF,gBAAG,+EAA+E;AAGhF,gFAFkB,EAAE,QAAQ,gBAAgB,EACG,aAAa;GAAE,OAAO;GAAM,QAAQ;GAAK,CAAC,CAC7E,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;GAAe,CAAC;GAClE;AAEF,gBAAG,yEAAyE;EAC1E,MAAM,YAAY,EAAE,QAAQ,aAAa;AACzC,OAAK,MAAM,MAAM;GAAC;GAAK;GAAK;GAAM;GAAK,EAAE;GACvC,MAAM,iEAA6B,WAAW,aAAa;IAAE,OAAO;IAAI,QAAQ;IAAK,CAAC;AACtF,sBAAO,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,GAAG;AACnC,sBAAO,IAAI,IAAI,CAAC,KAAK,GAAG;;GAE1B;AAEF,gBAAG,gEAAgE;EAEjE,MAAM,2EAAuC;GAAE,MAAM;GAAK,KAAK;GAAK,EAAE,aAAa,SAAS;AAC5F,qBAAO,UAAU,OAAO,CAAC,KAAK,eAAe;EAG7C,MAAM,qEAAiC,WAAW,aAAa;GAAE,OAAO;GAAK,QAAQ;GAAK,CAAC;AAC3F,qBAAO,QAAQ,KAAK,CAAC,KAAK,IAAc;AACxC,qBAAO,QAAQ,IAAI,CAAC,KAAK,IAAc;GACvC;EACF;qBAEO,8BAA8B;AACrC,gBAAG,+CAA+C;AAChD,8EAA4B;GAAE,MAAM;GAAK,KAAK;GAAK,EAAE,aAAa,SAAS,CAAC,CAAC,QAAQ;GAAE,MAAM;GAAG,KAAK;GAAG,CAAC;AACzG,8EAA4B;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,gBAAG,mDAAmD;EACpD,MAAM,MAAM;GAAE,MAAM;GAAK,KAAK;GAAK;AACnC,8EAA4B,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;CAAI;AAC7C,MAAM,WAAW;CAAE,OAAO;CAAM,QAAQ;CAAK;qBAEpC,yBAAyB;AAChC,gBAAG,4EAA4E;AAE7E,oFAD6C;GAAE,MAAM;GAAK,KAAK;GAAK,EAAE,aAAa,SAAS,CAC3E,CAAC,QAAQ,EAAE,QAAQ,gBAAgB,CAAC;GACrD;AAEF,gBAAG,oEAAoE;AAErE,oFAD6C;GAAE,MAAM;GAAI,KAAK;GAAI,EAAE,aAAa,SAAS,CACzE,CAAC,QAAQ,EAAE,QAAQ,YAAY,CAAC;GACjD;AAEF,gBAAG,sEAAsE;AAEvE,oFAD6C;GAAE,MAAM;GAAK,KAAK;GAAI,EAAE,aAAa,SAAS,CAC1E,CAAC,QAAQ,EAAE,QAAQ,aAAa,CAAC;GAClD;AAEF,gBAAG,0EAA0E;AAE3E,oFAD6C;GAAE,MAAM;GAAI,KAAK;GAAK,EAAE,aAAa,SAAS,CAC1E,CAAC,QAAQ,EAAE,QAAQ,eAAe,CAAC;GACpD;EACF;qBAEO,oCAAoC;AAC3C,gBAAG,qEAAqE;AAEtE,gFADmC,EAAE,QAAQ,gBAAgB,EAAE,aAAa,SAAS,CAC1E,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;GAAe,CAAC;GACjE;AAEF,gBAAG,6DAA6D;AAE9D,gFADmC,EAAE,QAAQ,YAAY,EAAE,aAAa,SAAS,CACtE,CAAC,QAAQ;GAAE,MAAM;GAAI,KAAK;GAAI,CAAC;GAC1C;AAEF,gBAAG,+DAA+D;AAEhE,gFADmC,EAAE,QAAQ,aAAa,EAAE,aAAa,SAAS,CACvE,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;GAAI,CAAC;GACtD;AAEF,gBAAG,mEAAmE;AAEpE,gFADmC,EAAE,QAAQ,eAAe,EAAE,aAAa,SAAS,CACzE,CAAC,QAAQ;GAAE,MAAM;GAAI,KAAK;GAAe,CAAC;GACrD;AAEF,gBAAG,uDAAuD;EACxD,MAAM,iEAA6B,EAAE,QAAQ,YAAY,EAAE,aAAa,SAAS;AACjF,qBAAO,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI;GAC9B;AAEF,gBAAG,8FAA8F;AAG/F,gFADmC,EAAE,QAAQ,gBAAgB,EAAE,aAD1C;GAAE,OAAO;GAAI,QAAQ;GAAI,CAC2C,CAC9E,CAAC,QAAQ;GAAE,MAAM;GAAG,KAAK;GAAG,CAAC;GACxC;EACF;qBAEO,kCAAkC;AACzC,gBAAG,iFAAiF;AAGlF,gFAFkB,EAAE,QAAQ,gBAAgB,EACG,aAAa;GAAE,OAAO;GAAK,QAAQ;GAAK,CAAC,CAC5E,CAAC,QAAQ;GAAE,MAAM;GAAe,KAAK;GAAe,CAAC;GACjE;AAEF,gBAAG,+EAA+E;AAGhF,gFAFkB,EAAE,QAAQ,gBAAgB,EACG,aAAa;GAAE,OAAO;GAAM,QAAQ;GAAK,CAAC,CAC7E,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;GAAe,CAAC;GAClE;AAEF,gBAAG,yEAAyE;EAC1E,MAAM,YAAY,EAAE,QAAQ,aAAa;AACzC,OAAK,MAAM,MAAM;GAAC;GAAK;GAAK;GAAM;GAAK,EAAE;GACvC,MAAM,iEAA6B,WAAW,aAAa;IAAE,OAAO;IAAI,QAAQ;IAAK,CAAC;AACtF,sBAAO,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,GAAG;AACnC,sBAAO,IAAI,IAAI,CAAC,KAAK,GAAG;;GAE1B;AAEF,gBAAG,gEAAgE;EAEjE,MAAM,2EAAuC;GAAE,MAAM;GAAK,KAAK;GAAK,EAAE,aAAa,SAAS;AAC5F,qBAAO,UAAU,OAAO,CAAC,KAAK,eAAe;EAG7C,MAAM,qEAAiC,WAAW,aAAa;GAAE,OAAO;GAAK,QAAQ;GAAK,CAAC;AAC3F,qBAAO,QAAQ,KAAK,CAAC,KAAK,IAAc;AACxC,qBAAO,QAAQ,IAAI,CAAC,KAAK,IAAc;GACvC;EACF;qBAEO,8BAA8B;AACrC,gBAAG,+CAA+C;AAChD,8EAA4B;GAAE,MAAM;GAAK,KAAK;GAAK,EAAE,aAAa,SAAS,CAAC,CAAC,QAAQ;GAAE,MAAM;GAAG,KAAK;GAAG,CAAC;AACzG,8EAA4B;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,gBAAG,mDAAmD;EACpD,MAAM,MAAM;GAAE,MAAM;GAAK,KAAK;GAAK;AACnC,8EAA4B,KAAK,aAAa,SAAS,CAAC,CAAC,QAAQ,IAAI;GACrE;EACF"}

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

@@ -1,4 +1,4 @@
-import { StackClientApp } from "../lib/stack-app/apps/interfaces/client-app.js";
+import { StackClientApp } from "../lib/hexclave-app/apps/interfaces/client-app.js";
 //#region src/dev-tool/index.d.ts
 /**
@@ -9,9 +9,9 @@ import { StackClientApp } from "../lib/stack-app/apps/interfaces/client-app.js";
  * - Returns a cleanup function to unmount
  *
  * Console commands (also work in production):
- *   StackDevTool.enable()  — force-show the dev tool
- *   StackDevTool.disable() — force-hide the dev tool
- *   StackDevTool.reset()   — revert to default (localhost-only)
+ *   HexclaveDevTool.enable()  — force-show the dev tool
+ *   HexclaveDevTool.disable() — force-hide the dev tool
+ *   HexclaveDevTool.reset()   — revert to default (localhost-only)
  */
 declare function mountDevTool(app: StackClientApp<true>): () => void;
 //#endregion

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

@@ -67,9 +67,9 @@ function tryMount() {
 * - Returns a cleanup function to unmount
 *
 * Console commands (also work in production):
-*   StackDevTool.enable()  — force-show the dev tool
-*   StackDevTool.disable() — force-hide the dev tool
-*   StackDevTool.reset()   — revert to default (localhost-only)
+*   HexclaveDevTool.enable()  — force-show the dev tool
+*   HexclaveDevTool.disable() — force-hide the dev tool
+*   HexclaveDevTool.reset()   — revert to default (localhost-only)
 */
 function mountDevTool(app) {
 	activeApp = app;
@@ -83,7 +83,7 @@ function mountDevTool(app) {
 		}
 	};
 }
-if (typeof window !== "undefined") window.HexclaveDevTool = window.StackDevTool = {
+if (typeof window !== "undefined") window.HexclaveDevTool = window.HexclaveDevTool = {
 	enable() {
 		try {
 			localStorage.setItem(OVERRIDE_KEY, "true");

package/dist/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, ~~INSTEAD~~ EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport type { StackClientApp } from \"../lib/~~stack~~-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 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 hasAppendChild(value: unknown): value is { appendChild(node: Node): void } {\n return typeof value === 'object' && value !== null && typeof Reflect.get(value, 'appendChild') === 'function';\n}\n\nfunction canMountIntoDom(): boolean {\n if (typeof window === 'undefined' \|\| typeof document === 'undefined') {\n return false;\n }\n if (typeof document.createElement !== 'function') {\n return false;\n }\n return hasAppendChild(Reflect.get(document, 'body'));\n}\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\nfunction shouldShow(): boolean {\n const override = getOverride();\n if (override !== null) return override;\n if (!canMountIntoDom()) return false;\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 - Only renders on localhost (or when overridden via console)\n * - Lazily loads the dev tool UI via dynamic import\n * - Returns a cleanup function to unmount\n \n Console commands (also work in production):\n * ~~StackDevTool~~.enable() — force-show the dev tool\n * ~~StackDevTool~~.disable() — force-hide the dev tool\n * ~~StackDevTool~~.reset() — revert to default (localhost-only)\n */\nexport function mountDevTool(app: StackClientApp<true>): () => void {\n activeApp = app;\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: ~~StackDevTool~~.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).~~StackDevTool~~ = {\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 (visible on localhost only).');\n },\n };\n}\n\n"],"mappings":";;;;;;;AAYA,MAAM,eAAe;AAErB,SAAS,eAAe,OAA4D;AAClF,QAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,OAAO,QAAQ,IAAI,OAAO,cAAc,KAAK;;AAGrG,SAAS,kBAA2B;AAClC,KAAI,OAAO,WAAW,eAAe,OAAO,aAAa,YACvD,QAAO;AAET,KAAI,OAAO,SAAS,kBAAkB,WACpC,QAAO;AAET,QAAO,eAAe,QAAQ,IAAI,UAAU,OAAO,CAAC;;AAGtD,SAAS,cAA8B;AACrC,KAAI;EACF,MAAM,MAAM,aAAa,QAAQ,aAAa;AAC9C,MAAI,QAAQ,OAAQ,QAAO;AAC3B,MAAI,QAAQ,QAAS,QAAO;SACtB;AACR,QAAO;;AAGT,SAAS,aAAsB;CAC7B,MAAM,WAAW,aAAa;AAC9B,KAAI,aAAa,KAAM,QAAO;AAC9B,KAAI,CAAC,iBAAiB,CAAE,QAAO;AAC/B,0DAAmB,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,6DAAkB,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,wDAAa,kBAAkB,MAAM;;EAExC,CAAC;;;;;;;;;;;;;;AAeJ,SAAgB,aAAa,KAAuC;AAClE,aAAY;AACZ,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,~~eAAe~~;~~CAC/D~~,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,gEAAgE;;CAE/E"}
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 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 hasAppendChild(value: unknown): value is { appendChild(node: Node): void } {\n return typeof value === 'object' && value !== null && typeof Reflect.get(value, 'appendChild') === 'function';\n}\n\nfunction canMountIntoDom(): boolean {\n if (typeof window === 'undefined' \|\| typeof document === 'undefined') {\n return false;\n }\n if (typeof document.createElement !== 'function') {\n return false;\n }\n return hasAppendChild(Reflect.get(document, 'body'));\n}\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\nfunction shouldShow(): boolean {\n const override = getOverride();\n if (override !== null) return override;\n if (!canMountIntoDom()) return false;\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 - Only renders on localhost (or when overridden via console)\n * - Lazily loads the dev tool UI via dynamic import\n * - Returns a cleanup function to unmount\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 default (localhost-only)\n */\nexport function mountDevTool(app: StackClientApp<true>): () => void {\n activeApp = app;\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 (visible on localhost only).');\n },\n };\n}\n\n"],"mappings":";;;;;;;AAYA,MAAM,eAAe;AAErB,SAAS,eAAe,OAA4D;AAClF,QAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,OAAO,QAAQ,IAAI,OAAO,cAAc,KAAK;;AAGrG,SAAS,kBAA2B;AAClC,KAAI,OAAO,WAAW,eAAe,OAAO,aAAa,YACvD,QAAO;AAET,KAAI,OAAO,SAAS,kBAAkB,WACpC,QAAO;AAET,QAAO,eAAe,QAAQ,IAAI,UAAU,OAAO,CAAC;;AAGtD,SAAS,cAA8B;AACrC,KAAI;EACF,MAAM,MAAM,aAAa,QAAQ,aAAa;AAC9C,MAAI,QAAQ,OAAQ,QAAO;AAC3B,MAAI,QAAQ,QAAS,QAAO;SACtB;AACR,QAAO;;AAGT,SAAS,aAAsB;CAC7B,MAAM,WAAW,aAAa;AAC9B,KAAI,aAAa,KAAM,QAAO;AAC9B,KAAI,CAAC,iBAAiB,CAAE,QAAO;AAC/B,0DAAmB,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,6DAAkB,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,wDAAa,kBAAkB,MAAM;;EAExC,CAAC;;;;;;;;;;;;;;AAeJ,SAAgB,aAAa,KAAuC;AAClE,aAAY;AACZ,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,gEAAgE;;CAE/E"}

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

@@ -1,4 +1,4 @@
-import { StackClientApp } from "../lib/stack-app";
+import { StackClientApp } from "../lib/hexclave-app";
 //#region src/dev-tool/dev-tool-core.d.ts
 declare function createDevTool(app: StackClientApp<true>): () => void;

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

@@ -1,9 +1,9 @@
 import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
 import { isLocalhost } from "@hexclave/shared/dist/utils/urls";
 import { envVars } from "../lib/env.js";
-import { getBaseUrl } from "../lib/stack-app/apps/implementations/common.js";
-import { stackAppInternalsSymbol } from "../lib/stack-app/common.js";
-import { getPagePrompt } from "../lib/stack-app/url-targets.js";
+import { getBaseUrl } from "../lib/hexclave-app/apps/implementations/common.js";
+import { hexclaveAppInternalsSymbol } from "../lib/hexclave-app/common.js";
+import { getPagePrompt } from "../lib/hexclave-app/url-targets.js";
 import { devToolCSS } from "./dev-tool-styles.js";
 import { clampTriggerPosition, getSnappedTriggerPlacement, resolveTriggerPosition } from "./dev-tool-trigger-position.js";
@@ -146,7 +146,7 @@ function nextId() {
 	return `sdt-${++_idCounter}-${Date.now()}`;
 }
 function resolveApiBaseUrl(app) {
-	return getBaseUrl(app[stackAppInternalsSymbol].getConstructorOptions().baseUrl);
+	return getBaseUrl(app[hexclaveAppInternalsSymbol].getConstructorOptions().baseUrl);
 }
 function shouldShowDashboardTab(app) {
 	return envVars.NEXT_PUBLIC_STACK_IS_LOCAL_EMULATOR === "true" && isLocalhost(resolveApiBaseUrl(app));
@@ -940,7 +940,7 @@ function createConsoleTab(logStore) {
 		const url = URL.createObjectURL(blob);
 		const link = h("a", {
 			href: url,
-			download: `stack-auth-dev-tool-logs-${(/* @__PURE__ */ new Date()).toISOString()}.txt`
+			download: `hexclave-dev-tool-logs-${(/* @__PURE__ */ new Date()).toISOString()}.txt`
 		});
 		document.body.appendChild(link);
 		link.click();
@@ -989,7 +989,7 @@ function createAITab(app) {
 		}
 	];
 	function getHeaders() {
-		const opts = app[stackAppInternalsSymbol].getConstructorOptions();
+		const opts = app[hexclaveAppInternalsSymbol].getConstructorOptions();
 		const headers = {
 			"X-Hexclave-Access-Type": "client",
 			"X-Hexclave-Project-Id": app.projectId
@@ -1660,7 +1660,7 @@ function createComponentsTab(app) {
 	const container = h("div", { className: "sdt-pg-layout" });
 	const apiBaseUrl = resolveApiBaseUrl(app);
 	const urls = app.urls;
-	const urlOptions = app[stackAppInternalsSymbol].getConstructorOptions().urls ?? {};
+	const urlOptions = app[hexclaveAppInternalsSymbol].getConstructorOptions().urls ?? {};
 	const PAGE_ENTRIES = [
 		{
 			key: "signIn",
@@ -1809,7 +1809,7 @@ function createComponentsTab(app) {
 		}, getCompactUrl(page.url)));
 		if (page.versionStatus === "outdated") headerTop.appendChild(h("span", { className: "sdt-pg-badge sdt-pg-badge-outdated" }, "Outdated"));
 		header.appendChild(headerTop);
-		const redirectMethod = `stackApp.redirectTo${page.key.charAt(0).toUpperCase()}${page.key.slice(1)}()`;
+		const redirectMethod = `hexclaveApp.redirectTo${page.key.charAt(0).toUpperCase()}${page.key.slice(1)}()`;
 		const codeRow = h("div", { className: "sdt-pg-code-inline" });
 		codeRow.appendChild(h("code", { className: "sdt-pg-code" }, redirectMethod));
 		const openBtn = h("button", { className: "sdt-pg-copy-btn sdt-pg-open-btn" });
@@ -2032,7 +2032,7 @@ function createDevTool(app) {
 	const root = document.createElement("div");
 	root.id = ROOT_ID;
 	body.appendChild(root);
-	const wrapper = h("div", { className: "stack-devtool" });
+	const wrapper = h("div", { className: "hexclave-devtool" });
 	root.appendChild(wrapper);
 	const style = document.createElement("style");
 	style.textContent = devToolCSS;
@@ -2069,7 +2069,7 @@ function createDevTool(app) {
 	const trigger = createTrigger(togglePanel);
 	wrapper.appendChild(trigger.element);
 	if (state.get().isOpen) openPanel();
-	const removeRequestListener = app[stackAppInternalsSymbol].addRequestListener((entry) => {
+	const removeRequestListener = app[hexclaveAppInternalsSymbol].addRequestListener((entry) => {
 		const timestamp = Date.now();
 		logStore.addApiLog({
 			id: nextId(),