powr-sdk-web 6.1.0 → 6.2.1

package/dist/activities/PowrActivityList.js

@@ -52,9 +52,9 @@ function formatWhen(iso, locale) {
   }
 }
 
-/**
- * Presentational list for PowrBase activity-shaped rows (`activity.activity`, `activity.actor`, `activity.action`, `createdAt`).
- * Does not fetch — pass data from parent or use {@link PowrBaseActivities}.
+/**
+ * Presentational list for PowrBase activity-shaped rows (`activity.activity`, `activity.actor`, `activity.action`, `createdAt`).
+ * Does not fetch — pass data from parent or use {@link PowrBaseActivities}.
  */
 function PowrActivityList(_ref) {
   var activities = _ref.activities,

package/dist/activities/index.js

@@ -36,9 +36,9 @@ var wrapperStyle = {
   fontFamily: 'Roboto, sans-serif'
 };
 
-/**
- * Fetches activities like comments: GET with contentId + projectId (via apiCall).
- * Date filtering is client-side: calendar picks a day, list shows items for that day.
+/**
+ * Fetches activities like comments: GET with contentId + projectId (via apiCall).
+ * Date filtering is client-side: calendar picks a day, list shows items for that day.
  */
 function PowrBaseActivities(_ref) {
   var projectId = _ref.projectId,

package/dist/admin/PowrBaseAdminFull.js

@@ -18,10 +18,10 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-/**
- * Full PowrBaseAdmin for host apps that already install optional peers
- * (Excelrs / Spriny via the package root export).
- * Prefer `powr-sdk-web/dist/admin` in lean apps (Ampy Ops) to avoid monaco/lucide.
+/**
+ * Full PowrBaseAdmin for host apps that already install optional peers
+ * (Excelrs / Spriny via the package root export).
+ * Prefer `powr-sdk-web/dist/admin` in lean apps (Ampy Ops) to avoid monaco/lucide.
  */
 function PowrBaseAdminFull(props) {
   var sectionLoaders = props.sectionLoaders,

package/dist/admin/coreSectionLoaders.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.CORE_SECTION_LOADERS = void 0;
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/**
- * Core admin sections — no heavy optional peers (monaco / lucide / hot-toast).
- * Safe for apps that only need Users (e.g. Ampy Ops).
+/**
+ * Core admin sections — no heavy optional peers (monaco / lucide / hot-toast).
+ * Safe for apps that only need Users (e.g. Ampy Ops).
  */
 var CORE_SECTION_LOADERS = exports.CORE_SECTION_LOADERS = {
   users: function users() {

package/dist/admin/optionalSectionLoaders.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.OPTIONAL_SECTION_LOADERS = void 0;
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/**
- * Heavy admin sections. Import only from apps that install optional peers:
- *   lucide-react, @monaco-editor/react, react-hot-toast
- *
- * @example
- * import PowrBaseAdmin from 'powr-sdk-web/dist/admin';
- * import { OPTIONAL_SECTION_LOADERS } from 'powr-sdk-web/dist/admin/optionalSectionLoaders';
- * <PowrBaseAdmin sections={['Users','Functions']} sectionLoaders={OPTIONAL_SECTION_LOADERS} />
+/**
+ * Heavy admin sections. Import only from apps that install optional peers:
+ *   lucide-react, @monaco-editor/react, react-hot-toast
+ *
+ * @example
+ * import PowrBaseAdmin from 'powr-sdk-web/dist/admin';
+ * import { OPTIONAL_SECTION_LOADERS } from 'powr-sdk-web/dist/admin/optionalSectionLoaders';
+ * <PowrBaseAdmin sections={['Users','Functions']} sectionLoaders={OPTIONAL_SECTION_LOADERS} />
  */
 var OPTIONAL_SECTION_LOADERS = exports.OPTIONAL_SECTION_LOADERS = {
   functions: function functions() {

package/dist/auth/index.js

@@ -43,6 +43,10 @@ var PowrLogin = function PowrLogin(_ref) {
     requirePhoneVerification = _ref$requirePhoneVeri === void 0 ? true : _ref$requirePhoneVeri,
     _ref$showForgotPasswo = _ref.showForgotPassword,
     showForgotPassword = _ref$showForgotPasswo === void 0 ? true : _ref$showForgotPasswo,
+    _ref$passwordResetHel = _ref.passwordResetHelpUrl,
+    passwordResetHelpUrl = _ref$passwordResetHel === void 0 ? null : _ref$passwordResetHel,
+    _ref$passwordResetHel2 = _ref.passwordResetHelpLabel,
+    passwordResetHelpLabel = _ref$passwordResetHel2 === void 0 ? 'Forgot password? WhatsApp us' : _ref$passwordResetHel2,
     _ref$completeProfileO = _ref.completeProfileOnLogin,
     completeProfileOnLogin = _ref$completeProfileO === void 0 ? false : _ref$completeProfileO,
     _ref$requireTerms = _ref.requireTerms,
@@ -871,13 +875,18 @@ var PowrLogin = function PowrLogin(_ref) {
     style: styles.checkbox
   }), /*#__PURE__*/_react["default"].createElement("span", {
     style: styles.checkboxText
-  }, "Remember me")), showForgotPassword && /*#__PURE__*/_react["default"].createElement("button", {
+  }, "Remember me")), passwordResetHelpUrl ? /*#__PURE__*/_react["default"].createElement("a", {
+    href: passwordResetHelpUrl,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    style: styles.forgotPasswordLink
+  }, passwordResetHelpLabel) : showForgotPassword ? /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
     onClick: function onClick() {
       return setShowOtpOption(!showOtpOption);
     },
     style: styles.forgotPasswordLink
-  }, "Forgot password?")), isLogin && showForgotPassword && showOtpOption && /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Forgot password?") : null), isLogin && !passwordResetHelpUrl && showForgotPassword && showOtpOption && /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.otpSection
   }, /*#__PURE__*/_react["default"].createElement("p", {
     style: styles.otpText

package/dist/calendar/index.js

@@ -101,8 +101,8 @@ function ChevronRight() {
   }));
 }
 
