npm - @hexclave/next - Versions diffs - 1.0.3 → 1.0.6 - Mend

@hexclave/next 1.0.3 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (864) 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":"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"}
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":"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"}

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/components/api-key-dialogs.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { ApiKey, ApiKeyCreationOptions, ApiKeyType } from "../lib/stack-app/api-keys";
+import { ApiKey, ApiKeyCreationOptions, ApiKeyType } from "../lib/hexclave-app/api-keys";
 //#region src/components/api-key-dialogs.d.ts
 declare const neverInMs: number;

package/dist/esm/components/api-key-dialogs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"api-key-dialogs.js","names":[],"sources":["../../../src/components/api-key-dialogs.tsx"],"sourcesContent":["'use client';\n\n\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 { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from '@hexclave/shared/dist/schema-fields';\nimport { captureError } from '@hexclave/shared/dist/utils/errors';\nimport { runAsynchronously } from '@hexclave/shared/dist/utils/promises';\nimport { ActionDialog, Button, CopyField, Input, Label, Typography } from '@hexclave/ui';\nimport { useState } from \"react\";\nimport { useForm } from 'react-hook-form';\nimport * as yup from \"yup\";\nimport { useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { ApiKey, ApiKeyCreationOptions, ApiKeyType } from \"../lib/~~stack~~-app/api-keys\";\nimport { useTranslation } from \"../lib/translations\";\n\n// Constants for expiration options\nexport const neverInMs = 1000 * 60 * 60 * 24 * 365 * 200;\nexport const expiresInOptions = {\n [1000 * 60 * 60 * 24 * 1]: \"1 day\",\n [1000 * 60 * 60 * 24 * 7]: \"7 days\",\n [1000 * 60 * 60 * 24 * 30]: \"30 days\",\n [1000 * 60 * 60 * 24 * 90]: \"90 days\",\n [1000 * 60 * 60 * 24 * 365]: \"1 year\",\n [neverInMs]: \"Never\",\n} as const;\n\n/*\n Dialog for creating a new API key\n /\nexport function CreateApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n open: boolean,\n onOpenChange: (open: boolean) => void,\n onKeyCreated?: (key: ApiKey<Type, true>) => void,\n createApiKey: (data: ApiKeyCreationOptions<Type>) => Promise<ApiKey<Type, true>>,\n mockMode?: boolean,\n}) {\n const { t } = useTranslation();\n const user = useUser({ or: props.mockMode ? 'return-null' : 'redirect' });\n const [loading, setLoading] = useState(false);\n\n const apiKeySchema = yupObject({\n description: yupString().defined().nonEmpty(t('Description is required')),\n expiresIn: yupString().defined(),\n });\n\n const { register, handleSubmit, formState: { errors }, reset } = useForm({\n resolver: yupResolver(apiKeySchema),\n defaultValues: {\n description: '',\n expiresIn: Object.keys(expiresInOptions)[2], // Default to 30 days\n }\n });\n\n const onSubmit = async (data: yup.InferType<typeof apiKeySchema>) => {\n setLoading(true);\n try {\n const expiresAt = new Date(Date.now() + parseInt(data.expiresIn));\n const apiKey = await props.createApiKey({\n description: data.description,\n expiresAt,\n });\n\n if (props.onKeyCreated) {\n props.onKeyCreated(apiKey);\n }\n\n reset();\n props.onOpenChange(false);\n } catch (error) {\n captureError(\"Failed to create API key\", { error });\n } finally {\n setLoading(false);\n }\n };\n\n return (\n <ActionDialog\n open={props.open}\n onOpenChange={props.onOpenChange}\n title={t('Create API Key')}\n description={t('API keys grant programmatic access to your account.')}\n >\n <form\n onSubmit={(e) => {\n e.preventDefault();\n runAsynchronously(handleSubmit(onSubmit));\n }}\n className=\"space-y-4\"\n >\n <div className=\"space-y-2\">\n <Label htmlFor=\"description\">{t('Description')}</Label>\n <Input\n id=\"description\"\n placeholder={t('e.g. Development, Production, CI/CD')}\n {...register('description')}\n />\n {errors.description && <FormWarningText text={errors.description.message} />}\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"expiresIn\">{t('Expires In')}</Label>\n <select\n id=\"expiresIn\"\n className=\"w-full p-2 border border-input rounded-md bg-background\"\n {...register('expiresIn')}\n >\n {Object.entries(expiresInOptions).map(([value, label]) => (\n <option key={value} value={value}>{t(label)}</option>\n ))}\n </select>\n {errors.expiresIn && <FormWarningText text={errors.expiresIn.message} />}\n </div>\n\n <div className=\"flex justify-end gap-2 pt-4\">\n <Button\n type=\"button\"\n variant=\"secondary\"\n onClick={() => {\n reset();\n props.onOpenChange(false);\n }}\n >\n {t('Cancel')}\n </Button>\n <Button type=\"submit\" loading={loading}>\n {t('Create')}\n </Button>\n </div>\n </form>\n </ActionDialog>\n );\n}\n\n/\n Dialog for showing the newly created API key\n */\nexport function ShowApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n apiKey: ApiKey<Type, true> \| null,\n onClose?: () => void,\n}) {\n const { t } = useTranslation();\n\n return (\n <ActionDialog\n open={!!props.apiKey}\n title={t(\"API Key\")}\n okButton={{ label: t(\"Close\") }}\n onClose={props.onClose}\n preventClose\n confirmText={t(\"I understand that I will not be able to view this key again.\")}\n >\n <div className=\"flex flex-col gap-4\">\n <Typography>\n {t(\"Here is your API key.\")}{\" \"}\n <span className=\"font-bold\">\n {t(\"Copy it to a safe place. You will not be able to view it again.\")}\n </span>\n </Typography>\n <CopyField\n type=\"input\"\n monospace\n value={props.apiKey?.value ?? ''}\n label={t(\"Secret API Key\")}\n />\n </div>\n </ActionDialog>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"api-key-dialogs.js","names":[],"sources":["../../../src/components/api-key-dialogs.tsx"],"sourcesContent":["'use client';\n\n\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 { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from '@hexclave/shared/dist/schema-fields';\nimport { captureError } from '@hexclave/shared/dist/utils/errors';\nimport { runAsynchronously } from '@hexclave/shared/dist/utils/promises';\nimport { ActionDialog, Button, CopyField, Input, Label, Typography } from '@hexclave/ui';\nimport { useState } from \"react\";\nimport { useForm } from 'react-hook-form';\nimport * as yup from \"yup\";\nimport { useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { ApiKey, ApiKeyCreationOptions, ApiKeyType } from \"../lib/hexclave-app/api-keys\";\nimport { useTranslation } from \"../lib/translations\";\n\n// Constants for expiration options\nexport const neverInMs = 1000 * 60 * 60 * 24 * 365 * 200;\nexport const expiresInOptions = {\n [1000 * 60 * 60 * 24 * 1]: \"1 day\",\n [1000 * 60 * 60 * 24 * 7]: \"7 days\",\n [1000 * 60 * 60 * 24 * 30]: \"30 days\",\n [1000 * 60 * 60 * 24 * 90]: \"90 days\",\n [1000 * 60 * 60 * 24 * 365]: \"1 year\",\n [neverInMs]: \"Never\",\n} as const;\n\n/*\n Dialog for creating a new API key\n /\nexport function CreateApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n open: boolean,\n onOpenChange: (open: boolean) => void,\n onKeyCreated?: (key: ApiKey<Type, true>) => void,\n createApiKey: (data: ApiKeyCreationOptions<Type>) => Promise<ApiKey<Type, true>>,\n mockMode?: boolean,\n}) {\n const { t } = useTranslation();\n const user = useUser({ or: props.mockMode ? 'return-null' : 'redirect' });\n const [loading, setLoading] = useState(false);\n\n const apiKeySchema = yupObject({\n description: yupString().defined().nonEmpty(t('Description is required')),\n expiresIn: yupString().defined(),\n });\n\n const { register, handleSubmit, formState: { errors }, reset } = useForm({\n resolver: yupResolver(apiKeySchema),\n defaultValues: {\n description: '',\n expiresIn: Object.keys(expiresInOptions)[2], // Default to 30 days\n }\n });\n\n const onSubmit = async (data: yup.InferType<typeof apiKeySchema>) => {\n setLoading(true);\n try {\n const expiresAt = new Date(Date.now() + parseInt(data.expiresIn));\n const apiKey = await props.createApiKey({\n description: data.description,\n expiresAt,\n });\n\n if (props.onKeyCreated) {\n props.onKeyCreated(apiKey);\n }\n\n reset();\n props.onOpenChange(false);\n } catch (error) {\n captureError(\"Failed to create API key\", { error });\n } finally {\n setLoading(false);\n }\n };\n\n return (\n <ActionDialog\n open={props.open}\n onOpenChange={props.onOpenChange}\n title={t('Create API Key')}\n description={t('API keys grant programmatic access to your account.')}\n >\n <form\n onSubmit={(e) => {\n e.preventDefault();\n runAsynchronously(handleSubmit(onSubmit));\n }}\n className=\"space-y-4\"\n >\n <div className=\"space-y-2\">\n <Label htmlFor=\"description\">{t('Description')}</Label>\n <Input\n id=\"description\"\n placeholder={t('e.g. Development, Production, CI/CD')}\n {...register('description')}\n />\n {errors.description && <FormWarningText text={errors.description.message} />}\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"expiresIn\">{t('Expires In')}</Label>\n <select\n id=\"expiresIn\"\n className=\"w-full p-2 border border-input rounded-md bg-background\"\n {...register('expiresIn')}\n >\n {Object.entries(expiresInOptions).map(([value, label]) => (\n <option key={value} value={value}>{t(label)}</option>\n ))}\n </select>\n {errors.expiresIn && <FormWarningText text={errors.expiresIn.message} />}\n </div>\n\n <div className=\"flex justify-end gap-2 pt-4\">\n <Button\n type=\"button\"\n variant=\"secondary\"\n onClick={() => {\n reset();\n props.onOpenChange(false);\n }}\n >\n {t('Cancel')}\n </Button>\n <Button type=\"submit\" loading={loading}>\n {t('Create')}\n </Button>\n </div>\n </form>\n </ActionDialog>\n );\n}\n\n/\n Dialog for showing the newly created API key\n */\nexport function ShowApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n apiKey: ApiKey<Type, true> \| null,\n onClose?: () => void,\n}) {\n const { t } = useTranslation();\n\n return (\n <ActionDialog\n open={!!props.apiKey}\n title={t(\"API Key\")}\n okButton={{ label: t(\"Close\") }}\n onClose={props.onClose}\n preventClose\n confirmText={t(\"I understand that I will not be able to view this key again.\")}\n >\n <div className=\"flex flex-col gap-4\">\n <Typography>\n {t(\"Here is your API key.\")}{\" \"}\n <span className=\"font-bold\">\n {t(\"Copy it to a safe place. You will not be able to view it again.\")}\n </span>\n </Typography>\n <CopyField\n type=\"input\"\n monospace\n value={props.apiKey?.value ?? ''}\n label={t(\"Secret API Key\")}\n />\n </div>\n </ActionDialog>\n );\n}\n"],"mappings":"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"}

