@jskit-ai/users-web 0.1.37 → 0.1.40

package/src/client/composables/records/useCrudList.js

@@ -0,0 +1,83 @@
+import { computed, unref } from "vue";
+import { useRoute } from "vue-router";
+import { resolveLookupFieldDisplayValue } from "../crud/crudLookupFieldLabelSupport.js";
+import { resolveCrudBoundValues } from "../crud/crudBindingSupport.js";
+import { resolveCrudListParentDescriptor } from "../internal/crudListParentTitleSupport.js";
+import {
+  resolveRouteParamsSource,
+  toRouteParamValue
+} from "../support/routeTemplateHelpers.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
+import { useList } from "./useList.js";
+
+function resolveRequestQueryParamsInput(requestQueryParams, context = {}) {
+  if (typeof requestQueryParams === "function") {
+    return asPlainObject(requestQueryParams(context));
+  }
+
+  return asPlainObject(unref(requestQueryParams));
+}
+
+function resolveCrudParentRequestQueryParams({ resource = {}, route = null, recordIdParam = "recordId" } = {}) {
+  const descriptor = resolveCrudListParentDescriptor({
+    resource,
+    route,
+    recordIdParam
+  });
+  if (!descriptor?.fieldKey || !descriptor?.routeParamKey) {
+    return {};
+  }
+
+  const routeParams = resolveRouteParamsSource(route?.params || {});
+  const routeParamValue = toRouteParamValue(routeParams[descriptor.routeParamKey]);
+  if (!routeParamValue) {
+    return {};
+  }
+
+  return {
+    [descriptor.fieldKey]: routeParamValue
+  };
+}
+
+function useCrudList({
+  resource = null,
+  requestQueryParams = null,
+  parentBinding = null,
+  recordIdParam = "recordId",
+  route = null,
+  ...listOptions
+} = {}) {
+  const sourceRoute = route && typeof route === "object" ? route : useRoute();
+  const boundParentRequestQueryParams = computed(() => {
+    return resolveCrudBoundValues({
+      binding: parentBinding,
+      routeValues: resolveCrudParentRequestQueryParams({
+        resource,
+        route: sourceRoute,
+        recordIdParam
+      }),
+      context: Object.freeze({
+        route: sourceRoute,
+        resource,
+        recordIdParam
+      })
+    });
+  });
+  const records = useList({
+    ...listOptions,
+    recordIdParam,
+    requestQueryParams(context = {}) {
+      const baseRequestQueryParams = resolveRequestQueryParamsInput(requestQueryParams, context);
+
+      return {
+        ...baseRequestQueryParams,
+        ...boundParentRequestQueryParams.value
+      };
+    }
+  });
+
+  records.resolveFieldDisplay = resolveLookupFieldDisplayValue;
+  return records;
+}
+
+export { useCrudList };

package/src/client/composables/records/useCrudView.js

@@ -0,0 +1,35 @@
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import {
+  resolveLookupFieldDisplayValue,
+  resolveRecordTitle
+} from "../crud/crudLookupFieldLabelSupport.js";
+import { resolveCrudBoundValues } from "../crud/crudBindingSupport.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
+import { useView } from "./useView.js";
+
+function useCrudView({
+  paramBinding = null,
+  route = null,
+  ...viewOptions
+} = {}) {
+  const sourceRoute = route && typeof route === "object" ? route : useRoute();
+  const boundRouteParams = computed(() => {
+    return resolveCrudBoundValues({
+      binding: paramBinding,
+      routeValues: asPlainObject(sourceRoute?.params || {}),
+      context: Object.freeze({
+        route: sourceRoute
+      })
+    });
+  });
+  const view = useView({
+    ...viewOptions,
+    routeParams: boundRouteParams
+  });
+  view.resolveFieldDisplay = resolveLookupFieldDisplayValue;
+  view.resolveRecordTitle = resolveRecordTitle;
+  return view;
+}
+
+export { useCrudView };

