diff --git a/.gemini/settings.json b/.gemini/settings.json
new file mode 100644
index 00000000..8de9d583
--- /dev/null
+++ b/.gemini/settings.json
@@ -0,0 +1,8 @@
+{
+	"mcpServers": {
+		"svelte": {
+			"command": "npx",
+			"args": ["-y", "@sveltejs/mcp"]
+		}
+	}
+}
diff --git a/CLAUDE.md b/AGENTS.md
similarity index 99%
rename from CLAUDE.md
rename to AGENTS.md
index 843fdc9b..36d041bd 100644
--- a/CLAUDE.md
+++ b/AGENTS.md
@@ -5,11 +5,13 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ## Commands
 
 **Development:**
+
 - `npm run dev` - Start development server
 - `npm run build` - Build for production
 - `npm run preview` - Preview production build
 
 **Implementation Guidelines:**
+
 - Before implementing any feature, read `ARCHITECTURE.md` for design decisions and `IMPLEMENTATION_PLAN.md` for the step-by-step implementation spec
 - Design decisions go in `ARCHITECTURE.md`, implementation steps go in `IMPLEMENTATION_PLAN.md`
 - New features must be specified before implementation begins — the spec should be concise but sufficient to derive the implementation from
@@ -20,22 +22,26 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 - You can suggest what the next step could be, but don't implement it
 
 **Refactoring Guidelines:**
+
 - During refactors, make ONLY the minimal changes needed (e.g., renaming APIs)
 - Do NOT "improve" or restructure logic while refactoring
 - If you see something that could be improved, note it separately for a future task
 - Refactoring and improving are two separate activities - never combine them
 
 **Code Style:**
+
 - Use snake_case for all variable names, function names, and identifiers
 - This applies to JavaScript/TypeScript code, test files, and any new code written
 
 **Styling:**
+
 - Use Tailwind CSS classes whenever possible
 - Minimize custom CSS - only use it for things Tailwind can't handle (e.g., CSS custom properties like `var(--svedit-editing-stroke)`)
 - Use Tailwind's arbitrary value syntax for custom properties: `text-(--svedit-editing-stroke)`, `border-(--svedit-editing-stroke)`
 - Do not use rounded corners (keep elements rectangular)
 
 **What to NOT change (keep camelCase):**
+
 - `window.getSelection()` - native API
 - `document.activeElement` - native API
 - `navigator.clipboard` - native API
@@ -49,9 +55,11 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 **Pattern**: If it's a web platform API or Svelte API, keep camelCase. If it's our custom variable/function name, use snake_case.
 
 **File Extensions:**
+
 - Files using Svelte runes (`$state`, `$derived`, `$effect`, etc.) must use `.svelte.js` or `.svelte.ts` extension
 
 **Documentation Style:**
+
 - Use sentence case for all headings in documentation (README.md, etc.)
 - Use sentence case for code comments
 - Sentence case means: capitalize only the first word and proper nouns
@@ -72,16 +80,19 @@ Svedit is a rich content editor template built with Svelte 5 that uses a graph-b
 ### Core Components
 
 **Document Model:**
+
 - `Document` - Central document class with state management, transactions, and history
 - `Tras` - Handles atomic operations on the document
 - Documents are represented as graphs of nodes with properties and references
 
 **Selection:**
+
 - Supports text, node, and property selections
 - Maps between internal selection model and DOM selection
 - Handles complex selection scenarios like backwards selections and multi-node selections
 
 **Key Components:**
+
 - `Svedit.svelte` - Main editor component with event handling and selection management
 - `NodeArrayProperty.svelte` - Renders containers that hold sequences of nodes
 - `AnnotatedTextProperty.svelte` - Handles annotated text rendering and editing
@@ -90,6 +101,7 @@ Svedit is a rich content editor template built with Svelte 5 that uses a graph-b
 ### Schema
 
 Content is defined through schemas that specify:
+
 - Node types and their properties
 - Property types: `string`, `integer`, `boolean`, `string_array`, `annotated_text`, `node`, `node_array`
 - Reference relationships between nodes
@@ -105,6 +117,7 @@ Content is defined through schemas that specify:
 ## Schema and Inserter
 
 When adding new properties to a node type:
+
 1. Add to schema in `create_session.js` (`document_schema`)
 2. Add to inserter in `create_session.js` (`inserters`)
 
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index 33be4a1e..92f2a950 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -14,17 +14,17 @@ The app uses Svelte's experimental async features and SvelteKit's remote functio
 
 ```js
 const config = {
-  kit: {
-    adapter: adapter(),
-    experimental: {
-      remoteFunctions: true
-    }
-  },
-  compilerOptions: {
-    experimental: {
-      async: true
-    }
-  }
+	kit: {
+		adapter: adapter(),
+		experimental: {
+			remoteFunctions: true
+		}
+	},
+	compilerOptions: {
+		experimental: {
+			async: true
+		}
+	}
 };
 ```
 
@@ -40,7 +40,7 @@ const config = {
 import migrate from '$lib/server/migrate.js';
 
 export async function init() {
-  migrate();
+	migrate();
 }
 ```
 
@@ -205,16 +205,16 @@ There are two media node types: `image` and `video`. Each has the same visual pr
 
 ```json
 {
-    "id": "feature_1_image",
-    "type": "image",
-    "src": "c4b519da4c0a6512b5d9519aac0d9df7fab9152a6df109515456ada4702fabdb.webp",
-    "width": 1600,
-    "height": 900,
-    "alt": "Feature image",
-    "scale": 1.0,
-    "focal_point_x": 0.5,
-    "focal_point_y": 0.5,
-    "object_fit": "cover"
+	"id": "feature_1_image",
+	"type": "image",
+	"src": "c4b519da4c0a6512b5d9519aac0d9df7fab9152a6df109515456ada4702fabdb.webp",
+	"width": 1600,
+	"height": 900,
+	"alt": "Feature image",
+	"scale": 1.0,
+	"focal_point_x": 0.5,
+	"focal_point_y": 0.5,
+	"object_fit": "cover"
 }
 ```
 
@@ -222,16 +222,16 @@ There are two media node types: `image` and `video`. Each has the same visual pr
 
 ```json
 {
-    "id": "hero_video",
-    "type": "video",
-    "src": "e7a3f1bc...abcd.mp4",
-    "width": 1920,
-    "height": 1080,
-    "alt": "Product demo",
-    "scale": 1.0,
-    "focal_point_x": 0.5,
-    "focal_point_y": 0.5,
-    "object_fit": "cover"
+	"id": "hero_video",
+	"type": "video",
+	"src": "e7a3f1bc...abcd.mp4",
+	"width": 1920,
+	"height": 1080,
+	"alt": "Product demo",
+	"scale": 1.0,
+	"focal_point_x": 0.5,
+	"focal_point_y": 0.5,
+	"object_fit": "cover"
 }
 ```
 
@@ -297,8 +297,8 @@ The paste handler uses `get_media_type(file)` to map each file's MIME type to a
 ```js
 /** @returns {'image' | 'video'} */
 function get_media_type(file) {
-    if (file.type.startsWith('video/')) return 'video';
-    return 'image';
+	if (file.type.startsWith('video/')) return 'video';
+	return 'image';
 }
 ```
 
@@ -384,13 +384,13 @@ variant URL  = /assets/{stem}/w320.webp
 
 ```html
 <img
-    src="/assets/c4b519da...fabdb.webp"
-    srcset="
-        /assets/c4b519da...fabdb/w320.webp 320w,
-        /assets/c4b519da...fabdb/w640.webp 640w,
-        /assets/c4b519da...fabdb/w1024.webp 1024w,
-        /assets/c4b519da...fabdb.webp 1600w
-    "
+	src="/assets/c4b519da...fabdb.webp"
+	srcset="
+		/assets/c4b519da...fabdb/w320.webp   320w,
+		/assets/c4b519da...fabdb/w640.webp   640w,
+		/assets/c4b519da...fabdb/w1024.webp 1024w,
+		/assets/c4b519da...fabdb.webp       1600w
+	"
 />
 ```
 
@@ -402,12 +402,12 @@ Different media types are handled differently:
 
 The asset id always includes the file extension. The stem (id without extension) is used to derive the variant directory.
 
-| Type | Node type | Client processing | Asset id example | Variants |
-|---|---|---|---|---|
-| Static images (JPEG, PNG, WebP, HEIC) | `image` | Resize to `MAX_IMAGE_WIDTH`, convert to WebP via WASM | `c4b519da...fabdb.webp` | Yes (`c4b519da...fabdb/w320.webp`, etc.) |
-| Animated GIFs | `image` | Passthrough | `c4b519da...fabdb.gif` | No |
-| SVGs | `image` | Passthrough | `c4b519da...fabdb.svg` | No |
-| Videos (MP4) | `video` | Passthrough | `c4b519da...fabdb.mp4` | No |
+| Type                                  | Node type | Client processing                                     | Asset id example        | Variants                                 |
+| ------------------------------------- | --------- | ----------------------------------------------------- | ----------------------- | ---------------------------------------- |
+| Static images (JPEG, PNG, WebP, HEIC) | `image`   | Resize to `MAX_IMAGE_WIDTH`, convert to WebP via WASM | `c4b519da...fabdb.webp` | Yes (`c4b519da...fabdb/w320.webp`, etc.) |
+| Animated GIFs                         | `image`   | Passthrough                                           | `c4b519da...fabdb.gif`  | No                                       |
+| SVGs                                  | `image`   | Passthrough                                           | `c4b519da...fabdb.svg`  | No                                       |
+| Videos (MP4)                          | `video`   | Passthrough                                           | `c4b519da...fabdb.mp4`  | No                                       |
 
 ### Image size constraints
 
@@ -618,6 +618,41 @@ In `hooks.server.js`, on every request:
 - `POST /api/login` — authenticate with `{ password }`, sets session cookie
 - `POST /api/logout` — clears session cookie, deletes session row
 
+## Highlights block
+
+The highlights block is a compact list for property-style metadata (e.g. "Units: 8"). It renders as a flex list with `justify-between`, and each row has a bottom border underline.
+
+Schema:
+
+- `highlights` (block)
+  - `items` — `node_array` of `highlight_item`
+- `highlight_item` (block)
+  - `label` — `annotated_text`, single line
+  - `value` — `annotated_text`, single line
+
+Editing:
+
+- A visible "add row" handle appears below the list in edit mode.
+
+## Columns block
+
+The columns block is a parent layout container that holds multiple column node arrays. Each column can contain any standard page body block (prose, hero, gallery, etc.), enabling multi-column sections without changing the page body structure.
+
+Schema:
+
+- `columns` (block)
+  - `layout` — integer layout selector
+  - `columns` — `node_array` of `column`
+- `column` (block)
+  - `content` — `node_array` of page body block types
+
+Layouts:
+
+- Layout 1: two equal columns (`md:grid-cols-2`)
+- Layout 2: three equal columns (`md:grid-cols-3`)
+
+Mobile behavior: columns stack into a single column (`grid-cols-1`).
+
 ## Future: optional S3 storage
 
 Assets are stored on the local filesystem (`ASSET_PATH`) by default. This keeps the app fully self-contained — a single deployment with no external dependencies beyond the server itself. For most sites this is sufficient.
diff --git a/IMPLEMENTATION_PLAN.md b/IMPLEMENTATION_PLAN.md
index 8326069e..cd5be3e3 100644
--- a/IMPLEMENTATION_PLAN.md
+++ b/IMPLEMENTATION_PLAN.md
@@ -70,6 +70,7 @@ export const ASSET_BASE = '/assets';
 `src/lib/config.js` (which imports from `node:path`) remains server-only and unchanged. The Web Worker and client code import from `asset-config.js`.
 
 `ASSET_BASE` is the URL prefix used to construct asset URLs on the client. All `src` values in saved documents are bare asset ids (e.g. `c4b519da...fabdb.webp`). Components prefix them with `ASSET_BASE` at render time to build the full URL. This is the only valid source for saved images — no absolute URLs, no external URLs, no relative paths. A `src` value is either:
+
 - `blob:...` — unsaved, only valid during the current editing session
 - A bare asset id — saved, rendered as `{ASSET_BASE}/{asset_id}`
 
@@ -96,10 +97,10 @@ The client computes the SHA-256 hex hash of the **source file** (before any proc
 
 ```js
 async function hash_blob(blob) {
-  const buffer = await blob.arrayBuffer();
-  const hash_buffer = await crypto.subtle.digest('SHA-256', buffer);
-  const hash_array = Array.from(new Uint8Array(hash_buffer));
-  return hash_array.map(b => b.toString(16).padStart(2, '0')).join('');
+	const buffer = await blob.arrayBuffer();
+	const hash_buffer = await crypto.subtle.digest('SHA-256', buffer);
+	const hash_array = Array.from(new Uint8Array(hash_buffer));
+	return hash_array.map((b) => b.toString(16).padStart(2, '0')).join('');
 }
 ```
 
@@ -166,6 +167,7 @@ ASSET_PATH/
 ```
 
 Functions:
+
 - `asset_path(asset_id)` — full path for an original: `join(ASSET_PATH, asset_id)`
 - `variant_dir(asset_id)` — directory for variants: strip extension from asset_id, `join(ASSET_PATH, stem)`
 - `variant_path(asset_id, width)` — full path for a variant: `join(variant_dir(asset_id), 'w' + width + '.webp')`
@@ -187,10 +189,10 @@ Svedit already has a `handle_image_paste` callback in `create_session.js` that f
 2. Start background processing for the pasted file (runs concurrently, does not block the editor):
    a. Compute the SHA-256 hash of the source file.
    b. Determine the asset type:
-      - **SVG** (`image/svg+xml`): passthrough — no WASM processing. Extract dimensions via `<img>` element. The blob is the original file. Extension: `.svg`.
-      - **Animated GIF** (`image/gif` with multiple frames): passthrough — no WASM processing. Extract dimensions via `<img>` element. The blob is the original file. Extension: `.gif`.
-      - **Static raster image** (JPEG, PNG, WebP, HEIC, HEIF, still GIF): process via WASM worker — decode, resize if > `MAX_IMAGE_WIDTH`, encode as WebP, generate all applicable width variants. Extension: `.webp`.
-   c. Store the processing result (hash, original blob, variants, dimensions) keyed by the blob URL in a `Map`. This map is consulted during the save flow.
+   - **SVG** (`image/svg+xml`): passthrough — no WASM processing. Extract dimensions via `<img>` element. The blob is the original file. Extension: `.svg`.
+   - **Animated GIF** (`image/gif` with multiple frames): passthrough — no WASM processing. Extract dimensions via `<img>` element. The blob is the original file. Extension: `.gif`.
+   - **Static raster image** (JPEG, PNG, WebP, HEIC, HEIF, still GIF): process via WASM worker — decode, resize if > `MAX_IMAGE_WIDTH`, encode as WebP, generate all applicable width variants. Extension: `.webp`.
+     c. Store the processing result (hash, original blob, variants, dimensions) keyed by the blob URL in a `Map`. This map is consulted during the save flow.
 3. The user can continue editing. Processing happens in the background.
 
 The processing/upload map and its logic should live in a dedicated module (e.g. `src/lib/client/asset-upload.js`), not inline in `create_session.js` or `+page.svelte`.
@@ -224,6 +226,7 @@ Use XHR (not `fetch`) for uploads so we get `upload.onprogress` events for progr
 Update `save_document` in `api.remote.js` to track asset references as part of the save transaction:
 
 1. Add the `asset_refs` table in a new migration step (`add_asset_refs`):
+
    ```sql
    CREATE TABLE asset_refs (
        asset_id TEXT NOT NULL,
@@ -248,9 +251,9 @@ The Svedit image component needs to handle two `src` modes:
 
 ```html
 <img
-  src="{ASSET_BASE}/{src}"
-  srcset="{applicable_variants.map(w => `${ASSET_BASE}/${stem}/w${w}.webp ${w}w`).join(', ')}, {ASSET_BASE}/{src} {width}w"
-  sizes="50vw"
+	src="{ASSET_BASE}/{src}"
+	srcset="{applicable_variants.map(w => `${ASSET_BASE}/${stem}/w${w}.webp ${w}w`).join(', ')}, {ASSET_BASE}/{src} {width}w"
+	sizes="50vw"
 />
 ```
 
@@ -259,6 +262,7 @@ Only include variants for widths strictly smaller than the image's `width`. The
 ### File summary
 
 New files:
+
 - `src/lib/client/asset-processor.js` — Web Worker for WASM image processing
 - `src/lib/client/process-asset.js` — main-thread wrapper for the worker
 - `src/lib/server/asset-storage.js` — filesystem operations for assets
@@ -270,6 +274,7 @@ New files:
 - `src/routes/assets/[...path]/+server.js` — GET serve assets from disk
 
 Modified files:
+
 - `vite.config.js` — add `optimizeDeps.exclude` and `worker.format`
 - `package.json` — add `@jsquash/webp` and `@jsquash/resize` dependencies
 - `src/lib/server/migrations.js` — add `add_asset_refs` migration step
@@ -363,8 +368,8 @@ CMD ["node", "/app/scripts/start-app.js"]
 import { server as app } from '/app/build/index.js';
 
 function shutdownServer() {
-  console.log('Server doing graceful shutdown');
-  app.server.close();
+	console.log('Server doing graceful shutdown');
+	app.server.close();
 }
 
 process.on('SIGINT', shutdownServer);
@@ -477,6 +482,7 @@ ls /data/assets/                # inspect uploaded assets (from SSH)
 ### File summary
 
 New files:
+
 - `Dockerfile` — multi-stage Docker build
 - `fly.toml` — Fly.io configuration
 - `.dockerignore` — Docker build context exclusions
@@ -484,6 +490,7 @@ New files:
 - `scripts/start-app.js` — Node.js entry point with graceful shutdown
 
 Modified files:
+
 - `svelte.config.js` — switch to `@sveltejs/adapter-node`
 - `package.json` — add `@sveltejs/adapter-node`, remove `@sveltejs/adapter-auto`
 
@@ -534,6 +541,7 @@ The property names stay as `image` / `logo` for now. `default_node_type` stays `
 ### Component changes
 
 **`Video.svelte`** — new component, mirrors `Image.svelte` structure:
+
 - Receives `path` prop, reads node from session
 - Resolves `src` the same way (blob URL → direct, asset id → `ASSET_BASE` prefix)
 - Renders `<video autoplay muted loop playsinline contenteditable="false" disablepictureinpicture>` with:
@@ -546,6 +554,7 @@ The property names stay as `image` / `logo` for now. `default_node_type` stays `
 - Note: in edit mode, click-to-fullscreen should be **disabled** — `MediaControls` overlay captures pointer events for zoom/pan instead. Click-to-fullscreen only applies when `editable` is false (published view).
 
 **Container components** (`GalleryItem.svelte`, `Figure.svelte`, `Feature.svelte`, `LinkCollectionItem.svelte`) — update to:
+
 1. Check the referenced node's `type` (still via the `image` property) to render either `<Image>` or `<Video>`
 
 Register `Video` in `node_components` in `create_session.js`.
@@ -555,11 +564,13 @@ Register `Video` in `node_components` in `create_session.js`.
 Zooming (scroll wheel) and panning (drag to move focal point) must work with videos the same way as with images. Both media types share the same visual properties (`scale`, `focal_point_x`, `focal_point_y`, `object_fit`), so the controls are identical.
 
 **Rename `ImageControls` → `MediaControls`:**
+
 - `src/routes/components/ImageControls.svelte` → `src/routes/components/MediaControls.svelte`
 - The internal variable `image` (used to read the node) becomes `media_node` or similar.
 - The component is already generic — it reads `scale`, `focal_point_x`, `focal_point_y`, and `object_fit` from the node at `path`. No image-specific logic.
 
 **Update `Overlays.svelte`:**
+
 - Import `MediaControls` instead of `ImageControls`.
 - Widen `is_image_selected` to `is_media_selected`: `selected_property?.type === 'image' || selected_property?.type === 'video'`.
 - Rename the CSS class `image-controls-overlay` → `media-controls-overlay`.
@@ -589,18 +600,20 @@ Add MIME type detection:
 ```js
 /** @returns {'image' | 'video'} */
 function get_media_type(file) {
-    if (file.type.startsWith('video/')) return 'video';
-    return 'image';
+	if (file.type.startsWith('video/')) return 'video';
+	return 'image';
 }
 ```
 
 This returns the Svedit node type that corresponds to the file. Currently only `'image'` and `'video'` — `'audio'` can be added later.
 
 **When pasting over an existing media node** (property selection on an image/video node):
+
 - If `get_media_type(file)` matches the existing node's `type`: replace `src` on the existing node (current behavior).
 - If it differs (e.g. pasting a video over an image): create a new node of the correct type via transaction, delete the old node, and update the parent's `image` reference to point to the new node. (The property is still named `image` in this step.)
 
 **When pasting into a container** (text selection / inserting new nodes):
+
 - Use `get_media_type(file)` to decide the child node type.
 - The wrapper node (`gallery_item` or `figure`) still uses `image` as the property name (renamed in step 4b).
 
@@ -608,20 +621,20 @@ This returns the Svedit node type that corresponds to the file. Currently only `
 
 ```js
 async function get_video_dimensions(blob) {
-    return new Promise((resolve, reject) => {
-        const video = document.createElement('video');
-        video.preload = 'metadata';
-        const object_url = URL.createObjectURL(blob);
-        video.onloadedmetadata = () => {
-            URL.revokeObjectURL(object_url);
-            resolve({ width: video.videoWidth, height: video.videoHeight });
-        };
-        video.onerror = () => {
-            URL.revokeObjectURL(object_url);
-            reject(new Error('Failed to load video metadata'));
-        };
-        video.src = object_url;
-    });
+	return new Promise((resolve, reject) => {
+		const video = document.createElement('video');
+		video.preload = 'metadata';
+		const object_url = URL.createObjectURL(blob);
+		video.onloadedmetadata = () => {
+			URL.revokeObjectURL(object_url);
+			resolve({ width: video.videoWidth, height: video.videoHeight });
+		};
+		video.onerror = () => {
+			URL.revokeObjectURL(object_url);
+			reject(new Error('Failed to load video metadata'));
+		};
+		video.src = object_url;
+	});
 }
 ```
 
@@ -654,12 +667,15 @@ Add a `video` entry to `html_exporters` if needed (for any export/copy functiona
 ### File summary
 
 New files:
+
 - `src/routes/components/Video.svelte` — video rendering component
 
 Renamed files:
+
 - `src/routes/components/ImageControls.svelte` → `src/routes/components/MediaControls.svelte`
 
 Modified files:
+
 - `src/lib/document_schema.js` — add `video` node type, widen `node_types` to `['image', 'video']` on container properties
 - `src/routes/create_session.js` — rename `handle_image_paste` → `handle_media_paste`, add `get_media_type`, video MIME detection, video metadata extraction, video node creation, register `Video` component
 - `src/routes/components/Overlays.svelte` — import `MediaControls` instead of `ImageControls`, widen `is_image_selected` → `is_media_selected`
@@ -667,6 +683,7 @@ Modified files:
 - Container components (`GalleryItem.svelte`, `Figure.svelte`, `Feature.svelte`, `LinkCollectionItem.svelte`) — conditionally render `<Image>` or `<Video>` based on referenced node type
 
 Upstream (svedit) modified files:
+
 - `svedit/src/lib/Svedit.svelte` — widen MIME filter from `image/*` to `image/* || video/*`, rename `pasted_images` → `pasted_media`, rename config callback `handle_image_paste` → `handle_media_paste`
 - `svedit/src/routes/create_demo_session.js` — rename `handle_image_paste` → `handle_media_paste` to match
 
@@ -692,6 +709,7 @@ Update the seed document data in `migrations.js` to use `media` instead of `imag
 ### Inserter changes
 
 Update all inserters that create child nodes to use the `media` property name:
+
 - `feature` inserter: `image: 'feature_image_id'` → `media: 'feature_image_id'`
 - `figure` inserter: `image: 'image_one'` → `media: 'image_one'`
 - `gallery` inserter: `image: 'gallery_item_image_id'` → `media: 'gallery_item_image_id'`
@@ -712,7 +730,50 @@ Update `handle_media_paste` in `create_session.js` to use `media` as the propert
 ### File summary
 
 Modified files:
+
 - `src/lib/document_schema.js` — rename `image` → `media` on container node types
 - `src/routes/create_session.js` — update inserters and paste handler to use `media` property name
 - `src/lib/server/migrations.js` — add migration to rename `image` → `media` on existing documents, update seed data
-- Container components (`GalleryItem.svelte`, `Figure.svelte`, `Feature.svelte`, `LinkCollectionItem.svelte`) — read `media` instead of `image`
\ No newline at end of file
+- Container components (`GalleryItem.svelte`, `Figure.svelte`, `Feature.svelte`, `LinkCollectionItem.svelte`) — read `media` instead of `image`
+
+## Step 5: footer editable content
+
+**Goal:** make the footer's company info and team panel editable using existing Svedit conventions (`AnnotatedTextProperty` + `MediaProperty`).
+
+### Schema and seed data
+
+- Add annotated text properties to the `footer` node: `company_name`, `company_description`, `company_address`, `company_phone`, `team_label`, `team_name`, `team_description`.
+- Add a `team_thumb` media node property on the `footer` node (same node types as `logo`).
+- Update `FOOTER_1` seed data with initial text for the new properties and a `team_thumb` image node.
+
+### Component changes
+
+- Replace hardcoded footer copy with `AnnotatedTextProperty` bindings.
+- Update the team thumbnail `MediaProperty` to read from `team_thumb`.
+
+## Step 6: nav company name
+
+**Goal:** allow the nav title to be an editable annotated text property on the nav node.
+
+### Schema and seed data
+
+- Add `company_name` annotated text property to the `nav` node schema.
+- Seed `company_name` on `nav_1` and backfill existing nav documents with a migration.
+
+## Step 7: highlights block
+
+**Goal:** add a highlights block that renders a flex list with underlined rows and an explicit add-row handle in edit mode.
+
+- Add `highlights` and `highlight_item` node types to `document_schema.js`
+- Add `highlights` to the page body `node_types`
+- Create `Highlights.svelte` and `HighlightItem.svelte` components
+- Register new node components and inserters in `create_session.js`
+
+## Step 8: columns block
+
+**Goal:** add a parent columns block with 2- and 3-column layouts, where each column contains a node array of standard page blocks.
+
+- Add `columns` and `column` node types to `document_schema.js`
+- Add `columns` to the page body `node_types`
+- Create `Columns.svelte` and `Column.svelte` components
+- Register new node components, inserters, and layout options in `create_session.js`
diff --git a/README.md b/README.md
index 5ac889d6..a939dff9 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,9 @@ Next, you probably want to adjust the colors and fonts in [app.css](./src/app.cs
 @theme {
 	--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
 	--font-serif: 'Libertinos Serif Display', ui-serif, Georgia, serif;
-	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	--font-mono:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+		monospace;
 }
 ```
 
diff --git a/package-lock.json b/package-lock.json
index 8a1223f9..ef0fd878 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
 				"@sveltejs/adapter-node": "^5.5.4",
 				"nanoid": "^5.1.6",
 				"svedit": "^0.8.0",
+				"swiper": "^12.1.3",
 				"valibot": "^1.2.0"
 			},
 			"devDependencies": {
@@ -3349,6 +3350,25 @@
 				"@types/estree": "^1.0.6"
 			}
 		},
+		"node_modules/swiper": {
+			"version": "12.1.3",
+			"resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.3.tgz",
+			"integrity": "sha512-XcWlVmkHFICI4fuoJKgbp8PscDcS4i7pBH8nwJRBi3dpQvhCySwsWRYm4bOf/BzKVWkHOYaFw7qz9uBSrY3oug==",
+			"funding": [
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/swiperjs"
+				},
+				{
+					"type": "open_collective",
+					"url": "http://opencollective.com/swiper"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">= 4.7.0"
+			}
+		},
 		"node_modules/tailwindcss": {
 			"version": "4.2.2",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
diff --git a/package.json b/package.json
index 682f5ffe..34445cd8 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,8 @@
 		"@sveltejs/adapter-node": "^5.5.4",
 		"nanoid": "^5.1.6",
 		"svedit": "^0.8.0",
+		"swiper": "^12.1.3",
 		"valibot": "^1.2.0"
-	}
+	},
+	"packageManager": "yarn@3.6.4+sha512.e70835d4d6d62c07be76b3c1529cb640c7443f0fe434ef4b6478a5a399218cbaf1511b396b3c56eb03bc86424cff2320f6167ad2fde273aa0df6e60b7754029f"
 }
diff --git a/requirments.txt b/requirments.txt
new file mode 100644
index 00000000..2dec9fdf
--- /dev/null
+++ b/requirments.txt
@@ -0,0 +1,87 @@
+Client responded and now I want a seamless and easy transition of this data into our new website design which works best for ui/ux and user ingagment. We already have design 7300 vista del mar.
+I want you to visit website take screenshots understand layout and use of text images, and pages and distribute provided data in old vista del mar.
+
+Let me know if you have questions.
+
+Clients message:
+`Hi Taimoor,
+Hope you're doing well! Please find below all the requested information for the project. Don't hesitate to reach out if you need anything additional, just a few notes as you move forward:
+
+Design & Layout : Please mirror the structure and layout of 7300vistadelmar.com. For the color palette, refer to the attached book.
+
+Rent Roll: We'd like to include the rent roll on the site, however since it contains sensitive information we'd like it protected behind a login page. Ideally visitors would be able to register by leaving their contact info to create an account and access it. Is that something you can implement?
+
+One thing to note on the rent roll, please omit the tenant names and display unit letters only. I'll also be sending over some other updates along the way, so keep an eye out for those.
+
+Thanks so much for all your hard work! :) 
+
+
+• Property brochure or presentation (if available) [see book attached]
+• Property details (size, price, features, amenities)
+
+address: 1710 Esplanade, Redondo Beach CA 90277:
+
+Size & Physical Details
+
+Building SF: 5,962 sq ft
+Land SF: 6,796 sq ft
+Number of units: 8 (6 one-bed/1-bath at 650 sq ft + 2 two-bed/1-bath at 1,000–1,100 sq ft)
+Stories: 2
+Number of buildings: 1
+Year built: 1956 | Renovated: 1980
+APN: 7511-010-025
+Zoning: RBRMD
+
+Location
+
+Directly on the Esplanade, steps from the beach
+
+• Images and videos of the property [see attached pictures]
+• Floor plans or architectural plans no architectural plans please omit
+• Any text or description you want on the website
+Welcome to Esplanade
+
+An Unrivaled Opportunity on the Sand
+An exceptional opportunity to own a premier beachfront income property in one of the most coveted coastal corridors along LA's South Bay has arrived. 1710 Esplanade sits directly on the Redondo Beach strand, offering unobstructed ocean views, immediate rental income, and long-term appreciation in a market where beachfront supply is virtually nonexistent.
+
+A Coastal Investment Like No Other
+The property unfolds across two levels of thoughtfully designed living space: eight fully renovated units steps from the sand, each offering panoramic ocean views, modern finishes, and abundant natural light. Perfectly positioned along the Esplanade, with direct access to the beach path and Redondo Beach's thriving dining and entertainment scene.
+
+Above it all, the upper-floor units open to sweeping views of the Pacific, framing sun, surf, and the Santa Monica Mountains in uninterrupted sequence.
+
+Property Highlights
+
+8 Units (6 one-bedroom / 2 two-bedroom)
+5,962 Sq.Ft. Living Space / 6,796 Sq.Ft. Lot
+Directly on the Esplanade — steps to the beach
+100% Occupied with strong rental history
+Current NOI: $294,437
+Asking Price: $12,000,000 ($1,500,000/unit)
+Year Built: 1956 | Renovated: 1980
+Zoning: RBRMD | 2 Stories | 1 Building
+
+Income at a Glance
+
+Current Gross Scheduled Rent: $335,280/yr
+Pro Forma Gross Rent: $387,000/yr
+Current CAP Rate: 2.45%
+GRM (Current): 35.79 | GRM (Pro Forma): 31.01
+Significant upside, most units are below market rent
+
+The Market
+Located in one of LA County's most desirable coastal zip codes, 1710 Esplanade benefits from a surrounding demographic with a median household income of $129,240 within one mile and an average household income of $190,280. The immediate area is 50% owner-occupied, with strong sustained demand from renters seeking direct beach access in the South Bay.
+
+• Agent contact details for the site
+
+Rami Elminoufi
+BCB | Premier Estates
+Division of Beach City Brokers
+Real Estate - Investment - Development
+
+Office: 310-543-3536
+Direct: 310-947-1180
+
+DRE# 01434630
+
+1716 S. Catalina Avenue. Hollywood Riviera Office
+Email: rami@bcbestates.com` 
\ No newline at end of file
diff --git a/scripts/start-app.js b/scripts/start-app.js
index 23ff5976..e0297a8d 100644
--- a/scripts/start-app.js
+++ b/scripts/start-app.js
@@ -6,4 +6,4 @@ function shutdownServer() {
 }
 
 process.on('SIGINT', shutdownServer);
