@acms-subir/core 0.1.0 → 0.3.0

package/src/components/editor/PostEditor.tsx

@@ -1,46 +1,70 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
 import { BubbleMenu, FloatingMenu } from '@tiptap/react/menus';
 import type { Range } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
+import Highlight from '@tiptap/extension-highlight';
 import { TableKit } from '@tiptap/extension-table';
 import { Placeholder, CharacterCount } from '@tiptap/extensions';
 import { actions } from 'astro:actions';
-import type { Page, Post, Status } from '../../lib/schema';
+import type { CalEvent, Page, Post, Status } from '../../lib/schema';
 import { ImageCard, EmbedCard, ButtonCard, Callout, HtmlCard, detectEmbed } from './extensions/cards';
 import { FileCard, GalleryCard, BookmarkCard } from './extensions/mediaCards';
 import { CodeBlock } from './extensions/codeBlock';
 import { PostListCard } from './extensions/postList';
+import { ToggleCard } from './extensions/toggle';
+import { TocCard } from './extensions/toc';
 import { CalendarCard } from './extensions/calendar';
+import { EventCard } from './extensions/events';
 import { InfoCards } from './extensions/infoCards';
-import { SlashMenu } from './extensions/slash';
+import { SlashMenu, type SlashSnippet } from './extensions/slash';
 import { TableTyping } from './extensions/tableTyping';
 import { ImagePicker, type PickedImage } from './ImagePicker';
-import { PreviewOverlay } from './PreviewOverlay';
+import { PreviewOverlay, type PreviewMeta } from './PreviewOverlay';
+import { LivePane } from './LivePane';
+import { MobileToolbar } from './MobileToolbar';
+import { FormatDock } from './FormatDock';
 import { renderMarkdown } from '../../lib/markdown';
 import { CONTENT, collectionUrl } from '../../lib/content';
 import { I18N, localeHomeUrl } from '../../lib/i18n';
+import { mergeEventDraft, mergePageDraft, mergePostDraft } from '../../lib/drafts';
+import { CALENDAR, eventUrl, type EventFieldConfig } from '../../lib/calendar/config';
+import { EventPanel, eventWhenLabel, type CalendarOption, type EventMeta } from './EventPanel';
 
 // The Ghost-style writing surface, shared by posts AND pages: distraction-free
 // column, cards via "/", autosave, a collapsible settings sidebar, and an
 // optional side-by-side live preview. `kind` switches the save action and
 // which settings fields exist — everything else is identical.
+//
+// Live (published/scheduled) documents autosave into a private pending draft;
+// the live version only changes when the user hits Update (applyUpdate).
 
 type SaveState = 'saved' | 'dirty' | 'saving' | 'error';
 
 interface Props {
-  kind?: 'post' | 'page';
+  kind?: 'post' | 'page' | 'event';
   post?: Post;
   page?: Page;
+  event?: CalEvent;
+  // events only: native calendars to file under, config custom fields, and
+  // the site zone (the default when an event has none)
+  calendars?: CalendarOption[];
+  eventFields?: EventFieldConfig[];
+  siteTimezone?: string;
   initialHTML: string;
   unsplashEnabled: boolean;
   previewPath: string;
   sharePath: string;
+  // public URL of the LIVE version — may differ from the staged slug while
+  // edits are pending; falls back to the editor state's URL when omitted
+  livePath?: string;
   // theme-provided template names for this document kind; empty = no picker
   templates?: string[];
+  // public identity for the Search / Social preview tabs
+  site?: { title: string; url: string };
 }
 
