@foldkit/devtools 0.113.1 → 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;AAwsDD,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);
@@ -660,7 +685,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     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')], [
@@ -898,7 +923,7 @@ 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([
@@ -929,7 +954,7 @@ 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()),
@@ -1000,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),
@@ -1144,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),
     ]);
@@ -1218,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.1",
+  "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.1",
-    "foldkit": "0.113.1"
+    "@foldkit/ui": "0.114.0",
+    "foldkit": "0.114.0"
   },
   "keywords": [
     "foldkit",