From 010dcfa349289061523519634cfa1a7e3e9039c2 Mon Sep 17 00:00:00 2001
From: Dinesh <13635627+HumbleBee14@users.noreply.github.com>
Date: Fri, 14 Aug 2026 19:18:40 -0700
Subject: [PATCH] Write engine: stop the converter destroying content, add
 unlisted drafts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The converter turns anything it does not recognise into literal text, and the
serializer then escapes its `<` — so an unhandled construct is not ignored on
the way in, it is destroyed on the way out. Posts written here always came from
the editor, so this stayed latent; a hand-edited index.mdx triggers it.

Round-trip fixes:

- Escaped delimiters. Every inline pattern now carries `(?<!\\)`. Without it
  `\$4.00 … \$8.00` matched as math, because the escaping backslash is itself
  the non-space character the closing delimiter requires. escapeProse escapes
  `$` for the same reason it escapes `*`, and unescapeProse reverses it.
- Inline HTML. <strong>/<b>, <em>/<i>, <s>/<del>, <code> and <u> now read back
  as styles instead of surviving as text.
- Colour spans, read back to their palette names.
- Bare YAML flow lists — `tags: [a, b]` no longer fails JSON.parse.
- <details>, <Gallery>, <Video>, self-closing <Figure> and local <Image>, none
  of which the converter could read even though the serializer emits them.
- Soft breaks and paragraphs opening with a tag.
- Anything still unrepresentable raises a named warning before publish.

Divergence detection: index.mdx is what the site builds from, so where it and
.write-source.json disagree the markdown wins. Publishing regenerates index.mdx
wholesale, so a sidecar left stale by an outside edit would silently revert it.

Drafts: `draft: true` now builds and answers at its real URL, but is held out
of every listing, the sitemap, RSS and search, and carries a noindex. /drafts
lists them; each row and the post itself link into /write with the box
unticked. Previously a draft did not build at all.

Two deliberate behaviour changes, both covered by updated tests: dollar amounts
are now escaped on the way out (`$4-$8` was otherwise unstable across a
round-trip), and cover/ogCard/draft frontmatter is read back rather than reset.
---
 astro.config.mjs                     |  26 ++-
 src/components/DraftNotice.astro     |  65 +++++++
 src/pages/blog/[slug].astro          |  10 +-
 src/pages/drafts.astro               | 115 +++++++++++++
 src/write/WritePortal.tsx            |  57 ++++++-
 src/write/convert/mdxToSource.mjs    | 245 +++++++++++++++++++++++----
 src/write/editor/editor-theme.css    |  49 ++++++
 src/write/serialize/fetchExisting.ts | 163 ++++++++++++++++--
 src/write/serialize/toMdx.test.ts    |  14 +-
 src/write/serialize/toMdx.ts         |  61 +++++--
 10 files changed, 736 insertions(+), 69 deletions(-)
 create mode 100644 src/components/DraftNotice.astro
 create mode 100644 src/pages/drafts.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 93fe652..b015d7c 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -53,8 +53,31 @@ try {
   }
 }
 
+// Draft posts build and answer at their real URL, but must stay out of the
+// sitemap. Collections don't exist yet at config time, so read the frontmatter
+// off disk — the same rule content.config.ts applies, one layer earlier.
+/** @type {Set<string>} */
+const draftPaths = new Set();
+try {
+  const postsDir = join(__dirname, 'src/content/posts');
+  for (const slug of readdirSync(postsDir)) {
+    if (slug.startsWith('.')) continue;
+    try {
+      const content = readFileSync(join(postsDir, slug, 'index.mdx'), 'utf8');
+      const fm = content.match(/^---\n([\s\S]*?)\n---/);
+      if (fm && /^draft:[ \t]*true[ \t]*$/m.test(fm[1])) draftPaths.add(`/blog/${slug}`);
+    } catch {
+      // not a post directory, or no index.mdx — nothing to exclude
+    }
+  }
+} catch (err) {
+  if (err instanceof Error && 'code' in err && err.code !== 'ENOENT') {
+    console.warn('[sitemap] draft scan failed:', err.message);
+  }
+}
+
 /** @type {string[]} */
-const SKIP_PATTERNS = ['/write', '/search'];
+const SKIP_PATTERNS = ['/write', '/search', '/drafts'];
 
 // Paginated listing pages (/blog/2, /topics/x/2, /tags/x/2, /authors/x/articles/2)
 // are secondary — keep them below their first page and below real articles.
