kilo-cms 0.1.0

package/src/admin/globals.css

@@ -0,0 +1,14 @@
+@import '@fontsource/dm-sans/400.css';
+@import '@fontsource/dm-sans/500.css';
+@import '@fontsource/dm-sans/600.css';
+@import '@fontsource/dm-sans/700.css';
+@import '@fontsource/dm-sans/400-italic.css';
+@import '@fontsource/dm-sans/500-italic.css';
+@import '@fontsource/dm-sans/600-italic.css';
+@import '@fontsource/dm-sans/700-italic.css';
+:root{--ink:#171717;--paper:#f3f1ed;--acid:#d9ff55;--acid-hover:#ecff9b;--acid-ink:#171717;--muted:#696863;--line:rgba(23,23,23,.18);--danger:#c43b2d;--danger-soft:#ff9c8f;--canvas:#e5e1d9;--surface:#fff;--surface-soft:#f8f7f4;--radius:8px;--radius-sm:6px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px}
+[data-theme="dark"]{--ink:#f3f1ed;--paper:#171717;--acid:#d9ff55;--acid-hover:#ecff9b;--acid-ink:#171717;--muted:#94938c;--line:rgba(243,241,237,.18);--danger:#ff6b57;--danger-soft:#7a2318;--canvas:#242424;--surface:#2d2d2d;--surface-soft:#353535}
+html[data-theme="light"]{color-scheme:light}html[data-theme="dark"]{color-scheme:dark}
+*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}.shell{width:min(1240px,calc(100% - 64px));margin:auto}.nav{height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-weight:700;letter-spacing:-.05em;font-size:20px;color:inherit;text-decoration:none}.logo span{font-size:9px;vertical-align:top;margin-left:2px}.nav-links{display:flex;gap:36px;font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase}.nav a{color:inherit;text-decoration:none}.nav-dot{width:36px;height:36px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:18px}.hero{min-height:680px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:70px;padding-bottom:90px}.eyebrow,.section-label{font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.05em}.eyebrow{color:var(--muted);margin:0 0 28px}.hero h1{font-size:clamp(72px,10vw,150px);line-height:.84;letter-spacing:-.09em;margin:0;max-width:700px}.hero-description{font-size:18px;line-height:1.35;max-width:340px;margin:42px 0 30px}.button{display:inline-flex;gap:30px;align-items:center;justify-content:space-between;padding:15px 18px;text-decoration:none;font:11px 'DM Mono',monospace;text-transform:uppercase;min-width:200px}.button-dark{background:var(--ink);color:var(--paper)}.button-light{background:var(--acid);color:var(--ink);min-width:260px}.hero-art{height:440px;background:#d6d1c8;position:relative;overflow:hidden}.art-caption{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;font:10px 'DM Mono',monospace;text-transform:uppercase;z-index:2}.art-shape{position:absolute;border-radius:50%}.art-shape-one{background:var(--acid);width:380px;height:380px;right:-100px;top:55px}.art-shape-two{background:#ef604f;width:260px;height:260px;left:-40px;bottom:-30px}.art-type{font-size:220px;font-weight:700;letter-spacing:-.13em;position:absolute;left:80px;top:100px;z-index:1;color:var(--ink)}.band{background:var(--acid)}.intro{padding:120px 0}.intro-grid{display:grid;grid-template-columns:1fr 2fr 1fr;gap:40px}.intro h2{font-size:clamp(44px,6vw,78px);line-height:.92;letter-spacing:-.07em;margin:0}.intro h2 em,.footer h2 em{font-style:normal;font-family:Georgia,serif;font-weight:400}.intro-text{font-size:16px;line-height:1.45;max-width:260px;margin:0}.services{padding:120px 0}.section-head{display:flex;justify-content:space-between;margin-bottom:70px}.section-note,.text-link{font:11px 'DM Mono',monospace;text-transform:uppercase;color:var(--muted);text-decoration:none;margin:0}.service-row{display:grid;grid-template-columns:70px 1.3fr 1fr 40px;align-items:center;border-top:1px solid var(--line);padding:27px 0}.service-row:last-child{border-bottom:1px solid var(--line)}.service-row span:first-child{font:12px 'DM Mono',monospace;color:var(--muted)}.service-row h3{font-size:34px;letter-spacing:-.06em;margin:0}.service-row p{font-size:14px;line-height:1.4;max-width:260px;margin:0}.row-arrow{font-size:24px;text-align:right}.work{padding:110px 0 130px}.work-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:end}.work-image{height:450px;position:relative;overflow:hidden;background:#ddd}.work-card-large .work-image{height:580px}.work-image img{object-fit:cover;transition:transform .5s}.work-card:hover img{transform:scale(1.04)}.work-card p{font:10px 'DM Mono',monospace;text-transform:uppercase;color:var(--muted);margin:18px 0 7px}.work-card h3{font-size:28px;letter-spacing:-.05em;margin:0}.footer{background:var(--ink);color:var(--paper);padding:110px 0 30px}.footer .section-label{color:#aaa}.footer h2{font-size:clamp(60px,10vw,140px);line-height:.84;letter-spacing:-.09em;margin:80px 0 55px}.footer-bottom{border-top:1px solid rgba(243,241,237,.3);padding-top:18px;margin-top:140px;display:flex;justify-content:space-between;color:#aaa;font:10px 'DM Mono',monospace;text-transform:uppercase}@media(max-width:760px){.shell{width:calc(100% - 40px)}.nav{height:70px}.nav-links{display:none}.hero{display:block;padding:70px 0 50px;min-height:0}.hero h1{font-size:76px}.hero-art{height:330px;margin-top:70px}.art-type{font-size:160px;left:45px;top:85px}.intro{padding:75px 0}.intro-grid{display:block}.intro h2{margin:45px 0 35px;font-size:56px}.intro-text{max-width:330px}.services{padding:75px 0}.section-head{margin-bottom:45px}.service-row{grid-template-columns:34px 1fr 26px;gap:8px}.service-row h3{font-size:25px}.service-row p{grid-column:2;margin-top:7px}.row-arrow{grid-column:3;grid-row:1}.work{padding:75px 0}.work-grid{display:block}.work-card{margin-bottom:55px}.work-image,.work-card-large .work-image{height:330px}.footer{padding-top:75px}.footer h2{font-size:72px;margin:60px 0 40px}.footer-bottom{gap:12px;flex-wrap:wrap;margin-top:100px}}
+.richtext-content{max-width:760px;margin:44px 0;font-size:18px;line-height:1.7}.richtext-content p{margin:0 0 20px}.richtext-content h2,.richtext-content h3,.richtext-content h4{letter-spacing:-.055em;line-height:1;margin:42px 0 17px}.richtext-content h2{font-size:clamp(32px,4vw,48px)}.richtext-content h3{font-size:30px}.richtext-content h4{font-size:23px}.richtext-content ul,.richtext-content ol{padding-left:24px;margin:0 0 22px}.richtext-content blockquote{margin:28px 0;padding-left:20px;border-left:3px solid var(--acid);font:italic 24px/1.4 Georgia,serif}.richtext-content code{padding:2px 5px;background:#e3e1dc;font:13px 'DM Mono',monospace}.richtext-content a{text-decoration-color:#8eb500;text-decoration-thickness:3px;text-underline-offset:3px;color:inherit}.richtext-content img{display:block;width:100%;height:auto;margin:32px 0}.richtext-table-wrap{margin:32px 0;overflow-x:auto;border:1px solid var(--ink)}.richtext-table-wrap table{width:100%;min-width:520px;border-collapse:collapse}.richtext-table-wrap th,.richtext-table-wrap td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}.richtext-table-wrap th{background:var(--acid);font-size:14px}.richtext-table-wrap td p{margin:0}
+*,*::before,*::after{font-family:'DM Sans',sans-serif!important}

package/src/admin/pages/admin-index.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function AdminPage() {
+  redirect('/admin/dashboard')
+}

package/src/admin/pages/ai-settings.tsx

@@ -0,0 +1,9 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { AiSettingsEditor } from '../AiSettingsEditor'
+
+export default async function AiSettingsPage() {
+  const result = await getSessionWithPermissions()
+  if (!result || !result.can('settings', 'read')) redirect('/admin/login')
+  return <AiSettingsEditor userName={result.session.user.name} canManageAi={result.hasSystem('ai.manage')} />
+}

package/src/admin/pages/api-tokens.tsx

@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { ApiTokensEditor } from '../ApiTokensEditor'
+
+export default async function ApiTokensPage() {
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  if (!result.hasSystem('developers.manage')) redirect('/admin/settings')
+  return <ApiTokensEditor userName={result.session.user.name} />
+}

package/src/admin/pages/collection-list.tsx

@@ -0,0 +1,22 @@
+import { notFound, redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { getCollection } from '../../collections'
+import { CollectionListEditor } from '../CollectionListEditor'
+
+export default async function CollectionListPage({ params }: { params: Promise<{ collection: string }> }) {
+  const { collection } = await params
+  const config = getCollection(collection)
+  if (!config) notFound()
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  if (!result.can(config.slug, 'read')) redirect('/admin/dashboard')
+  return (
+    <CollectionListEditor
+      config={config}
+      userName={result.session.user.name}
+      canCreate={result.can(config.slug, 'create')}
+      canPublish={result.can(config.slug, 'publish')}
+      canDelete={result.can(config.slug, 'delete')}
+    />
+  )
+}

package/src/admin/pages/collection-record.tsx

@@ -0,0 +1,31 @@
+import { notFound, redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { getCollection } from '../../collections'
+import { CollectionRecordEditor } from '../CollectionRecordEditor'
+
+export default async function CollectionRecordPage({ params }: { params: Promise<{ collection: string; id: string }> }) {
+  const { collection, id } = await params
+  const config = getCollection(collection)
+  if (!config) notFound()
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  if (!result.can(config.slug, 'read')) redirect('/admin/dashboard')
+  return (
+    <CollectionRecordEditor
+      config={config}
+      id={id}
+      userName={result.session.user.name}
+      currentUserId={result.session.user.id}
+      canCreate={result.can(config.slug, 'create')}
+      canUpdate={result.can(config.slug, 'update')}
+      canPublish={result.can(config.slug, 'publish')}
+      canDelete={result.can(config.slug, 'delete')}
+      allowedFields={result.allowedFields(config.slug)}
+      canConfigureViews={result.hasSystem('views.manage')}
+      canSubmitReview={result.can(config.slug, 'submit_review')}
+      canReview={result.can(config.slug, 'review')}
+      canApprove={result.can(config.slug, 'approve')}
+      isAdmin={result.isSystem}
+    />
+  )
+}

package/src/admin/pages/dashboard.tsx

@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { getDashboardSources } from '../../dashboard'
+import { DashboardBuilder } from '../DashboardBuilder'
+
+export default async function DashboardPage() {
+  const result = await getSessionWithPermissions()
+  if (!result || !result.can('settings', 'read')) redirect('/admin/login')
+  return <DashboardBuilder userName={result.session.user.name} canUpdate={result.can('settings', 'update')} dashboardSources={getDashboardSources()} />
+}

package/src/admin/pages/email-settings.tsx

@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { EmailSettingsEditor } from '../EmailSettingsEditor'
+
+export default async function EmailSettingsPage() {
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  if (!result.hasSystem('developers.manage')) redirect('/admin/settings')
+  return <EmailSettingsEditor userName={result.session.user.name} />
+}

package/src/admin/pages/layout.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from 'next'
+import { ToastProvider } from '../Toast'
+import { CmsSiteSettingsProvider } from '../CmsSiteSettingsProvider'
+import { CmsLocalesProvider } from '../CmsLocalesProvider'
+import { CmsThemeProvider } from '../CmsThemeProvider'
+import { getSiteSettings } from '../../seo'
+import { getLocaleConfig } from '../../locale-settings'
+import { appearanceCssVariables } from '../../cms-appearance'
+import '../globals.css'
+import '../admin.css'
+
+export async function generateMetadata(): Promise<Metadata> {
+  const settings = await getSiteSettings()
+  const title = /cms/i.test(settings.siteName) ? settings.siteName : `${settings.siteName} CMS`
+  return { title }
+}
+
+export default async function AdminRootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  const [settings, localeConfig] = await Promise.all([getSiteSettings(), getLocaleConfig()])
+  const initialSettings = { siteName: settings.siteName, logoLight: settings.logoLight, logoDark: settings.logoDark, publishingWorkflow: settings.publishingWorkflow }
+  const appearanceByTheme = { light: appearanceCssVariables(settings.cmsAppearance, 'light'), dark: appearanceCssVariables(settings.cmsAppearance, 'dark') }
+  const themeBootScript = `try { var pref = window.localStorage.getItem('cms-theme'); var theme = (pref === 'dark' || pref === 'light') ? pref : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); document.documentElement.dataset.theme = theme; var vars = ${JSON.stringify(appearanceByTheme)}[theme]; Object.keys(vars).forEach(function (key) { document.documentElement.style.setProperty(key, vars[key]) }) } catch (error) { /* localStorage can be unavailable */ }`
+  return <html lang="id" suppressHydrationWarning style={appearanceByTheme.light}><head><script dangerouslySetInnerHTML={{ __html: themeBootScript }} /></head><body><CmsThemeProvider initialAppearance={settings.cmsAppearance}><CmsSiteSettingsProvider initialSettings={initialSettings}><CmsLocalesProvider localeConfig={localeConfig}><ToastProvider>{children}</ToastProvider></CmsLocalesProvider></CmsSiteSettingsProvider></CmsThemeProvider></body></html>
+}

package/src/admin/pages/locales-settings.tsx

@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { LocalesEditor } from '../LocalesEditor'
+
+export default async function LocalesPage() {
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  if (!result.hasSystem('locales.manage')) redirect('/admin/settings')
+  return <LocalesEditor userName={result.session.user.name} />
+}

package/src/admin/pages/login.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { FormEvent, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { authClient } from '../../auth-client'
+import { useCmsSiteSettings } from '../CmsSiteSettingsProvider'
+import { Button } from '../Button'
+
+export default function LoginPage() {
+  const router = useRouter()
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const { settings } = useCmsSiteSettings()
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault(); setError(''); setLoading(true)
+    const form = new FormData(event.currentTarget)
+    const result = await authClient.signIn.email({ email: String(form.get('email')), password: String(form.get('password')) })
+    setLoading(false)
+    if (result.error) setError('Email atau password salah.')
+    else router.push('/admin/dashboard')
+  }
+
+  return <main className="auth-shell"><div className="auth-panel"><p className="eyebrow">{settings.siteName} / CMS</p><h1>Welcome back.</h1><p className="auth-copy">Masuk untuk mengelola konten website.</p><form onSubmit={submit}><label>Email<input name="email" type="email" required autoComplete="email" /></label><label>Password<input name="password" type="password" required autoComplete="current-password" /></label>{error && <p className="form-error">{error}</p>}<Button variant="primary" type="submit" disabled={loading} icon="↗">{loading ? 'Signing in...' : 'Sign in'}</Button></form></div></main>
+}

package/src/admin/pages/media.tsx

@@ -0,0 +1,9 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { MediaLibrary } from '../MediaLibrary'
+
+export default async function MediaPage() {
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  return <MediaLibrary userName={result.session.user.name} />
+}

package/src/admin/pages/review-queue.tsx

@@ -0,0 +1,20 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { getCollection, isCollectionSlug, reviewableSlugs, type CollectionSlug } from '../../collections'
+import { ReviewQueueEditor, type ReviewCollectionMeta } from '../ReviewQueueEditor'
+
+export default async function ReviewQueuePage() {
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  const reviewSlugs = reviewableSlugs.filter((slug): slug is CollectionSlug => isCollectionSlug(slug))
+  const canReview = Object.fromEntries(reviewSlugs.map((slug) => [slug, result.can(slug, 'review')])) as Record<CollectionSlug, boolean>
+  const canApprove = Object.fromEntries(reviewSlugs.map((slug) => [slug, result.can(slug, 'approve')])) as Record<CollectionSlug, boolean>
+  if (!reviewSlugs.some((slug) => canReview[slug] || canApprove[slug])) redirect('/admin')
+  const meta: ReviewCollectionMeta = Object.fromEntries(
+    reviewSlugs.map((slug) => {
+      const config = getCollection(slug)!
+      return [slug, { labelSingular: config.labelSingular, titleField: config.titleField }]
+    }),
+  ) as ReviewCollectionMeta
+  return <ReviewQueueEditor userName={result.session.user.name} currentUserId={result.session.user.id} canReview={canReview} canApprove={canApprove} isAdmin={result.isSystem} meta={meta} />
+}

package/src/admin/pages/role-edit.tsx

@@ -0,0 +1,11 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { RoleEditor } from '../RoleEditor'
+
+export default async function RoleEditPage({ params }: { params: Promise<{ id: string }> }) {
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  if (!result.hasSystem('roles.manage')) redirect('/admin')
+  const { id } = await params
+  return <RoleEditor id={id} userName={result.session.user.name} />
+}

package/src/admin/pages/roles.tsx

@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { RolesEditor } from '../RolesEditor'
+
+export default async function RolesPage() {
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  if (!result.hasSystem('roles.manage')) redirect('/admin')
+  return <RolesEditor userName={result.session.user.name} />
+}

package/src/admin/pages/scheduled.tsx

@@ -0,0 +1,17 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { getCollection, schedulingSlugs, type CollectionSlug } from '../../collections'
+import { ScheduledEditor, type ScheduledCollectionMeta } from '../ScheduledEditor'
+
+export default async function ScheduledPage() {
+  const result = await getSessionWithPermissions()
+  const readableSlugs = schedulingSlugs.filter((slug): slug is CollectionSlug => Boolean(result?.can(slug, 'read')))
+  if (!result || !readableSlugs.length) redirect('/admin/login')
+  const meta: ScheduledCollectionMeta = Object.fromEntries(
+    readableSlugs.map((slug) => {
+      const config = getCollection(slug)!
+      return [slug, { labelSingular: config.labelSingular, titleField: config.titleField }]
+    }),
+  ) as ScheduledCollectionMeta
+  return <ScheduledEditor userName={result.session.user.name} scheduledSlugs={readableSlugs} meta={meta} />
+}

package/src/admin/pages/seo-settings.tsx

@@ -0,0 +1,9 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { SeoSettingsEditor } from '../SeoSettingsEditor'
+
+export default async function SeoSettingsPage() {
+  const result = await getSessionWithPermissions()
+  if (!result || !result.can('settings', 'read')) redirect('/admin/login')
+  return <SeoSettingsEditor userName={result.session.user.name} />
+}

package/src/admin/pages/setup-admin.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { FormEvent, useState } from 'react'
+import { useCmsSiteSettings } from '../CmsSiteSettingsProvider'
+import { Button } from '../Button'
+
+type Result = { ok?: boolean; error?: string }
+
+export default function AdminSetupPage() {
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const { settings } = useCmsSiteSettings()
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setError('')
+    setLoading(true)
+
+    const form = new FormData(event.currentTarget)
+    try {
+      const response = await fetch('/api/setup/admin', {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${String(form.get('token'))}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: String(form.get('name')),
+          email: String(form.get('email')),
+          password: String(form.get('password')),
+        }),
+      })
+      const body = await response.text()
+      let result: Result = {}
+
+      if (body) {
+        try {
+          result = JSON.parse(body) as Result
+        } catch {
+          setError(`Server mengirim respons tidak valid (status ${response.status}). Cek terminal npm run dev.`)
+          return
+        }
+      }
+
+      if (!response.ok || !result.ok) {
+        setError(result.error ?? `Admin tidak dapat dibuat (status ${response.status}). Cek terminal npm run dev.`)
+        return
+      }
+      setSuccess(true)
+    } catch {
+      setError('Tidak dapat menghubungi server. Pastikan npm run dev masih berjalan.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return <main className="auth-shell"><div className="auth-panel">
+    <p className="eyebrow">{settings.siteName} / CMS</p>
+    <h1>Setup admin.</h1>
+    {success ? <>
+      <p className="auth-copy">Admin berhasil dibuat. Kamu sekarang bisa masuk ke CMS.</p>
+      <Button variant="primary" href="/admin/login" icon="↗">Go to login</Button>
+    </> : <>
+      <p className="auth-copy">Masukkan setup token dari file environment, lalu buat akun admin pertama.</p>
+      <form onSubmit={submit}>
+        <label>Setup token<input name="token" type="password" required autoComplete="off" /></label>
+        <label>Nama<input name="name" defaultValue="Site Admin" required autoComplete="name" /></label>
+        <label>Email<input name="email" type="email" required autoComplete="email" /></label>
+        <label>Password<input name="password" type="password" required minLength={12} autoComplete="new-password" /></label>
+        {error && <p className="form-error">{error}</p>}
+        <Button variant="primary" type="submit" disabled={loading} icon="↗">{loading ? 'Creating...' : 'Create admin'}</Button>
+      </form>
+    </>}
+  </div></main>
+}

package/src/admin/pages/single-record.tsx

@@ -0,0 +1,24 @@
+import { notFound, redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { getSingle } from '../../collections'
+import { SingleRecordEditor } from '../SingleRecordEditor'
+
+export default async function SingleRecordPage({ params }: { params: Promise<{ type: string }> }) {
+  const { type } = await params
+  const config = getSingle(type)
+  if (!config) notFound()
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  if (!result.can(config.slug, 'read')) redirect('/admin/dashboard')
+  return (
+    <SingleRecordEditor
+      config={config}
+      userName={result.session.user.name}
+      currentUserId={result.session.user.id}
+      canUpdate={result.can(config.slug, 'update')}
+      canPublish={result.can(config.slug, 'publish')}
+      allowedFields={result.allowedFields(config.slug)}
+      canConfigureViews={result.hasSystem('views.manage')}
+    />
+  )
+}

package/src/admin/pages/site-settings.tsx

@@ -0,0 +1,9 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { SiteSettingsEditor } from '../SiteSettingsEditor'
+
+export default async function SettingsPage() {
+  const result = await getSessionWithPermissions()
+  if (!result || !result.can('settings', 'read')) redirect('/admin/login')
+  return <SiteSettingsEditor userName={result.session.user.name} />
+}

package/src/admin/pages/user-edit.tsx

@@ -0,0 +1,11 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { UserEditor } from '../UserEditor'
+
+export default async function UserEditPage({ params }: { params: Promise<{ id: string }> }) {
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  if (!result.hasSystem('users.manage')) redirect('/admin')
+  const { id } = await params
+  return <UserEditor id={id} userName={result.session.user.name} />
+}

package/src/admin/pages/user-new.tsx

@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { UserEditor } from '../UserEditor'
+
+export default async function NewUserPage() {
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  if (!result.hasSystem('users.manage')) redirect('/admin')
+  return <UserEditor id="new" userName={result.session.user.name} />
+}

package/src/admin/pages/users.tsx

@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { UsersEditor } from '../UsersEditor'
+
+export default async function UsersPage() {
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  if (!result.hasSystem('users.manage')) redirect('/admin')
+  return <UsersEditor userName={result.session.user.name} />
+}

package/src/admin/pages/webhooks-settings.tsx

@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation'
+import { getSessionWithPermissions } from '../../permissions'
+import { WebhooksEditor } from '../WebhooksEditor'
+
+export default async function WebhooksPage() {
+  const result = await getSessionWithPermissions()
+  if (!result) redirect('/admin/login')
+  if (!result.hasSystem('developers.manage')) redirect('/admin/settings')
+  return <WebhooksEditor userName={result.session.user.name} />
+}

package/src/admin/useKeyedRows.ts

@@ -0,0 +1,35 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+export type Row = Record<string, unknown>
+// A per-row id for React/Reorder identity only — never sent to the server. Rows are plain
+// objects with no natural unique key, unlike e.g. content-view groups which already have `id`.
+export type KeyedRow = { id: string; row: Row }
+
+function toKeyed(rows: Row[]): KeyedRow[] {
+  return rows.map((row) => ({ id: crypto.randomUUID(), row }))
+}
+
+/** Shared by `ArrayField`/`BlocksField`: local synthetic-id shadow state over a plain `Row[]`
+ *  value, so drag-reorder and per-row edits have a stable React/Reorder key even though rows
+ *  themselves have no natural unique field. Resyncs from `value` only when it changes for a
+ *  reason other than this hook's own last-emitted update (e.g. the record loading from the
+ *  server), so typing/reordering never fights the parent's controlled `value`. */
+export function useKeyedRows(value: Row[], onChange: (rows: Row[]) => void) {
+  const [items, setItems] = useState<KeyedRow[]>(() => toKeyed(value))
+  const lastEmitted = useRef(value)
+
+  useEffect(() => {
+    if (value !== lastEmitted.current) { setItems(toKeyed(value)); lastEmitted.current = value }
+  }, [value])
+
+  function emit(next: KeyedRow[]) {
+    setItems(next)
+    const rows = next.map((item) => item.row)
+    lastEmitted.current = rows
+    onChange(rows)
+  }
+
+  return { items, emit }
+}

package/src/ai-config.ts

@@ -0,0 +1,35 @@
+import 'server-only'
+
+import { eq } from 'drizzle-orm'
+import { db } from './db'
+import { aiSettings } from './schema'
+import { decryptAiSecret, encryptAiSecret } from './ai-secrets'
+import { aiProviders, type AiProvider } from './ai-types'
+
+type AiKeyFields = Pick<typeof aiSettings.$inferSelect, 'manusApiKey' | 'deepseekApiKey' | 'openaiApiKey' | 'anthropicApiKey'>
+const columnFor: Record<AiProvider, keyof AiKeyFields> = { manus: 'manusApiKey', deepseek: 'deepseekApiKey', openai: 'openaiApiKey', anthropic: 'anthropicApiKey' }
+
+export type AiProviderAvailability = Record<AiProvider, boolean>
+
+export async function getAiProviderAvailability(): Promise<AiProviderAvailability> {
+  const [settings] = await db.select().from(aiSettings).where(eq(aiSettings.id, 'default')).limit(1)
+  return Object.fromEntries(aiProviders.map((provider) => [provider, Boolean(settings?.[columnFor[provider]])])) as AiProviderAvailability
+}
+
+export async function saveAiKeys(keys: Partial<Record<AiProvider, string>>, clear: AiProvider[] = []) {
+  const updates: Partial<AiKeyFields> & { updatedAt: Date } = { updatedAt: new Date() }
+  for (const provider of aiProviders) {
+    const value = keys[provider]?.trim()
+    if (value) updates[columnFor[provider]] = encryptAiSecret(value)
+    if (clear.includes(provider)) updates[columnFor[provider]] = null
+  }
+  await db.insert(aiSettings).values({ id: 'default', ...updates }).onConflictDoUpdate({ target: aiSettings.id, set: updates })
+  return getAiProviderAvailability()
+}
+
+export async function getAiProviderKey(provider: AiProvider) {
+  const [settings] = await db.select().from(aiSettings).where(eq(aiSettings.id, 'default')).limit(1)
+  const stored = settings?.[columnFor[provider]]
+  if (!stored) throw new Error(`${provider} is not configured. Add its API key in Settings.`)
+  return decryptAiSecret(stored)
+}

package/src/ai-secrets.ts

@@ -0,0 +1,17 @@
+import 'server-only'
+
+import { decryptSecret, encryptSecret } from './secrets'
+
+const DOMAIN = 'cms-ai-keys'
+
+export function encryptAiSecret(value: string) {
+  return encryptSecret(value, DOMAIN)
+}
+
+export function decryptAiSecret(payload: string) {
+  try {
+    return decryptSecret(payload, DOMAIN)
+  } catch {
+    throw new Error('Stored AI key is invalid. Save the key again.')
+  }
+}

package/src/ai-types.ts

@@ -0,0 +1,10 @@
+export const aiProviders = ['manus', 'deepseek', 'openai', 'anthropic'] as const
+export type AiProvider = typeof aiProviders[number]
+export type AiAction = 'prompt' | 'continue' | 'improve' | 'summarize'
+
+export const aiProviderLabels: Record<AiProvider, string> = {
+  manus: 'Manus',
+  deepseek: 'DeepSeek',
+  openai: 'OpenAI',
+  anthropic: 'Anthropic',
+}