foldkit 0.52.0 → 0.53.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-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-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] .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: none;\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}\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";
 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,m7QA6gBlB,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,kvUA6lBlB,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/devtools/overlay-styles.js

@@ -231,6 +231,86 @@ ul {
 .dt-resume-button:hover {
   opacity: 0.7;
 }
+.dt-filter-wrapper {
+  position: relative;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--dt-border);
+}
+.dt-filter-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  background: transparent;
+  border: none;
+  color: var(--dt-text-muted);
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+}
+.dt-filter-button:hover {
+  color: var(--dt-text);
+  background-color: var(--dt-tree-hover);
+}
+.dt-filter-button:focus-visible {
+  outline: 1px solid var(--dt-accent);
+  outline-offset: -1px;
+}
+.dt-filter-button[data-open] {
+  color: var(--dt-text);
+  background-color: var(--dt-surface-selected);
+}
+.dt-filter-button[data-open] .json-arrow {
+  transform: rotate(180deg);
+}
+.dt-filter-items {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: var(--dt-bg);
+  border-top: none;
+  border-bottom: 1px solid var(--dt-border);
+  z-index: 10;
+  max-height: 200px;
+  overflow-y: auto;
+  outline: none;
+}
+.dt-filter-item {
+  padding: 6px 12px;
+  color: var(--dt-text-muted);
+  cursor: pointer;
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 13px;
+  border-bottom: 1px solid var(--dt-border);
+}
+.dt-filter-item:last-child {
+  border-bottom: none;
+}
+.dt-filter-item[data-active] {
+  background-color: var(--dt-tree-hover);
+  color: var(--dt-text);
+}
+.dt-filter-item[data-selected] {
+  color: var(--dt-accent);
+}
+.dt-filter-check {
+  width: 12px;
+  height: 12px;
+  visibility: hidden;
+}
+.dt-filter-item[data-selected] .dt-filter-check {
+  visibility: visible;
+  color: var(--dt-accent);
+}
+.dt-filter-backdrop {
+  position: fixed;
+  inset: 0;
+}
 .dt-tab-button {
   position: relative;
   background: transparent;

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,MAAM,EACN,OAAO,EAGP,MAAM,EAQP,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,YAAY,CAAA;AAKrC,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAMxE,OAAO,EAAE,KAAK,aAAa,EAA+B,MAAM,SAAS,CAAA;AA0KzE,eAAO,MAAM,MAAM;;EAA0C,CAAA;AAC7D,eAAO,MAAM,YAAY;;;;;;EAGxB,CAAA;AACD,eAAO,MAAM,aAAa;;;;;;EAGzB,CAAA;AACD,eAAO,MAAM,MAAM;;EAA4C,CAAA;AAC/D,eAAO,MAAM,KAAK;;EAA0C,CAAA;AAC5D,eAAO,MAAM,UAAU;;EAA6C,CAAA;AACpE,eAAO,MAAM,YAAY;;EAAiD,CAAA;AAC1E,eAAO,MAAM,WAAW;;EAA+C,CAAA;AAkmCvE,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCA4ChC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devtools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,MAAM,EAGN,OAAO,EAGP,MAAM,EASP,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,YAAY,CAAA;AAKrC,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAOxE,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,SAAS,CAAA;AAmNhB,eAAO,MAAM,MAAM;;EAA0C,CAAA;AAC7D,eAAO,MAAM,YAAY;;;;;;EAGxB,CAAA;AACD,eAAO,MAAM,aAAa;;;;;;EAGzB,CAAA;AACD,eAAO,MAAM,MAAM;;EAA4C,CAAA;AAC/D,eAAO,MAAM,KAAK;;EAA0C,CAAA;AAC5D,eAAO,MAAM,UAAU;;EAA6C,CAAA;AACpE,eAAO,MAAM,YAAY;;EAAiD,CAAA;AAC1E,eAAO,MAAM,WAAW;;EAA+C,CAAA;AA2xCvE,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCAkDhC,CAAA"}

package/dist/devtools/overlay.js

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { Array as Array_, Effect, HashSet, Match as M, Number as Number_, Option, Predicate, Record, Schema as S, Stream, String as String_, SubscriptionRef, pipe, } from 'effect';
+import { Array as Array_, Effect, Equal, Function, HashSet, Match as M, Number as Number_, Option, Order, Predicate, Record, Schema as S, Stream, String as String_, SubscriptionRef, pipe, } from 'effect';
 import * as Command from '../command';
 import { OptionExt } from '../effectExtensions';
 import { createKeyedLazy, html } from '../html';
@@ -8,17 +8,20 @@ import { makeProgram } from '../runtime/runtime';
 import { makeSubscriptions } from '../runtime/subscription';
 import { evo } from '../struct';
 import { lockScroll, unlockScroll } from '../task/scrollLock';
+import * as Listbox from '../ui/listbox/public';
 import * as Tabs from '../ui/tabs';
 import { overlayStyles } from './overlay-styles';
-import { INIT_INDEX } from './store';
+import { INIT_INDEX, } from './store';
 // MODEL
 const DisplayEntry = S.Struct({
     tag: S.String,
+    maybeInnerTag: S.OptionFromSelf(S.String),
     commandNames: S.Array(S.String),
     timestamp: S.Number,
     isModelChanged: S.Boolean,
 });
 const INSPECTOR_TABS_ID = 'dt-inspector';
+const SUBMODEL_FILTER_ID = 'dt-submodel-filter';
 const InspectorTabsModel = S.Struct({
     id: S.String,
     activeIndex: S.Number,
@@ -37,6 +40,9 @@ const Model = S.Struct({
     isFollowingLatest: S.Boolean,
     maybeInspectedModel: S.OptionFromSelf(S.Unknown),
     maybeInspectedMessage: S.OptionFromSelf(S.Unknown),
+    submodelTags: S.Array(S.String),
+    maybeSubmodelFilter: S.OptionFromSelf(S.String),
+    submodelFilterListbox: Listbox.Model,
     expandedPaths: S.HashSetFromSelf(S.String),
     changedPaths: S.HashSetFromSelf(S.String),
     affectedPaths: S.HashSetFromSelf(S.String),
@@ -82,20 +88,35 @@ const ReceivedStoreUpdate = m('ReceivedStoreUpdate', {
     isPaused: S.Boolean,
     pausedAtIndex: S.Number,
 });
-const Message = S.Union(ClickedToggle, ClickedRow, ClickedResume, ClickedClear, ClickedFollowLatest, CompletedJump, CompletedResume, CompletedClear, LockedScroll, UnlockedScroll, ScrolledToTop, CrossedMobileBreakpoint, ReceivedInspectedState, ToggledTreeNode, GotInspectorTabsMessage, ReceivedStoreUpdate);
+const GotSubmodelFilterMessage = m('GotSubmodelFilterMessage', {
+    message: Listbox.Message,
+});
+const SelectedSubmodelFilter = m('SelectedSubmodelFilter', {
+    tag: S.String,
+});
+const Message = S.Union(ClickedToggle, ClickedRow, ClickedResume, ClickedClear, ClickedFollowLatest, CompletedJump, CompletedResume, CompletedClear, LockedScroll, UnlockedScroll, ScrolledToTop, CrossedMobileBreakpoint, ReceivedInspectedState, ToggledTreeNode, GotInspectorTabsMessage, ReceivedStoreUpdate, GotSubmodelFilterMessage, SelectedSubmodelFilter);
 // HELPERS
 const MILLIS_PER_SECOND = 1000;
 const MOBILE_BREAKPOINT = 767;
 const MOBILE_BREAKPOINT_QUERY = `(max-width: ${MOBILE_BREAKPOINT}px)`;
 const TREE_INDENT_PX = 12;
 const MAX_PREVIEW_KEYS = 3;
+const ALL_MESSAGES_VALUE = '';
 const formatTimeDelta = (deltaMs) => M.value(deltaMs).pipe(M.when(0, () => '0ms'), M.when(Number_.lessThan(MILLIS_PER_SECOND), ms => `+${Math.round(ms)}ms`), M.orElse(ms => `+${(ms / MILLIS_PER_SECOND).toFixed(1)}s`));
 const MESSAGE_LIST_SELECTOR = '.message-list';
-const toDisplayEntries = ({ entries }) => Array_.map(entries, ({ tag, commandNames, timestamp, isModelChanged }) => ({
-    tag,
-    commandNames,
-    timestamp,
-    isModelChanged,
+const computeSubmodelTags = (entries) => pipe(entries, Array_.filterMap(entry => entry.maybeInnerTag.pipe(Option.as(entry.tag))), Array_.dedupe, Array_.sort(Order.string));
+const GOT_MESSAGE_PATTERN = /^Got.+Message$/;
+const extractInnerTag = (entry) => pipe(entry.tag, String_.search(GOT_MESSAGE_PATTERN), Option.flatMap(() => {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const inner = entry.message?.['message'];
+    return pipe(inner, Option.liftPredicate(isTagged), Option.map(({ _tag }) => _tag));
+}));
+const toDisplayEntries = ({ entries }) => Array_.map(entries, entry => ({
+    tag: entry.tag,
+    maybeInnerTag: extractInnerTag(entry),
+    commandNames: entry.commandNames,
+    timestamp: entry.timestamp,
+    isModelChanged: entry.isModelChanged,
 }));
 const toDisplayState = (state) => ({
     entries: toDisplayEntries(state),
@@ -104,7 +125,7 @@ const toDisplayState = (state) => ({
     isPaused: state.isPaused,
     pausedAtIndex: state.pausedAtIndex,
 });
-const isExpandable = (value) => Predicate.isNotNull(value) && typeof value === 'object';
+const isExpandable = (value) => Predicate.isObject(value);
 const Tagged = S.Struct({ _tag: S.String });
 const isTagged = S.is(Tagged);
 const objectPreview = (value) => pipe(value, Record.keys, Array_.filter(key => key !== '_tag'), Array_.match({
@@ -196,6 +217,7 @@ const makeUpdate = (store, shadow, mode) => {
             evo(model, {
                 selectedIndex: () => INIT_INDEX,
                 isFollowingLatest: () => true,
+                maybeSubmodelFilter: () => Option.none(),
                 expandedPaths: () => HashSet.empty(),
                 changedPaths: () => HashSet.empty(),
                 affectedPaths: () => HashSet.empty(),
@@ -250,6 +272,8 @@ const makeUpdate = (store, shadow, mode) => {
                 onEmpty: () => INIT_INDEX,
                 onNonEmpty: () => startIndex + entries.length - 1,
             });
+            const nextSubmodelTags = computeSubmodelTags(entries);
+            const isFilterStale = Option.exists(model.maybeSubmodelFilter, filterTag => !Array_.contains(nextSubmodelTags, filterTag));
             return [
                 evo(model, {
                     entries: () => entries,
@@ -257,11 +281,37 @@ const makeUpdate = (store, shadow, mode) => {
                     startIndex: () => startIndex,
                     isPaused: () => isPaused,
                     pausedAtIndex: () => pausedAtIndex,
+                    submodelTags: () => nextSubmodelTags,
+                    maybeSubmodelFilter: current => isFilterStale ? Option.none() : current,
+                    submodelFilterListbox: current => isFilterStale
+                        ? evo(current, {
+                            maybeSelectedItem: () => Option.some(ALL_MESSAGES_VALUE),
+                        })
+                        : current,
                     selectedIndex: current => shouldFollowLatest ? latestIndex : current,
                 }),
                 shouldFollowLatest ? [scrollToTop, inspectLatest] : [],
             ];
         },
+        GotSubmodelFilterMessage: ({ message: listboxMessage }) => {
+            const [nextListboxModel, listboxCommands] = Listbox.update(model.submodelFilterListbox, listboxMessage);
+            return [
+                evo(model, {
+                    submodelFilterListbox: () => nextListboxModel,
+                }),
+                listboxCommands.map(Command.mapEffect(Effect.map(innerMessage => GotSubmodelFilterMessage({ message: innerMessage })))),
+            ];
+        },
+        SelectedSubmodelFilter: ({ tag }) => {
+            const [nextListbox, listboxCommands] = Listbox.selectItem(model.submodelFilterListbox, tag);
+            return [
+                evo(model, {
+                    maybeSubmodelFilter: () => Option.liftPredicate(tag, String_.isNonEmpty),
+                    submodelFilterListbox: () => nextListbox,
+                }),
+                listboxCommands.map(Command.mapEffect(Effect.map(innerMessage => GotSubmodelFilterMessage({ message: innerMessage })))),
+            ];
+        },
     }), M.tag('CompletedJump', 'CompletedResume', 'CompletedClear', 'LockedScroll', 'UnlockedScroll', 'ScrolledToTop', () => [model, []]), M.exhaustive);
 };
 // SUBSCRIPTION
@@ -467,16 +517,27 @@ const makeView = (position, mode, maybeBanner) => {
         Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
     ], ['init — no Message']);
     const modelTabContent = (model, inspectedModel) => treeView(inspectedModel, 'root', model.expandedPaths, model.changedPaths, model.affectedPaths, Option.none(), true);
+    const unwrapIfFiltered = (message, model) => {
+        if (Option.isNone(model.maybeSubmodelFilter)) {
+            return message;
+        }
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const inner = message?.['message'];
+        return isTagged(inner) ? inner : message;
+    };
     const messageTabContent = (model) => Option.match(model.maybeInspectedMessage, {
         onNone: () => noMessageView,
-        onSome: message => div([Class('flex flex-col flex-1 min-h-0 min-w-0')], [
-            div([
-                Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
-            ], [inspectedTimestamp(model)]),
-            div([Class('flex flex-col flex-1 min-h-0 min-w-0 pt-1 pl-1')], [
-                treeView(message, 'root', model.expandedPaths, HashSet.empty(), HashSet.empty(), Option.none(), false),
-            ]),
-        ]),
+        onSome: rawMessage => {
+            const message = unwrapIfFiltered(rawMessage, model);
+            return div([Class('flex flex-col flex-1 min-h-0 min-w-0')], [
+                div([
+                    Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
+                ], [inspectedTimestamp(model)]),
+                div([Class('flex flex-col flex-1 min-h-0 min-w-0 pt-1 pl-1')], [
+                    treeView(message, 'root', model.expandedPaths, HashSet.empty(), HashSet.empty(), Option.none(), false),
+                ]),
+            ]);
+        },
     });
     const selectedCommandNames = (model) => {
         const selectedIndex = M.value(mode).pipe(M.when('TimeTravel', () => model.isPaused ? model.pausedAtIndex : INIT_INDEX), M.when('Inspect', () => model.selectedIndex), M.exhaustive);
@@ -552,30 +613,80 @@ const makeView = (position, mode, maybeBanner) => {
     const actionButtonClass = 'dt-resume-button bg-transparent border-none text-dt-live cursor-pointer text-base font-mono font-medium';
     const statusClass = 'text-base font-mono';
     const clearHistoryButton = button([Class(headerButtonClass), OnClick(ClickedClear())], ['Clear history']);
+    const submodelLabel = (tag) => pipe(tag, String_.replace(/^Got/, ''), String_.replace(/Message$/, ''));
+    const CHECK_ICON = 'M4.5 12.75l6 6 9-13.5';
+    const checkIconView = svg([
+        AriaHidden(true),
+        Class('dt-filter-check shrink-0'),
+        Xmlns('http://www.w3.org/2000/svg'),
+        Fill('none'),
+        ViewBox('0 0 24 24'),
+        StrokeWidth('2'),
+        Stroke('currentColor'),
+    ], [
+        path([D(CHECK_ICON), StrokeLinecap('round'), StrokeLinejoin('round')], []),
+    ]);
+    const filterItemLabel = (item) => String_.isNonEmpty(item) ? submodelLabel(item) : 'All Messages';
+    const submodelFilterView = (model) => {
+        const buttonLabel = Option.match(model.maybeSubmodelFilter, {
+            onNone: () => 'All Messages',
+            onSome: submodelLabel,
+        });
+        return Listbox.view({
+            model: model.submodelFilterListbox,
+            toParentMessage: message => GotSubmodelFilterMessage({ message }),
+            onSelectedItem: tag => SelectedSubmodelFilter({ tag }),
+            items: [ALL_MESSAGES_VALUE, ...model.submodelTags],
+            itemToConfig: item => ({
+                className: 'dt-filter-item',
+                content: div([Class('flex items-center gap-2')], [checkIconView, span([], [filterItemLabel(item)])]),
+            }),
+            buttonContent: span([Class('flex flex-1 items-center justify-between')], [
+                span([], [buttonLabel]),
+                svg([
+                    AriaHidden(true),
+                    Class('json-arrow shrink-0'),
+                    Xmlns('http://www.w3.org/2000/svg'),
+                    Fill('none'),
+                    ViewBox('0 0 24 24'),
+                    StrokeWidth('2'),
+                    Stroke('currentColor'),
+                ], [
+                    path([
+                        D(CHEVRON_DOWN),
+                        StrokeLinecap('round'),
+                        StrokeLinejoin('round'),
+                    ], []),
+                ]),
+            ]),
+            buttonClassName: 'dt-filter-button',
+            itemsClassName: 'dt-filter-items',
+            className: 'dt-filter-wrapper',
+            backdropClassName: 'dt-filter-backdrop',
+        });
+    };
     const headerView = (model) => {
-        const { status, action } = M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => model.isPaused
+        const { status, maybeAction } = M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => model.isPaused
             ? {
                 status: span([Class(`${statusClass} text-dt-paused`)], [
                     model.pausedAtIndex === INIT_INDEX
                         ? 'Paused (init)'
                         : `Paused (${model.pausedAtIndex + 1})`,
                 ]),
-                action: button([Class(actionButtonClass), OnClick(ClickedResume())], ['Resume →']),
+                maybeAction: Option.some(button([Class(actionButtonClass), OnClick(ClickedResume())], ['Resume →'])),
             }
             : {
                 status: span([Class(`${statusClass} text-dt-live font-medium`)], ['Live']),
-                action: div([], []),
+                maybeAction: Option.none(),
             }), M.when('Inspect', () => ({
             status: span([Class(`${statusClass} text-dt-accent`)], [
                 model.selectedIndex === INIT_INDEX
                     ? 'Inspecting (init)'
                     : `Inspecting (${model.selectedIndex + 1})`,
             ]),
-            action: model.isFollowingLatest
-                ? div([], [])
-                : button([Class(actionButtonClass), OnClick(ClickedFollowLatest())], ['Follow Latest →']),
+            maybeAction: OptionExt.when(!model.isFollowingLatest, button([Class(actionButtonClass), OnClick(ClickedFollowLatest())], ['Follow Latest →'])),
         })), M.exhaustive);
-        return header([Class(headerClass)], [status, action, clearHistoryButton]);
+        return header([Class(headerClass)], [status, ...Option.toArray(maybeAction), clearHistoryButton]);
     };
     const initRowView = (isSelected, isPausedHere) => keyed('li')('init', [
         Class(clsx(ROW_BASE, { selected: isSelected })),
@@ -623,12 +734,21 @@ const makeView = (position, mode, maybeBanner) => {
             : model.startIndex + model.entries.length - 1;
         const selectedIndex = M.value(mode).pipe(M.when('TimeTravel', () => model.isPaused ? model.pausedAtIndex : lastIndex), M.when('Inspect', () => model.selectedIndex), M.exhaustive);
         const isInitSelected = selectedIndex === INIT_INDEX;
-        const messageRows = pipe(model.entries, Array_.map((entry, arrayIndex) => {
-            const absoluteIndex = model.startIndex + arrayIndex;
+        const isFiltered = Option.isSome(model.maybeSubmodelFilter);
+        const indexedEntries = pipe(model.entries, Array_.map((entry, arrayIndex) => ({
+            entry,
+            absoluteIndex: model.startIndex + arrayIndex,
+        })), isFiltered
+            ? Array_.filter(({ entry }) => Option.exists(model.maybeSubmodelFilter, Equal.equals(entry.tag)))
+            : Function.identity);
+        const messageRows = pipe(indexedEntries, Array_.map(({ entry, absoluteIndex }) => {
             const isSelected = selectedIndex === absoluteIndex;
             const isPausedHere = model.isPaused && model.pausedAtIndex === absoluteIndex;
+            const displayTag = isFiltered
+                ? Option.getOrElse(entry.maybeInnerTag, () => entry.tag)
+                : entry.tag;
             return lazyMessageRow(String(absoluteIndex), messageRowView, [
-                entry.tag,
+                displayTag,
                 absoluteIndex,
                 isSelected,
                 isPausedHere,
@@ -636,10 +756,12 @@ const makeView = (position, mode, maybeBanner) => {
                 entry.isModelChanged,
             ]);
         }), Array_.reverse);
-        return ul([Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none')], [
-            ...messageRows,
-            initRowView(isInitSelected, model.isPaused && model.pausedAtIndex === INIT_INDEX),
-        ]);
+        return ul([Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none')], isFiltered
+            ? messageRows
+            : [
+                ...messageRows,
+                initRowView(isInitSelected, model.isPaused && model.pausedAtIndex === INIT_INDEX),
+            ]);
     };
     // PANEL
     const panelView = (model) => keyed('div')('dt-panel', [
@@ -650,7 +772,13 @@ const makeView = (position, mode, maybeBanner) => {
         ], [banner])).pipe(Option.toArray),
         headerView(model),
         div([Class('flex flex-1 min-h-0 dt-content')], [
-            div([Class('flex flex-col min-h-0 dt-message-pane')], [messageListView(model)]),
+            div([Class('flex flex-col min-h-0 dt-message-pane')], [
+                ...Array_.match(model.submodelTags, {
+                    onEmpty: () => [],
+                    onNonEmpty: () => [submodelFilterView(model)],
+                }),
+                messageListView(model),
+            ]),
             inspectorPaneView(model),
         ]),
     ]);
@@ -694,6 +822,12 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
             ...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(),

package/dist/ui/combobox/multi.d.ts

@@ -34,17 +34,17 @@ export declare const update: (model: {
     readonly isOpen: boolean;
     readonly isAnimated: boolean;
     readonly isModal: boolean;
-    readonly nullable: boolean;
-    readonly immediate: boolean;
-    readonly selectInputOnFocus: boolean;
     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
     readonly maybeActiveItemIndex: import("effect/Option").Option<number>;
     readonly activationTrigger: "Pointer" | "Keyboard";
-    readonly inputValue: string;
     readonly maybeLastPointerPosition: import("effect/Option").Option<{
         readonly screenX: number;
         readonly screenY: number;
     }>;
+    readonly nullable: boolean;
+    readonly immediate: boolean;
+    readonly selectInputOnFocus: boolean;
+    readonly inputValue: string;
 } & {
     readonly selectedItems: readonly string[];
 }, message: import("./shared").Message) => readonly [{
@@ -52,68 +52,68 @@ export declare const update: (model: {
     readonly isOpen: boolean;
     readonly isAnimated: boolean;
     readonly isModal: boolean;
-    readonly nullable: boolean;
-    readonly immediate: boolean;
-    readonly selectInputOnFocus: boolean;
     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
     readonly maybeActiveItemIndex: import("effect/Option").Option<number>;
     readonly activationTrigger: "Pointer" | "Keyboard";
-    readonly inputValue: string;
     readonly maybeLastPointerPosition: import("effect/Option").Option<{
         readonly screenX: number;
         readonly screenY: number;
     }>;
+    readonly nullable: boolean;
+    readonly immediate: boolean;
+    readonly selectInputOnFocus: boolean;
+    readonly inputValue: string;
 } & {
     readonly selectedItems: readonly string[];
 }, readonly Readonly<{
     name: string;
     effect: import("effect/Effect").Effect<{
-        readonly _tag: "Opened";
-        readonly maybeActiveItemIndex: import("effect/Option").Option<number>;
-    } | {
         readonly _tag: "Closed";
     } | {
         readonly _tag: "ClosedByTab";
+    } | {
+        readonly _tag: "DeactivatedItem";
+    } | {
+        readonly _tag: "CompletedLockScroll";
+    } | {
+        readonly _tag: "CompletedUnlockScroll";
+    } | {
+        readonly _tag: "CompletedSetupInert";
+    } | {
+        readonly _tag: "CompletedTeardownInert";
+    } | {
+        readonly _tag: "CompletedScrollIntoView";
+    } | {
+        readonly _tag: "CompletedClickItem";
+    } | {
+        readonly _tag: "AdvancedTransitionFrame";
+    } | {
+        readonly _tag: "EndedTransition";
+    } | {
+        readonly _tag: "Opened";
+        readonly maybeActiveItemIndex: import("effect/Option").Option<number>;
     } | {
         readonly _tag: "ActivatedItem";
-        readonly index: number;
         readonly activationTrigger: "Pointer" | "Keyboard";
+        readonly index: number;
         readonly maybeImmediateSelection: import("effect/Option").Option<{
             readonly item: string;
             readonly displayText: string;
         }>;
-    } | {
-        readonly _tag: "DeactivatedItem";
     } | {
         readonly _tag: "SelectedItem";
         readonly item: string;
         readonly displayText: string;
     } | {
         readonly _tag: "MovedPointerOverItem";
-        readonly index: number;
         readonly screenX: number;
         readonly screenY: number;
+        readonly index: number;
     } | {
         readonly _tag: "RequestedItemClick";
         readonly index: number;
-    } | {
-        readonly _tag: "CompletedLockScroll";
-    } | {
-        readonly _tag: "CompletedUnlockScroll";
-    } | {
-        readonly _tag: "CompletedSetupInert";
-    } | {
-        readonly _tag: "CompletedTeardownInert";
     } | {
         readonly _tag: "CompletedFocusInput";
-    } | {
-        readonly _tag: "CompletedScrollIntoView";
-    } | {
-        readonly _tag: "CompletedClickItem";
-    } | {
-        readonly _tag: "AdvancedTransitionFrame";
-    } | {
-        readonly _tag: "EndedTransition";
     } | {
         readonly _tag: "DetectedInputMovement";
     } | {
@@ -132,17 +132,17 @@ export declare const view: <Message, Item extends string>(config: Readonly<{
         readonly isOpen: boolean;
         readonly isAnimated: boolean;
         readonly isModal: boolean;
-        readonly nullable: boolean;
-        readonly immediate: boolean;
-        readonly selectInputOnFocus: boolean;
         readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
         readonly maybeActiveItemIndex: import("effect/Option").Option<number>;
         readonly activationTrigger: "Pointer" | "Keyboard";
-        readonly inputValue: string;
         readonly maybeLastPointerPosition: import("effect/Option").Option<{
             readonly screenX: number;
             readonly screenY: number;
         }>;
+        readonly nullable: boolean;
+        readonly immediate: boolean;
+        readonly selectInputOnFocus: boolean;
+        readonly inputValue: string;
     } & {
         readonly selectedItems: readonly string[];
     };

package/dist/ui/combobox/shared.d.ts

@@ -205,52 +205,52 @@ export declare const makeUpdate: <Model extends BaseModel>(handlers: Readonly<{
 }>) => (model: Model, message: Message) => readonly [Model, readonly Readonly<{
     name: string;
     effect: Effect.Effect<{
-        readonly _tag: "Opened";
-        readonly maybeActiveItemIndex: Option.Option<number>;
-    } | {
         readonly _tag: "Closed";
     } | {
         readonly _tag: "ClosedByTab";
+    } | {
+        readonly _tag: "DeactivatedItem";
+    } | {
+        readonly _tag: "CompletedLockScroll";
+    } | {
+        readonly _tag: "CompletedUnlockScroll";
+    } | {
+        readonly _tag: "CompletedSetupInert";
+    } | {
+        readonly _tag: "CompletedTeardownInert";
+    } | {
+        readonly _tag: "CompletedScrollIntoView";
+    } | {
+        readonly _tag: "CompletedClickItem";
+    } | {
+        readonly _tag: "AdvancedTransitionFrame";
+    } | {
+        readonly _tag: "EndedTransition";
+    } | {
+        readonly _tag: "Opened";
+        readonly maybeActiveItemIndex: Option.Option<number>;
     } | {
         readonly _tag: "ActivatedItem";
-        readonly index: number;
         readonly activationTrigger: "Pointer" | "Keyboard";
+        readonly index: number;
         readonly maybeImmediateSelection: Option.Option<{
             readonly item: string;
             readonly displayText: string;
         }>;
-    } | {
-        readonly _tag: "DeactivatedItem";
     } | {
         readonly _tag: "SelectedItem";
         readonly item: string;
         readonly displayText: string;
     } | {
         readonly _tag: "MovedPointerOverItem";
-        readonly index: number;
         readonly screenX: number;
         readonly screenY: number;
+        readonly index: number;
     } | {
         readonly _tag: "RequestedItemClick";
         readonly index: number;
-    } | {
-        readonly _tag: "CompletedLockScroll";
-    } | {
-        readonly _tag: "CompletedUnlockScroll";
-    } | {
-        readonly _tag: "CompletedSetupInert";
-    } | {
-        readonly _tag: "CompletedTeardownInert";
     } | {
         readonly _tag: "CompletedFocusInput";
-    } | {
-        readonly _tag: "CompletedScrollIntoView";
-    } | {
-        readonly _tag: "CompletedClickItem";
-    } | {
-        readonly _tag: "AdvancedTransitionFrame";
-    } | {
-        readonly _tag: "EndedTransition";
     } | {
         readonly _tag: "DetectedInputMovement";
     } | {

package/dist/ui/combobox/single.d.ts

@@ -36,17 +36,17 @@ export declare const update: (model: {
     readonly isOpen: boolean;
     readonly isAnimated: boolean;
     readonly isModal: boolean;
-    readonly nullable: boolean;
-    readonly immediate: boolean;
-    readonly selectInputOnFocus: boolean;
     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
     readonly maybeActiveItemIndex: Option.Option<number>;
     readonly activationTrigger: "Pointer" | "Keyboard";
-    readonly inputValue: string;
     readonly maybeLastPointerPosition: Option.Option<{
         readonly screenX: number;
         readonly screenY: number;
     }>;
+    readonly nullable: boolean;
+    readonly immediate: boolean;
+    readonly selectInputOnFocus: boolean;
+    readonly inputValue: string;
 } & {
     readonly maybeSelectedItem: Option.Option<string>;
     readonly maybeSelectedDisplayText: Option.Option<string>;
@@ -55,69 +55,69 @@ export declare const update: (model: {
     readonly isOpen: boolean;
     readonly isAnimated: boolean;
     readonly isModal: boolean;
-    readonly nullable: boolean;
-    readonly immediate: boolean;
-    readonly selectInputOnFocus: boolean;
     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
     readonly maybeActiveItemIndex: Option.Option<number>;
     readonly activationTrigger: "Pointer" | "Keyboard";
-    readonly inputValue: string;
     readonly maybeLastPointerPosition: Option.Option<{
         readonly screenX: number;
         readonly screenY: number;
     }>;
+    readonly nullable: boolean;
+    readonly immediate: boolean;
+    readonly selectInputOnFocus: boolean;
+    readonly inputValue: string;
 } & {
     readonly maybeSelectedItem: Option.Option<string>;
     readonly maybeSelectedDisplayText: Option.Option<string>;
 }, readonly Readonly<{
     name: string;
     effect: import("effect/Effect").Effect<{
-        readonly _tag: "Opened";
-        readonly maybeActiveItemIndex: Option.Option<number>;
-    } | {
         readonly _tag: "Closed";
     } | {
         readonly _tag: "ClosedByTab";
+    } | {
+        readonly _tag: "DeactivatedItem";
+    } | {
+        readonly _tag: "CompletedLockScroll";
+    } | {
+        readonly _tag: "CompletedUnlockScroll";
+    } | {
+        readonly _tag: "CompletedSetupInert";
+    } | {
+        readonly _tag: "CompletedTeardownInert";
+    } | {
+        readonly _tag: "CompletedScrollIntoView";
+    } | {
+        readonly _tag: "CompletedClickItem";
+    } | {
+        readonly _tag: "AdvancedTransitionFrame";
+    } | {
+        readonly _tag: "EndedTransition";
+    } | {
+        readonly _tag: "Opened";
+        readonly maybeActiveItemIndex: Option.Option<number>;
     } | {
         readonly _tag: "ActivatedItem";
-        readonly index: number;
         readonly activationTrigger: "Pointer" | "Keyboard";
+        readonly index: number;
         readonly maybeImmediateSelection: Option.Option<{
             readonly item: string;
             readonly displayText: string;
         }>;
-    } | {
-        readonly _tag: "DeactivatedItem";
     } | {
         readonly _tag: "SelectedItem";
         readonly item: string;
         readonly displayText: string;
     } | {
         readonly _tag: "MovedPointerOverItem";
-        readonly index: number;
         readonly screenX: number;
         readonly screenY: number;
+        readonly index: number;
     } | {
         readonly _tag: "RequestedItemClick";
         readonly index: number;
-    } | {
-        readonly _tag: "CompletedLockScroll";
-    } | {
-        readonly _tag: "CompletedUnlockScroll";
-    } | {
-        readonly _tag: "CompletedSetupInert";
-    } | {
-        readonly _tag: "CompletedTeardownInert";
     } | {
         readonly _tag: "CompletedFocusInput";
-    } | {
-        readonly _tag: "CompletedScrollIntoView";
-    } | {
-        readonly _tag: "CompletedClickItem";
-    } | {
-        readonly _tag: "AdvancedTransitionFrame";
-    } | {
-        readonly _tag: "EndedTransition";
     } | {
         readonly _tag: "DetectedInputMovement";
     } | {
@@ -136,17 +136,17 @@ export declare const view: <Message, Item extends string>(config: Readonly<{
         readonly isOpen: boolean;
         readonly isAnimated: boolean;
         readonly isModal: boolean;
-        readonly nullable: boolean;
-        readonly immediate: boolean;
-        readonly selectInputOnFocus: boolean;
         readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
         readonly maybeActiveItemIndex: Option.Option<number>;
         readonly activationTrigger: "Pointer" | "Keyboard";
-        readonly inputValue: string;
         readonly maybeLastPointerPosition: Option.Option<{
             readonly screenX: number;
             readonly screenY: number;
         }>;
+        readonly nullable: boolean;
+        readonly immediate: boolean;
+        readonly selectInputOnFocus: boolean;
+        readonly inputValue: string;
     } & {
         readonly maybeSelectedItem: Option.Option<string>;
         readonly maybeSelectedDisplayText: Option.Option<string>;

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

@@ -164,7 +164,7 @@ export declare const SubscriptionDeps: S.Struct<{
 /** Document-level subscriptions for pointer and keyboard events during drag operations. */
 export declare const subscriptions: import("../../runtime/subscription").Subscriptions<{
     readonly id: string;
-    readonly orientation: "Horizontal" | "Vertical";
+    readonly orientation: "Vertical" | "Horizontal";
     readonly activationThreshold: number;
     readonly dragState: {
         readonly _tag: "Idle";
@@ -204,9 +204,9 @@ export declare const subscriptions: import("../../runtime/subscription").Subscri
     };
 }, {
     readonly _tag: "PressedDraggable";
-    readonly index: number;
     readonly screenX: number;
     readonly screenY: number;
+    readonly index: number;
     readonly containerId: string;
     readonly itemId: string;
 } | {

package/dist/ui/listbox/multi.d.ts

@@ -31,73 +31,55 @@ export declare const init: (config: InitConfig) => Model;
 /** Processes a listbox message and returns the next model and commands. Stays open on selection and toggles item membership (multi-select behavior). */
 export declare const update: (model: {
     readonly id: string;
-    readonly orientation: "Horizontal" | "Vertical";
     readonly isOpen: boolean;
     readonly isAnimated: boolean;
     readonly isModal: boolean;
+    readonly orientation: "Vertical" | "Horizontal";
     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
     readonly maybeActiveItemIndex: Option.Option<number>;
     readonly activationTrigger: "Pointer" | "Keyboard";
+    readonly searchQuery: string;
+    readonly searchVersion: number;
     readonly maybeLastPointerPosition: Option.Option<{
         readonly screenX: number;
         readonly screenY: number;
     }>;
-    readonly searchQuery: string;
-    readonly searchVersion: number;
     readonly maybeLastButtonPointerType: Option.Option<string>;
 } & {
     readonly selectedItems: readonly string[];
 }, message: import("./shared").Message) => readonly [{
     readonly id: string;
-    readonly orientation: "Horizontal" | "Vertical";
     readonly isOpen: boolean;
     readonly isAnimated: boolean;
     readonly isModal: boolean;
+    readonly orientation: "Vertical" | "Horizontal";
     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
     readonly maybeActiveItemIndex: Option.Option<number>;
     readonly activationTrigger: "Pointer" | "Keyboard";
+    readonly searchQuery: string;
+    readonly searchVersion: number;
     readonly maybeLastPointerPosition: Option.Option<{
         readonly screenX: number;
         readonly screenY: number;
     }>;
-    readonly searchQuery: string;
-    readonly searchVersion: number;
     readonly maybeLastButtonPointerType: Option.Option<string>;
 } & {
     readonly selectedItems: readonly string[];
 }, readonly Readonly<{
     name: string;
     effect: import("effect/Effect").Effect<{
+        readonly _tag: "Opened";
+        readonly maybeActiveItemIndex: Option.Option<number>;
+    } | {
         readonly _tag: "Closed";
     } | {
         readonly _tag: "ClosedByTab";
-    } | {
-        readonly _tag: "DeactivatedItem";
-    } | {
-        readonly _tag: "CompletedLockScroll";
-    } | {
-        readonly _tag: "CompletedUnlockScroll";
-    } | {
-        readonly _tag: "CompletedSetupInert";
-    } | {
-        readonly _tag: "CompletedTeardownInert";
-    } | {
-        readonly _tag: "CompletedScrollIntoView";
-    } | {
-        readonly _tag: "CompletedClickItem";
-    } | {
-        readonly _tag: "AdvancedTransitionFrame";
-    } | {
-        readonly _tag: "EndedTransition";
-    } | {
-        readonly _tag: "CompletedFocusButton";
-    } | {
-        readonly _tag: "Opened";
-        readonly maybeActiveItemIndex: Option.Option<number>;
     } | {
         readonly _tag: "ActivatedItem";
-        readonly index: number;
         readonly activationTrigger: "Pointer" | "Keyboard";
+        readonly index: number;
+    } | {
+        readonly _tag: "DeactivatedItem";
     } | {
         readonly _tag: "SelectedItem";
         readonly item: string;
@@ -113,15 +95,33 @@ export declare const update: (model: {
         readonly version: number;
     } | {
         readonly _tag: "MovedPointerOverItem";
-        readonly index: number;
         readonly screenX: number;
         readonly screenY: number;
+        readonly index: number;
+    } | {
+        readonly _tag: "CompletedLockScroll";
+    } | {
+        readonly _tag: "CompletedUnlockScroll";
+    } | {
+        readonly _tag: "CompletedSetupInert";
+    } | {
+        readonly _tag: "CompletedTeardownInert";
+    } | {
+        readonly _tag: "CompletedFocusButton";
     } | {
         readonly _tag: "CompletedFocusItems";
+    } | {
+        readonly _tag: "CompletedScrollIntoView";
+    } | {
+        readonly _tag: "CompletedClickItem";
     } | {
         readonly _tag: "IgnoredMouseClick";
     } | {
         readonly _tag: "SuppressedSpaceScroll";
+    } | {
+        readonly _tag: "AdvancedTransitionFrame";
+    } | {
+        readonly _tag: "EndedTransition";
     } | {
         readonly _tag: "DetectedButtonMovement";
     } | {
@@ -136,19 +136,19 @@ export type ViewConfig<Message, Item> = BaseViewConfig<Message, Item, Model>;
 export declare const view: <Message, Item>(config: Readonly<{
     model: {
         readonly id: string;
-        readonly orientation: "Horizontal" | "Vertical";
         readonly isOpen: boolean;
         readonly isAnimated: boolean;
         readonly isModal: boolean;
+        readonly orientation: "Vertical" | "Horizontal";
         readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
         readonly maybeActiveItemIndex: Option.Option<number>;
         readonly activationTrigger: "Pointer" | "Keyboard";
+        readonly searchQuery: string;
+        readonly searchVersion: number;
         readonly maybeLastPointerPosition: Option.Option<{
             readonly screenX: number;
             readonly screenY: number;
         }>;
-        readonly searchQuery: string;
-        readonly searchVersion: number;
         readonly maybeLastButtonPointerType: Option.Option<string>;
     } & {
         readonly selectedItems: readonly string[];

package/dist/ui/listbox/shared.d.ts

@@ -218,36 +218,18 @@ export declare const DetectMovementOrTransitionEnd: Command.CommandDefinition<"D
 export declare const makeUpdate: <Model extends BaseModel>(handleSelectedItem: (model: Model, item: string, context: SelectedItemContext) => [Model, ReadonlyArray<Command.Command<Message>>]) => (model: Model, message: Message) => readonly [Model, readonly Readonly<{
     name: string;
     effect: Effect.Effect<{
+        readonly _tag: "Opened";
+        readonly maybeActiveItemIndex: Option.Option<number>;
+    } | {
         readonly _tag: "Closed";
     } | {
         readonly _tag: "ClosedByTab";
-    } | {
-        readonly _tag: "DeactivatedItem";
-    } | {
-        readonly _tag: "CompletedLockScroll";
-    } | {
-        readonly _tag: "CompletedUnlockScroll";
-    } | {
-        readonly _tag: "CompletedSetupInert";
-    } | {
-        readonly _tag: "CompletedTeardownInert";
-    } | {
-        readonly _tag: "CompletedScrollIntoView";
-    } | {
-        readonly _tag: "CompletedClickItem";
-    } | {
-        readonly _tag: "AdvancedTransitionFrame";
-    } | {
-        readonly _tag: "EndedTransition";
-    } | {
-        readonly _tag: "CompletedFocusButton";
-    } | {
-        readonly _tag: "Opened";
-        readonly maybeActiveItemIndex: Option.Option<number>;
     } | {
         readonly _tag: "ActivatedItem";
-        readonly index: number;
         readonly activationTrigger: "Pointer" | "Keyboard";
+        readonly index: number;
+    } | {
+        readonly _tag: "DeactivatedItem";
     } | {
         readonly _tag: "SelectedItem";
         readonly item: string;
@@ -263,15 +245,33 @@ export declare const makeUpdate: <Model extends BaseModel>(handleSelectedItem: (
         readonly version: number;
     } | {
         readonly _tag: "MovedPointerOverItem";
-        readonly index: number;
         readonly screenX: number;
         readonly screenY: number;
+        readonly index: number;
+    } | {
+        readonly _tag: "CompletedLockScroll";
+    } | {
+        readonly _tag: "CompletedUnlockScroll";
+    } | {
+        readonly _tag: "CompletedSetupInert";
+    } | {
+        readonly _tag: "CompletedTeardownInert";
+    } | {
+        readonly _tag: "CompletedFocusButton";
     } | {
         readonly _tag: "CompletedFocusItems";
+    } | {
+        readonly _tag: "CompletedScrollIntoView";
+    } | {
+        readonly _tag: "CompletedClickItem";
     } | {
         readonly _tag: "IgnoredMouseClick";
     } | {
         readonly _tag: "SuppressedSpaceScroll";
+    } | {
+        readonly _tag: "AdvancedTransitionFrame";
+    } | {
+        readonly _tag: "EndedTransition";
     } | {
         readonly _tag: "DetectedButtonMovement";
     } | {

package/dist/ui/listbox/single.d.ts

@@ -32,73 +32,55 @@ export declare const init: (config: InitConfig) => Model;
 /** Processes a listbox message and returns the next model and commands. Closes the listbox on selection (single-select behavior). */
 export declare const update: (model: {
     readonly id: string;
-    readonly orientation: "Horizontal" | "Vertical";
     readonly isOpen: boolean;
     readonly isAnimated: boolean;
     readonly isModal: boolean;
+    readonly orientation: "Vertical" | "Horizontal";
     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
     readonly maybeActiveItemIndex: Option.Option<number>;
     readonly activationTrigger: "Pointer" | "Keyboard";
+    readonly searchQuery: string;
+    readonly searchVersion: number;
     readonly maybeLastPointerPosition: Option.Option<{
         readonly screenX: number;
         readonly screenY: number;
     }>;
-    readonly searchQuery: string;
-    readonly searchVersion: number;
     readonly maybeLastButtonPointerType: Option.Option<string>;
 } & {
     readonly maybeSelectedItem: Option.Option<string>;
 }, message: Message) => readonly [{
     readonly id: string;
-    readonly orientation: "Horizontal" | "Vertical";
     readonly isOpen: boolean;
     readonly isAnimated: boolean;
     readonly isModal: boolean;
+    readonly orientation: "Vertical" | "Horizontal";
     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
     readonly maybeActiveItemIndex: Option.Option<number>;
     readonly activationTrigger: "Pointer" | "Keyboard";
+    readonly searchQuery: string;
+    readonly searchVersion: number;
     readonly maybeLastPointerPosition: Option.Option<{
         readonly screenX: number;
         readonly screenY: number;
     }>;
-    readonly searchQuery: string;
-    readonly searchVersion: number;
     readonly maybeLastButtonPointerType: Option.Option<string>;
 } & {
     readonly maybeSelectedItem: Option.Option<string>;
 }, readonly Readonly<{
     name: string;
     effect: import("effect/Effect").Effect<{
+        readonly _tag: "Opened";
+        readonly maybeActiveItemIndex: Option.Option<number>;
+    } | {
         readonly _tag: "Closed";
     } | {
         readonly _tag: "ClosedByTab";
-    } | {
-        readonly _tag: "DeactivatedItem";
-    } | {
-        readonly _tag: "CompletedLockScroll";
-    } | {
-        readonly _tag: "CompletedUnlockScroll";
-    } | {
-        readonly _tag: "CompletedSetupInert";
-    } | {
-        readonly _tag: "CompletedTeardownInert";
-    } | {
-        readonly _tag: "CompletedScrollIntoView";
-    } | {
-        readonly _tag: "CompletedClickItem";
-    } | {
-        readonly _tag: "AdvancedTransitionFrame";
-    } | {
-        readonly _tag: "EndedTransition";
-    } | {
-        readonly _tag: "CompletedFocusButton";
-    } | {
-        readonly _tag: "Opened";
-        readonly maybeActiveItemIndex: Option.Option<number>;
     } | {
         readonly _tag: "ActivatedItem";
-        readonly index: number;
         readonly activationTrigger: "Pointer" | "Keyboard";
+        readonly index: number;
+    } | {
+        readonly _tag: "DeactivatedItem";
     } | {
         readonly _tag: "SelectedItem";
         readonly item: string;
@@ -114,15 +96,33 @@ export declare const update: (model: {
         readonly version: number;
     } | {
         readonly _tag: "MovedPointerOverItem";
-        readonly index: number;
         readonly screenX: number;
         readonly screenY: number;
+        readonly index: number;
+    } | {
+        readonly _tag: "CompletedLockScroll";
+    } | {
+        readonly _tag: "CompletedUnlockScroll";
+    } | {
+        readonly _tag: "CompletedSetupInert";
+    } | {
+        readonly _tag: "CompletedTeardownInert";
+    } | {
+        readonly _tag: "CompletedFocusButton";
     } | {
         readonly _tag: "CompletedFocusItems";
+    } | {
+        readonly _tag: "CompletedScrollIntoView";
+    } | {
+        readonly _tag: "CompletedClickItem";
     } | {
         readonly _tag: "IgnoredMouseClick";
     } | {
         readonly _tag: "SuppressedSpaceScroll";
+    } | {
+        readonly _tag: "AdvancedTransitionFrame";
+    } | {
+        readonly _tag: "EndedTransition";
     } | {
         readonly _tag: "DetectedButtonMovement";
     } | {
@@ -140,19 +140,19 @@ export type ViewConfig<Message, Item> = BaseViewConfig<Message, Item, Model>;
 export declare const view: <Message, Item>(config: Readonly<{
     model: {
         readonly id: string;
-        readonly orientation: "Horizontal" | "Vertical";
         readonly isOpen: boolean;
         readonly isAnimated: boolean;
         readonly isModal: boolean;
+        readonly orientation: "Vertical" | "Horizontal";
         readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
         readonly maybeActiveItemIndex: Option.Option<number>;
         readonly activationTrigger: "Pointer" | "Keyboard";
+        readonly searchQuery: string;
+        readonly searchVersion: number;
         readonly maybeLastPointerPosition: Option.Option<{
             readonly screenX: number;
             readonly screenY: number;
         }>;
-        readonly searchQuery: string;
-        readonly searchVersion: number;
         readonly maybeLastButtonPointerType: Option.Option<string>;
     } & {
         readonly maybeSelectedItem: Option.Option<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "A frontend framework for TypeScript, built on Effect, using The Elm Architecture",
   "type": "module",
   "main": "./dist/index.js",