-interface Meta {
+interface Meta extends EventMeta {
   title: string;
   slug: string;
   collection: string;
@@ -112,18 +136,41 @@ function joinBrokenTableRows(text: string): string {
   return out.join('\n');
 }
 
-export default function PostEditor({ kind = 'post', post, page, initialHTML, unsplashEnabled, previewPath, sharePath, templates = [] }: Props) {
-  const doc = (kind === 'page' ? page : post)!;
+const NO_EVENT: EventMeta = {
+  start: '', end: '', allDay: false, timezone: '', rrule: '', exdates: [], cancelled: false,
+  location: { name: '', address: '', url: '' }, cta: { label: '', href: '', style: 'primary' }, calendarIds: [], fields: {},
+  rsvp: { enabled: false, capacity: 0, autoConfirm: true, maxSeats: 4 },
+};
+
+export default function PostEditor({ kind = 'post', post, page, event, calendars = [], eventFields = [], siteTimezone = '', initialHTML, unsplashEnabled, previewPath, sharePath, livePath: livePathProp, templates = [], site = { title: '', url: '' } }: Props) {
+  const doc = (kind === 'page' ? page : kind === 'event' ? event : post)!;
+  // posts and events share the feature image, excerpt, tags and "featured"
+  const postLike = kind !== 'page';
   const docId = doc.id;
+  // pending = staged edits exist that the live site doesn't show yet
+  const [pending, setPending] = useState(() => Boolean(doc.draft));
+  const [livePath, setLivePath] = useState(livePathProp ?? '');
 
   const [meta, setMetaState] = useState<Meta>(() =>
     kind === 'page'
       ? {
+          ...NO_EVENT,
           title: page!.title, slug: page!.slug, collection: 'posts', tags: [], excerpt: '', cover: '', coverAlt: '',
           seoTitle: page!.seoTitle, seoDesc: page!.seoDesc, status: page!.status,
           featured: false, isHome: page!.isHome, locale: page!.locale, authorId: null, authorIds: [], template: page!.template, publishedAt: null, scheduledAt: null,
         }
+      : kind === 'event'
+      ? {
+          title: event!.title, slug: event!.slug, collection: 'posts', tags: event!.tags, excerpt: event!.excerpt,
+          cover: event!.cover, coverAlt: event!.coverAlt, seoTitle: event!.seoTitle, seoDesc: event!.seoDesc,
+          status: event!.status, featured: event!.featured, isHome: false, locale: '', authorId: null, authorIds: [],
+          template: event!.template, publishedAt: event!.publishedAt, scheduledAt: event!.scheduledAt,
+          start: event!.start, end: event!.end, allDay: event!.allDay, timezone: event!.timezone, rrule: event!.rrule,
+          exdates: event!.exdates, cancelled: event!.cancelled, location: event!.location, cta: event!.cta,
+          calendarIds: event!.calendarIds, fields: event!.fields, rsvp: event!.rsvp,
+        }
       : {
+          ...NO_EVENT,
           title: post!.title, slug: post!.slug, collection: post!.collection, tags: post!.tags, excerpt: post!.excerpt,
           cover: post!.cover, coverAlt: post!.coverAlt, seoTitle: post!.seoTitle, seoDesc: post!.seoDesc,
           status: post!.status, featured: post!.featured, isHome: false, locale: '', authorId: post!.authorId,
@@ -133,16 +180,28 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
         }
   );
   // labels + URL base follow the post's collection (config key on the row)
-  const col = kind === 'page' ? CONTENT.posts : (CONTENT.collections[meta.collection] ?? CONTENT.posts);
-  const listHref = kind === 'page' ? '/admin/pages' : `/admin/c/${meta.collection}`;
+  const col = kind === 'event'
+    ? { singular: 'Event', plural: 'Events', base: CALENDAR.eventsBase, redirectFrom: [] }
+    : kind === 'page' ? CONTENT.posts : (CONTENT.collections[meta.collection] ?? CONTENT.posts);
+  const listHref = kind === 'page' ? '/admin/pages' : kind === 'event' ? '/admin/calendar/events' : `/admin/c/${meta.collection}`;
   const noun = kind === 'page' ? 'page' : col.singular.toLowerCase();
 
   const [authors, setAuthors] = useState<AuthorOption[]>([]);
   const [tagSuggestions, setTagSuggestions] = useState<string[]>([]);
   const metaRef = useRef(meta);
+  // Leave guard: the state the editor opened with (for "Undo" on drafts),
+  // whether anything was edited this visit, and where "leave" should go.
+  const initialMetaRef = useRef(meta);
+  const editedRef = useRef(false);
+  const leavingRef = useRef(false);
+  const pendingRef = useRef(pending);
+  pendingRef.current = pending;
+  const [leaveOpen, setLeaveOpen] = useState<null | 'list' | 'back'>(null);
+  const [leaveBusy, setLeaveBusy] = useState('');
   const [saveState, setSaveState] = useState<SaveState>('saved');
   const saveStateRef = useRef<SaveState>('saved');
-  const [sidebarOpen, setSidebarOpen] = useState(false);
+  // a fresh event opens with its settings showing: the date is the point
+  const [sidebarOpen, setSidebarOpen] = useState(() => kind === 'event' && event!.createdAt === event!.updatedAt);
   const [publishOpen, setPublishOpen] = useState(false);
   const [previewOpen, setPreviewOpen] = useState(false);
   const [split, setSplit] = useState(() => {
@@ -154,31 +213,48 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
   const [scheduleDraft, setScheduleDraft] = useState('');
   const [linkEdit, setLinkEdit] = useState(false);
   const [linkDraft, setLinkDraft] = useState('');
+  const [linkResults, setLinkResults] = useState<{ kind: string; title: string; url: string }[]>([]);
+  const [linkSel, setLinkSel] = useState(-1);
   const [shortcutsOpen, setShortcutsOpen] = useState(false);
   const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // saved snippets for the "/" menu; a ref so the (non-React) suggestion
+  // plugin always reads the current list
+  const snippetsRef = useRef<SlashSnippet[]>([]);
 
   const setSave = (s: SaveState) => { saveStateRef.current = s; setSaveState(s); };
-  const toggleSplit = () => {
-    setSplit((v) => {
-      try { localStorage.setItem('pe-split', v ? '0' : '1'); } catch { /* private mode */ }
-      return !v;
-    });
+  // server-side validation message for the last failed save (events)
+  const [saveError, setSaveError] = useState('');
+  const setSplitTo = (on: boolean) => {
+    setSplit(on);
+    try { localStorage.setItem('pe-split', on ? '1' : '0'); } catch { /* private mode */ }
   };
+  // excerpt line under the title: shown when it has text or was asked for
+  const [excerptOpen, setExcerptOpen] = useState(false);
+  // sidebar: reveal the date input for drafts that have no date yet
+  const [dateOpen, setDateOpen] = useState(false);
+  // which Preview tab opens (the sidebar's search card jumps to Search)
+  const [previewView, setPreviewView] = useState<'page' | 'search' | 'social'>('page');
+  // text of the block holding the caret, for the live pane to follow
+  const [focusText, setFocusText] = useState('');
+  const focusTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const splitRef = useRef(split);
+  splitRef.current = split;
 
   const editor = useEditor({
     extensions: [
       StarterKit.configure({
-        heading: { levels: [2, 3] },
+        heading: { levels: [1, 2, 3] },
         link: { openOnClick: false },
         codeBlock: false,
       }),
       CodeBlock,
+      Highlight,
       Placeholder.configure({
-        // Only the empty document gets the invitation; empty paragraphs in an
-        // existing doc get the floating quick-insert menu instead (the two
-        // rendered on top of each other otherwise).
+        // The empty doc gets the full invitation; an empty line in an existing
+        // doc gets a short hint next to the gutter "+" (current line only).
         placeholder: ({ editor: ed, node }) =>
-          ed.isEmpty && node.type.name === 'paragraph' ? `Begin writing your ${noun} — type “/” for cards, paste markdown…` : '',
+          node.type.name !== 'paragraph' ? '' :
+          ed.isEmpty ? `Begin writing your ${noun} — type “/” for cards, paste markdown…` : 'Type “/” for cards',
       }),
       CharacterCount,
       TableKit.configure({ table: { resizable: false } }),
@@ -189,7 +265,10 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
       Callout,
       HtmlCard,
       PostListCard,
+      ToggleCard,
+      TocCard,
       CalendarCard,
+      EventCard,
       InfoCards,
       FileCard,
       BookmarkCard,
@@ -200,6 +279,11 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
             pickerRangeRef.current = range;
             setPicker('editor');
           },
+          getSnippets: () => snippetsRef.current,
+          deleteSnippet: (id) => {
+            snippetsRef.current = snippetsRef.current.filter((s) => s.id !== id);
+            actions.snippets.delete({ id });
+          },
         },
       }),
     ],
@@ -220,8 +304,8 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
             return true;
           }
         }
-        // plain-text markdown → rich content; headings clamp to the editor's
-        // h2/h3 schema. Rich clipboards keep ProseMirror's own HTML handling,
+        // plain-text markdown → rich content; h4–h6 clamp to h3, the editor's
+        // deepest level. Rich clipboards keep ProseMirror's own HTML handling,
         // EXCEPT when the plain text carries a markdown table — copied
         // markdown source usually has an HTML flavor alongside it (code
         // editors, chat apps, this editor's own output) that would otherwise
@@ -231,7 +315,6 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
         const hasMarkdownTable = /^\s*\|.+\|\s*\n\s*\|(\s*:?-+:?\s*\|)+\s*$/m.test(joined);
         if (text && looksLikeMarkdown(text) && (!html || hasMarkdownTable)) {
           const rich = renderMarkdown(joined)
-            .replace(/<(\/?)h1\b[^>]*>/g, '<$1h2>')
             .replace(/<(\/?)h[4-6]\b[^>]*>/g, '<$1h3>');
           editorRef.current?.chain().insertContent(rich).run();
           return true;
@@ -240,6 +323,16 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
       },
     },
     onUpdate: () => queueSave(),
+    onSelectionUpdate: ({ editor: ed }) => {
+      // the top-level block holding the caret; the live pane scrolls to it.
+      // Debounced and split-only so typing doesn't re-render the editor.
+      if (!splitRef.current) return;
+      clearTimeout(focusTimer.current);
+      focusTimer.current = setTimeout(() => {
+        const { $anchor } = ed.state.selection;
+        setFocusText($anchor.depth >= 1 ? $anchor.node(1).textContent : '');
+      }, 250);
+    },
     immediatelyRender: false,
   });
   const editorRef = useRef(editor);
@@ -253,7 +346,51 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
     setSave('saving');
     const bodyJson = JSON.stringify(ed.getJSON());
     const bodyHtml = ed.getHTML();
