@foldkit/devtools 0.160.0-canary.a124b3451a88 → 0.160.0-canary.b58e60279bcc

package/dist/overlay-styles.d.ts

@@ -1,2 +1,2 @@
-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";
+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.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\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,wlfA2zBzB,CAAA"}
+{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../src/overlay-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,yxfAs0BzB,CAAA"}

package/dist/overlay-styles.js

@@ -60,6 +60,17 @@ ul {
 .fixed {
   position: fixed;
 }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .flex {
   display: flex;
 }

package/dist/overlay.d.ts

@@ -7,6 +7,7 @@ declare const StoreService_base: Context.ServiceClass<StoreService, "foldkit/Dev
     recordMessage: (message: Readonly<{
         _tag: string;
     }>, modelBeforeUpdate: unknown, modelAfterUpdate: unknown, commands: ReadonlyArray<CommandRecord>, isModelChanged: boolean) => Effect.Effect<void>;
+    recordResolvedCommand: (id: number, submodelPath: ReadonlyArray<string>) => Effect.Effect<void>;
     updateLatestModel: (model: unknown) => Effect.Effect<void>;
     attachRenderedMounts: (mountStarts: ReadonlyArray<MountRecord>, mountEnds: ReadonlyArray<MountRecord>) => Effect.Effect<void>;
     getModelAtIndex: (index: number) => Effect.Effect<unknown>;

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,EAGN,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAGf,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;;;;;;;;;;;;;;;;;;;AAqWrE,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGrB,CAAA;AAEF,eAAO,MAAM,YAAY;;iBAGvB,CAAA;AAoCF,eAAO,MAAM,oBAAoB;;;;;iBAkB/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;AA+6DF,eAAO,MAAM,aAAa,UACjB,aAAa,YACV,gBAAgB,QACpB,YAAY,eACL,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAmFhC,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,EAGN,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAGf,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;;;;;;;;;;;;;;;;;;;;AA6WrE,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGrB,CAAA;AAEF,eAAO,MAAM,YAAY;;iBAGvB,CAAA;AAoCF,eAAO,MAAM,oBAAoB;;;;;iBAkB/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;AAu8DF,eAAO,MAAM,aAAa,UACjB,aAAa,YACV,gBAAgB,QACpB,YAAY,eACL,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAmFhC,CAAA"}

package/dist/overlay.js

@@ -24,6 +24,7 @@ const SubmodelFilterListbox = Listbox.create();
 const DisplayCommand = Schema.Struct({
     name: Schema.String,
     args: Schema.Option(Schema.Record(Schema.String, Schema.Unknown)),
+    maybeSubmodelPath: Schema.Option(Schema.Array(Schema.String)),
 });
 const DisplayMount = Schema.Struct({
     name: Schema.String,
@@ -169,9 +170,12 @@ const hostIndexToSliderValue = (hostIndex, startIndex) => (__foldkitBrandViewRes
 const sliderValueToHostIndex = (sliderValue, startIndex) => (__foldkitBrandViewResult((sliderValue === 0 ? INIT_INDEX : startIndex + sliderValue - 1), "@foldkit/devtools/overlay.js#sliderValueToHostIndex"));
 const SCROLL_FOLLOW_THRESHOLD_PX = 8;
 const computeSubmodelTags = (entries) => __foldkitBrandViewResult((pipe(entries, Array.flatMap(({ submodelPath }) => __foldkitBrandViewResult((submodelPath), "@foldkit/devtools/overlay.js#anonymous~8")), Array.dedupe, Array.sort(Order.String))), "@foldkit/devtools/overlay.js#computeSubmodelTags");
+const submodelSegmentLabel = (tag) => __foldkitBrandViewResult((pipe(tag, String.replace(/^Got/, ''), String.replace(/Message$/, ''))), "@foldkit/devtools/overlay.js#submodelSegmentLabel");
+const formatSubmodelPath = (submodelPath) => __foldkitBrandViewResult((pipe(submodelPath, Array.map(submodelSegmentLabel), Array.join(' › '))), "@foldkit/devtools/overlay.js#formatSubmodelPath");
 const toDisplayCommand = (command) => (__foldkitBrandViewResult(({
     name: command.name,
     args: Option.fromNullishOr(command.args),
+    maybeSubmodelPath: command.maybeSubmodelPath,
 }), "@foldkit/devtools/overlay.js#toDisplayCommand"));
 const toDisplayMount = (mount) => (__foldkitBrandViewResult(({
     name: mount.name,
@@ -550,7 +554,7 @@ const makeOverlaySubscriptions = (store, shadow) => {
             return __foldkitBrandViewResult(({ mediaQuery, handler }), "@foldkit/devtools/overlay.js#anonymous~44");
         }), ({ mediaQuery, handler }) => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((mediaQuery.removeEventListener('change', handler)), "@foldkit/devtools/overlay.js#anonymous~46"))), "@foldkit/devtools/overlay.js#anonymous~45")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@foldkit/devtools/overlay.js#anonymous~47")))), "@foldkit/devtools/overlay.js#anonymous~43"))),
     }), "@foldkit/devtools/overlay.js#anonymous~40")));