package/dist/esm/components/api-key-table.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { ApiKey } from "../lib/stack-app/api-keys";
+import { ApiKey } from "../lib/hexclave-app/api-keys";
 //#region src/components/api-key-table.d.ts
 declare function ApiKeyTable(props: {

package/dist/esm/components/api-key-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"api-key-table.js","names":[],"sources":["../../../src/components/api-key-table.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, ~~INSTEAD~~ EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { ActionCell, ActionDialog, BadgeCell, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DateCell, SearchToolbarItem, TextCell, standardFilterFn } from \"@hexclave/ui\";\nimport { ColumnDef, Row, Table } from \"@tanstack/react-table\";\nimport { useMemo, useState } from \"react\";\nimport { ApiKey } from \"../lib/~~stack~~-app/api-keys\";\n\ntype ExtendedApiKey = ApiKey & {\n status: 'valid' \| 'expired' \| 'revoked',\n};\n\nfunction toolbarRender<TData>(table: Table<TData>) {\n return (\n <>\n <SearchToolbarItem table={table} placeholder=\"Search table\" />\n <DataTableFacetedFilter\n column={table.getColumn(\"status\")}\n title=\"Status\"\n options={['valid', 'expired', 'revoked'].map((provider) => ({\n value: provider,\n label: provider,\n }))}\n />\n </>\n );\n}\n\nfunction RevokeDialog(props: {\n apiKey: ExtendedApiKey,\n open: boolean,\n onOpenChange: (open: boolean) => void,\n}) {\n return <ActionDialog\n open={props.open}\n onOpenChange={props.onOpenChange}\n title=\"Revoke API Key\"\n danger\n cancelButton\n okButton={{ label: \"Revoke Key\", onClick: async () => { await props.apiKey.revoke(); } }}\n confirmText=\"I understand this will unlink all the apps using this API key\"\n >\n {`Are you sure you want to revoke API key ***${props.apiKey.value.lastFour}?`}\n </ActionDialog>;\n}\n\nfunction Actions({ row }: { row: Row<ExtendedApiKey> }) {\n const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);\n return (\n <>\n <RevokeDialog apiKey={row.original} open={isRevokeModalOpen} onOpenChange={setIsRevokeModalOpen} />\n <ActionCell\n invisible={row.original.status !== 'valid'}\n items={[{\n item: \"Revoke\",\n danger: true,\n onClick: () => setIsRevokeModalOpen(true),\n }]}\n />\n </>\n );\n}\n\nconst columns: ColumnDef<ExtendedApiKey>[] = [\n {\n accessorKey: \"description\",\n header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Description\" />,\n cell: ({ row }) => <TextCell size={100}>{row.original.description}</TextCell>,\n },\n {\n accessorKey: \"status\",\n header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Status\" />,\n cell: ({ row }) => <BadgeCell badges={[row.original.status]} />,\n filterFn: standardFilterFn,\n },\n {\n id: \"value\",\n accessorFn: (row) => row.value.lastFour,\n header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Client Key\" />,\n cell: ({ row }) => <TextCell>*****{row.original.value.lastFour}</TextCell>,\n enableSorting: false,\n },\n {\n accessorKey: \"expiresAt\",\n header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Expires At\" />,\n cell: ({ row }) => {\n if (row.original.status === 'revoked') return <TextCell>-</TextCell>;\n return row.original.expiresAt ? <DateCell date={row.original.expiresAt} ignoreAfterYears={50} /> : <TextCell>Never</TextCell>;\n },\n },\n {\n accessorKey: \"createdAt\",\n header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Created At\" />,\n cell: ({ row }) => <DateCell date={row.original.createdAt} ignoreAfterYears={50} />\n },\n {\n id: \"actions\",\n cell: ({ row }) => <Actions row={row} />,\n },\n];\n\nexport function ApiKeyTable(props: { apiKeys: ApiKey[] }) {\n const extendedApiKeys = useMemo(() => {\n const keys = props.apiKeys.map((apiKey) => ({\n ...apiKey,\n status: ({ 'valid': 'valid', 'manually-revoked': 'revoked', 'expired': 'expired' } as const)[apiKey.whyInvalid() \|\| 'valid'],\n } satisfies ExtendedApiKey));\n // first sort based on status, then by createdAt\n return keys.sort((a, b) => {\n if (a.status === b.status) {\n return a.createdAt < b.createdAt ? 1 : -1;\n }\n return a.status === 'valid' ? -1 : 1;\n });\n }, [props.apiKeys]);\n\n return <DataTable\n data={extendedApiKeys}\n columns={columns}\n toolbarRender={toolbarRender}\n defaultColumnFilters={[]}\n defaultSorting={[]}\n />;\n}\n"],"mappings":";;;;;;;AAeA,SAAS,cAAqB,OAAqB;AACjD,QACE,4CACE,oBAAC;EAAyB;EAAO,aAAY;GAAiB,EAC9D,oBAAC;EACC,QAAQ,MAAM,UAAU,SAAS;EACjC,OAAM;EACN,SAAS;GAAC;GAAS;GAAW;GAAU,CAAC,KAAK,cAAc;GAC1D,OAAO;GACP,OAAO;GACR,EAAE;GACH,IACD;;AAIP,SAAS,aAAa,OAInB;AACD,QAAO,oBAAC;EACN,MAAM,MAAM;EACZ,cAAc,MAAM;EACpB,OAAM;EACN;EACA;EACA,UAAU;GAAE,OAAO;GAAc,SAAS,YAAY;AAAE,UAAM,MAAM,OAAO,QAAQ;;GAAK;EACxF,aAAY;YAEX,gDAAgD,MAAM,OAAO,MAAM,SAAS;GAChE;;AAGjB,SAAS,QAAQ,EAAE,OAAqC;CACtD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;AACjE,QACE,4CACE,oBAAC;EAAa,QAAQ,IAAI;EAAU,MAAM;EAAmB,cAAc;GAAwB,EACnG,oBAAC;EACC,WAAW,IAAI,SAAS,WAAW;EACnC,OAAO,CAAC;GACN,MAAM;GACN,QAAQ;GACR,eAAe,qBAAqB,KAAK;GAC1C,CAAC;GACF,IACD;;AAIP,MAAM,UAAwC;CAC5C;EACE,aAAa;EACb,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAgB;EAC3F,OAAO,EAAE,UAAU,oBAAC;GAAS,MAAM;aAAM,IAAI,SAAS;IAAuB;EAC9E;CACD;EACE,aAAa;EACb,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAW;EACtF,OAAO,EAAE,UAAU,oBAAC,aAAU,QAAQ,CAAC,IAAI,SAAS,OAAO,GAAI;EAC/D,UAAU;EACX;CACD;EACE,IAAI;EACJ,aAAa,QAAQ,IAAI,MAAM;EAC/B,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAe;EAC1F,OAAO,EAAE,UAAU,qBAAC,uBAAS,WAAQ,IAAI,SAAS,MAAM,YAAoB;EAC5E,eAAe;EAChB;CACD;EACE,aAAa;EACb,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAe;EAC1F,OAAO,EAAE,UAAU;AACjB,OAAI,IAAI,SAAS,WAAW,UAAW,QAAO,oBAAC,sBAAS,MAAY;AACpE,UAAO,IAAI,SAAS,YAAY,oBAAC;IAAS,MAAM,IAAI,SAAS;IAAW,kBAAkB;KAAM,GAAG,oBAAC,sBAAS,UAAgB;;EAEhI;CACD;EACE,aAAa;EACb,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAe;EAC1F,OAAO,EAAE,UAAU,oBAAC;GAAS,MAAM,IAAI,SAAS;GAAW,kBAAkB;IAAM;EACpF;CACD;EACE,IAAI;EACJ,OAAO,EAAE,UAAU,oBAAC,WAAa,MAAO;EACzC;CACF;AAED,SAAgB,YAAY,OAA8B;AAexD,QAAO,oBAAC;EACN,MAfsB,cAAc;AAMpC,UALa,MAAM,QAAQ,KAAK,YAAY;IAC1C,GAAG;IACH,QAAS;KAAE,SAAS;KAAS,oBAAoB;KAAW,WAAW;KAAW,CAAW,OAAO,YAAY,IAAI;IACrH,EAA2B,CAEhB,MAAM,GAAG,MAAM;AACzB,QAAI,EAAE,WAAW,EAAE,OACjB,QAAO,EAAE,YAAY,EAAE,YAAY,IAAI;AAEzC,WAAO,EAAE,WAAW,UAAU,KAAK;KACnC;KACD,CAAC,MAAM,QAAQ,CAAC;EAIR;EACM;EACf,sBAAsB,EAAE;EACxB,gBAAgB,EAAE;GAClB"}
1	+ {"version":3,"file":"api-key-table.js","names":[],"sources":["../../../src/components/api-key-table.tsx"],"sourcesContent":["'use client';\n\n\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 { ActionCell, ActionDialog, BadgeCell, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DateCell, SearchToolbarItem, TextCell, standardFilterFn } from \"@hexclave/ui\";\nimport { ColumnDef, Row, Table } from \"@tanstack/react-table\";\nimport { useMemo, useState } from \"react\";\nimport { ApiKey } from \"../lib/hexclave-app/api-keys\";\n\ntype ExtendedApiKey = ApiKey & {\n status: 'valid' \| 'expired' \| 'revoked',\n};\n\nfunction toolbarRender<TData>(table: Table<TData>) {\n return (\n <>\n <SearchToolbarItem table={table} placeholder=\"Search table\" />\n <DataTableFacetedFilter\n column={table.getColumn(\"status\")}\n title=\"Status\"\n options={['valid', 'expired', 'revoked'].map((provider) => ({\n value: provider,\n label: provider,\n }))}\n />\n </>\n );\n}\n\nfunction RevokeDialog(props: {\n apiKey: ExtendedApiKey,\n open: boolean,\n onOpenChange: (open: boolean) => void,\n}) {\n return <ActionDialog\n open={props.open}\n onOpenChange={props.onOpenChange}\n title=\"Revoke API Key\"\n danger\n cancelButton\n okButton={{ label: \"Revoke Key\", onClick: async () => { await props.apiKey.revoke(); } }}\n confirmText=\"I understand this will unlink all the apps using this API key\"\n >\n {`Are you sure you want to revoke API key ***${props.apiKey.value.lastFour}?`}\n </ActionDialog>;\n}\n\nfunction Actions({ row }: { row: Row<ExtendedApiKey> }) {\n const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);\n return (\n <>\n <RevokeDialog apiKey={row.original} open={isRevokeModalOpen} onOpenChange={setIsRevokeModalOpen} />\n <ActionCell\n invisible={row.original.status !== 'valid'}\n items={[{\n item: \"Revoke\",\n danger: true,\n onClick: () => setIsRevokeModalOpen(true),\n }]}\n />\n </>\n );\n}\n\nconst columns: ColumnDef<ExtendedApiKey>[] = [\n {\n accessorKey: \"description\",\n header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Description\" />,\n cell: ({ row }) => <TextCell size={100}>{row.original.description}</TextCell>,\n },\n {\n accessorKey: \"status\",\n header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Status\" />,\n cell: ({ row }) => <BadgeCell badges={[row.original.status]} />,\n filterFn: standardFilterFn,\n },\n {\n id: \"value\",\n accessorFn: (row) => row.value.lastFour,\n header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Client Key\" />,\n cell: ({ row }) => <TextCell>*****{row.original.value.lastFour}</TextCell>,\n enableSorting: false,\n },\n {\n accessorKey: \"expiresAt\",\n header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Expires At\" />,\n cell: ({ row }) => {\n if (row.original.status === 'revoked') return <TextCell>-</TextCell>;\n return row.original.expiresAt ? <DateCell date={row.original.expiresAt} ignoreAfterYears={50} /> : <TextCell>Never</TextCell>;\n },\n },\n {\n accessorKey: \"createdAt\",\n header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Created At\" />,\n cell: ({ row }) => <DateCell date={row.original.createdAt} ignoreAfterYears={50} />\n },\n {\n id: \"actions\",\n cell: ({ row }) => <Actions row={row} />,\n },\n];\n\nexport function ApiKeyTable(props: { apiKeys: ApiKey[] }) {\n const extendedApiKeys = useMemo(() => {\n const keys = props.apiKeys.map((apiKey) => ({\n ...apiKey,\n status: ({ 'valid': 'valid', 'manually-revoked': 'revoked', 'expired': 'expired' } as const)[apiKey.whyInvalid() \|\| 'valid'],\n } satisfies ExtendedApiKey));\n // first sort based on status, then by createdAt\n return keys.sort((a, b) => {\n if (a.status === b.status) {\n return a.createdAt < b.createdAt ? 1 : -1;\n }\n return a.status === 'valid' ? -1 : 1;\n });\n }, [props.apiKeys]);\n\n return <DataTable\n data={extendedApiKeys}\n columns={columns}\n toolbarRender={toolbarRender}\n defaultColumnFilters={[]}\n defaultSorting={[]}\n />;\n}\n"],"mappings":";;;;;;;AAeA,SAAS,cAAqB,OAAqB;AACjD,QACE,4CACE,oBAAC;EAAyB;EAAO,aAAY;GAAiB,EAC9D,oBAAC;EACC,QAAQ,MAAM,UAAU,SAAS;EACjC,OAAM;EACN,SAAS;GAAC;GAAS;GAAW;GAAU,CAAC,KAAK,cAAc;GAC1D,OAAO;GACP,OAAO;GACR,EAAE;GACH,IACD;;AAIP,SAAS,aAAa,OAInB;AACD,QAAO,oBAAC;EACN,MAAM,MAAM;EACZ,cAAc,MAAM;EACpB,OAAM;EACN;EACA;EACA,UAAU;GAAE,OAAO;GAAc,SAAS,YAAY;AAAE,UAAM,MAAM,OAAO,QAAQ;;GAAK;EACxF,aAAY;YAEX,gDAAgD,MAAM,OAAO,MAAM,SAAS;GAChE;;AAGjB,SAAS,QAAQ,EAAE,OAAqC;CACtD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;AACjE,QACE,4CACE,oBAAC;EAAa,QAAQ,IAAI;EAAU,MAAM;EAAmB,cAAc;GAAwB,EACnG,oBAAC;EACC,WAAW,IAAI,SAAS,WAAW;EACnC,OAAO,CAAC;GACN,MAAM;GACN,QAAQ;GACR,eAAe,qBAAqB,KAAK;GAC1C,CAAC;GACF,IACD;;AAIP,MAAM,UAAwC;CAC5C;EACE,aAAa;EACb,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAgB;EAC3F,OAAO,EAAE,UAAU,oBAAC;GAAS,MAAM;aAAM,IAAI,SAAS;IAAuB;EAC9E;CACD;EACE,aAAa;EACb,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAW;EACtF,OAAO,EAAE,UAAU,oBAAC,aAAU,QAAQ,CAAC,IAAI,SAAS,OAAO,GAAI;EAC/D,UAAU;EACX;CACD;EACE,IAAI;EACJ,aAAa,QAAQ,IAAI,MAAM;EAC/B,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAe;EAC1F,OAAO,EAAE,UAAU,qBAAC,uBAAS,WAAQ,IAAI,SAAS,MAAM,YAAoB;EAC5E,eAAe;EAChB;CACD;EACE,aAAa;EACb,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAe;EAC1F,OAAO,EAAE,UAAU;AACjB,OAAI,IAAI,SAAS,WAAW,UAAW,QAAO,oBAAC,sBAAS,MAAY;AACpE,UAAO,IAAI,SAAS,YAAY,oBAAC;IAAS,MAAM,IAAI,SAAS;IAAW,kBAAkB;KAAM,GAAG,oBAAC,sBAAS,UAAgB;;EAEhI;CACD;EACE,aAAa;EACb,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAe;EAC1F,OAAO,EAAE,UAAU,oBAAC;GAAS,MAAM,IAAI,SAAS;GAAW,kBAAkB;IAAM;EACpF;CACD;EACE,IAAI;EACJ,OAAO,EAAE,UAAU,oBAAC,WAAa,MAAO;EACzC;CACF;AAED,SAAgB,YAAY,OAA8B;AAexD,QAAO,oBAAC;EACN,MAfsB,cAAc;AAMpC,UALa,MAAM,QAAQ,KAAK,YAAY;IAC1C,GAAG;IACH,QAAS;KAAE,SAAS;KAAS,oBAAoB;KAAW,WAAW;KAAW,CAAW,OAAO,YAAY,IAAI;IACrH,EAA2B,CAEhB,MAAM,GAAG,MAAM;AACzB,QAAI,EAAE,WAAW,EAAE,OACjB,QAAO,EAAE,YAAY,EAAE,YAAY,IAAI;AAEzC,WAAO,EAAE,WAAW,UAAU,KAAK;KACnC;KACD,CAAC,MAAM,QAAQ,CAAC;EAIR;EACM;EACf,sBAAsB,EAAE;EACxB,gBAAgB,EAAE;GAClB"}