kilo-cms 0.1.0

package/src/admin/PublishingPanel.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { formatDateTime } from '../format'
+import { Button } from './Button'
+
+export type ReviewStatus = 'draft' | 'in_review' | 'reviewed' | 'approved'
+const reviewStatusLabels: Record<ReviewStatus, string> = { draft: 'Draft', in_review: 'In review', reviewed: 'Reviewed', approved: 'Approved' }
+
+type Props = {
+  published: boolean
+  dirty: boolean
+  saving: 'draft' | 'publish' | 'unpublish' | 'schedule' | 'unschedule' | 'workflow' | null
+  message: string
+  publishedAt?: string | null
+  scheduledAt?: string | null
+  canSchedule?: boolean
+  onSaveDraft: () => void
+  onPublish: () => void
+  onUnpublish?: () => void
+  onSchedule?: () => void
+  onUnschedule?: () => void
+  onTrash?: () => void
+  reviewStatus: ReviewStatus
+  requiresApproval?: boolean
+  reviewerName?: string | null
+  canSubmitReview?: boolean
+  canReview?: boolean
+  canApprove?: boolean
+  reviewers?: Array<{ id: string; name: string }>
+  onSubmitReview?: (reviewerId: string) => void
+  onReviewDecision?: (decision: 'approve' | 'request_changes') => void
+  onApprove?: () => void
+}
+
+export function PublishingPanel({ published, dirty, saving, message, publishedAt, scheduledAt, canSchedule, onSaveDraft, onPublish, onUnpublish, onSchedule, onUnschedule, onTrash, reviewStatus, requiresApproval = true, reviewerName, canSubmitReview, canReview, canApprove, reviewers, onSubmitReview, onReviewDecision, onApprove }: Props) {
+  const approvalEnabled = requiresApproval
+  const [pickedReviewer, setPickedReviewer] = useState('')
+  const [menuOpen, setMenuOpen] = useState(false)
+  const menuWrap = useRef<HTMLDivElement>(null)
+  const isScheduled = !published && Boolean(scheduledAt)
+  const isOverdue = isScheduled && Boolean(scheduledAt) && new Date(scheduledAt!) < new Date()
+  const isApproved = reviewStatus === 'approved'
+  const isSettled = published && !dirty
+  const publishDisabled = saving !== null || isSettled || (!published && approvalEnabled && !isApproved)
+  const publishLabel = saving === 'publish' ? 'Publishing…' : published ? 'Publish update' : 'Publish'
+  const statusLabel = published ? 'Published' : isScheduled ? 'Scheduled' : approvalEnabled ? reviewStatusLabels[reviewStatus] : 'Draft'
+
+  useEffect(() => {
+    function closeMenu(event: PointerEvent) { if (!menuWrap.current?.contains(event.target as Node)) setMenuOpen(false) }
+    function closeOnEscape(event: KeyboardEvent) { if (event.key === 'Escape') setMenuOpen(false) }
+    document.addEventListener('pointerdown', closeMenu)
+    document.addEventListener('keydown', closeOnEscape)
+    return () => { document.removeEventListener('pointerdown', closeMenu); document.removeEventListener('keydown', closeOnEscape) }
+  }, [])
+
+  return <div className="cms-editor-sidebar-stack">
+    <aside className="cms-editor-sidebar">
+    <div className="cms-publishing-heading"><span>Publishing</span>{(published && onUnpublish) || onTrash ? <div className="cms-publishing-menu-wrap" ref={menuWrap}><Button variant="secondary" iconOnly className="cms-publishing-menu-trigger" aria-label="More publishing actions" aria-expanded={menuOpen} onClick={() => setMenuOpen((open) => !open)} icon={<span aria-hidden="true">•••</span>} />{menuOpen && <div className="cms-publishing-menu" role="menu">
+      {published && onUnpublish && <Button variant="ghost" className="cms-menu-item-caution" role="menuitem" disabled={saving !== null} onClick={() => { setMenuOpen(false); onUnpublish() }} icon={<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h12M13 7l5 5-5 5M19 5v14" /></svg>} iconPosition="before">{saving === 'unpublish' ? 'Unpublishing…' : 'Unpublish'}</Button>}
+      {onTrash && <Button variant="negative" role="menuitem" onClick={() => { setMenuOpen(false); onTrash() }} icon={<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M10 11v6m4-6v6M9 7l1-2h4l1 2m-9 0 1 13h10l1-13" /></svg>} iconPosition="before">Delete</Button>}
+    </div>}</div> : null}</div>
+    <div className="cms-publishing-summary">
+      <span className={`cms-status ${published ? 'is-published' : ''} ${isScheduled ? 'is-scheduled' : ''}`}>{statusLabel}</span>
+      {dirty && <span className="cms-unsaved-status">Unsaved changes</span>}
+    </div>
+    {isSettled && <p className="cms-publishing-published-note">{publishedAt ? <>Published since {formatDateTime(publishedAt)}.</> : <>Published.</>}{onUnpublish && <> Use the menu above to unpublish.</>}</p>}
+    {isScheduled && <p className="cms-scheduled-note">{isOverdue ? <>Was due {formatDateTime(scheduledAt)} — waiting for the scheduler to run.</> : <>Publishes automatically on {formatDateTime(scheduledAt)}.</>} <Button variant="ghost" compact className="cms-inline-unschedule" onClick={onUnschedule}>Unschedule</Button></p>}
+    <p aria-live="polite">{message}</p>
+
+    {approvalEnabled && <div className="cms-workflow-box">
+      {reviewStatus === 'draft' && canSubmitReview && <div className="cms-workflow-step">
+        <select value={pickedReviewer} onChange={(event) => setPickedReviewer(event.target.value)} aria-label="Choose a reviewer">
+          <option value="">Choose a reviewer…</option>
+          {reviewers?.map((reviewer) => <option key={reviewer.id} value={reviewer.id}>{reviewer.name}</option>)}
+        </select>
+        <Button variant="secondary" disabled={!pickedReviewer || saving !== null} onClick={() => onSubmitReview?.(pickedReviewer)}>{saving === 'workflow' ? 'Submitting…' : 'Submit for review'}</Button>
+      </div>}
+      {reviewStatus === 'in_review' && <p className="cms-workflow-note">Awaiting review{reviewerName ? ` from ${reviewerName}` : ''}.</p>}
+      {reviewStatus === 'in_review' && canReview && <div className="cms-workflow-step">
+        <Button variant="positive" disabled={saving !== null} onClick={() => onReviewDecision?.('approve')}>{saving === 'workflow' ? 'Saving…' : 'Pass review'}</Button>
+        <Button variant="negative" onClick={() => onReviewDecision?.('request_changes')}>Request changes</Button>
+      </div>}
+      {reviewStatus === 'reviewed' && <p className="cms-workflow-note">Passed review — awaiting approval to publish.</p>}
+      {reviewStatus === 'reviewed' && canApprove && <div className="cms-workflow-step">
+        <Button variant="positive" disabled={saving !== null} onClick={onApprove}>{saving === 'workflow' ? 'Approving…' : 'Approve'}</Button>
+      </div>}
+      {reviewStatus === 'approved' && !published && <p className="cms-workflow-note">Approved — ready to publish or schedule.</p>}
+    </div>}
+
+    {!isSettled && <>
+      <div className="cms-publishing-actions">
+        <Button variant="secondary" disabled={!dirty || saving !== null} onClick={onSaveDraft}>{saving === 'draft' ? 'Saving…' : 'Save draft'}</Button>
+        <Button variant="positive" disabled={publishDisabled} onClick={onPublish} icon={<span>↗</span>}>{publishLabel}</Button>
+      </div>
+      {!published && approvalEnabled && !isApproved && <small className="cms-schedule-hint">Needs approval before this can be published.</small>}
+      {onSchedule && <Button variant="secondary" disabled={saving !== null || !canSchedule || (approvalEnabled && !isApproved)} onClick={onSchedule}>{saving === 'schedule' ? 'Scheduling…' : isScheduled ? 'Update schedule' : 'Schedule'}</Button>}
+      {onSchedule && !canSchedule && !isScheduled && (!approvalEnabled || isApproved) && <small className="cms-schedule-hint">Pick a scheduled date below to enable this.</small>}
+    </>}
+    </aside>
+  </div>
+}

package/src/admin/RecordMeta.tsx

@@ -0,0 +1,24 @@
+type Props = {
+  createdByName?: string | null
+  updatedByName?: string | null
+  approvedByName?: string | null
+  ownerId?: string | null
+  owners?: Array<{ id: string; name: string }>
+  onOwnerChange?: (ownerId: string) => void
+}
+
+/** Who touched this record — rendered inside the "record" field group's own card in the main
+ *  content form, not as a separate floating panel (that used to duplicate the group's own
+ *  Created/Last updated fields with its own "Timeline" section — this only ever shows what
+ *  isn't already on the form: the people, not the dates). */
+export function RecordMeta({ createdByName, updatedByName, approvedByName, ownerId, owners, onOwnerChange }: Props) {
+  return <section className="cms-record-section cms-record-meta">
+    <div className="cms-record-section-heading"><strong>People</strong></div>
+    {owners && onOwnerChange && <label className="cms-audit-owner"><span>Current owner</span><select value={ownerId ?? ''} onChange={(event) => onOwnerChange(event.target.value)}><option value="">Unassigned</option>{owners.map((owner) => <option key={owner.id} value={owner.id}>{owner.name}</option>)}</select></label>}
+    <div className="cms-meta-list">
+      <div><span>Created by</span><strong>{createdByName || 'Not recorded'}</strong></div>
+      <div><span>Last updated by</span><strong>{updatedByName || 'Not recorded'}</strong></div>
+      {approvedByName !== undefined && <div><span>Approved by</span><strong>{approvedByName || 'Not approved'}</strong></div>}
+    </div>
+  </section>
+}

package/src/admin/ReviewQueueEditor.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { CmsSidebar } from './CmsSidebar'
+import { EditorHeader } from './EditorHeader'
+import { useToast } from './Toast'
+import { formatDateTime } from '../format'
+import { CardListSkeleton } from './EditorSkeleton'
+import { Button } from './Button'
+import type { CollectionSlug } from '../collections/types'
+
+type RawItem = { id: string; title: string; reviewStatus: string; reviewerId: string | null; updatedAt: string }
+type QueueItem = RawItem & { type: CollectionSlug }
+type UserOption = { id: string; name: string }
+// `labelSingular`/`titleField` per review-enabled collection — resolved server-side (the
+// registry is never populated on the client, `defineKiloConfig()` is server-only) and passed
+// down as a prop, same pattern as `CollectionRecordEditor`'s `config` prop.
+export type ReviewCollectionMeta = Record<CollectionSlug, { labelSingular: string; titleField: string }>
+
+const statusLabels: Record<string, string> = { in_review: 'In review', reviewed: 'Reviewed' }
+const hrefForType = (type: CollectionSlug, id: string) => `/admin/collections/${type}/${id}`
+const endpointForType = (type: CollectionSlug) => `/api/admin/collections/${type}`
+
+export function ReviewQueueEditor({ userName, currentUserId, canReview, canApprove, isAdmin, meta }: { userName: string; currentUserId: string; canReview: Record<CollectionSlug, boolean>; canApprove: Record<CollectionSlug, boolean>; isAdmin: boolean; meta: ReviewCollectionMeta }) {
+  const toast = useToast()
+  const labelForType = (type: CollectionSlug) => meta[type]?.labelSingular ?? type
+  const reviewSlugs = Object.keys(meta) as CollectionSlug[]
+  const [items, setItems] = useState<QueueItem[]>([])
+  const [users, setUsers] = useState<UserOption[]>([])
+  const [loading, setLoading] = useState(true)
+  const [busyId, setBusyId] = useState<string | null>(null)
+
+  async function load() {
+    setLoading(true)
+    try {
+      const [usersData, ...typeData] = await Promise.all([
+        fetch('/api/admin/users').then((response) => response.ok ? response.json() : []),
+        ...reviewSlugs.map((slug) => fetch(`/api/admin/collections/${slug}?pageSize=all`).then((response) => response.ok ? response.json() : { items: [] })),
+      ])
+      const merged: QueueItem[] = typeData.flatMap((data, index) =>
+        ((data as { items: Array<Record<string, unknown>> }).items ?? []).map((item) => ({
+          id: String(item.id),
+          title: String(item[meta[reviewSlugs[index]]?.titleField ?? 'id'] ?? ''),
+          reviewStatus: String(item.reviewStatus ?? 'draft'),
+          reviewerId: typeof item.reviewerId === 'string' ? item.reviewerId : null,
+          updatedAt: String(item.updatedAt ?? ''),
+          type: reviewSlugs[index],
+        })),
+      ).filter((item) => item.reviewStatus === 'in_review' || item.reviewStatus === 'reviewed')
+      merged.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
+      setItems(merged)
+      setUsers(usersData as UserOption[])
+    } finally {
+      setLoading(false)
+    }
+  }
+  useEffect(() => { load() }, [])
+
+  function reviewerName(id: string | null) { return users.find((user) => user.id === id)?.name ?? '—' }
+
+  async function reviewDecision(item: QueueItem, decision: 'approve' | 'request_changes') {
+    setBusyId(item.id)
+    try {
+      const response = await fetch(`${endpointForType(item.type)}/${item.id}/review`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ decision }) })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data?.error || 'Could not update review')
+      toast.success(decision === 'approve' ? 'Marked as reviewed.' : 'Sent back for changes.')
+      load()
+    } catch (error) { toast.error(error instanceof Error ? error.message : 'Could not update review') } finally { setBusyId(null) }
+  }
+
+  async function approve(item: QueueItem) {
+    setBusyId(item.id)
+    try {
+      const response = await fetch(`${endpointForType(item.type)}/${item.id}/approve`, { method: 'PATCH' })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data?.error || 'Could not approve')
+      toast.success('Approved — ready to publish.')
+      load()
+    } catch (error) { toast.error(error instanceof Error ? error.message : 'Could not approve') } finally { setBusyId(null) }
+  }
+
+  return <main className="cms-dashboard"><CmsSidebar active="review-queue" userName={userName} /><section className="cms-content">
+    <EditorHeader compact title="Review Queue" meta={`${items.length} awaiting action`} />
+    {loading ? <CardListSkeleton /> : <div className="cms-schedule-list">
+      {!items.length && <p className="cms-empty-state">Nothing awaiting review or approval.</p>}
+      {items.map((item) => {
+        const canActuallyReview = canReview[item.type] && item.reviewStatus === 'in_review' && (isAdmin || item.reviewerId === currentUserId)
+        const canActuallyApprove = canApprove[item.type] && item.reviewStatus === 'reviewed'
+        return <div className="cms-schedule-row" key={`${item.type}-${item.id}`}>
+          <span className="cms-schedule-time">{labelForType(item.type)}<span className="cms-status is-scheduled">{statusLabels[item.reviewStatus]}</span></span>
+          <a className="cms-schedule-title" href={hrefForType(item.type, item.id)}>{item.title || 'Untitled'}</a>
+          <span className="cms-schedule-category">Reviewer: {reviewerName(item.reviewerId)}<br />Updated {formatDateTime(item.updatedAt)}</span>
+          <div className="cms-schedule-actions">
+            {canActuallyReview && <Button variant="positive" compact disabled={busyId === item.id} onClick={() => void reviewDecision(item, 'approve')}>Pass review</Button>}
+            {canActuallyReview && <Button variant="negative" compact disabled={busyId === item.id} onClick={() => void reviewDecision(item, 'request_changes')}>Request changes</Button>}
+            {canActuallyApprove && <Button variant="positive" compact disabled={busyId === item.id} onClick={() => void approve(item)}>Approve</Button>}
+          </div>
+        </div>
+      })}
+    </div>}
+  </section></main>
+}

