@foldkit/devtools 0.133.0 → 0.134.0

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;AAK9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFAuDpD,CAAC;;;;;;;;;;;;;;;;;AAiQlB,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAgCjD,eAAO,MAAM,oBAAoB;;;;;iBAiBhC,CAAA;AAuBD,eAAO,MAAM,gBAAgB;;;;;;;;wBAU5B,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;wBAIqB,CAAA;AAE9C,eAAO,MAAM,aAAa;;;;;;wBASzB,CAAA;AAED,eAAO,MAAM,MAAM;;wBASlB,CAAA;AAED,eAAO,MAAM,KAAK;;wBASjB,CAAA;AAED,eAAO,MAAM,WAAW;;6BAYvB,CAAA;AA47DD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAkFhC,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;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;;oFAsDR,CAAC;;;;;;;;;;;;;;;;;AAkQ9D,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAgCjD,eAAO,MAAM,oBAAoB;;;;;iBAiBhC,CAAA;AAuBD,eAAO,MAAM,gBAAgB;;;;;;;;wBAU5B,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;wBAIqB,CAAA;AAE9C,eAAO,MAAM,aAAa;;;;;;wBASzB,CAAA;AAED,eAAO,MAAM,MAAM;;wBASlB,CAAA;AAED,eAAO,MAAM,KAAK;;wBASjB,CAAA;AAED,eAAO,MAAM,WAAW;;6BAYvB,CAAA;AAu9DD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAkFhC,CAAA"}

package/dist/overlay.js

@@ -5,7 +5,7 @@ import { KeyValueStore } from 'effect/unstable/persistence';
 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';
-import { createKeyedLazy, createLazy, html } from 'foldkit/html';
+import { createKeyedLazy, createLazy, } from 'foldkit/html';
 import { m } from 'foldkit/message';
 import { makeElement } from 'foldkit/runtime';
 import { ts } from 'foldkit/schema';
@@ -574,15 +574,32 @@ const PANEL_POSITION_CLASS = {
     TopRight: 'dt-panel-tr',
     TopLeft: 'dt-panel-tl',
 };
+// NOTE: the builder arrives with the first render, so the helper closures
+// (and their createLazy slots) are built once on that render and reused.
+//
+// Required, not just an optimization. `resolveOrCache` compares
+// `previousEntry.fn === fn`, so rebuilding the helpers each render would miss
+// every memo on every render. Hoisting only the lazy slots out does not help;
+// the closures themselves have to be reference-stable.
+//
+// Safe despite the "thread `h`, never store it" rule because the overlay owns
+// its own root frame and the builder is the runtime's process-wide singleton,
+// so the captured object is the one every later render would hand back.
 const makeView = (position, mode, shadow, maybeBanner) => {
-    const h = html();
+    let viewWithBuilder;
+    return __foldkitBrandViewResult(((model, h) => {
+        viewWithBuilder ??= buildOverlayView(position, mode, shadow, maybeBanner, h);
+        return __foldkitBrandViewResult((viewWithBuilder(model)), "@foldkit/devtools/overlay.js#anonymous~52");
+    }), "@foldkit/devtools/overlay.js#makeView");
+};
+const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
     const lazyTreeNode = createKeyedLazy();
     const lazyMessageRow = createKeyedLazy();
     const lazyTabContent = createKeyedLazy();
     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~52")), M.when(Predicate.isUndefined, () => __foldkitBrandViewResult((leafSpan('json-null italic', 'undefined')), "@foldkit/devtools/overlay.js#anonymous~53")), M.when(Predicate.isString, stringValue => __foldkitBrandViewResult((leafSpan('json-string', `"${stringValue}"`)), "@foldkit/devtools/overlay.js#anonymous~54")), M.when(Predicate.isNumber, numberValue => __foldkitBrandViewResult((leafSpan('json-number', String(numberValue))), "@foldkit/devtools/overlay.js#anonymous~55")), M.when(Predicate.isBoolean, booleanValue => __foldkitBrandViewResult((leafSpan('json-boolean', String(booleanValue))), "@foldkit/devtools/overlay.js#anonymous~56")), M.orElse(unknownValue => __foldkitBrandViewResult((leafSpan('json-null', String(unknownValue))), "@foldkit/devtools/overlay.js#anonymous~57")))), "@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~53")), M.when(Predicate.isUndefined, () => __foldkitBrandViewResult((leafSpan('json-null italic', 'undefined')), "@foldkit/devtools/overlay.js#anonymous~54")), M.when(Predicate.isString, stringValue => __foldkitBrandViewResult((leafSpan('json-string', `"${stringValue}"`)), "@foldkit/devtools/overlay.js#anonymous~55")), M.when(Predicate.isNumber, numberValue => __foldkitBrandViewResult((leafSpan('json-number', String(numberValue))), "@foldkit/devtools/overlay.js#anonymous~56")), M.when(Predicate.isBoolean, booleanValue => __foldkitBrandViewResult((leafSpan('json-boolean', String(booleanValue))), "@foldkit/devtools/overlay.js#anonymous~57")), M.orElse(unknownValue => __foldkitBrandViewResult((leafSpan('json-null', String(unknownValue))), "@foldkit/devtools/overlay.js#anonymous~58")))), "@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';
