@jskit-ai/users-web 0.2.8 → 0.2.10

package/fixtures/account-settings/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Account settings regression</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

package/fixtures/account-settings/main.js

@@ -0,0 +1,140 @@
+import { createApp, h, reactive, ref, shallowReactive } from "vue";
+import { createRouter, createWebHistory, RouterView } from "vue-router";
+import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
+import "vuetify/styles";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
+import { SHELL_WEB_ERROR_RUNTIME_KEY } from "@jskit-ai/shell-web/client/error";
+import { SHELL_WEB_PLACEMENT_RUNTIME_KEY } from "@jskit-ai/shell-web/client/placement";
+import AccountSettingsClientElement from "../../src/client/components/AccountSettingsClientElement.vue";
+import ProfileClientElement from "../../src/client/components/ProfileClientElement.vue";
+import { useAccountLocale } from "../../src/client/lib/accountLocale.js";
+import NotificationsSection from "../../patterns/account-settings/example/src/components/account/settings/AccountSettingsNotificationsSection.vue";
+import PreferencesSection from "../../patterns/account-settings/example/src/components/account/settings/AccountSettingsPreferencesSection.vue";
+import ProfileSection from "../../patterns/account-settings/example/src/components/account/settings/AccountSettingsProfileSection.vue";
+import SignInMethodsSection from "../../patterns/account-settings/example/src/components/account/settings/AccountSettingsSignInMethodsSection.vue";
+
+function section(value, title, component, order) {
+  return { order, component, props: { value, title, usesSharedRuntime: true } };
+}
+
+// The shell's two runtimes as doubles; everything below them is the real account settings code.
+const context = {
+  surfaceConfig: {
+    tenancyMode: "none",
+    defaultSurfaceId: "home",
+    enabledSurfaceIds: ["home", "account"],
+    surfacesById: {
+      home: { id: "home", enabled: true, pagesRoot: "home", routeBase: "/home", requiresWorkspace: false },
+      account: { id: "account", enabled: true, pagesRoot: "account", routeBase: "/account", requiresWorkspace: false }
+    }
+  }
+};
+const listeners = new Set();
+let revision = 1;
+let placements = new URLSearchParams(window.location.search).has("empty")
+  ? []
+  : [
+      section("profile", "Profile", ProfileSection, 100),
+      section("preferences", "Preferences", PreferencesSection, 200),
+      section("notifications", "Notifications", NotificationsSection, 300),
+      section("sign-in-methods", "Sign-in methods", SignInMethodsSection, 400)
+    ];
+const placement = {
+  getContext: () => context,
+  setContext: () => context,
+  getPlacements: () => placements,
+  getRevision: () => revision,
+  subscribe(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  }
+};
+const errorRuntime = {
+  report(event) {
+    window.accountFixture.reports.push(event);
+    return { skipped: false };
+  },
+  dismiss: () => 0
+};
+
+// What a host passes ProfileClientElement: forms and pending flags, with actions the test can make fail.
+const profileProps = reactive({ copy: {}, variant: {}, features: {}, ui: {} });
+const profileState = shallowReactive({
+  profileForm: reactive({ displayName: "Ada", email: "ada@example.com" }),
+  preferencesForm: reactive({ avatarSize: 64 }),
+  profileAvatar: reactive({ effectiveUrl: "", hasUploadedAvatar: true }),
+  profileInitials: "AD",
+  selectedAvatarFileName: "",
+  profileFieldErrors: reactive({}),
+  profileMutation: { isPending: ref(false) },
+  avatarDeleteMutation: { isPending: ref(false) }
+});
+const actions = {
+  async submitProfile() {},
+  async openAvatarEditor() {
+    profileState.selectedAvatarFileName = "ada.png";
+  },
+  async submitAvatarDelete() {
+    throw new Error("Avatar service down.");
+  }
+};
+function record(name) {
+  return (payload) => window.accountFixture.events.push({ name, payload });
+}
+
+window.accountFixture = {
+  reports: [],
+  events: [],
+  profileProps,
+  profileState,
+  placeSection() {
+    placements = [...placements, section("extra", "Extra", { render: () => h("p", "Extra section") }, 150)];
+    revision += 1;
+    listeners.forEach((listener) => listener({ revision }));
+  }
+};
+
+const AccountPage = {
+  setup() {
+    const accountLocale = useAccountLocale();
+    return () => h("div", [
+      h("p", { "data-testid": "account-locale" }, accountLocale.value),
+      h(AccountSettingsClientElement)
+    ]);
+  }
+};
+const ProfileElementPage = {
+  render: () => h(ProfileClientElement, {
+    state: profileState,
+    actions,
+    ...profileProps,
+    "onProfile:submit": record("profile:submit"),
+    "onAvatar:replace": record("avatar:replace"),
+    "onAvatar:remove": record("avatar:remove"),
+    onInteraction: record("interaction"),
+    "onAction:started": record("action:started"),
+    "onAction:succeeded": record("action:succeeded"),
+    "onAction:failed": record("action:failed")
+  }, {
+    "form-after": ({ state }) => h("p", { "data-testid": "form-after" }, state.profileForm.email)
+  })
+};
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: "/home", component: { render: () => h("p", { "data-testid": "home" }, "Home") } },
+    { path: "/account", component: AccountPage },
+    { path: "/profile-element", component: ProfileElementPage }
+  ]
+});
+const app = createApp({ render: () => h(components.VApp, null, { default: () => h(components.VMain, null, { default: () => h(RouterView) }) }) });
+app.provide(SHELL_WEB_PLACEMENT_RUNTIME_KEY, placement);
+app.provide(SHELL_WEB_ERROR_RUNTIME_KEY, errorRuntime);
+app.use(router);
+app.use(VueQueryPlugin, { queryClient: new QueryClient({ defaultOptions: { queries: { retry: false } } }) });
+app.use(createVuetify({ components, directives, icons: { defaultSet: "mdi", aliases, sets: { mdi } } }));
+await router.isReady();
+app.mount("#app");

