@foldkit/devtools 0.126.0 → 0.128.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;AAW9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFAyDnC,CAAC;;;;;;;;;;;;;;;;;AAyQnC,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;AA66DD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAgFhC,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;AAW9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFAkD1B,CAAC;;;;;;;;;;;;;;;;;AAqQ5C,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;AAq6DD,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

@@ -40,18 +40,8 @@ const INSPECTOR_TABS_ID = 'dt-inspector';
 const SUBMODEL_FILTER_ID = 'dt-submodel-filter';
 const FLATTEN_SWITCH_ID = 'dt-flatten-switch';
 const SCRUBBER_SLIDER_ID = 'dt-scrubber';
-const InspectorTabsModel = S.Struct({
-    id: S.String,
-    activeIndex: S.Number,
-    focusedIndex: S.Number,
-    activationMode: S.Literals(['Automatic', 'Manual']),
-});
-const INSPECTOR_TABS = [
-    'Model',
-    'Message',
-    'Commands',
-    'Mounts',
-];
+const InspectorTab = S.Literals(['Model', 'Message', 'Commands', 'Mounts']);
+const INSPECTOR_TABS = InspectorTab.literals;
 const InspectorTabs = Tabs.create();
 /**
  * `S.Unknown` whose equivalence is reference equality. Effect 4's default
@@ -83,13 +73,14 @@ const Model = S.Struct({
     maybeInspectedMessage: S.Option(UnknownByReference),
     submodelTags: S.Array(S.String),
     maybeSubmodelFilter: S.Option(S.String),
-    flattenSwitch: Switch.Model,
+    isFlattened: S.Boolean,
     submodelFilterListbox: Listbox.Model,
     expandedPaths: S.HashSet(S.String),
     changedPaths: S.HashSet(S.String),
     affectedPaths: S.HashSet(S.String),
     maybePendingScrubIndex: S.Option(S.Number),
-    inspectorTabs: InspectorTabsModel,
+    inspectorTabs: Tabs.Model,
+    activeInspectorTab: InspectorTab,
     // NOTE: empirically, inlining `Slider.Model` here throws
     // "Cannot read properties of undefined (reading 'ast')" when running slider
     // tests, because slider imports html → runtime → overlay, and overlay
@@ -99,6 +90,7 @@ const Model = S.Struct({
     // pinned down. Suspend is the conservative fix until the runtime ↔ overlay
     // cycle is broken at the source.
     scrubberSlider: S.suspend(() => Slider.Model),
+    scrubberValue: S.Number,
 });
 const Flags = S.Struct({
     isOpen: S.Boolean,
@@ -114,9 +106,7 @@ const Flags = S.Struct({
 // MESSAGE
 const ClickedToggle = m('ClickedToggle');
 const ClickedSettingsToggle = m('ClickedSettingsToggle');
-const GotFlattenSwitchMessage = m('GotFlattenSwitchMessage', {
-    message: Switch.Message,
-});
+const ToggledFlatten = m('ToggledFlatten', { isFlattened: S.Boolean });
 const CompletedPersistDevToolsState = m('CompletedPersistDevToolsState');
 const ClickedRow = m('ClickedRow', { index: S.Number });
 const ClickedResume = m('ClickedResume');
@@ -161,7 +151,7 @@ const GotScrubberSliderMessage = m('GotScrubberSliderMessage', {
 const Message = S.Union([
     ClickedToggle,
     ClickedSettingsToggle,
-    GotFlattenSwitchMessage,
+    ToggledFlatten,
     CompletedPersistDevToolsState,
     ClickedRow,
     ClickedResume,
@@ -339,7 +329,7 @@ const makeUpdate = (store, shadow, mode) => {
                     ...Option.toArray(maybeToggleScrollLock(model.isMobile, nextIsOpen)),
                     PersistDevToolsState({
                         isOpen: nextIsOpen,
-                        isFlattened: model.flattenSwitch.isChecked,
+                        isFlattened: model.isFlattened,
                     }),
                 ],
             ];
@@ -350,28 +340,10 @@ const makeUpdate = (store, shadow, mode) => {
             }),
             [],
         ],
-        GotFlattenSwitchMessage: ({ message: switchMessage }) => {
-            const [nextFlattenSwitch, switchCommands, maybeOutMessage] = Switch.update(model.flattenSwitch, switchMessage);
-            const mappedCommands = Command.mapMessages(switchCommands, message => GotFlattenSwitchMessage({ message }));
-            return Option.match(maybeOutMessage, {
-                onNone: () => [
-                    evo(model, { flattenSwitch: () => nextFlattenSwitch }),
-                    mappedCommands,
-                ],
-                onSome: M.type().pipe(M.withReturnType(), M.tagsExhaustive({
-                    ToggledChecked: ({ isChecked }) => [
-                        evo(model, { flattenSwitch: () => nextFlattenSwitch }),
-                        [
-                            ...mappedCommands,
-                            PersistDevToolsState({
-                                isOpen: model.isOpen,
-                                isFlattened: isChecked,
-                            }),
-                        ],
-                    ],
-                })),
-            });
-        },
+        ToggledFlatten: ({ isFlattened }) => [
+            evo(model, { isFlattened: () => isFlattened }),
+            [PersistDevToolsState({ isOpen: model.isOpen, isFlattened })],
+        ],
         CrossedMobileBreakpoint: ({ isMobile }) => [
             evo(model, { isMobile: () => isMobile }),
             Option.toArray(maybeToggleScrollLock(model.isOpen, isMobile)),
@@ -443,10 +415,17 @@ const makeUpdate = (store, shadow, mode) => {
             [],
         ],
         GotInspectorTabsMessage: ({ message: tabsMessage }) => {
-            const [nextTabsModel, tabsCommands] = InspectorTabs.update(model.inspectorTabs, tabsMessage);
+            const [nextTabsModel, tabsCommands, maybeOutMessage] = InspectorTabs.update(model.inspectorTabs, tabsMessage);
+            const nextActiveInspectorTab = Option.match(maybeOutMessage, {
+                onNone: () => model.activeInspectorTab,
+                onSome: M.type().pipe(M.tagsExhaustive({
+                    Selected: ({ value }) => value,
+                })),
+            });
             return [
                 evo(model, {
                     inspectorTabs: () => nextTabsModel,
+                    activeInspectorTab: () => nextActiveInspectorTab,
                 }),
                 Command.mapMessages(tabsCommands, message => GotInspectorTabsMessage({ message })),
             ];
@@ -468,6 +447,10 @@ const makeUpdate = (store, shadow, mode) => {
             });
             const nextSubmodelTags = computeSubmodelTags(entries);
             const isFilterStale = Option.exists(model.maybeSubmodelFilter, filterTag => !Array_.contains(nextSubmodelTags, filterTag));
+            const sliderMax = entries.length;
+            const targetSliderValue = isPaused
+                ? hostIndexToSliderValue(pausedAtIndex, startIndex)
+                : sliderMax;
             return [
                 evo(model, {
                     entries: () => entries,
@@ -478,19 +461,9 @@ const makeUpdate = (store, shadow, mode) => {
                     pausedAtIndex: () => pausedAtIndex,
                     submodelTags: () => nextSubmodelTags,
                     maybeSubmodelFilter: current => isFilterStale ? Option.none() : current,
-                    submodelFilterListbox: current => isFilterStale
-                        ? evo(current, {
-                            maybeSelectedItem: () => Option.some(ALL_MESSAGES_VALUE),
-                        })
-                        : current,
                     selectedIndex: current => shouldFollowSelection ? latestIndex : current,
-                    scrubberSlider: current => {
-                        const sliderMax = entries.length;
-                        const targetSliderValue = isPaused
-                            ? hostIndexToSliderValue(pausedAtIndex, startIndex)
-                            : sliderMax;
-                        return Slider.reflectValue(Slider.reflectRange(current, { min: 0, max: sliderMax }), targetSliderValue);
-                    },
+                    scrubberSlider: current => Slider.reflectRange(current, { min: 0, max: sliderMax }),
+                    scrubberValue: current => M.value(model.scrubberSlider.dragState).pipe(M.tag('Dragging', () => Slider.snapAndClamp(current, 0, sliderMax, 1)), M.orElse(() => Slider.snapAndClamp(targetSliderValue, 0, sliderMax, 1))),
                 }),
                 [
                     ...(shouldFollowSelection ? [inspectLatest] : []),
@@ -528,13 +501,20 @@ const makeUpdate = (store, shadow, mode) => {
             // than they complete.
             const nextMaybePendingScrubIndex = Option.match(maybeOutMessage, {
                 onNone: () => model.maybePendingScrubIndex,
-                onSome: outMessage => M.value(outMessage).pipe(M.tagsExhaustive({
+                onSome: M.type().pipe(M.tagsExhaustive({
                     ChangedValue: ({ value }) => Option.some(sliderValueToHostIndex(value, model.startIndex)),
                 })),
             });
+            const nextScrubberValue = Option.match(maybeOutMessage, {
+                onNone: () => model.scrubberValue,
+                onSome: M.type().pipe(M.tagsExhaustive({
+                    ChangedValue: ({ value }) => value,
+                })),
+            });
             return [
                 evo(model, {
                     scrubberSlider: () => nextSlider,
+                    scrubberValue: () => nextScrubberValue,
                     maybePendingScrubIndex: () => nextMaybePendingScrubIndex,
                 }),
                 mappedSliderCommands,
@@ -933,7 +913,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     ])), M.when('Message', () => lazyTabContent('Message', messageTabContent, [
         model.maybeInspectedMessage,
         model.maybeSubmodelFilter,
-        model.flattenSwitch.isChecked,
+        model.isFlattened,
         model.expandedPaths,
         inspectedTimestamp(model),
     ])), M.when('Commands', () => lazyTabContent('Commands', commandsTabContent, [
@@ -956,6 +936,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             view: InspectorTabs.view,
             viewInputs: {
                 tabs: INSPECTOR_TABS,
+                selectedValue: model.activeInspectorTab,
                 ariaLabel: 'Inspector tabs',
                 toView: ({ tablist, tabs, activeIndex }) => h.div([h.Class('flex flex-col flex-1 min-h-0')], [
                     h.div([...tablist, h.Class('flex border-b shrink-0')], tabs.map(tab => h.button([
@@ -1057,6 +1038,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             view: SubmodelFilterListbox.view,
             viewInputs: {
                 items: [ALL_MESSAGES_VALUE, ...model.submodelTags],
+                maybeSelectedValue: Option.orElseSome(model.maybeSubmodelFilter, () => ALL_MESSAGES_VALUE),
                 itemToConfig: item => ({
                     className: 'dt-filter-item',
                     content: h.div([h.Class('flex items-center gap-2')], [checkIconView, h.span([], [filterItemLabel(item)])]),
@@ -1089,23 +1071,20 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         });
     };
     // SETTINGS
-    const flattenSwitchView = (model) => h.submodel({
-        slotId: 'flatten-switch',
-        model: model.flattenSwitch,
-        view: Switch.view,
-        viewInputs: {
-            toView: attributes => h.div([h.Class('dt-settings-row')], [
-                h.div([...attributes.button, h.Class('dt-switch')], [h.span([h.Class('dt-switch-thumb')], [])]),
-                h.div([h.Class('dt-settings-row-text')], [
-                    h.label([...attributes.label, h.Class('dt-settings-row-label')], ['Flatten to leaf Message']),
-                    h.span([
-                        ...attributes.description,
-                        h.Class('dt-settings-row-description'),
-                    ], ['Label each row with its innermost Message']),
-                ]),
+    const flattenSwitchView = (model) => Switch.view({
+        id: FLATTEN_SWITCH_ID,
+        isChecked: model.isFlattened,
+        onToggle: isFlattened => ToggledFlatten({ isFlattened }),
+        toView: attributes => h.div([h.Class('dt-settings-row')], [
+            h.div([...attributes.button, h.Class('dt-switch')], [h.span([h.Class('dt-switch-thumb')], [])]),
+            h.div([h.Class('dt-settings-row-text')], [
+                h.label([...attributes.label, h.Class('dt-settings-row-label')], ['Flatten to leaf Message']),
+                h.span([
+                    ...attributes.description,
+                    h.Class('dt-settings-row-description'),
+                ], ['Label each row with its innermost Message']),
             ]),
-        },
-        toParentMessage: message => GotFlattenSwitchMessage({ message }),
+        ]),
     });
     const settingsScreenView = (model) => h.keyed('div')('Settings', [h.Class('flex flex-col flex-1 min-h-0 overflow-y-auto overscroll-none')], [
         h.div([h.Class('flex flex-col')], [
@@ -1235,13 +1214,13 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             model.isPaused,
             model.pausedAtIndex,
             model.maybeSubmodelFilter,
-            model.flattenSwitch.isChecked,
+            model.isFlattened,
         ]);
     };
     // SCRUBBER
     const scrubberPositionLabel = (model) => {
         const total = String(model.entries.length).padStart(3, '0');
-        const current = String(model.scrubberSlider.value).padStart(3, '0');
+        const current = String(model.scrubberValue).padStart(3, '0');
         return `${current} / ${total}`;
     };
     const scrubberView = (model) => h.submodel({
@@ -1249,6 +1228,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         model: model.scrubberSlider,
         view: Slider.view,
         viewInputs: {
+            value: model.scrubberValue,
             ariaLabel: 'Session scrubber',
             getTrackRoot: () => shadow,
             formatValue: value => value === 0 ? 'init' : `Message ${String(value)}`,
@@ -1400,10 +1380,7 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
             {
                 screen: 'Messages',
                 ...displayFlags,
-                flattenSwitch: Switch.init({
-                    id: FLATTEN_SWITCH_ID,
-                    isChecked: isFlattened,
-                }),
+                isFlattened,
                 selectedIndex: INIT_INDEX,
                 isFollowingLatest: true,
                 isFollowingTop: true,
@@ -1411,7 +1388,6 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
                 maybeSubmodelFilter: Option.none(),
                 submodelFilterListbox: Listbox.init({
                     id: SUBMODEL_FILTER_ID,
-                    selectedItem: ALL_MESSAGES_VALUE,
                 }),
                 maybeInspectedModel: Option.none(),
                 maybeInspectedMessage: Option.none(),
@@ -1420,13 +1396,14 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
                 affectedPaths: HashSet.empty(),
                 maybePendingScrubIndex: Option.none(),
                 inspectorTabs: Tabs.init({ id: INSPECTOR_TABS_ID }),
+                activeInspectorTab: 'Model',
                 scrubberSlider: Slider.init({
                     id: SCRUBBER_SLIDER_ID,
                     min: 0,
                     max: sliderMax,
                     step: 1,
-                    initialValue: initialSliderValue,
                 }),
+                scrubberValue: Slider.snapAndClamp(initialSliderValue, 0, sliderMax, 1),
             },
             Option.toArray(maybeLockScroll(flags.isOpen, flags.isMobile)),
         ];

package/package.json

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