@@ -656,16 +673,16 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                 treePath: `${treePath}.${arrayIndex}`,
                 depth: childDepth,
                 key: String(arrayIndex),
-            })), "@foldkit/devtools/overlay.js#anonymous~58"));
+            })), "@foldkit/devtools/overlay.js#anonymous~59"));
         }
         else if (Predicate.isObject(value)) {
-            pipe(value, Record.toEntries, Array_.filter(([entryKey]) => __foldkitBrandViewResult((entryKey !== '_tag'), "@foldkit/devtools/overlay.js#anonymous~59")), Array_.forEach(([entryKey, childValue]) => __foldkitBrandViewResult((flattenTree({
+            pipe(value, Record.toEntries, Array_.filter(([entryKey]) => __foldkitBrandViewResult((entryKey !== '_tag'), "@foldkit/devtools/overlay.js#anonymous~60")), Array_.forEach(([entryKey, childValue]) => __foldkitBrandViewResult((flattenTree({
                 ...shared,
                 value: childValue,
                 treePath: `${treePath}.${entryKey}`,
                 depth: childDepth,
                 key: entryKey,
-            })), "@foldkit/devtools/overlay.js#anonymous~60")));
+            })), "@foldkit/devtools/overlay.js#anonymous~61")));
         }
     };
     const flatNodeView = (value, treePath, depth, key, nodeIsExpandable, isExpanded, isChanged, isAffected, isRoot, tag) => {
@@ -683,7 +700,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                     'diff-changed': isChanged,
                 })),
                 indent,
-            ], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~61")))), "@foldkit/devtools/overlay.js#flatNodeView");
+            ], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~62")))), "@foldkit/devtools/overlay.js#flatNodeView");
         }
         const preview = isExpanded
             ? Array.isArray(value)
@@ -705,7 +722,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             })),
             indent,
             ...(isRoot ? [] : [h.OnClick(ToggledTreeNode({ path: treePath }))]),
