@hexclave/next 1.0.13 → 1.0.15

package/src/clickmap/index.ts

@@ -0,0 +1,95 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import {
+  CLICKMAP_OVERLAY_RESUME_STORAGE_KEY,
+  CLICKMAP_OVERLAY_TOKEN_UPDATED_EVENT,
+} from "@hexclave/shared/dist/utils/analytics-clickmap-overlay";
+import { captureError } from "@hexclave/shared/dist/utils/errors";
+import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
+import { canMountIntoDom } from "../in-page-ui/dom";
+import type { StackClientApp } from "../lib/hexclave-app";
+import type { openClickmapOverlay as OpenClickmapOverlayFn } from "./clickmap-core";
+
+// While the overlay is open it drops a sentinel into sessionStorage on unload
+// (see clickmap-core); consuming it here reopens the clickmap on the next page
+// so the user picks up where they left off.
+function consumeResumeSentinel(): boolean {
+  try {
+    if (sessionStorage.getItem(CLICKMAP_OVERLAY_RESUME_STORAGE_KEY) !== '1') return false;
+    sessionStorage.removeItem(CLICKMAP_OVERLAY_RESUME_STORAGE_KEY);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+let activeApp: StackClientApp<true> | null = null;
+let activeOverlayCleanup: (() => void) | null = null;
+let openGeneration = 0;
+let tokenListenerAttached = false;
+
+let openClickmapOverlayPromise: Promise<typeof OpenClickmapOverlayFn> | null = null;
+function loadOpenClickmapOverlay(): Promise<typeof OpenClickmapOverlayFn> {
+  if (!openClickmapOverlayPromise) {
+    openClickmapOverlayPromise = import("./clickmap-core").then(m => m.openClickmapOverlay).catch((err) => {
+      openClickmapOverlayPromise = null;
+      throw err;
+    });
+  }
+  return openClickmapOverlayPromise;
+}
+
+function tryOpenOverlay() {
+  // Already open: the panel listens for the token event itself and refetches.
+  if (activeOverlayCleanup || !activeApp || !canMountIntoDom()) return;
+
+  const generation = ++openGeneration;
+  const app = activeApp;
+
+  runAsynchronously(async () => {
+    const openClickmapOverlay = await loadOpenClickmapOverlay();
+    if (generation !== openGeneration) return;
+    if (activeOverlayCleanup || activeApp !== app || !canMountIntoDom()) return;
+    activeOverlayCleanup = openClickmapOverlay(app, () => {
+      activeOverlayCleanup = null;
+    });
+  }, {
+    noErrorLogging: true,
+    onError: (error) => {
+      captureError("clickmap-mount", error);
+    },
+  });
+}
+
+/**
+ * Mounts the clickmap overlay listener on the page.
+ *
+ * The clickmap is fully independent from the dev tool. It has no ambient UI:
+ * nothing renders until a dashboard-minted token is handed over (the
+ * CLICKMAP_OVERLAY_TOKEN_UPDATED event fired by the dashboard's console
+ * snippet) or a navigation-resume sentinel is present — only then is the
+ * actual overlay code lazily loaded and shown.
+ */
+export function mountClickmapOverlay(app: StackClientApp<true>): () => void {
+  activeApp = app;
+
+  if (typeof window !== 'undefined' && !tokenListenerAttached) {
+    tokenListenerAttached = true;
+    window.addEventListener(CLICKMAP_OVERLAY_TOKEN_UPDATED_EVENT, tryOpenOverlay);
+  }
+
+  if (canMountIntoDom() && consumeResumeSentinel()) {
+    tryOpenOverlay();
+  }
+
+  return () => {
+    if (activeApp !== app) return;
+    activeApp = null;
+    openGeneration++;
+    activeOverlayCleanup?.();
+  };
+}
+

package/src/components-page/forgot-password.tsx

@@ -54,8 +54,7 @@ export function ForgotPasswordForm({ onSent }: { onSent?: () => void }) {
         id="email"
         type="email"
         autoComplete="email"
-        {...register('email')}
-        onChange={() => clearErrors('email')}
+        {...register('email', { onChange: () => clearErrors('email') })}
       />
       <FormWarningText text={errors.email?.message?.toString()} />
 

package/src/components-page/mfa.tsx

@@ -196,27 +196,18 @@ export function MFA(props: {
   const headerText = t("Multi-Factor Authentication");
   const instructionText = t("Enter the six-digit code from your authenticator app");
 
-  if (props.fullPage) {
-    return (
-      <MaybeFullPage fullPage={true}>
-        <div
-          className="stack-scope flex flex-col items-stretch"
-          style={{ maxWidth: "380px", flexBasis: "380px", padding: "1rem" }}
-        >
-          <div className="text-center mb-6">
-            <Typography type="h2">{headerText}</Typography>
-            <Typography className="mt-2">{instructionText}</Typography>
-          </div>
-          <MfaForm onSuccess={props.onSuccess} onCancel={props.onCancel} />
-        </div>
-      </MaybeFullPage>
-    );
-  }
-
   return (
-    <div className="flex flex-col items-stretch stack-scope">
-      <Typography className="mb-4 text-center">{instructionText}</Typography>
-      <MfaForm onSuccess={props.onSuccess} onCancel={props.onCancel} />
-    </div>
+    <MaybeFullPage fullPage={!!props.fullPage}>
+      <div className={cn(
+        "stack-scope max-w-[380px] flex-basis-[380px]",
+        props.fullPage ? "p-4" : "p-0"
+      )}>
+        <div className="text-center mb-6">
+          <Typography type="h2">{headerText}</Typography>
+          <Typography className="mt-2 text-sm text-muted-foreground">{instructionText}</Typography>
+        </div>
+        <MfaForm onSuccess={props.onSuccess} onCancel={props.onCancel} />
+      </div>
+    </MaybeFullPage>
   );
 }

package/src/components-page/password-reset.tsx

@@ -100,11 +100,10 @@ export default function PasswordResetForm(props: {
           <PasswordInput
             id="password"
             autoComplete="new-password"
-            {...register('password')}
-            onChange={() => {
+            {...register('password', { onChange: () => {
               clearErrors('password');
               clearErrors('passwordRepeat');
-            }}
+            } })}
           />
           <FormWarningText text={errors.password?.message?.toString()} />
 
@@ -112,11 +111,10 @@ export default function PasswordResetForm(props: {
           <PasswordInput
             id="repeat-password"
             autoComplete="new-password"
-            {...register('passwordRepeat')}
-            onChange={() => {
+            {...register('passwordRepeat', { onChange: () => {
               clearErrors('password');
               clearErrors('passwordRepeat');
-            }}
+            } })}
           />
           <FormWarningText text={errors.passwordRepeat?.message?.toString()} />
 

package/src/dev-tool/dev-tool-core.ts

@@ -4,10 +4,12 @@
 //===========================================
 
 import type { RequestLogEntry } from "@hexclave/shared/dist/interface/client-interface";
+import { DEV_TOOL_ROOT_ID } from "@hexclave/shared/dist/utils/dev-tool";
 import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
 import { isLocalhost } from "@hexclave/shared/dist/utils/urls";
 import type { StackClientApp } from "../lib/hexclave-app";
 import { envVars } from "../generated/env";
+import { getGlobalUiInstance, h, hasAppendChild, setGlobalUiInstance, setHtml, type UiGlobalInstance } from "../in-page-ui/dom";
 import { getBaseUrl } from "../lib/hexclave-app/apps/implementations/common";
 import type { HandlerUrlOptions, HandlerUrls, HandlerUrlTarget } from "../lib/hexclave-app/common";
 import { hexclaveAppInternalsSymbol } from "../lib/hexclave-app/common";
@@ -55,7 +57,7 @@ type DevToolState = {
 // Hexclave rebrand: UI-only local prefs — straight rename (one-time reset is harmless)
 const STORAGE_KEY = '__hexclave-dev-tool-state';
 const TRIGGER_POS_KEY = 'hexclave-devtool-trigger-position';
-const ROOT_ID = '__hexclave-dev-tool-root';
+const ROOT_ID = DEV_TOOL_ROOT_ID;
 const GLOBAL_INSTANCE_KEY = '__hexclave-dev-tool-instance';
 const MAX_LOG_ENTRIES = 500;
 const CONSOLE_LOG_BATCH_SIZE = 100;
@@ -71,6 +73,10 @@ const TABS: { id: TabId; label: string; icon: string }[] = [
   { id: 'support', label: 'Support', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>' },
 ];
 
+// Clickmaps is intentionally NOT a dev tool tab or feature. It's a fully
+// independent module (see src/clickmap) with its own mount, root element, and
+// styles, so the dev tool can be changed or removed without affecting it.
+
 const DEFAULT_STATE: DevToolState = {
   isOpen: false,
   activeTab: 'overview',
@@ -142,29 +148,6 @@ type LogStore = {
   subscribe(fn: () => void): () => void;
 };
 
-type DevToolGlobalInstance = {
-  cleanup: () => void;
-};
-
-function isDevToolGlobalInstance(value: unknown): value is DevToolGlobalInstance {
-  return typeof value === 'object' && value !== null && typeof Reflect.get(value, 'cleanup') === 'function';
-}
-
-function getGlobalDevToolInstance(): DevToolGlobalInstance | null {
-  if (typeof window === 'undefined') return null;
-  const value: unknown = Reflect.get(window, GLOBAL_INSTANCE_KEY);
-  return isDevToolGlobalInstance(value) ? value : null;
-}
-
-function setGlobalDevToolInstance(instance: DevToolGlobalInstance | null) {
-  if (typeof window === 'undefined') return;
-  if (instance === null) {
-    Reflect.deleteProperty(window, GLOBAL_INSTANCE_KEY);
-  } else {
-    Reflect.set(window, GLOBAL_INSTANCE_KEY, instance);
-  }
-}
-
 function getGlobalLogStore(): LogStore {
   const g = globalThis as any;
   if (!g.__STACK_DEV_TOOL_LOG_STORE__) {
@@ -272,41 +255,6 @@ function generateRandomEmail(): string {
 // DOM helpers
 // ---------------------------------------------------------------------------
 
-function h<K extends keyof HTMLElementTagNameMap>(
-  tag: K,
-  attrs?: Record<string, any> | null,
-  ...children: (string | Node | null | undefined)[]
-): HTMLElementTagNameMap[K] {
-  const el = document.createElement(tag);
-  if (attrs) {
-    for (const [k, v] of Object.entries(attrs)) {
-      if (v == null) continue;
-      if (k === 'className') {
-        el.className = v;
-      } else if (k === 'style' && typeof v === 'object') {
-        Object.assign(el.style, v);
-      } else if (k.startsWith('on') && typeof v === 'function') {
-        el.addEventListener(k.slice(2).toLowerCase(), v);
-      } else {
-        el.setAttribute(k, String(v));
-      }
-    }
-  }
-  for (const child of children) {
-    if (child == null) continue;
-    el.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
-  }
-  return el;
-}
-
-function setHtml(el: HTMLElement, html: string) {
-  el.innerHTML = html;
-}
-
-function hasAppendChild(value: unknown): value is { appendChild(node: Node): void } {
-  return typeof value === 'object' && value !== null && typeof Reflect.get(value, 'appendChild') === 'function';
-}
-
 function parseMarkdownImage(line: string): { alt: string, src: string } | null {
   const match = line.trim().match(/^!\[([^\]]*)\]\((.+)\)$/);
   if (!match) return null;
@@ -666,8 +614,13 @@ function createIframeTab(src: string, title: string, loadingMsg = 'Loading\u2026
 // Overview tab
 // ---------------------------------------------------------------------------
 
+function hasPersistentTokenStoreForDevTool(app: StackClientApp<boolean>): boolean {
+  return app[hexclaveAppInternalsSymbol].getConstructorOptions().tokenStore !== null;
+}
+
 function createOverviewTab(app: StackClientApp<true>): TabResult {
   const container = h('div', { className: 'sdt-ov' });
+  const hasPersistentTokenStore = hasPersistentTokenStoreForDevTool(app);
 
   // ── Identity card ──────────────────────────────────────────────────────────
   const heroCard = h('div', { className: 'sdt-ov-card sdt-ov-card-hero' });
@@ -721,6 +674,12 @@ function createOverviewTab(app: StackClientApp<true>): TabResult {
 
   function rebuildActions() {
     actions.innerHTML = '';
+    if (!hasPersistentTokenStore) {
+      userName.textContent = 'Current user unavailable';
+      userEmail.textContent = 'This app was initialized without a token store';
+      actions.appendChild(h('button', { className: 'sdt-ov-btn sdt-ov-btn-wide', disabled: 'true' }, 'Session actions unavailable'));
+      return;
+    }
     if (currentUser) {
       const signOutBtn = h('button', { className: 'sdt-ov-btn sdt-ov-btn-danger' }, 'Sign Out');
       signOutBtn.disabled = loading;
@@ -895,10 +854,13 @@ function createOverviewTab(app: StackClientApp<true>): TabResult {
 
   function buildChecklist() {
     checksCard.innerHTML = '';
+    const currentUserCheck = hasPersistentTokenStore
+      ? { ok: !!currentUser, label: 'Sign in a test user', hint: 'Use \u201cQuick Sign In\u201d above \u2192' }
+      : { ok: true, label: 'Current-user tools unavailable', hint: null };
     const checks = [
       { ok: !!projectId && projectId !== 'default', label: 'Project configured', hint: null },
       { ok: hasActiveAuthMethod === true, label: 'Auth method active', hint: hasActiveAuthMethod === null ? 'Still checking project config' : null },
-      { ok: !!currentUser, label: 'Sign in a test user', hint: 'Use \u201cQuick Sign In\u201d above \u2192' },
+      currentUserCheck,
     ];
     const passCount = checks.filter((c) => c.ok).length;
     const allGood = passCount === checks.length;
@@ -940,6 +902,17 @@ function createOverviewTab(app: StackClientApp<true>): TabResult {
   }
 
   async function refreshUser() {
+    if (!hasPersistentTokenStore) {
+      avatar.className = 'sdt-ov-avatar';
+      avatar.textContent = '?';
+      userName.textContent = 'Current user unavailable';
+      userEmail.textContent = 'This app was initialized without a token store';
+      authIndicator.style.display = 'none';
+      currentUser = null;
+      rebuildActions();
+      buildChecklist();
+      return;
+    }
     try {
       currentUser = await app.getUser();
 
@@ -2354,7 +2327,7 @@ export function createDevTool(app: StackClientApp<true>): () => void {
   const body = Reflect.get(document, 'body');
   if (!hasAppendChild(body)) return () => {};
 
-  getGlobalDevToolInstance()?.cleanup();
+  getGlobalUiInstance(GLOBAL_INSTANCE_KEY)?.cleanup();
   let existingRoot = document.getElementById(ROOT_ID);
   while (existingRoot !== null) {
     existingRoot.remove();
@@ -2436,12 +2409,12 @@ export function createDevTool(app: StackClientApp<true>): () => void {
   });
 
   let didCleanup = false;
-  const instance: DevToolGlobalInstance = {
+  const instance: UiGlobalInstance = {
     cleanup: () => {
       if (didCleanup) return;
       didCleanup = true;
-      if (getGlobalDevToolInstance() === instance) {
-        setGlobalDevToolInstance(null);
+      if (getGlobalUiInstance(GLOBAL_INSTANCE_KEY) === instance) {
+        setGlobalUiInstance(GLOBAL_INSTANCE_KEY, null);
       }
       trigger.cleanup();
       removeRequestListener();
@@ -2451,7 +2424,7 @@ export function createDevTool(app: StackClientApp<true>): () => void {
       }
     },
   };
-  setGlobalDevToolInstance(instance);
+  setGlobalUiInstance(GLOBAL_INSTANCE_KEY, instance);
 
   return () => {
     instance.cleanup();

package/src/dev-tool/dev-tool-styles.ts

@@ -5,53 +5,11 @@
 // Theme-aware CSS for the dev tool indicator
 // Respects Stack theme (data-stack-theme attribute) and system prefers-color-scheme
 // Uses .hexclave-devtool scope to avoid conflicts with host app styles
+// Design tokens + base reset come from the shared in-page-ui module.
 
-export const devToolCSS = `
-  .hexclave-devtool {
-    --sdt-bg: #0a0a0b;
-    --sdt-bg-elevated: #141416;
-    --sdt-bg-hover: #1c1c1f;
-    --sdt-bg-active: #232326;
-    --sdt-bg-subtle: #111113;
-    --sdt-border: #2a2a2e;
-    --sdt-border-subtle: #1e1e22;
-    --sdt-text: #ececef;
-    --sdt-text-secondary: #8b8b93;
-    --sdt-text-tertiary: #5c5c66;
-    --sdt-accent: #6366f1;
-    --sdt-accent-hover: #818cf8;
-    --sdt-accent-muted: rgba(99, 102, 241, 0.15);
-    --sdt-success: #22c55e;
-    --sdt-success-muted: rgba(34, 197, 94, 0.15);
-    --sdt-warning: #eab308;
-    --sdt-warning-muted: rgba(234, 179, 8, 0.15);
-    --sdt-error: #ef4444;
-    --sdt-error-muted: rgba(239, 68, 68, 0.15);
-    --sdt-info: #3b82f6;
-    --sdt-info-muted: rgba(59, 130, 246, 0.15);
-    --sdt-overlay-bg: rgba(17, 17, 19, 0.92);
-    --sdt-radius: 8px;
-    --sdt-radius-sm: 4px;
-    --sdt-radius-lg: 12px;
-    --sdt-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    --sdt-font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
-    --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
-    --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
-
-    all: initial;
-    font-family: var(--sdt-font);
-    color: var(--sdt-text);
-    font-size: 13px;
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    box-sizing: border-box;
-  }
-
-  .hexclave-devtool *, .hexclave-devtool *::before, .hexclave-devtool *::after {
-    box-sizing: border-box;
-  }
+import { getInPageUiBaseCSS } from "../in-page-ui/base-styles";
 
+export const devToolCSS = getInPageUiBaseCSS('.hexclave-devtool') + `
   /* Trigger pill */
   .hexclave-devtool .sdt-trigger {
     position: fixed;
@@ -103,7 +61,7 @@ export const devToolCSS = `
     position: fixed;
     bottom: 60px;
     right: 16px;
-    z-index: 99998;
+    z-index: 2147483647;
     width: 800px;
     max-width: calc(100vw - 32px);
     height: 520px;
@@ -193,6 +151,7 @@ export const devToolCSS = `
     flex-shrink: 0;
     gap: 2px;
     overflow-x: auto;
+    overflow-y: hidden;
   }
 
   .hexclave-devtool .sdt-panel-fullscreen .sdt-tabbar {
@@ -263,9 +222,15 @@ export const devToolCSS = `
   }
 
   .hexclave-devtool .sdt-tabbar-actions {
+    position: sticky;
+    right: 0;
+    z-index: 2;
     display: flex;
     align-items: center;
+    align-self: stretch;
     gap: 4px;
+    padding-left: 6px;
+    background: inherit;
     flex-shrink: 0;
   }
 
@@ -370,19 +335,6 @@ export const devToolCSS = `
     }
   }
 
-  .hexclave-devtool .sdt-tab-pane::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  .hexclave-devtool .sdt-tab-pane::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .hexclave-devtool .sdt-tab-pane::-webkit-scrollbar-thumb {
-    background: var(--sdt-border);
-    border-radius: 3px;
-  }
-
   /* ===== Overview tab — single column ===== */
 
   .hexclave-devtool .sdt-ov {
@@ -1935,35 +1887,8 @@ export const devToolCSS = `
     opacity: 1;
   }
 
-  /* --- Light theme: system preference fallback --- */
-  @media (prefers-color-scheme: light) {
-    .hexclave-devtool {
-      --sdt-bg: #ffffff;
-      --sdt-bg-elevated: #f8f8fa;
-      --sdt-bg-hover: #f0f0f3;
-      --sdt-bg-active: #e8e8ec;
-      --sdt-bg-subtle: #fafafa;
-      --sdt-border: #e0e0e5;
-      --sdt-border-subtle: #eaeaef;
-      --sdt-text: #111113;
-      --sdt-text-secondary: #6b6b73;
-      --sdt-text-tertiary: #9b9ba3;
-      --sdt-accent: #6366f1;
-      --sdt-accent-hover: #4f46e5;
-      --sdt-accent-muted: rgba(99, 102, 241, 0.1);
-      --sdt-success: #16a34a;
-      --sdt-success-muted: rgba(22, 163, 74, 0.1);
-      --sdt-warning: #ca8a04;
-      --sdt-warning-muted: rgba(202, 138, 4, 0.1);
-      --sdt-error: #dc2626;
-      --sdt-error-muted: rgba(220, 38, 38, 0.1);
-      --sdt-info: #2563eb;
-      --sdt-info-muted: rgba(37, 99, 235, 0.1);
-      --sdt-overlay-bg: rgba(255, 255, 255, 0.92);
-      --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
-      --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
-    }
-  }
+  /* Light theme + data-stack-theme overrides come from the shared in-page-ui
+     base styles (in-page-ui/base-styles.ts). */
 
   /* Export dialog — positioned inside the dev tool panel */
   .hexclave-devtool .sdt-share-overlay {
@@ -2701,58 +2626,4 @@ export const devToolCSS = `
     }
   }
 
-  /* --- Stack theme explicit overrides (take priority over system preference) --- */
-  html:has(head > [data-stack-theme="light"]) .hexclave-devtool {
-    --sdt-bg: #ffffff;
-    --sdt-bg-elevated: #f8f8fa;
-    --sdt-bg-hover: #f0f0f3;
-    --sdt-bg-active: #e8e8ec;
-    --sdt-bg-subtle: #fafafa;
-    --sdt-border: #e0e0e5;
-    --sdt-border-subtle: #eaeaef;
-    --sdt-text: #111113;
-    --sdt-text-secondary: #6b6b73;
-    --sdt-text-tertiary: #9b9ba3;
-    --sdt-accent: #6366f1;
-    --sdt-accent-hover: #4f46e5;
-    --sdt-accent-muted: rgba(99, 102, 241, 0.1);
-    --sdt-success: #16a34a;
-    --sdt-success-muted: rgba(22, 163, 74, 0.1);
-    --sdt-warning: #ca8a04;
-    --sdt-warning-muted: rgba(202, 138, 4, 0.1);
-    --sdt-error: #dc2626;
-    --sdt-error-muted: rgba(220, 38, 38, 0.1);
-    --sdt-info: #2563eb;
-    --sdt-info-muted: rgba(37, 99, 235, 0.1);
-    --sdt-overlay-bg: rgba(255, 255, 255, 0.92);
-    --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
-    --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
-  }
-
-  html:has(head > [data-stack-theme="dark"]) .hexclave-devtool {
-    --sdt-bg: #0a0a0b;
-    --sdt-bg-elevated: #141416;
-    --sdt-bg-hover: #1c1c1f;
-    --sdt-bg-active: #232326;
-    --sdt-bg-subtle: #111113;
-    --sdt-border: #2a2a2e;
-    --sdt-border-subtle: #1e1e22;
-    --sdt-text: #ececef;
-    --sdt-text-secondary: #8b8b93;
-    --sdt-text-tertiary: #5c5c66;
-    --sdt-accent: #6366f1;
-    --sdt-accent-hover: #818cf8;
-    --sdt-accent-muted: rgba(99, 102, 241, 0.15);
-    --sdt-success: #22c55e;
-    --sdt-success-muted: rgba(34, 197, 94, 0.15);
-    --sdt-warning: #eab308;
-    --sdt-warning-muted: rgba(234, 179, 8, 0.15);
-    --sdt-error: #ef4444;
-    --sdt-error-muted: rgba(239, 68, 68, 0.15);
-    --sdt-info: #3b82f6;
-    --sdt-info-muted: rgba(59, 130, 246, 0.15);
-    --sdt-overlay-bg: rgba(17, 17, 19, 0.92);
-    --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
-    --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
-  }
 `;

package/src/dev-tool/index.ts

@@ -7,25 +7,12 @@ import type { StackClientApp } from "../lib/hexclave-app";
 import { captureError } from "@hexclave/shared/dist/utils/errors";
 import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
 import { isLocalhost } from "@hexclave/shared/dist/utils/urls";
+import { canMountIntoDom } from "../in-page-ui/dom";
 import type { createDevTool as CreateDevToolFn } from "./dev-tool-core";
 
 // Hexclave rebrand: UI-only local pref — straight rename (one-time reset is harmless)
 const OVERRIDE_KEY = '__hexclave-dev-tool-override';
 
-function hasAppendChild(value: unknown): value is { appendChild(node: Node): void } {
-  return typeof value === 'object' && value !== null && typeof Reflect.get(value, 'appendChild') === 'function';
-}
-
-function canMountIntoDom(): boolean {
-  if (typeof window === 'undefined' || typeof document === 'undefined') {
-    return false;
-  }
-  if (typeof document.createElement !== 'function') {
-    return false;
-  }
-  return hasAppendChild(Reflect.get(document, 'body'));
-}
-
 function getOverride(): boolean | null {
   try {
     const val = localStorage.getItem(OVERRIDE_KEY);