package/src/admin/RichTextEditor.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
+import Placeholder from '@tiptap/extension-placeholder'
+import Image from '@tiptap/extension-image'
+import { TableKit } from '@tiptap/extension-table'
+import { Field } from './Field'
+import { emptyRichText, type RichTextDocument } from '../richtext'
+import { ImageUploader } from './ImageUploader'
+import { AiWritingAssistant } from './AiWritingAssistant'
+
+type Props = { label: string; hint?: string; required?: boolean; error?: string; value: RichTextDocument; onChange: (value: RichTextDocument) => void }
+
+function ToolButton({ active, title, onClick, children, className = '' }: { active?: boolean; title: string; onClick: () => void; children: ReactNode; className?: string }) {
+  return <button type="button" title={title} aria-label={title} className={`${active ? 'active ' : ''}${className}`.trim()} onMouseDown={(event) => event.preventDefault()} onClick={onClick}>{children}</button>
+}
+
+function AiIcon() {
+  return <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8 13.7 9l6.2 1.7-6.2 1.7-1.7 6.2-1.7-6.2-6.2-1.7L10.3 9 12 2.8Zm6.6 12.3.7 2.5 2.5.7-2.5.7-.7 2.5-.7-2.5-2.5-.7 2.5-.7.7-2.5Z" /></svg>
+}
+
+function TableIcon() {
+  return <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v16H4V4Zm5 2H6v4h3V6Zm2 0v4h7V6h-7Zm-5 6v6h3v-6H6Zm5 0v6h7v-6h-7Z" /></svg>
+}
+
+export function RichTextEditor({ label, hint = 'Use the toolbar to format your content', required, error, value, onChange }: Props) {
+  const [aiOpen, setAiOpen] = useState(false)
+  const [schemaEpoch, setSchemaEpoch] = useState(0)
+  const tableInstanceRecovered = useRef(false)
+  const editor = useEditor({
+    immediatelyRender: false,
+    extensions: [StarterKit.configure({ heading: { levels: [2, 3, 4] } }), Link.configure({ openOnClick: false, autolink: true, defaultProtocol: 'https' }), Image.configure({ inline: false, allowBase64: false }), TableKit.configure({ table: { resizable: true, HTMLAttributes: { class: 'cms-editor-table' } } }), Placeholder.configure({ placeholder: 'Write your story…' })],
+    content: value || emptyRichText,
+    onUpdate: ({ editor: current }) => onChange(current.getJSON() as RichTextDocument),
+    editorProps: { attributes: { class: 'cms-richtext-content', 'aria-label': label } },
+  }, [schemaEpoch])
+  useEffect(() => {
+    if (!editor || typeof editor.commands.insertTable === 'function' || tableInstanceRecovered.current) return
+    tableInstanceRecovered.current = true
+    setSchemaEpoch((current) => current + 1)
+  }, [editor])
+  useEffect(() => { if (!editor) return; const next = JSON.stringify(value || emptyRichText); if (JSON.stringify(editor.getJSON()) !== next) editor.commands.setContent(value || emptyRichText, { emitUpdate: false }) }, [editor, value])
+  function setLink() { if (!editor) return; const previous = editor.getAttributes('link').href as string | undefined; const href = window.prompt('Paste a URL', previous || 'https://'); if (href === null) return; if (!href.trim()) { editor.chain().focus().extendMarkRange('link').unsetLink().run(); return } editor.chain().focus().extendMarkRange('link').setLink({ href }).run() }
+  function insertTable() { const chain = editor?.chain().focus(); if (!chain || typeof chain.insertTable !== 'function') { setSchemaEpoch((current) => current + 1); return } chain.insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() }
+  return <><Field label={label} hint={hint} required={required} error={error}><div className="cms-richtext"><div className="cms-richtext-toolbar" role="toolbar" aria-label={`${label} formatting`}><ToolButton title="Paragraph" active={editor?.isActive('paragraph')} onClick={() => editor?.chain().focus().setParagraph().run()}>P</ToolButton><ToolButton title="Heading 2" active={editor?.isActive('heading', { level: 2 })} onClick={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()}>H2</ToolButton><ToolButton title="Heading 3" active={editor?.isActive('heading', { level: 3 })} onClick={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()}>H3</ToolButton><i /><ToolButton title="Bold" active={editor?.isActive('bold')} onClick={() => editor?.chain().focus().toggleBold().run()}><b>B</b></ToolButton><ToolButton title="Italic" active={editor?.isActive('italic')} onClick={() => editor?.chain().focus().toggleItalic().run()}><em>I</em></ToolButton><ToolButton title="Strike through" active={editor?.isActive('strike')} onClick={() => editor?.chain().focus().toggleStrike().run()}><s>S</s></ToolButton><ToolButton title="Inline code" active={editor?.isActive('code')} onClick={() => editor?.chain().focus().toggleCode().run()}>&lt;/&gt;</ToolButton><i /><ToolButton title="Bullet list" active={editor?.isActive('bulletList')} onClick={() => editor?.chain().focus().toggleBulletList().run()}>•≡</ToolButton><ToolButton title="Numbered list" active={editor?.isActive('orderedList')} onClick={() => editor?.chain().focus().toggleOrderedList().run()}>1≡</ToolButton><ToolButton title="Quote" active={editor?.isActive('blockquote')} onClick={() => editor?.chain().focus().toggleBlockquote().run()}>❝</ToolButton><i /><ToolButton title="Add link" active={editor?.isActive('link')} onClick={setLink}>↗</ToolButton><ImageUploader compact title="Insert image from Media Library or upload" label="▧" value="" onChange={(url) => editor?.chain().focus().setImage({ src: url }).run()} /><ToolButton title="Insert table (3 × 3)" onClick={insertTable}><TableIcon /></ToolButton>{editor?.isActive('table') && <><i /><ToolButton title="Add row below" onClick={() => editor.chain().focus().addRowAfter().run()}>+R</ToolButton><ToolButton title="Remove current row" onClick={() => editor.chain().focus().deleteRow().run()}>−R</ToolButton><ToolButton title="Add column after" onClick={() => editor.chain().focus().addColumnAfter().run()}>+C</ToolButton><ToolButton title="Remove current column" onClick={() => editor.chain().focus().deleteColumn().run()}>−C</ToolButton><ToolButton title="Toggle header row" active={editor.isActive('tableHeader')} onClick={() => editor.chain().focus().toggleHeaderRow().run()}>TH</ToolButton><ToolButton title="Merge or split selected cells" onClick={() => editor.chain().focus().mergeOrSplit().run()}>⊞</ToolButton><ToolButton title="Delete table" onClick={() => editor.chain().focus().deleteTable().run()}>×</ToolButton></>}<ToolButton className="cms-richtext-ai" title="AI writing assistant" onClick={() => setAiOpen(true)}><AiIcon />AI</ToolButton><i /><ToolButton title="Undo" onClick={() => editor?.chain().focus().undo().run()}>↶</ToolButton><ToolButton title="Redo" onClick={() => editor?.chain().focus().redo().run()}>↷</ToolButton></div><EditorContent editor={editor} /></div></Field><AiWritingAssistant editor={editor} open={aiOpen} onClose={() => setAiOpen(false)} /></>
+}