-process.on('SIGTERM', shutdownServer);
\ No newline at end of file
+process.on('SIGTERM', shutdownServer);
diff --git a/skills/frontend-design/SKILL.md b/skills/frontend-design/SKILL.md
new file mode 100644
index 00000000..d5a05e27
--- /dev/null
+++ b/skills/frontend-design/SKILL.md
@@ -0,0 +1,45 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
+license: Complete terms in LICENSE.txt
+---
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
+- **Constraints**: Technical requirements (framework, performance, accessibility).
+- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+
+- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
diff --git a/src/app.css b/src/app.css
index 47abcd4d..b9dd8b73 100644
--- a/src/app.css
+++ b/src/app.css
@@ -28,26 +28,29 @@
 :root {
 	/* Website colors */
 	--background: oklch(0.98 0 0);
-	--foreground: oklch(0 0 0);
+	--foreground: oklch(0.41 0 0);
 	--accent: oklch(0.21 0.034 264);
 	--accent-foreground: oklch(0.98 0 0);
+	--border-color: oklch(0 0 0 / 0.1);
 
 	/* Editor colors */
 	--svedit-brand: oklch(60% 0.22 283);
-  --svedit-editing-stroke: var(--svedit-brand);
-  --svedit-editing-fill: oklch(from var(--svedit-brand) l c h / 0.1);
-  --svedit-canvas-stroke: color-mix(in oklch, currentColor 25%, transparent);
+	--svedit-editing-stroke: var(--svedit-brand);
+	--svedit-editing-fill: oklch(from var(--svedit-brand) l c h / 0.1);
+	--svedit-canvas-stroke: color-mix(in oklch, currentColor 25%, transparent);
 
-  /* Rounded corners */
-  --button-border-radius: 3rem; /* rounded corners for buttons, nav items */
-	--image-border-radius: 0.5rem; /* rounded corners for images */
+	/* Rounded corners */
+	--button-border-radius: 0.3rem; /* rounded corners for buttons, nav items */
+	--image-border-radius: 0rem; /* rounded corners for images */
 }
 
 /* Website fonts */
 @theme {
 	--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
 	--font-serif: 'Libertinos Serif Display', ui-serif, Georgia, serif;
-	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	--font-mono:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+		monospace;
 }
 
 @layer utilities {
@@ -69,13 +72,15 @@
 
 /* Scroll-triggered reveal animations
    Comment out the block below to disable */
-.svedit-canvas[contenteditable="false"] .reveal-hidden {
-  opacity: 0;
+.svedit-canvas[contenteditable='false'] .reveal-hidden {
+	opacity: 0;
 	transform: translateY(30px);
 }
 
-.svedit-canvas[contenteditable="false"] .revealed {
-  opacity: 1;
+.svedit-canvas[contenteditable='false'] .revealed {
+	opacity: 1;
 	transform: translateY(0);
-	transition: opacity 0.8s cubic-bezier(0, 0, 0.2, 1), transform 0.8s cubic-bezier(0, 0, 0.2, 1);
+	transition:
+		opacity 0.8s cubic-bezier(0, 0, 0.2, 1),
+		transform 0.8s cubic-bezier(0, 0, 0.2, 1);
 }
diff --git a/src/app.d.ts b/src/app.d.ts
index ef43880a..8b109b22 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -4,8 +4,8 @@ declare global {
 	namespace App {
 		// interface Error {}
 		interface Locals {
-			db: DatabaseSync,
-			user: string,
+			db: DatabaseSync;
+			user: string;
 		}
 		// interface PageData {}
 		// interface PageState {}
diff --git a/src/app.html b/src/app.html
index 48b7c040..4bfe883a 100644
--- a/src/app.html
+++ b/src/app.html
@@ -4,17 +4,22 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-
 		<!-- Open Graph metadata -->
 		<meta property="og:title" content="Editable Website" />
-		<meta property="og:description" content="A SvelteKit template for building CMS-free editable websites. Site owners can edit content directly in the layout - no CMS needed." />
+		<meta
+			property="og:description"
+			content="A SvelteKit template for building CMS-free editable websites. Site owners can edit content directly in the layout - no CMS needed."
+		/>
 		<meta property="og:image" content="/assets/logo.svg" />
 		<meta property="og:type" content="website" />
 
 		<!-- Twitter Card metadata -->
 		<meta name="twitter:card" content="summary" />
 		<meta name="twitter:title" content="Editable Website" />
-		<meta name="twitter:description" content="A SvelteKit template for building CMS-free editable websites. Site owners can edit content directly in the layout - no CMS needed." />
+		<meta
+			name="twitter:description"
+			content="A SvelteKit template for building CMS-free editable websites. Site owners can edit content directly in the layout - no CMS needed."
+		/>
 		<meta name="twitter:image" content="/assets/logo.svg" />
 
 		%sveltekit.head%
diff --git a/src/hooks.server.js b/src/hooks.server.js
index 262d186b..cbbc48fb 100644
--- a/src/hooks.server.js
+++ b/src/hooks.server.js
@@ -14,4 +14,4 @@ export const handle = async ({ event, resolve }) => {
 	// event.locals.user = await getUserInformation(event.cookies.get('sessionid'));
 	const response = await resolve(event);
 	return response;
-};
\ No newline at end of file
+};
diff --git a/src/lib/api.remote.js b/src/lib/api.remote.js
index c40c2406..92c04b41 100644
--- a/src/lib/api.remote.js
+++ b/src/lib/api.remote.js
@@ -2,6 +2,7 @@ import { getRequestEvent, query, command } from '$app/server';
 import * as v from 'valibot';
 import db from '$lib/server/db.js';
 import { document_schema } from '$lib/document_schema.js';
+import { stitch_document } from '$lib/server/documents.js';
 
 /**
  * @typedef {Object} DocumentRow
@@ -82,48 +83,11 @@ function extract_document(document_id, node_ids, all_nodes) {
 	return { document_id, nodes };
 }
 
-/**
- * Get a single document row from the database.
- *
- * @param {string} document_id
- * @returns {DocumentData}
- */
-function get_doc_from_db(document_id) {
-	const doc_row = /** @type {DocumentRow | undefined} */ (
-		db.prepare('SELECT * FROM documents WHERE document_id = ?').get(document_id)
-	);
-	if (!doc_row) {
-		throw new Error(`Document not found: ${document_id}`);
-	}
-	return JSON.parse(doc_row.data);
-}
-
 /**
  * Get a document from the database, stitching in shared documents (nav, footer).
  */
 export const get_document = query(v.string(), async (document_id) => {
-	const page_doc = get_doc_from_db(document_id);
-	const page_node = page_doc.nodes[page_doc.document_id];
-
-	// Start with the page nodes
-	const merged_nodes = { ...page_doc.nodes };
-
-	// Stitch in nav if referenced
-	if (page_node.nav) {
-		const nav_doc = get_doc_from_db(page_node.nav);
-		Object.assign(merged_nodes, nav_doc.nodes);
-	}
-
-	// Stitch in footer if referenced
-	if (page_node.footer) {
-		const footer_doc = get_doc_from_db(page_node.footer);
-		Object.assign(merged_nodes, footer_doc.nodes);
-	}
-
-	return {
-		document_id: page_doc.document_id,
-		nodes: merged_nodes
-	};
+	return stitch_document(document_id);
 });
 
 /**
@@ -153,9 +117,7 @@ export const save_document = command(
 		const footer_root_id = page_node.footer;
 
 		// Collect nav and footer subtrees
-		const nav_node_ids = nav_root_id
-			? collect_node_ids(nav_root_id, all_nodes)
-			: new Set();
+		const nav_node_ids = nav_root_id ? collect_node_ids(nav_root_id, all_nodes) : new Set();
 		const footer_node_ids = footer_root_id
 			? collect_node_ids(footer_root_id, all_nodes)
 			: new Set();
@@ -174,20 +136,41 @@ export const save_document = command(
 		);
 
 		const delete_refs = db.prepare('DELETE FROM asset_refs WHERE document_id = ?');
-		const insert_ref = db.prepare('INSERT OR IGNORE INTO asset_refs (asset_id, document_id) VALUES (?, ?)');
+		const insert_ref = db.prepare(
+			'INSERT OR IGNORE INTO asset_refs (asset_id, document_id) VALUES (?, ?)'
+		);
+
+		const delete_doc_refs = db.prepare('DELETE FROM document_refs WHERE source_document_id = ?');
+		const insert_doc_ref = db.prepare(
+			'INSERT OR IGNORE INTO document_refs (target_document_id, source_document_id) VALUES (?, ?)'
+		);
 
 		// Wrap all upserts in a transaction so either all succeed or none
 		db.exec('BEGIN');
 		try {
 			// Save page
 			upsert.run(combined_doc.document_id, 'page', JSON.stringify(page_doc));
-			update_asset_refs(combined_doc.document_id, page_node_ids, all_nodes, delete_refs, insert_ref);
+			update_asset_refs(
+				combined_doc.document_id,
+				page_node_ids,
+				all_nodes,
+				delete_refs,
+				insert_ref
+			);
+			update_document_refs(
+				combined_doc.document_id,
+				page_node_ids,
+				all_nodes,
+				delete_doc_refs,
+				insert_doc_ref
+			);
 
 			// Save nav if present
 			if (nav_root_id && nav_node_ids.size > 0) {
 				const nav_doc = extract_document(nav_root_id, nav_node_ids, all_nodes);
 				upsert.run(nav_root_id, 'nav', JSON.stringify(nav_doc));
 				update_asset_refs(nav_root_id, nav_node_ids, all_nodes, delete_refs, insert_ref);
+				update_document_refs(nav_root_id, nav_node_ids, all_nodes, delete_doc_refs, insert_doc_ref);
 			}
 
 			// Save footer if present
@@ -195,6 +178,13 @@ export const save_document = command(
 				const footer_doc = extract_document(footer_root_id, footer_node_ids, all_nodes);
 				upsert.run(footer_root_id, 'footer', JSON.stringify(footer_doc));
 				update_asset_refs(footer_root_id, footer_node_ids, all_nodes, delete_refs, insert_ref);
+				update_document_refs(
+					footer_root_id,
+					footer_node_ids,
+					all_nodes,
+					delete_doc_refs,
+					insert_doc_ref
+				);
 			}
 
 			db.exec('COMMIT');
@@ -222,7 +212,13 @@ function update_asset_refs(document_id, node_ids, all_nodes, delete_stmt, insert
 	const asset_ids = new Set();
 	for (const node_id of node_ids) {
 		const node = all_nodes[node_id];
-		if (node && (node.type === 'image' || node.type === 'video') && typeof node.src === 'string' && node.src && !node.src.startsWith('blob:')) {
+		if (
+			node &&
+			(node.type === 'image' || node.type === 'video') &&
+			typeof node.src === 'string' &&
+			node.src &&
+			!node.src.startsWith('blob:')
+		) {
 			asset_ids.add(node.src);
 		}
 	}
@@ -233,3 +229,48 @@ function update_asset_refs(document_id, node_ids, all_nodes, delete_stmt, insert
 		insert_stmt.run(asset_id, document_id);
 	}
 }
+
+/**
+ * Update document_refs for a sub-document: full replace of all refs for the given document_id.
+ * Collects target_document_id values from href properties and link annotations.
+ *
+ * @param {string} document_id
+ * @param {Set<string>} node_ids
+ * @param {Record<string, any>} all_nodes
+ * @param {import('node:sqlite').StatementSync} delete_stmt
+ * @param {import('node:sqlite').StatementSync} insert_stmt
+ */
+function update_document_refs(document_id, node_ids, all_nodes, delete_stmt, insert_stmt) {
+	const targets = new Set();
+
+	for (const node_id of node_ids) {
+		const node = all_nodes[node_id];
+		if (!node) continue;
+
+		// 1. Direct node hrefs (e.g. button, nav_item, link_collection_item)
+		if (node.href && typeof node.href === 'string' && node.href.startsWith('/')) {
+			const target_id = node.href.substring(1).split('#')[0].split('?')[0];
+			if (target_id) targets.add(target_id);
+		}
+
+		// 2. Text node annotations
+		if (node.type === 'text' && node.content && Array.isArray(node.content.annotations)) {
+			for (const ann of node.content.annotations) {
+				if (
+					ann.type === 'link' &&
+					ann.href &&
+					typeof ann.href === 'string' &&
+					ann.href.startsWith('/')
+				) {
+					const target_id = ann.href.substring(1).split('#')[0].split('?')[0];
+					if (target_id) targets.add(target_id);
+				}
+			}
+		}
+	}
+
+	delete_stmt.run(document_id);
+	for (const target_id of targets) {
+		insert_stmt.run(target_id, document_id);
+	}
+}
diff --git a/src/lib/client/asset_processor.js b/src/lib/client/asset_processor.js
index 262de679..57791e83 100644
--- a/src/lib/client/asset_processor.js
+++ b/src/lib/client/asset_processor.js
@@ -147,4 +147,4 @@ self.addEventListener('message', (e) => {
 	if (e.data?.type === 'process') {
 		handle_process(e.data);
 	}
-});
\ No newline at end of file
+});
diff --git a/src/lib/client/asset_upload.js b/src/lib/client/asset_upload.js
index 77c1b1a3..b363f8e2 100644
--- a/src/lib/client/asset_upload.js
+++ b/src/lib/client/asset_upload.js
@@ -111,10 +111,7 @@ export async function start_processing(blob_url, file) {
 
 	if (is_video(file)) {
 		try {
-			const [hash, dims] = await Promise.all([
-				hash_blob(file),
-				get_video_dimensions(file)
-			]);
+			const [hash, dims] = await Promise.all([hash_blob(file), get_video_dimensions(file)]);
 			const ext = get_video_extension(file);
 			entry.hash = hash;
 			entry.asset_id = `${hash}.${ext}`;
@@ -224,7 +221,9 @@ function upload_blob(url, blob, headers, on_progress) {
 				try {
 					const body = JSON.parse(xhr.responseText);
 					if (body.message) message = body.message;
-				} catch { /* ignore */ }
+				} catch {
+					/* ignore */
+				}
 				reject(new Error(message));
 			}
 		});
@@ -266,7 +265,11 @@ async function upload_asset(entry) {
 
 	// If deduplicated, skip variant uploads
 	if (result.deduplicated) {
-		return { asset_id: result.asset_id, width: entry.original.width, height: entry.original.height };
+		return {
+			asset_id: result.asset_id,
+			width: entry.original.width,
+			height: entry.original.height
+		};
 	}
 
 	// Upload variants sequentially
@@ -281,8 +284,12 @@ async function upload_asset(entry) {
 			// Clean up the partially uploaded asset
 			try {
 				await fetch(`/api/assets/${result.asset_id}`, { method: 'DELETE' });
-			} catch { /* best effort cleanup */ }
-			throw new Error(`Variant upload failed (w${variant.width}): ${err instanceof Error ? err.message : err}`);
+			} catch {
+				/* best effort cleanup */
+			}
+			throw new Error(
+				`Variant upload failed (w${variant.width}): ${err instanceof Error ? err.message : err}`
+			);
 		}
 	}
 
@@ -341,7 +348,11 @@ export async function upload_pending(blob_urls, on_progress) {
  */
 export function replace_blob_urls(nodes, mapping) {
 	for (const node of Object.values(nodes)) {
-		if ((node.type === 'image' || node.type === 'video') && typeof node.src === 'string' && node.src.startsWith('blob:')) {
+		if (
+			(node.type === 'image' || node.type === 'video') &&
+			typeof node.src === 'string' &&
+			node.src.startsWith('blob:')
+		) {
 			const entry = mapping.get(node.src);
 			if (entry) {
 				node.src = entry.asset_id;
@@ -397,7 +408,11 @@ export async function ensure_processing(blob_urls) {
 export function collect_blob_urls(nodes) {
 	const blob_urls = [];
 	for (const node of Object.values(nodes)) {
-		if ((node.type === 'image' || node.type === 'video') && typeof node.src === 'string' && node.src.startsWith('blob:')) {
+		if (
+			(node.type === 'image' || node.type === 'video') &&
+			typeof node.src === 'string' &&
+			node.src.startsWith('blob:')
+		) {
 			blob_urls.push(node.src);
 		}
 	}
@@ -414,4 +429,4 @@ export function cleanup_pending(mapping) {
 	for (const blob_url of mapping.keys()) {
 		pending_assets.delete(blob_url);
 	}
-}
\ No newline at end of file
+}
diff --git a/src/lib/client/media_dimensions.js b/src/lib/client/media_dimensions.js
index 1badd969..940c3d5f 100644
--- a/src/lib/client/media_dimensions.js
+++ b/src/lib/client/media_dimensions.js
@@ -86,4 +86,4 @@ export function get_media_dimensions(file) {
 	if (file.type.startsWith('video/')) return get_video_dimensions(file);
 	if (file.type === 'image/svg+xml') return get_svg_dimensions(file);
 	return get_image_dimensions(file);
-}
\ No newline at end of file
+}
diff --git a/src/lib/client/process_asset.js b/src/lib/client/process_asset.js
index 9ceb2a13..36cacf51 100644
--- a/src/lib/client/process_asset.js
+++ b/src/lib/client/process_asset.js
@@ -23,10 +23,7 @@ export function process_asset(file, options = {}) {
 	const { onStatus } = options;
 
 	return new Promise((resolve, reject) => {
-		const worker = new Worker(
-			new URL('./asset_processor.js', import.meta.url),
-			{ type: 'module' }
-		);
+		const worker = new Worker(new URL('./asset_processor.js', import.meta.url), { type: 'module' });
 
 		worker.addEventListener('message', (e) => {
 			const msg = e.data;
@@ -76,4 +73,4 @@ export function process_asset(file, options = {}) {
 			variant_widths: VARIANT_WIDTHS
 		});
 	});
-}
\ No newline at end of file
+}
diff --git a/src/lib/config.js b/src/lib/config.js
index cf31fe34..51a5c708 100644
--- a/src/lib/config.js
+++ b/src/lib/config.js
@@ -26,4 +26,4 @@ export const MEDIA_DEFAULTS = {
 	focal_point_x: 0.5,
 	focal_point_y: 0.5,
 	object_fit: 'cover'
-};
\ No newline at end of file
+};
diff --git a/src/lib/demo_doc.js b/src/lib/demo_doc.js
index 21081617..03ff66ac 100644
--- a/src/lib/demo_doc.js
+++ b/src/lib/demo_doc.js
@@ -3,1212 +3,1287 @@
 // demo_doc merges all three for the static Vercel preview
 
 export const NAV_1 = {
-    "document_id": "nav_1",
-    "nodes": {
-        "nav_logo": {
-            "id": "nav_logo",
-            "type": "image",
-            "src": "logo.svg",
-            "mime_type": "image/svg+xml",
-            "width": 100,
-            "height": 100,
-            "alt": "Logo",
-            "scale": 1,
-            "focal_point_x": 0.5,
-            "focal_point_y": 0.5,
-            "object_fit": "cover"
-        },
-        "DDmmrQzcAxWJfdhatTbkRTh": {
-            "id": "DDmmrQzcAxWJfdhatTbkRTh",
-            "type": "nav_item",
-            "layout": 1,
-            "href": "/#RtYpQwXsZvNmKjHgFdSaLe",
-            "target": "_self",
-            "label": {
-                "text": "Try it",
-                "annotations": []
-            }
-        },
-        "GyKyQvRAvkgnywmxTVgvrnF": {
-            "id": "GyKyQvRAvkgnywmxTVgvrnF",
-            "type": "nav_item",
-            "layout": 1,
-            "href": "/#XVJGXtwnQMvcrcuByAtcWNa",
-            "target": "_self",
-            "label": {
-                "text": "About",
-                "annotations": []
-            }
-        },
-        "FKgjxHCeSbVZrdnPuxYkMYp": {
-            "id": "FKgjxHCeSbVZrdnPuxYkMYp",
-            "type": "nav_item",
-            "layout": 2,
-            "href": "https://docs.google.com/forms/d/e/1FAIpQLSfkL9e9X3Lcn6oBDIG-gU4yrfSenh8fndupbIX7zkyxX3X9ZQ/viewform",
-            "target": "_blank",
-            "label": {
-                "text": "Join the Technical Preview",
-                "annotations": []
-            }
-        },
-        "nav_1": {
-            "id": "nav_1",
-            "type": "nav",
-            "logo": "nav_logo",
-            "nav_items": [
-                "DDmmrQzcAxWJfdhatTbkRTh",
-                "GyKyQvRAvkgnywmxTVgvrnF",
-                "FKgjxHCeSbVZrdnPuxYkMYp"
-            ]
-        }
-    }
+	document_id: 'nav_1',
+	nodes: {
+		nav_logo: {
+			id: 'nav_logo',
+			type: 'image',
+			src: 'logo.svg',
+			mime_type: 'image/svg+xml',
+			width: 100,
+			height: 100,
+			alt: 'Logo',
+			scale: 1,
+			focal_point_x: 0.5,
+			focal_point_y: 0.5,
+			object_fit: 'cover'
+		},
+		DDmmrQzcAxWJfdhatTbkRTh: {
+			id: 'DDmmrQzcAxWJfdhatTbkRTh',
+			type: 'nav_item',
+			layout: 1,
+			href: '/#RtYpQwXsZvNmKjHgFdSaLe',
+			target: '_self',
+			label: {
+				text: 'Try it',
+				annotations: []
+			}
+		},
+		GyKyQvRAvkgnywmxTVgvrnF: {
+			id: 'GyKyQvRAvkgnywmxTVgvrnF',
+			type: 'nav_item',
+			layout: 1,
+			href: '/#XVJGXtwnQMvcrcuByAtcWNa',
+			target: '_self',
+			label: {
+				text: 'About',
+				annotations: []
+			}
+		},
+		FKgjxHCeSbVZrdnPuxYkMYp: {
+			id: 'FKgjxHCeSbVZrdnPuxYkMYp',
+			type: 'nav_item',
+			layout: 2,
+			href: 'https://docs.google.com/forms/d/e/1FAIpQLSfkL9e9X3Lcn6oBDIG-gU4yrfSenh8fndupbIX7zkyxX3X9ZQ/viewform',
+			target: '_blank',
+			label: {
+				text: 'Join the Technical Preview',
+				annotations: []
+			}
+		},
+		nav_1: {
+			id: 'nav_1',
+			type: 'nav',
+			logo: 'nav_logo',
+			company_name: {
+				text: 'Company name',
+				annotations: []
+			},
+			nav_items: ['DDmmrQzcAxWJfdhatTbkRTh', 'GyKyQvRAvkgnywmxTVgvrnF', 'FKgjxHCeSbVZrdnPuxYkMYp']
+		}
+	}
 };
 
 export const FOOTER_1 = {
-    "document_id": "footer_1",
-    "nodes": {
-        "footer_logo": {
-            "id": "footer_logo",
-            "type": "image",
-            "src": "logo.svg",
-            "mime_type": "image/svg+xml",
-            "width": 100,
-            "height": 100,
-            "alt": "Logo",
-            "scale": 1,
-            "focal_point_x": 0.5,
-            "focal_point_y": 0.5,
-            "object_fit": "cover"
-        },
-        "EtcfbabRCtPSvSpfFfjPeza": {
-            "id": "EtcfbabRCtPSvSpfFfjPeza",
-            "type": "footer_link",
-            "href": "/#RtYpQwXsZvNmKjHgFdSaLe",
-            "target": "_self",
-            "label": {
-                "text": "Editing",
-                "annotations": []
-            }
-        },
-        "WVvBSREFCThNYcpgvfUnWkF": {
-            "id": "WVvBSREFCThNYcpgvfUnWkF",
-            "type": "footer_link",
-            "href": "/#xKmNqPrStVwYzAbCdEfGh",
-            "target": "_self",
-            "label": {
-                "text": "Blocks",
-                "annotations": []
-            }
-        },
-        "eDAnnFjNdZpzYMtpSqReBxf": {
-            "id": "eDAnnFjNdZpzYMtpSqReBxf",
-            "type": "footer_link",
-            "href": "/#BPdekRaDEUcQZqtEwPwBvyu",
-            "target": "_self",
-            "label": {
-                "text": "Images",
-                "annotations": []
-            }
-        },
-        "GwPeRFYtAyrcCMfpuyzdWZp": {
-            "id": "GwPeRFYtAyrcCMfpuyzdWZp",
-            "type": "footer_link",
-            "href": "/#jLnPqRsTuVwXyZaBcDeFg",
-            "target": "_self",
-            "label": {
-                "text": "Links",
-                "annotations": []
-            }
-        },
-        "fcSSWQUTYajjknPChgGsPZz": {
-            "id": "fcSSWQUTYajjknPChgGsPZz",
-            "type": "footer_link_column",
-            "footer_links": [
-                "EtcfbabRCtPSvSpfFfjPeza",
-                "WVvBSREFCThNYcpgvfUnWkF",
-                "eDAnnFjNdZpzYMtpSqReBxf",
-                "GwPeRFYtAyrcCMfpuyzdWZp"
-            ],
-            "label": {
-                "text": "On this page",
-                "annotations": []
-            }
-        },
-        "uavzfSnSpTRrHSfJpbfvpsh": {
-            "id": "uavzfSnSpTRrHSfJpbfvpsh",
-            "type": "footer_link",
-            "href": "https://github.com/michael/editable-website",
-            "target": "_blank",
-            "label": {
-                "text": "Editable Website",
-                "annotations": []
-            }
-        },
-        "footer_link_2_1": {
-            "id": "footer_link_2_1",
-            "type": "footer_link",
-            "href": "https://svedit.dev",
-            "label": {
-                "text": "Svedit",
-                "annotations": []
-            },
-            "target": "_blank"
-        },
-        "footer_column_2": {
-            "id": "footer_column_2",
-            "type": "footer_link_column",
-            "label": {
-                "text": "GitHub",
-                "annotations": []
-            },
-            "footer_links": [
-                "uavzfSnSpTRrHSfJpbfvpsh",
-                "footer_link_2_1"
-            ]
-        },
-        "ewuBYPxRqFsJXffTuwqssXg": {
-            "id": "ewuBYPxRqFsJXffTuwqssXg",
-            "type": "footer_link",
-            "href": "https://www.youtube.com/watch?v=T2RMYj_1g9E",
-            "label": {
-                "text": "Introduction",
-                "annotations": []
-            },
-            "target": "_blank"
-        },
-        "cCMbgzNjRjVjrvWuHJCvJkx": {
-            "id": "cCMbgzNjRjVjrvWuHJCvJkx",
-            "type": "footer_link",
-            "href": "https://youtu.be/o4kcABS-XH4?t=3226",
-            "target": "_blank",
-            "label": {
-                "text": "Update 2025-10",
-                "annotations": []
-            }
-        },
-        "footer_column_3": {
-            "id": "footer_column_3",
-            "type": "footer_link_column",
-            "label": {
-                "text": "Videos",
-                "annotations": []
-            },
-            "footer_links": [
-                "ewuBYPxRqFsJXffTuwqssXg",
-                "cCMbgzNjRjVjrvWuHJCvJkx"
-            ]
-        },
-        "footer_1": {
-            "id": "footer_1",
-            "type": "footer",
-            "logo": "footer_logo",
-            "copyright": {
-                "text": "© Editable Website",
-                "annotations": []
-            },
-            "footer_link_columns": [
-                "fcSSWQUTYajjknPChgGsPZz",
-                "footer_column_2",
-                "footer_column_3"
-            ]
-        }
-    }
+	document_id: 'footer_1',
+	nodes: {
+		footer_logo: {
+			id: 'footer_logo',
+			type: 'image',
+			src: 'logo.svg',
+			mime_type: 'image/svg+xml',
+			width: 100,
+			height: 100,
+			alt: 'Logo',
+			scale: 1,
+			focal_point_x: 0.5,
+			focal_point_y: 0.5,
+			object_fit: 'cover'
+		},
+		footer_team_thumb: {
+			id: 'footer_team_thumb',
+			type: 'image',
+			src: 'team-thumb.jpg',
+			mime_type: 'image/jpeg',
+			width: 300,
+			height: 300,
+			alt: 'Team member',
+			scale: 1,
+			focal_point_x: 0.5,
+			focal_point_y: 0.5,
+			object_fit: 'cover'
+		},
+		EtcfbabRCtPSvSpfFfjPeza: {
+			id: 'EtcfbabRCtPSvSpfFfjPeza',
+			type: 'footer_link',
+			href: '/#RtYpQwXsZvNmKjHgFdSaLe',
+			target: '_self',
+			label: {
+				text: 'Editing',
+				annotations: []
+			}
+		},
+		WVvBSREFCThNYcpgvfUnWkF: {
+			id: 'WVvBSREFCThNYcpgvfUnWkF',
+			type: 'footer_link',
+			href: '/#xKmNqPrStVwYzAbCdEfGh',
+			target: '_self',
+			label: {
+				text: 'Blocks',
+				annotations: []
+			}
+		},
+		eDAnnFjNdZpzYMtpSqReBxf: {
+			id: 'eDAnnFjNdZpzYMtpSqReBxf',
+			type: 'footer_link',
+			href: '/#BPdekRaDEUcQZqtEwPwBvyu',
+			target: '_self',
+			label: {
+				text: 'Images',
+				annotations: []
+			}
+		},
+		GwPeRFYtAyrcCMfpuyzdWZp: {
+			id: 'GwPeRFYtAyrcCMfpuyzdWZp',
+			type: 'footer_link',
+			href: '/#jLnPqRsTuVwXyZaBcDeFg',
+			target: '_self',
+			label: {
+				text: 'Links',
+				annotations: []
+			}
+		},
+		fcSSWQUTYajjknPChgGsPZz: {
+			id: 'fcSSWQUTYajjknPChgGsPZz',
+			type: 'footer_link_column',
+			footer_links: [
+				'EtcfbabRCtPSvSpfFfjPeza',
+				'WVvBSREFCThNYcpgvfUnWkF',
+				'eDAnnFjNdZpzYMtpSqReBxf',
+				'GwPeRFYtAyrcCMfpuyzdWZp'
+			],
+			label: {
+				text: 'On this page',
+				annotations: []
+			}
+		},
+		uavzfSnSpTRrHSfJpbfvpsh: {
+			id: 'uavzfSnSpTRrHSfJpbfvpsh',
+			type: 'footer_link',
+			href: 'https://github.com/michael/editable-website',
+			target: '_blank',
+			label: {
+				text: 'Editable Website',
+				annotations: []
+			}
+		},
+		footer_link_2_1: {
+			id: 'footer_link_2_1',
+			type: 'footer_link',
+			href: 'https://svedit.dev',
+			label: {
+				text: 'Svedit',
+				annotations: []
+			},
+			target: '_blank'
+		},
+		footer_column_2: {
+			id: 'footer_column_2',
+			type: 'footer_link_column',
+			label: {
+				text: 'GitHub',
+				annotations: []
+			},
+			footer_links: ['uavzfSnSpTRrHSfJpbfvpsh', 'footer_link_2_1']
+		},
+		ewuBYPxRqFsJXffTuwqssXg: {
+			id: 'ewuBYPxRqFsJXffTuwqssXg',
+			type: 'footer_link',
+			href: 'https://www.youtube.com/watch?v=T2RMYj_1g9E',
+			label: {
+				text: 'Introduction',
+				annotations: []
+			},
+			target: '_blank'
+		},
+		cCMbgzNjRjVjrvWuHJCvJkx: {
+			id: 'cCMbgzNjRjVjrvWuHJCvJkx',
+			type: 'footer_link',
+			href: 'https://youtu.be/o4kcABS-XH4?t=3226',
+			target: '_blank',
+			label: {
+				text: 'Update 2025-10',
+				annotations: []
+			}
+		},
+		footer_column_3: {
+			id: 'footer_column_3',
+			type: 'footer_link_column',
+			label: {
+				text: 'Videos',
+				annotations: []
+			},
+			footer_links: ['ewuBYPxRqFsJXffTuwqssXg', 'cCMbgzNjRjVjrvWuHJCvJkx']
+		},
+		footer_1: {
+			id: 'footer_1',
+			type: 'footer',
+			logo: 'footer_logo',
+			team_thumb: 'footer_team_thumb',
+			company_name: {
+				text: 'Company name',
+				annotations: []
+			},
+			company_description: {
+				text: 'Short description goes here.',
+				annotations: []
+			},
+			company_address: {
+				text: '123 Main St, City',
+				annotations: []
+			},
+			company_phone: {
+				text: '(555) 555-5555',
+				annotations: []
+			},
+			team_label: {
+				text: 'Team',
+				annotations: []
+			},
+			team_name: {
+				text: 'Agent name',
+				annotations: []
+			},
+			team_description: {
+				text: 'Role, short bio, or contact blurb.',
+				annotations: []
+			},
+			copyright: {
+				text: '© Editable Website',
+				annotations: []
+			},
+			footer_link_columns: ['fcSSWQUTYajjknPChgGsPZz', 'footer_column_2', 'footer_column_3']
+		}
+	}
 };
 
 export const PAGE_1 = {
-    "document_id": "page_1",
-    "nodes": {
-        "ccHVKDeyhrRVfKZCpXvxhac": {
-            "id": "ccHVKDeyhrRVfKZCpXvxhac",
-            "type": "button",
-            "layout": 1,
-            "href": "/#RtYpQwXsZvNmKjHgFdSaLe",
-            "target": "_self",
-            "label": {
-                "text": "↓",
-                "annotations": []
-            }
-        },
-        "hero_1": {
-            "id": "hero_1",
-            "type": "hero",
-            "layout": 1,
-            "colorset": 0,
-            "title": {
-                "text": "Imagine you could edit ✍️ your website live on the page",
-                "annotations": []
-            },
-            "description": {
-                "text": "Dream no more…",
-                "annotations": []
-            },
-            "buttons": [
-                "ccHVKDeyhrRVfKZCpXvxhac"
-            ]
-        },
-        "VbNcMxZaQwErTyUiOpLkJh": {
-            "id": "VbNcMxZaQwErTyUiOpLkJh",
-            "type": "image",
-            "src": "cmde.webp",
-            "mime_type": "image/webp",
-            "width": 768,
-            "height": 1024,
-            "alt": "Feature image",
-            "scale": 1,
-            "focal_point_x": 0.5329817181174089,
-            "focal_point_y": 0.47301940896272265,
-            "object_fit": "cover"
-        },
-        "uqZnrCRbzCkBWmYNQYkFePY": {
-            "id": "uqZnrCRbzCkBWmYNQYkFePY",
-            "type": "text",
-            "layout": 5,
-            "content": {
-                "text": "Editing",
-                "annotations": []
-            }
-        },
-        "WsXcDfVgBhNjMkLqAzPeRt": {
-            "id": "WsXcDfVgBhNjMkLqAzPeRt",
-            "type": "text",
-            "layout": 2,
-            "content": {
-                "text": "This is Editable Website",
-                "annotations": []
-            }
-        },
-        "RezNUsxYmfpmFMezpgEbqYu": {
-            "id": "RezNUsxYmfpmFMezpgEbqYu",
-            "type": "strong"
-        },
-        "ywTQktXzgyRqzsUNXjZztQw": {
-            "id": "ywTQktXzgyRqzsUNXjZztQw",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "Press ⌘ / Ctrl + e to enter edit mode.\nClick where you want to edit.\nMove around with the arrow keys.\nChange anything you see!",
-                "annotations": [
-                    {
-                        "start_offset": 6,
-                        "end_offset": 18,
-                        "node_id": "RezNUsxYmfpmFMezpgEbqYu"
-                    }
-                ]
-            }
-        },
-        "NhhsYbqTRzPtpQcHFUgwFhP": {
-            "id": "NhhsYbqTRzPtpQcHFUgwFhP",
-            "type": "strong"
-        },
-        "ypAZzWFdhamCaTMKmZMZPMm": {
-            "id": "ypAZzWFdhamCaTMKmZMZPMm",
-            "type": "strong"
-        },
-        "wuyFjXptXyMvgYKUcvtTggC": {
-            "id": "wuyFjXptXyMvgYKUcvtTggC",
-            "type": "strong"
-        },
-        "ZWDXzUmKJbqDwJbNTbhEtWQ": {
-            "id": "ZWDXzUmKJbqDwJbNTbhEtWQ",
-            "type": "strong"
-        },
-        "zqyQQtSbzxtdTTsVTYuuXEh": {
-            "id": "zqyQQtSbzxtdTTsVTYuuXEh",
-            "type": "strong"
-        },
-        "CUTpvupqUbXQDyMjBczwfCj": {
-            "id": "CUTpvupqUbXQDyMjBczwfCj",
-            "type": "emphasis"
-        },
-        "PYHXbxRMREHBpAqxbdsUXzP": {
-            "id": "PYHXbxRMREHBpAqxbdsUXzP",
-            "type": "strong"
-        },
-        "djTpcsEQTzfGMSRctKenpWt": {
-            "id": "djTpcsEQTzfGMSRctKenpWt",
-            "type": "emphasis"
-        },
-        "eUteADFhxtenJraxpeprgHr": {
-            "id": "eUteADFhxtenJraxpeprgHr",
-            "type": "link",
-            "href": "#",
-            "target": "_self"
-        },
-        "WjasMkTrmjdrXTsDgeUHQap": {
-            "id": "WjasMkTrmjdrXTsDgeUHQap",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "Bold, italics and links with ⌘ / Ctrl + b, i and k\nUndo with ⌘ / Ctrl + z\nSave changes with ⌘ / Ctrl + s\n(On this example page, changes are not persisted. On a real site, a logged in user would have their changes persisted to a database.)",
-                "annotations": [
-                    {
-                        "start_offset": 29,
-                        "end_offset": 41,
-                        "node_id": "NhhsYbqTRzPtpQcHFUgwFhP"
-                    },
-                    {
-                        "start_offset": 43,
-                        "end_offset": 45,
-                        "node_id": "ypAZzWFdhamCaTMKmZMZPMm"
-                    },
-                    {
-                        "start_offset": 49,
-                        "end_offset": 50,
-                        "node_id": "wuyFjXptXyMvgYKUcvtTggC"
-                    },
-                    {
-                        "start_offset": 61,
-                        "end_offset": 73,
-                        "node_id": "ZWDXzUmKJbqDwJbNTbhEtWQ"
-                    },
-                    {
-                        "start_offset": 92,
-                        "end_offset": 104,
-                        "node_id": "zqyQQtSbzxtdTTsVTYuuXEh"
-                    },
-                    {
-                        "start_offset": 105,
-                        "end_offset": 238,
-                        "node_id": "CUTpvupqUbXQDyMjBczwfCj"
-                    },
-                    {
-                        "start_offset": 0,
-                        "end_offset": 4,
-                        "node_id": "PYHXbxRMREHBpAqxbdsUXzP"
-                    },
-                    {
-                        "start_offset": 6,
-                        "end_offset": 13,
-                        "node_id": "djTpcsEQTzfGMSRctKenpWt"
-                    },
-                    {
-                        "start_offset": 18,
-                        "end_offset": 23,
-                        "node_id": "eUteADFhxtenJraxpeprgHr"
-                    }
-                ]
-            }
-        },
-        "DxBvNYzBgktMyKjKkKyYcAN": {
-            "id": "DxBvNYzBgktMyKjKkKyYcAN",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "Looking for the admin panel? There isn't any! It's just you, and your content.",
-                "annotations": []
-            }
-        },
-        "RtYpQwXsZvNmKjHgFdSaLe": {
-            "id": "RtYpQwXsZvNmKjHgFdSaLe",
-            "type": "feature",
-            "layout": 1,
-            "colorset": 0,
-            "media": "VbNcMxZaQwErTyUiOpLkJh",
-            "body": [
-                "uqZnrCRbzCkBWmYNQYkFePY",
-                "WsXcDfVgBhNjMkLqAzPeRt",
-                "ywTQktXzgyRqzsUNXjZztQw",
-                "WjasMkTrmjdrXTsDgeUHQap",
-                "DxBvNYzBgktMyKjKkKyYcAN"
-            ]
-        },
-        "HWcSGEAsZyfeQFjgvKrMpZc": {
-            "id": "HWcSGEAsZyfeQFjgvKrMpZc",
-            "type": "text",
-            "layout": 5,
-            "content": {
-                "text": "Blocks",
-                "annotations": []
-            }
-        },
-        "heading_1": {
-            "id": "heading_1",
-            "type": "text",
-            "layout": 2,
-            "content": {
-                "text": "Build with blocks",
-                "annotations": []
-            }
-        },
-        "pRPkWyTzrgwfHhbnUgvHPph": {
-            "id": "pRPkWyTzrgwfHhbnUgvHPph",
-            "type": "strong"
-        },
-        "fuxtxNCceDRcdbcHhtqsYwJ": {
-            "id": "fuxtxNCceDRcdbcHhtqsYwJ",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "In edit mode the dashed gaps let you add blocks.",
-                "annotations": [
-                    {
-                        "start_offset": 17,
-                        "end_offset": 36,
-                        "node_id": "pRPkWyTzrgwfHhbnUgvHPph"
-                    }
-                ]
-            }
-        },
-        "szexETNtKsPwJPPECvSbMbn": {
-            "id": "szexETNtKsPwJPPECvSbMbn",
-            "type": "strong"
-        },
-        "uDAGgETYUPFDYHKSvDBwmPw": {
-            "id": "uDAGgETYUPFDYHKSvDBwmPw",
-            "type": "strong"
-        },
-        "MheDsAwTmfQDGqdkpMWgXUH": {
-            "id": "MheDsAwTmfQDGqdkpMWgXUH",
-            "type": "strong"
-        },
-        "dAEBKADbvfeaBMhNWgTjKNC": {
-            "id": "dAEBKADbvfeaBMhNWgTjKNC",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "Select the dashed gap below this paragraph to see a flashing purple cursor.\nPress Enter to add a block.\nChange text styles (paragraph > heading etc) with Ctrl + Shift + Right.",
-                "annotations": [
-                    {
-                        "start_offset": 155,
-                        "end_offset": 175,
-                        "node_id": "szexETNtKsPwJPPECvSbMbn"
-                    },
-                    {
-                        "start_offset": 83,
-                        "end_offset": 88,
-                        "node_id": "uDAGgETYUPFDYHKSvDBwmPw"
-                    },
-                    {
-                        "start_offset": 11,
-                        "end_offset": 22,
-                        "node_id": "MheDsAwTmfQDGqdkpMWgXUH"
-                    }
-                ]
-            }
-        },
-        "GZGpvNSHNjPJtHVfmGbRBNf": {
-            "id": "GZGpvNSHNjPJtHVfmGbRBNf",
-            "type": "strong"
-        },
-        "TfUCWjmVMpUWSNWhBkBjTgB": {
-            "id": "TfUCWjmVMpUWSNWhBkBjTgB",
-            "type": "strong"
-        },
-        "ryUPAdHaGfFcHAqdHPSdUMR": {
-            "id": "ryUPAdHaGfFcHAqdHPSdUMR",
-            "type": "strong"
-        },
-        "wrMTxwEDPezkagDwymXFFuq": {
-            "id": "wrMTxwEDPezkagDwymXFFuq",
-            "type": "strong"
-        },
-        "dKDJFxDKresxkjMUZYKNuKn": {
-            "id": "dKDJFxDKresxkjMUZYKNuKn",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "Select one of the full width dashed gap to see a flashing purple cursor.\nPress Enter to create a new top-level block.\nCtrl + Shift + Down cycles through block types.\nAgain Ctrl + Shift + Right lets you flip through available layouts.",
-                "annotations": [
-                    {
-                        "start_offset": 81,
-                        "end_offset": 86,
-                        "node_id": "GZGpvNSHNjPJtHVfmGbRBNf"
-                    },
-                    {
-                        "start_offset": 120,
-                        "end_offset": 139,
-                        "node_id": "TfUCWjmVMpUWSNWhBkBjTgB"
-                    },
-                    {
-                        "start_offset": 18,
-                        "end_offset": 41,
-                        "node_id": "ryUPAdHaGfFcHAqdHPSdUMR"
-                    },
-                    {
-                        "start_offset": 174,
-                        "end_offset": 194,
-                        "node_id": "wrMTxwEDPezkagDwymXFFuq"
-                    }
-                ]
-            }
-        },
-        "fwXyaDrZNGRyMhZMbascTYb": {
-            "id": "fwXyaDrZNGRyMhZMbascTYb",
-            "type": "strong"
-        },
-        "dwMqDGUwHVvVkdzahPEWDuR": {
-            "id": "dwMqDGUwHVvVkdzahPEWDuR",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "To move blocks, drag from a dashed gap to select multiple, then cut and paste like usual.",
-                "annotations": [
-                    {
-                        "start_offset": 16,
-                        "end_offset": 35,
-                        "node_id": "fwXyaDrZNGRyMhZMbascTYb"
-                    }
-                ]
-            }
-        },
-        "FGHDfRZMdeYQeVJBarNFeHa": {
-            "id": "FGHDfRZMdeYQeVJBarNFeHa",
-            "type": "strong"
-        },
-        "gkHzcWkcKRsYffDnwJtGnjG": {
-            "id": "gkHzcWkcKRsYffDnwJtGnjG",
-            "type": "strong"
-        },
-        "smJYScwGbZgRVDAJWhNGxvG": {
-            "id": "smJYScwGbZgRVDAJWhNGxvG",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "Pro tip: Press Esc to select the parent block. Useful when editing text but wanting to change the parent layout.",
-                "annotations": [
-                    {
-                        "start_offset": 0,
-                        "end_offset": 8,
-                        "node_id": "FGHDfRZMdeYQeVJBarNFeHa"
-                    },
-                    {
-                        "start_offset": 15,
-                        "end_offset": 18,
-                        "node_id": "gkHzcWkcKRsYffDnwJtGnjG"
-                    }
-                ]
-            }
-        },
-        "xKmNqPrStVwYzAbCdEfGh": {
-            "id": "xKmNqPrStVwYzAbCdEfGh",
-            "type": "prose",
-            "layout": 1,
-            "colorset": 0,
-            "content": [
-                "HWcSGEAsZyfeQFjgvKrMpZc",
-                "heading_1",
-                "fuxtxNCceDRcdbcHhtqsYwJ",
-                "dAEBKADbvfeaBMhNWgTjKNC",
-                "dKDJFxDKresxkjMUZYKNuKn",
-                "dwMqDGUwHVvVkdzahPEWDuR",
-                "smJYScwGbZgRVDAJWhNGxvG"
-            ]
-        },
-        "AHXsSZcYYwnXKYzHbDnSRRh": {
-            "id": "AHXsSZcYYwnXKYzHbDnSRRh",
-            "type": "text",
-            "layout": 5,
-            "content": {
-                "text": "Images",
-                "annotations": []
-            }
-        },
-        "BfpsPAaqmJXnRrHzwJCSMHE": {
-            "id": "BfpsPAaqmJXnRrHzwJCSMHE",
-            "type": "text",
-            "layout": 2,
-            "content": {
-                "text": "Add images to a gallery",
-                "annotations": []
-            }
-        },
-        "DpajqNKpCCFFqZHtbttRRwM": {
-            "id": "DpajqNKpCCFFqZHtbttRRwM",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "Open a folder on your computer that has some images.\nSelect one and copy it to the clipboard.\nSelect the placeholder below and paste it.\nTo replace an image, select it first, then paste the new one on top.",
-                "annotations": []
-            }
-        },
-        "jEhPHUyzqvpNeSHYfKCkYgS": {
-            "id": "jEhPHUyzqvpNeSHYfKCkYgS",
-            "type": "image",
-            "src": "user1-desktop.webp",
-            "mime_type": "image/webp",
-            "width": 800,
-            "height": 600,
-            "alt": "Sample image",
-            "scale": 1,
-            "focal_point_x": 0.5,
-            "focal_point_y": 0.5,
-            "object_fit": "cover"
-        },
-        "wtvHDBrCzJVgacTaJqAwNJk": {
-            "id": "wtvHDBrCzJVgacTaJqAwNJk",
-            "type": "gallery_item",
-            "media": "jEhPHUyzqvpNeSHYfKCkYgS"
-        },
-        "ZjdBYZdXQedwuTdVFGHdDEj": {
-            "id": "ZjdBYZdXQedwuTdVFGHdDEj",
-            "type": "image",
-            "src": "user1-notebook.webp",
-            "mime_type": "image/webp",
-            "width": 800,
-            "height": 600,
-            "alt": "Sample image",
-            "scale": 1,
-            "focal_point_x": 0.6705601092896176,
-            "focal_point_y": 0.4532274590163934,
-            "object_fit": "cover"
-        },
-        "TQRANBXMrzXXZTtzxAYhhZf": {
-            "id": "TQRANBXMrzXXZTtzxAYhhZf",
-            "type": "gallery_item",
-            "media": "ZjdBYZdXQedwuTdVFGHdDEj"
-        },
-        "UGfbRKEMbGwgcUjhpgXausS": {
-            "id": "UGfbRKEMbGwgcUjhpgXausS",
-            "type": "image",
-            "src": "",
-            "mime_type": "",
-            "width": 800,
-            "height": 600,
-            "alt": "Sample image",
-            "scale": 1,
-            "focal_point_x": 0.5,
-            "focal_point_y": 0.5,
-            "object_fit": "cover"
-        },
-        "HtSTZfjTcDSkttVaTUKMYAj": {
-            "id": "HtSTZfjTcDSkttVaTUKMYAj",
-            "type": "gallery_item",
-            "media": "UGfbRKEMbGwgcUjhpgXausS"
-        },
-        "cMtzexVuqMWFgEpxhYjRQFq": {
-            "id": "cMtzexVuqMWFgEpxhYjRQFq",
-            "type": "strong"
-        },
-        "BKVAhVQRTzRGhGGqpfrQnsu": {
-            "id": "BKVAhVQRTzRGhGGqpfrQnsu",
-            "type": "strong"
-        },
-        "NKtUpjrVYCGaJWYKGACXprb": {
-            "id": "NKtUpjrVYCGaJWYKGACXprb",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "You can even paste several images at once.\nSelect three or four from your computer and copy to the clipboard.\nNow select a vertical dashed area before or after an image above.\nPaste and all the images will be added in one go.",
-                "annotations": [
-                    {
-                        "start_offset": 123,
-                        "end_offset": 143,
-                        "node_id": "cMtzexVuqMWFgEpxhYjRQFq"
-                    },
-                    {
-                        "start_offset": 13,
-                        "end_offset": 33,
-                        "node_id": "BKVAhVQRTzRGhGGqpfrQnsu"
-                    }
-                ]
-            }
-        },
-        "BPdekRaDEUcQZqtEwPwBvyu": {
-            "id": "BPdekRaDEUcQZqtEwPwBvyu",
-            "type": "gallery",
-            "layout": 1,
-            "colorset": 0,
-            "intro": [
-                "AHXsSZcYYwnXKYzHbDnSRRh",
-                "BfpsPAaqmJXnRrHzwJCSMHE",
-                "DpajqNKpCCFFqZHtbttRRwM"
-            ],
-            "gallery_items": [
-                "wtvHDBrCzJVgacTaJqAwNJk",
-                "TQRANBXMrzXXZTtzxAYhhZf",
-                "HtSTZfjTcDSkttVaTUKMYAj"
-            ],
-            "outro": [
-                "NKtUpjrVYCGaJWYKGACXprb"
-            ]
-        },
-        "FMmrrRxdfRzhujVmergnVxA": {
-            "id": "FMmrrRxdfRzhujVmergnVxA",
-            "type": "text",
-            "layout": 5,
-            "content": {
-                "text": "Links",
-                "annotations": []
-            }
-        },
-        "AjbSGnXVcWpHBurCTrKxYSs": {
-            "id": "AjbSGnXVcWpHBurCTrKxYSs",
-            "type": "text",
-            "layout": 2,
-            "content": {
-                "text": "Link to other pages",
-                "annotations": []
-            }
-        },
-        "XDMsYPfWXKqvhCMsEDWfDnx": {
-            "id": "XDMsYPfWXKqvhCMsEDWfDnx",
-            "type": "strong"
-        },
-        "VdjTDrdPmtXRuYKNUMeRmKK": {
-            "id": "VdjTDrdPmtXRuYKNUMeRmKK",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "Click on one of the cards below.\nA link preview appears at the bottom.\nClick “EDIT” or press ⌘ / Ctrl + k to bring up the link editor.",
-                "annotations": [
-                    {
-                        "start_offset": 93,
-                        "end_offset": 105,
-                        "node_id": "XDMsYPfWXKqvhCMsEDWfDnx"
-                    }
-                ]
-            }
-        },
-        "nprCMwYvJvUEmRaHBsxfgUd": {
-            "id": "nprCMwYvJvUEmRaHBsxfgUd",
-            "type": "image",
-            "src": "gluecksmaurer.webp",
-            "mime_type": "image/webp",
-            "width": 800,
-            "height": 600,
-            "alt": "Getting started",
-            "scale": 1,
-            "focal_point_x": 0.43320363152669056,
-            "focal_point_y": 0.4116619557277606,
-            "object_fit": "cover"
-        },
-        "JUmgwJDKqdxVxJeBHkBdjVq": {
-            "id": "JUmgwJDKqdxVxJeBHkBdjVq",
-            "type": "link_collection_item",
-            "href": "https://gluecksmaurer.de",
-            "target": "_blank",
-            "media": "nprCMwYvJvUEmRaHBsxfgUd",
-            "preline": {
-                "text": "Real estate",
-                "annotations": []
-            },
-            "title": {
-                "text": "Glücksmaurer",
-                "annotations": []
-            },
-            "description": {
-                "text": "Innovative real estate agent in Worms, Germany.",
-                "annotations": []
-            }
-        },
-        "link_collection_item_2_image": {
-            "id": "link_collection_item_2_image",
-            "type": "image",
-            "src": "colbourns.webp",
-            "mime_type": "image/webp",
-            "width": 800,
-            "height": 600,
-            "alt": "Customization",
-            "scale": 1,
-            "focal_point_x": 0.3904038894325596,
-            "focal_point_y": 0.5509243899928726,
-            "object_fit": "cover"
-        },
-        "link_collection_item_2": {
-            "id": "link_collection_item_2",
-            "type": "link_collection_item",
-            "href": "https://colbourns.com",
-            "target": "_blank",
-            "media": "link_collection_item_2_image",
-            "preline": {
-                "text": "Flooring design",
-                "annotations": []
-            },
-            "title": {
-                "text": "Colbourns",
-                "annotations": []
-            },
-            "description": {
-                "text": "London-based designer of premium-quality, elegant rugs.",
-                "annotations": []
-            }
-        },
-        "ReRqxYxMdAUVaMuudfJhzsS": {
-            "id": "ReRqxYxMdAUVaMuudfJhzsS",
-            "type": "image",
-            "src": "tomorrow-vc.webp",
-            "mime_type": "image/webp",
-            "width": 800,
-            "height": 600,
-            "alt": "Svedit documentation",
-            "scale": 1,
-            "focal_point_x": 0.4449945007030935,
-            "focal_point_y": 1,
-            "object_fit": "cover"
-        },
-        "YnBCBuemwpaUxQwHrFJNgMW": {
-            "id": "YnBCBuemwpaUxQwHrFJNgMW",
-            "type": "link_collection_item",
-            "href": "https://tomorrow.vc",
-            "target": "_blank",
-            "media": "ReRqxYxMdAUVaMuudfJhzsS",
-            "preline": {
-                "text": "Venture capital",
-                "annotations": []
-            },
-            "title": {
-                "text": "Visionaries Tomorrow",
-                "annotations": []
-            },
-            "description": {
-                "text": "An early-stage industrial deep tech fund.",
-                "annotations": []
-            }
-        },
-        "VqaqUWzRKUJrZzQYqqurggB": {
-            "id": "VqaqUWzRKUJrZzQYqqurggB",
-            "type": "link",
-            "href": "https://mutter.co",
-            "target": "_blank"
-        },
-        "kZQHRTYyJtbmsJfnXaRgVtZ": {
-            "id": "kZQHRTYyJtbmsJfnXaRgVtZ",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "The cards above are links to examples of live in-place editable websites Johannes Mutter and I have already launched using this technology. You can see that any design is possible — it’s just HTML and CSS.",
-                "annotations": [
-                    {
-                        "start_offset": 73,
-                        "end_offset": 88,
-                        "node_id": "VqaqUWzRKUJrZzQYqqurggB"
-                    }
-                ]
-            }
-        },
-        "jLnPqRsTuVwXyZaBcDeFg": {
-            "id": "jLnPqRsTuVwXyZaBcDeFg",
-            "type": "link_collection",
-            "layout": 1,
-            "colorset": 0,
-            "intro": [
-                "FMmrrRxdfRzhujVmergnVxA",
-                "AjbSGnXVcWpHBurCTrKxYSs",
-                "VdjTDrdPmtXRuYKNUMeRmKK"
-            ],
-            "link_collection_items": [
-                "JUmgwJDKqdxVxJeBHkBdjVq",
-                "link_collection_item_2",
-                "YnBCBuemwpaUxQwHrFJNgMW"
-            ],
-            "outro": [
-                "kZQHRTYyJtbmsJfnXaRgVtZ"
-            ]
-        },
-        "pkcwHuntQjySVjwuVNaSTge": {
-            "id": "pkcwHuntQjySVjwuVNaSTge",
-            "type": "text",
-            "layout": 5,
-            "content": {
-                "text": "Built for developers, designed for everyone",
-                "annotations": []
-            }
-        },
-        "AQHAsyghanqZPmyutAJZBxM": {
-            "id": "AQHAsyghanqZPmyutAJZBxM",
-            "type": "text",
-            "layout": 2,
-            "content": {
-                "text": "How does this work?",
-                "annotations": []
-            }
-        },
-        "vgwPcMefbMumuCsVyAPHhUz": {
-            "id": "vgwPcMefbMumuCsVyAPHhUz",
-            "type": "link",
-            "href": "https://svelte.dev/docs/kit/introduction",
-            "target": "_blank"
-        },
-        "qHveqveRzQxJzxGakaarEwb": {
-            "id": "qHveqveRzQxJzxGakaarEwb",
-            "type": "link",
-            "href": "https://sqlite.org",
-            "target": "_blank"
-        },
-        "sheNSfrhuAfrBWSKfvWPYGg": {
-            "id": "sheNSfrhuAfrBWSKfvWPYGg",
-            "type": "link",
-            "href": "https://svelte.dev",
-            "target": "_blank"
-        },
-        "NZHwrDvtUBdpyDMvRJEGPcc": {
-            "id": "NZHwrDvtUBdpyDMvRJEGPcc",
-            "type": "link",
-            "href": "https://svedit.dev",
-            "target": "_blank"
-        },
-        "PscvEBWBfhraXpPKjPPkCMC": {
-            "id": "PscvEBWBfhraXpPKjPPkCMC",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "This site is powered by Svelte and Svedit — an open source rich text editor I've created. Editable Website builds on SvelteKit and SQLite to enable full websites with multiple pages and a persistent backend where only an admin can make changes.",
-                "annotations": [
-                    {
-                        "start_offset": 117,
-                        "end_offset": 126,
-                        "node_id": "vgwPcMefbMumuCsVyAPHhUz"
-                    },
-                    {
-                        "start_offset": 131,
-                        "end_offset": 137,
-                        "node_id": "qHveqveRzQxJzxGakaarEwb"
-                    },
-                    {
-                        "start_offset": 24,
-                        "end_offset": 30,
-                        "node_id": "sheNSfrhuAfrBWSKfvWPYGg"
-                    },
-                    {
-                        "start_offset": 35,
-                        "end_offset": 41,
-                        "node_id": "NZHwrDvtUBdpyDMvRJEGPcc"
-                    }
-                ]
-            }
-        },
-        "hpXfpDueZmgNjRfMUBREPnh": {
-            "id": "hpXfpDueZmgNjRfMUBREPnh",
-            "type": "link",
-            "href": "https://github.com/michael/editable-website",
-            "target": "_blank"
-        },
-        "EsVdYMdJuVqGfqpQmMBCtap": {
-            "id": "EsVdYMdJuVqGfqpQmMBCtap",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "Take a look at the source code for this site.",
-                "annotations": [
-                    {
-                        "start_offset": 19,
-                        "end_offset": 30,
-                        "node_id": "hpXfpDueZmgNjRfMUBREPnh"
-                    }
-                ]
-            }
-        },
-        "XVJGXtwnQMvcrcuByAtcWNa": {
-            "id": "XVJGXtwnQMvcrcuByAtcWNa",
-            "type": "prose",
-            "layout": 1,
-            "colorset": 0,
-            "content": [
-                "pkcwHuntQjySVjwuVNaSTge",
-                "AQHAsyghanqZPmyutAJZBxM",
-                "PscvEBWBfhraXpPKjPPkCMC",
-                "EsVdYMdJuVqGfqpQmMBCtap"
-            ]
-        },
-        "hqrrTdEbTPaqzEcYMczhBZb": {
-            "id": "hqrrTdEbTPaqzEcYMczhBZb",
-            "type": "image",
-            "src": "michael.webp",
-            "mime_type": "image/webp",
-            "width": 768,
-            "height": 1024,
-            "alt": "Feature image",
-            "scale": 1,
-            "focal_point_x": 0.5,
-            "focal_point_y": 0.5,
-            "object_fit": "cover"
-        },
-        "pCjecUjAFDGgGpgquwGrCdp": {
-            "id": "pCjecUjAFDGgGpgquwGrCdp",
-            "type": "text",
-            "layout": 2,
-            "content": {
-                "text": "Hello, I'm Michael",
-                "annotations": []
-            }
-        },
-        "gnbpgBsBYZqEwRxqRZSMHdd": {
-            "id": "gnbpgBsBYZqEwRxqRZSMHdd",
-            "type": "link",
-            "href": "https://letsken.com/michael/how-to-implement-a-web-based-rich-text-editor-in-2023",
-            "target": "_blank"
-        },
-        "qDAyeabdhVEXjBWXyyqfUPb": {
-            "id": "qDAyeabdhVEXjBWXyyqfUPb",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "Since 2011 I’ve been taming web browsers to behave correctly and predictably when editing rich text.",
-                "annotations": [
-                    {
-                        "start_offset": 21,
-                        "end_offset": 40,
-                        "node_id": "gnbpgBsBYZqEwRxqRZSMHdd"
-                    }
-                ]
-            }
-        },
-        "QVXhuysTRgRyQHVQnfTVCpV": {
-            "id": "QVXhuysTRgRyQHVQnfTVCpV",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "I want you to be able to launch websites that anyone can edit. No more calls asking you to update someone's WordPress site! They'll be able to do it themselves.",
-                "annotations": []
-            }
-        },
-        "NjNteBhckwxGAUfbYRMGrDz": {
-            "id": "NjNteBhckwxGAUfbYRMGrDz",
-            "type": "text",
-            "layout": 1,
-            "content": {
-                "text": "Most CMSs are too complex for clients and too restrictive for developers. Change every pixel of your site, create new content types, or integrate 3rd party data. Everything you can do with Svelte, you can do with Editable Website.",
-                "annotations": []
-            }
-        },
-        "YTMHBcPkYXJMRUnuSAhrTDE": {
-            "id": "YTMHBcPkYXJMRUnuSAhrTDE",
-            "type": "feature",
-            "layout": 2,
-            "colorset": 0,
-            "media": "hqrrTdEbTPaqzEcYMczhBZb",
-            "body": [
-                "pCjecUjAFDGgGpgquwGrCdp",
-                "qDAyeabdhVEXjBWXyyqfUPb",
-                "QVXhuysTRgRyQHVQnfTVCpV",
-                "NjNteBhckwxGAUfbYRMGrDz"
-            ]
-        },
-        "PvpNcGKnqTTBbvbRZeDUYSN": {
-            "id": "PvpNcGKnqTTBbvbRZeDUYSN",
-            "type": "button",
-            "layout": 1,
-            "href": "https://docs.google.com/forms/d/e/1FAIpQLSfkL9e9X3Lcn6oBDIG-gU4yrfSenh8fndupbIX7zkyxX3X9ZQ/viewform?usp=dialog",
-            "target": "_blank",
-            "label": {
-                "text": "Join the Technical Preview",
-                "annotations": []
-            }
-        },
-        "UBNYngEBJYtDWgeabtDJqWW": {
-            "id": "UBNYngEBJYtDWgeabtDJqWW",
-            "type": "hero",
-            "colorset": 0,
-            "title": {
-                "text": "I love it! How can I get it?",
-                "annotations": []
-            },
-            "description": {
-                "text": "This is an an initial preview of Editable Website. There's more to do before you can use it in production. Be the first to hear when it's ready:",
-                "annotations": []
-            },
-            "buttons": [
-                "PvpNcGKnqTTBbvbRZeDUYSN"
-            ],
-            "layout": 3
-        },
-        "ERqkusuryvGKBzKayXyhxXE": {
-            "id": "ERqkusuryvGKBzKayXyhxXE",
-            "type": "link",
-            "href": "https://mutter.co",
-            "target": "_blank"
-        },
-        "XCdmKqAtyRNPKKRZJaNUfyX": {
-            "id": "XCdmKqAtyRNPKKRZJaNUfyX",
-            "type": "link",
-            "href": "https://keybits.net",
-            "target": "_blank"
-        },
-        "yjdxqchTwgSjeTVgXeZhrrv": {
-            "id": "yjdxqchTwgSjeTVgXeZhrrv",
-            "type": "link",
-            "href": "https://sonjastojanovic.com",
-            "target": "_blank"
-        },
-        "TPsjXxZhtuyfJQRytAVcRgJ": {
-            "id": "TPsjXxZhtuyfJQRytAVcRgJ",
-            "type": "link",
-            "href": "https://trails-shop.at",
-            "target": "_blank"
-        },
-        "SUfVhRdtQwruDYJvgkETZxk": {
-            "id": "SUfVhRdtQwruDYJvgkETZxk",
-            "type": "link",
-            "href": "https://postlmayrdesign.com",
-            "target": "_blank"
-        },
-        "amXvCtNxBsTJFzfeTCpdMsN": {
-            "id": "amXvCtNxBsTJFzfeTCpdMsN",
-            "type": "link",
-            "href": "https://aufreiter.co",
-            "target": "_blank"
-        },
-        "PjwvEAbrZCxZFcqJqayVyhR": {
-            "id": "PjwvEAbrZCxZFcqJqayVyhR",
-            "type": "text",
-            "layout": 5,
-            "content": {
-                "text": "Big thanks to Johannes Mutter for helping with concept, design, and engineering, Tom Atkins for support with positioning and copywriting, and Sonja Stojanovic for modelling and being the very first happy Editable Website user — followed by Trails, Postlmayr Design, Aufreiter Architektur, and many more.",
-                "annotations": [
-                    {
-                        "start_offset": 14,
-                        "end_offset": 29,
-                        "node_id": "ERqkusuryvGKBzKayXyhxXE"
-                    },
-                    {
-                        "start_offset": 81,
-                        "end_offset": 91,
-                        "node_id": "XCdmKqAtyRNPKKRZJaNUfyX"
-                    },
-                    {
-                        "start_offset": 142,
-                        "end_offset": 158,
-                        "node_id": "yjdxqchTwgSjeTVgXeZhrrv"
-                    },
-                    {
-                        "start_offset": 240,
-                        "end_offset": 246,
-                        "node_id": "TPsjXxZhtuyfJQRytAVcRgJ"
-                    },
-                    {
-                        "start_offset": 248,
-                        "end_offset": 264,
-                        "node_id": "SUfVhRdtQwruDYJvgkETZxk"
-                    },
-                    {
-                        "start_offset": 266,
-                        "end_offset": 287,
-                        "node_id": "amXvCtNxBsTJFzfeTCpdMsN"
-                    }
-                ]
-            }
-        },
-        "wmrbpSFAFUmMRPDumcjKqpF": {
-            "id": "wmrbpSFAFUmMRPDumcjKqpF",
-            "type": "prose",
-            "layout": 2,
-            "colorset": 0,
-            "content": [
-                "PjwvEAbrZCxZFcqJqayVyhR"
-            ]
-        },
-        "page_1": {
-            "id": "page_1",
-            "type": "page",
-            "body": [
-                "hero_1",
-                "RtYpQwXsZvNmKjHgFdSaLe",
-                "xKmNqPrStVwYzAbCdEfGh",
-                "BPdekRaDEUcQZqtEwPwBvyu",
-                "jLnPqRsTuVwXyZaBcDeFg",
-                "XVJGXtwnQMvcrcuByAtcWNa",
-                "YTMHBcPkYXJMRUnuSAhrTDE",
-                "UBNYngEBJYtDWgeabtDJqWW",
-                "wmrbpSFAFUmMRPDumcjKqpF"
-            ],
-            "nav": "nav_1",
-            "footer": "footer_1"
-        }
-    }
+	document_id: 'page_1',
+	nodes: {
+		ccHVKDeyhrRVfKZCpXvxhac: {
+			id: 'ccHVKDeyhrRVfKZCpXvxhac',
+			type: 'button',
+			layout: 1,
+			href: '/#RtYpQwXsZvNmKjHgFdSaLe',
+			target: '_self',
+			label: {
+				text: '↓',
+				annotations: []
+			}
+		},
+		hero_1: {
+			id: 'hero_1',
+			type: 'hero',
+			layout: 1,
+			colorset: 0,
+			title: {
+				text: 'Imagine you could edit ✍️ your website live on the page',
+				annotations: []
+			},
+			description: {
+				text: 'Dream no more…',
+				annotations: []
+			},
+			buttons: ['ccHVKDeyhrRVfKZCpXvxhac']
+		},
+		VbNcMxZaQwErTyUiOpLkJh: {
+			id: 'VbNcMxZaQwErTyUiOpLkJh',
+			type: 'image',
+			src: 'cmde.webp',
+			mime_type: 'image/webp',
+			width: 768,
+			height: 1024,
+			alt: 'Feature image',
+			scale: 1,
+			focal_point_x: 0.5329817181174089,
+			focal_point_y: 0.47301940896272265,
+			object_fit: 'cover'
+		},
+		uqZnrCRbzCkBWmYNQYkFePY: {
+			id: 'uqZnrCRbzCkBWmYNQYkFePY',
+			type: 'text',
+			layout: 5,
+			content: {
+				text: 'Editing',
+				annotations: []
+			}
+		},
+		WsXcDfVgBhNjMkLqAzPeRt: {
+			id: 'WsXcDfVgBhNjMkLqAzPeRt',
+			type: 'text',
+			layout: 2,
+			content: {
+				text: 'This is Editable Website',
+				annotations: []
+			}
+		},
+		RezNUsxYmfpmFMezpgEbqYu: {
+			id: 'RezNUsxYmfpmFMezpgEbqYu',
+			type: 'strong'
+		},
+		ywTQktXzgyRqzsUNXjZztQw: {
+			id: 'ywTQktXzgyRqzsUNXjZztQw',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'Press ⌘ / Ctrl + e to enter edit mode.\nClick where you want to edit.\nMove around with the arrow keys.\nChange anything you see!',
+				annotations: [
+					{
+						start_offset: 6,
+						end_offset: 18,
+						node_id: 'RezNUsxYmfpmFMezpgEbqYu'
+					}
+				]
+			}
+		},
+		NhhsYbqTRzPtpQcHFUgwFhP: {
+			id: 'NhhsYbqTRzPtpQcHFUgwFhP',
+			type: 'strong'
+		},
+		ypAZzWFdhamCaTMKmZMZPMm: {
+			id: 'ypAZzWFdhamCaTMKmZMZPMm',
+			type: 'strong'
+		},
+		wuyFjXptXyMvgYKUcvtTggC: {
+			id: 'wuyFjXptXyMvgYKUcvtTggC',
+			type: 'strong'
+		},
+		ZWDXzUmKJbqDwJbNTbhEtWQ: {
+			id: 'ZWDXzUmKJbqDwJbNTbhEtWQ',
+			type: 'strong'
+		},
+		zqyQQtSbzxtdTTsVTYuuXEh: {
+			id: 'zqyQQtSbzxtdTTsVTYuuXEh',
+			type: 'strong'
+		},
+		CUTpvupqUbXQDyMjBczwfCj: {
+			id: 'CUTpvupqUbXQDyMjBczwfCj',
+			type: 'emphasis'
+		},
+		PYHXbxRMREHBpAqxbdsUXzP: {
+			id: 'PYHXbxRMREHBpAqxbdsUXzP',
+			type: 'strong'
+		},
+		djTpcsEQTzfGMSRctKenpWt: {
+			id: 'djTpcsEQTzfGMSRctKenpWt',
+			type: 'emphasis'
+		},
+		eUteADFhxtenJraxpeprgHr: {
+			id: 'eUteADFhxtenJraxpeprgHr',
+			type: 'link',
+			href: '#',
+			target: '_self'
+		},
+		WjasMkTrmjdrXTsDgeUHQap: {
+			id: 'WjasMkTrmjdrXTsDgeUHQap',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'Bold, italics and links with ⌘ / Ctrl + b, i and k\nUndo with ⌘ / Ctrl + z\nSave changes with ⌘ / Ctrl + s\n(On this example page, changes are not persisted. On a real site, a logged in user would have their changes persisted to a database.)',
+				annotations: [
+					{
+						start_offset: 29,
+						end_offset: 41,
+						node_id: 'NhhsYbqTRzPtpQcHFUgwFhP'
+					},
+					{
+						start_offset: 43,
+						end_offset: 45,
+						node_id: 'ypAZzWFdhamCaTMKmZMZPMm'
+					},
+					{
+						start_offset: 49,
+						end_offset: 50,
+						node_id: 'wuyFjXptXyMvgYKUcvtTggC'
+					},
+					{
+						start_offset: 61,
+						end_offset: 73,
+						node_id: 'ZWDXzUmKJbqDwJbNTbhEtWQ'
+					},
+					{
+						start_offset: 92,
+						end_offset: 104,
+						node_id: 'zqyQQtSbzxtdTTsVTYuuXEh'
+					},
+					{
+						start_offset: 105,
+						end_offset: 238,
+						node_id: 'CUTpvupqUbXQDyMjBczwfCj'
+					},
+					{
+						start_offset: 0,
+						end_offset: 4,
+						node_id: 'PYHXbxRMREHBpAqxbdsUXzP'
+					},
+					{
+						start_offset: 6,
+						end_offset: 13,
+						node_id: 'djTpcsEQTzfGMSRctKenpWt'
+					},
+					{
+						start_offset: 18,
+						end_offset: 23,
+						node_id: 'eUteADFhxtenJraxpeprgHr'
+					}
+				]
+			}
+		},
+		DxBvNYzBgktMyKjKkKyYcAN: {
+			id: 'DxBvNYzBgktMyKjKkKyYcAN',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: "Looking for the admin panel? There isn't any! It's just you, and your content.",
+				annotations: []
+			}
+		},
+		RtYpQwXsZvNmKjHgFdSaLe: {
+			id: 'RtYpQwXsZvNmKjHgFdSaLe',
+			type: 'feature',
+			layout: 1,
+			colorset: 0,
+			media: 'VbNcMxZaQwErTyUiOpLkJh',
+			body: [
+				'uqZnrCRbzCkBWmYNQYkFePY',
+				'WsXcDfVgBhNjMkLqAzPeRt',
+				'ywTQktXzgyRqzsUNXjZztQw',
+				'WjasMkTrmjdrXTsDgeUHQap',
+				'DxBvNYzBgktMyKjKkKyYcAN'
+			]
+		},
+		HWcSGEAsZyfeQFjgvKrMpZc: {
+			id: 'HWcSGEAsZyfeQFjgvKrMpZc',
+			type: 'text',
+			layout: 5,
+			content: {
+				text: 'Blocks',
+				annotations: []
+			}
+		},
+		heading_1: {
+			id: 'heading_1',
+			type: 'text',
+			layout: 2,
+			content: {
+				text: 'Build with blocks',
+				annotations: []
+			}
+		},
+		pRPkWyTzrgwfHhbnUgvHPph: {
+			id: 'pRPkWyTzrgwfHhbnUgvHPph',
+			type: 'strong'
+		},
+		fuxtxNCceDRcdbcHhtqsYwJ: {
+			id: 'fuxtxNCceDRcdbcHhtqsYwJ',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'In edit mode the dashed gaps let you add blocks.',
+				annotations: [
+					{
+						start_offset: 17,
+						end_offset: 36,
+						node_id: 'pRPkWyTzrgwfHhbnUgvHPph'
+					}
+				]
+			}
+		},
+		szexETNtKsPwJPPECvSbMbn: {
+			id: 'szexETNtKsPwJPPECvSbMbn',
+			type: 'strong'
+		},
+		uDAGgETYUPFDYHKSvDBwmPw: {
+			id: 'uDAGgETYUPFDYHKSvDBwmPw',
+			type: 'strong'
+		},
+		MheDsAwTmfQDGqdkpMWgXUH: {
+			id: 'MheDsAwTmfQDGqdkpMWgXUH',
+			type: 'strong'
+		},
+		dAEBKADbvfeaBMhNWgTjKNC: {
+			id: 'dAEBKADbvfeaBMhNWgTjKNC',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'Select the dashed gap below this paragraph to see a flashing purple cursor.\nPress Enter to add a block.\nChange text styles (paragraph > heading etc) with Ctrl + Shift + Right.',
+				annotations: [
+					{
+						start_offset: 155,
+						end_offset: 175,
+						node_id: 'szexETNtKsPwJPPECvSbMbn'
+					},
+					{
+						start_offset: 83,
+						end_offset: 88,
+						node_id: 'uDAGgETYUPFDYHKSvDBwmPw'
+					},
+					{
+						start_offset: 11,
+						end_offset: 22,
+						node_id: 'MheDsAwTmfQDGqdkpMWgXUH'
+					}
+				]
+			}
+		},
+		GZGpvNSHNjPJtHVfmGbRBNf: {
+			id: 'GZGpvNSHNjPJtHVfmGbRBNf',
+			type: 'strong'
+		},
+		TfUCWjmVMpUWSNWhBkBjTgB: {
+			id: 'TfUCWjmVMpUWSNWhBkBjTgB',
+			type: 'strong'
+		},
+		ryUPAdHaGfFcHAqdHPSdUMR: {
+			id: 'ryUPAdHaGfFcHAqdHPSdUMR',
+			type: 'strong'
+		},
+		wrMTxwEDPezkagDwymXFFuq: {
+			id: 'wrMTxwEDPezkagDwymXFFuq',
+			type: 'strong'
+		},
+		dKDJFxDKresxkjMUZYKNuKn: {
+			id: 'dKDJFxDKresxkjMUZYKNuKn',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'Select one of the full width dashed gap to see a flashing purple cursor.\nPress Enter to create a new top-level block.\nCtrl + Shift + Down cycles through block types.\nAgain Ctrl + Shift + Right lets you flip through available layouts.',
+				annotations: [
+					{
+						start_offset: 81,
+						end_offset: 86,
+						node_id: 'GZGpvNSHNjPJtHVfmGbRBNf'
+					},
+					{
+						start_offset: 120,
+						end_offset: 139,
+						node_id: 'TfUCWjmVMpUWSNWhBkBjTgB'
+					},
+					{
+						start_offset: 18,
+						end_offset: 41,
+						node_id: 'ryUPAdHaGfFcHAqdHPSdUMR'
+					},
+					{
+						start_offset: 174,
+						end_offset: 194,
+						node_id: 'wrMTxwEDPezkagDwymXFFuq'
+					}
+				]
+			}
+		},
+		fwXyaDrZNGRyMhZMbascTYb: {
+			id: 'fwXyaDrZNGRyMhZMbascTYb',
+			type: 'strong'
+		},
+		dwMqDGUwHVvVkdzahPEWDuR: {
+			id: 'dwMqDGUwHVvVkdzahPEWDuR',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'To move blocks, drag from a dashed gap to select multiple, then cut and paste like usual.',
+				annotations: [
+					{
+						start_offset: 16,
+						end_offset: 35,
+						node_id: 'fwXyaDrZNGRyMhZMbascTYb'
+					}
+				]
+			}
+		},
+		FGHDfRZMdeYQeVJBarNFeHa: {
+			id: 'FGHDfRZMdeYQeVJBarNFeHa',
+			type: 'strong'
+		},
+		gkHzcWkcKRsYffDnwJtGnjG: {
+			id: 'gkHzcWkcKRsYffDnwJtGnjG',
+			type: 'strong'
+		},
+		smJYScwGbZgRVDAJWhNGxvG: {
+			id: 'smJYScwGbZgRVDAJWhNGxvG',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'Pro tip: Press Esc to select the parent block. Useful when editing text but wanting to change the parent layout.',
+				annotations: [
+					{
+						start_offset: 0,
+						end_offset: 8,
+						node_id: 'FGHDfRZMdeYQeVJBarNFeHa'
+					},
+					{
+						start_offset: 15,
+						end_offset: 18,
+						node_id: 'gkHzcWkcKRsYffDnwJtGnjG'
+					}
+				]
+			}
+		},
+		xKmNqPrStVwYzAbCdEfGh: {
+			id: 'xKmNqPrStVwYzAbCdEfGh',
+			type: 'prose',
+			layout: 1,
+			colorset: 0,
+			content: [
+				'HWcSGEAsZyfeQFjgvKrMpZc',
+				'heading_1',
+				'fuxtxNCceDRcdbcHhtqsYwJ',
+				'dAEBKADbvfeaBMhNWgTjKNC',
+				'dKDJFxDKresxkjMUZYKNuKn',
+				'dwMqDGUwHVvVkdzahPEWDuR',
+				'smJYScwGbZgRVDAJWhNGxvG'
+			]
+		},
+		AHXsSZcYYwnXKYzHbDnSRRh: {
+			id: 'AHXsSZcYYwnXKYzHbDnSRRh',
+			type: 'text',
+			layout: 5,
+			content: {
+				text: 'Images',
+				annotations: []
+			}
+		},
+		BfpsPAaqmJXnRrHzwJCSMHE: {
+			id: 'BfpsPAaqmJXnRrHzwJCSMHE',
+			type: 'text',
+			layout: 2,
+			content: {
+				text: 'Add images to a gallery',
+				annotations: []
+			}
+		},
+		DpajqNKpCCFFqZHtbttRRwM: {
+			id: 'DpajqNKpCCFFqZHtbttRRwM',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'Open a folder on your computer that has some images.\nSelect one and copy it to the clipboard.\nSelect the placeholder below and paste it.\nTo replace an image, select it first, then paste the new one on top.',
+				annotations: []
+			}
+		},
+		jEhPHUyzqvpNeSHYfKCkYgS: {
+			id: 'jEhPHUyzqvpNeSHYfKCkYgS',
+			type: 'image',
+			src: 'user1-desktop.webp',
+			mime_type: 'image/webp',
+			width: 800,
+			height: 600,
+			alt: 'Sample image',
+			scale: 1,
+			focal_point_x: 0.5,
+			focal_point_y: 0.5,
+			object_fit: 'cover'
+		},
+		wtvHDBrCzJVgacTaJqAwNJk: {
+			id: 'wtvHDBrCzJVgacTaJqAwNJk',
+			type: 'gallery_item',
+			media: 'jEhPHUyzqvpNeSHYfKCkYgS'
+		},
+		ZjdBYZdXQedwuTdVFGHdDEj: {
+			id: 'ZjdBYZdXQedwuTdVFGHdDEj',
+			type: 'image',
+			src: 'user1-notebook.webp',
+			mime_type: 'image/webp',
+			width: 800,
+			height: 600,
+			alt: 'Sample image',
+			scale: 1,
+			focal_point_x: 0.6705601092896176,
+			focal_point_y: 0.4532274590163934,
+			object_fit: 'cover'
+		},
+		TQRANBXMrzXXZTtzxAYhhZf: {
+			id: 'TQRANBXMrzXXZTtzxAYhhZf',
+			type: 'gallery_item',
+			media: 'ZjdBYZdXQedwuTdVFGHdDEj'
+		},
+		UGfbRKEMbGwgcUjhpgXausS: {
+			id: 'UGfbRKEMbGwgcUjhpgXausS',
+			type: 'image',
+			src: '',
+			mime_type: '',
+			width: 800,
+			height: 600,
+			alt: 'Sample image',
+			scale: 1,
+			focal_point_x: 0.5,
+			focal_point_y: 0.5,
+			object_fit: 'cover'
+		},
+		HtSTZfjTcDSkttVaTUKMYAj: {
+			id: 'HtSTZfjTcDSkttVaTUKMYAj',
+			type: 'gallery_item',
+			media: 'UGfbRKEMbGwgcUjhpgXausS'
+		},
+		cMtzexVuqMWFgEpxhYjRQFq: {
+			id: 'cMtzexVuqMWFgEpxhYjRQFq',
+			type: 'strong'
+		},
+		BKVAhVQRTzRGhGGqpfrQnsu: {
+			id: 'BKVAhVQRTzRGhGGqpfrQnsu',
+			type: 'strong'
+		},
+		NKtUpjrVYCGaJWYKGACXprb: {
+			id: 'NKtUpjrVYCGaJWYKGACXprb',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'You can even paste several images at once.\nSelect three or four from your computer and copy to the clipboard.\nNow select a vertical dashed area before or after an image above.\nPaste and all the images will be added in one go.',
+				annotations: [
+					{
+						start_offset: 123,
+						end_offset: 143,
+						node_id: 'cMtzexVuqMWFgEpxhYjRQFq'
+					},
+					{
+						start_offset: 13,
+						end_offset: 33,
+						node_id: 'BKVAhVQRTzRGhGGqpfrQnsu'
+					}
+				]
+			}
+		},
+		BPdekRaDEUcQZqtEwPwBvyu: {
+			id: 'BPdekRaDEUcQZqtEwPwBvyu',
+			type: 'gallery',
+			layout: 1,
+			colorset: 0,
+			intro: ['AHXsSZcYYwnXKYzHbDnSRRh', 'BfpsPAaqmJXnRrHzwJCSMHE', 'DpajqNKpCCFFqZHtbttRRwM'],
+			gallery_items: [
+				'wtvHDBrCzJVgacTaJqAwNJk',
+				'TQRANBXMrzXXZTtzxAYhhZf',
+				'HtSTZfjTcDSkttVaTUKMYAj'
+			],
+			outro: ['NKtUpjrVYCGaJWYKGACXprb']
+		},
+		FMmrrRxdfRzhujVmergnVxA: {
+			id: 'FMmrrRxdfRzhujVmergnVxA',
+			type: 'text',
+			layout: 5,
+			content: {
+				text: 'Links',
+				annotations: []
+			}
+		},
+		AjbSGnXVcWpHBurCTrKxYSs: {
+			id: 'AjbSGnXVcWpHBurCTrKxYSs',
+			type: 'text',
+			layout: 2,
+			content: {
+				text: 'Link to other pages',
+				annotations: []
+			}
+		},
+		XDMsYPfWXKqvhCMsEDWfDnx: {
+			id: 'XDMsYPfWXKqvhCMsEDWfDnx',
+			type: 'strong'
+		},
+		VdjTDrdPmtXRuYKNUMeRmKK: {
+			id: 'VdjTDrdPmtXRuYKNUMeRmKK',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'Click on one of the cards below.\nA link preview appears at the bottom.\nClick “EDIT” or press ⌘ / Ctrl + k to bring up the link editor.',
+				annotations: [
+					{
+						start_offset: 93,
+						end_offset: 105,
+						node_id: 'XDMsYPfWXKqvhCMsEDWfDnx'
+					}
+				]
+			}
+		},
+		nprCMwYvJvUEmRaHBsxfgUd: {
+			id: 'nprCMwYvJvUEmRaHBsxfgUd',
+			type: 'image',
+			src: 'gluecksmaurer.webp',
+			mime_type: 'image/webp',
+			width: 800,
+			height: 600,
+			alt: 'Getting started',
+			scale: 1,
+			focal_point_x: 0.43320363152669056,
+			focal_point_y: 0.4116619557277606,
+			object_fit: 'cover'
+		},
+		JUmgwJDKqdxVxJeBHkBdjVq: {
+			id: 'JUmgwJDKqdxVxJeBHkBdjVq',
+			type: 'link_collection_item',
+			href: 'https://gluecksmaurer.de',
+			target: '_blank',
+			media: 'nprCMwYvJvUEmRaHBsxfgUd',
+			preline: {
+				text: 'Real estate',
+				annotations: []
+			},
+			title: {
+				text: 'Glücksmaurer',
+				annotations: []
+			},
+			description: {
+				text: 'Innovative real estate agent in Worms, Germany.',
+				annotations: []
+			}
+		},
+		link_collection_item_2_image: {
+			id: 'link_collection_item_2_image',
+			type: 'image',
+			src: 'colbourns.webp',
+			mime_type: 'image/webp',
+			width: 800,
+			height: 600,
+			alt: 'Customization',
+			scale: 1,
+			focal_point_x: 0.3904038894325596,
+			focal_point_y: 0.5509243899928726,
+			object_fit: 'cover'
+		},
+		link_collection_item_2: {
+			id: 'link_collection_item_2',
+			type: 'link_collection_item',
+			href: 'https://colbourns.com',
+			target: '_blank',
+			media: 'link_collection_item_2_image',
+			preline: {
+				text: 'Flooring design',
+				annotations: []
+			},
+			title: {
+				text: 'Colbourns',
+				annotations: []
+			},
+			description: {
+				text: 'London-based designer of premium-quality, elegant rugs.',
+				annotations: []
+			}
+		},
+		ReRqxYxMdAUVaMuudfJhzsS: {
+			id: 'ReRqxYxMdAUVaMuudfJhzsS',
+			type: 'image',
+			src: 'tomorrow-vc.webp',
+			mime_type: 'image/webp',
+			width: 800,
+			height: 600,
+			alt: 'Svedit documentation',
+			scale: 1,
+			focal_point_x: 0.4449945007030935,
+			focal_point_y: 1,
+			object_fit: 'cover'
+		},
+		YnBCBuemwpaUxQwHrFJNgMW: {
+			id: 'YnBCBuemwpaUxQwHrFJNgMW',
+			type: 'link_collection_item',
+			href: 'https://tomorrow.vc',
+			target: '_blank',
+			media: 'ReRqxYxMdAUVaMuudfJhzsS',
+			preline: {
+				text: 'Venture capital',
+				annotations: []
+			},
+			title: {
+				text: 'Visionaries Tomorrow',
+				annotations: []
+			},
+			description: {
+				text: 'An early-stage industrial deep tech fund.',
+				annotations: []
+			}
+		},
+		VqaqUWzRKUJrZzQYqqurggB: {
+			id: 'VqaqUWzRKUJrZzQYqqurggB',
+			type: 'link',
+			href: 'https://mutter.co',
+			target: '_blank'
+		},
+		kZQHRTYyJtbmsJfnXaRgVtZ: {
+			id: 'kZQHRTYyJtbmsJfnXaRgVtZ',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'The cards above are links to examples of live in-place editable websites Johannes Mutter and I have already launched using this technology. You can see that any design is possible — it’s just HTML and CSS.',
+				annotations: [
+					{
+						start_offset: 73,
+						end_offset: 88,
+						node_id: 'VqaqUWzRKUJrZzQYqqurggB'
+					}
+				]
+			}
+		},
+		jLnPqRsTuVwXyZaBcDeFg: {
+			id: 'jLnPqRsTuVwXyZaBcDeFg',
+			type: 'link_collection',
+			layout: 1,
+			colorset: 0,
+			intro: ['FMmrrRxdfRzhujVmergnVxA', 'AjbSGnXVcWpHBurCTrKxYSs', 'VdjTDrdPmtXRuYKNUMeRmKK'],
+			link_collection_items: [
+				'JUmgwJDKqdxVxJeBHkBdjVq',
+				'link_collection_item_2',
+				'YnBCBuemwpaUxQwHrFJNgMW'
+			],
+			outro: ['kZQHRTYyJtbmsJfnXaRgVtZ']
+		},
+		pkcwHuntQjySVjwuVNaSTge: {
+			id: 'pkcwHuntQjySVjwuVNaSTge',
+			type: 'text',
+			layout: 5,
+			content: {
+				text: 'Built for developers, designed for everyone',
+				annotations: []
+			}
+		},
+		AQHAsyghanqZPmyutAJZBxM: {
+			id: 'AQHAsyghanqZPmyutAJZBxM',
+			type: 'text',
+			layout: 2,
+			content: {
+				text: 'How does this work?',
+				annotations: []
+			}
+		},
+		vgwPcMefbMumuCsVyAPHhUz: {
+			id: 'vgwPcMefbMumuCsVyAPHhUz',
+			type: 'link',
+			href: 'https://svelte.dev/docs/kit/introduction',
+			target: '_blank'
+		},
+		qHveqveRzQxJzxGakaarEwb: {
+			id: 'qHveqveRzQxJzxGakaarEwb',
+			type: 'link',
+			href: 'https://sqlite.org',
+			target: '_blank'
+		},
+		sheNSfrhuAfrBWSKfvWPYGg: {
+			id: 'sheNSfrhuAfrBWSKfvWPYGg',
+			type: 'link',
+			href: 'https://svelte.dev',
+			target: '_blank'
+		},
+		NZHwrDvtUBdpyDMvRJEGPcc: {
+			id: 'NZHwrDvtUBdpyDMvRJEGPcc',
+			type: 'link',
+			href: 'https://svedit.dev',
+			target: '_blank'
+		},
+		PscvEBWBfhraXpPKjPPkCMC: {
+			id: 'PscvEBWBfhraXpPKjPPkCMC',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: "This site is powered by Svelte and Svedit — an open source rich text editor I've created. Editable Website builds on SvelteKit and SQLite to enable full websites with multiple pages and a persistent backend where only an admin can make changes.",
+				annotations: [
+					{
+						start_offset: 117,
+						end_offset: 126,
+						node_id: 'vgwPcMefbMumuCsVyAPHhUz'
+					},
+					{
+						start_offset: 131,
+						end_offset: 137,
+						node_id: 'qHveqveRzQxJzxGakaarEwb'
+					},
+					{
+						start_offset: 24,
+						end_offset: 30,
+						node_id: 'sheNSfrhuAfrBWSKfvWPYGg'
+					},
+					{
+						start_offset: 35,
+						end_offset: 41,
+						node_id: 'NZHwrDvtUBdpyDMvRJEGPcc'
+					}
+				]
+			}
+		},
+		hpXfpDueZmgNjRfMUBREPnh: {
+			id: 'hpXfpDueZmgNjRfMUBREPnh',
+			type: 'link',
+			href: 'https://github.com/michael/editable-website',
+			target: '_blank'
+		},
+		EsVdYMdJuVqGfqpQmMBCtap: {
+			id: 'EsVdYMdJuVqGfqpQmMBCtap',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'Take a look at the source code for this site.',
+				annotations: [
+					{
+						start_offset: 19,
+						end_offset: 30,
+						node_id: 'hpXfpDueZmgNjRfMUBREPnh'
+					}
+				]
+			}
+		},
+		XVJGXtwnQMvcrcuByAtcWNa: {
+			id: 'XVJGXtwnQMvcrcuByAtcWNa',
+			type: 'prose',
+			layout: 1,
+			colorset: 0,
+			content: [
+				'pkcwHuntQjySVjwuVNaSTge',
+				'AQHAsyghanqZPmyutAJZBxM',
+				'PscvEBWBfhraXpPKjPPkCMC',
+				'EsVdYMdJuVqGfqpQmMBCtap'
+			]
+		},
+		hqrrTdEbTPaqzEcYMczhBZb: {
+			id: 'hqrrTdEbTPaqzEcYMczhBZb',
+			type: 'image',
+			src: 'michael.webp',
+			mime_type: 'image/webp',
+			width: 768,
+			height: 1024,
+			alt: 'Feature image',
+			scale: 1,
+			focal_point_x: 0.5,
+			focal_point_y: 0.5,
+			object_fit: 'cover'
+		},
+		pCjecUjAFDGgGpgquwGrCdp: {
+			id: 'pCjecUjAFDGgGpgquwGrCdp',
+			type: 'text',
+			layout: 2,
+			content: {
+				text: "Hello, I'm Michael",
+				annotations: []
+			}
+		},
+		gnbpgBsBYZqEwRxqRZSMHdd: {
+			id: 'gnbpgBsBYZqEwRxqRZSMHdd',
+			type: 'link',
+			href: 'https://letsken.com/michael/how-to-implement-a-web-based-rich-text-editor-in-2023',
+			target: '_blank'
+		},
+		qDAyeabdhVEXjBWXyyqfUPb: {
+			id: 'qDAyeabdhVEXjBWXyyqfUPb',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'Since 2011 I’ve been taming web browsers to behave correctly and predictably when editing rich text.',
+				annotations: [
+					{
+						start_offset: 21,
+						end_offset: 40,
+						node_id: 'gnbpgBsBYZqEwRxqRZSMHdd'
+					}
+				]
+			}
+		},
+		QVXhuysTRgRyQHVQnfTVCpV: {
+			id: 'QVXhuysTRgRyQHVQnfTVCpV',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: "I want you to be able to launch websites that anyone can edit. No more calls asking you to update someone's WordPress site! They'll be able to do it themselves.",
+				annotations: []
+			}
+		},
+		NjNteBhckwxGAUfbYRMGrDz: {
+			id: 'NjNteBhckwxGAUfbYRMGrDz',
+			type: 'text',
+			layout: 1,
+			content: {
+				text: 'Most CMSs are too complex for clients and too restrictive for developers. Change every pixel of your site, create new content types, or integrate 3rd party data. Everything you can do with Svelte, you can do with Editable Website.',
+				annotations: []
+			}
+		},
+		YTMHBcPkYXJMRUnuSAhrTDE: {
+			id: 'YTMHBcPkYXJMRUnuSAhrTDE',
+			type: 'feature',
+			layout: 2,
+			colorset: 0,
+			media: 'hqrrTdEbTPaqzEcYMczhBZb',
+			body: [
+				'pCjecUjAFDGgGpgquwGrCdp',
+				'qDAyeabdhVEXjBWXyyqfUPb',
+				'QVXhuysTRgRyQHVQnfTVCpV',
+				'NjNteBhckwxGAUfbYRMGrDz'
+			]
+		},
+		PvpNcGKnqTTBbvbRZeDUYSN: {
+			id: 'PvpNcGKnqTTBbvbRZeDUYSN',
+			type: 'button',
+			layout: 1,
+			href: 'https://docs.google.com/forms/d/e/1FAIpQLSfkL9e9X3Lcn6oBDIG-gU4yrfSenh8fndupbIX7zkyxX3X9ZQ/viewform?usp=dialog',
+			target: '_blank',
+			label: {
+				text: 'Join the Technical Preview',
+				annotations: []
+			}
+		},
+		UBNYngEBJYtDWgeabtDJqWW: {
+			id: 'UBNYngEBJYtDWgeabtDJqWW',
+			type: 'hero',
+			colorset: 0,
+			title: {
+				text: 'I love it! How can I get it?',
+				annotations: []
+			},
+			description: {
+				text: "This is an an initial preview of Editable Website. There's more to do before you can use it in production. Be the first to hear when it's ready:",
+				annotations: []
+			},
+			buttons: ['PvpNcGKnqTTBbvbRZeDUYSN'],
+			layout: 3
+		},
+		ERqkusuryvGKBzKayXyhxXE: {
+			id: 'ERqkusuryvGKBzKayXyhxXE',
+			type: 'link',
+			href: 'https://mutter.co',
+			target: '_blank'
+		},
+		XCdmKqAtyRNPKKRZJaNUfyX: {
+			id: 'XCdmKqAtyRNPKKRZJaNUfyX',
+			type: 'link',
+			href: 'https://keybits.net',
+			target: '_blank'
+		},
+		yjdxqchTwgSjeTVgXeZhrrv: {
+			id: 'yjdxqchTwgSjeTVgXeZhrrv',
+			type: 'link',
+			href: 'https://sonjastojanovic.com',
+			target: '_blank'
+		},
+		TPsjXxZhtuyfJQRytAVcRgJ: {
+			id: 'TPsjXxZhtuyfJQRytAVcRgJ',
+			type: 'link',
+			href: 'https://trails-shop.at',
+			target: '_blank'
+		},
+		SUfVhRdtQwruDYJvgkETZxk: {
+			id: 'SUfVhRdtQwruDYJvgkETZxk',
+			type: 'link',
+			href: 'https://postlmayrdesign.com',
+			target: '_blank'
+		},
+		amXvCtNxBsTJFzfeTCpdMsN: {
+			id: 'amXvCtNxBsTJFzfeTCpdMsN',
+			type: 'link',
+			href: 'https://aufreiter.co',
+			target: '_blank'
+		},
+		PjwvEAbrZCxZFcqJqayVyhR: {
+			id: 'PjwvEAbrZCxZFcqJqayVyhR',
+			type: 'text',
+			layout: 5,
+			content: {
+				text: 'Big thanks to Johannes Mutter for helping with concept, design, and engineering, Tom Atkins for support with positioning and copywriting, and Sonja Stojanovic for modelling and being the very first happy Editable Website user — followed by Trails, Postlmayr Design, Aufreiter Architektur, and many more.',
+				annotations: [
+					{
+						start_offset: 14,
+						end_offset: 29,
+						node_id: 'ERqkusuryvGKBzKayXyhxXE'
+					},
+					{
+						start_offset: 81,
+						end_offset: 91,
+						node_id: 'XCdmKqAtyRNPKKRZJaNUfyX'
+					},
+					{
+						start_offset: 142,
+						end_offset: 158,
+						node_id: 'yjdxqchTwgSjeTVgXeZhrrv'
+					},
+					{
+						start_offset: 240,
+						end_offset: 246,
+						node_id: 'TPsjXxZhtuyfJQRytAVcRgJ'
+					},
+					{
+						start_offset: 248,
+						end_offset: 264,
+						node_id: 'SUfVhRdtQwruDYJvgkETZxk'
+					},
+					{
+						start_offset: 266,
+						end_offset: 287,
+						node_id: 'amXvCtNxBsTJFzfeTCpdMsN'
+					}
+				]
+			}
+		},
+		wmrbpSFAFUmMRPDumcjKqpF: {
+			id: 'wmrbpSFAFUmMRPDumcjKqpF',
+			type: 'prose',
+			layout: 2,
+			colorset: 0,
+			content: ['PjwvEAbrZCxZFcqJqayVyhR']
+		},
+		swiper_slide_1_image: {
+			id: 'swiper_slide_1_image',
+			type: 'image',
+			src: 'user1-desktop.webp',
+			mime_type: 'image/webp',
+			width: 800,
+			height: 600,
+			alt: 'Sample slide 1',
+			scale: 1,
+			focal_point_x: 0.5,
+			focal_point_y: 0.5,
+			object_fit: 'cover'
+		},
+		swiper_slide_1: {
+			id: 'swiper_slide_1',
+			type: 'swiper_slide',
+			media: 'swiper_slide_1_image'
+		},
+		swiper_slide_2_image: {
+			id: 'swiper_slide_2_image',
+			type: 'image',
+			src: 'user1-notebook.webp',
+			mime_type: 'image/webp',
+			width: 800,
+			height: 600,
+			alt: 'Sample slide 2',
+			scale: 1,
+			focal_point_x: 0.5,
+			focal_point_y: 0.5,
+			object_fit: 'cover'
+		},
+		swiper_slide_2: {
+			id: 'swiper_slide_2',
+			type: 'swiper_slide',
+			media: 'swiper_slide_2_image'
+		},
+		swiper_slide_3_image: {
+			id: 'swiper_slide_3_image',
+			type: 'image',
+			src: 'gluecksmaurer.webp',
+			mime_type: 'image/webp',
+			width: 800,
+			height: 600,
+			alt: 'Sample slide 3',
+			scale: 1,
+			focal_point_x: 0.5,
+			focal_point_y: 0.5,
+			object_fit: 'cover'
+		},
+		swiper_slide_3: {
+			id: 'swiper_slide_3',
+			type: 'swiper_slide',
+			media: 'swiper_slide_3_image'
+		},
+		demo_swiper: {
+			id: 'demo_swiper',
+			type: 'swiper',
+			layout: 1,
+			slides: ['swiper_slide_1', 'swiper_slide_2', 'swiper_slide_3']
+		},
+		page_1: {
+			id: 'page_1',
+			type: 'page',
+			body: [
+				'hero_1',
+				'RtYpQwXsZvNmKjHgFdSaLe',
+				'xKmNqPrStVwYzAbCdEfGh',
+				'BPdekRaDEUcQZqtEwPwBvyu',
+				'jLnPqRsTuVwXyZaBcDeFg',
+				'XVJGXtwnQMvcrcuByAtcWNa',
+				'YTMHBcPkYXJMRUnuSAhrTDE',
+				'UBNYngEBJYtDWgeabtDJqWW',
+				'wmrbpSFAFUmMRPDumcjKqpF',
+				'demo_swiper'
+			],
+			nav: 'nav_1',
+			footer: 'footer_1'
+		}
+	}
 };
 
 // Merged document for static deployment (Vercel demo)
 export const demo_doc = {
-    document_id: PAGE_1.document_id,
-    nodes: { ...PAGE_1.nodes, ...NAV_1.nodes, ...FOOTER_1.nodes }
+	document_id: PAGE_1.document_id,
+	nodes: { ...PAGE_1.nodes, ...NAV_1.nodes, ...FOOTER_1.nodes }
 };
