@jskit-ai/users-web 0.1.67 → 0.1.68

package/package.descriptor.mjs

@@ -3,7 +3,7 @@ import { HOME_TOOLS_OUTLET } from "./src/shared/toolsOutletContracts.js";
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/users-web",
-  version: "0.1.67",
+  version: "0.1.68",
   kind: "runtime",
   description: "Users web module: account/profile UI plus shared users web widgets.",
   dependsOn: [
@@ -96,7 +96,7 @@ export default Object.freeze({
         },
         {
           subpath: "./client/account-settings/sections",
-          summary: "Exports account settings section extension seam helpers."
+          summary: "Exports placement-backed account settings section helpers."
         }
       ],
       containerTokens: {
@@ -115,6 +115,11 @@ export default Object.freeze({
             defaultLinkComponentToken: HOME_TOOLS_OUTLET.defaultLinkComponentToken,
             surfaces: ["home"],
             source: "src/client/components/UsersHomeToolsWidget.vue"
+          },
+          {
+            target: "account-settings:sections",
+            surfaces: ["account"],
+            source: "templates/src/components/account/settings/AccountSettingsClientElement.vue"
           }
         ],
         contributions: [
@@ -154,12 +159,12 @@ export default Object.freeze({
       runtime: {
         "@tanstack/vue-query": "5.92.12",
         "@mdi/js": "^7.4.47",
-        "@jskit-ai/http-runtime": "0.1.51",
-        "@jskit-ai/realtime": "0.1.51",
-        "@jskit-ai/kernel": "0.1.52",
-        "@jskit-ai/shell-web": "0.1.51",
-        "@jskit-ai/uploads-image-web": "0.1.30",
-        "@jskit-ai/users-core": "0.1.62",
+        "@jskit-ai/http-runtime": "0.1.52",
+        "@jskit-ai/realtime": "0.1.52",
+        "@jskit-ai/kernel": "0.1.53",
+        "@jskit-ai/shell-web": "0.1.52",
+        "@jskit-ai/uploads-image-web": "0.1.31",
+        "@jskit-ai/users-core": "0.1.63",
         vuetify: "^4.0.0"
       },
       dev: {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/users-web",
-  "version": "0.1.67",
+  "version": "0.1.68",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -35,12 +35,12 @@
   "dependencies": {
     "@tanstack/vue-query": "5.92.12",
     "@mdi/js": "^7.4.47",
-    "@jskit-ai/http-runtime": "0.1.51",
-    "@jskit-ai/kernel": "0.1.52",
-    "@jskit-ai/realtime": "0.1.51",
-    "@jskit-ai/shell-web": "0.1.51",
-    "@jskit-ai/uploads-image-web": "0.1.30",
-    "@jskit-ai/users-core": "0.1.62",
+    "@jskit-ai/http-runtime": "0.1.52",
+    "@jskit-ai/kernel": "0.1.53",
+    "@jskit-ai/realtime": "0.1.52",
+    "@jskit-ai/shell-web": "0.1.52",
+    "@jskit-ai/uploads-image-web": "0.1.31",
+    "@jskit-ai/users-core": "0.1.63",
     "vuetify": "^4.0.0"
   }
 }

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

@@ -1,21 +1,31 @@
-import { inject } from "vue";
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  ref
+} from "vue";
+import { useWebPlacementContext } from "@jskit-ai/shell-web/client/placement";
 
-const ACCOUNT_SETTINGS_SECTIONS_INJECTION_KEY = Symbol("users-web.account-settings.sections");
-const ACCOUNT_SETTINGS_SECTION_REGISTRY_TAG = "users.web.account-settings.sections";
+const ACCOUNT_SETTINGS_SECTION_TARGET = "account-settings:sections";
 const EMPTY_ACCOUNT_SETTINGS_SECTIONS = Object.freeze([]);
 const RESERVED_ACCOUNT_SETTINGS_SECTION_VALUES = Object.freeze([
   "profile",
   "preferences",
   "notifications"
 ]);
+const WEB_PLACEMENT_RUNTIME_INJECTION_KEY = "jskit.shell-web.runtime.web-placement.client";
 
 function normalizeAccountSettingsSectionEntry(entry = null) {
   if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
     return null;
   }
 
-  const value = String(entry.value || "").trim().toLowerCase();
-  const title = String(entry.title || "").trim();
+  const props = entry?.props && typeof entry.props === "object" && !Array.isArray(entry.props)
+    ? entry.props
+    : {};
+  const value = String(props.value || entry.value || "").trim().toLowerCase();
+  const title = String(props.title || entry.title || "").trim();
   const component = entry.component;
   if (!value || !title || !component) {
     return null;
@@ -26,7 +36,7 @@ function normalizeAccountSettingsSectionEntry(entry = null) {
     title,
     component,
     order: Number.isFinite(Number(entry.order)) ? Number(entry.order) : 500,
-    usesSharedRuntime: entry.usesSharedRuntime === true
+    usesSharedRuntime: props.usesSharedRuntime === true || entry.usesSharedRuntime === true
   });
 }
 
@@ -51,6 +61,7 @@ function resolveAccountSettingsSections(entries = []) {
     if (!resolved || seen.has(resolved.value)) {
       continue;
     }
+
     seen.add(resolved.value);
     normalized.push(resolved);
   }
@@ -59,12 +70,49 @@ function resolveAccountSettingsSections(entries = []) {
 }
 
 function useAccountSettingsSections() {
-  return inject(ACCOUNT_SETTINGS_SECTIONS_INJECTION_KEY, EMPTY_ACCOUNT_SETTINGS_SECTIONS);
+  const placementRuntime = inject(WEB_PLACEMENT_RUNTIME_INJECTION_KEY, null);
+  const { context: placementContext } = useWebPlacementContext();
+  const revision = ref(
+    placementRuntime && typeof placementRuntime.getRevision === "function"
+      ? placementRuntime.getRevision()
+      : 0
+  );
+  let unsubscribe = null;
+
+  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;
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (typeof unsubscribe === "function") {
+      unsubscribe();
+      unsubscribe = null;
+    }
+  });
+
+  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,
+      context: placementContext.value
+    });
+    return resolveAccountSettingsSections(placements);
+  });
 }
 
 export {
-  ACCOUNT_SETTINGS_SECTIONS_INJECTION_KEY,
-  ACCOUNT_SETTINGS_SECTION_REGISTRY_TAG,
+  ACCOUNT_SETTINGS_SECTION_TARGET,
   EMPTY_ACCOUNT_SETTINGS_SECTIONS,
   RESERVED_ACCOUNT_SETTINGS_SECTION_VALUES,
   normalizeAccountSettingsSectionEntry,

package/src/client/providers/UsersWebClientProvider.js

@@ -1,6 +1,5 @@
 import UsersHomeToolsWidget from "../components/UsersHomeToolsWidget.vue";
 import ProfileClientElement from "../components/ProfileClientElement.vue";
-import { bootUsersWebClientProvider } from "./bootUsersWebClientProvider.js";
 
 class UsersWebClientProvider {
   static id = "users.web.client";
@@ -14,10 +13,6 @@ class UsersWebClientProvider {
     app.singleton("users.web.home.tools.widget", () => UsersHomeToolsWidget);
     app.singleton("users.web.profile.element", () => ProfileClientElement);
   }
-
-  async boot(app) {
-    await bootUsersWebClientProvider(app);
-  }
 }
 
 export { UsersWebClientProvider };

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

@@ -32,7 +32,7 @@ const sections = computed(() => {
     }
   ];
 
-  for (const entry of extensionSections) {
+  for (const entry of extensionSections.value) {
     nextSections.push(entry);
   }
 

package/test/accountSettingsSections.test.js

@@ -1,79 +1,92 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import {
-  ACCOUNT_SETTINGS_SECTION_REGISTRY_TAG,
+  ACCOUNT_SETTINGS_SECTION_TARGET,
+  normalizeAccountSettingsSectionEntry,
   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", () => {
+test("account settings sections use the standard placement target", () => {
+  assert.equal(ACCOUNT_SETTINGS_SECTION_TARGET, "account-settings:sections");
+});
+
+test("resolveAccountSettingsSections normalizes, deduplicates, and sorts placement-backed 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);
-          }
-        };
+    {
+      id: "users.notifications.duplicate",
+      order: 999,
+      component: SectionA,
+      props: {
+        value: "notifications",
+        title: "Ignore duplicate"
+      }
+    },
+    {
+      id: "workspaces.invites",
+      order: 400,
+      component: SectionA,
+      props: {
+        value: "invites",
+        title: "Invites"
       }
-      throw new Error(`Unexpected token: ${token}`);
     },
-    resolveTag(tagName) {
-      resolvedTagName = tagName;
-      return [
-        {
-          value: "invites",
-          title: "Invites",
-          component: SectionComponent,
-          order: 400,
-          usesSharedRuntime: false
-        }
-      ];
+    {
+      id: "invalid.missing-component",
+      order: 250,
+      props: {
+        value: "profile",
+        title: "Broken missing component"
+      }
+    },
+    {
+      id: "security.section",
+      order: 350,
+      component: SectionB,
+      props: {
+        value: "security",
+        title: "Security",
+        usesSharedRuntime: true
+      }
+    },
+    {
+      id: "workspaces.invites.duplicate",
+      order: 100,
+      component: SectionB,
+      props: {
+        value: "invites",
+        title: "Second duplicate"
+      }
     }
-  });
+  ]);
 