@@ -172,6 +195,7 @@ export default defineConfig({
         try {
           const url = new URL(page);
           const p = url.pathname.replace(/\/$/, '') || '/';
+          if (draftPaths.has(p)) return false;
           return !SKIP_PATTERNS.some((skip) => p === skip || p.startsWith(skip));
         } catch {
           return true;
diff --git a/src/components/DraftNotice.astro b/src/components/DraftNotice.astro
new file mode 100644
index 0000000..9b7faaa
--- /dev/null
+++ b/src/components/DraftNotice.astro
@@ -0,0 +1,65 @@
+---
+interface Props {
+  slug: string;
+}
+
+const { slug } = Astro.props;
+---
+
+<aside class="draft-notice">
+  <span class="draft-notice-tag">Draft</span>
+  <p>Not publicly listed yet. <a href="/drafts">All drafts</a></p>
+  <a class="draft-notice-publish" href={`/write?edit=${encodeURIComponent(slug)}&publish=1`}>
+    Publish →
+  </a>
+</aside>
+
+<style>
+  .draft-notice {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-3);
+    flex-wrap: wrap;
+    margin-bottom: var(--sp-5);
+    padding: var(--sp-3) var(--sp-4);
+    border: 1px dashed var(--line-2);
+    border-radius: var(--radius-sm);
+    background: var(--paper-2);
+  }
+
+  .draft-notice-tag {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 2px var(--sp-2);
+    border-radius: 999px;
+    border: 1px solid var(--line-2);
+    color: var(--ink-3);
+  }
+
+  .draft-notice p {
+    margin: 0;
+    flex: 1;
+    font-size: 14px;
+    color: var(--ink-2);
+  }
+
+  .draft-notice-publish {
+    font-family: var(--font-sans);
+    font-size: 14px;
+    font-weight: 600;
+    padding: var(--sp-2) var(--sp-4);
+    border: 1px solid var(--line-2);
+    border-radius: var(--radius-sm);
+    background: var(--elevated);
+    color: var(--ink);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .draft-notice-publish:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+</style>
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index 9df0932..51918a7 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -8,6 +8,7 @@ import { mdxComponents } from '@/components/MDXComponents.tsx';
 import ArticleActions from '@/components/ArticleActions.tsx';
 import Comments from '@/components/Comments.tsx';
 import Avatar from '@/components/Avatar.astro';
+import DraftNotice from '@/components/DraftNotice.astro';
 import { formatDate, sortPostsByDate, tagSlug } from '@/lib/data';
 import { topicName } from '@/lib/topics';
 import { resolvePostAuthors } from '@/lib/posts';
@@ -15,7 +16,9 @@ import { SITE } from '@/lib/site';
 import katexCssUrl from 'katex/dist/katex.min.css?url';
 
 export async function getStaticPaths() {
-  const posts = await getCollection('posts', ({ data }) => !data.draft);
+  // Drafts build and answer at their real URL — they are held back from the
+  // listings, the sitemap and search, not from the site.
+  const posts = await getCollection('posts');
   return posts.map((post) => ({
     params: { slug: post.id },
     props: { post },
@@ -128,17 +131,20 @@ const breadcrumbJsonLd = {
   section={topicLabel}
   author={authorNames}
   tags={post.data.tags}
+  noindex={post.data.draft}
   jsonLd={[articleJsonLd, breadcrumbJsonLd]}
 >
   {hasMath && <link slot="head" rel="stylesheet" href={katexCssUrl} />}
   <article
     class="article-shell"
-    data-pagefind-body
+    data-pagefind-body={post.data.draft ? undefined : true}
     data-pagefind-meta={`${topicLabel ? `topic:${topicLabel}, ` : ''}date:${formatDate(dateISO)}, read:${post.data.readMin} min, authors:${authorNames}`}
   >
     <div class="article-head">
       <a href="/blog" class="article-back">← Back to archive</a>
 
+      {post.data.draft && <DraftNotice slug={post.id} />}
+
       <div class="article-byline" style="margin-bottom: 4px;">
         {post.data.topicId && <span class="chip chip--sm">{topicLabel}</span>}
         {
diff --git a/src/pages/drafts.astro b/src/pages/drafts.astro
new file mode 100644
index 0000000..47db3b0
--- /dev/null
+++ b/src/pages/drafts.astro
@@ -0,0 +1,115 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import { formatDate, sortPostsByDate } from '@/lib/data';
+
+const drafts = (await getCollection('posts', ({ data }) => data.draft)).sort(sortPostsByDate);
+---
+
+<BaseLayout
+  title="Drafts"
+  description="Posts that are written but not publicly listed yet."
+  noindex={true}
+>
+  <div class="container">
+    <div class="page-head">
+      <div class="eyebrow page-eyebrow">Not listed</div>
+      <h1 class="page-h1">Drafts.</h1>
+      <p class="page-lede">They are not publicly listed yet, please edit to make it public.</p>
+    </div>
+
+    {
+      drafts.length === 0 ? (
+        <p class="draft-empty">Nothing in drafts.</p>
+      ) : (
+        <div class="draft-list">
+          {drafts.map((post) => (
+            <div class="draft-row">
+              <a href={`/blog/${post.id}`} class="draft-row-main">
+                <h3 class="draft-row-title">{post.data.title}</h3>
+                {post.data.summary && <p class="draft-row-desc">{post.data.summary}</p>}
+                <span class="draft-row-date">{formatDate(post.data.date.toISOString())}</span>
+              </a>
+              <a
+                class="draft-row-publish"
+                href={`/write?edit=${encodeURIComponent(post.id)}&publish=1`}
+              >
+                Publish →
+              </a>
+            </div>
+          ))}
+        </div>
+      )
+    }
+  </div>
+</BaseLayout>
+
+<style>
+  .draft-empty {
+    margin-top: var(--sp-5);
+    color: var(--ink-3);
+  }
+
+  .draft-list {
+    margin-top: var(--sp-5);
+    border-top: 1px solid var(--line);
+  }
+
+  .draft-row {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-4);
+    padding: var(--sp-4) 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .draft-row-main {
+    flex: 1;
+    min-width: 0;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .draft-row-title {
+    margin: 0;
+    font-family: var(--font-display);
+    font-size: 20px;
+    line-height: 1.3;
+  }
+
+  .draft-row-main:hover .draft-row-title {
+    color: var(--accent);
+  }
+
+  .draft-row-desc {
+    margin: var(--sp-1) 0 0;
+    font-size: 14px;
+    color: var(--ink-2);
+  }
+
+  .draft-row-date {
+    display: block;
+    margin-top: var(--sp-2);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--ink-3);
+  }
+
+  .draft-row-publish {
+    font-family: var(--font-sans);
+    font-size: 14px;
+    font-weight: 600;
+    padding: var(--sp-2) var(--sp-4);
+    border: 1px solid var(--line-2);
+    border-radius: var(--radius-sm);
+    background: var(--elevated);
+    color: var(--ink);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .draft-row-publish:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+</style>
diff --git a/src/write/WritePortal.tsx b/src/write/WritePortal.tsx
index 90e5ba0..6b8f565 100644
--- a/src/write/WritePortal.tsx
+++ b/src/write/WritePortal.tsx
@@ -30,9 +30,9 @@ import { serializePost, type PostMeta, type SBlock, type TableStyle } from './se
 import { slugify, suggest, validate } from './serialize/validate';
 import { convertMdx } from './convert/mdxToSource.mjs';
 import { buildZip } from './serialize/toZip';
-import { buildSource, parseSource, type ParsedSource } from './serialize/source';
+import { buildSource, parseSource } from './serialize/source';
 import { authorPath, buildAuthorJson } from './serialize/author';
-import { fetchExisting } from './serialize/fetchExisting';
+import { fetchExisting, type LoadedSource } from './serialize/fetchExisting';
 import {
   assemblePostFiles,
   createPullRequest,
@@ -77,6 +77,7 @@ function emptyMeta(): PostMeta {
     slug: '',
     coverFileName: '',
     ogCard: false,
+    draft: false,
     proposedTopic: '',
     newAuthor: null,
   };
@@ -98,6 +99,9 @@ export default function WritePortal({ authors, topics, repoUrl, contactEmail }:
   const [openError, setOpenError] = useState<string | null>(null);
   const [uploadError, setUploadError] = useState<string | null>(null);
   const [convertible, setConvertible] = useState<string | null>(null);
+  const [loadNotice, setLoadNotice] = useState<string | null>(null);
+  const [wantsPublish, setWantsPublish] = useState(false);
+  const actionsRef = useRef<HTMLDivElement>(null);
   const uploadInputRef = useRef<HTMLInputElement>(null);
   const [openUrl, setOpenUrl] = useState('');
   const [openDialog, setOpenDialog] = useState(false);
@@ -246,7 +250,7 @@ export default function WritePortal({ authors, topics, repoUrl, contactEmail }:
     setRestore(null);
   };
 
-  const applySource = async (loaded: ParsedSource) => {
+  const applySource = async (loaded: LoadedSource) => {
     clearAssets();
     await clearStoredAssets().catch(() => undefined);
     setRestore(null);
@@ -259,6 +263,7 @@ export default function WritePortal({ authors, topics, repoUrl, contactEmail }:
       authors: Array.isArray(loaded.meta.authors) ? loaded.meta.authors : [],
     });
     setTableVariants(loaded.tableVariants ?? {});
+    setLoadNotice(loaded.notice ?? null);
   };
 
   const openExisting = async () => {
@@ -307,6 +312,27 @@ export default function WritePortal({ authors, topics, repoUrl, contactEmail }:
     })();
   }, []);
 
+  // Arriving from a draft's Publish button: /write?edit=<slug>&publish=1 opens
+  // the post, unticks the draft box and scrolls to the actions, so publishing is
+  // one click from where the reader started.
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('publish') !== '1') return;
+    const url = new URL(window.location.href);
+    url.searchParams.delete('publish');
+    window.history.replaceState({}, '', url.pathname + url.search + url.hash);
+    setWantsPublish(true);
+  }, []);
+
+  // Runs once the deep-linked post has finished loading — applySource would
+  // otherwise overwrite the untick with the draft flag read from frontmatter.
+  useEffect(() => {
+    if (!wantsPublish || autoLoading || !loadedSlug) return;
+    setWantsPublish(false);
+    setMeta((m) => ({ ...m, draft: false }));
+    actionsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }, [wantsPublish, autoLoading, loadedSlug]);
+
   const uploadPostZip = async (file: File) => {
     setUploadError(null);
     setConvertible(null);
@@ -499,6 +525,14 @@ export default function WritePortal({ authors, topics, repoUrl, contactEmail }:
           Loading the post into the editor…
         </div>
       )}
+      {loadNotice && (
+        <div className="write-load-notice" role="status">
+          <span>{loadNotice}</span>
+          <button type="button" onClick={() => setLoadNotice(null)} aria-label="Dismiss">
+            ✕
+          </button>
+        </div>
+      )}
       <div className="write-topbar">
         <input
           ref={uploadInputRef}
@@ -741,10 +775,25 @@ export default function WritePortal({ authors, topics, repoUrl, contactEmail }:
         </div>
       )}
 
-      <div className="write-actions" style={previewOn ? { display: 'none' } : undefined}>
+      <div
+        className="write-actions"
+        ref={actionsRef}
+        style={previewOn ? { display: 'none' } : undefined}
+      >
         {storageOff && (
           <span className="write-note-inline">Autosave is off — your browser blocked storage.</span>
         )}
+        <label
+          className="write-draft-toggle"
+          title="Builds and stays at its real URL, but is left out of every listing, the sitemap and search."
+        >
+          <input
+            type="checkbox"
+            checked={!!meta.draft}
+            onChange={(e) => setMeta({ ...meta, draft: e.target.checked })}
+          />
+          Keep as draft
+        </label>
         <button type="button" className="write-ghost-btn" disabled={busy} onClick={download}>
           {busy ? 'Packaging…' : 'Download post'}
         </button>
diff --git a/src/write/convert/mdxToSource.mjs b/src/write/convert/mdxToSource.mjs
index c1d9fb0..61f8c63 100644
--- a/src/write/convert/mdxToSource.mjs
+++ b/src/write/convert/mdxToSource.mjs
@@ -4,19 +4,59 @@
 
 const D = { backgroundColor: 'default', textColor: 'default', textAlignment: 'left' };
 
+// Every delimiter carries `(?<!\\)`: markdown lets a backslash make any of them
+// literal, and without the guard `\$4.00 … \$8.00` reads as inline math because
+// the escaping backslash is itself the non-space character the closing $ needs.
 const INLINE_PATTERNS = [
   // Inline math stays verbatim — no smart quotes, no bold/italic parsing inside.
-  { re: /\$(\S(?:[^$\n]*\S)?)\$/g, kind: 'math' },
-  { re: /\*\*`([^`]+)`\*\*/g, kind: 'code' },
-  { re: /`([^`]+)`/g, kind: 'code' },
-  { re: /(?<!!)\[([^\]]+)\]\(([^)\s]+)\)/g, kind: 'link' },
-  { re: /\*\*([^*]+(?:\*(?!\*)[^*]*)*)\*\*/g, kind: 'style', key: 'bold' },
-  { re: /__([^_]+)__/g, kind: 'style', key: 'bold' },
-  { re: /~~([^~]+)~~/g, kind: 'style', key: 'strike' },
-  { re: /\*([^*\n]+)\*/g, kind: 'style', key: 'italic' },
-  { re: /(?<![\w`])_([^_\n]+)_(?![\w`])/g, kind: 'style', key: 'italic' },
+  { re: /(?<!\\)\$(\S(?:[^$\n]*\S)?)(?<!\\)\$/g, kind: 'math' },
+  { re: /(?<!\\)\*\*`([^`]+)`\*\*/g, kind: 'code' },
+  { re: /(?<!\\)`([^`]+)`/g, kind: 'code' },
+  { re: /(?<![!\\])\[([^\]]+)\]\(([^)\s]+)\)/g, kind: 'link' },
+  { re: /(?<!\\)\*\*([^*]+(?:\*(?!\*)[^*]*)*)\*\*/g, kind: 'style', key: 'bold' },
+  { re: /(?<!\\)__([^_]+)__/g, kind: 'style', key: 'bold' },
+  { re: /(?<!\\)~~([^~]+)~~/g, kind: 'style', key: 'strike' },
+  // Inline HTML the serializer emits or a writer hand-types. Unmatched, it
+  // becomes literal text whose `<` the serializer then escapes — so an
+  // unhandled tag is destroyed on republish, not ignored.
+  { re: /(?<!\\)<u>([\s\S]*?)<\/u>/g, kind: 'style', key: 'underline' },
+  { re: /(?<!\\)<(?:strong|b)>([\s\S]*?)<\/(?:strong|b)>/g, kind: 'style', key: 'bold' },
+  { re: /(?<!\\)<(?:em|i)>([\s\S]*?)<\/(?:em|i)>/g, kind: 'style', key: 'italic' },
+  { re: /(?<!\\)<(?:s|del)>([\s\S]*?)<\/(?:s|del)>/g, kind: 'style', key: 'strike' },
+  { re: /(?<!\\)<code>([\s\S]*?)<\/code>/g, kind: 'code' },
+  // Background outermost, matching the serializer. The combined form is first so
+  // it wins the tie against the background-only pattern at the same position.
+  {
+    re: /(?<!\\)<span style="background-color: ([^"]+)"><span style="color: ([^"]+)">((?:(?!<\/span>)[\s\S])*)<\/span><\/span>/g,
+    kind: 'colorbg',
+  },
+  {
+    re: /(?<!\\)<span style="background-color: ([^"]+)">((?:(?!<\/span>)[\s\S])*)<\/span>/g,
+    kind: 'bg',
+  },
+  {
+    re: /(?<!\\)<span style="color: ([^"]+)">((?:(?!<\/span>)[\s\S])*)<\/span>/g,
+    kind: 'color',
+  },
+  { re: /(?<!\\)\*([^*\n]+)\*/g, kind: 'style', key: 'italic' },
+  { re: /(?<![\w`\\])_([^_\n]+)_(?![\w`])/g, kind: 'style', key: 'italic' },
 ];
 
