@hexclave/js 1.0.13 → 1.0.15

package/dist/esm/clickmap/clickmap-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickmap-styles.js","names":[],"sources":["../../../src/clickmap/clickmap-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// CSS for the standalone clickmap overlay.\n//\n// The clickmap is fully independent from the dev tool: it ships its own\n// stylesheet and panel chrome so the dev tool (and its stylesheet) can be\n// removed without affecting the clickmap. Class names keep the shared `sdt-`\n// prefix on purpose — the analytics ingest/query layers exclude self-clicks by\n// that prefix (see @hexclave/shared/dist/utils/dev-tool).\n// Uses the .hexclave-clickmap 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 clickmapCSS = getInPageUiBaseCSS('.hexclave-clickmap') + `\n  /* Bottom-centered floating panel (the clickmap's only chrome) */\n  .hexclave-clickmap .sdt-hm-panel {\n    position: fixed;\n    left: 50%;\n    bottom: 18px;\n    z-index: 2147483647;\n    width: min(680px, calc(100vw - 24px));\n    max-width: calc(100vw - 24px);\n    max-height: calc(100vh - 36px);\n    transform: translateX(-50%);\n    display: flex;\n    flex-direction: column;\n    overflow: visible;\n  }\n\n  .hexclave-clickmap .sdt-hm-panel-inner {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    animation: sdt-hm-panel-enter 0.2s ease-out;\n  }\n\n  @keyframes sdt-hm-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  /* --- Clickmaps --- */\n\n  .hexclave-clickmap .sdt-hm {\n    height: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    overflow: visible;\n    background: transparent;\n  }\n\n  /* One spacing rhythm across the pill: a tight 2px base gap so adjacent\n     controls read as clusters, with the wider between-group separation\n     coming only from the metrics block's own padding (and the title's\n     trailing padding). Item-level whitespace inside ghost icon buttons\n     already provides the rest of the breathing room. */\n  .hexclave-clickmap .sdt-hm-toolbar {\n    position: relative;\n    z-index: 4;\n    display: flex;\n    align-items: center;\n    gap: 2px;\n    min-height: 44px;\n    padding: 6px 8px;\n    border: 1px solid var(--sdt-border);\n    border-radius: 999px;\n    background: var(--sdt-overlay-bg);\n    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);\n    backdrop-filter: blur(18px);\n  }\n\n  .hexclave-clickmap .sdt-hm-toolbar-title {\n    flex-shrink: 0;\n    padding: 0 6px 0 2px;\n    font-size: 13px;\n    font-weight: 650;\n    color: var(--sdt-text);\n    line-height: 1.1;\n  }\n\n  .hexclave-clickmap .sdt-hm-toolbar-filters {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .hexclave-clickmap .sdt-hm-toolbar-filters .sdt-hm-filter-input {\n    height: 28px;\n    border-radius: 999px;\n    font-size: 11.5px;\n  }\n\n  .hexclave-clickmap .sdt-hm-toolbar-filters > .sdt-hm-filter-input {\n    flex-shrink: 0;\n    width: auto;\n    max-width: 120px;\n    padding-right: 4px;\n  }\n\n  .hexclave-clickmap .sdt-hm-toolbar-url {\n    position: relative;\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    /* The revert/info ghost buttons hug the input they belong to. */\n    gap: 2px;\n  }\n\n  .hexclave-clickmap .sdt-hm-toolbar-url .sdt-hm-filter-input {\n    flex: 1;\n  }\n\n  .hexclave-clickmap .sdt-hm-mode {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    padding: 2px;\n    border-radius: 999px;\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n  }\n\n  .hexclave-clickmap .sdt-hm-mode-btn {\n    min-width: 24px;\n    height: 20px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    border-radius: 999px;\n    background: transparent;\n    color: var(--sdt-text-tertiary);\n    padding: 0 7px;\n    font: inherit;\n    font-family: var(--sdt-font-mono, ui-monospace, monospace);\n    font-size: 11px;\n    font-weight: 600;\n    cursor: pointer;\n  }\n\n  .hexclave-clickmap .sdt-hm-mode-btn:not(.sdt-hm-mode-btn-active):hover {\n    color: var(--sdt-text);\n  }\n\n  .hexclave-clickmap .sdt-hm-mode-btn-active {\n    background: var(--sdt-accent);\n    color: white;\n  }\n\n  .hexclave-clickmap .sdt-hm-filter-input-error,\n  .hexclave-clickmap .sdt-hm-filter-input-error:focus {\n    border-color: var(--sdt-error);\n  }\n\n  .hexclave-clickmap .sdt-hm-filter-info {\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    border-radius: 999px;\n    background: transparent;\n    color: var(--sdt-text-tertiary);\n    cursor: pointer;\n    padding: 0;\n  }\n\n  .hexclave-clickmap .sdt-hm-filter-info:hover,\n  .hexclave-clickmap .sdt-hm-filter-info[aria-expanded=\"true\"] {\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n  }\n\n  .hexclave-clickmap .sdt-hm-url-help {\n    display: none;\n    position: absolute;\n    bottom: calc(100% + 10px);\n    right: 0;\n    z-index: 6;\n    width: 320px;\n    max-width: min(320px, calc(100vw - 32px));\n    box-sizing: border-box;\n    padding: 14px;\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius-lg);\n    background: var(--sdt-bg);\n    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);\n    backdrop-filter: blur(18px);\n    cursor: default;\n  }\n\n  .hexclave-clickmap .sdt-hm-url-help-open {\n    display: block;\n  }\n\n  .hexclave-clickmap .sdt-hm-url-help-title {\n    font-size: 12px;\n    font-weight: 650;\n    color: var(--sdt-text);\n    margin-bottom: 6px;\n  }\n\n  .hexclave-clickmap .sdt-hm-url-help-body {\n    font-size: 11.5px;\n    line-height: 1.5;\n    color: var(--sdt-text-secondary);\n  }\n\n  .hexclave-clickmap .sdt-hm-url-help-rows {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--sdt-border-subtle);\n  }\n\n  .hexclave-clickmap .sdt-hm-url-help-row {\n    display: flex;\n    align-items: baseline;\n    gap: 10px;\n  }\n\n  .hexclave-clickmap .sdt-hm-url-help-code {\n    flex-shrink: 0;\n    border-radius: var(--sdt-radius);\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    padding: 1px 6px;\n    font-family: var(--sdt-font-mono, ui-monospace, monospace);\n    font-size: 11px;\n    color: var(--sdt-text);\n    white-space: nowrap;\n  }\n\n  .hexclave-clickmap .sdt-hm-url-help-desc {\n    font-size: 11px;\n    line-height: 1.4;\n    color: var(--sdt-text-secondary);\n  }\n\n  .hexclave-clickmap .sdt-hm-toolbar-metrics {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    /* Side padding is what separates the metrics group from the url field\n       on its left and the toggle cluster on its right. */\n    padding: 0 8px;\n  }\n\n  .hexclave-clickmap .sdt-hm-toolbar-metric {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--sdt-text-secondary);\n  }\n\n  .hexclave-clickmap .sdt-hm-toolbar-metric-value {\n    font-size: 12px;\n    font-weight: 700;\n    color: var(--sdt-text);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .hexclave-clickmap .sdt-hm-toolbar-metric-icon {\n    display: inline-flex;\n    align-items: center;\n    color: var(--sdt-text-tertiary);\n  }\n\n  .hexclave-clickmap .sdt-hm-icon-btn {\n    width: 28px;\n    height: 28px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border: 0;\n    border-radius: 999px;\n    background: transparent;\n    color: var(--sdt-text-secondary);\n    cursor: pointer;\n  }\n\n  .hexclave-clickmap .sdt-hm-icon-btn:hover {\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n  }\n\n  /* Presses must always target the button itself: the chevron svg is replaced\n     when the panel toggles, and a press whose mousedown landed on a since-\n     detached svg never produces a click. */\n  .hexclave-clickmap .sdt-hm-icon-btn svg {\n    pointer-events: none;\n  }\n\n  /* Styled tooltips for toolbar controls, driven by a data-sdt-tip attribute\n     instead of native title so they match the overlay theme and also show on\n     keyboard focus. The hover transition-delay acts as a hover-intent gate so\n     tooltips don't flash while the pointer crosses the toolbar; hover-out has\n     no delay, so they dismiss instantly. */\n  .hexclave-clickmap [data-sdt-tip] {\n    position: relative;\n  }\n\n  .hexclave-clickmap [data-sdt-tip]::after {\n    content: attr(data-sdt-tip);\n    position: absolute;\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%) translateY(2px);\n    padding: 4px 8px;\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius);\n    background: var(--sdt-overlay-bg);\n    backdrop-filter: blur(18px);\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);\n    color: var(--sdt-text);\n    font-size: 11px;\n    font-weight: 600;\n    line-height: 1.2;\n    white-space: nowrap;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.12s ease, transform 0.12s ease;\n    z-index: 3;\n  }\n\n  .hexclave-clickmap [data-sdt-tip]:hover::after,\n  .hexclave-clickmap [data-sdt-tip]:focus-visible::after {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n    transition-delay: 0.35s;\n  }\n\n  /* The info button's tooltip would sit on top of its own help popover. */\n  .hexclave-clickmap .sdt-hm-filter-info[aria-expanded=\"true\"]::after {\n    opacity: 0;\n  }\n\n  .hexclave-clickmap .sdt-hm-details {\n    display: none;\n    position: relative;\n    z-index: 1;\n    max-height: min(460px, calc(100vh - 98px));\n    overflow: hidden;\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius-lg);\n    background: var(--sdt-bg);\n    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);\n  }\n\n  .hexclave-clickmap .sdt-hm-expanded .sdt-hm-details {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .hexclave-clickmap .sdt-hm-head {\n    flex-shrink: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    padding: 16px;\n    border-bottom: 1px solid var(--sdt-border-subtle);\n  }\n\n  .hexclave-clickmap .sdt-hm-filters {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .hexclave-clickmap .sdt-hm-filter-row {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n  }\n\n  .hexclave-clickmap .sdt-hm-seg {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    gap: 2px;\n    height: 30px;\n    padding: 3px;\n    border-radius: var(--sdt-radius);\n    border: 1px solid var(--sdt-border-subtle);\n    background: var(--sdt-bg-elevated);\n    box-sizing: border-box;\n  }\n\n  .hexclave-clickmap .sdt-hm-seg-thumb {\n    position: absolute;\n    top: 3px;\n    left: 0;\n    bottom: 3px;\n    width: 0;\n    border-radius: calc(var(--sdt-radius) - 2px);\n    background: var(--sdt-bg);\n    border: 1px solid var(--sdt-border);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);\n    transform: translateX(0);\n    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), width 220ms cubic-bezier(0.22, 1, 0.36, 1);\n    pointer-events: none;\n  }\n\n  .hexclave-clickmap .sdt-hm-seg-btn {\n    position: relative;\n    z-index: 1;\n    flex: 1 1 0;\n    min-width: 0;\n    border: 0;\n    background: transparent;\n    color: var(--sdt-text-tertiary);\n    font: inherit;\n    font-family: var(--sdt-font);\n    font-size: 11px;\n    font-weight: 600;\n    line-height: 1;\n    padding: 0 4px;\n    border-radius: calc(var(--sdt-radius) - 2px);\n    cursor: pointer;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transition: color 160ms ease;\n  }\n\n  .hexclave-clickmap .sdt-hm-seg-btn:hover {\n    color: var(--sdt-text-secondary);\n  }\n\n  .hexclave-clickmap .sdt-hm-seg-btn[aria-checked=\"true\"] {\n    color: var(--sdt-text);\n  }\n\n  .hexclave-clickmap .sdt-hm-seg-btn:focus-visible {\n    outline: 2px solid var(--sdt-accent);\n    outline-offset: -2px;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .hexclave-clickmap .sdt-hm-seg-thumb {\n      transition: none;\n    }\n  }\n\n  .hexclave-clickmap .sdt-hm-filter-field {\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n    min-width: 0;\n  }\n\n  .hexclave-clickmap .sdt-hm-filter-label-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 6px;\n    min-height: 13px;\n  }\n\n  .hexclave-clickmap .sdt-hm-filter-label {\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--sdt-text-tertiary);\n  }\n\n  .hexclave-clickmap .sdt-hm-filter-reset {\n    display: none;\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    border-radius: 999px;\n    background: transparent;\n    padding: 0;\n    color: var(--sdt-accent);\n    cursor: pointer;\n  }\n\n  .hexclave-clickmap .sdt-hm-filter-reset:hover {\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-accent-hover);\n  }\n\n  .hexclave-clickmap .sdt-hm-filter-reset-visible {\n    display: inline-flex;\n  }\n\n  .hexclave-clickmap .sdt-hm-filter-input {\n    height: 30px;\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);\n    padding: 0 9px;\n    font: inherit;\n    font-size: 12px;\n    font-family: var(--sdt-font);\n    min-width: 0;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .hexclave-clickmap .sdt-hm-filter-input:focus {\n    outline: none;\n    border-color: var(--sdt-accent);\n  }\n\n  .hexclave-clickmap .sdt-hm-actions {\n    display: flex;\n    align-items: stretch;\n    gap: 10px;\n  }\n\n  .hexclave-clickmap .sdt-hm-actions .sdt-hm-btn {\n    height: auto;\n    flex-shrink: 0;\n    white-space: nowrap;\n    padding: 0 16px;\n  }\n\n  .hexclave-clickmap .sdt-hm-btn {\n    height: 30px;\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    padding: 0 10px;\n    font: inherit;\n    font-size: 12px;\n    cursor: pointer;\n    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n  }\n\n  .hexclave-clickmap .sdt-hm-btn:hover {\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n    transition: none;\n  }\n\n  .hexclave-clickmap .sdt-hm-btn-primary {\n    background: var(--sdt-accent);\n    border-color: var(--sdt-accent);\n    color: white;\n  }\n\n  .hexclave-clickmap .sdt-hm-btn-primary:hover {\n    background: var(--sdt-accent);\n    border-color: var(--sdt-accent);\n    color: white;\n    transition: none;\n  }\n\n  .hexclave-clickmap .sdt-hm-btn-sm {\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: 999px;\n    padding: 0 10px;\n    font-size: 11px;\n    font-weight: 600;\n    white-space: nowrap;\n  }\n\n  .hexclave-clickmap .sdt-hm-btn:disabled {\n    opacity: 0.45;\n    pointer-events: none;\n  }\n\n  /* Dead-clicks-only filter toggle (toolbar icon button + expanded-panel\n     button). Active state borrows the error tint used by the dead chips so\n     the mode reads as \"you are looking at failures\". */\n  .hexclave-clickmap .sdt-hm-dead-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n  }\n\n  .hexclave-clickmap .sdt-hm-dead-toggle-icon {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .hexclave-clickmap .sdt-hm-dead-toggle-active,\n  .hexclave-clickmap .sdt-hm-dead-toggle-active:hover {\n    background: var(--sdt-error-muted);\n    border-color: var(--sdt-error);\n    color: var(--sdt-error);\n    transition: none;\n  }\n\n  /* Toolbar overlay toggle while the overlay is hidden: tinted so the off\n     state reads at a glance, eye-off icon carries the meaning. */\n  .hexclave-clickmap .sdt-hm-overlay-mini-off,\n  .hexclave-clickmap .sdt-hm-overlay-mini-off:hover {\n    background: var(--sdt-accent-muted);\n    color: var(--sdt-accent-hover);\n  }\n\n  .hexclave-clickmap .sdt-hm-stats {\n    flex: 1;\n    min-width: 0;\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 8px;\n  }\n\n  .hexclave-clickmap .sdt-hm-stat {\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    border-radius: var(--sdt-radius);\n    background: var(--sdt-bg-elevated);\n    padding: 7px 10px;\n  }\n\n  .hexclave-clickmap .sdt-hm-stat-label {\n    font-size: 9.5px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--sdt-text-tertiary);\n  }\n\n  .hexclave-clickmap .sdt-hm-stat-value {\n    font-size: 15px;\n    font-weight: 650;\n    color: var(--sdt-text);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* No top padding on the scroller: the sticky list header pins at top 0,\n     and scroller padding reads as a see-through strip above it while the\n     list scrolls (Chromium offsets sticky insets by the scroll container's\n     padding). The status line below carries the 12px instead. */\n  .hexclave-clickmap .sdt-hm-body {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    padding: 0 16px 14px;\n  }\n\n  .hexclave-clickmap .sdt-hm-token-status {\n    color: var(--sdt-text-secondary);\n    padding: 12px 2px 0;\n    font-size: 11.5px;\n    line-height: 1.45;\n  }\n\n  .hexclave-clickmap .sdt-hm-token-status-error {\n    color: var(--sdt-error);\n  }\n\n  .hexclave-clickmap .sdt-hm-viewport-warning {\n    display: none;\n    gap: 8px;\n    padding: 10px;\n    border-radius: var(--sdt-radius);\n    border: 1px solid rgba(234, 179, 8, 0.24);\n    background: var(--sdt-warning-muted);\n    color: var(--sdt-text);\n  }\n\n  .hexclave-clickmap .sdt-hm-viewport-warning-visible {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .hexclave-clickmap .sdt-hm-viewport-warning-title {\n    font-size: 12px;\n    font-weight: 650;\n    color: var(--sdt-text);\n    line-height: 1.2;\n  }\n\n  .hexclave-clickmap .sdt-hm-viewport-warning-body {\n    font-size: 11.5px;\n    line-height: 1.45;\n    color: var(--sdt-text-secondary);\n  }\n\n  .hexclave-clickmap .sdt-hm-viewport-warning-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  .hexclave-clickmap .sdt-hm-viewport-warning-action {\n    min-width: 0;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    border-radius: var(--sdt-radius);\n    border: 1px solid var(--sdt-border-subtle);\n    background: var(--sdt-bg-elevated);\n    padding: 4px 5px 4px 8px;\n  }\n\n  .hexclave-clickmap .sdt-hm-viewport-warning-label {\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--sdt-text-tertiary);\n  }\n\n  .hexclave-clickmap .sdt-hm-viewport-warning-code {\n    font-family: var(--sdt-font-mono);\n    font-size: 11.5px;\n    font-weight: 650;\n    color: var(--sdt-text);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .hexclave-clickmap .sdt-hm-copy-btn {\n    height: 22px;\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: 999px;\n    background: var(--sdt-bg);\n    color: var(--sdt-text-secondary);\n    padding: 0 8px;\n    font: inherit;\n    font-size: 10.5px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n  }\n\n  .hexclave-clickmap .sdt-hm-copy-btn:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n    color: var(--sdt-text);\n    transition: none;\n  }\n\n  .hexclave-clickmap .sdt-hm-list {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  }\n\n  /* Datagrid-style header above the element list. Sticky inside the\n     scrolling body (full-bleed via negative margins) so select-all and the\n     bulk show/hide actions stay reachable while the list scrolls. The 24px\n     left padding lines its master checkbox up with the row checkboxes\n     (16px body padding + 8px row padding). */\n  .hexclave-clickmap .sdt-hm-list-header {\n    display: none;\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    align-items: center;\n    gap: 8px;\n    margin: 0 -16px;\n    padding: 8px 24px;\n    background: var(--sdt-bg);\n    border-bottom: 1px solid var(--sdt-border-subtle);\n  }\n\n  .hexclave-clickmap .sdt-hm-list-header-visible {\n    display: flex;\n  }\n\n  .hexclave-clickmap .sdt-hm-list-header-summary {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--sdt-text-secondary);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* Element search, compacted to header height. Shrinks before the summary\n     does, but never below a usable width. */\n  .hexclave-clickmap .sdt-hm-list-header .sdt-hm-filter-input {\n    flex: 0 1 220px;\n    width: auto;\n    min-width: 90px;\n    height: 24px;\n    border-radius: 999px;\n    font-size: 11px;\n    padding: 0 10px;\n  }\n\n  .hexclave-clickmap .sdt-hm-empty {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 140px;\n    border-radius: var(--sdt-radius);\n    border: 1px dashed var(--sdt-border);\n    color: var(--sdt-text-tertiary);\n    font-size: 12px;\n    text-align: center;\n    padding: 0 16px;\n  }\n\n  .hexclave-clickmap .sdt-hm-row {\n    width: 100%;\n    display: grid;\n    grid-template-columns: 16px minmax(42px, auto) minmax(0, 1fr) 24px;\n    align-items: center;\n    gap: 10px;\n    border: 0;\n    border-radius: var(--sdt-radius);\n    background: transparent;\n    color: var(--sdt-text);\n    padding: 8px;\n    text-align: left;\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    user-select: none;\n  }\n\n  .hexclave-clickmap .sdt-hm-row:hover {\n    background: var(--sdt-bg-hover);\n    transition: none;\n  }\n\n  .hexclave-clickmap .sdt-hm-row:focus-visible {\n    outline: 2px solid var(--sdt-accent);\n    outline-offset: 2px;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-muted {\n    opacity: 0.52;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-highlighted {\n    background: rgba(250, 204, 21, 0.12);\n  }\n\n  /* Declared after -highlighted and with a :hover pair so the selection tint\n     wins over both the lead-highlight wash and the plain hover background. */\n  .hexclave-clickmap .sdt-hm-row-selected,\n  .hexclave-clickmap .sdt-hm-row-selected:hover {\n    background: var(--sdt-accent-muted);\n  }\n\n  /* Row checkbox (also reused as the list header's master checkbox). A\n     button with role=checkbox instead of a native input so it can render the\n     overlay-themed check/indeterminate icons. */\n  .hexclave-clickmap .sdt-hm-row-check {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 16px;\n    height: 16px;\n    flex-shrink: 0;\n    border: 1px solid var(--sdt-border);\n    border-radius: calc(var(--sdt-radius) - 3px);\n    background: var(--sdt-bg-elevated);\n    color: white;\n    appearance: none;\n    padding: 0;\n    cursor: pointer;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-check:hover {\n    border-color: var(--sdt-accent);\n  }\n\n  .hexclave-clickmap .sdt-hm-row-check[aria-checked=\"true\"],\n  .hexclave-clickmap .sdt-hm-row-check[aria-checked=\"mixed\"] {\n    background: var(--sdt-accent);\n    border-color: var(--sdt-accent);\n  }\n\n  .hexclave-clickmap .sdt-hm-row-check:focus-visible {\n    outline: 2px solid var(--sdt-accent);\n    outline-offset: 2px;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-check svg {\n    pointer-events: none;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-count {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 24px;\n    border-radius: calc(var(--sdt-radius) - 2px);\n    background: var(--sdt-accent-muted);\n    color: var(--sdt-accent-hover);\n    padding: 0 7px;\n    font-size: 12px;\n    font-weight: 700;\n    font-variant-numeric: tabular-nums;\n    font-family: var(--sdt-font);\n  }\n\n  .hexclave-clickmap .sdt-hm-row-muted .sdt-hm-row-count {\n    background: var(--sdt-bg-elevated);\n    color: var(--sdt-text-tertiary);\n  }\n\n  .hexclave-clickmap .sdt-hm-row-eye {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: calc(var(--sdt-radius) - 2px);\n    background: var(--sdt-bg-elevated);\n    color: var(--sdt-text-secondary);\n    appearance: none;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .hexclave-clickmap .sdt-hm-row:hover .sdt-hm-row-eye,\n  .hexclave-clickmap .sdt-hm-row:focus-within .sdt-hm-row-eye,\n  .hexclave-clickmap .sdt-hm-row-muted .sdt-hm-row-eye {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-eye:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n    color: var(--sdt-text);\n    transition: none;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-eye:focus-visible {\n    outline: 2px solid var(--sdt-accent);\n    outline-offset: 2px;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-meta {\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-label-row {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    min-width: 0;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n    font-size: 12px;\n    font-weight: 600;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-dead {\n    display: none;\n    flex: none;\n    align-items: center;\n    height: 16px;\n    border-radius: calc(var(--sdt-radius) - 3px);\n    background: var(--sdt-error-muted);\n    color: var(--sdt-error);\n    padding: 0 5px;\n    font-size: 10px;\n    font-weight: 700;\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-dead-visible {\n    display: inline-flex;\n  }\n\n  .hexclave-clickmap .sdt-hm-row-selector {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-family: var(--sdt-font-mono);\n    font-size: 10.5px;\n    color: var(--sdt-text-tertiary);\n  }\n\n  .sdt-hm-overlay-root {\n    position: fixed;\n    inset: 0;\n    z-index: 2147483646;\n    pointer-events: none;\n    --resize-dur: 320ms;\n    --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  }\n\n  .sdt-hm-overlay-root .sdt-hm-marker {\n    position: fixed;\n    transform: translate(-50%, -50%);\n    min-width: 28px;\n    height: 24px;\n    border-radius: 999px;\n    padding: 0 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    color: rgba(10, 10, 11, 0.92);\n    font: 700 12px/1 var(--sdt-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    pointer-events: auto;\n    transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease;\n  }\n\n  .sdt-hm-overlay-root .sdt-hm-marker:hover {\n    transform: translate(-50%, -50%) scale(1.06);\n    transition: none;\n  }\n\n  .sdt-hm-overlay-root .sdt-hm-marker-muted {\n    opacity: 0.18;\n    filter: saturate(0.25);\n    text-decoration: line-through;\n  }\n\n  .sdt-hm-overlay-root .sdt-hm-marker-highlighted {\n    transform: translate(-50%, -50%) scale(1.08);\n  }\n\n  .sdt-hm-overlay-root .sdt-hm-outline {\n    position: fixed;\n    border: 1px solid;\n    border-radius: 4px;\n    background: rgba(99, 102, 241, 0.04);\n    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;\n  }\n\n  .sdt-hm-overlay-root .sdt-hm-outline-muted {\n    opacity: 0;\n  }\n\n  .sdt-hm-overlay-root .sdt-hm-outline-highlighted {\n    border-color: rgba(250, 204, 21, 0.92) !important;\n  }\n\n  .sdt-hm-overlay-root .sdt-hm-highlight {\n    position: fixed;\n    border-radius: 5px;\n    background: rgba(250, 204, 21, 0.28);\n    box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.7), 0 0 0 9999px rgba(0, 0, 0, 0.04);\n    opacity: 0;\n    will-change: top, left, width, height;\n    transition: opacity 0.18s ease;\n  }\n\n  .sdt-hm-overlay-root .sdt-hm-highlight-visible {\n    opacity: 1;\n  }\n\n  .sdt-hm-overlay-root .sdt-hm-highlight-animating {\n    transition:\n      top var(--resize-dur) var(--resize-ease),\n      left var(--resize-dur) var(--resize-ease),\n      width var(--resize-dur) var(--resize-ease),\n      height var(--resize-dur) var(--resize-ease),\n      opacity 0.18s ease;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .sdt-hm-overlay-root .sdt-hm-highlight-animating {\n      transition: opacity 0.18s ease;\n    }\n  }\n`;\n"],"mappings":";;;AAgBA,MAAa,cAAc,mBAAmB,qBAAqB,GAAG"}