diff --git a/src/lib/document_schema.js b/src/lib/document_schema.js
index d091a308..aed431fc 100644
--- a/src/lib/document_schema.js
+++ b/src/lib/document_schema.js
@@ -2,6 +2,18 @@ import { define_document_schema } from 'svedit';
 
 const ALL_ANNOTATIONS = ['strong', 'emphasis', 'highlight', 'link'];
 const MINIMAL_ANNOTATIONS = ['emphasis', 'highlight'];
+const body_node_types = [
+	'prose',
+	'highlights',
+	'columns',
+	'figure',
+	'gallery',
+	'feature',
+	'link_collection',
+	'hero',
+	'image_hero',
+	'swiper'
+];
 
 export const document_schema = define_document_schema({
 	page: {
@@ -9,7 +21,7 @@ export const document_schema = define_document_schema({
 		properties: {
 			body: {
 				type: 'node_array',
-				node_types: ['prose', 'figure', 'gallery', 'feature', 'link_collection', 'hero'],
+				node_types: body_node_types,
 				default_node_type: 'prose'
 			},
 			nav: {
@@ -24,6 +36,52 @@ export const document_schema = define_document_schema({
 			}
 		}
 	},
+	highlights: {
+		kind: 'block',
+		properties: {
+			items: {
+				type: 'node_array',
+				node_types: ['highlight_item'],
+				default_node_type: 'highlight_item'
+			}
+		}
+	},
+	highlight_item: {
+		kind: 'block',
+		properties: {
+			label: {
+				type: 'annotated_text',
+				node_types: ALL_ANNOTATIONS,
+				allow_newlines: false
+			},
+			value: {
+				type: 'annotated_text',
+				node_types: ALL_ANNOTATIONS,
+				allow_newlines: false
+			}
+		}
+	},
+	columns: {
+		kind: 'block',
+		properties: {
+			layout: { type: 'integer', default: 1 },
+			columns: {
+				type: 'node_array',
+				node_types: ['column'],
+				default_node_type: 'column'
+			}
+		}
+	},
+	column: {
+		kind: 'block',
+		properties: {
+			content: {
+				type: 'node_array',
+				node_types: body_node_types,
+				default_node_type: 'prose'
+			}
+		}
+	},
 	footer: {
 		kind: 'block',
 		properties: {
@@ -32,6 +90,46 @@ export const document_schema = define_document_schema({
 				node_types: ['image', 'video'],
 				default_node_type: 'image'
 			},
+			team_thumb: {
+				type: 'node',
+				node_types: ['image', 'video'],
+				default_node_type: 'image'
+			},
+			company_name: {
+				type: 'annotated_text',
+				node_types: ALL_ANNOTATIONS,
+				allow_newlines: false
+			},
+			company_description: {
+				type: 'annotated_text',
+				node_types: ALL_ANNOTATIONS,
+				allow_newlines: true
+			},
+			company_address: {
+				type: 'annotated_text',
+				node_types: ALL_ANNOTATIONS,
+				allow_newlines: false
+			},
+			company_phone: {
+				type: 'annotated_text',
+				node_types: ALL_ANNOTATIONS,
+				allow_newlines: false
+			},
+			team_label: {
+				type: 'annotated_text',
+				node_types: ALL_ANNOTATIONS,
+				allow_newlines: false
+			},
+			team_name: {
+				type: 'annotated_text',
+				node_types: ALL_ANNOTATIONS,
+				allow_newlines: false
+			},
+			team_description: {
+				type: 'annotated_text',
+				node_types: ALL_ANNOTATIONS,
+				allow_newlines: true
+			},
 			copyright: {
 				type: 'annotated_text',
 				node_types: [],
@@ -83,6 +181,11 @@ export const document_schema = define_document_schema({
 				type: 'node_array',
 				node_types: ['nav_item'],
 				default_node_type: 'nav_item'
+			},
+			company_name: {
+				type: 'annotated_text',
+				node_types: ALL_ANNOTATIONS,
+				allow_newlines: false
 			}
 		}
 	},
@@ -301,6 +404,53 @@ export const document_schema = define_document_schema({
 			}
 		}
 	},
+	image_hero: {
+		kind: 'block',
+		properties: {
+			layout: { type: 'integer', default: 1 },
+			colorset: { type: 'integer', default: 0 },
+			background: {
+				type: 'node',
+				node_types: ['image'],
+				default_node_type: 'image'
+			},
+			title: {
+				type: 'annotated_text',
+				node_types: ALL_ANNOTATIONS,
+				allow_newlines: false
+			},
+			description: {
+				type: 'annotated_text',
+				node_types: ALL_ANNOTATIONS,
+				allow_newlines: false
+			},
+			buttons: {
+				type: 'node_array',
+				node_types: ['button'],
+				default_node_type: 'button'
+			}
+		}
+	},
+	swiper: {
+		kind: 'block',
+		properties: {
+			layout: { type: 'integer', default: 1 },
+			slides: {
+				type: 'node_array',
+				node_types: ['swiper_slide']
+			}
+		}
+	},
+	swiper_slide: {
+		kind: 'block',
+		properties: {
+			media: {
+				type: 'node',
+				node_types: ['image', 'video'],
+				default_node_type: 'image'
+			}
+		}
+	},
 
 	link: {
 		kind: 'annotation',
diff --git a/src/lib/server/asset_storage.js b/src/lib/server/asset_storage.js
index 60d12053..64e78864 100644
--- a/src/lib/server/asset_storage.js
+++ b/src/lib/server/asset_storage.js
@@ -171,4 +171,4 @@ export function create_variant_read_stream(asset_id, width) {
 export async function asset_size(asset_id) {
 	const s = await stat(asset_path(asset_id));
 	return s.size;
-}
\ No newline at end of file
+}
diff --git a/src/lib/server/db.js b/src/lib/server/db.js
index 24a144cd..a176c246 100644
--- a/src/lib/server/db.js
+++ b/src/lib/server/db.js
@@ -18,4 +18,4 @@ const db = new DatabaseSync(DB_PATH);
 // Enable WAL mode for better concurrent read performance
 db.exec('PRAGMA journal_mode=WAL');
 
-export default db;
\ No newline at end of file
+export default db;
diff --git a/src/lib/server/documents.js b/src/lib/server/documents.js
new file mode 100644
index 00000000..7919549e
--- /dev/null
+++ b/src/lib/server/documents.js
@@ -0,0 +1,123 @@
+import db from '$lib/server/db.js';
+import { document_schema } from '$lib/document_schema.js';
+import nanoid from '../../routes/nanoid.js';
+
+/**
+ * @typedef {Object} DocumentRow
+ * @property {string} document_id
+ * @property {string} type
+ * @property {string} data - JSON string containing document data
+ */
+
+/**
+ * @typedef {Object} DocumentData
+ * @property {string} document_id
+ * @property {Record<string, any>} nodes
+ */
+
+/**
+ * Get a single document row from the database.
+ * Returns null if not found.
+ *
+ * @param {string} document_id
+ * @returns {DocumentData | null}
+ */
+export function get_doc_from_db(document_id) {
+	const doc_row = /** @type {DocumentRow | undefined} */ (
+		db.prepare('SELECT * FROM documents WHERE document_id = ?').get(document_id)
+	);
+	if (!doc_row) {
+		return null;
+	}
+	return JSON.parse(doc_row.data);
+}
+
+/**
+ * Get a document from the database, stitching in shared documents (nav, footer).
+ * Throws if the base document is not found.
+ */
+export function stitch_document(document_id) {
+	const page_doc = get_doc_from_db(document_id);
+	if (!page_doc) {
+		throw new Error(`Document not found: ${document_id}`);
+	}
+
+	const page_node = page_doc.nodes[page_doc.document_id];
+
+	// Start with the page nodes
+	const merged_nodes = { ...page_doc.nodes };
+
+	// Stitch in nav if referenced
+	if (page_node?.nav) {
+		const nav_doc = get_doc_from_db(page_node.nav);
+		if (nav_doc) Object.assign(merged_nodes, nav_doc.nodes);
+	}
+
+	// Stitch in footer if referenced
+	if (page_node?.footer) {
+		const footer_doc = get_doc_from_db(page_node.footer);
+		if (footer_doc) Object.assign(merged_nodes, footer_doc.nodes);
+	}
+
+	return {
+		document_id: page_doc.document_id,
+		nodes: merged_nodes
+	};
+}
+
+/**
+ * Creates a blank page structure with a root node linking to nav_1 and footer_1.
+ *
+ * @param {string} document_id
+ * @returns {DocumentData}
+ */
+export function create_blank_page(document_id, template = 'blank') {
+	/** @type {DocumentData} */
+	const doc = {
+		document_id,
+		nodes: {
+			[document_id]: {
+				id: document_id,
+				type: 'page',
+				nav: 'nav_1',
+				footer: 'footer_1',
+				body: []
+			}
+		}
+	};
+
+	if (template === 'post') {
+		const hero_id = nanoid();
+		const prose_id = nanoid();
+		const text_id = nanoid();
+
+		doc.nodes[document_id].body = [hero_id, prose_id];
+
+		doc.nodes[hero_id] = {
+			id: hero_id,
+			type: 'hero',
+			layout: 1,
+			colorset: 0,
+			title: { text: 'New Blog Post', annotations: [] },
+			description: { text: 'Write a short summary or date here.', annotations: [] },
+			buttons: []
+		};
+
+		doc.nodes[prose_id] = {
+			id: prose_id,
+			type: 'prose',
+			layout: 1,
+			colorset: 0,
+			content: [text_id]
+		};
+
+		doc.nodes[text_id] = {
+			id: text_id,
+			type: 'text',
+			layout: 1,
+			content: { text: 'Start writing your post...', annotations: [] }
+		};
+	}
+
+	return doc;
+}
diff --git a/src/lib/server/migrate.js b/src/lib/server/migrate.js
index 3d1015f2..eb2c96b0 100644
--- a/src/lib/server/migrate.js
+++ b/src/lib/server/migrate.js
@@ -83,4 +83,4 @@ export default function migrate() {
 		db.exec('ROLLBACK');
 		throw error;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/lib/server/migrations.js b/src/lib/server/migrations.js
index 2eb6f142..0549b804 100644
--- a/src/lib/server/migrations.js
+++ b/src/lib/server/migrations.js
@@ -54,10 +54,7 @@ export default [
 		insert_doc.run('footer_1', 'footer', JSON.stringify(footer_1));
 		insert_doc.run('page_1', 'page', JSON.stringify(page_1));
 
-		db.prepare('INSERT INTO site_settings (key, value) VALUES(?, ?)').run(
-			'home_page_id',
-			'page_1'
-		);
+		db.prepare('INSERT INTO site_settings (key, value) VALUES(?, ?)').run('home_page_id', 'page_1');
 	},
 	function add_asset_refs({ db }) {
 		db.exec(`
@@ -67,5 +64,129 @@ export default [
 				PRIMARY KEY (asset_id, document_id)
 			)
 		`);
+	},
+	function add_footer_fields({ db }) {
+		const footer_docs = db.prepare('SELECT document_id, data FROM documents WHERE type = ?').all('footer');
+		const update_doc = db.prepare('UPDATE documents SET data = ? WHERE document_id = ?');
+
+		for (const { document_id, data } of footer_docs) {
+			if (!data) continue;
+			let parsed;
+			try {
+				parsed = JSON.parse(data);
+			} catch {
+				continue;
+			}
+			if (!parsed?.nodes) continue;
+			const footer_node = parsed.nodes[document_id];
+			if (!footer_node) continue;
+
+			if (!footer_node.team_thumb) {
+				if (footer_node.logo) {
+					footer_node.team_thumb = footer_node.logo;
+				} else {
+					const team_thumb_id = `${document_id}_team_thumb`;
+					parsed.nodes[team_thumb_id] = {
+						id: team_thumb_id,
+						type: 'image',
+						...MEDIA_DEFAULTS
+					};
+					footer_node.team_thumb = team_thumb_id;
+				}
+			}
+
+			if (!footer_node.company_name) {
+				footer_node.company_name = { text: 'Company name', annotations: [] };
+			}
+			if (!footer_node.company_description) {
+				footer_node.company_description = { text: 'Short description goes here.', annotations: [] };
+			}
+			if (!footer_node.company_address) {
+				footer_node.company_address = { text: '123 Main St, City', annotations: [] };
+			}
+			if (!footer_node.company_phone) {
+				footer_node.company_phone = { text: '(555) 555-5555', annotations: [] };
+			}
+			if (!footer_node.team_label) {
+				footer_node.team_label = { text: 'Team', annotations: [] };
+			}
+			if (!footer_node.team_name) {
+				footer_node.team_name = { text: 'Agent name', annotations: [] };
+			}
+			if (!footer_node.team_description) {
+				footer_node.team_description = { text: 'Role, short bio, or contact blurb.', annotations: [] };
+			}
+
+			update_doc.run(JSON.stringify(parsed), document_id);
+		}
+	},
+	function separate_footer_team_thumb({ db }) {
+		const footer_docs = db.prepare('SELECT document_id, data FROM documents WHERE type = ?').all('footer');
+		const update_doc = db.prepare('UPDATE documents SET data = ? WHERE document_id = ?');
+
+		for (const { document_id, data } of footer_docs) {
+			if (!data) continue;
+			let parsed;
+			try {
+				parsed = JSON.parse(data);
+			} catch {
+				continue;
+			}
+			if (!parsed?.nodes) continue;
+			const footer_node = parsed.nodes[document_id];
+			if (!footer_node) continue;
+
+			const logo_id = footer_node.logo;
+			const team_thumb_id = footer_node.team_thumb;
+
+			if (!logo_id) {
+				continue;
+			}
+
+			const logo_node = parsed.nodes[logo_id];
+			if (!logo_node) {
+				continue;
+			}
+
+			if (!team_thumb_id || team_thumb_id === logo_id) {
+				const base_id = `${document_id}_team_thumb`;
+				let new_team_thumb_id = base_id;
+				let suffix = 1;
+				while (parsed.nodes[new_team_thumb_id]) {
+					new_team_thumb_id = `${base_id}_${suffix}`;
+					suffix += 1;
+				}
+
+				parsed.nodes[new_team_thumb_id] = {
+					...logo_node,
+					id: new_team_thumb_id
+				};
+				footer_node.team_thumb = new_team_thumb_id;
+			}
+
+			update_doc.run(JSON.stringify(parsed), document_id);
+		}
+	},
+	function add_nav_company_name({ db }) {
+		const nav_docs = db.prepare('SELECT document_id, data FROM documents WHERE type = ?').all('nav');
+		const update_doc = db.prepare('UPDATE documents SET data = ? WHERE document_id = ?');
+
+		for (const { document_id, data } of nav_docs) {
+			if (!data) continue;
+			let parsed;
+			try {
+				parsed = JSON.parse(data);
+			} catch {
+				continue;
+			}
+			if (!parsed?.nodes) continue;
+			const nav_node = parsed.nodes[document_id];
+			if (!nav_node) continue;
+
+			if (!nav_node.company_name) {
+				nav_node.company_name = { text: 'Company name', annotations: [] };
+				update_doc.run(JSON.stringify(parsed), document_id);
+			}
+		}
 	}
 ];
diff --git a/src/lib/server_config.js b/src/lib/server_config.js
index df829092..7dd994ed 100644
--- a/src/lib/server_config.js
+++ b/src/lib/server_config.js
@@ -2,4 +2,4 @@ import { join } from 'node:path';
 
 export const DATA_DIR = process.env.DATA_DIR || 'data';
 export const DB_PATH = join(DATA_DIR, 'db.sqlite3');
-export const ASSET_PATH = join(DATA_DIR, 'assets');
\ No newline at end of file
+export const ASSET_PATH = join(DATA_DIR, 'assets');
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
index 3d241742..edbf9c6c 100644
--- a/src/routes/+layout.server.js
+++ b/src/routes/+layout.server.js
@@ -3,4 +3,4 @@ export function load() {
 	return {
 		has_backend: !process.env.VERCEL
 	};
-}
\ No newline at end of file
+}
diff --git a/src/routes/+page.server.js b/src/routes/+page.server.js
new file mode 100644
index 00000000..fcde1852
--- /dev/null
+++ b/src/routes/+page.server.js
@@ -0,0 +1,45 @@
+import { error } from '@sveltejs/kit';
+import { stitch_document } from '$lib/server/documents.js';
+import db from '$lib/server/db.js';
+
+export async function load({ parent }) {
+	const parent_data = await parent();
+	const has_backend = parent_data.has_backend;
+
+	if (!has_backend) {
+		return { has_backend };
+	}
+
+	// Fetch home_page_id from site_settings
+	const row = db.prepare("SELECT value FROM site_settings WHERE key = 'home_page_id'").get();
+	const home_page_id = row ? row.value : 'page_1';
+
+	let doc;
+	try {
+		doc = stitch_document(home_page_id);
+	} catch (err) {
+		throw error(404, 'Home page document not found');
+	}
+
+	// Extract title
+	let title = 'Home';
+	const page_node = doc.nodes[doc.document_id];
+	if (page_node && page_node.body) {
+		for (const node_id of page_node.body) {
+			const child = doc.nodes[node_id];
+			if (child && child.type === 'prose' && child.content) {
+				const first_text = doc.nodes[child.content[0]];
+				if (first_text && first_text.type === 'text' && first_text.content?.text) {
+					title = first_text.content.text.substring(0, 60);
+					break;
+				}
+			}
+		}
+	}
+
+	return {
+		doc,
+		title,
+		has_backend
+	};
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5e73f42e..920c7639 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,271 +1,6 @@
 <script>
-	import { setContext } from 'svelte';
-	import { page } from '$app/stores';
-	import { Svedit, KeyMapper, Command, define_keymap } from 'svedit';
-	import Toolbar from './components/Toolbar.svelte';
-	import { create_session } from './create_session.js';
-	import { demo_doc } from '$lib/demo_doc.js';
-	import SaveProgressModal from './components/SaveProgressModal.svelte';
-
+	import PageEditor from './components/PageEditor.svelte';
 	let { data } = $props();
-	// svelte-ignore state_referenced_locally
-	const has_backend = data.has_backend;
-
-	let app_el = $state();
-	let svedit_ref = $state();
-	let editable = $state(false);
-
-	// Save progress modal state
-	let save_progress_visible = $state(false);
-	let save_progress_message = $state('');
-	let save_progress_done = $state(false);
-
-	$effect(() => {
-		document.documentElement.style.scrollBehavior = editable ? 'auto' : 'smooth';
-	});
-
-	function focus_canvas() {
-		if (svedit_ref) {
-			svedit_ref.focus_canvas();
-		}
-	}
-
-	function check_browser_support() {
-		const ua = navigator.userAgent;
-		let browser = null;
-		let version = 0;
-
-		if (ua.includes('Chrome/')) {
-			browser = 'Chrome';
-			version = parseInt(ua.match(/Chrome\/(\d+)/)?.[1] || '0');
-		} else if (ua.includes('Firefox/')) {
-			browser = 'Firefox';
-			version = parseInt(ua.match(/Firefox\/(\d+)/)?.[1] || '0');
-		} else if (ua.includes('Safari/') && !ua.includes('Chrome')) {
-			browser = 'Safari';
-			version = parseInt(ua.match(/Version\/(\d+)/)?.[1] || '0');
-		}
-
-		const min_versions = { Chrome: 142, Firefox: 147, Safari: 26 };
-
-		if (browser && min_versions[browser] && version < min_versions[browser]) {
-			return { supported: false, browser, version, required: min_versions[browser] };
-		}
-
-		return { supported: true };
-	}
-
-	class EditCommand extends Command {
-		is_enabled() {
-			// Disabled if edit mode is already on
-			return !this.context.editable;
-		}
-
-		execute() {
-			const browser_check = check_browser_support();
-			if (!browser_check.supported) {
-				alert(`Your browser (${browser_check.browser} ${browser_check.version}) may not fully support the editor. For the best experience, please upgrade to ${browser_check.browser} ${browser_check.required} or newer.`);
-			}
-			this.context.editable = true;
-		}
-	}
-
-	class SaveCommand extends Command {
-		is_enabled() {
-			// Saving is only possible while edit mode is on
-			return this.context.editable;
-		}
-
-		async execute() {
-			if (!has_backend) {
-				// Vercel demo mode — no persistence
-				console.log('Document saved', session.to_json());
-				session.selection = null;
-				this.context.editable = false;
-				return;
-			}
-
-			// Node backend — full save with asset upload
-			const save_start = Date.now();
-
-			// Dynamically import backend-dependent modules
-			const [
-				// @ts-ignore — TypeScript can't infer exports through command() wrapper
-				{ save_document: persist_document },
-				{
-					collect_blob_urls,
-					wait_for_processing,
-					has_pending_processing,
-					ensure_processing,
-					upload_pending,
-					replace_blob_urls,
-					cleanup_pending
-				}
-			] = await Promise.all([
-				import('$lib/api.remote.js'),
-				import('$lib/client/asset_upload.js')
-			]);
-
-			// Start progress tracking (modal appears after 1s delay)
-			save_progress_visible = true;
-			save_progress_done = false;
-			save_progress_message = 'Saving…';
-
-			try {
-				let mapping = null;
-
-				// 1. Upload assets (before serializing the document)
-				const pre_check = session.to_json();
-				const blob_urls = collect_blob_urls(pre_check.nodes);
-
-				if (blob_urls.length > 0) {
-					const total = blob_urls.length;
-
-					// Re-start processing for any blob URLs missing from the pending map
-					// (e.g. after undo brought back blob URLs cleaned up by a previous save)
-					await ensure_processing(blob_urls);
-
-					// Wait for any images still being processed in the background
-					if (has_pending_processing()) {
-						save_progress_message = total === 1
-							? 'Processing image…'
-							: `Processing ${total} images…`;
-						await wait_for_processing(({ done, total: t }) => {
-							if (t > 1) {
-								save_progress_message = `Processing image ${done + 1}/${t}…`;
-							}
-						});
-					}
-
-					// Upload pending assets referenced in the document
-					mapping = await upload_pending(blob_urls, ({ phase, index, total: t }) => {
-						if (phase === 'uploading') {
-							save_progress_message = `Uploading image ${index}/${t}…`;
-						}
-					});
-				}
-
-				// 2. Replace blob URLs on the doc_json copy and save
-				save_progress_message = 'Saving…';
-				const doc_json = session.to_json();
-				if (mapping) {
-					replace_blob_urls(doc_json.nodes, mapping);
-				}
-
-				await persist_document(doc_json);
-
-				// 3. Save succeeded — now update the live session and clean up
-				if (mapping) {
-					const tr = session.tr;
-					for (const [blob_url, entry] of mapping.entries()) {
-						for (const node of Object.values(pre_check.nodes)) {
-							if (node.type === 'image' && node.src === blob_url) {
-								tr.set([node.id, 'src'], entry.asset_id);
-								tr.set([node.id, 'width'], entry.width);
-								tr.set([node.id, 'height'], entry.height);
-							}
-						}
-					}
-					session.apply(tr);
-					cleanup_pending(mapping);
-				}
-
-				console.log('Document saved');
-				session.selection = null;
-				this.context.editable = false;
-
-				// Flash success message only if save took more than 3s
-				if (Date.now() - save_start > 3000) {
-					save_progress_message = 'Successfully saved';
-					save_progress_done = true;
-					await new Promise((resolve) => setTimeout(resolve, 1500));
-				}
-				save_progress_visible = false;
-			} catch (err) {
-				console.error('Save failed:', err);
-				save_progress_visible = false;
-				alert('Save failed. Your changes have not been lost — please try again.');
-			}
-		}
-	}
-
-	// Create KeyMapper and provide via context (must happen synchronously before any await)
-	const key_mapper = new KeyMapper();
-	setContext('key_mapper', key_mapper);
-
-	const app_command_context = {
-		get editable() {
-			return editable;
-		},
-		set editable(value) {
-			editable = value;
-		},
-		get session() {
-			return session;
-		},
-		get app_el() {
-			return app_el;
-		}
-	};
-
-	const app_commands = {
-		edit_document: new EditCommand(app_command_context),
-		save_document: new SaveCommand(app_command_context)
-	};
-
-	// Push app-level keymap scope
-	const app_key_map = define_keymap({
-		'meta+e,ctrl+e': [app_commands.edit_document],
-		'meta+s,ctrl+s': [app_commands.save_document]
-	});
-	key_mapper.push_scope(app_key_map);
-
-	// Load document: from database when backend is available, otherwise use demo_doc
-	const doc = has_backend
-		? await import('$lib/api.remote.js').then((m) => m.get_document('page_1'))
-		: demo_doc;
-	let session = $derived(create_session(doc));
 </script>
 
-<svelte:window onkeydown={key_mapper.handle_keydown.bind(key_mapper)} />
-
-<svelte:head>
-	<title>Editable Website</title>
-</svelte:head>
-
-<!--
-	BUG: When navigating from / with preloading on the Svedit component ends up
-	with a stale session, breaking editing.
-	See https://github.com/michael/editable-website/issues/40
--->
-
-<!-- Workaround for #40: Note that page.url.pathname from $app/state does not work -->
-{#key $page.url.pathname}
-	<div class="demo-wrapper antialiased" bind:this={app_el}>
-		<Toolbar {session} {app_commands} {editable} {focus_canvas} />
-		<Svedit {session} bind:editable bind:this={svedit_ref} path={[session.doc.document_id]} />
-		{#if has_backend}
-			<SaveProgressModal visible={save_progress_visible} message={save_progress_message} done={save_progress_done} />
-		{/if}
-
-		<!-- {#if editable}
-			<div class="flex-column mx-auto my-10 w-full max-w-5xl gap-y-2">
-				<p>Selection:</p>
-				<pre tabindex="-1" class="debug-info p-4">{JSON.stringify(session.selection || {}, null, '  ')}</pre>
-				<p>Nodes:</p>
-				<pre tabindex="-1" class="debug-info p-4">{JSON.stringify(session.to_json(), null, '  ')}</pre>
-			</div>
-		{/if} -->
-	</div>
-{/key}
-
-<style>
-	/*.debug-info {
-		text-wrap: wrap;
-		height: 12lh;
-		overflow-y: auto;
-		color: white;
-		background: var(--primary-fill-color);
-		font-size: 12px;
-	}*/
-</style>
+<PageEditor {data} />
diff --git a/src/routes/[id]/+page.server.js b/src/routes/[id]/+page.server.js
new file mode 100644
index 00000000..601791a1
--- /dev/null
+++ b/src/routes/[id]/+page.server.js
@@ -0,0 +1,37 @@
+import { error } from '@sveltejs/kit';
+import { stitch_document } from '$lib/server/documents.js';
+import db from '$lib/server/db.js';
+
+export async function load({ params }) {
+	const document_id = params.id;
+	let doc;
+
+	try {
+		doc = stitch_document(document_id);
+	} catch (err) {
+		throw error(404, 'Page not found');
+	}
+
+	// Extract title from the first text node in the body, if any
+	let title = 'Untitled Page';
+	const page_node = doc.nodes[doc.document_id];
+
+	if (page_node && page_node.body) {
+		for (const node_id of page_node.body) {
+			const child = doc.nodes[node_id];
+			if (child && child.type === 'prose' && child.content) {
+				const first_text = doc.nodes[child.content[0]];
+				if (first_text && first_text.type === 'text' && first_text.content?.text) {
+					title = first_text.content.text.substring(0, 60);
+					break;
+				}
+			}
+		}
+	}
+
+	return {
+		doc,
+		title,
+		has_backend: true
+	};
+}
diff --git a/src/routes/[id]/+page.svelte b/src/routes/[id]/+page.svelte
new file mode 100644
index 00000000..807a5e50
--- /dev/null
+++ b/src/routes/[id]/+page.svelte
@@ -0,0 +1,6 @@
+<script>
+	import PageEditor from '../components/PageEditor.svelte';
+	let { data } = $props();
+</script>
+
+<PageEditor {data} />
diff --git a/src/routes/api/assets/+server.js b/src/routes/api/assets/+server.js
index ec308980..c172a846 100644
--- a/src/routes/api/assets/+server.js
+++ b/src/routes/api/assets/+server.js
@@ -17,7 +17,10 @@ export async function POST({ request }) {
 
 	const ext = CONTENT_TYPE_TO_EXT[content_type];
 	if (!ext) {
-		error(400, `Unsupported content type: ${content_type}. Expected image/webp, image/gif, image/svg+xml, video/mp4, or video/webm.`);
+		error(
+			400,
+			`Unsupported content type: ${content_type}. Expected image/webp, image/gif, image/svg+xml, video/mp4, or video/webm.`
+		);
 	}
 
 	const hash = request.headers.get('x-content-hash');
@@ -38,7 +41,9 @@ export async function POST({ request }) {
 		// Drain the request body without buffering
 		if (request.body) {
 			const reader = request.body.getReader();
-			while (!(await reader.read()).done) { /* drain */ }
+			while (!(await reader.read()).done) {
+				/* drain */
+			}
 		}
 
 		return json({ asset_id, width, height, deduplicated: true });
@@ -64,4 +69,4 @@ export async function POST({ request }) {
 	}
 
 	return json({ asset_id, width, height, deduplicated: false });
-}
\ No newline at end of file
+}
diff --git a/src/routes/api/assets/[asset_id]/+server.js b/src/routes/api/assets/[asset_id]/+server.js
index 97df2131..8d470aec 100644
--- a/src/routes/api/assets/[asset_id]/+server.js
+++ b/src/routes/api/assets/[asset_id]/+server.js
@@ -15,4 +15,4 @@ export async function DELETE({ params }) {
 
 	await delete_asset(asset_id);
 	return json({ ok: true });
-}
\ No newline at end of file
+}
diff --git a/src/routes/api/assets/[asset_id]/variants/+server.js b/src/routes/api/assets/[asset_id]/variants/+server.js
index c5945e5a..0687d966 100644
--- a/src/routes/api/assets/[asset_id]/variants/+server.js
+++ b/src/routes/api/assets/[asset_id]/variants/+server.js
@@ -12,7 +12,10 @@ export async function POST({ params, request }) {
 	}
 
 	// Validate content type
-	const content_type = (request.headers.get('content-type') ?? '').split(';')[0].trim().toLowerCase();
+	const content_type = (request.headers.get('content-type') ?? '')
+		.split(';')[0]
+		.trim()
+		.toLowerCase();
 	if (content_type !== 'image/webp') {
 		error(400, 'Variant must be image/webp');
 	}
@@ -51,4 +54,4 @@ export async function POST({ params, request }) {
 
 	const variant = `w${width}.webp`;
 	return json({ ok: true, variant });
-}
\ No newline at end of file
+}
diff --git a/src/routes/app_utils.js b/src/routes/app_utils.js
index 230b2b80..6e790855 100644
--- a/src/routes/app_utils.js
+++ b/src/routes/app_utils.js
@@ -150,4 +150,4 @@ export function get_closest_switchable_layout(session, session_config) {
 	}
 
 	return null;
-}
\ No newline at end of file
+}
diff --git a/src/routes/assets/[...path]/+server.js b/src/routes/assets/[...path]/+server.js
index 639e31df..b81a9430 100644
--- a/src/routes/assets/[...path]/+server.js
+++ b/src/routes/assets/[...path]/+server.js
@@ -113,4 +113,4 @@ export async function GET({ params }) {
 	}
 
 	return new Response(to_web_stream(stream), { headers });
-}
\ No newline at end of file
+}
diff --git a/src/routes/commands.svelte.js b/src/routes/commands.svelte.js
index 8444f553..425b9463 100644
--- a/src/routes/commands.svelte.js
+++ b/src/routes/commands.svelte.js
@@ -1,5 +1,9 @@
 import { Command, is_selection_collapsed } from 'svedit';
-import { get_closest_switchable_layout, get_colorset_node, get_closest_switchable_type } from './app_utils.js';
+import {
+	get_closest_switchable_layout,
+	get_colorset_node,
+	get_closest_switchable_type
+} from './app_utils.js';
 import { set_properties } from 'svedit';
 import { MEDIA_DEFAULTS } from '$lib/config.js';
 
@@ -8,7 +12,9 @@ import { MEDIA_DEFAULTS } from '$lib/config.js';
  * Direction can be 'next' or 'previous'.
  */
 export class CycleLayoutCommand extends Command {
-	closest_switchable_layout = $derived(get_closest_switchable_layout(this.context.session, this.context.session.config));
+	closest_switchable_layout = $derived(
+		get_closest_switchable_layout(this.context.session, this.context.session.config)
+	);
 
 	constructor(direction, context) {
 		super(context);
@@ -221,7 +227,10 @@ export class EditLinkCommand extends Command {
 			const { session } = this.context;
 			// Select the parent node if a property is selected (but not for annotation links)
 			const active_link = session.active_annotation('link');
-			if (!active_link && (session.selection?.type === 'text' || session.selection?.type === 'property')) {
+			if (
+				!active_link &&
+				(session.selection?.type === 'text' || session.selection?.type === 'property')
+			) {
 				session.select_parent();
 			}
 			// Wait for selection change to settle before showing prompt
diff --git a/src/routes/components/Button.svelte b/src/routes/components/Button.svelte
index d4fbf74d..628258ad 100644
--- a/src/routes/components/Button.svelte
+++ b/src/routes/components/Button.svelte
@@ -9,20 +9,15 @@
 	let layout = $derived(node.layout || 1);
 </script>
 
-
-
 {#snippet layout_1()}
 	<svelte:element
 		this={render_as_link ? 'a' : 'div'}
 		href={render_as_link ? node.href : undefined}
 		target={render_as_link ? node.target : undefined}
-		class="ew-button font-medium flex items-center justify-center px-4 py-3 min-w-[calc(1lh+24px)] bg-(--accent) text-(--accent-foreground) rounded-(--button-border-radius)"
+		class="ew-button flex min-w-[calc(1lh+24px)] items-center justify-center rounded-(--button-border-radius) bg-(--accent) px-4 py-3 font-medium text-(--accent-foreground)"
 		class:hover:opacity-80={render_as_link}
 	>
-		<AnnotatedTextProperty
-			path={[...path, 'label']}
-			placeholder="Label"
-		/>
+		<AnnotatedTextProperty path={[...path, 'label']} placeholder={svedit.editable ? 'Label' : undefined} />
 	</svelte:element>
 {/snippet}
 
@@ -31,12 +26,11 @@
 		this={render_as_link ? 'a' : 'div'}
 		href={render_as_link ? node.href : undefined}
 		target={render_as_link ? node.target : undefined}
-		class="ew-button font-medium flex items-center justify-center px-4 py-3 -outline-offset-2 outline-2 outline-(--foreground) text-(--foreground) rounded-(--button-border-radius) {render_as_link ? 'hover:bg-(--foreground)/10' : ''}"
+		class="ew-button flex items-center justify-center rounded-(--button-border-radius) px-4 py-3 font-medium text-(--foreground) outline-2 -outline-offset-2 outline-(--foreground) {render_as_link
+			? 'hover:bg-(--foreground)/10'
+			: ''}"
 	>
-		<AnnotatedTextProperty
-			path={[...path, 'label']}
-			placeholder="Label"
-		/>
+		<AnnotatedTextProperty path={[...path, 'label']} placeholder={svedit.editable ? 'Label' : undefined} />
 	</svelte:element>
 {/snippet}
 
diff --git a/src/routes/components/Column.svelte b/src/routes/components/Column.svelte
new file mode 100644
index 00000000..0fd525c3
--- /dev/null
+++ b/src/routes/components/Column.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { Node, NodeArrayProperty } from 'svedit';
+
+	let { path } = $props();
+</script>
+
+<Node class="ew-column" {path}>
+	<NodeArrayProperty class="flex flex-col gap-6" path={[...path, 'content']} />
+</Node>
diff --git a/src/routes/components/Columns.svelte b/src/routes/components/Columns.svelte
new file mode 100644
index 00000000..93dca65c
--- /dev/null
+++ b/src/routes/components/Columns.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { getContext } from 'svelte';
+	import { Node, NodeArrayProperty } from 'svedit';
+	import { TW_LIMITER, TW_PAGE_PADDING_X, TW_BLOCK_PADDING_Y } from '../tailwind_theme.js';
+
+	const svedit = getContext('svedit');
+	let { path } = $props();
+	let node = $derived(svedit.session.get(path));
+	let layout = $derived(node.layout || 1);
+
+	function get_grid_class() {
+		return layout === 2
+			? 'grid grid-cols-1 gap-8 md:grid-cols-3'
+			: 'grid grid-cols-1 gap-8 md:grid-cols-2';
+	}
+</script>
+
+<Node class="ew-columns bg-(--background) text-(--foreground)" {path}>
+	<div class={TW_LIMITER}>
+		<div class={TW_BLOCK_PADDING_Y}>
+			<div class={TW_PAGE_PADDING_X}>
+				<NodeArrayProperty
+					class="columns-grid {get_grid_class()} [--row:0]"
+					path={[...path, 'columns']}
+				/>
+			</div>
+		</div>
+	</div>
+</Node>
diff --git a/src/routes/components/CreateLink.svelte b/src/routes/components/CreateLink.svelte
index 7cb1001d..3f704772 100644
--- a/src/routes/components/CreateLink.svelte
+++ b/src/routes/components/CreateLink.svelte
@@ -64,7 +64,7 @@
 
 <dialog
 	bind:this={dialog_ref}
-	class="create-link-dialog absolute z-40 mt-1 m-0 bg-white p-0 shadow-xl overflow-visible max-h-90 border border-(--svedit-editing-stroke)"
+	class="create-link-dialog absolute z-40 m-0 mt-1 max-h-90 overflow-visible border border-(--svedit-editing-stroke) bg-white p-0 shadow-xl"
 	style="position-anchor: --selection-highlight; position-area: block-end span-all; justify-self: anchor-center;"
 	onclick={handle_backdrop_click}
 >
@@ -74,21 +74,21 @@
 			type="url"
 			bind:value={href_input_value}
 			placeholder="https://example.com"
-			class="w-72 px-3 py-2 text-sm text-gray-700 border-b border-gray-200 focus:border-(--svedit-editing-stroke) focus:ring-(--svedit-editing-stroke)"
+			class="w-72 border-b border-gray-200 px-3 py-2 text-sm text-gray-700 focus:border-(--svedit-editing-stroke) focus:ring-(--svedit-editing-stroke)"
 			onkeydown={handle_keydown}
 		/>
 		<div class="flex items-center justify-between px-3 py-2">
-			<label class="flex items-center gap-2 cursor-pointer">
+			<label class="flex cursor-pointer items-center gap-2">
 				<input
 					type="checkbox"
 					bind:checked={open_in_new_tab}
-					class="w-4 h-4 cursor-pointer text-(--svedit-editing-stroke) focus:ring-(--svedit-editing-stroke)"
+					class="h-4 w-4 cursor-pointer text-(--svedit-editing-stroke) focus:ring-(--svedit-editing-stroke)"
 				/>
 				<span class="text-sm text-gray-600">Open in new tab</span>
 			</label>
 			<button
 				type="button"
-				class="text-sm text-(--svedit-editing-stroke) cursor-pointer shrink-0 hover:opacity-80"
+				class="shrink-0 cursor-pointer text-sm text-(--svedit-editing-stroke) hover:opacity-80"
 				onclick={create_link}
 			>
 				CREATE
diff --git a/src/routes/components/EditLink.svelte b/src/routes/components/EditLink.svelte
index cb084136..d57cb1e1 100644
--- a/src/routes/components/EditLink.svelte
+++ b/src/routes/components/EditLink.svelte
@@ -75,8 +75,10 @@
 
 <dialog
 	bind:this={dialog_ref}
-	class="edit-link-dialog absolute z-40 mt-1 m-0 bg-white p-0 shadow-xl overflow-visible max-h-90 border-1 border-(--svedit-editing-stroke)"
-	style="position-anchor: --{path.join('-')}; position-area: block-end span-all; justify-self: anchor-center;"
+	class="edit-link-dialog absolute z-40 m-0 mt-1 max-h-90 overflow-visible border-1 border-(--svedit-editing-stroke) bg-white p-0 shadow-xl"
+	style="position-anchor: --{path.join(
+		'-'
+	)}; position-area: block-end span-all; justify-self: anchor-center;"
 	onclick={handle_backdrop_click}
 >
 	<div class="flex flex-col">
@@ -85,21 +87,21 @@
 			type="url"
 			bind:value={href_input_value}
 			placeholder="https://example.com"
-			class="w-72 px-3 py-2 text-sm text-gray-700 border-0 outline-none focus:ring-1 focus:ring-(--svedit-editing-stroke)"
+			class="w-72 border-0 px-3 py-2 text-sm text-gray-700 outline-none focus:ring-1 focus:ring-(--svedit-editing-stroke)"
 			onkeydown={handle_keydown}
 		/>
 		<div class="flex items-center justify-between px-3 py-2">
-			<label class="flex items-center gap-2 cursor-pointer">
+			<label class="flex cursor-pointer items-center gap-2">
 				<input
 					type="checkbox"
 					bind:checked={open_in_new_tab}
-					class="w-4 h-4 cursor-pointer text-(--svedit-editing-stroke) focus:ring-(--svedit-editing-stroke)"
+					class="h-4 w-4 cursor-pointer text-(--svedit-editing-stroke) focus:ring-(--svedit-editing-stroke)"
 				/>
 				<span class="text-sm text-gray-600">Open in new tab</span>
 			</label>
 			<button
 				type="button"
-				class="text-sm text-(--svedit-editing-stroke) cursor-pointer shrink-0 hover:opacity-80"
+				class="shrink-0 cursor-pointer text-sm text-(--svedit-editing-stroke) hover:opacity-80"
 				onclick={save}
 			>
 				UPDATE
diff --git a/src/routes/components/Figure.svelte b/src/routes/components/Figure.svelte
index 2a66c9f1..b99b8ffc 100644
--- a/src/routes/components/Figure.svelte
+++ b/src/routes/components/Figure.svelte
@@ -9,11 +9,11 @@
 </script>
 
 <Node {path}>
-	<div class="{TW_LIMITER}">
-		<div class="figure {TW_PAGE_PADDING_X} py-16">
+	<div class={TW_LIMITER}>
+		<div class="figure {TW_PAGE_PADDING_X} py-4">
 			<div class="overflow-hidden" style:border-radius="var(--image-border-radius)">
 				<MediaProperty path={[...path, 'media']} sizing="fit" fallback_aspect_ratio="16 / 9" />
 			</div>
 		</div>
 	</div>
-</Node>
\ No newline at end of file
+</Node>
diff --git a/src/routes/components/Footer.svelte b/src/routes/components/Footer.svelte
index d1e1dde5..d06eb562 100644
--- a/src/routes/components/Footer.svelte
+++ b/src/routes/components/Footer.svelte
@@ -9,33 +9,109 @@
 	let node = $derived(svedit.session.get(path));
 	let column_count = $derived(node.footer_link_columns?.length || 0);
 	let grid_cols_class = $derived(
-		column_count <= 1 ? 'lg:grid-cols-1' :
-		column_count === 2 ? 'lg:grid-cols-2' :
-		column_count === 3 ? 'lg:grid-cols-3' :
-		'lg:grid-cols-3'
+		column_count <= 1
+			? 'lg:grid-cols-1'
+			: column_count === 2
+				? 'lg:grid-cols-2'
+				: column_count === 3
+					? 'lg:grid-cols-3'
+					: 'lg:grid-cols-3'
 	);
+	let footer_background_style =
+		"background: url('/assets/footer-bg.jpg') center left no-repeat; background-size: contain;background-color:#efefef;";
+	let current_year = new Date().getFullYear();
 </script>
 
 <Node {path} class="lg:text-lg">
-	<div class="{TW_LIMITER}">
-		<div class="flex flex-col items-center text-center lg:text-left lg:flex-row lg:items-start gap-8 lg:gap-12 py-10 lg:py-16 {TW_PAGE_PADDING_X}">
-			<div class="flex flex-col items-center lg:items-start lg:w-1/3">
-				<svelte:element
-					this={svedit.editable ? 'div' : 'a'}
-					href={svedit.editable ? undefined : '/'}
-				>
-					<MediaProperty path={[...path, 'logo']} sizing="native" fallback_width={72} fallback_aspect_ratio="1 / 1" />
-				</svelte:element>
+	<footer class="site-info custom-footer text-(--foreground)" style={footer_background_style}>
+		<div class="{TW_LIMITER} pt-6 lg:pt-8">
+			<div class="flex flex-col gap-10 py-10 lg:flex-row lg:justify-between {TW_PAGE_PADDING_X}">
+				<div class="text-left lg:w-5/12">
+					<div class="text-base leading-7">
+						<AnnotatedTextProperty
+							tag="h2"
+							class="mb-3 text-2xl font-semibold tracking-tight"
+							path={[...path, 'company_name']}
+							placeholder={svedit.editable ? 'Company name' : undefined}
+						/>
+						<AnnotatedTextProperty
+							tag="p"
+							class="opacity-80"
+							path={[...path, 'company_description']}
+							placeholder={svedit.editable ? 'Short description' : undefined}
+						/>
+						<ul class="mt-4 space-y-2">
+							<li>
+								<AnnotatedTextProperty
+									tag="span"
+									class="inline"
+									path={[...path, 'company_address']}
+									placeholder={svedit.editable ? 'Address' : undefined}
+								/>
+							</li>
+							<li>
+								<AnnotatedTextProperty
+									tag="span"
+									class="inline"
+									path={[...path, 'company_phone']}
+									placeholder={svedit.editable ? 'Phone' : undefined}
+								/>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="lg:w-5/12">
+					<div class="grid grid-cols-1 gap-6 lg:grid-cols-12">
+						<div class="text-left lg:col-span-8">
+							<div class="mt-3 text-base leading-7">
+								<AnnotatedTextProperty
+									tag="h4"
+									class="mb-3 text-xl font-semibold"
+									path={[...path, 'team_name']}
+									placeholder={svedit.editable ? 'Name' : undefined}
+								/>
+								<AnnotatedTextProperty
+									tag="p"
+									class="opacity-80"
+									path={[...path, 'team_description']}
+									placeholder={svedit.editable ? 'Role or bio' : undefined}
+								/>
+							</div>
+						</div>
+						<div class="lg:col-span-4">
+							<div class="border border-(--foreground)/20">
+								<svelte:element
+									this={svedit.editable ? 'div' : 'a'}
+									href={svedit.editable ? undefined : '/'}
+								>
+									<MediaProperty
+										path={[...path, 'team_thumb']}
+										sizing="native"
+										fallback_width={96}
+										fallback_aspect_ratio="1 / 1"
+									/>
+								</svelte:element>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- <div class={TW_PAGE_PADDING_X}>
+				<NodeArrayProperty
+					class="footer-menu grid grid-cols-1 {grid_cols_class} gap-x-8 gap-y-6 pb-4 [--row:1] lg:gap-y-8"
+					path={[...path, 'footer_link_columns']}
+				/>
+			</div> -->
+			<div
+				class="flex flex-wrap items-center justify-center gap-3 border-t border-(--foreground)/20 py-3 {TW_PAGE_PADDING_X}"
+			>
+				<span class="text-sm opacity-80">© {current_year}</span>
 				<AnnotatedTextProperty
-					class="mt-6 mb-0 lg:mb-0"
+					class="text-sm opacity-80"
 					path={[...path, 'copyright']}
-					placeholder="© 2025 Company"
+					placeholder={svedit.editable ? 'Company name' : undefined}
 				/>
 			</div>
-			<NodeArrayProperty
-				class="footer-columns grid grid-cols-1 {grid_cols_class} flex-1 gap-x-8 gap-y-6 lg:gap-y-12 [--row:1]"
-				path={[...path, 'footer_link_columns']}
-			/>
 		</div>
-	</div>
+	</footer>
 </Node>
diff --git a/src/routes/components/FooterLink.svelte b/src/routes/components/FooterLink.svelte
index d25e56f9..a6c92d20 100644
--- a/src/routes/components/FooterLink.svelte
+++ b/src/routes/components/FooterLink.svelte
@@ -19,7 +19,7 @@
 			class:hover:decoration-(--accent)={render_as_link}
 			class:hover:underline-offset-2={render_as_link}
 		>
-			<AnnotatedTextProperty class="inline" path={[...path, 'label']} placeholder="Label" />
+			<AnnotatedTextProperty class="inline" path={[...path, 'label']} placeholder={svedit.editable ? 'Label' : undefined} />
 		</svelte:element>
 	</div>
 </Node>
diff --git a/src/routes/components/FooterLinkColumn.svelte b/src/routes/components/FooterLinkColumn.svelte
index 72041d8a..21eb6c42 100644
--- a/src/routes/components/FooterLinkColumn.svelte
+++ b/src/routes/components/FooterLinkColumn.svelte
@@ -8,14 +8,14 @@
 </script>
 
 <Node {path}>
-	<div class="footer-link-column flex flex-col items-center lg:items-start gap-3 lg:gap-6">
+	<div class="footer-link-column flex flex-col items-center gap-3 lg:items-start lg:gap-6">
 		<AnnotatedTextProperty
-			class="text-xs md:text-sm uppercase tracking-widest text-(--foreground) opacity-60"
+			class="text-xs tracking-widest text-(--foreground) uppercase opacity-60 md:text-sm"
 			path={[...path, 'label']}
-			placeholder="Column Label"
+			placeholder={svedit.editable ? 'Column Label' : undefined}
 		/>
 		<NodeArrayProperty
-			class="footer-links w-full flex flex-col items-center lg:items-stretch"
+			class="footer-links flex w-full flex-col items-center lg:items-stretch"
 			path={[...path, 'footer_links']}
 		/>
 	</div>
diff --git a/src/routes/components/Gallery.svelte b/src/routes/components/Gallery.svelte
index 410bef42..9e311671 100644
--- a/src/routes/components/Gallery.svelte
+++ b/src/routes/components/Gallery.svelte
@@ -11,6 +11,21 @@
 	let has_outro = $derived(node.outro && node.outro.length > 0);
 	let grid_layout = $derived.by(get_grid_layout);
 
+	$effect(() => {
+		if (svedit.editable || typeof Fancybox === 'undefined') return;
+
+		Fancybox.bind('[data-fancybox="gallery"]', {
+			// Custom options
+			Hash: false,
+			Thumbs: {
+				autoStart: false
+			}
+		});
+
+		return () => {
+			Fancybox.destroy();
+		};
+	});
 
 	function get_grid_layout() {
 		const layouts = {
@@ -48,27 +63,48 @@
 	`;
 </script>
 
+<svelte:head>
+	<link
+		rel="stylesheet"
+		href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
+	/>
+	<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
+</svelte:head>
+
 {#snippet intro()}
-	{@const intro_padding = has_intro ? 'pt-10 sm:pt-14 md:pt-16 lg:pt-20 pb-2 sm:pb-3 md:pb-5 lg:pb-7' : 'pt-10 sm:pt-14 md:pt-16 lg:pt-20'}
+	{@const intro_padding = has_intro
+		? 'pt-10 sm:pt-14 md:pt-16 lg:pt-20 pb-2 sm:pb-3 md:pb-5 lg:pb-7'
+		: 'pt-10 sm:pt-14 md:pt-16 lg:pt-20'}
 	<div class="{TW_PAGE_PADDING_X} max-w-4xl lg:text-lg {intro_padding}">
-		<NodeArrayProperty class="ew-intro flex flex-col gap-5 md:gap-8 {heading_spacing}" path={[...path, 'intro']} />
+		<NodeArrayProperty
+			class="ew-intro flex flex-col gap-5 md:gap-8 {heading_spacing}"
+			path={[...path, 'intro']}
+		/>
 	</div>
 {/snippet}
 
 {#snippet outro()}
-	{@const outro_padding = has_outro ? 'pt-5 sm:pt-7 md:pt-10 lg:pt-14 pb-10 sm:pb-14 md:pb-16 lg:pb-20' : 'pb-2.5 sm:pb-3.5 md:pb-5 lg:pb-7'}
+	{@const outro_padding = has_outro
+		? 'pt-5 sm:pt-7 md:pt-10 lg:pt-14 pb-10 sm:pb-14 md:pb-16 lg:pb-20'
+		: 'pb-2.5 sm:pb-3.5 md:pb-5 lg:pb-7'}
 	<div class="{TW_PAGE_PADDING_X} max-w-4xl lg:text-lg {outro_padding}">
-		<NodeArrayProperty class="ew-outro flex flex-col gap-5 md:gap-8 {heading_spacing}" path={[...path, 'outro']} />
+		<NodeArrayProperty
+			class="ew-outro flex flex-col gap-5 md:gap-8 {heading_spacing}"
+			path={[...path, 'outro']}
+		/>
 	</div>
 {/snippet}
 
 <Node {path}>
 	<div class="bg-(--background) text-(--foreground) {colorset_class}">
-		<div class="{TW_LIMITER} w-full ">
+		<div class="{TW_LIMITER} w-full">
 			<div>
 				{@render intro()}
 				<div class="{TW_PAGE_PADDING_X} py-2.5 sm:py-3.5 md:py-5 lg:py-7">
-					<NodeArrayProperty class="flex flex-col gap-5 sm:gap-7 md:gap-10 lg:gap-14 {grid_layout}" path={[...path, 'gallery_items']} />
+					<NodeArrayProperty
+						class="flex flex-col gap-5 sm:gap-7 md:gap-10 lg:gap-14 {grid_layout}"
+						path={[...path, 'gallery_items']}
+					/>
 				</div>
 				{@render outro()}
 			</div>
diff --git a/src/routes/components/GalleryItem.svelte b/src/routes/components/GalleryItem.svelte
index c73a703c..1714a1d2 100644
--- a/src/routes/components/GalleryItem.svelte
+++ b/src/routes/components/GalleryItem.svelte
@@ -1,16 +1,33 @@
 <script>
+	import { getContext } from 'svelte';
 	import { Node } from 'svedit';
 	import MediaProperty from './MediaProperty.svelte';
+	import { ASSET_BASE } from '$lib/config.js';
 	import { reveal } from '../reveal.js';
+
 	let { path } = $props();
-	let item_index = $derived(typeof path[path.length - 1] === 'number' ? path[path.length - 1] : 0);
+
+	const svedit = getContext('svedit');
+	let item_index = $derived(
+		typeof path[path.length - 1] === 'number' ? path[path.length - 1] : 0
+	);
+	let media_node = $derived(svedit.session.get([...path, 'media']));
+
+	// Resolve the full-size image URL for Fancybox
+	let is_blob = $derived(media_node?.src?.startsWith('blob:'));
+	let display_src = $derived(
+		is_blob ? media_node.src : media_node?.src ? `${ASSET_BASE}/${media_node.src}` : ''
+	);
 </script>
 
 <Node class="gallery-item" {path}>
 	<div
 		class="image-wrapper overflow-hidden"
+		class:cursor-pointer={!svedit.editable && display_src}
 		style:border-radius="var(--image-border-radius)"
 		use:reveal={{ delay: item_index * 150 }}
+		data-fancybox={!svedit.editable ? 'gallery' : undefined}
+		data-src={!svedit.editable ? display_src : undefined}
 	>
 		<MediaProperty class="image-property" path={[...path, 'media']} sizing="fill" />
 	</div>
diff --git a/src/routes/components/Hero.svelte b/src/routes/components/Hero.svelte
index d0048a27..62945877 100644
--- a/src/routes/components/Hero.svelte
+++ b/src/routes/components/Hero.svelte
@@ -13,23 +13,27 @@
 </script>
 
 {#snippet layout_1()}
-	<div class="{TW_LIMITER}">
-		<div class="min-h-screen flex items-center py-20 md:py-28 lg:py-36">
-			<div class="{TW_PAGE_PADDING_X} mx-auto max-w-5xl text-center w-full" use:reveal>
+	<div class={TW_LIMITER}>
+		<div class="flex min-h-screen items-center py-20 md:py-28 lg:py-36">
+			<div class="{TW_PAGE_PADDING_X} mx-auto w-full max-w-5xl text-center" use:reveal>
 				<AnnotatedTextProperty
 					tag="h1"
-					class="ew-h1 leading-tight font-serif text-5xl md:text-6xl lg:text-7xl text-balance text-(--foreground)"
+					class="ew-h1 text-5xl leading-tight text-balance text-(--foreground) md:text-6xl lg:text-7xl"
 					path={[...path, 'title']}
-					placeholder="Your bold statement goes here"
+					placeholder={svedit.editable ? 'Your bold statement goes here' : undefined}
 				/>
 				<AnnotatedTextProperty
 					tag="p"
-					class="mt-6 md:mt-8 text-lg md:text-xl text-balance"
+					class="mt-6 text-lg text-balance md:mt-8 md:text-xl"
 					path={[...path, 'description']}
-					placeholder="A supporting sentence that adds context and draws visitors in. Keep it clear, concise, and compelling."
+					placeholder={svedit.editable
+						? 'A supporting sentence that adds context and draws visitors in. Keep it clear, concise, and compelling.'
+						: undefined}
 				/>
 				<NodeArrayProperty
-					class="[--row:1] hero-buttons flex flex-wrap items-center justify-center gap-4 mt-10{!has_buttons ? ' empty' : ''}"
+					class="hero-buttons flex flex-wrap items-center justify-center gap-4 [--row:1] mt-10{!has_buttons
+						? ' empty'
+						: ''}"
 					path={[...path, 'buttons']}
 				/>
 			</div>
@@ -38,23 +42,27 @@
 {/snippet}
 
 {#snippet layout_2()}
-	<div class="{TW_LIMITER}">
+	<div class={TW_LIMITER}>
 		<div class="py-20 md:py-28 lg:py-36">
 			<div class="{TW_PAGE_PADDING_X} max-w-4xl" use:reveal>
 				<AnnotatedTextProperty
 					tag="h1"
-					class="ew-h1 font-serif text-3xl md:text-4xl lg:text-5xl text-balance text-(--foreground)"
+					class="ew-h1 font-sans text-3xl text-balance text-(--foreground) md:text-4xl lg:text-5xl"
 					path={[...path, 'title']}
-					placeholder="Your bold statement goes here"
+					placeholder={svedit.editable ? 'Your bold statement goes here' : undefined}
 				/>
 				<AnnotatedTextProperty
 					tag="p"
 					class="mt-6 text-balance"
 					path={[...path, 'description']}
-					placeholder="A supporting sentence that adds context and draws visitors in. Keep it clear, concise, and compelling."
+					placeholder={svedit.editable
+						? 'A supporting sentence that adds context and draws visitors in. Keep it clear, concise, and compelling.'
+						: undefined}
 				/>
 				<NodeArrayProperty
-					class="[--row:1] hero-buttons flex flex-wrap items-center gap-4 mt-10{!has_buttons ? ' empty' : ''}"
+					class="hero-buttons flex flex-wrap items-center gap-4 [--row:1] mt-10{!has_buttons
+						? ' empty'
+						: ''}"
 					path={[...path, 'buttons']}
 				/>
 			</div>
@@ -63,23 +71,27 @@
 {/snippet}
 
 {#snippet layout_3()}
-	<div class="{TW_LIMITER}">
+	<div class={TW_LIMITER}>
 		<div class="py-20 md:py-28 lg:py-36">
 			<div class="{TW_PAGE_PADDING_X} mx-auto max-w-4xl text-center" use:reveal>
 				<AnnotatedTextProperty
 					tag="h1"
-					class="ew-h1 font-serif text-3xl md:text-4xl lg:text-5xl text-balance text-(--foreground)"
+					class="ew-h1 font-sans text-3xl text-balance text-(--foreground) md:text-4xl lg:text-5xl"
 					path={[...path, 'title']}
-					placeholder="Your bold statement goes here"
+					placeholder={svedit.editable ? 'Your bold statement goes here' : undefined}
 				/>
 				<AnnotatedTextProperty
 					tag="p"
 					class="mt-6 text-balance"
 					path={[...path, 'description']}
-					placeholder="A supporting sentence that adds context and draws visitors in. Keep it clear, concise, and compelling."
+					placeholder={svedit.editable
+						? 'A supporting sentence that adds context and draws visitors in. Keep it clear, concise, and compelling.'
+						: undefined}
 				/>
 				<NodeArrayProperty
-					class="[--row:1] hero-buttons flex flex-wrap items-center justify-center gap-4 mt-10{!has_buttons ? ' empty' : ''}"
+					class="hero-buttons flex flex-wrap items-center justify-center gap-4 [--row:1] mt-10{!has_buttons
+						? ' empty'
+						: ''}"
 					path={[...path, 'buttons']}
 				/>
 			</div>
@@ -88,25 +100,31 @@
 {/snippet}
 
 {#snippet layout_4()}
-	<div class="{TW_LIMITER}">
+	<div class={TW_LIMITER}>
 		<div class="grid grid-cols-3 py-20 md:py-28 lg:py-36">
 			<!-- IMPORTANT: Keep in sync with TW_PAGE_PADDING_X -->
-			<div class="max-sm:pl-5 max-md:pl-7 pr-5 sm:pr-7 md:pr-10 lg:pr-14 col-span-3 md:col-span-2 md:col-start-2">
-				<div class="{TW_MOBILE_LEFT_INSET}" use:reveal>
+			<div
+				class="col-span-3 pr-5 max-md:pl-7 max-sm:pl-5 sm:pr-7 md:col-span-2 md:col-start-2 md:pr-10 lg:pr-14"
+			>
+				<div class={TW_MOBILE_LEFT_INSET} use:reveal>
 					<AnnotatedTextProperty
 						tag="h1"
-						class="ew-h1 font-serif text-3xl md:text-4xl lg:text-5xl text-balance text-(--foreground)"
+						class="ew-h1 font-sans text-3xl text-balance text-(--foreground) md:text-4xl lg:text-5xl"
 						path={[...path, 'title']}
-						placeholder="Your bold statement goes here"
+						placeholder={svedit.editable ? 'Your bold statement goes here' : undefined}
 					/>
 					<AnnotatedTextProperty
 						tag="p"
 						class="mt-6 text-balance"
 						path={[...path, 'description']}
-						placeholder="A supporting sentence that adds context and draws visitors in. Keep it clear, concise, and compelling."
+						placeholder={svedit.editable
+							? 'A supporting sentence that adds context and draws visitors in. Keep it clear, concise, and compelling.'
+							: undefined}
 					/>
 					<NodeArrayProperty
-						class="[--row:1] hero-buttons flex flex-wrap items-center gap-4 mt-10{!has_buttons ? ' empty' : ''}"
+						class="hero-buttons flex flex-wrap items-center gap-4 [--row:1] mt-10{!has_buttons
+							? ' empty'
+							: ''}"
 						path={[...path, 'buttons']}
 					/>
 				</div>
@@ -115,7 +133,7 @@
 	</div>
 {/snippet}
 
-<Node class="ew-hero lg:text-lg bg-(--background) text-(--foreground) {colorset_class}" {path}>
+<Node class="ew-hero bg-(--background) text-(--foreground) lg:text-lg {colorset_class}" {path}>
 	{@const layouts = [layout_1, layout_2, layout_3, layout_4]}
 	{@render layouts[layout - 1]()}
 </Node>
diff --git a/src/routes/components/Highlight.svelte b/src/routes/components/Highlight.svelte
index f6e4ac2f..90ff5d4b 100644
--- a/src/routes/components/Highlight.svelte
+++ b/src/routes/components/Highlight.svelte
@@ -9,6 +9,5 @@
 	id={node.id}
 	data-node-id={node.id}
 	class="bg-(--accent) text-(--accent-foreground) no-underline"
-	style="anchor-name: --{path.join('-')};">{content}</span>
-
-
+	style="anchor-name: --{path.join('-')};">{content}</span
+>
diff --git a/src/routes/components/HighlightItem.svelte b/src/routes/components/HighlightItem.svelte
new file mode 100644
index 00000000..a1b05162
--- /dev/null
+++ b/src/routes/components/HighlightItem.svelte
@@ -0,0 +1,28 @@
+<script>
+	import { getContext } from 'svelte';
+	import { Node, AnnotatedTextProperty } from 'svedit';
+	const svedit = getContext('svedit');
+
+	let { path } = $props();
+</script>
+
+<Node
+	tag="li"
+	class="highlights-item w-full border-b border-(--border-color) pb-2 md:w-[calc(50%-1rem)]"
+	{path}
+>
+	<div class="flex flex-wrap items-baseline justify-between gap-x-2 gap-y-1">
+		<AnnotatedTextProperty
+			tag="span"
+			class="text-(--foreground)"
+			path={[...path, 'label']}
+			placeholder={svedit.editable ? 'Label' : undefined}
+		/>
+		<AnnotatedTextProperty
+			tag="span"
+			class="text-(--foreground)"
+			path={[...path, 'value']}
+			placeholder={svedit.editable ? 'Value' : undefined}
+		/>
+	</div>
+</Node>
diff --git a/src/routes/components/Highlights.svelte b/src/routes/components/Highlights.svelte
new file mode 100644
index 00000000..8abb57ea
--- /dev/null
+++ b/src/routes/components/Highlights.svelte
@@ -0,0 +1,55 @@
+<script>
+	import { getContext } from 'svelte';
+	import { Node, NodeArrayProperty } from 'svedit';
+	import { TW_LIMITER, TW_PAGE_PADDING_X, TW_BLOCK_PADDING_Y } from '../tailwind_theme.js';
+
+	const svedit = getContext('svedit');
+	let { path } = $props();
+
+	function add_row() {
+		const session = svedit.session;
+		const items_path = [...path, 'items'];
+		const current_items = session.get(items_path) ?? [];
+		const new_item_id = session.config.generate_id();
+		const tr = session.tr;
+
+		tr.create({
+			id: new_item_id,
+			type: 'highlight_item',
+			label: { text: '', annotations: [] },
+			value: { text: '', annotations: [] }
+		});
+
+		tr.set(items_path, [...current_items, new_item_id]);
+		tr.set_selection({
+			type: 'node',
+			path: items_path,
+			anchor_offset: current_items.length,
+			focus_offset: current_items.length + 1
+		});
+		session.apply(tr);
+	}
+</script>
+
+<Node class="ew-highlights bg-(--background) text-(--foreground)" {path}>
+	<div class={TW_LIMITER}>
+		<div class={TW_BLOCK_PADDING_Y}>
+			<div class={TW_PAGE_PADDING_X}>
+				<NodeArrayProperty
+					tag="ul"
+					class="highlights-list flex flex-wrap justify-between gap-x-8 gap-y-3 [--row:1] list-none"
+					path={[...path, 'items']}
+				/>
+				{#if svedit.editable}
+					<button
+						class="mt-4 border border-(--foreground) px-3 py-2 text-xs uppercase tracking-[0.2em] text-(--foreground) transition-colors duration-150 hover:bg-(--foreground) hover:text-(--background)"
+						type="button"
+						onclick={add_row}
+					>
+						Add row
+					</button>
+				{/if}
+			</div>
+		</div>
+	</div>
+</Node>
diff --git a/src/routes/components/ImageHero.svelte b/src/routes/components/ImageHero.svelte
new file mode 100644
index 00000000..ff4b85ff
--- /dev/null
+++ b/src/routes/components/ImageHero.svelte
@@ -0,0 +1,184 @@
+<script>
+	import { getContext } from 'svelte';
+	import { Node, CustomProperty, NodeArrayProperty, AnnotatedTextProperty } from 'svedit';
+	import Image from './Image.svelte';
+
+	const svedit = getContext('svedit');
+
+	let { path } = $props();
+	let node = $derived(svedit.session.get(path));
+	let bg_node = $derived(svedit.session.get([...path, 'background']));
+	let has_buttons = $derived(node.buttons?.length > 0);
+	let layout = $derived(node.layout || 1);
+	let colorset_class = $derived(node.colorset ? `ew-colorset-${node.colorset}` : '');
+
+	// Determine if the background image CustomProperty is selected
+	// This drives the checkerboard pattern when no image is loaded
+	let is_bg_selected = $derived(is_background_selected());
+
+	function is_background_selected() {
+		const path_of_selection = svedit?.session?.selection?.path?.join('.');
+		const bg_path = [...path, 'background'].join('.');
+		return path_of_selection === bg_path;
+	}
+</script>
+
+{#snippet background_image()}
+	<!-- CustomProperty wrapping the image makes paste go through handle_media_paste's
+             "property" branch, so pasting an image updates only the background src —
+             it does not replace the whole hero block. -->
+	<CustomProperty path={[...path, 'background']} class="image-hero-bg-property">
+		<div
+			contenteditable="false"
+			class="absolute inset-0 overflow-hidden select-none"
+			class:ew-bg-checkerboard={is_bg_selected || !bg_node.src}
+		>
+			<Image path={[...path, 'background']} />
+		</div>
+	</CustomProperty>
+{/snippet}
+
+{#snippet overlay()}
+	<!-- Semi-transparent gradient overlay for text legibility -->
+	<div class="image-hero-gradient pointer-events-none absolute inset-0" aria-hidden="true"></div>
+{/snippet}
+
+{#snippet scroll_down()}
+	<div class="absolute bottom-8 left-1/2 z-10 -translate-x-1/2 animate-bounce">
+		<svg
+			class="size-8 text-white drop-shadow-md"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7-7-7"
+			></path>
+		</svg>
+	</div>
+{/snippet}
+
+<!-- Layout 1: centered text -->
+{#snippet layout_1()}
+	<div class="relative flex min-h-[90vh] items-center justify-center">
+		{@render background_image()}
+		{@render overlay()}
+		<div
+			class="relative z-10 mx-auto w-full max-w-4xl px-5 py-24 text-center sm:px-7 md:px-10 lg:px-14"
+		>
+			<AnnotatedTextProperty
+				tag="h1"
+				class="ew-h1 font-sans text-4xl text-balance text-white drop-shadow-lg md:text-5xl lg:text-6xl"
+				path={[...path, 'title']}
+				placeholder={svedit.editable ? 'Your hero headline goes here' : undefined}
+			/>
+			<AnnotatedTextProperty
+				tag="p"
+				class="mt-6 text-lg text-balance text-white/90 drop-shadow md:text-xl"
+				path={[...path, 'description']}
+				placeholder={svedit.editable ? 'A compelling subtitle that draws visitors in.' : undefined}
+			/>
+			<NodeArrayProperty
+				class="hero-buttons flex flex-wrap items-center justify-center gap-4 [--row:1] mt-10{!has_buttons
+					? ' empty'
+					: ''}"
+				path={[...path, 'buttons']}
+			/>
+		</div>
+	</div>
+{/snippet}
+
+<!-- Layout 2: left-aligned text -->
+{#snippet layout_2()}
+	<div class="relative flex min-h-[90vh] items-center">
+		{@render background_image()}
+		{@render overlay()}
+		<div class="relative z-10 w-full max-w-3xl px-5 py-24 sm:px-7 md:px-10 lg:px-14">
+			<AnnotatedTextProperty
+				tag="h1"
+				class="ew-h1 font-sans text-4xl text-balance text-white drop-shadow-lg md:text-5xl lg:text-6xl"
+				path={[...path, 'title']}
+				placeholder={svedit.editable ? 'Your hero headline goes here' : undefined}
+			/>
+			<AnnotatedTextProperty
+				tag="p"
+				class="mt-6 text-lg text-balance text-white/90 drop-shadow md:text-xl"
+				path={[...path, 'description']}
+				placeholder={svedit.editable ? 'A compelling subtitle that draws visitors in.' : undefined}
+			/>
+			<NodeArrayProperty
+				class="hero-buttons flex flex-wrap items-center gap-4 [--row:1] mt-10{!has_buttons
+					? ' empty'
+					: ''}"
+				path={[...path, 'buttons']}
+			/>
+		</div>
+	</div>
+{/snippet}
+
+<!-- Layout 3: centered text, no overlay -->
+{#snippet layout_3()}
+	<div class="relative flex min-h-[90vh] items-center justify-center">
+		{@render background_image()}
+		<div
+			class="relative z-10 mx-auto w-full max-w-4xl px-5 py-24 text-center sm:px-7 md:px-10 lg:px-14"
+		>
+			<AnnotatedTextProperty
+				tag="h1"
+				class="ew-h1 font-sans text-4xl text-balance text-white drop-shadow-lg md:text-5xl lg:text-6xl"
+				path={[...path, 'title']}
+				placeholder={svedit.editable ? 'Your hero headline goes here' : undefined}
+			/>
+			<AnnotatedTextProperty
+				tag="p"
+				class="mt-6 text-lg text-balance text-white/90 drop-shadow md:text-xl"
+				path={[...path, 'description']}
+				placeholder={svedit.editable ? 'A compelling subtitle that draws visitors in.' : undefined}
+			/>
+			<NodeArrayProperty
+				class="hero-buttons flex flex-wrap items-center justify-center gap-4 [--row:1] mt-10{!has_buttons
+					? ' empty'
+					: ''}"
+				path={[...path, 'buttons']}
+			/>
+		</div>
+		{@render scroll_down()}
+	</div>
+{/snippet}
+
+<Node class="ew-image-hero {colorset_class}" {path}>
+	{@const layouts = [layout_1, layout_2, layout_3]}
+	{@render layouts[layout - 1]()}
+</Node>
+
+<style>
+	:global(.ew-image-hero) {
+		position: relative;
+		overflow: hidden;
+	}
+
+	:global(.ew-image-hero .image-hero-bg-property) {
+		position: absolute !important;
+		inset: 0;
+		z-index: 0;
+	}
+
+	.image-hero-gradient {
+		background: linear-gradient(
+			to bottom,
+			rgba(0, 0, 0, 0.15) 0%,
+			rgba(0, 0, 0, 0.45) 60%,
+			rgba(0, 0, 0, 0.65) 100%
+		);
+		z-index: 1;
+	}
+
+	/* When buttons array is empty, prevent the empty node placeholder from taking up vertical space */
+	:global(.ew-image-hero .hero-buttons.empty .node.empty-node-array) {
+		position: absolute !important;
+	}
+
+	:global(.ew-image-hero h1) {
+		--highlight-thickness: 6px;
+	}
+</style>
diff --git a/src/routes/components/Link.svelte b/src/routes/components/Link.svelte
index ef34d1c6..4b846b5d 100644
--- a/src/routes/components/Link.svelte
+++ b/src/routes/components/Link.svelte
@@ -10,6 +10,6 @@
 	data-node-id={node.id}
 	href={node?.href}
 	target={node?.target || '_self'}
-	class="underline decoration-2 decoration-(--accent) underline-offset-2"
+	class="underline decoration-(--accent) decoration-2 underline-offset-2"
 	style="anchor-name: --{path.join('-')};">{content}</a
 >
diff --git a/src/routes/components/LinkCollection.svelte b/src/routes/components/LinkCollection.svelte
index debe4db7..ee3338c1 100644
--- a/src/routes/components/LinkCollection.svelte
+++ b/src/routes/components/LinkCollection.svelte
@@ -18,16 +18,26 @@
 </script>
 
 {#snippet intro()}
-	{@const intro_padding = has_intro ? 'pt-10 sm:pt-14 md:pt-16 lg:pt-20 pb-2 sm:pb-3 md:pb-5 lg:pb-7' : 'pt-10 sm:pt-14 md:pt-16 lg:pt-20'}
+	{@const intro_padding = has_intro
+		? 'pt-10 sm:pt-14 md:pt-16 lg:pt-20 pb-2 sm:pb-3 md:pb-5 lg:pb-7'
+		: 'pt-10 sm:pt-14 md:pt-16 lg:pt-20'}
 	<div class="{TW_PAGE_PADDING_X} max-w-4xl lg:text-lg {intro_padding}">
-		<NodeArrayProperty class="ew-intro flex flex-col gap-5 md:gap-8 {heading_spacing}" path={[...path, 'intro']} />
+		<NodeArrayProperty
+			class="ew-intro flex flex-col gap-5 md:gap-8 {heading_spacing}"
+			path={[...path, 'intro']}
+		/>
 	</div>
 {/snippet}
 
 {#snippet outro()}
-	{@const outro_padding = has_outro ? 'pt-2 sm:pt-3 md:pt-4 lg:pt-6 pb-20 sm:pb-24 md:pb-28 lg:pb-32' : 'pb-20 sm:pb-24 md:pb-28 lg:pb-32'}
+	{@const outro_padding = has_outro
+		? 'pt-2 sm:pt-3 md:pt-4 lg:pt-6 pb-20 sm:pb-24 md:pb-28 lg:pb-32'
+		: 'pb-20 sm:pb-24 md:pb-28 lg:pb-32'}
 	<div class="{TW_PAGE_PADDING_X} max-w-4xl lg:text-lg {outro_padding}">
-		<NodeArrayProperty class="ew-intro flex flex-col gap-5 md:gap-8 {heading_spacing}" path={[...path, 'outro']} />
+		<NodeArrayProperty
+			class="ew-intro flex flex-col gap-5 md:gap-8 {heading_spacing}"
+			path={[...path, 'outro']}
+		/>
 	</div>
 {/snippet}
 
@@ -38,7 +48,7 @@
 				{@render intro()}
 				<div class="{TW_PAGE_PADDING_X} py-8 sm:py-10 md:py-12 lg:py-14">
 					<NodeArrayProperty
-						class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-16 md:gap-10 lg:gap-14 [--row:1]"
+						class="grid grid-cols-1 gap-16 [--row:1] md:grid-cols-2 md:gap-10 lg:gap-14 xl:grid-cols-3"
 						path={[...path, 'link_collection_items']}
 					/>
 				</div>
@@ -48,7 +58,6 @@
 	</div>
 </Node>
 
-
 <style>
 	/* HACK: When intro or outro is empty, prevent the empty node placeholder from taking up vertical space */
 	:global(.ew-intro .node.empty-node-array, .ew-outro .node.empty-node-array) {
diff --git a/src/routes/components/LinkCollectionItem.svelte b/src/routes/components/LinkCollectionItem.svelte
index 6b312d70..00feb994 100644
--- a/src/routes/components/LinkCollectionItem.svelte
+++ b/src/routes/components/LinkCollectionItem.svelte
@@ -23,9 +23,23 @@
 			<MediaProperty path={[...path, 'media']} sizing="fill" fallback_aspect_ratio="4 / 3" />
 		</div>
 		<div class="pt-4">
-			<AnnotatedTextProperty class="text-xs md:text-sm uppercase tracking-widest text-(--foreground) opacity-60 mb-2" path={[...path, 'preline']} placeholder="Preline" />
-			<AnnotatedTextProperty class="{!svedit.editable ? 'title-underline' : ''} font-serif text-(--foreground) text-2xl lg:text-3xl text-balance pt-1" path={[...path, 'title']} placeholder="Title" />
-			<AnnotatedTextProperty class="text-balance pt-2" path={[...path, 'description']} placeholder="Description" />
+			<AnnotatedTextProperty
+				class="mb-2 text-xs tracking-widest text-(--foreground) uppercase opacity-60 md:text-sm"
+				path={[...path, 'preline']}
+				placeholder={svedit.editable ? 'Preline' : undefined}
+			/>
+			<AnnotatedTextProperty
+				class="{!svedit.editable
+					? 'title-underline'
+					: ''} pt-1 font-sans text-2xl text-balance text-(--foreground) lg:text-3xl"
+				path={[...path, 'title']}
+				placeholder={svedit.editable ? 'Title' : undefined}
+			/>
+			<AnnotatedTextProperty
+				class="pt-2 text-balance"
+				path={[...path, 'description']}
+				placeholder={svedit.editable ? 'Description' : undefined}
+			/>
 		</div>
 	</svelte:element>
 </Node>
@@ -35,7 +49,9 @@
 		display: inline;
 		background: linear-gradient(to left, var(--accent), var(--accent));
 		background-size: 0 2px;
-		background-position: 0 100%, 100% 100%;
+		background-position:
+			0 100%,
+			100% 100%;
 		background-repeat: no-repeat;
 		transition: background-size cubic-bezier(0.8, 0, 0.2, 1) 0.4s;
 	}
diff --git a/src/routes/components/LinkPreview.svelte b/src/routes/components/LinkPreview.svelte
index 08bd7f3c..2f235a64 100644
--- a/src/routes/components/LinkPreview.svelte
+++ b/src/routes/components/LinkPreview.svelte
@@ -26,29 +26,33 @@
 </script>
 
 <div
-	class="link-preview absolute z-30 mt-1 pointer-events-auto"
-	style="position-anchor: --{path.join('-')}; position-area: block-end span-all; justify-self: anchor-center;"
+	class="link-preview pointer-events-auto absolute z-30 mt-1"
+	style="position-anchor: --{path.join(
+		'-'
+	)}; position-area: block-end span-all; justify-self: anchor-center;"
 >
 	{#if node.href}
-		<div class="flex items-center gap-3 bg-white border-1 border-(--svedit-editing-stroke) px-3 py-2">
+		<div
+			class="flex items-center gap-3 border-1 border-(--svedit-editing-stroke) bg-white px-3 py-2"
+		>
 			<a
 				href={node.href}
 				target="_blank"
 				rel="noopener noreferrer"
-				class="text-sm text-gray-700 max-w-70 truncate hover:underline"
+				class="max-w-70 truncate text-sm text-gray-700 hover:underline"
 			>
 				{node.href}
 			</a>
 			<button
 				type="button"
-				class="text-sm text-(--svedit-editing-stroke) cursor-pointer shrink-0 hover:opacity-80"
+				class="shrink-0 cursor-pointer text-sm text-(--svedit-editing-stroke) hover:opacity-80"
 				onclick={handle_edit}
 			>
 				EDIT
 			</button>
 			<button
 				type="button"
-				class="text-sm text-(--svedit-editing-stroke) cursor-pointer shrink-0 hover:opacity-80"
+				class="shrink-0 cursor-pointer text-sm text-(--svedit-editing-stroke) hover:opacity-80"
 				onclick={handle_remove}
 			>
 				REMOVE
@@ -57,7 +61,7 @@
 	{:else}
 		<button
 			type="button"
-			class="bg-white border-1 border-(--svedit-editing-stroke) text-(--svedit-editing-stroke) text-sm px-12 py-2 cursor-pointer hover:bg-gray-50"
+			class="cursor-pointer border-1 border-(--svedit-editing-stroke) bg-white px-12 py-2 text-sm text-(--svedit-editing-stroke) hover:bg-gray-50"
 			onclick={handle_edit}
 		>
 			CREATE LINK
diff --git a/src/routes/components/MediaControls.svelte b/src/routes/components/MediaControls.svelte
index fb9545d8..62a891da 100644
--- a/src/routes/components/MediaControls.svelte
+++ b/src/routes/components/MediaControls.svelte
@@ -111,7 +111,10 @@
 		const zoomFactor = e.deltaY < 0 ? 1.01 : 0.99;
 
 		const tr = svedit.session.tr;
-		tr.set([...path, 'scale'], Math.min(Math.max(media_node.scale * zoomFactor, MIN_SCALE), MAX_SCALE));
+		tr.set(
+			[...path, 'scale'],
+			Math.min(Math.max(media_node.scale * zoomFactor, MIN_SCALE), MAX_SCALE)
+		);
 		svedit.session.apply(tr, { batch: true });
 	}
 </script>
@@ -192,4 +195,4 @@
 		background: var(--svedit-editing-stroke);
 		transform: translate(-50%, -50%);
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/components/Nav.svelte b/src/routes/components/Nav.svelte
index 8dae1696..20b202ba 100644
--- a/src/routes/components/Nav.svelte
+++ b/src/routes/components/Nav.svelte
@@ -1,9 +1,8 @@
 <script>
 	import { getContext } from 'svelte';
-	import { NodeArrayProperty, Node } from 'svedit';
+	import { NodeArrayProperty, Node, AnnotatedTextProperty } from 'svedit';
 	import { slide } from 'svelte/transition';
 	import { TW_LIMITER, TW_PAGE_PADDING_X } from '../tailwind_theme.js';
-	import MediaProperty from './MediaProperty.svelte';
 
 	let { path } = $props();
 
@@ -35,76 +34,115 @@
 </script>
 
 <Node {path}>
-	<div class="{TW_LIMITER}">
+	<div class={TW_LIMITER}>
 		<div class="flex items-stretch lg:text-lg">
 			<!-- Logo -->
-			<div class="flex items-center flex-1 {TW_PAGE_PADDING_X} py-3">
-				<svelte:element
+			<div class="flex flex-1 items-center {TW_PAGE_PADDING_X} py-7">
+				<!-- <svelte:element
 					this={svedit.editable ? 'div' : 'a'}
 					href={svedit.editable ? undefined : '/'}
 				>
 					<MediaProperty class="h-10" path={[...path, 'logo']} sizing="fit" fallback_aspect_ratio="1 / 1" />
-				</svelte:element>
+				</svelte:element> -->
+				<AnnotatedTextProperty
+					tag="h2"
+					class="text-2xl font-semibold tracking-tight"
+					path={[...path, 'company_name']}
+					placeholder={svedit.editable ? 'Company name' : undefined}
+				/>
 			</div>
 
 			<!-- Desktop menu (hidden on mobile) -->
-			<NodeArrayProperty class="nav-items hidden md:flex items-stretch gap-x-2 sm:gap-x-4 py-3 {TW_PAGE_PADDING_X}" path={[...path, 'nav_items']} />
+			<NodeArrayProperty
+				class="nav-items hidden items-stretch gap-x-2 py-5 py-7 sm:gap-x-4 md:flex {TW_PAGE_PADDING_X}"
+				path={[...path, 'nav_items']}
+			/>
 
 			<!-- Hamburger button (visible on mobile only) -->
 			<button
-				class="cursor-pointer flex md:hidden items-center justify-center {TW_PAGE_PADDING_X} py-3"
+				class="flex cursor-pointer items-center justify-center md:hidden {TW_PAGE_PADDING_X} py-3"
 				onclick={toggle_mobile_menu}
 				aria-label="Toggle menu"
 				aria-expanded={mobile_menu_open}
 			>
 				{#if mobile_menu_open}
 					<!-- Close icon -->
-					<svg class="w-6 h-6 stroke-(--foreground)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
+					<svg
+						class="h-6 w-6 stroke-(--foreground)"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="square"
+							stroke-linejoin="miter"
+							stroke-width="1.5"
+							d="M6 18L18 6M6 6l12 12"
+						/>
 					</svg>
 				{:else}
 					<!-- Hamburger icon (2 lines) -->
-					<svg class="w-6 h-6 stroke-(--foreground)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.5" d="M4 8h16M4 16h16" />
+					<svg
+						class="h-6 w-6 stroke-(--foreground)"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="square"
+							stroke-linejoin="miter"
+							stroke-width="1.5"
+							d="M4 8h16M4 16h16"
+						/>
 					</svg>
 				{/if}
 			</button>
 		</div>
 
-	<!-- Mobile menu overlay (read-only, visible when open, hidden on desktop) -->
-	{#if mobile_menu_open}
-		<div
-			class="md:hidden fixed inset-0 bg-(--background)/80 backdrop-blur-sm z-50"
-			contenteditable="false"
-			transition:slide={{ duration: 200 }}
-		>
-			<!-- Close button in top right -->
-			<button
-				class="cursor-pointer absolute top-4 right-4 p-2"
-				onclick={close_mobile_menu}
-				aria-label="Close menu"
+		<!-- Mobile menu overlay (read-only, visible when open, hidden on desktop) -->
+		{#if mobile_menu_open}
+			<div
+				class="fixed inset-0 z-50 bg-(--background)/80 backdrop-blur-sm md:hidden"
+				contenteditable="false"
+				transition:slide={{ duration: 200 }}
 			>
-				<svg class="w-6 h-6 stroke-(--foreground)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
-				</svg>
-			</button>
-
-			<!-- Menu items -->
-			<nav class="flex flex-col pt-16 pb-5 px-3">
-				{#each nav_items as _node_id, index (index)}
-					{@const item = svedit.session.get([...path, 'nav_items', index])}
-					<a
-						href={item.href || '#'}
-						target={item.target}
-						class="text-3xl font-serif text-(--foreground) py-2 px-3 sm:px-5"
-						onclick={close_mobile_menu}
+				<!-- Close button in top right -->
+				<button
+					class="absolute top-4 right-4 cursor-pointer p-2"
+					onclick={close_mobile_menu}
+					aria-label="Close menu"
+				>
+					<svg
+						class="h-6 w-6 stroke-(--foreground)"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
 					>
-						{item.label?.text || ''}
-					</a>
-				{/each}
-			</nav>
-		</div>
-	{/if}
+						<path
+							stroke-linecap="square"
+							stroke-linejoin="miter"
+							stroke-width="1.5"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+
+				<!-- Menu items -->
+				<nav class="flex flex-col px-3 pt-16 pb-5">
+					{#each nav_items as _node_id, index (index)}
+						{@const item = svedit.session.get([...path, 'nav_items', index])}
+						<a
+							href={item.href || '#'}
+							target={item.target}
+							class="px-3 py-2 font-sans text-3xl text-(--foreground) sm:px-5"
+							onclick={close_mobile_menu}
+						>
+							{item.label?.text || ''}
+						</a>
+					{/each}
+				</nav>
+			</div>
+		{/if}
 	</div>
 </Node>
 
diff --git a/src/routes/components/NavItem.svelte b/src/routes/components/NavItem.svelte
index baf814af..70817386 100644
--- a/src/routes/components/NavItem.svelte
+++ b/src/routes/components/NavItem.svelte
@@ -14,12 +14,9 @@
 		this={render_as_link ? 'a' : 'div'}
 		href={render_as_link ? node.href : undefined}
 		target={render_as_link ? node.target : undefined}
-		class="nav-item-link flex items-center justify-center w-full mx-3 sm:mx-4"
+		class="nav-item-link mx-3 flex w-full items-center justify-center sm:mx-4"
 	>
-		<AnnotatedTextProperty
-			path={[...path, 'label']}
-			placeholder="Label"
-		/>
+		<AnnotatedTextProperty path={[...path, 'label']} placeholder={svedit.editable ? 'Label' : undefined} />
 	</svelte:element>
 {/snippet}
 
@@ -28,14 +25,10 @@
 		this={render_as_link ? 'a' : 'div'}
 		href={render_as_link ? node.href : undefined}
 		target={render_as_link ? node.target : undefined}
-		class="font-medium ml-3 sm:ml-4 flex items-center justify-center w-full h-full bg-(--accent) text-(--accent-foreground) rounded-(--button-border-radius)"
+		class="ml-3 flex h-full w-full items-center justify-center rounded-(--button-border-radius) bg-(--accent) font-medium text-(--accent-foreground) sm:ml-4"
 		class:hover:opacity-80={render_as_link}
 	>
-		<AnnotatedTextProperty
-			class="px-3 sm:px-4"
-			path={[...path, 'label']}
-			placeholder="Label"
-		/>
+		<AnnotatedTextProperty class="px-3 sm:px-4" path={[...path, 'label']} placeholder={svedit.editable ? 'Label' : undefined} />
 	</svelte:element>
 {/snippet}
 
@@ -51,7 +44,9 @@
 	.nav-item-link {
 		background: linear-gradient(to left, var(--accent), var(--accent));
 		background-size: 0 2px;
-		background-position: 0 100%, 100% 100%;
+		background-position:
+			0 100%,
+			100% 100%;
 		background-repeat: no-repeat;
 		transition: background-size cubic-bezier(0.8, 0, 0.2, 1) 0.4s;
 	}
diff --git a/src/routes/components/Overlays.svelte b/src/routes/components/Overlays.svelte
index 7a111510..3007e2cc 100644
--- a/src/routes/components/Overlays.svelte
+++ b/src/routes/components/Overlays.svelte
@@ -22,7 +22,9 @@
 			? svedit.session.get(svedit.session.selection.path)
 			: null
 	);
-	let is_media_selected = $derived(selected_property?.type === 'image' || selected_property?.type === 'video');
+	let is_media_selected = $derived(
+		selected_property?.type === 'image' || selected_property?.type === 'video'
+	);
 	let link_preview = $derived(get_link_preview());
 
 	function get_link_preview() {
@@ -100,8 +102,9 @@
 	{/if}
 </div>
 
-<style>
+<svelte:document onmousemove={handle_mousemove} onmouseup={() => (is_dragging = false)} />
 
+<style>
 	.media-controls-overlay {
 		position: absolute;
 		top: anchor(top);
@@ -111,5 +114,3 @@
 		pointer-events: auto;
 	}
 </style>
-
-<svelte:document onmousemove={handle_mousemove} onmouseup={() => is_dragging = false} />
diff --git a/src/routes/components/Page.svelte b/src/routes/components/Page.svelte
index b407c078..be5cb05d 100644
--- a/src/routes/components/Page.svelte
+++ b/src/routes/components/Page.svelte
@@ -1,43 +1,49 @@
 <script>
-  import { getContext } from 'svelte';
-  import { Node, NodeArrayProperty } from 'svedit';
-  import Nav from './Nav.svelte';
-  import Footer from './Footer.svelte';
+	import { getContext } from 'svelte';
+	import { Node, NodeArrayProperty } from 'svedit';
+	import Nav from './Nav.svelte';
+	import Footer from './Footer.svelte';
 
-  const svedit = getContext('svedit');
-  let { path } = $props();
-  let node = $derived(svedit.session.get(path));
-  let first_body_node_id = $derived(node.body?.[0]);
-  let first_body_node = $derived(first_body_node_id ? svedit.session.get([first_body_node_id]) : null);
-  let nav_colorset_class = $derived(first_body_node?.colorset ? `ew-colorset-${first_body_node.colorset}` : '');
+	const svedit = getContext('svedit');
+	let { path } = $props();
+	let node = $derived(svedit.session.get(path));
+	let first_body_node_id = $derived(node.body?.[0]);
+	let first_body_node = $derived(
+		first_body_node_id ? svedit.session.get([first_body_node_id]) : null
+	);
+	let nav_colorset_class = $derived(
+		first_body_node?.colorset ? `ew-colorset-${first_body_node.colorset}` : ''
+	);
 
-  let last_body_node_id = $derived(node.body?.[node.body.length - 1]);
-  let last_body_node = $derived(last_body_node_id ? svedit.session.get([last_body_node_id]) : null);
-  let footer_colorset_class = $derived(last_body_node?.colorset ? `ew-colorset-${last_body_node.colorset}` : '');
+	let last_body_node_id = $derived(node.body?.[node.body.length - 1]);
+	let last_body_node = $derived(last_body_node_id ? svedit.session.get([last_body_node_id]) : null);
+	let footer_colorset_class = $derived(
+		last_body_node?.colorset ? `ew-colorset-${last_body_node.colorset}` : ''
+	);
 </script>
 
 <Node {path}>
-  <div class="page min-h-screen flex flex-col">
-  	<div class="bg-(--background) text-(--foreground) {nav_colorset_class}">
-  		<Nav path={[...path, 'nav']}/>
-  	</div>
-   	<div class="grow" style="anchor-name: --page-body; --node-caret-boundary: --page-body;">
-    	<NodeArrayProperty class="body-node-array" path={[...path, 'body']} />
-    </div>
-    <div class="bg-(--background) text-(--foreground) {footer_colorset_class}">
-    	<Footer path={[...path, 'footer']}/>
-    </div>
-  </div>
+	<div class="page flex min-h-screen flex-col">
+		<div class="bg-(--background) text-(--foreground) {nav_colorset_class}">
+			<Nav path={[...path, 'nav']} />
+		</div>
+		<div class="grow" style="anchor-name: --page-body; --node-caret-boundary: --page-body;">
+			<NodeArrayProperty class="body-node-array" path={[...path, 'body']} />
+		</div>
+		<div class="bg-(--background) text-(--foreground) {footer_colorset_class}">
+			<Footer path={[...path, 'footer']} />
+		</div>
+	</div>
 </Node>
 
 <style>
 	.page {
 		--row: 0;
 	}
-  :global {
-    .body-node-array {
-      display: grid;
-      grid-template-columns: 1fr;
-    }
-  }
+	:global {
+		.body-node-array {
+			display: grid;
+			grid-template-columns: 1fr;
+		}
+	}
 </style>
diff --git a/src/routes/components/PageEditor.svelte b/src/routes/components/PageEditor.svelte
new file mode 100644
index 00000000..b9218083
--- /dev/null
+++ b/src/routes/components/PageEditor.svelte
@@ -0,0 +1,269 @@
+<script>
+	import { setContext } from 'svelte';
+	import { page } from '$app/stores';
+	import { Svedit, KeyMapper, Command, define_keymap } from 'svedit';
+	import Toolbar from './Toolbar.svelte';
+	import { create_session } from '../create_session.js';
+	import { demo_doc } from '$lib/demo_doc.js';
+	import SaveProgressModal from './SaveProgressModal.svelte';
+
+	let { data } = $props();
+	// svelte-ignore state_referenced_locally
+	const has_backend = data.has_backend;
+
+	let app_el = $state();
+	let svedit_ref = $state();
+	let editable = $state(false);
+
+	// Save progress modal state
+	let save_progress_visible = $state(false);
+	let save_progress_message = $state('');
+	let save_progress_done = $state(false);
+
+	$effect(() => {
+		document.documentElement.style.scrollBehavior = editable ? 'auto' : 'smooth';
+	});
+
+	function focus_canvas() {
+		if (svedit_ref) {
+			svedit_ref.focus_canvas();
+		}
+	}
+
+	function check_browser_support() {
+		const ua = navigator.userAgent;
+		let browser = null;
+		let version = 0;
+
+		if (ua.includes('Chrome/')) {
+			browser = 'Chrome';
+			version = parseInt(ua.match(/Chrome\/(\d+)/)?.[1] || '0');
+		} else if (ua.includes('Firefox/')) {
+			browser = 'Firefox';
+			version = parseInt(ua.match(/Firefox\/(\d+)/)?.[1] || '0');
+		} else if (ua.includes('Safari/') && !ua.includes('Chrome')) {
+			browser = 'Safari';
+			version = parseInt(ua.match(/Version\/(\d+)/)?.[1] || '0');
+		}
+
+		const min_versions = { Chrome: 142, Firefox: 147, Safari: 26 };
+
+		if (browser && min_versions[browser] && version < min_versions[browser]) {
+			return { supported: false, browser, version, required: min_versions[browser] };
+		}
+
+		return { supported: true };
+	}
+
+	class EditCommand extends Command {
+		is_enabled() {
+			// Disabled if edit mode is already on
+			return !this.context.editable;
+		}
+
+		execute() {
+			const browser_check = check_browser_support();
+			if (!browser_check.supported) {
+				alert(
+					`Your browser (${browser_check.browser} ${browser_check.version}) may not fully support the editor. For the best experience, please upgrade to ${browser_check.browser} ${browser_check.required} or newer.`
+				);
+			}
+			this.context.editable = true;
+		}
+	}
+
+	class SaveCommand extends Command {
+		is_enabled() {
+			// Saving is only possible while edit mode is on
+			return this.context.editable;
+		}
+
+		async execute() {
+			if (!has_backend) {
+				// Vercel demo mode — no persistence
+				console.log('Document saved', session.to_json());
+				session.selection = null;
+				this.context.editable = false;
+				return;
+			}
+
+			// Node backend — full save with asset upload
+			const save_start = Date.now();
+
+			// Dynamically import backend-dependent modules
+			const [
+				// @ts-ignore — TypeScript can't infer exports through command() wrapper
+				{ save_document: persist_document },
+				{
+					collect_blob_urls,
+					wait_for_processing,
+					has_pending_processing,
+					ensure_processing,
+					upload_pending,
+					replace_blob_urls,
+					cleanup_pending
+				}
+			] = await Promise.all([import('$lib/api.remote.js'), import('$lib/client/asset_upload.js')]);
+
+			// Start progress tracking (modal appears after 1s delay)
+			save_progress_visible = true;
+			save_progress_done = false;
+			save_progress_message = 'Saving…';
+
+			try {
+				let mapping = null;
+
+				// 1. Upload assets (before serializing the document)
+				const pre_check = session.to_json();
+				const blob_urls = collect_blob_urls(pre_check.nodes);
+
+				if (blob_urls.length > 0) {
+					const total = blob_urls.length;
+
+					// Re-start processing for any blob URLs missing from the pending map
+					// (e.g. after undo brought back blob URLs cleaned up by a previous save)
+					await ensure_processing(blob_urls);
+
+					// Wait for any images still being processed in the background
+					if (has_pending_processing()) {
+						save_progress_message =
+							total === 1 ? 'Processing image…' : `Processing ${total} images…`;
+						await wait_for_processing(({ done, total: t }) => {
+							if (t > 1) {
+								save_progress_message = `Processing image ${done + 1}/${t}…`;
+							}
+						});
+					}
+
+					// Upload pending assets referenced in the document
+					mapping = await upload_pending(blob_urls, ({ phase, index, total: t }) => {
+						if (phase === 'uploading') {
+							save_progress_message = `Uploading image ${index}/${t}…`;
+						}
+					});
+				}
+
+				// 2. Replace blob URLs on the doc_json copy and save
+				save_progress_message = 'Saving…';
+				const doc_json = session.to_json();
+				if (mapping) {
+					replace_blob_urls(doc_json.nodes, mapping);
+				}
+
+				await persist_document(doc_json);
+
+				// 3. Save succeeded — now update the live session and clean up
+				if (mapping) {
+					const tr = session.tr;
+					for (const [blob_url, entry] of mapping.entries()) {
+						for (const node of Object.values(pre_check.nodes)) {
+							if (node.type === 'image' && node.src === blob_url) {
+								tr.set([node.id, 'src'], entry.asset_id);
+								tr.set([node.id, 'width'], entry.width);
+								tr.set([node.id, 'height'], entry.height);
+							}
+						}
+					}
+					session.apply(tr);
+					cleanup_pending(mapping);
+				}
+
+				console.log('Document saved');
+				session.selection = null;
+				this.context.editable = false;
+
+				// Flash success message only if save took more than 3s
+				if (Date.now() - save_start > 3000) {
+					save_progress_message = 'Successfully saved';
+					save_progress_done = true;
+					await new Promise((resolve) => setTimeout(resolve, 1500));
+				}
+				save_progress_visible = false;
+			} catch (err) {
+				console.error('Save failed:', err);
+				save_progress_visible = false;
+				alert('Save failed. Your changes have not been lost — please try again.');
+			}
+		}
+	}
+
+	// Create KeyMapper and provide via context (must happen synchronously before any await)
+	const key_mapper = new KeyMapper();
+	setContext('key_mapper', key_mapper);
+
+	const app_command_context = {
+		get editable() {
+			return editable;
+		},
+		set editable(value) {
+			editable = value;
+		},
+		get session() {
+			return session;
+		},
+		get app_el() {
+			return app_el;
+		}
+	};
+
+	const app_commands = {
+		edit_document: new EditCommand(app_command_context),
+		save_document: new SaveCommand(app_command_context)
+	};
+
+	// Push app-level keymap scope
+	const app_key_map = define_keymap({
+		'meta+e,ctrl+e': [app_commands.edit_document],
+		'meta+s,ctrl+s': [app_commands.save_document]
+	});
+	key_mapper.push_scope(app_key_map);
+
+	let session = $derived(create_session(data.doc || demo_doc));
+</script>
+
+<svelte:window onkeydown={key_mapper.handle_keydown.bind(key_mapper)} />
+
+<svelte:head>
+	<title>{data.title || 'Editable Website'}</title>
+</svelte:head>
+
+<!--
+	BUG: When navigating from / with preloading on the Svedit component ends up
+	with a stale session, breaking editing.
+	See https://github.com/michael/editable-website/issues/40
+-->
+
+<!-- Workaround for #40: Note that page.url.pathname from $app/state does not work -->
+{#key $page.url.pathname}
+	<div class="demo-wrapper antialiased" bind:this={app_el}>
+		<Toolbar {session} {app_commands} {editable} {focus_canvas} />
+		<Svedit {session} bind:editable bind:this={svedit_ref} path={[session.doc.document_id]} />
+		{#if has_backend}
+			<SaveProgressModal
+				visible={save_progress_visible}
+				message={save_progress_message}
+				done={save_progress_done}
+			/>
+		{/if}
+
+		<!-- {#if editable}
+			<div class="flex-column mx-auto my-10 w-full max-w-5xl gap-y-2">
+				<p>Selection:</p>
+				<pre tabindex="-1" class="debug-info p-4">{JSON.stringify(session.selection || {}, null, '  ')}</pre>
+				<p>Nodes:</p>
+				<pre tabindex="-1" class="debug-info p-4">{JSON.stringify(session.to_json(), null, '  ')}</pre>
+			</div>
+		{/if} -->
+	</div>
+{/key}
+
+<style>
+	/*.debug-info {
+		text-wrap: wrap;
+		height: 12lh;
+		overflow-y: auto;
+		color: white;
+		background: var(--primary-fill-color);
+		font-size: 12px;
+	}*/
+</style>
diff --git a/src/routes/components/Prose.svelte b/src/routes/components/Prose.svelte
index 84399a9c..6224e030 100644
--- a/src/routes/components/Prose.svelte
+++ b/src/routes/components/Prose.svelte
@@ -1,7 +1,12 @@
 <script>
 	import { getContext } from 'svelte';
 	import { Node, NodeArrayProperty } from 'svedit';
-	import { TW_PAGE_PADDING_X, TW_BLOCK_PADDING_Y, TW_MOBILE_LEFT_INSET, TW_LIMITER } from '../tailwind_theme.js';
+	import {
+		TW_PAGE_PADDING_X,
+		TW_BLOCK_PADDING_Y,
+		TW_MOBILE_LEFT_INSET,
+		TW_LIMITER
+	} from '../tailwind_theme.js';
 
 	const svedit = getContext('svedit');
 	let { path } = $props();
@@ -18,13 +23,16 @@
 </script>
 
 {#snippet content()}
-	<NodeArrayProperty class="flex flex-col gap-5 md:gap-8 {heading_spacing}" path={[...path, 'content']} />
+	<NodeArrayProperty
+		class="flex flex-col gap-5 md:gap-8 {heading_spacing}"
+		path={[...path, 'content']}
+	/>
 {/snippet}
 
 <!-- Layout 1: Left-aligned -->
 {#snippet layout_1()}
-	<div class="{TW_LIMITER}">
-		<div class="{TW_BLOCK_PADDING_Y}">
+	<div class={TW_LIMITER}>
+		<div class={TW_BLOCK_PADDING_Y}>
 			<div class="{TW_PAGE_PADDING_X} max-w-4xl">
 				{@render content()}
 			</div>
@@ -34,8 +42,8 @@
 
 <!-- Layout 2: Centered -->
 {#snippet layout_2()}
-	<div class="{TW_LIMITER}">
-		<div class="{TW_BLOCK_PADDING_Y}">
+	<div class={TW_LIMITER}>
+		<div class={TW_BLOCK_PADDING_Y}>
 			<div class="{TW_PAGE_PADDING_X} mx-auto max-w-4xl text-center">
 				{@render content()}
 			</div>
@@ -45,10 +53,12 @@
 
 <!-- Layout 3: Right-aligned -->
 {#snippet layout_3()}
-	<div class="{TW_LIMITER}">
+	<div class={TW_LIMITER}>
 		<div class="grid grid-cols-3 {TW_BLOCK_PADDING_Y}">
 			<!-- IMPORTANT: Keep in sync with TW_PAGE_PADDING_X -->
-			<div class="max-sm:pl-5 max-md:pl-7 pr-5 sm:pr-7 md:pr-10 lg:pr-14 col-span-3 md:col-span-2 md:col-start-2">
+			<div
+				class="col-span-3 pr-5 max-md:pl-7 max-sm:pl-5 sm:pr-7 md:col-span-2 md:col-start-2 md:pr-10 lg:pr-14"
+			>
 				<div class="{TW_MOBILE_LEFT_INSET} max-w-4xl">
 					{@render content()}
 				</div>
@@ -57,7 +67,10 @@
 	</div>
 {/snippet}
 
-<Node class="ew-prose lg:text-lg layout-{layout} bg-(--background) text-(--foreground) {colorset_class}" {path}>
+<Node
+	class="ew-prose lg:text-lg layout-{layout} bg-(--background) text-(--foreground) {colorset_class}"
+	{path}
+>
 	{@const layouts = [layout_1, layout_2, layout_3]}
 	{@render layouts[layout - 1]()}
 </Node>
diff --git a/src/routes/components/SaveProgressModal.svelte b/src/routes/components/SaveProgressModal.svelte
index 7b54cc8c..3be92390 100644
--- a/src/routes/components/SaveProgressModal.svelte
+++ b/src/routes/components/SaveProgressModal.svelte
@@ -38,18 +38,32 @@
 		class="fixed inset-0 z-9999 flex items-center justify-center bg-black/50 backdrop-blur-sm"
 		transition:fade={{ duration: 150 }}
 	>
-		<div class="bg-(--background) border border-(--foreground)/20 px-10 py-8 shadow-2xl min-w-72 max-w-md text-center">
+		<div
+			class="max-w-md min-w-72 border border-(--foreground)/20 bg-(--background) px-10 py-8 text-center shadow-2xl"
+		>
 			{#if done}
 				<div class="flex items-center justify-center gap-3">
-					<svg class="w-6 h-6 text-green-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+					<svg
+						class="h-6 w-6 shrink-0 text-green-600"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M5 13l4 4L19 7"
+						/>
 					</svg>
 					<p class="text-lg font-medium text-(--foreground)">{message}</p>
 				</div>
 			{:else}
 				<div class="flex flex-col items-center gap-4">
 					<!-- Spinner -->
-					<div class="save-spinner w-8 h-8 border-2 border-(--foreground)/20 border-t-(--foreground) animate-spin"></div>
+					<div
+						class="save-spinner h-8 w-8 animate-spin border-2 border-(--foreground)/20 border-t-(--foreground)"
+					></div>
 					<p class="text-lg text-(--foreground)">{message}</p>
 				</div>
 			{/if}
@@ -61,4 +75,4 @@
 	.save-spinner {
 		border-radius: 50%;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/components/Swiper.svelte b/src/routes/components/Swiper.svelte
new file mode 100644
index 00000000..c7f85d59
--- /dev/null
+++ b/src/routes/components/Swiper.svelte
@@ -0,0 +1,230 @@
+<script>
+	import { getContext, onMount, onDestroy } from 'svelte';
+	import { Node, NodeArrayProperty } from 'svedit';
+
+	const TW_PAGE_PADDING_X = 'px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16';
+	const SLIDE_HEIGHT = 480; // px
+
+	let { path } = $props();
+
+	const svedit = getContext('svedit');
+	let node = $derived(svedit.session.get(path));
+
+	/** @type {HTMLElement | null} */
+	let track_el = $state(null);
+
+	let current_index = $state(0);
+	let slide_count = $state(0);
+
+	const layouts = {
+		1: 'max-w-4xl',
+		2: 'w-full',
+		3: 'max-w-full'
+	};
+
+	function get_layout_class() {
+		const layout = node.layout ?? 1;
+		return layouts[layout] || layouts[1];
+	}
+
+	function get_slides() {
+		if (!track_el) return [];
+		return Array.from(track_el.querySelectorAll('.swiper-slide'));
+	}
+
+	function go_to(index) {
+		const slides = get_slides();
+		if (!slides[index]) return;
+		current_index = index;
+		slides[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+	}
+
+	function go_prev() {
+		if (current_index > 0) go_to(current_index - 1);
+	}
+
+	function go_next() {
+		if (current_index < slide_count - 1) go_to(current_index + 1);
+	}
+
+	// Update current_index when user scrolls the track manually
+	function on_scroll() {
+		const slides = get_slides();
+		if (!slides.length || !track_el) return;
+		const track_left = track_el.getBoundingClientRect().left;
+		let closest = 0;
+		let min_dist = Infinity;
+		slides.forEach((el, i) => {
+			const dist = Math.abs(el.getBoundingClientRect().left - track_left);
+			if (dist < min_dist) { min_dist = dist; closest = i; }
+		});
+		current_index = closest;
+	}
+
+	let observer = null;
+	let debounce_timer = null;
+
+	function refresh() {
+		slide_count = get_slides().length;
+		if (current_index >= slide_count) {
+			current_index = Math.max(0, slide_count - 1);
+		}
+	}
+
+	onMount(() => {
+		observer = new MutationObserver(() => {
+			clearTimeout(debounce_timer);
+			debounce_timer = setTimeout(refresh, 50);
+		});
+		if (track_el) {
+			observer.observe(track_el, { childList: true, subtree: true });
+			track_el.addEventListener('scroll', on_scroll, { passive: true });
+		}
+		setTimeout(refresh, 100);
+	});
+
+	onDestroy(() => {
+		clearTimeout(debounce_timer);
+		observer?.disconnect();
+		track_el?.removeEventListener('scroll', on_scroll);
+	});
+</script>
+
+<Node {path}>
+	<div class="py-10 sm:py-14 md:py-16 lg:py-20">
+		<div class="{TW_PAGE_PADDING_X} {get_layout_class()} mx-auto">
+			<div class="carousel-root">
+				<!-- Scrollable slide track: slides are in normal flow, scroll-snap handles navigation -->
+				<div
+					class="carousel-track"
+					style:height="{SLIDE_HEIGHT}px"
+					bind:this={track_el}
+				>
+					<NodeArrayProperty path={[...path, 'slides']} />
+				</div>
+
+				<!-- Navigation buttons -->
+				{#if slide_count > 1}
+					<button
+						class="carousel-btn carousel-btn-prev"
+						onclick={go_prev}
+						disabled={current_index === 0}
+						aria-label="Previous slide"
+					>
+						<svg width="10" height="18" viewBox="0 0 10 18" fill="none">
+							<path d="M9 1L1 9l8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+						</svg>
+					</button>
+					<button
+						class="carousel-btn carousel-btn-next"
+						onclick={go_next}
+						disabled={current_index === slide_count - 1}
+						aria-label="Next slide"
+					>
+						<svg width="10" height="18" viewBox="0 0 10 18" fill="none">
+							<path d="M1 1l8 8-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+						</svg>
+					</button>
+				{/if}
+
+				<!-- Pagination dots -->
+				{#if slide_count > 1}
+					<div class="carousel-pagination">
+						{#each { length: slide_count } as _, i}
+							<button
+								class="carousel-dot {i === current_index ? 'active' : ''}"
+								onclick={() => go_to(i)}
+								aria-label="Go to slide {i + 1}"
+							></button>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</Node>
+
+<style>
+	.carousel-root {
+		position: relative;
+	}
+
+	/* Scroll-snapping track: slides sit in normal flex flow */
+	.carousel-track {
+		display: flex;
+		flex-direction: row;
+		overflow-x: auto;
+		overflow-y: hidden;
+		scroll-snap-type: x mandatory;
+		scroll-behavior: smooth;
+		-webkit-overflow-scrolling: touch;
+		/* Hide scrollbar visually */
+		scrollbar-width: none;
+	}
+
+	.carousel-track::-webkit-scrollbar {
+		display: none;
+	}
+
+	/* Each slide snaps to the left edge and fills the track */
+	:global(.swiper-slide) {
+		flex: 0 0 100%;
+		width: 100%;
+		height: 100%;
+		scroll-snap-align: start;
+		display: flex;
+		align-items: stretch;
+	}
+
+	/* Nav buttons centered over the track */
+	.carousel-btn {
+		position: absolute;
+		top: calc(var(--slide-h, 480px) / 2);
+		transform: translateY(-50%);
+		z-index: 10;
+		background: rgba(0, 0, 0, 0.45);
+		color: #fff;
+		border: none;
+		cursor: pointer;
+		width: 2.5rem;
+		height: 2.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: background 0.2s;
+	}
+
+	.carousel-btn:hover:not(:disabled) {
+		background: rgba(0, 0, 0, 0.75);
+	}
+
+	.carousel-btn:disabled {
+		opacity: 0.25;
+		cursor: default;
+	}
+
+	.carousel-btn-prev { left: 0.75rem; }
+	.carousel-btn-next { right: 0.75rem; }
+
+	.carousel-pagination {
+		display: flex;
+		justify-content: center;
+		gap: 0.5rem;
+		padding-top: 0.75rem;
+	}
+
+	.carousel-dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 50%;
+		background: #ccc;
+		border: none;
+		cursor: pointer;
+		padding: 0;
+		transition: background 0.2s;
+	}
+
+	.carousel-dot.active {
+		background: #333;
+	}
+</style>
diff --git a/src/routes/components/SwiperSlide.svelte b/src/routes/components/SwiperSlide.svelte
new file mode 100644
index 00000000..8261f45b
--- /dev/null
+++ b/src/routes/components/SwiperSlide.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { Node } from 'svedit';
+	import MediaProperty from './MediaProperty.svelte';
+	let { path } = $props();
+</script>
+
+<Node class="swiper-slide" {path}>
+	<div class="w-full h-full">
+		<MediaProperty path={[...path, 'media']} sizing="fill" />
+	</div>
+</Node>
diff --git a/src/routes/components/Text.svelte b/src/routes/components/Text.svelte
index d3a2677f..5159daf3 100644
--- a/src/routes/components/Text.svelte
+++ b/src/routes/components/Text.svelte
@@ -9,7 +9,7 @@
 	let layout = $derived(node.layout || 1);
 	let tag = $derived(get_tag(layout));
 	let text_style = $derived(get_text_style(layout));
-	let placeholder = $derived(get_placeholder(layout));
+	let placeholder = $derived(svedit.editable ? get_placeholder(layout) : undefined);
 
 	function get_tag(layout) {
 		switch (layout) {
@@ -33,11 +33,11 @@
 			case 1:
 				return '';
 			case 2:
-				return 'ew-h1 font-serif text-3xl md:text-4xl lg:text-5xl text-balance text-(--foreground) [text-box:trim-both_cap_alphabetic]';
+				return 'ew-h1 font-sans text-3xl md:text-4xl lg:text-5xl text-balance text-(--foreground) [text-box:trim-both_cap_alphabetic]';
 			case 3:
-				return 'ew-h2 font-serif text-2xl md:text-3xl lg:text-4xl text-balance text-(--foreground) [text-box:trim-both_cap_alphabetic]';
+				return 'ew-h2 font-sans text-2xl md:text-3xl lg:text-4xl text-balance text-(--foreground) [text-box:trim-both_cap_alphabetic]';
 			case 4:
-				return 'ew-h3 font-serif text-xl md:text-2xl lg:text-3xl text-balance text-(--foreground)';
+				return 'ew-h3 font-sans text-xl md:text-2xl lg:text-3xl text-balance text-(--foreground)';
 			case 5:
 				return 'ew-eyebrow leading-loose block text-xs md:text-sm uppercase tracking-widest text-(--foreground) opacity-60';
 			default:
@@ -65,11 +65,6 @@
 
 <Node {path}>
 	<div use:reveal>
-		<AnnotatedTextProperty
-			{tag}
-			class={text_style}
-			path={[...path, 'content']}
-			{placeholder}
-		/>
+		<AnnotatedTextProperty {tag} class={text_style} path={[...path, 'content']} {placeholder} />
 	</div>
 </Node>
diff --git a/src/routes/components/Toolbar.svelte b/src/routes/components/Toolbar.svelte
index 7c56a6de..43957532 100644
--- a/src/routes/components/Toolbar.svelte
+++ b/src/routes/components/Toolbar.svelte
@@ -5,9 +5,12 @@
 	// On mobile also pin to left edge so the toolbar can scroll horizontally
 	const TW_TOOLBAR_LEFT = 'left-5 sm:left-7 md:left-auto';
 
-	const TW_TOOLBAR_BTN = 'flex items-center justify-center size-9 rounded-full text-(--foreground) bg-white cursor-pointer pointer-events-auto shadow-md transition-colors duration-150';
-	const TW_TOOLBAR_BTN_DISABLED = 'text-[oklch(from_var(--foreground)_0.8_0_0)] !cursor-not-allowed';
-	const TW_TOOLBAR_BTN_HOVER = 'hover:bg-[oklch(from_var(--svedit-brand)_0.95_0.02_h)] hover:text-(--svedit-editing-stroke)';
+	const TW_TOOLBAR_BTN =
+		'flex items-center justify-center size-9 rounded-full text-(--foreground) bg-white cursor-pointer pointer-events-auto shadow-md transition-colors duration-150';
+	const TW_TOOLBAR_BTN_DISABLED =
+		'text-[oklch(from_var(--foreground)_0.8_0_0)] !cursor-not-allowed';
+	const TW_TOOLBAR_BTN_HOVER =
+		'hover:bg-[oklch(from_var(--svedit-brand)_0.95_0.02_h)] hover:text-(--svedit-editing-stroke)';
 
 	function handle_btn_mousedown(event, command) {
 		event.preventDefault();
@@ -16,14 +19,14 @@
 	}
 </script>
 
-<div class="fixed {TW_TOOLBAR_POSITION} {TW_TOOLBAR_LEFT} z-50 select-none pointer-events-none">
-	<div class="overflow-x-auto -mb-3 pb-3 -ml-3 pl-3">
-		<div class="flex items-center gap-1.5 sm:gap-3 w-max ml-auto">
+<div class="fixed {TW_TOOLBAR_POSITION} {TW_TOOLBAR_LEFT} pointer-events-none z-50 select-none">
+	<div class="-mb-3 -ml-3 overflow-x-auto pb-3 pl-3">
+		<div class="ml-auto flex w-max items-center gap-1.5 sm:gap-3">
 			{#if !editable}
 				<!-- Read mode: Edit button -->
 				{#if !app_commands.edit_document.disabled}
 					<button
-						class="px-4 py-2 text-sm font-semibold cursor-pointer pointer-events-auto rounded-full text-white bg-(--svedit-brand) shadow-md transition-colors duration-150 hover:brightness-90"
+						class="pointer-events-auto cursor-pointer rounded-full bg-(--svedit-brand) px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-150 hover:brightness-90"
 						onclick={() => app_commands.edit_document.execute()}
 						title="Edit (⌘E)"
 					>
@@ -38,51 +41,96 @@
 					<div class="flex items-center gap-1">
 						<!-- Bold -->
 						<button
-							class="{TW_TOOLBAR_BTN} {session.commands.toggle_strong?.disabled ? TW_TOOLBAR_BTN_DISABLED : TW_TOOLBAR_BTN_HOVER}"
+							class="{TW_TOOLBAR_BTN} {session.commands.toggle_strong?.disabled
+								? TW_TOOLBAR_BTN_DISABLED
+								: TW_TOOLBAR_BTN_HOVER}"
 							class:!text-(--svedit-editing-stroke)={session.commands.toggle_strong?.active}
 							onmousedown={(e) => handle_btn_mousedown(e, session.commands.toggle_strong)}
 							title="Bold (⌘B)"
 						>
-							<svg class="size-4" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-								<path d="M3.7124 13V1.13403H7.8774C10.1894 1.13403 11.4814 2.35803 11.4814 4.29603C11.4814 5.63903 10.7844 6.43803 9.5434 6.79503V6.89703C11.0054 7.25403 11.8554 8.13803 11.8554 9.73603C11.8554 11.725 10.5124 13 8.2684 13H3.7124ZM6.1944 11.215H7.4864C8.6934 11.215 9.2544 10.875 9.2544 9.78703V9.29403C9.2544 8.22303 8.6934 7.86603 7.4864 7.86603H6.1944V11.215ZM6.1944 6.16603H7.1634C8.3534 6.16603 8.8804 5.82603 8.8804 4.78903V4.27903C8.8804 3.24203 8.3534 2.91903 7.1634 2.91903H6.1944V6.16603Z" fill="currentColor"></path>
+							<svg
+								class="size-4"
+								viewBox="0 0 15 15"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M3.7124 13V1.13403H7.8774C10.1894 1.13403 11.4814 2.35803 11.4814 4.29603C11.4814 5.63903 10.7844 6.43803 9.5434 6.79503V6.89703C11.0054 7.25403 11.8554 8.13803 11.8554 9.73603C11.8554 11.725 10.5124 13 8.2684 13H3.7124ZM6.1944 11.215H7.4864C8.6934 11.215 9.2544 10.875 9.2544 9.78703V9.29403C9.2544 8.22303 8.6934 7.86603 7.4864 7.86603H6.1944V11.215ZM6.1944 6.16603H7.1634C8.3534 6.16603 8.8804 5.82603 8.8804 4.78903V4.27903C8.8804 3.24203 8.3534 2.91903 7.1634 2.91903H6.1944V6.16603Z"
+									fill="currentColor"
+								></path>
 							</svg>
 						</button>
 
 						<!-- Italic -->
 						<button
-							class="{TW_TOOLBAR_BTN} {session.commands.toggle_emphasis?.disabled ? TW_TOOLBAR_BTN_DISABLED : TW_TOOLBAR_BTN_HOVER}"
+							class="{TW_TOOLBAR_BTN} {session.commands.toggle_emphasis?.disabled
+								? TW_TOOLBAR_BTN_DISABLED
+								: TW_TOOLBAR_BTN_HOVER}"
 							class:!text-(--svedit-editing-stroke)={session.commands.toggle_emphasis?.active}
 							onmousedown={(e) => handle_btn_mousedown(e, session.commands.toggle_emphasis)}
 							title="Italic (⌘I)"
 						>
-							<svg class="size-4" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-								<path d="M10.4783 13H3.08325L3.28725 11.742H6.17725L7.74125 2.39203H4.85125L5.05525 1.13403H12.4503L12.2463 2.39203H9.35625L7.79225 11.742H10.6823L10.4783 13Z" fill="currentColor"></path>
+							<svg
+								class="size-4"
+								viewBox="0 0 15 15"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M10.4783 13H3.08325L3.28725 11.742H6.17725L7.74125 2.39203H4.85125L5.05525 1.13403H12.4503L12.2463 2.39203H9.35625L7.79225 11.742H10.6823L10.4783 13Z"
+									fill="currentColor"
+								></path>
 							</svg>
 						</button>
 
 						<!-- Highlight -->
 						<button
-							class="{TW_TOOLBAR_BTN} {session.commands.toggle_highlight?.disabled ? TW_TOOLBAR_BTN_DISABLED : TW_TOOLBAR_BTN_HOVER}"
+							class="{TW_TOOLBAR_BTN} {session.commands.toggle_highlight?.disabled
+								? TW_TOOLBAR_BTN_DISABLED
+								: TW_TOOLBAR_BTN_HOVER}"
 							class:!text-(--svedit-editing-stroke)={session.commands.toggle_highlight?.active}
 							onmousedown={(e) => handle_btn_mousedown(e, session.commands.toggle_highlight)}
 							title="Highlight (⌘U)"
 						>
-							<svg class="size-4" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<svg
+								class="size-4"
+								viewBox="0 0 15 15"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
 								<path d="M0 13H4.63L4.5 8H0V13Z" fill="currentColor"></path>
-								<path d="M14.1465 5.14652C14.3418 4.95126 14.6584 4.95126 14.8536 5.14652C15.0489 5.34179 15.0489 5.65837 14.8536 5.85363L14.5001 5.50008L14.1465 5.14652ZM12.0001 8.00008L12.3536 8.35363C12.1584 8.54889 11.8418 8.54889 11.6465 8.35363L12.0001 8.00008ZM7.00008 3.00008L6.64652 3.35363C6.55276 3.25986 6.50008 3.13269 6.50008 3.00008C6.50008 2.86747 6.55276 2.74029 6.64652 2.64652L7.00008 3.00008ZM9.14652 0.146525C9.34179 -0.0487373 9.65837 -0.0487373 9.85363 0.146525C10.0489 0.341787 10.0489 0.658369 9.85363 0.853632L9.50008 0.500078L9.14652 0.146525ZM6.00008 5.00008L5.64652 5.35363C5.55276 5.25986 5.50008 5.13269 5.50008 5.00008C5.50008 4.86747 5.55276 4.74029 5.64652 4.64652L6.00008 5.00008ZM10.0001 9.00008L10.3536 9.35363C10.1584 9.54889 9.84179 9.54889 9.64652 9.35363L10.0001 9.00008ZM9.00008 8.00008L9.35363 7.64652L9.35363 7.64652L9.00008 8.00008ZM5 11.9302L5.35042 12.2868L4.62152 13.003L4.50335 11.988L5 11.9302ZM4.56226 8.17L4.06561 8.22782L4.03894 7.99871L4.19591 7.82972L4.56226 8.17ZM6.78117 5.78117L7.13472 5.42761L7.13472 5.42761L6.78117 5.78117ZM14.5001 5.50008L14.8536 5.85363L12.3536 8.35363L12.0001 8.00008L11.6465 7.64652L14.1465 5.14652L14.5001 5.50008ZM7.00008 3.00008L6.64652 2.64652L9.14652 0.146525L9.50008 0.500078L9.85363 0.853632L7.35363 3.35363L7.00008 3.00008ZM7.50008 3.50008L7.14652 3.85363L6.64652 3.35363L7.00008 3.00008L7.35363 2.64652L7.85363 3.14652L7.50008 3.50008ZM7.50008 3.50008L7.85363 3.85363L6.35363 5.35363L6.00008 5.00008L5.64652 4.64652L7.14652 3.14652L7.50008 3.50008ZM12.0001 8.00008L11.6465 8.35363L11.1465 7.85363L11.5001 7.50008L11.8536 7.14652L12.3536 7.64652L12.0001 8.00008ZM11.5001 7.50008L11.1465 7.85363L7.14652 3.85363L7.50008 3.50008L7.85363 3.14652L11.8536 7.14652L11.5001 7.50008ZM10.0001 9.00008L9.64652 8.64652L11.1465 7.14652L11.5001 7.50008L11.8536 7.85363L10.3536 9.35363L10.0001 9.00008ZM9.00008 8.00008L9.35363 7.64652L10.3536 8.64652L10.0001 9.00008L9.64652 9.35363L8.64652 8.35363L9.00008 8.00008ZM9.00008 8.00008L9.3505 8.35674L5.35042 12.2868L5 11.9302L4.64958 11.5735L8.64966 7.64342L9.00008 8.00008ZM5 11.9302L4.50335 11.988L4.06561 8.22782L4.56226 8.17L5.0589 8.11218L5.49665 11.8724L5 11.9302ZM6.00008 5.00008L6.35363 4.64652L7.13472 5.42761L6.78117 5.78117L6.42761 6.13472L5.64652 5.35363L6.00008 5.00008ZM6.78117 5.78117L7.13472 5.42761L9.35363 7.64652L9.00008 8.00008L8.64652 8.35363L6.42761 6.13472L6.78117 5.78117ZM4.56226 8.17L4.19591 7.82972L6.41482 5.44088L6.78117 5.78117L7.14751 6.12145L4.9286 8.51028L4.56226 8.17Z" fill="currentColor"></path>
+								<path
+									d="M14.1465 5.14652C14.3418 4.95126 14.6584 4.95126 14.8536 5.14652C15.0489 5.34179 15.0489 5.65837 14.8536 5.85363L14.5001 5.50008L14.1465 5.14652ZM12.0001 8.00008L12.3536 8.35363C12.1584 8.54889 11.8418 8.54889 11.6465 8.35363L12.0001 8.00008ZM7.00008 3.00008L6.64652 3.35363C6.55276 3.25986 6.50008 3.13269 6.50008 3.00008C6.50008 2.86747 6.55276 2.74029 6.64652 2.64652L7.00008 3.00008ZM9.14652 0.146525C9.34179 -0.0487373 9.65837 -0.0487373 9.85363 0.146525C10.0489 0.341787 10.0489 0.658369 9.85363 0.853632L9.50008 0.500078L9.14652 0.146525ZM6.00008 5.00008L5.64652 5.35363C5.55276 5.25986 5.50008 5.13269 5.50008 5.00008C5.50008 4.86747 5.55276 4.74029 5.64652 4.64652L6.00008 5.00008ZM10.0001 9.00008L10.3536 9.35363C10.1584 9.54889 9.84179 9.54889 9.64652 9.35363L10.0001 9.00008ZM9.00008 8.00008L9.35363 7.64652L9.35363 7.64652L9.00008 8.00008ZM5 11.9302L5.35042 12.2868L4.62152 13.003L4.50335 11.988L5 11.9302ZM4.56226 8.17L4.06561 8.22782L4.03894 7.99871L4.19591 7.82972L4.56226 8.17ZM6.78117 5.78117L7.13472 5.42761L7.13472 5.42761L6.78117 5.78117ZM14.5001 5.50008L14.8536 5.85363L12.3536 8.35363L12.0001 8.00008L11.6465 7.64652L14.1465 5.14652L14.5001 5.50008ZM7.00008 3.00008L6.64652 2.64652L9.14652 0.146525L9.50008 0.500078L9.85363 0.853632L7.35363 3.35363L7.00008 3.00008ZM7.50008 3.50008L7.14652 3.85363L6.64652 3.35363L7.00008 3.00008L7.35363 2.64652L7.85363 3.14652L7.50008 3.50008ZM7.50008 3.50008L7.85363 3.85363L6.35363 5.35363L6.00008 5.00008L5.64652 4.64652L7.14652 3.14652L7.50008 3.50008ZM12.0001 8.00008L11.6465 8.35363L11.1465 7.85363L11.5001 7.50008L11.8536 7.14652L12.3536 7.64652L12.0001 8.00008ZM11.5001 7.50008L11.1465 7.85363L7.14652 3.85363L7.50008 3.50008L7.85363 3.14652L11.8536 7.14652L11.5001 7.50008ZM10.0001 9.00008L9.64652 8.64652L11.1465 7.14652L11.5001 7.50008L11.8536 7.85363L10.3536 9.35363L10.0001 9.00008ZM9.00008 8.00008L9.35363 7.64652L10.3536 8.64652L10.0001 9.00008L9.64652 9.35363L8.64652 8.35363L9.00008 8.00008ZM9.00008 8.00008L9.3505 8.35674L5.35042 12.2868L5 11.9302L4.64958 11.5735L8.64966 7.64342L9.00008 8.00008ZM5 11.9302L4.50335 11.988L4.06561 8.22782L4.56226 8.17L5.0589 8.11218L5.49665 11.8724L5 11.9302ZM6.00008 5.00008L6.35363 4.64652L7.13472 5.42761L6.78117 5.78117L6.42761 6.13472L5.64652 5.35363L6.00008 5.00008ZM6.78117 5.78117L7.13472 5.42761L9.35363 7.64652L9.00008 8.00008L8.64652 8.35363L6.42761 6.13472L6.78117 5.78117ZM4.56226 8.17L4.19591 7.82972L6.41482 5.44088L6.78117 5.78117L7.14751 6.12145L4.9286 8.51028L4.56226 8.17Z"
+									fill="currentColor"
+								></path>
 							</svg>
 						</button>
 
 						<!-- Link -->
 						<button
-							class="{TW_TOOLBAR_BTN} {session.commands.toggle_link?.disabled ? TW_TOOLBAR_BTN_DISABLED : TW_TOOLBAR_BTN_HOVER}"
+							class="{TW_TOOLBAR_BTN} {session.commands.toggle_link?.disabled
+								? TW_TOOLBAR_BTN_DISABLED
+								: TW_TOOLBAR_BTN_HOVER}"
 							class:!text-(--svedit-editing-stroke)={session.commands.toggle_link?.active}
 							onmousedown={(e) => handle_btn_mousedown(e, session.commands.toggle_link)}
 							title="Link (⌘K)"
 						>
-							<svg class="size-4" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-								<path d="M8.88461 8.39935C8.51368 8.76122 8.01477 8.96185 7.49658 8.95753C6.97839 8.95321 6.4829 8.7443 6.11804 8.37629L4.68865 6.9469C4.32285 6.58087 4.11546 6.0858 4.11115 5.56833C4.10684 5.05087 4.30595 4.55241 4.6656 4.18033L7.73649 1.05411C8.1086 0.693964 8.60762 0.49492 9.12545 0.500099C9.64328 0.505277 10.1382 0.71426 10.5031 1.08178L11.9324 2.51117C12.2963 2.87966 12.5003 3.37663 12.5003 3.89445C12.5003 4.41228 12.2963 4.90925 11.9324 5.27774L10.5907 6.61952" stroke="currentColor" stroke-linejoin="round"></path>
-								<path d="M6.12702 6.60049C6.49795 6.23862 6.99686 6.03799 7.51505 6.0423C8.03324 6.04662 8.52874 6.25554 8.89359 6.62354L10.323 8.05294C10.6888 8.41897 10.8962 8.91404 10.9005 9.4315C10.9048 9.94897 10.7057 10.4474 10.346 10.8195L7.27515 13.9457C6.90303 14.3059 6.40401 14.5049 5.88618 14.4997C5.36835 14.4946 4.87341 14.2856 4.50858 13.9181L3.07919 12.4887C2.71229 12.1232 2.50414 11.6279 2.49982 11.1101C2.49551 10.5923 2.69538 10.0936 3.05613 9.7221L4.30109 8.47714" stroke="currentColor" stroke-linejoin="round"></path>
+							<svg
+								class="size-4"
+								viewBox="0 0 15 15"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M8.88461 8.39935C8.51368 8.76122 8.01477 8.96185 7.49658 8.95753C6.97839 8.95321 6.4829 8.7443 6.11804 8.37629L4.68865 6.9469C4.32285 6.58087 4.11546 6.0858 4.11115 5.56833C4.10684 5.05087 4.30595 4.55241 4.6656 4.18033L7.73649 1.05411C8.1086 0.693964 8.60762 0.49492 9.12545 0.500099C9.64328 0.505277 10.1382 0.71426 10.5031 1.08178L11.9324 2.51117C12.2963 2.87966 12.5003 3.37663 12.5003 3.89445C12.5003 4.41228 12.2963 4.90925 11.9324 5.27774L10.5907 6.61952"
+									stroke="currentColor"
+									stroke-linejoin="round"
+								></path>
+								<path
+									d="M6.12702 6.60049C6.49795 6.23862 6.99686 6.03799 7.51505 6.0423C8.03324 6.04662 8.52874 6.25554 8.89359 6.62354L10.323 8.05294C10.6888 8.41897 10.8962 8.91404 10.9005 9.4315C10.9048 9.94897 10.7057 10.4474 10.346 10.8195L7.27515 13.9457C6.90303 14.3059 6.40401 14.5049 5.88618 14.4997C5.36835 14.4946 4.87341 14.2856 4.50858 13.9181L3.07919 12.4887C2.71229 12.1232 2.50414 11.6279 2.49982 11.1101C2.49551 10.5923 2.69538 10.0936 3.05613 9.7221L4.30109 8.47714"
+									stroke="currentColor"
+									stroke-linejoin="round"
+								></path>
 							</svg>
 						</button>
 					</div>
@@ -92,12 +140,22 @@
 				<div class="flex items-center gap-1">
 					<!-- Type: cycle to next node type -->
 					<button
-						class="{TW_TOOLBAR_BTN} {session.commands.cycle_node_type_next?.disabled ? TW_TOOLBAR_BTN_DISABLED : TW_TOOLBAR_BTN_HOVER}"
+						class="{TW_TOOLBAR_BTN} {session.commands.cycle_node_type_next?.disabled
+							? TW_TOOLBAR_BTN_DISABLED
+							: TW_TOOLBAR_BTN_HOVER}"
 						onmousedown={(e) => handle_btn_mousedown(e, session.commands.cycle_node_type_next)}
 						title="Cycle type (⌃⇧↓)"
 					>
 						<!-- T with small arrows icon -->
-						<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<svg
+							class="size-4"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
 							<line x1="6" y1="4" x2="18" y2="4" />
 							<line x1="12" y1="4" x2="12" y2="14" />
 							<polyline points="8 18 12 22 16 18" />
@@ -107,12 +165,22 @@
 
 					<!-- Layout: cycle to next layout -->
 					<button
-						class="{TW_TOOLBAR_BTN} {session.commands.cycle_layout_next?.disabled ? TW_TOOLBAR_BTN_DISABLED : TW_TOOLBAR_BTN_HOVER}"
+						class="{TW_TOOLBAR_BTN} {session.commands.cycle_layout_next?.disabled
+							? TW_TOOLBAR_BTN_DISABLED
+							: TW_TOOLBAR_BTN_HOVER}"
 						onmousedown={(e) => handle_btn_mousedown(e, session.commands.cycle_layout_next)}
 						title="Cycle layout (⌃⇧→)"
 					>
 						<!-- T with right arrow icon -->
-						<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<svg
+							class="size-4"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
 							<line x1="4" y1="6" x2="4" y2="18" />
 							<line x1="4" y1="12" x2="14" y2="12" />
 							<polyline points="18 8 22 12 18 16" />
@@ -124,30 +192,48 @@
 				<!-- Stable right group: Undo / Redo / Save -->
 				<div class="flex items-center gap-1">
 					<button
-						class="{TW_TOOLBAR_BTN} {session.commands.undo?.disabled ? TW_TOOLBAR_BTN_DISABLED : TW_TOOLBAR_BTN_HOVER}"
+						class="{TW_TOOLBAR_BTN} {session.commands.undo?.disabled
+							? TW_TOOLBAR_BTN_DISABLED
+							: TW_TOOLBAR_BTN_HOVER}"
 						onmousedown={(e) => handle_btn_mousedown(e, session.commands.undo)}
 						title="Undo (⌘Z)"
 					>
 						<svg class="size-4" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-							<path d="M2.13794 12C3.42201 13.5285 5.34758 14.5 7.50005 14.5C11.366 14.5 14.5001 11.366 14.5001 7.5C14.5001 3.63401 11.366 0.5 7.50001 0.5C5.50001 0.5 3.75001 1.75 2.50001 3" stroke="currentColor" stroke-linecap="round"></path>
-							<path d="M0 1.20711C0 0.761654 0.538571 0.538571 0.853553 0.853553L4.64645 4.64645C4.96143 4.96143 4.73835 5.5 4.29289 5.5H0.5C0.223857 5.5 0 5.27614 0 5V1.20711Z" fill="currentColor"></path>
+							<path
+								d="M2.13794 12C3.42201 13.5285 5.34758 14.5 7.50005 14.5C11.366 14.5 14.5001 11.366 14.5001 7.5C14.5001 3.63401 11.366 0.5 7.50001 0.5C5.50001 0.5 3.75001 1.75 2.50001 3"
+								stroke="currentColor"
+								stroke-linecap="round"
+							></path>
+							<path
+								d="M0 1.20711C0 0.761654 0.538571 0.538571 0.853553 0.853553L4.64645 4.64645C4.96143 4.96143 4.73835 5.5 4.29289 5.5H0.5C0.223857 5.5 0 5.27614 0 5V1.20711Z"
+								fill="currentColor"
+							></path>
 						</svg>
 					</button>
 					<button
-						class="{TW_TOOLBAR_BTN} {session.commands.redo?.disabled ? TW_TOOLBAR_BTN_DISABLED : TW_TOOLBAR_BTN_HOVER}"
+						class="{TW_TOOLBAR_BTN} {session.commands.redo?.disabled
+							? TW_TOOLBAR_BTN_DISABLED
+							: TW_TOOLBAR_BTN_HOVER}"
 						onmousedown={(e) => handle_btn_mousedown(e, session.commands.redo)}
 						title="Redo (⌘⇧Z)"
 					>
 						<svg class="size-4" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-							<path d="M12.8621 12C11.578 13.5285 9.65242 14.5 7.49995 14.5C3.63395 14.5 0.499947 11.366 0.499947 7.5C0.499947 3.63401 3.634 0.5 7.49999 0.5C9.49999 0.5 11.25 1.75 12.5 3" stroke="currentColor" stroke-linecap="round"></path>
-							<path d="M15 1.20711C15 0.761654 14.4614 0.538571 14.1464 0.853553L10.3536 4.64645C10.0386 4.96143 10.2617 5.5 10.7071 5.5H14.5C14.7761 5.5 15 5.27614 15 5V1.20711Z" fill="currentColor"></path>
+							<path
+								d="M12.8621 12C11.578 13.5285 9.65242 14.5 7.49995 14.5C3.63395 14.5 0.499947 11.366 0.499947 7.5C0.499947 3.63401 3.634 0.5 7.49999 0.5C9.49999 0.5 11.25 1.75 12.5 3"
+								stroke="currentColor"
+								stroke-linecap="round"
+							></path>
+							<path
+								d="M15 1.20711C15 0.761654 14.4614 0.538571 14.1464 0.853553L10.3536 4.64645C10.0386 4.96143 10.2617 5.5 10.7071 5.5H14.5C14.7761 5.5 15 5.27614 15 5V1.20711Z"
+								fill="currentColor"
+							></path>
 						</svg>
 					</button>
 				</div>
 
 				{#if !app_commands.save_document.disabled}
 					<button
-						class="px-4 py-2 text-sm font-semibold cursor-pointer pointer-events-auto rounded-full text-white bg-(--svedit-brand) shadow-md transition-colors duration-150 hover:brightness-90"
+						class="pointer-events-auto cursor-pointer rounded-full bg-(--svedit-brand) px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-150 hover:brightness-90"
 						onclick={() => app_commands.save_document.execute()}
 						title="Save (⌘S)"
 					>
diff --git a/src/routes/components/Video.svelte b/src/routes/components/Video.svelte
index 7c877211..6684a337 100644
--- a/src/routes/components/Video.svelte
+++ b/src/routes/components/Video.svelte
@@ -12,11 +12,7 @@
 	let is_saved = $derived(node.src && !is_blob);
 
 	// Resolve the display URL
-	let display_src = $derived(
-		is_blob ? node.src :
-		is_saved ? `${ASSET_BASE}/${node.src}` :
-		''
-	);
+	let display_src = $derived(is_blob ? node.src : is_saved ? `${ASSET_BASE}/${node.src}` : '');
 
 	// Apply scale to video (same as Image.svelte)
 	let video_style = $derived(`
@@ -109,8 +105,8 @@
 		// Standard Fullscreen API (Chrome, Firefox, Safari desktop)
 		function handle_fullscreen_change() {
 			if (!v) return;
-			const fs = document.fullscreenElement
-				|| /** @type {any} */ (document).webkitFullscreenElement;
+			const fs =
+				document.fullscreenElement || /** @type {any} */ (document).webkitFullscreenElement;
 			if (fs === v) {
 				is_fullscreen = true;
 			} else if (!fs) {
@@ -173,4 +169,4 @@
 	video.clickable {
 		cursor: zoom-in;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/create_session.js b/src/routes/create_session.js
index 8a44cd56..d195776f 100644
--- a/src/routes/create_session.js
+++ b/src/routes/create_session.js
@@ -35,15 +35,22 @@ import Prose from './components/Prose.svelte';
 import Text from './components/Text.svelte';
 import Gallery from './components/Gallery.svelte';
 import GalleryItem from './components/GalleryItem.svelte';
+import Columns from './components/Columns.svelte';
+import Column from './components/Column.svelte';
+import Highlights from './components/Highlights.svelte';
+import HighlightItem from './components/HighlightItem.svelte';
 import LinkCollection from './components/LinkCollection.svelte';
 import LinkCollectionItem from './components/LinkCollectionItem.svelte';
 import Figure from './components/Figure.svelte';
 import Decoration from './components/Decoration.svelte';
 import Feature from './components/Feature.svelte';
 import Hero from './components/Hero.svelte';
+import ImageHero from './components/ImageHero.svelte';
 import Button from './components/Button.svelte';
 import Image from './components/Image.svelte';
 import Video from './components/Video.svelte';
+import Swiper from './components/Swiper.svelte';
+import SwiperSlide from './components/SwiperSlide.svelte';
 
 import Strong from './components/Strong.svelte';
 import Emphasis from './components/Emphasis.svelte';
@@ -62,7 +69,6 @@ function get_media_type(file) {
 	return 'image';
 }
 
-
 // App-specific config object, always available via session.config for introspection
 const session_config = {
 	// Custom ID generator function
@@ -81,18 +87,25 @@ const session_config = {
 		FooterLinkColumn,
 		FooterLink,
 		Hero,
+		ImageHero,
 		Button,
 		Prose,
 		Text,
 		Image,
 		Video,
+		Columns,
+		Column,
 		Figure,
 		Decoration,
 		Feature,
+		Highlights,
+		HighlightItem,
 		Gallery,
 		GalleryItem,
 		LinkCollection,
 		LinkCollectionItem,
+		Swiper,
+		SwiperSlide,
 		Strong,
 		Emphasis,
 		Highlight,
@@ -126,7 +139,7 @@ const session_config = {
 						src: blob_url,
 						mime_type: file.type,
 						width: dims.width,
-						height: dims.height,
+						height: dims.height
 					};
 					tr.create(new_node);
 					const parent_path = session.selection.path.slice(0, -1);
@@ -217,9 +230,12 @@ const session_config = {
 		decoration: 1,
 		feature: 4,
 		gallery: 4,
+		columns: 2,
 		nav_item: 2,
 		button: 2,
-		hero: 4
+		hero: 4,
+		image_hero: 3,
+		swiper: 3
 	},
 
 	/**
@@ -331,6 +347,73 @@ const session_config = {
 				focus_offset: 0
 			});
 		},
+		highlights: function (tr) {
+			const new_item_ids = [];
+			for (let item_index = 0; item_index < 3; item_index++) {
+				const new_item_id = nanoid();
+				const new_item_node = {
+					id: new_item_id,
+					type: 'highlight_item',
+					label: { text: '', annotations: [] },
+					value: { text: '', annotations: [] }
+				};
+				tr.create(new_item_node);
+				new_item_ids.push(new_item_id);
+			}
+
+			const new_highlights_id = nanoid();
+			const new_highlights_node = {
+				id: new_highlights_id,
+				type: 'highlights',
+				items: new_item_ids
+			};
+			tr.create(new_highlights_node);
+			tr.insert_nodes([new_highlights_id]);
+		},
+		columns: function (tr) {
+			const column_ids = [];
+			for (let column_index = 0; column_index < 2; column_index++) {
+				const new_column_id = nanoid();
+				const new_column_node = {
+					id: new_column_id,
+					type: 'column',
+					content: []
+				};
+				tr.create(new_column_node);
+				column_ids.push(new_column_id);
+			}
+
+			const new_columns_id = nanoid();
+			const new_columns_node = {
+				id: new_columns_id,
+				type: 'columns',
+				layout: 1,
+				columns: column_ids
+			};
+			tr.create(new_columns_node);
+			tr.insert_nodes([new_columns_id]);
+		},
+		column: function (tr) {
+			const new_column_id = nanoid();
+			const new_column_node = {
+				id: new_column_id,
+				type: 'column',
+				content: []
+			};
+			tr.create(new_column_node);
+			tr.insert_nodes([new_column_id]);
+		},
+		highlight_item: function (tr) {
+			const new_item_id = nanoid();
+			const new_item_node = {
+				id: new_item_id,
+				type: 'highlight_item',
+				label: { text: '', annotations: [] },
+				value: { text: '', annotations: [] }
+			};
+			tr.create(new_item_node);
+			tr.insert_nodes([new_item_id]);
+		},
 		feature: function (tr) {
 			const new_feature_id = tr.build('new_feature', {
 				feature_image: {
@@ -345,13 +428,13 @@ const session_config = {
 					content: { text: '', annotations: [] }
 				},
 				new_feature: {
-						id: 'new_feature',
-						type: 'feature',
-						layout: 1,
-						colorset: 0,
-						media: 'feature_image',
-						body: ['body_text']
-					}
+					id: 'new_feature',
+					type: 'feature',
+					layout: 1,
+					colorset: 0,
+					media: 'feature_image',
+					body: ['body_text']
+				}
 			});
 
 			tr.insert_nodes([new_feature_id]);
@@ -426,6 +509,26 @@ const session_config = {
 
 			tr.insert_nodes([new_hero_id]);
 		},
+		image_hero: function (tr) {
+			const new_node_id = tr.build('new_image_hero', {
+				hero_bg_image: {
+					id: 'hero_bg_image',
+					type: 'image',
+					...MEDIA_DEFAULTS
+				},
+				new_image_hero: {
+					id: 'new_image_hero',
+					type: 'image_hero',
+					layout: 1,
+					colorset: 0,
+					background: 'hero_bg_image',
+					title: { text: '', annotations: [] },
+					description: { text: '', annotations: [] },
+					buttons: []
+				}
+			});
+			tr.insert_nodes([new_node_id]);
+		},
 		button: function (tr, content = { text: '', annotations: [] }, layout = 1) {
 			const new_button_id = tr.build('new_button', {
 				new_button: {
@@ -572,15 +675,15 @@ const session_config = {
 				};
 				tr.create(image);
 				const link_collection_item = {
-						id: nanoid(),
-						type: 'link_collection_item',
-						href: '',
-						target: '_self',
-						media: image_id,
-						preline: { text: '', annotations: [] },
-						title: { text: '', annotations: [] },
-						description: { text: '', annotations: [] }
-					};
+					id: nanoid(),
+					type: 'link_collection_item',
+					href: '',
+					target: '_self',
+					media: image_id,
+					preline: { text: '', annotations: [] },
+					title: { text: '', annotations: [] },
+					description: { text: '', annotations: [] }
+				};
 				tr.create(link_collection_item);
 				new_link_collection_items.push(link_collection_item.id);
 			}
@@ -633,6 +736,48 @@ const session_config = {
 				anchor_offset: tr.selection.focus_offset,
 				focus_offset: tr.selection.focus_offset
 			});
+		},
+
+		swiper: function (tr) {
+			const slide_ids = [];
+			for (let i = 0; i < 3; i++) {
+				const media_id = nanoid();
+				tr.create({
+					id: media_id,
+					type: 'image',
+					...MEDIA_DEFAULTS
+				});
+				const slide_id = nanoid();
+				tr.create({
+					id: slide_id,
+					type: 'swiper_slide',
+					media: media_id
+				});
+				slide_ids.push(slide_id);
+			}
+			const new_swiper_id = nanoid();
+			tr.create({
+				id: new_swiper_id,
+				type: 'swiper',
+				layout: 1,
+				slides: slide_ids
+			});
+			tr.insert_nodes([new_swiper_id]);
+		},
+		swiper_slide: function (tr) {
+			const media_id = nanoid();
+			tr.create({
+				id: media_id,
+				type: 'image',
+				...MEDIA_DEFAULTS
+			});
+			const new_slide_id = nanoid();
+			tr.create({
+				id: new_slide_id,
+				type: 'swiper_slide',
+				media: media_id
+			});
+			tr.insert_nodes([new_slide_id]);
 		}
 	}
 };
diff --git a/src/routes/nanoid.js b/src/routes/nanoid.js
index 5924a9d9..6dfa8174 100644
--- a/src/routes/nanoid.js
+++ b/src/routes/nanoid.js
@@ -1,11 +1,8 @@
-import { customAlphabet } from "nanoid";
+import { customAlphabet } from 'nanoid';
 
-const _nanoid = customAlphabet(
-  "ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz",
-  23
-);
+const _nanoid = customAlphabet('ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz', 23);
 
 // A custom nanoid of length 23 with no numbers and no "_" or "-" to be used as HTML ids
 export default function nanoid() {
-  return _nanoid();
+	return _nanoid();
 }
diff --git a/src/routes/reveal.js b/src/routes/reveal.js
index f536df98..f862caf8 100644
--- a/src/routes/reveal.js
+++ b/src/routes/reveal.js
@@ -44,4 +44,4 @@ export function reveal(node, options = {}) {
 			observer.disconnect();
 		}
 	};
-}
\ No newline at end of file
+}
diff --git a/src/routes/sitemap/+page.server.js b/src/routes/sitemap/+page.server.js
new file mode 100644
index 00000000..f6bc5c49
--- /dev/null
+++ b/src/routes/sitemap/+page.server.js
@@ -0,0 +1,117 @@
+import { redirect, fail } from '@sveltejs/kit';
+import db from '$lib/server/db.js';
+import { create_blank_page } from '$lib/server/documents.js';
+import nanoid from '../nanoid.js';
+
+export async function load() {
+	const query = `
+		WITH RECURSIVE reachable(document_id) AS (
+			SELECT value FROM site_settings WHERE key = 'home_page_id'
+			UNION SELECT 'nav_1'
+			UNION SELECT 'footer_1'
+			UNION
+			SELECT target_document_id FROM document_refs
+			JOIN reachable ON reachable.document_id = source_document_id
+		)
+		SELECT d.document_id, d.data,
+			CASE WHEN r.document_id IS NOT NULL THEN 'public' ELSE 'draft' END AS status
+		FROM documents d
+		LEFT JOIN reachable r ON d.document_id = r.document_id
+		WHERE d.type = 'page'
+		ORDER BY status ASC, d.document_id ASC;
+	`;
+
+	const rows = db.prepare(query).all();
+
+	const pages = rows.map((row) => {
+		const doc = JSON.parse(/** @type {string} */ (row.data));
+		let title = 'Untitled Page';
+		const page_node = doc.nodes[doc.document_id];
+		if (page_node && page_node.body) {
+			for (const node_id of page_node.body) {
+				const child = doc.nodes[node_id];
+				if (child && child.type === 'prose' && child.content) {
+					const first_text = doc.nodes[child.content[0]];
+					if (first_text && first_text.type === 'text' && first_text.content?.text) {
+						title = first_text.content.text.substring(0, 60);
+						break;
+					}
+				}
+			}
+		}
+
+		return {
+			document_id: row.document_id,
+			status: row.status,
+			title
+		};
+	});
+
+	// Get home page id to prevent deletion
+	const home_row = db.prepare("SELECT value FROM site_settings WHERE key = 'home_page_id'").get();
+	const home_page_id = home_row ? home_row.value : 'page_1';
+
+	return { pages, home_page_id };
+}
+
+export const actions = {
+	create: async () => {
+		// Create a new blank page
+		const new_id = nanoid();
+		const blank_doc = create_blank_page(new_id, 'blank');
+
+		db.prepare('INSERT INTO documents (document_id, type, data) VALUES(?, ?, ?)').run(
+			new_id,
+			'page',
+			JSON.stringify(blank_doc)
+		);
+
+		throw redirect(303, `/${new_id}`);
+	},
+	create_post: async () => {
+		// Create a new blog post
+		const new_id = nanoid();
+		const post_doc = create_blank_page(new_id, 'post');
+
+		db.prepare('INSERT INTO documents (document_id, type, data) VALUES(?, ?, ?)').run(
+			new_id,
+			'page',
+			JSON.stringify(post_doc)
+		);
+
+		throw redirect(303, `/${new_id}`);
+	},
+	delete: async ({ request }) => {
+		const data = await request.formData();
+		const id_to_delete = data.get('id');
+
+		if (!id_to_delete || typeof id_to_delete !== 'string') {
+			return fail(400, { error: 'Invalid ID' });
+		}
+
+		const home_row = db.prepare("SELECT value FROM site_settings WHERE key = 'home_page_id'").get();
+		const home_page_id = home_row ? home_row.value : 'page_1';
+
+		if (id_to_delete === home_page_id) {
+			return fail(400, { error: 'Cannot delete the home page' });
+		}
+
+		// Delete from database
+		db.exec('BEGIN');
+		try {
+			db.prepare('DELETE FROM asset_refs WHERE document_id = ?').run(id_to_delete);
+			db.prepare('DELETE FROM document_refs WHERE source_document_id = ?').run(id_to_delete);
+			db.prepare('DELETE FROM document_refs WHERE target_document_id = ?').run(id_to_delete);
+			db.prepare('DELETE FROM documents WHERE document_id = ? AND type = ?').run(
+				id_to_delete,
+				'page'
+			);
+			db.exec('COMMIT');
+		} catch (err) {
+			db.exec('ROLLBACK');
+			return fail(500, { error: 'Failed to delete document' });
+		}
+
+		throw redirect(303, '/sitemap');
+	}
+};
diff --git a/src/routes/sitemap/+page.svelte b/src/routes/sitemap/+page.svelte
new file mode 100644
index 00000000..57698870
--- /dev/null
+++ b/src/routes/sitemap/+page.svelte
@@ -0,0 +1,114 @@
+<script>
+	let { data, form } = $props();
+</script>
+
+<svelte:head>
+	<title>Admin Sitemap - Editable Website</title>
+</svelte:head>
+
+<div class="mx-auto mt-12 max-w-4xl rounded-lg border border-neutral-200 bg-white p-8 shadow-sm">
+	<div class="mb-8 flex items-center justify-between">
+		<h1 class="text-3xl font-bold tracking-tight text-neutral-900">Pages</h1>
+
+		<div class="flex gap-3">
+			<form method="POST" action="?/create">
+				<button
+					type="submit"
+					class="rounded-md border border-neutral-300 bg-white px-4 py-2 font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
+				>
+					+ Create blank page
+				</button>
+			</form>
+			<form method="POST" action="?/create_post">
+				<button
+					type="submit"
+					class="rounded-md bg-blue-600 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-blue-700"
+				>
+					+ Create blog post
+				</button>
+			</form>
+		</div>
+	</div>
+
+	{#if form?.error}
+		<div class="mb-6 border-l-4 border-red-500 bg-red-50 p-4">
+			<p class="text-red-700">{form.error}</p>
+		</div>
+	{/if}
+
+	<div class="overflow-hidden rounded-md border border-neutral-200">
+		<table class="w-full border-collapse text-left">
+			<thead>
+				<tr
+					class="border-b border-neutral-200 bg-neutral-50 text-sm tracking-wider text-neutral-500 uppercase"
+				>
+					<th class="px-6 py-3 font-medium">Title</th>
+					<th class="px-6 py-3 font-medium">ID / URL</th>
+					<th class="px-6 py-3 font-medium">Status</th>
+					<th class="px-6 py-3 text-right font-medium">Actions</th>
+				</tr>
+			</thead>
+			<tbody class="divide-y divide-neutral-200 text-neutral-800">
+				{#each data.pages as page}
+					<tr
+						class="group border-b border-neutral-100 transition-colors last:border-0 hover:bg-neutral-50"
+					>
+						<td class="px-6 py-4 font-medium">{page.title}</td>
+						<td class="px-6 py-4 font-mono text-sm text-neutral-500">
+							<a href="/{page.document_id}" class="hover:text-blue-600 hover:underline">
+								/{page.document_id}
+							</a>
+						</td>
+						<td class="px-6 py-4">
+							{#if page.status === 'public'}
+								<span
+									class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800"
+								>
+									Public
+								</span>
+							{:else}
+								<span
+									class="inline-flex items-center rounded-full bg-neutral-100 px-2.5 py-0.5 text-xs font-medium text-neutral-800"
+								>
+									Draft
+								</span>
+							{/if}
+						</td>
+						<td class="px-6 py-4 text-right">
+							<div class="flex justify-end gap-3">
+								<a
+									href="/{page.document_id}"
+									class="text-sm font-medium text-blue-600 hover:text-blue-800"
+								>
+									Edit
+								</a>
+								{#if page.document_id !== data.home_page_id}
+									<form
+										method="POST"
+										action="?/delete"
+										onsubmit={(e) =>
+											!confirm('Are you sure you want to delete this page?') && e.preventDefault()}
+									>
+										<input type="hidden" name="id" value={page.document_id} />
+										<button
+											type="submit"
+											class="text-sm font-medium text-red-600 hover:text-red-800"
+										>
+											Delete
+										</button>
+									</form>
+								{/if}
+							</div>
+						</td>
+					</tr>
+				{/each}
+
+				{#if data.pages.length === 0}
+					<tr>
+						<td colspan="4" class="py-8 text-center text-neutral-500">No pages found.</td>
+					</tr>
+				{/if}
+			</tbody>
+		</table>
+	</div>
+</div>
diff --git a/src/routes/tailwind_theme.js b/src/routes/tailwind_theme.js
index 4f60ef31..4976c61a 100644
--- a/src/routes/tailwind_theme.js
+++ b/src/routes/tailwind_theme.js
@@ -1,10 +1,11 @@
 // Shared Tailwind class constants for consistent spacing across the site.
 // Change these values to update page margins and related spacing globally.
 
-export const TW_LIMITER = 'mx-auto max-w-7xl'; // px-2 md:px-4 lg:px-6 xl:px-8
+export const TW_LIMITER = 'mx-auto max-w-9xl'; // px-2 md:px-4 lg:px-6 xl:px-8
 export const TW_PAGE_PADDING_X = 'px-5 sm:px-7 md:px-10 lg:px-14';
 // Leaves a bit more bottom padding on mobile
-export const TW_BLOCK_PADDING_Y = 'pt-10 sm:pt-14 pb-20 sm:pb-24 md:pt-16 md:pb-28 lg:pt-20 lg:pb-32';
+export const TW_BLOCK_PADDING_Y =
+	'pt-10 sm:pt-14 pb-20 sm:pb-24 md:pt-16 md:pb-28 lg:pt-20 lg:pb-32';
 // When you want to sync vertical padding with the horizontal page padding
 export const TW_PAGE_PADDING = 'p-5 sm:p-7 md:p-10 lg:p-14';
 // Extra insert on mobile, to visualize "right-orientation" on mobile
diff --git a/static/assets/footer-bg.jpg b/static/assets/footer-bg.jpg
new file mode 100644
index 00000000..62885232
Binary files /dev/null and b/static/assets/footer-bg.jpg differ
diff --git a/svelte.config.js b/svelte.config.js
index fcf1169d..b107f970 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -9,7 +9,7 @@ const config = {
 		adapter: adapter(),
 		experimental: {
 			remoteFunctions: true
-		},
+		}
 		// alias: {
 		// 	'svedit': '../svedit/src/lib/index.js',
 		// }