@jskit-ai/users-web 0.1.52 → 0.1.54

package/src/client/lib/httpClient.js

@@ -1,67 +1,10 @@
-import { createHttpClient } from "@jskit-ai/http-runtime/client";
-import {
-  isTransientQueryError,
-  transientQueryRetryDelay
-} from "@jskit-ai/kernel/shared/support";
+import { createTransientRetryHttpClient } from "@jskit-ai/http-runtime/client";
 
-const SAFE_RETRY_METHODS = Object.freeze(new Set(["GET", "HEAD"]));
-const MAX_TRANSIENT_HTTP_RETRIES = 2;
-
-const baseUsersWebHttpClient = createHttpClient({
+const usersWebHttpClient = createTransientRetryHttpClient({
   credentials: "include",
   csrf: {
     sessionPath: "/api/session"
   }
 });
 
-function sleep(delayMs) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, delayMs);
-  });
-}
-
-function shouldRetryTransientHttpFailure(error, method, attemptIndex) {
-  if (!SAFE_RETRY_METHODS.has(String(method || "GET").toUpperCase())) {
-    return false;
-  }
-  if (!isTransientQueryError(error)) {
-    return false;
-  }
-  return Number(attemptIndex) < MAX_TRANSIENT_HTTP_RETRIES;
-}
-
-async function requestWithTransientRetry(executor, method) {
-  let attemptIndex = 0;
-
-  while (true) {
-    try {
-      return await executor();
-    } catch (error) {
-      if (!shouldRetryTransientHttpFailure(error, method, attemptIndex)) {
-        throw error;
-      }
-      attemptIndex += 1;
-      await sleep(transientQueryRetryDelay(attemptIndex));
-    }
-  }
-}
-
-const usersWebHttpClient = Object.freeze({
-  ...baseUsersWebHttpClient,
-  request(url, requestOptions = {}, state = null) {
-    const method = String(requestOptions?.method || "GET").toUpperCase();
-    return requestWithTransientRetry(
-      () => baseUsersWebHttpClient.request(url, requestOptions, state),
-      method
-    );
-  },
-  requestStream(url, requestOptions = {}, handlers = {}, state = null) {
-    const method = String(requestOptions?.method || "GET").toUpperCase();
-    return requestWithTransientRetry(
-      () => baseUsersWebHttpClient.requestStream(url, requestOptions, handlers, state),
-      method
-    );
-  }
-});
-
 export { usersWebHttpClient };

package/src/client/lib/theme.js

@@ -1,12 +1,8 @@
 import { ThemeSymbol } from "vuetify/lib/composables/theme.js";
-import { resolveWorkspaceThemePalette } from "@jskit-ai/users-core/shared/settings";
 
 const THEME_PREFERENCE_LIGHT = "light";
 const THEME_PREFERENCE_DARK = "dark";
 const THEME_PREFERENCE_SYSTEM = "system";
-const HEX_COLOR_PATTERN = /^#[0-9A-Fa-f]{6}$/;
-const WORKSPACE_THEME_NAME_LIGHT = "workspace-light";
-const WORKSPACE_THEME_NAME_DARK = "workspace-dark";
 
 function normalizeThemePreference(value) {
   const normalized = String(value || "").trim().toLowerCase();
@@ -22,8 +18,9 @@ function resolveSystemThemeName({ prefersDark } = {}) {
   }
 
   if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
-    const prefersDarkFromMedia = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    return prefersDarkFromMedia ? THEME_PREFERENCE_DARK : THEME_PREFERENCE_LIGHT;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? THEME_PREFERENCE_DARK
+      : THEME_PREFERENCE_LIGHT;
   }
 
   return THEME_PREFERENCE_LIGHT;
@@ -51,16 +48,11 @@ function resolveThemePreferenceStorage(options = {}) {
     return null;
   }
 
-  let storage = null;
   try {
-    storage = window.localStorage;
+    return window.localStorage;
   } catch {
     return null;
   }