-  assert.equal(resolvedTagName, ACCOUNT_SETTINGS_SECTION_REGISTRY_TAG);
-  const [providedSections] = [...provided.values()];
-  assert.equal(Array.isArray(providedSections), true);
   assert.deepEqual(
-    providedSections.map((entry) => ({
+    resolved.map((entry) => ({
       value: entry.value,
       title: entry.title,
       order: entry.order,
       usesSharedRuntime: entry.usesSharedRuntime
     })),
     [
-      {
-        value: "invites",
-        title: "Invites",
-        order: 400,
-        usesSharedRuntime: false
-      }
+      { value: "security", title: "Security", order: 350, usesSharedRuntime: true },
+      { value: "invites", title: "Invites", order: 400, usesSharedRuntime: false }
     ]
   );
 });
+
+test("normalizeAccountSettingsSectionEntry rejects malformed placement entries", () => {
+  assert.equal(normalizeAccountSettingsSectionEntry(null), null);
+  assert.equal(normalizeAccountSettingsSectionEntry({}), null);
+  assert.equal(
+    normalizeAccountSettingsSectionEntry({
+      component: {},
+      props: {
+        value: "",
+        title: "Broken"
+      }
+    }),
+    null
+  );
+});

package/test/settingsPlacementContract.test.js

@@ -92,6 +92,16 @@ test("users-web descriptor metadata advertises home tools outlet and standard ho
       }
     ]
   );
+  assert.deepEqual(
+    readOutlets("account-settings:sections"),
+    [
+      {
+        target: "account-settings:sections",
+        surfaces: ["account"],
+        source: "templates/src/components/account/settings/AccountSettingsClientElement.vue"
+      }
+    ]
+  );
 
   expectContribution("users.profile.menu.settings", {
     target: "auth-profile-menu:primary-menu",

package/src/client/providers/bootUsersWebClientProvider.js

@@ -1,28 +0,0 @@
-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 };