npm - @stackframe/tanstack-start - Versions diffs - 0.0.1 → 2.8.92 - Mend

@stackframe/tanstack-start 0.0.1 → 2.8.92

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

package/dist/dev-tool/dev-tool-styles.js.map ADDED Viewed

@@ -0,0 +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"}

package/dist/dev-tool/dev-tool-trigger-position.d.ts ADDED Viewed

@@ -0,0 +1,36 @@
+//#region src/dev-tool/dev-tool-trigger-position.d.ts
+type TriggerCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type TriggerPlacement = {
+  corner: TriggerCorner;
+};
+type TriggerPosition = {
+  left: number;
+  top: number;
+};
+type TriggerSize = {
+  width: number;
+  height: number;
+};
+type TriggerViewport = {
+  width: number;
+  height: number;
+};
+declare const TRIGGER_EDGE_MARGIN = 16;
+/**
+ * Clamps a position so the trigger stays fully within the viewport.
+ * Used during drag to prevent the pill from leaving the screen.
+ */
+declare function clampTriggerPosition(position: TriggerPosition, triggerSize: TriggerSize, viewport: TriggerViewport): TriggerPosition;
+/**
+ * Returns the exact pixel position for a corner placement.
+ * The trigger is always `TRIGGER_EDGE_MARGIN` px from both adjacent edges.
+ */
+declare function resolveTriggerPosition(placement: TriggerPlacement, triggerSize: TriggerSize, viewport: TriggerViewport): TriggerPosition;
+/**
+ * Snaps a free position to the nearest corner by checking which viewport
+ * quadrant the trigger center falls in.
+ */
+declare function getSnappedTriggerPlacement(position: TriggerPosition, triggerSize: TriggerSize, viewport: TriggerViewport): TriggerPlacement;
+//#endregion
+export { TRIGGER_EDGE_MARGIN, TriggerCorner, TriggerPlacement, TriggerPosition, TriggerSize, TriggerViewport, clampTriggerPosition, getSnappedTriggerPlacement, resolveTriggerPosition };
+//# sourceMappingURL=dev-tool-trigger-position.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"dev-tool-trigger-position.d.ts","names":[],"sources":["../../src/dev-tool/dev-tool-trigger-position.ts"],"mappings":";KAIY,aAAA;AAAA,KAEA,gBAAA;EACV,MAAA,EAAQ,aAAA;AAAA;AAAA,KAGE,eAAA;EACV,IAAA;EACA,GAAA;AAAA;AAAA,KAGU,WAAA;EACV,KAAA;EACA,MAAA;AAAA;AAAA,KAGU,eAAA;EACV,KAAA;EACA,MAAA;AAAA;AAAA,cAGW,mBAAA;;;;;iBAsBG,oBAAA,CACd,QAAA,EAAU,eAAA,EACV,WAAA,EAAa,WAAA,EACb,QAAA,EAAU,eAAA,GACT,eAAA;;;;;iBAaa,sBAAA,CACd,SAAA,EAAW,gBAAA,EACX,WAAA,EAAa,WAAA,EACb,QAAA,EAAU,eAAA,GACT,eAAA;;;;;iBA0Ba,0BAAA,CACd,QAAA,EAAU,eAAA,EACV,WAAA,EAAa,WAAA,EACb,QAAA,EAAU,eAAA,GACT,gBAAA"}

package/dist/dev-tool/dev-tool-trigger-position.js ADDED Viewed

