@jskit-ai/users-web 0.1.4

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

@@ -0,0 +1,94 @@
+<script setup>
+const props = defineProps({
+  runtime: {
+    type: Object,
+    required: true
+  }
+});
+
+const profile = props.runtime.profile;
+</script>
+
+<template>
+  <v-card rounded="lg" elevation="0" border>
+    <v-card-item>
+      <v-card-title class="text-subtitle-1">Profile</v-card-title>
+    </v-card-item>
+    <v-divider />
+    <v-card-text>
+      <v-form @submit.prevent="profile.submit" novalidate>
+        <v-row class="mb-2">
+          <v-col cols="12" md="4" class="d-flex flex-column align-center justify-center">
+            <v-avatar :size="profile.avatar.size" color="surface-variant" rounded="circle" class="mb-3">
+              <v-img v-if="profile.avatar.effectiveUrl" :src="profile.avatar.effectiveUrl" cover />
+              <span v-else class="text-h6">{{ profile.initials.value }}</span>
+            </v-avatar>
+            <div class="text-caption text-medium-emphasis">Preview size: {{ profile.avatar.size }} px</div>
+          </v-col>
+
+          <v-col cols="12" md="8">
+            <div class="d-flex flex-wrap ga-2 mb-2">
+              <v-btn
+                variant="tonal"
+                color="secondary"
+                :disabled="profile.isSaving.value || profile.isDeletingAvatar.value || profile.isRefreshing.value"
+                @click="profile.openAvatarEditor"
+              >
+                Replace avatar
+              </v-btn>
+              <v-btn
+                v-if="profile.avatar.hasUploadedAvatar"
+                variant="text"
+                color="error"
+                :loading="profile.isDeletingAvatar.value"
+                :disabled="profile.isSaving.value || profile.isRefreshing.value"
+                @click="profile.removeAvatar"
+              >
+                Remove avatar
+              </v-btn>
+            </div>
+
+            <div v-if="profile.selectedAvatarFileName.value" class="text-caption text-medium-emphasis mb-2">
+              Selected file: {{ profile.selectedAvatarFileName.value }}
+            </div>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="profile.form.displayName"
+              label="Display name"
+              variant="outlined"
+              density="comfortable"
+              autocomplete="nickname"
+              :readonly="profile.isSaving.value || profile.isRefreshing.value"
+              :error-messages="profile.fieldErrors.displayName ? [profile.fieldErrors.displayName] : []"
+            />
+          </v-col>
+
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="profile.form.email"
+              label="Email"
+              variant="outlined"
+              density="comfortable"
+              readonly
+              hint="Managed by Supabase Auth"
+              persistent-hint
+            />
+          </v-col>
+        </v-row>
+
+        <v-btn
+          type="submit"
+          color="primary"
+          :loading="profile.isSaving.value"
+          :disabled="profile.isDeletingAvatar.value || profile.isRefreshing.value"
+        >
+          Save profile
+        </v-btn>
+      </v-form>
+    </v-card-text>
+  </v-card>
+</template>

package/templates/src/composables/useWorkspaceNotFoundState.js

@@ -0,0 +1,48 @@
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useWebPlacementContext } from "@jskit-ai/shell-web/client/placement";
+
+const STATUS_MESSAGES = {
+  not_found: "The requested workspace was not found.",
+  forbidden: "You do not have access to this workspace.",
+  unauthenticated: "You need to sign in to access this workspace.",
+  error: "Workspace data could not be loaded right now."
+};
+
+function useWorkspaceNotFoundState() {
+  const route = useRoute();
+  const { context: placementContext } = useWebPlacementContext();
+
+  const routeWorkspaceSlug = computed(() =>
+    String(route?.params?.workspaceSlug || "")
+      .trim()
+      .toLowerCase()
+  );
+
+  const workspaceBootstrapStatus = computed(() => {
+    const statuses =
+      placementContext.value?.workspaceBootstrapStatuses &&
+      typeof placementContext.value.workspaceBootstrapStatuses === "object"
+        ? placementContext.value.workspaceBootstrapStatuses
+        : {};
+    return String(statuses[routeWorkspaceSlug.value] || "")
+      .trim()
+      .toLowerCase();
+  });
+
+  const workspaceUnavailable = computed(
+    () => Boolean(workspaceBootstrapStatus.value) && workspaceBootstrapStatus.value !== "resolved"
+  );
+  const workspaceUnavailableMessage = computed(
+    () => STATUS_MESSAGES[workspaceBootstrapStatus.value] || "Workspace is currently unavailable."
+  );
+
+  return Object.freeze({
+    routeWorkspaceSlug,
+    workspaceBootstrapStatus,
+    workspaceUnavailable,
+    workspaceUnavailableMessage
+  });
+}
+
+export { useWorkspaceNotFoundState };

package/templates/src/pages/account/index.vue

@@ -0,0 +1,17 @@
+<route lang="json">
+{
+  "meta": {
+    "guard": {
+      "policy": "authenticated"
+    }
+  }
+}
+</route>
+
+<template>
+  <AccountSettingsClientElement />
+</template>
+
+<script setup>
+import AccountSettingsClientElement from "../../components/account/settings/AccountSettingsClientElement.vue";
+</script>

