@foldkit/devtools 0.113.0 → 0.114.0

package/dist/overlay.d.ts

@@ -15,7 +15,7 @@ declare const StoreService_base: Context.ServiceClass<StoreService, "foldkit/Dev
         changedPaths: HashSet.HashSet<string>;
         affectedPaths: HashSet.HashSet<string>;
     }>>;
-    jumpTo: (index: number) => Effect.Effect<void>;
+    jumpTo: (index: number) => Effect.Effect<unknown>;
     resume: Effect.Effect<void>;
     clear: Effect.Effect<void>;
     stateRef: SubscriptionRef.SubscriptionRef<StoreState>;
@@ -31,10 +31,14 @@ export declare const LockScroll: Command.CommandDefinitionNoArgs<"LockScroll", E
 export declare const UnlockScroll: Command.CommandDefinitionNoArgs<"UnlockScroll", Effect.Effect<{
     readonly _tag: "UnlockedScroll";
 }, never, never>>;
-export declare const JumpTo: Command.CommandDefinitionWithArgs<"JumpTo", {
+export declare const JumpToAndInspect: Command.CommandDefinitionWithArgs<"JumpToAndInspect", {
     index: S.Number;
 }, Effect.Effect<{
-    readonly _tag: "CompletedJump";
+    readonly _tag: "ReceivedInspectedState";
+    readonly model: unknown;
+    readonly maybeMessage: Option.Option<unknown>;
+    readonly changedPaths: HashSet.HashSet<string>;
+    readonly affectedPaths: HashSet.HashSet<string>;
 }, never, StoreService>>;
 export declare const InspectState: Command.CommandDefinitionWithArgs<"InspectState", {
     index: S.Number;

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,EAGN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AACf,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,aAAa,EAGlB,KAAK,WAAW,EAChB,KAAK,UAAU,EAKhB,MAAM,uBAAuB,CAAA;AAW9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFA2D/B,CAAC;;;;;;;;;;;;;;;;;AAmPvC,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAWjD,eAAO,MAAM,MAAM;;;;wBAUlB,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;AA+rDD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAuEhC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAGN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AACf,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,aAAa,EAGlB,KAAK,WAAW,EAChB,KAAK,UAAU,EAKhB,MAAM,uBAAuB,CAAA;AAW9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFA2D/B,CAAC;;;;;;;;;;;;;;;;;AAoPvC,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAuBjD,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;AA0tDD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAwEhC,CAAA"}

package/dist/overlay.js

@@ -81,6 +81,7 @@ const Model = S.Struct({
     expandedPaths: S.HashSet(S.String),
     changedPaths: S.HashSet(S.String),
     affectedPaths: S.HashSet(S.String),
+    maybePendingScrubIndex: S.Option(S.Number),
     inspectorTabs: InspectorTabsModel,
     // NOTE: empirically, inlining `Slider.Model` here throws
     // "Cannot read properties of undefined (reading 'ast')" when running slider
@@ -106,7 +107,6 @@ const ClickedToggle = m('ClickedToggle');
 const ClickedRow = m('ClickedRow', { index: S.Number });
 const ClickedResume = m('ClickedResume');
 const ClickedClear = m('ClickedClear');
-const CompletedJump = m('CompletedJump');
 const CompletedResume = m('CompletedResume');
 const ClickedFollowLatest = m('ClickedFollowLatest');
 const ClickedScrollToTopPill = m('ClickedScrollToTopPill');
@@ -125,6 +125,7 @@ const ReceivedInspectedState = m('ReceivedInspectedState', {
     affectedPaths: S.HashSet(S.String),
 });
 const ToggledTreeNode = m('ToggledTreeNode', { path: S.String });
+const TickedScrubFrame = m('TickedScrubFrame');
 const GotInspectorTabsMessage = m('GotInspectorTabsMessage', {
     message: S.Unknown,
 });
@@ -151,7 +152,6 @@ const Message = S.Union([
     ClickedFollowLatest,
     ClickedScrollToTopPill,
     ScrolledMessageList,
-    CompletedJump,
     CompletedResume,
     CompletedClear,
     LockedScroll,
@@ -160,6 +160,7 @@ const Message = S.Union([
     CrossedMobileBreakpoint,
     ReceivedInspectedState,
     ToggledTreeNode,
+    TickedScrubFrame,
     GotInspectorTabsMessage,
     ReceivedStoreUpdate,
     GotSubmodelFilterMessage,
@@ -232,17 +233,27 @@ class ShadowRootService extends Context.Service()('foldkit/DevToolsShadowRoot')
 }
 export const LockScroll = Command.define('LockScroll', LockedScroll)(lockScroll.pipe(Effect.as(LockedScroll())));
 export const UnlockScroll = Command.define('UnlockScroll', UnlockedScroll)(unlockScroll.pipe(Effect.as(UnlockedScroll())));
-const buildInspectionEffect = (index) => Effect.gen(function* () {
+const buildInspectionFromModel = (index, model) => Effect.gen(function* () {
     const store = yield* StoreService;
-    const model = yield* store.getModelAtIndex(index);
     const maybeMessage = yield* store.getMessageAtIndex(index);
     const diff = yield* store.getDiffAtIndex(index);
     return ReceivedInspectedState({ model, maybeMessage, ...diff });
 });
-export const JumpTo = Command.define('JumpTo', { index: S.Number }, CompletedJump)(({ index }) => Effect.gen(function* () {
+const buildInspectionEffect = (index) => Effect.gen(function* () {
+    const store = yield* StoreService;
+    const model = yield* store.getModelAtIndex(index);
+    return yield* buildInspectionFromModel(index, model);
+});
+// 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
+// from the nearest keyframe twice for a mid-segment jump. `store.jumpTo`
+// returns the model it resolved so the inspector reuses that single
+// resolution. Inspect-only navigation (no host pause) still uses
+// `InspectState`, which resolves once on its own.
+export const JumpToAndInspect = Command.define('JumpToAndInspect', { index: S.Number }, ReceivedInspectedState)(({ index }) => Effect.gen(function* () {
     const store = yield* StoreService;
-    yield* store.jumpTo(index);
-    return CompletedJump();
+    const model = yield* store.jumpTo(index);
+    return yield* buildInspectionFromModel(index, model);
 }));
 export const InspectState = Command.define('InspectState', { index: S.Number }, ReceivedInspectedState)(({ index }) => buildInspectionEffect(index));
 export const InspectLatest = Command.define('InspectLatest', ReceivedInspectedState)(Effect.gen(function* () {
@@ -274,7 +285,7 @@ const makeUpdate = (store, shadow, mode) => {
     const resume = Command.mapEffect(Resume(), provideContext);
     const clear = Command.mapEffect(Clear(), provideContext);
     const scrollToTop = Command.mapEffect(ScrollToTop(), provideContext);
-    const jumpTo = (index) => Command.mapEffect(JumpTo({ index }), provideContext);
+    const jumpToAndInspect = (index) => Command.mapEffect(JumpToAndInspect({ index }), provideContext);
     const inspectState = (index) => Command.mapEffect(InspectState({ index }), provideContext);
     const toggleScrollLock = (shouldLock) => shouldLock ? LockScroll() : UnlockScroll();
     return (model, message) => M.value(message).pipe(M.withReturnType(), M.tags({
@@ -289,10 +300,7 @@ const makeUpdate = (store, shadow, mode) => {
             evo(model, { isMobile: () => isMobile }),
             OptionExt.when(model.isOpen, toggleScrollLock(isMobile)).pipe(Option.toArray),
         ],
-        ClickedRow: ({ index }) => M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => [
-            model,
-            [jumpTo(index), inspectState(index)],
-        ]), M.when('Inspect', () => [
+        ClickedRow: ({ index }) => M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => [model, [jumpToAndInspect(index)]]), M.when('Inspect', () => [
             evo(model, {
                 selectedIndex: () => index,
                 isFollowingLatest: () => false,
@@ -438,21 +446,34 @@ const makeUpdate = (store, shadow, mode) => {
         GotScrubberSliderMessage: ({ message: sliderMessage }) => {
             const [nextSlider, sliderCommands, maybeOutMessage] = Slider.update(model.scrubberSlider, sliderMessage);
             const mappedSliderCommands = Command.mapMessages(sliderCommands, innerMessage => GotScrubberSliderMessage({ message: innerMessage }));
-            const additionalCommands = Option.match(maybeOutMessage, {
-                onNone: () => [],
+            // 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: () => model.maybePendingScrubIndex,
                 onSome: outMessage => M.value(outMessage).pipe(M.tagsExhaustive({
-                    ChangedValue: ({ value }) => {
-                        const hostIndex = sliderValueToHostIndex(value, model.startIndex);
-                        return [jumpTo(hostIndex), inspectState(hostIndex)];
-                    },
+                    ChangedValue: ({ value }) => Option.some(sliderValueToHostIndex(value, model.startIndex)),
                 })),
             });
             return [
-                evo(model, { scrubberSlider: () => nextSlider }),
-                [...mappedSliderCommands, ...additionalCommands],
+                evo(model, {
+                    scrubberSlider: () => nextSlider,
+                    maybePendingScrubIndex: () => nextMaybePendingScrubIndex,
+                }),
+                mappedSliderCommands,
             ];
         },
-    }), M.tag('CompletedJump', 'CompletedResume', 'CompletedClear', 'LockedScroll', 'UnlockedScroll', 'ScrolledToTop', () => [model, []]), M.exhaustive);
+        TickedScrubFrame: () => Option.match(model.maybePendingScrubIndex, {
+            onNone: () => [model, []],
+            onSome: (hostIndex) => [
+                evo(model, { maybePendingScrubIndex: () => Option.none() }),
+                [jumpToAndInspect(hostIndex)],
+            ],
+        }),
+    }), M.tag('CompletedResume', 'CompletedClear', 'LockedScroll', 'UnlockedScroll', 'ScrolledToTop', () => [model, []]), M.exhaustive);
 };
 // SUBSCRIPTION
 const makeOverlaySubscriptions = (store, shadow) => {
@@ -465,6 +486,10 @@ const makeOverlaySubscriptions = (store, shadow) => {
         toParentMessage: message => GotScrubberSliderMessage({ message }),
     });
     const ownSubscriptions = Subscription.make()(_entry => ({
+        scrubFrame: Subscription.animationFrame({
+            isActive: model => Option.isSome(model.maybePendingScrubIndex),
+            toMessage: () => TickedScrubFrame(),
+        }),
         storeUpdates: Subscription.persistent(Stream.concat(Stream.fromEffect(SubscriptionRef.get(store.stateRef).pipe(Effect.map(state => ReceivedStoreUpdate(toDisplayState(state))))), Stream.map(SubscriptionRef.changes(store.stateRef), state => ReceivedStoreUpdate(toDisplayState(state))))),
         mobileBreakpoint: Subscription.persistent(Stream.callback(queue => Effect.acquireRelease(Effect.sync(() => {
             const mediaQuery = window.matchMedia(MOBILE_BREAKPOINT_QUERY);
@@ -529,8 +554,8 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         ], []),
     ]);
     const tagLabelView = (tag) => h.span([h.Key('tag'), h.Class('json-tag')], [tag]);
-    const diffDotView = h.span([h.Key('diffdot'), h.Class('diff-dot')], []);
-    const inlineDiffDotView = h.span([h.Class('diff-dot-inline')], []);
+    const diffDotView = () => h.span([h.Key('diffdot'), h.Class('diff-dot')], []);
+    const inlineDiffDotView = () => h.span([h.Class('diff-dot-inline')], []);
     const flattenTree = ({ value, treePath, depth, key, ...shared }) => {
         const { rootPath, expandedPaths, changedPaths, affectedPaths, accumulator, indentRootChildren, } = shared;
         const isRoot = treePath === rootPath;
@@ -583,7 +608,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                 })),
                 indent,
             ], [
-                ...(hasDiffDot ? [diffDotView] : []),
+                ...(hasDiffDot ? [diffDotView()] : []),
                 ...(String_.isNonEmpty(key) ? [keyView(key)] : []),
                 leafValueView(value),
             ]);
@@ -603,7 +628,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             ...(isRoot ? [] : [h.OnClick(ToggledTreeNode({ path: treePath }))]),
         ], [
             ...(isRoot ? [] : [arrowView(isExpanded)]),
-            ...(!isRoot && hasDiffDot ? [diffDotView] : []),
+            ...(!isRoot && hasDiffDot ? [diffDotView()] : []),
             ...(String_.isNonEmpty(key) ? [keyView(key)] : []),
             ...(String_.isNonEmpty(tag) ? [tagLabelView(tag)] : []),
             h.span([h.Key('value'), h.Class('json-preview')], [preview]),
@@ -657,10 +682,10 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                 : `+${remainingMs.toFixed(1)}ms`;
         }), Option.getOrElse(() => ''));
     };
-    const emptyInspectorView = h.div([
+    const emptyInspectorView = () => h.div([
         h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
     ], ['Click a message to inspect']);
-    const noMessageView = h.div([
+    const noMessageView = () => h.div([
         h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
     ], ['init: no Message']);
     const modelTabContent = (inspectedModel, expandedPaths, changedPaths, affectedPaths) => treeView(inspectedModel, 'root', expandedPaths, changedPaths, affectedPaths, Option.none(), true);
@@ -688,7 +713,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         return current;
     };
     const messageTabContent = (maybeInspectedMessage, maybeSubmodelFilter, expandedPaths, timestamp) => Option.match(maybeInspectedMessage, {
-        onNone: () => noMessageView,
+        onNone: noMessageView,
         onSome: rawMessage => {
             const message = unwrapIfFiltered(rawMessage, maybeSubmodelFilter);
             return h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0')], [
@@ -860,7 +885,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                             : [h.Style({ display: 'none' })]),
                     ], [
                         Option.match(model.maybeInspectedModel, {
-                            onNone: () => emptyInspectorView,
+                            onNone: () => emptyInspectorView(),
                             onSome: inspectedModel => inspectorTabContent(model, tab.value, inspectedModel),
                         }),
                     ])),
@@ -898,10 +923,10 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     const headerClass = 'flex items-center justify-between px-3 py-1.5 border-b shrink-0';
     const actionButtonClass = 'dt-resume-button bg-transparent border-none text-dt-live cursor-pointer text-base font-mono font-medium';
     const statusClass = 'text-base font-mono';
-    const clearHistoryButton = h.button([h.Class(headerButtonClass), h.OnClick(ClickedClear())], ['Clear history']);
+    const clearHistoryButton = () => h.button([h.Class(headerButtonClass), h.OnClick(ClickedClear())], ['Clear history']);
     const submodelLabel = (tag) => pipe(tag, String_.replace(/^Got/, ''), String_.replace(/Message$/, ''));
     const CHECK_ICON = 'M4.5 12.75l6 6 9-13.5';
-    const checkIconView = h.svg([
+    const checkIconView = () => h.svg([
         h.AriaHidden(true),
         h.Class('dt-filter-check shrink-0'),
         h.Xmlns('http://www.w3.org/2000/svg'),
@@ -910,11 +935,15 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         h.StrokeWidth('2'),
         h.Stroke('currentColor'),
     ], [
-        h.path([h.D(CHECK_ICON), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
+        h.path([
+            h.D(CHECK_ICON),
+            h.StrokeLinecap('round'),
+            h.StrokeLinejoin('round'),
+        ], []),
     ]);
     const filterItemLabel = (item) => String_.isNonEmpty(item) ? submodelLabel(item) : 'All Messages';
     const ARROW_UP = 'M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18';
-    const arrowUpIconView = h.svg([
+    const arrowUpIconView = () => h.svg([
         h.AriaHidden(true),
         h.Class('dt-scroll-pill-icon shrink-0'),
         h.Xmlns('http://www.w3.org/2000/svg'),
@@ -925,12 +954,12 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     ], [
         h.path([h.D(ARROW_UP), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
     ]);
-    const scrollToTopPillView = h.button([
+    const scrollToTopPillView = () => h.button([
         h.Key('scroll-pill'),
         h.Class('dt-scroll-pill'),
         h.OnClick(ClickedScrollToTopPill()),
     ], [
-        arrowUpIconView,
+        arrowUpIconView(),
         h.span([h.Class('dt-scroll-pill-text')], ['Jump to top']),
     ]);
     const submodelFilterView = (model) => {
@@ -946,7 +975,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                 items: [ALL_MESSAGES_VALUE, ...model.submodelTags],
                 itemToConfig: item => ({
                     className: 'dt-filter-item',
-                    content: h.div([h.Class('flex items-center gap-2')], [checkIconView, h.span([], [filterItemLabel(item)])]),
+                    content: h.div([h.Class('flex items-center gap-2')], [checkIconView(), h.span([], [filterItemLabel(item)])]),
                 }),
                 buttonContent: h.span([h.Class('flex flex-1 items-center justify-between')], [
                     h.span([], [buttonLabel]),
@@ -996,7 +1025,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             ]),
             maybeAction: OptionExt.when(!model.isFollowingLatest, h.button([h.Class(actionButtonClass), h.OnClick(ClickedFollowLatest())], ['Follow Latest →'])),
         })), M.exhaustive);
-        const maybeClearHistoryButton = OptionExt.when(!model.isPaused, clearHistoryButton);
+        const maybeClearHistoryButton = OptionExt.when(!model.isPaused, clearHistoryButton());
         return h.header([h.Class(headerClass)], [
             status,
             ...Option.toArray(maybeAction),
@@ -1007,12 +1036,12 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         h.Class(clsx(ROW_BASE, { selected: isSelected })),
         h.OnClick(ClickedRow({ index: INIT_INDEX })),
     ], [
-        ...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView] : [])).pipe(Option.toArray),
+        ...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView()] : [])).pipe(Option.toArray),
         h.span([h.Class('dot-column')], []),
         h.span([h.Class(indexClass)], []),
         h.span([h.Class('text-base text-dt-muted font-mono')], ['init']),
     ]);
-    const pauseIconView = h.svg([
+    const pauseIconView = () => h.svg([
         h.AriaHidden(true),
         h.Class('dt-pause-icon'),
         h.Xmlns('http://www.w3.org/2000/svg'),
@@ -1031,8 +1060,8 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         h.Class(clsx(ROW_BASE, { selected: isSelected })),
         h.OnClick(ClickedRow({ index: absoluteIndex })),
     ], [
-        ...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView] : [])).pipe(Option.toArray),
-        h.span([h.Class('dot-column')], isModelChanged ? [inlineDiffDotView] : []),
+        ...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView()] : [])).pipe(Option.toArray),
+        h.span([h.Class('dot-column')], isModelChanged ? [inlineDiffDotView()] : []),
         h.span([h.Class(indexClass)], [String(absoluteIndex + 1)]),
         h.span([h.Class('text-base text-dt font-mono flex-1 truncate')], [tag]),
         h.span([
@@ -1140,16 +1169,16 @@ const makeView = (position, mode, shadow, maybeBanner) => {
                     onEmpty: () => [],
                     onNonEmpty: () => [submodelFilterView(model)],
                 }),
-                ...OptionExt.when(!model.isFollowingTop, scrollToTopPillView).pipe(Option.toArray),
+                ...OptionExt.when(!model.isFollowingTop, scrollToTopPillView()).pipe(Option.toArray),
                 messageListView(model),
             ]),
             inspectorPaneView(model),
         ]),
         ...OptionExt.when(isScrubberVisible, scrubberView(model)).pipe(Option.toArray),
     ]);
-    const interactionBlocker = h.div([h.Class('dt-interaction-blocker')], []);
+    const interactionBlocker = () => h.div([h.Class('dt-interaction-blocker')], []);
     return (model) => h.div([], [
-        ...OptionExt.when(model.isPaused && mode === 'TimeTravel', interactionBlocker).pipe(Option.toArray),
+        ...OptionExt.when(model.isPaused && mode === 'TimeTravel', interactionBlocker()).pipe(Option.toArray),
         ...OptionExt.when(model.isOpen, panelView(model)).pipe(Option.toArray),
         badgeView(model),
     ]);
@@ -1214,6 +1243,7 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
                 expandedPaths: HashSet.empty(),
                 changedPaths: HashSet.empty(),
                 affectedPaths: HashSet.empty(),
+                maybePendingScrubIndex: Option.none(),
                 inspectorTabs: Tabs.init({ id: INSPECTOR_TABS_ID }),
                 scrubberSlider: Slider.init({
                     id: SCRUBBER_SLIDER_ID,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/devtools",
-  "version": "0.113.0",
+  "version": "0.114.0",
   "description": "In-browser DevTools overlay for Foldkit applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,8 +28,8 @@
     "effect": "4.0.0-beta.83",
     "rimraf": "^6.1.3",
     "typescript": "^6.0.3",
-    "@foldkit/ui": "0.113.0",
-    "foldkit": "0.113.0"
+    "@foldkit/ui": "0.114.0",
+    "foldkit": "0.114.0"
   },
   "keywords": [
     "foldkit",