foldkit 0.33.5 → 0.34.0

package/README.md

@@ -1,8 +1,8 @@
 <p align="center">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/devinjameson/foldkit/main/packages/website/public/logo-dark.svg">
-    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/devinjameson/foldkit/main/packages/website/public/logo.svg">
-    <img src="https://raw.githubusercontent.com/devinjameson/foldkit/main/packages/website/public/logo.svg" alt="Foldkit" width="350">
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/foldkit/foldkit/main/packages/website/public/logo-dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/foldkit/foldkit/main/packages/website/public/logo.svg">
+    <img src="https://raw.githubusercontent.com/foldkit/foldkit/main/packages/website/public/logo.svg" alt="Foldkit" width="350">
   </picture>
 </p>
 
@@ -13,12 +13,12 @@
 <h3 align="center">The frontend framework for correctness.</h3>
 
 <p align="center">
-  <a href="https://foldkit.dev"><strong>Documentation</strong></a> · <a href="https://github.com/devinjameson/foldkit#examples"><strong>Examples</strong></a> · <a href="https://foldkit.dev/getting-started"><strong>Getting Started</strong></a>
+  <a href="https://foldkit.dev"><strong>Documentation</strong></a> · <a href="https://github.com/foldkit/foldkit#examples"><strong>Examples</strong></a> · <a href="https://foldkit.dev/getting-started"><strong>Getting Started</strong></a>
 </p>
 
 ---
 