-        ], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~62")))), "@foldkit/devtools/overlay.js#flatNodeView");
+        ], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~63")))), "@foldkit/devtools/overlay.js#flatNodeView");
     };
     const renderFlatNode = (node) => __foldkitBrandViewResult((lazyTreeNode(node.treePath, flatNodeView, [
         node.value,
@@ -729,7 +746,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             changedPaths,
             affectedPaths,
             depth: 0,
-            key: Option.getOrElse(maybeRootLabel, () => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~63")),
+            key: Option.getOrElse(maybeRootLabel, () => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~64")),
             accumulator: nodes,
             indentRootChildren,
         });
@@ -752,8 +769,8 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             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~64");
-        }), Option.getOrElse(() => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~65")))), "@foldkit/devtools/overlay.js#inspectedTimestamp");
+                : `+${remainingMs.toFixed(1)}ms`), "@foldkit/devtools/overlay.js#anonymous~65");
+        }), Option.getOrElse(() => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~66")))), "@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'),
@@ -817,7 +834,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             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~66")), M.when('Inspect', () => __foldkitBrandViewResult((model.selectedIndex), "@foldkit/devtools/overlay.js#anonymous~67")), 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~67")), M.when('Inspect', () => __foldkitBrandViewResult((model.selectedIndex), "@foldkit/devtools/overlay.js#anonymous~68")), M.exhaustive)), "@foldkit/devtools/overlay.js#selectedHistoryIndex");
     };
     const selectedCommands = (model) => {
         const selectedIndex = selectedHistoryIndex(model);
@@ -825,7 +842,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             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~68")), Option.getOrElse(() => __foldkitBrandViewResult((NO_COMMANDS), "@foldkit/devtools/overlay.js#anonymous~69")))), "@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~69")), Option.getOrElse(() => __foldkitBrandViewResult((NO_COMMANDS), "@foldkit/devtools/overlay.js#anonymous~70")))), "@foldkit/devtools/overlay.js#selectedCommands");
         }
     };
     const flattenCommand = (command, index, expandedPaths) => {
@@ -858,7 +875,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         ], 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~70")))), "@foldkit/devtools/overlay.js#onNonEmpty~5"),
+        ])), "@foldkit/devtools/overlay.js#anonymous~71")))), "@foldkit/devtools/overlay.js#onNonEmpty~5"),
     })), "@foldkit/devtools/overlay.js#commandsTabContent");
     const selectedMountActivity = (model) => {
         const selectedIndex = selectedHistoryIndex(model);
@@ -903,7 +920,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         ...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~71")),
+        ])), "@foldkit/devtools/overlay.js#anonymous~72")),
     ])), "@foldkit/devtools/overlay.js#mountListSection");
     const mountsTabContent = (starts, ends, expandedPaths) => {
         const hasAny = Array_.isReadonlyArrayNonEmpty(starts) ||
@@ -929,22 +946,22 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         model.expandedPaths,
         model.changedPaths,
         model.affectedPaths,
-    ])), "@foldkit/devtools/overlay.js#anonymous~72")), M.when('Message', () => __foldkitBrandViewResult((lazyTabContent('Message', messageTabContent, [
+    ])), "@foldkit/devtools/overlay.js#anonymous~73")), M.when('Message', () => __foldkitBrandViewResult((lazyTabContent('Message', messageTabContent, [
         model.maybeInspectedMessage,
         model.maybeSubmodelFilter,
         model.isFlattened,
         model.expandedPaths,
         inspectedTimestamp(model),
-    ])), "@foldkit/devtools/overlay.js#anonymous~73")), M.when('Commands', () => __foldkitBrandViewResult((lazyTabContent('Commands', commandsTabContent, [
+    ])), "@foldkit/devtools/overlay.js#anonymous~74")), M.when('Commands', () => __foldkitBrandViewResult((lazyTabContent('Commands', commandsTabContent, [
         selectedCommands(model),
         model.expandedPaths,
-    ])), "@foldkit/devtools/overlay.js#anonymous~74")), M.when('Mounts', () => {
+    ])), "@foldkit/devtools/overlay.js#anonymous~75")), M.when('Mounts', () => {
         const { starts, ends } = selectedMountActivity(model);
         return __foldkitBrandViewResult((lazyTabContent('Mounts', mountsTabContent, [
             starts,
             ends,
             model.expandedPaths,
-        ])), "@foldkit/devtools/overlay.js#anonymous~75");
+        ])), "@foldkit/devtools/overlay.js#anonymous~76");
     }), 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'),
@@ -963,7 +980,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                         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~76"))),
+                    ], [h.span([], [tab.value])])), "@foldkit/devtools/overlay.js#anonymous~77"))),
                     ...tabs.map(tab => __foldkitBrandViewResult((h.div([
                         ...tab.panel,
                         h.Class('flex flex-col flex-1 min-h-0 min-w-0'),
@@ -976,7 +993,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                             onNone: () => __foldkitBrandViewResult((emptyInspectorView), "@foldkit/devtools/overlay.js#onNone~10"),
                             onSome: inspectedModel => __foldkitBrandViewResult((inspectorTabContent(model, tab.value, inspectedModel)), "@foldkit/devtools/overlay.js#onSome~7"),
                         }),
-                    ])), "@foldkit/devtools/overlay.js#anonymous~77")),
+                    ])), "@foldkit/devtools/overlay.js#anonymous~78")),
                 ])), "@foldkit/devtools/overlay.js#toView"),
             },
             toParentMessage: message => __foldkitBrandViewResult((GotInspectorTabsMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~2"),
@@ -1053,7 +1070,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             view: SubmodelFilterListbox.view,
             viewInputs: {
                 items: [ALL_MESSAGES_VALUE, ...model.submodelTags],
-                maybeSelectedValue: Option.orElseSome(model.maybeSubmodelFilter, () => __foldkitBrandViewResult((ALL_MESSAGES_VALUE), "@foldkit/devtools/overlay.js#anonymous~78")),
+                maybeSelectedValue: Option.orElseSome(model.maybeSubmodelFilter, () => __foldkitBrandViewResult((ALL_MESSAGES_VALUE), "@foldkit/devtools/overlay.js#anonymous~79")),
                 itemToConfig: item => (__foldkitBrandViewResult(({
                     className: 'dt-filter-item',
                     content: h.div([h.Class('flex items-center gap-2')], [checkIconView, h.span([], [filterItemLabel(item)])]),
@@ -1099,7 +1116,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                 ], ['Label each row with its innermost Message']),
             ]),
         ])), "@foldkit/devtools/overlay.js#toView~2"),