@@ -0,0 +1,70 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+//#region src/dev-tool/dev-tool-trigger-position.ts
+const TRIGGER_EDGE_MARGIN = 16;
+function getSnapBounds(triggerSize, viewport) {
+	const maxLeft = Math.max(0, viewport.width - triggerSize.width);
+	const maxTop = Math.max(0, viewport.height - triggerSize.height);
+	const minLeft = Math.min(TRIGGER_EDGE_MARGIN, maxLeft);
+	const minTop = Math.min(TRIGGER_EDGE_MARGIN, maxTop);
+	return {
+		minLeft,
+		maxLeft: Math.max(minLeft, maxLeft - TRIGGER_EDGE_MARGIN),
+		minTop,
+		maxTop: Math.max(minTop, maxTop - TRIGGER_EDGE_MARGIN)
+	};
+}
+/**
+* Clamps a position so the trigger stays fully within the viewport.
+* Used during drag to prevent the pill from leaving the screen.
+*/
+function clampTriggerPosition(position, triggerSize, viewport) {
+	const maxLeft = Math.max(0, viewport.width - triggerSize.width);
+	const maxTop = Math.max(0, viewport.height - triggerSize.height);
+	return {
+		left: Math.max(0, Math.min(position.left, maxLeft)),
+		top: Math.max(0, Math.min(position.top, maxTop))
+	};
+}
+/**
+* Returns the exact pixel position for a corner placement.
+* The trigger is always `TRIGGER_EDGE_MARGIN` px from both adjacent edges.
+*/
+function resolveTriggerPosition(placement, triggerSize, viewport) {
+	const bounds = getSnapBounds(triggerSize, viewport);
+	return clampTriggerPosition((() => {
+		switch (placement.corner) {
+			case "top-left": return {
+				left: bounds.minLeft,
+				top: bounds.minTop
+			};
+			case "top-right": return {
+				left: bounds.maxLeft,
+				top: bounds.minTop
+			};
+			case "bottom-left": return {
+				left: bounds.minLeft,
+				top: bounds.maxTop
+			};
+			case "bottom-right": return {
+				left: bounds.maxLeft,
+				top: bounds.maxTop
+			};
+		}
+	})(), triggerSize, viewport);
+}
+/**
+* Snaps a free position to the nearest corner by checking which viewport
+* quadrant the trigger center falls in.
+*/
+function getSnappedTriggerPlacement(position, triggerSize, viewport) {
+	const cx = position.left + triggerSize.width / 2;
+	return { corner: position.top + triggerSize.height / 2 < viewport.height / 2 ? cx < viewport.width / 2 ? "top-left" : "top-right" : cx < viewport.width / 2 ? "bottom-left" : "bottom-right" };
+}
+//#endregion
+exports.TRIGGER_EDGE_MARGIN = TRIGGER_EDGE_MARGIN;
+exports.clampTriggerPosition = clampTriggerPosition;
+exports.getSnappedTriggerPlacement = getSnappedTriggerPlacement;
+exports.resolveTriggerPosition = resolveTriggerPosition;
+//# sourceMappingURL=dev-tool-trigger-position.js.map

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

@@ -0,0 +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"}

package/dist/dev-tool/dev-tool-trigger-position.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { };

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