-  if (!storage || typeof storage !== "object") {
-    return null;
-  }
-  return storage;
 }
 
 function readPersistedThemePreference(options = {}) {
@@ -70,8 +62,7 @@ function readPersistedThemePreference(options = {}) {
   }
 
   try {
-    const value = storage.getItem("jskit.themePreference");
-    return normalizeThemePreference(value);
+    return normalizeThemePreference(storage.getItem("jskit.themePreference"));
   } catch {
     return THEME_PREFERENCE_SYSTEM;
   }
@@ -83,9 +74,8 @@ function persistThemePreference(themePreference, options = {}) {
     return false;
   }
 
-  const normalizedPreference = normalizeThemePreference(themePreference);
   try {
-    storage.setItem("jskit.themePreference", normalizedPreference);
+    storage.setItem("jskit.themePreference", normalizeThemePreference(themePreference));
     return true;
   } catch {
     return false;
@@ -128,12 +118,7 @@ function resolveVuetifyThemeController(vueApp) {
   }
 
   const themeController = provides[ThemeSymbol];
-  if (
-    !themeController ||
-    typeof themeController !== "object" ||
-    !themeController.global ||
-    !themeController.global.name
-  ) {
+  if (!themeController || typeof themeController !== "object" || !themeController.global || !themeController.global.name) {
     return null;
   }
 
@@ -141,12 +126,7 @@ function resolveVuetifyThemeController(vueApp) {
 }
 
 function setVuetifyThemeName(themeController, themeName) {
-  if (
-    !themeController ||
-    typeof themeController !== "object" ||
-    !themeController.global ||
-    !themeController.global.name
-  ) {
+  if (!themeController || typeof themeController !== "object" || !themeController.global || !themeController.global.name) {
     return false;
   }
 
@@ -154,171 +134,15 @@ function setVuetifyThemeName(themeController, themeName) {
   if (themeController.global.name.value === normalizedThemeName) {
     return false;
   }
-  themeController.global.name.value = normalizedThemeName;
-  return true;
-}
-
-function normalizeHexColor(value = "") {
-  const normalized = String(value || "").trim();
-  if (!HEX_COLOR_PATTERN.test(normalized)) {
-    return "";
-  }
-  return normalized.toUpperCase();
-}
-
-function hexColorToRgb(value = "") {
-  const normalized = normalizeHexColor(value);
-  if (!normalized) {
-    return "";
-  }
-
-  const red = Number.parseInt(normalized.slice(1, 3), 16);
-  const green = Number.parseInt(normalized.slice(3, 5), 16);
-  const blue = Number.parseInt(normalized.slice(5, 7), 16);
-  return `${red},${green},${blue}`;
-}
-
-function resolveVuetifyThemeDefinitions(themeController) {
-  if (!themeController || typeof themeController !== "object") {
-    return null;
-  }
-  const themes = themeController.themes?.value;
-  if (!themes || typeof themes !== "object") {
-    return null;
-  }
-  return themes;
-}
-
-function normalizeThemeColors(colors) {
-  const source = colors && typeof colors === "object" ? colors : {};
-  const normalized = {};
-  for (const [key, value] of Object.entries(source)) {
-    normalized[String(key)] = String(value);
-  }
-  return normalized;
-}
-
-function normalizeWorkspaceBaseThemeName(themeName = "") {
-  const normalized = String(themeName || "").trim().toLowerCase();
-  if (normalized === WORKSPACE_THEME_NAME_LIGHT) {
-    return THEME_PREFERENCE_LIGHT;
-  }
-  if (normalized === WORKSPACE_THEME_NAME_DARK) {
-    return THEME_PREFERENCE_DARK;
-  }
-  if (normalized === THEME_PREFERENCE_DARK) {
-    return THEME_PREFERENCE_DARK;
-  }
-  return THEME_PREFERENCE_LIGHT;
-}
 
-function areThemeColorsEqual(leftColors = {}, rightColors = {}) {
-  const leftEntries = Object.entries(leftColors);
-  const rightEntries = Object.entries(rightColors);
-  if (leftEntries.length !== rightEntries.length) {
-    return false;
-  }
-
-  for (const [key, value] of leftEntries) {
-    if (!Object.hasOwn(rightColors, key)) {
-      return false;
-    }
-    if (String(rightColors[key]) !== String(value)) {
-      return false;
-    }
-  }
-  return true;
-}
-
-function composeWorkspaceThemeDefinition(baseThemeDefinition, palette) {
-  const baseTheme = baseThemeDefinition && typeof baseThemeDefinition === "object" ? baseThemeDefinition : {};
-  const baseColors = normalizeThemeColors(baseTheme.colors);
-  return {
-    ...baseTheme,
-    colors: {
-      ...baseColors,
-      primary: palette.color,
-      secondary: palette.secondaryColor,
-      surface: palette.surfaceColor,
-      "surface-variant": palette.surfaceVariantColor
-    }
-  };
-}
-
-function upsertThemeDefinition(themeDefinitions, themeName, nextDefinition) {
-  const currentDefinition =
-    themeDefinitions[themeName] && typeof themeDefinitions[themeName] === "object" ? themeDefinitions[themeName] : null;
-  const currentColors = normalizeThemeColors(currentDefinition?.colors);
-  const nextColors = normalizeThemeColors(nextDefinition?.colors);
-  const sameDarkFlag = Boolean(currentDefinition?.dark) === Boolean(nextDefinition?.dark);
-  if (sameDarkFlag && areThemeColorsEqual(currentColors, nextColors)) {
-    return false;
-  }
-  themeDefinitions[themeName] = nextDefinition;
+  themeController.global.name.value = normalizedThemeName;
   return true;
 }
 
-function setVuetifyPrimaryColorOverride(themeController, themeInput = null) {
-  if (
-    !themeController ||
-    typeof themeController !== "object" ||
-    !themeController.global ||
-    !themeController.global.name
-  ) {
-    return false;
-  }
-
-  const themeDefinitions = resolveVuetifyThemeDefinitions(themeController);
-  if (!themeDefinitions) {
-    return false;
-  }
-
-  const currentThemeName = String(themeController.global.name.value || "").trim();
-  const normalizedBaseThemeName = normalizeWorkspaceBaseThemeName(currentThemeName);
-  const normalizedThemeName =
-    normalizedBaseThemeName === THEME_PREFERENCE_DARK ? THEME_PREFERENCE_DARK : THEME_PREFERENCE_LIGHT;
-  const source = themeInput && typeof themeInput === "object" ? themeInput : null;
-
-  if (!source) {
-    if (currentThemeName === normalizedThemeName) {
-      return false;
-    }
-    themeController.global.name.value = normalizedThemeName;
-    return true;
-  }
-
-  const baseLightTheme =
-    themeDefinitions[THEME_PREFERENCE_LIGHT] && typeof themeDefinitions[THEME_PREFERENCE_LIGHT] === "object"
-      ? themeDefinitions[THEME_PREFERENCE_LIGHT]
-      : null;
-  const baseDarkTheme =
-    themeDefinitions[THEME_PREFERENCE_DARK] && typeof themeDefinitions[THEME_PREFERENCE_DARK] === "object"
-      ? themeDefinitions[THEME_PREFERENCE_DARK]
-      : null;
-  if (!baseLightTheme || !baseDarkTheme) {
-    return false;
-  }
-
-  const lightPalette = resolveWorkspaceThemePalette(source, { mode: THEME_PREFERENCE_LIGHT });
-  const darkPalette = resolveWorkspaceThemePalette(source, { mode: THEME_PREFERENCE_DARK });
-  const nextLightTheme = composeWorkspaceThemeDefinition(baseLightTheme, lightPalette);
-  const nextDarkTheme = composeWorkspaceThemeDefinition(baseDarkTheme, darkPalette);
-  const nextThemeName =
-    normalizedThemeName === THEME_PREFERENCE_DARK ? WORKSPACE_THEME_NAME_DARK : WORKSPACE_THEME_NAME_LIGHT;
-
-  let changed = false;
-  changed = upsertThemeDefinition(themeDefinitions, WORKSPACE_THEME_NAME_LIGHT, nextLightTheme) || changed;
-  changed = upsertThemeDefinition(themeDefinitions, WORKSPACE_THEME_NAME_DARK, nextDarkTheme) || changed;
-  if (themeController.global.name.value !== nextThemeName) {
-    themeController.global.name.value = nextThemeName;
-    changed = true;
-  }
-
-  return changed;
-}
-
 export {
-  hexColorToRgb,
+  THEME_PREFERENCE_DARK,
+  THEME_PREFERENCE_LIGHT,
+  THEME_PREFERENCE_SYSTEM,
   normalizeThemePreference,
   persistBootstrapThemePreference,
   persistThemePreference,
@@ -327,6 +151,5 @@ export {
   resolveThemeNameForPreference,
   resolveBootstrapThemeName,
   resolveVuetifyThemeController,
-  setVuetifyPrimaryColorOverride,
   setVuetifyThemeName
 };

package/src/client/providers/UsersWebClientProvider.js

@@ -1,9 +1,6 @@
-import UsersProfileSurfaceSwitchMenuItem from "../components/UsersProfileSurfaceSwitchMenuItem.vue";
 import UsersHomeToolsWidget from "../components/UsersHomeToolsWidget.vue";
 import ProfileClientElement from "../components/ProfileClientElement.vue";
-import {
-  createBootstrapPlacementRuntime
-} from "../runtime/bootstrapPlacementRuntime.js";
+import { bootUsersWebClientProvider } from "./bootUsersWebClientProvider.js";
 
 class UsersWebClientProvider {
   static id = "users.web.client";
@@ -14,32 +11,12 @@ class UsersWebClientProvider {
       throw new Error("UsersWebClientProvider requires application singleton().");
     }
 
-    app.singleton("users.web.profile.menu.surface-switch-item", () => UsersProfileSurfaceSwitchMenuItem);
     app.singleton("users.web.home.tools.widget", () => UsersHomeToolsWidget);
     app.singleton("users.web.profile.element", () => ProfileClientElement);
-    app.singleton("users.web.bootstrap-placement.runtime", (scope) => createBootstrapPlacementRuntime({ app: scope }));
   }
 
   async boot(app) {
-    if (!app || typeof app.make !== "function") {
-      throw new Error("UsersWebClientProvider requires application make().");
-    }
-
-    const runtime = app.make("users.web.bootstrap-placement.runtime");
-    if (runtime && typeof runtime.initialize === "function") {
-      await runtime.initialize();
-    }
-  }
-
-  shutdown(app) {
-    if (!app || typeof app.make !== "function") {
-      return;
-    }
-
-    const runtime = app.make("users.web.bootstrap-placement.runtime");
-    if (runtime && typeof runtime.shutdown === "function") {
-      runtime.shutdown();
-    }
+    await bootUsersWebClientProvider(app);
   }
 }
 

package/src/client/providers/bootUsersWebClientProvider.js

@@ -0,0 +1,28 @@
+import {
+  ACCOUNT_SETTINGS_SECTIONS_INJECTION_KEY,
+  ACCOUNT_SETTINGS_SECTION_REGISTRY_TAG,
+  resolveAccountSettingsSections
+} from "../account-settings/sections.js";
+
+async function bootUsersWebClientProvider(app) {
+  if (!app || typeof app.make !== "function") {
+    throw new Error("bootUsersWebClientProvider requires application make().");
+  }
+
+  const vueApp = app.make("jskit.client.vue.app");
+  if (!vueApp || typeof vueApp.provide !== "function") {
+    throw new Error("bootUsersWebClientProvider requires jskit.client.vue.app provide().");
+  }
+
+  const extensionSections =
+    typeof app.resolveTag === "function"
+      ? app.resolveTag(ACCOUNT_SETTINGS_SECTION_REGISTRY_TAG)
+      : [];
+
+  vueApp.provide(
+    ACCOUNT_SETTINGS_SECTIONS_INJECTION_KEY,
+    resolveAccountSettingsSections(extensionSections)
+  );
+}
+
+export { bootUsersWebClientProvider };

package/src/shared/toolsOutletContracts.js

@@ -6,14 +6,7 @@ const HOME_TOOLS_OUTLET = Object.freeze({
   ariaLabel: "Home tools"
 });
 
-const WORKSPACE_TOOLS_OUTLET = Object.freeze({
-  target: "workspace-tools:primary-menu",
-  defaultLinkComponentToken: DEFAULT_TOOLS_LINK_COMPONENT_TOKEN,
-  ariaLabel: "Workspace tools"
-});
-
 export {
   DEFAULT_TOOLS_LINK_COMPONENT_TOKEN,
-  HOME_TOOLS_OUTLET,
-  WORKSPACE_TOOLS_OUTLET
+  HOME_TOOLS_OUTLET
 };

package/templates/src/components/account/settings/AccountSettingsClientElement.vue

@@ -3,27 +3,48 @@ import { computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { normalizeOneOf } from "@jskit-ai/kernel/shared/support/normalize";
 import { useAccountSettingsRuntime } from "@jskit-ai/users-web/client/composables/useAccountSettingsRuntime";
+import { useAccountSettingsSections } from "@jskit-ai/users-web/client/account-settings/sections";
 import AccountSettingsProfileSection from "./AccountSettingsProfileSection.vue";
 import AccountSettingsPreferencesSection from "./AccountSettingsPreferencesSection.vue";
 import AccountSettingsNotificationsSection from "./AccountSettingsNotificationsSection.vue";
-import AccountSettingsInvitesSection from "./AccountSettingsInvitesSection.vue";
 
 const runtime = useAccountSettingsRuntime();
 const route = useRoute();
 const router = useRouter();
+const extensionSections = useAccountSettingsSections();
 
 const sections = computed(() => {
   const nextSections = [
-    { title: "Profile", value: "profile" },
-    { title: "Preferences", value: "preferences" },
-    { title: "Notifications", value: "notifications" }
+    { title: "Profile", value: "profile", component: AccountSettingsProfileSection, usesSharedRuntime: true, order: 100 },
+    {
+      title: "Preferences",
+      value: "preferences",
+      component: AccountSettingsPreferencesSection,
+      usesSharedRuntime: true,
+      order: 200
+    },
+    {
+      title: "Notifications",
+      value: "notifications",
+      component: AccountSettingsNotificationsSection,
+      usesSharedRuntime: true,
+      order: 300
+    }
   ];
 
-  if (runtime.invites.isAvailable.value) {
-    nextSections.push({ title: "Invites", value: "invites" });
+  for (const entry of extensionSections) {
+    nextSections.push(entry);
   }
 
-  return Object.freeze(nextSections);
+  return Object.freeze(
+    nextSections.sort((left, right) => {
+      const orderDelta = Number(left.order || 0) - Number(right.order || 0);
+      if (orderDelta !== 0) {
+        return orderDelta;
+      }
+      return String(left.value || "").localeCompare(String(right.value || ""));
+    })
+  );
 });
 const sectionValues = computed(() => Object.freeze(sections.value.map((section) => section.value)));
 
@@ -105,20 +126,11 @@ const activeTab = computed({
 
             <v-col cols="12" md="9" lg="10">
               <v-window v-model="activeTab" :touch="false" class="settings-sections-window">
-                <v-window-item value="profile">
-                  <AccountSettingsProfileSection :runtime="runtime" />
-                </v-window-item>
-
-                <v-window-item value="preferences">
-                  <AccountSettingsPreferencesSection :runtime="runtime" />
-                </v-window-item>
-
-                <v-window-item value="notifications">
-                  <AccountSettingsNotificationsSection :runtime="runtime" />
-                </v-window-item>
-
-                <v-window-item value="invites">
-                  <AccountSettingsInvitesSection :runtime="runtime" />
+                <v-window-item v-for="section in sections" :key="section.value" :value="section.value">
+                  <component
+                    :is="section.component"
+                    v-bind="section.usesSharedRuntime ? { runtime } : undefined"
+                  />
                 </v-window-item>
               </v-window>
             </v-col>

package/test/accountSettingsSections.test.js

@@ -0,0 +1,79 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import {
+  ACCOUNT_SETTINGS_SECTION_REGISTRY_TAG,
+  resolveAccountSettingsSections
+} from "../src/client/account-settings/sections.js";
+import { bootUsersWebClientProvider } from "../src/client/providers/bootUsersWebClientProvider.js";
+
+test("resolveAccountSettingsSections normalizes, deduplicates, and sorts tagged account section entries", () => {
+  const SectionA = {};
+  const SectionB = {};
+
+  const resolved = resolveAccountSettingsSections([
+    { value: "notifications", title: "Ignore duplicate", component: SectionA, order: 999 },
+    { value: "invites", title: "Invites", component: SectionA, order: 400 },
+    { value: "profile", title: "Broken missing component" },
+    { value: "security", title: "Security", component: SectionB, order: 350 },
+    { value: "invites", title: "Second duplicate", component: SectionB, order: 100 }
+  ]);
+
+  assert.deepEqual(
+    resolved.map((entry) => ({ value: entry.value, title: entry.title, order: entry.order })),
+    [
+      { value: "security", title: "Security", order: 350 },
+      { value: "invites", title: "Invites", order: 400 }
+    ]
+  );
+});
+
+test("bootUsersWebClientProvider provides normalized account section extensions", async () => {
+  const SectionComponent = {};
+  const provided = new Map();
+  let resolvedTagName = "";
+
+  await bootUsersWebClientProvider({
+    make(token) {
+      if (token === "jskit.client.vue.app") {
+        return {
+          provide(key, value) {
+            provided.set(key, value);
+          }
+        };
+      }
+      throw new Error(`Unexpected token: ${token}`);
+    },
+    resolveTag(tagName) {
+      resolvedTagName = tagName;
+      return [
+        {
+          value: "invites",
+          title: "Invites",
+          component: SectionComponent,
+          order: 400,
+          usesSharedRuntime: false
+        }
+      ];
+    }
+  });
+
+  assert.equal(resolvedTagName, ACCOUNT_SETTINGS_SECTION_REGISTRY_TAG);
+  const [providedSections] = [...provided.values()];
+  assert.equal(Array.isArray(providedSections), true);
+  assert.deepEqual(
+    providedSections.map((entry) => ({
+      value: entry.value,
+      title: entry.title,
+      order: entry.order,
+      usesSharedRuntime: entry.usesSharedRuntime
+    })),
+    [
+      {
+        value: "invites",
+        title: "Invites",
+        order: 400,
+        usesSharedRuntime: false
+      }
+    ]
+  );
+});

package/test/exportsContract.test.js

@@ -15,13 +15,13 @@ test("users-web exports are explicit and aligned with production/template usage"
     packageId: "@jskit-ai/users-web",
     requiredExports: [
       "./client",
+      "./client/account-settings/sections",
       "./client/composables/useAddEdit",
       "./client/composables/useList",
       "./client/composables/useView",
       "./client/composables/useCrudAddEdit",
       "./client/composables/useCrudList",
-      "./client/composables/useCrudView",
-      "./client/support/menuLinkTarget"
+      "./client/composables/useCrudView"
     ]
   });
 

package/test/scopeHelpers.test.js

@@ -2,7 +2,7 @@ import test from "node:test";
 import assert from "node:assert/strict";
 import { computed } from "vue";
 import {
-  isWorkspaceOwnershipFilter,
+  isScopedOwnershipFilter,
   normalizeOwnershipFilter,
   resolveApiSuffix,
   resolveResourceMessages
@@ -49,9 +49,9 @@ test("normalizeOwnershipFilter accepts users visibility levels", () => {
   assert.equal(normalizeOwnershipFilter("workspace_user"), "workspace_user");
 });
 
-test("isWorkspaceOwnershipFilter only matches workspace-scoped ownership levels", () => {
-  assert.equal(isWorkspaceOwnershipFilter("workspace"), true);
-  assert.equal(isWorkspaceOwnershipFilter("workspace_user"), true);
-  assert.equal(isWorkspaceOwnershipFilter("public"), false);
-  assert.equal(isWorkspaceOwnershipFilter("user"), false);
+test("isScopedOwnershipFilter only matches scoped ownership levels", () => {
+  assert.equal(isScopedOwnershipFilter("workspace"), true);
+  assert.equal(isScopedOwnershipFilter("workspace_user"), true);
+  assert.equal(isScopedOwnershipFilter("public"), false);
+  assert.equal(isScopedOwnershipFilter("user"), false);
 });