@jskit-ai/users-web 0.1.67 → 0.1.69

package/package.descriptor.mjs

@@ -1,9 +1,9 @@
-import { HOME_TOOLS_OUTLET } from "./src/shared/toolsOutletContracts.js";
+import { HOME_COG_OUTLET } from "./src/shared/toolsOutletContracts.js";
 
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/users-web",
-  version: "0.1.67",
+  version: "0.1.69",
   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: {
@@ -111,10 +111,15 @@ export default Object.freeze({
       placements: {
         outlets: [
           {
-            target: HOME_TOOLS_OUTLET.target,
-            defaultLinkComponentToken: HOME_TOOLS_OUTLET.defaultLinkComponentToken,
+            target: HOME_COG_OUTLET.target,
+            defaultLinkComponentToken: HOME_COG_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: [
@@ -138,7 +143,7 @@ export default Object.freeze({
           },
           {
             id: "users.home.menu.settings",
-            target: "home-tools:primary-menu",
+            target: "home-cog:primary-menu",
             surfaces: ["home"],
             order: 100,
             componentToken: "local.main.ui.surface-aware-menu-link-item",
@@ -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.53",
+        "@jskit-ai/realtime": "0.1.53",
+        "@jskit-ai/kernel": "0.1.54",
+        "@jskit-ai/shell-web": "0.1.53",
+        "@jskit-ai/uploads-image-web": "0.1.32",
+        "@jskit-ai/users-core": "0.1.64",
         vuetify: "^4.0.0"
       },
       dev: {}
@@ -238,7 +243,7 @@ export default Object.freeze({
         position: "bottom",
         skipIfContains: "id: \"users.home.tools.widget\"",
         value:
-          "\naddPlacement({\n  id: \"users.home.tools.widget\",\n  target: \"shell-layout:top-right\",\n  surfaces: [\"home\"],\n  order: 900,\n  componentToken: \"users.web.home.tools.widget\",\n  when: ({ auth }) => auth?.authenticated === true\n});\n\naddPlacement({\n  id: \"users.home.menu.settings\",\n  target: \"home-tools:primary-menu\",\n  surfaces: [\"home\"],\n  order: 100,\n  componentToken: \"local.main.ui.surface-aware-menu-link-item\",\n  props: {\n    label: \"Settings\",\n    surface: \"home\",\n    scopedSuffix: \"/settings\",\n    unscopedSuffix: \"/settings\"\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n",
+          "\naddPlacement({\n  id: \"users.home.tools.widget\",\n  target: \"shell-layout:top-right\",\n  surfaces: [\"home\"],\n  order: 900,\n  componentToken: \"users.web.home.tools.widget\",\n  when: ({ auth }) => auth?.authenticated === true\n});\n\naddPlacement({\n  id: \"users.home.menu.settings\",\n  target: \"home-cog:primary-menu\",\n  surfaces: [\"home\"],\n  order: 100,\n  componentToken: \"local.main.ui.surface-aware-menu-link-item\",\n  props: {\n    label: \"Settings\",\n    surface: \"home\",\n    scopedSuffix: \"/settings\",\n    unscopedSuffix: \"/settings\"\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n",
         reason: "Append users-web home tools widget and settings menu placements into app-owned placement registry.",
         category: "users-web",
         id: "users-web-home-tools-placement"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/users-web",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "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.53",
+    "@jskit-ai/kernel": "0.1.54",
+    "@jskit-ai/realtime": "0.1.53",
+    "@jskit-ai/shell-web": "0.1.53",
+    "@jskit-ai/uploads-image-web": "0.1.32",
+    "@jskit-ai/users-core": "0.1.64",
     "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/components/UsersHomeToolsWidget.vue

@@ -1,12 +1,12 @@
 <script setup>
 import ShellOutletMenuWidget from "@jskit-ai/shell-web/client/components/ShellOutletMenuWidget";
-import { HOME_TOOLS_OUTLET } from "../../shared/toolsOutletContracts.js";
+import { HOME_COG_OUTLET } from "../../shared/toolsOutletContracts.js";
 </script>
 
 <template>
   <ShellOutletMenuWidget
-    :target="HOME_TOOLS_OUTLET.target"
-    :default-link-component-token="HOME_TOOLS_OUTLET.defaultLinkComponentToken"
-    :aria-label="HOME_TOOLS_OUTLET.ariaLabel"
+    :target="HOME_COG_OUTLET.target"
+    :default-link-component-token="HOME_COG_OUTLET.defaultLinkComponentToken"
+    :aria-label="HOME_COG_OUTLET.ariaLabel"
   />
 </template>

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/src/shared/toolsOutletContracts.js

@@ -1,12 +1,12 @@
-const DEFAULT_TOOLS_LINK_COMPONENT_TOKEN = "local.main.ui.surface-aware-menu-link-item";
+const DEFAULT_COG_LINK_COMPONENT_TOKEN = "local.main.ui.surface-aware-menu-link-item";
 
-const HOME_TOOLS_OUTLET = Object.freeze({
-  target: "home-tools:primary-menu",
-  defaultLinkComponentToken: DEFAULT_TOOLS_LINK_COMPONENT_TOKEN,
-  ariaLabel: "Home tools"
+const HOME_COG_OUTLET = Object.freeze({
+  target: "home-cog:primary-menu",
+  defaultLinkComponentToken: DEFAULT_COG_LINK_COMPONENT_TOKEN,
+  ariaLabel: "Home cog"
 });
 
 export {
-  DEFAULT_TOOLS_LINK_COMPONENT_TOKEN,
-  HOME_TOOLS_OUTLET
+  DEFAULT_COG_LINK_COMPONENT_TOKEN,
+  HOME_COG_OUTLET
 };

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

@@ -71,27 +71,37 @@ function expectTextMutation(id, { reason = "", category = "", skipIfContains = "
   }
 }
 
-test("users-web home tools widget exposes home-tools outlet", async () => {
+test("users-web home tools widget exposes home-cog outlet", async () => {
   const source = await readFile(path.join(PACKAGE_DIR, "src", "client", "components", "UsersHomeToolsWidget.vue"), "utf8");
 
-  assert.match(source, /import \{ HOME_TOOLS_OUTLET \} from "\.\.\/\.\.\/shared\/toolsOutletContracts\.js";/);
+  assert.match(source, /import \{ HOME_COG_OUTLET \} from "\.\.\/\.\.\/shared\/toolsOutletContracts\.js";/);
   assert.match(source, /<ShellOutletMenuWidget/);
-  assert.match(source, /:target="HOME_TOOLS_OUTLET\.target"/);
-  assert.match(source, /:default-link-component-token="HOME_TOOLS_OUTLET\.defaultLinkComponentToken"/);
+  assert.match(source, /:target="HOME_COG_OUTLET\.target"/);
+  assert.match(source, /:default-link-component-token="HOME_COG_OUTLET\.defaultLinkComponentToken"/);
 });
 
-test("users-web descriptor metadata advertises home tools outlet and standard home settings placements", () => {
+test("users-web descriptor metadata advertises home cog outlet and standard home settings placements", () => {
   assert.deepEqual(
-    readOutlets("home-tools:primary-menu"),
+    readOutlets("home-cog:primary-menu"),
     [
       {
-        target: "home-tools:primary-menu",
+        target: "home-cog:primary-menu",
         defaultLinkComponentToken: "local.main.ui.surface-aware-menu-link-item",
         surfaces: ["home"],
         source: "src/client/components/UsersHomeToolsWidget.vue"
       }
     ]
   );
+  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",
@@ -112,7 +122,7 @@ test("users-web descriptor metadata advertises home tools outlet and standard ho
   });
 
   expectContribution("users.home.menu.settings", {
-    target: "home-tools:primary-menu",
+    target: "home-cog:primary-menu",
     surfaces: ["home"],
     order: 100,
     componentToken: "local.main.ui.surface-aware-menu-link-item",
@@ -129,7 +139,7 @@ test("users-web descriptor metadata advertises home tools outlet and standard ho
       'id: "users.home.tools.widget"',
       'componentToken: "users.web.home.tools.widget"',
       'id: "users.home.menu.settings"',
-      'target: "home-tools:primary-menu"',
+      'target: "home-cog:primary-menu"',
       'componentToken: "local.main.ui.surface-aware-menu-link-item"',
       'scopedSuffix: "/settings"',
       'unscopedSuffix: "/settings"'

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 };