foldkit 0.95.1 → 0.97.0

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

@@ -1,3 +1,3 @@
-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.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-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  top: 100%;\n  left: 0;\n  right: 0;\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: 10;\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-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/* Scrubber */\n.dt-scrubber-row {\n  background-color: var(--dt-bg);\n}\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";
+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.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  top: 100%;\n  left: 0;\n  right: 0;\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: 10;\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-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/* Scrubber */\n.dt-scrubber-row {\n  background-color: var(--dt-bg);\n}\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 { overlayStyles };
 //# sourceMappingURL=overlay-styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../../src/devTools/overlay-styles.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,aAAa,ypXAkqBlB,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../../src/devTools/overlay-styles.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,aAAa,g1YAgsBlB,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/devTools/overlay-styles.js

@@ -234,6 +234,36 @@ ul {
 .dt-resume-button:hover {
   opacity: 0.7;
 }
+.dt-scroll-pill {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex-shrink: 0;
+  padding: 4px 12px;
+  background-color: var(--dt-surface-selected);
+  border: none;
+  border-bottom: 1px solid var(--dt-border);
+  color: var(--dt-accent);
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 13px;
+  cursor: pointer;
+}
+.dt-scroll-pill-icon {
+  width: 12px;
+  height: 12px;
+}
+.dt-scroll-pill-text {
+  margin-top: 1px;
+}
+.dt-scroll-pill:hover {
+  background-color: var(--dt-tree-hover);
+}
+.dt-scroll-pill:focus-visible {
+  outline: 1px solid var(--dt-accent);
+  outline-offset: -1px;
+}
 .dt-filter-wrapper {
   position: relative;
   flex-shrink: 0;

package/dist/devTools/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devTools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAGN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAa9C,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAQ3E,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAElB,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,YAAY,CAAA;;oFA8ZQ,CAAC;;;;;;;;;;;;;;AApI5B,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAWjD,eAAO,MAAM,MAAM;;;;wBAUlB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;wBAIqB,CAAA;AAE9C,eAAO,MAAM,aAAa;;;;;;wBAYzB,CAAA;AAED,eAAO,MAAM,MAAM;;wBASlB,CAAA;AAED,eAAO,MAAM,KAAK;;wBASjB,CAAA;AAED,eAAO,MAAM,WAAW;;6BAYvB,CAAA;AA0oDD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCAkEhC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devTools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAGN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAa9C,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAQ3E,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAElB,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,YAAY,CAAA;;oFA8ZL,CAAC;;;;;;;;;;;;;;AA7Hf,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAWjD,eAAO,MAAM,MAAM;;;;wBAUlB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;wBAIqB,CAAA;AAE9C,eAAO,MAAM,aAAa;;;;;;wBAYzB,CAAA;AAED,eAAO,MAAM,MAAM;;wBASlB,CAAA;AAED,eAAO,MAAM,KAAK;;wBASjB,CAAA;AAED,eAAO,MAAM,WAAW;;6BAYvB,CAAA;AA2sDD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCAmEhC,CAAA"}

package/dist/devTools/overlay.js

@@ -66,6 +66,7 @@ const Model = S.Struct({
     pausedAtIndex: S.Number,
     selectedIndex: S.Number,
     isFollowingLatest: S.Boolean,
+    isFollowingTop: S.Boolean,
     maybeInspectedModel: S.Option(UnknownByReference),
     maybeInspectedMessage: S.Option(UnknownByReference),
     submodelTags: S.Array(S.String),
@@ -102,6 +103,8 @@ const ClickedClear = m('ClickedClear');
 const CompletedJump = m('CompletedJump');
 const CompletedResume = m('CompletedResume');
 const ClickedFollowLatest = m('ClickedFollowLatest');
+const ClickedScrollToTopPill = m('ClickedScrollToTopPill');
+const ScrolledMessageList = m('ScrolledMessageList', { scrollTop: S.Number });
 const CompletedClear = m('CompletedClear');
 const LockedScroll = m('LockedScroll');
 const UnlockedScroll = m('UnlockedScroll');
@@ -143,6 +146,8 @@ const Message = S.Union([
     ClickedResume,
     ClickedClear,
     ClickedFollowLatest,
+    ClickedScrollToTopPill,
+    ScrolledMessageList,
     CompletedJump,
     CompletedResume,
     CompletedClear,
@@ -177,6 +182,7 @@ const MESSAGE_LIST_SELECTOR = '.message-list';
 // the boundaries via the helpers below.
 const hostIndexToSliderValue = (hostIndex, startIndex) => (hostIndex === INIT_INDEX ? 0 : hostIndex - startIndex + 1);
 const sliderValueToHostIndex = (sliderValue, startIndex) => (sliderValue === 0 ? INIT_INDEX : startIndex + sliderValue - 1);
+const SCROLL_FOLLOW_THRESHOLD_PX = 8;
 const computeSubmodelTags = (entries) => pipe(entries, Array_.flatMap(({ submodelPath }) => submodelPath), Array_.dedupe, Array_.sort(Order.String));
 const toDisplayCommand = (command) => ({
     name: command.name,
@@ -297,22 +303,24 @@ const makeUpdate = (store, shadow, mode) => {
         ]), M.exhaustive),
         ClickedResume: () => [
             evo(model, {
+                isFollowingTop: () => true,
                 expandedPaths: () => HashSet.empty(),
                 changedPaths: () => HashSet.empty(),
                 affectedPaths: () => HashSet.empty(),
             }),
-            [resume, inspectLatest],
+            [resume, inspectLatest, scrollToTop],
         ],
         ClickedClear: () => [
             evo(model, {
                 selectedIndex: () => INIT_INDEX,
                 isFollowingLatest: () => true,
+                isFollowingTop: () => true,
                 maybeSubmodelFilter: () => Option.none(),
                 expandedPaths: () => HashSet.empty(),
                 changedPaths: () => HashSet.empty(),
                 affectedPaths: () => HashSet.empty(),
             }),
-            [clear, inspectLatest],
+            [clear, inspectLatest, scrollToTop],
         ],
         ClickedFollowLatest: () => {
             const latestIndex = Array_.match(model.entries, {
@@ -323,6 +331,7 @@ const makeUpdate = (store, shadow, mode) => {
                 evo(model, {
                     selectedIndex: () => latestIndex,
                     isFollowingLatest: () => true,
+                    isFollowingTop: () => true,
                     expandedPaths: () => HashSet.empty(),
                     changedPaths: () => HashSet.empty(),
                     affectedPaths: () => HashSet.empty(),
@@ -330,6 +339,18 @@ const makeUpdate = (store, shadow, mode) => {
                 [inspectLatest, scrollToTop],
             ];
         },
+        ClickedScrollToTopPill: () => [
+            evo(model, {
+                isFollowingTop: () => true,
+            }),
+            [scrollToTop],
+        ],
+        ScrolledMessageList: ({ scrollTop }) => {
+            const isAtTop = scrollTop <= SCROLL_FOLLOW_THRESHOLD_PX;
+            return isAtTop === model.isFollowingTop
+                ? [model, []]
+                : [evo(model, { isFollowingTop: () => isAtTop }), []];
+        },
         ReceivedInspectedState: ({ model: inspectedModel, maybeMessage, changedPaths, affectedPaths, }) => [
             evo(model, {
                 maybeInspectedModel: () => Option.some(inspectedModel),
@@ -359,7 +380,8 @@ const makeUpdate = (store, shadow, mode) => {
             [],
         ],
         ReceivedStoreUpdate: ({ entries, initCommands, initMountStarts, startIndex, isPaused, pausedAtIndex, }) => {
-            const shouldFollowLatest = M.value(mode).pipe(M.when('TimeTravel', () => !isPaused), M.when('Inspect', () => model.isFollowingLatest), M.exhaustive);
+            const shouldFollowSelection = M.value(mode).pipe(M.when('TimeTravel', () => !isPaused), M.when('Inspect', () => model.isFollowingLatest), M.exhaustive);
+            const shouldFollowScroll = M.value(mode).pipe(M.when('TimeTravel', () => !isPaused && model.isFollowingTop), M.when('Inspect', () => model.isFollowingTop), M.exhaustive);
             const latestIndex = Array_.match(entries, {
                 onEmpty: () => INIT_INDEX,
                 onNonEmpty: () => startIndex + entries.length - 1,
@@ -381,7 +403,7 @@ const makeUpdate = (store, shadow, mode) => {
                             maybeSelectedItem: () => Option.some(ALL_MESSAGES_VALUE),
                         })
                         : current,
-                    selectedIndex: current => shouldFollowLatest ? latestIndex : current,
+                    selectedIndex: current => shouldFollowSelection ? latestIndex : current,
                     scrubberSlider: current => {
                         const sliderMax = entries.length;
                         const targetSliderValue = isPaused
@@ -390,7 +412,10 @@ const makeUpdate = (store, shadow, mode) => {
                         return Slider.setValue(Slider.setRange(current, { min: 0, max: sliderMax }), targetSliderValue);
                     },
                 }),
-                shouldFollowLatest ? [scrollToTop, inspectLatest] : [],
+                [
+                    ...(shouldFollowSelection ? [inspectLatest] : []),
+                    ...(shouldFollowScroll ? [scrollToTop] : []),
+                ],
             ];
         },
         GotSubmodelFilterMessage: ({ message: listboxMessage }) => {
@@ -433,7 +458,7 @@ const makeUpdate = (store, shadow, mode) => {
 };
 // SUBSCRIPTION
 const ScrubberDragActivity = S.Literals(['Idle', 'Active']);
-const SubscriptionDeps = S.Struct({
+const SubscriptionDependencies = S.Struct({
     storeUpdates: S.Boolean,
     mobileBreakpoint: S.Null,
     scrubberPointer: S.Struct({
@@ -448,7 +473,7 @@ const SubscriptionDeps = S.Struct({
 });
 const makeOverlaySubscriptions = (store, shadow) => {
     const sliderSubscriptions = Slider.subscriptionsForRoot(() => shadow);
-    return makeSubscriptions(SubscriptionDeps)({
+    return makeSubscriptions(SubscriptionDependencies)({
         storeUpdates: {
             modelToDependencies: () => true,
             dependenciesToStream: () => Stream.concat(Stream.fromEffect(SubscriptionRef.get(store.stateRef).pipe(Effect.map(state => ReceivedStoreUpdate(toDisplayState(state))))), Stream.map(SubscriptionRef.changes(store.stateRef), state => ReceivedStoreUpdate(toDisplayState(state)))),
@@ -893,6 +918,26 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         h.path([h.D(CHECK_ICON), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
     ]);
     const filterItemLabel = (item) => String_.isNonEmpty(item) ? submodelLabel(item) : 'All Messages';
+    const ARROW_UP = 'M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18';
+    const arrowUpIconView = h.svg([
+        h.AriaHidden(true),
+        h.Class('dt-scroll-pill-icon shrink-0'),
+        h.Xmlns('http://www.w3.org/2000/h.svg'),
+        h.Fill('none'),
+        h.ViewBox('0 0 24 24'),
+        h.StrokeWidth('2'),
+        h.Stroke('currentColor'),
+    ], [
+        h.path([h.D(ARROW_UP), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
+    ]);
+    const scrollToTopPillView = h.button([
+        h.Key('scroll-pill'),
+        h.Class('dt-scroll-pill'),
+        h.OnClick(ClickedScrollToTopPill()),
+    ], [
+        arrowUpIconView,
+        h.span([h.Class('dt-scroll-pill-text')], ['Jump to top']),
+    ]);
     const submodelFilterView = (model) => {
         const buttonLabel = Option.match(model.maybeSubmodelFilter, {
             onNone: () => 'All Messages',
@@ -928,6 +973,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             buttonClassName: 'dt-filter-button',
             itemsClassName: 'dt-filter-items',
             className: 'dt-filter-wrapper',
+            attributes: [h.Key('submodel-filter')],
             backdropClassName: 'dt-filter-backdrop',
         });
     };
@@ -1018,7 +1064,11 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                 entry.isModelChanged,
             ]);
         }), Array_.reverse);
-        return h.ul([h.Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none')], isFiltered
+        return h.ul([
+            h.Key('message-list'),
+            h.Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none'),
+            h.OnScroll(scrollTop => ScrolledMessageList({ scrollTop })),
+        ], isFiltered
             ? messageRows
             : [
                 ...messageRows,
@@ -1084,6 +1134,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                     onEmpty: () => [],
                     onNonEmpty: () => [submodelFilterView(model)],
                 }),
+                ...OptionExt.when(!model.isFollowingTop, scrollToTopPillView).pipe(Option.toArray),
                 messageListView(model),
             ]),
             inspectorPaneView(model),
@@ -1146,6 +1197,7 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
                 ...flags,
                 selectedIndex: INIT_INDEX,
                 isFollowingLatest: true,
+                isFollowingTop: true,
                 submodelTags: computeSubmodelTags(flags.entries),
                 maybeSubmodelFilter: Option.none(),
                 submodelFilterListbox: Listbox.init({

package/dist/dom/dom.d.ts

@@ -16,14 +16,29 @@ import { ElementNotFound } from './error.js';
  * effects bound to a VNode existing where the live element handle is
  * needed (positioning, portaling, observer attachment, library setup).
  *
+ * Section headings, articles, and other non-natively-focusable elements
+ * are common URL fragment targets, but `.focus()` is a no-op on them
+ * without a `tabindex`. Pass `makeFocusable: true` to inject
+ * `tabindex="-1"` on the target if it has none, making programmatic
+ * focus actually land. Pass `preventScroll: true` to suppress the
+ * browser's default scroll-on-focus, useful when the focus call follows
+ * a deliberate scroll that should not be undone. The two options compose
+ * with `scrollIntoViewAfterPaint` for URL-fragment-navigation
+ * accessibility: scroll the section into view, then focus the same
+ * selector so keyboard users start Tab navigation from the target.
+ *
  * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
  *
  * @example
  * ```typescript
  * Dom.focus('#email-input').pipe(Effect.ignore, Effect.as(CompletedFocusInput()))
+ * Dom.focus('#section', { preventScroll: true, makeFocusable: true })
  * ```
  */
-export declare const focus: (selector: string) => Effect.Effect<void, ElementNotFound>;
+export declare const focus: (selector: string, options?: Readonly<{
+    preventScroll?: boolean;
+    makeFocusable?: boolean;
+}>) => Effect.Effect<void, ElementNotFound>;
 /**
  * Opens a dialog element using `show()` with high z-index, focus trapping,
  * and Escape key handling. Uses `show()` instead of `showModal()` so that
@@ -64,15 +79,50 @@ export declare const closeModal: (selector: string) => Effect.Effect<void, Eleme
  */
 export declare const clickElement: (selector: string) => Effect.Effect<void, ElementNotFound>;
 /**
- * Scrolls an element into view by selector using `{ block: 'nearest' }`.
+ * Scrolls an element into view by selector. Resolves the selector after
+ * `Render.afterCommit`. Defaults to `{ block: 'nearest' }`; pass a different
+ * `block` for use cases like URL-fragment landing where `'start'` is right.
+ * For a target the same Message just brought into the DOM,
+ * `scrollIntoViewAfterPaint` is the right choice.
+ *
  * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
  *
  * @example
  * ```typescript
  * Dom.scrollIntoView('#active-item').pipe(Effect.ignore, Effect.as(CompletedScrollIntoView()))
+ * Dom.scrollIntoView('#section-2', { block: 'start' })
  * ```
  */
-export declare const scrollIntoView: (selector: string) => Effect.Effect<void, ElementNotFound>;
+export declare const scrollIntoView: (selector: string, options?: Readonly<{
+    block?: ScrollLogicalPosition;
+}>) => Effect.Effect<void, ElementNotFound>;
+/**
+ * Like `scrollIntoView`, but waits for `Render.afterPaint` instead of
+ * `Render.afterCommit` before resolving the selector.
+ *
+ * Reach for this when the target was just brought into the DOM by the same
+ * Message that dispatches the scroll, such as a routing flow landing at a
+ * URL fragment. The two-frame wait gives the runtime time to commit the new
+ * Model and the browser time to lay it out before the scroll runs. For a
+ * target that's already on screen, `scrollIntoView` is the lighter choice.
+ *
+ * Defaults to `{ block: 'nearest' }`; pass `{ block: 'start' }` for URL
+ * fragment landings where the target should sit at the top of the viewport.
+ *
+ * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
+ *
+ * @example
+ * ```typescript
+ * Dom.scrollIntoViewAfterPaint('#overview').pipe(
+ *   Effect.ignore,
+ *   Effect.as(CompletedScrollIntoViewAfterPaint()),
+ * )
+ * Dom.scrollIntoViewAfterPaint(`#${hash}`, { block: 'start' })
+ * ```
+ */
+export declare const scrollIntoViewAfterPaint: (selector: string, options?: Readonly<{
+    block?: ScrollLogicalPosition;
+}>) => Effect.Effect<void, ElementNotFound>;
 /** Direction for focus advancement: forward or backward in tab order. */
 export type FocusDirection = 'Next' | 'Previous';
 /**

package/dist/dom/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/dom/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EAMP,MAAM,QAAQ,CAAA;AAGf,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AA6B5C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,KAAK,GAAI,UAAU,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAKxE,CAAA;AAEJ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS,GACpB,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,aAAa,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,KAC7C,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAgDlC,CAAA;AAuBJ;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GACrB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAclC,CAAA;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAKlC,CAAA;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,GACzB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAKlC,CAAA;AAEJ,yEAAyE;AACzE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAA;AAEhD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,EAChB,WAAW,cAAc,KACxB,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAiClC,CAAA"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/dom/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EAMP,MAAM,QAAQ,CAAA;AAGf,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AA6B5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,KAAK,GAChB,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,KACvE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAQlC,CAAA;AAEJ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS,GACpB,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,aAAa,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,KAC7C,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAgDlC,CAAA;AAuBJ;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GACrB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAclC,CAAA;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAKlC,CAAA;AAEJ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,GACzB,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,KAAK,CAAC,EAAE,qBAAqB,CAAA;CAAE,CAAC,KACpD,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAKlC,CAAA;AAEJ;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,KAAK,CAAC,EAAE,qBAAqB,CAAA;CAAE,CAAC,KACpD,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAKlC,CAAA;AAEJ,yEAAyE;AACzE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAA;AAEhD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,EAChB,WAAW,cAAc,KACxB,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAiClC,CAAA"}

package/dist/dom/dom.js

@@ -1,5 +1,5 @@
 import { Array, Effect, Equal, Function, Match as M, Number, Option, } from 'effect';
-import { afterCommit } from '../render/render.js';
+import { afterCommit, afterPaint } from '../render/render.js';
 import { ElementNotFound } from './error.js';
 const BASE_DIALOG_Z_INDEX = 2147483600;
 let openDialogCount = 0;
@@ -34,17 +34,32 @@ const queryHTMLElement = (selector) => Effect.suspend(() => {
  * effects bound to a VNode existing where the live element handle is
  * needed (positioning, portaling, observer attachment, library setup).
  *
+ * Section headings, articles, and other non-natively-focusable elements
+ * are common URL fragment targets, but `.focus()` is a no-op on them
+ * without a `tabindex`. Pass `makeFocusable: true` to inject
+ * `tabindex="-1"` on the target if it has none, making programmatic
+ * focus actually land. Pass `preventScroll: true` to suppress the
+ * browser's default scroll-on-focus, useful when the focus call follows
+ * a deliberate scroll that should not be undone. The two options compose
+ * with `scrollIntoViewAfterPaint` for URL-fragment-navigation
+ * accessibility: scroll the section into view, then focus the same
+ * selector so keyboard users start Tab navigation from the target.
+ *
  * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
  *
  * @example
  * ```typescript
  * Dom.focus('#email-input').pipe(Effect.ignore, Effect.as(CompletedFocusInput()))
+ * Dom.focus('#section', { preventScroll: true, makeFocusable: true })
  * ```
  */
-export const focus = (selector) => Effect.gen(function* () {
+export const focus = (selector, options) => Effect.gen(function* () {
     yield* afterCommit;
     const element = yield* queryHTMLElement(selector);
-    element.focus();
+    if (options?.makeFocusable && !element.hasAttribute('tabindex')) {
+        element.setAttribute('tabindex', '-1');
+    }
+    element.focus({ preventScroll: options?.preventScroll ?? false });
 });
 /**
  * Opens a dialog element using `show()` with high z-index, focus trapping,
@@ -149,18 +164,53 @@ export const clickElement = (selector) => Effect.gen(function* () {
     element.click();
 });
 /**
- * Scrolls an element into view by selector using `{ block: 'nearest' }`.
+ * Scrolls an element into view by selector. Resolves the selector after
+ * `Render.afterCommit`. Defaults to `{ block: 'nearest' }`; pass a different
+ * `block` for use cases like URL-fragment landing where `'start'` is right.
+ * For a target the same Message just brought into the DOM,
+ * `scrollIntoViewAfterPaint` is the right choice.
+ *
  * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
  *
  * @example
  * ```typescript
  * Dom.scrollIntoView('#active-item').pipe(Effect.ignore, Effect.as(CompletedScrollIntoView()))
+ * Dom.scrollIntoView('#section-2', { block: 'start' })
  * ```
  */
-export const scrollIntoView = (selector) => Effect.gen(function* () {
+export const scrollIntoView = (selector, options) => Effect.gen(function* () {
     yield* afterCommit;
     const element = yield* queryHTMLElement(selector);
-    element.scrollIntoView({ block: 'nearest' });
+    element.scrollIntoView({ block: options?.block ?? 'nearest' });
+});
+/**
+ * Like `scrollIntoView`, but waits for `Render.afterPaint` instead of
+ * `Render.afterCommit` before resolving the selector.
+ *
+ * Reach for this when the target was just brought into the DOM by the same
+ * Message that dispatches the scroll, such as a routing flow landing at a
+ * URL fragment. The two-frame wait gives the runtime time to commit the new
+ * Model and the browser time to lay it out before the scroll runs. For a
+ * target that's already on screen, `scrollIntoView` is the lighter choice.
+ *
+ * Defaults to `{ block: 'nearest' }`; pass `{ block: 'start' }` for URL
+ * fragment landings where the target should sit at the top of the viewport.
+ *
+ * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
+ *
+ * @example
+ * ```typescript
+ * Dom.scrollIntoViewAfterPaint('#overview').pipe(
+ *   Effect.ignore,
+ *   Effect.as(CompletedScrollIntoViewAfterPaint()),
+ * )
+ * Dom.scrollIntoViewAfterPaint(`#${hash}`, { block: 'start' })
+ * ```
+ */
+export const scrollIntoViewAfterPaint = (selector, options) => Effect.gen(function* () {
+    yield* afterPaint;
+    const element = yield* queryHTMLElement(selector);
+    element.scrollIntoView({ block: options?.block ?? 'nearest' });
 });
 /**
  * Focuses the next or previous focusable element in the document relative to the element matching the given selector.

package/dist/dom/index.d.ts

@@ -1,5 +1,5 @@
 export { ElementNotFound } from './error.js';
-export { advanceFocus, clickElement, closeModal, focus, scrollIntoView, showModal, } from './dom.js';
+export { advanceFocus, clickElement, closeModal, focus, scrollIntoView, scrollIntoViewAfterPaint, showModal, } from './dom.js';
 export type { FocusDirection } from './dom.js';
 export { detectElementMovement } from './elementMovement.js';
 export { inertOthers, restoreInert } from './inert.js';

package/dist/dom/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dom/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,KAAK,EACL,cAAc,EACd,SAAS,GACV,MAAM,UAAU,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dom/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,KAAK,EACL,cAAc,EACd,wBAAwB,EACxB,SAAS,GACV,MAAM,UAAU,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/dom/index.js

@@ -1,5 +1,5 @@
 export { ElementNotFound } from './error.js';
-export { advanceFocus, clickElement, closeModal, focus, scrollIntoView, showModal, } from './dom.js';
+export { advanceFocus, clickElement, closeModal, focus, scrollIntoView, scrollIntoViewAfterPaint, showModal, } from './dom.js';
 export { detectElementMovement } from './elementMovement.js';
 export { inertOthers, restoreInert } from './inert.js';
 export { lockScroll, unlockScroll } from './scrollLock.js';

package/dist/dom/public.d.ts

@@ -1,3 +1,3 @@
-export { ElementNotFound, advanceFocus, clickElement, closeModal, detectElementMovement, focus, inertOthers, lockScroll, restoreInert, scrollIntoView, showModal, unlockScroll, waitForAnimationSettled, } from './index.js';
+export { ElementNotFound, advanceFocus, clickElement, closeModal, detectElementMovement, focus, inertOthers, lockScroll, restoreInert, scrollIntoView, scrollIntoViewAfterPaint, showModal, unlockScroll, waitForAnimationSettled, } from './index.js';
 export type { FocusDirection } from './index.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/dom/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/dom/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,qBAAqB,EACrB,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,cAAc,EACd,SAAS,EACT,YAAY,EACZ,uBAAuB,GACxB,MAAM,YAAY,CAAA;AACnB,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/dom/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,qBAAqB,EACrB,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,cAAc,EACd,wBAAwB,EACxB,SAAS,EACT,YAAY,EACZ,uBAAuB,GACxB,MAAM,YAAY,CAAA;AACnB,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA"}

package/dist/dom/public.js

@@ -1 +1 @@
-export { ElementNotFound, advanceFocus, clickElement, closeModal, detectElementMovement, focus, inertOthers, lockScroll, restoreInert, scrollIntoView, showModal, unlockScroll, waitForAnimationSettled, } from './index.js';
+export { ElementNotFound, advanceFocus, clickElement, closeModal, detectElementMovement, focus, inertOthers, lockScroll, restoreInert, scrollIntoView, scrollIntoViewAfterPaint, showModal, unlockScroll, waitForAnimationSettled, } from './index.js';

package/dist/html/index.d.ts

@@ -194,7 +194,7 @@ export type Attribute<Message> = Data.TaggedEnum<{
         readonly message: Message;
     };
     OnScroll: {
-        readonly message: Message;
+        readonly f: (scrollTop: number) => Message;
     };
     OnWheel: {
         readonly message: Message;
@@ -972,7 +972,7 @@ export declare const html: <Message = never>() => {
         readonly message: Message;
     } | {
         readonly _tag: "OnScroll";
-        readonly message: Message;
+        readonly f: (scrollTop: number) => Message;
     } | {
         readonly _tag: "OnWheel";
         readonly message: Message;
@@ -1783,9 +1783,9 @@ export declare const html: <Message = never>() => {
         readonly _tag: "OnReset";
         readonly message: Message;
     };
-    OnScroll: (message: Message) => {
+    OnScroll: (f: (scrollTop: number) => Message) => {
         readonly _tag: "OnScroll";
-        readonly message: Message;
+        readonly f: (scrollTop: number) => Message;
     };
     OnWheel: (message: Message) => {
         readonly _tag: "OnWheel";