@hexclave/react 1.0.51 → 1.0.52

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

@@ -319,6 +319,14 @@ const devToolCSS = (0, require("../in-page-ui/base-styles.js").getInPageUiBaseCS
     z-index: 1;
   }
 
+  /* Iframe panes lay their content out as a flex column so the embedded
+     dashboard (or the fallback message) fills the pane height. Uses two
+     classes to win over the plain .sdt-tab-pane-active { display: block }. */
+  .hexclave-devtool .sdt-tab-pane-iframe.sdt-tab-pane-active {
+    display: flex;
+    flex-direction: column;
+  }
+
   /* ===== Overview tab — single column ===== */
 
   .hexclave-devtool .sdt-ov {
@@ -1226,6 +1234,33 @@ const devToolCSS = (0, require("../in-page-ui/base-styles.js").getInPageUiBaseCS
     background: var(--sdt-accent-hover);
   }
 
+  .hexclave-devtool .sdt-dashboard-unavailable {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 24px;
+    text-align: center;
+    color: var(--sdt-text-secondary);
+    font-size: 14px;
+  }
+
+  .hexclave-devtool .sdt-dashboard-unavailable-text {
+    max-width: 420px;
+    line-height: 1.5;
+  }
+
+  .hexclave-devtool .sdt-dashboard-unavailable-link {
+    color: var(--sdt-accent);
+    text-decoration: none;
+  }
+
+  .hexclave-devtool .sdt-dashboard-unavailable-link:hover {
+    text-decoration: underline;
+  }
+
   /* Shared content fade animation */
   .hexclave-devtool .sdt-tab-content-fade {
     animation: sdt-tab-fade-in 0.15s ease-out;

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

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

@@ -1,4 +1,4 @@
-import { a as StackClientApp } from "../client-app-O21Ylb76.js";
+import { a as StackClientApp } from "../client-app-DhFlsws7.js";
 //#region src/dev-tool/index.d.ts
 /**
  * Mounts the Hexclave dev tool on the page.

package/dist/esm/components-page/sign-out.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sign-out.d.ts","names":[],"sources":["../../../src/components-page/sign-out.tsx"],"mappings":";iBAyBgB,OAAA,CAAQ,KAAA;EAAS,QAAA;EAAoB,YAAA,GAAe,MAAM;AAAA,gCAAkB,GAAA,CAAA,OAAA"}
+{"version":3,"file":"sign-out.d.ts","names":[],"sources":["../../../src/components-page/sign-out.tsx"],"mappings":";iBA0CgB,OAAA,CAAQ,KAAA;EAAS,QAAA;EAAoB,YAAA,GAAe,MAAM;AAAA,gCAAkB,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/sign-out.js

@@ -1,10 +1,17 @@
 "use client";
-import { useUser } from "../index.js";
+import { captureError } from "@hexclave/shared/dist/utils/errors";
+import { useStackApp, useUser } from "../index.js";
 import { jsx } from "react/jsx-runtime";
 import { use } from "@hexclave/shared/dist/utils/react";
 import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card.js";
+import { hexclaveAppInternalsSymbol } from "../lib/hexclave-app/index.js";
 import { cacheFunction } from "@hexclave/shared/dist/utils/caches";
 //#region src/components-page/sign-out.tsx
+const cacheGetTrustedRedirectUrl = cacheFunction(async (app, redirectUrl) => {
+	if (redirectUrl == null) return;
+	if (await app[hexclaveAppInternalsSymbol].isTrustedRedirectUrl(redirectUrl)) return redirectUrl;
+	captureError("sign-out-untrusted-redirect-url", /* @__PURE__ */ new Error(`Ignoring untrusted after_auth_return_to query parameter on the sign-out page: ${redirectUrl}`));
+});
 const cacheSignOut = cacheFunction(async (user, redirectUrl) => {
 	return await user.signOut({ redirectUrl });
 });
