release: v0.17.0 (#677)

See CHANGELOG.md, section [0.17.0] — 2026-09-23.

app/admin/components/BlockBadge.tsx

@@ -1,7 +1,17 @@
 'use client';
 
 import type { JournalBlock } from '@/lib/journal';
-import { IconFileText, IconSparkles, IconQuote, IconCamera, IconArrowLeftRight } from './Icons';
+import {
+  IconFileText,
+  IconSparkles,
+  IconQuote,
+  IconCamera,
+  IconArrowLeftRight,
+  IconGrid,
+  IconColumns,
+  IconMap,
+  IconFolder,
+} from './Icons';
 
 type BlockType = JournalBlock['type'];
 
@@ -19,6 +29,10 @@ const BLOCK_META: Record<BlockType, { label: string; Icon: typeof IconFileText }
   quote: { label: 'Quote', Icon: IconQuote },
   photo: { label: 'Photo', Icon: IconCamera },
   'photo-pair': { label: 'Photo Pair', Icon: IconArrowLeftRight },
+  'photo-grid': { label: 'Photo Grid', Icon: IconGrid },
+  facts: { label: 'Facts', Icon: IconColumns },
+  map: { label: 'Map', Icon: IconMap },
+  album: { label: 'Album', Icon: IconFolder },
 };
 
 interface BlockBadgeProps {

app/admin/components/DraftNotice.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import type { DraftStatus } from './useDraft';
+
+interface DraftNoticeProps {
+  status: DraftStatus;
+  /** What the draft belongs to, e.g. "page structure" or "entry". */
+  subject: string;
+  onDiscard: () => void;
+  onRestore: () => void;
+  onDismiss: () => void;
+}
+
+/**
+ * Tells the operator that unsaved edits came back — or could not come back on
+ * their own (#592). A restored draft must never look like the saved state: it
+ * is still unsaved, and the save bar says so, but without this line the edits
+ * would simply be there with no hint of where they came from.
+ */
+export default function DraftNotice({
+  status,
+  subject,
+  onDiscard,
+  onRestore,
+  onDismiss,
+}: DraftNoticeProps) {
+  if (status === 'none') return null;
+
+  return (
+    <div className="admin-notice draft-notice" role="status">
+      {status === 'restored' ? (
+        <>
+          <span>Your unsaved changes to the {subject} were restored. They are not saved yet.</span>
+          <span className="draft-notice-actions">
+            <button type="button" className="admin-btn admin-btn-xs" onClick={onDiscard}>
+              Discard changes
+            </button>
+            <button type="button" className="admin-btn admin-btn-xs" onClick={onDismiss}>
+              OK
+            </button>
+          </span>
+        </>
+      ) : (
+        <>
+          <span>
+            You have unsaved changes to the {subject} from earlier, but it was saved elsewhere
+            since. Restoring them replaces that version when you save.
+          </span>
+          <span className="draft-notice-actions">
+            <button type="button" className="admin-btn admin-btn-xs" onClick={onRestore}>
+              Restore my changes
+            </button>
+            <button type="button" className="admin-btn admin-btn-xs" onClick={onDiscard}>
+              Discard them
+            </button>
+          </span>
+        </>
+      )}
+    </div>
+  );
+}

app/admin/components/PageBuilder.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import {
   DndContext,
   closestCenter,
@@ -41,6 +41,8 @@ import {
 } from './page-builder/types';
 import { useScrollLock } from './useScrollLock';
 import { useUnsavedGuard } from './useUnsavedGuard';
+import { useDraft } from './useDraft';
+import DraftNotice from './DraftNotice';
 import { reportIfSessionExpired } from './sessionExpiry';
 import {
   IconCamera,
@@ -273,6 +275,11 @@ export default function PageBuilder() {
 
   useUnsavedGuard(dirty);
 
+  // Unsaved edits survive leaving the builder — a tab link, back, Reload,
+  // Logout (#592). `serverState` is what a discard goes back to.
+  const draft = useDraft<GalleryState>('page-builder', gallery, dirty);
+  const serverState = useRef<GalleryState | null>(null);
+
   // A subpage opened from a `?album=` link can hold dozens of albums: bring the
   // linked one into view, and let the mark fade after a moment. The mark itself
   // is a prop on the tile — a class added to the DOM here would be wiped by the
@@ -312,8 +319,11 @@ export default function PageBuilder() {
 
       const { gallery: raw } = await galleryRes.json();
       const parsed = parseGalleryYaml(raw);
-      setGallery(parsed);
-      openAlbumFromLink(parsed);
+      serverState.current = parsed;
+      const restored = draft.load(JSON.stringify(parsed));
+      setGallery(restored ?? parsed);
+      if (restored) setDirty(true);
+      openAlbumFromLink(restored ?? parsed);
 
       // A failed album list is survivable — it only empties the picker, and
       // saving with it empty changes nothing in gallery.yaml.
@@ -418,6 +428,20 @@ export default function PageBuilder() {
     return { hero, albums, subpages };
   }
 
+  function discardDraft() {
+    draft.discard();
+    if (serverState.current) setGallery(serverState.current);
+    setDirty(false);
+    setSaveMessage('');
+  }
+
+  function restoreConflictingDraft() {
+    const value = draft.takeConflicting();
+    if (!value) return;
+    setGallery(value);
+    setDirty(true);
+  }
+
   const markDirty = useCallback(() => {
     setDirty(true);
     setSaveMessage('');
@@ -482,6 +506,13 @@ export default function PageBuilder() {
 
       if (res.ok) {
         const data = await res.json();
+        // Fingerprint what the next load will see, the way it will see it: the
+        // file is exactly `yamlData`, read back through the same parser. The
+        // editor's own state can differ in shape (an `undefined` here, a
+        // default there) and would make every later draft look outdated.
+        const asLoaded = parseGalleryYaml(JSON.parse(JSON.stringify(yamlData)));
+        serverState.current = asLoaded;
+        draft.saved(JSON.stringify(asLoaded));
         setDirty(false);
         setSaveMessage(data.message || 'Saved successfully!');
         setTimeout(() => setSaveMessage(''), 5000);
@@ -850,6 +881,14 @@ export default function PageBuilder() {
         showPreview
       />
 
+      <DraftNotice
+        status={draft.status}
+        subject="page structure"
+        onDiscard={discardDraft}
+        onRestore={restoreConflictingDraft}
+        onDismiss={draft.dismiss}
+      />
+
       {/* Search Bar */}
       <div className="builder-search-container">
         <div className="builder-search-wrapper">

app/admin/components/SortableBlocks.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+/**
+ * Drag-and-drop ordering for the block editors (Journal Studio and the
+ * PageBuilder's essay editor), on the same dnd-kit setup as the photo order
+ * editor. Blocks have no identity of their own and both editors key them by
+ * position, so the sortable ids are positions too; the editors apply the
+ * move to their block array and re-render.
+ *
+ * The grip is the only activator: the cards are full of inputs, and a
+ * pointer that starts on a text field must keep selecting text. The up/down
+ * buttons stay as the keyboard alternative; the grip also takes Space and
+ * the arrow keys through dnd-kit's keyboard sensor.
+ */
+
+import { useMemo, type ReactNode } from 'react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { IconGripVertical } from './Icons';
+
+const idAt = (index: number) => `block-${index}`;
+
+interface SortableBlockListProps {
+  count: number;
+  onReorder: (from: number, to: number) => void;
+  children: ReactNode;
+}
+
+export function SortableBlockList({ count, onReorder, children }: SortableBlockListProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+  const ids = useMemo(() => Array.from({ length: count }, (_, i) => idAt(i)), [count]);
+
+  const handleDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) return;
+    const from = ids.indexOf(String(active.id));
+    const to = ids.indexOf(String(over.id));
+    if (from < 0 || to < 0) return;
+    onReorder(from, to);
+  };
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+        {children}
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+interface SortableBlockCardProps {
+  index: number;
+  badge: ReactNode;
+  actions: ReactNode;
+  children: ReactNode;
+}
+
+export function SortableBlockCard({ index, badge, actions, children }: SortableBlockCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: idAt(index) });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={`essay-block-card${isDragging ? ' is-dragging' : ''}`}
+      style={{
+        // Translate, not Transform: cards differ in height, and a scale would
+        // distort the one being carried past taller neighbours.
+        transform: CSS.Translate.toString(transform),
+        transition,
+      }}
+    >
+      <div className="essay-block-card-header">
+        <div className="essay-block-card-title">
+          <button
+            type="button"
+            ref={setActivatorNodeRef}
+            className="essay-block-grip"
+            aria-label="Drag to reorder"
+            title="Drag to reorder"
+            {...attributes}
+            {...listeners}
+          >
+            <IconGripVertical size={14} />
+          </button>
+          {badge}
+        </div>
+        {actions}
+      </div>
+      {children}
+    </div>
+  );
+}

app/admin/components/journal/BlockFields.tsx

@@ -0,0 +1,684 @@
+'use client';
+
+import type { JournalBlock, MapItem } from '@/lib/journal';
+import { isValidCoordinate } from '@/lib/journal';
+import type { AlbumAssetRef } from '@/lib/journalAlbum';
+import type AlbumPicker from '../AlbumPicker';
+import {
+  IconCamera,
+  IconChevronUp,
+  IconChevronDown,
+  IconPlus,
+  IconMap,
+  IconFolder,
+  IconX,
+} from '../Icons';
+import { isLegacyAssetRef } from './blockOps';
+
+/** What the asset picker is opened for: its title, and where the pick goes. */
+export interface AssetPickTarget {
+  title: string;
+  onSelect: (assetId: string) => void;
+}
+
+interface BlockFieldsProps {
+  block: JournalBlock;
+  onChange: (block: JournalBlock) => void;
+  onPickAsset: (target: AssetPickTarget) => void;
+  onPickAlbum: (onSelect: (albumId: string) => void) => void;
+  /** Assets of the albums referenced by album blocks, as loaded so far. */
+  albumAssets: Record<string, AlbumAssetRef[]>;
+  /** The picker's album list, once fetched — used for the album's name. */
+  albumList: Parameters<typeof AlbumPicker>[0]['albums'] | null;
+  mapEnabled?: boolean;
+}
+
+/**
+ * The form of one block in the journal editor, one branch per block type
+ * (#555). Every edit goes out through `onChange` as a whole new block; the
+ * editor owns the block list and its order.
+ */
+export function BlockFields({
+  block,
+  onChange,
+  onPickAsset,
+  onPickAlbum,
+  albumAssets,
+  albumList,
+  mapEnabled,
+}: BlockFieldsProps) {
+  return (
+    <div style={{ marginTop: '0.75rem' }}>
+      {block.type === 'heading' && (
+        <div className="journal-heading-row">
+          <select
+            aria-label="Heading level"
+            className="admin-input journal-level-select"
+            value={block.level}
+            onChange={(e) => onChange({ ...block, level: Number(e.target.value) })}
+          >
+            <option value={1}>H1</option>
+            <option value={2}>H2</option>
+            <option value={3}>H3</option>
+          </select>
+          <input
+            type="text"
+            className="admin-input"
+            value={block.text}
+            onChange={(e) => onChange({ ...block, text: e.target.value })}
+          />
+        </div>
+      )}
+
+      {block.type === 'paragraph' && (
+        <textarea
+          className="admin-input"
+          rows={3}
+          value={block.html}
+          onChange={(e) => onChange({ ...block, html: e.target.value })}
+        />
+      )}
+
+      {block.type === 'quote' && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <textarea
+            className="admin-input"
+            rows={2}
+            value={block.text}
+            placeholder="Quote text..."
+            onChange={(e) => onChange({ ...block, text: e.target.value })}
+          />
+          <input
+            type="text"
+            className="admin-input"
+            value={block.author || ''}
+            placeholder="Author attribution (optional)"
+            onChange={(e) => onChange({ ...block, author: e.target.value })}
+          />
+        </div>
+      )}
+
+      {block.type === 'photo' && isLegacyAssetRef(block.assetId) && (
+        <p className="journal-block-warning">
+          Reference &quot;{block.assetId}&quot; is a legacy album position, not a photo. It will not
+          appear on the published page — pick a photo below.
+        </p>
+      )}
+
+      {block.type === 'photo' && (
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <div
+            style={{
+              width: '140px',
+              height: '96px',
+              flexShrink: 0,
+              background: 'rgba(0,0,0,0.3)',
+              borderRadius: '6px',
+              overflow: 'hidden',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+            }}
+            onClick={() =>
+              onPickAsset({
+                title: 'Select Photo for Story',
+                onSelect: (id) => onChange({ ...block, assetId: id }),
+              })
+            }
+          >
+            {block.assetId ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={`/api/admin/thumbnail/${block.assetId}`}
+                alt="Thumb"
+                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+              />
+            ) : (
+              <span style={{ fontSize: '0.8rem', opacity: 0.6 }}>+ Pick</span>
+            )}
+          </div>
+
+          <div
+            style={{
+              flexGrow: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '6px',
+            }}
+          >
+            <div className="journal-photo-layout-row">
+              <select
+                aria-label="Photo layout"
+                className="admin-input"
+                value={block.layout}
+                onChange={(e) =>
+                  onChange({
+                    ...block,
+                    layout: e.target.value as 'contained' | 'wide' | 'fullbleed',
+                  })
+                }
+              >
+                <option value="contained">Contained (Column Width)</option>
+                <option value="wide">Wide (Expanded Width)</option>
+                <option value="fullbleed">Fullbleed (Edge to Edge)</option>
+              </select>
+              <button
+                type="button"
+                className="admin-btn admin-btn-xs"
+                onClick={() =>
+                  onPickAsset({
+                    title: 'Select Photo for Story',
+                    onSelect: (id) => onChange({ ...block, assetId: id }),
+                  })
+                }
+              >
+                Change Photo
+              </button>
+            </div>
+            <input
+              type="text"
+              className="admin-input"
+              placeholder="Caption (optional)"
+              value={block.caption || ''}
+              onChange={(e) => onChange({ ...block, caption: e.target.value })}
+            />
+          </div>
+        </div>
+      )}
+
+      {block.type === 'photo-pair' && block.assetIds.some(isLegacyAssetRef) && (
+        <p className="journal-block-warning">
+          References &quot;{block.assetIds.filter(isLegacyAssetRef).join('", "')}
+          &quot; are legacy album positions, not photos. They will not appear on the published page
+          — pick photos below.
+        </p>
+      )}
+
+      {block.type === 'photo-pair' && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr',
+              gap: '1rem',
+            }}
+          >
+            {[0, 1].map((pIdx) => (
+              <div
+                key={pIdx}
+                style={{
+                  height: '90px',
+                  background: 'rgba(0,0,0,0.3)',
+                  borderRadius: '6px',
+                  overflow: 'hidden',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                  border: '1px dashed rgba(255,255,255,0.15)',
+                }}
+                onClick={() =>
+                  onPickAsset({
+                    title: `Select Photo #${pIdx + 1} for Pair`,
+                    onSelect: (id) => {
+                      const newIds = [...block.assetIds] as [string, string];
+                      newIds[pIdx] = id;
+                      onChange({ ...block, assetIds: newIds });
+                    },
+                  })
+                }
+              >
+                {block.assetIds[pIdx] ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={`/api/admin/thumbnail/${block.assetIds[pIdx]}`}
+                    alt="Thumb"
+                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                  />
+                ) : (
+                  <span style={{ fontSize: '0.8rem', opacity: 0.6 }}>+ Pick Photo #{pIdx + 1}</span>
+                )}
+              </div>
+            ))}
+          </div>
+          <input
+            type="text"
+            className="admin-input"
+            placeholder="Shared caption for pair (optional)"
+            value={block.caption || ''}
+            onChange={(e) => onChange({ ...block, caption: e.target.value })}
+          />
+        </div>
+      )}
+
+      {block.type === 'photo-grid' && block.assetIds.some(isLegacyAssetRef) && (
+        <p className="journal-block-warning">
+          References &quot;{block.assetIds.filter(isLegacyAssetRef).join('", "')}
+          &quot; are legacy album positions, not photos. They will not appear on the published page
+          — pick photos below.
+        </p>
+      )}
+
+      {block.type === 'photo-grid' && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div className="journal-grid-tiles">
+            {block.assetIds.map((assetId, pIdx) => (
+              <div key={pIdx} className="journal-grid-tile">
+                <div
+                  className="journal-grid-tile-pick"
+                  onClick={() =>
+                    onPickAsset({
+                      title: `Select Photo #${pIdx + 1} for Grid`,
+                      onSelect: (id) => {
+                        const newIds = [...block.assetIds];
+                        newIds[pIdx] = id;
+                        onChange({ ...block, assetIds: newIds });
+                      },
+                    })
+                  }
+                >
+                  {assetId ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={`/api/admin/thumbnail/${assetId}`} alt="Thumb" />
+                  ) : (
+                    <span>+ Pick #{pIdx + 1}</span>
+                  )}
+                </div>
+                {block.assetIds.length > 3 && (
+                  <button
+                    type="button"
+                    className="admin-btn admin-btn-xs journal-grid-tile-remove"
+                    aria-label={`Remove photo #${pIdx + 1}`}
+                    onClick={() =>
+                      onChange({
+                        ...block,
+                        assetIds: block.assetIds.filter((_, i) => i !== pIdx),
+                      })
+                    }
+                  >
+                    <IconX size={11} />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+          <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+            <button
+              type="button"
+              className="admin-btn admin-btn-xs"
+              onClick={() =>
+                onChange({
+                  ...block,
+                  assetIds: [...block.assetIds, ''],
+                })
+              }
+            >
+              <IconPlus size={12} /> Add photo
+            </button>
+            <span style={{ fontSize: '0.75rem', opacity: 0.6 }}>
+              Three or more photos, laid out in rows of three.
+            </span>
+          </div>
+          <input
+            type="text"
+            className="admin-input"
+            placeholder="Shared caption for grid (optional)"
+            value={block.caption || ''}
+            onChange={(e) => onChange({ ...block, caption: e.target.value })}
+          />
+        </div>
+      )}
+
+      {block.type === 'facts' && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {block.items.map((item, fIdx) => (
+            <div key={fIdx} className="journal-facts-row">
+              <input
+                type="text"
+                className="admin-input"
+                placeholder="Label, e.g. Distance"
+                value={item.label}
+                onChange={(e) =>
+                  onChange({
+                    ...block,
+                    items: block.items.map((it, i) =>
+                      i === fIdx ? { ...it, label: e.target.value } : it,
+                    ),
+                  })
+                }
+              />
+              <input
+                type="text"
+                className="admin-input"
+                placeholder="Value, e.g. 21 km"
+                value={item.value}
+                onChange={(e) =>
+                  onChange({
+                    ...block,
+                    items: block.items.map((it, i) =>
+                      i === fIdx ? { ...it, value: e.target.value } : it,
+                    ),
+                  })
+                }
+              />
+              <button
+                type="button"
+                className="admin-btn admin-btn-xs"
+                aria-label={`Remove fact #${fIdx + 1}`}
+                disabled={block.items.length <= 1}
+                onClick={() =>
+                  onChange({
+                    ...block,
+                    items: block.items.filter((_, i) => i !== fIdx),
+                  })
+                }
+              >
+                <IconX size={11} />
+              </button>
+            </div>
+          ))}
+          <div>
+            <button
+              type="button"
+              className="admin-btn admin-btn-xs"
+              onClick={() =>
+                onChange({
+                  ...block,
+                  items: [...block.items, { label: '', value: '' }],
+                })
+              }
+            >
+              <IconPlus size={12} /> Add fact
+            </button>
+          </div>
+        </div>
+      )}
+
+      {block.type === 'album' && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div className="journal-album-row">
+            <button
+              type="button"
+              className="admin-btn admin-btn-xs admin-btn-primary"
+              onClick={() => onPickAlbum((albumId) => onChange({ ...block, albumId }))}
+            >
+              <IconFolder size={12} />{' '}
+              {block.albumId
+                ? (albumList?.find((a) => a.id === block.albumId)?.albumName ?? 'Change album')
+                : 'Pick album'}
+            </button>
+            {block.albumId && (
+              <span style={{ fontSize: '0.75rem', opacity: 0.6 }}>
+                {albumAssets[block.albumId]
+                  ? `${albumAssets[block.albumId].length} photos in album`
+                  : 'loading…'}
+              </span>
+            )}
+          </div>
+          <div className="journal-album-row">
+            <label className="journal-album-field">
+              Count
+              <input
+                type="number"
+                min={1}
+                className="admin-input"
+                placeholder="all"
+                value={block.count ?? ''}
+                onChange={(e) =>
+                  onChange({
+                    ...block,
+                    count: e.target.value ? Number(e.target.value) : undefined,
+                  })
+                }
+              />
+            </label>
+            <label className="journal-album-field">
+              Skip
+              <input
+                type="number"
+                min={0}
+                className="admin-input"
+                placeholder="0"
+                value={block.skip ?? ''}
+                onChange={(e) =>
+                  onChange({
+                    ...block,
+                    skip: e.target.value ? Number(e.target.value) : undefined,
+                  })
+                }
+              />
+            </label>
+            <label className="journal-album-field">
+              Layout
+              <select
+                className="admin-input"
+                value={block.layout}
+                onChange={(e) =>
+                  onChange({
+                    ...block,
+                    layout: e.target.value as 'grid' | 'pairs' | 'wide',
+                  })
+                }
+              >
+                <option value="grid">Grid (rows of three)</option>
+                <option value="pairs">Pairs (rows of two)</option>
+                <option value="wide">Wide (one per row)</option>
+              </select>
+            </label>
+          </div>
+          <input
+            type="text"
+            className="admin-input"
+            placeholder="Caption for the set (optional)"
+            value={block.caption || ''}
+            onChange={(e) =>
+              onChange({
+                ...block,
+                caption: e.target.value || undefined,
+              })
+            }
+          />
+          <span style={{ fontSize: '0.75rem', opacity: 0.6 }}>
+            Photos follow the album&apos;s order (a manual order in the gallery comes first). Count
+            and skip pick a slice; leave count empty for all.
+          </span>
+        </div>
+      )}
+
+      {block.type === 'map' && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {mapEnabled === false && (
+            <p className="journal-block-warning">
+              The map is switched off in Settings → General. This block will not render until it is
+              enabled.
+            </p>
+          )}
+          <input
+            type="text"
+            className="admin-input"
+            placeholder="Caption, e.g. Busan → Seoul (optional)"
+            value={block.caption || ''}
+            onChange={(e) => onChange({ ...block, caption: e.target.value })}
+          />
+
+          {block.items.map((item, mIdx) => {
+            const setItem = (next: MapItem) =>
+              onChange({
+                ...block,
+                items: block.items.map((it, i) => (i === mIdx ? next : it)),
+              });
+            const move = (dir: -1 | 1) => {
+              const items = [...block.items];
+              const target = mIdx + dir;
+              if (target < 0 || target >= items.length) return;
+              [items[mIdx], items[target]] = [items[target], items[mIdx]];
+              onChange({ ...block, items });
+            };
+            return (
+              <div key={mIdx} className="journal-map-row">
+                <span className="journal-map-index">{mIdx + 1}</span>
+                {item.kind === 'point' && (
+                  <>
+                    <input
+                      type="text"
+                      className="admin-input"
+                      placeholder="Label (optional)"
+                      value={item.label ?? ''}
+                      onChange={(e) => setItem({ ...item, label: e.target.value || undefined })}
+                    />
+                    <input
+                      type="number"
+                      step="any"
+                      className="admin-input journal-map-coord"
+                      placeholder="Lat"
+                      aria-label="Latitude"
+                      value={Number.isFinite(item.lat) ? item.lat : ''}
+                      onChange={(e) => setItem({ ...item, lat: parseFloat(e.target.value) })}
+                    />
+                    <input
+                      type="number"
+                      step="any"
+                      className="admin-input journal-map-coord"
+                      placeholder="Lng"
+                      aria-label="Longitude"
+                      value={Number.isFinite(item.lng) ? item.lng : ''}
+                      onChange={(e) => setItem({ ...item, lng: parseFloat(e.target.value) })}
+                    />
+                  </>
+                )}
+                {item.kind === 'photo' && (
+                  <div
+                    className="journal-map-photo"
+                    onClick={() =>
+                      onPickAsset({
+                        title: 'Select a photo to place on the map',
+                        onSelect: (id) => setItem({ kind: 'photo', assetId: id }),
+                      })
+                    }
+                  >
+                    {item.assetId ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img src={`/api/admin/thumbnail/${item.assetId}`} alt="Thumb" />
+                    ) : (
+                      <span>+ Pick photo</span>
+                    )}
+                  </div>
+                )}
+                {item.kind === 'all-photos' && (
+                  <span className="journal-map-all">
+                    All geotagged photos of this entry, in order
+                  </span>
+                )}
+                <div className="essay-block-actions">
+                  <button
+                    type="button"
+                    className="admin-btn admin-btn-xs"
+                    disabled={mIdx === 0}
+                    aria-label="Move pin up"
+                    onClick={() => move(-1)}
+                  >
+                    <IconChevronUp size={12} />
+                  </button>
+                  <button
+                    type="button"
+                    className="admin-btn admin-btn-xs"
+                    disabled={mIdx === block.items.length - 1}
+                    aria-label="Move pin down"
+                    onClick={() => move(1)}
+                  >
+                    <IconChevronDown size={12} />
+                  </button>
+                  <button
+                    type="button"
+                    className="admin-btn admin-btn-xs admin-btn-danger"
+                    aria-label="Remove pin"
+                    onClick={() =>
+                      onChange({
+                        ...block,
+                        items: block.items.filter((_, i) => i !== mIdx),
+                      })
+                    }
+                  >
+                    <IconX size={11} />
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+
+          {block.items.some((it) => it.kind === 'point' && !isValidCoordinate(it.lat, it.lng)) && (
+            <p className="journal-block-warning">
+              A point needs a latitude within ±90 and a longitude within ±180. Points without valid
+              coordinates are not saved.
+            </p>
+          )}
+
+          <div
+            style={{
+              display: 'flex',
+              gap: '8px',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+            }}
+          >
+            <button
+              type="button"
+              className="admin-btn admin-btn-xs"
+              onClick={() =>
+                onChange({
+                  ...block,
+                  items: [...block.items, { kind: 'point', lat: Number.NaN, lng: Number.NaN }],
+                })
+              }
+            >
+              <IconPlus size={12} /> Point
+            </button>
+            <button
+              type="button"
+              className="admin-btn admin-btn-xs"
+              onClick={() =>
+                onPickAsset({
+                  title: 'Select a photo to place on the map',
+                  onSelect: (id) =>
+                    onChange({
+                      ...block,
+                      items: [...block.items, { kind: 'photo', assetId: id }],
+                    }),
+                })
+              }
+            >
+              <IconCamera size={12} /> Photo pin
+            </button>
+            <button
+              type="button"
+              className="admin-btn admin-btn-xs"
+              disabled={block.items.some((it) => it.kind === 'all-photos')}
+              onClick={() =>
+                onChange({
+                  ...block,
+                  items: [...block.items, { kind: 'all-photos' }],
+                })
+              }
+            >
+              <IconMap size={12} /> All geotagged photos
+            </button>
+            <label className="journal-map-line-toggle">
+              <input
+                type="checkbox"
+                checked={block.line}
+                onChange={(e) => onChange({ ...block, line: e.target.checked })}
+              />
+              Connect pins with a line
+            </label>
+          </div>
+
+          <span style={{ fontSize: '0.75rem', opacity: 0.6 }}>
+            Typed points show in the preview right away. Photo pins are placed on the live page from
+            the photo&apos;s GPS, under the album&apos;s location precision.
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

app/admin/components/journal/JournalEditor.tsx

@@ -0,0 +1,607 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import type { ParsedJournal, JournalBlock } from '@/lib/journal';
+import { parseJournalMarkdown, serializeJournalMarkdown, collectAssetIds } from '@/lib/journal';
+import {
+  IconFileText,
+  IconSparkles,
+  IconQuote,
+  IconCamera,
+  IconArrowLeftRight,
+  IconTrash,
+  IconChevronUp,
+  IconChevronDown,
+  IconGear,
+  IconLink,
+  IconCheck,
+  IconGrid,
+  IconColumns,
+  IconMap,
+  IconFolder,
+} from '../Icons';
+import AssetPicker from '../AssetPicker';
+import AlbumPicker from '../AlbumPicker';
+import { SortableBlockList, SortableBlockCard } from '../SortableBlocks';
+import { arrayMove } from '@dnd-kit/sortable';
+import type { AlbumAssetRef } from '@/lib/journalAlbum';
+import { BlockBadge } from '../BlockBadge';
+import { useUnsavedGuard } from '../useUnsavedGuard';
+import { useDraft } from '../useDraft';
+import DraftNotice from '../DraftNotice';
+import { reportIfSessionExpired } from '../sessionExpiry';
+import './journal-studio.css';
+import { BlockFields, type AssetPickTarget } from './BlockFields';
+import { StorySettingsModal } from './StorySettingsModal';
+import { JournalPreview } from './JournalPreview';
+import { createBlock, moveBlock } from './blockOps';
+import { useSplitPane, SPLIT_MIN, SPLIT_MAX } from './splitPane';
+
+interface JournalEditorProps {
+  slug: string;
+  mapEnabled?: boolean;
+  onBack: () => void;
+}
+
+export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps) {
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [dirty, setDirty] = useState(false);
+  const [editorMode, setEditorMode] = useState<'blocks' | 'markdown'>('blocks');
+
+  // Draggable divider between authoring pane and preview.
+  const {
+    splitRef,
+    splitPct,
+    dragging,
+    onResizerMouseDown,
+    onResizerDoubleClick,
+    onResizerKeyDown,
+  } = useSplitPane();
+
+  const [rawMarkdown, setRawMarkdown] = useState('');
+  const [parsed, setParsed] = useState<ParsedJournal>(() => ({
+    frontmatter: {},
+    blocks: [],
+    referencedAssetIds: [],
+  }));
+
+  // Settings / Metadata Modal
+  const [showMetaModal, setShowMetaModal] = useState(false);
+
+  // Asset Picker State
+  const [assetPickerTarget, setAssetPickerTarget] = useState<AssetPickTarget | null>(null);
+
+  /** Set when the entry could not be fetched; blocks saving over it. */
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  // Unsaved edits survive leaving the editor — the entry list, a tab link,
+  // back, Reload (#592). The markdown is the whole entry; blocks and
+  // frontmatter are parsed from it. `serverMarkdown` is what a discard restores.
+  const draft = useDraft<string>(`journal-${slug}`, rawMarkdown, dirty);
+  const loadDraft = draft.load;
+  const serverMarkdown = useRef('');
+
+  // Load entry
+  useEffect(() => {
+    async function load() {
+      setLoading(true);
+      setLoadError(null);
+      try {
+        const res = await fetch(`/api/admin/journal/${slug}`);
+        if (!res.ok) {
+          throw new Error(
+            res.status === 401
+              ? 'Your session has expired. Sign in again to continue.'
+              : `The server answered ${res.status}.`,
+          );
+        }
+        const data = await res.json();
+        const md: string = data.entry.rawMarkdown;
+        serverMarkdown.current = md;
+        const restored = loadDraft(md);
+        setRawMarkdown(restored ?? md);
+        setParsed(parseJournalMarkdown(restored ?? md));
+        setDirty(restored !== null);
+      } catch (err) {
+        console.error('Failed to load journal entry:', err);
+        // An empty editor saved over the entry replaces it with nothing, so
+        // this blocks the save rather than only reporting it.
+        setLoadError(err instanceof Error ? err.message : 'The entry could not be loaded.');
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, [slug, loadDraft]);
+
+  // Update markdown and sync blocks
+  const handleMarkdownChange = (newMd: string) => {
+    setRawMarkdown(newMd);
+    setParsed(parseJournalMarkdown(newMd));
+    setDirty(true);
+  };
+
+  // Update structured blocks and sync markdown
+  const handleBlocksChange = (newBlocks: JournalBlock[]) => {
+    const updated: ParsedJournal = {
+      ...parsed,
+      blocks: newBlocks,
+      referencedAssetIds: collectAssetIds(newBlocks),
+    };
+    const serialized = serializeJournalMarkdown(updated);
+    setParsed(updated);
+    setRawMarkdown(serialized);
+    setDirty(true);
+  };
+
+  // Update frontmatter
+  const handleFrontmatterChange = (updates: Partial<ParsedJournal['frontmatter']>) => {
+    const updated: ParsedJournal = {
+      ...parsed,
+      frontmatter: {
+        ...parsed.frontmatter,
+        ...updates,
+      },
+    };
+    const serialized = serializeJournalMarkdown(updated);
+    setParsed(updated);
+    setRawMarkdown(serialized);
+    setDirty(true);
+  };
+
+  // Save
+  const handleSave = async () => {
+    // The editor is not rendered in this state, but Cmd+S still reaches here.
+    if (loadError) return;
+
+    setSaving(true);
+    try {
+      const res = await fetch(`/api/admin/journal/${slug}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          rawMarkdown,
+        }),
+      });
+
+      if (res.ok) {
+        serverMarkdown.current = rawMarkdown;
+        draft.saved(rawMarkdown);
+        setDirty(false);
+      } else if (!reportIfSessionExpired(res)) {
+        const data = await res.json();
+        alert(data.error || 'Failed to save');
+      }
+    } catch {
+      alert('Error saving entry');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  useUnsavedGuard(dirty);
+
+  const discardDraft = () => {
+    draft.discard();
+    setRawMarkdown(serverMarkdown.current);
+    setParsed(parseJournalMarkdown(serverMarkdown.current));
+    setDirty(false);
+  };
+
+  const restoreConflictingDraft = () => {
+    const value = draft.takeConflicting();
+    if (value === null) return;
+    setRawMarkdown(value);
+    setParsed(parseJournalMarkdown(value));
+    setDirty(true);
+  };
+
+  // Keyboard shortcut: Cmd+S / Ctrl+S
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault();
+        handleSave();
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [handleSave]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /*
+   * Album blocks are expanded for the preview the way the page expands them,
+   * from the admin assets route; until an album has loaded its block simply
+   * does not render. The picker's album list is fetched on first use.
+   */
+  const [albumAssets, setAlbumAssets] = useState<Record<string, AlbumAssetRef[]>>({});
+  const albumRequested = useRef(new Set<string>());
+  const [albumList, setAlbumList] = useState<Parameters<typeof AlbumPicker>[0]['albums'] | null>(
+    null,
+  );
+  const [albumPickerTarget, setAlbumPickerTarget] = useState<((albumId: string) => void) | null>(
+    null,
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    for (const block of parsed.blocks) {
+      if (block.type !== 'album' || !block.albumId || albumRequested.current.has(block.albumId))
+        continue;
+      const albumId = block.albumId;
+      albumRequested.current.add(albumId);
+      fetch(`/api/admin/albums/${albumId}/assets?types=all`)
+        .then((res) => (res.ok ? res.json() : Promise.reject(new Error(String(res.status)))))
+        .then((data: { assets: AlbumAssetRef[] }) => {
+          if (!cancelled) setAlbumAssets((prev) => ({ ...prev, [albumId]: data.assets }));
+        })
+        .catch(() => {
+          // Let a retry happen after a save or a re-pick.
+          albumRequested.current.delete(albumId);
+        });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [parsed.blocks]);
+
+  const openAlbumPicker = (onSelect: (albumId: string) => void) => {
+    setAlbumPickerTarget(() => onSelect);
+    if (albumList === null) {
+      fetch('/api/admin/albums')
+        .then((res) => res.json())
+        .then((data) => setAlbumList(data.albums ?? []))
+        .catch(() => setAlbumList([]));
+    }
+  };
+
+  // Block manipulation
+  const handleAddBlock = (type: JournalBlock['type']) => {
+    handleBlocksChange([...parsed.blocks, createBlock(type)]);
+  };
+
+  const handleMoveBlock = (index: number, direction: 'up' | 'down') => {
+    const blocks = moveBlock(parsed.blocks, index, direction);
+    if (blocks) handleBlocksChange(blocks);
+  };
+
+  const handleReorderBlock = (from: number, to: number) => {
+    handleBlocksChange(arrayMove(parsed.blocks, from, to));
+  };
+
+  const handleDeleteBlock = (index: number) => {
+    handleBlocksChange(parsed.blocks.filter((_, i) => i !== index));
+  };
+
+  const handleUpdateBlock = (index: number, updated: JournalBlock) => {
+    const blocks = [...parsed.blocks];
+    blocks[index] = updated;
+    handleBlocksChange(blocks);
+  };
+
+  if (loading) {
+    return (
+      <div style={{ padding: '4rem', textAlign: 'center', opacity: 0.6 }}>
+        Opening Journal Studio...
+      </div>
+    );
+  }
+
+  /**
+   * Replaces the editor rather than sitting above it: an empty editor saved
+   * over the entry would replace the text with nothing.
+   */
+  if (loadError) {
+    return (
+      <div className="admin-error" role="alert">
+        <strong>This entry could not be loaded.</strong> {loadError}
+        <p>
+          Nothing has been changed. Saving stays disabled until it loads, so an empty editor cannot
+          overwrite the entry.
+        </p>
+        <button className="admin-btn admin-btn-secondary" onClick={onBack}>
+          Back to entries
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="journal-editor-container">
+      {/* Top Bar */}
+      <div className="journal-editor-topbar">
+        <div className="journal-editor-topbar-left">
+          <button
+            type="button"
+            className="admin-btn admin-btn-sm admin-btn-secondary"
+            onClick={onBack}
+          >
+            ← All Entries
+          </button>
+
+          <input
+            type="text"
+            className="journal-editor-title-input"
+            value={parsed.frontmatter.title || ''}
+            placeholder="Story Title..."
+            onChange={(e) => handleFrontmatterChange({ title: e.target.value })}
+          />
+
+          <div
+            style={{
+              display: 'flex',
+              gap: '4px',
+              background: 'rgba(255,255,255,0.06)',
+              borderRadius: '6px',
+              padding: '2px',
+            }}
+          >
+            <button
+              type="button"
+              className={`admin-btn admin-btn-xs ${editorMode === 'blocks' ? 'admin-btn-primary' : ''}`}
+              onClick={() => setEditorMode('blocks')}
+            >
+              Visual Blocks
+            </button>
+            <button
+              type="button"
+              className={`admin-btn admin-btn-xs ${editorMode === 'markdown' ? 'admin-btn-primary' : ''}`}
+              onClick={() => setEditorMode('markdown')}
+            >
+              Raw Markdown
+            </button>
+          </div>
+        </div>
+
+        <div className="journal-editor-topbar-right">
+          <button
+            type="button"
+            className="admin-btn admin-btn-sm admin-btn-secondary"
+            onClick={() => setShowMetaModal(true)}
+          >
+            <IconGear size={14} /> Story Settings
+          </button>
+
+          <a
+            href={`/journal/${slug}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="admin-btn admin-btn-sm admin-btn-secondary"
+          >
+            <IconLink size={14} /> Live
+          </a>
+
+          <button
+            type="button"
+            className="admin-btn admin-btn-sm admin-btn-primary"
+            onClick={handleSave}
+            disabled={saving}
+          >
+            {saving ? (
+              'Saving...'
+            ) : dirty ? (
+              'Save Changes'
+            ) : (
+              <>
+                <IconCheck size={14} /> Saved
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      <DraftNotice
+        status={draft.status}
+        subject="entry"
+        onDiscard={discardDraft}
+        onRestore={restoreConflictingDraft}
+        onDismiss={draft.dismiss}
+      />
+
+      {/* Split Screen */}
+      <div
+        className={`journal-editor-split${dragging ? ' is-dragging' : ''}`}
+        ref={splitRef}
+        style={{ ['--journal-split-left' as string]: `${splitPct}%` }}
+      >
+        {/* Left: Authoring Pane */}
+        <div className="journal-editor-pane-left">
+          {editorMode === 'markdown' ? (
+            <textarea
+              className="journal-raw-markdown-editor"
+              value={rawMarkdown}
+              onChange={(e) => handleMarkdownChange(e.target.value)}
+              placeholder="Write Markdown here..."
+            />
+          ) : (
+            <div>
+              {/* Add Block Toolbar */}
+              <div className="essay-toolbar-sticky">
+                <span className="essay-toolbar-label">Add Block:</span>
+                <button
+                  type="button"
+                  className="admin-btn admin-btn-xs"
+                  onClick={() => handleAddBlock('paragraph')}
+                >
+                  <IconFileText size={13} /> + Text
+                </button>
+                <button
+                  type="button"
+                  className="admin-btn admin-btn-xs"
+                  onClick={() => handleAddBlock('heading')}
+                >
+                  <IconSparkles size={13} /> + Heading
+                </button>
+                <button
+                  type="button"
+                  className="admin-btn admin-btn-xs"
+                  onClick={() => handleAddBlock('quote')}
+                >
+                  <IconQuote size={13} /> + Quote
+                </button>
+                <button
+                  type="button"
+                  className="admin-btn admin-btn-xs"
+                  onClick={() => handleAddBlock('facts')}
+                >
+                  <IconColumns size={13} /> + Facts
+                </button>
+                <div className="essay-toolbar-divider" />
+                <button
+                  type="button"
+                  className="admin-btn admin-btn-xs admin-btn-primary"
+                  onClick={() => handleAddBlock('photo')}
+                >
+                  <IconCamera size={13} /> + Photo
+                </button>
+                <button
+                  type="button"
+                  className="admin-btn admin-btn-xs admin-btn-primary"
+                  onClick={() => handleAddBlock('photo-pair')}
+                >
+                  <IconArrowLeftRight size={13} /> + 2-Photo Pair
+                </button>
+                <button
+                  type="button"
+                  className="admin-btn admin-btn-xs admin-btn-primary"
+                  onClick={() => handleAddBlock('photo-grid')}
+                >
+                  <IconGrid size={13} /> + Photo Grid
+                </button>
+                <button
+                  type="button"
+                  className="admin-btn admin-btn-xs admin-btn-primary"
+                  onClick={() => handleAddBlock('album')}
+                >
+                  <IconFolder size={13} /> + Album
+                </button>
+                <button
+                  type="button"
+                  className="admin-btn admin-btn-xs"
+                  onClick={() => handleAddBlock('map')}
+                >
+                  <IconMap size={13} /> + Map
+                </button>
+              </div>
+
+              {/* Blocks List */}
+              <SortableBlockList count={parsed.blocks.length} onReorder={handleReorderBlock}>
+                <div
+                  style={{
+                    marginTop: '1rem',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1rem',
+                  }}
+                >
+                  {parsed.blocks.map((block, idx) => (
+                    <SortableBlockCard
+                      key={idx}
+                      index={idx}
+                      badge={<BlockBadge type={block.type} />}
+                      actions={
+                        <div className="essay-block-actions">
+                          <button
+                            type="button"
+                            className="admin-btn admin-btn-xs"
+                            disabled={idx === 0}
+                            aria-label="Move block up"
+                            onClick={() => handleMoveBlock(idx, 'up')}
+                          >
+                            <IconChevronUp size={12} />
+                          </button>
+                          <button
+                            type="button"
+                            className="admin-btn admin-btn-xs"
+                            disabled={idx === parsed.blocks.length - 1}
+                            aria-label="Move block down"
+                            onClick={() => handleMoveBlock(idx, 'down')}
+                          >
+                            <IconChevronDown size={12} />
+                          </button>
+                          <button
+                            type="button"
+                            className="admin-btn admin-btn-xs admin-btn-danger"
+                            aria-label="Delete block"
+                            onClick={() => handleDeleteBlock(idx)}
+                          >
+                            <IconTrash size={12} />
+                          </button>
+                        </div>
+                      }
+                    >
+                      <BlockFields
+                        block={block}
+                        onChange={(updated) => handleUpdateBlock(idx, updated)}
+                        onPickAsset={setAssetPickerTarget}
+                        onPickAlbum={openAlbumPicker}
+                        albumAssets={albumAssets}
+                        albumList={albumList}
+                        mapEnabled={mapEnabled}
+                      />
+                    </SortableBlockCard>
+                  ))}
+                </div>
+              </SortableBlockList>
+            </div>
+          )}
+        </div>
+
+        {/* Draggable divider */}
+        <div
+          className="journal-editor-resizer"
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize editor and preview"
+          aria-valuenow={Math.round(splitPct)}
+          aria-valuemin={SPLIT_MIN}
+          aria-valuemax={SPLIT_MAX}
+          tabIndex={0}
+          onMouseDown={onResizerMouseDown}
+          onDoubleClick={onResizerDoubleClick}
+          onKeyDown={onResizerKeyDown}
+        >
+          <span className="journal-editor-resizer-grip" aria-hidden="true" />
+        </div>
+
+        {/* Right: Live Preview Pane */}
+        <JournalPreview parsed={parsed} albumAssets={albumAssets} />
+      </div>
+
+      {/* Metadata Modal */}
+      {showMetaModal && (
+        <StorySettingsModal
+          frontmatter={parsed.frontmatter}
+          onChange={handleFrontmatterChange}
+          onPickAsset={setAssetPickerTarget}
+          onClose={() => setShowMetaModal(false)}
+        />
+      )}
+
+      {/* Album Picker Modal */}
+      {albumPickerTarget && albumList !== null && (
+        <AlbumPicker
+          albums={albumList}
+          usedAlbumIds={new Set()}
+          onSelect={(albumId) => {
+            albumPickerTarget(albumId);
+            setAlbumPickerTarget(null);
+          }}
+          onClose={() => setAlbumPickerTarget(null)}
+        />
+      )}
+
+      {/* Asset Picker Modal */}
+      {assetPickerTarget && (
+        <AssetPicker
+          title={assetPickerTarget.title}
+          onSelect={(id) => {
+            assetPickerTarget.onSelect(id);
+            setAssetPickerTarget(null);
+          }}
+          onClose={() => setAssetPickerTarget(null)}
+        />
+      )}
+    </div>
+  );
+}

app/admin/components/journal/JournalPreview.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { ParsedJournal } from '@/lib/journal';
+import { collectAssetIds } from '@/lib/journal';
+import { expandAlbumBlocks, type AlbumAssetRef } from '@/lib/journalAlbum';
+import { EssayView } from '@/app/[...path]/EssayView';
+import type { PhotoItem } from '@/app/[...path]/PhotoGrid';
+import { IconEye } from '../Icons';
+
+interface JournalPreviewProps {
+  parsed: ParsedJournal;
+  /** Assets of the albums referenced by album blocks, as loaded so far. */
+  albumAssets: Record<string, AlbumAssetRef[]>;
+}
+
+/**
+ * The editor's live preview: the entry rendered through the public
+ * `EssayView`, with a desktop/mobile frame (#555). Album blocks are expanded
+ * the way the page expands them, and photo proportions are measured from the
+ * admin thumbnails.
+ */
+export function JournalPreview({ parsed, albumAssets }: JournalPreviewProps) {
+  const [viewport, setViewport] = useState<'desktop' | 'mobile'>('desktop');
+
+  /** Real width/height ratios of the referenced photos, measured from thumbnails. */
+  const [assetRatios, setAssetRatios] = useState<Record<string, number>>({});
+
+  const previewBlocks = useMemo(
+    () => expandAlbumBlocks(parsed.blocks, (id) => albumAssets[id]).blocks,
+    [parsed.blocks, albumAssets],
+  );
+  const previewIds = useMemo(
+    () =>
+      Array.from(
+        new Set([
+          ...(parsed.frontmatter.coverAssetId ? [parsed.frontmatter.coverAssetId] : []),
+          ...collectAssetIds(previewBlocks),
+        ]),
+      ),
+    [previewBlocks, parsed.frontmatter.coverAssetId],
+  );
+
+  /*
+   * The preview used to hard-code 3:2 for every photo, so the studio showed a
+   * cropped, uniform grid while the published page laid the photos out by their
+   * real proportions. There is no admin endpoint that reports asset dimensions,
+   * so the thumbnails are measured once as they load.
+   */
+  const measuredRef = useRef(new Set<string>());
+
+  useEffect(() => {
+    let cancelled = false;
+    for (const id of previewIds) {
+      if (!id || measuredRef.current.has(id)) continue;
+      measuredRef.current.add(id);
+
+      const probe = new window.Image();
+      probe.onload = () => {
+        if (cancelled || !probe.naturalHeight) return;
+        setAssetRatios((prev) => ({
+          ...prev,
+          [id]: probe.naturalWidth / probe.naturalHeight,
+        }));
+      };
+      probe.onerror = () => {
+        // Unresolvable reference — keep the fallback ratio, the block editor
+        // already flags it.
+        measuredRef.current.delete(id);
+      };
+      probe.src = `/api/admin/thumbnail/${id}`;
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [previewIds]);
+
+  // Mock PhotoItems for preview
+  const previewAssets: PhotoItem[] = previewIds.map((id) => ({
+    id,
+    type: 'image',
+    thumbUrl: `/api/admin/thumbnail/${id}`,
+    previewUrl: `/api/admin/thumbnail/${id}`,
+    exifUrl: `/api/exif/${id}`,
+    // Falls back to 3:2 only until the real ratio has been measured.
+    aspectRatio: assetRatios[id] ?? 1.5,
+  }));
+
+  return (
+    <div className="journal-editor-pane-right">
+      <div className="journal-preview-bar">
+        <span className="journal-preview-bar-label">
+          <IconEye size={13} /> Realtime Theme Preview
+        </span>
+        <div style={{ display: 'flex', gap: '4px' }}>
+          <button
+            type="button"
+            className={`admin-btn admin-btn-xs ${viewport === 'desktop' ? 'admin-btn-primary' : ''}`}
+            onClick={() => setViewport('desktop')}
+          >
+            Desktop
+          </button>
+          <button
+            type="button"
+            className={`admin-btn admin-btn-xs ${viewport === 'mobile' ? 'admin-btn-primary' : ''}`}
+            onClick={() => setViewport('mobile')}
+          >
+            Mobile
+          </button>
+        </div>
+      </div>
+
+      <div className={`journal-preview-frame ${viewport}`}>
+        <EssayView
+          essay={{ ...parsed, blocks: previewBlocks }}
+          assets={previewAssets}
+          title={parsed.frontmatter.title}
+          subtitle={parsed.frontmatter.subtitle}
+        />
+      </div>
+    </div>
+  );
+}

app/admin/components/journal/JournalStudio.tsx

@@ -0,0 +1,382 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import type { JournalEntrySummary } from '@/lib/journal';
+import { serializeJournalMarkdown, sanitizeSlug } from '@/lib/journal';
+import { JOURNAL_TEMPLATES } from '@/lib/journalTemplates';
+import {
+  IconTrash,
+  IconLink,
+  IconPlus,
+  IconBook,
+  IconClock,
+  IconCalendar,
+  IconLock,
+} from '../Icons';
+import './journal-studio.css';
+import { JournalEditor } from './JournalEditor';
+
+interface JournalStudioProps {
+  /** Entry to open, taken from the /admin/journal/[slug] route. */
+  slug?: string;
+  /** `config.map`, passed by the server route: a map block renders only when the site has a map. */
+  mapEnabled?: boolean;
+}
+
+export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioProps) {
+  const router = useRouter();
+  const [entries, setEntries] = useState<JournalEntrySummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // New Entry Modal
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [newTitle, setNewTitle] = useState('');
+  const [newSlug, setNewSlug] = useState('');
+  const [creating, setCreating] = useState(false);
+  /** null = start blank, matching the previous (only) behavior. */
+  const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null);
+
+  const fetchEntries = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/admin/journal');
+      if (res.ok) {
+        const data = await res.json();
+        setEntries(data.entries || []);
+      } else {
+        setError('Failed to load journal entries');
+      }
+    } catch {
+      setError('Failed to load journal entries');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchEntries();
+  }, [fetchEntries]);
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newTitle.trim()) return;
+
+    setCreating(true);
+    try {
+      const slug = sanitizeSlug(newSlug || newTitle);
+      const template = selectedTemplateId
+        ? JOURNAL_TEMPLATES.find((t) => t.id === selectedTemplateId)
+        : undefined;
+      const content = template
+        ? serializeJournalMarkdown({
+            frontmatter: {
+              title: newTitle.trim(),
+              date: new Date().toISOString().slice(0, 10),
+              draft: true,
+            },
+            blocks: template.blocks,
+            referencedAssetIds: [],
+          })
+        : undefined;
+
+      const res = await fetch('/api/admin/journal', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: newTitle.trim(),
+          slug,
+          ...(content ? { content } : {}),
+        }),
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        setShowCreateModal(false);
+        setNewTitle('');
+        setNewSlug('');
+        setSelectedTemplateId(null);
+        await fetchEntries();
+        if (data.entry?.slug) {
+          router.push(`/admin/journal/${data.entry.slug}`);
+        }
+      } else {
+        const data = await res.json();
+        alert(data.error || 'Failed to create journal entry');
+      }
+    } catch {
+      alert('Error creating journal entry');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleDelete = async (slug: string) => {
+    if (
+      !confirm(
+        `Delete "${slug}"?\n\nA copy is kept and can be restored from Backups on the dashboard.`,
+      )
+    )
+      return;
+
+    try {
+      const res = await fetch(`/api/admin/journal/${slug}`, {
+        method: 'DELETE',
+      });
+      if (res.ok) {
+        await fetchEntries();
+        if (activeSlug === slug) router.push('/admin/journal');
+      } else {
+        alert('Failed to delete journal entry');
+      }
+    } catch {
+      alert('Error deleting journal entry');
+    }
+  };
+
+  if (activeSlug) {
+    return (
+      <JournalEditor
+        slug={activeSlug}
+        mapEnabled={mapEnabled}
+        onBack={() => router.push('/admin/journal')}
+      />
+    );
+  }
+
+  return (
+    <div className="journal-studio">
+      <div className="journal-studio-header">
+        <div>
+          <h2>
+            <IconBook size={20} /> Journal &amp; Photo Essays
+          </h2>
+          <p style={{ margin: '4px 0 0', opacity: 0.7, fontSize: '0.9rem' }}>
+            Author visual stories, field notes, and longform photo essays with live preview.
+          </p>
+        </div>
+        <button
+          type="button"
+          className="admin-btn admin-btn-primary"
+          onClick={() => setShowCreateModal(true)}
+        >
+          <IconPlus size={16} /> New Journal Entry
+        </button>
+      </div>
+
+      {loading ? (
+        <div style={{ padding: '3rem', textAlign: 'center', opacity: 0.6 }}>
+          Loading journal entries...
+        </div>
+      ) : error ? (
+        <div style={{ padding: '3rem', textAlign: 'center', color: '#ef4444' }}>{error}</div>
+      ) : entries.length === 0 ? (
+        <div style={{ padding: '5rem 2rem', textAlign: 'center', opacity: 0.6 }}>
+          <h3>No journal entries yet</h3>
+          <p style={{ margin: '8px 0 1.5rem', fontSize: '0.9rem' }}>
+            Create your first story to share travel journals or wedding reportages.
+          </p>
+          <button
+            type="button"
+            className="admin-btn admin-btn-primary"
+            onClick={() => setShowCreateModal(true)}
+          >
+            <IconPlus size={16} /> Create First Entry
+          </button>
+        </div>
+      ) : (
+        <div className="journal-list-grid">
+          {entries.map((entry) => (
+            <div key={entry.slug} className="journal-admin-card">
+              <div className="journal-admin-card-cover">
+                {entry.frontmatter.coverAssetId ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={`/api/admin/thumbnail/${entry.frontmatter.coverAssetId}`}
+                    alt={entry.frontmatter.title || entry.slug}
+                  />
+                ) : (
+                  <IconBook size={36} className="svg-icon journal-card-cover-placeholder" />
+                )}
+              </div>
+              <div className="journal-admin-card-body">
+                <h3 className="journal-admin-card-title">
+                  {entry.frontmatter.title || entry.slug}
+                </h3>
+                <div className="journal-admin-card-slug">/journal/{entry.slug}</div>
+
+                <div className="journal-admin-card-meta">
+                  {entry.frontmatter.date && (
+                    <span>
+                      <IconCalendar size={12} /> {entry.frontmatter.date}
+                    </span>
+                  )}
+                  <span>
+                    <IconClock size={12} /> {entry.readingTimeMinutes} min
+                  </span>
+                  {entry.frontmatter.draft ? (
+                    <span className="journal-status-pill is-draft">Draft</span>
+                  ) : (
+                    <span className="journal-status-pill is-published">Published</span>
+                  )}
+                  {entry.frontmatter.password && (
+                    <span>
+                      <IconLock size={12} /> Password
+                    </span>
+                  )}
+                </div>
+
+                <div className="journal-admin-card-actions">
+                  <button
+                    type="button"
+                    className="admin-btn admin-btn-sm admin-btn-primary"
+                    onClick={() => router.push(`/admin/journal/${entry.slug}`)}
+                  >
+                    Edit in Studio
+                  </button>
+                  <a
+                    href={`/journal/${entry.slug}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="admin-btn admin-btn-sm admin-btn-secondary"
+                    title="View live page"
+                  >
+                    <IconLink size={14} />
+                  </a>
+                  <button
+                    type="button"
+                    className="admin-btn admin-btn-sm admin-btn-danger"
+                    onClick={() => handleDelete(entry.slug)}
+                    title="Delete entry"
+                    style={{ marginLeft: 'auto' }}
+                  >
+                    <IconTrash size={14} />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Create Modal */}
+      {showCreateModal && (
+        <div className="journal-modal-overlay">
+          <div className="journal-modal-card">
+            <h3 style={{ margin: '0 0 1rem' }}>Create New Journal Entry</h3>
+            <form onSubmit={handleCreate}>
+              <div style={{ marginBottom: '1rem' }}>
+                <label
+                  style={{
+                    display: 'block',
+                    fontSize: '0.85rem',
+                    marginBottom: '4px',
+                    opacity: 0.8,
+                  }}
+                >
+                  Title
+                </label>
+                <input
+                  type="text"
+                  className="admin-input"
+                  placeholder="e.g. Expedition Nordkap"
+                  value={newTitle}
+                  onChange={(e) => {
+                    setNewTitle(e.target.value);
+                    if (!newSlug || newSlug === sanitizeSlug(newTitle)) {
+                      setNewSlug(sanitizeSlug(e.target.value));
+                    }
+                  }}
+                  autoFocus
+                  required
+                />
+              </div>
+
+              <div style={{ marginBottom: '1.5rem' }}>
+                <label
+                  style={{
+                    display: 'block',
+                    fontSize: '0.85rem',
+                    marginBottom: '4px',
+                    opacity: 0.8,
+                  }}
+                >
+                  URL Slug
+                </label>
+                <input
+                  type="text"
+                  className="admin-input"
+                  placeholder="e.g. expedition-nordkap"
+                  value={newSlug}
+                  onChange={(e) => setNewSlug(sanitizeSlug(e.target.value))}
+                  required
+                />
+                <span
+                  style={{ fontSize: '0.75rem', opacity: 0.6, marginTop: '2px', display: 'block' }}
+                >
+                  Will be accessible at /journal/{newSlug || 'slug'}
+                </span>
+              </div>
+
+              <div style={{ marginBottom: '1.5rem' }}>
+                <label
+                  style={{
+                    display: 'block',
+                    fontSize: '0.85rem',
+                    marginBottom: '6px',
+                    opacity: 0.8,
+                  }}
+                >
+                  Start from
+                </label>
+                <div className="journal-template-grid">
+                  <button
+                    type="button"
+                    className={`journal-template-card${selectedTemplateId === null ? ' is-selected' : ''}`}
+                    onClick={() => setSelectedTemplateId(null)}
+                  >
+                    <span className="journal-template-card-name">Blank</span>
+                    <span className="journal-template-card-desc">Start with an empty editor.</span>
+                  </button>
+                  {JOURNAL_TEMPLATES.map((template) => (
+                    <button
+                      key={template.id}
+                      type="button"
+                      className={`journal-template-card${selectedTemplateId === template.id ? ' is-selected' : ''}`}
+                      onClick={() => setSelectedTemplateId(template.id)}
+                    >
+                      <span className="journal-template-card-name">{template.name}</span>
+                      <span className="journal-template-card-desc">{template.description}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
+                <button
+                  type="button"
+                  className="admin-btn admin-btn-secondary"
+                  onClick={() => {
+                    setShowCreateModal(false);
+                    setSelectedTemplateId(null);
+                  }}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="admin-btn admin-btn-primary"
+                  disabled={creating || !newTitle.trim()}
+                >
+                  {creating ? 'Creating...' : 'Create & Open Studio'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/admin/components/journal/StorySettingsModal.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import type { ParsedJournal } from '@/lib/journal';
+import type { AssetPickTarget } from './BlockFields';
+
+type Frontmatter = ParsedJournal['frontmatter'];
+
+interface StorySettingsModalProps {
+  frontmatter: Frontmatter;
+  onChange: (updates: Partial<Frontmatter>) => void;
+  onPickAsset: (target: AssetPickTarget) => void;
+  onClose: () => void;
+}
+
+/** The entry's metadata — subtitle, author, date, cover, password, draft (#555). */
+export function StorySettingsModal({
+  frontmatter,
+  onChange,
+  onPickAsset,
+  onClose,
+}: StorySettingsModalProps) {
+  return (
+    <div className="journal-modal-overlay">
+      <div className="journal-modal-card">
+        <h3 style={{ margin: '0 0 1.25rem' }}>Story Settings &amp; Metadata</h3>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <div>
+            <label
+              style={{
+                display: 'block',
+                fontSize: '0.8rem',
+                opacity: 0.8,
+                marginBottom: '4px',
+              }}
+            >
+              Subtitle
+            </label>
+            <input
+              type="text"
+              className="admin-input"
+              value={frontmatter.subtitle || ''}
+              placeholder="e.g. Field notes from our winter journey"
+              onChange={(e) => onChange({ subtitle: e.target.value })}
+            />
+          </div>
+
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+            <div>
+              <label
+                style={{
+                  display: 'block',
+                  fontSize: '0.8rem',
+                  opacity: 0.8,
+                  marginBottom: '4px',
+                }}
+              >
+                Author
+              </label>
+              <input
+                type="text"
+                className="admin-input"
+                value={frontmatter.author || ''}
+                placeholder="e.g. Ralf"
+                onChange={(e) => onChange({ author: e.target.value })}
+              />
+            </div>
+            <div>
+              <label
+                style={{
+                  display: 'block',
+                  fontSize: '0.8rem',
+                  opacity: 0.8,
+                  marginBottom: '4px',
+                }}
+              >
+                Publish Date
+              </label>
+              <input
+                type="date"
+                className="admin-input"
+                value={frontmatter.date || ''}
+                onChange={(e) => onChange({ date: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div>
+            <label
+              style={{
+                display: 'block',
+                fontSize: '0.8rem',
+                opacity: 0.8,
+                marginBottom: '4px',
+              }}
+            >
+              Cover Photo
+            </label>
+            <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+              <div
+                style={{
+                  width: '70px',
+                  height: '50px',
+                  borderRadius: '6px',
+                  background: 'rgba(0,0,0,0.3)',
+                  overflow: 'hidden',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                {frontmatter.coverAssetId ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={`/api/admin/thumbnail/${frontmatter.coverAssetId}`}
+                    alt="Cover"
+                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                  />
+                ) : (
+                  <span style={{ fontSize: '0.75rem', opacity: 0.5 }}>None</span>
+                )}
+              </div>
+              <button
+                type="button"
+                className="admin-btn admin-btn-xs"
+                onClick={() =>
+                  onPickAsset({
+                    title: 'Select Cover Photo',
+                    onSelect: (id) => onChange({ coverAssetId: id }),
+                  })
+                }
+              >
+                Choose Cover
+              </button>
+              {frontmatter.coverAssetId && (
+                <button
+                  type="button"
+                  className="admin-btn admin-btn-xs admin-btn-danger"
+                  onClick={() => onChange({ coverAssetId: undefined })}
+                >
+                  Remove
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div>
+            <label
+              style={{
+                display: 'block',
+                fontSize: '0.8rem',
+                opacity: 0.8,
+                marginBottom: '4px',
+              }}
+            >
+              Password Protection (Optional)
+            </label>
+            <input
+              type="password"
+              className="admin-input"
+              value={frontmatter.password || ''}
+              placeholder="Leave empty for public access"
+              onChange={(e) => onChange({ password: e.target.value })}
+            />
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', paddingTop: '4px' }}>
+            <input
+              type="checkbox"
+              id="draft-checkbox"
+              checked={!!frontmatter.draft}
+              onChange={(e) => onChange({ draft: e.target.checked })}
+            />
+            <label htmlFor="draft-checkbox" style={{ fontSize: '0.9rem', cursor: 'pointer' }}>
+              Keep as Draft (Hidden from public /journal list)
+            </label>
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '1.5rem' }}>
+          <button type="button" className="admin-btn admin-btn-primary" onClick={() => onClose()}>
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/admin/components/journal/blockOps.ts

@@ -0,0 +1,66 @@
+import type { JournalBlock } from '@/lib/journal';
+
+/**
+ * Block-list operations of the journal editor, as plain functions so they can
+ * be tested without rendering the editor (#555).
+ */
+
+/**
+ * Photo blocks may carry a legacy positional reference ("1", "2") instead of an
+ * asset UUID. Those only ever resolved against a subpage's album; on a
+ * standalone journal page there is no album, so the photo silently disappears.
+ * Flag them in the editor so the author can re-pick before publishing.
+ */
+const ASSET_UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+export function isLegacyAssetRef(assetId: string): boolean {
+  return assetId.length > 0 && !ASSET_UUID.test(assetId);
+}
+
+/** The block the "Add Block" toolbar inserts for each type. */
+export function createBlock(type: JournalBlock['type']): JournalBlock {
+  switch (type) {
+    case 'heading':
+      return { type: 'heading', level: 2, text: 'New Heading' };
+    case 'paragraph':
+      return { type: 'paragraph', html: 'Enter paragraph text here...' };
+    case 'quote':
+      return { type: 'quote', text: 'Enter quote text...', author: '' };
+    case 'photo':
+      return { type: 'photo', assetId: '', caption: '', layout: 'contained' };
+    case 'photo-pair':
+      return { type: 'photo-pair', assetIds: ['', ''], caption: '' };
+    case 'photo-grid':
+      return { type: 'photo-grid', assetIds: ['', '', ''], caption: '' };
+    case 'facts':
+      return {
+        type: 'facts',
+        items: [
+          { label: '', value: '' },
+          { label: '', value: '' },
+        ],
+      };
+    case 'map':
+      return { type: 'map', caption: '', line: true, items: [] };
+    case 'album':
+      return { type: 'album', albumId: '', layout: 'grid' };
+  }
+}
+
+/**
+ * The blocks with the one at `index` moved a step up or down, or null when it
+ * is already at that end — the arrow buttons are disabled there, but a stale
+ * click must not reorder anything.
+ */
+export function moveBlock(
+  blocks: JournalBlock[],
+  index: number,
+  direction: 'up' | 'down',
+): JournalBlock[] | null {
+  const target = direction === 'up' ? index - 1 : index + 1;
+  if (target < 0 || target >= blocks.length) return null;
+  const next = [...blocks];
+  const [moved] = next.splice(index, 1);
+  next.splice(target, 0, moved);
+  return next;
+}

app/admin/components/journal/journal-studio.css

@@ -395,6 +395,188 @@
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
 }
 
+/* ── Template picker (Create modal) ──────────────────────────────── */
+
+.journal-template-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+  max-height: 260px;
+  overflow-y: auto;
+  padding: 2px;
+}
+
+.journal-template-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: flex-start;
+  text-align: left;
+  padding: 0.55rem 0.7rem;
+  background: var(--admin-bg-input, #161616);
+  /* <button> does not inherit color or font from its parent — without these
+     the cards render in the UA default, black on the dark admin surface. */
+  color: var(--admin-text, #f0f0f0);
+  font: inherit;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.journal-template-card:hover {
+  border-color: var(--admin-border-hover, #444);
+}
+
+.journal-template-card.is-selected {
+  border-color: var(--admin-accent, #6366f1);
+}
+
+.journal-template-card-name {
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.journal-template-card-desc {
+  font-size: 0.75rem;
+  opacity: 0.65;
+}
+
+/* ── Photo grid block (editor tiles) ─────────────────────────────── */
+
+.journal-grid-tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+  gap: 8px;
+}
+
+.journal-grid-tile {
+  position: relative;
+}
+
+.journal-grid-tile-pick {
+  height: 80px;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px dashed rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 0.8rem;
+  opacity: 0.85;
+}
+
+.journal-grid-tile-pick img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.journal-grid-tile-remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 2px 5px;
+}
+
+/* ── Facts block (editor rows) ───────────────────────────────────── */
+
+.journal-facts-row {
+  display: grid;
+  grid-template-columns: 1fr 2fr auto;
+  gap: 8px;
+  align-items: center;
+}
+
+/* ── Album block (editor) ────────────────────────────────────────── */
+
+.journal-album-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.journal-album-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 0.7rem;
+  opacity: 0.85;
+  flex: 1 1 120px;
+  min-width: 0;
+}
+
+.journal-album-field .admin-input {
+  width: 100%;
+}
+
+/* ── Map block (editor pin rows) ─────────────────────────────────── */
+
+.journal-map-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.journal-map-row .admin-input {
+  flex: 1 1 140px;
+  width: auto;
+  min-width: 0;
+}
+
+.journal-map-row .journal-map-coord {
+  flex: 0 1 110px;
+}
+
+.journal-map-index {
+  width: 1.4rem;
+  font-size: 0.7rem;
+  opacity: 0.6;
+  text-align: right;
+  flex: none;
+}
+
+.journal-map-photo {
+  width: 96px;
+  height: 64px;
+  flex: none;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px dashed rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 0.75rem;
+  opacity: 0.85;
+}
+
+.journal-map-photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.journal-map-all {
+  flex: 1;
+  font-size: 0.8rem;
+  opacity: 0.8;
+}
+
+.journal-map-line-toggle {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
 /* ── Card meta & status ───────────────────────────────────────────── */
 
 .journal-admin-card-meta span {

app/admin/components/journal/splitPane.ts

@@ -0,0 +1,109 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type React from 'react';
+
+/**
+ * The draggable divider between the journal editor's authoring pane and its
+ * preview (#555). The arithmetic is plain functions; `useSplitPane` owns the
+ * state, the drag listeners and persistence.
+ */
+
+/** Width of the authoring pane, in percent of the split view. */
+export const SPLIT_STORAGE_KEY = 'folio-journal-split';
+export const SPLIT_MIN = 25;
+export const SPLIT_MAX = 70;
+export const SPLIT_DEFAULT = 46;
+
+export function clampSplit(pct: number): number {
+  return Math.min(SPLIT_MAX, Math.max(SPLIT_MIN, pct));
+}
+
+/** The width for a pointer at `clientX` over a split view at `left`/`width`. */
+export function splitFromPointer(clientX: number, left: number, width: number): number | null {
+  if (width === 0) return null;
+  return clampSplit(((clientX - left) / width) * 100);
+}
+
+/**
+ * Keyboard access for the divider: arrows nudge (Shift for bigger steps), Home
+ * resets. Null for any other key, which the divider then leaves alone.
+ */
+export function splitAfterKey(pct: number, key: string, shiftKey: boolean): number | null {
+  const step = shiftKey ? 10 : 2;
+  if (key === 'ArrowLeft') return Math.max(SPLIT_MIN, pct - step);
+  if (key === 'ArrowRight') return Math.min(SPLIT_MAX, pct + step);
+  if (key === 'Home') return SPLIT_DEFAULT;
+  return null;
+}
+
+/** A stored width, or null when it is missing or out of range. */
+export function parseStoredSplit(raw: string | null): number | null {
+  const stored = Number(raw);
+  return stored >= SPLIT_MIN && stored <= SPLIT_MAX ? stored : null;
+}
+
+export function useSplitPane() {
+  const splitRef = useRef<HTMLDivElement>(null);
+  const [splitPct, setSplitPct] = useState(SPLIT_DEFAULT);
+  const [dragging, setDragging] = useState(false);
+
+  // Restore the last width after mount (localStorage is unavailable on the server,
+  // and reading it in the initial state would not match the server render).
+  useEffect(() => {
+    const stored = parseStoredSplit(window.localStorage.getItem(SPLIT_STORAGE_KEY));
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    if (stored !== null) setSplitPct(stored);
+  }, []);
+
+  const applySplit = useCallback((clientX: number) => {
+    const rect = splitRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const pct = splitFromPointer(clientX, rect.left, rect.width);
+    if (pct !== null) setSplitPct(pct);
+  }, []);
+
+  useEffect(() => {
+    if (!dragging) return;
+    const onMove = (e: MouseEvent) => {
+      e.preventDefault();
+      applySplit(e.clientX);
+    };
+    const onUp = () => setDragging(false);
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [dragging, applySplit]);
+
+  // Persist once the drag ends, not on every pixel.
+  useEffect(() => {
+    if (dragging) return;
+    window.localStorage.setItem(SPLIT_STORAGE_KEY, String(Math.round(splitPct)));
+  }, [dragging, splitPct]);
+
+  const onResizerMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setDragging(true);
+  };
+
+  const onResizerDoubleClick = () => setSplitPct(SPLIT_DEFAULT);
+
+  const onResizerKeyDown = (e: React.KeyboardEvent) => {
+    const next = splitAfterKey(splitPct, e.key, e.shiftKey);
+    if (next === null) return;
+    e.preventDefault();
+    setSplitPct(next);
+  };
+
+  return {
+    splitRef,
+    splitPct,
+    dragging,
+    onResizerMouseDown,
+    onResizerDoubleClick,
+    onResizerKeyDown,
+  };
+}

app/admin/components/page-builder/AlbumDrawer.tsx

@@ -100,6 +100,43 @@ export default function AlbumDrawer({
                   />
                 </div>
               </div>
+
+              <div className="admin-field">
+                <label>Downloads</label>
+                <button
+                  type="button"
+                  className={`admin-toggle-card ${album.download ? 'active' : ''}`}
+                  onClick={() => onUpdate({ download: !album.download })}
+                  aria-pressed={!!album.download}
+                  style={{
+                    padding: '10px 14px',
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    borderRadius: '8px',
+                    cursor: 'pointer',
+                  }}
+                >
+                  <div className="toggle-card-info" style={{ textAlign: 'left' }}>
+                    <span
+                      className="toggle-card-title"
+                      style={{ fontWeight: 600, display: 'inline-flex', alignItems: 'center' }}
+                    >
+                      Allow original downloads
+                    </span>
+                    <span
+                      className="toggle-card-desc"
+                      style={{ fontSize: '0.8rem', display: 'block', opacity: 0.75 }}
+                    >
+                      Visitors can download the whole album or their selected photos as a ZIP
+                    </span>
+                  </div>
+                  <div className={`switch-toggle ${album.download ? 'on' : ''}`}>
+                    <span className="switch-slider" />
+                  </div>
+                </button>
+              </div>
             </div>
 
             <div className="admin-sheet-col admin-sheet-col--divided">

app/admin/components/useDraft.ts

@@ -0,0 +1,135 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Unsaved editor state that survives leaving the editor (#592).
+ *
+ * `useUnsavedGuard` only covers leaving the browser. Inside the admin, a tab
+ * link, the back button, Reload or Logout unmounts the page builder or the
+ * journal editor and its state goes with it. Rather than guard every exit —
+ * App Router has no `router.events`, and `<Link onNavigate>` does not see the
+ * back button — the editor keeps a draft in `sessionStorage` and picks it up
+ * again when it next mounts.
+ *
+ * A draft carries the `base` it was edited from: a fingerprint of what the
+ * server returned. When the server still returns the same thing the draft is
+ * applied on load. When it does not — the file was saved from another tab, or a
+ * backup was restored — applying it would silently overwrite that change, so it
+ * is held back and the editor asks.
+ *
+ * `sessionStorage` rather than `localStorage`: a draft belongs to the tab it was
+ * typed in, and should not follow the operator into a second tab or outlive the
+ * browser session.
+ */
+
+const PREFIX = 'folio_draft_';
+
+export interface Draft<T> {
+  base: string;
+  value: T;
+}
+
+/**
+ * Storage can throw — a private window, a full quota, blocked site data. A
+ * draft is a convenience, so every failure degrades to "no draft".
+ */
+export function readDraft<T>(key: string): Draft<T> | null {
+  try {
+    const raw = window.sessionStorage.getItem(PREFIX + key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as Partial<Draft<T>>;
+    if (typeof parsed?.base !== 'string' || !('value' in parsed)) return null;
+    return { base: parsed.base, value: parsed.value as T };
+  } catch {
+    return null;
+  }
+}
+
+export function writeDraft<T>(key: string, draft: Draft<T>): void {
+  try {
+    window.sessionStorage.setItem(PREFIX + key, JSON.stringify(draft));
+  } catch {
+    // Quota or blocked storage: the edit is still in memory, just not kept.
+  }
+}
+
+export function clearDraft(key: string): void {
+  try {
+    window.sessionStorage.removeItem(PREFIX + key);
+  } catch {
+    // Nothing to clean up if storage is unavailable.
+  }
+}
+
+/**
+ * What the editor should show after loading:
+ * - `restored` — a draft was applied; offer to discard it.
+ * - `conflict` — a draft exists but the server changed since; offer to apply
+ *   it anyway or discard it.
+ */
+export type DraftStatus = 'none' | 'restored' | 'conflict';
+
+export function useDraft<T>(key: string, value: T, dirty: boolean) {
+  /** The server fingerprint the current edits started from; null until loaded. */
+  const baseRef = useRef<string | null>(null);
+  const [status, setStatus] = useState<DraftStatus>('none');
+
+  // Mirror the edits while there are any, and drop the draft once there are
+  // none — a save or a discard. Nothing is written before `load()` has set a
+  // base, so the empty state an editor mounts with never lands in storage.
+  useEffect(() => {
+    if (baseRef.current === null) return;
+    if (dirty) writeDraft(key, { base: baseRef.current, value });
+    else clearDraft(key);
+  }, [key, value, dirty]);
+
+  /**
+   * Call once the server state has loaded, with its fingerprint. Returns the
+   * draft to apply, or null to keep what the server sent.
+   */
+  const load = useCallback(
+    (base: string): T | null => {
+      baseRef.current = base;
+      const draft = readDraft<T>(key);
+      if (!draft) {
+        setStatus('none');
+        return null;
+      }
+      if (draft.base === base) {
+        setStatus('restored');
+        return draft.value;
+      }
+      setStatus('conflict');
+      return null;
+    },
+    [key],
+  );
+
+  /** Call after a successful save, with the fingerprint of what was saved. */
+  const saved = useCallback(
+    (base: string) => {
+      baseRef.current = base;
+      clearDraft(key);
+      setStatus('none');
+    },
+    [key],
+  );
+
+  /** The held-back draft of a `conflict`, for "restore anyway". */
+  const takeConflicting = useCallback((): T | null => {
+    const draft = readDraft<T>(key);
+    setStatus(draft ? 'restored' : 'none');
+    return draft?.value ?? null;
+  }, [key]);
+
+  /** Forget the draft. The editor reloads the server state itself. */
+  const discard = useCallback(() => {
+    clearDraft(key);
+    setStatus('none');
+  }, [key]);
+
+  const dismiss = useCallback(() => setStatus('none'), []);
+
+  return { status, load, saved, takeConflicting, discard, dismiss };
+}