@foldkit/devtools 0.150.0 → 0.151.0-canary.4c91a3b5da2b

package/dist/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAEN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,aAAa,EAGlB,KAAK,WAAW,EAChB,KAAK,UAAU,EAKhB,MAAM,uBAAuB,CAAA;AAU9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFAsDzB,CAAC;;;;;;;;;;;;;;;;;AAqO7C,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGrB,CAAA;AAEF,eAAO,MAAM,YAAY;;iBAGvB,CAAA;AAgCF,eAAO,MAAM,oBAAoB;;;;;iBAkB/B,CAAA;AAuBF,eAAO,MAAM,gBAAgB;;;;;;;;wBAS3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;wBAIvB,CAAA;AAEF,eAAO,MAAM,aAAa;;;;;;wBAOxB,CAAA;AAEF,eAAO,MAAM,MAAM;;wBAOjB,CAAA;AAEF,eAAO,MAAM,KAAK;;wBAOhB,CAAA;AAEF,eAAO,MAAM,WAAW;;6BAUtB,CAAA;AAihEF,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAmFhC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAEN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAGf,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,aAAa,EAGlB,KAAK,WAAW,EAChB,KAAK,UAAU,EAKhB,MAAM,uBAAuB,CAAA;AAU9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFAsD1D,CAAC;;;;;;;;;;;;;;;;;AA+SZ,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGrB,CAAA;AAEF,eAAO,MAAM,YAAY;;iBAGvB,CAAA;AAgCF,eAAO,MAAM,oBAAoB;;;;;iBAkB/B,CAAA;AAuBF,eAAO,MAAM,gBAAgB;;;;;;;;wBAS3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;wBAIvB,CAAA;AAEF,eAAO,MAAM,aAAa;;;;;;wBAOxB,CAAA;AAEF,eAAO,MAAM,MAAM;;wBAOjB,CAAA;AAEF,eAAO,MAAM,KAAK;;wBAOhB,CAAA;AAEF,eAAO,MAAM,WAAW;;6BAUtB,CAAA;AA+6DF,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAmFhC,CAAA"}

package/dist/overlay.js

@@ -2,6 +2,7 @@ import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { clsx } from 'clsx';
 import { Array as Array_, Context, Effect, Function, HashSet, Match as M, Number as Number_, Option, Order, Predicate, Queue, Record, Schema as S, Stream, String as String_, SubscriptionRef, pipe, } from 'effect';
 import { KeyValueStore } from 'effect/unstable/persistence';
+import { Update } from 'foldkit';
 import * as Command from 'foldkit/command';
 import { DEVTOOLS_HOST_ID, GOT_MESSAGE_PATTERN, INIT_INDEX, extractSubmodelInfo, isTagged, latestEntryIndex, toInspectableValue, } from 'foldkit/devtools-host';
 import { lockScroll, unlockScroll } from 'foldkit/dom';