@@ -13,10 +20,12 @@ const cacheRedirectIfAlreadySignedOut = cacheFunction(async (redirectUrl) => {
 	if (typeof window !== "undefined") window.location.replace(redirectUrl);
 });
 function SignOut(props) {
+	const app = useStackApp();
 	const user = useUser({ or: "return-null" });
 	const redirectUrl = props.searchParams?.after_auth_return_to;
-	if (user) use(cacheSignOut(user, redirectUrl));
-	else use(cacheRedirectIfAlreadySignedOut(redirectUrl));
+	const trustedRedirectUrl = use(cacheGetTrustedRedirectUrl(app, redirectUrl));
+	if (user) use(cacheSignOut(user, trustedRedirectUrl));
+	else use(cacheRedirectIfAlreadySignedOut(trustedRedirectUrl));
 	return /* @__PURE__ */ jsx(PredefinedMessageCard, {
 		type: "signedOut",
 		fullPage: props.fullPage

package/dist/esm/components-page/sign-out.js.map

@@ -1 +1 @@
-{"version":3,"file":"sign-out.js","names":[],"sources":["../../../src/components-page/sign-out.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { cacheFunction } from \"@hexclave/shared/dist/utils/caches\";\nimport { use } from \"@hexclave/shared/dist/utils/react\";\nimport { CurrentUser, useUser } from \"..\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\n\nconst cacheSignOut = cacheFunction(async (user: CurrentUser, redirectUrl: string | undefined) => {\n  return await user.signOut({ redirectUrl });\n});\n\nconst cacheRedirectIfAlreadySignedOut = cacheFunction(async (redirectUrl: string | undefined) => {\n  if (redirectUrl == null) {\n    return;\n  }\n  if (typeof window !== \"undefined\") {\n    window.location.replace(redirectUrl);\n  }\n});\n\nexport function SignOut(props: { fullPage?: boolean, searchParams?: Record<string, string> }) {\n  const user = useUser({ or: \"return-null\" });\n  const redirectUrl = props.searchParams?.after_auth_return_to;\n\n  if (user) {\n    use(cacheSignOut(user, redirectUrl));\n  } else {\n    use(cacheRedirectIfAlreadySignedOut(redirectUrl));\n  }\n\n  return <PredefinedMessageCard type='signedOut' fullPage={props.fullPage} />;\n}\n"],"mappings":";;;;;;;AAYA,MAAM,eAAe,cAAc,OAAO,MAAmB,gBAAoC;CAC/F,OAAO,MAAM,KAAK,QAAQ,EAAE,YAAY,CAAC;AAC3C,CAAC;AAED,MAAM,kCAAkC,cAAc,OAAO,gBAAoC;CAC/F,IAAI,eAAe,MACjB;CAEF,IAAI,OAAO,WAAW,aACpB,OAAO,SAAS,QAAQ,WAAW;AAEvC,CAAC;AAED,SAAgB,QAAQ,OAAsE;CAC5F,MAAM,OAAO,QAAQ,EAAE,IAAI,cAAc,CAAC;CAC1C,MAAM,cAAc,MAAM,cAAc;CAExC,IAAI,MACF,IAAI,aAAa,MAAM,WAAW,CAAC;MAEnC,IAAI,gCAAgC,WAAW,CAAC;CAGlD,OAAO,oBAAC,uBAAD;EAAuB,MAAK;EAAY,UAAU,MAAM;CAAW,CAAA;AAC5E"}
+{"version":3,"file":"sign-out.js","names":[],"sources":["../../../src/components-page/sign-out.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { cacheFunction } from \"@hexclave/shared/dist/utils/caches\";\nimport { captureError } from \"@hexclave/shared/dist/utils/errors\";\nimport { use } from \"@hexclave/shared/dist/utils/react\";\nimport { CurrentUser, useStackApp, useUser } from \"..\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { StackClientApp, hexclaveAppInternalsSymbol } from \"../lib/hexclave-app\";\n\n// The sign-out page's `after_auth_return_to` comes straight from the query string, so it is\n// attacker-craftable (open-redirect shaped). Only follow it if it passes the same trust validation\n// as every other SDK redirect; otherwise ignore it and fall back to the default after-sign-out\n// destination.\nconst cacheGetTrustedRedirectUrl = cacheFunction(async (app: StackClientApp<true, string>, redirectUrl: string | undefined): Promise<string | undefined> => {\n  if (redirectUrl == null) {\n    return undefined;\n  }\n  if (await app[hexclaveAppInternalsSymbol].isTrustedRedirectUrl(redirectUrl)) {\n    return redirectUrl;\n  }\n  captureError(\"sign-out-untrusted-redirect-url\", new Error(`Ignoring untrusted after_auth_return_to query parameter on the sign-out page: ${redirectUrl}`));\n  return undefined;\n});\n\nconst cacheSignOut = cacheFunction(async (user: CurrentUser, redirectUrl: string | undefined) => {\n  return await user.signOut({ redirectUrl });\n});\n\nconst cacheRedirectIfAlreadySignedOut = cacheFunction(async (redirectUrl: string | undefined) => {\n  if (redirectUrl == null) {\n    return;\n  }\n  if (typeof window !== \"undefined\") {\n    window.location.replace(redirectUrl);\n  }\n});\n\nexport function SignOut(props: { fullPage?: boolean, searchParams?: Record<string, string> }) {\n  const app = useStackApp();\n  const user = useUser({ or: \"return-null\" });\n  const redirectUrl = props.searchParams?.after_auth_return_to;\n  const trustedRedirectUrl = use(cacheGetTrustedRedirectUrl(app, redirectUrl));\n\n  if (user) {\n    use(cacheSignOut(user, trustedRedirectUrl));\n  } else {\n    use(cacheRedirectIfAlreadySignedOut(trustedRedirectUrl));\n  }\n\n  return <PredefinedMessageCard type='signedOut' fullPage={props.fullPage} />;\n}\n"],"mappings":";;;;;;;;;AAkBA,MAAM,6BAA6B,cAAc,OAAO,KAAmC,gBAAiE;CAC1J,IAAI,eAAe,MACjB;CAEF,IAAI,MAAM,IAAI,2BAA2B,CAAC,qBAAqB,WAAW,GACxE,OAAO;CAET,aAAa,mDAAmC,IAAI,MAAM,iFAAiF,aAAa,CAAC;AAE3J,CAAC;AAED,MAAM,eAAe,cAAc,OAAO,MAAmB,gBAAoC;CAC/F,OAAO,MAAM,KAAK,QAAQ,EAAE,YAAY,CAAC;AAC3C,CAAC;AAED,MAAM,kCAAkC,cAAc,OAAO,gBAAoC;CAC/F,IAAI,eAAe,MACjB;CAEF,IAAI,OAAO,WAAW,aACpB,OAAO,SAAS,QAAQ,WAAW;AAEvC,CAAC;AAED,SAAgB,QAAQ,OAAsE;CAC5F,MAAM,MAAM,YAAY;CACxB,MAAM,OAAO,QAAQ,EAAE,IAAI,cAAc,CAAC;CAC1C,MAAM,cAAc,MAAM,cAAc;CACxC,MAAM,qBAAqB,IAAI,2BAA2B,KAAK,WAAW,CAAC;CAE3E,IAAI,MACF,IAAI,aAAa,MAAM,kBAAkB,CAAC;MAE1C,IAAI,gCAAgC,kBAAkB,CAAC;CAGzD,OAAO,oBAAC,uBAAD;EAAuB,MAAK;EAAY,UAAU,MAAM;CAAW,CAAA;AAC5E"}

package/dist/esm/components-page/sign-out.test.d.ts

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

package/dist/esm/components-page/sign-out.test.js

@@ -0,0 +1,156 @@
+import { hexclaveAppInternalsSymbol } from "../lib/hexclave-app/common.js";
+import React, { act } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SignOut } from "./sign-out.js";
+import { TranslationProviderClient } from "../providers/translation-provider-client.js";
+//#region src/components-page/sign-out.test.tsx
+// @vitest-environment jsdom
+const appMockState = vi.hoisted(() => ({
+	app: null,
+	user: null
+}));
+vi.mock("..", () => ({
+	useStackApp: () => {
+		if (appMockState.app == null) throw new Error("Expected test app to be set before rendering.");
+		return appMockState.app;
+	},
+	useUser: () => appMockState.user
+}));
+vi.mock("@hexclave/shared/dist/utils/react", async (importOriginal) => {
+	const original = await importOriginal();
+	const promiseStates = /* @__PURE__ */ new WeakMap();
+	return {
+		...original,
+		use: (promise) => {
+			const state = promiseStates.get(promise);
+			if (state == null) {
+				promiseStates.set(promise, { status: "pending" });
+				promise.then((value) => promiseStates.set(promise, {
+					status: "ok",
+					value
+				}), (error) => promiseStates.set(promise, {
+					status: "error",
+					error
+				}));
+				throw promise;
+			}
+			switch (state.status) {
+				case "pending": throw promise;
+				case "error": throw state.error;
+				case "ok": return state.value;
+			}
+		}
+	};
+});
+vi.mock("@hexclave/ui", async () => {
+	await import("react");
+	return {
+		Button: (props) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: props.onClick,
+			children: props.children
+		}),
+		Typography: (props) => /* @__PURE__ */ jsx("div", { children: props.children }),
+		cn: (...classes) => classes.filter(Boolean).join(" ")
+	};
+});
+const previousActEnvironment = Reflect.get(globalThis, "IS_REACT_ACT_ENVIRONMENT");
+function createAppTestDouble(options) {
+	return {
+		redirectToSignIn: vi.fn(async () => {}),
+		[hexclaveAppInternalsSymbol]: { isTrustedRedirectUrl: vi.fn(async (url) => options.trustedUrls.includes(url)) }
+	};
+}
+function createUserTestDouble() {
+	return { signOut: vi.fn(async () => {}) };
+}
+const originalLocation = window.location;
+let locationReplaceMock = vi.fn();
+let root = null;
+let container = null;
+async function renderSignOut(options) {
+	appMockState.app = options.app;
+	appMockState.user = options.user;
+	container = document.createElement("div");
+	document.body.append(container);
+	root = createRoot(container);
+	await act(async () => {
+		root?.render(/* @__PURE__ */ jsx(TranslationProviderClient, {
+			quetzalKeys: /* @__PURE__ */ new Map(),
+			quetzalLocale: /* @__PURE__ */ new Map(),
+			children: /* @__PURE__ */ jsx(React.Suspense, {
+				fallback: /* @__PURE__ */ jsx("div", { "data-testid": "suspense-fallback" }),
+				children: /* @__PURE__ */ jsx(SignOut, { searchParams: options.searchParams })
+			})
+		}));
+	});
+	await act(async () => {
+		await new Promise((resolve) => setTimeout(resolve, 0));
+	});
+}
+describe("SignOut", () => {
+	beforeEach(() => {
+		Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+		locationReplaceMock = vi.fn();
+		Reflect.deleteProperty(window, "location");
+		Reflect.set(window, "location", {
+			href: "https://demo.example.test/handler/sign-out",
+			replace: locationReplaceMock
+		});
+	});
+	afterEach(() => {
+		act(() => {
+			root?.unmount();
+		});
+		container?.remove();
+		root = null;
+		container = null;
+		appMockState.app = null;
+		appMockState.user = null;
+		Reflect.set(window, "location", originalLocation);
+		vi.restoreAllMocks();
+		Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", previousActEnvironment);
+	});
+	it("signs out with a trusted after_auth_return_to redirect URL", async () => {
+		const app = createAppTestDouble({ trustedUrls: ["/dashboard"] });
+		const user = createUserTestDouble();
+		await renderSignOut({
+			app,
+			user,
+			searchParams: { after_auth_return_to: "/dashboard" }
+		});
+		expect(user.signOut).toHaveBeenCalledWith({ redirectUrl: "/dashboard" });
+	});
+	it("ignores an untrusted after_auth_return_to and falls back to the default sign-out redirect", async () => {
+		const app = createAppTestDouble({ trustedUrls: [] });
+		const user = createUserTestDouble();
+		await renderSignOut({
+			app,
+			user,
+			searchParams: { after_auth_return_to: "https://evil.example.test/phishing" }
+		});
+		expect(user.signOut).toHaveBeenCalledWith({ redirectUrl: void 0 });
+	});
+	it("does not follow an untrusted after_auth_return_to when already signed out", async () => {
+		await renderSignOut({
+			app: createAppTestDouble({ trustedUrls: [] }),
+			user: null,
+			searchParams: { after_auth_return_to: "https://evil.example.test/phishing-signed-out" }
+		});
+		expect(locationReplaceMock).not.toHaveBeenCalled();
+	});
+	it("follows a trusted after_auth_return_to when already signed out", async () => {
+		await renderSignOut({
+			app: createAppTestDouble({ trustedUrls: ["/trusted-dashboard"] }),
+			user: null,
+			searchParams: { after_auth_return_to: "/trusted-dashboard" }
+		});
+		expect(locationReplaceMock).toHaveBeenCalledWith("/trusted-dashboard");
+	});
+});
+//#endregion
+export {};
+
+//# sourceMappingURL=sign-out.test.js.map