+// BlockNote stores colours by name, so pull the name back out of
+// `var(--tc-red, #e03e3e)`. An unrecognised colour has no home and is dropped.
+const paletteName = (value, prefix) =>
+  value.match(new RegExp(`var\\(--${prefix}-([a-z]+)`))?.[1] ?? null;
+
+// Reverse of the serializer's escapeProse. Runs on plain-text runs only, after
+// markup has matched, so an escaped delimiter is never read as markup on the way
+// in nor shown with its backslash on the way out.
+function unescapeProse(s) {
+  return s
+    .replace(/^(\s{0,3})\\([>#+-])/, '$1$2')
+    .replace(/^(\s{0,3})(\d+)\\([.)])/, '$1$2$3')
+    .replace(/\\([\\<{*_`[~$])/g, '$1');
+}
+
 function smartQuotes(s) {
   return s
     .replace(/(\w)'(\w)/g, '$1’$2')
@@ -27,6 +67,8 @@ function smartQuotes(s) {
 }
 
 function inline(text, inherited = {}) {
+  // Shift+Enter is published as <br />; BlockNote stores it as a literal newline.
+  text = text.replace(/<br\s*\/?>/g, '\n');
   const runs = [];
   let pos = 0;
   while (pos < text.length) {
@@ -37,13 +79,17 @@ function inline(text, inherited = {}) {
       if (m && (!best || m.index < best.m.index)) best = { p, m };
     }
     if (!best) {
-      runs.push({ type: 'text', text: smartQuotes(text.slice(pos)), styles: { ...inherited } });
+      runs.push({
+        type: 'text',
+        text: smartQuotes(unescapeProse(text.slice(pos))),
+        styles: { ...inherited },
+      });
       break;
     }
     if (best.m.index > pos)
       runs.push({
         type: 'text',
-        text: smartQuotes(text.slice(pos, best.m.index)),
+        text: smartQuotes(unescapeProse(text.slice(pos, best.m.index))),
         styles: { ...inherited },
       });
     const { p, m } = best;
@@ -57,6 +103,22 @@ function inline(text, inherited = {}) {
         href: m[2],
         content: inline(m[1], inherited).filter((r) => r.type === 'text'),
       });
+    } else if (p.kind === 'colorbg') {
+      const bg = paletteName(m[1], 'mark');
+      const fg = paletteName(m[2], 'tc');
+      runs.push(
+        ...inline(m[3], {
+          ...inherited,
+          ...(bg ? { backgroundColor: bg } : {}),
+          ...(fg ? { textColor: fg } : {}),
+        }),
+      );
+    } else if (p.kind === 'bg') {
+      const bg = paletteName(m[1], 'mark');
+      runs.push(...inline(m[2], { ...inherited, ...(bg ? { backgroundColor: bg } : {}) }));
+    } else if (p.kind === 'color') {
+      const fg = paletteName(m[1], 'tc');
+      runs.push(...inline(m[2], { ...inherited, ...(fg ? { textColor: fg } : {}) }));
     } else {
       runs.push(...inline(m[1], { ...inherited, [p.key]: true }));
     }
@@ -88,7 +150,7 @@ function unwrapJsxStyle(svg) {
   );
 }
 
-function figureSegment(attrs, inner) {
+function figureSegment(attrs, inner, imports = new Map()) {
   const caption = frameAttr(attrs, 'caption').replace(/\s+/g, ' ').trim();
   const width = Number(attrs.match(/width=\{(\d+)\}/)?.[1] ?? '') || '';
   // A leading {/* mermaid ... */} comment carries the editable diagram source.
@@ -115,6 +177,18 @@ function figureSegment(attrs, inner) {
       width: width || 360,
     };
   }
+  // A local image is written `<Image src={ident} />`, where ident is an import
+  // binding — the import lines are the only route back to a filename.
+  const local = inner.match(/^<Image\s+src=\{(\w+)\}([^>]*)\/>$/);
+  if (local && imports.has(local[1])) {
+    return {
+      kind: 'image',
+      alt: local[2].match(/alt="([^"]*)"/)?.[1] ?? '',
+      src: `./${imports.get(local[1])}`,
+      caption,
+      width: width || 360,
+    };
+  }
   return { kind: 'md', text: inner };
 }
 
@@ -156,8 +230,28 @@ export function convertMdx(src, { slug = 'post-slug', componentSource } = {}) {
     const m = fmText.match(new RegExp(`^${key}: (.*)$`, 'm'));
     return m ? m[1].replace(/^(["'])(.*)\1$/, '$2') : '';
   };
+  // The editor quotes its output, but a hand-written entry is as likely to use
+  // YAML's bare form, which JSON.parse rejects.
+  const parseFlowList = (raw) =>
+    raw
+      .trim()
+      .replace(/^\[|\]$/g, '')
+      .split(',')
+      .map((s) =>
+        s
+          .trim()
+          .replace(/^(['"])([\s\S]*)\1$/, '$2')
+          .trim(),
+      )
+      .filter(Boolean);
+
   const tagsMatch = fmText.match(/^tags: (\[.*\])$/m);
-  const tags = tagsMatch ? JSON.parse(tagsMatch[1].replace(/'/g, '"')) : [];
+  const tags = tagsMatch ? parseFlowList(tagsMatch[1]) : [];
+
+  // Frontmatter is the only record of draft state, so reading it here is what
+  // lets the checkbox reflect a hand-written entry and stops a re-publish from
+  // silently publishing it.
+  const draft = /^draft:[ \t]*true[ \t]*$/m.test(fmText);
 
   let n = 0;
   const id = (p) => `${p}-${++n}`;
@@ -176,7 +270,13 @@ export function convertMdx(src, { slug = 'post-slug', componentSource } = {}) {
   });
 
   const pattern =
-    /(<Figure([^>]*)>\s*([\s\S]*?)\s*<\/Figure>)|(<Note>\s*([\s\S]*?)\s*<\/Note>)|(```(\w*)\n([\s\S]*?)```)|(<Interactive\b([^>]*)>\s*<([A-Za-z]\w*)\s+client:visible\s*\/>\s*<\/Interactive>)|(<([A-Z]\w*)\s+client:visible\s*\/>)|(<Table\b([^>]*)>\s*([\s\S]*?)\s*<\/Table>)/g;
+    /(<Figure([^>]*?)\/>)|(<Figure([^>]*)>\s*([\s\S]*?)\s*<\/Figure>)|(<Note>\s*([\s\S]*?)\s*<\/Note>)|(```(\w*)\n([\s\S]*?)```)|(<Interactive\b([^>]*)>\s*<([A-Za-z]\w*)\s+client:visible\s*\/>\s*<\/Interactive>)|(<([A-Z]\w*)\s+client:visible\s*\/>)|(<Table\b([^>]*)>\s*([\s\S]*?)\s*<\/Table>)|(<details>\s*<summary>([\s\S]*?)<\/summary>\s*([\s\S]*?)\s*<\/details>)|(<Gallery([^>]*)>\s*([\s\S]*?)\s*<\/Gallery>)|(<Video\b([^>]*?)\/>)/g;
+
+  // ident -> filename, from the entry's own import lines. `<Image src={ident} />`
+  // names its file only through the binding.
+  const imports = new Map();
+  for (const im of body.matchAll(/^import\s+(\w+)\s+from\s+['"]\.\/([^'"]+)['"];?\s*$/gm))
+    imports.set(im[1], im[2]);
 
   let cursor = 0;
   const segments = [];
@@ -184,30 +284,70 @@ export function convertMdx(src, { slug = 'post-slug', componentSource } = {}) {
   while ((m = pattern.exec(body))) {
     if (m.index > cursor) segments.push({ kind: 'md', text: body.slice(cursor, m.index) });
     if (m[1]) {
-      segments.push(figureSegment(m[2] ?? '', m[3].trim()));
-    } else if (m[4]) segments.push({ kind: 'note', text: m[5].replace(/\s+/g, ' ').trim() });
-    else if (m[6]) {
-      const code = m[8].replace(/\n$/, '');
-      if ((m[7] || '') === 'mermaid') segments.push({ kind: 'mermaid', source: code });
-      else segments.push({ kind: 'code', lang: m[7] || 'text', code });
-    } else if (m[9]) segments.push({ kind: 'component', name: m[11], frame: frameProps(m[10]) });
-    else if (m[12])
+      // Figure.astro takes a src prop instead of children, and someone will.
+      const src = frameAttr(m[2], 'src');
+      segments.push(
+        src
+          ? {
+              kind: 'image',
+              src,
+              alt: frameAttr(m[2], 'alt'),
+              caption: frameAttr(m[2], 'caption'),
+              width: Number(m[2].match(/width=\{(\d+)\}/)?.[1] ?? '') || 360,
+            }
+          : { kind: 'md', text: m[1] },
+      );
+    } else if (m[3]) {
+      segments.push(figureSegment(m[4] ?? '', m[5].trim(), imports));
+    } else if (m[6]) segments.push({ kind: 'note', text: m[7].replace(/\s+/g, ' ').trim() });
+    else if (m[8]) {
+      const code = m[10].replace(/\n$/, '');
+      if ((m[9] || '') === 'mermaid') segments.push({ kind: 'mermaid', source: code });
+      else segments.push({ kind: 'code', lang: m[9] || 'text', code });
+    } else if (m[11]) segments.push({ kind: 'component', name: m[13], frame: frameProps(m[12]) });
+    else if (m[14])
       segments.push({
         kind: 'component',
-        name: m[13],
+        name: m[15],
         frame: { frameTitle: '', frameCaption: '', frameSize: 'normal', frameExpand: false },
       });
-    else if (m[14]) {
-      const caption = frameAttr(m[15], 'caption');
+    else if (m[16]) {
+      const caption = frameAttr(m[17], 'caption');
       segments.push({
         kind: 'table',
-        text: m[16],
+        text: m[18],
         style: {
-          border: m[15].match(/variant="(\w+)"/)?.[1] ?? 'rule',
-          zebra: /(^|\s)zebra(\s|$|=)/.test(m[15]),
+          border: m[17].match(/variant="(\w+)"/)?.[1] ?? 'rule',
+          zebra: /(^|\s)zebra(\s|$|=)/.test(m[17]),
           ...(caption ? { caption } : {}),
         },
       });
+    } else if (m[19]) {
+      segments.push({ kind: 'details', summary: m[20].trim(), body: m[21] });
+    } else if (m[22]) {
+      // A gallery entry is either a stored asset's filename, written
+      // `<Image src={ident} />`, or an absolute URL, written as a plain <img>.
+      const files = [...m[24].matchAll(/<(Image|img)\s+([^>]*?)\/>/g)].map((g) => {
+        const ident = g[2].match(/src=\{(\w+)\}/)?.[1];
+        return {
+          file: ident ? imports.get(ident) : g[2].match(/src="([^"]+)"/)?.[1],
+          alt: g[2].match(/alt="([^"]*)"/)?.[1] ?? '',
+        };
+      });
+      if (files.length > 0 && files.every((f) => f.file)) {
+        segments.push({
+          kind: 'gallery',
+          fileNames: files.map((f) => f.file),
+          alts: files.map((f) => f.alt),
+          min: Number(m[23].match(/min=\{(\d+)\}/)?.[1] ?? '') || '',
+        });
+      } else {
+        segments.push({ kind: 'md', text: m[22] });
+      }
+    } else if (m[25]) {
+      const id = m[26].match(/id="([^"]*)"/)?.[1] ?? '';
+      if (id) segments.push({ kind: 'video', videoId: id, caption: frameAttr(m[26], 'caption') });
+      else segments.push({ kind: 'md', text: m[25] });
     }
     cursor = m.index + m[0].length;
   }
@@ -329,7 +469,11 @@ export function convertMdx(src, { slug = 'post-slug', componentSource } = {}) {
         para.push(lines[i]);
         i++;
       }
-      push('paragraph', { ...D }, inline(para.join(' ')));
+      // The serializer wraps a paragraph in <p> when it opens with a tag, so
+      // MDX keeps it a paragraph. Unwrap before reading the inline marks.
+      const joined = para.join(' ').trim();
+      const unwrapped = /^<p>[\s\S]*<\/p>$/.test(joined) ? joined.slice(3, -4) : joined;
+      push('paragraph', { ...D }, inline(unwrapped));
     }
   }
 
@@ -366,6 +510,19 @@ export function convertMdx(src, { slug = 'post-slug', componentSource } = {}) {
         source: getComponentSource(seg.name),
         ...seg.frame,
       });
+    else if (seg.kind === 'gallery')
+      push('gallery', {
+        fileNames: JSON.stringify(seg.fileNames),
+        alts: JSON.stringify(seg.alts),
+        min: seg.min,
+      });
+    else if (seg.kind === 'video') push('video', { videoId: seg.videoId, caption: seg.caption });
+    else if (seg.kind === 'details') {
+      const before = blocks.length;
+      emitMd(seg.body);
+      const children = blocks.splice(before);
+      push('toggleListItem', { ...D }, inline(seg.summary), children);
+    }
   }
 
   const doc = {
@@ -376,7 +533,7 @@ export function convertMdx(src, { slug = 'post-slug', componentSource } = {}) {
       summary: fmVal('summary'),
       authors: (() => {
         const inlineList = fmText.match(/^authors: (\[.*\])$/m);
-        if (inlineList) return JSON.parse(inlineList[1].replace(/'/g, '"'));
+        if (inlineList) return parseFlowList(inlineList[1]);
         const list = [...fmText.matchAll(/^ {2}- (.+)$/gm)]
           .map((x) => x[1])
           .filter((a) => !/^\d{4}-/.test(a));
@@ -387,8 +544,11 @@ export function convertMdx(src, { slug = 'post-slug', componentSource } = {}) {
       topicName: fmVal('topic'),
       tags,
       slug,
-      coverFileName: '',
-      ogCard: false,
+      // Frontmatter the editor can set but the converter used to ignore, so a
+      // hand-edit to either was dropped when the entry was reopened.
+      coverFileName: (fmVal('cover').match(/^\.\/(.+)$/) ?? [])[1] ?? '',
+      ogCard: /^ogCard:[ \t]*true[ \t]*$/m.test(fmText),
+      draft,
       proposedTopic: '',
       newAuthor: null,
       date: fmVal('date'),
@@ -397,6 +557,27 @@ export function convertMdx(src, { slug = 'post-slug', componentSource } = {}) {
     tableVariants,
   };
 
+  // A component with no editor block survives conversion as literal text, and
+  // the serializer then escapes its `<` — so re-publishing turns it into visible
+  // markup. The editor cannot represent it, but it can refuse to do so quietly.
+  const stray = new Set();
+  const scan = (list) => {
+    for (const b of list) {
+      if (Array.isArray(b.content)) {
+        for (const run of b.content) {
+          for (const m of String(run?.text ?? '').matchAll(/<([A-Z]\w*)[\s/>]/g)) stray.add(m[1]);
+        }
+      }
+      if (b.children?.length) scan(b.children);
+    }
+  };
+  scan(blocks);
+  for (const name of stray) {
+    warnings.push(
+      `<${name}> has no editor block — it will be turned into plain text if you publish from here. Edit this entry's index.mdx by hand instead.`,
+    );
+  }
+
   const ids = blocks.map((b) => b.id);
   if (new Set(ids).size !== ids.length) throw new Error('duplicate ids');
   for (const b of blocks) if (!ALLOWED_TYPES.has(b.type)) throw new Error('bad type ' + b.type);
diff --git a/src/write/editor/editor-theme.css b/src/write/editor/editor-theme.css
index 829c274..51bf1b3 100644
--- a/src/write/editor/editor-theme.css
+++ b/src/write/editor/editor-theme.css
@@ -1500,3 +1500,52 @@
   color: var(--accent);
   background: color-mix(in srgb, var(--accent) 8%, transparent);
 }
+
+.write-draft-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-right: auto;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  color: var(--ink-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.write-draft-toggle input {
+  width: 15px;
+  height: 15px;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
+.write-load-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding: 12px 16px;
+  border: 1px solid var(--line-2);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-sm);
+  background: var(--accent-soft);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--ink-body);
+}
+
+.write-load-notice button {
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  font-size: 14px;
+  line-height: 1;
+  color: var(--ink-3);
+  cursor: pointer;
+}
+
+.write-load-notice button:hover {
+  color: var(--ink);
+}
diff --git a/src/write/serialize/fetchExisting.ts b/src/write/serialize/fetchExisting.ts
index 42b0c95..487cd97 100644
--- a/src/write/serialize/fetchExisting.ts
+++ b/src/write/serialize/fetchExisting.ts
@@ -1,10 +1,23 @@
 import { restoreAsset } from '../storage/assets';
 import { parseSource, SOURCE_FILENAME, type ParsedSource } from './source';
 import { convertMdx } from '../convert/mdxToSource.mjs';
-import type { SBlock } from './toMdx';
+import { serializePost, type PostMeta, type SBlock } from './toMdx';
+
+// A loaded post, plus anything the writer should know about how it loaded.
+export type LoadedSource = ParsedSource & { notice?: string };
 
 export const NOT_FOUND_MESSAGE = 'No editable post found at that link. Please try manual update.';
 
+export const DIVERGED_MESSAGE =
+  'This post\u2019s index.mdx was edited outside the editor, so it was loaded from the ' +
+  'markdown rather than the saved editor data. Check custom components and table ' +
+  'styling before publishing.';
+
+export const UNCONVERTIBLE_MESSAGE =
+  'This post\u2019s index.mdx was edited outside the editor but could not be read, so the ' +
+  'older editor data was loaded instead. Publishing will overwrite those edits \u2014 copy ' +
+  'anything you need out of index.mdx first.';
+
 export const BAD_SOURCE_MESSAGE =
   'The editor data for that post is unreadable. Edit its index.mdx by hand instead.';
 
@@ -34,7 +47,11 @@ function imageNames(blocks: SBlock[], cover: string): string[] {
       if (b.type === 'figure' && b.props.fileName) out.push(String(b.props.fileName));
       if (b.type === 'gallery') {
         try {
-          out.push(...(JSON.parse(String(b.props.fileNames || '[]')) as string[]));
+          out.push(
+            ...(JSON.parse(String(b.props.fileNames || '[]')) as string[]).filter(
+              (n) => !/^https?:/.test(n),
+            ),
+          );
         } catch {
           // malformed gallery — skip it
         }
@@ -47,18 +64,45 @@ function imageNames(blocks: SBlock[], cover: string): string[] {
   return [...new Set(out.filter(Boolean))];
 }
 
+// A post's body, normalised for comparison. Frontmatter is dropped
+// deliberately: the serializer stamps `updated:` with today's date, so a
+// regenerated file never matches a stored one there. What matters is the content.
+function bodyOf(mdx: string): string {
+  return mdx
+    .replace(/^---\r?\n[\s\S]*?\r?\n---\r?\n?/, '')
+    .replace(/\r\n/g, '\n')
+    .trim();
+}
+
+// Frontmatter fields the MDX converter can read, and so is authoritative on.
+function mergeMeta(sidecar: PostMeta, fromMdx: PostMeta): PostMeta {
+  return {
+    ...sidecar,
+    title: fromMdx.title || sidecar.title,
+    summary: fromMdx.summary || sidecar.summary,
+    tags: fromMdx.tags.length ? fromMdx.tags : sidecar.tags,
+    draft: fromMdx.draft,
+    date: fromMdx.date || sidecar.date,
+    coverFileName: fromMdx.coverFileName || sidecar.coverFileName,
+  };
+}
+
 // Fallback for posts committed without editor data: fetch the index.mdx,
-// convert it, pull its component files and repo-hosted images.
-async function fetchFromMdx(base: string, slug: string): Promise<ParsedSource> {
-  let res: Response;
-  try {
-    res = await fetch(base + 'index.mdx', { cache: 'no-store' });
-  } catch {
-    throw new Error(NETWORK_MESSAGE);
+// convert it, pull its component files and repo-hosted images. `known` skips the
+// fetch when the caller already holds the file.
+async function fetchFromMdx(base: string, slug: string, known?: string): Promise<LoadedSource> {
+  let text = known;
+  if (text === undefined) {
+    let res: Response;
+    try {
+      res = await fetch(base + 'index.mdx', { cache: 'no-store' });
+    } catch {
+      throw new Error(NETWORK_MESSAGE);
+    }
+    if (res.status === 404) throw new Error(NOT_FOUND_MESSAGE);
+    if (!res.ok) throw new Error(NETWORK_MESSAGE);
+    text = await res.text();
   }
-  if (res.status === 404) throw new Error(NOT_FOUND_MESSAGE);
-  if (!res.ok) throw new Error(NETWORK_MESSAGE);
-  const text = await res.text();
 
   try {
     const names = new Set<string>();
@@ -80,11 +124,53 @@ async function fetchFromMdx(base: string, slug: string): Promise<ParsedSource> {
         }
       }),
     );
-    const { doc } = convertMdx(text, {
+    const { doc, warnings } = convertMdx(text, {
       slug,
       componentSource: (name) => sources.get(name) ?? '',
     });
 
+    // The cover lives in the post folder like any other asset, and the editor
+    // shows it from local storage — without this it opens blank.
+    if (doc.meta.coverFileName) {
+      try {
+        const r = await fetch(base + encodeURIComponent(doc.meta.coverFileName), {
+          cache: 'no-store',
+        });
+        if (r.ok) {
+          const blob = await r.blob();
+          const name = doc.meta.coverFileName;
+          restoreAsset(name, new File([blob], name, { type: blob.type }));
+        }
+      } catch {
+        // a missing cover shouldn't block opening the post
+      }
+    }
+
+    const galleryNames = doc.blocks
+      .filter((b) => b.type === 'gallery')
+      .flatMap((b) => {
+        try {
+          // Remote entries are already fetchable by the browser.
+          return (JSON.parse(String(b.props.fileNames || '[]')) as string[]).filter(
+            (n) => !/^https?:/.test(n),
+          );
+        } catch {
+          return [];
+        }
+      });
+    await Promise.all(
+      galleryNames.map(async (name) => {
+        try {
+          const r = await fetch(base + encodeURIComponent(name), { cache: 'no-store' });
+          if (!r.ok) return;
+          const blob = await r.blob();
+          restoreAsset(name, new File([blob], name, { type: blob.type }));
+        } catch {
+          // a single missing image shouldn't block opening the post
+        }
+      }),
+    );
+
     const local = doc.blocks.filter(
       (b) => b.type === 'figure' && b.props.src && !/^(https?:|data:)/.test(String(b.props.src)),
     );
@@ -104,7 +190,9 @@ async function fetchFromMdx(base: string, slug: string): Promise<ParsedSource> {
         }
       }),
     );
-    return doc;
+    // Anything the converter could not represent is the writer's problem to know
+    // about before they hit publish, not after.
+    return warnings.length > 0 ? { ...doc, notice: warnings.join(' ') } : doc;
   } catch {
     throw new Error(BAD_SOURCE_MESSAGE);
   }
@@ -113,7 +201,7 @@ async function fetchFromMdx(base: string, slug: string): Promise<ParsedSource> {
 // Pulls a published post's editor data + images straight from GitHub (raw),
 // so a URL is all the writer needs to re-open it. Never throws for a missing
 // image — only for a missing/unreadable post.
-export async function fetchExisting(repoUrl: string, input: string): Promise<ParsedSource> {
+export async function fetchExisting(repoUrl: string, input: string): Promise<LoadedSource> {
   const slug = slugFromInput(input);
   const base = rawBase(repoUrl, slug);
 
@@ -129,6 +217,51 @@ export async function fetchExisting(repoUrl: string, input: string): Promise<Par
   const parsed = parseSource(await res.text());
   if (!parsed) throw new Error(BAD_SOURCE_MESSAGE);
 
+  // The sidecar is the editor's record, but index.mdx is what the site builds
+  // from — so wherever the two can disagree, the markdown wins.
+  //
+  // Publishing regenerates index.mdx wholesale from the editor's blocks, so a
+  // sidecar left stale by an edit made outside the editor would silently revert
+  // that edit on the next save. Re-serialising the sidecar and comparing bodies
+  // is what detects it.
+  try {
+    const mdx = await fetch(base + 'index.mdx', { cache: 'no-store' });
+    if (mdx.ok) {
+      const text = await mdx.text();
+      const regenerated = serializePost(parsed.meta, parsed.blocks, {
+        tableVariants: parsed.tableVariants,
+        today: new Date(),
+      }).mdx;
+
+      if (bodyOf(text) !== bodyOf(regenerated)) {
+        try {
+          // Converting is lossy for custom component source and table styling, so
+          // the sidecar still supplies the fields the converter never reads — and
+          // the writer is told.
+          const fresh = await fetchFromMdx(base, slug, text);
+          return {
+            ...fresh,
+            meta: mergeMeta(parsed.meta, fresh.meta),
+            notice: [DIVERGED_MESSAGE, fresh.notice].filter(Boolean).join(' '),
+          };
+        } catch {
+          // The markdown moved on but won't convert. Opening the sidecar beats
+          // refusing to open anything, but publishing would overwrite the edit.
+          return { ...parsed, notice: UNCONVERTIBLE_MESSAGE };
+        }
+      }
+
+      // Bodies agree, so only frontmatter can have been touched by hand.
+      parsed.meta.draft = /^draft:[ \t]*true[ \t]*$/m.test(text);
+      if (!parsed.meta.date) {
+        const m = text.match(/^date:\s*['"]?(\d{4}-\d{2}-\d{2})/m);
+        if (m) parsed.meta.date = m[1];
+      }
+    }
+  } catch {
+    // An unreachable index.mdx just leaves the sidecar's own values in place.
+  }
+
   await Promise.all(
     imageNames(parsed.blocks, parsed.meta.coverFileName).map(async (name) => {
       try {
diff --git a/src/write/serialize/toMdx.test.ts b/src/write/serialize/toMdx.test.ts
index f4b3f54..05bba06 100644
--- a/src/write/serialize/toMdx.test.ts
+++ b/src/write/serialize/toMdx.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import {
   escapeText,
+  INLINE_MATH_RE,
   serializeInline,
   serializePost,
   type InlineRun,
@@ -69,9 +70,16 @@ describe('escapeText', () => {
     expect(escapeText('an *update* $\\Delta W$ to $W$')).toBe('an \\*update\\* $\\Delta W$ to $W$');
   });
 
-  it('does not treat spaced dollar amounts as math', () => {
-    expect(escapeText('$5 and $10')).toBe('$5 and $10');
-    expect(escapeText('costs $5, saves _time_')).toBe('costs $5, saves \\_time\\_');
+  it('escapes dollar amounts so they cannot pair into a math span', () => {
+    expect(escapeText('$5 and $10')).toBe('\\$5 and \\$10');
+    expect(escapeText('costs $5, saves _time_')).toBe('costs \\$5, saves \\_time\\_');
+  });
+
+  it('leaves escaped dollar amounts alone rather than reading them as math', () => {
+    expect(escapeText('a \\$4.00 click is worth \\$8.00')).toBe(
+      'a \\\\\\$4.00 click is worth \\\\\\$8.00',
+    );
+    expect(INLINE_MATH_RE.test('\\$4.00 and \\$8.00')).toBe(false);
   });
 });
 
diff --git a/src/write/serialize/toMdx.ts b/src/write/serialize/toMdx.ts
index dffbe25..12ecfea 100644
--- a/src/write/serialize/toMdx.ts
+++ b/src/write/serialize/toMdx.ts
@@ -40,6 +40,11 @@ export type PostMeta = {
   // Opt in to a generated share card (title over the cover) instead of the raw
   // cover. Only meaningful when a cover is set.
   ogCard?: boolean;
+  // Holds the post back from every listing, the sitemap and search. It still
+  // builds and still answers at its real URL — see `draft` in
+  // src/content.config.ts. Round-trips through frontmatter, so a post written by
+  // hand and one written here mean the same thing.
+  draft?: boolean;
   // Set only when editing an existing post; preserves its original publish date.
   date?: string;
   // A topic the writer proposes that isn't in the list yet — a maintainer (or, later,
@@ -73,14 +78,20 @@ type Ctx = {
   tableVariants: Record<string, TableStyle>;
 };
 
-// Matches remark-math's inline rule: no space just inside either delimiter.
-export const INLINE_MATH_RE = /\$(\S(?:[^$\n]*\S)?)\$/g;
+// Matches remark-math's inline rule: no space just inside either delimiter, and
+// neither delimiter escaped — a `\$` is a currency sign, not the start of math.
+export const INLINE_MATH_RE = /(?<!\\)\$(\S(?:[^$\n]*\S)?)(?<!\\)\$/g;
 
 function escapeProse(s: string): string {
-  return s
-    .replace(/[\\<{*_`[~]/g, (c) => `\\${c}`)
-    .replace(/^(\s{0,3})(\d+)([.)])/, '$1$2\\$3')
-    .replace(/^(\s{0,3})([>#+-])/, '$1\\$2');
+  return (
+    s
+      // `$` is escaped for the same reason as `*` and `_`: left bare, a pair of
+      // dollar amounts in one paragraph reads as an inline math span. Real math
+      // never reaches here — escapeText passes those spans through untouched.
+      .replace(/[\\<{*_`[~$]/g, (c) => `\\${c}`)
+      .replace(/^(\s{0,3})(\d+)([.)])/, '$1$2\\$3')
+      .replace(/^(\s{0,3})([>#+-])/, '$1\\$2')
+  );
 }
 
 // Inline math spans pass through verbatim — escaping \ or _ inside them would
@@ -138,11 +149,15 @@ function safeColor(
 }
 
 function wrapStyles(text: string, styles: Record<string, boolean | string>): string {
+  // Markdown only closes an emphasis run when a non-space sits just inside the
+  // marker, so whitespace at the edges of a styled run has to stay outside it.
+  const [, lead, core, trail] = /^(\s*)([\s\S]*?)(\s*)$/.exec(text) as RegExpExecArray;
+  if (!core) return escapeText(text).replace(/\n/g, '<br />');
   let out: string;
   if (styles.code) {
-    out = text.includes('`') ? `\`\` ${text} \`\`` : `\`${text}\``;
+    out = core.includes('`') ? `\`\` ${core} \`\`` : `\`${core}\``;
   } else {
-    out = escapeText(text);
+    out = escapeText(core);
     if (styles.bold) out = `**${out}**`;
     if (styles.italic) out = `_${out}_`;
     if (styles.strike) out = `~~${out}~~`;
@@ -156,7 +171,13 @@ function wrapStyles(text: string, styles: Record<string, boolean | string>): str
     const bg = safeColor(styles.backgroundColor, BG_COLORS, 'mark');
     if (bg) out = `<span style="background-color: ${bg}">${out}</span>`;
   }
-  return out;
+  // Shift+Enter lands as a literal newline inside the run. A bare newline is a
+  // markdown soft break and, inside a quote, ends the blockquote at the next
+  // blank line — so publish it as an explicit <br />, which mdxToSource reads
+  // back as a newline. Code spans keep raw newlines: a <br /> inside backticks
+  // would render as text.
+  const result = lead + out + trail;
+  return styles.code ? result : result.replace(/\n/g, '<br />');
 }
 
 export function serializeInline(content: unknown): string {
@@ -299,7 +320,15 @@ function serializeGallery(block: SBlock, ctx: Ctx): string {
   const alts = JSON.parse(String(block.props.alts || '[]')) as string[];
   const min = block.props.min;
   const minAttr = min !== '' && min != null ? ` min={${Number(min)}}` : '';
-  const images = fileNames.map((f, i) => `  ${imageLine(f, alts[i] ?? '', ctx)}`).join('\n');
+  // A gallery entry is either a stored asset's filename or an absolute URL.
+  // Only the former has a file to import.
+  const images = fileNames
+    .map((f, i) =>
+      /^https?:/.test(f)
+        ? `  <img ${attr('src', f)} ${attr('alt', alts[i] ?? '')} />`
+        : `  ${imageLine(f, alts[i] ?? '', ctx)}`,
+    )
+    .join('\n');
   return `<Gallery${minAttr}>\n${images}\n</Gallery>`;
 }
 
@@ -377,8 +406,13 @@ function detailsBlock(block: SBlock, ctx: Ctx): string {
 
 function serializeBlock(block: SBlock, ctx: Ctx, listNumber: number): string {
   switch (block.type) {
-    case 'paragraph':
-      return aligned(block, serializeInline(block.content));
+    case 'paragraph': {
+      const text = serializeInline(block.content);
+      // MDX reads a line opening with a tag as a JSX block, which is not wrapped
+      // in <p> and runs into the block after it. Wrapping keeps it a paragraph;
+      // mdxToSource unwraps it on the way back in.
+      return aligned(block, text.startsWith('<') ? `<p>${text}</p>` : text);
+    }
     case 'heading': {
       if (block.props.isToggleable) return detailsBlock(block, ctx);
       const level = Math.min(Number(block.props.level ?? 1), 3);
@@ -501,6 +535,9 @@ function buildFrontmatter(meta: PostMeta, blocks: SBlock[], opts: SerializeOptio
   if (meta.proposedTopic?.trim()) lines.push(`proposedTopic: ${yaml(meta.proposedTopic.trim())}`);
   if (meta.coverFileName) lines.push(`cover: ${yaml(`./${meta.coverFileName}`)}`);
   if (meta.coverFileName && meta.ogCard) lines.push('ogCard: true');
+  // Only written when set: the schema defaults it to false, so `draft: false` on
+  // every published post would be noise.
+  if (meta.draft) lines.push('draft: true');
   return `---\n${lines.join('\n')}\n---`;
 }