package/src/admin/RoleEditor.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { CmsSidebar } from './CmsSidebar'
+import { EditorHeader } from './EditorHeader'
+import { useToast } from './Toast'
+import { TextField } from './Field'
+import { EditorSkeleton } from './EditorSkeleton'
+import { Button } from './Button'
+import {
+  actionLabels, contentTypeDefs, contentTypeKeys, emptyRolePermissions, systemPermissionLabels, systemPermissions,
+  type ActionKey, type ContentTypeKey, type StoredRolePermissions, type SystemPermission,
+} from '../content-types'
+
+type Role = { id: string; name: string; permissions: StoredRolePermissions; isSystem: boolean }
+const emptyRole = (): Role => ({ id: '', name: '', permissions: emptyRolePermissions, isSystem: false })
+
+function SelectAll({ label, checked, partial, disabled, onChange }: { label: string; checked: boolean; partial: boolean; disabled: boolean; onChange: (checked: boolean) => void }) {
+  const input = useRef<HTMLInputElement>(null)
+  useEffect(() => { if (input.current) input.current.indeterminate = partial && !checked }, [checked, partial])
+  return <label className="cms-permission-select-all"><input ref={input} type="checkbox" checked={checked} disabled={disabled} onChange={(event) => onChange(event.target.checked)} />{label}</label>
+}
+
+export function RoleEditor({ id, userName }: { id: string; userName: string }) {
+  const router = useRouter()
+  const toast = useToast()
+  const isNew = id === 'new'
+  const [role, setRole] = useState<Role | null>(isNew ? emptyRole() : null)
+  const [loading, setLoading] = useState(!isNew)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (isNew) return
+    fetch(`/api/admin/roles/${id}`).then((response) => response.ok ? response.json() : null).then((data: Role | null) => { if (data) setRole({ ...data, permissions: { ...emptyRolePermissions, ...data.permissions } }) }).finally(() => setLoading(false))
+  }, [id, isNew])
+
+  function toggleAction(type: ContentTypeKey, action: ActionKey) {
+    setRole((current) => {
+      if (!current) return current
+      const contentTypes = { ...current.permissions.contentTypes }
+      const existing = contentTypes[type] ?? { actions: [], fields: [] }
+      const hasAction = existing.actions.includes(action)
+      const nextActions = hasAction ? existing.actions.filter((item) => item !== action) : [...existing.actions, action]
+      const gainingFieldAccess = !hasAction && (action === 'update' || action === 'create') && existing.fields.length === 0
+      const nextFields = gainingFieldAccess ? contentTypeDefs[type].fields.map((field) => field.key) : existing.fields
+      contentTypes[type] = { actions: nextActions, fields: nextFields }
+      return { ...current, permissions: { ...current.permissions, contentTypes } }
+    })
+  }
+
+  function toggleAllActions(type: ContentTypeKey, checked: boolean) {
+    setRole((current) => current && { ...current, permissions: { ...current.permissions, contentTypes: { ...current.permissions.contentTypes, [type]: { ...(current.permissions.contentTypes[type] ?? { fields: [] }), actions: checked ? [...contentTypeDefs[type].actions] : [] } } } })
+  }
+
+  function toggleField(type: ContentTypeKey, fieldKey: string) {
+    setRole((current) => {
+      if (!current) return current
+      const contentTypes = { ...current.permissions.contentTypes }
+      const existing = contentTypes[type] ?? { actions: [], fields: [] }
+      const nextFields = existing.fields.includes(fieldKey) ? existing.fields.filter((item) => item !== fieldKey) : [...existing.fields, fieldKey]
+      contentTypes[type] = { ...existing, fields: nextFields }
+      return { ...current, permissions: { ...current.permissions, contentTypes } }
+    })
+  }
+
+  function toggleAllFields(type: ContentTypeKey, checked: boolean) {
+    setRole((current) => current && { ...current, permissions: { ...current.permissions, contentTypes: { ...current.permissions.contentTypes, [type]: { ...(current.permissions.contentTypes[type] ?? { actions: [] }), fields: checked ? contentTypeDefs[type].fields.map((field) => field.key) : [] } } } })
+  }
+
+  function toggleSystem(permission: SystemPermission) {
+    setRole((current) => current && { ...current, permissions: { ...current.permissions, system: current.permissions.system.includes(permission) ? current.permissions.system.filter((item) => item !== permission) : [...current.permissions.system, permission] } })
+  }
+
+  function toggleAllSystem(checked: boolean) {
+    setRole((current) => current && { ...current, permissions: { ...current.permissions, system: checked ? [...systemPermissions] : [] } })
+  }
+
+  async function save() {
+    if (!role) return
+    if (!role.name.trim()) { toast.error('Give the role a display name.'); return }
+    if (isNew && !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(role.id)) { toast.error('Use a lowercase role ID with letters, numbers, and hyphens.'); return }
+    setSaving(true)
+    try {
+      const response = await fetch(isNew ? '/api/admin/roles' : `/api/admin/roles/${id}`, { method: isNew ? 'POST' : 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(isNew ? { id: role.id, name: role.name, permissions: role.permissions } : { name: role.name, permissions: role.permissions }) })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error)
+      toast.success(isNew ? 'Role created.' : 'Permissions saved.')
+      if (isNew) router.replace(`/admin/roles/${data.id}`)
+    } catch (error) { toast.error(error instanceof Error ? error.message : 'Could not save role') } finally { setSaving(false) }
+  }
+
+  if (loading) return <main className="cms-dashboard"><CmsSidebar active="roles" userName={userName} /><section className="cms-content"><EditorSkeleton sections={2} /></section></main>
+  if (!role) { router.push('/admin/roles'); return null }
+
+  const disabled = role.isSystem
+
+  return <main className="cms-dashboard"><CmsSidebar active="roles" userName={userName} /><section className="cms-content">
+    <EditorHeader compact title={isNew ? 'New role' : role.name} backHref="/admin/roles" backLabel="All roles" actions={!disabled ? <Button variant="positive" type="button" onClick={() => void save()} disabled={saving} icon="↗">{saving ? 'Saving…' : isNew ? 'Create role' : 'Save permissions'}</Button> : undefined} />
+    {!disabled && <section className="cms-section cms-role-details"><div className="cms-section-heading"><p className="section-label">Role details</p><p>{isNew ? 'The ID is used internally and cannot be changed later.' : 'Update the display name for this role.'}</p></div><div className="cms-two-columns"><TextField label="Role ID" required value={role.id} disabled={!isNew} onChange={(event) => setRole((current) => current && { ...current, id: event.target.value })} hint="lowercase-with-hyphens" /><TextField label="Display name" required value={role.name} onChange={(event) => setRole((current) => current && { ...current, name: event.target.value })} /></div></section>}
+    {disabled && <p className="cms-ai-status">This is the built-in Administrator role — it always has every permission and can&rsquo;t be changed.</p>}
+    <div className="cms-roles-grid">
+      {contentTypeKeys.map((key) => {
+        const def = contentTypeDefs[key]
+        const current = role.permissions.contentTypes[key] ?? { actions: [], fields: [] }
+        const canEditFields = disabled || current.actions.includes('update') || current.actions.includes('create')
+        return <section className="cms-section cms-role-card" key={key}>
+          <div className="cms-section-heading"><p className="section-label">{def.label}</p><p>{def.kind === 'single' ? 'Single type' : 'Collection'}</p></div>
+          <div className="cms-permission-toolbar"><span>Actions</span><SelectAll label="Select all" checked={disabled || def.actions.every((action) => current.actions.includes(action))} partial={!disabled && current.actions.some((action) => current.actions.includes(action)) && !def.actions.every((action) => current.actions.includes(action))} disabled={disabled} onChange={(checked) => toggleAllActions(key, checked)} /></div>
+          <div className="cms-permission-grid">{def.actions.map((action) => <label key={action} className="cms-permission-item"><input type="checkbox" checked={disabled || current.actions.includes(action)} disabled={disabled} onChange={() => toggleAction(key, action)} />{actionLabels[action]}</label>)}</div>
+          {canEditFields && <details className="cms-publishing-details" open><summary>Fields</summary><div className="cms-permission-toolbar"><span>Field access</span><SelectAll label="Select all" checked={disabled || def.fields.every((field) => current.fields.includes(field.key))} partial={!disabled && def.fields.some((field) => current.fields.includes(field.key)) && !def.fields.every((field) => current.fields.includes(field.key))} disabled={disabled} onChange={(checked) => toggleAllFields(key, checked)} /></div><div className="cms-permission-grid">{def.fields.map((field) => <label key={field.key} className="cms-permission-item"><input type="checkbox" checked={disabled || current.fields.includes(field.key)} disabled={disabled} onChange={() => toggleField(key, field.key)} />{field.label}</label>)}</div></details>}
+        </section>
+      })}
+      <section className="cms-section cms-role-card">
+        <div className="cms-section-heading"><p className="section-label">System</p><p>Not tied to a specific content type</p></div>
+        <div className="cms-permission-toolbar"><span>Permissions</span><SelectAll label="Select all" checked={disabled || systemPermissions.every((permission) => role.permissions.system.includes(permission))} partial={!disabled && systemPermissions.some((permission) => role.permissions.system.includes(permission)) && !systemPermissions.every((permission) => role.permissions.system.includes(permission))} disabled={disabled} onChange={toggleAllSystem} /></div>
+        <div className="cms-permission-grid">{systemPermissions.map((permission) => <label key={permission} className="cms-permission-item"><input type="checkbox" checked={disabled || role.permissions.system.includes(permission)} disabled={disabled} onChange={() => toggleSystem(permission)} />{systemPermissionLabels[permission]}</label>)}</div>
+      </section>
+    </div>
+  </section></main>
+}