-    if (kind === 'page') {
+    if (kind === 'event') {
+      const r = await actions.events.save({
+        id: docId,
+        title: m.title,
+        slug: m.slug,
+        bodyJson,
+        bodyHtml,
+        excerpt: m.excerpt,
+        tags: m.tags,
+        cover: m.cover,
+        coverAlt: m.coverAlt,
+        seoTitle: m.seoTitle,
+        seoDesc: m.seoDesc,
+        status: m.status,
+        featured: m.featured,
+        template: m.template,
+        start: m.start,
+        end: m.end,
+        allDay: m.allDay,
+        timezone: m.timezone,
+        rrule: m.rrule,
+        exdates: m.exdates,
+        cancelled: m.cancelled,
+        location: m.location,
+        cta: m.cta,
+        calendarIds: m.calendarIds,
+        fields: m.fields,
+        rsvp: m.rsvp,
+        scheduledAt: m.scheduledAt,
+      });
+      if (r.error) {
+        setSave('error');
+        setSaveError(r.error.message);
+        return;
+      }
+      setSaveError('');
+      // the server normalizes slugs and time pairs; sync from the merged view
+      const ev = mergeEventDraft(r.data.event);
+      setPending(Boolean(r.data.event.draft));
+      setMetaState((prev) => {
+        const next = { ...prev, slug: ev.slug, start: ev.start, end: ev.end, publishedAt: ev.publishedAt };
+        metaRef.current = next;
+        return next;
+      });
+    } else if (kind === 'page') {
       const r = await actions.pages.save({
         id: docId,
         title: m.title,
@@ -271,8 +408,10 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
         setSave('error');
         return;
       }
-      // server normalizes the locale (default stores as '')
-      const p = r.data.page;
+      // server normalizes the locale (default stores as ''); a staged save
+      // returns the live row + pending draft, so sync from the merged view
+      const p = mergePageDraft(r.data.page);
+      setPending(Boolean(r.data.page.draft));
       setMetaState((prev) => {
         const next = { ...prev, slug: p.slug, isHome: p.isHome, locale: p.locale };
         metaRef.current = next;
@@ -303,8 +442,10 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
         setSave('error');
         return;
       }
-      // server may have re-slugified / auto-set publish date
-      const p = r.data.post;
+      // server may have re-slugified / auto-set publish date; a staged save
+      // returns the live row + pending draft, so sync from the merged view
+      const p = mergePostDraft(r.data.post);
+      setPending(Boolean(r.data.post.draft));
       setMetaState((prev) => {
         const next = { ...prev, slug: p.slug, publishedAt: p.publishedAt, collection: p.collection };
         metaRef.current = next;
@@ -316,6 +457,7 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
   }, [docId, kind]);
 
   const queueSave = useCallback(() => {
+    editedRef.current = true;
     setSave('dirty');
     if (saveTimer.current) clearTimeout(saveTimer.current);
     saveTimer.current = setTimeout(() => save(), 1200);
@@ -330,14 +472,38 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
     queueSave();
   }, [queueSave]);
 
-  // Author + tag-registry options for the settings sidebar, loaded on first open.
-  const sidebarLoaded = useRef(false);
+  // Saved snippets for the "/" menu, loaded once per mount.
+  useEffect(() => {
+    actions.snippets.list({}).then((r) => {
+      if (!r.error) snippetsRef.current = r.data.snippets;
+    });
+  }, []);
+
+  const saveSnippet = useCallback(async () => {
+    const ed = editorRef.current;
+    if (!ed || ed.state.selection.empty) return;
+    const name = window.prompt('Snippet name — it will appear in the “/” menu:');
+    if (!name?.trim()) return;
+    const nodes = ed.state.selection.content().content.toJSON() as unknown[] | null;
+    if (!nodes?.length) return;
+    const r = await actions.snippets.create({ name: name.trim(), contentJson: JSON.stringify(nodes) });
+    if (r.error) return;
+    snippetsRef.current = [...snippetsRef.current, r.data.snippet].sort((a, b) => a.name.localeCompare(b.name));
+    showToast({ text: `Snippet “${r.data.snippet.name}” saved — insert it with /` });
+  }, []);
+
+  // Authors load up front (the byline under the title names the primary one);
+  // the tag registry only matters once the settings sidebar opens.
   useEffect(() => {
-    if (kind !== 'post' || !sidebarOpen || sidebarLoaded.current) return;
-    sidebarLoaded.current = true;
+    if (kind !== 'post') return;
     actions.users.list({}).then((r) => {
       if (!r.error) setAuthors(r.data.users.map((u) => ({ id: u.id, name: u.name })));
     });
+  }, [kind]);
+  const tagsLoaded = useRef(false);
+  useEffect(() => {
+    if (!postLike || !sidebarOpen || tagsLoaded.current) return;
+    tagsLoaded.current = true;
     actions.tags.list({}).then((r) => {
       if (!r.error) setTagSuggestions(r.data.tags.map((t) => t.name));
     });
@@ -353,6 +519,29 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
     setLinkEdit(true);
   }, []);
 
+  const applyLink = useCallback((raw: string) => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    const url = raw.trim();
+    if (url === '' || url === 'https://') ed.chain().focus().extendMarkRange('link').unsetLink().run();
+    else ed.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+    setLinkEdit(false);
+  }, []);
+
+  // Internal link search: typing a title into the ⌘K box surfaces published
+  // posts/pages to link to; URL-ish input (or the seeded https://) skips it.
+  useEffect(() => {
+    if (!linkEdit) { setLinkResults([]); setLinkSel(-1); return; }
+    const q = linkDraft.trim();
+    if (q.length < 2 || /^(https?:\/\/|\/|#|mailto:|tel:)/i.test(q)) { setLinkResults([]); setLinkSel(-1); return; }
+    const t = setTimeout(() => {
+      actions.linkTargets.search({ query: q }).then((r) => {
+        if (!r.error) { setLinkResults(r.data.targets); setLinkSel(r.data.targets.length ? 0 : -1); }
+      });
+    }, 200);
+    return () => clearTimeout(t);
+  }, [linkDraft, linkEdit]);
+
   // Cmd+S flush, Cmd+K link, Cmd+/ shortcut sheet + unsaved-changes guard
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -360,8 +549,11 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
       if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); openLinkEdit(); }
       if ((e.metaKey || e.ctrlKey) && e.key === '/') { e.preventDefault(); setShortcutsOpen((v) => !v); }
     };
+    // closing the tab / reloading: browsers only allow their own prompt
     const onLeave = (e: BeforeUnloadEvent) => {
-      if (saveStateRef.current === 'dirty' || saveStateRef.current === 'saving') e.preventDefault();
+      if (leavingRef.current) return;
+      const busy = saveStateRef.current === 'dirty' || saveStateRef.current === 'saving';
+      if (busy || leaveReason() === 'live') e.preventDefault();
     };
     window.addEventListener('keydown', onKey);
     window.addEventListener('beforeunload', onLeave);
@@ -386,37 +578,204 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
   const toastTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   function publicPath(m: Meta) {
+    if (kind === 'event') return eventUrl(m.slug);
     return kind === 'post' ? collectionUrl(m.collection, m.slug) : m.isHome ? localeHomeUrl(m.locale) : `/${m.slug}`;
   }
 
+  function showToast(msg: { text: string; href?: string }) {
+    setToast(msg);
+    if (toastTimer.current) clearTimeout(toastTimer.current);
+    toastTimer.current = setTimeout(() => setToast(null), 4500);
+  }
+
   async function transition(patch: Partial<Meta>) {
     setPublishOpen(false);
     const next = { ...metaRef.current, ...patch };
     metaRef.current = next;
     setMetaState(next);
+    // a status change writes the full editor state live (any staged edits are
+    // folded in — the payload IS the staged content) and clears the draft
     await save(patch);
     if (saveStateRef.current === 'error') return;
+    if (patch.status === 'published') setLivePath(publicPath(next));
     const messages: Partial<Record<Status, { text: string; href?: string }>> = {
-      published: { text: `${kind === 'page' ? 'Page' : (CONTENT.collections[next.collection] ?? CONTENT.posts).singular} published`, href: publicPath(next) },
+      published: { text: `${kind === 'page' ? 'Page' : kind === 'event' ? 'Event' : (CONTENT.collections[next.collection] ?? CONTENT.posts).singular} published`, href: publicPath(next) },
       scheduled: { text: `Scheduled for ${next.scheduledAt ? new Date(next.scheduledAt).toLocaleString() : 'later'}` },
       draft: { text: 'Back to private draft' },
       archived: { text: 'Archived — hidden from the site' },
     };
     const msg = patch.status ? messages[patch.status] : undefined;
-    if (msg) {
-      setToast(msg);
-      if (toastTimer.current) clearTimeout(toastTimer.current);
-      toastTimer.current = setTimeout(() => setToast(null), 4500);
+    if (msg) showToast(msg);
+  }
+
+  // Update button: flush the current edits into the pending draft, then ask
+  // the server to copy the draft onto the live version.
+  async function applyUpdate() {
+    setPublishOpen(false);
+    await save();
+    if (saveStateRef.current === 'error') return;
+    const r = kind === 'page'
+      ? await actions.pages.applyUpdate({ id: docId })
+      : kind === 'event'
+      ? await actions.events.applyUpdate({ id: docId })
+      : await actions.posts.applyUpdate({ id: docId });
+    if (r.error) {
+      setSave('error');
+      return;
+    }
+    setPending(false);
+    editedRef.current = false;
+    const href = publicPath(metaRef.current);
+    setLivePath(href);
+    setPreviewTick((t) => t + 1);
+    showToast({ text: 'Changes are live', href });
+  }
+
+  async function discardChanges() {
+    if (!window.confirm(`Discard the pending changes and go back to the live ${noun}? This cannot be undone.`)) return;
+    if (await discardPending()) {
+      leavingRef.current = true;
+      location.reload(); // rehydrate the editor from the live version
+    }
+  }
+
+  async function discardPending(): Promise<boolean> {
+    setPublishOpen(false);
+    // cancel any queued autosave so it can't re-stage the edits after the
+    // discard, and clear the dirty flag so the reload isn't blocked
+    if (saveTimer.current) { clearTimeout(saveTimer.current); saveTimer.current = null; }
+    setSave('saved');
+    const r = kind === 'page'
+      ? await actions.pages.discardChanges({ id: docId })
+      : kind === 'event'
+      ? await actions.events.discardChanges({ id: docId })
+      : await actions.posts.discardChanges({ id: docId });
+    if (r.error) {
+      setSave('error');
+      return false;
     }
+    setPending(false);
+    return true;
+  }
+
+  // ---- leave guard ----------------------------------------------------------
+  // 'live'  — a published/scheduled doc has edits the site doesn't show yet
+  // 'draft' — a draft was edited during this visit (saved, but maybe by accident)
+  function leaveReason(): 'live' | 'draft' | null {
+    const st = metaRef.current.status;
+    const busy = saveStateRef.current === 'dirty' || saveStateRef.current === 'saving';
+    if ((st === 'published' || st === 'scheduled') && (pendingRef.current || busy)) return 'live';
+    if (st === 'draft' && editedRef.current) return 'draft';
+    return null;
+  }
+
+  function goAway(to: 'list' | 'back') {
+    leavingRef.current = true;
+    // 'back' comes from the history trap below: skip the guard entry too
+    if (to === 'back') history.go(-2);
+    else location.href = listHref;
+  }
+
+  function requestLeave(to: 'list' | 'back') {
+    if (leaveReason()) setLeaveOpen(to);
+    else if (saveStateRef.current === 'dirty' || saveStateRef.current === 'saving') save().then(() => goAway(to));
+    else goAway(to);
   }
 
+  async function leaveWith(action: 'keep' | 'update' | 'publish' | 'discard' | 'undo') {
+    const to = leaveOpen ?? 'list';
+    if (action === 'keep') {
+      setLeaveBusy('Saving…');
+      if (saveStateRef.current !== 'saved') await save();
+    } else if (action === 'update') {
+      setLeaveBusy('Updating…');
+      await applyUpdate();
+    } else if (action === 'publish') {
+      setLeaveBusy('Publishing…');
+      await transition({ status: 'published', scheduledAt: null });
+    } else if (action === 'discard') {
+      setLeaveBusy('Discarding…');
+      await discardPending();
+    } else {
+      // put the draft back the way it was when the editor opened
+      setLeaveBusy('Undoing…');
+      if (saveTimer.current) { clearTimeout(saveTimer.current); saveTimer.current = null; }
+      editorRef.current?.commands.setContent(initialHTML, { emitUpdate: false });
+      metaRef.current = initialMetaRef.current;
+      setMetaState(initialMetaRef.current);
+      await save();
+    }
+    setLeaveBusy('');
+    if (saveStateRef.current === 'error') return; // stay: the dialog shows the failure
+    goAway(to);
+  }
+
+  // Browser Back: park a guard entry on top of the editor. Going back pops it;
+  // if there's something to confirm, re-park it and ask, otherwise keep going.
+  useEffect(() => {
+    if (!history.state?.peGuard) history.pushState({ ...(history.state ?? {}), peGuard: true }, '');
+    const onPop = () => {
+      if (leavingRef.current) return;
+      if (leaveReason()) {
+        history.pushState({ ...(history.state ?? {}), peGuard: true }, '');
+        setLeaveOpen('back');
+      } else {
+        leavingRef.current = true;
+        history.back();
+      }
+    };
+    window.addEventListener('popstate', onPop);
+    return () => window.removeEventListener('popstate', onPop);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!leaveOpen) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape' && !leaveBusy) setLeaveOpen(null); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [leaveOpen, leaveBusy]);
+
   const words = editor?.storage.characterCount?.words() ?? 0;
   const saveLabel =
-    saveState === 'saved' ? 'Saved' :
+    saveState === 'saved' ? (pending ? 'Saved — not live yet' : 'Saved') :
     saveState === 'saving' ? 'Saving…' :
-    saveState === 'dirty' ? 'Unsaved changes' : 'Save failed — retrying on next change';
+    saveState === 'dirty' ? 'Unsaved changes' : saveError ? `Not saved — ${saveError}` : 'Save failed — retrying on next change';
 
   const publishLabel = meta.status === 'published' ? 'Update' : 'Publish';
+  // publish menu (a bottom sheet on phones): outside tap or Escape closes it
+  useEffect(() => {
+    if (!publishOpen) return;
+    const onDown = (e: PointerEvent) => {
+      if (!(e.target instanceof Element && e.target.closest('.pe-publish-wrap'))) setPublishOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setPublishOpen(false); };
+    document.addEventListener('pointerdown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('pointerdown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [publishOpen]);
+
+  // body-derived facts are measured once per open; the meta fields stay live
+  // so the Search / Social cards update while they're edited in the overlay
+  const bodyFacts = useMemo(() => {
+    const html = previewOpen && editor ? editor.getHTML() : '';
+    const dom = html ? new DOMParser().parseFromString(html, 'text/html') : null;
+    return {
+      firstParagraph: [...(dom?.querySelectorAll('p') ?? [])].map((p) => p.textContent?.trim() ?? '').find(Boolean) ?? '',
+      links: dom?.querySelectorAll('a[href]').length ?? 0,
+      imagesMissingAlt: dom ? [...dom.querySelectorAll('img')].filter((i) => !i.getAttribute('alt')?.trim()).length : 0,
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [previewOpen]);
+  const previewMeta: PreviewMeta = {
+    title: meta.title, seoTitle: meta.seoTitle, seoDesc: meta.seoDesc, excerpt: meta.excerpt,
+    cover: meta.cover, coverAlt: meta.coverAlt, path: publicPath(meta), ...bodyFacts,
+  };
+  const liveHref = livePath || publicPath(meta);
+  const primaryAuthor = authors.find((a) => a.id === meta.authorIds[0])?.name ?? '';
 
   return (
     <div className={`pe-shell ${sidebarOpen ? 'has-sidebar' : ''} ${split ? 'has-split' : ''}`}>
@@ -429,23 +788,27 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
       )}
       <header className="pe-topbar">
         <div className="pe-topbar-left">
-          <a className="pe-btn ghost sm" href={listHref}>{kind === 'page' ? '‹ Pages' : '‹ Posts'}</a>
+          <a className="pe-btn ghost sm" href={listHref} onClick={(e) => { if (e.metaKey || e.ctrlKey || e.shiftKey) return; e.preventDefault(); requestLeave('list'); }} aria-label={kind === 'page' ? 'Back to pages' : `Back to ${col.plural.toLowerCase()}`}>‹<span className="pe-hide-sm">{kind === 'page' ? 'Pages' : col.plural}</span></a>
           <span className={`pe-savestate ${saveState}`}>
-            {STATUS_LABEL[meta.status]} — {saveLabel}
+            <i className="pe-save-dot" aria-hidden="true" />
+            {STATUS_LABEL[meta.status]}{pending && <em className="pe-edited-dot"> · edited</em>}<span className="pe-hide-sm"> · {saveLabel}</span>
           </span>
         </div>
-        <div className="pe-topbar-right">
-          <button
-            type="button"
-            className={`pe-btn ghost sm ${split ? 'is-active' : ''}`}
-            title="Side-by-side preview"
-            onClick={toggleSplit}
-          >
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
-              <rect x="3" y="4" width="18" height="16" rx="2" /><path d="M12 4v16" />
-            </svg>
+        <div className="pe-seg pe-modes" role="group" aria-label="Editor view">
+          <button type="button" aria-pressed={!split} title="Just the page" onClick={() => setSplitTo(false)}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" /></svg>
+            Write
           </button>
-          <button type="button" className="pe-btn ghost sm" onClick={() => setPreviewOpen(true)}>Preview</button>
+          <button type="button" className="pe-mode-split" aria-pressed={split} title="Page and live site side by side" onClick={() => setSplitTo(true)}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M12 4v16" /></svg>
+            Split
+          </button>
+          <button type="button" aria-pressed={false} title="Desktop, phone, search and social previews" onClick={() => { setPreviewView('page'); setPreviewOpen(true); }}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" /></svg>
+            Preview
+          </button>
+        </div>
+        <div className="pe-topbar-right">
           <div className="pe-publish-wrap">
             <button type="button" className="pe-btn primary sm" onClick={() => setPublishOpen((v) => !v)}>
               {publishLabel} ▾
@@ -465,7 +828,7 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                     >
                       Publish now
                     </button>
-                    {kind === 'post' && (
+                    {postLike && (
                       <div className="pe-pop-schedule">
                         <span className="pe-pop-label">Or schedule for later</span>
                         <div className="pe-pop-schedrow">
@@ -492,16 +855,29 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                 {meta.status === 'scheduled' && (
                   <>
                     <div className="pe-pop-head">
-                      <b>Scheduled</b>
-                      <span>Goes live {meta.scheduledAt ? new Date(meta.scheduledAt).toLocaleString() : ''}.</span>
+                      <b>Scheduled{pending ? ' · unpublished edits' : ''}</b>
+                      <span>
+                        Goes live {meta.scheduledAt ? new Date(meta.scheduledAt).toLocaleString() : ''}.
+                        {pending && ' Edits are saved privately — press Update to include them.'}
+                      </span>
                     </div>
+                    {pending && (
+                      <button type="button" className="pe-btn primary pe-pop-cta" onClick={applyUpdate}>
+                        Update scheduled version
+                      </button>
+                    )}
                     <button
                       type="button"
-                      className="pe-btn primary pe-pop-cta"
+                      className={`pe-btn ${pending ? '' : 'primary '}pe-pop-cta`}
                       onClick={() => transition({ status: 'published', scheduledAt: null })}
                     >
                       Publish now instead
                     </button>
+                    {pending && (
+                      <button type="button" className="pe-pop-item" onClick={discardChanges}>
+                        <b>Discard pending changes</b><span>Back to the scheduled version</span>
+                      </button>
+                    )}
                     <button type="button" className="pe-pop-item" onClick={() => transition({ status: 'draft', scheduledAt: null })}>
                       <b>Unschedule</b><span>Back to a private draft</span>
                     </button>
@@ -510,12 +886,26 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                 {meta.status === 'published' && (
                   <>
                     <div className="pe-pop-head">
-                      <b>Published</b>
-                      <span>Live on the site — edits save and go live automatically.</span>
+                      <b>{pending ? 'Published · unpublished edits' : 'Published'}</b>
+                      <span>
+                        {pending
+                          ? `Changes are saved privately — the live ${noun} hasn't changed yet.`
+                          : 'Live on the site — edits stay private until you press Update.'}
+                      </span>
                     </div>
-                    <a className="pe-btn pe-pop-cta" href={publicPath(meta)} target="_blank" rel="noopener">
-                      View on site ↗
+                    {pending && (
+                      <button type="button" className="pe-btn primary pe-pop-cta" onClick={applyUpdate}>
+                        Update — push changes live
+                      </button>
+                    )}
+                    <a className="pe-btn pe-pop-cta" href={liveHref} target="_blank" rel="noopener">
+                      {pending ? 'View live version ↗' : 'View on site ↗'}
                     </a>
+                    {pending && (
+                      <button type="button" className="pe-pop-item" onClick={discardChanges}>
+                        <b>Discard pending changes</b><span>Back to the live version</span>
+                      </button>
+                    )}
                     <div className="pe-pop-sep" />
                     <button type="button" className="pe-pop-item" onClick={() => transition({ status: 'draft' })}>
                       <b>Unpublish</b><span>Revert to a private draft</span>
@@ -548,21 +938,23 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
           </div>
           <button
             type="button"
-            className={`pe-btn ghost sm pe-sidebar-toggle ${sidebarOpen ? 'is-active' : ''}`}
+            className={`pe-btn ghost sm pe-icon-btn pe-sidebar-toggle ${sidebarOpen ? 'is-active' : ''}`}
             title={kind === 'page' ? 'Page settings' : `${col.singular} settings`}
+            aria-label={kind === 'page' ? 'Page settings' : `${col.singular} settings`}
             onClick={() => setSidebarOpen((v) => !v)}
           >
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
-              <rect x="3" y="4" width="18" height="16" rx="2" /><path d="M15 4v16" />
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0" /><circle cx="16" cy="6" r="2" /><circle cx="10" cy="12" r="2" /><circle cx="18" cy="18" r="2" />
             </svg>
           </button>
         </div>
       </header>
 
       <div className="pe-body">
+        <section className="pe-editor-pane">
         <main className="pe-main">
           <div className="pe-column">
-            {kind === 'post' && (meta.cover ? (
+            {postLike && (meta.cover ? (
               <figure className="pe-feature">
                 <img src={meta.cover} alt={meta.coverAlt} />
                 <div className="pe-feature-tools">
@@ -571,21 +963,32 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                 </div>
                 <figcaption className="pe-feature-label">Feature image</figcaption>
               </figure>
-            ) : (
-              <button type="button" className="pe-add-feature" onClick={() => setPicker('feature')}>
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
-                  <rect x="3" y="5" width="18" height="14" rx="2" />
-                  <circle cx="8.5" cy="10" r="1.5" />
-                  <path d="M21 15.5 16 11l-6.5 6.5M3 17l4-4 3 3" />
-                </svg>
-                <span>Add feature image</span>
-                <em>Shown at the top of the {noun} and in link previews</em>
-              </button>
-            ))}
+            ) : null)}
+
+            {postLike && (!meta.cover || (!meta.excerpt && !excerptOpen)) && (
+              <div className="pe-addons">
+                {!meta.cover && (
+                  <button type="button" title={`Shown at the top of the ${noun} and in link previews`} onClick={() => setPicker('feature')}>
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2" /><circle cx="8.5" cy="10" r="1.5" /><path d="M21 15.5 16 11l-6.5 6.5" /></svg>
+                    Feature image
+                  </button>
+                )}
+                {!meta.excerpt && !excerptOpen && (
+                  <button type="button" title="A short teaser under the title, on post cards and in link previews" onClick={() => setExcerptOpen(true)}>
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M4 7h16M4 12h10M4 17h7" /></svg>
+                    Excerpt
+                  </button>
+                )}
+              </div>
+            )}
 
             <textarea
               className="pe-title"
               rows={1}
+              ref={(el) => {
+                // grow to fit on mount and on narrow screens, not just while typing
+                if (el) { el.style.height = 'auto'; el.style.height = `${el.scrollHeight}px`; }
+              }}
               placeholder={kind === 'page' ? 'Page title' : `${col.singular} title`}
               value={meta.title}
               onChange={(e) => {
@@ -598,16 +1001,82 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
               }}
             />
 
+            {postLike && (meta.excerpt || excerptOpen) && (
+              <textarea
+                className="pe-excerpt"
+                rows={1}
+                maxLength={300}
+                autoFocus={excerptOpen && !meta.excerpt}
+                ref={(el) => {
+                  if (el) { el.style.height = 'auto'; el.style.height = `${el.scrollHeight}px`; }
+                }}
+                placeholder="Add a short excerpt…"
+                value={meta.excerpt}
+                onChange={(e) => {
+                  e.target.style.height = 'auto';
+                  e.target.style.height = `${e.target.scrollHeight}px`;
+                  setMeta({ excerpt: e.target.value });
+                }}
+                onBlur={() => { if (!meta.excerpt) setExcerptOpen(false); }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') { e.preventDefault(); editor?.commands.focus('start'); }
+                }}
+              />
+            )}
+
+            {kind === 'event' && (
+              <div className="pe-byline pe-ev-byline">
+                <button type="button" className={`pe-ev-when ${meta.cancelled ? 'is-cancelled' : ''}`} title="Edit date & time" onClick={() => setSidebarOpen(true)}>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="4.5" width="18" height="16" rx="2" /><path d="M3 9.5h18M8 2.5v4M16 2.5v4" /></svg>
+                  {meta.cancelled && <b>Cancelled · </b>}{eventWhenLabel(meta)}
+                </button>
+                {meta.rrule && <span className="pe-byline-meta">Repeats</span>}
+                {meta.location.name ? (
+                  <button type="button" className="pe-byline-tag" title="Edit location" onClick={() => setSidebarOpen(true)}>{meta.location.name}</button>
+                ) : (
+                  <button type="button" className="pe-byline-add" onClick={() => setSidebarOpen(true)}>+ Location</button>
+                )}
+                {calendars.filter((c) => meta.calendarIds.includes(c.id)).map((c) => (
+                  <button key={c.id} type="button" className="pe-byline-tag pe-ev-cal" onClick={() => setSidebarOpen(true)}><i style={{ background: c.color }} aria-hidden="true" />{c.name}</button>
+                ))}
+              </div>
+            )}
+
+            {kind === 'post' && (
+              <div className="pe-byline">
+                {primaryAuthor && <span className="pe-byline-author"><i aria-hidden="true">{primaryAuthor.slice(0, 1).toUpperCase()}</i>{primaryAuthor}</span>}
+                {meta.tags.map((t) => (
+                  <button key={t} type="button" className="pe-byline-tag" title="Edit tags" onClick={() => setSidebarOpen(true)}>{t}</button>
+                ))}
+                {meta.tags.length === 0 && (
+                  <button type="button" className="pe-byline-add" onClick={() => setSidebarOpen(true)}>+ Tags</button>
+                )}
+                <span className="pe-byline-meta">{Math.max(1, Math.round(words / 220))} min read</span>
+              </div>
+            )}
+
             {editor && (
               <BubbleMenu editor={editor} className="pe-bubble" options={{ placement: 'top' }}>
                 <button type="button" className={editor.isActive('bold') ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleBold().run()}><b>B</b></button>
                 <button type="button" className={editor.isActive('italic') ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleItalic().run()}><i>I</i></button>
                 <button type="button" className={editor.isActive('strike') ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleStrike().run()}><s>S</s></button>
                 <button type="button" className={editor.isActive('code') ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleCode().run()}>{'<>'}</button>
+                <button type="button" className={editor.isActive('highlight') ? 'is-active' : ''} title="Highlight (==text==)" onClick={() => editor.chain().focus().toggleHighlight().run()}><mark>H</mark></button>
                 <span className="pe-bubble-sep" />
+                <button type="button" className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}>H1</button>
                 <button type="button" className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>H2</button>
                 <button type="button" className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}>H3</button>
                 <button type="button" className={editor.isActive('blockquote') ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleBlockquote().run()}>❝</button>
+                <button
+                  type="button"
+                  title="Regular text"
+                  onClick={() => {
+                    const c = editor.chain().focus().setParagraph();
+                    (editor.isActive('blockquote') ? c.toggleBlockquote() : c).run();
+                  }}
+                >
+                  ¶
+                </button>
                 <span className="pe-bubble-sep" />
                 <button
                   type="button"
@@ -617,6 +1086,10 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                 >
                   Link
                 </button>
+                <span className="pe-bubble-sep" />
+                <button type="button" title="Save selection as a snippet — reusable from the “/” menu" onClick={saveSnippet}>
+                  + Snippet
+                </button>
               </BubbleMenu>
             )}
 
@@ -642,10 +1115,10 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
               <FloatingMenu
                 editor={editor}
                 className="pe-floating"
-                options={{ placement: 'left' }}
+                options={{ placement: 'left', offset: 14 }}
                 shouldShow={({ editor: ed, view, state }) => {
                   // empty paragraph in a non-empty doc — the empty doc shows the
-                  // placeholder instead, so the two never overlap
+                  // long placeholder instead
                   const { $anchor, empty } = state.selection;
                   return (
                     view.hasFocus() && empty && !ed.isEmpty && $anchor.depth === 1 &&
@@ -653,66 +1126,67 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                   );
                 }}
               >
-                {([
-                  ['Image', () => { pickerRangeRef.current = null; setPicker('editor'); }],
-                  ['Gallery', () => editor.chain().focus().insertContent({ type: 'galleryCard' }).run()],
-                  ['Embed', () => editor.chain().focus().insertContent({ type: 'embedCard' }).run()],
-                  ['Bookmark', () => editor.chain().focus().insertContent({ type: 'bookmarkCard' }).run()],
-                  ['File', () => editor.chain().focus().insertContent({ type: 'fileCard' }).run()],
-                  ['Button', () => editor.chain().focus().insertContent({ type: 'buttonCard' }).run()],
-                  ['Callout', () => editor.chain().focus().insertContent({ type: 'callout' }).run()],
-                  ['Calendar', () => editor.chain().focus().insertContent({ type: 'calendarCard' }).run()],
-                  ['Info cards', () => editor.chain().focus().insertContent({ type: 'infoCards' }).run()],
-                  ['Table', () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()],
-                  ['HTML', () => editor.chain().focus().insertContent({ type: 'htmlCard' }).run()],
-                  ['— Divider', () => editor.chain().focus().setHorizontalRule().run()],
-                ] as [string, () => void][]).map(([label, run]) => (
-                  <button key={label} type="button" onMouseDown={(e) => { e.preventDefault(); run(); }}>{label}</button>
-                ))}
-                <span className="pe-floating-hint">or type /</span>
+                <button
+                  type="button"
+                  className="pe-gutter-add"
+                  title="Insert a card"
+                  aria-label="Insert a card"
+                  onMouseDown={(e) => { e.preventDefault(); editor.chain().focus().insertContent('/').run(); }}
+                >
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
+                </button>
               </FloatingMenu>
             )}
 
             {linkEdit && editor && (
               <div className="pe-linkedit" role="dialog" aria-label="Edit link">
-                <input
-                  autoFocus
-                  type="url"
-                  placeholder="https://… (empty removes the link)"
-                  value={linkDraft}
-                  onChange={(e) => setLinkDraft(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      e.preventDefault();
-                      const url = linkDraft.trim();
-                      if (url === '' || url === 'https://') editor.chain().focus().extendMarkRange('link').unsetLink().run();
-                      else editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
-                      setLinkEdit(false);
-                    }
-                    if (e.key === 'Escape') { e.preventDefault(); setLinkEdit(false); editor.commands.focus(); }
-                  }}
-                />
-                <button
-                  type="button"
-                  className="pe-btn primary sm"
-                  onClick={() => {
-                    const url = linkDraft.trim();
-                    if (url === '' || url === 'https://') editor.chain().focus().extendMarkRange('link').unsetLink().run();
-                    else editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
-                    setLinkEdit(false);
-                  }}
-                >
-                  Apply
-                </button>
-                <button type="button" className="pe-btn ghost sm" onClick={() => { setLinkEdit(false); editor.commands.focus(); }}>✕</button>
+                <div className="pe-linkedit-row">
+                  <input
+                    autoFocus
+                    type="text"
+                    placeholder="Paste a URL, or type to search your content… (empty removes the link)"
+                    value={linkDraft}
+                    onChange={(e) => setLinkDraft(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'ArrowDown' && linkResults.length) { e.preventDefault(); setLinkSel((s) => (s + 1) % linkResults.length); }
+                      if (e.key === 'ArrowUp' && linkResults.length) { e.preventDefault(); setLinkSel((s) => (s - 1 + linkResults.length) % linkResults.length); }
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                        applyLink(linkSel >= 0 && linkResults[linkSel] ? linkResults[linkSel].url : linkDraft);
+                      }
+                      if (e.key === 'Escape') { e.preventDefault(); setLinkEdit(false); editor.commands.focus(); }
+                    }}
+                  />
+                  <button
+                    type="button"
+                    className="pe-btn primary sm"
+                    onClick={() => applyLink(linkSel >= 0 && linkResults[linkSel] ? linkResults[linkSel].url : linkDraft)}
+                  >
+                    Apply
+                  </button>
+                  <button type="button" className="pe-btn ghost sm" onClick={() => { setLinkEdit(false); editor.commands.focus(); }}>✕</button>
+                </div>
+                {linkResults.length > 0 && (
+                  <div className="pe-link-results">
+                    {linkResults.map((t, i) => (
+                      <button
+                        key={t.url}
+                        type="button"
+                        className={i === linkSel ? 'is-selected' : ''}
+                        onMouseEnter={() => setLinkSel(i)}
+                        onMouseDown={(e) => { e.preventDefault(); applyLink(t.url); }}
+                      >
+                        <span className="pe-link-title">{t.title}</span>
+                        <span className="pe-link-url">{t.url}</span>
+                        <span className="pe-link-kind">{t.kind}</span>
+                      </button>
+                    ))}
+                  </div>
+                )}
               </div>
             )}
 
             <EditorContent editor={editor} />
-            <div className="pe-wordcount">
-              {words.toLocaleString()} words
-              <button type="button" className="pe-shortcuts-btn" title="Keyboard shortcuts (⌘/)" onClick={() => setShortcutsOpen(true)}>⌘/</button>
-            </div>
 
             {shortcutsOpen && (
               <div className="pe-shortcuts-overlay" onClick={() => setShortcutsOpen(false)}>
@@ -726,7 +1200,8 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                       ['⌘B / ⌘I', 'Bold / italic'],
                       ['⌘⇧X', 'Strikethrough'],
                       ['⌘E', 'Inline code'],
-                      ['⌘K', 'Add or edit a link'],
+                      ['==text==', 'Highlight'],
+                      ['⌘K', 'Link — paste a URL or search your own content'],
                       ['/', 'Insert a card (image, gallery, embed…)'],
                     ]],
                     ['Markdown as you type', [
@@ -757,196 +1232,263 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
             )}
           </div>
         </main>
+        {editor && <FormatDock editor={editor} words={words} onLink={openLinkEdit} onShortcuts={() => setShortcutsOpen(true)} />}
+        </section>
 
-        {split && (
-          <aside className="pe-splitpane">
-            <div className="pe-split-bar">
-              <span className="pe-split-label">Live preview</span>
-              <div className="pe-split-actions">
-                <button type="button" className="pe-btn ghost sm" title="Refresh" onClick={() => setPreviewTick((t) => t + 1)}>↻</button>
-                <a className="pe-btn ghost sm" href={previewPath} target="_blank" rel="noopener" title="Open in tab">↗</a>
-                <button type="button" className="pe-btn ghost sm" title="Close preview" onClick={toggleSplit}>✕</button>
-              </div>
-            </div>
-            <iframe key={previewTick} src={previewPath} title="Live preview" />
-          </aside>
-        )}
+        {split && <LivePane src={previewPath} path={liveHref} tick={previewTick} focusText={focusText} />}
       </div>
 
       {sidebarOpen && (
-        <aside className="pe-sidebar">
+        <aside className="pe-sidebar" aria-label={kind === 'page' ? 'Page settings' : `${col.singular} settings`}>
           <div className="pe-sidebar-head">
             <span>{kind === 'page' ? 'Page settings' : `${col.singular} settings`}</span>
-            <button type="button" className="pe-btn ghost sm" onClick={() => setSidebarOpen(false)}>✕</button>
+            <button type="button" className="pe-btn ghost sm pe-icon-btn" aria-label="Close settings" onClick={() => setSidebarOpen(false)}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6 6 18" /></svg>
+            </button>
           </div>
 
-          <label className="pe-field">
-            <span>{kind === 'page' ? 'Page URL' : `${col.singular} URL`}</span>
-            <div className="pe-slug">
-              <span className="pe-slug-prefix">{kind === 'page' ? '/' : `${col.base}/`}</span>
-              <input type="text" value={meta.slug} onChange={(e) => setMeta({ slug: e.target.value })} />
-            </div>
-          </label>
-
-          {kind === 'post' && Object.keys(CONTENT.collections).length > 1 && (
+          <section className="pe-sb-section">
             <label className="pe-field">
-              <span>Collection</span>
-              <select value={meta.collection} onChange={(e) => setMeta({ collection: e.target.value })}>
-                {Object.entries(CONTENT.collections).map(([k, c]) => (
-                  <option key={k} value={k}>{c.plural}</option>
-                ))}
-              </select>
-              {meta.status === 'published' && (
-                <em className="hint">Moving a published {noun} leaves a redirect at its old URL.</em>
-              )}
+              <span>URL</span>
+              <div className="pe-slug">
+                <span className="pe-slug-prefix">{kind === 'page' ? '/' : `/${col.base.replace(/^\/+|\/+$/g, '')}/`}</span>
+                <input type="text" value={meta.slug} spellCheck={false} onChange={(e) => setMeta({ slug: e.target.value })} />
+              </div>
             </label>
-          )}
 
-          {kind === 'page' && I18N.enabled && (
-            <label className="pe-field">
-              <span>Language</span>
-              <select
-                value={meta.locale || I18N.defaultLocale}
-                onChange={(e) => setMeta({ locale: e.target.value })}
-              >
-                {I18N.locales.map((l) => (
-                  <option key={l} value={l}>{l.toUpperCase()}{l === I18N.defaultLocale ? ' — default' : ''}</option>
-                ))}
-              </select>
-            </label>
-          )}
+            {kind === 'post' && (
+              <div className="pe-field">
+                <span>Publish date</span>
+                {meta.publishedAt || dateOpen ? (
+                  <div className="pe-date">
+                    <input
+                      type="datetime-local"
+                      autoFocus={dateOpen && !meta.publishedAt}
+                      value={tsToLocal(meta.publishedAt)}
+                      onChange={(e) => setMeta({ publishedAt: localToTs(e.target.value) })}
+                    />
+                    <button type="button" className="pe-btn ghost sm" title="Clear — use the time it's published" onClick={() => { setMeta({ publishedAt: null }); setDateOpen(false); }}>Clear</button>
+                  </div>
+                ) : (
+                  <button type="button" className="pe-date-empty" onClick={() => setDateOpen(true)}>
+                    <span>When you publish</span>
+                    <em>Set a date</em>
+                  </button>
+                )}
+              </div>
+            )}
 
-          {kind === 'page' && (
-            <label className="pe-field pe-check">
-              <input
-                type="checkbox"
-                checked={meta.isHome}
-                onChange={(e) => setMeta({ isHome: e.target.checked })}
-              />
-              {I18N.enabled ? (
-                <span>Serve this page at <code>{localeHomeUrl(meta.locale)}</code> ({(meta.locale || I18N.defaultLocale).toUpperCase()} home page)</span>
-              ) : (
-                <span>Serve this page at <code>/</code> (home page)</span>
-              )}
-            </label>
-          )}
+            {postLike && (
+              <label className="pe-field">
+                <span>Tags</span>
+                <TagInput tags={meta.tags} suggestions={tagSuggestions} onChange={(tags) => setMeta({ tags })} />
+              </label>
+            )}
 
-          {templates.length > 0 && (
-            <label className="pe-field">
-              <span>Template <em className="pe-check-hint">from the active theme</em></span>
-              <select value={meta.template} onChange={(e) => setMeta({ template: e.target.value })}>
-                <option value="">Default</option>
-                {templates.map((t) => (
-                  <option key={t} value={t}>{t}</option>
-                ))}
-              </select>
-            </label>
-          )}
+            {kind === 'post' && authors.length > 0 && (
+              <div className="pe-field">
+                <span>Authors <em>first is the byline</em></span>
+                <div className="pe-authors">
+                  {authors.map((a) => {
+                    const checked = meta.authorIds.includes(a.id);
+                    return (
+                      <label key={a.id} className={`pe-author ${checked ? 'is-on' : ''}`}>
+                        <input
+                          type="checkbox"
+                          checked={checked}
+                          onChange={(e) =>
+                            setMeta({
+                              authorIds: e.target.checked
+                                ? [...meta.authorIds, a.id]
+                                : meta.authorIds.filter((id) => id !== a.id),
+                            })
+                          }
+                        />
+                        <i aria-hidden="true">{a.name.slice(0, 1).toUpperCase()}</i>
+                        <span>{a.name}</span>
+                        {checked && meta.authorIds[0] === a.id && meta.authorIds.length > 1 && <em>Primary</em>}
+                      </label>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
 
-          {kind === 'post' && (
-            <>
+            {kind === 'post' && Object.keys(CONTENT.collections).length > 1 && (
               <label className="pe-field">
-                <span>Publish date</span>
-                <input
-                  type="datetime-local"
-                  value={tsToLocal(meta.publishedAt)}
-                  onChange={(e) => setMeta({ publishedAt: localToTs(e.target.value) })}
-                />
+                <span>Collection</span>
+                <select value={meta.collection} onChange={(e) => setMeta({ collection: e.target.value })}>
+                  {Object.entries(CONTENT.collections).map(([k, c]) => (
+                    <option key={k} value={k}>{c.plural}</option>
+                  ))}
+                </select>
+                {meta.status === 'published' && (
+                  <em className="hint">Moving a published {noun} leaves a redirect at its old URL.</em>
+                )}
               </label>
+            )}
 
+            {kind === 'page' && I18N.enabled && (
               <label className="pe-field">
-                <span>Tags</span>
-                <TagInput tags={meta.tags} suggestions={tagSuggestions} onChange={(tags) => setMeta({ tags })} />
+                <span>Language</span>
+                <select value={meta.locale || I18N.defaultLocale} onChange={(e) => setMeta({ locale: e.target.value })}>
+                  {I18N.locales.map((l) => (
+                    <option key={l} value={l}>{l.toUpperCase()}{l === I18N.defaultLocale ? ' — default' : ''}</option>
+                  ))}
+                </select>
               </label>
+            )}
 
-              <label className="pe-field pe-check">
-                <input
-                  type="checkbox"
-                  checked={meta.featured}
-                  onChange={(e) => setMeta({ featured: e.target.checked })}
-                />
-                <span>Feature this post <em className="pe-check-hint">highlighted on the homepage and in featured lists</em></span>
+            {templates.length > 0 && (
+              <label className="pe-field">
+                <span>Template <em>from the active theme</em></span>
+                <select value={meta.template} onChange={(e) => setMeta({ template: e.target.value })}>
+                  <option value="">Default</option>
+                  {templates.map((t) => (
+                    <option key={t} value={t}>{t}</option>
+                  ))}
+                </select>
               </label>
+            )}
 
-              {authors.length > 0 && (
-                <div className="pe-field">
-                  <span>Authors <em className="pe-check-hint">first is the primary byline</em></span>
-                  <div className="pe-authors">
-                    {authors.map((a) => {
-                      const checked = meta.authorIds.includes(a.id);
-                      return (
-                        <label key={a.id} className="pe-check pe-author-check">
-                          <input
-                            type="checkbox"
-                            checked={checked}
-                            onChange={(e) =>
-                              setMeta({
-                                authorIds: e.target.checked
-                                  ? [...meta.authorIds, a.id]
-                                  : meta.authorIds.filter((id) => id !== a.id),
-                              })
-                            }
-                          />
-                          <span>{a.name}{checked && meta.authorIds[0] === a.id && meta.authorIds.length > 1 ? ' · primary' : ''}</span>
-                        </label>
-                      );
-                    })}
-                  </div>
+            {postLike && (
+              <label className="pe-switch-row">
+                <span><b>Feature this {noun}</b><small>Highlighted on the homepage and in featured lists</small></span>
+                <input type="checkbox" role="switch" className="pe-switch" checked={meta.featured} onChange={(e) => setMeta({ featured: e.target.checked })} />
+              </label>
+            )}
+
+            {kind === 'page' && (
+              <label className="pe-switch-row">
+                <span>
+                  <b>Use as home page</b>
+                  <small>
+                    Served at <code>{I18N.enabled ? localeHomeUrl(meta.locale) : '/'}</code>
+                    {I18N.enabled && ` (${(meta.locale || I18N.defaultLocale).toUpperCase()})`}
+                  </small>
+                </span>
+                <input type="checkbox" role="switch" className="pe-switch" checked={meta.isHome} onChange={(e) => setMeta({ isHome: e.target.checked })} />
+              </label>
+            )}
+          </section>
+
+          {kind === 'event' && (
+            <EventPanel
+              meta={meta}
+              onChange={(patch) => setMeta(patch)}
+              calendars={calendars}
+              fields={eventFields}
+              siteTimezone={siteTimezone}
+            />
+          )}
+
+          {postLike && (
+            <section className="pe-sb-section">
+              <h3 className="pe-sb-title">Feature image &amp; excerpt</h3>
+              <div className="pe-sb-image">
+                {meta.cover ? <img src={meta.cover} alt="" /> : <span className="pe-sb-image-empty" aria-hidden="true" />}
+                <div className="pe-sb-image-actions">
+                  <button type="button" className="pe-btn sm" onClick={() => setPicker('feature')}>{meta.cover ? 'Change' : 'Add image'}</button>
+                  {meta.cover && <button type="button" className="pe-btn ghost sm" onClick={() => setMeta({ cover: '', coverAlt: '' })}>Remove</button>}
                 </div>
+              </div>
+              {meta.cover && (
+                <label className="pe-field">
+                  <span>Alt text</span>
+                  <input type="text" placeholder="Describe the image for screen readers" value={meta.coverAlt} onChange={(e) => setMeta({ coverAlt: e.target.value })} />
+                </label>
               )}
-
               <label className="pe-field">
-                <span>Excerpt <em>{meta.excerpt.length}/300</em></span>
+                <span>Excerpt <em>{meta.excerpt.length} / 300</em></span>
                 <textarea
                   rows={3}
                   maxLength={300}
-                  placeholder="A short teaser shown on the blog index and in link previews"
+                  placeholder="A short teaser for post cards and link previews"
                   value={meta.excerpt}
                   onChange={(e) => setMeta({ excerpt: e.target.value })}
                 />
               </label>
-
-              <div className="pe-field">
-                <span>Feature image alt</span>
-                <input
-                  type="text"
-                  placeholder="Describe the feature image"
-                  value={meta.coverAlt}
-                  onChange={(e) => setMeta({ coverAlt: e.target.value })}
-                />
-              </div>
-            </>
+            </section>
           )}
 
-          <details className="pe-seo">
-            <summary>Search engine optimization</summary>
-            <label className="pe-field">
-              <span>Meta title <em>{(meta.seoTitle || meta.title).length}/60</em></span>
-              <input type="text" placeholder={meta.title} value={meta.seoTitle} onChange={(e) => setMeta({ seoTitle: e.target.value })} />
-            </label>
-            <label className="pe-field">
-              <span>Meta description <em>{(meta.seoDesc || meta.excerpt).length}/160</em></span>
-              <textarea rows={3} placeholder={meta.excerpt} value={meta.seoDesc} onChange={(e) => setMeta({ seoDesc: e.target.value })} />
-            </label>
-          </details>
+          <section className="pe-sb-section">
+            <h3 className="pe-sb-title">Search &amp; social</h3>
+            <button type="button" className="pe-sb-serp" onClick={() => { setPreviewView('search'); setPreviewOpen(true); }}>
+              <small>{(site.url || (typeof location !== 'undefined' ? location.origin : '')).replace(/^https?:\/\//, '').replace(/\/+$/, '')}{publicPath(meta)}</small>
+              <b>{meta.seoTitle || meta.title || 'Untitled'}</b>
+              <span>{meta.seoDesc || meta.excerpt || 'No description yet — search engines will use the first paragraph.'}</span>
+              <em>Edit search &amp; social preview →</em>
+            </button>
+          </section>
 
-          <div className="pe-danger">
+          <section className="pe-sb-section pe-sb-danger">
             <button
               type="button"
               className="pe-btn danger sm"
               onClick={async () => {
                 if (!window.confirm(`Delete this ${noun} permanently? This cannot be undone.`)) return;
                 if (kind === 'page') await actions.pages.delete({ id: docId });
+                else if (kind === 'event') await actions.events.delete({ id: docId });
                 else await actions.posts.delete({ id: docId });
+                leavingRef.current = true;
                 location.href = listHref;
               }}
             >
               Delete {noun}
             </button>
-          </div>
+          </section>
         </aside>
       )}
 
+      {leaveOpen && (() => {
+        const reason = leaveReason() ?? 'draft';
+        const live = reason === 'live';
+        const failed = saveState === 'error';
+        return (
+          <div className="pe-leave-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget && !leaveBusy) setLeaveOpen(null); }}>
+            <div className="pe-leave" role="alertdialog" aria-modal="true" aria-labelledby="pe-leave-title" aria-describedby="pe-leave-desc">
+              <h2 id="pe-leave-title">{live ? 'Your changes aren’t live yet' : `Leave this ${noun}?`}</h2>
+              <p id="pe-leave-desc">
+                {live
+                  ? `The live ${noun} still shows the old version. Your edits are saved privately.`
+                  : `Your edits are saved, and the ${noun} is still an unpublished draft.`}
+              </p>
+              {failed && <p className="pe-leave-error">Saving failed — check your connection before leaving.</p>}
+              <div className="pe-leave-actions">
+                {live ? (
+                  <>
+                    <button type="button" className="pe-btn primary pe-leave-cta" autoFocus disabled={!!leaveBusy} onClick={() => leaveWith('update')}>
+                      {leaveBusy || (meta.status === 'scheduled' ? 'Update scheduled version & leave' : 'Update & leave')}
+                    </button>
+                    <button type="button" className="pe-pop-item" disabled={!!leaveBusy} onClick={() => leaveWith('keep')}>
+                      <b>Leave, keep as draft</b><span>Edits stay private until you press Update</span>
+                    </button>
+                    <button type="button" className="pe-pop-item pe-leave-danger" disabled={!!leaveBusy} onClick={() => leaveWith('discard')}>
+                      <b>Discard changes & leave</b><span>Go back to the live version</span>
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <button type="button" className="pe-btn primary pe-leave-cta" autoFocus disabled={!!leaveBusy} onClick={() => leaveWith('keep')}>
+                      {leaveBusy || 'Leave, keep as draft'}
+                    </button>
+                    <button type="button" className="pe-pop-item" disabled={!!leaveBusy} onClick={() => leaveWith('publish')}>
+                      <b>Publish & leave</b><span>Put it live on the site now</span>
+                    </button>
+                    <button type="button" className="pe-pop-item pe-leave-danger" disabled={!!leaveBusy} onClick={() => leaveWith('undo')}>
+                      <b>Undo my changes & leave</b><span>Back to how it was when you opened it</span>
+                    </button>
+                  </>
+                )}
+                <button type="button" className="pe-btn ghost pe-leave-cta" disabled={!!leaveBusy} onClick={() => setLeaveOpen(null)}>
+                  Keep editing
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+
       <ImagePicker
         open={picker !== 'closed'}
         unsplashEnabled={unsplashEnabled}
@@ -957,8 +1499,21 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
         open={previewOpen}
         url={previewPath}
         shareUrl={sharePath}
+        meta={previewMeta}
+        site={site}
+        isPost={postLike}
+        startView={previewView}
+        onChange={setMeta}
+        onPickCover={() => setPicker('feature')}
         onClose={() => setPreviewOpen(false)}
       />
+      {editor && (
+        <MobileToolbar
+          editor={editor}
+          onLink={openLinkEdit}
+          onImage={() => setPicker('editor')}
+        />
+      )}
     </div>
   );
 }