@@ -0,0 +1,155 @@
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let vitest = require("vitest");
+let __dev_tool_trigger_position_js = require("./dev-tool-trigger-position.js");
+//#region src/dev-tool/dev-tool-trigger-position.test.ts
+const triggerSize = {
+	width: 36,
+	height: 36
+};
+const viewport = {
+	width: 1e3,
+	height: 700
+};
+(0, vitest.describe)("corner snapping", () => {
+	(0, vitest.it)("snaps to bottom-right when trigger is in the bottom-right quadrant", () => {
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.getSnappedTriggerPlacement)({
+			left: 800,
+			top: 600
+		}, triggerSize, viewport)).toEqual({ corner: "bottom-right" });
+	});
+	(0, vitest.it)("snaps to top-left when trigger is in the top-left quadrant", () => {
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.getSnappedTriggerPlacement)({
+			left: 10,
+			top: 20
+		}, triggerSize, viewport)).toEqual({ corner: "top-left" });
+	});
+	(0, vitest.it)("snaps to top-right when trigger is in the top-right quadrant", () => {
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.getSnappedTriggerPlacement)({
+			left: 900,
+			top: 50
+		}, triggerSize, viewport)).toEqual({ corner: "top-right" });
+	});
+	(0, vitest.it)("snaps to bottom-left when trigger is in the bottom-left quadrant", () => {
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.getSnappedTriggerPlacement)({
+			left: 50,
+			top: 650
+		}, triggerSize, viewport)).toEqual({ corner: "bottom-left" });
+	});
+});
+(0, vitest.describe)("corner position resolution", () => {
+	(0, vitest.it)("resolves bottom-right to margin from bottom and right edges", () => {
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.resolveTriggerPosition)({ corner: "bottom-right" }, triggerSize, viewport)).toEqual({
+			left: 948,
+			top: 648
+		});
+	});
+	(0, vitest.it)("resolves top-left to margin from top and left edges", () => {
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.resolveTriggerPosition)({ corner: "top-left" }, triggerSize, viewport)).toEqual({
+			left: 16,
+			top: 16
+		});
+	});
+	(0, vitest.it)("resolves top-right to margin from top and right edges", () => {
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.resolveTriggerPosition)({ corner: "top-right" }, triggerSize, viewport)).toEqual({
+			left: 948,
+			top: 16
+		});
+	});
+	(0, vitest.it)("resolves bottom-left to margin from bottom and left edges", () => {
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.resolveTriggerPosition)({ corner: "bottom-left" }, triggerSize, viewport)).toEqual({
+			left: 16,
+			top: 648
+		});
+	});
+	(0, vitest.it)("has equal left/top margin for top-left corner", () => {
+		const pos = (0, __dev_tool_trigger_position_js.resolveTriggerPosition)({ corner: "top-left" }, triggerSize, viewport);
+		(0, vitest.expect)(pos.left).toBe(pos.top);
+	});
+	(0, vitest.it)("keeps the trigger on-screen when the viewport is smaller than the margin and trigger", () => {
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.resolveTriggerPosition)({ corner: "bottom-right" }, triggerSize, {
+			width: 40,
+			height: 40
+		})).toEqual({
+			left: 4,
+			top: 4
+		});
+	});
+});
+(0, vitest.describe)("resize anchor regression", () => {
+	(0, vitest.it)("bottom-right corner tracks the bottom-right edge after viewport shrinks", () => {
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.resolveTriggerPosition)({ corner: "bottom-right" }, triggerSize, {
+			width: 800,
+			height: 600
+		})).toEqual({
+			left: 748,
+			top: 548
+		});
+	});
+	(0, vitest.it)("bottom-right corner tracks the bottom-right edge after viewport grows", () => {
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.resolveTriggerPosition)({ corner: "bottom-right" }, triggerSize, {
+			width: 1440,
+			height: 900
+		})).toEqual({
+			left: 1388,
+			top: 848
+		});
+	});
+	(0, vitest.it)("top-right corner tracks the top-right edge across resize cycles", () => {
+		const placement = { corner: "top-right" };
+		for (const vw of [
+			600,
+			800,
+			1e3,
+			1440
+		]) {
+			const pos = (0, __dev_tool_trigger_position_js.resolveTriggerPosition)(placement, triggerSize, {
+				width: vw,
+				height: 700
+			});
+			(0, vitest.expect)(pos.left).toBe(vw - 36 - 16);
+			(0, vitest.expect)(pos.top).toBe(16);
+		}
+	});
+	(0, vitest.it)("corner does not change on resize (placement is stable)", () => {
+		const placement = (0, __dev_tool_trigger_position_js.getSnappedTriggerPlacement)({
+			left: 950,
+			top: 650
+		}, triggerSize, viewport);
+		(0, vitest.expect)(placement.corner).toBe("bottom-right");
+		const smallVp = (0, __dev_tool_trigger_position_js.resolveTriggerPosition)(placement, triggerSize, {
+			width: 400,
+			height: 300
+		});
+		(0, vitest.expect)(smallVp.left).toBe(348);
+		(0, vitest.expect)(smallVp.top).toBe(248);
+	});
+});
+(0, vitest.describe)("clampTriggerPosition", () => {
+	(0, vitest.it)("clamps positions outside the viewport", () => {
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.clampTriggerPosition)({
+			left: -50,
+			top: -20
+		}, triggerSize, viewport)).toEqual({
+			left: 0,
+			top: 0
+		});
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.clampTriggerPosition)({
+			left: 9999,
+			top: 9999
+		}, triggerSize, viewport)).toEqual({
+			left: viewport.width - triggerSize.width,
+			top: viewport.height - triggerSize.height
+		});
+	});
+	(0, vitest.it)("preserves positions already within bounds", () => {
+		const pos = {
+			left: 200,
+			top: 300
+		};
+		(0, vitest.expect)((0, __dev_tool_trigger_position_js.clampTriggerPosition)(pos, triggerSize, viewport)).toEqual(pos);
+	});
+});
+//#endregion
+//# sourceMappingURL=dev-tool-trigger-position.test.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"dev-tool-trigger-position.test.js","names":[],"sources":["../../src/dev-tool/dev-tool-trigger-position.test.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { describe, expect, it } from \"vitest\";\nimport { clampTriggerPosition, getSnappedTriggerPlacement, resolveTriggerPosition } from \"./dev-tool-trigger-position\";\n\nconst triggerSize = { width: 36, height: 36 };\nconst viewport = { width: 1000, height: 700 };\n\ndescribe(\"corner snapping\", () => {\n it(\"snaps to bottom-right when trigger is in the bottom-right quadrant\", () => {\n const placement = getSnappedTriggerPlacement({ left: 800, top: 600 }, triggerSize, viewport);\n expect(placement).toEqual({ corner: \"bottom-right\" });\n });\n\n it(\"snaps to top-left when trigger is in the top-left quadrant\", () => {\n const placement = getSnappedTriggerPlacement({ left: 10, top: 20 }, triggerSize, viewport);\n expect(placement).toEqual({ corner: \"top-left\" });\n });\n\n it(\"snaps to top-right when trigger is in the top-right quadrant\", () => {\n const placement = getSnappedTriggerPlacement({ left: 900, top: 50 }, triggerSize, viewport);\n expect(placement).toEqual({ corner: \"top-right\" });\n });\n\n it(\"snaps to bottom-left when trigger is in the bottom-left quadrant\", () => {\n const placement = getSnappedTriggerPlacement({ left: 50, top: 650 }, triggerSize, viewport);\n expect(placement).toEqual({ corner: \"bottom-left\" });\n });\n});\n\ndescribe(\"corner position resolution\", () => {\n it(\"resolves bottom-right to margin from bottom and right edges\", () => {\n const pos = resolveTriggerPosition({ corner: \"bottom-right\" }, triggerSize, viewport);\n expect(pos).toEqual({ left: 1000 - 36 - 16, top: 700 - 36 - 16 });\n });\n\n it(\"resolves top-left to margin from top and left edges\", () => {\n const pos = resolveTriggerPosition({ corner: \"top-left\" }, triggerSize, viewport);\n expect(pos).toEqual({ left: 16, top: 16 });\n });\n\n it(\"resolves top-right to margin from top and right edges\", () => {\n const pos = resolveTriggerPosition({ corner: \"top-right\" }, triggerSize, viewport);\n expect(pos).toEqual({ left: 1000 - 36 - 16, top: 16 });\n });\n\n it(\"resolves bottom-left to margin from bottom and left edges\", () => {\n const pos = resolveTriggerPosition({ corner: \"bottom-left\" }, triggerSize, viewport);\n expect(pos).toEqual({ left: 16, top: 700 - 36 - 16 });\n });\n\n it(\"has equal left/top margin for top-left corner\", () => {\n const pos = resolveTriggerPosition({ corner: \"top-left\" }, triggerSize, viewport);\n expect(pos.left).toBe(pos.top);\n });\n\n it(\"keeps the trigger on-screen when the viewport is smaller than the margin and trigger\", () => {\n const tinyViewport = { width: 40, height: 40 };\n const pos = resolveTriggerPosition({ corner: \"bottom-right\" }, triggerSize, tinyViewport);\n expect(pos).toEqual({ left: 4, top: 4 });\n });\n});\n\ndescribe(\"resize anchor regression\", () => {\n it(\"bottom-right corner tracks the bottom-right edge after viewport shrinks\", () => {\n const placement = { corner: \"bottom-right\" } as const;\n const pos1 = resolveTriggerPosition(placement, triggerSize, { width: 800, height: 600 });\n expect(pos1).toEqual({ left: 800 - 36 - 16, top: 600 - 36 - 16 });\n });\n\n it(\"bottom-right corner tracks the bottom-right edge after viewport grows\", () => {\n const placement = { corner: \"bottom-right\" } as const;\n const pos2 = resolveTriggerPosition(placement, triggerSize, { width: 1440, height: 900 });\n expect(pos2).toEqual({ left: 1440 - 36 - 16, top: 900 - 36 - 16 });\n });\n\n it(\"top-right corner tracks the top-right edge across resize cycles\", () => {\n const placement = { corner: \"top-right\" } as const;\n for (const vw of [600, 800, 1000, 1440]) {\n const pos = resolveTriggerPosition(placement, triggerSize, { width: vw, height: 700 });\n expect(pos.left).toBe(vw - 36 - 16);\n expect(pos.top).toBe(16);\n }\n });\n\n it(\"corner does not change on resize (placement is stable)\", () => {\n // The same corner placement always resolves without changing its corner.\n const placement = getSnappedTriggerPlacement({ left: 950, top: 650 }, triggerSize, viewport);\n expect(placement.corner).toBe(\"bottom-right\");\n\n // After resize, applying resolveTriggerPosition still produces bottom-right geometry.\n const smallVp = resolveTriggerPosition(placement, triggerSize, { width: 400, height: 300 });\n expect(smallVp.left).toBe(400 - 36 - 16);\n expect(smallVp.top).toBe(300 - 36 - 16);\n });\n});\n\ndescribe(\"clampTriggerPosition\", () => {\n it(\"clamps positions outside the viewport\", () => {\n expect(clampTriggerPosition({ left: -50, top: -20 }, triggerSize, viewport)).toEqual({ left: 0, top: 0 });\n expect(clampTriggerPosition({ left: 9999, top: 9999 }, triggerSize, viewport)).toEqual({\n left: viewport.width - triggerSize.width,\n top: viewport.height - triggerSize.height,\n });\n });\n\n it(\"preserves positions already within bounds\", () => {\n const pos = { left: 200, top: 300 };\n expect(clampTriggerPosition(pos, triggerSize, viewport)).toEqual(pos);\n });\n});\n"],"mappings":";;;;;AAOA,MAAM,cAAc;CAAE,OAAO;CAAI,QAAQ;CAAI;AAC7C,MAAM,WAAW;CAAE,OAAO;CAAM,QAAQ;CAAK;qBAEpC,yBAAyB;AAChC,gBAAG,4EAA4E;AAE7E,oFAD6C;GAAE,MAAM;GAAK,KAAK;GAAK,EAAE,aAAa,SAAS,CAC3E,CAAC,QAAQ,EAAE,QAAQ,gBAAgB,CAAC;GACrD;AAEF,gBAAG,oEAAoE;AAErE,oFAD6C;GAAE,MAAM;GAAI,KAAK;GAAI,EAAE,aAAa,SAAS,CACzE,CAAC,QAAQ,EAAE,QAAQ,YAAY,CAAC;GACjD;AAEF,gBAAG,sEAAsE;AAEvE,oFAD6C;GAAE,MAAM;GAAK,KAAK;GAAI,EAAE,aAAa,SAAS,CAC1E,CAAC,QAAQ,EAAE,QAAQ,aAAa,CAAC;GAClD;AAEF,gBAAG,0EAA0E;AAE3E,oFAD6C;GAAE,MAAM;GAAI,KAAK;GAAK,EAAE,aAAa,SAAS,CAC1E,CAAC,QAAQ,EAAE,QAAQ,eAAe,CAAC;GACpD;EACF;qBAEO,oCAAoC;AAC3C,gBAAG,qEAAqE;AAEtE,gFADmC,EAAE,QAAQ,gBAAgB,EAAE,aAAa,SAAS,CAC1E,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;GAAe,CAAC;GACjE;AAEF,gBAAG,6DAA6D;AAE9D,gFADmC,EAAE,QAAQ,YAAY,EAAE,aAAa,SAAS,CACtE,CAAC,QAAQ;GAAE,MAAM;GAAI,KAAK;GAAI,CAAC;GAC1C;AAEF,gBAAG,+DAA+D;AAEhE,gFADmC,EAAE,QAAQ,aAAa,EAAE,aAAa,SAAS,CACvE,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;GAAI,CAAC;GACtD;AAEF,gBAAG,mEAAmE;AAEpE,gFADmC,EAAE,QAAQ,eAAe,EAAE,aAAa,SAAS,CACzE,CAAC,QAAQ;GAAE,MAAM;GAAI,KAAK;GAAe,CAAC;GACrD;AAEF,gBAAG,uDAAuD;EACxD,MAAM,iEAA6B,EAAE,QAAQ,YAAY,EAAE,aAAa,SAAS;AACjF,qBAAO,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI;GAC9B;AAEF,gBAAG,8FAA8F;AAG/F,gFADmC,EAAE,QAAQ,gBAAgB,EAAE,aAD1C;GAAE,OAAO;GAAI,QAAQ;GAAI,CAC2C,CAC9E,CAAC,QAAQ;GAAE,MAAM;GAAG,KAAK;GAAG,CAAC;GACxC;EACF;qBAEO,kCAAkC;AACzC,gBAAG,iFAAiF;AAGlF,gFAFkB,EAAE,QAAQ,gBAAgB,EACG,aAAa;GAAE,OAAO;GAAK,QAAQ;GAAK,CAAC,CAC5E,CAAC,QAAQ;GAAE,MAAM;GAAe,KAAK;GAAe,CAAC;GACjE;AAEF,gBAAG,+EAA+E;AAGhF,gFAFkB,EAAE,QAAQ,gBAAgB,EACG,aAAa;GAAE,OAAO;GAAM,QAAQ;GAAK,CAAC,CAC7E,CAAC,QAAQ;GAAE,MAAM;GAAgB,KAAK;GAAe,CAAC;GAClE;AAEF,gBAAG,yEAAyE;EAC1E,MAAM,YAAY,EAAE,QAAQ,aAAa;AACzC,OAAK,MAAM,MAAM;GAAC;GAAK;GAAK;GAAM;GAAK,EAAE;GACvC,MAAM,iEAA6B,WAAW,aAAa;IAAE,OAAO;IAAI,QAAQ;IAAK,CAAC;AACtF,sBAAO,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,GAAG;AACnC,sBAAO,IAAI,IAAI,CAAC,KAAK,GAAG;;GAE1B;AAEF,gBAAG,gEAAgE;EAEjE,MAAM,2EAAuC;GAAE,MAAM;GAAK,KAAK;GAAK,EAAE,aAAa,SAAS;AAC5F,qBAAO,UAAU,OAAO,CAAC,KAAK,eAAe;EAG7C,MAAM,qEAAiC,WAAW,aAAa;GAAE,OAAO;GAAK,QAAQ;GAAK,CAAC;AAC3F,qBAAO,QAAQ,KAAK,CAAC,KAAK,IAAc;AACxC,qBAAO,QAAQ,IAAI,CAAC,KAAK,IAAc;GACvC;EACF;qBAEO,8BAA8B;AACrC,gBAAG,+CAA+C;AAChD,8EAA4B;GAAE,MAAM;GAAK,KAAK;GAAK,EAAE,aAAa,SAAS,CAAC,CAAC,QAAQ;GAAE,MAAM;GAAG,KAAK;GAAG,CAAC;AACzG,8EAA4B;GAAE,MAAM;GAAM,KAAK;GAAM,EAAE,aAAa,SAAS,CAAC,CAAC,QAAQ;GACrF,MAAM,SAAS,QAAQ,YAAY;GACnC,KAAK,SAAS,SAAS,YAAY;GACpC,CAAC;GACF;AAEF,gBAAG,mDAAmD;EACpD,MAAM,MAAM;GAAE,MAAM;GAAK,KAAK;GAAK;AACnC,8EAA4B,KAAK,aAAa,SAAS,CAAC,CAAC,QAAQ,IAAI;GACrE;EACF"}

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