-/**
- * Week strip + day picker (controlled). No data fetching — use anywhere you need a date range UI.
+/**
+ * Week strip + day picker (controlled). No data fetching — use anywhere you need a date range UI.
  */
 function PowrCalendarStrip(_ref) {
   var selectedDate = _ref.selectedDate,

package/dist/index.js

@@ -334,6 +334,12 @@ Object.defineProperty(exports, "evaluateSteps", {
     return _onboarding.evaluateSteps;
   }
 });
+Object.defineProperty(exports, "fetchThemePreference", {
+  enumerable: true,
+  get: function get() {
+    return _theme.fetchThemePreference;
+  }
+});
 Object.defineProperty(exports, "formatPhoneForSms", {
   enumerable: true,
   get: function get() {
@@ -466,6 +472,12 @@ Object.defineProperty(exports, "parsePhone", {
     return _phone.parsePhone;
   }
 });
+Object.defineProperty(exports, "powrThemeInitScript", {
+  enumerable: true,
+  get: function get() {
+    return _theme.powrThemeInitScript;
+  }
+});
 Object.defineProperty(exports, "powrThemeStorageKey", {
   enumerable: true,
   get: function get() {
@@ -514,6 +526,12 @@ Object.defineProperty(exports, "safeNextPath", {
     return _sso.safeNextPath;
   }
 });
+Object.defineProperty(exports, "saveThemePreference", {
+  enumerable: true,
+  get: function get() {
+    return _theme.saveThemePreference;
+  }
+});
 Object.defineProperty(exports, "tokensToCssVars", {
   enumerable: true,
   get: function get() {
@@ -532,6 +550,12 @@ Object.defineProperty(exports, "usePowrTheme", {
     return _theme.usePowrTheme;
   }
 });
+Object.defineProperty(exports, "usePowrThemeHost", {
+  enumerable: true,
+  get: function get() {
+    return _theme.usePowrThemeHost;
+  }
+});
 Object.defineProperty(exports, "writeStoredSession", {
   enumerable: true,
   get: function get() {

package/dist/session/index.js

@@ -29,16 +29,16 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-/**
- * Powr session — the file every new app used to copy (`utils/store.ts`).
- *
- * Owns `localStorage['auth-store']` in the zustand-persist shape
- * `{ state: { user, token }, version }` so:
- *  - `apiCall` (utils/auth.getAuthToken) keeps reading the bearer from it
- *  - apps that already run a zustand `auth-store` can pass `user`/`token`
- *    as props (controlled) and nothing moves.
- *
- * No zustand dependency. Plain React context.
+/**
+ * Powr session — the file every new app used to copy (`utils/store.ts`).
+ *
+ * Owns `localStorage['auth-store']` in the zustand-persist shape
+ * `{ state: { user, token }, version }` so:
+ *  - `apiCall` (utils/auth.getAuthToken) keeps reading the bearer from it
+ *  - apps that already run a zustand `auth-store` can pass `user`/`token`
+ *    as props (controlled) and nothing moves.
+ *
+ * No zustand dependency. Plain React context.
  */
 
 var POWR_SESSION_STORAGE_KEY = exports.POWR_SESSION_STORAGE_KEY = "auth-store";
@@ -111,14 +111,14 @@ var PowrSessionContext = /*#__PURE__*/(0, _react.createContext)(_objectSpread(_o
   clear: function clear() {}
 }));
 
-/**
- * @param {object} props
- * @param {object|null} [props.user] - Controlled mode: app's own store is truth.
- * @param {string|null} [props.token] - Controlled mode.
- * @param {string|null} [props.refreshToken]
- * @param {(session: {user, token, refreshToken}) => void} [props.onChange] - After setSession / clear.
- * @param {() => void} [props.onLogout] - Controlled mode: clear your store here.
- * @param {boolean} [props.persist=true] - Uncontrolled mode: write `auth-store`.
+/**
+ * @param {object} props
+ * @param {object|null} [props.user] - Controlled mode: app's own store is truth.
+ * @param {string|null} [props.token] - Controlled mode.
+ * @param {string|null} [props.refreshToken]
+ * @param {(session: {user, token, refreshToken}) => void} [props.onChange] - After setSession / clear.
+ * @param {() => void} [props.onLogout] - Controlled mode: clear your store here.
+ * @param {boolean} [props.persist=true] - Uncontrolled mode: write `auth-store`.
  */
 function PowrSessionProvider(_ref2) {
   var userProp = _ref2.user,

package/dist/shell/PowrBaseAppWrapper.js

@@ -9,6 +9,7 @@ exports["default"] = PowrBaseAppWrapper;
 var _react = _interopRequireWildcard(require("react"));
 var _PowrThemeProvider = _interopRequireWildcard(require("../theme/PowrThemeProvider"));
 var _PowrThemeSettings = _interopRequireDefault(require("../theme/PowrThemeSettings"));
+var _host = require("../theme/host");
 var _session = _interopRequireWildcard(require("../session"));
 var _auth = _interopRequireDefault(require("../auth"));
 var _PowrOnboardingProvider = _interopRequireDefault(require("../onboarding/PowrOnboardingProvider"));
@@ -35,16 +36,16 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 var config = require("../config");
 var POWR_SHELL_MODES = exports.POWR_SHELL_MODES = Object.freeze(["sidebar", "topbar"]);
 
-/**
- * PowrBaseAppWrapper — the one root mount for a Powr web app.
- *
- * Replaces the files every new app copied: auth store, route guards, top bar /
- * sidebar, login page glue, providers. Chrome + selectors live here; palette,
- * presets, logo, nav items, product roles and public pages stay in the product.
- *
- * Guardrails: no colours of its own (every colour is `var(--powr-*)`), more
- * than one shape (`sidebar` | `topbar`), no `next/*` import — `Link` and
- * `pathname` come in as props, like `apiUrl` does elsewhere.
+/**
+ * PowrBaseAppWrapper — the one root mount for a Powr web app.
+ *
+ * Replaces the files every new app copied: auth store, route guards, top bar /
+ * sidebar, login page glue, providers. Chrome + selectors live here; palette,
+ * presets, logo, nav items, product roles and public pages stay in the product.
+ *
+ * Guardrails: no colours of its own (every colour is `var(--powr-*)`), more
+ * than one shape (`sidebar` | `topbar`), no `next/*` import — `Link` and
+ * `pathname` come in as props, like `apiUrl` does elsewhere.
  */
 function PowrBaseAppWrapper(props) {
   var theme = props.theme,
@@ -111,12 +112,21 @@ function Shell(_ref) {
     menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems,
     _ref$showThemeSetting = _ref.showThemeSettings,
     showThemeSettings = _ref$showThemeSetting === void 0 ? true : _ref$showThemeSetting,
+    _ref$syncThemeWithHos = _ref.syncThemeWithHost,
+    syncThemeWithHost = _ref$syncThemeWithHos === void 0 ? true : _ref$syncThemeWithHos,
     apiUrl = _ref.apiUrl,
     projectId = _ref.projectId,
     appName = _ref.appName,
     appLogo = _ref.appLogo,
     children = _ref.children;
   var session = (0, _session.usePowrSession)();
+  // Host is truth after login: pull once per token, Save writes back.
+  var themeHost = (0, _host.usePowrThemeHost)({
+    token: session.token,
+    apiUrl: apiUrl,
+    projectId: projectId,
+    enabled: syncThemeWithHost && showThemeSettings
+  });
   var narrow = (0, _useMediaQuery["default"])(_styles.NARROW_QUERY, false);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -194,7 +204,8 @@ function Shell(_ref) {
       style: _styles.s.footer
     }, footer) : null, /*#__PURE__*/_react["default"].createElement(SettingsDrawer, {
       open: settingsOpen,
-      onClose: closeSettings
+      onClose: closeSettings,
+      host: null
     }));
   }
 
@@ -268,7 +279,8 @@ function Shell(_ref) {
     onNavigate: closeNav
   })), /*#__PURE__*/_react["default"].createElement(SettingsDrawer, {
     open: settingsOpen,
-    onClose: closeSettings
+    onClose: closeSettings,
+    host: syncThemeWithHost && session.token ? themeHost : null
   }));
   if (onboarding === false || !session.user) return content;
   return /*#__PURE__*/_react["default"].createElement(_PowrOnboardingProvider["default"], _extends({
@@ -318,13 +330,19 @@ function Brand(_ref2) {
 }
 function SettingsDrawer(_ref3) {
   var open = _ref3.open,
-    onClose = _ref3.onClose;
+    onClose = _ref3.onClose,
+    host = _ref3.host;
   return /*#__PURE__*/_react["default"].createElement(_parts.Drawer, {
     open: open,
     side: "right",
     title: "Appearance",
     onClose: onClose
   }, /*#__PURE__*/_react["default"].createElement(_PowrThemeSettings["default"], {
-    title: null
+    title: null,
+    onSave: host ? function () {
+      return host.save()["catch"](function () {});
+    } : undefined,
+    saving: host ? host.saving : false,
+    error: host ? host.error : null
   }));
 }

package/dist/shell/styles.js

@@ -9,9 +9,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-/**
- * Shell styles. Every colour is a `--powr-*` var with today's neutral as the
- * fallback — the wrapper has no palette of its own (clone-leak guardrail).
+/**
+ * Shell styles. Every colour is a `--powr-*` var with today's neutral as the
+ * fallback — the wrapper has no palette of its own (clone-leak guardrail).
  */
 
 var v = exports.v = {

package/dist/sso/api.js

@@ -27,21 +27,21 @@ function safeNextPath(next) {
   return fallback;
 }
 
-/**
- * Issue a one-time login code (caller must already be authenticated).
- * Host `injectProjectId` needs destination `projectId` on the body.
- * @param {string} apiUrl - Powr API base
- * @param {string} bearerToken
- * @param {{ projectId?: string }} [opts]
+/**
+ * Issue a one-time login code (caller must already be authenticated).
+ * Host `injectProjectId` needs destination `projectId` on the body.
+ * @param {string} apiUrl - Powr API base
+ * @param {string} bearerToken
+ * @param {{ projectId?: string }} [opts]
  */
 function issueLoginCode(_x, _x2) {
   return _issueLoginCode.apply(this, arguments);
 }
-/**
- * Exchange loginId for session (same shape as /login).
- * @param {string} apiUrl
- * @param {string} loginId
- * @param {{ projectId?: string }} [opts]
+/**
+ * Exchange loginId for session (same shape as /login).
+ * @param {string} apiUrl
+ * @param {string} loginId
+ * @param {{ projectId?: string }} [opts]
  */
 function _issueLoginCode() {
   _issueLoginCode = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(apiUrl, bearerToken) {

package/dist/sso/index.js

@@ -145,22 +145,22 @@ var btnStyle = {
   cursor: "pointer"
 };
 
-/**
- * Cross-app SSO handoff UI (UrbanStall → Powr apps).
- * Apps keep a thin `/sso` page that renders this with `apiUrl` + `onSuccess`.
- *
- * @param {object} props
- * @param {string} [props.apiUrl] - Powr host. Defaults to https://powr-api.lawazia.tech
- * @param {string} [props.projectId] - Destination Powr id. Defaults to NEXT_PUBLIC_PROJECT_ID
- * @param {string} [props.appName]
- * @param {boolean} [props.ready=true] - Wait (e.g. auth hydrate) before exchanging code
- * @param {string} [props.loginHref="/login"]
- * @param {string} [props.loginId] - Defaults to ?loginId=
- * @param {string} [props.next] - Defaults to ?next=
- * @param {(data: object, ctx: { next: string, safeNext: string }) => void | Promise<void>} props.onSuccess
- * @param {string} [props.signingInTitle]
- * @param {string} [props.signingInMessage]
- * @param {string} [props.errorTitle]
+/**
+ * Cross-app SSO handoff UI (UrbanStall → Powr apps).
+ * Apps keep a thin `/sso` page that renders this with `apiUrl` + `onSuccess`.
+ *
+ * @param {object} props
+ * @param {string} [props.apiUrl] - Powr host. Defaults to https://powr-api.lawazia.tech
+ * @param {string} [props.projectId] - Destination Powr id. Defaults to NEXT_PUBLIC_PROJECT_ID
+ * @param {string} [props.appName]
+ * @param {boolean} [props.ready=true] - Wait (e.g. auth hydrate) before exchanging code
+ * @param {string} [props.loginHref="/login"]
+ * @param {string} [props.loginId] - Defaults to ?loginId=
+ * @param {string} [props.next] - Defaults to ?next=
+ * @param {(data: object, ctx: { next: string, safeNext: string }) => void | Promise<void>} props.onSuccess
+ * @param {string} [props.signingInTitle]
+ * @param {string} [props.signingInMessage]
+ * @param {string} [props.errorTitle]
  */
 function PowrBaseSso(_ref) {
   var apiUrl = _ref.apiUrl,

package/dist/sso/openPowrLogin.js

@@ -79,10 +79,10 @@ function resolvePowrApiUrl(apiUrl) {
   return "";
 }
 
-/**
- * @param {string} url
- * @param {string[]|Array<{url?: string, projectId?: string}>} [origins] - sibling card list or origins
- * @returns {{ origin: string, pathname: string, search: string, hash: string, projectId: string } | null}
+/**
+ * @param {string} url
+ * @param {string[]|Array<{url?: string, projectId?: string}>} [origins] - sibling card list or origins
+ * @returns {{ origin: string, pathname: string, search: string, hash: string, projectId: string } | null}
  */
 function matchPowrTarget(url, origins) {
   var dest = parseDest(url);
@@ -98,13 +98,13 @@ function matchPowrTarget(url, origins) {
   return dest;
 }
 
-/**
- * @deprecated Product `/powr` URLs are gone. Pass `apiUrl` + the card list as `origins`.
+/**
+ * @deprecated Product `/powr` URLs are gone. Pass `apiUrl` + the card list as `origins`.
  */
 var DEFAULT_POWR_TARGETS = exports.DEFAULT_POWR_TARGETS = [];
 
-/**
- * Build destination `/sso?loginId=` (+ optional `next`) on the sibling app.
+/**
+ * Build destination `/sso?loginId=` (+ optional `next`) on the sibling app.
  */
 function buildPowrSsoUrl(target, loginId) {
   var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
@@ -124,16 +124,16 @@ function openPlain(url) {
   window.open(url, "_blank", "noopener,noreferrer");
 }
 
-/**
- * Issue a login code and navigate to `/sso?loginId=`.
- * Host is the SDK default. Omit `apiUrl` unless this call is a real override.
- *
- * @param {string} url - Destination app URL (from the sibling card / banner)
- * @param {string|null|undefined} token
- * @param {object} [options]
- * @param {string} [options.apiUrl] - Override host. Do not pass product `/powr`.
- * @param {string} [options.projectId] - Destination Powr id (else from matched card)
- * @param {string[]|Array<{url?: string, projectId?: string}>} [options.origins] - The card list
+/**
+ * Issue a login code and navigate to `/sso?loginId=`.
+ * Host is the SDK default. Omit `apiUrl` unless this call is a real override.
+ *
+ * @param {string} url - Destination app URL (from the sibling card / banner)
+ * @param {string|null|undefined} token
+ * @param {object} [options]
+ * @param {string} [options.apiUrl] - Override host. Do not pass product `/powr`.
+ * @param {string} [options.projectId] - Destination Powr id (else from matched card)
+ * @param {string[]|Array<{url?: string, projectId?: string}>} [options.origins] - The card list
  */
 function openPowrLogin(_x, _x2) {
   return _openPowrLogin.apply(this, arguments);

package/dist/theme/PowrThemeProvider.js

@@ -4,7 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = PowrThemeProvider;
-exports.powrThemeStorageKey = powrThemeStorageKey;
+Object.defineProperty(exports, "powrThemeStorageKey", {
+  enumerable: true,
+  get: function get() {
+    return _tokens.powrThemeStorageKey;
+  }
+});
 exports.usePowrTheme = usePowrTheme;
 var _react = _interopRequireWildcard(require("react"));
 var _tokens = require("./tokens");
@@ -24,11 +29,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var config = require("../config");
 var PowrThemeContext = /*#__PURE__*/(0, _react.createContext)(null);
-var STORAGE_PREFIX = "powr-theme";
 var DARK_QUERY = "(prefers-color-scheme: dark)";
-function powrThemeStorageKey(projectId) {
-  return "".concat(STORAGE_PREFIX, ":").concat(projectId || "default");
-}
 function readStorage(key) {
   if (typeof window === "undefined") return null;
   try {
@@ -53,25 +54,25 @@ function systemPrefersDark() {
   return window.matchMedia(DARK_QUERY).matches;
 }
 
-/**
- * Root of the Powr theme. Mount once per app (the future `PowrBaseAppWrapper`
- * mounts it for you). Structure (light / dark / density) is the SDK's;
- * colours come from the product via `theme` and `presets`.
- *
- * With no props it writes today's neutral values, so SDK components render
- * exactly as before.
- *
- * @param {object} props
- * @param {object} [props.theme] - Product tokens. Flat `{ primary, bg, … }` (light) or `{ light: {…}, dark: {…} }`.
- * @param {Array<{id: string, label?: string, tokens?: object, dark?: object}>} [props.presets] - Product-named presets users may pick.
- * @param {"light"|"dark"|"system"} [props.scheme="light"] - Starting scheme; the user can change it (card 2 panel).
- * @param {"comfortable"|"compact"} [props.density="comfortable"] - Starting density.
- * @param {string} [props.preset] - Starting preset id.
- * @param {string} [props.projectId] - Cache key scope. Defaults to NEXT_PUBLIC_PROJECT_ID.
- * @param {boolean} [props.persist=true] - Cache choices in localStorage (cache, not truth — host save is card 3).
- * @param {"root"|"scoped"} [props.attach="root"] - `root` writes vars on <html>; `scoped` wraps children in one div carrying the vars.
- * @param {string} [props.className] - For `scoped` only.
- * @param {(value: {scheme: string, density: string, preset: string|null}) => void} [props.onChange] - Fires when a selector changes.
+/**
+ * Root of the Powr theme. Mount once per app (the future `PowrBaseAppWrapper`
+ * mounts it for you). Structure (light / dark / density) is the SDK's;
+ * colours come from the product via `theme` and `presets`.
+ *
+ * With no props it writes today's neutral values, so SDK components render
+ * exactly as before.
+ *
+ * @param {object} props
+ * @param {object} [props.theme] - Product tokens. Flat `{ primary, bg, … }` (light) or `{ light: {…}, dark: {…} }`.
+ * @param {Array<{id: string, label?: string, tokens?: object, dark?: object}>} [props.presets] - Product-named presets users may pick.
+ * @param {"light"|"dark"|"system"} [props.scheme="light"] - Starting scheme; the user can change it (card 2 panel).
+ * @param {"comfortable"|"compact"} [props.density="comfortable"] - Starting density.
+ * @param {string} [props.preset] - Starting preset id.
+ * @param {string} [props.projectId] - Cache key scope. Defaults to NEXT_PUBLIC_PROJECT_ID.
+ * @param {boolean} [props.persist=true] - Cache choices in localStorage (cache, not truth — host save is card 3).
+ * @param {"root"|"scoped"} [props.attach="root"] - `root` writes vars on <html>; `scoped` wraps children in one div carrying the vars.
+ * @param {string} [props.className] - For `scoped` only.
+ * @param {(value: {scheme: string, density: string, preset: string|null}) => void} [props.onChange] - Fires when a selector changes.
  */
 function PowrThemeProvider(_ref) {
   var theme = _ref.theme,
@@ -91,7 +92,7 @@ function PowrThemeProvider(_ref) {
     className = _ref.className,
     onChange = _ref.onChange,
     children = _ref.children;
-  var storageKey = powrThemeStorageKey(projectId || config.projectId);
+  var storageKey = (0, _tokens.powrThemeStorageKey)(projectId || config.projectId);
   var _useState = (0, _react.useState)(function () {
       return (0, _tokens.normalizeScheme)(schemeProp);
     }),
@@ -164,8 +165,10 @@ function PowrThemeProvider(_ref) {
   }, [resolved]);
 
   // attach="root": write on <html> so product CSS, portals and toasts see the same vars.
+  // Wait for the cache read: otherwise the first commit writes the prop defaults
+  // over what `powrThemeInitScript` already painted (one light frame for dark users).
   (0, _react.useEffect)(function () {
-    if (attach !== "root" || typeof document === "undefined") return undefined;
+    if (attach !== "root" || typeof document === "undefined" || !hydrated) return undefined;
     var el = document.documentElement;
     for (var _i = 0, _Object$keys = Object.keys(cssVars); _i < _Object$keys.length; _i++) {
       var name = _Object$keys[_i];
@@ -193,11 +196,21 @@ function PowrThemeProvider(_ref) {
       el.removeAttribute("data-powr-preset");
       el.style.removeProperty("color-scheme");
     };
-  }, [attach, cssVars, resolved.scheme, resolved.density, resolved.preset]);
+  }, [attach, hydrated, cssVars, resolved.scheme, resolved.density, resolved.preset]);
   var commit = (0, _react.useCallback)(function (next) {
-    if (persist) writeStorage(storageKey, next);
     if (typeof onChange === "function") onChange(next);
-  }, [persist, storageKey, onChange]);
+  }, [onChange]);
+
+  // Cache from state, not from setter closures — three back-to-back setX calls
+  // (host pull) must leave the cache equal to the final state, not the first.
+  (0, _react.useEffect)(function () {
+    if (!hydrated || !persist) return;
+    writeStorage(storageKey, {
+      scheme: scheme,
+      density: density,
+      preset: preset
+    });
+  }, [hydrated, persist, storageKey, scheme, density, preset]);
   var setScheme = (0, _react.useCallback)(function (value) {
     var s = (0, _tokens.normalizeScheme)(value);
     setSchemeState(s);
@@ -291,10 +304,10 @@ var UNMOUNTED_THEME = function () {
   });
 }();
 
-/**
- * Read the theme. Outside a provider returns the neutral defaults and no-op
- * setters (`mounted: false`), so SDK components work in apps that have not
- * adopted the theme yet.
+/**
+ * Read the theme. Outside a provider returns the neutral defaults and no-op
+ * setters (`mounted: false`), so SDK components work in apps that have not
+ * adopted the theme yet.
  */
 function usePowrTheme() {
   var ctx = (0, _react.useContext)(PowrThemeContext);