@foldkit/devtools 0.136.0 → 0.138.0

package/dist/overlay-styles.d.ts

@@ -1,2 +1,2 @@
-export declare const overlayStyles = ":host {\n  position: relative;\n  z-index: 2147483647;\n\n  --dt-bg: #1e1e2e;\n  --dt-surface-selected: #282839;\n  --dt-border: #45475a;\n  --dt-text: #cdd6f4;\n  --dt-text-muted: #9399b2;\n  --dt-accent: #cba6f7;\n  --dt-live: #a6e3a1;\n  --dt-paused: #fab387;\n  --dt-json-string: #a6e3a1;\n  --dt-json-number: #89b4fa;\n  --dt-json-boolean: #fab387;\n  --dt-json-null: #9399b2;\n  --dt-json-key: #89dceb;\n  --dt-json-tag: #cba6f7;\n  --dt-json-preview: #9399b2;\n  --dt-json-arrow: #9399b2;\n  --dt-tree-hover: #313244;\n  --dt-diff-changed: #74c7ec;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\nbutton {\n  font: inherit;\n  color: inherit;\n}\nul {\n  list-style: none;\n}\n\n.fixed {\n  position: fixed;\n}\n.flex {\n  display: flex;\n}\n.contents {\n  display: contents;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.inline-block {\n  display: inline-block;\n}\n.gap-0\\.5 {\n  gap: 2px;\n}\n.gap-1\\.5 {\n  gap: 6px;\n}\n.gap-2 {\n  gap: 8px;\n}\n.gap-3 {\n  gap: 12px;\n}\n.gap-px {\n  gap: 1px;\n}\n.px-1 {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.px-2 {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.px-2\\.5 {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n.p-3 {\n  padding: 12px;\n}\n.px-3 {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.py-0\\.5 {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.pt-1 {\n  padding-top: 4px;\n}\n.pl-1 {\n  padding-left: 4px;\n}\n.py-1 {\n  padding-top: 4px;\n  padding-bottom: 4px;\n}\n.py-1\\.5 {\n  padding-top: 6px;\n  padding-bottom: 6px;\n}\n.py-2 {\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.py-px {\n  padding-top: 1px;\n  padding-bottom: 1px;\n}\n.w-1\\.5 {\n  width: 6px;\n}\n.h-1\\.5 {\n  height: 6px;\n}\n.w-3 {\n  width: 12px;\n}\n.w-5 {\n  width: 20px;\n}\n.h-5 {\n  height: 20px;\n}\n.w-14 {\n  width: 56px;\n}\n.h-14 {\n  height: 56px;\n}\n.min-w-0 {\n  min-width: 0;\n}\n.min-w-5 {\n  min-width: 20px;\n}\n.min-h-0 {\n  min-height: 0;\n}\n/* Badge positions \u2014 flush against side edge */\n.dt-pos-br {\n  bottom: 16px;\n  right: 0;\n  border-radius: 6px 0 0 6px;\n}\n.dt-pos-bl {\n  bottom: 16px;\n  left: 0;\n  border-radius: 0 6px 6px 0;\n}\n.dt-pos-tr {\n  top: 16px;\n  right: 0;\n  border-radius: 6px 0 0 6px;\n}\n.dt-pos-tl {\n  top: 16px;\n  left: 0;\n  border-radius: 0 6px 6px 0;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.overscroll-none {\n  overscroll-behavior: none;\n}\n\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 4px;\n}\n.rounded-lg {\n  border-radius: 8px;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.border {\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--dt-border);\n}\n.border-b {\n  border-bottom: 1px solid var(--dt-border);\n}\n.border-t {\n  border-top: 1px solid var(--dt-border);\n}\n.border-r {\n  border-right: 1px solid var(--dt-border);\n}\n.border-l {\n  border-left: 1px solid var(--dt-border);\n}\n.border-none {\n  border: none;\n}\n.selected {\n  background-color: var(--dt-surface-selected);\n}\n.dt-row:hover:not(.selected) {\n  background-color: var(--dt-tree-hover);\n}\n.dt-header-button:hover {\n  color: var(--dt-text);\n}\n.dt-resume-button:hover {\n  opacity: 0.7;\n}\n.dt-scroll-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  flex-shrink: 0;\n  padding: 4px 12px;\n  background-color: var(--dt-surface-selected);\n  border: none;\n  border-bottom: 1px solid var(--dt-border);\n  color: var(--dt-accent);\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 13px;\n  cursor: pointer;\n}\n.dt-scroll-pill-icon {\n  width: 12px;\n  height: 12px;\n}\n.dt-scroll-pill-text {\n  margin-top: 1px;\n}\n.dt-scroll-pill:hover {\n  background-color: var(--dt-tree-hover);\n}\n.dt-scroll-pill:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: -1px;\n}\n.dt-filter-wrapper {\n  position: relative;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--dt-border);\n}\n.dt-filter-button {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  background: transparent;\n  border: none;\n  color: var(--dt-text-muted);\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 13px;\n  cursor: pointer;\n  text-align: left;\n}\n.dt-filter-button:hover {\n  color: var(--dt-text);\n  background-color: var(--dt-tree-hover);\n}\n.dt-filter-button:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: -1px;\n}\n.dt-filter-button[data-open] {\n  color: var(--dt-text);\n  background-color: var(--dt-surface-selected);\n}\n.dt-filter-button[data-open]:hover {\n  background-color: var(--dt-tree-hover);\n}\n.dt-filter-button[data-open] .json-arrow {\n  transform: rotate(180deg);\n}\n.dt-filter-items {\n  position: absolute;\n  width: var(--button-width);\n  background-color: var(--dt-bg);\n  border-top: 1px solid var(--dt-border);\n  border-bottom: 1px solid var(--dt-border);\n  z-index: 100000;\n  max-height: 200px;\n  overflow-y: auto;\n  outline: none;\n}\n.dt-filter-item {\n  padding: 6px 12px;\n  color: var(--dt-text-muted);\n  cursor: pointer;\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 13px;\n  border-bottom: 1px solid var(--dt-border);\n}\n.dt-filter-item:last-child {\n  border-bottom: none;\n}\n.dt-filter-item[data-active] {\n  background-color: var(--dt-tree-hover);\n  color: var(--dt-text);\n}\n.dt-filter-item[data-selected] {\n  color: var(--dt-accent);\n}\n.dt-filter-check {\n  width: 12px;\n  height: 12px;\n  visibility: hidden;\n}\n.dt-filter-item[data-selected] .dt-filter-check {\n  visibility: visible;\n  color: var(--dt-accent);\n}\n.dt-filter-backdrop {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n}\n.dt-settings-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: stretch;\n  margin: -8px 0 -8px -12px;\n  padding: 0 12px;\n  background: transparent;\n  border: none;\n  border-right: 1px solid var(--dt-border);\n  color: var(--dt-text-muted);\n  cursor: pointer;\n  flex-shrink: 0;\n}\n.dt-settings-button:hover {\n  color: var(--dt-text);\n  background-color: var(--dt-tree-hover);\n}\n.dt-settings-button:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: -1px;\n}\n.dt-settings-button-active {\n  color: var(--dt-accent);\n  background-color: var(--dt-surface-selected);\n}\n.dt-settings-button-active:hover {\n  background-color: var(--dt-tree-hover);\n}\n.dt-settings-icon {\n  width: 14px;\n  height: 14px;\n}\n.dt-settings-section-title {\n  padding: 10px 12px 4px;\n  color: var(--dt-text-muted);\n  font-size: 10px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n.dt-settings-row {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 8px 12px;\n}\n.dt-settings-row-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.dt-settings-row-label {\n  color: var(--dt-text);\n  font-size: 13px;\n  cursor: pointer;\n}\n.dt-settings-row-description {\n  color: var(--dt-text-muted);\n  font-size: 10px;\n}\n.dt-switch {\n  position: relative;\n  width: 36px;\n  height: 20px;\n  border-radius: 9999px;\n  background-color: var(--dt-border);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition:\n    background-color 100ms ease,\n    filter 100ms ease;\n}\n.dt-switch:hover {\n  filter: brightness(1.2);\n}\n.dt-switch:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: 2px;\n}\n.dt-switch[data-checked] {\n  background-color: var(--dt-accent);\n}\n.dt-switch-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 9999px;\n  background-color: var(--dt-text-muted);\n  transition:\n    transform 100ms ease,\n    background-color 100ms ease;\n}\n.dt-switch[data-checked] .dt-switch-thumb {\n  transform: translateX(16px);\n  background-color: var(--dt-bg);\n}\n.dt-tab-button {\n  position: relative;\n  background: transparent;\n  border: none;\n  border-right: 1px solid var(--dt-border);\n  outline: none;\n  flex: 1;\n}\n.dt-tab-button:last-child {\n  border-right: none;\n}\n.dt-tab-active {\n  background-color: var(--dt-surface-selected);\n}\n.dt-tab-button:not(.dt-tab-active):hover {\n  color: var(--dt-text);\n  background-color: rgba(49, 50, 68, 0.3);\n}\n.font-sans {\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    sans-serif;\n}\n.font-mono {\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.text-xs {\n  font-size: 12px;\n}\n.text-2xs {\n  font-size: 10px;\n}\n.text-sm {\n  font-size: 11px;\n}\n.text-base {\n  font-size: 13px;\n}\n.text-md {\n  font-size: 15px;\n}\n.text-lg {\n  font-size: 20px;\n}\n.text-xl {\n  font-size: 26px;\n}\n.italic {\n  font-style: italic;\n}\n.text-right {\n  text-align: right;\n}\n.tracking-wide {\n  letter-spacing: 0.025em;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.leading-none {\n  line-height: 1;\n}\n.leading-snug {\n  line-height: 1.35;\n}\n.bg-dt-bg {\n  background-color: var(--dt-bg);\n}\n.bg-dt-live {\n  background-color: var(--dt-live);\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.text-dt {\n  color: var(--dt-text);\n}\n.text-dt-bg {\n  color: var(--dt-bg);\n}\n.text-dt-muted {\n  color: var(--dt-text-muted);\n}\n.text-dt-accent {\n  color: var(--dt-accent);\n}\n.text-dt-live {\n  color: var(--dt-live);\n}\n.text-dt-paused {\n  color: var(--dt-paused);\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.outline-none {\n  outline: none;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color;\n  transition-duration: 100ms;\n  transition-timing-function: ease;\n}\n\n/* Panel */\n.dt-panel {\n  width: 360px;\n  height: 480px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n  z-index: 99998;\n}\n/* Panel positions */\n.dt-panel-br {\n  bottom: 16px;\n  right: 28px;\n}\n.dt-panel-bl {\n  bottom: 16px;\n  left: 28px;\n}\n.dt-panel-tr {\n  top: 16px;\n  right: 28px;\n}\n.dt-panel-tl {\n  top: 16px;\n  left: 28px;\n}\n.dt-panel-wide {\n  width: 720px;\n}\n.dt-message-pane {\n  width: 320px;\n  flex-shrink: 0;\n}\n.dt-badge {\n  z-index: 99999;\n  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);\n  transition: background-color 150ms ease;\n  border: 1px solid var(--dt-border);\n}\n.dt-badge-accent:hover {\n  background-color: #252538;\n}\n.dt-badge-paused {\n  background-color: var(--dt-paused);\n  color: var(--dt-bg);\n  border: none;\n}\n.dt-badge-paused:hover {\n  background-color: #e0a070;\n}\n.dt-badge.dt-pos-br,\n.dt-badge.dt-pos-tr {\n  border-right: none;\n}\n.dt-badge.dt-pos-bl,\n.dt-badge.dt-pos-tl {\n  border-left: none;\n}\n\n/* JSON tree */\n.tree-row {\n  position: relative;\n  white-space: nowrap;\n  line-height: 18px;\n  padding-right: 8px;\n}\n.tree-row-expandable:hover {\n  background-color: var(--dt-tree-hover);\n}\n.inspector-tree {\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n}\n.json-key {\n  color: var(--dt-json-key);\n}\n.json-string {\n  color: var(--dt-json-string);\n}\n.json-number {\n  color: var(--dt-json-number);\n}\n.json-boolean {\n  color: var(--dt-json-boolean);\n}\n.json-null {\n  color: var(--dt-json-null);\n}\n.json-tag {\n  color: var(--dt-json-tag);\n  margin-right: 4px;\n}\n.json-preview {\n  color: var(--dt-json-preview);\n}\n.json-arrow {\n  color: var(--dt-json-arrow);\n  width: 10px;\n  height: 10px;\n  user-select: none;\n}\n\n/* Diff */\n.diff-changed {\n  background-color: rgba(116, 199, 236, 0.06);\n}\n.diff-dot {\n  position: absolute;\n  left: 3px;\n  width: 5px;\n  height: 5px;\n  border-radius: 9999px;\n  background-color: var(--dt-diff-changed);\n}\n.diff-dot-inline {\n  width: 5px;\n  height: 5px;\n  border-radius: 9999px;\n  background-color: var(--dt-diff-changed);\n  flex-shrink: 0;\n}\n.dot-column {\n  width: 5px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.pause-column {\n  width: 8px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dt-pause-icon {\n  width: 8px;\n  height: 8px;\n  color: var(--dt-paused);\n}\n\n/* Interaction blocker \u2014 covers the app while time-travelling */\n.dt-interaction-blocker {\n  position: fixed;\n  inset: 0;\n  z-index: 99997;\n  cursor: not-allowed;\n}\n\n/* Footer */\n.dt-footer {\n  background-color: var(--dt-bg);\n  height: 33px;\n}\n\n/* Scrubber */\n.dt-scrubber-control {\n  position: relative;\n  height: 16px;\n  width: 100%;\n  padding: 0 7px;\n  display: flex;\n  align-items: center;\n}\n.dt-scrubber-track {\n  width: 100%;\n  height: 4px;\n  background-color: var(--dt-border);\n  border-radius: 9999px;\n  cursor: pointer;\n}\n.dt-scrubber-track[data-disabled] {\n  cursor: not-allowed;\n}\n.dt-scrubber-fill {\n  height: 100%;\n  background-color: var(--dt-accent);\n  border-radius: 9999px;\n}\n.dt-scrubber-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 9999px;\n  background-color: var(--dt-accent);\n  border: 2px solid var(--dt-bg);\n  cursor: grab;\n  outline: none;\n  top: 50%;\n  margin-top: -7px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n}\n.dt-scrubber-thumb:focus-visible {\n  outline: 2px solid var(--dt-text);\n  outline-offset: 2px;\n}\n.dt-scrubber-thumb[data-dragging] {\n  cursor: grabbing;\n}\n.dt-scrubber-position {\n  width: 72px;\n  padding-left: 12px;\n  border-left: 1px solid var(--dt-border);\n  align-self: stretch;\n  margin-top: -8px;\n  margin-bottom: -8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Mobile */\n@media (max-width: 767px) {\n  .dt-panel {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 0;\n    border: none;\n  }\n  .dt-panel-wide {\n    width: 100%;\n  }\n  .dt-content {\n    flex-direction: column;\n  }\n  .dt-message-pane {\n    width: 100%;\n    max-height: 40%;\n    border-bottom: 1px solid var(--dt-border);\n  }\n  .message-list > :last-child {\n    border-bottom: none;\n  }\n  .dt-inspector-pane {\n    border-left: none;\n  }\n  .dt-badge.dt-pos-br,\n  .dt-badge.dt-pos-bl {\n    bottom: 44px;\n  }\n}\n";
+export declare const overlayStyles = ":host {\n  /* The host spans the viewport so it has real bounds to snapshot: it carries a\n     `view-transition-name` (set in `overlay.ts`, see the note there) to stay\n     out of an application's View Transitions, and a name on a zero-size element\n     captures nothing. The box itself is inert; the panels inside opt back into\n     hit-testing through `.fixed`. */\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: 2147483647;\n\n  --dt-bg: #1e1e2e;\n  --dt-surface-selected: #282839;\n  --dt-border: #45475a;\n  --dt-text: #cdd6f4;\n  --dt-text-muted: #9399b2;\n  --dt-accent: #cba6f7;\n  --dt-live: #a6e3a1;\n  --dt-paused: #fab387;\n  --dt-json-string: #a6e3a1;\n  --dt-json-number: #89b4fa;\n  --dt-json-boolean: #fab387;\n  --dt-json-null: #9399b2;\n  --dt-json-key: #89dceb;\n  --dt-json-tag: #cba6f7;\n  --dt-json-preview: #9399b2;\n  --dt-json-arrow: #9399b2;\n  --dt-tree-hover: #313244;\n  --dt-diff-changed: #74c7ec;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\nbutton {\n  font: inherit;\n  color: inherit;\n}\nul {\n  list-style: none;\n}\n\n/* The host is `pointer-events: none` so its viewport-spanning box cannot\n   swallow clicks meant for the application, and everything the shadow root\n   renders opts back in here. The boundary is the shadow root's children rather\n   than any one panel class: content arrives by routes a class list does not\n   cover, including the portal root `@foldkit/ui` prepends for anchored\n   dropdowns, and a surface that misses the opt-in is silently unclickable.\n   These wrappers are zero-height, so granting them hit-testing costs nothing;\n   descendants that must stay transparent, like the listbox backdrop, set\n   `pointer-events: none` on themselves. */\n:host > * {\n  pointer-events: auto;\n}\n\n.fixed {\n  position: fixed;\n}\n.flex {\n  display: flex;\n}\n.contents {\n  display: contents;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.inline-block {\n  display: inline-block;\n}\n.gap-0\\.5 {\n  gap: 2px;\n}\n.gap-1\\.5 {\n  gap: 6px;\n}\n.gap-2 {\n  gap: 8px;\n}\n.gap-3 {\n  gap: 12px;\n}\n.gap-px {\n  gap: 1px;\n}\n.px-1 {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.px-2 {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.px-2\\.5 {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n.p-3 {\n  padding: 12px;\n}\n.px-3 {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.py-0\\.5 {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.pt-1 {\n  padding-top: 4px;\n}\n.pl-1 {\n  padding-left: 4px;\n}\n.py-1 {\n  padding-top: 4px;\n  padding-bottom: 4px;\n}\n.py-1\\.5 {\n  padding-top: 6px;\n  padding-bottom: 6px;\n}\n.py-2 {\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.py-px {\n  padding-top: 1px;\n  padding-bottom: 1px;\n}\n.w-1\\.5 {\n  width: 6px;\n}\n.h-1\\.5 {\n  height: 6px;\n}\n.w-3 {\n  width: 12px;\n}\n.w-5 {\n  width: 20px;\n}\n.h-5 {\n  height: 20px;\n}\n.w-14 {\n  width: 56px;\n}\n.h-14 {\n  height: 56px;\n}\n.min-w-0 {\n  min-width: 0;\n}\n.min-w-5 {\n  min-width: 20px;\n}\n.min-h-0 {\n  min-height: 0;\n}\n/* Badge positions \u2014 flush against side edge */\n.dt-pos-br {\n  bottom: 16px;\n  right: 0;\n  border-radius: 6px 0 0 6px;\n}\n.dt-pos-bl {\n  bottom: 16px;\n  left: 0;\n  border-radius: 0 6px 6px 0;\n}\n.dt-pos-tr {\n  top: 16px;\n  right: 0;\n  border-radius: 6px 0 0 6px;\n}\n.dt-pos-tl {\n  top: 16px;\n  left: 0;\n  border-radius: 0 6px 6px 0;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.overscroll-none {\n  overscroll-behavior: none;\n}\n\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 4px;\n}\n.rounded-lg {\n  border-radius: 8px;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.border {\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--dt-border);\n}\n.border-b {\n  border-bottom: 1px solid var(--dt-border);\n}\n.border-t {\n  border-top: 1px solid var(--dt-border);\n}\n.border-r {\n  border-right: 1px solid var(--dt-border);\n}\n.border-l {\n  border-left: 1px solid var(--dt-border);\n}\n.border-none {\n  border: none;\n}\n.selected {\n  background-color: var(--dt-surface-selected);\n}\n.dt-row:hover:not(.selected) {\n  background-color: var(--dt-tree-hover);\n}\n.dt-header-button:hover {\n  color: var(--dt-text);\n}\n.dt-resume-button:hover {\n  opacity: 0.7;\n}\n.dt-scroll-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  flex-shrink: 0;\n  padding: 4px 12px;\n  background-color: var(--dt-surface-selected);\n  border: none;\n  border-bottom: 1px solid var(--dt-border);\n  color: var(--dt-accent);\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 13px;\n  cursor: pointer;\n}\n.dt-scroll-pill-icon {\n  width: 12px;\n  height: 12px;\n}\n.dt-scroll-pill-text {\n  margin-top: 1px;\n}\n.dt-scroll-pill:hover {\n  background-color: var(--dt-tree-hover);\n}\n.dt-scroll-pill:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: -1px;\n}\n.dt-filter-wrapper {\n  position: relative;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--dt-border);\n}\n.dt-filter-button {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  background: transparent;\n  border: none;\n  color: var(--dt-text-muted);\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 13px;\n  cursor: pointer;\n  text-align: left;\n}\n.dt-filter-button:hover {\n  color: var(--dt-text);\n  background-color: var(--dt-tree-hover);\n}\n.dt-filter-button:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: -1px;\n}\n.dt-filter-button[data-open] {\n  color: var(--dt-text);\n  background-color: var(--dt-surface-selected);\n}\n.dt-filter-button[data-open]:hover {\n  background-color: var(--dt-tree-hover);\n}\n.dt-filter-button[data-open] .json-arrow {\n  transform: rotate(180deg);\n}\n.dt-filter-items {\n  position: absolute;\n  width: var(--button-width);\n  background-color: var(--dt-bg);\n  border-top: 1px solid var(--dt-border);\n  border-bottom: 1px solid var(--dt-border);\n  z-index: 100000;\n  max-height: 200px;\n  overflow-y: auto;\n  outline: none;\n}\n.dt-filter-item {\n  padding: 6px 12px;\n  color: var(--dt-text-muted);\n  cursor: pointer;\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 13px;\n  border-bottom: 1px solid var(--dt-border);\n}\n.dt-filter-item:last-child {\n  border-bottom: none;\n}\n.dt-filter-item[data-active] {\n  background-color: var(--dt-tree-hover);\n  color: var(--dt-text);\n}\n.dt-filter-item[data-selected] {\n  color: var(--dt-accent);\n}\n.dt-filter-check {\n  width: 12px;\n  height: 12px;\n  visibility: hidden;\n}\n.dt-filter-item[data-selected] .dt-filter-check {\n  visibility: visible;\n  color: var(--dt-accent);\n}\n.dt-filter-backdrop {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n}\n.dt-settings-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: stretch;\n  margin: -8px 0 -8px -12px;\n  padding: 0 12px;\n  background: transparent;\n  border: none;\n  border-right: 1px solid var(--dt-border);\n  color: var(--dt-text-muted);\n  cursor: pointer;\n  flex-shrink: 0;\n}\n.dt-settings-button:hover {\n  color: var(--dt-text);\n  background-color: var(--dt-tree-hover);\n}\n.dt-settings-button:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: -1px;\n}\n.dt-settings-button-active {\n  color: var(--dt-accent);\n  background-color: var(--dt-surface-selected);\n}\n.dt-settings-button-active:hover {\n  background-color: var(--dt-tree-hover);\n}\n.dt-settings-icon {\n  width: 14px;\n  height: 14px;\n}\n.dt-settings-section-title {\n  padding: 10px 12px 4px;\n  color: var(--dt-text-muted);\n  font-size: 10px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n.dt-settings-row {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 8px 12px;\n}\n.dt-settings-row-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.dt-settings-row-label {\n  color: var(--dt-text);\n  font-size: 13px;\n  cursor: pointer;\n}\n.dt-settings-row-description {\n  color: var(--dt-text-muted);\n  font-size: 10px;\n}\n.dt-switch {\n  position: relative;\n  width: 36px;\n  height: 20px;\n  border-radius: 9999px;\n  background-color: var(--dt-border);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition:\n    background-color 100ms ease,\n    filter 100ms ease;\n}\n.dt-switch:hover {\n  filter: brightness(1.2);\n}\n.dt-switch:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: 2px;\n}\n.dt-switch[data-checked] {\n  background-color: var(--dt-accent);\n}\n.dt-switch-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 9999px;\n  background-color: var(--dt-text-muted);\n  transition:\n    transform 100ms ease,\n    background-color 100ms ease;\n}\n.dt-switch[data-checked] .dt-switch-thumb {\n  transform: translateX(16px);\n  background-color: var(--dt-bg);\n}\n.dt-tab-button {\n  position: relative;\n  background: transparent;\n  border: none;\n  border-right: 1px solid var(--dt-border);\n  outline: none;\n  flex: 1;\n}\n.dt-tab-button:last-child {\n  border-right: none;\n}\n.dt-tab-active {\n  background-color: var(--dt-surface-selected);\n}\n.dt-tab-button:not(.dt-tab-active):hover {\n  color: var(--dt-text);\n  background-color: rgba(49, 50, 68, 0.3);\n}\n.font-sans {\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    sans-serif;\n}\n.font-mono {\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.text-xs {\n  font-size: 12px;\n}\n.text-2xs {\n  font-size: 10px;\n}\n.text-sm {\n  font-size: 11px;\n}\n.text-base {\n  font-size: 13px;\n}\n.text-md {\n  font-size: 15px;\n}\n.text-lg {\n  font-size: 20px;\n}\n.text-xl {\n  font-size: 26px;\n}\n.italic {\n  font-style: italic;\n}\n.text-right {\n  text-align: right;\n}\n.tracking-wide {\n  letter-spacing: 0.025em;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.leading-none {\n  line-height: 1;\n}\n.leading-snug {\n  line-height: 1.35;\n}\n.bg-dt-bg {\n  background-color: var(--dt-bg);\n}\n.bg-dt-live {\n  background-color: var(--dt-live);\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.text-dt {\n  color: var(--dt-text);\n}\n.text-dt-bg {\n  color: var(--dt-bg);\n}\n.text-dt-muted {\n  color: var(--dt-text-muted);\n}\n.text-dt-accent {\n  color: var(--dt-accent);\n}\n.text-dt-live {\n  color: var(--dt-live);\n}\n.text-dt-paused {\n  color: var(--dt-paused);\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.outline-none {\n  outline: none;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color;\n  transition-duration: 100ms;\n  transition-timing-function: ease;\n}\n\n/* Panel */\n.dt-panel {\n  width: 360px;\n  height: 480px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n  z-index: 99998;\n}\n/* Panel positions */\n.dt-panel-br {\n  bottom: 16px;\n  right: 28px;\n}\n.dt-panel-bl {\n  bottom: 16px;\n  left: 28px;\n}\n.dt-panel-tr {\n  top: 16px;\n  right: 28px;\n}\n.dt-panel-tl {\n  top: 16px;\n  left: 28px;\n}\n.dt-panel-wide {\n  width: 720px;\n}\n.dt-message-pane {\n  width: 320px;\n  flex-shrink: 0;\n}\n.dt-badge {\n  z-index: 99999;\n  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);\n  transition: background-color 150ms ease;\n  border: 1px solid var(--dt-border);\n}\n.dt-badge-accent:hover {\n  background-color: #252538;\n}\n.dt-badge-paused {\n  background-color: var(--dt-paused);\n  color: var(--dt-bg);\n  border: none;\n}\n.dt-badge-paused:hover {\n  background-color: #e0a070;\n}\n.dt-badge.dt-pos-br,\n.dt-badge.dt-pos-tr {\n  border-right: none;\n}\n.dt-badge.dt-pos-bl,\n.dt-badge.dt-pos-tl {\n  border-left: none;\n}\n\n/* JSON tree */\n.tree-row {\n  position: relative;\n  white-space: nowrap;\n  line-height: 18px;\n  padding-right: 8px;\n}\n.tree-row-expandable:hover {\n  background-color: var(--dt-tree-hover);\n}\n.inspector-tree {\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n}\n.json-key {\n  color: var(--dt-json-key);\n}\n.json-string {\n  color: var(--dt-json-string);\n}\n.json-number {\n  color: var(--dt-json-number);\n}\n.json-boolean {\n  color: var(--dt-json-boolean);\n}\n.json-null {\n  color: var(--dt-json-null);\n}\n.json-tag {\n  color: var(--dt-json-tag);\n  margin-right: 4px;\n}\n.json-preview {\n  color: var(--dt-json-preview);\n}\n.json-arrow {\n  color: var(--dt-json-arrow);\n  width: 10px;\n  height: 10px;\n  user-select: none;\n}\n\n/* Diff */\n.diff-changed {\n  background-color: rgba(116, 199, 236, 0.06);\n}\n.diff-dot {\n  position: absolute;\n  left: 3px;\n  width: 5px;\n  height: 5px;\n  border-radius: 9999px;\n  background-color: var(--dt-diff-changed);\n}\n.diff-dot-inline {\n  width: 5px;\n  height: 5px;\n  border-radius: 9999px;\n  background-color: var(--dt-diff-changed);\n  flex-shrink: 0;\n}\n.dot-column {\n  width: 5px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.pause-column {\n  width: 8px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dt-pause-icon {\n  width: 8px;\n  height: 8px;\n  color: var(--dt-paused);\n}\n\n/* Interaction blocker \u2014 covers the app while time-travelling */\n.dt-interaction-blocker {\n  position: fixed;\n  inset: 0;\n  z-index: 99997;\n  cursor: not-allowed;\n}\n\n/* Footer */\n.dt-footer {\n  background-color: var(--dt-bg);\n  height: 33px;\n}\n\n/* Scrubber */\n.dt-scrubber-control {\n  position: relative;\n  height: 16px;\n  width: 100%;\n  padding: 0 7px;\n  display: flex;\n  align-items: center;\n}\n.dt-scrubber-track {\n  width: 100%;\n  height: 4px;\n  background-color: var(--dt-border);\n  border-radius: 9999px;\n  cursor: pointer;\n}\n.dt-scrubber-track[data-disabled] {\n  cursor: not-allowed;\n}\n.dt-scrubber-fill {\n  height: 100%;\n  background-color: var(--dt-accent);\n  border-radius: 9999px;\n}\n.dt-scrubber-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 9999px;\n  background-color: var(--dt-accent);\n  border: 2px solid var(--dt-bg);\n  cursor: grab;\n  outline: none;\n  top: 50%;\n  margin-top: -7px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n}\n.dt-scrubber-thumb:focus-visible {\n  outline: 2px solid var(--dt-text);\n  outline-offset: 2px;\n}\n.dt-scrubber-thumb[data-dragging] {\n  cursor: grabbing;\n}\n.dt-scrubber-position {\n  width: 72px;\n  padding-left: 12px;\n  border-left: 1px solid var(--dt-border);\n  align-self: stretch;\n  margin-top: -8px;\n  margin-bottom: -8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Mobile */\n@media (max-width: 767px) {\n  .dt-panel {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 0;\n    border: none;\n  }\n  .dt-panel-wide {\n    width: 100%;\n  }\n  .dt-content {\n    flex-direction: column;\n  }\n  .dt-message-pane {\n    width: 100%;\n    max-height: 40%;\n    border-bottom: 1px solid var(--dt-border);\n  }\n  .message-list > :last-child {\n    border-bottom: none;\n  }\n  .dt-inspector-pane {\n    border-left: none;\n  }\n  .dt-badge.dt-pos-br,\n  .dt-badge.dt-pos-bl {\n    bottom: 44px;\n  }\n}\n";
 //# sourceMappingURL=overlay-styles.d.ts.map

