@acms-subir/core 0.3.12 → 0.3.13

package/src/components/RolesManager.tsx

@@ -0,0 +1,276 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { RolesState } from '../lib/permissions/service';
+
+// Team → Roles: what each role may do. Every switch edits a draft in this
+// tab; Restore defaults fills the draft too. Nothing changes for anyone until
+// Save changes → Review → Save, which replaces the policy in one write. A
+// save against a newer revision is refused, and the draft is kept.
+
+type Grants = RolesState['grants'];
+type RoleKey = keyof Grants;
+type Area = RolesState['areas'][number];
+
+const ENDPOINT = '/api/roles';
+async function api(body?: unknown): Promise<RolesState> {
+  const res = await fetch(ENDPOINT, {
+    method: body ? 'PUT' : 'GET', credentials: 'same-origin',
+    headers: body ? { 'content-type': 'application/json', accept: 'application/json' } : { accept: 'application/json' },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) throw Object.assign(new Error(data?.issues?.[0]?.message || data?.error || `${res.status} ${res.statusText || 'Request failed'}`), { status: res.status });
+  return data as RolesState;
+}
+const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
+const clone = (g: Grants): Grants => JSON.parse(JSON.stringify(g));
+const editable = (role: string): role is RoleKey => role !== 'owner';
+const when = (ms: number) => new Date(ms).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+
+/** differences between two grant sets, per role */
+function diff(a: Grants, b: Grants) {
+  const out: Array<{ role: RoleKey; key: string; granted: boolean }> = [];
+  for (const role of Object.keys(b) as RoleKey[]) for (const key of Object.keys(b[role])) {
+    const k = key as keyof Grants[RoleKey];
+    if (a[role][k] !== b[role][k]) out.push({ role, key, granted: b[role][k] });
+  }
+  return out;
+}
+
+function Switch({ on, disabled, label, onChange }: { on: boolean; disabled?: boolean; label: string; onChange?: () => void }) {
+  return (
+    <button type="button" role="switch" aria-checked={on} aria-label={label} disabled={disabled}
+      className={`rp-switch${on ? ' on' : ''}`} onClick={onChange}><i /></button>
+  );
+}
+
+export default function RolesManager() {
+  const [state, setState] = useState<RolesState | null>(null);
+  const [draft, setDraft] = useState<Grants | null>(null);
+  const [role, setRole] = useState<string>('administrator');
+  const [tab, setTab] = useState<'edit' | 'compare'>('edit');
+  const [error, setError] = useState('');
+  const [conflict, setConflict] = useState(false);
+  const [note, setNote] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [confirm, setConfirm] = useState<null | { kind: 'review' } | { kind: 'restore'; role: RoleKey | 'all' }>(null);
+
+  useEffect(() => { api().then((s) => { setState(s); setDraft(clone(s.grants)); }, (e) => setError(errText(e))); }, []);
+
+  const pending = useMemo(() => (state && draft ? diff(state.grants, draft) : []), [state, draft]);
+  const dirty = pending.length > 0;
+  // unsaved changes live only in this tab: warn before losing them
+  useEffect(() => {
+    if (!dirty) return;
+    const onLeave = (e: BeforeUnloadEvent) => e.preventDefault();
+    window.addEventListener('beforeunload', onLeave);
+    return () => window.removeEventListener('beforeunload', onLeave);
+  }, [dirty]);
+
+  if (!state || !draft) return error ? <p className="flash error">{error}</p> : <div className="ma-skel" aria-busy="true" aria-label="Loading"><i /><i /></div>;
+
+  const readOnly = !state.canEdit;
+  const labelOf = (r: string) => state.roles.find((x) => x.role === r)?.label ?? r;
+  const permOf = (key: string) => state.areas.flatMap((a) => a.permissions).find((p) => p.key === key);
+  const customized = (r: RoleKey) => diff(state.defaults, draft).some((d) => d.role === r);
+  const unsaved = (r: RoleKey) => pending.some((d) => d.role === r);
+  const grant = (r: string, key: string) => r === 'owner' || (editable(r) && (draft[r] as Record<string, boolean>)[key] === true);
+
+  const toggle = (r: RoleKey, key: string) => {
+    if (readOnly) return;
+    setNote('');
+    setDraft((d) => { const next = clone(d!); (next[r] as Record<string, boolean>)[key] = !(next[r] as Record<string, boolean>)[key]; return next; });
+  };
+  const restore = (target: RoleKey | 'all') => {
+    setDraft((d) => {
+      const next = clone(d!);
+      for (const r of Object.keys(next) as RoleKey[]) if (target === 'all' || target === r) next[r] = clone(state.defaults)[r];
+      return next;
+    });
+    setConfirm(null);
+    setNote(target === 'all' ? 'Every role is back to its defaults in your draft. Save to apply.' : `${labelOf(target)} is back to its defaults in your draft. Save to apply.`);
+  };
+  const save = async () => {
+    setBusy(true); setError(''); setConflict(false);
+    try {
+      const s = await api({ revision: state.revision, grants: draft });
+      setState(s); setDraft(clone(s.grants)); setConfirm(null); setNote('Saved. The new permissions apply from everyone’s next action.');
+    } catch (e) {
+      setConfirm(null);
+      setError(errText(e));
+      if ((e as { status?: number }).status === 409) setConflict(true);
+    } finally { setBusy(false); }
+  };
+  // someone else saved: load their version and replay this draft's edits on top
+  const reloadLatest = async () => {
+    setBusy(true);
+    try {
+      const s = await api();
+      const next = clone(s.grants);
+      for (const p of pending) (next[p.role] as Record<string, boolean>)[p.key] = p.granted;
+      setState(s); setDraft(next); setError(''); setConflict(false);
+      setNote(`Loaded the latest permissions${s.updatedBy ? ` from ${s.updatedBy}` : ''} with your edits on top. Review, then save again.`);
+    } catch (e) { setError(errText(e)); }
+    finally { setBusy(false); }
+  };
+
+  const areaSummary = (r: string, a: Area) => {
+    const n = a.permissions.filter((p) => grant(r, p.key)).length;
+    return n === a.permissions.length ? ['Full access', 'published'] : n === 0 ? ['No access', 'archived'] : ['Partial access', 'edited'];
+  };
+  const selected = state.roles.find((r) => r.role === role)!;
+  const rolesChanged = new Set(pending.map((p) => p.role)).size;
+
+  return (
+    <div className="rp">
+      {readOnly && <p className="notice">Only owners can change permissions. This is what each role can do today.</p>}
+      {error && (
+        <div className="flash error rp-flash" role="alert">
+          <span>{error}</span>
+          {conflict && <button className="btn sm" type="button" onClick={reloadLatest} disabled={busy}>Load their changes</button>}
+          {/recent sign-in|last ten minutes/i.test(error) && <form method="post" action="/admin/logout"><button className="btn sm" type="submit">Sign in again</button></form>}
+        </div>
+      )}
+      {note && !error && <p className="flash" role="status">{note}</p>}
+
+      <div className="rp-bar">
+        <div className="seg" role="tablist" aria-label="View">
+          <button type="button" role="tab" aria-selected={tab === 'edit'} onClick={() => setTab('edit')}>{readOnly ? 'By role' : 'Edit role'}</button>
+          <button type="button" role="tab" aria-selected={tab === 'compare'} onClick={() => setTab('compare')}>Compare roles</button>
+        </div>
+        {!readOnly && <button className="btn" type="button" onClick={() => setConfirm({ kind: 'restore', role: 'all' })}>Restore all defaults</button>}
+      </div>
+
+      {tab === 'edit' ? (
+        <div className="rp-grid">
+          <nav className="rp-roles" aria-label="Roles">
+            {state.roles.map((r) => (
+              <button key={r.role} type="button" className={`rp-role${role === r.role ? ' on' : ''}`} aria-current={role === r.role} onClick={() => setRole(r.role)}>
+                <span className="rp-role-name">
+                  {editable(r.role) && unsaved(r.role) && <span className="rp-dot" title="Unsaved changes" />}
+                  {r.label}
+                  {editable(r.role) && customized(r.role) && <span className="pill draft">Customized</span>}
+                </span>
+                <small>{r.members} {r.members === 1 ? 'person' : 'people'}</small>
+              </button>
+            ))}
+          </nav>
+
+          <section className="card rp-panel" aria-labelledby="rp-role-h">
+            <header className="rp-head">
+              <div>
+                <h2 id="rp-role-h">{selected.label} {editable(role) && <span className={`pill ${customized(role) ? 'draft' : 'archived'}`}>{customized(role) ? 'Customized' : 'Default'}</span>}</h2>
+                <p className="hint">{role === 'owner' ? 'Owners always have full access, so the site can never be locked out.' : selected.summary}</p>
+              </div>
+              {!readOnly && editable(role) && <button className="btn sm" type="button" disabled={!customized(role)} onClick={() => setConfirm({ kind: 'restore', role: role as RoleKey })}>Restore defaults</button>}
+            </header>
+            {state.areas.map((a) => {
+              const [sum, tone] = areaSummary(role, a);
+              return (
+                <div className="rp-area" key={a.id}>
+                  <div className="rp-area-head"><b>{a.label}</b>{a.id === 'owner' ? <span className="pill archived">Locked</span> : <span className={`pill ${tone}`}>{sum}</span>}</div>
+                  {a.permissions.map((p) => {
+                    const changed = editable(role) && pending.some((d) => d.role === role && d.key === p.key);
+                    const on = grant(role, p.key);
+                    return (
+                      <div className={`rp-row${changed ? ' changed' : ''}`} key={p.key}>
+                        <div className="rp-text">
+                          <span className="rp-label">{p.label}{p.sensitive && <span className="pill edited" title="Grants code, credentials or people. Grant with care.">Sensitive</span>}{changed && <span className="pill draft">Changed</span>}</span>
+                          <small>{p.description}</small>
+                        </div>
+                        <Switch on={on} label={`${p.label} for ${selected.label}`} disabled={readOnly || role === 'owner' || p.locked} onChange={() => editable(role) && toggle(role, p.key)} />
+                      </div>
+                    );
+                  })}
+                </div>
+              );
+            })}
+          </section>
+        </div>
+      ) : (
+        <section className="card rp-compare">
+          <table className="list">
+            <thead><tr><th>Permission</th>{state.roles.map((r) => <th key={r.role}>{r.label}</th>)}</tr></thead>
+            <tbody>
+              {state.areas.map((a) => [
+                <tr key={a.id} className="rp-compare-area"><td colSpan={state.roles.length + 1}><b>{a.label}</b></td></tr>,
+                ...a.permissions.map((p) => (
+                  <tr key={p.key}>
+                    <td>{p.label}</td>
+                    {state.roles.map((r) => {
+                      const on = grant(r.role, p.key);
+                      const changed = editable(r.role) && pending.some((d) => d.role === r.role && d.key === p.key);
+                      return <td key={r.role} className={`rp-cell${on ? ' on' : ''}${changed ? ' changed' : ''}`} aria-label={on ? 'Allowed' : 'Not allowed'}>{on ? '✓' : '—'}</td>;
+                    })}
+                  </tr>
+                )),
+              ])}
+            </tbody>
+          </table>
+          <p className="hint rp-compare-note">Highlighted cells are unsaved changes. Owners always have every permission.</p>
+        </section>
+      )}
+
+      {state.history.length > 0 && (
+        <section className="card card-pad rp-history">
+          <h3 className="card-title">Recent changes</h3>
+          <ul>
+            {state.history.map((h) => (
+              <li key={h.id}>
+                <span><b>{h.by}</b> · {when(h.at)}</span>
+                <small>{h.changes.slice(0, 6).map((c) => `${labelOf(c.role)}: ${c.granted ? '+' : '−'} ${permOf(c.permission)?.label ?? c.permission}`).join(' · ')}{h.changes.length > 6 ? ` · and ${h.changes.length - 6} more` : ''}</small>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {dirty && !readOnly && (
+        <div className="rp-savebar" role="region" aria-label="Unsaved changes">
+          <span><span className="rp-dot" />Unsaved changes · {rolesChanged} {rolesChanged === 1 ? 'role' : 'roles'}, {pending.length} {pending.length === 1 ? 'permission' : 'permissions'}</span>
+          <span className="rp-savebar-actions">
+            <button className="btn" type="button" disabled={busy} onClick={() => { setDraft(clone(state.grants)); setNote('Changes discarded.'); setError(''); setConflict(false); }}>Discard</button>
+            <button className="btn primary" type="button" disabled={busy} onClick={() => setConfirm({ kind: 'review' })}>Save changes</button>
+          </span>
+        </div>
+      )}
+
+      {confirm && (
+        <div className="rp-overlay" role="presentation" onClick={(e) => { if (e.target === e.currentTarget && !busy) setConfirm(null); }}>
+          <div className="rp-dialog" role="dialog" aria-modal="true" aria-labelledby="rp-dialog-h">
+            {confirm.kind === 'review' ? (
+              <>
+                <h2 id="rp-dialog-h">Review permission changes</h2>
+                <div className="rp-dialog-body">
+                  {[...new Set(pending.map((p) => p.role))].map((r) => (
+                    <div className="rp-review-role" key={r}>
+                      <b>{labelOf(r)}</b> <small className="hint">· {state.roles.find((x) => x.role === r)?.members ?? 0} affected</small>
+                      <ul>{pending.filter((p) => p.role === r).map((p) => (
+                        <li key={p.key} className={p.granted ? 'plus' : 'minus'}>{p.granted ? '+' : '−'} {permOf(p.key)?.label ?? p.key}</li>
+                      ))}</ul>
+                    </div>
+                  ))}
+                  <p className="hint">Changes apply right away to everyone in these roles, including people already signed in on the web or in the editor app.</p>
+                </div>
+                <div className="modal-foot">
+                  <button className="btn ghost" type="button" disabled={busy} onClick={() => setConfirm(null)}>Back</button>
+                  <button className="btn primary" type="button" disabled={busy} onClick={save}>{busy ? 'Saving…' : 'Save changes'}</button>
+                </div>
+              </>
+            ) : (
+              <>
+                <h2 id="rp-dialog-h">{confirm.role === 'all' ? 'Restore every role to its defaults?' : `Restore ${labelOf(confirm.role)} to its defaults?`}</h2>
+                <div className="rp-dialog-body">
+                  <p>This puts {confirm.role === 'all' ? 'every role' : labelOf(confirm.role)} back to the default permissions in your draft. <b>Nothing changes for your team until you save.</b></p>
+                </div>
+                <div className="modal-foot">
+                  <button className="btn ghost" type="button" onClick={() => setConfirm(null)}>Cancel</button>
+                  <button className="btn primary" type="button" onClick={() => restore(confirm.role)}>Restore in draft</button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/layouts/Admin.astro

@@ -6,6 +6,7 @@ import { CONTENT } from '../lib/content';
 import { CALENDAR, bookingsEnabled } from '../lib/calendar/config';
 import { OWNER_ENV } from '../lib/auth';
 import { validateRequestSession } from '../lib/auth/request';
+import { accessFor } from '../lib/permissions/access';
 import { AUTH } from '../lib/auth/config';
 import ClerkSession from '../components/auth/ClerkSession.astro';
 import ThemeScript from '../components/ThemeScript.astro';
@@ -40,6 +41,9 @@ const me = {
 };
 const initials = me.name.split(/\s+/).map((w) => w[0] ?? '').join('').slice(0, 2).toUpperCase();
 const siteName = settings.siteTitle || BRAND.name;
+// Team → Roles decides some of what's listed (pages still check for themselves)
+const access = await accessFor(Astro.request, Astro.cookies, repo);
+const can = (p: Parameters<NonNullable<typeof access>['can']>[0]) => access?.can(p) ?? false;
 
 const icons: Record<string, string> = {
   dashboard: 'M3 3h7v9H3zM14 3h7v5h-7zM14 12h7v9h-7zM3 16h7v5H3z',
@@ -118,7 +122,7 @@ const groups: { id: string; label: string; items: Item[] }[] = [
         // people, booking links). Sub-pages highlight their home.
         items: [
           { key: 'calendar:schedule', label: 'Schedule', href: '/admin/calendar', icon: icons.calendar, count: null },
-          ...(CALENDAR.enabled
+          ...(CALENDAR.enabled && can('schedule.bookings')
             ? [{ key: 'calendar:bookings', label: 'Bookings', href: '/admin/calendar/bookings', icon: icons.bookings, count: pendingBookings || null, attention: pendingBookings > 0 }]
             : []),
         ],
@@ -131,8 +135,8 @@ const groups: { id: string; label: string; items: Item[] }[] = [
       { key: 'design', label: 'Design', href: '/admin/design', icon: icons.design, count: null },
       { key: 'navigation', label: 'Navigation', href: '/admin/navigation', icon: icons.navigation, count: null },
       { key: 'links', label: 'Links page', href: '/admin/links', icon: icons.links, count: links.length },
-      // app access switches (+ push notifications when acms({ mobile: { push } }) is on), owners only
-      ...(me.role === 'Owner' ? [{ key: 'mobile', label: 'Mobile app', href: '/admin/mobile', icon: icons.phone, count: null }] : []),
+      // app access switches (+ push notifications when acms({ mobile: { push } }) is on)
+      ...(can('services.manage') ? [{ key: 'mobile', label: 'Mobile app', href: '/admin/mobile', icon: icons.phone, count: null }] : []),
     ],
   },
   {
@@ -140,6 +144,7 @@ const groups: { id: string; label: string; items: Item[] }[] = [
     label: 'Team',
     items: [
       { key: 'users', label: 'Users', href: '/admin/users', icon: icons.users, count: null },
+      ...(access?.role === 'owner' || access?.role === 'administrator' ? [{ key: 'roles', label: 'Roles', href: '/admin/roles', icon: icons.shield, count: null }] : []),
       { key: 'ai', label: 'Document import', href: '/admin/ai', icon: icons.posts, count: null },
       { key: 'integrations', label: 'API & webhooks', href: '/admin/integrations', icon: icons.plug, count: null },
       { key: 'settings', label: 'Settings', href: '/admin/settings', icon: icons.settings, count: null },

package/src/lib/auth/accounts.ts

@@ -4,7 +4,7 @@ import { AUTH, clerkConfig } from './config';
 import { clerkClient, clerkOperation } from './request';
 import { validAddress } from '../email/config';
 
-export async function inviteClerkUser(repo: ContentRepository, data: { email: string; name: string; role: unknown }, locals?: unknown) {
+export async function inviteClerkUser(repo: ContentRepository, data: { email: string; name: string; role: unknown; invitedBy?: string }, locals?: unknown) {
   if (AUTH.provider !== 'clerk') throw new Error('Clerk authentication is not enabled.');
   const config = clerkConfig(locals), email = data.email.trim().toLowerCase(), role = Role.parse(data.role);
   if (!validAddress(email)) throw new Error('Enter a valid email address.');
@@ -15,7 +15,7 @@ export async function inviteClerkUser(repo: ContentRepository, data: { email: st
   const id = crypto.randomUUID();
   // Expired/failed invitations do not prevent a deliberate retry.
   for (const old of await repo.auth.invitations(config.issuer)) if (old.email === email && old.state === 'expired') await repo.auth.invitationState(old.id, 'expired');
-  await repo.auth.reserveInvitation(config.issuer, { id, email, name: data.name.trim().slice(0, 120) || email, role });
+  await repo.auth.reserveInvitation(config.issuer, { id, email, name: data.name.trim().slice(0, 120) || email, role, invitedBy: data.invitedBy });
   try {
     const invitation = await clerkOperation(() => client.invitations.createInvitation({ emailAddress: email, expiresInDays: 7, ignoreExisting: false,
       redirectUrl: `${config.authorizedParties[0]}/admin/login?signUp=1`, publicMetadata: { acmsInvitationId: id } }));

package/src/lib/auth/store.ts

@@ -2,9 +2,9 @@ import type { SqlDriver } from '../repo/sql';
 import type { Role } from '../schema';
 
 export interface ClerkBinding { issuer: string; subject: string; sessionId: string }
-export interface AuthInvitation { id: string; email: string; name: string; role: Role; remoteId: string; state: string; expiresAt: number }
+export interface AuthInvitation { id: string; email: string; name: string; role: Role; remoteId: string; state: string; expiresAt: number; invitedBy: string; createdAt: number }
 function invitation(r: Record<string, unknown>): AuthInvitation {
-  return { id: String(r.id), email: String(r.email), name: String(r.name), role: r.role as Role, remoteId: String(r.remote_id), state: r.state === 'pending' && Number(r.expires_at) <= Date.now() ? 'expired' : String(r.state), expiresAt: Number(r.expires_at) };
+  return { id: String(r.id), email: String(r.email), name: String(r.name), role: r.role as Role, remoteId: String(r.remote_id), state: r.state === 'pending' && Number(r.expires_at) <= Date.now() ? 'expired' : String(r.state), expiresAt: Number(r.expires_at), invitedBy: String(r.invited_by ?? ''), createdAt: Number(r.created_at) };
 }
 export class AuthStore {
   constructor(private driver: () => Promise<SqlDriver>) {}
@@ -43,9 +43,9 @@ export class AuthStore {
     const rows = await (await this.driver()).all('SELECT * FROM auth_invitations WHERE issuer=? AND id=?', [issuer, id]);
     return rows[0] ? invitation(rows[0]) : null;
   }
-  async reserveInvitation(issuer: string, data: { id: string; email: string; name: string; role: Role }) {
+  async reserveInvitation(issuer: string, data: { id: string; email: string; name: string; role: Role; invitedBy?: string }) {
     await (await this.driver()).run("UPDATE auth_invitations SET state='expired' WHERE issuer=? AND email=? AND state='pending' AND expires_at<=?", [issuer,data.email,Date.now()]);
-    await (await this.driver()).run("INSERT INTO auth_invitations(id,issuer,email,name,role,state,remote_id,expires_at,created_at) VALUES (?,?,?,?,?,'sending','',?,?)", [data.id, issuer, data.email, data.name, data.role, Date.now() + 7 * 86400000, Date.now()]);
+    await (await this.driver()).run("INSERT INTO auth_invitations(id,issuer,email,name,role,state,remote_id,expires_at,created_at,invited_by) VALUES (?,?,?,?,?,'sending','',?,?,?)", [data.id, issuer, data.email, data.name, data.role, Date.now() + 7 * 86400000, Date.now(), data.invitedBy ?? '']);
   }
   async invitationState(id: string, state: string, remoteId = '') {
     const guard = state === 'pending' || state === 'failed' ? " AND state='sending'" : " AND state<>'accepted'";

package/src/lib/content-service.ts

@@ -3,6 +3,7 @@ import { FormDefinition } from './forms/schema';
 import type { CalEvent, EventLocation, Page, Post, WidgetInstance } from './schema';
 import { slugify } from './schema';
 import { ApiError } from './api';
+import { deniedMessage } from './permissions/catalog';
 import { CONTENT, collectionUrl } from './content';
 import { CALENDAR } from './calendar/config';
 import { isValidTimeZone, normalizeEventTimes } from './calendar/events';
@@ -26,6 +27,8 @@ export interface SaveHooks {
   locals?: unknown;
   /** new redirects must fire at once in this isolate */
   onRedirect?: () => void;
+  /** false: the person's role edits drafts but can't change what's live (unset: keys and agents, scoped elsewhere) */
+  canPublish?: boolean;
 }
 
 export type PostSave = Parameters<ContentRepository['updatePost']>[1];
@@ -38,6 +41,11 @@ export type EventSave = Partial<Omit<CalEvent, 'id' | 'draft' | 'startAt' | 'end
 type EventClean = Omit<EventSave, 'location'> & { location?: EventLocation };
 
 const live = (status: string) => status === 'published' || status === 'scheduled';
+/** publishing, scheduling, unpublishing or applying staged edits needs Publish content */
+export function assertCanPublish(hooks: Pick<SaveHooks, 'canPublish'>) {
+  if (hooks.canPublish === false) throw new ApiError(403, deniedMessage('content.publish'));
+}
+const touchesLive = (before: string, after: string | undefined) => after !== undefined && after !== before && (live(before) || live(after));
 
 export async function savePost(repo: ContentRepository, id: string, input: PostSave, hooks: SaveHooks): Promise<Post> {
   const data = { ...input };
@@ -45,6 +53,7 @@ export async function savePost(repo: ContentRepository, id: string, input: PostS
   if (data.collection !== undefined && !CONTENT.collections[data.collection]) throw new ApiError(400, `Unknown collection "${data.collection}".`);
   const before = await repo.getPost(id);
   if (!before) throw new ApiError(404, 'Post not found.');
+  if (touchesLive(before.status, data.status)) assertCanPublish(hooks);
   const transitions = data.status !== undefined && data.status !== before.status;
   if (live(before.status) && !transitions) {
     const { status: _status, scheduledAt: _scheduledAt, authorId: _authorId, ...staged } = data;
@@ -66,6 +75,7 @@ export async function savePost(repo: ContentRepository, id: string, input: PostS
 
 /** Update: the pending draft goes live (tag registry, slug-change 301 happen now) */
 export async function applyPostUpdate(repo: ContentRepository, id: string, hooks: SaveHooks): Promise<Post> {
+  assertCanPublish(hooks);
   const before = await repo.getPost(id);
   if (!before) throw new ApiError(404, 'Post not found.');
   await repo.applyPostDraft(id);
@@ -85,6 +95,7 @@ export async function savePage(repo: ContentRepository, id: string, input: PageS
   if (data.locale !== undefined) data.locale = normalizePageLocale(data.locale);
   const before = await repo.getPage(id);
   if (!before) throw new ApiError(404, 'Page not found.');
+  if (touchesLive(before.status, data.status)) assertCanPublish(hooks);
   const transitions = data.status !== undefined && data.status !== before.status;
   if (live(before.status) && !transitions) {
     const { status: _status, ...staged } = data;
@@ -102,6 +113,7 @@ export async function savePage(repo: ContentRepository, id: string, input: PageS
 }
 
 export async function applyPageUpdate(repo: ContentRepository, id: string, hooks: SaveHooks): Promise<Page> {
+  assertCanPublish(hooks);
   const before = await repo.getPage(id);
   if (!before) throw new ApiError(404, 'Page not found.');
   await repo.applyPageDraft(id);
@@ -198,6 +210,7 @@ async function eventSideEffects(repo: ContentRepository, hooks: SaveHooks, befor
 export async function saveEvent(repo: ContentRepository, id: string, data: EventSave, hooks: SaveHooks): Promise<CalEvent> {
   const before = await repo.getEvent(id);
   if (!before) throw new ApiError(404, 'Event not found.');
+  if (touchesLive(before.status, data.status)) assertCanPublish(hooks);
   const clean = await cleanEventInput(repo, data, before);
   // static map images follow the pin (fetched once per pin, never blocking)
   if (clean.location) {
@@ -219,6 +232,7 @@ export async function saveEvent(repo: ContentRepository, id: string, data: Event
 }
 
 export async function applyEventUpdate(repo: ContentRepository, id: string, hooks: SaveHooks): Promise<CalEvent> {
+  assertCanPublish(hooks);
   const before = await repo.getEvent(id);
   if (!before) throw new ApiError(404, 'Event not found.');
   await repo.applyEventDraft(id);

package/src/lib/design-service.ts

@@ -3,6 +3,8 @@ import { SectionPages, sectionIssues } from '../theme-sdk/contract.mjs';
 import { migrateSection } from './sections';
 import type { Theme } from './theme';
 import { ApiError, sessionRole } from './api';
+import { grantsFor } from './permissions/access';
+import { allows, deniedMessage } from './permissions/catalog';
 import { hashAgentKey } from './ai-config';
 import { pickDesignDraft } from './drafts';
 import type { ContentRepository } from './repo/types';
@@ -41,10 +43,16 @@ export async function designIdentity(request: Request, cookies: {get(name:string
     if (!required.some(s=>key.scopes.includes(s))) throw new ApiError(403,`Required scope: ${required.join(' or ')}`);
     return { actor:`key:${key.id}`,scopes:key.scopes };
   }
-  // editors may edit section content (never layout, theme or locked fields)
+  // Arrange and lock sections: full design control (identity role 'owner');
+  // otherwise Edit page sections changes section content (never layout,
+  // theme or locked fields). Media writes follow Upload media.
   const who=await sessionRole(request,cookies,repo);
-  if(who.role!=='owner')return {actor:`editor:${who.id}`,role:'editor' as const,scopes:['design:read','design:write-draft','design:publish']};
-  return {actor:'owner',role:'owner' as const,scopes:[...DESIGN_SCOPES]};
+  const grants=await grantsFor(repo,request);
+  const required=typeof scope==='string'?[scope]:scope;
+  if(required.includes('media:write')&&!allows(grants,who.role,'media.upload'))throw new ApiError(403,deniedMessage('media.upload'));
+  if(allows(grants,who.role,'site.layout'))return {actor:who.role==='owner'?'owner':`${who.role}:${who.id}`,role:'owner' as const,scopes:[...DESIGN_SCOPES]};
+  if(!allows(grants,who.role,'site.sections'))throw new ApiError(403,deniedMessage('site.sections'));
+  return {actor:`editor:${who.id}`,role:'editor' as const,scopes:['design:read','design:write-draft','design:publish']};
 }
 export function publicDesign(settings:Settings) { return {...pickDesignDraft(settings), sectionPages:settings.sectionPages}; }
 export function validateSectionDesign(settings:Settings, theme:Pick<Theme,'sections'|'migrations'>) {

package/src/lib/editor/http.ts

@@ -6,6 +6,8 @@ import { sha256Hex } from '../api-keys';
 import { failure, response } from '../mobile/http';
 import { authenticateDevice, type EditorPrincipal } from './auth';
 import { requireEditorApps } from './config';
+import { principalCan, requirePrincipal } from '../permissions/access';
+import type { Permission } from '../permissions/catalog';
 
 export interface EditorContext { context: APIContext; repo: ContentRepository; who: EditorPrincipal; now: number }
 
@@ -49,3 +51,8 @@ export function editorRoute(handler: (c: EditorContext) => Promise<unknown>, opt
 export async function logWrite(c: EditorContext, action: string, target: string) {
   await c.repo.editor.log({ userId: c.who.user.id, deviceId: c.who.device.id, action, target }, Date.now()).catch(() => {});
 }
+
+/** the person's role must grant this permission (Team → Roles; read live per request) */
+export const requireCan = (c: EditorContext, permission: Permission) => requirePrincipal(c.repo, c.who, permission);
+/** whether saves may change what's live (content-service SaveHooks.canPublish) */
+export const canPublish = (c: EditorContext) => principalCan(c.repo, c.who, 'content.publish');

package/src/lib/editor/me.ts

@@ -6,11 +6,15 @@ import { translationEngine } from '../translate';
 import { siteOrigin } from '../seo';
 import type { EditorPrincipal } from './auth';
 import { canManageSchedule, isAdmin } from './roles';
+import { grantsFor } from '../permissions/access';
+import { allows, type Permission } from '../permissions/catalog';
 
 /** who is signed in on this device, and what this site lets them do */
 export async function me(repo: ContentRepository, who: EditorPrincipal, url: URL, locals: unknown) {
   const settings = await repo.getSettings();
-  const owner = who.user.role === 'owner';
+  const grants = await grantsFor(repo, who);
+  const can = (p: Permission) => allows(grants, who.user.role, p);
+  const manageSchedule = await canManageSchedule(repo, who, settings);
   return {
     user: who.user,
     device: { id: who.device.id, name: who.device.name, clientId: who.device.clientId },
@@ -21,14 +25,14 @@ export async function me(repo: ContentRepository, who: EditorPrincipal, url: URL
       languages: { default: I18N.enabled ? I18N.defaultLocale : null, extra: extraLocales().map((code) => ({ code, name: localeName(code, true) })) },
       aiTranslation: translationEngine(settings.ai, locals) !== null,
     },
-    // Non-owner roles retain the existing editor capabilities.
+    // what this person's role allows (Team → Roles), plus the app's own admin-only limits
     permissions: {
-      documents: { edit: true, publish: true },
-      sections: { editContent: true, editLocked: owner, publishSection: true, changeLayout: false },
-      bookings: bookingsEnabled(),
-      schedule: { view: CALENDAR.enabled, manage: CALENDAR.enabled && canManageSchedule(who, settings), ignoreRules: bookingsEnabled() && isAdmin(who) },
-      forms: { list: true, readResponses: isAdmin(who) },
-      links: { edit: true, editHtml: isAdmin(who) },
+      documents: { edit: can('content.edit'), publish: can('content.publish') },
+      sections: { editContent: can('site.sections') || can('site.layout'), editLocked: can('site.layout'), publishSection: can('site.sections') || can('site.layout'), changeLayout: false },
+      bookings: bookingsEnabled() && can('schedule.bookings'),
+      schedule: { view: CALENDAR.enabled, manage: CALENDAR.enabled && manageSchedule, ignoreRules: bookingsEnabled() && isAdmin(who) && can('schedule.bookings') },
+      forms: { list: true, readResponses: isAdmin(who) && can('forms.responses') },
+      links: { edit: can('site.links'), editHtml: isAdmin(who) && can('site.links') },
     },
   };
 }

package/src/lib/editor/roles.ts

@@ -1,9 +1,14 @@
 import type { Settings } from '../schema';
 import { ApiError } from '../api';
+import type { ContentRepository } from '../repo/types';
+import { principalCan, requirePrincipal } from '../permissions/access';
 import type { EditorPrincipal } from './auth';
 
-// Role checks for editor apps. The role is read live on every request
-// (authenticateDevice), so a demotion takes effect on the next call.
+// Role checks for editor apps. The role and the saved role permissions are
+// read live on every request (authenticateDevice, grantsFor), so a demotion
+// or a permission change takes effect on the next call. The app keeps a few
+// limits of its own on top of Team → Roles: form responses, HTML link blocks
+// and overriding booking rules stay with administrators and owners.
 
 const ADMIN = new Set(['administrator', 'owner']);
 export const isAdmin = (who: EditorPrincipal) => ADMIN.has(who.user.role);
@@ -13,8 +18,11 @@ export function requireAdmin(who: EditorPrincipal, what = 'do this') {
   if (!isAdmin(who)) throw new ApiError(403, `Only administrators and owners can ${what}.`);
 }
 
-/** rooms, booking types, hours and calendars (Admin → Mobile app decides who) */
-export const canManageSchedule = (who: EditorPrincipal, settings: Settings) => settings.mobileAccess.scheduleRoles === 'staff' || isAdmin(who);
-export function requireScheduleRole(who: EditorPrincipal, settings: Settings) {
-  if (!canManageSchedule(who, settings)) throw new ApiError(403, 'Only administrators and owners can change rooms, booking types, hours and calendars.');
+/** rooms, booking types, hours and calendars: the role's permission, and Admin → Mobile app decides who in the app */
+export async function canManageSchedule(repo: ContentRepository, who: EditorPrincipal, settings: Settings) {
+  return (settings.mobileAccess.scheduleRoles === 'staff' || isAdmin(who)) && await principalCan(repo, who, 'schedule.manage');
+}
+export async function requireScheduleRole(repo: ContentRepository, who: EditorPrincipal, settings: Settings) {
+  if (!(settings.mobileAccess.scheduleRoles === 'staff' || isAdmin(who))) throw new ApiError(403, 'Only administrators and owners can change rooms, booking types, hours and calendars.');
+  await requirePrincipal(repo, who, 'schedule.manage');
 }