@commonpub/layer 0.81.0 → 0.83.0

package/layouts/default.vue

@@ -71,6 +71,15 @@ function handleGlobalKeydown(e: KeyboardEvent): void {
   }
 }
 
+const avatarBtnRef = ref<HTMLButtonElement | null>(null);
+
+// Disclosure menu: Esc closes and returns focus to the trigger.
+function closeUserMenu(): void {
+  if (!userMenuOpen.value) return;
+  userMenuOpen.value = false;
+  avatarBtnRef.value?.focus();
+}
+
 // Close menus on click outside
 function handleClickOutside(e: MouseEvent): void {
   const target = e.target as HTMLElement;
@@ -162,32 +171,32 @@ const userUsername = computed(() => user.value?.username ?? '');
             <i class="fa-solid fa-plus"></i> <span class="cpub-new-text">New</span>
           </NuxtLink>
           <div class="cpub-user-menu-wrapper">
-            <button class="cpub-avatar-btn" aria-label="User menu" :aria-expanded="userMenuOpen" @click.stop="userMenuOpen = !userMenuOpen">
+            <button ref="avatarBtnRef" class="cpub-avatar-btn" aria-label="User menu" :aria-expanded="userMenuOpen" @click.stop="userMenuOpen = !userMenuOpen" @keydown.esc="closeUserMenu">
               <span class="cpub-user-avatar">
                 <img v-if="userImage" :src="userImage" :alt="user?.name || user?.username" class="cpub-user-avatar-img" />
                 <span v-else>{{ userInitial }}</span>
               </span>
             </button>
-            <div v-if="userMenuOpen" class="cpub-user-dropdown" role="menu">
+            <div v-if="userMenuOpen" class="cpub-user-dropdown" @keydown.esc="closeUserMenu">
               <!-- Mobile-only: messages/notifications relocated here from
                    the top bar (hidden on desktop, which keeps the icons). -->
-              <NuxtLink to="/messages" class="cpub-dropdown-item cpub-dropdown-item--mobile" role="menuitem" @click="userMenuOpen = false">
+              <NuxtLink to="/messages" class="cpub-dropdown-item cpub-dropdown-item--mobile" @click="userMenuOpen = false">
                 <i class="fa-solid fa-envelope"></i> Messages
                 <span v-if="unreadMessages > 0" class="cpub-dropdown-count">{{ unreadMessages > 99 ? '99+' : unreadMessages }}</span>
               </NuxtLink>
-              <NuxtLink to="/notifications" class="cpub-dropdown-item cpub-dropdown-item--mobile" role="menuitem" @click="userMenuOpen = false">
+              <NuxtLink to="/notifications" class="cpub-dropdown-item cpub-dropdown-item--mobile" @click="userMenuOpen = false">
                 <i class="fa-solid fa-bell"></i> Notifications
                 <span v-if="unreadCount > 0" class="cpub-dropdown-count">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
               </NuxtLink>
               <div class="cpub-dropdown-divider cpub-dropdown-item--mobile" />
-              <NuxtLink :to="`/u/${userUsername}`" class="cpub-dropdown-item" role="menuitem" @click="userMenuOpen = false"><i class="fa-solid fa-user"></i> Profile</NuxtLink>
-              <NuxtLink to="/dashboard" class="cpub-dropdown-item" role="menuitem" @click="userMenuOpen = false"><i class="fa-solid fa-gauge"></i> Dashboard</NuxtLink>
-              <NuxtLink to="/settings" class="cpub-dropdown-item" role="menuitem" @click="userMenuOpen = false"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>
-              <button class="cpub-dropdown-item" role="menuitem" @click="setDarkMode(!isDark)">
+              <NuxtLink :to="`/u/${userUsername}`" class="cpub-dropdown-item" @click="userMenuOpen = false"><i class="fa-solid fa-user"></i> Profile</NuxtLink>
+              <NuxtLink to="/dashboard" class="cpub-dropdown-item" @click="userMenuOpen = false"><i class="fa-solid fa-gauge"></i> Dashboard</NuxtLink>
+              <NuxtLink to="/settings" class="cpub-dropdown-item" @click="userMenuOpen = false"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>
+              <button class="cpub-dropdown-item" @click="setDarkMode(!isDark)">
                 <i :class="isDark ? 'fa-solid fa-sun' : 'fa-solid fa-moon'"></i> {{ isDark ? 'Light mode' : 'Dark mode' }}
               </button>
               <div class="cpub-dropdown-divider" />
-              <button class="cpub-dropdown-item" role="menuitem" @click="handleSignOut"><i class="fa-solid fa-right-from-bracket"></i> Sign out</button>
+              <button class="cpub-dropdown-item" @click="handleSignOut"><i class="fa-solid fa-right-from-bracket"></i> Sign out</button>
             </div>
           </div>
         </template>

package/nuxt.config.ts

@@ -100,6 +100,8 @@ export default defineNuxtConfig({
         video: true,
         contests: false,
         contestStageSubmissions: true,
+        contestProposals: false,
+        contestPii: false,
         events: false,
         learning: true,
         explainers: true,
@@ -117,6 +119,17 @@ export default defineNuxtConfig({
         actAsRegistry: false,
         announceToRegistry: true,
         publicApiMetricsFederation: false,
+        // Nested identity sub-flags must be declared here too, or
+        // NUXT_PUBLIC_FEATURES_IDENTITY_* env overrides silently drop (same
+        // rule as the booleans above). Mirrors @commonpub/config's
+        // IdentityFeatures; all default false.
+        identity: {
+          linkRemoteAccounts: false,
+          signInWithRemote: false,
+          actingAs: false,
+          remoteInteract: false,
+          remotePublish: false,
+        },
       },
       contentTypes: 'project,blog,explainer',
       contestCreation: 'admin',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.81.0",
+  "version": "0.83.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,16 +55,16 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
-    "@commonpub/explainer": "0.7.15",
-    "@commonpub/config": "0.22.1",
+    "@commonpub/config": "0.23.0",
+    "@commonpub/editor": "0.8.0",
+    "@commonpub/explainer": "0.8.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/editor": "0.7.12",
-    "@commonpub/protocol": "0.13.0",
-    "@commonpub/ui": "0.13.1",
+    "@commonpub/protocol": "0.14.0",
     "@commonpub/learning": "0.5.2",
+    "@commonpub/schema": "0.46.0",
+    "@commonpub/server": "2.90.0",
     "@commonpub/theme-studio": "0.6.1",
-    "@commonpub/schema": "0.44.0",
-    "@commonpub/server": "2.88.0"
+    "@commonpub/ui": "0.13.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/[type]/index.vue

@@ -23,7 +23,7 @@ useSeoMeta({
 const sortBy = ref('recent');
 const sortOptions = ['recent', 'popular'] as const;
 
-const { data, pending } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+const { data, pending, error, refresh } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
   query: computed(() => ({
     status: 'published',
     type: contentType.value,
@@ -48,6 +48,11 @@ const { data, pending } = await useFetch<PaginatedResponse<Serialized<ContentLis
     </div>
 
     <p v-if="pending" class="cpub-listing-empty"><i class="fa-solid fa-circle-notch fa-spin"></i> Loading...</p>
+    <div v-else-if="error" class="cpub-fetch-error">
+      <div class="cpub-fetch-error-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
+      <div class="cpub-fetch-error-msg">Failed to load {{ contentType }}s.</div>
+      <button class="cpub-btn cpub-btn-sm" @click="refresh()">Retry</button>
+    </div>
     <div v-else-if="data?.items?.length" class="cpub-listing-grid">
       <ContentCard v-for="item in data.items" :key="item.id" :item="item" />
     </div>

package/pages/admin/api-keys.vue

@@ -6,6 +6,11 @@ definePageMeta({ layout: 'admin', middleware: 'auth' });
 
 useSeoMeta({ title: `API Keys, Admin, ${useSiteName()}` });
 
+// Keys only authenticate when the Public API feature is on (public-api-auth 404s
+// every /api/public/* route otherwise). Surface that so admins don't mint dead keys.
+const { publicApi } = useFeatures();
+const toast = useToast();
+
 interface KeyListResponse {
   items: AdminApiKeyView[];
   total: number;
@@ -122,8 +127,9 @@ async function revoke(id: string, name: string): Promise<void> {
   try {
     await $fetch(`/api/admin/api-keys/${id}`, { method: 'DELETE' });
     await refresh();
+    toast.success(`Revoked "${name}"`);
   } catch {
-    // toast would go here
+    toast.error('Failed to revoke key');
   }
 }
 
@@ -185,12 +191,16 @@ function fmtErrorRate(rate: number): string {
           <input type="checkbox" v-model="includeRevoked" @change="refresh()" />
           Show revoked
         </label>
-        <button class="cpub-btn cpub-btn-primary" @click="showCreate = true">
+        <button v-if="publicApi" class="cpub-btn cpub-btn-primary" @click="showCreate = true">
           <i class="fa-solid fa-plus"></i> New key
         </button>
       </div>
     </header>
 
+    <p v-if="!publicApi" class="cpub-admin-sub" role="status">
+      The Public API feature is disabled, so keys created here will not authenticate. Turn it on in Features to use API keys.
+    </p>
+
     <!-- One-time token reveal -->
     <div v-if="createdKey" class="cpub-key-reveal" role="alert">
       <div class="cpub-key-reveal-head">
@@ -298,7 +308,7 @@ function fmtErrorRate(rate: number): string {
 
     <!-- List -->
     <div v-if="pending" class="cpub-loading">Loading keys...</div>
-    <p v-else-if="listError" class="cpub-form-error">Failed to load keys.</p>
+    <p v-else-if="publicApi && listError" class="cpub-form-error">Failed to load keys.</p>
     <p v-else-if="!data?.items?.length" class="cpub-empty">
       No API keys yet. Create one to start consuming <code>/api/public/v1/*</code>.
     </p>

package/pages/admin/features.vue

@@ -25,6 +25,8 @@ const flagMeta: Record<string, { label: string; description: string; icon: strin
   video: { label: 'Video', description: 'Video content and categories', icon: 'fa-solid fa-video' },
   contests: { label: 'Contests', description: 'Contest system with judging', icon: 'fa-solid fa-trophy' },
   contestStageSubmissions: { label: 'Contest Stage Submissions', description: 'Per-stage submission forms for multi-round contests', icon: 'fa-solid fa-file-pen' },
+  contestProposals: { label: 'Contest Proposals', description: 'Form-first proposal entries with a draft placeholder project', icon: 'fa-solid fa-clipboard-list' },
+  contestPii: { label: 'Contest PII Fields', description: 'Offer personal-data fields (email, address) in submission forms', icon: 'fa-solid fa-user-shield' },
   learning: { label: 'Learning', description: 'Learning paths and courses', icon: 'fa-solid fa-graduation-cap' },
   explainers: { label: 'Explainers', description: 'Interactive explainer modules', icon: 'fa-solid fa-lightbulb' },
   editorial: { label: 'Editorial', description: 'Staff picks and content categories', icon: 'fa-solid fa-pen-fancy' },

package/pages/admin/federation.vue

@@ -57,7 +57,7 @@ async function removeTrusted(domain: string): Promise<void> {
     });
     await refreshTrusted();
   } catch {
-    alert('Failed to remove trusted instance');
+    toast.error('Failed to remove trusted instance');
   }
 }
 

package/pages/admin/layouts/[id].vue

@@ -17,11 +17,13 @@
 import type { LayoutRecord } from '@commonpub/server';
 import { PublishStepError } from '../../../composables/useLayoutEditor';
 import { useLayoutAnnouncer, narrateUndo, narrateRedo, narrateUndoEmpty, narrateRedoEmpty, narrateRowAdded, narrateRowRemoved } from '../../../composables/useLayoutAnnouncer';
-import { useLayoutHistory, addRowCommand, removeRowCommand } from '../../../composables/useLayoutHistory';
+import { useLayoutHistory, addRowCommand, removeRowCommand, insertSectionCommand } from '../../../composables/useLayoutHistory';
 import { useLayoutHotkeys } from '../../../composables/useLayoutHotkeys';
 import { DnDProvider } from '@vue-dnd-kit/core';
 import { useSectionRegistry } from '../../../sections/registry';
 import { useLayoutResize } from '../../../composables/useLayoutResize';
+import { createSectionFromSpec, paletteDragPayload } from '../../../composables/useLayoutDrag';
+import type { SectionDefinition } from '@commonpub/ui';
 
 definePageMeta({
   layout: 'admin',
@@ -163,6 +165,32 @@ function onAddRow(zoneSlug: string): void {
   }));
 }
 
+/**
+ * Keyboard-insert from the palette — WCAG 2.1.1 alternative to drag. Mirrors the
+ * drop path (createSectionFromSpec + push); appends to the last row of the first
+ * populated zone, adding a row if the layout has none. Direct mutation fires the
+ * dirty watcher + autosave, exactly like a drop.
+ */
+function onPaletteInsert(section: SectionDefinition): void {
+  const draft = editor.draft.value;
+  if (!draft || draft.zones.length === 0) return;
+  const zone = draft.zones.find((z) => z.rows.length > 0) ?? draft.zones[0]!;
+  let row = zone.rows[zone.rows.length - 1];
+  // Record each mutation to history so Cmd+Z reverses it and the undo stack
+  // stays in sync with the draft (mirrors onAddRow + the LayoutRow drop path).
+  if (!row) {
+    const position = zone.rows.length;
+    row = { id: crypto.randomUUID(), order: position, config: null, sections: [] };
+    zone.rows.push(row);
+    history.record(addRowCommand({ zoneSlug: zone.zone, position, row, label: `add row to ${zone.zone}` }));
+  }
+  const newSection = createSectionFromSpec(paletteDragPayload(section));
+  const at = row.sections.length;
+  row.sections.push(newSection);
+  history.record(insertSectionCommand({ rowId: row.id, at, section: newSection, label: `insert ${section.type}` }));
+  useLayoutAnnouncer().announce(`Inserted ${section.name} section into ${zone.zone}`);
+}
+
 /**
  * Session 164 polish — Remove row. Confirm before removing rows with
  * sections (destructive intent: section data goes away, only restorable
@@ -702,7 +730,7 @@ async function onConflictForceSave(): Promise<void> {
             :on-add-row="onAddRow"
             :on-remove-row="onRemoveRow"
           />
-          <AdminLayoutsPalette v-show="!chrome.paletteHidden.value" />
+          <AdminLayoutsPalette v-show="!chrome.paletteHidden.value" @insert="onPaletteInsert" />
           <AdminLayoutsInspector
             v-show="!chrome.inspectorHidden.value"
             :draft="editor.draft.value"

package/pages/admin/roles.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import type { RoleWithPermissions } from '@commonpub/server';
+
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+useSeoMeta({ title: () => `Roles, ${useSiteName()}` });
+
+const toast = useToast();
+const { extract: extractError } = useApiError();
+const { rbac: rbacEnabled, features } = useFeatures();
+
+const { data: roles, refresh } = await useFetch<RoleWithPermissions[]>('/api/admin/roles');
+const { data: catalog } = await useFetch<string[]>('/api/admin/permissions');
+
+// --- Master RBAC switch (configure-then-activate) ---
+// Roles can be staged while RBAC is off; flipping the flag activates them
+// instantly (and is a reversible kill-switch). Writes the DB feature override
+// via /api/admin/features (needs `settings.manage`).
+const togglingRbac = ref(false);
+
+async function setRbac(enabled: boolean): Promise<void> {
+  if (
+    enabled &&
+    !confirm(
+      'Enable RBAC now? Role permissions take effect immediately: any user with the staff role becomes a moderator and custom roles activate. Admins keep full access. You can disable it again at any time.',
+    )
+  ) {
+    return;
+  }
+  togglingRbac.value = true;
+  try {
+    await ($fetch as Function)('/api/admin/features', { method: 'PUT', body: { overrides: { rbac: enabled } } });
+    // Update the shared reactive flag state so the banner reflects it at once.
+    features.value = { ...features.value, rbac: enabled };
+    toast.success(enabled ? 'RBAC enabled, role permissions are now live' : 'RBAC disabled, back to admin-only');
+  } catch (err) {
+    toast.error(extractError(err));
+  } finally {
+    togglingRbac.value = false;
+  }
+}
+
+// Group the flat permission catalog by first segment for a tidy editor.
+const grouped = computed<Record<string, string[]>>(() => {
+  const out: Record<string, string[]> = {};
+  for (const key of catalog.value ?? []) {
+    const group = key === '*' ? 'global' : key.includes('.') ? key.slice(0, key.indexOf('.')) : key;
+    (out[group] ??= []).push(key);
+  }
+  return out;
+});
+
+// --- Edit existing role permissions ---
+const editingId = ref<string | null>(null);
+const editPerms = ref<Set<string>>(new Set());
+const editName = ref('');
+const savingEdit = ref(false);
+
+function startEdit(role: RoleWithPermissions): void {
+  editingId.value = role.id;
+  editName.value = role.name;
+  editPerms.value = new Set(role.permissions);
+}
+function cancelEdit(): void {
+  editingId.value = null;
+  editPerms.value = new Set();
+}
+function toggleEditPerm(key: string): void {
+  if (editPerms.value.has(key)) editPerms.value.delete(key);
+  else editPerms.value.add(key);
+  editPerms.value = new Set(editPerms.value);
+}
+async function saveEdit(role: RoleWithPermissions): Promise<void> {
+  savingEdit.value = true;
+  try {
+    await ($fetch as Function)(`/api/admin/roles/${role.id}`, {
+      method: 'PUT',
+      body: { name: editName.value, permissions: [...editPerms.value] },
+    });
+    toast.success('Role updated');
+    cancelEdit();
+    await refresh();
+  } catch (err) {
+    toast.error(extractError(err));
+  } finally {
+    savingEdit.value = false;
+  }
+}
+
+async function removeRole(role: RoleWithPermissions): Promise<void> {
+  if (!confirm(`Delete the "${role.name}" role? Users lose its permissions.`)) return;
+  try {
+    await ($fetch as Function)(`/api/admin/roles/${role.id}`, { method: 'DELETE' });
+    toast.success('Role deleted');
+    await refresh();
+  } catch (err) {
+    toast.error(extractError(err));
+  }
+}
+
+// --- Create a new custom role ---
+const showCreate = ref(false);
+const newKey = ref('');
+const newName = ref('');
+const newDesc = ref('');
+const newPerms = ref<Set<string>>(new Set());
+const creating = ref(false);
+
+function toggleNewPerm(key: string): void {
+  if (newPerms.value.has(key)) newPerms.value.delete(key);
+  else newPerms.value.add(key);
+  newPerms.value = new Set(newPerms.value);
+}
+async function createRole(): Promise<void> {
+  if (!newKey.value || !newName.value) { toast.error('Key and name are required'); return; }
+  creating.value = true;
+  try {
+    await ($fetch as Function)('/api/admin/roles', {
+      method: 'POST',
+      body: { key: newKey.value, name: newName.value, description: newDesc.value || null, permissions: [...newPerms.value] },
+    });
+    toast.success('Role created');
+    showCreate.value = false;
+    newKey.value = ''; newName.value = ''; newDesc.value = ''; newPerms.value = new Set();
+    await refresh();
+  } catch (err) {
+    toast.error(extractError(err));
+  } finally {
+    creating.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-roles">
+    <div class="cpub-roles-head">
+      <h1 class="cpub-admin-title">Roles &amp; Permissions</h1>
+      <button class="cpub-btn cpub-btn-sm" @click="showCreate = !showCreate">
+        <i class="fa-solid fa-plus"></i> New role
+      </button>
+    </div>
+
+    <!-- Master RBAC switch — off: stage roles then activate; on: live + kill-switch. -->
+    <div v-if="!rbacEnabled" class="cpub-rbac-banner cpub-rbac-banner--off">
+      <div class="cpub-rbac-banner-text">
+        <strong>RBAC is off.</strong> These role permissions have no effect yet, the instance runs
+        admin-only. Stage your roles and assignments here, then turn RBAC on to activate them all at once.
+      </div>
+      <button class="cpub-btn cpub-btn-sm" :disabled="togglingRbac" @click="setRbac(true)">
+        <i class="fa-solid fa-toggle-on"></i> {{ togglingRbac ? 'Enabling...' : 'Enable RBAC' }}
+      </button>
+    </div>
+    <div v-else class="cpub-rbac-banner cpub-rbac-banner--on">
+      <div class="cpub-rbac-banner-text">
+        <strong>RBAC is enabled.</strong> Role permissions are live, staff is a moderator and custom
+        roles are active. Admins always keep full access.
+      </div>
+      <button class="cpub-btn cpub-btn-sm cpub-btn-ghost" :disabled="togglingRbac" @click="setRbac(false)">
+        <i class="fa-solid fa-toggle-off"></i> {{ togglingRbac ? 'Disabling...' : 'Disable' }}
+      </button>
+    </div>
+
+    <!-- Create form -->
+    <section v-if="showCreate" class="cpub-role-card cpub-role-create">
+      <h2 class="cpub-role-card-title">New custom role</h2>
+      <div class="cpub-role-fields">
+        <label class="cpub-field">
+          <span class="cpub-field-label">Key</span>
+          <input v-model="newKey" class="cpub-input" placeholder="e.g. moderator" />
+        </label>
+        <label class="cpub-field">
+          <span class="cpub-field-label">Name</span>
+          <input v-model="newName" class="cpub-input" placeholder="e.g. Moderator" />
+        </label>
+      </div>
+      <label class="cpub-field">
+        <span class="cpub-field-label">Description</span>
+        <input v-model="newDesc" class="cpub-input" placeholder="What this role is for" />
+      </label>
+      <div class="cpub-perm-groups">
+        <fieldset v-for="(keys, group) in grouped" :key="group" class="cpub-perm-group">
+          <legend class="cpub-perm-legend">{{ group }}</legend>
+          <label v-for="k in keys" :key="k" class="cpub-perm-check">
+            <input type="checkbox" :checked="newPerms.has(k)" @change="toggleNewPerm(k)" />
+            <span>{{ k }}</span>
+          </label>
+        </fieldset>
+      </div>
+      <div class="cpub-role-actions">
+        <button class="cpub-btn cpub-btn-sm" :disabled="creating" @click="createRole">
+          {{ creating ? 'Creating...' : 'Create role' }}
+        </button>
+        <button class="cpub-btn cpub-btn-sm cpub-btn-ghost" @click="showCreate = false">Cancel</button>
+      </div>
+    </section>
+
+    <!-- Role list -->
+    <div class="cpub-role-list">
+      <div v-for="role in roles ?? []" :key="role.id" class="cpub-role-card">
+        <div class="cpub-role-row">
+          <div class="cpub-role-meta">
+            <span class="cpub-role-name">{{ role.name }}</span>
+            <span class="cpub-role-key">{{ role.key }}</span>
+            <span v-if="role.isSystem" class="cpub-role-badge">system</span>
+          </div>
+          <div class="cpub-role-stats">
+            <span>{{ role.memberCount }} {{ role.memberCount === 1 ? 'user' : 'users' }}</span>
+            <button class="cpub-btn cpub-btn-xs" @click="editingId === role.id ? cancelEdit() : startEdit(role)">
+              {{ editingId === role.id ? 'Close' : 'Edit' }}
+            </button>
+            <button v-if="!role.isSystem" class="cpub-btn cpub-btn-xs cpub-btn-danger" @click="removeRole(role)">
+              Delete
+            </button>
+          </div>
+        </div>
+        <p v-if="role.description" class="cpub-role-desc">{{ role.description }}</p>
+        <div v-if="editingId !== role.id" class="cpub-role-perms">
+          <span v-if="role.permissions.includes('*')" class="cpub-perm-tag cpub-perm-tag-all">* full access</span>
+          <span v-for="p in role.permissions.filter((x) => x !== '*')" :key="p" class="cpub-perm-tag">{{ p }}</span>
+          <span v-if="!role.permissions.length" class="cpub-role-none">No permissions (entitlement tier only)</span>
+        </div>
+
+        <!-- Inline editor -->
+        <div v-else class="cpub-role-edit">
+          <label class="cpub-field">
+            <span class="cpub-field-label">Name</span>
+            <input v-model="editName" class="cpub-input" />
+          </label>
+          <div class="cpub-perm-groups">
+            <fieldset v-for="(keys, group) in grouped" :key="group" class="cpub-perm-group">
+              <legend class="cpub-perm-legend">{{ group }}</legend>
+              <label v-for="k in keys" :key="k" class="cpub-perm-check">
+                <input type="checkbox" :checked="editPerms.has(k)" @change="toggleEditPerm(k)" />
+                <span>{{ k }}</span>
+              </label>
+            </fieldset>
+          </div>
+          <div class="cpub-role-actions">
+            <button class="cpub-btn cpub-btn-sm" :disabled="savingEdit" @click="saveEdit(role)">
+              {{ savingEdit ? 'Saving...' : 'Save' }}
+            </button>
+            <button class="cpub-btn cpub-btn-sm cpub-btn-ghost" @click="cancelEdit">Cancel</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-admin-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); }
+.cpub-roles-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); gap: var(--space-3); }
+.cpub-rbac-banner { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: var(--border-width-default) solid var(--border); margin-bottom: var(--space-5); }
+.cpub-rbac-banner-text { font-size: var(--text-sm); color: var(--text-dim); line-height: 1.6; flex: 1; min-width: 0; }
+.cpub-rbac-banner-text strong { color: var(--text); }
+.cpub-rbac-banner--off { background: var(--surface2); }
+.cpub-rbac-banner--on { background: var(--green-bg, var(--surface2)); border-color: var(--green-border, var(--accent)); }
+.cpub-rbac-banner .cpub-btn { flex-shrink: 0; }
+.cpub-role-list { display: flex; flex-direction: column; gap: var(--space-3); }
+.cpub-role-card { padding: var(--space-4); background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); }
+.cpub-role-create { margin-bottom: var(--space-5); }
+.cpub-role-card-title { font-size: var(--text-md); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3); }
+.cpub-role-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
+.cpub-role-meta { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
+.cpub-role-name { font-weight: var(--font-weight-bold); }
+.cpub-role-key { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); }
+.cpub-role-badge { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 1px 5px; border: var(--border-width-default) solid var(--border); color: var(--text-dim); }
+.cpub-role-stats { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-dim); font-family: var(--font-mono); }
+.cpub-role-desc { font-size: var(--text-sm); color: var(--text-dim); margin: var(--space-2) 0 0; }
+.cpub-role-perms { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
+.cpub-perm-tag { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; background: var(--surface2); border: var(--border-width-default) solid var(--border); color: var(--text-dim); }
+.cpub-perm-tag-all { color: var(--accent); border-color: var(--accent); }
+.cpub-role-none { font-size: var(--text-xs); color: var(--text-faint); font-style: italic; }
+.cpub-role-edit, .cpub-role-fields { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
+.cpub-role-fields { flex-direction: row; }
+.cpub-field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
+.cpub-field-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-dim); }
+.cpub-input { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; }
+.cpub-input:focus { border-color: var(--accent); }
+.cpub-perm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
+.cpub-perm-group { border: var(--border-width-default) solid var(--border); padding: var(--space-2) var(--space-3); }
+.cpub-perm-legend { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-dim); padding: 0 var(--space-1); }
+.cpub-perm-check { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; padding: 2px 0; cursor: pointer; }
+.cpub-role-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
+.cpub-btn-xs { font-size: 10px; padding: 3px 8px; }
+.cpub-btn-ghost { background: none; }
+</style>

package/pages/admin/settings.vue

@@ -4,6 +4,7 @@ definePageMeta({ layout: 'admin', middleware: 'auth' });
 useSeoMeta({ title: `Settings, Admin, ${useSiteName()}` });
 
 const { data: settings, pending, refresh } = await useFetch<Record<string, string>>('/api/admin/settings');
+const toast = useToast();
 
 const saving = ref(false);
 const editKey = ref('');
@@ -40,7 +41,7 @@ async function saveSetting(key: string, value: string): Promise<void> {
     editValue.value = '';
     await refresh();
   } catch {
-    // Error handling via toast if available
+    toast.error('Failed to save setting');
   } finally {
     saving.value = false;
   }