@@ -0,0 +1,19 @@
+import { StackClientApp } from "../lib/stack-app/apps/interfaces/client-app.js";
+//#region src/dev-tool/index.d.ts
+/**
+ * Mounts the Stack Auth dev tool on the page.
+ *
+ * - Only renders on localhost (or when overridden via console)
+ * - Lazily loads the dev tool UI via dynamic import
+ * - 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)
+ */
+declare function mountDevTool(app: StackClientApp<true>): () => void;
+//#endregion
+export { mountDevTool };
+//# sourceMappingURL=index.d.ts.map

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","names":[],"sources":["../../src/dev-tool/index.ts"],"mappings":";;;;;AA8FA;;;;;;;;;;iBAAgB,YAAA,CAAa,GAAA,EAAK,cAAA"}

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

@@ -0,0 +1,119 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_shared_dist_utils_errors = require("@stackframe/stack-shared/dist/utils/errors");
+let _stackframe_stack_shared_dist_utils_promises = require("@stackframe/stack-shared/dist/utils/promises");
+let _stackframe_stack_shared_dist_utils_urls = require("@stackframe/stack-shared/dist/utils/urls");
+//#region src/dev-tool/index.ts
+const OVERRIDE_KEY = "__stack-dev-tool-override";
+function hasAppendChild(value) {
+	return typeof value === "object" && value !== null && typeof Reflect.get(value, "appendChild") === "function";
+}
+function canMountIntoDom() {
+	if (typeof window === "undefined" || typeof document === "undefined") return false;
+	if (typeof document.createElement !== "function") return false;
+	return hasAppendChild(Reflect.get(document, "body"));
+}
+function getOverride() {
+	try {
+		const val = localStorage.getItem(OVERRIDE_KEY);
+		if (val === "true") return true;
+		if (val === "false") return false;
+	} catch {}
+	return null;
+}
+function shouldShow() {
+	const override = getOverride();
+	if (override !== null) return override;
+	if (!canMountIntoDom()) return false;
+	return (0, _stackframe_stack_shared_dist_utils_urls.isLocalhost)(window.location.href);
+}
+let activeCleanup = null;
+let activeApp = null;
+let mountGeneration = 0;
+let createDevToolPromise = null;
+function loadCreateDevTool() {
+	if (!createDevToolPromise) createDevToolPromise = import("./dev-tool-core.js").then((m) => m.createDevTool).catch((err) => {
+		createDevToolPromise = null;
+		throw err;
+	});
+	return createDevToolPromise;
+}
+function tryMount() {
+	if (activeCleanup) {
+		activeCleanup();
+		activeCleanup = null;
+	}
+	if (!shouldShow() || !activeApp || !canMountIntoDom()) return;
+	const generation = ++mountGeneration;
+	const app = activeApp;
+	(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronously)(async () => {
+		const createDevTool = await loadCreateDevTool();
+		if (generation !== mountGeneration) return;
+		if (!shouldShow() || activeApp !== app || !canMountIntoDom()) return;
+		activeCleanup = createDevTool(app);
+	}, {
+		noErrorLogging: true,
+		onError: (error) => {
+			(0, _stackframe_stack_shared_dist_utils_errors.captureError)("dev-tool-mount", error);
+		}
+	});
+}
+/**
+* Mounts the Stack Auth dev tool on the page.
+*
+* - Only renders on localhost (or when overridden via console)
+* - Lazily loads the dev tool UI via dynamic import
+* - 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)
+*/
+function mountDevTool(app) {
+	activeApp = app;
+	tryMount();
+	const myCleanup = activeCleanup;
+	return () => {
+		activeApp = null;
+		if (activeCleanup === myCleanup && myCleanup != null) {
+			activeCleanup = null;
+			myCleanup();
+		}
+	};
+}
+if (typeof window !== "undefined") window.StackDevTool = {
+	enable() {
+		try {
+			localStorage.setItem(OVERRIDE_KEY, "true");
+		} catch {}
+		tryMount();
+		console.log("[Stack DevTool] Enabled. Refresh if the panel does not appear.");
+	},
+	disable() {
+		try {
+			localStorage.setItem(OVERRIDE_KEY, "false");
+		} catch {}
+		if (activeCleanup) {
+			activeCleanup();
+			activeCleanup = null;
+		}
+		console.log("[Stack DevTool] Disabled.");
+	},
+	reset() {
+		try {
+			localStorage.removeItem(OVERRIDE_KEY);
+		} catch {}
+		if (shouldShow()) tryMount();
+		else if (activeCleanup) {
+			activeCleanup();
+			activeCleanup = null;
+		}
+		console.log("[Stack DevTool] Reset to default (visible on localhost only).");
+	}
+};
+//#endregion
+exports.mountDevTool = mountDevTool;
+//# sourceMappingURL=index.js.map

package/dist/dev-tool/index.js.map ADDED Viewed

@@ -0,0 +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 \"@stackframe/stack-shared/dist/utils/errors\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { isLocalhost } from \"@stackframe/stack-shared/dist/utils/urls\";\nimport type { createDevTool as CreateDevToolFn } from \"./dev-tool-core\";\n\nconst OVERRIDE_KEY = '__stack-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 Stack Auth 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 (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":";;;;;;;AAWA,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,kEAAmB,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,qEAAkB,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,gEAAa,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,YACpB,CAAC,OAAe,eAAe;CAC7B,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"}