package/templates/src/pages/admin/members/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <WorkspaceMembersClientElement />
+</template>
+
+<script setup>
+import WorkspaceMembersClientElement from "@jskit-ai/users-web/client/components/WorkspaceMembersClientElement";
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <section class="settings-page">
+    <ShellOutlet host="workspace-settings" position="forms" />
+  </section>
+</template>
+
+<script setup>
+import ShellOutlet from "@jskit-ai/shell-web/client/components/ShellOutlet";
+</script>
+
+<style scoped>
+.settings-page {
+  display: grid;
+  gap: 1rem;
+}
+</style>

package/templates/src/pages/console/settings/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <section class="settings-page">
+    <ShellOutlet host="console-settings" position="forms" />
+  </section>
+</template>
+
+<script setup>
+import ShellOutlet from "@jskit-ai/shell-web/client/components/ShellOutlet";
+</script>
+
+<style scoped>
+.settings-page {
+  display: grid;
+  gap: 1rem;
+}
+</style>

package/templates/src/surfaces/admin/index.vue

@@ -0,0 +1,29 @@
+<script setup>
+import WorkspaceNotFoundCard from "@/components/WorkspaceNotFoundCard.vue";
+import { useWorkspaceNotFoundState } from "@/composables/useWorkspaceNotFoundState";
+
+const { workspaceUnavailable, workspaceUnavailableMessage } = useWorkspaceNotFoundState();
+</script>
+
+<template>
+  <WorkspaceNotFoundCard
+    v-if="workspaceUnavailable"
+    :message="workspaceUnavailableMessage"
+    surface-label="Admin"
+  />
+  <v-card v-else rounded="lg" elevation="1" border>
+    <v-card-item>
+      <template #prepend>
+        <v-chip color="primary" size="small" label>Admin</v-chip>
+      </template>
+      <v-card-title class="text-h5">Workspace Admin</v-card-title>
+      <v-card-subtitle>Privileged workspace workflows.</v-card-subtitle>
+    </v-card-item>
+    <v-divider />
+    <v-card-text class="d-flex flex-column ga-4">
+      <p class="text-medium-emphasis mb-0">
+        Use this area for workspace administration modules.
+      </p>
+    </v-card-text>
+  </v-card>
+</template>

package/templates/src/surfaces/admin/root.vue

@@ -0,0 +1,20 @@
+<route lang="json">
+{
+  "meta": {
+    "jskit": {
+      "surface": "admin"
+    }
+  }
+}
+</route>
+
+<script setup>
+import ShellLayout from "@/components/ShellLayout.vue";
+import { RouterView } from "vue-router";
+</script>
+
+<template>
+  <ShellLayout title="" subtitle="">
+    <RouterView />
+  </ShellLayout>
+</template>

package/templates/src/surfaces/app/index.vue

@@ -0,0 +1,27 @@
+<script setup>
+import WorkspaceNotFoundCard from "@/components/WorkspaceNotFoundCard.vue";
+import { useWorkspaceNotFoundState } from "@/composables/useWorkspaceNotFoundState";
+
+const { workspaceUnavailable, workspaceUnavailableMessage } = useWorkspaceNotFoundState();
+</script>
+
+<template>
+  <WorkspaceNotFoundCard
+    v-if="workspaceUnavailable"
+    :message="workspaceUnavailableMessage"
+    surface-label="App"
+  />
+  <v-card v-else rounded="lg" elevation="1" border>
+    <v-card-item>
+      <template #prepend>
+        <v-chip color="primary" size="small" label>App</v-chip>
+      </template>
+      <v-card-title class="text-h5">Workspace Home</v-card-title>
+      <v-card-subtitle>Primary in-workspace surface.</v-card-subtitle>
+    </v-card-item>
+    <v-divider />
+    <v-card-text class="d-flex flex-column ga-4">
+      <p class="text-medium-emphasis mb-0">Replace this page with your workspace dashboard modules.</p>
+    </v-card-text>
+  </v-card>
+</template>

package/templates/src/surfaces/app/root.vue

@@ -0,0 +1,20 @@
+<route lang="json">
+{
+  "meta": {
+    "jskit": {
+      "surface": "app"
+    }
+  }
+}
+</route>
+
+<script setup>
+import ShellLayout from "@/components/ShellLayout.vue";
+import { RouterView } from "vue-router";
+</script>
+
+<template>
+  <ShellLayout title="" subtitle="">
+    <RouterView />
+  </ShellLayout>
+</template>

package/test/bootstrap.test.js

@@ -0,0 +1,38 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { resolvePlacementUserFromBootstrapPayload } from "../src/client/lib/bootstrap.js";
+
+test("resolvePlacementUserFromBootstrapPayload returns null for anonymous sessions", () => {
+  assert.equal(
+    resolvePlacementUserFromBootstrapPayload({
+      session: {
+        authenticated: false
+      }
+    }),
+    null
+  );
+});
+
+test("resolvePlacementUserFromBootstrapPayload maps profile fields used by placement avatar widget", () => {
+  const user = resolvePlacementUserFromBootstrapPayload({
+    session: {
+      authenticated: true,
+      userId: 42
+    },
+    profile: {
+      displayName: "Ada Lovelace",
+      email: "ADA@EXAMPLE.COM",
+      avatar: {
+        effectiveUrl: "https://cdn.example.com/ada.png"
+      }
+    }
+  });
+
+  assert.deepEqual(user, {
+    id: 42,
+    displayName: "Ada Lovelace",
+    name: "Ada Lovelace",
+    email: "ada@example.com",
+    avatarUrl: "https://cdn.example.com/ada.png"
+  });
+});