-    })), "@foldkit/devtools/overlay.js#flattenSwitchView");
+    }, h)), "@foldkit/devtools/overlay.js#flattenSwitchView");
     const settingsScreenView = (model) => __foldkitBrandViewResult((h.div([h.Class('flex flex-col flex-1 min-h-0 overflow-y-auto overscroll-none')], [
         h.div([h.Class('flex flex-col')], [
             h.span([h.Class('dt-settings-section-title')], ['Message List']),
@@ -1119,14 +1136,14 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             : {
                 status: h.span([h.Class(`${statusClass} text-dt-live font-medium`)], ['Live']),
                 maybeAction: Option.none(),
-            }), "@foldkit/devtools/overlay.js#anonymous~79")), M.when('Inspect', () => (__foldkitBrandViewResult(({
+            }), "@foldkit/devtools/overlay.js#anonymous~80")), M.when('Inspect', () => (__foldkitBrandViewResult(({
             status: h.span([h.Class(`${statusClass} text-dt-accent`)], [
                 model.selectedIndex === INIT_INDEX
                     ? 'Inspecting (init)'
                     : `Inspecting (${model.selectedIndex + 1})`,
             ]),
             maybeAction: OptionExt.when(!model.isFollowingLatest, h.button([h.Class(actionButtonClass), h.OnClick(ClickedFollowLatest())], ['Follow Latest →'])),
-        }), "@foldkit/devtools/overlay.js#anonymous~80"))), M.exhaustive);
+        }), "@foldkit/devtools/overlay.js#anonymous~81"))), M.exhaustive);
         const maybeClearHistoryButton = OptionExt.when(!model.isPaused, clearHistoryButton());
         return __foldkitBrandViewResult((h.header([h.Class(headerClass)], [
             status,
@@ -1177,7 +1194,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         }));
         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~81"))), "@foldkit/devtools/overlay.js#leafOrTag");
+        const leafOrTag = (entry) => __foldkitBrandViewResult((Option.getOrElse(entry.maybeLeafTag, () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~82"))), "@foldkit/devtools/overlay.js#leafOrTag");
         const displayTagFor = (entry) => {
             if (isFlattened) {
                 return __foldkitBrandViewResult((leafOrTag(entry)), "@foldkit/devtools/overlay.js#displayTagFor");
@@ -1185,15 +1202,15 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             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~82")), Option.flatMap(filterIndex => __foldkitBrandViewResult((Array_.get(entry.submodelPath, Number_.increment(filterIndex))), "@foldkit/devtools/overlay.js#anonymous~83")), Option.orElse(() => __foldkitBrandViewResult((entry.maybeLeafTag), "@foldkit/devtools/overlay.js#anonymous~84")), Option.getOrElse(() => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~85")))), "@foldkit/devtools/overlay.js#onSome~9"),
+                    onSome: filterTag => __foldkitBrandViewResult((pipe(entry.submodelPath, Array_.findFirstIndex(pathTag => __foldkitBrandViewResult((pathTag === filterTag), "@foldkit/devtools/overlay.js#anonymous~83")), Option.flatMap(filterIndex => __foldkitBrandViewResult((Array_.get(entry.submodelPath, Number_.increment(filterIndex))), "@foldkit/devtools/overlay.js#anonymous~84")), Option.orElse(() => __foldkitBrandViewResult((entry.maybeLeafTag), "@foldkit/devtools/overlay.js#anonymous~85")), Option.getOrElse(() => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~86")))), "@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~86"))), isFiltered
-            ? Array_.filter(({ entry }) => __foldkitBrandViewResult((Array_.contains(entry.submodelPath, maybeFilterTag.value)), "@foldkit/devtools/overlay.js#anonymous~87"))
+        }), "@foldkit/devtools/overlay.js#anonymous~87"))), isFiltered
+            ? Array_.filter(({ entry }) => __foldkitBrandViewResult((Array_.contains(entry.submodelPath, maybeFilterTag.value)), "@foldkit/devtools/overlay.js#anonymous~88"))
             : Function.identity);
         const messageRows = pipe(indexedEntries, Array_.map(({ entry, absoluteIndex }) => {
             const isSelected = selectedIndex === absoluteIndex;
@@ -1206,11 +1223,11 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                 isPausedHere,
                 entry.timestamp - baseTimestamp,
                 entry.isModelChanged,
-            ])), "@foldkit/devtools/overlay.js#anonymous~88");
+            ])), "@foldkit/devtools/overlay.js#anonymous~89");
         }), Array_.reverse);
         return __foldkitBrandViewResult((h.ul([
             h.Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none'),
-            h.OnScroll(scrollTop => __foldkitBrandViewResult((ScrolledMessageList({ scrollTop })), "@foldkit/devtools/overlay.js#anonymous~89")),
+            h.OnScroll(scrollTop => __foldkitBrandViewResult((ScrolledMessageList({ scrollTop })), "@foldkit/devtools/overlay.js#anonymous~90")),
         ], isFiltered
             ? messageRows
             : [
@@ -1323,13 +1340,13 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             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~90")), M.when('Settings', () => __foldkitBrandViewResult((settingsScreenView(model)), "@foldkit/devtools/overlay.js#anonymous~91")), 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~91")), M.when('Settings', () => __foldkitBrandViewResult((settingsScreenView(model)), "@foldkit/devtools/overlay.js#anonymous~92")), 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~92")).pipe(Option.toArray),
+        ], [banner])), "@foldkit/devtools/overlay.js#anonymous~93")).pipe(Option.toArray),
         headerView(model),
         contentView(model),
         footerView(model),
