diff --git a/.github/workflows/fork-image.yml b/.github/workflows/fork-image.yml
new file mode 100644
index 000000000..ff47daa80
--- /dev/null
+++ b/.github/workflows/fork-image.yml
@@ -0,0 +1,43 @@
+name: Fork staging image
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main, chore/mittwald-staging]
+
+permissions:
+  contents: read
+  packages: write
+
+concurrency:
+  group: fork-image-${{ github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  image:
+    if: github.repository == 'Hubertoink/Instatic'
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v4
+      - uses: docker/setup-buildx-action@v3
+      - uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Build and publish fork image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: linux/amd64
+          push: true
+          tags: ghcr.io/hubertoink/instatic:staging-${{ github.sha }}
+          labels: |
+            org.opencontainers.image.source=https://github.com/Hubertoink/Instatic
+            org.opencontainers.image.url=https://github.com/Hubertoink/Instatic
+          build-args: |
+            INSTATIC_VERSION=staging-${{ github.sha }}
+            INSTATIC_REVISION=${{ github.sha }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
diff --git a/docs/deployment/hochstaett-fork.md b/docs/deployment/hochstaett-fork.md
new file mode 100644
index 000000000..b418f53da
--- /dev/null
+++ b/docs/deployment/hochstaett-fork.md
@@ -0,0 +1,70 @@
+# Hochstaett deployment fork
+
+This fork preserves the locally tested CMS customizations used by the Hochstaett site.
+
+- Fork: https://github.com/Hubertoink/Instatic
+- Upstream: https://github.com/CoreBunch/Instatic
+- Initial integration branch: `feat/hochstaett-deployment-baseline`
+- Upstream base: `f92e8dc1` (0.0.20)
+
+## Source and runtime data
+
+Git contains application code, tests and documentation. Website content lives in
+the CMS database and uploads volume. Database files, uploaded media, backups,
+environment files and secret keys are not deployment source and must be
+transferred separately through a private backup/restore process.
+
+The integration branch includes relation/repeater loops, preview improvements,
+publication-date handling, animation presets, and content image sizing,
+lightbox and link insertion. Review these local changes through the fork's draft
+pull request before merging; the integration branch is not a production release.
+
+## Git remotes
+
+`origin` points to this fork; `upstream` points to CoreBunch. Feature branches
+and pull requests belong to the fork unless a contribution to CoreBunch is
+explicitly intended.
+
+```sh
+git clone https://github.com/Hubertoink/Instatic.git
+cd Instatic
+git remote add upstream https://github.com/CoreBunch/Instatic.git
+git switch --track origin/feat/hochstaett-deployment-baseline
+```
+
+Fetch upstream updates and integrate them on a separate review branch. Do not
+reset the fork to upstream when preserving these customizations.
+
+## Container handoff
+
+Build the image from the reviewed fork commit:
+
+```sh
+docker build -t instatic-hochstaett:staging .
+```
+
+The fork image workflow, `.github/workflows/fork-image.yml`, builds Linux amd64
+images on pushes to `main` and `chore/mittwald-staging`, and supports manual
+dispatch after merging. Images are tagged
+`ghcr.io/hubertoink/instatic:staging-<full-commit-sha>`. The Docker build runs
+TypeScript checking and the production frontend build. It does not run tests
+or lint; those remain separate verification steps.
+
+The upstream release workflow still targets `ghcr.io/corebunch/instatic`;
+do not create release tags to publish fork images. The fork workflow only
+publishes images and does not change a running Mittwald container.
+
+Mittwald needs an image available in a registry, persistent storage, HTTPS
+routing and the application environment described in [docker-image.md](docker-image.md).
+For a copy of the existing SQLite installation, preserve the data and uploads
+volumes and its secret encryption key using [backup-restore.md](backup-restore.md).
+
+Publishing inside a local CMS instance does not deploy that instance to Mittwald.
+An online staging instance publishes to its own staging site.
+
+## Validation at initial handoff
+
+The production Docker build (TypeScript and Vite), ESLint, targeted content tests,
+and desktop/mobile lightbox checks passed locally. The full Windows test run
+was not green; unrelated architecture, platform and UI failures remain for
+review. Consult the draft pull request for the handoff results.
diff --git a/docs/editor.md b/docs/editor.md
index 8ed3fdb9b..176bb45da 100644
--- a/docs/editor.md
+++ b/docs/editor.md
@@ -8,6 +8,9 @@ The frontend is a single React 19 + Vite SPA mounted at `/admin`. Inside it, two
 
 ## TL;DR
 
+- **Entrance animations:** select a class, then **Styles → Effects → Animation** to choose Fade in, Slide up/down/from left/from right, or Zoom in. Duration, delay (milliseconds), and easing are editable. Choose Trigger: On load or On scroll into view. Scroll effects run once when the element intersects the viewport; the configured delay starts at that point. Design mode keeps scroll effects visible for editing; Live mode and published pages use the same IntersectionObserver runtime, including entries inserted by loops. Without JavaScript/Web Animations support, or with reduced motion, scroll content remains visible. None disables an inherited animation; Inherited clears the local value. Custom CSS preserves arbitrary imported animation shorthands. Preset keyframes are emitted by the shared canvas/publisher class-CSS generator only when used. Reduced-motion preferences keep content visible without entrance movement, including during delays.
+- **Local links:** the URL control accepts `/page#section`, `#section`, `./page`, `../page`, query references, and `tel:` as well as HTTP(S)/mailto links. Protocol-relative URLs and unsafe schemes remain rejected.
+
 - **Entry:** `src/admin/main.tsx` mounts `<Router><AdminRoutes /></Router><AdminContextMenuGuard />` with React 19 root-level error callbacks. `flushSync` forces the initial render synchronous to cut LCP.
 - **Router:** `src/admin/lib/routing/` — in-house router replacing `react-router-dom`. Ten workspace/page routes are wrapped in a per-route `<ErrorBoundary>` and `<Suspense>`, with root redirects plus a final `path="/admin/*"` catch-all redirecting unknown admin URLs to `/admin/dashboard` (login form when unauthenticated) instead of rendering an empty tree. Public-site 404s are NOT claimed — the publish pipeline's NotFound handling owns those.
 - **Cold path:** entry chunk is tiny. `AuthenticatedAdmin` is `React.lazy` and only loads post-login. Each workspace page is wrapped in `prewarmedLazy(...)`: the active page fires its import at module evaluation; the remaining pages pre-warm via `requestIdleCallback` after first paint so subsequent nav is synchronous (no Suspense flicker).
@@ -337,6 +340,7 @@ The store is composed of **12 slices**, each created by a factory in `store/slic
 | `selectionSlice`       | `selectedNodeId`, `hoveredNodeId`                                          |
 | `canvasSlice`          | Zoom, pan, `activeBreakpointId`, `activeConditionId`, `canvasMode` ('select'|'pan'|'insert'), `canvasView` ('design'|'live'), `runScripts` |
 | `uiSlice`              | Site editor panel visibility, unsaved-changes flag, insert picker, `componentizeEditorRequest` |
+| `previewSelectionSlice` | Session-only template and component preview source selections |
 | `classSlice`           | Style-rule CRUD, node ↔ class assignment, ambient selector creation         |
 | `filesSlice`           | `SiteFile` CRUD                                                            |
 | `visualComponentsSlice`| Visual Component CRUD                                                      |
@@ -390,6 +394,14 @@ Selectors are pure reads. Mutations go through actions (`useEditorStore.getState
 
 ### 1. Design mode and live mode
 
+Native `details`/`summary` accordions can be opened and closed by clicking their
+summary in either view, or with Enter/Space while the summary is focused.
+Selection still works normally. Selecting a layer inside a collapsed body
+reveals its ancestor accordions automatically. This state belongs only to the
+rendered editor frame: it does not change the page tree, collaboration document,
+undo history, or the published initial `open` attribute. Reloading the editor
+restores the authored state. Read-only composed regions are not toggled.
+
 `CanvasRoot` switches between two rendering surfaces based on `canvasView`:
 
 - **Design mode** (`canvasView === 'design'`): `CanvasRoot` → `CanvasTransformLayer` → `BreakpointFrame` → `IframeFrameSurface` → `NodeRenderer`. Each breakpoint gets its own iframe rendered side-by-side inside the pan/zoom transform layer. The author sees all breakpoints at once and can zoom in/out. The canvas opens at 50% (`INITIAL_ZOOM`) so several frames fit in view; reset (Cmd/Ctrl+0, the toolbar % button) goes to 100% (`RESET_ZOOM`).
@@ -788,3 +800,4 @@ See [docs/features/plugin-system.md](features/plugin-system.md) for the plugin S
   - `src/__tests__/architecture/canvas-aware-selectors.test.ts`
   - `src/__tests__/architecture/spotlight-no-direct-store-mutation.test.ts`
   - `src/__tests__/architecture/keybindings-registry-single-source.test.ts`
+
diff --git a/docs/features/agent.md b/docs/features/agent.md
index cc3c90be2..347d10b6c 100644
--- a/docs/features/agent.md
+++ b/docs/features/agent.md
@@ -2,6 +2,10 @@
 
 The AI Agent is a model-powered assistant integrated into the Site editor and Content workspace. The shared Agent Panel owns conversation state, provider selection, streaming, history, and the browser bridge; each workspace supplies its own snapshot builder and tool executor.
 
+Relation and repeater catalogs are exposed through the existing tools. `site_list_loop_sources` preserves relation `targetTableSlug` and `allowMultiple`, media metadata, and repeater item fields with their binding tokens. An `entry.field` loop uses `<instatic-loop data-source-id="entry.field" data-field-id="teammembers" data-direction="asc">...</instatic-loop>` inside an entry context. Relation children bind the target table's fields; repeater children bind item fields. The HTML importer preserves the selected field and defaults contextual loops to authored order.
+
+`content_get_collection_schema` includes relation target table IDs/cardinality and repeater item schemas (including select option IDs). Content writes use bare row ID strings or `null` for single relations and string arrays for multi-relations; media uses the same shape with asset IDs. Repeaters use ordered `{ id, cells }` items. The Content bridge edits post-type entries; schema management and a Data-workspace toolset are not provided.
+
 In the Site editor, the agent reads the current page snapshot, plans a sequence of edits, and executes them by calling tools. Structure is written as semantic HTML (`site_insert_html` / `site_replace_node_html`); styling is written as CSS — a `<style>` block and/or `class=` attributes inside the insert, or the dedicated `site_apply_css` tool for authoring/editing any CSS on its own. There is one CSS path and it accepts every selector; `site_assign_class` / `site_remove_class` attach existing classes to nodes.
 
 In the Content workspace, the agent works against content collections and entries. It reads collection schemas and document state server-side, then mutates the live content editor through a browser bridge so the open draft, Tiptap body editor, and sidebar selection stay authoritative.
diff --git a/docs/features/content-workspace.md b/docs/features/content-workspace.md
index 9db04a222..80fef8ad3 100644
--- a/docs/features/content-workspace.md
+++ b/docs/features/content-workspace.md
@@ -12,6 +12,10 @@ The Content workspace renders a three-pane shell — explorer sidebar, document
 - **Body editor:** `TiptapBodyEditor` — one ProseMirror document, not a block list. Body persists as markdown text in the `body` cell.
 - **Inline marks:** bubble menu (B / I / code / strike / link). Block inserts: slash menu (`/`) + notch quick-actions.
 - **Canvas modes:** `write` (bare editor surface) and `live` (entry rendered inside its template with real site styles).
+- **Body images:** toolbar sizes Original (intrinsic width), L (content width), M (560px), S (320px), capped to the available width. Zoom uses the active button variant. Markdown titles persist size and lightbox metadata; stored `size=sm` maps to M.
+- **Link insertion:** the block-options menu opens `InsertLinkDialog` for link text and a safe target URL. Both link editors offer the media library (all file types) and Open/Download. Download links store the reserved Markdown title `instatic:download` and publish with the HTML `download` attribute; browsers support forced downloads for same-origin media.
+- **Text alignment:** paragraph and heading alignment persists through the Markdown bridge as restricted `<p align="center">…</p>` / `<h2 align="right">…</h2>` wrappers. Their contents remain Markdown; the publisher emits semantic elements with `instatic-content-align--*` classes backed by `publisher/reset.ts`, surviving rich-text sanitization. Alignment-only edits therefore mark the entry dirty and can be published.
+- **Lightbox runtime:** `src/core/imageLightboxRuntime.ts` opens a native modal dialog in a shadow root to isolate it from site styles. Fade/scale animation respects reduced motion; closing by Escape, backdrop or the high-contrast button restores scroll and focus without fragment navigation. The publisher includes the same-origin runtime for lightbox content and deferred fragments. Without JavaScript the link opens the image file.
 - **Settings panel:** `ContentSettingsPanel` — entry-specific; hidden when no entry is selected. Reopened via the top-right notch when collapsed.
 - **Hooks:** `useContentWorkspace` (CRUD + selection), `useContentEntryDraft` (field state + save/publish), `useContentMediaPicker` (media modal + featured media).
 - **AI assistant:** `ContentAgentMount` docks the shared Agent Panel in the content rail. `useContentToolBridge`, mounted by `ContentPage`, exposes the live workspace to both the built-in agent and scoped MCP relay even when the panel is closed, so writes mutate the open draft/editor state rather than stale database rows.
@@ -195,3 +199,17 @@ Body content is exchanged with the model as markdown. The browser bridge convert
   - `src/admin/pages/content/hooks/useContentEntryDraft.ts` — field draft state
   - `src/core/markdown/markdownDocument.ts` — markdown ↔ ProseMirror round-trip
   - `src/admin/layouts/AdminWorkspaceCanvasLayout/AdminWorkspaceCanvasLayout.tsx` — workspace shell + notch
+
+---
+
+# Post publication dates
+
+The seeded **Posts** collection includes an editable `date` field labelled
+**Publication date**. Existing installations add it through migration 031 and
+backfill existing posts and published versions from their stored publication
+timestamp. Publishing a post with an empty date fills the current calendar day;
+an author-entered date is preserved. Site loops can order posts by this value
+with `orderBy: "cell:date"`, which keeps imported or intentionally backdated
+posts in editorial order instead of the order in which they were migrated.
+Migration 032 also recognises the opening `**Veröffentlicht am DD.MM.YYYY.**`
+line used by archive imports and restores that original date automatically.
diff --git a/docs/features/data-workspace.md b/docs/features/data-workspace.md
index 899d21769..36bb5e546 100644
--- a/docs/features/data-workspace.md
+++ b/docs/features/data-workspace.md
@@ -131,6 +131,12 @@ the ordinary row draft. Nested relation and media fields reuse their shared
 pickers. Multi-media fields place `MediaPickerModal` in true multi-selection
 mode: plain clicks toggle assets and the footer commits the entire selection.
 
+Relation pickers show checkboxes for multiple selection, a selection count, and
+the target entry's display title and publication status. Confirm commits the
+selection; Cancel leaves the stored value unchanged. Relation editor fields
+show the selected names in relation order, with the full list in a tooltip when
+space is limited. Titles use the target table's configured primary field.
+
 When a repeater contains exactly one single-value media field,
 `MediaRepeaterGallery.tsx` replaces the generic structured-item cards with the
 Media workspace presentation. It renders the shared `AssetTile` / `AssetRow`
diff --git a/docs/features/html-import.md b/docs/features/html-import.md
index 7cb7bf493..6e92c3e84 100644
--- a/docs/features/html-import.md
+++ b/docs/features/html-import.md
@@ -96,7 +96,7 @@ Callers splice the fragment into the page tree via `insertImportedNodes(parentId
 | Selector | Module | Props set | Recurse |
 |---|---|---|---|
 | `instatic-outlet` | `base.outlet` | none (the CMS content outlet) | **No** |
-| `instatic-loop` | `base.loop` | `sourceId`, `filters.tableId`, `orderBy`, `direction`, `limit`, `offset`, `pagination`, `pageSize`, optional `tag` / `customTag` from `data-*` attrs | Yes |
+| `instatic-loop` | `base.loop` | `sourceId`, `filters.tableId`, `filters.fieldId`, `orderBy`, `direction`, `limit`, `offset`, `pagination`, `pageSize`, optional `tag` / `customTag` from `data-*` attrs | Yes |
 | `h1`–`h6`, `p`, `span`, `small`, `strong`, `em` | `base.text` | `text` = `el.textContent`, `tag` = tag name | No |
 | `a` with class `btn` | `base.button`, or `base.link` when it wraps element children | `label` (`text` on `base.link`) = `el.textContent`, `href`, `target` | No for text-only; yes when it wraps elements |
 | `a` (no `btn` class) | `base.link` | `text` = `el.textContent`, `href`, `target` | No for text-only; yes when it wraps elements |
@@ -117,7 +117,7 @@ Callers splice the fragment into the page tree via `insertImportedNodes(parentId
 **Key details:**
 
 - **`<instatic-outlet>` → `base.outlet`.** The custom element marks where matched content flows in a CMS template. It maps to a childless `base.outlet` node (any inner markup is ignored — the composer fills it). This rule lets the AI agent and hand-authored template HTML place the single content outlet inline via the normal import path. See [templates.md](templates.md) and [agent.md](agent.md).
-- **`<instatic-loop>` → `base.loop`.** The custom element lets the AI agent and hand-authored snippets create a real Loop through the same HTML import path. Children recurse normally and become loop variants. Loop configuration is read from attributes: `data-source-id`, `data-table-id` (stored as `filters.tableId`), `data-order-by`, `data-direction`, `data-limit`, `data-offset`, `data-pagination`, `data-page-size`, and optional `data-tag` / `data-custom-tag`. See [loops.md](loops.md) and [agent.md](agent.md).
+- **`<instatic-loop>` → `base.loop`.** The custom element lets the AI agent and hand-authored snippets create a real Loop through the same HTML import path. Children recurse normally and become loop variants. Loop configuration is read from attributes: `data-source-id`, `data-table-id` (stored as `filters.tableId`), `data-field-id` (stored as `filters.fieldId` for contextual relation/repeater loops), `data-order-by`, `data-direction`, `data-limit`, `data-offset`, `data-pagination`, `data-page-size`, and optional `data-tag` / `data-custom-tag`. Without an explicit direction, `entry.field` loops preserve authored order (`asc`); other sources default to `desc`. See [loops.md](loops.md) and [agent.md](agent.md).
 - `base.text` uses `tag` (not a separate `level` or heading prop) — the tag name is passed through directly. Imported bare DOM text uses `tag: 'none'`, which publishes text without an element wrapper.
 - **Direct text inside a recursing container is preserved.** The walker iterates `childNodes` (not just `children`): element children route through the rules, and each significant text node becomes a synthesized `base.text` child with `tag: 'none'` in document order. That no-wrapper text mode publishes back to bare text, so `<div class="num">98%</div>` and `<li>Buy milk</li>` import as containers holding their original text without adding selector-visible wrapper elements. Whitespace-only text (indentation between tags) is skipped; internal whitespace runs collapse to single spaces, and boundary spaces are kept when the text run sits between element siblings.
 - **`<body>` metadata is preserved separately.** Classes, safe HTML attributes (`id`, ARIA, `data-*`, etc.), and harvested inline styles on `<body>` are returned as `fragment.body` rather than inserted into `rootIds`. Full-site import applies them to `base.body`; paste-style HTML import can ignore them without changing the fragment structure.
diff --git a/docs/features/loops.md b/docs/features/loops.md
index b18364eda..9343df2c9 100644
--- a/docs/features/loops.md
+++ b/docs/features/loops.md
@@ -167,12 +167,44 @@ Projects loop
 ```
 
 The Properties panel offers collection fields from the current entry table:
-multi-media, multi-relation, and multi-select fields. Primitive items are
+repeater, multi-media, multi-relation, and multi-select fields. Primitive items are
 available as `currentEntry.value`; object-array members are exposed by key.
 Media ids are resolved through the publisher's batched media prefetch and
 provide `currentEntry.src`, `url`, `path`, `altText`, `mimeType`, `width`, and
 `height`.
 
+Multi-relations resolve to the referenced table's entries: an Offers loop can
+contain `Current entry field → teammembers`, whose Text and Image children bind
+to the Team table's name, function, and image fields. The field picker follows
+the relation's target table, including further nested relation loops.
+
+Repeater fields are also available under **Current entry field**. For example,
+an Offers loop can contain a second loop over `weeklySlots`. Its binding picker
+offers the repeater's item fields (`weekday`, `startTime`, `endTime`), and a Text
+child can render `{currentEntry.weekday}: {currentEntry.startTime}–{currentEntry.endTime}`.
+Stored `{ id, cells }` items expose their cells directly on the current entry;
+the stable item ID and original object (`value`) are retained. Multiple items
+render in authored order, independently for each offer, and empty fields render
+no items. The same projection runs in the canvas and publisher.
+Select and multi-select fields inside repeater items resolve stored option IDs
+to their display labels. Binding tokens use field IDs, which can differ from
+the displayed label; use the picker to insert the correct token.
+Individual entry routes and draft/branch previews apply the same schema-based
+cell projection before seeding the entry stack, including repeater media URLs.
+
+The server loads only referenced row IDs in batches, using the ordinary row/media
+projection. Post-type targets use published versions on public pages; branch
+previews use that branch's draft rows. Deleted, missing, and unavailable targets
+are omitted before direction/offset/limit are applied. Empty relations render no
+items. Stored relation IDs are unchanged. Prefetch follows the finite layout's
+loop ancestry (also inside visual components), so cyclic content relations do not
+cause recursive data expansion. Entry-template routes seed the same prefetch
+with their current entry. The canvas requests the same projection through
+`loop-preview` with an exact `rowIds` JSON array (up to 200 IDs per request).
+When an outer loop loads another page, the load-more endpoint seeds
+`prefetchLoopData` with that fetched slice and resolves its descendant loops.
+Nested relations therefore use the newly loaded entries and retain their fields.
+
 Contextual loops preserve authored order by default, can reverse/slice with
 direction/offset/limit, and do not support infinite pagination. Infinite
 fragments are independent requests and cannot recover an arbitrary outer
diff --git a/docs/features/templates.md b/docs/features/templates.md
index 6b5042df6..b5df656e6 100644
--- a/docs/features/templates.md
+++ b/docs/features/templates.md
@@ -15,6 +15,7 @@ A template is an ordinary `pages` row carrying a `target` (everywhere, one/more
 - **`base.outlet`** is the polymorphic outlet content flows into. A template *should* contain one. Having NO outlet is not blocked (you add it after converting the page to a template — requiring it first would be circular). The editor enforces a one-outlet-per-document invariant at the store's mutation chokepoints (`insertNode`, `duplicateNode(s)`, `pasteNode`), each surfacing a warning toast when blocked; the module pickers additionally render the outlet as a disabled tile with the reason (non-template page, VC mode, or outlet already placed) so authors rarely hit the block at all. The composer remains defensive for data pre-dating the guard: no outlet → template skipped; multiple → first wins.
 - Template pages are never served at their own slug; the live router and the static bake both skip them.
 - Dynamic bindings and token interpolation work exactly as before — the merged tree is a plain page tree.
+- Date-only ISO fields can be displayed with `{currentEntry.datum:date(de-DE,full)}` (for example, `Freitag, 18. September 2026`). The supported date styles are `full`, `long`, `medium`, and `short`; the locale is explicit. Formatting uses UTC calendar dates, leaves the stored value unchanged, and uses the normal `|fallback` for missing or invalid dates.
 - **`templateTargetLabel(page)`** returns a short human-readable string for a template's target (e.g. `"Everywhere"` or `"posts, news"`); import from `@core/templates`.
 
 ---
diff --git a/docs/features/visual-components.md b/docs/features/visual-components.md
index 28f442e7a..0e542c548 100644
--- a/docs/features/visual-components.md
+++ b/docs/features/visual-components.md
@@ -18,6 +18,14 @@ A VC **is** a `NodeTree<VCNode>` (structurally identical to `NodeTree<BaseNode>`
 
 ---
 
+## CMS data in the editor
+
+A component inside a Loop inherits that iteration's `currentEntry` in Design mode, including through nested component references and read-only template content. A single-card component does not need another Loop: the page's Loop chooses the rows; the component renders one row. A component can contain a Loop when the reusable unit is an entire list or when it renders a nested relation.
+
+When editing a component separately, **Preview data** lets the author select a table and a published example entry. Empty tables use schema-generated example content. The selection is session-only, keyed by component ID, and never changes the component definition or its live data source. Clearing the selection removes the example context. The full Preview overlay also renders the selected component with this context. A standalone media token such as `{currentEntry.featuredMedia}` is accepted by the media control without attempting to load the literal token as an image URL.
+
+---
+
 ## Data model
 
 ### `VisualComponent` (the source-of-truth schema)
diff --git a/server/ai/tools/content/readTools.test.ts b/server/ai/tools/content/readTools.test.ts
index 93c83dbed..c87f18823 100644
--- a/server/ai/tools/content/readTools.test.ts
+++ b/server/ai/tools/content/readTools.test.ts
@@ -15,6 +15,33 @@ describe('content read tools', () => {
     await harness.cleanup()
   })
 
+  it('exposes writable relation and repeater item schemas', async () => {
+    await createDataTable(harness.db, MAIN_SCOPE, {
+      id: 'offers', name: 'Offers', slug: 'offers', kind: 'postType', routeBase: '/offers',
+      singularLabel: 'Offer', pluralLabel: 'Offers',
+      fields: [
+        { id: 'members', label: 'Members', type: 'relation', targetTableId: 'posts', allowMultiple: true },
+        { id: 'slots', label: 'Slots', type: 'repeater', itemLabelFieldId: 'weekday', fields: [
+          { id: 'weekday', label: 'Weekday', type: 'select', options: [{ id: 'mon', label: 'Monday', value: 'monday' }] },
+          { id: 'member', label: 'Member', type: 'relation', targetTableId: 'posts' },
+        ] },
+      ],
+    })
+    const tool = contentReadTools.find((candidate) => candidate.name === 'content_get_collection_schema')
+    if (!tool?.handler) throw new Error('content_get_collection_schema handler is missing')
+    const result = await tool.handler({ tableId: 'offers' }, {
+      db: harness.db, userId: 'owner', capabilities: ['data.custom.tables.read'], scope: 'content',
+      branch: MAIN_SCOPE, conversationId: 'test', snapshot: null, signal: new AbortController().signal,
+    })
+    expect(result).toMatchObject({ collection: { fields: expect.arrayContaining([
+      expect.objectContaining({ id: 'members', targetTableId: 'posts', allowMultiple: true }),
+      expect.objectContaining({ id: 'slots', itemLabelFieldId: 'weekday', fields: [
+        expect.objectContaining({ id: 'weekday', options: [{ value: 'mon', label: 'Monday' }] }),
+        expect.objectContaining({ id: 'member', targetTableId: 'posts', allowMultiple: false }),
+      ] }),
+    ]) } })
+  })
+
   it('keeps collection discovery aligned with the Content workspace', async () => {
     await createDataTable(harness.db, MAIN_SCOPE, {
       id: 'projects',
diff --git a/server/ai/tools/content/readTools.ts b/server/ai/tools/content/readTools.ts
index 5253de60e..ae2233400 100644
--- a/server/ai/tools/content/readTools.ts
+++ b/server/ai/tools/content/readTools.ts
@@ -77,7 +77,7 @@ function projectCollection(table: DataTableListItem) {
   }
 }
 
-function projectField(field: DataField) {
+function projectLeafField(field: DataField) {
   // Discriminated union — pick the keys an agent actually consumes.
   const base = {
     id: field.id,
@@ -106,6 +106,18 @@ function projectField(field: DataField) {
   return base
 }
 
+function projectField(field: DataField) {
+  const projected = projectLeafField(field)
+  if (field.type === 'repeater') {
+    return {
+      ...projected,
+      fields: field.fields.map(projectLeafField),
+      itemLabelFieldId: field.itemLabelFieldId,
+    }
+  }
+  return projected
+}
+
 function projectRow(row: DataRow) {
   return {
     id: row.id,
diff --git a/server/ai/tools/content/systemPrompt.ts b/server/ai/tools/content/systemPrompt.ts
index d103bf1bd..69724a904 100644
--- a/server/ai/tools/content/systemPrompt.ts
+++ b/server/ai/tools/content/systemPrompt.ts
@@ -31,10 +31,11 @@ Writing:
     date / dateTime → ISO string
     select → option id (string)
     multiSelect → option ids (string[])
-    media (single) → { id: string }
-    media (multi) → { id: string }[]
-    relation (single) → { rowId: string }
-    relation (multi) → { rowId: string }[]
+    media (single) → asset id string or null
+    media (multi) → asset id strings (string[])
+    relation (single) → row id string or null
+    relation (multi) → row id strings (string[])
+    repeater → { id: string, cells: Record<itemFieldId, value> }[]; retain existing item ids when editing; use the returned item schema for cell values
     body → markdown string
 - content_set_document_fields(documentId, fields) — batch write; prefer this when generating a whole post.
 - content_set_document_status(documentId, status, scheduledAt?) — draft / unpublished / published / scheduled.
@@ -52,6 +53,7 @@ Media + users:
 Other:
 - Field ids are stable (title, slug, body, featuredMedia, seoTitle, seoDescription, plus custom). Use them verbatim; case-sensitive.
 - Don't invent option ids for select fields — read the schema first.
+- For relations, read targetTableId and allowMultiple from content_get_collection_schema. Use content_list_documents with targetTableId to find real target row ids; content_get_document reads their fields. Store bare ids, never { rowId } objects. Clear a single relation with null and a multi-relation with [].
 - content_create_document success data includes the new id as documentId.
 - On tool error: read the message and retry with corrected input.
 
diff --git a/server/ai/tools/content/writeTools.ts b/server/ai/tools/content/writeTools.ts
index c6e553aee..ea4193026 100644
--- a/server/ai/tools/content/writeTools.ts
+++ b/server/ai/tools/content/writeTools.ts
@@ -125,7 +125,7 @@ const setDocumentFieldTool: AiTool = {
   execution: 'browser',
   requiredCapabilities: DOCUMENT_EDIT_CAPS,
   description:
-    "Write one field on a document. The document MUST be the active one — call content_set_active_document first, or the write is refused. (content_create_document leaves the new document active, so create-then-fill needs no extra call.) `value` shape depends on the field type (read content_get_collection_schema first if unsure): text/longText/richText/url/email → string; number → number; boolean → boolean; date/dateTime → ISO string; select → option id; multiSelect → option id[]; media → { id } or { id }[]; relation → { rowId } or { rowId }[]; body → markdown string. Bridge converts markdown ↔ Tiptap automatically for body.",
+    "Write one field on a document. The document MUST be the active one — call content_set_active_document first, or the write is refused. (content_create_document leaves the new document active, so create-then-fill needs no extra call.) `value` shape depends on the field type (read content_get_collection_schema first if unsure): text/longText/richText/url/email → string; number → number; boolean → boolean; date/dateTime → ISO string; select → option id; multiSelect → option id[]; media → asset id string or null (single), string[] (multi); relation → row id string or null (single), string[] (multi); repeater → { id: string, cells: Record<itemFieldId, value> }[] using the item schema and preserving existing item ids; body → markdown string. Use actual target row ids for relations, never { rowId } objects. Bridge converts markdown ↔ Tiptap automatically for body.",
   inputSchema: SetDocumentFieldInput,
 }
 
diff --git a/server/ai/tools/site/readTools.test.ts b/server/ai/tools/site/readTools.test.ts
index bdc8f3cc2..270ab5c00 100644
--- a/server/ai/tools/site/readTools.test.ts
+++ b/server/ai/tools/site/readTools.test.ts
@@ -15,6 +15,50 @@ describe('site read tools', () => {
     await harness.cleanup()
   })
 
+  it('exposes relation targets and repeater item bindings for contextual loops', async () => {
+    await createDataTable(harness.db, MAIN_SCOPE, {
+      id: 'team', name: 'Team', slug: 'team-members', kind: 'data',
+      singularLabel: 'Member', pluralLabel: 'Members',
+      fields: [{ id: 'role', label: 'Role', type: 'text' }],
+    })
+    await createDataTable(harness.db, MAIN_SCOPE, {
+      id: 'offers', name: 'Offers', slug: 'offers', kind: 'data',
+      singularLabel: 'Offer', pluralLabel: 'Offers',
+      fields: [
+        { id: 'members', label: 'Members', type: 'relation', targetTableId: 'team', allowMultiple: true },
+        { id: 'lead', label: 'Lead', type: 'relation', targetTableId: 'team', allowMultiple: false },
+        { id: 'slots', label: 'Slots', type: 'repeater', itemLabelFieldId: 'weekday', fields: [
+          { id: 'weekday', label: 'Weekday', type: 'text' },
+          { id: 'member', label: 'Member', type: 'relation', targetTableId: 'team', allowMultiple: false },
+          { id: 'photo', label: 'Photo', type: 'media', mediaKind: 'image', allowMultiple: false },
+        ] },
+      ],
+    })
+    const tool = siteReadTools.find((candidate) => candidate.name === 'site_list_loop_sources')
+    if (!tool?.handler) throw new Error('site_list_loop_sources handler is missing')
+    const result = await tool.handler({}, {
+      db: harness.db, userId: 'owner', capabilities: ['site.read'], scope: 'site',
+      branch: MAIN_SCOPE, conversationId: 'test', snapshot: null, signal: new AbortController().signal,
+    })
+    expect(result).toMatchObject({
+      sources: expect.arrayContaining([expect.objectContaining({ id: 'entry.field' })]),
+      dataTables: expect.arrayContaining([
+        expect.objectContaining({ id: 'team', slug: 'team-members', fields: expect.arrayContaining([
+          expect.objectContaining({ id: 'role', token: '{currentEntry.role}' }),
+        ]) }),
+        expect.objectContaining({ id: 'offers', fields: expect.arrayContaining([
+          expect.objectContaining({ id: 'members', targetTableSlug: 'team-members', allowMultiple: true }),
+          expect.objectContaining({ id: 'lead', targetTableSlug: 'team-members', allowMultiple: false }),
+          expect.objectContaining({ id: 'slots', itemLabelFieldId: 'weekday', fields: [
+            expect.objectContaining({ id: 'weekday', token: '{currentEntry.weekday}' }),
+            expect.objectContaining({ id: 'member', targetTableSlug: 'team-members', allowMultiple: false }),
+            expect.objectContaining({ id: 'photo', mediaKind: 'image', format: 'media', token: '{currentEntry.photo}' }),
+          ] }),
+        ]) }),
+      ]),
+    })
+  })
+
   it('lists only routable post types as template targets', async () => {
     await createDataTable(harness.db, MAIN_SCOPE, {
       id: 'projects',
diff --git a/server/ai/tools/site/readTools.ts b/server/ai/tools/site/readTools.ts
index 0a5a91398..b6c98ee65 100644
--- a/server/ai/tools/site/readTools.ts
+++ b/server/ai/tools/site/readTools.ts
@@ -145,12 +145,13 @@ const ListLoopSourcesInput = Type.Object({})
 
 type AgentBindingFormat = NonNullable<LoopSourceField['format']>
 
-interface AgentBindingField {
+interface AgentBindingField extends Omit<Partial<DataMetaField>, 'fields'> {
   id: string
   label: string
   token: string
   format?: AgentBindingFormat
   type?: DataMetaField['type']
+  fields?: AgentBindingField[]
 }
 
 function currentEntryToken(fieldId: string): string {
@@ -181,10 +182,10 @@ function dataMetaFieldFormat(field: DataMetaField): AgentBindingFormat | undefin
 
 function dataMetaFieldToAgentField(field: DataMetaField): AgentBindingField {
   const format = dataMetaFieldFormat(field)
+  const { fields, ...metadata } = field
   return {
-    id: field.id,
-    label: field.label,
-    type: field.type,
+    ...metadata,
+    ...(fields ? { fields: fields.map(dataMetaFieldToAgentField) } : {}),
     token: currentEntryToken(field.id),
     ...(format ? { format } : {}),
   }
@@ -222,6 +223,8 @@ const listLoopSourcesTool: AiTool = {
     return {
       usage: {
         loopElement: '<instatic-loop data-source-id="data.rows" data-table-id="<table id>" data-order-by="publishedAt" data-direction="desc" data-limit="3">...</instatic-loop>',
+        entryFieldLoopElement: '<instatic-loop data-source-id="entry.field" data-field-id="<array field id>" data-direction="asc">...</instatic-loop>',
+        entryFieldBindings: 'Inside an entry.field loop, a multi-relation uses the fields of the dataTables entry matching targetTableSlug; a repeater uses its nested fields. Tokens refer to the closest enclosing entry. Repeat this lookup for nested relation loops. Only array-valued fields can be looped; single relations cannot.',
         tokenSyntax: '{currentEntry.field}',
         invalidTokenSyntax: '{{post.field}}',
       },
diff --git a/server/ai/tools/site/systemPrompt.ts b/server/ai/tools/site/systemPrompt.ts
index 8c76d284b..dd733e69e 100644
--- a/server/ai/tools/site/systemPrompt.ts
+++ b/server/ai/tools/site/systemPrompt.ts
@@ -58,6 +58,7 @@ Pages:
 
 Loops (repeated CMS/data lists):
 - To create a real loop, call site_list_loop_sources first. Use the returned source ids, data table ids, orderBy options, and tokens.
+- For a multi-relation or repeater on the current entry, nest an entry.field loop using data-field-id as shown in site_list_loop_sources. For relations, find the table whose slug equals targetTableSlug and bind its fields inside the loop; for repeaters, bind the returned item fields. Each nested loop replaces currentEntry with its own item. Preserve authored order with direction asc. Single relations are not array loop sources.
 - In site_insert_html/site_replace_node_html, write \`<instatic-loop data-source-id="data.rows" data-table-id="<table id>" data-order-by="publishedAt" data-direction="desc" data-limit="3">...</instatic-loop>\`. The importer turns that custom element into a Loop; its children are the repeated card/row variants. Never put the loop INSIDE a \`<table>\`, \`<tbody>\` or \`<tr>\` — HTML parsing does not allow a custom element there, so it is moved out of the table and stripped of its rows, and the table publishes one blank row. Wrap the whole \`<table>\` in the loop, or render the rows as a list.
 - Inside a loop, use returned tokens exactly: \`{currentEntry.title}\`, \`{currentEntry.permalink}\`, \`{currentEntry.featuredMedia}\`. NEVER use \`{{post.title}}\`, \`{{post.url}}\`, or a made-up alias; invalid tokens render literally or empty.
 
diff --git a/server/db/migrations-pg.ts b/server/db/migrations-pg.ts
index 3b9799ab5..6d3d264b4 100644
--- a/server/db/migrations-pg.ts
+++ b/server/db/migrations-pg.ts
@@ -1359,4 +1359,90 @@ export const pgMigrations: Migration[] = [
     id: '030_iso_timestamps',
     sql: 'select 1',
   },
+  {
+    // Posts need an author-editable calendar date that can be displayed and
+    // ordered independently from the technical publish timestamp. Existing
+    // rows and immutable published versions inherit their publication day.
+    id: '031_posts_publication_date',
+    sql: `
+      update data_tables
+         set fields_json = fields_json ||
+               '[{"type":"date","id":"date","label":"Publication date","description":"Date shown on the post and available for sorting."}]'::jsonb
+       where id = 'posts'
+         and not exists (
+               select 1
+                 from jsonb_array_elements(data_tables.fields_json) as field
+                where field->>'id' = 'date'
+             );
+
+      update data_rows
+         set cells_json = jsonb_set(
+               cells_json,
+               '{date}',
+               to_jsonb(to_char(coalesce(published_at, created_at), 'YYYY-MM-DD')),
+               true
+             )
+       where table_id = 'posts'
+         and deleted_at is null
+         and coalesce(cells_json->>'date', '') = '';
+
+      update data_row_versions
+         set cells_json = jsonb_set(
+               data_row_versions.cells_json,
+               '{date}',
+               to_jsonb(to_char(coalesce(data_row_versions.published_at, data_row_versions.created_at), 'YYYY-MM-DD')),
+               true
+             )
+       where exists (
+               select 1
+                 from data_rows
+                where data_rows.id = data_row_versions.row_id
+                  and data_rows.table_id = 'posts'
+             )
+         and coalesce(data_row_versions.cells_json->>'date', '') = '';
+    `,
+  },
+  {
+    // Imported archive posts can carry their original publication day in the
+    // first markdown line. Prefer that editorial date over the later import
+    // timestamp populated by migration 031.
+    id: '032_posts_publication_date_from_body',
+    sql: `
+      update data_rows
+         set cells_json = jsonb_set(
+               cells_json,
+               '{date}',
+               to_jsonb(
+                 substr(cells_json->>'body', 27, 4) || '-' ||
+                 substr(cells_json->>'body', 24, 2) || '-' ||
+                 substr(cells_json->>'body', 21, 2)
+               ),
+               true
+             )
+       where table_id = 'posts'
+         and deleted_at is null
+         and substr(cells_json->>'body', 1, 20) = '**Veröffentlicht am '
+         and substr(cells_json->>'body', 21, 10) ~ '^[0-3][0-9]\\.[0-1][0-9]\\.[12][0-9]{3}$';
+
+      update data_row_versions
+         set cells_json = jsonb_set(
+               cells_json,
+               '{date}',
+               to_jsonb(
+                 substr(cells_json->>'body', 27, 4) || '-' ||
+                 substr(cells_json->>'body', 24, 2) || '-' ||
+                 substr(cells_json->>'body', 21, 2)
+               ),
+               true
+             )
+       where exists (
+               select 1
+                 from data_rows
+                where data_rows.id = data_row_versions.row_id
+                  and data_rows.table_id = 'posts'
+             )
+         and substr(cells_json->>'body', 1, 20) = '**Veröffentlicht am '
+         and substr(cells_json->>'body', 21, 10) ~ '^[0-3][0-9]\\.[0-1][0-9]\\.[12][0-9]{3}$';
+    `,
+  },
 ]
diff --git a/server/db/migrations-sqlite.ts b/server/db/migrations-sqlite.ts
index c88159de1..646e4f793 100644
--- a/server/db/migrations-sqlite.ts
+++ b/server/db/migrations-sqlite.ts
@@ -1515,4 +1515,87 @@ export const sqliteMigrations: Migration[] = [
     id: '030_iso_timestamps',
     sql: isoTimestampRewrite030(),
   },
+  {
+    // Posts need an author-editable calendar date that can be displayed and
+    // ordered independently from the technical publish timestamp. Existing
+    // rows and immutable published versions inherit their publication day.
+    id: '031_posts_publication_date',
+    sql: `
+      update data_tables
+         set fields_json = json_insert(
+               fields_json,
+               '$[#]',
+               json('{"type":"date","id":"date","label":"Publication date","description":"Date shown on the post and available for sorting."}')
+             )
+       where id = 'posts'
+         and not exists (
+               select 1
+                 from json_each(data_tables.fields_json)
+                where json_extract(value, '$.id') = 'date'
+             );
+
+      update data_rows
+         set cells_json = json_set(
+               cells_json,
+               '$.date',
+               substr(coalesce(published_at, created_at), 1, 10)
+             )
+       where table_id = 'posts'
+         and deleted_at is null
+         and trim(coalesce(json_extract(cells_json, '$.date'), '')) = '';
+
+      update data_row_versions
+         set cells_json = json_set(
+               cells_json,
+               '$.date',
+               substr(coalesce(published_at, created_at), 1, 10)
+             )
+       where exists (
+               select 1
+                 from data_rows
+                where data_rows.id = data_row_versions.row_id
+                  and data_rows.table_id = 'posts'
+             )
+         and trim(coalesce(json_extract(cells_json, '$.date'), '')) = '';
+    `,
+  },
+  {
+    // Imported archive posts can carry their original publication day in the
+    // first markdown line. Prefer that editorial date over the later import
+    // timestamp populated by migration 031.
+    id: '032_posts_publication_date_from_body',
+    sql: `
+      update data_rows
+         set cells_json = json_set(
+               cells_json,
+               '$.date',
+               substr(json_extract(cells_json, '$.body'), 27, 4) || '-' ||
+               substr(json_extract(cells_json, '$.body'), 24, 2) || '-' ||
+               substr(json_extract(cells_json, '$.body'), 21, 2)
+             )
+       where table_id = 'posts'
+         and deleted_at is null
+         and substr(json_extract(cells_json, '$.body'), 1, 20) = '**Veröffentlicht am '
+         and substr(json_extract(cells_json, '$.body'), 21, 10)
+             glob '[0-3][0-9].[0-1][0-9].[12][0-9][0-9][0-9]';
+
+      update data_row_versions
+         set cells_json = json_set(
+               cells_json,
+               '$.date',
+               substr(json_extract(cells_json, '$.body'), 27, 4) || '-' ||
+               substr(json_extract(cells_json, '$.body'), 24, 2) || '-' ||
+               substr(json_extract(cells_json, '$.body'), 21, 2)
+             )
+       where exists (
+               select 1
+                 from data_rows
+                where data_rows.id = data_row_versions.row_id
+                  and data_rows.table_id = 'posts'
+             )
+         and substr(json_extract(cells_json, '$.body'), 1, 20) = '**Veröffentlicht am '
+         and substr(json_extract(cells_json, '$.body'), 21, 10)
+             glob '[0-3][0-9].[0-1][0-9].[12][0-9][0-9][0-9]';
+    `,
+  },
 ]
diff --git a/server/handlers/cms/data/preview.ts b/server/handlers/cms/data/preview.ts
index dd961723e..436523d1b 100644
--- a/server/handlers/cms/data/preview.ts
+++ b/server/handlers/cms/data/preview.ts
@@ -113,11 +113,12 @@ export async function handleRowPreview(
   const publicPath = buildEntryPublicPath(table.routeBase, draftPublishedRow.slug)
   const syntheticUrl = new URL(`http://localhost${publicPath}`)
   const templateContext = {
-    entryStack: [publishedDataRowToLoopItem(draftPublishedRow)],
+    entryStack: [await publishedDataRowToLoopItem(db, draftPublishedRow, scope.branchId)],
     route: buildRouteFrame(syntheticUrl.toString()),
   }
   const loopData = await prefetchLoopData(merged, snapshot.site, db, undefined, {
     branchId: scope.branchId,
+    entryStack: templateContext.entryStack,
   })
   const mediaAssets = await prefetchMediaAssets(merged, snapshot.site, registry, db, {
     templateContext,
diff --git a/server/handlers/cms/data/tables.ts b/server/handlers/cms/data/tables.ts
index 663e6e5d6..6dc534f73 100644
--- a/server/handlers/cms/data/tables.ts
+++ b/server/handlers/cms/data/tables.ts
@@ -41,6 +41,8 @@ import { slugForTable } from '@core/data/cells'
 import { slugFromTitle } from '@core/utils/slug'
 import { fetchPublishedDataRowItems } from '@core/loops/sources/dataRows'
 import { parseCellFilter } from '@core/loops/cellFilter'
+import { Type } from '@core/utils/typeboxHelpers'
+import { safeParseJson } from '@core/utils/jsonValidate'
 import { badRequest, jsonResponse, methodNotAllowed, readValidatedBody } from '../../../http'
 import { CMS_API_PREFIX, requestAuditContext } from '../shared'
 import {
@@ -389,6 +391,9 @@ async function handleTableLoopPreview(
 
   const url = new URL(req.url)
   const orderBy = url.searchParams.get('orderBy') ?? 'publishedAt'
+  const rowIdsValue = url.searchParams.get('rowIds')
+  const rowIds = rowIdsValue === null ? undefined : safeParseJson(rowIdsValue, Type.Array(Type.String({ minLength: 1 }), { maxItems: 200 }))
+  if (rowIds && !rowIds.ok) return badRequest('Invalid rowIds')
   const direction = url.searchParams.get('direction') === 'asc' ? 'asc' : 'desc'
   const rawLimit = Number.parseInt(url.searchParams.get('limit') ?? '6', 10)
   const limit = Math.min(Math.max(Number.isFinite(rawLimit) ? rawLimit : 6, 1), 50)
@@ -408,6 +413,7 @@ async function handleTableLoopPreview(
     // drafts (publishing is main-only).
     tableId: physicalId(scope.branchId, tableId),
     drafts: !isMainScope(scope),
+    rowIds: rowIds?.ok ? rowIds.value : undefined,
     orderBy,
     direction,
     limit,
diff --git a/server/handlers/cms/loop.ts b/server/handlers/cms/loop.ts
index f5c035930..d17a022e9 100644
--- a/server/handlers/cms/loop.ts
+++ b/server/handlers/cms/loop.ts
@@ -27,10 +27,9 @@ import {
   renderNode,
   type RenderConfig,
   type RenderAccumulators,
-  type ResolvedLoopRenderData,
 } from '@core/publisher'
 import { jsonResponse } from '../../http'
-import { readLoopProps } from '../../publish/loopPrefetch'
+import { prefetchLoopData, readLoopProps } from '../../publish/loopPrefetch'
 import { getPublishedLoopIndexForVersion } from '../../publish/publishedSnapshotCache'
 import { getPublishVersion } from '../../publish/publishState'
 import { LOOP_RUNTIME_JS } from '../../publish/loopRuntime'
@@ -121,6 +120,12 @@ export async function handleLoopRequest(
 
   const consumed = offset + result.items.length
   const hasMore = consumed < result.totalItems
+  const loopData = await prefetchLoopData(containingPage, site, ctx.db, undefined, {
+    rootNodeId: loopId,
+    resolvedLoops: new Map([
+      [loopId, { items: result.items, totalItems: result.totalItems, pageNumber, hasMore }],
+    ]),
+  })
 
   // Render just the loop's children for the new items. We re-use the
   // publisher's renderNode walker by constructing a synthetic context;
@@ -136,9 +141,7 @@ export async function handleLoopRequest(
     registry,
     breakpointId: undefined,
     templateContext: { entryStack: [] },
-    loopData: new Map<string, ResolvedLoopRenderData>([
-      [loopId, { items: result.items, totalItems: result.totalItems, pageNumber, hasMore }],
-    ]),
+    loopData,
   }
   const acc: RenderAccumulators = {
     cssMap: new Map(),
diff --git a/server/publish/branchPreview.ts b/server/publish/branchPreview.ts
index 46fe6076a..85e180032 100644
--- a/server/publish/branchPreview.ts
+++ b/server/publish/branchPreview.ts
@@ -133,7 +133,7 @@ async function resolvePreview(
     merged,
     scriptPage: chain[chain.length - 1] ?? merged,
     templateContext: {
-      entryStack: [publishedDataRowToLoopItem(published)],
+      entryStack: [await publishedDataRowToLoopItem(db, published, scope.branchId)],
       route: buildRouteFrame(url.toString()),
     },
     documentMeta: readEntrySeoOverride(row.cells),
@@ -214,7 +214,7 @@ export async function renderBranchPreview(
     slug: segments.length > 0 ? decodeURIComponent(segments[segments.length - 1]!) : null,
     cookies: {},
   }
-  const loopData = await prefetchLoopData(merged, site, db, url, { branchId, request })
+  const loopData = await prefetchLoopData(merged, site, db, url, { branchId, request, entryStack: templateContext?.entryStack })
   const mediaAssets = await prefetchMediaAssets(merged, site, registry, db, { templateContext, loopData })
   const rendered = publishPage(merged, site, registry, {
     templateContext,
diff --git a/server/publish/imageLightboxRuntime.ts b/server/publish/imageLightboxRuntime.ts
new file mode 100644
index 000000000..cc6938d64
--- /dev/null
+++ b/server/publish/imageLightboxRuntime.ts
@@ -0,0 +1,3 @@
+import { installImageLightbox } from '@core/imageLightboxRuntime'
+
+export const IMAGE_LIGHTBOX_RUNTIME_JS = `(${installImageLightbox.toString()})(document);`
diff --git a/server/publish/loopPrefetch.ts b/server/publish/loopPrefetch.ts
index e4c921980..1f39983e8 100644
--- a/server/publish/loopPrefetch.ts
+++ b/server/publish/loopPrefetch.ts
@@ -25,6 +25,12 @@ import { publicDataUserFromParts } from '@core/data/publicDataUser'
 import type { PublishedDataRow } from '@core/data/schemas'
 import type { DbClient } from '../db/client'
 import { walkRenderTree } from './renderTreeWalk'
+import { entryFieldContextKey, resolveEntryFieldItems } from '@core/loops'
+import { prefetchRelationLoopItems } from './relationLoopPrefetch'
+import { getDataTable } from '../repositories/data'
+import { logicalIdOf, MAIN_BRANCH_ID } from '@core/branches'
+import { collectMediaIds, resolveMediaIdsToPaths } from '@core/loops/sources/dataRowsMedia'
+import { resolvedCellOverlay } from '@core/loops/sources/dataRowsCells'
 
 /**
  * Resolved loop data for a single loop node on a page.
@@ -35,6 +41,7 @@ import { walkRenderTree } from './renderTreeWalk'
 interface ResolvedLoopData extends LoopFetchResult {
   pageNumber: number
   hasMore: boolean
+  entryItems?: Map<string, LoopItem[]>
 }
 
 type LoopDataMap = Map<string, ResolvedLoopData>
@@ -48,7 +55,14 @@ type LoopDataMap = Map<string, ResolvedLoopData>
  * bindings by their field id. System fields (id, tableId, author, etc.)
  * are overlaid after so they can never be shadowed by a user-defined cell.
  */
-export function publishedDataRowToLoopItem(row: PublishedDataRow): LoopItem {
+export async function publishedDataRowToLoopItem(
+  db: DbClient,
+  row: PublishedDataRow,
+  branchId = MAIN_BRANCH_ID,
+): Promise<LoopItem> {
+  const table = await getDataTable(db, { branchId }, logicalIdOf(branchId, row.tableId))
+  const fields = table?.fields ?? []
+  const media = await resolveMediaIdsToPaths(db, collectMediaIds([{ cells_json: row.cells }], fields))
   const tableRouteBase = normalizeRouteBase(row.tableRouteBase || `/${row.tableSlug}`)
   const permalink = `${tableRouteBase === '/' ? '' : tableRouteBase}/${row.slug}`
 
@@ -72,6 +86,7 @@ export function publishedDataRowToLoopItem(row: PublishedDataRow): LoopItem {
       // Cells — primary data, spread first so bindings can reference any
       // user-defined field by its fieldId.
       ...row.cells,
+      ...resolvedCellOverlay(row.cells, fields, media),
       // System identity (overlay after cells so these are never shadowed)
       id: row.rowId,
       rowId: row.rowId,
@@ -294,6 +309,10 @@ export async function prefetchLoopData(
     /** Branch whose rows loops read; absent means main (publishing, public routes). */
     branchId?: string
     drafts?: boolean
+    /** Entry-template seed, before any enclosing loop has rendered. */
+    entryStack?: readonly LoopItem[]
+    /** Already fetched slices, e.g. the outer loop of a load-more request. */
+    resolvedLoops?: ReadonlyMap<string, ResolvedLoopData>
   },
 ): Promise<LoopDataMap> {
   const nodes = collectLoopNodes(page, site, options?.rootNodeId)
@@ -301,6 +320,8 @@ export async function prefetchLoopData(
 
   const entries: Array<[string, ResolvedLoopData]> = await Promise.all(
     nodes.map(async (node) => {
+      const resolved = options?.resolvedLoops?.get(node.id)
+      if (resolved) return [node.id, resolved] as [string, ResolvedLoopData]
       const props = readLoopProps(node)
       const source = props.sourceId ? loopSourceRegistry.get(props.sourceId) : undefined
       if (!source || source.kind === 'contextual') {
@@ -321,5 +342,29 @@ export async function prefetchLoopData(
     }),
   )
 
-  return new Map(entries)
+  const data = new Map(entries)
+  const contextual: Array<{ node: PageNode; parentId?: string; depth: number }> = []
+  walkRenderTree(page.nodes, options?.rootNodeId ?? page.rootNodeId, site, (node, ancestors) => {
+    if (node.moduleId !== 'base.loop' || node.props.sourceId !== 'entry.field') return
+    const loops = ancestors.filter((ancestor) => ancestor.moduleId === 'base.loop')
+    contextual.push({ node: node as PageNode, parentId: loops.at(-1)?.id, depth: loops.length })
+  })
+  // Layout depth bounds traversal, even when content relations contain cycles.
+  for (const { node, parentId } of contextual.sort((a, b) => a.depth - b.depth)) {
+    const props = readLoopProps(node)
+    const fieldId = props.filters.fieldId
+    if (typeof fieldId !== 'string' || !fieldId) continue
+    const parents = parentId ? data.get(parentId)?.items ?? [] : options?.entryStack?.slice(-1) ?? []
+    const related = await prefetchRelationLoopItems(db, parents, fieldId, { ...options, ...props })
+    const resolved = data.get(node.id)!
+    resolved.entryItems ??= new Map()
+    for (const [key, items] of related) resolved.entryItems.set(key, items)
+    // Expose candidate entries to deeper contextual loops and media prefetch.
+    for (const parent of parents) {
+      resolved.items.push(...(related.get(entryFieldContextKey(parent)) ??
+        resolveEntryFieldItems(parent.fields[fieldId], props).items))
+    }
+    resolved.totalItems = resolved.items.length
+  }
+  return data
 }
diff --git a/server/publish/publicRenderer.ts b/server/publish/publicRenderer.ts
index c8f41a48a..481b1710d 100644
--- a/server/publish/publicRenderer.ts
+++ b/server/publish/publicRenderer.ts
@@ -95,7 +95,7 @@ async function renderMergedTemplate(
 ): Promise<{ html: string; jsModuleIds: string[]; publishVersion: number; cssBundle: SiteCssBundle }> {
   const publishVersion = ctx.publishVersion ?? getPublishVersion()
   const moduleJsMap = buildPublishedSiteModuleJsMap(snapshot.site, registry)
-  const loopData = await prefetchLoopData(merged, snapshot.site, ctx.db, ctx.url)
+  const loopData = await prefetchLoopData(merged, snapshot.site, ctx.db, ctx.url, { entryStack: templateContext?.entryStack })
   const mediaAssets = await prefetchMediaAssets(merged, snapshot.site, registry, ctx.db, {
     templateContext,
     loopData,
@@ -192,7 +192,7 @@ export async function renderPublishedDataRowTemplate(
   // nodes outside any loop resolve their `currentEntry` bindings against this
   // seed. page/site/viewer frames are filled by `publishPage` from the document.
   const templateContext: TemplateRenderDataContext = {
-    entryStack: [publishedDataRowToLoopItem(row)],
+    entryStack: [await publishedDataRowToLoopItem(ctx.db, row)],
     ...(ctx.url ? { route: buildRouteFrame(ctx.url.toString()) } : {}),
   }
 
diff --git a/server/publish/relationLoopPrefetch.ts b/server/publish/relationLoopPrefetch.ts
new file mode 100644
index 000000000..49641e720
--- /dev/null
+++ b/server/publish/relationLoopPrefetch.ts
@@ -0,0 +1,47 @@
+import { entryFieldContextKey, resolveEntryFieldItems, type LoopItem } from '@core/loops'
+import { fetchPublishedDataRowItems } from '@core/loops/sources/dataRows'
+import { logicalIdOf, physicalId, MAIN_BRANCH_ID } from '@core/branches'
+import type { DbClient } from '../db/client'
+import { getDataTable } from '../repositories/data'
+
+/** Resolve only the relation traversed by this layout node, in table-sized batches. */
+export async function prefetchRelationLoopItems(
+  db: DbClient,
+  parents: readonly LoopItem[],
+  fieldId: string,
+  options: { branchId?: string; drafts?: boolean; offset: number; limit: number; direction: 'asc' | 'desc' },
+): Promise<Map<string, LoopItem[]>> {
+  const branchId = options.branchId ?? MAIN_BRANCH_ID
+  const groups = new Map<string, LoopItem[]>()
+  for (const parent of parents) {
+    const tableId = parent.fields.tableId
+    if (typeof tableId !== 'string') continue
+    const group = groups.get(tableId) ?? []
+    group.push(parent)
+    groups.set(tableId, group)
+  }
+  const result = new Map<string, LoopItem[]>()
+  for (const [tableId, entries] of groups) {
+    const table = await getDataTable(db, { branchId }, logicalIdOf(branchId, tableId))
+    const field = table?.fields.find((candidate) => candidate.id === fieldId)
+    if (field?.type !== 'relation' || !field.allowMultiple) continue
+    const ids = new Set<string>()
+    for (const entry of entries) {
+      const value = entry.fields[fieldId]
+      if (Array.isArray(value)) for (const id of value) if (typeof id === 'string') ids.add(id)
+    }
+    const target = await fetchPublishedDataRowItems(db, {
+      tableId: physicalId(branchId, logicalIdOf(branchId, field.targetTableId)),
+      rowIds: [...ids],
+      drafts: options.drafts ?? branchId !== MAIN_BRANCH_ID,
+      orderBy: 'slug', direction: 'asc', limit: ids.size, offset: 0,
+    })
+    const relatedItems = new Map(target.items.map((item) => [item.id, item]))
+    for (const entry of entries) {
+      result.set(entryFieldContextKey(entry), resolveEntryFieldItems(entry.fields[fieldId], {
+        ...options, relatedItems,
+      }).items)
+    }
+  }
+  return result
+}
diff --git a/server/publish/renderTreeWalk.ts b/server/publish/renderTreeWalk.ts
index 792847eb2..354bd034e 100644
--- a/server/publish/renderTreeWalk.ts
+++ b/server/publish/renderTreeWalk.ts
@@ -20,16 +20,18 @@ export function walkRenderTree(
   nodes: Record<string, BaseNode>,
   rootNodeId: string,
   site: SiteDocument,
-  onNode: (node: BaseNode) => void,
+  onNode: (node: BaseNode, ancestors: readonly BaseNode[]) => void,
 ): void {
   const visit = (
     curNodes: Record<string, BaseNode>,
     nodeId: string,
     seenVcs: ReadonlySet<string>,
+    ancestors: readonly BaseNode[],
   ): void => {
     const node = curNodes[nodeId]
     if (!node) return
-    onNode(node)
+    onNode(node, ancestors)
+    const childAncestors = [...ancestors, node]
 
     if (node.moduleId === 'base.visual-component-ref') {
       const componentId = (node.props as Record<string, unknown> | undefined)?.['componentId']
@@ -37,13 +39,13 @@ export function walkRenderTree(
         const vc = selectVisualComponentById(site, componentId)
         if (vc) {
           const nextSeen = new Set(seenVcs).add(componentId)
-          visit(vc.tree.nodes as Record<string, BaseNode>, vc.tree.rootNodeId, nextSeen)
+          visit(vc.tree.nodes as Record<string, BaseNode>, vc.tree.rootNodeId, nextSeen, childAncestors)
         }
       }
     }
 
-    for (const childId of node.children) visit(curNodes, childId, seenVcs)
+    for (const childId of node.children) visit(curNodes, childId, seenVcs, childAncestors)
   }
 
-  visit(nodes, rootNodeId, new Set())
+  visit(nodes, rootNodeId, new Set(), [])
 }
diff --git a/server/publish/runtime/previewRuntime.ts b/server/publish/runtime/previewRuntime.ts
index ca77e9836..1df966f23 100644
--- a/server/publish/runtime/previewRuntime.ts
+++ b/server/publish/runtime/previewRuntime.ts
@@ -79,7 +79,7 @@ export async function buildRuntimePreviewDocument(
     }
   }
   const loopData = input.db
-    ? await prefetchLoopData(input.page, input.site, input.db, undefined, { branchId: input.branchId })
+    ? await prefetchLoopData(input.page, input.site, input.db, undefined, { branchId: input.branchId, entryStack: input.templateContext?.entryStack })
     : undefined
   const mediaAssets = input.db
     ? await prefetchMediaAssets(input.page, input.site, input.registry, input.db, {
diff --git a/server/publish/scrollAnimationRuntime.ts b/server/publish/scrollAnimationRuntime.ts
new file mode 100644
index 000000000..604cf0719
--- /dev/null
+++ b/server/publish/scrollAnimationRuntime.ts
@@ -0,0 +1,3 @@
+import { installScrollAnimations, SCROLL_ANIMATION_FRAMES } from '@core/scrollAnimationRuntime'
+
+export const SCROLL_ANIMATION_RUNTIME_JS = `(${installScrollAnimations.toString()})(document,${JSON.stringify(SCROLL_ANIMATION_FRAMES)});`
diff --git a/server/repositories/data/__tests__/post-publication-date.test.ts b/server/repositories/data/__tests__/post-publication-date.test.ts
new file mode 100644
index 000000000..a45d08b09
--- /dev/null
+++ b/server/repositories/data/__tests__/post-publication-date.test.ts
@@ -0,0 +1,129 @@
+import { describe, expect, it } from 'bun:test'
+import { MAIN_SCOPE } from '../../../branches/scope'
+import { createSqliteClient } from '../../../db/sqlite'
+import { sqliteMigrations } from '../../../db/migrations-sqlite'
+import { runMigrations } from '../../../db/runMigrations'
+import { getDataRow } from '../rows/read'
+import { upsertDataRowDraft } from '../rows/mutations'
+import { persistDataRowPublish } from '../publish'
+import { getDataTable } from '../tables'
+
+describe('Posts publication date', () => {
+  it('migrates existing rows and versions to the editable date field', async () => {
+    const db = createSqliteClient(':memory:')
+    const migrationsBeforePublicationDate = sqliteMigrations.filter(
+      (migration) => ![
+        '031_posts_publication_date',
+        '032_posts_publication_date_from_body',
+      ].includes(migration.id),
+    )
+    await runMigrations(db, migrationsBeforePublicationDate)
+
+    await upsertDataRowDraft(
+      db,
+      MAIN_SCOPE,
+      {
+        id: 'historic-post',
+        tableId: 'posts',
+        cells: { title: 'Historic post', slug: 'historic-post' },
+        slug: 'historic-post',
+      },
+      null,
+    )
+    await persistDataRowPublish(db, 'historic-post', null)
+    await db.unsafe(`
+      update data_rows
+         set published_at = '2025-08-12T12:00:00.000Z',
+             cells_json = json_remove(cells_json, '$.date')
+       where id = 'historic-post';
+      update data_row_versions
+         set published_at = '2025-08-12T12:00:00.000Z',
+             cells_json = json_remove(cells_json, '$.date')
+       where row_id = 'historic-post';
+    `)
+
+    await runMigrations(db, sqliteMigrations)
+
+    const posts = await getDataTable(db, MAIN_SCOPE, 'posts')
+    expect(posts?.fields).toContainEqual(expect.objectContaining({
+      id: 'date',
+      label: 'Publication date',
+      type: 'date',
+    }))
+    expect((await getDataRow(db, MAIN_SCOPE, 'historic-post'))?.cells['date']).toBe('2025-08-12')
+
+    const { rows: versions } = await db<{ cells_json: Record<string, unknown> }>`
+      select cells_json
+        from data_row_versions
+       where row_id = ${'historic-post'}
+    `
+    expect(versions[0]?.cells_json['date']).toBe('2025-08-12')
+  })
+
+  it('prefers an original archive date embedded in the opening markdown line', async () => {
+    const db = createSqliteClient(':memory:')
+    await runMigrations(db, sqliteMigrations.filter(
+      (migration) => migration.id !== '032_posts_publication_date_from_body',
+    ))
+
+    await upsertDataRowDraft(
+      db,
+      MAIN_SCOPE,
+      {
+        id: 'imported-post',
+        tableId: 'posts',
+        cells: {
+          title: 'Imported post',
+          slug: 'imported-post',
+          date: '2026-09-29',
+          body: '**Veröffentlicht am 12.08.2025.**\n\nArchivinhalt',
+        },
+        slug: 'imported-post',
+      },
+      null,
+    )
+    await persistDataRowPublish(db, 'imported-post', null)
+    await runMigrations(db, sqliteMigrations)
+
+    expect((await getDataRow(db, MAIN_SCOPE, 'imported-post'))?.cells['date']).toBe('2025-08-12')
+    const { rows: versions } = await db<{ cells_json: Record<string, unknown> }>`
+      select cells_json
+        from data_row_versions
+       where row_id = ${'imported-post'}
+    `
+    expect(versions[0]?.cells_json['date']).toBe('2025-08-12')
+  })
+
+  it('fills today for a newly published post and preserves an authored date', async () => {
+    const db = createSqliteClient(':memory:')
+    await runMigrations(db, sqliteMigrations)
+
+    await upsertDataRowDraft(
+      db,
+      MAIN_SCOPE,
+      {
+        id: 'new-post',
+        tableId: 'posts',
+        cells: { title: 'New post', slug: 'new-post', date: '' },
+        slug: 'new-post',
+      },
+      null,
+    )
+    await persistDataRowPublish(db, 'new-post', null)
+    expect((await getDataRow(db, MAIN_SCOPE, 'new-post'))?.cells['date']).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+
+    await upsertDataRowDraft(
+      db,
+      MAIN_SCOPE,
+      {
+        id: 'backdated-post',
+        tableId: 'posts',
+        cells: { title: 'Backdated post', slug: 'backdated-post', date: '2024-03-01' },
+        slug: 'backdated-post',
+      },
+      null,
+    )
+    await persistDataRowPublish(db, 'backdated-post', null)
+    expect((await getDataRow(db, MAIN_SCOPE, 'backdated-post'))?.cells['date']).toBe('2024-03-01')
+  })
+})
diff --git a/server/repositories/data/publish.ts b/server/repositories/data/publish.ts
index e819d8d18..990a90e38 100644
--- a/server/repositories/data/publish.ts
+++ b/server/repositories/data/publish.ts
@@ -152,6 +152,13 @@ export async function persistDataRowPublish(
     const previousRoute = await readPreviousPublishedRoute(tx, rowId)
     const versionNumber = await nextDataRowVersionNumber(tx, rowId)
     const versionId = nanoid()
+    const now = nowIso()
+    const existingPublicationDate = row.cells['date']
+    const cells = row.tableId === 'posts' && (
+      typeof existingPublicationDate !== 'string' || !existingPublicationDate.trim()
+    )
+      ? { ...row.cells, date: now.slice(0, 10) }
+      : row.cells
 
     await tx`
       insert into data_row_versions
@@ -160,16 +167,16 @@ export async function persistDataRowPublish(
         ${versionId},
         ${row.id},
         ${versionNumber},
-        ${row.cells},
+        ${cells},
         ${row.slug},
         ${publisherUserId}
       )
     `
 
-    const now = nowIso()
     const { rows: updateRows } = await tx<{ id: string }>`
       update data_rows
       set status = 'published',
+          cells_json = ${cells},
           active_version_id = ${versionId},
           published_by_user_id = ${publisherUserId},
           published_at = ${now},
diff --git a/server/router.ts b/server/router.ts
index 5da4d651c..5035f5604 100644
--- a/server/router.ts
+++ b/server/router.ts
@@ -28,6 +28,8 @@ import { registry } from '@core/module-engine'
 import type { CssBundleFile, SiteCssBundleId } from '@core/publisher'
 import { buildPublishedSiteCssBundle } from './publish/siteCssBundle'
 import { mediaStorageRegistry } from '@core/plugins/mediaStorageRegistry'
+import { SCROLL_ANIMATION_RUNTIME_JS } from './publish/scrollAnimationRuntime'
+import { IMAGE_LIGHTBOX_RUNTIME_JS } from './publish/imageLightboxRuntime'
 
 const VITE_DEV_URL = 'http://localhost:5173'
 
@@ -64,6 +66,8 @@ const routes: readonly RouteHandler[] = [
   tryServeLoopRuntimeAsset,
   tryServeLoop,
   tryServeHoleRuntimeAsset,
+  tryServeScrollAnimationRuntimeAsset,
+  tryServeImageLightboxRuntimeAsset,
   tryServeHole,
   tryServeModuleJsAsset,
   tryServePublicForm,
@@ -202,6 +206,24 @@ function tryServeHoleRuntimeAsset(req: Request, _runtime: ServerRuntime, _url: U
   return serveHoleRuntimeAsset()
 }
 
+function tryServeScrollAnimationRuntimeAsset(req: Request, _runtime: ServerRuntime, _url: URL, pathname: string): Response | null {
+  if (req.method !== 'GET' || pathname !== '/_instatic/scroll-animation-runtime.js') return null
+  return new Response(SCROLL_ANIMATION_RUNTIME_JS, { headers: {
+    'Content-Type': 'text/javascript; charset=utf-8',
+    'Cache-Control': 'no-cache',
+    'X-Content-Type-Options': 'nosniff',
+  } })
+}
+
+function tryServeImageLightboxRuntimeAsset(req: Request, _runtime: ServerRuntime, _url: URL, pathname: string): Response | null {
+  if (req.method !== 'GET' || pathname !== '/_instatic/image-lightbox-runtime.js') return null
+  return new Response(IMAGE_LIGHTBOX_RUNTIME_JS, { headers: {
+    'Content-Type': 'text/javascript; charset=utf-8',
+    'Cache-Control': 'no-cache',
+    'X-Content-Type-Options': 'nosniff',
+  } })
+}
+
 /**
  * Layer C hole fragment endpoint — `/_instatic/hole/<nodeId>`.
  * Renders a dynamic node subtree on-demand and caches the result via Layer B.
diff --git a/src/__tests__/canvas/canvasDetailsInteraction.test.tsx b/src/__tests__/canvas/canvasDetailsInteraction.test.tsx
new file mode 100644
index 000000000..a25ad9fa8
--- /dev/null
+++ b/src/__tests__/canvas/canvasDetailsInteraction.test.tsx
@@ -0,0 +1,31 @@
+import { beforeEach, expect, it } from 'bun:test'
+import React from 'react'
+import { act, cleanup, fireEvent, render } from '@testing-library/react'
+import { DndContext } from '@dnd-kit/core'
+import { useEditorStore } from '@site/store/store'
+import { CanvasRoot } from '@site/canvas/CanvasRoot'
+import { waitForCanvasNodeInFrame } from './iframeCanvasQuery'
+import '@modules/base'
+
+beforeEach(cleanup)
+
+it.each(['design', 'live'] as const)('opens details in %s without persisting open or losing layer selection', async (view) => {
+  useEditorStore.setState({ canvasView: view })
+  const site = useEditorStore.getState().createSite('Accordion')
+  const page = site.pages[0]!
+  const detailsId = useEditorStore.getState().insertNode('base.container', { tag: 'custom', customTag: 'details' }, page.rootNodeId)
+  const summaryId = useEditorStore.getState().insertNode('base.container', { tag: 'custom', customTag: 'summary' }, detailsId)
+  const labelId = useEditorStore.getState().insertNode('base.text', { text: 'Monday' }, summaryId)
+  useEditorStore.getState().insertNode('base.text', { text: 'Schedule' }, detailsId)
+  render(<DndContext><CanvasRoot /></DndContext>)
+  const details = await waitForCanvasNodeInFrame<HTMLDetailsElement>('desktop', detailsId)
+  const label = await waitForCanvasNodeInFrame('desktop', labelId)
+  const before = JSON.stringify(useEditorStore.getState().site)
+  await act(async () => { fireEvent.click(label) })
+  expect(details.open).toBe(true)
+  expect(useEditorStore.getState().selectedNodeId).toBe(labelId)
+  expect(JSON.stringify(useEditorStore.getState().site)).toBe(before)
+  await act(async () => { fireEvent.click(label) })
+  expect(details.open).toBe(false)
+  expect(JSON.stringify(useEditorStore.getState().site)).toBe(before)
+})
diff --git a/src/__tests__/canvas/canvasDetailsPreview.test.ts b/src/__tests__/canvas/canvasDetailsPreview.test.ts
new file mode 100644
index 000000000..68a3df42a
--- /dev/null
+++ b/src/__tests__/canvas/canvasDetailsPreview.test.ts
@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'bun:test'
+import { installCanvasDetailsPreview, revealSelectedDetails } from '@site/canvas/useCanvasDetailsPreview'
+
+function fixture() {
+  const doc = document.implementation.createHTMLDocument('Accordion preview')
+  doc.body.innerHTML = `<details data-node-id="day"><summary data-node-id="summary"><span data-node-id="label">Monday</span><a href="#">Link</a></summary><p data-node-id="body">Schedule</p><details data-node-id="nested"><summary>More</summary><p data-node-id="nested-body">More content</p></details></details>`
+  // Mirror the canvas selection handler that cancels authored native activation.
+  doc.addEventListener('click', (event) => event.preventDefault(), true)
+  const details = doc.querySelector('details')!
+  const label = doc.querySelector('span')!
+  return { doc, details, label }
+}
+
+describe('editor-only details preview', () => {
+  it('toggles from a summary child while preserving selection propagation', () => {
+    const { doc, details, label } = fixture()
+    const dispose = installCanvasDetailsPreview(doc)
+    let selected = 0
+    label.addEventListener('click', (event) => { event.preventDefault(); selected++ })
+    label.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    expect(details.open).toBe(true)
+    label.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    expect(details.open).toBe(false)
+    expect(selected).toBe(2)
+    dispose()
+  })
+
+  it('supports Enter and Space without toggling for repeated keydown or other keys', () => {
+    const { doc, details, label } = fixture()
+    const dispose = installCanvasDetailsPreview(doc)
+    for (const [key, repeat, expected] of [['Enter', false, true], ['Enter', true, true], ['ArrowDown', false, true], [' ', false, false]] as const) {
+      label.dispatchEvent(new KeyboardEvent('keydown', { key, repeat, bubbles: true, cancelable: true }))
+      expect(details.open).toBe(expected)
+    }
+    dispose()
+  })
+
+  it('leaves links, body clicks and readonly composed content alone', () => {
+    const { doc, details } = fixture()
+    const dispose = installCanvasDetailsPreview(doc)
+    for (const target of [doc.querySelector('a')!, doc.querySelector('p')!]) {
+      target.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+      expect(details.open).toBe(false)
+    }
+    doc.body.setAttribute('data-instatic-readonly-id', 'template')
+    doc.querySelector('span')!.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    expect(details.open).toBe(false)
+    dispose()
+  })
+
+  it('reveals nested content selected in Layers without reopening a selected summary', () => {
+    const { doc, details } = fixture()
+    revealSelectedDetails(doc, 'label')
+    expect(details.open).toBe(false)
+    revealSelectedDetails(doc, 'nested-body')
+    expect(details.open).toBe(true)
+    expect(doc.querySelectorAll('details')[1]!.open).toBe(true)
+  })
+
+  it('removes handlers on cleanup and keeps independent frames independent', () => {
+    const first = fixture()
+    const second = fixture()
+    const dispose = installCanvasDetailsPreview(first.doc)
+    first.label.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    expect(first.details.open).toBe(true)
+    expect(second.details.open).toBe(false)
+    dispose()
+    first.label.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    expect(first.details.open).toBe(true)
+  })
+})
diff --git a/src/__tests__/canvas/templatePreviewBindings.test.tsx b/src/__tests__/canvas/templatePreviewBindings.test.tsx
index 9ac99937e..665097c23 100644
--- a/src/__tests__/canvas/templatePreviewBindings.test.tsx
+++ b/src/__tests__/canvas/templatePreviewBindings.test.tsx
@@ -1,7 +1,8 @@
 import { afterEach, beforeEach, describe, expect, it } from 'bun:test'
 import React from 'react'
-import { cleanup, render, screen, waitFor } from '@testing-library/react'
-import { useEditorStore } from '@site/store/store'
+import { act, cleanup, render, renderHook, screen, waitFor } from '@testing-library/react'
+import { selectActiveCanvasPage, useEditorStore } from '@site/store/store'
+import { useTemplatePreviewContext } from '@site/hooks/useTemplatePreviewContext'
 import { CanvasRoot } from '@site/canvas/CanvasRoot'
 import { makeNode, makePage, makeSite } from '../fixtures'
 import '@modules/base'
@@ -52,6 +53,7 @@ beforeEach(() => {
     canUndo: false,
     canRedo: false,
     hasUnsavedChanges: false,
+    componentPreviewSelection: {},
   } as Parameters<typeof useEditorStore.setState>[0])
 
   globalThis.fetch = (async (input: RequestInfo | URL) => {
@@ -69,6 +71,30 @@ afterEach(() => {
 })
 
 describe('canvas template preview bindings', () => {
+  it('previews a selected component entry without changing the component or its runtime data source', async () => {
+    globalThis.fetch = (async (input: RequestInfo | URL) => {
+      if (String(input).includes('/posts/loop-preview')) return Response.json({ items: [
+        { id: 'niko', fields: { title: 'Niko', body: '**Body**', featuredMedia: '/uploads/niko.jpg' } },
+        { id: 'marc', fields: { title: 'Marc', body: '', featuredMedia: '/uploads/marc.jpg' } },
+      ] })
+      return Response.json({ tables: [postsTable] })
+    }) as typeof fetch
+    useEditorStore.getState().createSite('Preview test')
+    const id = useEditorStore.getState().createVisualComponent('Card')
+    useEditorStore.getState().setActiveDocument({ kind: 'visualComponent', vcId: id })
+    const site = useEditorStore.getState().site
+    const page = selectActiveCanvasPage(useEditorStore.getState())
+    const { result } = renderHook(() => useTemplatePreviewContext(page))
+    expect(result.current.context?.entryStack).toHaveLength(0)
+    act(() => useEditorStore.getState().setComponentPreviewSelection(id, { tableSlug: 'posts', rowId: 'marc' }))
+    await waitFor(() => expect(result.current.context?.entryStack[0]?.fields.title).toBe('Marc'))
+    act(() => useEditorStore.getState().setComponentPreviewSelection(id, { tableSlug: 'posts', rowId: 'niko' }))
+    expect(result.current.context?.entryStack[0]?.fields.featuredMedia).toBe('/uploads/niko.jpg')
+    expect(useEditorStore.getState().site).toBe(site)
+    act(() => useEditorStore.getState().setComponentPreviewSelection(id, null))
+    expect(result.current.context?.entryStack).toHaveLength(0)
+  })
+
   it('renders template dynamic bindings with synthetic preview data from the table schema', async () => {
     const root = makeNode({ id: 'root', moduleId: 'base.body', children: ['title'] })
     const title = makeNode({
diff --git a/src/__tests__/core/sanitize.test.ts b/src/__tests__/core/sanitize.test.ts
index 266cca766..3288c65f2 100644
--- a/src/__tests__/core/sanitize.test.ts
+++ b/src/__tests__/core/sanitize.test.ts
@@ -139,6 +139,19 @@ describe('sanitizeRichtext() — safe markup preservation', () => {
     expect(result).toContain('<h2>Subtitle</h2>')
   })
 
+  it('preserves safe rich-text images and strips executable image attributes', () => {
+    const result = sanitizeRichtext(
+      '<img src="/uploads/poster.jpg" alt="Poster" onerror="alert(1)">' +
+        '<img src="javascript:alert(2)" alt="Unsafe">',
+    )
+    expect(result).toContain('src="/uploads/poster.jpg"')
+    expect(result).toContain('alt="Poster"')
+    expect(result).toContain('loading="lazy"')
+    expect(result).toContain('decoding="async"')
+    expect(result).not.toContain('onerror')
+    expect(result).not.toContain('javascript:')
+  })
+
   it('handles empty string gracefully', () => {
     expect(sanitizeRichtext('')).toBe('')
     expect(sanitizeRichtext(null)).toBe('')
diff --git a/src/__tests__/data/contentFormatting.test.ts b/src/__tests__/data/contentFormatting.test.ts
new file mode 100644
index 000000000..03ed6a8f3
--- /dev/null
+++ b/src/__tests__/data/contentFormatting.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'bun:test'
+import { markdownToProseMirrorDoc, proseMirrorDocToMarkdown, type JSONNode } from '@core/markdown/markdownDocument'
+import { renderMarkdownToHtml } from '@core/markdown/renderMarkdown'
+import { sanitizeRichtext } from '@core/sanitize'
+
+describe('persisted content formatting', () => {
+  for (const textAlign of ['left', 'center', 'right', 'justify']) {
+    for (const type of ['paragraph', 'heading']) {
+      it(`preserves ${textAlign} ${type} alignment and inline formatting`, () => {
+        const doc: JSONNode = { type: 'doc', content: [{ type,
+          attrs: { ...(type === 'heading' ? { level: 3 } : {}), textAlign },
+          content: [{ type: 'text', text: 'Desktop', marks: [{ type: 'bold' }] }],
+        }] }
+        const markdown = proseMirrorDocToMarkdown(doc)
+        expect(markdown).not.toBe('**Desktop**')
+        expect(markdownToProseMirrorDoc(markdown)).toEqual(doc)
+        expect(renderMarkdownToHtml(markdown)).toContain(`style="text-align:${textAlign}"><strong>Desktop</strong>`)
+      })
+    }
+  }
+
+  it('round trips downloads and emits an actual download link', () => {
+    const markdown = '[Wallpaper](/uploads/wallpaper.png "instatic:download")'
+    expect(proseMirrorDocToMarkdown(markdownToProseMirrorDoc(markdown))).toBe(markdown)
+    expect(renderMarkdownToHtml(markdown)).toBe('<p><a href="/uploads/wallpaper.png" download>Wallpaper</a></p>')
+    expect(renderMarkdownToHtml('[Wallpaper](/uploads/wallpaper.png)')).not.toContain(' download')
+  })
+
+  it('retains URL safety for download links', () => {
+    expect(renderMarkdownToHtml('[bad](javascript:alert%281%29 "instatic:download")')).not.toContain('href="javascript:')
+  })
+
+  it('retains alignment and downloads through publisher sanitization', () => {
+    const html = sanitizeRichtext(renderMarkdownToHtml('<p align="center">[File](/uploads/file.pdf "instatic:download")</p>'))
+    expect(html).toContain('class="instatic-content-align--center"')
+    expect(html).toContain('download=""')
+    expect(html).not.toContain('target="_blank"')
+    expect(html).not.toContain('style=')
+  })
+
+  it('keeps adjacent aligned blocks and surrounding paragraphs separate', () => {
+    const markdown = 'Before\n\n<p align="center">One</p>\n\n<h2 align="right">Two</h2>\n\nAfter'
+    expect(proseMirrorDocToMarkdown(markdownToProseMirrorDoc(markdown))).toBe(markdown)
+  })
+})
diff --git a/src/__tests__/data/markdown.test.ts b/src/__tests__/data/markdown.test.ts
index 15dc1fc53..2480f7ded 100644
--- a/src/__tests__/data/markdown.test.ts
+++ b/src/__tests__/data/markdown.test.ts
@@ -6,6 +6,7 @@ import {
   type JSONNode,
 } from '@core/markdown/markdownDocument'
 import { renderMarkdownToHtml } from '@core/markdown/renderMarkdown'
+import { parseMediaImageTitle } from '@core/markdown/mediaImagePresentation'
 
 describe('content markdown ↔ ProseMirror document', () => {
   it('parses headings, paragraphs and a single-line image into a doc tree', () => {
@@ -108,6 +109,22 @@ describe('content markdown ↔ ProseMirror document', () => {
       content: [{ type: 'paragraph' }],
     })
   })
+
+  it('round-trips image size and lightbox presentation metadata', () => {
+    const source = '![Hero](/uploads/hero.png "size=sm lightbox")'
+    const doc = markdownToProseMirrorDoc(source)
+
+    expect(doc.content?.[0]).toMatchObject({
+      type: 'media',
+      attrs: { size: 'm', lightbox: true, title: '' },
+    })
+    expect(proseMirrorDocToMarkdown(doc)).toBe(source.replace('size=sm', 'size=m'))
+    expect(parseMediaImageTitle('size=sm lightbox editorial image')).toEqual({
+      size: 'm',
+      lightbox: true,
+      title: 'editorial image',
+    })
+  })
 })
 
 describe('publisher markdown renderer', () => {
@@ -139,6 +156,22 @@ describe('publisher markdown renderer', () => {
     expect(html).toContain('controls')
     expect(html).toContain('src="/uploads/clip.mp4"')
   })
+
+  it('renders small images and lightbox markup from image metadata', () => {
+    const html = renderMarkdownToHtml('![Hero](/uploads/hero.png "size=sm lightbox")')
+
+    expect(html).toContain('class="instatic-lightbox-trigger"')
+    expect(html).toContain('class="instatic-content-image instatic-content-image--m"')
+    expect(html).toContain('width:min(100%, 560px);max-width:100%;height:auto')
+    expect(html).toContain('href="/uploads/hero.png"')
+    expect(html).not.toContain('href="#')
+  })
+
+  it('does not create a lightbox for unsafe image URLs', () => {
+    const html = renderMarkdownToHtml('![bad](javascript:alert(1) "lightbox")')
+    expect(html).not.toContain('instatic-lightbox-trigger')
+    expect(html).toContain('src="#"')
+  })
 })
 
 describe('firstMediaPathFromMarkdown', () => {
diff --git a/src/__tests__/editor/readOnlyNodeTree.test.tsx b/src/__tests__/editor/readOnlyNodeTree.test.tsx
index be8d48b03..a493b6f84 100644
--- a/src/__tests__/editor/readOnlyNodeTree.test.tsx
+++ b/src/__tests__/editor/readOnlyNodeTree.test.tsx
@@ -19,6 +19,11 @@ import type { BaseNode } from '@core/page-tree'
 import { bagToReactStyle, type RenderResolvedMedia } from '@core/publisher'
 import { responsiveBackgroundReactStyle } from '@admin/pages/media/hooks/useResponsiveBackgroundStyle'
 import { ReadOnlyNodeTree } from '@modules/base/utils/ReadOnlyNodeTree'
+import { CanvasTemplateContext } from '@site/canvas/CanvasContexts'
+import { VCInlineTree } from '@modules/base/visualComponentRef/VCInlineTree'
+import { useEditorStore } from '@site/store/store'
+import '@modules/base/visualComponentRef'
+import '@modules/base/outlet'
 // Self-registering module imports — ReadOnlyNodeTree resolves components via
 // the global registry.
 import '@modules/base/text'
@@ -120,6 +125,51 @@ describe('ReadOnlyNodeTree — inline styles', () => {
 })
 
 describe('ReadOnlyNodeTree — dynamic preview context', () => {
+  it('renders an empty bound body without the unconfigured outlet placeholder', () => {
+    const nodes = { body: textNode('body', { moduleId: 'base.outlet', props: { html: '{currentEntry.body}', tag: 'div' } }) }
+    const { container } = render(<ReadOnlyNodeTree nodes={nodes} rootNodeId="body" classes={{}} templateContext={{ entryStack: [{ id: 'marc', fields: { body: '' } }] }} />)
+    expect(container.textContent).toBe('')
+    expect(container.querySelector('[data-instatic-content-region]')).not.toBeNull()
+  })
+
+  it('passes an explicit read-only context into a nested component', () => {
+    useEditorStore.getState().createSite('Nested component preview')
+    const id = useEditorStore.getState().createVisualComponent('Nested card')
+    const vc = useEditorStore.getState().site!.visualComponents.find((v) => v.id === id)!
+    useEditorStore.getState().addNodeToVc(id, vc.tree.rootNodeId, textNode('nested-title', {
+      props: { text: '{parentEntry.title}: {currentEntry.title}', tag: 'h1' },
+    }))
+    const nodes = { ref: textNode('ref', { moduleId: 'base.visual-component-ref', props: { componentId: id, propOverrides: {} } }) }
+    const { container } = render(<ReadOnlyNodeTree nodes={nodes} rootNodeId="ref" classes={{}} templateContext={{ entryStack: [
+      { id: 'team', fields: { title: 'Team' } },
+      { id: 'niko', fields: { title: 'Niko' } },
+    ] }} />)
+    expect(container.querySelector('h1')?.textContent).toBe('Team: Niko')
+  })
+
+  it('inherits the enclosing loop item across a component boundary and updates when it changes', () => {
+    const nodes = { title: textNode('title', { props: { text: '{currentEntry.title}', tag: 'h1' } }) }
+    const view = (title: string) => (
+      <CanvasTemplateContext.Provider value={{ entryStack: [{ id: title, fields: { title } }] }}>
+        <VCInlineTree nodes={nodes} rootNodeId="title" classes={{}} />
+      </CanvasTemplateContext.Provider>
+    )
+    const { container, rerender } = render(view('Niko'))
+    expect(container.querySelector('h1')?.textContent).toBe('Niko')
+    rerender(view('Marc'))
+    expect(container.querySelector('h1')?.textContent).toBe('Marc')
+  })
+
+  it('lets an explicit read-only context override the outer entry', () => {
+    const nodes = { title: textNode('title', { props: { text: '{currentEntry.title}', tag: 'h1' } }) }
+    const { container } = render(
+      <CanvasTemplateContext.Provider value={{ entryStack: [{ id: 'outer', fields: { title: 'Outer' } }] }}>
+        <ReadOnlyNodeTree nodes={nodes} rootNodeId="title" classes={{}} templateContext={{ entryStack: [{ id: 'inner', fields: { title: 'Inner' } }] }} />
+      </CanvasTemplateContext.Provider>,
+    )
+    expect(container.querySelector('h1')?.textContent).toBe('Inner')
+  })
+
   it('resolves currentEntry tokens in read-only template previews', () => {
     const nodes: Record<string, BaseNode> = {
       h1: textNode('h1', {
diff --git a/src/__tests__/htmlImport/mapping.test.ts b/src/__tests__/htmlImport/mapping.test.ts
index 85ab5ada3..13d5382c9 100644
--- a/src/__tests__/htmlImport/mapping.test.ts
+++ b/src/__tests__/htmlImport/mapping.test.ts
@@ -1325,6 +1325,25 @@ describe('base.outlet — <instatic-outlet>', () => {
 // ---------------------------------------------------------------------------
 
 describe('base.loop — <instatic-loop>', () => {
+  it('preserves nested relation and repeater field selections and authored order', () => {
+    const result = importHtml(`
+      <instatic-loop data-source-id="data.rows" data-table-id="offers">
+        <instatic-loop data-source-id="entry.field" data-field-id="members">
+          <p>{currentEntry.role}</p>
+          <instatic-loop data-source-id="entry.field" data-field-id="slots" data-direction="desc">
+            <p>{currentEntry.weekday}</p>
+          </instatic-loop>
+        </instatic-loop>
+      </instatic-loop>
+    `)
+    const loops = Object.values(result.nodes).filter((node) => node.moduleId === 'base.loop')
+    expect(loops.map((node) => node.props)).toEqual(expect.arrayContaining([
+      expect.objectContaining({ sourceId: 'data.rows', filters: { tableId: 'offers' }, direction: 'desc' }),
+      expect.objectContaining({ sourceId: 'entry.field', filters: { fieldId: 'members' }, direction: 'asc' }),
+      expect.objectContaining({ sourceId: 'entry.field', filters: { fieldId: 'slots' }, direction: 'desc' }),
+    ]))
+    expect(loops).toHaveLength(3)
+  })
   it('maps <instatic-loop> to a configured base.loop node with child variants', () => {
     const result = importHtml(`
       <instatic-loop
diff --git a/src/__tests__/loops/relationLoops.test.ts b/src/__tests__/loops/relationLoops.test.ts
new file mode 100644
index 000000000..2435fc147
--- /dev/null
+++ b/src/__tests__/loops/relationLoops.test.ts
@@ -0,0 +1,228 @@
+import { afterAll, beforeAll, describe, expect, it } from 'bun:test'
+import { createTestDb, type TestDb } from '../helpers/createTestDb'
+import { makeModule, makePage, makeRegistry, makeSite } from '../publisher/helpers'
+import { prefetchLoopData, publishedDataRowToLoopItem } from '../../../server/publish/loopPrefetch'
+import { prefetchRelationLoopItems } from '../../../server/publish/relationLoopPrefetch'
+import { fetchPublishedDataRowItems } from '@core/loops/sources/dataRows'
+import { entryFieldContextKey, entryScopeTables, entryScopeRepeater, resolveEntryFieldItems, type LoopItem } from '@core/loops'
+import { publishPage } from '@core/publisher'
+import { getDataTable } from '../../../server/repositories/data'
+import { forkBranch } from '../../../server/branches/fork'
+import type { PublishedDataRow } from '@core/data/schemas'
+import '@core/loops/sources'
+
+let fixture: TestDb
+const offerFields = [
+  { id: 'teammembers', label: 'Team members', type: 'relation', targetTableId: 'team', allowMultiple: true },
+  { id: 'weeklySlots', label: 'Weekly slots', type: 'repeater', fields: [
+    { id: 'weekday', label: 'Weekday', type: 'select', options: [
+      { id: 'thursday-id', label: 'Thursday', value: 'thursday' },
+      { id: 'friday-id', label: 'Friday', value: 'friday' },
+      { id: 'monday-id', label: 'Monday', value: 'monday' },
+    ] },
+    { id: 'startTime', label: 'Start time', type: 'text' },
+    { id: 'endTime', label: 'End time', type: 'text' },
+    { id: 'photo', label: 'Photo', type: 'media' },
+  ] },
+]
+const teamFields = [
+  { id: 'title', label: 'Name', type: 'text' },
+  { id: 'function', label: 'Function', type: 'text' },
+  { id: 'photo', label: 'Photo', type: 'media' },
+  { id: 'colleagues', label: 'Colleagues', type: 'relation', targetTableId: 'team', allowMultiple: true },
+]
+const offers: LoopItem[] = [
+  { id: 'offer-a', fields: { tableId: 'offers', title: 'Art', teammembers: ['marc', 'niko', 'draft', 'deleted', 'missing'], weeklySlots: [
+    { id: 'thu', cells: { weekday: 'thursday-id', startTime: '15:00', endTime: '18:30' } },
+    { id: 'fri', cells: { weekday: 'friday-id', startTime: '16:00', endTime: '19:00' } },
+  ] } },
+  { id: 'offer-b', fields: { tableId: 'offers', title: 'Media', teammembers: ['niko'], weeklySlots: [
+    { id: 'thu', cells: { weekday: 'monday-id', startTime: '10:00', endTime: '12:00' } },
+  ] } },
+  { id: 'offer-empty', fields: { tableId: 'offers', title: 'Empty', teammembers: [] } },
+]
+
+beforeAll(async () => {
+  fixture = await createTestDb()
+  const db = fixture.db
+  for (const [id, kind, fields] of [['offers', 'data', offerFields], ['team', 'postType', teamFields]] as const) {
+    await db`insert into data_tables (id, name, slug, kind, fields_json, singular_label, plural_label)
+      values (${id}, ${id}, ${id}, ${kind}, ${JSON.stringify(fields)}, ${id}, ${id})`
+  }
+  await db`insert into media_assets (id, filename, mime_type, size_bytes, storage_path, public_path, storage_adapter_id, externally_hosted)
+    values ('photo', 'team.png', 'image/png', 100, 'team.png', '/uploads/team.png', '', 0)`
+  for (const id of ['marc', 'niko', 'draft', 'deleted']) {
+    const cells = { title: id.toUpperCase(), function: `${id} role`, photo: 'photo', colleagues: ['niko'] }
+    const version = `${id}-v1`
+    await db`insert into data_rows (id, table_id, cells_json, slug, status)
+      values (${id}, 'team', ${JSON.stringify({ ...cells, title: 'UNPUBLISHED EDIT' })}, ${id}, ${id === 'draft' ? 'draft' : 'published'})`
+    await db`insert into data_row_versions (id, row_id, version_number, cells_json, slug)
+      values (${version}, ${id}, 1, ${JSON.stringify(cells)}, ${id})`
+    await db`update data_rows set active_version_id = ${version} where id = ${id}`
+  }
+  await db`update data_rows set deleted_at = '2026-01-01' where id = 'deleted'`
+  for (const offer of offers) {
+    await db`insert into data_rows (id, table_id, cells_json, slug)
+      values (${offer.id}, 'offers', ${JSON.stringify(offer.fields)}, ${offer.id})`
+  }
+})
+afterAll(async () => { await fixture.cleanup() })
+
+const page = () => makePage({
+  root: { moduleId: 'base.body', children: ['outer'] },
+  outer: { moduleId: 'base.loop', props: { sourceId: 'data.rows', filters: { tableId: 'offers' }, direction: 'asc', orderBy: 'slug', limit: 10 }, children: ['inner'] },
+  inner: { moduleId: 'base.loop', props: { sourceId: 'entry.field', filters: { fieldId: 'teammembers' }, direction: 'asc', limit: 10 }, children: ['card'] },
+  card: { moduleId: 'test.member', props: {}, dynamicBindings: {
+    offer: { source: 'parentEntry', field: 'title' },
+    name: { source: 'currentEntry', field: 'title' },
+    role: { source: 'currentEntry', field: 'function' },
+    photo: { source: 'currentEntry', field: 'photo' },
+  } },
+})
+const registry = makeRegistry({
+  'base.body': makeModule('base.body', { canHaveChildren: true, render: (_, children) => ({ html: `<main>${children.join('')}</main>` }) }),
+  'base.loop': makeModule('base.loop', { canHaveChildren: true }),
+  'test.member': makeModule('test.member', { render: (props) => ({ html: `<p>${props.offer}/${props.name}/${props.role}</p><img src="${props.photo}">` }) }),
+})
+
+describe('related entry loops', () => {
+  it('resolves nested relations for the supplied load-more slice without loading the first page again', async () => {
+    const tree = page()
+    const site = makeSite()
+    const slice = { items: [offers[1]!], totalItems: 3, pageNumber: 2, hasMore: true }
+    const loopData = await prefetchLoopData(tree, site, fixture.db, undefined, {
+      rootNodeId: 'outer', resolvedLoops: new Map([['outer', slice]]),
+    })
+    expect(loopData.get('outer')).toBe(slice)
+    const html = publishPage(tree, site, registry, { loopData }).html
+    expect(html).toContain('Media/NIKO/niko role')
+    expect(html).not.toContain('Art/')
+    expect(html).not.toContain('MARC')
+  })
+
+  it('projects repeater select labels and media for an individual entry without changing stored cells', async () => {
+    const cells = { weeklySlots: [{ id: 'thu', cells: { weekday: 'thursday-id', photo: 'photo' } }] }
+    const row: PublishedDataRow = {
+      id: 'offer-version', rowId: 'offer-a', tableId: 'offers', tableSlug: 'offers',
+      tableKind: 'postType', tableRouteBase: '/offers', versionNumber: 1, cells, slug: 'art',
+      featuredMediaId: null, featuredMediaPath: null, authorUserId: null, authorName: null,
+      authorRoleSlug: null, authorRoleName: null, publishedByUserId: null, publishedByName: null,
+      publishedByRoleSlug: null, publishedByRoleName: null,
+      publishedAt: '2026-01-01T00:00:00Z', createdAt: '2026-01-01T00:00:00Z',
+    }
+    const entry = await publishedDataRowToLoopItem(fixture.db, row)
+    const slots = resolveEntryFieldItems(entry.fields.weeklySlots)
+    expect(slots.items[0]?.fields).toMatchObject({ weekday: 'Thursday', photo: '/uploads/team.png' })
+    expect(cells.weeklySlots[0]?.cells).toEqual({ weekday: 'thursday-id', photo: 'photo' })
+  })
+
+  it('renders repeater cells per offer, including multiple slots and an empty field', async () => {
+    const tree = page()
+    tree.nodes.inner!.props.filters = { fieldId: 'weeklySlots' }
+    tree.nodes.card!.moduleId = 'test.slot'
+    tree.nodes.card!.dynamicBindings = {
+      offer: { source: 'parentEntry', field: 'title' },
+      day: { source: 'currentEntry', field: 'weekday' },
+      start: { source: 'currentEntry', field: 'startTime' },
+      end: { source: 'currentEntry', field: 'endTime' },
+    }
+    const modules = makeRegistry({
+      'base.body': makeModule('base.body', { canHaveChildren: true, render: (_, children) => ({ html: children.join('') }) }),
+      'base.loop': makeModule('base.loop', { canHaveChildren: true }),
+      'test.slot': makeModule('test.slot', { render: (p) => ({ html: `<p>${p.offer}/${p.day}/${p.start}/${p.end}</p>` }) }),
+    })
+    const site = makeSite()
+    const loopData = await prefetchLoopData(tree, site, fixture.db)
+    const html = publishPage(tree, site, modules, { loopData }).html
+    expect(html).toContain('Art/Thursday/15:00/18:30')
+    expect(html).toContain('Art/Friday/16:00/19:00')
+    expect(html).toContain('Media/Monday/10:00/12:00')
+    expect(html).not.toContain('Media/Thursday')
+    expect(html).not.toContain('Empty/')
+    const tables = [await getDataTable(fixture.db, { branchId: 'main' }, 'offers')].filter((t) => t !== null)
+    expect(entryScopeRepeater(tree, 'card', tables)?.fields.map((f) => f.id)).toEqual(['weekday', 'startTime', 'endTime', 'photo'])
+    expect(entryScopeTables(tree, 'card', tables)).toEqual([])
+  })
+
+  it('preserves repeater identity, ordering and the original value while exposing its cells', () => {
+    const value = offers[0]!.fields.weeklySlots
+    const result = resolveEntryFieldItems(value, { direction: 'desc', limit: 1 })
+    expect(result.totalItems).toBe(2)
+    expect(result.items[0]?.id).toBe('fri')
+    expect(result.items[0]?.fields).toMatchObject({ weekday: 'friday-id', startTime: '16:00', endTime: '19:00', index: 0 })
+    expect(result.items[0]?.fields.value).toEqual((value as unknown[])[1])
+  })
+
+  it('renders each offer with its own published team fields and resolved images', async () => {
+    const tree = page()
+    const site = makeSite()
+    const loopData = await prefetchLoopData(tree, site, fixture.db)
+    const html = publishPage(tree, site, registry, { loopData }).html
+    expect(html).toContain('Art/MARC/marc role')
+    expect(html).toContain('Art/NIKO/niko role')
+    expect(html).toContain('Media/NIKO/niko role')
+    expect(html).not.toContain('Media/MARC')
+    expect(html).not.toContain('UNPUBLISHED EDIT')
+    expect(html).not.toContain('DRAFT')
+    expect(html).not.toContain('DELETED')
+    expect(html.match(/src="\/uploads\/team.png"/g)).toHaveLength(3)
+    expect(html.indexOf('Art/MARC')).toBeLessThan(html.indexOf('Art/NIKO'))
+  })
+
+  it('supports an entry-template seed and reversed slices after missing targets are removed', async () => {
+    const tree = page()
+    tree.rootNodeId = 'inner'
+    tree.nodes.inner!.props.offset = 1
+    tree.nodes.inner!.props.limit = 1
+    tree.nodes.inner!.props.direction = 'desc'
+    const loopData = await prefetchLoopData(tree, makeSite(), fixture.db, undefined, { entryStack: [offers[0]!] })
+    const html = publishPage(tree, makeSite(), registry, { loopData, templateContext: { entryStack: [offers[0]!] } }).html
+    expect(html).toContain('Art/MARC')
+    expect(html).not.toContain('Art/NIKO')
+  })
+
+  it('resolves deeper relation loops without recursively expanding cyclic content', async () => {
+    const tree = page()
+    tree.nodes.card!.moduleId = 'base.loop'
+    tree.nodes.card!.props = { sourceId: 'entry.field', filters: { fieldId: 'colleagues' }, direction: 'asc', limit: 10 }
+    const loopData = await prefetchLoopData(tree, makeSite(), fixture.db)
+    expect(loopData.get('card')?.items.map((item) => item.fields.title)).toEqual(['NIKO', 'NIKO', 'NIKO'])
+  })
+
+  it('keeps an empty relation empty and preserves ordinary string collections', async () => {
+    const related = await prefetchRelationLoopItems(fixture.db, offers, 'teammembers', { limit: 10, offset: 0, direction: 'asc' })
+    expect(related.get(entryFieldContextKey(offers[2]!))).toEqual([])
+    const ordinary = await prefetchRelationLoopItems(fixture.db, offers, 'title', { limit: 10, offset: 0, direction: 'asc' })
+    expect(ordinary.size).toBe(0)
+    expect(resolveEntryFieldItems(['marc']).items[0]?.fields.value).toBe('marc')
+  })
+
+  it('offers target table fields inside a relation, including another nested relation', async () => {
+    const scope = { branchId: 'main' }
+    const tables = (await Promise.all(['offers', 'team'].map((id) => getDataTable(fixture.db, scope, id)))).filter((table) => table !== null)
+    const tree = page()
+    expect(entryScopeTables(tree, 'inner', tables).map((table) => table.id)).toEqual(['offers'])
+    expect(entryScopeTables(tree, 'card', tables)[0]?.fields.map((field) => field.id)).toContain('function')
+    tree.nodes.inner!.props.filters = { fieldId: 'not-a-relation' }
+    expect(entryScopeTables(tree, 'card', tables)).toEqual([])
+  })
+
+  it('uses the same exact-ID projection for preview and excludes unrelated rows', async () => {
+    const result = await fetchPublishedDataRowItems(fixture.db, {
+      tableId: 'team', rowIds: ['niko', 'missing', 'draft'], limit: 6, offset: 0, direction: 'asc', orderBy: 'slug',
+    })
+    expect(result.items.map((item) => item.fields.title)).toEqual(['NIKO'])
+    expect(result.items[0]?.fields.photo).toBe('/uploads/team.png')
+  })
+
+  it('reads target drafts from the selected branch without changing public main output', async () => {
+    await forkBranch(fixture.db, { id: 'relation-preview', name: 'Relation preview', fromBranchId: 'main', createdByUserId: null })
+    const loopData = await prefetchLoopData(page(), makeSite(), fixture.db, undefined, { branchId: 'relation-preview' })
+    const members = loopData.get('inner')!.items
+    expect(members.length).toBeGreaterThan(0)
+    expect(members.every((member) => member.fields.tableId === 'relation-preview:team')).toBe(true)
+    expect(members.every((member) => member.fields.title === 'UNPUBLISHED EDIT')).toBe(true)
+    const main = await prefetchLoopData(page(), makeSite(), fixture.db)
+    expect(main.get('inner')!.items.map((member) => member.fields.title)).toEqual(['MARC', 'NIKO', 'NIKO'])
+  })
+})
diff --git a/src/__tests__/property-controls/AnimationControl.test.tsx b/src/__tests__/property-controls/AnimationControl.test.tsx
new file mode 100644
index 000000000..5f25fb409
--- /dev/null
+++ b/src/__tests__/property-controls/AnimationControl.test.tsx
@@ -0,0 +1,31 @@
+import { afterEach, expect, it } from 'bun:test'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { AnimationControl } from '@site/property-controls/AnimationControl'
+
+afterEach(cleanup)
+
+it('edits duration while preserving delay, direction and easing', () => {
+  const changes: string[] = []
+  render(<AnimationControl propKey="animation" label="Animation"
+    value="instatic-slide-up 600ms ease-out 200ms 1 both" onChange={(_, value) => changes.push(value)} />)
+  fireEvent.change(screen.getByLabelText('Duration (ms)'), { target: { value: '900' } })
+  expect(changes.at(-1)).toBe('instatic-slide-up 900ms ease-out 200ms 1 both')
+  fireEvent.change(screen.getByLabelText('Delay (ms)'), { target: { value: '-5' } })
+  expect(changes).toHaveLength(1)
+})
+
+it('shows custom CSS without rewriting imported animations', () => {
+  const changes: string[] = []
+  render(<AnimationControl propKey="animation" label="Animation"
+    value="custom-spin 2s linear infinite" onChange={(_, value) => changes.push(value)} />)
+  expect(screen.getByLabelText('Animation CSS').getAttribute('value')).toBe('custom-spin 2s linear infinite')
+  expect(changes).toHaveLength(0)
+})
+
+it('preserves the scroll trigger when changing timing', () => {
+  const changes: string[] = []
+  render(<AnimationControl propKey="animation" label="Animation"
+    value="instatic-slide-up-scroll 600ms ease-out 200ms 1 both" onChange={(_, value) => changes.push(value)} />)
+  fireEvent.change(screen.getByLabelText('Duration (ms)'), { target: { value: '900' } })
+  expect(changes.at(-1)).toBe('instatic-slide-up-scroll 900ms ease-out 200ms 1 both')
+})
diff --git a/src/__tests__/publisher/animationPresets.test.ts b/src/__tests__/publisher/animationPresets.test.ts
new file mode 100644
index 000000000..24f034d11
--- /dev/null
+++ b/src/__tests__/publisher/animationPresets.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'bun:test'
+import { generateClassCSS } from '@core/publisher'
+import { classKindSelector, type StyleRule } from '@core/page-tree'
+import { parseAnimationPreset } from '@core/animationPresets'
+import { publishPage } from '@core/publisher'
+import { makePage, makeSite, makeRegistry } from './helpers'
+
+describe('entrance animation CSS', () => {
+  const rule: StyleRule = {
+    id: 'card', name: 'card', kind: 'class', selector: classKindSelector('card'), order: 0,
+    styles: { animation: 'instatic-slide-up 600ms ease-out 200ms 1 both', transform: 'rotate(2deg)' },
+    contextStyles: {}, createdAt: 0, updatedAt: 0,
+  }
+
+  it('publishes required keyframes alongside the class without unused presets', () => {
+    const css = generateClassCSS({ card: rule }, [])
+    expect(css).toContain('animation: instatic-slide-up 600ms ease-out 200ms 1 both;')
+    expect(css).toContain('@keyframes instatic-slide-up')
+    expect(css).toContain('translate: 0 24px;')
+    expect(css).toContain('transform: rotate(2deg);')
+    expect(css).not.toContain('@keyframes instatic-zoom-in')
+  })
+
+  it('reduced motion keeps content visible throughout the animation and delay', () => {
+    const css = generateClassCSS({ card: rule }, [])
+    const reduced = css.slice(css.indexOf('@media (prefers-reduced-motion: reduce)'))
+    expect(reduced).toContain('from { opacity: 1; translate: 0 0; }')
+    expect(reduced).not.toContain('opacity: 0')
+  })
+
+  it('supports animations authored only at a breakpoint', () => {
+    const css = generateClassCSS({ card: { ...rule, styles: {}, contextStyles: { mobile: rule.styles } } }, [{ id: 'mobile', width: 375 }])
+    expect(css).toContain('@keyframes instatic-slide-up')
+  })
+
+  it('leaves custom animation values intact and does not add preset CSS', () => {
+    const css = generateClassCSS({ card: { ...rule, styles: { animation: 'custom-spin 2s linear infinite' } } }, [])
+    expect(css).toContain('custom-spin 2s linear infinite')
+    expect(css).not.toContain('@keyframes')
+    expect(parseAnimationPreset('custom-spin 2s linear infinite')).toBeNull()
+  })
+
+  it('round-trips the scroll trigger without defining hiding CSS keyframes', () => {
+    const animation = 'instatic-slide-up-scroll 900ms ease-out 150ms 1 both'
+    expect(parseAnimationPreset(animation)).toEqual({ name: 'instatic-slide-up', trigger: 'scroll', duration: 900, easing: 'ease-out', delay: 150 })
+    const css = generateClassCSS({ card: { ...rule, styles: { animation } } }, [])
+    expect(css).toContain(animation)
+    expect(css).not.toContain('@keyframes')
+  })
+
+  it('includes the scroll runtime and self CSP only when scroll effects are configured', () => {
+    const page = makePage({})
+    const site = makeSite()
+    const registry = makeRegistry({})
+    const plain = publishPage(page, site, registry).html
+    expect(plain).not.toContain('scroll-animation-runtime.js')
+    site.styleRules = { card: { ...rule, styles: { animation: 'instatic-fade-in-scroll 600ms ease-out 0ms 1 both' } } }
+    const html = publishPage(page, site, registry).html
+    expect(html).toContain('src="/_instatic/scroll-animation-runtime.js"')
+    expect(html).toContain("script-src 'self'")
+  })
+})
diff --git a/src/__tests__/publisher/previewOverlay.test.tsx b/src/__tests__/publisher/previewOverlay.test.tsx
index e54e9a040..e8769d052 100644
--- a/src/__tests__/publisher/previewOverlay.test.tsx
+++ b/src/__tests__/publisher/previewOverlay.test.tsx
@@ -28,6 +28,8 @@ function resetStore() {
   useEditorStore.setState({
     site: null,
     activePageId: null,
+    activeDocument: null,
+    componentPreviewSelection: {},
     selectedNodeId: null,
     selectedNodeIds: [],
     hoveredNodeId: null,
@@ -171,6 +173,18 @@ describe('PreviewOverlay — DOM rendering', () => {
     expect(iframe).not.toBeNull()
   })
 
+  it('previews the active component rather than the previously active page', async () => {
+    useEditorStore.getState().createSite('Component preview')
+    useEditorStore.getState().openPreview()
+    const vcId = useEditorStore.getState().createVisualComponent('Team card')
+    useEditorStore.getState().setActiveDocument({ kind: 'visualComponent', vcId })
+    render(<PreviewOverlay />)
+    const iframe = await screen.findByTestId('preview-iframe')
+    expect(iframe.getAttribute('title')).toBe('Preview: Team card')
+    const call = runtimePreviewCalls.find((call) => String(call.input).endsWith('/runtime/preview'))
+    expect(JSON.parse(String(call?.init?.body)).pageId).toBe(`vc-virtual:${vcId}`)
+  })
+
   it('iframe has a non-empty srcdoc attribute', async () => {
     openPreviewWithSite()
     render(<PreviewOverlay />)
diff --git a/src/__tests__/publisher/richtextSanitize.test.ts b/src/__tests__/publisher/richtextSanitize.test.ts
index de22a050f..11d67cbc5 100644
--- a/src/__tests__/publisher/richtextSanitize.test.ts
+++ b/src/__tests__/publisher/richtextSanitize.test.ts
@@ -12,6 +12,7 @@ import { describe, it, expect } from 'bun:test'
 import { escapeProps, publishPage, renderNode } from '@core/publisher'
 import type { PropertySchema } from '@core/module-engine'
 import { makeModule, makeRegistry, makePage, makeSite, makeAccumulators } from './helpers'
+import { renderMarkdownToHtml } from '@core/markdown/renderMarkdown'
 
 // ---------------------------------------------------------------------------
 // escapeProps richtext sanitization — routed by the prop's declared TYPE.
@@ -73,6 +74,17 @@ describe('publishPage richtext sanitization (Constraint #368)', () => {
   })
   const registry = makeRegistry({ 'test.content': contentModule })
 
+  it('publishes aligned content and download links after sanitization', () => {
+    const page = makePage({ root: {
+      moduleId: 'test.content',
+      props: { html: renderMarkdownToHtml('<h2 align="right">[Wallpaper](/uploads/wallpaper.png "instatic:download")</h2>') },
+    } })
+    const { html } = publishPage(page, site, registry)
+    expect(html).toContain('class="instatic-content-align--right"')
+    expect(html).toContain('download=""')
+    expect(html).toContain('.instatic-content-align--right { text-align: right; }')
+  })
+
   it('<script> in html prop is stripped from published HTML', () => {
     const page = makePage({
       root: {
diff --git a/src/__tests__/publisher/scrollAnimationRuntime.test.ts b/src/__tests__/publisher/scrollAnimationRuntime.test.ts
new file mode 100644
index 000000000..eaca53f94
--- /dev/null
+++ b/src/__tests__/publisher/scrollAnimationRuntime.test.ts
@@ -0,0 +1,82 @@
+import { afterEach, expect, it, spyOn } from 'bun:test'
+import { installScrollAnimations, SCROLL_ANIMATION_FRAMES } from '@core/scrollAnimationRuntime'
+
+const cleanups: (() => void)[] = []
+afterEach(() => { cleanups.reverse().forEach(cleanup => cleanup()); cleanups.length = 0; document.body.innerHTML = '' })
+
+function harness(reduced = false) {
+  const win = document.defaultView!
+  let intersect: (element: Element) => void = () => {}
+  let changed: () => void = () => {}
+  const animations: { pause: ReturnType<typeof spyOn>; play: ReturnType<typeof spyOn>; cancel: ReturnType<typeof spyOn> }[] = []
+  const media = { matches: reduced, addEventListener: (_name: string, callback: () => void) => { changed = callback }, removeEventListener: () => {} }
+  const properties = ['IntersectionObserver', 'matchMedia'] as const
+  const descriptors = properties.map(name => Object.getOwnPropertyDescriptor(win, name))
+  properties.forEach((name, index) => cleanups.push(() => {
+    const descriptor = descriptors[index]
+    if (descriptor) Object.defineProperty(win, name, descriptor)
+    else Reflect.deleteProperty(win, name)
+  }))
+  Object.defineProperty(win, 'matchMedia', { configurable: true, value: () => media })
+  Object.defineProperty(win, 'IntersectionObserver', { configurable: true, value: class {
+    constructor(callback: IntersectionObserverCallback) {
+      intersect = element => callback([{ target: element, isIntersecting: true } as IntersectionObserverEntry], this as unknown as IntersectionObserver)
+    }
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } })
+  const originalAnimate = Object.getOwnPropertyDescriptor(win.Element.prototype, 'animate')
+  Object.defineProperty(win.Element.prototype, 'animate', { configurable: true, value: () => {
+    const animation = { currentTime: 0, pause() {}, play() {}, cancel() {} }
+    const calls = { pause: spyOn(animation, 'pause'), play: spyOn(animation, 'play'), cancel: spyOn(animation, 'cancel') }
+    animations.push(calls)
+    return animation
+  } })
+  cleanups.push(() => {
+    if (originalAnimate) Object.defineProperty(win.Element.prototype, 'animate', originalAnimate)
+    else Reflect.deleteProperty(win.Element.prototype, 'animate')
+  })
+  const element = document.createElement('div')
+  element.style.animationName = 'instatic-slide-up-scroll'
+  element.style.animationDuration = '0.6s'
+  element.style.animationDelay = '0.15s'
+  element.style.animationTimingFunction = 'ease-out'
+  document.body.append(element)
+  const stop = installScrollAnimations(document, SCROLL_ANIMATION_FRAMES)
+  cleanups.push(stop)
+  return { element, animations, intersect: () => intersect(element), reduce: () => { media.matches = true; changed() }, stop }
+}
+
+it('waits for intersection and starts only once', () => {
+  const test = harness()
+  expect(test.animations).toHaveLength(1)
+  expect(test.animations[0].pause).toHaveBeenCalledTimes(1)
+  expect(test.animations[0].play).not.toHaveBeenCalled()
+  test.intersect()
+  test.intersect()
+  expect(test.animations[0].play).toHaveBeenCalledTimes(1)
+})
+
+it('does not hide content for reduced motion', () => {
+  const test = harness(true)
+  expect(test.animations).toHaveLength(0)
+})
+
+it('discovers entries inserted after the initial render', async () => {
+  const test = harness()
+  document.body.append(test.element.cloneNode())
+  await new Promise(resolve => setTimeout(resolve, 40))
+  expect(test.animations).toHaveLength(2)
+  expect(test.animations[1].play).not.toHaveBeenCalled()
+})
+
+it('cancels pending effects on a reduced-motion change or cleanup', () => {
+  const test = harness()
+  test.reduce()
+  expect(test.animations[0].cancel).toHaveBeenCalledTimes(1)
+  test.intersect()
+  expect(test.animations[0].play).not.toHaveBeenCalled()
+  test.stop()
+  expect(test.animations[0].cancel).toHaveBeenCalledTimes(2)
+})
diff --git a/src/__tests__/server/cmsTemplateRoutes.test.ts b/src/__tests__/server/cmsTemplateRoutes.test.ts
index e76e9eef7..2ef054daa 100644
--- a/src/__tests__/server/cmsTemplateRoutes.test.ts
+++ b/src/__tests__/server/cmsTemplateRoutes.test.ts
@@ -23,6 +23,18 @@ function makeTemplateRouteFakeDb(handlers: QueryHandler[]) {
       const result = handler(sql, params)
       if (result) return result
     }
+    if (sql.startsWith('select logical_id, name, slug, kind, route_base')) {
+      expect(params).toEqual(['posts', 'main'])
+      return {
+        rows: [{
+          logical_id: 'posts', name: 'Posts', slug: 'posts', kind: 'postType', route_base: '/posts',
+          singular_label: 'Post', plural_label: 'Posts', primary_field_id: 'title',
+          fields_json: [], system: true, created_by_user_id: null, updated_by_user_id: null,
+          created_at: '2026-05-01T10:00:00Z', updated_at: '2026-05-01T10:00:00Z',
+        }],
+        rowCount: 1,
+      }
+    }
     throw new Error(`Unhandled SQL: ${rawSql}`)
   })
 }
diff --git a/src/__tests__/server/loopPrefetch.test.ts b/src/__tests__/server/loopPrefetch.test.ts
index 32842b94a..c481c5a32 100644
--- a/src/__tests__/server/loopPrefetch.test.ts
+++ b/src/__tests__/server/loopPrefetch.test.ts
@@ -18,8 +18,8 @@ import { makePage, makeSite } from '../publisher/helpers'
 import '@core/loops/sources'
 
 describe('loopPrefetch', () => {
-  it('maps published data row authorship into public loop fields', () => {
-    const item = publishedDataRowToLoopItem({
+  it('maps published data row authorship into public loop fields', async () => {
+    const item = await publishedDataRowToLoopItem(createFakeDb(async () => ({ rows: [], rowCount: 0 })), {
       id: 'version_1',
       rowId: 'row_1',
       tableId: 'posts',
diff --git a/src/__tests__/templates/dateTokens.test.ts b/src/__tests__/templates/dateTokens.test.ts
new file mode 100644
index 000000000..ff973e09d
--- /dev/null
+++ b/src/__tests__/templates/dateTokens.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'bun:test'
+import { interpolateTokens } from '@core/templates/tokenInterpolation'
+import type { TemplateRenderDataContext } from '@core/templates/renderDataContext'
+
+function context(value: unknown): TemplateRenderDataContext {
+  return { entryStack: [{ id: 'event', fields: { datum: value } }] }
+}
+
+describe('date tokens', () => {
+  it('formats a calendar date with its correct German weekday', () => {
+    expect(interpolateTokens('{currentEntry.datum:date(de-DE,full)}', context('2026-09-18')))
+      .toBe('Freitag, 18. September 2026')
+  })
+
+  it('keeps the original sortable value and supports other locales', () => {
+    expect(interpolateTokens('{currentEntry.datum} / {currentEntry.datum:date(en-US,long)}', context('2026-09-18')))
+      .toBe('2026-09-18 / September 18, 2026')
+  })
+
+  it.each([undefined, null, '', '2026-02-30', 'not a date', '2026-09-18T12:00:00Z', {}])(
+    'uses the normal fallback for missing or invalid calendar dates: %p', (value) => {
+      expect(interpolateTokens('{currentEntry.datum:date(de-DE,full)|Termin folgt}', context(value)))
+        .toBe('Termin folgt')
+    },
+  )
+
+  it('handles leap dates without local timezone shifts', () => {
+    expect(interpolateTokens('{currentEntry.datum:date(de-DE,long)}', context('2028-02-29')))
+      .toBe('29. Februar 2028')
+  })
+})
diff --git a/src/__tests__/utils/urlValidation.test.ts b/src/__tests__/utils/urlValidation.test.ts
index 4e93c491c..36a2e1f76 100644
--- a/src/__tests__/utils/urlValidation.test.ts
+++ b/src/__tests__/utils/urlValidation.test.ts
@@ -65,8 +65,16 @@ describe('isValidUrl', () => {
       expect(isValidUrl('not a url')).toBe(false)
     })
 
-    it('rejects relative paths', () => {
-      expect(isValidUrl('/relative/path')).toBe(false)
+    it('accepts explicit local navigation references', () => {
+      for (const url of ['/hochst-web#angebote', '#kontakt', './event', '../events', '?page=2', 'tel:+49621293']) {
+        expect(isValidUrl(url)).toBe(true)
+      }
+    })
+
+    it('rejects disguised external paths and control characters', () => {
+      for (const url of ['/\\example.com', '/\n/example.com', 'java\tscript:alert(1)', '/path with spaces']) {
+        expect(isValidUrl(url)).toBe(false)
+      }
     })
 
     it('rejects protocol-relative URLs', () => {
diff --git a/src/admin/pages/content/TiptapBodyEditor.tsx b/src/admin/pages/content/TiptapBodyEditor.tsx
index 25f154c04..04192928a 100644
--- a/src/admin/pages/content/TiptapBodyEditor.tsx
+++ b/src/admin/pages/content/TiptapBodyEditor.tsx
@@ -34,6 +34,7 @@ import {
   proseMirrorDocToMarkdown,
 } from '@core/markdown/markdownDocument'
 import { MediaNode, type MediaAttributes } from './nodes/MediaNode'
+import { ContentLinkAttributes } from './nodes/ContentLinkAttributes'
 import { MediaUploadPlaceholder } from './nodes/MediaUploadPlaceholder'
 import { useEditorMediaDrop } from './hooks/useEditorMediaDrop'
 import {
@@ -127,6 +128,7 @@ export function TiptapBodyEditor({
     immediatelyRender: false,
     editable: !readOnly,
     extensions: [
+      ContentLinkAttributes,
       StarterKit.configure({
         heading: { levels: [2, 3, 4] },
         // The link extension's "open on click" handler is helpful in
@@ -150,17 +152,7 @@ export function TiptapBodyEditor({
       TableRow,
       TableHeader,
       TableCell,
-      // Text alignment for paragraphs + headings. Markdown has no
-      // native alignment syntax, so alignment is a session-only
-      // affordance for v1 (resets on save+reload); persisting it would
-      // need inline HTML wrappers + a publisher CSS rule, both a
-      // separate follow-up.
-      //
-      // `defaultAlignment: null` matches the extension's own default so
-      // every existing doc loaded from markdown stays valid against
-      // the schema. Passing 'left' here was the cause of the test
-      // regression — the schema gained a required attr that the
-      // markdown parser doesn't populate, and PM rejected the doc.
+      // Alignment is persisted by the shared Markdown bridge.
       TextAlign.configure({
         types: ['paragraph', 'heading'],
         alignments: ['left', 'center', 'right', 'justify'],
diff --git a/src/admin/pages/content/components/BodyBubbleMenu/BodyBubbleMenu.module.css b/src/admin/pages/content/components/BodyBubbleMenu/BodyBubbleMenu.module.css
index 5babdc1bf..66c915f36 100644
--- a/src/admin/pages/content/components/BodyBubbleMenu/BodyBubbleMenu.module.css
+++ b/src/admin/pages/content/components/BodyBubbleMenu/BodyBubbleMenu.module.css
@@ -44,6 +44,8 @@
 
 .linkForm {
     display: inline-flex;
+    flex-wrap: wrap;
+    max-width: min(32rem, 85vw);
     align-items: center;
     gap: var(--space-3xs);
 }
diff --git a/src/admin/pages/content/components/BodyBubbleMenu/BodyBubbleMenu.tsx b/src/admin/pages/content/components/BodyBubbleMenu/BodyBubbleMenu.tsx
index d9f3ce348..ec35c70c2 100644
--- a/src/admin/pages/content/components/BodyBubbleMenu/BodyBubbleMenu.tsx
+++ b/src/admin/pages/content/components/BodyBubbleMenu/BodyBubbleMenu.tsx
@@ -19,6 +19,8 @@ import { BubbleMenu } from '@tiptap/react/menus'
 import type { VirtualElement } from '@floating-ui/dom'
 import { Button } from '@ui/components/Button'
 import { Input } from '@ui/components/Input'
+import { isSafeUrl } from '@core/html-sanitize'
+import { LinkTargetFields } from '../BodyFloatingMenu/LinkTargetFields'
 import { ContextMenu, ContextMenuItem } from '@ui/components/ContextMenu'
 import type { IconProps } from 'pixel-art-icons/types'
 import { ChevronDownIcon } from 'pixel-art-icons/icons/chevron-down'
@@ -326,17 +328,18 @@ export function BodyBubbleMenu({ editor, iframeEl }: BodyBubbleMenuProps) {
         ) : (
           <LinkEditor
             initial={linkDraft}
+            initialDownload={editor.getAttributes('link').download != null}
             onCancel={() => setLinkDraft(null)}
             onClear={() => {
               editor.chain().focus().unsetLink().run()
               setLinkDraft(null)
             }}
-            onSubmit={(href) => {
+            onSubmit={(href, download) => {
               const trimmed = href.trim()
               if (!trimmed) {
                 editor.chain().focus().unsetLink().run()
               } else {
-                editor.chain().focus().extendMarkRange('link').setLink({ href: trimmed }).run()
+                editor.chain().focus().extendMarkRange('link').setMark('link', { href: trimmed, download: download ? '' : null }).run()
               }
               setLinkDraft(null)
             }}
@@ -496,19 +499,22 @@ function MarkButton({ label, icon: Icon, active, onClick }: MarkButtonProps) {
 
 interface LinkEditorProps {
   initial: string
+  initialDownload: boolean
   onCancel: () => void
   onClear: () => void
-  onSubmit: (href: string) => void
+  onSubmit: (href: string, download: boolean) => void
 }
 
-function LinkEditor({ initial, onCancel, onClear, onSubmit }: LinkEditorProps) {
+function LinkEditor({ initial, initialDownload, onCancel, onClear, onSubmit }: LinkEditorProps) {
   const [value, setValue] = useState(initial)
+  const [download, setDownload] = useState(initialDownload)
+  const valid = !value.trim() || isSafeUrl(value.trim())
   return (
     <form
       className={styles.linkForm}
       onSubmit={(event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
-        onSubmit(value)
+        if (valid) onSubmit(value, download)
       }}
     >
       <Input
@@ -526,7 +532,9 @@ function LinkEditor({ initial, onCancel, onClear, onSubmit }: LinkEditorProps) {
           }
         }}
       />
-      <Button type="submit" variant="primary" size="xs">
+      <LinkTargetFields url={value} download={download} onDownloadChange={setDownload}
+        onUrlChange={setValue} />
+      <Button type="submit" variant="primary" size="xs" disabled={!valid}>
         Apply
       </Button>
       {initial.length > 0 && (
diff --git a/src/admin/pages/content/components/BodyFloatingMenu/BodyFloatingMenu.tsx b/src/admin/pages/content/components/BodyFloatingMenu/BodyFloatingMenu.tsx
index 15ba7487f..9daa326a5 100644
--- a/src/admin/pages/content/components/BodyFloatingMenu/BodyFloatingMenu.tsx
+++ b/src/admin/pages/content/components/BodyFloatingMenu/BodyFloatingMenu.tsx
@@ -30,6 +30,8 @@ import { MoreVerticalSolidIcon } from 'pixel-art-icons/icons/more-vertical-solid
 import { ImagesSolidIcon } from 'pixel-art-icons/icons/images-solid'
 import { CopySolidIcon } from 'pixel-art-icons/icons/copy-solid'
 import { TrashSolidIcon } from 'pixel-art-icons/icons/trash-solid'
+import { LinkIcon } from 'pixel-art-icons/icons/link'
+import { InsertLinkDialog } from './InsertLinkDialog'
 import styles from './BodyFloatingMenu.module.css'
 import type { ReactNode } from 'react'
 
@@ -51,6 +53,7 @@ interface BodyFloatingMenuProps {
 }
 
 interface QuickInsertContext {
+  onInsertLink: () => void
   editor: Editor
   /**
    * A pre-focused, pre-positioned chain — focus has been restored to the
@@ -137,6 +140,16 @@ const QUICK_INSERT: QuickInsertOption[] = [
   },
 
   // ── Insert ───────────────────────────────────────────────────────────
+  {
+    section: 'insert',
+    label: 'Link',
+    description: 'Insert a text link',
+    icon: <LinkIcon size={14} aria-hidden="true" />,
+    apply: ({ onInsertLink }) => {
+      onInsertLink()
+      return true
+    },
+  },
   {
     section: 'insert',
     label: 'Image / Video',
@@ -220,6 +233,7 @@ interface ButtonPosition {
 }
 
 export function BodyFloatingMenu({ editor, onPickMedia, iframeEl }: BodyFloatingMenuProps) {
+  const [linkPosition, setLinkPosition] = useState<number | null>(null)
   // The button's vertical position. `null` means "don't render" — the
   // selection isn't on an empty top-level paragraph, or the editor is
   // blurred and we don't want a sticky affordance.
@@ -283,7 +297,7 @@ export function BodyFloatingMenu({ editor, onPickMedia, iframeEl }: BodyFloating
   // opening it (ContextMenu autofocuses its first item, blurring the
   // editor) would immediately unmount it and the user could never
   // click an option.
-  if (!position && !menuRect) return null
+  if (!position && !menuRect && linkPosition === null) return null
 
   return (
     <>
@@ -354,7 +368,10 @@ export function BodyFloatingMenu({ editor, onPickMedia, iframeEl }: BodyFloating
                     const chain = restoredPos !== null
                       ? editor.chain().focus(restoredPos)
                       : editor.chain().focus()
-                    option.apply({ editor, chain, onPickMedia })
+                    option.apply({
+                      editor, chain, onPickMedia,
+                      onInsertLink: () => setLinkPosition(restoredPos ?? editor.state.selection.from),
+                    })
                     setMenuRect(null)
                     selectionSnapshotRef.current = null
                   }}
@@ -367,6 +384,9 @@ export function BodyFloatingMenu({ editor, onPickMedia, iframeEl }: BodyFloating
           })}
         </ContextMenu>
       )}
+      {linkPosition !== null && (
+        <InsertLinkDialog editor={editor} position={linkPosition} onClose={() => setLinkPosition(null)} />
+      )}
     </>
   )
 }
diff --git a/src/admin/pages/content/components/BodyFloatingMenu/InsertLinkDialog.module.css b/src/admin/pages/content/components/BodyFloatingMenu/InsertLinkDialog.module.css
new file mode 100644
index 000000000..8c791a936
--- /dev/null
+++ b/src/admin/pages/content/components/BodyFloatingMenu/InsertLinkDialog.module.css
@@ -0,0 +1,4 @@
+.form {
+    display: grid;
+    gap: var(--space-l);
+}
diff --git a/src/admin/pages/content/components/BodyFloatingMenu/InsertLinkDialog.tsx b/src/admin/pages/content/components/BodyFloatingMenu/InsertLinkDialog.tsx
new file mode 100644
index 000000000..60ba842ed
--- /dev/null
+++ b/src/admin/pages/content/components/BodyFloatingMenu/InsertLinkDialog.tsx
@@ -0,0 +1,49 @@
+import { useId, useState } from 'react'
+import type { Editor } from '@tiptap/core'
+import { isSafeUrl } from '@core/html-sanitize'
+import { Dialog } from '@ui/components/Dialog'
+import { Input } from '@ui/components/Input'
+import { FormField } from '@ui/components/FormField'
+import { Button } from '@ui/components/Button'
+import { LinkTargetFields } from './LinkTargetFields'
+import styles from './InsertLinkDialog.module.css'
+
+export function InsertLinkDialog({ editor, position, onClose }: {
+  editor: Editor
+  position: number
+  onClose: () => void
+}) {
+  const id = useId()
+  const [text, setText] = useState('')
+  const [url, setUrl] = useState('')
+  const [download, setDownload] = useState(false)
+  const href = url.trim()
+  const valid = href.length > 0 && isSafeUrl(href)
+
+  return (
+    <Dialog open title="Insert link" onClose={onClose} size="sm"
+      footer={<Button type="submit" form={`${id}-form`} variant="primary" disabled={!valid}>Insert link</Button>}>
+      <form id={`${id}-form`} className={styles.form} onSubmit={(event) => {
+        event.preventDefault()
+        if (!valid || editor.isDestroyed) return
+        editor.chain().focus().insertContentAt(position, {
+          type: 'text',
+          text: text.trim() || href,
+          marks: [{ type: 'link', attrs: { href, download: download ? '' : null } }],
+        }).run()
+        onClose()
+      }}>
+        <FormField label="Link text" htmlFor={`${id}-text`}>
+          <Input id={`${id}-text`} autoFocus value={text} onChange={(event) => setText(event.target.value)} />
+        </FormField>
+        <FormField label="Link URL" htmlFor={`${id}-url`}>
+          <Input id={`${id}-url`} value={url} placeholder="https:// or /page"
+            invalid={href.length > 0 && !valid}
+            onChange={(event) => setUrl(event.target.value)} />
+        </FormField>
+        <LinkTargetFields url={url} download={download} onDownloadChange={setDownload}
+          onUrlChange={(value, filename) => { setUrl(value); if (!text.trim()) setText(filename) }} />
+      </form>
+    </Dialog>
+  )
+}
diff --git a/src/admin/pages/content/components/BodyFloatingMenu/LinkTargetFields.module.css b/src/admin/pages/content/components/BodyFloatingMenu/LinkTargetFields.module.css
new file mode 100644
index 000000000..2959b6887
--- /dev/null
+++ b/src/admin/pages/content/components/BodyFloatingMenu/LinkTargetFields.module.css
@@ -0,0 +1,10 @@
+.fields {
+    display: grid;
+    gap: var(--space-l);
+    min-width: 0;
+    width: 100%;
+}
+
+.libraryButton {
+    justify-self: start;
+}
diff --git a/src/admin/pages/content/components/BodyFloatingMenu/LinkTargetFields.tsx b/src/admin/pages/content/components/BodyFloatingMenu/LinkTargetFields.tsx
new file mode 100644
index 000000000..5260ea86f
--- /dev/null
+++ b/src/admin/pages/content/components/BodyFloatingMenu/LinkTargetFields.tsx
@@ -0,0 +1,34 @@
+import { useId, useState } from 'react'
+import { MediaPickerModal } from '@admin/pages/media/components/MediaPickerModal/MediaPickerModal'
+import { Button } from '@ui/components/Button'
+import { Select } from '@ui/components/Select'
+import { FormField } from '@ui/components/FormField'
+import styles from './LinkTargetFields.module.css'
+
+export function LinkTargetFields({ url, download, onUrlChange, onDownloadChange }: {
+  url: string
+  download: boolean
+  onUrlChange: (url: string, filename: string) => void
+  onDownloadChange: (download: boolean) => void
+}) {
+  const [picking, setPicking] = useState(false)
+  const id = useId()
+  return <>
+    <div className={styles.fields}>
+      <Button type="button" variant="secondary" size="md" className={styles.libraryButton}
+        onClick={() => setPicking(true)}>Media library</Button>
+      <FormField label="Link action" htmlFor={id}>
+        <Select id={id} value={download ? 'download' : 'open'}
+          onChange={(event) => onDownloadChange(event.target.value === 'download')}>
+          <option value="open">Open</option>
+          <option value="download">Download</option>
+        </Select>
+      </FormField>
+    </div>
+    <MediaPickerModal open={picking} mediaKind="any" currentValue={url}
+      onClose={() => setPicking(false)} onPick={(asset) => {
+        onUrlChange(asset.publicPath, asset.filename)
+        setPicking(false)
+      }} />
+  </>
+}
diff --git a/src/admin/pages/content/components/LiveCanvas/LiveCanvas.tsx b/src/admin/pages/content/components/LiveCanvas/LiveCanvas.tsx
index 94c48049b..83113ba46 100644
--- a/src/admin/pages/content/components/LiveCanvas/LiveCanvas.tsx
+++ b/src/admin/pages/content/components/LiveCanvas/LiveCanvas.tsx
@@ -60,6 +60,7 @@ import {
   proseMirrorDocToMarkdown,
 } from '@core/markdown/markdownDocument'
 import { MediaNode, type MediaAttributes } from '@content/nodes/MediaNode'
+import { ContentLinkAttributes } from '@content/nodes/ContentLinkAttributes'
 import type { TiptapBodyEditorHandle } from '@content/TiptapBodyEditor'
 import { previewCmsDataRow } from '@core/persistence/cmsData'
 import { BodyBubbleMenu } from '../BodyBubbleMenu/BodyBubbleMenu'
@@ -135,6 +136,7 @@ const IFRAME_EDITOR_STYLE = `
     height: 0;
     color: rgba(127, 127, 127, 0.55);
   }
+
 `
 
 /**
@@ -451,6 +453,7 @@ export function LiveCanvas({
       element: target,
       editable: !readOnly,
       extensions: [
+        ContentLinkAttributes,
         StarterKit.configure({
           heading: { levels: [2, 3, 4] },
           link: { openOnClick: false, autolink: true, linkOnPaste: true },
diff --git a/src/admin/pages/content/components/MediaNodeToolbar/MediaNodeToolbar.module.css b/src/admin/pages/content/components/MediaNodeToolbar/MediaNodeToolbar.module.css
index f4e1aefd1..1429691fb 100644
--- a/src/admin/pages/content/components/MediaNodeToolbar/MediaNodeToolbar.module.css
+++ b/src/admin/pages/content/components/MediaNodeToolbar/MediaNodeToolbar.module.css
@@ -38,6 +38,25 @@
     font-weight: 700;
 }
 
+.sizeControl {
+    display: inline-flex;
+    width: 88px;
+    flex-shrink: 0;
+}
+
+.sizeControl > * {
+    width: 100%;
+    min-width: 0;
+}
+
+.lightboxButton {
+    height: 28px;
+    min-width: 46px;
+    padding: 0 var(--space-s);
+    font-size: var(--text-xs);
+    font-weight: 700;
+}
+
 .altForm {
     display: inline-flex;
     align-items: center;
diff --git a/src/admin/pages/content/components/MediaNodeToolbar/MediaNodeToolbar.tsx b/src/admin/pages/content/components/MediaNodeToolbar/MediaNodeToolbar.tsx
index dc213034c..5f4ac334d 100644
--- a/src/admin/pages/content/components/MediaNodeToolbar/MediaNodeToolbar.tsx
+++ b/src/admin/pages/content/components/MediaNodeToolbar/MediaNodeToolbar.tsx
@@ -29,6 +29,9 @@ import { BubbleMenu } from '@tiptap/react/menus'
 import type { VirtualElement } from '@floating-ui/dom'
 import { Button } from '@ui/components/Button'
 import { Input } from '@ui/components/Input'
+import { Select } from '@ui/components/Select'
+import type { ContentMediaSize } from '../../nodes/MediaNode'
+import { normalizeMediaImageSize } from '@core/markdown/mediaImagePresentation'
 import { ImagesSolidIcon } from 'pixel-art-icons/icons/images-solid'
 import { TrashSolidIcon } from 'pixel-art-icons/icons/trash-solid'
 import styles from './MediaNodeToolbar.module.css'
@@ -57,6 +60,8 @@ interface MediaSelectionState {
   mediaType: 'image' | 'video'
   alt: string
   src: string
+  size: ContentMediaSize
+  lightbox: boolean
 }
 
 export function MediaNodeToolbar({ editor, onPickMedia, iframeEl }: MediaNodeToolbarProps) {
@@ -146,17 +151,56 @@ export function MediaNodeToolbar({ editor, onPickMedia, iframeEl }: MediaNodeToo
               <ImagesSolidIcon size={14} aria-hidden="true" />
             </Button>
             {state.mediaType === 'image' && (
-              <Button
-                variant="ghost"
-                size="xs"
-                tooltip="Edit alt text"
-                aria-label="Edit alt text"
-                onMouseDown={(event) => event.preventDefault()}
-                onClick={() => setAltDraft({ src: state.src, value: state.alt })}
-                className={styles.altButton}
-              >
-                Alt
-              </Button>
+              <>
+                <span
+                  className={styles.sizeControl}
+                  onMouseDown={(event) => event.preventDefault()}
+                >
+                  <Select
+                    aria-label="Image size"
+                    fieldSize="xs"
+                    value={state.size}
+                    options={[
+                      { value: 'original', label: 'Original' },
+                      { value: 'l', label: 'L' },
+                      { value: 'm', label: 'M' },
+                      { value: 's', label: 'S' },
+                    ]}
+                    onChange={(event) => {
+                      editor
+                        .chain()
+                        .focus()
+                        .updateAttributes('media', { size: event.target.value as ContentMediaSize })
+                        .run()
+                    }}
+                  />
+                </span>
+                <Button
+                  variant={state.lightbox ? 'primary' : 'ghost'}
+                  size="xs"
+                  tooltip="Open image in lightbox"
+                  aria-label="Lightbox"
+                  pressed={state.lightbox}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => {
+                    editor.chain().focus().updateAttributes('media', { lightbox: !state.lightbox }).run()
+                  }}
+                  className={styles.lightboxButton}
+                >
+                  Zoom
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  tooltip="Edit alt text"
+                  aria-label="Edit alt text"
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => setAltDraft({ src: state.src, value: state.alt })}
+                  className={styles.altButton}
+                >
+                  Alt
+                </Button>
+              </>
             )}
             <span className={styles.divider} aria-hidden="true" />
             <Button
@@ -230,17 +274,25 @@ function AltEditor({ initial, onCancel, onSubmit }: AltEditorProps) {
 
 function readMediaSelection(editor: Editor | null): MediaSelectionState {
   if (!editor) {
-    return { isMediaSelected: false, mediaType: 'image', alt: '', src: '' }
+    return { isMediaSelected: false, mediaType: 'image', alt: '', src: '', size: 'l', lightbox: false }
   }
   const sel = editor.state.selection
   if (!(sel instanceof NodeSelection) || sel.node.type.name !== 'media') {
-    return { isMediaSelected: false, mediaType: 'image', alt: '', src: '' }
+    return { isMediaSelected: false, mediaType: 'image', alt: '', src: '', size: 'l', lightbox: false }
+  }
+  const attrs = sel.node.attrs as {
+    mediaType?: string
+    alt?: string
+    src?: string
+    size?: string
+    lightbox?: boolean
   }
-  const attrs = sel.node.attrs as { mediaType?: string; alt?: string; src?: string }
   return {
     isMediaSelected: true,
     mediaType: attrs.mediaType === 'video' ? 'video' : 'image',
     alt: typeof attrs.alt === 'string' ? attrs.alt : '',
     src: typeof attrs.src === 'string' ? attrs.src : '',
+    size: normalizeMediaImageSize(attrs.size),
+    lightbox: attrs.lightbox === true,
   }
 }
diff --git a/src/admin/pages/content/hooks/__tests__/useContentEntryDraft.test.ts b/src/admin/pages/content/hooks/__tests__/useContentEntryDraft.test.ts
index d38fdedc9..3069cc918 100644
--- a/src/admin/pages/content/hooks/__tests__/useContentEntryDraft.test.ts
+++ b/src/admin/pages/content/hooks/__tests__/useContentEntryDraft.test.ts
@@ -11,6 +11,7 @@ import { afterEach, describe, expect, it, mock, spyOn } from 'bun:test'
 import { act, cleanup, renderHook, waitFor } from '@testing-library/react'
 import type { DataRow } from '@core/data/schemas'
 import { useContentEntryDraft } from '../useContentEntryDraft'
+import { markdownToProseMirrorDoc, proseMirrorDocToMarkdown } from '@core/markdown/markdownDocument'
 
 afterEach(() => {
   cleanup()
@@ -50,6 +51,16 @@ function renderDraft(entry: DataRow) {
 }
 
 describe('useContentEntryDraft custom cells', () => {
+  it('marks a published entry dirty when only text alignment changes', () => {
+    const entry = { ...fakeRow({ title: 'Hello', slug: 'hello', body: 'Desktop' }), status: 'published' as const }
+    const { result } = renderDraft(entry)
+    expect(result.current.isDirty).toBe(false)
+    const doc = markdownToProseMirrorDoc(result.current.body)
+    doc.content![0].attrs = { textAlign: 'center' }
+    act(() => result.current.setBody(proseMirrorDocToMarkdown(doc)))
+    expect(result.current.isDirty).toBe(true)
+  })
+
   it('hydrates customCells from the entry, excluding built-in field ids', () => {
     const { result } = renderDraft(fakeRow({
       title: 'Hello',
diff --git a/src/admin/pages/content/nodes/ContentLinkAttributes.test.ts b/src/admin/pages/content/nodes/ContentLinkAttributes.test.ts
new file mode 100644
index 000000000..7bd5c7e6b
--- /dev/null
+++ b/src/admin/pages/content/nodes/ContentLinkAttributes.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'bun:test'
+import { Editor } from '@tiptap/core'
+import { StarterKit } from '@tiptap/starter-kit'
+import { ContentLinkAttributes } from './ContentLinkAttributes'
+import { markdownToProseMirrorDoc, proseMirrorDocToMarkdown } from '@core/markdown/markdownDocument'
+
+describe('content download link schema', () => {
+  it('keeps download metadata through the real editor and can switch back to Open', () => {
+    const markdown = '[File](/uploads/file.pdf "instatic:download")'
+    const editor = new Editor({
+      element: document.createElement('div'),
+      extensions: [StarterKit, ContentLinkAttributes],
+      content: markdownToProseMirrorDoc(markdown),
+    })
+    try {
+      expect(proseMirrorDocToMarkdown(editor.getJSON())).toBe(markdown)
+      expect(editor.getHTML()).toContain('download=""')
+      editor.chain().setTextSelection({ from: 1, to: 5 })
+        .setMark('link', { href: '/uploads/file.pdf', download: null }).run()
+      expect(proseMirrorDocToMarkdown(editor.getJSON())).toBe('[File](/uploads/file.pdf)')
+    } finally {
+      editor.destroy()
+    }
+  })
+})
diff --git a/src/admin/pages/content/nodes/ContentLinkAttributes.ts b/src/admin/pages/content/nodes/ContentLinkAttributes.ts
new file mode 100644
index 000000000..b99ef41ef
--- /dev/null
+++ b/src/admin/pages/content/nodes/ContentLinkAttributes.ts
@@ -0,0 +1,17 @@
+import { Extension } from '@tiptap/core'
+
+export const ContentLinkAttributes = Extension.create({
+  name: 'contentLinkAttributes',
+  addGlobalAttributes() {
+    return [{
+      types: ['link'],
+      attributes: {
+        download: {
+          default: null,
+          parseHTML: (element) => element.hasAttribute('download') ? '' : null,
+          renderHTML: (attributes) => attributes.download != null ? { download: '' } : {},
+        },
+      },
+    }]
+  },
+})
diff --git a/src/admin/pages/content/nodes/MediaNode.ts b/src/admin/pages/content/nodes/MediaNode.ts
index 9679f8d97..8e0a48ba1 100644
--- a/src/admin/pages/content/nodes/MediaNode.ts
+++ b/src/admin/pages/content/nodes/MediaNode.ts
@@ -8,13 +8,21 @@
  */
 
 import { Node, mergeAttributes } from '@tiptap/core'
+import { normalizeMediaImageSize, mediaImageWidth, type MediaImageSize } from '@core/markdown/mediaImagePresentation'
 
 export type ContentMediaType = 'image' | 'video'
+export type ContentMediaSize = MediaImageSize
 
 export interface MediaAttributes {
   mediaType: ContentMediaType
   src: string
   alt: string
+  /** Image presentation size. Videos keep the default full width. */
+  size?: ContentMediaSize
+  /** Open image in the publisher's modal lightbox when clicked. */
+  lightbox?: boolean
+  /** Optional normal HTML title, separate from the editor metadata. */
+  title?: string
 }
 
 declare module '@tiptap/core' {
@@ -57,6 +65,26 @@ export const MediaNode = Node.create({
         parseHTML: (element: HTMLElement) => element.getAttribute('data-alt') ?? '',
         renderHTML: (attrs: Record<string, unknown>) => ({ 'data-alt': String(attrs.alt) }),
       },
+      size: {
+        default: 'l' as ContentMediaSize,
+        parseHTML: (element: HTMLElement) =>
+          normalizeMediaImageSize(element.getAttribute('data-size')),
+        renderHTML: (attrs: Record<string, unknown>) => ({
+          'data-size': normalizeMediaImageSize(attrs.size),
+        }),
+      },
+      lightbox: {
+        default: false,
+        parseHTML: (element: HTMLElement) => element.getAttribute('data-lightbox') === 'true',
+        renderHTML: (attrs: Record<string, unknown>) =>
+          attrs.lightbox === true ? { 'data-lightbox': 'true' } : {},
+      },
+      title: {
+        default: '',
+        parseHTML: (element: HTMLElement) => element.getAttribute('data-title') ?? '',
+        renderHTML: (attrs: Record<string, unknown>) =>
+          attrs.title ? { 'data-title': String(attrs.title) } : {},
+      },
     }
   },
 
@@ -68,10 +96,22 @@ export const MediaNode = Node.create({
     const attrs = node.attrs as MediaAttributes
     const inner = attrs.mediaType === 'video'
       ? ['video', { controls: '', src: attrs.src }]
-      : ['img', { src: attrs.src, alt: attrs.alt }]
+      : ['img', {
+          src: attrs.src,
+          alt: attrs.alt,
+          style: `width:${attrs.size === 'original' ? 'auto' : '100%'};max-width:100%;height:auto`,
+          ...(attrs.title ? { title: attrs.title } : {}),
+        }]
     return [
       'figure',
-      mergeAttributes(HTMLAttributes, { 'data-instatic-media': '' }),
+      mergeAttributes(HTMLAttributes, {
+        'data-instatic-media': '',
+        'data-size': normalizeMediaImageSize(attrs.size),
+        ...(attrs.mediaType === 'image' ? {
+          style: `width:${attrs.size === 'original' ? 'fit-content' : mediaImageWidth(normalizeMediaImageSize(attrs.size))};max-width:100%;margin-inline:auto`,
+        } : {}),
+        ...(attrs.lightbox ? { 'data-lightbox': 'true' } : {}),
+      }),
       inner,
     ]
   },
diff --git a/src/admin/pages/data/components/DataGrid/cells/CellEditorRenderer.tsx b/src/admin/pages/data/components/DataGrid/cells/CellEditorRenderer.tsx
index 387feba29..b9a94bc85 100644
--- a/src/admin/pages/data/components/DataGrid/cells/CellEditorRenderer.tsx
+++ b/src/admin/pages/data/components/DataGrid/cells/CellEditorRenderer.tsx
@@ -90,7 +90,7 @@ export function CellEditorRenderer({
       return <MediaCell field={field} {...rest} />
 
     case 'relation':
-      return <RelationCell field={field} {...rest} onOpenPicker={onOpenPicker} />
+      return <RelationCell field={field} {...rest} onOpenPicker={onOpenPicker} targetTable={tables?.find((table) => table.id === field.targetTableId)} />
 
     case 'repeater':
       return <RepeaterCell field={field} {...rest} tables={tables} />
diff --git a/src/admin/pages/data/components/DataGrid/cells/RelationCell.tsx b/src/admin/pages/data/components/DataGrid/cells/RelationCell.tsx
index 8f0c858c4..190a35ba9 100644
--- a/src/admin/pages/data/components/DataGrid/cells/RelationCell.tsx
+++ b/src/admin/pages/data/components/DataGrid/cells/RelationCell.tsx
@@ -1,9 +1,9 @@
 import type { ReactElement } from 'react'
 import { Button } from '@ui/components/Button'
 import { LinkIcon } from 'pixel-art-icons/icons/link'
-import { readStringArrayCell } from '@core/data/cells'
+import { readStringArrayCell, readDisplayTitle } from '@core/data/cells'
 import type { CellEditorProps } from '@admin/pages/data/types'
-import type { DataField, DataRow } from '@core/data/schemas'
+import type { DataField, DataRow, DataTable } from '@core/data/schemas'
 import styles from './cells.module.css'
 
 type RelationField = Extract<DataField, { type: 'relation' }>
@@ -13,37 +13,24 @@ type RelationField = Extract<DataField, { type: 'relation' }>
  * name and accepts an `onOpenPicker` prop for the parent to wire up a
  * RelationPickerDialog.
  *
- * The actual picker dialog is built by a separate agent. This component
- * stubs the opening behaviour so the cell editor contract is fulfilled.
  */
 export interface RelationCellProps extends CellEditorProps<RelationField> {
   /** Called when the user wants to open the relation picker. */
   onOpenPicker?: () => void
+  targetTable?: DataTable
 }
 
 function resolveDisplayName(
   ids: string[],
-  isMulti: boolean,
   resolveRelationTarget: ((id: string) => DataRow | null) | undefined,
+  targetTable: DataTable | undefined,
 ): string {
   if (ids.length === 0) return ''
 
-  if (isMulti) {
-    return `${ids.length} related`
-  }
-
-  const id = ids[0]
-  if (!id) return ''
-  if (!resolveRelationTarget) return id
-
-  const target = resolveRelationTarget(id)
-  if (!target) return id
-
-  // Use the first non-empty string cell as the display value.
-  const firstValue = Object.values(target.cells).find(
-    (v): v is string => typeof v === 'string' && v !== '',
-  )
-  return firstValue ?? id
+  return ids.map((id) => {
+    const target = resolveRelationTarget?.(id)
+    return target ? readDisplayTitle(target.cells, targetTable) : id
+  }).join(', ')
 }
 
 export function RelationCell({
@@ -55,6 +42,7 @@ export function RelationCell({
   ariaLabel,
   resolveRelationTarget,
   onOpenPicker,
+  targetTable,
 }: RelationCellProps): ReactElement {
   const isMulti = field.allowMultiple === true
 
@@ -65,7 +53,7 @@ export function RelationCell({
       : []
 
   const hasValue = currentIds.length > 0
-  const displayName = resolveDisplayName(currentIds, isMulti, resolveRelationTarget)
+  const displayName = resolveDisplayName(currentIds, resolveRelationTarget, targetTable)
 
   function handleClear() {
     onChange(isMulti ? [] : null)
@@ -85,7 +73,7 @@ export function RelationCell({
       >
         <LinkIcon size={14} />
         {hasValue ? (
-          <span>{displayName}</span>
+          <span className={styles.relationNames} title={displayName}>{displayName}</span>
         ) : (
           <span className={styles.relationEmpty}>Choose…</span>
         )}
diff --git a/src/admin/pages/data/components/DataGrid/cells/cells.module.css b/src/admin/pages/data/components/DataGrid/cells/cells.module.css
index e4e8f792e..d6cb62bac 100644
--- a/src/admin/pages/data/components/DataGrid/cells/cells.module.css
+++ b/src/admin/pages/data/components/DataGrid/cells/cells.module.css
@@ -210,6 +210,13 @@
   font-style: italic;
 }
 
+.relationNames {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* ---- Read-only overlay ---- */
 
 .readOnlyText {
diff --git a/src/admin/pages/data/components/RelationPickerDialog/RelationPickerDialog.module.css b/src/admin/pages/data/components/RelationPickerDialog/RelationPickerDialog.module.css
index 835145b3d..8b1ad0cd2 100644
--- a/src/admin/pages/data/components/RelationPickerDialog/RelationPickerDialog.module.css
+++ b/src/admin/pages/data/components/RelationPickerDialog/RelationPickerDialog.module.css
@@ -36,3 +36,49 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+.selectionSummary {
+    margin: 0;
+    color: var(--text-subtle);
+    font-size: var(--text-s);
+}
+
+.row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-s);
+    padding: var(--space-s) var(--space-m);
+    border-radius: var(--editor-radius);
+    cursor: pointer;
+}
+
+.row:hover,
+.row[data-selected="true"] {
+    background: var(--editor-surface-2);
+}
+
+.row:focus-within {
+    outline: 1px solid var(--text-muted);
+    outline-offset: -1px;
+}
+
+.rowText {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-m);
+}
+
+.rowStatus {
+    flex-shrink: 0;
+    color: var(--text-subtle);
+    font-size: var(--text-s);
+}
+
+.singleMarker {
+    display: inline-flex;
+    width: 16px;
+    flex-shrink: 0;
+}
diff --git a/src/admin/pages/data/components/RelationPickerDialog/RelationPickerDialog.tsx b/src/admin/pages/data/components/RelationPickerDialog/RelationPickerDialog.tsx
index f4fa13546..fb88e197f 100644
--- a/src/admin/pages/data/components/RelationPickerDialog/RelationPickerDialog.tsx
+++ b/src/admin/pages/data/components/RelationPickerDialog/RelationPickerDialog.tsx
@@ -1,12 +1,14 @@
 import { useState } from 'react'
 import { useAsyncResource } from '@admin/lib/useAsyncResource'
 import { Button } from '@ui/components/Button'
+import { Checkbox } from '@ui/components/Checkbox'
+import { CheckIcon } from 'pixel-art-icons/icons/check'
 import { Dialog } from '@ui/components/Dialog'
 import { EmptyState } from '@ui/components/EmptyState'
 import { SearchBar } from '@ui/components/SearchBar'
 import { SkeletonBlock } from '@ui/components/Skeleton'
 import { listCmsDataRows } from '@core/persistence/cmsData'
-import { readStringCell } from '@core/data/cells'
+import { readDisplayTitle } from '@core/data/cells'
 import type { DataRow, DataTable } from '@core/data/schemas'
 import styles from './RelationPickerDialog.module.css'
 
@@ -75,13 +77,11 @@ export function RelationPickerDialog({
     if (open) setSelected(normalizeSelection(currentValue))
   }
 
-  const primaryFieldId = targetTable?.primaryFieldId ?? ''
-
   const filteredRows = (() => {
     if (!search.trim()) return rows
     const q = search.trim().toLowerCase()
     return rows.filter((row) =>
-      readStringCell(row.cells, primaryFieldId).toLowerCase().includes(q),
+      readDisplayTitle(row.cells, targetTable).toLowerCase().includes(q),
     )
   })()
 
@@ -102,6 +102,7 @@ export function RelationPickerDialog({
 
   function handleConfirm() {
     onPick(buildResult(selected, allowMultiple))
+    setSearch('')
     onClose()
   }
 
@@ -154,6 +155,9 @@ export function RelationPickerDialog({
             placeholder={`Search ${targetTable.pluralLabel.toLowerCase()}…`}
             className={styles.search}
           />
+          <p className={styles.selectionSummary} role="status">
+            {allowMultiple ? `${selected.size} selected · Choose one or more entries` : 'Choose one entry'}
+          </p>
 
           {loading && <SkeletonBlock minHeight={140} ariaLabel="Loading rows" />}
 
@@ -174,10 +178,26 @@ export function RelationPickerDialog({
           )}
 
           {!loading && !loadError && filteredRows.length > 0 && (
-            <div className={styles.list} role="listbox" aria-multiselectable={allowMultiple}>
+            <div className={styles.list} role="group" aria-label={`Select ${targetTable.pluralLabel}`}>
               {filteredRows.map((row) => {
-                const displayValue = readStringCell(row.cells, primaryFieldId) || row.id
+                const displayValue = readDisplayTitle(row.cells, targetTable)
                 const isSelected = selected.has(row.id)
+                const rowLabel = (
+                  <span className={styles.rowText}>
+                    <span className={styles.rowLabel}>{displayValue}</span>
+                    {targetTable.kind === 'postType' && (
+                      <span className={styles.rowStatus}>{row.status === 'published' ? 'Published' : row.status === 'unpublished' ? 'Unpublished' : 'Draft'}</span>
+                    )}
+                  </span>
+                )
+                if (allowMultiple) {
+                  return (
+                    <label key={row.id} className={styles.row} data-selected={isSelected}>
+                      <Checkbox checked={isSelected} onCheckedChange={() => toggleRow(row.id)} aria-label={displayValue} />
+                      {rowLabel}
+                    </label>
+                  )
+                }
                 return (
                   <Button
                     key={row.id}
@@ -187,11 +207,12 @@ export function RelationPickerDialog({
                     fullWidth
                     align="start"
                     type="button"
-                    role="option"
-                    aria-selected={isSelected}
+                    className={styles.row}
+                    data-selected={isSelected}
                     onClick={() => toggleRow(row.id)}
                   >
-                    <span className={styles.rowLabel}>{displayValue}</span>
+                    <span className={styles.singleMarker} aria-hidden="true">{isSelected && <CheckIcon size={16} />}</span>
+                    {rowLabel}
                   </Button>
                 )
               })}
diff --git a/src/admin/pages/media/components/MediaPickerModal/MediaPickerModal.tsx b/src/admin/pages/media/components/MediaPickerModal/MediaPickerModal.tsx
index 88bebfb71..4a1f36c81 100644
--- a/src/admin/pages/media/components/MediaPickerModal/MediaPickerModal.tsx
+++ b/src/admin/pages/media/components/MediaPickerModal/MediaPickerModal.tsx
@@ -189,6 +189,7 @@ function MediaPickerModalBody({
         role="dialog"
         aria-modal="true"
         aria-label={pickerTitle(mediaKind)}
+        data-ui-dialog="true"
         data-testid="media-picker-modal"
       >
         <header className={styles.header}>
diff --git a/src/admin/pages/site/canvas/ComponentPreviewSource.tsx b/src/admin/pages/site/canvas/ComponentPreviewSource.tsx
new file mode 100644
index 000000000..cf0b08b64
--- /dev/null
+++ b/src/admin/pages/site/canvas/ComponentPreviewSource.tsx
@@ -0,0 +1,48 @@
+import { useAsyncResource } from '@admin/lib/useAsyncResource'
+import { getCmsDataTableBySlug, listCmsDataTables, previewCmsDataLoopItems } from '@core/persistence/cmsData'
+import { useEditorStore } from '@site/store/store'
+import { Select } from '@ui/components/Select'
+import styles from './VisualComponentModeControl.module.css'
+
+/** Example data only: this selection never changes a component's runtime source. */
+export function ComponentPreviewSource({ componentId }: { componentId: string }) {
+  const selection = useEditorStore((s) => s.componentPreviewSelection[componentId])
+  const setSelection = useEditorStore((s) => s.setComponentPreviewSelection)
+  const tableSlug = selection?.tableSlug ?? ''
+  const { data: tables } = useAsyncResource(() => listCmsDataTables(), [])
+  const { data: rows, loading, error } = useAsyncResource(async () => {
+    if (!tableSlug) return { tableSlug, items: [] }
+    const table = await getCmsDataTableBySlug(tableSlug)
+    if (!table) return { tableSlug, items: [] }
+    const result = await previewCmsDataLoopItems(table.id, { orderBy: 'publishedAt', direction: 'desc', limit: 50 })
+    return { tableSlug, items: result.items }
+  }, [tableSlug])
+  const items = rows?.tableSlug === tableSlug ? rows.items : []
+  const value = items.some((item) => item.id === selection?.rowId) ? selection?.rowId : items[0]?.id
+
+  return (
+    <div className={styles.previewGroup} title="Example data for the editor only. The surrounding loop supplies data on the page.">
+      <span className={styles.modeLabel}>Preview data</span>
+      <Select
+        fieldSize="sm"
+        className={styles.previewSelect}
+        aria-label="Component preview table"
+        value={tableSlug}
+        options={[
+          { value: '', label: 'No example data' },
+          ...(tables ?? []).filter((table) => table.kind === 'postType' || table.kind === 'data').map((table) => ({ value: table.slug, label: table.name })),
+        ]}
+        onChange={(event) => setSelection(componentId, event.target.value ? { tableSlug: event.target.value, rowId: null } : null)}
+      />
+      {tableSlug && <Select
+        fieldSize="sm"
+        className={styles.previewSelect}
+        aria-label="Component preview entry"
+        value={value ?? ''}
+        disabled={loading || items.length === 0}
+        options={items.length ? items.map((item) => ({ value: item.id, label: String(item.fields.title ?? item.fields.name ?? item.fields.slug ?? item.id) })) : [{ value: '', label: loading ? 'Loading…' : error ? 'Could not load entries' : 'Example content' }]}
+        onChange={(event) => setSelection(componentId, { tableSlug, rowId: event.target.value })}
+      />}
+    </div>
+  )
+}
diff --git a/src/admin/pages/site/canvas/IframeFrameSurface.tsx b/src/admin/pages/site/canvas/IframeFrameSurface.tsx
index b354858ed..f9424f3f4 100644
--- a/src/admin/pages/site/canvas/IframeFrameSurface.tsx
+++ b/src/admin/pages/site/canvas/IframeFrameSurface.tsx
@@ -79,6 +79,8 @@ import type { InjectableRuntimeScript } from './useRuntimeScriptBuild'
 import { useIframeCursorBridge } from './useIframeCursorBridge'
 import { iframeLocalPointToParentClientPoint } from './iframeEventCoordinates'
 import { useCanvasFormControlSuppression } from './useCanvasFormControlSuppression'
+import { useCanvasDetailsPreview } from './useCanvasDetailsPreview'
+import { useCanvasScrollAnimations } from './useCanvasScrollAnimations'
 import type { Viewport } from '@core/utils/viewportUnits'
 import { CANVAS_VIEWPORT_HEIGHT } from './canvasViewport'
 import { useIframeFrameAutoHeight } from './useIframeFrameAutoHeight'
@@ -206,6 +208,8 @@ export const IframeFrameSurface = forwardRef<IframeFrameSurfaceHandle, IframeFra
 
     useIframeCursorBridge(iframeRef, iframeDoc, { onCursorMove, onCursorLeave })
     useCanvasFormControlSuppression(iframeDoc, { breakpointId, enabled: !isLive })
+    useCanvasDetailsPreview(iframeDoc)
+    useCanvasScrollAnimations(iframeDoc, isLive)
     useIframeFrameAutoHeight({ iframeRef, iframeDoc, isLive })
 
     // Bridge the iframe handle out to the parent (selection overlay reads
diff --git a/src/admin/pages/site/canvas/VisualComponentModeControl.module.css b/src/admin/pages/site/canvas/VisualComponentModeControl.module.css
index c7c5947d5..545f666c4 100644
--- a/src/admin/pages/site/canvas/VisualComponentModeControl.module.css
+++ b/src/admin/pages/site/canvas/VisualComponentModeControl.module.css
@@ -6,7 +6,8 @@
     display: flex;
     align-items: center;
     gap: var(--space-s);
-    max-width: min(560px, calc(100vw - 48px));
+    max-width: calc(100vw - 48px);
+    flex-wrap: wrap;
     padding: var(--space-xs) var(--space-xl);
     pointer-events: auto;
     border: 0;
@@ -39,3 +40,16 @@
     font-weight: 500;
     user-select: none;
 }
+
+.previewGroup {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-s);
+    min-width: 0;
+}
+
+.previewGroup .previewSelect {
+    width: 160px;
+    min-width: 0;
+}
diff --git a/src/admin/pages/site/canvas/VisualComponentModeControl.tsx b/src/admin/pages/site/canvas/VisualComponentModeControl.tsx
index f838b1bfe..bd0b1b505 100644
--- a/src/admin/pages/site/canvas/VisualComponentModeControl.tsx
+++ b/src/admin/pages/site/canvas/VisualComponentModeControl.tsx
@@ -13,6 +13,7 @@ import { useEditorStore } from '@site/store/store'
 import { Button } from '@ui/components/Button'
 import { ArrowLeftIcon } from 'pixel-art-icons/icons/arrow-left'
 import { DocumentSwitcher } from './DocumentSwitcher'
+import { ComponentPreviewSource } from './ComponentPreviewSource'
 import styles from './VisualComponentModeControl.module.css'
 
 export default function VisualComponentModeControl() {
@@ -47,6 +48,7 @@ export default function VisualComponentModeControl() {
       <span className={styles.modeLabel}>Editing component</span>
 
       <DocumentSwitcher current={{ kind: 'component', id: vc.id, label: vc.name }} />
+      <ComponentPreviewSource componentId={vc.id} />
     </div>
   )
 }
diff --git a/src/admin/pages/site/canvas/useCanvasDetailsPreview.ts b/src/admin/pages/site/canvas/useCanvasDetailsPreview.ts
new file mode 100644
index 000000000..72a78ba57
--- /dev/null
+++ b/src/admin/pages/site/canvas/useCanvasDetailsPreview.ts
@@ -0,0 +1,59 @@
+import { useEffect } from 'react'
+import { useEditorStore } from '@site/store/store'
+
+const INTERACTIVE = 'a, button, input, select, textarea, [contenteditable="true"], [data-canvas-interactive="true"]'
+
+function editableDetails(element: Element | null): element is HTMLDetailsElement {
+  return element?.tagName === 'DETAILS' && element.hasAttribute('data-node-id') &&
+    !element.closest('[data-instatic-readonly-id]')
+}
+
+/** DOM-only preview: never writes the page tree, undo history, or collaboration document. */
+export function installCanvasDetailsPreview(doc: Document): () => void {
+  const activate = (event: Event) => {
+    const target = event.target
+    // The target belongs to an iframe, so instanceof Element would use the wrong realm.
+    if (!target || typeof (target as Element).closest !== 'function') return
+    const element = target as Element
+    if (element.closest(INTERACTIVE)) return
+    const summary = element.closest('summary')
+    const details = summary?.parentElement ?? null
+    if (!summary || !editableDetails(details) || details.querySelector('summary') !== summary) return
+    if (event.type === 'keydown') {
+      const keyboard = event as KeyboardEvent
+      if (keyboard.key !== 'Enter' && keyboard.key !== ' ') return
+      event.preventDefault()
+      if (keyboard.repeat) return
+    }
+    // Cancel the native toggle; React's selection handlers also cancel it.
+    // Keep propagation so the clicked layer remains selectable and editable.
+    event.preventDefault()
+    details.open = !details.open
+  }
+  doc.addEventListener('click', activate, true)
+  doc.addEventListener('keydown', activate, true)
+  return () => {
+    doc.removeEventListener('click', activate, true)
+    doc.removeEventListener('keydown', activate, true)
+  }
+}
+
+/** Reveal a layer selected inside a closed body, without reopening a clicked summary. */
+export function revealSelectedDetails(doc: Document, nodeId: string): void {
+  const target = Array.from(doc.querySelectorAll('[data-node-id]'))
+    .find((element) => element.getAttribute('data-node-id') === nodeId)
+  if (!target) return
+  for (let ancestor = target.parentElement; ancestor; ancestor = ancestor.parentElement) {
+    if (!editableDetails(ancestor)) continue
+    const summary = ancestor.querySelector('summary')
+    if (!summary?.contains(target)) ancestor.open = true
+  }
+}
+
+export function useCanvasDetailsPreview(doc: Document | null): void {
+  const selectedNodeId = useEditorStore((state) => state.selectedNodeId)
+  useEffect(() => doc ? installCanvasDetailsPreview(doc) : undefined, [doc])
+  useEffect(() => {
+    if (doc && selectedNodeId) revealSelectedDetails(doc, selectedNodeId)
+  }, [doc, selectedNodeId])
+}
diff --git a/src/admin/pages/site/canvas/useCanvasScrollAnimations.ts b/src/admin/pages/site/canvas/useCanvasScrollAnimations.ts
new file mode 100644
index 000000000..8051aec2b
--- /dev/null
+++ b/src/admin/pages/site/canvas/useCanvasScrollAnimations.ts
@@ -0,0 +1,12 @@
+import { useEffect } from 'react'
+import { installScrollAnimations, SCROLL_ANIMATION_FRAMES } from '@core/scrollAnimationRuntime'
+import { useEditorStore } from '@site/store/store'
+
+/** Design mode stays fully visible; Live uses the same observer as publishing. */
+export function useCanvasScrollAnimations(doc: Document | null, enabled: boolean) {
+  const rules = useEditorStore(state => state.site?.styleRules)
+  useEffect(() => {
+    if (!doc || !enabled) return
+    return installScrollAnimations(doc, SCROLL_ANIMATION_FRAMES)
+  }, [doc, enabled, rules])
+}
diff --git a/src/admin/pages/site/canvas/useEntryRelationItems.ts b/src/admin/pages/site/canvas/useEntryRelationItems.ts
new file mode 100644
index 000000000..53625f907
--- /dev/null
+++ b/src/admin/pages/site/canvas/useEntryRelationItems.ts
@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react'
+import { useActiveBranchId } from '@admin/state/branchStore'
+import { logicalIdOf } from '@core/branches'
+import { getCmsDataTable, previewCmsDataLoopItems } from '@core/persistence/cmsData'
+import { safeParseJson } from '@core/utils/jsonValidate'
+import { Type } from '@core/utils/typeboxHelpers'
+import type { LoopItem } from '@core/loops'
+import type { CanvasPreviewReadiness } from './CanvasPreviewReadiness'
+
+const ReferenceIdsSchema = Type.Array(Type.String())
+
+/** Relation lookup for the active outer entry; no synthetic unrelated target rows. */
+export function useEntryRelationItems(
+  entry: LoopItem | undefined,
+  fieldId: string,
+  enabled: boolean,
+  readiness: CanvasPreviewReadiness | null,
+): ReadonlyMap<string, LoopItem> | undefined {
+  const branchId = useActiveBranchId()
+  const rawTableId = entry?.fields.tableId
+  const tableId = enabled && typeof rawTableId === 'string' ? logicalIdOf(branchId, rawTableId) : ''
+  const value = entry?.fields[fieldId]
+  const references = JSON.stringify(Array.isArray(value) ? value.filter((id) => typeof id === 'string') : [])
+  const key = JSON.stringify([branchId, tableId, fieldId, references])
+  const [resolved, setResolved] = useState<{ key: string; items?: Map<string, LoopItem> } | null>(null)
+  useEffect(() => {
+    if (!tableId || !fieldId) return
+    let cancelled = false
+    async function load() {
+      const table = await getCmsDataTable(tableId)
+      const field = table?.fields.find((candidate) => candidate.id === fieldId)
+      if (field?.type !== 'relation' || !field.allowMultiple) {
+        if (!cancelled) setResolved({ key })
+        return
+      }
+      const parsed = safeParseJson(references, ReferenceIdsSchema)
+      if (!parsed.ok) throw parsed.error
+      const ids = [...new Set(parsed.value)]
+      const items = new Map<string, LoopItem>()
+      for (let start = 0; start < ids.length; start += 200) {
+        const result = await previewCmsDataLoopItems(field.targetTableId, { rowIds: ids.slice(start, start + 200) })
+        for (const item of result.items) items.set(item.id, item)
+      }
+      if (!cancelled) setResolved({ key, items })
+    }
+    const request = load().catch((error: unknown) => {
+      console.error('[useEntryRelationItems] Relation preview failed:', error)
+      if (!cancelled) setResolved({ key, items: new Map() })
+    })
+    readiness?.track(request)
+    return () => { cancelled = true }
+  }, [tableId, fieldId, references, key, readiness])
+  return resolved?.key === key ? resolved.items : undefined
+}
diff --git a/src/admin/pages/site/canvas/useLoopPreviewItems.ts b/src/admin/pages/site/canvas/useLoopPreviewItems.ts
index ef70c11ba..286154f94 100644
--- a/src/admin/pages/site/canvas/useLoopPreviewItems.ts
+++ b/src/admin/pages/site/canvas/useLoopPreviewItems.ts
@@ -53,6 +53,7 @@ import { getCmsDataTable, previewCmsDataLoopItems } from '@core/persistence/cmsD
 import { listCmsMediaAssets, type CmsMediaAsset } from '@core/persistence/cmsMedia'
 import { dataTablePreviewToLoopItem } from '@core/templates/templatePreviewData'
 import { CanvasPreviewReadinessContext } from './CanvasPreviewReadiness'
+import { useEntryRelationItems } from './useEntryRelationItems'
 
 // ---------------------------------------------------------------------------
 // Loop prop reader
@@ -254,6 +255,9 @@ export function useLoopPreviewItems(
   const { sourceId, filters, orderBy, direction, offset, limit } = readLoopProps(node)
   const tableId = typeof filters.tableId === 'string' ? filters.tableId : ''
   const mimePrefix = typeof filters.mimePrefix === 'string' ? filters.mimePrefix : ''
+  const currentEntry = templateContext?.entryStack.at(-1)
+  const entryFieldId = typeof filters.fieldId === 'string' ? filters.fieldId : ''
+  const relatedItems = useEntryRelationItems(currentEntry, entryFieldId, sourceId === ENTRY_FIELD_SOURCE_ID, previewReadiness)
   // Read as primitives so the fetch effect's dependency list stays stable.
   const cellField = typeof filters.cellField === 'string' ? filters.cellField : ''
   const cellOperator = typeof filters.cellOperator === 'string' ? filters.cellOperator : ''
@@ -378,6 +382,7 @@ export function useLoopPreviewItems(
       limit,
       direction,
       mediaByReference,
+      relatedItems,
     }).items
   }
 
diff --git a/src/admin/pages/site/hooks/useTemplatePreviewContext.ts b/src/admin/pages/site/hooks/useTemplatePreviewContext.ts
index de4a9f8c4..fad4854a8 100644
--- a/src/admin/pages/site/hooks/useTemplatePreviewContext.ts
+++ b/src/admin/pages/site/hooks/useTemplatePreviewContext.ts
@@ -5,6 +5,7 @@ import { dataTablePreviewToLoopItem } from '@core/templates/templatePreviewData'
 import { getCmsDataTableBySlug, previewCmsDataLoopItems } from '@core/persistence/cmsData'
 import { buildPageFrame, buildRouteFrame, buildSiteFrame } from '@core/templates/contextFrames'
 import { primaryTemplateTableSlug } from '@core/templates'
+import { parseVirtualVCPageId } from '@core/visualComponents'
 import { useEditorStore } from '@site/store/store'
 
 /**
@@ -37,10 +38,13 @@ export function useTemplatePreviewContext(page: Page | null): TemplatePreviewCon
   // published rows yet do we fall back to a synthetic sample row so the layout
   // is still visible. An `everywhere` layout has no current entry (null
   // tableSlug → empty entry stack); its outlet previews a page instead.
-  const tableSlug = page ? primaryTemplateTableSlug(page) : null
+  const componentId = page ? parseVirtualVCPageId(page.id) : null
+  const componentSelection = useEditorStore((s) => componentId ? s.componentPreviewSelection[componentId] : undefined)
+  const tableSlug = componentSelection?.tableSlug ?? (page ? primaryTemplateTableSlug(page) : null)
   // The post the author picked to preview (TemplateModeControl), or null → the
   // first published row. Session-only; keyed by the template page id.
-  const selectedRowId = useEditorStore((s) => (page ? s.templatePreviewSelection[page.id] ?? null : null))
+  const templateRowId = useEditorStore((s) => (page ? s.templatePreviewSelection[page.id] ?? null : null))
+  const selectedRowId = componentId ? componentSelection?.rowId : templateRowId
   // Fetch a window of published rows once per table; the chosen row is picked
   // from it below so changing the preview selection never refetches. A failed
   // load resolves to an empty window so bindings stay empty rather than throw.
diff --git a/src/admin/pages/site/panels/PropertiesPanel/ClassPropertyRow.tsx b/src/admin/pages/site/panels/PropertiesPanel/ClassPropertyRow.tsx
index 0e4dd4d69..77bdb294c 100644
--- a/src/admin/pages/site/panels/PropertiesPanel/ClassPropertyRow.tsx
+++ b/src/admin/pages/site/panels/PropertiesPanel/ClassPropertyRow.tsx
@@ -19,6 +19,7 @@ import { ColorControl } from '@site/property-controls/ColorControl'
 import { SelectControl } from '@site/property-controls/SelectControl'
 import { BackgroundImageControl } from '@site/property-controls/BackgroundImageControl'
 import { FontFamilyControl } from '@site/property-controls/FontFamilyControl'
+import { AnimationControl } from '@site/property-controls/AnimationControl'
 import { useEditorStore } from '@site/store/store'
 import { ControlRow } from '@ui/components/ControlRow'
 import { TokenAwareInput } from '@site/property-controls/TokenAwareInput'
@@ -187,7 +188,10 @@ export function ClassPropertyRow({
   // takes precedence over the generic text/select dispatch below.
   let control: React.ReactNode
 
-  if (property === 'fontFamily') {
+  if (property === 'animation') {
+    control = <AnimationControl propKey={String(property)} label={label}
+      value={String(value ?? '')} onChange={handleControlChange} />
+  } else if (property === 'fontFamily') {
     control = (
       <FontFamilyControl
         propKey={String(property)}
diff --git a/src/admin/pages/site/panels/PropertiesPanel/LoopPropertiesView.tsx b/src/admin/pages/site/panels/PropertiesPanel/LoopPropertiesView.tsx
index 176807657..eea4fc300 100644
--- a/src/admin/pages/site/panels/PropertiesPanel/LoopPropertiesView.tsx
+++ b/src/admin/pages/site/panels/PropertiesPanel/LoopPropertiesView.tsx
@@ -16,7 +16,7 @@
 import { useAsyncResource } from '@admin/lib/useAsyncResource'
 import { useEditorStore } from '@site/store/store'
 import { loopSourceRegistry } from '@core/loops/registry'
-import { ENTRY_FIELD_FILTER_KEY, ENTRY_FIELD_SOURCE_ID } from '@core/loops'
+import { ENTRY_FIELD_FILTER_KEY, ENTRY_FIELD_SOURCE_ID, entryScopeTables } from '@core/loops'
 import {
   CELL_ORDER_PREFIX,
   isCellComparableField,
@@ -27,7 +27,7 @@ import type { LoopEntitySource } from '@core/loops/types'
 import type { DataRow, DataTableListItem } from '@core/data/schemas'
 import type { PropertyControl, PropertySchema } from '@core/module-engine'
 import { listCmsDataRows, listCmsDataTables } from '@core/persistence/cmsData'
-import { getAncestors, type Page } from '@core/page-tree'
+import { type Page } from '@core/page-tree'
 import { PropertyControlRenderer } from '@site/property-controls/PropertyControlRenderer'
 import { CUSTOM_HTML_TAG_VALUE } from '@core/htmlAttributes'
 import { customHtmlTagControl, htmlTagControl } from '@modules/base/utils/htmlTag'
@@ -348,24 +348,7 @@ function entryCollectionFieldOptions(
 ): Array<{ label: string; value: string }> {
   if (!activePage) return []
 
-  const enclosingDataRowsLoop = [...getAncestors(activePage, nodeId)]
-    .reverse()
-    .find((node) => node.moduleId === 'base.loop' && node.props.sourceId === 'data.rows')
-  const filters = enclosingDataRowsLoop?.props.filters
-  const enclosingTableId =
-    filters && typeof filters === 'object' && !Array.isArray(filters)
-      ? (filters as Record<string, unknown>).tableId
-      : null
-
-  let contextTables: DataTableListItem[]
-  if (typeof enclosingTableId === 'string' && enclosingTableId) {
-    contextTables = tables.filter((table) => table.id === enclosingTableId)
-  } else if (activePage.template?.target.kind === 'postTypes') {
-    const slugs = new Set(activePage.template.target.tableSlugs)
-    contextTables = tables.filter((table) => slugs.has(table.slug))
-  } else {
-    contextTables = []
-  }
+  const contextTables = entryScopeTables(activePage, nodeId, tables)
 
   const showTableName = contextTables.length > 1
   const seen = new Set<string>()
@@ -373,6 +356,7 @@ function entryCollectionFieldOptions(
   for (const table of contextTables) {
     for (const field of table.fields) {
       const isCollection =
+        field.type === 'repeater' ||
         field.type === 'multiSelect' ||
         ((field.type === 'media' || field.type === 'relation') && field.allowMultiple === true)
       if (!isCollection || seen.has(field.id)) continue
diff --git a/src/admin/pages/site/panels/PropertiesPanel/usePropertiesPanelData.ts b/src/admin/pages/site/panels/PropertiesPanel/usePropertiesPanelData.ts
index add25da07..5bf706536 100644
--- a/src/admin/pages/site/panels/PropertiesPanel/usePropertiesPanelData.ts
+++ b/src/admin/pages/site/panels/PropertiesPanel/usePropertiesPanelData.ts
@@ -18,6 +18,10 @@ import { useEditorStore, selectSelectedNode } from '@site/store/store'
 import { registry } from '@core/module-engine'
 import { getAncestors, resolveProps } from '@core/page-tree'
 import { loopSourceRegistry } from '@core/loops/registry'
+import { entryScopeTables, entryScopeRepeater } from '@core/loops'
+import { listCmsDataTables } from '@core/persistence/cmsData'
+import { useAsyncResource } from '@admin/lib/useAsyncResource'
+import type { DataTable } from '@core/data/schemas'
 import { buildClassTokenUsageMap, buildSelectorUsageMap, resolveSelectorUsage } from '../selectorUsage'
 import type {
   AnyModuleDefinition,
@@ -175,9 +179,11 @@ export function usePropertiesPanelData(): PropertiesPanelData {
   // For nodes with a `base.loop` ancestor we expose the same `currentEntry`
   // bindings — they resolve to the loop's iteration item via the publisher's
   // entry-stack semantics.
+  const { data: bindingTables } = useAsyncResource(() => listCmsDataTables(), [])
   const { enclosingLoopSource, enclosingLoopTableId } = resolveEnclosingLoopContext(
     activePage,
     selectedNodeId,
+    bindingTables ?? [],
   )
   // Bindings are always available. The picker decides which sources are
   // meaningful in the current context (`currentEntry` / `parentEntry`
@@ -310,6 +316,7 @@ interface EnclosingLoopContext {
 function resolveEnclosingLoopContext(
   activePage: Page | null,
   selectedNodeId: string | null,
+  tables: readonly DataTable[],
 ): EnclosingLoopContext {
   if (!activePage || !selectedNodeId) {
     return { enclosingLoopSource: undefined, enclosingLoopTableId: null }
@@ -333,9 +340,25 @@ function resolveEnclosingLoopContext(
     ? loopSourceRegistry.get(enclosingLoopSourceId)
     : undefined
 
+  const repeater = entryScopeRepeater(activePage, selectedNodeId, tables)
+  if (repeater && enclosingLoopSource) {
+    return {
+      enclosingLoopSource: {
+        ...enclosingLoopSource,
+        label: repeater.label,
+        fields: [
+          ...repeater.fields.map((field) => ({ id: field.id, label: field.label })),
+          { id: 'index', label: 'Index' },
+        ],
+      },
+      enclosingLoopTableId: null,
+    }
+  }
+
   return {
     enclosingLoopSource,
-    enclosingLoopTableId: extractLoopTableId(enclosingLoopNode, enclosingLoopSourceId),
+    enclosingLoopTableId: entryScopeTables(activePage, selectedNodeId, tables)[0]?.id ??
+      extractLoopTableId(enclosingLoopNode, enclosingLoopSourceId),
   }
 }
 
diff --git a/src/admin/pages/site/preview/PreviewOverlay.tsx b/src/admin/pages/site/preview/PreviewOverlay.tsx
index 81d752eb5..30b27581a 100644
--- a/src/admin/pages/site/preview/PreviewOverlay.tsx
+++ b/src/admin/pages/site/preview/PreviewOverlay.tsx
@@ -21,7 +21,7 @@
 import { useEffect, useRef } from 'react'
 import type { Page, SiteDocument } from '@core/page-tree'
 import type { TemplateRenderDataContext } from '@core/templates/dynamicBindings'
-import { useEditorStore, selectActivePage } from '@site/store/store'
+import { useEditorStore, selectActiveCanvasPage } from '@site/store/store'
 import { useTemplatePreviewContext } from '@site/hooks/useTemplatePreviewContext'
 import { EyeSolidIcon } from 'pixel-art-icons/icons/eye-solid'
 import { CloseIcon } from 'pixel-art-icons/icons/close'
@@ -99,7 +99,7 @@ export function PreviewOverlay() {
   const open = useEditorStore((s) => s.previewOpen)
   const closePreview = useEditorStore((s) => s.closePreview)
   const site = useEditorStore((s) => s.site)
-  const activePage = useEditorStore(selectActivePage)
+  const activePage = useEditorStore(selectActiveCanvasPage)
   const { context: templatePreviewContext } = useTemplatePreviewContext(activePage)
 
   const closeBtnRef = useRef<HTMLButtonElement>(null)
diff --git a/src/admin/pages/site/property-controls/AnimationControl.tsx b/src/admin/pages/site/property-controls/AnimationControl.tsx
new file mode 100644
index 000000000..150e5dec4
--- /dev/null
+++ b/src/admin/pages/site/property-controls/AnimationControl.tsx
@@ -0,0 +1,59 @@
+import { ANIMATION_PRESETS, parseAnimationPreset } from '@core/animationPresets'
+import { Input } from '@ui/components/Input'
+import { ControlRow } from '@ui/components/ControlRow'
+import { SelectControl } from './SelectControl'
+import { TextControl } from './TextControl'
+import type { ControlProps } from './shared'
+
+export function AnimationControl({ propKey, value, onChange, label }: ControlProps<string>) {
+  const preset = parseAnimationPreset(value)
+  const selected = preset?.name ?? (value && value !== 'none' ? 'custom' : value)
+  const update = (patch: Partial<NonNullable<typeof preset>>) => {
+    const next = { name: 'instatic-fade-in', trigger: 'load', duration: 600, easing: 'ease-out', delay: 0, ...preset, ...patch }
+    const name = next.trigger === 'scroll' ? `${next.name}-scroll` : next.name
+    onChange(propKey, `${name} ${next.duration}ms ${next.easing} ${next.delay}ms 1 both`)
+  }
+  return <>
+    <SelectControl
+      propKey={propKey}
+      label={label}
+      value={selected}
+      options={[
+        { value: '', label: 'Inherited' },
+        { value: 'none', label: 'None' },
+        ...ANIMATION_PRESETS,
+        { value: 'custom', label: 'Custom CSS' },
+      ]}
+      onChange={(_, next) => {
+        const name = String(next)
+        if (name === 'custom') onChange(propKey, 'initial')
+        else if (name === '' || name === 'none') onChange(propKey, name)
+        else update({ name })
+      }}
+    />
+    {preset && <>
+      <SelectControl propKey={`${propKey}-trigger`} label="Trigger" value={preset.trigger}
+        options={[{ value: 'load', label: 'On load' }, { value: 'scroll', label: 'On scroll into view' }]}
+        onChange={(_, trigger) => update({ trigger: String(trigger) })} />
+      <ControlRow propKey={`${propKey}-duration`} label="Duration (ms)">
+        <Input id={`ctrl-${propKey}-duration`} type="number" min={1} max={60000} step={50} fieldSize="sm"
+          value={preset.duration} onChange={event => {
+            const duration = event.target.valueAsNumber
+            if (Number.isFinite(duration) && duration > 0 && duration <= 60000) update({ duration })
+          }} />
+      </ControlRow>
+      <ControlRow propKey={`${propKey}-delay`} label="Delay (ms)">
+        <Input id={`ctrl-${propKey}-delay`} type="number" min={0} max={60000} step={50} fieldSize="sm"
+          value={preset.delay} onChange={event => {
+            const delay = event.target.valueAsNumber
+            if (Number.isFinite(delay) && delay >= 0 && delay <= 60000) update({ delay })
+          }} />
+      </ControlRow>
+      <SelectControl propKey={`${propKey}-easing`} label="Easing" value={preset.easing}
+        options={['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'].map(option => ({ value: option, label: option }))}
+        onChange={(_, easing) => update({ easing: String(easing) })} />
+    </>}
+    {selected === 'custom' && <TextControl propKey={`${propKey}-css`} label="Animation CSS"
+      value={value} onChange={(_, css) => onChange(propKey, String(css))} />}
+  </>
+}
diff --git a/src/admin/pages/site/property-controls/MediaLibraryControl.tsx b/src/admin/pages/site/property-controls/MediaLibraryControl.tsx
index 63cf71dc2..fd82ab891 100644
--- a/src/admin/pages/site/property-controls/MediaLibraryControl.tsx
+++ b/src/admin/pages/site/property-controls/MediaLibraryControl.tsx
@@ -23,6 +23,7 @@ import {
   type CmsMediaAsset,
 } from '@core/persistence/cmsMedia'
 import { isValidImageUrl } from '@core/utils/urlValidation'
+import { parseTokenString } from '@core/templates/tokenInterpolation'
 import type { ControlProps } from './shared'
 import { ControlRow } from '@ui/components/ControlRow'
 import controlRowStyles from '@ui/components/ControlRow/ControlRow.module.css'
@@ -77,8 +78,14 @@ function isHttpUrl(value: string): boolean {
   }
 }
 
+function isMediaToken(value: string): boolean {
+  const segments = parseTokenString(value)
+  return segments.length === 1 && segments[0].kind === 'token'
+}
+
 function isValidMediaUrl(value: string, mediaKind: MediaKind): boolean {
   if (!value) return true
+  if (isMediaToken(value)) return true
   if (isLocalMediaPath(value)) return true
   if (mediaKind === 'image') return isValidImageUrl(value)
   return isHttpUrl(value)
@@ -155,7 +162,7 @@ export function MediaLibraryControl({
       if (viewerAssetId === id) setViewerAssetId(null)
     },
   })
-  const showUrlPreview = validCurrentValue && currentValue
+  const showUrlPreview = validCurrentValue && !isMediaToken(currentValue) && currentValue
   const urlDraft = urlDraftState.sourceValue === currentValue ? urlDraftState.draft : currentValue
   const urlError = !isValidMediaUrl(urlDraft, mediaKind)
 
diff --git a/src/admin/pages/site/store/slices/previewSelectionSlice.ts b/src/admin/pages/site/store/slices/previewSelectionSlice.ts
new file mode 100644
index 000000000..611602a50
--- /dev/null
+++ b/src/admin/pages/site/store/slices/previewSelectionSlice.ts
@@ -0,0 +1,29 @@
+import type { EditorStoreSliceCreator } from '@site/store/types'
+
+interface PreviewSelectionSlice {
+  /** Session-only source page or entry for a template; unset uses the first source. */
+  templatePreviewSelection: Record<string, string>
+  setTemplatePreviewSelection: (templateId: string, sourceId: string | null) => void
+  /** Example entry for editing a component outside its enclosing loop. */
+  componentPreviewSelection: Record<string, { tableSlug: string; rowId: string | null }>
+  setComponentPreviewSelection: (componentId: string, selection: { tableSlug: string; rowId: string | null } | null) => void
+}
+
+declare module '@site/store/types' {
+  interface EditorStore extends PreviewSelectionSlice {}
+}
+
+export const createPreviewSelectionSlice: EditorStoreSliceCreator<PreviewSelectionSlice> = (set) => ({
+  templatePreviewSelection: {},
+  componentPreviewSelection: {},
+  setTemplatePreviewSelection: (templateId, sourceId) =>
+    set((state) => {
+      if (sourceId === null) delete state.templatePreviewSelection[templateId]
+      else state.templatePreviewSelection[templateId] = sourceId
+    }),
+  setComponentPreviewSelection: (componentId, selection) =>
+    set((state) => {
+      if (selection === null) delete state.componentPreviewSelection[componentId]
+      else state.componentPreviewSelection[componentId] = selection
+    }),
+})
diff --git a/src/admin/pages/site/store/slices/uiSlice.ts b/src/admin/pages/site/store/slices/uiSlice.ts
index e182b1c2d..fad4e71ab 100644
--- a/src/admin/pages/site/store/slices/uiSlice.ts
+++ b/src/admin/pages/site/store/slices/uiSlice.ts
@@ -212,17 +212,6 @@ interface UiSlice {
    */
   exitVisualComponentMode: () => void
 
-  /**
-   * Session-only preview source per template page (templateId → source id):
-   * the page id whose content fills an `everywhere` template's outlet, or the
-   * row id whose entry drives a `postTypes` template's `currentEntry`. A pure
-   * preview convenience — never persisted to the site document. Unset → the
-   * first real page / published row is previewed.
-   */
-  templatePreviewSelection: Record<string, string>
-  /** Set (or clear, with `null`) the previewed source for a template page. */
-  setTemplatePreviewSelection: (templateId: string, sourceId: string | null) => void
-
   /** Class selected in the global Selectors panel. */
   selectedSelectorClassId: string | null
   setSelectedSelectorClassId: (classId: string | null) => void
@@ -353,7 +342,6 @@ export const createUiSlice: EditorStoreSliceCreator<UiSlice> = (set, get) => ({
   activeEditorFileId: null,
   activeCodeBuffer: null,
   activeDocument: null,
-  templatePreviewSelection: {},
   selectedSelectorClassId: null,
   highlightedSelectorClassId: null,
   selectedSelectorClassIds: [],
@@ -590,15 +578,6 @@ export const createUiSlice: EditorStoreSliceCreator<UiSlice> = (set, get) => ({
         state.previousActivePageId = null
       }),
 
-  setTemplatePreviewSelection: (templateId, sourceId) =>
-    set((state) => {
-      if (sourceId === null) {
-        delete state.templatePreviewSelection[templateId]
-      } else {
-        state.templatePreviewSelection[templateId] = sourceId
-      }
-    }),
-
   setSelectedSelectorClassId: (classId) => {
     const state = get()
     // Single-select and multi-select are mutually exclusive surfaces. Opening a
diff --git a/src/admin/pages/site/store/store.ts b/src/admin/pages/site/store/store.ts
index 6500fde13..79379684b 100644
--- a/src/admin/pages/site/store/store.ts
+++ b/src/admin/pages/site/store/store.ts
@@ -8,6 +8,7 @@ import { createSiteSlice } from './slices/siteSlice'
 import { createSelectionSlice } from './slices/selectionSlice'
 import { createCanvasSlice } from './slices/canvasSlice'
 import { createUiSlice } from './slices/uiSlice'
+import { createPreviewSelectionSlice } from './slices/previewSelectionSlice'
 import { createStyleRuleSlice } from './slices/styleRuleSlice'
 import { createFilesSlice } from './slices/filesSlice'
 import { createVisualComponentsSlice } from './slices/visualComponentsSlice'
@@ -26,11 +27,12 @@ import { restoreStoredSiteEditorLayout } from '@site/layout/siteEditorLayoutPers
 /**
  * EditorStore — the central Zustand store for the visual editor.
  *
- * Composed of 13 slices (6 canonical Phase 0 + agentSlice + sitePanelSlice + filesSlice + visualComponentsSlice + clipboardSlice + inlineEditSlice + layoutsSlice):
+ * Composed of responsibility-specific slices:
  *   - siteSlice:        owns SiteDocument (pages, nodes, breakpoints, settings, classes, files)
  *   - selectionSlice:      selectedNodeId, hoveredNodeId
  *   - canvasSlice:         zoom, pan, activeBreakpointId, canvasMode (Constraint #317)
  *   - uiSlice:             panel visibility, insert picker
+ *   - previewSelectionSlice: session-only template and component example data
  *   - styleRuleSlice:      style-rule (class + ambient) CRUD + node↔class assignment
  *   - filesSlice:          SiteFile CRUD (Contribution #595 / Task #429)
  *   - visualComponentsSlice: VisualComponent CRUD (Contribution #619 / Task #436)
@@ -66,6 +68,7 @@ export const useEditorStore = create<EditorStore>()(
         ...createSelectionSlice(...args),
         ...createCanvasSlice(...args),
         ...createUiSlice(...args),
+        ...createPreviewSelectionSlice(...args),
         ...createStyleRuleSlice(...args),
         ...createFilesSlice(...args),
         ...createVisualComponentsSlice(...args),
diff --git a/src/core/animationPresets.ts b/src/core/animationPresets.ts
new file mode 100644
index 000000000..a35794787
--- /dev/null
+++ b/src/core/animationPresets.ts
@@ -0,0 +1,31 @@
+/** Shared names and keyframes for the editor's entrance-animation presets. */
+export const ANIMATION_PRESETS = [
+  { value: 'instatic-fade-in', label: 'Fade in', from: 'opacity: 0;', to: 'opacity: 1;' },
+  { value: 'instatic-slide-up', label: 'Slide up', from: 'opacity: 0; translate: 0 24px;', to: 'opacity: 1; translate: 0 0;' },
+  { value: 'instatic-slide-down', label: 'Slide down', from: 'opacity: 0; translate: 0 -24px;', to: 'opacity: 1; translate: 0 0;' },
+  { value: 'instatic-slide-left', label: 'Slide from right', from: 'opacity: 0; translate: 24px 0;', to: 'opacity: 1; translate: 0 0;' },
+  { value: 'instatic-slide-right', label: 'Slide from left', from: 'opacity: 0; translate: -24px 0;', to: 'opacity: 1; translate: 0 0;' },
+  { value: 'instatic-zoom-in', label: 'Zoom in', from: 'opacity: 0; scale: .96;', to: 'opacity: 1; scale: 1;' },
+] as const
+
+export function parseAnimationPreset(value: string) {
+  const match = /^(instatic-[\w-]+) (\d+)ms (ease|ease-in|ease-out|ease-in-out|linear) (\d+)ms 1 both$/.exec(value)
+  if (!match) return null
+  const trigger = match[1].endsWith('-scroll') ? 'scroll' : 'load'
+  const name = trigger === 'scroll' ? match[1].slice(0, -7) : match[1]
+  if (!ANIMATION_PRESETS.some(preset => preset.value === name)) return null
+  return { name, trigger, duration: Number(match[2]), easing: match[3], delay: Number(match[4]) }
+}
+
+/** Only ship presets actually referenced by the emitted stylesheet. */
+export function animationPresetCss(css: string): string {
+  return ANIMATION_PRESETS.filter(preset => new RegExp(`\\b${preset.value}(?![\\w-])`).test(css))
+    .map(preset => {
+      const frames = `@keyframes ${preset.value} { from { ${preset.from} } to { ${preset.to} } }`
+      // Override the keyframes themselves, so specificity and !important on
+      // authored animation declarations cannot defeat reduced-motion settings.
+      // No transform is used: entrance motion preserves an authored transform.
+      const reduced = `@media (prefers-reduced-motion: reduce) { @keyframes ${preset.value} { from { ${preset.to} } to { ${preset.to} } } }`
+      return `${frames}\n${reduced}`
+    }).join('\n')
+}
diff --git a/src/core/htmlImport/rules.ts b/src/core/htmlImport/rules.ts
index fd0f13ddd..63c7588dc 100644
--- a/src/core/htmlImport/rules.ts
+++ b/src/core/htmlImport/rules.ts
@@ -139,14 +139,18 @@ function submitLabel(el: Element): string {
 }
 
 function mapLoopProps(el: Element): Record<string, unknown> {
+  const sourceId = attr(el, 'data-source-id')
+  const direction = normalizedAttr(el, 'data-direction')
   const tableId = attr(el, 'data-table-id')
+  const fieldId = attr(el, 'data-field-id')
   const customTag = attr(el, 'data-custom-tag')
   const tag = attr(el, 'data-tag')
   return {
-    sourceId: attr(el, 'data-source-id'),
-    filters: tableId ? { tableId } : {},
+    sourceId,
+    filters: { ...(tableId ? { tableId } : {}), ...(fieldId ? { fieldId } : {}) },
     orderBy: attr(el, 'data-order-by'),
-    direction: normalizedAttr(el, 'data-direction') === 'asc' ? 'asc' : 'desc',
+    direction: direction === 'asc' || direction === 'desc'
+      ? direction : sourceId === 'entry.field' ? 'asc' : 'desc',
     limit: integerAttr(el, 'data-limit', 10, 1),
     offset: integerAttr(el, 'data-offset', 0, 0),
     pagination: normalizedAttr(el, 'data-pagination') === 'infinite' ? 'infinite' : 'none',
diff --git a/src/core/imageLightboxRuntime.ts b/src/core/imageLightboxRuntime.ts
new file mode 100644
index 000000000..c9d0814dc
--- /dev/null
+++ b/src/core/imageLightboxRuntime.ts
@@ -0,0 +1,119 @@
+/** Self-contained browser runtime, serialized by the server as a same-origin asset. */
+export function installImageLightbox(doc: Document): () => void {
+  const win = doc.defaultView
+  if (!win || !win.HTMLDialogElement?.prototype.showModal) return () => {}
+  const host = doc.createElement('div')
+  const shadow = host.attachShadow({ mode: 'open' })
+  const style = doc.createElement('style')
+  style.textContent = `
+    :host { all: initial; }
+    dialog { position:fixed; inset:0; box-sizing:border-box; width:100%; height:100%;
+      max-width:none; max-height:none; margin:0; padding:64px 20px 24px; border:0;
+      background:transparent; color:#fff; overflow:hidden; outline:none; }
+    dialog[open] { display:grid; place-items:center; }
+    dialog::backdrop { background:transparent; }
+    .shade { position:absolute; inset:0; background:rgba(0,0,0,.86); opacity:0;
+      transition:opacity 220ms ease; }
+    img { position:relative; display:block; width:auto; height:auto; max-width:100%;
+      max-height:calc(100dvh - 88px); object-fit:contain; opacity:0; transform:scale(.94);
+      transition:opacity 220ms ease, transform 260ms cubic-bezier(.2,.7,.2,1);
+      box-shadow:0 16px 64px rgba(0,0,0,.3); }
+    button { position:absolute; top:max(12px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right));
+      display:grid; place-items:center; width:48px; height:48px; padding:0; border:2px solid #fff;
+      border-radius:50%; background:#fff; color:#111; font:36px/1 system-ui,sans-serif;
+      cursor:pointer; box-shadow:0 2px 16px rgba(0,0,0,.5); }
+    button:hover { background:#e5e5e5; }
+    button:focus-visible { outline:3px solid #fff; outline-offset:4px; }
+    dialog[data-visible] .shade, dialog[data-visible] img { opacity:1; }
+    dialog[data-visible] img { transform:scale(1); }
+    @media (prefers-reduced-motion:reduce) { .shade, img { transition:none; } }
+  `
+  const dialog = doc.createElement('dialog')
+  dialog.setAttribute('aria-label', 'Image preview')
+  const shade = doc.createElement('div')
+  shade.className = 'shade'
+  const image = doc.createElement('img')
+  const closeButton = doc.createElement('button')
+  closeButton.type = 'button'
+  closeButton.textContent = '×'
+  closeButton.setAttribute('aria-label', 'Close image preview')
+  dialog.append(shade, image, closeButton)
+  shadow.append(style, dialog)
+  let trigger: HTMLAnchorElement | null = null
+  let savedStyle = ''
+  let scrollX = 0
+  let scrollY = 0
+  let closing = false
+  let timer = 0
+  let frame = 0
+  let version = 0
+
+  const finish = () => {
+    win.clearTimeout(timer)
+    win.cancelAnimationFrame(frame)
+    version++
+    if (!dialog.open) return
+    dialog.close()
+    doc.body.style.cssText = savedStyle
+    win.scrollTo({ left: scrollX, top: scrollY, behavior: 'instant' })
+    trigger?.focus({ preventScroll: true })
+    trigger = null
+    closing = false
+    host.remove()
+  }
+  const close = () => {
+    if (!dialog.open || closing) return
+    closing = true
+    version++
+    win.cancelAnimationFrame(frame)
+    dialog.removeAttribute('data-visible')
+    timer = win.setTimeout(finish, win.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 260)
+  }
+  closeButton.addEventListener('click', close)
+  dialog.addEventListener('click', event => {
+    if (event.target === dialog || event.target === shade) close()
+  })
+  dialog.addEventListener('cancel', event => { event.preventDefault(); close() })
+
+  const onClick = (event: MouseEvent) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+    const target = event.target
+    if (!(target instanceof win.Element)) return
+    const link = target.closest<HTMLAnchorElement>('a.instatic-lightbox-trigger')
+    const source = link?.querySelector('img')
+    if (!link || !source || link.closest('[contenteditable="true"]')) return
+    event.preventDefault()
+    if (dialog.open) return
+    trigger = link
+    scrollX = win.scrollX
+    scrollY = win.scrollY
+    savedStyle = doc.body.style.cssText
+    const gutter = win.innerWidth - doc.documentElement.clientWidth
+    const padding = parseFloat(win.getComputedStyle(doc.body).paddingRight) || 0
+    Object.assign(doc.body.style, {
+      position: 'fixed', top: `-${scrollY}px`, left: `-${scrollX}px`,
+      width: '100%', boxSizing: 'border-box', paddingRight: `${padding + gutter}px`,
+    })
+    image.src = source.currentSrc || source.src
+    image.alt = source.alt
+    dialog.removeAttribute('data-visible')
+    doc.body.append(host)
+    dialog.showModal()
+    closeButton.focus({ preventScroll: true })
+    const currentVersion = ++version
+    const reveal = () => {
+      if (version !== currentVersion || !dialog.open || closing) return
+      frame = win.requestAnimationFrame(() => {
+        frame = win.requestAnimationFrame(() => dialog.setAttribute('data-visible', ''))
+      })
+    }
+    if (image.decode) void image.decode().then(reveal, reveal)
+    else reveal()
+  }
+  doc.addEventListener('click', onClick)
+  return () => {
+    doc.removeEventListener('click', onClick)
+    finish()
+    host.remove()
+  }
+}
diff --git a/src/core/loops/entryScope.ts b/src/core/loops/entryScope.ts
new file mode 100644
index 000000000..99d8b0427
--- /dev/null
+++ b/src/core/loops/entryScope.ts
@@ -0,0 +1,41 @@
+import { getAncestors, type Page } from '@core/page-tree'
+import type { DataField, DataTable } from '@core/data/schemas'
+
+/** Item schema of the closest enclosing repeater loop, if any. */
+export function entryScopeRepeater(page: Page, nodeId: string, tables: readonly DataTable[]): Extract<DataField, { type: 'repeater' }> | undefined {
+  const loop = [...getAncestors(page, nodeId)].reverse().find((node) => node.moduleId === 'base.loop')
+  if (loop?.props.sourceId !== 'entry.field') return undefined
+  const filters = loop.props.filters
+  if (!filters || typeof filters !== 'object' || Array.isArray(filters)) return undefined
+  const fieldId = (filters as Record<string, unknown>).fieldId
+  for (const table of entryScopeTables(page, loop.id, tables)) {
+    const field = table.fields.find((candidate) => candidate.id === fieldId)
+    if (field?.type === 'repeater') return field
+  }
+  return undefined
+}
+
+/** Tables represented by the entry stack at a node, following relation loops. */
+export function entryScopeTables(page: Page, nodeId: string, tables: readonly DataTable[]): DataTable[] {
+  const target = page.template?.target
+  let scope = target?.kind === 'postTypes'
+    ? tables.filter((table) => target.tableSlugs.includes(table.slug)) : []
+  for (const node of getAncestors(page, nodeId)) {
+    if (node.moduleId !== 'base.loop') continue
+    const filters = node.props.filters
+    const values = filters && typeof filters === 'object' && !Array.isArray(filters)
+      ? filters as Record<string, unknown> : {}
+    if (node.props.sourceId === 'data.rows') {
+      scope = tables.filter((table) => table.id === values.tableId)
+    } else if (node.props.sourceId === 'entry.field') {
+      const targetIds = new Set(scope.flatMap((table) => {
+        const field = table.fields.find((candidate) => candidate.id === values.fieldId)
+        return field?.type === 'relation' && field.allowMultiple ? [field.targetTableId] : []
+      }))
+      scope = tables.filter((table) => targetIds.has(table.id))
+    } else {
+      scope = []
+    }
+  }
+  return scope
+}
diff --git a/src/core/loops/index.ts b/src/core/loops/index.ts
index dcc882132..c2b7193eb 100644
--- a/src/core/loops/index.ts
+++ b/src/core/loops/index.ts
@@ -10,10 +10,12 @@
  */
 
 export type { LoopItem } from './types'
+export { entryScopeTables, entryScopeRepeater } from './entryScope'
 export { pageToLoopItem, filterPagesForLoop } from './sources/sitePages'
 export {
   ENTRY_FIELD_FILTER_KEY,
   ENTRY_FIELD_SOURCE_ID,
   resolveEntryFieldItems,
+  entryFieldContextKey,
   type EntryFieldMedia,
 } from './sources/entryField'
diff --git a/src/core/loops/sources/dataRows.ts b/src/core/loops/sources/dataRows.ts
index 2e2abe3d2..8b9ddf1a2 100644
--- a/src/core/loops/sources/dataRows.ts
+++ b/src/core/loops/sources/dataRows.ts
@@ -29,7 +29,8 @@ import { publicDataUserFromParts } from '@core/data/publicDataUser'
 import { normalizeDataTableFields } from '@core/data/fields'
 import { readFeaturedMediaCell } from '@core/data/cells'
 import type { DataField, DataRowCells } from '@core/data/schemas'
-import { collectMediaIds, resolveMediaIdsToPaths, resolvedMediaOverlay } from './dataRowsMedia'
+import { collectMediaIds, resolveMediaIdsToPaths } from './dataRowsMedia'
+import { resolvedCellOverlay } from './dataRowsCells'
 
 // ---------------------------------------------------------------------------
 // Internal SQL row shape
@@ -124,7 +125,7 @@ function rowToLoopItem(
       ...cells,
       // Media fields: replace stored ids with resolved public paths so a
       // `{currentEntry.<field>}` binding renders a URL, not the raw id.
-      ...resolvedMediaOverlay(cells, fields, mediaPathMap),
+      ...resolvedCellOverlay(cells, fields, mediaPathMap),
       // System identity (overlay after cells so these are never shadowed)
       id: row.row_id,
       rowId: row.row_id,
@@ -183,17 +184,18 @@ async function fetchPage(
   db: LoopSourceDb,
   orderBy: OrderColumn,
   direction: 'asc' | 'desc',
-  opts: { tableId: string; limit: number; offset: number; filter: CellFilter | null; orderCellField: string | null },
+  opts: { tableId: string; limit: number; offset: number; filter: CellFilter | null; orderCellField: string | null; rowIds?: readonly string[] },
 ): Promise<PublishedDataRowSqlRow[]> {
   const { tableId, limit, offset, filter, orderCellField } = opts
   const column = 'data_row_versions.cells_json'
+  const ids = opts.rowIds ?? []
   // SQLite binds `?` by POSITION IN THE TEXT, so the parameter list must follow
   // the clause order: tableId, the cell condition (WHERE), the ordering cell
   // (ORDER BY), then limit/offset. Postgres indices are numbered to match.
   const cell = filter
-    ? cellFilterSql({ filter, dialect: db.dialect, column, nextParamIndex: 2 })
+    ? cellFilterSql({ filter, dialect: db.dialect, column, nextParamIndex: 2 + ids.length })
     : null
-  const cellParams = cell?.params ?? []
+  const cellParams = [...ids, ...(cell?.params ?? [])]
   const order = orderCellField
     ? cellOrderSql({ field: orderCellField, dialect: db.dialect, column, paramIndex: 2 + cellParams.length })
     : null
@@ -234,6 +236,7 @@ async function fetchPage(
        and data_rows.status = 'published'
        and data_rows.deleted_at is null
        and data_tables.deleted_at is null
+       ${opts.rowIds ? `and data_rows.logical_id in (${ids.map((_, i) => positionalParam(db, i + 2)).join(', ')})` : ''}
        ${cell ? `and ${cell.sql}` : ''}
      order by ${orderColumn} ${direction}, data_row_versions.id ${direction}
      limit ${limitParam} offset ${offsetParam}`,
@@ -294,7 +297,7 @@ function dataKindRowToLoopItem(
       ...cells,
       // Media fields: replace stored ids with resolved public paths (see
       // `rowToLoopItem`).
-      ...resolvedMediaOverlay(cells, fields, mediaPathMap),
+      ...resolvedCellOverlay(cells, fields, mediaPathMap),
       id: row.row_id,
       rowId: row.row_id,
       tableId: row.table_id,
@@ -349,17 +352,19 @@ async function fetchDataKindPage(
     orderCellField: string | null
     /** Post-type drafts (a branch): skip rows explicitly taken offline. */
     excludeUnpublished: boolean
+    rowIds?: readonly string[]
   },
 ): Promise<DataKindRowSqlRow[]> {
   const { tableId, limit, offset, filter, orderCellField, excludeUnpublished } = opts
   const sortKey: 'createdAt' | 'updatedAt' | 'slug' =
     orderBy === 'updatedAt' ? 'updatedAt' : orderBy === 'slug' ? 'slug' : 'createdAt'
   const column = 'data_rows.cells_json'
+  const ids = opts.rowIds ?? []
   // Parameter order follows the clause order — see `fetchPage`.
   const cell = filter
-    ? cellFilterSql({ filter, dialect: db.dialect, column, nextParamIndex: 2 })
+    ? cellFilterSql({ filter, dialect: db.dialect, column, nextParamIndex: 2 + ids.length })
     : null
-  const cellParams = cell?.params ?? []
+  const cellParams = [...ids, ...(cell?.params ?? [])]
   const order = orderCellField
     ? cellOrderSql({ field: orderCellField, dialect: db.dialect, column, paramIndex: 2 + cellParams.length })
     : null
@@ -391,6 +396,7 @@ async function fetchDataKindPage(
      where data_rows.table_id = ${positionalParam(db, 1)}
        and data_rows.deleted_at is null
        and data_tables.deleted_at is null
+       ${opts.rowIds ? `and data_rows.logical_id in (${ids.map((_, i) => positionalParam(db, i + 2)).join(', ')})` : ''}
        ${excludeUnpublished ? "and data_rows.status <> 'unpublished'" : ''}
        ${cell ? `and ${cell.sql}` : ''}
      order by ${orderColumn} ${direction}, data_rows.id ${direction}
@@ -430,9 +436,12 @@ export async function fetchPublishedDataRowItems(
      * loops show what the branch would publish.
      */
     drafts?: boolean
+    /** Exact logical row identities, for batched relation projection. */
+    rowIds?: readonly string[]
   },
 ): Promise<LoopFetchResult> {
   if (!opts.tableId) return { items: [], totalItems: 0 }
+  if (opts.rowIds?.length === 0) return { items: [], totalItems: 0 }
   const cellFilter = opts.cellFilter ?? null
 
   const { rows: tableRows } = await db<DataTableProjectionRow>`
@@ -457,6 +466,27 @@ export async function fetchPublishedDataRowItems(
   const direction: 'asc' | 'desc' = opts.direction === 'asc' ? 'asc' : 'desc'
 
   const excludeUnpublished = table.kind !== 'data' && opts.drafts === true
+  if (opts.rowIds) {
+    const query = {
+      ...opts, filter: cellFilter, orderCellField, excludeUnpublished,
+    }
+    const items: LoopItem[] = []
+    // Stay below SQLite's bind limit even for large multi-relations.
+    const uniqueIds = [...new Set(opts.rowIds)]
+    for (let start = 0; start < uniqueIds.length; start += 200) {
+      const batch = { ...query, rowIds: uniqueIds.slice(start, start + 200), limit: 200, offset: 0 }
+      if (table.kind === 'data' || opts.drafts) {
+        const rows = await fetchDataKindPage(db, orderBy, direction, batch)
+        const media = await resolveMediaIdsToPaths(db, collectMediaIds(rows, fields))
+        items.push(...rows.map((row) => dataKindRowToLoopItem(row, media, fields)))
+      } else {
+        const rows = await fetchPage(db, orderBy, direction, batch)
+        const media = await resolveMediaIdsToPaths(db, collectMediaIds(rows, fields))
+        items.push(...rows.map((row) => rowToLoopItem(row, media, fields)))
+      }
+    }
+    return { items, totalItems: items.length }
+  }
   if (table.kind === 'data' || opts.drafts) {
     // The count must apply the same condition, or pagination advertises rows
     // the page query filters out.
diff --git a/src/core/loops/sources/dataRowsCells.ts b/src/core/loops/sources/dataRowsCells.ts
new file mode 100644
index 000000000..b35b0a3b7
--- /dev/null
+++ b/src/core/loops/sources/dataRowsCells.ts
@@ -0,0 +1,58 @@
+import { readMediaCellIds, readRepeaterCell } from '@core/data/cells'
+import type { DataField, DataRowCells, RepeaterItemField } from '@core/data/schemas'
+
+/** Select cells store option IDs; repeater bindings should show their labels. */
+function repeaterChoiceLabels(cells: DataRowCells, fields: readonly RepeaterItemField[]): DataRowCells {
+  const overlay: DataRowCells = {}
+  for (const field of fields) {
+    if (field.type !== 'select' && field.type !== 'multiSelect') continue
+    const label = (value: unknown) => {
+      if (typeof value !== 'string') return ''
+      return field.options.find((option) => option.id === value || option.value === value)?.label ?? value
+    }
+    const value = cells[field.id]
+    overlay[field.id] = field.type === 'multiSelect'
+      ? (Array.isArray(value) ? value.map(label) : [])
+      : label(value)
+  }
+  return overlay
+}
+
+/**
+ * Resolve schema-declared media ids without changing collection cardinality:
+ * scalar media becomes a public path (or null), multi-media stays an ordered
+ * array of resolvable public paths, and repeater items keep their `{ id, cells }`
+ * shape while media and select labels inside `cells` are projected.
+ */
+export function resolvedCellOverlay(
+  cells: DataRowCells,
+  fields: readonly DataField[],
+  mediaPathMap: Map<string, string>,
+): DataRowCells {
+  const overlay: DataRowCells = {}
+  for (const field of fields) {
+    if (field.type === 'media') {
+      const ids = readMediaCellIds(cells, field.id)
+      if (field.allowMultiple === true) {
+        overlay[field.id] = ids.flatMap((id) => {
+          const path = mediaPathMap.get(id)
+          return path ? [path] : []
+        })
+      } else {
+        const id = ids[0]
+        overlay[field.id] = id ? (mediaPathMap.get(id) ?? null) : null
+      }
+      continue
+    }
+    if (field.type !== 'repeater') continue
+    overlay[field.id] = readRepeaterCell(cells, field.id).map((item) => ({
+      ...item,
+      cells: {
+        ...item.cells,
+        ...resolvedCellOverlay(item.cells, field.fields, mediaPathMap),
+        ...repeaterChoiceLabels(item.cells, field.fields),
+      },
+    }))
+  }
+  return overlay
+}
diff --git a/src/core/loops/sources/dataRowsMedia.ts b/src/core/loops/sources/dataRowsMedia.ts
index 4f08813dc..486ba1ad7 100644
--- a/src/core/loops/sources/dataRowsMedia.ts
+++ b/src/core/loops/sources/dataRowsMedia.ts
@@ -92,41 +92,3 @@ export function collectMediaIds(
   }
   return ids
 }
-
-/**
- * Resolve schema-declared media ids without changing collection cardinality:
- * scalar media becomes a public path (or null), multi-media stays an ordered
- * array of resolvable public paths, and repeater items keep their `{ id, cells }`
- * shape while media inside `cells` is projected recursively.
- */
-export function resolvedMediaOverlay(
-  cells: DataRowCells,
-  fields: readonly MediaProjectionField[],
-  mediaPathMap: Map<string, string>,
-): DataRowCells {
-  const overlay: DataRowCells = {}
-  for (const field of fields) {
-    if (field.type === 'media') {
-      const ids = readMediaCellIds(cells, field.id)
-      if (field.allowMultiple === true) {
-        overlay[field.id] = ids.flatMap((id) => {
-          const path = mediaPathMap.get(id)
-          return path ? [path] : []
-        })
-      } else {
-        const id = ids[0]
-        overlay[field.id] = id ? (mediaPathMap.get(id) ?? null) : null
-      }
-      continue
-    }
-    if (field.type !== 'repeater') continue
-    overlay[field.id] = readRepeaterCell(cells, field.id).map((item) => ({
-      ...item,
-      cells: {
-        ...item.cells,
-        ...resolvedMediaOverlay(item.cells, field.fields, mediaPathMap),
-      },
-    }))
-  }
-  return overlay
-}
diff --git a/src/core/loops/sources/entryField.ts b/src/core/loops/sources/entryField.ts
index d56335ca7..225913450 100644
--- a/src/core/loops/sources/entryField.ts
+++ b/src/core/loops/sources/entryField.ts
@@ -7,6 +7,8 @@
  * `data.rows` project listing resolves the gallery belonging to each project.
  */
 
+import { RepeaterItemSchema } from '@core/data/schemas'
+import { safeParseValue } from '@core/utils/typeboxHelpers'
 import type {
   ContextualLoopEntitySource,
   LoopFetchResult,
@@ -29,6 +31,12 @@ export interface ResolveEntryFieldItemsOptions {
   limit?: number
   direction?: 'asc' | 'desc'
   mediaByReference?: ReadonlyMap<string, EntryFieldMedia>
+  /** Present only for a schema-declared relation; missing targets are omitted. */
+  relatedItems?: ReadonlyMap<string, LoopItem>
+}
+
+export function entryFieldContextKey(entry: LoopItem): string {
+  return JSON.stringify([entry.fields.tableId ?? null, entry.id])
 }
 
 function itemId(value: unknown, index: number): string {
@@ -70,10 +78,12 @@ function projectItem(
   }
 
   if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const repeater = safeParseValue(RepeaterItemSchema, value)
     return {
       id,
       fields: {
         ...(value as Record<string, unknown>),
+        ...(repeater.ok ? repeater.value.cells : {}),
         id,
         value,
         index,
@@ -98,15 +108,21 @@ export function resolveEntryFieldItems(
   if (!Array.isArray(value)) return { items: [], totalItems: 0 }
 
   const direction = options.direction === 'desc' ? 'desc' : 'asc'
-  const ordered = direction === 'desc' ? [...value].reverse() : value
+  const values: Array<{ value: unknown; related?: LoopItem }> = value.flatMap((value) => {
+    if (!options.relatedItems) return [{ value }]
+    const related = typeof value === 'string' ? options.relatedItems.get(value) : undefined
+    return related ? [{ value, related }] : []
+  })
+  const ordered = direction === 'desc' ? [...values].reverse() : values
   const offset = Math.max(0, Math.floor(options.offset ?? 0))
   const limit = Math.max(1, Math.floor(options.limit ?? (ordered.length || 1)))
   const slice = ordered.slice(offset, offset + limit)
 
   return {
-    items: slice.map((item, index) =>
-      projectItem(item, offset + index, options.mediaByReference)),
-    totalItems: value.length,
+    items: slice.map(({ value, related }, index) => related
+      ? { ...related, fields: { ...related.fields, index: offset + index } }
+      : projectItem(value, offset + index, options.mediaByReference)),
+    totalItems: values.length,
   }
 }
 
diff --git a/src/core/markdown/alignedBlock.ts b/src/core/markdown/alignedBlock.ts
new file mode 100644
index 000000000..f0059b3af
--- /dev/null
+++ b/src/core/markdown/alignedBlock.ts
@@ -0,0 +1,21 @@
+import type { TokenizerExtension } from 'marked'
+
+export function serializeAlignedBlock(tag: 'p' | 'h2' | 'h3' | 'h4', alignment: unknown, content: string): string | null {
+  if (typeof alignment !== 'string' || !['left', 'center', 'right', 'justify'].includes(alignment)) return null
+  return `<${tag} align="${alignment}">${content}</${tag}>`
+}
+
+/** Restricted HTML wrapper; its contents remain editable Markdown. */
+export const alignedBlock: TokenizerExtension = {
+  name: 'instaticAlignedBlock',
+  level: 'block',
+  start: (src) => src.search(/<(?:p|h[2-4]) align="/),
+  tokenizer(src) {
+    const match = src.match(/^<(p|h[2-4]) align="(left|center|right|justify)">([\s\S]*?)<\/\1>(?:\n|$)/)
+    if (!match) return undefined
+    return {
+      type: 'instaticAlignedBlock', raw: match[0],
+      tag: match[1], alignment: match[2], tokens: this.lexer.inlineTokens(match[3]),
+    }
+  },
+}
diff --git a/src/core/markdown/markdownDocument.ts b/src/core/markdown/markdownDocument.ts
index 3c2a10eb5..5de3a1a69 100644
--- a/src/core/markdown/markdownDocument.ts
+++ b/src/core/markdown/markdownDocument.ts
@@ -10,8 +10,7 @@
  * `marked`) plus two CMS extensions:
  *   - `@[video](url)` — a video media node (parsed by a custom marked
  *     tokenizer; serialised back as the same raw line)
- *   - Images on their own line are promoted to a block-level `media` node
- *     rather than wrapped in a paragraph
+ *   - Standalone images become media nodes; titles store image presentation.
  *
  * Headings are clamped to h2-h4. The title of a post owns h1, so anything
  * shallower is normalised up to h2 and anything deeper is normalised down
@@ -26,6 +25,8 @@
  */
 
 import { Marked, type Tokens, type Token } from 'marked'
+import { alignedBlock, serializeAlignedBlock } from './alignedBlock'
+import { mediaNode, parseMediaImageTitle, serializeMediaImageTitle, escapeImageTitle, mediaSizeAttr, booleanAttr, type MediaImagePresentation } from './mediaImagePresentation'
 
 // ---------------------------------------------------------------------------
 // ProseMirror JSON shape (just enough — we don't pull in @tiptap/pm here so
@@ -60,6 +61,7 @@ const marked = new Marked({ gfm: true })
 // token so the walker can map it to a media node.
 marked.use({
   extensions: [
+    alignedBlock,
     {
       name: 'instaticVideo',
       level: 'block',
@@ -122,6 +124,14 @@ function tokensToBlockNodes(tokens: Token[]): JSONNode[] {
 
 function tokenToBlockNode(token: Token): JSONNode | JSONNode[] | null {
   switch (token.type) {
+    case 'instaticAlignedBlock': {
+      const block = token as Tokens.Generic
+      return {
+        type: block.tag === 'p' ? 'paragraph' : 'heading',
+        attrs: { ...(block.tag === 'p' ? {} : { level: Number(block.tag.slice(1)) }), textAlign: block.alignment },
+        content: inlineTokensToNodes(block.tokens ?? [], []),
+      }
+    }
     case 'paragraph':
       return paragraphTokenToNode(token as Tokens.Paragraph)
     case 'heading':
@@ -167,7 +177,7 @@ function paragraphTokenToNode(token: Tokens.Paragraph): JSONNode | JSONNode[] {
   const inline = token.tokens ?? []
   if (inline.length === 1 && inline[0].type === 'image') {
     const img = inline[0] as Tokens.Image
-    return mediaNode('image', img.href, img.text)
+    return mediaNode('image', img.href, img.text, parseMediaImageTitle(img.title))
   }
 
   // Multiple inline tokens but the only non-text content is an image →
@@ -186,7 +196,7 @@ function paragraphTokenToNode(token: Tokens.Paragraph): JSONNode | JSONNode[] {
       if (t.type === 'image') {
         flush()
         const img = t as Tokens.Image
-        nodes.push(mediaNode('image', img.href, img.text))
+        nodes.push(mediaNode('image', img.href, img.text, parseMediaImageTitle(img.title)))
       } else {
         buffer.push(t)
       }
@@ -394,7 +404,7 @@ function pushInline(out: JSONNode[], token: Token, marks: JSONMark[]): void {
     }
     case 'link': {
       const link = token as Tokens.Link
-      const linkMark: JSONMark = { type: 'link', attrs: { href: link.href } }
+      const linkMark: JSONMark = { type: 'link', attrs: { href: link.href, ...(link.title === 'instatic:download' ? { download: '' } : {}) } }
       pushInlineGroup(out, link.tokens ?? [], addMark(marks, linkMark))
       return
     }
@@ -489,20 +499,11 @@ function blockNodesToMarkdown(nodes: JSONNode[]): string {
 
 function blockNodeToMarkdown(node: JSONNode): string {
   switch (node.type) {
-    // Note: paragraph / heading nodes may carry a `textAlign` attribute
-    // (set by the TextAlign extension in the editor). Markdown has no
-    // native alignment syntax, so the attribute is intentionally NOT
-    // serialised here in v1 — alignment is an editor-session only
-    // affordance. Persisting it would require wrapping the block in
-    // inline HTML (`<div class="text-align-…">…</div>`), which adds a
-    // round-trip parser + a publisher CSS rule, both of which are a
-    // separate follow-up. Authors using alignment today will see it
-    // visually while editing; it resets after save+reload.
     case 'paragraph':
-      return inlineToMarkdown(node.content ?? [])
+      return serializeAlignedBlock('p', node.attrs?.textAlign, inlineToMarkdown(node.content ?? [])) ?? inlineToMarkdown(node.content ?? [])
     case 'heading': {
       const level = clampHeadingLevel(numberAttr(node, 'level', 2))
-      return `${'#'.repeat(level)} ${inlineToMarkdown(node.content ?? [])}`
+      return serializeAlignedBlock(`h${level}`, node.attrs?.textAlign, inlineToMarkdown(node.content ?? [])) ?? `${'#'.repeat(level)} ${inlineToMarkdown(node.content ?? [])}`
     }
     case 'blockquote':
       return blockNodesToMarkdown(node.content ?? [])
@@ -530,7 +531,13 @@ function blockNodeToMarkdown(node: JSONNode): string {
       const mediaType = stringAttr(node, 'mediaType', 'image')
       if (mediaType === 'video') return `@[video](${src})`
       const alt = stringAttr(node, 'alt', '')
-      return `![${alt}](${src})`
+      const presentation: MediaImagePresentation = {
+        size: mediaSizeAttr(node, 'size'),
+        lightbox: booleanAttr(node, 'lightbox'),
+        title: stringAttr(node, 'title', ''),
+      }
+      const metadata = serializeMediaImageTitle(presentation)
+      return `![${alt}](${src}${metadata ? ` "${escapeImageTitle(metadata)}"` : ''})`
     }
     default:
       return ''
@@ -658,7 +665,7 @@ function openMark(mark: JSONMark): string {
 function closeMark(mark: JSONMark): string {
   if (mark.type === 'link') {
     const href = (mark.attrs?.href ?? '') as string
-    return `](${href})`
+    return `](${href}${mark.attrs?.download != null ? ' "instatic:download"' : ''})`
   }
   if (mark.type === 'underline') return '</u>'
   return MARK_OPEN[mark.type] ?? ''
@@ -685,13 +692,6 @@ function emptyParagraph(): JSONNode {
   return { type: 'paragraph' }
 }
 
-function mediaNode(mediaType: 'image' | 'video', src: string, alt: string): JSONNode {
-  return {
-    type: 'media',
-    attrs: { mediaType, src, alt },
-  }
-}
-
 function isInlineTokenType(type: string): boolean {
   return (
     type === 'text' ||
diff --git a/src/core/markdown/mediaImagePresentation.ts b/src/core/markdown/mediaImagePresentation.ts
new file mode 100644
index 000000000..1724af526
--- /dev/null
+++ b/src/core/markdown/mediaImagePresentation.ts
@@ -0,0 +1,88 @@
+import type { JSONNode } from './markdownDocument'
+
+export type MediaImageSize = 'original' | 'l' | 'm' | 's'
+
+export function normalizeMediaImageSize(value: unknown): MediaImageSize {
+  if (value === 'sm') return 'm'
+  return value === 'original' || value === 'm' || value === 's' ? value : 'l'
+}
+
+export function mediaImageWidth(size: MediaImageSize): string {
+  return { original: 'auto', l: '100%', m: 'min(100%, 560px)', s: 'min(100%, 320px)' }[size]
+}
+
+export interface MediaImagePresentation {
+  size: MediaImageSize
+  lightbox: boolean
+  title: string
+}
+
+
+export function mediaNode(
+  mediaType: 'image' | 'video',
+  src: string,
+  alt: string,
+  presentation: Partial<MediaImagePresentation> = {},
+): JSONNode {
+  return {
+    type: 'media',
+    attrs: {
+      mediaType,
+      src,
+      alt,
+      size: presentation.size ?? 'l',
+      lightbox: presentation.lightbox ?? false,
+      title: presentation.title ?? '',
+    },
+  }
+}
+
+/**
+ * Read the small, editor-owned metadata vocabulary from a Markdown image
+ * title. Other title text remains a normal HTML title so existing Markdown
+ * stays backwards compatible.
+ */
+export function parseMediaImageTitle(rawTitle: string | null | undefined): MediaImagePresentation {
+  const tokens = (rawTitle ?? '').trim().split(/\s+/).filter(Boolean)
+  let size: MediaImageSize = 'l'
+  let lightbox = false
+  const titleTokens: string[] = []
+
+  for (const token of tokens) {
+    const normalized = token.toLowerCase()
+    if (/^size=(original|sm|m|s)$/.test(normalized)) {
+      size = normalizeMediaImageSize(normalized.slice(5))
+    } else if (normalized === 'size=l' || normalized === 'size=large') {
+      size = 'l'
+    } else if (normalized === 'lightbox') {
+      lightbox = true
+    } else if (normalized === 'lightbox=false') {
+      lightbox = false
+    } else {
+      titleTokens.push(token)
+    }
+  }
+
+  return { size, lightbox, title: titleTokens.join(' ') }
+}
+
+export function serializeMediaImageTitle(presentation: MediaImagePresentation): string {
+  const tokens: string[] = []
+  if (presentation.size !== 'l') tokens.push(`size=${presentation.size}`)
+  if (presentation.lightbox) tokens.push('lightbox')
+  if (presentation.title) tokens.push(presentation.title)
+  return tokens.join(' ')
+}
+
+export function escapeImageTitle(value: string): string {
+  return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
+}
+
+
+export function mediaSizeAttr(node: JSONNode, key: string): MediaImageSize {
+  return normalizeMediaImageSize(node.attrs?.[key])
+}
+
+export function booleanAttr(node: JSONNode, key: string): boolean {
+  return node.attrs?.[key] === true
+}
diff --git a/src/core/markdown/renderMarkdown.ts b/src/core/markdown/renderMarkdown.ts
index 6da6b38cd..142e99a0d 100644
--- a/src/core/markdown/renderMarkdown.ts
+++ b/src/core/markdown/renderMarkdown.ts
@@ -19,6 +19,10 @@
  *   - **CMS video extension.** `@[video](url)` is recognised at the block
  *     level and emits `<video controls src="...">`. This is the same syntax
  *     the editor writes for video media nodes.
+ *   - **Image presentation metadata.** The content editor stores `SM` and
+ *     lightbox choices in the Markdown image title (`"size=sm lightbox"`).
+ *     Lightbox links open a modal via the publisher runtime and fall back
+ *     to the image URL when JavaScript is unavailable.
  *
  * Anchors are normalised to `target="_blank" rel="noopener noreferrer"`.
  *
@@ -32,7 +36,9 @@
  */
 
 import { Marked, type Tokens } from 'marked'
+import { alignedBlock } from './alignedBlock'
 import { escapeHtml, isSafeUrl } from '@core/html-sanitize'
+import { parseMediaImageTitle, mediaImageWidth } from './mediaImagePresentation'
 
 export { firstMediaPathFromMarkdown as firstImagePathFromMarkdown } from './markdownDocument'
 
@@ -40,6 +46,12 @@ const marked = new Marked({ gfm: true, breaks: false })
 
 marked.use({
   extensions: [
+    {
+      ...alignedBlock,
+      renderer(token: Tokens.Generic) {
+        return `<${token.tag} class="instatic-content-align--${token.alignment}" style="text-align:${token.alignment}">${this.parser.parseInline(token.tokens ?? [])}</${token.tag}>\n`
+      },
+    },
     {
       name: 'instaticVideo',
       level: 'block',
@@ -58,14 +70,24 @@ marked.use({
     },
   ],
   renderer: {
-    link({ href, tokens }) {
+    link({ href, tokens, title }) {
       const inner = this.parser.parseInline(tokens)
+      if (title === 'instatic:download') return `<a href="${safeMarkdownUrl(href)}" download>${inner}</a>`
       return `<a href="${safeMarkdownUrl(href)}" target="_blank" rel="noopener noreferrer">${inner}</a>`
     },
     image({ href, text, title }) {
+      const presentation = parseMediaImageTitle(title)
       const altAttr = escapeHtml(text ?? '')
-      const titleAttr = title ? ` title="${escapeHtml(title)}"` : ''
-      return `<img src="${safeMarkdownUrl(href)}" alt="${altAttr}"${titleAttr} loading="lazy">`
+      const actualTitleAttr = presentation.title
+        ? ` title="${escapeHtml(presentation.title)}"`
+        : ''
+      const safeSrc = safeMarkdownUrl(href)
+      const width = mediaImageWidth(presentation.size)
+      const image = `<img class="instatic-content-image instatic-content-image--${presentation.size}" src="${safeSrc}" alt="${altAttr}"${actualTitleAttr} loading="lazy" style="display:block;width:${width};max-width:100%;height:auto;margin-inline:auto">`
+
+      if (!presentation.lightbox || safeSrc === '#') return image
+
+      return `<a class="instatic-lightbox-trigger" href="${safeSrc}" aria-label="Open image in full size" style="display:block;width:${width};margin-inline:auto">${image}</a>`
     },
   },
 })
diff --git a/src/core/persistence/cmsData.ts b/src/core/persistence/cmsData.ts
index 2288e763a..dee7d758c 100644
--- a/src/core/persistence/cmsData.ts
+++ b/src/core/persistence/cmsData.ts
@@ -363,6 +363,7 @@ const LoopPreviewEnvelope = Type.Object(
 )
 
 interface DataLoopPreviewOptions {
+  rowIds?: readonly string[]
   orderBy?: string
   direction?: 'asc' | 'desc'
   limit?: number
@@ -388,6 +389,7 @@ export async function previewCmsDataLoopItems(
     `${basePath}/data/tables/${encodeURIComponent(tableId)}/loop-preview`,
     {
       query: {
+        rowIds: options.rowIds ? JSON.stringify(options.rowIds) : undefined,
         orderBy: options.orderBy,
         direction: options.direction,
         limit: options.limit,
diff --git a/src/core/publisher/classCss.ts b/src/core/publisher/classCss.ts
index 6c2bbaa7e..2db006284 100644
--- a/src/core/publisher/classCss.ts
+++ b/src/core/publisher/classCss.ts
@@ -7,6 +7,7 @@ import type {
 import { breakpointMediaQuery, styleRuleSelector } from '@core/page-tree'
 import { sanitiseCssValue } from './utils'
 import { responsiveBackgroundImage, type ResponsiveCssOptions } from './responsiveBackground'
+import { animationPresetCss } from '@core/animationPresets'
 
 /**
  * Convert a camelCase CSS property name to kebab-case.
@@ -470,7 +471,9 @@ export function generateClassCSS(
     blocks.push(...emitRule(styleRuleSelector(cls), cls))
   }
 
-  return blocks.join('\n\n')
+  const css = blocks.join('\n\n')
+  const presets = animationPresetCss(css)
+  return presets ? `${css}\n\n${presets}` : css
 }
 
 const RAW_KEYFRAMES_RE =
diff --git a/src/core/publisher/render.ts b/src/core/publisher/render.ts
index 2174b9432..43405cfd4 100644
--- a/src/core/publisher/render.ts
+++ b/src/core/publisher/render.ts
@@ -400,10 +400,16 @@ interface RuntimeAssetsBlock {
 function buildRuntimeAssetsBlock(
   options: PublishPageOptions,
   acc: RenderAccumulators,
+  hasScrollAnimations: boolean,
+  hasLightbox: boolean,
 ): RuntimeAssetsBlock {
   const { runtimeAssets } = options
   const headRuntimeScripts = scriptTagsForRuntimeAssets(runtimeAssets, 'head')
-  const bodyEndRuntimeScripts = scriptTagsForRuntimeAssets(runtimeAssets, 'body-end')
+  const bodyEndRuntimeScripts = [
+    scriptTagsForRuntimeAssets(runtimeAssets, 'body-end'),
+    hasScrollAnimations ? '  <script type="module" src="/_instatic/scroll-animation-runtime.js"></script>' : '',
+    hasLightbox ? '  <script type="module" src="/_instatic/image-lightbox-runtime.js"></script>' : '',
+  ].filter(Boolean).join('\n')
   const hasRuntimeScripts = hasPublishedRuntimeScripts(runtimeAssets)
 
   // Loop runtime is a self-hosted script bundle served at a known fixed
@@ -443,7 +449,7 @@ function buildRuntimeAssetsBlock(
     holeRuntimeScript,
     importmapTag,
     importmap,
-    anyScriptTag: hasRuntimeScripts || hasInfiniteLoops || hasHoles || Boolean(importmap),
+    anyScriptTag: hasRuntimeScripts || hasInfiniteLoops || hasHoles || hasScrollAnimations || hasLightbox || Boolean(importmap),
   }
 }
 
@@ -613,7 +619,15 @@ export function publishPage(
   )
 
   const meta = buildDocumentMetaTags(site, page, templateContext, options.documentMeta)
-  const runtime = buildRuntimeAssetsBlock(options, acc)
+  // Class CSS is site-wide, including ambient selectors and component rules.
+  // Include the observer when any of those rules can enable a scroll preset.
+  const hasScrollAnimations = Object.values(site.styleRules ?? {}).some(rule =>
+    [rule.styles, ...Object.values(rule.contextStyles ?? {})].some(styles =>
+      Object.values(styles ?? {}).some(value => typeof value === 'string' && /\binstatic-[\w-]+-scroll\b/.test(value)),
+    ),
+  )
+  const runtime = buildRuntimeAssetsBlock(options, acc, hasScrollAnimations,
+    bodyHtml.includes('instatic-lightbox-trigger') || acc.holeNodeIds.size > 0 || acc.infiniteLoopIds.size > 0)
   const csp = buildContentSecurityPolicy(runtime.anyScriptTag, runtime.importmap, acc.cspSources)
 
   const html = assembleHtmlDocument({
diff --git a/src/core/publisher/renderConfig.ts b/src/core/publisher/renderConfig.ts
index 769c6cac1..c3a61b24b 100644
--- a/src/core/publisher/renderConfig.ts
+++ b/src/core/publisher/renderConfig.ts
@@ -30,7 +30,7 @@
 import type { Page, SiteDocument } from '@core/page-tree'
 import type { IModuleRegistry } from '@core/module-engine'
 import type { TemplateRenderDataContext } from '@core/templates/dynamicBindings'
-import type { LoopFetchResult } from '@core/loops/types'
+import type { LoopFetchResult, LoopItem } from '@core/loops/types'
 
 /**
  * Resolved loop data for one `base.loop` node, produced by the server's
@@ -41,6 +41,8 @@ export interface ResolvedLoopRenderData extends LoopFetchResult {
   pageNumber: number
   /** Whether more rows remain past the current page. */
   hasMore: boolean
+  /** Contextual relation items, already sliced for each enclosing entry. */
+  entryItems?: ReadonlyMap<string, LoopItem[]>
 }
 
 /**
diff --git a/src/core/publisher/renderLoop.ts b/src/core/publisher/renderLoop.ts
index 3ee0cb36b..ad419c932 100644
--- a/src/core/publisher/renderLoop.ts
+++ b/src/core/publisher/renderLoop.ts
@@ -16,6 +16,7 @@ import {
   ENTRY_FIELD_FILTER_KEY,
   ENTRY_FIELD_SOURCE_ID,
   resolveEntryFieldItems,
+  entryFieldContextKey,
   type EntryFieldMedia,
   type LoopItem,
 } from '@core/loops'
@@ -151,6 +152,10 @@ function resolveLoopData(node: PageNode, config: RenderConfig) {
 
   const stack = config.templateContext?.entryStack ?? []
   const entry = stack[stack.length - 1]
+  const related = entry && config.loopData?.get(node.id)?.entryItems?.get(entryFieldContextKey(entry))
+  if (related) {
+    return { items: related, totalItems: related.length, pageNumber: 1, hasMore: false }
+  }
   const value = entry?.fields[fieldId]
   const resolved = resolveEntryFieldItems(value, {
     offset: typeof node.props.offset === 'number' ? node.props.offset : 0,
diff --git a/src/core/publisher/reset.ts b/src/core/publisher/reset.ts
index 1b5246172..b41925e60 100644
--- a/src/core/publisher/reset.ts
+++ b/src/core/publisher/reset.ts
@@ -81,6 +81,18 @@ export const PUBLISHER_RESET_CSS = [
   ':where(input, button, textarea, select) { font: inherit; color: inherit; }',
   ':where(button) { background: none; border: 0; cursor: pointer; }',
 
+  '.instatic-lightbox-trigger { cursor: zoom-in; }',
+  ':root .instatic-content-align--left { text-align: left; }',
+  ':root .instatic-content-align--center { text-align: center; }',
+  ':root .instatic-content-align--right { text-align: right; }',
+  ':root .instatic-content-align--justify { text-align: justify; }',
+  'a.instatic-lightbox-trigger { display: block; }',
+  'img.instatic-content-image.instatic-content-image { display: block; max-width: 100%; height: auto; margin-inline: auto; }',
+  ':root img.instatic-content-image.instatic-content-image--original { width: auto; }',
+  ':root img.instatic-content-image.instatic-content-image--l { width: 100%; }',
+  ':root img.instatic-content-image.instatic-content-image--m { width: min(100%, 560px); }',
+  ':root img.instatic-content-image.instatic-content-image--s { width: min(100%, 320px); }',
+
   // Long-word safety on text-bearing elements.
   ':where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }',
 
diff --git a/src/core/sanitize.ts b/src/core/sanitize.ts
index a7d0d4f1e..abd3734cb 100644
--- a/src/core/sanitize.ts
+++ b/src/core/sanitize.ts
@@ -28,6 +28,7 @@
  */
 
 import DOMPurify, { type Config } from 'dompurify'
+import { isSafeUrl } from '@core/html-sanitize'
 
 type DOMPurifyHookNode = {
   tagName?: string
@@ -47,6 +48,8 @@ export type SanitizerConfig = Config & {
   _plainText?: true
   /** Drop `<img src>` that is not absolute http(s) and stamp the rest no-referrer + lazy. */
   _externalImagesOnly?: true
+  /** Keep safe relative/http(s) rich-text images while rejecting executable URL schemes. */
+  _safeImages?: true
 }
 
 export type DOMPurifyRuntime = {
@@ -64,19 +67,28 @@ let activeDOMPurify: DOMPurifyRuntime | null = null
 const hookedPurifiers = new WeakSet<object>()
 
 /**
- * Attribute post-pass, installed once per purifier: every link opens in a new
- * tab with `noopener`, and profiles that opt in (`_externalImagesOnly`) keep
- * only absolute http(s) images, stamped no-referrer + lazy. DOMPurify admits
- * `data:` on <img> regardless of `ALLOWED_URI_REGEXP`, so the image rule
- * cannot be expressed in the config alone.
+ * Attribute post-pass, installed once per purifier: navigation links open in a new
+ * tab with `noopener`; download links keep their download action. Rich-text profiles that opt in (`_safeImages`) keep
+ * relative and http(s) images while rejecting executable/document schemes;
+ * README profiles (`_externalImagesOnly`) narrow that to absolute http(s)
+ * images and add a no-referrer policy. DOMPurify admits `data:` on <img>
+ * regardless of `ALLOWED_URI_REGEXP`, so these image rules cannot be
+ * expressed in the config alone.
  */
 function installAttributeHook(purifier: DOMPurifyRuntime): DOMPurifyRuntime {
   if (!hookedPurifiers.has(purifier) && typeof purifier.addHook === 'function') {
     purifier.addHook('afterSanitizeAttributes', (node, _hookEvent, config) => {
       if (node.tagName === 'A') {
-        node.setAttribute?.('target', '_blank')
+        if (node.getAttribute?.('download') != null) node.removeAttribute?.('target')
+        else node.setAttribute?.('target', '_blank')
         node.setAttribute?.('rel', 'noopener noreferrer')
       }
+      if (node.tagName === 'IMG' && config._safeImages) {
+        const src = node.getAttribute?.('src') ?? ''
+        if (!src || !isSafeUrl(src)) node.removeAttribute?.('src')
+        node.setAttribute?.('loading', 'lazy')
+        node.setAttribute?.('decoding', 'async')
+      }
       if (node.tagName === 'IMG' && config._externalImagesOnly) {
         const src = node.getAttribute?.('src') ?? ''
         if (!/^https?:\/\//i.test(src.replace(/\s+/g, ''))) node.removeAttribute?.('src')
@@ -151,7 +163,7 @@ function stripHtmlFallback(value: string): string {
  * Default richtext config — allows safe HTML formatting, blocks all scripts.
  * Suitable for user-authored HTML content (headings, paragraphs, lists, links).
  */
-const RICHTEXT_CONFIG: Config = {
+const RICHTEXT_CONFIG: SanitizerConfig = {
   // Allow safe semantic/formatting tags
   ALLOWED_TAGS: [
     'p', 'br',
@@ -159,11 +171,14 @@ const RICHTEXT_CONFIG: Config = {
     'strong', 'b', 'em', 'i', 'u', 's', 'del', 'ins',
     'a', 'ul', 'ol', 'li',
     'blockquote', 'code', 'pre',
-    'span', 'div',
+    'span', 'div', 'img',
   ],
   // Restrict attributes to safe subset; data-* is blocked by default
-  ALLOWED_ATTR: ['href', 'target', 'rel', 'class', 'id'],
-  // Force all links to open in a new tab with noopener
+  ALLOWED_ATTR: [
+    'href', 'target', 'rel', 'class', 'id', 'download',
+    'src', 'alt', 'title', 'width', 'height', 'loading', 'decoding',
+  ],
+  // Navigation links open in a new tab with noopener; downloads omit target.
   ADD_ATTR: ['target'],
   // Never allow data: / javascript: in href
   ALLOW_DATA_ATTR: false,
@@ -172,6 +187,7 @@ const RICHTEXT_CONFIG: Config = {
   // Return a string, not a DOM node
   RETURN_DOM: false,
   RETURN_DOM_FRAGMENT: false,
+  _safeImages: true,
 }
 
 /**
diff --git a/src/core/scrollAnimationRuntime.ts b/src/core/scrollAnimationRuntime.ts
new file mode 100644
index 000000000..9b2b1f97c
--- /dev/null
+++ b/src/core/scrollAnimationRuntime.ts
@@ -0,0 +1,91 @@
+import { ANIMATION_PRESETS } from './animationPresets'
+
+export const SCROLL_ANIMATION_FRAMES = ANIMATION_PRESETS.map(preset => ({
+  name: `${preset.value}-scroll`,
+  frames: [preset.from, preset.to].map(frame => Object.fromEntries(
+    frame.split(';').filter(part => part.trim()).map(part => part.split(':').map(value => value.trim())),
+  )),
+}))
+
+/** Self-contained: also serialized as a browser asset by the server. */
+export function installScrollAnimations(doc: Document, presets: typeof SCROLL_ANIMATION_FRAMES): () => void {
+  const win = doc.defaultView
+  if (!win || !win.IntersectionObserver || !win.MutationObserver || !win.Element.prototype.animate) return () => {}
+  const reduced = win.matchMedia('(prefers-reduced-motion: reduce)')
+  const states = new Map<Element, { signature: string; animation: Animation; played: boolean }>()
+  let scheduled = 0
+  let disposed = false
+  const observer = new win.IntersectionObserver(entries => {
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue
+      const state = states.get(entry.target)
+      if (!state || state.played) continue
+      state.played = true
+      state.animation.play()
+      observer.unobserve(entry.target)
+    }
+  }, { threshold: 0 })
+
+  const clear = (element: Element) => {
+    const state = states.get(element)
+    state?.animation.cancel()
+    observer.unobserve(element)
+    states.delete(element)
+  }
+  const scan = () => {
+    scheduled = 0
+    if (disposed) return
+    for (const element of states.keys()) if (!element.isConnected) clear(element)
+    for (const element of doc.querySelectorAll('*')) {
+      const style = win.getComputedStyle(element)
+      const preset = presets.find(item => item.name === style.animationName)
+      // No keyframes are defined for the -scroll names in CSS. Without JS,
+      // reduced motion, or animation support, authored content stays visible.
+      if (!preset || style.display === 'none') { if (states.has(element)) clear(element); continue }
+      if (reduced.matches) continue
+      const signature = [style.animationName, style.animationDuration, style.animationDelay, style.animationTimingFunction].join('|')
+      if (states.get(element)?.signature === signature) continue
+      clear(element)
+      const animation = element.animate(preset.frames, {
+        duration: parseFloat(style.animationDuration) * 1000,
+        delay: parseFloat(style.animationDelay) * 1000,
+        easing: style.animationTimingFunction,
+        fill: 'both',
+        iterations: 1,
+      })
+      animation.pause()
+      animation.currentTime = 0
+      states.set(element, { signature, animation, played: false })
+      observer.observe(element)
+    }
+  }
+  const schedule = () => {
+    if (!scheduled && !disposed) scheduled = win.requestAnimationFrame(scan)
+  }
+  const onReducedMotion = () => {
+    if (reduced.matches) {
+      for (const [element, state] of states) {
+        state.animation.cancel()
+        state.played = true
+        observer.unobserve(element)
+      }
+    } else schedule()
+  }
+  const mutations = new win.MutationObserver(schedule)
+  mutations.observe(doc.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ['class', 'style'] })
+  reduced.addEventListener('change', onReducedMotion)
+  win.addEventListener('resize', schedule)
+  doc.addEventListener('load', schedule, true)
+  scan()
+  return () => {
+    disposed = true
+    win.cancelAnimationFrame(scheduled)
+    mutations.disconnect()
+    observer.disconnect()
+    reduced.removeEventListener('change', onReducedMotion)
+    win.removeEventListener('resize', schedule)
+    doc.removeEventListener('load', schedule, true)
+    for (const state of states.values()) state.animation.cancel()
+    states.clear()
+  }
+}
diff --git a/src/core/templates/dateToken.ts b/src/core/templates/dateToken.ts
new file mode 100644
index 000000000..8d501e3b3
--- /dev/null
+++ b/src/core/templates/dateToken.ts
@@ -0,0 +1,21 @@
+/** Explicit date formatting keeps stored ISO dates sortable and display text localised. */
+export function resolveDateToken(frame: Record<string, unknown>, field: string): string | undefined {
+  const match = /^([\w.]+):date\(([A-Za-z]{2,3}(?:-[A-Za-z0-9]{2,8})*),(full|long|medium|short)\)$/.exec(field)
+  if (!match) return undefined
+  let value: unknown = frame
+  for (const part of match[1]!.split('.')) {
+    if (!value || typeof value !== 'object' || !Object.hasOwn(value, part)) return ''
+    value = (value as Record<string, unknown>)[part]
+  }
+  if (typeof value !== 'string' || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return ''
+  const date = new Date(`${value}T00:00:00Z`)
+  if (!Number.isFinite(date.getTime()) || date.toISOString().slice(0, 10) !== value) return ''
+  try {
+    return new Intl.DateTimeFormat(match[2], {
+      dateStyle: match[3] as 'full' | 'long' | 'medium' | 'short',
+      timeZone: 'UTC',
+    }).format(date)
+  } catch {
+    return ''
+  }
+}
diff --git a/src/core/templates/tokenInterpolation.ts b/src/core/templates/tokenInterpolation.ts
index 4097f2517..3f3cea3df 100644
--- a/src/core/templates/tokenInterpolation.ts
+++ b/src/core/templates/tokenInterpolation.ts
@@ -29,6 +29,7 @@
 
 import type { DynamicPropBinding } from '@core/page-tree'
 import type { TemplateRenderDataContext } from './renderDataContext'
+import { resolveDateToken } from './dateToken'
 
 // ---------------------------------------------------------------------------
 // Source identifiers — must match DynamicBindingSourceSchema
@@ -253,7 +254,9 @@ export function interpolateTokens(input: string, context: TemplateRenderDataCont
       continue
     }
     const frame = readFrame(seg.source, context)
-    const rawValue = frame ? walkFieldPath(frame, seg.field) : undefined
+    const rawValue = frame
+      ? resolveDateToken(frame, seg.field) ?? walkFieldPath(frame, seg.field)
+      : undefined
     // A token resolves to its fallback (if any) when:
     //   - the frame is absent
     //   - the field path is undefined / null
diff --git a/src/core/utils/urlValidation.ts b/src/core/utils/urlValidation.ts
index 117616d27..ac41fb58e 100644
--- a/src/core/utils/urlValidation.ts
+++ b/src/core/utils/urlValidation.ts
@@ -12,7 +12,7 @@
  * scheme is — they differ only in which schemes they accept.
  *
  * Allowlists:
- *   isValidUrl()       — https, http, mailto
+ *   isValidUrl()       — https, http, mailto, tel, local paths and fragments
  *   isValidImageUrl()  — https, http, data:image/* (inline base64 images)
  */
 
@@ -44,14 +44,19 @@ function parses(v: string): boolean {
  * Returns true if `v` is a safe general-purpose URL for storing in site
  * props (e.g. a link href, a button href).
  *
- * Allows:  https:, http:, mailto:
- * Rejects: javascript:, data:, ftp:, blob:, custom schemes, schemeless values,
+ * Allows: https:, http:, mailto:, tel:, root/dot-relative paths and fragments.
+ * Rejects: javascript:, data:, ftp:, blob:, custom schemes, ambiguous plain text,
  *          and malformed absolute URLs (`http://`, `https://exa mple.com`)
  */
 export function isValidUrl(v: string): boolean {
   if (!v) return true
+  // Explicit local references must not become protocol-relative URLs after
+  // browser whitespace/backslash normalization.
+  if (/\s|\\/.test(v)) return false
+  if ((v.startsWith('/') && !v.startsWith('//')) || v.startsWith('#') ||
+      v.startsWith('./') || v.startsWith('../') || v.startsWith('?')) return true
   const scheme = urlScheme(v)
-  if (scheme !== 'https:' && scheme !== 'http:' && scheme !== 'mailto:') return false
+  if (scheme !== 'https:' && scheme !== 'http:' && scheme !== 'mailto:' && scheme !== 'tel:') return false
   return parses(v)
 }
 
diff --git a/src/modules/base/outlet/OutletEditor.tsx b/src/modules/base/outlet/OutletEditor.tsx
index 862705a82..e5fb83f43 100644
--- a/src/modules/base/outlet/OutletEditor.tsx
+++ b/src/modules/base/outlet/OutletEditor.tsx
@@ -27,6 +27,7 @@ import { resolveHtmlTag } from '@core/htmlAttributes'
 import { ReadOnlyNodeTree } from '@modules/base/utils/ReadOnlyNodeTree'
 import { CanvasModulePlaceholder } from '@ui/components/CanvasModulePlaceholder'
 import { TextPlusIcon } from 'pixel-art-icons/icons/text-plus'
+import { CanvasTemplateContext } from '@site/canvas/CanvasContexts'
 import type { OutletStoredProps } from './props'
 
 export const OutletEditor: React.FC<ModuleComponentProps<OutletStoredProps>> = ({
@@ -34,6 +35,7 @@ export const OutletEditor: React.FC<ModuleComponentProps<OutletStoredProps>> = (
   mcClassName,
   nodeWrapperProps,
 }) => {
+  const templateContext = React.use(CanvasTemplateContext)
   const tag = resolveHtmlTag(props.tag, props.customTag)
 
   const styleRules = useEditorStore((s) => s.site?.styleRules ?? null)
@@ -55,7 +57,7 @@ export const OutletEditor: React.FC<ModuleComponentProps<OutletStoredProps>> = (
   const html = typeof props.html === 'string' ? props.html : ''
 
   // (1) postTypes entry body, resolved into props.html via the binding.
-  if (html) {
+  if (html || templateContext?.entryStack.length) {
     return React.createElement(tag, {
       ...nodeWrapperProps,
       className: mcClassName || undefined,
diff --git a/src/modules/base/utils/ReadOnlyNodeTree.tsx b/src/modules/base/utils/ReadOnlyNodeTree.tsx
index 1439c26ad..870399179 100644
--- a/src/modules/base/utils/ReadOnlyNodeTree.tsx
+++ b/src/modules/base/utils/ReadOnlyNodeTree.tsx
@@ -28,7 +28,7 @@
  * `style="…"` the published page does.
  */
 
-import type { ReactNode } from 'react'
+import { use, type ReactNode } from 'react'
 import { registry } from '@core/module-engine'
 import type { NodeWrapperProps as NodeWrapperPropsType } from '@core/module-engine'
 import type { BaseNode, PageNode } from '@core/page-tree'
@@ -40,6 +40,7 @@ import {
   type TemplateRenderDataContext,
 } from '@core/templates/dynamicBindings'
 import { useLoopPreviewItems } from '@site/canvas/useLoopPreviewItems'
+import { CanvasTemplateContext } from '@site/canvas/CanvasContexts'
 
 /**
  * Identifies the editable source a read-only region was composed from, so the
@@ -86,7 +87,7 @@ interface ReadOnlyNodeTreeProps {
   readonly?: ReadOnlyRegion
   /**
    * Render data used to resolve template bindings and `{source.field}` tokens
-   * in read-only canvas content. When omitted, unresolved tokens stay visible.
+   * in read-only canvas content. Defaults to the enclosing canvas/loop context.
    */
   templateContext?: TemplateRenderDataContext
 }
@@ -119,6 +120,7 @@ export function ReadOnlyNodeTree({
   readonly,
   templateContext,
 }: ReadOnlyNodeTreeProps) {
+  const inheritedContext = use(CanvasTemplateContext)
   // Resolve the single outlet that hosts `outletSlot` up front so only the
   // first outlet is filled (matching the composer's "first outlet wins").
   const outletNodeId = outletSlot !== undefined ? firstOutletId(nodes) : undefined
@@ -132,7 +134,7 @@ export function ReadOnlyNodeTree({
       outletNodeId={outletNodeId}
       outletSlot={outletSlot}
       readonlyMarkers={readonlyMarkers(readonly)}
-      templateContext={templateContext}
+      templateContext={templateContext ?? inheritedContext}
     />
   )
 }
@@ -260,15 +262,17 @@ function ReadOnlyNodeRenderer({
   const nodeWrapperProps = style ? { ...baseWrapperProps, style } : baseWrapperProps
 
   return (
-    <ComponentType
-      props={effectiveProps as never}
-      nodeId={node.id}
-      isSelected={false}
-      mcClassName={mcClassName}
-      nodeWrapperProps={nodeWrapperProps}
-    >
-      {children}
-    </ComponentType>
+    <CanvasTemplateContext.Provider value={templateContext}>
+      <ComponentType
+        props={effectiveProps as never}
+        nodeId={node.id}
+        isSelected={false}
+        mcClassName={mcClassName}
+        nodeWrapperProps={nodeWrapperProps}
+      >
+        {children}
+      </ComponentType>
+    </CanvasTemplateContext.Provider>
   )
 }