package/dist/overlay-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../src/overlay-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,0gdAuyBzB,CAAA"}
+{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../src/overlay-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,wlfA2zBzB,CAAA"}

package/dist/overlay-styles.js

@@ -1,5 +1,12 @@
 export const overlayStyles = `:host {
-  position: relative;
+  /* The host spans the viewport so it has real bounds to snapshot: it carries a
+     \`view-transition-name\` (set in \`overlay.ts\`, see the note there) to stay
+     out of an application's View Transitions, and a name on a zero-size element
+     captures nothing. The box itself is inert; the panels inside opt back into
+     hit-testing through \`.fixed\`. */
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
   z-index: 2147483647;
 
   --dt-bg: #1e1e2e;
@@ -37,6 +44,19 @@ ul {
   list-style: none;
 }
 
+/* The host is \`pointer-events: none\` so its viewport-spanning box cannot
+   swallow clicks meant for the application, and everything the shadow root
+   renders opts back in here. The boundary is the shadow root's children rather
+   than any one panel class: content arrives by routes a class list does not
+   cover, including the portal root \`@foldkit/ui\` prepends for anchored
+   dropdowns, and a surface that misses the opt-in is silently unclickable.
+   These wrappers are zero-height, so granting them hit-testing costs nothing;
+   descendants that must stay transparent, like the listbox backdrop, set
+   \`pointer-events: none\` on themselves. */
+:host > * {
+  pointer-events: auto;
+}
+
 .fixed {
   position: fixed;
 }

package/dist/overlay.d.ts

@@ -26,10 +26,10 @@ declare const ShadowRootService_base: Context.ServiceClass<ShadowRootService, "f
 declare class ShadowRootService extends ShadowRootService_base {
 }
 export declare const LockScroll: Command.CommandDefinitionNoArgs<"LockScroll", Effect.Effect<{
-    readonly _tag: "LockedScroll";
+    readonly _tag: "CompletedLockScroll";
 }, never, never>>;
 export declare const UnlockScroll: Command.CommandDefinitionNoArgs<"UnlockScroll", Effect.Effect<{
-    readonly _tag: "UnlockedScroll";
+    readonly _tag: "CompletedUnlockScroll";
 }, never, never>>;
 export declare const PersistDevToolsState: Command.CommandDefinitionWithArgs<"PersistDevToolsState", {
     isOpen: S.Boolean;
@@ -69,7 +69,7 @@ export declare const Clear: Command.CommandDefinitionNoArgs<"Clear", Effect.Effe
     readonly _tag: "CompletedClear";
 }, never, StoreService>>;
 export declare const ScrollToTop: Command.CommandDefinitionNoArgs<"ScrollToTop", Effect.Effect<{
-    readonly _tag: "ScrolledToTop";
+    readonly _tag: "CompletedScrollToTop";
 }, never, ShadowRootService>>;
 export declare const createOverlay: (store: DevToolsStore, position: DevToolsPosition, mode: DevToolsMode, maybeBanner: Option.Option<string>) => Effect.Effect<void, never, import("effect/Scope").Scope>;
 export {};

package/dist/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAEN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,aAAa,EAGlB,KAAK,WAAW,EAChB,KAAK,UAAU,EAKhB,MAAM,uBAAuB,CAAA;AAU9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFAsDR,CAAC;;;;;;;;;;;;;;;;;AAkQ9D,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGrB,CAAA;AAEF,eAAO,MAAM,YAAY;;iBAGvB,CAAA;AAgCF,eAAO,MAAM,oBAAoB;;;;;iBAgB/B,CAAA;AAuBF,eAAO,MAAM,gBAAgB;;;;;;;;wBAS3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;wBAIvB,CAAA;AAEF,eAAO,MAAM,aAAa;;;;;;wBAOxB,CAAA;AAEF,eAAO,MAAM,MAAM;;wBAOjB,CAAA;AAEF,eAAO,MAAM,KAAK;;wBAOhB,CAAA;AAEF,eAAO,MAAM,WAAW;;6BAUtB,CAAA;AAu9DF,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAkFhC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAEN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,aAAa,EAGlB,KAAK,WAAW,EAChB,KAAK,UAAU,EAKhB,MAAM,uBAAuB,CAAA;AAU9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFAsDR,CAAC;;;;;;;;;;;;;;;;;AAkQ9D,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGrB,CAAA;AAEF,eAAO,MAAM,YAAY;;iBAGvB,CAAA;AAgCF,eAAO,MAAM,oBAAoB;;;;;iBAgB/B,CAAA;AAuBF,eAAO,MAAM,gBAAgB;;;;;;;;wBAS3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;wBAIvB,CAAA;AAEF,eAAO,MAAM,aAAa;;;;;;wBAOxB,CAAA;AAEF,eAAO,MAAM,MAAM;;wBAOjB,CAAA;AAEF,eAAO,MAAM,KAAK;;wBAOhB,CAAA;AAEF,eAAO,MAAM,WAAW;;6BAUtB,CAAA;AAsgEF,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAmFhC,CAAA"}

package/dist/overlay.js

@@ -118,9 +118,9 @@ const ClickedFollowLatest = m('ClickedFollowLatest');
 const ClickedScrollToTopPill = m('ClickedScrollToTopPill');
 const ScrolledMessageList = m('ScrolledMessageList', { scrollTop: S.Number });
 const CompletedClear = m('CompletedClear');
-const LockedScroll = m('LockedScroll');
-const UnlockedScroll = m('UnlockedScroll');
-const ScrolledToTop = m('ScrolledToTop');
+const CompletedLockScroll = m('CompletedLockScroll');
+const CompletedUnlockScroll = m('CompletedUnlockScroll');
+const CompletedScrollToTop = m('CompletedScrollToTop');
 const CrossedMobileBreakpoint = m('CrossedMobileBreakpoint', {
     isMobile: S.Boolean,
 });
@@ -163,9 +163,9 @@ const Message = S.Union([
     ScrolledMessageList,
     CompletedResume,
     CompletedClear,
-    LockedScroll,
-    UnlockedScroll,
-    ScrolledToTop,
+    CompletedLockScroll,
+    CompletedUnlockScroll,
+    CompletedScrollToTop,
     CrossedMobileBreakpoint,
     ReceivedInspectedState,
     ToggledTreeNode,
@@ -242,12 +242,12 @@ class StoreService extends Context.Service()('foldkit/DevToolsStore') {
 class ShadowRootService extends Context.Service()('foldkit/DevToolsShadowRoot') {
 }
 export const LockScroll = Command.define('LockScroll', {
-    messages: [LockedScroll],
-    execute: lockScroll.pipe(Effect.as(LockedScroll())),
+    messages: [CompletedLockScroll],
+    execute: lockScroll.pipe(Effect.as(CompletedLockScroll())),
 });
 export const UnlockScroll = Command.define('UnlockScroll', {
-    messages: [UnlockedScroll],
-    execute: unlockScroll.pipe(Effect.as(UnlockedScroll())),
+    messages: [CompletedUnlockScroll],
+    execute: unlockScroll.pipe(Effect.as(CompletedUnlockScroll())),
 });
 const maybeToggleScrollLock = (isEnabled, shouldLock) => __foldkitBrandViewResult((OptionExt.when(isEnabled, shouldLock ? LockScroll() : UnlockScroll())), "@foldkit/devtools/overlay.js#maybeToggleScrollLock");
 const maybeLockScroll = (isOpen, isMobile) => __foldkitBrandViewResult((OptionExt.when(isOpen && isMobile, LockScroll())), "@foldkit/devtools/overlay.js#maybeLockScroll");
@@ -334,14 +334,14 @@ export const Clear = Command.define('Clear', {
     }),
 });
 export const ScrollToTop = Command.define('ScrollToTop', {
-    messages: [ScrolledToTop],
+    messages: [CompletedScrollToTop],
     execute: Effect.gen(function* () {
         const shadow = yield* ShadowRootService;
         const messageList = shadow.querySelector(MESSAGE_LIST_SELECTOR);
         if (messageList instanceof HTMLElement) {
             messageList.scrollTop = 0;
         }
-        return __foldkitBrandViewResult((ScrolledToTop()), "@foldkit/devtools/overlay.js#anonymous~23");
+        return __foldkitBrandViewResult((CompletedScrollToTop()), "@foldkit/devtools/overlay.js#anonymous~23");
     }),
 });
 const makeUpdate = (store, shadow, mode) => {
@@ -559,7 +559,7 @@ const makeUpdate = (store, shadow, mode) => {
                 [jumpToAndInspect(hostIndex)],
             ]), "@foldkit/devtools/overlay.js#onSome"),
         })), "@foldkit/devtools/overlay.js#TickedScrubFrame"),
-    }), M.tag('CompletedResume', 'CompletedClear', 'CompletedPersistDevToolsState', 'LockedScroll', 'UnlockedScroll', 'ScrolledToTop', () => __foldkitBrandViewResult(([model, []]), "@foldkit/devtools/overlay.js#anonymous~39")), M.exhaustive)), "@foldkit/devtools/overlay.js#anonymous~24")), "@foldkit/devtools/overlay.js#makeUpdate");
+    }), M.tag('CompletedResume', 'CompletedClear', 'CompletedPersistDevToolsState', 'CompletedLockScroll', 'CompletedUnlockScroll', 'CompletedScrollToTop', () => __foldkitBrandViewResult(([model, []]), "@foldkit/devtools/overlay.js#anonymous~39")), M.exhaustive)), "@foldkit/devtools/overlay.js#anonymous~24")), "@foldkit/devtools/overlay.js#makeUpdate");
 };
 // SUBSCRIPTION
 const makeOverlaySubscriptions = (store, shadow) => {
@@ -646,12 +646,12 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             h.StrokeLinecap('round'),
             h.StrokeLinejoin('round'),
             h.D(isExpanded ? CHEVRON_DOWN : CHEVRON_RIGHT),
-        ], []),
+        ]),
     ])), "@foldkit/devtools/overlay.js#arrowView");
     const tagLabelView = (tag) => __foldkitBrandViewResult((h.span([h.Class('json-tag')], [tag])), "@foldkit/devtools/overlay.js#tagLabelView");
     const previewView = (preview) => __foldkitBrandViewResult((h.span([h.Class('json-preview')], [preview])), "@foldkit/devtools/overlay.js#previewView");
-    const diffDotView = h.span([h.Class('diff-dot')], []);
-    const inlineDiffDotView = h.span([h.Class('diff-dot-inline')], []);
+    const diffDotView = h.span([h.Class('diff-dot')]);
+    const inlineDiffDotView = h.span([h.Class('diff-dot-inline')]);
     const ArrowSegment = ts('ArrowSegment', { isExpanded: S.Boolean });
     const DiffDotSegment = ts('DiffDotSegment');
     const KeyLabelSegment = ts('KeyLabelSegment', { key: S.String });
@@ -1049,7 +1049,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                     h.StrokeLinecap('round'),
                     h.StrokeLinejoin('round'),
                     h.D('M6 18L18 6M6 6l12 12'),
-                ], []),
+                ]),
             ])
             : h.div([
                 h.Class(clsx('flex flex-col items-center gap-0.5 font-semibold tracking-wider leading-none', model.isPaused ? 'text-dt-bg' : 'text-dt-muted')),
@@ -1070,7 +1070,11 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         h.StrokeWidth('2'),
         h.Stroke('currentColor'),
     ], [
-        h.path([h.D(CHECK_ICON), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
+        h.path([
+            h.D(CHECK_ICON),
+            h.StrokeLinecap('round'),
+            h.StrokeLinejoin('round'),
+        ]),
     ]);
     const filterItemLabel = (item) => __foldkitBrandViewResult((String_.isNonEmpty(item) ? submodelLabel(item) : 'All Messages'), "@foldkit/devtools/overlay.js#filterItemLabel");
     const ARROW_UP = 'M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18';
@@ -1083,7 +1087,11 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         h.StrokeWidth('2'),
         h.Stroke('currentColor'),
     ], [
-        h.path([h.D(ARROW_UP), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
+        h.path([
+            h.D(ARROW_UP),
+            h.StrokeLinecap('round'),
+            h.StrokeLinejoin('round'),
+        ]),
     ]);
     const scrollToTopPillView = () => __foldkitBrandViewResult((h.button([h.Class('dt-scroll-pill'), h.OnClick(ClickedScrollToTopPill())], [
         arrowUpIconView,
@@ -1120,7 +1128,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                             h.D(CHEVRON_DOWN),
                             h.StrokeLinecap('round'),
                             h.StrokeLinejoin('round'),
-                        ], []),
+                        ]),
                     ]),
                 ]),
                 buttonClassName: 'dt-filter-button',
@@ -1137,7 +1145,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         isChecked: model.isFlattened,
         onToggle: isFlattened => __foldkitBrandViewResult((ToggledFlatten({ isFlattened })), "@foldkit/devtools/overlay.js#onToggle"),
         toView: attributes => __foldkitBrandViewResult((h.div([h.Class('dt-settings-row')], [
-            h.div([...attributes.button, h.Class('dt-switch')], [h.span([h.Class('dt-switch-thumb')], [])]),
+            h.div([...attributes.button, h.Class('dt-switch')], [h.span([h.Class('dt-switch-thumb')])]),
             h.div([h.Class('dt-settings-row-text')], [
                 h.label([...attributes.label, h.Class('dt-settings-row-label')], ['Flatten to leaf Message']),
                 h.span([
@@ -1186,8 +1194,8 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         h.OnClick(ClickedRow({ index: INIT_INDEX })),
     ], [
         ...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView] : [])).pipe(Option.toArray),
-        h.span([h.Class('dot-column')], []),
-        h.span([h.Class(indexClass)], []),
+        h.span([h.Class('dot-column')]),
+        h.span([h.Class(indexClass)]),
         h.span([h.Class('text-base text-dt-muted font-mono')], ['init']),
     ])), "@foldkit/devtools/overlay.js#initRowView");
     const pauseIconView = h.svg([
@@ -1203,7 +1211,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             h.StrokeLinecap('round'),
             h.StrokeLinejoin('round'),
             h.D('M5.75 3v18M18.25 3v18'),
-        ], []),
+        ]),
     ]);
     const messageRowView = (tag, absoluteIndex, isSelected, isPausedHere, timeDelta, isModelChanged) => __foldkitBrandViewResult((h.keyed('li')(String(absoluteIndex), [
         h.Class(clsx(ROW_BASE, { selected: isSelected })),
@@ -1301,8 +1309,11 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                         h.div([
                             ...attributes.filledTrack,
                             h.Class('dt-scrubber-fill'),
-                        ], []),
-                        h.div([...attributes.thumb, h.Class('dt-scrubber-thumb')], []),
+                        ]),
+                        h.div([
+                            ...attributes.thumb,
+                            h.Class('dt-scrubber-thumb'),
+                        ]),
                     ]),
                 ]),
                 h.span([
@@ -1326,8 +1337,16 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         h.StrokeWidth('1.5'),
         h.Stroke('currentColor'),
     ], [
-        h.path([h.D(GEAR_OUTER), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
-        h.path([h.D(GEAR_INNER), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
+        h.path([
+            h.D(GEAR_OUTER),
+            h.StrokeLinecap('round'),
+            h.StrokeLinejoin('round'),
+        ]),
+        h.path([
+            h.D(GEAR_INNER),
+            h.StrokeLinecap('round'),
+            h.StrokeLinejoin('round'),
+        ]),
     ]);
     const closeSettingsIconView = h.svg([
         h.AriaHidden(true),
@@ -1338,7 +1357,11 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         h.StrokeWidth('2'),
         h.Stroke('currentColor'),
     ], [
-        h.path([h.D(X_MARK), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
+        h.path([
+            h.D(X_MARK),
+            h.StrokeLinecap('round'),
+            h.StrokeLinejoin('round'),
+        ]),
     ]);
     const settingsToggleView = (screen) => {
         const isSettingsOpen = screen === 'Settings';
@@ -1381,7 +1404,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         contentView(model),
         footerView(model),
     ])), "@foldkit/devtools/overlay.js#panelView");
-    const interactionBlocker = () => __foldkitBrandViewResult((h.div([h.Class('dt-interaction-blocker')], [])), "@foldkit/devtools/overlay.js#interactionBlocker");
+    const interactionBlocker = () => __foldkitBrandViewResult((h.div([h.Class('dt-interaction-blocker')])), "@foldkit/devtools/overlay.js#interactionBlocker");
     return __foldkitBrandViewResult(((model) => __foldkitBrandViewResult((h.div([], [
         ...OptionExt.when(model.isPaused && mode === 'TimeTravel', interactionBlocker()).pipe(Option.toArray),
         ...OptionExt.when(model.isOpen, panelView(model)).pipe(Option.toArray),
@@ -1389,11 +1412,55 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
     ])), "@foldkit/devtools/overlay.js#anonymous~91")), "@foldkit/devtools/overlay.js#buildOverlayView");
 };
 // CREATE
+const VIEW_TRANSITION_NAME = 'foldkit-devtools';
+const VIEW_TRANSITION_STYLE_ID = 'foldkit-devtools-view-transition';
+/**
+ * Holds the overlay still through an application's View Transitions.
+ *
+ * The host's `view-transition-name` lifts the overlay out of the page's root
+ * snapshot, which is what stops it cross-fading with the page. The browser then
+ * gives it its own pair of snapshots and cross-fades those against each other
+ * instead. The overlay is identical on both sides of any application render, so
+ * rather than rely on that cross-fade being lossless, the outgoing snapshot is
+ * hidden and the incoming one held opaque.
+ *
+ * Only the two snapshots are pinned. The host spans the viewport, so its old
+ * and new geometry are identical and the group's animation is already a no-op;
+ * there is nothing to gain by overriding it.
+ *
+ * These pseudo-elements live on the top-level document, which the overlay's own
+ * shadow styles cannot reach, so the rule goes in `document.head`.
+ */
+const installViewTransitionStyle = () => {
+    if (document.getElementById(VIEW_TRANSITION_STYLE_ID) !== null) {
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = VIEW_TRANSITION_STYLE_ID;
+    // NOTE: the UA composites these snapshots with `plus-lighter`, which is
+    // right for a cross-fade and wrong for a snapshot held opaque: it adds to
+    // the backdrop and washes the overlay out.
+    style.textContent = `
+::view-transition-old(${VIEW_TRANSITION_NAME}) {
+  animation: none;
+  opacity: 0;
+  mix-blend-mode: normal;
+}
+
+::view-transition-new(${VIEW_TRANSITION_NAME}) {
+  animation: none;
+  opacity: 1;
+  mix-blend-mode: normal;
+}
+`;
+    document.head.appendChild(style);
+};
 const createShadowContainer = () => {
     const existingHost = document.getElementById(DEVTOOLS_HOST_ID);
     if (existingHost) {
         existingHost.remove();
     }
+    installViewTransitionStyle();
     const host = document.createElement('div');
     host.id = DEVTOOLS_HOST_ID;
     host.addEventListener('pointerdown', event => {
@@ -1404,6 +1471,15 @@ const createShadowContainer = () => {
             event.preventDefault();
         }
     }, { capture: true });
+    // NOTE: the name is set here, not on `:host` alongside every other host
+    // property. A `view-transition-name` reaching the host through a shadow
+    // `:host` rule computes (`getComputedStyle` reports it) but Chromium does
+    // not then capture the element as its own snapshot, so the overlay stays in
+    // the page's root snapshot and cross-fades with it. Authored from the light
+    // DOM it captures. Observed in Chromium 149 and not checked elsewhere;
+    // moving this into the stylesheet reintroduces the fade with no other
+    // symptom.
+    host.style.viewTransitionName = VIEW_TRANSITION_NAME;
     document.body.appendChild(host);
     const shadow = host.attachShadow({ mode: 'open' });
     const styleElement = document.createElement('style');
@@ -1416,6 +1492,7 @@ const createShadowContainer = () => {
 export const createOverlay = (store, position, mode, maybeBanner) => __foldkitBrandViewResult((Effect.gen(function* () {
     const { container, shadow } = yield* Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((createShadowContainer()), "@foldkit/devtools/overlay.js#anonymous~94")), createdShadowContainer => __foldkitBrandViewResult((Effect.sync(() => {
         createdShadowContainer.shadow.host.remove();
+        document.getElementById(VIEW_TRANSITION_STYLE_ID)?.remove();
     })), "@foldkit/devtools/overlay.js#anonymous~95"));
     container.id = '__foldkit_devtools_overlay__';
     const flags = Effect.gen(function* () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/devtools",
-  "version": "0.136.0",
+  "version": "0.138.0",
   "description": "In-browser DevTools overlay for Foldkit applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -31,9 +31,9 @@
     "rimraf": "^6.1.3",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9",
-    "@foldkit/ui": "0.136.0",
-    "foldkit": "0.136.0",
-    "@foldkit/vite-plugin": "0.11.3"
+    "@foldkit/ui": "0.138.0",
+    "@foldkit/vite-plugin": "0.11.3",
+    "foldkit": "0.138.0"
   },
   "keywords": [
     "foldkit",