@@ -1339,7 +1356,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         ...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~93")), "@foldkit/devtools/overlay.js#makeView");
+    ])), "@foldkit/devtools/overlay.js#anonymous~94")), "@foldkit/devtools/overlay.js#buildOverlayView");
 };
 // CREATE
 const createShadowContainer = () => {
@@ -1367,9 +1384,9 @@ 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~96")), createdShadowContainer => __foldkitBrandViewResult((Effect.sync(() => {
+    const { container, shadow } = yield* Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((createShadowContainer()), "@foldkit/devtools/overlay.js#anonymous~97")), createdShadowContainer => __foldkitBrandViewResult((Effect.sync(() => {
         createdShadowContainer.shadow.host.remove();
-    })), "@foldkit/devtools/overlay.js#anonymous~97"));
+    })), "@foldkit/devtools/overlay.js#anonymous~98"));
     container.id = '__foldkit_devtools_overlay__';
     const flags = Effect.gen(function* () {
         const storeState = yield* SubscriptionRef.get(store.stateRef);
@@ -1379,7 +1396,7 @@ export const createOverlay = (store, position, mode, maybeBanner) => __foldkitBr
             isMobile: window.matchMedia(MOBILE_BREAKPOINT_QUERY).matches,
             isFlattened,
             ...toDisplayState(storeState),
-        }), "@foldkit/devtools/overlay.js#anonymous~99");
+        }), "@foldkit/devtools/overlay.js#anonymous~100");
     });
     const init = (flags) => {
         const { isFlattened, ...displayFlags } = flags;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/devtools",
-  "version": "0.133.0",
+  "version": "0.134.0",
   "description": "In-browser DevTools overlay for Foldkit applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -31,9 +31,9 @@
     "rimraf": "^6.1.3",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9",
-    "@foldkit/ui": "0.133.0",
+    "@foldkit/ui": "0.134.0",
     "@foldkit/vite-plugin": "0.11.2",
-    "foldkit": "0.133.0"
+    "foldkit": "0.134.0"
   },
   "keywords": [
     "foldkit",