package/dist/esm/components-page/sign-out.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sign-out.test.js","names":[],"sources":["../../../src/components-page/sign-out.test.tsx"],"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// @vitest-environment jsdom\n\nimport React, { act } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\nimport { afterEach, beforeEach, describe, expect, it, vi } from \"vitest\";\nimport type { CurrentUser } from \"../lib/hexclave-app\";\nimport type { StackClientApp } from \"../lib/hexclave-app/apps/interfaces/client-app\";\nimport { hexclaveAppInternalsSymbol } from \"../lib/hexclave-app/common\";\nimport { TranslationProviderClient } from \"../providers/translation-provider-client\";\nimport { SignOut } from \"./sign-out\";\n\nconst appMockState = vi.hoisted(() => ({\n  app: null as unknown,\n  user: null as unknown,\n}));\n\nvi.mock(\"..\", () => ({\n  useStackApp: () => {\n    if (appMockState.app == null) {\n      throw new Error(\"Expected test app to be set before rendering.\");\n    }\n    return appMockState.app;\n  },\n  useUser: () => appMockState.user,\n}));\n\n// The real `use` delegates to React.use, which breaks in this test setup because the shared\n// package and react-dom resolve different React instances. Replace it with an equivalent\n// Suspense-compatible implementation that doesn't depend on the React dispatcher.\nvi.mock(\"@hexclave/shared/dist/utils/react\", async (importOriginal) => {\n  const original = await importOriginal<typeof import(\"@hexclave/shared/dist/utils/react\")>();\n  type PromiseState = { status: \"pending\" } | { status: \"ok\", value: unknown } | { status: \"error\", error: unknown };\n  const promiseStates = new WeakMap<Promise<unknown>, PromiseState>();\n  return {\n    ...original,\n    use: <T,>(promise: Promise<T>): T => {\n      const state = promiseStates.get(promise);\n      if (state == null) {\n        promiseStates.set(promise, { status: \"pending\" });\n        promise.then(\n          (value) => promiseStates.set(promise, { status: \"ok\", value }),\n          (error) => promiseStates.set(promise, { status: \"error\", error }),\n        );\n        throw promise;\n      }\n      switch (state.status) {\n        case \"pending\": {\n          throw promise;\n        }\n        case \"error\": {\n          throw state.error;\n        }\n        case \"ok\": {\n          // This cast is safe because the value was stored from this exact promise's resolution;\n          // the WeakMap just can't express the per-key type relationship.\n          return state.value as T;\n        }\n      }\n    },\n  };\n});\n\nvi.mock(\"@hexclave/ui\", async () => {\n  const React = await import(\"react\");\n  return {\n    Button: (props: { children: React.ReactNode, onClick?: () => void }) => (\n      <button type=\"button\" onClick={props.onClick}>{props.children}</button>\n    ),\n    Typography: (props: { children: React.ReactNode }) => <div>{props.children}</div>,\n    cn: (...classes: (string | false | null | undefined)[]) => classes.filter(Boolean).join(\" \"),\n  };\n});\n\nconst previousActEnvironment = Reflect.get(globalThis, \"IS_REACT_ACT_ENVIRONMENT\");\n\nfunction createAppTestDouble(options: {\n  trustedUrls: string[],\n}) {\n  const app = {\n    redirectToSignIn: vi.fn(async () => {}),\n    [hexclaveAppInternalsSymbol]: {\n      isTrustedRedirectUrl: vi.fn(async (url: string) => options.trustedUrls.includes(url)),\n    },\n  };\n\n  // This test double intentionally implements only the StackClientApp surface that SignOut and\n  // the rendered signed-out card touch.\n  return app as unknown as StackClientApp<true>;\n}\n\nfunction createUserTestDouble() {\n  const user = {\n    signOut: vi.fn(async () => {}),\n  };\n  // Same as the app test double: only the surface SignOut touches.\n  return user as unknown as CurrentUser & { signOut: ReturnType<typeof vi.fn> };\n}\n\n// jsdom's window.location is not configurable, so it can't be spied on; replace it wholesale.\nconst originalLocation = window.location;\nlet locationReplaceMock = vi.fn();\n\nlet root: Root | null = null;\nlet container: HTMLDivElement | null = null;\n\nasync function renderSignOut(options: {\n  app: StackClientApp<true>,\n  user: unknown,\n  searchParams?: Record<string, string>,\n}) {\n  appMockState.app = options.app;\n  appMockState.user = options.user;\n  container = document.createElement(\"div\");\n  document.body.append(container);\n  root = createRoot(container);\n  await act(async () => {\n    root?.render(\n      <TranslationProviderClient quetzalKeys={new Map()} quetzalLocale={new Map()}>\n        <React.Suspense fallback={<div data-testid=\"suspense-fallback\" />}>\n          <SignOut searchParams={options.searchParams} />\n        </React.Suspense>\n      </TranslationProviderClient>\n    );\n  });\n  await act(async () => {\n    await new Promise((resolve) => setTimeout(resolve, 0));\n  });\n}\n\ndescribe(\"SignOut\", () => {\n  beforeEach(() => {\n    Reflect.set(globalThis, \"IS_REACT_ACT_ENVIRONMENT\", true);\n    locationReplaceMock = vi.fn();\n    Reflect.deleteProperty(window, \"location\");\n    Reflect.set(window, \"location\", { href: \"https://demo.example.test/handler/sign-out\", replace: locationReplaceMock });\n  });\n\n  afterEach(() => {\n    act(() => {\n      root?.unmount();\n    });\n    container?.remove();\n    root = null;\n    container = null;\n    appMockState.app = null;\n    appMockState.user = null;\n    Reflect.set(window, \"location\", originalLocation);\n    vi.restoreAllMocks();\n    Reflect.set(globalThis, \"IS_REACT_ACT_ENVIRONMENT\", previousActEnvironment);\n  });\n\n  it(\"signs out with a trusted after_auth_return_to redirect URL\", async () => {\n    const app = createAppTestDouble({ trustedUrls: [\"/dashboard\"] });\n    const user = createUserTestDouble();\n\n    await renderSignOut({ app, user, searchParams: { after_auth_return_to: \"/dashboard\" } });\n\n    expect(user.signOut).toHaveBeenCalledWith({ redirectUrl: \"/dashboard\" });\n  });\n\n  it(\"ignores an untrusted after_auth_return_to and falls back to the default sign-out redirect\", async () => {\n    const app = createAppTestDouble({ trustedUrls: [] });\n    const user = createUserTestDouble();\n\n    await renderSignOut({ app, user, searchParams: { after_auth_return_to: \"https://evil.example.test/phishing\" } });\n\n    // The untrusted URL is dropped entirely; sign-out proceeds with the default destination.\n    expect(user.signOut).toHaveBeenCalledWith({ redirectUrl: undefined });\n  });\n\n  it(\"does not follow an untrusted after_auth_return_to when already signed out\", async () => {\n    const app = createAppTestDouble({ trustedUrls: [] });\n\n    await renderSignOut({ app, user: null, searchParams: { after_auth_return_to: \"https://evil.example.test/phishing-signed-out\" } });\n\n    expect(locationReplaceMock).not.toHaveBeenCalled();\n  });\n\n  it(\"follows a trusted after_auth_return_to when already signed out\", async () => {\n    const app = createAppTestDouble({ trustedUrls: [\"/trusted-dashboard\"] });\n\n    await renderSignOut({ app, user: null, searchParams: { after_auth_return_to: \"/trusted-dashboard\" } });\n\n    expect(locationReplaceMock).toHaveBeenCalledWith(\"/trusted-dashboard\");\n  });\n});\n"],"mappings":";;;;;;;;;AAeA,MAAM,eAAe,GAAG,eAAe;CACrC,KAAK;CACL,MAAM;AACR,EAAE;AAEF,GAAG,KAAK,aAAa;CACnB,mBAAmB;EACjB,IAAI,aAAa,OAAO,MACtB,MAAM,IAAI,MAAM,+CAA+C;EAEjE,OAAO,aAAa;CACtB;CACA,eAAe,aAAa;AAC9B,EAAE;AAKF,GAAG,KAAK,qCAAqC,OAAO,mBAAmB;CACrE,MAAM,WAAW,MAAM,eAAmE;CAE1F,MAAM,gCAAgB,IAAI,QAAwC;CAClE,OAAO;EACL,GAAG;EACH,MAAU,YAA2B;GACnC,MAAM,QAAQ,cAAc,IAAI,OAAO;GACvC,IAAI,SAAS,MAAM;IACjB,cAAc,IAAI,SAAS,EAAE,QAAQ,UAAU,CAAC;IAChD,QAAQ,MACL,UAAU,cAAc,IAAI,SAAS;KAAE,QAAQ;KAAM;IAAM,CAAC,IAC5D,UAAU,cAAc,IAAI,SAAS;KAAE,QAAQ;KAAS;IAAM,CAAC,CAClE;IACA,MAAM;GACR;GACA,QAAQ,MAAM,QAAd;IACE,KAAK,WACH,MAAM;IAER,KAAK,SACH,MAAM,MAAM;IAEd,KAAK,MAGH,OAAO,MAAM;GAEjB;EACF;CACF;AACF,CAAC;AAED,GAAG,KAAK,gBAAgB,YAAY;CACpB,MAAM,OAAO;CAC3B,OAAO;EACL,SAAS,UACP,oBAAC,UAAD;GAAQ,MAAK;GAAS,SAAS,MAAM;aAAU,MAAM;EAAiB,CAAA;EAExE,aAAa,UAAyC,oBAAC,OAAD,EAAA,UAAM,MAAM,SAAc,CAAA;EAChF,KAAK,GAAG,YAAmD,QAAQ,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAC7F;AACF,CAAC;AAED,MAAM,yBAAyB,QAAQ,IAAI,YAAY,0BAA0B;AAEjF,SAAS,oBAAoB,SAE1B;CAUD,OAAO;EARL,kBAAkB,GAAG,GAAG,YAAY,CAAC,CAAC;GACrC,6BAA6B,EAC5B,sBAAsB,GAAG,GAAG,OAAO,QAAgB,QAAQ,YAAY,SAAS,GAAG,CAAC,EACtF;CAKO;AACX;AAEA,SAAS,uBAAuB;CAK9B,OAAO,EAHL,SAAS,GAAG,GAAG,YAAY,CAAC,CAAC,EAGrB;AACZ;AAGA,MAAM,mBAAmB,OAAO;AAChC,IAAI,sBAAsB,GAAG,GAAG;AAEhC,IAAI,OAAoB;AACxB,IAAI,YAAmC;AAEvC,eAAe,cAAc,SAI1B;CACD,aAAa,MAAM,QAAQ;CAC3B,aAAa,OAAO,QAAQ;CAC5B,YAAY,SAAS,cAAc,KAAK;CACxC,SAAS,KAAK,OAAO,SAAS;CAC9B,OAAO,WAAW,SAAS;CAC3B,MAAM,IAAI,YAAY;EACpB,MAAM,OACJ,oBAAC,2BAAD;GAA2B,6BAAa,IAAI,IAAI;GAAG,+BAAe,IAAI,IAAI;aACxE,oBAAC,MAAM,UAAP;IAAgB,UAAU,oBAAC,OAAD,EAAK,eAAY,oBAAqB,CAAA;cAC9D,oBAAC,SAAD,EAAS,cAAc,QAAQ,aAAe,CAAA;GAChC,CAAA;EACS,CAAA,CAC7B;CACF,CAAC;CACD,MAAM,IAAI,YAAY;EACpB,MAAM,IAAI,SAAS,YAAY,WAAW,SAAS,CAAC,CAAC;CACvD,CAAC;AACH;AAEA,SAAS,iBAAiB;CACxB,iBAAiB;EACf,QAAQ,IAAI,YAAY,4BAA4B,IAAI;EACxD,sBAAsB,GAAG,GAAG;EAC5B,QAAQ,eAAe,QAAQ,UAAU;EACzC,QAAQ,IAAI,QAAQ,YAAY;GAAE,MAAM;GAA8C,SAAS;EAAoB,CAAC;CACtH,CAAC;CAED,gBAAgB;EACd,UAAU;GACR,MAAM,QAAQ;EAChB,CAAC;EACD,WAAW,OAAO;EAClB,OAAO;EACP,YAAY;EACZ,aAAa,MAAM;EACnB,aAAa,OAAO;EACpB,QAAQ,IAAI,QAAQ,YAAY,gBAAgB;EAChD,GAAG,gBAAgB;EACnB,QAAQ,IAAI,YAAY,4BAA4B,sBAAsB;CAC5E,CAAC;CAED,GAAG,8DAA8D,YAAY;EAC3E,MAAM,MAAM,oBAAoB,EAAE,aAAa,CAAC,YAAY,EAAE,CAAC;EAC/D,MAAM,OAAO,qBAAqB;EAElC,MAAM,cAAc;GAAE;GAAK;GAAM,cAAc,EAAE,sBAAsB,aAAa;EAAE,CAAC;EAEvF,OAAO,KAAK,OAAO,CAAC,CAAC,qBAAqB,EAAE,aAAa,aAAa,CAAC;CACzE,CAAC;CAED,GAAG,6FAA6F,YAAY;EAC1G,MAAM,MAAM,oBAAoB,EAAE,aAAa,CAAC,EAAE,CAAC;EACnD,MAAM,OAAO,qBAAqB;EAElC,MAAM,cAAc;GAAE;GAAK;GAAM,cAAc,EAAE,sBAAsB,qCAAqC;EAAE,CAAC;EAG/G,OAAO,KAAK,OAAO,CAAC,CAAC,qBAAqB,EAAE,aAAa,KAAA,EAAU,CAAC;CACtE,CAAC;CAED,GAAG,6EAA6E,YAAY;EAG1F,MAAM,cAAc;GAAE,KAFV,oBAAoB,EAAE,aAAa,CAAC,EAAE,CAE1B;GAAG,MAAM;GAAM,cAAc,EAAE,sBAAsB,gDAAgD;EAAE,CAAC;EAEhI,OAAO,mBAAmB,CAAC,CAAC,IAAI,iBAAiB;CACnD,CAAC;CAED,GAAG,kEAAkE,YAAY;EAG/E,MAAM,cAAc;GAAE,KAFV,oBAAoB,EAAE,aAAa,CAAC,oBAAoB,EAAE,CAE9C;GAAG,MAAM;GAAM,cAAc,EAAE,sBAAsB,qBAAqB;EAAE,CAAC;EAErG,OAAO,mBAAmB,CAAC,CAAC,qBAAqB,oBAAoB;CACvE,CAAC;AACH,CAAC"}

package/dist/esm/dev-tool/dev-tool-core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev-tool-core.d.ts","names":[],"sources":["../../../src/dev-tool/dev-tool-core.ts"],"mappings":";;;iBAiuEgB,aAAA,CAAc,GAAyB,EAApB,cAAc"}
+{"version":3,"file":"dev-tool-core.d.ts","names":[],"sources":["../../../src/dev-tool/dev-tool-core.ts"],"mappings":";;;iBAkyEgB,aAAA,CAAc,GAAyB,EAApB,cAAc"}