@@ -208,6 +209,52 @@ const objectPreview = (value) => __foldkitBrandViewResult((pipe(value, Record.ke
     },
 }))), "@foldkit/devtools/overlay.js#objectPreview");
 const collapsedPreview = (value) => __foldkitBrandViewResult((M.value(value).pipe(M.when(Array.isArray, array => __foldkitBrandViewResult((`(${array.length})`), "@foldkit/devtools/overlay.js#anonymous~11")), M.when(Predicate.isObject, objectPreview), M.orElse(() => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~12")))), "@foldkit/devtools/overlay.js#collapsedPreview");
+const foldInspectorTabsOutMessage = M.type().pipe(M.withReturnType(), M.tagsExhaustive({
+    Selected: ({ value }) => __foldkitBrandViewResult((model => (__foldkitBrandViewResult(({
+        model: evo(model, { activeInspectorTab: () => __foldkitBrandViewResult((value), "@foldkit/devtools/overlay.js#activeInspectorTab") }),
+    }), "@foldkit/devtools/overlay.js#anonymous~13"))), "@foldkit/devtools/overlay.js#Selected"),
+}));
+const foldInspectorTabs = Update.foldChild({
+    update: InspectorTabs.update,
+    read: (model) => __foldkitBrandViewResult((Option.some(model.inspectorTabs)), "@foldkit/devtools/overlay.js#read"),
+    write: (model, nextInspectorTabs) => __foldkitBrandViewResult((evo(model, { inspectorTabs: () => __foldkitBrandViewResult((nextInspectorTabs), "@foldkit/devtools/overlay.js#inspectorTabs") })), "@foldkit/devtools/overlay.js#write"),
+    toParentMessage: message => __foldkitBrandViewResult((Message.GotInspectorTabsMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage"),
+    foldOutMessage: foldInspectorTabsOutMessage,
+});
+const foldSubmodelFilterOutMessage = M.type().pipe(M.withReturnType(), M.tagsExhaustive({
+    Selected: ({ value }) => __foldkitBrandViewResult((model => (__foldkitBrandViewResult(({
+        model: evo(model, {
+            maybeSubmodelFilter: () => __foldkitBrandViewResult((Option.liftPredicate(value, String_.isNonEmpty)), "@foldkit/devtools/overlay.js#maybeSubmodelFilter"),
+        }),
+    }), "@foldkit/devtools/overlay.js#anonymous~14"))), "@foldkit/devtools/overlay.js#Selected~2"),
+}));
+const foldSubmodelFilter = Update.foldChild({
+    update: SubmodelFilterListbox.update,
+    read: (model) => __foldkitBrandViewResult((Option.some(model.submodelFilterListbox)), "@foldkit/devtools/overlay.js#read~2"),
+    write: (model, nextSubmodelFilterListbox) => __foldkitBrandViewResult((evo(model, {
+        submodelFilterListbox: () => __foldkitBrandViewResult((nextSubmodelFilterListbox), "@foldkit/devtools/overlay.js#submodelFilterListbox"),
+    })), "@foldkit/devtools/overlay.js#write~2"),
+    toParentMessage: message => __foldkitBrandViewResult((Message.GotSubmodelFilterMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~2"),
+    foldOutMessage: foldSubmodelFilterOutMessage,
+});
+// NOTE: Pointer Messages update the thumb immediately, but jumping to and
+// inspecting the corresponding state is expensive. Keep only the latest host
+// index until TickedScrubFrame flushes one navigation on the next frame.
+const foldScrubberSliderOutMessage = M.type().pipe(M.withReturnType(), M.tagsExhaustive({
+    ChangedValue: ({ value }) => __foldkitBrandViewResult((model => (__foldkitBrandViewResult(({
+        model: evo(model, {
+            scrubberValue: () => __foldkitBrandViewResult((value), "@foldkit/devtools/overlay.js#scrubberValue"),
+            maybePendingScrubIndex: () => __foldkitBrandViewResult((Option.some(sliderValueToHostIndex(value, model.startIndex))), "@foldkit/devtools/overlay.js#maybePendingScrubIndex"),
+        }),
+    }), "@foldkit/devtools/overlay.js#anonymous~15"))), "@foldkit/devtools/overlay.js#ChangedValue"),
+}));
+const foldScrubberSlider = Update.foldChild({
+    update: Slider.update,
+    read: (model) => __foldkitBrandViewResult((Option.some(model.scrubberSlider)), "@foldkit/devtools/overlay.js#read~3"),
+    write: (model, nextScrubberSlider) => __foldkitBrandViewResult((evo(model, { scrubberSlider: () => __foldkitBrandViewResult((nextScrubberSlider), "@foldkit/devtools/overlay.js#scrubberSlider") })), "@foldkit/devtools/overlay.js#write~3"),
+    toParentMessage: message => __foldkitBrandViewResult((Message.GotScrubberSliderMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~3"),
+    foldOutMessage: foldScrubberSliderOutMessage,
+});
 class StoreService extends Context.Service()('foldkit/DevToolsStore') {
 }
 class ShadowRootService extends Context.Service()('foldkit/DevToolsShadowRoot') {
@@ -234,8 +281,8 @@ const DEFAULT_PERSISTED_STATE = {
 const readPersistedState = Effect.gen(function* () {
     const store = yield* KeyValueStore.KeyValueStore;
     const json = yield* Effect.fromOption(Option.fromNullishOr(yield* store.get(DEVTOOLS_STORAGE_KEY)));
-    return __foldkitBrandViewResult((yield* S.decodeEffect(DevToolsPersistedStateJson)(json)), "@foldkit/devtools/overlay.js#anonymous~13");
-}).pipe(Effect.catch(() => __foldkitBrandViewResult((Effect.succeed(DEFAULT_PERSISTED_STATE)), "@foldkit/devtools/overlay.js#anonymous~14")), Effect.provide(BrowserKeyValueStore.layerLocalStorage));
+    return __foldkitBrandViewResult((yield* S.decodeEffect(DevToolsPersistedStateJson)(json)), "@foldkit/devtools/overlay.js#anonymous~16");
+}).pipe(Effect.catch(() => __foldkitBrandViewResult((Effect.succeed(DEFAULT_PERSISTED_STATE)), "@foldkit/devtools/overlay.js#anonymous~17")), Effect.provide(BrowserKeyValueStore.layerLocalStorage));
 export const PersistDevToolsState = Command.define('PersistDevToolsState', {
     args: { isOpen: S.Boolean, isFlattened: S.Boolean },
     messages: [Message.CompletedPersistDevToolsState],
@@ -246,19 +293,19 @@ export const PersistDevToolsState = Command.define('PersistDevToolsState', {
             isFlattened,
         });
         yield* store.set(DEVTOOLS_STORAGE_KEY, json);
-        return __foldkitBrandViewResult((Message.CompletedPersistDevToolsState()), "@foldkit/devtools/overlay.js#anonymous~15");
-    }).pipe(Effect.catch(() => __foldkitBrandViewResult((Effect.succeed(Message.CompletedPersistDevToolsState())), "@foldkit/devtools/overlay.js#anonymous~16")), Effect.provide(BrowserKeyValueStore.layerLocalStorage))), "@foldkit/devtools/overlay.js#execute"),
+        return __foldkitBrandViewResult((Message.CompletedPersistDevToolsState()), "@foldkit/devtools/overlay.js#anonymous~18");
+    }).pipe(Effect.catch(() => __foldkitBrandViewResult((Effect.succeed(Message.CompletedPersistDevToolsState())), "@foldkit/devtools/overlay.js#anonymous~19")), Effect.provide(BrowserKeyValueStore.layerLocalStorage))), "@foldkit/devtools/overlay.js#execute"),
 });
 const buildInspectionFromModel = (index, model) => __foldkitBrandViewResult((Effect.gen(function* () {
     const store = yield* StoreService;
     const maybeMessage = yield* store.getMessageAtIndex(index);
     const diff = yield* store.getDiffAtIndex(index);
-    return __foldkitBrandViewResult((Message.ReceivedInspectedState({ model, maybeMessage, ...diff })), "@foldkit/devtools/overlay.js#anonymous~17");
+    return __foldkitBrandViewResult((Message.ReceivedInspectedState({ model, maybeMessage, ...diff })), "@foldkit/devtools/overlay.js#anonymous~20");
 })), "@foldkit/devtools/overlay.js#buildInspectionFromModel");
 const buildInspectionEffect = (index) => __foldkitBrandViewResult((Effect.gen(function* () {
     const store = yield* StoreService;
     const model = yield* store.getModelAtIndex(index);
-    return __foldkitBrandViewResult((yield* buildInspectionFromModel(index, model)), "@foldkit/devtools/overlay.js#anonymous~18");
+    return __foldkitBrandViewResult((yield* buildInspectionFromModel(index, model)), "@foldkit/devtools/overlay.js#anonymous~21");
 })), "@foldkit/devtools/overlay.js#buildInspectionEffect");
 // NOTE: jump and inspect both need the model at `index`. Resolving it twice
 // (once to render the host, once to feed the inspector) replays the segment
@@ -272,7 +319,7 @@ export const JumpToAndInspect = Command.define('JumpToAndInspect', {
     execute: ({ index }) => __foldkitBrandViewResult((Effect.gen(function* () {
         const store = yield* StoreService;
         const model = yield* store.jumpTo(index);
-        return __foldkitBrandViewResult((yield* buildInspectionFromModel(index, model)), "@foldkit/devtools/overlay.js#anonymous~19");
+        return __foldkitBrandViewResult((yield* buildInspectionFromModel(index, model)), "@foldkit/devtools/overlay.js#anonymous~22");
     })), "@foldkit/devtools/overlay.js#execute~2"),
 });
 export const InspectState = Command.define('InspectState', {
@@ -285,7 +332,7 @@ export const InspectLatest = Command.define('InspectLatest', {
     execute: Effect.gen(function* () {
         const store = yield* StoreService;
         const state = yield* SubscriptionRef.get(store.stateRef);
-        return __foldkitBrandViewResult((yield* buildInspectionEffect(latestEntryIndex(state))), "@foldkit/devtools/overlay.js#anonymous~20");
+        return __foldkitBrandViewResult((yield* buildInspectionEffect(latestEntryIndex(state))), "@foldkit/devtools/overlay.js#anonymous~23");
     }),
 });
 export const Resume = Command.define('Resume', {
@@ -293,7 +340,7 @@ export const Resume = Command.define('Resume', {
     execute: Effect.gen(function* () {
         const store = yield* StoreService;
         yield* store.resume;
-        return __foldkitBrandViewResult((Message.CompletedResume()), "@foldkit/devtools/overlay.js#anonymous~21");
+        return __foldkitBrandViewResult((Message.CompletedResume()), "@foldkit/devtools/overlay.js#anonymous~24");
     }),
 });
 export const Clear = Command.define('Clear', {
@@ -301,7 +348,7 @@ export const Clear = Command.define('Clear', {
     execute: Effect.gen(function* () {
         const store = yield* StoreService;
         yield* store.clear;
-        return __foldkitBrandViewResult((Message.CompletedClear()), "@foldkit/devtools/overlay.js#anonymous~22");
+        return __foldkitBrandViewResult((Message.CompletedClear()), "@foldkit/devtools/overlay.js#anonymous~25");
     }),
 });
 export const ScrollToTop = Command.define('ScrollToTop', {
@@ -312,7 +359,7 @@ export const ScrollToTop = Command.define('ScrollToTop', {
         if (messageList instanceof HTMLElement) {
             messageList.scrollTop = 0;
         }
-        return __foldkitBrandViewResult((Message.CompletedScrollToTop()), "@foldkit/devtools/overlay.js#anonymous~23");
+        return __foldkitBrandViewResult((Message.CompletedScrollToTop()), "@foldkit/devtools/overlay.js#anonymous~26");
     }),
 });
 const makeUpdate = (store, shadow, mode) => {
@@ -323,69 +370,71 @@ const makeUpdate = (store, shadow, mode) => {
     const scrollToTop = Command.mapEffect(ScrollToTop(), provideContext);
     const jumpToAndInspect = (index) => __foldkitBrandViewResult((Command.mapEffect(JumpToAndInspect({ index }), provideContext)), "@foldkit/devtools/overlay.js#jumpToAndInspect");
     const inspectState = (index) => __foldkitBrandViewResult((Command.mapEffect(InspectState({ index }), provideContext)), "@foldkit/devtools/overlay.js#inspectState");
-    return __foldkitBrandViewResult(((model, message) => __foldkitBrandViewResult((M.value(message).pipe(M.withReturnType(), M.tags({
+    return __foldkitBrandViewResult(((model, message) => __foldkitBrandViewResult((Message.match(message, {
         ClickedToggle: () => {
             const nextIsOpen = !model.isOpen;
-            return __foldkitBrandViewResult(([
-                evo(model, { isOpen: () => __foldkitBrandViewResult((nextIsOpen), "@foldkit/devtools/overlay.js#isOpen") }),
-                [
+            return __foldkitBrandViewResult(({
+                model: evo(model, { isOpen: () => __foldkitBrandViewResult((nextIsOpen), "@foldkit/devtools/overlay.js#isOpen") }),
+                commands: [
                     ...Option.toArray(maybeToggleScrollLock(model.isMobile, nextIsOpen)),
                     PersistDevToolsState({
                         isOpen: nextIsOpen,
                         isFlattened: model.isFlattened,
                     }),
                 ],
-            ]), "@foldkit/devtools/overlay.js#ClickedToggle");
+            }), "@foldkit/devtools/overlay.js#ClickedToggle");
         },
-        ClickedSettingsToggle: () => __foldkitBrandViewResult(([
-            evo(model, {
-                screen: currentScreen => __foldkitBrandViewResult((M.value(currentScreen).pipe(M.withReturnType(), M.when('Messages', () => __foldkitBrandViewResult(('Settings'), "@foldkit/devtools/overlay.js#anonymous~25")), M.when('Settings', () => __foldkitBrandViewResult(('Messages'), "@foldkit/devtools/overlay.js#anonymous~26")), M.exhaustive)), "@foldkit/devtools/overlay.js#screen"),
+        ClickedSettingsToggle: () => (__foldkitBrandViewResult(({
+            model: evo(model, {
+                screen: currentScreen => __foldkitBrandViewResult((M.value(currentScreen).pipe(M.withReturnType(), M.when('Messages', () => __foldkitBrandViewResult(('Settings'), "@foldkit/devtools/overlay.js#anonymous~28")), M.when('Settings', () => __foldkitBrandViewResult(('Messages'), "@foldkit/devtools/overlay.js#anonymous~29")), M.exhaustive)), "@foldkit/devtools/overlay.js#screen"),
             }),
-            [],
-        ]), "@foldkit/devtools/overlay.js#ClickedSettingsToggle"),
-        ToggledFlatten: ({ isFlattened }) => __foldkitBrandViewResult(([
-            evo(model, { isFlattened: () => __foldkitBrandViewResult((isFlattened), "@foldkit/devtools/overlay.js#isFlattened") }),
-            [PersistDevToolsState({ isOpen: model.isOpen, isFlattened })],
-        ]), "@foldkit/devtools/overlay.js#ToggledFlatten"),
-        CrossedMobileBreakpoint: ({ isMobile }) => __foldkitBrandViewResult(([
-            evo(model, { isMobile: () => __foldkitBrandViewResult((isMobile), "@foldkit/devtools/overlay.js#isMobile") }),
-            Option.toArray(maybeToggleScrollLock(model.isOpen, isMobile)),
-        ]), "@foldkit/devtools/overlay.js#CrossedMobileBreakpoint"),
-        ClickedRow: ({ index }) => __foldkitBrandViewResult((M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => __foldkitBrandViewResult(([model, [jumpToAndInspect(index)]]), "@foldkit/devtools/overlay.js#anonymous~27")), M.when('Inspect', () => __foldkitBrandViewResult(([
-            evo(model, {
+        }), "@foldkit/devtools/overlay.js#ClickedSettingsToggle")),
+        ToggledFlatten: ({ isFlattened }) => (__foldkitBrandViewResult(({
+            model: evo(model, { isFlattened: () => __foldkitBrandViewResult((isFlattened), "@foldkit/devtools/overlay.js#isFlattened") }),
+            commands: [PersistDevToolsState({ isOpen: model.isOpen, isFlattened })],
+        }), "@foldkit/devtools/overlay.js#ToggledFlatten")),
+        CrossedMobileBreakpoint: ({ isMobile }) => (__foldkitBrandViewResult(({
+            model: evo(model, { isMobile: () => __foldkitBrandViewResult((isMobile), "@foldkit/devtools/overlay.js#isMobile") }),
+            commands: Option.toArray(maybeToggleScrollLock(model.isOpen, isMobile)),
+        }), "@foldkit/devtools/overlay.js#CrossedMobileBreakpoint")),
+        ClickedRow: ({ index }) => __foldkitBrandViewResult((M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => (__foldkitBrandViewResult(({
+            model,
+            commands: [jumpToAndInspect(index)],
+        }), "@foldkit/devtools/overlay.js#anonymous~30"))), M.when('Inspect', () => (__foldkitBrandViewResult(({
+            model: evo(model, {
                 selectedIndex: () => __foldkitBrandViewResult((index), "@foldkit/devtools/overlay.js#selectedIndex"),
                 isFollowingLatest: () => __foldkitBrandViewResult((false), "@foldkit/devtools/overlay.js#isFollowingLatest"),
             }),
-            [inspectState(index)],
-        ]), "@foldkit/devtools/overlay.js#anonymous~28")), M.exhaustive)), "@foldkit/devtools/overlay.js#ClickedRow"),
-        ClickedResume: () => __foldkitBrandViewResult(([
-            evo(model, {
+            commands: [inspectState(index)],
+        }), "@foldkit/devtools/overlay.js#anonymous~31"))), M.exhaustive)), "@foldkit/devtools/overlay.js#ClickedRow"),
+        ClickedResume: () => (__foldkitBrandViewResult(({
+            model: evo(model, {
                 isFollowingTop: () => __foldkitBrandViewResult((true), "@foldkit/devtools/overlay.js#isFollowingTop"),
                 expandedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#expandedPaths"),
                 changedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#changedPaths"),
                 affectedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#affectedPaths"),
             }),
-            [resume, inspectLatest, scrollToTop],
-        ]), "@foldkit/devtools/overlay.js#ClickedResume"),
-        ClickedClear: () => __foldkitBrandViewResult(([
-            evo(model, {
+            commands: [resume, inspectLatest, scrollToTop],
+        }), "@foldkit/devtools/overlay.js#ClickedResume")),
+        ClickedClear: () => (__foldkitBrandViewResult(({
+            model: evo(model, {
                 selectedIndex: () => __foldkitBrandViewResult((INIT_INDEX), "@foldkit/devtools/overlay.js#selectedIndex~2"),
                 isFollowingLatest: () => __foldkitBrandViewResult((true), "@foldkit/devtools/overlay.js#isFollowingLatest~2"),
                 isFollowingTop: () => __foldkitBrandViewResult((true), "@foldkit/devtools/overlay.js#isFollowingTop~2"),
-                maybeSubmodelFilter: () => __foldkitBrandViewResult((Option.none()), "@foldkit/devtools/overlay.js#maybeSubmodelFilter"),
+                maybeSubmodelFilter: () => __foldkitBrandViewResult((Option.none()), "@foldkit/devtools/overlay.js#maybeSubmodelFilter~2"),
                 expandedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#expandedPaths~2"),
                 changedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#changedPaths~2"),
                 affectedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#affectedPaths~2"),
             }),
-            [clear, inspectLatest, scrollToTop],
-        ]), "@foldkit/devtools/overlay.js#ClickedClear"),
+            commands: [clear, inspectLatest, scrollToTop],
+        }), "@foldkit/devtools/overlay.js#ClickedClear")),
         ClickedFollowLatest: () => {
             const latestIndex = Array_.match(model.entries, {
                 onEmpty: () => __foldkitBrandViewResult((INIT_INDEX), "@foldkit/devtools/overlay.js#onEmpty~2"),
                 onNonEmpty: () => __foldkitBrandViewResult((model.startIndex + model.entries.length - 1), "@foldkit/devtools/overlay.js#onNonEmpty~2"),
             });
-            return __foldkitBrandViewResult(([
-                evo(model, {
+            return __foldkitBrandViewResult(({
+                model: evo(model, {
                     selectedIndex: () => __foldkitBrandViewResult((latestIndex), "@foldkit/devtools/overlay.js#selectedIndex~3"),
                     isFollowingLatest: () => __foldkitBrandViewResult((true), "@foldkit/devtools/overlay.js#isFollowingLatest~3"),
                     isFollowingTop: () => __foldkitBrandViewResult((true), "@foldkit/devtools/overlay.js#isFollowingTop~3"),
@@ -393,69 +442,52 @@ const makeUpdate = (store, shadow, mode) => {
                     changedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#changedPaths~3"),
                     affectedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#affectedPaths~3"),
                 }),
-                [inspectLatest, scrollToTop],
-            ]), "@foldkit/devtools/overlay.js#ClickedFollowLatest");
+                commands: [inspectLatest, scrollToTop],
+            }), "@foldkit/devtools/overlay.js#ClickedFollowLatest");
         },
-        ClickedScrollToTopPill: () => __foldkitBrandViewResult(([
-            evo(model, {
+        ClickedScrollToTopPill: () => (__foldkitBrandViewResult(({
+            model: evo(model, {
                 isFollowingTop: () => __foldkitBrandViewResult((true), "@foldkit/devtools/overlay.js#isFollowingTop~4"),
             }),
-            [scrollToTop],
-        ]), "@foldkit/devtools/overlay.js#ClickedScrollToTopPill"),
+            commands: [scrollToTop],
+        }), "@foldkit/devtools/overlay.js#ClickedScrollToTopPill")),
         ScrolledMessageList: ({ scrollTop }) => {
             const isAtTop = scrollTop <= SCROLL_FOLLOW_THRESHOLD_PX;
             return __foldkitBrandViewResult((isAtTop === model.isFollowingTop
-                ? [model, []]
-                : [evo(model, { isFollowingTop: () => __foldkitBrandViewResult((isAtTop), "@foldkit/devtools/overlay.js#isFollowingTop~5") }), []]), "@foldkit/devtools/overlay.js#ScrolledMessageList");
+                ? { model }
+                : { model: evo(model, { isFollowingTop: () => __foldkitBrandViewResult((isAtTop), "@foldkit/devtools/overlay.js#isFollowingTop~5") }) }), "@foldkit/devtools/overlay.js#ScrolledMessageList");
         },
-        ReceivedInspectedState: ({ model: inspectedModel, maybeMessage, changedPaths, affectedPaths, }) => __foldkitBrandViewResult(([
-            evo(model, {
+        ReceivedInspectedState: ({ model: inspectedModel, maybeMessage, changedPaths, affectedPaths, }) => (__foldkitBrandViewResult(({
+            model: evo(model, {
                 maybeInspectedModel: () => __foldkitBrandViewResult((Option.some(inspectedModel)), "@foldkit/devtools/overlay.js#maybeInspectedModel"),
                 maybeInspectedMessage: () => __foldkitBrandViewResult((maybeMessage), "@foldkit/devtools/overlay.js#maybeInspectedMessage"),
                 changedPaths: () => __foldkitBrandViewResult((changedPaths), "@foldkit/devtools/overlay.js#changedPaths~4"),
                 affectedPaths: () => __foldkitBrandViewResult((affectedPaths), "@foldkit/devtools/overlay.js#affectedPaths~4"),
             }),
-            [],
-        ]), "@foldkit/devtools/overlay.js#ReceivedInspectedState"),
-        GotInspectorTabsMessage: ({ message: tabsMessage }) => {
-            const [nextTabsModel, tabsCommands, maybeOutMessage] = InspectorTabs.update(model.inspectorTabs, tabsMessage);
-            const nextActiveInspectorTab = Option.match(maybeOutMessage, {
-                onNone: () => __foldkitBrandViewResult((model.activeInspectorTab), "@foldkit/devtools/overlay.js#onNone"),
-                onSome: M.type().pipe(M.tagsExhaustive({
-                    Selected: ({ value }) => __foldkitBrandViewResult((value), "@foldkit/devtools/overlay.js#Selected"),
-                })),
-            });
-            return __foldkitBrandViewResult(([
-                evo(model, {
-                    inspectorTabs: () => __foldkitBrandViewResult((nextTabsModel), "@foldkit/devtools/overlay.js#inspectorTabs"),
-                    activeInspectorTab: () => __foldkitBrandViewResult((nextActiveInspectorTab), "@foldkit/devtools/overlay.js#activeInspectorTab"),
-                }),
-                Command.mapMessages(tabsCommands, message => __foldkitBrandViewResult((Message.GotInspectorTabsMessage({ message })), "@foldkit/devtools/overlay.js#anonymous~29")),
-            ]), "@foldkit/devtools/overlay.js#GotInspectorTabsMessage");
-        },
-        ToggledTreeNode: ({ path }) => __foldkitBrandViewResult(([
-            evo(model, {
+        }), "@foldkit/devtools/overlay.js#ReceivedInspectedState")),
+        GotInspectorTabsMessage: ({ message: tabsMessage }) => __foldkitBrandViewResult((foldInspectorTabs(model, tabsMessage)), "@foldkit/devtools/overlay.js#GotInspectorTabsMessage"),
+        ToggledTreeNode: ({ path }) => (__foldkitBrandViewResult(({
+            model: evo(model, {
                 expandedPaths: paths => __foldkitBrandViewResult((HashSet.has(paths, path)
                     ? HashSet.remove(paths, path)
                     : HashSet.add(paths, path)), "@foldkit/devtools/overlay.js#expandedPaths~4"),
             }),
-            [],
-        ]), "@foldkit/devtools/overlay.js#ToggledTreeNode"),
+        }), "@foldkit/devtools/overlay.js#ToggledTreeNode")),
         ReceivedStoreUpdate: ({ entries, initCommands, initMountStarts, startIndex, isPaused, pausedAtIndex, }) => {
-            const shouldFollowSelection = M.value(mode).pipe(M.when('TimeTravel', () => __foldkitBrandViewResult((!isPaused), "@foldkit/devtools/overlay.js#anonymous~30")), M.when('Inspect', () => __foldkitBrandViewResult((model.isFollowingLatest), "@foldkit/devtools/overlay.js#anonymous~31")), M.exhaustive);
-            const shouldFollowScroll = M.value(mode).pipe(M.when('TimeTravel', () => __foldkitBrandViewResult((!isPaused && model.isFollowingTop), "@foldkit/devtools/overlay.js#anonymous~32")), M.when('Inspect', () => __foldkitBrandViewResult((model.isFollowingTop), "@foldkit/devtools/overlay.js#anonymous~33")), M.exhaustive);
+            const shouldFollowSelection = M.value(mode).pipe(M.when('TimeTravel', () => __foldkitBrandViewResult((!isPaused), "@foldkit/devtools/overlay.js#anonymous~32")), M.when('Inspect', () => __foldkitBrandViewResult((model.isFollowingLatest), "@foldkit/devtools/overlay.js#anonymous~33")), M.exhaustive);
+            const shouldFollowScroll = M.value(mode).pipe(M.when('TimeTravel', () => __foldkitBrandViewResult((!isPaused && model.isFollowingTop), "@foldkit/devtools/overlay.js#anonymous~34")), M.when('Inspect', () => __foldkitBrandViewResult((model.isFollowingTop), "@foldkit/devtools/overlay.js#anonymous~35")), M.exhaustive);
             const latestIndex = Array_.match(entries, {
                 onEmpty: () => __foldkitBrandViewResult((INIT_INDEX), "@foldkit/devtools/overlay.js#onEmpty~3"),
                 onNonEmpty: () => __foldkitBrandViewResult((startIndex + entries.length - 1), "@foldkit/devtools/overlay.js#onNonEmpty~3"),
             });
             const nextSubmodelTags = computeSubmodelTags(entries);
-            const isFilterStale = Option.exists(model.maybeSubmodelFilter, filterTag => __foldkitBrandViewResult((!Array_.contains(nextSubmodelTags, filterTag)), "@foldkit/devtools/overlay.js#anonymous~34"));
+            const isFilterStale = Option.exists(model.maybeSubmodelFilter, filterTag => __foldkitBrandViewResult((!Array_.contains(nextSubmodelTags, filterTag)), "@foldkit/devtools/overlay.js#anonymous~36"));
             const sliderMax = entries.length;
             const targetSliderValue = isPaused
                 ? hostIndexToSliderValue(pausedAtIndex, startIndex)
                 : sliderMax;
-            return __foldkitBrandViewResult(([
-                evo(model, {
+            return __foldkitBrandViewResult(({
+                model: evo(model, {
                     entries: () => __foldkitBrandViewResult((entries), "@foldkit/devtools/overlay.js#entries"),
                     initCommands: () => __foldkitBrandViewResult((initCommands), "@foldkit/devtools/overlay.js#initCommands"),
                     initMountStarts: () => __foldkitBrandViewResult((initMountStarts), "@foldkit/devtools/overlay.js#initMountStarts"),
@@ -463,100 +495,61 @@ const makeUpdate = (store, shadow, mode) => {
                     isPaused: () => __foldkitBrandViewResult((isPaused), "@foldkit/devtools/overlay.js#isPaused"),
                     pausedAtIndex: () => __foldkitBrandViewResult((pausedAtIndex), "@foldkit/devtools/overlay.js#pausedAtIndex"),
                     submodelTags: () => __foldkitBrandViewResult((nextSubmodelTags), "@foldkit/devtools/overlay.js#submodelTags"),
-                    maybeSubmodelFilter: current => __foldkitBrandViewResult((isFilterStale ? Option.none() : current), "@foldkit/devtools/overlay.js#maybeSubmodelFilter~2"),
+                    maybeSubmodelFilter: current => __foldkitBrandViewResult((isFilterStale ? Option.none() : current), "@foldkit/devtools/overlay.js#maybeSubmodelFilter~3"),
                     selectedIndex: current => __foldkitBrandViewResult((shouldFollowSelection ? latestIndex : current), "@foldkit/devtools/overlay.js#selectedIndex~4"),
-                    scrubberSlider: current => __foldkitBrandViewResult((Slider.reflectRange(current, { min: 0, max: sliderMax })), "@foldkit/devtools/overlay.js#scrubberSlider"),
-                    scrubberValue: current => __foldkitBrandViewResult((M.value(model.scrubberSlider.dragState).pipe(M.tag('Dragging', () => __foldkitBrandViewResult((Slider.snapAndClamp(current, 0, sliderMax, 1)), "@foldkit/devtools/overlay.js#anonymous~35")), M.orElse(() => __foldkitBrandViewResult((Slider.snapAndClamp(targetSliderValue, 0, sliderMax, 1)), "@foldkit/devtools/overlay.js#anonymous~36")))), "@foldkit/devtools/overlay.js#scrubberValue"),
+                    scrubberSlider: current => __foldkitBrandViewResult((Slider.reflectRange(current, { min: 0, max: sliderMax })), "@foldkit/devtools/overlay.js#scrubberSlider~2"),
+                    scrubberValue: current => __foldkitBrandViewResult((M.value(model.scrubberSlider.dragState).pipe(M.tag('Dragging', () => __foldkitBrandViewResult((Slider.snapAndClamp(current, 0, sliderMax, 1)), "@foldkit/devtools/overlay.js#anonymous~37")), M.orElse(() => __foldkitBrandViewResult((Slider.snapAndClamp(targetSliderValue, 0, sliderMax, 1)), "@foldkit/devtools/overlay.js#anonymous~38")))), "@foldkit/devtools/overlay.js#scrubberValue~2"),
                 }),
-                [
+                commands: [
                     ...(shouldFollowSelection ? [inspectLatest] : []),
                     ...(shouldFollowScroll ? [scrollToTop] : []),
                 ],
-            ]), "@foldkit/devtools/overlay.js#ReceivedStoreUpdate");
-        },
-        GotSubmodelFilterMessage: ({ message: listboxMessage }) => {
-            const [nextListboxModel, listboxCommands, maybeOutMessage] = SubmodelFilterListbox.update(model.submodelFilterListbox, listboxMessage);
-            const mappedCommands = Command.mapMessages(listboxCommands, message => __foldkitBrandViewResult((Message.GotSubmodelFilterMessage({ message })), "@foldkit/devtools/overlay.js#anonymous~37"));
-            return __foldkitBrandViewResult((Option.match(maybeOutMessage, {
-                onNone: () => __foldkitBrandViewResult(([
-                    evo(model, { submodelFilterListbox: () => __foldkitBrandViewResult((nextListboxModel), "@foldkit/devtools/overlay.js#submodelFilterListbox") }),
-                    mappedCommands,
-                ]), "@foldkit/devtools/overlay.js#onNone~2"),
-                onSome: M.type().pipe(M.withReturnType(), M.tagsExhaustive({
-                    Selected: ({ value }) => __foldkitBrandViewResult(([
-                        evo(model, {
-                            maybeSubmodelFilter: () => __foldkitBrandViewResult((Option.liftPredicate(value, String_.isNonEmpty)), "@foldkit/devtools/overlay.js#maybeSubmodelFilter~3"),
-                            submodelFilterListbox: () => __foldkitBrandViewResult((nextListboxModel), "@foldkit/devtools/overlay.js#submodelFilterListbox~2"),
-                        }),
-                        mappedCommands,
-                    ]), "@foldkit/devtools/overlay.js#Selected~2"),
-                })),
-            })), "@foldkit/devtools/overlay.js#GotSubmodelFilterMessage");
-        },
-        GotScrubberSliderMessage: ({ message: sliderMessage }) => {
-            const [nextSlider, sliderCommands, maybeOutMessage] = Slider.update(model.scrubberSlider, sliderMessage);
-            const mappedSliderCommands = Command.mapMessages(sliderCommands, message => __foldkitBrandViewResult((Message.GotScrubberSliderMessage({ message })), "@foldkit/devtools/overlay.js#anonymous~38"));
-            // NOTE: the thumb tracks every pointermove (cheap, model-only via
-            // `nextSlider`), but the heavy jump-plus-inspect is coalesced to one
-            // navigation per animation frame. Each `ChangedValue` overwrites the
-            // pending host index; the `TickedScrubFrame` subscription flushes the
-            // latest on the next frame, so a fast drag can't enqueue jumps faster
-            // than they complete.
-            const nextMaybePendingScrubIndex = Option.match(maybeOutMessage, {
-                onNone: () => __foldkitBrandViewResult((model.maybePendingScrubIndex), "@foldkit/devtools/overlay.js#onNone~3"),
-                onSome: M.type().pipe(M.tagsExhaustive({
-                    ChangedValue: ({ value }) => __foldkitBrandViewResult((Option.some(sliderValueToHostIndex(value, model.startIndex))), "@foldkit/devtools/overlay.js#ChangedValue"),
-                })),
-            });
-            const nextScrubberValue = Option.match(maybeOutMessage, {
-                onNone: () => __foldkitBrandViewResult((model.scrubberValue), "@foldkit/devtools/overlay.js#onNone~4"),
-                onSome: M.type().pipe(M.tagsExhaustive({
-                    ChangedValue: ({ value }) => __foldkitBrandViewResult((value), "@foldkit/devtools/overlay.js#ChangedValue~2"),
-                })),
-            });
-            return __foldkitBrandViewResult(([
-                evo(model, {
-                    scrubberSlider: () => __foldkitBrandViewResult((nextSlider), "@foldkit/devtools/overlay.js#scrubberSlider~2"),
-                    scrubberValue: () => __foldkitBrandViewResult((nextScrubberValue), "@foldkit/devtools/overlay.js#scrubberValue~2"),
-                    maybePendingScrubIndex: () => __foldkitBrandViewResult((nextMaybePendingScrubIndex), "@foldkit/devtools/overlay.js#maybePendingScrubIndex"),
-                }),
-                mappedSliderCommands,
-            ]), "@foldkit/devtools/overlay.js#GotScrubberSliderMessage");
+            }), "@foldkit/devtools/overlay.js#ReceivedStoreUpdate");
         },
+        GotSubmodelFilterMessage: ({ message: listboxMessage }) => __foldkitBrandViewResult((foldSubmodelFilter(model, listboxMessage)), "@foldkit/devtools/overlay.js#GotSubmodelFilterMessage"),
+        GotScrubberSliderMessage: ({ message: sliderMessage }) => __foldkitBrandViewResult((foldScrubberSlider(model, sliderMessage)), "@foldkit/devtools/overlay.js#GotScrubberSliderMessage"),
         TickedScrubFrame: () => __foldkitBrandViewResult((Option.match(model.maybePendingScrubIndex, {
-            onNone: () => __foldkitBrandViewResult(([model, []]), "@foldkit/devtools/overlay.js#onNone~5"),
-            onSome: (hostIndex) => __foldkitBrandViewResult(([
-                evo(model, { maybePendingScrubIndex: () => __foldkitBrandViewResult((Option.none()), "@foldkit/devtools/overlay.js#maybePendingScrubIndex~2") }),
-                [jumpToAndInspect(hostIndex)],
-            ]), "@foldkit/devtools/overlay.js#onSome"),
+            onNone: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#onNone")),
+            onSome: (hostIndex) => (__foldkitBrandViewResult(({
+                model: evo(model, {
+                    maybePendingScrubIndex: () => __foldkitBrandViewResult((Option.none()), "@foldkit/devtools/overlay.js#maybePendingScrubIndex~2"),
+                }),
+                commands: [jumpToAndInspect(hostIndex)],
+            }), "@foldkit/devtools/overlay.js#onSome")),
         })), "@foldkit/devtools/overlay.js#TickedScrubFrame"),
-    }), M.tag('CompletedResume', 'CompletedClear', 'CompletedPersistDevToolsState', 'CompletedLockScroll', 'CompletedUnlockScroll', 'CompletedScrollToTop', () => __foldkitBrandViewResult(([model, []]), "@foldkit/devtools/overlay.js#anonymous~39")), M.exhaustive)), "@foldkit/devtools/overlay.js#anonymous~24")), "@foldkit/devtools/overlay.js#makeUpdate");
+        CompletedResume: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedResume")),
+        CompletedClear: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedClear")),
+        CompletedPersistDevToolsState: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedPersistDevToolsState")),
+        CompletedLockScroll: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedLockScroll")),
+        CompletedUnlockScroll: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedUnlockScroll")),
+        CompletedScrollToTop: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedScrollToTop")),
+    })), "@foldkit/devtools/overlay.js#anonymous~27")), "@foldkit/devtools/overlay.js#makeUpdate");
 };
 // SUBSCRIPTION
 const makeOverlaySubscriptions = (store, shadow) => {
-    const sliderSubscriptions = Slider.subscriptionsForRoot(() => __foldkitBrandViewResult((shadow), "@foldkit/devtools/overlay.js#anonymous~40"));
+    const sliderSubscriptions = Slider.subscriptionsForRoot(() => __foldkitBrandViewResult((shadow), "@foldkit/devtools/overlay.js#anonymous~39"));
     const scrubberSubscriptions = Subscription.lift({
         scrubberPointer: sliderSubscriptions.dragPointer,
         scrubberEscape: sliderSubscriptions.dragEscape,
     })({
         toChildModel: model => __foldkitBrandViewResult((model.scrubberSlider), "@foldkit/devtools/overlay.js#toChildModel"),
-        toParentMessage: message => __foldkitBrandViewResult((Message.GotScrubberSliderMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage"),
+        toParentMessage: message => __foldkitBrandViewResult((Message.GotScrubberSliderMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~4"),
     });
     const ownSubscriptions = Subscription.make()(_entry => (__foldkitBrandViewResult(({
         scrubFrame: Subscription.animationFrame({
             isActive: model => __foldkitBrandViewResult((Option.isSome(model.maybePendingScrubIndex)), "@foldkit/devtools/overlay.js#isActive"),
             toMessage: () => __foldkitBrandViewResult((Message.TickedScrubFrame()), "@foldkit/devtools/overlay.js#toMessage"),
         }),
-        storeUpdates: Subscription.persistent(Stream.concat(Stream.fromEffect(SubscriptionRef.get(store.stateRef).pipe(Effect.map(state => __foldkitBrandViewResult((Message.ReceivedStoreUpdate(toDisplayState(state))), "@foldkit/devtools/overlay.js#anonymous~42")))), Stream.map(SubscriptionRef.changes(store.stateRef), state => __foldkitBrandViewResult((Message.ReceivedStoreUpdate(toDisplayState(state))), "@foldkit/devtools/overlay.js#anonymous~43")))),
+        storeUpdates: Subscription.persistent(Stream.concat(Stream.fromEffect(SubscriptionRef.get(store.stateRef).pipe(Effect.map(state => __foldkitBrandViewResult((Message.ReceivedStoreUpdate(toDisplayState(state))), "@foldkit/devtools/overlay.js#anonymous~41")))), Stream.map(SubscriptionRef.changes(store.stateRef), state => __foldkitBrandViewResult((Message.ReceivedStoreUpdate(toDisplayState(state))), "@foldkit/devtools/overlay.js#anonymous~42")))),
         mobileBreakpoint: Subscription.persistent(Stream.callback(queue => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => {
             const mediaQuery = window.matchMedia(MOBILE_BREAKPOINT_QUERY);
             const handler = (event) => {
                 Queue.offerUnsafe(queue, Message.CrossedMobileBreakpoint({ isMobile: event.matches }));
             };
             mediaQuery.addEventListener('change', handler);
-            return __foldkitBrandViewResult(({ mediaQuery, handler }), "@foldkit/devtools/overlay.js#anonymous~45");
-        }), ({ mediaQuery, handler }) => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((mediaQuery.removeEventListener('change', handler)), "@foldkit/devtools/overlay.js#anonymous~47"))), "@foldkit/devtools/overlay.js#anonymous~46")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@foldkit/devtools/overlay.js#anonymous~48")))), "@foldkit/devtools/overlay.js#anonymous~44"))),
-    }), "@foldkit/devtools/overlay.js#anonymous~41")));
+            return __foldkitBrandViewResult(({ mediaQuery, handler }), "@foldkit/devtools/overlay.js#anonymous~44");
+        }), ({ mediaQuery, handler }) => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((mediaQuery.removeEventListener('change', handler)), "@foldkit/devtools/overlay.js#anonymous~46"))), "@foldkit/devtools/overlay.js#anonymous~45")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@foldkit/devtools/overlay.js#anonymous~47")))), "@foldkit/devtools/overlay.js#anonymous~43"))),
+    }), "@foldkit/devtools/overlay.js#anonymous~40")));
     return __foldkitBrandViewResult((Subscription.aggregate()(ownSubscriptions, scrubberSubscriptions)), "@foldkit/devtools/overlay.js#makeOverlaySubscriptions");
 };
 // VIEW
@@ -590,7 +583,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     let viewWithBuilder;
     return __foldkitBrandViewResult(((model, h) => {
         viewWithBuilder ??= buildOverlayView(position, mode, shadow, maybeBanner, h);
-        return __foldkitBrandViewResult((viewWithBuilder(model)), "@foldkit/devtools/overlay.js#anonymous~49");
+        return __foldkitBrandViewResult((viewWithBuilder(model)), "@foldkit/devtools/overlay.js#anonymous~48");
     }), "@foldkit/devtools/overlay.js#makeView");
 };
 const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
@@ -600,7 +593,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
     const lazyMessageList = createLazy();
     // JSON TREE
     const leafSpan = (className, text) => __foldkitBrandViewResult((h.span([h.Class(className)], [text])), "@foldkit/devtools/overlay.js#leafSpan");
-    const leafValueView = (value) => __foldkitBrandViewResult((M.value(value).pipe(M.when(Predicate.isNull, () => __foldkitBrandViewResult((leafSpan('json-null italic', 'null')), "@foldkit/devtools/overlay.js#anonymous~50")), M.when(Predicate.isUndefined, () => __foldkitBrandViewResult((leafSpan('json-null italic', 'undefined')), "@foldkit/devtools/overlay.js#anonymous~51")), M.when(Predicate.isString, stringValue => __foldkitBrandViewResult((leafSpan('json-string', `"${stringValue}"`)), "@foldkit/devtools/overlay.js#anonymous~52")), M.when(Predicate.isNumber, numberValue => __foldkitBrandViewResult((leafSpan('json-number', String(numberValue))), "@foldkit/devtools/overlay.js#anonymous~53")), M.when(Predicate.isBoolean, booleanValue => __foldkitBrandViewResult((leafSpan('json-boolean', String(booleanValue))), "@foldkit/devtools/overlay.js#anonymous~54")), M.orElse(unknownValue => __foldkitBrandViewResult((leafSpan('json-null', String(unknownValue))), "@foldkit/devtools/overlay.js#anonymous~55")))), "@foldkit/devtools/overlay.js#leafValueView");
+    const leafValueView = (value) => __foldkitBrandViewResult((M.value(value).pipe(M.when(Predicate.isNull, () => __foldkitBrandViewResult((leafSpan('json-null italic', 'null')), "@foldkit/devtools/overlay.js#anonymous~49")), M.when(Predicate.isUndefined, () => __foldkitBrandViewResult((leafSpan('json-null italic', 'undefined')), "@foldkit/devtools/overlay.js#anonymous~50")), M.when(Predicate.isString, stringValue => __foldkitBrandViewResult((leafSpan('json-string', `"${stringValue}"`)), "@foldkit/devtools/overlay.js#anonymous~51")), M.when(Predicate.isNumber, numberValue => __foldkitBrandViewResult((leafSpan('json-number', String(numberValue))), "@foldkit/devtools/overlay.js#anonymous~52")), M.when(Predicate.isBoolean, booleanValue => __foldkitBrandViewResult((leafSpan('json-boolean', String(booleanValue))), "@foldkit/devtools/overlay.js#anonymous~53")), M.orElse(unknownValue => __foldkitBrandViewResult((leafSpan('json-null', String(unknownValue))), "@foldkit/devtools/overlay.js#anonymous~54")))), "@foldkit/devtools/overlay.js#leafValueView");
     const keyView = (key) => __foldkitBrandViewResult((h.span([h.Class('json-key')], [`${key}:\u00a0`])), "@foldkit/devtools/overlay.js#keyView");
     const CHEVRON_RIGHT = 'M8.25 4.5l7.5 7.5-7.5 7.5';
     const CHEVRON_DOWN = 'M19.5 8.25l-7.5 7.5-7.5-7.5';
@@ -674,16 +667,16 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                 treePath: `${treePath}.${arrayIndex}`,
                 depth: childDepth,
                 key: String(arrayIndex),
-            })), "@foldkit/devtools/overlay.js#anonymous~56"));
+            })), "@foldkit/devtools/overlay.js#anonymous~55"));
         }
         else if (Predicate.isObject(value)) {
-            pipe(value, Record.toEntries, Array_.filter(([entryKey]) => __foldkitBrandViewResult((entryKey !== '_tag'), "@foldkit/devtools/overlay.js#anonymous~57")), Array_.forEach(([entryKey, childValue]) => __foldkitBrandViewResult((flattenTree({
+            pipe(value, Record.toEntries, Array_.filter(([entryKey]) => __foldkitBrandViewResult((entryKey !== '_tag'), "@foldkit/devtools/overlay.js#anonymous~56")), Array_.forEach(([entryKey, childValue]) => __foldkitBrandViewResult((flattenTree({
                 ...shared,
                 value: childValue,
                 treePath: `${treePath}.${entryKey}`,
                 depth: childDepth,
                 key: entryKey,
-            })), "@foldkit/devtools/overlay.js#anonymous~58")));
+            })), "@foldkit/devtools/overlay.js#anonymous~57")));
         }
     };
     const flatNodeView = (value, treePath, depth, key, nodeIsExpandable, isExpanded, isChanged, isAffected, isRoot, tag) => {
@@ -701,7 +694,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                     'diff-changed': isChanged,
                 })),
                 indent,
-            ], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~59")))), "@foldkit/devtools/overlay.js#flatNodeView");
+            ], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~58")))), "@foldkit/devtools/overlay.js#flatNodeView");
         }
         const preview = isExpanded
             ? Array.isArray(value)
