@jskit-ai/users-web 0.1.31 → 0.1.32

package/src/client/composables/useAccountSettingsRuntime.js

@@ -23,10 +23,6 @@ import { useAddEdit } from "./useAddEdit.js";
 import { useCommand } from "./useCommand.js";
 import { useView } from "./useView.js";
 import { usePaths } from "./usePaths.js";
-import {
-  ACCOUNT_SETTINGS_CHANGED_EVENT,
-  WORKSPACE_PENDING_INVITATIONS_CHANGED_EVENT
-} from "@jskit-ai/users-core/shared/events/usersEvents";
 import { resolveAccountSettingsPathFromPlacementContext } from "../lib/workspaceSurfacePaths.js";
 import {
   ACCOUNT_SETTINGS_DEFAULTS,
@@ -206,22 +202,22 @@ function useAccountSettingsRuntime() {
 
   const settingsView = useView({
     ownershipFilter: OWNERSHIP_PUBLIC,
-    apiSuffix: "/settings",
-    queryKeyFactory: () => accountSettingsQueryKey,
-    realtime: {
-      event: ACCOUNT_SETTINGS_CHANGED_EVENT
-    },
+  apiSuffix: "/settings",
+  queryKeyFactory: () => accountSettingsQueryKey,
+  realtime: {
+    event: "account.settings.changed"
+  },
     fallbackLoadError: "Unable to load settings.",
     mapLoadedToModel: mapAccountSettingsPayload
   });
 
   const pendingInvitesView = useView({
     ownershipFilter: OWNERSHIP_PUBLIC,
-    apiSuffix: "/bootstrap",
-    queryKeyFactory: () => pendingInvitesQueryKey,
-    realtime: {
-      event: WORKSPACE_PENDING_INVITATIONS_CHANGED_EVENT
-    },
+  apiSuffix: "/bootstrap",
+  queryKeyFactory: () => pendingInvitesQueryKey,
+  realtime: {
+    event: "workspace.invitations.pending.changed"
+  },
     fallbackLoadError: "Unable to load invitations.",
     model: pendingInvitesModel,
     mapLoadedToModel: (model, payload = {}) => {

package/src/client/composables/useAddEdit.js

@@ -1,8 +1,10 @@
 import { computed, proxyRefs } from "vue";
+import { useRoute } from "vue-router";
 import { USERS_ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/users-core/shared/support/usersVisibility";
 import { useAddEditCore } from "./useAddEditCore.js";
 import { useEndpointResource } from "./useEndpointResource.js";
-import { useOperationScope } from "./internal/useOperationScope.js";
+import { resolveOperationAdapter } from "./operationAdapters.js";
+import { createAddEditUiRuntime } from "./addEditUiRuntime.js";
 import { useUiFeedback } from "./useUiFeedback.js";
 import { useFieldErrorBag } from "./useFieldErrorBag.js";
 import {
@@ -36,15 +38,39 @@ function useAddEdit({
   buildRawPayload,
   buildSavePayload,
   onSaveSuccess,
+  recordIdParam = "recordId",
+  routeParams = null,
+  routeRecordId = null,
+  apiUrlTemplate = "",
+  viewUrlTemplate = "",
+  listUrlTemplate = "",
+  saveRecordIdSelector = null,
   messages = {},
-  realtime = null
+  realtime = null,
+  adapter = null
 } = {}) {
-  const operationScope = useOperationScope({
+  const route = useRoute();
+  const addEditUiRuntime = createAddEditUiRuntime({
+    recordIdParam,
+    routeParams: routeParams ?? computed(() => route?.params || {}),
+    routePath: computed(() => route?.path || ""),
+    routeRecordId,
+    apiUrlTemplate,
+    viewUrlTemplate,
+    listUrlTemplate,
+    saveRecordIdSelector
+  });
+  const normalizedApiUrlTemplate = String(apiUrlTemplate || "").trim();
+  const effectiveApiSuffix = normalizedApiUrlTemplate ? addEditUiRuntime.apiSuffix : apiSuffix;
+  const operationAdapter = resolveOperationAdapter(adapter, {
+    context: "useAddEdit adapter"
+  });
+  const operationScope = operationAdapter.useOperationScope({
     ownershipFilter,
     surfaceId,
     access,
     placementSource,
-    apiSuffix,
+    apiSuffix: effectiveApiSuffix,
     model,
     readEnabled,
     queryKeyFactory,
@@ -128,7 +154,13 @@ function useAddEdit({
     messageType: addEdit.messageType,
     submit: addEdit.submit,
     refresh: endpointResource.reload,
-    resource: endpointResource
+    resource: endpointResource,
+    recordId: addEditUiRuntime.recordId,
+    listUrl: addEditUiRuntime.listUrl,
+    cancelUrl: addEditUiRuntime.cancelUrl,
+    resolveParams: addEditUiRuntime.resolveParams,
+    resolveViewUrl: addEditUiRuntime.resolveViewUrl,
+    resolveSavedViewUrl: addEditUiRuntime.resolveSavedViewUrl
   });
 }
 

package/src/client/composables/useCrudSchemaForm.js

@@ -0,0 +1,177 @@
+import { computed, reactive } from "vue";
+import { useRouter } from "vue-router";
+import { asPlainObject } from "./scopeHelpers.js";
+import { useAddEdit } from "./useAddEdit.js";
+import {
+  normalizeCrudFormFields,
+  createCrudFormModel,
+  buildCrudFormPayload,
+  applyCrudPayloadToForm,
+  resolveCrudFieldErrors,
+  parseCrudResourceOperationInput
+} from "./crudSchemaFormHelpers.js";
+
+function normalizeFieldErrorKeys(keys = []) {
+  return Array.isArray(keys)
+    ? keys.map((entry) => String(entry || "").trim()).filter(Boolean)
+    : [];
+}
+
+function normalizeSaveSuccessOptions(options = {}) {
+  const source = asPlainObject(options);
+  const invalidateQueryKey = Array.isArray(source.invalidateQueryKey)
+    ? source.invalidateQueryKey
+    : null;
+  const listUrlTemplate = String(source.listUrlTemplate || "").trim();
+  const navigateToView = source.navigateToView !== false;
+  const navigateToList = source.navigateToList !== false;
+
+  return Object.freeze({
+    invalidateQueryKey,
+    listUrlTemplate,
+    navigateToView,
+    navigateToList
+  });
+}
+
+function useCrudSchemaForm({
+  resource = null,
+  operationName = "",
+  formFields = [],
+  addEditOptions = {},
+  saveSuccess = {},
+  createModel = null,
+  buildPayload = null,
+  mapPayloadToModel = null,
+  parseInput = null
+} = {}) {
+  const router = useRouter();
+  const normalizedFields = normalizeCrudFormFields(formFields);
+  const normalizedAddEditOptions = asPlainObject(addEditOptions);
+  const saveSuccessOptions = normalizeSaveSuccessOptions(saveSuccess);
+  const defaultFieldErrorKeys = normalizedFields.map((field) => field.key);
+  const providedFieldErrorKeys = normalizeFieldErrorKeys(normalizedAddEditOptions.fieldErrorKeys);
+  const fieldErrorKeys = providedFieldErrorKeys.length > 0 ? providedFieldErrorKeys : defaultFieldErrorKeys;
+  const providedModel = normalizedAddEditOptions.model;
+  const hasProvidedModel = Boolean(providedModel && typeof providedModel === "object" && !Array.isArray(providedModel));
+  const defaultModel = typeof createModel === "function"
+    ? asPlainObject(createModel(normalizedFields))
+    : createCrudFormModel(normalizedFields);
+  const form = hasProvidedModel ? providedModel : reactive(defaultModel);
+  const parseInputOverride = typeof parseInput === "function"
+    ? parseInput
+    : (typeof normalizedAddEditOptions.parseInput === "function" ? normalizedAddEditOptions.parseInput : null);
+  const buildPayloadOverride = typeof buildPayload === "function"
+    ? buildPayload
+    : (typeof normalizedAddEditOptions.buildRawPayload === "function" ? normalizedAddEditOptions.buildRawPayload : null);
+  const mapPayloadToModelOverride = typeof mapPayloadToModel === "function"
+    ? mapPayloadToModel
+    : (typeof normalizedAddEditOptions.mapLoadedToModel === "function" ? normalizedAddEditOptions.mapLoadedToModel : null);
+  const onSaveSuccessOverride = typeof normalizedAddEditOptions.onSaveSuccess === "function"
+    ? normalizedAddEditOptions.onSaveSuccess
+    : null;
+  const shouldApplyDefaultMapPayload = normalizedAddEditOptions.readEnabled !== false;
+  const resolvedResource = normalizedAddEditOptions.resource || resource;
+
+  function resolveParseInput(rawPayload = {}, context = {}) {
+    if (parseInputOverride) {
+      return parseInputOverride(rawPayload, context);
+    }
+
+    return parseCrudResourceOperationInput({
+      resource: resolvedResource,
+      operationName,
+      rawPayload,
+      context
+    });
+  }
+
+  function resolveBuildRawPayload(model = {}, context = {}) {
+    if (buildPayloadOverride) {
+      return buildPayloadOverride(model, {
+        ...context,
+        fields: normalizedFields
+      });
+    }
+
+    return buildCrudFormPayload(normalizedFields, model);
+  }
+
+  const effectiveMapLoadedToModel = mapPayloadToModelOverride
+    ? (model = {}, payload = {}, context = {}) => {
+        mapPayloadToModelOverride(model, payload, {
+          ...context,
+          fields: normalizedFields
+        });
+      }
+    : (shouldApplyDefaultMapPayload
+        ? (model = {}, payload = {}) => {
+            applyCrudPayloadToForm(normalizedFields, model, payload);
+          }
+        : undefined);
+
+  let addEditRuntime = null;
+
+  async function handleSaveSuccess(payload, context = {}) {
+    if (onSaveSuccessOverride) {
+      await onSaveSuccessOverride(payload, context);
+      return;
+    }
+
+    const queryClient = context?.queryClient;
+    if (queryClient && saveSuccessOptions.invalidateQueryKey?.length > 0) {
+      await queryClient.invalidateQueries({
+        queryKey: saveSuccessOptions.invalidateQueryKey
+      });
+    }
+
+    if (saveSuccessOptions.navigateToView) {
+      const viewUrl = addEditRuntime?.resolveSavedViewUrl(payload) ||
+        addEditRuntime?.resolveViewUrl(addEditRuntime?.recordId);
+      if (viewUrl) {
+        await router.push(viewUrl);
+        return;
+      }
+    }
+
+    if (!saveSuccessOptions.navigateToList) {
+      return;
+    }
+
+    const listUrlTemplate = saveSuccessOptions.listUrlTemplate ||
+      String(normalizedAddEditOptions.listUrlTemplate || "").trim();
+    const listUrl = addEditRuntime?.resolveParams(listUrlTemplate);
+    if (listUrl) {
+      await router.push(listUrl);
+    }
+  }
+
+  const addEdit = useAddEdit({
+    ...normalizedAddEditOptions,
+    resource: resolvedResource,
+    model: form,
+    fieldErrorKeys,
+    parseInput: resolveParseInput,
+    buildRawPayload: resolveBuildRawPayload,
+    mapLoadedToModel: effectiveMapLoadedToModel,
+    onSaveSuccess: handleSaveSuccess
+  });
+  addEditRuntime = addEdit;
+
+  function resolveFieldErrors(fieldKey = "") {
+    return resolveCrudFieldErrors(addEdit.fieldErrors, fieldKey);
+  }
+
+  const showFormSkeleton = computed(() => Boolean(addEdit.isInitialLoading));
+
+  return Object.freeze({
+    formFields: normalizedFields,
+    fieldErrorKeys,
+    form,
+    addEdit,
+    showFormSkeleton,
+    resolveFieldErrors
+  });
+}
+
+export { useCrudSchemaForm };

package/src/client/composables/useList.js

@@ -1,8 +1,9 @@
 import { computed } from "vue";
 import { USERS_ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/users-core/shared/support/usersVisibility";
 import { useListCore } from "./useListCore.js";
-import { useOperationScope } from "./internal/useOperationScope.js";
+import { resolveOperationAdapter } from "./operationAdapters.js";
 import { setupOperationErrorReporting } from "./operationUiHelpers.js";
+import { createListUiRuntime } from "./listUiRuntime.js";
 
 function useList({
   ownershipFilter = USERS_ROUTE_VISIBILITY_WORKSPACE,
@@ -19,9 +20,17 @@ function useList({
   selectItems,
   requestOptions,
   queryOptions,
-  realtime = null
+  realtime = null,
+  adapter = null,
+  recordIdParam = "recordId",
+  recordIdSelector = null,
+  viewUrlTemplate = "",
+  editUrlTemplate = ""
 } = {}) {
-  const operationScope = useOperationScope({
+  const operationAdapter = resolveOperationAdapter(adapter, {
+    context: "useList adapter"
+  });
+  const operationScope = operationAdapter.useOperationScope({
     ownershipFilter,
     surfaceId,
     access,
@@ -53,6 +62,16 @@ function useList({
   const isRefetching = computed(() => Boolean(isFetching.value && !isInitialLoading.value));
   const loadError = operationScope.loadError(list.loadError);
   const isLoading = operationScope.isLoading(list.isLoading);
+  const listUiRuntime = createListUiRuntime({
+    items: list.items,
+    isInitialLoading,
+    recordIdParam,
+    recordIdSelector,
+    routeParams: computed(() => operationScope.routeContext.route?.params || {}),
+    routePath: computed(() => operationScope.routeContext.route?.path || ""),
+    viewUrlTemplate,
+    editUrlTemplate
+  });
   setupOperationErrorReporting({
     source: `${placementSource}.load`,
     loadError,
@@ -78,7 +97,15 @@ function useList({
     pages: list.pages,
     items: list.items,
     reload: list.reload,
-    loadMore: list.loadMore
+    loadMore: list.loadMore,
+    hasViewUrl: listUiRuntime.hasViewUrl,
+    hasEditUrl: listUiRuntime.hasEditUrl,
+    actionColumnCount: listUiRuntime.actionColumnCount,
+    showListSkeleton: listUiRuntime.showListSkeleton,
+    resolveRowKey: listUiRuntime.resolveRowKey,
+    resolveParams: listUiRuntime.resolveParams,
+    resolveViewUrl: listUiRuntime.resolveViewUrl,
+    resolveEditUrl: listUiRuntime.resolveEditUrl
   });
 }
 

package/src/client/composables/useView.js

@@ -1,9 +1,11 @@
 import { computed } from "vue";
+import { useRoute } from "vue-router";
 import { USERS_ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/users-core/shared/support/usersVisibility";
 import { useViewCore } from "./useViewCore.js";
 import { useEndpointResource } from "./useEndpointResource.js";
-import { useOperationScope } from "./internal/useOperationScope.js";
+import { resolveOperationAdapter } from "./operationAdapters.js";
 import { setupOperationErrorReporting } from "./operationUiHelpers.js";
+import { createViewUiRuntime } from "./viewUiRuntime.js";
 
 function useView({
   ownershipFilter = USERS_ROUTE_VISIBILITY_WORKSPACE,
@@ -20,14 +22,37 @@ function useView({
   notFoundMessage = "Record not found.",
   model,
   mapLoadedToModel,
-  realtime = null
+  recordIdParam = "recordId",
+  routeParams = null,
+  routeRecordId = null,
+  apiUrlTemplate = "",
+  listUrlTemplate = "",
+  editUrlTemplate = "",
+  includeRecordIdInQueryKey = false,
+  realtime = null,
+  adapter = null
 } = {}) {
-  const operationScope = useOperationScope({
+  const route = useRoute();
+  const viewUiRuntime = createViewUiRuntime({
+    recordIdParam,
+    routeParams: routeParams ?? computed(() => route?.params || {}),
+    routePath: computed(() => route?.path || ""),
+    routeRecordId,
+    apiUrlTemplate,
+    listUrlTemplate,
+    editUrlTemplate
+  });
+  const normalizedApiUrlTemplate = String(apiUrlTemplate || "").trim();
+  const effectiveApiSuffix = normalizedApiUrlTemplate ? viewUiRuntime.apiSuffix : apiSuffix;
+  const operationAdapter = resolveOperationAdapter(adapter, {
+    context: "useView adapter"
+  });
+  const operationScope = operationAdapter.useOperationScope({
     ownershipFilter,
     surfaceId,
     access,
     placementSource,
-    apiSuffix,
+    apiSuffix: effectiveApiSuffix,
     readEnabled,
     queryKeyFactory,
     permissionSets: {
@@ -35,10 +60,19 @@ function useView({
     },
     realtime
   });
+  const queryKey = computed(() => {
+    const source = Array.isArray(operationScope.queryKey.value) ? operationScope.queryKey.value : [];
+    if (!includeRecordIdInQueryKey) {
+      return source;
+    }
+
+    const recordIdToken = String(viewUiRuntime.recordId.value || "").trim();
+    return [...source, recordIdToken];
+  });
   const canView = operationScope.permissionGate("view");
 
   const resource = useEndpointResource({
-    queryKey: operationScope.queryKey,
+    queryKey,
     path: operationScope.apiPath,
     enabled: operationScope.queryCanRun(canView),
     readMethod,
@@ -74,6 +108,10 @@ function useView({
 
   return Object.freeze({
     record: view.record,
+    recordId: viewUiRuntime.recordId,
+    listUrl: viewUiRuntime.listUrl,
+    editUrl: viewUiRuntime.editUrl,
+    resolveParams: viewUiRuntime.resolveParams,
     canView,
     isLoading,
     isFetching,

package/src/client/composables/viewUiRuntime.js

@@ -0,0 +1,87 @@
+import { computed, unref } from "vue";
+import { asPlainObject } from "./scopeHelpers.js";
+import {
+  normalizeRouteParamName,
+  resolveRouteParamsSource,
+  resolveRoutePathnameSource,
+  resolveRouteTemplateLocation,
+  toRouteParamValue
+} from "./routeTemplateHelpers.js";
+
+function resolveRecordId({ routeParams, recordIdParam, routeRecordId }) {
+  const explicitRecordId = toRouteParamValue(
+    typeof routeRecordId === "function" ? routeRecordId() : unref(routeRecordId)
+  );
+  if (explicitRecordId) {
+    return explicitRecordId;
+  }
+
+  return toRouteParamValue(routeParams[recordIdParam]);
+}
+
+function createViewUiRuntime({
+  recordIdParam = "recordId",
+  routeParams = null,
+  routePath = "",
+  routeRecordId = null,
+  apiUrlTemplate = "",
+  listUrlTemplate = "",
+  editUrlTemplate = ""
+} = {}) {
+  const normalizedRecordIdParam = normalizeRouteParamName(recordIdParam, {
+    context: "useView recordIdParam"
+  });
+  const normalizedApiUrlTemplate = String(apiUrlTemplate || "").trim();
+  const normalizedListUrlTemplate = String(listUrlTemplate || "").trim();
+  const normalizedEditUrlTemplate = String(editUrlTemplate || "").trim();
+
+  function resolveTemplatePath(urlTemplate = "", extraParams = {}) {
+    const normalizedTemplate = String(urlTemplate || "").trim();
+    if (!normalizedTemplate) {
+      return "";
+    }
+
+    const currentRouteParams = resolveRouteParamsSource(routeParams);
+    const sourceParams = {
+      ...currentRouteParams,
+      ...asPlainObject(extraParams)
+    };
+    const resolvedRecordId = toRouteParamValue(sourceParams[normalizedRecordIdParam]) ||
+      resolveRecordId({
+        routeParams: currentRouteParams,
+        recordIdParam: normalizedRecordIdParam,
+        routeRecordId
+      });
+    sourceParams[normalizedRecordIdParam] = resolvedRecordId;
+
+    return resolveRouteTemplateLocation(normalizedTemplate, {
+      params: sourceParams,
+      currentPathname: resolveRoutePathnameSource(routePath)
+    });
+  }
+
+  const recordId = computed(() =>
+    resolveRecordId({
+      routeParams: resolveRouteParamsSource(routeParams),
+      recordIdParam: normalizedRecordIdParam,
+      routeRecordId
+    })
+  );
+  const apiSuffix = computed(() => resolveTemplatePath(normalizedApiUrlTemplate));
+  const listUrl = computed(() => resolveTemplatePath(normalizedListUrlTemplate));
+  const editUrl = computed(() => resolveTemplatePath(normalizedEditUrlTemplate));
+
+  function resolveParams(urlTemplate = "", extraParams = {}) {
+    return resolveTemplatePath(urlTemplate, extraParams);
+  }
+
+  return Object.freeze({
+    recordId,
+    apiSuffix,
+    listUrl,
+    editUrl,
+    resolveParams
+  });
+}
+
+export { createViewUiRuntime };

package/src/client/lib/theme.js

@@ -4,7 +4,6 @@ import { resolveWorkspaceThemePalette } from "@jskit-ai/users-core/shared/settin
 const THEME_PREFERENCE_LIGHT = "light";
 const THEME_PREFERENCE_DARK = "dark";
 const THEME_PREFERENCE_SYSTEM = "system";
-const THEME_PREFERENCE_STORAGE_KEY = "jskit.themePreference";
 const HEX_COLOR_PATTERN = /^#[0-9A-Fa-f]{6}$/;
 const WORKSPACE_THEME_NAME_LIGHT = "workspace-light";
 const WORKSPACE_THEME_NAME_DARK = "workspace-dark";
@@ -71,7 +70,7 @@ function readPersistedThemePreference(options = {}) {
   }
 
   try {
-    const value = storage.getItem(THEME_PREFERENCE_STORAGE_KEY);
+    const value = storage.getItem("jskit.themePreference");
     return normalizeThemePreference(value);
   } catch {
     return THEME_PREFERENCE_SYSTEM;
@@ -86,7 +85,7 @@ function persistThemePreference(themePreference, options = {}) {
 
   const normalizedPreference = normalizeThemePreference(themePreference);
   try {
-    storage.setItem(THEME_PREFERENCE_STORAGE_KEY, normalizedPreference);
+    storage.setItem("jskit.themePreference", normalizedPreference);
     return true;
   } catch {
     return false;

package/src/client/providers/UsersWebClientProvider.js

@@ -9,21 +9,9 @@ import ProfileClientElement from "../components/ProfileClientElement.vue";
 import MembersAdminClientElement from "../components/MembersAdminClientElement.vue";
 import WorkspaceSettingsClientElement from "../components/WorkspaceSettingsClientElement.vue";
 import {
-  USERS_WEB_BOOTSTRAP_PLACEMENT_RUNTIME_TOKEN,
   createBootstrapPlacementRuntime
 } from "../runtime/bootstrapPlacementRuntime.js";
 
-const USERS_WEB_WORKSPACE_SELECTOR_TOKEN = "users.web.workspace.selector";
-const USERS_WEB_WORKSPACE_TOOLS_WIDGET_TOKEN = "users.web.workspace.tools.widget";
-const USERS_WEB_SHELL_MENU_LINK_ITEM_TOKEN = "users.web.shell.menu-link-item";
-const USERS_WEB_SURFACE_AWARE_MENU_LINK_ITEM_TOKEN = "users.web.shell.surface-aware-menu-link-item";
-const USERS_WEB_PROFILE_SURFACE_SWITCH_MENU_ITEM_TOKEN = "users.web.profile.menu.surface-switch-item";
-const USERS_WEB_WORKSPACE_SETTINGS_MENU_ITEM_TOKEN = "users.web.workspace-settings.menu-item";
-const USERS_WEB_WORKSPACE_MEMBERS_MENU_ITEM_TOKEN = "users.web.workspace-members.menu-item";
-const USERS_WEB_PROFILE_ELEMENT_TOKEN = "users.web.profile.element";
-const USERS_WEB_MEMBERS_ADMIN_ELEMENT_TOKEN = "users.web.members-admin.element";
-const USERS_WEB_WORKSPACE_SETTINGS_ELEMENT_TOKEN = "users.web.workspace-settings.element";
-
 class UsersWebClientProvider {
   static id = "users.web.client";
   static dependsOn = ["shell.web.client"];
@@ -33,17 +21,17 @@ class UsersWebClientProvider {
       throw new Error("UsersWebClientProvider requires application singleton().");
     }
 
-    app.singleton(USERS_WEB_WORKSPACE_SELECTOR_TOKEN, () => UsersWorkspaceSelector);
-    app.singleton(USERS_WEB_WORKSPACE_TOOLS_WIDGET_TOKEN, () => UsersWorkspaceToolsWidget);
-    app.singleton(USERS_WEB_SHELL_MENU_LINK_ITEM_TOKEN, () => UsersShellMenuLinkItem);
-    app.singleton(USERS_WEB_SURFACE_AWARE_MENU_LINK_ITEM_TOKEN, () => UsersSurfaceAwareMenuLinkItem);
-    app.singleton(USERS_WEB_PROFILE_SURFACE_SWITCH_MENU_ITEM_TOKEN, () => UsersProfileSurfaceSwitchMenuItem);
-    app.singleton(USERS_WEB_WORKSPACE_SETTINGS_MENU_ITEM_TOKEN, () => UsersWorkspaceSettingsMenuItem);
-    app.singleton(USERS_WEB_WORKSPACE_MEMBERS_MENU_ITEM_TOKEN, () => UsersWorkspaceMembersMenuItem);
-    app.singleton(USERS_WEB_PROFILE_ELEMENT_TOKEN, () => ProfileClientElement);
-    app.singleton(USERS_WEB_MEMBERS_ADMIN_ELEMENT_TOKEN, () => MembersAdminClientElement);
-    app.singleton(USERS_WEB_WORKSPACE_SETTINGS_ELEMENT_TOKEN, () => WorkspaceSettingsClientElement);
-    app.singleton(USERS_WEB_BOOTSTRAP_PLACEMENT_RUNTIME_TOKEN, (scope) => createBootstrapPlacementRuntime({ app: scope }));
+    app.singleton("users.web.workspace.selector", () => UsersWorkspaceSelector);
+    app.singleton("users.web.workspace.tools.widget", () => UsersWorkspaceToolsWidget);
+    app.singleton("users.web.shell.menu-link-item", () => UsersShellMenuLinkItem);
+    app.singleton("users.web.shell.surface-aware-menu-link-item", () => UsersSurfaceAwareMenuLinkItem);
+    app.singleton("users.web.profile.menu.surface-switch-item", () => UsersProfileSurfaceSwitchMenuItem);
+    app.singleton("users.web.workspace-settings.menu-item", () => UsersWorkspaceSettingsMenuItem);
+    app.singleton("users.web.workspace-members.menu-item", () => UsersWorkspaceMembersMenuItem);
+    app.singleton("users.web.profile.element", () => ProfileClientElement);
+    app.singleton("users.web.members-admin.element", () => MembersAdminClientElement);
+    app.singleton("users.web.workspace-settings.element", () => WorkspaceSettingsClientElement);
+    app.singleton("users.web.bootstrap-placement.runtime", (scope) => createBootstrapPlacementRuntime({ app: scope }));
   }
 
   async boot(app) {
@@ -51,7 +39,7 @@ class UsersWebClientProvider {
       throw new Error("UsersWebClientProvider requires application make().");
     }
 
-    const runtime = app.make(USERS_WEB_BOOTSTRAP_PLACEMENT_RUNTIME_TOKEN);
+    const runtime = app.make("users.web.bootstrap-placement.runtime");
     if (runtime && typeof runtime.initialize === "function") {
       await runtime.initialize();
     }
@@ -62,24 +50,11 @@ class UsersWebClientProvider {
       return;
     }
 
-    const runtime = app.make(USERS_WEB_BOOTSTRAP_PLACEMENT_RUNTIME_TOKEN);
+    const runtime = app.make("users.web.bootstrap-placement.runtime");
     if (runtime && typeof runtime.shutdown === "function") {
       runtime.shutdown();
     }
   }
 }
 
-export {
-  UsersWebClientProvider,
-  USERS_WEB_WORKSPACE_SELECTOR_TOKEN,
-  USERS_WEB_WORKSPACE_TOOLS_WIDGET_TOKEN,
-  USERS_WEB_SHELL_MENU_LINK_ITEM_TOKEN,
-  USERS_WEB_SURFACE_AWARE_MENU_LINK_ITEM_TOKEN,
-  USERS_WEB_PROFILE_SURFACE_SWITCH_MENU_ITEM_TOKEN,
-  USERS_WEB_WORKSPACE_SETTINGS_MENU_ITEM_TOKEN,
-  USERS_WEB_WORKSPACE_MEMBERS_MENU_ITEM_TOKEN,
-  USERS_WEB_PROFILE_ELEMENT_TOKEN,
-  USERS_WEB_MEMBERS_ADMIN_ELEMENT_TOKEN,
-  USERS_WEB_WORKSPACE_SETTINGS_ELEMENT_TOKEN,
-  USERS_WEB_BOOTSTRAP_PLACEMENT_RUNTIME_TOKEN
-};
+export { UsersWebClientProvider };