@acms-subir/core 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @acms-subir/core
 
+## 0.2.0
+
+### Minor Changes
+
+- c568c1d: Manual publish: nothing goes live until you press Update
+
+  - Posts & pages (incl. the homepage): editing a live (published or scheduled)
+    document no longer pushes autosaves to the public site. Edits stage in a
+    private pending draft (new `draft` column, migration v22); the editor shows
+    "Published · edited — Saved, not live yet", the publish popover gains
+    **Update — push changes live** and **Discard pending changes**, and admin
+    lists mark pending documents with an `edited` pill. `/preview/…` (and share
+    links) render the pending version — exactly what Update will publish.
+    Deferred side-effects: the slug-rename 301 and the search index only update
+    at Update time, so staged edits can never leak through search or move a
+    live URL early. Unpublishing folds pending edits into the document; the
+    scheduled-publish sweep publishes the live copy and keeps pending edits
+    pending. Drafts survive backup/restore.
+  - Design screen: theme, token, logo, favicon and share-image changes stage in
+    `settings.draftDesign` (migration v23). The preview iframe renders the
+    staged design via the admin-only `?designPreview=1` flag while visitors
+    keep the live one; **Publish design** applies it, **Discard** reverts.
+  - Navigation & Links managers: the auto-save debounce is gone. Edits stay
+    local with an "Unsaved changes — not live yet" bar; **Save changes**
+    commits everything at once (add/edit/delete/reorder + links profile),
+    **Discard** restores the saved state, and leaving the page with unsaved
+    edits warns first.
+
 ## 0.1.0
 
 ### Minor Changes

package/cli.mjs

@@ -2,6 +2,8 @@
 // `acms` — tiny maintenance CLI installed with @acms-subir/core.
 //   acms update           check the registry, install the latest core, print what's new
 //   acms update --check   just report whether an update exists (exit 1 if behind)
+//   acms update --next    follow the canary channel (`next` dist-tag); sticky once installed
+//   acms update --latest  leave the canary channel and go back to stable
 //   acms doctor           sanity-check the project setup
 //   acms add cloudflare   retrofit Workers deployment (wrangler.jsonc, deps, D1/R2)
 //   acms add docker       retrofit self-hosting (Dockerfile, compose.yml)
@@ -23,16 +25,39 @@ const installedVersion = () => {
   const p = installedPkgJson();
   try { return p ? JSON.parse(readFileSync(p, 'utf8')).version : null; } catch { return null; }
 };