-Foldkit is an [Elm Architecture](https://guide.elm-lang.org/architecture/) framework for TypeScript, powered by [Effect](https://effect.website/). One Model, one update function, one way to do things. No hooks, no local state, no hidden mutations.
+Foldkit is a frontend framework for TypeScript, built on [Effect](https://effect.website/), using [The Elm Architecture](https://guide.elm-lang.org/architecture/). One Model, one update function, one way to do things. No hooks, no local state, no hidden mutations.
 
 > [!NOTE]
 > Foldkit is pre-1.0. The core API is stable, but breaking changes may occur in minor releases. See the [changelog](./CHANGELOG.md) for details.
@@ -129,7 +129,7 @@ const element = Runtime.makeElement({
 Runtime.run(element)
 ```
 
-Source: [examples/counter/src/main.ts](https://github.com/devinjameson/foldkit/blob/main/examples/counter/src/main.ts)
+Source: [examples/counter/src/main.ts](https://github.com/foldkit/foldkit/blob/main/examples/counter/src/main.ts)
 
 ## What Ships With Foldkit
 
@@ -153,19 +153,19 @@ This is what makes Foldkit unusually AI-friendly. The same property that makes t
 
 ## Examples
 
-- **[Counter](https://github.com/devinjameson/foldkit/blob/main/examples/counter/src/main.ts)** — Increment/decrement with reset
-- **[Todo](https://github.com/devinjameson/foldkit/blob/main/examples/todo/src/main.ts)** — CRUD operations with localStorage persistence
-- **[Stopwatch](https://github.com/devinjameson/foldkit/blob/main/examples/stopwatch/src/main.ts)** — Timer with start/stop/reset
-- **[Error View](https://github.com/devinjameson/foldkit/blob/main/examples/error-view/src/main.ts)** — Custom error fallback UI
-- **[Form](https://github.com/devinjameson/foldkit/blob/main/examples/form/src/main.ts)** — Form validation with async email checking
-- **[Weather](https://github.com/devinjameson/foldkit/blob/main/examples/weather/src/main.ts)** — HTTP requests with async state handling
-- **[Routing](https://github.com/devinjameson/foldkit/blob/main/examples/routing/src/main.ts)** — URL routing with parser combinators
-- **[Query Sync](https://github.com/devinjameson/foldkit/blob/main/examples/query-sync/src/main.ts)** — URL query parameter sync with filtering and sorting
-- **[Snake](https://github.com/devinjameson/foldkit/blob/main/examples/snake/src/main.ts)** — Classic game built with Subscriptions
-- **[Auth](https://github.com/devinjameson/foldkit/blob/main/examples/auth/src/main.ts)** — Authentication flow with Submodels and OutMessage
-- **[Shopping Cart](https://github.com/devinjameson/foldkit/blob/main/examples/shopping-cart/src/main.ts)** — Nested models and complex state
-- **[WebSocket Chat](https://github.com/devinjameson/foldkit/blob/main/examples/websocket-chat/src/main.ts)** — Managed Resources with WebSocket integration
-- **[Typing Game](https://github.com/devinjameson/foldkit/tree/main/packages/typing-game)** — Multiplayer typing game with Effect RPC backend
+- **[Counter](https://github.com/foldkit/foldkit/blob/main/examples/counter/src/main.ts)** — Increment/decrement with reset
+- **[Todo](https://github.com/foldkit/foldkit/blob/main/examples/todo/src/main.ts)** — CRUD operations with localStorage persistence
+- **[Stopwatch](https://github.com/foldkit/foldkit/blob/main/examples/stopwatch/src/main.ts)** — Timer with start/stop/reset
+- **[Error View](https://github.com/foldkit/foldkit/blob/main/examples/error-view/src/main.ts)** — Custom error fallback UI
+- **[Form](https://github.com/foldkit/foldkit/blob/main/examples/form/src/main.ts)** — Form validation with async email checking
+- **[Weather](https://github.com/foldkit/foldkit/blob/main/examples/weather/src/main.ts)** — HTTP requests with async state handling
+- **[Routing](https://github.com/foldkit/foldkit/blob/main/examples/routing/src/main.ts)** — URL routing with parser combinators
+- **[Query Sync](https://github.com/foldkit/foldkit/blob/main/examples/query-sync/src/main.ts)** — URL query parameter sync with filtering and sorting
+- **[Snake](https://github.com/foldkit/foldkit/blob/main/examples/snake/src/main.ts)** — Classic game built with Subscriptions
+- **[Auth](https://github.com/foldkit/foldkit/blob/main/examples/auth/src/main.ts)** — Authentication flow with Submodels and OutMessage
+- **[Shopping Cart](https://github.com/foldkit/foldkit/blob/main/examples/shopping-cart/src/main.ts)** — Nested models and complex state
+- **[WebSocket Chat](https://github.com/foldkit/foldkit/blob/main/examples/websocket-chat/src/main.ts)** — Managed Resources with WebSocket integration
+- **[Typing Game](https://github.com/foldkit/foldkit/tree/main/packages/typing-game)** — Multiplayer typing game with Effect RPC backend
 
 ## License
 

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

@@ -1,3 +1,3 @@
-declare const overlayStyles = ":host {\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\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.border-l-3 {\n  border-left: 3px solid transparent;\n}\n.border-dt-live {\n  border-color: var(--dt-live);\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  --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.border-l-3 {\n  border-left: 3px solid transparent;\n}\n.border-dt-live {\n  border-color: var(--dt-live);\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";
 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,67QA6gBlB,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,k/QAghBlB,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/devtools/overlay-styles.js

@@ -178,6 +178,9 @@ ul {
 .overflow-y-auto {
   overflow-y: auto;
 }
+.overscroll-none {
+  overscroll-behavior: none;
+}
 
 .truncate {
   overflow: hidden;

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,EAIN,MAAM,EAQP,MAAM,QAAQ,CAAA;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAMxE,OAAO,EAAE,KAAK,aAAa,EAA+B,MAAM,SAAS,CAAA;AAwwCzE,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,EAIN,MAAM,EAQP,MAAM,QAAQ,CAAA;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAMxE,OAAO,EAAE,KAAK,aAAa,EAA+B,MAAM,SAAS,CAAA;AA2yCzE,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCA4ChC,CAAA"}

package/dist/devtools/overlay.js

@@ -1,7 +1,7 @@
 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 { OptionExt } from '../effectExtensions';
-import { html } from '../html';
+import { createKeyedLazy, html } from '../html';
 import { m } from '../message';
 import { makeElement } from '../runtime/runtime';
 import { makeSubscriptions } from '../runtime/subscription';
@@ -352,6 +352,8 @@ const PANEL_POSITION_CLASS = {
 };
 const makeView = (position, mode, maybeBanner) => {
     const { div, header, span, ul, button, svg, path, keyed, Class, Style, OnClick, AriaHidden, Xmlns, Fill, ViewBox, StrokeWidth, Stroke, StrokeLinecap, StrokeLinejoin, D, } = html();
+    const lazyTreeNode = createKeyedLazy();
+    const lazyMessageRow = createKeyedLazy();
     // JSON TREE
     const leafValueView = (value) => M.value(value).pipe(M.when(Predicate.isNull, () => span([Class('json-null italic')], ['null'])), M.when(Predicate.isUndefined, () => span([Class('json-null italic')], ['undefined'])), M.when(Predicate.isString, stringValue => span([Class('json-string')], [`"${stringValue}"`])), M.when(Predicate.isNumber, numberValue => span([Class('json-number')], [String(numberValue)])), M.when(Predicate.isBoolean, booleanValue => span([Class('json-boolean')], [String(booleanValue)])), M.orElse(unknownValue => span([Class('json-null')], [String(unknownValue)])));
     const keyView = (key) => span([Class('json-key')], [`${key}:\u00a0`]);
@@ -375,70 +377,103 @@ const makeView = (position, mode, maybeBanner) => {
     const tagLabelView = (tag) => span([Class('json-tag')], [tag]);
     const diffDotView = span([Class('diff-dot')], []);
     const inlineDiffDotView = span([Class('diff-dot-inline')], []);
-    const flattenTree = (value, treePath, expandedPaths, changedPaths, affectedPaths, depth, maybeKey, accumulator, indentRootChildren) => {
+    const flattenTree = ({ value, treePath, depth, key, ...shared }) => {
+        const { expandedPaths, changedPaths, affectedPaths, accumulator, indentRootChildren, } = shared;
         const isRoot = treePath === 'root';
         const nodeIsExpandable = isExpandable(value);
         const isExpanded = nodeIsExpandable && (isRoot || HashSet.has(expandedPaths, treePath));
-        const maybeTag = pipe(value, Option.liftPredicate(isTagged), Option.map(({ _tag }) => _tag));
+        const tag = isTagged(value) ? value._tag : '';
         accumulator.push({
             value,
             treePath,
             depth,
-            maybeKey,
+            key,
             isExpandable: nodeIsExpandable,
             isExpanded,
             isChanged: HashSet.has(changedPaths, treePath),
             isAffected: HashSet.has(affectedPaths, treePath),
-            maybeTag,
+            tag,
         });
         if (!isExpanded) {
             return;
         }
         const childDepth = isRoot && !indentRootChildren ? depth : depth + 1;
         if (Array.isArray(value)) {
-            value.forEach((item, arrayIndex) => flattenTree(item, `${treePath}.${arrayIndex}`, expandedPaths, changedPaths, affectedPaths, childDepth, Option.some(String(arrayIndex)), accumulator, indentRootChildren));
+            value.forEach((item, arrayIndex) => flattenTree({
+                ...shared,
+                value: item,
+                treePath: `${treePath}.${arrayIndex}`,
+                depth: childDepth,
+                key: String(arrayIndex),
+            }));
         }
         else if (Predicate.isReadonlyRecord(value)) {
-            pipe(value, Record.toEntries, Array_.filter(([key]) => key !== '_tag'), Array_.forEach(([key, childValue]) => flattenTree(childValue, `${treePath}.${key}`, expandedPaths, changedPaths, affectedPaths, childDepth, Option.some(key), accumulator, indentRootChildren)));
+            pipe(value, Record.toEntries, Array_.filter(([entryKey]) => entryKey !== '_tag'), Array_.forEach(([entryKey, childValue]) => flattenTree({
+                ...shared,
+                value: childValue,
+                treePath: `${treePath}.${entryKey}`,
+                depth: childDepth,
+                key: entryKey,
+            })));
         }
     };
-    const flatNodeView = (node) => {
-        const indent = Style({ paddingLeft: `${node.depth * TREE_INDENT_PX}px` });
-        const hasDiffDot = node.isChanged || node.isAffected;
-        if (!node.isExpandable) {
+    const flatNodeView = (value, treePath, depth, key, nodeIsExpandable, isExpanded, isChanged, isAffected, tag) => {
+        const indent = Style({ paddingLeft: `${depth * TREE_INDENT_PX}px` });
+        const hasDiffDot = isChanged || isAffected;
+        if (!nodeIsExpandable) {
             return div([
-                Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', node.isChanged && 'diff-changed')),
+                Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', isChanged && 'diff-changed')),
                 indent,
             ], [
                 ...(hasDiffDot ? [diffDotView] : []),
-                ...Array_.getSomes([Option.map(node.maybeKey, keyView)]),
-                leafValueView(node.value),
+                ...(String_.isNonEmpty(key) ? [keyView(key)] : []),
+                leafValueView(value),
             ]);
         }
-        const isRoot = node.treePath === 'root';
-        const preview = node.isExpanded
-            ? Array.isArray(node.value)
-                ? `(${node.value.length})`
+        const isRoot = treePath === 'root';
+        const preview = isExpanded
+            ? Array.isArray(value)
+                ? `(${value.length})`
                 : ''
-            : collapsedPreview(node.value);
+            : collapsedPreview(value);
         return div([
-            Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', !isRoot && 'tree-row-expandable cursor-pointer', node.isChanged && 'diff-changed')),
+            Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', !isRoot && 'tree-row-expandable cursor-pointer', isChanged && 'diff-changed')),
             indent,
-            ...(isRoot ? [] : [OnClick(ToggledTreeNode({ path: node.treePath }))]),
+            ...(isRoot ? [] : [OnClick(ToggledTreeNode({ path: treePath }))]),
         ], [
-            ...(isRoot ? [] : [arrowView(node.isExpanded)]),
+            ...(isRoot ? [] : [arrowView(isExpanded)]),
             ...(!isRoot && hasDiffDot ? [diffDotView] : []),
-            ...Array_.getSomes([
-                Option.map(node.maybeKey, keyView),
-                Option.map(node.maybeTag, tagLabelView),
-            ]),
+            ...(String_.isNonEmpty(key) ? [keyView(key)] : []),
+            ...(String_.isNonEmpty(tag) ? [tagLabelView(tag)] : []),
             span([Class('json-preview')], [preview]),
         ]);
     };
     const treeView = (value, rootPath, expandedPaths, changedPaths, affectedPaths, maybeRootLabel, indentRootChildren) => {
         const nodes = [];
-        flattenTree(value, rootPath, expandedPaths, changedPaths, affectedPaths, 0, maybeRootLabel, nodes, indentRootChildren);
-        return div([Class('inspector-tree flex-1 overflow-auto min-h-0 min-w-0')], nodes.map(flatNodeView));
+        flattenTree({
+            value,
+            treePath: rootPath,
+            expandedPaths,
+            changedPaths,
+            affectedPaths,
+            depth: 0,
+            key: Option.getOrElse(maybeRootLabel, () => ''),
+            accumulator: nodes,
+            indentRootChildren,
+        });
+        return div([
+            Class('inspector-tree flex-1 overflow-auto min-h-0 min-w-0 overscroll-none'),
+        ], nodes.map(node => lazyTreeNode(node.treePath, flatNodeView, [
+            node.value,
+            node.treePath,
+            node.depth,
+            node.key,
+            node.isExpandable,
+            node.isExpanded,
+            node.isChanged,
+            node.isAffected,
+            node.tag,
+        ])));
     };
     const inspectedTimestamp = (model) => {
         const lastIndex = Array_.isEmptyReadonlyArray(model.entries)
@@ -488,12 +523,15 @@ const makeView = (position, mode, maybeBanner) => {
             model: model.inspectorTabs,
             toMessage: tabsMessage => GotInspectorTabsMessage({ message: tabsMessage }),
             tabs: INSPECTOR_TABS,
-            className: 'flex flex-col flex-1 min-h-0',
-            tabListClassName: 'flex border-b shrink-0',
+            tabListAriaLabel: 'Inspector tabs',
+            attributes: [Class('flex flex-col flex-1 min-h-0')],
+            tabListAttributes: [Class('flex border-b shrink-0')],
             tabToConfig: (tab, { isActive }) => ({
-                buttonClassName: clsx('dt-tab-button cursor-pointer text-base font-mono px-3 py-1', isActive ? 'text-dt dt-tab-active' : 'text-dt-muted'),
+                buttonAttributes: [
+                    Class(clsx('dt-tab-button cursor-pointer text-base font-mono px-3 py-1', isActive ? 'text-dt dt-tab-active' : 'text-dt-muted')),
+                ],
                 buttonContent: span([], [tab]),
-                panelClassName: 'flex flex-col flex-1 min-h-0 min-w-0',
+                panelAttributes: [Class('flex flex-col flex-1 min-h-0 min-w-0')],
                 panelContent: Option.match(model.maybeInspectedModel, {
                     onNone: () => emptyInspectorView,
                     onSome: inspectedModel => inspectorTabContent(model, tab, inspectedModel),
@@ -606,9 +644,16 @@ const makeView = (position, mode, maybeBanner) => {
             const absoluteIndex = model.startIndex + arrayIndex;
             const isSelected = selectedIndex === absoluteIndex;
             const isPausedHere = model.isPaused && model.pausedAtIndex === absoluteIndex;
-            return messageRowView(entry.tag, absoluteIndex, isSelected, isPausedHere, entry.timestamp - baseTimestamp, entry.isModelChanged);
+            return lazyMessageRow(String(absoluteIndex), messageRowView, [
+                entry.tag,
+                absoluteIndex,
+                isSelected,
+                isPausedHere,
+                entry.timestamp - baseTimestamp,
+                entry.isModelChanged,
+            ]);
         }), Array_.reverse);
-        return ul([Class('message-list flex-1 overflow-y-auto min-h-0')], [
+        return ul([Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none')], [
             ...messageRows,
             initRowView(isInitSelected, model.isPaused && model.pausedAtIndex === INIT_INDEX),
         ]);