@@ -725,7 +718,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             ...(isRoot
                 ? []
                 : [h.OnClick(Message.ToggledTreeNode({ path: treePath }))]),
-        ], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~60")))), "@foldkit/devtools/overlay.js#flatNodeView");
+        ], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~59")))), "@foldkit/devtools/overlay.js#flatNodeView");
     };
     const renderFlatNode = (node) => __foldkitBrandViewResult((lazyTreeNode(node.treePath, flatNodeView, [
         node.value,
@@ -749,7 +742,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             changedPaths,
             affectedPaths,
             depth: 0,
-            key: Option.getOrElse(maybeRootLabel, () => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~61")),
+            key: Option.getOrElse(maybeRootLabel, () => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~60")),
             accumulator: nodes,
             indentRootChildren,
         });
@@ -763,7 +756,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             return __foldkitBrandViewResult(('0ms'), "@foldkit/devtools/overlay.js#inspectedTimestamp");
         }
         const baseTimestamp = pipe(model.entries, Array_.head, Option.match({
-            onNone: () => __foldkitBrandViewResult((0), "@foldkit/devtools/overlay.js#onNone~6"),
+            onNone: () => __foldkitBrandViewResult((0), "@foldkit/devtools/overlay.js#onNone~2"),
             onSome: ({ timestamp }) => __foldkitBrandViewResult((timestamp), "@foldkit/devtools/overlay.js#onSome~2"),
         }));
         return __foldkitBrandViewResult((pipe(Array_.get(model.entries, selectedIndex - model.startIndex), Option.map(entry => {
@@ -772,8 +765,8 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             const remainingMs = delta % MILLIS_PER_SECOND;
             return __foldkitBrandViewResult((seconds > 0
                 ? `+${seconds}s ${remainingMs.toFixed(1)}ms`
-                : `+${remainingMs.toFixed(1)}ms`), "@foldkit/devtools/overlay.js#anonymous~62");
-        }), Option.getOrElse(() => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~63")))), "@foldkit/devtools/overlay.js#inspectedTimestamp");
+                : `+${remainingMs.toFixed(1)}ms`), "@foldkit/devtools/overlay.js#anonymous~61");
+        }), Option.getOrElse(() => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~62")))), "@foldkit/devtools/overlay.js#inspectedTimestamp");
     };
     const emptyInspectorView = h.div([
         h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
@@ -837,7 +830,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             onEmpty: () => __foldkitBrandViewResult((INIT_INDEX), "@foldkit/devtools/overlay.js#onEmpty~4"),
             onNonEmpty: () => __foldkitBrandViewResult((model.startIndex + model.entries.length - 1), "@foldkit/devtools/overlay.js#onNonEmpty~4"),
         });
-        return __foldkitBrandViewResult((M.value(mode).pipe(M.when('TimeTravel', () => __foldkitBrandViewResult((model.isPaused ? model.pausedAtIndex : lastIndex), "@foldkit/devtools/overlay.js#anonymous~64")), M.when('Inspect', () => __foldkitBrandViewResult((model.selectedIndex), "@foldkit/devtools/overlay.js#anonymous~65")), M.exhaustive)), "@foldkit/devtools/overlay.js#selectedHistoryIndex");
+        return __foldkitBrandViewResult((M.value(mode).pipe(M.when('TimeTravel', () => __foldkitBrandViewResult((model.isPaused ? model.pausedAtIndex : lastIndex), "@foldkit/devtools/overlay.js#anonymous~63")), M.when('Inspect', () => __foldkitBrandViewResult((model.selectedIndex), "@foldkit/devtools/overlay.js#anonymous~64")), M.exhaustive)), "@foldkit/devtools/overlay.js#selectedHistoryIndex");
     };
     const selectedCommands = (model) => {
         const selectedIndex = selectedHistoryIndex(model);
@@ -845,12 +838,12 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             return __foldkitBrandViewResult((model.initCommands), "@foldkit/devtools/overlay.js#selectedCommands");
         }
         else {
-            return __foldkitBrandViewResult((pipe(model.entries, Array_.get(selectedIndex - model.startIndex), Option.map(entry => __foldkitBrandViewResult((entry.commands), "@foldkit/devtools/overlay.js#anonymous~66")), Option.getOrElse(() => __foldkitBrandViewResult((NO_COMMANDS), "@foldkit/devtools/overlay.js#anonymous~67")))), "@foldkit/devtools/overlay.js#selectedCommands");
+            return __foldkitBrandViewResult((pipe(model.entries, Array_.get(selectedIndex - model.startIndex), Option.map(entry => __foldkitBrandViewResult((entry.commands), "@foldkit/devtools/overlay.js#anonymous~65")), Option.getOrElse(() => __foldkitBrandViewResult((NO_COMMANDS), "@foldkit/devtools/overlay.js#anonymous~66")))), "@foldkit/devtools/overlay.js#selectedCommands");
         }
     };
     const flattenCommand = (command, index, expandedPaths) => {
         const taggedValue = Option.match(command.args, {
-            onNone: () => (__foldkitBrandViewResult(({ _tag: command.name }), "@foldkit/devtools/overlay.js#onNone~7")),
+            onNone: () => (__foldkitBrandViewResult(({ _tag: command.name }), "@foldkit/devtools/overlay.js#onNone~3")),
             onSome: argsValue => (__foldkitBrandViewResult(({ ...argsValue, _tag: command.name }), "@foldkit/devtools/overlay.js#onSome~4")),
         });
         const rootPath = `command-${index}`;
@@ -878,7 +871,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         ], Array_.map(commandList, (command, index) => __foldkitBrandViewResult((h.div([h.Class('flex items-start px-2 py-1 border-b gap-1.5')], [
             h.span([h.Class(indexClass)], [String(index + 1)]),
             h.div([h.Class('flex flex-col flex-1 min-w-0')], Array_.map(flattenCommand(command, index, expandedPaths), renderFlatNode)),
-        ])), "@foldkit/devtools/overlay.js#anonymous~68")))), "@foldkit/devtools/overlay.js#onNonEmpty~5"),
+        ])), "@foldkit/devtools/overlay.js#anonymous~67")))), "@foldkit/devtools/overlay.js#onNonEmpty~5"),
     })), "@foldkit/devtools/overlay.js#commandsTabContent");
     const selectedMountActivity = (model) => {
         const selectedIndex = selectedHistoryIndex(model);
@@ -887,7 +880,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         }
         else {
             return __foldkitBrandViewResult((pipe(model.entries, Array_.get(selectedIndex - model.startIndex), Option.match({
-                onNone: () => (__foldkitBrandViewResult(({ starts: NO_MOUNTS, ends: NO_MOUNTS }), "@foldkit/devtools/overlay.js#onNone~8")),
+                onNone: () => (__foldkitBrandViewResult(({ starts: NO_MOUNTS, ends: NO_MOUNTS }), "@foldkit/devtools/overlay.js#onNone~4")),
                 onSome: entry => (__foldkitBrandViewResult(({
                     starts: entry.mountStarts,
                     ends: entry.mountEnds,
@@ -897,7 +890,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
     };
     const flattenMount = (mount, sectionLabel, index, expandedPaths) => {
         const taggedValue = Option.match(mount.args, {
-            onNone: () => (__foldkitBrandViewResult(({ _tag: mount.name }), "@foldkit/devtools/overlay.js#onNone~9")),
+            onNone: () => (__foldkitBrandViewResult(({ _tag: mount.name }), "@foldkit/devtools/overlay.js#onNone~5")),
             onSome: argsValue => (__foldkitBrandViewResult(({ ...argsValue, _tag: mount.name }), "@foldkit/devtools/overlay.js#onSome~6")),
         });
         const rootPath = `mount-${sectionLabel}-${index}`;
@@ -923,7 +916,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         ...Array_.map(mounts, (mount, index) => __foldkitBrandViewResult((h.div([h.Class('flex items-start px-2 py-1 border-b gap-1.5')], [
             h.span([h.Class(indexClass)], [String(index + 1)]),
             h.div([h.Class('flex flex-col flex-1 min-w-0')], Array_.map(flattenMount(mount, label, index, expandedPaths), renderFlatNode)),
-        ])), "@foldkit/devtools/overlay.js#anonymous~69")),
+        ])), "@foldkit/devtools/overlay.js#anonymous~68")),
     ])), "@foldkit/devtools/overlay.js#mountListSection");
     const mountsTabContent = (starts, ends, expandedPaths) => {
         const hasAny = Array_.isReadonlyArrayNonEmpty(starts) ||
@@ -949,22 +942,22 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         model.expandedPaths,
         model.changedPaths,
         model.affectedPaths,
-    ])), "@foldkit/devtools/overlay.js#anonymous~70")), M.when('Message', () => __foldkitBrandViewResult((lazyTabContent('Message', messageTabContent, [
+    ])), "@foldkit/devtools/overlay.js#anonymous~69")), M.when('Message', () => __foldkitBrandViewResult((lazyTabContent('Message', messageTabContent, [
         model.maybeInspectedMessage,
         model.maybeSubmodelFilter,
         model.isFlattened,
         model.expandedPaths,
         inspectedTimestamp(model),
-    ])), "@foldkit/devtools/overlay.js#anonymous~71")), M.when('Commands', () => __foldkitBrandViewResult((lazyTabContent('Commands', commandsTabContent, [
+    ])), "@foldkit/devtools/overlay.js#anonymous~70")), M.when('Commands', () => __foldkitBrandViewResult((lazyTabContent('Commands', commandsTabContent, [
         selectedCommands(model),
         model.expandedPaths,
-    ])), "@foldkit/devtools/overlay.js#anonymous~72")), M.when('Mounts', () => {
+    ])), "@foldkit/devtools/overlay.js#anonymous~71")), M.when('Mounts', () => {
         const { starts, ends } = selectedMountActivity(model);
         return __foldkitBrandViewResult((lazyTabContent('Mounts', mountsTabContent, [
             starts,
             ends,
             model.expandedPaths,
-        ])), "@foldkit/devtools/overlay.js#anonymous~73");
+        ])), "@foldkit/devtools/overlay.js#anonymous~72");
     }), M.exhaustive)), "@foldkit/devtools/overlay.js#inspectorTabContent");
     const inspectorPaneView = (model) => __foldkitBrandViewResult((h.div([
         h.Class('flex flex-col border-l min-w-0 min-h-0 flex-1 dt-inspector-pane'),
@@ -983,7 +976,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                         h.Class(clsx('dt-tab-button cursor-pointer text-base font-mono px-3 py-1', tab.isActive
                             ? 'text-dt dt-tab-active'
                             : 'text-dt-muted')),
-                    ], [h.span([], [tab.value])])), "@foldkit/devtools/overlay.js#anonymous~74"))),
+                    ], [h.span([], [tab.value])])), "@foldkit/devtools/overlay.js#anonymous~73"))),
                     ...tabs.map(tab => __foldkitBrandViewResult((h.div([
                         ...tab.panel,
                         h.Class('flex flex-col flex-1 min-h-0 min-w-0'),
@@ -993,13 +986,13 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                             : [h.Style({ display: 'none' })]),
                     ], [
                         Option.match(model.maybeInspectedModel, {
-                            onNone: () => __foldkitBrandViewResult((emptyInspectorView), "@foldkit/devtools/overlay.js#onNone~10"),
+                            onNone: () => __foldkitBrandViewResult((emptyInspectorView), "@foldkit/devtools/overlay.js#onNone~6"),
                             onSome: inspectedModel => __foldkitBrandViewResult((inspectorTabContent(model, tab.value, inspectedModel)), "@foldkit/devtools/overlay.js#onSome~7"),
                         }),
-                    ])), "@foldkit/devtools/overlay.js#anonymous~75")),
+                    ])), "@foldkit/devtools/overlay.js#anonymous~74")),
                 ])), "@foldkit/devtools/overlay.js#toView"),
             },