-    return __foldkitBrandViewResult((Subscription.aggregate()(ownSubscriptions, scrubberSubscriptions)), "@foldkit/devtools/overlay.js#makeOverlaySubscriptions");
+    return __foldkitBrandViewResult((Subscription.aggregate(ownSubscriptions, scrubberSubscriptions)), "@foldkit/devtools/overlay.js#makeOverlaySubscriptions");
 };
 // VIEW
 const indexClass = 'text-2xs text-dt-muted font-mono min-w-5';
@@ -866,7 +870,25 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             h.Class('flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
         ], Array.map(commandList, (command, index) => __foldkitBrandViewResult((h.div([h.Class('flex items-start px-2 py-1 border-b gap-1.5')], [
             h.span([h.Class(indexClass)], [globalThis.String(index + 1)]),
-            h.div([h.Class('flex flex-col flex-1 min-w-0')], Array.map(flattenCommand(command, index, expandedPaths), renderFlatNode)),
+            h.div([h.Class('flex flex-col flex-1 min-w-0')], [
+                ...Option.match(command.maybeSubmodelPath, {
+                    onNone: () => __foldkitBrandViewResult(([
+                        h.div([h.Class('text-2xs text-dt-muted font-mono')], [
+                            h.span([h.AriaHidden(true)], ['…']),
+                            h.span([h.Class('sr-only')], ['Destination pending']),
+                        ]),
+                    ]), "@foldkit/devtools/overlay.js#onNone~4"),
+                    onSome: submodelPath => __foldkitBrandViewResult((Array.match(submodelPath, {
+                        onEmpty: () => __foldkitBrandViewResult(([]), "@foldkit/devtools/overlay.js#onEmpty~6"),
+                        onNonEmpty: submodelPath => __foldkitBrandViewResult(([
+                            h.div([
+                                h.Class('text-2xs text-dt-muted font-mono truncate'),
+                            ], [formatSubmodelPath(submodelPath)]),
+                        ]), "@foldkit/devtools/overlay.js#onNonEmpty~6"),
+                    })), "@foldkit/devtools/overlay.js#onSome~5"),
+                }),
+                ...Array.map(flattenCommand(command, index, expandedPaths), renderFlatNode),
+            ]),
         ])), "@foldkit/devtools/overlay.js#anonymous~67")))), "@foldkit/devtools/overlay.js#onNonEmpty~5"),
     })), "@foldkit/devtools/overlay.js#commandsTabContent");
     const selectedMountActivity = (model) => {
@@ -876,18 +898,18 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         }
         else {
             return __foldkitBrandViewResult((pipe(model.entries, Array.get(selectedIndex - model.startIndex), Option.match({
-                onNone: () => (__foldkitBrandViewResult(({ starts: NO_MOUNTS, ends: NO_MOUNTS }), "@foldkit/devtools/overlay.js#onNone~4")),
+                onNone: () => (__foldkitBrandViewResult(({ starts: NO_MOUNTS, ends: NO_MOUNTS }), "@foldkit/devtools/overlay.js#onNone~5")),
                 onSome: entry => (__foldkitBrandViewResult(({
                     starts: entry.mountStarts,
                     ends: entry.mountEnds,
-                }), "@foldkit/devtools/overlay.js#onSome~5")),
+                }), "@foldkit/devtools/overlay.js#onSome~6")),
             }))), "@foldkit/devtools/overlay.js#selectedMountActivity");
         }
     };
     const flattenMount = (mount, sectionLabel, index, expandedPaths) => {
         const taggedValue = Option.match(mount.args, {
-            onNone: () => (__foldkitBrandViewResult(({ _tag: mount.name }), "@foldkit/devtools/overlay.js#onNone~5")),
-            onSome: argsValue => (__foldkitBrandViewResult(({ ...argsValue, _tag: mount.name }), "@foldkit/devtools/overlay.js#onSome~6")),
+            onNone: () => (__foldkitBrandViewResult(({ _tag: mount.name }), "@foldkit/devtools/overlay.js#onNone~6")),
+            onSome: argsValue => (__foldkitBrandViewResult(({ ...argsValue, _tag: mount.name }), "@foldkit/devtools/overlay.js#onSome~7")),
         });
         const rootPath = `mount-${sectionLabel}-${index}`;
         const nodes = [];
@@ -982,8 +1004,8 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                             : [h.Style({ display: 'none' })]),
                     ], [
                         Option.match(model.maybeInspectedModel, {
-                            onNone: () => __foldkitBrandViewResult((emptyInspectorView), "@foldkit/devtools/overlay.js#onNone~6"),
-                            onSome: inspectedModel => __foldkitBrandViewResult((inspectorTabContent(model, tab.value, inspectedModel)), "@foldkit/devtools/overlay.js#onSome~7"),
+                            onNone: () => __foldkitBrandViewResult((emptyInspectorView), "@foldkit/devtools/overlay.js#onNone~7"),
+                            onSome: inspectedModel => __foldkitBrandViewResult((inspectorTabContent(model, tab.value, inspectedModel)), "@foldkit/devtools/overlay.js#onSome~8"),
                         }),
                     ])), "@foldkit/devtools/overlay.js#anonymous~74")),
                 ])), "@foldkit/devtools/overlay.js#toView"),
