@lowdefy/client 6.1.0 → 7.1.0

package/dist/request.js

@@ -13,20 +13,87 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import { decodeServerError } from '@lowdefy/engine';
-import { translate } from '@lowdefy/helpers';
-async function request({ url, method = 'GET', body }) {
+import { expectedErrorNames, lowdefyErrorTypes } from '@lowdefy/errors';
+import { translate, type } from '@lowdefy/helpers';
+import recordCallerStamp from './recordCallerStamp.js';
+import shouldReloadForAuthError from './shouldReloadForAuthError.js';
+import shouldReloadForBuild from './shouldReloadForBuild.js';
+import shouldReloadForCaller from './shouldReloadForCaller.js';
+// buildId is the build this bundle was made from. The production server
+// refuses a call from another build with a 409 before running anything, since
+// an old page's payload can be the wrong shape for the new build's request and
+// still be written. The tab then reloads once onto the current build. The
+// promise never settles: the page is unloading, and a rejection would run the
+// action's catch actions and report the refusal as an error. Only the
+// production client carries a build id; the server lets a call naming none
+// through (dev and e2e pages, third-party webhooks).
+//
+// lowdefy.user is the caller the page renders. The tab also reloads when the
+// server answered as another caller or with other roles, or refused the
+// rendered caller in a way that means the page itself is no longer theirs
+// (shouldReloadForCaller, shouldReloadForAuthError), so it never shows one
+// caller's data to another. Otherwise the response's caller stamp is kept as
+// the last one seen (recordCallerStamp).
+// reloadOnAuthorizationError is set for page requests, which share the page's
+// auth, and not for endpoints, which carry their own.
+async function request({ buildId, url, method = 'GET', body, reloadOnAuthorizationError = false, lowdefy }) {
+    // Read per call: the rendered caller changes with the session.
+    const { user } = lowdefy;
+    const headers = {
+        'Content-Type': 'application/json'
+    };
+    if (!type.isNone(buildId)) {
+        headers['x-lowdefy-build'] = buildId;
+    }
     const res = await fetch(url, {
         method,
-        headers: {
-            'Content-Type': 'application/json'
-        },
+        headers,
         body: JSON.stringify(body)
     });
+    const serverCaller = res.headers.get('x-lowdefy-caller');
+    if (shouldReloadForCaller({
+        serverCaller,
+        user,
+        window
+    })) {
+        window.location.reload();
+        return new Promise(()=>{});
+    }
+    recordCallerStamp({
+        lowdefy,
+        serverCaller
+    });
     if (!res.ok) {
         const body = await res.json();
+        if (res.status === 409 && shouldReloadForBuild({
+            bundleBuildId: buildId,
+            serverBuildId: body?.buildId,
+            window
+        })) {
+            window.location.reload();
+            return new Promise(()=>{});
+        }
         if (body?.['~e']) {
             throw decodeServerError(body);
         }
+        // The server answers an expected outcome (an auth gate's 401 or 403, a
+        // UserError's 400) itself, as { name, message } with no serialized error.
+        // Rebuilding its class keeps the name the engine, handleError and the dev
+        // tools tell an expected outcome from a fault by.
+        if (expectedErrorNames.has(body?.name)) {
+            const ExpectedError = lowdefyErrorTypes[body.name];
+            const error = new ExpectedError(body.message);
+            if (shouldReloadForAuthError({
+                error,
+                reloadOnAuthorizationError,
+                user,
+                window
+            })) {
+                window.location.reload();
+                return new Promise(()=>{});
+            }
+            throw error;
+        }
         throw new Error(body.message || translate({
             key: 'client.requestError'
         }));

package/dist/setLowdefyUser.js

@@ -0,0 +1,32 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+// Sets the caller the app renders. CallAPI results (lowdefy.apiResponses, read
+// by _api) are app-level, so they are kept per organization as page contexts
+// are (see the engine's getContext): when the caller's organization changes,
+// the results fetched under the previous one are dropped, so none is read
+// under another organization. Results fetched with no organization hold no
+// organization's data and are kept when the caller gains one. A call still in
+// flight writes into the dropped object. Author global state is left alone.
+function setLowdefyUser({ lowdefy, user }) {
+    const organizationId = user?.organization_id ?? null;
+    const resultsOrganizationId = lowdefy._internal.apiResponsesOrganizationId;
+    if (!type.isNone(resultsOrganizationId) && resultsOrganizationId !== organizationId) {
+        lowdefy.apiResponses = {};
+    }
+    lowdefy._internal.apiResponsesOrganizationId = organizationId;
+    lowdefy.user = user ?? null;
+}
+export default setLowdefyUser;

package/dist/setupLink.js

@@ -13,12 +13,27 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import { createLink } from '@lowdefy/engine';
+import { ConfigError } from '@lowdefy/errors';
 import { createUrl } from './adapters/url.js';
 function setupLink(lowdefy) {
     const { router } = lowdefy._internal;
     const { window } = lowdefy._internal.globals;
     const backLink = ()=>router.back();
     const disabledLink = ()=>{};
+    // window.open returns null when the browser blocks the popup - tell the user
+    // rather than throwing a TypeError on the null handle.
+    const openNewTab = (target)=>{
+        const handle = window.open(target, '_blank');
+        if (!handle) {
+            lowdefy._internal.displayMessage({
+                content: lowdefy._internal.translate('client.popupBlocked'),
+                status: 'info',
+                duration: 10
+            });
+            return;
+        }
+        return handle.focus();
+    };
     // `href` wins over `url`, and is used verbatim — the same precedence the anchor
     // renderer applies (createLinkComponent.js). createLink only ever sets one of
     // them, and it gives `url` a protocol before we see it while leaving `href`
@@ -29,16 +44,7 @@ function setupLink(lowdefy) {
     const newOriginLink = ({ href, url, query, newTab })=>{
         const target = href ?? `${url}${query ? `?${query}` : ''}`;
         if (newTab) {
-            const handle = window.open(target, '_blank');
-            if (!handle) {
-                lowdefy._internal.displayMessage({
-                    content: lowdefy._internal.translate('client.popupBlocked'),
-                    status: 'info',
-                    duration: 10
-                });
-                return;
-            }
-            return handle.focus();
+            return openNewTab(target);
         }
         return window.location.assign(target);
     };
@@ -47,11 +53,11 @@ function setupLink(lowdefy) {
     // let a same-page Link reflect state into the url without moving the page.
     const sameOriginLink = ({ newTab, pathname, query, replace, scroll, setInput })=>{
         if (newTab) {
-            return window.open(`${window.location.origin}${createUrl({
+            return openNewTab(`${window.location.origin}${createUrl({
                 basePath: lowdefy.basePath,
                 pathname,
                 query
-            })}`, '_blank').focus();
+            })}`);
         }
         setInput();
         const navigate = replace ? router.replace : router.push;
@@ -62,7 +68,7 @@ function setupLink(lowdefy) {
         });
     };
     const noLink = ()=>{
-        throw new Error(`Invalid Link.`);
+        throw new ConfigError('Invalid Link: no target resolved.');
     };
     return createLink({
         backLink,

package/dist/shouldReloadForAuthError.js

@@ -0,0 +1,39 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+import claimCallerReload from './claimCallerReload.js';
+// True when an auth refusal means the page shows a caller the server no longer
+// admits, so it must reload and let the server render the page again. A 401
+// while a user is rendered means the session ended; with no user it is an
+// ordinary refusal on a public page and is thrown, so it cannot loop. A
+// request's 403 reloads too: page requests share their page's auth, so the
+// caller lost the page. An endpoint's 403 does not, since endpoints carry their
+// own roles and a refusal is an ordinary outcome there. A two-factor enrolment
+// refusal never reloads. Matched by name: plugins bundle their own
+// @lowdefy/errors copy.
+function shouldReloadForAuthError({ error, reloadOnAuthorizationError, user, window }) {
+    if (error.name === 'AuthenticationError' && !type.isNone(user)) {
+        return claimCallerReload({
+            window
+        });
+    }
+    if (error.name === 'AuthorizationError' && reloadOnAuthorizationError === true) {
+        return claimCallerReload({
+            window
+        });
+    }
+    return false;
+}
+export default shouldReloadForAuthError;

package/dist/shouldReloadForBuild.js

@@ -0,0 +1,44 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+// sessionStorage key holding the server build this tab last reloaded for.
+const RELOADED_FOR_BUILD_KEY = 'lowdefy.reloadedForBuild';
+// True when the server answered from a different build than the bundle this
+// tab is running, so the tab must do a full load to pick up the current
+// bundle. Without this a page config from the new build can reference _js
+// functions the old bundle never shipped, and the old page's requests can
+// name requests, endpoints or auth routes the new build renamed or removed.
+//
+// A tab reloads at most once per server build: if the freshly loaded bundle
+// still disagrees with the server (a rolling deploy answering from mixed
+// versions, a proxy caching old HTML), reloading again would loop forever.
+// The old-config-on-old-bundle throw is the lesser failure in that case.
+function shouldReloadForBuild({ bundleBuildId, serverBuildId, window }) {
+    if (type.isNone(serverBuildId) || serverBuildId === bundleBuildId) {
+        return false;
+    }
+    try {
+        if (window.sessionStorage.getItem(RELOADED_FOR_BUILD_KEY) === serverBuildId) {
+            return false;
+        }
+        window.sessionStorage.setItem(RELOADED_FOR_BUILD_KEY, serverBuildId);
+    } catch (error) {
+        // Browsers with storage disabled throw on sessionStorage access. Without
+        // the once-per-build record the loop guard cannot work, so do not reload.
+        return false;
+    }
+    return true;
+}
+export default shouldReloadForBuild;

package/dist/shouldReloadForCaller.js

@@ -0,0 +1,50 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { AuthenticationError } from '@lowdefy/errors';
+import { parseCallerStamp } from '@lowdefy/helpers';
+import claimCallerReload from './claimCallerReload.js';
+import hasOtherRoles from './hasOtherRoles.js';
+import isOtherCaller from './isOtherCaller.js';
+// True when the page must reload because the server answered as another caller
+// than the page renders - another person signed in, or the organization was
+// switched, in another tab - or answered the same caller with other roles, so
+// the page never shows two callers' data or access the person no longer holds.
+// serverCaller is the response's x-lowdefy-caller header. A changed session or
+// membership list with the same person, organization and roles does not reload.
+// A second difference within the reload interval throws instead of reloading
+// again (see claimCallerReload).
+function shouldReloadForCaller({ serverCaller, user, window }) {
+    const stamp = parseCallerStamp(serverCaller);
+    const otherCaller = isOtherCaller({
+        stamp,
+        user
+    });
+    if (!otherCaller && !hasOtherRoles({
+        stamp,
+        user
+    })) {
+        return false;
+    }
+    if (claimCallerReload({
+        window
+    })) {
+        return true;
+    }
+    if (otherCaller) {
+        throw new AuthenticationError('The server answered as a different user or organization than this page shows. Reload the page.');
+    }
+    throw new AuthenticationError('The server answered with different roles than this page shows. Reload the page.');
+}
+export default shouldReloadForCaller;

package/dist/storage/clearUserStorage.js

@@ -0,0 +1,36 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+import listUserStorageKeys from './listUserStorageKeys.js';
+// Removes every user key of this app not owned by keepUserId (all of them when keepUserId is
+// null), and the session storage Lowdefy writes for the person browsing. Device preferences and
+// the build reload markers stay.
+function clearUserStorage({ basePath, keepUserId, slug, window }) {
+    try {
+        listUserStorageKeys({
+            basePath,
+            slug,
+            storage: window.localStorage
+        }).filter(({ userId })=>type.isNone(keepUserId) || userId !== keepUserId).forEach(({ key })=>window.localStorage.removeItem(key));
+    } catch  {
+    // Storage the browser blocks holds nothing to clear.
+    }
+    try {
+        window.sessionStorage.removeItem('lowdefy_scroll');
+    } catch  {
+    // Storage the browser blocks holds nothing to clear.
+    }
+}
+export default clearUserStorage;

package/dist/storage/clearUserStorageOnOwnerChange.js

@@ -0,0 +1,41 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import clearUserStorage from './clearUserStorage.js';
+import listUserStorageKeys from './listUserStorageKeys.js';
+// The person signed in (or nobody) may not be the one who left data on this browser: another
+// person signed in on it, or a session ended without Logout running. Their keys go before any
+// block reads storage.
+function clearUserStorageOnOwnerChange({ basePath, slug, userId, window }) {
+    let entries;
+    try {
+        entries = listUserStorageKeys({
+            basePath,
+            slug,
+            storage: window.localStorage
+        });
+    } catch  {
+        // Storage the browser blocks holds nothing to clear.
+        return;
+    }
+    if (entries.some((entry)=>entry.userId !== userId)) {
+        clearUserStorage({
+            basePath,
+            keepUserId: userId,
+            slug,
+            window
+        });
+    }
+}
+export default clearUserStorageOnOwnerChange;

package/dist/storage/createStorage.js

@@ -0,0 +1,48 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { appStorageKey } from '@lowdefy/helpers';
+import clearUserStorage from './clearUserStorage.js';
+import clearUserStorageOnOwnerChange from './clearUserStorageOnOwnerChange.js';
+import userStorageKey from './userStorageKey.js';
+// Storage keys for this app, reached by blocks and actions through their methods. getUserId is
+// read on every call, so a user key always names the person signed in now.
+function createStorage({ basePath, getUserId, slug, window }) {
+    return {
+        appKey: (name)=>appStorageKey({
+                basePath,
+                name,
+                slug
+            }),
+        clearUserStorage: ({ keepUserId })=>clearUserStorage({
+                basePath,
+                keepUserId,
+                slug,
+                window
+            }),
+        clearUserStorageOnOwnerChange: ()=>clearUserStorageOnOwnerChange({
+                basePath,
+                slug,
+                userId: getUserId(),
+                window
+            }),
+        userKey: (name)=>userStorageKey({
+                basePath,
+                name,
+                slug,
+                userId: getUserId()
+            })
+    };
+}
+export default createStorage;

package/dist/storage/listUserStorageKeys.js

@@ -0,0 +1,36 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import userStoragePrefix from './userStoragePrefix.js';
+// Every user key of this app in storage, with its owner's user id (null for an anonymous
+// visitor). Keys are read before any is removed, since removing shifts storage indexes.
+function listUserStorageKeys({ basePath, slug, storage }) {
+    const prefix = userStoragePrefix({
+        basePath,
+        slug
+    });
+    const entries = [];
+    for(let index = 0; index < storage.length; index += 1){
+        const key = storage.key(index);
+        if (key.startsWith(prefix)) {
+            const owner = key.slice(prefix.length, key.indexOf(':', prefix.length));
+            entries.push({
+                key,
+                userId: owner === '' ? null : decodeURIComponent(owner)
+            });
+        }
+    }
+    return entries;
+}
+export default listUserStorageKeys;

package/dist/storage/readStorageItem.js

@@ -0,0 +1,31 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+// Reads key, moving a value left under legacyKey (written before keys were kept per app) to it
+// the first time. Returns null when neither holds a value or the browser blocks storage.
+function readStorageItem({ key, legacyKey, storage }) {
+    try {
+        const value = storage.getItem(key);
+        if (!type.isNone(value)) return value;
+        const legacyValue = storage.getItem(legacyKey);
+        if (type.isNone(legacyValue)) return null;
+        storage.setItem(key, legacyValue);
+        storage.removeItem(legacyKey);
+        return legacyValue;
+    } catch  {
+        return null;
+    }
+}
+export default readStorageItem;

package/dist/storage/userStorageKey.js

@@ -0,0 +1,24 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import userStoragePrefix from './userStoragePrefix.js';
+// The user id is encoded so the owner always ends at the next ":", whatever the id holds. An
+// anonymous visitor owns the empty id.
+function userStorageKey({ basePath, name, slug, userId }) {
+    return `${userStoragePrefix({
+        basePath,
+        slug
+    })}${encodeURIComponent(userId ?? '')}:${name}`;
+}
+export default userStorageKey;

package/dist/storage/userStoragePrefix.js

@@ -0,0 +1,25 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { appStorageKey } from '@lowdefy/helpers';
+// A person's data sits under one name in the app's namespace, then the owner's user id. Keys set
+// with SetLocalStorage can not start with "lowdefy_", so no app key reads as a user key.
+function userStoragePrefix({ basePath, slug }) {
+    return appStorageKey({
+        basePath,
+        name: 'lowdefy_user:',
+        slug
+    });
+}
+export default userStoragePrefix;

package/dist/useDarkMode.js

@@ -14,6 +14,7 @@
   limitations under the License.
 */ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { theme as antdTheme } from 'antd';
+import readStorageItem from './storage/readStorageItem.js';
 const algorithmMap = {
     default: antdTheme.defaultAlgorithm,
     dark: antdTheme.darkAlgorithm,
@@ -67,11 +68,16 @@ function mergeComponents(shared, mode) {
     });
     return merged;
 }
-function useDarkMode({ antd, configDarkMode }) {
+// storageKey is the app key the preference is kept under (see @lowdefy/helpers appStorageKey).
+function useDarkMode({ antd, configDarkMode, storageKey }) {
     const baseAlgorithm = antd?.algorithm;
     const cleanAlgorithm = stripDarkFromAlgorithm(baseAlgorithm);
     const [userPreference, setUserPreference] = useState(()=>{
-        return window.localStorage?.getItem('lowdefy_darkMode') ?? 'system';
+        return readStorageItem({
+            key: storageKey,
+            legacyKey: 'lowdefy_darkMode',
+            storage: window.localStorage
+        }) ?? 'system';
     });
     const [systemIsDark, setSystemIsDark] = useState(()=>{
         return window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false;
@@ -85,10 +91,17 @@ function useDarkMode({ antd, configDarkMode }) {
         return ()=>mql.removeEventListener('change', handler);
     }, []);
     const setPreference = useCallback((newPref)=>{
-        window.localStorage?.setItem('lowdefy_darkMode', newPref);
+        window.localStorage?.setItem(storageKey, newPref);
+        // Set now, not on the next render: SetDarkMode updates the engine straight after, and
+        // _media: darkModePreference reads it then.
+        window.__lowdefy_darkModePreference = newPref;
         setUserPreference(newPref);
-    }, []);
+    }, [
+        storageKey
+    ]);
     window.__lowdefy_setDarkMode = setPreference;
+    // SetDarkMode, _media and the header toggles read the preference here, not from storage.
+    window.__lowdefy_darkModePreference = userPreference;
     const isDark = resolveIsDark({
         configDarkMode,
         userPreference,