-            toParentMessage: message => __foldkitBrandViewResult((Message.GotInspectorTabsMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~2"),
+            toParentMessage: message => __foldkitBrandViewResult((Message.GotInspectorTabsMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~5"),
         }),
     ])), "@foldkit/devtools/overlay.js#inspectorPaneView");
     // MESSAGE LIST
@@ -1072,7 +1065,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
     ])), "@foldkit/devtools/overlay.js#scrollToTopPillView");
     const submodelFilterView = (model) => {
         const buttonLabel = Option.match(model.maybeSubmodelFilter, {
-            onNone: () => __foldkitBrandViewResult(('All Messages'), "@foldkit/devtools/overlay.js#onNone~11"),
+            onNone: () => __foldkitBrandViewResult(('All Messages'), "@foldkit/devtools/overlay.js#onNone~7"),
             onSome: submodelLabel,
         });
         return __foldkitBrandViewResult((h.submodel({
@@ -1081,7 +1074,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             view: SubmodelFilterListbox.view,
             viewInputs: {
                 items: [ALL_MESSAGES_VALUE, ...model.submodelTags],
-                maybeSelectedValue: Option.orElseSome(model.maybeSubmodelFilter, () => __foldkitBrandViewResult((ALL_MESSAGES_VALUE), "@foldkit/devtools/overlay.js#anonymous~76")),
+                maybeSelectedValue: Option.orElseSome(model.maybeSubmodelFilter, () => __foldkitBrandViewResult((ALL_MESSAGES_VALUE), "@foldkit/devtools/overlay.js#anonymous~75")),
                 itemToConfig: item => (__foldkitBrandViewResult(({
                     className: 'dt-filter-item',
                     content: h.div([h.Class('flex items-center gap-2')], [checkIconView, h.span([], [filterItemLabel(item)])]),
@@ -1109,7 +1102,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                 className: 'dt-filter-wrapper',
                 backdropClassName: 'dt-filter-backdrop',
             },
-            toParentMessage: message => __foldkitBrandViewResult((Message.GotSubmodelFilterMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~3"),
+            toParentMessage: message => __foldkitBrandViewResult((Message.GotSubmodelFilterMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~6"),
         })), "@foldkit/devtools/overlay.js#submodelFilterView");
     };
     // SETTINGS
@@ -1150,7 +1143,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             : {
                 status: h.span([h.Class(`${statusClass} text-dt-live font-medium`)], ['Live']),
                 maybeAction: Option.none(),
-            }), "@foldkit/devtools/overlay.js#anonymous~77")), M.when('Inspect', () => (__foldkitBrandViewResult(({
+            }), "@foldkit/devtools/overlay.js#anonymous~76")), M.when('Inspect', () => (__foldkitBrandViewResult(({
             status: h.span([h.Class(`${statusClass} text-dt-accent`)], [
                 model.selectedIndex === INIT_INDEX
                     ? 'Inspecting (init)'
@@ -1160,7 +1153,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                 h.Class(actionButtonClass),
                 h.OnClick(Message.ClickedFollowLatest()),
             ], ['Follow Latest →'])),
-        }), "@foldkit/devtools/overlay.js#anonymous~78"))), M.exhaustive);
+        }), "@foldkit/devtools/overlay.js#anonymous~77"))), M.exhaustive);
         const maybeClearHistoryButton = OptionExt.when(!model.isPaused, clearHistoryButton());
         return __foldkitBrandViewResult((h.header([h.Class(headerClass)], [
             status,
@@ -1206,28 +1199,28 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
     ])), "@foldkit/devtools/overlay.js#messageRowView");
     const messageListBody = (entries, startIndex, selectedIndex, isPaused, pausedAtIndex, maybeFilterTag, isFlattened) => {
         const baseTimestamp = pipe(entries, Array_.head, Option.match({
-            onNone: () => __foldkitBrandViewResult((0), "@foldkit/devtools/overlay.js#onNone~12"),
+            onNone: () => __foldkitBrandViewResult((0), "@foldkit/devtools/overlay.js#onNone~8"),
             onSome: ({ timestamp }) => __foldkitBrandViewResult((timestamp), "@foldkit/devtools/overlay.js#onSome~8"),
         }));
         const isInitSelected = selectedIndex === INIT_INDEX;
         const isFiltered = Option.isSome(maybeFilterTag);
-        const leafOrTag = (entry) => __foldkitBrandViewResult((Option.getOrElse(entry.maybeLeafTag, () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~79"))), "@foldkit/devtools/overlay.js#leafOrTag");
+        const leafOrTag = (entry) => __foldkitBrandViewResult((Option.getOrElse(entry.maybeLeafTag, () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~78"))), "@foldkit/devtools/overlay.js#leafOrTag");
         const displayTagFor = (entry) => {
             if (isFlattened) {
                 return __foldkitBrandViewResult((leafOrTag(entry)), "@foldkit/devtools/overlay.js#displayTagFor");
             }
             else {
                 return __foldkitBrandViewResult((Option.match(maybeFilterTag, {
-                    onNone: () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#onNone~13"),
-                    onSome: filterTag => __foldkitBrandViewResult((pipe(entry.submodelPath, Array_.findFirstIndex(pathTag => __foldkitBrandViewResult((pathTag === filterTag), "@foldkit/devtools/overlay.js#anonymous~80")), Option.flatMap(filterIndex => __foldkitBrandViewResult((Array_.get(entry.submodelPath, Number_.increment(filterIndex))), "@foldkit/devtools/overlay.js#anonymous~81")), Option.orElse(() => __foldkitBrandViewResult((entry.maybeLeafTag), "@foldkit/devtools/overlay.js#anonymous~82")), Option.getOrElse(() => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~83")))), "@foldkit/devtools/overlay.js#onSome~9"),
+                    onNone: () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#onNone~9"),
+                    onSome: filterTag => __foldkitBrandViewResult((pipe(entry.submodelPath, Array_.findFirstIndex(pathTag => __foldkitBrandViewResult((pathTag === filterTag), "@foldkit/devtools/overlay.js#anonymous~79")), Option.flatMap(filterIndex => __foldkitBrandViewResult((Array_.get(entry.submodelPath, Number_.increment(filterIndex))), "@foldkit/devtools/overlay.js#anonymous~80")), Option.orElse(() => __foldkitBrandViewResult((entry.maybeLeafTag), "@foldkit/devtools/overlay.js#anonymous~81")), Option.getOrElse(() => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~82")))), "@foldkit/devtools/overlay.js#onSome~9"),
                 })), "@foldkit/devtools/overlay.js#displayTagFor");
             }
         };
         const indexedEntries = pipe(entries, Array_.map((entry, arrayIndex) => (__foldkitBrandViewResult(({
             entry,
             absoluteIndex: startIndex + arrayIndex,
-        }), "@foldkit/devtools/overlay.js#anonymous~84"))), isFiltered
-            ? Array_.filter(({ entry }) => __foldkitBrandViewResult((Array_.contains(entry.submodelPath, maybeFilterTag.value)), "@foldkit/devtools/overlay.js#anonymous~85"))
+        }), "@foldkit/devtools/overlay.js#anonymous~83"))), isFiltered
+            ? Array_.filter(({ entry }) => __foldkitBrandViewResult((Array_.contains(entry.submodelPath, maybeFilterTag.value)), "@foldkit/devtools/overlay.js#anonymous~84"))
             : Function.identity);
         const messageRows = pipe(indexedEntries, Array_.map(({ entry, absoluteIndex }) => {
             const isSelected = selectedIndex === absoluteIndex;
@@ -1240,11 +1233,11 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                 isPausedHere,
                 entry.timestamp - baseTimestamp,
                 entry.isModelChanged,
-            ])), "@foldkit/devtools/overlay.js#anonymous~86");
+            ])), "@foldkit/devtools/overlay.js#anonymous~85");
         }), Array_.reverse);
         return __foldkitBrandViewResult((h.ul([
             h.Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none'),
-            h.OnScroll(scrollTop => __foldkitBrandViewResult((Message.ScrolledMessageList({ scrollTop })), "@foldkit/devtools/overlay.js#anonymous~87")),
+            h.OnScroll(scrollTop => __foldkitBrandViewResult((Message.ScrolledMessageList({ scrollTop })), "@foldkit/devtools/overlay.js#anonymous~86")),
         ], isFiltered
             ? messageRows
             : [
@@ -1300,7 +1293,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                 ], [scrubberPositionLabel(model)]),
             ])), "@foldkit/devtools/overlay.js#toView~3"),
         },