@@ -1021,7 +1043,6 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
     const actionButtonClass = 'dt-resume-button bg-transparent border-none text-dt-live cursor-pointer text-base font-mono font-medium';
     const statusClass = 'text-base font-mono';
     const clearHistoryButton = () => __foldkitBrandViewResult((h.button([h.Class(headerButtonClass), h.OnClick(Message.ClickedClear())], ['Clear history'])), "@foldkit/devtools/overlay.js#clearHistoryButton");
-    const submodelLabel = (tag) => __foldkitBrandViewResult((pipe(tag, String.replace(/^Got/, ''), String.replace(/Message$/, ''))), "@foldkit/devtools/overlay.js#submodelLabel");
     const CHECK_ICON = 'M4.5 12.75l6 6 9-13.5';
     const checkIconView = h.svg([
         h.AriaHidden(true),
@@ -1038,7 +1059,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             h.StrokeLinejoin('round'),
         ]),
     ]);
-    const filterItemLabel = (item) => __foldkitBrandViewResult((String.isNonEmpty(item) ? submodelLabel(item) : 'All Messages'), "@foldkit/devtools/overlay.js#filterItemLabel");
+    const filterItemLabel = (item) => __foldkitBrandViewResult((String.isNonEmpty(item) ? submodelSegmentLabel(item) : 'All Messages'), "@foldkit/devtools/overlay.js#filterItemLabel");
     const ARROW_UP = 'M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18';
     const arrowUpIconView = h.svg([
         h.AriaHidden(true),
@@ -1061,8 +1082,8 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
     ])), "@foldkit/devtools/overlay.js#scrollToTopPillView");
     const submodelFilterView = (model) => {
         const buttonLabel = Option.match(model.maybeSubmodelFilter, {
-            onNone: () => __foldkitBrandViewResult(('All Messages'), "@foldkit/devtools/overlay.js#onNone~7"),
-            onSome: submodelLabel,
+            onNone: () => __foldkitBrandViewResult(('All Messages'), "@foldkit/devtools/overlay.js#onNone~8"),
+            onSome: submodelSegmentLabel,
         });
         return __foldkitBrandViewResult((h.submodel({
             slotId: 'submodel-filter',
@@ -1196,8 +1217,8 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
     ])), "@foldkit/devtools/overlay.js#messageRowView");
     const messageListBody = (entries, startIndex, selectedIndex, isPaused, pausedAtIndex, maybeFilterTag, isFlattened) => {
         const baseTimestamp = pipe(entries, Array.head, Option.match({
-            onNone: () => __foldkitBrandViewResult((0), "@foldkit/devtools/overlay.js#onNone~8"),
-            onSome: ({ timestamp }) => __foldkitBrandViewResult((timestamp), "@foldkit/devtools/overlay.js#onSome~8"),
+            onNone: () => __foldkitBrandViewResult((0), "@foldkit/devtools/overlay.js#onNone~9"),
+            onSome: ({ timestamp }) => __foldkitBrandViewResult((timestamp), "@foldkit/devtools/overlay.js#onSome~9"),
         }));
         const isInitSelected = selectedIndex === INIT_INDEX;
         const isFiltered = Option.isSome(maybeFilterTag);
@@ -1208,8 +1229,8 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             }
             else {
                 return __foldkitBrandViewResult((Option.match(maybeFilterTag, {
-                    onNone: () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#onNone~9"),
-                    onSome: filterTag => __foldkitBrandViewResult((pipe(entry.submodelPath, Array.findFirstIndex(pathTag => __foldkitBrandViewResult((pathTag === filterTag), "@foldkit/devtools/overlay.js#anonymous~79")), Option.flatMap(filterIndex => __foldkitBrandViewResult((Array.get(entry.submodelPath, Number.increment(filterIndex))), "@foldkit/devtools/overlay.js#anonymous~80")), Option.orElse(() => __foldkitBrandViewResult((entry.maybeLeafTag), "@foldkit/devtools/overlay.js#anonymous~81")), Option.getOrElse(() => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~82")))), "@foldkit/devtools/overlay.js#onSome~9"),
+                    onNone: () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#onNone~10"),
+                    onSome: filterTag => __foldkitBrandViewResult((pipe(entry.submodelPath, Array.findFirstIndex(pathTag => __foldkitBrandViewResult((pathTag === filterTag), "@foldkit/devtools/overlay.js#anonymous~79")), Option.flatMap(filterIndex => __foldkitBrandViewResult((Array.get(entry.submodelPath, Number.increment(filterIndex))), "@foldkit/devtools/overlay.js#anonymous~80")), Option.orElse(() => __foldkitBrandViewResult((entry.maybeLeafTag), "@foldkit/devtools/overlay.js#anonymous~81")), Option.getOrElse(() => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~82")))), "@foldkit/devtools/overlay.js#onSome~10"),
                 })), "@foldkit/devtools/overlay.js#displayTagFor");
             }
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/devtools",
-  "version": "0.160.0-canary.a124b3451a88",
+  "version": "0.160.0-canary.b58e60279bcc",
   "description": "In-browser DevTools overlay for Foldkit applications",
   "type": "module",
   "exports": {
@@ -15,9 +15,9 @@
   ],
   "peerDependencies": {
     "@effect/platform-browser": "4.0.0-rc.115",
-    "@foldkit/ui": "0.160.0-canary.a124b3451a88",
+    "@foldkit/ui": "0.160.0-canary.b58e60279bcc",
     "effect": "4.0.0-rc.115",
-    "foldkit": "0.160.0-canary.a124b3451a88"
+    "foldkit": "0.160.0-canary.b58e60279bcc"
   },
   "dependencies": {
     "clsx": "^2.1.1"
@@ -29,9 +29,9 @@
     "rimraf": "^6.1.3",
     "typescript": "^7.0.2",
     "vitest": "^4.1.11",
-    "@foldkit/vite-plugin": "0.22.0-canary.a124b3451a88",
-    "@foldkit/ui": "0.160.0-canary.a124b3451a88",
-    "foldkit": "0.160.0-canary.a124b3451a88"
+    "@foldkit/ui": "0.160.0-canary.b58e60279bcc",
+    "@foldkit/vite-plugin": "0.22.0-canary.b58e60279bcc",
+    "foldkit": "0.160.0-canary.b58e60279bcc"
   },
   "keywords": [
     "foldkit",