package/dist/esm/clickmap/index.d.ts

@@ -0,0 +1,16 @@
+import { StackClientApp } from "../lib/hexclave-app";
+
+//#region src/clickmap/index.d.ts
+/**
+ * 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.
+ */
+declare function mountClickmapOverlay(app: StackClientApp<true>): () => void;
+//#endregion
+export { mountClickmapOverlay };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/clickmap/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/clickmap/index.ts"],"mappings":";;;;;AA2EA;;;;;;;iBAAgB,oBAAA,CAAqB,GAAA,EAAK,cAAA"}

package/dist/esm/clickmap/index.js

@@ -0,0 +1,72 @@
+import { CLICKMAP_OVERLAY_RESUME_STORAGE_KEY, CLICKMAP_OVERLAY_TOKEN_UPDATED_EVENT } from "@hexclave/shared/dist/utils/analytics-clickmap-overlay";
+import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
+import { canMountIntoDom } from "../in-page-ui/dom.js";
+import { captureError } from "@hexclave/shared/dist/utils/errors";
+
+//#region src/clickmap/index.ts
+function consumeResumeSentinel() {
+	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 = null;
+let activeOverlayCleanup = null;
+let openGeneration = 0;
+let tokenListenerAttached = false;
+let openClickmapOverlayPromise = null;
+function loadOpenClickmapOverlay() {
+	if (!openClickmapOverlayPromise) openClickmapOverlayPromise = import("./clickmap-core.js").then((m) => m.openClickmapOverlay).catch((err) => {
+		openClickmapOverlayPromise = null;
+		throw err;
+	});
+	return openClickmapOverlayPromise;
+}
+function tryOpenOverlay() {
+	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.
+*/
+function mountClickmapOverlay(app) {
+	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?.();
+	};
+}
+
+//#endregion
+export { mountClickmapOverlay };
+//# sourceMappingURL=index.js.map

package/dist/esm/clickmap/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/clickmap/index.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport {\n  CLICKMAP_OVERLAY_RESUME_STORAGE_KEY,\n  CLICKMAP_OVERLAY_TOKEN_UPDATED_EVENT,\n} from \"@hexclave/shared/dist/utils/analytics-clickmap-overlay\";\nimport { captureError } from \"@hexclave/shared/dist/utils/errors\";\nimport { runAsynchronously } from \"@hexclave/shared/dist/utils/promises\";\nimport { canMountIntoDom } from \"../in-page-ui/dom\";\nimport type { StackClientApp } from \"../lib/hexclave-app\";\nimport type { openClickmapOverlay as OpenClickmapOverlayFn } from \"./clickmap-core\";\n\n// While the overlay is open it drops a sentinel into sessionStorage on unload\n// (see clickmap-core); consuming it here reopens the clickmap on the next page\n// so the user picks up where they left off.\nfunction consumeResumeSentinel(): boolean {\n  try {\n    if (sessionStorage.getItem(CLICKMAP_OVERLAY_RESUME_STORAGE_KEY) !== '1') return false;\n    sessionStorage.removeItem(CLICKMAP_OVERLAY_RESUME_STORAGE_KEY);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\nlet activeApp: StackClientApp<true> | null = null;\nlet activeOverlayCleanup: (() => void) | null = null;\nlet openGeneration = 0;\nlet tokenListenerAttached = false;\n\nlet openClickmapOverlayPromise: Promise<typeof OpenClickmapOverlayFn> | null = null;\nfunction loadOpenClickmapOverlay(): Promise<typeof OpenClickmapOverlayFn> {\n  if (!openClickmapOverlayPromise) {\n    openClickmapOverlayPromise = import(\"./clickmap-core\").then(m => m.openClickmapOverlay).catch((err) => {\n      openClickmapOverlayPromise = null;\n      throw err;\n    });\n  }\n  return openClickmapOverlayPromise;\n}\n\nfunction tryOpenOverlay() {\n  // Already open: the panel listens for the token event itself and refetches.\n  if (activeOverlayCleanup || !activeApp || !canMountIntoDom()) return;\n\n  const generation = ++openGeneration;\n  const app = activeApp;\n\n  runAsynchronously(async () => {\n    const openClickmapOverlay = await loadOpenClickmapOverlay();\n    if (generation !== openGeneration) return;\n    if (activeOverlayCleanup || activeApp !== app || !canMountIntoDom()) return;\n    activeOverlayCleanup = openClickmapOverlay(app, () => {\n      activeOverlayCleanup = null;\n    });\n  }, {\n    noErrorLogging: true,\n    onError: (error) => {\n      captureError(\"clickmap-mount\", error);\n    },\n  });\n}\n\n/**\n * Mounts the clickmap overlay listener on the page.\n *\n * The clickmap is fully independent from the dev tool. It has no ambient UI:\n * nothing renders until a dashboard-minted token is handed over (the\n * CLICKMAP_OVERLAY_TOKEN_UPDATED event fired by the dashboard's console\n * snippet) or a navigation-resume sentinel is present — only then is the\n * actual overlay code lazily loaded and shown.\n */\nexport function mountClickmapOverlay(app: StackClientApp<true>): () => void {\n  activeApp = app;\n\n  if (typeof window !== 'undefined' && !tokenListenerAttached) {\n    tokenListenerAttached = true;\n    window.addEventListener(CLICKMAP_OVERLAY_TOKEN_UPDATED_EVENT, tryOpenOverlay);\n  }\n\n  if (canMountIntoDom() && consumeResumeSentinel()) {\n    tryOpenOverlay();\n  }\n\n  return () => {\n    if (activeApp !== app) return;\n    activeApp = null;\n    openGeneration++;\n    activeOverlayCleanup?.();\n  };\n}\n\n"],"mappings":";;;;;;AAkBA,SAAS,wBAAiC;AACxC,KAAI;AACF,MAAI,eAAe,QAAQ,oCAAoC,KAAK,IAAK,QAAO;AAChF,iBAAe,WAAW,oCAAoC;AAC9D,SAAO;SACD;AACN,SAAO;;;AAIX,IAAI,YAAyC;AAC7C,IAAI,uBAA4C;AAChD,IAAI,iBAAiB;AACrB,IAAI,wBAAwB;AAE5B,IAAI,6BAA2E;AAC/E,SAAS,0BAAiE;AACxE,KAAI,CAAC,2BACH,8BAA6B,OAAO,sBAAmB,MAAK,MAAK,EAAE,oBAAoB,CAAC,OAAO,QAAQ;AACrG,+BAA6B;AAC7B,QAAM;GACN;AAEJ,QAAO;;AAGT,SAAS,iBAAiB;AAExB,KAAI,wBAAwB,CAAC,aAAa,CAAC,iBAAiB,CAAE;CAE9D,MAAM,aAAa,EAAE;CACrB,MAAM,MAAM;AAEZ,mBAAkB,YAAY;EAC5B,MAAM,sBAAsB,MAAM,yBAAyB;AAC3D,MAAI,eAAe,eAAgB;AACnC,MAAI,wBAAwB,cAAc,OAAO,CAAC,iBAAiB,CAAE;AACrE,yBAAuB,oBAAoB,WAAW;AACpD,0BAAuB;IACvB;IACD;EACD,gBAAgB;EAChB,UAAU,UAAU;AAClB,gBAAa,kBAAkB,MAAM;;EAExC,CAAC;;;;;;;;;;;AAYJ,SAAgB,qBAAqB,KAAuC;AAC1E,aAAY;AAEZ,KAAI,OAAO,WAAW,eAAe,CAAC,uBAAuB;AAC3D,0BAAwB;AACxB,SAAO,iBAAiB,sCAAsC,eAAe;;AAG/E,KAAI,iBAAiB,IAAI,uBAAuB,CAC9C,iBAAgB;AAGlB,cAAa;AACX,MAAI,cAAc,IAAK;AACvB,cAAY;AACZ;AACA,0BAAwB"}

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":";;;iBA6yEgB,aAAA,CAAc,GAAA,EAAK,cAAA"}
+{"version":3,"file":"dev-tool-core.d.ts","names":[],"sources":["../../../src/dev-tool/dev-tool-core.ts"],"mappings":";;;iBAkxEgB,aAAA,CAAc,GAAA,EAAK,cAAA"}

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

