foldkit 0.31.0 → 0.33.0

package/README.md

@@ -10,7 +10,7 @@
   <a href="https://www.npmjs.com/package/foldkit"><img src="https://img.shields.io/npm/v/foldkit" alt="npm version"></a>
 </p>
 
-<h3 align="center">Beautifully boring frontend applications.</h3>
+<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>
@@ -20,8 +20,8 @@
 
 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.
 
-> [!WARNING]
-> Foldkit is pre-1.0. APIs may change between minor versions.
+> [!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.
 
 ## Who It's For
 
@@ -153,17 +153,17 @@ 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
-- **[Stopwatch](https://github.com/devinjameson/foldkit/blob/main/examples/stopwatch/src/main.ts)** — Timer with start/stop/reset
-- **[Weather](https://github.com/devinjameson/foldkit/blob/main/examples/weather/src/main.ts)** — HTTP requests with async state handling
 - **[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
-- **[Shopping Cart](https://github.com/devinjameson/foldkit/blob/main/examples/shopping-cart/src/main.ts)** — Nested models and complex state
+- **[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
-- **[WebSocket Chat](https://github.com/devinjameson/foldkit/blob/main/examples/websocket-chat/src/main.ts)** — Managed Resources with WebSocket integration
 - **[Auth](https://github.com/devinjameson/foldkit/blob/main/examples/auth/src/main.ts)** — Authentication flow with Submodels and OutMessage
-- **[Query Sync](https://github.com/devinjameson/foldkit/blob/main/examples/query-sync/src/main.ts)** — URL query parameter sync with filtering and sorting
-- **[Error View](https://github.com/devinjameson/foldkit/blob/main/examples/error-view/src/main.ts)** — Custom error fallback UI
+- **[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
 
 ## License

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

@@ -0,0 +1,3 @@
+declare const overlayStyles = ":host {\n  --dt-bg: #1e1e2e;\n  --dt-surface-selected: #282839;\n  --dt-border: #585b70;\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}\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.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.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  color: var(--dt-text);\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-label {\n  position: relative;\n}\n.dt-tab-arrow {\n  position: absolute;\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-right: 5px;\n  font-size: 15px;\n  color: var(--dt-accent);\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-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-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}\n.dt-badge-accent {\n  border: none;\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.message-list > :last-child {\n  border-bottom: none;\n}\n\n/* JSON tree */\n.tree-row {\n  position: relative;\n  white-space: nowrap;\n  line-height: 1.5;\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  .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

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

package/dist/devtools/overlay-styles.js

@@ -0,0 +1,514 @@
+const overlayStyles = `:host {
+  --dt-bg: #1e1e2e;
+  --dt-surface-selected: #282839;
+  --dt-border: #585b70;
+  --dt-text: #cdd6f4;
+  --dt-text-muted: #9399b2;
+  --dt-accent: #cba6f7;
+  --dt-live: #a6e3a1;
+  --dt-paused: #fab387;
+  --dt-json-string: #a6e3a1;
+  --dt-json-number: #89b4fa;
+  --dt-json-boolean: #fab387;
+  --dt-json-null: #9399b2;
+  --dt-json-key: #89dceb;
+  --dt-json-tag: #cba6f7;
+  --dt-json-preview: #9399b2;
+  --dt-json-arrow: #9399b2;
+  --dt-tree-hover: #313244;
+  --dt-diff-changed: #74c7ec;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+button {
+  font: inherit;
+  color: inherit;
+}
+
+.fixed {
+  position: fixed;
+}
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.flex-1 {
+  flex: 1 1 0%;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.shrink-0 {
+  flex-shrink: 0;
+}
+.inline-block {
+  display: inline-block;
+}
+.gap-0\\.5 {
+  gap: 2px;
+}
+.gap-1\\.5 {
+  gap: 6px;
+}
+.gap-2 {
+  gap: 8px;
+}
+.gap-px {
+  gap: 1px;
+}
+.px-1 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.px-2 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.px-2\\.5 {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.px-3 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.py-0\\.5 {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.pt-1 {
+  padding-top: 4px;
+}
+.pl-1 {
+  padding-left: 4px;
+}
+.py-1 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.py-1\\.5 {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.py-px {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+.w-1\\.5 {
+  width: 6px;
+}
+.h-1\\.5 {
+  height: 6px;
+}
+.w-3 {
+  width: 12px;
+}
+.w-5 {
+  width: 20px;
+}
+.h-5 {
+  height: 20px;
+}
+.w-14 {
+  width: 56px;
+}
+.h-14 {
+  height: 56px;
+}
+.min-w-0 {
+  min-width: 0;
+}
+.min-w-5 {
+  min-width: 20px;
+}
+.min-h-0 {
+  min-height: 0;
+}
+/* Badge positions — flush against side edge */
+.dt-pos-br {
+  bottom: 16px;
+  right: 0;
+  border-radius: 6px 0 0 6px;
+}
+.dt-pos-bl {
+  bottom: 16px;
+  left: 0;
+  border-radius: 0 6px 6px 0;
+}
+.dt-pos-tr {
+  top: 16px;
+  right: 0;
+  border-radius: 6px 0 0 6px;
+}
+.dt-pos-tl {
+  top: 16px;
+  left: 0;
+  border-radius: 0 6px 6px 0;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.overflow-auto {
+  overflow: auto;
+}
+.overflow-y-auto {
+  overflow-y: auto;
+}
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rounded {
+  border-radius: 4px;
+}
+.rounded-lg {
+  border-radius: 8px;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.border {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--dt-border);
+}
+.border-b {
+  border-bottom: 1px solid var(--dt-border);
+}
+.border-t {
+  border-top: 1px solid var(--dt-border);
+}
+.border-r {
+  border-right: 1px solid var(--dt-border);
+}
+.border-l {
+  border-left: 1px solid var(--dt-border);
+}
+.border-none {
+  border: none;
+}
+.border-l-3 {
+  border-left: 3px solid transparent;
+}
+.border-dt-live {
+  border-color: var(--dt-live);
+}
+.selected {
+  background-color: var(--dt-surface-selected);
+}
+.dt-row:hover:not(.selected) {
+  background-color: var(--dt-tree-hover);
+}
+.dt-header-button:hover {
+  color: var(--dt-text);
+}
+.dt-resume-button:hover {
+  color: var(--dt-text);
+}
+.dt-tab-button {
+  position: relative;
+  background: transparent;
+  border: none;
+  border-right: 1px solid var(--dt-border);
+  outline: none;
+  flex: 1;
+}
+.dt-tab-label {
+  position: relative;
+}
+.dt-tab-arrow {
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 5px;
+  font-size: 15px;
+  color: var(--dt-accent);
+}
+.dt-tab-button:not(.dt-tab-active):hover {
+  color: var(--dt-text);
+  background-color: rgba(49, 50, 68, 0.3);
+}
+.font-sans {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+}
+.font-mono {
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+}
+.font-medium {
+  font-weight: 500;
+}
+.font-semibold {
+  font-weight: 600;
+}
+.text-xs {
+  font-size: 12px;
+}
+.text-2xs {
+  font-size: 10px;
+}
+.text-sm {
+  font-size: 11px;
+}
+.text-base {
+  font-size: 13px;
+}
+.text-md {
+  font-size: 15px;
+}
+.text-lg {
+  font-size: 20px;
+}
+.text-xl {
+  font-size: 26px;
+}
+.italic {
+  font-style: italic;
+}
+.text-right {
+  text-align: right;
+}
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+.leading-snug {
+  line-height: 1.35;
+}
+.bg-dt-bg {
+  background-color: var(--dt-bg);
+}
+.bg-dt-live {
+  background-color: var(--dt-live);
+}
+.bg-transparent {
+  background-color: transparent;
+}
+.text-dt {
+  color: var(--dt-text);
+}
+.text-dt-muted {
+  color: var(--dt-text-muted);
+}
+.text-dt-accent {
+  color: var(--dt-accent);
+}
+.text-dt-live {
+  color: var(--dt-live);
+}
+.text-dt-paused {
+  color: var(--dt-paused);
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.outline-none {
+  outline: none;
+}
+.transition-colors {
+  transition-property: color, background-color, border-color;
+  transition-duration: 100ms;
+  transition-timing-function: ease;
+}
+
+/* Panel */
+.dt-panel {
+  width: 360px;
+  height: 480px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  z-index: 99998;
+}
+/* Panel positions */
+.dt-panel-br {
+  bottom: 16px;
+  right: 28px;
+}
+.dt-panel-bl {
+  bottom: 16px;
+  left: 28px;
+}
+.dt-panel-tr {
+  top: 16px;
+  right: 28px;
+}
+.dt-panel-tl {
+  top: 16px;
+  left: 28px;
+}
+.dt-panel-wide {
+  width: 720px;
+}
+.dt-message-pane {
+  width: 320px;
+  flex-shrink: 0;
+}
+.dt-badge {
+  z-index: 99999;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
+  transition: background-color 150ms ease;
+}
+.dt-badge-accent {
+  border: none;
+}
+.dt-badge-accent:hover {
+  background-color: #252538;
+}
+.dt-badge-paused {
+  background-color: var(--dt-paused);
+  color: var(--dt-bg);
+  border: none;
+}
+.dt-badge-paused:hover {
+  background-color: #e0a070;
+}
+.message-list > :last-child {
+  border-bottom: none;
+}
+
+/* JSON tree */
+.tree-row {
+  position: relative;
+  white-space: nowrap;
+  line-height: 1.5;
+  padding-right: 8px;
+}
+.tree-row-expandable:hover {
+  background-color: var(--dt-tree-hover);
+}
+.inspector-tree {
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+}
+.json-key {
+  color: var(--dt-json-key);
+}
+.json-string {
+  color: var(--dt-json-string);
+}
+.json-number {
+  color: var(--dt-json-number);
+}
+.json-boolean {
+  color: var(--dt-json-boolean);
+}
+.json-null {
+  color: var(--dt-json-null);
+}
+.json-tag {
+  color: var(--dt-json-tag);
+  margin-right: 4px;
+}
+.json-preview {
+  color: var(--dt-json-preview);
+}
+.json-arrow {
+  color: var(--dt-json-arrow);
+  width: 10px;
+  height: 10px;
+  user-select: none;
+}
+
+/* Diff */
+.diff-changed {
+  background-color: rgba(116, 199, 236, 0.06);
+}
+.diff-dot {
+  position: absolute;
+  left: 3px;
+  width: 5px;
+  height: 5px;
+  border-radius: 9999px;
+  background-color: var(--dt-diff-changed);
+}
+.diff-dot-inline {
+  width: 5px;
+  height: 5px;
+  border-radius: 9999px;
+  background-color: var(--dt-diff-changed);
+  flex-shrink: 0;
+}
+.dot-column {
+  width: 5px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pause-column {
+  width: 8px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dt-pause-icon {
+  width: 8px;
+  height: 8px;
+  color: var(--dt-paused);
+}
+
+/* Interaction blocker — covers the app while time-travelling */
+.dt-interaction-blocker {
+  position: fixed;
+  inset: 0;
+  z-index: 99997;
+  cursor: not-allowed;
+}
+
+/* Mobile */
+@media (max-width: 767px) {
+  .dt-panel {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+    border: none;
+  }
+  .dt-panel-wide {
+    width: 100%;
+  }
+  .dt-content {
+    flex-direction: column;
+  }
+  .dt-message-pane {
+    width: 100%;
+    max-height: 40%;
+    border-bottom: 1px solid var(--dt-border);
+  }
+  .dt-inspector-pane {
+    border-left: none;
+  }
+}
+`;
+export { overlayStyles };

package/dist/devtools/overlay.d.ts

@@ -0,0 +1,5 @@
+import { Effect, Option } from 'effect';
+import type { DevtoolsMode, DevtoolsPosition } from '../runtime/runtime';
+import { type DevtoolsStore } from './store';
+export declare const createOverlay: (store: DevtoolsStore, position: DevtoolsPosition, mode: DevtoolsMode, maybeMessage: Option.Option<string>) => Effect.Effect<void, never, never>;
+//# sourceMappingURL=overlay.d.ts.map

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

@@ -0,0 +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;AAKxE,OAAO,EAAE,KAAK,aAAa,EAA+B,MAAM,SAAS,CAAA;AAsrCzE,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,cAAc,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCAiDjC,CAAA"}