@jskit-ai/workspaces-web 0.1.61 → 0.1.63

package/package.descriptor.mjs

@@ -1,9 +1,9 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/workspaces-web",
-  version: "0.1.61",
+  version: "0.1.63",
   kind: "runtime",
-  description: "Workspace web module: workspace selector, tools widget, workspace surfaces, and members/settings UI.",
+  description: "Workspace web module: workspace selector, tools widget, workspace surfaces, members UI, and settings hosts.",
   dependsOn: [
     "@jskit-ai/workspaces-core",
     "@jskit-ai/users-web"
@@ -41,10 +41,6 @@ export default Object.freeze({
           subpath: "./client/components/AccountSettingsInvitesSection",
           summary: "Exports the default account invites section component used by multihoming installs."
         },
-        {
-          subpath: "./client/components/WorkspaceSettingsClientElement",
-          summary: "Exports the workspace settings client element used by the workspace admin settings starter page."
-        },
         {
           subpath: "./client/providers/WorkspacesWebClientProvider",
           summary: "Exports workspaces-web client provider class."
@@ -231,8 +227,8 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/workspaces-core": "0.1.61",
-        "@jskit-ai/users-web": "0.1.100"
+        "@jskit-ai/workspaces-core": "0.1.62",
+        "@jskit-ai/users-web": "0.1.101"
       },
       dev: {}
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/workspaces-web",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -10,17 +10,16 @@
     "./client/components/AccountSettingsInvitesSection": "./src/client/components/AccountSettingsInvitesSection.vue",
     "./client/providers/WorkspacesWebClientProvider": "./src/client/providers/WorkspacesWebClientProvider.js",
     "./client/components/WorkspaceMembersClientElement": "./src/client/components/WorkspaceMembersClientElement.vue",
-    "./client/components/WorkspaceSettingsClientElement": "./src/client/components/WorkspaceSettingsClientElement.vue",
     "./client/composables/useWorkspaceRouteContext": "./src/client/composables/useWorkspaceRouteContext.js"
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "@jskit-ai/http-runtime": "0.1.84",
-    "@jskit-ai/kernel": "0.1.85",
-    "@jskit-ai/shell-web": "0.1.84",
-    "@jskit-ai/users-core": "0.1.95",
-    "@jskit-ai/users-web": "0.1.100",
-    "@jskit-ai/workspaces-core": "0.1.61"
+    "@jskit-ai/http-runtime": "0.1.85",
+    "@jskit-ai/kernel": "0.1.86",
+    "@jskit-ai/shell-web": "0.1.85",
+    "@jskit-ai/users-core": "0.1.96",
+    "@jskit-ai/users-web": "0.1.101",
+    "@jskit-ai/workspaces-core": "0.1.62"
   },
   "peerDependencies": {
     "@tanstack/vue-query": "^5.90.5",

package/templates/src/pages/admin/workspace/settings/index.vue

@@ -1,7 +1,23 @@
-<script setup>
-import WorkspaceSettingsClientElement from "@jskit-ai/workspaces-web/client/components/WorkspaceSettingsClientElement";
-</script>
-
 <template>
-  <WorkspaceSettingsClientElement />
+  <section class="workspace-settings-landing">
+    <v-sheet rounded="lg" border class="workspace-settings-landing__panel">
+      <h2 class="workspace-settings-landing__title">No settings sections yet</h2>
+      <p class="text-body-2 text-medium-emphasis mb-0">
+        This app has no workspace-level settings configured.
+      </p>
+    </v-sheet>
+  </section>
 </template>
+
+<style scoped>
+.workspace-settings-landing__panel {
+  padding: 1rem;
+}
+
+.workspace-settings-landing__title {
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.2;
+  margin: 0 0 0.25rem;
+}
+</style>

package/templates/src/pages/admin/workspace/settings.vue

@@ -13,7 +13,7 @@ import { RouterView } from "vue-router";
 
     <v-sheet rounded="lg" border class="settings-shell__panel">
       <nav class="settings-shell__nav" aria-label="Workspace settings sections">
-        <v-list nav density="comfortable" class="settings-shell__nav-list">
+        <v-list nav density="compact" class="settings-shell__nav-list">
           <ShellOutlet target="admin-settings:primary-menu" />
         </v-list>
       </nav>
@@ -41,11 +41,31 @@ import { RouterView } from "vue-router";
 }
 
 .settings-shell__nav-list {
-  padding: 0;
+  padding: 0.35rem;
+}
+
+.settings-shell__nav-list :deep(.v-list-item) {
+  min-height: 48px;
+  padding-inline: 0.6rem 0.7rem;
+}
+
+.settings-shell__nav-list :deep(.v-list-item__prepend) {
+  margin-inline-end: 0;
+}
+
+.settings-shell__nav-list :deep(.v-list-item__spacer) {
+  min-width: 0.5rem;
+  width: 0.5rem;
+}
+
+.settings-shell__nav-list :deep(.v-list-item-title) {
+  line-height: 1.2;
 }
 
 .settings-shell__content {
+  border-left: 1px solid rgba(var(--v-theme-on-surface), 0.18);
   min-width: 0;
+  padding-left: 1rem;
 }
 
 @media (max-width: 960px) {
@@ -59,12 +79,17 @@ import { RouterView } from "vue-router";
 
   .settings-shell__nav-list {
     display: flex;
-    gap: 0.5rem;
+    gap: 0.25rem;
     min-width: max-content;
   }
 
   .settings-shell__nav-list :deep(.v-list-item) {
     min-height: 48px;
   }
+
+  .settings-shell__content {
+    border-left: 0;
+    padding-left: 0;
+  }
 }
 </style>

package/test/exportsContract.test.js

@@ -16,7 +16,6 @@ test("workspaces-web exports are explicit and aligned with production usage", ()
     requiredExports: [
       "./client",
       "./client/components/AccountSettingsInvitesSection",
-      "./client/components/WorkspaceSettingsClientElement",
       "./client/providers/WorkspacesWebClientProvider",
       "./client/composables/useWorkspaceRouteContext"
     ]

package/test/settingsPlacementContract.test.js

@@ -101,8 +101,6 @@ test("workspaces-web installs an app-owned account invites section wrapper", asy
 test("workspaces-web settings components use direct panels instead of card scaffolds", async () => {
   for (const relativePath of [
     path.join("templates", "src", "components", "WorkspaceNotFoundCard.vue"),
-    path.join("src", "client", "components", "WorkspaceProfileClientElement.vue"),
-    path.join("src", "client", "components", "WorkspaceSettingsFieldsClientElement.vue"),
     path.join("src", "client", "components", "WorkspacesClientElement.vue"),
     path.join("src", "client", "components", "AccountSettingsInvitesSection.vue")
   ]) {
@@ -118,8 +116,6 @@ test("workspaces-web settings components use direct panels instead of card scaff
 
 test("workspaces-web resource load states expose local retry actions", async () => {
   const expectations = new Map([
-    ["src/client/components/WorkspaceProfileClientElement.vue", /addEdit\.canRetryLoad[\s\S]*@click="addEdit\.refresh"/],
-    ["src/client/components/WorkspaceSettingsFieldsClientElement.vue", /addEdit\.canRetryLoad[\s\S]*@click="addEdit\.refresh"/],
     ["src/client/components/WorkspacesClientElement.vue", /bootstrapLoadError[\s\S]*@click="refreshBootstrap"/],
     ["src/client/components/WorkspaceMembersClientElement.vue", /canRetryLoad[\s\S]*@click="refreshLoad"/]
   ]);
@@ -149,14 +145,25 @@ test("workspaces-web installs an account invites cue scaffold that reads placeme
   });
 });
 
-test("workspaces-web admin settings index template renders real workspace settings controls", async () => {
+test("workspaces-web admin settings index template is an app-owned landing slot", async () => {
   const source = await readFile(
     path.join(PACKAGE_DIR, "templates", "src", "pages", "admin", "workspace", "settings", "index.vue"),
     "utf8"
   );
 
-  assert.match(source, /@jskit-ai\/workspaces-web\/client\/components\/WorkspaceSettingsClientElement/);
-  assert.match(source, /<WorkspaceSettingsClientElement \/>/);
+  assertGeneratedUiSourceContract(source, {
+    forbidCardShell: true,
+    sourceName: "admin/workspace/settings/index.vue",
+    requiredPatterns: [
+      {
+        id: "app-owned-settings-landing",
+        pattern: /No settings sections yet/,
+        message: "Workspace settings index needs a product-shaped app-owned landing state."
+      }
+    ]
+  });
+  assert.doesNotMatch(source, /@jskit-ai\/workspaces-web\/client\/components\/WorkspaceSettingsClientElement/);
+  assert.doesNotMatch(source, /<WorkspaceSettingsClientElement \/>/);
   assert.doesNotMatch(source, /your_child_segment|To redirect this settings shell/);
 });
 

package/src/client/components/WorkspaceProfileClientElement.vue

@@ -1,155 +0,0 @@
-<template>
-  <v-sheet rounded="lg" border class="workspace-profile-panel">
-    <header class="workspace-profile-panel__header">
-      <h2 class="workspace-profile-panel__title">Workspace profile</h2>
-      <p class="text-body-2 text-medium-emphasis mb-0">Name and avatar used across the workspace.</p>
-    </header>
-
-    <div class="workspace-profile-panel__body">
-      <template v-if="showSkeleton">
-        <v-skeleton-loader type="text@2, list-item-two-line@3, button" />
-      </template>
-
-      <div v-else-if="addEdit.loadError" class="workspace-profile-panel__state">
-        <p class="text-body-2 text-medium-emphasis mb-4">{{ addEdit.loadError }}</p>
-        <v-btn
-          v-if="addEdit.canRetryLoad"
-          color="primary"
-          variant="tonal"
-          :loading="addEdit.isFetching"
-          @click="addEdit.refresh"
-        >
-          Retry
-        </v-btn>
-      </div>
-
-      <p v-else-if="!addEdit.canView" class="text-body-2 text-medium-emphasis mb-4">
-        You do not have permission to view workspace profile.
-      </p>
-
-      <template v-else>
-        <v-form @submit.prevent="addEdit.submit" novalidate>
-          <v-progress-linear v-if="addEdit.isRefetching" indeterminate class="mb-4" />
-          <v-row>
-            <v-col cols="12" md="6">
-              <v-text-field
-                v-model="workspaceProfileForm.name"
-                label="Workspace name"
-                variant="outlined"
-                density="comfortable"
-                :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                :error-messages="addEdit.fieldErrors.name ? [addEdit.fieldErrors.name] : []"
-              />
-            </v-col>
-
-            <v-col cols="12" md="6">
-              <v-text-field
-                v-model="workspaceProfileForm.avatarUrl"
-                label="Workspace avatar URL"
-                variant="outlined"
-                density="comfortable"
-                :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                placeholder="https://..."
-                hint="Optional"
-                persistent-hint
-                :error-messages="addEdit.fieldErrors.avatarUrl ? [addEdit.fieldErrors.avatarUrl] : []"
-              />
-            </v-col>
-
-            <v-col cols="12" class="d-flex align-center justify-end ga-3">
-              <v-btn
-                v-if="addEdit.canSave"
-                type="submit"
-                color="primary"
-                :loading="addEdit.isSaving"
-                :disabled="addEdit.isInitialLoading || addEdit.isRefetching"
-              >
-                Save workspace profile
-              </v-btn>
-              <v-chip v-else color="secondary" label>Read-only</v-chip>
-            </v-col>
-          </v-row>
-        </v-form>
-      </template>
-    </div>
-  </v-sheet>
-</template>
-
-<script setup>
-import { computed, reactive } from "vue";
-import { ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/kernel/shared/support/visibility";
-import { WORKSPACES_TRANSPORT } from "@jskit-ai/workspaces-core/shared/jsonApiTransports";
-import { workspaceResource } from "@jskit-ai/workspaces-core/shared/resources/workspaceResource";
-import { useAddEdit } from "@jskit-ai/users-web/client/composables/useAddEdit";
-import { buildWorkspaceQueryKey } from "../support/workspaceQueryKeys.js";
-
-const emit = defineEmits(["saved"]);
-
-const workspaceProfileForm = reactive({
-  name: "",
-  avatarUrl: ""
-});
-
-const addEdit = useAddEdit({
-  ownershipFilter: ROUTE_VISIBILITY_WORKSPACE,
-  resource: workspaceResource,
-  apiSuffix: "/",
-  queryKeyFactory: (surfaceId = "", scopeParamValue = "") =>
-    buildWorkspaceQueryKey("profile", surfaceId, scopeParamValue),
-  viewPermissions: ["workspace.settings.view", "workspace.settings.update"],
-  savePermissions: ["workspace.settings.update"],
-  transport: WORKSPACES_TRANSPORT,
-  placementSource: "workspaces-web.workspace-profile-view",
-  fallbackLoadError: "Unable to load workspace profile.",
-  fieldErrorKeys: ["name", "avatarUrl"],
-  model: workspaceProfileForm,
-  input: workspaceResource.operations.patch.body,
-  mapLoadedToModel: (model, payload = {}) => {
-    model.name = String(payload?.name || "");
-    model.avatarUrl = String(payload?.avatarUrl || "");
-  },
-  buildRawPayload: (model) => ({
-    name: model.name,
-    avatarUrl: model.avatarUrl
-  }),
-  onSaveSuccess: async () => {
-    emit("saved");
-  }
-});
-
-const showSkeleton = computed(() => Boolean(addEdit.isInitialLoading));
-</script>
-
-<style scoped>
-.workspace-profile-panel {
-  overflow: hidden;
-}
-
-.workspace-profile-panel__header {
-  padding: 1rem 1rem 0;
-}
-
-.workspace-profile-panel__title {
-  font-size: 1rem;
-  font-weight: 650;
-  line-height: 1.2;
-  margin: 0 0 0.25rem;
-}
-
-.workspace-profile-panel__body {
-  padding: 1rem;
-}
-
-.workspace-profile-panel__state {
-  margin-inline: auto;
-  max-width: 30rem;
-  padding: 1.5rem 1rem;
-  text-align: center;
-}
-
-@media (max-width: 640px) {
-  .workspace-profile-panel__body :deep(.v-btn) {
-    min-height: 48px;
-  }
-}
-</style>

package/src/client/components/WorkspaceSettingsClientElement.vue

@@ -1,102 +0,0 @@
-<template>
-  <section class="workspace-settings-client-element d-flex flex-column ga-4">
-    <WorkspaceProfileClientElement @saved="handleFormSaved" />
-    <WorkspaceSettingsFieldsClientElement @saved="handleFormSaved" />
-  </section>
-</template>
-
-<script setup>
-import { computed, watch } from "vue";
-import { useWebPlacementContext } from "@jskit-ai/shell-web/client/placement";
-import { useBootstrapQuery } from "../composables/useBootstrapQuery.js";
-import { useWorkspaceRouteContext } from "../composables/useWorkspaceRouteContext.js";
-import { findWorkspaceBySlug, normalizeWorkspaceList } from "../lib/bootstrap.js";
-import { arePermissionListsEqual, normalizePermissionList } from "@jskit-ai/users-web/client/lib/permissions";
-import WorkspaceProfileClientElement from "./WorkspaceProfileClientElement.vue";
-import WorkspaceSettingsFieldsClientElement from "./WorkspaceSettingsFieldsClientElement.vue";
-
-const routeContext = useWorkspaceRouteContext();
-const { context: placementContext, mergeContext: mergePlacementContext } = useWebPlacementContext();
-const bootstrapQuery = useBootstrapQuery({
-  workspaceSlug: routeContext.workspaceSlugFromRoute,
-  enabled: computed(() => Boolean(routeContext.workspaceSlugFromRoute.value))
-});
-
-function toWorkspaceEntrySnapshot(entry = null) {
-  if (!entry || typeof entry !== "object") {
-    return "";
-  }
-
-  const normalizedEntry = normalizeWorkspaceList([entry])[0] || null;
-  if (!normalizedEntry) {
-    return "";
-  }
-
-  return JSON.stringify(normalizedEntry);
-}
-
-function toWorkspaceListSnapshot(list = []) {
-  return JSON.stringify(normalizeWorkspaceList(list));
-}
-
-function toWorkspaceSettingsSnapshot(settings = null) {
-  if (!settings || typeof settings !== "object") {
-    return "";
-  }
-
-  return JSON.stringify(settings);
-}
-
-function applyShellWorkspaceContext(payload = {}) {
-  const availableWorkspaces = normalizeWorkspaceList(payload?.workspaces);
-  const currentWorkspace = findWorkspaceBySlug(
-    availableWorkspaces,
-    routeContext.workspaceSlugFromRoute.value
-  );
-  const permissions = normalizePermissionList(payload?.permissions);
-  const currentContext =
-    placementContext.value && typeof placementContext.value === "object"
-      ? placementContext.value
-      : {};
-  const currentPermissions = normalizePermissionList(currentContext.permissions);
-  const samePermissions = arePermissionListsEqual(permissions, currentPermissions);
-  const sameWorkspace = toWorkspaceEntrySnapshot(currentContext.workspace) === toWorkspaceEntrySnapshot(currentWorkspace);
-  const sameWorkspaces =
-    toWorkspaceListSnapshot(currentContext.workspaces) === toWorkspaceListSnapshot(availableWorkspaces);
-  const sameWorkspaceSettings =
-    toWorkspaceSettingsSnapshot(currentContext.workspaceSettings) ===
-    toWorkspaceSettingsSnapshot(payload?.workspaceSettings);
-
-  if (samePermissions && sameWorkspace && sameWorkspaces && sameWorkspaceSettings) {
-    return;
-  }
-
-  mergePlacementContext(
-    {
-      workspace: currentWorkspace,
-      workspaceSettings:
-        payload?.workspaceSettings && typeof payload.workspaceSettings === "object"
-          ? payload.workspaceSettings
-          : null,
-      workspaces: availableWorkspaces,
-      permissions
-    },
-    "workspaces-web.workspace-settings-view"
-  );
-}
-
-watch(
-  () => bootstrapQuery.query.data.value,
-  (payload) => {
-    if (!payload || typeof payload !== "object") {
-      return;
-    }
-    applyShellWorkspaceContext(payload);
-  },
-  { immediate: true }
-);
-
-async function handleFormSaved() {
-  await bootstrapQuery.query.refetch();
-}
-</script>

package/src/client/components/WorkspaceSettingsFieldsClientElement.vue

@@ -1,304 +0,0 @@
-<template>
-  <v-sheet rounded="lg" border class="workspace-settings-panel">
-    <header class="workspace-settings-panel__header">
-      <h2 class="workspace-settings-panel__title">Workspace settings</h2>
-      <p class="text-body-2 text-medium-emphasis mb-0">These values apply to everyone in this workspace.</p>
-    </header>
-
-    <div class="workspace-settings-panel__body">
-      <template v-if="showSkeleton">
-        <v-skeleton-loader type="text@2, list-item-two-line@4, button" />
-      </template>
-
-      <div v-else-if="addEdit.loadError" class="workspace-settings-panel__state">
-        <p class="text-body-2 text-medium-emphasis mb-4">{{ addEdit.loadError }}</p>
-        <v-btn
-          v-if="addEdit.canRetryLoad"
-          color="primary"
-          variant="tonal"
-          :loading="addEdit.isFetching"
-          @click="addEdit.refresh"
-        >
-          Retry
-        </v-btn>
-      </div>
-
-      <p v-else-if="!addEdit.canView" class="text-body-2 text-medium-emphasis mb-4">
-        You do not have permission to view workspace settings.
-      </p>
-
-      <template v-else>
-        <v-form @submit.prevent="addEdit.submit" novalidate>
-          <v-progress-linear v-if="addEdit.isRefetching" indeterminate class="mb-4" />
-          <v-row>
-            <v-col cols="12">
-              <div class="text-subtitle-2 mb-2">Theme colors</div>
-              <v-row dense class="mb-2">
-                <v-col cols="12">
-                  <div class="text-caption text-medium-emphasis mb-2">Light palette</div>
-                </v-col>
-                <v-col cols="12" md="3">
-                  <v-text-field
-                    v-model="workspaceSettingsForm.lightPrimaryColor"
-                    label="Primary"
-                    type="color"
-                    variant="outlined"
-                    density="comfortable"
-                    :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                    :error-messages="addEdit.fieldErrors.lightPrimaryColor ? [addEdit.fieldErrors.lightPrimaryColor] : []"
-                  />
-                </v-col>
-
-                <v-col cols="12" md="3">
-                  <v-text-field
-                    v-model="workspaceSettingsForm.lightSecondaryColor"
-                    label="Secondary"
-                    type="color"
-                    variant="outlined"
-                    density="comfortable"
-                    :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                    :error-messages="
-                      addEdit.fieldErrors.lightSecondaryColor ? [addEdit.fieldErrors.lightSecondaryColor] : []
-                    "
-                  />
-                </v-col>
-
-                <v-col cols="12" md="3">
-                  <v-text-field
-                    v-model="workspaceSettingsForm.lightSurfaceColor"
-                    label="Surface"
-                    type="color"
-                    variant="outlined"
-                    density="comfortable"
-                    :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                    :error-messages="addEdit.fieldErrors.lightSurfaceColor ? [addEdit.fieldErrors.lightSurfaceColor] : []"
-                  />
-                </v-col>
-
-                <v-col cols="12" md="3">
-                  <v-text-field
-                    v-model="workspaceSettingsForm.lightSurfaceVariantColor"
-                    label="Surface variant"
-                    type="color"
-                    variant="outlined"
-                    density="comfortable"
-                    :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                    :error-messages="
-                      addEdit.fieldErrors.lightSurfaceVariantColor ? [addEdit.fieldErrors.lightSurfaceVariantColor] : []
-                    "
-                  />
-                </v-col>
-              </v-row>
-
-              <v-row dense>
-                <v-col cols="12">
-                  <div class="text-caption text-medium-emphasis mb-2">Dark palette</div>
-                </v-col>
-                <v-col cols="12" md="3">
-                  <v-text-field
-                    v-model="workspaceSettingsForm.darkPrimaryColor"
-                    label="Primary"
-                    type="color"
-                    variant="outlined"
-                    density="comfortable"
-                    :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                    :error-messages="addEdit.fieldErrors.darkPrimaryColor ? [addEdit.fieldErrors.darkPrimaryColor] : []"
-                  />
-                </v-col>
-
-                <v-col cols="12" md="3">
-                  <v-text-field
-                    v-model="workspaceSettingsForm.darkSecondaryColor"
-                    label="Secondary"
-                    type="color"
-                    variant="outlined"
-                    density="comfortable"
-                    :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                    :error-messages="addEdit.fieldErrors.darkSecondaryColor ? [addEdit.fieldErrors.darkSecondaryColor] : []"
-                  />
-                </v-col>
-
-                <v-col cols="12" md="3">
-                  <v-text-field
-                    v-model="workspaceSettingsForm.darkSurfaceColor"
-                    label="Surface"
-                    type="color"
-                    variant="outlined"
-                    density="comfortable"
-                    :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                    :error-messages="addEdit.fieldErrors.darkSurfaceColor ? [addEdit.fieldErrors.darkSurfaceColor] : []"
-                  />
-                </v-col>
-
-                <v-col cols="12" md="3">
-                  <v-text-field
-                    v-model="workspaceSettingsForm.darkSurfaceVariantColor"
-                    label="Surface variant"
-                    type="color"
-                    variant="outlined"
-                    density="comfortable"
-                    :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                    :error-messages="
-                      addEdit.fieldErrors.darkSurfaceVariantColor ? [addEdit.fieldErrors.darkSurfaceVariantColor] : []
-                    "
-                  />
-                </v-col>
-              </v-row>
-            </v-col>
-
-            <v-col cols="12" md="6" class="d-flex align-center">
-              <v-switch
-                v-model="workspaceSettingsForm.invitesEnabled"
-                color="primary"
-                hide-details
-                label="Enable invites"
-                :disabled="!addEdit.canSave || !workspaceSettingsForm.invitesAvailable || addEdit.isSaving || addEdit.isRefetching"
-              />
-            </v-col>
-
-            <v-col cols="12" class="d-flex align-center justify-end ga-3">
-              <v-btn
-                v-if="addEdit.canSave"
-                type="submit"
-                color="primary"
-                :loading="addEdit.isSaving"
-                :disabled="addEdit.isInitialLoading || addEdit.isRefetching"
-              >
-                Save workspace settings
-              </v-btn>
-              <v-chip v-else color="secondary" label>Read-only</v-chip>
-            </v-col>
-          </v-row>
-        </v-form>
-      </template>
-    </div>
-  </v-sheet>
-</template>
-
-<script setup>
-import { computed, reactive } from "vue";
-import { ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/kernel/shared/support/visibility";
-import { WORKSPACE_SETTINGS_TRANSPORT } from "@jskit-ai/workspaces-core/shared/jsonApiTransports";
-import { workspaceSettingsResource } from "@jskit-ai/workspaces-core/shared/resources/workspaceSettingsResource";
-import {
-  DEFAULT_WORKSPACE_DARK_PALETTE,
-  DEFAULT_WORKSPACE_LIGHT_PALETTE,
-  resolveWorkspaceThemePalettes
-} from "@jskit-ai/workspaces-core/shared/settings";
-import { useAddEdit } from "@jskit-ai/users-web/client/composables/useAddEdit";
-import { useWorkspaceRouteContext } from "../composables/useWorkspaceRouteContext.js";
-import { createWorkspaceRealtimeMatcher } from "../support/realtimeWorkspace.js";
-import { buildWorkspaceQueryKey } from "../support/workspaceQueryKeys.js";
-
-const emit = defineEmits(["saved"]);
-
-const workspaceSettingsForm = reactive({
-  lightPrimaryColor: DEFAULT_WORKSPACE_LIGHT_PALETTE.color,
-  lightSecondaryColor: DEFAULT_WORKSPACE_LIGHT_PALETTE.secondaryColor,
-  lightSurfaceColor: DEFAULT_WORKSPACE_LIGHT_PALETTE.surfaceColor,
-  lightSurfaceVariantColor: DEFAULT_WORKSPACE_LIGHT_PALETTE.surfaceVariantColor,
-  darkPrimaryColor: DEFAULT_WORKSPACE_DARK_PALETTE.color,
-  darkSecondaryColor: DEFAULT_WORKSPACE_DARK_PALETTE.secondaryColor,
-  darkSurfaceColor: DEFAULT_WORKSPACE_DARK_PALETTE.surfaceColor,
-  darkSurfaceVariantColor: DEFAULT_WORKSPACE_DARK_PALETTE.surfaceVariantColor,
-  invitesEnabled: false,
-  invitesAvailable: false
-});
-
-const routeContext = useWorkspaceRouteContext();
-const matchesWorkspaceRealtime = createWorkspaceRealtimeMatcher(routeContext.workspaceSlugFromRoute);
-
-const addEdit = useAddEdit({
-  ownershipFilter: ROUTE_VISIBILITY_WORKSPACE,
-  resource: workspaceSettingsResource,
-  apiSuffix: "/settings",
-  queryKeyFactory: (surfaceId = "", scopeParamValue = "") =>
-    buildWorkspaceQueryKey("settings", surfaceId, scopeParamValue),
-  viewPermissions: ["workspace.settings.view", "workspace.settings.update"],
-  savePermissions: ["workspace.settings.update"],
-  transport: WORKSPACE_SETTINGS_TRANSPORT,
-  placementSource: "workspaces-web.workspace-settings-view",
-  fallbackLoadError: "Unable to load workspace settings.",
-  fieldErrorKeys: [
-    "lightPrimaryColor",
-    "lightSecondaryColor",
-    "lightSurfaceColor",
-    "lightSurfaceVariantColor",
-    "darkPrimaryColor",
-    "darkSecondaryColor",
-    "darkSurfaceColor",
-    "darkSurfaceVariantColor"
-  ],
-  realtime: {
-    event: "workspace.settings.changed",
-    matches: matchesWorkspaceRealtime
-  },
-  model: workspaceSettingsForm,
-  input: workspaceSettingsResource.operations.patch.body,
-  mapLoadedToModel: (model, payload = {}) => {
-    const settings = payload?.settings && typeof payload.settings === "object" ? payload.settings : {};
-    const normalizedTheme = resolveWorkspaceThemePalettes(settings);
-
-    model.lightPrimaryColor = normalizedTheme.light.color;
-    model.lightSecondaryColor = normalizedTheme.light.secondaryColor;
-    model.lightSurfaceColor = normalizedTheme.light.surfaceColor;
-    model.lightSurfaceVariantColor = normalizedTheme.light.surfaceVariantColor;
-    model.darkPrimaryColor = normalizedTheme.dark.color;
-    model.darkSecondaryColor = normalizedTheme.dark.secondaryColor;
-    model.darkSurfaceColor = normalizedTheme.dark.surfaceColor;
-    model.darkSurfaceVariantColor = normalizedTheme.dark.surfaceVariantColor;
-    model.invitesEnabled = settings.invitesEnabled !== false;
-    model.invitesAvailable = settings.invitesAvailable !== false;
-  },
-  buildRawPayload: (model) => ({
-    lightPrimaryColor: model.lightPrimaryColor,
-    lightSecondaryColor: model.lightSecondaryColor,
-    lightSurfaceColor: model.lightSurfaceColor,
-    lightSurfaceVariantColor: model.lightSurfaceVariantColor,
-    darkPrimaryColor: model.darkPrimaryColor,
-    darkSecondaryColor: model.darkSecondaryColor,
-    darkSurfaceColor: model.darkSurfaceColor,
-    darkSurfaceVariantColor: model.darkSurfaceVariantColor,
-    invitesEnabled: model.invitesEnabled
-  }),
-  onSaveSuccess: async () => {
-    emit("saved");
-  }
-});
-
-const showSkeleton = computed(() => Boolean(addEdit.isInitialLoading));
-</script>
-
-<style scoped>
-.workspace-settings-panel {
-  overflow: hidden;
-}
-
-.workspace-settings-panel__header {
-  padding: 1rem 1rem 0;
-}
-
-.workspace-settings-panel__title {
-  font-size: 1rem;
-  font-weight: 650;
-  line-height: 1.2;
-  margin: 0 0 0.25rem;
-}
-
-.workspace-settings-panel__body {
-  padding: 1rem;
-}
-
-.workspace-settings-panel__state {
-  margin-inline: auto;
-  max-width: 30rem;
-  padding: 1.5rem 1rem;
-  text-align: center;
-}
-
-@media (max-width: 640px) {
-  .workspace-settings-panel__body :deep(.v-btn) {
-    min-height: 48px;
-  }
-}
-</style>

package/src/client/composables/useBootstrapQuery.js

@@ -1,52 +0,0 @@
-import {
-  computed
-} from "vue";
-import { useQuery } from "@tanstack/vue-query";
-import { normalizeQueryToken } from "@jskit-ai/kernel/shared/support/normalize";
-import { workspacesWebHttpClient } from "../lib/httpClient.js";
-import { buildBootstrapApiPath } from "../lib/bootstrap.js";
-import { resolveEnabledRef, resolveTextRef } from "./support/refValueHelpers.js";
-
-const DEFAULT_BOOTSTRAP_STALE_TIME_MS = 60_000;
-
-function normalizeStaleTime(value, fallback = DEFAULT_BOOTSTRAP_STALE_TIME_MS) {
-  const parsed = Number(value);
-  if (!Number.isFinite(parsed) || parsed < 0) {
-    return fallback;
-  }
-  return parsed;
-}
-
-function useBootstrapQuery({
-  workspaceSlug = "",
-  enabled = true,
-  staleTime = DEFAULT_BOOTSTRAP_STALE_TIME_MS,
-  refetchOnMount = false,
-  refetchOnWindowFocus = false
-} = {}) {
-  const normalizedWorkspaceSlug = computed(() => resolveTextRef(workspaceSlug));
-  const queryKey = computed(() => ["workspaces-web", "bootstrap", normalizeQueryToken(normalizedWorkspaceSlug.value)]);
-  const bootstrapPath = computed(() => buildBootstrapApiPath(normalizedWorkspaceSlug.value));
-  const queryEnabled = computed(() => resolveEnabledRef(enabled));
-  const queryStaleTime = normalizeStaleTime(staleTime, DEFAULT_BOOTSTRAP_STALE_TIME_MS);
-
-  const query = useQuery({
-    queryKey,
-    queryFn: () =>
-      workspacesWebHttpClient.request(bootstrapPath.value, {
-        method: "GET"
-      }),
-    enabled: queryEnabled,
-    staleTime: queryStaleTime,
-    refetchOnMount,
-    refetchOnWindowFocus
-  });
-
-  return Object.freeze({
-    query,
-    queryKey,
-    workspaceSlug: normalizedWorkspaceSlug
-  });
-}
-
-export { useBootstrapQuery };