@@ -1,8 +1,10 @@
+import { DEV_TOOL_ROOT_ID } from "@hexclave/shared/dist/utils/dev-tool";
 import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
+import { getGlobalUiInstance, h, hasAppendChild, setGlobalUiInstance, setHtml } from "../in-page-ui/dom.js";
+import { hexclaveAppInternalsSymbol } from "../lib/hexclave-app/common.js";
 import { isLocalhost } from "@hexclave/shared/dist/utils/urls";
 import { envVars } from "../generated/env.js";
 import { getBaseUrl } from "../lib/hexclave-app/apps/implementations/common.js";
-import { hexclaveAppInternalsSymbol } from "../lib/hexclave-app/common.js";
 import { getPagePrompt } from "../lib/hexclave-app/url-targets.js";
 import { devToolCSS } from "./dev-tool-styles.js";
 import { clampTriggerPosition, getSnappedTriggerPlacement, resolveTriggerPosition } from "./dev-tool-trigger-position.js";
@@ -10,7 +12,7 @@ import { clampTriggerPosition, getSnappedTriggerPlacement, resolveTriggerPositio
 //#region src/dev-tool/dev-tool-core.ts
 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;
@@ -100,19 +102,6 @@ function createStateStore() {
 		}
 	};
 }
-function isDevToolGlobalInstance(value) {
-	return typeof value === "object" && value !== null && typeof Reflect.get(value, "cleanup") === "function";
-}
-function getGlobalDevToolInstance() {
-	if (typeof window === "undefined") return null;
-	const value = Reflect.get(window, GLOBAL_INSTANCE_KEY);
-	return isDevToolGlobalInstance(value) ? value : null;
-}
-function setGlobalDevToolInstance(instance) {
-	if (typeof window === "undefined") return;
-	if (instance === null) Reflect.deleteProperty(window, GLOBAL_INSTANCE_KEY);
-	else Reflect.set(window, GLOBAL_INSTANCE_KEY, instance);
-}
 function getGlobalLogStore() {
 	const g = globalThis;
 	if (!g.__STACK_DEV_TOOL_LOG_STORE__) g.__STACK_DEV_TOOL_LOG_STORE__ = {
@@ -192,27 +181,6 @@ function generateRandomEmail() {
 	for (let i = 0; i < 8; i++) id += chars[Math.floor(Math.random() * 36)];
 	return `dev-${id}@test.hexclave.com`;
 }
-function h(tag, attrs, ...children) {
-	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, html) {
-	el.innerHTML = html;
-}
-function hasAppendChild(value) {
-	return typeof value === "object" && value !== null && typeof Reflect.get(value, "appendChild") === "function";
-}
 function appendInlineMarkdown(container, text) {
 	const tokenPattern = /(\[[^\]]+\]\([^)]+\)|`[^`\n]+`|\*\*[^*\n]+\*\*|__[^_\n]+__|\*[^*\n]+\*|_[^_\n]+_)/g;
 	let lastIndex = 0;
@@ -509,8 +477,12 @@ function createIframeTab(src, title, loadingMsg = "Loading…", errorMsg = "Unab
 	container.appendChild(iframe);
 	return container;
 }
+function hasPersistentTokenStoreForDevTool(app) {
+	return app[hexclaveAppInternalsSymbol].getConstructorOptions().tokenStore !== null;
+}
 function createOverviewTab(app) {
 	const container = h("div", { className: "sdt-ov" });
+	const hasPersistentTokenStore = hasPersistentTokenStoreForDevTool(app);
 	const heroCard = h("div", { className: "sdt-ov-card sdt-ov-card-hero" });
 	heroCard.appendChild(h("div", { className: "sdt-ov-label" }, "Identity"));
 	const userRow = h("div", { className: "sdt-ov-user-row" });
@@ -556,6 +528,15 @@ function createOverviewTab(app) {
 	let loading = false;
 	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;
@@ -744,10 +725,14 @@ function createOverviewTab(app) {
 				label: "Auth method active",
 				hint: hasActiveAuthMethod === null ? "Still checking project config" : null
 			},
-			{
+			hasPersistentTokenStore ? {
 				ok: !!currentUser,
 				label: "Sign in a test user",
 				hint: "Use “Quick Sign In” above →"
+			} : {
+				ok: true,
+				label: "Current-user tools unavailable",
+				hint: null
 			}
 		];
 		const passCount = checks.filter((c) => c.ok).length;
@@ -787,6 +772,17 @@ function createOverviewTab(app) {
 		}
 	}
 	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();
 			if (currentUser) {
@@ -2023,7 +2019,7 @@ function createDevTool(app) {
 	if (typeof document === "undefined" || typeof document.createElement !== "function") return () => {};
 	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();
@@ -2097,13 +2093,13 @@ function createDevTool(app) {
 	const instance = { 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();
 		panel?.cleanup();
 		if (root.parentNode) root.parentNode.removeChild(root);
 	} };
-	setGlobalDevToolInstance(instance);
+	setGlobalUiInstance(GLOBAL_INSTANCE_KEY, instance);
 	return () => {
 		instance.cleanup();
 	};