@acms-subir/core 0.1.0 → 0.3.0

package/src/pages/admin/index.astro

@@ -3,65 +3,262 @@ import Admin from '../../layouts/Admin.astro';
 import { getRepo } from '../../lib/repo';
 import { userConfig } from 'virtual:acms-config';
 import { CONTENT } from '../../lib/content';
+import { validateSession, SESSION_COOKIE, OWNER_ENV } from '../../lib/auth';
+import { getTraffic, umamiReadEnabled } from '../../lib/umami';
+import { collectionUrl } from '../../lib/content';
 
 const coreVersion = userConfig.coreVersion;
 const repo = await getRepo(Astro.locals);
-const [stats, pages, posts, links] = await Promise.all([
+const sessionUserId = (await validateSession(Astro.cookies.get(SESSION_COOKIE)?.value, Astro.locals));
+const [stats, pages, posts, links, settings, nav, users] = await Promise.all([
   repo.getStats(),
   repo.listPages(),
   repo.listPosts(),
   repo.listLinks(),
+  repo.getSettings(),
+  repo.listNavItems(),
+  repo.listUsers(),
 ]);
+const traffic = await getTraffic(settings, 30);
+const me = sessionUserId && sessionUserId !== OWNER_ENV ? users.find((u) => u.id === sessionUserId) : null;
+const firstName = me?.name.split(/\s+/)[0] ?? '';
 
+const tz = settings.timezone ? { timeZone: settings.timezone } : {};
+const safe = <T,>(f: () => T, fb: T) => { try { return f(); } catch { return fb; } };
+const hour = safe(() => Number(new Intl.DateTimeFormat('en-US', { hour: 'numeric', hourCycle: 'h23', ...tz }).format(new Date())), new Date().getHours());
+const greeting = hour < 5 ? 'Working late' : hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
+const when = (ts: number) => safe(() => new Date(ts).toLocaleString('en-US', { weekday: 'short', hour: 'numeric', minute: '2-digit', ...tz }), '');
+function ago(ts: number) {
+  const s = Math.floor((Date.now() - ts) / 1000);
+  if (s < 60) return 'just now';
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  return `${Math.floor(s / 86400)}d ago`;
+}
+
+const noun = (key: string) => (CONTENT.collections[key] ?? CONTENT.posts).singular;
+const firstKey = Object.keys(CONTENT.collections)[0] ?? 'posts';
+const drafts = posts.filter((p) => p.status === 'draft');
+const scheduled = posts.filter((p) => p.status === 'scheduled' && p.scheduledAt).sort((a, b) => a.scheduledAt! - b.scheduledAt!);
+const published = posts.filter((p) => p.status === 'published');
+const summary = [
+  drafts.length ? `${drafts.length} ${drafts.length === 1 ? 'draft' : 'drafts'} waiting` : '',
+  scheduled.length ? `${scheduled.length === 1 ? `1 ${noun(scheduled[0].collection).toLowerCase()}` : `${scheduled.length} items`} going live ${when(scheduled[0].scheduledAt!)}` : '',
+].filter(Boolean).join(' · ') || 'Everything is published. Nice.';
+
+// continue writing: drafts + scheduled, most recently touched first
+const continueRows = [...drafts, ...scheduled].sort((a, b) => b.updatedAt - a.updatedAt).slice(0, 4);
 const recent = [
   ...pages.map((p) => ({ kind: 'Page', title: p.title, href: `/admin/pages/${p.id}`, at: p.updatedAt, status: p.status })),
-  ...posts.map((p) => ({
-    kind: (CONTENT.collections[p.collection] ?? CONTENT.posts).singular,
-    title: p.title,
-    href: `/admin/c/${p.collection}/${p.id}`,
-    at: p.updatedAt,
-    status: p.status,
-  })),
-]
-  .sort((a, b) => b.at - a.at)
-  .slice(0, 8);
-
-// per-collection counts for the stat row; content whose collection key was
-// removed from config would otherwise be invisible, so it gets a notice
+  ...posts.map((p) => ({ kind: noun(p.collection), title: p.title, href: `/admin/c/${p.collection}/${p.id}`, at: p.updatedAt, status: p.status })),
+].sort((a, b) => b.at - a.at).slice(0, 5);
+const topLinks = [...links].filter((l) => l.clicks > 0).sort((a, b) => b.clicks - a.clicks).slice(0, 5);
+
+// content whose collection key was removed from config would otherwise be invisible
 const countByCollection = new Map<string, number>();
 for (const p of posts) countByCollection.set(p.collection, (countByCollection.get(p.collection) ?? 0) + 1);
 const orphaned = [...countByCollection.entries()].filter(([key]) => !CONTENT.collections[key]);
 
-const topLinks = [...links].sort((a, b) => b.clicks - a.clicks).slice(0, 5);
+// setup checklist — disappears once everything is done
+const steps = [
+  { label: 'Add your site URL', done: Boolean(settings.siteUrl), href: '/admin/settings#site' },
+  { label: 'Connect analytics', done: Boolean(settings.analytics?.umami?.enabled), href: '/admin/settings#analytics' },
+  { label: 'Set up navigation', done: nav.length > 0, href: '/admin/navigation' },
+  { label: `Publish your first ${noun(firstKey).toLowerCase()}`, done: published.length > 0, href: `/admin/c/${firstKey}?new=1` },
+  { label: 'Invite a teammate', done: users.length > 0, href: '/admin/users?new=1' },
+];
+const doneCount = steps.filter((s) => s.done).length;
 
-function ago(ts: number) {
-  const s = Math.floor((Date.now() - ts) / 1000);
-  if (s < 60) return 'just now';
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
-  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
-  return `${Math.floor(s / 86400)}d ago`;
+// traffic → KPI tiles + chart
+const fmtN = (n: number) => (n >= 10000 ? `${(n / 1000).toFixed(1)}k` : n.toLocaleString('en-US'));
+const delta = (v: number, prev: number) => (prev > 0 ? Math.round(((v - prev) / prev) * 100) : null);
+const dur = (s: number) => (s >= 60 ? `${Math.floor(s / 60)}m ${s % 60}s` : `${s}s`);
+function areaPath(vals: number[], w: number, h: number, pad = 3) {
+  if (vals.length < 2) return { line: '', fill: '' };
+  const max = Math.max(...vals, 1), step = (w - pad * 2) / (vals.length - 1);
+  const pts = vals.map((v, i) => [pad + i * step, h - pad - (v / max) * (h - pad * 2)]);
+  const line = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
+  return { line, fill: `${line} L${pts[pts.length - 1][0].toFixed(1)} ${h} L${pad} ${h}Z` };
 }
+const views = traffic?.series.map((s) => s.views) ?? [];
+const chart = areaPath(views, 700, 150);
+const spark = (vals: number[]) => areaPath(vals.slice(-14), 120, 26).line;
+const titleByPath = new Map<string, string>([
+  ...posts.map((p) => [collectionUrl(p.collection, p.slug), p.title] as [string, string]),
+  ...pages.map((p) => [`/${p.slug}`, p.title] as [string, string]),
+]);
+const topContent = (traffic?.topPaths ?? []).filter((p) => titleByPath.has(p.path)).slice(0, 5);
+const kpis = traffic
+  ? [
+      { label: 'Visitors · 30d', value: fmtN(traffic.visitors), d: delta(traffic.visitors, traffic.visitorsPrev), spark: spark(traffic.series.map((s) => s.visitors)) },
+      { label: 'Pageviews', value: fmtN(traffic.pageviews), d: delta(traffic.pageviews, traffic.pageviewsPrev), spark: spark(views) },
+      { label: 'Avg. visit', value: dur(traffic.avgSeconds), d: null, spark: '' },
+      { label: 'Link clicks', value: fmtN(stats.linkClicks), d: null, spark: '' },
+    ]
+  : [
+      { label: 'Published', value: fmtN(published.length + stats.publishedPages), d: null, spark: '' },
+      { label: 'Drafts', value: fmtN(stats.drafts), d: null, spark: '' },
+      { label: 'Scheduled', value: fmtN(scheduled.length), d: null, spark: '' },
+      { label: 'Link clicks', value: fmtN(stats.linkClicks), d: null, spark: '' },
+    ];
+const umamiOnNoKey = Boolean(settings.analytics?.umami?.enabled) && !umamiReadEnabled(settings);
+const axis = traffic?.series.length
+  ? [0, Math.floor(traffic.series.length / 3), Math.floor((traffic.series.length * 2) / 3)].map((i) =>
+      safe(() => new Date(traffic.series[i].t).toLocaleDateString('en-US', { month: 'short', day: 'numeric', ...tz }), ''))
+  : [];
+const I = {
+  write: 'M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4',
+  page: 'M7 3h8l4 4v14H7zM15 3v4h4M10 12h6M10 16h6',
+  upload: 'M12 16V4M7 9l5-5 5 5M4 17v3h16v-3',
+  links: 'M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1.5-1.5',
+  check: 'M5 12l5 5L20 7',
+};
+const tiles = [
+  { icon: I.write, title: `Write a ${noun(firstKey).toLowerCase()}`, sub: 'Start a draft in the editor', href: `/admin/c/${firstKey}?new=1` },
+  { icon: I.page, title: 'Add a page', sub: 'Same editor, lives at /your-slug', href: '/admin/pages?new=1' },
+  { icon: I.upload, title: 'Upload media', sub: 'Drop images, get WebP variants', href: '/admin/media' },
+  { icon: I.links, title: 'Edit links page', sub: `${links.length} blocks · ${fmtN(stats.linkClicks)} clicks`, href: '/admin/links' },
+];
 ---
 
-<Admin title="Dashboard" section="dashboard">
-  <div class="page-head">
-    <h1>Dashboard</h1>
-    <div style="display:flex;gap:8px">
-      {Object.entries(CONTENT.collections).map(([key, c]) => (
-        <a class="btn" href={`/admin/c/${key}?new=1`}>New {c.singular.toLowerCase()}</a>
+<Admin title="Overview" section="dashboard">
+  <div class="dash">
+    <div class="page-head">
+      <div>
+        <h1>{greeting}{firstName ? `, ${firstName}` : ''}</h1>
+        <p class="sub">{summary}</p>
+      </div>
+      <div class="page-actions">
+        <a class="btn primary" href={`/admin/c/${firstKey}?new=1`}>New {noun(firstKey).toLowerCase()}</a>
+      </div>
+    </div>
+
+    <div id="acms-update" hidden data-current={coreVersion} class="notice">
+      <div class="grow-text">
+        <b>ACMS <span id="acms-update-latest"></span> is available</b>
+        <span class="hint">you're on {coreVersion} — run <code>npx acms update</code>; it prints the deploy steps for your setup.</span>
+      </div>
+      <a id="acms-update-notes" class="btn sm ghost" href="https://www.npmjs.com/package/@acms-subir/core" target="_blank" rel="noopener">What's new</a>
+      <button id="acms-update-dismiss" class="icon-btn" type="button" aria-label="Dismiss until the next release" title="Dismiss until the next release">×</button>
+    </div>
+
+    {orphaned.length > 0 && (
+      <div class="notice warn">
+        <div>
+          <b>Content in removed collections</b>
+          <p class="hint tight">
+            {orphaned.map(([key, n]) => `${n} ${n === 1 ? 'entry' : 'entries'} belong${n === 1 ? 's' : ''} to "${key}"`).join(' · ')}
+            — nothing was deleted; re-add the key under content.collections in astro.config to restore them.
+          </p>
+        </div>
+      </div>
+    )}
+
+    <div class="kpis">
+      {kpis.map((k) => (
+        <div class="kpi">
+          <small>{k.label}</small>
+          <b>{k.value}{k.d !== null && <span class={`delta ${k.d < 0 ? 'down' : ''}`}>{k.d > 0 ? '+' : ''}{k.d}%</span>}</b>
+          {k.spark && <svg class="spark" viewBox="0 0 120 26" preserveAspectRatio="none" aria-hidden="true"><path d={k.spark} /></svg>}
+        </div>
       ))}
-      <a class="btn primary" href="/admin/pages?new=1">New page</a>
     </div>
-  </div>
 
-  <div id="acms-update" hidden data-current={coreVersion} class="card card-pad" style="display:none;align-items:center;gap:10px;margin-bottom:14px;border-left:3px solid var(--accent)">
-    <div>
-      <b>ACMS <span id="acms-update-latest"></span> is available</b>
-      <span class="hint" style="margin-left:6px">you're on {coreVersion} — run <code>npx acms update</code>; it prints the deploy steps for your setup.</span>
+    {traffic && views.length > 1 && (
+      <div class="card card-pad chart-card">
+        <div class="card-head"><b>Pageviews</b><span class="hint">Last 30 days · Umami</span></div>
+        <svg class="chart" viewBox="0 0 700 150" preserveAspectRatio="none" role="img" aria-label="Pageviews over the last 30 days">
+          <path class="fill" d={chart.fill} /><path class="line" d={chart.line} />
+        </svg>
+        <div class="chart-axis">{axis.map((a) => <span>{a}</span>)}<span>Today</span></div>
+      </div>
+    )}
+    {umamiOnNoKey && (
+      <p class="hint dash-hint">Umami is tracking visitors. Add a <code>UMAMI_API_TOKEN</code> (self-hosted) or <code>UMAMI_API_KEY</code> (Cloud) environment variable to see traffic here.</p>
+    )}
+
+    <div class="dash-two">
+      <div>
+        <div class="section-title">Start something</div>
+        <div class="tiles">
+          {tiles.map((t) => (
+            <a class="tile" href={t.href}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={t.icon} /></svg>
+              <b>{t.title}</b><small>{t.sub}</small>
+            </a>
+          ))}
+        </div>
+      </div>
+      {doneCount < steps.length ? (
+        <div class="card card-pad">
+          <div class="card-head"><b>Finish setting up</b><span class="hint">{doneCount} of {steps.length}</span></div>
+          <div class="progress"><i style={`width:${(doneCount / steps.length) * 100}%`} /></div>
+          {steps.map((s) => (
+            <a class={`step ${s.done ? 'done' : ''}`} href={s.href}>
+              <span class="step-dot">{s.done && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d={I.check} /></svg>}</span>
+              {s.label}
+              {!s.done && <em>Set up →</em>}
+            </a>
+          ))}
+        </div>
+      ) : (
+        <div class="card card-pad">
+          <div class="card-head"><b>Top links</b><a class="hint" href="/admin/links">Links page →</a></div>
+          {topLinks.length ? topLinks.map((l) => (
+            <div class="kv-row"><span>{l.label}</span><b>{l.clicks.toLocaleString('en-US')}</b></div>
+          )) : <p class="hint tight">No clicks yet.</p>}
+        </div>
+      )}
+    </div>
+
+    {continueRows.length > 0 && (
+      <>
+        <div class="section-title">Continue writing</div>
+        <div class="mini-rows">
+          {continueRows.map((p) => (
+            <a class="mini-row" href={`/admin/c/${p.collection}/${p.id}`}>
+              <span class="crow-thumb">{p.cover ? <img src={p.cover} alt="" /> : null}</span>
+              <span class="grow"><b>{p.title || 'Untitled'}</b><small>{noun(p.collection)} · edited {ago(p.updatedAt)}</small></span>
+              <span class={`status ${p.status}`}>{p.status === 'scheduled' ? `Scheduled · ${when(p.scheduledAt!)}` : 'Draft'}</span>
+            </a>
+          ))}
+        </div>
+      </>
+    )}
+
+    <div class="dash-two">
+      <div>
+        <div class="section-title">{topContent.length ? 'Top content · 30d' : 'Recently edited'}</div>
+        <div class="mini-rows">
+          {topContent.length
+            ? topContent.map((t) => (
+                <a class="mini-row bar-row" href={t.path} target="_blank" rel="noopener">
+                  <i style={`width:${(t.views / topContent[0].views) * 100}%`} />
+                  <span class="grow">{titleByPath.get(t.path)}</span><b>{t.views.toLocaleString('en-US')}</b>
+                </a>
+              ))
+            : recent.map((r) => (
+                <a class="mini-row" href={r.href}>
+                  <span class="grow"><b>{r.title || 'Untitled'}</b><small>{r.kind} · {ago(r.at)}</small></span>
+                  <span class={`status ${r.status}`}>{r.status[0].toUpperCase() + r.status.slice(1)}</span>
+                </a>
+              ))}
+          {!topContent.length && recent.length === 0 && <p class="hint">Nothing yet — create a page or {CONTENT.posts.singular.toLowerCase()}.</p>}
+        </div>
+      </div>
+      {doneCount < steps.length && (
+        <div>
+          <div class="section-title">Top links</div>
+          <div class="mini-rows">
+            {topLinks.length ? topLinks.map((l) => (
+              <div class="mini-row"><span class="grow">{l.label}</span><b>{l.clicks.toLocaleString('en-US')}</b></div>
+            )) : <p class="hint">No link clicks yet.</p>}
+          </div>
+        </div>
+      )}
     </div>
-    <a id="acms-update-notes" class="btn sm ghost" style="margin-left:auto" href="https://www.npmjs.com/package/@acms-subir/core" target="_blank" rel="noopener">What's new</a>
-    <button id="acms-update-dismiss" class="btn sm ghost" type="button" aria-label="Dismiss until the next release" title="Dismiss until the next release">×</button>
   </div>
+
   <script>
     // Ghost-style update nudge: npm registry check, cached a day, silent on
     // any failure (offline, unpublished package, CORS). Dismissal is stored
@@ -85,9 +282,12 @@ function ago(ts: number) {
         }
       } catch { return; }
       const lt = (a: string, b: string) => {
-        const pa = a.split('.').map(Number), pb = b.split('.').map(Number);
+        // prerelease-blind on purpose except for the base-equal case: a site
+        // pinned to a canary (0.1.1-next.x) should be nudged once the real
+        // 0.1.1 lands on the latest tag, and never before
+        const pa = a.split('-')[0].split('.').map(Number), pb = b.split('-')[0].split('.').map(Number);
         for (let i = 0; i < 3; i++) { if ((pa[i] ?? 0) < (pb[i] ?? 0)) return true; if ((pa[i] ?? 0) > (pb[i] ?? 0)) return false; }
-        return false;
+        return a.includes('-') && !b.includes('-');
       };
       if (!latest || !lt(current, latest)) return;
       try { if (localStorage.getItem(DISMISSED) === latest) return; } catch {}
@@ -102,58 +302,8 @@ function ago(ts: number) {
       document.getElementById('acms-update-dismiss')?.addEventListener('click', () => {
         try { localStorage.setItem(DISMISSED, latest); } catch {}
         el.hidden = true;
-        el.style.display = 'none';
       });
       el.hidden = false;
-      el.style.display = 'flex';
     })();
   </script>
-
-  {orphaned.length > 0 && (
-    <div class="card card-pad" style="margin-bottom:14px;border-left:3px solid var(--warn, #c77700)">
-      <b>Content in removed collections</b>
-      <p class="hint" style="margin:4px 0 0">
-        {orphaned.map(([key, n]) => `${n} ${n === 1 ? 'entry' : 'entries'} belong${n === 1 ? 's' : ''} to "${key}"`).join(' · ')}
-        — nothing was deleted; re-add the key under content.collections in astro.config to restore them.
-      </p>
-    </div>
-  )}
-
-  <div class="stats">
-    <div class="stat"><div class="label">Published pages</div><div class="value">{stats.publishedPages}</div></div>
-    {Object.entries(CONTENT.collections).map(([key, c]) => (
-      <div class="stat"><div class="label">{c.plural}</div><div class="value">{countByCollection.get(key) ?? 0}</div></div>
-    ))}
-    <div class="stat"><div class="label">Drafts</div><div class="value">{stats.drafts}</div></div>
-    <div class="stat"><div class="label">Link clicks</div><div class="value">{stats.linkClicks}</div></div>
-  </div>
-
-  <div class="dash-grid">
-    <div class="card card-pad">
-      <p class="card-title">Recently edited</p>
-      <ul class="recent">
-        {recent.map((r) => (
-          <li>
-            <span class={`pill ${r.status}`}>{r.status}</span>
-            <a href={r.href}>{r.title}</a>
-            <span class="t-sub">{r.kind}</span>
-            <span class="when">{ago(r.at)}</span>
-          </li>
-        ))}
-        {recent.length === 0 && <li class="hint">Nothing yet — create a page or {CONTENT.posts.singular.toLowerCase()}.</li>}
-      </ul>
-    </div>
-    <div class="card card-pad">
-      <p class="card-title">Top links</p>
-      <ul class="recent">
-        {topLinks.map((l) => (
-          <li>
-            <span>{l.label}</span>
-            <span class="when">{l.clicks} clicks</span>
-          </li>
-        ))}
-        {topLinks.length === 0 && <li class="hint">No links yet.</li>}
-      </ul>
-    </div>
-  </div>
 </Admin>

package/src/pages/admin/links.astro

@@ -11,11 +11,11 @@ const [links, settings] = await Promise.all([repo.listLinks(), repo.getSettings(
 const unsplashEnabled = Boolean(env('UNSPLASH_ACCESS_KEY'));
 ---
 
-<Admin title="Links" section="links">
+<Admin title="Links page" section="links">
   <div class="page-head">
-    <h1>Links</h1>
+    <div><h1>Links page</h1><p class="sub">Your link-in-bio page at /links</p></div>
     <a class="btn sm" href="/links" target="_blank" rel="noopener">View links page ↗</a>
   </div>
 
-  <LinksManager client:only="react" links={links} settings={{ ...settings, draftsApiKey: '' }} unsplashEnabled={unsplashEnabled} />
+  <LinksManager client:only="react" links={links} settings={{ ...settings, draftsApiKey: '', ai: { ...settings.ai, encryptedKey: '' }, agent: { ...settings.agent, keyHash: '' } }} unsplashEnabled={unsplashEnabled} />
 </Admin>

package/src/pages/admin/login.astro

@@ -1,10 +1,11 @@
 ---
-import { checkPassword, createSessionToken, verifyPassword, verifySessionToken, SESSION_COOKIE } from '../../lib/auth';
+import { checkPassword, createSessionToken, verifyPassword, validateSession, SESSION_COOKIE } from '../../lib/auth';
 import { getRepo } from '../../lib/repo';
 import { BRAND } from '../../lib/brand';
+import ThemeScript from '../../components/ThemeScript.astro';
 import '../../styles/admin.css';
 
-if (verifySessionToken(Astro.cookies.get(SESSION_COOKIE)?.value)) {
+if ((await validateSession(Astro.cookies.get(SESSION_COOKIE)?.value, Astro.locals))) {
   return Astro.redirect('/admin');
 }
 
@@ -17,12 +18,13 @@ if (Astro.request.method === 'POST') {
   // Email empty → the env master password (bootstrap owner). Email present →
   // a user account created in /admin/users.
   let sessionUserId: string | null = null;
+  let sessionVersion = 0;
   if (!email && checkPassword(password)) {
     sessionUserId = null; // default token = env owner
   } else if (email) {
     const repo = await getRepo(Astro.locals);
     const auth = await repo.getUserAuth(email);
-    if (auth && (await verifyPassword(password, auth.passHash))) sessionUserId = auth.user.id;
+    if (auth && (await verifyPassword(password, auth.passHash))) { sessionUserId = auth.user.id; sessionVersion = auth.sessionVersion; }
     else {
       error = 'Wrong email or password.';
     }
@@ -31,7 +33,7 @@ if (Astro.request.method === 'POST') {
   }
 
   if (!error) {
-    Astro.cookies.set(SESSION_COOKIE, sessionUserId ? createSessionToken(sessionUserId) : createSessionToken(), {
+    Astro.cookies.set(SESSION_COOKIE, sessionUserId ? createSessionToken(sessionUserId, sessionVersion) : createSessionToken(), {
       httpOnly: true,
       sameSite: 'lax',
       path: '/',
@@ -47,7 +49,8 @@ if (Astro.request.method === 'POST') {
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <ThemeScript />
     <meta name="robots" content="noindex" />
     <title>Sign in · {BRAND.name} admin</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -58,9 +61,9 @@ if (Astro.request.method === 'POST') {
       <div class="card card-pad login-card">
         <div class="brand">
           <svg width="26" height="26" viewBox="0 0 24 24" role="img" aria-label={BRAND.name}>
-            <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="#2a2d36" />
-            <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="#ee5d20" />
-            <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="#2a2d36" opacity="0.42" />
+            <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="currentColor" opacity="0.85" />
+            <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="var(--accent)" />
+            <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="currentColor" opacity="0.35" />
           </svg>
           <div class="brand-name">{BRAND.name}</div>
         </div>
@@ -74,9 +77,10 @@ if (Astro.request.method === 'POST') {
             <span>Password</span>
             <input type="password" name="password" autofocus autocomplete="current-password" />
           </label>
-          <button class="btn primary" style="width:100%;justify-content:center" type="submit">Sign in</button>
+          <button class="btn primary block" type="submit">Sign in</button>
         </form>
-        <p class="hint" style="margin-top:14px">No account? The owner password from <code>ADMIN_PASSWORD</code> in <code>.env</code> always works with email left empty.</p>
+        <p class="hint"><a href="/account/forgot">Forgot your password?</a></p>
+        <p class="hint login-note">No account? The owner password from <code>ADMIN_PASSWORD</code> in <code>.env</code> always works with email left empty.</p>
       </div>
     </div>
   </body>

package/src/pages/admin/navigation.astro

@@ -2,9 +2,14 @@
 import Admin from '../../layouts/Admin.astro';
 import { getRepo } from '../../lib/repo';
 import NavManager from '../../components/NavManager';
+import { draftNavItems, toNavItems } from '../../lib/drafts';
 
+// Menus stage with the design: the editor shows the staged list when one
+// exists, the live list otherwise.
 const repo = await getRepo(Astro.locals);
-const items = await repo.listNavItems();
+const [live, settings] = await Promise.all([repo.listNavItems(), repo.getSettings()]);
+const stagedList = draftNavItems(settings.draftDesign);
+const items = stagedList ? toNavItems(stagedList) : live;
 ---
 
 <Admin title="Navigation" section="navigation">
@@ -12,6 +17,7 @@ const items = await repo.listNavItems();
     <h1>Navigation</h1>
     <a class="btn sm" href="/" target="_blank" rel="noopener">View site ↗</a>
   </div>
+  <p class="hint nm-intro">Menu changes are staged and go live with <b>Publish</b>, together with any staged design changes. Use Preview site to see them first.</p>
 
-  <NavManager client:only="react" items={items} />
+  <NavManager client:only="react" items={items} staged={Boolean(stagedList)} />
 </Admin>

package/src/pages/admin/pages/[id].astro

@@ -5,6 +5,9 @@ import { createPreviewToken } from '../../../lib/preview';
 import { resolveDesign } from '../../../lib/theme';
 import { env } from '../../../lib/env';
 import { BRAND } from '../../../lib/brand';
+import { mergePageDraft } from '../../../lib/drafts';
+import { localeHomeUrl } from '../../../lib/i18n';
+import ThemeScript from '../../../components/ThemeScript.astro';
 import PostEditor from '../../../components/editor/PostEditor';
 import '../../../styles/admin.css';
 import '../../../styles/editor.css';
@@ -14,9 +17,14 @@ const id = Astro.params.id!;
 const page = await repo.getPage(id);
 if (!page) return new Response(null, { status: 404 });
 
+// The editor hydrates from the pending draft when one exists (live pages
+// stage their edits until Update); the live URL stays on the live slug.
+const editable = mergePageDraft(page);
+const livePath = page.isHome ? localeHomeUrl(page.locale) : `/${page.slug}`;
+
 // Canonical content is the TipTap doc (as HTML). Legacy widget-block pages
 // are converted on first open and become rich content on next save.
-const initialHTML = page.bodyHtml || blocksToHtml(page.blocks);
+const initialHTML = editable.bodyHtml || blocksToHtml(editable.blocks);
 const previewPath = `/preview/page/${page.id}`;
 const sharePath = `${previewPath}?token=${createPreviewToken('page', page.id)}`;
 const unsplashEnabled = Boolean(env('UNSPLASH_ACCESS_KEY'));
@@ -28,7 +36,8 @@ const templates = Object.keys(resolveDesign(settings).theme.pageTemplates);
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-visual" />
+    <ThemeScript />
     <meta name="robots" content="noindex" />
     <title>{page.title || 'Untitled'} · {BRAND.name} editor</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -38,12 +47,14 @@ const templates = Object.keys(resolveDesign(settings).theme.pageTemplates);
     <PostEditor
       client:only="react"
       kind="page"
-      page={page}
+      page={editable}
       initialHTML={initialHTML}
       unsplashEnabled={unsplashEnabled}
       previewPath={previewPath}
       sharePath={sharePath}
+      livePath={livePath}
       templates={templates}
+      site={{ title: settings.siteTitle, url: settings.siteUrl }}
     />
   </body>
 </html>