package/src/client/composables/{useList.js → records/useList.js}

@@ -2,17 +2,16 @@ import { computed, onScopeDispose, proxyRefs, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { appendQueryString } from "@jskit-ai/kernel/shared/support";
 import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
-import { resolveCrudLookupFieldKeys } from "@jskit-ai/kernel/shared/support/crudLookup";
 import { USERS_ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/users-core/shared/support/usersVisibility";
-import { useListCore } from "./useListCore.js";
-import { resolveOperationAdapter } from "./operationAdapters.js";
-import { setupOperationErrorReporting } from "./operationUiHelpers.js";
-import { createListUiRuntime } from "./listUiRuntime.js";
-import { asPlainObject } from "./scopeHelpers.js";
+import { useListCore } from "../runtime/useListCore.js";
+import { resolveOperationAdapter } from "../runtime/operationAdapters.js";
+import { setupOperationErrorReporting } from "../runtime/operationUiHelpers.js";
+import { createListUiRuntime } from "../runtime/listUiRuntime.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
 import {
   normalizeListSearchConfig,
   matchesLocalSearch
-} from "./listSearchSupport.js";
+} from "../support/listSearchSupport.js";
 import {
   normalizeListSyncToRouteConfig,
   resolveQueryParamDescriptors,
@@ -24,13 +23,10 @@ import {
   buildRouteQueryCompareToken,
   mergeManagedQueryParamKeyHistory,
   resolveRouteSyncManagedKeys
-} from "./listQueryParamSupport.js";
-import { resolveLookupFieldDisplayValue } from "./crudLookupFieldLabelSupport.js";
+} from "../support/listQueryParamSupport.js";
 import {
   resolveRouteParamNamesInOrder,
-  resolveRouteParamsSource,
-  toRouteParamValue
-} from "./routeTemplateHelpers.js";
+} from "../support/routeTemplateHelpers.js";
 
 const EMPTY_ROUTE_SYNC_QUERY_PARAM_BLACKLIST = Object.freeze([]);
 
