@acms-subir/core 0.0.1

package/src/pages/admin/posts/index.astro

@@ -0,0 +1,7 @@
+---
+// Legacy path for the built-in collection — content lists live at
+// /admin/c/[collection] now. 308 preserves the method so the old create/delete
+// form POSTs land on the new handler too.
+export const prerender = false;
+return Astro.redirect(`/admin/c/posts${Astro.url.search}`, 308);
+---

package/src/pages/admin/settings.astro

@@ -0,0 +1,512 @@
+---
+import Admin from '../../layouts/Admin.astro';
+import { getRepo } from '../../lib/repo';
+import { verifySessionToken, OWNER_ENV, SESSION_COOKIE } from '../../lib/auth';
+import { invalidateRedirectCache } from '../../middleware';
+import { CONTENT } from '../../lib/content';
+
+const repo = await getRepo(Astro.locals);
+
+const sessionUserId = verifySessionToken(Astro.cookies.get(SESSION_COOKIE)?.value);
+const sessionUser = sessionUserId && sessionUserId !== OWNER_ENV ? await repo.getUser(sessionUserId) : null;
+const isOwner = sessionUserId === OWNER_ENV || sessionUser?.role === 'owner';
+
+const genKey = () =>
+  'acms_sk_' + [...crypto.getRandomValues(new Uint8Array(24))].map((b) => b.toString(16).padStart(2, '0')).join('');
+
+// Accepts an exact URL (path stripped), 'host:*' for any-port, or '*'.
+// Schemeless input gets https:// assumed.
+function normalizeOrigin(value: string): string | null {
+  const v = value.trim();
+  if (!v) return null;
+  if (v === '*') return '*';
+  const withScheme = (s: string) => (s.includes('://') ? s : `https://${s}`);
+  try {
+    if (v.endsWith(':*')) return new URL(withScheme(v.slice(0, -2))).origin + ':*';
+    return new URL(withScheme(v)).origin;
+  } catch {
+    return null;
+  }
+}
+
+let flash = '';
+let flashError = '';
+if (Astro.request.method === 'POST') {
+  const form = await Astro.request.formData();
+  const action = String(form.get('action') || 'site');
+  if (action === 'site') {
+    // site URL: normalize to a bare origin; empty is fine (falls back to the
+    // request origin until configured)
+    const rawUrl = String(form.get('siteUrl') ?? '').trim();
+    let siteUrl = '';
+    if (rawUrl) {
+      try {
+        siteUrl = new URL(rawUrl.includes('://') ? rawUrl : `https://${rawUrl}`).origin;
+      } catch {
+        flashError = 'Site URL doesn’t look like a URL — try e.g. https://example.com';
+      }
+    }
+    if (!flashError) {
+      await repo.updateSettings({
+        siteTitle: String(form.get('siteTitle') || 'My Site'),
+        tagline: String(form.get('tagline') ?? ''),
+        footerText: String(form.get('footerText') ?? ''),
+        siteUrl,
+      });
+      flash = 'Settings saved.';
+    }
+  } else if (action === 'localization') {
+    const tz = String(form.get('timezone') ?? '').trim();
+    let tzOk = true;
+    if (tz) {
+      try { new Intl.DateTimeFormat('en-US', { timeZone: tz }); } catch { tzOk = false; }
+    }
+    if (!tzOk) {
+      flashError = `“${tz}” isn’t a valid timezone — use an IANA name like America/New_York.`;
+    } else {
+      await repo.updateSettings({ timezone: tz, locale: String(form.get('locale') ?? '').trim() });
+      flash = 'Timezone & language saved.';
+    }
+  } else if (action === 'codeInjection') {
+    if (!isOwner) {
+      flashError = 'Only owners can edit injected code.';
+    } else {
+      await repo.updateSettings({
+        headCode: String(form.get('headCode') ?? ''),
+        footerCode: String(form.get('footerCode') ?? ''),
+      });
+      flash = 'Code injection saved.';
+    }
+  } else if (action === 'announcement') {
+    // link must be a relative path or http(s) URL — never javascript: etc.
+    const rawLink = String(form.get('annLink') ?? '').trim();
+    const link = rawLink.startsWith('/') || /^https?:\/\//i.test(rawLink) ? rawLink : '';
+    if (rawLink && !link) {
+      flashError = 'Announcement link must start with / or https://';
+    } else {
+      await repo.updateSettings({
+        announcement: {
+          enabled: form.get('annEnabled') === 'on',
+          text: String(form.get('annText') ?? '').trim(),
+          link,
+          dismissible: form.get('annDismissible') === 'on',
+        },
+      });
+      flash = 'Announcement saved.';
+    }
+  } else if (action === 'addRedirect') {
+    const from = String(form.get('fromPath') ?? '').trim();
+    const to = String(form.get('toPath') ?? '').trim();
+    const code = String(form.get('code') ?? '301') === '302' ? 302 : 301;
+    try {
+      const r = await repo.createRedirect({ fromPath: from, toPath: to, code });
+      invalidateRedirectCache();
+      flash = `Redirecting ${r.fromPath} → ${r.toPath}.`;
+    } catch {
+      flashError = 'Both paths are required and must differ — e.g. /old-page → /new-page.';
+    }
+  } else if (action === 'removeRedirect') {
+    await repo.deleteRedirect(String(form.get('id') ?? ''));
+    invalidateRedirectCache();
+    flash = 'Redirect removed.';
+  } else if (!isOwner) {
+    flashError = 'Only owners can manage the drafts API.';
+  } else {
+    const current = await repo.getSettings();
+    if (action === 'generateKey') {
+      await repo.updateSettings({ draftsApiKey: genKey() });
+      flash = current.draftsApiKey ? 'API key regenerated — apps with the old key will get 401s.' : 'API key generated.';
+    } else if (action === 'revokeKey') {
+      await repo.updateSettings({ draftsApiKey: '' });
+      flash = 'API key revoked — the drafts API is off.';
+    } else if (action === 'addOrigin') {
+      const origin = normalizeOrigin(String(form.get('origin') ?? ''));
+      if (!origin) {
+        flashError = 'That doesn’t look like a URL — try e.g. https://app.example.com';
+      } else if (current.draftsAllowedOrigins.includes(origin)) {
+        flash = `${origin} is already allowed.`;
+      } else {
+        await repo.updateSettings({ draftsAllowedOrigins: [...current.draftsAllowedOrigins, origin] });
+        flash = `Allowed ${origin}.`;
+      }
+    } else if (action === 'removeOrigin') {
+      const origin = String(form.get('origin') ?? '');
+      await repo.updateSettings({ draftsAllowedOrigins: current.draftsAllowedOrigins.filter((o) => o !== origin) });
+      flash = `Removed ${origin}.`;
+    }
+  }
+}
+
+const settings = await repo.getSettings();
+const redirects = await repo.listRedirects();
+const backend = (Astro.locals as { runtime?: { env?: { DB?: unknown } } }).runtime?.env?.DB
+  ? 'd1'
+  : 'sqlite';
+
+const apiKey = settings.draftsApiKey;
+const maskedKey = apiKey ? `${apiKey.slice(0, 8)}${'•'.repeat(12)}${apiKey.slice(-4)}` : '';
+
+// Quick-add presets for the origin allowlist; extending this list is the
+// one-line change when a new app needs access.
+const ORIGIN_PRESETS: { label: string; origin: string }[] = [
+  { label: 'tariu', origin: 'https://tariu.app' },
+  { label: 'Local dev (localhost)', origin: 'http://localhost:*' },
+  { label: 'Any origin (*)', origin: '*' },
+];
+const remainingPresets = ORIGIN_PRESETS.filter((p) => !settings.draftsAllowedOrigins.includes(p.origin));
+---
+
+<Admin title="Settings" section="settings">
+  <div class="page-head"><h1>Settings</h1></div>
+
+  {flash && <div class="flash">{flash}</div>}
+  {flashError && <div class="flash error">{flashError}</div>}
+
+  <div class="card card-pad">
+    <p class="card-title">Site</p>
+    <form method="post">
+      <input type="hidden" name="action" value="site" />
+      <div class="field-row">
+        <label class="field"><span>Site title</span><input type="text" name="siteTitle" value={settings.siteTitle} /></label>
+        <label class="field"><span>Tagline</span><input type="text" name="tagline" value={settings.tagline} /></label>
+      </div>
+      <label class="field">
+        <span>Site URL</span>
+        <input type="text" name="siteUrl" value={settings.siteUrl} placeholder="https://example.com" />
+      </label>
+      <p class="hint">
+        The public address of this site. Used to build canonical URLs, the sitemap, the RSS feed,
+        and social-share previews. Leave empty to use whatever address the site is served from.
+      </p>
+      <label class="field">
+        <span>Footer</span>
+        <textarea name="footerText" rows="3" placeholder={`${settings.siteTitle}${settings.tagline ? ` — ${settings.tagline}` : ''}`}>{settings.footerText}</textarea>
+      </label>
+      <p class="hint">
+        Shown at the bottom of every public page. Markdown works — e.g.
+        <code>© 2026 Your Site · [Twitter](https://twitter.com/…)</code>. Leave empty to fall back to
+        “title — tagline”.
+      </p>
+      <div class="form-actions"><button class="btn primary" type="submit">Save</button></div>
+    </form>
+  </div>
+
+  {isOwner && (
+    <div class="card card-pad">
+      <p class="card-title">External drafts API</p>
+      <p style="margin:0">
+        Lets outside apps push drafts to <code>POST /api/drafts</code> — they land in Posts as drafts
+        for you to refine and publish. The key can only create drafts, never publish, edit, or delete.
+      </p>
+
+      {apiKey ? (
+        <div class="da-key-row">
+          <code class="da-key" title="API key">{maskedKey}</code>
+          <button class="btn" type="button" id="da-copy" data-key={apiKey}>Copy</button>
+          <form method="post">
+            <input type="hidden" name="action" value="generateKey" />
+            <button class="btn" type="submit">Regenerate</button>
+          </form>
+          <form method="post">
+            <input type="hidden" name="action" value="revokeKey" />
+            <button class="btn danger" type="submit">Revoke</button>
+          </form>
+        </div>
+      ) : (
+        <div class="da-empty">
+          <span class="hint">No API key yet — external apps can’t reach <code>/api/drafts</code>.</span>
+          <form method="post" style="margin:0">
+            <input type="hidden" name="action" value="generateKey" />
+            <button class="btn primary" type="submit">Generate key</button>
+          </form>
+        </div>
+      )}
+      {apiKey && (
+        <p class="hint" style="margin-top:8px">
+          Send it as <code>Authorization: Bearer &lt;key&gt;</code>. Regenerating or revoking takes
+          effect immediately.
+        </p>
+      )}
+
+      <div class="da-origins">
+        <p class="da-subtitle">Allowed origins <span class="hint">(CORS)</span></p>
+        <p class="hint" style="margin:0 0 10px">
+          Browser apps on these URLs can call the API. Tools like curl or scripts are never blocked
+          by this list. Empty list = no browser app gets through.
+        </p>
+        {settings.draftsAllowedOrigins.length > 0 && (
+          <div class="da-chips">
+            {settings.draftsAllowedOrigins.map((origin) => (
+              <form method="post" class="da-chip">
+                <input type="hidden" name="action" value="removeOrigin" />
+                <input type="hidden" name="origin" value={origin} />
+                <code>{origin}</code>
+                <button class="da-chip-x" type="submit" title={`Remove ${origin}`}>✕</button>
+              </form>
+            ))}
+          </div>
+        )}
+        <form method="post" class="da-add-row">
+          <input type="hidden" name="action" value="addOrigin" />
+          <input type="text" name="origin" placeholder="https://another-app.example.com" />
+          <button class="btn" type="submit">Add</button>
+        </form>
+        {remainingPresets.length > 0 && (
+          <div class="da-presets">
+            <span class="hint">Quick add:</span>
+            {remainingPresets.map((p) => (
+              <form method="post" style="margin:0">
+                <input type="hidden" name="action" value="addOrigin" />
+                <input type="hidden" name="origin" value={p.origin} />
+                <button class="da-preset" type="submit">+ {p.label}</button>
+              </form>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )}
+
+  <div class="card card-pad">
+    <p class="card-title">Timezone &amp; language</p>
+    <form method="post">
+      <input type="hidden" name="action" value="localization" />
+      <div class="field-row">
+        <label class="field">
+          <span>Publication timezone</span>
+          <input type="text" name="timezone" value={settings.timezone} placeholder="America/New_York" list="tz-suggestions" />
+        </label>
+        <label class="field">
+          <span>Locale</span>
+          <input type="text" name="locale" value={settings.locale} placeholder="en-US" />
+        </label>
+      </div>
+      <datalist id="tz-suggestions">
+        {['UTC', 'America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles', 'America/Guatemala', 'America/Mexico_City', 'Europe/London', 'Europe/Madrid', 'Asia/Tokyo'].map((tz) => <option value={tz} />)}
+      </datalist>
+      <p class="hint">
+        Dates on the public site render in this timezone and locale (e.g. <code>es-GT</code> for Spanish).
+        Empty = server timezone and English.
+      </p>
+      <div class="form-actions"><button class="btn primary" type="submit">Save</button></div>
+    </form>
+  </div>
+
+  {isOwner && (
+    <div class="card card-pad">
+      <p class="card-title">Code injection</p>
+      <p style="margin:0">
+        Raw HTML added to every public page — analytics snippets, verification tags, custom fonts.
+        Scripts here run with full access to your pages, so paste only code you trust.
+      </p>
+      <form method="post">
+        <input type="hidden" name="action" value="codeInjection" />
+        <label class="field" style="margin-top:12px">
+          <span>Site header <span class="hint">(inside <code>&lt;head&gt;</code>)</span></span>
+          <textarea name="headCode" rows="4" placeholder={'<script defer data-domain="example.com" src="…"></script>'} style="font-family:monospace;font-size:12.5px">{settings.headCode}</textarea>
+        </label>
+        <label class="field">
+          <span>Site footer <span class="hint">(before <code>&lt;/body&gt;</code>)</span></span>
+          <textarea name="footerCode" rows="4" style="font-family:monospace;font-size:12.5px">{settings.footerCode}</textarea>
+        </label>
+        <div class="form-actions"><button class="btn primary" type="submit">Save</button></div>
+      </form>
+    </div>
+  )}
+
+  <div class="card card-pad">
+    <p class="card-title">Announcement bar</p>
+    <form method="post">
+      <input type="hidden" name="action" value="announcement" />
+      <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
+        <input type="checkbox" name="annEnabled" checked={settings.announcement.enabled} />
+        <span>Show a bar above the site header</span>
+      </label>
+      <div class="field-row">
+        <label class="field"><span>Text</span><input type="text" name="annText" value={settings.announcement.text} placeholder="🎉 Something worth announcing" /></label>
+        <label class="field"><span>Link (optional)</span><input type="text" name="annLink" value={settings.announcement.link} placeholder={`${CONTENT.posts.base}/announcement`} /></label>
+      </div>
+      <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
+        <input type="checkbox" name="annDismissible" checked={settings.announcement.dismissible} />
+        <span>Visitors can dismiss it <span class="hint">(remembered per browser until the text changes)</span></span>
+      </label>
+      <div class="form-actions"><button class="btn primary" type="submit">Save</button></div>
+    </form>
+  </div>
+
+  <div class="card card-pad">
+    <p class="card-title">Redirects</p>
+    <p style="margin:0">
+      Forward old URLs to new ones. Redirects only fire when a URL would otherwise 404, so they can
+      never shadow real pages. Renaming a published post or page adds one here automatically.
+    </p>
+    {redirects.length > 0 && (
+      <div class="rd-list">
+        {redirects.map((r) => (
+          <div class="rd-row">
+            <code class="rd-path">{r.fromPath}</code>
+            <span class="rd-arrow">→</span>
+            <code class="rd-path">{r.toPath}</code>
+            <span class="rd-code">{r.code}</span>
+            <form method="post" style="margin:0">
+              <input type="hidden" name="action" value="removeRedirect" />
+              <input type="hidden" name="id" value={r.id} />
+              <button class="da-chip-x" type="submit" title={`Remove redirect from ${r.fromPath}`}>✕</button>
+            </form>
+          </div>
+        ))}
+      </div>
+    )}
+    <form method="post" class="rd-add">
+      <input type="hidden" name="action" value="addRedirect" />
+      <input type="text" name="fromPath" placeholder="/old-path" required />
+      <span class="rd-arrow">→</span>
+      <input type="text" name="toPath" placeholder="/new-path or https://elsewhere.com" required />
+      <select name="code">
+        <option value="301">301 permanent</option>
+        <option value="302">302 temporary</option>
+      </select>
+      <button class="btn" type="submit">Add</button>
+    </form>
+  </div>
+
+  <div class="card card-pad">
+    <p class="card-title">Backup</p>
+    <p style="margin:0">
+      Download everything as one ZIP — pages, posts, tags, links, navigation, users, settings
+      (<code>content.json</code>) plus every uploaded image.
+    </p>
+    <p class="hint" style="margin-top:8px">
+      Works the same on every backend. Passwords are never exported — after restoring to a fresh
+      install, sign in with the owner password from <code>.env</code> and reset accounts.
+    </p>
+    <div class="form-actions"><a class="btn primary" href="/api/backup" download>Download backup</a></div>
+
+    {isOwner && (
+      <div class="rs-restore">
+        <p class="da-subtitle">Restore from backup</p>
+        <p class="hint" style="margin:0 0 10px">
+          Pick a backup ZIP to see what's inside, then restore. <strong>Restoring replaces all
+          current content</strong> — posts, pages, media, settings, everything.
+        </p>
+        <div class="rs-row">
+          <input type="file" id="rs-file" accept=".zip,application/zip" />
+          <button class="btn" type="button" id="rs-analyze">Analyze</button>
+          <button class="btn danger" type="button" id="rs-go" hidden>Restore now</button>
+        </div>
+        <div class="hint" id="rs-report" style="margin-top:10px"></div>
+      </div>
+    )}
+  </div>
+
+  <div class="card card-pad">
+    <p class="card-title">Backend</p>
+    <p style="margin:0">
+      Content backend: <span class="pill home">{backend}</span>
+    </p>
+    <p class="hint" style="margin-top:8px">
+      Picked automatically: <code>d1</code> when the Cloudflare <code>DB</code> binding is present
+      (Workers deploys and wrangler dev), otherwise <code>sqlite</code> (local file at
+      <code>SQLITE_URL</code>, zero setup). Both use the same content shapes.
+    </p>
+  </div>
+</Admin>
+
+<style>
+  .rs-restore { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
+  .rs-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+  .rd-list { margin-top: 14px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
+  .rd-row {
+    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
+    border-bottom: 1px solid var(--border); font-size: 13px;
+  }
+  .rd-row:last-child { border-bottom: none; }
+  .rd-path { background: var(--bg); border-radius: 6px; padding: 3px 8px; font-size: 12.5px; }
+  .rd-arrow { color: var(--muted); }
+  .rd-code { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
+  .rd-add { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
+  .rd-add input[type='text'] { flex: 1; min-width: 140px; }
+  .da-key-row { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
+  .da-key {
+    flex: 1; min-width: 220px; background: var(--bg); border: 1px solid var(--border);
+    border-radius: 7px; padding: 7px 10px; font-size: 12.5px; color: var(--muted);
+  }
+  .da-key-row form { margin: 0; }
+  .da-empty {
+    display: flex; align-items: center; justify-content: space-between; gap: 12px;
+    border: 1px dashed var(--border); border-radius: 9px; padding: 12px 14px; margin-top: 14px;
+  }
+  .da-origins { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
+  .da-subtitle { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
+  .da-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
+  .da-chip {
+    display: inline-flex; align-items: center; gap: 7px; margin: 0;
+    background: var(--accent-soft); border: 1px solid rgb(110 123 255 / 30%);
+    border-radius: 99px; padding: 3px 6px 3px 12px;
+  }
+  .da-chip code { font-size: 12px; background: none; border: none; padding: 0; }
+  .da-chip-x {
+    background: none; border: none; color: var(--muted); cursor: pointer;
+    font-size: 12px; padding: 2px 5px; border-radius: 99px; line-height: 1;
+  }
+  .da-chip-x:hover { color: var(--red); background: rgb(248 113 113 / 12%); }
+  .da-add-row { display: flex; gap: 8px; margin: 0 0 12px; }
+  .da-add-row input[type='text'] { flex: 1; }
+  .da-presets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  .da-presets form { margin: 0; }
+  .da-preset {
+    background: none; border: 1px dashed var(--border); border-radius: 99px;
+    padding: 3px 12px; font-size: 12px; color: var(--muted); cursor: pointer; font-family: inherit;
+  }
+  .da-preset:hover { color: var(--accent); border-color: var(--accent); }
+</style>
+
+<script>
+  // backup restore: analyze (dry run) → confirm → restore
+  const rsFile = document.getElementById('rs-file') as HTMLInputElement | null;
+  const rsAnalyze = document.getElementById('rs-analyze');
+  const rsGo = document.getElementById('rs-go');
+  const rsReport = document.getElementById('rs-report');
+  async function postBackup(dry: boolean) {
+    const f = rsFile?.files?.[0];
+    if (!f || !rsReport) return null;
+    rsReport.textContent = dry ? 'Analyzing…' : 'Restoring…';
+    const form = new FormData();
+    form.set('file', f);
+    const res = await fetch(`/api/restore${dry ? '?dry=1' : ''}`, { method: 'POST', body: form });
+    const data = await res.json().catch(() => null);
+    if (!res.ok || !data) {
+      rsReport.textContent = `Error: ${data?.error ?? res.statusText}`;
+      return null;
+    }
+    return data;
+  }
+  rsAnalyze?.addEventListener('click', async () => {
+    const data = await postBackup(true);
+    if (!data || !rsReport) return;
+    const r = data.report;
+    rsReport.innerHTML =
+      `Backup from <b>${r.exportedAt ? new Date(r.exportedAt).toLocaleString() : 'unknown date'}</b>: ` +
+      `${r.posts} posts, ${r.pages} pages, ${r.media} media files, ${r.tags} tags, ` +
+      `${r.links} links, ${r.navItems} nav items, ${r.users} users.` +
+      (r.missingBinaries ? ` <b>⚠ ${r.missingBinaries} media binaries missing from the archive.</b>` : '');
+    rsGo?.removeAttribute('hidden');
+  });
+  rsGo?.addEventListener('click', async () => {
+    if (!confirm('Replace ALL current content with this backup? This cannot be undone.')) return;
+    const data = await postBackup(false);
+    if (!data || !rsReport) return;
+    rsReport.innerHTML = `<b>Restored:</b> ${data.restored.posts} posts, ${data.restored.pages} pages, ${data.restored.media} media files. Reloading…`;
+    setTimeout(() => location.reload(), 1200);
+  });
+
+  const copyBtn = document.getElementById('da-copy');
+  if (copyBtn) {
+    copyBtn.addEventListener('click', async () => {
+      await navigator.clipboard.writeText(copyBtn.dataset.key ?? '');
+      const original = copyBtn.textContent;
+      copyBtn.textContent = 'Copied!';
+      setTimeout(() => (copyBtn.textContent = original), 1500);
+    });
+  }
+</script>

package/src/pages/admin/tags.astro

@@ -0,0 +1,101 @@
+---
+import Admin from '../../layouts/Admin.astro';
+import Modal from '../../components/Modal.astro';
+import { getRepo } from '../../lib/repo';
+import { slugify } from '../../lib/schema';
+import { CONTENT, tagUrl } from '../../lib/content';
+
+const repo = await getRepo(Astro.locals);
+
+if (Astro.request.method === 'POST') {
+  const form = await Astro.request.formData();
+  const op = String(form.get('op'));
+  if (op === 'create') {
+    const name = String(form.get('name') || '').trim();
+    if (name) {
+      const slug = slugify(String(form.get('slug') || name));
+      if (!(await repo.getTagBySlug(slug))) {
+        await repo.createTag({ name, slug, description: String(form.get('description') ?? '') });
+      }
+    }
+  }
+  if (op === 'update') {
+    await repo.updateTag(String(form.get('id')), {
+      name: String(form.get('name') ?? '').trim() || undefined,
+      slug: slugify(String(form.get('slug') ?? '')),
+      description: String(form.get('description') ?? ''),
+    });
+  }
+  if (op === 'delete') await repo.deleteTag(String(form.get('id')));
+  return Astro.redirect('/admin/tags');
+}
+
+const [tags, posts] = await Promise.all([repo.listTags(), repo.listPosts()]);
+const countFor = (name: string) =>
+  posts.filter((p) => p.tags.some((t) => t.toLowerCase() === name.toLowerCase())).length;
+---
+
+<Admin title="Tags" section="tags">
+  <div class="page-head">
+    <h1>Tags</h1>
+    <button class="btn primary" type="button" data-modal="new-tag">New tag</button>
+  </div>
+
+  <Modal id="new-tag" title="New tag">
+    <form method="post">
+      <input type="hidden" name="op" value="create" />
+      <label class="field">
+        <span>Name</span>
+        <input type="text" name="name" placeholder="Tag name" required autofocus data-slug-for="new-tag-slug" />
+      </label>
+      <label class="field">
+        <span>Slug</span>
+        <div class="slug-wrap">
+          <span class="slug-prefix">{CONTENT.tags.base}/</span>
+          <input type="text" id="new-tag-slug" name="slug" placeholder="auto from name" data-slug-dest />
+        </div>
+      </label>
+      <label class="field">
+        <span>Description <em class="hint">(optional)</em></span>
+        <input type="text" name="description" placeholder="Shown on the tag archive page" />
+      </label>
+      <div class="modal-foot">
+        <button class="btn ghost" type="button" data-close>Cancel</button>
+        <button class="btn primary" type="submit">Add tag</button>
+      </div>
+      <p class="hint" style="margin:12px 0 0">Tags typed on a {CONTENT.posts.singular.toLowerCase()} are registered automatically — this adds slugs and descriptions for the public archives.</p>
+    </form>
+  </Modal>
+
+  <div class="card rowlist">
+    {tags.map((t) => {
+      const n = countFor(t.name);
+      return (
+        <div class="row">
+          <form class="row-edit" method="post">
+            <input type="hidden" name="op" value="update" />
+            <input type="hidden" name="id" value={t.id} />
+            <input type="text" class="bare strong" name="name" value={t.name} aria-label="Name" style="flex:0 1 180px" />
+            <input type="text" class="bare mono dim" name="slug" value={t.slug} aria-label="Slug" style="flex:0 1 160px" />
+            <input type="text" class="bare dim" name="description" value={t.description} placeholder="Add a description…" aria-label="Description" style="flex:1" />
+            <button class="btn sm primary reveal" type="submit">Save</button>
+          </form>
+          <span class="meta">{n} {(n === 1 ? CONTENT.posts.singular : CONTENT.posts.plural).toLowerCase()}</span>
+          <a class="btn sm ghost reveal" href={tagUrl(t.slug)} target="_blank" rel="noopener">View ↗</a>
+          <form class="inline-form reveal" method="post" onsubmit={`return confirm('Delete this tag? ${CONTENT.posts.plural.replace(/['\\]/g, '\\$&')} keep the tag name; only the registry entry and its archive page go away.')`}>
+            <input type="hidden" name="op" value="delete" />
+            <input type="hidden" name="id" value={t.id} />
+            <button class="btn sm ghost danger" type="submit">Delete</button>
+          </form>
+        </div>
+      );
+    })}
+    {tags.length === 0 && (
+      <div class="empty-state">
+        <b>No tags yet</b>
+        <p>Create one here, or just type a tag on any {CONTENT.posts.singular.toLowerCase()} — it registers automatically.</p>
+        <button class="btn primary" type="button" data-modal="new-tag">New tag</button>
+      </div>
+    )}
+  </div>
+</Admin>