-const latestVersion = async () => {
-  const res = await fetch(`https://registry.npmjs.org/${encodeURIComponent(PKG)}/latest`, {
+const latestVersion = async (tag = 'latest') => {
+  const res = await fetch(`https://registry.npmjs.org/${encodeURIComponent(PKG)}/${tag}`, {
     signal: AbortSignal.timeout(10_000),
   });
+  if (res.status === 404 && tag !== 'latest') {
+    throw Object.assign(new Error(`the '${tag}' channel has no releases yet`), { noTag: true });
+  }
   if (!res.ok) throw new Error(`registry responded ${res.status}`);
   return (await res.json()).version;
 };
+const splitPre = (v) => {
+  const i = v.indexOf('-');
+  return i === -1 ? [v, ''] : [v.slice(0, i), v.slice(i + 1)];
+};
+const isCanary = (v) => splitPre(v)[1] !== '';
 const semverLt = (a, b) => {
-  const pa = a.split('.').map(Number), pb = b.split('.').map(Number);
+  const [aBase, aPre] = splitPre(a), [bBase, bPre] = splitPre(b);
+  const pa = aBase.split('.').map(Number), pb = bBase.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; }
+  // equal bases: a release outranks any of its prereleases; two prereleases
+  // compare identifier by identifier, numerically where both sides are numbers
+  if (!aPre) return false;
+  if (!bPre) return true;
+  const as = aPre.split('.'), bs = bPre.split('.');
+  for (let i = 0; i < Math.max(as.length, bs.length); i++) {
+    const x = as[i], y = bs[i];
+    if (x === undefined) return true;
+    if (y === undefined) return false;
+    const nx = /^\d+$/.test(x), ny = /^\d+$/.test(y);
+    if (nx && ny) { if (Number(x) !== Number(y)) return Number(x) < Number(y); }
+    else if (nx !== ny) return nx;
+    else if (x !== y) return x < y;
+  }
   return false;
 };
 
@@ -65,18 +90,32 @@ if (cmd === 'update') {
   const checkOnly = process.argv.includes('--check');
   const current = installedVersion();
   if (!current) { console.error(`✗ ${PKG} is not installed here — run this from your site's folder.`); process.exit(1); }
+  // Channel: --next opts into canary prereleases and is sticky — once a canary
+  // is installed, a plain `acms update` keeps following the next tag until
+  // --latest switches back to stable.
+  const backToStable = process.argv.includes('--latest') && isCanary(current);
+  const channel = process.argv.includes('--latest') ? 'latest'
+    : process.argv.includes('--next') || isCanary(current) ? 'next'
+    : 'latest';
   let latest;
-  try { latest = await latestVersion(); } catch (e) { console.error(`✗ Could not reach the npm registry (${e.message}).`); process.exit(1); }
-  if (!semverLt(current, latest)) {
-    console.log(`✓ Already up to date (${current}).`);
+  try { latest = await latestVersion(channel); } catch (e) {
+    console.error(e.noTag ? `✗ ${e.message[0].toUpperCase()}${e.message.slice(1)}.` : `✗ Could not reach the npm registry (${e.message}).`);
+    process.exit(1);
+  }
+  // Leaving the canary channel is usually a downgrade (0.1.1-next.x → 0.1.0),
+  // so "am I behind" is the wrong question there — switch unconditionally.
+  if (!backToStable && !semverLt(current, latest)) {
+    console.log(`✓ Already up to date (${current}${channel === 'next' ? ', canary channel' : ''}).`);
     process.exit(0);
   }
   if (checkOnly) {
-    console.log(`Update available: ${current} → ${latest}. Run: npx acms update`);
+    console.log(`Update available: ${current} → ${latest}. Run: npx acms update${channel === 'next' ? ' --next' : backToStable ? ' --latest' : ''}`);
     process.exit(1);
   }
-  console.log(`Updating ${PKG} ${current} → ${latest}…`);
-  const res = spawnSync('npm', ['install', `${PKG}@latest`, '--no-audit', '--no-fund'], { stdio: 'inherit' });
+  console.log(backToStable
+    ? `Returning to the stable channel: ${PKG} ${current} → ${latest}…`
+    : `Updating ${PKG} ${current} → ${latest}${channel === 'next' ? ' (canary)' : ''}…`);
+  const res = spawnSync('npm', ['install', `${PKG}@${channel}`, '--no-audit', '--no-fund'], { stdio: 'inherit' });
   if (res.status !== 0) process.exit(res.status ?? 1);
   console.log(`\n✓ Updated to ${latest}.`);
   const notes = releaseNotes(changelogFor(installedPkgJson()), current, latest);
@@ -86,9 +125,14 @@ if (cmd === 'update') {
       console.log(`\n  ${PKG} ${r.version}`);
       if (r.body) console.log(r.body.split('\n').map((l) => `    ${l}`).join('\n'));
     }
+  } else if (channel === 'next') {
+    console.log(`\nWhat's new: canary build — notes arrive with the next stable release.`);
   } else {
     console.log(`\nWhat's new: https://www.npmjs.com/package/${PKG}/v/${latest}`);
   }
+  if (channel === 'next') {
+    console.log(`\nYou're on the canary channel; \`npx acms update --latest\` returns to stable.`);
+  }
   const t = deployTargets();
   const steps = [
     ...(t.cloudflare ? ['  npm run deploy                       # Cloudflare Workers'] : []),
@@ -269,6 +313,14 @@ data
 .dev.vars
 .wrangler
 .git
+`);
+    writeNew('.env.example', `# Copy to .env and fill in real values — compose.yml reads .env automatically.
+# .env itself is gitignored; this file is the committed record of what to set.
+ADMIN_PASSWORD=change-me
+# Random secret used to sign the session cookie (openssl rand -hex 32)
+SESSION_SECRET=
+# SQLite file used by the Node target (a volume mounts /app/data in Docker)
+SQLITE_URL=file:./data/acms.db
 `);
     setScript('build:node', 'DEPLOY_TARGET=node astro build');
     writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n');
@@ -309,6 +361,8 @@ data
 Usage:
   acms update           Update the CMS core to the latest release
   acms update --check   Report whether an update exists (exit 1 if behind)
+  acms update --next    Follow the canary channel (prereleases); later updates stay on it
+  acms update --latest  Leave the canary channel and return to stable releases
   acms doctor           Check this project's setup
   acms add cloudflare   Add Workers deployment to this project (--provision creates D1 + R2)
   acms add docker       Add Docker self-hosting to this project`);

package/integration.mjs

@@ -357,6 +357,17 @@ export default function acms(options = {}) {
             vite: { resolve: { alias: { 'react-dom/server': 'react-dom/server.edge' } } },
           });
         }
+        // The Docker runtime image installs only @libsql/client, so the
+        // standalone bundle must carry every other dependency. Left to its
+        // default, Vite externalizes package imports (react-dom, astro's
+        // runtime, zod, marked, …) and the server crashes on its first
+        // import in the container. @libsql/client stays external: it is
+        // dynamically imported and ships native bindings.
+        if (target === 'node' && command === 'build') {
+          updateConfig({
+            vite: { ssr: { noExternal: true, external: ['@libsql/client'] } },
+          });
+        }
       },
       // fires only for `astro dev` — builds and previews never phone anywhere
       'astro:server:start': ({ logger }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -22,7 +22,7 @@
     "workers"
   ],
   "bin": {
-    "acms": "./cli.mjs"
+    "acms": "cli.mjs"
   },
   "exports": {
     ".": "./integration.mjs",
@@ -48,13 +48,14 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@libsql/client": "^0.15.0",
-    "@tiptap/extension-code-block-lowlight": "^3.29.2",
-    "@tiptap/extension-table": "^3.29.2",
-    "@tiptap/extensions": "^3.29.2",
-    "@tiptap/pm": "^3.29.2",
-    "@tiptap/react": "^3.29.2",
-    "@tiptap/starter-kit": "^3.29.2",
-    "@tiptap/suggestion": "^3.29.2",
+    "@tiptap/extension-code-block-lowlight": "^3.30.1",
+    "@tiptap/extension-highlight": "3.30.1",
+    "@tiptap/extension-table": "^3.30.1",
+    "@tiptap/extensions": "^3.30.1",
+    "@tiptap/pm": "^3.30.1",
+    "@tiptap/react": "^3.30.1",
+    "@tiptap/starter-kit": "^3.30.1",
+    "@tiptap/suggestion": "^3.30.1",
     "hast-util-to-html": "^9.0.5",
     "lowlight": "^3.3.0",
     "marked": "^15.0.0",

package/src/actions/index.ts

@@ -12,7 +12,7 @@ import { isPrivateHost } from '../lib/net';
 import { normalizeCalendarSrc } from '../lib/calendar/src';
 import { getCalendarEvents } from '../lib/calendar/ics';
 import { siteLocale } from '../lib/dates';
-import { normalizePageLocale } from '../lib/i18n';
+import { normalizePageLocale, localeHomeUrl } from '../lib/i18n';
 
 // All admin mutations live here. The middleware only guards /admin pages,
 // so every action re-checks the session itself.
@@ -71,8 +71,17 @@ export const server = {
         if (data.collection !== undefined && !CONTENT.collections[data.collection]) {
           throw new ActionError({ code: 'BAD_REQUEST', message: `Unknown collection "${data.collection}".` });
         }
-        const movesUrl = data.slug !== undefined || data.collection !== undefined;
-        const before = movesUrl ? await repo.getPost(id) : null;
+        const before = await repo.getPost(id);
+        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Post not found.' });
+        // A live (published/scheduled) post never takes content edits
+        // directly: they stage into the pending draft until the user hits
+        // Update. Status transitions stay deliberate, immediate writes.
+        const transitions = data.status !== undefined && data.status !== before.status;
+        if ((before.status === 'published' || before.status === 'scheduled') && !transitions) {
+          const { status: _status, scheduledAt: _scheduledAt, authorId: _authorId, ...staged } = data;
+          await repo.savePostDraft(id, staged);
+          return { post: (await repo.getPost(id))! };
+        }
         await repo.updatePost(id, data);
         // any new tag names become registry entries with slugs for archives
         if (data.tags !== undefined) await repo.ensureTags(data.tags);
@@ -80,7 +89,32 @@ export const server = {
         if (!post) throw new ActionError({ code: 'NOT_FOUND', message: 'Post not found.' });
         // a published post whose slug or collection changed leaves a 301
         // behind so old links keep working
-        if (before && before.status === 'published' && (before.slug !== post.slug || before.collection !== post.collection)) {
+        if (before.status === 'published' && (before.slug !== post.slug || before.collection !== post.collection)) {
+          await repo
+            .createRedirect({
+              fromPath: collectionUrl(before.collection, before.slug),
+              toPath: collectionUrl(post.collection, post.slug),
+            })
+            .catch(() => {});
+          invalidateRedirectCache();
+        }
+        return { post };
+      },
+    }),
+    // Update button: copy the pending draft onto the live columns. The
+    // deferred side-effects (tag registry, slug-change 301) happen here —
+    // the moment the change actually goes live.
+    applyUpdate: defineAction({
+      input: z.object({ id: z.string() }),
+      handler: async ({ id }, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        const before = await repo.getPost(id);
+        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Post not found.' });
+        await repo.applyPostDraft(id);
+        const post = (await repo.getPost(id))!;
+        if (post.tags.length) await repo.ensureTags(post.tags);
+        if (before.status === 'published' && (before.slug !== post.slug || before.collection !== post.collection)) {
           await repo
             .createRedirect({
               fromPath: collectionUrl(before.collection, before.slug),
@@ -92,6 +126,17 @@ export const server = {
         return { post };
       },
     }),
+    discardChanges: defineAction({
+      input: z.object({ id: z.string() }),
+      handler: async ({ id }, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        await repo.discardPostDraft(id);
+        const post = await repo.getPost(id);
+        if (!post) throw new ActionError({ code: 'NOT_FOUND', message: 'Post not found.' });
+        return { post };
+      },
+    }),
     delete: defineAction({
       input: z.object({ id: z.string() }),
       handler: async ({ id }, ctx) => {
@@ -125,24 +170,59 @@ export const server = {
         if (data.slug !== undefined) data.slug = slugify(data.slug);
         // default locale stores as '', unknown codes fall back to it
         if (data.locale !== undefined) data.locale = normalizePageLocale(data.locale);
-        const before = data.slug !== undefined ? await repo.getPage(id) : null;
+        const before = await repo.getPage(id);
+        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Page not found.' });
         const cleanBlocks =
           blocks === undefined
             ? undefined
             : blocks
                 .filter((b) => widgetTypes.includes(b.type as WidgetType))
                 .map((b) => ({ ...b, type: b.type as WidgetType, config: parseConfig(b.type as WidgetType, b.config) as Record<string, unknown> }));
+        // live pages stage their edits until Update, same as posts
+        const transitions = data.status !== undefined && data.status !== before.status;
+        if ((before.status === 'published' || before.status === 'scheduled') && !transitions) {
+          const { status: _status, ...staged } = data;
+          await repo.savePageDraft(id, { ...staged, blocks: cleanBlocks });
+          return { page: (await repo.getPage(id))! };
+        }
         await repo.updatePage(id, { ...data, blocks: cleanBlocks });
         const page = await repo.getPage(id);
         if (!page) throw new ActionError({ code: 'NOT_FOUND', message: 'Page not found.' });
         // renaming a published slug leaves a 301 behind so old links keep working
-        if (before && before.status === 'published' && before.slug !== page.slug && !page.isHome) {
+        if (before.status === 'published' && before.slug !== page.slug && !page.isHome) {
           await repo.createRedirect({ fromPath: `/${before.slug}`, toPath: `/${page.slug}` }).catch(() => {});
           invalidateRedirectCache();
         }
         return { page };
       },
     }),
+    applyUpdate: defineAction({
+      input: z.object({ id: z.string() }),
+      handler: async ({ id }, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        const before = await repo.getPage(id);
+        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Page not found.' });
+        await repo.applyPageDraft(id);
+        const page = (await repo.getPage(id))!;
+        if (before.status === 'published' && before.slug !== page.slug && !page.isHome) {
+          await repo.createRedirect({ fromPath: `/${before.slug}`, toPath: `/${page.slug}` }).catch(() => {});
+          invalidateRedirectCache();
+        }
+        return { page };
+      },
+    }),
+    discardChanges: defineAction({
+      input: z.object({ id: z.string() }),
+      handler: async ({ id }, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        await repo.discardPageDraft(id);
+        const page = await repo.getPage(id);
+        if (!page) throw new ActionError({ code: 'NOT_FOUND', message: 'Page not found.' });
+        return { page };
+      },
+    }),
     delete: defineAction({
       input: z.object({ id: z.string() }),
       handler: async ({ id }, ctx) => {
@@ -309,6 +389,41 @@ export const server = {
         return { ok: true };
       },
     }),
+    // Design-screen staging: edits stage in settings.draftDesign (previewed
+    // via ?designPreview=1) until "Publish design" applies them live.
+    saveDesignDraft: defineAction({
+      input: z.object({
+        activeTheme: z.string().optional(),
+        designOverrides: z.record(z.any()).optional(),
+        siteLogo: z.string().optional(),
+        siteFavicon: z.string().optional(),
+        siteCover: z.string().optional(),
+      }),
+      handler: async (data, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        await repo.saveDesignDraft(data);
+        return { ok: true };
+      },
+    }),
+    applyDesign: defineAction({
+      input: z.object({}),
+      handler: async (_input, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        await repo.applyDesignDraft();
+        return { ok: true };
+      },
+    }),
+    discardDesign: defineAction({
+      input: z.object({}),
+      handler: async (_input, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        await repo.discardDesignDraft();
+        return { ok: true };
+      },
+    }),
   },
 
   tags: {
@@ -322,6 +437,41 @@ export const server = {
     }),
   },
 
+  snippets: {
+    list: defineAction({
+      input: z.object({}),
+      handler: async (_input, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        return { snippets: await repo.listSnippets() };
+      },
+    }),
+    create: defineAction({
+      input: z.object({ name: z.string().min(1).max(80), contentJson: z.string().min(2) }),
+      handler: async ({ name, contentJson }, ctx) => {
+        requireAdmin(ctx);
+        // must be a JSON array of ProseMirror nodes — reject anything else
+        // before it can break the editor on re-insert
+        let parsed: unknown;
+        try { parsed = JSON.parse(contentJson); } catch { parsed = null; }
+        if (!Array.isArray(parsed) || !parsed.length) {
+          throw new ActionError({ code: 'BAD_REQUEST', message: 'Select some content first.' });
+        }
+        const repo = await getRepo(ctx.locals);
+        return { snippet: await repo.createSnippet({ name, contentJson }) };
+      },
+    }),
+    delete: defineAction({
+      input: z.object({ id: z.string() }),
+      handler: async ({ id }, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        await repo.deleteSnippet(id);
+        return { ok: true };
+      },
+    }),
+  },
+
   users: {
     list: defineAction({
       input: z.object({}),
@@ -333,6 +483,34 @@ export const server = {
     }),
   },
 
+  linkTargets: {
+    // ⌘K internal link search: published posts + pages matched by title or
+    // URL. Drafts are excluded on purpose — linking to one would 404 until
+    // it's published.
+    search: defineAction({
+      input: z.object({ query: z.string().min(1) }),
+      handler: async ({ query }, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        const q = query.toLowerCase();
+        const [posts, pages] = await Promise.all([repo.listPosts(), repo.listPages()]);
+        const targets = [
+          ...pages
+            .filter((p) => p.status === 'published')
+            .map((p) => ({ kind: 'Page', title: p.title, url: p.isHome ? localeHomeUrl(p.locale) : `/${p.slug}` })),
+          ...posts
+            .filter((p) => p.status === 'published')
+            .map((p) => ({
+              kind: (CONTENT.collections[p.collection] ?? CONTENT.posts).singular,
+              title: p.title,
+              url: collectionUrl(p.collection, p.slug),
+            })),
+        ].filter((t) => t.title.toLowerCase().includes(q) || t.url.toLowerCase().includes(q));
+        return { targets: targets.slice(0, 8) };
+      },
+    }),
+  },
+
   bookmark: {
     // Server-side link-metadata fetch for the bookmark card (no CORS in the
     // browser). Fetches the page, scrapes OG/meta tags, returns a compact

package/src/components/DesignManager.tsx

@@ -7,6 +7,10 @@ import { ImagePicker } from './editor/ImagePicker';
 // token overrides on top (saved to settings.designOverrides — the theme files
 // are never written to), set the site logo, and export the effective design
 // as a committable theme.json.
+//
+// Every change stages into settings.draftDesign — the preview iframe renders
+// the staged design (?designPreview=1, admin-only) while visitors keep the
+// live one until "Publish design" applies it.
 
 type SaveState = 'saved' | 'saving' | 'error';
 
@@ -33,6 +37,8 @@ interface Pairing { key: string; label: string; headingFont: string; bodyFont: s
 
 interface Props {
   settings: Settings;
+  // true when settings.draftDesign held staged changes at load time
+  pendingDesign: boolean;
   themes: ThemeInfo[];
   pairings: Pairing[];
   unsplashEnabled: boolean;
@@ -80,7 +86,8 @@ const DEVICES = [
 ] as const;
 type DeviceKey = (typeof DEVICES)[number]['key'];
 
-export default function DesignManager({ settings, themes, pairings, unsplashEnabled, postPreviewPath }: Props) {
+export default function DesignManager({ settings, pendingDesign, themes, pairings, unsplashEnabled, postPreviewPath }: Props) {
+  const [pending, setPending] = useState(pendingDesign);
   const [activeTheme, setActiveTheme] = useState(settings.activeTheme || 'ink');
   const [overrides, setOverrides] = useState<Record<string, unknown>>(
     (settings.designOverrides as Record<string, unknown>) ?? {}
@@ -113,22 +120,45 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
 
   const theme = themes.find((t) => t.slug === activeTheme) ?? themes[0];
 
+  // saves stage into settings.draftDesign — the live site is untouched
+  const doSave = async () => {
+    const { activeTheme, overrides, siteLogo, siteFavicon, siteCover } = latest.current;
+    const { error } = await actions.settings.saveDesignDraft({
+      activeTheme,
+      designOverrides: overrides,
+      siteLogo,
+      siteFavicon,
+      siteCover,
+    });
+    if (error) { setSaveState('error'); return false; }
+    setSaveState('saved');
+    setPending(true);
+    setTick((t) => t + 1);
+    return true;
+  };
+
   const scheduleSave = () => {
     setSaveState('saving');
     if (timer.current) clearTimeout(timer.current);
-    timer.current = setTimeout(async () => {
-      const { activeTheme, overrides, siteLogo, siteFavicon, siteCover } = latest.current;
-      const { error } = await actions.settings.update({
-        activeTheme,
-        designOverrides: overrides,
-        siteLogo,
-        siteFavicon,
-        siteCover,
-      });
-      if (error) { setSaveState('error'); return; }
-      setSaveState('saved');
-      setTick((t) => t + 1);
-    }, 500);
+    timer.current = setTimeout(doSave, 500);
+  };
+
+  // Publish design: flush any queued save into the staged blob, then apply it
+  const publishDesign = async () => {
+    if (timer.current) { clearTimeout(timer.current); timer.current = null; }
+    if (!(await doSave())) return;
+    const { error } = await actions.settings.applyDesign({});
+    if (error) { setSaveState('error'); return; }
+    setPending(false);
+    setTick((t) => t + 1);
+  };
+
+  const discardDesign = async () => {
+    if (!window.confirm('Discard the staged design changes and go back to the live design? This cannot be undone.')) return;
+    if (timer.current) { clearTimeout(timer.current); timer.current = null; }
+    const { error } = await actions.settings.discardDesign({});
+    if (error) { setSaveState('error'); return; }
+    location.reload(); // rehydrate the controls from the live design
   };
 
   const setOv = (key: string, value: unknown) => {
@@ -186,7 +216,7 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
           <div className="dm-cardhead">
             <p className="dm-sub">
               Active theme: <b>{theme.name}</b> · loaded from <code>src/themes/{theme.slug}/</code> —
-              values below override it. Overrides apply instantly.
+              values below override it. Changes stage privately in the preview; press <b>Publish design</b> to go live.
             </p>
             <div className="dm-headactions">
               {overrideCount > 0 && (
@@ -195,8 +225,14 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
                 </button>
               )}
               <span className={`lm-savestate ${saveState}`}>
-                {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : 'Saved'}
+                {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : pending ? 'Staged — not live yet' : 'Live design'}
               </span>
+              {pending && (
+                <>
+                  <button className="btn sm ghost" type="button" onClick={discardDesign}>Discard</button>
+                  <button className="btn sm primary" type="button" onClick={publishDesign}>Publish design</button>
+                </>
+              )}
             </div>
           </div>
 
@@ -494,7 +530,7 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
             <div className="dm-frame" ref={frameRef}>
               <iframe
                 key={`${previewPage}-${tick}`}
-                src={`${previewPage === 'post' && postPreviewPath ? postPreviewPath : '/'}?design=${tick}`}
+                src={`${previewPage === 'post' && postPreviewPath ? postPreviewPath : '/'}?designPreview=1&design=${tick}`}
                 title="Site preview"
                 style={{
                   width: device.width,