package/src/admin/RolesEditor.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { CmsSidebar } from './CmsSidebar'
+import { EditorHeader } from './EditorHeader'
+import { useToast } from './Toast'
+import { ListingSkeleton } from './ListingView'
+import { Button } from './Button'
+
+type RoleRow = { id: string; name: string; isSystem: boolean; userCount: number }
+
+export function RolesEditor({ userName }: { userName: string }) {
+  const toast = useToast()
+  const [roles, setRoles] = useState<RoleRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [q, setQ] = useState('')
+
+  function load() { setLoading(true); fetch('/api/admin/roles').then((response) => response.ok ? response.json() : []).then(setRoles).finally(() => setLoading(false)) }
+  useEffect(() => { load() }, [])
+
+  async function removeRole(role: RoleRow) {
+    if (!confirm(`Delete role "${role.name}"? Any user with this role keeps the value until reassigned.`)) return
+    const response = await fetch(`/api/admin/roles/${role.id}`, { method: 'DELETE' })
+    if (response.ok) { toast.success('Role deleted.'); load() } else toast.error('Could not delete role.')
+  }
+
+  const filtered = q ? roles.filter((role) => role.name.toLowerCase().includes(q.toLowerCase())) : roles
+
+  return <main className="cms-dashboard"><CmsSidebar active="roles" userName={userName} /><section className="cms-content">
+    <EditorHeader compact title="Roles" meta={`${roles.length} roles`} actions={<Button variant="positive" href="/admin/roles/new" icon="↗">Add role</Button>} />
+    <div className="cms-filter-bar">
+      <input className="cms-search-input" value={q} onChange={(event) => setQ(event.target.value)} placeholder="Search roles…" />
+    </div>
+    {loading ? <ListingSkeleton view="table" columnCount={3} /> : <div className="cms-table-wrap"><table className="cms-table"><thead><tr><th>Role</th><th>Users</th><th /></tr></thead><tbody>
+      {filtered.map((role) => <tr key={role.id}>
+        <td><a className="cms-row-title" href={`/admin/roles/${role.id}`}><strong>{role.name}</strong></a>{role.isSystem && <span className="cms-table-id"> Built-in</span>}</td>
+        <td>{role.userCount}</td>
+        <td>{!role.isSystem && <Button variant="negative" compact type="button" onClick={() => void removeRole(role)}>Delete</Button>}</td>
+      </tr>)}
+    </tbody></table>{!filtered.length && <p className="cms-empty-state">No roles match your search.</p>}</div>}
+  </section></main>
+}

