@foldkit/devtools 0.137.0 → 0.139.0

package/README.md

@@ -7,33 +7,44 @@ The overlay displays every Message flowing through your app and lets you inspect
 ## Installation
 
 ```bash
-pnpm add @foldkit/devtools
+pnpm add --save-dev @foldkit/devtools
 # or
-npm install @foldkit/devtools
+npm install --save-dev @foldkit/devtools
 # or
-yarn add @foldkit/devtools
+yarn add --dev @foldkit/devtools
 ```
 
 `@foldkit/devtools` lists `foldkit`, `@foldkit/ui`, `effect`, and `@effect/platform-browser` as peer dependencies, so install those alongside it.
 
 ## Usage
 
-The overlay is opt-in. Pass its `overlay` factory as `devTools.overlay` when you create the application:
+With `@foldkit/vite-plugin`, installing this package as a development dependency is enough to mount the overlay during development. The plugin leaves it out of production builds:
 
 ```typescript
 import { Runtime } from 'foldkit'
 
-import { overlay } from '@foldkit/devtools'
-
 const application = Runtime.makeApplication({
   // ...
-  devTools: { Message, overlay },
+  devTools: {
+    Message,
+  },
 })
 
 Runtime.run(application)
 ```
 
-Without the overlay, a `devTools` config on its own still records Message history and serves the WebSocket bridge that the [DevTools MCP server](https://foldkit.dev/ai/mcp) connects to. Installing `@foldkit/devtools` and passing `overlay` is what mounts the visual panel in the browser.
+The `devTools` configuration is optional unless you need settings such as `Message`, `position`, or `excludeFromHistory`. Recording and the WebSocket bridge that the [DevTools MCP server](https://foldkit.dev/ai/mcp) connects to live in Foldkit's core runtime.
+
+To include the overlay in production, move `@foldkit/devtools` to regular `dependencies` and set `show: 'Always'`. The dependency section is the build-time opt-in, and `show` controls whether the runtime mounts it:
+
+```typescript
+const application = Runtime.makeApplication({
+  // ...
+  devTools: {
+    show: 'Always',
+  },
+})
+```
 
 See the [DevTools documentation](https://foldkit.dev/core/devtools) for the full configuration surface.
 

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.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

@@ -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/dist/vite.d.ts

@@ -0,0 +1,4 @@
+import type { DevToolsOverlay } from 'foldkit/devtools-host';
+/** The in-browser DevTools overlay factory consumed by the Foldkit Vite plugin. */
+export declare const overlay: DevToolsOverlay;
+//# sourceMappingURL=vite.d.ts.map

package/dist/vite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAI5D,mFAAmF;AACnF,eAAO,MAAM,OAAO,EAAE,eAA+B,CAAA"}

package/dist/vite.js

@@ -0,0 +1,3 @@
+import { createOverlay } from './overlay.js';
+/** The in-browser DevTools overlay factory consumed by the Foldkit Vite plugin. */
+export const overlay = createOverlay;

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "@foldkit/devtools",
-  "version": "0.137.0",
+  "version": "0.139.0",
   "description": "In-browser DevTools overlay for Foldkit applications",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js"
     }
   },
   "sideEffects": false,
@@ -17,23 +14,23 @@
     "dist"
   ],
   "peerDependencies": {
-    "@effect/platform-browser": "4.0.0-beta.102",
+    "@effect/platform-browser": "4.0.0-beta.103",
     "@foldkit/ui": "^0",
-    "effect": "4.0.0-beta.102",
+    "effect": "4.0.0-beta.103",
     "foldkit": "^0"
   },
   "dependencies": {
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@effect/platform-browser": "4.0.0-beta.102",
-    "effect": "4.0.0-beta.102",
+    "@effect/platform-browser": "4.0.0-beta.103",
+    "effect": "4.0.0-beta.103",
     "rimraf": "^6.1.3",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9",
-    "@foldkit/ui": "0.137.0",
-    "@foldkit/vite-plugin": "0.11.3",
-    "foldkit": "0.137.0"
+    "@foldkit/ui": "0.139.0",
+    "@foldkit/vite-plugin": "0.12.0",
+    "foldkit": "0.139.0"
   },
   "keywords": [
     "foldkit",

package/dist/index.d.ts

@@ -1,16 +0,0 @@
-import type { DevToolsOverlay } from 'foldkit/runtime';
-/**
- * The in-browser DevTools overlay factory. Pass it as `DevToolsConfig.overlay`
- * to mount the panel:
- *
- * ```ts
- * import { overlay } from '@foldkit/devtools'
- *
- * Runtime.makeApplication({
- *   // ...
- *   devTools: { Message, overlay },
- * })
- * ```
- */
-export declare const overlay: DevToolsOverlay;
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAItD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO,EAAE,eAA+B,CAAA"}

package/dist/index.js

@@ -1,15 +0,0 @@
-import { createOverlay } from './overlay.js';
-/**
- * The in-browser DevTools overlay factory. Pass it as `DevToolsConfig.overlay`
- * to mount the panel:
- *
- * ```ts
- * import { overlay } from '@foldkit/devtools'
- *
- * Runtime.makeApplication({
- *   // ...
- *   devTools: { Message, overlay },
- * })
- * ```
- */
-export const overlay = createOverlay;