@@ -51,13 +47,13 @@ function useList({
   queryOptions,
   realtime = null,
   adapter = null,
-  resource = null,
   recordIdParam = "recordId",
   recordIdSelector = null,
   viewUrlTemplate = "",
   editUrlTemplate = "",
   search = null,
   queryParams = null,
+  requestQueryParams = null,
   syncToRoute = false
 } = {}) {
   const searchConfig = normalizeListSearchConfig(search);
@@ -142,52 +138,25 @@ function useList({
   const queryParamDescriptors = computed(() => {
     return resolveQueryParamDescriptors(queryParams, queryParamsContext.value);
   });
+  const requestQueryParamDescriptors = computed(() => {
+    return resolveQueryParamDescriptors(requestQueryParams, queryParamsContext.value);
+  });
   const declaredQueryParamKeys = computed(() => {
     return queryParamDescriptors.value.map((descriptor) => descriptor.key);
   });
   const activeQueryParamEntries = computed(() => {
     return resolveActiveQueryParamEntries(queryParamDescriptors.value);
   });
+  const activeRequestQueryParamEntries = computed(() => {
+    return resolveActiveQueryParamEntries(requestQueryParamDescriptors.value);
+  });
   const activeQueryParamsToken = computed(() => buildQueryParamEntriesToken(activeQueryParamEntries.value));
+  const activeRequestQueryParamsToken = computed(() => {
+    return buildQueryParamEntriesToken(activeRequestQueryParamEntries.value);
+  });
   const writableQueryParamBindings = computed(() => {
     return resolveWritableQueryParamBindings(queryParamDescriptors.value);
   });
-  const parentRouteFilter = computed(() => {
-    const lookupFieldKeys = resolveCrudLookupFieldKeys(resource);
-    if (lookupFieldKeys.length < 1) {
-      return null;
-    }
-
-    const lookupFieldKeySet = new Set(lookupFieldKeys);
-    const sourceRoute = operationScope.routeContext.route;
-    const orderedRouteParamNames = resolveRouteParamNamesInOrder(sourceRoute);
-    if (orderedRouteParamNames.length < 1) {
-      return null;
-    }
-
-    const normalizedRecordIdParam = normalizeText(recordIdParam) || "recordId";
-    const parentParamName = [...orderedRouteParamNames]
-      .reverse()
-      .find((name) => (
-        name !== "workspaceSlug" &&
-        name !== normalizedRecordIdParam &&
-        lookupFieldKeySet.has(name)
-      )) || "";
-    if (!parentParamName) {
-      return null;
-    }
-
-    const routeParams = resolveRouteParamsSource(sourceRoute?.params || {});
-    const parentParamValue = toRouteParamValue(routeParams[parentParamName]);
-    if (!parentParamValue) {
-      return null;
-    }
-
-    return Object.freeze({
-      key: parentParamName,
-      value: parentParamValue
-    });
-  });
   const activeSearchQuery = computed(() => {
     if (searchConfig.enabled !== true) {
       return "";
@@ -213,11 +182,11 @@ function useList({
       }
     }
 
-    const parentFilter = parentRouteFilter.value;
-    if (parentFilter) {
-      searchParams.set(parentFilter.key, parentFilter.value);
+    for (const entry of activeRequestQueryParamEntries.value) {
+      for (const value of entry.values) {
+        searchParams.append(entry.key, value);
+      }
     }
-
     for (const entry of activeQueryParamEntries.value) {
       for (const value of entry.values) {
         searchParams.append(entry.key, value);
@@ -238,9 +207,8 @@ function useList({
       : sourceQueryKey == null
         ? []
         : [sourceQueryKey];
-    const parentFilter = parentRouteFilter.value;
-    if (parentFilter) {
-      baseQueryKey.push("__parent__", parentFilter.key, parentFilter.value);
+    if (activeRequestQueryParamsToken.value) {
+      baseQueryKey.push("__request_query__", activeRequestQueryParamsToken.value);
     }
     if (querySearchEnabled.value) {
       baseQueryKey.push("__search__", searchConfig.queryParam, activeSearchQuery.value);
@@ -430,6 +398,13 @@ function useList({
 
     list.trimToFirstPage();
   });
+  watch(activeRequestQueryParamsToken, (nextValue, previousValue) => {
+    if (nextValue === previousValue) {
+      return;
+    }
+
+    list.trimToFirstPage();
+  });
   const filteredItems = computed(() => {
     const sourceItems = Array.isArray(list.items.value) ? list.items.value : [];
     if (searchConfig.enabled !== true || searchConfig.mode !== "local") {
@@ -494,7 +469,6 @@ function useList({
     resolveParams: listUiRuntime.resolveParams,
     resolveViewUrl: listUiRuntime.resolveViewUrl,
     resolveEditUrl: listUiRuntime.resolveEditUrl,
-    resolveFieldDisplay: resolveLookupFieldDisplayValue,
     searchEnabled: searchConfig.enabled,
     searchMode: searchConfig.mode,
     searchQuery,

package/src/client/composables/{useView.js → records/useView.js}

@@ -1,13 +1,12 @@
 import { computed, proxyRefs } 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 { resolveOperationAdapter } from "./operationAdapters.js";
-import { setupOperationErrorReporting } from "./operationUiHelpers.js";
-import { createViewUiRuntime } from "./viewUiRuntime.js";
-import { resolveLookupFieldDisplayValue, resolveRecordTitle } from "./crudLookupFieldLabelSupport.js";
-import { resolveRouteParamNamesInOrder } from "./routeTemplateHelpers.js";
+import { useViewCore } from "../runtime/useViewCore.js";
+import { useEndpointResource } from "../runtime/useEndpointResource.js";
+import { resolveOperationAdapter } from "../runtime/operationAdapters.js";
+import { setupOperationErrorReporting } from "../runtime/operationUiHelpers.js";
+import { createViewUiRuntime } from "../runtime/viewUiRuntime.js";
+import { resolveRouteParamNamesInOrder } from "../support/routeTemplateHelpers.js";
 
 function useView({
   ownershipFilter = USERS_ROUTE_VISIBILITY_WORKSPACE,
@@ -115,8 +114,6 @@ function useView({
     listUrl: viewUiRuntime.listUrl,
     editUrl: viewUiRuntime.editUrl,
     resolveParams: viewUiRuntime.resolveParams,
-    resolveFieldDisplay: resolveLookupFieldDisplayValue,
-    resolveRecordTitle,
     canView,
     isLoading,
     isFetching,

package/src/client/composables/{addEditUiRuntime.js → runtime/addEditUiRuntime.js}

@@ -1,12 +1,12 @@
 import { computed, unref } from "vue";
-import { asPlainObject } from "./scopeHelpers.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
 import {
   normalizeRouteParamName,
   resolveRouteParamsSource,
   resolveScopedRoutePathname,
   resolveRouteTemplateLocation,
   toRouteParamValue
-} from "./routeTemplateHelpers.js";
+} from "../support/routeTemplateHelpers.js";
 
 function toResolvedRecordId({ routeParams, recordIdParam, routeRecordId }) {
   const explicitRecordId = toRouteParamValue(

package/src/client/composables/{listUiRuntime.js → runtime/listUiRuntime.js}

@@ -1,12 +1,12 @@
 import { computed } from "vue";
-import { asPlainObject } from "./scopeHelpers.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
 import {
   normalizeRouteParamName,
   toRouteParamValue,
   resolveRouteParamsSource,
   resolveScopedRoutePathname,
   resolveRouteTemplateLocation
-} from "./routeTemplateHelpers.js";
+} from "../support/routeTemplateHelpers.js";
 
 function resolveRecordId(record, recordIdSelector) {
   const item = asPlainObject(record);

package/src/client/composables/{operationAdapters.js → runtime/operationAdapters.js}

@@ -1,4 +1,4 @@
-import { useOperationScope } from "./internal/useOperationScope.js";
+import { useOperationScope } from "../internal/useOperationScope.js";
 
 const USERS_OPERATION_ADAPTER_ID = "users-default";
 

package/src/client/composables/{useEndpointResource.js → runtime/useEndpointResource.js}

@@ -1,10 +1,10 @@
 import { computed } from "vue";
 import { useMutation, useQuery } from "@tanstack/vue-query";
-import { usersWebHttpClient } from "../lib/httpClient.js";
-import { asPlainObject } from "./scopeHelpers.js";
-import { resolveEnabledRef, resolveTextRef } from "./refValueHelpers.js";
-import { toQueryErrorMessage } from "./errorMessageHelpers.js";
-import { hasResolvedQueryData } from "./resourceLoadStateHelpers.js";
+import { usersWebHttpClient } from "../../lib/httpClient.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
+import { resolveEnabledRef, resolveTextRef } from "../support/refValueHelpers.js";
+import { toQueryErrorMessage } from "../support/errorMessageHelpers.js";
+import { hasResolvedQueryData } from "../support/resourceLoadStateHelpers.js";
 
 function useEndpointResource({
   queryKey,

package/src/client/composables/{useListCore.js → runtime/useListCore.js}

@@ -1,9 +1,9 @@
 import { computed } from "vue";
 import { appendQueryString } from "@jskit-ai/kernel/shared/support";
-import { usersWebHttpClient } from "../lib/httpClient.js";
-import { asPlainObject } from "./scopeHelpers.js";
-import { resolveEnabledRef, resolveTextRef } from "./refValueHelpers.js";
-import { usePagedCollection } from "./usePagedCollection.js";
+import { usersWebHttpClient } from "../../lib/httpClient.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
+import { resolveEnabledRef, resolveTextRef } from "../support/refValueHelpers.js";
+import { usePagedCollection } from "../usePagedCollection.js";
 
 function appendPageParam(path, pageParam) {
   const normalizedPath = String(path || "").trim();

package/src/client/composables/{useUiFeedback.js → runtime/useUiFeedback.js}

@@ -1,6 +1,6 @@
 import { ref } from "vue";
 import { useShellWebErrorRuntime } from "@jskit-ai/shell-web/client/error";
-import { toUiErrorMessage } from "./errorMessageHelpers.js";
+import { toUiErrorMessage } from "../support/errorMessageHelpers.js";
 
 function useUiFeedback({
   initialType = "success",

package/src/client/composables/{viewUiRuntime.js → runtime/viewUiRuntime.js}

@@ -1,12 +1,12 @@
 import { computed, unref } from "vue";
-import { asPlainObject } from "./scopeHelpers.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
 import {
   normalizeRouteParamName,
   resolveRouteParamsSource,
   resolveScopedRoutePathname,
   resolveRouteTemplateLocation,
   toRouteParamValue
-} from "./routeTemplateHelpers.js";
+} from "../support/routeTemplateHelpers.js";
 
 function resolveRecordId({ routeParams, recordIdParam, routeRecordId }) {
   const explicitRecordId = toRouteParamValue(

package/src/client/composables/useAccess.js

@@ -1,10 +1,10 @@
 import { computed } from "vue";
 import { hasPermission, normalizePermissionList } from "../lib/permissions.js";
-import { resolveEnabledRef, resolveTextRef } from "./refValueHelpers.js";
+import { resolveEnabledRef, resolveTextRef } from "./support/refValueHelpers.js";
 import {
   normalizeAccessMode,
   resolveAccessModeEnabled
-} from "./scopeHelpers.js";
+} from "./support/scopeHelpers.js";
 import { useWebPlacementContext } from "@jskit-ai/shell-web/client/placement";
 
 function asPermissionList(value) {

package/src/client/composables/useAccountSettingsRuntime.js

@@ -19,9 +19,9 @@ import {
 import {
   useWorkspaceSurfaceId
 } from "./useWorkspaceSurfaceId.js";
-import { useAddEdit } from "./useAddEdit.js";
+import { useAddEdit } from "./records/useAddEdit.js";
 import { useCommand } from "./useCommand.js";
-import { useView } from "./useView.js";
+import { useView } from "./records/useView.js";
 import { usePaths } from "./usePaths.js";
 import { resolveAccountSettingsPathFromPlacementContext } from "../lib/workspaceSurfacePaths.js";
 import {
@@ -34,16 +34,16 @@ import {
   NUMBER_FORMAT_OPTIONS,
   THEME_OPTIONS,
   TIME_ZONE_OPTIONS
-} from "./accountSettingsRuntimeConstants.js";
+} from "./account-settings/accountSettingsRuntimeConstants.js";
 import {
   normalizeAvatarSize,
   normalizePendingInvite,
   normalizeReturnToPath,
   normalizeSettingsPayload,
   resolveAllowedReturnToOrigins
-} from "./accountSettingsRuntimeHelpers.js";
-import { createAccountSettingsAvatarUploadRuntime } from "./accountSettingsAvatarUploadRuntime.js";
-import { createAccountSettingsInvitesRuntime } from "./accountSettingsInvitesRuntime.js";
+} from "./account-settings/accountSettingsRuntimeHelpers.js";
+import { createAccountSettingsAvatarUploadRuntime } from "./account-settings/accountSettingsAvatarUploadRuntime.js";
+import { createAccountSettingsInvitesRuntime } from "./account-settings/accountSettingsInvitesRuntime.js";
 
 function useAccountSettingsRuntime() {
   const route = useRoute();

package/src/client/composables/useBootstrapQuery.js

@@ -5,7 +5,7 @@ import { useQuery } from "@tanstack/vue-query";
 import { normalizeQueryToken } from "@jskit-ai/kernel/shared/support/normalize";
 import { usersWebHttpClient } from "../lib/httpClient.js";
 import { buildBootstrapApiPath } from "../lib/bootstrap.js";
-import { resolveEnabledRef, resolveTextRef } from "./refValueHelpers.js";
+import { resolveEnabledRef, resolveTextRef } from "./support/refValueHelpers.js";
 
 const DEFAULT_BOOTSTRAP_STALE_TIME_MS = 60_000;
 

package/src/client/composables/useCommand.js

@@ -1,14 +1,14 @@
 import { proxyRefs } from "vue";
 import { USERS_ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/users-core/shared/support/usersVisibility";
-import { useCommandCore } from "./useCommandCore.js";
-import { useEndpointResource } from "./useEndpointResource.js";
+import { useCommandCore } from "./runtime/useCommandCore.js";
+import { useEndpointResource } from "./runtime/useEndpointResource.js";
 import { useOperationScope } from "./internal/useOperationScope.js";
-import { useUiFeedback } from "./useUiFeedback.js";
-import { useFieldErrorBag } from "./useFieldErrorBag.js";
+import { useUiFeedback } from "./runtime/useUiFeedback.js";
+import { useFieldErrorBag } from "./runtime/useFieldErrorBag.js";
 import {
   setupRouteChangeCleanup,
   setupOperationErrorReporting
-} from "./operationUiHelpers.js";
+} from "./runtime/operationUiHelpers.js";
 
 function useCommand({
   ownershipFilter = USERS_ROUTE_VISIBILITY_WORKSPACE,

package/src/client/composables/useCrudListParentTitle.js

@@ -0,0 +1,131 @@
+import { computed, proxyRefs } from "vue";
+import { useRoute } from "vue-router";
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+import {
+  resolveRouteParamsSource,
+  toRouteParamValue
+} from "./support/routeTemplateHelpers.js";
+import { useView } from "./records/useView.js";
+import {
+  resolveCrudListParentDescriptor,
+  resolveCrudListParentRecordTitle,
+  resolveCrudListParentTitleFromItems
+} from "./internal/crudListParentTitleSupport.js";
+
+function normalizeQueryKeyPrefix(value = []) {
+  if (Array.isArray(value)) {
+    return value
+      .map((entry) => normalizeText(entry))
+      .filter(Boolean);
+  }
+
+  const normalizedValue = normalizeText(value);
+  return normalizedValue ? [normalizedValue] : [];
+}
+
+function useCrudListParentTitle({
+  listRuntime = null,
+  resource = {},
+  adapter = null,
+  recordIdParam = "recordId",
+  queryKeyPrefix = ["users-web", "crud-list-parent-title"],
+  placementSource = "users-web.crud-list-parent-title",
+  fallbackLoadError = "Unable to load parent record.",
+  notFoundMessage = "Parent record not found.",
+  route = null,
+  viewRuntimeFactory = useView
+} = {}) {
+  const sourceRoute = route && typeof route === "object" ? route : useRoute();
+  const parentDescriptor = computed(() => {
+    const descriptor = resolveCrudListParentDescriptor({
+      resource,
+      route: sourceRoute,
+      recordIdParam
+    });
+    if (!descriptor) {
+      return null;
+    }
+
+    const routeParams = resolveRouteParamsSource(sourceRoute?.params || {});
+    const routeParamValue = toRouteParamValue(routeParams[descriptor.routeParamKey]);
+    if (!routeParamValue) {
+      return null;
+    }
+
+    return Object.freeze({
+      ...descriptor,
+      routeParamValue
+    });
+  });
+
+  const initialParentDescriptor = parentDescriptor.value || {};
+  const normalizedQueryKeyPrefix = normalizeQueryKeyPrefix(queryKeyPrefix);
+  const shouldLoadParentRecord = computed(() => {
+    const descriptor = parentDescriptor.value;
+    if (!descriptor?.apiUrlTemplate) {
+      return false;
+    }
+    if (Boolean(listRuntime?.isInitialLoading) || normalizeText(listRuntime?.loadError)) {
+      return false;
+    }
+
+    const items = Array.isArray(listRuntime?.items) ? listRuntime.items : [];
+    return items.length < 1;
+  });
+
+  const parentView = viewRuntimeFactory({
+    adapter,
+    apiUrlTemplate: normalizeText(initialParentDescriptor.apiUrlTemplate),
+    readEnabled: shouldLoadParentRecord,
+    recordIdParam: normalizeText(initialParentDescriptor.routeParamKey) || "recordId",
+    includeRecordIdInQueryKey: true,
+    queryKeyFactory: (surfaceId = "", workspaceSlug = "") => [
+      ...normalizedQueryKeyPrefix,
+      normalizeText(initialParentDescriptor.relationNamespace),
+      normalizeText(initialParentDescriptor.routeParamKey),
+      String(surfaceId || ""),
+      String(workspaceSlug || "")
+    ],
+    placementSource,
+    fallbackLoadError,
+    notFoundMessage
+  });
+
+  const title = computed(() => {
+    const descriptor = parentDescriptor.value;
+    if (!descriptor) {
+      return "";
+    }
+
+    const parentRecordTitle = resolveCrudListParentRecordTitle(parentView?.record || {}, descriptor);
+    if (parentRecordTitle && shouldLoadParentRecord.value) {
+      return parentRecordTitle;
+    }
+
+    const listTitle = resolveCrudListParentTitleFromItems(listRuntime?.items, descriptor);
+    if (listTitle) {
+      return listTitle;
+    }
+
+    if (parentRecordTitle) {
+      return parentRecordTitle;
+    }
+
+    if (descriptor.routeParamValue) {
+      return `${descriptor.entityLabel} #${descriptor.routeParamValue}`;
+    }
+
+    return descriptor.entityLabel;
+  });
+
+  return proxyRefs({
+    title,
+    descriptor: parentDescriptor,
+    shouldLoadParentRecord,
+    record: computed(() => parentView?.record || null),
+    isLoading: computed(() => Boolean(parentView?.isLoading)),
+    loadError: computed(() => normalizeText(parentView?.loadError))
+  });
+}
+
+export { useCrudListParentTitle };

package/src/client/composables/usePagedCollection.js

@@ -1,8 +1,8 @@
 import { computed, unref } from "vue";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/vue-query";
-import { asPlainObject } from "./scopeHelpers.js";
-import { resolveEnabledRef } from "./refValueHelpers.js";
-import { toQueryErrorMessage } from "./errorMessageHelpers.js";
+import { asPlainObject } from "./support/scopeHelpers.js";
+import { resolveEnabledRef } from "./support/refValueHelpers.js";
+import { toQueryErrorMessage } from "./support/errorMessageHelpers.js";
 
 function defaultSelectItems(page) {
   return Array.isArray(page?.items) ? page.items : [];

package/src/client/composables/useScopeRuntime.js

@@ -11,7 +11,7 @@ import {
   resolveAccessModeEnabled,
   normalizeOwnershipFilter,
   resolveApiSuffix
-} from "./scopeHelpers.js";
+} from "./support/scopeHelpers.js";
 
 function useScopeRuntime({
   ownershipFilter = USERS_ROUTE_VISIBILITY_WORKSPACE,

package/src/client/index.js

@@ -1,6 +1,7 @@
 import { UsersWebClientProvider } from "./providers/UsersWebClientProvider.js";
 
 export { UsersWebClientProvider } from "./providers/UsersWebClientProvider.js";
+export { UsersWorkspacesClientProvider } from "./providers/UsersWorkspacesClientProvider.js";
 
 const clientProviders = Object.freeze([UsersWebClientProvider]);