foldkit 0.91.0 → 0.93.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-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/* 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}\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-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,q3UAimBlB,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,ypXAkqBlB,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/devTools/overlay-styles.js

@@ -73,6 +73,9 @@ ul {
 .gap-2 {
   gap: 8px;
 }
+.gap-3 {
+  gap: 12px;
+}
 .gap-px {
   gap: 1px;
 }
@@ -577,6 +580,64 @@ ul {
   cursor: not-allowed;
 }
 
+/* Scrubber */
+.dt-scrubber-row {
+  background-color: var(--dt-bg);
+}
+.dt-scrubber-control {
+  position: relative;
+  height: 16px;
+  width: 100%;
+  padding: 0 7px;
+  display: flex;
+  align-items: center;
+}
+.dt-scrubber-track {
+  width: 100%;
+  height: 4px;
+  background-color: var(--dt-border);
+  border-radius: 9999px;
+  cursor: pointer;
+}
+.dt-scrubber-track[data-disabled] {
+  cursor: not-allowed;
+}
+.dt-scrubber-fill {
+  height: 100%;
+  background-color: var(--dt-accent);
+  border-radius: 9999px;
+}
+.dt-scrubber-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 9999px;
+  background-color: var(--dt-accent);
+  border: 2px solid var(--dt-bg);
+  cursor: grab;
+  outline: none;
+  top: 50%;
+  margin-top: -7px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+.dt-scrubber-thumb:focus-visible {
+  outline: 2px solid var(--dt-text);
+  outline-offset: 2px;
+}
+.dt-scrubber-thumb[data-dragging] {
+  cursor: grabbing;
+}
+.dt-scrubber-position {
+  width: 72px;
+  padding-left: 12px;
+  border-left: 1px solid var(--dt-border);
+  align-self: stretch;
+  margin-top: -8px;
+  margin-bottom: -8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* Mobile */
 @media (max-width: 767px) {
   .dt-panel {
@@ -606,6 +667,10 @@ ul {
   .dt-inspector-pane {
     border-left: none;
   }
+  .dt-badge.dt-pos-br,
+  .dt-badge.dt-pos-bl {
+    bottom: 44px;
+  }
 }
 `;
 export { overlayStyles };

package/dist/devTools/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>;
+    updateLatestModel: (model: unknown) => Effect.Effect<void>;
     attachRenderedMounts: (mountStarts: ReadonlyArray<MountRecord>, mountEnds: ReadonlyArray<MountRecord>) => Effect.Effect<void>;
     getModelAtIndex: (index: number) => Effect.Effect<unknown>;
     getMessageAtIndex: (index: number) => Effect.Effect<Option.Option<unknown>>;

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;AAO3E,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAElB,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,YAAY,CAAA;;oFA+XH,CAAC;;;;;;;;;;;;;AApIjB,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;AA2/CD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCAoDhC,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;;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"}

package/dist/devTools/overlay.js

@@ -9,6 +9,7 @@ import { makeProgram } from '../runtime/runtime.js';
 import { makeSubscriptions } from '../runtime/subscription.js';
 import { evo } from '../struct/index.js';
 import * as Listbox from '../ui/listbox/public.js';
+import * as Slider from '../ui/slider/public.js';
 import * as Tabs from '../ui/tabs/public.js';
 import { overlayStyles } from './overlay-styles.js';
 import { toInspectableValue } from './serialize.js';
@@ -35,6 +36,7 @@ const DisplayEntry = S.Struct({
 });
 const INSPECTOR_TABS_ID = 'dt-inspector';
 const SUBMODEL_FILTER_ID = 'dt-submodel-filter';
+const SCRUBBER_SLIDER_ID = 'dt-scrubber';
 const InspectorTabsModel = S.Struct({
     id: S.String,
     activeIndex: S.Number,
@@ -73,6 +75,15 @@ const Model = S.Struct({
     changedPaths: S.HashSet(S.String),
     affectedPaths: S.HashSet(S.String),
     inspectorTabs: InspectorTabsModel,
+    // NOTE: empirically, inlining `Slider.Model` here throws
+    // "Cannot read properties of undefined (reading 'ast')" when running slider
+    // tests, because slider imports html → runtime → overlay, and overlay
+    // references Slider.Model mid-cycle. S.suspend defers the read until after
+    // the cycle resolves. Inlining Listbox.Model works in practice but goes
+    // through the same import chain; the exact cause of the asymmetry isn't
+    // pinned down. Suspend is the conservative fix until the runtime ↔ overlay
+    // cycle is broken at the source.
+    scrubberSlider: S.suspend(() => Slider.Model),
 });
 const Flags = S.Struct({
     isMobile: S.Boolean,
@@ -122,6 +133,10 @@ const GotSubmodelFilterMessage = m('GotSubmodelFilterMessage', {
 const SelectedSubmodelFilter = m('SelectedSubmodelFilter', {
     tag: S.String,
 });
+// NOTE: suspend for the same init-order reason as scrubberSlider above.
+const GotScrubberSliderMessage = m('GotScrubberSliderMessage', {
+    message: S.suspend(() => Slider.Message),
+});
 const Message = S.Union([
     ClickedToggle,
     ClickedRow,
@@ -141,6 +156,7 @@ const Message = S.Union([
     ReceivedStoreUpdate,
     GotSubmodelFilterMessage,
     SelectedSubmodelFilter,
+    GotScrubberSliderMessage,
 ]);
 // HELPERS
 const MILLIS_PER_SECOND = 1000;
@@ -153,6 +169,14 @@ const NO_COMMANDS = [];
 const NO_MOUNTS = [];
 const formatTimeDelta = (deltaMs) => M.value(deltaMs).pipe(M.when(0, () => '0ms'), M.when(Number_.isLessThan(MILLIS_PER_SECOND), ms => `+${Math.round(ms)}ms`), M.orElse(ms => `+${(ms / MILLIS_PER_SECOND).toFixed(1)}s`));
 const MESSAGE_LIST_SELECTOR = '.message-list';
+// NOTE: scrubber slider value space is independent of the store's host
+// indices. Slider value 0 represents init; 1..entries.length represents
+// positions after each buffered message. Passing pausedAtIndex (a host
+// index) straight into setValue, or treating ChangedValue.value as a host
+// index in jumpTo, will silently produce wrong navigation. Translate at
+// 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 computeSubmodelTags = (entries) => pipe(entries, Array_.flatMap(({ submodelPath }) => submodelPath), Array_.dedupe, Array_.sort(Order.String));
 const toDisplayCommand = (command) => ({
     name: command.name,
@@ -358,6 +382,13 @@ const makeUpdate = (store, shadow, mode) => {
                         })
                         : current,
                     selectedIndex: current => shouldFollowLatest ? latestIndex : current,
+                    scrubberSlider: current => {
+                        const sliderMax = entries.length;
+                        const targetSliderValue = isPaused
+                            ? hostIndexToSliderValue(pausedAtIndex, startIndex)
+                            : sliderMax;
+                        return Slider.setValue(Slider.setRange(current, { min: 0, max: sliderMax }), targetSliderValue);
+                    },
                 }),
                 shouldFollowLatest ? [scrollToTop, inspectLatest] : [],
             ];
@@ -381,30 +412,68 @@ const makeUpdate = (store, shadow, mode) => {
                 listboxCommands.map(Command.mapEffect(Effect.map(innerMessage => GotSubmodelFilterMessage({ message: innerMessage })))),
             ];
         },
+        GotScrubberSliderMessage: ({ message: sliderMessage }) => {
+            const [nextSlider, sliderCommands, maybeOutMessage] = Slider.update(model.scrubberSlider, sliderMessage);
+            const mappedSliderCommands = sliderCommands.map(Command.mapEffect(Effect.map(innerMessage => GotScrubberSliderMessage({ message: innerMessage }))));
+            const additionalCommands = Option.match(maybeOutMessage, {
+                onNone: () => [],
+                onSome: outMessage => M.value(outMessage).pipe(M.tagsExhaustive({
+                    ChangedValue: ({ value }) => {
+                        const hostIndex = sliderValueToHostIndex(value, model.startIndex);
+                        return [jumpTo(hostIndex), inspectState(hostIndex)];
+                    },
+                })),
+            });
+            return [
+                evo(model, { scrubberSlider: () => nextSlider }),
+                [...mappedSliderCommands, ...additionalCommands],
+            ];
+        },
     }), M.tag('CompletedJump', 'CompletedResume', 'CompletedClear', 'LockedScroll', 'UnlockedScroll', 'ScrolledToTop', () => [model, []]), M.exhaustive);
 };
 // SUBSCRIPTION
+const ScrubberDragActivity = S.Literals(['Idle', 'Active']);
 const SubscriptionDeps = S.Struct({
     storeUpdates: S.Boolean,
     mobileBreakpoint: S.Null,
+    scrubberPointer: S.Struct({
+        dragActivity: ScrubberDragActivity,
+        id: S.String,
+        min: S.Number,
+        max: S.Number,
+    }),
+    scrubberEscape: S.Struct({
+        dragActivity: ScrubberDragActivity,
+    }),
 });
-const makeOverlaySubscriptions = (store) => makeSubscriptions(SubscriptionDeps)({
-    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)))),
-    },
-    mobileBreakpoint: {
-        modelToDependencies: () => null,
-        dependenciesToStream: () => Stream.callback(queue => Effect.acquireRelease(Effect.sync(() => {
-            const mediaQuery = window.matchMedia(MOBILE_BREAKPOINT_QUERY);
-            const handler = (event) => {
-                Queue.offerUnsafe(queue, CrossedMobileBreakpoint({ isMobile: event.matches }));
-            };
-            mediaQuery.addEventListener('change', handler);
-            return { mediaQuery, handler };
-        }), ({ mediaQuery, handler }) => Effect.sync(() => mediaQuery.removeEventListener('change', handler))).pipe(Effect.flatMap(() => Effect.never))),
-    },
-});
+const makeOverlaySubscriptions = (store, shadow) => {
+    const sliderSubscriptions = Slider.subscriptionsForRoot(() => shadow);
+    return makeSubscriptions(SubscriptionDeps)({
+        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)))),
+        },
+        mobileBreakpoint: {
+            modelToDependencies: () => null,
+            dependenciesToStream: () => Stream.callback(queue => Effect.acquireRelease(Effect.sync(() => {
+                const mediaQuery = window.matchMedia(MOBILE_BREAKPOINT_QUERY);
+                const handler = (event) => {
+                    Queue.offerUnsafe(queue, CrossedMobileBreakpoint({ isMobile: event.matches }));
+                };
+                mediaQuery.addEventListener('change', handler);
+                return { mediaQuery, handler };
+            }), ({ mediaQuery, handler }) => Effect.sync(() => mediaQuery.removeEventListener('change', handler))).pipe(Effect.flatMap(() => Effect.never))),
+        },
+        scrubberPointer: {
+            modelToDependencies: model => sliderSubscriptions.dragPointer.modelToDependencies(model.scrubberSlider),
+            dependenciesToStream: (deps, readDeps) => Stream.map(sliderSubscriptions.dragPointer.dependenciesToStream(deps, readDeps), message => GotScrubberSliderMessage({ message })),
+        },
+        scrubberEscape: {
+            modelToDependencies: model => sliderSubscriptions.dragEscape.modelToDependencies(model.scrubberSlider),
+            dependenciesToStream: (deps, readDeps) => Stream.map(sliderSubscriptions.dragEscape.dependenciesToStream(deps, readDeps), message => GotScrubberSliderMessage({ message })),
+        },
+    });
+};
 // VIEW
 const indexClass = 'text-2xs text-dt-muted font-mono min-w-5';
 const headerButtonClass = 'dt-header-button bg-transparent border-none text-dt-muted cursor-pointer text-base font-mono transition-colors';
@@ -421,7 +490,7 @@ const PANEL_POSITION_CLASS = {
     TopRight: 'dt-panel-tr',
     TopLeft: 'dt-panel-tl',
 };
-const makeView = (position, mode, maybeBanner) => {
+const makeView = (position, mode, shadow, maybeBanner) => {
     const h = html();
     const lazyTreeNode = createKeyedLazy();
     const lazyMessageRow = createKeyedLazy();
@@ -971,7 +1040,37 @@ const makeView = (position, mode, maybeBanner) => {
             model.maybeSubmodelFilter,
         ]);
     };
+    // SCRUBBER
+    const scrubberPositionLabel = (model) => {
+        const total = String(model.entries.length).padStart(3, '0');
+        const current = String(model.scrubberSlider.value).padStart(3, '0');
+        return `${current} / ${total}`;
+    };
+    const scrubberView = (model) => Slider.view({
+        model: model.scrubberSlider,
+        toParentMessage: message => GotScrubberSliderMessage({ message }),
+        ariaLabel: 'Session scrubber',
+        getTrackRoot: () => shadow,
+        formatValue: value => (value === 0 ? 'init' : `Message ${String(value)}`),
+        toView: attributes => h.div([
+            h.Class('dt-scrubber-row flex items-center gap-3 px-3 py-2 border-t shrink-0'),
+        ], [
+            h.div([
+                ...attributes.root,
+                h.Class('dt-scrubber-control flex-1 flex items-center'),
+            ], [
+                h.div([...attributes.track, h.Class('dt-scrubber-track')], [
+                    h.div([...attributes.filledTrack, h.Class('dt-scrubber-fill')], []),
+                    h.div([...attributes.thumb, h.Class('dt-scrubber-thumb')], []),
+                ]),
+            ]),
+            h.span([
+                h.Class('dt-scrubber-position text-2xs text-dt-muted font-mono shrink-0 tabular-nums'),
+            ], [scrubberPositionLabel(model)]),
+        ]),
+    });
     // PANEL
+    const isScrubberVisible = mode === 'TimeTravel';
     const panelView = (model) => h.keyed('div')('dt-panel', [
         h.Class(clsx('fixed dt-panel dt-panel-wide bg-dt-bg border rounded-lg flex flex-col overflow-hidden font-mono text-dt', PANEL_POSITION_CLASS[position])),
     ], [
@@ -989,6 +1088,7 @@ const makeView = (position, mode, maybeBanner) => {
             ]),
             inspectorPaneView(model),
         ]),
+        ...OptionExt.when(isScrubberVisible, scrubberView(model)).pipe(Option.toArray),
     ]);
     const interactionBlocker = h.div([h.Class('dt-interaction-blocker')], []);
     return (model) => ({
@@ -1035,36 +1135,49 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
             ...toDisplayState(storeState),
         };
     });
-    const init = (flags) => [
-        {
-            isOpen: false,
-            ...flags,
-            selectedIndex: INIT_INDEX,
-            isFollowingLatest: true,
-            submodelTags: computeSubmodelTags(flags.entries),
-            maybeSubmodelFilter: Option.none(),
-            submodelFilterListbox: Listbox.init({
-                id: SUBMODEL_FILTER_ID,
-                selectedItem: ALL_MESSAGES_VALUE,
-            }),
-            maybeInspectedModel: Option.none(),
-            maybeInspectedMessage: Option.none(),
-            expandedPaths: HashSet.empty(),
-            changedPaths: HashSet.empty(),
-            affectedPaths: HashSet.empty(),
-            inspectorTabs: Tabs.init({ id: INSPECTOR_TABS_ID }),
-        },
-        [],
-    ];
+    const init = (flags) => {
+        const sliderMax = flags.entries.length;
+        const initialSliderValue = flags.isPaused
+            ? hostIndexToSliderValue(flags.pausedAtIndex, flags.startIndex)
+            : sliderMax;
+        return [
+            {
+                isOpen: false,
+                ...flags,
+                selectedIndex: INIT_INDEX,
+                isFollowingLatest: true,
+                submodelTags: computeSubmodelTags(flags.entries),
+                maybeSubmodelFilter: Option.none(),
+                submodelFilterListbox: Listbox.init({
+                    id: SUBMODEL_FILTER_ID,
+                    selectedItem: ALL_MESSAGES_VALUE,
+                }),
+                maybeInspectedModel: Option.none(),
+                maybeInspectedMessage: Option.none(),
+                expandedPaths: HashSet.empty(),
+                changedPaths: HashSet.empty(),
+                affectedPaths: HashSet.empty(),
+                inspectorTabs: Tabs.init({ id: INSPECTOR_TABS_ID }),
+                scrubberSlider: Slider.init({
+                    id: SCRUBBER_SLIDER_ID,
+                    min: 0,
+                    max: sliderMax,
+                    step: 1,
+                    initialValue: initialSliderValue,
+                }),
+            },
+            [],
+        ];
+    };
     const overlayRuntime = makeProgram({
         Model,
         Flags,
         flags,
         init,
         update: makeUpdate(store, shadow, mode),
-        view: makeView(position, mode, maybeBanner),
+        view: makeView(position, mode, shadow, maybeBanner),
         container,
-        subscriptions: makeOverlaySubscriptions(store),
+        subscriptions: makeOverlaySubscriptions(store, shadow),
         devTools: false,
         freezeModel: false,
     });

package/dist/devTools/store.d.ts

@@ -40,12 +40,23 @@ export type Bridge = Readonly<{
     render: (model: unknown) => Effect.Effect<void>;
     markRenderPending: Effect.Effect<void>;
 }>;
-export declare const createDevToolsStore: (bridge: Bridge, maxEntries?: number) => Effect.Effect<DevToolsStore>;
+/**
+ * Options for `createDevToolsStore`.
+ *
+ * - `maxEntries`: Maximum number of history entries to retain before evicting the oldest segment. Defaults to 100.
+ * - `keyframeInterval`: Number of recorded entries between full model snapshots. Smaller values use more memory but make time-travel a constant-time lookup instead of a replay. Set to `1` to snapshot every entry, which keeps time-travel correct under exclusion-from-history (since excluded Messages are never replayed). Defaults to 31.
+ */
+export type CreateDevToolsStoreOptions = Readonly<{
+    maxEntries?: number;
+    keyframeInterval?: number;
+}>;
+export declare const createDevToolsStore: (bridge: Bridge, options?: CreateDevToolsStoreOptions) => Effect.Effect<DevToolsStore>;
 export type DevToolsStore = Readonly<{
     recordInit: (model: unknown, commands: ReadonlyArray<CommandRecord>, mountStarts?: ReadonlyArray<MountRecord>) => Effect.Effect<void>;
     recordMessage: (message: Readonly<{
         _tag: string;
     }>, modelBeforeUpdate: unknown, modelAfterUpdate: unknown, commands: ReadonlyArray<CommandRecord>, isModelChanged: boolean) => 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>;
     getMessageAtIndex: (index: number) => Effect.Effect<Option.Option<unknown>>;

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

@@ -1 +1 @@
-{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/devTools/store.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/devTools/store.ts"],"names":[],"mappings":"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"}

package/dist/devTools/store.js

@@ -1,7 +1,8 @@
 import { Array, Effect, HashMap, HashSet, Match, Option, Predicate, Record, String as String_, SubscriptionRef, pipe, } from 'effect';
+import { evo } from '../struct/index.js';
 export const INIT_INDEX = -1;
-const KEYFRAME_INTERVAL = 31;
-const DEFAULT_MAX_ENTRIES = 500;
+const DEFAULT_KEYFRAME_INTERVAL = 31;
+const DEFAULT_MAX_ENTRIES = 100;
 export const emptyDiff = {
     changedPaths: HashSet.empty(),
     affectedPaths: HashSet.empty(),
@@ -74,25 +75,38 @@ const emptyState = {
     pausedAtIndex: 0,
     maybeLatestModel: Option.none(),
 };
-export const createDevToolsStore = (bridge, maxEntries = DEFAULT_MAX_ENTRIES) => Effect.gen(function* () {
+export const createDevToolsStore = (bridge, options = {}) => Effect.gen(function* () {
+    const maxEntries = options.maxEntries ?? DEFAULT_MAX_ENTRIES;
+    const keyframeInterval = options.keyframeInterval ?? DEFAULT_KEYFRAME_INTERVAL;
     const stateRef = yield* SubscriptionRef.make(emptyState);
     const replayToIndex = (state, index) => {
-        const segmentStart = Math.floor(index / KEYFRAME_INTERVAL) * KEYFRAME_INTERVAL;
+        // NOTE: the keyframe stored at `index + 1` represents the model
+        // state immediately after entry `index` was processed, per the
+        // convention `recordMessage` uses. Looking it up first short-circuits
+        // replay entirely; this hits on every index when keyframeInterval is
+        // 1 and at segment boundaries otherwise. Don't "simplify" to
+        // `keyframes[index]` — that's the model BEFORE entry `index`, which
+        // would require replaying the entry to land at the right state.
+        const directSnapshot = HashMap.get(state.keyframes, index + 1);
+        if (Option.isSome(directSnapshot)) {
+            return directSnapshot.value;
+        }
+        const segmentStart = Math.floor(index / keyframeInterval) * keyframeInterval;
         const keyframeIndex = HashMap.has(state.keyframes, segmentStart)
             ? segmentStart
             : state.startIndex;
         return pipe(state.keyframes, HashMap.get(keyframeIndex), Option.map(keyframeModel => pipe(state.entries, Array.drop(keyframeIndex - state.startIndex), Array.take(index - keyframeIndex + 1), Array.reduce(keyframeModel, (model, entry) => bridge.replay(model, entry.message)))), Option.getOrThrow);
     };
-    const addKeyframeIfNeeded = (keyframes, nextAbsoluteIndex, modelAfterUpdate) => nextAbsoluteIndex % KEYFRAME_INTERVAL === 0
+    const addKeyframeIfNeeded = (keyframes, nextAbsoluteIndex, modelAfterUpdate) => nextAbsoluteIndex % keyframeInterval === 0
         ? HashMap.set(keyframes, nextAbsoluteIndex, modelAfterUpdate)
         : keyframes;
     const evictOldestSegment = (state) => {
-        const nextStartIndex = state.startIndex + KEYFRAME_INTERVAL;
+        const nextStartIndex = state.startIndex + keyframeInterval;
         const isPausedAtRetainedIndex = state.pausedAtIndex >= nextStartIndex ||
             state.pausedAtIndex === INIT_INDEX;
         return {
             ...state,
-            entries: Array.drop(state.entries, KEYFRAME_INTERVAL),
+            entries: Array.drop(state.entries, keyframeInterval),
             keyframes: HashMap.remove(state.keyframes, state.startIndex),
             startIndex: nextStartIndex,
             isPaused: state.isPaused && isPausedAtRetainedIndex,
@@ -214,9 +228,11 @@ export const createDevToolsStore = (bridge, maxEntries = DEFAULT_MAX_ENTRIES) =>
             onSome: ({ diff }) => diff,
         }));
     });
+    const updateLatestModel = (model) => SubscriptionRef.update(stateRef, evo({ maybeLatestModel: () => Option.some(model) }));
     return {
         recordInit,
         recordMessage,
+        updateLatestModel,
         attachRenderedMounts,
         getModelAtIndex,
         getMessageAtIndex,

package/dist/route/parser.js

@@ -121,7 +121,7 @@ export const oneOf = (...parsers) => ({
         onEmpty: () => Effect.fail(new ParseError({
             message: `No parsers provided for path: /${Array.join(segments, '/')}`,
         })),
-        onNonEmpty: (head, tail) => Array.reduce(tail, head.parse(segments, search), (acc, parser) => acc.pipe(Effect.catch(() => parser.parse(segments, search)))),
+        onNonEmpty: () => Effect.firstSuccessOf(Array.map(parsers, parser => parser.parse(segments, search))),
     }),
 });
 /**

package/dist/runtime/public.d.ts

@@ -1,5 +1,5 @@
 export { makeProgram, run } from './runtime.js';
-export type { RoutingConfig, CrashConfig, CrashContext, RoutingProgramConfigWithFlags, RoutingProgramConfig, ProgramConfigWithFlags, ProgramConfig, ProgramInit, RoutingProgramInit, MakeRuntimeReturn, Visibility, SlowViewContext, SlowViewConfig, DevToolsConfig, } from './runtime.js';
+export type { RoutingConfig, CrashConfig, CrashContext, RoutingProgramConfigWithFlags, RoutingProgramConfig, ProgramConfigWithFlags, ProgramConfig, ProgramInit, RoutingProgramInit, MakeRuntimeReturn, Visibility, SlowViewContext, SlowViewConfig, DevToolsConfig, DevToolsMode, DevToolsModeConfig, } from './runtime.js';
 export { UrlRequest } from './urlRequest.js';
 export type { Internal, External } from './urlRequest.js';
 //# sourceMappingURL=public.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/runtime/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,cAAc,CAAA;AAE/C,YAAY,EACV,aAAa,EACb,WAAW,EACX,YAAY,EACZ,6BAA6B,EAC7B,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EACb,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,UAAU,EACV,eAAe,EACf,cAAc,EACd,cAAc,GACf,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/runtime/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,cAAc,CAAA;AAE/C,YAAY,EACV,aAAa,EACb,WAAW,EACX,YAAY,EACZ,6BAA6B,EAC7B,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EACb,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,UAAU,EACV,eAAe,EACf,cAAc,EACd,cAAc,EACd,YAAY,EACZ,kBAAkB,GACnB,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/runtime/runtime.d.ts

@@ -15,6 +15,15 @@ export type Visibility = 'Development' | 'Always';
  * - `'TimeTravel'`: Clicking a row pauses the app at that historical state. Resume to continue.
  */
 export type DevToolsMode = 'Inspect' | 'TimeTravel';
+/** Mode value for the DevTools panel. Either a single mode used in every
+ *  environment, or an object selecting different modes for development and
+ *  production. Use the object form to keep `'TimeTravel'` for local debugging
+ *  while shipping the safer `'Inspect'` mode to users. `'TimeTravel'` in
+ *  production pauses the user's app when a history row is clicked. */
+export type DevToolsModeConfig = DevToolsMode | Readonly<{
+    development: DevToolsMode;
+    production: DevToolsMode;
+}>;
 /**
  * DevTools configuration.
  *
@@ -22,14 +31,18 @@ export type DevToolsMode = 'Inspect' | 'TimeTravel';
  *
  * - `show`: `'Development'` (default) enables in dev mode only, `'Always'` enables in all environments including production.
  * - `position`: Where the badge and panel appear. Defaults to `'BottomRight'`.
- * - `mode`: `'TimeTravel'` (default) enables full time-travel debugging. `'Inspect'` allows browsing state snapshots without pausing the app.
+ * - `mode`: `'TimeTravel'` (default) enables full time-travel debugging. `'Inspect'` allows browsing state snapshots without pausing the app. Pass `{ development, production }` to use different modes per environment. Useful when DevTools is shown in production (`show: 'Always'`) and you want `'TimeTravel'` only in local development.
  * - `banner`: Optional text shown as a banner at the top of the panel.
+ * - `excludeFromHistory`: Message `_tag` values whose dispatches should not be recorded in DevTools history. The Messages still drive `update` and the runtime as usual; they just don't appear in the history panel and don't pay the per-Message diff cost. Use for high-frequency Messages (animation frames, pointer moves, scroll events) that would flood history without adding insight.
+ * - `maxEntries`: Maximum number of recorded Messages retained in history before the oldest is evicted. Defaults to 100. Clamped to the range 20-500: smaller values keep the panel snappy under high message rates, larger values give you more scroll-back. Each retained entry stores a full Model snapshot, so memory cost scales linearly with both `maxEntries` and your Model size.
  */
 export type DevToolsConfig = false | Readonly<{
     show?: Visibility;
     position?: DevToolsPosition;
-    mode?: DevToolsMode;
+    mode?: DevToolsModeConfig;
     banner?: string;
+    excludeFromHistory?: ReadonlyArray<string>;
+    maxEntries?: number;
     /**
      * The application's `Message` Schema. When provided and the running app
      * is connected to the Foldkit DevTools MCP server, AI agents can dispatch

package/dist/runtime/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/runtime/runtime.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/runtime/runtime.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,OAAO,EAEP,MAAM,EAGN,KAAK,EAEL,MAAM,EAON,MAAM,EAIP,MAAM,QAAQ,CAAA;AAGf,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AASlD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,OAAO,EAAE,GAAG,EAA+B,MAAM,iBAAiB,CAAA;AAalE,OAAO,KAAK,EAEV,gBAAgB,EACjB,MAAM,sBAAsB,CAAA;AAI7B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAe5C,0DAA0D;AAC1D,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,YAAY,GACZ,UAAU,GACV,SAAS,CAAA;AAEb,wCAAwC;AACxC,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,QAAQ,CAAA;AAEjD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,YAAY,CAAA;AAEnD;;;;sEAIsE;AACtE,MAAM,MAAM,kBAAkB,GAC1B,YAAY,GACZ,QAAQ,CAAC;IAAE,WAAW,EAAE,YAAY,CAAC;IAAC,UAAU,EAAE,YAAY,CAAA;CAAE,CAAC,CAAA;AAErE;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,cAAc,GACtB,KAAK,GACL,QAAQ,CAAC;IACP,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kBAAkB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;CACnD,CAAC,CAAA;AAgBN,sFAAsF;AACtF,MAAM,MAAM,eAAe,CAAC,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC;IACrD,KAAK,EAAE,KAAK,CAAA;IACZ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAC/B,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;CACpB,CAAC,CAAA;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,cAAc,CAAC,KAAK,EAAE,OAAO,IACrC,KAAK,GACL,QAAQ,CAAC;IACP,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;CAChE,CAAC,CAAA;;4BA6BsB,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;2BAC1C,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;;AALrD,8EAA8E;AAC9E,qBAAa,QAAS,SAAQ,aAMN;CAAG;AAE3B,YAAY,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAElD,oFAAoF;AACpF,MAAM,MAAM,aAAa,CAAC,OAAO,IAAI,QAAQ,CAAC;IAC5C,YAAY,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,OAAO,CAAA;IAC9C,WAAW,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAA;CACnC,CAAC,CAAA;AAEF,0GAA0G;AAC1G,MAAM,MAAM,YAAY,CAAC,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC;IAClD,KAAK,EAAE,KAAK,CAAA;IACZ,KAAK,EAAE,KAAK,CAAA;IACZ,OAAO,EAAE,OAAO,CAAA;CACjB,CAAC,CAAA;AAEF,iFAAiF;AACjF,MAAM,MAAM,WAAW,CAAC,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC;IACjD,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,QAAQ,CAAA;IAC1D,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;CACzD,CAAC,CAAA;AAwEF,KAAK,iBAAiB,CACpB,KAAK,EACL,OAAO,EACP,aAAa,SAAS,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EACzD,SAAS,GAAG,KAAK,EACjB,uBAAuB,GAAG,KAAK,IAC7B,QAAQ,CAAC;IACX,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;IACjD,MAAM,EAAE,CACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,KACb,SAAS;QACZ,KAAK;QACL,aAAa,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,uBAAuB,CAAC,CAAC;KAC5E,CAAA;IACD,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,QAAQ,CAAA;IAChC,aAAa,CAAC,EAAE,aAAa,CAC3B,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,GAAG,uBAAuB,CACpC,CAAA;IACD,SAAS,EAAE,WAAW,CAAA;IACtB,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IACnC,QAAQ,CAAC,EAAE,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IACzC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAClC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,uBAAuB,CAAC,CAAA;IAC5E,QAAQ,CAAC,EAAE,cAAc,CAAA;CAC1B,CAAC,CAAA;AAEF,kEAAkE;AAClE,MAAM,MAAM,6BAA6B,CACvC,KAAK,EACL,OAAO,EACP,aAAa,SAAS,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EACzD,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,uBAAuB,GAAG,KAAK,IAC7B,iBAAiB,CACnB,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,EACT,uBAAuB,CACxB,GACC,QAAQ,CAAC;IACP,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;IACjD,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAC3B,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,IAAI,EAAE,CACJ,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,KACL,SAAS;QACZ,KAAK;QACL,aAAa,CACX,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,uBAAuB,CAAC,CAC7D;KACF,CAAA;CACF,CAAC,CAAA;AAEJ,qEAAqE;AACrE,MAAM,MAAM,oBAAoB,CAC9B,KAAK,EACL,OAAO,EACP,aAAa,SAAS,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EACzD,SAAS,GAAG,KAAK,EACjB,uBAAuB,GAAG,KAAK,IAC7B,iBAAiB,CACnB,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,EACT,uBAAuB,CACxB,GACC,QAAQ,CAAC;IACP,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,IAAI,EAAE,CACJ,GAAG,EAAE,GAAG,KACL,SAAS;QACZ,KAAK;QACL,aAAa,CACX,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,uBAAuB,CAAC,CAC7D;KACF,CAAA;CACF,CAAC,CAAA;AAEJ,qEAAqE;AACrE,MAAM,MAAM,sBAAsB,CAChC,KAAK,EACL,OAAO,EACP,aAAa,SAAS,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EACzD,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,uBAAuB,GAAG,KAAK,IAC7B,iBAAiB,CACnB,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,EACT,uBAAuB,CACxB,GACC,QAAQ,CAAC;IACP,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;IACjD,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAC3B,IAAI,EAAE,CACJ,KAAK,EAAE,KAAK,KACT,SAAS;QACZ,KAAK;QACL,aAAa,CACX,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,uBAAuB,CAAC,CAC7D;KACF,CAAA;CACF,CAAC,CAAA;AAEJ,oEAAoE;AACpE,MAAM,MAAM,aAAa,CACvB,KAAK,EACL,OAAO,EACP,aAAa,SAAS,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EACzD,SAAS,GAAG,KAAK,EACjB,uBAAuB,GAAG,KAAK,IAC7B,iBAAiB,CACnB,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,EACT,uBAAuB,CACxB,GACC,QAAQ,CAAC;IACP,IAAI,EAAE,MAAM,SAAS;QACnB,KAAK;QACL,aAAa,CACX,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,uBAAuB,CAAC,CAC7D;KACF,CAAA;CACF,CAAC,CAAA;AAEJ,iEAAiE;AACjE,MAAM,MAAM,WAAW,CACrB,KAAK,EACL,OAAO,EACP,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,KAAK,EACjB,uBAAuB,GAAG,KAAK,IAC7B,KAAK,SAAS,IAAI,GAClB,MAAM,SAAS;IACb,KAAK;IACL,aAAa,CACX,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,uBAAuB,CAAC,CAC7D;CACF,GACD,CACE,KAAK,EAAE,KAAK,KACT,SAAS;IACZ,KAAK;IACL,aAAa,CACX,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,uBAAuB,CAAC,CAC7D;CACF,CAAA;AAEL,2GAA2G;AAC3G,MAAM,MAAM,kBAAkB,CAC5B,KAAK,EACL,OAAO,EACP,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,KAAK,EACjB,uBAAuB,GAAG,KAAK,IAC7B,KAAK,SAAS,IAAI,GAClB,CACE,GAAG,EAAE,GAAG,KACL,SAAS;IACZ,KAAK;IACL,aAAa,CACX,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,uBAAuB,CAAC,CAC7D;CACF,GACD,CACE,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,KACL,SAAS;IACZ,KAAK;IACL,aAAa,CACX,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,uBAAuB,CAAC,CAC7D;CACF,CAAA;AAEL,wGAAwG;AACxG,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;CACnD,CAAC,CAAA;AA68BF,2HAA2H;AAC3H,wBAAgB,WAAW,CACzB,KAAK,EACL,OAAO,SAAS;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,EAChC,aAAa,SAAS,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EACzD,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,uBAAuB,GAAG,KAAK,EAE/B,MAAM,EAAE,6BAA6B,CACnC,KAAK,EACL,OAAO,EACP,aAAa,EACb,KAAK,EACL,SAAS,EACT,uBAAuB,CACxB,GACA,iBAAiB,CAAA;AAEpB,wBAAgB,WAAW,CACzB,KAAK,EACL,OAAO,SAAS;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,EAChC,aAAa,SAAS,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EACzD,SAAS,GAAG,KAAK,EACjB,uBAAuB,GAAG,KAAK,EAE/B,MAAM,EAAE,oBAAoB,CAC1B,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,EACT,uBAAuB,CACxB,GACA,iBAAiB,CAAA;AAEpB,wBAAgB,WAAW,CACzB,KAAK,EACL,OAAO,SAAS;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,EAChC,aAAa,SAAS,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EACzD,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,uBAAuB,GAAG,KAAK,EAE/B,MAAM,EAAE,sBAAsB,CAC5B,KAAK,EACL,OAAO,EACP,aAAa,EACb,KAAK,EACL,SAAS,EACT,uBAAuB,CACxB,GACA,iBAAiB,CAAA;AAEpB,wBAAgB,WAAW,CACzB,KAAK,EACL,OAAO,SAAS;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,EAChC,aAAa,SAAS,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EACzD,SAAS,GAAG,KAAK,EACjB,uBAAuB,GAAG,KAAK,EAE/B,MAAM,EAAE,aAAa,CACnB,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,EACT,uBAAuB,CACxB,GACA,iBAAiB,CAAA;AA2NpB,kEAAkE;AAClE,eAAO,MAAM,GAAG,GAAI,SAAS,iBAAiB,KAAG,IA4ChD,CAAA"}

package/dist/runtime/runtime.js

@@ -20,6 +20,16 @@ const toCommandRecord = (command) => command.args !== undefined
 const DEFAULT_DEV_TOOLS_SHOW = 'Development';
 const DEFAULT_DEV_TOOLS_POSITION = 'BottomRight';
 const DEFAULT_DEV_TOOLS_MODE = 'TimeTravel';
+const resolveDevToolsMode = (config) => {
+    if (typeof config === 'string') {
+        return config;
+    }
+    else {
+        return import.meta.hot ? config.development : config.production;
+    }
+};
+const DEV_TOOLS_MAX_ENTRIES_MIN = 20;
+const DEV_TOOLS_MAX_ENTRIES_MAX = 500;
 const DEFAULT_SLOW_VIEW_SHOW = 'Development';
 const DEFAULT_SLOW_VIEW_THRESHOLD_MS = 16;
 const defaultSlowViewCallback = (context) => {
@@ -43,6 +53,11 @@ const makeRuntime = ({ Model, flags: resolveFlags, init, update, view, subscript
         onSlowView: config.onSlowView ?? defaultSlowViewCallback,
     })));
     const isFreezeModelActive = freezeModel !== false && !!import.meta.hot;
+    const excludeFromHistoryTags = pipe(devTools ?? {}, Option.liftPredicate(config => config !== false), Option.flatMapNullishOr(config => config.excludeFromHistory), Option.match({
+        onNone: () => new Set(),
+        onSome: tags => new Set(tags),
+    }));
+    const devToolsMaxEntries = pipe(devTools ?? {}, Option.liftPredicate(config => config !== false), Option.flatMapNullishOr(config => config.maxEntries), Option.map(value => Math.max(DEV_TOOLS_MAX_ENTRIES_MIN, Math.min(DEV_TOOLS_MAX_ENTRIES_MAX, value))), Option.getOrUndefined);
     const maybeFreezeModel = (model) => isFreezeModelActive ? deepFreeze(model) : model;
     const runtimeId = container?.id ?? '';
     // NOTE: When the message queue drains a chain of dispatches (e.g. recursive
@@ -221,13 +236,25 @@ const makeRuntime = ({ Model, flags: resolveFlags, init, update, view, subscript
                 attributes: command.args ?? {},
             }), provideAllResources, Effect.flatMap(enqueueNormal))));
             const maybeDevToolsStore = yield* Ref.get(maybeDevToolsStoreRef);
+            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+            const messageTag = message._tag;
+            const isModelChanged = currentModel !== nextModel;
+            const isExcludedFromHistory = excludeFromHistoryTags.has(messageTag);
             yield* Option.match(maybeDevToolsStore, {
                 onNone: () => Effect.void,
-                onSome: store => store.recordMessage(
-                /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                message, currentModel, nextModel, Array.map(
-                /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                commands, toCommandRecord), currentModel !== nextModel),
+                onSome: store => {
+                    if (!isExcludedFromHistory) {
+                        return store.recordMessage(
+                        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                        message, currentModel, nextModel, Array.map(
+                        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                        commands, toCommandRecord), isModelChanged);
+                    }
+                    if (isModelChanged) {
+                        return store.updateLatestModel(nextModel);
+                    }
+                    return Effect.void;
+                },
             });
         });
         // NOTE: `dispatchService` defaults to the live dispatch but is
@@ -264,17 +291,28 @@ const makeRuntime = ({ Model, flags: resolveFlags, init, update, view, subscript
         const isInIframe = window.self !== window.top;
         const resolvedDevTools = pipe(devTools ?? {}, Option.liftPredicate(config => config !== false), Option.filter(config => Match.value(config.show ?? DEFAULT_DEV_TOOLS_SHOW).pipe(Match.when('Always', () => true), Match.when('Development', () => !!import.meta.hot && !isInIframe), Match.exhaustive)), Option.map(config => ({
             position: config.position ?? DEFAULT_DEV_TOOLS_POSITION,
-            mode: config.mode ?? DEFAULT_DEV_TOOLS_MODE,
+            mode: resolveDevToolsMode(config.mode ?? DEFAULT_DEV_TOOLS_MODE),
             maybeBanner: Option.fromNullishOr(config.banner),
         })));
         if (Option.isSome(resolvedDevTools)) {
             const { position, mode, maybeBanner } = resolvedDevTools.value;
+            // NOTE: when excludeFromHistory is active, the runtime drops
+            // excluded Messages from the recorded history. Replay walks the
+            // recorded entries forward from the nearest keyframe — but with
+            // exclusion, the dropped Messages aren't in that walk, so any
+            // cumulative state they would have produced is missing from the
+            // replayed model. Setting keyframeInterval to 1 stores a full
+            // snapshot on every recorded entry, so time-travel becomes a
+            // direct lookup that reflects the real live state at the moment
+            // the entry was recorded.
+            const isExcludingMessages = excludeFromHistoryTags.size > 0;
             const devToolsStore = yield* createDevToolsStore({
+                /* eslint-disable @typescript-eslint/consistent-type-assertions */
                 replay: (model, message) => {
-                    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
                     const [updatedModel] = update(model, message);
                     return maybeFreezeModel(updatedModel);
                 },
+                /* eslint-enable @typescript-eslint/consistent-type-assertions */
                 // NOTE: clears the dirty bit on the jumpTo render so the
                 // renderLoop's Stream.changes sees the next dispatch as a real
                 // false-to-true transition rather than a deduped no-op. Passes
@@ -295,6 +333,11 @@ const makeRuntime = ({ Model, flags: resolveFlags, init, update, view, subscript
                 // animation frame, which renders the live model with live
                 // dispatch and rebinds listeners.
                 markRenderPending: SubscriptionRef.set(isRenderPendingRef, true),
+            }, {
+                ...(isExcludingMessages && { keyframeInterval: 1 }),
+                ...(devToolsMaxEntries !== undefined && {
+                    maxEntries: devToolsMaxEntries,
+                }),
             });
             yield* Ref.set(maybeDevToolsStoreRef, Option.some(devToolsStore));
             // The init render runs below; capture the events it produces. We

package/dist/ui/dragAndDrop/index.d.ts

@@ -172,7 +172,6 @@ export declare const SubscriptionDeps: S.Struct<{
 export declare const subscriptions: import("../../runtime/subscription.js").Subscriptions<{
     readonly id: string;
     readonly orientation: "Vertical" | "Horizontal";
-    readonly activationThreshold: number;
     readonly dragState: {
         readonly _tag: "Idle";
     } | {
@@ -209,7 +208,10 @@ export declare const subscriptions: import("../../runtime/subscription.js").Subs
         readonly targetContainerId: string;
         readonly targetIndex: number;
     };
+    readonly activationThreshold: number;
 }, {
+    readonly _tag: "CancelledDrag";
+} | {
     readonly _tag: "PressedDraggable";
     readonly screenX: number;
     readonly screenY: number;
@@ -228,8 +230,6 @@ export declare const subscriptions: import("../../runtime/subscription.js").Subs
     }>;
 } | {
     readonly _tag: "ReleasedPointer";
-} | {
-    readonly _tag: "CancelledDrag";
 } | {
     readonly _tag: "ActivatedKeyboardDrag";
     readonly index: number;

package/dist/ui/slider/index.d.ts

@@ -83,26 +83,41 @@ type UpdateReturn = readonly [
 /** Processes a slider message and returns the next model, commands, and an
  *  optional out-message for the parent. */
 export declare const update: (model: Model, message: Message) => UpdateReturn;
-/** Schema describing the subscription dependencies for document-level drag
- *  tracking. */
+/** Updates the slider's range. Snaps and clamps the current value into the
+ *  new range. Use this when min/max derive from external state (e.g. a
+ *  bounded buffer whose first/last index shifts over time). Unlike `setValue`,
+ *  this runs even while the user is Dragging: a structural range change
+ *  cannot leave the value out of bounds. */
+export declare const setRange: (model: Model, range: Readonly<{
+    min: number;
+    max: number;
+}>) => Model;
+/** Sets the slider's value, snapped and clamped into the current range.
+ *  No-op while the user is actively dragging. drag state owns the value.
+ *  Does not emit `ChangedValue`; use when the value is being driven by
+ *  external state rather than user input. */
+export declare const setValue: (model: Model, value: number) => Model;
+/** Schema describing the subscription dependencies for slider drag. */
 export declare const SubscriptionDeps: S.Struct<{
-    readonly documentPointer: S.Struct<{
+    readonly dragPointer: S.Struct<{
         readonly dragActivity: S.Literals<readonly ["Idle", "Active"]>;
         readonly id: S.String;
         readonly min: S.Number;
         readonly max: S.Number;
     }>;
-    readonly documentEscape: S.Struct<{
+    readonly dragEscape: S.Struct<{
         readonly dragActivity: S.Literals<readonly ["Idle", "Active"]>;
     }>;
 }>;
-/** Document-level subscriptions for pointer and keyboard events during slider
- *  drag. */
-export declare const subscriptions: import("../../runtime/subscription.js").Subscriptions<{
+/** Builds slider drag subscriptions, looking up the track
+ *  element through the supplied root resolver. Use this when the slider is
+ *  rendered inside a Shadow DOM. The root is read lazily so consumers can
+ *  resolve it at subscription time. */
+export declare const subscriptionsForRoot: (getTrackRoot: () => Document | ShadowRoot) => import("../../runtime/subscription.js").Subscriptions<{
     readonly value: number;
     readonly id: string;
-    readonly max: number;
     readonly min: number;
+    readonly max: number;
     readonly step: number;
     readonly dragState: {
         readonly _tag: "Idle";
@@ -111,8 +126,45 @@ export declare const subscriptions: import("../../runtime/subscription.js").Subs
         readonly originValue: number;
     };
 }, {
+    readonly _tag: "PressedThumb";
+} | {
+    readonly _tag: "PressedPointer";
+    readonly value: number;
+} | {
+    readonly _tag: "MovedDragPointer";
+    readonly value: number;
+} | {
+    readonly _tag: "ReleasedDragPointer";
+} | {
     readonly _tag: "CancelledDrag";
 } | {
+    readonly _tag: "PressedKeyboardNavigation";
+    readonly direction: "Max" | "Min" | "StepDecrement" | "StepIncrement" | "PageDecrement" | "PageIncrement";
+}, S.Struct<{
+    readonly dragPointer: S.Struct<{
+        readonly dragActivity: S.Literals<readonly ["Idle", "Active"]>;
+        readonly id: S.String;
+        readonly min: S.Number;
+        readonly max: S.Number;
+    }>;
+    readonly dragEscape: S.Struct<{
+        readonly dragActivity: S.Literals<readonly ["Idle", "Active"]>;
+    }>;
+}>, never>;
+/** Default drag subscriptions, with the track looked up via `document`. */
+export declare const subscriptions: import("../../runtime/subscription.js").Subscriptions<{
+    readonly value: number;
+    readonly id: string;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly dragState: {
+        readonly _tag: "Idle";
+    } | {
+        readonly _tag: "Dragging";
+        readonly originValue: number;
+    };
+}, {
     readonly _tag: "PressedThumb";
 } | {
     readonly _tag: "PressedPointer";
@@ -122,17 +174,19 @@ export declare const subscriptions: import("../../runtime/subscription.js").Subs
     readonly value: number;
 } | {
     readonly _tag: "ReleasedDragPointer";
+} | {
+    readonly _tag: "CancelledDrag";
 } | {
     readonly _tag: "PressedKeyboardNavigation";
     readonly direction: "Max" | "Min" | "StepDecrement" | "StepIncrement" | "PageDecrement" | "PageIncrement";
 }, S.Struct<{
-    readonly documentPointer: S.Struct<{
+    readonly dragPointer: S.Struct<{
         readonly dragActivity: S.Literals<readonly ["Idle", "Active"]>;
         readonly id: S.String;
         readonly min: S.Number;
         readonly max: S.Number;
     }>;
-    readonly documentEscape: S.Struct<{
+    readonly dragEscape: S.Struct<{
         readonly dragActivity: S.Literals<readonly ["Idle", "Active"]>;
     }>;
 }>, never>;
@@ -156,13 +210,17 @@ export type ViewConfig<ParentMessage> = Readonly<{
     formatValue?: (value: number) => string;
     isDisabled?: boolean;
     name?: string;
+    /** Resolves the root that holds the slider track when looking it up by its
+     *  `data-slider-track-id` attribute. Defaults to `document`. Provide a
+     *  ShadowRoot when rendering the slider inside a shadow tree so pointer
+     *  events on the track can map clientX into a value. */
+    getTrackRoot?: () => Document | ShadowRoot;
 }>;
 /** Renders an accessible slider by building ARIA attribute groups and
  *  delegating layout to the consumer's `toView` callback. Follows the
  *  WAI-ARIA slider pattern — role="slider" on the thumb, aria-valuemin /
  *  aria-valuemax / aria-valuenow, keyboard navigation by step / page / home /
- *  end. Pointer drag is handled by the component's document-level
- *  subscriptions. */
+ *  end. Pointer drag is handled by the component's drag subscriptions. */
 export declare const view: <ParentMessage>(config: ViewConfig<ParentMessage>) => Html;
 /** Creates a memoized slider view. Static config is captured in a closure;
  *  only `model` and `toParentMessage` are compared per render via `createLazy`. */

package/dist/ui/slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/slider/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/slider/index.ts"],"names":[],"mappings":"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"}

package/dist/ui/slider/index.js

@@ -152,10 +152,27 @@ export const update = (model, message) => M.value(message).pipe(withUpdateReturn
     }), M.orElse(() => [model, [], Option.none()])),
     PressedKeyboardNavigation: ({ direction }) => withValue(model, nextValueForDirection(model, direction), []),
 }));
+/** Updates the slider's range. Snaps and clamps the current value into the
+ *  new range. Use this when min/max derive from external state (e.g. a
+ *  bounded buffer whose first/last index shifts over time). Unlike `setValue`,
+ *  this runs even while the user is Dragging: a structural range change
+ *  cannot leave the value out of bounds. */
+export const setRange = (model, range) => evo(model, {
+    min: () => range.min,
+    max: () => range.max,
+    value: current => snapAndClamp(current, range.min, range.max, model.step),
+});
+/** Sets the slider's value, snapped and clamped into the current range.
+ *  No-op while the user is actively dragging. drag state owns the value.
+ *  Does not emit `ChangedValue`; use when the value is being driven by
+ *  external state rather than user input. */
+export const setValue = (model, value) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('Dragging', () => model), M.orElse(() => evo(model, {
+    value: () => snapAndClamp(value, model.min, model.max, model.step),
+})));
 // SUBSCRIPTION
 const DragActivity = S.Literals(['Idle', 'Active']);
 const dragActivityFromModel = (model) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('Dragging', () => 'Active'), M.orElse(() => 'Idle'));
-const trackElement = (id) => Option.fromNullishOr(document.querySelector(`[data-slider-track-id="${id}"]`));
+const trackElement = (id, root) => Option.fromNullishOr(root.querySelector(`[data-slider-track-id="${id}"]`));
 const valueFromClientX = (clientX, trackElement_, min, max) => {
     const rect = trackElement_.getBoundingClientRect();
     if (rect.width === 0) {
@@ -166,23 +183,24 @@ const valueFromClientX = (clientX, trackElement_, min, max) => {
         return min + fraction * (max - min);
     }
 };
-/** Schema describing the subscription dependencies for document-level drag
- *  tracking. */
+/** Schema describing the subscription dependencies for slider drag. */
 export const SubscriptionDeps = S.Struct({
-    documentPointer: S.Struct({
+    dragPointer: S.Struct({
         dragActivity: DragActivity,
         id: S.String,
         min: S.Number,
         max: S.Number,
     }),
-    documentEscape: S.Struct({
+    dragEscape: S.Struct({
         dragActivity: DragActivity,
     }),
 });
-/** Document-level subscriptions for pointer and keyboard events during slider
- *  drag. */
-export const subscriptions = makeSubscriptions(SubscriptionDeps)({
-    documentPointer: {
+/** Builds slider drag subscriptions, looking up the track
+ *  element through the supplied root resolver. Use this when the slider is
+ *  rendered inside a Shadow DOM. The root is read lazily so consumers can
+ *  resolve it at subscription time. */
+export const subscriptionsForRoot = (getTrackRoot) => makeSubscriptions(SubscriptionDeps)({
+    dragPointer: {
         modelToDependencies: model => ({
             dragActivity: dragActivityFromModel(model),
             id: model.id,
@@ -190,7 +208,7 @@ export const subscriptions = makeSubscriptions(SubscriptionDeps)({
             max: model.max,
         }),
         dependenciesToStream: ({ dragActivity, id, min, max }) => {
-            const pointerEvents = Stream.merge(Stream.fromEventListener(document, 'pointermove').pipe(Stream.mapEffect(event => Effect.sync(() => Option.map(trackElement(id), element => MovedDragPointer({
+            const pointerEvents = Stream.merge(Stream.fromEventListener(document, 'pointermove').pipe(Stream.mapEffect(event => Effect.sync(() => Option.map(trackElement(id, getTrackRoot()), element => MovedDragPointer({
                 value: valueFromClientX(event.clientX, element, min, max),
             })))), Stream.filter(Option.isSome), Stream.map(option => option.value)), Stream.fromEventListener(document, 'pointerup').pipe(Stream.map(() => ReleasedDragPointer())));
             // NOTE: prevents text selection and locks cursor to grabbing while the
@@ -210,13 +228,15 @@ export const subscriptions = makeSubscriptions(SubscriptionDeps)({
             return Stream.when(Stream.merge(pointerEvents, documentDragStyles), Effect.sync(() => dragActivity === 'Active'));
         },
     },
-    documentEscape: {
+    dragEscape: {
         modelToDependencies: model => ({
             dragActivity: dragActivityFromModel(model),
         }),
         dependenciesToStream: ({ dragActivity }) => Stream.when(Stream.fromEventListener(document, 'keydown').pipe(Stream.filter(({ key }) => key === 'Escape'), Stream.map(() => CancelledDrag())), Effect.sync(() => dragActivity === 'Active')),
     },
 });
+/** Default drag subscriptions, with the track looked up via `document`. */
+export const subscriptions = subscriptionsForRoot(() => document);
 // VIEW
 const LEFT_MOUSE_BUTTON = 0;
 const labelId = (id) => `${id}-label`;
@@ -226,16 +246,15 @@ const percentString = (fraction) => `${Math.round(fraction * 10000) / 100}%`;
  *  delegating layout to the consumer's `toView` callback. Follows the
  *  WAI-ARIA slider pattern — role="slider" on the thumb, aria-valuemin /
  *  aria-valuemax / aria-valuenow, keyboard navigation by step / page / home /
- *  end. Pointer drag is handled by the component's document-level
- *  subscriptions. */
+ *  end. Pointer drag is handled by the component's drag subscriptions. */
 export const view = (config) => {
     const h = html();
-    const { model, toParentMessage, formatValue, isDisabled = false, name, } = config;
+    const { model, toParentMessage, formatValue, isDisabled = false, name, getTrackRoot = () => document, } = config;
     const { id, value, min, max } = model;
     const isDragging = model.dragState._tag === 'Dragging';
     const fraction = fractionOfValue(model);
     const handleKeyDown = (key) => Option.map(keyToDirection(key), direction => toParentMessage(PressedKeyboardNavigation({ direction })));
-    const pointerAtClientX = (clientX) => Option.map(trackElement(id), element => toParentMessage(PressedPointer({
+    const pointerAtClientX = (clientX) => Option.map(trackElement(id, getTrackRoot()), element => toParentMessage(PressedPointer({
         value: valueFromClientX(clientX, element, min, max),
     })));
     const trackPointerHandler = (_pointerType, button, _screenX, _screenY, _timeStamp, clientX) => pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.flatMap(() => pointerAtClientX(clientX)));

package/dist/ui/slider/public.d.ts

@@ -1,3 +1,3 @@
-export { init, update, view, lazy, subscriptions, fractionOfValue, Model, Message, OutMessage, SubscriptionDeps, } from './index.js';
+export { init, update, setRange, setValue, view, lazy, subscriptions, subscriptionsForRoot, fractionOfValue, Model, Message, OutMessage, SubscriptionDeps, } from './index.js';
 export type { InitConfig, ViewConfig, SliderAttributes, PressedThumb, PressedPointer, MovedDragPointer, ReleasedDragPointer, CancelledDrag, PressedKeyboardNavigation, } from './index.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/ui/slider/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/slider/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,eAAe,EACf,KAAK,EACL,OAAO,EACP,UAAU,EACV,gBAAgB,GACjB,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,yBAAyB,GAC1B,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/slider/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,KAAK,EACL,OAAO,EACP,UAAU,EACV,gBAAgB,GACjB,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,yBAAyB,GAC1B,MAAM,YAAY,CAAA"}

package/dist/ui/slider/public.js

@@ -1 +1 @@
-export { init, update, view, lazy, subscriptions, fractionOfValue, Model, Message, OutMessage, SubscriptionDeps, } from './index.js';
+export { init, update, setRange, setValue, view, lazy, subscriptions, subscriptionsForRoot, fractionOfValue, Model, Message, OutMessage, SubscriptionDeps, } from './index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.91.0",
+  "version": "0.93.0",
   "description": "A TypeScript frontend framework, built on Effect and architected like Elm",
   "type": "module",
   "main": "./dist/index.js",
@@ -200,13 +200,13 @@
     "dist"
   ],
   "peerDependencies": {
-    "@effect/platform-browser": "4.0.0-beta.59",
-    "effect": "4.0.0-beta.59"
+    "@effect/platform-browser": "4.0.0-beta.64",
+    "effect": "4.0.0-beta.64"
   },
   "devDependencies": {
-    "@effect/platform-browser": "4.0.0-beta.59",
-    "@effect/vitest": "4.0.0-beta.59",
-    "effect": "4.0.0-beta.59",
+    "@effect/platform-browser": "4.0.0-beta.64",
+    "@effect/vitest": "4.0.0-beta.64",
+    "effect": "4.0.0-beta.64",
     "happy-dom": "^20.9.0",
     "rimraf": "^6.1.3",
     "typedoc": "^0.28.19",