-        toParentMessage: message => __foldkitBrandViewResult((Message.GotScrubberSliderMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~4"),
+        toParentMessage: message => __foldkitBrandViewResult((Message.GotScrubberSliderMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~7"),
     })), "@foldkit/devtools/overlay.js#scrubberView");
     // FOOTER
     const isScrubberVisible = mode === 'TimeTravel';
@@ -1372,13 +1365,13 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             inspectorPaneView(model),
         ])), "@foldkit/devtools/overlay.js#messagesScreenView");
     };
-    const contentView = (model) => __foldkitBrandViewResult((M.value(model.screen).pipe(M.withReturnType(), M.when('Messages', () => __foldkitBrandViewResult((messagesScreenView(model)), "@foldkit/devtools/overlay.js#anonymous~88")), M.when('Settings', () => __foldkitBrandViewResult((settingsScreenView(model)), "@foldkit/devtools/overlay.js#anonymous~89")), M.exhaustive)), "@foldkit/devtools/overlay.js#contentView");
+    const contentView = (model) => __foldkitBrandViewResult((M.value(model.screen).pipe(M.withReturnType(), M.when('Messages', () => __foldkitBrandViewResult((messagesScreenView(model)), "@foldkit/devtools/overlay.js#anonymous~87")), M.when('Settings', () => __foldkitBrandViewResult((settingsScreenView(model)), "@foldkit/devtools/overlay.js#anonymous~88")), M.exhaustive)), "@foldkit/devtools/overlay.js#contentView");
     const panelView = (model) => __foldkitBrandViewResult((h.div([
         h.Class(clsx('fixed dt-panel dt-panel-wide bg-dt-bg border rounded-lg flex flex-col overflow-hidden font-mono text-dt', PANEL_POSITION_CLASS[position])),
     ], [
         ...Option.map(maybeBanner, banner => __foldkitBrandViewResult((h.div([
             h.Class('px-3 py-2 border-b text-sm text-dt-muted font-mono shrink-0 leading-snug'),
-        ], [banner])), "@foldkit/devtools/overlay.js#anonymous~90")).pipe(Option.toArray),
+        ], [banner])), "@foldkit/devtools/overlay.js#anonymous~89")).pipe(Option.toArray),
         headerView(model),
         contentView(model),
         footerView(model),