package/src/admin/RowActionsMenu.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { Portal } from './Portal'
+import { Button } from './Button'
+
+export type ActionIconName = 'edit' | 'duplicate' | 'preview' | 'trash' | 'restore' | 'publish' | 'unpublish'
+type MenuItem = { label: string; icon?: ActionIconName; onClick?: () => void; href?: string; newTab?: boolean; danger?: boolean }
+
+export function ActionIcon({ name }: { name: ActionIconName }) {
+  const paths: Record<ActionIconName, ReactNode> = {
+    edit: <><path d="M12 20h9" /><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" /></>,
+    duplicate: <><rect x="9" y="9" width="12" height="12" rx="2" /><path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1" /></>,
+    preview: <><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></>,
+    trash: <><path d="M4 7h16" /><path d="M10 11v6" /><path d="M14 11v6" /><path d="M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13" /><path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" /></>,
+    restore: <><path d="M3 10a9 9 0 1 1 2.6 6.4" /><path d="M3 4v6h6" /></>,
+    publish: <><circle cx="12" cy="12" r="9" /><path d="M8 12.5l2.5 2.5L16 9" /></>,
+    unpublish: <><circle cx="12" cy="12" r="9" /><path d="M8 8l8 8" /></>,
+  }
+  return <svg className="cms-action-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{paths[name]}</svg>
+}
+
+function MoreIcon() {
+  return <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="12" cy="19" r="1.6" /></svg>
+}
+
+export function RowActionsMenu({ items }: { items: MenuItem[] }) {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState<{ top: number; left: number } | null>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    function handleOutside(event: MouseEvent) {
+      const target = event.target as Node
+      if (triggerRef.current?.contains(target) || menuRef.current?.contains(target)) return
+      setOpen(false)
+    }
+    function handleKey(event: KeyboardEvent) { if (event.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', handleOutside)
+    document.addEventListener('keydown', handleKey)
+    return () => { document.removeEventListener('mousedown', handleOutside); document.removeEventListener('keydown', handleKey) }
+  }, [open])
+
+  function toggle() {
+    if (!open && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect()
+      const dropdownHeight = items.length * 40 + 12
+      const openUpward = rect.bottom + dropdownHeight > window.innerHeight
+      setPosition({ top: openUpward ? rect.top - dropdownHeight - 4 : rect.bottom + 4, left: Math.max(8, Math.min(rect.right - 170, window.innerWidth - 180)) })
+    }
+    setOpen((current) => !current)
+  }
+
+  return <div className="cms-row-menu">
+    <button ref={triggerRef} type="button" className="cms-row-menu-trigger" onClick={toggle} aria-label="Actions"><MoreIcon /></button>
+    {open && position && <Portal><div ref={menuRef} className="cms-row-menu-dropdown" style={{ position: 'fixed', top: position.top, left: position.left }}>
+      {items.map((item, index) => item.href
+        ? <a key={index} href={item.href} target={item.newTab ? '_blank' : undefined} rel={item.newTab ? 'noreferrer' : undefined} className={item.danger ? 'danger' : ''} onClick={() => setOpen(false)}>{item.icon && <ActionIcon name={item.icon} />}{item.label}</a>
+        : <Button key={index} variant={item.danger ? 'negative' : 'ghost'} compact type="button" className={item.danger ? 'danger' : ''} onClick={() => { item.onClick?.(); setOpen(false) }} icon={item.icon ? <ActionIcon name={item.icon} /> : undefined} iconPosition="before">{item.label}</Button>)}
+    </div></Portal>}
+  </div>
+}