@foldkit/devtools 0.124.0 → 0.125.0

package/dist/overlay.d.ts

@@ -31,10 +31,11 @@ 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 PersistFlatten: Command.CommandDefinitionWithArgs<"PersistFlatten", {
+export declare const PersistDevToolsState: Command.CommandDefinitionWithArgs<"PersistDevToolsState", {
+    isOpen: S.Boolean;
     isFlattened: S.Boolean;
 }, Effect.Effect<{
-    readonly _tag: "CompletedPersistFlatten";
+    readonly _tag: "CompletedPersistDevToolsState";
 }, never, never>>;
 export declare const JumpToAndInspect: Command.CommandDefinitionWithArgs<"JumpToAndInspect", {
     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,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;AAajD,eAAO,MAAM,cAAc;;;;iBAc1B,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;AAy6DD,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;;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"}

package/dist/overlay.js

@@ -101,6 +101,7 @@ const Model = S.Struct({
     scrubberSlider: S.suspend(() => Slider.Model),
 });
 const Flags = S.Struct({
+    isOpen: S.Boolean,
     isMobile: S.Boolean,
     isFlattened: S.Boolean,
     entries: S.Array(DisplayEntry),
@@ -116,7 +117,7 @@ const ClickedSettingsToggle = m('ClickedSettingsToggle');
 const GotFlattenSwitchMessage = m('GotFlattenSwitchMessage', {
     message: Switch.Message,
 });
-const CompletedPersistFlatten = m('CompletedPersistFlatten');
+const CompletedPersistDevToolsState = m('CompletedPersistDevToolsState');
 const ClickedRow = m('ClickedRow', { index: S.Number });
 const ClickedResume = m('ClickedResume');
 const ClickedClear = m('ClickedClear');
@@ -161,7 +162,7 @@ const Message = S.Union([
     ClickedToggle,
     ClickedSettingsToggle,
     GotFlattenSwitchMessage,
-    CompletedPersistFlatten,
+    CompletedPersistDevToolsState,
     ClickedRow,
     ClickedResume,
     ClickedClear,
@@ -189,8 +190,7 @@ const MOBILE_BREAKPOINT_QUERY = `(max-width: ${MOBILE_BREAKPOINT}px)`;
 const TREE_INDENT_PX = 12;
 const MAX_PREVIEW_KEYS = 3;
 const ALL_MESSAGES_VALUE = '';
-const FLATTEN_STORAGE_KEY = 'foldkit-devtools-flatten';
-const BooleanJsonString = S.fromJsonString(S.Boolean);
+const DEVTOOLS_STORAGE_KEY = 'foldkit-devtools';
 const NO_COMMANDS = [];
 const NO_MOUNTS = [];
 const formatTimeDelta = (deltaMs) => M.value(deltaMs).pipe(M.when(0, () => '0ms'), M.when(Number_.isLessThan(MILLIS_PER_SECOND), ms => `+${Math.round(ms)}ms`), M.orElse(ms => `+${(ms / MILLIS_PER_SECOND).toFixed(1)}s`));
@@ -251,17 +251,31 @@ 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 readPersistedFlatten = Effect.gen(function* () {
+const maybeToggleScrollLock = (isEnabled, shouldLock) => OptionExt.when(isEnabled, shouldLock ? LockScroll() : UnlockScroll());
+const maybeLockScroll = (isOpen, isMobile) => OptionExt.when(isOpen && isMobile, LockScroll());
+const DevToolsPersistedState = S.Struct({
+    isOpen: S.Boolean.pipe(S.withDecodingDefault(Effect.succeed(false))),
+    isFlattened: S.Boolean.pipe(S.withDecodingDefault(Effect.succeed(false))),
+});
+const DevToolsPersistedStateJson = S.fromJsonString(DevToolsPersistedState);
+const DEFAULT_PERSISTED_STATE = {
+    isOpen: false,
+    isFlattened: false,
+};
+const readPersistedState = Effect.gen(function* () {
     const store = yield* KeyValueStore.KeyValueStore;
-    const json = yield* Effect.fromOption(Option.fromNullishOr(yield* store.get(FLATTEN_STORAGE_KEY)));
-    return yield* S.decodeEffect(BooleanJsonString)(json);
-}).pipe(Effect.catch(() => Effect.succeed(false)), Effect.provide(BrowserKeyValueStore.layerLocalStorage));
-export const PersistFlatten = Command.define('PersistFlatten', { isFlattened: S.Boolean }, CompletedPersistFlatten)(({ isFlattened }) => Effect.gen(function* () {
+    const json = yield* Effect.fromOption(Option.fromNullishOr(yield* store.get(DEVTOOLS_STORAGE_KEY)));
+    return yield* S.decodeEffect(DevToolsPersistedStateJson)(json);
+}).pipe(Effect.catch(() => Effect.succeed(DEFAULT_PERSISTED_STATE)), Effect.provide(BrowserKeyValueStore.layerLocalStorage));
+export const PersistDevToolsState = Command.define('PersistDevToolsState', { isOpen: S.Boolean, isFlattened: S.Boolean }, CompletedPersistDevToolsState)(({ isOpen, isFlattened }) => Effect.gen(function* () {
     const store = yield* KeyValueStore.KeyValueStore;
-    const json = yield* S.encodeEffect(BooleanJsonString)(isFlattened);
-    yield* store.set(FLATTEN_STORAGE_KEY, json);
-    return CompletedPersistFlatten();
-}).pipe(Effect.catch(() => Effect.succeed(CompletedPersistFlatten())), Effect.provide(BrowserKeyValueStore.layerLocalStorage)));
+    const json = yield* S.encodeEffect(DevToolsPersistedStateJson)({
+        isOpen,
+        isFlattened,
+    });
+    yield* store.set(DEVTOOLS_STORAGE_KEY, json);
+    return CompletedPersistDevToolsState();
+}).pipe(Effect.catch(() => Effect.succeed(CompletedPersistDevToolsState())), Effect.provide(BrowserKeyValueStore.layerLocalStorage)));
 const buildInspectionFromModel = (index, model) => Effect.gen(function* () {
     const store = yield* StoreService;
     const maybeMessage = yield* store.getMessageAtIndex(index);
@@ -316,13 +330,18 @@ const makeUpdate = (store, shadow, mode) => {
     const scrollToTop = Command.mapEffect(ScrollToTop(), 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({
         ClickedToggle: () => {
             const nextIsOpen = !model.isOpen;
             return [
                 evo(model, { isOpen: () => nextIsOpen }),
-                OptionExt.when(model.isMobile, toggleScrollLock(nextIsOpen)).pipe(Option.toArray),
+                [
+                    ...Option.toArray(maybeToggleScrollLock(model.isMobile, nextIsOpen)),
+                    PersistDevToolsState({
+                        isOpen: nextIsOpen,
+                        isFlattened: model.flattenSwitch.isChecked,
+                    }),
+                ],
             ];
         },
         ClickedSettingsToggle: () => [
@@ -344,7 +363,10 @@ const makeUpdate = (store, shadow, mode) => {
                         evo(model, { flattenSwitch: () => nextFlattenSwitch }),
                         [
                             ...mappedCommands,
-                            PersistFlatten({ isFlattened: isChecked }),
+                            PersistDevToolsState({
+                                isOpen: model.isOpen,
+                                isFlattened: isChecked,
+                            }),
                         ],
                     ],
                 })),
@@ -352,7 +374,7 @@ const makeUpdate = (store, shadow, mode) => {
         },
         CrossedMobileBreakpoint: ({ isMobile }) => [
             evo(model, { isMobile: () => isMobile }),
-            OptionExt.when(model.isOpen, toggleScrollLock(isMobile)).pipe(Option.toArray),
+            Option.toArray(maybeToggleScrollLock(model.isOpen, isMobile)),
         ],
         ClickedRow: ({ index }) => M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => [model, [jumpToAndInspect(index)]]), M.when('Inspect', () => [
             evo(model, {
@@ -525,7 +547,7 @@ const makeUpdate = (store, shadow, mode) => {
                 [jumpToAndInspect(hostIndex)],
             ],
         }),
-    }), M.tag('CompletedResume', 'CompletedClear', 'CompletedPersistFlatten', 'LockedScroll', 'UnlockedScroll', 'ScrolledToTop', () => [model, []]), M.exhaustive);
+    }), M.tag('CompletedResume', 'CompletedClear', 'CompletedPersistDevToolsState', 'LockedScroll', 'UnlockedScroll', 'ScrolledToTop', () => [model, []]), M.exhaustive);
 };
 // SUBSCRIPTION
 const makeOverlaySubscriptions = (store, shadow) => {
@@ -1360,8 +1382,9 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
     container.id = '__foldkit_devtools_overlay__';
     const flags = Effect.gen(function* () {
         const storeState = yield* SubscriptionRef.get(store.stateRef);
-        const isFlattened = yield* readPersistedFlatten;
+        const { isOpen, isFlattened } = yield* readPersistedState;
         return {
+            isOpen,
             isMobile: window.matchMedia(MOBILE_BREAKPOINT_QUERY).matches,
             isFlattened,
             ...toDisplayState(storeState),
@@ -1375,7 +1398,6 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
             : sliderMax;
         return [
             {
-                isOpen: false,
                 screen: 'Messages',
                 ...displayFlags,
                 flattenSwitch: Switch.init({
@@ -1406,7 +1428,7 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
                     initialValue: initialSliderValue,
                 }),
             },
-            [],
+            Option.toArray(maybeLockScroll(flags.isOpen, flags.isMobile)),
         ];
     };
     const overlayRuntime = makeElement({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/devtools",
-  "version": "0.124.0",
+  "version": "0.125.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.124.0",
-    "foldkit": "0.124.0"
+    "@foldkit/ui": "0.125.0",
+    "foldkit": "0.125.0"
   },
   "keywords": [
     "foldkit",