@@ -1388,7 +1381,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         ...OptionExt.when(model.isPaused && mode === 'TimeTravel', interactionBlocker()).pipe(Option.toArray),
         ...OptionExt.when(model.isOpen, panelView(model)).pipe(Option.toArray),
         badgeView(model),
-    ])), "@foldkit/devtools/overlay.js#anonymous~91")), "@foldkit/devtools/overlay.js#buildOverlayView");
+    ])), "@foldkit/devtools/overlay.js#anonymous~90")), "@foldkit/devtools/overlay.js#buildOverlayView");
 };
 // CREATE
 const VIEW_TRANSITION_NAME = 'foldkit-devtools';
@@ -1469,10 +1462,10 @@ const createShadowContainer = () => {
     return __foldkitBrandViewResult(({ container, shadow }), "@foldkit/devtools/overlay.js#createShadowContainer");
 };
 export const createOverlay = (store, position, mode, maybeBanner) => __foldkitBrandViewResult((Effect.gen(function* () {
-    const { container, shadow } = yield* Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((createShadowContainer()), "@foldkit/devtools/overlay.js#anonymous~94")), createdShadowContainer => __foldkitBrandViewResult((Effect.sync(() => {
+    const { container, shadow } = yield* Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((createShadowContainer()), "@foldkit/devtools/overlay.js#anonymous~93")), createdShadowContainer => __foldkitBrandViewResult((Effect.sync(() => {
         createdShadowContainer.shadow.host.remove();
         document.getElementById(VIEW_TRANSITION_STYLE_ID)?.remove();
-    })), "@foldkit/devtools/overlay.js#anonymous~95"));
+    })), "@foldkit/devtools/overlay.js#anonymous~94"));
     container.id = '__foldkit_devtools_overlay__';
     const flags = Effect.gen(function* () {
         const storeState = yield* SubscriptionRef.get(store.stateRef);
@@ -1482,7 +1475,7 @@ export const createOverlay = (store, position, mode, maybeBanner) => __foldkitBr
             isMobile: window.matchMedia(MOBILE_BREAKPOINT_QUERY).matches,
             isFlattened,
             ...toDisplayState(storeState),
-        }), "@foldkit/devtools/overlay.js#anonymous~97");
+        }), "@foldkit/devtools/overlay.js#anonymous~96");
     });
     const init = (flags) => {
         const { isFlattened, ...displayFlags } = flags;
@@ -1490,8 +1483,8 @@ export const createOverlay = (store, position, mode, maybeBanner) => __foldkitBr
         const initialSliderValue = flags.isPaused
             ? hostIndexToSliderValue(flags.pausedAtIndex, flags.startIndex)
             : sliderMax;
-        return __foldkitBrandViewResult(([
-            {
+        return __foldkitBrandViewResult(({
+            model: {
                 screen: 'Messages',
                 ...displayFlags,
                 isFlattened,
@@ -1519,8 +1512,8 @@ export const createOverlay = (store, position, mode, maybeBanner) => __foldkitBr
                 }),
                 scrubberValue: Slider.snapAndClamp(initialSliderValue, 0, sliderMax, 1),
             },
-            Option.toArray(maybeLockScroll(flags.isOpen, flags.isMobile)),
-        ]), "@foldkit/devtools/overlay.js#init");
+            commands: Option.toArray(maybeLockScroll(flags.isOpen, flags.isMobile)),
+        }), "@foldkit/devtools/overlay.js#init");
     };
     const overlayRuntime = makeElement({
         Model,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/devtools",
-  "version": "0.150.0",
+  "version": "0.151.0-canary.4c91a3b5da2b",
   "description": "In-browser DevTools overlay for Foldkit applications",
   "type": "module",
   "exports": {
@@ -15,9 +15,9 @@
   ],
   "peerDependencies": {
     "@effect/platform-browser": "4.0.0-rc.111",
-    "@foldkit/ui": "^0",
+    "@foldkit/ui": "0.151.0-canary.4c91a3b5da2b",
     "effect": "4.0.0-rc.111",
-    "foldkit": "^0"
+    "foldkit": "0.151.0-canary.4c91a3b5da2b"
   },
   "dependencies": {
     "clsx": "^2.1.1"
@@ -28,9 +28,9 @@
     "rimraf": "^6.1.3",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9",
-    "@foldkit/vite-plugin": "0.17.0",
-    "@foldkit/ui": "0.150.0",
-    "foldkit": "0.150.0"
+    "@foldkit/ui": "0.151.0-canary.4c91a3b5da2b",
+    "foldkit": "0.151.0-canary.4c91a3b5da2b",
+    "@foldkit/vite-plugin": "0.17.0-canary.4c91a3b5da2b"
   },
   "keywords": [
     "foldkit",