@hexclave/next 1.0.3 → 1.0.5

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/dev-tool/index.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport type { StackClientApp } from \"../lib/stack-app\";\nimport { captureError } from \"@hexclave/shared/dist/utils/errors\";\nimport { runAsynchronously } from \"@hexclave/shared/dist/utils/promises\";\nimport { isLocalhost } from \"@hexclave/shared/dist/utils/urls\";\nimport type { createDevTool as CreateDevToolFn } from \"./dev-tool-core\";\n\n// Hexclave rebrand: UI-only local pref — straight rename (one-time reset is harmless)\nconst OVERRIDE_KEY = '__hexclave-dev-tool-override';\n\nfunction hasAppendChild(value: unknown): value is { appendChild(node: Node): void } {\n  return typeof value === 'object' && value !== null && typeof Reflect.get(value, 'appendChild') === 'function';\n}\n\nfunction canMountIntoDom(): boolean {\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    return false;\n  }\n  if (typeof document.createElement !== 'function') {\n    return false;\n  }\n  return hasAppendChild(Reflect.get(document, 'body'));\n}\n\nfunction getOverride(): boolean | null {\n  try {\n    const val = localStorage.getItem(OVERRIDE_KEY);\n    if (val === 'true') return true;\n    if (val === 'false') return false;\n  } catch {}\n  return null;\n}\n\nfunction shouldShow(): boolean {\n  const override = getOverride();\n  if (override !== null) return override;\n  if (!canMountIntoDom()) return false;\n  return isLocalhost(window.location.href);\n}\n\nlet activeCleanup: (() => void) | null = null;\nlet activeApp: StackClientApp<true> | null = null;\nlet mountGeneration = 0;\n\nlet createDevToolPromise: Promise<typeof CreateDevToolFn> | null = null;\nfunction loadCreateDevTool(): Promise<typeof CreateDevToolFn> {\n  if (!createDevToolPromise) {\n    createDevToolPromise = import(\"./dev-tool-core\").then(m => m.createDevTool).catch((err) => {\n      createDevToolPromise = null;\n      throw err;\n    });\n  }\n  return createDevToolPromise;\n}\n\nfunction tryMount() {\n  if (activeCleanup) {\n    activeCleanup();\n    activeCleanup = null;\n  }\n\n  if (!shouldShow() || !activeApp || !canMountIntoDom()) return;\n\n  const generation = ++mountGeneration;\n  const app = activeApp;\n\n  runAsynchronously(async () => {\n    const createDevTool = await loadCreateDevTool();\n    if (generation !== mountGeneration) return;\n    if (!shouldShow() || activeApp !== app || !canMountIntoDom()) return;\n    activeCleanup = createDevTool(app);\n  }, {\n    noErrorLogging: true,\n    onError: (error) => {\n      captureError(\"dev-tool-mount\", error);\n    },\n  });\n}\n\n/**\n * Mounts the Hexclave dev tool on the page.\n *\n * - Only renders on localhost (or when overridden via console)\n * - Lazily loads the dev tool UI via dynamic import\n * - Returns a cleanup function to unmount\n *\n * Console commands (also work in production):\n *   StackDevTool.enable()  — force-show the dev tool\n *   StackDevTool.disable() — force-hide the dev tool\n *   StackDevTool.reset()   — revert to default (localhost-only)\n */\nexport function mountDevTool(app: StackClientApp<true>): () => void {\n  activeApp = app;\n  tryMount();\n\n  // Capture the cleanup created by THIS specific mount call so that React\n  // StrictMode's double-invoke doesn't let the first effect's cleanup tear\n  // down the second mount (which would cause the tool to disappear silently).\n  const myCleanup = activeCleanup;\n\n  return () => {\n    activeApp = null;\n    if (activeCleanup === myCleanup && myCleanup != null) {\n      activeCleanup = null;\n      myCleanup();\n    }\n  };\n}\n\n// Expose console commands: StackDevTool.enable() / .disable() / .reset()\nif (typeof window !== 'undefined') {\n  // Hexclave rebrand: expose under both the legacy and new global names.\n  (window as any).HexclaveDevTool = (window as any).StackDevTool = {\n    enable() {\n      try {\n        localStorage.setItem(OVERRIDE_KEY, 'true');\n      } catch {}\n      tryMount();\n      console.log('[Stack DevTool] Enabled. Refresh if the panel does not appear.');\n    },\n    disable() {\n      try {\n        localStorage.setItem(OVERRIDE_KEY, 'false');\n      } catch {}\n      if (activeCleanup) {\n        activeCleanup();\n        activeCleanup = null;\n      }\n      console.log('[Stack DevTool] Disabled.');\n    },\n    reset() {\n      try {\n        localStorage.removeItem(OVERRIDE_KEY);\n      } catch {}\n      if (shouldShow()) {\n        tryMount();\n      } else if (activeCleanup) {\n        activeCleanup();\n        activeCleanup = null;\n      }\n      console.log('[Stack DevTool] Reset to default (visible on localhost only).');\n    },\n  };\n}\n\n"],"mappings":";;;;;AAYA,MAAM,eAAe;AAErB,SAAS,eAAe,OAA4D;AAClF,QAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,OAAO,QAAQ,IAAI,OAAO,cAAc,KAAK;;AAGrG,SAAS,kBAA2B;AAClC,KAAI,OAAO,WAAW,eAAe,OAAO,aAAa,YACvD,QAAO;AAET,KAAI,OAAO,SAAS,kBAAkB,WACpC,QAAO;AAET,QAAO,eAAe,QAAQ,IAAI,UAAU,OAAO,CAAC;;AAGtD,SAAS,cAA8B;AACrC,KAAI;EACF,MAAM,MAAM,aAAa,QAAQ,aAAa;AAC9C,MAAI,QAAQ,OAAQ,QAAO;AAC3B,MAAI,QAAQ,QAAS,QAAO;SACtB;AACR,QAAO;;AAGT,SAAS,aAAsB;CAC7B,MAAM,WAAW,aAAa;AAC9B,KAAI,aAAa,KAAM,QAAO;AAC9B,KAAI,CAAC,iBAAiB,CAAE,QAAO;AAC/B,QAAO,YAAY,OAAO,SAAS,KAAK;;AAG1C,IAAI,gBAAqC;AACzC,IAAI,YAAyC;AAC7C,IAAI,kBAAkB;AAEtB,IAAI,uBAA+D;AACnE,SAAS,oBAAqD;AAC5D,KAAI,CAAC,qBACH,wBAAuB,OAAO,sBAAmB,MAAK,MAAK,EAAE,cAAc,CAAC,OAAO,QAAQ;AACzF,yBAAuB;AACvB,QAAM;GACN;AAEJ,QAAO;;AAGT,SAAS,WAAW;AAClB,KAAI,eAAe;AACjB,iBAAe;AACf,kBAAgB;;AAGlB,KAAI,CAAC,YAAY,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAE;CAEvD,MAAM,aAAa,EAAE;CACrB,MAAM,MAAM;AAEZ,mBAAkB,YAAY;EAC5B,MAAM,gBAAgB,MAAM,mBAAmB;AAC/C,MAAI,eAAe,gBAAiB;AACpC,MAAI,CAAC,YAAY,IAAI,cAAc,OAAO,CAAC,iBAAiB,CAAE;AAC9D,kBAAgB,cAAc,IAAI;IACjC;EACD,gBAAgB;EAChB,UAAU,UAAU;AAClB,gBAAa,kBAAkB,MAAM;;EAExC,CAAC;;;;;;;;;;;;;;AAeJ,SAAgB,aAAa,KAAuC;AAClE,aAAY;AACZ,WAAU;CAKV,MAAM,YAAY;AAElB,cAAa;AACX,cAAY;AACZ,MAAI,kBAAkB,aAAa,aAAa,MAAM;AACpD,mBAAgB;AAChB,cAAW;;;;AAMjB,IAAI,OAAO,WAAW,YAEpB,CAAC,OAAe,kBAAkB,AAAC,OAAe,eAAe;CAC/D,SAAS;AACP,MAAI;AACF,gBAAa,QAAQ,cAAc,OAAO;UACpC;AACR,YAAU;AACV,UAAQ,IAAI,iEAAiE;;CAE/E,UAAU;AACR,MAAI;AACF,gBAAa,QAAQ,cAAc,QAAQ;UACrC;AACR,MAAI,eAAe;AACjB,kBAAe;AACf,mBAAgB;;AAElB,UAAQ,IAAI,4BAA4B;;CAE1C,QAAQ;AACN,MAAI;AACF,gBAAa,WAAW,aAAa;UAC/B;AACR,MAAI,YAAY,CACd,WAAU;WACD,eAAe;AACxB,kBAAe;AACf,mBAAgB;;AAElB,UAAQ,IAAI,gEAAgE;;CAE/E"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/dev-tool/index.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport type { StackClientApp } from \"../lib/hexclave-app\";\nimport { captureError } from \"@hexclave/shared/dist/utils/errors\";\nimport { runAsynchronously } from \"@hexclave/shared/dist/utils/promises\";\nimport { isLocalhost } from \"@hexclave/shared/dist/utils/urls\";\nimport type { createDevTool as CreateDevToolFn } from \"./dev-tool-core\";\n\n// Hexclave rebrand: UI-only local pref — straight rename (one-time reset is harmless)\nconst OVERRIDE_KEY = '__hexclave-dev-tool-override';\n\nfunction hasAppendChild(value: unknown): value is { appendChild(node: Node): void } {\n  return typeof value === 'object' && value !== null && typeof Reflect.get(value, 'appendChild') === 'function';\n}\n\nfunction canMountIntoDom(): boolean {\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    return false;\n  }\n  if (typeof document.createElement !== 'function') {\n    return false;\n  }\n  return hasAppendChild(Reflect.get(document, 'body'));\n}\n\nfunction getOverride(): boolean | null {\n  try {\n    const val = localStorage.getItem(OVERRIDE_KEY);\n    if (val === 'true') return true;\n    if (val === 'false') return false;\n  } catch {}\n  return null;\n}\n\nfunction shouldShow(): boolean {\n  const override = getOverride();\n  if (override !== null) return override;\n  if (!canMountIntoDom()) return false;\n  return isLocalhost(window.location.href);\n}\n\nlet activeCleanup: (() => void) | null = null;\nlet activeApp: StackClientApp<true> | null = null;\nlet mountGeneration = 0;\n\nlet createDevToolPromise: Promise<typeof CreateDevToolFn> | null = null;\nfunction loadCreateDevTool(): Promise<typeof CreateDevToolFn> {\n  if (!createDevToolPromise) {\n    createDevToolPromise = import(\"./dev-tool-core\").then(m => m.createDevTool).catch((err) => {\n      createDevToolPromise = null;\n      throw err;\n    });\n  }\n  return createDevToolPromise;\n}\n\nfunction tryMount() {\n  if (activeCleanup) {\n    activeCleanup();\n    activeCleanup = null;\n  }\n\n  if (!shouldShow() || !activeApp || !canMountIntoDom()) return;\n\n  const generation = ++mountGeneration;\n  const app = activeApp;\n\n  runAsynchronously(async () => {\n    const createDevTool = await loadCreateDevTool();\n    if (generation !== mountGeneration) return;\n    if (!shouldShow() || activeApp !== app || !canMountIntoDom()) return;\n    activeCleanup = createDevTool(app);\n  }, {\n    noErrorLogging: true,\n    onError: (error) => {\n      captureError(\"dev-tool-mount\", error);\n    },\n  });\n}\n\n/**\n * Mounts the Hexclave dev tool on the page.\n *\n * - Only renders on localhost (or when overridden via console)\n * - Lazily loads the dev tool UI via dynamic import\n * - Returns a cleanup function to unmount\n *\n * Console commands (also work in production):\n *   HexclaveDevTool.enable()  — force-show the dev tool\n *   HexclaveDevTool.disable() — force-hide the dev tool\n *   HexclaveDevTool.reset()   — revert to default (localhost-only)\n */\nexport function mountDevTool(app: StackClientApp<true>): () => void {\n  activeApp = app;\n  tryMount();\n\n  // Capture the cleanup created by THIS specific mount call so that React\n  // StrictMode's double-invoke doesn't let the first effect's cleanup tear\n  // down the second mount (which would cause the tool to disappear silently).\n  const myCleanup = activeCleanup;\n\n  return () => {\n    activeApp = null;\n    if (activeCleanup === myCleanup && myCleanup != null) {\n      activeCleanup = null;\n      myCleanup();\n    }\n  };\n}\n\n// Expose console commands: HexclaveDevTool.enable() / .disable() / .reset()\nif (typeof window !== 'undefined') {\n  // Hexclave rebrand: expose under both the legacy and new global names.\n  (window as any).HexclaveDevTool = (window as any).HexclaveDevTool = {\n    enable() {\n      try {\n        localStorage.setItem(OVERRIDE_KEY, 'true');\n      } catch {}\n      tryMount();\n      console.log('[Stack DevTool] Enabled. Refresh if the panel does not appear.');\n    },\n    disable() {\n      try {\n        localStorage.setItem(OVERRIDE_KEY, 'false');\n      } catch {}\n      if (activeCleanup) {\n        activeCleanup();\n        activeCleanup = null;\n      }\n      console.log('[Stack DevTool] Disabled.');\n    },\n    reset() {\n      try {\n        localStorage.removeItem(OVERRIDE_KEY);\n      } catch {}\n      if (shouldShow()) {\n        tryMount();\n      } else if (activeCleanup) {\n        activeCleanup();\n        activeCleanup = null;\n      }\n      console.log('[Stack DevTool] Reset to default (visible on localhost only).');\n    },\n  };\n}\n\n"],"mappings":";;;;;AAYA,MAAM,eAAe;AAErB,SAAS,eAAe,OAA4D;AAClF,QAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,OAAO,QAAQ,IAAI,OAAO,cAAc,KAAK;;AAGrG,SAAS,kBAA2B;AAClC,KAAI,OAAO,WAAW,eAAe,OAAO,aAAa,YACvD,QAAO;AAET,KAAI,OAAO,SAAS,kBAAkB,WACpC,QAAO;AAET,QAAO,eAAe,QAAQ,IAAI,UAAU,OAAO,CAAC;;AAGtD,SAAS,cAA8B;AACrC,KAAI;EACF,MAAM,MAAM,aAAa,QAAQ,aAAa;AAC9C,MAAI,QAAQ,OAAQ,QAAO;AAC3B,MAAI,QAAQ,QAAS,QAAO;SACtB;AACR,QAAO;;AAGT,SAAS,aAAsB;CAC7B,MAAM,WAAW,aAAa;AAC9B,KAAI,aAAa,KAAM,QAAO;AAC9B,KAAI,CAAC,iBAAiB,CAAE,QAAO;AAC/B,QAAO,YAAY,OAAO,SAAS,KAAK;;AAG1C,IAAI,gBAAqC;AACzC,IAAI,YAAyC;AAC7C,IAAI,kBAAkB;AAEtB,IAAI,uBAA+D;AACnE,SAAS,oBAAqD;AAC5D,KAAI,CAAC,qBACH,wBAAuB,OAAO,sBAAmB,MAAK,MAAK,EAAE,cAAc,CAAC,OAAO,QAAQ;AACzF,yBAAuB;AACvB,QAAM;GACN;AAEJ,QAAO;;AAGT,SAAS,WAAW;AAClB,KAAI,eAAe;AACjB,iBAAe;AACf,kBAAgB;;AAGlB,KAAI,CAAC,YAAY,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAE;CAEvD,MAAM,aAAa,EAAE;CACrB,MAAM,MAAM;AAEZ,mBAAkB,YAAY;EAC5B,MAAM,gBAAgB,MAAM,mBAAmB;AAC/C,MAAI,eAAe,gBAAiB;AACpC,MAAI,CAAC,YAAY,IAAI,cAAc,OAAO,CAAC,iBAAiB,CAAE;AAC9D,kBAAgB,cAAc,IAAI;IACjC;EACD,gBAAgB;EAChB,UAAU,UAAU;AAClB,gBAAa,kBAAkB,MAAM;;EAExC,CAAC;;;;;;;;;;;;;;AAeJ,SAAgB,aAAa,KAAuC;AAClE,aAAY;AACZ,WAAU;CAKV,MAAM,YAAY;AAElB,cAAa;AACX,cAAY;AACZ,MAAI,kBAAkB,aAAa,aAAa,MAAM;AACpD,mBAAgB;AAChB,cAAW;;;;AAMjB,IAAI,OAAO,WAAW,YAEpB,CAAC,OAAe,kBAAkB,AAAC,OAAe,kBAAkB;CAClE,SAAS;AACP,MAAI;AACF,gBAAa,QAAQ,cAAc,OAAO;UACpC;AACR,YAAU;AACV,UAAQ,IAAI,iEAAiE;;CAE/E,UAAU;AACR,MAAI;AACF,gBAAa,QAAQ,cAAc,QAAQ;UACrC;AACR,MAAI,eAAe;AACjB,kBAAe;AACf,mBAAgB;;AAElB,UAAQ,IAAI,4BAA4B;;CAE1C,QAAQ;AACN,MAAI;AACF,gBAAa,WAAW,aAAa;UAC/B;AACR,MAAI,YAAY,CACd,WAAU;WACD,eAAe;AACxB,kBAAe;AACf,mBAAgB;;AAElB,UAAQ,IAAI,gEAAgE;;CAE/E"}