package/fixtures/account-settings/vite.config.mjs

@@ -0,0 +1,9 @@
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  root: fileURLToPath(new URL("./", import.meta.url)),
+  plugins: [vue()],
+  server: { host: "127.0.0.1", strictPort: true }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/users-web",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"
@@ -13,15 +13,15 @@
     "./locales/en.json": "./locales/en.json"
   },
   "dependencies": {
-    "@jskit-ai/uploads-image-web": "0.2.4",
-    "@jskit-ai/users-core": "0.2.5"
+    "@jskit-ai/uploads-image-web": "0.2.5",
+    "@jskit-ai/users-core": "0.2.6"
   },
   "peerDependencies": {
-    "@jskit-ai/auth-web": "0.2.5",
-    "@jskit-ai/http-runtime": "0.2.4",
-    "@jskit-ai/http-web": "0.2.8",
-    "@jskit-ai/kernel": "0.2.4",
-    "@jskit-ai/shell-web": "0.2.4",
+    "@jskit-ai/auth-web": "0.2.7",
+    "@jskit-ai/http-runtime": "0.2.5",
+    "@jskit-ai/http-web": "0.2.9",
+    "@jskit-ai/kernel": "0.2.5",
+    "@jskit-ai/shell-web": "0.2.5",
     "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
     "vue-router": "^5.0.4",

package/patterns/account-settings/example/src/components/account/settings/AccountSettingsPreferencesSection.vue

@@ -24,7 +24,7 @@ const preferences = props.runtime.preferences;
               variant="outlined"
               density="comfortable"
               :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
-              :error-messages="preferences.fieldErrors.theme ? [preferences.fieldErrors.theme] : []"
+              :error-messages="preferences.fieldErrors.theme"
             />
           </v-col>
 
@@ -38,7 +38,7 @@ const preferences = props.runtime.preferences;
               variant="outlined"
               density="comfortable"
               :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
-              :error-messages="preferences.fieldErrors.locale ? [preferences.fieldErrors.locale] : []"
+              :error-messages="preferences.fieldErrors.locale"
             />
           </v-col>
 
@@ -50,7 +50,7 @@ const preferences = props.runtime.preferences;
               variant="outlined"
               density="comfortable"
               :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
-              :error-messages="preferences.fieldErrors.timeZone ? [preferences.fieldErrors.timeZone] : []"
+              :error-messages="preferences.fieldErrors.timeZone"
             />
           </v-col>
 
@@ -64,7 +64,7 @@ const preferences = props.runtime.preferences;
               variant="outlined"
               density="comfortable"
               :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
-              :error-messages="preferences.fieldErrors.dateFormat ? [preferences.fieldErrors.dateFormat] : []"
+              :error-messages="preferences.fieldErrors.dateFormat"
             />
           </v-col>
 
@@ -78,7 +78,7 @@ const preferences = props.runtime.preferences;
               variant="outlined"
               density="comfortable"
               :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
-              :error-messages="preferences.fieldErrors.numberFormat ? [preferences.fieldErrors.numberFormat] : []"
+              :error-messages="preferences.fieldErrors.numberFormat"
             />
           </v-col>
 
@@ -90,7 +90,7 @@ const preferences = props.runtime.preferences;
               variant="outlined"
               density="comfortable"
               :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
-              :error-messages="preferences.fieldErrors.currencyCode ? [preferences.fieldErrors.currencyCode] : []"
+              :error-messages="preferences.fieldErrors.currencyCode"
             />
           </v-col>
 
@@ -102,7 +102,7 @@ const preferences = props.runtime.preferences;
               variant="outlined"
               density="comfortable"
               :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
-              :error-messages="preferences.fieldErrors.avatarSize ? [preferences.fieldErrors.avatarSize] : []"
+              :error-messages="preferences.fieldErrors.avatarSize"
             />
           </v-col>
         </v-row>

package/patterns/account-settings/example/src/components/account/settings/AccountSettingsProfileSection.vue

@@ -59,7 +59,7 @@ const profile = props.runtime.profile;
               density="comfortable"
               autocomplete="nickname"
               :readonly="profile.isSaving.value || profile.isRefreshing.value"
-              :error-messages="profile.fieldErrors.displayName ? [profile.fieldErrors.displayName] : []"
+              :error-messages="profile.fieldErrors.displayName"
             />
           </v-col>
 

package/src/client/account-settings/sections.js

@@ -85,20 +85,16 @@ function resolveAccountSettingsSections(entries = []) {
   return Object.freeze(deduplicated);
 }
 
+function stopListening() {}
+
 function useAccountSettingsSections() {
-  const placementRuntime = inject(SHELL_WEB_PLACEMENT_RUNTIME_KEY, null);
+  /** @type {import("../types.js").AccountSectionsPlacementRuntime} */
+  const placementRuntime = inject(SHELL_WEB_PLACEMENT_RUNTIME_KEY);
   const { context: placementContext } = useWebPlacementContext();
-  const revision = ref(
-    placementRuntime && typeof placementRuntime.getRevision === "function"
-      ? placementRuntime.getRevision()
-      : 0
-  );
-  let unsubscribe = null;
+  const revision = ref(placementRuntime.getRevision());
+  let unsubscribe = stopListening;
 
   onMounted(() => {
-    if (!placementRuntime || typeof placementRuntime.subscribe !== "function") {
-      return;
-    }
     unsubscribe = placementRuntime.subscribe((event = {}) => {
       const nextRevision = Number(event.revision);
       revision.value = Number.isInteger(nextRevision) ? nextRevision : revision.value + 1;
@@ -106,18 +102,12 @@ function useAccountSettingsSections() {
   });
 
   onBeforeUnmount(() => {
-    if (typeof unsubscribe === "function") {
-      unsubscribe();
-      unsubscribe = null;
-    }
+    unsubscribe();
+    unsubscribe = stopListening;
   });
 
   return computed(() => {
     void revision.value;
-    if (!placementRuntime || typeof placementRuntime.getPlacements !== "function") {
-      return EMPTY_ACCOUNT_SETTINGS_SECTIONS;
-    }
-
     const placements = placementRuntime.getPlacements({
       surface: "account",
       target: ACCOUNT_SETTINGS_SECTION_TARGET,

package/src/client/bootstrap/user-bootstrap-handler.js

@@ -3,43 +3,41 @@ import { resolvePlacementUserFromBootstrapPayload } from "../lib/bootstrap.js";
 import { resolveBootstrapAccountLocale, setAccountLocale } from "../lib/accountLocale.js";
 
 function createUsersBootstrapUserHandler() {
-  return Object.freeze({
-    handlerId: "users.web.bootstrap.user",
-    order: 50,
-    applyBootstrapPayload({ payload = {}, placementRuntime, source } = {}) {
-      setAccountLocale(resolveBootstrapAccountLocale(payload));
-      if (!placementRuntime || typeof placementRuntime.setContext !== "function") {
-        return;
+  /** @param {import("../types.js").UsersBootstrapContext} context */
+  function applyBootstrapPayload({ payload = {}, placementRuntime, source }) {
+    setAccountLocale(resolveBootstrapAccountLocale(payload));
+    const context = placementRuntime.getContext();
+    placementRuntime.setContext(
+      {
+        user: resolvePlacementUserFromBootstrapPayload(payload, context.user)
+      },
+      {
+        source
       }
+    );
+  }
 
-      const context = placementRuntime.getContext?.() || {};
-      placementRuntime.setContext(
-        {
-          user: resolvePlacementUserFromBootstrapPayload(payload, context?.user)
-        },
-        {
-          source
-        }
-      );
-    },
-    handleBootstrapError({ error, placementRuntime, source } = {}) {
-      if (resolveBootstrapErrorStatusCode(error) !== 401) {
-        return;
-      }
-      setAccountLocale("");
-      if (!placementRuntime || typeof placementRuntime.setContext !== "function") {
-        return;
+  /** @param {import("../types.js").UsersBootstrapContext} context */
+  function handleBootstrapError({ error, placementRuntime, source }) {
+    if (resolveBootstrapErrorStatusCode(error) !== 401) {
+      return;
+    }
+    setAccountLocale("");
+    placementRuntime.setContext(
+      {
+        user: null
+      },
+      {
+        source
       }
+    );
+  }
 
-      placementRuntime.setContext(
-        {
-          user: null
-        },
-        {
-          source
-        }
-      );
-    }
+  return Object.freeze({
+    handlerId: "users.web.bootstrap.user",
+    order: 50,
+    applyBootstrapPayload,
+    handleBootstrapError
   });
 }
 

package/src/client/components/ProfileClientElement.vue

@@ -57,7 +57,7 @@
                 variant="outlined"
                 :density="resolvedVariant.density"
                 autocomplete="nickname"
-                :error-messages="state.profileFieldErrors.displayName ? [state.profileFieldErrors.displayName] : []"
+                :error-messages="state.profileFieldErrors.displayName"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -89,34 +89,24 @@
 import { computed } from "vue";
 import { createComponentInteractionEmitter } from "@jskit-ai/kernel/client";
 import {
-  normalizeObject,
-  normalizeOneOf
-} from "@jskit-ai/kernel/shared/support/normalize";
+  resolveProfileCopy,
+  resolveProfileFeatures,
+  resolveProfileRootClasses,
+  resolveProfileUiClasses,
+  resolveProfileUiTestIds,
+  resolveProfileVariant
+} from "../lib/profileElementPresentation.js";
 import { useJskitText } from "../i18n.js";
 
 const { t } = useJskitText();
 
-// Default copy, by copy prop key; the copy prop overrides it.
-const DEFAULT_COPY_KEYS = Object.freeze({
-  title: "jskit.users.accountSettings.profile.title",
-  previewSizePrefix: "jskit.users.accountSettings.profile.previewSizePrefix",
-  previewSizeSuffix: "jskit.users.accountSettings.profile.previewSizeSuffix",
-  replaceAvatar: "jskit.users.accountSettings.profile.replaceAvatar",
-  removeAvatar: "jskit.users.accountSettings.profile.removeAvatar",
-  selectedFilePrefix: "jskit.users.accountSettings.profile.selectedFilePrefix",
-  displayName: "jskit.users.accountSettings.profile.displayName",
-  email: "jskit.users.accountSettings.profile.email",
-  emailHint: "jskit.users.accountSettings.profile.emailHint",
-  saveProfile: "jskit.users.accountSettings.profile.save"
-});
-
 const props = defineProps({
   state: {
-    type: Object,
+    type: /** @type {import("vue").PropType<import("../types.js").ProfileElementState>} */ (Object),
     required: true
   },
   actions: {
-    type: Object,
+    type: /** @type {import("vue").PropType<import("../types.js").ProfileElementActions>} */ (Object),
     required: true
   },
   copy: {
@@ -146,65 +136,16 @@ const {
   invokeAction
 } = createComponentInteractionEmitter(emit);
 
-const copyText = computed(() => ({
-  ...Object.fromEntries(Object.entries(DEFAULT_COPY_KEYS).map(([name, key]) => [name, t(key)])),
-  ...normalizeObject(props.copy)
-}));
-
-const resolvedVariant = computed(() => {
-  const variant = normalizeObject(props.variant);
-  return {
-    layout: normalizeOneOf(variant.layout, ["compact", "comfortable"], "comfortable"),
-    surface: normalizeOneOf(variant.surface, ["plain", "carded"], "carded"),
-    density: normalizeOneOf(variant.density, ["compact", "comfortable"], "comfortable"),
-    tone: normalizeOneOf(variant.tone, ["neutral", "emphasized"], "neutral")
-  };
-});
-
-const resolvedFeatures = computed(() => {
-  const features = normalizeObject(props.features);
-  return {
-    header: features.header !== false,
-    removeAvatar: features.removeAvatar !== false
-  };
-});
-
-const uiClasses = computed(() => {
-  const classes = normalizeObject(normalizeObject(props.ui).classes);
-  return {
-    root: String(classes.root || "").trim(),
-    card: String(classes.card || "").trim()
-  };
-});
-
-const uiTestIds = computed(() => {
-  const testIds = normalizeObject(normalizeObject(props.ui).testIds);
-  return {
-    root: String(testIds.root || "profile-client-element"),
-    card: String(testIds.card || "profile-client-card"),
-    submitButton: String(testIds.submitButton || "profile-submit-button"),
-    avatarReplaceButton: String(testIds.avatarReplaceButton || "profile-avatar-replace-button"),
-    avatarRemoveButton: String(testIds.avatarRemoveButton || "profile-avatar-remove-button")
-  };
-});
-
-const rootClasses = computed(() => {
-  const classes = [
-    "profile-client-element",
-    `profile-client-element--layout-${resolvedVariant.value.layout}`,
-    `profile-client-element--surface-${resolvedVariant.value.surface}`,
-    `profile-client-element--density-${resolvedVariant.value.density}`,
-    `profile-client-element--tone-${resolvedVariant.value.tone}`
-  ];
-  if (uiClasses.value.root) {
-    classes.push(uiClasses.value.root);
-  }
-  return classes;
-});
+const copyText = computed(() => resolveProfileCopy(props.copy, t));
+const resolvedVariant = computed(() => resolveProfileVariant(props.variant));
+const resolvedFeatures = computed(() => resolveProfileFeatures(props.features));
+const uiClasses = computed(() => resolveProfileUiClasses(props.ui));
+const uiTestIds = computed(() => resolveProfileUiTestIds(props.ui));
+const rootClasses = computed(() => resolveProfileRootClasses(resolvedVariant.value, uiClasses.value));
 
 async function onSubmitProfile() {
   const payload = {
-    displayName: String(state.profileForm?.displayName || "").trim()
+    displayName: String(state.profileForm.displayName || "").trim()
   };
   emit("profile:submit", payload);
   emitInteraction("profile:submit", payload);

package/src/client/composables/account-settings/accountSettingsAvatarUploadRuntime.js

@@ -4,6 +4,16 @@ import { resolveFieldErrors } from "@jskit-ai/http-runtime/client";
 import { httpWebClient } from "@jskit-ai/http-web/client/lib/httpClient";
 import { useJskitText } from "../../i18n.js";
 
+/**
+ * @param {{
+ *   queryClient: import("@jskit-ai/kernel/client/types").ClientQueryClient,
+ *   sessionQueryKey: readonly string[],
+ *   accountSettingsQueryKey: readonly string[],
+ *   selectedAvatarFileName: import("vue").Ref<string>,
+ *   applySettingsData: (data: unknown) => void,
+ *   reportAccountFeedback: (feedback: import("../../types.js").AccountFeedback) => void
+ * }} options
+ */
 function createAccountSettingsAvatarUploadRuntime({
   queryClient,
   sessionQueryKey,
@@ -11,7 +21,7 @@ function createAccountSettingsAvatarUploadRuntime({
   selectedAvatarFileName,
   applySettingsData,
   reportAccountFeedback
-} = {}) {
+}) {
   const { t, fieldErrorMessages, serverMessage } = useJskitText();
 
   async function resolveCsrfToken() {

package/src/client/composables/useAccountSettingsRuntime.js

@@ -359,6 +359,10 @@ function useAccountSettingsRuntime() {
 
   const loadingSettings = computed(() => Boolean(settingsView.isLoading));
   const refreshingSettings = computed(() => Boolean(settingsView.isRefetching));
+  const savingProfile = computed(() => Boolean(profileAddEdit.isSaving));
+  const deletingAvatar = computed(() => Boolean(avatarDeleteCommand.isRunning));
+  const savingPreferences = computed(() => Boolean(preferencesAddEdit.isSaving));
+  const savingNotifications = computed(() => Boolean(notificationsAddEdit.isSaving));
   const settingsLoadError = computed(() => String(settingsView.loadError || "").trim());
 
   async function refreshSettings() {
@@ -422,24 +426,24 @@ function useAccountSettingsRuntime() {
     avatarUploadRuntime.destroy();
   });
 
-  const profile = Object.freeze({
+  const profile = {
     form: profileForm,
     avatar: profileAvatar,
     initials: profileInitials,
     selectedAvatarFileName,
     fieldErrors: profileAddEdit.fieldErrors,
-    isSaving: profileAddEdit.isSaving,
-    isDeletingAvatar: avatarDeleteCommand.isRunning,
+    isSaving: savingProfile,
+    isDeletingAvatar: deletingAvatar,
     isRefreshing: refreshingSettings,
     submit: submitProfile,
     openAvatarEditor,
     removeAvatar: submitAvatarDelete
-  });
+  };
 
-  const preferences = Object.freeze({
+  const preferences = {
     form: preferencesForm,
     fieldErrors: preferencesAddEdit.fieldErrors,
-    isSaving: preferencesAddEdit.isSaving,
+    isSaving: savingPreferences,
     isRefreshing: refreshingSettings,
     // Plain arrays for v-select items; the getters follow the active language.
     options: Object.freeze({
@@ -460,24 +464,24 @@ function useAccountSettingsRuntime() {
       avatarSize: AVATAR_SIZE_OPTIONS
     }),
     submit: submitPreferences
-  });
+  };
 
-  const notifications = Object.freeze({
+  const notifications = {
     form: notificationsForm,
-    isSaving: notificationsAddEdit.isSaving,
+    isSaving: savingNotifications,
     isRefreshing: refreshingSettings,
     submit: submitNotifications
-  });
+  };
 
-  const signInMethods = Object.freeze({
+  const signInMethods = {
     methods: signInMethodList,
     unlinkingProvider: computed(() => signInMethodsState.unlinkingProvider),
     isRefreshing: refreshingSettings,
     link: linkSignInMethod,
     unlink: unlinkSignInMethod
-  });
+  };
 
-  return Object.freeze({
+  return {
     backTarget,
     backNavigationTarget,
     loadingSettings,
@@ -488,7 +492,7 @@ function useAccountSettingsRuntime() {
     preferences,
     notifications,
     signInMethods
-  });
+  };
 }
 
 export { useAccountSettingsRuntime };

package/src/client/lib/accountLocale.js

@@ -4,8 +4,8 @@ import { normalizeLocaleCode } from "@jskit-ai/users-core/shared/settings";
 // The signed-in user's saved language (user_settings.locale) as a canonical BCP 47
 // code, or "" when nobody is signed in. JSKIT never switches the app's vue-i18n
 // locale; the app watches this and switches it.
+// readable-check: allow module-state - shared resource: a page has one signed-in user, and the bootstrap handler that sets their language runs outside any component
 const accountLocale = ref("");
-const readonlyAccountLocale = readonly(accountLocale);
 
 function setAccountLocale(value) {
   accountLocale.value = normalizeLocaleCode(value);
@@ -20,7 +20,7 @@ function resolveBootstrapAccountLocale(payload = {}) {
 }
 
 function useAccountLocale() {
-  return readonlyAccountLocale;
+  return readonly(accountLocale);
 }
 
 export {