diff --git a/.github/workflows/check-docs.yml b/.github/workflows/check-docs.yml
index 24e1f841..70c0eaf3 100644
--- a/.github/workflows/check-docs.yml
+++ b/.github/workflows/check-docs.yml
@@ -14,8 +14,25 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      # Jena 6 requires Java 21; the runner defaults to 17
+      - name: Set up Java 21
+        uses: actions/setup-java@v4
+        with:
+          distribution: temurin
+          java-version: '21'
+
       - name: RDF syntax check
         uses: AtomGraph/RDF-syntax-check@v1.0.5
+        with:
+          jena-version: 6.1.0
+
+      - name: Install Linux packages
+        run: sudo apt-get update && sudo apt-get install -y libxml2-utils
+
+      # riot checks rdf:XMLLiteral well-formedness; canonical form is only
+      # enforced up to Jena 4.7.0, so it is checked separately
+      - name: XMLLiteral canonical form check
+        run: ./check-xmlliterals.sh
 
       - name: Check links
         run: ./check-links.sh
diff --git a/.gitignore b/.gitignore
index f998a83d..51328d6c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ linkeddatahub/.DS_Store
 docs/docs.trix
 docs/files.xml
 docs/html
+docs/timestamps.xml
diff --git a/CLAUDE.md b/CLAUDE.md
index f9793eff..ec801e65 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -2,80 +2,111 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-## Repository Overview
+## Repository overview
 
-LinkedDataHub-Apps is a collection of data-driven applications built on LinkedDataHub. The repository contains system, demo, and user-submitted applications that are completely data-driven with no imperative code - only shell scripts for installation and SPARQL queries for data processing.
+LinkedDataHub-Apps holds dataspaces built on LinkedDataHub. Every dataspace is a tree of RDF documents plus the files they carry, installed with the `ldh` CLI. There is no imperative code: behaviour lives in RDF (Turtle), SPARQL and XSLT, and shell only orchestrates CLI calls.
 
-## Repository Structure
+- `docs/` — the LinkedDataHub documentation, itself a LinkedDataHub app, published live at https://docs.linkeddatahub.com/ and as a static site under https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/
+- `demo/northwind-traders/` — Northwind Traders as a knowledge graph: faceted search, parallax navigation, CSV import, a 969-line namespace ontology with constructors, constraints and views
+- `demo/copenhagen/` — Copenhagen open data on a map, imported from CSV
+- `demo/unesco-thesaurus/` — the UNESCO Thesaurus as a SKOS editor; its model and stylesheet come from the taxonomy editor package
+- `packages/` — the package registry published at https://packages.linkeddatahub.com/; one package so far, `editor/taxonomy`
+- `lib/` — the shared installer: `install.mk` (the interactive `make install`) and `ldh-app.sh` (functions every `install.sh` sources)
+- `screencast/` — the Playwright rig that produces the docs' screenshots and clips, and the Northwind screencast tracks
+- `check-links.sh`, `check-xmlliterals.sh` — repository-wide validators, run by CI
 
-- `/linkeddatahub/docs/` - Documentation for LinkedDataHub open-source and Cloud versions
-- `/demo/northwind-traders/` - Knowledge Graph representation of Northwind Traders sample database with faceted search
-- `/demo/city-graph/` - Geospatial browser for Copenhagen open data with type-colored geospatial overview
-- `/demo/skos/` - Basic SKOS editor with custom UI theme for concept and schema management
+## Prerequisites
 
-Each demo application includes:
-- Installation shell scripts
-- SPARQL queries for data import and processing
-- CSV data files (for data import)
-- Custom ontologies and constraints (stored as .ttl files)
-- Optional custom XSLT stylesheets and CSS
+The `ldh` CLI, built from a LinkedDataHub checkout and put on `PATH`:
 
-## Common Commands
+```bash
+cd ../LinkedDataHub/cli && mvn package && export PATH="$PWD/bin:$PATH"
+```
+
+The docs build additionally needs `riot` (Apache Jena), Docker (for `atomgraph/saxon`), `xmlstarlet`, `xmllint` and `python3`. The screencast rig needs Node, `ffmpeg`, `cwebp`, `vhs` and GNU `sha1sum`.
+
+## Installing an app
 
-### Installation
-Applications use interactive Makefiles for installation:
 ```bash
-make install    # Interactive installation with prompts for BASE_URL, CERT_PATH, PASSWORD, PROXY_URL
+make install    # prompts for base URL, keystore path, keystore password and optional proxy URL
 ```
 
-### Documentation (linkeddatahub/docs/)
+`make install` is `lib/install.mk`, included by every app Makefile. It exports the answers as `LDH_BASE`, `LDH_CERT_FILE`, `LDH_CERT_PASSWORD` and `LDH_PROXY` — the variables the CLI reads — and runs the app's `install.sh` in that environment. No credential is put on a command line, so the password needs no escaping. To install unattended, export the four variables and run `./install.sh`.
+
+Each `install.sh` sources `lib/ldh-app.sh` and is the app's own sequence of steps:
+
+- `ldh admin make-public` — an authorization that makes the app readable by anyone
+- `ldh_app_import_ns admin/model` — resets the namespace ontology document with `patch-ontology.ru`, appends `ns.ttl` under `@base <{base}ns>`, clears the ontology cache
+- `ldh push --dir . "$LDH_BASE"` — PUTs every RDF file to the document its path spells and uploads every other file into its folder's document
+- `ldh_app_import_csv . imports.csv` — one `ldh import csv` per manifest row (`query_filename,csv_filename,target,title`)
+- app-specific steps: `ldh admin create authorization`, `ldh packages add`, `ldh import rdf`
+
+**Re-runs converge but are not clean.** `ldh push` PUTs and the ontology is reset before re-import, so documents and the model end up the same. `make-public`, `create authorization` and every import are POSTs, so each run adds another authorization and another import record. Nothing probes for an earlier install.
+
+### App layout
+
+The file tree is the URL tree. `categories.ttl` installs to `{base}categories/`, the sibling folder `categories/` holds that document's uploads (and, by convention, its `.csv` and mapping `.rq`), and `root.ttl` is the base document itself. `.ldhignore` lists what is neither a document nor an upload — `admin/`, `Makefile`, `*.sh`, `*.csv`, repository screenshots — because the CLI skips nothing but hidden entries.
+
+Mapping queries are `CONSTRUCT { GRAPH ?g { … } }` over CSV rows addressed as `<#column>`, and build every URI from the `$base` constant the platform binds. **Do not pin a hostname in a query or document**: a class is `BIND(uri(concat(str($base), "ns#School")) AS ?type)`, a query on the `<ns>` endpoint may use relative IRIs (`<ns#>`, `<sparql>`), and a query on the data endpoint cannot, since that endpoint parses with no base.
+
+Media is content-addressed. `ldh push` uploads a file to `{base}uploads/{sha1}`, and a CSV column or a document references it by that hash, so the bytes must be final before anything references them.
+
+## Documentation (`docs/`)
+
 ```bash
-make validate          # Validate documents
-make ttl-to-html      # Convert Turtle files to HTML
+make install       # push the docs to a LinkedDataHub instance
+make validate      # Turtle syntax and canonical XMLLiteral check
+make check-links   # resolve every relative link in the whole repository
+make ttl-to-html   # static site into docs/html/ (gitignored)
 ```
 
-### Prerequisites
-All installation scripts require LinkedDataHub CLI scripts in PATH:
+Each `.ttl` is one page: a `dh:Container` or `dh:Item` with `rdf:_N`-ordered blocks, whose content is an XHTML `rdf:XMLLiteral`. The static build (`ttl-to-html.sh` + `ttl-to-html.xsl`) is a second renderer of the same sources and rewrites `uploads/{sha1}` to `files/{name}`, terminating on a hash it cannot find — a clean `make ttl-to-html` proves every baked hash resolves.
+
+CI (`.github/workflows/check-docs.yml`) runs RDF syntax, canonical-XML and link checks on every push. The static build and the GitHub Pages deploy (`publish-docs.yml`) run only on pushes to `master` that touch `docs/`.
+
+XHTML inside `rdf:XMLLiteral` must be exclusive canonical XML: attributes alphabetical, explicit end tags (`<br></br>`, `<img …></img>`), each start tag on one line. `check-xmlliterals.sh` diffs each literal against `xmllint --exc-c14n`.
+
+### Documentation media (`screencast/`)
+
+Screenshots and clips are produced by a scripted Playwright rig, never taken by hand.
+
 ```bash
-export PATH="$(find bin -type d -exec realpath {} \; | tr '\n' ':')$PATH"
+cd screencast
+node docs/shoot.mjs --base … --cert-file … --cert-password-file … [--only reference]
+make docs-publish   # optimise docs/out/ into ../docs/, printing sha1 per published file
+make docs-fill      # point the .ttl sources at the published files (idempotent)
+```
+
+- `docs/manifest.mjs` is the shot list — one entry per `div.screenshot-placeholder` in the `.ttl` sources, keyed by its caption. New slots go there, not in the runner.
+- Each entry's `want` is asserted after `act` and before the capture, so a shot that never reached its state is reported missed rather than written.
+- `blocked` slots stay as placeholders with their reason recorded. Do not fill one by hand.
+- The shoot writes **masters** — 2880px lossless PNG, a `.webm` and an `.mp4` per clip — into `docs/out/`, plus an `index.json`. It never edits a `.ttl`; `docs/fill.mjs` does.
+- `make docs-publish` derives the web assets into `docs/`: stills to WebP at 2240px, `.mp4`s copied (already CRF 20 / `yuv420p` / faststart), `.webm`s dropped.
+
+**Optimise before hashing.** Uploads are content-addressed at `{base}uploads/{sha1}`, so a reference is only valid for the bytes that ship — never hash a master.
+
+References are absolute, `/uploads/{sha1}`: the `uploads/` namespace hangs off the base URI, outside the document hierarchy, so a relative path would encode the referring document's depth and break when it moves. They live inside canonical `rdf:XMLLiteral` bodies:
+
+```xml
+<img alt="The document tree with a container expanded" src="/uploads/{sha1}"></img>
+<video aria-label="Browsing and navigating data" controls="controls" preload="metadata" src="/uploads/{sha1}"></video>
 ```
 
-## Application Architecture
-
-### Data-Driven Approach
-- **Zero imperative code** - applications are entirely configuration-driven
-- **SPARQL-based processing** - all data transformations use SPARQL queries
-- **RDF/Turtle ontologies** - define application structure and constraints
-- **Shell script orchestration** - only for installation and deployment tasks
-
-### Key Components per Application
-1. **Installation scripts** (`install.sh`) - Deploy application to LinkedDataHub instance
-2. **Data import scripts** (`import-csv.sh`, `import-rdf.sh`) - Load data from CSV/RDF sources
-3. **SPARQL queries** (`queries/` directory) - Define data processing and views
-4. **Ontology files** (`admin/model/*.ttl`) - Define classes, properties, and constraints
-5. **Configuration scripts** - Create containers, charts, and authorizations
-
-### Application Flow
-1. Install ontologies and model definitions
-2. Create containers and authorization structures
-3. Import data from CSV/RDF sources using SPARQL transformation queries
-4. Create charts and views for data visualization
-5. Configure access control and permissions
-
-### Custom Styling (SKOS demo)
-Some applications like SKOS use custom XSLT stylesheets and CSS that need to be mounted in LinkedDataHub configuration and require increased payload size limits.
-
-## Important Notes
-
-- **Installation scripts are NOT idempotent** - subsequent runs may add data but aren't guaranteed to succeed
-- **Special characters in passwords** need to be escaped in shell scripts
-- **Custom stylesheets** require LinkedDataHub configuration changes and Docker volume mounts
-- **Access control** - some applications require requesting append/write access to create/edit data
-
-## File Types and Conventions
-
-- `.ttl` - Turtle RDF files for ontologies and data
-- `.rq` - SPARQL query files
-- `.csv` - Data import files
-- `.sh` - Shell scripts for installation and deployment
-- `Makefile` - Interactive installation and build targets
\ No newline at end of file
+A clip is a `<video>`, never an `<object>`. Uploads are served with `Content-Security-Policy: default-src 'none'; sandbox` (the LNK-011 stored-XSS fix). An `<object>` loads the file as a nested *document*, so that CSP governs the document's own media load and Chrome blocks it. A `<video>` is a subresource of the page and loads normally. Images are unaffected for the same reason.
+
+`docs/install.sh` ships them: `ldh push` uploads every non-ignored, non-RDF file to its folder's document at the content-addressed URI the sources already name.
+
+## Packages (`packages/`)
+
+A package is a `dh:Container` document whose `foaf:primaryTopic` is an `lds:Package` naming an `lds:ontology` and an `ac:stylesheet`. The directory path is the package URI: `packages/editor/taxonomy/` is `https://packages.linkeddatahub.com/editor/taxonomy/#this`. A dataspace imports it with one `ldh:import` triple (`ldh packages add`); the platform then materialises the ontology as an editable document under the admin `ontologies/` container and copies the stylesheet under `/static/com/linkeddatahub/packages/`, both once at import. See `packages/README.md` and `docs/reference/administration/packages.ttl`.
+
+## File types
+
+- `.ttl` — Turtle: documents, ontologies, data
+- `.rq` — SPARQL mapping queries for imports
+- `.ru` — SPARQL updates (the ontology reset)
+- `.csv` — import data; `imports.csv` is the import manifest
+- `.xsl` — package stylesheets and the docs' static renderer
+- `.sh` — installers and validators
+- `.webp` / `.mp4` — documentation media, published by `make docs-publish`
+- `.ldhignore` — what `ldh push` must skip, gitignore-style, per subtree
diff --git a/README.md b/README.md
index 5b455353..c3f8d992 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,18 @@
-# LinkedDataHub applications
+# LinkedDataHub dataspaces
 
-System, demo, and user-submitted applications built on LinkedDataHub. Completely data-driven, no code involved (besides the shell scripts).
+System, demo, and user-submitted dataspaces built on LinkedDataHub. Completely data-driven, no code involved (besides the shell scripts).
 
 ## Prerequisites
 
-The installation scripts in this repository use [LinkedDataHub's CLI scripts](https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/command-line-interface/). You need to add the `bin` (and its subfolders) of your LinkedDataHub fork or clone to `$PATH`, for example:
+The installation scripts in this repository use [LinkedDataHub's `ldh` CLI](https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/command-line-interface/). Build it from your LinkedDataHub fork or clone and put it on `$PATH`:
 
 ```shell
-export PATH="$(find bin -type d -exec realpath {} \; | tr '\n' ':')$PATH"
+cd ../LinkedDataHub/cli && mvn package && export PATH="$PWD/bin:$PATH"
 ```
 
-__Note that app installation scripts are not idempotent. Subsequent runs might continue adding data but are not guaranteed to succeed.__
+`make install` prompts for the base URL, the owner's keystore, its password and an optional proxy URL, exports them as the `LDH_*` variables the CLI reads, and runs the app's `install.sh` — every installer sources the shared [`lib/ldh-app.sh`](lib/ldh-app.sh). To install unattended, export the variables and run `./install.sh`.
+
+__Re-running an install converges but is not clean: `ldh push` replaces each document and the namespace ontology is reset before re-import, but `make-public`, `create authorization` and every import are POSTs, so each run adds another authorization and another import record.__
 
 ## Apps
 
@@ -27,9 +29,41 @@ __Note that app installation scripts are not idempotent. Subsequent runs might c
     <dd>XHTML document content is rendered from RDF literals</dd>
     <dt>Lines of code</dt>
     <dd>0 lines of imperative code</dd>
-    <dd>164 lines of installation shell scripts</dd>
+    <dd>19 lines of installation shell script</dd>
 </dl>
 
+#### Screenshots and screen recordings
+
+The documentation's images and clips are not taken by hand. Every
+`div.screenshot-placeholder` in the `.ttl` sources is a slot in
+[`screencast/docs/manifest.mjs`](screencast/docs/manifest.mjs), which binds it to a
+scripted Playwright run against a live dataspace — so a shot is reproducible, and a
+slot that cannot be shot against the demo data says why instead of going missing.
+
+```shell
+cd screencast
+node docs/shoot.mjs --base … --cert-file … --cert-password-file …   # into docs/out/
+make docs-publish                                                   # into ../docs/
+make docs-fill                                                      # point the .ttl sources at them
+```
+
+The shoot writes masters — 2880px lossless PNG, a `.webm` and an `.mp4` per clip.
+`make docs-publish` derives the shipping copies into `docs/`, converting the stills
+to WebP at twice the docs' content width and copying the already-optimised `.mp4`s,
+then prints each published file's SHA-1. That hash is its address: uploads are
+content-addressed at `{base}uploads/{sha1}`, so the bytes have to be final before
+anything references them. `make docs-fill` then writes those references into the
+sources, rewriting them in place on a re-shoot. They are plain XHTML in the literal
+bodies — `<img src="/uploads/{sha1}">` and `<video src="/uploads/{sha1}">`, absolute
+because `uploads/` hangs off the base URI outside the document hierarchy — and
+`docs/install.sh` uploads the files along with the documents.
+
+The demo pictures in this README come from the same rig: `make readme-shots` in
+`screencast/` re-shoots them against the three demo dataspaces and writes them into
+their demo folders.
+
+[More on the recording rig →](screencast/README.md)
+
 ### Northwind Traders
 
 ![Set-based (parallax) navigation](demo/northwind-traders/screenshot.gif "Set-based (parallax) navigation")
@@ -48,15 +82,15 @@ __Note that app installation scripts are not idempotent. Subsequent runs might c
     <dd><a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/imports/csv/" target="_blank">Import from CSV</a></dd>
     <dt>Lines of code</dt>
     <dd>0 lines of imperative code</dd>
-    <dd>681 lines of SPARQL</dd>
-    <dd>951 lines of installation shell scripts</dd>
+    <dd>641 lines of SPARQL</dd>
+    <dd>25 lines of installation shell script</dd>
 </dl>
 
 ### City Graph
 
 ![City Graph geospatial view](demo/copenhagen/screenshot.png "City Graph geospatial view")
 
-**Browser of Copenhagen's geospatial open data, imported from [Copenhagen Open Data](https://data.kk.dk/). Provides a type-colored geospatial overview. Geo resources provide a view with neighbouring resources included.**
+**Browser of Copenhagen's geospatial open data, imported from [Copenhagen Open Data](https://data.kk.dk/). Nine facility types — schools, libraries, playgrounds, charging stations and more — each lifted from a CSV file by one mapping query and given coordinates, so every container shows its records on a map. A chart on the front page counts them by type.**
 
 <dl>
     <dt>Source</dt>
@@ -65,10 +99,12 @@ __Note that app installation scripts are not idempotent. Subsequent runs might c
     <dd><a href="https://copenhagen.demo.linkeddatahub.com/" target="_blank">https://copenhagen.demo.linkeddatahub.com/</a></dd>
     <dt>Features</dt>
     <dd><a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/imports/csv/" target="_blank">Import from CSV</a></dd>
+    <dd>Map and chart views</dd>
+    <dd><a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/administration/ontologies/#constructors" target="_blank">Constructors</a></dd>
     <dt>Lines of code</dt>
     <dd>0 lines of imperative code</dd>
-    <dd>535 lines of SPARQL</dd>
-    <dd>488 lines of installation shell scripts</dd>
+    <dd>509 lines of SPARQL</dd>
+    <dd>25 lines of installation shell script</dd>
 </dl>
 
 ### Unesco Thesaurus
@@ -76,7 +112,7 @@ __Note that app installation scripts are not idempotent. Subsequent runs might c
 ![SKOS viewer](demo/unesco-thesaurus/screenshot.png "SKOS viewer")
 ![SKOS editor](demo/unesco-thesaurus/screenshot-edit-mode.png "SKOS editor")
 
-**Basic SKOS editor with a custom UI theme. Concepts, collections and concept schemas can be created, edited, and linked with each other. SKOS types have dedicated content templates; constructors are auto-generated during ontology import; constraints are added using CLI script.**
+**Basic SKOS editor with a custom UI theme. Concepts, collections and concept schemes can be created, edited, and linked with each other. The ontology — SKOS constructors, constraints and hierarchy views — and the stylesheet with its concept tree all come from the [taxonomy editor package](packages/editor/taxonomy/), imported by the installer with a single `ldh packages add`.**
 
 <dl>
     <dt>Source</dt>
@@ -84,15 +120,16 @@ __Note that app installation scripts are not idempotent. Subsequent runs might c
     <dt>Live instance</dt>
     <dd><a href="https://unesco-thesaurus.demo.linkeddatahub.com/" target="_blank">https://unesco-thesaurus.demo.linkeddatahub.com/</a></dd>
     <dt>Features</dt>
+    <dd><a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/administration/packages/" target="_blank">Package import</a></dd>
     <dd><a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/stylesheets/" target="_blank">Custom stylesheet</a></dd>
     <dd><a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/administration/ontologies/#classes" target="_blank">Classes</a></dd>
     <dd><a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/administration/ontologies/#constructors" target="_blank">Constructors</a></dd>
     <dd><a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/administration/ontologies/#constraints" target="_blank">Constraints</a></dd>
     <dt>Lines of code</dt>
     <dd>0 lines of imperative code</dd>
-    <dd>107 lines of SPARQL</dd>
-    <dd>499 lines of installation shell scripts</dd>
-    <dd>60 lines of XSLT stylesheet</dd>
+    <dd>72 lines of SPARQL</dd>
+    <dd>44 lines of installation shell script</dd>
+    <dd>0 lines of XSLT — the stylesheet comes from the <a href="packages/editor/taxonomy/">taxonomy editor package</a></dd>
 </dl>
 
 __You need to request append/write access to be able to create/edit the data.__
@@ -101,41 +138,37 @@ __You need to request append/write access to be able to create/edit the data.__
 
 **Reusable vocabulary packages that add domain-specific functionality to LinkedDataHub dataspaces.**
 
-Packages provide ontology imports and custom XSLT templates for rendering specific RDF vocabularies. They use **installation-time composition** - integrating content during installation via JAX-RS endpoints rather than loading dynamically at runtime.
+Packages provide ontology imports and custom XSLT templates for rendering specific RDF vocabularies. They are **composed at request time** out of a declaration: a single `ldh:import` triple in the dataspace's settings, resolved on the next request.
+
+The registry is itself a dataspace, published at https://packages.linkeddatahub.com/ from [`packages/`](packages/) by `make install`. The directory path is the package URI: `packages/editor/taxonomy/` is `https://packages.linkeddatahub.com/editor/taxonomy/#this`.
 
 ### Structure
 
 Each package consists of:
-- **`ns.ttl`** - Ontology with vocabulary imports (`owl:imports`) and property views (`ldh:view` / `ldh:inverseView`)
-- **`layout.xsl`** - XSLT stylesheet with custom rendering templates using system modes
+- **A descriptor** - the `lds:Package` that is the `foaf:primaryTopic` of the package's document, naming its `lds:ontology` and `ac:stylesheet`
+- **`ns.ttl`** - Ontology with vocabulary imports (`owl:imports`), constructors, constraints and property views (`ldh:view` / `ldh:inverseView`)
+- **A stylesheet** - XSLT with custom rendering templates in the platform's open modes. The filename is whatever the package's `ac:stylesheet` names.
 
 ### Installation
 
-Packages are installed via CLI or from application install scripts:
+The declaration *is* the installation:
 
 ```bash
-install-package.sh \
-  -b https://localhost:4443/ \
-  -f ssl/owner/cert.pem \
-  -p Password \
-  --package https://packages.linkeddatahub.com/skos/#this
+ldh packages list
+ldh packages add --package https://packages.linkeddatahub.com/editor/taxonomy/#this
 ```
 
-Installation integrates the package by:
-1. Downloading and storing the ontology as a SPARQL document
-2. Adding `owl:imports` to the namespace ontology
-3. Saving the stylesheet and updating master stylesheets with `xsl:import`
-4. Clearing caches to load the new content
+From the next request onwards the server resolves it: the package ontology is materialised as an editable document under the admin `ontologies/` container and joins the dataspace's `owl:imports` closure, and the package stylesheet is copied under `/static/com/linkeddatahub/packages/` and composed into the dataspace stylesheet. No restart is needed. Both copies are taken once, at import, so a later change to the published package does not reach a dataspace that already imported it until the materialised ontology document is deleted and the ontology cache is cleared.
 
 ### Available Packages
 
-- **[skos](packages/skos/)** - SKOS vocabulary support (concepts, schemes, collections)
+- **[editor/taxonomy](packages/editor/taxonomy/)** - Taxonomy editing on SKOS (concepts, schemes, collections)
 
 ### Architecture
 
 - **Declarative only** - RDF + XSLT, no Java code
-- **Installation-time composition** - Pre-composed before loading, no runtime overhead
+- **Request-time composition** - resolved from the `ldh:import` declaration; the ontology and stylesheet are copied once at import, never into the webapp
 - **Property views** (`ldh:view` / `ldh:inverseView`) - SPARQL-based views attached to properties
-- **XSLT overrides** - Custom rendering using system modes (`bs2:*`, `xhtml:*`, etc.)
+- **XSLT overrides** - Custom rendering in the open modes (`ldh:TreeNode`, `ac:PropertyEditor`, `ac:FormControl` and the others `hooks.xsl` declares), imported right after `hooks.xsl` so a package rule outranks the generic fallbacks and nothing else
 
 [Read the full packages documentation →](packages/README.md)
diff --git a/check-links.sh b/check-links.sh
index 99123497..d60e4e7b 100755
--- a/check-links.sh
+++ b/check-links.sh
@@ -15,7 +15,16 @@ print(result[len('http://x/'):])
 
 while IFS= read -r -d '' ttl_file; do
     rel="${ttl_file#"$REPO_DIR"/}"
-    url_path="${rel%.ttl}/"
+
+    # A .ttl is served at <its path minus .ttl>/ — except root.ttl, which install.sh PUTs
+    # at the dataspace base itself rather than at <dir>/root/. Resolving a root.ttl's
+    # relative links against <dir>/root/ would send them one level too deep.
+    if [[ "$(basename "$rel")" == "root.ttl" ]]; then
+        url_path="$(dirname "$rel")/"
+        [[ "$url_path" == "./" ]] && url_path=""
+    else
+        url_path="${rel%.ttl}/"
+    fi
 
     while IFS= read -r url; do
         [[ "$url" =~ ^https?:// ]]  && continue
diff --git a/check-xmlliterals.sh b/check-xmlliterals.sh
new file mode 100755
index 00000000..7149689a
--- /dev/null
+++ b/check-xmlliterals.sh
@@ -0,0 +1,80 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# Checks that every rdf:XMLLiteral lexical form in the RDF corpus is in exclusive
+# canonical XML form, which RDF 1.1 requires of the datatype's lexical space.
+#
+# Jena 4.7.0 enforced this while validating; Jena 5 and later only check
+# well-formedness. Without this check a non-canonical literal passes both
+# `make validate` and the CI syntax check while still being invalid.
+#
+# The rules that follow from canonical form, when authoring XHTML literals:
+# attributes in alphabetical order, explicit end tags (<br></br>, never <br/>),
+# and each start tag on a single line.
+#
+# Usage: check-xmlliterals.sh [directory]   (defaults to the script's own directory)
+
+ROOT_DIR="$(cd "${1:-$(dirname "$0")}" && pwd)"
+EXIT_CODE=0
+
+if ! command -v xmllint > /dev/null; then
+    echo "check-xmlliterals.sh: xmllint is required (Debian/Ubuntu: libxml2-utils)" >&2
+    exit 2
+fi
+
+WORK_DIR="$(mktemp -d)"
+trap 'rm -rf "$WORK_DIR"' EXIT
+
+cd "$ROOT_DIR"
+
+while IFS= read -r -d '' file; do
+    rm -f "$WORK_DIR"/lit.*
+
+    # Write the lexical form of each """..."""^^rdf:XMLLiteral literal to its own
+    # file under $WORK_DIR, and report the literal's number and starting line.
+    awk -v out="$WORK_DIR" '
+        function emit(body, start,    path) {
+            path = out "/lit." ++n
+            printf "%s", body > path
+            close(path)
+            print n, start
+        }
+        {
+            pos = 1
+            while ((idx = index(substr($0, pos), "\"\"\"")) > 0) {
+                at = pos + idx - 1
+                if (inside) {
+                    body = body substr($0, pos, at - pos)
+                    inside = 0
+                    if (substr($0, at + 3) ~ /^[ \t]*\^\^[ \t]*rdf:XMLLiteral/) emit(body, start)
+                } else {
+                    inside = 1
+                    start = NR
+                    body = ""
+                }
+                pos = at + 3
+            }
+            if (inside) body = body substr($0, pos) "\n"
+        }
+    ' "$file" > "$WORK_DIR/manifest"
+
+    while read -r literal start; do
+        lexical_form="$WORK_DIR/lit.$literal"
+
+        if ! xmllint --exc-c14n "$lexical_form" > "$WORK_DIR/canonical" 2> "$WORK_DIR/parse-error"; then
+            echo "$file:$start: rdf:XMLLiteral is not well-formed XML" >&2
+            sed 's|^|    |' "$WORK_DIR/parse-error" >&2
+            EXIT_CODE=1
+            continue
+        fi
+
+        if ! cmp -s "$lexical_form" "$WORK_DIR/canonical"; then
+            echo "$file:$start: rdf:XMLLiteral is not canonical XML" >&2
+            # diff exits non-zero when the files differ, which set -e would treat as fatal
+            diff -u "$lexical_form" "$WORK_DIR/canonical" | sed -e '1,2d' -e 's|^|    |' >&2 || true
+            EXIT_CODE=1
+        fi
+    done < "$WORK_DIR/manifest"
+done < <(find . \( -name '*.ttl' -o -name '*.trig' \) -type f -not -path '*/.git/*' -not -path '*/html/*' -print0)
+
+exit "$EXIT_CODE"
diff --git a/demo/copenhagen/.ldhignore b/demo/copenhagen/.ldhignore
index b0e1fbd0..54934e29 100644
--- a/demo/copenhagen/.ldhignore
+++ b/demo/copenhagen/.ldhignore
@@ -1,5 +1,6 @@
 admin/
 Makefile
 imports.csv
-root.ttl
 screenshot.png
+*.csv
+*.sh
diff --git a/demo/copenhagen/Makefile b/demo/copenhagen/Makefile
index 046534ca..39816de6 100644
--- a/demo/copenhagen/Makefile
+++ b/demo/copenhagen/Makefile
@@ -1,23 +1,3 @@
-SHELL := /bin/bash
+CERT_PATH_DEFAULT = ../../../LinkedDataHub/ssl/owner/keystore.p12
 
-BASE_URL_DEFAULT=https://localhost:4443/
-CERT_PATH_DEFAULT=../../../LinkedDataHub/ssl/owner/cert.pem
-PROXY_URL_DEFAULT=https://localhost:5443/
-
-install:
-	@read -p "Enter Base URL [$(BASE_URL_DEFAULT)]: " BASE_URL; \
-	BASE_URL=$${BASE_URL:-$(BASE_URL_DEFAULT)}; \
-	read -p "Enter Certificate Path [$(CERT_PATH_DEFAULT)]: " CERT_PATH; \
-	CERT_PATH=$${CERT_PATH:-$(CERT_PATH_DEFAULT)}; \
-	read -s -p "Enter Certificate Password (required): " PASSWORD; \
-	echo ""; \
-	if [ -z "$${PASSWORD}" ]; then \
-		echo "Password cannot be empty. Aborting."; \
-		exit 1; \
-	fi; \
-	read -p "Enter Proxy URL (optional) [$(PROXY_URL_DEFAULT)]: " PROXY_URL; \
-	if [ -n "$${PROXY_URL}" ]; then \
-		./install.sh "$${BASE_URL}" "$${CERT_PATH}" "$${PASSWORD}" "$${PROXY_URL}"; \
-	else \
-		./install.sh "$${BASE_URL}" "$${CERT_PATH}" "$${PASSWORD}"; \
-	fi
+include ../../lib/install.mk
diff --git a/demo/copenhagen/admin/model/import-ns.sh b/demo/copenhagen/admin/model/import-ns.sh
deleted file mode 100755
index 7fdfb52b..00000000
--- a/demo/copenhagen/admin/model/import-ns.sh
+++ /dev/null
@@ -1,54 +0,0 @@
-#!/usr/bin/env bash
-
-if [ "$#" -ne 3 ] && [ "$#" -ne 4 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/demo/copenhagen/ ../../../../../ssl/owner/cert.pem Password [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file=$(realpath "$2")
-cert_password="$3"
-
-if [ -n "$4" ]; then
-    proxy="$4"
-else
-    proxy="$base"
-fi
-
-admin_uri() {
-    local uri="$1"
-    echo "$uri" | sed 's|://|://admin.|'
-}
-
-admin_base=$(admin_uri "$base")
-admin_proxy=$(admin_uri "$proxy")
-
-# clear the old properties of the namespace ontology
-
-{ echo "BASE <${admin_base}ontologies/namespace/>"; cat patch-ontology.ru; } | patch.sh \
-    -f "$cert_pem_file" \
-    -p "$cert_password" \
-    --proxy "$admin_proxy" \
-    "${admin_base}ontologies/namespace/"
-
-# append the ns.ttl file to the namespace ontology
-# prepend @base directive using end-user base URI so that the : prefix
-# (defined as <ns#> in ns.ttl) resolves to the end-user namespace
-
-{ echo "@base <${base}ns> ."; cat ns.ttl; } | post.sh \
-    -f "$cert_pem_file" \
-    -p "$cert_password" \
-    --proxy "$admin_proxy" \
-    --content-type "text/turtle" \
-    "${admin_base}ontologies/namespace/"
-
-# clear the namespace ontology from memory
-
-clear-ontology.sh \
-  -f "$cert_pem_file" \
-  -p "$cert_password" \
-  -b "$admin_base" \
-  --proxy "$admin_proxy" \
-  --ontology "${base}ns#"
diff --git a/demo/copenhagen/admin/model/ns.ttl b/demo/copenhagen/admin/model/ns.ttl
index 08f59b05..9d8da4dc 100644
--- a/demo/copenhagen/admin/model/ns.ttl
+++ b/demo/copenhagen/admin/model/ns.ttl
@@ -5,6 +5,9 @@
 @prefix owl:    <http://www.w3.org/2002/07/owl#> .
 @prefix schema: <https://schema.org/> .
 @prefix dct:    <http://purl.org/dc/terms/> .
+@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
+@prefix sp:     <http://spinrdf.org/sp#> .
+@prefix spin:   <http://spinrdf.org/spin#> .
 
 <ns#> a owl:Ontology ;
     owl:imports schema: ;
@@ -54,3 +57,244 @@
     rdfs:label "Toilet" ;
     rdfs:subClassOf schema:PublicToilet ;
     rdfs:isDefinedBy <ns#> .
+
+# constructors: one per class, carrying the fields its mapping query populates
+
+:BicycleParking spin:constructor :BicycleParkingConstructor .
+
+:BicycleParkingConstructor a ldh:Constructor ;
+    rdfs:label "Bicycle parking constructor" ;
+    dct:title "Bicycle parking constructor" ;
+    sp:text """
+        PREFIX dct:    <http://purl.org/dc/terms/>
+        PREFIX schema: <https://schema.org/>
+        PREFIX geo:    <http://www.w3.org/2003/01/geo/wgs84_pos#>
+        PREFIX dbo:    <http://dbpedia.org/ontology/>
+        PREFIX xsd:    <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                dct:identifier [ a xsd:string ] ;
+                geo:lat [ a xsd:float ] ;
+                geo:long [ a xsd:float ] ;
+                dbo:city [ a xsd:string ] ;
+                schema:streetAddress [ a xsd:string ] ;
+                schema:maximumAttendeeCapacity [ a xsd:integer ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy <ns#> .
+
+:ChargingStation spin:constructor :ChargingStationConstructor .
+
+:ChargingStationConstructor a ldh:Constructor ;
+    rdfs:label "Charging station constructor" ;
+    dct:title "Charging station constructor" ;
+    sp:text """
+        PREFIX dct:    <http://purl.org/dc/terms/>
+        PREFIX schema: <https://schema.org/>
+        PREFIX geo:    <http://www.w3.org/2003/01/geo/wgs84_pos#>
+        PREFIX xsd:    <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                dct:identifier [ a xsd:string ] ;
+                geo:lat [ a xsd:float ] ;
+                geo:long [ a xsd:float ] ;
+                schema:streetAddress [ a xsd:string ] ;
+                schema:additionalProperty [ a xsd:string ] ;
+                schema:maximumAttendeeCapacity [ a xsd:integer ] ;
+                schema:serviceOperator [ a xsd:string ] ;
+                schema:comment [ a xsd:string ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy <ns#> .
+
+:Library spin:constructor :LibraryConstructor .
+
+:LibraryConstructor a ldh:Constructor ;
+    rdfs:label "Library constructor" ;
+    dct:title "Library constructor" ;
+    sp:text """
+        PREFIX dct:    <http://purl.org/dc/terms/>
+        PREFIX schema: <https://schema.org/>
+        PREFIX geo:    <http://www.w3.org/2003/01/geo/wgs84_pos#>
+        PREFIX dbo:    <http://dbpedia.org/ontology/>
+        PREFIX foaf:   <http://xmlns.com/foaf/0.1/>
+        PREFIX rdfs:   <http://www.w3.org/2000/01/rdf-schema#>
+        PREFIX xsd:    <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                dct:identifier [ a xsd:string ] ;
+                geo:lat [ a xsd:float ] ;
+                geo:long [ a xsd:float ] ;
+                schema:streetAddress [ a xsd:string ] ;
+                schema:postalCode [ a xsd:string ] ;
+                dbo:district [ a xsd:string ] ;
+                foaf:page [ a rdfs:Resource ] ;
+                foaf:mbox [ a rdfs:Resource ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy <ns#> .
+
+:ParkingFacility spin:constructor :ParkingFacilityConstructor .
+
+:ParkingFacilityConstructor a ldh:Constructor ;
+    rdfs:label "Parking facility constructor" ;
+    dct:title "Parking facility constructor" ;
+    sp:text """
+        PREFIX dct:    <http://purl.org/dc/terms/>
+        PREFIX schema: <https://schema.org/>
+        PREFIX geo:    <http://www.w3.org/2003/01/geo/wgs84_pos#>
+        PREFIX xsd:    <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                dct:identifier [ a xsd:string ] ;
+                geo:lat [ a xsd:float ] ;
+                geo:long [ a xsd:float ] ;
+                schema:streetAddress [ a xsd:string ] ;
+                schema:postalCode [ a xsd:string ] ;
+                schema:maximumAttendeeCapacity [ a xsd:integer ] ;
+                schema:additionalProperty [ a xsd:string ] ;
+                schema:comment [ a xsd:string ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy <ns#> .
+
+:Place spin:constructor :PlaceConstructor .
+
+:PlaceConstructor a ldh:Constructor ;
+    rdfs:label "Place constructor" ;
+    dct:title "Place constructor" ;
+    sp:text """
+        PREFIX dct:    <http://purl.org/dc/terms/>
+        PREFIX geo:    <http://www.w3.org/2003/01/geo/wgs84_pos#>
+        PREFIX xsd:    <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                dct:identifier [ a xsd:string ] ;
+                geo:lat [ a xsd:float ] ;
+                geo:long [ a xsd:float ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy <ns#> .
+
+:Playground spin:constructor :PlaygroundConstructor .
+
+:PlaygroundConstructor a ldh:Constructor ;
+    rdfs:label "Playground constructor" ;
+    dct:title "Playground constructor" ;
+    sp:text """
+        PREFIX dct:    <http://purl.org/dc/terms/>
+        PREFIX schema: <https://schema.org/>
+        PREFIX geo:    <http://www.w3.org/2003/01/geo/wgs84_pos#>
+        PREFIX foaf:   <http://xmlns.com/foaf/0.1/>
+        PREFIX rdfs:   <http://www.w3.org/2000/01/rdf-schema#>
+        PREFIX xsd:    <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                dct:identifier [ a xsd:string ] ;
+                geo:lat [ a xsd:float ] ;
+                geo:long [ a xsd:float ] ;
+                schema:streetAddress [ a xsd:string ] ;
+                schema:typicalAgeRange [ a xsd:string ] ;
+                dct:description [ a xsd:string ] ;
+                foaf:page [ a rdfs:Resource ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy <ns#> .
+
+:School spin:constructor :SchoolConstructor .
+
+:SchoolConstructor a ldh:Constructor ;
+    rdfs:label "School constructor" ;
+    dct:title "School constructor" ;
+    sp:text """
+        PREFIX dct:    <http://purl.org/dc/terms/>
+        PREFIX schema: <https://schema.org/>
+        PREFIX geo:    <http://www.w3.org/2003/01/geo/wgs84_pos#>
+        PREFIX dbo:    <http://dbpedia.org/ontology/>
+        PREFIX foaf:   <http://xmlns.com/foaf/0.1/>
+        PREFIX rdfs:   <http://www.w3.org/2000/01/rdf-schema#>
+        PREFIX xsd:    <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                dct:identifier [ a xsd:string ] ;
+                geo:lat [ a xsd:float ] ;
+                geo:long [ a xsd:float ] ;
+                schema:streetAddress [ a xsd:string ] ;
+                schema:postalCode [ a xsd:string ] ;
+                schema:addressRegion [ a xsd:string ] ;
+                dbo:city [ a xsd:string ] ;
+                dbo:district [ a xsd:string ] ;
+                foaf:page [ a rdfs:Resource ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy <ns#> .
+
+:SportsCenter spin:constructor :SportsCenterConstructor .
+
+:SportsCenterConstructor a ldh:Constructor ;
+    rdfs:label "Sports center constructor" ;
+    dct:title "Sports center constructor" ;
+    sp:text """
+        PREFIX dct:    <http://purl.org/dc/terms/>
+        PREFIX schema: <https://schema.org/>
+        PREFIX geo:    <http://www.w3.org/2003/01/geo/wgs84_pos#>
+        PREFIX foaf:   <http://xmlns.com/foaf/0.1/>
+        PREFIX rdfs:   <http://www.w3.org/2000/01/rdf-schema#>
+        PREFIX xsd:    <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                dct:identifier [ a xsd:string ] ;
+                geo:lat [ a xsd:float ] ;
+                geo:long [ a xsd:float ] ;
+                schema:streetAddress [ a xsd:string ] ;
+                schema:postalCode [ a xsd:string ] ;
+                foaf:mbox [ a rdfs:Resource ] ;
+                foaf:page [ a rdfs:Resource ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy <ns#> .
+
+:PublicToilet spin:constructor :PublicToiletConstructor .
+
+:PublicToiletConstructor a ldh:Constructor ;
+    rdfs:label "Toilet constructor" ;
+    dct:title "Toilet constructor" ;
+    sp:text """
+        PREFIX dct:    <http://purl.org/dc/terms/>
+        PREFIX schema: <https://schema.org/>
+        PREFIX geo:    <http://www.w3.org/2003/01/geo/wgs84_pos#>
+        PREFIX dbo:    <http://dbpedia.org/ontology/>
+        PREFIX xsd:    <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                dct:identifier [ a xsd:string ] ;
+                geo:lat [ a xsd:float ] ;
+                geo:long [ a xsd:float ] ;
+                schema:streetAddress [ a xsd:string ] ;
+                schema:postalCode [ a xsd:string ] ;
+                schema:additionalProperty [ a xsd:string ] ;
+                dbo:isHandicappedAccessible [ a xsd:string ] ;
+                schema:location [ a xsd:string ] ;
+                schema:comment [ a xsd:string ] ;
+                schema:openingHours [ a xsd:string ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy <ns#> .
diff --git a/demo/copenhagen/bicycle-parkings.ttl b/demo/copenhagen/bicycle-parkings.ttl
index b1c7fb04..6ed9f502 100644
--- a/demo/copenhagen/bicycle-parkings.ttl
+++ b/demo/copenhagen/bicycle-parkings.ttl
@@ -1,4 +1,4 @@
-@prefix dh:   <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:   <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix ldh:  <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix dct:  <http://purl.org/dc/terms/> .
 @prefix spin: <http://spinrdf.org/spin#> .
@@ -14,12 +14,11 @@
 # Intro XHTML
 <#cycling-intro> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-        <h3>Cycling infrastructure</h3>
-        <p>Copenhagen is renowned as one of the world's most bicycle-friendly cities, with extensive cycling infrastructure
-           serving hundreds of thousands of daily cyclists. The city's bicycle parking facilities are strategically located
-           throughout the urban area to support this sustainable transportation network.</p>
-        <p>Explore the map below to discover bicycle parking locations across Copenhagen, including capacity information
-           and geographic distribution patterns.</p>
+        <div class="ldh-section">
+            <h2>Where the bikes go</h2>
+            <p>4,390 municipal bicycle racks, each with its capacity, street address and city district. Capacity
+               is the number the rack was built for, so the map reads as supply rather than as points.</p>
+        </div>
     </div>"""^^rdf:XMLLiteral .
 
 # Object block
@@ -28,5 +27,6 @@
 
 # View block with MapMode
 <#select-children-view> a ldh:View ;
+    dct:title "All bicycle parkings" ;
     spin:query ldh:SelectChildren ;
     ac:mode ac:MapMode .
diff --git a/demo/copenhagen/bicycle-parkings/bicycle-parkings.rq b/demo/copenhagen/bicycle-parkings/bicycle-parkings.rq
index 568f9ed7..43d5b037 100644
--- a/demo/copenhagen/bicycle-parkings/bicycle-parkings.rq
+++ b/demo/copenhagen/bicycle-parkings/bicycle-parkings.rq
@@ -1,11 +1,10 @@
-PREFIX ns:         <https://copenhagen.demo.linkeddatahub.com/ns#>
 PREFIX foaf:       <http://xmlns.com/foaf/0.1/>
 PREFIX dct:        <http://purl.org/dc/terms/>
 PREFIX dbo:        <http://dbpedia.org/ontology/> 
 PREFIX schema:     <https://schema.org/> 
 PREFIX geo:        <http://www.w3.org/2003/01/geo/wgs84_pos#> 
 PREFIX xsd:        <http://www.w3.org/2001/XMLSchema#> 
-PREFIX dh:         <https://www.w3.org/ns/ldt/document-hierarchy#>
+PREFIX dh:         <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#>
 PREFIX sioc:       <http://rdfs.org/sioc/ns#>
 
 CONSTRUCT
@@ -18,7 +17,7 @@ CONSTRUCT
             dct:title ?name ;
             foaf:primaryTopic ?bicyleParking .
 
-        ?bicyleParking a ns:BicycleParking ;
+        ?bicyleParking a ?type ;
             geo:lat ?lat ;
             geo:long ?long ;
             dct:title ?name ;
@@ -41,11 +40,13 @@ WHERE
     OPTIONAL 
     { ?bicyleParking_row <#vejnavn> ?address }
     OPTIONAL 
-    { ?bicyleParking_row <#antal_pladser> ?spaces }
+    { ?bicyleParking_row <#antal_pladser> ?spaces_string }
 
     BIND(uri(concat(str($base), "bicycle-parkings/")) AS ?container)
+    BIND(uri(concat(str($base), "ns#BicycleParking")) AS ?type)
     BIND(uri(concat(str(?container), encode_for_uri(?id), "/")) AS ?item)
     BIND(uri(concat(str(?item), "#this")) AS ?bicyleParking)
     BIND(xsd:float(?lat_string) AS ?lat)
     BIND(xsd:float(?long_string) AS ?long)
+    BIND(xsd:integer(?spaces_string) AS ?spaces)
 }
\ No newline at end of file
diff --git a/demo/copenhagen/charging-stations.ttl b/demo/copenhagen/charging-stations.ttl
index 7d0201a2..67d973b0 100644
--- a/demo/copenhagen/charging-stations.ttl
+++ b/demo/copenhagen/charging-stations.ttl
@@ -1,4 +1,4 @@
-@prefix dh:   <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:   <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix ldh:  <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix dct:  <http://purl.org/dc/terms/> .
 @prefix spin: <http://spinrdf.org/spin#> .
@@ -8,7 +8,18 @@
 # Main container document
 <> a dh:Container ;
     dct:title "Charging stations" ;
-    rdf:_1 <#select-children> .
+    rdf:_1 <#charging-intro> ;
+    rdf:_2 <#select-children> .
+
+# Intro XHTML
+<#charging-intro> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+        <div class="ldh-section">
+            <h2>Where the cars charge</h2>
+            <p>248 public charging points, each with the operator that runs it, its street address and how many
+               vehicles it takes at once.</p>
+        </div>
+    </div>"""^^rdf:XMLLiteral .
 
 # Object block
 <#select-children> a ldh:Object ;
@@ -16,5 +27,6 @@
 
 # View block with MapMode
 <#select-children-view> a ldh:View ;
+    dct:title "All charging stations" ;
     spin:query ldh:SelectChildren ;
     ac:mode ac:MapMode .
diff --git a/demo/copenhagen/charging-stations/charging-stations.rq b/demo/copenhagen/charging-stations/charging-stations.rq
index be0496b7..8db0e50d 100644
--- a/demo/copenhagen/charging-stations/charging-stations.rq
+++ b/demo/copenhagen/charging-stations/charging-stations.rq
@@ -1,10 +1,9 @@
-PREFIX ns:         <https://copenhagen.demo.linkeddatahub.com/ns#>
 PREFIX foaf:       <http://xmlns.com/foaf/0.1/>
 PREFIX dct:        <http://purl.org/dc/terms/>
 PREFIX schema:     <https://schema.org/> 
 PREFIX geo:        <http://www.w3.org/2003/01/geo/wgs84_pos#> 
 PREFIX xsd:        <http://www.w3.org/2001/XMLSchema#> 
-PREFIX dh:         <https://www.w3.org/ns/ldt/document-hierarchy#>
+PREFIX dh:         <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#>
 PREFIX sioc:       <http://rdfs.org/sioc/ns#>
 
 CONSTRUCT
@@ -17,7 +16,7 @@ CONSTRUCT
             dct:title ?name ;
             foaf:primaryTopic ?charger .
 
-        ?charger a ns:ChargingStation ;
+        ?charger a ?type ;
             geo:lat ?lat ;
             geo:long ?long ;
             schema:streetAddress ?address ;
@@ -42,15 +41,17 @@ WHERE
     OPTIONAL 
     { ?charger_row <#address> ?address }
     OPTIONAL 
-    { ?charger_row <#antal_udtag> ?spaces }
+    { ?charger_row <#antal_udtag> ?spaces_string }
     OPTIONAL 
     { ?charger_row <#operator> ?operator }
     OPTIONAL 
     { ?charger_row <#bem> ?information }
 
     BIND(uri(concat(str($base), "charging-stations/")) AS ?container)
+    BIND(uri(concat(str($base), "ns#ChargingStation")) AS ?type)
     BIND(uri(concat(str(?container), encode_for_uri(?id), "/")) AS ?item)
     BIND(uri(concat(str(?item), "#this")) AS ?charger)
     BIND(xsd:float(?lat_string) AS ?lat)
     BIND(xsd:float(?long_string) AS ?long)
+    BIND(xsd:integer(?spaces_string) AS ?spaces)
 }
\ No newline at end of file
diff --git a/demo/copenhagen/import-csv.sh b/demo/copenhagen/import-csv.sh
deleted file mode 100755
index ab4030d5..00000000
--- a/demo/copenhagen/import-csv.sh
+++ /dev/null
@@ -1,91 +0,0 @@
-#!/usr/bin/env bash
-
-if [ "$#" -ne 4 ] && [ "$#" -ne 5 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password [$proxy] $imports_file' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../../ssl/owner/cert.pem Password [https://localhost:5443/] "$pwd/imports.csv"' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file=$(realpath "$2")
-cert_password="$3"
-
-if [ -n "$5" ]; then
-    proxy="$4"
-    imports_csv="$5"
-else
-    proxy="$base"
-    imports_csv="$4"
-fi
-
-titles=()
-queries=()
-files=()
-targets=()
-
-pwd=$(realpath "$PWD")
-
-arr_csv=()
-while IFS= read -r line
-do
-    arr_csv+=("$line")
-done < <(tail -n +2 "$imports_csv")
-
-index=0
-for row in "${arr_csv[@]}"
-do
-    query_filename=$(echo "$row" | cut -d "," -f 1)
-    csv_filename=$(echo "$row" | cut -d "," -f 2)
-    target_path=$(echo "$row" | cut -d "," -f 3)
-    title=$(echo "$row" | cut -d "," -f 4)
-
-    target="${base}${target_path}"
-    titles+=("$title")
-    targets+=("$target")
-
-    # create query
-
-    # Generate query ID for fragment identifier
-    query_id=$(uuidgen | tr '[:upper:]' '[:lower:]')
-
-    add-construct.sh \
-      -b "$base" \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      --title "$title" \
-      --uri "#${query_id}" \
-      --query-file "$pwd/${query_filename}" \
-      "$target"
-
-    query="${target}#${query_id}"
-    queries+=("$query")
-
-    # Calculate file URI from SHA1 hash
-    # The files themselves should already be uploaded by update-folder.sh
-    sha1sum=$(shasum -a 1 "$pwd/${csv_filename}" | awk '{print $1}')
-    file="${base}uploads/${sha1sum}"
-    files+=("$file")
-
-    # iterate
-
-    ((index++))
-done
-
-# start imports - postpone until after documents are created so we don't get concurrent updates to the triplestore
-
-for i in "${!files[@]}"; do
-    printf "\n### Importing CSV from %s\n\n" "${files[$i]}"
-
-    add-csv-import.sh \
-      -b "$base" \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      --title "${titles[$i]}" \
-      --query "${queries[$i]}" \
-      --file "${files[$i]}" \
-      --delimiter "," \
-      "${targets[$i]}"
-done
diff --git a/demo/copenhagen/install.sh b/demo/copenhagen/install.sh
index 8aa204d4..b9d318ba 100755
--- a/demo/copenhagen/install.sh
+++ b/demo/copenhagen/install.sh
@@ -1,50 +1,25 @@
 #!/usr/bin/env bash
-
-if [ "$#" -ne 3 ] && [ "$#" -ne 4 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../../LinkedDataHub/ssl/owner/cert.pem Password [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file=$(realpath "$2")
-cert_password="$3"
-
-if [ -n "$4" ]; then
-    proxy="$4"
-else
-    proxy="$base"
-fi
-
-pwd="$(realpath "$PWD")"
-
-printf "\n### Creating authorization to make the app public\n\n"
-
-make-public.sh -b "$base" -f "$cert_pem_file" -p "$cert_password" --proxy "$proxy"
-
-cd admin/model
-
-printf "\n### Importing namespace ontology\n\n"
-
-./import-ns.sh "$base" "$cert_pem_file" "$cert_password" "$proxy"
-
-cd ../..
-
-printf "\n### Updating documents and uploading files\n\n"
-
-if [[ -f "root.ttl" ]]; then
-  printf "\n### Updating %s\n" "$base"
-  cat root.ttl | turtle --base="$base" | put.sh \
-    -f "$cert_pem_file" \
-    -p "$cert_password" \
-    --proxy "$proxy" \
-    -t "application/n-triples" \
-    "$base"
-fi
-
-./update-folder.sh "$base" "$cert_pem_file" "$cert_password" "$pwd" "$pwd" "$proxy"
-
-printf "\n### Importing CSV data\n\n"
-
-./import-csv.sh "$base" "$cert_pem_file" "$cert_password" "$proxy" "$pwd/imports.csv"
\ No newline at end of file
+# Installs the app onto a LinkedDataHub instance with the ldh CLI: makes it public, installs the
+# namespace ontology, pushes the document tree with its files, and runs the CSV imports.
+#
+# Reads LDH_BASE, LDH_CERT_FILE, LDH_CERT_PASSWORD and optionally LDH_PROXY; `make install` prompts
+# for them. Re-running converges on the same documents — PUT replaces each one and the ontology is
+# reset before re-import — but make-public and every CSV import are POSTs, so each run adds another
+# authorization and another import record.
+set -euo pipefail
+
+app_dir="$(cd "$(dirname "$0")" && pwd)"
+. "$app_dir/../../lib/ldh-app.sh"
+ldh_app_require_env
+
+ldh_app_step "Creating authorization to make the app public"
+ldh admin make-public
+
+ldh_app_step "Importing namespace ontology"
+ldh_app_import_ns "$app_dir/admin/model"
+
+ldh_app_step "Pushing documents and files"
+ldh push --dir "$app_dir" "$LDH_BASE"
+
+ldh_app_step "Importing CSV data"
+ldh_app_import_csv "$app_dir" "$app_dir/imports.csv"
diff --git a/demo/copenhagen/libraries.ttl b/demo/copenhagen/libraries.ttl
index c7d1f263..1d50fb8f 100644
--- a/demo/copenhagen/libraries.ttl
+++ b/demo/copenhagen/libraries.ttl
@@ -1,4 +1,4 @@
-@prefix dh:   <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:   <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix ldh:  <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix dct:  <http://purl.org/dc/terms/> .
 @prefix spin: <http://spinrdf.org/spin#> .
@@ -14,12 +14,11 @@
 # Intro XHTML
 <#libraries-intro> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-        <h3>Public libraries</h3>
-        <p>Copenhagen's public library system serves as a cornerstone of community life, providing free access to
-           knowledge, culture, and digital resources. From the iconic central library to neighborhood branches,
-           these facilities support learning, creativity, and social connection across all city districts.</p>
-        <p>Use the interactive map below to locate libraries throughout Copenhagen and discover their unique
-           characteristics and services.</p>
+        <div class="ldh-section">
+            <h2>The branch network</h2>
+            <p>Nineteen public libraries, each with its address, postal district, contact address and its page on
+               the city's library site. Open a branch to follow the link out.</p>
+        </div>
     </div>"""^^rdf:XMLLiteral .
 
 # Object block
@@ -28,5 +27,6 @@
 
 # View block with MapMode
 <#select-children-view> a ldh:View ;
+    dct:title "All libraries" ;
     spin:query ldh:SelectChildren ;
     ac:mode ac:MapMode .
diff --git a/demo/copenhagen/libraries/libraries.rq b/demo/copenhagen/libraries/libraries.rq
index 4100df39..b0fdf657 100644
--- a/demo/copenhagen/libraries/libraries.rq
+++ b/demo/copenhagen/libraries/libraries.rq
@@ -1,11 +1,10 @@
-PREFIX ns:         <https://copenhagen.demo.linkeddatahub.com/ns#>
 PREFIX foaf:       <http://xmlns.com/foaf/0.1/>
 PREFIX dct:        <http://purl.org/dc/terms/>
 PREFIX dbo:        <http://dbpedia.org/ontology/> 
 PREFIX schema:     <https://schema.org/> 
 PREFIX geo:        <http://www.w3.org/2003/01/geo/wgs84_pos#> 
 PREFIX xsd:        <http://www.w3.org/2001/XMLSchema#> 
-PREFIX dh:         <https://www.w3.org/ns/ldt/document-hierarchy#>
+PREFIX dh:         <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#>
 PREFIX sioc:       <http://rdfs.org/sioc/ns#>
 
 CONSTRUCT
@@ -18,7 +17,7 @@ CONSTRUCT
             dct:title ?name ;
             foaf:primaryTopic ?library .
 
-        ?library a ns:Library ;
+        ?library a ?type ;
             geo:lat ?lat ;
             geo:long ?long ;
             dct:title ?name ;
@@ -52,6 +51,7 @@ WHERE
     }
 
     BIND(uri(concat(str($base), "libraries/")) AS ?container)
+    BIND(uri(concat(str($base), "ns#Library")) AS ?type)
     BIND(uri(concat(str(?container), encode_for_uri(?id), "/")) AS ?item)
     BIND(uri(concat(str(?item), "#this")) AS ?library)
     BIND(xsd:float(?lat_string) AS ?lat)
diff --git a/demo/copenhagen/parking-facilities.ttl b/demo/copenhagen/parking-facilities.ttl
index 7d5272fa..2e253be0 100644
--- a/demo/copenhagen/parking-facilities.ttl
+++ b/demo/copenhagen/parking-facilities.ttl
@@ -1,4 +1,4 @@
-@prefix dh:   <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:   <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix ldh:  <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix dct:  <http://purl.org/dc/terms/> .
 @prefix sp:   <http://spinrdf.org/sp#> .
@@ -9,8 +9,9 @@
 # Main container document
 <> a dh:Container ;
     dct:title "Parking facilities" ;
-    rdf:_1 <#largest-parkings-block> ;
-    rdf:_2 <#select-children> .
+    rdf:_1 <#parking-intro> ;
+    rdf:_2 <#largest-parkings-block> ;
+    rdf:_3 <#select-children> .
 
 # Chart block (wrapped in ldh:Object per ContentMode contract)
 <#largest-parkings-block> a ldh:Object ;
@@ -26,8 +27,7 @@
 # Chart SELECT query
 <#parking-by-spaces-query> a sp:Select ;
     dct:title "Largest parking facilities" ;
-    sp:text """PREFIX ns: <https://copenhagen.demo.linkeddatahub.com/ns#>
-PREFIX schema: <https://schema.org/>
+    sp:text """PREFIX schema: <https://schema.org/>
 PREFIX dct: <http://purl.org/dc/terms/>
 
 SELECT DISTINCT ?name ?spaces
@@ -35,19 +35,33 @@ WHERE
 {
     GRAPH ?g
     {
-        ?parking a ns:ParkingFacility ;
+        ?parking a ?type ;
             dct:title ?name ;
             schema:maximumAttendeeCapacity ?spaces .
-  	}
+        # the class is in this dataspace's namespace, whatever base URI it was installed under;
+        # the data endpoint gives a relative IRI no base, so the class is matched by name instead
+        FILTER(STRENDS(STR(?type), "/ns#ParkingFacility"))
+    }
 }
 ORDER BY DESC(?spaces)
 LIMIT 100""" .
 
+# Intro XHTML
+<#parking-intro> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+        <div class="ldh-section">
+            <h2>The city's car parks</h2>
+            <p>Eighteen public car parks with their operator, address and capacity. Capacity is what ranks them in
+               the chart below and what the map is worth reading for.</p>
+        </div>
+    </div>"""^^rdf:XMLLiteral .
+
 # Object block
 <#select-children> a ldh:Object ;
     rdf:value <#select-children-view> .
 
 # View block with MapMode
 <#select-children-view> a ldh:View ;
+    dct:title "All parking facilities" ;
     spin:query ldh:SelectChildren ;
     ac:mode ac:MapMode .
diff --git a/demo/copenhagen/parking-facilities/parking-facilities.rq b/demo/copenhagen/parking-facilities/parking-facilities.rq
index 3dad5770..2a6a6605 100644
--- a/demo/copenhagen/parking-facilities/parking-facilities.rq
+++ b/demo/copenhagen/parking-facilities/parking-facilities.rq
@@ -1,10 +1,9 @@
-PREFIX ns:         <https://copenhagen.demo.linkeddatahub.com/ns#>
 PREFIX foaf:       <http://xmlns.com/foaf/0.1/>
 PREFIX dct:        <http://purl.org/dc/terms/>
 PREFIX schema:     <https://schema.org/> 
 PREFIX geo:        <http://www.w3.org/2003/01/geo/wgs84_pos#> 
 PREFIX xsd:        <http://www.w3.org/2001/XMLSchema#> 
-PREFIX dh:         <https://www.w3.org/ns/ldt/document-hierarchy#>
+PREFIX dh:         <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#>
 PREFIX sioc:       <http://rdfs.org/sioc/ns#>
 
 CONSTRUCT
@@ -17,7 +16,7 @@ CONSTRUCT
             dct:title ?name ;
             foaf:primaryTopic ?parking .
 
-        ?parking a ns:ParkingFacility ;
+        ?parking a ?type ;
             geo:lat ?lat ;
             geo:long ?long ;
             dct:title ?name ;
@@ -26,7 +25,7 @@ CONSTRUCT
             schema:maximumAttendeeCapacity ?spaces ;
             schema:additionalProperty ?parkingType ;
             schema:comment ?information ;
-            schema:identifier ?id .
+            dct:identifier ?id .
         ?owner a ?ownerType ;
             schema:owns ?parking .
     }
@@ -54,6 +53,7 @@ WHERE
         }
 
     BIND(uri(concat(str($base), "parking-facilities/")) AS ?container)
+    BIND(uri(concat(str($base), "ns#ParkingFacility")) AS ?type)
     BIND(uri(concat(str(?container), encode_for_uri(?id), "/")) AS ?item)
     BIND(uri(concat(str(?item), "#this")) AS ?parking)
     BIND(xsd:float(?lat_string) AS ?lat)
diff --git a/demo/copenhagen/places.ttl b/demo/copenhagen/places.ttl
index 4dbd18b8..8f75ceae 100644
--- a/demo/copenhagen/places.ttl
+++ b/demo/copenhagen/places.ttl
@@ -1,4 +1,4 @@
-@prefix dh:   <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:   <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix ldh:  <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix dct:  <http://purl.org/dc/terms/> .
 @prefix spin: <http://spinrdf.org/spin#> .
@@ -8,7 +8,18 @@
 # Main container document
 <> a dh:Container ;
     dct:title "Places" ;
-    rdf:_1 <#select-children> .
+    rdf:_1 <#places-intro> ;
+    rdf:_2 <#select-children> .
+
+# Intro XHTML
+<#places-intro> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+        <div class="ldh-section">
+            <h2>Places of interest</h2>
+            <p>158 named places, each tagged with the subject it belongs to and located, and nothing more. The
+               thinnest records in the dataset, and enough to put every one on the map.</p>
+        </div>
+    </div>"""^^rdf:XMLLiteral .
 
 # Object block
 <#select-children> a ldh:Object ;
@@ -16,5 +27,6 @@
 
 # View block with MapMode
 <#select-children-view> a ldh:View ;
+    dct:title "All places" ;
     spin:query ldh:SelectChildren ;
     ac:mode ac:MapMode .
diff --git a/demo/copenhagen/places/places.rq b/demo/copenhagen/places/places.rq
index 125434c9..44dafa52 100644
--- a/demo/copenhagen/places/places.rq
+++ b/demo/copenhagen/places/places.rq
@@ -1,7 +1,6 @@
-PREFIX ns:         <https://copenhagen.demo.linkeddatahub.com/ns#>
 PREFIX schema:     <https://schema.org/>
 PREFIX geo:        <http://www.w3.org/2003/01/geo/wgs84_pos#>
-PREFIX dh:         <https://www.w3.org/ns/ldt/document-hierarchy#>
+PREFIX dh:         <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#>
 PREFIX dct:        <http://purl.org/dc/terms/>
 PREFIX xsd:        <http://www.w3.org/2001/XMLSchema#>
 PREFIX skos:       <http://www.w3.org/2004/02/skos/core#>
@@ -18,7 +17,7 @@ CONSTRUCT
             dh:slug ?id ;
             foaf:primaryTopic ?place .
 
-        ?place a ns:Place ;
+        ?place a ?type ;
             geo:lat ?lat ;
             geo:long ?long ;
             dct:identifier ?id ;
@@ -37,6 +36,7 @@ WHERE
       { ?place_row  <#category>  ?category_name }
 
     BIND(uri(concat(str($base), "places/")) AS ?container)
+    BIND(uri(concat(str($base), "ns#Place")) AS ?type)
     BIND(uri(concat(str(?container), encode_for_uri(?id), "/")) AS ?item)
     BIND(uri(concat(str(?item), "#this")) AS ?place)
     BIND(xsd:float(?lat_string) AS ?lat)
diff --git a/demo/copenhagen/playgrounds.ttl b/demo/copenhagen/playgrounds.ttl
index 2bc30b39..352d7687 100644
--- a/demo/copenhagen/playgrounds.ttl
+++ b/demo/copenhagen/playgrounds.ttl
@@ -1,4 +1,4 @@
-@prefix dh:   <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:   <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix ldh:  <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix dct:  <http://purl.org/dc/terms/> .
 @prefix spin: <http://spinrdf.org/spin#> .
@@ -8,7 +8,18 @@
 # Main container document
 <> a dh:Container ;
     dct:title "Playgrounds" ;
-    rdf:_1 <#select-children> .
+    rdf:_1 <#playgrounds-intro> ;
+    rdf:_2 <#select-children> .
+
+# Intro XHTML
+<#playgrounds-intro> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+        <div class="ldh-section">
+            <h2>Where the children play</h2>
+            <p>126 playgrounds, each with the age range it was built for, a description and a link to the city's
+               own page for it.</p>
+        </div>
+    </div>"""^^rdf:XMLLiteral .
 
 # Object block
 <#select-children> a ldh:Object ;
@@ -16,5 +27,6 @@
 
 # View block with MapMode
 <#select-children-view> a ldh:View ;
+    dct:title "All playgrounds" ;
     spin:query ldh:SelectChildren ;
     ac:mode ac:MapMode .
diff --git a/demo/copenhagen/playgrounds/playgrounds.rq b/demo/copenhagen/playgrounds/playgrounds.rq
index 0279d113..f77090dd 100644
--- a/demo/copenhagen/playgrounds/playgrounds.rq
+++ b/demo/copenhagen/playgrounds/playgrounds.rq
@@ -1,5 +1,4 @@
-PREFIX ns:         <https://copenhagen.demo.linkeddatahub.com/ns#>
-PREFIX dh:         <https://www.w3.org/ns/ldt/document-hierarchy#>
+PREFIX dh:         <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#>
 PREFIX foaf:       <http://xmlns.com/foaf/0.1/>
 PREFIX dct:        <http://purl.org/dc/terms/>
 PREFIX schema:     <https://schema.org/> 
@@ -18,7 +17,7 @@ CONSTRUCT
             dh:slug ?id ;
             foaf:primaryTopic ?playground .
 
-        ?playground a ns:Playground ;
+        ?playground a ?type ;
             geo:lat ?lat ;
             geo:long ?long ;
             dct:identifier ?id ;
@@ -52,6 +51,7 @@ WHERE
     BIND (URI(?linkString) AS ?link)}
 
     BIND(uri(concat(str($base), "playgrounds/")) AS ?container)
+    BIND(uri(concat(str($base), "ns#Playground")) AS ?type)
     BIND(uri(concat(str(?container), encode_for_uri(?id), "/")) AS ?item)
     BIND(uri(concat(str(?item), "#this")) AS ?playground)
     BIND(xsd:float(?lat_string) AS ?lat) .
diff --git a/demo/copenhagen/public-toilets.ttl b/demo/copenhagen/public-toilets.ttl
index c72795a4..77824638 100644
--- a/demo/copenhagen/public-toilets.ttl
+++ b/demo/copenhagen/public-toilets.ttl
@@ -1,4 +1,4 @@
-@prefix dh:   <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:   <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix ldh:  <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix dct:  <http://purl.org/dc/terms/> .
 @prefix spin: <http://spinrdf.org/spin#> .
@@ -8,7 +8,18 @@
 # Main container document
 <> a dh:Container ;
     dct:title "Public toilets" ;
-    rdf:_1 <#select-children> .
+    rdf:_1 <#toilets-intro> ;
+    rdf:_2 <#select-children> .
+
+# Intro XHTML
+<#toilets-intro> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+        <div class="ldh-section">
+            <h2>Public conveniences</h2>
+            <p>211 public toilets carrying their opening hours and whether they are step-free. Both are properties
+               of the facility, so the map answers availability and not just location.</p>
+        </div>
+    </div>"""^^rdf:XMLLiteral .
 
 # Object block
 <#select-children> a ldh:Object ;
@@ -16,5 +27,6 @@
 
 # View block with MapMode
 <#select-children-view> a ldh:View ;
+    dct:title "All public toilets" ;
     spin:query ldh:SelectChildren ;
     ac:mode ac:MapMode .
diff --git a/demo/copenhagen/public-toilets/public-toilets.rq b/demo/copenhagen/public-toilets/public-toilets.rq
index e9cfb74d..95a23f30 100644
--- a/demo/copenhagen/public-toilets/public-toilets.rq
+++ b/demo/copenhagen/public-toilets/public-toilets.rq
@@ -1,11 +1,10 @@
-PREFIX ns:         <https://copenhagen.demo.linkeddatahub.com/ns#>
 PREFIX foaf:       <http://xmlns.com/foaf/0.1/>
 PREFIX dct:        <http://purl.org/dc/terms/>
 PREFIX dbo:        <http://dbpedia.org/ontology/> 
 PREFIX schema:     <https://schema.org/> 
 PREFIX geo:        <http://www.w3.org/2003/01/geo/wgs84_pos#> 
 PREFIX xsd:        <http://www.w3.org/2001/XMLSchema#> 
-PREFIX dh:         <https://www.w3.org/ns/ldt/document-hierarchy#>
+PREFIX dh:         <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#>
 PREFIX sioc:       <http://rdfs.org/sioc/ns#>
 
 CONSTRUCT
@@ -18,7 +17,7 @@ CONSTRUCT
             dct:title ?name ;
             foaf:primaryTopic ?toilet .
 
-        ?toilet a ns:PublicToilet ;
+        ?toilet a ?type ;
             geo:lat ?lat ;
             geo:long ?long ;
             schema:streetAddress ?address ;
@@ -48,6 +47,7 @@ WHERE
     OPTIONAL { ?toilet_row <#opening_hours> ?openingHours }
 
     BIND(uri(concat(str($base), "public-toilets/")) AS ?container)
+    BIND(uri(concat(str($base), "ns#PublicToilet")) AS ?type)
     BIND(uri(concat(str(?container), encode_for_uri(?id), "/")) AS ?item)
     BIND(uri(concat(str(?item), "#this")) AS ?toilet)
     BIND(xsd:float(?lat_string) AS ?lat)
diff --git a/demo/copenhagen/root.ttl b/demo/copenhagen/root.ttl
index 775f2e5b..0b924510 100644
--- a/demo/copenhagen/root.ttl
+++ b/demo/copenhagen/root.ttl
@@ -3,7 +3,7 @@
 @prefix ac:     <https://w3id.org/atomgraph/client#> .
 @prefix rdf:	<http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
 @prefix xsd:	<http://www.w3.org/2001/XMLSchema#> .
-@prefix dh:	<https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:	<https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:	<http://purl.org/dc/terms/> .
 @prefix sioc:	<http://rdfs.org/sioc/ns#> .
 @prefix sd:     <http://www.w3.org/ns/sparql-service-description#> .
@@ -25,21 +25,45 @@
 
 <#page-header> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-        <div class="page-header">
+        <div class="ldh-section">
             <h2>Copenhagen</h2>
-            <p class="lead">Geospatial and other open data about the city of Copenhagen</p>
+            <p>Geospatial and other open data about the city of Copenhagen</p>
         </div>
-        <p>Features include CSV data <a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/imports/csv/" target="_blank">imports</a>, SPARQL-based <a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/data-model/resources/charts/" target="_blank">charts</a>, faceted search and related results (parallax navigation) as well as
-            rich documents composed of structured content backed by RDF Knowledge Graph data.</p>
-        <p>This application was created on <a href="https://atomgraph.github.io/LinkedDataHub/" target="_blank">LinkedDataHub</a> using the low code paradigm: no programming was required, only scripts that
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="imports-pane" aria-selected="true" class="ac-tab is-on" id="imports-tab" role="tab" type="button"><span class="ac-tab-lbl">Imports</span></button>
+                <button aria-controls="charts-pane" aria-selected="false" class="ac-tab" id="charts-tab" role="tab" type="button"><span class="ac-tab-lbl">Charts</span></button>
+                <button aria-controls="faceted-search-pane" aria-selected="false" class="ac-tab" id="faceted-search-tab" role="tab" type="button"><span class="ac-tab-lbl">Faceted search</span></button>
+                <button aria-controls="parallax-pane" aria-selected="false" class="ac-tab" id="parallax-tab" role="tab" type="button"><span class="ac-tab-lbl">Parallax</span></button>
+                <button aria-controls="rich-content-pane" aria-selected="false" class="ac-tab" id="rich-content-tab" role="tab" type="button"><span class="ac-tab-lbl">Rich content</span></button>
+            </div>
+            <div aria-labelledby="imports-tab" class="ac-tabpanel" id="imports-pane" role="tabpanel">
+                <p>Every dataset here arrived as an open CSV file from the city's data portal, lifted to RDF by LinkedDataHub's CSV <a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/imports/csv/" target="_blank">imports</a> — one mapping query per facility type.</p>
+            </div>
+            <div aria-labelledby="charts-tab" class="ac-tabpanel" hidden="hidden" id="charts-pane" role="tabpanel">
+                <p>SPARQL queries drive live <a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/data-model/resources/charts/" target="_blank">charts</a> — the facilities-by-type breakdown below and the largest <a href="parking-facilities/">parking facilities</a> ranking are both recomputed from the graph on each request.</p>
+            </div>
+            <div aria-labelledby="faceted-search-tab" class="ac-tabpanel" hidden="hidden" id="faceted-search-pane" role="tabpanel">
+                <p>Container listings offer faceted search over the facilities they hold — filter <a href="schools/">schools</a>, <a href="playgrounds/">playgrounds</a> or <a href="libraries/">libraries</a> by their properties without writing a query.</p>
+            </div>
+            <div aria-labelledby="parallax-tab" class="ac-tabpanel" hidden="hidden" id="parallax-pane" role="tabpanel">
+                <p>Following a facility's links walks the Knowledge Graph — related results surface as you navigate, a style known as parallax navigation.</p>
+            </div>
+            <div aria-labelledby="rich-content-tab" class="ac-tabpanel" hidden="hidden" id="rich-content-pane" role="tabpanel">
+                <p>Documents like this one compose prose, charts and maps as structured content blocks backed by the graph — the map of <a href="bicycle-parkings/">bicycle parkings</a> is a block like any other.</p>
+            </div>
+        </div>
+        <p>This dataspace was created on <a href="https://atomgraph.github.io/LinkedDataHub/" target="_blank">LinkedDataHub</a> using the low code paradigm: no programming was required, only scripts that
             invoke LinkedDataHub's CLI commands.</p>
     </div>"""^^rdf:XMLLiteral .
 
 <#city-intro> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-        <h3>City infrastructure overview</h3>
-        <p>Explore Copenhagen's public facilities, infrastructure, and services through interactive maps and data visualizations.
-           This dataset includes libraries, schools, parking facilities, sports centers, playgrounds, and more.</p>
+        <div class="ldh-section">
+            <h2>What the city publishes</h2>
+            <p>Nine facility types from Copenhagen's open data, imported from CSV and given coordinates, so every
+               one of them lands on a map. The chart below counts them by type; the containers hold the records.</p>
+        </div>
     </div>"""^^rdf:XMLLiteral .
 
 <#facilities-overview-block> a ldh:Object ;
@@ -65,11 +89,13 @@ PREFIX owl: <http://www.w3.org/2002/07/owl#>
 
 SELECT ?typeLabel (COUNT(?facility) AS ?count)
 WHERE {
+    # relative to the <ns> endpoint this query runs on, so the app installs under any base URI:
+    # the endpoint resolves <ns#> to the namespace and <sparql> to the dataspace's own data
     ?type a owl:Class ;
         rdfs:label ?typeLabel ;
-        rdfs:isDefinedBy <https://copenhagen.demo.linkeddatahub.com/ns#>
+        rdfs:isDefinedBy <ns#>
 
-    SERVICE <https://copenhagen.demo.linkeddatahub.com/sparql>
+    SERVICE <sparql>
     {
         SELECT DISTINCT ?facility ?type WHERE {
             GRAPH ?graph {
diff --git a/demo/copenhagen/schools.ttl b/demo/copenhagen/schools.ttl
index 11b36f0f..6e5fc996 100644
--- a/demo/copenhagen/schools.ttl
+++ b/demo/copenhagen/schools.ttl
@@ -1,4 +1,4 @@
-@prefix dh:   <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:   <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix ldh:  <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix dct:  <http://purl.org/dc/terms/> .
 @prefix spin: <http://spinrdf.org/spin#> .
@@ -8,7 +8,18 @@
 # Main container document
 <> a dh:Container ;
     dct:title "Schools" ;
-    rdf:_1 <#select-children> .
+    rdf:_1 <#schools-intro> ;
+    rdf:_2 <#select-children> .
+
+# Intro XHTML
+<#schools-intro> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+        <div class="ldh-section">
+            <h2>The school map</h2>
+            <p>57 schools with their district, postal address and the city's page for each. District is the unit
+               the municipality plans by, so it is what groups them.</p>
+        </div>
+    </div>"""^^rdf:XMLLiteral .
 
 # Object block
 <#select-children> a ldh:Object ;
@@ -16,5 +27,6 @@
 
 # View block with MapMode
 <#select-children-view> a ldh:View ;
+    dct:title "All schools" ;
     spin:query ldh:SelectChildren ;
     ac:mode ac:MapMode .
diff --git a/demo/copenhagen/schools/schools.rq b/demo/copenhagen/schools/schools.rq
index 22600069..51f8d798 100644
--- a/demo/copenhagen/schools/schools.rq
+++ b/demo/copenhagen/schools/schools.rq
@@ -1,11 +1,10 @@
-PREFIX ns:         <https://copenhagen.demo.linkeddatahub.com/ns#>
 PREFIX foaf:       <http://xmlns.com/foaf/0.1/>
 PREFIX dct:        <http://purl.org/dc/terms/>
 PREFIX dbo:        <http://dbpedia.org/ontology/> 
 PREFIX schema:     <https://schema.org/> 
 PREFIX geo:        <http://www.w3.org/2003/01/geo/wgs84_pos#> 
 PREFIX xsd:        <http://www.w3.org/2001/XMLSchema#> 
-PREFIX dh:         <https://www.w3.org/ns/ldt/document-hierarchy#>
+PREFIX dh:         <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#>
 PREFIX sioc:       <http://rdfs.org/sioc/ns#>
 
 CONSTRUCT
@@ -18,7 +17,7 @@ CONSTRUCT
             dct:title ?name ;
             foaf:primaryTopic ?school .
 
-        ?school a ns:School ;
+        ?school a ?type ;
             geo:lat ?lat ;
             geo:long ?long ;
             dct:title ?name ;
@@ -50,6 +49,7 @@ WHERE
     }
 
     BIND (uri(concat(str($base), "schools/")) AS ?container)
+    BIND(uri(concat(str($base), "ns#School")) AS ?type)
     BIND(uri(concat(str(?container), encode_for_uri(?id), "/")) AS ?item)
     BIND(uri(concat(str(?item), "#this")) AS ?school)
     BIND(xsd:float(?lat_string) AS ?lat)
diff --git a/demo/copenhagen/screenshot.png b/demo/copenhagen/screenshot.png
index 89b954e0..758d5db1 100644
Binary files a/demo/copenhagen/screenshot.png and b/demo/copenhagen/screenshot.png differ
diff --git a/demo/copenhagen/sports-centers.ttl b/demo/copenhagen/sports-centers.ttl
index be87d7dc..4ad720e6 100644
--- a/demo/copenhagen/sports-centers.ttl
+++ b/demo/copenhagen/sports-centers.ttl
@@ -1,4 +1,4 @@
-@prefix dh:   <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:   <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix ldh:  <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix dct:  <http://purl.org/dc/terms/> .
 @prefix spin: <http://spinrdf.org/spin#> .
@@ -8,7 +8,18 @@
 # Main container document
 <> a dh:Container ;
     dct:title "Sport centers" ;
-    rdf:_1 <#select-children> .
+    rdf:_1 <#sports-intro> ;
+    rdf:_2 <#select-children> .
+
+# Intro XHTML
+<#sports-intro> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+        <div class="ldh-section">
+            <h2>Sport and recreation</h2>
+            <p>31 sports centres with their address, contact address and own page. The map is the index; the link
+               is where the opening times live.</p>
+        </div>
+    </div>"""^^rdf:XMLLiteral .
 
 # Object block
 <#select-children> a ldh:Object ;
@@ -16,5 +27,6 @@
 
 # View block with MapMode
 <#select-children-view> a ldh:View ;
+    dct:title "All sports centers" ;
     spin:query ldh:SelectChildren ;
     ac:mode ac:MapMode .
diff --git a/demo/copenhagen/sports-centers/sports-centers.rq b/demo/copenhagen/sports-centers/sports-centers.rq
index ba951241..207d099f 100644
--- a/demo/copenhagen/sports-centers/sports-centers.rq
+++ b/demo/copenhagen/sports-centers/sports-centers.rq
@@ -1,10 +1,9 @@
-PREFIX ns:         <https://copenhagen.demo.linkeddatahub.com/ns#>
 PREFIX foaf:       <http://xmlns.com/foaf/0.1/>
 PREFIX dct:        <http://purl.org/dc/terms/>
 PREFIX schema:     <https://schema.org/> 
 PREFIX geo:        <http://www.w3.org/2003/01/geo/wgs84_pos#> 
 PREFIX xsd:        <http://www.w3.org/2001/XMLSchema#> 
-PREFIX dh:         <https://www.w3.org/ns/ldt/document-hierarchy#>
+PREFIX dh:         <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#>
 PREFIX sioc:       <http://rdfs.org/sioc/ns#>
 
 CONSTRUCT
@@ -17,7 +16,7 @@ CONSTRUCT
             dct:title ?name ;
             foaf:primaryTopic ?sportCenter .
 
-        ?sportCenter a ns:SportsCenter ;
+        ?sportCenter a ?type ;
             geo:lat ?lat ;
             geo:long ?long ;
             dct:title ?name ;
@@ -47,6 +46,7 @@ WHERE
     }
 
     BIND(uri(concat(str($base), "sports-centers/")) AS ?container)
+    BIND(uri(concat(str($base), "ns#SportsCenter")) AS ?type)
     BIND(uri(concat(str(?container), encode_for_uri(?id), "/")) AS ?item)
     BIND(uri(concat(str(?item), "#this")) AS ?sportCenter)
     BIND(xsd:float(?lat_string) AS ?lat)
diff --git a/demo/copenhagen/update-folder.sh b/demo/copenhagen/update-folder.sh
deleted file mode 100755
index 9e08551f..00000000
--- a/demo/copenhagen/update-folder.sh
+++ /dev/null
@@ -1,88 +0,0 @@
-#!/bin/bash
-
-if [ "$#" -ne 5 ] && [ "$#" -ne 6 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password $pwd $abs_folder [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../ssl/owner/cert.pem Password /folder /folder/ [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file="$2"
-cert_password="$3"
-pwd="$4"
-folder="$5"
-
-if [ -n "$6" ]; then
-    proxy="$6"
-else
-    proxy="$base"
-fi
-
-ldhignore_file="$folder/.ldhignore"
-
-is_ldhignored() {
-    local name
-    name="$(basename "$1")"
-    [[ -f "$ldhignore_file" ]] || return 1
-    while IFS= read -r pattern || [[ -n "$pattern" ]]; do
-        [[ -z "$pattern" || "$pattern" == \#* ]] && continue
-        pattern="${pattern%/}"
-        [[ "$name" == $pattern ]] && return 0
-    done < "$ldhignore_file"
-    return 1
-}
-
-echo "Processing folder: $folder"  # Debug output
-
-for ttl_file in "$folder"/*.ttl; do
-  if [[ -f "$ttl_file" ]]; then
-    if git check-ignore -q "$ttl_file" 2>/dev/null || is_ldhignored "$ttl_file"; then
-      printf "Skipping %s\n" "$ttl_file"
-      continue
-    fi
-    echo "Found .ttl file: $ttl_file"  # Debug output
-    path="${ttl_file%.*}"   # strip extension
-    path="${path#*$pwd/}"   # strip leading $pwd/
-    path="${path}/"         # add trailing slash
-    printf "\n### Updating %s\n" "${base}${path}"
-    cat "$ttl_file" | turtle --base="${base}${path}" | put.sh \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      -t "application/n-triples" \
-      "${base}${path}"
-  fi
-done
-
-for file in "$folder"/*; do
-  if [[ -f "$file" ]] && [[ "$file" != *.ttl ]] && [[ "$file" != *.sh ]]; then
-    if git check-ignore -q "$file" 2>/dev/null || is_ldhignored "$file"; then
-      printf "Skipping %s\n" "$file"
-      continue
-    fi
-    stripped="${folder#$pwd/}"
-    if [[ "$stripped" == "$folder" ]]; then
-      container_path=""
-    else
-      container_path="${stripped}/"
-    fi
-    echo "Uploading file: $file to ${base}${container_path}"  # Debug output
-    add-file.sh \
-      -b "$base" \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      --title "$(basename "$file")" \
-      --file "$file" \
-      "${base}${container_path}"
-  fi
-done
-
-while IFS= read -r subdir; do
-  if git check-ignore -q "$subdir" 2>/dev/null || is_ldhignored "$subdir"; then
-    printf "Skipping %s\n" "$subdir"
-    continue
-  fi
-  ./update-folder.sh "$base" "$cert_pem_file" "$cert_password" "$pwd" "$subdir" "$proxy"
-done < <(find "$folder" -mindepth 1 -maxdepth 1 -type d -not -name '.*' -not -name 'target')
diff --git a/demo/northwind-traders/.ldhignore b/demo/northwind-traders/.ldhignore
index 8453acfa..9e50106d 100644
--- a/demo/northwind-traders/.ldhignore
+++ b/demo/northwind-traders/.ldhignore
@@ -1,5 +1,7 @@
 admin/
 Makefile
 imports.csv
-root.ttl
 screenshot.gif
+unesco-mappings.ttl
+*.csv
+*.sh
diff --git a/demo/northwind-traders/Makefile b/demo/northwind-traders/Makefile
index 046534ca..39816de6 100644
--- a/demo/northwind-traders/Makefile
+++ b/demo/northwind-traders/Makefile
@@ -1,23 +1,3 @@
-SHELL := /bin/bash
+CERT_PATH_DEFAULT = ../../../LinkedDataHub/ssl/owner/keystore.p12
 
-BASE_URL_DEFAULT=https://localhost:4443/
-CERT_PATH_DEFAULT=../../../LinkedDataHub/ssl/owner/cert.pem
-PROXY_URL_DEFAULT=https://localhost:5443/
-
-install:
-	@read -p "Enter Base URL [$(BASE_URL_DEFAULT)]: " BASE_URL; \
-	BASE_URL=$${BASE_URL:-$(BASE_URL_DEFAULT)}; \
-	read -p "Enter Certificate Path [$(CERT_PATH_DEFAULT)]: " CERT_PATH; \
-	CERT_PATH=$${CERT_PATH:-$(CERT_PATH_DEFAULT)}; \
-	read -s -p "Enter Certificate Password (required): " PASSWORD; \
-	echo ""; \
-	if [ -z "$${PASSWORD}" ]; then \
-		echo "Password cannot be empty. Aborting."; \
-		exit 1; \
-	fi; \
-	read -p "Enter Proxy URL (optional) [$(PROXY_URL_DEFAULT)]: " PROXY_URL; \
-	if [ -n "$${PROXY_URL}" ]; then \
-		./install.sh "$${BASE_URL}" "$${CERT_PATH}" "$${PASSWORD}" "$${PROXY_URL}"; \
-	else \
-		./install.sh "$${BASE_URL}" "$${CERT_PATH}" "$${PASSWORD}"; \
-	fi
+include ../../lib/install.mk
diff --git a/demo/northwind-traders/admin/model/import-ns.sh b/demo/northwind-traders/admin/model/import-ns.sh
deleted file mode 100755
index e90c29d8..00000000
--- a/demo/northwind-traders/admin/model/import-ns.sh
+++ /dev/null
@@ -1,54 +0,0 @@
-#!/usr/bin/env bash
-
-if [ "$#" -ne 3 ] && [ "$#" -ne 4 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/demo/northwind-traders/ ../../../../../ssl/owner/cert.pem Password [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file=$(realpath "$2")
-cert_password="$3"
-
-if [ -n "$4" ]; then
-    proxy="$4"
-else
-    proxy="$base"
-fi
-
-admin_uri() {
-    local uri="$1"
-    echo "$uri" | sed 's|://|://admin.|'
-}
-
-admin_base=$(admin_uri "$base")
-admin_proxy=$(admin_uri "$proxy")
-
-# clear the old properties of the namespace ontology
-
-{ echo "BASE <${admin_base}ontologies/namespace/>"; cat patch-ontology.ru; } | patch.sh \
-    -f "$cert_pem_file" \
-    -p "$cert_password" \
-    --proxy "$admin_proxy" \
-    "${admin_base}ontologies/namespace/"
-
-# append the ns.ttl file to the namespace ontology
-# prepend @base directive using end-user base URI so that the : prefix
-# (defined as <ns#> in ns.ttl) resolves to the end-user namespace
-
-{ echo "@base <${base}ns> ."; cat ns.ttl; } | post.sh \
-    -f "$cert_pem_file" \
-    -p "$cert_password" \
-    --proxy "$admin_proxy" \
-    --content-type "text/turtle" \
-    "${admin_base}ontologies/namespace/"
-
-# clear the namespace ontology from memory
-
-clear-ontology.sh \
-  -f "$cert_pem_file" \
-  -p "$cert_password" \
-  -b "$admin_base" \
-  --proxy "$admin_proxy" \
-  --ontology "${base}ns#"
diff --git a/demo/northwind-traders/admin/model/ns.ttl b/demo/northwind-traders/admin/model/ns.ttl
index c46c7223..1cb72a95 100644
--- a/demo/northwind-traders/admin/model/ns.ttl
+++ b/demo/northwind-traders/admin/model/ns.ttl
@@ -1,5 +1,6 @@
 @prefix :	    <#> .
 @prefix ldh:	<https://w3id.org/atomgraph/linkeddatahub#> .
+@prefix ac:	    <https://w3id.org/atomgraph/client#> .
 @prefix rdfs:	<http://www.w3.org/2000/01/rdf-schema#> .
 @prefix owl:    <http://www.w3.org/2002/07/owl#> .
 @prefix sp:	    <http://spinrdf.org/sp#> .
@@ -20,7 +21,7 @@ schema:Order a owl:Class ;
     rdfs:isDefinedBy : .
 
 schema:City a owl:Class ;
-    rdfs:label "City" ;
+    rdfs:label "Territory" ;
     rdfs:isDefinedBy : .
 
 schema:PostalAddress a owl:Class ;
@@ -28,11 +29,11 @@ schema:PostalAddress a owl:Class ;
     rdfs:isDefinedBy : .
 
 schema:ProductGroup a owl:Class ;
-    rdfs:label "Product group" ;
+    rdfs:label "Category" ;
     rdfs:isDefinedBy : .
 
 schema:Corporation a owl:Class ;
-    rdfs:label "Corporation" ;
+    rdfs:label "Company" ;
     rdfs:isDefinedBy : .
 
 schema:ContactPoint a owl:Class ;
@@ -40,7 +41,33 @@ schema:ContactPoint a owl:Class ;
     rdfs:isDefinedBy : .
 
 schema:ParcelDelivery a owl:Class ;
-    rdfs:label "Parcel delivery" ;
+    rdfs:label "Delivery" ;
+    rdfs:isDefinedBy : .
+
+schema:DeliveryEvent a owl:Class ;
+    rdfs:label "Shipment" ;
+    rdfs:isDefinedBy : .
+
+schema:Offer a owl:Class ;
+    rdfs:label "Offer" ;
+    rdfs:isDefinedBy : .
+
+schema:PriceSpecification a owl:Class ;
+    rdfs:label "Price specification" ;
+    rdfs:isDefinedBy : .
+
+schema:DeliveryChargeSpecification a owl:Class ;
+    rdfs:label "Delivery charge" ;
+    rdfs:subClassOf schema:PriceSpecification ;
+    rdfs:isDefinedBy : .
+
+schema:UnitPriceSpecification a owl:Class ;
+    rdfs:label "Unit price" ;
+    rdfs:subClassOf schema:PriceSpecification ;
+    rdfs:isDefinedBy : .
+
+schema:DeliveryMethod a owl:Class ;
+    rdfs:label "Delivery method" ;
     rdfs:isDefinedBy : .
 
 schema:OrderItem a owl:Class ;
@@ -52,19 +79,375 @@ schema:Product a owl:Class ;
     rdfs:isDefinedBy : .
 
 schema:Place a owl:Class ;
-    rdfs:label "Place" ;
+    rdfs:label "Region" ;
+    rdfs:isDefinedBy : .
+
+# constructors and constraints
+
+schema:Product spin:constructor :ProductConstructor ;
+    spin:constraint :MissingName .
+
+:ProductConstructor a ldh:Constructor ;
+    rdfs:label "Product constructor" ;
+    dct:title "Product constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this dct:title [ a xsd:string ] ;
+                schema:name [ a xsd:string ] ;
+                schema:identifier [ a xsd:string ] ;
+                schema:description [ a xsd:string ] ;
+                schema:category [ a schema:ProductGroup ] ;
+                schema:provider [ a schema:Corporation ] ;
+                schema:offers [ a schema:Offer ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:City spin:constructor :CityConstructor .
+
+:CityConstructor a ldh:Constructor ;
+    rdfs:label "Territory constructor" ;
+    dct:title "Territory constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX geo:     <http://www.w3.org/2003/01/geo/wgs84_pos#>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this dct:title [ a xsd:string ] ;
+                schema:name [ a xsd:string ] ;
+                schema:identifier [ a xsd:string ] ;
+                geo:lat [ a xsd:float ] ;
+                geo:long [ a xsd:float ] ;
+                schema:containedInPlace [ a schema:Place ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:Person spin:constructor :PersonConstructor .
+
+:PersonConstructor a ldh:Constructor ;
+    rdfs:label "Person constructor" ;
+    dct:title "Person constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX foaf:    <http://xmlns.com/foaf/0.1/>
+        PREFIX geo:     <http://www.w3.org/2003/01/geo/wgs84_pos#>
+        PREFIX nfo:     <http://www.semanticdesktop.org/ontologies/2007/03/22/nfo#>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                schema:identifier [ a xsd:string ] ;
+                schema:name [ a xsd:string ] ;
+                schema:givenName [ a xsd:string ] ;
+                schema:familyName [ a xsd:string ] ;
+                schema:honorificPrefix [ a xsd:string ] ;
+                schema:jobTitle [ a xsd:string ] ;
+                schema:birthDate [ a xsd:date ] ;
+                schema:telephone [ a xsd:string ] ;
+                schema:faxNumber [ a xsd:string ] ;
+                schema:description [ a xsd:string ] ;
+                foaf:img [ a nfo:FileDataObject ] ;
+                geo:lat [ a xsd:float ] ;
+                geo:long [ a xsd:float ] ;
+                schema:address [ a schema:PostalAddress ] ;
+                schema:sponsor [ a schema:Person ] ;
+                schema:areaServed [ a schema:City ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:Corporation spin:constructor :CorporationConstructor .
+
+:CorporationConstructor a ldh:Constructor ;
+    rdfs:label "Company constructor" ;
+    dct:title "Company constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                schema:legalName [ a xsd:string ] ;
+                schema:identifier [ a xsd:string ] ;
+                schema:telephone [ a xsd:string ] ;
+                schema:contactPoint [ a schema:ContactPoint ] ;
+                schema:employee [ a schema:Person ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:ContactPoint spin:constructor :ContactPointConstructor .
+
+:ContactPointConstructor a ldh:Constructor ;
+    rdfs:label "Contact point constructor" ;
+    dct:title "Contact point constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                schema:telephone [ a xsd:string ] ;
+                schema:faxNumber [ a xsd:string ] ;
+                schema:url [ a xsd:string ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:PostalAddress spin:constructor :PostalAddressConstructor .
+
+:PostalAddressConstructor a ldh:Constructor ;
+    rdfs:label "Postal address constructor" ;
+    dct:title "Postal address constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                schema:streetAddress [ a xsd:string ] ;
+                schema:addressLocality [ a xsd:string ] ;
+                schema:addressRegion [ a xsd:string ] ;
+                schema:postalCode [ a xsd:string ] ;
+                schema:addressCountry [ a xsd:string ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:ProductGroup spin:constructor :ProductGroupConstructor .
+
+:ProductGroupConstructor a ldh:Constructor ;
+    rdfs:label "Category constructor" ;
+    dct:title "Category constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX foaf:    <http://xmlns.com/foaf/0.1/>
+        PREFIX nfo:     <http://www.semanticdesktop.org/ontologies/2007/03/22/nfo#>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                schema:name [ a xsd:string ] ;
+                schema:description [ a xsd:string ] ;
+                schema:identifier [ a xsd:string ] ;
+                foaf:depiction [ a nfo:FileDataObject ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:Place spin:constructor :PlaceConstructor .
+
+:PlaceConstructor a ldh:Constructor ;
+    rdfs:label "Region constructor" ;
+    dct:title "Region constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                schema:name [ a xsd:string ] ;
+                schema:identifier [ a xsd:string ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:Order spin:constructor :OrderConstructor .
+
+:OrderConstructor a ldh:Constructor ;
+    rdfs:label "Order constructor" ;
+    dct:title "Order constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                schema:identifier [ a xsd:string ] ;
+                schema:orderDate [ a xsd:date ] ;
+                schema:orderStatus schema:OrderProcessing ;
+                schema:customer [ a schema:Corporation ] ;
+                schema:broker [ a schema:Person ] ;
+                schema:orderedItem [ a schema:OrderItem ] ;
+                schema:orderDelivery [ a schema:ParcelDelivery ] ;
+                schema:acceptedOffer [ a schema:Offer ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:OrderItem spin:constructor :OrderItemConstructor .
+
+:OrderItemConstructor a ldh:Constructor ;
+    rdfs:label "Order item constructor" ;
+    dct:title "Order item constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                schema:orderedItem [ a schema:Product ] ;
+                schema:itemOffered [ a schema:Product ] ;
+                schema:orderQuantity [ a xsd:integer ] ;
+                schema:price [ a xsd:float ] ;
+                schema:priceCurrency [ a xsd:string ] ;
+                schema:priceSpecification [ a schema:UnitPriceSpecification ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:ParcelDelivery spin:constructor :ParcelDeliveryConstructor .
+
+:ParcelDeliveryConstructor a ldh:Constructor ;
+    rdfs:label "Delivery constructor" ;
+    dct:title "Delivery constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                schema:partOfOrder [ a schema:Order ] ;
+                schema:provider [ a schema:Corporation ] ;
+                schema:deliveryAddress [ a schema:PostalAddress ] ;
+                schema:expectedArrivalUntil [ a xsd:date ] ;
+                schema:deliveryStatus [ a schema:DeliveryEvent ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:DeliveryEvent spin:constructor :DeliveryEventConstructor .
+
+:DeliveryEventConstructor a ldh:Constructor ;
+    rdfs:label "Shipment constructor" ;
+    dct:title "Shipment constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                schema:startDate [ a xsd:date ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:Offer spin:constructor :OfferConstructor .
+
+:OfferConstructor a ldh:Constructor ;
+    rdfs:label "Offer constructor" ;
+    dct:title "Offer constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                schema:itemOffered [ a schema:Product ] ;
+                schema:price [ a xsd:float ] ;
+                schema:priceCurrency [ a xsd:string ] ;
+                schema:priceSpecification [ a schema:PriceSpecification ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:PriceSpecification spin:constructor :PriceSpecificationConstructor .
+
+:PriceSpecificationConstructor a ldh:Constructor ;
+    rdfs:label "Price specification constructor" ;
+    dct:title "Price specification constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                schema:price [ a xsd:float ] ;
+                schema:priceCurrency [ a xsd:string ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:UnitPriceSpecification spin:constructor :UnitPriceSpecificationConstructor .
+
+:UnitPriceSpecificationConstructor a ldh:Constructor ;
+    rdfs:label "Unit price constructor" ;
+    dct:title "Unit price constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                schema:price [ a xsd:float ] ;
+                schema:priceCurrency [ a xsd:string ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+schema:DeliveryChargeSpecification spin:constructor :DeliveryChargeSpecificationConstructor .
+
+:DeliveryChargeSpecificationConstructor a ldh:Constructor ;
+    rdfs:label "Delivery charge constructor" ;
+    dct:title "Delivery charge constructor" ;
+    sp:text """
+        PREFIX schema:  <https://schema.org/>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this
+                dct:title [ a xsd:string ] ;
+                schema:price [ a xsd:float ] ;
+                schema:priceCurrency [ a xsd:string ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+:MissingName a ldh:MissingPropertyValue ;
+    rdfs:label "Missing schema:name" ;
+    sp:arg1 schema:name ;
     rdfs:isDefinedBy : .
 
 # properties
 
 schema:broker a owl:ObjectProperty ;
-    rdfs:label "Broker";
+    rdfs:label "Sales rep";
     rdfs:domain schema:Order ;
     rdfs:range schema:Person ;
     rdfs:isDefinedBy : .
 
 schema:areaServed a owl:ObjectProperty ;
-    rdfs:label "Area served";
+    rdfs:label "Territory";
     rdfs:domain schema:Person ;
     rdfs:range schema:City ;
     rdfs:isDefinedBy : .
@@ -94,11 +477,58 @@ schema:customer a owl:ObjectProperty ;
     rdfs:isDefinedBy : .
 
 schema:orderDelivery a owl:ObjectProperty ;
-    rdfs:label "Order delivery" ;
+    rdfs:label "Delivery" ;
     rdfs:domain schema:Order ;
     rdfs:range schema:ParcelDelivery ;
     rdfs:isDefinedBy : .
 
+schema:acceptedOffer a owl:ObjectProperty ;
+    rdfs:label "Accepted offer" ;
+    rdfs:domain schema:Order ;
+    rdfs:range schema:Offer ;
+    rdfs:isDefinedBy : .
+
+schema:offers a owl:ObjectProperty ;
+    rdfs:label "Offer" ;
+    rdfs:domain schema:Product ;
+    rdfs:range schema:Offer ;
+    rdfs:isDefinedBy : .
+
+schema:priceType a owl:ObjectProperty ;
+    rdfs:label "Price type" ;
+    rdfs:domain schema:UnitPriceSpecification ;
+    rdfs:isDefinedBy : .
+
+schema:itemOffered a owl:ObjectProperty ;
+    rdfs:label "Product" ;
+    rdfs:domain schema:Offer ;
+    rdfs:range schema:Product ;
+    rdfs:isDefinedBy : .
+
+schema:priceSpecification a owl:ObjectProperty ;
+    rdfs:label "Price specification" ;
+    rdfs:domain schema:Offer ;
+    rdfs:range schema:PriceSpecification ;
+    rdfs:isDefinedBy : .
+
+schema:appliesToDeliveryMethod a owl:ObjectProperty ;
+    rdfs:label "Delivery method" ;
+    rdfs:domain schema:DeliveryChargeSpecification ;
+    rdfs:range schema:DeliveryMethod ;
+    rdfs:isDefinedBy : .
+
+schema:deliveryStatus a owl:ObjectProperty ;
+    rdfs:label "Shipment" ;
+    rdfs:domain schema:ParcelDelivery ;
+    rdfs:range schema:DeliveryEvent ;
+    rdfs:isDefinedBy : .
+
+schema:partOfOrder a owl:ObjectProperty ;
+    rdfs:label "Order" ;
+    rdfs:domain schema:ParcelDelivery ;
+    rdfs:range schema:Order ;
+    rdfs:isDefinedBy : .
+
 schema:deliveryAddress a owl:ObjectProperty ;
     rdfs:label "Delivery address" ;
     rdfs:domain schema:ParcelDelivery ;
@@ -117,20 +547,24 @@ schema:category a owl:ObjectProperty ;
     rdfs:isDefinedBy : .
 
 schema:containedInPlace a owl:ObjectProperty ;
-    rdfs:label "Contained in place" ;
+    rdfs:label "Region" ;
     rdfs:domain schema:City ;
     rdfs:range schema:Place ;
     rdfs:isDefinedBy : .
 
 schema:sponsor a owl:ObjectProperty ;
-    rdfs:label "Sponsor" ;
+    rdfs:label "Reports to" ;
     rdfs:domain schema:Person ;
     rdfs:range schema:Person ;
     rdfs:isDefinedBy : .
 
 schema:orderedItem a owl:ObjectProperty ;
     rdfs:label "Ordered item" ;
-    rdfs:range schema:Product ;
+    rdfs:isDefinedBy : .
+
+schema:orderStatus a owl:ObjectProperty ;
+    rdfs:label "Order status" ;
+    rdfs:domain schema:Order ;
     rdfs:isDefinedBy : .
 
 schema:name a owl:DatatypeProperty ;
@@ -146,7 +580,7 @@ schema:description a owl:DatatypeProperty ;
     rdfs:isDefinedBy : .
 
 schema:legalName a owl:DatatypeProperty ;
-    rdfs:label "Legal name" ;
+    rdfs:label "Company name" ;
     rdfs:domain schema:Corporation ;
     rdfs:isDefinedBy : .
 
@@ -209,26 +643,32 @@ schema:birthDate a owl:DatatypeProperty ;
     rdfs:isDefinedBy : .
 
 schema:orderQuantity a owl:DatatypeProperty ;
-    rdfs:label "Order quantity" ;
-    rdfs:domain schema:OrderItem ;
-    rdfs:isDefinedBy : .
-
-schema:discount a owl:DatatypeProperty ;
-    rdfs:label "Discount" ;
+    rdfs:label "Quantity" ;
     rdfs:domain schema:OrderItem ;
     rdfs:isDefinedBy : .
 
+# left without an rdfs:domain on purpose: schema:price is carried both by the order
+# lines (as schema:Offer) and by the freight charge (as schema:DeliveryChargeSpecification)
 schema:price a owl:DatatypeProperty ;
     rdfs:label "Price" ;
     rdfs:isDefinedBy : .
 
+schema:priceCurrency a owl:DatatypeProperty ;
+    rdfs:label "Currency" ;
+    rdfs:isDefinedBy : .
+
+schema:startDate a owl:DatatypeProperty ;
+    rdfs:label "Shipped" ;
+    rdfs:domain schema:DeliveryEvent ;
+    rdfs:isDefinedBy : .
+
 schema:orderDate a owl:DatatypeProperty ;
     rdfs:label "Order date" ;
     rdfs:domain schema:Order ;
     rdfs:isDefinedBy : .
 
 schema:expectedArrivalUntil a owl:DatatypeProperty ;
-    rdfs:label "Expected arrival until" ;
+    rdfs:label "Required by" ;
     rdfs:domain schema:ParcelDelivery ;
     rdfs:isDefinedBy : .
 
@@ -263,6 +703,8 @@ schema:broker ldh:inverseView :OrdersHandledByEmployee .
 :OrdersHandledByEmployee a ldh:View ;
     dct:title "Orders handled by this employee" ;
     spin:query :SelectOrdersHandledByEmployee ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
     rdfs:isDefinedBy : .
 
 :SelectOrdersHandledByEmployee a sp:Select ;
@@ -273,9 +715,12 @@ PREFIX schema: <https://schema.org/>
 SELECT DISTINCT ?order
 WHERE
   { GRAPH ?graph
-      { ?order schema:broker $about }
+      { ?order schema:broker $about ;
+               schema:orderDate ?orderDate ;
+               schema:orderStatus ?status
+      }
   }
-ORDER BY DESC(?order)
+ORDER BY DESC(?orderDate)
 """ ;
     rdfs:isDefinedBy : .
 
@@ -288,6 +733,8 @@ schema:customer ldh:inverseView :OrdersFromCustomer .
 :OrdersFromCustomer a ldh:View ;
     dct:title "Orders from this customer" ;
     spin:query :SelectOrdersFromCustomer ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
     rdfs:isDefinedBy : .
 
 :SelectOrdersFromCustomer a sp:Select ;
@@ -298,9 +745,12 @@ PREFIX schema: <https://schema.org/>
 SELECT DISTINCT ?order
 WHERE
   { GRAPH ?graph
-      { ?order schema:customer $about }
+      { ?order schema:customer $about ;
+               schema:orderDate ?orderDate ;
+               schema:orderStatus ?status
+      }
   }
-ORDER BY DESC(?order)
+ORDER BY DESC(?orderDate)
 """ ;
     rdfs:isDefinedBy : .
 
@@ -313,6 +763,8 @@ schema:provider ldh:inverseView :ProductsFromSupplier .
 :ProductsFromSupplier a ldh:View ;
     dct:title "Products supplied by this supplier" ;
     spin:query :SelectProductsFromSupplier ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
     rdfs:isDefinedBy : .
 
 :SelectProductsFromSupplier a sp:Select ;
@@ -323,12 +775,45 @@ PREFIX schema: <https://schema.org/>
 SELECT DISTINCT ?product
 WHERE
   { GRAPH ?graph
-      { ?product schema:provider $about }
+      { ?product a schema:Product ;
+                 schema:provider $about ;
+                 schema:category ?category ;
+                 schema:offers/schema:price ?price
+      }
   }
 ORDER BY ?product
 """ ;
     rdfs:isDefinedBy : .
 
+# orders shipped by this shipper
+
+schema:provider ldh:inverseView :OrdersShippedByShipper .
+
+:OrdersShippedByShipper a ldh:View ;
+    dct:title "Orders shipped by this shipper" ;
+    spin:query :SelectOrdersShippedByShipper ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
+    rdfs:isDefinedBy : .
+
+:SelectOrdersShippedByShipper a sp:Select ;
+    rdfs:label "Select orders shipped by shipper" ;
+    sp:text """
+PREFIX schema: <https://schema.org/>
+
+SELECT DISTINCT ?order
+WHERE
+  { GRAPH ?graph
+      { ?order schema:orderDelivery ?delivery ;
+               schema:orderDate ?orderDate ;
+               schema:orderStatus ?status .
+        ?delivery schema:provider $about
+      }
+  }
+ORDER BY DESC(?orderDate)
+""" ;
+    rdfs:isDefinedBy : .
+
 # containedInPlace
 
 # cities in this region
@@ -338,6 +823,8 @@ schema:containedInPlace ldh:inverseView :CitiesInRegion .
 :CitiesInRegion a ldh:View ;
     dct:title "Cities in this region" ;
     spin:query :SelectCitiesInRegion ;
+    ac:mode ac:MapMode ;
+    ldh:showWhenEmpty false ;
     rdfs:isDefinedBy : .
 
 :SelectCitiesInRegion a sp:Select ;
@@ -354,8 +841,120 @@ ORDER BY ?city
 """ ;
     rdfs:isDefinedBy : .
 
+# category
+
+# products in this category
+
+schema:category ldh:inverseView :ProductsInCategory .
+
+:ProductsInCategory a ldh:View ;
+    dct:title "Products in this category" ;
+    spin:query :SelectProductsInCategory ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
+    rdfs:isDefinedBy : .
+
+:SelectProductsInCategory a sp:Select ;
+    rdfs:label "Select products in category" ;
+    sp:text """
+PREFIX schema: <https://schema.org/>
+
+SELECT DISTINCT ?product
+WHERE
+  { GRAPH ?graph
+      { ?product a schema:Product ;
+                 schema:category $about }
+  }
+ORDER BY ?product
+""" ;
+    rdfs:isDefinedBy : .
+
+# areaServed
+
+# employees serving this territory
+
+schema:areaServed ldh:inverseView :EmployeesServingTerritory .
+
+:EmployeesServingTerritory a ldh:View ;
+    dct:title "Employees serving this territory" ;
+    spin:query :SelectEmployeesServingTerritory ;
+    ac:mode ac:GridMode ;
+    ldh:showWhenEmpty false ;
+    rdfs:isDefinedBy : .
+
+:SelectEmployeesServingTerritory a sp:Select ;
+    rdfs:label "Select employees serving territory" ;
+    sp:text """
+PREFIX schema: <https://schema.org/>
+
+SELECT DISTINCT ?employee
+WHERE
+  { GRAPH ?graph
+      { ?employee a schema:Person ;
+                  schema:areaServed $about }
+  }
+ORDER BY ?employee
+""" ;
+    rdfs:isDefinedBy : .
+
+# sponsor
+
+# employees reporting to this employee
+
+schema:sponsor ldh:inverseView :DirectReports .
+
+:DirectReports a ldh:View ;
+    dct:title "Direct reports" ;
+    spin:query :SelectDirectReports ;
+    ac:mode ac:GridMode ;
+    ldh:showWhenEmpty false ;
+    rdfs:isDefinedBy : .
+
+:SelectDirectReports a sp:Select ;
+    rdfs:label "Select direct reports" ;
+    sp:text """
+PREFIX schema: <https://schema.org/>
+
+SELECT DISTINCT ?employee
+WHERE
+  { GRAPH ?graph
+      { ?employee a schema:Person ;
+                  schema:sponsor $about }
+  }
+ORDER BY ?employee
+""" ;
+    rdfs:isDefinedBy : .
+
 # orderedItem
 
+# line items of this order (forward view — the master-detail "detail gallery")
+
+schema:orderedItem ldh:view :OrderLineItems .
+
+:OrderLineItems a ldh:View ;
+    dct:title "Line items" ;
+    spin:query :SelectOrderLineItems ;
+    ac:mode ac:TableMode ;
+    rdfs:isDefinedBy : .
+
+:SelectOrderLineItems a sp:Select ;
+    rdfs:label "Select line items of order" ;
+    sp:text """
+PREFIX schema: <https://schema.org/>
+
+SELECT DISTINCT ?item
+WHERE
+  { GRAPH ?graph
+      { $about schema:orderedItem ?item .
+        ?item schema:orderedItem ?product ;
+              schema:orderQuantity ?quantity ;
+              schema:price ?lineTotal
+      }
+  }
+ORDER BY ?item
+""" ;
+    rdfs:isDefinedBy : .
+
 # orders containing this product
 
 schema:orderedItem ldh:inverseView :OrdersContainingProduct .
@@ -363,6 +962,8 @@ schema:orderedItem ldh:inverseView :OrdersContainingProduct .
 :OrdersContainingProduct a ldh:View ;
     dct:title "Orders containing this product" ;
     spin:query :SelectOrdersContainingProduct ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
     rdfs:isDefinedBy : .
 
 :SelectOrdersContainingProduct a sp:Select ;
@@ -373,10 +974,12 @@ PREFIX schema: <https://schema.org/>
 SELECT DISTINCT ?order
 WHERE
   { GRAPH ?graph
-      { ?order schema:orderedItem ?orderItem .
+      { ?order schema:orderedItem ?orderItem ;
+               schema:orderDate ?orderDate ;
+               schema:orderStatus ?status .
         ?orderItem schema:orderedItem $about
       }
   }
-ORDER BY DESC(?order)
+ORDER BY DESC(?orderDate)
 """ ;
     rdfs:isDefinedBy : .
diff --git a/demo/northwind-traders/categories.ttl b/demo/northwind-traders/categories.ttl
index 04e071d8..2422d70e 100644
--- a/demo/northwind-traders/categories.ttl
+++ b/demo/northwind-traders/categories.ttl
@@ -1,4 +1,4 @@
-  @prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+  @prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
   @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
   @prefix dct:    <http://purl.org/dc/terms/> .
   @prefix sp:     <http://spinrdf.org/sp#> .
@@ -10,21 +10,35 @@
   <> a dh:Container ;
       dct:title "Categories" ;
       rdf:_1 <#category-intro> ;
-      rdf:_2 <#category-revenue-block> ;
-      rdf:_3 <#category-distribution> ;
-      rdf:_4 <#products-per-category-block> ;
-      rdf:_5 <#select-categories> .
+      rdf:_2 <#select-categories> ;
+      rdf:_3 <#revenue-intro> ;
+      rdf:_4 <#category-revenue-block> ;
+      rdf:_5 <#category-distribution> ;
+      rdf:_6 <#products-per-category-block> .
 
   # Intro XHTML
   <#category-intro> a ldh:XHTML ;
       rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-          <h3>Category analysis</h3>
-          <p>Product categories represent different market segments with distinct characteristics and performance.
-             Analyzing category-level metrics helps identify portfolio strengths, diversification opportunities, and inventory priorities.</p>
+          <div class="ldh-section">
+              <h2>Product categories</h2>
+              <p>The segments the catalogue is organised into — beverages, condiments, produce and the rest.
+                 Open one to see the products it holds.</p>
+          </div>
+      </div>"""^^rdf:XMLLiteral .
+
+  # Revenue intro
+  <#revenue-intro> a ldh:XHTML ;
+      rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+          <div class="ldh-section">
+              <h2>Where the money is</h2>
+              <p>Each category is a market segment with its own performance. Revenue first, then the spread of
+                 products behind it.</p>
+          </div>
       </div>"""^^rdf:XMLLiteral .
 
   # Category revenue chart (wrapped in ldh:Object per ContentMode contract)
   <#category-revenue-block> a ldh:Object ;
+      dct:title "Revenue by category" ;
       rdf:value <#category-revenue> .
 
   <#category-revenue> a ldh:ResultSetChart ;
@@ -43,9 +57,7 @@ WHERE {
     GRAPH ?orderGraph {
         ?order schema:orderedItem ?orderItem .
         ?orderItem schema:orderedItem ?product ;
-                   schema:orderQuantity ?quantity ;
-                   schema:price ?price .
-        BIND(?quantity * ?price AS ?sale)
+                   schema:price ?sale .
     }
     GRAPH ?productGraph {
         ?product schema:category ?category .
@@ -60,13 +72,16 @@ ORDER BY DESC(?revenue)""" .
   # Category distribution intro
   <#category-distribution> a ldh:XHTML ;
       rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-          <h4>Product distribution</h4>
-          <p>Understanding how products are distributed across categories reveals portfolio balance and potential gaps.
-             Categories with more products may indicate core competencies or simply broader product lines.</p>
+          <div class="ldh-section">
+              <h2>Portfolio balance</h2>
+              <p>Revenue and range don't always line up. A category can earn well on few lines, or spread wide
+                 and earn little — the gap between the two charts is where the portfolio questions are.</p>
+          </div>
       </div>"""^^rdf:XMLLiteral .
 
   # Products per category chart (wrapped in ldh:Object per ContentMode contract)
   <#products-per-category-block> a ldh:Object ;
+      dct:title "Products per category" ;
       rdf:value <#products-per-category> .
 
   <#products-per-category> a ldh:ResultSetChart ;
@@ -95,10 +110,12 @@ ORDER BY DESC(?productCount)""" .
 
   # Object block (references the view)
   <#select-categories> a ldh:Object ;
+      dct:title "All categories" ;
       rdf:value <#select-categories-view> .
 
   # View block (references the query, uses GridMode)
   <#select-categories-view> a ldh:View ;
+      dct:title "All categories" ;
       spin:query <#select-categories-query> ;
       ac:mode <https://w3id.org/atomgraph/client#GridMode> .
 
diff --git a/demo/northwind-traders/categories/beverages.gif b/demo/northwind-traders/categories/beverages.gif
deleted file mode 100644
index 6e198712..00000000
Binary files a/demo/northwind-traders/categories/beverages.gif and /dev/null differ
diff --git a/demo/northwind-traders/categories/beverages.jpg b/demo/northwind-traders/categories/beverages.jpg
new file mode 100644
index 00000000..40a4818f
Binary files /dev/null and b/demo/northwind-traders/categories/beverages.jpg differ
diff --git a/demo/northwind-traders/categories/categories.csv b/demo/northwind-traders/categories/categories.csv
index 28d49c02..73470cb3 100644
--- a/demo/northwind-traders/categories/categories.csv
+++ b/demo/northwind-traders/categories/categories.csv
@@ -1,9 +1,9 @@
 categoryID,categoryName,description,pictureHash
-1,Beverages,Soft drinks coffees teas beers and ales,5e1be0328ca2c694d1de6f5b1b3d3b1ce90cb41f
-2,Condiments,Sweet and savory sauces relishes spreads and seasonings,6e5d9df213a6c46b4f75e9ba2e321436f80d8bed
-3,Confections,Desserts candies and sweet breads,c158852927adca461b57d6a1db332eaa38ff35e6
-4,Dairy Products,Cheeses,3e612531a9a160b12c3db6565a2b03c0e8617ed3
-5,Grains/Cereals,Breads crackers pasta and cereal,68ccbb7d6dbd511b9d5faf1f0d1c09c2872d8081
-6,Meat/Poultry,Prepared meats,7e12f6c6f5202018e380c58262b654b800e1b250
-7,Produce,Dried fruit and bean curd,1474abcca6dc8c27c20edc2d5f70a14db8c7513d
-8,Seafood,Seaweed and fish,ff84beb4a82d5186fa3b80ce84ce095721093e69
\ No newline at end of file
+1,Beverages,Soft drinks coffees teas beers and ales,ec56b79671b30ecb98316d9b766fba198286b3b6
+2,Condiments,Sweet and savory sauces relishes spreads and seasonings,7e9f535a3bf693ec856702856fffd3be5a3df4f1
+3,Confections,Desserts candies and sweet breads,e781b6c8e83be3f23aa241416f92447a66dc35e4
+4,Dairy Products,Cheeses,ee14378aa9de087150576af322146ba26552d2e1
+5,Grains/Cereals,Breads crackers pasta and cereal,8a3112b3c6691588d47028fd3907f45d24f47784
+6,Meat/Poultry,Prepared meats,11885d9b63b4fdac96dad23d4974df0d28bb8b26
+7,Produce,Dried fruit and bean curd,7c70989e58855ffd8628e0a7d5144a10fd70a1ee
+8,Seafood,Seaweed and fish,778dd323b4e1923b8e0c0166b64913fb255b97a8
\ No newline at end of file
diff --git a/demo/northwind-traders/categories/cereals.gif b/demo/northwind-traders/categories/cereals.gif
deleted file mode 100644
index 9b88a6b2..00000000
Binary files a/demo/northwind-traders/categories/cereals.gif and /dev/null differ
diff --git a/demo/northwind-traders/categories/cereals.jpg b/demo/northwind-traders/categories/cereals.jpg
new file mode 100644
index 00000000..0a795f81
Binary files /dev/null and b/demo/northwind-traders/categories/cereals.jpg differ
diff --git a/demo/northwind-traders/categories/condiments.gif b/demo/northwind-traders/categories/condiments.gif
deleted file mode 100644
index c9f80a59..00000000
Binary files a/demo/northwind-traders/categories/condiments.gif and /dev/null differ
diff --git a/demo/northwind-traders/categories/condiments.jpg b/demo/northwind-traders/categories/condiments.jpg
new file mode 100644
index 00000000..42c90745
Binary files /dev/null and b/demo/northwind-traders/categories/condiments.jpg differ
diff --git a/demo/northwind-traders/categories/confections.gif b/demo/northwind-traders/categories/confections.gif
deleted file mode 100644
index 4d5be086..00000000
Binary files a/demo/northwind-traders/categories/confections.gif and /dev/null differ
diff --git a/demo/northwind-traders/categories/confections.jpg b/demo/northwind-traders/categories/confections.jpg
new file mode 100644
index 00000000..afca172d
Binary files /dev/null and b/demo/northwind-traders/categories/confections.jpg differ
diff --git a/demo/northwind-traders/categories/diary.gif b/demo/northwind-traders/categories/diary.gif
deleted file mode 100644
index b6a4ee95..00000000
Binary files a/demo/northwind-traders/categories/diary.gif and /dev/null differ
diff --git a/demo/northwind-traders/categories/diary.jpg b/demo/northwind-traders/categories/diary.jpg
new file mode 100644
index 00000000..d2e1c988
Binary files /dev/null and b/demo/northwind-traders/categories/diary.jpg differ
diff --git a/demo/northwind-traders/categories/meat.gif b/demo/northwind-traders/categories/meat.gif
deleted file mode 100644
index 710ee042..00000000
Binary files a/demo/northwind-traders/categories/meat.gif and /dev/null differ
diff --git a/demo/northwind-traders/categories/meat.jpg b/demo/northwind-traders/categories/meat.jpg
new file mode 100644
index 00000000..06230f88
Binary files /dev/null and b/demo/northwind-traders/categories/meat.jpg differ
diff --git a/demo/northwind-traders/categories/produce.gif b/demo/northwind-traders/categories/produce.gif
deleted file mode 100644
index ce7939ff..00000000
Binary files a/demo/northwind-traders/categories/produce.gif and /dev/null differ
diff --git a/demo/northwind-traders/categories/produce.jpg b/demo/northwind-traders/categories/produce.jpg
new file mode 100644
index 00000000..5ca90470
Binary files /dev/null and b/demo/northwind-traders/categories/produce.jpg differ
diff --git a/demo/northwind-traders/categories/seafood.gif b/demo/northwind-traders/categories/seafood.gif
deleted file mode 100644
index 180280d7..00000000
Binary files a/demo/northwind-traders/categories/seafood.gif and /dev/null differ
diff --git a/demo/northwind-traders/categories/seafood.jpg b/demo/northwind-traders/categories/seafood.jpg
new file mode 100644
index 00000000..5c4ea3d9
Binary files /dev/null and b/demo/northwind-traders/categories/seafood.jpg differ
diff --git a/demo/northwind-traders/categories/unesco-mappings.ttl b/demo/northwind-traders/categories/unesco-mappings.ttl
new file mode 100644
index 00000000..849d80e6
--- /dev/null
+++ b/demo/northwind-traders/categories/unesco-mappings.ttl
@@ -0,0 +1,41 @@
+# Mappings between Northwind product categories and UNESCO Thesaurus concepts.
+# Each category doubles as a skos:Concept, which makes the SKOS mapping relations
+# applicable and lets the SKOS package render the categories as concepts.
+# Import this file with an RDF import (see the documentation) - .ldhignore keeps
+# it out of ldh push, and install.sh does not import it.
+
+@prefix skos:   <http://www.w3.org/2004/02/skos/core#> .
+
+# 1 Beverages -> Beverages
+<https://northwind-traders.demo.linkeddatahub.com/categories/1/#this> a skos:Concept ;
+    skos:closeMatch <https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept3683/#this> .
+
+# 2 Condiments -> Food (no finer concept in the thesaurus)
+<https://northwind-traders.demo.linkeddatahub.com/categories/2/#this> a skos:Concept ;
+    skos:broadMatch <https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept1812/#this> .
+
+# 3 Confections -> Sugar
+<https://northwind-traders.demo.linkeddatahub.com/categories/3/#this> a skos:Concept ;
+    skos:relatedMatch <https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept3495/#this> .
+
+# 4 Dairy Products -> Dairy products
+<https://northwind-traders.demo.linkeddatahub.com/categories/4/#this> a skos:Concept ;
+    skos:closeMatch <https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept2435/#this> .
+
+# 5 Grains/Cereals -> Cereals
+<https://northwind-traders.demo.linkeddatahub.com/categories/5/#this> a skos:Concept ;
+    skos:closeMatch <https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept4918/#this> .
+
+# 6 Meat/Poultry -> Meat, Poultry
+<https://northwind-traders.demo.linkeddatahub.com/categories/6/#this> a skos:Concept ;
+    skos:closeMatch <https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept2438/#this>,
+        <https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept3457/#this> .
+
+# 7 Produce -> Fruit, Vegetables
+<https://northwind-traders.demo.linkeddatahub.com/categories/7/#this> a skos:Concept ;
+    skos:closeMatch <https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept11238/#this>,
+        <https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept11975/#this> .
+
+# 8 Seafood -> Fishery products
+<https://northwind-traders.demo.linkeddatahub.com/categories/8/#this> a skos:Concept ;
+    skos:closeMatch <https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept2436/#this> .
diff --git a/demo/northwind-traders/customers.ttl b/demo/northwind-traders/customers.ttl
index 27e421f5..7cf53e14 100644
--- a/demo/northwind-traders/customers.ttl
+++ b/demo/northwind-traders/customers.ttl
@@ -1,4 +1,4 @@
-  @prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+  @prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
   @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
   @prefix dct:    <http://purl.org/dc/terms/> .
   @prefix sp:     <http://spinrdf.org/sp#> .
@@ -10,22 +10,25 @@
   <> a dh:Container ;
       dct:title "Customers" ;
       rdf:_1 <#customers-intro> ;
-      rdf:_2 <#top-customers-block> ;
-      rdf:_3 <#geographic-distribution> ;
-      rdf:_4 <#customers-by-country-block> ;
-      rdf:_5 <#customer-insights> ;
-      rdf:_6 <#select-customers> .
+      rdf:_2 <#select-customers> ;
+      rdf:_3 <#customer-insights> ;
+      rdf:_4 <#top-customers-block> ;
+      rdf:_5 <#geographic-distribution> ;
+      rdf:_6 <#customers-by-country-block> .
 
   # Intro XHTML
   <#customers-intro> a ldh:XHTML ;
       rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-          <h3>Customer insights</h3>
-          <p>Understand customer value, geographic distribution, and purchasing patterns. Identifying top customers
-             and market concentration helps prioritize account management and target growth strategies.</p>
+          <div class="ldh-section">
+              <h2>The account book</h2>
+              <p>Every company Northwind sells to, with its contact details and address. Open an account to see
+                 its full order history.</p>
+          </div>
       </div>"""^^rdf:XMLLiteral .
 
   # Top customers chart (wrapped in ldh:Object per ContentMode contract)
   <#top-customers-block> a ldh:Object ;
+      dct:title "Top 10 customers by revenue" ;
       rdf:value <#top-customers> .
 
   <#top-customers> a ldh:ResultSetChart ;
@@ -44,9 +47,7 @@ WHERE {
     GRAPH ?orderGraph {
         ?order schema:customer ?customer ;
                schema:orderedItem ?orderItem .
-        ?orderItem schema:orderQuantity ?quantity ;
-                   schema:price ?price .
-        BIND(?quantity * ?price AS ?sale)
+        ?orderItem schema:price ?sale .
     }
     GRAPH ?customerGraph {
         ?customer schema:legalName ?companyName .
@@ -59,13 +60,16 @@ LIMIT 10""" .
   # Geographic distribution intro
   <#geographic-distribution> a ldh:XHTML ;
       rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-          <h4>Geographic distribution</h4>
-          <p>Our customer base spans multiple countries, with varying levels of market penetration.
-             Understanding geographic concentration helps guide expansion efforts and resource allocation.</p>
+          <div class="ldh-section">
+              <h2>Geographic distribution</h2>
+              <p>The customer base spans many countries at very different depths. Where the accounts cluster is
+                 where the account managers should be.</p>
+          </div>
       </div>"""^^rdf:XMLLiteral .
 
   # Customers by country chart (wrapped in ldh:Object per ContentMode contract)
   <#customers-by-country-block> a ldh:Object ;
+      dct:title "Customers by country" ;
       rdf:value <#customers-by-country> .
 
   <#customers-by-country> a ldh:ResultSetChart ;
@@ -94,17 +98,20 @@ ORDER BY DESC(?customerCount)""" .
   # Customer insights summary
   <#customer-insights> a ldh:XHTML ;
       rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-          <h4>Customer portfolio</h4>
-          <p>Browse individual customer records below to view detailed order history, contact information,
-             and relationship details. Each customer profile provides insights into purchasing behavior and account status.</p>
+          <div class="ldh-section">
+              <h2>Account value</h2>
+              <p>Not every account is worth the same. Revenue concentrates in a handful of them.</p>
+          </div>
       </div>"""^^rdf:XMLLiteral .
 
   # Object block (references the view)
   <#select-customers> a ldh:Object ;
+      dct:title "All customers" ;
       rdf:value <#select-customers-view> .
 
   # View block (references the query, uses TableMode)
   <#select-customers-view> a ldh:View ;
+      dct:title "All customers" ;
       spin:query <#select-customers-query> ;
       ac:mode <https://w3id.org/atomgraph/client#TableMode> .
 
diff --git a/demo/northwind-traders/customers/customers.rq b/demo/northwind-traders/customers/customers.rq
index 20c4dc12..5f177992 100644
--- a/demo/northwind-traders/customers/customers.rq
+++ b/demo/northwind-traders/customers/customers.rq
@@ -52,13 +52,17 @@ WHERE
         <#contactTitle> ?contactTitle ;
         <#address> ?address ;
         <#city> ?city ;
-        <#postalCode> ?postalCode ;
         <#country> ?country ;
         <#phone> ?phone .
 
     OPTIONAL {
         ?customer_row <#region> ?region
     }
+    # Ireland had no postcodes until Eircode in 2015, so HUNGO in Cork has none;
+    # requiring one here dropped the customer and left its 19 orders pointing at nothing
+    OPTIONAL {
+        ?customer_row <#postalCode> ?postalCode
+    }
     OPTIONAL {
         ?customer_row <#fax> ?fax
     }
diff --git a/demo/northwind-traders/employees.ttl b/demo/northwind-traders/employees.ttl
index ec672cc5..0be352be 100644
--- a/demo/northwind-traders/employees.ttl
+++ b/demo/northwind-traders/employees.ttl
@@ -1,4 +1,4 @@
-  @prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+  @prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
   @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
   @prefix dct:    <http://purl.org/dc/terms/> .
   @prefix sp:     <http://spinrdf.org/sp#> .
@@ -10,19 +10,33 @@
   <> a dh:Container ;
       dct:title "Employees" ;
       rdf:_1 <#employee-intro> ;
-      rdf:_2 <#sales-by-employee-block> ;
-      rdf:_3 <#select-employees> .
+      rdf:_2 <#select-employees> ;
+      rdf:_3 <#performance-intro> ;
+      rdf:_4 <#sales-by-employee-block> .
 
   # Intro XHTML
   <#employee-intro> a ldh:XHTML ;
       rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-          <h3>Employee performance</h3>
-          <p>Track employee sales performance and order processing metrics. Understanding individual
-             contributions helps recognize top performers, identify coaching opportunities, and optimize territory assignments.</p>
+          <div class="ldh-section">
+              <h2>The team</h2>
+              <p>Everyone on the Northwind payroll, who they report to and the territories they cover. Open a
+                 record to see the orders they booked.</p>
+          </div>
+      </div>"""^^rdf:XMLLiteral .
+
+  # Performance intro
+  <#performance-intro> a ldh:XHTML ;
+      rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+          <div class="ldh-section">
+              <h2>Sales performance</h2>
+              <p>Revenue booked per sales rep — the basis for recognising top performers and rebalancing
+                 territory assignments.</p>
+          </div>
       </div>"""^^rdf:XMLLiteral .
 
   # Sales by employee chart (wrapped in ldh:Object per ContentMode contract)
   <#sales-by-employee-block> a ldh:Object ;
+      dct:title "Sales by employee" ;
       rdf:value <#sales-by-employee> .
 
   <#sales-by-employee> a ldh:ResultSetChart ;
@@ -41,9 +55,7 @@ WHERE {
     GRAPH ?orderGraph {
         ?order schema:broker ?employee ;
                schema:orderedItem ?orderItem .
-        ?orderItem schema:orderQuantity ?quantity ;
-                   schema:price ?price .
-        BIND(?quantity * ?price AS ?sale)
+        ?orderItem schema:price ?sale .
     }
     GRAPH ?employeeGraph {
         ?employee schema:givenName ?givenName ;
@@ -56,10 +68,12 @@ ORDER BY DESC(?totalSales)""" .
 
   # Object block (references the view)
   <#select-employees> a ldh:Object ;
+      dct:title "All employees" ;
       rdf:value <#select-employees-view> .
 
   # View block (references the query, uses GridMode)
   <#select-employees-view> a ldh:View ;
+      dct:title "All employees" ;
       spin:query <#select-employees-query> ;
       ac:mode <https://w3id.org/atomgraph/client#GridMode> .
 
diff --git a/demo/northwind-traders/employees/andrew.jpg b/demo/northwind-traders/employees/andrew.jpg
index 11fa6013..66459256 100644
Binary files a/demo/northwind-traders/employees/andrew.jpg and b/demo/northwind-traders/employees/andrew.jpg differ
diff --git a/demo/northwind-traders/employees/anne.jpg b/demo/northwind-traders/employees/anne.jpg
index f5149798..e9e6acb6 100644
Binary files a/demo/northwind-traders/employees/anne.jpg and b/demo/northwind-traders/employees/anne.jpg differ
diff --git a/demo/northwind-traders/employees/employees.csv b/demo/northwind-traders/employees/employees.csv
index 5c64c58e..330b497f 100644
--- a/demo/northwind-traders/employees/employees.csv
+++ b/demo/northwind-traders/employees/employees.csv
@@ -1,10 +1,10 @@
 employeeID,lastName,firstName,title,titleOfCourtesy,birthDate,hireDate,address,city,region,postalCode,country,homePhone,extension,notes,reportsTo,photoHash,lat,long
-1,Davolio,Nancy,Sales Representative,Ms.,1948-12-08 0:00:00,1992-05-01 0:00:00,507 20th Ave. E. Apt. 2A,Seattle,WA,98122,USA,(206) 555-9857,5467,Education includes a BA in psychology from Colorado State University in 1970.  She also completed The Art of the Cold Call.  Nancy is a member of Toastmasters International.,2,fb2e87988887cebf252947ba5d98e34d01d44ed4,47.6196755,-122.3060816
-2,Fuller,Andrew,Vice President Sales,Dr.,1952-02-19 0:00:00,1992-08-14 0:00:00,908 W. Capital Way,Tacoma,WA,98401,USA,(206) 555-9482,3457,Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative was promoted to sales manager,,2e01d9bd3252b4d3a18269b8a7144a5ac53a8eea,47.253671,-122.444335
-3,Leverling,Janet,Sales Representative,Ms.,1963-08-30 0:00:00,1992-04-01 0:00:00,722 Moss Bay Blvd.,Kirkland,WA,98033,USA,(206) 555-3412,3355,Janet has a BS degree in chemistry from Boston College (1984). She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.,2,56c3bf02eb71dc6039b3d88cd48064765e7e9a2e,47.6859573,-122.1920249
-4,Peacock,Margaret,Sales Representative,Mrs.,1937-09-19 0:00:00,1993-05-03 0:00:00,4110 Old Redmond Rd.,Redmond,WA,98052,USA,(206) 555-8122,5176,Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.,2,e7c6d342fda288dbf1a2ebfdad8423b618c3a4ec,47.6719476,-122.1335668
-5,Buchanan,Steven,Sales Manager,Mr.,1955-03-04 0:00:00,1993-10-17 0:00:00,14 Garrett Hill,London,,SW1 8JR,UK,(71) 555-4848,3453,Steven Buchanan graduated from St. Andrews University in Scotland with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992 he spent 6 months in an orientation program at the Seattle office.,2,71d6faa8ce45949526ca2317a78b87567bb6721f,51.5073219,-0.1276474
-6,Suyama,Michael,Sales Representative,Mr.,1963-07-02 0:00:00,1993-10-17 0:00:00,Coventry House Miner Rd.,London,,EC2 7JR,UK,(71) 555-7773,428,Michael is a graduate of Sussex University (MA Economics 1983) and the University of California at Los Angeles (MBA marketing 1986).  He has also taken the courses Multi-Cultural Selling and Time Management for the Sales Professional.,5,cb8b0702d0e1c948bebb1377dffca3787147890e,51.5225,-0.0857
-7,King,Robert,Sales Representative,Mr.,1960-05-29 0:00:00,1994-01-02 0:00:00,Edgeham Hollow Winchester Way,London,,RG1 9SP,UK,(71) 555-5598,465,Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992 the year he joined the company.,5,bcc47ec0ed5ef773f48af4ba47a1461784651a45,51.453506,-0.976976
-8,Callahan,Laura,Inside Sales Coordinator,Ms.,1958-01-09 0:00:00,1994-03-05 0:00:00,4726 11th Ave. N.E.,Seattle,WA,98105,USA,(206) 555-1189,2344,Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.,2,3e093b6c95ea749c6086600b54331a519d555307,47.6631746,-122.3706467
-9,Dodsworth,Anne,Sales Representative,Ms.,1966-01-27 0:00:00,1994-11-15 0:00:00,7 Houndstooth Rd.,London,,WG2 7LT,UK,(71) 555-4444,452,Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.,5,adc69ff7f1e985655a37f818400e45d905aaef8a,51.5073219,-0.1276474
\ No newline at end of file
+1,Davolio,Nancy,Sales Representative,Ms.,1948-12-08 0:00:00,1992-05-01 0:00:00,507 20th Ave. E. Apt. 2A,Seattle,WA,98122,USA,(206) 555-9857,5467,Education includes a BA in psychology from Colorado State University in 1970.  She also completed The Art of the Cold Call.  Nancy is a member of Toastmasters International.,2,35fd362792e8c4bc3560a6de02f25ee551d68d02,47.6196755,-122.3060816
+2,Fuller,Andrew,Vice President Sales,Dr.,1952-02-19 0:00:00,1992-08-14 0:00:00,908 W. Capital Way,Tacoma,WA,98401,USA,(206) 555-9482,3457,Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative was promoted to sales manager,,85035ad6281696a74a3f060ddbc16bf5f31d10f1,47.253671,-122.444335
+3,Leverling,Janet,Sales Representative,Ms.,1963-08-30 0:00:00,1992-04-01 0:00:00,722 Moss Bay Blvd.,Kirkland,WA,98033,USA,(206) 555-3412,3355,Janet has a BS degree in chemistry from Boston College (1984). She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.,2,0978d23da4dad02afa585b127870c566836294ca,47.6859573,-122.1920249
+4,Peacock,Margaret,Sales Representative,Mrs.,1937-09-19 0:00:00,1993-05-03 0:00:00,4110 Old Redmond Rd.,Redmond,WA,98052,USA,(206) 555-8122,5176,Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.,2,be8a7e398df569e2a0fe0071543e90eef30077ce,47.6719476,-122.1335668
+5,Buchanan,Steven,Sales Manager,Mr.,1955-03-04 0:00:00,1993-10-17 0:00:00,14 Garrett Hill,London,,SW1 8JR,UK,(71) 555-4848,3453,Steven Buchanan graduated from St. Andrews University in Scotland with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992 he spent 6 months in an orientation program at the Seattle office.,2,97d5bd0f95a59e38564302c49a188041697e8fe2,51.5073219,-0.1276474
+6,Suyama,Michael,Sales Representative,Mr.,1963-07-02 0:00:00,1993-10-17 0:00:00,Coventry House Miner Rd.,London,,EC2 7JR,UK,(71) 555-7773,428,Michael is a graduate of Sussex University (MA Economics 1983) and the University of California at Los Angeles (MBA marketing 1986).  He has also taken the courses Multi-Cultural Selling and Time Management for the Sales Professional.,5,db4caa9067579e36a2ff973370763b862be32b4a,51.5225,-0.0857
+7,King,Robert,Sales Representative,Mr.,1960-05-29 0:00:00,1994-01-02 0:00:00,Edgeham Hollow Winchester Way,London,,RG1 9SP,UK,(71) 555-5598,465,Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992 the year he joined the company.,5,0040f22788c8513a2c622f67a0ab231cde61b96b,51.453506,-0.976976
+8,Callahan,Laura,Inside Sales Coordinator,Ms.,1958-01-09 0:00:00,1994-03-05 0:00:00,4726 11th Ave. N.E.,Seattle,WA,98105,USA,(206) 555-1189,2344,Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.,2,a938e380e798d8cf0a7f5bb9305ea74a870e292e,47.6631746,-122.3706467
+9,Dodsworth,Anne,Sales Representative,Ms.,1966-01-27 0:00:00,1994-11-15 0:00:00,7 Houndstooth Rd.,London,,WG2 7LT,UK,(71) 555-4444,452,Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.,5,5d75b1f3af23c47f17630ffcc8e4f5f32883c086,51.5073219,-0.1276474
\ No newline at end of file
diff --git a/demo/northwind-traders/employees/janet.jpg b/demo/northwind-traders/employees/janet.jpg
index 1b0d4056..04fcc1b2 100644
Binary files a/demo/northwind-traders/employees/janet.jpg and b/demo/northwind-traders/employees/janet.jpg differ
diff --git a/demo/northwind-traders/employees/laura.jpg b/demo/northwind-traders/employees/laura.jpg
index 22760949..d7526494 100644
Binary files a/demo/northwind-traders/employees/laura.jpg and b/demo/northwind-traders/employees/laura.jpg differ
diff --git a/demo/northwind-traders/employees/margaret.jpg b/demo/northwind-traders/employees/margaret.jpg
index 5b4096d0..af8217ea 100644
Binary files a/demo/northwind-traders/employees/margaret.jpg and b/demo/northwind-traders/employees/margaret.jpg differ
diff --git a/demo/northwind-traders/employees/michael.jpg b/demo/northwind-traders/employees/michael.jpg
index 7e239eac..8b7316a3 100644
Binary files a/demo/northwind-traders/employees/michael.jpg and b/demo/northwind-traders/employees/michael.jpg differ
diff --git a/demo/northwind-traders/employees/nancy.jpg b/demo/northwind-traders/employees/nancy.jpg
index f4c4bec3..65d1bc5e 100644
Binary files a/demo/northwind-traders/employees/nancy.jpg and b/demo/northwind-traders/employees/nancy.jpg differ
diff --git a/demo/northwind-traders/employees/robert.jpg b/demo/northwind-traders/employees/robert.jpg
index e71cfb7e..c8a90f21 100644
Binary files a/demo/northwind-traders/employees/robert.jpg and b/demo/northwind-traders/employees/robert.jpg differ
diff --git a/demo/northwind-traders/employees/steven.jpg b/demo/northwind-traders/employees/steven.jpg
index e677fbf8..b86a2a3a 100644
Binary files a/demo/northwind-traders/employees/steven.jpg and b/demo/northwind-traders/employees/steven.jpg differ
diff --git a/demo/northwind-traders/import-csv.sh b/demo/northwind-traders/import-csv.sh
deleted file mode 100755
index ab4030d5..00000000
--- a/demo/northwind-traders/import-csv.sh
+++ /dev/null
@@ -1,91 +0,0 @@
-#!/usr/bin/env bash
-
-if [ "$#" -ne 4 ] && [ "$#" -ne 5 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password [$proxy] $imports_file' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../../ssl/owner/cert.pem Password [https://localhost:5443/] "$pwd/imports.csv"' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file=$(realpath "$2")
-cert_password="$3"
-
-if [ -n "$5" ]; then
-    proxy="$4"
-    imports_csv="$5"
-else
-    proxy="$base"
-    imports_csv="$4"
-fi
-
-titles=()
-queries=()
-files=()
-targets=()
-
-pwd=$(realpath "$PWD")
-
-arr_csv=()
-while IFS= read -r line
-do
-    arr_csv+=("$line")
-done < <(tail -n +2 "$imports_csv")
-
-index=0
-for row in "${arr_csv[@]}"
-do
-    query_filename=$(echo "$row" | cut -d "," -f 1)
-    csv_filename=$(echo "$row" | cut -d "," -f 2)
-    target_path=$(echo "$row" | cut -d "," -f 3)
-    title=$(echo "$row" | cut -d "," -f 4)
-
-    target="${base}${target_path}"
-    titles+=("$title")
-    targets+=("$target")
-
-    # create query
-
-    # Generate query ID for fragment identifier
-    query_id=$(uuidgen | tr '[:upper:]' '[:lower:]')
-
-    add-construct.sh \
-      -b "$base" \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      --title "$title" \
-      --uri "#${query_id}" \
-      --query-file "$pwd/${query_filename}" \
-      "$target"
-
-    query="${target}#${query_id}"
-    queries+=("$query")
-
-    # Calculate file URI from SHA1 hash
-    # The files themselves should already be uploaded by update-folder.sh
-    sha1sum=$(shasum -a 1 "$pwd/${csv_filename}" | awk '{print $1}')
-    file="${base}uploads/${sha1sum}"
-    files+=("$file")
-
-    # iterate
-
-    ((index++))
-done
-
-# start imports - postpone until after documents are created so we don't get concurrent updates to the triplestore
-
-for i in "${!files[@]}"; do
-    printf "\n### Importing CSV from %s\n\n" "${files[$i]}"
-
-    add-csv-import.sh \
-      -b "$base" \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      --title "${titles[$i]}" \
-      --query "${queries[$i]}" \
-      --file "${files[$i]}" \
-      --delimiter "," \
-      "${targets[$i]}"
-done
diff --git a/demo/northwind-traders/install.sh b/demo/northwind-traders/install.sh
index 0d759ae0..b9d318ba 100755
--- a/demo/northwind-traders/install.sh
+++ b/demo/northwind-traders/install.sh
@@ -1,52 +1,25 @@
 #!/usr/bin/env bash
-
-if [ "$#" -ne 3 ] && [ "$#" -ne 4 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../../LinkedDataHub/ssl/owner/cert.pem Password [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file=$(realpath "$2")
-cert_password="$3"
-
-if [ -n "$4" ]; then
-    proxy="$4"
-else
-    proxy="$base"
-fi
-
-pwd="$(realpath "$PWD")"
-
-printf "\n### Creating authorization to make the app public\n\n"
-
-make-public.sh -b "$base" -f "$cert_pem_file" -p "$cert_password" --proxy "$proxy"
-
-cd admin/model
-
-printf "\n### Importing namespace ontology\n\n"
-
-./import-ns.sh "$base" "$cert_pem_file" "$cert_password" "$proxy"
-
-cd ..
-
-cd ..
-
-printf "\n### Updating documents and uploading files\n\n"
-
-if [[ -f "root.ttl" ]]; then
-  printf "\n### Updating %s\n" "$base"
-  cat root.ttl | turtle --base="$base" | put.sh \
-    -f "$cert_pem_file" \
-    -p "$cert_password" \
-    --proxy "$proxy" \
-    -t "application/n-triples" \
-    "$base"
-fi
-
-./update-folder.sh "$base" "$cert_pem_file" "$cert_password" "$pwd" "$pwd" "$proxy"
-
-printf "\n### Importing CSV data\n\n"
-
-./import-csv.sh "$base" "$cert_pem_file" "$cert_password" "$proxy" "$pwd/imports.csv"
\ No newline at end of file
+# Installs the app onto a LinkedDataHub instance with the ldh CLI: makes it public, installs the
+# namespace ontology, pushes the document tree with its files, and runs the CSV imports.
+#
+# Reads LDH_BASE, LDH_CERT_FILE, LDH_CERT_PASSWORD and optionally LDH_PROXY; `make install` prompts
+# for them. Re-running converges on the same documents — PUT replaces each one and the ontology is
+# reset before re-import — but make-public and every CSV import are POSTs, so each run adds another
+# authorization and another import record.
+set -euo pipefail
+
+app_dir="$(cd "$(dirname "$0")" && pwd)"
+. "$app_dir/../../lib/ldh-app.sh"
+ldh_app_require_env
+
+ldh_app_step "Creating authorization to make the app public"
+ldh admin make-public
+
+ldh_app_step "Importing namespace ontology"
+ldh_app_import_ns "$app_dir/admin/model"
+
+ldh_app_step "Pushing documents and files"
+ldh push --dir "$app_dir" "$LDH_BASE"
+
+ldh_app_step "Importing CSV data"
+ldh_app_import_csv "$app_dir" "$app_dir/imports.csv"
diff --git a/demo/northwind-traders/orders.ttl b/demo/northwind-traders/orders.ttl
index e9f32e55..ff1f4116 100644
--- a/demo/northwind-traders/orders.ttl
+++ b/demo/northwind-traders/orders.ttl
@@ -1,4 +1,4 @@
-  @prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+  @prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
   @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
   @prefix dct:    <http://purl.org/dc/terms/> .
   @prefix sp:     <http://spinrdf.org/sp#> .
@@ -10,19 +10,37 @@
   <> a dh:Container ;
       dct:title "Orders" ;
       rdf:_1 <#orders-intro> ;
-      rdf:_2 <#orders-over-time-block> ;
-      rdf:_3 <#geographic-intro> ;
-      rdf:_4 <#orders-by-country-block> ;
-      rdf:_5 <#order-trends-summary> ;
-      rdf:_6 <#sales-by-region-per-year-block> ;
-      rdf:_7 <#select-orders> .
+      rdf:_2 <#select-orders> ;
+      rdf:_3 <#analytics-intro> ;
+      rdf:_4 <#orders-over-time-block> ;
+      rdf:_5 <#fulfilment-intro> ;
+      rdf:_6 <#days-to-ship-block> ;
+      rdf:_7 <#on-time-block> ;
+      rdf:_8 <#carrier-intro> ;
+      rdf:_9 <#late-by-carrier-block> ;
+      rdf:_10 <#revenue-by-carrier-block> .
+
+  # Intro XHTML
+  <#orders-intro> a ldh:XHTML ;
+      rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+          <div class="ldh-section">
+              <h2>The order book</h2>
+              <p>Every order links a customer, the sales rep who booked it, the shipper that delivered it and the
+                 products it contains. Orders are listed newest first with their status — sort any column or
+                 filter with the facets. Open one for its full master–detail view: line items with their
+                 quantities and line totals, the catalogue price each was struck against, the delivery
+                 and its address, and the people and companies involved.</p>
+          </div>
+      </div>"""^^rdf:XMLLiteral .
 
   # Object block (references the view)
   <#select-orders> a ldh:Object ;
+      dct:title "All orders" ;
       rdf:value <#select-orders-view> .
 
   # View block (references the query, uses TableMode)
   <#select-orders-view> a ldh:View ;
+      dct:title "All orders" ;
       spin:query <#select-orders-query> ;
       ac:mode <https://w3id.org/atomgraph/client#TableMode> .
 
@@ -38,21 +56,24 @@
                   schema:identifier  ?orderID ;
                   schema:orderDate   ?orderDate ;
                   schema:customer    ?customer ;
-                  schema:broker      ?employee
+                  schema:broker      ?employee ;
+                  schema:orderStatus ?status
         }
     }
-  ORDER BY ?orderID""" .
+  ORDER BY DESC(?orderDate)""" .
 
-  # Intro XHTML
-  <#orders-intro> a ldh:XHTML ;
+  # Analytics intro
+  <#analytics-intro> a ldh:XHTML ;
       rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-          <h3>Order analytics</h3>
-          <p>Track order volume, geographic distribution, and temporal trends. Understanding order patterns
-             helps optimize inventory, predict demand, and identify growth opportunities across different markets.</p>
+          <div class="ldh-section">
+              <h2>Order analytics</h2>
+              <p>Beyond the individual records, how has order volume developed over time?</p>
+          </div>
       </div>"""^^rdf:XMLLiteral .
 
   # Orders over time chart (wrapped in ldh:Object per ContentMode contract)
   <#orders-over-time-block> a ldh:Object ;
+      dct:title "Orders per month" ;
       rdf:value <#orders-over-time> .
 
   <#orders-over-time> a ldh:ResultSetChart ;
@@ -77,86 +98,195 @@ WHERE {
 GROUP BY ?month
 ORDER BY ?month""" .
 
-  # Geographic intro
-  <#geographic-intro> a ldh:XHTML ;
+  # Fulfilment intro
+  <#fulfilment-intro> a ldh:XHTML ;
       rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-          <h4>Geographic distribution</h4>
-          <p>Orders span multiple countries and regions. Analyzing geographic patterns reveals market penetration
-             and helps identify expansion opportunities or regional challenges.</p>
+          <div class="ldh-section">
+              <h2>From order to doorstep</h2>
+              <p>Every order records three dates: the day it was placed, the day the customer needed it
+                 by, and — once the parcel actually leaves the warehouse — the day it was dispatched.
+                 Two questions fall out of those. How quickly does Northwind get an order out of the
+                 door, and how often does it beat the date it promised? Orders still waiting to ship
+                 are left out of the second chart, since they have no outcome yet.</p>
+          </div>
       </div>"""^^rdf:XMLLiteral .
 
-  # Orders by country chart (wrapped in ldh:Object per ContentMode contract)
-  <#orders-by-country-block> a ldh:Object ;
-      rdf:value <#orders-by-country> .
+  # Days from order to dispatch
+  <#days-to-ship-block> a ldh:Object ;
+      dct:title "Days to ship" ;
+      rdf:value <#days-to-ship> .
 
-  <#orders-by-country> a ldh:ResultSetChart ;
-      dct:title "Orders by country" ;
-      spin:query <#orders-by-country-query> ;
-      ldh:chartType <https://w3id.org/atomgraph/client#BarChart> ;
-      ldh:categoryVarName "country" ;
-      ldh:seriesVarName "orderCount" .
+  <#days-to-ship> a ldh:ResultSetChart ;
+      dct:title "Days to ship" ;
+      spin:query <#days-to-ship-query> ;
+      ldh:chartType <https://w3id.org/atomgraph/client#LineChart> ;
+      ldh:categoryVarName "month" ;
+      ldh:seriesVarName "daysToShip" .
 
-  <#orders-by-country-query> a sp:Select ;
-      dct:title "Orders by country" ;
+  <#days-to-ship-query> a sp:Select ;
+      dct:title "Days to ship by month" ;
       sp:text """PREFIX schema: <https://schema.org/>
+PREFIX xsd:    <http://www.w3.org/2001/XMLSchema#>
 
-SELECT ?country (COUNT(DISTINCT ?order) AS ?orderCount)
+SELECT ?month (ROUND(AVG(?days) * 10) / 10 AS ?daysToShip)
 WHERE {
     GRAPH ?orderGraph {
-        ?order schema:orderDelivery ?delivery .
-        ?delivery schema:deliveryAddress ?address .
-        ?address schema:addressCountry ?country .
+        ?order a schema:Order ;
+               schema:orderDate ?orderDate ;
+               schema:orderDelivery ?delivery .
+        # the dispatch is a DeliveryEvent leg of the parcel's journey, so orders that
+        # never shipped simply have no event and drop out of the average
+        ?delivery schema:deliveryStatus ?shipment .
+        ?shipment schema:startDate ?shippedDate .
+        BIND(SUBSTR(STR(?orderDate), 1, 7) AS ?month)
+        BIND((?shippedDate - ?orderDate) / xsd:dayTimeDuration("P1D") AS ?days)
+    }
+    # The order book stops part-way through its final month, which would render as a
+    # cliff rather than a trend. Drop that month — derived from the data, not pinned
+    # to a date, so it stays correct if the dataset grows.
+    {
+        SELECT (SUBSTR(STR(MAX(?anyDate)), 1, 7) AS ?partialMonth)
+        WHERE {
+            GRAPH ?g { ?anyOrder a schema:Order ; schema:orderDate ?anyDate }
+        }
+    }
+    FILTER (?month < ?partialMonth)
+}
+GROUP BY ?month
+ORDER BY ?month""" .
+
+  # On-time shipping rate
+  <#on-time-block> a ldh:Object ;
+      dct:title "Shipped on time" ;
+      rdf:value <#on-time> .
+
+  <#on-time> a ldh:ResultSetChart ;
+      dct:title "Shipped on time" ;
+      spin:query <#on-time-query> ;
+      ldh:chartType <https://w3id.org/atomgraph/client#LineChart> ;
+      ldh:categoryVarName "month" ;
+      ldh:seriesVarName "onTimePercent" .
+
+  <#on-time-query> a sp:Select ;
+      dct:title "On-time rate by month" ;
+      sp:text """PREFIX schema: <https://schema.org/>
+
+SELECT ?month (ROUND(SUM(IF(?status = schema:OrderDelivered, 1, 0)) * 1000 / COUNT(?order)) / 10 AS ?onTimePercent)
+WHERE {
+    GRAPH ?orderGraph {
+        ?order a schema:Order ;
+               schema:orderDate ?orderDate ;
+               schema:orderStatus ?status .
+        BIND(SUBSTR(STR(?orderDate), 1, 7) AS ?month)
+    }
+    # an order still awaiting dispatch has no outcome yet - counting it as a miss would
+    # drag the rate down for the months at the end of the book
+    FILTER (?status != schema:OrderProcessing)
+    # The order book stops part-way through its final month, which would render as a
+    # cliff rather than a trend. Drop that month — derived from the data, not pinned
+    # to a date, so it stays correct if the dataset grows.
+    {
+        SELECT (SUBSTR(STR(MAX(?anyDate)), 1, 7) AS ?partialMonth)
+        WHERE {
+            GRAPH ?g { ?anyOrder a schema:Order ; schema:orderDate ?anyDate }
+        }
     }
+    FILTER (?month < ?partialMonth)
 }
-GROUP BY ?country
-ORDER BY DESC(?orderCount)
-LIMIT 10""" .
-
-  # Chart block (wrapped in ldh:Object per ContentMode contract)
-  <#sales-by-region-per-year-block> a ldh:Object ;
-      rdf:value <#sales-by-region-per-year> .
-
-  <#sales-by-region-per-year> a ldh:ResultSetChart ;
-      dct:title "Sales by region per year" ;
-      spin:query <#sales-by-regions-by-year-query> ;
-      ldh:chartType <https://w3id.org/atomgraph/client#Table> ;
-      ldh:categoryVarName "year" ;
-      ldh:seriesVarName "regionName" ;
-      ldh:seriesVarName "totalSales" .
-
-  # Order trends summary
-  <#order-trends-summary> a ldh:XHTML ;
+GROUP BY ?month
+ORDER BY ?month""" .
+
+  # Carrier intro
+  <#carrier-intro> a ldh:XHTML ;
       rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-          <h4>Regional performance</h4>
-          <p>The table below shows sales performance broken down by region and year, enabling comparison
-             of regional growth patterns and seasonal variations.</p>
+          <div class="ldh-section">
+              <h2>Who carries the freight</h2>
+              <p>Three carriers deliver every order, which makes them worth comparing on two
+                 axes. How often does a carrier miss the date the customer was promised, and
+                 how much revenue does each one move month to month? The first is a question
+                 about reliability, the second about how the shipping mix has shifted.</p>
+          </div>
       </div>"""^^rdf:XMLLiteral .
 
-  # Chart SELECT query
-  <#sales-by-regions-by-year-query> a sp:Select ;
-      dct:title "Sales by region per year" ;
-      sp:text """PREFIX  schema: <https://schema.org/>
-PREFIX  xsd:  <http://www.w3.org/2001/XMLSchema#>
-
-SELECT DISTINCT  ?year ?regionName (SUM(?sale) AS ?totalSales)
-WHERE
-  { GRAPH ?orderGraph
-      { ?order  schema:orderDate    ?orderDate ;
-                schema:broker       ?employee ;
-                schema:orderedItem  ?orderItem
-        BIND(year(xsd:dateTime(?orderDate)) AS ?year)
-        ?orderItem  schema:orderedItem  ?product ;
-                  schema:orderQuantity  ?quantity ;
-                  schema:price          ?price
-        BIND(( ?quantity * ?price ) AS ?sale)
-      }
-    GRAPH ?employeeGraph
-      { ?employee  schema:areaServed  ?territory }
-    GRAPH ?territoryGraph
-      { ?territory  schema:containedInPlace  ?region }
-    GRAPH ?regionGraph
-      { ?region  schema:name  ?regionName }
-  }
-GROUP BY ?year ?regionName
-ORDER BY DESC(?year) ?regionName
-LIMIT   100""" .
+  # Late shipments by carrier
+  <#late-by-carrier-block> a ldh:Object ;
+      dct:title "Late shipments by carrier" ;
+      rdf:value <#late-by-carrier> .
+
+  <#late-by-carrier> a ldh:ResultSetChart ;
+      dct:title "Late shipments by carrier" ;
+      spin:query <#late-by-carrier-query> ;
+      ldh:chartType <https://w3id.org/atomgraph/client#BarChart> ;
+      ldh:categoryVarName "carrier" ;
+      ldh:seriesVarName "latePercent" .
+
+  <#late-by-carrier-query> a sp:Select ;
+      dct:title "Late shipments by carrier" ;
+      sp:text """PREFIX schema: <https://schema.org/>
+
+SELECT ?carrier (ROUND(SUM(IF(?status = schema:OrderProblem, 1, 0)) * 1000 / COUNT(?order)) / 10 AS ?latePercent)
+WHERE {
+    GRAPH ?orderGraph {
+        ?order a schema:Order ;
+               schema:orderStatus ?status ;
+               schema:orderDelivery ?delivery .
+        ?delivery schema:provider ?shipper .
+    }
+    GRAPH ?shipperGraph {
+        ?shipper schema:legalName ?carrier .
+    }
+    # not yet dispatched is not the same as delivered late
+    FILTER (?status != schema:OrderProcessing)
+}
+GROUP BY ?carrier
+ORDER BY DESC(?latePercent)""" .
+
+  # Revenue by carrier - the one multi-series chart in the app. Each ldh:seriesVarName
+  # names its own measure column (wide format); the query pivots with conditional
+  # aggregation. Three carriers is a small fixed set, so naming them here is tolerable -
+  # a fourth would silently not appear.
+  <#revenue-by-carrier-block> a ldh:Object ;
+      dct:title "Revenue by carrier" ;
+      rdf:value <#revenue-by-carrier> .
+
+  <#revenue-by-carrier> a ldh:ResultSetChart ;
+      dct:title "Revenue by carrier" ;
+      spin:query <#revenue-by-carrier-query> ;
+      ldh:chartType <https://w3id.org/atomgraph/client#LineChart> ;
+      ldh:categoryVarName "month" ;
+      ldh:seriesVarName "speedyExpress" ;
+      ldh:seriesVarName "unitedPackage" ;
+      ldh:seriesVarName "federalShipping" .
+
+  <#revenue-by-carrier-query> a sp:Select ;
+      dct:title "Revenue by carrier" ;
+      sp:text """PREFIX schema: <https://schema.org/>
+
+SELECT ?month
+       (ROUND(SUM(IF(?carrier = "Speedy Express", ?lineTotal, 0))) AS ?speedyExpress)
+       (ROUND(SUM(IF(?carrier = "United Package", ?lineTotal, 0))) AS ?unitedPackage)
+       (ROUND(SUM(IF(?carrier = "Federal Shipping", ?lineTotal, 0))) AS ?federalShipping)
+WHERE {
+    GRAPH ?orderGraph {
+        ?order a schema:Order ;
+               schema:orderDate ?orderDate ;
+               schema:orderDelivery ?delivery ;
+               schema:orderedItem ?orderItem .
+        ?orderItem schema:price ?lineTotal .
+        ?delivery schema:provider ?shipper .
+    }
+    GRAPH ?shipperGraph {
+        ?shipper schema:legalName ?carrier .
+    }
+    BIND(SUBSTR(STR(?orderDate), 1, 7) AS ?month)
+    # Drop the final, incomplete month - derived from the data rather than pinned to a date.
+    {
+        SELECT (SUBSTR(STR(MAX(?anyDate)), 1, 7) AS ?partialMonth)
+        WHERE {
+            GRAPH ?g { ?anyOrder a schema:Order ; schema:orderDate ?anyDate }
+        }
+    }
+    FILTER (?month < ?partialMonth)
+}
+GROUP BY ?month
+ORDER BY ?month""" .
diff --git a/demo/northwind-traders/orders/order_details.rq b/demo/northwind-traders/orders/order_details.rq
index 30771e9a..45331142 100644
--- a/demo/northwind-traders/orders/order_details.rq
+++ b/demo/northwind-traders/orders/order_details.rq
@@ -7,13 +7,32 @@ CONSTRUCT
 {
     GRAPH ?graph
     {
+        ?graph foaf:topic ?orderItem, ?listPrice .
+
         ?order schema:orderedItem ?orderItem .
 
-        ?orderItem a schema:OrderItem ;
+        # schema:OrderItem carries no price in schema.org - its only properties are
+        # orderedItem, orderQuantity, orderItemNumber, orderItemStatus and orderDelivery.
+        # Prices belong to schema:Offer, so the line is both: the item that was ordered
+        # and the offer that was accepted for it. schema:Offer's own schema:price is the
+        # price of the offer as a whole, i.e. what this line came to.
+        ?orderItem a schema:OrderItem, schema:Offer ;
             schema:orderedItem ?product ;
+            schema:itemOffered ?product ;
             schema:orderQuantity ?quantity ;
-            schema:discount ?discount ;
-            schema:price ?price .
+            schema:price ?lineTotal ;
+            schema:priceCurrency "USD" ;
+            schema:priceSpecification ?listPrice .
+
+        # Northwind's per-line discount rate has no home in schema.org - schema:discount
+        # is an Order-level property. Nothing is lost by dropping it: the undiscounted
+        # unit price below, the quantity above and the line total pin the rate exactly,
+        # and unlike a stored rate they cannot disagree with each other.
+        ?listPrice a schema:UnitPriceSpecification ;
+            dct:title "List price" ;
+            schema:priceType schema:ListPrice ;
+            schema:price ?price ;
+            schema:priceCurrency "USD" .
     }
 }
 WHERE
@@ -27,8 +46,10 @@ WHERE
     BIND(uri(concat(str($base), "orders/", encode_for_uri(?orderID), "/")) AS ?graph)
     BIND(uri(concat(str(?graph), "#this")) AS ?order)
     BIND(uri(concat(str(?graph), "#", STRUUID())) AS ?orderItem)
+    BIND(uri(concat(str(?orderItem), "-list-price")) AS ?listPrice)
     BIND(uri(concat(str($base), "products/", encode_for_uri(?productID), "/#this")) AS ?product)
     BIND (STRDT(?unitPrice, xsd:float) AS ?price)
     BIND (STRDT(?quantityString, xsd:integer) AS ?quantity)
     BIND (STRDT(?discountString, xsd:float) AS ?discount)
+    BIND (STRDT(str(round(?quantity * ?price * (1 - ?discount) * 100) / 100), xsd:float) AS ?lineTotal)
 }
diff --git a/demo/northwind-traders/orders/orders.rq b/demo/northwind-traders/orders/orders.rq
index 98fbab56..9db16ff7 100644
--- a/demo/northwind-traders/orders/orders.rq
+++ b/demo/northwind-traders/orders/orders.rq
@@ -9,7 +9,8 @@ CONSTRUCT
     {
         ?graph dct:title ?orderID ;
             foaf:primaryTopic ?order ;
-            foaf:topic ?orderDelivery, ?deliveryAddress .
+            foaf:topic ?orderDelivery, ?deliveryAddress, ?shipment,
+                ?shippingOffer, ?freightCharge .
 
         ?order a schema:Order ;
             schema:identifier ?orderID ;
@@ -17,22 +18,48 @@ CONSTRUCT
             schema:customer ?customer ;
             schema:broker ?employee ;
             schema:orderDate ?orderDate ;
+            schema:orderStatus ?status ;
+            schema:acceptedOffer ?shippingOffer ;
             schema:orderDelivery ?orderDelivery .
 
         ?orderDelivery a schema:ParcelDelivery ;
             foaf:page ?graph ;
+            schema:partOfOrder ?order ;
             schema:expectedArrivalUntil ?requiredDate ;
-            # ?shippedDate ;
+            schema:deliveryStatus ?shipment ;
             schema:deliveryAddress ?deliveryAddress ;
             schema:provider ?shipper .
 
+        # schema:ParcelDelivery has no price property either. A delivery charge is a
+        # schema:DeliveryChargeSpecification, and the only way into a PriceSpecification
+        # is schema:priceSpecification from an Offer - so the freight the customer
+        # accepted is spelled out as exactly that.
+        ?shippingOffer a schema:Offer ;
+            foaf:page ?graph ;
+            dct:title "Shipping" ;
+            schema:priceSpecification ?freightCharge .
+
+        ?freightCharge a schema:DeliveryChargeSpecification ;
+            foaf:page ?graph ;
+            dct:title "Freight" ;
+            schema:price ?freight ;
+            schema:priceCurrency "USD" ;
+            schema:appliesToDeliveryMethod schema:ParcelService .
+
+        # schema:ParcelDelivery has no date of its own for "when did this leave the warehouse".
+        # The vocabulary models the journey as a series of schema:DeliveryEvent legs hanging
+        # off schema:deliveryStatus; Northwind knows exactly one leg, the dispatch.
+        ?shipment a schema:DeliveryEvent ;
+            foaf:page ?graph ;
+            dct:title ?shipmentTitle ;
+            schema:startDate ?shippedDate .
+
         ?deliveryAddress a schema:PostalAddress ;
             foaf:page ?graph ;
             schema:addressCountry ?shipCountry ;
             schema:addressLocality ?shipCity ;
             schema:postalCode ?shipPostalCode ;
             schema:streetAddress ?shipAddress ;
-            schema:location ?deliveryLocation ;
             schema:addressRegion ?shipRegion .
     }
 }
@@ -48,26 +75,42 @@ WHERE
         <#shipName> ?shipName ;
         <#shipAddress> ?shipAddress ;
         <#shipCity> ?shipCity ;
-        <#shipPostalCode> ?shipPostalCode ;
         <#shipCountry> ?shipCountry .
 
+    # ?shipment is bound inside the OPTIONAL so that the 21 orders that were never
+    # dispatched get no DeliveryEvent at all, rather than an empty one. It is built from
+    # $base (a constant, substituted before execution) and a re-matched ?orderID rather
+    # than from ?graph: an OPTIONAL group is evaluated standalone, so variables BINDed in
+    # the enclosing group are not in scope inside it.
     OPTIONAL {
-        ?order_row <#shippedDate> ?shippedDateString
+        ?order_row <#orderID> ?orderID ;
+            <#shippedDate> ?shippedDateString .
         BIND(strdt(?shippedDateString, xsd:date) AS ?shippedDate)
+        BIND(uri(concat(str($base), "orders/", encode_for_uri(?orderID), "/#shipment")) AS ?shipment)
+        BIND(concat("Shipped ", ?shippedDateString) AS ?shipmentTitle)
     }
     OPTIONAL {
         ?order_row <#shipRegion> ?shipRegion
     }
+    # 19 orders carry no postal code; requiring one here dropped them from the import
+    OPTIONAL {
+        ?order_row <#shipPostalCode> ?shipPostalCode
+    }
 
     BIND(uri(concat(str($base), "orders/")) AS ?container)
     BIND(uri(concat(str(?container), encode_for_uri(?orderID), "/")) AS ?graph)
     BIND(uri(concat(str(?graph), "#this")) AS ?order)
     BIND(uri(concat(str(?graph), "#delivery")) AS ?orderDelivery)
     BIND(uri(concat(str(?graph), "#delivery-address")) AS ?deliveryAddress)
+    BIND(uri(concat(str(?graph), "#shipping")) AS ?shippingOffer)
+    BIND(uri(concat(str(?graph), "#freight")) AS ?freightCharge)
     BIND(uri(concat(str($base), "employees/", encode_for_uri(?employeeID), "/#this")) AS ?employee)
     BIND(uri(concat(str($base), "customers/", encode_for_uri(?customerID), "/#this")) AS ?customer)
     BIND(uri(concat(str($base), "shippers/", encode_for_uri(?shipVia), "/#this")) AS ?shipper)
     BIND(strdt(?orderDateString, xsd:date) AS ?orderDate)
     BIND(strdt(?requiredDateString, xsd:date) AS ?requiredDate)
     BIND(strdt(?freightString, xsd:float) AS ?freight)
+    BIND(IF(BOUND(?shippedDate),
+            IF(?shippedDate > ?requiredDate, schema:OrderProblem, schema:OrderDelivered),
+            schema:OrderProcessing) AS ?status)
 }
diff --git a/demo/northwind-traders/products.ttl b/demo/northwind-traders/products.ttl
index 84ba5771..51ec5be1 100644
--- a/demo/northwind-traders/products.ttl
+++ b/demo/northwind-traders/products.ttl
@@ -1,4 +1,4 @@
-  @prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+  @prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
   @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
   @prefix dct:    <http://purl.org/dc/terms/> .
   @prefix sp:     <http://spinrdf.org/sp#> .
@@ -10,24 +10,35 @@
   <> a dh:Container ;
       dct:title "Products" ;
       rdf:_1 <#products-intro> ;
-      rdf:_2 <#top-selling-products-block> ;
-      rdf:_3 <#category-analysis-intro> ;
-      rdf:_4 <#revenue-by-category-block> ;
-      rdf:_5 <#products-by-supplier-block> ;
-      rdf:_6 <#supplier-context> ;
-      rdf:_7 <#select-products> .
+      rdf:_2 <#select-products> ;
+      rdf:_3 <#performance-intro> ;
+      rdf:_4 <#top-selling-products-block> ;
+      rdf:_5 <#supplier-context> ;
+      rdf:_6 <#products-by-supplier-block> .
 
   # Intro XHTML
   <#products-intro> a ldh:XHTML ;
       rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-          <h3>Product analytics</h3>
-          <p>Analyze product performance, category distribution, and supplier relationships.
-             The Northwind catalog includes products across multiple categories from various suppliers,
-             each with unique pricing and inventory characteristics.</p>
+          <div class="ldh-section">
+              <h2>The catalogue</h2>
+              <p>Every product Northwind sells, with its category, supplier and unit price. Open one to see the
+                 orders it appears in and the supplier behind it.</p>
+          </div>
+      </div>"""^^rdf:XMLLiteral .
+
+  # Performance intro
+  <#performance-intro> a ldh:XHTML ;
+      rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+          <div class="ldh-section">
+              <h2>Product performance</h2>
+              <p>Which lines actually carry the revenue? Category-level breakdowns live under
+                 <a href="../categories/">Categories</a>.</p>
+          </div>
       </div>"""^^rdf:XMLLiteral .
 
   # Chart block (wrapped in ldh:Object per ContentMode contract)
   <#top-selling-products-block> a ldh:Object ;
+      dct:title "Top selling products" ;
       rdf:value <#top-selling-products> .
 
   <#top-selling-products> a ldh:ResultSetChart ;
@@ -47,9 +58,7 @@ WHERE
   { GRAPH ?orderGraph
       { ?order    schema:orderedItem    ?orderItem .
         ?orderItem  schema:orderedItem  ?product ;
-                  schema:orderQuantity  ?quantity ;
-                  schema:price          ?price
-      BIND (?quantity * ?price AS ?sale)
+                  schema:price          ?sale
       }
     GRAPH ?productGraph
       { ?product  schema:name  ?productName }
@@ -58,50 +67,9 @@ GROUP BY ?product ?productName
 ORDER BY DESC(?totalSales)
 LIMIT   5""" .
 
-  # Category analysis intro
-  <#category-analysis-intro> a ldh:XHTML ;
-      rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-          <h4>Category performance</h4>
-          <p>Understanding how products and revenue are distributed across categories helps identify
-             market strengths and opportunities. The following charts break down revenue and product count by category.</p>
-      </div>"""^^rdf:XMLLiteral .
-
-  # Revenue by category chart (wrapped in ldh:Object per ContentMode contract)
-  <#revenue-by-category-block> a ldh:Object ;
-      rdf:value <#revenue-by-category> .
-
-  <#revenue-by-category> a ldh:ResultSetChart ;
-      dct:title "Revenue by category" ;
-      spin:query <#category-revenue-query> ;
-      ldh:chartType <https://w3id.org/atomgraph/client#BarChart> ;
-      ldh:categoryVarName "categoryName" ;
-      ldh:seriesVarName "revenue" .
-
-  <#category-revenue-query> a sp:Select ;
-      dct:title "Category revenue" ;
-      sp:text """PREFIX schema: <https://schema.org/>
-
-SELECT ?categoryName (SUM(?sale) AS ?revenue)
-WHERE {
-    GRAPH ?orderGraph {
-        ?order schema:orderedItem ?orderItem .
-        ?orderItem schema:orderedItem ?product ;
-                   schema:orderQuantity ?quantity ;
-                   schema:price ?price .
-        BIND(?quantity * ?price AS ?sale)
-    }
-    GRAPH ?productGraph {
-        ?product schema:category ?category .
-    }
-    GRAPH ?categoryGraph {
-        ?category schema:name ?categoryName .
-    }
-}
-GROUP BY ?category ?categoryName
-ORDER BY DESC(?revenue)""" .
-
   # Products by supplier chart (wrapped in ldh:Object per ContentMode contract)
   <#products-by-supplier-block> a ldh:Object ;
+      dct:title "Products by supplier" ;
       rdf:value <#products-by-supplier> .
 
   <#products-by-supplier> a ldh:ResultSetChart ;
@@ -122,7 +90,7 @@ WHERE {
                  schema:provider ?supplier .
     }
     GRAPH ?supplierGraph {
-        ?supplier schema:name ?supplierName .
+        ?supplier schema:legalName ?supplierName .
     }
 }
 GROUP BY ?supplier ?supplierName
@@ -132,17 +100,21 @@ LIMIT 10""" .
   # Supplier context
   <#supplier-context> a ldh:XHTML ;
       rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-          <h4>Supplier relationships</h4>
-          <p>Northwind Traders works with suppliers worldwide to source products. The distribution of products
-             across suppliers shows which partnerships are most productive and may indicate supply chain dependencies.</p>
+          <div class="ldh-section">
+              <h2>Supplier relationships</h2>
+              <p>Northwind sources from suppliers worldwide. How the catalogue spreads across them shows which
+                 partnerships carry the range — and where the supply chain concentrates.</p>
+          </div>
       </div>"""^^rdf:XMLLiteral .
 
   # Object block (references the view)
   <#select-products> a ldh:Object ;
+      dct:title "All products" ;
       rdf:value <#select-products-view> .
 
   # View block (references the query, uses TableMode)
   <#select-products-view> a ldh:View ;
+      dct:title "All products" ;
       spin:query <#select-products-query> ;
       ac:mode <https://w3id.org/atomgraph/client#TableMode> .
 
diff --git a/demo/northwind-traders/products/products.rq b/demo/northwind-traders/products/products.rq
index 1f482dbd..fa0000a3 100644
--- a/demo/northwind-traders/products/products.rq
+++ b/demo/northwind-traders/products/products.rq
@@ -8,7 +8,8 @@ CONSTRUCT
     GRAPH ?graph
     {
         ?graph dct:title ?productName ;
-            foaf:primaryTopic ?product .
+            foaf:primaryTopic ?product ;
+            foaf:topic ?offer .
 
         ?product a schema:Product ;
             schema:identifier ?productID ;
@@ -17,11 +18,21 @@ CONSTRUCT
             schema:provider ?supplier ;
             schema:category ?category ;
             schema:description ?quantityPerUnit ;
-            schema:price ?unitPrice .
+            schema:offers ?offer .
             # ?unitsInStock ;
             # ?unitsOnOrder ;
             # ?reorderLevel ;
             # ?discontinued - schema:Discontinued
+
+        # schema:Product has no price of its own - schema:price belongs to schema:Offer,
+        # which a product reaches through schema:offers. This is the catalogue price;
+        # what a given order line was actually billed at lives on that line's own offer.
+        ?offer a schema:Offer ;
+            foaf:page ?graph ;
+            dct:title "List price" ;
+            schema:itemOffered ?product ;
+            schema:price ?unitPrice ;
+            schema:priceCurrency "USD" .
     }
 }
 WHERE
@@ -40,6 +51,7 @@ WHERE
     BIND (uri(concat(str($base), "products/")) AS ?container)
     BIND(uri(concat(str(?container), encode_for_uri(?productID), "/")) AS ?graph)
     BIND(uri(concat(str(?graph), "#this")) AS ?product)
+    BIND(uri(concat(str(?graph), "#offer")) AS ?offer)
     BIND(uri(concat(str($base), "suppliers/", encode_for_uri(?supplierID), "/#this")) AS ?supplier)
     BIND(uri(concat(str($base), "categories/", encode_for_uri(?categoryID), "/#this")) AS ?category)
     BIND (STRDT(?unitPriceString, xsd:float) AS ?unitPrice)
diff --git a/demo/northwind-traders/regions.ttl b/demo/northwind-traders/regions.ttl
index f9f80001..031ea12e 100644
--- a/demo/northwind-traders/regions.ttl
+++ b/demo/northwind-traders/regions.ttl
@@ -1,4 +1,4 @@
-  @prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+  @prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
   @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
   @prefix dct:    <http://purl.org/dc/terms/> .
   @prefix sp:     <http://spinrdf.org/sp#> .
@@ -8,14 +8,27 @@
   # Main container document
   <> a dh:Container ;
       dct:title "Regions" ;
-      rdf:_1 <#select-regions> .
+      rdf:_1 <#regions-intro> ;
+      rdf:_2 <#select-regions> .
+
+  # Intro XHTML
+  <#regions-intro> a ldh:XHTML ;
+      rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+          <div class="ldh-section">
+              <h2>Sales regions</h2>
+              <p>The top level of the sales geography. Each region contains the
+                 <a href="../territories/">territories</a> that reps are assigned to.</p>
+          </div>
+      </div>"""^^rdf:XMLLiteral .
 
   # Object block (references the view)
   <#select-regions> a ldh:Object ;
+      dct:title "All regions" ;
       rdf:value <#select-regions-view> .
 
   # View block (references the query, no mode specified - uses default)
   <#select-regions-view> a ldh:View ;
+      dct:title "All regions" ;
       spin:query <#select-regions-query> .
 
   # SELECT query
diff --git a/demo/northwind-traders/root.ttl b/demo/northwind-traders/root.ttl
index 4bb26a96..7877be73 100644
--- a/demo/northwind-traders/root.ttl
+++ b/demo/northwind-traders/root.ttl
@@ -2,7 +2,7 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:	<http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
 @prefix xsd:	<http://www.w3.org/2001/XMLSchema#> .
-@prefix dh:	<https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:	<https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:	<http://purl.org/dc/terms/> .
 @prefix sioc:	<http://rdfs.org/sioc/ns#> .
 @prefix spin:  <http://spinrdf.org/spin#> .
@@ -12,35 +12,28 @@
 <> a def:Root ;
     dct:title "Northwind Traders" ;
     dct:description "Knowledge Graph representation of the Northwind Traders sample database" ;
-    rdf:_1 <#page-header> ;
-    rdf:_2 <#overview-intro> ;
-    rdf:_3 <#sales-trend-block> ;
-    rdf:_4 <#revenue-by-country-block> ;
-    rdf:_5 <#top-selling-products> ;
-    rdf:_6 <#top-manager-header> ;
-    rdf:_7 <#top-manager> ;
-    rdf:_8 <#navigation-prompt> ;
-    rdf:_9 <#select-children> .
-
-<#page-header> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-        <div class="page-header">
-            <h2>Northwind Traders</h2>
-            <p class="lead">The iconic sample database converted to an RDF Knowledge Graph</p>
-        </div>
-        <p>Features include CSV data <a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/imports/csv/" target="_blank">imports</a>, SPARQL-based <a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/reference/data-model/resources/charts/" target="_blank">charts</a>, faceted search and related results (parallax navigation) as well as
-            rich documents composed of structured content backed by RDF Knowledge Graph data.</p>
-        <p>This application was created on <a href="https://atomgraph.github.io/LinkedDataHub/" target="_blank">LinkedDataHub</a> using the low code paradigm: no programming was required, only scripts that
-            invoke LinkedDataHub's CLI commands.</p>
-    </div>"""^^rdf:XMLLiteral .
+    rdf:_1 <#overview-intro> ;
+    rdf:_2 <#sales-trend-block> ;
+    rdf:_3 <#margin-intro> ;
+    rdf:_4 <#discount-rate-block> ;
+    rdf:_5 <#revenue-by-country-block> ;
+    rdf:_6 <#top-selling-products> ;
+    rdf:_7 <#top-manager-header> ;
+    rdf:_8 <#top-manager> ;
+    rdf:_9 <#navigation-prompt> ;
+    rdf:_10 <#select-children> .
 
 <#overview-intro> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-        <h3>Executive dashboard</h3>
-        <p>Explore key business metrics including sales trends, geographic distribution, and product performance. All visualizations are generated from live SPARQL queries over the RDF Knowledge Graph.</p>
+        <div class="ldh-section">
+            <h2>Executive dashboard</h2>
+            <p>Sales performance at a glance — how revenue is trending, what the discounting costs,
+               where the markets are and which products carry the mix.</p>
+        </div>
     </div>"""^^rdf:XMLLiteral .
 
 <#sales-trend-block> a ldh:Object ;
+    dct:title "Monthly sales trend" ;
     rdf:value <#sales-trend> .
 
 <#sales-trend> a ldh:ResultSetChart ;
@@ -60,16 +53,83 @@ WHERE {
         ?order a schema:Order ;
                schema:orderDate ?orderDate ;
                schema:orderedItem ?orderItem .
+        ?orderItem schema:price ?sale .
+        BIND(SUBSTR(STR(?orderDate), 1, 7) AS ?month)
+    }
+    # The order book stops part-way through its final month, which would render as a
+    # cliff rather than a trend. Drop that month — derived from the data, not pinned
+    # to a date, so it stays correct if the dataset grows.
+    {
+        SELECT (SUBSTR(STR(MAX(?anyDate)), 1, 7) AS ?partialMonth)
+        WHERE {
+            GRAPH ?g { ?anyOrder a schema:Order ; schema:orderDate ?anyDate }
+        }
+    }
+    FILTER (?month < ?partialMonth)
+}
+GROUP BY ?month
+ORDER BY ?month""" .
+
+<#margin-intro> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+        <div class="ldh-section">
+            <h2>What the deals cost</h2>
+            <p>Revenue is what was billed, not what was listed. Every order line keeps the catalogue
+               price it started from alongside the price it actually went out at, so the gap between
+               them is what the sales rep gave away to win the deal. Measured against gross, that gap
+               swings between roughly 4% and 11% month to month — a commercial lever in its own
+               right, and one that never shows up in a revenue chart.</p>
+        </div>
+    </div>"""^^rdf:XMLLiteral .
+
+<#discount-rate-block> a ldh:Object ;
+    dct:title "Discount rate" ;
+    rdf:value <#discount-rate> .
+
+<#discount-rate> a ldh:ResultSetChart ;
+    dct:title "Discount rate" ;
+    spin:query <#discount-by-month-query> ;
+    ldh:chartType <https://w3id.org/atomgraph/client#LineChart> ;
+    ldh:categoryVarName "month" ;
+    ldh:seriesVarName "discountPercent" .
+
+<#discount-by-month-query> a sp:Select ;
+    dct:title "Discount rate by month" ;
+    sp:text """PREFIX schema: <https://schema.org/>
+
+SELECT ?month (ROUND(SUM(?discount) * 1000 / SUM(?gross)) / 10 AS ?discountPercent)
+WHERE {
+    GRAPH ?orderGraph {
+        ?order a schema:Order ;
+               schema:orderDate ?orderDate ;
+               schema:orderedItem ?orderItem .
+        # the line's own price is net of discount; the catalogue price it was struck
+        # against hangs off it as a ListPrice specification
         ?orderItem schema:orderQuantity ?quantity ;
-                   schema:price ?price .
-        BIND(?quantity * ?price AS ?sale)
+                   schema:price ?net ;
+                   schema:priceSpecification ?listPrice .
+        ?listPrice schema:priceType schema:ListPrice ;
+                   schema:price ?unitPrice .
         BIND(SUBSTR(STR(?orderDate), 1, 7) AS ?month)
+        BIND(?quantity * ?unitPrice AS ?gross)
+        BIND(?gross - ?net AS ?discount)
+    }
+    # The order book stops part-way through its final month, which would render as a
+    # cliff rather than a trend. Drop that month — derived from the data, not pinned
+    # to a date, so it stays correct if the dataset grows.
+    {
+        SELECT (SUBSTR(STR(MAX(?anyDate)), 1, 7) AS ?partialMonth)
+        WHERE {
+            GRAPH ?g { ?anyOrder a schema:Order ; schema:orderDate ?anyDate }
+        }
     }
+    FILTER (?month < ?partialMonth)
 }
 GROUP BY ?month
 ORDER BY ?month""" .
 
 <#revenue-by-country-block> a ldh:Object ;
+    dct:title "Revenue by country" ;
     rdf:value <#revenue-by-country> .
 
 <#revenue-by-country> a ldh:ResultSetChart ;
@@ -88,11 +148,9 @@ WHERE {
     GRAPH ?orderGraph {
         ?order schema:orderedItem ?orderItem ;
                schema:orderDelivery ?delivery .
-        ?orderItem schema:orderQuantity ?quantity ;
-                   schema:price ?price .
+        ?orderItem schema:price ?sale .
         ?delivery schema:deliveryAddress ?address .
         ?address schema:addressCountry ?country .
-        BIND(?quantity * ?price AS ?sale)
     }
 }
 GROUP BY ?country
@@ -100,22 +158,29 @@ ORDER BY DESC(?revenue)
 LIMIT 10""" .
 
 <#top-selling-products> a ldh:Object ;
+    dct:title "Top selling products" ;
     rdf:value <products/#top-selling-products> .
 
 <#top-manager-header> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-        <h2>Top manager</h2>
-        <p>Meet the top manager of Northwind Traders.</p>
+        <div class="ldh-section">
+            <h2>Sales leadership</h2>
+            <p>The Vice President of Sales, with the territories, reports and order history attached to the role.</p>
+        </div>
     </div>"""^^rdf:XMLLiteral .
 
 <#top-manager> a ldh:Object ;
+    dct:title "Vice President, Sales" ;
     rdf:value <employees/2/#this> .
 
 <#navigation-prompt> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-        <h3>Explore more</h3>
-        <p>Dive deeper into detailed analytics by exploring the containers below. Each section provides comprehensive insights into products, orders, customers, employees, and more.</p>
+        <div class="ldh-section">
+            <h2>Browse the business</h2>
+            <p>Open <a href="orders/">Orders</a> for the order book and its master–detail line items, or go straight to products, customers, employees and the reference data behind them.</p>
+        </div>
     </div>"""^^rdf:XMLLiteral .
 
 <#select-children> a ldh:Object ;
+    dct:title "Sections" ;
     rdf:value ldh:ChildrenView .
diff --git a/demo/northwind-traders/screenshot.gif b/demo/northwind-traders/screenshot.gif
index 2d270d71..dcc7859c 100644
Binary files a/demo/northwind-traders/screenshot.gif and b/demo/northwind-traders/screenshot.gif differ
diff --git a/demo/northwind-traders/shippers.ttl b/demo/northwind-traders/shippers.ttl
index 2a5b1b9e..c9c0a4b4 100644
--- a/demo/northwind-traders/shippers.ttl
+++ b/demo/northwind-traders/shippers.ttl
@@ -1,4 +1,4 @@
-  @prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+  @prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
   @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
   @prefix dct:    <http://purl.org/dc/terms/> .
   @prefix sp:     <http://spinrdf.org/sp#> .
@@ -8,14 +8,26 @@
   # Main container document
   <> a dh:Container ;
       dct:title "Shippers" ;
-      rdf:_1 <#select-shippers> .
+      rdf:_1 <#shippers-intro> ;
+      rdf:_2 <#select-shippers> .
+
+  # Intro XHTML
+  <#shippers-intro> a ldh:XHTML ;
+      rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+          <div class="ldh-section">
+              <h2>Getting it there</h2>
+              <p>The carriers that deliver Northwind's orders. Open one to see every delivery it handled.</p>
+          </div>
+      </div>"""^^rdf:XMLLiteral .
 
   # Object block (references the view)
   <#select-shippers> a ldh:Object ;
+      dct:title "All shippers" ;
       rdf:value <#select-shippers-view> .
 
   # View block (references the query, no mode specified - uses default)
   <#select-shippers-view> a ldh:View ;
+      dct:title "All shippers" ;
       spin:query <#select-shippers-query> .
 
   # SELECT query
diff --git a/demo/northwind-traders/suppliers.ttl b/demo/northwind-traders/suppliers.ttl
index 2f5b755e..0d202d0c 100644
--- a/demo/northwind-traders/suppliers.ttl
+++ b/demo/northwind-traders/suppliers.ttl
@@ -1,4 +1,4 @@
-  @prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+  @prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
   @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
   @prefix dct:    <http://purl.org/dc/terms/> .
   @prefix sp:     <http://spinrdf.org/sp#> .
@@ -9,14 +9,27 @@
   # Main container document
   <> a dh:Container ;
       dct:title "Suppliers" ;
-      rdf:_1 <#select-suppliers> .
+      rdf:_1 <#suppliers-intro> ;
+      rdf:_2 <#select-suppliers> .
+
+  # Intro XHTML
+  <#suppliers-intro> a ldh:XHTML ;
+      rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+          <div class="ldh-section">
+              <h2>Where the goods come from</h2>
+              <p>The companies Northwind buys from. Open a supplier to see everything it supplies to the
+                 <a href="../products/">catalogue</a>.</p>
+          </div>
+      </div>"""^^rdf:XMLLiteral .
 
   # Object block (references the view)
   <#select-suppliers> a ldh:Object ;
+      dct:title "All suppliers" ;
       rdf:value <#select-suppliers-view> .
 
   # View block (references the query, uses TableMode)
   <#select-suppliers-view> a ldh:View ;
+      dct:title "All suppliers" ;
       spin:query <#select-suppliers-query> ;
       ac:mode <https://w3id.org/atomgraph/client#TableMode> .
 
diff --git a/demo/northwind-traders/territories.ttl b/demo/northwind-traders/territories.ttl
index cb1575f4..4f2c8543 100644
--- a/demo/northwind-traders/territories.ttl
+++ b/demo/northwind-traders/territories.ttl
@@ -1,4 +1,4 @@
-  @prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+  @prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
   @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
   @prefix dct:    <http://purl.org/dc/terms/> .
   @prefix sp:     <http://spinrdf.org/sp#> .
@@ -9,14 +9,27 @@
   # Main container document
   <> a dh:Container ;
       dct:title "Territories" ;
-      rdf:_1 <#select-territories> .
+      rdf:_1 <#territories-intro> ;
+      rdf:_2 <#select-territories> .
+
+  # Intro XHTML
+  <#territories-intro> a ldh:XHTML ;
+      rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+          <div class="ldh-section">
+              <h2>Sales territories</h2>
+              <p>The territories reps cover, plotted on the map and grouped into
+                 <a href="../regions/">regions</a>.</p>
+          </div>
+      </div>"""^^rdf:XMLLiteral .
 
   # Object block (references the view)
   <#select-territories> a ldh:Object ;
+      dct:title "All territories" ;
       rdf:value <#select-territories-view> .
 
   # View block (references the query, uses MapMode)
   <#select-territories-view> a ldh:View ;
+      dct:title "All territories" ;
       spin:query <#select-territories-query> ;
       ac:mode <https://w3id.org/atomgraph/client#MapMode> .
 
diff --git a/demo/northwind-traders/territories/territories.rq b/demo/northwind-traders/territories/territories.rq
index 25c3ddf2..bca97887 100644
--- a/demo/northwind-traders/territories/territories.rq
+++ b/demo/northwind-traders/territories/territories.rq
@@ -2,6 +2,7 @@ PREFIX foaf:       <http://xmlns.com/foaf/0.1/>
 PREFIX dct:        <http://purl.org/dc/terms/>
 PREFIX schema:     <https://schema.org/>
 PREFIX geo:        <http://www.w3.org/2003/01/geo/wgs84_pos#>
+PREFIX xsd:        <http://www.w3.org/2001/XMLSchema#>
 
 CONSTRUCT
 {
@@ -24,11 +25,13 @@ WHERE
     ?territory_row <#territoryID> ?territoryID ;
         <#territoryDescription> ?territoryDescription ;
         <#regionID> ?regionID ;
-        <#latitude> ?latitude ;
-        <#longitude> ?longitude .
+        <#latitude> ?latitudeString ;
+        <#longitude> ?longitudeString .
 
     BIND(uri(concat(str($base), "territories/")) AS ?container)
     BIND(uri(concat(str(?container), encode_for_uri(?territoryID), "/")) AS ?graph)
     BIND(uri(concat(str(?graph), "#this")) AS ?territory)
     BIND(uri(concat(str($base), "regions/", encode_for_uri(?regionID), "/#this")) AS ?region)
+    BIND(xsd:float(?latitudeString) AS ?latitude)
+    BIND(xsd:float(?longitudeString) AS ?longitude)
 }
diff --git a/demo/northwind-traders/update-folder.sh b/demo/northwind-traders/update-folder.sh
deleted file mode 100755
index 9e08551f..00000000
--- a/demo/northwind-traders/update-folder.sh
+++ /dev/null
@@ -1,88 +0,0 @@
-#!/bin/bash
-
-if [ "$#" -ne 5 ] && [ "$#" -ne 6 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password $pwd $abs_folder [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../ssl/owner/cert.pem Password /folder /folder/ [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file="$2"
-cert_password="$3"
-pwd="$4"
-folder="$5"
-
-if [ -n "$6" ]; then
-    proxy="$6"
-else
-    proxy="$base"
-fi
-
-ldhignore_file="$folder/.ldhignore"
-
-is_ldhignored() {
-    local name
-    name="$(basename "$1")"
-    [[ -f "$ldhignore_file" ]] || return 1
-    while IFS= read -r pattern || [[ -n "$pattern" ]]; do
-        [[ -z "$pattern" || "$pattern" == \#* ]] && continue
-        pattern="${pattern%/}"
-        [[ "$name" == $pattern ]] && return 0
-    done < "$ldhignore_file"
-    return 1
-}
-
-echo "Processing folder: $folder"  # Debug output
-
-for ttl_file in "$folder"/*.ttl; do
-  if [[ -f "$ttl_file" ]]; then
-    if git check-ignore -q "$ttl_file" 2>/dev/null || is_ldhignored "$ttl_file"; then
-      printf "Skipping %s\n" "$ttl_file"
-      continue
-    fi
-    echo "Found .ttl file: $ttl_file"  # Debug output
-    path="${ttl_file%.*}"   # strip extension
-    path="${path#*$pwd/}"   # strip leading $pwd/
-    path="${path}/"         # add trailing slash
-    printf "\n### Updating %s\n" "${base}${path}"
-    cat "$ttl_file" | turtle --base="${base}${path}" | put.sh \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      -t "application/n-triples" \
-      "${base}${path}"
-  fi
-done
-
-for file in "$folder"/*; do
-  if [[ -f "$file" ]] && [[ "$file" != *.ttl ]] && [[ "$file" != *.sh ]]; then
-    if git check-ignore -q "$file" 2>/dev/null || is_ldhignored "$file"; then
-      printf "Skipping %s\n" "$file"
-      continue
-    fi
-    stripped="${folder#$pwd/}"
-    if [[ "$stripped" == "$folder" ]]; then
-      container_path=""
-    else
-      container_path="${stripped}/"
-    fi
-    echo "Uploading file: $file to ${base}${container_path}"  # Debug output
-    add-file.sh \
-      -b "$base" \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      --title "$(basename "$file")" \
-      --file "$file" \
-      "${base}${container_path}"
-  fi
-done
-
-while IFS= read -r subdir; do
-  if git check-ignore -q "$subdir" 2>/dev/null || is_ldhignored "$subdir"; then
-    printf "Skipping %s\n" "$subdir"
-    continue
-  fi
-  ./update-folder.sh "$base" "$cert_pem_file" "$cert_password" "$pwd" "$subdir" "$proxy"
-done < <(find "$folder" -mindepth 1 -maxdepth 1 -type d -not -name '.*' -not -name 'target')
diff --git a/demo/unesco-thesaurus/.ldhignore b/demo/unesco-thesaurus/.ldhignore
index d41f3c5d..fbed3440 100644
--- a/demo/unesco-thesaurus/.ldhignore
+++ b/demo/unesco-thesaurus/.ldhignore
@@ -1,6 +1,4 @@
-admin/
-layout.xsl
 Makefile
-root.ttl
 screenshot-edit-mode.png
 screenshot.png
+*.sh
diff --git a/demo/unesco-thesaurus/Makefile b/demo/unesco-thesaurus/Makefile
index 00df9d2e..323f78c3 100644
--- a/demo/unesco-thesaurus/Makefile
+++ b/demo/unesco-thesaurus/Makefile
@@ -1,26 +1,6 @@
-SHELL := /bin/bash
+CERT_PATH_DEFAULT = ../../../LinkedDataHub/ssl/owner/keystore.p12
 
-BASE_URL_DEFAULT=https://localhost:4443/
-CERT_PATH_DEFAULT=../../../LinkedDataHub/ssl/owner/cert.pem
-PROXY_URL_DEFAULT=https://localhost:5443/
-
-install:
-	@read -p "Enter Base URL [$(BASE_URL_DEFAULT)]: " BASE_URL; \
-	BASE_URL=$${BASE_URL:-$(BASE_URL_DEFAULT)}; \
-	read -p "Enter Certificate Path [$(CERT_PATH_DEFAULT)]: " CERT_PATH; \
-	CERT_PATH=$${CERT_PATH:-$(CERT_PATH_DEFAULT)}; \
-	read -s -p "Enter Certificate Password (required): " PASSWORD; \
-	echo ""; \
-	if [ -z "$${PASSWORD}" ]; then \
-		echo "Password cannot be empty. Aborting."; \
-		exit 1; \
-	fi; \
-	read -p "Enter Proxy URL (optional) [$(PROXY_URL_DEFAULT)]: " PROXY_URL; \
-	if [ -n "$${PROXY_URL}" ]; then \
-		./install.sh "$${BASE_URL}" "$${CERT_PATH}" "$${PASSWORD}" "$${PROXY_URL}"; \
-	else \
-		./install.sh "$${BASE_URL}" "$${CERT_PATH}" "$${PASSWORD}"; \
-	fi
+include ../../lib/install.mk
 
 validate:
 	./validate-documents.sh
diff --git a/demo/unesco-thesaurus/admin/acl/create-authorizations.sh b/demo/unesco-thesaurus/admin/acl/create-authorizations.sh
deleted file mode 100755
index 1aca1bc4..00000000
--- a/demo/unesco-thesaurus/admin/acl/create-authorizations.sh
+++ /dev/null
@@ -1,50 +0,0 @@
-#!/usr/bin/env bash
-
-if [ "$#" -ne 3 ] && [ "$#" -ne 4 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/demo/skos/ ../../../../../ssl/owner/cert.pem Password [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-admin_uri() {
-    local uri="$1"
-    echo "$uri" | sed 's|://|://admin.|'
-}
-
-base="$1"
-cert_pem_file=$(realpath "$2")
-cert_password="$3"
-
-if [ -n "$4" ]; then
-    proxy="$4"
-else
-    proxy="$base"
-fi
-
-admin_base=$(admin_uri "$base")
-admin_proxy=$(admin_uri "$proxy")
-
-pwd=$(realpath "$PWD")
-
-sha1sum=$(sha1sum "$pwd"/../../layout.xsl | cut -d ' ' -f 1)
-
-create-authorization.sh \
-  -b "$admin_base" \
-  -f "$cert_pem_file" \
-  -p "$cert_password" \
-  --proxy "$admin_proxy" \
-  --label "Public layout XSLT stylesheet" \
-  --agent-class http://xmlns.com/foaf/0.1/Agent \
-  --to "${base}uploads/${sha1sum}/" \
-  --read
-
-create-authorization.sh \
-  -b "$admin_base" \
-  -f "$cert_pem_file" \
-  -p "$cert_password" \
-    --proxy "$admin_proxy" \
-  --label "Read access to graph items" \
-  --agent-class "http://www.w3.org/ns/auth/acl#AuthenticatedAgent" \
-  --to-all-in "https://www.w3.org/ns/ldt/document-hierarchy#Item" \
-  --read
diff --git a/demo/unesco-thesaurus/collections.ttl b/demo/unesco-thesaurus/collections.ttl
index 417cbac2..624cd0fa 100644
--- a/demo/unesco-thesaurus/collections.ttl
+++ b/demo/unesco-thesaurus/collections.ttl
@@ -1,4 +1,4 @@
-@prefix dh:   <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:   <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix ldh:  <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix dct:  <http://purl.org/dc/terms/> .
 @prefix sp:   <http://spinrdf.org/sp#> .
@@ -17,6 +17,7 @@
 
 # View block (references the query)
 <#select-collections-view> a ldh:View ;
+    dct:title "All collections" ;
     spin:query <#select-collections-query> .
 
 # SELECT query
diff --git a/demo/unesco-thesaurus/concept-schemes.ttl b/demo/unesco-thesaurus/concept-schemes.ttl
index 29b7bb2e..efd4b353 100644
--- a/demo/unesco-thesaurus/concept-schemes.ttl
+++ b/demo/unesco-thesaurus/concept-schemes.ttl
@@ -1,4 +1,4 @@
-@prefix dh:   <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:   <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix ldh:  <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix dct:  <http://purl.org/dc/terms/> .
 @prefix sp:   <http://spinrdf.org/sp#> .
@@ -17,6 +17,7 @@
 
 # View block (references the query)
 <#select-concept-schemes-view> a ldh:View ;
+    dct:title "All concept schemes" ;
     spin:query <#select-concept-schemes-query> .
 
 # SELECT query
diff --git a/demo/unesco-thesaurus/concept-schemes/unesco-thesaurus.ttl b/demo/unesco-thesaurus/concept-schemes/unesco-thesaurus.ttl
index 30b7a091..e1b65b98 100644
--- a/demo/unesco-thesaurus/concept-schemes/unesco-thesaurus.ttl
+++ b/demo/unesco-thesaurus/concept-schemes/unesco-thesaurus.ttl
@@ -1,5 +1,5 @@
 @prefix dct: <http://purl.org/dc/terms/> .
-@prefix dh: <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh: <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix foaf: <http://xmlns.com/foaf/0.1/> .
 
 <> a dh:Item ;
diff --git a/demo/unesco-thesaurus/concept-schemes/unesco-thesaurus/skos-import.rq b/demo/unesco-thesaurus/concept-schemes/unesco-thesaurus/skos-import.rq
index 7736270a..7ec34b79 100644
--- a/demo/unesco-thesaurus/concept-schemes/unesco-thesaurus/skos-import.rq
+++ b/demo/unesco-thesaurus/concept-schemes/unesco-thesaurus/skos-import.rq
@@ -1,4 +1,4 @@
-PREFIX dh:    <https://www.w3.org/ns/ldt/document-hierarchy#>
+PREFIX dh:    <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#>
 PREFIX sioc:  <http://rdfs.org/sioc/ns#>
 PREFIX foaf:  <http://xmlns.com/foaf/0.1/>
 PREFIX skos:  <http://www.w3.org/2004/02/skos/core#>
diff --git a/demo/unesco-thesaurus/concepts.ttl b/demo/unesco-thesaurus/concepts.ttl
index 3e8655f7..72f82287 100644
--- a/demo/unesco-thesaurus/concepts.ttl
+++ b/demo/unesco-thesaurus/concepts.ttl
@@ -1,4 +1,4 @@
-@prefix dh:   <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:   <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix ldh:  <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix dct:  <http://purl.org/dc/terms/> .
 @prefix sp:   <http://spinrdf.org/sp#> .
@@ -15,15 +15,32 @@
 # Intro XHTML
 <#concepts-intro> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-        <h3>SKOS concepts</h3>
-        <p>Concepts are the fundamental building blocks of the UNESCO Thesaurus vocabulary. Each concept represents
-           a distinct unit of thought or terminology, enriched with multilingual labels, definitions, and semantic relationships.</p>
-        <p>SKOS (Simple Knowledge Organization System) relationships connect concepts through:</p>
-        <ul>
-            <li><strong>Broader/Narrower</strong> - Hierarchical relationships forming taxonomic structures</li>
-            <li><strong>Related</strong> - Associative relationships between concepts in the same domain</li>
-            <li><strong>Exact/Close/Related Matches</strong> - Mappings to concepts in external vocabularies</li>
-        </ul>
+        <div class="ldh-section">
+            <h2>The concepts</h2>
+            <p>Every concept carries its labels in each language the thesaurus publishes, and its place in the
+               hierarchy. Open one to get the concept tree beside it — that column is the taxonomy editor package's,
+               not the platform's.</p>
+        </div>
+        <p>SKOS connects concepts three ways:</p>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="hierarchical-pane" aria-selected="true" class="ac-tab is-on" id="hierarchical-tab" role="tab" type="button"><span class="ac-tab-lbl">Hierarchical</span></button>
+                <button aria-controls="associative-pane" aria-selected="false" class="ac-tab" id="associative-tab" role="tab" type="button"><span class="ac-tab-lbl">Associative</span></button>
+                <button aria-controls="matches-pane" aria-selected="false" class="ac-tab" id="matches-tab" role="tab" type="button"><span class="ac-tab-lbl">Matches</span></button>
+            </div>
+            <div aria-labelledby="hierarchical-tab" class="ac-tabpanel" id="hierarchical-pane" role="tabpanel">
+                <p><strong>Broader/Narrower</strong> relationships form the taxonomic backbone: every concept links up to more general concepts and down to more specific ones, and parallax
+                   navigation follows those links in either direction.</p>
+            </div>
+            <div aria-labelledby="associative-tab" class="ac-tabpanel" hidden="hidden" id="associative-pane" role="tabpanel">
+                <p><strong>Related</strong> relationships associate concepts across the hierarchy — concepts in the same domain that are neither broader nor narrower than each other.</p>
+            </div>
+            <div aria-labelledby="matches-tab" class="ac-tabpanel" hidden="hidden" id="matches-pane" role="tabpanel">
+                <p><strong>Exact, close, broad and related matches</strong> map concepts to external vocabularies. The Northwind Traders demo maps its product categories here: its
+                   <em>Beverages</em> category is a <code>skos:closeMatch</code> of this thesaurus's <a href="https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept3683/" target="_blank">Beverages</a> concept, <em>Condiments</em> a
+                   <code>skos:broadMatch</code> of <a href="https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept1812/" target="_blank">Food</a>, and <em>Confections</em> a <code>skos:relatedMatch</code> of <a href="https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept3495/" target="_blank">Sugar</a>.</p>
+            </div>
+        </div>
         <p>Browse the concepts below and use parallax navigation to explore their rich semantic network.</p>
     </div>"""^^rdf:XMLLiteral .
 
@@ -33,6 +50,7 @@
 
 # View block (references the query)
 <#select-concepts-view> a ldh:View ;
+    dct:title "All concepts" ;
     spin:query <#select-concepts-query> .
 
 # SELECT query
diff --git a/demo/unesco-thesaurus/import-rdf.sh b/demo/unesco-thesaurus/import-rdf.sh
deleted file mode 100755
index 86c9d743..00000000
--- a/demo/unesco-thesaurus/import-rdf.sh
+++ /dev/null
@@ -1,41 +0,0 @@
-#!/usr/bin/env bash
-
-if [ "$#" -ne 3 ] && [ "$#" -ne 4 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../../ssl/owner/cert.pem Password [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file=$(realpath "$2")
-cert_password="$3"
-
-if [ -n "$4" ]; then
-    proxy="$4"
-else
-    proxy="$base"
-fi
-
-pwd=$(realpath "$PWD")
-
-item=$(create-item.sh \
-  -b "$base" \
-  -f "$cert_pem_file" \
-  -p "$cert_password" \
-  --proxy "$proxy" \
-  --title "Unesco Thesaurus" \
-  --slug "unesco-thesaurus" \
-  --container "${base}concept-schemes/"
-)
-
-import-rdf.sh \
-  -b "$base" \
-  -f "$cert_pem_file" \
-  -p "$cert_password" \
-  --proxy "$proxy" \
-  --title "Unesco Thesaurus SKOS" \
-  --query-file "$pwd/concept-schemes/unesco-thesaurus/skos-import.rq" \
-  --rdf-file "$pwd/concept-schemes/unesco-thesaurus/unesco-thesaurus.ttl" \
-  --content-type "text/turtle" \
-  "$item"
diff --git a/demo/unesco-thesaurus/install.sh b/demo/unesco-thesaurus/install.sh
index 3e5510bc..7720e49b 100755
--- a/demo/unesco-thesaurus/install.sh
+++ b/demo/unesco-thesaurus/install.sh
@@ -1,54 +1,44 @@
 #!/usr/bin/env bash
-
-if [ "$#" -ne 3 ] && [ "$#" -ne 4 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../../LinkedDataHub/ssl/owner/cert.pem Password [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file=$(realpath "$2")
-cert_password="$3"
-
-if [ -n "$4" ]; then
-    proxy="$4"
-else
-    proxy="$base"
-fi
-
-pwd="$(realpath "$PWD")"
-
-printf "\n### Creating authorization to make the app public\n\n"
-
-make-public.sh -b "$base" -f "$cert_pem_file" -p "$cert_password" --proxy "$proxy"
-
-printf "\n### Creating authorizations\n\n"
-
-cd admin/acl
-
-./create-authorizations.sh "$base" "$cert_pem_file" "$cert_password" "$proxy"
-
-cd ../..
-
-printf "\n### Updating documents and uploading files\n\n"
-
-if [[ -f "root.ttl" ]]; then
-  printf "\n### Updating %s\n" "$base"
-  cat root.ttl | turtle --base="$base" | put.sh \
-    -f "$cert_pem_file" \
-    -p "$cert_password" \
-    --proxy "$proxy" \
-    -t "application/n-triples" \
-    "$base"
-fi
-
-./update-folder.sh "$base" "$cert_pem_file" "$cert_password" "$pwd" "$pwd" "$proxy"
-
-printf "\n### Installing SKOS package\n\n"
-
-install-package.sh -b "$base" -f "$cert_pem_file" -p "$cert_password" --proxy "$proxy" --package "https://packages.linkeddatahub.com/skos/#this"
-
-printf "\n### Importing SKOS vocabulary\n\n"
-
-./import-rdf.sh "$base" "$cert_pem_file" "$cert_password" "$proxy"
+# Installs the app onto a LinkedDataHub instance with the ldh CLI: makes it public, grants
+# authenticated agents read access to its items, pushes the document tree with its files, imports the
+# taxonomy editor package and imports the UNESCO Thesaurus SKOS data. The ontology, constructors,
+# constraints and stylesheet all come from the package.
+#
+# Reads LDH_BASE, LDH_CERT_FILE, LDH_CERT_PASSWORD and optionally LDH_PROXY; `make install` prompts
+# for them. Re-running converges on the same documents — PUT replaces each one — but make-public,
+# the authorization and the RDF import are POSTs, so each run adds another of each.
+set -euo pipefail
+
+app_dir="$(cd "$(dirname "$0")" && pwd)"
+. "$app_dir/../../lib/ldh-app.sh"
+ldh_app_require_env
+
+admin_base=$(ldh_app_admin_uri "$LDH_BASE")
+admin_proxy=$(ldh_app_admin_uri "$LDH_PROXY")
+
+ldh_app_step "Creating authorization to make the app public"
+ldh admin make-public
+
+ldh_app_step "Creating authorization for authenticated agents to read items"
+ldh admin create authorization \
+  -b "$admin_base" \
+  --proxy "$admin_proxy" \
+  --label "Read access to graph items" \
+  --agent-class "http://www.w3.org/ns/auth/acl#AuthenticatedAgent" \
+  --to-all-in "https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Item" \
+  --read
+
+ldh_app_step "Pushing documents and files"
+ldh push --dir "$app_dir" "$LDH_BASE"
+
+ldh_app_step "Importing taxonomy editor package"
+ldh packages add --package "https://packages.linkeddatahub.com/editor/taxonomy/#this"
+
+ldh_app_step "Importing SKOS vocabulary"
+# into the concept scheme's document, which the push created from concept-schemes/unesco-thesaurus.ttl
+ldh import rdf \
+  --title "Unesco Thesaurus SKOS" \
+  --query-file "$app_dir/concept-schemes/unesco-thesaurus/skos-import.rq" \
+  --rdf-file "$app_dir/concept-schemes/unesco-thesaurus/unesco-thesaurus.ttl" \
+  --content-type "text/turtle" \
+  "${LDH_BASE}concept-schemes/unesco-thesaurus/"
diff --git a/demo/unesco-thesaurus/layout.xsl b/demo/unesco-thesaurus/layout.xsl
deleted file mode 100644
index bea9ee24..00000000
--- a/demo/unesco-thesaurus/layout.xsl
+++ /dev/null
@@ -1,61 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE xsl:stylesheet [
-    <!ENTITY ldh    "https://w3id.org/atomgraph/linkeddatahub#">
-    <!ENTITY ac     "https://w3id.org/atomgraph/client#">
-    <!ENTITY rdf    "http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-    <!ENTITY rdfs   "http://www.w3.org/2000/01/rdf-schema#">
-    <!ENTITY xsd    "http://www.w3.org/2001/XMLSchema#">
-    <!ENTITY skos   "http://www.w3.org/2004/02/skos/core#">
-    <!ENTITY srx    "http://www.w3.org/2005/sparql-results#">
-    <!ENTITY foaf   "http://xmlns.com/foaf/0.1/">
-]>
-<xsl:stylesheet version="2.0"
-xmlns="http://www.w3.org/1999/xhtml"
-xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-xmlns:xhtml="http://www.w3.org/1999/xhtml"
-xmlns:xs="http://www.w3.org/2001/XMLSchema"
-xmlns:ldh="&ldh;"
-xmlns:ac="&ac;"
-xmlns:rdf="&rdf;"
-xmlns:rdfs="&rdfs;"
-xmlns:xsd="&xsd;"
-xmlns:skos="&skos;"
-xmlns:srx="&srx;"
-xmlns:foaf="&foaf;"
-xmlns:bs2="http://graphity.org/xsl/bootstrap/2.3.2"
-exclude-result-prefixes="#all">
-
-    <xsl:param name="ldh:base" as="xs:anyURI" static="yes"/>
-
-    <xsl:import _href="{resolve-uri('static/com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/layout.xsl', $ldh:base)}"/>
-
-    <xsl:param name="foaf:Agent" as="document-node()?"/>
-
-    <xsl:template match="rdf:RDF | srx:sparql" mode="xhtml:Style">
-        <xsl:param name="load-wymeditor" select="exists($foaf:Agent//@rdf:about)" as="xs:boolean"/>
-        <xsl:param name="load-yasqe" select="true()" as="xs:boolean"/>
-
-        <xsl:apply-imports/>
-
-        <!-- inject custom Bootstrap theme that overrides the default one -->
-        <link href="{resolve-uri('static/com/linkeddatahub/demo/skos/css/bootstrap.css', $ac:contextUri)}" rel="stylesheet" type="text/css"/>
-        <!-- re-apply LinkedDataHub's Bootstrap customizations -->
-        <link href="{resolve-uri('static/com/atomgraph/linkeddatahub/css/bootstrap.css', $ac:contextUri)}" rel="stylesheet" type="text/css"/>
-
-        <xsl:if test="$load-wymeditor">
-            <link href="{resolve-uri('static/com/atomgraph/linkeddatahub/js/wymeditor/skins/default/skin.css', $ac:contextUri)}" rel="stylesheet" type="text/css"/>
-        </xsl:if>
-        <xsl:if test="$load-yasqe">
-            <link href="{resolve-uri('static/css/yasqe.css', $ac:contextUri)}" rel="stylesheet" type="text/css"/>
-        </xsl:if>
-    </xsl:template>
-
-    <xsl:template match="rdf:RDF" mode="xhtml:Style">
-        <xsl:next-match/>
-
-        <link href="{resolve-uri('static/com/linkeddatahub/demo/skos/css/bootstrap.css', $ac:contextUri)}" rel="stylesheet" type="text/css"/>
-    </xsl:template>
-
-    <xsl:template match="skos:narrower | skos:broader | skos:related | skos:member" mode="bs2:PropertyList"/>
-    
-</xsl:stylesheet>
\ No newline at end of file
diff --git a/demo/unesco-thesaurus/root.ttl b/demo/unesco-thesaurus/root.ttl
index 410541e1..aca079c0 100644
--- a/demo/unesco-thesaurus/root.ttl
+++ b/demo/unesco-thesaurus/root.ttl
@@ -2,7 +2,7 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:	<http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
 @prefix xsd:	<http://www.w3.org/2001/XMLSchema#> .
-@prefix dh:	    <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:	    <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:	<http://purl.org/dc/terms/> .
 @prefix sioc:	<http://rdfs.org/sioc/ns#> .
 @prefix sp:     <http://spinrdf.org/sp#> .
@@ -21,35 +21,45 @@
 
 <#page-header> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-        <div class="page-header">
-            <h2>UNESCO Thesaurus</h2>
-        </div>
-        <div class="row-fluid">
-            <div class="span9">
-                <p class="lead">This application demonstrates the capabilities of LinkedDataHub's <a href="https://packages.linkeddatahub.com/skos/#this" target="_blank">SKOS package</a>.</p>
-                <dl>
-                    <dt>Browser</dt>
-                    <dd>Navigate concepts, collections, and concept schemes with parallax navigation through broader/narrower/related relationships</dd>
-                    <dt>Editor</dt>
-                    <dd>Create and edit SKOS resources (requires authentication)</dd>
-                    <dt>RDF Import</dt>
-                    <dd>Import data using SPARQL transformation queries</dd>
-                </dl>
+        <div class="feature-row">
+            <div class="ldh-section">
+                <h2>UNESCO Thesaurus</h2>
+                <p>This dataspace demonstrates the capabilities of LinkedDataHub's <a href="https://packages.linkeddatahub.com/editor/taxonomy/#this" target="_blank">taxonomy editor package</a>.</p>
             </div>
-            <div class="span3">
+            <div>
                 <a href="https://vocabularies.unesco.org/browser/thesaurus/en/" target="_blank">
-                    <img alt="UNESCO Thesaurus" src="uploads/3fd6333140bf7a78f19f6a3aa602ea79d8b572a3" style="max-width: 100%;"></img>
+                    <img alt="UNESCO Thesaurus" src="uploads/3fd6333140bf7a78f19f6a3aa602ea79d8b572a3"></img>
                 </a>
             </div>
         </div>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="browser-pane" aria-selected="true" class="ac-tab is-on" id="browser-tab" role="tab" type="button"><span class="ac-tab-lbl">Browser</span></button>
+                <button aria-controls="editor-pane" aria-selected="false" class="ac-tab" id="editor-tab" role="tab" type="button"><span class="ac-tab-lbl">Editor</span></button>
+                <button aria-controls="rdf-import-pane" aria-selected="false" class="ac-tab" id="rdf-import-tab" role="tab" type="button"><span class="ac-tab-lbl">RDF Import</span></button>
+            </div>
+            <div aria-labelledby="browser-tab" class="ac-tabpanel" id="browser-pane" role="tabpanel">
+                <p>Navigate <a href="concepts/">concepts</a>, <a href="collections/">collections</a> and <a href="concept-schemes/">concept schemes</a> — broader, narrower and related links walk the
+                   vocabulary's semantic network with parallax navigation.</p>
+            </div>
+            <div aria-labelledby="editor-tab" class="ac-tabpanel" hidden="hidden" id="editor-pane" role="tabpanel">
+                <p>Create and edit SKOS resources — labels, notes and semantic relations — directly on their documents (requires authentication).</p>
+            </div>
+            <div aria-labelledby="rdf-import-tab" class="ac-tabpanel" hidden="hidden" id="rdf-import-pane" role="tabpanel">
+                <p>The thesaurus itself was loaded from the published SKOS RDF with a SPARQL transformation query — <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/unesco-thesaurus/concept-schemes/unesco-thesaurus/skos-import.rq" target="_blank"><samp>skos-import.rq</samp></a> reshapes the source
+                   into LinkedDataHub documents.</p>
+            </div>
+        </div>
     </div>"""^^rdf:XMLLiteral .
 
 <#overview-intro> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-        <h3>Vocabulary overview</h3>
-        <p>The UNESCO Thesaurus is a comprehensive multilingual vocabulary covering terminology across education, science,
-           culture, and communication. This SKOS-based implementation demonstrates semantic knowledge organization with
-           thousands of concepts organized into hierarchical and associative relationships.</p>
+        <div class="ldh-section">
+            <h2>What is in the vocabulary</h2>
+            <p>UNESCO's thesaurus covers education, science, culture and communication, in several languages at once.
+               It arrives here as SKOS, so the counts below are of concepts, schemes and collections as the vocabulary
+               itself declares them — not of anything this dataspace invented.</p>
+        </div>
     </div>"""^^rdf:XMLLiteral .
 
 <#vocabulary-stats-block> a ldh:Object ;
diff --git a/demo/unesco-thesaurus/screenshot-edit-mode.png b/demo/unesco-thesaurus/screenshot-edit-mode.png
index 1a233a18..1e7bc2ce 100644
Binary files a/demo/unesco-thesaurus/screenshot-edit-mode.png and b/demo/unesco-thesaurus/screenshot-edit-mode.png differ
diff --git a/demo/unesco-thesaurus/screenshot.png b/demo/unesco-thesaurus/screenshot.png
index 6b9feb7f..8a5d0841 100644
Binary files a/demo/unesco-thesaurus/screenshot.png and b/demo/unesco-thesaurus/screenshot.png differ
diff --git a/demo/unesco-thesaurus/update-folder.sh b/demo/unesco-thesaurus/update-folder.sh
deleted file mode 100755
index 9e08551f..00000000
--- a/demo/unesco-thesaurus/update-folder.sh
+++ /dev/null
@@ -1,88 +0,0 @@
-#!/bin/bash
-
-if [ "$#" -ne 5 ] && [ "$#" -ne 6 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password $pwd $abs_folder [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../ssl/owner/cert.pem Password /folder /folder/ [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file="$2"
-cert_password="$3"
-pwd="$4"
-folder="$5"
-
-if [ -n "$6" ]; then
-    proxy="$6"
-else
-    proxy="$base"
-fi
-
-ldhignore_file="$folder/.ldhignore"
-
-is_ldhignored() {
-    local name
-    name="$(basename "$1")"
-    [[ -f "$ldhignore_file" ]] || return 1
-    while IFS= read -r pattern || [[ -n "$pattern" ]]; do
-        [[ -z "$pattern" || "$pattern" == \#* ]] && continue
-        pattern="${pattern%/}"
-        [[ "$name" == $pattern ]] && return 0
-    done < "$ldhignore_file"
-    return 1
-}
-
-echo "Processing folder: $folder"  # Debug output
-
-for ttl_file in "$folder"/*.ttl; do
-  if [[ -f "$ttl_file" ]]; then
-    if git check-ignore -q "$ttl_file" 2>/dev/null || is_ldhignored "$ttl_file"; then
-      printf "Skipping %s\n" "$ttl_file"
-      continue
-    fi
-    echo "Found .ttl file: $ttl_file"  # Debug output
-    path="${ttl_file%.*}"   # strip extension
-    path="${path#*$pwd/}"   # strip leading $pwd/
-    path="${path}/"         # add trailing slash
-    printf "\n### Updating %s\n" "${base}${path}"
-    cat "$ttl_file" | turtle --base="${base}${path}" | put.sh \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      -t "application/n-triples" \
-      "${base}${path}"
-  fi
-done
-
-for file in "$folder"/*; do
-  if [[ -f "$file" ]] && [[ "$file" != *.ttl ]] && [[ "$file" != *.sh ]]; then
-    if git check-ignore -q "$file" 2>/dev/null || is_ldhignored "$file"; then
-      printf "Skipping %s\n" "$file"
-      continue
-    fi
-    stripped="${folder#$pwd/}"
-    if [[ "$stripped" == "$folder" ]]; then
-      container_path=""
-    else
-      container_path="${stripped}/"
-    fi
-    echo "Uploading file: $file to ${base}${container_path}"  # Debug output
-    add-file.sh \
-      -b "$base" \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      --title "$(basename "$file")" \
-      --file "$file" \
-      "${base}${container_path}"
-  fi
-done
-
-while IFS= read -r subdir; do
-  if git check-ignore -q "$subdir" 2>/dev/null || is_ldhignored "$subdir"; then
-    printf "Skipping %s\n" "$subdir"
-    continue
-  fi
-  ./update-folder.sh "$base" "$cert_pem_file" "$cert_password" "$pwd" "$subdir" "$proxy"
-done < <(find "$folder" -mindepth 1 -maxdepth 1 -type d -not -name '.*' -not -name 'target')
diff --git a/docs/.ldhignore b/docs/.ldhignore
index a6b2ee34..7703c05d 100644
--- a/docs/.ldhignore
+++ b/docs/.ldhignore
@@ -1,9 +1,12 @@
 html/
-decorate-html.xsl
-docs.trix
+rdf/
+node_modules/
 Makefile
-trix-to-html.xsl
-root.ttl
+docs.css
+docs.trix
+files.xml
+timestamps.xml
 screenshot-edit-mode.png
 screenshot.png
-node_modules/
+*.sh
+*.xsl
diff --git a/docs/Makefile b/docs/Makefile
index c6adcb52..44ebba28 100644
--- a/docs/Makefile
+++ b/docs/Makefile
@@ -1,26 +1,4 @@
-SHELL := /bin/bash
-
-BASE_URL_DEFAULT=https://localhost:4443/
-CERT_PATH_DEFAULT=../../../LinkedDataHub/ssl/owner/cert.pem
-PROXY_URL_DEFAULT=https://localhost:5443/
-
-install:
-	@read -p "Enter Base URL [$(BASE_URL_DEFAULT)]: " BASE_URL; \
-	BASE_URL=$${BASE_URL:-$(BASE_URL_DEFAULT)}; \
-	read -p "Enter Certificate Path [$(CERT_PATH_DEFAULT)]: " CERT_PATH; \
-	CERT_PATH=$${CERT_PATH:-$(CERT_PATH_DEFAULT)}; \
-	read -s -p "Enter Certificate Password (required): " PASSWORD; \
-	echo ""; \
-	if [ -z "$${PASSWORD}" ]; then \
-		echo "Password cannot be empty. Aborting."; \
-		exit 1; \
-	fi; \
-	read -p "Enter Proxy URL (optional) [$(PROXY_URL_DEFAULT)]: " PROXY_URL; \
-	if [ -n "$${PROXY_URL}" ]; then \
-		./install.sh "$${BASE_URL}" "$${CERT_PATH}" "$${PASSWORD}" "$${PROXY_URL}"; \
-	else \
-		./install.sh "$${BASE_URL}" "$${CERT_PATH}" "$${PASSWORD}"; \
-	fi
+include ../lib/install.mk
 
 validate:
 	./validate-documents.sh
diff --git a/docs/about.ttl b/docs/about.ttl
index 71105228..88e527a3 100644
--- a/docs/about.ttl
+++ b/docs/about.ttl
@@ -1,8 +1,8 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-  
+
 <> a dh:Item ;
     dct:title "About LinkedDataHub" ;
     dct:description "An RDF-native Knowledge Graph application platform" ;
@@ -10,48 +10,55 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">LinkedDataHub is a Knowledge Graph application platform by
+    <p class="ldh-body-lg">LinkedDataHub is a Knowledge Graph application platform by
         <a href="https://atomgraph.com" target="_blank">AtomGraph</a> that fully exploits the federated features of RDF and SPARQL.
         It can also be used as an RDF-native content management platform.</p>
-    <p>LinkedDataHub is an open source project that has its roots as a Linked Data publishing framework. However, since the 3.x release we have focused on Linked Data consumption, as we consider
-            publishing a solved problem but continue to see a shortage of user-friendly consumption tools.</p>
+    <p>LinkedDataHub is an open source project that has its roots in Linked Data publishing. Over time the focus has shifted to Linked Data consumption —
+            publishing is a largely solved problem, while user-friendly consumption tools remain in short supply.</p>
+    <p>A single LinkedDataHub instance hosts multiple <a href="../reference/dataspace/" target="_blank">dataspaces</a>, each identified by its own (sub)domain: an end-user dataspace serves the domain data, and an administration dataspace on the matching <code>admin.</code> subdomain controls its model and access.</p>
     <div>
-        <h2 id="platform">Low code application platform</h2>
-        <p>LinkedDataHub is also a low code RDF Knowledge Graph application platform. It offers comprehensive development and management features:</p>
+        <h2 id="platform">Low-code application platform</h2>
+        <p>LinkedDataHub is also a low-code platform for serving RDF Knowledge Graph dataspaces and building applications on top of them. It provides development and management features:</p>
         <ul>
-            <li>rich <a href="../reference/stylesheets/" target="_blank">UI component library</a> that can be customized without writing program code</li>
+            <li>rich <a href="../reference/stylesheets/" target="_blank">UI component library</a> that can be customized without writing code</li>
             <li>SPARQL-based templates for instance creation and editing forms (<a href="../reference/administration/ontologies/#constructors" target="_blank">constructors</a>)</li>
             <li>SPIN and SHACL <a href="../reference/administration/ontologies/#constraints" target="_blank">constraints</a> for validation of incoming data</li>
-            <li>authentication using WebID and OpenID Connect</li>
+            <li>authentication using WebID and OpenID Connect (Google and ORCID)</li>
             <li><a href="../reference/administration/acl/" target="_blank">access control</a> using WAC authorizations</li>
+            <li>declarative <a href="../reference/administration/packages/" target="_blank">packages</a> that plug vocabulary support and custom UI into a dataspace with a single triple</li>
+            <li>Git-backed <a href="../reference/versioning/" target="_blank">document versioning</a> with the standard Memento protocol for accessing the history</li>
+            <li>the <a href="../reference/command-line-interface/" target="_blank"><samp>ldh</samp> command line interface</a> that drives the same HTTP API as the UI</li>
         </ul>
-        <p class="lead">Follow the <a href="../tutorial/">tutorial</a> to build your first app, then see the user guide on <a href="../user-guide/build-apps/">application building</a> for the extension layers.</p>
     </div>
     <div>
-        <h2 id="kms">Federated knowledge management and collaboration system</h2>
-        <p class="text-center">
-            <iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="https://www.youtube.com/embed/LaOouEYhp_c" width="560"></iframe>
-        </p>
-        <p>As an RDF-native CMS, LinkedDataHub provides a number of features for end-users:</p>
+        <h2 id="kms">Knowledge management and collaboration</h2>
+        <div class="screenshot-placeholder">
+            <span aria-hidden="true" class="msi">play_circle</span>
+            <p>Screen recording: LinkedDataHub overview</p>
+        </div>
+        <p>As an RDF-native CMS, LinkedDataHub provides these end-user features:</p>
         <ul>
-            <li><a href="../user-guide/create-data/create-content/" target="_blank">creating structured content</a> from Linked Data and SPARQL resources (<strong>new in 3.x</strong>)</li>
+            <li><a href="../user-guide/create-data/create-content/" target="_blank">creating structured content</a> from Linked Data and SPARQL resources</li>
             <li><a href="../user-guide/create-data/create-documents/" target="_blank">creating RDF documents (graphs)</a></li>
             <li><a href="../user-guide/browse-data/" target="_blank">browsing Linked Data</a></li>
-            <li><a href="../user-guide/add-data/" target="_blank">forking RDF resources</a> to the local dataspace (<strong>new in 3.x</strong>)</li>
-            <li><a href="../user-guide/search-data/" target="_blank">searching</a> and <a href="../user-guide/query-data/" target="_blank">querying</a> SPARQL endpoints</li>
-            <li>creating collections from SPARQL queries</li>
-            <li>editing remote and local RDF documents</li>
+            <li><a href="../user-guide/add-data/" target="_blank">forking RDF resources</a> to the local dataspace</li>
+            <li><a href="../user-guide/browse-data/#text-search" target="_blank">searching</a> and <a href="../user-guide/query-data/" target="_blank">querying</a> SPARQL endpoints</li>
+            <li><a href="../reference/data-model/resources/#views" target="_blank">creating collections from SPARQL queries</a></li>
+            <li><a href="../user-guide/edit-content/" target="_blank">editing content</a> in place, with RDFa annotations linking text to resources</li>
             <li><a href="../user-guide/import-data/import-csv-data/" target="_blank">importing CSV data</a> by mapping it to RDF using SPARQL</li>
-            <li>visualizing query results as graphs, charts etc.</li>
+            <li><a href="../reference/data-model/resources/#charts" target="_blank">visualizing query results as graphs, charts etc.</a></li>
+            <li><a href="../user-guide/version-history/" target="_blank">viewing, diffing and restoring document versions</a></li>
         </ul>
     </div>
     <div>
         <h2 id="architecture">Architecture</h2>
-        <p>Architecturally LinkedDataHub is a read-write RDF Graph Store combined with a rich Linked Data/SPARQL client. LinkedDataHub does not persist RDF data itself but rather serves it from, and stores it in,
-            a backing triplestore, which by default is the <a href="https://jena.apache.org/documentation/fuseki2/" target="_blank">Apache Jena Fuseki</a>.</p>
-        <p>Every document in LinkedDataHub's dataspace is also a named graph in the Graph Store and has both RDF and HTML representations. The client is implemented using XSLT 3.0, a standard, declarative data transformation language. The same stylesheets run in two environments: on the server (Saxon-HE) to produce the initial HTML response, and in the browser (Saxon-JS 3 with Interactive XSLT) to render the layout and drive all subsequent navigation without full page reloads. It can connect to any Linked Data resource or SPARQL 1.1 endpoint.</p>
-        <p>Since version 3.x LinkedDataHub does not use the <a href="https://atomgraph.github.io/Linked-Data-Templates/" target="_blank">Linked Data Templates</a> anymore. However they can still be used to publish Linked Data from SPARQL endpoints
+        <p>Architecturally, LinkedDataHub is a read-write RDF Graph Store combined with a rich Linked Data/SPARQL client. LinkedDataHub does not persist RDF data itself but rather serves it from, and stores it in,
+            a backing triplestore, which by default is <a href="https://jena.apache.org/documentation/fuseki2/" target="_blank">Apache Jena Fuseki</a>.</p>
+        <p>Every document in a LinkedDataHub dataspace is also a named graph in the Graph Store and has both RDF and HTML representations.</p>
+        <p>The client is implemented using XSLT 3.0, a standard, declarative data transformation language. The same stylesheets run in two environments: on the server (Saxon-HE) to produce the initial HTML response, and in the browser (Saxon-JS 3 with Interactive XSLT) to render the layout and drive all subsequent navigation without full page reloads. The client can connect to any Linked Data resource or SPARQL 1.1 endpoint.</p>
+        <p>LinkedDataHub no longer uses <a href="https://atomgraph.github.io/Linked-Data-Templates/" target="_blank">Linked Data Templates</a> (support was removed in version 3.0.3). However, they can still be used to publish Linked Data from SPARQL endpoints
             using <a href="https://github.com/AtomGraph/Processor" target="_blank">Processor</a>.</p>
-        <p>You can find the changelog <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/CHANGELOG.md" target="_blank">here</a>.</p>
+        <p>See the <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/CHANGELOG.md" target="_blank">CHANGELOG</a> for release notes.</p>
     </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
+    <p class="ldh-body-lg">Follow the <a href="../tutorial/">tutorial</a> to build your first app, then see the <a href="../extending/build-apps/">application building</a> guide for the customization and extension options.</p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/docs.css b/docs/docs.css
new file mode 100644
index 00000000..55ddaf7a
--- /dev/null
+++ b/docs/docs.css
@@ -0,0 +1,141 @@
+/* =========================================================================
+   Documentation site skin — layout and primitives the docs pages need on top
+   of the LinkedDataHub design system (colors_and_type.css, app.css, retro.css,
+   ldh.css). Uses design tokens only; no raw colors or sizes.
+
+   The page content comes from rdf:XMLLiteral bodies authored as plain semantic
+   XHTML, so everything here is keyed off elements wherever it can be. A class
+   in a literal has to earn its place.
+   ========================================================================= */
+
+/* ---------- Page layout ---------- */
+.docs-layout {
+  max-width: var(--container-xl);
+  margin: 0 auto;
+  padding: var(--sp-8) var(--sp-6);
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+  gap: var(--sp-10);
+  align-items: start;
+}
+.docs-main { min-width: 0; }
+
+/* ---------- Sidebar navigation (active trail) ---------- */
+.docs-nav { font-size: var(--fs-sm); position: sticky; top: calc(56px + var(--sp-6)); }
+.docs-nav ul { list-style: none; margin: 0; padding: 0; }
+.docs-nav ul ul { padding-left: var(--sp-4); margin-top: var(--sp-1); border-left: 1px solid var(--border-default); }
+.docs-nav li { margin: 0; }
+.docs-nav a {
+  display: block;
+  padding: var(--sp-1) var(--sp-2);
+  border-radius: var(--r-sm);
+  color: var(--fg-2);
+}
+.docs-nav a:hover { color: var(--fg-1); background: var(--bg-hover); text-decoration: none; }
+.docs-nav li.is-active > a { color: var(--fg-link); font-weight: var(--fw-semibold); background: var(--bg-accent-quiet); }
+
+/* ---------- Content typography ----------
+   Headings, inline code, pre, dfn, blockquote, kbd, hr and the table base all
+   moved into the kit as ELEMENT rules (colors_and_type.css, surfaces.css). They
+   were here because the design system had no long-form layer; it has one now,
+   and the same rules reaching the product is the whole point — this file is only
+   linked by the static site. What is left below is genuinely site-only. */
+.docs-main p, .docs-main li { line-height: var(--lh-relaxed); }
+.docs-main .page-header { border-bottom: 1px solid var(--border-default); margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); }
+
+/* media */
+.docs-main img, .docs-main iframe { max-width: 100%; }
+.docs-main img { border: 1px solid var(--border-default); border-radius: var(--r-md); }
+.docs-main video { width: 100%; aspect-ratio: 16 / 9; }
+
+/* ---------- Reference tables ----------
+   The reference tables ARE the design system's DataTable, and they say so by
+   being <table> — the base dress lives on the element in surfaces.css, so the
+   content needs no class. It restated the look here for as long as the component
+   was grid-per-row, which would have written column tracks and a replacement set
+   of ARIA roles into the content and could not have expressed the rowspans the
+   HTTP method matrix and the ACL access matrix are built on. Table layout came
+   back, so both objections went, and the copy with them; row-header weight, group
+   headings and tbody seams live in surfaces.css where every table gets them.
+   What stays below is what belongs to a table sitting in PROSE rather than on an
+   app surface: flow spacing above and below, and cells topped out because a
+   reference row wraps to several lines while an app row is one. Keyed off the
+   element — the base dress moved onto `table` itself, so the content carries no
+   class at all now. Mirrors the same pair in ldh.css for the product. */
+.docs-main table { margin: var(--sp-4) 0; }
+.docs-main th, .docs-main td { vertical-align: top; line-height: var(--lh-base); }
+
+/* ---------- Section/child cards ---------- */
+.docs-children { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-6) 0 0; }
+.docs-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-xs);
+  padding: var(--sp-5) var(--sp-6);
+  margin: 0;
+}
+.docs-card h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); }
+.docs-card p { margin: 0; color: var(--fg-2); }
+
+/* ---------- Design system components quoted inside prose ----------
+   A control named in a sentence is drawn as the control: the same .ac-btn /
+   .ac-iconbtn the platform emits. Centre it on the text baseline so a chip
+   does not set the line's height. */
+.docs-main p .ac-btn, .docs-main li .ac-btn, .docs-main td .ac-btn,
+.docs-main p .ac-iconbtn, .docs-main li .ac-iconbtn, .docs-main td .ac-iconbtn { vertical-align: middle; }
+
+/* An inline alert's body is a flex column with its own gap, so prose inside it
+   must not add the UA paragraph margins on top. */
+.docs-main .ac-alert { margin: var(--sp-4) 0; }
+
+/* ---------- Screenshot placeholders (swapped for real captures later) ---------- */
+.docs-main .screenshot-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-2);
+  min-height: 180px;
+  margin: var(--sp-4) 0;
+  padding: var(--sp-4);
+  border: 2px dashed var(--border-strong);
+  border-radius: var(--r-lg);
+  background: var(--bg-recess);
+  color: var(--fg-hint);
+}
+.docs-main .screenshot-placeholder .msi { font-size: 40px; }
+.docs-main .screenshot-placeholder p { margin: 0; font-size: var(--fs-sm); max-width: 60ch; text-align: center; line-height: var(--lh-base); }
+
+/* ---------- Exhibit source/live links ---------- */
+.docs-main .exhibit-links { font-size: var(--fs-xs); color: var(--fg-hint); margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }
+.docs-main .exhibit-links a { color: var(--fg-2); }
+
+/* ---------- Header extras ---------- */
+/* sticky header (app.css keeps it static in the app; the docs pin it) */
+.ldh-header { position: sticky; top: 0; z-index: 100; }
+html { scroll-padding-top: calc(56px + var(--sp-4)); }
+
+.docs-versions { position: relative; }
+.docs-versions summary { list-style: none; cursor: pointer; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); }
+.docs-versions summary::-webkit-details-marker { display: none; }
+.docs-versions summary::after { content: " ▾"; font-size: var(--fs-xs); }
+.docs-versions summary:hover { background: rgba(255, 255, 255, 0.12); }
+.docs-versions[open] > div {
+  position: absolute; right: 0; z-index: 10;
+  min-width: 180px;
+  background: var(--bg-card); color: var(--fg-1);
+  border: 1px solid var(--border-default); border-radius: var(--r-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--sp-2);
+}
+.ldh-header .docs-versions[open] > div a { display: block; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); color: var(--fg-2); }
+.ldh-header .docs-versions[open] > div a:hover { background: var(--bg-hover); color: var(--fg-1); text-decoration: none; }
+.ldh-header .ldh-header-actions { display: flex; align-items: center; gap: var(--sp-4); }
+.ldh-header .ldh-header-actions > a { color: #fff; }
+
+/* ---------- Responsive ---------- */
+@media (max-width: 768px) {
+  .docs-layout { grid-template-columns: 1fr; }
+  .docs-nav { position: static; }
+}
diff --git a/docs/extending.ttl b/docs/extending.ttl
new file mode 100644
index 00000000..830c8f0f
--- /dev/null
+++ b/docs/extending.ttl
@@ -0,0 +1,19 @@
+@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
+@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
+@prefix dct:    <http://purl.org/dc/terms/> .
+
+<> a dh:Container ;
+    dct:title "Extending" ;
+    dct:description "Extending LinkedDataHub with your own code: XSLT stylesheets, Java endpoints, Docker images" ;
+    rdf:_1 <#content> ;
+    rdf:_2 <#select-children> .
+
+<#content> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+    <p class="ldh-body-lg">Extending LinkedDataHub with your own code: XSLT stylesheets, Java endpoints, Docker images</p>
+    <p>Everything in the <a href="../tutorial/">tutorial</a> and the <a href="../user-guide/">user guide</a> happens through the UI, the CLI and RDF files. The pages in this section pick up where low-code ends: they show how to override the rendering with your own <a href="change-layout/">XSLT stylesheet</a> and how to <a href="build-apps/">package an app</a> with custom Java endpoints and a dedicated Docker image.</p>
+</div>"""^^rdf:XMLLiteral .
+
+<#select-children> a ldh:Object ;
+    rdf:value ldh:ChildrenView .
diff --git a/docs/user-guide/build-apps.ttl b/docs/extending/build-apps.ttl
similarity index 69%
rename from docs/user-guide/build-apps.ttl
rename to docs/extending/build-apps.ttl
index 04a76bcc..f55a22ca 100644
--- a/docs/user-guide/build-apps.ttl
+++ b/docs/extending/build-apps.ttl
@@ -1,25 +1,24 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-    
+
 <> a dh:Item ;
     dct:title "Build apps" ;
-    dct:description "Using LinkedDataHub as a low-code platform for Knowledge Graph applications" ;
+    dct:description "Extend LinkedDataHub with custom Docker images, Java endpoints and XSLT stylesheets" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Using LinkedDataHub as a low-code platform for Knowledge Graph applications</p>
-    <p>If you are building your first app, start with the <a href="../../tutorial/">tutorial</a> — this guide covers the layers beyond it.</p>
+    <p class="ldh-body-lg">Extend LinkedDataHub with custom Docker images, Java endpoints and XSLT stylesheets</p>
     <p>Every component in LinkedDataHub is data-driven and was designed with extensibility in mind. You can override behavior (e.g. Java method or XSLT template) without having to modify LinkedDataHub's
         codebase, and more importantly, without having to write the same logic from scratch.</p>
-    <p>The following sections are split by component/layer and explain how to extend them when building bespoke apps.</p>
+    <p>If you are building your first app, start with the <a href="../../tutorial/">tutorial</a> — this guide covers the layers beyond it.</p>
     <div>
         <h2 id="docker">Docker</h2>
-        <p>You can go a long way just by mounting files (e.g. config files, ontologies, stylesheets) into LinkedDataHub's default Docker setup. But you may also want to build a dedicated Docker image for your app using LinkedDataHub as the base. Usually this is done to <code>COPY</code> files inside the image or <code>RUN</code> additional commands.</p>
+        <p>Mounting files — config, ontologies, stylesheets — into the default Docker setup covers many cases; for local runs, mount them with <samp>docker-compose.override.yml</samp> as shown in <a href="../../reference/configuration/#compose-override">Compose overrides</a>. But you may also want to build a dedicated Docker image for your app using LinkedDataHub as the base. Usually this is done to <code>COPY</code> files inside the image or <code>RUN</code> additional commands.</p>
         <p>The recommended approach is a multi-stage Docker build: the first stage uses Maven to compile your WAR overlay, and the second stage copies it into the LinkedDataHub base image alongside any static files:</p>
-        <pre>FROM maven:3.8.4-openjdk-17 AS maven
+        <pre>FROM maven:3.9-eclipse-temurin-21 AS maven
 
 WORKDIR /usr/src/myapp
 
@@ -30,7 +29,7 @@ RUN mvn clean install
 
 # =================
 
-FROM atomgraph/linkeddatahub:5.3.2
+FROM atomgraph/linkeddatahub:6.0.0
 
 WORKDIR $CATALINA_HOME
 
@@ -41,23 +40,24 @@ COPY --from=maven /usr/src/myapp/target/ROOT webapps/ROOT
 COPY files/layout.xsl /usr/local/tomcat/webapps/ROOT/static/com/example/myapp/xsl/layout.xsl
 COPY files/client.xsl /usr/local/tomcat/webapps/ROOT/static/com/example/myapp/xsl/client.xsl
 COPY files/style.css  /usr/local/tomcat/webapps/ROOT/static/com/example/myapp/css/style.css</pre>
+        <p>Replace <samp>6.0.0</samp> with the LinkedDataHub release you are running.</p>
         <p><code>SERVLET_NAME</code> must be set to the fully-qualified name of your JAX-RS application class (see the <a href="#java">Java section</a> below).</p>
     </div>
     <div>
         <h2 id="java">Java</h2>
-        <p>The Java layer of LinkedDataHub is a Maven project with a webapp layout. The codebase uses JAX-RS, specifically <a href="https://eclipse-ee4j.github.io/jersey/" target="_blank">Jersey 3</a>, as the HTTP/REST framework and uses <a href="https://jena.apache.org" target="_blank">Apache Jena</a> 6 for RDF I/O.</p>
+        <p>The Java layer of LinkedDataHub is a Maven project with a webapp layout. It uses JAX-RS — specifically <a href="https://eclipse-ee4j.github.io/jersey/" target="_blank">Jersey 3</a> — as the HTTP/REST framework, and <a href="https://jena.apache.org" target="_blank">Apache Jena</a> 6 for RDF I/O.</p>
         <p>If you want to extend the Java codebase, for example to add a custom REST endpoint, create a new Maven project (Java 21, packaged as WAR named <samp>ROOT</samp>) with LinkedDataHub as a WAR overlay dependency:</p>
         <pre>&lt;dependencies&gt;
     &lt;dependency&gt;
         &lt;groupId&gt;com.atomgraph&lt;/groupId&gt;
         &lt;artifactId&gt;linkeddatahub&lt;/artifactId&gt;
-        &lt;version&gt;5.5.3&lt;/version&gt;
+        &lt;version&gt;6.0.0&lt;/version&gt;
         &lt;classifier&gt;classes&lt;/classifier&gt;
     &lt;/dependency&gt;
     &lt;dependency&gt;
         &lt;groupId&gt;com.atomgraph&lt;/groupId&gt;
         &lt;artifactId&gt;linkeddatahub&lt;/artifactId&gt;
-        &lt;version&gt;5.5.3&lt;/version&gt;
+        &lt;version&gt;6.0.0&lt;/version&gt;
         &lt;type&gt;war&lt;/type&gt;
     &lt;/dependency&gt;
 &lt;/dependencies&gt;
@@ -88,28 +88,26 @@ COPY files/style.css  /usr/local/tomcat/webapps/ROOT/static/com/example/myapp/cs
     &lt;/plugins&gt;
 &lt;/build&gt;</pre>
         <p>After adding a new endpoint, extend LinkedDataHub's JAX-RS application class (<code>com.atomgraph.linkeddatahub.Application</code>) and register your class there. Set the <code>SERVLET_NAME</code> Docker environment variable to the fully-qualified name of your subclass so LinkedDataHub loads it instead of the default application.</p>
-        <p>By convention, static files (e.g. stylesheets, images) are placed in the <samp>src/main/webapp/static/</samp> folder in the codebase, which then becomes <samp>/usr/local/tomcat/webapps/ROOT/static/</samp> within the webapp deployed in the Docker container, and is available as <samp>${base}static/</samp> over HTTP.</p>
+        <p>By convention, static files (e.g. stylesheets, images) are placed in the <samp>src/main/webapp/static/</samp> folder in the codebase, which then becomes <samp>/usr/local/tomcat/webapps/ROOT/static/</samp> within the webapp deployed in the Docker container, and is served at <samp>static/</samp> under the dataspace's base URI.</p>
         <p>This means that if you want to deploy static files as part of your LinkedDataHub app, you will have to either mount them into the <samp>/usr/local/tomcat/webapps/ROOT/static/</samp> folder in the container, or copy them into a custom Docker image to the same effect.</p>
         <p>You can allow Java debugger access using <a href="../../reference/configuration/#debug">configuration properties</a>.</p>
     </div>
     <div>
         <h2 id="xslt">XSLT</h2>
         <p>LinkedDataHub uses <a href="https://www.w3.org/TR/xslt-30/" target="_blank">XSLT 3.0</a> for UI rendering both on the server- and on the client-side.</p>
-        <p>You can specify a custom server-side XSLT 3.0 stylesheet in the <a href="../manage-dataspaces/#change-stylesheet">dataspace configuration</a>.</p>
-        <p>You can reuse LinkedDataHub's stylesheets by importing them as explained in the <a href="../change-layout/">change layout</a> user guide.</p>
+        <p>You can specify a custom server-side XSLT 3.0 stylesheet in the <a href="../../user-guide/manage-dataspaces/#change-stylesheet">dataspace configuration</a>.</p>
+        <p>You can reuse LinkedDataHub's stylesheets by importing them as explained in the <a href="../change-layout/">Change layout</a> guide.</p>
         <h3 id="server-side-xslt">Server-side</h3>
-        <p>The default server-side stylesheet <samp>layout.xsl</samp> and its imports can be found in the <samp>src/main/webapp/static/com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2</samp> folder.</p>
+        <p>The default server-side stylesheet <samp>layout.xsl</samp> and its imports can be found in the <samp>src/main/webapp/static/com/atomgraph/linkeddatahub/xsl</samp> folder.</p>
         <h3 id="client-side-xslt">Client-side</h3>
         <p>Client-side stylesheets render the layout in the browser and implement the interactive parts of the UI (event handling, AJAX calls etc.) using the <a href="https://www.saxonica.com/saxonjs/documentation3/index.html#!ixsl-extension" target="_blank">IXSL extension</a>
-            provided by the Saxon-JS 3 library. After the server renders the initial page, the client-side stylesheet injects the left sidebar, navigation, document and tab panes, content blocks, forms and modal dialogs into the DOM, and re-renders in place as the user navigates. This way the frontend is made completely declarative and does not require almost any Javascript code, with exceptions of 3rd party libraries such as Google Charts and OpenLayers.</p>
+            provided by the Saxon-JS 3 library. After the server renders the initial page, the client-side stylesheet injects the left sidebar, navigation, document and tab panes, content blocks, forms and modal dialogs into the DOM, and re-renders in place as the user navigates. This makes the frontend almost entirely declarative: it requires virtually no hand-written JavaScript, apart from third-party libraries such as Google Charts and OpenLayers.</p>
         <p>Client-side stylesheets share common document-, resource-, and property-level templates with the server-side stylesheets. The client-side stylesheet may not contain any XML entity declarations (limitation of
             Saxon-JS) and must be <a href="https://www.saxonica.com/saxonjs/documentation3/index.html#!starting/export" target="_blank">compiled into a SEF file</a> before it can be run by the Saxon-JS runtime.
-            By default, the URL of the client-side SEF stylesheet can be specified as the <code>$client-stylesheet</code> param of the document-level server-side <code>xhtml:Script</code> template.</p>
-    </div>
-    <div>
-        <h2 id="rdf">RDF</h2>
-        <p>You can modify or extend the <a href="../../reference/dataset/#default-datasets">default RDF datasets</a> used by LinkedDataHub. However, a better practice is to use the 
-        <a href="../../reference/command-line-interface/">CLI scripts</a> to create documents and to <a href="../../reference/imports/">import CSV and RDF data</a>.</p>
+            The URL of the client-side SEF stylesheet is passed as the <code>$client-stylesheet</code> parameter of the document-level server-side <code>xhtml:Script</code> template.</p>
     </div>
-    <p class="lead"><a href="https://github.com/AtomGraph/LinkedDataHub-Apps" target="_blank">See the LinkedDataHub app repository for more examples.</a></p>
+    <p>You can also modify or extend the <a href="../../reference/dataset/#default-datasets">default RDF datasets</a> used by LinkedDataHub. However, a better practice is to use the
+        <a href="../../reference/command-line-interface/">CLI</a> to create documents and to <a href="../../reference/imports/">import CSV and RDF data</a>.</p>
+    <p><a href="https://github.com/AtomGraph/LinkedDataHub-Apps" target="_blank">See the LinkedDataHub app repository for more examples.</a></p>
+    <p class="ldh-body-lg">Continue with the <a href="../change-layout/">Change layout</a> guide or see how these layers fit together in the <a href="../../tutorial/beyond-low-code/">Beyond low-code</a> tutorial.</p>
 </div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/extending/change-layout-1.webp b/docs/extending/change-layout-1.webp
new file mode 100644
index 00000000..9fc75ce7
Binary files /dev/null and b/docs/extending/change-layout-1.webp differ
diff --git a/docs/extending/change-layout-2.webp b/docs/extending/change-layout-2.webp
new file mode 100644
index 00000000..08b22d4c
Binary files /dev/null and b/docs/extending/change-layout-2.webp differ
diff --git a/docs/extending/change-layout-3.webp b/docs/extending/change-layout-3.webp
new file mode 100644
index 00000000..16593ed9
Binary files /dev/null and b/docs/extending/change-layout-3.webp differ
diff --git a/docs/extending/change-layout.ttl b/docs/extending/change-layout.ttl
new file mode 100644
index 00000000..e0f2b40b
--- /dev/null
+++ b/docs/extending/change-layout.ttl
@@ -0,0 +1,94 @@
+@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
+@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
+@prefix dct:    <http://purl.org/dc/terms/> .
+
+<> a dh:Item ;
+    dct:title "Change layout" ;
+    dct:description "How to customize a dataspace's layout and the way its resources are rendered" ;
+    rdf:_1 <#content> .
+
+<#content> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+    <p class="ldh-body-lg">How to customize a dataspace's layout and the way its resources are rendered</p>
+    <p>LinkedDataHub's user interface is simply a rendering of the underlying Linked Data resource descriptions, which are exposed via the <a href="../../reference/http-api/" target="_blank">HTTP API</a>.</p>
+    <p>LinkedDataHub provides <a href="../../reference/stylesheets/" target="_blank">XSLT stylesheets</a> that render a default UI layout. When building a dataspace, however, you may want a custom
+        layout. The recommended approach is a new stylesheet that imports the system stylesheet and overrides only the templates you need, reusing the rest of the layout.</p>
+    <div>
+        <h2 id="default-layout">Default layout</h2>
+        <p>The examples below run on a Northwind <a href="https://northwind-traders.demo.linkeddatahub.com/orders/10248/" target="_blank">order document</a>:
+            its graph holds the order (the document's topic) and the order's line items, each carrying its own <code>schema:price</code> line total.</p>
+        <p>Out of the box, the default layout renders the order and each line item as a plain resource description.</p>
+        <img alt="A Northwind order document in the default layout, order and line items as generic resource descriptions" src="/uploads/aaffaa280a8b5fb987c482d723bca80fbaa59291"></img>
+    </div>
+    <div>
+        <h2 id="create-stylesheet">Create a stylesheet</h2>
+        <p>Create a new XSLT 3.0 stylesheet and use <code>&lt;xsl:import&gt;</code> to import the system stylesheet <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/src/main/webapp/static/com/atomgraph/linkeddatahub/xsl/layout.xsl" target="_blank"><samp>static/com/atomgraph/linkeddatahub/xsl/layout.xsl</samp></a>:</p>
+        <pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;xsl:stylesheet version="3.0"
+xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+xmlns="http://www.w3.org/1999/xhtml"
+xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+xmlns:foaf="http://xmlns.com/foaf/0.1/"
+xmlns:schema="https://schema.org/"
+xmlns:ac="https://w3id.org/atomgraph/client#"
+xmlns:ldh="https://w3id.org/atomgraph/linkeddatahub#"
+exclude-result-prefixes="#all"&gt;
+
+    &lt;xsl:import href="https://localhost:4443/static/com/atomgraph/linkeddatahub/xsl/layout.xsl"/&gt;
+
+    &lt;!-- overriding templates go here --&gt;
+
+&lt;/xsl:stylesheet&gt;</pre>
+        <p>(Imports under the dataspace's <samp>/static/</samp> path resolve to local webapp files, so no HTTP round-trip is made.)</p>
+    </div>
+    <div>
+        <h2 id="configure-dataspace">Configure the dataspace</h2>
+        <p>Either <a href="../../user-guide/upload-file/" target="_blank">upload the XSLT file</a> or mount it using Docker and <samp>docker-compose.override.yml</samp>:</p>
+        <pre>services:
+  linkeddatahub:
+    volumes:
+      - ./files/northwind.xsl:/usr/local/tomcat/webapps/ROOT/static/com/atomgraph/linkeddatahub/northwind/xsl/layout.xsl:ro</pre>
+        <p>Then change the value of <code>ac:stylesheet</code> on the dataspace with base URI <code>https://localhost:4443/</code> to the URL of the stylesheet. The value has to be an absolute URL on the dataspace's own origin:</p>
+        <pre>&lt;urn:linkeddatahub:apps/end-user&gt; a lds:Dataspace ;
+    ...
+    ac:stylesheet &lt;https://localhost:4443/static/com/atomgraph/linkeddatahub/northwind/xsl/layout.xsl&gt; ;
+    ...</pre>
+        <p>You will need to restart LinkedDataHub's Docker service for the new stylesheet to take effect.</p>
+    </div>
+    <div>
+        <h2 id="augment-output">Augment output</h2>
+        <p>Keep the default output using <code>&lt;xsl:apply-imports&gt;</code> or <code>&lt;xsl:next-match&gt;</code> and add new output before/after it.
+            Here the order's rendering gains a computed total, summed over the line items in the graph:</p>
+        <pre>&lt;xsl:template match="*[foaf:isPrimaryTopicOf/@rdf:resource = ac:absolute-path(ldh:base-uri(.))][rdf:type/@rdf:resource = 'https://schema.org/Order'][key('resources', schema:orderedItem/@rdf:resource)]" priority="1"&gt;
+    &lt;xsl:next-match/&gt;
+
+    &lt;h3&gt;Order total&lt;/h3&gt;
+    &lt;p&gt;
+        &lt;xsl:value-of select="format-number(sum(key('resources', schema:orderedItem/@rdf:resource)/schema:price), '#,##0.00')"/&gt;
+        &lt;xsl:text&gt; USD&lt;/xsl:text&gt;
+    &lt;/p&gt;
+&lt;/xsl:template&gt;</pre>
+        <p>The pattern matches resource descriptions that are the primary topic of the requested document (i.e. its order), are typed <code>schema:Order</code>, and have line items present in the RDF graph.</p>
+        <p>With the overriding template, the order page shows the computed total after the order's default description.</p>
+        <img alt="The augmented order page with the Order total heading and sum under the order description" src="/uploads/59c543d37a229e1e525a9249008192f53a015d33"></img>
+    </div>
+    <div>
+        <h2 id="override-output">Override output</h2>
+        <p>To completely change the layout without keeping the default one, use the same logic as for <a href="#augment-output">augmenting</a> it, but do not call <code>&lt;xsl:apply-imports&gt;</code>/<code>&lt;xsl:next-match&gt;</code>.</p>
+    </div>
+    <div>
+        <h2 id="suppress-output">Suppress output</h2>
+        <p>Having summed the line items into a total, you may no longer want each line item rendered as its own resource description, nor the raw
+            <code>schema:orderedItem</code> rows in the order's property list.</p>
+        <p>You can specify an empty template at any level (graph/property/resource) to disable output of that layout mode. This suppresses the line item resources:</p>
+        <pre>&lt;xsl:template match="*[@rdf:about = key('resources', key('resources', ac:absolute-path(ldh:base-uri(.)))/foaf:primaryTopic/@rdf:resource)/schema:orderedItem/@rdf:resource]"/&gt;</pre>
+        <p>The pattern matches resource descriptions that are line items of the current document's primary topic.</p>
+        <p>And this suppresses the property rows:</p>
+        <pre>&lt;xsl:template match="*[foaf:isPrimaryTopicOf/@rdf:resource = ac:absolute-path(ldh:base-uri(.))]/schema:orderedItem" mode="ac:PropertyEditor"/&gt;</pre>
+        <p>The pattern matches <code>schema:orderedItem</code> properties of a resource that is the primary topic of the current document.</p>
+        <p>With the suppressing templates, the order page shows the order and its total, with the line items no longer repeated below.</p>
+        <img alt="The order page after suppression — order description and total only, line items hidden" src="/uploads/e168fadd3f737e36e85f0f0107ba057ab8f4e24a"></img>
+    </div>
+    <p class="ldh-body-lg">Read more about the <a href="../../reference/stylesheets/">XSLT stylesheets</a> or continue with the <a href="../build-apps/">Build apps</a> guide.</p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/get-started.ttl b/docs/get-started.ttl
index 8ccddcc2..04865263 100644
--- a/docs/get-started.ttl
+++ b/docs/get-started.ttl
@@ -1,67 +1,43 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Container ;
     dct:title "Get started" ;
-    dct:description "All the basics of LinkedDataHub. From installation to extending the model and user interface." ;
+    dct:description "Install LinkedDataHub, log in with a WebID, and request access to a dataspace" ;
     rdf:_1 <#content> ;
     rdf:_2 <#select-children> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">All the basics of LinkedDataHub. From installation to customizing the model and user interface.</p>
-    <p>This guide will show how a LinkedDataHub application can be used to manage domain-specific RDF classes and instances. As an example, we will use <a href="https://www.w3.org/TR/skos-primer/" target="_blank">SKOS</a> concepts and concept schemes.</p>
-    <p>Note that most management actions can also be performed using the <a href="../reference/command-line-interface/" target="_blank">CLI (Command Line Interface)</a>. Where applicable, the UI and CLI instructions are shown side by side. The <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/demo/unesco-thesaurus" target="_blank">UNESCO Thesaurus demo app</a> demonstrates how SKOS vocabularies can be managed in LinkedDataHub.</p>
-    <p class="lead">New to LinkedDataHub? The <a href="../tutorial/" target="_blank">tutorial</a> builds a complete application, from an empty dataspace to a published app.</p>
+    <p class="ldh-body-lg">Install LinkedDataHub, log in with a WebID, and request access to a dataspace</p>
+    <p>If you are wondering what LinkedDataHub is and what it can do, start with <a href="../about/">About LinkedDataHub</a>. The running example
+        throughout the documentation is the <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/demo/northwind-traders" target="_blank">Northwind Traders demo app</a> — the iconic sample database as an RDF Knowledge Graph, running live at
+        <a href="https://northwind-traders.demo.linkeddatahub.com/" target="_blank">northwind-traders.demo.linkeddatahub.com</a>.</p>
     <div>
         <h2 id="setup">Setup</h2>
-        <p>Setup is only required if you plan to run your own instance of LinkedDataHub. It consists of few steps, which involve creating a configuration file and running a
-            <code>docker-compose</code> command.</p>
-        <p class="lead"><a href="setup/" target="_blank">Read setup instructions.</a></p>
+        <p>Setup is only required if you plan to run your own instance of LinkedDataHub. It takes a few steps: create a configuration file and run a
+            <code>make</code> command.</p>
+        <p class="ldh-body-lg"><a href="setup/">Read setup instructions.</a></p>
         <p>If you want to use an existing instance of LinkedDataHub, proceed to the next step.</p>
     </div>
     <div>
         <h2 id="get-an-account">Get an account</h2>
         <p>With LinkedDataHub, you obtain a WebID and use its client certificate for authentication. You can obtain the WebID either by setting up your own instance or signing up on
-            an existing instance. Alternatively, you can authenticate using your social login.</p>
-        <p class="lead"><a href="get-an-account/" target="_blank">Read instructions on getting an account.</a></p>
+            an existing instance. Alternatively, you can authenticate using your Google or ORCID login.</p>
+        <p class="ldh-body-lg"><a href="get-an-account/">Read instructions on getting an account.</a></p>
     </div>
     <div>
         <h2 id="request-access">Request access</h2>
-        <p>After you login to (authenticate with) a LinkedDataHub instance, the next step is getting an authorization from its owners that allows you to view and possibly append or edit documents. That is done by issuing an access request.</p>
-        <p class="lead"><a href="request-access/" target="_blank">Read instructions on requesting access.</a></p>
-    </div>
-
-    <div>
-        <h2 id="create-document">Create a document</h2>
-        <p>You will need to create documents if you want to store data in LinkedDataHub. Documents are RDF Linked Data resources as well as named graphs in the application's dataset.</p>
-        <p>There are types of documents supported by LinkedDataHub: containers and items. Containers can have children documents, just like folders in a filesystem. Items usually contain content and/or are paired with
-            non-informations resources such as abstract concepts or physical objects.</p>
-        <p class="lead"><a href="../user-guide/create-data/create-documents/" target="_blank">Follow a tutorial to create a container.</a></p>
-    </div>
-    <div>
-        <h2 id="create-resource">Create a resource</h2>
-        <p>Out of the box, you can create instances of classes that LinkedDataHub ships with by default. Those are built-in classes in system ontologies such as container and item mentioned above, all forms of SPARQL queries, charts, data imports, files etc.</p>
-        <p>LinkedDataHub also allows creation of instances of user-defined classes from ontologies imported by the user.</p>
-        <p class="lead"><a href="../user-guide/create-data/create-resources/" target="_blank">Learn how to create instances of built-in and user-defined classes.</a></p>
-    </div>
-    <div>
-        <h2 id="change-model">Change the model</h2>
-        <p>In order to be able to instance data, we need to create <a href="../reference/administration/ontologies/#classes" target="_blank">classes</a> that represent them (and ontologies where those classes are defined) in the <a href="../reference/administration/ontologies/" target="_blank">model</a> of our dataspace. Not only will they serve as RDF types of the instances, but will have <a href="../reference/administration/ontologies/#constructors" target="_blank">constructors</a> attached that define the default properties and their (data)types for that class.</p>
-        <p class="lead"><a href="../user-guide/change-model/" target="_blank">Follow a tutorial to change the model: create a class and its constructor.</a></p>
-    </div>
-
-    <div>
-        <h2 id="import-csv">Import CSV data</h2>
-        <p>A common step at this point would be to populate your dataset with instances by importing data. LinkedDataHub currently supports CSV and RDF <a href="../reference/imports/" target="_blank">data imports</a>.</p>
-        <p class="lead"><a href="../user-guide/import-data/import-csv-data/" target="_blank">Follow a tutorial to import CSV data and map it to RDF.</a></p>
+        <p>After you log in to (authenticate with) a LinkedDataHub instance, the next step is getting an authorization from its owners that allows you to view and possibly append or edit documents. That is done by issuing an access request.</p>
+        <p class="ldh-body-lg"><a href="request-access/">Read instructions on requesting access.</a></p>
     </div>
     <div>
-        <h2 id="change-layout">Change the layout</h2>
-        <p>User interface changes are done by adding and overriding templates in <a href="../reference/stylesheets/" target="_blank">XSLT stylesheets</a>.</p>
-        <p class="lead"><a href="../user-guide/change-layout/" target="_blank">Follow a tutorial to change the layout: create an XSLT stylesheet and override a template.</a></p>
+        <h2 id="where-to-next">Where to next</h2>
+        <p>New to LinkedDataHub? The <a href="../tutorial/">tutorial</a> builds a complete dataspace, from empty to published.
+            The <a href="../user-guide/">user guide</a> covers the everyday tasks in standalone recipes: <a href="../user-guide/create-data/">creating data</a>, <a href="../user-guide/import-data/">importing data</a>, <a href="../user-guide/edit-content/">editing content</a> in place, <a href="../user-guide/manage-dataspaces/">managing dataspaces</a>, <a href="../user-guide/manage-packages/">installing packages</a>, and <a href="../user-guide/version-history/">working with version history</a>. The <a href="../reference/">reference</a> describes every feature in full.</p>
+        <p>Note that most management actions can also be performed using the <a href="../reference/command-line-interface/">CLI (Command Line Interface)</a>. Where applicable, the UI and CLI instructions are shown side by side.</p>
     </div>
 </div>"""^^rdf:XMLLiteral .
 
diff --git a/docs/get-started/get-an-account-1.webp b/docs/get-started/get-an-account-1.webp
new file mode 100644
index 00000000..14e21fa0
Binary files /dev/null and b/docs/get-started/get-an-account-1.webp differ
diff --git a/docs/get-started/get-an-account.ttl b/docs/get-started/get-an-account.ttl
index bd5cf595..87b9952d 100644
--- a/docs/get-started/get-an-account.ttl
+++ b/docs/get-started/get-an-account.ttl
@@ -1,65 +1,58 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Get an account" ;
-    dct:description "How to get login to LinkedDataHub" ;
+    dct:description "How to get an account and log in to LinkedDataHub" ;
     rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">This guide describes how to login to LinkedDataHub.</p>
+    <p class="ldh-body-lg">How to get an account and log in to LinkedDataHub</p>
     <div>
-        <div class="alert alert-info">
-            <p>In order to authenticate as the <em>owner</em> of a LinkedDataHub instance, you need to use the WebID authentication method.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">In order to authenticate as the <em>owner</em> of a LinkedDataHub instance, you need to use the WebID authentication method.</p>
+            </div>
         </div>
-        <div class="tabbable">
-          <ul class="nav nav-tabs">
-            <li class="active"><a>Get WebID</a></li>
-            <li><a>Login with Google</a></li>
-            <li><a>Login with ORCID</a></li>
-          </ul>
-          <div class="tab-content">
-            <div class="tab-pane active">
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="get-a-webid-pane" aria-selected="true" class="ac-tab is-on" id="get-a-webid-tab" role="tab" type="button"><span class="ac-tab-lbl">Get a WebID</span></button>
+                <button aria-controls="log-in-with-google-pane" aria-selected="false" class="ac-tab" id="log-in-with-google-tab" role="tab" type="button"><span class="ac-tab-lbl">Log in with Google</span></button>
+                <button aria-controls="log-in-with-orcid-pane" aria-selected="false" class="ac-tab" id="log-in-with-orcid-tab" role="tab" type="button"><span class="ac-tab-lbl">Log in with ORCID</span></button>
+            </div>
+            <div aria-labelledby="get-a-webid-tab" class="ac-tabpanel" id="get-a-webid-pane" role="tabpanel">
                 <div>
                     <h2 id="get-cert">Get certificate</h2>
                     <p>LinkedDataHub uses WebID as the <a href="https://en.wikipedia.org/wiki/Single_sign-on" target="_blank">Single sign-on</a> (SSO)
-                        protocol for distributed applications, which is based on authentication using TLS client certficates. Using WebID, you will be able to authenticate with every LinkedDataHub application.
+                        protocol for distributed applications, which is based on authentication using TLS client certificates. Using WebID, you will be able to authenticate with every LinkedDataHub dataspace.
                         <a href="http://webid.info" target="_blank">Read more about WebID</a>.</p>
-                    <p>There are two ways to get a LinkedDataHub WebID: setup and signup.</p>
-                    <div class="tabbable">
-                      <ul class="nav nav-tabs">
-                        <li class="active"><a>Setup</a></li>
-                        <li><a>Signup</a></li>
-                      </ul>
-                      <div class="tab-content">
-                        <div class="tab-pane active">
-                            <p>Complete the <a href="../setup/">setup</a> and run own an instance of LinkedDataHub.</p>
-                            <p>The <samp>ssl/owner/keystore.p12</samp> file is your WebID certificate. The password is the <samp>owner_cert_password</samp> Docker secret value.</p>
+                    <p>There are two ways to get a LinkedDataHub WebID: run your own instance or sign up to an existing one.</p>
+                    <h3 id="own-instance">Run your own instance</h3>
+                    <p>Complete the <a href="../setup/">setup</a> to run your own instance of LinkedDataHub.</p>
+                    <p>The <samp>ssl/owner/keystore.p12</samp> file is your WebID certificate. The password is the <samp>owner_cert_password</samp> Docker secret value.</p>
+                    <h3 id="sign-up">Sign up to an existing instance</h3>
+                    <p>Click the <span class="ac-btn in-primary ap-solid sz-md">Sign up</span> button and fill out the form with your details to get a WebID, as shown below.</p>
+                    <img alt="The WebID signup form" src="/uploads/a9b5df4541a4b73c3c9764e6b4d8bf4918df1961"></img>
+                    <p>You will get an email with a <samp>.p12</samp> file attached, which is your WebID certificate. The certificate's password is the one you entered in the signup form.</p>
+                    <p>The <a href="../../reference/command-line-interface/">command line interface</a> reads the PKCS12 (<samp>.p12</samp>) file directly — no conversion needed. Setup writes it to <samp>ssl/owner/keystore.p12</samp>.</p>
+                    <p><samp>curl</samp> needs a PEM version instead. Setup writes that too, to <samp>ssl/owner/cert.pem</samp>. A certificate received by email can be converted from PKCS12 to PEM with OpenSSL:</p>
+                    <pre>openssl pkcs12 -in cert.p12 -out cert.pem -nodes</pre>
+                    <div class="ac-alert va-informative" role="status">
+                        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+                        <div class="ac-alert-body">
+                            <p class="ac-alert-text">Unlike most LinkedDataHub resources, your WebID profile will have <em>public access</em> as required by the protocol. Your email address, however, stays hidden.</p>
                         </div>
-                        <div class="tab-pane">
-                            <p>Sign up to an existing instance of LinkedDataHub. Click the <span class="btn btn-primary">Sign up</span> button and fill out the form with your
-                                details to get a WebID, as shown below.</p>
-                            <p>
-                                <img alt="Signup" src="../../uploads/cf383c52ac014823a2627b055cca06b21d8fe8b0"></img>
-                            </p>
-                            <p>You will get an email with a <samp>.p12</samp> file attached, which is your WebID certificate. The certificate's password is the one you entered in the signup form.</p>
-                        </div>
-                      </div>
-                    </div>
-                    <p>You'll need a PEM version of the certificate for use with the <a href="../../reference/command-line-interface/">command line interface</a> scripts. During setup, it is stored under
-                        <samp>ssl/owner/cert.pem</samp>. If you got the certificate by email, you need to <a href="https://stackoverflow.com/a/15144560/1003113" target="_blank">convert the PKCS12 file to PEM using OpenSSL</a>.</p>
-                    <div class="alert alert-info">
-                        <p>Unlike most LinkedDataHub resources, your WebID profile will have <em>public access</em> as required by the protocol. Your email address will be hidden however.</p>
                     </div>
                 </div>
                 <div>
                     <h2 id="install-cert">Install certificate</h2>
-                    <p>The final step is to install the client certificate into your web browser. It is done by importing the <samp>.p12</samp>
-                        file using the browser's certificate manager and providing the password that you supplied during signup. The
-                        manager dialog can be opened following the steps below, depending on which browser you use:</p>
+                    <p>The final step is to install the client certificate into your web browser. Import the <samp>.p12</samp> file with
+                        your browser's certificate manager, using the certificate's password (from signup, or the <samp>owner_cert_password</samp>
+                        secret if you ran setup). Open the manager dialog following the steps below, depending on which browser you use:</p>
                     <dl>
                         <dt>Google Chrome</dt>
                         <dd><samp>Settings &gt; Advanced &gt; Manage Certificates &gt; Import...</samp></dd>
@@ -70,42 +63,49 @@
                             <a href="https://support.apple.com/guide/keychain-access/what-is-keychain-access-kyca1083/mac" target="_blank">Keychain Access</a>
                             tool. Drag the <samp>.p12</samp> file to the <samp>login</samp> section.</dd>
                         <dt>Microsoft Edge</dt>
-                        <dd>Does not support certificate management, you need to install the file into Windows.
+                        <dd>Edge has no certificate manager of its own — install the file into the Windows certificate store.
                             <a href="https://social.technet.microsoft.com/Forums/en-US/18301fff-0467-4e41-8dee-4e44823ed5bf/microsoft-edge-browser-and-ssl-certificates?forum=win10itprogeneral" target="_blank">Read more here</a>.</dd>
                     </dl>
                     <p>You need to install the certificate on all devices/browsers that you are using to access LinkedDataHub.</p>
                 </div>
                 <div>
                     <h2 id="log-in">Log in</h2>
-                    <p>Open the URL of the LinkedDataHub instance in the web browser (that you installed the WebID certificate into). Using a local setup, it runs on <a href="https://localhost:4443/" target="_blank">https://localhost:4443/</a> by default. </p>
+                    <p>Open the LinkedDataHub instance in the browser you installed the certificate into. Using a local setup, it runs on <a href="https://localhost:4443/" target="_blank">https://localhost:4443/</a> by default.</p>
                     <p>With the certificate installed, there is no login procedure — you are automatically <em>authenticated</em> on all
-                        LinkedDataHub applications. This is known as Single sign-on (SSO).</p>
-                    <p>Applications can provide public access to some or all documents, meaning you can freely browse their public resources
-                        and perform actions that are allowed for public access. In order to access protected (non-public) resources, as well
-                        as to access administration application, users have to be authenticated as well <em>authorized</em> (authorizations
-                        can be <a href="../../reference/administration/acl/#auth-requests">requested</a>).</p>
-                    <div class="alert alert-info">
-                        <p>Authenticated agents <em>are not guaranteed to have access</em> to all resources. Different access levels for
-                            different agents can be specified by the application administrators.</p>
+                        LinkedDataHub dataspaces. This is known as Single sign-on (SSO).</p>
+                    <p>Dataspaces may make some or all of their documents public; you can browse those without authenticating. To reach
+                        protected (non-public) resources, or the administration dataspace, you have to be authenticated <em>and
+                        authorized</em> (authorizations can be <a href="../../reference/administration/acl/#auth-requests">requested</a>).</p>
+                    <div class="ac-alert va-informative" role="status">
+                        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+                        <div class="ac-alert-body">
+                            <p class="ac-alert-text">Authenticated agents <em>are not guaranteed to have access</em> to all resources. Different access levels for
+                                different agents can be specified by the dataspace administrators.</p>
+                        </div>
                     </div>
                 </div>
              </div>
-             <div class="tab-pane">
-                <p>Click the <span class="btn btn-primary">Login with Google</span> button in the navbar to authenticate with your Google account.</p>
+            <div aria-labelledby="log-in-with-google-tab" class="ac-tabpanel" hidden="hidden" id="log-in-with-google-pane" role="tabpanel">
+                <p>Open the <span class="ac-btn in-primary ap-solid sz-md">Login <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown in the navigation bar and choose <samp>Login with Google</samp> to authenticate with your Google account.</p>
                 <p>If the email address of your Google account matches the dataspace owner's email address that was specified during <a href="../setup/">setup</a>, you will be authenticated as the owner with <a href="../../reference/administration/acl/">full control</a> access rights.</p>
-                <div class="alert alert-info">
-                    <p>Login with Google is only enabled if LinkedDataHub was <a href="../../reference/configuration/#secrets">configured with social login</a>.</p>
+                <div class="ac-alert va-informative" role="status">
+                    <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+                    <div class="ac-alert-body">
+                        <p class="ac-alert-text">Login with Google is only enabled if LinkedDataHub was <a href="../../reference/configuration/#secrets">configured with social login</a>.</p>
+                    </div>
                 </div>
              </div>
-             <div class="tab-pane">
-                <p>Click the <span class="btn btn-primary">Login with ORCID</span> button in the navbar to authenticate with your <a href="https://orcid.org" target="_blank">ORCID</a> account using OpenID Connect.</p>
+            <div aria-labelledby="log-in-with-orcid-tab" class="ac-tabpanel" hidden="hidden" id="log-in-with-orcid-pane" role="tabpanel">
+                <p>Open the <span class="ac-btn in-primary ap-solid sz-md">Login <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown in the navigation bar and choose <samp>Login with ORCID</samp> to authenticate with your <a href="https://orcid.org" target="_blank">ORCID</a> account using OpenID Connect.</p>
                 <p>If the email address of your ORCID account matches the dataspace owner's email address that was specified during <a href="../setup/">setup</a>, you will be authenticated as the owner with <a href="../../reference/administration/acl/">full control</a> access rights.</p>
-                <div class="alert alert-info">
-                    <p>Login with ORCID is only enabled if LinkedDataHub was <a href="../../reference/configuration/#secrets">configured with social login</a>.</p>
+                <div class="ac-alert va-informative" role="status">
+                    <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+                    <div class="ac-alert-body">
+                        <p class="ac-alert-text">Login with ORCID is only enabled if LinkedDataHub was <a href="../../reference/configuration/#secrets">configured with social login</a>.</p>
+                    </div>
                 </div>
              </div>
-          </div>
         </div>
     </div>
-    <p class="lead">Are you in? Then continue the <a href="..">get started guide</a> or take a look at the <a href="../../reference/user-interface/">UI overview</a>.</p>
+    <p class="ldh-body-lg">Signed in? Next, <a href="../request-access/">request access</a> to the documents you need.</p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/get-started/get-an-account/signup.png b/docs/get-started/get-an-account/signup.png
deleted file mode 100644
index 3db615ed..00000000
Binary files a/docs/get-started/get-an-account/signup.png and /dev/null differ
diff --git a/docs/get-started/request-access-1.mp4 b/docs/get-started/request-access-1.mp4
new file mode 100644
index 00000000..d9b05dbc
Binary files /dev/null and b/docs/get-started/request-access-1.mp4 differ
diff --git a/docs/get-started/request-access.ttl b/docs/get-started/request-access.ttl
index bda8ddcf..25c2b57d 100644
--- a/docs/get-started/request-access.ttl
+++ b/docs/get-started/request-access.ttl
@@ -1,24 +1,24 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Request access" ;
-    dct:description "How to get access to an application" ;
+    dct:description "How to get access to a dataspace" ;
     rdf:_1 <#content> .
     
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">This guide describes how to get access to an application.</p>
+    <p class="ldh-body-lg">How to get access to a dataspace</p>
     <div>
         <p>After you have logged in to LinkedDataHub, by default you do not have access rights to view or edit the documents in the dataspace. The owner of the dataspace has to create
             an explicit authorization to allow access for you.</p>
-        <p>Fortunately, LinkedDataHub makes it easy to notify the owner by issuing an <a href="../../reference/administration/acl/#auth-requests">access request</a>. Navigate to the document you want to gain access to, click on the
-            <span class="btn btn-primary">Request access</span> button and submit the form that appears, as shown below. You can choose the desired <a href="../../reference/administration/acl/#access-modes">access modes</a>.</p>
-        <p>
-            <object data="../../../uploads/5b699202e4ffcbb3b56b37b24b9537e83339c4c7" style="height: 550px;" type="video/webm"></object>
-        </p>
+        <p>To notify the owner, issue an <a href="../../reference/administration/acl/#auth-requests">access request</a>. Navigate to the document you want to gain access to, click the
+            <span class="ac-btn in-primary ap-solid sz-md">Request access</span> button and submit the form that appears, as shown below. You can choose the desired <a href="../../reference/administration/acl/#access-modes">access modes</a>.</p>
+        <video aria-label="Submitting an access request" controls="controls" preload="metadata" src="/uploads/1ba1b3f7dd9fb3c22f60cc1a323af63eb010d9cf"></video>
+        <p>The submitted request is itself an RDF resource in the admin dataspace; the owner accepts it by creating the matching
+            <a href="../../reference/administration/acl/#authorizations">authorization</a>. The <a href="../../reference/administration/acl/#auth-requests">ACL reference</a> shows its shape.</p>
     </div>
-    <p class="lead">Are you in? Then continue the <a href="..">get started guide</a> or take a look at the <a href="../../reference/user-interface/">UI overview</a>.</p>
+    <p class="ldh-body-lg">Once the owner accepts your request, continue with the <a href="../../tutorial/">tutorial</a> or the <a href="../../user-guide/">user guide</a>.</p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/get-started/request-access/RequestAccess.webm b/docs/get-started/request-access/RequestAccess.webm
deleted file mode 100644
index d924f0cd..00000000
Binary files a/docs/get-started/request-access/RequestAccess.webm and /dev/null differ
diff --git a/docs/get-started/setup-1.mp4 b/docs/get-started/setup-1.mp4
new file mode 100644
index 00000000..d0175122
Binary files /dev/null and b/docs/get-started/setup-1.mp4 differ
diff --git a/docs/get-started/setup.ttl b/docs/get-started/setup.ttl
index 77b6a2af..0ec3b8dd 100644
--- a/docs/get-started/setup.ttl
+++ b/docs/get-started/setup.ttl
@@ -1,34 +1,32 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Setup" ;
-    dct:description "Setup LinkedDataHub on your local machine or access it in the cloud" ;
+    dct:description "Set up LinkedDataHub on your local machine with Docker" ;
     rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Setup LinkedDataHub on your local machine.</p>
-    <p class="text-center">
-        <iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="https://www.youtube.com/embed/mNqjolqtsWw" width="560"></iframe>
-    </p>
+    <p class="ldh-body-lg">Set up LinkedDataHub on your local machine with Docker</p>
+    <video aria-label="Setting up LinkedDataHub with Docker" controls="controls" preload="metadata" src="/uploads/7caf1576295c948e3639e468c5398ed3c787f6c4"></video>
     <div>
-        <h3 id="start-linkeddatahub">Start LinkedDataHub</h3>
-        <p>This section assumes you will be running on your local machine, i.e. <samp>localhost</samp>. If you intend to run it on a different host, <a href="../../user-guide/change-system-base-uri/#base-uri">change the system base URI</a>.</p>
+        <h2 id="start-linkeddatahub">Start LinkedDataHub</h2>
+        <p>This section assumes you will be running on your local machine, i.e. <samp>localhost</samp>. If you intend to run it on a different host, <a href="../../reference/configuration/#system-base-uri">change the system base URI</a>.</p>
         <p>Prerequisites:</p>
         <ul>
-            <li>bash shell. It should be included by default on Linux. On Windows you can install the <a href="https://docs.microsoft.com/en-us/windows/wsl/install-win10" target="_blank">Windows Subsystem for Linux</a>.</li>
-            <li><a href="https://www.openssl.org/" target="_blank">openssl</a> available on <code>$PATH</code>.</li>
-            <li><a href="https://docs.docker.com/install/" target="_blank">Docker</a> installed</li>
-            <li><a href="https://docs.docker.com/compose/install/" target="_blank">Docker Compose</a> installed</li>
+            <li>A bash shell — included on Linux and macOS; on Windows, install the <a href="https://docs.microsoft.com/en-us/windows/wsl/install-win10" target="_blank">Windows Subsystem for Linux</a></li>
+            <li><a href="https://www.openssl.org/" target="_blank">openssl</a> on your <code>$PATH</code></li>
+            <li><a href="https://docs.docker.com/install/" target="_blank">Docker</a></li>
+            <li><a href="https://docs.docker.com/compose/install/" target="_blank">Docker Compose</a></li>
         </ul>
         <p>Steps:</p>
         <ol>
             <li><a href="https://guides.github.com/activities/forking/" target="_blank">Fork</a> the <a href="https://github.com/AtomGraph/LinkedDataHub" target="_blank">LinkedDataHub</a> repository
                 and clone the fork into a folder</li>
-            <li>In the folder, create an <samp>.env</samp> file and fill out the missing values (you can use <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/.env_sample" target="_blank"><samp>.env_sample</samp></a> as a template). For example:
+            <li>In the folder, copy <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/.env_sample" target="_blank"><samp>.env_sample</samp></a> to <samp>.env</samp> and fill in the values. For example:
                 <pre>COMPOSE_CONVERT_WINDOWS_PATHS=1
 COMPOSE_PROJECT_NAME=linkeddatahub
 
@@ -36,7 +34,6 @@ PROTOCOL=https
 HTTP_PORT=81
 HTTPS_PORT=4443
 HOST=localhost
-ABS_PATH=/
 
 OWNER_MBOX=john@doe.com
 OWNER_GIVEN_NAME=John
@@ -46,10 +43,11 @@ OWNER_ORGANIZATION=My org
 OWNER_LOCALITY=Copenhagen
 OWNER_STATE_OR_PROVINCE=Denmark
 OWNER_COUNTRY_NAME=DK</pre>
+                If port 81 or 4443 is already in use on your machine, choose different <code>HTTP_PORT</code>/<code>HTTPS_PORT</code> values.
             </li>
-            <li>Setup the server's SSL certificates by running this from command line:
+            <li>Set up the server's TLS certificates by running this from the command line:
                 <pre>./bin/server-cert-gen.sh .env nginx ssl</pre>
-                The script will create an <samp>ssl/server</samp> sub-folder where the SSL certificate will be stored.
+                The script will create an <samp>ssl/server</samp> sub-folder where the TLS certificate will be stored.
             </li>
             <li>Create the following secrets with certificate/truststore passwords:
                 <ul>
@@ -60,28 +58,68 @@ OWNER_COUNTRY_NAME=DK</pre>
                 The one you will need to remember in order to authenticate with LinkedDataHub <a href="../get-an-account/#install-cert">using WebID client certificate</a> is <samp>owner_cert_password</samp>.
             </li>
             <li>(Optional) If you need to configure Bearer token authentication for SPARQL services, create <samp>secrets/credentials.trig</samp> with your service credentials. See the <a href="../../reference/configuration/#secrets">configuration reference</a> for details.</li>
-            <li>Run this from command line:
-                <pre>docker-compose up --build</pre>
+            <li>Run this from the command line:
+                <pre>make up -- --build</pre>
+                (<samp>make up</samp> forwards its arguments to <samp>docker-compose up</samp>; the <samp>--</samp> is needed before arguments starting with <samp>-</samp>.)
                 LinkedDataHub will start and mount the following sub-folders:
-                <ol>
-                    <li><samp>data</samp> where the backend triplestores will persist RDF data</li>
-                    <li><samp>datasets</samp> where the owner and secretary agent metadata is persisted</li>
-                    <li><samp>ssl/owner</samp> and <samp>ssl/secretary</samp> where the owner and secretary SSL certificates and WebID public keys are persisted</li>
-                    <li><samp>uploads</samp> where LinkedDataHub stores content-hashed file uploads</li>
-                    <li><samp>config</samp> where <a href="../../reference/dataspace/">dataspace and service configurations</a> are stored</li>
-                </ol>
+                <pre>LinkedDataHub/
+├── config/     # dataspace and service configuration (dataspaces.trig, system.trig)
+├── datasets/   # owner and secretary agent metadata
+├── fuseki/     # the triplestore's persisted RDF data, one TDB2 directory per dataset
+├── ssl/
+│   ├── owner/      # your WebID certificate (keystore.p12)
+│   └── secretary/  # the service agent's certificate
+└── uploads/    # content-hashed file uploads</pre>
             </li>
         </ol>
-        <p>You are now the owner of this LinkedDataHub instance; <samp>ssl/owner/keystore.p12</samp> is your WebID certificate. Password is the <samp>owner_cert_password</samp> secret value.</p>
-        <p>After a successful startup you should see periodic healthcheck requests being made to the <samp>https://localhost:4443/ns</samp> URL.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">The administration dataspace of each <a href="../../reference/dataspace/">dataspace</a> is served on the <code>admin.</code> subdomain — for the default setup that is <samp>https://admin.localhost:4443/</samp>. Browsers resolve <samp>*.localhost</samp> automatically and the generated server certificate covers the subdomain, so the local setup works out of the box. On any other host, make sure <samp>admin.&lt;host&gt;</samp> resolves in DNS and is covered by the server's TLS certificate (e.g. a wildcard certificate).</p>
+            </div>
+        </div>
+        <p>You are now the owner of this LinkedDataHub instance; <samp>ssl/owner/keystore.p12</samp> is your WebID certificate. The password is the value you put in <samp>secrets/owner_cert_password.txt</samp>.</p>
+        <p>Startup takes up to half a minute while the datasets are loaded into the triplestores. After a successful startup you should see periodic healthcheck requests being made to the <samp>https://localhost:4443/ns</samp> URL in the log:</p>
+        <pre>linkeddatahub-1  | ... "GET /ns HTTP/1.1" 200 ...</pre>
+    </div>
+    <div>
+        <h2 id="common-commands">Common commands</h2>
+        <table>
+            <caption class="ac-vh">Common commands and what they do</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Command</th>
+                    <th scope="col">Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row"><samp>make up</samp></th>
+                    <td>Start the services; extra arguments are forwarded to <samp>docker-compose up</samp>, e.g. <samp>make up -- --build</samp> to rebuild the images first</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>make down</samp></th>
+                    <td>Stop the services; <samp>make down -- -v</samp> also removes the Docker volumes</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>make drop</samp></th>
+                    <td>Wipe the setup completely, as described under <a href="#reset">Reset</a></td>
+                </tr>
+            </tbody>
+        </table>
+        <p><samp>make cli</samp> builds the <a href="../../reference/command-line-interface/">command line interface</a> and prints the line that puts it on your <code>$PATH</code>.</p>
     </div>
     <div>
         <h2 id="reset">Reset</h2>
         <p>If you need to start fresh and wipe the existing setup, you can do that using:</p>
-        <pre>sudo rm -rf data datasets uploads ssl &amp;&amp; docker-compose down -v</pre>
-        <div class="alert alert-info">
-            <p>This will remove persisted RDF data, SSL keys, and uploaded files as well as the Docker volumes.</p>
+        <pre>make drop</pre>
+        <p>It stops the services, removes the Docker volumes, and wipes the local <samp>datasets</samp>, <samp>fuseki</samp>, <samp>ssl</samp> and <samp>uploads</samp> folders.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <span class="ac-alert-title">This is destructive and cannot be undone.</span>
+            </div>
         </div>
     </div>
-    <p class="lead">Is LinkedDataHub running? Proceed to <a href="../get-an-account/">get an account</a>.</p>
+    <p class="ldh-body-lg">Is LinkedDataHub running? Proceed to <a href="../get-an-account/">get an account</a>.</p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/install.sh b/docs/install.sh
index 97f1c6a6..15b24322 100755
--- a/docs/install.sh
+++ b/docs/install.sh
@@ -1,28 +1,19 @@
 #!/usr/bin/env bash
-
-if [ "$#" -ne 3 ] && [ "$#" -ne 4 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../LinkedDataHub/ssl/owner/cert.pem Password [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file=$(realpath "$2")
-cert_password="$3"
-
-if [ -n "$4" ]; then
-    proxy="$4"
-else
-    proxy="$base"
-fi
-
-pwd="$(realpath "$PWD")"
-
-printf "\n### Creating authorization to make the app public\n\n"
-
-make-public.sh -b "$base" -f "$cert_pem_file" -p "$cert_password" --proxy "$proxy"
-
-printf "\n### Updating documents and uploading files (traversing folders recursively)\n\n"
-
-./update-folder.sh "$base" "$cert_pem_file" "$cert_password" "$pwd" "$pwd" "$proxy"
\ No newline at end of file
+# Installs the documentation onto a LinkedDataHub instance with the ldh CLI: makes it public and
+# pushes the document tree with its media, which lands at the content-addressed {base}uploads/{sha1}
+# the sources reference.
+#
+# Reads LDH_BASE, LDH_CERT_FILE, LDH_CERT_PASSWORD and optionally LDH_PROXY; `make install` prompts
+# for them. Re-running converges: PUT replaces each document. make-public is a POST and adds another
+# authorization per run.
+set -euo pipefail
+
+app_dir="$(cd "$(dirname "$0")" && pwd)"
+. "$app_dir/../lib/ldh-app.sh"
+ldh_app_require_env
+
+ldh_app_step "Creating authorization to make the app public"
+ldh admin make-public
+
+ldh_app_step "Pushing documents and media"
+ldh push --dir "$app_dir" "$LDH_BASE"
diff --git a/docs/reference.ttl b/docs/reference.ttl
index eb58dfcb..8c8e5dd1 100644
--- a/docs/reference.ttl
+++ b/docs/reference.ttl
@@ -1,17 +1,23 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Container ;
     dct:title "Reference" ;
-    dct:description "A list of LinkedDataHub's features and their functions, split into general and administration parts" ;
+    dct:description "Feature-by-feature reference for the LinkedDataHub platform, its data model, HTTP API and administration" ;
     rdf:_1 <#content> ;
     rdf:_2 <#select-children> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">A list of LinkedDataHub's features and their functions, split into general and administration parts</p>
+    <p class="ldh-body-lg">Feature-by-feature reference for the LinkedDataHub platform, its data model, HTTP API and administration</p>
+    <p>The concept pages describe the <a href="dataspace/">dataspace</a>, its <a href="dataset/">dataset</a> and the <a href="data-model/">data model</a>.
+        The interface pages cover the <a href="user-interface/">user interface</a>, the <a href="http-api/">HTTP API</a> and the <a href="command-line-interface/">command line interface</a>.
+        Customization is covered by the <a href="stylesheets/">stylesheets</a> and <a href="imports/">imports</a> pages,
+        and operations by the <a href="configuration/">configuration</a>, <a href="triplestores/">triplestores</a>, <a href="versioning/">versioning</a> and <a href="administration/">administration</a> pages.
+        Start with the dataspace and data model pages; an application or deployment moving off 5.x starts at
+        <a href="migrating-from-5x/">migrating from 5.x</a>.</p>
 </div>"""^^rdf:XMLLiteral .
 
 <#select-children> a ldh:Object ;
diff --git a/docs/reference/administration.ttl b/docs/reference/administration.ttl
index c6697b2f..d8bdc01e 100644
--- a/docs/reference/administration.ttl
+++ b/docs/reference/administration.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Container ;
@@ -11,9 +11,10 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Access control and domain model management</p>
-    <p>Administration is provided in a separate LinkedDataHub application, which is paired with each <a href="../dataspace/#end-user-apps">end-user
-        application</a>.</p>
+    <p class="ldh-body-lg">Access control and domain model management</p>
+    <p>Each <a href="../dataspace/#end-user">end-user dataspace</a> is paired with a separate administration dataspace.</p>
+    <p>The administration dataspace manages the assets that govern its end-user dataspace: <a href="ontologies/">ontologies</a>,
+        <a href="acl/">access control</a>, and <a href="packages/">packages</a>. Only dataspace owners have access to it.</p>
 </div>"""^^rdf:XMLLiteral .
 
 <#select-children> a ldh:Object ;
diff --git a/docs/reference/administration/acl.ttl b/docs/reference/administration/acl.ttl
index 86ddbf35..67f85c84 100644
--- a/docs/reference/administration/acl.ttl
+++ b/docs/reference/administration/acl.ttl
@@ -1,70 +1,58 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-    
+
 <> a dh:Item ;
     dct:title "Access control" ;
     dct:description "Agents, groups, and authorizations" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">LinkedDataHub access control is based on the W3C <a href="https://www.w3.org/wiki/WebAccessControl" target="_blank">ACL ontology</a>.</p>
+    <p class="ldh-body-lg">Agents, groups, and authorizations</p>
+    <p>LinkedDataHub access control is based on the W3C <a href="https://www.w3.org/wiki/WebAccessControl" target="_blank">ACL ontology</a>.</p>
     <div>
         <h2 id="access-modes">Access modes</h2>
-        <p>There are 4 access modes (classes of operation) that map to <a href="../../http-api/">HTTP methods</a>:</p>
-        <table class="table table-striped">
+        <p>There are four access modes (classes of operation) that map to <a href="../../http-api/">HTTP methods</a>:</p>
+        <table>
+            <caption class="ac-vh">Access modes and the HTTP methods they permit</caption>
             <thead>
                 <tr>
-                    <th>Mode</th>
-                    <th>Those allowed may</th>
-                    <th>HTTP method</th>
+                    <th scope="col">Mode</th>
+                    <th scope="col">Permits</th>
+                    <th scope="col">HTTP method</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <th>Read</th>
-                    <td>read the contents (including querying it, etc)</td>
+                    <th scope="row">Read</th>
+                    <td>Read the contents, including querying them.</td>
                     <td><code>GET</code></td>
                 </tr>
                 <tr>
-                    <th>Write</th>
-                    <td>overwrite the contents (including deleting it, or modifying part of it)</td>
-                    <td><code>PUT</code>, <code>DELETE</code></td>
+                    <th scope="row">Write</th>
+                    <td>Overwrite the contents, including deleting or modifying them.</td>
+                    <td><code>PUT</code>, <code>PATCH</code>, <code>DELETE</code></td>
                 </tr>
                 <tr>
-                    <th>Append</th>
-                    <td>add information to [the end of] it but not remove information</td>
+                    <th scope="row">Append</th>
+                    <td>Add information without removing or replacing any.</td>
                     <td><code>POST</code></td>
                 </tr>
                 <tr>
-                    <th>Control</th>
-                    <td>set the Access Control List for this themselves</td>
-                    <td></td>
+                    <th scope="row">Control</th>
+                    <td>Change the authorizations that apply to the resource.</td>
+                    <td>— (no corresponding HTTP method)</td>
                 </tr>
             </tbody>
         </table>
     </div>
     <div>
         <h2 id="agents">Agents</h2>
-        <p>An agent is a person or a software agent that can be authorized to have certain <a href="#access-modes">modes
-            of access</a> to certain applications.</p>
-        <!--
-        <p>Each agent is associated with a <a href="#user-accounts">user account</a>. The exception is the class
-            <code>foaf:Agent</code> as the class of all agents. This indicates that the given access is public. In this
-            case authentication is skipped.</p>
-        -->
-    </div>
-    <!--
-    <div>
-        <h2 id="user-accounts">User accounts</h2>
-        <p>User account is a subclass of the <a href="http://rdfs.org/sioc/spec/#term_UserAccount"><code>sioc:UserAccount</code></a>
-            class. An account is the actual instance that performs actions on the application
-            (<a href="../../data-model/documents/#manage">manages documents</a>, <a href="../../../user-guide/import-data/import-csv-data/">imports data</a> etc.). An
-            account always belongs to an <a href="#agents">agent</a>.</p>
+        <p>An agent is a person or a piece of software, identified by a WebID, that can be authorized to have certain <a href="#access-modes">modes
+            of access</a> to certain dataspaces.</p>
     </div>
-    -->
     <div>
         <h2 id="groups">Groups</h2>
         <p>A group is a named group of <a href="#agents">agents</a> to which an <a href="#authorizations">authorization</a> can
@@ -72,36 +60,43 @@
             class.</p>
         <p>There are several default groups:</p>
         <ul>
-            <li>owners</li>
-            <li>readers</li>
-            <li>writers</li>
+            <li>Owners</li>
+            <li>Writers</li>
+            <li>Readers</li>
         </ul>
-        <div class="alert alert-info">
-            <p>Only agents that belong to the owners group will have access to the administration application.<br></br>
-            Note that an agent being a member of one of the above groups does not automatically provide it with an
-                authorization. A valid authorization for the whole group has to be present.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">By default, only members of the owners group have access to the administration dataspace: its built-in
+                    <samp>Full control</samp> authorization grants the <a href="#access-modes">Control</a> mode (along with read and write)
+                    to that group. See <a href="#authorizations">Authorizations</a>.</p>
+                <p class="ac-alert-text">Note that an agent being a member of one of the above groups does not automatically provide it with an
+                    authorization. A valid authorization for the whole group has to be present.</p>
+            </div>
         </div>
     </div>
     <div>
         <h2 id="authorizations">Authorizations</h2>
         <p>An authorization explicitly grants access for an <a href="#agents">agent</a> or a <a href="#groups">group</a>
-            of agents to access a specific end-user application document or a <a href="../ontologies/#classes">class</a>
+            of agents to access a specific end-user dataspace document or a <a href="../ontologies/#classes">class</a>
             of its documents.</p>
         <p>An <a href="#agents">agent</a> has to be authorized using the <a href="#access-modes">Control</a> mode to be
-            able to login to the <a href="../../dataspace/#admin-apps">administration application</a>.</p>
-        <p>Here are the default authorizations for groups and their respective access modes:</p>
-        <table class="table">
+            able to log in to the <a href="../../dataspace/#admin">administration dataspace</a>. By default such an
+            authorization is granted to the <a href="#groups">owners group</a>.</p>
+        <p>The default authorizations for groups and their respective access modes:</p>
+        <table>
+            <caption class="ac-vh">Default access for each group</caption>
             <thead>
                 <tr>
-                    <th>Group</th>
-                    <th>Read access</th>
-                    <th>Write/append access</th>
-                    <th>Full control</th>
+                    <th scope="col">Group</th>
+                    <th scope="col">Read access</th>
+                    <th scope="col">Write/append access</th>
+                    <th scope="col">Full control</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <th rowspan="2">Owners</th>
+                    <th rowspan="2" scope="row">Owners</th>
                     <td rowspan="2"><a href="#access-modes">Read</a></td>
                     <td><a href="#access-modes">Write</a></td>
                     <td rowspan="2"><a href="#access-modes">Control</a></td>
@@ -110,31 +105,111 @@
                     <td><a href="#access-modes">Append</a></td>
                 </tr>
                 <tr>
-                    <th rowspan="2">Writers</th>
+                    <th rowspan="2" scope="row">Writers</th>
                     <td rowspan="2"><a href="#access-modes">Read</a></td>
                     <td><a href="#access-modes">Write</a></td>
-                    <td rowspan="2"></td>
+                    <td rowspan="2">—</td>
                 </tr>
                 <tr>
                     <td><a href="#access-modes">Append</a></td>
                 </tr>
                 <tr>
-                    <th>Readers</th>
+                    <th scope="row">Readers</th>
                     <td><a href="#access-modes">Read</a></td>
-                    <td></td>
-                    <td></td>
+                    <td>—</td>
+                    <td>—</td>
                 </tr>
             </tbody>
         </table>
-        <p>Public access authorization allows access for non-authenticated agents.</p>
+        <p>An authorization is a plain RDF resource. Granting the <samp>writers</samp> group full access to the Northwind orders container:</p>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="rdf-pane" aria-selected="true" class="ac-tab is-on" id="rdf-tab" role="tab" type="button"><span class="ac-tab-lbl">RDF</span></button>
+                <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="rdf-tab" class="ac-tabpanel" id="rdf-pane" role="tabpanel">
+                <pre>@prefix acl:  &lt;http://www.w3.org/ns/auth/acl#&gt; .
+@prefix rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt; .
+
+&lt;#this&gt; a acl:Authorization ;
+    rdfs:label "Order management" ;
+    acl:agentGroup &lt;https://admin.localhost:4443/acl/groups/writers/#this&gt; ;
+    acl:mode acl:Read, acl:Append, acl:Write ;
+    acl:accessTo &lt;https://localhost:4443/orders/&gt; .</pre>
+            </div>
+            <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
+                <pre>ldh admin create authorization \\
+  --label "Order management" \\
+  --agent-group "https://admin.localhost:4443/acl/groups/writers/#this" \\
+  --to "https://localhost:4443/orders/" \\
+  --read --append --write</pre>
+            </div>
+        </div>
+        <p>An authorization can also target a whole class of documents with <code>acl:accessToClass</code>. Granting the <samp>readers</samp> group read access to every container:</p>
+        <pre>@prefix acl:  &lt;http://www.w3.org/ns/auth/acl#&gt; .
+@prefix rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt; .
+@prefix dh:   &lt;https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#&gt; .
+
+&lt;#this&gt; a acl:Authorization ;
+    rdfs:label "Container read access" ;
+    acl:agentGroup &lt;https://admin.localhost:4443/acl/groups/readers/#this&gt; ;
+    acl:mode acl:Read ;
+    acl:accessToClass dh:Container .</pre>
+        <p>A public-access authorization allows access for non-authenticated agents — the <a href="../../../tutorial/publish/">Publish</a> stage of the
+            tutorial shows the one <samp>ldh admin make-public</samp> creates, granting <code>acl:Read</code> to the <code>foaf:Agent</code> class
+            on every document class.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">The owner's and <a href="../../dataspace/#dataspaces">secretary's</a> authorizations are stored under stable URIs (<samp>acl/authorizations/owner-webid/</samp> and <samp>acl/authorizations/secretary-webid/</samp>), so reloading the admin dataset does not create duplicates.</p>
+            </div>
+        </div>
         <div>
-            <h3 id="auth-requests">Requests</h3>
-            <p>If access is denied due to missing authorization, the agent can ask for it by issuing a request to the application's
-            <a href="../../dataspace/#admin-apps">owners</a>. It indicates the request URI and access mode in question.
-            The owners can then accept the request by creating an <a href="#authorizations">authorization</a> with the provided information
-            (possibly extending the requested access to a <a href="#groups">group</a> of agents or a <a href="../ontologies/#classes">class of resources</a>),
-            or simply ignore it.</p>
+            <h3 id="auth-requests">Access requests</h3>
+            <p>If access is denied due to missing authorization, the agent can ask for it by issuing a request to the dataspace's
+                <a href="#groups">owners</a>. The request indicates the request URI and access mode in question.
+                The owners can then accept the request by creating an <a href="#authorizations">authorization</a> with the provided information
+                (possibly extending the requested access to a <a href="#groups">group</a> of agents or a <a href="../ontologies/#classes">class of resources</a>),
+                or simply ignore it.</p>
+            <p>A request is data too — asking for write access to a Northwind order:</p>
+            <pre>@prefix lacl: &lt;https://w3id.org/atomgraph/linkeddatahub/admin/acl#&gt; .
+@prefix acl:  &lt;http://www.w3.org/ns/auth/acl#&gt; .
 
+&lt;#this&gt; a lacl:AuthorizationRequest ;
+    lacl:requestAgent &lt;https://localhost:4443/agents/jane/#this&gt; ;
+    lacl:requestMode acl:Write ;
+    lacl:requestAccessTo &lt;https://localhost:4443/orders/10248/&gt; .</pre>
         </div>
     </div>
+    <div>
+        <h2 id="management">Management</h2>
+        <table>
+            <caption class="ac-vh">Access control actions and their CLI commands</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Action</th>
+                    <th scope="col">CLI command</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row">Create group</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh admin create group</samp></a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Create authorization</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh admin create authorization</samp></a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Add agent to group</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh admin add agent</samp></a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Make a document public</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh admin make-public</samp></a></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <p class="ldh-body-lg">To request access to someone else's dataspace, see the <a href="../../../get-started/request-access/">Request access</a> guide. To open your data to the public, follow the <a href="../../../tutorial/publish/">Publish</a> stage of the tutorial.</p>
 </div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/administration/ontologies-1.webp b/docs/reference/administration/ontologies-1.webp
new file mode 100644
index 00000000..93b08259
Binary files /dev/null and b/docs/reference/administration/ontologies-1.webp differ
diff --git a/docs/reference/administration/ontologies.ttl b/docs/reference/administration/ontologies.ttl
index 53809de0..40b5dac0 100644
--- a/docs/reference/administration/ontologies.ttl
+++ b/docs/reference/administration/ontologies.ttl
@@ -1,61 +1,76 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Ontologies" ;
-    dct:description "Ontology classes, constraints, properties etc." ;
+    dct:description "Classes, constructors, constraints and properties of the dataspace's domain model" ;
     rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+    <p class="ldh-body-lg">Classes, constructors, constraints and properties of the dataspace's domain model</p>
     <div>
         <h2 id="ontologies">Ontologies</h2>
         <p>Ontologies are sets of domain concepts. The domain can span both documents (information resources) and abstract/physical things
             (non-information resources).</p>
         <p>Ontologies can <a href="https://www.w3.org/TR/owl2-primer/#Ontology_Management" target="_blank">import other ontologies</a>, both user-defined
-            and system ones provided by LinkedDataHub. The imports are retrieved during application initialization, and the application's namespace ontology
-            becomes a transitive union, i.e. is merged with its imports and imports of the imports etc.</p>
-        <div class="alert alert-warning">
-            <h4>Best practice: avoid using <code>owl:imports</code> with uploaded files</h4>
-            <p>Do not use <code>owl:imports</code> declarations that point to paths under <samp>uploads/</samp>. This can cause circular dependency deadlocks
-            during system initialization, as the ontology loading process cannot access uploaded files without creating a circular reference.</p>
-            <p>Instead:</p>
-            <ul>
-                <li>Host ontologies as proper documents (not uploaded files)</li>
-                <li>Import them using their document URIs</li>
-                <li>If you need to use an ontology that was uploaded, create it as a proper ontology document first</li>
-            </ul>
-            <p>For more information, see the <a href="../../../user-guide/upload-file/">file upload documentation</a>.</p>
+            and system ones provided by LinkedDataHub. The dataspace's <a href="../../dataspace/#dataspaces">namespace ontology</a> is resolved as a native <code>owl:imports</code> union graph —
+            the transitive closure of its imports — which is cached per ontology URI. No inference is materialized: the terms are served exactly as declared.</p>
+        <p>An ontology URI is resolved against the store first and the platform's bundled copies second: a document in the admin dataspace that declares
+            the ontology (<code>&lt;uri&gt; a owl:Ontology</code>) is the graph that resolves, even for a vocabulary the platform ships a copy of. That is what lets
+            an imported vocabulary and its annotations live in one document under the vocabulary's own URI.</p>
+        <p><a href="../packages/">Package</a> ontologies join the dataspace's imports closure automatically. They are derived from the dataspace's
+            <code>ldh:import</code> declarations at ontology load time and declared as <code>owl:imports</code> of the namespace ontology, so they resolve
+            like any other import. On the first request after the import, the package ontology is <dfn>materialized</dfn>: copied verbatim into a document under the
+            admin dataspace's <samp>ontologies/</samp> container, named after the package's path (<samp>ontologies/editor-taxonomy/</samp> for the taxonomy editor),
+            with the ontology as its <code>foaf:primaryTopic</code>. From then on that document is what the closure resolves the package ontology to, and its constructors,
+            constraints and views are edited like the namespace ontology's. A later change to the published package does not reach the dataspace until the document
+            is deleted, after which the next request materializes the package again.</p>
+        <div class="ac-alert va-warning" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">warning</span></span>
+            <div class="ac-alert-body">
+                <span class="ac-alert-title">Best practice: avoid using <code>owl:imports</code> with uploaded files</span>
+                <p class="ac-alert-text">Do not use <code>owl:imports</code> declarations that point to paths under <samp>uploads/</samp>. This can cause circular dependency deadlocks
+                during system initialization, as the ontology loading process cannot access uploaded files without creating a circular reference.</p>
+                <p class="ac-alert-text">Instead:</p>
+                <ul class="ac-alert-text">
+                    <li>Host ontologies as proper documents (not uploaded files)</li>
+                    <li>Import them using their document URIs</li>
+                    <li>If you need to use an ontology that was uploaded, create it as a proper ontology document first</li>
+                </ul>
+                <p class="ac-alert-text">For more information, see the <a href="../../../user-guide/upload-file/">file upload documentation</a>.</p>
+            </div>
         </div>
         <p>Main ontology properties:</p>
         <dl>
             <dt>Imports</dt>
-            <dd>Ontology to be imported</dd>
+            <dd>The URI of another ontology whose terms are pulled into this ontology's imports closure (<code>owl:imports</code>)</dd>
             <dt>Version</dt>
-            <dd>Unique version of this ontology</dd>
+            <dd>Version identifier of the ontology (<code>owl:versionInfo</code>)</dd>
         </dl>
         <div>
-            <h3>System ontologies</h3>
-            <table class="table">
+            <h3 id="system-ontologies">System ontologies</h3>
+            <table>
+                <caption class="ac-vh">System ontologies and their prefixes</caption>
                 <thead>
                     <tr>
-                        <th>Ontology</th>
-                        <th>Title</th>
-                        <th>Prefix</th>
+                        <th scope="col">Ontology</th>
+                        <th scope="col">Title</th>
+                        <th scope="col">Prefix</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
-                        <td><a href="https://w3id.org/atomgraph/linkeddatahub/default" id="def-ont"><code>https://w3id.org/atomgraph/linkeddatahub/default#</code></a></td>
+                        <td><a href="https://w3id.org/atomgraph/linkeddatahub/default" id="def-ont" target="_blank"><code>https://w3id.org/atomgraph/linkeddatahub/default#</code></a></td>
                         <td>Default</td>
                         <td><code>def:</code></td>
                     </tr>
                     <tr>
-                        <td><a href="https://w3id.org/atomgraph/linkeddatahub/apps" id="lapp-ont" target="_blank"><code>https://w3id.org/atomgraph/linkeddatahub/apps#</code></a></td>
-                        <td>Applications</td>
-                        <td><code>lapp:</code></td>
+                        <td><a href="https://w3id.org/atomgraph/linkeddatahub/dataspaces" id="lds-ont" target="_blank"><code>https://w3id.org/atomgraph/linkeddatahub/dataspaces#</code></a></td>
+                        <td>Dataspaces</td>
+                        <td><code>lds:</code></td>
                     </tr>
                     <tr>
                         <td><a href="https://w3id.org/atomgraph/linkeddatahub/admin/acl" id="lacl-ont" target="_blank"><code>https://w3id.org/atomgraph/linkeddatahub/admin/acl#</code></a></td>
@@ -68,12 +83,12 @@
                         <td><code>adm:</code></td>
                     </tr>
                     <tr>
-                        <td><a href="https://w3id.org/atomgraph/linkeddatahub" id="ldh-ont"><code>https://w3id.org/atomgraph/linkeddatahub#</code></a></td>
+                        <td><a href="https://w3id.org/atomgraph/linkeddatahub" id="ldh-ont" target="_blank"><code>https://w3id.org/atomgraph/linkeddatahub#</code></a></td>
                         <td>LinkedDataHub</td>
                         <td><code>ldh:</code></td>
                     </tr>
                     <tr>
-                        <td><a href="https://www.w3.org/ns/ldt/document-hierarchy" id="dh-ont" target="_blank"><code>https://www.w3.org/ns/ldt/document-hierarchy#</code></a></td>
+                        <td><a href="https://w3id.org/atomgraph/linkeddatahub/document-hierarchy" id="dh-ont" target="_blank"><code>https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#</code></a></td>
                         <td>Document hierarchy</td>
                         <td><code>dh:</code></td>
                     </tr>
@@ -83,46 +98,175 @@
     </div>
     <div>
         <h2 id="classes">Classes</h2>
-        <p>Classes are simply RDFS classes. Usually the <a href="../../dataset/" target="_blank">application dataset</a> contains class instances.</p>
-        <p>Main class properties such as constructor and constraint are explained in the sub-sections below. Additional properties are:</p>
+        <p>Classes are RDFS/OWL classes declared in the dataspace's namespace ontology. Their instances live in the <a href="../../dataset/">dataspace dataset</a>.</p>
+        <p>The main class properties, explained in the sub-sections below:</p>
         <dl>
-            <dt><a href="#constructors">Constructor</a></dt>
-            <dd>Query that constructs new class instance</dd>
+            <dt><a href="#constructors">Constructors</a></dt>
+            <dd>Queries that construct a new class instance</dd>
             <dt><a href="#constraints">Constraints</a></dt>
-            <dd>Command or command template that validates class instance</dd>
+            <dd>Commands or command templates that validate a class instance</dd>
         </dl>
         <div>
             <h3 id="constructors">Constructors</h3>
             <p>Constructors are SPARQL <code>CONSTRUCT</code> queries that serve as templates for class instances.
                 They specify the properties (both mandatory and optional) that the instance is supposed to have, as well as expected datatypes of their
-                values. Constructors are used in create/edit modes. A class can have multiple constructors.</p>
-            <p>For example, the constructor of the <code>ldh:XHTML</code> <a href="#classes">class</a>:</p>
-            <pre><code>PREFIX rdf:     &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt;
+                values. Constructors drive the resource creation and editing forms. A class can have multiple constructors.</p>
+            <p>The Northwind demo wires a constructor onto <code>schema:Product</code>, which is what makes the Product create form offer the right controls:</p>
+            <pre>schema:Product spin:constructor :ProductConstructor ;
+    spin:constraint :MissingName .
+
+:ProductConstructor a ldh:Constructor ;
+    rdfs:label "Product constructor" ;
+    dct:title "Product constructor" ;
+    sp:text \"\"\"
+        PREFIX schema:  &lt;https://schema.org/&gt;
+        PREFIX dct:     &lt;http://purl.org/dc/terms/&gt;
+        PREFIX xsd:     &lt;http://www.w3.org/2001/XMLSchema#&gt;
+
+        CONSTRUCT {
+            $this dct:title [ a xsd:string ] ;
+                schema:name [ a xsd:string ] ;
+                schema:identifier [ a xsd:string ] ;
+                schema:description [ a xsd:string ] ;
+                schema:category [ a schema:ProductGroup ] ;
+                schema:provider [ a schema:Corporation ] ;
+                schema:offers [ a schema:Offer ] .
+        }
+        WHERE {}\"\"\" ;
+    rdfs:isDefinedBy : .</pre>
+            <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/admin/model/ns.ttl" target="_blank">admin/model/ns.ttl</a></p>
+            <p>A constructor can also supply a default <em>value</em> — the built-in <code>ldh:XHTML</code> constructor seeds new blocks with an empty XHTML literal:</p>
+            <pre>PREFIX rdf:     &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt;
 
 CONSTRUCT {
   $this rdf:value "&lt;div xmlns=\\"http://www.w3.org/1999/xhtml\\"&gt;&lt;/div&gt;"^^rdf:XMLLiteral .
 }
-WHERE {}</code></pre>
-            <p>An instance of these classes by default have a content property with XML literal.</p>
+WHERE {}</pre>
             <p>LinkedDataHub reuses <a href="http://spinrdf.org/spin.html#spin-constructors" target="_blank">SPIN constructors</a> for the implementation, but adds a
                 special syntax convention using blank nodes to indicate the expected resource type (<code>[ a ex:Person ]</code>) or literal datatype
-                (<code>[ a xsd:string ]</code>). The magic variable <code>$this</code> refers to the instance being constructed, it is a blank node resource initially but
-                gets skolemized to a URI when submitted to the server.</p>
-            <p>Note that classes inherit constructors from superclasses in runtime. Subclasses do not have to redefine constructor properties already found
-                in superclass constructors, only additional properties.</p>
+                (<code>[ a xsd:string ]</code>). The magic variable <code>$this</code> refers to the instance being constructed. It starts as a blank node
+                resource and is skolemized to a URI when the form is submitted to the server.</p>
+            <p>Note that classes inherit constructors from superclasses at runtime. A subclass constructor only needs to declare the properties its
+                superclasses do not already declare.</p>
+            <p>Constructor instances are instantiated client-side: the constructors of the resource's types (including the superclass closure) are expanded
+                onto a single instance. For that to work, a constructor has to have an empty <code>WHERE</code> clause, as in the example above.</p>
         </div>
         <div>
             <h3 id="constraints">Constraints</h3>
             <p>Constraints are SPARQL queries or <a href="https://spinrdf.org/spin.html#spin-templates" target="_blank">SPIN command templates</a> that validate submitted
-                RDF data during document creation and editing. Constraints are enforced for instances of model classes on which they are defined and are
-                used to check class instances for violations (missing mandatory properties, malformed values etc.). For example, an instance of
+                RDF data during document creation and editing. A constraint applies to instances of the class it is declared on and reports violations —
+                missing mandatory properties, malformed values and so on. For example, an instance of
                 <code>dh:Item</code> without <code>dct:title</code> will fail validation because titles are mandatory for LinkedDataHub documents.</p>
+            <p>The most common constraint shape is the missing-property check. The Northwind demo requires every Product to have a name:</p>
+            <pre>:MissingName a ldh:MissingPropertyValue ;
+    rdfs:label "Missing schema:name" ;
+    sp:arg1 schema:name ;
+    rdfs:isDefinedBy : .</pre>
+            <p>Submitting a Product without <code>schema:name</code> is then rejected with <samp>422 Unprocessable Entity</samp>, and the response body
+                describes the violation in RDF:</p>
+            <pre>[ a spin:ConstraintViolation ;
+    rdfs:label "Missing schema:name" ;
+    spin:violationRoot &lt;#this&gt; ;
+    spin:violationPath schema:name ] .</pre>
             <p>LinkedDataHub reuses <a href="http://spinrdf.org/spin.html#spin-constraints" target="_blank">SPIN constraints</a>. Classes inherit constraints from superclasses.</p>
-            <p><a href="https://www.w3.org/TR/shacl/" target="_blank">SHACL</a> constraint validation is supported as well.</p>
+            <p><a href="https://www.w3.org/TR/shacl/" target="_blank">SHACL</a> constraint validation is supported as well: SHACL shapes declared in the ontology
+                (or in any ontology of its imports closure) are validated with <a href="https://jena.apache.org/documentation/shacl/" target="_blank">Jena SHACL</a>
+                alongside the SPIN constraints, and a violation is likewise rejected with <samp>422 Unprocessable Entity</samp>.</p>
         </div>
     </div>
     <div>
         <h2 id="properties">Properties</h2>
-        <p>LinkedDataHub allows definition of new properties.</p>
+        <p>You can define new properties. Like classes, properties are declared in the dataspace's namespace ontology.
+            The expected values of a property on a class are described either with a SPIN <a href="#constraints">property constraint</a> (a mandatory-property check)
+            or with an OWL <a href="#restrictions">restriction</a>, both of which the creation and editing forms enforce.</p>
+        <div>
+            <h3 id="restrictions">Restrictions</h3>
+            <p>An <code>owl:Restriction</code> pins the cardinality of a property. The Northwind model, for example, declares its properties with
+                domains and ranges, and pins the sales-rep cardinality with a restriction — every order has exactly one:</p>
+            <pre>schema:broker a owl:ObjectProperty ;
+    rdfs:label "Sales rep";
+    rdfs:domain schema:Order ;
+    rdfs:range schema:Person ;
+    rdfs:isDefinedBy : .
+
+[] a owl:Restriction ;
+    owl:onProperty schema:broker ;
+    owl:minCardinality 1 ;
+    owl:maxCardinality 1 ;
+    rdfs:isDefinedBy : .</pre>
+            <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/admin/model/ns.ttl" target="_blank">admin/model/ns.ttl</a></p>
+        </div>
+    </div>
+    <div>
+        <h2 id="importing-vocabularies">Importing external vocabularies</h2>
+        <p>The <samp>Import ontology</samp> action loads an external vocabulary into a document of the admin dataspace and derives instance
+            <a href="#constructors">constructors</a> for its classes. The vocabulary stays in that document, under its own URI and with its own header, and the
+            derived constructors are appended beside it; the document names the vocabulary as its <code>foaf:primaryTopic</code> rather than claiming to be an ontology
+            itself. The dataspace's namespace ontology imports the vocabulary URI, which resolves to that document because it declares the vocabulary — so the
+            constructors are edited where the vocabulary is, and nothing has to be re-fetched from the network or a bundled copy.</p>
+        <img alt="The Import ontology form, with the vocabulary URI as Source and the target document as Graph" src="/uploads/3ec09a0069882615f5754801ebab899556655cba"></img>
+        <p>Importing the SKOS vocabulary, for example, leaves the target document with content of this shape (abridged):</p>
+        <pre>&lt;&gt; a dh:Item ;
+    foaf:primaryTopic &lt;http://www.w3.org/2004/02/skos/core&gt; .    # the document is about the vocabulary
+
+&lt;http://www.w3.org/2004/02/skos/core&gt; a owl:Ontology .          # the vocabulary's own header and terms follow
+
+skos:Concept spin:constructor [ a ldh:Constructor ;
+    sp:text \"\"\"
+        PREFIX skos: &lt;http://www.w3.org/2004/02/skos/core#&gt;
+        PREFIX xsd:  &lt;http://www.w3.org/2001/XMLSchema#&gt;
+
+        CONSTRUCT {
+            $this skos:prefLabel [ a xsd:string ] ;
+                skos:broader [ a skos:Concept ] .
+        }
+        WHERE {}\"\"\" ] .                                       # …one derived constructor per class</pre>
+    </div>
+    <div>
+        <h2 id="management">Management</h2>
+        <table>
+            <caption class="ac-vh">Ontology actions and their CLI commands</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Action</th>
+                    <th scope="col">CLI command</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row">Create ontology</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh admin create ontology</samp></a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Import external vocabulary</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh admin import ontology</samp></a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Add ontology import</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh admin add ontology-import</samp></a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Clear ontology from cache</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh admin clear ontology</samp></a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Create class</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh admin add class</samp></a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Add constructor</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh admin add constructor</samp></a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Add property constraint</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh admin add property-constraint</samp></a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Add restriction</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh admin add restriction</samp></a></td>
+                </tr>
+            </tbody>
+        </table>
     </div>
+    <p class="ldh-body-lg">To evolve your dataspace's model in practice, follow the <a href="../../../user-guide/change-model/">Change model</a> guide.</p>
 </div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/administration/packages-1.webp b/docs/reference/administration/packages-1.webp
new file mode 100644
index 00000000..f0c15b08
Binary files /dev/null and b/docs/reference/administration/packages-1.webp differ
diff --git a/docs/reference/administration/packages.ttl b/docs/reference/administration/packages.ttl
index b014acc4..71363520 100644
--- a/docs/reference/administration/packages.ttl
+++ b/docs/reference/administration/packages.ttl
@@ -1,84 +1,86 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Packages" ;
-    dct:description "Package management for LinkedDataHub applications" ;
+    dct:description "Reusable bundles of an ontology and a stylesheet that add support and custom rendering for an RDF vocabulary" ;
     rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-  <p class="lead">Packages are reusable bundles of ontologies and stylesheets that provide vocabulary support with custom rendering for specific RDF vocabularies.</p>
-  <div class="alert alert-info">
-    <p><strong>Version:</strong> Packages were introduced in LinkedDataHub 5.2.</p>
-  </div>
-  <div class="alert alert-info">
-    <p><strong>Note:</strong> Packages are <strong>declarative only</strong> (RDF + XSLT). They contain no Java code and integrate at installation-time, not runtime.</p>
-  </div>
-  <div>
-    <h2 id="what-are-packages">What are packages?</h2>
-    <p>A LinkedDataHub package is a reusable component that bundles together a vocabulary ontology and XSLT templates into a single installable unit. Packages enable:</p>
-    <ul>
-      <li>Rapid application setup with pre-configured domain vocabularies</li>
-      <li>Sharing and reusing common vocabulary definitions</li>
-      <li>Custom rendering for vocabulary-specific resources</li>
-      <li>Modular extension of dataspace functionality</li>
-    </ul>
-  </div>
-  <div>
-    <h2 id="package-structure">Package structure</h2>
-    <p>Each package consists of two files:</p>
-    <dl>
-      <dt><code>ns.ttl</code> — Package ontology</dt>
-      <dd>An RDF ontology file that imports the external vocabulary using <code>owl:imports</code> and attaches blocks to properties using <code>ldh:view</code> (forward relationships) or <code>ldh:inverseView</code> (inverse relationships). Blocks are typically <code>ldh:View</code> resources with SPARQL queries that render related data for property values.</dd>
-      <dt><code>layout.xsl</code> — XSLT stylesheet</dt>
-      <dd>XSLT transformation file with templates that override default rendering using system modes like <code>bs2:*</code> (Bootstrap 2.3.2 components) and <code>xhtml:*</code> (XHTML elements). See <a href="../../stylesheets/" target="_blank">Stylesheets reference</a> for details on XSLT customization.</dd>
-    </dl>
-    <p>Package files are organized in the LinkedDataHub-Apps repository:</p>
-    <pre>packages/
-├── package-name/
-│   ├── ns.ttl         # Ontology with views
-│   └── layout.xsl     # XSLT stylesheet</pre>
-    <p>Package metadata is published as Linked Data that resolves from the package URI (e.g., <code>https://packages.linkeddatahub.com/skos/#this</code>).</p>
-  </div>
-  <div>
-    <h2 id="package-metadata">Package metadata</h2>
-    <p>Package metadata is published as Linked Data that resolves from the package URI using standard LinkedDataHub properties:</p>
-    <dl>
-      <dt><code>lapp:Package</code></dt>
-      <dd>The RDF class for package descriptors</dd>
-      <dt><code>rdfs:label</code></dt>
-      <dd>Human-readable package name</dd>
-      <dt><code>dct:description</code></dt>
-      <dd>Package description and purpose</dd>
-      <dt><code>ldt:ontology</code></dt>
-      <dd>Points to the package ontology URI (from LDT vocabulary)</dd>
-      <dt><code>ac:stylesheet</code></dt>
-      <dd>Points to the package stylesheet URI (from AtomGraph Client vocabulary)</dd>
-    </dl>
-    <p>Example package metadata:</p>
-    <pre>@prefix lapp: &lt;https://w3id.org/atomgraph/linkeddatahub/apps#&gt; .
-@prefix ldt:  &lt;https://www.w3.org/ns/ldt#&gt; .
+    <p class="ldh-body-lg">Reusable bundles of an ontology and a stylesheet that add support and custom rendering for an RDF vocabulary</p>
+    <div class="ac-alert va-informative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">Packages were introduced in LinkedDataHub 5.2. Since 5.10 a dataspace installs one by declaring a single <code>ldh:import</code> triple in its settings, replacing the <code>packages/install</code> and <code>packages/uninstall</code> endpoints and the file system mutations they performed.</p>
+            <p class="ac-alert-text">Packages are declarative only (RDF + XSLT) — they contain no Java code. See <a href="#architecture">Architecture</a> for how they are composed into the dataspace.</p>
+        </div>
+    </div>
+    <div>
+        <h2 id="what-are-packages">Overview</h2>
+        <p>Packages enable:</p>
+        <ul>
+            <li>Rapid dataspace setup with pre-configured domain vocabularies</li>
+            <li>Sharing and reusing common vocabulary definitions</li>
+            <li>Custom rendering for vocabulary-specific resources</li>
+            <li>Modular extension of dataspace functionality</li>
+        </ul>
+    </div>
+    <div>
+        <h2 id="package-structure">Package structure</h2>
+        <p>Each package consists of two files:</p>
+        <dl>
+            <dt><samp>ns.ttl</samp> — Package ontology</dt>
+            <dd>An RDF ontology file that imports the external vocabulary using <code>owl:imports</code> and attaches views to properties using <code>ldh:view</code> (forward relationships) or <code>ldh:inverseView</code> (inverse relationships). Views are typically <code>ldh:View</code> resources with SPARQL queries that render related data for property values.</dd>
+            <dt>XSLT stylesheet — named by <code>ac:stylesheet</code></dt>
+            <dd>XSLT transformation file with templates that override default rendering using system modes like <code>ac:*</code>, <code>ldh:*</code> and <code>xhtml:*</code>. See the <a href="../../stylesheets/">Stylesheets reference</a> for details on XSLT customization.</dd>
+        </dl>
+        <p>Package files are organized in the LinkedDataHub-Apps repository, where the directory path is the package URI — a package under <samp>packages/a/b/</samp> is published at <samp>https://packages.linkeddatahub.com/a/b/</samp>, so a path carries as many segments as the grouping needs:</p>
+        <pre>packages/
+├── editor/
+│   └── taxonomy/
+│       ├── ns.ttl     # Ontology with views
+│       └── skos.xsl   # XSLT stylesheet</pre>
+        <p>The ontology is always <samp>ns.ttl</samp>; the stylesheet filename is not a convention, it is whatever the package's <code>ac:stylesheet</code> names. The taxonomy editor is named for what it does and its stylesheet for the vocabulary it speaks.</p>
+    </div>
+    <div>
+        <h2 id="package-metadata">Package metadata</h2>
+        <p>Package metadata is published as Linked Data that resolves from the package URI (e.g. <code>https://packages.linkeddatahub.com/editor/taxonomy/#this</code>).
+            A package descriptor is an instance of the <code>lds:Package</code> class with these properties:</p>
+        <dl>
+            <dt><code>rdfs:label</code></dt>
+            <dd>Human-readable package name</dd>
+            <dt><code>dct:description</code></dt>
+            <dd>Package description and purpose</dd>
+            <dt><code>lds:ontology</code></dt>
+            <dd>The package ontology URI (LDT vocabulary)</dd>
+            <dt><code>ac:stylesheet</code></dt>
+            <dd>The package stylesheet URI (AtomGraph Client vocabulary)</dd>
+        </dl>
+        <p>Example package metadata:</p>
+        <pre>@prefix lds: &lt;https://w3id.org/atomgraph/linkeddatahub/dataspaces#&gt; .
 @prefix ac:   &lt;https://w3id.org/atomgraph/client#&gt; .
+@prefix rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt; .
+@prefix dct:  &lt;http://purl.org/dc/terms/&gt; .
 
-&lt;https://packages.linkeddatahub.com/skos/#this&gt; a lapp:Package ;
-    rdfs:label "SKOS Package" ;
-    dct:description "SKOS vocabulary support with custom templates" ;
-    ldt:ontology &lt;https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/master/packages/skos/ns.ttl#&gt; ;
-    ac:stylesheet &lt;https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/master/packages/skos/layout.xsl&gt; .</pre>
-  </div>
-  <div>
-    <h2 id="package-ontology">Package ontology</h2>
-    <p>The package ontology file contains two layers:</p>
-    <h3 id="vocabulary-import">Vocabulary import</h3>
-    <p>Imports the external vocabulary using <code>owl:imports</code>. See <a href="../ontologies/" target="_blank">Ontologies reference</a> for ontology management details.</p>
-    <pre>&lt;https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/master/packages/skos/ns.ttl#&gt; a owl:Ontology ;
+&lt;https://packages.linkeddatahub.com/editor/taxonomy/#this&gt; a lds:Package ;
+    rdfs:label "Taxonomy Editor" ;
+    dct:description "Taxonomy editing on SKOS, with custom templates" ;
+    lds:ontology &lt;https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/master/packages/editor/taxonomy/ns.ttl#&gt; ;
+    ac:stylesheet &lt;https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/master/packages/editor/taxonomy/skos.xsl&gt; .</pre>
+    </div>
+    <div>
+        <h2 id="package-ontology">Package ontology</h2>
+        <p>The package ontology file contains two parts:</p>
+        <h3 id="vocabulary-import">Vocabulary import</h3>
+        <p>Imports the external vocabulary using <code>owl:imports</code>. See the <a href="../ontologies/">Ontologies reference</a> for ontology management details.</p>
+        <pre>&lt;https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/master/packages/editor/taxonomy/ns.ttl#&gt; a owl:Ontology ;
     owl:imports &lt;http://www.w3.org/2004/02/skos/core&gt; .</pre>
-    <h3 id="property-views">Property views</h3>
-    <p>SPARQL-based views attached to properties from the imported vocabulary:</p>
-    <pre>skos:narrower ldh:view ns:NarrowerConcepts .
+        <h3 id="property-views">Property views</h3>
+        <p>SPARQL-based views attached to properties from the imported vocabulary:</p>
+        <pre>skos:narrower ldh:view ns:NarrowerConcepts .
 
 ns:NarrowerConcepts a ldh:View ;
     dct:title "Narrower concepts" ;
@@ -88,94 +90,94 @@ ns:SelectNarrowerConcepts a sp:Select ;
     sp:text \"\"\"SELECT DISTINCT ?narrower
     WHERE { GRAPH ?graph { $about skos:narrower ?narrower } }
     ORDER BY ?narrower\"\"\" .</pre>
-    <p>Views are rendered when displaying resources that have the specified property. Use <code>ldh:view</code> for forward relationships (resource has property) or <code>ldh:inverseView</code> for inverse relationships (other resources point to this resource via property).</p>
-  </div>
-  <div>
-    <h2 id="package-stylesheet">Package stylesheet</h2>
-    <p>XSLT templates using system modes to override default rendering:</p>
-    <pre>&lt;!-- Hide properties from default property list --&gt;
-&lt;xsl:template match="skos:narrower | skos:broader" mode="bs2:PropertyList"/&gt;
+        <p>Views are rendered when displaying resources that have the specified property. Use <code>ldh:view</code> for forward relationships (the resource carries the property) or <code>ldh:inverseView</code> for inverse relationships (other resources point at this resource through the property).</p>
+    </div>
+    <div>
+        <h2 id="package-stylesheet">Package stylesheet</h2>
+        <p>XSLT templates in the platform's <em>open</em> modes, specialising the rendering of the package's own vocabulary:</p>
+        <pre>&lt;!-- The hierarchy predicates render as the concept tree, not as statement rows --&gt;
+&lt;xsl:template match="skos:narrower | skos:broader | skos:related | skos:member" mode="ac:PropertyEditor"/&gt;
 
-&lt;!-- Override XHTML head elements --&gt;
-&lt;xsl:template match="*" mode="xhtml:Style"&gt;
-    &lt;!-- Custom styles --&gt;
+&lt;!-- Fill the column beside the content body on a concept scheme's document --&gt;
+&lt;xsl:template match="rdf:RDF[...]" mode="ldh:ContentColumn"&gt;
+    &lt;xsl:param name="mode" as="xs:anyURI?"/&gt;
+    &lt;!-- the concept tree --&gt;
 &lt;/xsl:template&gt;</pre>
-    <p>Available system modes include:</p>
-    <ul>
-      <li><code>bs2:*</code> — Bootstrap 2.3.2 components (PropertyList, Form, etc.)</li>
-      <li><code>xhtml:*</code> — XHTML elements (Style, Script, etc.)</li>
-      <li>Additional modes documented in the <a href="../../stylesheets/" target="_blank">Stylesheets reference</a></li>
-    </ul>
-  </div>
-  <div>
-    <h2 id="installing-packages">Installing packages</h2>
-    <p>Installation requires Control access to the administration application. See the <a href="../../../user-guide/manage-packages/" target="_blank">step-by-step installation guide</a> for detailed instructions.</p>
-    <p>Installation will fail if these files do not exist.</p>
-    <h3 id="installation-process">Installation process</h3>
-    <p>When you install a package, the system performs the following steps:</p>
-    <ol>
-      <li><strong>Fetches package metadata</strong> from the package URI</li>
-      <li><strong>Hashes the package ontology URI</strong> using SHA-1 to create a unique document slug</li>
-      <li><strong>Downloads package ontology</strong> (<code>ns.ttl</code>) and PUTs it as a document to <code>${admin_base}ontologies/{hash}/</code> where <code>{hash}</code> is the SHA-1 hash of the ontology URI</li>
-      <li><strong>Adds owl:imports</strong> from the namespace ontology to the package ontology in the namespace graph (<code>${admin_base}ontologies/namespace/</code>)</li>
-      <li><strong>Clears and reloads</strong> the namespace ontology from cache to pick up the new imports</li>
-      <li><strong>Downloads package stylesheet</strong> (<code>layout.xsl</code>) and saves it to <code>/static/{package-path}/layout.xsl</code> where <code>{package-path}</code> is derived from the package URI (e.g., <code>com/linkeddatahub/packages/skos/</code> for <code>https://packages.linkeddatahub.com/skos/</code>)</li>
-      <li><strong>Updates master stylesheet</strong> at <code>/static/xsl/layout.xsl</code> by adding import:
-        <pre>&lt;xsl:import href="../com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/layout.xsl"/&gt;  &lt;!-- System --&gt;
-&lt;xsl:import href="../com/linkeddatahub/packages/skos/layout.xsl"/&gt;  &lt;!-- Package (added) --&gt;</pre>
-      </li>
-    </ol>
-    <div class="alert alert-warning">
-      <p><strong>Important:</strong> After installing or uninstalling a package, you must restart the Docker service for XSLT stylesheet changes to take effect:</p>
-      <pre>docker-compose restart linkeddatahub</pre>
-      <p>Do not use <code>--force-recreate</code> as that would overwrite the stylesheet file changes.</p>
+        <p>A package stylesheet is composed into the platform's import tree right after <samp>hooks.xsl</samp>, the module that declares the open modes and their generic fallbacks, and below everything else. Import precedence decides what a package can do: its rule for a node in an open mode outranks the fallback whatever the priorities, and it cannot contradict a sealed rule for the same node — a component mode, a typed rule, a global variable, named template or function — since that rule outranks the package. An open mode is a leaf: it renders or contributes for one node and carries no control flow. The open modes are:</p>
+        <ul>
+            <li><code>ldh:TreeNode</code> — one tree node; replace the default renderer, or decorate it with <code>xsl:next-match</code></li>
+            <li><code>ac:PropertyEditor</code> — one resource's property list, or one statement row; replace or decorate, and an empty rule hides</li>
+            <li><code>ldh:ContentColumn</code> — a slot beside the content body, empty unless a package fills it (the taxonomy editor's concept tree)</li>
+            <li><code>ldh:TreeChildrenLoad</code> and <code>ldh:RowHook</code> — client only: the children fetch for one tree node, and deferred work for one rendered row</li>
+            <li>The value leaves — <code>ac:FormControl</code>, <code>ac:PropertyListValue</code>, <code>ac:ValueAnnotations</code>, <code>ldh:TypeControl</code>, <code>ac:property-label</code>, <code>ac:object-label</code>, <code>ac:lang-tag</code>, <code>ac:ResultsTableHeaderCell</code>, <code>xhtml:Anchor</code> and the unnamed mode's property row and value link. A rule for the package's own property or datatype replaces the generic one, or decorates it</li>
+        </ul>
+        <p>The modes are documented in the <a href="../../stylesheets/">Stylesheets reference</a>. The package stylesheet reaches the browser as well: the platform composes each dataspace's client stylesheet with its package stylesheets and has the <a href="../../configuration/#sef-compiler"><samp>sef-compiler</samp></a> compile the result, so a package's rendering is the same on a direct page load and on client-side navigation.</p>
     </div>
-  </div>
-  <div>
-    <h2 id="uninstalling-packages">Uninstalling packages</h2>
-    <p>Packages can be safely uninstalled, which removes:</p>
-    <ul>
-      <li>Package ontology imports from the application</li>
-      <li>Package-specific data and resources</li>
-      <li>Associated queries and stylesheets</li>
-    </ul>
-    <div class="alert alert-info">
-      <p><strong>Note:</strong> Uninstalling a package does not remove user-created data that uses the package's vocabulary.</p>
+    <div>
+        <h2 id="installing-packages">Installing packages</h2>
+        <p>A dataspace imports a package with a single triple in its settings:</p>
+        <pre>&lt;urn:linkeddatahub:apps/end-user&gt; ldh:import &lt;https://packages.linkeddatahub.com/editor/taxonomy/#this&gt; .</pre>
+        <p>That declaration is the installation. Packages are installed into the <strong>end-user dataspace</strong> of a dataspace, and writing the triple requires write access to its <samp>settings</samp> document. See the <a href="../../../user-guide/manage-packages/">step-by-step installation guide</a> for the user interface and command line instructions.</p>
+        <h3 id="what-the-declaration-does">What the declaration does</h3>
+        <p>From the next request onwards, the server resolves the declaration:</p>
+        <ol>
+            <li><strong>Resolves the package description</strong> from the package URI. Bundled descriptions and cached graphs are read from the graph repository; other URIs are dereferenced over HTTP.</li>
+            <li><strong>Materializes the package ontology</strong> (<code>lds:ontology</code>) as a document under the admin dataspace's <samp>ontologies/</samp> container, named after the package path — <samp>ontologies/editor-taxonomy/</samp> for the taxonomy editor. The ontology is copied verbatim and the document names it as its <code>foaf:primaryTopic</code>; the copy is taken once, and the document is skipped on later requests.</li>
+            <li><strong>Adds the package ontology</strong> to the dataspace's ontology imports closure — it is declared as an <code>owl:imports</code> of the namespace ontology and resolves to the materialized document. The package's classes, constructors, constraints and views become available on the <samp>ns</samp> endpoint and in the UI, and are edited in that document like the namespace ontology's own.</li>
+            <li><strong>Copies the package stylesheet</strong> (<code>ac:stylesheet</code>) once under the platform's package root and serves it from the dataspace's own origin under <samp>/static/com/linkeddatahub/packages/</samp>, so what the instance compiles cannot change under it.</li>
+            <li><strong>Composes that copy</strong> into the dataspace stylesheet with an <code>xsl:import</code> right after <samp>hooks.xsl</samp>, so package templates outrank the open modes' fallbacks and nothing else; the client-side stylesheet is composed the same way and compiled by the <samp>sef-compiler</samp>.</li>
+        </ol>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">Both copies are taken at import and kept: a change to the published package reaches a dataspace that already imported it only after the materialized ontology document is deleted (the next request materializes it again) and the ontology cache is cleared.</p>
+            </div>
+        </div>
+        <p>Packages are applied in the order of their URIs. A package that declares only an ontology, or only a stylesheet, contributes only that, and one whose description cannot be resolved is skipped. If the composed stylesheet fails to compile — an unreachable package stylesheet URL, for instance — the dataspace falls back to its own stylesheet.</p>
+        <p>On the Northwind Traders dataspace the taxonomy editor package pays off immediately: the product categories that the
+            <a href="../../imports/rdf/">UNESCO mapping import</a> doubled as <code>skos:Concept</code>s pick up the package's concept rendering and views,
+            and their mapping relations link into the UNESCO Thesaurus dataspace.</p>
+        <img alt="A Northwind category page with the taxonomy editor package installed, concept rendering and UNESCO mappings visible" src="/uploads/c4008b5f82a762aea0f0e4dbde03ab0428fee726"></img>
     </div>
-  </div>
-  <div>
-    <h2 id="architecture">Architecture</h2>
-    <h3 id="installation-time-composition">Installation-time vs runtime</h3>
-    <p>Packages use <strong>installation-time composition</strong>, NOT runtime composition:</p>
-    <ul>
-      <li>✅ Package content is integrated during installation (via JAX-RS endpoints)</li>
-      <li>✅ Ontology and XSLT are pre-composed before being loaded</li>
-      <li>✅ No runtime overhead</li>
-      <li>❌ No dynamic package loading at request time</li>
-    </ul>
-    <h3 id="http-endpoints">HTTP endpoints</h3>
-    <p>Package installation and uninstallation is performed via <a href="../../http-api/#system-endpoints" target="_blank">system endpoints</a> on the admin application. See <code>packages/install</code> and <code>packages/uninstall</code> in the HTTP API reference.</p>
-    <h3 id="file-system-structure">File system structure</h3>
-    <p>After installing the SKOS package:</p>
-    <pre>webapp/
-├── static/
-│   ├── com/
-│   │   └── linkeddatahub/
-│   │       └── packages/
-│   │           └── skos/
-│   │               └── layout.xsl          # Package stylesheet
-│   └── xsl/
-│       ├── layout.xsl                      # End-user master stylesheet
-│       └── admin/
-│           └── layout.xsl                  # Admin master stylesheet</pre>
-  </div>
-  <div>
-    <h2 id="creating-packages">Creating custom packages</h2>
-    <p>Developers can create custom packages for their own domain vocabularies. The process involves:</p>
-    <h3 id="write-ontology">Write package ontology</h3>
-    <p>Create <code>ns.ttl</code> with vocabulary import and views:</p>
-    <pre>&lt;https://raw.githubusercontent.com/you/repo/master/packages/schema.org/ns.ttl#&gt; a owl:Ontology ;
-    owl:imports &lt;http://schema.org/&gt; .
+    <div>
+        <h2 id="uninstalling-packages">Uninstalling packages</h2>
+        <p>Removing the <code>ldh:import</code> triple uninstalls the package: from the next request onwards its ontology is out of the imports closure and its stylesheet is no longer composed in.</p>
+        <pre>DELETE
+{
+    &lt;urn:linkeddatahub:apps/end-user&gt; ldh:import &lt;https://packages.linkeddatahub.com/editor/taxonomy/#this&gt; .
+}
+WHERE {}</pre>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">Uninstalling a package does not remove user-created data that uses the package's vocabulary. That data stays in the dataspace but may not display or function correctly without the package.</p>
+                <p class="ac-alert-text">Nor does it remove the materialized ontology document under <samp>ontologies/</samp>, so edits made to it survive an uninstall and a later re-import picks the document up as it is.</p>
+            </div>
+        </div>
+    </div>
+    <div>
+        <h2 id="architecture">Architecture</h2>
+        <h3 id="runtime-composition">Runtime composition</h3>
+        <p>Packages are composed at <strong>request time</strong> out of the declaration, not integrated into the dataspace ahead of it:</p>
+        <ul>
+            <li>The dataspace settings hold one <code>ldh:import</code> triple per package and nothing else</li>
+            <li>The ontology closure and the stylesheet imports are assembled from the resolved package descriptions</li>
+            <li>Installing and uninstalling take effect on the next request — no restart, and nothing is written into the webapp: the ontology copy is a document in the admin store and the stylesheet copy lives under the package root outside the war</li>
+        </ul>
+        <div class="ac-alert va-warning" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">warning</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">Packages installed before 5.10 were applied by copying files into the webapp; those installations do not carry over. Re-declare them with <code>ldh:import</code>.</p>
+            </div>
+        </div>
+    </div>
+    <div>
+        <h2 id="creating-packages">Creating custom packages</h2>
+        <p>Developers can create custom packages for their own domain vocabularies. The process has four steps.</p>
+        <h3 id="write-ontology">Write package ontology</h3>
+        <p>Create <samp>ns.ttl</samp> with vocabulary import and views:</p>
+        <pre>&lt;https://raw.githubusercontent.com/you/repo/master/packages/schema.org/ns.ttl#&gt; a owl:Ontology ;
+    owl:imports &lt;https://schema.org/&gt; .
 
 # Attach view to a property
 schema:knows ldh:view :PersonKnows .
@@ -190,27 +192,42 @@ schema:knows ldh:view :PersonKnows .
     WHERE { GRAPH ?graph { $about schema:knows ?person } }
     ORDER BY ?person
     \"\"\" .</pre>
-    <h3 id="write-stylesheet">Write XSLT stylesheet</h3>
-    <p>Create <code>layout.xsl</code> with XSLT templates using system modes like <code>bs2:*</code> and <code>xhtml:*</code>. See the <a href="../../stylesheets/" target="_blank">Stylesheets reference</a> for template customization patterns.</p>
-    <pre>&lt;xsl:template match="schema:knows" mode="bs2:PropertyList"/&gt;</pre>
-    <h3 id="publish-metadata">Publish package metadata</h3>
-    <p>Publish package metadata as Linked Data at your package URI:</p>
-    <pre>&lt;https://packages.linkeddatahub.com/schema.org/#this&gt; a lapp:Package ;
+        <h3 id="write-stylesheet">Write XSLT stylesheet</h3>
+        <p>Create the stylesheet — name the file for the vocabulary it covers — with XSLT templates using system modes like <code>ac:*</code>, <code>ldh:*</code> and <code>xhtml:*</code>. See the <a href="../../stylesheets/">Stylesheets reference</a> for template customization patterns.</p>
+        <pre>&lt;xsl:template match="schema:knows" mode="ac:PropertyEditor"/&gt;</pre>
+        <h3 id="publish-metadata">Publish package metadata</h3>
+        <p>Publish package metadata as Linked Data at your package URI:</p>
+        <pre>&lt;https://packages.linkeddatahub.com/schema.org/#this&gt; a lds:Package ;
     rdfs:label "Schema.org Package" ;
     dct:description "Schema.org vocabulary support" ;
-    ldt:ontology &lt;https://raw.githubusercontent.com/you/repo/master/packages/schema.org/ns.ttl#&gt; ;
-    ac:stylesheet &lt;https://raw.githubusercontent.com/you/repo/master/packages/schema.org/layout.xsl&gt; .</pre>
-    <p>Ensure the metadata contains <code>ldt:ontology</code> and <code>ac:stylesheet</code> properties pointing to the package resources.</p>
-    <h3 id="test-installation">Test installation</h3>
-    <p>Use the CLI to test your package installation:</p>
-    <pre>install-package.sh \\
-  -b "https://localhost:4443/" \\
-  -f ssl/owner/cert.pem \\
-  -p "$cert_password" \\
-  --package "https://packages.linkeddatahub.com/schema.org/#this"</pre>
-  </div>
-  <div>
-    <h2 id="available-packages">Available packages</h2>
-    <p>A curated list of available packages can be found in the <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/packages" target="_blank">LinkedDataHub-Apps repository</a>. Each package directory contains the package ontology (<code>ns.ttl</code>) and stylesheet (<code>layout.xsl</code>) files.</p>
-  </div>
+    lds:ontology &lt;https://raw.githubusercontent.com/you/repo/master/packages/schema.org/ns.ttl#&gt; ;
+    ac:stylesheet &lt;https://raw.githubusercontent.com/you/repo/master/packages/schema.org/schema.xsl&gt; .</pre>
+        <p>Ensure the metadata contains <code>lds:ontology</code> and <code>ac:stylesheet</code> properties pointing to the package resources.</p>
+        <h3 id="test-installation">Test installation</h3>
+        <p>Declare the <code>ldh:import</code> triple in a test dataspace's <samp>settings</samp> document — see <a href="#management">Management</a> for the command.</p>
+    </div>
+    <div>
+        <h2 id="available-packages">Available packages</h2>
+        <p>Published packages resolve from <a href="https://packages.linkeddatahub.com/" target="_blank">packages.linkeddatahub.com</a>; their sources live in the
+            <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/packages" target="_blank">LinkedDataHub-Apps repository</a>, where each package directory
+            contains the package ontology (<samp>ns.ttl</samp>) and the stylesheet its <code>ac:stylesheet</code> names.</p>
+        <dl>
+            <dt>Taxonomy Editor</dt>
+            <dd>Taxonomy editing on SKOS: a concept tree beside the content, hierarchy views in both assertion directions, and constructors and constraints for concepts, schemes and collections. Package URI: <code>https://packages.linkeddatahub.com/editor/taxonomy/#this</code></dd>
+        </dl>
+    </div>
+    <div>
+        <h2 id="management">Management</h2>
+        <p>The <samp>packages</samp> group reads the registry and writes the <code>ldh:import</code> triple:</p>
+        <pre>ldh packages list
+ldh packages add --package https://packages.linkeddatahub.com/editor/taxonomy/#this
+ldh packages remove --package https://packages.linkeddatahub.com/editor/taxonomy/#this</pre>
+        <p><samp>packages list</samp> prints one tab-separated line per package — state, URI, title — so the listing greps and cuts. The registry
+            defaults to <samp>https://packages.linkeddatahub.com/</samp> and <samp>--registry</samp> overrides it; it is read through the
+            dataspace's Linked Data proxy rather than fetched directly, so <samp>list</samp> needs <samp>--base</samp> as much as the other two do.</p>
+        <p>All three go through <code>PATCH</code> on the <samp>settings</samp> document, which is the live path: the change takes effect on the
+            next request with no restart, but lives in the running dataspace's context dataset. Declaring the same <code>ldh:import</code> triple
+            in <samp>config/dataspaces.trig</samp> is the permanent one, applied on restart. <samp>packages remove</samp> is idempotent.</p>
+    </div>
+    <p class="ldh-body-lg">To install and manage packages step by step, follow the <a href="../../../user-guide/manage-packages/">Manage packages</a> guide.</p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/reference/command-line-interface.ttl b/docs/reference/command-line-interface.ttl
index def280cc..46adad34 100644
--- a/docs/reference/command-line-interface.ttl
+++ b/docs/reference/command-line-interface.ttl
@@ -1,283 +1,437 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Command line interface" ;
-    dct:description "CLI scripts can be used perform all actions available in the UI" ;
+    dct:description "The ldh CLI drives the same HTTP API as the UI and covers most UI actions" ;
     rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">CLI scripts can be used perform all actions available in the UI</p>
-    <p>LinkedDataHub CLI wraps the <a href="../http-api/">HTTP API</a> into a set of shell scripts with convenient parameters. The scripts should run on any Unix-based system.
-        They can be used for testing, automation, scheduled execution and such. It is usually much quicker to perform actions using CLI rather than the
-        <a href="../user-interface/">user interface</a>, as well as easier to reproduce.</p>
-    <p>Some scripts correspond to a single request to LinkedDataHub, others combine others into tasks with multiple interdependent requests, such as the CSV import.</p>
-    <p>You will need to supply a <samp>.pem</samp> file of your <a href="../../get-started/#get-webid">WebID certificate</a> as well as its password as script arguments, among others.</p>
-    <div class="alert alert-info">
-        <p>The CLI scripts live in the <samp>bin</samp> folder and need to be added to the <code>$PATH</code> environmental variable. For example:</p>
-        <pre>export PATH="$(find bin -type d -exec realpath {} \\; | tr '\n' ':')$PATH"</pre>
-        <p>They also use the <a href="https://jena.apache.org/documentation/tools/" target="_blank">Jena's CLI commands</a> internally, so make sure to have them on <code>$PATH</code> before running the scripts.</p>
+    <p class="ldh-body-lg">The <samp>ldh</samp> CLI drives the same HTTP API as the UI and covers most UI actions</p>
+    <p>The LinkedDataHub CLI wraps the <a href="../http-api/">HTTP API</a> into a single executable with convenient parameters.
+        It can be used for testing, automation, scheduled execution and similar tasks. Performing actions with the CLI is usually quicker than using the
+        <a href="../user-interface/">user interface</a>, and easier to reproduce.</p>
+    <p>Some commands correspond to a single request to LinkedDataHub, others combine several into tasks with multiple interdependent requests, such as the CSV import.</p>
+    <p>You will need your <a href="../../get-started/get-an-account/">WebID certificate</a> — either the <samp>.p12</samp> keystore or a PEM file holding it with its private key — as well as its password, among other arguments.</p>
+    <div>
+        <h2 id="install">Install</h2>
+        <p>Every LinkedDataHub release attaches an <samp>ldh-&lt;version&gt;.tar.gz</samp> archive holding the launcher and the jar. It needs a Java 21 runtime and nothing else:</p>
+        <pre>tar -xzf ldh-&lt;version&gt;.tar.gz
+export PATH="$PWD/ldh-&lt;version&gt;:$PATH"
+
+ldh --help</pre>
+        <p>To build from source instead, run <samp>make cli</samp> from the root of the LinkedDataHub repository, which prints the <code>export</code> line to run afterwards. It requires Java 21 and Maven and is the equivalent of:</p>
+        <pre>cd cli
+mvn package
+export PATH="$PWD/bin:$PATH"
+cd ..
+
+ldh --help</pre>
+        <p>Either way, the self-contained <samp>ldh.jar</samp> is what the <samp>ldh</samp> launcher runs, and <samp>ldh --version</samp> reports the version it was built at. The CLI carries the same version as the platform.</p>
+        <p>If you use the CLI regularly, add the <code>export</code> line to your shell profile. Shell completion for bash and zsh is generated by the CLI itself:</p>
+        <pre>source &lt;(ldh generate-completion)</pre>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">The CLI talks to the HTTP API directly and embeds <a href="https://jena.apache.org/" target="_blank">Apache Jena</a>. Unlike the shell scripts it replaces, it needs no <samp>curl</samp>, <samp>python</samp> or Jena command line tools on <code>$PATH</code>.</p>
+            </div>
+        </div>
+        <div class="ac-alert va-warning" id="deprecated-scripts" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">warning</span></span>
+            <div class="ac-alert-body">
+                <span class="ac-alert-title">Deprecated shell scripts</span>
+                <p class="ac-alert-text">The HTTP API shell scripts in the <samp>bin</samp> folder that <samp>ldh</samp> replaces are <strong>deprecated</strong>. The certificate and WebID tooling (<samp>webid-keygen.sh</samp>, <samp>webid-keygen-pem.sh</samp>, <samp>webid-uri.sh</samp>, <samp>webid-modulus.sh</samp>, <samp>server-cert-gen.sh</samp>) talks to no API and is not deprecated.</p>
+                <p class="ac-alert-text">Migrating from a script to its command means dropping the <samp>.sh</samp> suffix, prefixing the invocation with <samp>ldh</samp> (the hyphenated name becomes a verb-object pair, e.g. <samp>admin/acl/create-group.sh</samp> becomes <samp>ldh admin create group</samp>), and passing the <samp>.p12</samp> keystore to <code>-f</code> instead of the <samp>.pem</samp> certificate.</p>
+            </div>
+        </div>
+    </div>
+    <div>
+        <h2 id="authentication">Authentication</h2>
+        <p>Commands authenticate with a WebID client certificate, read either from a PKCS12 keystore — the format produced by <samp>bin/webid-keygen.sh</samp> and shipped as <samp>ssl/owner/keystore.p12</samp> for the owner agent — or from a PEM file holding the certificate together with its private key, such as <samp>ssl/owner/cert.pem</samp>. The format is recognised from the file's content, not from its extension:</p>
+        <pre>ldh get \\
+  -c ./ssl/owner/keystore.p12 \\
+  -p "$owner_cert_password" \\
+  --accept text/turtle \\
+  "https://localhost:4443/"</pre>
+        <p>which, on the Northwind Traders dataspace, prints the root document's description:</p>
+        <pre>@prefix def:  &lt;https://w3id.org/atomgraph/linkeddatahub/default#&gt; .
+@prefix dct:  &lt;http://purl.org/dc/terms/&gt; .
+@prefix rdf:  &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; .
+
+&lt;https://localhost:4443/&gt; a def:Root ;
+    dct:title "Northwind Traders" ;
+    dct:description "Knowledge Graph representation of the Northwind Traders sample database" ;
+    rdf:_1 &lt;https://localhost:4443/#overview-intro&gt; ;
+    # …
+    .</pre>
+        <div class="ac-alert va-warning" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">warning</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">The CLI does not validate TLS server certificates, so self-signed development instances work out of the box. Do not point it at untrusted hosts.</p>
+            </div>
+        </div>
     </div>
     <div>
         <h2 id="parameters">Parameters</h2>
-        <p>Common parameters used by most scripts include:</p>
-        <dl>
-            <dt>-f</dt>
-            <dt>--cert-pem-file</dt>
-            <dd><samp>.pem</samp> file with the WebID certificate of the agent</dd>
-            <dt>-p</dt>
-            <dt>--cert-password</dt>
-            <dd>Password of the WebID certificate</dd>
-            <dt>-b</dt>
-            <dt>--base</dt>
-            <dd>Base URI of the application</dd>
-            <dt>--proxy</dt>
-            <dd>The host this request will be proxied through (optional)</dd>
-            <dd>It can be used with port 5443 for which the client certificate authentication is always enabled, for example <samp>--proxy https://localhost:5443/</samp></dd>
-        </dl>
-        <p>Other parameters are script-specific.</p>
+        <p>Parameters shared by most commands:</p>
+        <table>
+            <caption class="ac-vh">Parameters every command accepts</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Parameter</th>
+                    <th scope="col">Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row"><samp>-c</samp>, <samp>--cert</samp></th>
+                    <td>PKCS12 keystore, or PEM file with the certificate and its private key, holding the WebID certificate of the agent</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>-p</samp>, <samp>--cert-password</samp></th>
+                    <td>Password of the keystore, or passphrase of an encrypted PEM key. Not needed when the PEM key is unencrypted</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>-b</samp>, <samp>--base</samp></th>
+                    <td>Base URI of the dataspace</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>--proxy</samp></th>
+                    <td>The host the request is proxied through (optional). Use it with port 5443, on which client certificate authentication is always enabled — for example <samp>--proxy https://localhost:5443/</samp>.</td>
+                </tr>
+            </tbody>
+        </table>
+        <p>Other parameters are command-specific. Most commands take the URI of the document they act on as a default (positional) parameter.</p>
+        <h3 id="environment-variables">Environment variables</h3>
+        <p>The repeated parameters can be set once in the environment instead of being passed to every command:</p>
+        <table>
+            <caption class="ac-vh">Environment variables and the parameters they supply</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Variable</th>
+                    <th scope="col">Parameter</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><samp>LDH_CERT_FILE</samp></td>
+                    <td><code>-c</code>, <code>--cert</code></td>
+                </tr>
+                <tr>
+                    <td><samp>LDH_CERT_PASSWORD</samp></td>
+                    <td><code>-p</code>, <code>--cert-password</code></td>
+                </tr>
+                <tr>
+                    <td><samp>LDH_BASE</samp></td>
+                    <td><code>-b</code>, <code>--base</code></td>
+                </tr>
+                <tr>
+                    <td><samp>LDH_PROXY</samp></td>
+                    <td><code>--proxy</code></td>
+                </tr>
+            </tbody>
+        </table>
+        <pre>export LDH_CERT_FILE=./ssl/owner/keystore.p12
+export LDH_CERT_PASSWORD="$owner_cert_password"
+export LDH_BASE=https://localhost:4443/
+
+ldh create container --parent "$LDH_BASE" --title "Categories" --slug categories</pre>
+    </div>
+    <div>
+        <h2 id="output">Output</h2>
+        <p>Commands that create or append to a document print its URL as the only line on standard output, so they compose in shell pipelines. All diagnostics go to standard error.</p>
+        <pre>item=$(ldh create item --container "$LDH_BASE" --title "Example" --slug example)</pre>
+        <p><samp>ldh push</samp> writes many documents in one run and prints one line per written document URL or upload URI, in write order; progress and skipped entries go to standard error, and the first failed request stops the run.</p>
+        <p>Exit codes are <samp>0</samp> on success, <samp>1</samp> on an HTTP error status or runtime failure (the message goes to standard error; add <code>--verbose</code> for a stack trace), and <samp>2</samp> on a usage error.</p>
     </div>
     <div>
         <h2 id="usage">Usage</h2>
-        <p>A usage message with parameters of a script is printed when the scripted is run without any arguments. There can be named parameters and default parameters, both of those can be optional. For example:</p>
-        <pre>$ add-select.sh
-Creates a SPARQL SELECT query.
-
-Usage:  add-select.sh options
-
-Options:
-  -f, --cert-pem-file CERT_FILE        .pem file with the WebID certificate of the agent
-  -p, --cert-password CERT_PASSWORD    Password of the WebID certificate
-  -b, --base BASE_URI                  Base URI of the application
-  --proxy PROXY_URL                    The host this request will be proxied through (optional)
-
-  --title TITLE                        Title of the chart
-  --description DESCRIPTION            Description of the chart (optional)
-  --uri URI                            URI of the query (optional)
-
-  --query-file ABS_PATH                Absolute path to the text file with the SPARQL query string
-  --service SERVICE_URI                URI of the SPARQL service specific to this query (optional)</pre>
-        <p>The optional parameters are marked with <samp>(Optional)</samp>. In this case there is no default argument, but some scripts require document (named graph) URI as the default parameter, e.g. ontology document URL.</p>
-        <p>This is how an <samp>add-select.sh</samp> invocation would look like:</p>
-        <pre>add-select.sh \\
-  -b "$base" \\
-  -f ./ssl/owner/cert.pem \\
-  -p "$owner_cert_password" \\
-  --proxy "$proxy" \\
-  --title "Select concepts" \\
-  --query-file "$pwd/queries/select-concepts.rq"</pre>
+        <p>A usage message with the parameters of a command is printed when the command is run without required arguments, or with <code>--help</code>. Commands take named parameters and default (positional) parameters; either kind can be optional. For example:</p>
+        <pre>$ ldh add select
+Missing required options and parameters: '--title=TITLE', '--query-file=ABS_PATH', 'TARGET_URI'
+Usage: ldh add select [-h] [--verbose] [-b=BASE_URI] [-c=CERT_FILE]
+                      [--description=DESCRIPTION] [-p=PASSWORD]
+                      [--proxy=PROXY_URL] --query-file=ABS_PATH
+                      [--service=SERVICE_URI] --title=TITLE [--uri=URI]
+                      TARGET_URI
+Adds a SELECT query to a document.
+      TARGET_URI          URI of the document
+  -b, --base=BASE_URI     Base URI of the application (env: LDH_BASE)
+  -c, --cert=CERT_FILE    PKCS12 keystore or PEM with the WebID certificate and
+                            private key of the agent (env: LDH_CERT_FILE)
+      --description=DESCRIPTION
+                          Description of the query (optional)
+  -h, --help              Show this help message and exit.
+  -p, --cert-password=PASSWORD
+                          Password of the keystore, or passphrase of an
+                            encrypted PEM key (env: LDH_CERT_PASSWORD)
+      --proxy=PROXY_URL   The host this request will be proxied through
+                            (optional) (env: LDH_PROXY)
+      --query-file=ABS_PATH
+                          Path to the file with the query string
+      --service=SERVICE_URI
+                          URI of the SPARQL service (optional)
+      --title=TITLE       Title of the query
+      --uri=URI           URI of the query (optional, blank node if not set)
+      --verbose           Print stack traces of errors</pre>
+        <p>The optional parameters are marked with <samp>(optional)</samp>. In this case the default parameter is the URI of the document the query is appended to.</p>
+        <p>An <samp>add select</samp> invocation looks like this (with the <a href="#environment-variables">environment variables</a> supplying the connection parameters):</p>
+        <pre>ldh add select \\
+  --title "Products by sales" \\
+  --query-file products-by-sales.rq \\
+  "${LDH_BASE}products/"</pre>
     </div>
     <div>
-        <h2 id="scripts">Scripts</h2>
-        <p>Currently supported:</p>
-        <table class="table table-striped">
+        <h2 id="commands">Commands</h2>
+        <p>Commands group by verb — <samp>create</samp>, <samp>add</samp> and <samp>remove</samp> make the single request they name, while <samp>import</samp> holds the composite workflows — plus the <samp>packages</samp> family and the <samp>admin</samp> scope. The following commands are currently supported:</p>
+        <table>
+            <caption class="ac-vh">Commands grouped by purpose</caption>
             <thead>
                 <tr>
-                    <th>Purpose</th>
-                    <th>Script</th>
+                    <th scope="col">Purpose</th>
+                    <th scope="col">Command</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <th colspan="2">Low-level (Graph Store Protocol)</th>
+                    <th colspan="2" scope="rowgroup">Low-level (Graph Store Protocol)</th>
                 </tr>
                 <tr>
-                    <td><samp>GET</samp> request</td>
-                    <td><samp>get.sh</samp></td>
+                    <td><code>GET</code> request</td>
+                    <td><samp>ldh get</samp></td>
                 </tr>
                 <tr>
-                    <td><samp>POST</samp> request</td>
-                    <td><samp>post.sh</samp></td>
+                    <td><code>POST</code> request</td>
+                    <td><samp>ldh post</samp></td>
                 </tr>
                 <tr>
-                    <td><samp>PUT</samp> request</td>
-                    <td><samp>put.sh</samp></td>
+                    <td><code>PUT</code> request</td>
+                    <td><samp>ldh put</samp></td>
                 </tr>
                 <tr>
-                    <td><samp>PATCH</samp> request</td>
-                    <td><samp>patch.sh</samp></td>
+                    <td><code>PATCH</code> request</td>
+                    <td><samp>ldh patch</samp></td>
                 </tr>
                 <tr>
-                    <td><samp>DELETE</samp> request</td>
-                    <td><samp>delete.sh</samp></td>
+                    <td><code>DELETE</code> request</td>
+                    <td><samp>ldh delete</samp></td>
                 </tr>
             </tbody>
             <tbody>
                 <tr>
-                    <th colspan="2">Documents</th>
+                    <th colspan="2" scope="rowgroup">Documents</th>
                 </tr>
                 <tr>
                     <td>Create container document</td>
-                    <td><samp>create-container.sh</samp></td>
+                    <td><samp>ldh create container</samp></td>
                 </tr>
                 <tr>
                     <td>Create item document</td>
-                    <td><samp>create-item.sh</samp></td>
+                    <td><samp>ldh create item</samp></td>
+                </tr>
+                <tr>
+                    <td>Push a directory of RDF files and uploads into the document tree it maps to</td>
+                    <td><samp>ldh push</samp></td>
                 </tr>
             </tbody>
-
             <tbody>
                 <tr>
-                    <th colspan="2">Content</th>
+                    <th colspan="2" scope="rowgroup">Content</th>
                 </tr>
                 <tr>
-                    <td>Append object block (instance of <samp>ldh:Object</samp>) to document</td>
-                    <td><samp>content/add-object-block.sh</samp></td>
+                    <td>Append object block (instance of <code>ldh:Object</code>) to document</td>
+                    <td><samp>ldh add object-block</samp></td>
                 </tr>
                 <tr>
-                    <td>Append XHTML block (instance of <samp>ldh:XHTML</samp>) to document</td>
-                    <td><samp>content/add-xhtml-block.sh</samp></td>
+                    <td>Append XHTML block (instance of <code>ldh:XHTML</code>) to document</td>
+                    <td><samp>ldh add xhtml-block</samp></td>
                 </tr>
                 <tr>
                     <td>Remove block from document</td>
-                    <td><samp>content/remove-block.sh</samp></td>
+                    <td><samp>ldh remove block</samp></td>
                 </tr>
             </tbody>
-
             <tbody>
                 <tr>
-                    <th colspan="2">Instances of system classes</th>
+                    <th colspan="2" scope="rowgroup">Instances of system classes</th>
                 </tr>
                 <tr>
-                    <td>Append service (instance of <samp>ldh:GenericService</samp>) to document</td>
-                    <td><samp>add-generic-service.sh</samp></td>
+                    <td>Append uploaded file (instance of <code>nfo:FileDataObject</code>) to document</td>
+                    <td><samp>ldh add file</samp></td>
                 </tr>
                 <tr>
-                    <td>Append result set chart (instance of <samp>ldh:ResultSetChart</samp>) to document</td>
-                    <td><samp>add-result-set-chart.sh</samp></td>
+                    <td>Append <code>CONSTRUCT</code> query (instance of <code>sp:Construct</code>) to document</td>
+                    <td><samp>ldh add construct</samp></td>
                 </tr>
                 <tr>
-                    <td>Append <code>SELECT</code> query (instance of <samp>sp:Select</samp>) to document</td>
-                    <td><samp>add-select.sh</samp></td>
+                    <td>Append service (instance of <code>sd:Service</code>) to document</td>
+                    <td><samp>ldh add generic-service</samp></td>
                 </tr>
                 <tr>
-                    <td>Append SPARQL view (instance of <samp>ldh:View</samp>) to document</td>
-                    <td><samp>add-view.sh</samp></td>
+                    <td>Append result set chart (instance of <code>ldh:ResultSetChart</code>) to document</td>
+                    <td><samp>ldh add result-set-chart</samp></td>
                 </tr>
-            </tbody>
-            <tbody>
                 <tr>
-                    <th colspan="2"><a href="../imports/">Imports</a></th>
+                    <td>Append <code>SELECT</code> query (instance of <code>sp:Select</code>) to document</td>
+                    <td><samp>ldh add select</samp></td>
                 </tr>
                 <tr>
-                    <td>Create file</td>
-                    <td><samp>add-file.sh</samp></td>
+                    <td>Append SPARQL view (instance of <code>ldh:View</code>) to document</td>
+                    <td><samp>ldh add view</samp></td>
                 </tr>
+            </tbody>
+            <tbody>
                 <tr>
-                    <td>Create CONSTRUCT query</td>
-                    <td><samp>add-construct.sh</samp></td>
+                    <th colspan="2" scope="rowgroup"><a href="../imports/">Imports</a></th>
                 </tr>
                 <tr>
                     <td>Create CSV import</td>
-                    <td><samp>imports/add-csv-import.sh</samp></td>
+                    <td><samp>ldh add csv-import</samp></td>
                 </tr>
                 <tr>
                     <td>Import CSV data</td>
-                    <td><samp>imports/import-csv.sh</samp></td>
+                    <td><samp>ldh import csv</samp></td>
                 </tr>
                 <tr>
                     <td>Create RDF import</td>
-                    <td><samp>imports/add-rdf-import.sh</samp></td>
+                    <td><samp>ldh add rdf-import</samp></td>
                 </tr>
                 <tr>
                     <td>Import RDF data</td>
-                    <td><samp>imports/import-rdf.sh</samp></td>
+                    <td><samp>ldh import rdf</samp></td>
                 </tr>
             </tbody>
             <tbody>
                 <tr>
-                    <th colspan="2"><a href="../administration/">Administration</a></th>
+                    <th colspan="2" scope="rowgroup"><a href="../administration/">Administration</a></th>
                 </tr>
                 <tr>
-                    <td>Add <code>owl:import</code> to ontology</td>
-                    <td><samp>admin/add-ontology-import.sh</samp></td>
+                    <td>Add <code>owl:imports</code> to ontology</td>
+                    <td><samp>ldh admin add ontology-import</samp></td>
                 </tr>
                 <tr>
-                    <td>Clear and reload ontology</td>
-                    <td><samp>admin/clear-ontology.sh</samp></td>
+                    <td>Clear the ontology cache, reloading one ontology if named</td>
+                    <td><samp>ldh admin clear ontology</samp></td>
                 </tr>
             </tbody>
             <tbody>
                 <tr>
-                    <th colspan="2"><a href="../administration/acl/">Access control</a></th>
+                    <th colspan="2" scope="rowgroup"><a href="../administration/acl/">Access control</a></th>
                 </tr>
                 <tr>
                     <td>Add <a href="../administration/acl/#agents">agent</a> to <a href="../administration/acl/#groups">group</a></td>
-                    <td><samp>admin/acl/add-agent-to-group.sh</samp></td>
+                    <td><samp>ldh admin add agent</samp></td>
                 </tr>
                 <tr>
                     <td>Create <a href="../administration/acl/#authorizations">authorization</a></td>
-                    <td><samp>admin/acl/create-authorization.sh</samp></td>
+                    <td><samp>ldh admin create authorization</samp></td>
                 </tr>
                 <tr>
                     <td>Create <a href="../administration/acl/#groups">group</a></td>
-                    <td><samp>admin/acl/create-group.sh</samp></td>
+                    <td><samp>ldh admin create group</samp></td>
                 </tr>
                 <tr>
-                    <td>Make application publicly readable to any agent</td>
-                    <td><samp>admin/acl/make-public.sh</samp></td>
+                    <td>Make the dataspace publicly readable by any agent</td>
+                    <td><samp>ldh admin make-public</samp></td>
                 </tr>
             </tbody>
             <tbody>
                 <tr>
-                    <th colspan="2"><a href="../administration/ontologies/">Ontologies</a></th>
+                    <th colspan="2" scope="rowgroup"><a href="../administration/ontologies/">Ontologies</a></th>
                 </tr>
                 <tr>
                     <td>Add <a href="../administration/ontologies/#classes">class</a></td>
-                    <td><samp>admin/ontologies/add-class.sh</samp></td>
+                    <td><samp>ldh admin add class</samp></td>
                 </tr>
                 <tr>
                     <td>Add <code>CONSTRUCT</code> query</td>
-                    <td><samp>admin/ontologies/add-constructor.sh</samp></td>
+                    <td><samp>ldh admin add constructor</samp></td>
                 </tr>
                 <tr>
                     <td>Create <a href="../administration/ontologies/#ontologies">ontology</a></td>
-                    <td><samp>admin/ontologies/create-ontology.sh</samp></td>
+                    <td><samp>ldh admin create ontology</samp></td>
                 </tr>
                 <tr>
                     <td>Add <a href="../administration/ontologies/#constraints">property constraint</a></td>
-                    <td><samp>admin/ontologies/add-property-constraint.sh</samp></td>
+                    <td><samp>ldh admin add property-constraint</samp></td>
                 </tr>
                 <tr>
-                    <td>Add restriction</td>
-                    <td><samp>admin/ontologies/add-restriction.sh</samp></td>
+                    <td>Add <a href="../administration/ontologies/#restrictions">restriction</a></td>
+                    <td><samp>ldh admin add restriction</samp></td>
                 </tr>
                 <tr>
                     <td>Add <code>SELECT</code> query</td>
-                    <td><samp>admin/ontologies/add-select.sh</samp></td>
+                    <td><samp>ldh admin add select</samp></td>
                 </tr>
                 <tr>
                     <td>Import ontology</td>
-                    <td><samp>admin/ontologies/import-ontology.sh</samp></td>
+                    <td><samp>ldh admin import ontology</samp></td>
                 </tr>
             </tbody>
             <tbody>
                 <tr>
-                    <th colspan="2"><a href="../administration/packages/">Packages</a></th>
+                    <th colspan="2" scope="rowgroup"><a href="../administration/packages/">Packages</a></th>
                 </tr>
                 <tr>
-                    <td>Install package</td>
-                    <td><samp>admin/packages/install-package.sh</samp></td>
+                    <td>List available packages</td>
+                    <td><samp>ldh packages list</samp></td>
                 </tr>
                 <tr>
-                    <td>Uninstall package</td>
-                    <td><samp>admin/packages/uninstall-package.sh</samp></td>
+                    <td>Import a package</td>
+                    <td><samp>ldh packages add</samp></td>
+                </tr>
+                <tr>
+                    <td>Drop a package import</td>
+                    <td><samp>ldh packages remove</samp></td>
                 </tr>
             </tbody>
         </table>
-        <p>Usage example:</p>
-        <pre>add-file.sh \\
-  -b "https://localhost:4443/" \\
-  -f ./ssl/owner/cert.pem \\
-  -p "$owner_cert_password" \\
-  --title "Friends" \\
-  --file friends.csv \\
-  --content-type text/csv</pre>
+        <p>Usage example. The Northwind categories CSV is uploaded into a document, so create the document first:</p>
+        <pre>doc=$(ldh create item \\
+  --container "${LDH_BASE}categories/" \\
+  --title "Categories data" \\
+  --slug categories-data)
+
+ldh add file \\
+  --title "categories.csv" \\
+  --file categories/categories.csv \\
+  --content-type text/csv \\
+  "$doc"</pre>
+        <p><samp>add file</samp> prints the content-addressed URI of the upload (<samp>{base}uploads/{sha1}</samp>) rather than the document URI — the
+            <a href="../../tutorial/data/">Data</a> stage of the tutorial feeds exactly that URI into a CSV import.</p>
         <p>See also the <a href="../../user-guide/import-data/">data import user guides</a>.</p>
+        <h3 id="request-bodies">Request bodies</h3>
+        <p><samp>ldh put</samp> and <samp>ldh post</samp> read RDF from an optional <samp>FILE</samp> argument, recognizing the syntax from its extension (<samp>ldh put "$LDH_BASE" root.ttl</samp>), or from standard input, where <code>-t</code>/<code>--content-type</code> is required since a stream carries no name. Either way relative URIs resolve against the target URI. <samp>ldh patch</samp> reads a SPARQL 1.1 update from standard input, validates it and sends it verbatim.</p>
+        <h3 id="primary-topic">What a document is about</h3>
+        <p><samp>ldh create item</samp> and <samp>ldh create container</samp> take <code>--primary-topic</code>, the resource the document is about, resolved against the created document's URI: <samp>'#this'</samp> names a fragment of the document itself, an absolute URI a resource described somewhere else. It writes the <code>foaf:primaryTopic</code> link only — the topic's own type and properties are the <a href="../administration/ontologies/#constructors">constructor</a>'s business, and a vocabulary may refuse a topic without them.</p>
+        <pre>ldh create item \\
+  --container "${LDH_BASE}products/" \\
+  --title "Masala Chai" \\
+  --slug 78 \\
+  --primary-topic '#this'</pre>
+        <h3 id="push">Pushing a directory</h3>
+        <p><samp>ldh push</samp> replays a directory into the document tree it maps to — the <a href="../../tutorial/app-as-repository/">app as a repository</a> convention: one RDF file per document, a folder beside it for the files that document holds, and subfolders for its children.</p>
+        <pre>ldh push "$LDH_BASE"                              # the current directory
+ldh push --dir demo/northwind-traders "$LDH_BASE"
+ldh push --dry-run "$LDH_BASE"                    # print the plan, send nothing</pre>
+        <p>With <samp>D</samp> the URL of the directory being walked (the target URI for the pushed directory itself):</p>
+        <ul>
+            <li><samp>root.ttl</samp> at the top of the tree is <code>PUT</code> to the target URI. It describes the target document itself, so there is no separate step for it.</li>
+            <li>Any other RDF file <samp>name.ext</samp> is <code>PUT</code> to <samp>D/name/</samp>, with its relative URIs resolved against that URL.</li>
+            <li>Every other file is uploaded into <samp>D</samp>, as <samp>add file</samp> would: the file name as the title, the media type detected, the upload URI <samp>{base}uploads/{sha1}</samp>.</li>
+            <li>A subdirectory <samp>name</samp> maps to <samp>D/name/</samp>: its document is the RDF file <samp>name.ext</samp> beside it, its files are uploaded into that document, and its subdirectories recurse.</li>
+        </ul>
+        <p>A file is a document when Jena tells its RDF syntax from the file name and can parse it — <samp>.ttl</samp>, <samp>.nt</samp>, <samp>.rdf</samp>, <samp>.jsonld</samp>, <samp>.trig</samp> and the other registered extensions; <samp>.csv</samp>, <samp>.rq</samp>, <samp>.md</samp>, images and the like are uploads. Within a directory the order is the root document, then documents, then uploads, then subdirectories, each sorted by name, so a subdirectory's document exists before anything is uploaded into it. <code>PUT</code> replaces a document, so a repeated push converges: the document is rewritten and its uploads re-appended, not duplicated.</p>
+        <p>Entries whose name starts with <samp>.</samp> are never pushed. A <samp>.ldhignore</samp> file in any directory excludes entries from that directory's whole subtree, gitignore-style: a pattern without a <samp>/</samp> matches an entry's name at any depth beneath (<samp>*.sh</samp>, <samp>Makefile</samp>), a pattern with a <samp>/</samp> matches the path relative to the ignore file's directory (<samp>categories/unesco-mappings.ttl</samp>), and a trailing <samp>/</samp> restricts the pattern to directories (<samp>admin/</samp>). Nothing is excluded by default beyond hidden entries, so scripts and build output are listed there. Skipped entries are reported on standard error. <samp>--dry-run</samp> walks the tree, parses every document and prints the plan without sending a request or loading a certificate.</p>
+        <h3 id="memento">Versioned documents</h3>
+        <p><samp>ldh get</samp> also exposes a <a href="../versioning/">versioned</a> document's TimeMap, TimeGate and historical versions through
+            three mutually exclusive options — see the <a href="../versioning/#management">versioning reference</a> for the options and examples.</p>
+        <h3 id="packages">Packages</h3>
+        <p><a href="../administration/packages/">Packages</a> are managed with the <samp>packages</samp> group: a dataspace imports a package with a single <code>ldh:import</code> triple, which <samp>ldh packages add</samp> declares and <samp>ldh packages remove</samp> retracts on the dataspace's <samp>settings</samp> document, while <samp>ldh packages list</samp> reads the registry catalog and marks the imported ones. See the <a href="../../user-guide/manage-packages/">package management guide</a>.</p>
     </div>
-    <p class="lead">Find the <a href="https://github.com/AtomGraph/LinkedDataHub/tree/master/bin" target="_blank">CLI scripts on GitHub</a> or check out the
-        <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/demo" target="_blank">demo apps</a> that use them.</p>
+    <p class="ldh-body-lg">Find the <a href="https://github.com/AtomGraph/LinkedDataHub/tree/master/cli" target="_blank">CLI on GitHub</a>, or see it in action in the
+        <a href="../../tutorial/">tutorial</a> and the <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/demo" target="_blank">demo apps</a>.</p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/reference/configuration.ttl b/docs/reference/configuration.ttl
index 647b8a84..aebbee22 100644
--- a/docs/reference/configuration.ttl
+++ b/docs/reference/configuration.ttl
@@ -1,28 +1,63 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Configuration" ;
-    dct:description "Overview of configuration options" ;
+    dct:description "Environment variables, secrets and RDF configuration files" ;
     rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Overview of configuration options</p>
-    <p>LinkedDataHub is configured using environment variables in the <samp>docker-compose.yml</samp> file (environment-specific configuration should go into <samp>docker-compose.override.yml</samp> instead).</p>
-    <p>Below you'll find a list of environment variables and secrets grouped by service (they are defined in the <samp>environment</samp> sections in <samp>docker-compose.yml</samp>).</p>
+    <p class="ldh-body-lg">Environment variables, secrets and RDF configuration files</p>
+    <p>This page covers the RDF configuration files, Compose overrides, and the environment variables and secrets of each service
+        (defined in the <samp>environment</samp> sections of <samp>docker-compose.yml</samp>).</p>
+    <div>
+        <h2 id="system-base-uri">System base URI</h2>
+        <p>The system base URI is the URI at which the LinkedDataHub service is accessible.</p>
+        <p>A common case is changing the system base URI from the default <samp>https://localhost:4443/</samp> to your own.
+            Take <samp>https://ec2-54-235-229-141.compute-1.amazonaws.com/</samp> as an example. Split the URI into components and set them in the <samp>.env</samp> file:</p>
+        <pre>PROTOCOL=https
+HTTP_PORT=80
+HTTPS_PORT=443
+HOST=ec2-54-235-229-141.compute-1.amazonaws.com</pre>
+        <p>A dataspace serves its documents from the root of its origin, so the base URI is always the origin followed by <samp>/</samp> — there is no
+            sub-path component to configure. Serving several dataspaces from one instance is a matter of giving each its own subdomain, as described under
+            <a href="../dataspace/">Dataspaces</a>.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">The <a href="../dataspace/#admin">administration dataspace</a> of each dataspace is served on the <code>admin.</code> subdomain
+                    of its end-user host (e.g. <samp>admin.ec2-54-235-229-141.compute-1.amazonaws.com</samp>). The subdomain must resolve in DNS and be covered by the
+                    server's TLS certificate, otherwise the admin dataspace will not be reachable.</p>
+            </div>
+        </div>
+        <p><a href="../../user-guide/manage-dataspaces/">Dataspace URIs</a> need to be relative to the system base URI in order to be reachable — after the change, the
+            origins in <samp>config/dataspaces.trig</samp> have to follow. For the Northwind Traders dataspace, deploying from local development to the demo
+            host means:</p>
+        <pre># before
+&lt;urn:linkeddatahub:apps/northwind-traders/end-user&gt; a lds:Dataspace ;
+    lds:origin &lt;https://northwind-traders.demo.localhost:4443&gt; ;
+    lds:ontology &lt;https://northwind-traders.demo.localhost:4443/ns#&gt; .
+
+# after
+&lt;urn:linkeddatahub:apps/northwind-traders/end-user&gt; a lds:Dataspace ;
+    lds:origin &lt;https://northwind-traders.demo.linkeddatahub.com&gt; ;
+    lds:ontology &lt;https://northwind-traders.demo.linkeddatahub.com/ns#&gt; .</pre>
+        <p>Restart the services (<samp>make down</samp>, then <samp>make up</samp>) for the changes to take effect. Note that changing the base URI does not
+            rewrite URIs already stored in the dataset — documents minted under the old base URI keep it.</p>
+    </div>
     <div>
         <h2 id="config-files">Configuration files</h2>
         <p>LinkedDataHub uses two main RDF configuration files that define dataspaces and services:</p>
         <dl>
             <dt><samp>config/dataspaces.trig</samp></dt>
-            <dd>Contains application metadata for each dataspace, including:</dd>
+            <dd>Contains public metadata for each dataspace, including:</dd>
             <dd>
                 <ul>
-                    <li>Base URIs and application origins</li>
-                    <li>Application titles and descriptions</li>
+                    <li>Base URIs and origins</li>
+                    <li>Dataspace titles and descriptions</li>
                     <li>Associated ontologies</li>
                     <li>Custom stylesheets</li>
                 </ul>
@@ -32,7 +67,7 @@
             <dd>Contains internal deployment wiring, including:</dd>
             <dd>
                 <ul>
-                    <li>Application-to-service bindings (admin and end-user roles)</li>
+                    <li>Dataspace-to-service bindings (admin and end-user roles)</li>
                     <li>SPARQL endpoint URLs</li>
                     <li>Graph Store Protocol endpoints</li>
                 </ul>
@@ -49,14 +84,40 @@
             <dd>This file is gitignored and must not be committed to version control. See the <samp>credentials</samp> secret entry below for configuration details.</dd>
         </dl>
         <p>All files are in TriG format and are mounted into the LinkedDataHub container at startup. The separation allows you to version control
-        dataspace metadata and service wiring while keeping credentials out of version control entirely.</p>
+        dataspace metadata and service wiring while keeping credentials out of version control entirely. The
+        <a href="../dataspace/#configuring-dataspaces">dataspace reference</a> shows the Northwind Traders dataspace as a worked example across both
+        <samp>config/</samp> files.</p>
+    </div>
+    <div>
+        <h2 id="compose-override">Compose overrides</h2>
+        <p>Environment-specific configuration goes into <samp>docker-compose.override.yml</samp>, which Docker Compose merges over
+            <samp>docker-compose.yml</samp> automatically. Mounting a stylesheet under development, for example:</p>
+        <pre>services:
+  linkeddatahub:
+    volumes:
+      - ./files/northwind.xsl:/usr/local/tomcat/webapps/ROOT/static/com/atomgraph/linkeddatahub/northwind/xsl/layout.xsl:ro</pre>
+    </div>
+    <div>
+        <h2 id="compose-variables">Compose-level variables</h2>
+        <p>The variables in the <samp>.env</samp> file are interpolated by Docker Compose into <samp>docker-compose.yml</samp>. They define the
+            <a href="#system-base-uri">system base URI</a> and the host port mappings:</p>
+        <dl>
+            <dt><samp>PROTOCOL</samp></dt>
+            <dd>URI scheme of the system base URI (<samp>http</samp> or <samp>https</samp>)</dd>
+            <dt><samp>HOST</samp></dt>
+            <dd>Hostname of the system base URI</dd>
+            <dt><samp>HTTP_PORT</samp></dt>
+            <dd>Host port mapped to the container's port <samp>8080</samp>, which redirects HTTP to HTTPS</dd>
+            <dt><samp>HTTPS_PORT</samp></dt>
+            <dd>Host HTTPS port, mapped to the container's port <samp>8443</samp></dd>
+        </dl>
     </div>
     <div>
         <h2 id="service-configuration">Service configuration</h2>
         <p>SPARQL service endpoints are configured in <samp>config/system.trig</samp>. See <a href="../triplestores/#service-configuration">service configuration</a> in the triplestores reference for the RDF properties and examples, and the <a href="../dataspace/#services">dataspace reference</a> for the conceptual overview.</p>
     </div>
     <div>
-        <h2 id="linkeddatahub">linkeddatahub</h2>
+        <h2 id="linkeddatahub"><samp>linkeddatahub</samp> service</h2>
         <div>
             <h3 id="secrets">Secrets</h3>
             <dl>
@@ -87,11 +148,18 @@
             <dl>
                 <dt><samp>ENABLE_WEBID_SIGNUP</samp></dt>
                 <dd><samp>false</samp> to disable. Enabled by default.</dd>
-                <dd><em>Currently this will only hide the signup button in the UI, without disabling the endpoint</em></dd>
+                <dd>
+                    <div class="ac-alert va-warning" role="status">
+                        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">warning</span></span>
+                        <div class="ac-alert-body">
+                            <p class="ac-alert-text">Currently this will only hide the signup button in the UI, without disabling the endpoint.</p>
+                        </div>
+                    </div>
+                </dd>
                 <dt><samp>WEBID_CACHE_EXPIRATION</samp></dt>
-                <dd>Expiration time (in seconds) of cached WebID profiles, bounding how long a revoked WebID stays authenticated. By default <samp>86400</samp>.</dd>
+                <dd>Expiration time (in seconds) of cached WebID profiles, bounding how long a revoked WebID stays authenticated. Defaults to <samp>86400</samp>.</dd>
                 <dt><samp>JWKS_CACHE_EXPIRATION</samp></dt>
-                <dd>Expiration time (in seconds) of cached JWKS keys used for OpenID Connect token verification. By default <samp>86400</samp>.</dd>
+                <dd>Expiration time (in seconds) of cached JWKS keys used for OpenID Connect token verification. Defaults to <samp>86400</samp>.</dd>
             </dl>
         </div>
         <div>
@@ -109,26 +177,23 @@
         </div>
         <div>
             <h3 id="linked-data">Linked Data</h3>
-            <dl>
-                <dt><samp>ENABLE_LINKED_DATA_PROXY</samp></dt>
-                <dd><samp>false</samp> to disable the <a href="../http-api/#ld-proxy">Linked Data proxy</a> (enabled by default)</dd>
-            </dl>
+            <p><samp>ENABLE_LINKED_DATA_PROXY</samp> takes <samp>false</samp> to disable the <a href="../http-api/#ld-proxy">Linked Data proxy</a>, which is enabled by default.</p>
         </div>
         <div>
             <h3 id="http">HTTP(S)</h3>
             <dl>
                 <dt><samp>SELF_SIGNED_CERT</samp></dt>
-                <dd>Set to false <samp>false</samp> if not using the self-signed <em>server</em> certificate (e.g. using LetsEncrypt certificate instead). Not to be confused with the WebID client certificate.
-                    Enabled by default.</dd>
+                <dd>Set to <samp>false</samp> if you are not using the self-signed <em>server</em> certificate (e.g. using a LetsEncrypt certificate instead). Not to be confused with the WebID client certificate.
+                    Defaults to <samp>true</samp>.</dd>
                 <dt><samp>MAX_CONTENT_LENGTH</samp></dt>
-                <dd>Maximum allowed request body size (<samp>nginx</samp> has a separate setting for this.) By default <samp>2097152</samp>.</dd>
+                <dd>Maximum allowed request body size (<samp>nginx</samp> has a separate setting for this). Defaults to <samp>2097152</samp>.</dd>
             </dl>
         </div>
         <div>
             <h3 id="debug">Debug</h3>
             <dl>
                 <dt><samp>JPDA_ADDRESS</samp></dt>
-                <dd>The address through which Java debugger can connect, for example <samp>*:8000</samp>. Note that the port has to be mapped to host in order for the debugger to work, e.g. <samp>8080:8080</samp>.</dd>
+                <dd>The address through which the Java debugger can connect, for example <samp>*:8000</samp>. Note that the port has to be mapped to the host in order for the debugger to work, e.g. <samp>8000:8000</samp>.</dd>
                 <dt><samp>CATALINA_OPTS</samp></dt>
                 <dd>Tomcat's Java options</dd>
             </dl>
@@ -149,58 +214,73 @@
             <p>Timeouts and connection lifetimes for LinkedDataHub's pooled HTTP clients, used for the <a href="../http-api/#ld-proxy">Linked Data proxy</a> and for accessing SPARQL services. All values are in milliseconds and are passed as <samp>CATALINA_OPTS</samp> system properties.</p>
             <dl>
                 <dt><samp>CLIENT_SOCKET_TIMEOUT</samp></dt>
-                <dd>Socket (read) timeout — how long to wait for data on an established connection. By default <samp>120000</samp>.</dd>
+                <dd>Socket (read) timeout — how long to wait for data on an established connection. Defaults to <samp>120000</samp>.</dd>
                 <dt><samp>CLIENT_CONNECT_TIMEOUT</samp></dt>
-                <dd>Connection timeout — how long to wait to establish a connection. By default <samp>10000</samp>.</dd>
+                <dd>Connection timeout — how long to wait to establish a connection. Defaults to <samp>10000</samp>.</dd>
                 <dt><samp>CLIENT_CONNECTION_TIME_TO_LIVE</samp></dt>
-                <dd>Maximum lifetime of a pooled connection before it is closed. By default <samp>300000</samp>.</dd>
+                <dd>Maximum lifetime of a pooled connection before it is closed. Defaults to <samp>300000</samp>.</dd>
                 <dt><samp>CLIENT_VALIDATE_AFTER_INACTIVITY</samp></dt>
-                <dd>Idle time after which a pooled connection is validated before reuse. By default <samp>10000</samp>.</dd>
-            </dl>
-        </div>
-        <div>
-            <h3 id="varnish">Varnish</h3>
-            <dl>
-                <dt><samp>VARNISH_FRONTEND_BACKEND_PORT</samp></dt>
-                <dd>Port for frontend Varnish backend (default: <samp>7070</samp>)</dd>
-                <dd>Can be customized when running LinkedDataHub behind additional proxies or in non-standard Docker networking configurations</dd>
-                <dt><samp>VARNISH_ADMIN_BACKEND_PORT</samp></dt>
-                <dd>Port for admin Varnish backend (default: <samp>3030</samp>)</dd>
-                <dd>Can be customized when running LinkedDataHub behind additional proxies or in non-standard Docker networking configurations</dd>
-                <dt><samp>VARNISH_END_USER_BACKEND_PORT</samp></dt>
-                <dd>Port for end-user Varnish backend (default: <samp>3030</samp>)</dd>
-                <dd>Can be customized when running LinkedDataHub behind additional proxies or in non-standard Docker networking configurations</dd>
+                <dd>Idle time after which a pooled connection is validated before reuse. Defaults to <samp>10000</samp>.</dd>
             </dl>
         </div>
     </div>
     <div>
-        <h2 id="nginx">nginx</h2>
+        <h2 id="varnish">Varnish services</h2>
+        <p>The backend ports of the <samp>varnish-frontend</samp>, <samp>varnish-admin</samp> and <samp>varnish-end-user</samp> caching services can be
+            customized when running LinkedDataHub behind additional proxies or in non-standard Docker networking configurations:</p>
+        <dl>
+            <dt><samp>VARNISH_FRONTEND_BACKEND_PORT</samp></dt>
+            <dd>Port for frontend Varnish backend. Defaults to <samp>7070</samp>.</dd>
+            <dt><samp>VARNISH_ADMIN_BACKEND_PORT</samp></dt>
+            <dd>Port for admin Varnish backend. Defaults to <samp>3030</samp>.</dd>
+            <dt><samp>VARNISH_END_USER_BACKEND_PORT</samp></dt>
+            <dd>Port for end-user Varnish backend. Defaults to <samp>3030</samp>.</dd>
+        </dl>
+    </div>
+    <div>
+        <h2 id="fuseki"><samp>fuseki</samp> service</h2>
+        <p>A single <a href="https://jena.apache.org/documentation/fuseki2/" target="_blank">Apache Jena Fuseki</a> server holds a TDB2 dataset for every dataspace role — an <samp>end-user</samp> and an <samp>admin</samp> dataset per dataspace — declared in <samp>config/fuseki/config.ttl</samp> and persisted under the <samp>fuseki/</samp> folder, one sub-folder per dataset. <samp>JAVA_OPTIONS</samp> carries the Java options of the Fuseki process, and is what sizes its heap.</p>
+        <p>Datasets are named after the dataspace origin with the deployment host dropped and the role appended — <samp>northwind-traders.demo.end-user</samp>, <samp>northwind-traders.demo.admin</samp> — so the names hold across development and production; the root dataspace's are plain <samp>end-user</samp> and <samp>admin</samp>. See the <a href="../dataspace/#services">dataspace reference</a> for the service declarations that bind a dataspace to its datasets.</p>
+    </div>
+    <div>
+        <h2 id="egress"><samp>egress</samp> service</h2>
+        <p>A forward proxy (Squid) that the outbound SPARQL <code>SERVICE</code> and <code>LOAD</code> requests of both Fuseki and the platform pass through. It permits public destinations and refuses loopback, private and link-local ones, resolving each where it connects so redirect hops and DNS answers are checked too. Federation with public endpoints keeps working, while a <code>SERVICE</code> clause cannot reach another dataset, the cache or the platform.</p>
+        <p>Fuseki is pointed at it through its <samp>JAVA_TOOL_OPTIONS</samp>; the platform's own in-process queries (imports and PATCH updates) are routed through it when <samp>EGRESS_PROXY</samp> is set to its <samp>host:port</samp>. Without a proxy and without <samp>ALLOW_INTERNAL_URLS</samp>, the platform disables <code>SERVICE</code> in those queries rather than leaving it open.</p>
+    </div>
+    <div>
+        <h2 id="sef-compiler"><samp>sef-compiler</samp> service</h2>
+        <p>Compiles each dataspace's client-side stylesheet together with the stylesheets of its <a href="../administration/packages/">imported packages</a> into a SEF that the browser runs, so a package's rendering reaches the client as well as the server. The platform composes the wrapper and submits it; the compiled SEF is written to the <samp>sef</samp> bind mount (<samp>/var/www/linkeddatahub/sef</samp>, served under <samp>/static/xsl/sef/</samp>) and its URL travels to the page as a <code>Link</code> header. The service is built from the same Dockerfile as the platform, so its copy of the stylesheets is the deployed one.</p>
+        <p><samp>SEF_ROOT</samp> and <samp>SEF_COMPILER</samp> reach the platform through <samp>CATALINA_OPTS</samp> and are optional: without them packages compose server-side only, and the client runs the stock stylesheet. A deployment with its own compose file adds the service, the platform's <samp>depends_on</samp> on it and the bind mount.</p>
+        <p><samp>CLIENT_STYLESHEET</samp> names the client stylesheet the SEF is composed from and defaults to the platform's <samp>client.xsl</samp>. A deployment whose page bootstraps its own client stylesheet sets it to that stylesheet's webapp path - it must import the platform's <samp>client.xsl</samp> directly, by an href that resolves from that path - and its layout prefers <code>ldh:client-stylesheet()</code> over its own SEF; otherwise the site's rules vanish from a package dataspace on the first client-side navigation, while a reload brings them back.</p>
+    </div>
+    <div>
+        <h2 id="nginx"><samp>nginx</samp> service</h2>
         <dl>
             <dt><samp>SERVER_CERT_FILE</samp></dt>
-            <dd>Location of the server's SSL certificate. By default <samp>/etc/nginx/ssl/server.crt</samp>.</dd>
+            <dd>Location of the server's SSL certificate. Defaults to <samp>/etc/nginx/ssl/server.crt</samp>.</dd>
             <dt><samp>SERVER_KEY_FILE</samp></dt>
-            <dd>Location of the server's SSL certificate's key. By default <samp>/etc/nginx/ssl/server.key</samp>.</dd>
+            <dd>Location of the server's SSL certificate's key. Defaults to <samp>/etc/nginx/ssl/server.key</samp>.</dd>
             <dt><samp>SSL_VERIFY_CLIENT</samp></dt>
-            <dd><samp>off</samp> to disable TLS client certificate authentication on the <samp>$HTTPS_PORT</samp> port, which also disables LinkedDataHub's <a href="../../get-started/get-an-account/">WebID-TLS authentication method</a>.</dd>
-            <dd>This option can be used to avoid the certificate prompt in the browser in end-user facing applications. The client certificate authentication is still available on port 5443.</dd>
-            <dd><samp>optional_no_ca</samp> to enable it.</dd>
+            <dd><samp>optional_no_ca</samp> to enable TLS client certificate authentication on the <a href="#compose-variables"><samp>$HTTPS_PORT</samp></a> port; <samp>off</samp> to disable it, which also disables LinkedDataHub's <a href="../../get-started/get-an-account/">WebID-TLS authentication method</a>.</dd>
+            <dd>Disabling can be used to avoid the certificate prompt in the browser in end-user facing dataspaces. The client certificate authentication is still available on port 5443.</dd>
             <dt><samp>MAX_BODY_SIZE</samp></dt>
-            <dd>Maximum allowed request body size (<samp>linkeddatahub</samp> has a separate setting for this.) By default <samp>2097152</samp>.</dd>
+            <dd>Maximum allowed request body size (<samp>linkeddatahub</samp> has a separate setting for this). Defaults to <samp>2097152</samp>.</dd>
         </dl>
         <p>By default nginx is configured to guard against DoS by limiting the rate of requests per second, which can be necessary on a public instance. The limiting can be disabled in <samp>platform/nginx.conf.template</samp>
             by commenting out all lines starting with <samp>limit_req</samp> using <samp>#</samp>.</p>
         <div>
             <h3 id="server-certs">Server certificates</h3>
             <p>The certificates generated by the <samp>server-cert-gen.sh</samp> script are self-signed and therefore are shown as
-            "not secure" in web browsers. On a local machine this shouldn't be a problem; on public/production servers we recommend
-            using <a href="https://letsencrypt.org/" target="_blank">LetsEncrypt</a> certificates. They can be mounted into nginx as follows:</p>
-            <pre><code>  nginx:
+                <samp>not secure</samp> in web browsers. On a local machine this should not be a problem; on public/production servers use
+                <a href="https://letsencrypt.org/" target="_blank">LetsEncrypt</a> certificates instead. They can be mounted into nginx as follows:</p>
+            <pre>services:
+  nginx:
     environment:
       - SERVER_CERT_FILE=/etc/letsencrypt/live/kgdev.net/fullchain.pem
       - SERVER_KEY_FILE=/etc/letsencrypt/live/kgdev.net/privkey.pem
     volumes:
-      - /etc/letsencrypt:/etc/letsencrypt</code></pre>
+      - /etc/letsencrypt:/etc/letsencrypt</pre>
+            <p><a href="#http"><samp>SELF_SIGNED_CERT</samp></a> should be set to <samp>false</samp> in this case.</p>
         </div>
-        <p><a href="#http"><samp>SELF_SIGNED_CERT</samp></a> should be set to <samp>false</samp> in this case.</p>
     </div>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/reference/data-model.ttl b/docs/reference/data-model.ttl
index 11206619..3a0f1666 100644
--- a/docs/reference/data-model.ttl
+++ b/docs/reference/data-model.ttl
@@ -1,17 +1,18 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Container ;
     dct:title "Data model" ;
-    dct:description "Document and content structure as well as actions that can be performed on them" ;
+    dct:description "Document and content structure, and the actions that can be performed on documents, blocks and resources" ;
     rdf:_1 <#content> ;
     rdf:_2 <#select-children> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Document and content structure as well as actions that can be performed on them.</p>
+    <p class="ldh-body-lg">Document and content structure, and the actions that can be performed on documents, blocks and resources</p>
+    <p>Start with the <a href="documents/">Documents</a> page, then read <a href="blocks/">Content blocks</a> and <a href="resources/">Resources</a>.</p>
 </div>"""^^rdf:XMLLiteral .
 
 <#select-children> a ldh:Object ;
diff --git a/docs/reference/data-model/blocks-1.webp b/docs/reference/data-model/blocks-1.webp
new file mode 100644
index 00000000..98893528
Binary files /dev/null and b/docs/reference/data-model/blocks-1.webp differ
diff --git a/docs/reference/data-model/blocks.ttl b/docs/reference/data-model/blocks.ttl
index 969dcef0..f2fae135 100644
--- a/docs/reference/data-model/blocks.ttl
+++ b/docs/reference/data-model/blocks.ttl
@@ -1,25 +1,137 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-  
-<> a dh:Container ;
+
+<> a dh:Item ;
     dct:title "Content blocks" ;
-    dct:description "Content blocks and the basic data content actions" ;
-    rdf:_1 <#content> ;
-    rdf:_2 <#select-children> .
+    dct:description "Content blocks and the actions for managing them" ;
+    rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Content blocks and the basic data content actions.</p>
+    <p class="ldh-body-lg">Content blocks and the actions for managing them</p>
+    <p>The content list is a <a href="../../user-interface/#layout-modes" target="_blank">layout mode</a> that allows composition of rich, structured web documents from multiple types of content blocks.</p>
+    <p>The blocks are attached to the document resource using <a href="https://www.w3.org/TR/rdf-schema/#ch_seq" target="_blank">RDF sequence properties</a> <code>rdf:_1</code>, <code>rdf:_2</code> etc.
+        The index number in the property URI indicates the position of the content block on the document's content list. The Northwind dashboard's root document, for example, starts with:</p>
+    <pre>&lt;https://localhost:4443/&gt;
+    rdf:_1 &lt;https://localhost:4443/#overview-intro&gt; ;      # an XHTML block
+    rdf:_2 &lt;https://localhost:4443/#sales-trend-block&gt; .   # an object block wrapping a chart</pre>
+    <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/root.ttl" target="_blank">root.ttl</a> · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/" target="_blank">the dashboard</a></p>
+    <p>Blocks come in two types: XHTML (<code>ldh:XHTML</code>) and object (<code>ldh:Object</code>). These are the only types allowed as content block values — anything that is not XHTML markup, such as a query, a chart or an external resource, has to be wrapped into an <code>ldh:Object</code>. A built-in constraint rejects other values.</p>
+    <p>Blocks can be rearranged by dragging a block's handle to a new position. Every block also offers a button that copies the block's URI to the clipboard.</p>
+    <img alt="The top of the Northwind dashboard's content list, with a block's drag handle and copy button visible" src="/uploads/6ee792727c3a4b661f5139ec86c60105db18d958"></img>
     <div>
-        <p>Content list is a <a href="../../user-interface/#layout-modes" target="_blank">layout mode</a> introduced in LinkedDataHub 3.x. It allow composition of rich, structured web documents from multiple types of content blocks.</p>
-        <p>The blocks are attached to the document resource using <a href="https://www.w3.org/TR/rdf-schema/#ch_seq" target="_blank">RDF sequence properties</a> <code>rdf:_1</code>, <code>rdf:_2</code> etc.
-        The index number in the property URI indicates the position of the content block on the document's content list.</p>
-        <p>The blocks have 2 main types: XHTML (<code>ldh:XHTML</code>) and object (<code>ldh:Object</code>).</p>
-        <p>The blocks can be re-arranged by dragging one of them and dropping them in a different position.</p>
+        <h2 id="xhtml-blocks">XHTML blocks</h2>
+        <p>An XHTML block is a fragment of XHTML, stored as a <a href="https://www.w3.org/TR/xml-c14n11/" target="_blank">canonical XML</a> literal (<code>rdf:XMLLiteral</code>) in the RDF document. It is edited in place using the rich-text editor, which also supports <a href="../../../user-guide/edit-content/">RDFa annotations</a>.</p>
+        <div>
+            <h3 id="xhtml-rdf-serialization">RDF serialization</h3>
+            <pre>@prefix ldh: &lt;https://w3id.org/atomgraph/linkeddatahub#&gt; .
+@prefix rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; .
+
+&lt;https://localhost:4443/#overview-intro&gt;
+    a       ldh:XHTML ;
+    rdf:value "&lt;div xmlns=\\\"http://www.w3.org/1999/xhtml\\\"&gt;\\n&lt;p&gt;The iconic sample database, reborn as an RDF Knowledge Graph.&lt;/p&gt;\\n&lt;/div&gt;"^^rdf:XMLLiteral .</pre>
+        </div>
     </div>
-</div>"""^^rdf:XMLLiteral .
+    <div>
+        <h2 id="object-blocks">Object blocks</h2>
+        <p>Blocks other than XHTML content are called <dfn>objects</dfn> and must have a dereferenceable URI. Objects are embedded (transcluded) into the HTML page. You can use any <a href="../resources/">RDF resource</a> or uploaded file as an object.</p>
+        <p>LinkedDataHub will first attempt to load RDF data from the object URI and render it as a block. If that fails, it will simply embed it using the HTML <code>&lt;object&gt;</code> element. Object blocks can be used to embed queries, charts, and other LinkedDataHub system resources.</p>
+        <p>Built-in block types render as cards: a header carries the block's title and actions such as the <a href="../../user-interface/#backlinks">links popover</a> and the copy-URI button, and the block's content follows below. Block-type-specific controls join the header area — a <a href="../resources/#views">view</a> block, for example, adds its <a href="../resources/#faceted-search">facet toolbar</a> and <a href="../resources/#parallax">parallax row</a> there. The layout of the content may depend on the active mode of the block.</p>
+        <div>
+            <h3 id="object-rdf-serialization">RDF serialization</h3>
+            <pre>@prefix ldh: &lt;https://w3id.org/atomgraph/linkeddatahub#&gt; .
+@prefix rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; .
+@prefix dct: &lt;http://purl.org/dc/terms/&gt; .
 
-<#select-children> a ldh:Object ;
-    rdf:value ldh:ChildrenView .
+&lt;https://localhost:4443/#top-manager&gt;
+    a       ldh:Object ;
+    dct:title "Vice President, Sales" ;
+    rdf:value &lt;https://localhost:4443/employees/2/#this&gt; .</pre>
+            <p>This block from the Northwind dashboard embeds a plain data resource — the Vice President of Sales, rendered with his description and photo.
+                The object can equally be a <a href="../resources/#queries">query</a>, a <a href="../resources/#charts">chart</a>, a
+                <a href="../resources/#views">view</a>, or an external Linked Data URI, and an optional <code>ac:mode</code> on the block picks the
+                <a href="../../user-interface/#layout-modes">layout mode</a> it renders in.</p>
+            <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/root.ttl" target="_blank">root.ttl</a> · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/" target="_blank">the dashboard</a></p>
+        </div>
+    </div>
+    <div>
+        <h2 id="management">Management</h2>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
+            <p>Content blocks can only be managed when the <a href="../../user-interface/#layout-modes" target="_blank">Content layout mode</a> is active. The edit and delete buttons only appear for agents with write access.</p>
+            <table>
+                <caption class="ac-vh">Block management actions</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Action</th>
+                        <th scope="col">Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th scope="row">Create XHTML block</th>
+                        <td>Click the <span class="ac-btn in-primary ap-solid sz-md">XHTML</span> button at the bottom of the page. Create the XHTML content in the rich-text editor.</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Create object block</th>
+                        <td>Click the <span class="ac-btn in-primary ap-solid sz-md">Object</span> button at the bottom of the page. Enter the object's value URI. Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span>.</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Update XHTML block</th>
+                        <td>Click into the block's content and edit it in place. The changes are <a href="../../../user-guide/edit-content/">saved automatically</a> when the focus leaves the block — there is no separate save button.</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Update object block</th>
+                        <td>Click the <span class="ac-iconbtn sz-sm in-neutral ap-ghost"><span aria-hidden="true" class="msi sm">edit</span></span> button in the top-right corner of the block (it will only appear when you move the mouse close to that corner). Change the object's value URI. Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span>.</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Delete</th>
+                        <td>Click the <span class="ac-iconbtn sz-sm in-destructive ap-ghost"><span aria-hidden="true" class="msi sm">close</span></span> button in the top-right corner of the block (it will only appear when you move the mouse close to that corner). Confirm in the dialog that appears.</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Reorder</th>
+                        <td>Drag the block by its drag handle and drop it in a different position on the content list.</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Copy URI</th>
+                        <td>Click the copy button on the block to copy the block's URI to the clipboard.</td>
+                    </tr>
+                </tbody>
+            </table>
+            </div>
+            <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
+            <table>
+                <caption class="ac-vh">Block actions and their CLI commands</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Action</th>
+                        <th scope="col">CLI command</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th scope="row">Create XHTML block</th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh add xhtml-block</samp></a></td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Create object block</th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh add object-block</samp></a></td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Delete</th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh remove block</samp></a></td>
+                    </tr>
+                </tbody>
+            </table>
+            <p>Updating and reordering blocks has no dedicated command; use <samp>ldh patch</samp> with a SPARQL update on the document.</p>
+            </div>
+        </div>
+    </div>
+    <p class="ldh-body-lg">To compose content blocks step-by-step, follow the <a href="../../../user-guide/create-data/create-content/">Create content</a> guide</p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/reference/data-model/blocks/objects.ttl b/docs/reference/data-model/blocks/objects.ttl
deleted file mode 100644
index 0ef9be88..00000000
--- a/docs/reference/data-model/blocks/objects.ttl
+++ /dev/null
@@ -1,81 +0,0 @@
-@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix dct:    <http://purl.org/dc/terms/> .
-  
-<> a dh:Item ;
-    dct:title "Object blocks" ;
-    dct:description "Blocks that embed/transclude any dereferenceable URI" ;
-    rdf:_1 <#content> .
-
-<#content> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Blocks that embed/transclude any dereferenceable URI</p>
-    <p>Blocks other than HTML content is called an <dfn>object</dfn> and has to have a URI that dereferences. Objects are embedded (transcluded) into the HTML page. You can use any <a href="../../resources/">RDF resource</a> or uploaded file as an object.</p>
-    <p>LinkedDataHub will first attempt to load RDF data from the object URI and render it as block. If that fails, it will simply embed it using the HTML <code>&lt;object&gt;</code> element. Object blocks can be used to embed queries, charts, and other LinkedDataHub system resources.</p>
-    <p>Built-in block types use a UI convention where their UI is split into left, main, and right content areas. The layout of the main content may depend on the active mode of the block. Left and right sections are block-type specific.</p>
-    <div>
-        <h2 id="rdf-serialization">RDF serialization</h2>
-        <pre>@prefix ldh: &lt;https://w3id.org/atomgraph/linkeddatahub#&gt; .
-@prefix rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; .
-@prefix ac: &lt;https://w3id.org/atomgraph/client#&gt; .
-
-&lt;https://localhost:4443/concepts/example/#object-block&gt;
-    a       ldh:Object ;
-    rdf:value &lt;http://dbpedia.org/resource/Copenhagen&gt; ;
-    ac:mode  ac:MapMode .</pre>
-    </div>
-    <div>
-        <h2 id="management">Management</h2>
-        <div>
-            <h3><a href="../../../user-interface/">User interface</a></h3>
-            <table class="table table-striped" id="actions">
-                <thead>
-                    <tr>
-                        <th>Action</th>
-                        <th>Description</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th>Create</th>
-                        <td>Click the <span class="btn btn-primary create-action">Object</span> button at the bottom of the page (in content mode). Enter the object's value URI. Click <span class="btn btn-primary btn-save">Save</span>.</td>
-                    </tr>
-                    <tr>
-                        <th>Update</th>
-                        <td>Click the <span class="btn btn-edit"></span> button in the top-right corner of the block (it will only appear when you move the mouse close to that corner). Change the object's value URI. Click <span class="btn btn-primary btn-save">Save</span>.</td>
-                    </tr>
-                    <tr>
-                        <th>Delete</th>
-                        <td>Click the <span class="btn btn-remove-resource"></span> button in the top-right corner of the block (it will only appear when you move the mouse close to that corner). Click the <span class="btn btn-remove"></span> button to delete the block.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <div>
-            <h3><a href="../../../command-line-interface/">Command line interface</a></h3>
-            <table class="table table-striped">
-                <thead>
-                    <tr>
-                        <th>Action</th>
-                        <th>CLI script</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th>Create</th>
-                        <td><a href="../../../command-line-interface/#scripts"><samp>content/add-object-block.sh</samp></a></td>
-                    </tr>
-                    <tr>
-                        <th>Update</th>
-                        <td></td>
-                    </tr>
-                    <tr>
-                        <th>Delete</th>
-                        <td></td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/data-model/blocks/xhtml.ttl b/docs/reference/data-model/blocks/xhtml.ttl
deleted file mode 100644
index 13563f2c..00000000
--- a/docs/reference/data-model/blocks/xhtml.ttl
+++ /dev/null
@@ -1,78 +0,0 @@
-@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix dct:    <http://purl.org/dc/terms/> .
-  
-<> a dh:Item ;
-    dct:title "XHTML blocks" ;
-    dct:description "Blocks that embed XHTML markup as an RDF literal" ;
-    rdf:_1 <#content> .
-
-<#content> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Blocks that embed XHTML markup as an RDF literal</p>
-    <p>XHTML block is simply a fragment of XHTML, stored as a <a href="https://www.w3.org/TR/xml-c14n11/" target="_blank">canonical XML</a> literal (<code>rdf:XMLLiteral</code>) in the RDF document. It can be edited using a WYSIWYG editor.</p>
-    <div>
-        <h2 id="rdf-serialization">RDF serialization</h2>
-        <pre>@prefix ldh: &lt;https://w3id.org/atomgraph/linkeddatahub#&gt; .
-@prefix rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; .
-
-&lt;https://localhost:4443/concepts/example/#xhtml-block&gt;
-    a       ldh:XHTML ;
-    rdf:value "&lt;div xmlns=\\\"http://www.w3.org/1999/xhtml\\\"&gt;\\n&lt;p&gt;A paragraph&lt;/p&gt;\\n&lt;/div&gt;"^^rdf:XMLLiteral .</pre>
-    </div>
-    <div>
-        <h2 id="management">Management</h2>
-        <div>
-            <h3 id="management-ui"><a href="../../../user-interface/">User interface</a></h3>
-            <p>Content blocks can only be managed when the <a href="../../../user-interface/#layout-modes" target="_blank"><samp>Content</samp> layout mode</a> is active.</p>
-            <table class="table table-striped">
-                <thead>
-                    <tr>
-                        <th>Action</th>
-                        <th>Description</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th>Create</th>
-                        <td>Click the <span class="btn btn-primary create-action">XHTML</span> button at the bottom of the page (in content mode). Create the XHTML content in the WYSIWYG editor. Click <span class="btn btn-primary btn-save">Save</span>.</td>
-                    </tr>
-                    <tr>
-                        <th>Update</th>
-                        <td>Click the <span class="btn btn-edit"></span> button in the top-right corner of the block (it will only appear when you move the mouse close to that corner). Change the XHTML content in the WYSIWYG editor. Click <span class="btn btn-primary btn-save">Save</span>.</td>
-                    </tr>
-                    <tr>
-                        <th>Delete</th>
-                        <td>Click the <span class="btn btn-edit"></span> button in the top-right corner of the block (it will only appear when you move the mouse close to that corner). Click the <span class="btn btn-remove-resource"></span> button to delete the block.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <div>
-            <h3 id="management-cli"><a href="../../../command-line-interface/">Command line interface</a></h3>
-            <table class="table table-striped">
-                <thead>
-                    <tr>
-                        <th>Action</th>
-                        <th>CLI script</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th>Create</th>
-                        <td><a href="../../../command-line-interface/#scripts"><samp>content/add-xhtml-block.sh</samp></a></td>
-                    </tr>
-                    <tr>
-                        <th>Update</th>
-                        <td></td>
-                    </tr>
-                    <tr>
-                        <th>Delete</th>
-                        <td></td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/data-model/documents.ttl b/docs/reference/data-model/documents.ttl
index dc069da4..db8863e9 100644
--- a/docs/reference/data-model/documents.ttl
+++ b/docs/reference/data-model/documents.ttl
@@ -1,32 +1,168 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-  
-<> a dh:Container ;
+
+<> a dh:Item ;
     dct:title "Documents" ;
-    dct:description "Document hierarchy and the basic data management actions" ;
-    rdf:_1 <#content> ;
-    rdf:_2 <#select-children> .
+    dct:description "Document structure and the basic data management actions" ;
+    rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Document structure and the basic data management actions.</p>
+    <p class="ldh-body-lg">Document structure and the basic data management actions</p>
     <div>
         <h2 id="hierarchy">Document hierarchy</h2>
-        <p>The basic structure of resources in a LinkedDataHub <a href="../../dataspace/#applications">application</a> is analogous to the file system, but built using RDF
+        <p>The basic structure of resources in a LinkedDataHub <a href="../../dataspace/#dataspaces">dataspace</a> is analogous to a file system, but built using RDF
             resources and relationships between them instead. There is a hierarchy of <dfn>containers</dfn> (folders),
             which are collections of <dfn>items</dfn> (files) as well as sub-containers (sub-folders). Both containers
             (instances of <code>dh:Container</code>) and items (instances of <code>dh:Item</code>) are <dfn>documents</dfn> (instances of <code>foaf:Document</code>). Items cannot contain other documents.</p>
         <p>The first level of resources in a container is referred to as its <dfn>children</dfn> (of which that container
-            is the <dfn>parent</dfn>, while all levels down the hierarchy are collectively referred to as
-            <dfn>descendants</dfn>.</p>
-        <p>When a user logs in, the application loads its root container (unless a specific URI was requested). From there,
+            is the <dfn>parent</dfn>), while all levels down the hierarchy are collectively referred to as
+            <dfn>descendants</dfn>. In the <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/demo/northwind-traders" target="_blank">Northwind Traders</a> dataspace used in the examples below:</p>
+        <pre>https://localhost:4443/          # the root container
+├── categories/                  # container
+│   ├── 1/                       # item — the Beverages category
+│   └── …
+├── products/                    # container
+│   ├── 1/                       # item — the Chai product
+│   └── …
+└── orders/                      # container</pre>
+        <p>When a user logs in, the dataspace loads its root container (unless a specific URI was requested). From there,
             users can navigate down the resource hierarchy, starting with children of the <dfn>root container</dfn>. At
-            any moment there is only one <dfn>current document</dfn> per page, on which management actions can
+            any moment there is only one <dfn>current document</dfn> per page, on which <a href="#management">management actions</a> can
             be performed: it can be viewed, edited etc.</p>
     </div>
-</div>"""^^rdf:XMLLiteral .
+    <div>
+        <h2 id="containers">Containers</h2>
+        <div>
+            <h3 id="container-rdf-serialization">RDF serialization</h3>
+            <p>Document properties such as <code>sioc:has_parent</code>, <code>dct:created</code>, <code>dct:modified</code>, <code>acl:owner</code> are <a href="../../http-api/#document-metadata">automatically managed</a> by LinkedDataHub.</p>
+            <pre>@prefix dh: &lt;https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#&gt; .
+@prefix ldh: &lt;https://w3id.org/atomgraph/linkeddatahub#&gt; .
+@prefix rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; .
+@prefix dct: &lt;http://purl.org/dc/terms/&gt; .
+@prefix xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt; .
+@prefix sioc: &lt;http://rdfs.org/sioc/ns#&gt; .
+@prefix acl: &lt;http://www.w3.org/ns/auth/acl#&gt; .
+
+&lt;https://localhost:4443/categories/&gt;
+    a       dh:Container ;
+    rdf:_1  &lt;https://localhost:4443/categories/#select-children&gt; ;
+    dct:created "2025-06-02T19:12:26.533Z"^^xsd:dateTime ;
+    dct:creator &lt;https://admin.localhost:4443/acl/agents/865c2431-8436-4ae8-b300-2a531a013cd0/#this&gt; ;
+    dct:title "Categories" ;
+    sioc:has_parent &lt;https://localhost:4443/&gt; ;
+    acl:owner &lt;https://admin.localhost:4443/acl/agents/865c2431-8436-4ae8-b300-2a531a013cd0/#this&gt; .
+
+&lt;https://localhost:4443/categories/#select-children&gt;
+    a       ldh:Object ;
+    rdf:value ldh:ChildrenView .</pre>
+            <p>The <code>&lt;#select-children&gt;</code> resource is an <code>ldh:Object</code> <a href="../blocks/">content block</a> whose <code>rdf:value</code> <code>ldh:ChildrenView</code> renders the container's children listing.</p>
+            <p class="exhibit-links">Live: <a href="https://northwind-traders.demo.linkeddatahub.com/categories/" target="_blank">/categories/</a> (the demo's version composes <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories.ttl" target="_blank">further blocks</a> on top of this shape)</p>
+        </div>
+    </div>
+    <div>
+        <h2 id="items">Items</h2>
+        <div>
+            <h3 id="item-rdf-serialization">RDF serialization</h3>
+            <p>Document properties such as <code>sioc:has_container</code>, <code>dct:created</code>, <code>dct:modified</code>, <code>acl:owner</code> are <a href="../../http-api/#document-metadata">automatically managed</a> by LinkedDataHub.</p>
+            <pre>@prefix dh: &lt;https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#&gt; .
+@prefix dct: &lt;http://purl.org/dc/terms/&gt; .
+@prefix xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt; .
+@prefix sioc: &lt;http://rdfs.org/sioc/ns#&gt; .
+@prefix acl: &lt;http://www.w3.org/ns/auth/acl#&gt; .
+@prefix foaf: &lt;http://xmlns.com/foaf/0.1/&gt; .
+@prefix schema: &lt;https://schema.org/&gt; .
+
+&lt;https://localhost:4443/products/1/&gt;
+    a       dh:Item ;
+    dct:created "2025-06-02T19:49:48.126Z"^^xsd:dateTime ;
+    dct:creator &lt;https://admin.localhost:4443/acl/agents/865c2431-8436-4ae8-b300-2a531a013cd0/#this&gt; ;
+    dct:title "Chai" ;
+    sioc:has_container &lt;https://localhost:4443/products/&gt; ;
+    acl:owner &lt;https://admin.localhost:4443/acl/agents/865c2431-8436-4ae8-b300-2a531a013cd0/#this&gt; ;
+    foaf:primaryTopic &lt;https://localhost:4443/products/1/#this&gt; .
 
-<#select-children> a ldh:Object ;
-    rdf:value ldh:ChildrenView .
+&lt;https://localhost:4443/products/1/#this&gt;
+    a       schema:Product ;
+    schema:name "Chai" ;
+    schema:identifier "1" ;
+    schema:category &lt;https://localhost:4443/categories/1/#this&gt; ;
+    schema:provider &lt;https://localhost:4443/suppliers/1/#this&gt; .</pre>
+            <p>An item is often <em>about</em> something — here the document <samp>products/1/</samp> describes the Chai product, a non-information
+                resource identified by the <samp>#this</samp> fragment and linked with <code>foaf:primaryTopic</code>.</p>
+            <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/products/products.rq" target="_blank">products/products.rq</a> (the mapping that mints it) · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/products/1/" target="_blank">/products/1/</a></p>
+        </div>
+    </div>
+    <div>
+        <h2 id="management">Management</h2>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
+            <table>
+                <caption class="ac-vh">Document management actions</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Action</th>
+                        <th scope="col">Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th scope="row">Create</th>
+                        <td>Create a new child document by clicking the <span class="ac-btn in-primary ap-solid sz-md">Create</span> button. Fill out the form. Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span>.</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Update</th>
+                        <td>Open the current document editing form by choosing <samp>Edit</samp> in the <a href="../../user-interface/#action-bar">action bar</a>'s <span class="ac-btn in-neutral ap-outline sz-md">Actions</span> dropdown. Make changes. Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span>.</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Delete</th>
+                        <td>Delete the current document by choosing <samp>Delete</samp> in the <a href="../../user-interface/#action-bar">action bar</a>'s <span class="ac-btn in-neutral ap-outline sz-md">Actions</span> dropdown.</td>
+                    </tr>
+                </tbody>
+            </table>
+            </div>
+            <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
+            <table>
+                <caption class="ac-vh">Document actions and their CLI commands</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Action</th>
+                        <th scope="col">CLI command</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th scope="row">Create container</th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh create container</samp></a></td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Create item</th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh create item</samp></a></td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Update</th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh put</samp></a></td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Delete</th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh delete</samp></a></td>
+                    </tr>
+                </tbody>
+            </table>
+            <p>For example, creating the <samp>categories/</samp> container (with the <a href="../../command-line-interface/#environment-variables"><samp>LDH_*</samp> environment variables</a> supplying the certificate and base URI):</p>
+            <pre>ldh create container \\
+  --parent "$LDH_BASE" \\
+  --title "Categories" \\
+  --slug categories</pre>
+            <p>The command prints the created document's URL — <samp>https://localhost:4443/categories/</samp>.</p>
+            </div>
+        </div>
+    </div>
+    <p class="ldh-body-lg">To create documents step-by-step, follow the <a href="../../../user-guide/create-data/create-documents/">Create documents</a> guide</p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/reference/data-model/documents/containers.ttl b/docs/reference/data-model/documents/containers.ttl
deleted file mode 100644
index ee326f05..00000000
--- a/docs/reference/data-model/documents/containers.ttl
+++ /dev/null
@@ -1,91 +0,0 @@
-@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix dct:    <http://purl.org/dc/terms/> .
-  
-<> a dh:Item ;
-    dct:title "Containers" ;
-    dct:description "Containers are analogous to folders in a filesystem" ;
-    rdf:_1 <#content> .
-
-<#content> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Containers are analogous to folders in a filesystem</p>
-    <div>
-        <h2 id="rdf-serialization">RDF serialization</h2>
-        <p>Document properties such as <code>sioc:has_parent</code>, <code>dct:created</code>, <code>dct:modified</code>, <code>acl:owner</code> are <a href="../../../http-api/#document-metadata">automatically managed</a> by LinkedDataHub.</p>
-        <pre>@prefix dh: &lt;https://www.w3.org/ns/ldt/document-hierarchy#&gt; .
-@prefix ldh: &lt;https://w3id.org/atomgraph/linkeddatahub#&gt; .
-@prefix rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; .
-@prefix dct: &lt;http://purl.org/dc/terms/&gt; .
-@prefix xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt; .
-@prefix sioc: &lt;http://rdfs.org/sioc/ns#&gt; .
-@prefix acl: &lt;http://www.w3.org/ns/auth/acl#&gt; .
-
-&lt;https://localhost:4443/concepts/&gt;
-    a       dh:Container ;
-    rdf:_1  &lt;https://localhost:4443/concepts/#select-children&gt; ;
-    dct:created "2025-06-02T19:12:26.533Z"^^xsd:dateTime ;
-    dct:creator &lt;https://localhost:4443/admin/acl/agents/865c2431-8436-4ae8-b300-2a531a013cd0/#this&gt; ;
-    dct:title "Concepts" ;
-    sioc:has_parent &lt;https://localhost:4443/concepts/&gt; ;
-    acl:owner &lt;https://localhost:4443/admin/acl/agents/865c2431-8436-4ae8-b300-2a531a013cd0/#this&gt; .
-
-&lt;https://localhost:4443/concepts/#select-children&gt;
-    a       ldh:Object ;
-    rdf:value ldh:ChildrenView .</pre>
-    </div>
-    <div>
-        <h2 id="management">Management</h2>
-        <div>
-            <h3 id="management-ui"><a href="../../../user-interface/">User interface</a></h3>
-            <table class="table table-striped">
-                <thead>
-                    <tr>
-                        <th>Action</th>
-                        <th>Description</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th>Create</th>
-                        <td>Create a new child document by clicking the <span class="btn btn-primary create-action">Create</span> button on the left of the navbar. Fill out the form. Click <span class="btn btn-primary btn-save">Save</span>.</td>
-                    </tr>
-                    <tr>
-                        <th>Update</th>
-                        <td>Open the current document editing form by clicking the <span class="btn btn-edit">Edit</span> button in the middle section of the navbar. Make changes. Click <span class="btn btn-primary btn-save">Save</span>.</td>
-                    </tr>
-                    <tr>
-                        <th>Delete</th>
-                        <td>Delete the current document by clicking the <span class="btn btn-delete">Delete</span> in the action bar (the right section of the navbar)</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <div>
-            <h3 id="management-cli"><a href="../../../command-line-interface/">Command line interface</a></h3>
-            <table class="table table-striped">
-                <thead>
-                    <tr>
-                        <th>Action</th>
-                        <th>CLI script</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th>Create</th>
-                        <td><a href="../../../command-line-interface/#scripts"><samp>create-container.sh</samp></a></td>
-                    </tr>
-                    <tr>
-                        <th>Update</th>
-                        <td><a href="../../../command-line-interface/#scripts"><samp>put.sh</samp></a></td>
-                    </tr>
-                    <tr>
-                        <th>Delete</th>
-                        <td><a href="../../../command-line-interface/#scripts"><samp>delete.sh</samp></a></td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/data-model/documents/items.ttl b/docs/reference/data-model/documents/items.ttl
deleted file mode 100644
index 4403901a..00000000
--- a/docs/reference/data-model/documents/items.ttl
+++ /dev/null
@@ -1,98 +0,0 @@
-@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix dct:    <http://purl.org/dc/terms/> .
-  
-<> a dh:Item ;
-    dct:title "Items" ;
-    dct:description "Items are analogous to files in a filesystem" ;
-    rdf:_1 <#content> .
-
-<#content> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Items are analogous to files in a filesystem</p>
-    <div>
-        <h2 id="rdf-serialization">RDF serialization</h2>
-        <p>Document properties such as <code>sioc:has_container</code>, <code>dct:created</code>, <code>dct:modified</code>, <code>acl:owner</code> are <a href="../../../http-api/#document-metadata">automatically managed</a> by LinkedDataHub.</p>
-        <pre>@prefix dh: &lt;https://www.w3.org/ns/ldt/document-hierarchy#&gt; .
-@prefix ldh: &lt;https://w3id.org/atomgraph/linkeddatahub#&gt; .
-@prefix ac: &lt;https://w3id.org/atomgraph/client#&gt; .
-@prefix rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; .
-@prefix dct: &lt;http://purl.org/dc/terms/&gt; .
-@prefix xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt; .
-@prefix sioc: &lt;http://rdfs.org/sioc/ns#&gt; .
-@prefix acl: &lt;http://www.w3.org/ns/auth/acl#&gt; .
-
-&lt;https://localhost:4443/concepts/example/&gt;
-    a       dh:Item ;
-    rdf:_1  &lt;https://localhost:4443/concepts/example/#xhtml-block&gt; ;
-    rdf:_2  &lt;https://localhost:4443/concepts/example/#object-block&gt; ;
-    dct:created "2025-06-02T19:49:48.126Z"^^xsd:dateTime ;
-    dct:creator &lt;https://localhost:4443/admin/acl/agents/865c2431-8436-4ae8-b300-2a531a013cd0/#this&gt; ;
-    dct:title "Example" ;
-    sioc:has_container &lt;https://localhost:4443/concepts/&gt; ;
-    acl:owner &lt;https://localhost:4443/admin/acl/agents/865c2431-8436-4ae8-b300-2a531a013cd0/#this&gt; .
-    
-&lt;https://localhost:4443/concepts/example/#xhtml-block&gt;
-    a       ldh:XHTML ;
-    rdf:value "&lt;div xmlns=\\\"http://www.w3.org/1999/xhtml\\\"&gt;\\n&lt;p&gt;A paragraph&lt;/p&gt;\\n&lt;/div&gt;"^^rdf:XMLLiteral .
-
-&lt;https://localhost:4443/concepts/example/#object-block&gt;
-    a       ldh:Object ;
-    rdf:value &lt;http://dbpedia.org/resource/Copenhagen&gt; ;
-    ac:mode  ac:MapMode .</pre>    
-    </div>
-    <div>
-        <h2 id="management">Management</h2>
-        <div>
-            <h3 id="management-ui"><a href="../../../user-interface/">User interface</a></h3>
-            <table class="table table-striped">
-                <thead>
-                    <tr>
-                        <th>Action</th>
-                        <th>Description</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th>Create</th>
-                        <td>Create a new child document by clicking the <span class="btn btn-primary create-action">Create</span> button on the left of the navbar. Fill out the form. Click <span class="btn btn-primary btn-save">Save</span>.</td>
-                    </tr>
-                    <tr>
-                        <th>Update</th>
-                        <td>Open the current document editing form by clicking the <span class="btn btn-edit">Edit</span> button in the middle section of the navbar. Make changes. Click <span class="btn btn-primary btn-save">Save</span>.</td>
-                    </tr>
-                    <tr>
-                        <th>Delete</th>
-                        <td>Delete the current document by clicking the <span class="btn btn-delete">Delete</span> in the action bar (the right section of the navbar)</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <div>
-            <h3 id="management-cli"><a href="../../../command-line-interface/">Command line interface</a></h3>
-            <table class="table table-striped">
-                <thead>
-                    <tr>
-                        <th>Action</th>
-                        <th>CLI script</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th>Create</th>
-                        <td><a href="../../../command-line-interface/#scripts"><samp>create-item.sh</samp></a></td>
-                    </tr>
-                    <tr>
-                        <th>Update</th>
-                        <td><a href="../../../command-line-interface/#scripts"><samp>put.sh</samp></a></td>
-                    </tr>
-                    <tr>
-                        <th>Delete</th>
-                        <td><a href="../../../command-line-interface/#scripts"><samp>delete.sh</samp></a></td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/data-model/resources-1.webp b/docs/reference/data-model/resources-1.webp
new file mode 100644
index 00000000..d8cfdbd5
Binary files /dev/null and b/docs/reference/data-model/resources-1.webp differ
diff --git a/docs/reference/data-model/resources-2.webp b/docs/reference/data-model/resources-2.webp
new file mode 100644
index 00000000..133caf37
Binary files /dev/null and b/docs/reference/data-model/resources-2.webp differ
diff --git a/docs/reference/data-model/resources-3.webp b/docs/reference/data-model/resources-3.webp
new file mode 100644
index 00000000..c7225c79
Binary files /dev/null and b/docs/reference/data-model/resources-3.webp differ
diff --git a/docs/reference/data-model/resources-4.webp b/docs/reference/data-model/resources-4.webp
new file mode 100644
index 00000000..9df571cf
Binary files /dev/null and b/docs/reference/data-model/resources-4.webp differ
diff --git a/docs/reference/data-model/resources.ttl b/docs/reference/data-model/resources.ttl
index 16e37fee..e1a61d35 100644
--- a/docs/reference/data-model/resources.ttl
+++ b/docs/reference/data-model/resources.ttl
@@ -1,80 +1,91 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-  
-<> a dh:Container ;
+@prefix sp:     <http://spinrdf.org/sp#> .
+@prefix sd:     <http://www.w3.org/ns/sparql-service-description#> .
+
+<> a dh:Item ;
     dct:title "Resources" ;
     dct:description "RDF resources and their management" ;
     rdf:_1 <#content> ;
-    rdf:_2 <#select-children> .
+    rdf:_2 <#live-example> ;
+    rdf:_3 <#northwind-query-block> ;
+    rdf:_4 <#management> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">RDF resources and their management</p>
+    <p class="ldh-body-lg">RDF resources and their management</p>
     <div>
         <p>Within <a href="../documents/">documents</a>, users can create RDF resources, i.e. instances of both built-in and user-defined RDF classes.</p>
         <p>Built-in classes are defined in <a href="../../administration/ontologies/#ontologies">system ontologies</a> while user-defined classes are defined in user ontologies.</p>
         <div>
             <h2 id="user-defined-classes">User-defined classes</h2>
-            <p>TBD</p>
+            <p>User-defined classes live in the dataspace's namespace ontology, which is managed in the <a href="../../dataspace/#admin">admin dataspace</a>. A class becomes creatable in the UI once it has a <a href="../../administration/ontologies/#constructors">constructor</a>: it then appears in the <span class="ac-btn in-primary ap-solid sz-md">Create</span> dropdown alongside the built-in classes, and its instances are created and edited using the same forms. See <a href="../../../user-guide/change-model/">Change the model</a> for a walkthrough of defining classes, constructors and constraints.</p>
         </div>
         <div>
             <h2 id="built-in-classes">Built-in classes</h2>
             <p>LinkedDataHub's built-in <a href="../../administration/ontologies/#classes">classes</a> have pre-defined <a href="../../administration/ontologies/#constructors">constructors</a>, <a href="../../administration/ontologies/#constraints">constraints</a> and often a customized UI rendering (implemented by <a href="../../stylesheets/#overriding-templates">overriding generic XSLT templates</a> with type-specific templates) as well, for example a query editor or a chart.</p>
-            <table class="table table-striped">
+            <p>The table lists the built-in classes creatable from the <span class="ac-btn in-primary ap-solid sz-md">Create</span> dropdown; the two content block classes, <code>ldh:XHTML</code> and <code>ldh:Object</code>, are documented on the <a href="../blocks/">Content blocks</a> page.</p>
+            <table>
+                <caption class="ac-vh">Built-in classes by type</caption>
                 <thead>
                     <tr>
-                        <th>Type</th>
-                        <th>Class</th>
-                        <th>Description</th>
+                        <th scope="col">Type</th>
+                        <th scope="col">Class</th>
+                        <th scope="col">Description</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
                         <td><samp>ASK</samp></td>
                         <td><code>sp:Ask</code></td>
-                        <td><a href="queries/">SPARQL <code>ASK</code> query</a></td>
+                        <td><a href="#queries">SPARQL <code>ASK</code> query</a></td>
                     </tr>
                     <tr>
-                        <td><samp>Application</samp></td>
-                        <td><code>ldh:Application</code></td>
-                        <td><a href="../../dataspace/#applications">Remote LinkedDataHub application</a></td>
+                        <td><samp>Dataspace</samp></td>
+                        <td><code>lds:Dataspace</code></td>
+                        <td><a href="../../dataspace/#dataspaces">Remote LinkedDataHub dataspace</a></td>
                     </tr>
                     <tr>
                         <td><samp>CONSTRUCT</samp></td>
                         <td><code>sp:Construct</code></td>
-                        <td><a href="queries/">SPARQL <code>CONSTRUCT</code> query</a></td>
+                        <td><a href="#queries">SPARQL <code>CONSTRUCT</code> query</a></td>
                     </tr>
                     <tr>
                         <td><samp>CSV import</samp></td>
                         <td><code>ldh:CSVImport</code></td>
-                        <td>Async <a href="../../imports/csv/">CSV data import</a></td>
+                        <td>Asynchronous <a href="../../imports/csv/">CSV data import</a></td>
+                    </tr>
+                    <tr>
+                        <td><samp>DESCRIBE</samp></td>
+                        <td><code>sp:Describe</code></td>
+                        <td><a href="#queries">SPARQL <code>DESCRIBE</code> query</a></td>
                     </tr>
                     <tr>
                         <td><samp>File</samp></td>
                         <td><code>nfo:FileDataObject</code></td>
-                        <td>File to upload</td>
+                        <td>An uploaded file, stored <a href="../../dataset/#hierarchical-uris">content-addressed</a> under <samp>uploads/</samp></td>
                     </tr>
                     <tr>
                         <td><samp>Graph chart</samp></td>
                         <td><code>ldh:GraphChart</code></td>
-                        <td><a href="charts/">Chart based on <code>CONSTRUCT</code>/<code>DESCRIBE</code> query results</a></td>
+                        <td><a href="#charts">Chart based on <code>CONSTRUCT</code>/<code>DESCRIBE</code> query results</a></td>
                     </tr>
                     <tr>
                         <td><samp>RDF import</samp></td>
                         <td><code>ldh:RDFImport</code></td>
-                        <td>Async <a href="../../imports/rdf/">RDF data import</a></td>
+                        <td>Asynchronous <a href="../../imports/rdf/">RDF data import</a></td>
                     </tr>
                     <tr>
                         <td><samp>Result set chart</samp></td>
                         <td><code>ldh:ResultSetChart</code></td>
-                        <td><a href="charts/">Chart based on <code>SELECT</code> query results</a></td>
+                        <td><a href="#charts">Chart based on <code>SELECT</code> query results</a></td>
                     </tr>
                     <tr>
                         <td><samp>Select</samp></td>
                         <td><code>sp:Select</code></td>
-                        <td><a href="queries/">SPARQL <code>SELECT</code> query</a></td>
+                        <td><a href="#queries">SPARQL <code>SELECT</code> query</a></td>
                     </tr>
                     <tr>
                         <td><samp>Service</samp></td>
@@ -84,113 +95,324 @@
                     <tr>
                         <td><samp>View</samp></td>
                         <td><code>ldh:View</code></td>
-                        <td><a href="views/">View based on <code>SELECT</code> query results</a></td>
+                        <td><a href="#views">View based on <code>SELECT</code> query results</a></td>
+                    </tr>
+                </tbody>
+            </table>
+            <p>Resources that have customized UIs (such as queries, views, charts) are documented in more detail below.</p>
+        </div>
+    </div>
+    <div>
+        <h2 id="queries">Queries</h2>
+        <img alt="A query block with the SPARQL editor" src="/uploads/0931818c26218525110876d68c83caf3758754b9"></img>
+        <p>Queries are SPARQL 1.1 query strings that can be executed interactively. A query may name the SPARQL
+        service it executes against; otherwise it runs against the dataspace's own service.</p>
+        <p>A query is a resource typed by its SPARQL form, carrying the query string as <code>sp:text</code>:</p>
+        <pre>&lt;#select-categories-query&gt; a sp:Select ;
+    dct:title "Select categories" ;
+    sp:text '''PREFIX  schema: &lt;https://schema.org/&gt;
+
+SELECT DISTINCT  ?category
+WHERE
+  { GRAPH ?doc
+      { ?category  a           schema:ProductGroup ;
+                  schema:name  ?categoryName
+      }
+  }
+ORDER BY ?categoryName''' .</pre>
+        <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories.ttl" target="_blank">categories.ttl</a> · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/categories/" target="_blank">/categories/</a></p>
+        <p>It is only possible to save valid SPARQL 1.1 query strings. SPARQL updates are currently not supported.</p>
+    </div>
+    <div>
+        <h2 id="charts">Charts</h2>
+        <img alt="A chart block rendering SPARQL results" src="/uploads/5ef380cf4b9b4f0f451b6abe96516e4fd50fd530"></img>
+        <p>Charts can render both types of SPARQL results:</p>
+        <ul>
+            <li>tabular <code>SELECT</code> results (<code>ldh:ResultSetChart</code>)</li>
+            <li>graph results of <code>DESCRIBE</code> and <code>CONSTRUCT</code> (<code>ldh:GraphChart</code>)</li>
+        </ul>
+        <p>A chart resource is easily confused with the chart layout mode in <a href="#views">views</a>. The layout mode renders
+        view results as a chart on the fly, while a chart resource additionally stores the chart type as well as the category and
+        series information: variable names in the case of tabular results, and property URIs in the case of graph results.</p>
+        <div>
+            <h3 id="chart-vocabulary">RDF vocabulary</h3>
+            <p>A chart references its query with <code>spin:query</code> and describes its rendering with the following properties:</p>
+            <table>
+                <caption class="ac-vh">Vocabulary properties and what they apply to</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Property</th>
+                        <th scope="col">Applies to</th>
+                        <th scope="col">Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><code>ldh:chartType</code></td>
+                        <td>both</td>
+                        <td>One of <code>ac:Table</code>, <code>ac:LineChart</code>, <code>ac:BarChart</code>, <code>ac:ScatterChart</code>, <code>ac:Timeline</code></td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:categoryVarName</code></td>
+                        <td><code>ldh:ResultSetChart</code></td>
+                        <td>Name of the <code>SELECT</code> variable that provides the category values</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:seriesVarName</code></td>
+                        <td><code>ldh:ResultSetChart</code></td>
+                        <td>Name(s) of the <code>SELECT</code> variable(s) that provide the series values</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:categoryProperty</code></td>
+                        <td><code>ldh:GraphChart</code></td>
+                        <td>URI of the property that provides the category values</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:seriesProperty</code></td>
+                        <td><code>ldh:GraphChart</code></td>
+                        <td>URI(s) of the property(ies) that provide the series values</td>
                     </tr>
                 </tbody>
             </table>
-            <p>Resources that have customized UIs (such as queries, views, charts) are documented in more detail.</p>
-            <div>
-                <h2 id="management">Management</h2>
-                <div>
-                    <h3><a href="../../user-interface/">User interface</a></h3>
-                    <p>Resources can only be managed when the <a href="../../user-interface/#layout-modes" target="_blank"><samp>Properties</samp> layout mode</a> is active.</p>
-                    <table class="table table-striped" id="actions">
-                        <thead>
-                            <tr>
-                                <th>Action</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <th>Create</th>
-                                <td>Click the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown on the bottom of the page. Fill out the fields in the form that appears. Click <span class="btn btn-primary btn-save">Save</span>.</td>
-                            </tr>
-                            <tr>
-                                <th>Update</th>
-                                <td>Click the <span class="btn btn-edit"></span> button in the top-right corner of the resource header (in the middle column of the content). Make changes in the form that appears. Click <span class="btn btn-primary btn-save">Save</span>.</td>
-                            </tr>
-                            <tr>
-                                <th>Delete</th>
-                                <td>Click the <span class="btn btn-edit"></span> button in the top-right corner of the resource header. Click the <span class="btn btn-remove-resource"></span> button to delete the block.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div>
-                    <h3><a href="../../command-line-interface/">Command line interface</a></h3>
-                    <p>The following actions can also be performed using the <a href="../../command-line-interface/" target="_blank">command line interface</a>.</p>
-                    <table class="table table-striped" id="actions">
-                        <thead>
-                            <tr>
-                                <th>Type</th>
-                                <th>Action</th>
-                                <th>CLI script</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td><samp>ASK</samp></td>
-                                <th>Create</th>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td><samp>Application</samp></td>
-                                <th>Create</th>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td><samp>CONSTRUCT</samp></td>
-                                <th>Create</th>
-                                <td><a href="../../command-line-interface/#scripts"><samp>admin/ontologies/add-construct.sh</samp></a></td>
-                            </tr>
-                            <tr>
-                                <td><samp>CSV import</samp></td>
-                                <th>Create</th>
-                                <td><a href="../../command-line-interface/#scripts"><samp>imports/add-csv-import.sh</samp></a></td>
-                            </tr>
-                            <tr>
-                                <td><samp>File</samp></td>
-                                <th>Create</th>
-                                <td><a href="../../command-line-interface/#scripts"><samp>add-file.sh</samp></a></td>
-                            </tr>
-                            <tr>
-                                <td><samp>Graph chart</samp></td>
-                                <th>Create</th>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td><samp>RDF import</samp></td>
-                                <th>Create</th>
-                                <td><a href="../../command-line-interface/#scripts"><samp>imports/add-rdf-import.sh</samp></a></td>
-                            </tr>
-                            <tr>
-                                <td><samp>Result set chart</samp></td>
-                                <th>Create</th>
-                                <td><a href="../../command-line-interface/#scripts"><samp>add-result-set-chart.sh</samp></a></td>
-                            </tr>
-                            <tr>
-                                <td><samp>Select</samp></td>
-                                <th>Create</th>
-                                <td><a href="../../command-line-interface/#scripts"><samp>add-select.sh</samp></a></td>
-                            </tr>
-                            <tr>
-                                <td><samp>Service</samp></td>
-                                <th>Create</th>
-                                <td><a href="../../command-line-interface/#scripts"><samp>add-generic-service.sh</samp></a></td>
-                            </tr>
-                            <tr>
-                                <td><samp>View</samp></td>
-                                <th>Create</th>
-                                <td><a href="../../command-line-interface/#scripts"><samp>add-view.sh</samp></a></td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
+        </div>
+        <p>The default chart type is the table. Other chart types might not apply to all result data; for example, a
+        scatter chart needs numeric or datetime values for both category and series.</p>
+        <p>A complete chart is a chain of three resources — the query, the chart description, and an
+            <a href="../blocks/#object-blocks">object block</a> that places it on a document:</p>
+        <pre>&lt;#category-revenue-query&gt; a sp:Select ;
+    dct:title "Category revenue" ;
+    sp:text '''PREFIX schema: &lt;https://schema.org/&gt;
+
+SELECT ?categoryName (SUM(?sale) AS ?revenue)
+WHERE {
+    GRAPH ?orderGraph {
+        ?order schema:orderedItem ?orderItem .
+        ?orderItem schema:orderedItem ?product ;
+                   schema:price ?sale .
+    }
+    GRAPH ?productGraph {
+        ?product schema:category ?category .
+    }
+    GRAPH ?categoryGraph {
+        ?category schema:name ?categoryName .
+    }
+}
+GROUP BY ?category ?categoryName
+ORDER BY DESC(?revenue)''' .
+
+&lt;#category-revenue&gt; a ldh:ResultSetChart ;
+    dct:title "Revenue by category" ;
+    spin:query &lt;#category-revenue-query&gt; ;
+    ldh:chartType &lt;https://w3id.org/atomgraph/client#BarChart&gt; ;
+    ldh:categoryVarName "categoryName" ;
+    ldh:seriesVarName "revenue" .
+
+&lt;#category-revenue-block&gt; a ldh:Object ;
+    dct:title "Revenue by category" ;
+    rdf:value &lt;#category-revenue&gt; .</pre>
+        <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories.ttl" target="_blank">categories.ttl</a> · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/categories/" target="_blank">/categories/</a></p>
+        <p>Multiple <code>ldh:seriesVarName</code> values plot one series per named result variable — see the
+            <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/orders.ttl" target="_blank">demo's revenue-by-carrier chart</a>,
+            which pivots three carriers into three series with conditional aggregation.</p>
+    </div>
+    <div>
+        <h2 id="views">Views</h2>
+        <img alt="A view block with paginated results" src="/uploads/83d04d55088908b1932e777348ef5cd01f160148"></img>
+        <p>A view renders the results of a SPARQL <code>SELECT</code> query as an interactive, paginated and optionally ordered list.
+        The UI renders the descriptions of the resources selected by the result set, rather than the tabular result itself.
+        That is achieved by on-the-fly SPARQL query rewriting: the <code>SELECT</code> is wrapped into
+        a <code>DESCRIBE</code> query; <code>DESCRIBE</code> reuses the same variables from the <code>SELECT</code> projection.
+        <em>This will not work for all <code>SELECT</code> queries.</em></p>
+        <p>To render paginated lists of resources, traditional applications would normally have a dedicated API endpoint that
+        supports pagination, ordering etc. In LinkedDataHub, views achieve the same functionality by simply building the
+        SPARQL query string on the client-side. A view is therefore a client-side counterpart of a container: it produces a
+        listing without a server-side endpoint.</p>
+        <p>A view references its <a href="#queries">query</a> and optionally fixes a layout mode:</p>
+        <pre>&lt;#select-categories-view&gt; a ldh:View ;
+    spin:query &lt;#select-categories-query&gt; ;
+    ac:mode &lt;https://w3id.org/atomgraph/client#GridMode&gt; .</pre>
+        <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories.ttl" target="_blank">categories.ttl</a> · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/categories/" target="_blank">/categories/</a></p>
+        <p>Views can be rendered in multiple layout modes: properties, list, grid, table, map, chart, and graph. They also show
+        the total number of results and allow result ordering by property. In the table mode, columns can be sorted by clicking
+        their headers; the sort order follows each column's datatype.</p>
+        <div>
+            <h3 id="projecting-variables">Projecting variables</h3>
+            <p>Because the <code>SELECT</code> is rewritten into a <code>DESCRIBE</code> over its projected variables, a view can only render terms that the triplestore is able to describe:</p>
+            <ul>
+                <li>Project <em>resources</em> (IRIs) that exist in the dataset — their labels, images and links are resolved from each resource's own description. Projecting <em>literals</em> (a <code>?label</code>, a <code>?date</code>, or any computed value) describes nothing, so the view renders empty.</li>
+                <li>Project IRIs that are stored <em>locally</em>. An IRI that only occurs as an object but is not itself described in the dataset — for example an external image URL — contributes no triples.</li>
+                <li>Project a <em>single</em> entity type. Projecting several resource variables of different types blends their descriptions into one result set, which rarely renders coherently; select the one type you want to list and reach the related resources through their properties instead.</li>
+            </ul>
+            <p>The query that drives the categories grid above projects the category resource, so the view renders the category documents:</p>
+            <pre>SELECT DISTINCT ?category
+WHERE {
+    GRAPH ?doc {
+        ?category
+            a schema:ProductGroup ;
+            schema:name ?categoryName
+    }
+}</pre>
+            <p>This query <em>looks</em> equivalent, but it projects the name literal instead of the category resource — so it describes nothing and renders an empty view:</p>
+            <pre>SELECT DISTINCT ?categoryName
+WHERE {
+    GRAPH ?doc {
+        ?category
+            a schema:ProductGroup ;
+            schema:name ?categoryName
+    }
+}</pre>
+        </div>
+        <div>
+            <h3 id="view-layout-modes">Layout modes</h3>
+            <p>View results are rendered in the view's own set of layout modes — properties, list, grid, table, map, chart, and graph — a larger set than the <a href="../../user-interface/#layout-modes">document layout modes</a>.</p>
+        </div>
+        <div>
+            <h3 id="inline-creation">Inline creation</h3>
+            <p>A view attached to a property in the <a href="../../administration/packages/#property-views">dataspace's ontology</a> renders a <span class="ac-btn in-primary ap-solid sz-md">Create</span> button in its header, so a view can double as an entry point for the data it lists. The class to construct is inferred from the attaching property: its <code>rdfs:range</code> for a forward <code>ldh:view</code>, its <code>rdfs:domain</code> for an inverse <code>ldh:inverseView</code>. A property whose range is not a named class — an <code>owl:unionOf</code> list, say — gets no button, because there is nothing to construct.</p>
+            <p>Where the new instance is stored is not declared anywhere. LinkedDataHub works it out from the view's own results: a second query, derived from the view's <code>SELECT</code> pattern with <code>LIMIT</code>, <code>OFFSET</code> and <code>ORDER BY</code> removed, asks which containers hold the documents that describe the existing solutions. A view is a projection and its rows are its solutions, so creating a row means making a new solution appear in that projection — and the existing solutions already say where their descriptions live.</p>
+            <ul>
+                <li><em>Exactly one container</em> — the button renders and targets it.</li>
+                <li><em>No container</em>, because the result set is empty — no button. There is nothing to generalise from, so the first instance of a kind is created through its container the usual way.</li>
+                <li><em>More than one container</em>, because the results span several — no button. Nothing in the data says where a new row belongs, and deciding by majority would be placement nobody stated.</li>
+            </ul>
+            <p>The question is put to the whole result set rather than to the page on screen, so the destination cannot depend on which page the reader happens to be looking at. The determined container is then checked for <code>acl:Write</code> access, which is why the button appears a moment after the rest of the view header; a forward view also writes the linking triple into the current document, so it needs write access there as well.</p>
+            <p>A view with <code>ldh:showWhenEmpty</code> set to <code>false</code> is hidden while its query returns no results — the
+                <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/admin/model/ns.ttl" target="_blank">demo's property-attached views</a>
+                use it so "Orders from this customer" only appears on customers that have orders.</p>
+            <pre>&lt;#select-products-view&gt; a ldh:View ;
+    spin:query &lt;#select-products-query&gt; ;
+    ac:mode &lt;https://w3id.org/atomgraph/client#TableMode&gt; ;
+    ldh:showWhenEmpty false .</pre>
+        </div>
+        <div>
+            <h3 id="faceted-search">Faceted search</h3>
+            <p>Views provide faceted search in the toolbar at the top of the view, filtering the result set. The toolbar renders one dropdown pill per facetable property; opening a pill loads that property's values together with their result counts, and checking a value filters the results. Applying or removing a filter restarts paging from the first page.</p>
+            <p>By default the facets are generic and inferred from the triple patterns of the SPARQL <code>SELECT</code> query used by the view. They can be <a href="../../stylesheets/#overriding-templates">customized using XSLT</a>.</p>
+        </div>
+        <div>
+            <h3 id="parallax">Parallax navigation</h3>
+            <img alt="Parallax navigation jumping from a result set to a related one" src="/uploads/f1082691b9775720f8fc01142edc7e24fa7b778d"></img>
+            <p>Parallax is an unusual navigation approach that suits graph data particularly well. It allows jumping from a result set to a related result set by following an RDF property. The available pivots render as a row of chips directly under the view toolbar, one chip per property linking the result set to the rest of the graph; the row stays hidden while there are no pivots. Parallax navigates in both directions: a chip with a forward arrow follows a property of the results onto its objects, a chip with a backward arrow follows a property pointing at the results onto its subjects. The pivots are discovered by querying the whole result set, so they cover results beyond the current page.</p>
+            <p>Clicking a chip pivots the view onto the related result set and restarts paging from the first page. The applied steps appear in the toolbar next to the facets as removable chips reading <samp>via</samp> (forward) or <samp>linked by</samp> (backward); removing one rewinds the view to that step. Parallax works in
+                combination with faceted search which can be used to filter the initial result set.</p>
+            <p>For example, facets can be used to filter a set of products that belong to a certain category, and then parallax can be used to jump to a set of companies that provide those products, and then further on to
+                a set of representatives of those companies.</p>
         </div>
     </div>
 </div>"""^^rdf:XMLLiteral .
 
-<#select-children> a ldh:Object ;
-    rdf:value ldh:ChildrenView .
+<#live-example> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+    <div>
+        <h2 id="live-example">Live example</h2>
+        <p>The block below is not a code snippet — it is an actual query block embedded in this document, executing against the
+            <a href="https://northwind-traders.demo.linkeddatahub.com/" target="_blank">Northwind Traders dataspace</a>'s SPARQL endpoint. The query, the
+            service it runs against, and the block that places it here are three plain RDF resources in this very document.</p>
+    </div>
+</div>"""^^rdf:XMLLiteral .
+
+<#northwind-query-block> a ldh:Object ;
+    dct:title "Query another dataspace" ;
+    rdf:value <#northwind-query> .
+
+<#northwind-query> a sp:Select ;
+    dct:title "Sample of the Northwind Traders dataset" ;
+    sp:text """SELECT *
+WHERE {
+    GRAPH ?g {
+        ?s ?p ?o
+    }
+}
+LIMIT 10""" ;
+    ldh:service <#northwind-service> .
+
+<#northwind-service> a sd:Service ;
+    dct:title "Northwind Traders SPARQL service" ;
+    sd:endpoint <https://northwind-traders.demo.linkeddatahub.com/sparql> ;
+    sd:supportedLanguage sd:SPARQL11Query .
+
+<#management> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+    <div>
+        <h2 id="management">Management</h2>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
+            <p>Resources can only be managed when the <a href="../../user-interface/#layout-modes" target="_blank">Properties layout mode</a> is active.</p>
+            <table>
+                <caption class="ac-vh">Resource management actions</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Action</th>
+                        <th scope="col">Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th scope="row">Create</th>
+                        <td>Click the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown at the bottom of the page. Fill out the fields in the form that appears. Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span>.</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Update</th>
+                        <td>Click the <span class="ac-iconbtn sz-sm in-neutral ap-ghost"><span aria-hidden="true" class="msi sm">edit</span></span> button in the top-right corner of the resource block (it appears when you move the mouse close to that corner). Make changes in the form that appears. Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span>.</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Delete</th>
+                        <td>Click the <span class="ac-iconbtn sz-sm in-neutral ap-ghost"><span aria-hidden="true" class="msi sm">edit</span></span> button in the top-right corner of the resource block. Click the <span class="ac-iconbtn sz-sm in-destructive ap-ghost"><span aria-hidden="true" class="msi sm">close</span></span> button to delete the resource.</td>
+                    </tr>
+                </tbody>
+            </table>
+            </div>
+            <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
+            <p>The following resource types can be created using the <a href="../../command-line-interface/" target="_blank">command line interface</a>. Any resource can be updated or deleted with <a href="../../command-line-interface/#commands"><samp>ldh patch</samp></a>, which applies a SPARQL update to the resource's document.</p>
+            <table>
+                <caption class="ac-vh">Resource types and their CLI commands</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Type</th>
+                        <th scope="col">CLI command</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th scope="row"><samp>CONSTRUCT</samp></th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh add construct</samp></a></td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><samp>CSV import</samp></th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh add csv-import</samp></a></td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><samp>File</samp></th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh add file</samp></a></td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><samp>RDF import</samp></th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh add rdf-import</samp></a></td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><samp>Result set chart</samp></th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh add result-set-chart</samp></a></td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><samp>Select</samp></th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh add select</samp></a></td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><samp>Service</samp></th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh add generic-service</samp></a></td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><samp>View</samp></th>
+                        <td><a href="../../command-line-interface/#commands"><samp>ldh add view</samp></a></td>
+                    </tr>
+                </tbody>
+            </table>
+            </div>
+        </div>
+    </div>
+    <p class="ldh-body-lg">To query data and create resources step-by-step, follow the <a href="../../../user-guide/query-data/">Query data</a> and <a href="../../../user-guide/create-data/create-resources/">Create resources</a> guides</p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/reference/data-model/resources/charts.ttl b/docs/reference/data-model/resources/charts.ttl
deleted file mode 100644
index d87d271e..00000000
--- a/docs/reference/data-model/resources/charts.ttl
+++ /dev/null
@@ -1,27 +0,0 @@
-@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix dct:    <http://purl.org/dc/terms/> .
-  
-<> a dh:Item ;
-    dct:title "Charts" ;
-    dct:description "Interactive charts based on SPARQL queries" ;
-    rdf:_1 <#content> .
-
-<#content> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Interactive charts based on SPARQL queries</p>
-    <p>
-        <img alt="Chart" src="../../../../uploads/fde3b3b56d1ff518921f0a604cb45bbf0ae87650"></img>
-    </p>
-    <p>Charts can render results both types of SPARQL results:</p>
-    <ul>
-        <li>tabular <code>SELECT</code> results</li>
-        <li>graph results of <code>DESCRIBE</code> and <code>CONSTRUCT</code></li>
-    </ul>
-    <p>In that sense they are similar to the chart layout mode in 
-    <a href="../views/">views</a>, but charts also store the chart type as well as the category and series information: variable names in the
-    case of tabular results, and property URIs in the case of graph results.</p>
-    <p>The default chart type is the table. Other chart types might not apply to all result data; for example a
-    scatter chart will need a numeric or datetime values for both category and series.</p>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/data-model/resources/charts/chart-block.png b/docs/reference/data-model/resources/charts/chart-block.png
deleted file mode 100644
index 2038bfc1..00000000
Binary files a/docs/reference/data-model/resources/charts/chart-block.png and /dev/null differ
diff --git a/docs/reference/data-model/resources/queries.ttl b/docs/reference/data-model/resources/queries.ttl
deleted file mode 100644
index 3453b0ca..00000000
--- a/docs/reference/data-model/resources/queries.ttl
+++ /dev/null
@@ -1,20 +0,0 @@
-@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix dct:    <http://purl.org/dc/terms/> .
-  
-<> a dh:Item ;
-    dct:title "Queries" ;
-    dct:description "Interactive SPARQL queries" ;
-    rdf:_1 <#content> .
-
-<#content> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Interactive SPARQL queries</p>
-    <p>
-        <img alt="Query" src="../../../../uploads/cbe31147634bb2be12f1a4f60ff56f690a33542e"></img>
-    </p>
-    <p>Queries are SPARQL 1.1 query strings that can be executed interactively. They can be defined with a SPARQL 
-    service that they execute against, otherwise they execute against the application's own SPARQL service.</p>
-    <p>It is only possible to save valid SPARQL 1.1 query strings. SPARQL updates are currently not supported.</p>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/data-model/resources/queries/query-block.png b/docs/reference/data-model/resources/queries/query-block.png
deleted file mode 100644
index 557fe061..00000000
Binary files a/docs/reference/data-model/resources/queries/query-block.png and /dev/null differ
diff --git a/docs/reference/data-model/resources/views.ttl b/docs/reference/data-model/resources/views.ttl
deleted file mode 100644
index 6236c911..00000000
--- a/docs/reference/data-model/resources/views.ttl
+++ /dev/null
@@ -1,73 +0,0 @@
-@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix dct:    <http://purl.org/dc/terms/> .
-  
-<> a dh:Item ;
-    dct:title "Views" ;
-    dct:description "Paginated views based on SPARQL queries" ;
-    rdf:_1 <#content> .
-
-<#content> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Paginated views based on SPARQL queries</p>
-    <p>
-        <img alt="View" src="../../../../uploads/97792fb1084524c89c92b6f99b070ac1b283d4f6"></img>
-    </p>
-    <p>Views are interactive, paginated, and optionally ordered results of a SPARQL <code>SELECT</code> result set.
-    What is rendered in the UI is not directly the tabular result however, but descriptions of the resources selected
-    by the result set. That is achieved by on-the-fly SPARQL query rewriting: the <code>SELECT</code> is wrapped into
-    a <code>DESCRIBE</code> query; <code>DESCRIBE</code> reuses the same variables from the <code>SELECT</code> projection.
-    <em>This will not work for all <code>SELECT</code> queries.</em></p>
-    <p>To render paginated lists of resources, legacy applications would normally have a dedicated API endpoint that
-    supports pagination, ordering etc. In LinkedDataHub, views achieve the same functionality by simply building the
-    SPARQL query string on the client-side. Therefore views can be seen as client-side "containers".</p>
-    <p>Views can be rendered in multiple layout modes: properties, list, grid, table, map, chart, and graph. They also show
-    the total number of results and allow result ordering by property.</p>
-    <div>
-        <h2 id="projecting-variables">Projecting variables</h2>
-        <p>Because the <code>SELECT</code> is rewritten into a <code>DESCRIBE</code> over its projected variables, a view can only render terms that the triplestore is able to describe:</p>
-        <ul>
-            <li>Project <em>resources</em> (IRIs) that exist in the dataset — their labels, images and links are resolved from each resource's own description. Projecting <em>literals</em> (a <code>?label</code>, a <code>?date</code>, or any computed value) describes nothing, so the view renders empty.</li>
-            <li>Project IRIs that are stored <em>locally</em>. An IRI that only occurs as an object but is not itself described in the dataset — for example an external image URL — contributes no triples.</li>
-            <li>Project a <em>single</em> entity type. Projecting several resource variables of different types blends their descriptions into one result set, which rarely renders coherently; select the one type you want to list and reach the related resources through their properties instead.</li>
-        </ul>
-    </div>
-    <div>
-        <h2 id="layout-modes">Layout modes</h2>
-        <p>View results can be rendered using the same layout modes as the <a href="../../../user-interface/#layout-modes">document layout modes</a>.</p>
-    </div>
-    <div>
-        <h2 id="faceted-search">Faceted search</h2>
-        <p>On the left side, views provide faceted search which acts as a filter that narrows down the view results.</p>
-        <p>By default the facets are generic and inferred from the triple patterns of the SPARQL <code>SELECT</code> query used by the view. They can be <a href="../../../stylesheets/#overriding-templates">customized using XSLT</a>.</p>
-    </div>
-    <div>
-        <h2 id="parallax">Parallax navigation</h2>
-        <p>Parallax navigation is a rather unique navigation approach that lends itself perfectly to graph data. It is enabled for container content and shown as <samp>Related results</samp> on the right side of the view. Parallax allows "jumping" from a result set to a related result set using the selected RDF property. It works in
-            combination with faceted search which can be used to filter the initial result set.</p>
-        <p>For example, facets can be used to filter a set products that belong to a certain category, and then parallax can be used to jump to a set of companies that provide those products, and then further on to
-            a set representatives of those companies.</p>
-        <p>
-            <img alt="Related results" src="../../../../uploads/ffb24b79848a40266d880638b0699c4c8a4e41ec"></img>
-        </p>
-    </div>
-    <div>
-        <h2 id="inline-creation">Inline creation</h2>
-        <p>Views attached to properties using <code>ldh:view</code> (forward relationships) or <code>ldh:inverseView</code> (inverse relationships) can offer inline creation of related resources.
-        If the view has a <code>ldh:container</code> value, a <span class="btn btn-primary create-action">Create</span> button is shown next to the view controls.</p>
-        <p>The button opens a modal form for a new instance whose class is inferred from the ontology: the <code>rdfs:range</code> of the property for forward relationships, the <code>rdfs:domain</code>
-        for inverse ones (including the <code>rdfs:subPropertyOf</code> hierarchy). Submitting the form creates a new child document in the <code>ldh:container</code> container, with the instance stored
-        as a fragment resource within it. The relationship with the current resource is established automatically: forward views insert the linking triple into the current document, inverse views store
-        it in the new document itself. The view results are refreshed afterwards.</p>
-        <p>The button is only shown when the agent is authorized to write to the container (and, for forward relationships, to the current document). The <code>ldh:container</code> value can be asserted
-        in the application's own ontology, including on views defined by <a href="../../../administration/packages/">packages</a>.</p>
-        <p>Views with empty results are shown by default; setting <code>ldh:showWhenEmpty</code> to <code>false</code> hides a view while its query returns no results.</p>
-        <pre>skos:narrower ldh:view ns:NarrowerConcepts .
-
-ns:NarrowerConcepts a ldh:View ;
-    dct:title "Narrower concepts" ;
-    spin:query ns:SelectNarrowerConcepts ;
-    ldh:container &lt;concepts/&gt; .</pre>
-    </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/data-model/resources/views/ParallaxNav.gif b/docs/reference/data-model/resources/views/ParallaxNav.gif
deleted file mode 100644
index 4951bc8c..00000000
Binary files a/docs/reference/data-model/resources/views/ParallaxNav.gif and /dev/null differ
diff --git a/docs/reference/data-model/resources/views/view-block.png b/docs/reference/data-model/resources/views/view-block.png
deleted file mode 100644
index 80de5921..00000000
Binary files a/docs/reference/data-model/resources/views/view-block.png and /dev/null differ
diff --git a/docs/reference/dataset.ttl b/docs/reference/dataset.ttl
index fce465fb..f2276982 100644
--- a/docs/reference/dataset.ttl
+++ b/docs/reference/dataset.ttl
@@ -1,40 +1,64 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-  
+
 <> a dh:Item ;
-    dct:title "RDF dataset" ;
+    dct:title "Dataset" ;
     dct:description "The default RDF dataset structure used by LinkedDataHub" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">The default RDF dataset structure used by LinkedDataHub.</p>
+    <p class="ldh-body-lg">The default RDF dataset structure used by LinkedDataHub</p>
     <div>
         <h2 id="structure">Structure</h2>
-        <p>Default LinkedDataHub dataset structure follows these conventions:</p>
+        <p>The default LinkedDataHub dataset structure follows these conventions:</p>
         <ol>
-            <li>the default graph is not used</li>
-            <li>each document's description is stored in an RDF named graph whose name is the same as the document URI. The graph can be managed using the <a href="../http-api/" target="_blank">Graph Store Protocol</a>.</li>
-            <li>documents form a <a href="../data-model/documents/#hierarchy">parent/child hierarchy</a>. There are 2 types of documents: containers that can have other documents as children, and items that cannot.</li>
+            <li>The default graph is not used.</li>
+            <li>Each document's description is stored in an RDF named graph whose name is the same as the document URI. The graph can be managed using the <a href="../http-api/" target="_blank">Graph Store Protocol</a>.</li>
+            <li>Documents form a <a href="../data-model/documents/#hierarchy">parent/child hierarchy</a>. There are two types of documents: containers, which can have other documents as children, and items, which cannot.</li>
         </ol>
-        <p>The default dataset is installed into an application service during the <a href="../../get-started/setup/">setup</a>.</p>
+        <p>The default dataset is installed into a dataspace service during <a href="../../get-started/setup/">setup</a>.</p>
+        <p>In TriG, the Northwind Beverages category document — one named graph, named by the document URI, holding the document's whole description:</p>
+        <pre>&lt;https://localhost:4443/categories/1/&gt;
+{
+    &lt;https://localhost:4443/categories/1/&gt; a dh:Item ;
+        dct:title "Beverages" ;
+        sioc:has_container &lt;https://localhost:4443/categories/&gt; ;
+        foaf:primaryTopic &lt;https://localhost:4443/categories/1/#this&gt; .
+
+    &lt;https://localhost:4443/categories/1/#this&gt; a schema:ProductGroup ;
+        schema:name "Beverages" ;
+        schema:identifier "1" .
+}</pre>
+        <p class="exhibit-links">Live: <a href="https://northwind-traders.demo.linkeddatahub.com/categories/1/" target="_blank">/categories/1/</a></p>
     </div>
     <div>
         <h2 id="hierarchical-uris">Hierarchical URIs</h2>
-        <p>By default, the URIs of the document resources represent the same <a href="../data-model/documents/#hierarchy">parent/child hierarchy</a>. Which means the root container's URI equals the <a href="../dataspace/#applications">base URI</a>
-            of the application, and descendant document URIs are relative to their parent container URIs.</p>
-        <p>Uploaded files are an exception to this rule. They are content-addressed in the <samp>uploads/{sha1sum}</samp> namespace, where <samp>sha1sum</samp> is the SHA1 hash of the file content.</p>
+        <p>By default, the URIs of the document resources represent the same <a href="../data-model/documents/#hierarchy">parent/child hierarchy</a>: the root container's URI equals the dataspace's <a href="../dataspace/#dataspaces">base URI</a>,
+            and descendant document URIs are relative to their parent container's.</p>
+        <pre>https://localhost:4443/                    # root container = the base URI
+https://localhost:4443/categories/         # its child container
+https://localhost:4443/categories/1/       # an item in the container
+https://localhost:4443/categories/1/#this  # the category itself — a fragment of its document</pre>
+        <p>Uploaded files are an exception to this rule. They are content-addressed in the <samp>uploads/{sha1sum}</samp> namespace, where <samp>sha1sum</samp> is the SHA1 hash of the file content — the Beverages
+            image, for example, lives at <samp>uploads/ec56b79671b30ecb98316d9b766fba198286b3b6</samp> no matter which document references it.</p>
     </div>
     <div>
         <h2 id="default-datasets">Default datasets</h2>
-        <p>The default datasets of administration and end-user applications can be found in <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/platform/datasets/admin.trig" target="_blank"><samp>platform/datasets/admin.trig</samp></a> and
+        <p>The default datasets of administration and end-user dataspaces can be found in <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/platform/datasets/admin.trig" target="_blank"><samp>platform/datasets/admin.trig</samp></a> and
             <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/platform/datasets/end-user.trig" target="_blank"><samp>platform/datasets/end-user.trig</samp></a>, respectively.</p>
-        <p>RDF terms (classes, properties etc.) used in the default datasets come from well-known vocabularies FOAF and SIOC (with additional LinkedDataHub-specific assertions) as well as  <a href="../administration/ontologies/">system ontologies</a>.</p>
+        <p>The end-user dataset contains the root container document and descriptions of the public DBpedia and Wikidata SPARQL services. The administration dataset contains the root container,
+            the sign-up and ontology-clearing <a href="../http-api/#system-endpoints">endpoint</a> documents, the <samp>acl/</samp> document tree — containers for agents, public keys, users, groups,
+            authorization requests and authorizations, the default authorizations, and the owners, writers and readers groups — as well as the <samp>ontologies/</samp> container.</p>
+        <p>RDF terms (classes, properties etc.) used in the default datasets come from the well-known FOAF and SIOC vocabularies (with additional LinkedDataHub-specific assertions) as well as <a href="../administration/ontologies/">system ontologies</a>.</p>
     </div>
     <div>
         <h2 id="storage">Storage</h2>
-        <p>The dataset of each application is stored in an RDF triplestore which is accessed as a <a href="../dataspace/#services">SPARQL service</a>. End-user applications and admin applications have separate datasets and are backed by two different services.</p>
+        <p>The dataset of each dataspace is stored in an RDF triplestore which is accessed as a <a href="../dataspace/#services">SPARQL service</a>. End-user dataspaces and admin dataspaces have separate datasets and are backed by two different services.</p>
+        <p>The default triplestore is <a href="https://jena.apache.org/documentation/fuseki2/" target="_blank">Apache Jena Fuseki</a>, and multiple dataspaces can share the same backend service.
+            See the <a href="../triplestores/">triplestores reference</a> for compatibility requirements and configuration examples.</p>
     </div>
+    <p class="ldh-body-lg">Read more about <a href="../data-model/documents/">documents</a> in the data model reference.</p>
 </div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/dataspace.ttl b/docs/reference/dataspace.ttl
index 10145194..1be038fd 100644
--- a/docs/reference/dataspace.ttl
+++ b/docs/reference/dataspace.ttl
@@ -1,138 +1,190 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-  
+
 <> a dh:Item ;
     dct:title "Dataspace" ;
-    dct:description "LinkedDataHub dataspaces, applications, and services" ;
+    dct:description "LinkedDataHub dataspaces and services" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">LinkedDataHub dataspaces, applications, and services</p>
+    <p class="ldh-body-lg">LinkedDataHub dataspaces and services</p>
     <div>
         <h2 id="dataspaces">Dataspaces</h2>
-        <p>The LinkedDataHub URI address space is split into <dfn>dataspaces</dfn>. Every dataspace consists of a pair of LinkedDataHub applications:
-            <a href="#end-user-apps">end-user</a> and <a href="#admin-apps">administration</a>.</p>
-        <p>The end-user app will be available on the given base URI; the admin app will be available on the corresponding
-            <code>admin.</code> subdomain (e.g. the admin app of <samp>https://example.com/</samp> is served at <samp>https://admin.example.com/</samp>). The <a href="../administration/acl/#agents">agent</a> that installed the admin dataset will be the application <dfn>owner</dfn>.</p>
-        <p>The <dfn>secretary</dfn> is a special agent which represents the software application itself. It is distinct from the owner agent and is used to delegate the owner's access.</p>
-        <div>
-            <h3 id="configuring-dataspaces">Configuring dataspaces</h3>
-            <p>Dataspaces are configured using RDF files in <a href="https://www.w3.org/TR/trig/" target="_blank">TriG</a> syntax:</p>
-            <dl>
-                <dt><samp>config/dataspaces.trig</samp></dt>
-                <dd>Application metadata: base URIs, titles, descriptions, ontologies, and stylesheets</dd>
-                <dt><samp>config/system.trig</samp></dt>
-                <dd>Internal service wiring: app-to-service bindings and SPARQL endpoint connection details</dd>
-                <dt><samp>secrets/credentials.trig</samp></dt>
-                <dd>Service authentication credentials (optional, gitignored). See the <a href="../triplestores/#authentication">authentication reference</a> for details.</dd>
-            </dl>
-            <p>See the <a href="../configuration/#config-files">configuration reference</a> for more details about these files.</p>
-            <p>Application relationships (end-user ↔ admin) are automatically inferred based on naming conventions — applications with base URIs containing
-            <code>admin.</code> prefix are recognized as administration applications, and their corresponding end-user applications are automatically determined.
-            You do not need to manually specify these relationships.</p>
-        </div>
-        <p class="lead">See also the <a href="../administration/">administration reference</a>.</p>
-    </div>
-    <div>
-        <h2 id="applications">Applications</h2>
-        <p>All LinkedDataHub applications have the following traits:</p>
+        <p>The LinkedDataHub URI address space is split into <dfn>dataspaces</dfn>. A dataspace is identified by its <dfn>origin</dfn> — scheme, host and port — and
+            every resource it serves is relative to that origin. A single LinkedDataHub instance serves as many dataspaces as are configured, each on its own origin.</p>
+        <p>Every dataspace has the following traits:</p>
         <dl>
             <dt>Base URI</dt>
-            <dd>Base URI is a URI by which an application can be identified. All request URIs processed by an application are relative to one of its base URIs.</dd>
-            <dd>URIs in the <a href="../dataset/">application dataset</a> are usually (but not necessarily) relative to its base URIs.</dd>
+            <dd>The URI that identifies the dataspace. All request URIs it processes are relative to it.</dd>
+            <dd>URIs in the <a href="../dataset/">dataspace's dataset</a> are usually (but not necessarily) relative to its base URI.</dd>
             <dt>Service</dt>
-            <dd><a href="#services">SPARQL service</a></dd>
+            <dd><a href="#services">SPARQL service</a> the dataspace's dataset is stored in</dd>
             <dt>Namespace ontology</dt>
-            <dd><a href="../administration/ontologies/#ontologies">Ontology</a> that defines the terms (classes, properties, constraints etc.) of the application's domain. It can import
-                other ontologies from within the application as well as from external documents.</dd>
-            <dd>Ontologies as <a href="../administration/ontologies/">managed in the administration</a> application.</dd>
-        </dl>
-        <div class="alert alert-info">
-            <p>Base URI must end with a forward slash (<code>/</code>).</p>
-        </div>
-        <p>In addition to that, LinkedDataHub applications have one additional property:</p>
-        <dl>
+            <dd><a href="../administration/ontologies/#ontologies">Ontology</a> that defines the terms (classes, properties, constraints etc.) of the dataspace's domain. It can import
+                other ontologies from within the dataspace as well as from external documents.</dd>
+            <dd>Ontologies are <a href="../administration/ontologies/">managed in the administration dataspace</a>.</dd>
             <dt>Stylesheet</dt>
-            <dd><a href="../stylesheets/" target="_blank">XSLT stylesheet</a> that renders the applications layout</dd>
+            <dd>The <a href="../stylesheets/" target="_blank">XSLT stylesheet</a> that renders the dataspace's layout</dd>
         </dl>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">Base URI must end with a forward slash (<code>/</code>).</p>
+            </div>
+        </div>
+        <p>The <a href="../administration/acl/#agents">agent</a> that installed the dataspace's dataset is its <dfn>owner</dfn>. The <dfn>secretary</dfn> is a special agent
+            which represents the software itself; it is distinct from the owner agent and is used to delegate the owner's access.</p>
+        <p>LinkedDataHub imports the <a href="../dataset/#default-datasets">default datasets</a> for each kind of dataspace into its service. The dataset URIs are rebased
+            to be relative to the base URI of the dataspace.</p>
+        <p>Each dataspace's data is structured as a hierarchy of containers and items — see the
+            <a href="../data-model/documents/#hierarchy" target="_blank">document hierarchy reference</a> for details and the
+            <a href="../data-model/documents/#management" target="_blank">management actions</a> that can be performed on documents.
+            See also the <a href="../administration/">administration reference</a>.</p>
         <div>
-            <h3 id="end-user-apps">End-user</h3>
-            <p>The base URI of an end-user application is also the base URI of its dataspace.</p>
-            <p>Every end-user application is related to one <a href="#admin-apps">administration application</a>.</p>
+            <h3 id="end-user">End-user dataspaces</h3>
+            <p>An end-user dataspace serves the domain data: the document hierarchy, its namespace ontology and whatever an agent is authorized to read or write. It is
+                typed <code>lds:EndUserDataspace</code> and is what a visitor reaches at the dataspace's own origin.</p>
         </div>
         <div>
-            <h3 id="admin-apps">Administration</h3>
-            <p>Every administration application is related to one <a href="#end-user-apps">end-user application</a>. It cannot exist standalone.</p>
-            <p>The base URI of an administration application is the base URI of its end-user application with the <code>admin.</code> subdomain
-                prefixed to the host (e.g. <samp>https://example.com/</samp> → <samp>https://admin.example.com/</samp>). Because the admin application lives on
-                its own subdomain (origin), it no longer occupies a path within the end-user application.</p>
-            <div class="alert alert-info">
-                <p>Since LinkedDataHub 5.1.0 the administration application is served on the <code>admin.</code> subdomain rather than under an
-                    <code>admin/</code> path. The subdomain must resolve in DNS and be covered by the server's TLS certificate.</p>
-            </div>
-            <p>Administration application provides means to control the <a href="../administration/ontologies/">domain model</a> and the
-                <a href="../administration/acl/">access control</a> of its end-user application. Only dataspace owners have access to its
-                administration application.</p>
-            <div class="alert alert-info">
-                <p>The agent which installs the adminstration application dataset becomes <a href="../administration/acl/#groups">the owner</a> of
-                    its dataspace.</p>
+            <h3 id="admin">Administration dataspaces</h3>
+            <p>An administration dataspace provides the means to control the <a href="../administration/ontologies/">domain model</a> and the
+                <a href="../administration/acl/">access control</a> of the end-user dataspace it administers. It is typed <code>lds:AdminDataspace</code>, and only owners
+                have access to it.</p>
+            <p>The two are associated by origin rather than by declaration: an administration dataspace's origin is its end-user dataspace's origin with the
+                <code>admin.</code> subdomain prefixed to the host (e.g. <samp>https://example.com/</samp> → <samp>https://admin.example.com/</samp>), and LinkedDataHub
+                derives the counterpart from the host in either direction. You do not configure the relationship.</p>
+            <div class="ac-alert va-informative" role="status">
+                <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+                <div class="ac-alert-body">
+                    <p class="ac-alert-text">Since LinkedDataHub 5.1.0 the administration dataspace is served on the <code>admin.</code> subdomain rather than under an
+                        <code>admin/</code> path, so it no longer occupies a path within the end-user dataspace. The subdomain must resolve in DNS and be covered by the
+                        server's TLS certificate.</p>
+                </div>
             </div>
         </div>
-        <p>LinkedDataHub imports the <a href="../dataset/#default-datasets">default datasets</a> for each application type
-            into its service. The dataset URIs are rebased to be relative to the base URI of the application.</p>
+        <div>
+            <h3 id="configuring-dataspaces">Configuring dataspaces</h3>
+            <p>Dataspaces are configured using RDF files in <a href="https://www.w3.org/TR/trig/" target="_blank">TriG</a> syntax — see the
+                <a href="../configuration/#config-files">configuration reference</a> for the files and their roles.</p>
+            <p>A second dataspace added to <samp>config/dataspaces.trig</samp> — one named graph per dataspace, identified with
+                <code>urn:</code> URIs, the end-user and administration dataspaces associated by the <code>admin.</code> origin prefix. This is the template the
+                <a href="../../user-guide/manage-dataspaces/#create-dataspace">create a dataspace</a> guide refers to; the origins follow the
+                <samp>&lt;app&gt;.demo.&lt;host&gt;</samp> shape the demo site uses, so the same declaration works locally on
+                <samp>localhost:4443</samp> and deployed on a public host:</p>
+            <pre>&lt;urn:linkeddatahub:apps/northwind-traders/end-user&gt;
+{
+    &lt;urn:linkeddatahub:apps/northwind-traders/end-user&gt; a lds:Dataspace ;
+        dct:title "Northwind Traders" ;
+        lds:origin &lt;https://northwind-traders.demo.localhost:4443&gt; ;
+        lds:ontology &lt;https://northwind-traders.demo.localhost:4443/ns#&gt; ;
+        ac:stylesheet &lt;https://northwind-traders.demo.localhost:4443/static/xsl/layout.xsl&gt; ;
+        lds:public true .
+}
+
+&lt;urn:linkeddatahub:apps/northwind-traders/admin&gt;
+{
+    &lt;urn:linkeddatahub:apps/northwind-traders/admin&gt; a lds:Dataspace ;
+        dct:title "Northwind Traders admin" ;
+        lds:origin &lt;https://admin.northwind-traders.demo.localhost:4443&gt; ;
+        lds:ontology &lt;https://w3id.org/atomgraph/linkeddatahub/admin#&gt; ;
+        ac:stylesheet &lt;https://admin.northwind-traders.demo.localhost:4443/static/xsl/admin/layout.xsl&gt; .
+}</pre>
+            <p>and its service bindings in <samp>config/system.trig</samp>:</p>
+            <pre>&lt;urn:linkeddatahub:apps/northwind-traders/end-user&gt;
+{
+    &lt;urn:linkeddatahub:apps/northwind-traders/end-user&gt; a lds:EndUserDataspace ;
+        lds:service &lt;urn:linkeddatahub:services/end-user&gt; .
+}
+
+&lt;urn:linkeddatahub:apps/northwind-traders/admin&gt;
+{
+    &lt;urn:linkeddatahub:apps/northwind-traders/admin&gt; a lds:AdminDataspace ;
+        lds:service &lt;urn:linkeddatahub:services/admin&gt; .
+}</pre>
+            <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub/blob/develop/config/dataspaces.trig" target="_blank">config/dataspaces.trig</a>, <a href="https://github.com/AtomGraph/LinkedDataHub/blob/develop/config/system.trig" target="_blank">config/system.trig</a> · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/" target="_blank">northwind-traders.demo.linkeddatahub.com</a></p>
+        </div>
     </div>
     <div>
         <h2 id="services">Services</h2>
-        <p>A service is a persistent SPARQL 1.1-compatible store from which the application's <a href="../dataset/">RDF dataset</a> is accessible over HTTP. LinkedDataHub supports
-            generic services as well as triplestore-specific services which support easier configuration and optimized access.</p>
-        <p>Services support two authentication schemes: HTTP Basic authentication and Bearer token authentication.</p>
-        <p>LinkedDataHub works with various SPARQL backends, using Apache Jena Fuseki by default. See the <a href="../triplestores/">triplestores reference</a> for compatibility requirements and configuration examples.</p>
-        <div class="alert alert-info">
-            <p>The end-user application service must be able to federate with the administration application service using the
-            SPARQL <code>SERVICE</code> keyword.</p>
+        <p>A service is a persistent SPARQL 1.1-compatible store from which a dataspace's <a href="../dataset/">RDF dataset</a> is accessible over HTTP. LinkedDataHub provides
+            generic services as well as triplestore-specific ones, which allow simpler configuration and optimized access.</p>
+        <p>LinkedDataHub works with various SPARQL backends, using <a href="https://jena.apache.org/documentation/fuseki2/" target="_blank">Apache Jena Fuseki</a> by default. See the <a href="../triplestores/">triplestores reference</a> for compatibility requirements and configuration examples.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">The end-user and administration services need no federation between them: the platform queries each service on its own, and the
+                stores' outbound <code>SERVICE</code> requests go through the <a href="../configuration/#egress"><samp>egress</samp></a> proxy, which refuses internal destinations —
+                so a query on one dataset cannot reach another.</p>
+            </div>
         </div>
         <div>
             <h3 id="generic-services">Generic services</h3>
             <p>Generic service has the following properties:</p>
-            <dl>
-                <dt>Endpoint</dt>
-                <dd>SPARQL 1.1 Protocol endpoint URI (required)</dd>
-                <dt>Graph Store</dt>
-                <dd>SPARQL 1.1 Graph Store Protocol endpoint URI (required)</dd>
-                <dt>Quad Store</dt>
-                <dd>Endpoint URI for dataset-level RDF CRUD operations (optional)</dd>
-                <dd>If not provided, LinkedDataHub will use graph-scoped Graph Store Protocol as a fallback</dd>
-                <dt>Username</dt>
-                <dd>HTTP Basic username (optional)</dd>
-                <dt>Password</dt>
-                <dd>HTTP Basic password (optional)</dd>
-                <dt>Auth token</dt>
-                <dd>Bearer authentication token (optional, alternative to HTTP Basic)</dd>
-                <dd>Auth tokens are stored in the <a href="../configuration/#secrets"><samp>credentials</samp> secret file</a> using the <code>a:authToken</code> property</dd>
-            </dl>
+            <table>
+                <caption class="ac-vh">Service fields and whether each is required</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Field</th>
+                        <th scope="col">Value</th>
+                        <th scope="col">Required</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th scope="row">Endpoint</th>
+                        <td>SPARQL 1.1 Protocol endpoint URI</td>
+                        <td>Yes</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Graph Store</th>
+                        <td>SPARQL 1.1 Graph Store Protocol endpoint URI</td>
+                        <td>Yes</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Quad Store</th>
+                        <td>Endpoint URI for dataset-level RDF CRUD operations. Without it, LinkedDataHub falls back to graph-scoped Graph Store Protocol.</td>
+                        <td>No</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Username</th>
+                        <td>HTTP Basic username</td>
+                        <td>No</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Password</th>
+                        <td>HTTP Basic password</td>
+                        <td>No</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Auth token</th>
+                        <td>Bearer authentication token, as an alternative to HTTP Basic. Stored in the <a href="../configuration/#secrets"><samp>credentials</samp> secret file</a> under <code>a:authToken</code>.</td>
+                        <td>No</td>
+                    </tr>
+                </tbody>
+            </table>
             <p>You can use either HTTP Basic authentication (username/password) or Bearer token authentication (auth token), but not both for the same service.</p>
+            <p>Each dataspace has its own end-user and admin service, pointing at its own datasets in the single <a href="../configuration/#fuseki"><samp>fuseki</samp></a> server. A dataset is named after the dataspace origin with the deployment host dropped and the role appended, so the Northwind Traders end-user service reads <samp>northwind-traders.demo.end-user</samp>:</p>
+            <pre>&lt;urn:northwind-traders:services/end-user&gt;
+{
+    &lt;urn:northwind-traders:services/end-user&gt; a sd:Service ;
+        dct:title "Northwind Traders service" ;
+        sd:supportedLanguage sd:SPARQL11Query, sd:SPARQL11Update ;
+        sd:endpoint &lt;http://fuseki:3030/northwind-traders.demo.end-user/&gt; ;
+        a:graphStore &lt;http://fuseki:3030/northwind-traders.demo.end-user/&gt; ;
+        a:quadStore &lt;http://fuseki:3030/northwind-traders.demo.end-user/&gt; .
+}</pre>
+            <p>The root dataspace's services keep the plain <samp>end-user</samp> and <samp>admin</samp> dataset names. Several dataspaces may still share one service where isolation is not required.</p>
+            <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub/blob/develop/config/system.trig" target="_blank">config/system.trig</a></p>
+            <div class="ac-alert va-informative" role="status">
+                <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+                <div class="ac-alert-body">
+                    <p class="ac-alert-text">LinkedDataHub has extension points for vendor-specific SPARQL services, which can be used to implement proprietary authentication schemes, for example.</p>
+                </div>
+            </div>
         </div>
-        <div>
-            <h3 id="custom-services">Custom services</h3>
-            <p>LinkedDataHub has extension points for vendor-specific SPARQL services, which can be used to implement proprietary authentication schemes, for example.</p>
-        </div>
-    </div>
-    <div>
-        <h2 id="hierarchy">Document hierarchy</h2>
-        <p>The basic structure of resources in an application is analogous to the file system, but built using RDF
-            resources and relationships between them instead. There is a hierarchy of <a href="../data-model/documents/containers/" target="_blank">containers</a>,
-            which are collections of <a href="../data-model/documents/items/" target="_blank">items</a> as well as sub-containers. Both containers
-            and items are <a href="../data-model/documents/" target="_blank">documents</a>. Items cannot contain other documents.</p>
-        <p>The first level of resources in a container is referred to as its <dfn>children</dfn> (of which that container
-            is the <dfn>parent</dfn>), while all levels down the hierarchy are collectively referred to as
-            <dfn>descendants</dfn>.</p>
-        <p>When a user logs in, the application loads its root container (unless a specific URI was requested). From there,
-            users can navigate down the resource hierarchy, starting with children of the <dfn>root container</dfn>. At
-            any moment there is only one <dfn>current document</dfn> per page, on which <a href="#manage">actions</a> can
-            be performed: it can be viewed, edited etc.</p>
     </div>
-    <p class="lead">If you are ready to create a dataspace, see our step-by-step tutorial on <a href="../../user-guide/manage-dataspaces/">dataspace management</a>.</p>
+    <p class="ldh-body-lg">If you are ready to create a dataspace, see the <a href="../../user-guide/manage-dataspaces/">dataspace management</a> user guide.</p>
 </div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/http-api.ttl b/docs/reference/http-api.ttl
index 550a0040..0fade41b 100644
--- a/docs/reference/http-api.ttl
+++ b/docs/reference/http-api.ttl
@@ -1,63 +1,137 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
 @prefix rdfs:   <http://www.w3.org/2000/01/rdf-schema#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "HTTP API" ;
-    dct:description "Learn how to access and manage RDF data over generic HTTP API" ;
+    dct:description "Read and write RDF data from and to LinkedDataHub dataspaces over HTTP" ;
     rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Learn how to read and write RDF data from/to LinkedDataHub applications over HTTP</p>
+    <p class="ldh-body-lg">Read and write RDF data from and to LinkedDataHub dataspaces over HTTP</p>
     <p>LinkedDataHub implements a uniform, generic RESTful Linked Data API as defined by the
-        <a href="https://www.w3.org/TR/sparql11-http-rdf-update/" target="_blank">SPARQL 1.1 Graph Store Protocol</a>. It adds a few <a href="#graph-names">conventions</a> and <a href="#constraints">constraints</a>
-        on top of it however.</p>
+        <a href="https://www.w3.org/TR/sparql11-http-rdf-update/" target="_blank">SPARQL 1.1 Graph Store HTTP Protocol</a>. It adds a few conventions of its own, however — such as <a href="#document-metadata">automatic document metadata</a> — as well as some <a href="#constraints">constraints</a>.</p>
     <div>
         <h2 id="auth">Authentication</h2>
-        <p>LinkedDataHub UI supports 2 authentication methods:</p>
+        <p>The LinkedDataHub UI supports two authentication methods:</p>
         <ul>
             <li><a href="https://dvcs.w3.org/hg/WebID/raw-file/tip/spec/tls-respec.html" target="_blank">WebID-TLS</a> using TLS client certificates</li>
-            <li><a href="https://developers.google.com/identity/protocols/oauth2/openid-connect" target="_blank">OpenID Connect using Google</a></li>
+            <li>OpenID Connect using <a href="https://developers.google.com/identity/protocols/oauth2/openid-connect" target="_blank">Google</a> or <a href="https://info.orcid.org/documentation/integration-guide/" target="_blank">ORCID</a></li>
         </ul>
         <p>See how those authentication methods can be <a href="../configuration/">configured</a> or how to <a href="../../get-started/get-an-account/">get an account</a> on LinkedDataHub.</p>
-        <div class="alert alert-info">
-            <p>HTTP API access using <a href="../command-line-interface/">CLI scripts</a> or curl currently does not support the OIDC method.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">HTTP API access using the <a href="../command-line-interface/">CLI</a> or curl currently does not support the OIDC method.</p>
+            </div>
         </div>
     </div>
     <div>
         <h2 id="acl">Access control</h2>
         <p>All HTTP access to <a href="#documents">documents</a> is subject to <a href="../administration/acl/">access
-            control</a>. Requesting a document with insufficient access rights will result in <code>403 Forbidden</code> response. That  means either:</p>
+            control</a>. Requesting a document with insufficient access rights will result in a <code>403 Forbidden</code> response. That means either:</p>
         <ul>
             <li>the user is not authenticated and public access to the document is not allowed</li>
-            <li>the user is authenticated but the associated agent does not have an authorization to <a href="../data-model/documents/#manage">perform the action</a> on the
+            <li>the user is authenticated but the associated agent does not have an authorization to <a href="../data-model/documents/#management">perform the action</a> on the
                 requested document</li>
         </ul>
     </div>
+    <div>
+        <h2 id="con-neg">Content negotiation</h2>
+        <p>LinkedDataHub implements <a href="https://tools.ietf.org/html/rfc7231#section-3.4.1" target="_blank">proactive content negotiation</a> based on the request <code>Accept</code>
+            header value. The following RDF media types are supported:</p>
+        <table>
+            <caption class="ac-vh">Supported formats and their media types</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Format</th>
+                    <th scope="col">Media type</th>
+                    <th scope="col">Direction</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row"><a href="https://www.w3.org/TR/turtle/" target="_blank">Turtle</a></th>
+                    <td><code>text/turtle</code></td>
+                    <td>Request, response</td>
+                </tr>
+                <tr>
+                    <th scope="row"><a href="https://www.w3.org/TR/n-triples/" target="_blank">N-Triples</a></th>
+                    <td><code>application/n-triples</code></td>
+                    <td>Request, response</td>
+                </tr>
+                <tr>
+                    <th scope="row"><a href="https://www.w3.org/TR/rdf-syntax-grammar/" target="_blank">RDF/XML</a></th>
+                    <td><code>application/rdf+xml</code></td>
+                    <td>Request, response</td>
+                </tr>
+                <tr>
+                    <th scope="row"><a href="https://www.w3.org/TR/json-ld/" target="_blank">JSON-LD</a></th>
+                    <td><code>application/ld+json</code></td>
+                    <td>Request, response</td>
+                </tr>
+                <tr>
+                    <th scope="row"><a href="https://atomgraph.github.io/RDF-POST/" target="_blank">RDF/POST</a></th>
+                    <td><code>application/x-www-form-urlencoded</code></td>
+                    <td>Request only</td>
+                </tr>
+            </tbody>
+        </table>
+        <p>The same document, negotiated as N-Triples:</p>
+        <pre>GET /products/1/ HTTP/1.1
+Host: localhost:4443
+Accept: application/n-triples
+
+HTTP/1.1 200 OK
+Content-Type: application/n-triples
+ETag: "1e635b4-ntriples"
+
+&lt;https://localhost:4443/products/1/#this&gt; &lt;https://schema.org/name&gt; "Chai" .
+…</pre>
+    </div>
+    <div>
+        <h2 id="errors">Error responses</h2>
+        <p>LinkedDataHub provides machine-readable error responses in the requested RDF format. An example of <code>403 Forbidden</code>:</p>
+        <pre>@prefix xsd:  &lt;http://www.w3.org/2001/XMLSchema#&gt; .
+@prefix http: &lt;http://www.w3.org/2011/http#&gt; .
+@prefix sc:   &lt;http://www.w3.org/2011/http-statusCodes#&gt; .
+@prefix dct:  &lt;http://purl.org/dc/terms/&gt; .
+
+[ a http:Response ;
+    dct:title "Access not authorized" ;
+    http:reasonPhrase "Forbidden" ;
+    http:sc sc:Forbidden ;
+    http:statusCodeValue "403"^^xsd:long
+] .</pre>
+    </div>
     <div>
         <h2 id="documents">Managing documents</h2>
-        <p>Every document is also a <a href="../dataset/#structure">named graph</a> in the application's RDF dataset. LinkedDataHub supports the SPARQL Graph Store Protocol's <a href="https://www.w3.org/TR/sparql11-http-rdf-update/#direct-graph-identification" target="_blank">direct graph identification</a> as the HTTP CRUD protocol for managing document data.</p>
-        <div class="alert alert-info">
-            <p>GSP <a href="https://www.w3.org/TR/sparql11-http-rdf-update/#indirect-graph-identification" target="_blank">indirect graph identification</a> is not supported starting with LinkedDataHub version 5.x.</p>
+        <p>Every document is also a <a href="../dataset/#structure">named graph</a> in the dataspace's RDF dataset. LinkedDataHub supports the SPARQL Graph Store Protocol's <a href="https://www.w3.org/TR/sparql11-http-rdf-update/#direct-graph-identification" target="_blank">direct graph identification</a> as the HTTP CRUD protocol for managing document data.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">GSP <a href="https://www.w3.org/TR/sparql11-http-rdf-update/#indirect-graph-identification" target="_blank">indirect graph identification</a> is not supported starting with LinkedDataHub version 5.x.</p>
+            </div>
         </div>
         <p>The API also supports the <code>PATCH</code> HTTP method which is <a href="https://www.w3.org/TR/sparql11-http-rdf-update/#http-patch">optional in GSP</a>. It accepts graph-scoped SPARQL updates that will modify the requested document. Only the <code>INSERT/WHERE</code> and <code>DELETE WHERE</code> forms are supported; <code>GRAPH</code> patterns are not allowed.</p>
         <p>Trailing slashes in document URIs are enforced using <code>308 Permanent Redirect</code> responses.</p>
-        <table class="table">
+        <table>
+            <caption class="ac-vh">HTTP methods and the responses they return</caption>
             <thead>
                 <tr>
-                    <th>Method</th>
-                    <th>Description</th>
-                    <th>Success</th>
-                    <th>Failure</th>
-                    <th>Reason</th>
+                    <th scope="col">Method</th>
+                    <th scope="col">Description</th>
+                    <th scope="col">Success</th>
+                    <th scope="col">Failure</th>
+                    <th scope="col">Reason</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <th rowspan="2"><code id="ld-get">GET</code></th>
+                    <th rowspan="2" scope="row"><code id="ld-get">GET</code></th>
                     <td rowspan="2">Returns the data of a document</td>
                     <td rowspan="2"><code>200 OK</code></td>
                     <td><code>404 Not Found</code></td>
@@ -68,11 +142,11 @@
                     <td><a href="#con-neg">Media type</a> not supported</td>
                 </tr>
                 <tr>
-                    <th rowspan="5"><code id="ld-post">POST</code></th>
-                    <td rowspan="5">Appends data to a named graph</td>
+                    <th rowspan="5" scope="row"><code id="ld-post">POST</code></th>
+                    <td rowspan="5">Appends data to a document</td>
                     <td rowspan="5"><code>204 No Content</code></td>
                     <td><code>400 Bad Request</code></td>
-                    <td><a href="#con-neg">RDF syntax error</a></td>
+                    <td>RDF syntax error</td>
                 </tr>
                 <tr>
                     <td><code>404 Not Found</code></td>
@@ -91,11 +165,11 @@
                     <td><a href="../administration/ontologies/#constraints">Constraint</a> violation</td>
                 </tr>
                 <tr>
-                    <th rowspan="5"><code id="ld-put">PUT</code></th>
+                    <th rowspan="5" scope="row"><code id="ld-put">PUT</code></th>
                     <td rowspan="5">Upserts a document</td>
-                    <td rowspan="5"><code>200 OK</code> <code>201 Created</code> <code>308 Permanent Redirect</code></td>
+                    <td rowspan="5"><code>200 OK</code><br></br><code>201 Created</code><br></br><code>308 Permanent Redirect</code></td>
                     <td rowspan="2"><code>400 Bad Request</code></td>
-                    <td><a href="#con-neg">RDF syntax error</a></td>
+                    <td>RDF syntax error</td>
                 </tr>
                 <tr>
                     <td>Malformed document URI</td>
@@ -113,7 +187,7 @@
                     <td><a href="../administration/ontologies/#constraints">Constraint</a> violation</td>
                 </tr>
                 <tr>
-                    <th rowspan="2"><code id="ld-delete">DELETE</code></th>
+                    <th rowspan="2" scope="row"><code id="ld-delete">DELETE</code></th>
                     <td rowspan="2">Removes the requested document</td>
                     <td rowspan="2"><code>204 No Content</code></td>
                     <td><code>404 Not Found</code></td>
@@ -124,7 +198,7 @@
                     <td>Deleting root, owner, or secretary documents is not allowed</td>
                 </tr>
                 <tr>
-                    <th><code id="ld-patch">PATCH</code></th>
+                    <th scope="row"><code id="ld-patch">PATCH</code></th>
                     <td>Modifies a document using SPARQL Update</td>
                     <td><code>204 No Content</code></td>
                     <td><code>422 Unprocessable Entity</code></td>
@@ -132,105 +206,154 @@
                 </tr>
             </tbody>
         </table>
+        <p>Any method may additionally answer <code>403 Forbidden</code> — see <a href="#acl">Access control</a>. Any method that writes may answer <code>428 Precondition Required</code> when the request carries no precondition, or <code>412 Precondition Failed</code> when the one it carries is out of date — see <a href="#preconditions">Conditional writes</a>.</p>
         <div>
             <h3 id="document-metadata">Document metadata</h3>
-            <p>Unlike earlier versions, LinkedDataHub 5.x manages the <a href="../data-model/documents/#hierarchy">document hierarchy</a> automatically.</p>
-            <p>By default, LinkedDataHub treats an RDF document as an item by giving it the <code>dh:Item</code> type and attaching it to the parent container using <code>sioc:has_container</code>. If the client wants to create a container instead, it has to explicitly add the <code>dh:Container</code> type on the document resource; the new container will be attached to its parent using <code>sioc:has_container</code>. In either case, the URI of the new document's will be relative to its parent's.</p>
+            <p>Since LinkedDataHub 5, the <a href="../data-model/documents/#hierarchy">document hierarchy</a> is managed automatically.</p>
+            <p>By default, LinkedDataHub treats an RDF document as an item by giving it the <code>dh:Item</code> type and attaching it to the parent container using <code>sioc:has_container</code>. If the client wants to create a container instead, it has to explicitly add the <code>dh:Container</code> type on the document resource; the new container will be attached to its parent using <code>sioc:has_parent</code>. In either case, the URI of the new document will be relative to its parent's.</p>
             <p>LinkedDataHub will also manage additional document metadata, such as its owner and creation/modification timestamps.</p>
-            <p>For example, this HTTP request to create a new container (Turtle syntax):</p>
-            <pre><code>PUT /namedgraph/new-container/ HTTP/1.1
-Host: linkeddatahub.com
+            <p>For example, this HTTP request creating the Northwind regions container (Turtle syntax):</p>
+            <pre>PUT /regions/ HTTP/1.1
+Host: localhost:4443
 Content-Type: text/turtle
 
-@prefix dh:     &lt;https://www.w3.org/ns/ldt/document-hierarchy#&gt; .
+@prefix dh:     &lt;https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#&gt; .
 @prefix dct:    &lt;http://purl.org/dc/terms/&gt; .
 
 &lt;&gt; a dh:Container ;
-    dct:title "New container" .</code></pre>
+    dct:title "Regions" .</pre>
             <p>will produce the following document triples:</p>
-            <pre><code>@prefix dh:     &lt;https://www.w3.org/ns/ldt/document-hierarchy#&gt; .
+            <pre>@prefix dh:     &lt;https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#&gt; .
 @prefix dct:    &lt;http://purl.org/dc/terms/&gt; .
 @prefix xsd:    &lt;http://www.w3.org/2001/XMLSchema#&gt; .
 @prefix sioc:   &lt;http://rdfs.org/sioc/ns#&gt; .
 @prefix acl:    &lt;http://www.w3.org/ns/auth/acl#&gt; .
 
-&lt;https://linkeddatahub.com/namedgraph/new-container/&gt;
+&lt;https://localhost:4443/regions/&gt;
     a dh:Container ;
     dct:created "2025-03-31T21:46:21.984Z"^^xsd:dateTime ;
-    dct:creator &lt;https://linkeddatahub.com/namedgraph/admin/acl/agents/fda0009e-191b-4f07-838c-5daf2a74b35f/#this&gt; ;
-    dct:title "New container" ;
-    sioc:has_parent &lt;https://linkeddatahub.com/namedgraph/&gt; ;
-    acl:owner &lt;https://linkeddatahub.com/namedgraph/admin/acl/agents/fda0009e-191b-4f07-838c-5daf2a74b35f/#this&gt; .</code></pre>     
-        <p>The HTTP request to produce a new item can be empty:</p>
-            <pre><code>PUT /namedgraph/new-container/ HTTP/1.1
-Host: linkeddatahub.com
-Content-Type: text/turtle</code></pre>
+    dct:creator &lt;https://admin.localhost:4443/acl/agents/865c2431-8436-4ae8-b300-2a531a013cd0/#this&gt; ;
+    dct:title "Regions" ;
+    sioc:has_parent &lt;https://localhost:4443/&gt; ;
+    acl:owner &lt;https://admin.localhost:4443/acl/agents/865c2431-8436-4ae8-b300-2a531a013cd0/#this&gt; .</pre>
+            <p>The HTTP request to produce a new item can be empty:</p>
+            <pre>PUT /regions/1/ HTTP/1.1
+Host: localhost:4443
+Content-Type: text/turtle</pre>
             <p>It will create an item document with the following triples:</p>
-            <pre><code>@prefix dh:    &lt;https://www.w3.org/ns/ldt/document-hierarchy#&gt; .
+            <pre>@prefix dh:     &lt;https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#&gt; .
 @prefix dct:    &lt;http://purl.org/dc/terms/&gt; .
 @prefix xsd:    &lt;http://www.w3.org/2001/XMLSchema#&gt; .
 @prefix sioc:   &lt;http://rdfs.org/sioc/ns#&gt; .
 @prefix acl:    &lt;http://www.w3.org/ns/auth/acl#&gt; .
 
-&lt;https://linkeddatahub.com/namedgraph/new-item/&gt;
+&lt;https://localhost:4443/regions/1/&gt;
     a dh:Item ;
     dct:created "2025-03-31T20:45:42.802Z"^^xsd:dateTime ;
-    dct:creator &lt;https://linkeddatahub.com/acl/agents/d47e1f9b-c8d0-4546-840f-5d9fbb479da2/#id9d3814f2-53bc-42e9-b1ab-46cbc9a94263&gt; ;
-    sioc:has_container &lt;https://linkeddatahub.com/namedgraph/&gt; ;
-    acl:owner &lt;https://linkeddatahub.com/admin/acl/agents/d47e1f9b-c8d0-4546-840f-5d9fbb479da2/#id9d3814f2-53bc-42e9-b1ab-46cbc9a94263&gt; .</code></pre>
+    dct:creator &lt;https://admin.localhost:4443/acl/agents/865c2431-8436-4ae8-b300-2a531a013cd0/#this&gt; ;
+    sioc:has_container &lt;https://localhost:4443/regions/&gt; ;
+    acl:owner &lt;https://admin.localhost:4443/acl/agents/865c2431-8436-4ae8-b300-2a531a013cd0/#this&gt; .</pre>
+        </div>
+        <div>
+            <h3 id="patch-example">Graph-scoped updates</h3>
+            <p>A <code>PATCH</code> applies a SPARQL update scoped to the requested document's graph. The request body must contain a single update operation, in one of two forms: <code>DELETE</code>/<code>INSERT</code> with a <code>WHERE</code> clause (either template can be omitted, giving plain <code>INSERT { } WHERE { }</code> or <code>DELETE { } WHERE { }</code>), or the <code>DELETE WHERE</code> shorthand. Every other form is rejected with <samp>422 Unprocessable Entity</samp>, as is a body with more than one operation. Appending a description to the Chai product:</p>
+            <pre>PATCH /products/1/ HTTP/1.1
+Host: localhost:4443
+Content-Type: application/sparql-update
+
+PREFIX schema: &lt;https://schema.org/&gt;
+
+INSERT
+{
+    &lt;https://localhost:4443/products/1/#this&gt; schema:description "A delicate black tea blend" .
+}
+WHERE {}</pre>
+            <p>The update executes against that one graph, so <code>GRAPH</code> patterns are not allowed — this request is rejected with
+                <samp>422 Unprocessable Entity</samp>:</p>
+            <pre>PATCH /products/1/ HTTP/1.1
+Host: localhost:4443
+Content-Type: application/sparql-update
+
+PREFIX schema: &lt;https://schema.org/&gt;
+
+INSERT
+{
+    GRAPH &lt;https://localhost:4443/products/1/&gt;    # GRAPH is implied by the request URI — not allowed here
+    {
+        &lt;https://localhost:4443/products/1/#this&gt; schema:description "A delicate black tea blend" .
+    }
+}
+WHERE {}</pre>
         </div>
         <div>
             <h3 id="constraints">Built-in constraints</h3>
             <p>LinkedDataHub has a few built-in constraints that are not found in the standard Graph Store Protocol:</p>
             <ul>
-                <li>It's not possible to delete the root document (returns <code>405 Method Not Allowed</code>)</li>
-                <li>It's not possible to modify or delete the documents of the owner agent and the secretary agent (returns <code>405 Method Not Allowed</code>)</li>
+                <li>It is not possible to delete the root document (returns <code>405 Method Not Allowed</code>)</li>
+                <li>It is not possible to modify or delete the documents of the owner agent and the secretary agent (returns <code>405 Method Not Allowed</code>)</li>
                 <li>A document can only be created with a URL relative to an existing container (i.e. resolving <samp>..</samp> against the new document's URL must identify an existing container)</li>
             </ul>
             <p>The built-in constraints are similar to, but separate from the <a href="../administration/ontologies/#constraints">ontology constraints</a>.</p>
         </div>
     </div>
+    <div>
+        <h2 id="preconditions">Conditional writes</h2>
+        <p>A write to a document that already exists must say which state it was written against. Every write reads the document's graph, changes it in memory and writes the whole graph back, so two writers that name no precondition overwrite each other with nothing to show that anything was lost.</p>
+        <p>Such a write is answered <code>428 Precondition Required</code>. To make it conditional, send either:</p>
+        <ul>
+            <li><code>If-Match</code> with the document's current <code>ETag</code>, to modify what you read</li>
+            <li><code>If-None-Match: *</code>, to create a document only if it does not exist yet</li>
+        </ul>
+        <p>Creating a document needs no precondition — there is no prior state to have been written against — so a <code>PUT</code> to a URL that does not exist is accepted as it always was.</p>
+        <p>If the document changed since you read it, the write is refused <code>412 Precondition Failed</code>, and that response carries the document's current <code>ETag</code> so you can re-read, reapply your change and retry without an extra request. <code>If-None-Match: *</code> against a document that already exists is likewise refused <code>412</code>, which is how a client can create-or-append in two steps.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">An <code>ETag</code> identifies a <em>negotiated representation</em>, not the graph alone: the same document answers a different tag as RDF/XML than as Turtle. Read the validator with the same <code>Accept</code> the write will send, or the write is refused <code>412</code>.</p>
+            </div>
+        </div>
+        <pre>HEAD /my/document/ HTTP/1.1
+Accept: application/n-triples
+
+HTTP/1.1 200 OK
+ETag: "f731c06f5ac4fec6490dff1399bd5440"
+
+PATCH /my/document/ HTTP/1.1
+Accept: application/n-triples
+Content-Type: application/sparql-update
+If-Match: "f731c06f5ac4fec6490dff1399bd5440"
+
+HTTP/1.1 204 No Content</pre>
+        <p><code>HEAD</code> is answered for any access mode the agent holds, not <code>acl:Read</code> alone, so an agent granted <code>acl:Write</code> or <code>acl:Append</code> can read the validator its writes have to quote without being able to read the document. <code>GET</code> still requires <code>acl:Read</code>.</p>
+        <p>The <a href="../command-line-interface/">command line interface</a> does this for you: every <samp>ldh</samp> command that writes reads the document's validator first and sends it.</p>
+    </div>
+    <div>
+        <h2 id="versioned-documents">Versioned documents</h2>
+        <p>In dataspaces with <a href="../versioning/">versioning</a> enabled, document URLs accept additional query parameters that expose the version
+            history through the standard <a href="https://datatracker.ietf.org/doc/html/rfc7089" target="_blank">Memento (RFC 7089)</a> protocol:</p>
+        <dl>
+            <dt><code>?version=&lt;commit-sha&gt;</code></dt>
+            <dd>A historical version of the document, served with a <code>Memento-Datetime</code> header and an immutable <code>Cache-Control</code>. Snapshots are read-only: write methods answer <code>405 Method Not Allowed</code></dd>
+            <dt><code>?timemap</code></dt>
+            <dd>The document's version history — a TimeMap described with PROV-O in RDF formats, or in <code>application/link-format</code> as RFC 7089 requires</dd>
+            <dt><code>?timegate</code></dt>
+            <dd>Datetime negotiation: a request with an <code>Accept-Datetime</code> header answers <code>302 Found</code> with the closest version in <code>Location</code></dd>
+        </dl>
+        <p>See the <a href="../versioning/">versioning reference</a> for details.</p>
+    </div>
     <div>
         <h2 id="sparql">Executing SPARQL</h2>
-        <p>Every LinkedDataHub application provides a SPARQL endpoint on <code>sparql</code> path (relative to the application's base URI). It supports the
+        <p>Every LinkedDataHub dataspace provides a SPARQL endpoint on <code>sparql</code> path (relative to the dataspace's base URI). It supports the
             <a href="https://www.w3.org/TR/sparql11-protocol/" target="_blank">SPARQL 1.1 Protocol</a> and serves as a proxy for the backend endpoint of the
-            application.</p>
+            dataspace.</p>
         <p>The protocol's dataset parameters can be used to scope a query to a single document's graph: passing <code>default-graph-uri=&lt;document-uri&gt;</code>
             makes that document's named graph the query's default graph. The dataset specified this way overrides any <code>FROM</code>/<code>FROM NAMED</code>
             clauses in the query, and <code>GRAPH</code> patterns match nothing since no named graphs are part of the dataset. This is the read-side counterpart
-            of the graph-scoped <code>PATCH</code> method.</p>
-    </div>
-    <div>
-        <h2 id="system-endpoints">System endpoints</h2>
-        <p></p>
-        <h3>Admin and end-user apps</h3>
-        <dl>
-            <dt><samp>ns</samp></dt>
-            <dd>In-memory namespace ontology as well as its SPARQL endpoint</dd>
-        </dl>
-        <h3>Admin app only</h3>
-        <dl>
-            <dt><samp>admin/access</samp></dt>
-            <dd>Access metadata (for the authenticated agent)</dd>
-            <dt><samp>admin/access/request</samp></dt>
-            <dd>Access request (for the authenticated agent)</dd>
-            <dt><samp>admin/sign%20up</samp></dt>
-            <dd>WebID-TLS agent signup</dd>
-            <dt><samp>oauth2/login/google</samp></dt>
-            <dd>OpenID Connect with Google login</dd>
-            <dt><samp>oauth2/login/orcid</samp></dt>
-            <dd>OpenID Connect with ORCID login</dd>
-            <dt><samp>oauth2/authorize/google</samp></dt>
-            <dd>OpenID Connect with Google callback</dd>
-            <dt><samp>oauth2/authorize/orcid</samp></dt>
-            <dd>OpenID Connect with ORCID callback</dd>
-            <dt><samp>admin/clear</samp></dt>
-            <dd>Clears the specified ontology from memory cache and reloads it from the admin SPARQL endpoint</dd>
-            <dt><samp>packages/install</samp></dt>
-            <dd>Installs a package. Requires owner/admin authentication</dd>
-            <dt><samp>packages/uninstall</samp></dt>
-            <dd>Uninstalls a package. Requires owner/admin authentication</dd>
-        </dl>
+            of the graph-scoped <code>PATCH</code> method. Reading the Chai product's name out of its document alone:</p>
+        <pre>curl -k -G "https://localhost:4443/sparql" \\
+  -H "Accept: application/sparql-results+json" \\
+  --data-urlencode 'query=PREFIX schema: &lt;https://schema.org/&gt; SELECT ?name WHERE { ?product a schema:Product ; schema:name ?name }' \\
+  --data-urlencode 'default-graph-uri=https://localhost:4443/products/1/'</pre>
     </div>
     <div>
         <h2 id="ld-proxy">Linked Data proxy</h2>
@@ -239,46 +362,135 @@ Content-Type: text/turtle</code></pre>
         <p>If the URL dereferences successfully as RDF, LinkedDataHub forwards its response body (re-serializing it to enable content negotiation).
             During a write request, the request body is forwarded to the provided URL.</p>
         <p>If the URL returns an HTML document, LinkedDataHub extracts every embedded <a href="https://json-ld.org/" target="_blank">JSON-LD</a> script
-            (<code>&lt;script type="application/ld+json"&gt;</code>) and parses it as RDF using JSON-LD 1.1, so pages annotated with <a href="https://schema.org/" target="_blank">schema.org</a> markup
-            can be browsed as Linked Data. The schema.org JSON-LD context is bundled with LinkedDataHub and served locally, so no external network request is made to resolve it.</p>
-        <p>The proxy only accepts external (non-relative to the current application's base URI) URLs; local URLs have to be dereferenced directly.</p>
+            (<code>&lt;script type="application/ld+json"&gt;</code>) and parses it as RDF using JSON-LD 1.1. Pages annotated with <a href="https://schema.org/" target="_blank">schema.org</a> markup
+            can therefore be browsed as Linked Data. The schema.org JSON-LD context is bundled with LinkedDataHub and served locally, so no external network request is made to resolve it. A supplier's homepage carrying this markup:</p>
+        <pre>&lt;script type="application/ld+json"&gt;
+{
+    "@context": "https://schema.org/",
+    "@type": "Corporation",
+    "@id": "#this",
+    "legalName": "Exotic Liquids",
+    "telephone": "(171) 555-2222"
+}
+&lt;/script&gt;</pre>
+        <p>browses as these triples:</p>
+        <pre>&lt;https://supplier.example/#this&gt; a schema:Corporation ;
+    schema:legalName "Exotic Liquids" ;
+    schema:telephone "(171) 555-2222" .</pre>
+        <p>The proxy only accepts external (non-relative to the current dataspace's base URI) URLs; local URLs have to be dereferenced directly.</p>
+        <p>The proxy forwards the origin's <code>ETag</code> and <code>Last-Modified</code> validators and passes conditional request headers
+            (<code>If-Match</code>, <code>If-None-Match</code>, <code>If-Modified-Since</code>, <code>If-Unmodified-Since</code>) through. Preconditioned
+            writes against proxied documents are therefore evaluated at the origin. Error statuses from the origin reach the client unchanged.</p>
     </div>
     <div>
-        <h2 id="con-neg">Content negotiation</h2>
-        <p>LinkedDataHub implements <a href="https://tools.ietf.org/html/rfc7231#section-3.4.1" target="_blank">proactive conneg</a> based on the request <code>Accept</code>
-            header value.  The following RDF media types are supported (for requests as well as responses, unless indicated otherwise):</p>
+        <h2 id="federation">Federation</h2>
+        <p>The Linked Data proxy makes dataspaces interoperable across origins: one dataspace's client can browse, query, and write to another
+            origin's dataspace, whether on the same LinkedDataHub instance or a different one.</p>
+        <p>Browsing a UNESCO Thesaurus concept from the Northwind dataspace, for example, the proxy forwards the remote dataspace's hypermedia along
+            with the RDF:</p>
+        <pre>GET /?uri=https%3A%2F%2Funesco-thesaurus.demo.linkeddatahub.com%2Fconcepts%2Fconcept3683%2F HTTP/1.1
+Host: northwind-traders.demo.linkeddatahub.com
+Accept: application/rdf+xml
+
+HTTP/1.1 200 OK
+Content-Type: application/rdf+xml
+Link: &lt;https://unesco-thesaurus.demo.linkeddatahub.com/sparql&gt;; rel="http://www.w3.org/ns/sparql-service-description#endpoint"</pre>
         <ul>
-            <li><a href="https://www.w3.org/TR/turtle/" target="_blank">Turtle</a> <code>text/turtle</code></li>
-            <li><a href="https://www.w3.org/TR/n-triples/" target="_blank">N-Triples</a> <code>application/n-triples</code></li>
-            <li><a href="https://www.w3.org/TR/rdf-syntax-grammar/" target="_blank">RDF/XML</a> <code>application/rdf+xml</code></li>
-            <li><a href="https://www.w3.org/TR/json-ld/" target="_blank">JSON-LD</a> <code>application/ld+json</code></li>
-            <li><a href="https://atomgraph.github.io/RDF-POST/" target="_blank">RDF/POST</a> <code>application/x-www-form-urlencoded</code> (for requests only)</li>
+            <li>The remote dataspace's SPARQL endpoint is discovered from the <code>Link</code> headers the proxy forwards, so views and charts over
+                remote documents query the <em>remote</em> endpoint</li>
+            <li>Writes are graph-scoped SPARQL updates (<code>PATCH</code>) or appends (<code>POST</code>) sent through the proxy under the origin's
+                <code>If-Match</code> precondition</li>
+            <li>Requests carry the delegated identity of the requesting agent, so the remote dataspace's <a href="../administration/acl/">access control</a>
+                arbitrates every operation</li>
         </ul>
+        <p>In the user interface this means you can <a href="../../user-guide/browse-data/">browse</a> a remote dataspace and
+            <a href="../../user-guide/add-data/">add data</a> to its documents the same way as to local ones, provided the remote access control allows it.</p>
+        <p>The example above uses the public demo hosts because they are reachable without any setup, but nothing about federation requires a second
+            instance: two <a href="../dataspace/#dataspaces">dataspaces</a> on one LinkedDataHub are distinct origins, so the same exchange happens between
+            <samp>northwind-traders.demo.localhost:4443</samp> and <samp>unesco-thesaurus.demo.localhost:4443</samp> once both are
+            <a href="../../user-guide/manage-dataspaces/#create-dataspace">declared</a>.</p>
     </div>
     <div>
-        <h2 id="errors">Error responses</h2>
-        <p>LinkedDataHub provides machine-readable error responses in the requested RDF format. An example of <code>403 Forbidden</code>:</p>
-        <pre><code>@prefix xsd:  &lt;http://www.w3.org/2001/XMLSchema#&gt; .
-@prefix http: &lt;http://www.w3.org/2011/http#&gt; .
-@prefix sc:   &lt;http://www.w3.org/2011/http-statusCodes#&gt; .
-@prefix dct:  &lt;http://purl.org/dc/terms/&gt; .
-
-[ a http:Response ;
-    dct:title "Access not authorized" ;
-    http:reasonPhrase "Forbidden" ;
-    http:sc sc:Forbidden ;
-    http:statusCodeValue "403"^^xsd:long
-] .</code></pre>
+        <h2 id="system-endpoints">System endpoints</h2>
+        <p>Endpoints that LinkedDataHub serves in addition to the document hierarchy. Paths are relative to the dataspace's base URI.</p>
+        <table>
+            <caption class="ac-vh">System endpoints by path</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Path</th>
+                    <th scope="col">Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th colspan="2" id="app-endpoints" scope="rowgroup">Admin and end-user apps</th>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>ns</samp></th>
+                    <td>In-memory namespace ontology as well as its SPARQL endpoint</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>sitemap.xml</samp></th>
+                    <td>The dataspace's public documents, in the <a href="https://www.sitemaps.org/protocol.html" target="_blank">sitemaps protocol</a>: generated at startup from the public read rules of the dataspace's own admin service, so an origin lists only its own documents. An end-user dataspace with nothing public has none, and neither does an admin dataspace</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>robots.txt</samp></th>
+                    <td>Allows crawling and names the sitemap when the dataspace has one; disallows everything when it has none</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>settings</samp></th>
+                    <td>The dataspace's own description in the dataspace configuration. <code>PATCH</code> with a SPARQL update edits it — this is how <a href="../administration/packages/">packages</a> are installed and uninstalled. Editing is restricted to end-user dataspaces: a <code>PATCH</code> on an admin dataspace's settings answers <samp>422 Unprocessable Entity</samp></td>
+                </tr>
+            </tbody>
+            <tbody>
+                <tr>
+                    <th colspan="2" id="admin-endpoints" scope="rowgroup">Admin app only</th>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>admin/access</samp></th>
+                    <td>Access metadata (for the authenticated agent)</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>admin/access/request</samp></th>
+                    <td>Access request (for the authenticated agent)</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>admin/sign%20up</samp></th>
+                    <td>WebID-TLS agent signup</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>oauth2/login/google</samp></th>
+                    <td>OpenID Connect with Google login</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>oauth2/login/orcid</samp></th>
+                    <td>OpenID Connect with ORCID login</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>oauth2/authorize/google</samp></th>
+                    <td>OpenID Connect with Google callback</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>oauth2/authorize/orcid</samp></th>
+                    <td>OpenID Connect with ORCID callback</td>
+                </tr>
+                <tr>
+                    <th scope="row"><samp>admin/clear</samp></th>
+                    <td>Clears every cached ontology graph and imports closure from memory. With an optional <code>uri</code> form parameter, also purges that ontology's proxy caches and reloads its closure from the admin SPARQL endpoint</td>
+                </tr>
+            </tbody>
+        </table>
     </div>
     <div>
         <h2 id="caching">Caching</h2>
         <p><code>GET</code> and <code>HEAD</code> RDF responses from the backend triplestores (<em>not LinkedDataHub responses</em>) are cached automatically by LinkedDataHub using <a href="https://varnish-cache.org" target="_blank">Varnish</a>
-            as HTTP proxy cache. You can check the age of the response by inspecting the <code>Age</code> response header (the value is in seconds).</p>
-        <p>LinkedDataHub sends <code>ETag</code> response headers that are derived as hashes of the requested document's RDF content. Every serialization format (HTML, RDF/XML, Turtle etc.) gets a distinct <code>ETag</code> value.</p>
+            as an HTTP proxy cache. You can check the age of the response by inspecting the <code>Age</code> response header (the value is in seconds).</p>
+        <p>LinkedDataHub sends <code>ETag</code> response headers derived from a digest of the document's URL and its RDF content. Every representation (HTML, RDF/XML, Turtle, etc.) gets a distinct <code>ETag</code> value, and language-negotiated HTML representations factor the accepted languages into the tag. Treat the value as opaque: it is a validator to quote back in a <a href="#preconditions">conditional request</a>, and nothing about the document can be read from it.</p>
+        <p>HTML responses carry a <code>Content-Language</code> negotiated against the languages the UI ships with, and advertise <code>Vary: Accept-Language</code> so shared caches keep the renderings apart.</p>
         <p>Caching of LinkedDataHub responses can be enabled on the nginx HTTP proxy server by uncommenting the <code>add_header Cache-Control</code> directives in the <samp>platform/nginx.conf.template</samp> file.
-            Caching of <samp>/uploads/</samp> and <samp>/static/</samp> namespaces is enabled by default (since version 4.0.4).</p>
+            Caching of <samp>/uploads/</samp> and <samp>/static/</samp> namespaces is enabled by default.</p>
     </div>
 </div>"""^^rdf:XMLLiteral ;
         rdfs:seeAlso <https://www.w3.org/TR/sparql11-http-rdf-update/> .
 
-    <https://www.w3.org/TR/sparql11-http-rdf-update/> dct:title "SPARQL 1.1 Graph Store HTTP Protocol".
\ No newline at end of file
+    <https://www.w3.org/TR/sparql11-http-rdf-update/> dct:title "SPARQL 1.1 Graph Store HTTP Protocol" .
diff --git a/docs/reference/imports.ttl b/docs/reference/imports.ttl
index ce443801..f4b1e005 100644
--- a/docs/reference/imports.ttl
+++ b/docs/reference/imports.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Container ;
@@ -8,10 +8,62 @@
     dct:description "Types of data imports supported by LinkedDataHub" ;
     rdf:_1 <#content> ;
     rdf:_2 <#select-children> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Types of data imports supported by LinkedDataHub</p>
+    <p class="ldh-body-lg">Types of data imports supported by LinkedDataHub</p>
+    <p>LinkedDataHub supports two types of data imports: <a href="csv/">CSV imports</a>, which map tabular data to RDF, and <a href="rdf/">RDF imports</a>, which load RDF data and optionally transform it. The <a href="#mapping-queries">mapping query</a> rules below apply to both import types.</p>
+    <div>
+        <h2 id="mapping-queries">Mapping queries</h2>
+        <p>Both import types use a user-defined SPARQL <code>CONSTRUCT</code> query to map the incoming data to the final RDF representation and to connect it to the documents in LinkedDataHub's <a href="../dataset/" target="_blank">dataset</a>. These are the rules that hold for mapping queries:</p>
+        <ul>
+            <li>The <code>BASE</code> value is automatically set to the imported file's URI. Do not add an explicit <code>BASE</code> to the query.</li>
+            <li>The <code>$base</code> binding is bound to the dataspace's base URI</li>
+            <li>use <code>OPTIONAL</code> for optional values (such as optional cell values in CSV)</li>
+            <li>use <code>BIND()</code> to introduce new values and/or cast literals to the appropriate result datatype or URI</li>
+            <li>when building document URIs, use natural IDs from the input data (or UUIDs if there are no IDs) and URI-encode them with <code>encode_for_uri</code></li>
+            <li>use a <code>GRAPH</code> block in the constructor template to construct triples for a specific document</li>
+            <li>construct <code>dh:Container</code> instances to create new container documents or <code>dh:Item</code> instances to create new item documents. <code>dct:title</code> values are mandatory for documents.</li>
+            <li>if you are constructing descriptions of non-information resources (a thing, a concept), assign them URIs with fragment identifiers (e.g. <samp>#this</samp>) and pair them with item documents using the <code>foaf:primaryTopic</code> property</li>
+        </ul>
+        <p>All of the rules in one skeleton, shaped like the Northwind category mapping:</p>
+        <pre>PREFIX dct:    &lt;http://purl.org/dc/terms/&gt;
+PREFIX foaf:   &lt;http://xmlns.com/foaf/0.1/&gt;
+PREFIX schema: &lt;https://schema.org/&gt;
+
+CONSTRUCT
+{
+    GRAPH ?graph                                   # one GRAPH block per constructed document
+    {
+        ?graph dct:title ?categoryName ;           # dct:title is mandatory for documents
+            foaf:primaryTopic ?category .
+
+        ?category a schema:ProductGroup ;          # the document's topic…
+            schema:name ?categoryName ;
+            schema:description ?description .
+    }
+}
+WHERE
+{
+    ?row &lt;#categoryID&gt; ?categoryID ;               # input values bind as &lt;#column&gt; predicates
+        &lt;#categoryName&gt; ?categoryName .            # (no explicit BASE — it is set to the file's URI)
+
+    OPTIONAL { ?row &lt;#description&gt; ?description }  # OPTIONAL for optional values
+
+    # $base is bound to the dataspace's base URI
+    BIND(uri(concat(str($base), "categories/")) AS ?container)
+    # URI-encode natural IDs when minting document URIs
+    BIND(uri(concat(str(?container), encode_for_uri(?categoryID), "/")) AS ?graph)
+    # …a non-information resource, as a fragment of its document
+    BIND(uri(concat(str(?graph), "#this")) AS ?category)
+}</pre>
+        <p class="exhibit-links">The complete version: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories/categories.rq" target="_blank">categories/categories.rq</a> in the Northwind Traders demo</p>
+    </div>
+    <div>
+        <h2 id="execution">Import execution</h2>
+        <p>Imports run asynchronously in the background: the import item is created before the process completes. To check the status (completed or failed), refresh the import item. On successful completion, metadata such as the number of imported RDF triples is attached to the import.</p>
+        <p>The resulting RDF data is validated against <a href="../administration/ontologies/#constraints">constraints</a> during the import. Constraint violations, if any, are attached to the import item.</p>
+    </div>
 </div>"""^^rdf:XMLLiteral .
 
 <#select-children> a ldh:Object ;
diff --git a/docs/reference/imports/csv.ttl b/docs/reference/imports/csv.ttl
index 8db4eecc..682e02f9 100644
--- a/docs/reference/imports/csv.ttl
+++ b/docs/reference/imports/csv.ttl
@@ -1,27 +1,35 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
 @prefix rdfs:   <http://www.w3.org/2000/01/rdf-schema#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-  
+
 <> a dh:Item ;
     dct:title "CSV imports" ;
     dct:description "CSV imports and mapping to RDF using SPARQL CONSTRUCT" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">CSV imports and mapping to RDF using SPARQL CONSTRUCT</p>
+    <p class="ldh-body-lg">CSV imports and mapping to RDF using SPARQL CONSTRUCT</p>
     <p><a href="https://en.wikipedia.org/wiki/Comma-separated_values" target="_blank">CSV</a> is a plain-text format for
-      tabular data.</p>
+        tabular data.</p>
+    <div class="ac-alert va-informative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">Read the shared <a href="../#mapping-queries">mapping query rules</a> first — they apply to CSV and RDF imports alike.</p>
+        </div>
+    </div>
     <p>A CSV import is a combination of multiple resources:</p>
     <dl>
         <dt>File</dt>
-        <dd>The CSV file to be mapped to RDF and imported</dd>
+        <dd>The CSV file to be mapped to RDF and imported (<code>ldh:file</code>)</dd>
         <dt>Mapping query</dt>
-        <dd>A user-defined <code>CONSTRUCT</code> query that produces RDF</dd>
+        <dd>A user-defined <code>CONSTRUCT</code> query that produces RDF (<code>spin:query</code>)</dd>
+        <dt>Delimiter</dt>
+        <dd>The single-character column separator (<code>ldh:delimiter</code>). The CLI defaults it to <samp>,</samp></dd>
     </dl>
-    <p>CSV import in LinkedDataHub consists of 2 steps:</p>
+    <p>A CSV import in LinkedDataHub has two steps:</p>
     <ol>
         <li>
             <a href="#generic-conversion">generic conversion</a> creates an intermediary, generic CSV/RDF representation for each CSV row
@@ -30,145 +38,135 @@
             <a href="#vocabulary-conversion">vocabulary conversion</a> maps the CSV/RDF to the final RDF representation using the mapping query
         </li>
     </ol>
-    <p>The import process runs in the background, i.e. the import item is created before the process completes.
-        Currently the only way to determine when it completes is to refresh the import item and check the import
-        status (completed/failed). Upon successful report, metadata such as the number of imported RDF triples is attached
-        to the import.</p>
-    <p>The mapping is done <em>one row at a time</em>, with each row resulting in a new created document, which should attach to the <a href="../../dataset/#structure">document hierarchy</a>. The documents have to be URI resources. The server will automatically assign URIs for the documents constructed in the default graph. Alternatively, it is possible to explicitly specify the document graph using a <code>GRAPH</code> block in the <code>CONSTRUCT</code> template (which is a
-    <a href="https://jena.apache.org/documentation/query/construct-quad.html" target="_blank">Jena-specific extension</a> of SPARQL 1.1).</p>
-    <p>The resulting RDF data is validated against <a href="../../administration/ontologies/#constraints">constraints</a> in the process. Constraint violations, if any, are attached to the import item.</p>
-    <p>We provide an running example of CSV data that will be shown as RDF conversion in the following
-        sections:</p>
-    <pre>countryCode,latitude,longitude,name
-AD,42.5,1.6,Andorra
-AE,23.4,53.8,"United Arab Emirates"
-AF,33.9,67.7,Afghanistan</pre>
+    <p>Imports run in the background — see <a href="../#execution">import execution</a>.</p>
+    <p>The mapping is done <em>one row at a time</em>, with each row resulting in a newly created document, which must be attached to the <a href="../../dataset/#structure">document hierarchy</a>. The documents have to be URI resources. The server will automatically assign URIs to the documents constructed in the default graph. Alternatively, it is possible to explicitly specify the document graph using a <code>GRAPH</code> block in the <code>CONSTRUCT</code> template (which is a
+        <a href="https://jena.apache.org/documentation/query/construct-quad.html" target="_blank">Jena-specific extension</a> of SPARQL 1.1).</p>
+    <p>The resulting RDF data is validated against <a href="../../administration/ontologies/#constraints">constraints</a> as it is created. Constraint violations, if any, are attached to the import item.</p>
+    <p>The running example in the following sections is the Northwind Traders category data, exactly as the
+        <a href="../../../tutorial/data/">tutorial</a> and the demo app import it:</p>
+    <pre>categoryID,categoryName,description,pictureHash
+1,Beverages,Soft drinks coffees teas beers and ales,ec56b79671b30ecb98316d9b766fba198286b3b6
+2,Condiments,Sweet and savory sauces relishes spreads and seasonings,7e9f535a3bf693ec856702856fffd3be5a3df4f1
+3,Confections,Desserts candies and sweet breads,e781b6c8e83be3f23aa241416f92447a66dc35e4</pre>
+    <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories/categories.csv" target="_blank">categories/categories.csv</a></p>
+    <p>An import itself is described in RDF, pairing the uploaded file with the mapping query:</p>
+    <pre>&lt;#categories-import&gt; a ldh:CSVImport ;
+    dct:title "Categories" ;
+    spin:query &lt;#categories-query&gt; ;
+    ldh:file &lt;https://localhost:4443/uploads/58ee67ce53cfb3ad73368eda24a089314bb0bf41&gt; ;
+    ldh:delimiter "," .</pre>
     <div>
-        <h3 id="generic-conversion">Generic conversion</h3>
+        <h2 id="generic-conversion">Generic conversion</h2>
         <p>The data table is converted to a graph by treating rows as resources, columns as predicates, and
-          cells as <code>xsd:string</code> literals. The approach is the same as CSV on the Web
-          <a href="https://www.w3.org/TR/2015/REC-csv2rdf-20151217/#dfn-minimal-mode" target="_blank">minimal mode</a>.</p>
-          <pre>@base &lt;https://localhost:4443/&gt; .
+            cells as <code>xsd:string</code> literals. The approach is the same as CSV on the Web
+            <a href="https://www.w3.org/TR/2015/REC-csv2rdf-20151217/#dfn-minimal-mode" target="_blank">minimal mode</a>.</p>
+        <pre>@base &lt;https://localhost:4443/&gt; .
 
 _:8228a149-8efe-448d-b15f-8abf92e7bd17
-&lt;#countryCode&gt; "AD" ;
-&lt;#latitude&gt; "42.5" ;
-&lt;#longitude&gt; "1.6" ;
-&lt;#name&gt; "Andorra" .
+    &lt;#categoryID&gt; "1" ;
+    &lt;#categoryName&gt; "Beverages" ;
+    &lt;#description&gt; "Soft drinks coffees teas beers and ales" ;
+    &lt;#pictureHash&gt; "ec56b79671b30ecb98316d9b766fba198286b3b6" .
 
 _:ec59dcfc-872a-4144-822b-9ad5e2c6149c
-&lt;#countryCode&gt; "AE" ;
-&lt;#latitude&gt; "23.4" ;
-&lt;#longitude&gt; "53.8" ;
-&lt;#name&gt; "United Arab Emirates" .
+    &lt;#categoryID&gt; "2" ;
+    &lt;#categoryName&gt; "Condiments" ;
+    &lt;#description&gt; "Sweet and savory sauces relishes spreads and seasonings" ;
+    &lt;#pictureHash&gt; "7e9f535a3bf693ec856702856fffd3be5a3df4f1" .
 
 _:e8f2e8e9-3d02-4bf5-b4f1-4794ba5b52c9
-&lt;#countryCode&gt; "AF" ;
-&lt;#latitude&gt; "33.9" ;
-&lt;#longitude&gt; "67.7" ;
-&lt;#name&gt; "Afghanistan" .</pre>
+    &lt;#categoryID&gt; "3" ;
+    &lt;#categoryName&gt; "Confections" ;
+    &lt;#description&gt; "Desserts candies and sweet breads" ;
+    &lt;#pictureHash&gt; "e781b6c8e83be3f23aa241416f92447a66dc35e4" .</pre>
     </div>
     <div>
-        <h3 id="vocabulary-conversion">Vocabulary conversion</h3>
-        <p>This step provides a semantic "lift" for the generic RDF output of the previous step by mapping it
-            to classes and properties from specific vocabularies. It also connects instances in the imported data to the documents in LinkedDataHub's <a href="../../dataset/" target="_blank">dataset</a>.</p>
-        <p>These are the rules that hold for mapping queries:</p>
-        <ul>
-            <li><code>BASE</code> value is automatically set to the imported file's URI. Do not add an explicit <code>BASE</code> to the query.</li>
-            <li><code>$base</code> binding is set to the value of the application's baseURI</li>
-            <li>use<code>OPTIONAL</code> for optional cell values</li>
-            <li>use <code>BIND()</code> to introduce new values and/or cast literals to the appropriate result datatype or URI</li>
-            <li>when building document URIs, use natural IDs from the input data (or UUIDs if there are no IDs) and remember to URI-encode them using <code>encode_for_uri</code></li>
-            <li>use a <code>GRAPH</code> block in the constructor template to construct triples for a specific document</li>
-            <li>construct <dfn>dh:Container</dfn> instances to create new container documents or <dfn>dh:Item</dfn> instances to create new item documents. <code>dct:title</code> values are mandatory for documents.</li>
-            <li>if you're constructing non-information resource (e.g. thing, concept) descriptions, assign them URIs with fragment identified (e.g. <samp>#this</samp>) and pair them with item documents using the <code>foaf:primaryTopic</code> property</li>
-        </ul>
-        <p>We are planning to provide a UI-based mapping tool in the future.</p>
+        <h2 id="vocabulary-conversion">Vocabulary conversion</h2>
+        <p>This step provides a semantic lift for the generic RDF output of the previous step by mapping it
+            to classes and properties from specific vocabularies. It also connects instances in the imported data to the documents in LinkedDataHub's <a href="../../dataset/">dataset</a>.</p>
+        <p>The mapping is a user-defined SPARQL <code>CONSTRUCT</code> that follows the shared <a href="../#mapping-queries">mapping query rules</a>.</p>
         <div>
-            <h4 id="vocabulary-conversion-example">Example</h4>
-            <p>In this example we produce a SKOS concept paired with its item (document) for each country:</p>
-            <pre><code>PREFIX  geo:  &lt;http://www.w3.org/2003/01/geo/wgs84_pos#&gt;
-PREFIX  dh:   &lt;https://www.w3.org/ns/ldt/document-hierarchy#&gt;
-PREFIX  dct:  &lt;http://purl.org/dc/terms/&gt;
-PREFIX  rdf:  &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt;
-PREFIX  xsd:  &lt;http://www.w3.org/2001/XMLSchema#&gt;
-PREFIX  foaf: &lt;http://xmlns.com/foaf/0.1/&gt;
-PREFIX  sioc: &lt;http://rdfs.org/sioc/ns#&gt;
+            <h3 id="vocabulary-conversion-example">Example</h3>
+            <p>The demo's category mapping constructs a <code>schema:ProductGroup</code> per row and mints each row its own document with a
+                <code>GRAPH</code> block:</p>
+            <pre>PREFIX foaf:       &lt;http://xmlns.com/foaf/0.1/&gt;
+PREFIX dct:        &lt;http://purl.org/dc/terms/&gt;
+PREFIX schema:     &lt;https://schema.org/&gt;
 
 CONSTRUCT
-  {
-    ?item a dh:Item ;
-        sioc:has_container ?container ;
-        dct:title ?name ;
-        dh:slug ?countryCode ;
-        foaf:primaryTopic ?country .
-    ?country a &lt;http://dbpedia.org/ontology/Country&gt; ;
-        dct:identifier ?countryCode ;
-        geo:lat ?lat ;
-        geo:long ?long ;
-        dct:title ?name .
-  }
-WHERE
-  { 
-    BIND(bnode() AS ?item)
-    BIND (uri(concat(str($base), "countries/")) AS ?container)
+{
+    GRAPH ?graph
+    {
+        ?graph dct:title ?categoryName ;
+            foaf:primaryTopic ?category .
 
-    ?country  &lt;#countryCode&gt;  ?countryCode ;
-              &lt;#latitude&gt;     ?latString ;
-              &lt;#longitude&gt;    ?longString ;
-              &lt;#name&gt;         ?name .
+        ?category a schema:ProductGroup ;
+            dct:title ?categoryName ;
+            dct:description ?description ;
+            schema:name ?categoryName ;
+            schema:identifier ?categoryID ;
+            schema:description ?description ;
+            foaf:depiction ?picture .
+    }
+}
+WHERE
+{
+    ?category_row &lt;#categoryID&gt; ?categoryID ;
+        &lt;#description&gt; ?description ;
+        &lt;#categoryName&gt; ?categoryName ;
+        &lt;#pictureHash&gt; ?pictureHash .
 
-    BIND(xsd:float(?latString) AS ?lat)
-    BIND(xsd:float(?longString) AS ?long)
-  }</code></pre>
-             <p>When the import is complete, you should be able to see the imported documents as children of the <samp>${base}countries/</samp> container.</p>
-            <p>The result of our mapping:</p>
-            <pre>PREFIX  geo:  &lt;http://www.w3.org/2003/01/geo/wgs84_pos#&gt;
-PREFIX  dh:   &lt;https://www.w3.org/ns/ldt/document-hierarchy#&gt;
-PREFIX  dct:  &lt;http://purl.org/dc/terms/&gt;
-PREFIX  rdf:  &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt;
-PREFIX  xsd:  &lt;http://www.w3.org/2001/XMLSchema#&gt;
+    BIND(uri(concat(str($base), "categories/")) AS ?container)
+    BIND(uri(concat(str(?container), encode_for_uri(?categoryID), "/")) AS ?graph)
+    BIND(uri(concat(str(?graph), "#this")) AS ?category)
+    BIND(uri(concat(str($base), "uploads/", encode_for_uri(?pictureHash))) AS ?picture)
+}</pre>
+            <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories/categories.rq" target="_blank">categories/categories.rq</a></p>
+            <p>(A mapping can also construct <code>dh:Item</code> resources in the default graph and let the server assign the document URIs,
+                as described above — the <code>GRAPH</code> form gives the import full control over the URIs instead.)</p>
+            <p>When the import is complete, the imported documents appear as children of the <samp>{base}categories/</samp> container.
+                The Beverages row becomes:</p>
+            <pre>PREFIX  dct:  &lt;http://purl.org/dc/terms/&gt;
 PREFIX  foaf: &lt;http://xmlns.com/foaf/0.1/&gt;
-PREFIX  sioc: &lt;http://rdfs.org/sioc/ns#&gt;
+PREFIX  schema: &lt;https://schema.org/&gt;
 
-&lt;https://localhost:4443/countries/AD/&gt; a dh:Item ;
-    sioc:has_container &lt;https://localhost:4443/countries/&gt; ;
-    dct:title "Andorra" ;
-    dh:slug "AD" ;
-    foaf:primaryTopic &lt;https://localhost:4443/countries/AD/#id459bdd90-a309-49f9-92b2-1b9b5d110471&gt; .
+&lt;https://localhost:4443/categories/1/&gt;
+    dct:title "Beverages" ;
+    foaf:primaryTopic &lt;https://localhost:4443/categories/1/#this&gt; .
 
-&lt;https://localhost:4443/countries/AD/#id459bdd90-a309-49f9-92b2-1b9b5d110471&gt; a &lt;http://dbpedia.org/ontology/Country&gt; ;
-    dct:identifier "AD" ;
-    geo:lat 42.5 ;
-    geo:long 1.6 ;
-    dct:title "Andorra" .
-
-&lt;https://localhost:4443/countries/AE/&gt; a dh:Item ;
-    sioc:has_container &lt;https://localhost:4443/countries/&gt; ;
-    dct:title "United Arab Emirates" ;
-    dh:slug "AE" ;
-    foaf:primaryTopic &lt;https://localhost:4443/countries/AE/#id7ad9b80b-8fbf-4696-92fa-61facf6c2066&gt; .
-
-&lt;https://localhost:4443/countries/AE/#id7ad9b80b-8fbf-4696-92fa-61facf6c2066&gt; a &lt;http://dbpedia.org/ontology/Country&gt; ;
-    dct:identifier "AE" ;
-    geo:lat 23.4 ;
-    geo:long 53.8 ;
-    dct:title "United Arab Emirates" .
-
-&lt;https://localhost:4443/countries/AF/&gt; a dh:Item ;
-    sioc:has_container &lt;https://localhost:4443/countries/&gt; ;
-    dct:title "Afghanistan" ;
-    dh:slug "AF" ;
-    foaf:primaryTopic &lt;https://localhost:4443/countries/AF/#id5de2fd91-158a-47d8-a302-d1af205fe59f&gt; .
-
-&lt;https://localhost:4443/countries/AF/#id5de2fd91-158a-47d8-a302-d1af205fe59f&gt; a &lt;http://dbpedia.org/ontology/Country&gt; ;
-    dct:identifier "AF" ;
-    geo:lat 33.9 ;
-    geo:long 67.7 ;
-    dct:title "Afghanistan" .</pre>
+&lt;https://localhost:4443/categories/1/#this&gt; a schema:ProductGroup ;
+    dct:title "Beverages" ;
+    dct:description "Soft drinks coffees teas beers and ales" ;
+    schema:name "Beverages" ;
+    schema:identifier "1" ;
+    schema:description "Soft drinks coffees teas beers and ales" ;
+    foaf:depiction &lt;https://localhost:4443/uploads/ec56b79671b30ecb98316d9b766fba198286b3b6&gt; .</pre>
+            <p class="exhibit-links">Live: <a href="https://northwind-traders.demo.linkeddatahub.com/categories/1/" target="_blank">/categories/1/</a></p>
         </div>
     </div>
-    <p class="lead">If you are ready to import some CSV, see our step-by-step tutorial on <a href="../../../user-guide/import-data/import-csv-data/">creating an CSV import</a>.</p>
+    <div>
+        <h2 id="management">Management</h2>
+        <table>
+            <caption class="ac-vh">CSV import actions and their CLI commands</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Action</th>
+                    <th scope="col">CLI command</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row">Create CSV import from an uploaded file and a query (<samp>--file</samp>, <samp>--query</samp>, <samp>--delimiter</samp>)</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh add csv-import</samp></a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Import a local CSV file end-to-end (<samp>--csv-file</samp>, <samp>--query-file</samp>, <samp>--delimiter</samp>)</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh import csv</samp></a></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <p class="ldh-body-lg">If you are ready to import some CSV, follow the user guide on <a href="../../../user-guide/import-data/import-csv-data/">creating a CSV import</a>.</p>
 </div>"""^^rdf:XMLLiteral ;
         rdfs:seeAlso <https://www.w3.org/TR/2015/REC-csv2rdf-20151217/>,
             <https://www.w3.org/TR/sparql11-query/#construct> .
diff --git a/docs/reference/imports/rdf.ttl b/docs/reference/imports/rdf.ttl
index 68cd42ea..68d1523c 100644
--- a/docs/reference/imports/rdf.ttl
+++ b/docs/reference/imports/rdf.ttl
@@ -1,171 +1,136 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
 @prefix rdfs:   <http://www.w3.org/2000/01/rdf-schema#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-  
+
 <> a dh:Item ;
     dct:title "RDF imports" ;
     dct:description "RDF imports and transforming RDF using SPARQL CONSTRUCT" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">RDF imports and transforming RDF using SPARQL CONSTRUCT</p>
+    <p class="ldh-body-lg">RDF imports and transforming RDF using SPARQL CONSTRUCT</p>
+    <div class="ac-alert va-informative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">Read the shared <a href="../#mapping-queries">mapping query rules</a> first — they apply to CSV and RDF imports alike.</p>
+        </div>
+    </div>
     <p>An RDF import is a combination of multiple resources:</p>
     <dl>
         <dt>File</dt>
-        <dd>The RDF file to be imported</dd>
+        <dd>The RDF file to be imported (<code>ldh:file</code>)</dd>
         <dt>Transformation query (optional)</dt>
-        <dd>A user-defined <code>CONSTRUCT</code> query that transforms the input RDF into another RDF</dd>
+        <dd>A user-defined <code>CONSTRUCT</code> query that transforms the input RDF into a different RDF representation (<code>spin:query</code>)</dd>
         <dt>Graph (optional)</dt>
-        <dd>The target graph (document) to which converted items will be <a href="../../http-api/#ld-post">POST</a>ed</dd>
+        <dd>The target graph (document) to which converted items are appended with <a href="../../http-api/#ld-post"><code>POST</code></a> (<code>sd:name</code>)</dd>
     </dl>
-    <p><em>Either the transformation query or the target graph needs to be specified, not both.</em></p>
+    <div class="ac-alert va-informative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">Specify either the transformation query or the target graph, not both.</p>
+        </div>
+    </div>
     <p>If the graph is specified, the resulting RDF data is appended to a single document.</p>
-    <p>If the transformation query is specified, the resulting data should contain document instances in order to attach to the <a href="../../dataset/#structure">document hierarchy</a>. The documents have to be URI resources. The document graphs have to be <em>explicitly specified</em> using a <code>GRAPH</code> block in the <code>CONSTRUCT</code> template (which is a
-    <a href="https://jena.apache.org/documentation/query/construct-quad.html" target="_blank">Jena-specific extension</a> of SPARQL 1.1), otherwise the import result will end up in the default graph of the application's RDF dataset, which is not accessible via LinkedDataHub.</p>
-    <p>The import process runs asynchronously in the background, i.e. the import item is created before the process completes.
-        Currently the only way to determine when it completes is to refresh the import item and check the import
-        status (completed/failed). Upon successful report, metadata such as the number of imported RDF triples is attached
-        to the import.</p>
-    <p>The resulting RDF is split into documents (named graphs), which are then created one by one and validated against <a href="../../administration/ontologies/#constraints">constraints</a> in the process.
+    <p>If the transformation query is specified, the resulting data should contain document instances in order to attach to the <a href="../../dataset/#structure">document hierarchy</a>. The documents have to be URI resources. The document graphs have to be <em>explicitly specified</em> using a <code>GRAPH</code> block in the <code>CONSTRUCT</code> template (a
+        <a href="https://jena.apache.org/documentation/query/construct-quad.html" target="_blank">Jena-specific extension</a> of SPARQL 1.1); otherwise the import result ends up in the default graph of the dataspace's RDF dataset, which LinkedDataHub does not serve.</p>
+    <p>Imports run in the background — see <a href="../#execution">import execution</a>.</p>
+    <p>The resulting RDF is split into documents (named graphs), which are then created one by one and validated against <a href="../../administration/ontologies/#constraints">constraints</a> as they are created.
         Constraint violations, if any, are attached to the import item.</p>
     <div>
-        <p>Lets assume we want to import SKOS concept data:</p>
-        <pre>@prefix : &lt;http://vocabularies.unesco.org/thesaurus/&gt; .
-@prefix skos: &lt;http://www.w3.org/2004/02/skos/core#&gt; .
-@prefix dcterms: &lt;http://purl.org/dc/terms/&gt; .
-@prefix xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt; .
+        <h2 id="example">Running example</h2>
+        <p>The running example connects the Northwind Traders dataspace to the <a href="https://unesco-thesaurus.demo.linkeddatahub.com/" target="_blank">UNESCO Thesaurus dataspace</a>:
+            each Northwind product category is mapped to the thesaurus concept it corresponds to, using the SKOS mapping relations. The mapping file
+            also types the categories as <code>skos:Concept</code>, which makes the relations applicable (and lets the
+            <a href="../../administration/packages/">taxonomy editor package</a> render the categories as concepts):</p>
+        <pre>@prefix skos:   &lt;http://www.w3.org/2004/02/skos/core#&gt; .
+
+# 1 Beverages -&gt; Beverages
+&lt;https://northwind-traders.demo.linkeddatahub.com/categories/1/#this&gt; a skos:Concept ;
+    skos:closeMatch &lt;https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept3683/#this&gt; .
 
-:concept10 a skos:Concept ;
-    dcterms:modified "2006-05-23T00:00:00"^^xsd:dateTime ;
-    skos:inScheme &lt;http://vocabularies.unesco.org/thesaurus&gt; ;
-    skos:narrower :concept4938 , :concept7597 ;
-    skos:prefLabel "Right to education"@en , "Droit à l'éducation"@fr , "Derecho a la educación"@es , "Право на образование"@ru ;
-    skos:related :concept9 , :concept556 , :concept557 , :concept1519 , :concept5052 ;
-    skos:topConceptOf &lt;http://vocabularies.unesco.org/thesaurus&gt; .
+# 2 Condiments -&gt; Food (no finer concept in the thesaurus)
+&lt;https://northwind-traders.demo.linkeddatahub.com/categories/2/#this&gt; a skos:Concept ;
+    skos:broadMatch &lt;https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept1812/#this&gt; .
 
-:concept1000 a skos:Concept ;
-    dcterms:modified "2006-05-23T00:00:00"^^xsd:dateTime ;
-    skos:broader :concept389 ;
-    skos:inScheme &lt;http://vocabularies.unesco.org/thesaurus&gt; ;
-    skos:prefLabel "Talent"@en , "Talent"@fr , "Talento"@es , "Талант"@ru ;
-    skos:related :concept993 , :concept996 , :concept3086 .
+# 3 Confections -&gt; Sugar
+&lt;https://northwind-traders.demo.linkeddatahub.com/categories/3/#this&gt; a skos:Concept ;
+    skos:relatedMatch &lt;https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept3495/#this&gt; .
 
-:concept10003 a skos:Concept ;
-    dcterms:modified "2006-05-23T00:00:00"^^xsd:dateTime ;
-    skos:altLabel "Entrevue"@fr ;
-    skos:broader :concept4725 ;
-    skos:inScheme &lt;http://vocabularies.unesco.org/thesaurus&gt; ;
-    skos:prefLabel "Interviews"@en , "Entretien"@fr , "Entrevista"@es , "Интервью"@ru .</pre>
+# … one mapping per category, 8 in total</pre>
+        <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories/unesco-mappings.ttl" target="_blank">categories/unesco-mappings.ttl</a></p>
+        <p>Imported with the <em>graph</em> variant, the whole file is appended to one target document — a single graph of mappings that describe the
+            two dataspaces' resources:</p>
+        <pre>&lt;#mappings-import&gt; a ldh:RDFImport ;
+    dct:title "UNESCO category mappings" ;
+    ldh:file &lt;https://localhost:4443/uploads/751b60d9516f4630a6d39bc304ce649ec3a740e9&gt; ;
+    sd:name &lt;https://localhost:4443/categories/mappings/&gt; .</pre>
+    </div>
+    <div>
+        <h2 id="transformation">Transformation</h2>
+        <p>This step is used to transform the RDF data that is being imported, if necessary (to a different vocabulary, for example). It also connects instances in the imported data to the documents in LinkedDataHub's <a href="../../dataset/">dataset</a>.</p>
+        <p>The mapping is a user-defined SPARQL <code>CONSTRUCT</code> that follows the shared <a href="../#mapping-queries">mapping query rules</a>.</p>
         <div>
-            <h3 id="transformation">Transformation</h3>
-            <p>This step is used to transform the RDF data that is being imported, if necessary (to a different vocabulary, for example). It also connects instances in the imported data to the documents in LinkedDataHub's <a href="../../dataset/" target="_blank">dataset</a>.</p>
-            <p>The mapping is a user-defined SPARQL <code>CONSTRUCT</code>. These are the rules that hold for mapping queries:</p>
-            <ul>
-                <li><code>BASE</code> value is automatically set to the imported file's URI. Do not add an explicit <code>BASE</code> to the query.</li>
-                <li><code>$base</code> binding is set to the value of the application's baseURI</li>
-                <li>use<code>OPTIONAL</code> for optional values</li>
-                <li>use <code>BIND()</code> to introduce new values and/or cast literals to the appropriate result datatype or URI</li>
-                <li>when building document URIs, use natural IDs from the input data (or UUIDs if there are no IDs) and remember to URI-encode them using <code>encode_for_uri</code></li>
-                <li>use a <code>GRAPH</code> block in the constructor template to construct triples for a specific document</li>
-                <li>construct <dfn>dh:Container</dfn> instances to create new container documents or <dfn>dh:Item</dfn> instances to create new item documents. <code>dct:title</code> values are mandatory for documents.</li>
-                <li>if you're constructing non-information resource (e.g. thing, concept) descriptions, assign them URIs with fragment identified (e.g. <samp>#this</samp>) and pair them with item documents using the <code>foaf:primaryTopic</code> property</li>
-            </ul>
-            <p>We plan to provide a UI-based mapping tool in the future.</p>
-            <div>
-                <h4 id="transformation-example">Example</h4>
-                <p>In this example we pair each SKOS concept from the imported dataset with a new document:</p>
-                <pre><code>PREFIX dh:    &lt;https://www.w3.org/ns/ldt/document-hierarchy#&gt;
-PREFIX sioc:  &lt;http://rdfs.org/sioc/ns#&gt;
-PREFIX foaf:  &lt;http://xmlns.com/foaf/0.1/&gt;
-PREFIX skos:  &lt;http://www.w3.org/2004/02/skos/core#&gt;
-PREFIX dct:   &lt;http://purl.org/dc/terms/&gt;
+            <h3 id="transformation-example">Example</h3>
+            <p>Imported with the <em>transformation</em> variant instead, each mapping is routed into its own category's document. The mapping file
+                describes the <em>demo's</em> categories, so the transformation also rebases their URIs onto this dataspace — an ETL step that makes the
+                same file installable against any base URI:</p>
+            <pre>PREFIX skos:  &lt;http://www.w3.org/2004/02/skos/core#&gt;
 
 CONSTRUCT
 {
-    GRAPH ?item
+    GRAPH ?graph
     {
-        ?concept ?p ?o .
-
-        ?item a dh:Item ;
-            foaf:primaryTopic ?concept ;
-            sioc:has_container ?container ;
-            dh:slug ?id ;
-            dct:title ?prefLabel .
+        ?category a skos:Concept ;
+            ?mapping ?concept .
     }
 }
 WHERE
 {
-    SELECT *
-    {
-        ?concept a skos:Concept .
-        BIND (STRAFTER(STR(?concept), "http://vocabularies.unesco.org/thesaurus/") AS ?id)
-        BIND (uri(concat(str($base), "concepts/")) AS ?container)
-        BIND (uri(concat(str(?container), encode_for_uri(?id), "/")) AS ?item)
-
-        ?concept ?p ?o
-        OPTIONAL
-        {
-            ?concept skos:prefLabel ?prefLabel
-            FILTER (langMatches(lang(?prefLabel), "en"))
-        }
-    }
-}</code></pre>
-                <p>When the import is complete, you should be able to see the imported documents as children of the <samp>${base}concepts/</samp> container.</p>
-                <p>The result of our mapping:</p>
-                <pre>@prefix : &lt;http://vocabularies.unesco.org/thesaurus/&gt; .
-@prefix skos: &lt;http://www.w3.org/2004/02/skos/core#&gt; .
-@prefix dcterms: &lt;http://purl.org/dc/terms/&gt; .
-@prefix xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt; .
-@prefix foaf: &lt;http://xmlns.com/foaf/0.1/&gt; .
-@prefix sioc: &lt;http://rdfs.org/sioc/ns#&gt; .
-@prefix dh: &lt;https://www.w3.org/ns/ldt/document-hierarchy#&gt; .
-
-:concept10 a skos:Concept ;
-    dcterms:modified "2006-05-23T00:00:00"^^xsd:dateTime ;
-    skos:inScheme &lt;http://vocabularies.unesco.org/thesaurus&gt; ;
-    skos:narrower :concept4938 , :concept7597 ;
-    skos:prefLabel "Right to education"@en , "Droit à l'éducation"@fr , "Derecho a la educación"@es , "Право на образование"@ru ;
-    skos:related :concept9 , :concept556 , :concept557 , :concept1519 , :concept5052 ;
-    skos:topConceptOf &lt;http://vocabularies.unesco.org/thesaurus&gt; .
-
-&lt;concepts/c499e66a-8036-4637-929d-0d809177883e/&gt; a dh:Item ;
-    sioc:has_container &lt;concepts/&gt; ;
-    dh:slug "c499e66a-8036-4637-929d-0d809177883e" ;
-    dcterms:title "Right to education"@en ;
-    foaf:primaryTopic :concept10 .
+    ?remote a skos:Concept ;
+        ?mapping ?concept .
+    FILTER(?mapping IN (skos:closeMatch, skos:broadMatch, skos:relatedMatch))
 
-:concept1000 a skos:Concept ;
-    dcterms:modified "2006-05-23T00:00:00"^^xsd:dateTime ;
-    skos:broader :concept389 ;
-    skos:inScheme &lt;http://vocabularies.unesco.org/thesaurus&gt; ;
-    skos:prefLabel "Talent"@en , "Talent"@fr , "Talento"@es , "Талант"@ru ;
-    skos:related :concept993 , :concept996 , :concept3086 .
+    # rebase the demo's category URIs onto this dataspace's $base
+    BIND(strafter(str(?remote), "northwind-traders.demo.linkeddatahub.com/") AS ?path)
+    BIND(uri(concat(str($base), strbefore(?path, "#"))) AS ?graph)
+    BIND(uri(concat(str($base), ?path)) AS ?category)
+}</pre>
+            <p>When the import is complete, each category document carries its mapping. The Beverages document gains:</p>
+            <pre>@prefix skos: &lt;http://www.w3.org/2004/02/skos/core#&gt; .
 
-&lt;concepts/f41910fa-9077-4656-8f73-752fd923a79b/&gt; a dh:Item ;
-    sioc:has_container &lt;concepts/&gt; ;
-    dh:slug "f41910fa-9077-4656-8f73-752fd923a79b" ;
-    dcterms:title "Talent"@en ;
-    foaf:primaryTopic :concept1000 .
-
-:concept10003 a skos:Concept ;
-    dcterms:modified "2006-05-23T00:00:00"^^xsd:dateTime ;
-    skos:altLabel "Entrevue"@fr ;
-    skos:broader :concept4725 ;
-    skos:inScheme &lt;http://vocabularies.unesco.org/thesaurus&gt; ;
-    skos:prefLabel "Interviews"@en , "Entretien"@fr , "Entrevista"@es , "Интервью"@ru .
-
-&lt;concepts/2afb2e06-5081-4db1-9255-660fcd1b3ec8/&gt; a dh:Item ;
-    sioc:has_container &lt;concepts/&gt; ;
-    dh:slug "2afb2e06-5081-4db1-9255-660fcd1b3ec8" ;
-    dcterms:title "Interviews"@en ;
-    foaf:primaryTopic :concept10003 .</pre>
-            </div>
+&lt;https://localhost:4443/categories/1/#this&gt; a skos:Concept ;
+    skos:closeMatch &lt;https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept3683/#this&gt; .</pre>
+            <p>The mapped concept URIs stay remote on purpose: following one leads into the UNESCO Thesaurus dataspace through the
+                <a href="../../http-api/#ld-proxy">Linked Data proxy</a>, and queries can join the two dataspaces over their
+                <a href="../../http-api/#federation">federated</a> SPARQL endpoints.</p>
         </div>
     </div>
-    <p class="lead">If you are ready to import some RDF, see our step-by-step tutorial on <a href="../../../user-guide/import-data/import-rdf-data/">creating an RDF import</a>.</p>
+    <div>
+        <h2 id="management">Management</h2>
+        <table>
+            <caption class="ac-vh">RDF import actions and their CLI commands</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Action</th>
+                    <th scope="col">CLI command</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row">Create RDF import from an uploaded file (<samp>--file</samp>, with <samp>--query</samp> or <samp>--graph</samp>)</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh add rdf-import</samp></a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Import a local RDF file end-to-end (<samp>--rdf-file</samp>, <samp>--content-type</samp>, with <samp>--query-file</samp> or <samp>--graph</samp>)</th>
+                    <td><a href="../../command-line-interface/#commands"><samp>ldh import rdf</samp></a></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <p class="ldh-body-lg">If you are ready to import some RDF, follow the user guide on <a href="../../../user-guide/import-data/import-rdf-data/">creating an RDF import</a>.</p>
 </div>"""^^rdf:XMLLiteral ;
         rdfs:seeAlso <https://www.w3.org/TR/sparql11-query/#construct> .
 
diff --git a/docs/reference/migrating-from-5x.ttl b/docs/reference/migrating-from-5x.ttl
new file mode 100644
index 00000000..afec49e7
--- /dev/null
+++ b/docs/reference/migrating-from-5x.ttl
@@ -0,0 +1,213 @@
+@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
+@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
+@prefix dct:    <http://purl.org/dc/terms/> .
+
+<> a dh:Item ;
+    dct:title "Migrating from 5.x" ;
+    dct:description "What 6.0.0 changes for an application stylesheet, a deployment and an API client" ;
+    rdf:_1 <#content> .
+
+<#content> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+    <p class="ldh-body-lg">What 6.0.0 changes for an application stylesheet, a deployment and an API client</p>
+    <div class="ac-alert va-negative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">warning</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">There is no data migration. An existing deployment re-seeds: its dataspace descriptions and every document in its stores are
+                typed in namespaces this release no longer reads.</p>
+        </div>
+    </div>
+    <div>
+        <h2 id="stylesheets">Stylesheets</h2>
+        <p>The platform stylesheet is <samp>xsl/layout.xsl</samp>. An <code>xsl:import</code> of <samp>xsl/bootstrap/2.3.2/layout.xsl</samp> fails to compile, which is
+            the first error an application stylesheet hits.</p>
+        <div>
+            <h3 id="class-vocabulary">Class vocabulary</h3>
+            <p>Legacy Bootstrap buttons (<samp>btn</samp>, <samp>btn-primary</samp>, <samp>btn-large</samp>) become the <samp>ac-btn</samp> intent, appearance and size
+                vocabulary: <samp>ac-btn in-primary ap-solid sz-md</samp>. The <a href="../stylesheets/#css">stylesheets</a> page lists the axes and the classes on each.</p>
+            <p><samp>pull-left</samp> and <samp>pull-right</samp> have no replacement, because the design system lays out with flex and grid. A stylesheet that extends
+                the removed vocabulary can be diffed against <samp>ldh.css</samp>, the one app layer LinkedDataHub loads over the vendored design kits.</p>
+        </div>
+        <div>
+            <h3 id="template-modes">Template modes</h3>
+            <p>Every <code>bs2:</code> mode takes its design-system component name. This is the change that makes the release a major one: an override of a
+                <code>bs2:</code> mode still compiles, never fires, and reports nothing.</p>
+            <table>
+                <caption class="ac-vh">Template modes renamed in 6.0.0</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">5.x</th>
+                        <th scope="col">6.0.0</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr><td><code>bs2:Row</code></td><td><code>ldh:BlockRow</code></td></tr>
+                    <tr><td><code>bs2:Header</code></td><td><code>ac:BlockHeader</code></td></tr>
+                    <tr><td><code>bs2:PropertyList</code></td><td><code>ac:PropertyEditor</code></td></tr>
+                    <tr><td><code>bs2:Form</code></td><td><code>ac:ResourceForm</code></td></tr>
+                    <tr><td><code>bs2:NavBar</code></td><td><code>ac:Header</code></td></tr>
+                    <tr><td><code>bs2:Lookup</code></td><td><code>ldh:Combobox</code></td></tr>
+                    <tr><td><code>ac:ModeList</code></td><td><code>ac:ModeSwitcher</code></td></tr>
+                    <tr><td><code>ldh:LeftSidebar</code></td><td><code>ldh:DataspaceDrawer</code></td></tr>
+                </tbody>
+            </table>
+        </div>
+        <div>
+            <h3 id="parameters-and-functions">Parameters and functions</h3>
+            <p>The <code>$ac:langs</code> and <code>$ac:lang</code> parameters become the <code>ac:langs()</code> and <code>ac:langs()[1]</code> functions. An
+                <code>xsl:with-param</code> left behind is silently ignored. A stylesheet still declaring <code>xmlns:lapp</code> compiles and silently binds nothing.</p>
+            <table>
+                <caption class="ac-vh">Stylesheet parameters and functions renamed in 6.0.0</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">5.x</th>
+                        <th scope="col">6.0.0</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr><td><code>$lapp:origin</code></td><td><code>$lds:origin</code></td></tr>
+                    <tr><td><code>$lapp:Context</code></td><td><code>$lds:Context</code></td></tr>
+                    <tr><td><code>lapp:origin()</code></td><td><code>lds:origin()</code></td></tr>
+                    <tr><td><code>lapp:base()</code></td><td><code>lds:base()</code></td></tr>
+                    <tr><td><code>lapp:application-description()</code></td><td><code>lds:dataspace-description()</code></td></tr>
+                    <tr><td><code>ldt:base()</code></td><td><code>lds:base()</code></td></tr>
+                    <tr><td><code>$ldt:base</code></td><td>removed</td></tr>
+                </tbody>
+            </table>
+        </div>
+        <div>
+            <h3 id="removed-libraries">Removed libraries</h3>
+            <p>Overrides depending on <samp>bootstrap.js</samp>, jQuery, WYMEditor or the sprite icons need rewriting. IXSL templates drive the dropdowns and modals,
+                the <samp>msi</samp> font draws the icons, and the <a href="../user-interface/">RDFa editor</a> edits <code>rdf:XMLLiteral</code> content.</p>
+        </div>
+    </div>
+    <div>
+        <h2 id="namespaces">Namespaces</h2>
+        <p>Every namespace LinkedDataHub defines now lives under <samp>https://w3id.org/atomgraph/linkeddatahub</samp>. Stylesheets and stored data are both affected.</p>
+        <table>
+            <caption class="ac-vh">Namespace URIs in 5.x and 6.0.0</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Prefix</th>
+                    <th scope="col">5.x</th>
+                    <th scope="col">6.0.0</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><code>dh:</code></td>
+                    <td><samp>https://www.w3.org/ns/ldt/document-hierarchy#</samp></td>
+                    <td><samp>https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#</samp></td>
+                </tr>
+                <tr>
+                    <td><code>lapp:</code> becomes <code>lds:</code></td>
+                    <td><samp>https://w3id.org/atomgraph/linkeddatahub/apps#</samp></td>
+                    <td><samp>https://w3id.org/atomgraph/linkeddatahub/dataspaces#</samp></td>
+                </tr>
+                <tr>
+                    <td><code>ldt:</code></td>
+                    <td><samp>https://www.w3.org/ns/ldt</samp></td>
+                    <td>removed</td>
+                </tr>
+                <tr>
+                    <td><code>ct:</code>, <code>c:</code></td>
+                    <td>sibling namespaces of <code>ldt:</code></td>
+                    <td>removed</td>
+                </tr>
+            </tbody>
+        </table>
+        <p>The <code>dh:</code> prefix, its class names and <samp>DH.java</samp> are unchanged, but every <code>dh:Container</code> and <code>dh:Item</code> already in a
+            triplestore is typed in the old namespace.</p>
+        <p>The <a href="../dataspace/">dataspace</a> classes are renamed with the prefix: <code>lapp:Application</code> becomes <code>lds:Dataspace</code>,
+            <code>lapp:EndUserApplication</code> becomes <code>lds:EndUserDataspace</code>, <code>lapp:AdminApplication</code> becomes <code>lds:AdminDataspace</code>,
+            and the three constructor individuals follow. The <code>lapp:application</code> <code>Link</code> relation that names the dataspace a response belongs to
+            becomes <code>lds:dataspace</code>. <code>lapp:Dataset</code>, <code>lapp:Package</code> and the remaining properties keep their local names under the new
+            prefix, and <code>lds:prefix</code> and <code>lds:versioningRepository</code> — used in configuration and read in Java, but never declared — are now declared.</p>
+        <p><code>ldt:ontology</code>, <code>ldt:service</code> and <code>ldt:base</code> become <code>lds:ontology</code>, <code>lds:service</code> and
+            <code>lds:base</code>, and the <samp>ldt#ontology</samp> and <samp>ldt#base</samp> <code>Link</code> relations with them, so
+            <samp>config/dataspaces.trig</samp> and <samp>config/system.trig</samp> each need one prefix where they needed two. The Java <code>LDT</code> vocabulary,
+            the bundled <samp>ldt.ttl</samp> and the <code>rdfs:subClassOf ldt:Application</code> on the dataspace class are gone, and <code>lacl:requestAccess</code>
+            now ranges over <code>foaf:Document</code>.</p>
+        <p><code>lapp:frontendProxy</code> is removed with no replacement under the new prefix, having been read by nothing. The frontend (Varnish) proxy used for
+            cache-invalidation requests comes from the <code>ldhc:frontendProxy</code> servlet parameter, set from <samp>FRONTEND_PROXY</samp> by
+            <samp>platform/entrypoint.sh</samp>. <code>lds:backendProxy</code> stays, since a proxied <code>lds:Dataset</code> is read through it.</p>
+    </div>
+    <div>
+        <h2 id="deployment">Deployment</h2>
+        <div>
+            <h3 id="triplestore">Triplestore</h3>
+            <p>One <samp>fuseki</samp> service replaces <samp>fuseki-admin</samp> and <samp>fuseki-end-user</samp>, holding an end-user and an admin TDB2 dataset per
+                dataspace, declared in <samp>config/fuseki/config.ttl</samp> and persisted under <samp>fuseki/&lt;dataset&gt;/</samp>. Datasets are named after the
+                dataspace origin with the deployment host dropped and the role appended: <samp>end-user</samp>, <samp>admin</samp>,
+                <samp>northwind-traders.demo.end-user</samp>.</p>
+            <p>An existing deployment moves its two TDB2 directories under the new dataset names, points every <code>lds:service</code> in
+                <samp>config/system.trig</samp> at <samp>http://fuseki:3030/&lt;dataset&gt;/</samp>, and merges the two stores heap settings and <samp>mem_limit</samp>.
+                <samp>varnish-admin</samp> and <samp>varnish-end-user</samp> stay as they were. The <a href="../triplestores/">triplestores</a> page describes the
+                resulting layout.</p>
+        </div>
+        <div>
+            <h3 id="sef-compiler">Client-side package composition</h3>
+            <p>Composing package stylesheets into the client SEF needs the new <samp>sef-compiler</samp> service. A deployment with its own compose file adds it, the
+                platform service's <code>depends_on</code> on it, and the <samp>./sef</samp> bind mount at <samp>/var/www/linkeddatahub/sef</samp>.
+                <samp>SEF_ROOT</samp> and <samp>SEF_COMPILER</samp> are optional: without them, packages compose server-side only, as in 5.10.0.</p>
+            <p><samp>CLIENT_STYLESHEET</samp> names the client stylesheet the SEF is composed from, and defaults to the platform's <samp>client.xsl</samp>. A deployment
+                bootstrapping its own sets it to that stylesheet's webapp path. Such a stylesheet must import the platform's <samp>client.xsl</samp> directly, and its
+                layout prefers <code>ldh:client-stylesheet()</code> over its own SEF.</p>
+        </div>
+        <div>
+            <h3 id="package-root">Package directory</h3>
+            <p>A deployment with its own compose file adds the <samp>./packages</samp> bind mount at <samp>/var/www/linkeddatahub/packages</samp>
+                (<samp>PACKAGE_ROOT</samp>), where copies of imported package stylesheets survive a redeploy.</p>
+        </div>
+        <div>
+            <h3 id="oauth-grants">OAuth grants</h3>
+            <p>The <samp>oauth2-login</samp> and <samp>oauth2-authorize</samp> grants move from the administration store to the end-user application's
+                <samp>namespace-ontology.trig.template</samp>, as <code>acl:accessTo</code> on the login and callback URLs. An existing deployment re-seeds or migrates
+                them.</p>
+        </div>
+    </div>
+    <div>
+        <h2 id="packages">Packages</h2>
+        <p>A package stylesheet is composed right after <samp>hooks.xsl</samp>. It can specialise an open mode — <code>ldh:RowHook</code>, the tree node, the value
+            leaves in <samp>imports/values.xsl</samp> — and no longer replaces a sealed mode, a typed rule or a global.</p>
+        <p>A package ontology imported before this release is materialized under <samp>admin/ontologies/</samp> on the next request, and is edited there from then on. A
+            later change to the published package reaches the application only after that document is deleted.</p>
+    </div>
+    <div>
+        <h2 id="http-api">HTTP API</h2>
+        <div class="ac-alert va-negative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">warning</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">A write to a document that already exists must be conditional: <code>If-Match</code> with the document's current
+                    <code>ETag</code>, or <code>If-None-Match: *</code> to create. An unconditional write is answered <code>428 Precondition Required</code>.</p>
+            </div>
+        </div>
+        <p>A client that wrote unconditionally now reads the tag first, as the <a href="../command-line-interface/"><samp>ldh</samp> CLI</a> does for you. An entity tag
+            identifies a negotiated variant, so the read supplying the validator must send the same <code>Accept</code> as the write quoting it, or the write is refused
+            <code>412</code>. The <a href="../http-api/">HTTP API</a> page has the request shapes.</p>
+        <p>The access control query fails closed on a typeless resource, so a request for a URL that does not exist is answered <code>403</code> rather than
+            <code>404</code> unless the agent is the owner.</p>
+        <p><code>ldh:container</code> leaves the ontology, the <code>ldh:ViewConstructor</code> form and the view query. A view's <dfn>Create</dfn> button determines the
+            container from the view's own solutions.</p>
+    </div>
+    <div>
+        <h2 id="java-api">Java API</h2>
+        <p>Server-side extensions move with the model. The names below changed together; nothing else in the API did.</p>
+        <table>
+            <caption class="ac-vh">Java packages, classes and accessors renamed in 6.0.0</caption>
+            <thead>
+                <tr>
+                    <th scope="col">5.x</th>
+                    <th scope="col">6.0.0</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr><td><code>com.atomgraph.linkeddatahub.apps</code></td><td><code>com.atomgraph.linkeddatahub.dataspaces</code></td></tr>
+                <tr><td><code>Application</code>, <code>AdminApplication</code>, <code>EndUserApplication</code></td><td><code>Dataspace</code>, <code>AdminDataspace</code>, <code>EndUserDataspace</code></td></tr>
+                <tr><td><code>LAPP</code></td><td><code>LDS</code></td></tr>
+                <tr><td><code>getApplication()</code>, <code>getAdminApplication()</code>, <code>getEndUserApplication()</code></td><td><code>getDataspace()</code>, <code>getAdminDataspace()</code>, <code>getEndUserDataspace()</code></td></tr>
+            </tbody>
+        </table>
+    </div>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/reference/stylesheets.ttl b/docs/reference/stylesheets.ttl
index 9f30f322..a095e800 100644
--- a/docs/reference/stylesheets.ttl
+++ b/docs/reference/stylesheets.ttl
@@ -1,42 +1,84 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-  
+
 <> a dh:Item ;
     dct:title "Stylesheets" ;
-    dct:description "Built-in XSLT and CSS stylesheets" ;
+    dct:description "Built-in XSLT, CSS and JavaScript assets, and how to override them" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Built-in XSLT and CSS stylesheets</p>
+    <p class="ldh-body-lg">Built-in XSLT, CSS and JavaScript assets, and how to override them</p>
     <div>
         <h2 id="xslt">XSLT</h2>
         <p>XSLT is a functional, Turing-complete XML transformation language.</p>
-        <p>LinkedDataHub's <a href="https://www.w3.org/TR/xslt-30/" target="_blank">XSLT 3.0</a> stylesheets work by transforming <a href="https://www.w3.org/TR/rdf-syntax-grammar/" target="_blank">RDF/XML</a> response body from the underlying <a href="../http-api/" target="_blank">HTTP API</a>. Additional metadata from RDF vocabularies is used to improve user experience.</p>
+        <p>LinkedDataHub's <a href="https://www.w3.org/TR/xslt-30/" target="_blank">XSLT 3.0</a> stylesheets work by transforming the <a href="https://www.w3.org/TR/rdf-syntax-grammar/" target="_blank">RDF/XML</a> response body from the underlying <a href="../http-api/" target="_blank">HTTP API</a>. Additional metadata from RDF vocabularies is used to improve the user experience.</p>
         <div>
             <h3 id="rdf-xml-plain">Plain RDF/XML</h3>
             <p><a href="https://www.w3.org/TR/rdf-syntax-grammar/" target="_blank">RDF/XML</a> is an important RDF syntax which functions as a bridge to the XML technology stack. The stylesheets use Jena's <a href="https://jena.apache.org/documentation/io/rdfxml_howto.html#rdfxml-rdfxml-abbrev" target="_blank">"plain" RDF/XML</a> output which groups statements by subject and does not nest resource descriptions. This allows for predictable XPath patterns:</p>
-            <ul>
-                <li><code>/rdf:RDF</code> — represents the RDF graph</li>
-                <li><code>/rdf:RDF/rdf:Description</code> or <code>/rdf:RDF/*[*][@rdf:about] | /rdf:RDF/*[*][@rdf:nodeID]</code> — resource description which contains properties</li>
-                <li><code>/rdf:RDF/rdf:Description/@rdf:about</code> — subject resource URI</li>
-                <li><code>/rdf:RDF/rdf:Description/@rdf:nodeID</code> — subject blank node ID</li>
-                <li><code>/rdf:RDF/rdf:Description/*</code> predicate (e.g. <code>rdf:type</code>) whose URI is <code>concat(namespace-uri(), local-name())</code></li>
-                <li><code>/rdf:RDF/rdf:Description/*/@rdf:resource</code> — object resource</li>
-                <li><code>/rdf:RDF/rdf:Description/*/@rdf:nodeID</code> — object blank node ID</li>
-                <li><code>/rdf:RDF/rdf:Description/*/text()</code> — literal value</li>
-            </ul>
+            <table>
+                <caption class="ac-vh">XPath expressions and what they match in RDF/XML</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">XPath</th>
+                        <th scope="col">Represents</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><code>/rdf:RDF</code></td>
+                        <td>The RDF graph</td>
+                    </tr>
+                    <tr>
+                        <td><code>/rdf:RDF/rdf:Description</code> or <code>/rdf:RDF/*[*][@rdf:about] | /rdf:RDF/*[*][@rdf:nodeID]</code></td>
+                        <td>Resource description which contains properties</td>
+                    </tr>
+                    <tr>
+                        <td><code>/rdf:RDF/rdf:Description/@rdf:about</code></td>
+                        <td>Subject resource URI</td>
+                    </tr>
+                    <tr>
+                        <td><code>/rdf:RDF/rdf:Description/@rdf:nodeID</code></td>
+                        <td>Subject blank node ID</td>
+                    </tr>
+                    <tr>
+                        <td><code>/rdf:RDF/rdf:Description/*</code></td>
+                        <td>Predicate (e.g. <code>rdf:type</code>) whose URI is <code>concat(namespace-uri(), local-name())</code></td>
+                    </tr>
+                    <tr>
+                        <td><code>/rdf:RDF/rdf:Description/*/@rdf:resource</code></td>
+                        <td>Object resource</td>
+                    </tr>
+                    <tr>
+                        <td><code>/rdf:RDF/rdf:Description/*/@rdf:nodeID</code></td>
+                        <td>Object blank node ID</td>
+                    </tr>
+                    <tr>
+                        <td><code>/rdf:RDF/rdf:Description/*/text()</code></td>
+                        <td>Literal value</td>
+                    </tr>
+                </tbody>
+            </table>
+            <p>The Northwind Chai product in that shape — the input that the templates match:</p>
+            <pre>&lt;rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:schema="https://schema.org/"&gt;
+    &lt;rdf:Description rdf:about="https://localhost:4443/products/1/#this"&gt;
+        &lt;rdf:type rdf:resource="https://schema.org/Product"/&gt;
+        &lt;schema:name&gt;Chai&lt;/schema:name&gt;
+        &lt;schema:category rdf:resource="https://localhost:4443/categories/1/#this"/&gt;
+        &lt;schema:provider rdf:resource="https://localhost:4443/suppliers/1/#this"/&gt;
+    &lt;/rdf:Description&gt;
+&lt;/rdf:RDF&gt;</pre>
         </div>
         <div>
-            <h3 id="stylesheets">Stylesheets</h3>
+            <h3 id="stylesheet-structure">Stylesheet structure</h3>
             <p>XSLT stylesheet components used by LinkedDataHub:</p>
             <dl>
                 <dt>Includes</dt>
-                <dd><code>&lt;xsl:include&gt;</code> is used to include one stylesheet into another. The import mechanism is specified in <a href="https://www.w3.org/TR/xslt-30/#include" target="_blank">3.10.2 Stylesheet Inclusion</a> the XSLT 3.0 specification. The templates from the included stylesheets have the same priority as those of the importing stylesheet.</dd>
+                <dd><code>&lt;xsl:include&gt;</code> is used to include one stylesheet into another. The inclusion mechanism is specified in <a href="https://www.w3.org/TR/xslt-30/#include" target="_blank">3.10.2 Stylesheet Inclusion</a> of the XSLT 3.0 specification. The templates from the included stylesheets have the same priority as those of the including stylesheet.</dd>
                 <dt>Imports</dt>
-                <dd><code>&lt;xsl:import&gt;</code> is used to import one stylesheet into another. The import mechanism is specified in <a href="https://www.w3.org/TR/xslt-30/#import" target="_blank">3.10.3 Stylesheet Import</a> the XSLT 3.0 specification. The templates from the imported stylesheets have lower priority than those of the importing stylesheet.</dd>
+                <dd><code>&lt;xsl:import&gt;</code> is used to import one stylesheet into another. The import mechanism is specified in <a href="https://www.w3.org/TR/xslt-30/#import" target="_blank">3.10.3 Stylesheet Import</a> of the XSLT 3.0 specification. The templates from the imported stylesheets have lower priority than those of the importing stylesheet.</dd>
                 <dt>Parameters</dt>
                 <dd>XSD-typed <a href="#parameters">global parameters</a> passed to the stylesheet</dd>
                 <dt>Keys</dt>
@@ -44,22 +86,22 @@
                 <dt>Templates</dt>
                 <dd><a href="#templates">Template rules</a> for XML node processing</dd>
             </dl>
-            <p>One XSLT stylesheet can be specified per application. In order to reuse LinkedDataHub's built-in templates, it should import the <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/src/main/webapp/static/com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/layout.xsl" target="_blank">system stylesheet <samp>layout.xsl</samp></a> and only override the necessary templates. That is however not a requirement, the stylesheet could also use its own independent transformation logic.</p>
-            <p>If there is no stylesheet specified for the application, the system stylesheet is used. It defines the overall layout and imports resource-level and container-specific stylesheets, as well as per-vocabulary stylesheets.</p>
+            <p>One XSLT stylesheet can be specified per dataspace. In order to reuse LinkedDataHub's built-in templates, it should import the <a href="https://github.com/AtomGraph/LinkedDataHub/blob/develop/src/main/webapp/static/com/atomgraph/linkeddatahub/xsl/layout.xsl" target="_blank">system stylesheet <samp>layout.xsl</samp></a> and only override the necessary templates. That is not a requirement, however; a stylesheet can also use its own independent transformation logic.</p>
+            <p>If there is no stylesheet specified for the dataspace, the system stylesheet is used. It defines the overall layout and imports resource-level and container-specific stylesheets, as well as per-vocabulary stylesheets.</p>
             <p>Note that LinkedDataHub itself imports stylesheets from <a href="https://github.com/AtomGraph/Web-Client" target="_blank">Web-Client</a>, which uses the same template modes but produces a much simpler layout.</p>
             <p>The same XSLT 3.0 stylesheets run in two environments. On the server they are executed by Saxon-HE to produce the initial HTML response. In the browser they are executed by <a href="https://www.saxonica.com/saxon-js/index.xml" target="_blank">Saxon-JS 3</a>, which provides IXSL (<a href="https://www.saxonica.com/saxonjs/documentation3/index.html#!ixsl-extension" target="_blank">Interactive XSLT extensions</a>) for reading and manipulating the browser DOM.</p>
-            <p>There is a dedicated <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/src/main/webapp/static/com/atomgraph/linkeddatahub/xsl/client.xsl" target="_blank">client-side stylesheet <samp>client.xsl</samp></a> that drives the browser. After the server-rendered page loads, its <code>main</code> template renders the layout client-side — the left sidebar, navigation, document and tab panes, content blocks, forms and modal dialogs are injected into the DOM using IXSL (e.g. <code>ixsl:append-content</code>). It also handles all subsequent navigation, so following links and switching documents re-renders in place without a full page reload. It imports and reuses the same document-, resource- and property-level templates as the server-side system stylesheet, but avoids loading per-vocabulary stylesheets in order to improve page load time. Templates of the client-side stylesheet can also be overridden.</p>
+            <p>There is a dedicated <a href="https://github.com/AtomGraph/LinkedDataHub/blob/develop/src/main/webapp/static/com/atomgraph/linkeddatahub/xsl/client.xsl" target="_blank">client-side stylesheet <samp>client.xsl</samp></a> that drives the browser. After the server-rendered page loads, its <code>main</code> template renders the layout client-side — the left sidebar, navigation, document and tab panes, content blocks, forms and modal dialogs are injected into the DOM using IXSL (e.g. <code>ixsl:append-content</code>). It also handles all subsequent navigation, so following links and switching documents re-renders in place without a full page reload. It imports and reuses the same document-, resource- and property-level templates as the server-side system stylesheet, but avoids loading per-vocabulary stylesheets in order to improve page load time. Templates of the client-side stylesheet can also be overridden.</p>
         </div>
         <div>
             <h3 id="namespaces">Namespaces</h3>
-            <table class="table">
-                <caption>Main namespaces used in XSLT stylesheets</caption>
+            <table>
+                <caption class="ac-vh">Namespace prefixes and their vocabularies</caption>
                 <thead>
                     <tr>
-                        <th>Prefix</th>
-                        <th>Namespace</th>
-                        <th>Vocabulary</th>
-                        <th>Description</th>
+                        <th scope="col">Prefix</th>
+                        <th scope="col">Namespace</th>
+                        <th scope="col">Vocabulary</th>
+                        <th scope="col">Description</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -72,38 +114,32 @@
                     <tr>
                         <td><code>srx:</code></td>
                         <td><code>http://www.w3.org/2005/sparql-results#</code></td>
-                        <td></td>
+                        <td><a href="https://www.w3.org/TR/rdf-sparql-XMLres/" target="_blank">SPARQL Query Results XML Format</a></td>
                         <td>Namespace for the <a href="https://www.w3.org/TR/rdf-sparql-XMLres/" target="_blank">SPARQL Query Results XML</a> elements, mostly used for matching input data</td>
                     </tr>
                     <tr>
                         <td><code>xsl:</code></td>
                         <td><code>http://www.w3.org/1999/XSL/Transform</code></td>
-                        <td></td>
+                        <td><a href="https://www.w3.org/TR/xslt-30/" target="_blank">XSL Transformations (XSLT) 3.0</a></td>
                         <td>Namespace for the XSLT stylesheet elements</td>
                     </tr>
                     <tr>
                         <td><code>ixsl:</code></td>
                         <td><code>http://saxonica.com/ns/interactiveXSLT</code></td>
-                        <td></td>
-                        <td>Namespace for the <a href="https://www.saxonica.com/saxon-js/documentation/index.html#!ixsl-extension" target="_blank">Interactive XSL extensions</a></td>
+                        <td><a href="https://www.saxonica.com/saxonjs/documentation3/index.html#!ixsl-extension" target="_blank">Saxon Interactive XSLT extensions</a></td>
+                        <td>Namespace for the <a href="https://www.saxonica.com/saxonjs/documentation3/index.html#!ixsl-extension" target="_blank">Interactive XSL extensions</a></td>
                     </tr>
                     <tr>
-                        <td><code>bs2:</code></td>
-                        <td><code>http://graphity.org/xsl/bootstrap/2.3.2</code></td>
-                        <td></td>
-                        <td>XSLT-only namespace that is used for <a href="https://getbootstrap.com/2.3.2/" target="_blank">Bootstrap 2.3.2</a>-based layout templates</td>
+                        <td><code>ldh:</code></td>
+                        <td><code>https://w3id.org/atomgraph/linkeddatahub#</code></td>
+                        <td>LinkedDataHub vocabulary</td>
+                        <td>LinkedDataHub concepts, also used for LinkedDataHub's own component template modes (named after the design system's components)</td>
                     </tr>
                     <tr>
                         <td><code>xhtml:</code></td>
-                        <td><code>http://www.w3.org/2011/http#</code></td>
-                        <td></td>
-                        <td>XSLT-only namespace that is used for generic (X)HTML templates</td>
-                    </tr>
-                    <tr>
-                        <td><code>ldt:</code></td>
-                        <td><code>https://www.w3.org/ns/ldt#</code></td>
-                        <td><a href="https://atomgraph.github.io/Linked-Data-Templates/#vocabulary" target="_blank">Linked Data Templates</a></td>
-                        <td>LDT processing-related concepts</td>
+                        <td><code>http://www.w3.org/1999/xhtml</code></td>
+                        <td><a href="https://www.w3.org/TR/xhtml1/" target="_blank">XHTML 1.0</a></td>
+                        <td>XHTML namespace, also used for generic (X)HTML templates</td>
                     </tr>
                     <tr>
                         <td><code>ac:</code></td>
@@ -112,85 +148,208 @@
                         <td>Client-side concepts</td>
                     </tr>
                     <tr>
-                        <td><code>lapp:</code></td>
-                        <td><code>https://w3id.org/atomgraph/linkeddatahub/apps#</code></td>
-                        <td><a href="../administration/ontologies/#apl-ont" target="_blank">LinkedDataHub application ontology</a></td>
-                        <td>LinkedDataHub application concepts</td>
+                        <td><code>lds:</code></td>
+                        <td><code>https://w3id.org/atomgraph/linkeddatahub/dataspaces#</code></td>
+                        <td><a href="../administration/ontologies/#lds-ont" target="_blank">LinkedDataHub dataspace ontology</a></td>
+                        <td>LinkedDataHub dataspace concepts</td>
                     </tr>
                     <tr>
                         <td><code>lacl:</code></td>
                         <td><code>https://w3id.org/atomgraph/linkeddatahub/admin/acl#</code></td>
-                        <td>LinkedDataHub ACL ontology</td>
+                        <td><a href="../administration/ontologies/#lacl-ont" target="_blank">LinkedDataHub ACL ontology</a></td>
                         <td>ACL concepts</td>
                     </tr>
                 </tbody>
             </table>
         </div>
+        <div>
+            <h3 id="templates">Templates</h3>
+            <p>XSLT template components:</p>
+            <dl>
+                <dt>Match</dt>
+                <dd>XPath-based match pattern which either does or does not match an XML node</dd>
+                <dt>Mode</dt>
+                <dd>Groups templates and distinguishes them from other groups that share the same match patterns (e.g. different layout modes)</dd>
+                <dt>Parameters</dt>
+                <dd>XSD-typed parameters passed to the template invocation</dd>
+                <dt>Body</dt>
+                <dd>Contains the XML output nodes as well as XSLT processing instructions</dd>
+            </dl>
+            <p>XSLT processing starts at the root of the RDF/XML document and produces HTML elements by applying templates to all of the RDF/XML nodes while moving down the XML tree.
+                In other words, it starts at the graph level, moves down to resource description elements, then to property elements, and ends with identifier attributes and literal text nodes.</p>
+            <p>Templates are applied (invoked) using <code>&lt;xsl:apply-templates&gt;</code>. Mode can be specified, e.g. <code>&lt;xsl:apply-templates mode="ac:BlockHeader"&gt;</code>. To stay in the current mode without explicitly specifying it, use <code>&lt;xsl:apply-templates mode="#current"&gt;</code>. <code>&lt;xsl:with-param&gt;</code> is used to supply parameters.</p>
+            <p>LinkedDataHub provides the following default template modes, which are used to render the <a href="../user-interface/#layout-modes" target="_blank">layout modes</a>:</p>
+            <ul>
+                <li>Graph-level modes that apply to <code>rdf:RDF</code>
+                    <ul>
+                        <li><dfn>default mode</dfn> renders full resource descriptions</li>
+                        <li><code>ac:List</code> renders a list of resources</li>
+                        <li><code>ac:ResultsTable</code> renders a table with resources as rows and properties as columns</li>
+                        <li><code>ac:Grid</code> renders a gallery of thumbnails</li>
+                        <li><code>ac:Map</code> renders resources with coordinates on a map</li>
+                        <li><code>ac:Graph</code> renders the resources as a node-and-edge graph</li>
+                        <li><code>ac:ResourceForm</code> renders an <a href="https://atomgraph.github.io/RDF-POST/" target="_blank">RDF/POST</a> form for creating new resources or editing an existing one</li>
+                    </ul>
+                </li>
+                <li>Resource-level template modes that apply to <code>rdf:Description</code>
+                    <ul>
+                        <li>default mode renders one full resource description (by default header and property list)</li>
+                        <li><code>ac:BlockHeader</code> renders resource header (by default with type information)</li>
+                        <li><code>ac:PropertyEditor</code> renders definition list with property names and values (by default grouped by resource types)</li>
+                    </ul>
+                </li>
+            </ul>
+            <p>When adding new user-defined modes, it is recommended to choose a new <a href="#namespaces">namespace</a> for them as well as a user-defined prefix.</p>
+            <p>An example of a template that matches <code>rdf:Description</code>:</p>
+            <pre>&lt;xsl:template match="*[*][@rdf:about] | *[*][@rdf:nodeID]"&gt;
+    &lt;xsl:param name="id" as="xs:string?"/&gt;
+    &lt;xsl:param name="class" as="xs:string?"/&gt;
+
+    &lt;div&gt;
+        &lt;xsl:if test="$id"&gt;
+            &lt;xsl:attribute name="id" select="$id"/&gt;
+        &lt;/xsl:if&gt;
+        &lt;xsl:if test="$class"&gt;
+            &lt;xsl:attribute name="class" select="$class"/&gt;
+        &lt;/xsl:if&gt;
+
+        &lt;xsl:apply-templates select="." mode="ac:BlockHeader"/&gt;
+
+        &lt;xsl:apply-templates select="." mode="ac:PropertyEditor"/&gt;
+    &lt;/div&gt;
+&lt;/xsl:template&gt;</pre>
+            <p>Applied to the <a href="#rdf-xml-plain">Chai description above</a>, it produces markup of this shape (abridged):</p>
+            <pre>&lt;div about="https://localhost:4443/products/1/#this" typeof="https://schema.org/Product"&gt;
+    &lt;h2&gt;Chai&lt;/h2&gt;
+    &lt;dl&gt;
+        &lt;dt&gt;Name&lt;/dt&gt;
+        &lt;dd&gt;Chai&lt;/dd&gt;
+        &lt;dt&gt;Category&lt;/dt&gt;
+        &lt;dd&gt;&lt;a href="https://localhost:4443/categories/1/#this"&gt;Beverages&lt;/a&gt;&lt;/dd&gt;
+        &lt;dt&gt;Provider&lt;/dt&gt;
+        &lt;dd&gt;&lt;a href="https://localhost:4443/suppliers/1/#this"&gt;Exotic Liquids&lt;/a&gt;&lt;/dd&gt;
+    &lt;/dl&gt;
+&lt;/div&gt;</pre>
+            <p class="exhibit-links">Live: <a href="https://northwind-traders.demo.linkeddatahub.com/products/1/" target="_blank">/products/1/</a> — the same description, rendered by the full stylesheet</p>
+            <p><code>ldh:ContentList</code> mode renders the content specified by the <code>rdf:_1</code>, <code>rdf:_2</code>, … values of the current document.</p>
+            <p>There are a few special template modes such as <code>ac:label</code> and <code>ac:description</code>, together with the related <code>ac:label()</code> and <code>ac:description()</code> functions, which are
+                used not to render layout but to extract metadata from resource descriptions. They can be used to retrieve a resource label and description no matter which RDF
+                vocabularies are used in the data. They do so by invoking templates of the respective mode from vocabulary-specific stylesheets.</p>
+        </div>
+        <div>
+            <h3 id="overriding-templates">Overriding templates</h3>
+            <p>Templates are overridden by redefining them in the importing stylesheet and providing the same or more specific match pattern and the same mode. The XSLT specification defines exactly how template priorities are determined in <a href="https://www.w3.org/TR/xslt-30/#conflict" target="_blank">6.4 Conflict Resolution for Template Rules</a>.</p>
+            <p>The overriding template can then get the output of the overridden template by invoking either <code>&lt;xsl:apply-imports&gt;</code> or <code>&lt;xsl:next-match&gt;</code>. Read more in <a href="https://www.w3.org/TR/xslt-30/#apply-imports" target="_blank">6.7 Overriding Template Rules</a>.</p>
+            <p>Always override the most specific template, i.e. if you want to change how a property is rendered, do not override the template for the resource description — override only the one for the property.</p>
+        </div>
+        <div>
+            <h3 id="keys">Keys</h3>
+            <p>Keys are a lookup mechanism. They are defined on the stylesheet level using <a href="https://www.w3.org/TR/xslt-30/#dt-key" target="_blank"><code>&lt;xsl:key&gt;</code></a> and invoked using the
+                <a href="https://www.w3.org/TR/xslt-30/#function-key" target="_blank"><code>key()</code></a> function. For example:</p>
+            <pre>&lt;xsl:key name="resources" match="*[*][@rdf:about] | *[*][@rdf:nodeID]" use="@rdf:about | @rdf:nodeID"/&gt;
+
+&lt;xsl:template match="*"&gt;
+    &lt;xsl:for-each select="key('resources', ldh:base-uri(.))"&gt;
+        &lt;xsl:value-of select="ac:label(.)"/&gt;
+    &lt;/xsl:for-each&gt;
+&lt;/xsl:template&gt;</pre>
+            <p>The key definition matches <code>rdf:Description</code> elements and uses their identifiers (URI or blank node ID). The template then looks up the RDF description of the <em>current resource</em>, i.e. the resource with URI that equals <code>ldh:base-uri(.)</code> which is the absolute URI of the current document, and outputs its label.</p>
+        </div>
+        <div>
+            <h3 id="loading-data">Loading data</h3>
+            <p>The stylesheet processes one main RDF/XML document at a time, supplied by LinkedDataHub's HTML writer. However, it is possible to load additional XML documents over HTTP
+                using the <a href="https://www.w3.org/TR/xslt-30/#function-document" target="_blank"><code>document()</code></a> XSLT function. To avoid XSLT errors on any possible error responses, it is advisable
+                to do a conditional check using the <a href="https://www.w3.org/TR/xpath-functions/#func-doc-available" target="_blank"><code>doc-available()</code></a> function before doing the actual <code>document()</code> call.</p>
+            <p>For example, instead of hardcoding the title of this document as <samp>Stylesheets</samp>, you can use the following code to load it and output it on the fly:</p>
+            <pre>&lt;xsl:value-of select="key('resources', 'https://docs.linkeddatahub.com/reference/stylesheets/', document('https://docs.linkeddatahub.com/reference/stylesheets/'))"/&gt;</pre>
+            <p>In case this document changes its title, all such references would automatically render the updated title. On the other hand, it incurs the overhead of making an HTTP request.</p>
+            <p>LinkedDataHub's default stylesheets use this feature extensively. In fact, one HTML page is rendered from a dozen RDF/XML documents.</p>
+            <p>Built-in <a href="../administration/ontologies/#ontologies" target="_blank">ontologies</a>, as well as some other system and well-known ontologies, have a local copy in
+                each LinkedDataHub instance. As a result, retrieving their descriptions by dereferencing their URIs using <code>document()</code> does not incur an HTTP request and is much faster. The URI-to-file mapping
+                is defined as Jena's <a href="https://jena.apache.org/documentation/io/rdf-input.html#configuring-a-locationmapper" target="_blank">location mapping</a> and can be found in
+                <a href="https://github.com/AtomGraph/LinkedDataHub/blob/develop/src/main/resources/location-mapping.ttl" target="_blank"><samp>location-mapping.ttl</samp></a> and <a href="https://github.com/AtomGraph/LinkedDataHub/blob/develop/src/main/resources/prefix-mapping.ttl" target="_blank"><samp>prefix-mapping.ttl</samp></a>.</p>
+            <p>Client-side stylesheets use <a href="https://www.saxonica.com/saxonjs/documentation3/index.html#!ixsl-extension/instructions/schedule-action" target="_blank"><code>&lt;ixsl:schedule-action&gt;</code></a> (deprecated) and <a href="https://www.saxonica.com/saxonjs/documentation3/index.html#!ixsl-extension/instructions/promise" target="_blank"><code>&lt;ixsl:promise&gt;</code></a> to load XML documents asynchronously. The metadata required to render forms — constructors, SHACL shapes, and property and object descriptions — is loaded client-side through chains of <code>&lt;ixsl:promise&gt;</code>, so the browser fetches it on demand rather than the server fetching everything up front.</p>
+        </div>
         <div>
             <h3 id="parameters">Parameters</h3>
-            <p>Both global (i.e. stylesheet-level) and template parameters are declared using <code>&lt;xsl:param&gt;</code>. LinkedDataHub sets the following global parameters by default (the list is non-exhaustive):</p>
-            <table class="table">
+            <p>Both global (i.e. stylesheet-level) and template parameters are declared using <code>&lt;xsl:param&gt;</code>. LinkedDataHub sets the following global parameters:</p>
+            <table>
+                <caption class="ac-vh">Stylesheet parameters and their types</caption>
                 <thead>
                     <tr>
-                        <th>Parameter</th>
-                        <th>Type</th>
-                        <th>Description</th>
+                        <th scope="col">Parameter</th>
+                        <th scope="col">Type</th>
+                        <th scope="col">Description</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
-                        <td><code>$lapp:Application</code></td>
-                        <td><code>document-node()?</code></td>
-                        <td>RDF/XML metadata of the current application</td>
+                        <td><code>$lds:Context</code></td>
+                        <td><code>document-node()</code></td>
+                        <td>RDF/XML description of the configured dataspaces; the current dataspace is looked up in it by origin</td>
+                    </tr>
+                    <tr>
+                        <td><code>$lds:origin</code></td>
+                        <td><code>xs:anyURI</code></td>
+                        <td>Origin of the application shell that serves the static assets (the pane-scoped counterpart is the <code>lds:origin()</code> function)</td>
                     </tr>
                     <tr>
                         <td><code>$foaf:Agent</code></td>
                         <td><code>document-node()?</code></td>
                         <td>RDF/XML metadata of the authenticated agent (if any)</td>
                     </tr>
+                    <tr>
+                        <td><code>$acl:agent</code></td>
+                        <td><code>xs:anyURI?</code></td>
+                        <td>URI of the authenticated agent</td>
+                    </tr>
                     <tr>
                         <td><code>$ldh:requestUri</code></td>
                         <td><code>xs:anyURI</code></td>
                         <td>Full request URI including query string</td>
                     </tr>
                     <tr>
-                        <td><code>$ac:endpoint</code></td>
-                        <td><code>xs:anyURI</code></td>
-                        <td>SPARQL query endpoint URI (defaults to <code>resolve-uri('sparql', ldt:base())</code>)</td>
+                        <td><code>$ldh:httpHeaders</code></td>
+                        <td><code>map(xs:string, xs:string*)</code></td>
+                        <td>HTTP response headers by name — <code>Content-Language</code>, <code>Link</code>, <code>Memento-Datetime</code> etc. are read from it</td>
                     </tr>
                     <tr>
-                        <td><code>$sd:endpoint</code></td>
-                        <td><code>xs:anyURI?</code></td>
-                        <td>Service-description endpoint URI, if different from <code>$ac:endpoint</code></td>
+                        <td><code>$ldh:ajaxRendering</code></td>
+                        <td><code>xs:boolean</code></td>
+                        <td>Whether client-side (Saxon-JS) rendering is enabled</td>
                     </tr>
                     <tr>
-                        <td><code>$acl:agent</code></td>
-                        <td><code>xs:anyURI?</code></td>
-                        <td>URI of the authenticated agent</td>
+                        <td><code>$ldh:renderSystemResources</code></td>
+                        <td><code>xs:boolean</code></td>
+                        <td>Whether system resources are included in the rendering</td>
                     </tr>
                     <tr>
-                        <td><code>$acl:mode</code></td>
-                        <td><code>xs:anyURI*</code></td>
-                        <td>ACL access modes granted for the current request</td>
+                        <td><code>$ac:contextUri</code></td>
+                        <td><code>xs:anyURI</code></td>
+                        <td>Root deployment URI, against which system endpoints such as <code>oauth2/*</code> are resolved</td>
                     </tr>
                     <tr>
-                        <td><code>$ac:mode</code></td>
-                        <td><code>xs:anyURI*</code></td>
-                        <td>Current layout mode (derived: <code>ldh:ContentMode</code> if the document has content blocks, otherwise <code>ac:ReadMode</code>)</td>
+                        <td><code>$ac:uri</code></td>
+                        <td><code>xs:anyURI?</code></td>
+                        <td>URI of the external resource when the request goes through the <a href="../http-api/#ld-proxy">Linked Data proxy</a>; absent for local documents (prefer the <code>ac:uri()</code> function)</td>
                     </tr>
                 </tbody>
             </table>
+            <p>Former parameters <code>$ac:mode</code>, <code>$acl:mode</code>, <code>$sd:endpoint</code>, <code>$ac:langs</code> and <code>$lds:Dataspace</code> have been
+                replaced by the functions <code>ac:mode()</code>, <code>acl:mode()</code>, <code>sd:endpoint()</code>, <code>ac:langs()</code> and <code>lds:dataspace()</code> —
+                their values can change per pane or per response, which a global parameter cannot express.</p>
         </div>
         <div>
             <h3 id="functions">Functions</h3>
             <p>LinkedDataHub and Web-Client provide XSLT functions available to all stylesheets.</p>
-            <h4>URI utility functions</h4>
-            <table class="table">
+            <h4 id="uri-utility-functions">URI utility functions</h4>
+            <table>
+                <caption class="ac-vh">URI utility functions and what they return</caption>
                 <thead>
                     <tr>
-                        <th>Function</th>
-                        <th>Returns</th>
-                        <th>Description</th>
+                        <th scope="col">Function</th>
+                        <th scope="col">Returns</th>
+                        <th scope="col">Description</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -205,7 +364,7 @@
                         <td>Appends a percent-encoded query string built from the parameter map to <code>$path</code></td>
                     </tr>
                     <tr>
-                        <td><code>ac:document-uri($uri)</code></td>
+                        <td><code>ac:document-uri($uri as item())</code></td>
                         <td><code>xs:anyURI</code></td>
                         <td>Strips the fragment identifier from a URI, making it suitable for use with <code>document()</code></td>
                     </tr>
@@ -215,14 +374,19 @@
                         <td>Extracts the fragment identifier (the part after <code>#</code>)</td>
                     </tr>
                     <tr>
-                        <td><code>lapp:origin()</code></td>
+                        <td><code>ac:uri()</code></td>
+                        <td><code>xs:anyURI?</code></td>
+                        <td>URI of the external resource being viewed through the <a href="../http-api/#ld-proxy">Linked Data proxy</a>; absent for local documents. Works in both environments, unlike the server-side <code>$ac:uri</code> parameter it wraps</td>
+                    </tr>
+                    <tr>
+                        <td><code>lds:origin()</code></td>
                         <td><code>xs:anyURI</code></td>
-                        <td>Returns the origin (scheme, host and port) of the current application, e.g. <code>https://localhost:4443/</code>. Used to build absolute URIs for static resources and same-site requests</td>
+                        <td>Returns the origin (scheme, host and port) of the current dataspace, e.g. <code>https://localhost:4443/</code>. Used to build absolute URIs for static resources and same-site requests</td>
                     </tr>
                     <tr>
-                        <td><code>ldt:base()</code></td>
+                        <td><code>lds:base()</code></td>
                         <td><code>xs:anyURI</code></td>
-                        <td>Returns the base URI of the current application. Replaces the former <code>$ldt:base</code> parameter</td>
+                        <td>Returns the base URI of the current dataspace</td>
                     </tr>
                     <tr>
                         <td><code>ldh:request-uri()</code></td>
@@ -245,24 +409,35 @@
                         <td>Inverse of <code>ldh:href()</code> — parses a local href back into its target URI, query parameters and fragment. Shared by the client-side navigation handlers</td>
                     </tr>
                     <tr>
-                        <td><code>ldh:query-params($mode as xs:anyURI*)</code></td>
+                        <td><code>ldh:query-params()</code></td>
                         <td><code>map(xs:string, xs:string*)</code></td>
-                        <td>Builds a query parameter map for the given layout mode(s). Overload also accepts <code>$forClass as xs:anyURI?</code></td>
+                        <td>Parses the current request URI's query string into a map of parameter names to values</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:build-query($mode as xs:anyURI*)</code></td>
+                        <td><code>map(xs:string, xs:string*)</code></td>
+                        <td>Builds the <code>mode</code> query parameter map that selects the given <a href="../user-interface/#layout-modes">layout mode(s)</a></td>
                     </tr>
                     <tr>
                         <td><code>ldh:parse-query-params($query-string as xs:string)</code></td>
                         <td><code>map(xs:string, xs:string*)</code></td>
                         <td>Parses a URL query string into a map of key to value(s)</td>
                     </tr>
+                    <tr>
+                        <td><code>ldh:url-decode($encoded-string as xs:string)</code></td>
+                        <td><code>xs:string</code></td>
+                        <td>Percent-decodes a URL-encoded string</td>
+                    </tr>
                 </tbody>
             </table>
-            <h4>RDF metadata functions</h4>
-            <table class="table">
+            <h4 id="rdf-metadata-functions">RDF metadata functions</h4>
+            <table>
+                <caption class="ac-vh">RDF metadata functions and what they return</caption>
                 <thead>
                     <tr>
-                        <th>Function</th>
-                        <th>Returns</th>
-                        <th>Description</th>
+                        <th scope="col">Function</th>
+                        <th scope="col">Returns</th>
+                        <th scope="col">Description</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -276,15 +451,71 @@
                         <td><code>xs:string?</code></td>
                         <td>Extracts a human-readable description from an RDF resource description</td>
                     </tr>
+                    <tr>
+                        <td><code>ac:image($resource as element())</code></td>
+                        <td><code>attribute()*</code></td>
+                        <td>Extracts image references (e.g. <code>foaf:depiction</code>, <code>foaf:img</code>) from a resource description</td>
+                    </tr>
+                    <tr>
+                        <td><code>ac:property-label($property as element())</code></td>
+                        <td><code>xs:string?</code></td>
+                        <td>Label of a predicate element, capitalized — resolved by the <code>ac:property-label</code> mode templates. An overload accepts <code>$property-metadata as document-node()</code>, the property descriptions loaded for the current document</td>
+                    </tr>
+                    <tr>
+                        <td><code>ac:object-label($object as node())</code></td>
+                        <td><code>xs:string?</code></td>
+                        <td>Label of a property's object: a resource-valued object is looked up in the current graph, the loaded metadata or its dereferenced document, falling back to the URI's fragment or last path segment; a literal yields its lexical value. An overload accepts <code>$object-metadata as document-node()</code></td>
+                    </tr>
+                    <tr>
+                        <td><code>ac:mode($doc as document-node())</code></td>
+                        <td><code>xs:anyURI</code></td>
+                        <td>The active <a href="../user-interface/#layout-modes">layout mode</a> of the given document. Replaces the former <code>$ac:mode</code> parameter</td>
+                    </tr>
+                    <tr>
+                        <td><code>ac:langs()</code></td>
+                        <td><code>xs:string*</code></td>
+                        <td>The reader's accepted languages, deduplicated to primary subtags and always ending with <samp>en</samp> as a fallback — negotiated server-side, read from <code>navigator.languages</code> in the browser</td>
+                    </tr>
+                    <tr>
+                        <td><code>ac:lang-rank($value as element())</code></td>
+                        <td><code>xs:integer</code></td>
+                        <td>Ranks a property value's language against <code>ac:langs()</code>, so values sort by the reader's preference</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:date-time($value as xs:string?)</code></td>
+                        <td><code>xs:dateTime?</code></td>
+                        <td>Parses a lexical value into a <code>xs:dateTime</code> where possible</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:datatype-family($datatype as xs:anyURI?)</code></td>
+                        <td><code>xs:string</code></td>
+                        <td>Groups an XSD datatype into a family (numeric, dateTime, string etc.) — drives table column sorting</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:sort-key($key as xs:string?, $datatype as xs:anyURI?)</code></td>
+                        <td><code>xs:anyAtomicType?</code></td>
+                        <td>Converts a lexical value into a typed sort key for its datatype family</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:sort-key-lexical($resource as element(), $predicates as xs:anyURI*)</code></td>
+                        <td><code>xs:string?</code></td>
+                        <td>The lexical sort key of a resource: coalesces across <code>$predicates</code> in order, preferring values whose language matches the reader's first accepted language. Feeds <code>ldh:sort-key()</code></td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:sort-datatype($resources as element()*, $predicates as xs:anyURI*)</code></td>
+                        <td><code>xs:anyURI?</code></td>
+                        <td>The datatype shared by a sort column's literals; absent when the column mixes datatypes or carries plain literals or resources. Keys the typed re-sort that keeps a view block's client-side order agreeing with its SPARQL <code>ORDER BY</code></td>
+                    </tr>
                 </tbody>
             </table>
-            <h4>HTTP and SPARQL functions</h4>
-            <table class="table">
+            <h4 id="http-and-sparql-functions">HTTP and SPARQL functions</h4>
+            <table>
+                <caption class="ac-vh">HTTP and SPARQL functions and what they return</caption>
                 <thead>
                     <tr>
-                        <th>Function</th>
-                        <th>Returns</th>
-                        <th>Description</th>
+                        <th scope="col">Function</th>
+                        <th scope="col">Returns</th>
+                        <th scope="col">Description</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -298,111 +529,158 @@
                         <td><code>document-node()?</code></td>
                         <td>Makes an HTTP request and returns the response as a document (server-side extension function)</td>
                     </tr>
+                    <tr>
+                        <td><code>ldh:link-targets($link-header as xs:string?, $marker as xs:string)</code></td>
+                        <td><code>xs:anyURI*</code></td>
+                        <td>Extracts the target URIs of the <code>Link</code> response header entries whose parameters contain <code>$marker</code> (e.g. a <code>rel</code> value) — the parser behind <code>acl:mode()</code>, <code>sd:endpoint()</code> and <code>ldh:timemap()</code> (client-side)</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:parse-html($string as xs:string, $mime-type as xs:string)</code></td>
+                        <td><code>document-node()</code></td>
+                        <td>Parses a markup string into a document</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:reserialize($doc as document-node())</code></td>
+                        <td><code>document-node()</code></td>
+                        <td>Round-trips a document through serialization, normalizing it</td>
+                    </tr>
                 </tbody>
             </table>
+            <h4 id="dataspace-and-access-functions">Dataspace and access functions</h4>
+            <table>
+                <caption class="ac-vh">Dataspace and access functions and what they return</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Function</th>
+                        <th scope="col">Returns</th>
+                        <th scope="col">Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><code>sd:endpoint()</code></td>
+                        <td><code>xs:anyURI</code></td>
+                        <td>SPARQL endpoint of the current data pane — the local endpoint, or the remote dataspace's when browsing another dataspace through the <a href="../http-api/#ld-proxy">proxy</a>. Replaces the former <code>$sd:endpoint</code> parameter</td>
+                    </tr>
+                    <tr>
+                        <td><code>lds:dataspace()</code></td>
+                        <td><code>xs:anyURI?</code></td>
+                        <td>URI of the dataspace resource describing the current dataspace. Replaces the former <code>$lds:Dataspace</code> parameter (its description is looked up in <code>$lds:Context</code>)</td>
+                    </tr>
+                    <tr>
+                        <td><code>acl:mode()</code></td>
+                        <td><code>xs:anyURI*</code></td>
+                        <td>Access modes granted on the current document, read from the response's <code>Link</code> headers. Replaces the former <code>$acl:mode</code> parameter</td>
+                    </tr>
+                </tbody>
+            </table>
+            <h4 id="versioning-functions">Versioning functions</h4>
+            <table>
+                <caption class="ac-vh">Versioning functions and what they return</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Function</th>
+                        <th scope="col">Returns</th>
+                        <th scope="col">Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><code>ldh:memento-datetime()</code></td>
+                        <td><code>xs:string?</code></td>
+                        <td>The <code>Memento-Datetime</code> of the currently viewed <a href="../versioning/#snapshots">historical version</a>, absent on the live document</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:timemap()</code></td>
+                        <td><code>xs:anyURI?</code></td>
+                        <td>The document's <a href="../versioning/#timemap">TimeMap</a> URI from the <code>Link</code> response header; absent when the document is not versioned</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:snapshot-params($query-params as map(xs:string, xs:string*))</code></td>
+                        <td><code>map(xs:string, xs:string*)</code></td>
+                        <td>Filters a query parameter map down to the snapshot parameters (<code>version</code>, <code>timemap</code>), so they survive URL rebuilds</td>
+                    </tr>
+                </tbody>
+            </table>
+            <h4 id="utility-functions">Utility functions</h4>
+            <table>
+                <caption class="ac-vh">Utility functions and what they return</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Function</th>
+                        <th scope="col">Returns</th>
+                        <th scope="col">Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><code>ac:uuid()</code></td>
+                        <td><code>xs:string</code></td>
+                        <td>Generates a random UUID</td>
+                    </tr>
+                    <tr>
+                        <td><code>ldh:hash-code($string as xs:string)</code></td>
+                        <td><code>xs:integer</code></td>
+                        <td>Deterministic 32-bit djb2 hash of a string's codepoints — the counterpart to <code>ac:uuid()</code> for identifiers that must survive a reload because they are re-derived rather than stored (client-side)</td>
+                    </tr>
+                    <tr>
+                        <td><code>ac:value-intersect($arg1 as xs:anyAtomicType*, $arg2 as xs:anyAtomicType*)</code></td>
+                        <td><code>xs:anyAtomicType*</code></td>
+                        <td>Distinct values present in both sequences</td>
+                    </tr>
+                    <tr>
+                        <td><code>ac:value-except($arg1 as xs:anyAtomicType*, $arg2 as xs:anyAtomicType*)</code></td>
+                        <td><code>xs:anyAtomicType*</code></td>
+                        <td>Distinct values of <code>$arg1</code> that are not present in <code>$arg2</code></td>
+                    </tr>
+                </tbody>
+            </table>
+            <p>The many remaining <code>ac:</code> and <code>ldh:</code> functions are internal machinery, not a stable API, and are deliberately not documented
+                here: the client-side <code>render-*</code>, <code>load-*</code>, <code>set-*</code>, <code>*-response</code> and <code>*-thunk</code> families
+                together with the promise, progress, cursor and DOM helpers they call; the constructor, form and SPARQL-manipulation helpers behind the editing
+                UI; and Web-Client functions that LinkedDataHub has superseded, such as <code>ac:construct()</code> and the SVG rendering helpers.</p>
         </div>
+    </div>
+    <div>
+        <h2 id="other-assets">Other assets</h2>
         <div>
-            <h3 id="templates">Templates</h3>
-            <p>XSLT template components:</p>
-            <dl>
-                <dt>Match</dt>
-                <dd>XPath-based match pattern which either does or does not match an XML node</dd>
-                <dt>Mode</dt>
-                <dd>Allows to group templates and distinguish them from other groups which have the same match patterns (e.g. different layout modes)</dd>
-                <dt>Parameters</dt>
-                <dd>XSD-typed parameters passed to the template invocation</dd>
-                <dt>Body</dt>
-                <dd>Contains the XML output nodes as well as XSLT processing instructions</dd>
-            </dl>
-            <p>XSLT processing starts at the root of the RDF/XML document and produces HTML elements by applying templates on all of the RDF/XML nodes while moving down the XML tree.
-                In other words, it starts at the graph level, moves down to resource description elements, then to property elements, and ends with identifier attributes and literal text nodes.</p>
-            <p>Templates are applied (invoked) using <code>&lt;xsl:apply-templates&gt;</code>. Mode can be specified, e.g. <code>&lt;xsl:apply-templates mode="bs2:Header"&gt;</code>. To stay in the current mode without explicitly specifying it, use <code>&lt;xsl:apply-templates mode="#current"&gt;</code>. <code>&lt;xsl:with-param&gt;</code> is used to supply parameters.</p>
-            <p>LinkedDataHub provides the following default template modes, which are used to render the <a href="../user-interface/#layout-modes" target="_blank">layout modes</a>:</p>
-            <ul>
-                <li>Graph-level modes that apply to <code>rdf:RDF</code>
-                    <ul>
-                        <li><dfn>default mode</dfn> which renders full resource descriptions</li>
-                        <li><code>bs2:BlockList</code> renders a list of resources</li>
-                        <li><code>xhtml:Table</code> renders a table with resources as rows and properties as columns</li>
-                        <li><code>bs2:Grid</code> renders a gallery of thumbnails</li>
-                        <li><code>bs2:Form</code> which renders an <a href="https://atomgraph.github.io/RDF-POST/" target="_blank">RDF/POST</a> form for for creation of new resources (when <code>$ac:forClass</code> parameter is set) or editing of existing resource</li>
-                    </ul>
-                </li>
-                <li>Resource-level templates modes that apply to <code>rdf:Description</code>
-                    <ul>
-                        <li><dfn>default mode</dfn> renders full resource description (by default header and property list)</li>
-                        <li><code>bs2:Header</code> renders resource header (by default with type information)</li>
-                        <li><code>bs2:PropertyList</code> renders definition list with property names and values (by default grouped by resource types)</li>
-                    </ul>
-                </li>
-            </ul>
-            <p>When adding new user-defined modes, it is recommended to choose a new <a href="#namespaces">namespace</a> for them as well as a user-defined prefix.</p>
-            <p>An example of a template that matches <code>rdf:Description</code>:</p>
-            <pre>&lt;xsl:template match="*[*][@rdf:about] | *[*][@rdf:nodeID]"&gt;
-    &lt;xsl:param name="id" as="xs:string?"/&gt;
-    &lt;xsl:param name="class" as="xs:string?"/&gt;
-
-    &lt;div&gt;
-        &lt;xsl:if test="$id"&gt;
-            &lt;xsl:attribute name="id" select="$id"/&gt;
-        &lt;/xsl:if&gt;
-        &lt;xsl:if test="$class"&gt;
-            &lt;xsl:attribute name="class" select="$class"/&gt;
-        &lt;/xsl:if&gt;
-
-        &lt;xsl:apply-templates select="." mode="bs2:Header"/&gt;
-
-        &lt;xsl:apply-templates select="." mode="bs2:PropertyList"/&gt;
-    &lt;/div&gt;
-&lt;/xsl:template&gt;</pre>
-            <p><code>ldh:ContentList</code> mode renders the content specified by the <code>rdf:_1</code> value of the current document.</p>
-            <p>There are a few special template modes such as <code>ac:label</code> and <code>ac:description</code> and related functions <code>ac:label()</code> and <code>ac:description()</code> which are
-                used not to render layout but to extract metadata from resource descriptions. They can be used to retrieve a resource label and description no matter which RDF
-                vocabularies are used in the data. They do so by invoking templates of respective mode from vocabulary-specific stylesheets.</p>
-        </div>
-        <div>
-            <h3 id="overriding-templates">Overriding templates</h3>
-            <p>Templates are overridden by redefining them in the importing stylesheet and providing the same or more specific match pattern and the same mode. The XSLT specification specifies exactly how template priorities are determined in <a href="https://www.w3.org/TR/xslt-30/#conflict" target="_blank">6.4 Conflict Resolution for Template Rules</a>.</p>
-            <p>The overriding template can then get the output of the overridden template by invoking either <code>&lt;xsl:apply-imports&gt;</code> or <code>&lt;xsl:next-match&gt;</code>. Read more about <a href="https://www.w3.org/TR/xslt-30/#apply-imports" target="_blank">6.7 Overriding Template Rules</a>.</p>
-            <p>Always override the most specific template, i.e. if you want to change how a property is rendered, do not override the template for resource description, only the one for the property.</p>
-        </div>
-        <div>
-            <h3 id="keys">Keys</h3>
-            <p>Keys are a lookup mechanism. They are defined on the stylesheet level using <a href="https://www.w3.org/TR/xslt-30/#dt-key" target="_blank"><code>&lt;xsl:key&gt;</code></a> and invoked using the 
-                <a href="https://www.w3.org/TR/xslt-30/#function-key" target="_blank"><code>key()</code></a> function. For example:</p>
-            <pre>&lt;xsl:key name="resources" match="*[*][@rdf:about] | *[*][@rdf:nodeID]" use="@rdf:about | @rdf:nodeID"/&gt;
-
-&lt;xsl:template match="*"&gt;
-    &lt;xsl:for-each select="key('resources', ldh:base-uri(.))"&gt;
-        &lt;xsl:value-of select="ac:label(.)"/&gt;
-    &lt;/xsl:for-each&gt;
-&lt;/xsl:template&gt;</pre>
+            <h3 id="css">CSS</h3>
+            <p>The stylesheet links are emitted by the <code>ac:Stylesheets</code> XSLT template mode, in cascade order: the vendored design-system stylesheets — <samp>fonts.css</samp>, <samp>colors_and_type.css</samp> (tokens), <samp>app.css</samp> (components; it imports <samp>core.css</samp>, which imports <samp>controls.css</samp> and <samp>overlays.css</samp>) and <samp>retro.css</samp> (the skin) — then <samp>ldh.css</samp>, LinkedDataHub's one app layer over the kits, loaded last so it wins the ties it is written to win. Feature-specific stylesheets are linked ahead of them and only when needed: <samp>rdfa-editor.css</samp> for rich-text editing when an agent is authenticated, <samp>yasqe.css</samp> for the SPARQL editor. Dataspace stylesheets that import <samp>layout.xsl</samp> can override the <code>ac:Stylesheets</code> template mode to add or replace stylesheets.</p>
+            <p>Components are named by class rather than by element: <code>ac-*</code> for the design system's own components (<samp>ac-btn</samp>, <samp>ac-alert</samp>, <samp>ac-card</samp>, <samp>ac-badge</samp>) and <code>ldh-*</code> for the ones LinkedDataHub adds over them (<samp>ldh-block</samp>, <samp>ldh-actionbar</samp>, <samp>ldh-address</samp>). A component is varied by stacking one class from each axis onto it, not by a compound name — the action bar's <dfn>Actions</dfn> button is <samp>ac-btn in-neutral ap-outline sz-md</samp>, a form's <dfn>Save</dfn> button <samp>ac-btn in-primary ap-solid sz-md</samp>.</p>
+            <table>
+                <caption class="ac-vh">Class axes that vary a component</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Axis</th>
+                        <th scope="col">Classes</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Intent</td>
+                        <td><samp>in-primary</samp>, <samp>in-neutral</samp>, <samp>in-accent</samp>, <samp>in-destructive</samp>, <samp>in-negative</samp>, <samp>in-inverse</samp></td>
+                    </tr>
+                    <tr>
+                        <td>Appearance</td>
+                        <td><samp>ap-solid</samp>, <samp>ap-outline</samp>, <samp>ap-ghost</samp>, <samp>ap-fixed</samp></td>
+                    </tr>
+                    <tr>
+                        <td>Size</td>
+                        <td><samp>sz-xs</samp>, <samp>sz-sm</samp>, <samp>sz-md</samp>, <samp>sz-lg</samp>, <samp>sz-xl</samp></td>
+                    </tr>
+                    <tr>
+                        <td>Variant</td>
+                        <td><samp>va-informative</samp>, <samp>va-positive</samp>, <samp>va-negative</samp>, <samp>va-neutral</samp>, <samp>va-emphasis</samp>, <samp>va-enclosed</samp>, <samp>va-line</samp>, <samp>va-hero</samp>, <samp>va-inverse</samp>, <samp>va-fixed</samp> — carried by components that vary by kind rather than by intent, such as <samp>ac-alert</samp></td>
+                    </tr>
+                </tbody>
+            </table>
+            <p>That vocabulary is the contract the templates emit, so restyling is a matter of writing rules against those classes. Changes belong in a stylesheet of the dataspace's own: <samp>ldh.css</samp> is the platform's app layer and is replaced wholesale on upgrade. Override the <code>ac:Stylesheets</code> template mode and call <code>xsl:next-match</code> first, which emits the platform's links and leaves yours last in the cascade, where they win the ties they need to win. Omitting <code>xsl:next-match</code> drops the vendored kits along with <samp>ldh.css</samp> and leaves the components unstyled.</p>
         </div>
-        <p>They key definition matches <code>rdf:Description</code> elements and uses their identifiers (URI or blank node ID). The template then looks up the RDF description of the <em>current resource</em>, i.e. the resource with URI that equals <code>ldh:base-uri(.)</code> which is the absolute URI of the current document, and outputs its label.</p>
         <div>
-            <h3 id="loading-data">Loading data</h3>
-            <p>The stylesheet is processing one main RDF/XML document at a time, which is supplied by the LinkedDataHub's HTML writer. However it is possible to load additional XML documents over HTTP 
-                using the <a href="https://www.w3.org/TR/xslt-30/#function-document" target="_blank"><code>document()</code></a> XSLT function. To avoid XSLT errors on any possible error responses, it is advisable
-                to do a conditional check using the <a href="https://www.w3.org/TR/xpath-functions/#func-doc-available" target="_blank"><code>doc-available()</code></a> function before doing the actual <code>document()</code> call.</p>
-            <p>For example, instead of hardcoding the title of this document as <samp>Stylesheets</samp>, we can use the following code to load it and output it on the fly:</p>
-            <pre>&lt;xsl:value-of select="key('resources', 'https://docs.linkeddatahub.com/reference/stylesheet/', document('https://docs.linkeddatahub.com/reference/stylesheet/'))"/&gt;</pre>
-            <p>In case this document changes its title, all such references would automatically render the updated title. On the other hand, it incurs the overhead of making an HTTP request.</p>
-            <p>LinkedDataHub's default stylesheets are using this feature extensively. In fact, one HTML page is rendered from a dozen of RDF/XML documents.</p>
-            <p>Built-in <a href="../administration/ontologies/#ontologies" target="_blank">ontologies</a> as well as some other system and well-known ontologies, have a local copy in
-                each LinkedDataHub instance. As a result, retrieving their descriptions by dereferencing their URIs using <code>document()</code> does not incur an HTTP request and is much faster. The URI-to-file mapping
-                is defined as Jena's <a href="https://jena.apache.org/documentation/io/rdf-input.html#configuring-a-locationmapper" target="_blank">location mapping</a> and can be found in
-                <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/src/main/resources/location-mapping.n3" target="_blank"><samp>location-mapping.n3</samp></a> and <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/src/main/resources/prefix-mapping.n3" target="_blank"><samp>prefix-mapping.n3</samp></a>.</p>
-            <p>Client-side stylesheets use <a href="https://www.saxonica.com/saxonjs/documentation3/index.html#!ixsl-extension/instructions/schedule-action" target="_blank"><code>&lt;ixsl:schedule-action&gt;</code></a> (deprecated) and <a href="https://www.saxonica.com/saxonjs/documentation3/index.html#!ixsl-extension/instructions/promise" target="_blank"><code>&lt;ixsl:promise&gt;</code></a> to load XML documents asynchronously. The metadata required to render forms — constructors, SHACL shapes, and property and object descriptions — is loaded client-side through chains of <code>&lt;ixsl:promise&gt;</code>, so the browser fetches it on demand rather than the server fetching everything up front.</p>
+            <h3 id="javascript">JavaScript</h3>
+            <p>The script links are emitted by the <code>xhtml:Script</code> XSLT template mode. It loads <samp>functions.js</samp>, the Saxon-JS 3 runtime together with the compiled client stylesheet (when client-side rendering is enabled), and feature-specific libraries: the YASQE SPARQL editor, the SPARQL builder, OpenLayers for maps, Google Charts for charts, and three.js with 3d-force-graph for the 3D graph mode.</p>
+            <p>LinkedDataHub only uses JavaScript for the functionality that cannot be achieved using client-side XSLT.</p>
         </div>
     </div>
-    <div>
-        <h2 id="css">CSS</h2>
-        <p><a href="https://getbootstrap.com/2.3.2/" target="_blank">Bootstrap 2.3.2</a> theme is used with some customizations.</p>
-        <p>The CSS stylesheets is specified in the <code>xhtml:Style</code> XSLT template mode.</p>
-    </div>
-    <div>
-        <h2 id="javascript">JavaScript</h2>
-        <p>The JavaScript files are specified in the <code>xhtml:Script</code> XSLT template mode.</p>
-        <p>LinkedDataHub only uses JavaScript for the functionality that cannot be achieved using client-side XSLT.</p>
-    </div>
+    <p class="ldh-body-lg">To customize the built-in stylesheets, follow the <a href="../../extending/change-layout/">Change layout</a> and <a href="../../extending/build-apps/">Build apps</a> guides</p>
 </div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/triplestores.ttl b/docs/reference/triplestores.ttl
index 01ae1620..ce803a1b 100644
--- a/docs/reference/triplestores.ttl
+++ b/docs/reference/triplestores.ttl
@@ -1,52 +1,53 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Triplestores" ;
-    dct:description "Requirements and configuration for using alternative SPARQL triplestores with LinkedDataHub" ;
+    dct:description "Requirements and configuration for alternative SPARQL backends" ;
     rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Requirements and configuration for using alternative SPARQL triplestores with LinkedDataHub</p>
-    <p>LinkedDataHub is designed to work with any SPARQL 1.1-compatible triplestore that supports the required protocols. While Apache Jena Fuseki is the default backend, you can use alternative triplestores by adding them as services in <code>docker-compose.override.yml</code> (without modifying the default <code>docker-compose.yml</code>). Browse available triplestore products at <a href="https://kgdev.net/products/" target="_blank">kgdev.net/products/</a>.</p>
+    <p class="ldh-body-lg">Requirements and configuration for alternative SPARQL backends</p>
+    <p>LinkedDataHub is designed to work with any SPARQL 1.1-compatible triplestore that supports the required protocols. While <a href="https://jena.apache.org/documentation/fuseki2/" target="_blank">Apache Jena Fuseki</a> is the default backend, you can use alternative triplestores by adding them as services in <samp>docker-compose.override.yml</samp> (without modifying the default <samp>docker-compose.yml</samp>).</p>
     <div>
         <h2 id="requirements">Requirements</h2>
         <p>For a triplestore to work with LinkedDataHub, it must support the following:</p>
-        <table class="table">
+        <table>
+            <caption class="ac-vh">Triplestore features and whether they are required</caption>
             <thead>
                 <tr>
-                    <th>Feature</th>
-                    <th>Required</th>
-                    <th>Description</th>
+                    <th scope="col">Feature</th>
+                    <th scope="col">Required</th>
+                    <th scope="col">Description</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
                     <td><a href="https://www.w3.org/TR/sparql11-query/" target="_blank">SPARQL 1.1 Query</a></td>
-                    <td>✅ Yes</td>
-                    <td>The triplestore must implement the SPARQL 1.1 Query specification</td>
+                    <td>Yes</td>
+                    <td>The triplestore must implement the SPARQL 1.1 Query specification.</td>
                 </tr>
                 <tr>
                     <td><a href="https://www.w3.org/TR/sparql11-update/" target="_blank">SPARQL 1.1 Update</a></td>
-                    <td>✅ Yes</td>
-                    <td>The triplestore must implement the SPARQL 1.1 Update specification for data modifications</td>
+                    <td>Yes</td>
+                    <td>The triplestore must implement the SPARQL 1.1 Update specification for data modifications.</td>
                 </tr>
                 <tr>
                     <td><a href="https://www.w3.org/TR/sparql11-http-rdf-update/" target="_blank">Graph Store Protocol (GSP)</a></td>
-                    <td>✅ Yes</td>
-                    <td>The triplestore must support the SPARQL 1.1 Graph Store HTTP Protocol for graph-scoped operations. </td>
+                    <td>Yes</td>
+                    <td>The triplestore must support the SPARQL 1.1 Graph Store HTTP Protocol for graph-scoped operations.</td>
                 </tr>
                 <tr>
                     <td>Dataset-level CRUD protocol</td>
-                    <td>⚪ No</td>
-                    <td>Support for RDF dataset-scoped CRUD operations, supported by stores such as Apache Fuseki. If not available, LinkedDataHub will fall back to graph-scoped GSP operations (slower but functional).</td>
+                    <td>No</td>
+                    <td>Support for RDF dataset-scoped CRUD operations, supported by stores such as Fuseki. If not available, LinkedDataHub will fall back to graph-scoped GSP operations (slower but functional).</td>
                 </tr>
                 <tr>
                     <td><a href="#authentication">Authentication</a></td>
-                    <td>⚪ No</td>
+                    <td>No</td>
                     <td>Either HTTP Basic authentication or Bearer token authentication (or both). See <a href="#authentication">authentication</a> below for configuration details.</td>
                 </tr>
             </tbody>
@@ -54,38 +55,63 @@
     </div>
     <div>
         <h2 id="service-configuration">Service configuration</h2>
-        <p>Services are configured in <samp>config/system.trig</samp> using three key properties. See the <a href="../dataspace/#services">dataspace reference</a> for the full list of service properties.</p>
-        <dl>
-            <dt><code>sd:endpoint</code></dt>
-            <dd>The SPARQL Protocol endpoint URI (for SPARQL Query and Update operations)</dd>
-            <dd>Example: <code>&lt;http://qlever-host:7001/&gt;</code></dd>
-            <dt><code>a:graphStore</code></dt>
-            <dd>The Graph Store Protocol endpoint URI (for graph-scoped CRUD operations)</dd>
-            <dd>Example: <code>&lt;http://qlever-host:7001/&gt;</code></dd>
-            <dd>Required for all triplestores</dd>
-            <dt><code>a:quadStore</code></dt>
-            <dd>The quad store endpoint URI (for dataset-level CRUD operations)</dd>
-            <dd>Optional — if omitted, LinkedDataHub will use graph-scoped GSP fallback</dd>
-            <dd>Example: <code>&lt;http://fuseki-host:3030/ds/&gt;</code> (Fuseki-specific)</dd>
-        </dl>
-        <div class="alert alert-info">
-            <h4>GSP fallback mode</h4>
-            <p>When <code>a:quadStore</code> is not provided, LinkedDataHub automatically uses graph-scoped Graph Store Protocol operations instead. This mode:</p>
-            <ul>
-                <li>Works with triplestores that don't support dataset-level TriG/N-Quads uploads</li>
-                <li>Loads data graph-by-graph rather than as a complete dataset</li>
-                <li>Takes longer during bootstrap (more HTTP requests) but is functionally equivalent</li>
-                <li>Is required for QLever, Tentris, and other GSP-only triplestores</li>
-            </ul>
+        <p>Services are configured in <samp>config/system.trig</samp> using three key properties. See the <a href="../dataspace/#services">dataspace reference</a> for the full list of service properties and the default Fuseki service declaration — the configuration you start with. The sections below walk through configuring an alternative backend (QLever) instead.</p>
+        <table>
+            <caption class="ac-vh">Service properties, whether each is required, and an example value</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Property</th>
+                    <th scope="col">Endpoint</th>
+                    <th scope="col">Required</th>
+                    <th scope="col">Example</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row"><code>sd:endpoint</code></th>
+                    <td>SPARQL Protocol, for Query and Update</td>
+                    <td>Yes</td>
+                    <td><code>&lt;http://qlever-host:7001/&gt;</code></td>
+                </tr>
+                <tr>
+                    <th scope="row"><code>a:graphStore</code></th>
+                    <td>Graph Store Protocol, for graph-scoped CRUD</td>
+                    <td>Yes</td>
+                    <td><code>&lt;http://qlever-host:7001/&gt;</code> — QLever serves both protocols on the same URL</td>
+                </tr>
+                <tr>
+                    <th scope="row"><code>a:quadStore</code></th>
+                    <td>Quad store, for dataset-level CRUD</td>
+                    <td>No — omitting it falls back to graph-scoped GSP</td>
+                    <td><code>&lt;http://fuseki:3030/end-user/&gt;</code>, which is Fuseki-specific</td>
+                </tr>
+            </tbody>
+        </table>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <span class="ac-alert-title">GSP fallback mode</span>
+                <p class="ac-alert-text">When <code>a:quadStore</code> is not provided, LinkedDataHub automatically uses graph-scoped Graph Store Protocol operations instead. This mode:</p>
+                <ul class="ac-alert-text">
+                    <li>Works with triplestores that do not support dataset-level TriG/N-Quads uploads</li>
+                    <li>Loads data graph-by-graph rather than as a complete dataset</li>
+                    <li>Takes longer during bootstrap (more HTTP requests) but is functionally equivalent</li>
+                    <li>Is required for QLever, Tentris, and other GSP-only triplestores</li>
+                </ul>
+            </div>
         </div>
     </div>
     <div>
         <h2 id="authentication">Authentication</h2>
-        <p>LinkedDataHub supports two authentication methods for SPARQL services, both configured in <samp>secrets/credentials.trig</samp>. See the <a href="../configuration/#secrets">configuration reference</a> for the <code>credentials</code> secret entry.</p>
-        <div>
-            <h3 id="http-basic">HTTP basic authentication</h3>
+        <p>LinkedDataHub supports two authentication methods for SPARQL services, both configured in <samp>secrets/credentials.trig</samp>. The file is mounted as a Docker secret and is not committed to version control (the <samp>/secrets</samp> folder is gitignored). See the <a href="../configuration/#secrets">configuration reference</a> for the <code>credentials</code> secret entry.</p>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="http-basic-pane" aria-selected="true" class="ac-tab is-on" id="http-basic-tab" role="tab" type="button"><span class="ac-tab-lbl">HTTP Basic authentication</span></button>
+                <button aria-controls="bearer-token-auth-pane" aria-selected="false" class="ac-tab" id="bearer-token-auth-tab" role="tab" type="button"><span class="ac-tab-lbl">Bearer token authentication</span></button>
+            </div>
+            <div aria-labelledby="http-basic-tab" class="ac-tabpanel" id="http-basic-pane" role="tabpanel">
             <p>Configure username and password using the <code>a:authUser</code> and <code>a:authPwd</code> properties:</p>
-            <pre><code>@prefix a: &lt;https://w3id.org/atomgraph/core#&gt; .
+            <pre>@prefix a: &lt;https://w3id.org/atomgraph/core#&gt; .
 
 &lt;urn:linkeddatahub:services/end-user&gt;
 {
@@ -97,12 +123,11 @@
 {
     &lt;urn:linkeddatahub:services/admin&gt; a:authUser "username" ;
         a:authPwd "password" .
-}</code></pre>
-        </div>
-        <div>
-            <h3 id="bearer-token">Bearer token authentication</h3>
+}</pre>
+            </div>
+            <div aria-labelledby="bearer-token-auth-tab" class="ac-tabpanel" hidden="hidden" id="bearer-token-auth-pane" role="tabpanel">
             <p>For triplestores that require Bearer token authentication (like QLever), configure the token using the <code>a:authToken</code> property:</p>
-            <pre><code>@prefix a: &lt;https://w3id.org/atomgraph/core#&gt; .
+            <pre>@prefix a: &lt;https://w3id.org/atomgraph/core#&gt; .
 
 &lt;urn:linkeddatahub:services/end-user&gt;
 {
@@ -112,31 +137,30 @@
 &lt;urn:linkeddatahub:services/admin&gt;
 {
     &lt;urn:linkeddatahub:services/admin&gt; a:authToken "your-bearer-token" .
-}</code></pre>
-            <p>This file is mounted as a Docker secret and is NOT committed to git (the <samp>/secrets</samp> folder is gitignored).</p>
+}</pre>
+            </div>
         </div>
     </div>
     <div>
         <h2 id="qlever-example">QLever configuration example</h2>
-            <p>QLever is a high-performance triplestore optimized for text search. Here's how to configure LinkedDataHub to use QLever:</p>
-            <ol>
-                <li>
-                    <p><strong>Update <samp>config/system.trig</samp></strong> to point to your QLever instance:</p>
-                    <pre><code>@prefix lapp: &lt;https://w3id.org/atomgraph/linkeddatahub/apps#&gt; .
+        <p>QLever is a high-performance triplestore optimized for text search. To configure LinkedDataHub to use QLever:</p>
+        <ol>
+            <li>
+                <p><strong>Update <samp>config/system.trig</samp></strong> to point to your QLever instance:</p>
+                <pre>@prefix lds: &lt;https://w3id.org/atomgraph/linkeddatahub/dataspaces#&gt; .
 @prefix a:    &lt;https://w3id.org/atomgraph/core#&gt; .
-@prefix ldt:  &lt;https://www.w3.org/ns/ldt#&gt; .
 @prefix sd:   &lt;http://www.w3.org/ns/sparql-service-description#&gt; .
 @prefix dct:  &lt;http://purl.org/dc/terms/&gt; .
 
-# Admin app - type + service binding
+# Admin app: type and service binding
 
 &lt;urn:linkeddatahub:apps/admin&gt;
 {
-    &lt;urn:linkeddatahub:apps/admin&gt; a lapp:AdminApplication ;
-        ldt:service &lt;urn:linkeddatahub:services/admin&gt; .
+    &lt;urn:linkeddatahub:apps/admin&gt; a lds:AdminDataspace ;
+        lds:service &lt;urn:linkeddatahub:services/admin&gt; .
 }
 
-# Admin service - QLever
+# Admin service: QLever
 
 &lt;urn:linkeddatahub:services/admin&gt;
 {
@@ -144,19 +168,19 @@
         dct:title "LinkedDataHub admin service (QLever)" ;
         sd:supportedLanguage sd:SPARQL11Query, sd:SPARQL11Update ;
         sd:endpoint &lt;http://qlever-host:7001/&gt; ;
+        # a:quadStore omitted: QLever uses GSP fallback mode
         a:graphStore &lt;http://qlever-host:7001/&gt; .
-        # Note: a:quadStore omitted - QLever uses GSP fallback mode
 }
 
-# End-user app - type + service binding
+# End-user app: type and service binding
 
 &lt;urn:linkeddatahub:apps/end-user&gt;
 {
-    &lt;urn:linkeddatahub:apps/end-user&gt; a lapp:EndUserApplication ;
-        ldt:service &lt;urn:linkeddatahub:services/end-user&gt; .
+    &lt;urn:linkeddatahub:apps/end-user&gt; a lds:EndUserDataspace ;
+        lds:service &lt;urn:linkeddatahub:services/end-user&gt; .
 }
 
-# End-user service - QLever
+# End-user service: QLever
 
 &lt;urn:linkeddatahub:services/end-user&gt;
 {
@@ -164,15 +188,15 @@
         dct:title "LinkedDataHub service (QLever)" ;
         sd:supportedLanguage sd:SPARQL11Query, sd:SPARQL11Update ;
         sd:endpoint &lt;http://qlever-host:7001/&gt; ;
+        # a:quadStore omitted: QLever uses GSP fallback mode
         a:graphStore &lt;http://qlever-host:7001/&gt; .
-        # Note: a:quadStore omitted - QLever uses GSP fallback mode
-}</code></pre>
-                    <p>The <code>a:quadStore</code> property is omitted because QLever does not support dataset-level TriG/N-Quads uploads. LinkedDataHub will automatically fall back to using graph-scoped Graph Store Protocol operations (see <a href="#service-configuration">service configuration</a>).</p>
-                </li>
-                <li>
-                    <p><strong>Configure Bearer token authentication</strong> (QLever requires this for write operations):</p>
-                    <p>Create <samp>secrets/credentials.trig</samp> with your QLever access token:</p>
-                    <pre><code>@prefix a: &lt;https://w3id.org/atomgraph/core#&gt; .
+}</pre>
+                <p>The <code>a:quadStore</code> property is omitted because QLever does not support dataset-level TriG/N-Quads uploads. LinkedDataHub will automatically fall back to using graph-scoped Graph Store Protocol operations (see <a href="#service-configuration">service configuration</a>).</p>
+            </li>
+            <li>
+                <p><strong>Configure Bearer token authentication</strong> (QLever requires this for write operations):</p>
+                <p>Create <samp>secrets/credentials.trig</samp> with your QLever access token:</p>
+                <pre>@prefix a: &lt;https://w3id.org/atomgraph/core#&gt; .
 
 &lt;urn:linkeddatahub:services/end-user&gt;
 {
@@ -182,36 +206,39 @@
 &lt;urn:linkeddatahub:services/admin&gt;
 {
     &lt;urn:linkeddatahub:services/admin&gt; a:authToken "your-qlever-bearer-token" .
-}</code></pre>
-                    <p>See <a href="#bearer-token">bearer token authentication</a> for details.</p>
-                </li>
-                <li>
-                    <p><strong>Uncomment the credentials secret</strong> in <samp>docker-compose.yml</samp>:</p>
-                    <pre><code>services:
+}</pre>
+                <p>See <a href="#authentication">bearer token authentication</a> for details.</p>
+            </li>
+            <li>
+                <p><strong>Uncomment the credentials secret</strong> in <samp>docker-compose.yml</samp>:</p>
+                <pre>services:
   linkeddatahub:
     secrets:
       # ... other secrets ...
-      - credentials  # Uncomment this line</code></pre>
-                </li>
-                <li>
-                    <p><strong>Start LinkedDataHub:</strong></p>
-                    <pre>docker-compose up --build</pre>
-                    <p>During bootstrap, LinkedDataHub will load the default datasets using graph-scoped GSP operations. This takes longer than quad store mode but is functionally equivalent.</p>
-                </li>
-            </ol>
+      # - credentials  # uncomment this line</pre>
+            </li>
+            <li>
+                <p><strong>Start LinkedDataHub:</strong></p>
+                <pre>make up -- --build</pre>
+                <p>The <samp>--</samp> makes <samp>make</samp> forward the flags that follow it to <samp>docker-compose</samp>.</p>
+                <p>During bootstrap, LinkedDataHub will load the default datasets using graph-scoped GSP operations. This takes longer than quad store mode but is functionally equivalent.</p>
+            </li>
+        </ol>
     </div>
     <div>
         <h2 id="troubleshooting">Troubleshooting</h2>
-            <dl>
-                <dt>Bootstrap fails with HTTP 400 "application/trig not supported"</dt>
-                <dd>Your triplestore doesn't support dataset-level uploads. Remove the <code>a:quadStore</code> property from your service configuration to use GSP fallback mode.</dd>
-                <dt>Bootstrap fails with HTTP 401 or 403</dt>
-                <dd>Check your authentication configuration. Both Bearer token and HTTP Basic auth are configured in <samp>secrets/credentials.trig</samp>. See <a href="#authentication">authentication</a> for details.</dd>
-                <dt>Queries work but data import fails</dt>
-                <dd>Ensure your triplestore supports SPARQL 1.1 Update and Graph Store Protocol, not just Query. Check the <a href="#requirements">triplestore requirements</a>.</dd>
-                <dt>Connection refused errors</dt>
-                <dd>Check that the endpoint URLs are reachable from the LinkedDataHub Docker container. If running QLever in Kubernetes, use port-forwarding or set up proper networking.</dd>
-            </dl>
-            <p>For more details, see <a href="https://github.com/AtomGraph/LinkedDataHub/issues/272" target="_blank">GitHub issue #272</a> which documents the QLever integration process.</p>
+        <dl>
+            <dt>Bootstrap fails with HTTP 400 "application/trig not supported"</dt>
+            <dd>Your triplestore does not support dataset-level uploads. Remove the <code>a:quadStore</code> property from your service configuration to use GSP fallback mode.</dd>
+            <dt>Bootstrap fails with HTTP 401 or 403</dt>
+            <dd>Check your authentication configuration. Both Bearer token and HTTP Basic auth are configured in <samp>secrets/credentials.trig</samp>. See <a href="#authentication">authentication</a> for details.</dd>
+            <dt>Queries work but data import fails</dt>
+            <dd>Ensure your triplestore supports SPARQL 1.1 Update and Graph Store Protocol, not just Query. Check the <a href="#requirements">triplestore requirements</a>.</dd>
+            <dt>Connection refused errors</dt>
+            <dd>Check that the endpoint URLs are reachable from the LinkedDataHub Docker container. If running QLever in Kubernetes, use port-forwarding or set up proper networking.</dd>
+        </dl>
+        <p>For background discussion of the QLever integration, see <a href="https://github.com/AtomGraph/LinkedDataHub/issues/272" target="_blank">GitHub issue #272</a>.</p>
+        <p>Browse available triplestore products at <a href="https://kgdev.net/products/" target="_blank">kgdev.net/products/</a>.</p>
     </div>
+    <p class="ldh-body-lg">To create dataspaces on your chosen backend, follow the <a href="../../user-guide/manage-dataspaces/">Manage dataspaces</a> guide.</p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/reference/user-interface-1.webp b/docs/reference/user-interface-1.webp
new file mode 100644
index 00000000..993639be
Binary files /dev/null and b/docs/reference/user-interface-1.webp differ
diff --git a/docs/reference/user-interface-2.webp b/docs/reference/user-interface-2.webp
new file mode 100644
index 00000000..d7fa64f8
Binary files /dev/null and b/docs/reference/user-interface-2.webp differ
diff --git a/docs/reference/user-interface-3.webp b/docs/reference/user-interface-3.webp
new file mode 100644
index 00000000..4c8a8c89
Binary files /dev/null and b/docs/reference/user-interface-3.webp differ
diff --git a/docs/reference/user-interface-4.webp b/docs/reference/user-interface-4.webp
new file mode 100644
index 00000000..e45bb4b6
Binary files /dev/null and b/docs/reference/user-interface-4.webp differ
diff --git a/docs/reference/user-interface-5.webp b/docs/reference/user-interface-5.webp
new file mode 100644
index 00000000..80576619
Binary files /dev/null and b/docs/reference/user-interface-5.webp differ
diff --git a/docs/reference/user-interface-6.mp4 b/docs/reference/user-interface-6.mp4
new file mode 100644
index 00000000..55655844
Binary files /dev/null and b/docs/reference/user-interface-6.mp4 differ
diff --git a/docs/reference/user-interface-7.webp b/docs/reference/user-interface-7.webp
new file mode 100644
index 00000000..b441b7c9
Binary files /dev/null and b/docs/reference/user-interface-7.webp differ
diff --git a/docs/reference/user-interface.ttl b/docs/reference/user-interface.ttl
index d99a1c5c..d9c4ed45 100644
--- a/docs/reference/user-interface.ttl
+++ b/docs/reference/user-interface.ttl
@@ -1,67 +1,72 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-  
+
 <> a dh:Item ;
     dct:title "User interface" ;
-    dct:description "A walk through the main features of application user interface" ;
+    dct:description "The main features of the LinkedDataHub user interface" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">This guide walks through the main features of LinkedDataHub user interface.
-        See the <a href="../data-model/">Data model</a> guide for definitions of LinkedDataHub components such documents, content blocks, and resources.</p>
-    <p>User interface is only one of the interfaces LinkedDataHub provides. The other one is the <a href="../command-line-interface/">
-        Command line interface</a>, which supports most of the UI actions.</p>
-    <p>The UI layout <a href="../../user-guide/change-layout/" target="_blank">can be customized</a> and extended using <a href="../../reference/stylesheets/" target="_blank">stylesheets</a>.</p>
-    <div class="alert alert-info">
-        <p><em>Note that user interface features are subject to <a href="../administration/acl/">access control</a>. For example,
-            actions such as creating or editing documents are only available to users with the corresponding write access.</em></p>
+    <p class="ldh-body-lg">The main features of the LinkedDataHub user interface</p>
+    <p>See the <a href="../data-model/">Data model</a> reference for definitions of LinkedDataHub components such as documents, content blocks, and resources.</p>
+    <p>The user interface is only one of the interfaces LinkedDataHub provides; the other is the <a href="../command-line-interface/">command line interface</a>. The <samp>ldh</samp> CLI drives the same HTTP API as the UI and covers most UI actions.</p>
+    <p>The UI layout <a href="../../extending/change-layout/" target="_blank">can be customized</a> and extended using <a href="../stylesheets/" target="_blank">stylesheets</a>.</p>
+    <div class="ac-alert va-informative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">Note that user interface features are subject to <a href="../administration/acl/">access control</a>. For example,
+                actions such as creating or editing documents are only available to users with the corresponding write access.</p>
+        </div>
     </div>
-    <p>
-        <img alt="User interface" src="../../uploads/df0b96b07dc6730536cb11d169ed34dfb25ea403"></img>
-    </p>
+    <img alt="The dataspace layout: navigation bar, action bar, sidebar and content" src="/uploads/ab78fd76f9d92b39742362c081c0ec82769901bd"></img>
     <div>
         <h2 id="nav-bar">Navigation bar</h2>
-        <p>
-            <img alt="Navigation bar" src="../../uploads/ec8cb7afb9cf360c34e859f97646642eb0331518"></img>
-        </p>
-        <p>The application title or logo in the top-left always links to the root container of the current application.</p>
-        <p>The <dfn>address bar</dfn> in the middle accepts the URI of a resource to navigate to. Entering an external <code>http://</code> or <code>https://</code> URL loads it through the <a href="../http-api/#linked-data-proxy">Linked Data proxy</a> so that it can be browsed within LinkedDataHub.</p>
-        <p>On the right, dropdown menus provide access to the list of applications and to your user account.</p>
-        <div class="alert alert-info">
-            <p><em>Due to current web browser limitations, it is not possible to logout using client certificate authentication.
-              As a workaround, you can close the browser, and click <span class="btn">Cancel</span> when asked to select a
-              certificate the next time.</em></p>
+        <img alt="The navigation bar with the address bar and menus" src="/uploads/ce4349baeb1aaa37e26d164b78098ec0d2b75d54"></img>
+        <p>The dataspace title or logo in the top-left always links to the root container of the current dataspace.</p>
+        <p>The <dfn>address bar</dfn> in the middle accepts the URI of a resource to navigate to. Entering an external <code>http://</code> or <code>https://</code> URL loads it through the <a href="../http-api/#ld-proxy">Linked Data proxy</a> so that it can be browsed within LinkedDataHub.</p>
+        <p>On the right, dropdown menus provide access to the list of dataspaces, to the settings, and to your user account. For authenticated users, the settings menu opens the dataspace settings form and links to the <a href="../administration/">administration</a> dataspace and to the dataspace's namespace ontology.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">Only administration users have access to the administration dataspace.</p>
+            </div>
+        </div>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">Due to current web browser limitations, it is not possible to log out when using client certificate authentication.
+                  As a workaround, you can close the browser and click <samp>Cancel</samp> when asked to select a
+                  certificate the next time.</p>
+            </div>
         </div>
     </div>
     <div>
         <h2 id="action-bar">Action bar</h2>
-        <p>
-            <img alt="Action bar" src="../../uploads/8a141225e1e96418aeb61da51b3b737454d9c01f"></img>
-        </p>
-        <p>The <span class="btn btn-primary create-action">Create <span class="caret"></span></span> button opens a dialog through which
-        <a href="../data-model/documents/">documents</a> can be created.</p>
-        <p>The path leading from the current document up the parent/child hierarchy to the root container is shown in
-        the <dfn>breadcrumb bar</dfn>, where the current document is always the last breadcrumb. The user can always
-        open any of the ascendant containers by clicking breadcrumbs left from the current one. The icon shows the
-        type of the current document (<a href="../data-model/documents/containers/">container</a> or <a href="../data-model/documents/items/">item</a>). A label is displayed when the URL currently being browsed is external.</p>
-        <p>Further to the right, the action bar displays buttons for performing actions on the current document.</p>
-        <p>Last but not least, the settings button provides a link to the <a href="../administration/">administration</a>
-        application.</p>
-        <div class="alert alert-info">
-            <p><em>Only administration users have access to the administration application.</em></p>
-        </div>
+        <img alt="The action bar with the Create dropdown, breadcrumbs, timestamp, and the Actions, layout mode and export dropdowns" src="/uploads/3b79bd17b5f2745b3fe0df9415b1e38ef6d6c740"></img>
+        <p>The action bar below the navigation bar groups the controls of the current document into three zones.</p>
+        <p>On the left, the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown opens a dialog through which
+        child <a href="../data-model/documents/">documents</a> can be created; it appears on <a href="../data-model/documents/#containers">containers</a> for users with write access. To add resources or content blocks inside the current document, use the
+        <a href="#creation-bar">creation bar</a> instead.</p>
+        <p>In the middle, the <dfn>breadcrumb bar</dfn> shows the path leading from the current document up the parent/child hierarchy to the
+        root container, where the current document is always the last breadcrumb. The user can always
+        open any ancestor container by clicking a breadcrumb to the left of the current one. Each breadcrumb carries an icon showing the
+        type of its document (<a href="../data-model/documents/#containers">container</a> or <a href="../data-model/documents/#items">item</a>); external resources carry a link icon.
+        Beside them sits the document's last-modified timestamp, when it has one — and in dataspaces with <a href="../versioning/">versioning</a> enabled, clicking it opens the
+        <a href="../../user-guide/version-history/">version history</a> dialog, which lists the document's versions with the agents that authored them.</p>
+        <p>On the right, the <span class="ac-btn in-neutral ap-outline sz-md">Actions</span> dropdown collects the actions on the current document: <samp>Edit</samp>, <samp>Access</samp>, <samp>Save as</samp> and <samp>Delete</samp>. It appears for authenticated users, and the actions that modify the document are enabled only with write access. The same menu carries the data-generating actions for users with append access — <samp>Generate containers</samp> on end-user dataspaces, <samp>Import ontology</samp> on administration dataspaces. Beside it sit the <a href="#layout-modes">layout mode</a> selector and the export dropdown, which downloads the current document in the chosen RDF serialization: RDF/XML, Turtle or JSON-LD.</p>
     </div>
     <div>
-        <h2 id="document-tree">Left sidebar</h2>
-        <p>The left sidebar is the main way to navigate your data. At the top, the <dfn>search box</dfn> finds resources within the current application that have the specified keyword in their titles, descriptions etc.; results are shown in a dropdown list. Below the search box, the sidebar offers complementary ways to browse the dataspace — by document hierarchy, by class, and through a few other data-driven views.</p>
+        <h2 id="left-sidebar">Left sidebar</h2>
+        <p>The left sidebar is the main way to navigate your data. At the top, the <dfn>search box</dfn> finds resources within the current dataspace that have the specified keyword in their titles, descriptions etc.; results are shown in a dropdown list. Below the search box, the sidebar offers complementary ways to browse the dataspace — by document hierarchy, by class, and through a few other data-driven views.</p>
+        <p>The sidebar slides out over the page when the mouse is moved to the left edge of the screen and hides again when the mouse leaves it.</p>
         <h3 id="document-hierarchy">Document hierarchy navigation</h3>
-        <p>Document tree shows the document hierarchy of the dataspace. By clicking on a container, it expands to show its children.</p>
-        <p>In a desktop layout mode, the document tree folds out when the mouse is moved to the left edge of the screen. In a responsive layout, it is always shown.</p>
+        <p>The document tree shows the document hierarchy of the dataspace. Clicking a container expands it to show its children.</p>
         <h3 id="class-navigation">Class-based navigation</h3>
-        <p>In addition to browsing by document hierarchy, you can navigate your data by class. The <dfn>Classes</dfn> list shows the classes (<code>rdf:type</code> values) that actually occur in the dataspace, each labelled with the number of its instances and ordered with the most-used classes first. Clicking a class opens a dialog listing all instances of that class across the dataspace.</p>
+        <img alt="The left sidebar Classes list on the Northwind dataspace, with instance counts (Order, Product, Person, ...)" src="/uploads/5498f91d99e5589af5d81088b8576dac265dea3c"></img>
+        <p>In addition to browsing by document hierarchy, you can navigate your data by class. The <dfn>Classes</dfn> list shows the classes (<code>rdf:type</code> values) that actually occur in the dataspace, each labeled with the number of its instances and ordered with the most-used classes first. Clicking a class opens a dialog listing all instances of that class across the dataspace.</p>
         <p>Class-based navigation is particularly useful when:</p>
         <ul>
             <li>You want to see all instances of a particular type across your entire dataspace</li>
@@ -69,27 +74,25 @@
         </ul>
         <p>Because the list is derived from the data itself, it reflects whatever types are present — you do not need to define an ontology or class hierarchy. It also respects your <a href="../administration/acl/">access control</a> settings: you only see classes and instances you are authorized to access.</p>
         <h3 id="other-views">Other views</h3>
-        <p>Below the classes, the sidebar provides a couple of additional data-driven views of the dataspace:</p>
+        <p>Below the classes, the sidebar provides two additional data-driven views of the dataspace:</p>
         <dl>
-          <dt>Geo</dt>
-          <dd>Opens a dialog listing all resources in the dataspace that have geographic coordinates.</dd>
-          <dt>Latest</dt>
-          <dd>Opens a dialog listing the most recently created resources in the dataspace, newest first.</dd>
+            <dt>Geo</dt>
+            <dd>Opens a dialog listing all resources in the dataspace that have geographic coordinates.</dd>
+            <dt>Latest</dt>
+            <dd>Opens a dialog listing the most recently created resources in the dataspace, newest first.</dd>
         </dl>
     </div>
     <div>
-        <h2 id="right-nav">Right sidebar</h2>
-        <p>A right sidebar appears alongside the main view to show navigation into and out of the current data:</p>
-        <dl>
-            <dt>Backlinks</dt>
-            <dd>In <a href="#layout-modes">properties mode</a>, lists resources that link <em>to</em> a resource in the current document — that is, resources that have a property whose value is the current resource. This complements the outgoing properties shown in the main view.</dd>
-            <dt>Related results</dt>
-            <dd>For <a href="../data-model/resources/views/#parallax">view</a> result sets, <dfn>parallax</dfn> navigation lets you jump from the current results to a related set by following a selected property (for example, from a set of products to the companies that supply them). It works together with the view's faceted search.</dd>
-        </dl>
+        <h2 id="backlinks">Backlinks</h2>
+        <img alt="The links popover open on a Northwind order block, backlink rows visible" src="/uploads/d3de5142c74874340aa39f889bdd2e8d5d6dd42a"></img>
+        <p>Backlinks list the resources that link <em>to</em> a resource — that is, resources that have a property whose value is that resource. They complement the outgoing properties shown in the resource's own description.</p>
+        <p>Backlinks are per block: every block whose resource has a URI carries its own links button and popover, so in <a href="#layout-modes">Properties mode</a> each resource in the document offers the backlinks of that resource. The button sits among the block header's actions; XHTML blocks anchor it in the card's top-right corner, and views place it in the view toolbar. The backlink rows are loaded when the popover is first opened, and opening one popover closes the others.</p>
+        <p>For <a href="../data-model/resources/#views">view</a> result sets, <a href="../data-model/resources/#parallax">parallax</a> navigation plays the complementary role: it lets you jump from the current results to a related set by following a property in either direction (for example, from a set of products to the companies that supply them). It works together with the view's faceted search.</p>
     </div>
     <div>
         <h2 id="layout-modes">Layout modes</h2>
-        <p>The active document <dfn>layout mode</dfn> is displayed, and can be changed using, the nav tabs at the top of the page.</p>
+        <video aria-label="The Northwind orders container in each layout mode: content, properties, map (territories), chart, graph" controls="controls" preload="metadata" src="/uploads/71d2882b14b3ca6dec3335a89bcc156fda840d5f"></video>
+        <p>The active document <dfn>layout mode</dfn> is displayed in, and can be changed using, the mode selector in the <a href="#action-bar">action bar</a>.</p>
         <p>Currently supported document layout modes:</p>
         <dl>
             <dt>Content</dt>
@@ -97,31 +100,39 @@
             <dt>Properties</dt>
             <dd>The most detailed view showing every property/value of every <a href="../data-model/resources/">resource</a> in the current document.</dd>
             <dt>Map</dt>
-            <dd>Shows an interacitve map with all <a href="../data-model/resources/">resources</a> in the current document that have geo coordinates</dd>
+            <dd>Shows an interactive map with all <a href="../data-model/resources/">resources</a> in the current document that have geographic coordinates.</dd>
             <dt>Chart</dt>
-            <dd>Renders the metadata of the <a href="../data-model/resources/">resources</a> in the current document as a chart with (multiple chart types are supported, such as table, scatter chart, timeline etc.)</dd>
+            <dd>Renders the <a href="../data-model/resources/">resources</a> in the current document as a chart. Several chart types are supported, including table, scatter chart and timeline.</dd>
             <dt>Graph</dt>
             <dd>Renders <a href="../data-model/resources/">resources</a> in the current document graphically as nodes in an interactive 3D network using a
             force-directed layout. Clicking a node shows its details, double-clicking loads the resource, and right-clicking a URI node loads its backlinks (resources pointing at it).
             The canvas can be toggled to fullscreen (press <kbd>Esc</kbd> to exit), and the graph state is preserved across search and filter re-renders.</dd>
         </dl>
+        <p><a href="../data-model/resources/#views">Views</a> have their own, larger set of <a href="../data-model/resources/#view-layout-modes">layout modes</a>.</p>
+    </div>
+    <div>
+        <h2 id="creation-bar">Creation bar</h2>
+        <p>The creation bar creates resources and content blocks inside the current document, while the <a href="#action-bar">action bar</a>'s
+        <span class="ac-btn in-primary ap-solid sz-md">Create</span> dropdown creates child documents. It renders as a sticky bar docked at the bottom of the page, appears for users with append access, and serves different functions depending on the current mode:</p>
+        <dl>
+            <dt>Content</dt>
+            <dd>The <span class="ac-btn in-primary ap-solid sz-md">XHTML</span> and <span class="ac-btn in-primary ap-solid sz-md">Object</span> buttons append new <a href="../data-model/blocks/">content blocks</a> to the page</dd>
+            <dt>Properties</dt>
+            <dd>The <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown creates a new resource of the selected type</dd>
+        </dl>
     </div>
     <div>
         <h2 id="document-tabs">Document tabs</h2>
+        <img alt="The tab bar with a UNESCO Thesaurus concept open in a second tab next to the Northwind dashboard" src="/uploads/4d0ea1e2b5c25083d30c55ad510d2f4d5ce0f23c"></img>
         <p>LinkedDataHub navigates within a single page. When you follow a link to an external document (for example a resource fetched through the
-            <a href="../http-api/#linked-data-proxy">Linked Data proxy</a>), it opens in its own tab so that several documents can be kept open side by side.
+            <a href="../http-api/#ld-proxy">Linked Data proxy</a>), it opens in its own tab so that several documents can be kept open side by side.
             A sticky tab bar appears at the top of the page once the first external tab is opened.</p>
         <p>Each tab keeps its own content pane, and modal dialogs (such as creation and edit forms) are scoped to the active tab pane. Switching between tabs is cached, so
             returning to a previously opened tab does not re-fetch it. Closing a tab removes its pane and falls back to the base document's tab.</p>
     </div>
     <div>
-        <h2 id="creation-bar">Creation bar</h2>
-        <p>The creation bar serves different functions depending on the current mode:</p>
-        <dl>
-            <dt>Content</dt>
-            <dd>Appends new content blocks to the page</dd>
-            <dt>Properties</dt>
-            <dd>Creates new resource of the selected type</dd>
-        </dl>
+        <h2 id="languages">Languages</h2>
+        <p>The language of the user interface is negotiated from the browser's language preferences (the <code>Accept-Language</code> header) against the languages the UI translation bundle ships with. There is no in-app language switcher — the browser setting is the single source of the language preference. If none of the preferred languages are available, the UI falls back to English.</p>
+        <p>Data is language-aware as well: property values are ordered by the reader's language preference rather than filtered by it, so values in other languages remain visible, each displaying its own language tag.</p>
     </div>
 </div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/reference/user-interface/action-bar.png b/docs/reference/user-interface/action-bar.png
deleted file mode 100644
index e676684e..00000000
Binary files a/docs/reference/user-interface/action-bar.png and /dev/null differ
diff --git a/docs/reference/user-interface/layout.png b/docs/reference/user-interface/layout.png
deleted file mode 100644
index d28670f8..00000000
Binary files a/docs/reference/user-interface/layout.png and /dev/null differ
diff --git a/docs/reference/user-interface/navigation-bar.png b/docs/reference/user-interface/navigation-bar.png
deleted file mode 100644
index 2ff9c552..00000000
Binary files a/docs/reference/user-interface/navigation-bar.png and /dev/null differ
diff --git a/docs/reference/versioning.ttl b/docs/reference/versioning.ttl
new file mode 100644
index 00000000..3b46174d
--- /dev/null
+++ b/docs/reference/versioning.ttl
@@ -0,0 +1,177 @@
+@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
+@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
+@prefix dct:    <http://purl.org/dc/terms/> .
+
+<> a dh:Item ;
+    dct:title "Versioning" ;
+    dct:description "Git-backed document versioning with Memento access to the history" ;
+    rdf:_1 <#content> .
+
+<#content> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+    <p class="ldh-body-lg">Git-backed document versioning with Memento access to the history</p>
+    <p>A dataspace can be configured to mirror every document write into a GitHub repository. The synchronization goes through the
+        GitHub REST API (<samp>api.github.com</samp>), so it is specific to GitHub rather than generic Git. Every write becomes a commit
+        authored with the writing agent's WebID, so the repository holds a complete, attributable history of the dataspace's documents.</p>
+    <p>The history is accessible over HTTP through the standard <a href="https://datatracker.ietf.org/doc/html/rfc7089" target="_blank">Memento (RFC 7089)</a>
+        protocol — historical versions, a TimeMap, and datetime negotiation through a TimeGate — as well as through the
+        <a href="../../user-guide/version-history/">version history dialog</a> in the user interface and the
+        <a href="../command-line-interface/">command line interface</a>.</p>
+    <div>
+        <h2 id="setup">Setup</h2>
+        <p>Versioning is enabled per dataspace:</p>
+        <ol>
+            <li>Create a GitHub repository to hold the version history, and a <a href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens" target="_blank">fine-grained personal access token</a> with read/write access to that repository's contents</li>
+            <li>In <samp>config/system.trig</samp>, point the dataspace at a repository description with <code>lds:versioningRepository</code>:
+                <pre>&lt;urn:linkeddatahub:apps/end-user&gt;
+{
+    &lt;urn:linkeddatahub:apps/end-user&gt; a lds:EndUserDataspace ;
+        lds:service &lt;urn:linkeddatahub:services/end-user&gt; ;
+        lds:versioningRepository &lt;urn:linkeddatahub:versioning/end-user&gt; .
+}
+
+&lt;urn:linkeddatahub:versioning/end-user&gt;
+{
+    &lt;urn:linkeddatahub:versioning/end-user&gt; a doap:GitRepository ;
+        doap:location &lt;https://github.com/OWNER/REPO&gt; ;
+        github:branch "main" ;
+        github:pathPrefix "graphs" .
+}</pre>
+                The <code>github:</code> terms come from the <code>https://w3id.org/atomgraph/linkeddatahub/services/github#</code> namespace;
+                <code>github:branch</code> defaults to <samp>main</samp> and <code>github:pathPrefix</code> to <samp>graphs</samp>.
+            </li>
+            <li>Add the access token to <samp>secrets/credentials.trig</samp> (and make sure the <samp>credentials</samp> secret is enabled in <samp>docker-compose.yml</samp>):
+                <pre>@prefix a: &lt;https://w3id.org/atomgraph/core#&gt; .
+
+&lt;urn:linkeddatahub:versioning/end-user&gt;
+{
+    &lt;urn:linkeddatahub:versioning/end-user&gt; a:authToken "github_pat_..." .
+}</pre>
+            </li>
+            <li>Restart LinkedDataHub</li>
+        </ol>
+        <p>From then on, every successful document write in the dataspace is committed to the repository. Writes from different documents
+            share one commit chain per branch. A conflicting commit is retried rather than dropped, so concurrent writers do not lose versions.
+            Each document is stored as a sorted N-Triples file under the configured path prefix — Northwind order 10248 as
+            <samp>graphs/orders/10248.nt</samp>:</p>
+        <pre>&lt;https://localhost:4443/orders/10248/&gt; &lt;http://purl.org/dc/terms/title&gt; "10248" .
+&lt;https://localhost:4443/orders/10248/#this&gt; &lt;https://schema.org/identifier&gt; "10248" .
+&lt;https://localhost:4443/orders/10248/#this&gt; &lt;https://schema.org/orderDate&gt; "1996-07-04"^^&lt;http://www.w3.org/2001/XMLSchema#date&gt; .
+…</pre>
+        <p>To disable versioning, remove the <code>lds:versioningRepository</code> triple and restart — the repository configuration is read at startup.</p>
+    </div>
+    <div>
+        <h2 id="snapshots">Historical versions</h2>
+        <p><code>GET</code> with the <code>?version=&lt;commit-sha&gt;</code> query parameter serves the document as it was at that commit. The
+            response carries a <code>Memento-Datetime</code> header with the commit datetime, the commit SHA as the <code>ETag</code>, and immutable
+            <code>Cache-Control</code> — a historical version never changes.</p>
+        <p>Historical versions are read-only: only <code>acl:Read</code> is advertised in the <code>Link</code> headers and write methods answer
+            <code>405 Method Not Allowed</code>. In the user interface a historical version page shows a notice banner with a link back to the current version.</p>
+        <p>Historical versions are also outside the scope of SPARQL: the dataspace's RDF dataset holds only the current version of every
+            document, while the history lives solely in the Git repository. Queries on the <a href="../http-api/#sparql">SPARQL endpoint</a>
+            therefore always answer over the latest versions.</p>
+        <pre>GET /orders/10248/?version=8c9f2b1 HTTP/1.1
+Host: localhost:4443
+Accept: text/turtle
+
+HTTP/1.1 200 OK
+Content-Type: text/turtle
+Memento-Datetime: Tue, 01 Sep 2026 14:03:59 GMT
+ETag: "8c9f2b1"
+Cache-Control: public, max-age=31536000, immutable
+Link: &lt;https://localhost:4443/orders/10248/&gt;; rel="original"</pre>
+    </div>
+    <div>
+        <h2 id="timemap">TimeMap</h2>
+        <p><code>GET</code> with the <code>?timemap</code> query parameter serves the document's version history. In RDF formats the TimeMap is described
+            with <a href="https://www.w3.org/TR/prov-o/" target="_blank">PROV-O</a>: a <code>prov:Collection</code> of <code>prov:Entity</code> mementos, each
+            <code>prov:specializationOf</code> the document, <code>prov:generatedAtTime</code> its commit datetime, and <code>prov:wasRevisionOf</code> its
+            predecessor. Requesting <code>application/link-format</code> serves the serialization RFC 7089 requires.</p>
+        <p>Order 10248's history with two versions, as PROV-O:</p>
+        <pre>@prefix prov: &lt;http://www.w3.org/ns/prov#&gt; .
+@prefix xsd:  &lt;http://www.w3.org/2001/XMLSchema#&gt; .
+
+&lt;https://localhost:4443/orders/10248/?timemap&gt; a prov:Collection ;
+    prov:hadMember &lt;https://localhost:4443/orders/10248/?version=4d1e7aa&gt;,
+        &lt;https://localhost:4443/orders/10248/?version=8c9f2b1&gt; .
+
+&lt;https://localhost:4443/orders/10248/?version=4d1e7aa&gt; a prov:Entity ;
+    prov:specializationOf &lt;https://localhost:4443/orders/10248/&gt; ;
+    prov:generatedAtTime "2026-08-30T10:12:04Z"^^xsd:dateTime .
+
+&lt;https://localhost:4443/orders/10248/?version=8c9f2b1&gt; a prov:Entity ;
+    prov:specializationOf &lt;https://localhost:4443/orders/10248/&gt; ;
+    prov:generatedAtTime "2026-09-01T14:03:59Z"^^xsd:dateTime ;
+    prov:wasRevisionOf &lt;https://localhost:4443/orders/10248/?version=4d1e7aa&gt; .</pre>
+        <p>and the same TimeMap as <code>application/link-format</code>:</p>
+        <pre>&lt;https://localhost:4443/orders/10248/&gt;;rel="original",
+&lt;https://localhost:4443/orders/10248/?timemap&gt;;rel="self";type="application/link-format",
+&lt;https://localhost:4443/orders/10248/?version=4d1e7aa&gt;;rel="memento";datetime="Sun, 30 Aug 2026 10:12:04 GMT",
+&lt;https://localhost:4443/orders/10248/?version=8c9f2b1&gt;;rel="memento";datetime="Tue, 01 Sep 2026 14:03:59 GMT"</pre>
+        <p>A TimeMap of a document with no versions answers <code>404 Not Found</code>. A non-versioned document answers <code>406 Not Acceptable</code>
+            when <code>application/link-format</code> is requested.</p>
+        <p>The Memento hypermedia uses IANA-registered relation types: the document advertises its <code>timemap</code> and <code>timegate</code> in
+            <code>Link</code> headers, a historical version links back to the document with <code>rel=original</code>, and the TimeMap identifies itself with
+            <code>rel=self</code>.</p>
+    </div>
+    <div>
+        <h2 id="timegate">TimeGate</h2>
+        <p><code>GET</code> with the <code>?timegate</code> query parameter performs datetime negotiation: the version closest to the
+            <code>Accept-Datetime</code> request header is answered with <code>302 Found</code> and its URI in <code>Location</code>, with ties resolved
+            towards the more recent version. Without <code>Accept-Datetime</code>, the most recent version is selected. The response carries
+            <code>Vary: accept-datetime</code>.</p>
+        <pre>GET /orders/10248/?timegate HTTP/1.1
+Host: localhost:4443
+Accept-Datetime: Mon, 31 Aug 2026 00:00:00 GMT
+
+HTTP/1.1 302 Found
+Location: https://localhost:4443/orders/10248/?version=4d1e7aa
+Vary: accept-datetime
+Link: &lt;https://localhost:4443/orders/10248/&gt;; rel="original"</pre>
+    </div>
+    <div>
+        <h2 id="restore-diff">Restore and diff</h2>
+        <p>From the <a href="../../user-guide/version-history/">version history dialog</a>, a document can be restored to an earlier version — restoring
+            creates a new commit rather than rewriting history, so the intervening versions remain in the TimeMap — and any two versions can be compared
+            as a diff rendered on the document page.</p>
+    </div>
+    <div>
+        <h2 id="management">Management</h2>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
+            <p>The <a href="../../user-guide/version-history/">version history dialog</a> lists a document's versions and drives the restore and diff actions.</p>
+            </div>
+            <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
+            <p><samp>ldh get</samp> exposes a versioned document's TimeMap, TimeGate and historical versions through three mutually exclusive options:</p>
+            <table>
+                <caption class="ac-vh">Version history options</caption>
+                <thead>
+                    <tr>
+                        <th scope="col">Option</th>
+                        <th scope="col">Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th scope="row"><samp>--timemap</samp></th>
+                        <td>The version history (PROV-O in RDF formats, or <code>application/link-format</code> via <samp>--accept</samp>)</td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><samp>--version &lt;sha&gt;</samp></th>
+                        <td>The historical version at the given commit</td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><samp>--timegate</samp></th>
+                        <td>Datetime negotiation; the optional <samp>--datetime</samp> takes an RFC 1123 or ISO 8601 datetime. Prints the negotiated version's URI as the only line on stdout, so it pipes into another <samp>ldh get</samp></td>
+                    </tr>
+                </tbody>
+            </table>
+            </div>
+        </div>
+    </div>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/ttl-to-html.sh b/docs/ttl-to-html.sh
index df292d4f..635584e7 100755
--- a/docs/ttl-to-html.sh
+++ b/docs/ttl-to-html.sh
@@ -28,6 +28,26 @@ echo '</map>' >> timestamps.xml
 rm -rf "$OUTPUT_FOLDER"
 mkdir -p "$OUTPUT_FOLDER"
 
+# LinkedDataHub design system assets — copied from a local checkout when present, fetched from GitHub otherwise
+LDH_SRC="${LDH_SRC:-../../LinkedDataHub}"
+LDH_REF="${LDH_REF:-develop}"
+LDH_CSS_PATH="src/main/webapp/static/com/atomgraph/linkeddatahub/css"
+# The pages link fonts.css, colors_and_type.css, app.css, retro.css and ldh.css, in that order.
+# core.css, controls.css, overlays.css and surfaces.css are never linked directly — app.css
+# @imports core.css, which @imports the other three — but they must be copied alongside or the
+# imports 404 and every ac-* primitive loses its styling.
+CSS_FILES="colors_and_type.css core.css controls.css overlays.css surfaces.css app.css retro.css ldh.css fonts.css"
+FONT_FILES="geist.woff2 geist-latin-ext.woff2 geist-mono.woff2 geist-mono-latin-ext.woff2 instrument-serif.woff2 instrument-serif-italic.woff2 instrument-serif-latin-ext.woff2 instrument-serif-italic-latin-ext.woff2 material-symbols-rounded.woff2"
+mkdir -p "$OUTPUT_FOLDER"/static/css/fonts
+if [ -d "$LDH_SRC/$LDH_CSS_PATH" ]; then
+    for f in $CSS_FILES; do cp "$LDH_SRC/$LDH_CSS_PATH/$f" "$OUTPUT_FOLDER"/static/css/; done
+    for f in $FONT_FILES; do cp "$LDH_SRC/$LDH_CSS_PATH/fonts/$f" "$OUTPUT_FOLDER"/static/css/fonts/; done
+else
+    for f in $CSS_FILES; do curl -fsSL "https://raw.githubusercontent.com/AtomGraph/LinkedDataHub/$LDH_REF/$LDH_CSS_PATH/$f" -o "$OUTPUT_FOLDER"/static/css/"$f"; done
+    for f in $FONT_FILES; do curl -fsSL "https://raw.githubusercontent.com/AtomGraph/LinkedDataHub/$LDH_REF/$LDH_CSS_PATH/fonts/$f" -o "$OUTPUT_FOLDER"/static/css/fonts/"$f"; done
+fi
+cp docs.css "$OUTPUT_FOLDER"/static/css/
+
 # Generate files.xml (sha1 hash → relative filename mapping, scans current folder recursively)
 ./sha1map-to-xml.sh . > files.xml
 
@@ -39,7 +59,7 @@ docker run --rm -v "$PWD":"/docs" -v "$RDF_FOLDER":"/rdf" -v "$OUTPUT_FOLDER":"/
     output-folder="/output"
 
 # Copy media files (excluding html output, generated .rdf/.xml, scripts) to html/files/
-rsync -a --exclude=html --exclude=rdf --exclude=node_modules --exclude='*.rdf' --exclude='*.xml' --exclude='*.ttl' --exclude='*.sh' --exclude=Makefile . "$OUTPUT_FOLDER/files/"
+rsync -a --exclude=html --exclude=rdf --exclude=node_modules --exclude='*.rdf' --exclude='*.xml' --exclude='*.ttl' --exclude='*.sh' --exclude='*.xsl' --exclude='*.css' --exclude=Makefile . "$OUTPUT_FOLDER/files/"
 
 # Remove temporary RDF/XML folder
 rm -rf "$RDF_FOLDER"
diff --git a/docs/ttl-to-html.xsl b/docs/ttl-to-html.xsl
index 06918837..2620e5fb 100644
--- a/docs/ttl-to-html.xsl
+++ b/docs/ttl-to-html.xsl
@@ -4,7 +4,7 @@
     xmlns:xs="http://www.w3.org/2001/XMLSchema"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:dct="http://purl.org/dc/terms/"
-    xmlns:dh="https://www.w3.org/ns/ldt/document-hierarchy#"
+    xmlns:dh="https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#"
     xmlns:ldh="https://w3id.org/atomgraph/linkeddatahub#"
     xmlns:xhtml="http://www.w3.org/1999/xhtml"
     xmlns:json="http://www.w3.org/2005/xpath-functions"
@@ -49,6 +49,24 @@
         <xsl:sequence select="'file:' || replace($rel, '\.rdf$', '/')"/>
     </xsl:function>
 
+    <!--
+        Explicit reading order for sections whose narrative order differs from the alphabetical
+        one (the tutorial stages, the get-started steps, the top-level sections). Unlisted
+        documents sort after listed ones, alphabetically by title.
+    -->
+    <xsl:variable name="nav-order" as="map(xs:string, xs:integer)" select="map{
+        'file:/about/': 1, 'file:/get-started/': 2, 'file:/tutorial/': 3, 'file:/user-guide/': 4, 'file:/reference/': 5, 'file:/extending/': 6,
+        'file:/get-started/setup/': 1, 'file:/get-started/get-an-account/': 2, 'file:/get-started/request-access/': 3,
+        'file:/tutorial/hello-dataspace/': 1, 'file:/tutorial/structure/': 2, 'file:/tutorial/model/': 3, 'file:/tutorial/data/': 4, 'file:/tutorial/media/': 5, 'file:/tutorial/insight/': 6, 'file:/tutorial/composition/': 7, 'file:/tutorial/publish/': 8, 'file:/tutorial/app-as-repository/': 9, 'file:/tutorial/beyond-low-code/': 10,
+        'file:/user-guide/create-data/create-documents/': 1, 'file:/user-guide/create-data/create-content/': 2, 'file:/user-guide/create-data/create-resources/': 3,
+        'file:/reference/data-model/documents/': 1, 'file:/reference/data-model/blocks/': 2, 'file:/reference/data-model/resources/': 3
+    }"/>
+
+    <xsl:function name="local:nav-order" as="xs:integer">
+        <xsl:param name="node" as="node()"/>
+        <xsl:sequence select="($nav-order(local:resource-uri($node)), 999)[1]"/>
+    </xsl:function>
+
     <!-- ==================== INITIAL TEMPLATE ==================== -->
 
     <xsl:template name="main">
@@ -58,32 +76,34 @@
         <xsl:variable name="root-base-path" as="xs:string" select="'/'"/>
         <xsl:variable name="top-level-docs" select="$all-docs/rdf:RDF[resolve-uri('../', local:resource-uri(.)) = 'file:/']"/>
         <xsl:result-document href="{$output-folder}/index.html" method="xhtml" html-version="5">
-            <html>
+            <html lang="en" data-retro="m3" data-theme="light">
                 <xsl:call-template name="html-head">
                     <xsl:with-param name="title" select="'Documentation'"/>
                 </xsl:call-template>
-                <body>
-                    <xsl:call-template name="navbar">
+                <body class="app">
+                    <xsl:call-template name="header">
                         <xsl:with-param name="brand-href" select="''"/>
                     </xsl:call-template>
-                    <div class="container-fluid">
-                        <div class="row-fluid">
-                            <nav class="span2">
-                                <ul class="nav nav-list">
-                                    <!-- current-uri = 'file:/' — none of the nav items match, so no active class -->
-                                    <xsl:apply-templates select="$top-level-docs" mode="nav">
-                                        <xsl:sort select="rdf:Description[rdf:type/@rdf:resource = ('https://www.w3.org/ns/ldt/document-hierarchy#Item', 'https://www.w3.org/ns/ldt/document-hierarchy#Container')]/dct:title"/>
-                                        <xsl:with-param name="current-uri" select="'file:/'" tunnel="yes"/>
-                                        <xsl:with-param name="base-path" select="$root-base-path" tunnel="yes"/>
-                                    </xsl:apply-templates>
-                                </ul>
-                            </nav>
-                            <main class="span7">
+                    <div class="docs-layout">
+                        <div class="docs-nav" role="navigation">
+                            <ul>
+                                <!-- current-uri = 'file:/' — none of the nav items match, so nothing is active -->
+                                <xsl:apply-templates select="$top-level-docs" mode="nav">
+                                    <xsl:sort select="local:nav-order(.)" data-type="number"/>
+                                    <xsl:sort select="rdf:Description[rdf:type/@rdf:resource = ('https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Item', 'https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Container')]/dct:title"/>
+                                    <xsl:with-param name="current-uri" select="'file:/'" tunnel="yes"/>
+                                    <xsl:with-param name="base-path" select="$root-base-path" tunnel="yes"/>
+                                </xsl:apply-templates>
+                            </ul>
+                        </div>
+                        <div class="docs-main" role="main">
+                            <div class="docs-children">
                                 <xsl:apply-templates select="$top-level-docs" mode="child-item">
-                                    <xsl:sort select="rdf:Description[rdf:type/@rdf:resource = ('https://www.w3.org/ns/ldt/document-hierarchy#Item', 'https://www.w3.org/ns/ldt/document-hierarchy#Container')]/dct:title"/>
+                                    <xsl:sort select="local:nav-order(.)" data-type="number"/>
+                                    <xsl:sort select="rdf:Description[rdf:type/@rdf:resource = ('https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Item', 'https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Container')]/dct:title"/>
                                     <xsl:with-param name="base-path" select="$root-base-path" tunnel="yes"/>
                                 </xsl:apply-templates>
-                            </main>
+                            </div>
                         </div>
                     </div>
                     <xsl:call-template name="footer"/>
@@ -111,39 +131,38 @@
     <!-- ==================== ONE PAGE PER RDF DOCUMENT ==================== -->
 
     <xsl:template match="/rdf:RDF">
-        <xsl:variable name="resource" select="rdf:Description[rdf:type/@rdf:resource = ('https://www.w3.org/ns/ldt/document-hierarchy#Item', 'https://www.w3.org/ns/ldt/document-hierarchy#Container')]"/>
+        <xsl:variable name="resource" select="rdf:Description[rdf:type/@rdf:resource = ('https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Item', 'https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Container')]"/>
         <xsl:variable name="resource-uri" select="local:resource-uri(.)"/>
         <xsl:variable name="base-path" select="replace($resource-uri, '^file:', '')"/>
 
         <xsl:result-document href="{$output-folder}{$base-path}index.html" method="xhtml" html-version="5">
-            <html>
+            <html lang="en" data-retro="m3" data-theme="light">
                 <xsl:call-template name="html-head">
                     <xsl:with-param name="title" select="$resource/dct:title"/>
                     <xsl:with-param name="description" select="$resource/dct:description"/>
                     <xsl:with-param name="doc-path" select="$base-path"/>
                 </xsl:call-template>
-                <body>
-                    <xsl:call-template name="navbar">
+                <body class="app">
+                    <xsl:call-template name="header">
                         <xsl:with-param name="brand-href" select="local:relativize('/', $base-path)"/>
                     </xsl:call-template>
-                    <div class="container-fluid">
-                        <div class="row-fluid">
-                            <nav class="span2">
-                                <ul class="nav nav-list">
-                                    <xsl:apply-templates
-                                        select="$all-docs/rdf:RDF[resolve-uri('../', local:resource-uri(.)) = 'file:/']"
-                                        mode="nav">
-                                        <xsl:sort select="rdf:Description[rdf:type/@rdf:resource = ('https://www.w3.org/ns/ldt/document-hierarchy#Item', 'https://www.w3.org/ns/ldt/document-hierarchy#Container')]/dct:title"/>
-                                        <xsl:with-param name="current-uri" select="$resource-uri" tunnel="yes"/>
-                                        <xsl:with-param name="base-path" select="$base-path" tunnel="yes"/>
-                                    </xsl:apply-templates>
-                                </ul>
-                            </nav>
-                            <main class="span7">
-                                <xsl:apply-templates select="$resource">
+                    <div class="docs-layout">
+                        <div class="docs-nav" role="navigation">
+                            <ul>
+                                <xsl:apply-templates
+                                    select="$all-docs/rdf:RDF[resolve-uri('../', local:resource-uri(.)) = 'file:/']"
+                                    mode="nav">
+                                    <xsl:sort select="local:nav-order(.)" data-type="number"/>
+                                    <xsl:sort select="rdf:Description[rdf:type/@rdf:resource = ('https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Item', 'https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Container')]/dct:title"/>
+                                    <xsl:with-param name="current-uri" select="$resource-uri" tunnel="yes"/>
                                     <xsl:with-param name="base-path" select="$base-path" tunnel="yes"/>
                                 </xsl:apply-templates>
-                            </main>
+                            </ul>
+                        </div>
+                        <div class="docs-main" role="main">
+                            <xsl:apply-templates select="$resource">
+                                <xsl:with-param name="base-path" select="$base-path" tunnel="yes"/>
+                            </xsl:apply-templates>
                         </div>
                     </div>
                     <xsl:call-template name="footer"/>
@@ -154,31 +173,28 @@
 
     <!-- ==================== CONTAINER ==================== -->
 
-    <xsl:template match="rdf:Description[rdf:type/@rdf:resource = 'https://www.w3.org/ns/ldt/document-hierarchy#Container']">
+    <xsl:template match="rdf:Description[rdf:type/@rdf:resource = 'https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Container']">
         <xsl:param name="base-path" tunnel="yes"/>
         <xsl:variable name="resource-uri" select="local:resource-uri(.)"/>
 
-        <header>
-            <h1><xsl:value-of select="dct:title"/></h1>
-        </header>
+        <h1><xsl:value-of select="dct:title"/></h1>
         <xsl:apply-templates select="*[namespace-uri() = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'][starts-with(local-name(), '_')]">
             <xsl:sort select="xs:integer(substring-after(local-name(), '_'))" data-type="number"/>
         </xsl:apply-templates>
-        <nav>
+        <div class="docs-children">
             <xsl:apply-templates
                 select="$all-docs/rdf:RDF[resolve-uri('../', local:resource-uri(.)) = $resource-uri]"
                 mode="child-item">
-                <xsl:sort select="rdf:Description[rdf:type/@rdf:resource = ('https://www.w3.org/ns/ldt/document-hierarchy#Item', 'https://www.w3.org/ns/ldt/document-hierarchy#Container')]/dct:title"/>
+                <xsl:sort select="local:nav-order(.)" data-type="number"/>
+                <xsl:sort select="rdf:Description[rdf:type/@rdf:resource = ('https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Item', 'https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Container')]/dct:title"/>
             </xsl:apply-templates>
-        </nav>
+        </div>
     </xsl:template>
 
     <!-- ==================== ITEM ==================== -->
 
-    <xsl:template match="rdf:Description[rdf:type/@rdf:resource = 'https://www.w3.org/ns/ldt/document-hierarchy#Item']">
-        <header>
-            <h1><xsl:value-of select="dct:title"/></h1>
-        </header>
+    <xsl:template match="rdf:Description[rdf:type/@rdf:resource = 'https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Item']">
+        <h1><xsl:value-of select="dct:title"/></h1>
         <xsl:apply-templates select="*[namespace-uri() = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'][starts-with(local-name(), '_')]">
             <xsl:sort select="xs:integer(substring-after(local-name(), '_'))" data-type="number"/>
         </xsl:apply-templates>
@@ -202,6 +218,14 @@
 
     <xsl:template match="rdf:Description[rdf:type/@rdf:resource = 'https://w3id.org/atomgraph/linkeddatahub#Object']"/>
 
+    <!-- object blocks other than the children view get a stub: they only execute in a LinkedDataHub rendering -->
+    <xsl:template match="rdf:Description[rdf:type/@rdf:resource = 'https://w3id.org/atomgraph/linkeddatahub#Object'][not(rdf:value/@rdf:resource = 'https://w3id.org/atomgraph/linkeddatahub#ChildrenView')]" priority="1">
+        <div class="screenshot-placeholder">
+            <span class="msi" aria-hidden="true">bolt</span>
+            <p>Interactive block<xsl:if test="dct:title">: <xsl:value-of select="dct:title"/></xsl:if> — executes live in the LinkedDataHub rendering of this page</p>
+        </div>
+    </xsl:template>
+
     <!-- ==================== NAV MODE ==================== -->
 
     <xsl:mode name="nav"/>
@@ -210,22 +234,25 @@
         <xsl:param name="current-uri" tunnel="yes"/>
         <xsl:param name="base-path" tunnel="yes"/>
 
-        <xsl:variable name="resource" select="rdf:Description[rdf:type/@rdf:resource = ('https://www.w3.org/ns/ldt/document-hierarchy#Item', 'https://www.w3.org/ns/ldt/document-hierarchy#Container')]"/>
+        <xsl:variable name="resource" select="rdf:Description[rdf:type/@rdf:resource = ('https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Item', 'https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Container')]"/>
         <xsl:variable name="resource-uri" select="local:resource-uri(.)"/>
         <xsl:variable name="resource-path" select="replace($resource-uri, '^file:', '')"/>
         <xsl:variable name="children" select="$all-docs/rdf:RDF[resolve-uri('../', local:resource-uri(.)) = $resource-uri]"/>
 
         <li>
             <xsl:if test="$resource-uri = $current-uri">
-                <xsl:attribute name="class">active</xsl:attribute>
+                <xsl:attribute name="class">is-active</xsl:attribute>
+                <xsl:attribute name="aria-current">page</xsl:attribute>
             </xsl:if>
             <a href="{local:relativize($resource-path, $base-path)}">
                 <xsl:value-of select="$resource/dct:title"/>
             </a>
-            <xsl:if test="$children">
-                <ul class="nav nav-list">
+            <!-- expand only the active trail: children render when the current page is this node or its descendant -->
+            <xsl:if test="$children and starts-with($current-uri, $resource-uri)">
+                <ul>
                     <xsl:apply-templates select="$children" mode="nav">
-                        <xsl:sort select="rdf:Description[rdf:type/@rdf:resource = ('https://www.w3.org/ns/ldt/document-hierarchy#Item', 'https://www.w3.org/ns/ldt/document-hierarchy#Container')]/dct:title"/>
+                        <xsl:sort select="local:nav-order(.)" data-type="number"/>
+                        <xsl:sort select="rdf:Description[rdf:type/@rdf:resource = ('https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Item', 'https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Container')]/dct:title"/>
                     </xsl:apply-templates>
                 </ul>
             </xsl:if>
@@ -239,10 +266,10 @@
     <xsl:template match="/rdf:RDF" mode="child-item">
         <xsl:param name="base-path" tunnel="yes"/>
 
-        <xsl:variable name="resource" select="rdf:Description[rdf:type/@rdf:resource = ('https://www.w3.org/ns/ldt/document-hierarchy#Item', 'https://www.w3.org/ns/ldt/document-hierarchy#Container')]"/>
+        <xsl:variable name="resource" select="rdf:Description[rdf:type/@rdf:resource = ('https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Item', 'https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Container')]"/>
         <xsl:variable name="resource-path" select="replace(local:resource-uri(.), '^file:', '')"/>
 
-        <div class="well">
+        <div class="docs-card">
             <h2>
                 <a href="{local:relativize($resource-path, $base-path)}">
                     <xsl:if test="$resource/dct:description">
@@ -261,13 +288,17 @@
 
     <xsl:mode name="xhtml" on-no-match="shallow-copy"/>
 
-    <!-- resolve uploads/<hash> to files/<name> in img src and object data -->
-    <xsl:template match="xhtml:img/@src[contains(., 'uploads/')] | xhtml:object/@data[contains(., 'uploads/')]" mode="xhtml">
+    <!-- resolve /uploads/<hash> to files/<name> in img/video src and object data. The source
+         reference is absolute from the dataspace root, because uploads/ is a flat namespace
+         outside the document hierarchy; the static build is served from a sub-path, so the
+         result is relativized against the page being written rather than kept absolute. -->
+    <xsl:template match="xhtml:img/@src[contains(., 'uploads/')] | xhtml:video/@src[contains(., 'uploads/')] | xhtml:object/@data[contains(., 'uploads/')]" mode="xhtml">
+        <xsl:param name="base-path" as="xs:string" tunnel="yes"/>
         <xsl:variable name="hash" select="substring-after(., 'uploads/')"/>
         <xsl:variable name="match" select="key('file-by-sha1', $hash, $files-xml)"/>
         <xsl:choose>
             <xsl:when test="$match">
-                <xsl:attribute name="{local-name()}" select="substring-before(., 'uploads/') || 'files/' || $match/json:string[@key='name']"/>
+                <xsl:attribute name="{local-name()}" select="local:relativize('/files/' || $match/json:string[@key='name'], $base-path)"/>
             </xsl:when>
             <xsl:otherwise>
                 <xsl:message terminate="yes">Could not find file for hash '<xsl:value-of select="$hash"/>'</xsl:message>
@@ -275,17 +306,13 @@
         </xsl:choose>
     </xsl:template>
 
-    <!-- strip "LinkedDataHub Cloud" tabs, keep only the active tab content -->
-    <xsl:template match="xhtml:div[@class = 'tabbable'][xhtml:ul/xhtml:li/xhtml:a = 'LinkedDataHub Cloud']" mode="xhtml">
-        <xsl:apply-templates select="xhtml:div[@class = 'tab-content']/xhtml:div[contains-token(@class, 'active')]/*" mode="xhtml"/>
-    </xsl:template>
-
     <!-- ==================== HTML BOILERPLATE NAMED TEMPLATES ==================== -->
 
     <xsl:template name="html-head">
         <xsl:param name="title" as="xs:string"/>
         <xsl:param name="description" as="xs:string?"/>
         <xsl:param name="doc-path" as="xs:string?"/>
+        <xsl:variable name="css-base" select="local:relativize('/static/css/', ($doc-path, '/')[1])"/>
         <head>
             <title>LinkedDataHub v5 — <xsl:value-of select="$title"/></title>
             <xsl:if test="$description">
@@ -295,27 +322,40 @@
             <xsl:if test="$modified">
                 <meta name="last-modified" content="{$modified}"/>
             </xsl:if>
-            <link href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/files/css/bootstrap.css" rel="stylesheet" type="text/css"/>
-            <link href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/files/css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
-            <link href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/files/css/linkeddatahub-bootstrap.css" rel="stylesheet" type="text/css"/>
-            <style type="text/css">
-                body { padding-top: 60px; }
-                object { width: 100%; min-height: 640px; }
-            </style>
-            <script type="text/javascript" src="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/files/js/jquery.min.js"/>
-            <script type="text/javascript" src="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/files/js/bootstrap.min.js"/>
+            <meta name="viewport" content="width=device-width, initial-scale=1"/>
+            <!-- design system, in the order the platform links it: fonts (vendored), tokens, components
+                 (app.css imports core.css, which imports controls.css, overlays.css and surfaces.css),
+                 m3 skin, then LDH's own app layer over the kits — and the docs skin last -->
+            <link href="{$css-base}fonts.css" rel="stylesheet" type="text/css"/>
+            <link href="{$css-base}colors_and_type.css" rel="stylesheet" type="text/css"/>
+            <link href="{$css-base}app.css" rel="stylesheet" type="text/css"/>
+            <link href="{$css-base}retro.css" rel="stylesheet" type="text/css"/>
+            <link href="{$css-base}ldh.css" rel="stylesheet" type="text/css"/>
+            <link href="{$css-base}docs.css" rel="stylesheet" type="text/css"/>
+            <!-- No '>' anywhere in this script: the xhtml output method escapes it to &gt;, and HTML
+                 parses script content as raw text, so the entity reaches the engine verbatim. A child
+                 combinator here threw "not a valid selector" and no panel ever switched. Own the
+                 child test in JS instead of in the selector. -->
             <script type="text/javascript">
                 <xsl:text><![CDATA[
-                    $(document).ready(function() {
-                        $("ul.nav-tabs a").on("click", function() {
-                            $(this).closest("ul").children().toggleClass("active", false);
-                            $(this).closest("li").toggleClass("active", true);
-                            $(this).closest("ul").next().children().toggleClass("active", false);
-                            $(this).closest("ul").next().children().eq($(this).closest("li").index()).toggleClass("active", true);
+                    document.addEventListener("click", function(event) {
+                        var tab = event.target.closest(".ac-tab[role='tab']");
+                        if (!tab) return;
+                        var tablist = tab.closest("[role='tablist']");
+                        var tabs = tablist.closest(".ac-tabs");
+                        if (!tabs || !tabs.querySelector(".ac-tabpanel")) return;
+                        tablist.querySelectorAll(".ac-tab").forEach(function(t) { t.classList.remove("is-on"); t.setAttribute("aria-selected", "false"); });
+                        tab.classList.add("is-on");
+                        tab.setAttribute("aria-selected", "true");
+                        tabs.querySelectorAll(".ac-tabpanel").forEach(function(pane) {
+                            if (pane.parentElement !== tabs) return;
+                            pane.hidden = pane.id !== tab.getAttribute("aria-controls");
                         });
                     });
                 ]]></xsl:text>
             </script>
+            <script async="async" defer="defer" src="https://buttons.github.io/buttons.js"/>
+            <script async="async" defer="defer" src="https://platform.twitter.com/widgets.js"/>
             <script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-38402002-6"/>
             <script>
                 <xsl:text><![CDATA[
@@ -328,68 +368,69 @@
         </head>
     </xsl:template>
 
-    <xsl:template name="navbar">
+    <xsl:template name="header">
         <xsl:param name="brand-href" as="xs:string"/>
-        <div class="navbar navbar-fixed-top">
-            <div class="navbar-inner">
-                <div class="container-fluid">
-                    <a class="brand" href="{$brand-href}">LinkedDataHub</a>
-                    <div class="nav-collapse collapse">
-                        <ul class="nav">
-                            <li class="active">
-                                <div class="btn-group">
-                                    <a class="btn" href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/">Documentation v5</a>
-                                    <button class="btn dropdown-toggle" data-toggle="dropdown">
-                                        <span class="caret"/>
-                                    </button>
-                                    <ul class="dropdown-menu">
-                                        <li><a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/v3/">Documentation v3</a></li>
-                                        <li><a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/v2/">Documentation v2</a></li>
-                                    </ul>
-                                </div>
-                            </li>
-                            <li><a href="https://github.com/AtomGraph/LinkedDataHub" target="_blank">Code</a></li>
-                        </ul>
+        <div class="ldh-header" role="banner">
+            <a class="ldh-wordmark" href="{$brand-href}">
+                <span class="mark"></span>
+                <span>LinkedDataHub</span>
+            </a>
+            <div/> <!-- keep the header grid columns aligned -->
+            <div class="ldh-header-actions">
+                <details class="docs-versions">
+                    <summary>Documentation v6</summary>
+                    <div>
+                        <a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/v5/">Documentation v5</a>
+                        <a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/v3/">Documentation v3</a>
+                        <a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/v2/">Documentation v2</a>
                     </div>
-                </div>
+                </details>
+                <a href="https://github.com/AtomGraph/LinkedDataHub-Apps" target="_blank">Sample dataspaces</a>
+                <a class="github-button" href="https://github.com/AtomGraph/LinkedDataHub/subscription" data-icon="octicon-eye" data-size="large" aria-label="Watch AtomGraph/LinkedDataHub on GitHub">Watch</a>
+                <a class="github-button" href="https://github.com/AtomGraph/LinkedDataHub" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star AtomGraph/LinkedDataHub on GitHub">Star</a>
+                <a href="https://twitter.com/atomgraphhq" class="twitter-follow-button" data-show-count="false">Follow @atomgraphhq</a>
+                <a href="https://youtube.com/@atomgraph" target="_blank">
+                    <span class="msi outline" aria-hidden="true">smart_display</span>
+                    <xsl:text> @atomgraph</xsl:text>
+                </a>
             </div>
         </div>
     </xsl:template>
 
     <xsl:template name="footer">
-        <div class="footer container-fluid">
-            <div class="row-fluid">
-                <div class="offset2 span8">
-                    <div class="span3">
-                        <h2 class="nav-header">About</h2>
-                        <ul class="nav nav-list">
-                            <li><a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/about/" target="_blank">LinkedDataHub</a></li>
-                            <li><a href="https://atomgraph.com" target="_blank">AtomGraph</a></li>
-                        </ul>
-                    </div>
-                    <div class="span3">
-                        <h2 class="nav-header">Resources</h2>
-                        <ul class="nav nav-list">
-                            <li><a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/" target="_blank">Documentation</a></li>
-                            <li><a href="https://www.youtube.com/channel/UCtrdvnVjM99u9hrjESwfCeg" target="_blank">Screencasts</a></li>
-                        </ul>
-                    </div>
-                    <div class="span3">
-                        <h2 class="nav-header">Support</h2>
-                        <ul class="nav nav-list">
-                            <li><a href="https://groups.io/g/linkeddatahub" target="_blank">Mailing list</a></li>
-                            <li><a href="https://github.com/AtomGraph/LinkedDataHub/issues" target="_blank">Report issues</a></li>
-                            <li><a href="mailto:support@linkeddatahub.com">Contact support</a></li>
-                        </ul>
-                    </div>
-                    <div class="span3">
-                        <h2 class="nav-header">Follow us</h2>
-                        <ul class="nav nav-list">
-                            <li><a href="https://twitter.com/atomgraphhq" target="_blank">@atomgraphhq</a></li>
-                            <li><a href="https://github.com/AtomGraph" target="_blank">github.com/AtomGraph</a></li>
-                        </ul>
-                    </div>
+        <div class="ldh-footer" role="contentinfo">
+            <div class="cols">
+                <div class="col brand-col">
+                    <a class="ldh-wordmark" href="https://linkeddatahub.com" target="_blank">
+                        <span class="mark"></span>
+                        <span>LinkedDataHub</span>
+                    </a>
+                    <p>The low-code Knowledge Graph application platform. Built on RDF, SPARQL and Linked Data principles.</p>
+                </div>
+                <div class="col">
+                    <p class="ftitle">About</p>
+                    <a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/about/" target="_blank">LinkedDataHub</a>
+                    <a href="https://atomgraph.com" target="_blank">AtomGraph</a>
+                </div>
+                <div class="col">
+                    <p class="ftitle">Resources</p>
+                    <a href="https://atomgraph.github.io/LinkedDataHub/linkeddatahub/docs/" target="_blank">Documentation</a>
+                    <a href="https://www.youtube.com/channel/UCtrdvnVjM99u9hrjESwfCeg" target="_blank">Screencasts</a>
                 </div>
+                <div class="col">
+                    <p class="ftitle">Support</p>
+                    <a href="https://groups.io/g/linkeddatahub" target="_blank">Mailing list</a>
+                    <a href="https://github.com/AtomGraph/LinkedDataHub/issues" target="_blank">Report issues</a>
+                    <a href="mailto:support@linkeddatahub.com">Contact support</a>
+                </div>
+                <div class="col">
+                    <p class="ftitle">Follow us</p>
+                    <a href="https://twitter.com/atomgraphhq" target="_blank">@atomgraphhq</a>
+                    <a href="https://github.com/AtomGraph" target="_blank">github.com/AtomGraph</a>
+                </div>
+            </div>
+            <div class="legal">
+                <span>© <xsl:value-of select="format-date(current-date(), '[Y]')"/> AtomGraph · LinkedDataHub</span>
             </div>
         </div>
     </xsl:template>
diff --git a/docs/tutorial.ttl b/docs/tutorial.ttl
index 77c0b8e1..490b434c 100644
--- a/docs/tutorial.ttl
+++ b/docs/tutorial.ttl
@@ -1,37 +1,92 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Container ;
     dct:title "Tutorial" ;
-    dct:description "Build your first Knowledge Graph application, from an empty dataspace to a published app" ;
+    dct:description "Build your first Knowledge Graph dataspace, from empty to published" ;
     rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Build your first Knowledge Graph application, from an empty dataspace to a published app</p>
-    <p>This tutorial rebuilds the <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/demo/northwind-traders" target="_blank">Northwind Traders demo application</a>: the iconic sample
-        database, reborn as an RDF Knowledge Graph. Every stage ends with a result you can see in the browser. Most steps are shown two ways: point-and-click in the user interface, and as
-        <a href="../reference/command-line-interface/" target="_blank">CLI commands</a> that you can script, version and replay.</p>
-    <p>Before you start you need a running LinkedDataHub instance and the owner's WebID certificate. The <a href="../get-started/" target="_blank">Get started</a> section covers both. The command line
-        examples assume the <code>bin/</code> scripts are on your <code>PATH</code> and use these shell variables throughout:</p>
-    <pre>base="https://localhost:4443/"
-cert_pem_file="ssl/owner/cert.pem"
-cert_password="..."</pre>
+    <p class="ldh-body-lg">Build your first Knowledge Graph dataspace, from empty to published</p>
+    <p>This tutorial rebuilds the <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/demo/northwind-traders" target="_blank">Northwind Traders demo dataspace</a>: the iconic sample
+        database, reborn as an RDF Knowledge Graph. Every stage ends with a result you can see in the browser. Most steps are shown in two ways: point-and-click in the user interface, and as
+        <a href="../reference/command-line-interface/" target="_blank">CLI commands</a> you can script, version and replay. If you are new to the platform,
+        <a href="../about/" target="_blank">About LinkedDataHub</a> introduces the ideas this tutorial exercises.</p>
+    <p>Before you start, you need a running LinkedDataHub instance and the owner's WebID certificate. The <a href="../get-started/" target="_blank">Get started</a> section covers both.</p>
+    <p>The command line examples use the <a href="../reference/command-line-interface/" target="_blank"><samp>ldh</samp> CLI</a>. Download it from a
+        <a href="https://github.com/AtomGraph/LinkedDataHub/releases" target="_blank">LinkedDataHub release</a> (<samp>ldh-&lt;version&gt;.tar.gz</samp>, needs Java 21),
+        or build it from source with <samp>make cli</samp>. The examples rely on its environment variable defaults, set once per shell session:</p>
+    <pre>export LDH_BASE="https://localhost:4443/"
+export LDH_CERT_FILE="ssl/owner/keystore.p12"
+export LDH_CERT_PASSWORD="..."   # the owner_cert_password secret</pre>
     <div>
         <h2 id="stages">Stages</h2>
-        <ol>
-            <li><a href="hello-dataspace/">Hello dataspace</a> — give your app an identity and a landing page</li>
-            <li><a href="structure/">Structure</a> — lay out the document hierarchy</li>
-            <li><a href="model/">Model</a> — define the vocabulary that describes your domain</li>
-            <li><a href="data/">Data</a> — import CSV data using SPARQL mappings</li>
-            <li><a href="media/">Media</a> — upload files and link them to resources</li>
-            <li><a href="insight/">Insight</a> — turn SPARQL queries into charts and views</li>
-            <li><a href="composition/">Composition</a> — assemble the landing page from content blocks</li>
-            <li><a href="publish/">Publish</a> — grant public access and ship it</li>
-            <li><a href="app-as-repository/">App as a repository</a> — make the app reproducible</li>
-            <li><a href="beyond-low-code/">Beyond low-code</a> — where to go when data alone is not enough</li>
-        </ol>
+        <p>Ten stages, each building on the last.</p>
+        <table>
+            <caption class="ac-vh">Tutorial stages in order</caption>
+            <thead>
+                <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Stage</th>
+                    <th scope="col">What you do</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row">1</th>
+                    <td><a href="hello-dataspace/">Hello dataspace</a></td>
+                    <td>Give your app an identity and a landing page</td>
+                </tr>
+                <tr>
+                    <th scope="row">2</th>
+                    <td><a href="structure/">Structure</a></td>
+                    <td>Lay out the document hierarchy</td>
+                </tr>
+                <tr>
+                    <th scope="row">3</th>
+                    <td><a href="model/">Model</a></td>
+                    <td>Define the vocabulary that describes your domain</td>
+                </tr>
+                <tr>
+                    <th scope="row">4</th>
+                    <td><a href="data/">Data</a></td>
+                    <td>Import CSV data using SPARQL mappings</td>
+                </tr>
+                <tr>
+                    <th scope="row">5</th>
+                    <td><a href="media/">Media</a></td>
+                    <td>Upload files and link them to resources</td>
+                </tr>
+                <tr>
+                    <th scope="row">6</th>
+                    <td><a href="insight/">Insight</a></td>
+                    <td>Turn SPARQL queries into charts and views</td>
+                </tr>
+                <tr>
+                    <th scope="row">7</th>
+                    <td><a href="composition/">Composition</a></td>
+                    <td>Assemble the landing page from content blocks</td>
+                </tr>
+                <tr>
+                    <th scope="row">8</th>
+                    <td><a href="publish/">Publish</a></td>
+                    <td>Grant public access and ship it</td>
+                </tr>
+                <tr>
+                    <th scope="row">9</th>
+                    <td><a href="app-as-repository/">App as a repository</a></td>
+                    <td>Make the app reproducible</td>
+                </tr>
+                <tr>
+                    <th scope="row">10</th>
+                    <td><a href="beyond-low-code/">Beyond low-code</a></td>
+                    <td>Where to go when data alone is not enough</td>
+                </tr>
+            </tbody>
+        </table>
+        <p>In a hurry? <a href="app-as-repository/">Stage 9</a> shows how to replay the finished app with a single <samp>make install</samp>.</p>
     </div>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/tutorial/app-as-repository.ttl b/docs/tutorial/app-as-repository.ttl
index fc725fb8..5eb1eae0 100644
--- a/docs/tutorial/app-as-repository.ttl
+++ b/docs/tutorial/app-as-repository.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
@@ -10,41 +10,93 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Make the app reproducible: a git repository that installs into any instance</p>
-    <p>Every stage so far produced files — document descriptions, mapping queries, CSV data, media. Kept in a repository with a small install script, they <em>are</em> the application: versionable,
-        diffable, reviewable, and replayable into any LinkedDataHub instance. This is the layout the <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/demo/northwind-traders" target="_blank">Northwind Traders repository</a> uses:</p>
+    <p class="ldh-body-lg">Make the app reproducible: a git repository that installs into any instance</p>
+    <p>Every stage so far produced files — document descriptions, mapping queries, CSV data, media. Kept in a repository with a small install script, they <em>are</em> the dataspace: versionable,
+        diffable, reviewable, and replayable into any LinkedDataHub instance with <samp>ldh push</samp>. This is the layout the <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/demo/northwind-traders" target="_blank">Northwind Traders repository</a> uses:</p>
     <pre>northwind-traders/
-├── root.ttl              # one .ttl per document...
-├── categories.ttl
-├── categories/           # ...and a folder for the files it imports
+├── root.ttl              # the target document itself
+├── categories.ttl        # one RDF file per document...
+├── categories/           # ...and a folder for the files it holds
 │   ├── categories.csv
 │   ├── categories.rq
-│   └── *.gif
+│   └── *.jpg
 ├── admin/model/
 │   ├── ns.ttl            # the namespace ontology
-│   ├── patch-ontology.ru # resets it before re-import
-│   └── import-ns.sh
+│   └── patch-ontology.ru # resets it before re-import
 ├── imports.csv           # the CSV import manifest
-├── install.sh            # replays everything against a base URI
-├── update-folder.sh
-├── .ldhignore            # files that are not documents
+├── install.sh            # replays everything against $LDH_BASE
+├── .ldhignore            # files that are neither documents nor uploads
 └── Makefile</pre>
+    <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/demo/northwind-traders" target="_blank">demo/northwind-traders</a> · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/" target="_blank">northwind-traders.demo.linkeddatahub.com</a></p>
+    <p>To follow along, clone the apps repository — <samp>git clone https://github.com/AtomGraph/LinkedDataHub-Apps</samp>, the demo lives in <samp>demo/northwind-traders</samp> — or assemble the
+        files from the previous stages into a folder of the same shape.</p>
     <div>
         <h2 id="convention">The convention</h2>
-        <p>The document URL is derived from the file path: <samp>categories.ttl</samp> installs to <samp>${base}categories/</samp>, <samp>root.ttl</samp> to <samp>${base}</samp> itself.
-            <samp>update-folder.sh</samp> walks the tree applying that rule — resolving each file's relative URIs against its document URL and <code>PUT</code>ting the result — and skips anything
-            matched by <samp>.ldhignore</samp>.</p>
+        <p>The document URL is derived from the file path: <samp>categories.ttl</samp> installs to <samp>${base}categories/</samp>, and <samp>root.ttl</samp> at the top of the tree is the
+            target document <samp>${base}</samp> itself. <a href="../../reference/command-line-interface/#push" target="_blank"><samp>ldh push</samp></a> walks the tree applying that rule: an RDF
+            file is <code>PUT</code> to the document its path spells, with its relative URIs resolved against that URL; every other file is uploaded into its folder's document; a subfolder
+            recurses under the child document the RDF file beside it describes. Anything matched by <samp>.ldhignore</samp> is skipped:</p>
+        <pre>admin/
+Makefile
+imports.csv
+screenshot.gif
+unesco-mappings.ttl
+*.csv
+*.sh</pre>
+        <p>The patterns apply to the whole subtree below the ignore file, gitignore-style. A name pattern matches at any depth, so entries need not appear in the tree above:
+            <samp>unesco-mappings.ttl</samp> excludes <samp>categories/unesco-mappings.ttl</samp>, which is <a href="../../user-guide/import-data/import-rdf-data/" target="_blank">import material</a>
+            rather than a document, and <samp>screenshot.gif</samp> excludes the repository's own screenshot, which is not app media. A trailing slash restricts a pattern to directories, so
+            <samp>admin/</samp> keeps the ontology sources out of the document tree. Nothing is excluded by default beyond hidden entries, so <samp>*.sh</samp> keeps the scripts from being
+            uploaded, and <samp>*.csv</samp> leaves the data files to the <a href="#install">CSV imports</a>, which upload each one into the document it is imported into.</p>
+        <pre>ldh push --dry-run "$LDH_BASE"   # print the plan, send nothing
+ldh push "$LDH_BASE"</pre>
     </div>
     <div>
         <h2 id="idempotency">Idempotency</h2>
-        <p>Re-running the install converges instead of duplicating: <code>PUT</code> replaces each document's description outright, and the one place that appends rather than replaces — the
-            namespace ontology — is first reset by <samp>patch-ontology.ru</samp>, a SPARQL update that clears the previously imported terms.</p>
+        <p>Re-running the install converges on the same documents instead of duplicating data. <code>PUT</code> replaces each document's description outright, and the one place that appends rather than replaces — the
+            namespace ontology — is first reset by <samp>patch-ontology.ru</samp>, a SPARQL update that clears everything except the ontology document's own description. (The steps that create rather than replace —
+            <samp>make-public</samp> and each CSV import — are <code>POST</code>s, so a re-run records another authorization and another import; the documents the imports write are the same.)</p>
+        <pre>PREFIX foaf: &lt;http://xmlns.com/foaf/0.1/&gt;
+
+DELETE {
+  ?s ?p ?o
+}
+WHERE {
+  ?s ?p ?o
+  # Exclude triples about the main resource itself
+  MINUS {
+    &lt;&gt; ?p ?o
+    BIND(&lt;&gt; AS ?s)
+  }
+  # Exclude triples about the foaf:primaryTopic resource
+  MINUS {
+    &lt;&gt; foaf:primaryTopic ?primaryTopic .
+    ?primaryTopic ?p ?o
+    BIND(?primaryTopic AS ?s)
+  }
+}</pre>
+        <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/admin/model/patch-ontology.ru" target="_blank">admin/model/patch-ontology.ru</a></p>
     </div>
     <div>
         <h2 id="install">Installing</h2>
         <pre>make install</pre>
-        <p>prompts for the base URI, certificate and password, then runs <samp>install.sh</samp>: make public, import the ontology, replay the documents, upload the files, run the CSV imports. The
-            entire tutorial, replayed in one command — against localhost today, against production tomorrow.</p>
+        <p><samp>make install</samp> prompts for the base URI, certificate path, certificate password and an optional proxy URL, exports them as the <samp>LDH_BASE</samp>, <samp>LDH_CERT_FILE</samp>,
+            <samp>LDH_CERT_PASSWORD</samp> and <samp>LDH_PROXY</samp> variables the CLI reads, then runs <samp>install.sh</samp>: <samp>ldh admin make-public</samp>, the namespace ontology
+            install, <samp>ldh push</samp>, and one <samp>ldh import csv</samp> per row of the manifest. The entire tutorial, replayed in one command — against localhost today, against production tomorrow.
+            Export the variables yourself and run <samp>./install.sh</samp> to install without the prompts.</p>
+    </div>
+    <div>
+        <h2 id="result">What you now see</h2>
+        <p>The install prints a banner per step — <samp>### Creating authorization to make the app public</samp>, <samp>### Importing namespace ontology</samp>,
+            <samp>### Pushing documents and files</samp> (with one <samp>PUT</samp> or <samp>POST</samp> line per document or upload), <samp>### Importing CSV data</samp>. When it finishes, open the base
+            URI: the finished app renders, with no certificate required — the first step made it public.</p>
+    </div>
+    <div>
+        <h2 id="how-this-works">How this works</h2>
+        <ul>
+            <li><a href="../../reference/command-line-interface/" target="_blank">Command line interface</a> — one command per HTTP API operation, scriptable and replayable</li>
+            <li><a href="../../reference/http-api/" target="_blank">HTTP API</a> — the <code>PUT</code> semantics that make the replay idempotent</li>
+        </ul>
     </div>
-    <p class="lead">Next: <a href="../beyond-low-code/">Beyond low-code</a></p>
+    <p class="ldh-body-lg">Next: <a href="../beyond-low-code/">Beyond low-code</a></p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/tutorial/beyond-low-code.ttl b/docs/tutorial/beyond-low-code.ttl
index 130daf51..89ca1bc8 100644
--- a/docs/tutorial/beyond-low-code.ttl
+++ b/docs/tutorial/beyond-low-code.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
@@ -10,17 +10,19 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Where to go when data alone is not enough</p>
-    <p>Everything in this tutorial was done with data: documents, queries and authorizations, applied over HTTP. That is the ceiling of the low-code approach — and there is a door in it. Each layer
+    <p class="ldh-body-lg">Where to go when data alone is not enough</p>
+    <p>Everything in this tutorial was done with data: documents, queries and authorizations, applied over HTTP. That is the ceiling of the low-code approach — and it opens. Each layer
         of LinkedDataHub can be extended without forking it:</p>
     <ul>
         <li><strong>Layout</strong> — write an XSLT stylesheet that imports the system one and overrides only the templates you need. Start with the
-            <a href="../../user-guide/change-layout/" target="_blank">Change layout</a> guide and the <a href="../../reference/stylesheets/" target="_blank">stylesheets reference</a>.</li>
-        <li><strong>Docker and Java</strong> — mount files into the stock image, build your own image on top of it, or add JAX-RS endpoints via a WAR overlay. The
-            <a href="../../user-guide/build-apps/" target="_blank">Build apps</a> guide covers each layer with working build files.</li>
+            <a href="../../extending/change-layout/" target="_blank">Change layout</a> guide and the <a href="../../reference/stylesheets/" target="_blank">stylesheets reference</a>.</li>
+        <li><strong>Docker</strong> — mount files into the stock image, or build your own image on top of it. The
+            <a href="../../extending/build-apps/#docker" target="_blank">Build apps</a> guide covers both with working build files.</li>
+        <li><strong>Java</strong> — add JAX-RS endpoints via a <a href="../../extending/build-apps/#java" target="_blank">WAR overlay</a> of the LinkedDataHub webapp.</li>
         <li><strong>More examples</strong> — the <a href="https://github.com/AtomGraph/LinkedDataHub-Apps" target="_blank">LinkedDataHub-Apps repository</a> holds the complete Northwind Traders
             source alongside further demo apps and installable packages.</li>
     </ul>
     <p>If you get stuck or build something worth showing, open a thread on <a href="https://github.com/AtomGraph/LinkedDataHub/discussions" target="_blank">GitHub Discussions</a>.</p>
-    <p class="lead">Back to the <a href="../">Tutorial</a> overview</p>
+    <p class="ldh-body-lg">You have built and published a Knowledge Graph dataspace. From here: the <a href="../../user-guide/">user guide</a> for everyday tasks, the
+        <a href="../../reference/">reference</a> for the full feature set, and the <a href="../../extending/">Extending section</a> when you outgrow low-code.</p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/tutorial/composition-1.webp b/docs/tutorial/composition-1.webp
new file mode 100644
index 00000000..45b84d60
Binary files /dev/null and b/docs/tutorial/composition-1.webp differ
diff --git a/docs/tutorial/composition.ttl b/docs/tutorial/composition.ttl
index 66145df9..c1995638 100644
--- a/docs/tutorial/composition.ttl
+++ b/docs/tutorial/composition.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
@@ -10,30 +10,56 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Assemble the landing page from content blocks</p>
+    <p class="ldh-body-lg">Assemble the landing page from content blocks</p>
     <p>Everything the app can show is now in place — text, data, charts, views. The landing page is their composition: an ordered sequence of
         <a href="../../reference/data-model/blocks/" target="_blank">content blocks</a> on the root document. Two block types exist: <code>ldh:XHTML</code> holds authored markup, and
-        <code>ldh:Object</code> embeds any other resource — a chart, a view, a document. Anything that is not markup gets wrapped in an object block.</p>
+        <code>ldh:Object</code> embeds any other resource — a chart, a view, a document.</p>
     <p>The demo's finished root document interleaves them into an executive dashboard:</p>
     <pre>&lt;&gt; a def:Root ;
     dct:title "Northwind Traders" ;
-    rdf:_1 &lt;#page-header&gt; ;          # XHTML   — title and pitch
-    rdf:_2 &lt;#overview-intro&gt; ;       # XHTML   — dashboard intro
-    rdf:_3 &lt;#sales-trend-block&gt; ;    # Object  — monthly sales line chart
-    rdf:_4 &lt;#revenue-by-country-block&gt; ; # Object — geo chart
-    rdf:_5 &lt;#top-selling-products&gt; ; # Object  — product ranking
-    rdf:_6 &lt;#top-manager-header&gt; ;   # XHTML   — section heading
-    rdf:_7 &lt;#top-manager&gt; ;          # Object  — employee of the quarter
-    rdf:_8 &lt;#navigation-prompt&gt; ;    # XHTML   — where to go next
-    rdf:_9 &lt;#select-children&gt; .      # Object  — children view</pre>
-    <p>The narrative rhythm — prose, then evidence, then prose — is an editorial choice, and it is made entirely in data: reordering the page is renumbering <code>rdf:_N</code>. In the browser the
-        same composition is drag-and-drop in edit mode; from the command line it is the <samp>root.ttl</samp> from the <a href="../hello-dataspace/">first stage</a> grown to its final form, applied
-        with the same <code>PUT</code>.</p>
+    rdf:_1 &lt;#overview-intro&gt; ;                 # XHTML   — "Executive dashboard" intro
+    rdf:_2 &lt;#sales-trend-block&gt; ;              # Object  — monthly sales line chart
+    rdf:_3 &lt;#margin-intro&gt; ;                   # XHTML   — "What the deals cost"
+    rdf:_4 &lt;#discount-rate-block&gt; ;            # Object  — discount rate line chart
+    rdf:_5 &lt;#revenue-by-country-block&gt; ;       # Object  — revenue by country bar chart
+    rdf:_6 &lt;products/#top-selling-products&gt; ;  # Object  — chart reused from Products
+    rdf:_7 &lt;#top-manager-header&gt; ;             # XHTML   — "Sales leadership"
+    rdf:_8 &lt;#top-manager&gt; ;                    # Object  — embeds &lt;employees/2/#this&gt;
+    rdf:_9 &lt;#navigation-prompt&gt; ;              # XHTML   — where to go next
+    rdf:_10 &lt;#select-children&gt; .               # Object  — children view</pre>
+    <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/root.ttl" target="_blank">root.ttl</a> · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/" target="_blank">the dashboard</a></p>
+    <p>Two of the blocks show how far transclusion reaches. <code>rdf:_6</code> embeds a chart that is <em>defined on the Products container</em> — the same
+        resource renders on both pages, so an insight is authored once and placed wherever it is needed. <code>rdf:_8</code> embeds a plain data resource:
+        <code>&lt;employees/2/#this&gt;</code>, the Vice President of Sales, rendered with his description and photo — no special profile widget exists; the
+        default rendering of the resource <em>is</em> the widget.</p>
+    <p>The narrative rhythm — prose, then evidence, then prose — is an editorial choice, and it is made entirely in data: reordering the page means renumbering <code>rdf:_N</code>.</p>
+    <div class="ac-tabs or-horizontal">
+        <div class="ac-tablist sz-md va-line" role="tablist">
+            <button aria-controls="in-the-browser-pane" aria-selected="true" class="ac-tab is-on" id="in-the-browser-tab" role="tab" type="button"><span class="ac-tab-lbl">In the browser</span></button>
+            <button aria-controls="from-the-command-line-pane" aria-selected="false" class="ac-tab" id="from-the-command-line-tab" role="tab" type="button"><span class="ac-tab-lbl">From the command line</span></button>
+        </div>
+        <div aria-labelledby="in-the-browser-tab" class="ac-tabpanel" id="in-the-browser-pane" role="tabpanel">
+        <p>With the <a href="../../reference/user-interface/#layout-modes" target="_blank">Content layout mode</a> active, append blocks with the
+            <span class="ac-btn in-primary ap-solid sz-md">XHTML</span> and <span class="ac-btn in-primary ap-solid sz-md">Object</span> buttons at the bottom of the page. Reorder by dragging a block by
+            its drag handle and dropping it in a different position.</p>
+        </div>
+        <div aria-labelledby="from-the-command-line-tab" class="ac-tabpanel" hidden="hidden" id="from-the-command-line-pane" role="tabpanel">
+        <p>The composition is the <samp>root.ttl</samp> of the <a href="../hello-dataspace/">first stage</a>, grown to its final form and applied with the same <code>PUT</code>:</p>
+        <pre>ldh put "$LDH_BASE" root.ttl</pre>
+        <p>To reorder, renumber the <code>rdf:_N</code> properties in the file and <code>PUT</code> it again — <code>PUT</code> replaces the document's description outright.</p>
+        </div>
+    </div>
     <div>
         <h2 id="result">What you now see</h2>
-        <p>The homepage is the finished application: branded header, live charts over the imported graph, and navigation into the containers — every pixel of it a rendering of one document's
+        <p>The homepage is the finished dataspace: branded header, live charts over the imported graph, and navigation into the containers — all of it driven by one document's
             description.</p>
-        <!-- screenshot: the finished Northwind landing page -->
+        <img alt="The finished Northwind landing page" src="/uploads/4634992ca1715ade5ff9f5a1201c2c18db1a63fb"></img>
+    </div>
+    <div>
+        <h2 id="how-this-works">How this works</h2>
+        <ul>
+            <li><a href="../../reference/data-model/blocks/" target="_blank">Content blocks</a> — XHTML and object blocks, their RDF serialization and their management</li>
+        </ul>
     </div>
-    <p class="lead">Next: <a href="../publish/">Publish</a></p>
+    <p class="ldh-body-lg">Next: <a href="../publish/">Publish</a></p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/tutorial/data-1.webp b/docs/tutorial/data-1.webp
new file mode 100644
index 00000000..0afe5a70
Binary files /dev/null and b/docs/tutorial/data-1.webp differ
diff --git a/docs/tutorial/data.ttl b/docs/tutorial/data.ttl
index 8fbf7dbd..75ef8734 100644
--- a/docs/tutorial/data.ttl
+++ b/docs/tutorial/data.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
@@ -10,9 +10,15 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Import CSV data using SPARQL mappings</p>
-    <p>Northwind's data ships as plain CSV files. LinkedDataHub <a href="../../reference/imports/csv/" target="_blank">imports CSV</a> by running a SPARQL <code>CONSTRUCT</code> mapping over each
-        row: the row's cells are bound as properties of a row resource, and the query builds the RDF you want from them. The mapping for categories, <samp>categories.rq</samp>:</p>
+    <p class="ldh-body-lg">Import CSV data using SPARQL mappings</p>
+    <p>Northwind's data ships as plain CSV files. The first rows of <samp>categories.csv</samp>:</p>
+    <pre>categoryID,categoryName,description,pictureHash
+1,Beverages,Soft drinks coffees teas beers and ales,ec56b79671b30ecb98316d9b766fba198286b3b6
+2,Condiments,Sweet and savory sauces relishes spreads and seasonings,7e9f535a3bf693ec856702856fffd3be5a3df4f1</pre>
+    <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories/categories.csv" target="_blank">categories/categories.csv</a></p>
+    <p>LinkedDataHub <a href="../../reference/imports/csv/" target="_blank">imports CSV</a> by running a SPARQL <code>CONSTRUCT</code> mapping over each
+        row: the row's cells are bound as properties of a row resource, and the query builds the RDF you want from them. Each column becomes a predicate named after its header, resolved against the
+        imported file's URI — the <samp>categoryID</samp> column binds as <code>&lt;#categoryID&gt;</code>. The mapping for categories, <samp>categories.rq</samp>:</p>
     <pre>PREFIX foaf:       &lt;http://xmlns.com/foaf/0.1/&gt;
 PREFIX dct:        &lt;http://purl.org/dc/terms/&gt;
 PREFIX schema:     &lt;https://schema.org/&gt;
@@ -26,50 +32,106 @@ CONSTRUCT
 
         ?category a schema:ProductGroup ;
             dct:title ?categoryName ;
+            dct:description ?description ;
             schema:name ?categoryName ;
             schema:identifier ?categoryID ;
-            schema:description ?description .
+            schema:description ?description ;
+            foaf:depiction ?picture .
     }
 }
 WHERE
 {
     ?category_row &lt;#categoryID&gt; ?categoryID ;
         &lt;#description&gt; ?description ;
-        &lt;#categoryName&gt; ?categoryName .
+        &lt;#categoryName&gt; ?categoryName ;
+        &lt;#pictureHash&gt; ?pictureHash .
 
     BIND(uri(concat(str($base), "categories/")) AS ?container)
     BIND(uri(concat(str(?container), encode_for_uri(?categoryID), "/")) AS ?graph)
     BIND(uri(concat(str(?graph), "#this")) AS ?category)
+    BIND(uri(concat(str($base), "uploads/", encode_for_uri(?pictureHash))) AS ?picture)
 }</pre>
-    <p>The three <code>BIND</code>s carry the whole document model of the import:</p>
-    <ul>
-        <li><code>?container</code> — the target container from the <a href="../structure/">Structure</a> stage, resolved against <code>$base</code></li>
-        <li><code>?graph</code> — one document (named graph) per row, minted inside the container from the row's identifier</li>
-        <li><code>?category</code> — the document's topic: the document is <em>about</em> the category, so the category is a <samp>#this</samp> fragment of it</li>
-    </ul>
-    <div>
-        <h2 id="browser">In the browser</h2>
-        <p>Create the import from the UI — upload the CSV file, pick the mapping query and the target container — following the <a href="../../user-guide/import-data/import-csv-data/" target="_blank">Import CSV data</a>
+    <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories/categories.rq" target="_blank">categories/categories.rq</a> · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/categories/1/" target="_blank">/categories/1/</a></p>
+    <p>The four <code>BIND</code>s carry the whole document model of the import:</p>
+    <table>
+        <caption class="ac-vh">BIND variables and what they bind to</caption>
+        <thead>
+            <tr>
+                <th scope="col">Variable</th>
+                <th scope="col">Binds to</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <th scope="row"><code>?container</code></th>
+                <td>The target container from the <a href="../structure/">Structure</a> stage, resolved against <code>$base</code>, which LinkedDataHub binds to the dataspace's base URI when the mapping runs</td>
+            </tr>
+            <tr>
+                <th scope="row"><code>?graph</code></th>
+                <td>One document (named graph) per row, minted inside the container from the row's identifier</td>
+            </tr>
+            <tr>
+                <th scope="row"><code>?category</code></th>
+                <td>The document's topic: the document is <em>about</em> the category, so the category is a <samp>#this</samp> fragment of it</td>
+            </tr>
+            <tr>
+                <th scope="row"><code>?picture</code></th>
+                <td>The category's image, addressed by the content hash the CSV carries (the <a href="../media/">Media</a> stage explains why that works)</td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="ac-tabs or-horizontal">
+        <div class="ac-tablist sz-md va-line" role="tablist">
+            <button aria-controls="in-the-browser-pane" aria-selected="true" class="ac-tab is-on" id="in-the-browser-tab" role="tab" type="button"><span class="ac-tab-lbl">In the browser</span></button>
+            <button aria-controls="from-the-command-line-pane" aria-selected="false" class="ac-tab" id="from-the-command-line-tab" role="tab" type="button"><span class="ac-tab-lbl">From the command line</span></button>
+        </div>
+        <div aria-labelledby="in-the-browser-tab" class="ac-tabpanel" id="in-the-browser-pane" role="tabpanel">
+        <p>Upload the CSV file, save the mapping query as a <samp>CONSTRUCT</samp> document, then create a <samp>CSV Import</samp> that pairs the two with the target container — three passes through
+            the <span class="ac-btn in-primary ap-solid sz-md">Create</span> dropdown, walked through step by step in the <a href="../../user-guide/import-data/import-csv-data/" target="_blank">Import CSV data</a>
             guide.</p>
-    </div>
-    <div>
-        <h2 id="cli">From the command line</h2>
+        </div>
+        <div aria-labelledby="from-the-command-line-tab" class="ac-tabpanel" hidden="hidden" id="from-the-command-line-pane" role="tabpanel">
         <p>Each import pairs a mapping query with a CSV file and a target container. The demo lists them in a manifest, <samp>imports.csv</samp>:</p>
         <pre>query_filename,csv_filename,target,title
 categories/categories.rq,categories/categories.csv,categories/,Categories
-products/products.rq,products/products.csv,products/,Products
+customers/customers.rq,customers/customers.csv,customers/,Customers
+employees/employees.rq,employees/employees.csv,employees/,Employees
 orders/orders.rq,orders/orders.csv,orders/,Orders
 ...</pre>
-        <p>and replays the manifest with a small script built on the <a href="../../reference/command-line-interface/" target="_blank">CLI</a>'s <code>create-csv-import.sh</code>:</p>
-        <pre>./import-csv.sh "$base" "$cert_pem_file" "$cert_password" "$PWD/imports.csv"</pre>
-        <p>Imports run asynchronously — each one is itself a document that records its status.</p>
+        <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/imports.csv" target="_blank">imports.csv</a></p>
+        <p>A small loop over the <a href="../../reference/command-line-interface/" target="_blank">CLI</a> replays the manifest: each line saves its mapping query with
+            <samp>ldh add construct</samp>, then pairs it with the CSV file and target container in an import created with <samp>ldh add csv-import</samp>.</p>
+        <p>Upload the CSV first with <samp>ldh add file</samp>, which prints the upload URI the import refers to (the <a href="../media/">Media</a> stage covers uploads). A single import
+            then looks like this:</p>
+        <pre>ldh add construct \\
+  --uri "#categories-query" \\
+  --title "Categories" \\
+  --query-file categories/categories.rq \\
+  "${LDH_BASE}categories/"
+
+ldh add csv-import \\
+  --title "Categories" \\
+  --query "${LDH_BASE}categories/#categories-query" \\
+  --file "$csv_upload_uri" \\
+  "${LDH_BASE}categories/"</pre>
+        <p>(The readable <samp>#categories-query</samp> fragment is this tutorial's choice; the demo's <samp>install.sh</samp> mints a UUID fragment per query instead.)</p>
+        <p>Imports run asynchronously. Each import is itself a document that records its status — reload it to see progress, the amount of imported data on success, or the constraint
+            violations on failure.</p>
+        </div>
     </div>
     <div>
         <h2 id="result">What you now see</h2>
         <p>The Categories container lists eight category documents. Open one: the category renders with its name, description and identifier, typed as a product group — with the labels coming from
-            the <a href="../model/">Model</a> stage. Repeat the pattern for the remaining entities and the Knowledge Graph fills in, orders linking to products, products to suppliers and
+            the <a href="../model/">Model</a> stage. Repeat the pattern for the remaining entities and the Knowledge Graph fills in: orders link to products, products to suppliers and
             categories.</p>
-        <!-- screenshot: the Categories container listing after the import -->
+        <img alt="The Categories container listing after the import" src="/uploads/db90ffc636cf6b4fc6a5e8d40f0fc3ca8f6b0046"></img>
+    </div>
+    <div>
+        <h2 id="how-this-works">How this works</h2>
+        <ul>
+            <li><a href="../../reference/imports/csv/" target="_blank">CSV imports</a> — the import pipeline: file, mapping query, import resource, validation</li>
+            <li><a href="../../reference/imports/#mapping-queries" target="_blank">Mapping queries</a> — the rules mapping queries follow, with an annotated skeleton</li>
+        </ul>
     </div>
-    <p class="lead">Next: <a href="../media/">Media</a></p>
+    <p class="ldh-body-lg">Next: <a href="../media/">Media</a></p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/tutorial/hello-dataspace-1.webp b/docs/tutorial/hello-dataspace-1.webp
new file mode 100644
index 00000000..d14e094e
Binary files /dev/null and b/docs/tutorial/hello-dataspace-1.webp differ
diff --git a/docs/tutorial/hello-dataspace-2.webp b/docs/tutorial/hello-dataspace-2.webp
new file mode 100644
index 00000000..3a28cd4b
Binary files /dev/null and b/docs/tutorial/hello-dataspace-2.webp differ
diff --git a/docs/tutorial/hello-dataspace.ttl b/docs/tutorial/hello-dataspace.ttl
index 677e1b62..ca5b88c6 100644
--- a/docs/tutorial/hello-dataspace.ttl
+++ b/docs/tutorial/hello-dataspace.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
@@ -10,21 +10,26 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Give your app an identity: a title, a description and a landing page</p>
+    <p class="ldh-body-lg">Give your app an identity: a title, a description and a landing page</p>
     <p>In LinkedDataHub everything is a <a href="../../reference/data-model/documents/" target="_blank">document</a>, and every document is a named graph whose name is the document's URL. Your
         dataspace starts with a single document: the <strong>root document</strong> at the base URI. It doubles as the app's homepage, so making the app yours starts with describing this one
         document.</p>
     <p>In this stage you give the root document a title, a description and a first <a href="../../reference/data-model/blocks/" target="_blank">content block</a> — and see the result render as your
         homepage.</p>
-    <div>
-        <h2 id="browser">In the browser</h2>
-        <p>Open the base URL (e.g. <samp>https://localhost:4443/</samp>) and authenticate with the owner's WebID certificate. Switch the root document into edit mode, change the title to
-            <samp>Northwind Traders</samp>, fill in the description, and add an XHTML content block with a short welcome text. The <a href="../../user-guide/edit-content/" target="_blank">Edit
+    <div class="ac-tabs or-horizontal">
+        <div class="ac-tablist sz-md va-line" role="tablist">
+            <button aria-controls="in-the-browser-pane" aria-selected="true" class="ac-tab is-on" id="in-the-browser-tab" role="tab" type="button"><span class="ac-tab-lbl">In the browser</span></button>
+            <button aria-controls="from-the-command-line-pane" aria-selected="false" class="ac-tab" id="from-the-command-line-tab" role="tab" type="button"><span class="ac-tab-lbl">From the command line</span></button>
+        </div>
+        <div aria-labelledby="in-the-browser-tab" class="ac-tabpanel" id="in-the-browser-pane" role="tabpanel">
+        <p>Open the base URL (e.g. <samp>https://localhost:4443/</samp>) and authenticate with the owner's WebID certificate. Choose <samp>Edit</samp> in the action bar's <span class="ac-btn in-neutral ap-outline sz-md">Actions</span> dropdown
+            to open the document edit form, change the title to <samp>Northwind Traders</samp>, fill in the description, and save. Then, in the
+            <a href="../../reference/user-interface/#layout-modes" target="_blank">Content layout mode</a>, add an XHTML content block with a short welcome text using the
+            <span class="ac-btn in-primary ap-solid sz-md">XHTML</span> button at the bottom of the page. The <a href="../../user-guide/edit-content/" target="_blank">Edit
             content</a> guide walks through the block editor in detail.</p>
-        <!-- screenshot: root document in edit mode with the title and first XHTML block -->
-    </div>
-    <div>
-        <h2 id="cli">From the command line</h2>
+        <img alt="Root document in edit mode with the title and first XHTML block" src="/uploads/fb31a34996b415be79d9f6d7b31fff3d4a4f880c"></img>
+        </div>
+        <div aria-labelledby="from-the-command-line-tab" class="ac-tabpanel" hidden="hidden" id="from-the-command-line-pane" role="tabpanel">
         <p>The same change, expressed as data. Describe the root document in a <samp>root.ttl</samp> file:</p>
         <pre>@prefix def:    &lt;https://w3id.org/atomgraph/linkeddatahub/default#&gt; .
 @prefix ldh:    &lt;https://w3id.org/atomgraph/linkeddatahub#&gt; .
@@ -34,36 +39,35 @@
 &lt;&gt; a def:Root ;
     dct:title "Northwind Traders" ;
     dct:description "Knowledge Graph representation of the Northwind Traders sample database" ;
-    rdf:_1 &lt;#intro&gt; .
+    rdf:_1 &lt;#overview-intro&gt; .
 
-&lt;#intro&gt; a ldh:XHTML ;
+&lt;#overview-intro&gt; a ldh:XHTML ;
     rdf:value '''&lt;div xmlns="http://www.w3.org/1999/xhtml"&gt;
-        &lt;div class="page-header"&gt;
+        &lt;div class="ldh-section"&gt;
             &lt;h2&gt;Northwind Traders&lt;/h2&gt;
-            &lt;p class="lead"&gt;The iconic sample database converted to an RDF Knowledge Graph&lt;/p&gt;
+            &lt;p&gt;The iconic sample database, reborn as an RDF Knowledge Graph.&lt;/p&gt;
         &lt;/div&gt;
     &lt;/div&gt;'''^^rdf:XMLLiteral .</pre>
-        <p>Then replace the root document's description with it using <code>PUT</code>. The <code>turtle</code> command resolves the relative URIs in the file against the document URL, so the same
+        <p class="exhibit-links">Source (finished form): <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/root.ttl" target="_blank">root.ttl</a> · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/" target="_blank">the homepage</a></p>
+        <p><code>PUT</code> the file to the base URI to replace the root document's description. <samp>ldh put</samp> resolves the relative URIs in the file against the document URL, so the same
             file installs against any base URI:</p>
-        <pre>cat root.ttl | turtle --base="$base" | put.sh \\
-    -f "$cert_pem_file" \\
-    -p "$cert_password" \\
-    -t "application/n-triples" \\
-    "$base"</pre>
+        <pre>ldh put "$LDH_BASE" root.ttl</pre>
+        <p>This is the seed: by the <a href="../composition/">Composition</a> stage the same document grows into the demo's full executive dashboard, block by block.</p>
+        </div>
     </div>
     <div>
         <h2 id="result">What you now see</h2>
         <p>Reload the base URL: the homepage now carries your title and welcome text. You have not touched a template, a controller or a database schema — you replaced the description of one
             document, and the UI is a rendering of that description.</p>
-        <!-- screenshot: the branded homepage after the update -->
+        <img alt="The branded homepage after the update" src="/uploads/17d3ac5698dac490f6876adca34839258c070d9e"></img>
     </div>
     <div>
         <h2 id="how-this-works">How this works</h2>
         <ul>
             <li><a href="../../reference/data-model/documents/" target="_blank">Documents</a> — the document hierarchy and how documents map to named graphs</li>
             <li><a href="../../reference/data-model/blocks/" target="_blank">Content blocks</a> — how <code>rdf:_1</code>, <code>rdf:_2</code>, … sequence a document's content</li>
-            <li><a href="../../reference/http-api/" target="_blank">HTTP API</a> — the <code>PUT</code> semantics behind <code>put.sh</code></li>
+            <li><a href="../../reference/http-api/" target="_blank">HTTP API</a> — the <code>PUT</code> semantics behind <samp>ldh put</samp></li>
         </ul>
     </div>
-    <p class="lead">Next: <a href="../structure/">Structure</a></p>
+    <p class="ldh-body-lg">Next: <a href="../structure/">Structure</a></p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/tutorial/insight-1.webp b/docs/tutorial/insight-1.webp
new file mode 100644
index 00000000..c3c0f2d5
Binary files /dev/null and b/docs/tutorial/insight-1.webp differ
diff --git a/docs/tutorial/insight.ttl b/docs/tutorial/insight.ttl
index 420c6c7a..dd639ac8 100644
--- a/docs/tutorial/insight.ttl
+++ b/docs/tutorial/insight.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
@@ -10,64 +10,125 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Turn SPARQL queries into charts and views</p>
-    <p>With the graph populated, analysis is a query away — and in LinkedDataHub, queries, <a href="../../reference/data-model/resources/charts/" target="_blank">charts</a> and
-        <a href="../../reference/data-model/resources/views/" target="_blank">views</a> are resources like everything else. A chart is three resources chained together: a
-        <code>sp:Select</code> query holding the SPARQL text, a <code>ldh:ResultSetChart</code> describing how to plot its results, and a <code>ldh:Object</code> block placing it on a document.</p>
+    <p class="ldh-body-lg">Turn SPARQL queries into charts and views</p>
+    <p>With the graph populated, analysis is a query away — and in LinkedDataHub, queries, <a href="../../reference/data-model/resources/#charts" target="_blank">charts</a> and
+        <a href="../../reference/data-model/resources/#views" target="_blank">views</a> are resources like everything else. A chart is three resources chained together: an
+        <code>sp:Select</code> query holding the SPARQL text, an <code>ldh:ResultSetChart</code> describing how to plot its results, and an <code>ldh:Object</code> block placing it on a document.</p>
     <div>
         <h2 id="chart">A revenue chart</h2>
-        <p>On the Categories container, revenue per category — the query joins order items to products to categories across their documents:</p>
-        <pre>&lt;#category-revenue-query&gt; a sp:Select ;
-    dct:title "Category revenue" ;
-    sp:text '''PREFIX schema: &lt;https://schema.org/&gt;
+        <p>The Categories container carries a revenue-per-category chart. Its query joins order items to products to categories across their documents. Note that
+            <code>?orderItem schema:price</code> is already the discounted line total (the demo's
+            <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/orders/order_details.rq" target="_blank">order details mapping</a> computed it per line),
+            so the query sums it directly.</p>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="in-the-browser-pane" aria-selected="true" class="ac-tab is-on" id="in-the-browser-tab" role="tab" type="button"><span class="ac-tab-lbl">In the browser</span></button>
+                <button aria-controls="from-the-command-line-pane" aria-selected="false" class="ac-tab" id="from-the-command-line-tab" role="tab" type="button"><span class="ac-tab-lbl">From the command line</span></button>
+            </div>
+            <div aria-labelledby="in-the-browser-tab" class="ac-tabpanel" id="in-the-browser-pane" role="tabpanel">
+                <p>Run a query in the <a href="../../user-guide/query-data/" target="_blank">SPARQL editor</a>; the chart pane below the results lets you pick the chart type, the category and one or
+                    more series. Click <span class="ac-btn in-primary ap-solid sz-md">Save</span> underneath the chart pane: two creation forms store the query and the chart as documents. Place
+                    the chart anywhere by adding an <samp>Object</samp> block whose value is the saved chart's URI.</p>
+            </div>
+            <div aria-labelledby="from-the-command-line-tab" class="ac-tabpanel" hidden="hidden" id="from-the-command-line-pane" role="tabpanel">
+                <p>The three resources, in Turtle:</p>
+                <pre>@prefix ldh:    &lt;https://w3id.org/atomgraph/linkeddatahub#&gt; .
+        @prefix rdf:    &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; .
+        @prefix sp:     &lt;http://spinrdf.org/sp#&gt; .
+        @prefix spin:   &lt;http://spinrdf.org/spin#&gt; .
+        @prefix dct:    &lt;http://purl.org/dc/terms/&gt; .
 
-SELECT ?categoryName (SUM(?sale) AS ?revenue)
-WHERE {
-    GRAPH ?orderGraph {
-        ?order schema:orderedItem ?orderItem .
-        ?orderItem schema:orderedItem ?product ;
-                   schema:orderQuantity ?quantity ;
-                   schema:price ?price .
-        BIND(?quantity * ?price AS ?sale)
-    }
-    GRAPH ?productGraph {
-        ?product schema:category ?category .
-    }
-    GRAPH ?categoryGraph {
-        ?category schema:name ?categoryName .
-    }
-}
-GROUP BY ?category ?categoryName
-ORDER BY DESC(?revenue)''' .
+        &lt;#category-revenue-query&gt; a sp:Select ;
+            dct:title "Category revenue" ;
+            sp:text '''PREFIX schema: &lt;https://schema.org/&gt;
 
-&lt;#category-revenue&gt; a ldh:ResultSetChart ;
-    dct:title "Revenue by category" ;
-    spin:query &lt;#category-revenue-query&gt; ;
-    ldh:chartType &lt;https://w3id.org/atomgraph/client#BarChart&gt; ;
-    ldh:categoryVarName "categoryName" ;
-    ldh:seriesVarName "revenue" .
+        SELECT ?categoryName (SUM(?sale) AS ?revenue)
+        WHERE {
+            GRAPH ?orderGraph {
+                ?order schema:orderedItem ?orderItem .
+                ?orderItem schema:orderedItem ?product ;
+                           schema:price ?sale .
+            }
+            GRAPH ?productGraph {
+                ?product schema:category ?category .
+            }
+            GRAPH ?categoryGraph {
+                ?category schema:name ?categoryName .
+            }
+        }
+        GROUP BY ?category ?categoryName
+        ORDER BY DESC(?revenue)''' .
 
-&lt;#category-revenue-block&gt; a ldh:Object ;
-    rdf:value &lt;#category-revenue&gt; .</pre>
-        <p>Add <code>&lt;#category-revenue-block&gt;</code> to the container's block sequence (<code>rdf:_2</code> after the intro block) and <code>PUT</code> the document as before.</p>
+        &lt;#category-revenue&gt; a ldh:ResultSetChart ;
+            dct:title "Revenue by category" ;
+            spin:query &lt;#category-revenue-query&gt; ;
+            ldh:chartType &lt;https://w3id.org/atomgraph/client#BarChart&gt; ;
+            ldh:categoryVarName "categoryName" ;
+            ldh:seriesVarName "revenue" .
+
+        &lt;#category-revenue-block&gt; a ldh:Object ;
+            dct:title "Revenue by category" ;
+            rdf:value &lt;#category-revenue&gt; .</pre>
+                <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories.ttl" target="_blank">categories.ttl</a> · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/categories/" target="_blank">/categories/</a></p>
+                <p>Add <code>&lt;#category-revenue-block&gt;</code> to the container's block sequence (in the finished app it sits at <code>rdf:_4</code>, after a prose block that introduces it) and <code>PUT</code> the document as before:</p>
+                <pre>ldh put "${LDH_BASE}categories/" categories.ttl</pre>
+                <p>Alternatively, <samp>ldh add select</samp> and <samp>ldh add result-set-chart</samp> append the query and the chart to the document one resource at a time.</p>
+            </div>
+        </div>
     </div>
     <div>
         <h2 id="view">A view</h2>
-        <p>Views render query results as document listings instead of plots — the container's own children listing is one. A grid of all categories:</p>
-        <pre>&lt;#select-categories-view&gt; a ldh:View ;
-    spin:query &lt;#select-categories-query&gt; ;
-    ac:mode &lt;https://w3id.org/atomgraph/client#GridMode&gt; .</pre>
-    </div>
-    <div>
-        <h2 id="browser">In the browser</h2>
-        <p>The same resources can be created interactively: save a query from the <a href="../../user-guide/query-data/" target="_blank">query editor</a>, then add a chart block that references
-            it.</p>
+        <p>Views render query results as document listings instead of plots — the container's own children listing is one.</p>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="in-the-browser-2-pane" aria-selected="true" class="ac-tab is-on" id="in-the-browser-2-tab" role="tab" type="button"><span class="ac-tab-lbl">In the browser</span></button>
+                <button aria-controls="from-the-command-line-2-pane" aria-selected="false" class="ac-tab" id="from-the-command-line-2-tab" role="tab" type="button"><span class="ac-tab-lbl">From the command line</span></button>
+            </div>
+            <div aria-labelledby="in-the-browser-2-tab" class="ac-tabpanel" id="in-the-browser-2-pane" role="tabpanel">
+                <p>A view is placed the same way a chart is: an <samp>Object</samp> block whose value is the view's URI. The
+                    <a href="../../user-guide/create-data/create-content/#object-blocks" target="_blank">Object block form</a> walks through it.</p>
+            </div>
+            <div aria-labelledby="from-the-command-line-2-tab" class="ac-tabpanel" hidden="hidden" id="from-the-command-line-2-pane" role="tabpanel">
+                <p>A grid of all categories:</p>
+                <pre>@prefix ldh:    &lt;https://w3id.org/atomgraph/linkeddatahub#&gt; .
+        @prefix sp:     &lt;http://spinrdf.org/sp#&gt; .
+        @prefix spin:   &lt;http://spinrdf.org/spin#&gt; .
+        @prefix ac:     &lt;https://w3id.org/atomgraph/client#&gt; .
+        @prefix dct:    &lt;http://purl.org/dc/terms/&gt; .
+
+        &lt;#select-categories-query&gt; a sp:Select ;
+            dct:title "Select categories" ;
+            sp:text '''PREFIX schema: &lt;https://schema.org/&gt;
+
+        SELECT DISTINCT ?category
+        WHERE {
+            GRAPH ?doc {
+                ?category a schema:ProductGroup ;
+                    schema:name ?categoryName .
+            }
+        }
+        ORDER BY ?categoryName''' .
+
+        &lt;#select-categories-view&gt; a ldh:View ;
+            spin:query &lt;#select-categories-query&gt; ;
+            ac:mode &lt;https://w3id.org/atomgraph/client#GridMode&gt; .</pre>
+                <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories.ttl" target="_blank">categories.ttl</a> · Live: <a href="https://northwind-traders.demo.linkeddatahub.com/categories/" target="_blank">/categories/</a></p>
+                <p>The view and its query go into the same document, so the same <code>PUT</code> installs them; <samp>ldh add view</samp> is the append alternative.</p>
+            </div>
+        </div>
     </div>
     <div>
         <h2 id="result">What you now see</h2>
-        <p>The Categories container is a small dashboard: a revenue bar chart, a products-per-category chart, and a grid of the categories themselves — all live views over the graph, recomputed on
+        <p>The Categories container is a small dashboard: a revenue bar chart and a grid of the categories themselves — all live views over the graph, recomputed on
             each request.</p>
-        <!-- screenshot: the Categories container with charts and grid view -->
+        <img alt="The Categories container with charts and grid view" src="/uploads/1e81ef18ab80553992312ea562ea193751903e0d"></img>
+    </div>
+    <div>
+        <h2 id="how-this-works">How this works</h2>
+        <ul>
+            <li><a href="../../reference/data-model/resources/#charts" target="_blank">Charts</a> — the query–chart–block chain and the chart vocabulary</li>
+            <li><a href="../../reference/data-model/resources/#views" target="_blank">Views</a> — layout modes, projected variables and faceted search</li>
+        </ul>
     </div>
-    <p class="lead">Next: <a href="../composition/">Composition</a></p>
+    <p class="ldh-body-lg">Next: <a href="../composition/">Composition</a></p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/tutorial/media-1.webp b/docs/tutorial/media-1.webp
new file mode 100644
index 00000000..fea36254
Binary files /dev/null and b/docs/tutorial/media-1.webp differ
diff --git a/docs/tutorial/media.ttl b/docs/tutorial/media.ttl
index ec43715d..8f347ae8 100644
--- a/docs/tutorial/media.ttl
+++ b/docs/tutorial/media.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
@@ -10,36 +10,50 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Upload files and link them to resources</p>
+    <p class="ldh-body-lg">Upload files and link them to resources</p>
     <p>Northwind comes with images: a photo per employee, an icon per category. Uploaded files are stored <strong>content-addressed</strong> — the file's URL is derived from the SHA-1 hash of its
-        content, under <samp>${base}uploads/</samp>. The same bytes always land at the same URL, which is what makes file references stable enough to bake into import mappings.</p>
-    <div>
-        <h2 id="browser">In the browser</h2>
-        <p>Upload a file with the file upload form as shown in the <a href="../../user-guide/upload-file/" target="_blank">Upload file</a> guide.</p>
-    </div>
-    <div>
-        <h2 id="cli">From the command line</h2>
-        <pre>add-file.sh \\
-    -b "$base" \\
-    -f "$cert_pem_file" \\
-    -p "$cert_password" \\
-    --title "Nancy Davolio" \\
-    --file "$PWD/employees/nancy.jpg" \\
-    --content-type "image/jpeg" \\
-    "$base"</pre>
-    </div>
+        content, under <samp>{base}uploads/</samp>. The same bytes always land at the same URL, which is what makes file references stable enough to bake into import mappings.</p>
     <div>
         <h2 id="linking">Linking files to resources</h2>
-        <p>A file becomes part of the graph the moment something points at it. The category mapping from the <a href="../data/">Data</a> stage does exactly that — the CSV carries each image's hash,
-            and the mapping mints the upload URL from it:</p>
+        <p>A file becomes part of the graph the moment something points at it. The category mapping from the <a href="../data/">Data</a> stage does exactly that — the CSV carries each image's hash
+            in its <samp>pictureHash</samp> column, and the mapping mints the upload URL from it:</p>
         <pre>?category foaf:depiction ?picture .
 ...
 BIND(uri(concat(str($base), "uploads/", encode_for_uri(?pictureHash))) AS ?picture)</pre>
+        <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories/categories.rq" target="_blank">categories/categories.rq</a></p>
+        <p>The employee mapping does the same with a <samp>photoHash</samp> column, linking the portrait with <code>foaf:img</code>, the predicate for an image <em>of</em> a person, while
+            <code>foaf:depiction</code> is the looser <em>depicts</em> relation used for the category art.</p>
+    </div>
+    <div class="ac-tabs or-horizontal">
+        <div class="ac-tablist sz-md va-line" role="tablist">
+            <button aria-controls="in-the-browser-pane" aria-selected="true" class="ac-tab is-on" id="in-the-browser-tab" role="tab" type="button"><span class="ac-tab-lbl">In the browser</span></button>
+            <button aria-controls="from-the-command-line-pane" aria-selected="false" class="ac-tab" id="from-the-command-line-tab" role="tab" type="button"><span class="ac-tab-lbl">From the command line</span></button>
+        </div>
+        <div aria-labelledby="in-the-browser-tab" class="ac-tabpanel" id="in-the-browser-pane" role="tabpanel">
+        <p>Click the <span class="ac-btn in-primary ap-solid sz-md">Create</span> dropdown at the bottom of the page and select <samp>File</samp>. Choose the file, give it a title, and save. The
+            <a href="../../user-guide/upload-file/" target="_blank">Upload file</a> guide walks through the form in detail.</p>
+        </div>
+        <div aria-labelledby="from-the-command-line-tab" class="ac-tabpanel" hidden="hidden" id="from-the-command-line-pane" role="tabpanel">
+        <pre>ldh add file \\
+    --title "Nancy Davolio" \\
+    --file employees/nancy.jpg \\
+    --content-type "image/jpeg" \\
+    "$LDH_BASE"</pre>
+        <p><samp>ldh add file</samp> prints the content-addressed URL of the upload (<samp>{base}uploads/{sha1}</samp>) as its only output, so it can be captured into a variable and referenced from imports or content.
+            <code>--content-type</code> is optional — the media type is detected from the file when it is omitted.</p>
+        </div>
     </div>
     <div>
         <h2 id="result">What you now see</h2>
-        <p>Category and employee documents now render with their images — <code>foaf:depiction</code> is picked up by the default layout, no template work required.</p>
-        <!-- screenshot: an employee document with the photo rendered -->
+        <p>Category and employee documents now render with their images — <code>foaf:depiction</code> and <code>foaf:img</code> are picked up by the default layout, no template work required.</p>
+        <img alt="An employee document with the photo rendered" src="/uploads/0909e7478dad2b48bc095f3f45e2827aa0537caa"></img>
+    </div>
+    <div>
+        <h2 id="how-this-works">How this works</h2>
+        <ul>
+            <li><a href="../../reference/dataset/#hierarchical-uris" target="_blank">Hierarchical URIs</a> — the content-addressed <samp>uploads/{sha1sum}</samp> namespace in the dataset structure</li>
+            <li><a href="../../user-guide/upload-file/" target="_blank">Upload file</a> — the upload form and the CLI command, step by step</li>
+        </ul>
     </div>
-    <p class="lead">Next: <a href="../insight/">Insight</a></p>
+    <p class="ldh-body-lg">Next: <a href="../insight/">Insight</a></p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/tutorial/model.ttl b/docs/tutorial/model.ttl
index ffbd4869..a56dfefa 100644
--- a/docs/tutorial/model.ttl
+++ b/docs/tutorial/model.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
@@ -10,21 +10,21 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Define the vocabulary that describes your domain</p>
-    <p>Each dataspace has a <strong>namespace ontology</strong> where you define the classes and properties of your domain. It lives in the <em>admin</em> application, which shares your base URI with
+    <p class="ldh-body-lg">Define the vocabulary that describes your domain</p>
+    <p>Each dataspace has a <strong>namespace ontology</strong> where you define the classes and properties of your domain. It lives in the <em>admin</em> dataspace, which shares your base URI with
         an <samp>admin.</samp> subdomain prefix: for the end-user app at <samp>https://localhost:4443/</samp>, the ontology document is
         <samp>https://admin.localhost:4443/ontologies/namespace/</samp>.</p>
-    <p>Northwind reuses <a href="https://schema.org" target="_blank">Schema.org</a> terms rather than inventing its own, so "modeling" here means declaring which classes the app works with and how
-        they should be labeled:</p>
-    <pre>@prefix :	    &lt;#&gt; .
-@prefix rdfs:	&lt;http://www.w3.org/2000/01/rdf-schema#&gt; .
+    <p>Northwind reuses <a href="https://schema.org" target="_blank">Schema.org</a> terms rather than inventing its own, so modeling here means little more than declaring which classes the app
+        uses and how they are labeled:</p>
+    <pre>@prefix :       &lt;#&gt; .
+@prefix rdfs:   &lt;http://www.w3.org/2000/01/rdf-schema#&gt; .
 @prefix owl:    &lt;http://www.w3.org/2002/07/owl#&gt; .
 @prefix schema: &lt;https://schema.org/&gt; .
 
 : a owl:Ontology .
 
 schema:ProductGroup a owl:Class ;
-    rdfs:label "Product group" ;
+    rdfs:label "Category" ;
     rdfs:isDefinedBy : .
 
 schema:Product a owl:Class ;
@@ -34,32 +34,37 @@ schema:Product a owl:Class ;
 schema:Order a owl:Class ;
     rdfs:label "Order" ;
     rdfs:isDefinedBy : .</pre>
-    <div>
-        <h2 id="browser">In the browser</h2>
-        <p>Open the admin application and edit the namespace ontology document directly, or follow the <a href="../../user-guide/change-model/" target="_blank">Change model</a> guide, which also
-            shows how to add SPIN constructors to classes — the templates that drive "create instance" forms in the UI.</p>
-    </div>
-    <div>
-        <h2 id="cli">From the command line</h2>
+    <p class="exhibit-links">Source (full model): <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/admin/model/ns.ttl" target="_blank">admin/model/ns.ttl</a></p>
+    <p>The finished model goes further than labels. It declares the domain's properties with their domains and ranges, a couple of <code>owl:Restriction</code>s,
+        and a <a href="../../user-guide/change-model/" target="_blank">constructor</a> that drives the Product create form.</p>
+    <p>It also attaches views directly to properties with <code>ldh:inverseView</code>. That is why every customer page shows its orders and every supplier page its
+        products, with no per-page configuration.</p>
+    <div class="ac-tabs or-horizontal">
+        <div class="ac-tablist sz-md va-line" role="tablist">
+            <button aria-controls="in-the-browser-pane" aria-selected="true" class="ac-tab is-on" id="in-the-browser-tab" role="tab" type="button"><span class="ac-tab-lbl">In the browser</span></button>
+            <button aria-controls="from-the-command-line-pane" aria-selected="false" class="ac-tab" id="from-the-command-line-tab" role="tab" type="button"><span class="ac-tab-lbl">From the command line</span></button>
+        </div>
+        <div aria-labelledby="in-the-browser-tab" class="ac-tabpanel" id="in-the-browser-pane" role="tabpanel">
+        <p>Open the admin dataspace and edit the namespace ontology document directly, or follow the <a href="../../user-guide/change-model/" target="_blank">Change model</a> guide, which also
+            shows how to add SPIN constructors to classes — the templates that drive the create-instance forms in the UI.</p>
+        </div>
+        <div aria-labelledby="from-the-command-line-tab" class="ac-tabpanel" hidden="hidden" id="from-the-command-line-pane" role="tabpanel">
         <p>Append the class definitions from <samp>ns.ttl</samp> to the namespace ontology document with <code>POST</code>. The prepended <code>@base</code> makes the <code>:</code> prefix resolve to
-            <samp>${base}ns#</samp> — the terms belong to the end-user namespace even though the ontology document lives in the admin app:</p>
-        <pre>admin_base="https://admin.localhost:4443/"
+            <samp>${LDH_BASE}ns#</samp> — the terms belong to the end-user namespace even though the ontology document lives in the admin app:</p>
+        <pre>admin_base="https://admin.localhost:4443/"   # $LDH_BASE with the admin. subdomain prefix
 
-{ echo "@base &lt;${base}ns&gt; ."; cat ns.ttl; } | post.sh \\
-    -f "$cert_pem_file" \\
-    -p "$cert_password" \\
-    --content-type "text/turtle" \\
+{ echo "@base &lt;${LDH_BASE}ns&gt; ."; cat ns.ttl; } | ldh post \\
+    -t text/turtle \\
     "${admin_base}ontologies/namespace/"</pre>
-        <p>Ontologies are cached in memory, so tell the application to reload it:</p>
-        <pre>clear-ontology.sh \\
-    -f "$cert_pem_file" \\
-    -p "$cert_password" \\
+        <p>The ontology is cached in memory, so tell the dataspace to reload it:</p>
+        <pre>ldh admin clear ontology \\
     -b "$admin_base" \\
-    --ontology "${base}ns#"</pre>
+    --ontology "${LDH_BASE}ns#"</pre>
+        </div>
     </div>
     <div>
         <h2 id="result">What you now see</h2>
-        <p>The ontology document in the admin app renders your classes with their labels. The visible payoff on the end-user side comes in the next stage: resources imported as
+        <p>The ontology document in the admin app now renders your classes with their labels. The visible payoff on the end-user side comes in the next stage: resources imported as
             <code>schema:Product</code> or <code>schema:Order</code> arrive typed and labeled, and the model is what the UI uses to render and create them.</p>
     </div>
     <div>
@@ -69,5 +74,5 @@ schema:Order a owl:Class ;
             <li><a href="../../user-guide/change-model/" target="_blank">Change model</a> — classes, constructors and constraints from the UI</li>
         </ul>
     </div>
-    <p class="lead">Next: <a href="../data/">Data</a></p>
+    <p class="ldh-body-lg">Next: <a href="../data/">Data</a></p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/tutorial/publish-1.webp b/docs/tutorial/publish-1.webp
new file mode 100644
index 00000000..66db7cd6
Binary files /dev/null and b/docs/tutorial/publish-1.webp differ
diff --git a/docs/tutorial/publish.ttl b/docs/tutorial/publish.ttl
index 917300a4..02fbc241 100644
--- a/docs/tutorial/publish.ttl
+++ b/docs/tutorial/publish.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
@@ -10,24 +10,56 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Grant public access and ship it</p>
+    <p class="ldh-body-lg">Grant public access and ship it</p>
     <p>So far only the owner's WebID certificate can see the app. Access is governed by <a href="../../reference/administration/acl/" target="_blank">ACL authorizations</a> — documents in the admin
         app, like everything else. Publishing means creating one authorization: read access on the whole dataspace for all agents.</p>
-    <div>
-        <h2 id="cli">From the command line</h2>
-        <pre>make-public.sh -b "$base" -f "$cert_pem_file" -p "$cert_password"</pre>
-        <p>The script creates the public-read authorization in the admin application. Authorizations are data, so you can inspect the document it created — and delete it to unpublish.</p>
-    </div>
-    <div>
-        <h2 id="browser">In the browser</h2>
-        <p>The same authorization can be created with the access control forms in the admin application — see the <a href="../../reference/administration/acl/" target="_blank">ACL reference</a> for
+    <div class="ac-tabs or-horizontal">
+        <div class="ac-tablist sz-md va-line" role="tablist">
+            <button aria-controls="in-the-browser-pane" aria-selected="true" class="ac-tab is-on" id="in-the-browser-tab" role="tab" type="button"><span class="ac-tab-lbl">In the browser</span></button>
+            <button aria-controls="from-the-command-line-pane" aria-selected="false" class="ac-tab" id="from-the-command-line-tab" role="tab" type="button"><span class="ac-tab-lbl">From the command line</span></button>
+        </div>
+        <div aria-labelledby="in-the-browser-tab" class="ac-tabpanel" id="in-the-browser-pane" role="tabpanel">
+        <p>Create the authorization with the access control forms in the admin dataspace — see the <a href="../../reference/administration/acl/" target="_blank">ACL reference</a> for
             the authorization model: who (agents, agent classes), what (documents, document classes), and which <code>acl:mode</code>.</p>
+        </div>
+        <div aria-labelledby="from-the-command-line-tab" class="ac-tabpanel" hidden="hidden" id="from-the-command-line-pane" role="tabpanel">
+        <pre>ldh admin make-public</pre>
+        <p>The command extends the admin dataspace's <samp>acl/authorizations/public/</samp> document: the built-in <samp>Public access</samp> authorization gains its access grants, and a second
+            authorization is added. Authorizations are data, so you can inspect what the command wrote — and delete it to unpublish:</p>
+        <pre>@prefix acl:  &lt;http://www.w3.org/ns/auth/acl#&gt; .
+@prefix rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt; .
+@prefix def:  &lt;https://w3id.org/atomgraph/linkeddatahub/default#&gt; .
+@prefix dh:   &lt;https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#&gt; .
+@prefix nfo:  &lt;http://www.semanticdesktop.org/ontologies/2007/03/22/nfo#&gt; .
+@prefix foaf: &lt;http://xmlns.com/foaf/0.1/&gt; .
+
+&lt;#this&gt; a acl:Authorization ;
+    rdfs:label "Public access" ;
+    acl:mode acl:Read ;
+    acl:agentClass foaf:Agent,               # matches unauthenticated requests
+        acl:AuthenticatedAgent ;             # matches authenticated ones
+    acl:accessToClass def:Root, dh:Container, dh:Item, nfo:FileDataObject ;
+    acl:accessTo &lt;https://localhost:4443/sparql&gt; .
+
+&lt;#sparql-post&gt; a acl:Authorization ;         # allows queries over POST
+    acl:mode acl:Append ;
+    acl:agentClass foaf:Agent, acl:AuthenticatedAgent ;
+    acl:accessTo &lt;https://localhost:4443/sparql&gt; .</pre>
+        <p>The first authorization grants <code>acl:Read</code> on every document class — the root, containers, items and file uploads — and on the
+            SPARQL endpoint; the second additionally allows <code>POST</code>ed queries.</p>
+        </div>
     </div>
     <div>
         <h2 id="result">What you now see</h2>
         <p>Open the base URL in a private browser window, with no certificate: the Northwind Traders app renders, charts and all. It is now a public Linked Data dataset <em>and</em> a public web
             application — the same URLs serve both, negotiated by content type.</p>
-        <!-- screenshot: the app in a private window, unauthenticated -->
+        <img alt="The app in a private window, unauthenticated" src="/uploads/bb775f1ede1297d97ccaa12bc19a25e7e38c95ff"></img>
+    </div>
+    <div>
+        <h2 id="how-this-works">How this works</h2>
+        <ul>
+            <li><a href="../../reference/administration/acl/" target="_blank">Access control</a> — agents, groups, authorizations and access modes</li>
+        </ul>
     </div>
-    <p class="lead">Next: <a href="../app-as-repository/">App as a repository</a></p>
+    <p class="ldh-body-lg">Next: <a href="../app-as-repository/">App as a repository</a></p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/tutorial/structure-1.webp b/docs/tutorial/structure-1.webp
new file mode 100644
index 00000000..d99f13b0
Binary files /dev/null and b/docs/tutorial/structure-1.webp differ
diff --git a/docs/tutorial/structure.ttl b/docs/tutorial/structure.ttl
index 452cbd36..6c97fafb 100644
--- a/docs/tutorial/structure.ttl
+++ b/docs/tutorial/structure.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
@@ -10,9 +10,10 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Lay out the document hierarchy that will hold your data</p>
-    <p>Documents come in two kinds: <a href="../../reference/data-model/documents/containers/" target="_blank">containers</a>, which hold child documents, and
-        <a href="../../reference/data-model/documents/items/" target="_blank">items</a>. Northwind's domain gives us the container layout directly — one container per entity type:</p>
+    <p class="ldh-body-lg">Lay out the document hierarchy that will hold your data</p>
+    <p>Documents come in two kinds: <a href="../../reference/data-model/documents/#containers" target="_blank">containers</a>, which hold child documents, and
+        <a href="../../reference/data-model/documents/#items" target="_blank">items</a>. Northwind's domain gives you the container layout directly — one container per entity type
+        (order line items live inside their order documents):</p>
     <pre>https://localhost:4443/
 ├── categories/
 ├── customers/
@@ -23,32 +24,39 @@
 ├── shippers/
 ├── suppliers/
 └── territories/</pre>
-    <div>
-        <h2 id="browser">In the browser</h2>
-        <p>Create each container from the root document using the document creation form — see the <a href="../../user-guide/create-data/create-documents/" target="_blank">Create documents</a> guide.</p>
-    </div>
-    <div>
-        <h2 id="cli">From the command line</h2>
+    <div class="ac-tabs or-horizontal">
+        <div class="ac-tablist sz-md va-line" role="tablist">
+            <button aria-controls="in-the-browser-pane" aria-selected="true" class="ac-tab is-on" id="in-the-browser-tab" role="tab" type="button"><span class="ac-tab-lbl">In the browser</span></button>
+            <button aria-controls="from-the-command-line-pane" aria-selected="false" class="ac-tab" id="from-the-command-line-tab" role="tab" type="button"><span class="ac-tab-lbl">From the command line</span></button>
+        </div>
+        <div aria-labelledby="in-the-browser-tab" class="ac-tabpanel" id="in-the-browser-pane" role="tabpanel">
+        <p>On the root document, click the <span class="ac-btn in-primary ap-solid sz-md">Create</span> dropdown and select <samp>Container</samp>. Enter <samp>Categories</samp> as the title, replace
+            the generated relative URI with <samp>categories</samp> using the dropdown in the top-right corner of the form, and save. The
+            <a href="../../user-guide/create-data/create-documents/" target="_blank">Create documents</a> guide walks through the form in detail.</p>
+        </div>
+        <div aria-labelledby="from-the-command-line-tab" class="ac-tabpanel" hidden="hidden" id="from-the-command-line-pane" role="tabpanel">
         <p>A container is just a document whose description says it is one. <samp>categories.ttl</samp>:</p>
-        <pre>@prefix dh:     &lt;https://www.w3.org/ns/ldt/document-hierarchy#&gt; .
+        <pre>@prefix dh:     &lt;https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#&gt; .
 @prefix dct:    &lt;http://purl.org/dc/terms/&gt; .
 
 &lt;&gt; a dh:Container ;
     dct:title "Categories" .</pre>
         <p><code>PUT</code> it to the container URL, the same way the root document was updated:</p>
-        <pre>cat categories.ttl | turtle --base="${base}categories/" | put.sh \\
-    -f "$cert_pem_file" \\
-    -p "$cert_password" \\
-    -t "application/n-triples" \\
-    "${base}categories/"</pre>
-        <p>Repeat for the remaining eight containers — or skip ahead to <a href="../app-as-repository/">App as a repository</a> to see how the demo derives the document URL from the filename and
-            replays a whole folder in one command.</p>
+        <pre>ldh put "${LDH_BASE}categories/" categories.ttl</pre>
+        <p>Repeat for the remaining eight containers — or skip to <a href="../app-as-repository/">App as a repository</a>, where one command replays a whole folder.</p>
+        </div>
     </div>
     <div>
         <h2 id="result">What you now see</h2>
         <p>The root document now lists the containers as its children, and each container URL resolves to an (empty) listing page. The URL space of your app <em>is</em> its information
             architecture.</p>
-        <!-- screenshot: root document children listing with the nine containers -->
+        <img alt="Root document children listing with the nine containers" src="/uploads/d9615770bda66a9a6eaed0fe5de43c1b8fe6df42"></img>
+    </div>
+    <div>
+        <h2 id="how-this-works">How this works</h2>
+        <ul>
+            <li><a href="../../reference/data-model/documents/#hierarchy" target="_blank">Document hierarchy</a> — how containers and items nest into the URL space</li>
+        </ul>
     </div>
-    <p class="lead">Next: <a href="../model/">Model</a></p>
+    <p class="ldh-body-lg">Next: <a href="../model/">Model</a></p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/update-folder.sh b/docs/update-folder.sh
deleted file mode 100755
index 9e08551f..00000000
--- a/docs/update-folder.sh
+++ /dev/null
@@ -1,88 +0,0 @@
-#!/bin/bash
-
-if [ "$#" -ne 5 ] && [ "$#" -ne 6 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password $pwd $abs_folder [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../ssl/owner/cert.pem Password /folder /folder/ [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file="$2"
-cert_password="$3"
-pwd="$4"
-folder="$5"
-
-if [ -n "$6" ]; then
-    proxy="$6"
-else
-    proxy="$base"
-fi
-
-ldhignore_file="$folder/.ldhignore"
-
-is_ldhignored() {
-    local name
-    name="$(basename "$1")"
-    [[ -f "$ldhignore_file" ]] || return 1
-    while IFS= read -r pattern || [[ -n "$pattern" ]]; do
-        [[ -z "$pattern" || "$pattern" == \#* ]] && continue
-        pattern="${pattern%/}"
-        [[ "$name" == $pattern ]] && return 0
-    done < "$ldhignore_file"
-    return 1
-}
-
-echo "Processing folder: $folder"  # Debug output
-
-for ttl_file in "$folder"/*.ttl; do
-  if [[ -f "$ttl_file" ]]; then
-    if git check-ignore -q "$ttl_file" 2>/dev/null || is_ldhignored "$ttl_file"; then
-      printf "Skipping %s\n" "$ttl_file"
-      continue
-    fi
-    echo "Found .ttl file: $ttl_file"  # Debug output
-    path="${ttl_file%.*}"   # strip extension
-    path="${path#*$pwd/}"   # strip leading $pwd/
-    path="${path}/"         # add trailing slash
-    printf "\n### Updating %s\n" "${base}${path}"
-    cat "$ttl_file" | turtle --base="${base}${path}" | put.sh \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      -t "application/n-triples" \
-      "${base}${path}"
-  fi
-done
-
-for file in "$folder"/*; do
-  if [[ -f "$file" ]] && [[ "$file" != *.ttl ]] && [[ "$file" != *.sh ]]; then
-    if git check-ignore -q "$file" 2>/dev/null || is_ldhignored "$file"; then
-      printf "Skipping %s\n" "$file"
-      continue
-    fi
-    stripped="${folder#$pwd/}"
-    if [[ "$stripped" == "$folder" ]]; then
-      container_path=""
-    else
-      container_path="${stripped}/"
-    fi
-    echo "Uploading file: $file to ${base}${container_path}"  # Debug output
-    add-file.sh \
-      -b "$base" \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      --title "$(basename "$file")" \
-      --file "$file" \
-      "${base}${container_path}"
-  fi
-done
-
-while IFS= read -r subdir; do
-  if git check-ignore -q "$subdir" 2>/dev/null || is_ldhignored "$subdir"; then
-    printf "Skipping %s\n" "$subdir"
-    continue
-  fi
-  ./update-folder.sh "$base" "$cert_pem_file" "$cert_password" "$pwd" "$subdir" "$proxy"
-done < <(find "$folder" -mindepth 1 -maxdepth 1 -type d -not -name '.*' -not -name 'target')
diff --git a/docs/user-guide.ttl b/docs/user-guide.ttl
index 9e881c33..5b138c81 100644
--- a/docs/user-guide.ttl
+++ b/docs/user-guide.ttl
@@ -1,17 +1,18 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Container ;
     dct:title "User guide" ;
-    dct:description "Step-by-step tutorials for everyday tasks with LinkedDataHub" ;
+    dct:description "Step-by-step guides for everyday tasks in LinkedDataHub" ;
     rdf:_1 <#content> ;
     rdf:_2 <#select-children> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Step-by-step tutorials for everyday tasks with LinkedDataHub</p>
+    <p class="ldh-body-lg">Step-by-step guides for everyday tasks in LinkedDataHub</p>
+    <p>The <a href="../tutorial/">Tutorial</a> builds one dataspace end to end; these pages are standalone recipes that you can read in any order. They fall into three groups: working with data — <a href="browse-data/">browse</a>, <a href="query-data/">query</a>, <a href="add-data/">add</a>, <a href="import-data/">import</a> and <a href="create-data/">create</a> it; authoring — <a href="edit-content/">edit content</a> and <a href="upload-file/">upload files</a>; and administering — <a href="change-model/">change model</a>, <a href="manage-dataspaces/">manage dataspaces</a>, <a href="manage-packages/">manage packages</a> and <a href="version-history/">version history</a>. Developer extension topics live in the <a href="../extending/">Extending</a> section.</p>
 </div>"""^^rdf:XMLLiteral .
 
 <#select-children> a ldh:Object ;
diff --git a/docs/user-guide/add-data-1.mp4 b/docs/user-guide/add-data-1.mp4
new file mode 100644
index 00000000..031aa878
Binary files /dev/null and b/docs/user-guide/add-data-1.mp4 differ
diff --git a/docs/user-guide/add-data.ttl b/docs/user-guide/add-data.ttl
index 78cf56cc..dbafe7a3 100644
--- a/docs/user-guide/add-data.ttl
+++ b/docs/user-guide/add-data.ttl
@@ -1,49 +1,94 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-    
+
 <> a dh:Item ;
     dct:title "Add data" ;
-    dct:description "Fork RDF data from Linked Data resources and SPARQL results" ;
+    dct:description "Copy RDF data from Linked Data resources and file uploads into your dataspace" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Fork RDF data from Linked Data resources and SPARQL results</p>
-    <p>You can fork (copy the contents of) any RDF document to a namedgraph in your dataspace. Two sources of RDF are supported: RDF resources on the web (Linked Data), and RDF file uploads.</p>
-    <div class="alert alert-info">
-        <p>Adding data this way will cause a blocking request, so use it for small amounts of data only (e.g. a few thousands of RDF triples).
-        For larger data, use asynchronous <a href="../import-data/import-rdf-data/" target="_blank">RDF imports</a>.</p>
+    <p class="ldh-body-lg">Copy RDF data from Linked Data resources and file uploads into your dataspace</p>
+    <p>Forking copies the contents of any RDF document into a named graph in your dataspace. Two sources of RDF are supported: RDF resources on the web (Linked Data) and RDF file uploads.</p>
+    <div class="ac-alert va-informative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">Adding data this way will cause a blocking request, so use it for small amounts of data only (e.g. a few thousand RDF triples).
+            For larger data, use asynchronous <a href="../import-data/import-rdf-data/" target="_blank">RDF imports</a>.</p>
+        </div>
     </div>
-    <div>
-        <h2 id="from-linked-data">From Linked Data</h2>
-        <p>
-            <object data="../../uploads/91f6ea24b8ab9bee4a0456cf2b72e0552e9aa42c" type="video/webm"></object>
-        </p>
+    <div class="ac-tabs or-horizontal">
+        <div class="ac-tablist sz-md va-line" role="tablist">
+            <button aria-controls="from-linked-data-pane" aria-selected="true" class="ac-tab is-on" id="from-linked-data-tab" role="tab" type="button"><span class="ac-tab-lbl">From Linked Data</span></button>
+            <button aria-controls="from-the-command-line-pane" aria-selected="false" class="ac-tab" id="from-the-command-line-tab" role="tab" type="button"><span class="ac-tab-lbl">From the command line</span></button>
+            <button aria-controls="from-a-file-pane" aria-selected="false" class="ac-tab" id="from-a-file-tab" role="tab" type="button"><span class="ac-tab-lbl">From a file</span></button>
+        </div>
+        <div aria-labelledby="from-linked-data-tab" class="ac-tabpanel" id="from-linked-data-pane" role="tabpanel">
+        <video aria-label="Forking a remote RDF document into the dataspace" controls="controls" preload="metadata" src="/uploads/77a0696a5eb9a84bf2f1255dc1ac9947b4a1fbac"></video>
         <p>To copy the contents of the current RDF document (local or remote) into a local document, follow these steps:</p>
         <ol>
-            <li>Click on the <span class="btn btn-save-as">Save</span> button on the right side of the <a href="../../reference/user-interface/#action-bar" target="_blank">action bar</a>.
+            <li>Choose <samp>Save as</samp> in the <a href="../../reference/user-interface/#action-bar" target="_blank">action bar</a>'s <span class="ac-btn in-neutral ap-outline sz-md">Actions</span> dropdown.
                 A form will open with the following fields:
                 <dl>
                     <dt>Source</dt>
                     <dd>URI of the source document</dd>
                     <dt>Graph</dt>
-                    <dd>The target document. You can start typing to find it by its label, or paste its URI here.</dd>
+                    <dd>The target document. The source data is appended to the target document's existing content, replacing nothing. You can start typing to find the document by its label, or paste its URI here.</dd>
                 </dl>
             </li>
-            <li>Click <span class="btn btn-primary btn-save">Save</span> to perform the fork operation.</li>
+            <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span> to perform the fork operation.</li>
         </ol>
-    </div>
-    <div>
-        <h2 id="from-file">From file</h2>
-        <p>To upload the contents of an RDF file into a document, simply drag the file from your filesystem into LinkedDataHub when the document's <a href="../../reference/user-interface/#layout-modes">properties mode</a> is active.</p>
+        <p>For example, the Northwind Beverages category <a href="../../reference/imports/rdf/">maps to</a> the UNESCO Thesaurus concept
+            <a href="https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept3683/" target="_blank"><samp>Beverages</samp></a>. Open it in the
+            <a href="../browse-data/">Linked Data browser</a> and fork it into your own dataspace.</p>
+        <p>The target document does not have to be local: you can also add data to a document in <em>another</em> dataspace by pasting its URI. The
+            append is performed with your identity, so the target dataspace's <a href="../../reference/administration/acl/">access control</a> decides
+            whether it is allowed — a refusal surfaces as a form error.</p>
+        </div>
+        <div aria-labelledby="from-the-command-line-tab" class="ac-tabpanel" hidden="hidden" id="from-the-command-line-pane" role="tabpanel">
+        <p>The same fork is a pipe — <samp>ldh get</samp> the source, <samp>ldh post</samp> it into the target document:</p>
+        <pre>ldh get --accept text/turtle \\
+    "https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept3683/" \\
+  | ldh post -t text/turtle "${LDH_BASE}categories/1/"</pre>
+        </div>
+        <div aria-labelledby="from-a-file-tab" class="ac-tabpanel" hidden="hidden" id="from-a-file-pane" role="tabpanel">
+        <p>To upload the contents of an RDF file into a document, drag the file from your filesystem into LinkedDataHub when the document's <a href="../../reference/user-interface/#layout-modes">properties mode</a> is active.</p>
         <p>The following syntaxes are supported:</p>
-        <ul>
-            <li>N-Triples (.nt)</li>
-            <li>Turtle (.ttl)</li>
-            <li>RDF/XML (.rdf and .owl)</li>
-            <li>JSON-LD (.jsonld)</li>
-        </ul>
+        <table>
+            <caption class="ac-vh">Supported RDF syntaxes and their media types</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Syntax</th>
+                    <th scope="col">File extensions</th>
+                    <th scope="col">Media type</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>N-Triples</td>
+                    <td><samp>.nt</samp></td>
+                    <td><samp>application/n-triples</samp></td>
+                </tr>
+                <tr>
+                    <td>Turtle</td>
+                    <td><samp>.ttl</samp></td>
+                    <td><samp>text/turtle</samp></td>
+                </tr>
+                <tr>
+                    <td>RDF/XML</td>
+                    <td><samp>.rdf</samp>, <samp>.owl</samp></td>
+                    <td><samp>application/rdf+xml</samp></td>
+                </tr>
+                <tr>
+                    <td>JSON-LD</td>
+                    <td><samp>.jsonld</samp></td>
+                    <td><samp>application/ld+json</samp></td>
+                </tr>
+            </tbody>
+        </table>
+        </div>
     </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
+    <p class="ldh-body-lg"><a href="../browse-data/">Browse data</a> to find resources worth forking, or <a href="../import-data/import-rdf-data/">import RDF data</a> for larger datasets.</p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/add-data/AddData.webm b/docs/user-guide/add-data/AddData.webm
deleted file mode 100644
index 02081f60..00000000
Binary files a/docs/user-guide/add-data/AddData.webm and /dev/null differ
diff --git a/docs/user-guide/browse-data-1.mp4 b/docs/user-guide/browse-data-1.mp4
new file mode 100644
index 00000000..080a5ffa
Binary files /dev/null and b/docs/user-guide/browse-data-1.mp4 differ
diff --git a/docs/user-guide/browse-data-2.webp b/docs/user-guide/browse-data-2.webp
new file mode 100644
index 00000000..847dcbea
Binary files /dev/null and b/docs/user-guide/browse-data-2.webp differ
diff --git a/docs/user-guide/browse-data-3.webp b/docs/user-guide/browse-data-3.webp
new file mode 100644
index 00000000..2ceee7fb
Binary files /dev/null and b/docs/user-guide/browse-data-3.webp differ
diff --git a/docs/user-guide/browse-data.ttl b/docs/user-guide/browse-data.ttl
index e4d27041..499712a0 100644
--- a/docs/user-guide/browse-data.ttl
+++ b/docs/user-guide/browse-data.ttl
@@ -1,19 +1,84 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-    
+
 <> a dh:Item ;
     dct:title "Browse data" ;
-    dct:description "Use LinkedDataHub's built-in Linked Data browser to explore remote datasources" ;
+    dct:description "Browse, navigate and search local and remote data" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Use LinkedDataHub's built-in Linked Data browser to explore remote datasources</p>
-    <p>LinkedDataHub's has a built-in Linked Data browser which is accessed through <a href="../../reference/user-interface/#nav-bar">the navigation bar</a>. Enter a <code>http://</code> or <code>https://</code> URL and
-        press <samp>Enter</samp> or click the search button.</p>
-    <p>The browser supports all standard RDF formats as well as JSON-LD embedded in HTML page's <code>&lt;script&gt;</code> elements, which is often used to publish <a href="https://schema.org/" target="_blank">schema.org</a> metadata.</p>
-    <p>When the data loads successfully, you can navigate it the same way as your local documents, switch between different layout modes etc. You can also <a href="../add-data/">add the data</a> into your dataspace.</p>
-    <p>If an RDF document cannot be read from the supplied URL, an error message will be shown.</p>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
+    <p class="ldh-body-lg">Browse, navigate and search local and remote data</p>
+    <video aria-label="Browsing and navigating data" controls="controls" preload="metadata" src="/uploads/1e2bef871b490b6414c260bbedc7b96a90933067"></video>
+    <div>
+        <h2 id="linked-data-browser">Linked Data browser</h2>
+        <p>LinkedDataHub has a built-in Linked Data browser which is accessed through <a href="../../reference/user-interface/#nav-bar">the navigation bar</a>. Enter a <code>http://</code> or <code>https://</code> URL and
+            press <kbd>Enter</kbd> or click the search button. Try, for example:</p>
+        <ul>
+            <li><samp>https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept3683/</samp> — a concept in another LinkedDataHub dataspace (the one the Northwind Beverages category <a href="../../reference/imports/rdf/">maps to</a>)</li>
+            <li><samp>https://dbpedia.org/resource/Copenhagen</samp> — an arbitrary Linked Data resource on the open web</li>
+        </ul>
+        <p>The browser supports all standard RDF formats as well as JSON-LD embedded in an HTML page's <code>&lt;script&gt;</code> elements, which is often used to publish <a href="https://schema.org/" target="_blank">schema.org</a> metadata.</p>
+        <p>When the data loads successfully, you can navigate it the same way as your local documents, switch between different layout modes etc. You can also <a href="../add-data/">add the data</a> into your dataspace.</p>
+        <p>If an RDF document cannot be read from the supplied URL, an error message will be shown.</p>
+    </div>
+    <div>
+        <h2 id="document-tree">Document tree</h2>
+        <p>The document tree in the left sidebar gives a quick overview of the dataspace's <a href="../../reference/data-model/documents/#hierarchy">document hierarchy</a>; the <a href="../../reference/user-interface/#document-hierarchy">user interface reference</a> describes the widget.</p>
+        <img alt="The document tree with a container expanded" src="/uploads/ed6827ec72470e0600b3c4c74430ada0395146bd"></img>
+    </div>
+    <div>
+        <h2 id="class-navigation">Class-based navigation</h2>
+        <p>In addition to navigating by document hierarchy, you can navigate by class: the <samp>Classes</samp> list in the left sidebar shows the classes (<code>rdf:type</code> values) that occur in your data; the <a href="../../reference/user-interface/#class-navigation">user interface reference</a> describes the widget.</p>
+        <h3 id="using-class-navigation">Using class-based navigation</h3>
+        <ol>
+            <li>Open the left sidebar — slide the mouse to the left edge of the screen</li>
+            <li>Find the <samp>Classes</samp> list</li>
+            <li>Click on any class to open a dialog listing all instances of that class in your dataspace</li>
+        </ol>
+        <h3 id="when-to-use-class-navigation">When to use class-based navigation</h3>
+        <p>Class-based navigation is most useful when:</p>
+        <dl>
+            <dt>Finding all instances of a type</dt>
+            <dd>Quickly locate all resources of a particular class, regardless of where they are stored in the document hierarchy</dd>
+            <dt>Exploring domain concepts</dt>
+            <dd>Browse your data organized by business concepts (e.g. all Customers, all Orders) rather than by container structure</dd>
+            <dt>Cross-container queries</dt>
+            <dd>View instances that span multiple containers in a single unified view</dd>
+        </dl>
+        <p>The list is derived from the data itself and respects your access control settings.</p>
+    </div>
+    <div>
+        <h2 id="text-search">Text search</h2>
+        <p>You can look up resources by typing a phrase (a few letters are enough) into the <a href="../../reference/user-interface/#left-sidebar">search box</a> at the top of the left sidebar.</p>
+        <p>A dropdown list will appear if there are any matches. Use <kbd>↑</kbd>/<kbd>↓</kbd> or click to select a result, and you will be redirected to its document.</p>
+        <p>The matching is done by looking for substrings using SPARQL <code>regex()</code> in common literal properties such as <code>dct:title</code>, <code>rdfs:label</code>, <code>foaf:name</code> etc. — equivalent to a query of this shape:</p>
+        <pre>PREFIX dct:  &lt;http://purl.org/dc/terms/&gt;
+PREFIX rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt;
+PREFIX foaf: &lt;http://xmlns.com/foaf/0.1/&gt;
+PREFIX skos: &lt;http://www.w3.org/2004/02/skos/core#&gt;
+
+SELECT DISTINCT ?resource
+WHERE {
+    GRAPH ?g {
+        ?resource ?labelProperty ?label .
+        VALUES ?labelProperty { dct:title rdfs:label foaf:name skos:prefLabel }
+        FILTER regex(str(?label), "cha", "i")   # on Northwind, matches "Chai", "Chang", "Chartreuse verte"…
+    }
+}</pre>
+        <p>The same widget is used for autocomplete inputs in create and edit forms.</p>
+        <img alt="The search dropdown with matching Northwind resources" src="/uploads/1a6ab1a91a4e247b059804ec693b9a8fe218d840"></img>
+    </div>
+    <div>
+        <h2 id="structured-search">Structured search</h2>
+        <p>You can use SPARQL to <a href="../query-data/">query data</a> from the dataspace's SPARQL service.</p>
+    </div>
+    <div>
+        <h2 id="backlinks">Backlinks</h2>
+        <p>Backlinks open in a <a href="../../reference/user-interface/#backlinks">popover anchored to each block's links button</a>.
+            They display a list of resources which have properties with the block's resource as the object.</p>
+    </div>
+    <p class="ldh-body-lg">Continue to the <a href="../query-data/">Query data</a> guide, or read more about the <a href="../../reference/user-interface/">user interface</a>.</p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/change-layout.ttl b/docs/user-guide/change-layout.ttl
deleted file mode 100644
index 7fe24963..00000000
--- a/docs/user-guide/change-layout.ttl
+++ /dev/null
@@ -1,109 +0,0 @@
-@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix dct:    <http://purl.org/dc/terms/> .
-   
-<> a dh:Item ;
-    dct:title "Change layout" ;
-    dct:description "How to customize the layout of an application and the UI of the resources" ;
-    rdf:_1 <#content> .
-    
-<#content> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">How to customize the layout of an application and the UI of the resources</p>
-    <p>LinkedDataHub's user interface is simply a rendering of the underlying Linked Data resource descriptions, which are exposed via the <a href="../../reference/http-api/" target="_blank">HTTP API</a>.</p>
-    <p>LinkedDataHub provides <a href="../../reference/stylesheets/" target="_blank">XSLT stylesheets</a> that render a default UI layout. When building an application you might want to render a custom
-        layout however. The recommended way of doing that is to create a new stylesheet which imports the system stylesheet and only override specific templates, while reusing the rest of the layout.</p>
-    <div>
-        <h2 id="create-stylesheet">Create a stylesheet</h2>
-        <p>First we need to create a new XSLT 3.0 stylesheet and use <code>&lt;xsl:import&gt;</code> to import the system stylesheet <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/src/main/webapp/static/com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/layout.xsl" target="_blank"><samp>static/com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/layout.xsl</samp></a>.</p>
-        <p class="lead">See an <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/skos/files/skos.xsl" target="_blank">example in the SKOS demo app</a>.</p>
-    </div>
-    <div>
-        <h2 id="configure-dataspace">Configure the dataspace</h2>
-        <div class="tabbable">
-            <ul class="nav nav-tabs">
-                <li class="active"><a>LinkedDataHub</a></li>
-            </ul>
-            <div class="tab-content">
-                <div class="tab-pane active">
-                    <div>
-                        <p>First, either <a href="../upload-file/" target="_blank">upload the XSLT file</a> or mount it using Docker and <samp>docker-compose.override.yml</samp>:</p>
-                        <pre>version: "2.3"
-services:
-  linkeddatahub:
-    volumes:
-      - ../LinkedDataHub-Apps/demo/skos/files/skos.xsl:/usr/local/tomcat/webapps/ROOT/static/com/atomgraph/linkeddatahub/demo/skos/xsl/index.xsl:ro</pre>
-                        <p>Then change the value of <code>ac:stylesheet</code> on the dataspace with base URI <code>https://localhost:4443/</code> to the relative URI of the stylesheet:</p>
-                        <pre>&lt;urn:linkeddatahub:apps/end-user&gt; a lapp:EndUserApplication ;
-    ...
-    ac:stylesheet &lt;static/com/atomgraph/linkeddatahub/demo/skos/xsl/index.xsl&gt; ;
-    ...</pre>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div>
-        <h2 id="default-layout">Default layout</h2>
-        <p>In the examples below we assume that the graph contains a SKOS taxonomy with concept instances, which can also have broader/narrower concepts.</p>
-        <p>At this point, the default layout of the current document, its topic concept, and narrower/broader concepts looks like this:</p>
-        <div class="thumbnail">
-            <img alt="Default layout" src="../../uploads/74b49af5c822acf41ad661d0d27a60443151838d"></img>
-        </div>
-    </div>
-    <div>
-        <h2 id="augment-output">Augment output</h2>
-        <p>Keep the default output using <code>&lt;xsl:apply-imports&gt;</code> or <code>&lt;xsl:next-match&gt;</code> and add new output before/after it:</p>
-        <pre><code>&lt;xsl:key name="resources-by-broader" match="*[@rdf:about] | *[@rdf:nodeID]" use="skos:broader/@rdf:resource"/&gt;
-        
-&lt;xsl:template match="*[foaf:isPrimaryTopicOf/@rdf:resource = $ac:uri][key('resources-by-broader', @rdf:about)]  | *[foaf:isPrimaryTopicOf/@rdf:resource = $ac:uri][key('resources', skos:narrower/@rdf:resource)]" priority="1"&gt;
-    &lt;xsl:next-match/&gt;
-
-    &lt;h3&gt;Narrower concepts&lt;/h3&gt;
-    &lt;ul&gt;
-        &lt;xsl:apply-templates select="key('resources-by-broader', @rdf:about) | key('resources', skos:narrower/@rdf:resource)" mode="bs2:List"&gt;
-            &lt;xsl:sort select="ac:label(.)"/&gt;
-        &lt;/xsl:apply-templates&gt;
-    &lt;/ul&gt;
-&lt;/xsl:template&gt;</code></pre>
-        <p>The match pattern will match the resource descriptions that:</p>
-        <ul>
-            <li>are the primary topics of the requested document (i.e. its concept) <em>and</em> is a broader concept of some other resources in the RDF graph</li>
-            <li>are the primary topics of the requested document (i.e. its concept) <em>and</em> has narrower concept(s) in the RDF graph</li>
-        </ul>
-        <p>We can render broader concepts by making a copy of the key and the template above and replacing all occurences of <code>skos:narrower</code> with <code>skos:broader</code> and vice versa.</p>
-        <p>With the overriding template, the layout looks like this:</p>
-        <div class="thumbnail">
-            <img alt="Augmented output" src="../../uploads/38d12825c3927e2d5493ca76f2b744c7b5fe867b"></img>
-        </div>
-    </div>
-    <div>
-        <h2 id="override-output">Override output</h2>
-        <p>To completely change the layout without keeping the default one, use the same logic as for <a href="#augment-output">augmenting</a> it, but do not call <code>&lt;xsl:apply-imports&gt;</code>/<code>&lt;xsl:next-match&gt;</code>.</p>
-    </div>
-    <div>
-        <h2 id="suppress-output">Suppress output</h2>
-        <p>In the above example, we have rendered <code>skos:narrower</code> properties in our own special way. Which means that the default output of the same properties from <code>bs2:PropertyList</code> is no longer desired.</p>
-        <p>You can specify an empty template at any level (graph/property/resource) to disable output of that layout mode. For example, this will suppress the default rendering of concepts which are
-            now shown in the customized broader/narrower list:</p>
-        <pre><code>&lt;xsl:template match="*[key('resources', skos:narrower/@rdf:resource)/foaf:isPrimaryTopicOf/@rdf:resource = $ac:uri] | *[key('resources', skos:broader/@rdf:resource)/foaf:isPrimaryTopicOf/@rdf:resource = $ac:uri] | *[@rdf:about = key('resources', key('resources', $ac:uri)/foaf:primaryTopic/@rdf:resource)/skos:narrower/@rdf:resource] | *[@rdf:about = key('resources', key('resources', $ac:uri)/foaf:primaryTopic/@rdf:resource)/skos:broader/@rdf:resource]"/&gt;</code></pre>
-        <p>The match pattern will match the resource descriptions that:</p>
-        <ul>
-            <li>have narrower concept(s) in the RDF graph that are the primary topic of the current document</li>
-            <li>have broader concept(s) in the RDF graph that are the primary topic of the current document</li>
-            <li>are narrower concept of the primary topic of the current document</li>
-            <li>are broader concept of the primary topic of the current document</li>
-        </ul>
-        <pre>&lt;xsl:template match="*[foaf:isPrimaryTopicOf/@rdf:resource = $ac:uri][key('resources', skos:broader/@rdf:resource)]/skos:broader | *[foaf:isPrimaryTopicOf/@rdf:resource = $ac:uri][key('resources', skos:narrower/@rdf:resource)]/skos:narrower" mode="bs2:PropertyList"/&gt;</pre>
-        <p>The match pattern will match the resource properties that:</p>
-        <ul>
-            <li>are <code>skos:broader</code> properties of a resource that is the primary topic of the current document <em>and</em> has broader concepts in the RDF graph</li>
-            <li>are <code>skos:narrower</code> properties of a resource that is the primary topic of the current document <em>and</em> has narrower concepts in the RDF graph</li>
-        </ul>
-        <p>With the supressing templates, the layout now looks like this:</p>
-        <div class="thumbnail">
-            <img alt="Suppressed output" src="../../uploads/e1a566461208a41faee39238f395f2f79fec8421"></img>
-        </div>
-    </div>
-</div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/change-layout/change-layout-augment.png b/docs/user-guide/change-layout/change-layout-augment.png
deleted file mode 100644
index 6f9113f6..00000000
Binary files a/docs/user-guide/change-layout/change-layout-augment.png and /dev/null differ
diff --git a/docs/user-guide/change-layout/change-layout-default.png b/docs/user-guide/change-layout/change-layout-default.png
deleted file mode 100644
index 86f8c66a..00000000
Binary files a/docs/user-guide/change-layout/change-layout-default.png and /dev/null differ
diff --git a/docs/user-guide/change-layout/change-layout-suppress.png b/docs/user-guide/change-layout/change-layout-suppress.png
deleted file mode 100644
index adb83dc3..00000000
Binary files a/docs/user-guide/change-layout/change-layout-suppress.png and /dev/null differ
diff --git a/docs/user-guide/change-model-1.webp b/docs/user-guide/change-model-1.webp
new file mode 100644
index 00000000..127cefd9
Binary files /dev/null and b/docs/user-guide/change-model-1.webp differ
diff --git a/docs/user-guide/change-model.ttl b/docs/user-guide/change-model.ttl
index 3c446002..ad55c021 100644
--- a/docs/user-guide/change-model.ttl
+++ b/docs/user-guide/change-model.ttl
@@ -1,200 +1,191 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
-    dct:title "Change the model" ;
-    dct:description "Change the model: create constructors, classes, and constraints" ;
+    dct:title "Change model" ;
+    dct:description "Define classes, attach SPIN constructors that drive create forms, and add constraints that validate instances" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Change the model: create constructors, classes, and constraints</p>
+    <p class="ldh-body-lg">Define classes, attach SPIN constructors that drive create forms, and add constraints that validate instances</p>
     <div>
-        <h2 id="change-model">Change the model</h2>
-        <p>In order to be able to manage instances, we need to create <a href="../../reference/administration/ontologies/#classes" target="_blank">classes</a> that represent them in the <a href="../../reference/administration/ontologies/" target="_blank">model</a> of our dataspace. Not only will they serve as RDF types of the instances, but will have <a href="../../reference/administration/ontologies/#constructors" target="_blank">constructors</a> attached that define the default properties and their (data)types for that class.</p>
-        <p>Model is managed in the <a href="../../reference/dataspace/#admin-apps" target="_blank">administration application</a> of a dataspace. Head there by clicking the <span class="btn dropdown-toggle btn-settings"></span> in the <a href="../../reference/user-interface/#action-bar" target="_blank">action bar</a> and then choosing <samp>Administration</samp>.</p>
-        <div class="alert alert-info">
-            <p>In order to manage the <a href="../../reference/administration/acl/" target="_blank">access control</a>, or the <a href="../../reference/administration/ontologies/" target="_blank">model</a> of a dataspace,
-            the agent needs to be a member of the <a href="../../reference/administration/acl/#groups" target="_blank">owners group</a>.</p>
+        <p>To manage instances, you first need <a href="../../reference/administration/ontologies/#classes" target="_blank">classes</a> that represent them in your dataspace's <a href="../../reference/administration/ontologies/" target="_blank">model</a>. Not only will they serve as RDF types of the instances, but they will also have <a href="../../reference/administration/ontologies/#constructors" target="_blank">constructors</a> attached that define the default properties and their (data)types for that class.</p>
+        <p>The model is managed in the <a href="../../reference/dataspace/#admin" target="_blank">administration dataspace</a> of a dataspace. Head there by clicking the <span class="ac-iconbtn sz-lg in-neutral ap-ghost"><span aria-hidden="true" class="msi outline sm">settings</span></span> in the <a href="../../reference/user-interface/#nav-bar" target="_blank">navigation bar</a> and then choosing <samp>Administration</samp>.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">In order to manage the <a href="../../reference/administration/acl/" target="_blank">access control</a>, or the <a href="../../reference/administration/ontologies/" target="_blank">model</a> of a dataspace,
+                the agent needs to be a member of the <a href="../../reference/administration/acl/#groups" target="_blank">owners group</a>.</p>
+            </div>
         </div>
-        <p>We will use the SKOS ontology and its <samp>skos:Concept</samp> class as an example in this guide.</p>
+        <p>This guide uses the Northwind Traders model and its <samp>schema:Product</samp> class as the example — the demo app ships
+            exactly this constructor and constraint in its namespace ontology, so the finished result can be compared against
+            <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/admin/model/ns.ttl" target="_blank"><samp>admin/model/ns.ttl</samp></a>.</p>
     </div>
     <div>
         <h2 id="create-constructor">Create a constructor</h2>
-        <p>We will use the following SPARQL <code>CONSTRUCT</code> query as a <a href="../../reference/administration/ontologies/#constructors" target="_blank">constructor</a> for our <samp>Concept</samp> class and save it in a file under <samp>queries/construct-concept.rq</samp>.</p>
-        <pre>PREFIX skos: &lt;http://www.w3.org/2004/02/skos/core#&gt;
-PREFIX xsd:  &lt;http://www.w3.org/2001/XMLSchema#&gt;
+        <p>Use the following SPARQL <code>CONSTRUCT</code> query as a <a href="../../reference/administration/ontologies/#constructors" target="_blank">constructor</a> for the <samp>Product</samp> class. The typed blank nodes tell the form which control to render: a string input for the name and identifier, resource typeaheads for the category and supplier.</p>
+        <pre>PREFIX schema: &lt;https://schema.org/&gt;
+PREFIX xsd:    &lt;http://www.w3.org/2001/XMLSchema#&gt;
 
 CONSTRUCT
 {
-  $this skos:inScheme [ a skos:ConceptScheme ] ;
-    skos:topConceptOf [ a skos:ConceptScheme ] ;
-    skos:prefLabel [ a xsd:string ] ;
-    skos:altLabel [ a xsd:string ] ;
-    skos:hiddenLabel [ a xsd:string ] ;
-    skos:notation [ a xsd:string ] ;
-    skos:note [ a xsd:string ] ;
-    skos:changeNote [ a xsd:string ] ;
-    skos:definition [ a xsd:string ] ;
-    skos:editorialNote [ a xsd:string ] ;
-    skos:example [ a xsd:string ] ;
-    skos:historyNote [ a xsd:string ] ;
-    skos:scopeNote [ a xsd:string ] ;
-    skos:semanticRelation [ a skos:Concept ] ;
-    skos:broader [ a skos:Concept ] ;
-    skos:narrower [ a skos:Concept ] ;
-    skos:related [ a skos:Concept ] ;
-    skos:broaderTransitive [ a skos:Concept ] ;
-    skos:narrowerTransitive [ a skos:Concept ] ;
-    skos:mappingRelation [ a skos:Concept ] ;
-    skos:broadMatch [ a skos:Concept ] ;
-    skos:narrowMatch [ a skos:Concept ] ;
-    skos:relatedMatch [ a skos:Concept ] ;
-    skos:exactMatch [ a skos:Concept ] ;
-    skos:closeMatch [ a skos:Concept ] .
+  $this schema:name [ a xsd:string ] ;
+    schema:identifier [ a xsd:string ] ;
+    schema:category [ a schema:ProductGroup ] ;
+    schema:provider [ a schema:Corporation ] .
 }
 WHERE {}</pre>
-        <div class="tabbable">
-            <ul class="nav nav-tabs">
-                <li class="active"><a>User interface</a></li>
-                <li><a>Command line interface</a></li>
-            </ul>
-            <div class="tab-content">
-                <div class="tab-pane active">
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
                     <div>
-                        <p>In the administration application, follow these steps:</p>
+                        <p>In the administration dataspace, follow these steps:</p>
                         <ol>
-                            <li>Click the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown on the bottom of the page</li>
-                            <li>Click on <samp>CONSTRUCT</samp> in the drop-down list that appears</li>
-                            <li>Switch the <samp>Blank node</samp> dropdown to <samp>URI</samp> and enter <samp>https://localhost:4443/ns#ConstructConcept</samp></li>
+                            <li>Click the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown at the bottom of the page</li>
+                            <li>Click on <samp>CONSTRUCT</samp> in the dropdown list that appears</li>
+                            <li>Switch the <samp>Blank node</samp> dropdown to <samp>URI</samp> and enter <samp>https://localhost:4443/ns#ProductConstructor</samp></li>
                             <li>Fill out the mandatory fields in the form:
                                 <dl>
                                     <dt>Label</dt>
-                                    <dd>Enter <samp>Construct concept</samp></dd>
-                                    <dd>Select <samp>Domain</samp> from the list — this is the ontology in which the query is defined</dd>
+                                    <dd>Enter <samp>Product constructor</samp></dd>
+                                    <dt>IsDefinedBy</dt>
+                                    <dd>Select <samp>Namespace</samp> from the list — the dataspace’s namespace ontology, in which the query is defined</dd>
                                     <dt>Text</dt>
                                     <dd>Enter the SPARQL <code>CONSTRUCT</code> query string</dd>
                                 </dl>
                             </li>
-                            <li>Click <span class="btn btn-primary btn-save">Save</span></li>
+                            <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span></li>
                         </ol>
                     </div>
                 </div>
-                <div class="tab-pane">
+            <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
                     <div>
-                            <pre>pwd=$(realpath -s $PWD)
+                        <p>Save the query in a file, e.g. <samp>queries/construct-product.rq</samp>. With the <a href="../../reference/command-line-interface/">CLI</a> installed and the <samp>LDH_*</samp> variables set:</p>
+                        <pre>base="https://localhost:4443/"
+admin_base="https://admin.localhost:4443/"
 
-create-construct.sh \\
-  -b "${base}admin/" \\
-  -f ./ssl/owner/cert.pem \\
-  -p "$owner_cert_password" \\
-  --uri "${base}ns#ConstructConcept" \\
-  --label "Construct concept" \\
-  --slug construct-concept \\
-  --query-file "${pwd}/queries/construct-concept.rq" \\
-  "${base}admin/model/ontologies/namespace/"</pre>
+ldh admin add constructor \\
+  -b "$admin_base" \\
+  --uri "${base}ns#ProductConstructor" \\
+  --label "Product constructor" \\
+  --query-file queries/construct-product.rq \\
+  "${admin_base}ontologies/namespace/"</pre>
+                        <p>The model lives in the administration dataspace, whose origin is the dataspace origin with an <samp>admin.</samp> prefix — so <code>-b</code> (overriding the <samp>LDH_BASE</samp> default) and the target document URL both use <samp>$admin_base</samp>, because admin commands target the admin app's base URI, while the ontology terms being defined keep the end-user origin.</p>
                     </div>
                 </div>
-            </div>
         </div>
-        <p>Follow the same steps for <samp>Concept scheme</samp>.</p>
-        <p class="lead"><a href="../../reference/administration/ontologies/#constructors" target="_blank">Read more about constructors.</a></p>
+        <p>Follow the same steps for <samp>Category</samp> (<samp>schema:ProductGroup</samp>) if you want its instances to be creatable too.</p>
+        <p class="ldh-body-lg"><a href="../../reference/administration/ontologies/#constructors" target="_blank">Read more about constructors.</a></p>
     </div>
     <div>
         <h2 id="create-constraint">Create a constraint</h2>
-        <p>To control data quality, we probably want to make some of the instance properties mandatory. For example, a <samp>skos:Concept</samp> instance should always have a <code>skos:prefLabel</code> value.</p>
-        <div class="tabbable">
-            <ul class="nav nav-tabs">
-                <li class="active"><a>User interface</a></li>
-                <li><a>Command line interface</a></li>
-            </ul>
-            <div class="tab-content">
-                <div class="tab-pane active">
+        <p>To control data quality, you may want to make some of the instance properties mandatory. For example, a <samp>schema:Product</samp> instance should always have a <code>schema:name</code> value.</p>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-2-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-2-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-2-pane" aria-selected="false" class="ac-tab" id="command-line-interface-2-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="user-interface-2-tab" class="ac-tabpanel" id="user-interface-2-pane" role="tabpanel">
                     <div>
-                        <p>In the administration application, follow these steps:</p>
+                        <p>In the administration dataspace, follow these steps:</p>
                         <ol>
-                            <li>Click the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown on the bottom of the page</li>
-                            <li>Click on <samp>Missing property value</samp> in the drop-down list that appears</li>
+                            <li>Click the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown at the bottom of the page</li>
+                            <li>Click on <samp>Missing property value</samp> in the dropdown list that appears</li>
                             <li>Fill out the fields in the form:
                                 <dl>
                                     <dt>Label</dt>
-                                    <dd>Enter <samp>Missing skos:prefLabel</samp></dd>
+                                    <dd>Enter <samp>Missing schema:name</samp></dd>
                                     <dt>IsDefinedBy</dt>
-                                    <dd>Type <samp>Domain</samp> into the input (which provides autocomplete)</dd>
-                                    <dd>Select <samp>Domain</samp> from the list — this is the ontology in which the query is defined</dd>
+                                    <dd>Type <samp>Namespace</samp> into the input (which provides autocomplete)</dd>
+                                    <dd>Select <samp>Namespace</samp> from the list — the dataspace’s namespace ontology, in which the query is defined</dd>
                                     <dt>Arg1</dt>
-                                    <dd>Enter <samp>http://www.w3.org/2004/02/skos/core#prefLabel</samp></dd>
+                                    <dd>Enter <samp>https://schema.org/name</samp></dd>
                                 </dl>
                             </li>
-                            <li>Click <span class="btn btn-primary btn-save">Save</span></li>
+                            <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span></li>
                         </ol>
                     </div>
                 </div>
-                <div class="tab-pane">
+            <div aria-labelledby="command-line-interface-2-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-2-pane" role="tabpanel">
                     <div>
-                        <pre>create-property-constraint.sh \\
-  -b "$base" \\
-  -f ./ssl/owner/cert.pem \\
-  -p "$owner_cert_password" \\
-  --uri "https://localhost:4443/ns#MissingPrefLabel" \\
-  --label "Missing skos:prefLabel" \\
-  --slug missing-pref-label \\
-  --property "http://www.w3.org/2004/02/skos/core#prefLabel" \\
-  "${base}admin/model/ontologies/namespace/"</pre>
+                        <pre>ldh admin add property-constraint \\
+  -b "$admin_base" \\
+  --uri "${base}ns#MissingName" \\
+  --label "Missing schema:name" \\
+  --property "https://schema.org/name" \\
+  "${admin_base}ontologies/namespace/"</pre>
                     </div>
                 </div>
-            </div>
         </div>
-        <p class="lead"><a href="../../reference/administration/ontologies/#constraints" target="_blank">Read more about constraints.</a></p>
+        <p class="ldh-body-lg"><a href="../../reference/administration/ontologies/#constraints" target="_blank">Read more about constraints.</a></p>
     </div>
     <div>
         <h2 id="create-classes">Create classes</h2>
-        <div class="tabbable">
-            <ul class="nav nav-tabs">
-                <li class="active"><a>User interface</a></li>
-                <li><a>Command line interface</a></li>
-            </ul>
-            <div class="tab-content">
-                <div class="tab-pane active">
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-3-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-3-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-3-pane" aria-selected="false" class="ac-tab" id="command-line-interface-3-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="user-interface-3-tab" class="ac-tabpanel" id="user-interface-3-pane" role="tabpanel">
                     <div>
-                        <p>In the administration application, follow these steps to create the concept class:</p>
+                        <p>In the administration dataspace, follow these steps to create the product class:</p>
                         <ol>
-                            <li>Click the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown on the bottom of the page</li>
-                            <li>Click on <samp>Class</samp> in the drop-down list that appears</li>
-                            <li>Switch the <samp>Blank node</samp> dropdown to <samp>URI</samp> and enter <samp>https://localhost:4443/ns#Concept</samp></li>
+                            <li>Click the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown at the bottom of the page</li>
+                            <li>Click on <samp>Class</samp> in the dropdown list that appears</li>
+                            <li>Switch the <samp>Blank node</samp> dropdown to <samp>URI</samp> and enter <samp>https://schema.org/Product</samp> — reusing the schema.org term rather than minting your own</li>
                             <li>Fill out the mandatory fields in the form:
                                 <dl>
                                     <dt>Label</dt>
-                                    <dd>Enter <samp>Concept</samp></dd>
-                                    <dd>Select <samp>Domain</samp> from the list — this is the ontology in which the class is defined</dd>
+                                    <dd>Enter <samp>Product</samp></dd>
+                                    <dt>IsDefinedBy</dt>
+                                    <dd>Select <samp>Namespace</samp> from the list — the dataspace’s namespace ontology, in which the class is defined</dd>
                                     <dt>Constructor</dt>
-                                    <dd>Type <samp>Construct concept</samp> into the input (which provides autocomplete)</dd>
-                                    <dd>Select <samp>Construct concept</samp> from the list — this is the query we created beforehand</dd>
+                                    <dd>Type <samp>Product constructor</samp> into the input (which provides autocomplete)</dd>
+                                    <dd>Select <samp>Product constructor</samp> from the list — this is the query you created beforehand</dd>
                                 </dl>
                             </li>
-                            <li>Click <span class="btn btn-primary btn-save">Save</span></li>
+                            <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span></li>
                         </ol>
                     </div>
                 </div>
-                <div class="tab-pane">
+            <div aria-labelledby="command-line-interface-3-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-3-pane" role="tabpanel">
                     <div>
-                        <pre>create-class.sh \\
-  -b "$base" \\
-  -f ./ssl/owner/cert.pem \\
-  -p "$owner_cert_password" \\
-  --uri "http://www.w3.org/2004/02/skos/core#Concept" \\
-  --label "Concept" \\
-  --slug concept \\
-  --constructor "{$base}ns#ConstructConcept" \\
-  --constraint "{$base}ns#MissingPrefLabel" \\
-  "${base}admin/model/ontologies/namespace/"</pre>
+                        <pre>ldh admin add class \\
+  -b "$admin_base" \\
+  --uri "https://schema.org/Product" \\
+  --label "Product" \\
+  --constructor "${base}ns#ProductConstructor" \\
+  --constraint "${base}ns#MissingName" \\
+  "${admin_base}ontologies/namespace/"</pre>
                     </div>
                 </div>
-            </div>
         </div>
-        <p>Follow the same steps for <samp>Concept scheme</samp>.</p>
-        <p class="lead"><a href="../../reference/administration/ontologies/#classes" target="_blank">Read more about classes.</a></p>
+        <p class="ldh-body-lg"><a href="../../reference/administration/ontologies/#classes" target="_blank">Read more about classes.</a></p>
+    </div>
+    <div>
+        <h2 id="result">What ended up in the model</h2>
+        <p>The three steps added the following description to the namespace ontology document — the same wiring the demo app ships:</p>
+        <pre>schema:Product spin:constructor &lt;https://localhost:4443/ns#ProductConstructor&gt; ;
+    spin:constraint &lt;https://localhost:4443/ns#MissingName&gt; ;
+    rdfs:label "Product" .
+
+&lt;https://localhost:4443/ns#ProductConstructor&gt; a ldh:Constructor ;
+    rdfs:label "Product constructor" ;
+    sp:text "CONSTRUCT { $this schema:name [ a xsd:string ] ; … } WHERE {}" .
+
+&lt;https://localhost:4443/ns#MissingName&gt; a ldh:MissingPropertyValue ;
+    rdfs:label "Missing schema:name" ;
+    sp:arg1 schema:name .</pre>
+        <p>From now on, <samp>Product</samp> can be chosen as the <samp>Type</samp> of a new <samp>Instance</samp> created from the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown of the
+            end-user dataspace, and its form is then generated from the constructor, offering title, name, identifier, description, category, supplier and offer controls. A submission without a name is rejected with
+            <samp>422 Unprocessable Entity</samp>, carrying the <a href="../../reference/administration/ontologies/#constraints" target="_blank">constraint violation</a>.</p>
+        <img alt="The generated Product create form, with the Missing schema:name violation shown after an empty submit" src="/uploads/0b1eff7cc17e50c53ffc079f65568f71317e1a1f"></img>
     </div>
 </div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/user-guide/change-system-base-uri.ttl b/docs/user-guide/change-system-base-uri.ttl
deleted file mode 100644
index fe5927e2..00000000
--- a/docs/user-guide/change-system-base-uri.ttl
+++ /dev/null
@@ -1,31 +0,0 @@
-@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix dct:    <http://purl.org/dc/terms/> .
-   
-<> a dh:Item ;
-    dct:title "Change system base URI" ;
-    dct:description "How to change host, port, or the path LinkedDataHub service runs on" ;
-    rdf:_1 <#content> .
-    
-<#content> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">How to change host, port, or the path LinkedDataHub service runs on</p>
-        <div>
-            <h2 id="system-base-uri">System base URI</h2>
-            <p>System base URI is the URI on which the LinkedDataHub service is accessible.</p>
-            <p>A common case is changing the system base URI from the default <samp>https://localhost:4443/</samp> to your own.</p>
-            <p>Lets use <samp>https://ec2-54-235-229-141.compute-1.amazonaws.com/linkeddatahub/</samp> as an example. We need to split the URI into components and set them in the <samp>.env</samp> file using the following parameters:</p>
-            <pre>PROTOCOL=https
-HTTP_PORT=80
-HTTPS_PORT=443
-HOST=ec2-54-235-229-141.compute-1.amazonaws.com
-ABS_PATH=/linkeddatahub/</pre>
-            <div class="alert alert-info">
-                <p>The <a href="../../reference/dataspace/#admin-apps">administration application</a> of each dataspace is served on the <code>admin.</code> subdomain
-                    of its end-user host (e.g. <samp>admin.ec2-54-235-229-141.compute-1.amazonaws.com</samp>). The subdomain must resolve in DNS and be covered by the
-                    server's TLS certificate, otherwise the admin application will not be reachable.</p>
-            </div>
-        </div>
-    <p><a href="../manage-dataspaces/">Dataspace URIs</a> need to relative to the system base URI in order to be reachable.</p>
-</div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/create-data.ttl b/docs/user-guide/create-data.ttl
index 1258eff5..5c3c8bff 100644
--- a/docs/user-guide/create-data.ttl
+++ b/docs/user-guide/create-data.ttl
@@ -1,19 +1,20 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Container ;
     dct:title "Create data" ;
-    dct:description "How to create documents, content, and instances" ;
+    dct:description "How to create documents, content and instances" ;
     rdf:_1 <#content> ;
     rdf:_2 <#select-children> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">How to create documents, content, and instances</p>
-    <p>Documents are RDF documents stored in the <a href="../../reference/dataset/">application's dataset</a>. They contain descriptions of resources, e.g. instances created by the user, imported from files, or loaded from Linked Data.</p>
-    <p>Each document can have content, which is a chain (RDF list) of URI resources and XHTML literals.</p>
+    <p class="ldh-body-lg">How to create documents, content and instances</p>
+    <p>A document is a named graph in the <a href="../../reference/dataset/">dataspace's dataset</a>, addressed by its own URL. Documents contain descriptions of resources, e.g. instances created by the user, imported from files, or loaded from Linked Data.</p>
+    <p>Each document can have content: an ordered sequence of blocks — XHTML literals and references to other resources — numbered <code>rdf:_1</code>, <code>rdf:_2</code>, and so on.</p>
+    <p>Start with <a href="create-documents/">Create documents</a>, then <a href="create-content/">Create content</a>, then <a href="create-resources/">Create instances</a>.</p>
 </div>"""^^rdf:XMLLiteral .
 
 <#select-children> a ldh:Object ;
diff --git a/docs/user-guide/create-data/create-content-1.webp b/docs/user-guide/create-data/create-content-1.webp
new file mode 100644
index 00000000..c8834ab2
Binary files /dev/null and b/docs/user-guide/create-data/create-content-1.webp differ
diff --git a/docs/user-guide/create-data/create-content.ttl b/docs/user-guide/create-data/create-content.ttl
index 7201683b..b8d1f1c8 100644
--- a/docs/user-guide/create-data/create-content.ttl
+++ b/docs/user-guide/create-data/create-content.ttl
@@ -1,20 +1,18 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Create content" ;
     dct:description "Learn how to create data-driven content" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Learn how to create data-driven content</p>
-    <p class="text-center">
-        <iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="https://www.youtube.com/embed/5uzpHxu6YNo" width="560"></iframe>
-    </p>
-    <p>Each document (container or item) can have <dfn>content</dfn>, i.e. a list of <dfn>blocks</dfn> which is shown in the <a href="../../../reference/user-interface/#layout-modes">content layout mode</a>. Currently, the following content types are supported:</p>
+    <p class="ldh-body-lg">Learn how to create data-driven content</p>
+    <img alt="Creating an XHTML block and an object block" src="/uploads/7b43a1df2822a74e9c7fe6bed5cdca66cfdd6d66"></img>
+    <p>Each document (container or item) can have <dfn>content</dfn>, i.e. a list of <dfn>blocks</dfn> which is shown in the <a href="../../../reference/user-interface/#layout-modes">content layout mode</a>. A block is one of two types:</p>
     <dl>
         <dt>XHTML</dt>
         <dd>A fragment of XHTML that is embedded onto the page</dd>
@@ -24,85 +22,73 @@
                 <dt>Linked Data resource</dt>
                 <dd>Any URI that resolves to RDF data</dd>
                 <dt>View</dt>
-                <dd>A paginated result of a SPARQL <code>SELECT</code> query (client-side "container")</dd>
+                <dd>A paginated result of a SPARQL <code>SELECT</code> query (a client-side counterpart of a container)</dd>
                 <dt>Chart</dt>
                 <dd>A result of a SPARQL query rendered as a chart</dd>
             </dl>
         </dd>
     </dl>
-    <p>Content other than HTML content is called <dfn>object</dfn>. The HTML content is part of the document while resource content is simply embedded (transcluded) into the HTML page.</p>
+    <p>XHTML content is stored in the document itself; object content is transcluded into the page at render time.</p>
     <div>
         <h2 id="xhtml-blocks">XHTML blocks</h2>
-        <div class="tabbable">
-            <ul class="nav nav-tabs">
-                <li class="active"><a>User interface</a></li>
-                <li><a>Command line interface</a></li>
-            </ul>
-            <div class="tab-content">
-                <div class="tab-pane active">
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
                     <div>
                         <h3 id="add-xhtml-block">Add block</h3>
                         <p>To create a new XHTML block, follow these steps:</p>
                         <ol>
-                            <li>Make sure you're in the content layout mode</li>
-                            <li>At the bottom of the page, click the <span class="btn btn-primary create-action add-constructor">XHTML</span> button</li>
-                            <li>Add content in the WYSIWYG editor</li>
-                            <li>Click the <span class="btn btn-primary btn-save">Save</span> button to save the block</li>
+                            <li>Make sure you are in the content layout mode</li>
+                            <li>At the bottom of the page, click the <span class="ac-btn in-primary ap-solid sz-md">XHTML</span> button</li>
+                            <li>Add content in the rich-text editor</li>
+                            <li>Click the <span class="ac-btn in-primary ap-solid sz-sm">Save</span> button to save the block</li>
                         </ol>
                         <p>After this, a new XHTML block should be appended to the page, replacing the form.</p>
                     </div>
                     <div>
                         <h3 id="edit-xhtml-block">Edit block</h3>
-                        <p>To edit an XHTML block, follow these steps:</p>
-                        <ol>
-                            <li>Move the mouse to the very top-right of the block element where an editing button <span class="btn btn-edit"></span> should appear</li>
-                            <li>Make changes in the WYSIWYG editor that appears</li>
-                            <li>Click <span class="btn btn-primary btn-save">Save</span> to save the block</li>
-                        </ol>
+                        <p>To edit an XHTML block, click anywhere inside it and make changes in place. The changes are <a href="../../edit-content/">saved automatically</a> when the focus leaves the block — there is no separate save button.</p>
+                    </div>
+                    <div>
+                        <h3 id="remove-xhtml-block">Remove block</h3>
                         <p>To remove an XHTML block, follow these steps:</p>
                         <ol>
-                            <li>Move the mouse to the very top-right of the block element where an editing button should appear</li>
-                            <li>Click the <span class="btn btn-remove-resource"></span> button (in the top-right of the block) to remove the block</li>
+                            <li>Hover over the block — controls appear in its top-right corner</li>
+                            <li>Click <span class="ac-iconbtn sz-sm in-destructive ap-ghost"><span aria-hidden="true" class="msi sm">close</span></span> to remove the block</li>
                         </ol>
                     </div>
                 </div>
-                <div class="tab-pane">
+            <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
                     <div>
-                        <p>To add a new XHTML block with the value <samp>&lt;p&gt;A paragraph&lt;/p&gt;</samp>, replace <samp>owner_cert_password</samp> with the value of the corresponding secret and execute the following command:</p>
-                        <pre>content/add-xhtml-block.sh \\
-    -b "https://localhost:4443/" \\
-    -f ./ssl/owner/cert.pem \\
-    -p "$owner_cert_password" \\
-    --fragment "xhtml-block" \\
-    --value "&lt;div xmlns=\\\\\\"http://www.w3.org/1999/xhtml\\\\\\"&gt;&lt;p&gt;A paragraph&lt;/p&gt;&lt;/div&gt;" \\
-    "https://localhost:4443/concepts/example/"</pre>
+                        <p>To add a new XHTML block to the Northwind dashboard, execute the following command:</p>
+                        <pre>ldh add xhtml-block \\
+    --uri "#overview-intro" \\
+    --value '&lt;div xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;p&gt;The iconic sample database, reborn as an RDF Knowledge Graph.&lt;/p&gt;&lt;/div&gt;' \\
+    "$LDH_BASE"</pre>
+                        <p><code>--uri</code> is resolved against the document URI, so <samp>#overview-intro</samp> names the block within it. Omit it and the block becomes a blank node.</p>
                     </div>
                 </div>
-            </div>
         </div>
     </div>
     <div>
         <h2 id="object-blocks">Object blocks</h2>
-        <div class="tabbable">
-            <ul class="nav nav-tabs">
-                <li class="active"><a>User interface</a></li>
-                <li><a>Command line interface</a></li>
-            </ul>
-            <div class="tab-content">
-                <div class="tab-pane active">
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-2-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-2-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-2-pane" aria-selected="false" class="ac-tab" id="command-line-interface-2-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="user-interface-2-tab" class="ac-tabpanel" id="user-interface-2-pane" role="tabpanel">
                     <div>
                         <h3 id="add-object-block">Add block</h3>
                         <p>To create a new object block, follow these steps:</p>
                         <ol>
-                            <li>Make sure you're in the content layout mode</li>
-                            <li>At the bottom of the page, click the <span class="btn btn-primary create-action add-constructor">Object</span> button</li>
-                            <li>Fill out values in the form that appears
-                                <dl>
-                                    <dt>Value</dt>
-                                    <dd>The URI of the object resource</dd>
-                                </dl>
-                            </li>
-                            <li>Click the <span class="btn btn-primary btn-save">Save</span> button to save the block</li>
+                            <li>Make sure you are in the content layout mode</li>
+                            <li>At the bottom of the page, click the <span class="ac-btn in-primary ap-solid sz-md">Object</span> button</li>
+                            <li>Fill out values in the form that appears: <dfn>Value</dfn> takes the URI of the object resource</li>
+                            <li>Click the <span class="ac-btn in-primary ap-solid sz-sm">Save</span> button to save the block</li>
                         </ol>
                         <p>After this, a new object block should be appended to the page, replacing the form.</p>
                     </div>
@@ -110,41 +96,32 @@
                         <h3 id="edit-object-block">Edit block</h3>
                         <p>To edit an object block, follow these steps:</p>
                         <ol>
-                            <li>Move the mouse to the very top-right of the block element where an editing button <span class="btn btn-edit"></span> should appear</li>
-                            <li>Make changes in the editing form:
-                                <dl>
-                                    <dt>Value</dt>
-                                    <dd>The URI of the object resource</dd>
-                                </dl>
-                            </li>
-                            <li>Click <span class="btn btn-primary btn-save">Save</span> at the bottom of the form to save the block</li>
+                            <li>Move the mouse to the very top-right of the block element where an editing button <span class="ac-iconbtn sz-sm in-neutral ap-ghost"><span aria-hidden="true" class="msi sm">edit</span></span> should appear</li>
+                            <li>Make changes in the editing form: <dfn>Value</dfn> takes the URI of the object resource</li>
+                            <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span> at the bottom of the form to save the block</li>
                         </ol>
+                    </div>
+                    <div>
+                        <h3 id="remove-object-block">Remove block</h3>
                         <p>To remove an object block, follow these steps:</p>
                         <ol>
-                            <li>Move the mouse to the very top-right of the block element where an editing button should appear</li>
-                            <li>Click the <span class="btn btn-remove-resource"></span> button (in the top-right of the block) to remove the block</li>
+                            <li>Hover over the block — controls appear in its top-right corner</li>
+                            <li>Click <span class="ac-iconbtn sz-sm in-destructive ap-ghost"><span aria-hidden="true" class="msi sm">close</span></span> to remove the block</li>
                         </ol>
                     </div>
                 </div>
-                <div class="tab-pane">
+            <div aria-labelledby="command-line-interface-2-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-2-pane" role="tabpanel">
                     <div>
-                        <p>To add a new object block with the value <samp>http://dbpedia.org/resource/Copenhagen</samp>, replace <samp>$owner_cert_password</samp> with the value of the corresponding secret and execute the following command:</p>
-                        <pre>content/add-object-block.sh \\
-    -b "https://localhost:4443/" \\
-    -f ./ssl/owner/cert.pem \\
-    -p "$owner_cert_password" \\
-    --fragment "object-block" \\
-    --value "http://dbpedia.org/resource/Copenhagen" \\
-    "https://localhost:4443/concepts/example/"</pre>
+                        <p>To embed the Vice President of Sales on the dashboard — an object block whose value is a plain data resource — execute the following command:</p>
+                        <pre>ldh add object-block \\
+    --uri "#top-manager" \\
+    --value "${LDH_BASE}employees/2/#this" \\
+    "$LDH_BASE"</pre>
+                        <p>A <a href="../../../reference/data-model/resources/#charts">chart</a> or a <a href="../../../reference/data-model/resources/#views">view</a> is embedded the same way — its URI as the
+                            <code>--value</code>, like the demo dashboard's <samp>#sales-trend</samp> chart.</p>
                     </div>
                 </div>
-            </div>
         </div>
     </div>
-    <!--
-    <div>
-        <h2 id="content-templates">Content templates</h2>
-    </div>
-    -->
-    <p class="lead"><a href="../../../reference/data-model/blocks/" target="_blank">Read more about content blocks.</a></p>
+    <p class="ldh-body-lg"><a href="../../../reference/data-model/blocks/" target="_blank">Read more about content blocks.</a></p>
 </div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/user-guide/create-data/create-documents-1.mp4 b/docs/user-guide/create-data/create-documents-1.mp4
new file mode 100644
index 00000000..5f080452
Binary files /dev/null and b/docs/user-guide/create-data/create-documents-1.mp4 differ
diff --git a/docs/user-guide/create-data/create-documents.ttl b/docs/user-guide/create-data/create-documents.ttl
index 897aad17..bf9b52e1 100644
--- a/docs/user-guide/create-data/create-documents.ttl
+++ b/docs/user-guide/create-data/create-documents.ttl
@@ -1,60 +1,73 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Create documents" ;
     dct:description "Learn how to create container and item documents" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Learn how to create container and item documents</p>
-    <p class="text-center">
-        <iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="https://www.youtube.com/embed/paetjTkFBxE" width="560"></iframe>
-    </p>
-    <p>To create a container document (which can have <a href="../../../reference/data-model/documents/#hierarchy" target="_blank">children documents</a>) with a custom URL, follow these steps:</p>
-    <div class="tabbable">
-        <ul class="nav nav-tabs">
-            <li class="active"><a>User interface</a></li>
-            <li><a>Command line interface</a></li>
-        </ul>
-        <div class="tab-content">
-            <div class="tab-pane active">
-                <div>
-                    <ol>
-                        <li>Click the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown in the top-left corner and select <dfn>Container</dfn>. This will open a new form.</li>
-                        <li>Fill out the mandatory <dfn>Container</dfn> fields in the form:
-                            <dl>
-                                <dt>Title</dt>
-                                <dd>Enter <samp>Concepts</samp></dd>
-                            </dl>
-                        </li>
-                        <li>To customize the container URL, click on the dropdown in the top-right corner of the form</li>
-                        <li>Replace the generated unique relative URI with <samp>concepts</samp></li>
-                        <li>Click <span class="btn btn-primary btn-save">Save</span></li>
-                    </ol>
-                    <p>See how below:</p>
-                    <p>
-                        <object data="../../../uploads/490945931415b9ab201ed85f296a84c8a11134d1" type="video/webm"></object>
-                    </p>
-                </div>
+    <p class="ldh-body-lg">Learn how to create container and item documents</p>
+    <div>
+        <h2 id="create-container">Create a container</h2>
+        <p>To create a container document (which can have <a href="../../../reference/data-model/documents/#hierarchy" target="_blank">child documents</a>) with a custom URL, follow these steps:</p>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
             </div>
-            <div class="tab-pane">
-                <div>
-                    <p>Replace <samp>owner_cert_password</samp> with the value of the corresponding secret and execute the following command:</p>
-                    <pre>create-container.sh \\
-  -b "https://localhost:4443/" \\
-  -f ./ssl/owner/cert.pem \\
-  -p "$owner_cert_password" \\
-  --title "Concepts" \\
-  --slug "concepts" \\
-  --parent "https://localhost:4443/"</pre>
+            <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
+                    <div>
+                        <ol>
+                            <li>Click the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown in the <a href="../../../reference/user-interface/#action-bar">action bar</a> and select <dfn>Container</dfn>. This will open a new form.</li>
+                            <li>Fill out the mandatory <dfn>Container</dfn> fields in the form: enter <samp>Categories</samp> as the <dfn>Title</dfn></li>
+                            <li>To customize the container URL, click on the dropdown in the top-right corner of the form</li>
+                            <li>Replace the generated unique relative URI with <samp>categories</samp></li>
+                            <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span></li>
+                        </ol>
+                        <video aria-label="The container creation form" controls="controls" preload="metadata" src="/uploads/4ce9c50f8b0eda9362afd2783490c069011b4d3c"></video>
+                    </div>
                 </div>
+            <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
+                    <div>
+                        <p>With the <a href="../../../reference/command-line-interface/#environment-variables"><samp>LDH_*</samp> environment variables</a> supplying the certificate and base URI, execute the following command:</p>
+                        <pre>ldh create container \\
+  --title "Categories" \\
+  --slug "categories" \\
+  --parent "$LDH_BASE"</pre>
+                    </div>
+                </div>
+        </div>
+        <p>A container titled <samp>Categories</samp> should appear with the URI <samp>${LDH_BASE}categories/</samp>.</p>
+        <p>Any text works as the URI path segment — characters outside RFC 3986's unreserved set (letters, digits, <samp>-</samp>, <samp>.</samp>, <samp>_</samp>, <samp>~</samp>) are percent-encoded.</p>
+    </div>
+    <div>
+        <h2 id="create-item">Create an item</h2>
+        <p>Items are created the same way:</p>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-2-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-2-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-2-pane" aria-selected="false" class="ac-tab" id="command-line-interface-2-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
             </div>
+            <div aria-labelledby="user-interface-2-tab" class="ac-tabpanel" id="user-interface-2-pane" role="tabpanel">
+                    <div>
+                        <p>Select <dfn>Item</dfn> from the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown instead and follow the same steps as above.</p>
+                    </div>
+                </div>
+            <div aria-labelledby="command-line-interface-2-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-2-pane" role="tabpanel">
+                    <div>
+                        <p>Execute the following command:</p>
+                        <pre>ldh create item \\
+  --container "${LDH_BASE}categories/" \\
+  --title "Beverages" \\
+  --slug "1"</pre>
+                        <p>The command prints the created document's URL — <samp>${LDH_BASE}categories/1/</samp>.</p>
+                    </div>
+                </div>
         </div>
     </div>
-    <p>A container titled <samp>Concepts</samp> should appear with the URI <a href="https://localhost:4443/concepts/" target="_blank">https://localhost:4443/concepts/</a>.</p>
-    <p class="lead"><a href="../../../reference/data-model/documents/" target="_blank">Read more about document management.</a></p>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
+    <p class="ldh-body-lg"><a href="../../../reference/data-model/documents/" target="_blank">Read more about documents and the document hierarchy.</a></p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/create-data/create-documents/Create.webm b/docs/user-guide/create-data/create-documents/Create.webm
deleted file mode 100644
index 6b017cf8..00000000
Binary files a/docs/user-guide/create-data/create-documents/Create.webm and /dev/null differ
diff --git a/docs/user-guide/create-data/create-resources-1.mp4 b/docs/user-guide/create-data/create-resources-1.mp4
new file mode 100644
index 00000000..1884cffa
Binary files /dev/null and b/docs/user-guide/create-data/create-resources-1.mp4 differ
diff --git a/docs/user-guide/create-data/create-resources-2.webp b/docs/user-guide/create-data/create-resources-2.webp
new file mode 100644
index 00000000..519a3c28
Binary files /dev/null and b/docs/user-guide/create-data/create-resources-2.webp differ
diff --git a/docs/user-guide/create-data/create-resources.ttl b/docs/user-guide/create-data/create-resources.ttl
index d567b26d..88a36619 100644
--- a/docs/user-guide/create-data/create-resources.ttl
+++ b/docs/user-guide/create-data/create-resources.ttl
@@ -1,47 +1,79 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Create instances" ;
-    dct:description "Learn how to create of built-in and user-defined classes" ;
+    dct:description "Learn how to create instances of built-in and user-defined classes" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Learn how to create instances of built-in and user-defined classes</p>
-    <p class="text-center">
-        <iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="https://www.youtube.com/embed/4WXFm732H3I" width="560"></iframe>
-    </p>
+    <p class="ldh-body-lg">Learn how to create instances of built-in and user-defined classes</p>
+    <video aria-label="Creating resource instances" controls="controls" preload="metadata" src="/uploads/ef27cdff0d6ac5dc2fcf67e116b68454d3d6645c"></video>
     <p><a href="../../../reference/data-model/resources/#built-in-classes">Built-in classes</a> (such as <samp>Container</samp>, <samp>Item</samp>, <samp>SELECT</samp> etc.) ship with <a href="../../../reference/administration/ontologies/#ontologies">system ontologies</a> in LinkedDataHub while <dfn>user-defined classes</dfn> come from ontologies imported by the user (see the user guide on <a href="../../change-model/">changing the model</a> on how to do that).</p>
-    <p>Note that in order to create class instances, you have to be in <a href="../../../reference/user-interface/#layout-modes">properties mode</a>.</p>
+    <div class="ac-alert va-informative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">To create class instances, you have to be in <a href="../../../reference/user-interface/#layout-modes">properties mode</a>.</p>
+        </div>
+    </div>
+    <div class="ac-alert va-informative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">You can only create instances of classes that have <a href="../../../reference/administration/ontologies/#constructors">constructors</a>.</p>
+        </div>
+    </div>
+    <div class="ac-tabs or-horizontal">
+        <div class="ac-tablist sz-md va-line" role="tablist">
+            <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+            <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+        </div>
+        <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
     <div>
-        <h2>Built-in classes</h2>
+        <h2 id="built-in-classes">Built-in classes</h2>
         <p>To create instances of built-in classes, follow these steps:</p>
         <ol>
-            <li>Click the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown on the bottom of the page</li>
-            <li>In the drop-down list that appears click on the menu item of the class you want to create an instance for. An editing form will open.</li>
-            <li>Fill out the fields in the form that appears. The mandatory properties are rendered in bold, without providing their values you will not be able to save the instance form.</li>
-            <li>Click <span class="btn btn-primary btn-save">Save</span></li>
-            <li>In case there were errors such as missing or malformed values, an error message will be shown and the offending property and value will be highlighted. Fix them or you will not be able to save the instance form.</li>
+            <li>Click the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown at the bottom of the page</li>
+            <li>In the dropdown list that appears, click on the menu item of the class you want to create an instance for. An editing form will open.</li>
+            <li>Fill out the fields in the form that appears. Mandatory properties are rendered in bold; the form cannot be saved without them.</li>
+            <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span></li>
+            <li>If a value is missing or malformed, an error message appears and the offending property is highlighted. Fix it and save again.</li>
         </ol>
         <p>You will be redirected to the document of the newly created instance.</p>
     </div>
     <div>
-        <h2>User-defined classes</h2>
+        <h2 id="user-defined-classes">User-defined classes</h2>
         <p>To create instances of user-defined classes, follow these steps:</p>
         <ol>
-            <li>Click the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown on the bottom of the page</li>
-            <li>Click on <samp>Instance</samp> in the drop-down list that appears. An editing form will open.</li>
-            <li>In the resource of <samp>Type</samp> <samp>Instance</samp>, click on the <samp>Instance</samp> typeahead input, type the class name and select the class from the list</li>
-            <li>Fill out the fields in the form that appears. The mandatory properties are rendered in bold, without providing their values you will not be able to save the instance form.</li>
-            <li>Click <span class="btn btn-primary btn-save">Save</span></li>
-            <li>In case there were errors such as missing or malformed values, an error message will be shown and the offending property and value will be highlighted. Fix them or you will not be able to save the instance form.</li>
+            <li>Click the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown at the bottom of the page</li>
+            <li>Click on <samp>Instance</samp> in the dropdown list that appears. An editing form will open.</li>
+            <li>In the form's <samp>Type</samp> field, click the typeahead input, type the class name — for example <samp>Product</samp> on the Northwind dataspace — and select the class from the list</li>
+            <li>Continue as with the <a href="#built-in-classes">built-in classes</a>: fill out the fields and click <span class="ac-btn in-primary ap-solid sz-sm">Save</span></li>
         </ol>
-        <p>You will be redirected to the document of the newly created instance.</p>
-        <div class="alert alert-info">
-            <p>You can only create instances of classes that have <a href="../../../reference/administration/ontologies/#constructors">constructors</a>.</p>
+        <p>When you create a <samp>Product</samp> this way, its <a href="../../change-model/" target="_blank">constructor</a> renders name and identifier inputs plus category and supplier typeaheads — the form is entirely constructor-driven.</p>
+        <img alt="The Product create form generated from the constructor, with category and supplier typeaheads" src="/uploads/b900be2099ee184edd255b5637c849a8a52de233"></img>
+    </div>
+        </div>
+        <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
+        <p>Instances are plain RDF, so the CLI equivalent is appending a description to a document with <samp>ldh post</samp>. Creating a new product in its own document — <code>--primary-topic</code> makes the document about the <samp>#this</samp> resource, and the <samp>post</samp> describes it:</p>
+        <pre>doc=$(ldh create item \\
+  --container "${LDH_BASE}products/" \\
+  --title "Masala Chai" \\
+  --slug 78 \\
+  --primary-topic '#this')
+
+ldh post -t text/turtle "$doc" &lt;&lt;EOF
+@prefix schema: &lt;https://schema.org/&gt; .
+
+&lt;${doc}#this&gt; a schema:Product ;
+    schema:name "Masala Chai" ;
+    schema:identifier "78" ;
+    schema:category &lt;${LDH_BASE}categories/1/#this&gt; .
+EOF</pre>
+        <p>The posted data is validated against the class <a href="../../../reference/administration/ontologies/#constraints">constraints</a> the same way form submissions are — leaving out <code>schema:name</code> gets the request rejected with <samp>422 Unprocessable Entity</samp>.</p>
         </div>
     </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
+    <p class="ldh-body-lg"><a href="../../../reference/administration/ontologies/#constructors" target="_blank">Read more about constructors.</a></p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/edit-content-1.webp b/docs/user-guide/edit-content-1.webp
new file mode 100644
index 00000000..96dfb7e7
Binary files /dev/null and b/docs/user-guide/edit-content-1.webp differ
diff --git a/docs/user-guide/edit-content-2.webp b/docs/user-guide/edit-content-2.webp
new file mode 100644
index 00000000..c566a8b2
Binary files /dev/null and b/docs/user-guide/edit-content-2.webp differ
diff --git a/docs/user-guide/edit-content.ttl b/docs/user-guide/edit-content.ttl
index 2ebb68ff..2c6ce1e0 100644
--- a/docs/user-guide/edit-content.ttl
+++ b/docs/user-guide/edit-content.ttl
@@ -1,6 +1,6 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
@@ -10,69 +10,122 @@
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Edit XHTML documents in-place and annotate text with RDFa</p>
-    <p>XHTML content blocks in LinkedDataHub are living documents: authenticated users with write access can click directly into the content to edit it, apply rich-text formatting, and annotate any span of text with <a href="https://www.w3.org/TR/rdfa-primer/" target="_blank">RDFa</a> — linking words and phrases to terms in the Knowledge Graph without leaving the page.</p>
+    <p class="ldh-body-lg">Edit XHTML documents in-place and annotate text with RDFa</p>
+    <p>XHTML content blocks in LinkedDataHub are living documents: authenticated users with write access can click directly into the content to edit it, apply rich-text formatting, and annotate any span of text with <a href="https://www.w3.org/TR/rdfa-primer/" target="_blank">RDFa</a>. Words and phrases link to terms in the Knowledge Graph without leaving the page.</p>
+    <p>Annotating the word <samp>Chai</samp> in a Northwind welcome text with the product it names produces markup like:</p>
+    <pre>&lt;p&gt;Our bestselling tea is
+    &lt;span about="https://localhost:4443/products/1/#this" property="https://schema.org/name"&gt;Chai&lt;/span&gt;.&lt;/p&gt;</pre>
+    <p>which, read as RDFa, yields the triple</p>
+    <pre>&lt;https://localhost:4443/products/1/#this&gt; &lt;https://schema.org/name&gt; "Chai" .</pre>
+    <p>The prose itself becomes part of the Knowledge Graph.</p>
     <div>
         <h2 id="entering-edit-mode">Entering edit mode</h2>
-        <p>Click anywhere inside an <a href="../../reference/data-model/blocks/xhtml/">XHTML block</a> to enter edit mode. The block gains a focus outline and the editor toolbar appears above the action bar. Clicking outside the block (including the surrounding column margins) returns the block to read mode.</p>
+        <p>Click anywhere inside an <a href="../../reference/data-model/blocks/#xhtml-blocks">XHTML block</a> to enter edit mode. The block gains a focus outline and the editor toolbar appears below the action bar. Clicking outside the block (including the surrounding page margins) returns the block to read mode.</p>
         <p>Edit mode is only available to authenticated users who have write access to the document. The block remains read-only for all other visitors.</p>
     </div>
     <div>
         <h2 id="toolbar">Editor toolbar</h2>
+        <img alt="The rich-text editor toolbar above an active Northwind XHTML block" src="/uploads/b19c09353d050510771af99b6b89311dabdf1cc4"></img>
         <p>The toolbar appears at the top of the page when an XHTML block is active. It provides standard rich-text controls grouped by function:</p>
         <dl>
             <dt>Block type</dt>
-            <dd>Paragraph, Heading 1–4, Blockquote, Code block, Preformatted</dd>
+            <dd>Paragraph, Heading 1–3, Preformatted</dd>
             <dt>Inline formatting</dt>
-            <dd>Bold, Italic, Inline code, Link</dd>
-            <dt>Lists</dt>
-            <dd>Bullet list, Numbered list</dd>
+            <dd>Bold, Italic, Link</dd>
+            <dt>Blocks</dt>
+            <dd>Paragraph, Bullet list, Numbered list, Quote</dd>
             <dt>Inserts</dt>
-            <dd>Image, Table</dd>
+            <dd>Figure, Table</dd>
             <dt>Table operations</dt>
             <dd>Add/remove row or column (active only when the caret is inside a table cell)</dd>
             <dt>View</dt>
-            <dd>Show/hide RDFa annotations, Search within the document, View source XHTML</dd>
+            <dd>Table of contents, Subject properties, Find and replace, Source view of the XHTML markup</dd>
         </dl>
         <p>Toolbar buttons reflect the current caret position: the block-type selector and toggle buttons (Bold, Italic etc.) update as you move the cursor.</p>
     </div>
     <div>
         <h2 id="rdfa-annotations">RDFa annotations</h2>
+        <img alt="The annotation dialog over the selected word &quot;Chai&quot;, Property typeahead open" src="/uploads/e50e7d238aa5441c7a35f7ebf6e0dec431ae80fd"></img>
         <p>RDFa annotations embed machine-readable RDF statements directly in the XHTML markup. A single annotation expresses a statement of the form <em>subject — property — object</em>, where subject and object are IRIs or typed literals drawn from your Knowledge Graph.</p>
-        <h3>Adding an annotation</h3>
+        <h3 id="adding-an-annotation">Adding an annotation</h3>
         <ol>
             <li>Enter edit mode by clicking inside the XHTML block.</li>
             <li>Select the text you want to annotate.</li>
-            <li>Right-click (or use the context menu) and choose <strong>Annotate</strong>.</li>
-            <li>In the annotation dialog:
-                <ul>
-                    <li><strong>Property</strong> — start typing to search ontology terms; select one from the typeahead dropdown.</li>
-                    <li><strong>Value</strong> — pre-filled with the selected text; change it to emit a different machine-readable value (e.g. a canonical form).</li>
-                    <li>Expand <strong>Type, subject &amp; object</strong> for advanced fields:
-                        <ul>
-                            <li><strong>Type (typeof)</strong> — assign an <code>rdf:type</code> to the annotated span.</li>
-                            <li><strong>Subject (about)</strong> — override the in-scope subject IRI.</li>
-                            <li><strong>Object (resource)</strong> — make the object a resource IRI instead of a literal.</li>
-                            <li><strong>Datatype</strong> — type the literal (e.g. <code>xsd:date</code>).</li>
-                            <li><strong>Language</strong> — tag the literal with a BCP 47 language code.</li>
-                        </ul>
-                    </li>
-                </ul>
+            <li>Right-click the selection to open the annotation dialog.</li>
+            <li>In the annotation dialog, fill out the fields:
+                <table>
+                    <caption class="ac-vh">Annotation dialog fields</caption>
+                    <thead>
+                        <tr>
+                            <th scope="col">Field</th>
+                            <th scope="col">Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <th scope="row"><samp>Property</samp></th>
+                            <td>Start typing to search ontology terms; select one from the typeahead dropdown</td>
+                        </tr>
+                        <tr>
+                            <th scope="row"><samp>Value</samp></th>
+                            <td>Pre-filled with the selected text; change it to emit a different machine-readable value (e.g. a canonical form)</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <p>Expand <samp>Type, subject &amp; object</samp> for the advanced fields:</p>
+                <table>
+                    <caption class="ac-vh">Advanced annotation fields</caption>
+                    <thead>
+                        <tr>
+                            <th scope="col">Field</th>
+                            <th scope="col">Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <th scope="row"><samp>Type (typeof)</samp></th>
+                            <td>Assign an <code>rdf:type</code> to the annotated span</td>
+                        </tr>
+                        <tr>
+                            <th scope="row"><samp>Subject (about)</samp></th>
+                            <td>Override the in-scope subject IRI</td>
+                        </tr>
+                        <tr>
+                            <th scope="row"><samp>Object (resource)</samp></th>
+                            <td>Make the object a resource IRI instead of a literal</td>
+                        </tr>
+                        <tr>
+                            <th scope="row"><samp>Datatype</samp></th>
+                            <td>Type the literal (e.g. <code>xsd:date</code>)</td>
+                        </tr>
+                        <tr>
+                            <th scope="row"><samp>Language</samp></th>
+                            <td>Tag the literal with a BCP 47 language code</td>
+                        </tr>
+                    </tbody>
+                </table>
             </li>
-            <li>Click <strong>Annotate</strong>. The selected text is wrapped in a <code>span</code> carrying the appropriate RDFa attributes.</li>
+            <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Annotate</span>. The selected text is wrapped in a <code>span</code> carrying the appropriate RDFa attributes.</li>
         </ol>
-        <h3>Editing an existing annotation</h3>
-        <p>Right-click an already-annotated span to reopen the dialog pre-populated with the current values. Change any field and click <strong>Annotate</strong> to update, or click <strong>Remove</strong> to delete the annotation while keeping the text.</p>
-        <h3>Toggling annotation visibility</h3>
-        <p>The <strong>Show annotations</strong> button in the toolbar toggles a visual highlight on all annotated spans so you can see at a glance which text carries machine-readable meaning.</p>
+        <h3 id="editing-an-annotation">Editing an existing annotation</h3>
+        <p>Right-click an already-annotated span to reopen the dialog pre-populated with the current values. Change any field and click <span class="ac-btn in-primary ap-solid sz-sm">Annotate</span> to update, or click <span class="ac-btn in-negative ap-solid sz-sm">Remove</span> to delete the annotation while keeping the text.</p>
+        <h3 id="annotation-visibility">Annotation visibility</h3>
+        <p>While a block is in edit mode, annotated spans are outlined so you can see at a glance which text carries machine-readable meaning.</p>
     </div>
     <div>
         <h2 id="saving">Saving changes</h2>
-        <p>Changes are saved automatically when focus leaves the editor — clicking outside the block or tabbing away serialises the current XHTML content as an <code>XMLLiteral</code> and sends a SPARQL Update <code>PATCH</code> request that replaces the stored value. There is no separate Save button.</p>
+        <p>Changes are saved automatically when focus leaves the editor — clicking outside the block or tabbing away serializes the current XHTML content as an <code>XMLLiteral</code> and sends a SPARQL Update <code>PATCH</code> request that replaces the stored value. There is no separate Save button.</p>
+        <p>A save only happens when the content actually changed: leaving the editor without edits restores the block as it was, without rewriting the document or adding a <a href="../version-history/">version</a>.</p>
         <p>Moving focus to the editor's own controls (the toolbar, the breadcrumb or the find bar) does not trigger a save; only leaving the editor region does.</p>
     </div>
+    <div>
+        <h2 id="tab-groups">Tab groups</h2>
+        <p>Some pages present alternative paths — such as user interface and command line instructions — as switching tab strips. In edit mode the switching is suspended: every panel is shown stacked and can be edited in place, and the markup is preserved exactly on save. The tab strip itself is editable text, so take care not to alter the tab buttons unintentionally.</p>
+        <p>Creating a new tab group is not yet supported in the editor — that markup is authored over the <a href="../../reference/http-api/">HTTP API</a>, e.g. with <samp>ldh put</samp> from the <a href="../../reference/command-line-interface/">command line interface</a>.</p>
+    </div>
     <div>
         <h2 id="xhtml-source">Viewing the XHTML source</h2>
-        <p>Click the <strong>Source</strong> button in the toolbar to open a read-only view of the serialised XHTML markup, including all RDFa attributes. This is useful for verifying the exact markup that will be stored or for copying fragments into other documents.</p>
+        <p>Click the <span class="ac-btn in-neutral ap-outline sz-sm">Source</span> button in the toolbar to open a read-only view of the serialized XHTML markup, including all RDFa attributes. This is useful for verifying the exact markup that will be stored or for copying fragments into other documents.</p>
     </div>
+    <p class="ldh-body-lg">Read more about <a href="../../reference/data-model/blocks/">content blocks</a>, or manage them from the command line as shown in the <a href="../create-data/create-content/">Create content</a> guide.</p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/import-data.ttl b/docs/user-guide/import-data.ttl
index b145fedb..06911afa 100644
--- a/docs/user-guide/import-data.ttl
+++ b/docs/user-guide/import-data.ttl
@@ -1,18 +1,28 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Container ;
     dct:title "Import data" ;
-    dct:description "How to import data into LinkedDataHub" ;
+    dct:description "How to bulk import CSV and RDF data into LinkedDataHub" ;
     rdf:_1 <#content> ;
     rdf:_2 <#select-children> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">How to bulk import data into LinkedDataHub</p>
+    <p class="ldh-body-lg">How to bulk import CSV and RDF data into LinkedDataHub</p>
     <p>This guide is about bulk data imports running asynchronously, suitable for larger datasets. If you want to simply add RDF data to a document, see the <a href="../add-data/">add data</a> guide.</p>
+    <p>Pick the guide that matches your data:</p>
+    <dl>
+        <dt>CSV file</dt>
+        <dd><a href="import-csv-data/">Import CSV data</a></dd>
+        <dt>Large RDF file</dt>
+        <dd><a href="import-rdf-data/">Import RDF data</a></dd>
+        <dt>Small RDF file or remote Linked Data</dt>
+        <dd><a href="../add-data/">Add data</a></dd>
+    </dl>
+    <p class="ldh-body-lg"><a href="../../reference/imports/">Read more about how imports work.</a></p>
 </div>"""^^rdf:XMLLiteral .
 
 <#select-children> a ldh:Object ;
diff --git a/docs/user-guide/import-data/import-csv-data-1.mp4 b/docs/user-guide/import-data/import-csv-data-1.mp4
new file mode 100644
index 00000000..f941a6fd
Binary files /dev/null and b/docs/user-guide/import-data/import-csv-data-1.mp4 differ
diff --git a/docs/user-guide/import-data/import-csv-data.ttl b/docs/user-guide/import-data/import-csv-data.ttl
index 95e1c9a3..dfaa49a6 100644
--- a/docs/user-guide/import-data/import-csv-data.ttl
+++ b/docs/user-guide/import-data/import-csv-data.ttl
@@ -1,44 +1,39 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-    
+
 <> a dh:Item ;
     dct:title "Import CSV data" ;
-    dct:description "Step by step guide to converting CSV data to RDF and importing into end-user application" ;
+    dct:description "Step-by-step guide to converting CSV data to RDF and importing it into the end-user dataspace" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Step by step guide to converting CSV data to RDF and importing into end-user application</p>
-    <p class="lead"><a href="../../../reference/imports/csv/" target="_blank">Read more on how CSV imports work.</a></p>
-    <p>There are 3 main components that comprise a CSV import:</p>
+    <p class="ldh-body-lg">Step-by-step guide to converting CSV data to RDF and importing it into the end-user dataspace</p>
+    <p>A CSV import has three components:</p>
     <dl>
         <dt>CSV file</dt>
         <dd>The file containing the tabular data</dd>
         <dt>Mapping query</dt>
-        <dd>SPARQL <code>CONSTRUCT</code> query that maps CSV to generic RDF represenation</dd>
+        <dd>SPARQL <code>CONSTRUCT</code> query that maps CSV rows to an RDF representation</dd>
         <dt>CSV import</dt>
         <dd>Combines the file with the corresponding query</dd>
     </dl>
-    <div class="tabbable">
-        <ul class="nav nav-tabs">
-            <li class="active"><a>User interface</a></li>
-            <li><a>Command line interface</a></li>
-        </ul>
-        <div class="tab-content">
-            <div class="tab-pane active">
+    <div class="ac-tabs or-horizontal">
+        <div class="ac-tablist sz-md va-line" role="tablist">
+            <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+            <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+        </div>
+        <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
                 <div>
-                    <p class="text-center">
-                        <iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="https://www.youtube.com/embed/vkuO6RiTW9s?list=PLnDXST4pVcQQr-j3YXrVvGRP46E2Nnn5l" width="560"></iframe>
-                    </p>
-                    <p>LinkedDataHub allows all the import components be created from a single dialogue, but we will go through the process in separate
-                        steps:</p>
+                    <video aria-label="Importing CSV data and mapping it to RDF" controls="controls" preload="metadata" src="/uploads/a1152e7d99c4d59d1cb8a894895be4d85a1aaeca"></video>
+                    <p>All the import components can be created from a single dialog, but the steps below create them one at a time:</p>
                     <ol>
-                        <li>First, create a container for the data to be imported. This will be the import's <dfn>target container</dfn></li>
-                        <li>Upload a CSV file. Click on the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown in the top left-hand corner and select
+                        <li>First, create a container for the data to be imported. This will be the import's <dfn>target container</dfn>.</li>
+                        <li>Upload a CSV file. Click on the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown at the bottom of the page and select
                                 <dfn>File</dfn>. This will open a new form.</li>
-                        <li>Fill out <dfn>Item</dfn> fields</li>
+                        <li>Fill out the <dfn>Item</dfn> fields — the document's <samp>Title</samp> (required) and optional <samp>Description</samp>, the same fields used when <a href="../../create-data/create-documents/">creating a document</a>.</li>
                         <li>
                             Fill out the mandatory <dfn>File</dfn> fields:
                             <dl>
@@ -48,12 +43,13 @@
                                 <dd>File title</dd>
                             </dl>
                         </li>
-                        <li>Once all the fields have been filled in, click <span class="btn btn-primary btn-save">Save</span></li>
-                        <li>The browser will open your imported file</li>
+                        <li>Once all the fields have been filled in, click <span class="ac-btn in-primary ap-solid sz-sm">Save</span>.</li>
+                        <li>The browser will open your imported file.</li>
                         <li>Create a <a href="../../../reference/imports/csv/#vocabulary-conversion">mapping query</a> that will
-                            transform the uploaded CSV to RDF. Click on the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown in the top left-hand corner and
+                            transform the uploaded CSV to RDF — the <a href="../../../tutorial/data/">tutorial's Data stage</a> walks through a complete example, <samp>categories.rq</samp>.
+                            Click on the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown at the bottom of the page and
                             select <dfn>CONSTRUCT</dfn>. This will open a new form.</li>
-                        <li>Fill out <dfn>Item</dfn> fields</li>
+                        <li>Fill out the <samp>Item</samp> fields.</li>
                         <li>
                             Fill out the mandatory <dfn>Query</dfn> fields:
                             <dl>
@@ -64,41 +60,45 @@
                                 <dd>Query title</dd>
                             </dl>
                         </li>
-                        <li>Once all the fields have been filled in click <span class="btn btn-primary btn-save">Save</span>. You can find it saved in the
-                                <dfn>Queries</dfn> container, which you can open from the <a href="../../../reference/user-interface/#document-tree">document tree</a> in the left sidebar.</li>
-                        <li>Click on the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown button at the top left-hand corner and select <dfn>CSV Import</dfn>.
+                        <li>Once all the fields have been filled in, click <span class="ac-btn in-primary ap-solid sz-sm">Save</span>. You can find it saved in the
+                                <dfn>Queries</dfn> container, which you can open from the <a href="../../../reference/user-interface/#document-hierarchy">document tree</a> in the left sidebar.</li>
+                        <li>Click on the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown button at the bottom of the page and select <dfn>CSV Import</dfn>.
                                 This will open a new form.</li>
-                        <li>Fill out <dfn>Item</dfn> fields</li>
+                        <li>Fill out the <samp>Item</samp> fields.</li>
                         <li>
                             Fill out the mandatory <dfn>CSV Import</dfn> fields:
                             <dl>
                                 <dt>File</dt>
-                                <dd>Start typing the name of your CSV file and select it from the typeahead.</dd>
+                                <dd>Start typing the name of your CSV file and select it from the typeahead</dd>
                                 <dt>Query</dt>
-                                <dd>Select the mapping query using the typeahead.</dd>
+                                <dd>Select the mapping query using the typeahead</dd>
                                 <dt>Title</dt>
                                 <dd>Import title</dd>
                             </dl>
                         </li>
-                        <li>Click <span class="btn btn-primary btn-save">Save</span> and you will be redirected the newly created import document.</li>
-                        <li>Refresh the document after a couple of moments to see the import progress. In case of success, the amount of data
-                                imported will be displayed. In case of failure, constraint violation(s) or other import issues will be displayed.</li>
+                        <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span> and you will be redirected to the newly created import document.</li>
+                        <li>Reload the document after a few moments to see the import progress. On success, the amount of data imported is
+                                displayed; on failure, the constraint violations or other import errors.</li>
                         <li>Go back to the target container to see the newly imported data items.</li>
                     </ol>
                 </div>
             </div>
-            <div class="tab-pane">
+        <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
                 <div>
-                    <p>Checkout the <a href="../../../reference/command-line-interface/">Command line interface</a> (CLI) scripts into a folder on your machine. Provide a list of arguments to the <samp>import-csv</samp> script and execute it. For example:</p>
-                    <pre>import-csv.sh \\
-    -b "https://localhost:4443/" \\
-    -f ./ssl/owner/cert.pem \\
-    -p "$owner_cert_password" \\
-    --title "Places" \\
-    --query-file places.rq \\
-    --csv-file places.csv</pre>
+                    <p>The import is described by a document, which the command takes as its last argument, so create that document first. With the <a href="../../../reference/command-line-interface/">CLI</a> installed and the <samp>LDH_*</samp> variables set:</p>
+                    <pre>doc=$(ldh create item \\
+    --title "Categories import" \\
+    --container "${LDH_BASE}categories/")
+
+ldh import csv \\
+    --title "Categories" \\
+    --query-file categories/categories.rq \\
+    --csv-file categories/categories.csv \\
+    "$doc"</pre>
+                    <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories/categories.rq" target="_blank">categories.rq</a>, <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories/categories.csv" target="_blank">categories.csv</a> — the mapping and the data are walked through in the <a href="../../../reference/imports/csv/">CSV imports reference</a> and the <a href="../../../tutorial/data/">tutorial's Data stage</a></p>
+                    <p><code>--delimiter</code> defaults to <samp>,</samp> and can be set to another character.</p>
                 </div>
             </div>
-        </div>
     </div>
+    <p class="ldh-body-lg"><a href="../../../reference/imports/csv/" target="_blank">Read more about how CSV imports work.</a></p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/import-data/import-rdf-data.ttl b/docs/user-guide/import-data/import-rdf-data.ttl
index f23331a3..2cf12d2b 100644
--- a/docs/user-guide/import-data/import-rdf-data.ttl
+++ b/docs/user-guide/import-data/import-rdf-data.ttl
@@ -1,132 +1,72 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-    
+
 <> a dh:Item ;
     dct:title "Import RDF data" ;
-    dct:description "Step by step guide to importing RDF data" ;
+    dct:description "Step-by-step guide to importing RDF data" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Step by step guide to importing RDF data</p>
-    <div class="alert alert-info">
-        <p>This guide is for importing larger amounts of data (e.g. more than a few thousands of RDF triples) asynchronously.
-        For smaller data, it is simpler to <a href="../../add-data/" target="_blank">add data </a> synchronously.</p>
+    <p class="ldh-body-lg">Step-by-step guide to importing RDF data</p>
+    <div class="ac-alert va-informative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">This guide is for importing larger amounts of data (e.g. more than a few thousand RDF triples) asynchronously.
+            For smaller data, it is simpler to <a href="../../add-data/" target="_blank">add data</a> synchronously.</p>
+        </div>
     </div>
-    <p class="lead"><a href="../../../reference/imports/rdf/" target="_blank">Read more on how RDF imports work.</a></p>
-    <p>There are 3 main components that comprise an RDF import:</p>
+    <p>An RDF import has these components:</p>
     <dl>
         <dt>RDF file</dt>
         <dd>The file containing the RDF data (can be in any RDF syntax)</dd>
         <dt>Transformation query (optional)</dt>
-        <dd>SPARQL <code>CONSTRUCT</code> query that maps RDF to another RDF represenation</dd>
+        <dd>SPARQL <code>CONSTRUCT</code> query that maps RDF to another RDF representation</dd>
         <dt>Graph (optional)</dt>
-        <dd>The document that the import results will be stored in, if no mapping query is specified</dd>
+        <dd>The document that the import results will be stored in, if no transformation query is specified</dd>
         <dt>RDF import</dt>
         <dd>Combines the file with the corresponding query</dd>
     </dl>
-    <p><em>Either query or graph have to be specified, not both.</em></p>
-    <div>
-        <h2 id="without-transformation">Without transformation</h2>
-        <p>This method <em>asynchronously</em> appends RDF data to a document (see <a href="../../create-data/create-documents/">how to create a document</a>).</p>
-        <div class="tabbable">
-            <ul class="nav nav-tabs">
-                <li class="active"><a>User interface</a></li>
-                <li><a>Command line interface</a></li>
-            </ul>
-            <div class="tab-content">
-                <div class="tab-pane active">
-                    <div>
-                        <p>LinkedDataHub allows all the import components be created from a single dialogue, but we will go through the process in separate
-                            steps:</p>
-                        <ol>
-                            <li>First, create a container for the data to be imported. This will be the import's <dfn>target container</dfn></li>
-                            <li>Upload a RDF file. Click on the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown in the top left-hand corner and select
-                                    <dfn>File</dfn>. This will open a new form.</li>
-                            <li>Fill out <dfn>Item</dfn> fields</li>
-                            <li>
-                                Fill in the mandatory <dfn>File</dfn> fields:
-                                <dl>
-                                    <dt>Filename</dt>
-                                    <dd>Click on <dfn>Choose file</dfn> and select a RDF file from your computer</dd>
-                                    <dt>Title</dt>
-                                    <dd>File title</dd>
-                                </dl>
-                            </li>
-                            <li>Once all the fields have been filled in, click <span class="btn btn-primary btn-save">Save</span></li>
-                            <li>Click on the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown button at the top left-hand corner and select <dfn>RDF Import</dfn>.
-                                    This will open a new form.</li>
-                            <li>Fill out <dfn>Item</dfn> fields</li>
-                            <li>
-                                Fill out the mandatory <dfn>RDF Import</dfn> fields:
-                                <dl>
-                                    <dt>File</dt>
-                                    <dd>Start typing the name of your RDF file and select it from the typeahead.</dd>
-                                    <dt>Name</dt>
-                                    <dd>Select the target graph (document) using the typeahead.</dd>
-                                    <dt>Title</dt>
-                                    <dd>Import title</dd>
-                                </dl>
-                            </li>
-                            <li>Click <span class="btn btn-primary btn-save">Save</span> and you will be redirected the newly created import document.</li>
-                            <li>Refresh the document after a couple of moments to see the import progress. In case of success, the amount of data
-                                    imported will be displayed. In case of failure, constraint violation(s) or other import issues will be displayed.</li>
-                            <li>Go back to the target document to see the newly imported data items.</li>
-                        </ol>
-                    </div>
-                </div>
-                <div class="tab-pane">
-                    <div>
-                        <p>Checkout the <a href="../../../reference/command-line-interface/">Command line interface</a> (CLI) scripts into a folder on your machine. Provide a list of arguments to the <samp>import-rdf</samp> script and execute it. For example:</p>
-                        <pre>import-rdf.sh \\
-    -b "https://localhost:4443/" \\
-    -f ./ssl/owner/cert.pem \\
-    -p "$owner_cert_password" \\
-    --title "Concepts" \\
-    --rdf-file concepts.ttl \\
-    --content-type "text/turtle" \\
-    --graph "${base}skos/"</pre>
-                    </div>
-                </div>
-            </div>
+    <div class="ac-alert va-informative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">Specify either a query or a graph, but not both.</p>
         </div>
     </div>
     <div>
-        <h2 id="with-transformation">With transformation</h2>
-        <div class="tabbable">
-            <ul class="nav nav-tabs">
-                <li class="active"><a>User interface</a></li>
-                <li><a>Command line interface</a></li>
-            </ul>
-            <div class="tab-content">
-                <div class="tab-pane active">
+        <h2 id="import-rdf-file">Import an RDF file</h2>
+        <p>Without a transformation, the import <em>asynchronously</em> appends the RDF data to a document (see <a href="../../create-data/create-documents/">how to create a document</a>).
+            With a transformation, it runs the uploaded RDF through a <code>CONSTRUCT</code> query before storing it, so the import can restructure or re-route the data.</p>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
                     <div>
-                        <p>LinkedDataHub allows all the import components be created from a single dialogue, but we will go through the process in separate
-                            steps:</p>
+                        <p>All the import components can be created from a single dialog, but the steps below create them one at a time:</p>
                         <ol>
-                            <li>First, create a container for the data to be imported. This will be the import's <dfn>target container</dfn></li>
-                            <li>Upload a RDF file. Click on the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown in the top left-hand corner and select
+                            <li>First, create a container for the data to be imported. This will be the import's <dfn>target container</dfn>.</li>
+                            <li>Upload an RDF file. Click on the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown at the bottom of the page and select
                                     <dfn>File</dfn>. This will open a new form.</li>
-                            <li>Fill out <dfn>Item</dfn> fields</li>
+                            <li>Fill out the <dfn>Item</dfn> fields — the document's <samp>Title</samp> (required) and optional <samp>Description</samp>, the same fields used when <a href="../../create-data/create-documents/">creating a document</a>.</li>
                             <li>
-                                Fill in the mandatory <dfn>File</dfn> fields:
+                                Fill out the mandatory <dfn>File</dfn> fields:
                                 <dl>
                                     <dt>Filename</dt>
-                                    <dd>Click on <dfn>Choose file</dfn> and select a RDF file from your computer</dd>
+                                    <dd>Click on <dfn>Choose file</dfn> and select an RDF file from your computer</dd>
                                     <dt>Title</dt>
                                     <dd>File title</dd>
                                 </dl>
                             </li>
-                            <li>Once all the fields have been filled in, click <span class="btn btn-primary btn-save">Save</span></li>
-                            <li>The browser will open your imported file</li>
-                            <li>Create a <a href="../../../reference/imports/rdf/#transformation">transformation query</a> that will
-                                transform the uploaded RDF to a new RDF structure. Click on the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown in the top left-hand corner and
-                                select <dfn>CONSTRUCT</dfn>. This will open a new form.</li>
-                            <li>Fill out <dfn>Item</dfn> fields</li>
+                            <li>Once all the fields have been filled in, click <span class="ac-btn in-primary ap-solid sz-sm">Save</span>.</li>
+                            <li>The browser will open your uploaded file.</li>
                             <li>
-                                Fill out the mandatory <dfn>CONSTRUCT</dfn> fields:
+                                If you are importing with a transformation, create a <a href="../../../reference/imports/rdf/#transformation">transformation query</a> that will
+                                transform the uploaded RDF to a new RDF structure. Click on the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown at the bottom of the page and
+                                select <dfn>CONSTRUCT</dfn>. This will open a new form. Fill out the <samp>Item</samp> fields and the mandatory <dfn>CONSTRUCT</dfn> fields:
                                 <dl>
                                     <dt>Text</dt>
                                     <dd>SPARQL <code>CONSTRUCT</code> query string</dd>
@@ -134,43 +74,56 @@
                                     <dt>Title</dt>
                                     <dd>Query title</dd>
                                 </dl>
+                                Once all the fields have been filled in, click <span class="ac-btn in-primary ap-solid sz-sm">Save</span>. You can find the query saved in the
+                                <dfn>Queries</dfn> container, which you can open from the <a href="../../../reference/user-interface/#document-hierarchy">document tree</a> in the left sidebar.
                             </li>
-                            <li>Once all the fields have been filled in click <span class="btn btn-primary btn-save">Save</span>. You can find it saved in the
-                                    <dfn>Queries</dfn> container, which you can open from the <a href="../../../reference/user-interface/#document-tree">document tree</a> in the left sidebar.</li>
-                            <li>Click on the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown button at the top left-hand corner and select <dfn>RDF Import</dfn>.
+                            <li>Click on the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown button at the bottom of the page and select <dfn>RDF Import</dfn>.
                                     This will open a new form.</li>
-                            <li>Fill out <dfn>Item</dfn> fields</li>
+                            <li>Fill out the <samp>Item</samp> fields.</li>
                             <li>
                                 Fill out the mandatory <dfn>RDF Import</dfn> fields:
                                 <dl>
                                     <dt>File</dt>
-                                    <dd>Start typing the name of your RDF file and select it from the typeahead.</dd>
-                                    <dt>Query</dt>
-                                    <dd>Select the transformation query using the typeahead.</dd>
+                                    <dd>Start typing the name of your RDF file and select it from the typeahead</dd>
                                     <dt>Title</dt>
                                     <dd>Import title</dd>
                                 </dl>
                             </li>
-                            <li>Click <span class="btn btn-primary btn-save">Save</span> and you will be redirected the newly created import document.</li>
-                            <li>Refresh the document after a couple of moments to see the import progress. In case of success, the amount of data
-                                    imported will be displayed. In case of failure, constraint violation(s) or other import issues will be displayed.</li>
+                            <li>
+                                Select either the target graph or the transformation query — but not both:
+                                <dl>
+                                    <dt>Name</dt>
+                                    <dd>Select the target graph (document) using the typeahead</dd>
+                                    <dt>Query</dt>
+                                    <dd>Select the transformation query using the typeahead</dd>
+                                </dl>
+                            </li>
+                            <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span> and you will be redirected to the newly created import document.</li>
+                            <li>Reload the document after a few moments to see the import progress. On success, the amount of data imported is
+                                    displayed; on failure, the constraint violations or other import errors.</li>
+                            <li>Go back to the target document to see the newly imported data items.</li>
                         </ol>
                     </div>
                 </div>
-                <div class="tab-pane">
+            <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
                     <div>
-                        <p>Checkout the <a href="../../../reference/command-line-interface/">Command line interface</a> (CLI) scripts into a folder on your machine. Provide a list of arguments to the <samp>import-rdf</samp> script and execute it. For example:</p>
-                        <pre>import-rdf.sh \\
-    -b "https://localhost:4443/" \\
-    -f ./ssl/owner/cert.pem \\
-    -p "$owner_cert_password" \\
-    --title "Concepts" \\
-    --rdf-file concepts.ttl \\
+                        <p>The import is described by a document, which the command takes as its last argument, so create that document first. With the <a href="../../../reference/command-line-interface/">CLI</a> installed and the <samp>LDH_*</samp> variables set:</p>
+                        <pre>doc=$(ldh create item \\
+    --title "UNESCO category mappings" \\
+    --container "${LDH_BASE}categories/")
+
+ldh import rdf \\
+    --title "UNESCO category mappings" \\
+    --rdf-file categories/unesco-mappings.ttl \\
     --content-type "text/turtle" \\
-    --query-file concepts.rq</pre>
+    --graph "${LDH_BASE}categories/mappings/" \\
+    "$doc"</pre>
+                        <p>Pass either <code>--graph</code> with the target document's URI or <code>--query-file</code> with the path to a transformation query, but not both.
+                            In the Northwind demo, the <a href="../../../reference/imports/rdf/#transformation-example">transformation query</a> routes each mapping into its category's own document.</p>
+                        <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories/unesco-mappings.ttl" target="_blank">categories/unesco-mappings.ttl</a> — the mapping file that connects Northwind categories to UNESCO Thesaurus concepts, shown in full in the <a href="../../../reference/imports/rdf/">RDF imports reference</a></p>
                     </div>
                 </div>
-            </div>
         </div>
     </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
+    <p class="ldh-body-lg"><a href="../../../reference/imports/rdf/" target="_blank">Read more about how RDF imports work.</a></p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/manage-dataspaces.ttl b/docs/user-guide/manage-dataspaces.ttl
index 2d8db452..eca06d41 100644
--- a/docs/user-guide/manage-dataspaces.ttl
+++ b/docs/user-guide/manage-dataspaces.ttl
@@ -1,56 +1,59 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Manage dataspaces" ;
-    dct:description "Create or change a dataspace, configure SPARQL services and XSLT stylesheets" ;
+    dct:description "Create or change a dataspace, and configure its SPARQL services and XSLT stylesheets" ;
     rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Step by step guide to creating a new dataspace backed by SPARQL services</p>
+    <p class="ldh-body-lg">Create or change a dataspace, and configure its SPARQL services and XSLT stylesheets</p>
     <div>
-        <h2 id="dataspaces">Manage dataspaces</h2>
-        <p><a href="../../reference/dataspace/" target="_blank">Dataspaces</a> are configured using RDF configuration files in <a href="https://www.w3.org/TR/trig/" target="_blank">TriG</a> syntax:</p>
-        <ul>
-            <li><a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/config/dataspaces.trig" target="_blank"><samp>config/dataspaces.trig</samp></a> — Application metadata (base URIs, titles, ontologies, stylesheets)</li>
-            <li><a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/config/system.trig" target="_blank"><samp>config/system.trig</samp></a> — Internal service wiring (app-to-service bindings, SPARQL endpoints)</li>
-            <li><samp>secrets/credentials.trig</samp> — Service authentication credentials (optional, gitignored). See the <a href="../../reference/triplestores/#authentication" target="_blank">authentication reference</a> for details.</li>
-        </ul>
-        <p>The configuration uses the <a href="https://w3id.org/atomgraph/linkeddatahub/apps" target="_blank">Application domain ontology</a>. A dataspace is comprised of an end-user
-            application and an administrative application, both backed by their own SPARQL service. Each application can also specify its own <a href="../../reference/stylesheets/" target="_blank">XSLT stylesheet</a>.</p>
-        <p>See the <a href="../../reference/configuration/#config-files" target="_blank">configuration reference</a> for more details about these files.</p>
-        <div class="alert alert-info">
-            <p>Application base URIs need to be relative to the <a href="../change-system-base-uri/#base-uri" target="_blank">system base URI</a> configured in the <samp>.env</samp> file. A change of system base URI currently requires a change of application base URIs, otherwise they will not be reachable.</p>
+        <h2 id="configuration-files">Configuration files</h2>
+        <p><a href="../../reference/dataspace/" target="_blank">Dataspaces</a> are configured using RDF configuration files in <a href="https://www.w3.org/TR/trig/" target="_blank">TriG</a> syntax:
+            <samp>config/dataspaces.trig</samp> holds the dataspace metadata, <samp>config/system.trig</samp> the internal service wiring, and <samp>secrets/credentials.trig</samp> the optional
+            service credentials. See the <a href="../../reference/configuration/#config-files" target="_blank">configuration reference</a> for details about these files.</p>
+        <p>The configuration uses the <a href="https://w3id.org/atomgraph/linkeddatahub/dataspaces" target="_blank">dataspace domain ontology</a>. Each dataspace — end-user or administration — is backed by its own SPARQL service and can specify its own <a href="../../reference/stylesheets/" target="_blank">XSLT stylesheet</a>.</p>
+        <p>Dataspace configuration is file-based — there is no <samp>ldh</samp> command for it. The <samp>config/*.trig</samp> files are read at startup, so changes to them require a restart of the LinkedDataHub service.</p>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">Dataspace base URIs must be relative to the <a href="../../reference/configuration/#system-base-uri" target="_blank">system base URI</a> configured in <samp>.env</samp>. If you change the system base URI, you must update the dataspace base URIs too, or they will not be reachable.</p>
+            </div>
         </div>
         <div>
             <h3 id="create-dataspace">Create a dataspace</h3>
             <p>To create a new dataspace:</p>
             <ol>
-                <li>Add instances of <code>lapp:EndUserApplication</code> and <code>lapp:AdminApplication</code> to <samp>config/dataspaces.trig</samp>, following the default dataspace as a template</li>
-                <li>Add corresponding <code>sd:Service</code> instances to <samp>config/system.trig</samp> with the SPARQL endpoint connection details</li>
+                <li>Add instances of <code>lds:EndUserDataspace</code> and <code>lds:AdminDataspace</code> to <samp>config/dataspaces.trig</samp>, following the default dataspace as a template</li>
+                <li>Declare an <samp>end-user</samp> and an <samp>admin</samp> dataset for the dataspace in <samp>config/fuseki/config.ttl</samp>, named after its origin (deployment host dropped, role appended)</li>
+                <li>Add corresponding <code>sd:Service</code> instances to <samp>config/system.trig</samp>, each pointing at one of those datasets, and bind the dataspaces to them</li>
             </ol>
-            <p>The relationship between end-user and admin applications is automatically inferred based on naming conventions — you don't need to manually specify
-            <code>lapp:endUserApplication</code> or <code>lapp:adminApplication</code> properties. Applications whose origin (<code>lapp:origin</code>) uses the
-            <samp>admin.</samp> subdomain are automatically recognized as administration applications, and paired with the end-user application on the corresponding bare host.</p>
-            <div class="alert alert-info">
-                <p>Use URIs (for example in the <samp>urn:</samp> scheme) to identify apps and services, not blank nodes. Make sure both files' syntax is valid <a href="https://www.w3.org/TR/turtle/" target="_blank">Turtle</a>, otherwise the setup will not work. You can use <a href="http://ttl.summerofcode.be/" target="_blank">Turtle Validator</a> to check the syntax.</p>
+            <p>The relationship between end-user and admin dataspaces is inferred from their origins, and there is nothing to declare. A dataspace whose origin
+            (<code>lds:origin</code>) uses the <samp>admin.</samp> subdomain is recognized as an administration dataspace, and paired with the end-user dataspace on
+            the corresponding bare host.</p>
+            <div class="ac-alert va-informative" role="status">
+                <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+                <div class="ac-alert-body">
+                    <p class="ac-alert-text">Use URIs (for example in the <samp>urn:</samp> scheme) to identify apps and services, not blank nodes. Make sure both files are valid <a href="https://www.w3.org/TR/trig/" target="_blank">TriG</a>, or the setup will not work. You can check the syntax with Apache Jena's <samp>riot --validate</samp>.</p>
+                </div>
             </div>
         </div>
         <div>
             <h3 id="change-stylesheet">Change stylesheet</h3>
-            <p>Change the value of <code>ac:stylesheet</code> to the URI of your <a href="../../reference/stylesheets/" target="_blank">XSLT stylesheet</a>. Add the property if it is absent.</p>
+            <p>Change the value of <code>ac:stylesheet</code> to the URI of your <a href="../../reference/stylesheets/" target="_blank">XSLT stylesheet</a>. Add the property if it is absent. The value has to be an absolute URL on the dataspace's own origin.</p>
             <p>The stylesheet can either be <a href="../upload-file/" target="_blank">uploaded as a file</a> or <a href="https://docs.docker.com/storage/bind-mounts/" target="_blank">mounted</a> in <samp>docker-compose.yml</samp>, in the <samp>volumes</samp> section of the <samp>linkeddatahub</samp> service. Mounting is useful while developing.</p>
-            <p>You will need to restart LinkedDataHub's Docker service for the new stylesheet to take effect.</p>
-            <p>It is rarely necessary to change the stylesheet of an admin application.</p>
+            <p>It is rarely necessary to change the stylesheet of an admin dataspace, but the procedure is identical.</p>
         </div>
     </div>
     <div>
         <h2 id="manage-services">Manage services</h2>
-        <p>LinkedDataHub service as well as the default SPARQL services <samp>fuseki-end-user</samp> and <samp>fuseki-admin</samp> are defined in <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/docker-compose.yml" target="_blank"><samp>docker-compose.yml</samp></a> and run as Docker containers.</p>
-        <p>While LinkedDataHub uses Apache Jena Fuseki by default, you can configure it to use other SPARQL 1.1-compatible triplestores such as <a href="https://github.com/ad-freiburg/qlever" target="_blank">QLever</a>, <a href="https://github.com/dice-group/tentris" target="_blank">Tentris</a>, or others.</p>
+        <p>The LinkedDataHub service, the single <samp>fuseki</samp> triplestore, the <samp>egress</samp> proxy and the <samp>sef-compiler</samp> are defined in <a href="https://github.com/AtomGraph/LinkedDataHub/blob/master/docker-compose.yml" target="_blank"><samp>docker-compose.yml</samp></a>; each runs as a Docker container. One Fuseki server holds an <samp>end-user</samp> and an <samp>admin</samp> dataset per dataspace, declared in <samp>config/fuseki/config.ttl</samp> — so giving a dataspace its own datasets means adding a dataset pair there and a matching pair of <code>sd:Service</code> instances in <samp>config/system.trig</samp>.</p>
+        <p>While LinkedDataHub uses <a href="https://jena.apache.org/documentation/fuseki2/" target="_blank">Apache Jena Fuseki</a> by default, you can configure it to use other SPARQL 1.1-compatible triplestores such as <a href="https://github.com/ad-freiburg/qlever" target="_blank">QLever</a>, <a href="https://github.com/dice-group/tentris" target="_blank">Tentris</a>, or others.</p>
         <p>See the <a href="../../reference/triplestores/" target="_blank">triplestores reference</a> for step-by-step configuration examples, including QLever setup and troubleshooting.</p>
     </div>
+    <p class="ldh-body-lg">Read more about <a href="../../reference/dataspace/" target="_blank">dataspaces</a> and the <a href="../../reference/configuration/" target="_blank">configuration</a>.</p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/manage-dataspaces/CreateContextDataspace.webm b/docs/user-guide/manage-dataspaces/CreateContextDataspace.webm
deleted file mode 100644
index e799fd4b..00000000
Binary files a/docs/user-guide/manage-dataspaces/CreateContextDataspace.webm and /dev/null differ
diff --git a/docs/user-guide/manage-packages.ttl b/docs/user-guide/manage-packages.ttl
index 8e499026..06620716 100644
--- a/docs/user-guide/manage-packages.ttl
+++ b/docs/user-guide/manage-packages.ttl
@@ -1,141 +1,143 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Manage packages" ;
-    dct:description "Step by step guide to installing and uninstalling packages" ;
+    dct:description "Step-by-step guide to installing and uninstalling packages" ;
     rdf:_1 <#content> .
 
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-  <p class="lead">Step by step guide to installing and uninstalling packages in your LinkedDataHub dataspace.</p>
-  <div class="alert alert-info">
-    <p><strong>Version:</strong> Packages were introduced in LinkedDataHub 5.2.</p>
-  </div>
-  <div class="alert alert-info">
-    <p>Package management requires <a href="../../reference/administration/acl/#access-modes" target="_blank">Control access</a> to the administration application. Only users with administrative privileges can install or uninstall packages.</p>
-  </div>
-  <p class="lead"><a href="../../reference/administration/packages/" target="_blank">Read more about how packages work.</a></p>
-  <div class="alert alert-warning">
-    <p><strong>Important:</strong> After installing or uninstalling a package, you must restart the Docker service for XSLT stylesheet changes to take effect:</p>
-    <pre>docker-compose restart linkeddatahub</pre>
-    <p>Do not use <code>--force-recreate</code> as that would overwrite the stylesheet file changes.</p>
-  </div>
-  <div>
-    <h2 id="install-package">Install a package</h2>
-    <p>Installing a package adds new functionality to your dataspace by importing ontologies, data, and resources.</p>
-    <div class="tabbable">
-      <ul class="nav nav-tabs">
-        <li class="active"><a>User interface</a></li>
-        <li><a>Command line interface</a></li>
-      </ul>
-      <div class="tab-content">
-        <div class="tab-pane active">
-          <p>Follow these steps to install a package through the web interface:</p>
-          <ol>
-            <li>Open the package URI in browser mode by entering its URI in the address bar</li>
-            <li>Click the <span class="btn">Actions</span> dropdown button next to the package</li>
-            <li>Select <span class="btn btn-primary">Install</span> from the dropdown menu</li>
-            <li>Wait for the installation to complete</li>
-            <li>Refresh your browser to ensure the new package functionality is loaded</li>
-          </ol>
+    <p class="ldh-body-lg">Step-by-step guide to installing and uninstalling packages</p>
+    <div class="ac-alert va-informative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">Package management requires write access to the dataspace's <samp>settings</samp> document, which in practice means the owner of the dataspace.</p>
         </div>
-        <div class="tab-pane">
-          <p>Execute the following command:</p>
-          <pre>install-package.sh \\
-  -b "https://localhost:4443/" \\
-  -f ssl/owner/cert.pem \\
-  -p "$owner_cert_password" \\
-  --package "https://packages.linkeddatahub.com/skos/#this"</pre>
-          <p>Parameters:</p>
-          <dl>
-            <dt><code>-b</code></dt>
-            <dd>Base URL of your LinkedDataHub instance</dd>
-            <dt><code>-f</code></dt>
-            <dd>Path to your owner certificate file</dd>
-            <dt><code>-p</code></dt>
-            <dd>Owner certificate password</dd>
-            <dt><code>--package</code></dt>
-            <dd>Package URI to install (e.g., <samp>https://packages.linkeddatahub.com/skos/#this</samp>)</dd>
-          </dl>
+    </div>
+    <p>Packages were introduced in LinkedDataHub 5.2. Since 5.10 they are installed <em>declaratively</em>: a dataspace imports a package with a single <code>ldh:import</code> triple in its settings. The dedicated install/uninstall endpoints, and the package <samp>Actions</samp> menu that drove them, have been removed.</p>
+    <div>
+        <h2 id="install-package">Install a package</h2>
+        <p>Installing a package adds new functionality to your dataspace by importing its ontology and stylesheet. Packages are published under <samp>https://packages.linkeddatahub.com/</samp>, with their sources in the <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/tree/master/packages" target="_blank"><samp>packages/</samp></a> directory of the LinkedDataHub-Apps repository.</p>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
+                    <p>Follow these steps to install a package through the web interface:</p>
+                    <ol>
+                        <li>Open the end-user dataspace of your dataspace and make sure you are logged in</li>
+                        <li>Click the settings dropdown button in the right section of the navigation bar</li>
+                        <li>Select <dfn>Dataspace</dfn> from the dropdown menu to open the <dfn>Dataspace settings</dfn> modal</li>
+                        <li>Scroll down to the <dfn>Packages</dfn> section, which lists the available packages with their descriptions</li>
+                        <li>Tick the <dfn>Installed</dfn> checkbox of the package you want to install</li>
+                        <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span></li>
+                    </ol>
+                    <p>The page reloads with the package applied. The checkboxes are inputs of the settings form, so several packages can be installed and uninstalled in a single <span class="ac-btn in-primary ap-solid sz-sm">Save</span>.</p>
+                </div>
+            <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
+                    <p>List what the registry offers, marking the ones this dataspace already imports:</p>
+                    <pre>ldh packages list</pre>
+                    <p>Then install one by its URI:</p>
+                    <pre>ldh packages add --package https://packages.linkeddatahub.com/editor/taxonomy/#this</pre>
+                    <p>(The base URI, owner certificate and its password come from the <a href="../../reference/command-line-interface/#environment-variables"><samp>LDH_*</samp> environment variables</a>.)</p>
+                    <p>The command writes a single <code>ldh:import</code> triple on the dataspace's <samp>settings</samp> document — that declaration <em>is</em> the installation. It matches the dataspace by type rather than by URI, because the dataspace's URI is an opaque <samp>urn:</samp> declared in <samp>config/system.trig</samp>.</p>
+                </div>
         </div>
-      </div>
     </div>
-  </div>
-  <div>
-    <h2 id="uninstall-package">Uninstall a package</h2>
-    <p>Uninstalling a package removes its ontologies and resources from your dataspace. User-created data that uses the package vocabulary will remain but may not function correctly.</p>
-    <div class="tabbable">
-      <ul class="nav nav-tabs">
-        <li class="active"><a>User interface</a></li>
-        <li><a>Command line interface</a></li>
-      </ul>
-      <div class="tab-content">
-        <div class="tab-pane active">
-          <p>Follow these steps to uninstall a package through the web interface:</p>
-          <ol>
-            <li>Navigate to the administration application of your dataspace</li>
-            <li>Open the <dfn>Packages</dfn> container to view installed packages</li>
-            <li>Find the package you want to uninstall in the list</li>
-            <li>Click the <span class="btn">Actions</span> dropdown button next to the package</li>
-            <li>Select <span class="btn btn-danger">Uninstall</span> from the dropdown menu</li>
-            <li>Confirm the uninstallation when prompted</li>
-            <li>Wait for the uninstallation to complete</li>
-          </ol>
-          <p class="alert alert-warning">Uninstalling a package will remove its ontologies and associated resources. Any data you created using the package's vocabulary will remain in your dataspace but may not display or function correctly without the package.</p>
+    <div>
+        <h2 id="uninstall-package">Uninstall a package</h2>
+        <p>Uninstalling a package removes its ontology and stylesheet from your dataspace. Data you created using the package vocabulary remains but may not display or function correctly without the package.</p>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-2-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-2-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-2-pane" aria-selected="false" class="ac-tab" id="command-line-interface-2-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+            </div>
+            <div aria-labelledby="user-interface-2-tab" class="ac-tabpanel" id="user-interface-2-pane" role="tabpanel">
+                    <p>Follow these steps to uninstall a package through the web interface:</p>
+                    <ol>
+                        <li>Open the <dfn>Dataspace settings</dfn> modal as described above</li>
+                        <li>Find the package in the <dfn>Packages</dfn> section</li>
+                        <li>Untick its <dfn>Installed</dfn> checkbox</li>
+                        <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span></li>
+                    </ol>
+                </div>
+            <div aria-labelledby="command-line-interface-2-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-2-pane" role="tabpanel">
+                    <p>Uninstalling retracts the same triple, and is idempotent — removing an import the dataspace does not have succeeds and changes nothing:</p>
+                    <pre>ldh packages remove --package https://packages.linkeddatahub.com/editor/taxonomy/#this</pre>
+                </div>
         </div>
-        <div class="tab-pane">
-          <p>Execute the following command:</p>
-          <pre>uninstall-package.sh \\
-  -b "https://localhost:4443/" \\
-  -f ssl/owner/cert.pem \\
-  -p "$owner_cert_password" \\
-  --package "https://packages.linkeddatahub.com/skos/#this"</pre>
-          <p>Parameters are the same as for installation.</p>
+    </div>
+    <div>
+        <h2 id="verify-installation">Verify the installation</h2>
+        <div class="ac-alert va-informative" role="status">
+            <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+            <div class="ac-alert-body">
+                <p class="ac-alert-text">Installing or uninstalling a package takes effect on the <strong>next request</strong> — the package ontology joins the dataspace's imports closure and its stylesheet is composed into the dataspace stylesheet. No restart is needed.</p>
+            </div>
         </div>
-      </div>
+        <p>After installing a package, verify that it was applied:</p>
+        <ol>
+            <li>Reopen the <dfn>Dataspace settings</dfn> modal and check that the package's <dfn>Installed</dfn> checkbox is ticked</li>
+            <li>Check that the <code>ldh:import</code> declaration was stored by fetching the <samp>settings</samp> document:
+                <pre>ldh get \\
+  --accept text/turtle \\
+  "https://localhost:4443/settings"</pre>
+                <p>The output contains an <code>ldh:import</code> triple with the package URI as its object.</p>
+            </li>
+            <li>Check that the package ontology joined the imports closure by querying the <samp>ns</samp> endpoint — for the taxonomy editor package, the
+                <code>skos:Concept</code> constructor becomes visible there:
+                <pre>curl -k -G \\
+  -E ssl/owner/cert.pem:"$owner_cert_password" \\
+  -H "Accept: application/sparql-results+xml" \\
+  "https://localhost:4443/ns" \\
+  --data-urlencode 'query=ASK { &lt;http://www.w3.org/2004/02/skos/core#Concept&gt; &lt;http://spinrdf.org/spin#constructor&gt; ?constructor }'</pre>
+                <p>SPARQL queries fall outside the <samp>ldh</samp> command set, so this one uses <samp>curl</samp> with the <a href="../../get-started/get-an-account/">PEM certificate</a>.</p>
+            </li>
+            <li>In the end-user dataspace, check that package-specific classes are offered by the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown</li>
+            <li>If the package includes a stylesheet, verify that its custom UI elements are rendering</li>
+        </ol>
+    </div>
+    <div>
+        <h2 id="edit-package-ontology">Edit the package ontology</h2>
+        <p>On the first request after the import, the package ontology is copied into a document of your dataspace's admin dataspace, under its
+            <samp>ontologies/</samp> container and named after the package path — for the taxonomy editor, <samp>https://admin.localhost:4443/ontologies/editor-taxonomy/</samp>.
+            That document is the package ontology as far as your dataspace is concerned: its constructors, constraints and views are edited there the same
+            way as those of your own namespace ontology, and a change takes effect after the ontology cache is cleared.</p>
+        <p>The copy is taken once. A newer version of the package does not reach a dataspace that already imported it; to pick it up, delete the
+            <samp>ontologies/</samp> document, clear the ontology cache, and let the next request materialize the package again — edits made to the document are lost with it.</p>
+        <pre>ldh delete "https://admin.localhost:4443/ontologies/editor-taxonomy/"
+ldh admin clear ontology</pre>
+    </div>
+    <div>
+        <h2 id="customize-package-behavior">Customize package behavior</h2>
+        <p>Packages may include custom XSLT stylesheets that affect how data is displayed. You can further customize the behavior by:</p>
+        <ul>
+            <li><a href="../../extending/change-layout/#create-stylesheet" target="_blank">Importing additional stylesheets</a> to extend package functionality</li>
+            <li><a href="../../extending/change-layout/#override-output" target="_blank">Overriding package templates</a> to customize the rendering of package resources</li>
+        </ul>
+        <p>See the <a href="../../extending/change-layout/" target="_blank">Change layout guide</a> for detailed instructions on stylesheet customization.</p>
+    </div>
+    <div>
+        <h2 id="troubleshooting">Troubleshooting</h2>
+        <h3 id="installation-fails">Installation fails</h3>
+        <p>If the <span class="ac-btn in-primary ap-solid sz-sm">Save</span> or the <samp>ldh patch</samp> is rejected:</p>
+        <ul>
+            <li>Verify you are logged in with an agent that has write access to the dataspace's <samp>settings</samp></li>
+            <li>Verify the package URI is correct and dereferenceable, and that its metadata declares <code>lds:ontology</code> and <code>ac:stylesheet</code></li>
+            <li>Review the error message — a rejected settings update reports the constraint violation that caused it</li>
+        </ul>
+        <h3 id="functionality-not-visible">Package functionality not visible</h3>
+        <p>If installed package features are not visible:</p>
+        <ul>
+            <li>Reload the page — the stylesheet is composed on the next request, but the browser may still hold the previous one</li>
+            <li>Clear the browser cache if stylesheets are not updating</li>
+            <li>Verify the package ontology is in the imports closure by querying the <samp>ns</samp> endpoint as shown above</li>
+            <li>Check that you have appropriate permissions to view package resources</li>
+        </ul>
     </div>
-  </div>
-  <div>
-    <h2 id="verify-installation">Verify package installation</h2>
-    <p>After installing a package, verify that it was installed correctly:</p>
-    <ol>
-      <li>Navigate to the administration application</li>
-      <li>Click on <dfn>Ontologies</dfn> in the left navigation menu</li>
-      <li>Verify that the package ontology appears in the list of imported ontologies</li>
-      <li>In the end-user application, check that package-specific classes and properties are available when creating new resources</li>
-      <li>If the package includes stylesheets, verify that custom UI elements are rendering correctly</li>
-    </ol>
-  </div>
-  <div>
-    <h2 id="customize-package-behavior">Customize package behavior</h2>
-    <p>Packages may include custom XSLT stylesheets that affect how data is displayed. You can further customize the behavior by:</p>
-    <ul>
-      <li><a href="../change-layout/#import-stylesheet" target="_blank">Importing additional stylesheets</a> to extend package functionality</li>
-      <li><a href="../change-layout/#override-template" target="_blank">Overriding package templates</a> to customize the rendering of package resources</li>
-      <li>Creating custom views and layouts for package data</li>
-    </ul>
-    <p>See the <a href="../change-layout/" target="_blank">Change layout guide</a> for detailed instructions on stylesheet customization.</p>
-  </div>
-  <div>
-    <h2 id="troubleshooting">Troubleshooting</h2>
-    <h3 id="installation-fails">Installation fails</h3>
-    <p>If package installation fails:</p>
-    <ul>
-      <li>Verify you have Control access to the administration application</li>
-      <li>Check that all package dependencies are met</li>
-      <li>Review the error message for specific issues</li>
-      <li>Ensure the package files are valid and well-formed</li>
-    </ul>
-    <h3 id="package-not-visible">Package functionality not visible</h3>
-    <p>If installed package features are not visible:</p>
-    <ul>
-      <li>Refresh your browser to reload the application</li>
-      <li>Clear the browser cache if stylesheets are not updating</li>
-      <li>Verify the package ontology is imported in the Ontologies section</li>
-      <li>Check that you have appropriate permissions to view package resources</li>
-    </ul>
-  </div>
+    <p class="ldh-body-lg"><a href="../../reference/administration/packages/" target="_blank">Read more about how packages work.</a></p>
 </div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/navigate-data.ttl b/docs/user-guide/navigate-data.ttl
deleted file mode 100644
index aeecff40..00000000
--- a/docs/user-guide/navigate-data.ttl
+++ /dev/null
@@ -1,49 +0,0 @@
-@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix dct:    <http://purl.org/dc/terms/> .
-    
-<> a dh:Item ;
-    dct:title "Navigate data" ;
-    dct:description "Navigate the document hierarchy, related results, and backlinks" ;
-    rdf:_1 <#content> .
-    
-<#content> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Navigate the document hierarchy, related results, and backlinks</p>
-    <p class="text-center">
-        <iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="https://www.youtube.com/embed/5uzpHxu6YNo" width="560"></iframe>
-    </p>
-    <div>
-        <h2 id="document-tree">Document tree</h2>
-        <p>Document tree is a widget that enables quick overview of the application's <a href="../../reference/data-model/documents/#hierarchy">document hierarchy</a>. Each document is shown as a node in the tree; container documents
-            can be expanded to reveal the children documents.</p>
-        <p>The widget can be accessed by sliding the mouse to the left edge of the screen (on responsive layouts, it is always visible).</p>
-        <p>
-            <img alt="Document tree" src="../../uploads/092ae7413af1e6560ca90ae5eed89aea1b4ecd51"></img>
-        </p>
-    </div>
-    <div>
-        <h2 id="class-tree">Class-based navigation</h2>
-        <p>In addition to navigating by document hierarchy, LinkedDataHub lets you navigate by class. The <dfn>Classes</dfn> list in the left sidebar shows the classes (<code>rdf:type</code> values) that occur in your data, each labelled with the number of its instances and ordered with the most-used classes first.</p>
-        <h3>Using class-based navigation</h3>
-        <ol>
-            <li>Open the left sidebar (slide the mouse to the left edge on desktop, or it is always visible on responsive layouts)</li>
-            <li>Find the <dfn>Classes</dfn> list</li>
-            <li>Click on any class to open a dialog listing all instances of that class in your dataspace</li>
-        </ol>
-        <h3>When to use class navigation</h3>
-        <p>Class-based navigation is most useful when:</p>
-        <ul>
-            <li><strong>Finding all instances of a type:</strong> Quickly locate all resources of a particular class, regardless of where they're stored in the document hierarchy</li>
-            <li><strong>Exploring domain concepts:</strong> Browse your data organized by business concepts (e.g., all Customers, all Orders) rather than by container structure</li>
-            <li><strong>Cross-container queries:</strong> View instances that span multiple containers in a single unified view</li>
-        </ul>
-        <p>The classes list is derived from the data itself, so it reflects whatever types are present — no ontology needs to be defined. It respects your access control settings — you'll only see classes and instances you're authorized to access.</p>
-    </div>
-    <div>
-        <h2 id="backlinks">Backlinks</h2>
-        <p>Backlinks are shown in the <a href="../../reference/user-interface/#right-nav">right-side navigation</a> for every resource in <a href="../../reference/user-interface/#layout-modes">property layout mode</a>.
-            They display a list of resources which have properties with the current resource as the object.</p>
-    </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/user-guide/navigate-data/DocTree.gif b/docs/user-guide/navigate-data/DocTree.gif
deleted file mode 100644
index 0e7c4462..00000000
Binary files a/docs/user-guide/navigate-data/DocTree.gif and /dev/null differ
diff --git a/docs/user-guide/query-data-1.webp b/docs/user-guide/query-data-1.webp
new file mode 100644
index 00000000..b1e8157a
Binary files /dev/null and b/docs/user-guide/query-data-1.webp differ
diff --git a/docs/user-guide/query-data.ttl b/docs/user-guide/query-data.ttl
index 973668ad..16d301f5 100644
--- a/docs/user-guide/query-data.ttl
+++ b/docs/user-guide/query-data.ttl
@@ -1,40 +1,103 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
-    
+@prefix sp:     <http://spinrdf.org/sp#> .
+@prefix sd:     <http://www.w3.org/ns/sparql-service-description#> .
+
 <> a dh:Item ;
     dct:title "Query data" ;
-    dct:description "Learn how to query application data with SPARQL, store queries and charts" ;
-    rdf:_1 <#content> .
-    
+    dct:description "Learn how to query dataspace data with SPARQL, and save queries and charts" ;
+    rdf:_1 <#content> ;
+    rdf:_2 <#live-example> ;
+    rdf:_3 <#northwind-query-block> ;
+    rdf:_4 <#content-saving> .
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-        <p class="lead">This guide describes how the application dataset can be queried using SPARQL.</p>
-        <p>The <a href="../../reference/dataspace/#end-user-apps">end-user application</a> dataset can be queried using SPARQL 1.1
-            endpoint, which is available via link in the <a href="../../reference/user-interface/#nav-bar">navigation bar</a>.</p>
-        <p>All forms of SPARQL queries are allowed; SPARQL updates are <em>not</em> allowed. A result limit might apply.</p>
-        <p>For <code>DESCRIBE</code> and <code>CONSTRUCT</code> results, it is possible to switch the
-        <a href="../../reference/user-interface/#layout-modes">layout mode</a> using a button above to the results.</p>
-        <p>
-            <img alt="SPARQL endpoint" src="../../uploads/9e1d4e69c4a0ae30f5fa373db839dc46b3569685"></img>
-        </p>
-        <div>
-            <h2 id="save-query">Saving queries</h2>
-            <p>If you want to save the query string which is currently in the editor, click the <span class="btn btn-save-query btn-save">Save</span> button underneath the editor form. A document creation form will open where the query
-                string will be filled in, you only need to enter the titles of the query and its document. You can then access the query by navigating to the query container via the dropdown in the
-                <a href="../../reference/user-interface/#action-bar" target="_blank">breadcrumb bar</a>.</p>
-            <p>You will not be able to save invalid query strings.</p>
-        </div>
-        <div>
-            <h2 id="save-chart">Saving charts</h2>
-            <p>The SPARQL editor includes an interactive chart pane which can be used to visualize the query results. You can change the chart type, select its category and one or more series.</p>
-            <p>The chart pane supports both graph query (<code>CONSTRUCT</code>, <code>DESCRIBE</code>) and result set query (<code>SELECT</code>, <code>ASK</code>) results. For graph results, the category and series are
-                rendered from resource properties; for result sets, they are rendered from variable names.</p>
-            <p>If you want to save the chart with properties which are currently selected, click the <span class="btn btn-primary btn-save-chart btn-save">Save</span> button underneath the chart pane. That will open two document creation forms: one for
-                the query, and the second one for the chart (as the chart depends on the query). The query string and chart properties will be filled in, you only need to
-                enter the titles of the query and the chart and their document. You can then access the chart by navigating to the chart container via the dropdown in the
-                <a href="../../reference/user-interface/#action-bar" target="_blank">breadcrumb bar</a>.</p>
-            <p>You will not be able to save invalid query strings.</p>
-        </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
+    <p class="ldh-body-lg">Learn how to query dataspace data with SPARQL, and save queries and charts</p>
+    <p>The <a href="../../reference/dataspace/#end-user">end-user dataspace</a> dataset is queried through the SPARQL 1.1
+        endpoint at the dataspace's <samp>sparql</samp> URL (e.g. <samp>https://localhost:4443/sparql</samp>). All forms of SPARQL
+        queries are allowed; SPARQL updates are <em>not</em> allowed.</p>
+    <p>In the dataspace itself there is no separate editor page. A <a href="../../reference/data-model/resources/#queries">query is a
+        resource</a> like any other — it lives in a document, it has a URI, and other resources refer to it. Placing one in a
+        <a href="../../reference/data-model/blocks/">block</a> renders it as an interactive editor: the query text is editable, it runs
+        against the service the query names, and the results render below it in whichever
+        <a href="../../reference/user-interface/#layout-modes">layout mode</a> suits them. Editing the block edits the resource, so a query
+        you refine is saved rather than retyped.</p>
+    <img alt="A query block with its editor open and results below" src="/uploads/6ca06aeac11332cb14d522633b129ae7f3d7691f"></img>
+    <p>This is the demo's top-selling-products query, which drives a chart on the Northwind Traders dataspace:</p>
+    <pre>PREFIX schema: &lt;https://schema.org/&gt;
+
+SELECT DISTINCT ?productName (SUM(?sale) AS ?totalSales)
+WHERE {
+    GRAPH ?orderGraph {
+        ?order schema:orderedItem ?orderItem .
+        ?orderItem schema:orderedItem ?product ;
+                   schema:price ?sale .
+    }
+    GRAPH ?productGraph {
+        ?product schema:name ?productName .
+    }
+}
+GROUP BY ?product ?productName
+ORDER BY DESC(?totalSales)
+LIMIT 5</pre>
+    <p class="exhibit-links">Source: <a href="https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/products.ttl" target="_blank">products.ttl</a> — the same query drives the <a href="https://northwind-traders.demo.linkeddatahub.com/products/" target="_blank">Top selling products chart</a></p>
+    <p>The endpoint is a standard SPARQL 1.1 Protocol service, so it can be queried programmatically as well:</p>
+    <pre>curl -k -G "https://localhost:4443/sparql" \\
+  -H "Accept: application/sparql-results+json" \\
+  --data-urlencode 'query=PREFIX schema: &lt;https://schema.org/&gt; SELECT (COUNT(*) AS ?orders) WHERE { GRAPH ?g { ?order a schema:Order } }'</pre>
+</div>"""^^rdf:XMLLiteral .
+
+<#live-example> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+    <div>
+        <h2 id="live-example">Live example</h2>
+        <p>The block below is not a code snippet — it is an actual query block embedded in this document, executing against the
+            <a href="https://northwind-traders.demo.linkeddatahub.com/" target="_blank">Northwind Traders dataspace</a>'s SPARQL endpoint. The query, the
+            service it runs against, and the block that places it here are three plain RDF resources in this very document.</p>
+    </div>
+</div>"""^^rdf:XMLLiteral .
+
+<#northwind-query-block> a ldh:Object ;
+    dct:title "Query another dataspace" ;
+    rdf:value <#northwind-query> .
+
+<#northwind-query> a sp:Select ;
+    dct:title "Sample of the Northwind Traders dataset" ;
+    sp:text """SELECT *
+WHERE {
+    GRAPH ?g {
+        ?s ?p ?o
+    }
+}
+LIMIT 10""" ;
+    ldh:service <#northwind-service> .
+
+<#northwind-service> a sd:Service ;
+    dct:title "Northwind Traders SPARQL service" ;
+    sd:endpoint <https://northwind-traders.demo.linkeddatahub.com/sparql> ;
+    sd:supportedLanguage sd:SPARQL11Query .
+
+<#content-saving> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+    <div>
+        <h2 id="save-query">Saving queries</h2>
+        <p>To save the query string currently in the editor, click the <span class="ac-btn in-neutral ap-outline sz-md">Save</span> button underneath the editor form. A document creation form opens with the query
+            string pre-filled; you only need to supply titles for the query and its document. You can then access the query by navigating to the query container via the dropdown in the
+            <a href="../../reference/user-interface/#action-bar" target="_blank">breadcrumb bar</a>.</p>
+        <p>The editor will not save a query that is not valid SPARQL 1.1.</p>
+    </div>
+    <div>
+        <h2 id="save-chart">Saving charts</h2>
+        <p>The SPARQL editor includes an interactive chart pane which can be used to visualize the query results. You can change the chart type, select its category and one or more series.</p>
+        <p>The chart pane handles both graph results (<code>CONSTRUCT</code>, <code>DESCRIBE</code>) and result sets (<code>SELECT</code>). For graph results, the category and series are
+            rendered from resource properties; for result sets, they are rendered from variable names.</p>
+        <p>To save the chart with the properties currently selected, click the <span class="ac-btn in-primary ap-solid sz-md">Save</span> button underneath the chart pane. Two document creation forms open: one for
+            the query, one for the chart that depends on it. The query string and chart properties are pre-filled; you only need to
+            supply titles for the query, the chart and their document. You can then access the chart by navigating to the chart container via the dropdown in the
+            <a href="../../reference/user-interface/#action-bar" target="_blank">breadcrumb bar</a>.</p>
+    </div>
+    <p class="ldh-body-lg">See charts in action in the <a href="../../tutorial/insight/">Insight</a> tutorial stage, or read more about <a href="../../reference/data-model/resources/#charts">charts</a>.</p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/query-data/sparql endpoint.jpg b/docs/user-guide/query-data/sparql endpoint.jpg
deleted file mode 100644
index 597c57f0..00000000
Binary files a/docs/user-guide/query-data/sparql endpoint.jpg and /dev/null differ
diff --git a/docs/user-guide/search-data.ttl b/docs/user-guide/search-data.ttl
deleted file mode 100644
index e52adf39..00000000
--- a/docs/user-guide/search-data.ttl
+++ /dev/null
@@ -1,28 +0,0 @@
-@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix dct:    <http://purl.org/dc/terms/> .
-    
-<> a dh:Item ;
-    dct:title "Search data" ;
-    dct:description "Search for resources using text keywords" ;
-    rdf:_1 <#content> .
-    
-<#content> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Search for resources using text keywords</p>
-    <div>
-        <h2 id="text-search">Text search</h2>
-        <p>You can lookup resources by typing a phrase (it does not have to be complete, start with a few letters) into the <a href="../../reference/user-interface/#document-tree">search box</a> at the top of the left sidebar.</p>
-        <p>A dropdown list will appear if there are any matches. Use up/down keys or mouse click to select one of the results, and you will be redirected to its document.</p>
-        <p>The matching is done by looking for substrings using SPARQL <code>regex()</code> in common literal properties such as <code>dct:title</code>, <code>rdfs:label</code>, <code>foaf:name</code> etc. You can find the exact query in <samp>Queries / Select labelled</samp>.</p>
-        <p>The same widget is used for autocomplete inputs in the <a href="../../reference/user-interface/#action-bar">create/edit forms</a>.</p>
-        <p>
-            <img alt="SPARQL endpoint" src="../../uploads/8c4383351477a5405a9883d23d9255670b9396f7"></img>
-        </p>
-    </div>
-    <div>
-        <h2 id="structured-search">Structured search</h2>
-        <p>You can use SPARQL to <a href="../query-data/">query data</a> from the application's SPARQL service.</p>
-    </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
diff --git a/docs/user-guide/search-data/search.png b/docs/user-guide/search-data/search.png
deleted file mode 100644
index 3bc99c3d..00000000
Binary files a/docs/user-guide/search-data/search.png and /dev/null differ
diff --git a/docs/user-guide/upload-file-1.mp4 b/docs/user-guide/upload-file-1.mp4
new file mode 100644
index 00000000..1ad08e03
Binary files /dev/null and b/docs/user-guide/upload-file-1.mp4 differ
diff --git a/docs/user-guide/upload-file.ttl b/docs/user-guide/upload-file.ttl
index f3347fd6..4b28d62f 100644
--- a/docs/user-guide/upload-file.ttl
+++ b/docs/user-guide/upload-file.ttl
@@ -1,61 +1,84 @@
 @prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
 @prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
 @prefix dct:    <http://purl.org/dc/terms/> .
 
 <> a dh:Item ;
     dct:title "Upload file" ;
     dct:description "Learn how to upload files to LinkedDataHub" ;
     rdf:_1 <#content> .
-    
+
 <#content> a ldh:XHTML ;
     rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">Learn how to upload files to LinkedDataHub</p>
-    <div class="tabbable">
-        <ul class="nav nav-tabs">
-            <li class="active"><a>User interface</a></li>
-            <li><a>Command line interface</a></li>
-        </ul>
-        <div class="tab-content">
-            <div class="tab-pane active">
-                <div>
-                    <ol>
-                        <li>Click the <span class="btn btn-primary create-action">Create <span class="caret"></span></span> dropdown on the bottom of the page</li>
-                        <li>Click on <samp>File</samp> in the drop-down list that appears</li>
-                        <li>Fill out the mandatory <dfn>File</dfn> fields in the form:
-                            <dl>
-                                <dt>FileName</dt>
-                                <dd>Select file from your filesystem</dd>
-                                <dt>Title</dt>
-                                <dd>Enter file title</dd>
-                            </dl>
-                        </li>
-                        <li>Click <span class="btn btn-primary btn-save">Save</span></li>
-                    </ol>
-                    <p>See how below:</p>
-                    <p>
-                        <object data="../../uploads/7db898019986d1aa0bfee7bd1423874d82cb0233" type="video/webm"></object>
-                    </p>
-                </div>
+    <p class="ldh-body-lg">Learn how to upload files to LinkedDataHub</p>
+    <div>
+        <h2 id="upload">Upload a file</h2>
+        <div class="ac-tabs or-horizontal">
+            <div class="ac-tablist sz-md va-line" role="tablist">
+                <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+                <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
             </div>
-            <div class="tab-pane">
-                <div>
-                    <p>Replace <samp>owner_cert_password</samp> with its value from the <samp>.env</samp> file and execute the following command:</p>
-                    <pre>add-file.sh \\
--b "https://localhost:4443/" \\
--f ./ssl/owner/cert.pem \\
--p "$owner_cert_password" \\
---title "$title" \\
---file "$filename" \\
---content-type "$content_type"</pre>
+            <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
+                    <div>
+                        <p>Any document you can write to takes files dropped from your desktop. What a drop does is decided per file:</p>
+                        <dl>
+                            <dt>RDF</dt>
+                            <dd>A file in one of the triple syntaxes — <code>.ttl</code>, <code>.nt</code>, <code>.rdf</code>, <code>.owl</code> or <code>.jsonld</code> — is <em>imported as data</em>: its triples are added to the document's graph</dd>
+                            <dt>File</dt>
+                            <dd>Anything else is <em>uploaded to the document</em>: the bytes are stored content-addressed under <code>uploads/</code> and the document describes them as a file, titled after the filename</dd>
+                        </dl>
+                        <ol>
+                            <li>Open the document that should hold the file</li>
+                            <li>Drag the file over the page. An overlay appears, naming both outcomes: <samp>RDF</samp> imported as data, <samp>File</samp> uploaded to this document</li>
+                            <li>Drop it. The document reloads in <samp>Read</samp> mode with the file among its resources; an image is shown inline</li>
+                        </ol>
+                        <video aria-label="Dropping a file onto a document" controls="controls" preload="metadata" src="/uploads/798343ac386c0c67027a5fda6105547238d4b038"></video>
+                        <p>A file larger than the instance's request limit is refused before it reaches the platform, and the page says so without navigating away.</p>
+                        <p>Alternatively, upload through a form:</p>
+                        <ol>
+                            <li>Click the <span class="ac-btn in-primary ap-solid sz-md">Create <span aria-hidden="true" class="msi caret">expand_more</span></span> dropdown at the bottom of the page</li>
+                            <li>Click on <samp>File</samp> in the dropdown list that appears</li>
+                            <li>Fill out the mandatory <dfn>File</dfn> fields in the form:
+                                <dl>
+                                    <dt>Filename</dt>
+                                    <dd>Select file from your filesystem</dd>
+                                    <dt>Title</dt>
+                                    <dd>Enter file title</dd>
+                                </dl>
+                            </li>
+                            <li>Click <span class="ac-btn in-primary ap-solid sz-sm">Save</span></li>
+                        </ol>
+                    </div>
+                </div>
+            <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
+                    <div>
+                        <p>A file is uploaded to the document that will hold it, so create that document first. Uploading Nancy Davolio's portrait from the Northwind demo:</p>
+                        <pre>doc=$(ldh create item \\
+  --title "Nancy Davolio" \\
+  --container "${LDH_BASE}employees/")
+
+ldh add file \\
+  --title "Nancy Davolio" \\
+  --file employees/nancy.jpg \\
+  --content-type "image/jpeg" \\
+  "$doc"</pre>
+                        <p>The command prints the content-addressed URI of the upload as its only output:</p>
+                        <pre>https://localhost:4443/uploads/35fd362792e8c4bc3560a6de02f25ee551d68d02</pre>
+                        <p>That URI is stable across instances — it is derived from the file content alone — which is what lets the
+                            <a href="../../tutorial/media/" target="_blank">Northwind CSVs</a> reference their images by hash before they are even uploaded.
+                            <code>--content-type</code> is optional — the media type is detected from the file when it is not given.</p>
+                    </div>
                 </div>
-            </div>
         </div>
     </div>
-    <div class="alert alert-warning">
-        <h4>Note about ontology files</h4>
-        <p>If you upload an ontology file (RDF/OWL), be aware that it will not be automatically loaded via <code>owl:imports</code> declarations.
-        This is a technical limitation to prevent circular dependencies during system initialization.</p>
-        <p>For more information on working with ontologies, see the <a href="../../reference/administration/ontologies/">ontologies reference documentation</a>.</p>
+    <div class="ac-alert va-warning" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">warning</span></span>
+        <div class="ac-alert-body">
+            <span class="ac-alert-title">Note about ontology files</span>
+            <p class="ac-alert-text">If you upload an ontology file (RDF/OWL), be aware that it will not be automatically loaded via <code>owl:imports</code> declarations.
+            This is deliberate: resolving imports at upload time would risk circular dependencies during system initialization.</p>
+            <p class="ac-alert-text">For more information on working with ontologies, see the <a href="../../reference/administration/ontologies/">ontologies reference documentation</a>.</p>
+        </div>
     </div>
-</div>"""^^rdf:XMLLiteral .
\ No newline at end of file
+    <p class="ldh-body-lg"><a href="../../reference/dataset/#hierarchical-uris" target="_blank">Read more about the content-addressed uploads namespace.</a></p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/user-guide/upload-file/Upload.webm b/docs/user-guide/upload-file/Upload.webm
deleted file mode 100644
index cafd026a..00000000
Binary files a/docs/user-guide/upload-file/Upload.webm and /dev/null differ
diff --git a/docs/user-guide/version-history-1.webp b/docs/user-guide/version-history-1.webp
new file mode 100644
index 00000000..e38124db
Binary files /dev/null and b/docs/user-guide/version-history-1.webp differ
diff --git a/docs/user-guide/version-history-2.webp b/docs/user-guide/version-history-2.webp
new file mode 100644
index 00000000..3063f783
Binary files /dev/null and b/docs/user-guide/version-history-2.webp differ
diff --git a/docs/user-guide/version-history.ttl b/docs/user-guide/version-history.ttl
new file mode 100644
index 00000000..f901deb9
--- /dev/null
+++ b/docs/user-guide/version-history.ttl
@@ -0,0 +1,62 @@
+@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
+@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
+@prefix dct:    <http://purl.org/dc/terms/> .
+
+<> a dh:Item ;
+    dct:title "Version history" ;
+    dct:description "View, compare and restore document versions" ;
+    rdf:_1 <#content> .
+
+<#content> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+    <p class="ldh-body-lg">View, compare and restore document versions</p>
+    <div class="ac-alert va-informative" role="status">
+        <span class="ac-alert-ic"><span aria-hidden="true" class="msi outline">info</span></span>
+        <div class="ac-alert-body">
+            <p class="ac-alert-text">Version history is available in dataspaces with <a href="../../reference/versioning/">versioning</a> enabled — see the <a href="../../reference/versioning/#setup">setup instructions</a>.</p>
+        </div>
+    </div>
+    <div class="ac-tabs or-horizontal">
+        <div class="ac-tablist sz-md va-line" role="tablist">
+            <button aria-controls="user-interface-pane" aria-selected="true" class="ac-tab is-on" id="user-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">User interface</span></button>
+            <button aria-controls="command-line-interface-pane" aria-selected="false" class="ac-tab" id="command-line-interface-tab" role="tab" type="button"><span class="ac-tab-lbl">Command line interface</span></button>
+        </div>
+        <div aria-labelledby="user-interface-tab" class="ac-tabpanel" id="user-interface-pane" role="tabpanel">
+    <div>
+        <h2 id="open-history">Open the history</h2>
+        <img alt="The History dialog on a Northwind order, versions with agent attribution" src="/uploads/e631baa8a512cf8eec9ad43806bf44d06d5354c0"></img>
+        <p>Click the document's last-modified timestamp in the <a href="../../reference/user-interface/#action-bar">action bar</a>. The
+            <dfn>History</dfn> dialog opens with the document's versions listed newest first, each showing its datetime and the agent who authored it.
+            The version you are currently viewing is marked.</p>
+        <p>Click a version to view the document as it was at that point. A notice banner reminds you that you are viewing a historical version and
+            links back to the current one. Historical versions are read-only.</p>
+    </div>
+    <div>
+        <h2 id="compare-versions">Compare versions</h2>
+        <img alt="A version diff on an order document — added/removed/changed borders and the color legend" src="/uploads/1eb2fa845c5a9162e432a05f2a2ca8ccf4e6e7cf"></img>
+        <p>In the History dialog, select a <dfn>From</dfn> and a <dfn>To</dfn> version to compare. The diff renders on the document page:</p>
+        <ul>
+            <li>added, removed and changed parts are marked with distinct borders, explained by a color legend</li>
+            <li>changed property values are marked individually</li>
+            <li>a changed XHTML block stacks its old content above the new</li>
+        </ul>
+        <p>The diff is encoded in the URL, so browser back and forward re-render it. Reloading the page shows the plain historical version
+            instead.</p>
+    </div>
+    <div>
+        <h2 id="restore-version">Restore a version</h2>
+        <p>In the History dialog, click <span class="ac-btn in-neutral ap-solid sz-sm">Restore</span> on the version you want to bring back and confirm. The version's
+            content is written to the live document as a new version. Nothing is rewritten: the versions in between stay in the history.</p>
+        <p>Restoring requires write access to the document; the button is not offered on the version you are currently viewing.</p>
+    </div>
+        </div>
+        <div aria-labelledby="command-line-interface-tab" class="ac-tabpanel" hidden="hidden" id="command-line-interface-pane" role="tabpanel">
+        <p>The <a href="../../reference/command-line-interface/">CLI</a> addresses the same Memento roles as mutually exclusive options of <samp>ldh get</samp>:
+            <code>--timemap</code> retrieves the version history, <code>--version &lt;sha&gt;</code> retrieves a historical version, and <code>--timegate</code>
+            (with an optional <code>--datetime</code>) prints the URI of the version that was current at the given time. For example, with the document's URL in <samp>$doc</samp>:</p>
+        <pre>ldh get --accept text/turtle --timemap "$doc"</pre>
+        </div>
+    </div>
+    <p class="ldh-body-lg"><a href="../../reference/versioning/">Read more about versioning and the Memento protocol.</a></p>
+</div>"""^^rdf:XMLLiteral .
diff --git a/docs/validate-documents.sh b/docs/validate-documents.sh
index d0df676e..7e4b2cbc 100755
--- a/docs/validate-documents.sh
+++ b/docs/validate-documents.sh
@@ -1 +1,5 @@
-find . -name '*.ttl' -type f -exec echo {} \; -exec trig --validate {} \;
\ No newline at end of file
+find . -name '*.ttl' -type f -exec echo {} \; -exec trig --validate {} \;
+
+# riot checks rdf:XMLLiteral well-formedness; canonical form is only enforced
+# up to Jena 4.7.0, so it is checked separately
+"$(dirname "$0")"/../check-xmlliterals.sh "$(dirname "$0")"
diff --git a/lib/install.mk b/lib/install.mk
new file mode 100644
index 00000000..363ce0da
--- /dev/null
+++ b/lib/install.mk
@@ -0,0 +1,35 @@
+# Shared by every app Makefile. `make install` prompts for the dataspace and the owner's certificate,
+# exports them as the LDH_* variables the ldh CLI reads, and runs the app's install.sh in that
+# environment. No value travels on a command line, so the password needs no escaping and is not
+# visible in the process list.
+#
+# An app Makefile sets the defaults it wants to offer, then includes this file:
+#
+#   CERT_PATH_DEFAULT = ../../../LinkedDataHub/ssl/owner/keystore.p12
+#   include ../../lib/install.mk
+#
+# To install unattended, export the variables and run ./install.sh yourself.
+
+SHELL := /bin/bash
+
+BASE_URL_DEFAULT ?= https://localhost:4443/
+CERT_PATH_DEFAULT ?= ../../LinkedDataHub/ssl/owner/keystore.p12
+PROXY_URL_DEFAULT ?= https://localhost:5443/
+
+.PHONY: install
+
+install:
+	@read -p "Enter Base URL [$(BASE_URL_DEFAULT)]: " BASE_URL; \
+	read -p "Enter Certificate Path [$(CERT_PATH_DEFAULT)]: " CERT_PATH; \
+	read -s -p "Enter Certificate Password (required): " PASSWORD; \
+	echo ""; \
+	if [ -z "$${PASSWORD}" ]; then \
+		echo "Password cannot be empty. Aborting."; \
+		exit 1; \
+	fi; \
+	read -p "Enter Proxy URL (optional) [$(PROXY_URL_DEFAULT)]: " PROXY_URL; \
+	export LDH_BASE="$${BASE_URL:-$(BASE_URL_DEFAULT)}"; \
+	export LDH_CERT_FILE="$${CERT_PATH:-$(CERT_PATH_DEFAULT)}"; \
+	export LDH_CERT_PASSWORD="$${PASSWORD}"; \
+	if [ -n "$${PROXY_URL}" ]; then export LDH_PROXY="$${PROXY_URL}"; fi; \
+	./install.sh
diff --git a/lib/ldh-app.sh b/lib/ldh-app.sh
new file mode 100755
index 00000000..6401090d
--- /dev/null
+++ b/lib/ldh-app.sh
@@ -0,0 +1,76 @@
+#!/usr/bin/env bash
+# Shared by every install.sh in this repository. Sourced, not run.
+#
+# The ldh CLI reads its connection from the environment — LDH_BASE, LDH_CERT_FILE, LDH_CERT_PASSWORD
+# and LDH_PROXY — so the installers put no credential on any command line: nothing to escape, nothing
+# in the process list. `make install` prompts for the four and exports them; an unattended run exports
+# them itself and runs install.sh directly.
+
+# Fails with a message naming the variable that is missing, resolves the keystore path and defaults
+# the proxy to the base itself, as the installers always did.
+ldh_app_require_env() {
+    : "${LDH_BASE:?Base URI of the dataspace, e.g. https://localhost:4443/}"
+    : "${LDH_CERT_FILE:?PKCS12 keystore of the owner, e.g. ../../../LinkedDataHub/ssl/owner/keystore.p12}"
+    : "${LDH_CERT_PASSWORD:?Password of the keystore}"
+    command -v ldh >/dev/null || { echo "ldh CLI not found on PATH — see README.md" >&2; exit 1; }
+    LDH_CERT_FILE=$(realpath "$LDH_CERT_FILE")
+    export LDH_CERT_FILE
+    export LDH_PROXY="${LDH_PROXY:-$LDH_BASE}"
+}
+
+# Prints the banner of an install step.
+ldh_app_step() {
+    printf "\n### %s\n\n" "$1"
+}
+
+# The admin dataspace of a URI: the same host with the admin. subdomain prefix.
+ldh_app_admin_uri() {
+    echo "$1" | sed 's|://|://admin.|'
+}
+
+# Installs $1/ns.ttl into the admin app's ontologies/namespace/ document, which LinkedDataHub serves
+# at ${LDH_BASE}ns: resets the document with $1/patch-ontology.ru (everything but its own description),
+# appends ns.ttl with @base <${LDH_BASE}ns> so its : prefix resolves to the end-user namespace, and
+# clears the ontology from memory so it reloads. Re-running converges.
+ldh_app_import_ns() {
+    local model_dir="$1"
+    local admin_base admin_proxy ontology_doc
+    admin_base=$(ldh_app_admin_uri "$LDH_BASE")
+    admin_proxy=$(ldh_app_admin_uri "$LDH_PROXY")
+    ontology_doc="${admin_base}ontologies/namespace/"
+
+    printf "Resetting namespace ontology document: %s\n" "$ontology_doc"
+    { echo "BASE <${ontology_doc}>"; cat "$model_dir/patch-ontology.ru"; } | ldh patch \
+        --proxy "$admin_proxy" \
+        "$ontology_doc"
+
+    printf "Appending ns.ttl to the namespace ontology\n"
+    { echo "@base <${LDH_BASE}ns> ."; cat "$model_dir/ns.ttl"; } | ldh post \
+        --proxy "$admin_proxy" \
+        -t text/turtle \
+        "$ontology_doc"
+
+    printf "Clearing ontology from memory: %sns#\n" "$LDH_BASE"
+    ldh admin clear ontology \
+        -b "$admin_base" \
+        --proxy "$admin_proxy" \
+        --ontology "${LDH_BASE}ns#"
+}
+
+# Runs one ldh import csv per row of the manifest $2 — query_filename,csv_filename,target,title, paths
+# relative to $1: it adds the CONSTRUCT query, uploads the CSV into the target document and creates
+# the import that maps one into the other. Every run creates a new import; the documents the imports
+# write are the same, so the data converges.
+ldh_app_import_csv() {
+    local app_dir="$1" manifest="$2"
+    local query_filename csv_filename target_path title
+    while IFS=, read -r query_filename csv_filename target_path title; do
+        [ -n "$query_filename" ] || continue
+        printf "Importing %s into %s\n" "$csv_filename" "${LDH_BASE}${target_path}"
+        ldh import csv \
+            --title "$title" \
+            --query-file "$app_dir/$query_filename" \
+            --csv-file "$app_dir/$csv_filename" \
+            "${LDH_BASE}${target_path}" < /dev/null
+    done < <(tail -n +2 "$manifest")
+}
diff --git a/packages/.ldhignore b/packages/.ldhignore
index 956cb51c..b133882c 100644
--- a/packages/.ldhignore
+++ b/packages/.ldhignore
@@ -1,4 +1,3 @@
-install.sh
 Makefile
 README.md
-update-folder.sh
+install.sh
diff --git a/packages/Makefile b/packages/Makefile
index c866ee54..6485482e 100644
--- a/packages/Makefile
+++ b/packages/Makefile
@@ -1,23 +1,3 @@
-SHELL := /bin/bash
+BASE_URL_DEFAULT = https://packages.linkeddatahub.com/
 
-BASE_URL_DEFAULT=https://packages.linkeddatahub.com/
-CERT_PATH_DEFAULT=../../../LinkedDataHub/ssl/owner/cert.pem
-PROXY_URL_DEFAULT=https://localhost:5443/
-
-install:
-	@read -p "Enter Base URL [$(BASE_URL_DEFAULT)]: " BASE_URL; \
-	BASE_URL=$${BASE_URL:-$(BASE_URL_DEFAULT)}; \
-	read -p "Enter Certificate Path [$(CERT_PATH_DEFAULT)]: " CERT_PATH; \
-	CERT_PATH=$${CERT_PATH:-$(CERT_PATH_DEFAULT)}; \
-	read -s -p "Enter Certificate Password (required): " PASSWORD; \
-	echo ""; \
-	if [ -z "$${PASSWORD}" ]; then \
-		echo "Password cannot be empty. Aborting."; \
-		exit 1; \
-	fi; \
-	read -p "Enter Proxy URL (optional) [$(PROXY_URL_DEFAULT)]: " PROXY_URL; \
-	if [ -n "$${PROXY_URL}" ]; then \
-		./install.sh "$${BASE_URL}" "$${CERT_PATH}" "$${PASSWORD}" "$${PROXY_URL}"; \
-	else \
-		./install.sh "$${BASE_URL}" "$${CERT_PATH}" "$${PASSWORD}"; \
-	fi
+include ../lib/install.mk
diff --git a/packages/README.md b/packages/README.md
index 9d8074c5..13643fab 100644
--- a/packages/README.md
+++ b/packages/README.md
@@ -9,42 +9,56 @@ This directory contains reusable packages for LinkedDataHub dataspaces. Packages
 Each package consists of:
 
 ```
-packages/<package-name>/
+packages/<package-path>/
 ├── ns.ttl         # Ontology with property views (ldh:view/ldh:inverseView)
-└── layout.xsl     # XSLT stylesheet with custom templates
+└── <name>.xsl     # XSLT stylesheet with custom templates
 ```
 
-Package metadata is Linked Data that resolves from the package URI (e.g., `https://packages.linkeddatahub.com/skos/#this`).
+The directory path is the package URI: a package under `packages/a/b/` is published at
+`https://packages.linkeddatahub.com/a/b/`, so a path may carry as many segments as the grouping
+needs. The stylesheet filename is not a convention — it is whatever the package's `ac:stylesheet`
+names.
 
-### Example: SKOS Package
+Package metadata is Linked Data that resolves from the package URI (e.g., `https://packages.linkeddatahub.com/editor/taxonomy/#this`).
+
+### Example: the taxonomy editor package
 
 ```
-packages/skos/
+packages/editor/taxonomy/
 ├── ns.ttl         # SKOS vocabulary with ldh:view attachments to properties
-└── layout.xsl     # XSLT templates for SKOS concepts, schemes, collections
+└── skos.xsl       # XSLT templates for SKOS concepts, schemes, collections
 ```
 
-Metadata for this package resolves from `https://packages.linkeddatahub.com/skos/#this`.
+Metadata for this package resolves from `https://packages.linkeddatahub.com/editor/taxonomy/#this`.
+The package is named for what it does; its stylesheet is named for the vocabulary it speaks.
 
 ## How Packages Work
 
 ### 1. Package Metadata
 
-Package metadata resolves as Linked Data from the package URI using standard LinkedDataHub properties:
+Package metadata resolves as Linked Data from the package URI using standard LinkedDataHub properties.
+The descriptor is the `foaf:primaryTopic` of the package's own document, `packages/editor/taxonomy.ttl`,
+which `ldh push` PUTs to `https://packages.linkeddatahub.com/editor/taxonomy/`:
 
 ```turtle
-@prefix lapp: <https://w3id.org/atomgraph/linkeddatahub/apps#> .
-@prefix ldt:  <https://www.w3.org/ns/ldt#> .
+@prefix lds:  <https://w3id.org/atomgraph/linkeddatahub/dataspaces#> .
 @prefix ac:   <https://w3id.org/atomgraph/client#> .
+@prefix dct:  <http://purl.org/dc/terms/> .
 
-<https://packages.linkeddatahub.com/skos/#this> a lapp:Package ;
-    rdfs:label "SKOS Package" ;
-    dct:description "SKOS vocabulary support with custom templates" ;
-    ldt:ontology <https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/master/packages/skos/ns.ttl#> ;
-    ac:stylesheet <https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/master/packages/skos/layout.xsl> .
+<#this> a lds:Package ;
+    dct:title "Taxonomy Editor" ;
+    dct:description "Turns a dataspace into a taxonomy editor: ..." ;
+    lds:ontology <ns/> ;
+    ac:stylesheet <https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/refs/heads/develop/packages/editor/taxonomy/skos.xsl> .
 ```
 
-**Note**: Uses standard `ldt:ontology` and `ac:stylesheet` properties instead of inventing new ones.
+`lds:ontology <ns/>` is registry-relative: the same push PUTs `ns.ttl` as the `ns/` document beside the
+descriptor, so the ontology is served by the registry itself. `ac:stylesheet` is the raw file in this
+repository, on the branch the registry was published from — a branch tip, not a release, so a push to
+that branch changes the rendering of every dataspace that imports the package next time it
+materializes the copy (see [What the Declaration Does](#what-the-declaration-does)).
+
+**Note**: Uses standard `lds:ontology` and `ac:stylesheet` properties instead of inventing new ones.
 
 ### 2. Ontology (`ns.ttl`)
 
@@ -55,7 +69,9 @@ Contains two layers:
 Imports the external vocabulary using `owl:imports`:
 
 ```turtle
-<https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/master/packages/skos/ns.ttl#> a owl:Ontology ;
+@prefix : <#> .   # resolves against the ns/ document the registry serves it as
+
+: a owl:Ontology ;
     owl:imports <http://www.w3.org/2004/02/skos/core> .
 ```
 
@@ -80,191 +96,143 @@ ns:SelectNarrowerConcepts a sp:Select ;
 
 Use `ldh:view` for forward relationships (resource has property) or `ldh:inverseView` for inverse relationships (other resources point to this resource via property).
 
-### 3. XSLT Stylesheet (`layout.xsl`)
+### 3. XSLT Stylesheet (named by `ac:stylesheet`)
 
-XSLT templates using system modes to override default rendering:
+XSLT template rules in the platform's **open modes**:
 
 ```xsl
-<!-- Hide properties from default property list -->
-<xsl:template match="skos:narrower | skos:broader" mode="bs2:PropertyList"/>
-
-<!-- Override XHTML head elements -->
-<xsl:template match="*" mode="xhtml:Style">
-    <!-- Custom styles -->
+<!-- Hide the hierarchy predicates from the property list: the concept tree shows them -->
+<xsl:template match="skos:narrower | skos:broader" mode="ac:PropertyEditor"/>
+
+<!-- Render a concept's tree node as expandable, keeping the platform's markup -->
+<xsl:template match="*[@rdf:about][rdf:type/@rdf:resource = '&skos;Concept']" mode="ldh:TreeNode" priority="1">
+    <xsl:next-match>
+        <xsl:with-param name="expandable" select="true()"/>
+    </xsl:next-match>
 </xsl:template>
 ```
 
-Available system modes include `bs2:*` (Bootstrap 2.3.2 components), `xhtml:*` (XHTML elements), and others.
+The package stylesheet is composed into the platform's import tree right above `hooks.xsl`, the module
+that declares the open modes and their generic fallbacks, and below everything else. Import precedence
+beats template priority, so that position is the contract: a package rule outranks a fallback in an open
+mode whatever the priorities, and loses to any rule in a sealed mode whatever its own priority. A package
+cannot replace the page head, the content body, a typed rule or a global - those are sealed by
+precedence, not by policy.
+
+An open mode is a leaf: it renders or contributes for one node and carries no control flow. The open
+modes, with what a rule in each one owes:
+
+| Mode | What it renders | A package rule |
+|---|---|---|
+| `ldh:TreeNode` | one tree node | replaces the fallback, or decorates it with `xsl:next-match` |
+| `ac:PropertyEditor` | one resource's property list, or one statement row | replaces or decorates; an empty rule hides |
+| `ldh:ContentColumn` | the navigation slot beside the content body | fills it; nothing to inherit |
+| `ldh:TreeChildrenLoad` | (client) the children fetch for one tree node | replaces |
+| `ldh:RowHook` | (client) factories of deferred work for one rendered row | contributes; nothing to inherit |
+| `ac:FormControl` | one property's form control, or one value's | replaces the generic control for the package's property or datatype, or decorates it with `xsl:next-match` |
+| `ac:PropertyListValue` | one value cell in the property list | replaces or decorates |
+| `ac:ValueAnnotations` | the term-kind / datatype / language chip beside a value | replaces or decorates |
+| `ldh:TypeControl`, `ac:property-label`, `ac:object-label`, the unnamed mode | the property row and how a value is labelled and linked | replaces or decorates |
+
+`hooks.xsl` in the platform sources carries the same table beside the declarations; the value leaves are
+in `imports/values.xsl`, which it imports. The platform's own vocabulary modules (`imports/rdf.xsl`,
+`imports/dct.xsl`...) sit above the packages, so a package specialises core's *generic* rendering and
+cannot contradict how core renders its own terms. The component modes (`ldh:Modal`, `ac:FieldShell`...),
+the `ldh:Combobox` widget and the library in `imports/default.xsl` (keys, params, functions) are sealed.
 
 ## Installing Packages
 
-### Method 1: CLI Script
-
-```bash
-install-package.sh \
-  -b https://localhost:4443/ \
-  -f ssl/owner/cert.pem \
-  -p Password \
-  --package https://packages.linkeddatahub.com/skos/#this
-```
-
-### Method 2: From Application Install Script
-
-```bash
-# In LinkedDataHub-Apps/demo/skos/install.sh
-install-package.sh \
-  -b "$base" \
-  -f "$cert_pem_file" \
-  -p "$cert_password" \
-  --package "https://packages.linkeddatahub.com/skos/#this"
-```
-
-## Prerequisites
-
-Before installing packages, **master stylesheets** must exist in the webapp directory:
-
-- `/static/xsl/layout.xsl` - End-user application master stylesheet
-- `/static/xsl/admin/layout.xsl` - Admin application master stylesheet
-
-Default templates are provided at:
-
-```
-src/main/webapp/static/xsl/layout.xsl
-src/main/webapp/static/xsl/admin/layout.xsl
-```
-
-These files should be deployed with the application. End-user stylesheet contains:
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<xsl:stylesheet version="3.0"
-    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-    xmlns:xs="http://www.w3.org/2001/XMLSchema"
-    exclude-result-prefixes="xs">
-
-    <!-- System stylesheet (lowest priority) -->
-    <xsl:import href="../com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/layout.xsl"/>
-
-    <!-- Package stylesheets will be added here by InstallPackage endpoint -->
-
-</xsl:stylesheet>
-```
-
-## What Installation Does
-
-When you install a package, the system:
-
-1. **Fetches package metadata** from the package URI
-2. **Hashes the package ontology URI** using SHA-1 to create a unique document slug
-3. **Downloads package ontology** (`ns.ttl`) and PUTs it as a document to `${admin_base}ontologies/{hash}/` where `{hash}` is the SHA-1 hash of the ontology URI
-4. **Adds owl:imports** from the namespace ontology to the package ontology in the namespace graph (`${admin_base}ontologies/namespace/`)
-5. **Clears and reloads** the namespace ontology from cache to pick up the new imports
-6. **Downloads package stylesheet** (`layout.xsl`) and saves it to `/static/{package-path}/layout.xsl` where `{package-path}` is derived from the package URI (e.g., `com/linkeddatahub/packages/skos/` for `https://packages.linkeddatahub.com/skos/`)
-7. **Updates master stylesheet** at `/static/xsl/layout.xsl` by adding import:
-   ```xml
-   <xsl:import href="../com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/layout.xsl"/>  <!-- System -->
-   <xsl:import href="../com/linkeddatahub/packages/skos/layout.xsl"/>  <!-- Package (added) -->
-   ```
-8. **Adds import to application** (TODO - currently manual): `<app> ldh:import <package-uri>`
-
-**Note**: The master stylesheet must already exist or installation will fail with `InternalServerErrorException`.
-
-**Important**: After installing or uninstalling a package, you must restart the Docker service for XSLT stylesheet changes to take effect:
+The declaration *is* the installation. A dataspace imports a package by carrying a single
+`ldh:import` triple in its settings, and the `packages` CLI group reads the registry and writes that
+triple:
 
 ```bash
-docker-compose restart linkeddatahub
+ldh packages list
+ldh packages add --package https://packages.linkeddatahub.com/editor/taxonomy/#this
+ldh packages remove --package https://packages.linkeddatahub.com/editor/taxonomy/#this
 ```
 
-Do not use `--force-recreate` as that would overwrite the stylesheet file changes.
-
-## Architecture
-
-### Installation-Time vs Runtime
-
-Packages use **installation-time composition**, NOT runtime composition:
-
-- ✅ Package content is integrated during installation (via JAX-RS endpoints)
-- ✅ Ontology and XSLT are pre-composed before being loaded
-- ✅ No runtime overhead
-- ❌ No dynamic package loading at request time
+`packages list` prints one tab-separated line per package — state, URI, title. The registry defaults
+to `https://packages.linkeddatahub.com/`; `--registry` overrides it. It is read through the
+dataspace's Linked Data proxy rather than fetched directly, so `list` needs `--base` as much as
+the other two do.
 
-### JAX-RS Endpoints
+The dataspace settings modal offers the same thing as a checkbox per package, saved with the rest
+of the settings in one `PATCH`.
 
-**On the admin application**
-
-- **POST `/packages/install`** - Installs a package
-  - Parameter: `package-uri` (form-urlencoded)
-  - Requires owner/admin authentication
-  - Delegates authenticated agent credentials for PUT requests
-
-- **POST `/packages/uninstall`** - Uninstalls a package
-  - Parameter: `package-uri` (form-urlencoded)
-  - Requires owner/admin authentication
-
-### File System Structure
-
-After installing the SKOS package:
-
-```
-webapp/
-├── static/
-│   ├── com/
-│   │   └── linkeddatahub/
-│   │       └── packages/
-│   │           └── skos/
-│   │               └── layout.xsl          # Package stylesheet
-│   └── xsl/
-│       ├── layout.xsl                      # End-user master stylesheet
-│       └── admin/
-│           └── layout.xsl                  # Admin master stylesheet
-```
-
-### SPARQL Data Structure
+Both paths go through `PATCH /settings`, which is the live route: the change takes effect on the
+next request, and lives in the running dataspace's context dataset. Declaring the same triple in
+`config/dataspaces.trig` is the permanent one, applied on restart.
 
 ```turtle
-# In admin SPARQL endpoint at <${admin_base}ontologies/{hash}/>
-# Package ontology stored as a document where {hash} is SHA-1 of ontology URI
-<https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/master/packages/skos/ns.ttl#> a owl:Ontology ;
-    # ... package ontology content ...
-
-# In admin SPARQL endpoint (namespace graph at <${admin_base}ontologies/namespace/>)
-# Namespace ontology imports package ontology
-<https://localhost:4443/ns#> a owl:Ontology ;
-    owl:imports <https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/master/packages/skos/ns.ttl#> .
-
-# In system.trig (application config)
-<urn:linkeddatahub:apps/end-user> a lapp:EndUserApplication ;
-    ldt:ontology <https://localhost:4443/ns#> ;
-    ac:stylesheet <static/xsl/layout.xsl> ;  # Master stylesheet
-```
-
+<urn:linkeddatahub:apps/end-user> ldh:import <https://packages.linkeddatahub.com/editor/taxonomy/#this> .
+```
+
+## What the Declaration Does
+
+From the next request onwards, the server resolves it:
+
+1. **Resolves the package description** from the package URI. Bundled descriptions and cached graphs
+   come from the graph repository; other URIs are dereferenced over HTTP.
+2. **Materializes the package ontology** (`lds:ontology`) as a document under the admin dataspace's
+   `ontologies/` container, named after the package path — `ontologies/editor-taxonomy/` for the
+   taxonomy editor. The ontology is copied verbatim, once; the document names it as its
+   `foaf:primaryTopic` and is skipped on later requests.
+3. **Adds that document** to the dataspace's ontology imports closure, as an `owl:imports` of the
+   namespace ontology. Its classes, constructors, constraints and views become available on the `ns`
+   endpoint and in the UI, and are edited there like the namespace ontology's own.
+4. **Copies the package stylesheet** (`ac:stylesheet`) once under the platform's package root and
+   serves it from the dataspace's own origin under `/static/com/linkeddatahub/packages/`, so what
+   the instance compiles cannot change under it.
+5. **Composes that copy** into the dataspace stylesheet by inserting an `xsl:import` right after
+   the platform's `hooks.xsl` import, so package templates override the open modes' fallbacks and
+   nothing else (see the stylesheet section above). The client-side stylesheet is composed the same
+   way and compiled by the `sef-compiler`.
+
+Packages are applied in the order of their URIs. One that declares only an ontology, or only a
+stylesheet, contributes only that; one whose description cannot be resolved is skipped. If the
+composed stylesheet fails to compile — an unreachable stylesheet URL, say — the dataspace falls
+back to its own.
+
+**Both copies are taken at import and kept.** No restart is needed, but a change to the published
+package reaches a dataspace that already imported it only after the materialized ontology document is
+deleted (the next request materializes it again) and the ontology cache is cleared.
+
+Uninstalling is the same in reverse: retract the triple, and from the next request the ontology is
+out of the closure and the stylesheet is no longer composed in. Data created with the package's
+vocabulary stays in the dataspace, and may not display or validate correctly without it.
 ## Available Packages
 
-List of available packages can be found in the [LinkedDataHub-Apps](https://github.com/AtomGraph/LinkedDataHub-Apps/tree/develop/packages) repository.
+| Package | URI | Provides |
+|---|---|---|
+| [`editor/taxonomy`](editor/taxonomy/) | `https://packages.linkeddatahub.com/editor/taxonomy/#this` | SKOS constructors, constraints, hierarchy views and a concept tree. Used by [`demo/unesco-thesaurus`](../demo/unesco-thesaurus/). |
+
+`ldh packages list` prints the registry's current contents.
 
 ## Creating New Packages
 
-1. Create directory: `packages/<name>/`
+1. Create directory: `packages/<path>/`, naming it for what the package does
 2. Write `ns.ttl` with vocabulary and property views (using `ldh:view` or `ldh:inverseView`)
-3. Write `layout.xsl` with XSLT templates (using system modes like `bs2:*`, `xhtml:*`, etc.)
-4. Publish package metadata as Linked Data at `https://packages.linkeddatahub.com/<name>/#this`
-5. Ensure the metadata contains `ldt:ontology` and `ac:stylesheet` properties pointing to the package resources
+3. Write the stylesheet with XSLT templates (using system modes like `ac:*`, `ldh:*`, `xhtml:*`, etc.), naming the file for the vocabulary it covers
+4. Publish package metadata as Linked Data at `https://packages.linkeddatahub.com/<path>/#this`
+5. Ensure the metadata contains `lds:ontology` and `ac:stylesheet` properties pointing to the package resources
 
 ## Vocabulary Reference
 
-### LAPP Vocabulary (`https://w3id.org/atomgraph/linkeddatahub/apps#`)
+### LAPP Vocabulary (`https://w3id.org/atomgraph/linkeddatahub/dataspaces#`)
 
-- `lapp:Package` - Package class
+- `lds:Package` - Package class
 
 ### Standard Properties (Reused)
 
-- `ldt:ontology` - Points to package ontology URI (from LDT vocabulary)
+- `lds:ontology` - Points to package ontology URI (from LDT vocabulary)
 - `ac:stylesheet` - Points to package stylesheet URI (from AtomGraph Client vocabulary)
 
 ## Notes
 
 - Packages are **declarative only** (RDF + XSLT, no Java code)
 - Package ontologies use `owl:imports` (handled automatically by Jena)
-- Package stylesheets use `xsl:import` (handled by master stylesheet generation)
+- Package ontologies are materialized as editable documents under the admin `ontologies/` container, and package stylesheets are copied under `/static/com/linkeddatahub/packages/`, both once at import
+- Package stylesheets are composed into the dataspace stylesheet with `xsl:import` at the `hooks.xsl` marker, per dataspace
 - Property views (`ldh:view`/`ldh:inverseView`) are separate from XSLT overrides
 - Both mechanisms work independently and complement each other
diff --git a/packages/editor.ttl b/packages/editor.ttl
new file mode 100644
index 00000000..b32ad797
--- /dev/null
+++ b/packages/editor.ttl
@@ -0,0 +1,18 @@
+@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
+@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
+@prefix dct:    <http://purl.org/dc/terms/> .
+
+<> a dh:Container ;
+    dct:title "Editors" ;
+    dct:description "Packages that turn a dataspace into an editor for a kind of data, each one pairing an ontology with the stylesheet that renders it." ;
+    rdf:_1 <#content> ;
+    rdf:_2 <#select-children> .
+
+<#content> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+    <p class="ldh-body-lg">Packages that turn a dataspace into an editor for a kind of data, each one pairing an ontology with the stylesheet that renders it.</p>
+</div>"""^^rdf:XMLLiteral .
+
+<#select-children> a ldh:Object ;
+    rdf:value ldh:ChildrenView .
diff --git a/packages/editor/taxonomy.ttl b/packages/editor/taxonomy.ttl
new file mode 100644
index 00000000..4db89d9b
--- /dev/null
+++ b/packages/editor/taxonomy.ttl
@@ -0,0 +1,33 @@
+@prefix lds:   <https://w3id.org/atomgraph/linkeddatahub/dataspaces#> .
+@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
+@prefix ac:     <https://w3id.org/atomgraph/client#> .
+@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
+@prefix dh:     <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
+@prefix dct:    <http://purl.org/dc/terms/> .
+@prefix foaf:   <http://xmlns.com/foaf/0.1/> .
+
+<> a dh:Container ;
+    dct:title "Taxonomy" ;
+    dct:description "Taxonomy editing on SKOS: a concept tree beside the content, hierarchy views in both assertion directions, and constructors and constraints for concepts, schemes and collections." ;
+    foaf:primaryTopic <#this> ;
+    rdf:_1 <#content> ;
+    rdf:_2 <#select-children> .
+
+<#content> a ldh:XHTML ;
+    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
+    <p class="ldh-body-lg">Taxonomy editing on SKOS: a concept tree beside the content, hierarchy views in both assertion directions, and constructors and constraints for concepts, schemes and collections.</p>
+</div>"""^^rdf:XMLLiteral .
+
+<#select-children> a ldh:Object ;
+    rdf:value ldh:ChildrenView .
+
+<#this> a lds:Package ;
+    dct:title "Taxonomy Editor" ;
+    dct:description "Turns a dataspace into a taxonomy editor: SKOS concepts, schemes and collections gain a concept tree beside the content, hierarchy views that read both assertion directions, and constructors and constraints that keep a concept labelled and in a scheme." ;
+    dct:creator <https://atomgraph.com/#company> ;
+    lds:ontology <ns/> ;
+    ac:stylesheet <https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/refs/heads/develop/packages/editor/taxonomy/skos.xsl> .
+
+<https://atomgraph.com/#company> a foaf:Organization ;
+    foaf:name "AtomGraph" ;
+    foaf:homepage <https://atomgraph.com> .
diff --git a/packages/editor/taxonomy/ns.ttl b/packages/editor/taxonomy/ns.ttl
new file mode 100644
index 00000000..11ee744e
--- /dev/null
+++ b/packages/editor/taxonomy/ns.ttl
@@ -0,0 +1,318 @@
+@prefix :	<#> .
+@prefix ldh:	<https://w3id.org/atomgraph/linkeddatahub#> .
+@prefix ac:	<https://w3id.org/atomgraph/client#> .
+@prefix rdfs:	<http://www.w3.org/2000/01/rdf-schema#> .
+@prefix owl:    <http://www.w3.org/2002/07/owl#> .
+@prefix sp: 	<http://spinrdf.org/sp#> .
+@prefix spin:	<http://spinrdf.org/spin#> .
+@prefix dct:	<http://purl.org/dc/terms/> .
+@prefix skos:   <http://www.w3.org/2004/02/skos/core#> .
+
+: a owl:Ontology ;
+    owl:imports <http://www.w3.org/2004/02/skos/core> ;
+    rdfs:label "SKOS package ontology".
+
+# Concept
+
+skos:Concept spin:constructor :ConceptConstructor ;
+    spin:constraint :MissingPrefLabel , :MissingInScheme .
+
+# Every natural-language value the constructors below construct - the labels, the title, the
+# definitions and the description - is declared rdf:langString, not xsd:string: such a value is
+# natural language, and SKOS's own integrity rules assume it carries a tag (a concept may have only
+# one prefLabel PER LANGUAGE, which is not even expressible without one). A constructor declaring
+# xsd:string produced a form field with a datatype and no language control, so a label added through
+# the form came out untagged beside the tagged ones already in the data - visible as a value with an
+# xsd:string annotation next to one showing en.
+:ConceptConstructor a ldh:Constructor ;
+    rdfs:label "Concept constructor" ;
+    dct:title "Concept constructor" ;
+    sp:text """
+        PREFIX skos:    <http://www.w3.org/2004/02/skos/core#>
+        PREFIX rdf:     <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+
+        CONSTRUCT {
+            $this skos:prefLabel [ a rdf:langString ] ;
+                skos:altLabel [ a rdf:langString ] ;
+                skos:definition [ a rdf:langString ] ;
+                skos:scopeNote [ a rdf:langString ] ;
+                skos:broader [ a skos:Concept ] ;
+                skos:narrower [ a skos:Concept ] ;
+                skos:related [ a skos:Concept ] ;
+                skos:inScheme [ a skos:ConceptScheme ] ;
+                skos:topConceptOf [ a skos:ConceptScheme ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+# The prefLabel every view below joins is a SORT KEY, not a selector: it is never projected, so
+# DISTINCT keeps one row per concept whatever languages it carries. These queries used to filter it to
+# English or untagged, which silently dropped every concept labelled in another language - and since
+# the form's language control follows the browser, a concept created through the UI lands in exactly
+# that state. Measured on the fixture: Juice's Broader block showed Cold drinks but not the concept
+# just created above it, while that concept's Narrower block did show Juice, which also carries an en
+# label. Which language a reader wants is decided at render time, where the label chain already picks
+# per value; a stored query has no way to know it. The join stays, because a concept with no prefLabel
+# at all has no sort key and the package makes one mandatory anyway (:MissingPrefLabel), and the order
+# among a multi-label concept's own labels is left to the engine - that is what an unprojected sort
+# key means.
+
+# narrower
+
+skos:narrower ldh:view :NarrowerConcepts .
+
+:NarrowerConcepts a ldh:View ;
+    dct:title "Narrower concepts" ;
+    spin:query :SelectNarrowerConcepts ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
+    rdfs:isDefinedBy : .
+
+:SelectNarrowerConcepts a sp:Select ;
+    rdfs:label "Select narrower concepts" ;
+    dct:title "Select narrower concepts" ;
+    sp:text """
+PREFIX  skos: <http://www.w3.org/2004/02/skos/core#>
+
+SELECT DISTINCT  ?narrower
+WHERE
+  { GRAPH ?graph
+      {   { $about  skos:narrower  ?narrower }
+        UNION
+          { ?narrower  skos:broader  $about }
+        GRAPH ?narrowerGraph
+          { ?narrower  skos:prefLabel  ?prefLabel }
+      }
+  }
+ORDER BY ?prefLabel
+""" ;
+    rdfs:isDefinedBy : .
+
+# broader
+
+skos:broader ldh:view :BroaderConcepts .
+
+:BroaderConcepts a ldh:View ;
+    dct:title "Broader concepts" ;
+    spin:query :SelectBroaderConcepts ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
+    rdfs:isDefinedBy : .
+
+:SelectBroaderConcepts a sp:Select ;
+    rdfs:label "Select broader concepts" ;
+    dct:title "Select broader concepts" ;
+    sp:text """
+PREFIX  skos: <http://www.w3.org/2004/02/skos/core#>
+
+SELECT DISTINCT  ?broader
+WHERE
+  { GRAPH ?graph
+      {   { $about  skos:broader  ?broader }
+        UNION
+          { ?broader  skos:narrower  $about }
+        GRAPH ?broaderGraph
+          { ?broader  skos:prefLabel  ?prefLabel }
+      }
+  }
+ORDER BY ?prefLabel
+""" ;
+    rdfs:isDefinedBy : .
+
+# Collection
+
+skos:Collection spin:constructor :CollectionConstructor ;
+    spin:constraint :MissingPrefLabel .
+
+:CollectionConstructor a ldh:Constructor ;
+    rdfs:label "Collection constructor" ;
+    dct:title "Collection constructor" ;
+    sp:text """
+        PREFIX skos:    <http://www.w3.org/2004/02/skos/core#>
+        PREFIX rdf:     <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
+
+        CONSTRUCT {
+            $this skos:prefLabel [ a rdf:langString ] ;
+                skos:altLabel [ a rdf:langString ] ;
+                skos:definition [ a rdf:langString ] ;
+                skos:notation [ a xsd:string ] ;
+                skos:member [ a skos:Concept ] ;
+                skos:inScheme [ a skos:ConceptScheme ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+skos:member ldh:view :CollectionMembers .
+
+:CollectionMembers a ldh:View ;
+    dct:title "Collection members" ;
+    spin:query :SelectCollectionMembers ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
+    rdfs:isDefinedBy : .
+
+:SelectCollectionMembers a sp:Select ;
+    rdfs:label "Select collection members" ;
+    dct:title "Select collection members" ;
+    sp:text """
+PREFIX  skos: <http://www.w3.org/2004/02/skos/core#>
+
+SELECT DISTINCT  ?member
+WHERE
+  { GRAPH ?graph
+      { $about  skos:member  ?member .
+        GRAPH ?memberGraph
+          { ?member  skos:prefLabel  ?prefLabel }
+      }
+  }
+ORDER BY ?prefLabel
+""" ;
+    rdfs:isDefinedBy : .
+
+# ConceptScheme
+
+skos:ConceptScheme spin:constructor :ConceptSchemeConstructor .
+
+:ConceptSchemeConstructor a ldh:Constructor ;
+    rdfs:label "Concept scheme constructor" ;
+    dct:title "Concept scheme constructor" ;
+    sp:text """
+        PREFIX skos:    <http://www.w3.org/2004/02/skos/core#>
+        PREFIX rdf:     <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+        PREFIX dct:     <http://purl.org/dc/terms/>
+
+        CONSTRUCT {
+            $this dct:title [ a rdf:langString ] ;
+                dct:description [ a rdf:langString ] ;
+                skos:hasTopConcept [ a skos:Concept ] .
+        }
+        WHERE {}""" ;
+    rdfs:isDefinedBy : .
+
+skos:hasTopConcept ldh:view :TopConcepts .
+
+:TopConcepts a ldh:View ;
+    dct:title "Top concepts" ;
+    spin:query :SelectTopConcepts ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
+    rdfs:isDefinedBy : .
+
+# the entry level of a taxonomy, and the root of the concept tree. Both directions count as a top
+# Every hierarchy query below reads BOTH directions, for the same reason: SKOS declares
+# skos:broader/skos:narrower and skos:hasTopConcept/skos:topConceptOf as inverse pairs and leaves the
+# choice to the modeller, so a parent may point down or a child may point up and both are correct.
+# Reading one direction made a view disagree with the concept tree, which unions them: measured on the
+# fixture, Hot drinks' Narrower block showed 1 child where the tree showed 3, because Coffee and Tea
+# assert skos:broader upwards, and Juice's Broader block showed nothing while the tree nested it under
+# Hot drinks. The union stays INSIDE the link's GRAPH rather than becoming a sibling block, because
+# SPARQLBuilder's round-trip merges sibling GRAPH blocks into one and would scope the child's label to
+# the link's document.
+:SelectTopConcepts a sp:Select ;
+    rdfs:label "Select top concepts" ;
+    dct:title "Select top concepts" ;
+    sp:text """
+PREFIX  skos: <http://www.w3.org/2004/02/skos/core#>
+
+SELECT DISTINCT  ?concept
+WHERE
+  { GRAPH ?graph
+      {   { $about  skos:hasTopConcept  ?concept }
+        UNION
+          { ?concept  skos:topConceptOf  $about }
+      }
+  }
+""" ;
+    rdfs:isDefinedBy : .
+
+skos:inScheme ldh:view :ConceptScheme .
+
+:ConceptScheme a ldh:View ;
+    dct:title "Scheme" ;
+    spin:query :SelectConceptScheme ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
+    rdfs:isDefinedBy : .
+
+:SelectConceptScheme a sp:Select ;
+    rdfs:label "Select the scheme a concept belongs to" ;
+    dct:title "Select the scheme a concept belongs to" ;
+    sp:text """
+PREFIX  skos: <http://www.w3.org/2004/02/skos/core#>
+
+SELECT DISTINCT  ?scheme
+WHERE
+  { GRAPH ?graph
+      { $about  skos:inScheme  ?scheme }
+  }
+""" ;
+    rdfs:isDefinedBy : .
+
+skos:inScheme ldh:inverseView :ConceptsInScheme , :OrphanConcepts .
+
+:ConceptsInScheme a ldh:View ;
+    dct:title "Concepts in scheme" ;
+    spin:query :SelectConceptsInScheme ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
+    rdfs:isDefinedBy : .
+
+:SelectConceptsInScheme a sp:Select ;
+    rdfs:label "Select concepts in scheme" ;
+    dct:title "Select concepts in scheme" ;
+    sp:text """
+PREFIX  skos: <http://www.w3.org/2004/02/skos/core#>
+
+SELECT DISTINCT  ?concept
+WHERE
+  { GRAPH ?graph
+      { ?concept  skos:inScheme  $about ;
+            skos:prefLabel  ?prefLabel
+      }
+  }
+ORDER BY ?prefLabel
+""" ;
+    rdfs:isDefinedBy : .
+
+# Concepts a scheme lists but nothing places in its hierarchy: neither a top concept nor narrower
+# than anything. A taxonomy with orphans is not wrong, but they are invisible to a tree that
+# descends from the top, so the scheme surfaces them rather than letting them go unreachable
+:OrphanConcepts a ldh:View ;
+    dct:title "Unplaced concepts" ;
+    spin:query :SelectOrphanConcepts ;
+    ac:mode ac:TableMode ;
+    ldh:showWhenEmpty false ;
+    rdfs:isDefinedBy : .
+
+:SelectOrphanConcepts a sp:Select ;
+    rdfs:label "Select concepts with no place in the hierarchy" ;
+    dct:title "Select concepts with no place in the hierarchy" ;
+    sp:text """
+PREFIX  skos: <http://www.w3.org/2004/02/skos/core#>
+
+SELECT DISTINCT  ?concept
+WHERE
+  { GRAPH ?graph
+      { ?concept  skos:inScheme  $about }
+    FILTER NOT EXISTS { GRAPH ?topGraph { $about skos:hasTopConcept ?concept } }
+    FILTER NOT EXISTS { GRAPH ?topGraph { ?concept skos:topConceptOf $about } }
+    FILTER NOT EXISTS { GRAPH ?broaderGraph { ?concept skos:broader ?parent } }
+    FILTER NOT EXISTS { GRAPH ?narrowerGraph { ?parent skos:narrower ?concept } }
+  }
+""" ;
+    rdfs:isDefinedBy : .
+
+# Constraints
+
+:MissingPrefLabel a ldh:MissingPropertyValue ;
+    rdfs:label "Missing skos:prefLabel" ;
+    sp:arg1 skos:prefLabel ;
+    rdfs:isDefinedBy : .
+
+# a concept outside every scheme cannot be reached from a scheme's tree, so the package treats
+# skos:inScheme as mandatory even though SKOS itself does not
+:MissingInScheme a ldh:MissingPropertyValue ;
+    rdfs:label "Missing skos:inScheme" ;
+    sp:arg1 skos:inScheme ;
+    rdfs:isDefinedBy : .
diff --git a/packages/editor/taxonomy/skos.xsl b/packages/editor/taxonomy/skos.xsl
new file mode 100644
index 00000000..f5ee6085
--- /dev/null
+++ b/packages/editor/taxonomy/skos.xsl
@@ -0,0 +1,448 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE xsl:stylesheet [
+    <!ENTITY ldh    "https://w3id.org/atomgraph/linkeddatahub#">
+    <!ENTITY ac     "https://w3id.org/atomgraph/client#">
+    <!ENTITY rdf    "http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+    <!ENTITY rdfs   "http://www.w3.org/2000/01/rdf-schema#">
+    <!ENTITY xsd    "http://www.w3.org/2001/XMLSchema#">
+    <!ENTITY foaf   "http://xmlns.com/foaf/0.1/">
+    <!ENTITY skos   "http://www.w3.org/2004/02/skos/core#">
+    <!ENTITY srx    "http://www.w3.org/2005/sparql-results#">
+    <!ENTITY sd     "http://www.w3.org/ns/sparql-service-description#">
+]>
+<xsl:stylesheet version="3.0"
+xmlns="http://www.w3.org/1999/xhtml"
+xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+xmlns:ixsl="http://saxonica.com/ns/interactiveXSLT"
+xmlns:xhtml="http://www.w3.org/1999/xhtml"
+xmlns:xs="http://www.w3.org/2001/XMLSchema"
+xmlns:ac="&ac;"
+xmlns:ldh="&ldh;"
+xmlns:rdf="&rdf;"
+xmlns:rdfs="&rdfs;"
+xmlns:xsd="&xsd;"
+xmlns:foaf="&foaf;"
+xmlns:skos="&skos;"
+xmlns:srx="&srx;"
+xmlns:sd="&sd;"
+xmlns:map="http://www.w3.org/2005/xpath-functions/map"
+extension-element-prefixes="ixsl"
+exclude-result-prefixes="#all">
+
+    <!-- This one stylesheet is composed into BOTH the server and the client tree, so anything that
+         reaches client/tree.xsl - the disclosure handlers, the children query, the fetch - is declared
+         use-when Saxon-JS. Without the guard the server compile fails on XTSE0650/XPST0017 and the
+         platform falls back to a stylesheet carrying no package rules at all, so the package stops
+         working entirely rather than degrading. The emitter is deliberately NOT guarded: ldh:TreeNode
+         lives in the shared trunk precisely so the tree is in the server's first paint, which is the
+         only paint a directly loaded URL gets.
+
+         the hierarchy predicates render as the concept tree, not as statement rows -->
+    <xsl:template match="skos:narrower | skos:broader | skos:related | skos:member" mode="ac:PropertyEditor"/>
+
+    <!-- Every row of this tree navigates in ReadMode explicitly, because the tree itself only renders in
+         ReadMode: a concept document that has content blocks resolves to ContentMode by default, so a row
+         linking to its bare URI is a link out of the very widget the reader is navigating with - click a
+         sibling and the tree disappears. Naming the mode in the link keeps the reading surface closed
+         over its own navigation, and leaves the URL the single source of truth for the mode.
+
+         One function rather than the expression at both call sites - the root, and every other node
+         through the override below - so the two cannot drift into linking differently. -->
+    <xsl:function name="ldh:conceptree-href" as="xs:anyURI">
+        <xsl:param name="resource" as="element()"/>
+
+        <xsl:sequence select="ldh:href(ac:document-uri($resource/@rdf:about), ldh:build-query(xs:anyURI('&ac;ReadMode')), ac:fragment-id($resource/@rdf:about))"/>
+    </xsl:function>
+
+    <!-- A concept can always be expanded. Whether it has children is one query away and this template
+         renders without one, so offering the disclosure and letting it resolve to an empty list beats
+         either blocking the render or hiding a control the node may well need: the alternative is a
+         tree whose leaves are wrong whenever narrower is asserted only on the child.
+
+         Matched on the type, so it covers every node a children fetch brings back - those responses are
+         DESCRIBEs that carry rdf:type - but NOT the scheme at the root, whose description on a concept
+         page comes from $object-metadata, a literals-only CONSTRUCT. The root is given its href at the
+         call site instead. -->
+    <xsl:template match="*[@rdf:about][rdf:type/@rdf:resource = '&skos;Concept']" mode="ldh:TreeNode" priority="1">
+        <xsl:next-match>
+            <xsl:with-param name="expandable" select="true()"/>
+            <xsl:with-param name="href" select="ldh:conceptree-href(.)"/>
+        </xsl:next-match>
+    </xsl:template>
+
+
+    <!-- A taxonomy is read alongside its content, so the tree fills the platform's ldh:ContentColumn
+         slot and the content body lays itself out in two columns. The card, its stickiness and the
+         column width come from the design system's ontology-editor layout (.ldh-onto-list), already
+         vendored in app.css; the grid is the platform's, keyed on this slot being filled.
+
+         The tree is rooted at the SCHEME, never at the document's own topic. A tree rooted at the
+         concept you are already looking at shows one node and tells you nothing: what a taxonomy tree
+         is for is placing that concept among the others, so it has to start where the taxonomy starts.
+
+         On a scheme document the topic IS the root. On a concept document the scheme is named by
+         skos:inScheme, which is already in the rendered RDF, and its label comes from the platform's
+         $object-metadata - the same label-only CONSTRUCT that renders "Drinks" as the link text in the
+         property list beside this tree. So the root node costs no request at all. That tunnel
+         parameter does reach this mode: it is set once per render (layout.xsl server-side,
+         client.xsl per pane) and flows down through ldh:ContentBody.
+
+         Falls back to the topic when no scheme resolves - an unplaced concept still gets a tree of
+         itself rather than an empty card.
+
+         Anchored on the primary topic of THIS document, not on any SKOS resource in the graph: a
+         container listing concept documents describes every child's topic too, and matching those
+         would hang a tree off every such listing, rooted at whichever concept happened to come first.
+
+         Not guarded by use-when: ldh:TreeNode lives in the shared trunk precisely so the tree is in
+         the server's first paint, which is the only paint a directly loaded URL gets. -->
+    <xsl:template match="rdf:RDF[key('resources', key('resources', ac:absolute-path(ldh:base-uri(.)))/foaf:primaryTopic/@rdf:resource)/rdf:type/@rdf:resource = ('&skos;ConceptScheme', '&skos;Concept')]" mode="ldh:ContentColumn">
+        <xsl:param name="mode" as="xs:anyURI?"/>
+        <xsl:param name="object-metadata" as="document-node()?" tunnel="yes"/>
+        <xsl:variable name="topic" select="key('resources', key('resources', ac:absolute-path(ldh:base-uri(.)))/foaf:primaryTopic/@rdf:resource)" as="element()*"/>
+        <xsl:variable name="scheme-uri" select="$topic/skos:inScheme/@rdf:resource" as="attribute()*"/>
+        <!-- described in this document (a scheme page), else in the label metadata (a concept page) -->
+        <xsl:variable name="root" select="(
+            $topic[rdf:type/@rdf:resource = '&skos;ConceptScheme'],
+            key('resources', $scheme-uri),
+            $object-metadata!key('resources', $scheme-uri, .),
+            $topic)[1]" as="element()?"/>
+
+        <!-- ReadMode only. The tree is for reading a concept in its place among the others, and the
+             other document modes have a body it does not belong beside: ContentMode is an authoring
+             surface for the document's own content blocks, and the Map, Chart and Graph canvases take
+             the whole body - ldh.css even zeroes its padding and drops its max-width for them, which a
+             two-column grid would fight. Rendering the tree there put it next to an empty authoring
+             body, which is what prompted this. ac:mode() always resolves to a concrete mode, so the
+             test can be positive: ?mode= when given, else ContentMode for a document that has content
+             blocks, else ReadMode. -->
+        <xsl:if test="$root and $mode = '&ac;ReadMode'">
+            <div class="ldh-onto-list">
+                <!-- headed like the drawer's document tree, in the design system's in-card vocabulary
+                     (.ldh-onto-group-h) rather than the drawer's .sb-heading: the eyebrow treatment is
+                     the same, the owning surface is not. The heading names the KIND, since the tree's
+                     root node already carries the scheme's name. -->
+                <div class="ldh-onto-group">
+                    <h3 class="ldh-onto-group-h">
+                        <xsl:apply-templates select="key('resources', 'concept-tree', ldh:translations())" mode="ac:label"/>
+                    </h3>
+
+                    <!-- the concept being viewed, stamped so the reveal has its target without re-deriving
+                         it from the page; absent when the topic IS the scheme, which is already the root -->
+                    <ul class="ldh-tree concept-tree">
+                        <xsl:if test="not($topic/rdf:type/@rdf:resource = '&skos;ConceptScheme')">
+                            <xsl:attribute name="data-concept" select="$topic[1]/@rdf:about"/>
+                        </xsl:if>
+                        <xsl:apply-templates select="$root" mode="ldh:TreeNode">
+                            <xsl:with-param name="expandable" select="true()"/>
+                            <xsl:with-param name="href" select="ldh:conceptree-href($root)"/>
+                        </xsl:apply-templates>
+                    </ul>
+                </div>
+            </div>
+        </xsl:if>
+    </xsl:template>
+
+    <!-- ===================== REVEALING THE OPEN CONCEPT =====================
+
+         The tree roots at the scheme, so on a concept page it must open the path down to that concept
+         or the reader is left at the top of a taxonomy with no idea where they are.
+
+         Triggered through ldh:RowHook, the open mode the platform's ldh:RenderRow walk applies to every
+         element under .content-body after the pane is in the DOM - on a direct load AND on a client-side
+         navigation alike. That is the whole reason no new platform hook was needed, and why there is one
+         implementation rather than a synchronous server walk beside an asynchronous client one: this
+         mode is the only place both paths meet after the markup exists. The walk itself is sealed; this
+         rule only returns work for the aside and never descends, so nothing under it is skipped.
+
+         The mode's contract is a FACTORY, not work: it is evaluated inside a non-updating variable
+         binding and the factories are invoked later inside ixsl:promise, which is also what gives
+         ixsl:http-request the active promise it requires. -->
+    <xsl:template match="div[contains-token(@class, 'ldh-content-aside')][descendant::ul[contains-token(@class, 'concept-tree')][@data-concept]]" mode="ldh:RowHook" as="(function(item()?) as map(*))*" use-when="system-property('xsl:product-name') = 'SaxonJS'">
+        <!-- descendant, not child: the platform owns the .ldh-content-aside wrapper and the package puts
+             its own card treatment (.ldh-onto-list) inside it, so the tree sits a level deeper than the
+             slot - and a package that wanted no card would have it one level up. Either way the tree is
+             found by what it is rather than by where it happens to sit. -->
+        <xsl:variable name="tree" select="descendant::ul[contains-token(@class, 'concept-tree')][@data-concept][1]" as="element()"/>
+        <xsl:variable name="root-li" select="$tree/li[1]" as="element()?"/>
+
+        <xsl:sequence select="ldh:conceptree-reveal#2(
+            map{
+                'tree': $tree,
+                'root-li': $root-li,
+                'target': xs:anyURI($tree/@data-concept)
+            }, ?)"/>
+    </xsl:template>
+
+    <!-- Step one: climb to the scheme, one hop per request.
+
+         Shaped after the document tree's descent rather than after a closure query: ldh:doctree-descend
+         issues one constant-size children query per level and decides where to go next from what is
+         already in the DOM. The concept tree cannot make that decision locally - the document hierarchy
+         is path-nested, so a target's ancestors are exactly its lexical prefixes, while
+         /taxonomies/espresso/#this sits under no prefix of /taxonomies/coffee/#this - so the path is
+         asked for instead of derived. It is asked for the same way: one hop, one request, constant
+         query, no depth bound, stopping when a hop returns nothing new.
+
+         A bounded transitive closure was the alternative and is worse on both counts the shape is meant
+         to get right. Expressed as a UNION of one chain per depth it grows quadratically in text - 4.6kB
+         at six hops, past Tomcat's header limit once percent-encoded, measured as a 400 - and either
+         formulation has to name a maximum depth, which a taxonomy has no reason to respect.
+
+         Why per-hop GRAPH at all rather than skos:broader*: a property path cannot leave its GRAPH, and
+         with one concept per document every hop crosses one. Measured on the fixture, the path form
+         reached the first ancestor and stopped, because that ancestor's own parent link lives in another
+         document; the default graph is empty, so an unscoped path has nowhere to run.
+
+         The frontier is a set, so one request covers a whole level however wide it branches: a concept
+         with two broader concepts puts both in the next VALUES block. That is also the cycle guard -
+         only parents not already seen enter the frontier, so A broader B with B broader A (malformed but
+         legal SKOS) runs out of new nodes and terminates, where a depth bound alone would have walked
+         the two of them as deep as the bound allowed. -->
+    <xsl:function name="ldh:conceptree-parents-query" as="xs:string" use-when="system-property('xsl:product-name') = 'SaxonJS'">
+        <xsl:param name="children" as="xs:anyURI*"/>
+
+        <xsl:sequence select="
+            'SELECT DISTINCT ?parent WHERE { VALUES ?child { ' || string-join(for $child in $children return '&lt;' || $child || '&gt;', ' ') || ' } ' ||
+            'GRAPH ?g { { ?child &lt;&skos;broader&gt; ?parent } UNION { ?parent &lt;&skos;narrower&gt; ?child } } }'"/>
+    </xsl:function>
+
+    <xsl:function name="ldh:conceptree-reveal" as="map(*)" ixsl:updating="yes" use-when="system-property('xsl:product-name') = 'SaxonJS'">
+        <xsl:param name="context" as="map(*)"/>
+        <xsl:param name="ignored" as="item()?"/>
+
+        <!-- ixsl:resolve, because the mode's contract is a promise and everything below this point
+             returns a plain map: each continuation is fired as an ixsl:promise INSTRUCTION rather than
+             returned, which is what lets one level fan out into several branches. -->
+        <xsl:sequence select="ixsl:resolve(ldh:conceptree-climb(map:merge(($context, map{ 'frontier': $context('target'), 'ancestors': () }), map{ 'duplicates': 'use-last' })))"/>
+    </xsl:function>
+
+    <!-- one hop up: asks for the parents of everything on the frontier at once -->
+    <xsl:function name="ldh:conceptree-climb" as="map(*)" ixsl:updating="yes" use-when="system-property('xsl:product-name') = 'SaxonJS'">
+        <xsl:param name="context" as="map(*)"/>
+        <xsl:variable name="query" select="ldh:conceptree-parents-query($context('frontier'))" as="xs:string"/>
+        <xsl:variable name="request-uri" select="ldh:href(ac:build-uri(sd:endpoint(), map{ 'query': $query }), map{})" as="xs:anyURI"/>
+        <xsl:variable name="request" select="map{ 'method': 'GET', 'href': $request-uri, 'headers': map{ 'Accept': 'application/sparql-results+xml' } }" as="map(*)"/>
+
+        <ixsl:promise select="
+            ixsl:resolve(map:merge(($context, map{ 'request': $request }), map{ 'duplicates': 'use-last' })) =>
+                ixsl:then(ldh:http-request-threaded(?, 'request', 'parents-response')) =>
+                ixsl:then(ldh:handle-response(?, 'parents-response')) =>
+                ixsl:then(ldh:conceptree-climbed#1)
+            " on-failure="ldh:promise-failure($context('root-li'), 'tree-children-not-loaded', ?)"/>
+        <xsl:sequence select="$context"/>
+    </xsl:function>
+
+    <!-- the hop's answer: keep climbing while it brings new nodes, then hand the set to the descent.
+
+         The walk stops itself at the top concept, because the link from there to the scheme is
+         topConceptOf/hasTopConcept rather than broader/narrower. That is the right place to stop: the
+         scheme is the tree's root node and the descent starts there, so it never belongs to the set. -->
+    <xsl:function name="ldh:conceptree-climbed" as="map(*)" ixsl:updating="yes" use-when="system-property('xsl:product-name') = 'SaxonJS'">
+        <xsl:param name="context" as="map(*)"/>
+        <xsl:variable name="ancestors" select="$context('ancestors')" as="xs:anyURI*"/>
+        <xsl:variable name="parents" select="$context('parents-response')?body//srx:binding[@name = 'parent']/srx:uri/xs:anyURI(.)" as="xs:anyURI*"/>
+        <xsl:variable name="frontier" select="distinct-values($parents[not(. = ($ancestors, $context('target')))])" as="xs:anyURI*"/>
+        <xsl:variable name="carry" select="map:merge((map:remove($context, 'parents-response'), map{ 'ancestors': ($ancestors, $frontier), 'frontier': $frontier }), map{ 'duplicates': 'use-last' })" as="map(*)"/>
+
+        <xsl:choose>
+            <xsl:when test="exists($frontier)">
+                <xsl:sequence select="ldh:conceptree-climb($carry)"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:sequence select="ldh:conceptree-descend(map:remove($carry, 'frontier'))"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:function>
+
+    <!-- Step two: walk down from the scheme, one level per request.
+
+         Mirrors ldh:doctree-descend in shape - expand, fetch, re-enter from the response callback - and
+         differs only where it must: the document tree decides what to expand with a URI string-prefix
+         test, which works because the document hierarchy is path-nested. Concept URIs are not, so the
+         test here is membership of the ancestor set.
+
+         Every matching child is descended into, not just the first. A concept with two broader concepts
+         has two paths to it and Skosmos renders it under each; the activation pass marks all of them
+         without special handling, because it iterates every row whose href matches. -->
+    <xsl:function name="ldh:conceptree-descend" as="map(*)" ixsl:updating="yes" use-when="system-property('xsl:product-name') = 'SaxonJS'">
+        <xsl:param name="context" as="map(*)"/>
+        <xsl:variable name="ancestors" select="$context('ancestors')" as="xs:anyURI*"/>
+        <xsl:variable name="li" select="if (map:contains($context, 'li')) then $context('li') else $context('root-li')" as="element()"/>
+        <xsl:variable name="wanted" select="($ancestors, $context('target'))" as="xs:anyURI*"/>
+        <xsl:variable name="next" select="$li/ul/li[ldh:tree-node-uri(div/a/@href) = $wanted]" as="element()*"/>
+
+        <xsl:choose>
+            <!-- children already in the DOM: step into every matching branch without refetching -->
+            <xsl:when test="exists($next)">
+                <!-- One promise per branch, not one call per branch: a function returns a single map, so
+                     N branches cannot be N return values. Firing each as an instruction also gives every
+                     branch of a polyhierarchy its own chain and its own failure handler. -->
+                <xsl:for-each select="$next">
+                    <ixsl:promise select="ixsl:resolve(map:merge(($context, map{ 'li': . }), map{ 'duplicates': 'use-last' })) => ixsl:then(ldh:conceptree-step#1)" on-failure="ldh:promise-failure(., 'tree-children-not-loaded', ?)"/>
+                </xsl:for-each>
+                <xsl:sequence select="$context"/>
+            </xsl:when>
+            <!-- Not expanded yet: open this level, then re-enter from the children response. No test on
+                 the ancestor set being non-empty - it is legitimately empty when the open concept is a
+                 top concept, whose link to the scheme is topConceptOf rather than broader, and that is
+                 the one level the root must still expand to reveal it. Descending into a node is only
+                 ever reached for the root or for a node already matched as wanted, so opening it is
+                 always right; a childless one fetches nothing, re-enters with an empty list and stops. -->
+            <xsl:when test="empty($li/ul)">
+                <xsl:sequence select="ldh:conceptree-expand($context, $li)"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:sequence select="$context"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:function>
+
+    <!-- one node of the path: the target itself ends the walk, anything else opens and continues -->
+    <xsl:function name="ldh:conceptree-step" as="map(*)" ixsl:updating="yes" use-when="system-property('xsl:product-name') = 'SaxonJS'">
+        <xsl:param name="context" as="map(*)"/>
+        <xsl:variable name="li" select="$context('li')" as="element()"/>
+
+        <xsl:choose>
+            <xsl:when test="ldh:tree-node-uri($li/div/a/@href) = $context('target')">
+                <xsl:sequence select="ldh:conceptree-activate($context)"/>
+            </xsl:when>
+            <xsl:when test="empty($li/ul)">
+                <xsl:sequence select="ldh:conceptree-expand($context, $li)"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:sequence select="ldh:conceptree-descend($context)"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:function>
+
+    <!-- Opens one node and fetches its children, then re-enters the descent.
+
+         The disclosure is flipped in place and the loading row emitted, so a pre-expanded level looks
+         exactly like a clicked one - ldh.css hides a subtree purely off aria-expanded, which is why no
+         click needs simulating. The relation follows depth, as the click handlers below do: the root is
+         the scheme, whose children are its top concepts. -->
+    <xsl:function name="ldh:conceptree-expand" as="map(*)" ixsl:updating="yes" use-when="system-property('xsl:product-name') = 'SaxonJS'">
+        <xsl:param name="context" as="map(*)"/>
+        <xsl:param name="li" as="element()"/>
+        <xsl:variable name="uri" select="ldh:tree-node-uri($li/div/a/@href)" as="xs:anyURI"/>
+        <xsl:variable name="depth" select="count($li/ancestor::li) + 1" as="xs:integer"/>
+        <xsl:variable name="query" select="
+            if (empty($li/ancestor::li)) then ldh:tree-children-query($uri, xs:anyURI('&skos;topConceptOf'), xs:anyURI('&skos;hasTopConcept'))
+            else ldh:tree-children-query($uri, xs:anyURI('&skos;broader'), xs:anyURI('&skos;narrower'))" as="xs:string"/>
+        <xsl:variable name="request-uri" select="ldh:href(ac:build-uri(sd:endpoint(), map{ 'query': $query }), map{})" as="xs:anyURI"/>
+        <xsl:variable name="request" select="map{ 'method': 'GET', 'href': $request-uri, 'headers': map{ 'Accept': 'application/rdf+xml' } }" as="map(*)"/>
+
+        <xsl:for-each select="$li/div/button">
+            <ixsl:set-attribute name="class" select="ldh:set-token(@class, 'btn-expand-tree', false())"/>
+            <ixsl:set-attribute name="class" select="ldh:set-token(@class, 'btn-expanded-tree', true())"/>
+            <ixsl:set-attribute name="aria-expanded" select="'true'"/>
+            <xsl:for-each select="span[contains-token(@class, 'msi')]">
+                <ixsl:set-property name="textContent" select="'expand_more'" object="."/>
+            </xsl:for-each>
+        </xsl:for-each>
+
+        <xsl:for-each select="$li">
+            <xsl:result-document href="?." method="ixsl:append-content">
+                <ul>
+                    <li class="tree-loading" style="--depth: {$depth}">
+                        <span class="msi sm" aria-hidden="true">progress_activity</span>
+                        <span>
+                            <xsl:apply-templates select="key('resources', 'loading', ldh:translations())" mode="ac:label"/>
+                        </span>
+                    </li>
+                </ul>
+            </xsl:result-document>
+        </xsl:for-each>
+
+        <ixsl:promise select="
+            ixsl:resolve(map:merge(($context, map{ 'request': $request, 'container': $li/ul, 'uri': $uri, 'li': $li }), map{ 'duplicates': 'use-last' })) =>
+                ixsl:then(ldh:http-request-threaded#1) =>
+                ixsl:then(ldh:handle-response#1) =>
+                ixsl:then(ldh:tree-children-response#1) =>
+                ixsl:then(ldh:conceptree-descend#1)
+            " on-failure="ldh:promise-failure($li/ul, 'tree-children-not-loaded', ?)"/>
+        <xsl:sequence select="$context"/>
+    </xsl:function>
+
+    <!-- Marks the open concept, at every occurrence. Copied from the drawer's ldh:DocTreeActivateHref
+         and scoped to this tree: is-active rides the li so the selected ground spans the disclosure,
+         aria-current rides the anchor, and both are the design system's own tree anatomy. Iterating all
+         matching rows is what makes a polyhierarchical concept light up under each of its parents. -->
+    <xsl:function name="ldh:conceptree-activate" as="map(*)" ixsl:updating="yes" use-when="system-property('xsl:product-name') = 'SaxonJS'">
+        <xsl:param name="context" as="map(*)"/>
+        <xsl:variable name="tree" select="$context('tree')" as="element()"/>
+        <xsl:variable name="target" select="$context('target')" as="xs:anyURI"/>
+
+        <xsl:for-each select="$tree//li[contains-token(@class, 'is-active')]">
+            <ixsl:set-attribute name="class" select="ldh:set-token(@class, 'is-active', false())"/>
+            <xsl:for-each select="div/a">
+                <ixsl:remove-attribute name="aria-current"/>
+            </xsl:for-each>
+        </xsl:for-each>
+        <xsl:for-each select="$tree//li[ldh:tree-node-uri(div/a/@href) = $target]">
+            <ixsl:set-attribute name="class" select="ldh:set-token(@class, 'is-active', true())"/>
+            <xsl:for-each select="div/a">
+                <ixsl:set-attribute name="aria-current" select="'page'"/>
+            </xsl:for-each>
+        </xsl:for-each>
+
+        <!-- Brings the open concept into view inside the tree, which scrolls on its own (ldh.css caps
+             the card at the viewport and gives .ldh-tree overflow-y: auto): a large scheme reveals its
+             target thousands of pixels down, where nobody would find it. The row is centred rather than
+             put at the top edge, so its parent and siblings stay in view - the context that says where
+             it sits - and only when it is not visible already, so a concept near the top is not moved.
+             The tree's own scrollTop rather than scrollIntoView(), which would scroll the page as well.
+
+             The FIRST occurrence in document order: a polyhierarchical concept is active under each of
+             its parents, and every branch of the descent ends in this function in whatever order its
+             requests return. Re-deciding on each call converges on the same row whichever finishes
+             last. -->
+        <xsl:variable name="row" select="($tree//li[ldh:tree-node-uri(div/a/@href) = $target])[1]/div" as="element()?"/>
+        <xsl:if test="exists($row)">
+            <xsl:variable name="scroll-top" select="ixsl:get($tree, 'scrollTop')" as="xs:double"/>
+            <xsl:variable name="client-height" select="ixsl:get($tree, 'clientHeight')" as="xs:double"/>
+            <xsl:variable name="row-rect" select="ixsl:call($row, 'getBoundingClientRect', [])"/>
+            <xsl:variable name="row-height" select="ixsl:get($row-rect, 'height')" as="xs:double"/>
+            <!-- the row's offset within the tree's scrolled content -->
+            <xsl:variable name="row-top" select="ixsl:get($row-rect, 'top') - ixsl:get(ixsl:call($tree, 'getBoundingClientRect', []), 'top') + $scroll-top" as="xs:double"/>
+
+            <xsl:if test="$row-top lt $scroll-top or $row-top + $row-height gt $scroll-top + $client-height">
+                <ixsl:set-property name="scrollTop" select="$row-top - ($client-height - $row-height) div 2" object="$tree"/>
+            </xsl:if>
+        </xsl:if>
+
+        <xsl:sequence select="$context"/>
+    </xsl:function>
+
+    <!-- SKOS puts the hierarchy link on whichever end the modeller chose, and both are in use in the
+         wild, so every relation below is given from both directions and client/tree.xsl unions them.
+
+         Which relation applies is a question of depth alone: the root is always the scheme, whose
+         children are its top concepts, and every node below it is a concept, whose children are
+         narrower concepts. count(ancestor::li) tells them apart - no marker class, which is why the
+         scheme-root token this used to carry is gone: with the root always a scheme it distinguished
+         nothing. -->
+    <xsl:template match="button[ancestor::ul[contains-token(@class, 'concept-tree')]][count(ancestor::li) = 1]" mode="ldh:TreeChildrenLoad" priority="1" use-when="system-property('xsl:product-name') = 'SaxonJS'">
+        <xsl:param name="container" as="element()"/>
+        <xsl:param name="uri" as="xs:anyURI"/>
+
+        <xsl:call-template name="ldh:TreeChildrenFetch">
+            <xsl:with-param name="container" select="$container"/>
+            <xsl:with-param name="uri" select="$uri"/>
+            <xsl:with-param name="query" select="ldh:tree-children-query($uri, xs:anyURI('&skos;topConceptOf'), xs:anyURI('&skos;hasTopConcept'))"/>
+        </xsl:call-template>
+    </xsl:template>
+
+    <xsl:template match="button[ancestor::ul[contains-token(@class, 'concept-tree')]]" mode="ldh:TreeChildrenLoad" use-when="system-property('xsl:product-name') = 'SaxonJS'">
+        <xsl:param name="container" as="element()"/>
+        <xsl:param name="uri" as="xs:anyURI"/>
+
+        <xsl:call-template name="ldh:TreeChildrenFetch">
+            <xsl:with-param name="container" select="$container"/>
+            <xsl:with-param name="uri" select="$uri"/>
+            <xsl:with-param name="query" select="ldh:tree-children-query($uri, xs:anyURI('&skos;broader'), xs:anyURI('&skos;narrower'))"/>
+        </xsl:call-template>
+    </xsl:template>
+
+</xsl:stylesheet>
diff --git a/packages/install.sh b/packages/install.sh
index e4945fed..a3268c97 100755
--- a/packages/install.sh
+++ b/packages/install.sh
@@ -1,34 +1,20 @@
 #!/usr/bin/env bash
+# Publishes the package registry onto a LinkedDataHub instance with the ldh CLI: makes it public and
+# pushes the document tree, whose folders are the package URIs. A dataspace importing a package
+# dereferences its descriptor, ontology and stylesheet anonymously, so the registry must be readable
+# without a certificate.
+#
+# Reads LDH_BASE, LDH_CERT_FILE, LDH_CERT_PASSWORD and optionally LDH_PROXY; `make install` prompts
+# for them. Re-running converges: PUT replaces each document. make-public is a POST and adds another
+# authorization per run.
+set -euo pipefail
 
-if [ "$#" -ne 3 ] && [ "$#" -ne 4 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../../LinkedDataHub/ssl/owner/cert.pem Password [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
+app_dir="$(cd "$(dirname "$0")" && pwd)"
+. "$app_dir/../lib/ldh-app.sh"
+ldh_app_require_env
 
-base="$1"
-cert_pem_file=$(realpath "$2")
-cert_password="$3"
+ldh_app_step "Creating authorization to make the registry public"
+ldh admin make-public
 
-if [ -n "$4" ]; then
-    proxy="$4"
-else
-    proxy="$base"
-fi
-
-pwd="$(realpath "$PWD")"
-
-printf "\n### Updating documents and uploading files\n\n"
-
-if [[ -f "root.ttl" ]]; then
-  printf "\n### Updating %s\n" "$base"
-  cat root.ttl | turtle --base="$base" | put.sh \
-    -f "$cert_pem_file" \
-    -p "$cert_password" \
-    --proxy "$proxy" \
-    -t "application/n-triples" \
-    "$base"
-fi
-
-./update-folder.sh "$base" "$cert_pem_file" "$cert_password" "$pwd" "$pwd" "$proxy"
+ldh_app_step "Pushing package descriptors and files"
+ldh push --dir "$app_dir" "$LDH_BASE"
diff --git a/packages/skos.ttl b/packages/skos.ttl
deleted file mode 100644
index d1779f60..00000000
--- a/packages/skos.ttl
+++ /dev/null
@@ -1,34 +0,0 @@
-@prefix lapp:   <https://w3id.org/atomgraph/linkeddatahub/apps#> .
-@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix ldt:    <https://www.w3.org/ns/ldt#> .
-@prefix ac:     <https://w3id.org/atomgraph/client#> .
-@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
-@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix dct:    <http://purl.org/dc/terms/> .
-@prefix foaf:   <http://xmlns.com/foaf/0.1/> .
-
-<> a dh:Container ;
-    dct:title "SKOS" ;
-    dct:description "SKOS (Simple Knowledge Organization System) vocabulary support with custom templates for concept hierarchies, schemes, and collections." ;
-    foaf:primaryTopic <#this> ;
-    rdf:_1 <#content> ;
-    rdf:_2 <#select-children> .
-
-<#content> a ldh:XHTML ;
-    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
-    <p class="lead">SKOS (Simple Knowledge Organization System) vocabulary support with custom templates for concept hierarchies, schemes, and collections.</p>
-</div>"""^^rdf:XMLLiteral .
-
-<#select-children> a ldh:Object ;
-    rdf:value ldh:ChildrenView .
-
-<#this> a lapp:Package ;
-    dct:title "SKOS Package" ;
-    dct:description "Provides SKOS (Simple Knowledge Organization System) vocabulary support with custom templates for concept hierarchies, schemes, and collections." ;
-    dct:creator <https://atomgraph.com/#company> ;
-    ldt:ontology <ns/> ;
-    ac:stylesheet <https://raw.githubusercontent.com/AtomGraph/LinkedDataHub-Apps/refs/heads/develop/packages/skos/layout.xsl> .
-
-<https://atomgraph.com/#company> a foaf:Organization ;
-    foaf:name "AtomGraph" ;
-    foaf:homepage <https://atomgraph.com> .
diff --git a/packages/skos/layout.xsl b/packages/skos/layout.xsl
deleted file mode 100644
index bea9ee24..00000000
--- a/packages/skos/layout.xsl
+++ /dev/null
@@ -1,61 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE xsl:stylesheet [
-    <!ENTITY ldh    "https://w3id.org/atomgraph/linkeddatahub#">
-    <!ENTITY ac     "https://w3id.org/atomgraph/client#">
-    <!ENTITY rdf    "http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-    <!ENTITY rdfs   "http://www.w3.org/2000/01/rdf-schema#">
-    <!ENTITY xsd    "http://www.w3.org/2001/XMLSchema#">
-    <!ENTITY skos   "http://www.w3.org/2004/02/skos/core#">
-    <!ENTITY srx    "http://www.w3.org/2005/sparql-results#">
-    <!ENTITY foaf   "http://xmlns.com/foaf/0.1/">
-]>
-<xsl:stylesheet version="2.0"
-xmlns="http://www.w3.org/1999/xhtml"
-xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-xmlns:xhtml="http://www.w3.org/1999/xhtml"
-xmlns:xs="http://www.w3.org/2001/XMLSchema"
-xmlns:ldh="&ldh;"
-xmlns:ac="&ac;"
-xmlns:rdf="&rdf;"
-xmlns:rdfs="&rdfs;"
-xmlns:xsd="&xsd;"
-xmlns:skos="&skos;"
-xmlns:srx="&srx;"
-xmlns:foaf="&foaf;"
-xmlns:bs2="http://graphity.org/xsl/bootstrap/2.3.2"
-exclude-result-prefixes="#all">
-
-    <xsl:param name="ldh:base" as="xs:anyURI" static="yes"/>
-
-    <xsl:import _href="{resolve-uri('static/com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/layout.xsl', $ldh:base)}"/>
-
-    <xsl:param name="foaf:Agent" as="document-node()?"/>
-
-    <xsl:template match="rdf:RDF | srx:sparql" mode="xhtml:Style">
-        <xsl:param name="load-wymeditor" select="exists($foaf:Agent//@rdf:about)" as="xs:boolean"/>
-        <xsl:param name="load-yasqe" select="true()" as="xs:boolean"/>
-
-        <xsl:apply-imports/>
-
-        <!-- inject custom Bootstrap theme that overrides the default one -->
-        <link href="{resolve-uri('static/com/linkeddatahub/demo/skos/css/bootstrap.css', $ac:contextUri)}" rel="stylesheet" type="text/css"/>
-        <!-- re-apply LinkedDataHub's Bootstrap customizations -->
-        <link href="{resolve-uri('static/com/atomgraph/linkeddatahub/css/bootstrap.css', $ac:contextUri)}" rel="stylesheet" type="text/css"/>
-
-        <xsl:if test="$load-wymeditor">
-            <link href="{resolve-uri('static/com/atomgraph/linkeddatahub/js/wymeditor/skins/default/skin.css', $ac:contextUri)}" rel="stylesheet" type="text/css"/>
-        </xsl:if>
-        <xsl:if test="$load-yasqe">
-            <link href="{resolve-uri('static/css/yasqe.css', $ac:contextUri)}" rel="stylesheet" type="text/css"/>
-        </xsl:if>
-    </xsl:template>
-
-    <xsl:template match="rdf:RDF" mode="xhtml:Style">
-        <xsl:next-match/>
-
-        <link href="{resolve-uri('static/com/linkeddatahub/demo/skos/css/bootstrap.css', $ac:contextUri)}" rel="stylesheet" type="text/css"/>
-    </xsl:template>
-
-    <xsl:template match="skos:narrower | skos:broader | skos:related | skos:member" mode="bs2:PropertyList"/>
-    
-</xsl:stylesheet>
\ No newline at end of file
diff --git a/packages/skos/ns.ttl b/packages/skos/ns.ttl
deleted file mode 100644
index 5cf3aa04..00000000
--- a/packages/skos/ns.ttl
+++ /dev/null
@@ -1,202 +0,0 @@
-@prefix : <#> .
-@prefix dct: <http://purl.org/dc/terms/> .
-@prefix dh: <https://www.w3.org/ns/ldt/document-hierarchy#> .
-@prefix foaf: <http://xmlns.com/foaf/0.1/> .
-@prefix ldh: <https://w3id.org/atomgraph/linkeddatahub#> .
-@prefix owl: <http://www.w3.org/2002/07/owl#> .
-@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
-@prefix skos: <http://www.w3.org/2004/02/skos/core#> .
-@prefix sp: <http://spinrdf.org/sp#> .
-@prefix spin: <http://spinrdf.org/spin#> .
-
-<> a dh:Item ;
-    dct:title "SKOS package ontology" ;
-    foaf:primaryTopic : .
-
-: a owl:Ontology ;
-    owl:imports <http://www.w3.org/2004/02/skos/core> ;
-    rdfs:label "SKOS package ontology".
-
-# Concept
-
-skos:Concept spin:constructor :ConceptConstructor ;
-    spin:constraint :MissingPrefLabel .
-
-:ConceptConstructor a ldh:Constructor ;
-    rdfs:label "Concept constructor" ;
-    dct:title "Concept constructor" ;
-    sp:text """
-        PREFIX skos:    <http://www.w3.org/2004/02/skos/core#>
-        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
-
-        CONSTRUCT {
-            $this skos:prefLabel [ a xsd:string ] ;
-                skos:altLabel [ a xsd:string ] ;
-                skos:definition [ a xsd:string ] ;
-                skos:broader [ a skos:Concept ] ;
-                skos:narrower [ a skos:Concept ] ;
-                skos:related [ a skos:Concept ] ;
-                skos:inScheme [ a skos:ConceptScheme ] .
-        }
-        WHERE {}""" ;
-    rdfs:isDefinedBy : .
-
-# narrower
-
-skos:narrower ldh:view :NarrowerConcepts .
-
-:NarrowerConcepts a ldh:View ;
-    dct:title "Narrower concepts" ;
-    spin:query :SelectNarrowerConcepts ;
-    rdfs:isDefinedBy : .
-
-:SelectNarrowerConcepts a sp:Select ;
-    rdfs:label "Select narrower concepts" ;
-    dct:title "Select narrower concepts" ;
-    sp:text """
-PREFIX  skos: <http://www.w3.org/2004/02/skos/core#>
-
-SELECT DISTINCT  ?narrower
-WHERE
-  { GRAPH ?graph
-      { $about  skos:narrower  ?narrower .
-        GRAPH ?narrowerGraph
-        {
-          ?narrower skos:prefLabel ?prefLabel .
-          FILTER (langMatches(lang(?prefLabel), "en") || lang(?prefLabel) = "")
-        }
-      }
-  }
-ORDER BY ?prefLabel
-""" ;
-    rdfs:isDefinedBy : .
-
-# broader
-
-skos:broader ldh:view :BroaderConcepts .
-
-:BroaderConcepts a ldh:View ;
-    dct:title "Broader concepts" ;
-    spin:query :SelectBroaderConcepts ;
-    rdfs:isDefinedBy : .
-
-:SelectBroaderConcepts a sp:Select ;
-    rdfs:label "Select broader concepts" ;
-    dct:title "Select broader concepts" ;
-    sp:text """
-PREFIX  skos: <http://www.w3.org/2004/02/skos/core#>
-
-SELECT DISTINCT  ?broader
-WHERE
-  { GRAPH ?graph
-      { $about  skos:broader  ?broader .
-        GRAPH ?broaderGraph
-        {
-          ?broader skos:prefLabel ?prefLabel .
-          FILTER (langMatches(lang(?prefLabel), "en") || lang(?prefLabel) = "")
-        }
-      }
-  }
-ORDER BY ?prefLabel
-""" ;
-    rdfs:isDefinedBy : .
-
-# Collection
-
-skos:Collection spin:constructor :CollectionConstructor ;
-    spin:constraint :MissingPrefLabel .
-
-:CollectionConstructor a ldh:Constructor ;
-    rdfs:label "Collection constructor" ;
-    dct:title "Collection constructor" ;
-    sp:text """
-        PREFIX skos:    <http://www.w3.org/2004/02/skos/core#>
-        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
-
-        CONSTRUCT {
-            $this skos:prefLabel [ a xsd:string ] ;
-                skos:definition [ a xsd:string ] ;
-                skos:member [ a skos:Concept ] .
-        }
-        WHERE {}""" ;
-    rdfs:isDefinedBy : .
-
-skos:member ldh:view :CollectionMembers .
-
-:CollectionMembers a ldh:View ;
-    dct:title "Collection members" ;
-    spin:query :SelectCollectionMembers ;
-    rdfs:isDefinedBy : .
-
-:SelectCollectionMembers a sp:Select ;
-    rdfs:label "Select collection members" ;
-    dct:title "Select collection members" ;
-    sp:text """
-PREFIX  skos: <http://www.w3.org/2004/02/skos/core#>
-
-SELECT DISTINCT  ?member
-WHERE
-  { GRAPH ?graph
-      { $about  skos:member  ?member .
-        GRAPH ?memberGraph
-        {
-          ?member skos:prefLabel ?prefLabel .
-          FILTER (langMatches(lang(?prefLabel), "en") || lang(?prefLabel) = "")
-        }
-      }
-  }
-ORDER BY ?prefLabel
-""" ;
-    rdfs:isDefinedBy : .
-
-# ConceptScheme
-
-skos:ConceptScheme spin:constructor :ConceptSchemeConstructor .
-
-:ConceptSchemeConstructor a ldh:Constructor ;
-    rdfs:label "Concept scheme constructor" ;
-    dct:title "Concept scheme constructor" ;
-    sp:text """
-        PREFIX skos:    <http://www.w3.org/2004/02/skos/core#>
-        PREFIX xsd:     <http://www.w3.org/2001/XMLSchema#>
-        PREFIX dct:     <http://purl.org/dc/terms/>
-
-        CONSTRUCT {
-            $this dct:title [ a xsd:string ] ;
-                dct:description [ a xsd:string ] ;
-                skos:hasTopConcept [ a skos:Concept ] .
-        }
-        WHERE {}""" ;
-    rdfs:isDefinedBy : .
-
-skos:inScheme ldh:inverseView :ConceptsInScheme .
-
-:ConceptsInScheme a ldh:View ;
-    dct:title "Concepts in scheme" ;
-    spin:query :SelectConceptsInScheme ;
-    rdfs:isDefinedBy : .
-
-:SelectConceptsInScheme a sp:Select ;
-    rdfs:label "Select concepts in scheme" ;
-    dct:title "Select concepts in scheme" ;
-    sp:text """
-PREFIX  skos: <http://www.w3.org/2004/02/skos/core#>
-
-SELECT DISTINCT  ?concept
-WHERE
-  { GRAPH ?graph
-      { ?concept  skos:inScheme  $about ;
-            skos:prefLabel ?prefLabel .
-        FILTER (langMatches(lang(?prefLabel), "en") || lang(?prefLabel) = "")
-      }
-  }
-ORDER BY ?prefLabel
-""" ;
-    rdfs:isDefinedBy : .
-
-# Constraints
-
-:MissingPrefLabel a ldh:MissingPropertyValue ;
-    rdfs:label "Missing skos:prefLabel" ;
-    sp:arg1 skos:prefLabel ;
-    rdfs:isDefinedBy : .
diff --git a/packages/update-folder.sh b/packages/update-folder.sh
deleted file mode 100755
index 9e08551f..00000000
--- a/packages/update-folder.sh
+++ /dev/null
@@ -1,88 +0,0 @@
-#!/bin/bash
-
-if [ "$#" -ne 5 ] && [ "$#" -ne 6 ]; then
-  echo "Usage:   $0" '$base $cert_pem_file $cert_password $pwd $abs_folder [$proxy]' >&2
-  echo "Example: $0" 'https://localhost:4443/ ../../ssl/owner/cert.pem Password /folder /folder/ [https://localhost:5443/]' >&2
-  echo "Note: special characters such as $ need to be escaped in passwords!" >&2
-  exit 1
-fi
-
-base="$1"
-cert_pem_file="$2"
-cert_password="$3"
-pwd="$4"
-folder="$5"
-
-if [ -n "$6" ]; then
-    proxy="$6"
-else
-    proxy="$base"
-fi
-
-ldhignore_file="$folder/.ldhignore"
-
-is_ldhignored() {
-    local name
-    name="$(basename "$1")"
-    [[ -f "$ldhignore_file" ]] || return 1
-    while IFS= read -r pattern || [[ -n "$pattern" ]]; do
-        [[ -z "$pattern" || "$pattern" == \#* ]] && continue
-        pattern="${pattern%/}"
-        [[ "$name" == $pattern ]] && return 0
-    done < "$ldhignore_file"
-    return 1
-}
-
-echo "Processing folder: $folder"  # Debug output
-
-for ttl_file in "$folder"/*.ttl; do
-  if [[ -f "$ttl_file" ]]; then
-    if git check-ignore -q "$ttl_file" 2>/dev/null || is_ldhignored "$ttl_file"; then
-      printf "Skipping %s\n" "$ttl_file"
-      continue
-    fi
-    echo "Found .ttl file: $ttl_file"  # Debug output
-    path="${ttl_file%.*}"   # strip extension
-    path="${path#*$pwd/}"   # strip leading $pwd/
-    path="${path}/"         # add trailing slash
-    printf "\n### Updating %s\n" "${base}${path}"
-    cat "$ttl_file" | turtle --base="${base}${path}" | put.sh \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      -t "application/n-triples" \
-      "${base}${path}"
-  fi
-done
-
-for file in "$folder"/*; do
-  if [[ -f "$file" ]] && [[ "$file" != *.ttl ]] && [[ "$file" != *.sh ]]; then
-    if git check-ignore -q "$file" 2>/dev/null || is_ldhignored "$file"; then
-      printf "Skipping %s\n" "$file"
-      continue
-    fi
-    stripped="${folder#$pwd/}"
-    if [[ "$stripped" == "$folder" ]]; then
-      container_path=""
-    else
-      container_path="${stripped}/"
-    fi
-    echo "Uploading file: $file to ${base}${container_path}"  # Debug output
-    add-file.sh \
-      -b "$base" \
-      -f "$cert_pem_file" \
-      -p "$cert_password" \
-      --proxy "$proxy" \
-      --title "$(basename "$file")" \
-      --file "$file" \
-      "${base}${container_path}"
-  fi
-done
-
-while IFS= read -r subdir; do
-  if git check-ignore -q "$subdir" 2>/dev/null || is_ldhignored "$subdir"; then
-    printf "Skipping %s\n" "$subdir"
-    continue
-  fi
-  ./update-folder.sh "$base" "$cert_pem_file" "$cert_password" "$pwd" "$subdir" "$proxy"
-done < <(find "$folder" -mindepth 1 -maxdepth 1 -type d -not -name '.*' -not -name 'target')
diff --git a/screencast/.gitignore b/screencast/.gitignore
new file mode 100644
index 00000000..dd3c35f5
--- /dev/null
+++ b/screencast/.gitignore
@@ -0,0 +1,10 @@
+node_modules/
+tracks/
+shots/
+docs/out/
+readme/out/
+# the vector mock's captures: written by scenes/capture-*.mjs from the running dataspace
+mock/states/
+mock/templates/
+mock/assets/*.png
+mock/assets/*.json
diff --git a/screencast/FINDINGS.md b/screencast/FINDINGS.md
new file mode 100644
index 00000000..cb71c38d
--- /dev/null
+++ b/screencast/FINDINGS.md
@@ -0,0 +1,476 @@
+# Defects found while scripting the screencast scenes
+
+Found by driving the real UI on `northwind-traders.demo.localhost` (linkeddatahub.com
+stack, ~5,700 graphs) with Playwright. None are fixed — this is a handoff.
+
+Every measurement below was taken against the running instance. Where something is
+a hypothesis rather than a measurement it says so.
+
+---
+
+## 1. Facet values never load on large containers
+
+**Severity** Blocking — the facet is unusable on the two biggest containers.
+
+**Reproduce**
+1. Open `https://northwind-traders.demo.localhost/orders/` (830 orders).
+2. Click any facet pill in `.ldh-view-toolbar .left`.
+3. `.facet-loading` and its indeterminate progress bar never resolve.
+
+Also reproduces on `/customers/` (89 rows, "Company name" facet). Does **not**
+reproduce on `/products/` (77) or `/employees/` (9), which answer in 1.5–4 s.
+
+**Observed** The `POST /sparql` is issued 0.1 s after the click and never returns.
+No console error, no failed request, no HTTP error status — the browser just waits.
+
+**Measured** Taking the exact query the client sends and running it directly:
+
+| Query | Time |
+|---|---|
+| as issued | **28 s** |
+| identical, with the label `OPTIONAL` removed | **0 s** |
+
+The entire cost is the label lookup.
+
+**Cause** The facet value query appends a label lookup for the facet's values:
+
+```sparql
+OPTIONAL {
+  { ?companyName (rdfs:label|dc:title|dct:title|foaf:name|foaf:givenName|foaf:familyName|skos:prefLabel) ?label }
+  UNION
+  { GRAPH ?labelGraph { ?companyName (…same 7-way path…) ?label } }
+}
+```
+
+`?companyName` is bound by `schema:legalName`, so it is a **literal**. A literal can
+never be the subject of a triple, so this OPTIONAL is guaranteed to match nothing.
+The expensive half is the second branch — an unbound-graph scan with a
+seven-alternative property path across every graph in the store.
+
+**Where to start** The facet value query is assembled in
+`src/main/webapp/static/com/atomgraph/linkeddatahub/xsl/client/query-transforms.xsl`
+— the `SAMPLE()` of labels around `:546`, and the label property path around
+`:640`–`:730`. Note the path there has a different alternative set from the one in
+`client.xsl:132`/`:139`, so there are two label-path definitions in play.
+
+**Suggested fix** Skip the label lookup when the facet's values are literals, or
+guard it with `FILTER(!isLiteral(?value))`. The first branch alone is cheap; it is
+the `GRAPH ?labelGraph` union that scans the store. Whether the size of the
+container matters independently of the literal case is **not** established — the
+literal facets are simply the ones that were tested.
+
+---
+
+## 2. The × on a parallax step chip is dead, and throws
+
+**Severity** Medium — a visible control that does nothing and raises an error.
+
+**Reproduce**
+1. Open `/products/`, expand `details.ldh-pivot-bar`, click any pivot pill.
+2. The toolbar grows a chip: `→ via Category ×`.
+3. Click the **×** glyph inside the chip.
+
+**Observed** The result count stays at 8 — the pivot is not cleared — and the page
+throws:
+
+```
+Required cardinality of value in 'xsl:variable name="Q{}facet"' expression is
+exactly one; supplied value is empty
+```
+
+Clicking the chip **body** instead works correctly: the count returns to 77 and no
+error is raised. Verified both paths side by side.
+
+**Cause** `client/block/view.xsl:2486`:
+
+```xslt
+<xsl:template match="div[@typeof = '&ldh;View']//button[contains-token(@class, 'facet-pill')]/span[contains-token(@class, 'x')]"
+              mode="ixsl:onclick" priority="1">
+    <xsl:variable name="facet" select="ancestor::div[contains-token(@class, 'facet')][1]" as="element()"/>
+```
+
+The parallax chip reuses the `facet-pill` class and contains a `span.x`, so it
+matches this template — but it is rendered inside `span.parallax-steps`, which has
+**no `div.facet` ancestor**. Confirmed in the page: `e.closest('div.facet')` is
+`null` for the chip. `as="element()"` then fails on the empty sequence.
+
+The chip's markup, for reference:
+
+```html
+<span class="parallax-steps">
+  <button type="button" class="facet-pill parallax-step" title="https://schema.org/category">
+    <input name="ou" type="hidden" value="https://schema.org/category">
+    <span class="msi xs">arrow_forward</span><span class="pred">via</span><span class="val">Category</span>
+    <span class="x"><span class="msi xs">close</span></span>
+  </button>
+</span>
+```
+
+**Suggested fix** Either exclude `parallax-step` from that template's match pattern
+and give the step chip's × its own handler that removes the pivot, or make the
+pattern's `$facet` binding tolerant and branch on which kind of pill was clicked.
+The same `as="element()"` binding appears at `:2473` for the popover's Clear button;
+that one is reached only from inside `.facet-pop` and looks safe, but it is the same
+assumption.
+
+---
+
+## 3. A chart axis bound to a URI-valued variable renders raw markup
+
+**Severity** Medium — makes the natural chart of the data unusable.
+
+**Reproduce**
+1. Open `/products/`, switch the view's mode to **Chart**.
+2. Set Chart type = Bar chart, Category = `category`, Series = `price`.
+
+**Observed** Every Y-axis label is the cell's escaped HTML rather than the
+resource's label:
+
+```
+<a href="https:// northwind-traders.demo.loca…
+```
+
+repeated once per bar. Setting Category to a **literal**-valued variable (`name`)
+renders correctly — which is why the pre-existing "Products by supplier" block on
+the same page looks right: its axis is `supplierName`, a literal.
+
+**Also, in the same render** the axis title and the legend print raw property URIs
+where a label belongs — `https://schema.org/name` down the Y axis,
+`https://schema.org/price` in the legend. Same substitution, two more places.
+
+**Where to start** `client/block/chart.xsl` — the data-table construction that feeds
+Google Charts. The axis label appears to take the rendered cell rather than the
+value's label; the legend and axis title appear to take the property URI rather than
+its label. Both are hypotheses from the rendered output, not read off the code.
+
+**Effect** A chart of price by category — the question a viewer would actually ask
+— is not currently possible, which is why the scene charts price by product name.
+
+---
+
+## 4. The query editor's prefix list is blocked as mixed content
+
+**Severity** Low — a silent loss of autocomplete, not a failure.
+
+**Reproduce** Open any document in Properties, `Create ▸ SELECT`, and watch the
+console while the editor mounts.
+
+**Observed**
+
+```
+Mixed Content: The page at 'https://northwind-traders.demo.localhost/…' was loaded
+over HTTPS, but requested an insecure XMLHttpRequest endpoint
+'http://prefix.cc/popular/all.file.json'. This request has been blocked; the
+content must be served over HTTPS.
+```
+
+YASQE fetches its prefix definitions from prefix.cc over **http**, so on an HTTPS
+instance the browser blocks it and the editor comes up without prefix
+autocompletion. Nothing reports this to the user.
+
+`https://prefix.cc/popular/all.file.json` serves the same file over TLS, so this
+looks like a one-character fix wherever the endpoint is configured — or the list
+could be bundled, which would also make the editor work offline.
+
+---
+
+## 5. The SPARQL endpoint could not render HTML — **fixed**
+
+Every SPARQL result set requested as HTML used to 500. `ResultSetXSLTWriter` runs
+`layout.xsl` over SPARQL Results XML, whose root is `sparql:sparql`; `layout.xsl:718`
+bound `$local-pane` with `as="element()"` from `apply-templates … mode="ldh:TabPanel"`,
+and the only such rule was `document.xsl:463`, `match="rdf:RDF"`. Nothing matched, and
+the empty sequence failed the cardinality check.
+
+Fixed and verified 2026-09-15 on both stacks: `GET /sparql?query=…` with a browser
+`Accept` answers **200** with the results as an `ac-table`, with and without `&mode=`.
+The bare `GET /sparql` still answers 400 "Query string not provided", which is what
+the SPARQL protocol calls for — so there is no bare landing page, and
+`user-guide/query-data.ttl:19-21` is describing the query form rather than an empty
+one.
+
+---
+
+## 6. Document-scope Map mode draws Null Island when there is nothing to plot
+
+**Severity** Low — cosmetic, but it reads as a broken map and costs real debugging time.
+
+**Reproduce** Open `/territories/` and switch the **document's** layout mode (the
+action-bar toggle, not the view block's) to Map.
+
+**Observed** A world basemap centred on 0,0 — the Gulf of Guinea — with no markers.
+Indistinguishable from a map that failed to load its data.
+
+**Cause** Not a defect in the plotting path, and not a data problem. Measured:
+
+| | |
+|---|---|
+| `geo:lat` in the `/territories/` container graph | **0** |
+| `geo:lat` in the RDF the document serves | **0** |
+| territory child resources carrying `geo:lat`/`geo:long` | **53** |
+
+Document-scope Map renders the resources **the document describes**; a container
+describes its children as links, not as geometry. The *view* block's Map mode renders
+its query results and plots all 53 correctly. The coordinates themselves are plain
+literals with no datatype, which is harmless — `converters/RDFXML2GeoJSON.xsl:48`
+reads them with `xsl:value-of`, which takes the text value either way.
+
+**Suggested fix** With zero features, either do not offer Map in the document-scope
+menu, or render an empty state saying the document describes no geometry. Falling
+back to centre 0,0 zoom 2 is the one outcome that looks like a bug.
+
+
+## 7. A two-series chart labels its axis with the first series' name
+
+**Severity** Low — the chart is readable, but the label on it is wrong.
+
+**Reproduce**
+1. Save a SELECT returning one literal axis variable and two aggregates, e.g.
+   `?rep`, `(COUNT(…) AS ?territories)`, `(COUNT(…) AS ?orders)`.
+2. From the query block's action bar, Create a Result set chart: Bar chart,
+   Category `rep`, Series `territories` **and** `orders`.
+
+**Observed** The bars are correct and both series render with a legend. The value axis
+is titled **`territories`** while its scale runs 0–160, which is the range of `orders`
+(max 156; `territories` maxes at 10). So the axis is named after the first series and
+scaled to the second.
+
+**Measured** on `/workload/`, the chart built by `01-who-carries-the-load`: axis title
+`territories`, gridlines at 0, 20, … 160, `orders` reaching 156 for Peacock.
+
+**Where to start** `client/block/chart.xsl`, the same data-table construction that
+FINDINGS #3 is about. A single-series chart has one honest name for the axis; with two
+there is none, so the axis title should be dropped rather than guessed — the legend
+already names both.
+
+---
+
+## 8. `block-html` throws on a page carrying a proxied resource
+
+**Severity** Low — twice per load, nothing visibly fails.
+
+**Observed** Loading a ContentMode document that embeds a resource from another
+dataspace through the proxy raises, twice:
+
+```
+Required cardinality of value in 'xsl:variable name="Q{}block-html"' expression is
+exactly one; supplied value is empty
+```
+
+Seen on `/category-alignment/` once the UNESCO concept is embedded beside the local
+category grid, alongside six `404 (Not Found)` resource loads on the same page. The
+blocks render regardless, so this is noise hiding real errors rather than a failure —
+the same category as the `[object DocumentFragment]` entry below, but this one does
+correlate with a gesture, which makes it worth chasing first.
+
+---
+
+## 9. The chart pane selects every variable as a series, including the category
+
+**Severity** Low — self-inflicted error message on a form that just opened.
+
+**Reproduce**
+1. Save a SELECT with a literal category and one or more aggregates.
+2. Open its block's **Chart** tab.
+
+**Observed** The Series multi-select arrives with **every** result variable selected,
+the category among them. With `?city` and `?orders` that draws the city twice — a
+Table with two identical columns. With `?rep`, `?territories` and `?orders` and a bar
+chart it draws nothing and shows a red banner instead:
+
+```
+All series on a given axis must be of the same data type
+```
+
+The category is a string and the aggregates are integers, so the default selection is
+guaranteed to be invalid the moment the chart type is anything but Table. Correcting
+the Series makes it render; nothing else is wrong.
+
+**Suggested fix** Default the Series to the variables that are *not* bound to the
+Category — or to the numeric ones. The current default is never the one wanted.
+
+**And it comes back after a successful save.** Creating a chart from the pane's own
+Create button writes a correct resource — verified on `/workload/`:
+`ldh:categoryVarName "rep"`, `ldh:seriesVarName "territories", "orders"`,
+`ldh:chartType ac:BarChart`. The pane behind it then re-renders **back to the invalid
+default**, so a successful action leaves a red error on screen. The configuration the
+user just confirmed by saving is discarded rather than kept.
+
+Even reading the pane as a scratch surface whose artifact is the saved chart, resetting
+to a state that immediately errors is the wrong reset: the valid configuration is
+inferable — numeric variables as series, the string one as category — and was just
+demonstrated.
+
+The block offers no tab to switch away to, so nothing in the UI dismisses it.
+
+**Working around it on camera** `lib/constructors.mjs` `configureChart()` sets the chart
+type first, then the category, then the series **last** — the reverse order looks right
+and is worse, because changing the type re-renders the pane and resets the multi-select,
+which saves the error into the chart. The selection is read back and re-applied once
+rather than assumed.
+
+---
+
+## 10. A class without a constructor gets an empty Create form, and Save writes a nameless document
+
+**Where** the `button.add-instance` on a derived inverse view (`client/block/view.xsl:493`),
+on `/regions/4/` — "Cities in this region" — where the class is `schema:City`.
+
+**What happens** The modal opens with the type chip ("Territory") and the add-property
+combobox, and nothing else: the Northwind ontology defines a constructor for
+`schema:Product` only. Save is enabled, and it creates a document under `/territories/`
+holding one typed, nameless fragment resource — which then counts in the view ("Total
+results 10" for eight territories) and, having no coordinates, plots nowhere.
+
+**Expected** Either the form says the class has no constructor and offers to build one, or
+Save is held back until the resource has at least a name — the ontology's own
+`ldh:MissingPropertyValue` constraint exists for exactly this, and the shape it would check
+against is what is missing.
+
+**Worked around** the demo ontology gets a Territory constructor
+(`demo/northwind-traders/admin/model/ns.ttl`, `:CityConstructor`), PATCHed into
+`admin.northwind-traders…/ontologies/namespace/` as a single `INSERT … WHERE {}` and made
+live with `ldh admin clear ontology` against the **admin** base (against the end-user base
+`/clear` is 403); the two nameless documents were deleted. Three inverse views went in the
+same way — `:ProductsInCategory`, `:EmployeesServingTerritory`, `:DirectReports` — so
+category, territory and employee pages list what points at them.
+
+---
+
+## 11. A stack restart drops the dataspace's package imports
+
+**Where** `linkeddatahub.com` compose stack; `ldh packages list -b https://northwind-traders…`.
+
+**What happens** After `docker compose restart` the Taxonomy Editor package reads
+`available` again, and a `packages add` issued while the entrypoint is still initialising is
+overwritten by it: `/` answers 200 from the cache well before the settings are rewritten, so
+"the stack is up" is not "the entrypoint is done". Re-adding after Tomcat's startup message
+sticks.
+
+**Cost** scene 04's `skos:exactMatch` typeahead comes up empty (the SKOS vocabulary
+arrives only with the package), and the scene fails 105 s in.
+
+---
+
+## 12. Table mode promises sortable columns and its headers are labels
+
+**Where** any view in Table mode — the layout switcher describes it as "Property values
+in sortable columns"; seen on the derived "Products in this category" view on
+`/categories/1/`.
+
+**What happens** A header is `<th scope="col"><span title="https://schema.org/price">Price</span></th>`:
+no control, no `aria-sort`, and clicking it changes nothing. Twelve beverages stay in
+document order however many times Price is clicked.
+
+**Expected** Either the headers sort — the toolbar already knows how to order a view — or
+the mode description stops saying they do.
+
+**Cost** scene 10 planned to sort the category's products by price to bring the dearest to
+the top; it reads the column instead.
+
+---
+
+## 13. The create modal's add-property row fails for a resource property
+
+**Where** the add-instance modal (`button.add-instance` on a derived view, e.g. Direct
+reports on `/employees/2/` constructing a `schema:Person`), foot row `.ldh-prop-addrow`.
+
+**What happens** Selecting `areaServed` (a resource property, `rdfs:range schema:City`)
+and pressing Add shows "The form could not be loaded — the page ran into an unexpected
+error" and adds no row. Selecting `type` in the same modal adds a row. The same select and
+Add on the **edit** form of an existing Person (`/employees/7/`) adds an `areaServed` row
+with a lookup combobox as expected.
+
+**Expected** the create modal behaves like the edit form: one more lookup row.
+
+**Cost** a hire with four territories cannot be made in one form; scene 02 assigns one in
+the modal and the other three on the new record's edit form.
+
+---
+
+## 14. Create-from-view ends in two different places, and the view it came from does not refresh
+
+**Where** `button.add-instance` on derived views: Cities in this region (`schema:City`),
+Products in this category (`schema:Product`), Orders from this customer (`schema:Order`).
+
+**What happens** Saving a City navigates to the new document. Saving a Product or an Order
+closes the modal and leaves the page where it was — with the view still showing the old
+count ("Total results 12" after the thirteenth product was created); the new row appears
+only after the page is loaded again.
+
+**Expected** one behaviour for all constructors, and the view that offered the Create
+button re-reading itself after a successful save — that is the loop the button exists for.
+
+**Cost** scenes 11 and 13 re-read their list by clicking the page's own title link; the
+rig waits for either the navigation or the modal closing (`createFromView`).
+
+---
+
+## 15. A block reorder by drag is refused with 412 and never saved
+
+**Severity** Blocking for authoring — every drag-and-drop reorder in the browser is lost.
+
+**Reproduce**
+1. Open any document with two blocks in Content mode with write access.
+2. Drag the first block's handle onto the second and drop.
+3. The blocks swap on screen; the console shows `PATCH … 412 (Precondition Failed)`;
+   reload and the order is back.
+
+`scenes/probe-drag-native.mjs` does this on a scratch document and replays the app's
+own PATCH under every pairing of ETag and Accept.
+
+**Measured** The document's ETag differs per representation, and the write's
+precondition is checked against the representation the PATCH's *own* `Accept` selects:
+
+| If-Match taken from | Accept on the PATCH | Status |
+|---|---|---|
+| `text/turtle` GET | `text/turtle` | **204** |
+| `text/turtle` GET | `*/*` | 412 |
+| `text/html` GET | `text/turtle` or `*/*` | 412 |
+| `application/rdf+xml` GET | `text/turtle` or `*/*` | 412 |
+| none | any | 428 |
+
+The client sends the ETag of the RDF it fetched with a PATCH whose `Accept` selects a
+different representation, so the two never match.
+
+**Cause** (hypothesis) The conditional-write check derives the expected ETag from
+content negotiation on the write request rather than from the stored graph. A strong
+validator for a write should not depend on which representation the client read.
+
+**Also settled here** A real pointer drag *does* reach the app's handlers on this
+build: `dragover` marks the target row (the dotted drop line renders) and `drop` fires.
+The synthetic DragEvents in `lib/editing.mjs` on the `screencast-supercut` branch were
+a workaround for an older build and are no longer needed; a pointer drag also puts the
+browser's drag image under the pointer, which the synthetic path never could.
+
+---
+
+## Not reproduced / not attributed
+
+- **`Terminated with [object DocumentFragment]`** appears twice on essentially every
+  page load, including loads with no interaction at all. It does not correlate with
+  any gesture the scenes perform, and nothing visibly fails. Probably benign
+  Saxon-JS template termination, but it is noise that hides real errors.
+
+## Notes that are behaviour, not bugs
+
+- **`details.ldh-pivot-bar` is collapsed by default.** Its pills report
+  `visibility: visible`, `opacity: 1` and a 127×28 box, but `checkVisibility()` is
+  `false` and Playwright counts none visible, because a closed `<details>` renders
+  no content. A scene must click the `<summary>` first.
+- **The first-time message modal blocks every click on a fresh browser profile**;
+  its backdrop swallows pointer events. Seed the `LinkedDataHub.first-time-message`
+  cookie (`client.xsl:216`, `modal.xsl:720`) instead of dismissing it on camera.
+- **`:5443` resolves an app base without its port.** Passing the client-cert port as
+  `--proxy` to an installer whose base carries `:4443` makes every write 400, since
+  the document URIs then sit outside the app's base.
+- **SKOS properties are not offered by the RDFa annotation typeahead until the
+  Taxonomy Editor package is imported.** `ldh packages list` reports it as `available`
+  rather than `installed` on a fresh Northwind, and with it missing the property
+  combobox answers `exact` with nothing at all — not a slow lookup, an empty panel
+  after 10s. `ldh packages add --package https://packages.linkeddatahub.com/editor/taxonomy/#this`
+  restores it and takes effect without a restart. The vocabulary a dataspace offers is
+  the vocabulary its packages bring, so a scene that annotates with `skos:exactMatch`
+  depends on that import the way it depends on the data.
+- **The app centres a ~1230 px content column**, so a 1920-wide capture is mostly
+  empty gradient with small type. Scenes render at 1440×810.
diff --git a/screencast/Makefile b/screencast/Makefile
new file mode 100644
index 00000000..476ff899
--- /dev/null
+++ b/screencast/Makefile
@@ -0,0 +1,247 @@
+SHELL := /bin/bash
+
+# Every path and origin below is an overridable default — the harness itself knows
+# none of them. Filming the Northwind scenes means pointing BASE at a dataspace
+# that holds the data, and CERT_* at the stack that serves it:
+#
+#   make screencasts BASE=https://northwind-traders.demo.localhost \
+#       CERT_FILE=../../linkeddatahub.com/ssl/owner/keystore.p12 \
+#       CERT_PASSWORD_FILE=../../linkeddatahub.com/secrets/owner_cert_password.txt
+#
+BASE ?= https://localhost:4443
+CERT_FILE ?= ../../LinkedDataHub/ssl/owner/keystore.p12
+CERT_PASSWORD_FILE ?= ../../LinkedDataHub/secrets/owner_cert_password.txt
+
+# Set to pass the secret directly instead of reading CERT_PASSWORD_FILE.
+CERT_PASSWORD ?=
+
+# Passed through to a single scene run: --headed, --slowmo 250, --take 2, --anonymous
+FLAGS ?=
+
+SCENES := $(sort $(patsubst scenes/%.mjs,%,$(filter-out scenes/probe%,$(wildcard scenes/*.mjs))))
+
+OPTS := --base $(BASE)
+ifneq ($(strip $(CERT_FILE)),)
+OPTS += --cert-file $(CERT_FILE)
+endif
+ifneq ($(strip $(CERT_PASSWORD)),)
+OPTS += --cert-password $(CERT_PASSWORD)
+endif
+ifneq ($(strip $(CERT_PASSWORD_FILE)),)
+OPTS += --cert-password-file $(CERT_PASSWORD_FILE)
+endif
+
+# Playwright writes webm/VP8 and cannot be asked for anything else, so every
+# deliverable goes through one transcode.
+CRF ?= 20
+
+# Every transcode is paced: static stretches are detected in the footage and sped
+# up, while pointer travel, typing and redraws stay at 1x. A uniform speed-up would
+# scale the gestures too and read as fast-forward.
+#
+# DWELL is how fast the dead air runs. 1 disables pacing entirely.
+# DWELLS compares several from one capture, writing <scene>-dwell<N>x.mp4 each.
+#   make mp4 DWELL=4            make mp4 DWELLS="2 3 5"
+DWELL ?= 3
+DWELLS ?=
+
+# Uniform speed-up, for the cases that want one — a muted hero loop, say. Secondary
+# to pacing; see the mp4-uniform target.
+SPEED ?= 1
+SPEEDS ?= $(SPEED)
+
+# A scene opens on the document whose loaded render IS its strongest frame, so there
+# is no teaser to configure and no beat to lift. All that is left is the page load in
+# front of it, which `render/head.mjs` trims to the first beat — measured, since a
+# scene fires that beat the instant its opening view has painted.
+
+# Extra uniform speed-ups emitted ALONGSIDE the paced cut, from the paced cut — so
+# the dead air is already compressed and the multiplier applies on top of that.
+# 1.5 rather than 2: pacing has already removed the waiting, so the multiplier is
+# working on gestures alone and 2x reads as fast-forward.
+# Set EXTRA_SPEEDS= to emit the paced cut alone.
+EXTRA_SPEEDS ?= 1.5
+
+# Publishing the docs shots. The shoot writes masters: 2880px lossless PNG (1440x810
+# at deviceScaleFactor 2) and both a .webm and an .mp4 per clip. None of that is what
+# a documentation page should download, and the .ttl references are content-addressed,
+# so the bytes have to be final before they are hashed.
+DOCS_OUT ?= docs/out
+DOCS_DEST ?= ../docs
+DOCS_WIDTH ?= 2240
+DOCS_QUALITY ?= 90
+
+.PHONY: help deps screencasts screenshots docs-publish docs-fill readme-shots scene tape probe mp4 mp4-uniform hero supercut clean
+
+help:
+	@echo "make screencasts [BASE=…] [CERT_FILE=…] [CERT_PASSWORD=…] [FLAGS=…]"
+	@echo "                    render every scene in scenes/ to tracks/"
+	@echo "make scene SCENE=02-where-we-have-nobody [FLAGS=--headed]"
+	@echo "                    render one scene"
+	@echo "make mp4 [DWELL=3] [DWELLS=\"2 4\"] [CRF=20] [EXTRA_SPEEDS=\"1.5\"]"
+	@echo "                    transcode to H.264, speeding up only the dead air,"
+	@echo "                    plus a uniform Nx of that paced cut (default 1.5x)"
+	@echo "make mp4-uniform SPEEDS=\"1 2\""
+	@echo "                    transcode at a flat speed, gestures included"
+	@echo "make screenshots [BASE=…]"
+	@echo "                    run every scene for stills only, into shots/<scene>/"
+	@echo "make docs-publish [DOCS_WIDTH=2240] [DOCS_QUALITY=90]"
+	@echo "                    optimise docs/out/ into ../docs/, printing sha1 per file"
+	@echo "make docs-fill      point the .ttl sources at the published files (idempotent)"
+	@echo "make readme-shots [README_BASE=…] [README_CERT_FILE=…] [README_CERT_PASSWORD_FILE=…]"
+	@echo "                    re-shoot the demo pictures the repository README shows"
+	@echo "make tape TAPE=get-started-setup [WORKDIR=…]"
+	@echo "                    record one terminal tape to tracks/, without the shoot"
+	@echo "make hero           cut the front page's hero loop from tracks/supercut.mp4 per hero.json"
+	@echo "make supercut       the captioned supercut at full size, per supercut.json"
+	@echo "make probe PATH=/customers/"
+	@echo "                    dump the chrome at a path, so selectors come from the app"
+	@echo "make clean          remove rendered tracks"
+	@echo ""
+	@echo "Scenes: $(SCENES)"
+	@echo "Base:   $(BASE)"
+
+deps: node_modules
+node_modules: package.json
+	npm install
+	@touch node_modules
+
+screencasts: deps
+	@for s in $(SCENES); do \
+		echo "── $$s"; \
+		node scenes/$$s.mjs $(OPTS) $(FLAGS) || exit 1; \
+	done
+	@$(MAKE) --no-print-directory mp4
+
+# Stills only — no video, one PNG per beat. Fills the docs' 33 empty placeholders.
+screenshots: deps
+	@for s in $(SCENES); do \
+		echo "── $$s"; \
+		node scenes/$$s.mjs $(OPTS) --shots --no-video $(FLAGS) || exit 1; \
+	done
+
+# Point the .ttl sources at what docs-publish wrote. Idempotent: a re-shoot changes the
+# hash, and this rewrites the reference in place rather than needing a placeholder that
+# is no longer there. Run it after docs-publish, every time.
+docs-fill:
+	@node docs/fill.mjs
+
+# The repository README's demo pictures: three dataspaces, so the base is a pattern whose
+# {app} is each demo's folder name. The defaults are the linkeddatahub.com stack, which
+# serves all three demos; the pictures are written straight into ../demo/*/.
+README_BASE ?= https://{app}.demo.localhost
+README_CERT_FILE ?= ../../linkeddatahub.com/ssl/owner/keystore.p12
+README_CERT_PASSWORD_FILE ?= ../../linkeddatahub.com/secrets/owner_cert_password.txt
+readme-shots: deps
+	node readme/shoot.mjs --base '$(README_BASE)' --cert-file $(README_CERT_FILE) --cert-password-file $(README_CERT_PASSWORD_FILE) $(FLAGS)
+
+# Publish the docs shots as web assets and print each one's uploads/ address.
+#
+# Stills become WebP capped at DOCS_WIDTH — true 2x for the docs' widest content
+# column, so nothing softens on a retina display while the bytes drop by ~76%.
+# The .mp4s already carry CRF 20, yuv420p and a leading moov atom, so they are
+# copied rather than re-encoded; the .webm twins are not published.
+#
+# The sha1 printed per file IS its {base}uploads/{sha1} address, which is what the
+# .ttl references are written from. Hashing the published file rather than the
+# master is the whole point of doing this before the references are written.
+docs-publish:
+	@command -v cwebp > /dev/null || { echo "cwebp is required (brew install webp)" >&2; exit 1; }
+	@find $(DOCS_OUT) \( -name '*.png' -o -name '*.mp4' \) | sort | while read -r src; do \
+		rel="$${src#$(DOCS_OUT)/}"; \
+		case "$$src" in \
+			*.png) dest="$(DOCS_DEST)/$${rel%.png}.webp"; \
+				mkdir -p "$$(dirname "$$dest")"; \
+				cwebp -quiet -q $(DOCS_QUALITY) -m 6 -sharp_yuv -resize $(DOCS_WIDTH) 0 "$$src" -o "$$dest" || exit 1;; \
+			*.mp4) dest="$(DOCS_DEST)/$$rel"; \
+				mkdir -p "$$(dirname "$$dest")"; \
+				cp "$$src" "$$dest" || exit 1;; \
+		esac; \
+		printf "%s  %s\n" "$$(sha1sum "$$dest" | cut -d' ' -f1)" "$${dest#$(DOCS_DEST)/}"; \
+	done
+
+# The supercut: one-gesture shots cut from the gesture takes (scenes/supercut-*.mjs)
+# between their <id>-start / <id>-end beats, captioned and joined. SUPERCUT names the
+# shot list.
+SUPERCUT ?= render/supercut.json
+supercut:
+	node render/supercut.mjs $(SUPERCUT)
+
+mp4:
+	@shopt -s nullglob; \
+	for w in tracks/*.webm; do \
+		b="$${w%.webm}"; \
+		if [ -z "$(DWELLS)" ]; then \
+			node render/pace.mjs "$$w" "$$b.mp4" --dwell $(DWELL) --crf $(CRF) \
+				--marks "$$b.marks.json" --out-marks "$$b.paced.marks.json" || exit 1; \
+			node render/head.mjs "$$b.mp4" --marks "$$b.paced.marks.json" --crf $(CRF) || exit 1; \
+			for sp in $(EXTRA_SPEEDS); do \
+				echo "── $$b-$${sp}x.mp4"; \
+				ffmpeg -y -loglevel error -i "$$b.mp4" -filter:v "setpts=PTS/$$sp" -an \
+					-c:v libx264 -preset medium -crf $(CRF) -pix_fmt yuv420p \
+					-movflags +faststart "$$b-$${sp}x.mp4" || exit 1; \
+				[ -f "$$b.paced.marks.json" ] && \
+					node render/respeed.mjs "$$b.paced.marks.json" "$$sp" "$$b-$${sp}x.marks.json"; \
+			done; \
+		else \
+			for d in $(DWELLS); do \
+				node render/pace.mjs "$$w" "$$b-dwell$${d}x.mp4" --dwell $$d --crf $(CRF) \
+					--marks "$$b.marks.json" --out-marks "$$b-dwell$${d}x.marks.json" || exit 1; \
+			done; \
+		fi; \
+	done
+
+mp4-uniform:
+	@shopt -s nullglob; \
+	for w in tracks/*.webm; do \
+		for sp in $(SPEEDS); do \
+			suffix=""; vf=""; \
+			if [ "$$sp" != "1" ]; then \
+				suffix="-$${sp}x"; \
+				vf="-filter:v setpts=PTS/$$sp -an"; \
+			fi; \
+			m="$${w%.webm}$${suffix}.mp4"; \
+			[ -f "$$m" ] && [ "$$m" -nt "$$w" ] && continue; \
+			echo "── $$m"; \
+			ffmpeg -y -loglevel error -i "$$w" $$vf -c:v libx264 -preset medium -crf $(CRF) \
+				-pix_fmt yuv420p -movflags +faststart "$$m" || exit 1; \
+			if [ -n "$$suffix" ] && [ -f "$${w%.webm}.marks.json" ]; then \
+				node render/respeed.mjs "$${w%.webm}.marks.json" "$$sp" "$${w%.webm}$${suffix}.marks.json"; \
+			fi; \
+		done; \
+	done
+
+scene: deps
+	@test -n "$(SCENE)" || { echo "SCENE= is required, one of: $(SCENES)"; exit 2; }
+	node scenes/$(SCENE).mjs $(OPTS) $(FLAGS)
+
+# Record one tape on its own, for iterating without the whole shoot around it. The
+# geometry and the typing speed come from lib/terminal.mjs, the same as in a shot, so
+# what this writes is what the shoot would write.
+#
+#   make tape TAPE=get-started-setup
+#
+# WORKDIR is where the tape does its work; tapes that need one read $LDH_CLIP_DIR.
+WORKDIR ?= $(shell mktemp -d)
+tape: deps
+	@command -v vhs > /dev/null || { echo "vhs is required (brew install vhs)" >&2; exit 1; }
+	@LDH_CLIP_DIR="$(WORKDIR)" node -e "import('./lib/terminal.mjs').then(async (m) => { \
+	  const r = await m.record('tapes/$(TAPE).tape', { output: 'tracks/$(TAPE).mp4', env: { LDH_CLIP_DIR: process.env.LDH_CLIP_DIR } }); \
+	  console.log(r.ok ? 'recorded tracks/$(TAPE).mp4 in ' + r.seconds + 's' : 'failed: ' + r.why); \
+	  process.exit(r.ok ? 0 : 1); })"
+
+# The front page's hero loop: the supercut master with its chrome and old captions
+# cropped away, the stretches hero.json names cut out, and hero.json's captions laid
+# over it in the platform's Geist. Writes tracks/hero.mp4, a poster and a contact sheet.
+hero: deps
+	node render/hero.mjs hero.json
+
+# The same pass at the master's size: the captioned supercut itself, for YouTube and the README.
+supercut: deps
+	node render/hero.mjs supercut.json
+
+probe: deps
+	node scenes/probe.mjs --path $(or $(PATH_),/customers/) $(OPTS) $(FLAGS)
+
+clean:
+	rm -rf tracks/*.webm tracks/*.mp4 tracks/*.marks.json shots/*
diff --git a/screencast/README.md b/screencast/README.md
new file mode 100644
index 00000000..918d770d
--- /dev/null
+++ b/screencast/README.md
@@ -0,0 +1,381 @@
+# screencast
+
+Scripted Playwright scenes that record LinkedDataHub workflows against a running
+instance, and the tooling to pace, review and still them.
+
+A scene is a workflow, not a tour. It opens on a question somebody would actually
+ask, each step follows from the one before, and it ends by answering it — usually
+by writing the finding into a ContentMode document, so the recording leaves an
+artefact behind rather than a memory.
+
+It also opens on a frame worth watching. The document a scene starts from is chosen
+so that its loaded render — a map of pins, a grid of photographs, a force graph — is
+already the strongest thing the clip has, because the first two seconds decide who
+stays. That is a property of the workflow, not of the edit: nothing is lifted forward,
+and the page the scene writes into is opened late, once there is something to put on
+it.
+
+The five scenes, in the order they answer best:
+
+| Scene | opens on | question |
+|---|---|---|
+| `02-where-we-have-nobody` | `/territories/`, 53 pins | which territories have no sales rep? — then a hire covers them, and the map is read again |
+| `04-is-our-beverages-theirs` | `/categories/`, eight photographs | does a published vocabulary mean what we mean? |
+| `06-worked-from-london` | `/employees/`, nine faces | which US territories are worked from London? — then one is handed to Seattle |
+| `07-one-rep-for-the-south` | `/territories/`, 53 pins | how thinly is each region staffed? |
+| `08-late-customer-or-shipper` | a late order in Graph mode | do late orders follow the customer or the carrier? — then the order is marked delivered and the chart re-read |
+| `09-opening-houston` | `/territories/`, 53 pins | a new territory, created from the region's own list |
+| `10-the-dearest-thing` | `/categories/`, eight photographs | the dearest product's bare page, documented from outside |
+| `11-a-new-order` | a customer's page, their orders listed | an order booked from the customer's own list; the list read again |
+| `13-a-new-product` | `/categories/`, eight photographs | a product created from the category's own list; the list read again |
+| `14-reporting-lines` | `/employees/`, nine faces | one reporting link re-pointed; both managers' lists read again |
+| `16-a-territory-where-the-orders-are` | `/territories/`, 53 pins | US deliveries with no territory, charted; a territory opened where most land; the chart read again |
+
+Each of those five writes a block saying *why* the opening state was on screen and what
+it could not answer — a strong first frame the rest of the clip never refers back to is
+decoration, and the seam shows.
+
+## Running
+
+```bash
+make screencasts BASE=https://northwind-traders.demo.localhost \
+  CERT_FILE=../../linkeddatahub.com/ssl/owner/keystore.p12 \
+  CERT_PASSWORD_FILE=../../linkeddatahub.com/secrets/owner_cert_password.txt
+
+make scene SCENE=02-where-we-have-nobody FLAGS=--headed   # watch one drive
+make screenshots                              # stills only, no video
+make mp4 DWELLS="2 4"                         # compare pacings
+make probe PATH_=/products/                   # dump a page's chrome
+
+node docs/shoot.mjs --base … --cert-file … --cert-password-file …
+make docs-publish                             # optimise docs/out/ into ../docs/
+```
+
+Nothing is hardcoded: origin, keystore, password and the `ldh` binary are all
+parameters, with the Makefile carrying overridable defaults. The off-camera fixture
+resets shell out to `ldh`, so it must be on PATH (`../../LinkedDataHub/cli/bin`) or named
+by `LDH_BIN`; a scene whose reset fails stops before the browser opens rather than
+filming last take's leftovers.
+
+## Output
+
+Each scene writes a **track** (`tracks/<scene>.webm`) and a **marks sidecar** — an
+edit list of beat timestamps, so cuts come from numbers rather than scrubbing. The
+transcode is **paced**: `render/pace.mjs` detects static stretches with ffmpeg's
+`freezedetect` and speeds only those up, leaving pointer travel, typing and redraws
+at 1x. A uniform speed-up scales the gestures too and reads as fast-forward. The
+sidecar is remapped onto the new timeline, since the mapping is piecewise.
+
+Then `render/head.mjs` cuts the page load off the front. That is the only edit made to
+the opening, and it is a trim rather than a rearrangement: a scene **starts** on the
+document whose loaded render is its strongest frame, so there is no payoff to lift
+forward and nothing is shown out of order. Where to cut is measured, not chosen —
+a scene fires its first beat the instant its opening view has painted, and the trim
+lands 0.3s before it.
+
+`render/stitch.mjs` turns a scroll a take made into ground the camera can cross, for a
+take that jumped: a browser's own scroll is a 300 ms glide, but its frames are one page
+at successive offsets, so the script measures each frame's shift, lays the rows into one
+tall still (`tracks/<take>.scroll.png`, fixed chrome dropped) and ends it on the frame
+the cut resumes from; the cutter reads a `.png` track as a still whose `from`/`to` span
+the pan in seconds. The compose take no longer needs it: the scene glides the form up
+with `easeScrollTo` before the Title click and `easeScrollTop` before the mode switch and
+the drag, so the camera rides the page's own scroll from the query editor down to Save.
+
+Shots that continue one take abut exactly: a shot's lead (`leadSeconds`) and trail
+(`trailSeconds`) overlap its neighbour by 0.2 s, so a continuing shot carries
+`fromOffset: 0.2` and the join lands on the frame the previous shot ended on. A shot's
+`startFocus` or `focus` box may carry its own `minZoom`/`maxZoom`/`pad`, so a shot can
+start on the tight frame its predecessor held and land on a wider one. Every framing
+runs on zoompan now — the crop filter's size is fixed for a stream, so it could slide
+but never zoom, and its rounding differed from zoompan's by a pixel at a join.
+
+`render/review.mjs` answers the three questions worth asking: did every beat happen
+(an aborted run does not report green), did the page end up rich, and does anything
+embed an `ldh:Object` inside another one. `--sheet` builds a contact sheet from the
+paced timeline.
+
+## A shot with a camera move
+
+A raw track is the whole viewport at 2x. When a passage needs the window to follow the
+work — tight on the editor while a query is typed, over to the button that submits it,
+out again once the result is on screen — `render/camera.mjs` cuts the shot from the take
+with a keyframed zoom and pan:
+
+```bash
+node render/camera.mjs tracks/supercut-compose.webm tracks/.supercut/q2c.mp4 \
+  --from 9 --to 44.4 --keys camera/q2c.keys.json
+```
+
+The keys are a list of `{ t, z, cx, cy }` on the take's timeline in the take's pixels,
+and each move eases in and out, so the window settles rather than stops. With
+`--pace N` the passage is paced first, at full size, and the keys are remapped through
+the pacer's marks before the camera runs; pacing after the camera would speed a move up
+wherever the page under it happened to be still. Where a recording really does jump
+from one scroll position to the next, `--scroll FILE` replaces the jump with a scroll
+rendered from the take's stitched full-page capture, given the offset the page already
+sits at and how far it moves. Measure first: the compose take's scroll turned out to be
+an eased 1.3 s animation, smooth as recorded, and a splice built on the assumption of a
+jump was what made it lurch. The supercut's query-to-chart passage is one of these
+shots; its keys are committed under `camera/`.
+
+## The hero loop
+
+The front page of linkeddatahub.com runs a muted loop cut from the supercut master.
+`make hero` derives it: `render/hero.mjs` crops the browser chrome off the top and the
+master's own caption strip off the bottom, drops the stretches `hero.json` names in
+`cuts`, and lays `hero.json`'s captions over what is left, each rendered in the browser
+in the platform's Geist and overlaid for its span. Caption times are written on the
+master's timeline, so moving a cut does not mean retiming every line.
+
+The captions name the LinkedDataHub feature on screen at that moment, never the demo's
+subject matter: "A form, generated from the class", not "a territory, opened". The
+output is `tracks/hero.mp4` with a poster and a contact sheet beside it; the site repo
+copies the loop into its root, where `ldh push` uploads it.
+
+## Documentation media
+
+The scenes above answer a question. The docs shots answer a placeholder: every
+`div.screenshot-placeholder` in `../docs/**.ttl` is one slot, and `docs/manifest.mjs`
+is the shot list that binds each slot — by its `.ttl`, its line, and its caption
+verbatim — to what has to be on screen.
+
+**Taking them.** `node docs/shoot.mjs` drives the same rig as the scenes — same
+cursor, same geometry, same cookie — with docs discipline: one browser context per
+shot, so a failure costs one asset rather than the run, and the pointer hidden for
+stills, because a documentation screenshot should not show a cursor that is not
+really there. Geometry is 1440x810 at `deviceScaleFactor: 2`, so a still comes out
+2880px wide.
+
+Each entry carries a `want` selector asserted **after** `act` and **before** the
+capture. Without it the runner only ever proved that `act()` did not throw, which
+once passed three byte-identical stills. A shot whose `want` is not met is reported
+as missed, not shot.
+
+`blocked` marks the slots that cannot be shot against the demo dataspace as it
+stands, each with its reason — writes into demo documents, features not wired on
+that dataspace, before/after pairs needing a deploy between the two shots. They stay
+as placeholders rather than silently missing.
+
+The run writes `docs/out/<doc>-<n>.<ext>` mirroring the docs tree, plus an
+`index.json` recording slot, caption, file and outcome. Nothing in the shoot touches
+a `.ttl`.
+
+**Recording the clips.** A clip slot records a `.webm` the way a scene does, then
+goes through `render/pace.mjs` — freezedetect finds the static stretches and speeds
+only those up, so gestures stay at 1x — and lands as H.264: CRF 20, `yuv420p`, and
+`-movflags +faststart`, which puts the `moov` atom ahead of the media so the clip
+starts playing before it finishes downloading.
+
+**Recording a terminal.** A few slots are a shell rather than a page — the Docker setup
+the get-started guide opens with, and, when the long cut is made, its CLI beats and the
+right-hand pane of the split-screen teaser. Those are `kind: 'terminal'`: the shot names
+a tape in `tapes/`, and `lib/terminal.mjs` drives [VHS](https://github.com/charmbracelet/vhs)
+over a real pty (`brew install vhs`). A tape is to a terminal what a scene is to a
+browser — committed, and running the real commands.
+
+The producer owns two things the tape does not. Geometry, so a terminal clip cuts with a
+browser clip: 1440x810 at 25fps, prepended to the tape at run time so tapes carry no
+dimensions. And the readiness check, because the assertion worth making about a setup
+recording is that the setup worked — `watch` names a URL, and any HTTP answer counts,
+since an instance that is up but refuses an anonymous caller replies 403. That probe runs
+*while* the recording does, because a tape that ends with a stack still attached to the
+shell loses it the moment VHS exits.
+
+From there the path is a clip's: the same `render/pace.mjs`, the same encoding, the same
+record, so `fill.mjs` writes the same `<video>` and knows nothing about where it came
+from. `make tape TAPE=<name>` records one on its own while you iterate.
+
+One honest limitation: VHS types at a single fixed speed, which is the tell `lib/typing.mjs`
+exists to avoid. The preamble sets 55ms, that module's base for code, so a command reads
+at the pace a person types one — but without the per-character jitter a scene gets.
+
+**Publishing them.** What the shoot writes are masters, not web assets: 2880px
+lossless PNG, and both a `.webm` and an `.mp4` per clip. `make docs-publish` derives
+the shipping copies into `../docs/`, sibling to the `.ttl` that uses them:
+
+- stills become WebP at `-q 90 -m 6 -sharp_yuv -resize 2240` — 2240px is true 2x for
+  the docs' widest content column (1112px), so nothing softens on a retina display
+  while the bytes drop by about three quarters
+- the `.mp4`s are copied rather than re-encoded; they are already web-optimised, and
+  a second pass would only soften screen-capture text
+- the `.webm` twins are not published
+
+Then it prints `sha1  path` per published file. That hash **is** the file's address:
+LinkedDataHub stores uploads content-addressed at `{base}uploads/{sha1}`, and the
+`.ttl` references are written from this table. Which is why optimisation happens
+here and not later — hashing a master would address bytes that never ship.
+
+**Referencing them.** A slot is filled by replacing the whole placeholder `div`
+with the element (`make docs-fill` does this, idempotently). The reference is
+absolute: `uploads/` is a flat namespace anchored at the base URI, outside the
+document hierarchy, so a relative path would encode the referring document's depth
+and break every image in a document that later moves:
+
+```xml
+<img alt="The document tree with a container expanded" src="/uploads/f367…"></img>
+<video aria-label="Browsing and navigating data" controls="controls" preload="metadata" src="/uploads/109f…"></video>
+```
+
+Attributes alphabetical, explicit end tags, each start tag on one line — these live
+inside `rdf:XMLLiteral` bodies, which RDF 1.1 requires in canonical form and
+`../check-xmlliterals.sh` enforces.
+
+A clip is a `<video>` and not an `<object>` for a reason worth writing down: every
+upload is served with `Content-Security-Policy: default-src 'none'; sandbox`, the
+LNK-011 stored-XSS fix. An `<object>` loads the file as a nested **document**, so
+that header governs the document's own media load, and Chrome blocks it — Firefox
+does not, so the failure reads as browser-specific when it is a header doing exactly
+its job. A `<video>` is a subresource of the page instead. Images are unaffected for
+the same reason, which is why all 21 stills were fine while all 3 clips were black.
+
+From there the existing machinery carries them, unchanged: `ldh push` (run by
+`docs/install.sh`) uploads every non-RDF file in a folder to that folder's document, and the static
+build rewrites `uploads/{sha1}` to `files/{name}` through `docs/files.xml`,
+terminating on a hash it cannot find — so a clean `make ttl-to-html` is the proof
+that every baked hash resolves.
+
+## README pictures
+
+The repository README's demo pictures — the Northwind parallax GIF, the Copenhagen
+school map and the two UNESCO Thesaurus stills — are shot by `readme/shoot.mjs`, with
+the same want-before-capture rule as the docs shoot.
+
+```bash
+make readme-shots   # defaults to https://{app}.demo.localhost on the linkeddatahub.com stack
+```
+
+They span three dataspaces, so the base is a pattern and `{app}` is each demo's folder
+name. Nothing content-addresses these files, so they are written straight into
+`../demo/*/` under the names the README links and each demo's `.ldhignore` skips:
+stills downscaled to 1920px from 2x masters, the GIF at 960px and 12 fps from the
+recorded `.webm`, trimmed to start at the gesture. The masters go to `readme/out/`.
+
+## Rules the scenes follow
+
+- **Open on the strongest frame the data gives.** A scene begins on a document whose
+  loaded render is already a map, a grid or a graph — never on the blank page it will
+  write into, and never on a payoff spliced to the front.
+- **One `page.goto()` per scene, and it is the opening.** Every later move is a click
+  the viewer can follow: the write-up page is created on camera with `Create ▸ Item`
+  after a breadcrumb to Root, and reached again the same way. A second `goto` is a cut
+  to a page nobody saw you reach.
+- **No URI is known in advance.** To reference a resource, navigate to it, copy its
+  URI with the app's own control, and paste. Synthesising a `?mode=` URL is the
+  same violation in the address bar — except for the scene's own starting document,
+  where a saved layout mode is part of the bookmark.
+- **Copy the inner resource**, not the `ldh:Object` block wrapping it — nesting
+  renders two stacked headers for one piece of content.
+- **No no-op gestures.** Do not switch to a mode already in force; helpers return
+  `'already'` so a beat can say so.
+- **Presence in the DOM is not availability.** Collapsed `<details>`, ContentMode-only
+  add buttons, the `inert` hover-gated drawer, canvas-drawn map pins (the harness captures the `ol.Map` instances, so a pin is located by its resource URI) and
+  hover-revealed copy controls each need a real gesture first.
+- **Scope to the active pane.** Inactive tabs stay in the DOM, so an unscoped
+  locator can drive a tab nobody is looking at — see `lib/dom.mjs`.
+
+`FINDINGS.md` records the product defects these scenes ran into.
+
+## Supercut
+
+`make supercut` cuts `tracks/supercut.mp4` (every shot) and `tracks/supercut-spine.mp4`
+(the shots flagged `spine`) from the gesture takes, following `render/supercut.json`: each
+shot is the stretch of a track between its `<id>-start` and `<id>-end` beats, led in by
+0.3 s and stopped 0.1 s short (a beat and its gesture are the same instant), capped from
+the front at `maxSeconds` (shifted by `fromOffset` / `toOffset` seconds — a negative
+`toOffset` ends a shot before a helper's dead settle), framed on the component the beat's
+`focus` box names — `move: "push"` closes in from the full frame over the whole shot,
+`"static"` holds the box's frame throughout, `"pan"` moves from the start beat's box to the
+end beat's over `moveSeconds` (1.4 s by default — a move between blocks is gradual, never
+a jump) at `moveAt` (negative counts back from the gesture's end, where the new block has
+just appeared); zoom between `minZoom` (1.4) and `maxZoom` (2.4)
+per shot, anchored on the box's top part; every beat carries the drawn cursor's position
+(`pointer`, added by the harness), which shapes the frame only for a shot with
+`keepPointer: true` (unioning it into every frame flattened the pans, so it is off by
+default) — held on its last frame,
+captioned (rendered by Playwright, overlaid), and joined by hard cuts through the concat
+demuxer — one decoder at a time; a single xfade graph over every input was killed for
+memory twice.
+
+The cut is now **one connected flow on Northwind**, `scenes/supercut-northwind-flow.mjs`:
+one recording, and after the opening load no page is reached by a goto. The Employees
+view opens in Graph mode (its `ac:mode` is patched to `ac:GraphMode` off camera and put
+back afterwards); an employee's node blooms with its own document; the Territory pill
+pivots the graph to the 53 territories and the Region pill to the four regions; the
+Southern node's link opens the region's page. Everything else happens on that page: a
+city through the form and its pin on the region's own map (the view re-reads itself after
+Save); Create ▸ SELECT, the query typed and saved; a bar chart from it; Content mode from
+the document's mode toggle; a sentence; the chart embedded as an Object; the sentence
+dragged below it. The whole take is 2× footage, graph included: `lib/graph.mjs` scales
+the canvas-local points `graph2ScreenCoords` returns by the document's CSS zoom (the
+canvas rect is in zoomed viewport pixels, the graph's own coordinates are not), so the
+earlier zoom-1 exception for graph takes is gone. Southern's blocks and the
+previous take's query and chart are cleared off camera first. Beats mark 17 shots; the
+cut list picks the stretches, so what the viewer does not see (the form being filled at
+3×, the query typed at 2×) is compressed, never cut to another page.
+
+Earlier takes stay in `scenes/` for the record: `supercut-northwind-graph.mjs` (the order
+graph, then the customer record's Related results hopped to the reps and on to their
+territories, Rockville opened, a rep hired for it on the Person form its view constructs,
+the grid re-read one face richer, the breadcrumb up to Sales territories — one take, so
+the cut moves the camera between those beats and never cuts; recorded with
+`SCHEME=dark`, like every take in the dark cut), `supercut-northwind.mjs` (gesture shots 4, 9, 15, 12, 8), `supercut-compose.mjs`
+(the compose sequence on its own page — one take from the query to the drag, cut as one continuous camera: every shot continues the previous one, the long gestures at 2–3×), `supercut-unesco.mjs`, `supercut-ltlod.mjs`, and
+the Rebrickable pair `supercut-rebrickable.mjs` / `supercut-rebrickable-flow.mjs` —
+Rebrickable was dropped from the cut: its stack runs `atomgraph/linkeddatahub:5.6.0`,
+which has no dark theme, so its shots came out light in a dark cut.
+
+The takes are 2× footage: a 2880×1800 viewport with the document zoomed 200 %
+(`lib/supercut.mjs`), since the video is the viewport in CSS pixels. `FLAGS=--shots=6,9`
+records a subset of a gesture take; **rename the take to its own track straight after**
+(`supercut-rebrickable-b`), then point the JSON's shots at it — a second `make scene` of
+the same file overwrites `tracks/<scene>.webm`, which is how one good take was lost.
+
+Stacks: `linkeddatahub.com` serves Northwind and UNESCO; Rebrickable is `:4444`; LTLOD is
+`:4443`. Each stack's nginx also binds a client-certificate port, and the defaults collide
+— LTLOD's 5443 with `linkeddatahub.com`, Rebrickable's 5444 with the LinkedDataHub dev
+stack — so start them with a free one: `HTTPS_CLIENT_CERT_PORT=5445 docker compose up -d`
+in `../LTLOD`, `HTTPS_CLIENT_CERT_PORT=5446 docker compose up -d nginx` in `../Rebrickable`
+(the port is only nginx's; the rest of the stack is unaffected). `docker compose stop` /
+`docker compose start` put everything back.
+
+A page scroll on camera is `easeScrollTo` (`lib/supercut.mjs`): the page glides to the
+element over ~1.4 s on an ease-in-out, so a static crop reads as a slow pan. The
+browser's own smooth scroll is a 300 ms lurch, and a pan in the cutter over a page that
+jumps underneath cannot be smooth either.
+
+Drag-and-drop on camera is the app's own drag events (`dragBlock` in `lib/editing.mjs`):
+Playwright's pointer drags and `dragTo` never reach the handler, a dispatched `DragEvent`
+whose `DataTransfer` carries `application/vnd.atomgraph.linkeddatahub.block` does, and the
+pointer overlay travels alongside. The app moves the dragged block **after** the drop
+target (`client/block.xsl:612`), so a drop on the previous sibling is a no-op — to put the
+chart above the sentence, the sentence is dragged onto the chart.
+
+Not in the cut, and why:
+
+- **File drop** — the content body accepts only the app's block type (`client/block.xsl:698`);
+  the set's edit form on Rebrickable offers no file input either (`foaf:depiction` is a URL).
+- **Map popup on LTLOD** — the pixel-scan pin click did not open a popup at 2×.
+- **Search on Rebrickable** — the dialog answered "the endpoint could not be reached" on
+  a 158 k-document search; the lookup-by-title combobox also times out there, so the
+  grid embed pastes a copied URI instead.
+- **Tree expand on UNESCO** — the branch did not open (4 rows before and after).
+- **Versioning, ACL, import wizard** — not shot: no history on these stacks; the other two
+  were not designed.
+
+## Vector mock (retired)
+
+Retired 2026-09-18: too much of every shot was imitation and the result read as fake beside
+the recorded cut. Left in place, not extended. The shots were not screen recordings. Each shot is a page under `mock/`
+(`form-pin.html`, `bloom.html`, `shapes.html`) that composes the app's **own components** —
+markup and stylesheets captured from the running dataspace (`scenes/capture-states.mjs`
+writes `mock/states/app.css` with every `@import` and `url()` inlined, plus the modal, the
+view block head, the results in each mode, the graph chrome as `mock/templates/*.html`) —
+around **made-up data**, and animates between states on a `window.render(t)` timeline.
+`render/mock.mjs` serves the page, steps `t` frame by frame, screenshots at 2× and encodes:
+crisp at any zoom, no cursor, no chrome the shot does not want, and the timing is the
+shot's, not the app's. Maps, graphs and charts are drawn (SVG over a captured basemap;
+d3-force for layout, in the app's hue-per-type idiom) because their canvases do not
+serialise. The contract: every **state** shown is one the product produces; the **motion**
+between states is invented; the **data** is whatever reads best. `render/mock-cut.json` +
+`make supercut SUPERCUT=render/mock-cut.json` joins the shots.
diff --git a/screencast/RULES.md b/screencast/RULES.md
new file mode 100644
index 00000000..2dd62d76
--- /dev/null
+++ b/screencast/RULES.md
@@ -0,0 +1,442 @@
+# Rules for scripted scenes
+
+Every rule here came from watching a recording and finding it wrong, or from
+measuring the running instance. They are constraints on what a scene may do, not
+style preferences: a recording is a claim about what using the product is like, so a
+step the audience could not reproduce is a false claim even when the pixels look
+right.
+
+Measurements are against `northwind-traders.demo.localhost` unless stated.
+
+## Navigating
+
+**A URI is never known, it is fetched.** No scene types or pastes a URI it merely
+happens to know, into a form field or the address bar. To reference a resource,
+navigate there by the most efficient route the interface offers, press the app's own
+copy control, and carry the value back on the clipboard as a real `Meta+V`.
+Synthesising a URL is the same violation — reaching ContentMode means clicking the
+mode switcher, not appending `?mode=…#ContentMode`. The one exception is the scene's
+own starting document: opening it is opening a bookmark.
+
+**But a name is not a URI.** Any resource can be looked up in a combobox by its
+title, name or label, without knowing its URI beforehand — and that is not a
+shortcut around the interface, because the app does the lookup and binds the URI
+itself, on camera. Typing `Territories` into the Object block's Value field offers:
+
+```
+Occupied territories            Concept
+Non-self governing territories  Concept
+All territories                 Object
+Employee territories            CONSTRUCT
+Employee territories            CSV import
+employee_territories.csv        File
+```
+
+**Typing is not choosing.** The text in the box is only text — the binding happens
+when a suggestion is *clicked*, because each `li.ac-cb-item` carries the URI in its
+`@title` and in a hidden `input[name="ou"]`, and that hidden input is what the form
+submits. The gesture is three parts and all three are on camera: type the label, read
+the types in the dropdown, click the right one.
+
+Each suggestion carries its **type**, and that is load-bearing, because **titles are
+not unique**: Northwind's `categories.ttl` titles three resources "Products per
+category" — an `ldh:Object`, an `ldh:ResultSetChart` and an `sp:Select` — and
+"All customers" returns both an `Object` and a `View`. So a lookup always names the
+kind it wants, never just the label; taking the first suggestion picks arbitrarily,
+and taking the `Object` is the nesting bug arriving by a different door. A scene that
+*creates* a resource whose title already exists in the data gives it a different one,
+since no type filter separates two `sp:Select`s of the same name. Prefer this to the navigate-copy-return errand wherever the title is
+known — it is strongest right after the scene has typed that title itself while
+creating the resource. Fall back to navigate-and-copy only where the typeahead cannot
+reach: another dataspace, or anything arriving through the proxy.
+
+**When a copy IS needed, copy the inner URI.** From an Object block, take the URI of
+the chart, query or view inside it, never the wrapping Object's. Using the Object's
+URI for a new Object nests them and doubles the header chrome.
+
+**Take the shortest honest route.** Every gesture costs screen time and attention, so
+the route through a workflow should be the fewest reproducible steps that reach the
+goal — not the most thorough demonstration of the navigation. The full inventory, in
+rough order of how much they save:
+
+| shortcut | replaces |
+|---|---|
+| **combobox lookup by title** | navigating to a resource, copying its URI, coming back — about four beats each time |
+| **the chart's Create on a query block** | a separate chart constructor plus a URI errand |
+| **double-click a graph node** | opening each related document to see what connects |
+| **the backlinks popover** | a query, or guessing what points here |
+| **parallax pivot while filtered** | re-filtering the related set by hand — the pivot carries the facet with it |
+| **the search dialog** | scrolling a container, or a label facet (which hangs) |
+| **the document tree / breadcrumbs** | retracing a path link by link |
+| **tab switch** | browser back across a dataspace boundary, which does not work |
+
+The drawer opens on a left-edge `mousemove` at `clientX === 0` exactly
+(`client/navigation.xsl:307`); while closed it is `inert`.
+
+The limit on all of this is reproducibility: a shortcut the viewer can see and repeat
+is a shortcut, and anything else is a cheat — which is why a typed URI is out and a
+typed *title* is in.
+
+**Search, not a label facet, finds a resource by name.** The drawer's search is an
+input: it opens the search dialog on submit, and the dialog renders its results as an
+ordinary view. There is no typeahead dropdown on it.
+
+**Graph mode has three node gestures, and they do three different things**
+(`client/graph3d.xsl`). **Double-click expands forward**: the node's properties appear
+and the graph grows to include what it points at, following the data rather than the
+document, so the expansion crosses document boundaries. **Right-click expands
+backwards** along the backlinks — what points *at* this node. **Single click selects**:
+it renders the node's description into `#info-content-<canvas-id>`.
+
+That info panel is the way out of the canvas. `rdf:Description` in mode
+`ldh:graph3d-info` emits `<a href="{$node-id}" target="_blank">`, so the node's URI is
+an ordinary link and clicking it opens the document in a new browser tab — the app does
+not intercept it. **The graph is therefore not a dead end**, and a scene that opens on
+it does not have to leave graph mode to prove the canvas is part of the dataspace.
+
+Two things about that link, both found the hard way. It appears **only for a node that
+has a description in the loaded graph**: the click handler falls back to rendering the
+bare label for a stub, and that fallback emits no anchor — so select a node *after*
+expanding it, not before. And the anchor is inline inside a taller `<dd>`, so the
+centre of its bounding box resolves to the `<dd>`; a click aimed there is refused by the
+hit-target check while the link sits visibly under the pointer. `lib/graph.mjs`
+`select()` returns a point that `elementFromPoint` actually resolves to the anchor.
+
+A static force layout is a hairball; an expanding one is the graph being walked.
+
+**Every block has a backlinks button** (`button.tb-links`), which traverses the graph
+backwards — the only route from a resource to what points at it. What it yields
+depends on which way the data points: `/employees/2/` lists ten referrers,
+`/products/1/` five, `/orders/10265/` one, `/customers/` none. Check before building a
+beat on it — and check *what* it yields, not just how many. On a territory it answers
+with the content blocks that reference it rather than with the rep who serves it,
+because `schema:areaServed` points from the employee and a block reference is a
+referrer too. A backlinks beat that expected a person gets a list of `id<uuid>` blocks.
+
+**A map marker's popup carries the resource's own controls**, so a pin is a drill-down
+and not just a dot: the popup holds the title as a link, the type chip, `button.tb-links`,
+`button.btn-copy-uri`, `button.btn-edit`, and the resource's property values as links —
+including `schema:containedInPlace`, which is how a territory reaches its region without
+leaving the map.
+
+**The pin is chosen before the click, never by clicking.** Opening pins in turn until one
+turns out to be Southern is trial and error on camera — a viewer sees the cursor wander,
+and a pixel scan cannot tell pins apart or even find the ones that overlap. The harness
+captures every `ol.Map` the page builds (`window.__olMaps`, `lib/harness.mjs`), and each
+feature's id is the resource URI (`client/map.xsl`), so `clickMarker(page, cursor, uris)`
+asks the map where a known resource's pin is, scrolls it into view if it is below the fold,
+and clicks it once. The URIs come from a read-only SPARQL query at scene start
+(`lib/sparql.mjs`), like every other value a scene depends on.
+
+**A graph node is under the pointer only when the canvas says so.** The 3D projection
+of a node is not where its click lands: label sprites are drawn above every node and take
+hits, so a double-click aimed at a customer once dereferenced the `schema:Order` class
+sitting 16 px below it and pulled 97 nodes of schema.org into the canvas. The canvas
+dispatches `ForceGraph3DNodeHoverOn` with the hovered node's id
+(`client/3d-force-graph.xsl`), so `approach()` in `lib/graph.mjs` moves the pointer, reads
+that id back, tries a ring of nearby points, and turns the view by dragging when none of
+them is the node meant — and `expand()` confirms afterwards that the document it loaded is
+the node's own. Nothing on the canvas is clicked on a projected coordinate alone.
+
+**The strongest scenes close a loop: read → write → the same read again.** Opening Houston
+works because the territory map is read at the open (53), a territory is created, and the
+same map is read at the close (54). The write is not the point; the second read is — it
+shows the app answering to what was just put into it. A scene that reads, then writes a
+query or a chart, then reads *that*, has added a lens; the data it opened on is unchanged,
+and the clip is thinner for it. So: open on evidence, write into the data, and end on the
+evidence re-read through the same view, query or chart.  Scored as **C** in the rubric.
+
+**W is the multiplier, and it has to be used as one.** A scene that changes the data is
+not thereby realistic: "A rep moves to Seattle" moved a pin by typing latitude and
+longitude into a person's record — a loop (C 10) along a real route (R 9) that nobody
+would ever walk — and it scored 74 because W sat at 8, where every scene's W sat.
+The scale: **10** a job someone does this week, in exactly this way; **8** a real job,
+done a plausible way; **6** a real question, but a workflow a demo invents; **4** the
+data changes, but no one would make it change like that; **2** staged. Below 6 the
+scene is not shot, whatever the other columns say.
+
+**Returning from a proxied dataspace is a tab switch, not browser back** — and a tab
+switch does not change the URL.
+
+## Filtering
+
+**Never facet on a label.** Name, Title, Company name, `rdfs:label`, and
+`skos:prefLabel` — the last one included in the UNESCO thesaurus, whose Concepts
+container leads with it. These hang: the facet value query appends a label lookup
+over values that are already literals, and the second branch is an unbound-graph scan
+with a seven-alternative property path across every graph in the store. Measured at
+**28 s**, against **0 s** with the `OPTIONAL` removed (FINDINGS.md #1). A label facet
+is a text lookup wearing a filter's clothes; facets are for filtering by a relation.
+
+**Pivot while filtered.** The parallax pivot carries the facet with it, so filtering
+and then pivoting answers "who is behind *these*". Measured on `/products/`: pivot to
+Provider unfiltered gives 29 suppliers; filter to three categories first and the same
+pivot gives 18, with the toolbar still showing `category 3 selected` beside
+`via Provider`.
+
+**`details.ldh-pivot-bar` is collapsed by default.** Its pills report
+`visibility: visible` and a 127×28 box, but a closed `<details>` renders no content,
+so a scene must click the `<summary>` first.
+
+## Querying
+
+**Every document is a named graph**, named by the document URI, because data is
+written through the Graph Store Protocol. Nothing lands in the default graph, so
+every query needs `GRAPH ?g { … }`. Without it the query returns zero rows and the
+page draws an empty results table with correct headers — which looks exactly like a
+rendering bug and sends you after the wrong layer.
+
+**The triplestore is shared across dataspaces.** A search inside the UNESCO thesaurus
+also returns Northwind's own `Beverages` category. Disambiguate by type and by
+origin, not by label alone.
+
+**A query with aggregates goes in a chart, never in a view.** `COUNT`, `SUM`, `AVG`,
+`GROUP BY` — anything that collapses rows into a summary — is chart material. A view
+renders *resources*: its rows open, facet, pivot and link. An aggregate produces
+numbers with no resource behind them, so everything a view exists for goes dead —
+nothing to open, nothing for the facets to filter, nowhere for parallax to go. Views
+for resources, charts for summaries.
+
+**A chart over an existing query is made from the query's own form action bar.** With
+the query open, its action bar's **Create** button builds a chart with the query
+already bound — no separate constructor, and no navigate-copy-return errand to fetch
+the query's URI.
+
+**An external endpoint is a resource, and its speed is a measurement.** DBpedia,
+Wikidata, UniProt and the like are added to a dataspace as an instance of
+`sd:Service`, and a query names one with `ldh:service`; the query then feeds a view
+or a chart exactly as a local one does, so federation needs no special block.
+
+```turtle
+<#dbpedia-service> a sd:Service ;
+    dct:title "DBpedia SPARQL service" ;
+    sd:endpoint <https://dbpedia.org/sparql> ;
+    sd:supportedLanguage sd:SPARQL11Query .
+```
+
+**Hardcoded `VALUES` is not federation.** Copying local values into a remote query is
+a manual export pasted into SPARQL — the very step federation removes, and it goes
+stale the moment the data changes. A federated query runs against the **local**
+endpoint and reaches out with `SERVICE`, so the join happens at query time and the
+local side is read rather than transcribed. Such a query carries **no `ldh:service`**:
+that property binds the whole query to a remote endpoint, and the query has to execute
+locally for the local graph to be in scope. Measured: 21 of 25 customer countries
+joined live against Wikidata, 3.3 s rendered.
+
+**External data must connect to local data.** A remote result set rendered beside a
+local one is juxtaposition — it demonstrates nothing two browser tabs could not. The
+connection is either that the remote query's **inputs come from local data** (local
+values bound in with `VALUES`, so the answer is about *these* customers rather than
+about the world), or that a **mapping is written** — `skos:exactMatch`, `owl:sameAs` —
+linking the local resource to the remote one so later queries can traverse it.
+
+**Time the query against the real endpoint before building anything on it.** External
+services are slow, frequently rate-limited and sometimes down, and a view or chart
+bound to one inherits all of it. A scene that discovers this on camera has already
+failed. A worked example of the whole pattern ships in
+`LinkedDataHub-Apps/docs/user-guide/query-data.ttl:79-82`.
+
+**SPARQL typed on camera is multi-line and human-readable.** Let the editor indent,
+then read the text back and verify it matches before saving.
+
+## Modes and forms
+
+**Layout modes have two scopes, and they are different controls over different data.**
+The **document** toggle in the action bar renders the resources *this document
+describes*; the **view** toggle in the view's own controls renders *that view's query
+results*. Both menus offer the same names — Content, Properties, List, Table, Grid,
+Map, Chart, Graph — which is exactly why they get confused.
+
+Measured: `/territories/` in *document* Map mode draws an empty basemap centred on
+0,0, because the container describes no geometry. The same page's *view* in Map mode
+plots all 53 territories, because its query returns the children, which each carry
+`geo:lat`/`geo:long`. When the intent is "show these results as a map or a chart", it
+is always the view toggle.
+
+**Do not switch to a mode that is already active.** Read the state first; the mode
+helpers return `'already'`. A menu that opens and closes for nothing reads as a
+script working through a list rather than a person choosing a view. The active mode
+is on the toggle's own label — and that label runs the icon ligature straight into
+the text (`grid_viewGrid`), so a word-boundary match never fires.
+
+**Properties mode is required to create anything but XHTML and Object.** ContentMode
+offers only those two; queries, views and charts are created from Properties
+(document ReadMode), whose Create menu carries thirteen constructors.
+
+**Find form fields by their property title, never by position.** Controls are not in
+a stable order, and a positional pick silently writes into the wrong field — a title
+typed into the middle of a query URI, for instance.
+
+## Composing the page
+
+**Take the inventory before writing the scenario.** `node inventory.mjs --base …`
+prints the documents, the questions already answered as charts, the views, the saved
+queries, the classes by instance count and any declared `sd:Service`. Read it first —
+checking afterwards costs a re-record, checking first costs a command. And a *guessed*
+gap is not a gap: "which products were never ordered" looks unanswered and returns 0
+rows, because every Northwind product has been ordered. Run the question before
+scripting it.
+
+**Never create what the dataset already has.** A scene that builds a query, view or
+chart the app already ships is not showing a workflow — it is re-typing the demo, and
+it leaves near-duplicates that make every later lookup by name ambiguous. Before
+scripting a creation beat, list the existing titles and pick a question the data
+cannot yet answer. A **gap** question — which products were never ordered, which
+categories no supplier covers — is usually both novel and more interesting, because
+the answer is an absence and no existing chart is showing it.
+
+**A workflow ends in a document.** Browsing alone leaves nothing behind; a finding
+written into a ContentMode document is a deliverable, which is what makes the scene a
+job rather than a tour.
+
+**The page narrates.** Interleave `ldh:XHTML` and `ldh:Object` blocks so prose poses
+the question, an object shows the evidence, prose says what it means. The prose being
+typed *is* the narration, so the artefact is the script. This is how the Northwind
+pages are already built.
+
+**Only `ldh:XHTML` and `ldh:Object` may be `rdf:_N` values.** Everything else — a
+chart, a view, a query, a container — is embedded by wrapping it in an `ldh:Object`
+whose `rdf:value` points at it. This is enforced: a `PATCH` adding
+`<doc> rdf:_1 <#q>` where `<#q> a sp:Select` is rejected **422 Unprocessable
+Entity**, because the whole post-PATCH graph is SHACL-validated
+(`DocumentHierarchyGraphStoreImpl:575`). A resource can still live in the document
+*without* an `rdf:_N` — it renders in Properties mode either way, which is how a
+query gets seeded off camera.
+
+**Block order is not creation order.** Blocks can be dragged into place afterwards,
+so create them in whatever order navigates cheapest.
+
+**A filtered view cannot be saved.** Facet and pivot state lives in the block's JS
+cache — not in the URL, not on the resource. What persists is a saved `SELECT` as a
+view block, a chart's type and axes, an `ldh:Object` reference, and prose. So:
+explore with facets, then express the finding as a query or a chart and save that.
+
+**The first two seconds are the strongest thing in the clip, so the scene must START
+there.** Length is not what loses viewers — the opening is; a 60s clip and a 15s clip
+shed the same people in the first two seconds, so length is cheap and the opening is
+expensive.
+
+The answer is **not** a cold open. Lifting a later beat to the front is an edit, and
+an edit that shows a moment out of order is the same lie as a staged screenshot —
+worse, it tells the viewer the workflow had nothing worth watching where it actually
+began. What the scene does instead is **begin on a document whose loaded render is
+already its strongest frame**:
+
+| Document | what it renders without a gesture |
+|---|---|
+| `/territories/` | `ac:MapMode` — 53 pins |
+| `/employees/` | `ac:GridMode` — nine photographs |
+| `/categories/` | `ac:GridMode` — eight food photographs |
+| an order, in Graph mode | 28 nodes and 52 links on the dark canvas |
+| `/` | the dashboard's charts |
+| `/orders/`, `/products/`, `/customers/` | `ac:TableMode` — the weakest openings in the dataspace |
+
+Read the mode off the document rather than assuming it: it is `ac:mode` on the view
+block, and it is what decides whether an opening is a map or a table.
+
+**And the opening state has to be paid for, before the work starts.** A strong first
+frame the clip never refers back to is decoration, and the viewer feels the seam. The
+page the scene leaves behind must carry an `ldh:XHTML` block saying *why that state was
+on screen and what it could not answer* — the map plots all fifty-three and cannot draw
+an absent rep; the dashboard answers by country and the territories are cities; the
+order book shows a row and the graph shows what the row is hiding.
+
+Three things about that block, all of them learned by getting it wrong:
+
+- **It is written BEFORE the work, not after.** Writing it at the end satisfies a grep
+  of the finished document and fails the clip: the viewer goes from a grid of faces
+  straight into Properties mode and a query editor with nothing on screen saying why.
+  The question is the beat immediately after the opening exploration, and every
+  authoring beat comes after it.
+- **The blank page it is typed onto is fine.** That is the mid-clip blank the opening
+  rule already permits, and two seconds of it costs nothing where it lands.
+- **It has to survive pacing.** `freezedetect` speeds a static stretch threefold, so a
+  700 ms hold after the beat is a fifth of a second in the cut — not a sentence anybody
+  read. Hold ~3 s minimum, and check the gap to the next beat in the paced sidecar
+  rather than trusting the raw timeline.
+
+**And every move after the opening is a click the viewer can follow.** A scene has
+exactly one `page.goto()` — the document it opens on. Reaching the write-up page by a
+second `goto` is a teleport: the viewer sees the opening state, then a different page,
+and nothing in between that they could have done. It reads as a cut to something
+unrelated, whatever the page says once it loads. So the write-up page is **created on
+camera, from where the scene is** — breadcrumb up to Root (`a.bc-pill` in the action
+bar's `div[role="navigation"]`, present in every layout mode, graph included), then
+`Create ▸ Item`, whose modal opens inside the active pane with a Title and no slug, and
+whose Save lands on the new page in Properties. Its path is a UUID, so the previous
+take's page is removed off camera **by title** (`fixture.mjs` `deleteByTitle`), not
+reset by slug.
+
+Getting back to that page later has three routes that fail and one that works,
+measured: the drawer's search does **not** return a page created a minute earlier; the
+app opens no tab for a same-dataspace move; the tree lists it but would not open from
+graph mode. The container's own children list shows it at once, on one page — so the
+way back mirrors the way out: breadcrumb to Root, then the page's entry in the list
+(`nav.mjs` `listGo`). Leaving a graph to come back to one: the drawer's search by
+identifier, then the mode switcher — not the opening bookmark a second time.
+
+`grep -c 'page.goto(' scenes/*.mjs` must print `1` for every scene. It is the cheapest
+check in the rig and it catches the defect that every other check missed.
+
+The corollary is that **the document a scene writes into is opened late**. A blank
+page is the honest start of the authoring half and the worst possible first frame, so
+the scene explores first, and the fixture is opened once there is something to put on
+it — mid-clip, where two seconds of empty page costs nothing.
+
+What is left in front of the opening state is the page load, and that IS trimmed:
+`render/head.mjs` cuts to the first beat, which a scene fires the instant its opening
+view has painted. Warming the document off camera (`runScene({ warm })`) shortens the
+load but does not remove it — the remaining second is Saxon-JS and the map library
+drawing, which is CPU in the browser rather than network. Waiting on paint, not
+presence: an `<img>` is in the DOM a beat before it decodes, which is how one take
+opened on a grid of nine white boxes.
+
+**Scenes are workflows, not tours.** Open on a question a real user would have, let
+each step follow from the one before, and end by answering it. Reaching for a control
+because the control exists is the failure mode.
+
+## Recording
+
+**Never shoot in the responsive mobile layout.** Record at normal desktop
+resolution, timeline formats included. The narrow layout is not how anyone uses
+LinkedDataHub, so filming it advertises a product that does not exist — and it
+collapses the drawer, the multi-column content and the view toolbar, which are the
+things being shown. Legibility arithmetic pushes the other way (a 13px cell is 3.6px
+at 1440 shown 400 wide, 12.1px at 430) and that pull has to be resisted: fix
+legibility by cropping into a region of the desktop layout, or by choosing beats
+whose payoff is not small text.
+
+**The cursor must be drawn.** `page.mouse.move()` moves no visible pointer, so an
+unmodified recording shows a UI operating itself with nothing touching it.
+
+**Seed the first-time-message cookie** (`LinkedDataHub.first-time-message`) rather
+than filming its dismissal; its backdrop swallows every click on a fresh profile.
+
+**Fixtures reset off camera**, through the `ldh` CLI, before the browser context
+exists.
+
+**Verify on the running instance**, not by reading the code — computed styles and
+measured boxes, never "it should".
+
+**The cursor and the control it clicks are visible — by scene design, not by the
+crop.** A crop that frames the block a result appears in while the click lands outside
+it shows an effect with no cause. The fix is in the scene: click the control nearest the
+result (the form's own Save, the view's own Create, the pill in the bar above the
+graph), let the drawn cursor travel inside the framed block, and give the beat a focus
+box that covers both the control and the result. Widening the crop to contain every
+click was tried and reverted — it pushed every shot out to the full frame and flattened
+the pans. And the camera **pans to the action control** before it is clicked: the scene marks a
+beat as the pointer arrives on the control (its focus box is the control), and the
+shot lists that beat in `via`, so the crop glides block → control → result on smooth
+moves (`cropPath` in the cutter) rather than widening. Every beat still records
+`pointer`; the cutter uses it only when a shot sets `keepPointer: true`. On camera a
+control is clicked with the drawn cursor
+(`cursor.click`, or `cursor.moveTo` then the click), never a bare `locator.click()`.
+
+**A camera move between blocks is gradual.** When a supercut shot pans from one block
+to another — the query to the chart made from it, the XHTML block to the Object block,
+any block to any other — the crop travels on a smooth curve over about 1.4 s
+(`move: "pan"`, `moveSeconds` in `render/supercut.json`), timed to the new block's
+arrival, never a jump. The same for a scroll on camera: `behavior: 'smooth'`, never an
+instant `scrollTo`. A jump inside one page reads as an edit; a slow pan reads as the
+viewer's own eye moving down the page.
diff --git a/screencast/audio/supercut.mp3 b/screencast/audio/supercut.mp3
new file mode 100644
index 00000000..4298a4bb
Binary files /dev/null and b/screencast/audio/supercut.mp3 differ
diff --git a/screencast/camera/compose.keys.json b/screencast/camera/compose.keys.json
new file mode 100644
index 00000000..0975d7d4
--- /dev/null
+++ b/screencast/camera/compose.keys.json
@@ -0,0 +1,38 @@
+[
+ {
+  "t": 48.671,
+  "z": 1.0,
+  "cx": 1440,
+  "cy": 900
+ },
+ {
+  "t": 51.171,
+  "z": 1.0,
+  "cx": 1440,
+  "cy": 900
+ },
+ {
+  "t": 60.016,
+  "z": 1.0,
+  "cx": 1440,
+  "cy": 900
+ },
+ {
+  "t": 73.668,
+  "z": 1.0,
+  "cx": 1440,
+  "cy": 900
+ },
+ {
+  "t": 77.778,
+  "z": 1.0,
+  "cx": 1440,
+  "cy": 900
+ },
+ {
+  "t": 78.993,
+  "z": 1.0,
+  "cx": 1440,
+  "cy": 900
+ }
+]
diff --git a/screencast/camera/q2c.keys.json b/screencast/camera/q2c.keys.json
new file mode 100644
index 00000000..38752305
--- /dev/null
+++ b/screencast/camera/q2c.keys.json
@@ -0,0 +1,74 @@
+[
+ {
+  "t": 8.87,
+  "z": 1.45,
+  "cx": 1585,
+  "cy": 1010
+ },
+ {
+  "t": 16.853,
+  "z": 1.45,
+  "cx": 1585,
+  "cy": 1010
+ },
+ {
+  "t": 17.853,
+  "z": 1.45,
+  "cx": 1585,
+  "cy": 1010
+ },
+ {
+  "t": 19.153,
+  "z": 1.0,
+  "cx": 1440,
+  "cy": 900
+ },
+ {
+  "t": 25.478,
+  "z": 1.0,
+  "cx": 1440,
+  "cy": 900
+ },
+ {
+  "t": 27.493,
+  "z": 1.0,
+  "cx": 1440,
+  "cy": 900
+ },
+ {
+  "t": 28.693,
+  "z": 1.2,
+  "cx": 1440,
+  "cy": 820
+ },
+ {
+  "t": 31.088,
+  "z": 1.2,
+  "cx": 1440,
+  "cy": 820
+ },
+ {
+  "t": 42.301,
+  "z": 1.2,
+  "cx": 1440,
+  "cy": 820
+ },
+ {
+  "t": 43.414,
+  "z": 1.0,
+  "cx": 1440,
+  "cy": 900
+ },
+ {
+  "t": 44.136,
+  "z": 1.0,
+  "cx": 1440,
+  "cy": 900
+ },
+ {
+  "t": 48.862,
+  "z": 1.0,
+  "cx": 1440,
+  "cy": 900
+ }
+]
diff --git a/screencast/docs/fill.mjs b/screencast/docs/fill.mjs
new file mode 100644
index 00000000..f968e5c3
--- /dev/null
+++ b/screencast/docs/fill.mjs
@@ -0,0 +1,115 @@
+// Writes the published shots into the docs' .ttl sources, and rewrites them in place
+// when they are re-shot.
+//
+// The shoot writes masters and an index; `make docs-publish` derives the web assets and
+// their content-addressed names. This is the step that makes a document point at one:
+// it reads the index, hashes the PUBLISHED file (never the master — the hash is the
+// address, and only the shipped bytes have the right one), and replaces the slot.
+//
+// Idempotent, because a re-shoot changes every hash it touches and there is no
+// placeholder left to find the second time. The caption is the key: it arrives in the
+// markup as @alt / @aria-label and stays there, so a slot is located either by its
+// placeholder div or by the element already carrying its caption. Nothing else in the
+// document is read or written, and a blocked slot — one the manifest says cannot be
+// shot — is never touched.
+//
+//   node docs/fill.mjs [--dry]
+
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { createHash } from 'node:crypto';
+import { fileURLToPath } from 'node:url';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const OUT = path.join(HERE, 'out');
+const DOCS = path.resolve(HERE, '../../docs');
+const dry = process.argv.includes('--dry');
+
+const sha1 = async (file) => createHash('sha1').update(await fs.readFile(file)).digest('hex');
+const escapeAttr = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+// The published file for a shot: a still is optimised to WebP, a clip ships as the mp4
+// the pacer already produced.
+const publishedFor = (record) => {
+  const rel = record.file.replace(/^docs\/out\//, '');
+  return rel.endsWith('.png') ? rel.replace(/\.png$/, '.webp') : rel;
+};
+
+const elementFor = (kind, label, src) =>
+  kind === 'still'
+    ? `<img alt="${escapeAttr(label)}" src="${src}"></img>`
+    : `<video aria-label="${escapeAttr(label)}" controls="controls" preload="metadata" src="${src}"></video>`;
+
+const PLACEHOLDER = /^([ \t]*)<div class="screenshot-placeholder">\n[\s\S]*?^\1<\/div>\n/gm;
+
+const index = JSON.parse(await fs.readFile(path.join(OUT, 'index.json'), 'utf8'));
+const edits = new Map();
+const report = { filled: 0, rewritten: 0, unchanged: 0, missing: [] };
+
+for (const shot of index) {
+  if (shot.outcome !== 'ok') continue;
+
+  const published = publishedFor(shot);
+  const file = path.join(DOCS, published);
+  let digest;
+  try {
+    digest = await sha1(file);
+  } catch {
+    report.missing.push(`${shot.doc} #${shot.n} — ${published} is not published; run make docs-publish`);
+    continue;
+  }
+
+  const ttl = path.join(DOCS, `${shot.doc}.ttl`);
+  const text = edits.get(ttl) ?? await fs.readFile(ttl, 'utf8');
+  const label = shot.caption.charAt(0).toUpperCase() + shot.caption.slice(1);
+  // Absolute from the dataspace root. uploads/ is a flat namespace anchored at the base
+  // URI, outside the document hierarchy, so its depth is fixed and a relative path would
+  // encode the REFERRING document's depth instead — breaking every image in a document
+  // that later moves. The static build relativizes it against each page (ttl-to-html.xsl).
+  const src = `/uploads/${digest}`;
+  const element = elementFor(shot.kind, label, src);
+
+  // Already filled: rewrite the element carrying this caption, hash and all.
+  const existing = new RegExp(
+    `<(?:img|video)\\s[^>]*(?:alt|aria-label)="${escapeRe(escapeAttr(label))}"[^>]*>(?:</(?:img|video)>)?`,
+  );
+  if (existing.test(text)) {
+    const before = text.match(existing)[0];
+    if (before === element) { report.unchanged++; continue; }
+    edits.set(ttl, text.replace(existing, element));
+    report.rewritten++;
+    console.log(`  ~ ${shot.doc} #${shot.n}  → ${digest.slice(0, 12)}…`);
+    continue;
+  }
+
+  // Not filled yet: find the placeholder whose caption this is.
+  //
+  // Compared as TEXT: a caption may carry inline markup — reference/administration
+  // /ontologies names its controls in <samp> — and the manifest's caption is the plain
+  // sentence, which is also what becomes @alt. Comparing the raw content would never
+  // match those, and putting the markup in the manifest would put escaped tags in the
+  // attribute. Captions without markup compare exactly as before.
+  const plain = (x) => x.replace(/<[^>]+>/g, '');
+  let hit = null;
+  for (const m of text.matchAll(PLACEHOLDER)) {
+    const caption = /<p>([\s\S]*?)<\/p>/.exec(m[0]);
+    if (caption && plain(caption[1]).split(': ').slice(1).join(': ').trim() === shot.caption) { hit = m; break; }
+  }
+  if (!hit) {
+    report.missing.push(`${shot.doc} #${shot.n} — no placeholder and no element for "${shot.caption.slice(0, 60)}"`);
+    continue;
+  }
+  edits.set(ttl, text.slice(0, hit.index) + hit[1] + element + '\n' + text.slice(hit.index + hit[0].length));
+  report.filled++;
+  console.log(`  + ${shot.doc} #${shot.n}  → ${digest.slice(0, 12)}…`);
+}
+
+if (!dry) for (const [file, text] of edits) await fs.writeFile(file, text);
+
+console.log(
+  `\n${report.filled} filled, ${report.rewritten} rewritten, ${report.unchanged} unchanged, ` +
+  `${edits.size} file(s) ${dry ? 'would change' : 'written'}`,
+);
+for (const m of report.missing) console.log(`  ! ${m}`);
+process.exit(report.missing.length ? 1 : 0);
diff --git a/screencast/docs/manifest.mjs b/screencast/docs/manifest.mjs
new file mode 100644
index 00000000..9ac36403
--- /dev/null
+++ b/screencast/docs/manifest.mjs
@@ -0,0 +1,1105 @@
+// The docs' 44 empty placeholders, as a shot list.
+//
+// Each entry binds one placeholder — identified by its .ttl, the line the caption
+// sits on, and the caption verbatim — to what has to be on screen.
+//
+//   kind   'still' or 'clip'
+//   at     where to start
+//   act    does whatever the caption promises
+//   want   asserted after act, BEFORE the capture. A shot whose want is not met is
+//          reported as missed, not shot. Without this the runner only ever proved
+//          that act() did not throw, which passed three byte-identical stills.
+//
+// Nothing here edits the .ttl. The runner writes files and an index; filling the
+// placeholders is a separate step, because a shot should be reviewable before it is
+// committed to a document.
+//
+// `blocked` marks the slots that cannot be shot against Northwind as it stands, with
+// the reason, so the gap is visible rather than silently missing.
+
+import fs from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+import { selectWord } from '../lib/annotate.mjs';
+import * as constructors from '../lib/constructors.mjs';
+
+// A block by its heading — the only stable handle on content that is authored data
+// rather than chrome.
+const block = (page, title) =>
+  page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: title }).first();
+
+// The SUBJECT of a block shot is the innermost row carrying the title. An ldh:Object
+// carrier and the block it embeds both match — the carrier is the outer one — and
+// framing the carrier puts two stacked headers in a picture of one block.
+const subject = (page, title) =>
+  page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: title }).last();
+
+const scrollTo = async (page, title, pause = 2500) => {
+  const b = block(page, title);
+  await b.scrollIntoViewIfNeeded();
+  await page.waitForTimeout(pause);
+  return b;
+};
+
+
+// Opening the Product create form — the gesture two slots need.
+//
+// Three things are not where a first reading expects them. The Create menu is
+// mode-gated, so the document must be in Properties before the dock offers the
+// ontology's classes. The dock is a different control from the action bar's Create,
+// which offers only Container and Item. And the form opens typed as an Instance
+// (owl:NamedIndividual) whose Type row is a committed chip — the typeahead only exists
+// after the chip's pencil turns it back into one.
+const openProductForm = async ({ page, cursor, type, blocks, sleep }) => {
+  await blocks.switchDocumentMode(page, cursor, 'read-mode');
+  await sleep(1500);
+  const made = await constructors.createFromDock(page, cursor, 'Instance');
+  if (!made.ok) throw new Error(made.why);
+  await sleep(1200);
+
+  const form = page.locator('form:visible').filter({ hasText: /Type/ }).last();
+  const typeRow = form.locator('.ldh-prop-group').filter({ hasText: 'Type' }).first();
+  const pencil = typeRow.locator('button').filter({ hasText: 'edit' }).first();
+  if (await pencil.isVisible().catch(() => false)) {
+    await cursor.click(pencil);
+    await sleep(1200);
+  }
+  const typeField = typeRow.locator('input:not([type=hidden]):visible').first();
+  if (!(await typeField.isVisible().catch(() => false))) throw new Error('the Type row never became editable');
+  const picked = await blocks.pickByLabel(page, cursor, type, typeField, 'Product', { kind: 'Class' });
+  if (!picked.ok) throw new Error(picked.why ?? 'Product not offered by the Type typeahead');
+  // Picking the class fetches its constructor and rebuilds the form from it.
+  await page.waitForTimeout(6000);
+};
+
+// The form itself, once it carries the constructor's controls.
+const productForm = (page) => page.locator('form:visible').filter({ hasText: 'Product' }).last();
+
+// The setup clip builds a whole instance, so it needs somewhere to build it and a way
+// to take it down again. Both hang off the shot rather than the tape, so the tape stays
+// a transcript of the page and nothing else.
+const setupClip = (() => {
+  let dir = null;
+  const clone = () => path.join(dir, 'LinkedDataHub');
+  return {
+    async prepare() {
+      dir = await fs.mkdtemp(path.join(os.tmpdir(), 'ldh-setup-clip-'));
+      return { LDH_CLIP_DIR: dir };
+    },
+    async cleanup() {
+      if (!dir) return;
+      // down, not down -v: the volumes are this project's, but the habit of passing -v
+      // near a shared Docker daemon is the one that eventually removes somebody else's.
+      await new Promise((r) => spawn('docker', ['compose', 'down'], { cwd: clone(), stdio: 'ignore' }).on('close', r)).catch(() => {});
+      await fs.rm(dir, { recursive: true, force: true });
+      dir = null;
+    },
+  };
+})();
+
+export const SHOTS = [
+  // ── reference/user-interface ───────────────────────────────────────────────
+  {
+    doc: 'reference/user-interface', n: 1, line: 26, kind: 'still',
+    caption: 'the dataspace layout: navigation bar, action bar, sidebar and content',
+    at: '/customers/',
+    async act({ page, cursor, nav }) { await nav.openTree(page, cursor); await page.waitForTimeout(1500); },
+    want: '.left-sidebar.is-open, .tree-link',
+  },
+  {
+    doc: 'reference/user-interface', n: 2, line: 32, kind: 'still',
+    caption: 'the navigation bar with the address bar and menus',
+    at: '/customers/', of: '.ldh-header',
+    want: 'form.ldh-address input[name="uri"]',
+  },
+  {
+    doc: 'reference/user-interface', n: 3, line: 56, kind: 'still',
+    caption: 'the action bar with the Create dropdown, breadcrumbs, timestamp, and the Actions, layout mode and export dropdowns',
+    at: '/customers/', of: '.action-bar',
+    want: 'button.drop-toggle',
+  },
+  {
+    doc: 'reference/user-interface', n: 4, line: 79, kind: 'still',
+    caption: 'the left sidebar Classes list on the Northwind dataspace, with instance counts (Order, Product, Person, ...)',
+    at: '/customers/',
+    async act({ page, cursor, nav }) {
+      await nav.openTree(page, cursor);
+      await page.locator('.left-sidebar .class-list').scrollIntoViewIfNeeded();
+      await page.waitForTimeout(1500);
+    },
+    want: async (page) => (await page.locator('.left-sidebar button.tree-link.btn-class').count()) >= 3,
+    of: '.left-sidebar .class-list',
+  },
+  {
+    // /customers/ has a links button whose popover comes up empty — the caption
+    // wants an order, and an order really is referenced from several sides.
+    doc: 'reference/user-interface', n: 5, line: 101, kind: 'still',
+    caption: 'the links popover open on a Northwind order block, backlink rows visible',
+    at: '/orders/10265/',
+    async act({ page, cursor }) {
+      const links = page.locator('.ldh-pane.is-active button.tb-links:visible').first();
+      await links.scrollIntoViewIfNeeded();
+      await cursor.click(links);
+      await page.waitForTimeout(3000);
+    },
+    // An order points outward at everything and is pointed at by its delivery alone,
+    // so one row is what this document really has. /employees/2/ shows ten.
+    want: async (page) => (await page.locator('.ldh-links-pop:visible a, [class*="links-pop"]:visible a').count()) >= 1,
+    of: ['[class*="links-pop"]:visible', '.ldh-pane.is-active .ldh-block-row:has([class*="links-pop"])'], pad: 12,
+  },
+  {
+    doc: 'reference/user-interface', n: 6, line: 111, kind: 'clip',
+    caption: 'the Northwind orders container in each layout mode: content, properties, map (territories), chart, graph',
+    at: '/territories/',
+    async act({ page, cursor, marks, modes }) {
+      await marks.beat('open');
+      for (const mode of ['table-mode', 'map-mode', 'chart-mode', 'graph-mode']) {
+        const r = await modes.switchViewMode(page, cursor, mode).catch(() => false);
+        await marks.beat(mode.replace('-mode', ''), r === 'already' ? 'already' : undefined);
+        await page.waitForTimeout(3500);
+      }
+    },
+    want: '.ldh-view-toolbar',
+  },
+  {
+    doc: 'reference/user-interface', n: 7, line: 146, kind: 'still',
+    caption: 'the tab bar with a UNESCO Thesaurus concept open in a second tab next to the Northwind dashboard',
+    at: '/categories/',
+    async act({ page, cursor }) {
+      await cursor.click(page.locator('button.btn-apps').first());
+      await page.waitForTimeout(1200);
+      await cursor.click(page.locator('.ac-menu-item:visible, .ac-menu a:visible').filter({ hasText: 'UNESCO' }).first());
+      await page.waitForTimeout(7000);
+      // the menu that opened the tab has no business being in the picture
+      await page.keyboard.press('Escape');
+      await page.mouse.move(700, 600);
+      await page.waitForTimeout(800);
+    },
+    want: async (page) => (await page.locator('.ac-tab, [class*="tab-"]:visible').count()) >= 2,
+    of: ['.ldh-header', '#tab-bar'],
+  },
+
+  // ── reference/data-model ───────────────────────────────────────────────────
+  {
+    doc: 'reference/data-model/resources', n: 1, line: 109, kind: 'still',
+    caption: 'a query block with the SPARQL editor',
+    // The doc's own example is #select-categories-query, "Live: /categories/".
+    // ContentMode renders the chart the query feeds and carries no query block at
+    // all; Properties renders the four query resources themselves. YASQE is mounted
+    // on each from the start but measures 0x0, because its .ldh-sparql host ships
+    // collapsed — the block toolbar's tb-query button folds it out and re-measures
+    // it (client/block/query.xsl:476), after which it is 1180x720.
+    at: '/categories/',
+    async act({ page, cursor, blocks }) {
+      await blocks.switchDocumentMode(page, cursor, 'read-mode');
+      await page.waitForTimeout(8000);
+      const toggle = page.locator('.ldh-pane.is-active button.tb-query').first();
+      await toggle.scrollIntoViewIfNeeded();
+      await cursor.click(toggle);
+      await page.waitForTimeout(3500);
+      await toggle.scrollIntoViewIfNeeded();
+      await page.waitForTimeout(1500);
+    },
+    want: async (page) => {
+      const box = await page.locator('.CodeMirror').first().boundingBox().catch(() => null);
+      return box !== null && box.width > 200 && box.height > 40;
+    },
+    of: (page) => page.locator('.ldh-pane.is-active .ldh-block-row')
+      .filter({ has: page.locator('.CodeMirror:visible') }).first(),
+  },
+  {
+    doc: 'reference/data-model/resources', n: 2, line: 133, kind: 'still',
+    caption: 'a chart block rendering SPARQL results',
+    at: '/categories/',
+    async act({ page }) { await scrollTo(page, 'Revenue by category', 3500); },
+    want: async (page) => {
+      const svg = page.locator('.ldh-pane.is-active svg').first();
+      const box = await svg.boundingBox();
+      return box !== null && box.y > -100 && box.y < 810;
+    },
+    of: (page) => subject(page, 'Revenue by category'),
+  },
+  {
+    doc: 'reference/data-model/resources', n: 3, line: 228, kind: 'still',
+    caption: 'a view block with paginated results',
+    at: '/orders/',
+    want: '.ldh-view-toolbar',
+    of: (page) => subject(page, 'All orders'),
+  },
+  {
+    doc: 'reference/data-model/resources', n: 4, line: 299, kind: 'still',
+    caption: 'parallax navigation jumping from a result set to a related one',
+    at: '/products/',
+    // The pivot bar is no longer a <details> with a <summary>: it is a div that the
+    // block's own controls reveal, `.ldh-pivot-bar.is-collapsed` being display:none.
+    // Waiting for a summary that no longer exists is what timed this shot out.
+    async act({ page, cursor, modes }) {
+      await modes.showControls(page, cursor);
+      await page.waitForTimeout(1200);
+      const pill = page.locator('.ldh-pivot-pill:visible').filter({ hasText: 'Provider' }).first();
+      await pill.scrollIntoViewIfNeeded().catch(() => {});
+      await cursor.click(pill);
+      await page.waitForTimeout(4000);
+    },
+    want: '.parallax-step, .facet-pill.parallax-step',
+    of: (page) => page.locator('.ldh-pane.is-active .ldh-block-row:has(.parallax-step)').last(),
+  },
+  {
+    doc: 'reference/data-model/blocks', n: 1, line: 25, kind: 'still',
+    caption: "the top of the Northwind dashboard's content list, with a block's drag handle and copy button visible",
+    // The subject is the content LIST — the sequence the prose above walks through as
+    // rdf:_1, rdf:_2 — so the frame spans the first two top-level rows rather than one
+    // block. Direct children only: a nested row is the block an ldh:Object carries, not
+    // an entry in the list. Hovering reveals the handle and the copy button, which are
+    // what the caption promises.
+    at: '/',
+    async act({ page }) {
+      const rows = page.locator('.ldh-pane.is-active .content-body > .ldh-block-row');
+      await rows.first().scrollIntoViewIfNeeded();
+      await rows.first().hover();
+      await page.waitForTimeout(1800);
+    },
+    want: async (page) =>
+      (await page.locator('.ldh-pane.is-active .content-body > .ldh-block-row').count()) >= 2,
+    // .nth(), not :nth-of-type — the CSS pseudo-class counts DIVS, so it picks whichever
+    // div happens to sit at that position rather than the first two block rows.
+    of: [
+      (page) => page.locator('.ldh-pane.is-active .content-body > .ldh-block-row').nth(0),
+      (page) => page.locator('.ldh-pane.is-active .content-body > .ldh-block-row').nth(1),
+    ],
+  },
+
+  // ── user-guide/browse-data ─────────────────────────────────────────────────
+  {
+    doc: 'user-guide/browse-data', n: 1, line: 16, kind: 'clip',
+    caption: 'browsing and navigating data',
+    at: '/customers/',
+    async act({ cursor, marks, modes, page }) {
+      await marks.beat('open');
+      for (const m of ['list-mode', 'grid-mode', 'table-mode']) {
+        const r = await modes.switchViewMode(page, cursor, m);
+        await marks.beat(m.replace('-mode', ''), r === 'already' ? 'already' : undefined);
+      }
+    },
+    want: '.ldh-view-toolbar',
+  },
+  {
+    doc: 'user-guide/browse-data', n: 2, line: 35, kind: 'still',
+    caption: 'the document tree with a container expanded',
+    at: '/customers/',
+    async act({ page, cursor, nav }) {
+      await nav.openTree(page, cursor);
+      const before = await page.locator('.tree-link').count();
+      await cursor.click(page.locator('.left-sidebar button.btn-expand-tree').first());
+      await page.waitForTimeout(3000);
+      if ((await page.locator('.tree-link').count()) <= before) throw new Error('the tree did not expand');
+    },
+    want: async (page) => (await page.locator('.left-sidebar .btn-expanded-tree').count()) >= 2,
+    of: '.left-sidebar .document-tree',
+  },
+  {
+    // The drawer search is an input that opens the search dialog on submit — there
+    // is no dropdown to photograph. The dialog is what the caption is describing.
+    doc: 'user-guide/browse-data', n: 3, line: 80, kind: 'still',
+    caption: 'the search dropdown with matching Northwind resources',
+    at: '/customers/',
+    async act({ page, cursor, nav }) {
+      await nav.openTree(page, cursor);
+      const box = page.locator('.left-sidebar input[name="q"]').first();
+      await box.click();
+      await box.pressSequentially('Chai', { delay: 80 });
+      await page.keyboard.press('Enter');
+      await page.waitForTimeout(12000);
+    },
+    want: async (page) => {
+      const modal = page.locator('.ac-modal:visible').first();
+      return (await modal.count()) > 0 && /Total results\s+[1-9]/.test(await modal.innerText());
+    },
+    of: '.ac-modal:visible',
+  },
+
+  // ── user-guide ─────────────────────────────────────────────────────────────
+  {
+    doc: 'user-guide/query-data', n: 1, line: 50, kind: 'still',
+    caption: 'a query block with its editor open and results below',
+    // There is no editor page to photograph: a query is a resource, and the block that
+    // places it renders the editor. Properties mode lists the query resources; the
+    // block toolbar's tb-query button folds the editor out and re-measures it, which is
+    // why it reports 0x0 until clicked.
+    at: '/products/',
+    async act({ page, cursor, blocks }) {
+      await blocks.switchDocumentMode(page, cursor, 'read-mode');
+      await page.waitForTimeout(8000);
+      const toggle = page.locator('.ldh-pane.is-active button.tb-query').first();
+      await toggle.scrollIntoViewIfNeeded();
+      await cursor.click(toggle);
+      await page.waitForTimeout(4000);
+    },
+    want: async (page) => {
+      const box = await page.locator('.CodeMirror:visible').first().boundingBox().catch(() => null);
+      return box !== null && box.width > 200 && box.height > 40;
+    },
+    of: (page) => page.locator('.ldh-pane.is-active .ldh-block-row')
+      .filter({ has: page.locator('.CodeMirror:visible') }).first(),
+  },
+  {
+    doc: 'user-guide/create-data/create-documents', n: 1, line: 33, kind: 'clip',
+    caption: 'the container creation form',
+    at: '/',
+    async act({ page, cursor, marks }) {
+      await cursor.click(page.locator('.ldh-pane.is-active button.drop-toggle').filter({ hasText: 'Create' }).first());
+      await page.waitForTimeout(1200);
+      await marks.beat('menu');
+      await cursor.click(page.locator('.add-constructor:visible').filter({ hasText: 'Container' }).first());
+      await page.waitForTimeout(4000);
+      await marks.beat('form');
+    },
+    want: '.modal-constructor:visible, .modal:visible form',
+  },
+  {
+    doc: 'user-guide/edit-content', n: 1, line: 30, kind: 'still',
+    caption: 'the rich-text editor toolbar above an active Northwind XHTML block',
+    at: '/categories/',
+    async act({ page, cursor }) {
+      const row = page.locator('.ldh-pane.is-active .ldh-block-row').first();
+      await row.scrollIntoViewIfNeeded();
+      await row.hover();
+      await cursor.click(row.locator('button.ac-iconbtn').filter({ hasText: 'edit' }).last());
+      await page.waitForTimeout(5000);
+    },
+    want: async (page) => (await page.locator('[contenteditable="true"]').count()) >= 1
+      && (await page.locator('button:visible, a:visible').filter({ hasText: /^Source$/ }).count()) >= 1,
+    of: ['.editor-bar', '.ldh-pane.is-active .ldh-block-row:has([contenteditable="true"])'], pad: 8,
+    after: async (page) => { await page.keyboard.press('Escape'); },
+  },
+
+  // ── tutorial ───────────────────────────────────────────────────────────────
+  {
+    doc: 'tutorial/structure', n: 1, line: 55, kind: 'still',
+    caption: 'root document children listing with the nine containers',
+    at: '/',
+    async act({ page }) { await scrollTo(page, 'Children view', 3000); },
+    want: async (page) => (await page.locator('.ldh-pane.is-active a[href$="/"]').count()) >= 9,
+  },
+  {
+    doc: 'tutorial/composition', n: 1, line: 58, kind: 'still',
+    caption: 'the finished Northwind landing page',
+    at: '/',
+    want: '.ldh-block-row',
+  },
+  {
+    doc: 'tutorial/data', n: 1, line: 129, kind: 'still',
+    caption: 'the Categories container listing after the import',
+    at: '/categories/',
+    want: '.ldh-view-toolbar',
+  },
+  {
+    doc: 'tutorial/insight', n: 1, line: 126, kind: 'still',
+    caption: 'the Categories container with charts and grid view',
+    at: '/categories/', fullPage: true,
+    async act({ page, cursor, modes }) {
+      await modes.switchViewMode(page, cursor, 'grid-mode').catch(() => {});
+      await page.waitForTimeout(4000);
+      await scrollTo(page, 'Revenue by category', 3000);
+      await page.evaluate(() => window.scrollTo(0, 0));
+      await page.waitForTimeout(1500);
+    },
+    want: async (page) => (await page.locator('.ldh-pane.is-active svg').count()) >= 1,
+  },
+  {
+    doc: 'tutorial/media', n: 1, line: 51, kind: 'still',
+    caption: 'an employee document with the photo rendered',
+    at: '/employees/2/',
+    want: async (page) => {
+      const img = page.locator('.ldh-pane.is-active img').first();
+      const box = await img.boundingBox().catch(() => null);
+      return box !== null && box.width > 60;
+    },
+    of: (page) => page.locator('.ldh-pane.is-active .ldh-block').first(),
+  },
+  {
+    doc: 'tutorial/publish', n: 1, line: 58, kind: 'still',
+    caption: 'the app in a private window, unauthenticated',
+    at: '/', anonymous: true,
+    want: '.ldh-block-row, h1',
+  },
+
+  // ── blocked ────────────────────────────────────────────────────────────────
+  { doc: 'about', n: 1, line: 37, kind: 'clip', caption: 'LinkedDataHub overview', blocked: 'the flagship film — its own project' },
+  {
+    // The one slot that is a shell rather than a page. It runs the page's procedure end
+    // to end in a throwaway clone — see tapes/get-started-setup.tape for why two values
+    // in the .env differ from the block the page prints.
+    //
+    // `watch` is the contract: the instance the tape builds has to answer, and the probe
+    // runs while the recording does, because the tape ends with the stack still attached
+    // to the shell VHS is about to take away. Any HTTP answer counts — a LinkedDataHub
+    // that is up but refuses an anonymous caller replies 403, which is the readiness gate
+    // the CI workflows wait on.
+    //
+    // dwell 4 rather than the usual 3: most of this recording is a cold image build and a
+    // healthcheck wait, and the frozen parts of it are long enough to want compressing
+    // harder than a browser clip's half-second holds.
+    doc: 'get-started/setup', n: 1, line: 16, kind: 'terminal',
+    caption: 'setting up LinkedDataHub with Docker',
+    tape: 'get-started-setup',
+    watch: 'https://localhost:4443/',
+    dwell: 4,
+    prepare: () => setupClip.prepare(),
+    cleanup: () => setupClip.cleanup(),
+  },
+  {
+    // The one slot that needs an identity other than the owner's, and a dataspace that
+    // identity cannot read: the button renders only for an AUTHENTICATED agent who is
+    // refused, so neither the owner (who is allowed) nor an anonymous visitor (who gets
+    // no button) can stand in. Take it in its own pass:
+    //
+    //   node docs/shoot.mjs --base <a dataspace the agent cannot read> \
+    //     --cert-file <that agent's keystore> --cert-password <…> \
+    //     --only get-started/request-access
+    //
+    // Making such an agent by hand is three things, and the third is the one that bites:
+    // a certificate carrying the WebID in its subjectAltName, an agent document and a
+    // public-key document holding the modulus as lowercase hex (openssl's own output),
+    // and PUBLIC READ on both — the filter dereferences a WebID with no credentials, so
+    // an owner-only profile fails authentication with 400 and no explanation. The sign-up
+    // flow does all three; this is what it does.
+    doc: 'get-started/request-access', n: 1, line: 21, kind: 'clip',
+    caption: 'submitting an access request',
+    at: '/',
+    async act({ page, cursor, marks, sleep }) {
+      await marks.beat('refused');
+      const btn = page.locator('button.btn-access-form').first();
+      if (!(await btn.isVisible().catch(() => false))) throw new Error('no Request access button — is this agent refused here?');
+      await cursor.click(btn);
+
+      const modal = page.locator('.ac-modal:visible').last();
+      await modal.waitFor({ state: 'visible', timeout: 15000 });
+      await page.waitForTimeout(2500);
+      await marks.beat('form');
+
+      // The access modes are checkboxes; ask for read.
+      const read = modal.locator('input[type=checkbox]').first();
+      if (await read.isVisible().catch(() => false)) {
+        await cursor.click(read);
+        await sleep(800);
+      }
+      await marks.beat('modes');
+
+      const submit = modal.locator('button').filter({ hasText: /Save|Request|Submit/ }).last();
+      if (!(await submit.isVisible().catch(() => false))) throw new Error('no submit on the access request form');
+      await cursor.click(submit);
+      await page.waitForTimeout(6000);
+      await marks.beat('submitted');
+    },
+    want: async (page) => (await page.locator('button.btn-access-form').count()) >= 1,
+  },
+  {
+    // Served by the ADMIN dataspace, and by an agent who has none — the
+    // form's whole point is that you do not have a WebID yet. Both are declarative here:
+    // `admin` moves the shot to the admin origin, `anonymous` withholds the certificate.
+    doc: 'get-started/get-an-account', n: 1, line: 41, kind: 'still',
+    caption: 'the WebID signup form',
+    at: '/sign%20up', admin: true, anonymous: true, fullPage: true,
+    // Full page: the form runs past the fold to the password fields and the Sign up
+    // button, and a picture of a form that stops half way is not a picture of the form.
+    want: async (page) => (await page.locator('form input:not([type=hidden]):visible').count()) >= 4,
+  },
+  // The pair the tutorial page walks through, and the one pair that can only be shot
+  // before the demo app is installed — afterwards this root is the finished dashboard.
+  //
+  // The page's own instructions are the script: Actions ▸ Edit, retitle, describe, save;
+  // then an XHTML block from the dock. Shot 1 promises "edit mode with the title and
+  // first XHTML block", so the block is written and COMMITTED first and its editor then
+  // re-opened for the picture — a block left mid-edit is never saved, and shot 2 (a
+  // separate context, after a reload) would find an unbranded page.
+  {
+    doc: 'tutorial/hello-dataspace', n: 1, line: 32, kind: 'still',
+    caption: 'root document in edit mode with the title and first XHTML block',
+    at: '/',
+    async act({ page, cursor, type, blocks, sleep }) {
+      await cursor.click(page.locator('button.drop-toggle').filter({ hasText: 'Actions' }).first());
+      await sleep(900);
+      const edit = page.locator('button.btn-edit').first();
+      if (!(await edit.isVisible().catch(() => false))) throw new Error('no Edit in the Actions menu');
+      await cursor.click(edit);
+
+      const modal = page.locator('.ac-modal').last();
+      await modal.waitFor({ state: 'visible', timeout: 12000 });
+      await sleep(800);
+
+      // The field carries the seeded "Root"; select it rather than appending to it.
+      // Clear before typing, and clear with the keyboard: the typer clicks the field
+      // first, and that click collapses any selection made before it — which is how a
+      // first run wrote the title "RootNorthwind Traders".
+      const selectAll = process.platform === 'darwin' ? 'Meta+A' : 'Control+A';
+      const clear = async (loc) => {
+        await cursor.click(loc);
+        await page.keyboard.press(selectAll);
+        await page.keyboard.press('Backspace');
+        await sleep(250);
+      };
+
+      const title = modal.locator('.ldh-prop-group').filter({ hasText: 'Title' }).first()
+        .locator('input:not([type=hidden]):visible').first();
+      await clear(title);
+      await type(title, 'Northwind Traders');
+      await sleep(400);
+
+      const desc = modal.locator('.ldh-prop-group').filter({ hasText: 'Description' }).first()
+        .locator('textarea:visible').first();
+      if (await desc.isVisible().catch(() => false)) {
+        await clear(desc);
+        await type(desc, 'The iconic sample database, reborn as an RDF Knowledge Graph.');
+      }
+
+      await cursor.click(modal.locator('button').filter({ hasText: /Save/ }).last());
+      await page.waitForTimeout(5000);
+
+      // Idempotent: addProse appends a block every time it runs, and a second take
+      // left the root carrying the welcome text twice.
+      const WELCOME = 'Welcome to Northwind Traders. Every page here is a document in the graph.';
+      const already = await page.locator('.ldh-pane.is-active .ldh-block-row')
+        .filter({ hasText: 'Welcome to Northwind Traders' }).count();
+      if (!already) {
+        const prose = await blocks.addProse(page, cursor, type, WELCOME);
+        if (!prose.ok) throw new Error(prose.why);
+        // Commit it: the editor saves on focusout, and shot 2 must not depend on a
+        // block that only ever existed in the DOM.
+        await page.mouse.click(20, 400);
+        await page.waitForTimeout(3500);
+      }
+
+      // Re-open the document edit form and leave it standing: that IS "edit mode with
+      // the title", and it is what makes this shot different from the next one. Without
+      // it both slots photograph the same finished page and the runner reports them
+      // byte-identical — which it did. The form sits above the content, so the first
+      // XHTML block stays in frame below it.
+      //
+      // Re-opening rather than never closing, because the title is written and saved
+      // first: the tutorial's order is edit, save, then add the block.
+      await cursor.click(page.locator('button.drop-toggle').filter({ hasText: 'Actions' }).first());
+      await sleep(900);
+      await cursor.click(page.locator('button.btn-edit').first());
+      await page.locator('.ac-modal').last().waitFor({ state: 'visible', timeout: 12000 });
+      await page.waitForTimeout(2500);
+    },
+    // The document's own title, via the page title — the brand in the header reads
+    // "Northwind Traders" whatever the root is called, so that proves nothing. Exactly
+    // one welcome block, because two is what a non-idempotent take produced.
+    want: async (page) => {
+      const prose = await page.locator('.ldh-pane.is-active .ldh-block-row')
+        .filter({ hasText: 'Welcome to Northwind Traders' }).count();
+      const field = page.locator('.ac-modal:visible .ldh-prop-group').filter({ hasText: 'Title' })
+        .first().locator('input:not([type=hidden]):visible').first();
+      const value = await field.inputValue().catch(() => '');
+      return prose === 1 && value === 'Northwind Traders';
+    },
+  },
+  {
+    doc: 'tutorial/hello-dataspace', n: 2, line: 67, kind: 'still',
+    caption: 'the branded homepage after the update',
+    at: '/',
+    // "Reload the base URL" — the reader's view of what shot 1 wrote.
+    async act({ page, sleep }) {
+      await page.goto(page.url().split('?')[0], { waitUntil: 'load' });
+      await page.waitForTimeout(6000);
+      await sleep(500);
+    },
+    want: async (page) => (await page.locator('.ldh-pane.is-active .ldh-block-row')
+      .filter({ hasText: 'Welcome to Northwind Traders' }).count()) === 1
+      && /Northwind Traders/.test(await page.title()),
+  },
+  {
+    doc: 'user-guide/edit-content', n: 2, line: 53, kind: 'still', writes: true,
+    caption: 'the annotation dialog over the selected word "Chai", Property typeahead open',
+    at: '/',
+    // The overlay is shot MID-FLIGHT: `annotate()` completes the statement, and the
+    // caption promises the dialog with its Property typeahead still open. So the first
+    // half of that helper is replayed here — select, right-click, start typing — and
+    // nothing is saved.
+    async act({ page, cursor, type, blocks, scratch }) {
+      const url = await scratch.document('annotate', 'Annotating a word');
+      await page.goto(blocks.contentModeUrl(url), { waitUntil: 'load' });
+      await page.waitForTimeout(6000);
+
+      const prose = await blocks.addProse(page, cursor, type,
+        'Chai is a tea sold in the Northwind catalogue.');
+      if (!prose.ok) throw new Error(prose.why);
+      await page.waitForTimeout(2000);
+
+      const row = page.locator('.ldh-pane.is-active .ldh-block-row').first();
+      await row.hover();
+      await page.waitForTimeout(600);
+      await cursor.click(row.locator('button.ac-iconbtn').filter({ hasText: 'edit' }).last());
+      await page.waitForTimeout(3500);
+
+      const at = await selectWord(page, 'Chai');
+      if (!at) throw new Error('could not select "Chai" in the prose');
+      await page.mouse.click(at.x, at.y, { button: 'right' });
+      const overlay = page.locator('#rdfa-editor-overlay:visible').first();
+      await overlay.waitFor({ state: 'visible', timeout: 8000 });
+      await page.waitForTimeout(900);
+      // The typeahead offers the APP'S vocabulary and nothing else. "exact" (skos:exactMatch)
+      // returns no suggestions here, because Northwind has not imported the taxonomy
+      // package — so the word typed has to be one this dataspace actually knows.
+      await type(overlay.locator('input.property-combobox').first(), 'description');
+      await page.waitForTimeout(2500);
+    },
+    want: async (page) => (await page.locator('#rdfa-editor-overlay:visible .ac-cb-item').count()) >= 1,
+    of: '#rdfa-editor-overlay:visible',
+  },
+  {
+    // Actions ▸ Save as: Source is the remote document, Graph the local one it lands in.
+    // The source is the concept the page itself names, fetched through the Linked Data
+    // proxy from the public UNESCO Thesaurus dataspace; the target is this run's scratch
+    // document, so nothing is forked into the demo data.
+    doc: 'user-guide/add-data', n: 1, line: 31, kind: 'clip', writes: true,
+    caption: 'forking a remote RDF document into the dataspace',
+    at: '/',
+    async act({ page, cursor, type, marks, scratch, sleep }) {
+      const url = await scratch.document('fork', 'Forking a remote document');
+      await page.goto(url, { waitUntil: 'load' });
+      await page.waitForTimeout(5000);
+      await marks.beat('open');
+
+      await cursor.click(page.locator('button.drop-toggle').filter({ hasText: 'Actions' }).first());
+      await sleep(900);
+      const saveAs = page.locator('button.btn-save-as').first();
+      if (!(await saveAs.isVisible().catch(() => false))) throw new Error('no Save as in the Actions menu');
+      await cursor.click(saveAs);
+      const modal = page.locator('.ac-modal:visible').last();
+      await modal.waitFor({ state: 'visible', timeout: 12000 });
+      await page.waitForTimeout(1500);
+      await marks.beat('form');
+
+      // The Source field opens pre-filled with the current document's own URI, and the
+      // typer clicks before typing, which drops the caret into the middle of it: a first
+      // take submitted "https://northwind-traders." + the remote URI + "demo.localhost…".
+      // Clear it with the keyboard first.
+      const source = modal.locator('.ldh-prop-group').filter({ hasText: 'Source' }).first()
+        .locator('input[type=text]:visible').first();
+      await cursor.click(source);
+      await page.keyboard.press(process.platform === 'darwin' ? 'Meta+A' : 'Control+A');
+      await page.keyboard.press('Backspace');
+      await sleep(300);
+      await type(source, 'https://unesco-thesaurus.demo.linkeddatahub.com/concepts/concept3683/',
+        { base: 18, spread: 6 });
+      await sleep(1500);
+      await marks.beat('source');
+
+      await cursor.click(modal.locator('button').filter({ hasText: /Save/ }).last());
+      await page.waitForTimeout(9000);
+      // The copy lands in the graph behind the page, which does not re-render on its
+      // own; the clip ends on the forked document as the reader would next see it.
+      await page.goto(url, { waitUntil: 'load' });
+      await page.waitForTimeout(6000);
+      await marks.beat('forked');
+    },
+    // The fork succeeded when the local document describes what the remote one did.
+    want: async (page) => {
+      const text = await page.locator('.ldh-pane.is-active').innerText().catch(() => '');
+      return /beverage|boisson|concept|skos/i.test(text);
+    },
+  },
+  {
+    // Writes, so it writes into the run's own scratch document rather than into the
+    // demo data. The gesture is a drop: since f226cef26 the overlay takes any file, RDF
+    // imported as data and everything else uploaded, so the clip shows the drop and not
+    // the Create menu's File form, which stays in the text as the alternative.
+    //
+    // Playwright cannot pick a file up off the desktop. What the page sees of a drag is
+    // a DragEvent whose DataTransfer lists Files, and that can be built in the page -
+    // the same two events the platform's own file-drop tests dispatch: dragenter on the
+    // body mounts the overlay, drop lands on it. The pointer is walked to the middle
+    // of the page first so the overlay reads as a response to something arriving.
+    doc: 'user-guide/upload-file', n: 1, line: 38, kind: 'clip', writes: true,
+    caption: 'dropping a file onto a document',
+    at: '/',
+    async act({ page, cursor, marks, scratch, sleep }) {
+      const url = await scratch.document('upload', 'Uploading a file');
+      await page.goto(url, { waitUntil: 'load' });
+      await page.waitForTimeout(5000);
+      await marks.beat('open');
+
+      const portrait = new URL('../../demo/northwind-traders/employees/nancy.jpg', import.meta.url);
+      const bytes = [...await fs.readFile(portrait)];
+      const transfer = await page.evaluateHandle(({ name, type, bytes }) => {
+        const t = new DataTransfer();
+        t.items.add(new File([Uint8Array.from(bytes)], name, { type }));
+        return t;
+      }, { name: 'nancy.jpg', type: 'image/jpeg', bytes });
+
+      const { width, height } = page.viewportSize();
+      await cursor.moveTo(width * 0.5, height * 0.55, { duration: 900 });
+      await page.dispatchEvent('body', 'dragenter', { dataTransfer: transfer });
+      await page.locator('#file-drop').waitFor();
+      // The two lanes are the thing to read: RDF imported as data, a file uploaded. The
+      // pointer keeps drifting while they are on screen - a held drag is not a still -
+      // but a dot that small is under the pacer's noise floor, so the hold is long
+      // enough that a third of it still reads.
+      await cursor.moveTo(width * 0.56, height * 0.47, { duration: 7000 });
+      await marks.beat('overlay');
+
+      await page.dispatchEvent('#file-drop', 'drop', { dataTransfer: transfer });
+      // A successful upload reloads the document in Read mode, where the file is one of
+      // its resources and an image is embedded.
+      await page.waitForURL(/ReadMode/, { timeout: 30000 });
+      await page.waitForTimeout(6000);
+      await marks.beat('uploaded');
+    },
+    want: async (page) =>
+      (await page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'nancy.jpg' }).count()) > 0,
+  },
+  {
+    doc: 'user-guide/create-data/create-content', n: 1, line: 16, kind: 'still', writes: true,
+    caption: 'creating an XHTML block and an object block',
+    at: '/',
+    async act({ page, cursor, type, blocks, scratch }) {
+      const url = await scratch.document('compose', 'Composing content');
+      await page.goto(blocks.contentModeUrl(url), { waitUntil: 'load' });
+      await page.waitForTimeout(6000);
+      const prose = await blocks.addProse(page, cursor, type,
+        'Categories group the products Northwind sells. The view below lists them.');
+      if (!prose.ok) throw new Error(prose.why);
+      await page.waitForTimeout(1500);
+      const obj = await blocks.addObject(page, cursor, type, null, { label: 'All categories', kind: 'View' });
+      if (!obj.ok) throw new Error(obj.why);
+      await page.waitForTimeout(3000);
+    },
+    want: async (page) => (await page.locator('.ldh-pane.is-active .ldh-block-row').count()) >= 2,
+    of: (page) => page.locator('.ldh-pane.is-active .content-body').last(),
+  },
+  // Both need a constructor the Create menu will not hand over. Probed 2026-09-16 on
+  // /products/ in Properties mode: of the 15 `.add-constructor` entries only Container
+  // and Item are VISIBLE — Instance, File, CSV import, RDF import, View, SELECT and the
+  // rest sit in the DOM but hidden, so clicking one times out. Whatever gesture reveals
+  // them is the thing to find; it unblocks upload-file and import-csv-data too. And
+  // there is no Product constructor at all: the menu's classes are LDH's own plus
+  // owl:NamedIndividual, so "the Product create form" cannot be shot against Northwind
+  // until the ontology declares one.
+  {
+    // The clip of the same gesture the still below freezes, carried through to a saved
+    // resource. It runs in the scratch container, so the demo's 77 products stay 77.
+    doc: 'user-guide/create-data/create-resources', n: 1, line: 16, kind: 'clip', writes: true,
+    caption: 'creating resource instances',
+    at: '/',
+    async act(ctx) {
+      const { page, cursor, type, marks, scratch, sleep } = ctx;
+      await page.goto(scratch.url, { waitUntil: 'load' });
+      await page.waitForTimeout(5000);
+      await marks.beat('open');
+
+      await openProductForm(ctx);
+      await marks.beat('form');
+
+      const name = productForm(page).locator('.ldh-prop-group').filter({ hasText: 'Name' }).first()
+        .locator('input[type=text]:visible').first();
+      await type(name, 'Chai Green Tea');
+      await sleep(900);
+      await marks.beat('named');
+
+      // The dock's Create button is fixed at the bottom-right corner, which on a page as
+      // short as the scratch document is exactly where the form's Save bar ends up once
+      // the seven-control form has pushed it below the fold. The cursor only glides to a
+      // target that is off screen, and Save is on screen — under the dock. Measured
+      // 2026-09-28: the click opened the Create menu and nothing was saved. Bring Save to
+      // mid-viewport first, so there is nothing fixed on top of it.
+      const save = productForm(page).locator('button').filter({ hasText: /Save/ }).last();
+      await save.evaluate((el) => el.scrollIntoView({ block: 'center', behavior: 'smooth' }));
+      await sleep(900);
+      await cursor.click(save);
+      await page.waitForTimeout(7000);
+      await marks.beat('saved');
+    },
+    want: async (page) => {
+      const text = await page.locator('.ldh-pane.is-active').innerText().catch(() => '');
+      return /Chai Green Tea/.test(text);
+    },
+  },
+  {
+    // Northwind HAS declared a Product constructor since 2026-09-17 (admin/model/ns.ttl:
+    // schema:Product spin:constructor :ProductConstructor), so the earlier reason for
+    // blocking this was already out of date. What blocked it in fact was the mode: the
+    // Create menu is mode-gated, and only in Properties does it offer the ontology's
+    // classes. The page's own route is Create ▸ Instance, then the class by name in the
+    // Type typeahead — Product is never a menu entry, and never will be: the dock's
+    // class list is a fixed parameter of LDH's own types.
+    doc: 'user-guide/create-data/create-resources', n: 2, line: 61, kind: 'still',
+    caption: 'the Product create form generated from the constructor, with category and supplier typeaheads',
+    at: '/products/',
+    act: openProductForm,
+    // The constructor's four controls are the claim: name and identifier inputs, and
+    // category and supplier (schema:provider) as typeaheads. Scope to the form that
+    // carries them — the page has seven forms, and taking the last of a broad locator
+    // reads the chart pane's Save bar instead.
+    want: async (page) => {
+      const text = await page.locator('form:visible').filter({ hasText: 'Product' }).last()
+        .innerText().catch(() => '');
+      return /categor/i.test(text) && /provider/i.test(text) && /name/i.test(text)
+        && /identifier/i.test(text);
+    },
+    // The subject is the form, not the container page it was opened on.
+    of: (page) => page.locator('form:visible').filter({ hasText: 'Product' }).last(),
+    pad: 12,
+  },
+  {
+    // The old reason was right about the import and wrong about the clip: the run itself
+    // happens in the background with nothing on screen, so what the caption promises —
+    // "importing CSV data and mapping it to RDF" — is the mapping, and the mapping is
+    // the form. It is filled from the resources the demo app already ships (the uploaded
+    // CSV and the CONSTRUCT that maps it) and deliberately NOT saved: saving would run
+    // the products import a second time and duplicate 77 documents.
+    doc: 'user-guide/import-data/import-csv-data', n: 1, line: 32, kind: 'clip',
+    caption: 'importing CSV data and mapping it to RDF',
+    at: '/products/',
+    async act({ page, cursor, type, blocks, marks, sleep }) {
+      await marks.beat('open');
+      await blocks.switchDocumentMode(page, cursor, 'read-mode');
+      await sleep(1500);
+      const made = await constructors.createFromDock(page, cursor, 'CSV import');
+      if (!made.ok) throw new Error(made.why);
+      await sleep(1800);
+      await marks.beat('form');
+
+      const form = page.locator('form:visible').filter({ hasText: 'Delimiter' }).last();
+      const group = (label) => form.locator('.ldh-prop-group').filter({ hasText: label }).first();
+
+      await type(group('Delimiter').locator('input[type=text]:visible').first(), ',');
+      await sleep(600);
+
+      const filePick = await blocks.pickByLabel(page, cursor, type,
+        group('File').locator('input[type=text]:visible').first(), 'Products', { kind: 'File' });
+      if (!filePick.ok) throw new Error(filePick.why ?? 'the CSV file was not offered');
+      await sleep(900);
+      await marks.beat('file');
+
+      const queryPick = await blocks.pickByLabel(page, cursor, type,
+        group('Query').locator('input[type=text]:visible').first(), 'Products', { kind: 'CONSTRUCT' });
+      if (!queryPick.ok) throw new Error(queryPick.why ?? 'the mapping query was not offered');
+      await sleep(900);
+      await marks.beat('query');
+
+      await type(group('Title').locator('input[type=text]:visible').first(), 'Products import');
+      await page.waitForTimeout(2500);
+      await marks.beat('mapped');
+    },
+    want: async (page) => {
+      const text = await page.locator('form:visible').filter({ hasText: 'Delimiter' }).last()
+        .innerText().catch(() => '');
+      return /Products/.test(text) && /Delimiter/.test(text) && /Query/.test(text);
+    },
+    of: (page) => page.locator('form:visible').filter({ hasText: 'Delimiter' }).last(),
+    pad: 12,
+  },
+  {
+    // The constraint is SPIN, not SHACL: schema:Product spin:constraint :MissingName,
+    // and :MissingName is an ldh:MissingPropertyValue — the platform's own template,
+    // the same one the system ontology uses for :MissingTitle. So "the Northwind model
+    // declares no SHACL constraints" was true of the sh: namespace and beside the point.
+    doc: 'user-guide/change-model', n: 1, line: 191, kind: 'still',
+    caption: 'the generated Product create form, with the Missing schema:name violation shown after an empty submit',
+    at: '/products/',
+    async act(ctx) {
+      const { page, cursor, sleep } = ctx;
+      await openProductForm(ctx);
+      // Save with Name empty: the violation decorates the field it belongs to.
+      const save = productForm(page).locator('button').filter({ hasText: /Save/ }).last();
+      await cursor.click(save);
+      await page.waitForTimeout(4000);
+      await sleep(500);
+    },
+    // What the violation looks like on screen is a marked field, not a sentence naming
+    // the constraint: the row takes .is-violation and reads "Required". The constraint's
+    // own label, "Missing schema:name", lives in the ontology and is never printed here,
+    // so asserting on that string would fail against a page that is behaving correctly.
+    // The claim worth checking is that the violation landed on the Name row.
+    want: async (page) => {
+      const violated = page.locator('.ldh-prop-group.is-violation').filter({ hasText: 'Name' });
+      return (await violated.count()) >= 1;
+    },
+    of: (page) => page.locator('form:visible').filter({ hasText: 'Product' }).last(),
+    pad: 12,
+  },
+  {
+    // Needs graph versioning enabled for THIS dataspace (lds:versioningRepository on
+    // the app plus an a:authToken for the repository in secrets/credentials.trig) and a
+    // document written more than once after it was enabled — versioning captures writes,
+    // not what is already in the store. Give the shoot its own github:pathPrefix so the
+    // document's history holds only what was done for it.
+    doc: 'user-guide/version-history', n: 1, line: 30, kind: 'still',
+    caption: 'the History dialog on a Northwind order, versions with agent attribution',
+    at: '/orders/10248/',
+    async act({ page, cursor, sleep }) {
+      const link = page.locator('a.document-history').first();
+      if (!(await link.isVisible().catch(() => false))) throw new Error('no history link — is versioning enabled?');
+      await cursor.click(link);
+      await page.locator('.ac-modal:visible').last().waitFor({ state: 'visible', timeout: 15000 });
+      await page.waitForTimeout(4000);
+      await sleep(500);
+    },
+    want: async (page) => (await page.locator('.ac-modal:visible tr').count()) >= 3,
+    of: '.ac-modal:visible',
+  },
+  {
+    // The diff renders on the document itself, not in the dialog: From and To are picked
+    // in the History dialog, Compare closes it and marks the document up.
+    doc: 'user-guide/version-history', n: 2, line: 42, kind: 'still',
+    caption: 'a version diff on an order document — added/removed/changed borders and the color legend',
+    at: '/orders/10248/',
+    async act({ page, cursor, sleep }) {
+      await cursor.click(page.locator('a.document-history').first());
+      const modal = page.locator('.ac-modal:visible').last();
+      await modal.waitFor({ state: 'visible', timeout: 15000 });
+      await page.waitForTimeout(3500);
+
+      // Oldest as From, newest as To, so the diff spans every version there is.
+      const rows = modal.locator('tr').filter({ has: page.locator('input[type=radio]') });
+      const n = await rows.count();
+      if (n < 2) throw new Error(`only ${n} version rows to compare`);
+      await cursor.click(rows.last().locator('input[type=radio]').first());
+      await sleep(600);
+      await cursor.click(rows.first().locator('input[type=radio]').last());
+      await sleep(600);
+
+      const compare = modal.locator('button').filter({ hasText: /Compare/ }).last();
+      if (!(await compare.isVisible().catch(() => false))) throw new Error('no Compare button');
+      await cursor.click(compare);
+      await page.waitForTimeout(6000);
+
+      // The caption wants both the legend and the marked rows. The legend banner sits at
+      // the top of the document, so the capture stays there — which only works because
+      // the changed property renders high in the block. Scrolling to the first marked
+      // row instead pushes the legend out of frame.
+      await page.evaluate(() => window.scrollTo(0, 0));
+      await page.waitForTimeout(1200);
+      const marked = await page.locator('[class*="added"], [class*="removed"], [class*="changed"]').count();
+      if (!marked) throw new Error('the comparison marked nothing');
+      await sleep(500);
+    },
+    want: async (page) => {
+      const marked = await page.locator('[class*="diff"], [class*="added"], [class*="removed"], [class*="changed"]').count();
+      return marked >= 1 && (await page.locator('.ac-modal:visible').count()) === 0;
+    },
+  },
+  {
+    // Needs three things on the instance, and all three are set-up rather than gesture:
+    // the taxonomy editor package imported by this dataspace, the categories typed as
+    // skos:Concept, and their skos mapping properties pointing at UNESCO concepts that
+    // resolve. On a local stack the package comes from the local registry dataspace, not
+    // packages.linkeddatahub.com, and the mappings the demo app ships are written against
+    // the production origins, so they need rewriting for the instance.
+    //
+    // Note for whoever adds the mappings: this API rejects INSERT DATA with 422 and no
+    // diagnostic. Writes are INSERT { … } WHERE {}.
+    doc: 'reference/administration/packages', n: 1, line: 135, kind: 'still',
+    caption: 'a Northwind category page with the taxonomy editor package installed, concept rendering and UNESCO mappings visible',
+    at: '/categories/1/',
+    want: async (page) => {
+      const text = await page.locator('.ldh-pane.is-active').innerText().catch(() => '');
+      return /Concept/.test(text) && /(match|Match)/.test(text);
+    },
+  },
+  // 2026-09-25. The tutorial's stylesheet works; the page has two defects, and the test
+  // loop had a third that is worth knowing about.
+  //
+  // In the page:
+  //   1. Its templates carry NO MODE. In 6.0 a resource description renders in
+  //      mode="ldh:BlockRow" — document.xsl applies it for every layout but Content, Map,
+  //      Chart and Graph — so a mode-less template is never reached.
+  //   2. Its augment template matches on foaf:isPrimaryTopicOf, which the representation
+  //      does not carry: the document has foaf:primaryTopic and no inverse. The page's own
+  //      suppression template already goes document-to-topic, which is the idiom that works.
+  //
+  // In the loop: /static/ is cached by Varnish, and the platform fetches ac:stylesheet over
+  // HTTP through it. So after the first deploy every edit was invisible — the server kept
+  // compiling the first version, and overrides looked like they did nothing. Give the
+  // ac:stylesheet URI a new query string per iteration (…/layout.xsl?v=N): Tomcat ignores
+  // it, Varnish misses on it, and the XSLT cache keys on it. Restarting Varnish instead
+  // leaves nginx holding its old address and 502s the whole stack.
+  //
+  // These three shots are three INSTANCE STATES — no stylesheet, augment, augment plus
+  // suppression — so they cannot be taken in one run. Taking them together makes all three
+  // identical, which the duplicate check catches. Deploy, shoot, redeploy, shoot.
+  {
+    // The "before" of the three-shot sequence. It is the platform's own rendering with
+    // no dataspace stylesheet in play, so it has to be taken before the tutorial
+    // stylesheet is deployed — the two shots after it need that deploy and stay blocked
+    // until then.
+    doc: 'extending/change-layout', n: 1, line: 24, kind: 'still',
+    caption: 'a Northwind order document in the default layout, order and line items as generic resource descriptions',
+    at: '/orders/10248/',
+    want: async (page) => {
+      const rows = await page.locator('.ldh-pane.is-active .ldh-block-row').count();
+      const text = await page.locator('.ldh-pane.is-active').innerText().catch(() => '');
+      return rows >= 1 && /order/i.test(text);
+    },
+  },
+  {
+    doc: 'extending/change-layout', n: 2, line: 79, kind: 'still',
+    caption: 'the augmented order page with the Order total heading and sum under the order description',
+    // Properties is where a description renders, and where the override applies.
+    at: '/orders/10248/?mode=https%3A%2F%2Fw3id.org%2Fatomgraph%2Fclient%23ReadMode',
+    // The document's own metadata renders above the order, so a viewport-framed shot ends
+    // before the total and shows nothing the caption promises. Frame the subject instead:
+    // the order's description and the total that the override adds under it. The heading
+    // between them falls inside the union.
+    of: [
+      (page) => page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'Accepted offer' }).first(),
+      (page) => page.locator('.ldh-pane.is-active p').filter({ hasText: /\d[\d,]*\.\d{2} USD/ }).first(),
+    ],
+    pad: 16,
+    want: async (page) => {
+      const text = await page.locator('.ldh-pane.is-active').innerText().catch(() => '');
+      return /Order total/.test(text) && /\d[\d,]*\.\d{2} USD/.test(text);
+    },
+  },
+  {
+    doc: 'extending/change-layout', n: 3, line: 99, kind: 'still',
+    caption: 'the order page after suppression — order description and total only, line items hidden',
+    at: '/orders/10248/?mode=https%3A%2F%2Fw3id.org%2Fatomgraph%2Fclient%23ReadMode',
+    // The suppression half deployed on top of the augment half: the total stays, the
+    // line-item descriptions go.
+    want: async (page) => {
+      const text = await page.locator('.ldh-pane.is-active').innerText().catch(() => '');
+      return /Order total/.test(text) && !/Ordered item/i.test(text);
+    },
+  },
+  // A 45th placeholder the manifest did not carry — reference/administration/ontologies
+  // has one, and nothing was shooting it.
+  //
+  // The action lives on the ADMIN dataspace, so the shot asks for that
+  // origin; Source opens pre-filled with the current document's URI, the same trap the
+  // Save as shot documents, so it is cleared with the keyboard before typing.
+  {
+    doc: 'reference/administration/ontologies', n: 1, line: 205, kind: 'still',
+    caption: 'the Import ontology form, with the vocabulary URI as Source and the target document as Graph',
+    at: '/ontologies/', admin: true,
+    async act({ page, cursor, type, sleep }) {
+      await cursor.click(page.locator('button.drop-toggle').filter({ hasText: 'Actions' }).first());
+      await sleep(900);
+      const imp = page.locator('button').filter({ hasText: /Import ontology/i }).first();
+      if (!(await imp.isVisible().catch(() => false))) throw new Error('no Import ontology in the Actions menu');
+      await cursor.click(imp);
+
+      const modal = page.locator('.ac-modal:visible').last();
+      await modal.waitFor({ state: 'visible', timeout: 12000 });
+      await sleep(1500);
+
+      const source = modal.locator('.ldh-prop-group').filter({ hasText: 'Source' }).first()
+        .locator('input[type=text]:visible').first();
+      await cursor.click(source);
+      await page.keyboard.press(process.platform === 'darwin' ? 'Meta+A' : 'Control+A');
+      await page.keyboard.press('Backspace');
+      await sleep(250);
+      await type(source, 'http://xmlns.com/foaf/0.1/', { base: 22, spread: 8 });
+      await page.waitForTimeout(2000);
+    },
+    want: async (page) => {
+      const text = await page.locator('.ac-modal:visible').last().innerText().catch(() => '');
+      return /Source/.test(text) && /Graph/.test(text);
+    },
+    of: '.ac-modal:visible',
+  },
+];
\ No newline at end of file
diff --git a/screencast/docs/shoot.mjs b/screencast/docs/shoot.mjs
new file mode 100644
index 00000000..fe690a01
--- /dev/null
+++ b/screencast/docs/shoot.mjs
@@ -0,0 +1,360 @@
+// Shoots the docs placeholders from the manifest.
+//
+// Stills and clips are captured the same way the scenario scenes are — same cursor,
+// same geometry, same cookie — but with docs discipline: one context per shot so a
+// failure costs one asset, the pointer hidden for stills because a documentation
+// screenshot should not show a cursor that is not really there, and output named by
+// the document it belongs to rather than by scene.
+//
+// Writes an index.json recording slot, caption, file and outcome, which is what the
+// fill step will later read. Nothing here touches a .ttl.
+//
+//   node docs/shoot.mjs --base … --cert-file … --cert-password-file … [--only browse]
+
+import { chromium } from 'playwright';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+import { createHash } from 'node:crypto';
+import { args, identityFor, ROOT, sleep } from '../lib/harness.mjs';
+import { CURSOR_INIT, makeCursor, withCursorHidden } from '../lib/cursor.mjs';
+import { Marks } from '../lib/marks.mjs';
+import { resetContainer, resetDocument, removeAll } from '../lib/fixture.mjs';
+import { makeTyper } from '../lib/typing.mjs';
+import * as nav from '../lib/nav.mjs';
+import * as modes from '../lib/modes.mjs';
+import * as blocks from '../lib/blocks.mjs';
+import { record as recordTerminal } from '../lib/terminal.mjs';
+import { SHOTS } from './manifest.mjs';
+
+// A shot that belongs to the ADMIN dataspace rather than the end-user one
+// one — the sign-up form is served there. LDH's convention is an `admin.` label on the
+// same origin, so the manifest says `admin: true` and stays free of hostnames.
+const adminOrigin = (base) => {
+  const u = new URL(base);
+  u.hostname = `admin.${u.hostname}`;
+  return u.origin;
+};
+
+const OUT = path.join(ROOT, 'docs', 'out');
+const opts = args();
+const argv = process.argv.slice(2);
+const only = argv.includes('--only') ? argv[argv.indexOf('--only') + 1] : null;
+const GEOMETRY = { width: opts.width ?? 1440, height: opts.height ?? 810, scale: opts.scale ?? 2 };
+
+const run = (cmd, a) => new Promise((res) => {
+  const p = spawn(cmd, a); let err = '';
+  p.stderr.on('data', (d) => (err += d));
+  p.on('error', (e) => res({ code: -1, err: e.message }));
+  p.on('close', (code) => res({ code, err }));
+});
+
+// A shot OF a block is a shot of that block. `of` names the subject element — a
+// selector or a function returning a locator — and the frame becomes its box, so a
+// picture captioned "a chart block" does not spend half its pixels on the navbar,
+// the action bar and whatever block happens to sit above. Playwright's element
+// screenshot handles the scrolling itself, which matters because LDH panes scroll
+// internally and page coordinates would not line up.
+//
+// `pad` breathes a few pixels around the box, for a subject whose meaning spills
+// past its own border — a popover anchored to a block, a toolbar floating above it.
+// Padded shots fall back to a viewport clip, clamped so the box cannot run off frame.
+// Sticky chrome paints OVER an element capture. Playwright scrolls the subject into
+// view and shoots its box, and LDH's header, action bar and create dock are sticky —
+// so a picture of a block came back with the navbar across its top and the dock across
+// its bottom, which is the very thing framing the block was meant to remove. Hide every
+// fixed/sticky element that is neither the subject, nor inside it, nor containing it;
+// a chrome shot (`of: '.ldh-header'`) therefore keeps its own subject visible.
+const withoutStickyChrome = async (page, targets, take) => {
+  const handles = [];
+  for (const t of targets) handles.push(await t.elementHandle());
+  await page.evaluate((keep) => {
+    window.__shotHidden = [];
+    for (const e of document.querySelectorAll('body *')) {
+      const pos = getComputedStyle(e).position;
+      if (pos !== 'fixed' && pos !== 'sticky') continue;
+      // EVERY subject is spared, not just the first: a frame spanning the header and
+      // the tab bar hid the tab bar, because the tab bar is sticky too and only the
+      // first element of the pair was being protected.
+      if (keep.some((k) => k && (e === k || e.contains(k) || k.contains(e)))) continue;
+      window.__shotHidden.push([e, e.style.visibility]);
+      e.style.visibility = 'hidden';
+    }
+  }, handles);
+  try {
+    return await take();
+  } finally {
+    await page.evaluate(() => {
+      (window.__shotHidden || []).forEach(([e, v]) => { e.style.visibility = v; });
+      window.__shotHidden = null;
+    });
+  }
+};
+
+const locate = (page, of) => (typeof of === 'function' ? of(page) : page.locator(of).first());
+
+const shootSubject = async (page, shot, file, geometry) => {
+  // An array frames the box enclosing all of them, for a subject that is not one
+  // element: the rich-text toolbar renders at pane level, outside the block it edits,
+  // so "the toolbar above an active block" is the union of the two.
+  if (Array.isArray(shot.of)) {
+    const boxes = [], subjects = [];
+    for (const one of shot.of) {
+      const el = await locate(page, one);
+      subjects.push(el);
+      await el.scrollIntoViewIfNeeded();
+      // PAGE coordinates, read in the same breath as the rect. Scrolling to the second
+      // subject moves the first one's viewport rect, so boxes measured at different
+      // scroll positions cannot be unioned — that silently framed one block instead of
+      // two, twice.
+      const box = await el.evaluate((e) => {
+        const r = e.getBoundingClientRect();
+        return { x: r.x + window.scrollX, y: r.y + window.scrollY, width: r.width, height: r.height };
+      });
+      if (!box || !box.width) throw new Error(`of: matched nothing to frame (${one})`);
+      boxes.push(box);
+    }
+    await page.waitForTimeout(500);
+    // Page coordinates and a full-page capture, because a union of two blocks is
+    // routinely taller than the viewport — clamping it to the fold cut the second
+    // subject off, which defeats the point of spanning them.
+    const pad = shot.pad ?? 0;
+    const x = Math.max(0, Math.min(...boxes.map((b) => b.x)) - pad);
+    const y = Math.max(0, Math.min(...boxes.map((b) => b.y)) - pad);
+    const clip = {
+      x, y,
+      width: Math.max(...boxes.map((b) => b.x + b.width)) + pad - x,
+      height: Math.max(...boxes.map((b) => b.y + b.height)) + pad - y,
+    };
+    return withoutStickyChrome(page, subjects, () =>
+      page.screenshot({ path: file, clip, fullPage: true }));
+  }
+
+  const target = await locate(page, shot.of);
+  await target.scrollIntoViewIfNeeded();
+  await page.waitForTimeout(500);
+  if (!shot.pad) return withoutStickyChrome(page, [target], () => target.screenshot({ path: file }));
+
+  const box = await target.boundingBox();
+  if (!box) throw new Error('of: matched nothing to frame');
+  const x = Math.max(0, box.x - shot.pad), y = Math.max(0, box.y - shot.pad);
+  const clip = {
+    x, y,
+    width: Math.min(box.width + shot.pad * 2, geometry.width - x),
+    height: Math.min(box.height + shot.pad * 2, geometry.height - y),
+  };
+  return withoutStickyChrome(page, [target], () => page.screenshot({ path: file, clip }));
+};
+
+const browser = await chromium.launch({ headless: !opts.headed });
+const index = [];
+const onlyParts = only ? only.split(',').map((o) => o.trim()).filter(Boolean) : null;
+// Shots that write go last, and the scratch container they write into is made only when
+// the first of them comes up: a root listing or a document tree captured before that
+// point cannot show a scratch folder the demo does not have. The shots that write inside it
+// show its name in the breadcrumb and address bar, so it is named like a folder a workspace
+// would have, not after the rig.
+const wanted = SHOTS.filter((s) => !onlyParts || onlyParts.some((o) => `${s.doc}/${s.n}`.includes(o)))
+  .sort((a, b) => Number(Boolean(a.writes)) - Number(Boolean(b.writes)));
+
+console.log(`\n${wanted.length} shot(s) — ${wanted.filter((s) => !s.blocked).length} to take\n`);
+
+// A shot that documents an act of authoring has to write somewhere, and the demo data
+// is not it. `writes: true` opts a shot into a scratch container this run provisions and
+// removes — so nothing depends on a document an earlier session happened to leave behind,
+// and nothing is left for somebody to puzzle over later.
+const SCRATCH = 'drafts';
+const creds = {
+  ldh: opts.ldh, base: opts.base, certFile: opts.certFile,
+  certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile,
+};
+const made = [];
+let scratch = null;
+async function scratchFor(shot) {
+  if (!shot.writes || shot.blocked) return null;
+  if (scratch) return scratch;
+  const url = await resetContainer({ ...creds, slug: SCRATCH, title: 'Drafts' });
+  scratch = {
+    url,
+    async document(slug, title) {
+      const d = await resetDocument({ ...creds, container: url, slug, title });
+      made.push(d.url);
+      return d.url;
+    },
+  };
+  console.log(`scratch: ${url}`);
+  return scratch;
+}
+
+
+for (const shot of wanted) {
+  const slug = `${shot.doc.replace(/\//g, '-')}-${shot.n}`;
+  const record = { doc: shot.doc, n: shot.n, line: shot.line, kind: shot.kind, caption: shot.caption, slug };
+  if (shot.note) record.note = shot.note;
+
+  if (shot.blocked) {
+    console.log(`  ⊘ ${slug.padEnd(42)} ${shot.blocked}`);
+    index.push({ ...record, outcome: 'blocked', why: shot.blocked });
+    continue;
+  }
+
+  const dir = path.join(OUT, path.dirname(shot.doc));
+  await fs.mkdir(dir, { recursive: true });
+
+  // A terminal shot films a shell, not a page, so it takes none of what follows: no
+  // browser, no cursor, no cookie, no certificate. What it shares with a clip is
+  // everything downstream — the same pacer, the same encoding, the same record shape —
+  // so fill.mjs needs no knowledge of it and writes the same <video>.
+  if (shot.kind === 'terminal') {
+    const raw = path.join(dir, `${path.basename(shot.doc)}-${shot.n}.vhs.mp4`);
+    const mp4 = path.join(dir, `${path.basename(shot.doc)}-${shot.n}.mp4`);
+    let taken;
+    try {
+      taken = await recordTerminal(path.join(ROOT, 'tapes', `${shot.tape}.tape`), {
+        output: raw,
+        env: await (shot.prepare ? shot.prepare() : Promise.resolve({})),
+        watchUrl: shot.watch ?? null,
+      });
+    } catch (ex) {
+      console.log(`  ✗ ${slug.padEnd(42)} ${ex.message}`);
+      index.push({ ...record, outcome: 'failed', why: ex.message.split('\n')[0].slice(0, 110) });
+      continue;
+    }
+
+    const paced = taken.ok
+      ? await run('node', [path.join(ROOT, 'render', 'pace.mjs'), raw, mp4, '--dwell', String(shot.dwell ?? 3), '--crf', '20'])
+      : { code: 1 };
+    if (paced.code === 0) await fs.rm(raw, { force: true });
+
+    // The caption is the contract here too. For a setup recording the claim is that the
+    // setup worked, and the honest evidence is the instance answering — which is why the
+    // probe runs alongside the recording rather than after it.
+    const met = !shot.watch || taken.cameUp;
+    record.file = path.relative(ROOT, paced.code === 0 ? mp4 : raw);
+    record.duration = taken.seconds;
+    record.outcome = !taken.ok ? 'failed' : met ? 'ok' : 'missed';
+    if (!taken.ok) record.why = taken.why;
+    else if (!met) record.why = 'the instance the tape built never answered';
+    index.push(record);
+    console.log(`  ${{ ok: '✓', missed: '~', failed: '✗' }[record.outcome]} ${slug.padEnd(42)} ${record.file}${record.why ? ' ' + record.why : ''}`);
+    if (shot.cleanup) await shot.cleanup().catch(() => {});
+    continue;
+  }
+
+  // The origin this shot is taken against: the admin dataspace when the shot asks for
+  // it, the end-user dataspace otherwise.
+  const shotBase = shot.admin ? adminOrigin(opts.base) : opts.base;
+  const identity = shot.anonymous ? null : await identityFor({ ...opts, base: shotBase });
+  const context = await browser.newContext({
+    ignoreHTTPSErrors: true,
+    viewport: { width: GEOMETRY.width, height: GEOMETRY.height },
+    deviceScaleFactor: GEOMETRY.scale,
+    permissions: ['clipboard-read', 'clipboard-write'],
+    ...(identity ? { clientCertificates: identity } : {}),
+    ...(shot.kind === 'clip'
+      ? { recordVideo: { dir: OUT, size: { width: GEOMETRY.width, height: GEOMETRY.height } } }
+      : {}),
+  });
+  await context.addCookies([
+    { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(shotBase).hostname, path: '/' },
+  ]);
+  await context.addInitScript(CURSOR_INIT);
+
+  const page = await context.newPage();
+  const cursor = makeCursor(page);
+  // The same human-paced typer the scenes use, so a shot that fills a field goes
+  // through the app's own input handling rather than setting a value behind its back.
+  const { type, typeCode } = makeTyper(page);
+  const marks = new Marks(slug).start();
+  const errors = [];
+  page.on('pageerror', (e) => errors.push(e.message.slice(0, 90)));
+
+  let outcome = 'ok', why;
+  try {
+    await page.goto(shotBase + shot.at, { waitUntil: 'load' });
+    await page.waitForTimeout(shot.settle ?? 5000);
+    if (shot.act) await shot.act({ page, cursor, type, typeCode, marks, nav, modes, blocks, sleep, scratch: await scratchFor(shot) });
+    await page.waitForTimeout(1200);
+
+    // The caption is the contract. Without this the runner only ever proved that
+    // act() did not throw, which passed three byte-identical stills as shot.
+    if (shot.want) {
+      const met = typeof shot.want === 'function'
+        ? await shot.want(page)
+        : (await page.locator(shot.want).count()) > 0;
+      if (!met) { outcome = 'missed'; why = `nothing matched what the caption promises`; }
+    }
+
+    if (shot.after) await shot.after(page);
+
+    if (shot.kind === 'still') {
+      const file = path.join(dir, `${path.basename(shot.doc)}-${shot.n}.png`);
+      await withCursorHidden(page, () => shot.of
+        ? shootSubject(page, shot, file, GEOMETRY)
+        : page.screenshot({ path: file, clip: shot.clip, fullPage: shot.fullPage ?? false }));
+      record.file = path.relative(ROOT, file);
+    }
+  } catch (e) {
+    outcome = 'failed';
+    why = e.message.split('\n')[0].slice(0, 110);
+  }
+
+  const video = page.video();
+  await context.close();
+
+  if (shot.kind === 'clip' && video) {
+    const webm = path.join(dir, `${path.basename(shot.doc)}-${shot.n}.webm`);
+    await video.saveAs(webm).catch(() => {});
+    await video.delete().catch(() => {});
+    const mp4 = webm.replace(/\.webm$/, '.mp4');
+    const paced = await run('node', [path.join(ROOT, 'render', 'pace.mjs'), webm, mp4, '--dwell', '3', '--crf', '20']);
+    record.file = path.relative(ROOT, paced.code === 0 ? mp4 : webm);
+    record.duration = Number(marks.elapsed.toFixed(1));
+  }
+
+  record.outcome = outcome;
+  if (why) record.why = why;
+  if (errors.length) record.pageErrors = errors.length;
+  index.push(record);
+
+  const mark = { ok: '✓', missed: '~', failed: '✗' }[outcome];
+  console.log(`  ${mark} ${slug.padEnd(42)} ${record.file ?? ''} ${why ?? ''}`);
+}
+
+// Teardown: what the runner made, then what a shot said it would leave behind through
+// the UI (the runner cannot see those), then the container.
+if (scratch) {
+  const declared = wanted.flatMap((s) => (s.creates ?? []).map((slug) => `${scratch.url.replace(/\/$/, '')}/${slug}/`));
+  const gone = await removeAll({ ...creds, urls: [...made, ...declared, scratch.url] });
+  console.log(`scratch removed: ${gone.filter(([, ok]) => ok).length}/${gone.length}`);
+}
+
+await browser.close();
+// A --only run refreshes the slots it took and leaves the rest of the index alone,
+// so iterating on three shots does not discard the other forty-one.
+const indexFile = path.join(OUT, 'index.json');
+const prior = await fs.readFile(indexFile, 'utf8').then(JSON.parse).catch(() => []);
+const merged = [...prior];
+for (const r of index) {
+  const i = merged.findIndex((x) => x.doc === r.doc && x.n === r.n);
+  if (i >= 0) merged[i] = r; else merged.push(r);
+}
+merged.sort((a, b) => SHOTS.findIndex((s) => s.doc === a.doc && s.n === a.n) - SHOTS.findIndex((s) => s.doc === b.doc && s.n === b.n));
+await fs.writeFile(indexFile, JSON.stringify(merged, null, 2) + '\n');
+
+// Two stills of different things that are byte-identical mean one of them did not
+// happen. Cheap to check, and it is what exposed the first pass as green-but-wrong.
+const seen = new Map();
+for (const r of index) {
+  if (!r.file || !r.file.endsWith('.png')) continue;
+  const sum = createHash('md5').update(await fs.readFile(path.join(ROOT, r.file))).digest('hex');
+  if (seen.has(sum)) {
+    r.duplicateOf = seen.get(sum);
+    if (r.outcome === 'ok') { r.outcome = 'missed'; r.why = `byte-identical to ${seen.get(sum)}`; }
+  } else seen.set(sum, r.slug);
+}
+
+const tally = (o) => index.filter((r) => r.outcome === o);
+console.log(`\n${tally('ok').length} shot, ${tally('missed').length} missed, ${tally('failed').length} failed, ${tally('blocked').length} blocked`);
+for (const f of [...tally('missed'), ...tally('failed')]) console.log(`  ${f.outcome === 'missed' ? '~' : '✗'} ${f.slug}: ${f.why}`);
+console.log(`\nindex: ${path.relative(ROOT, path.join(OUT, 'index.json'))}\n`);
diff --git a/screencast/fixtures/dana.jpg b/screencast/fixtures/dana.jpg
new file mode 100644
index 00000000..90faeb49
Binary files /dev/null and b/screencast/fixtures/dana.jpg differ
diff --git a/screencast/hero.json b/screencast/hero.json
new file mode 100644
index 00000000..365001c0
--- /dev/null
+++ b/screencast/hero.json
@@ -0,0 +1,127 @@
+{
+  "source": "tracks/supercut.mp4",
+  "output": "tracks/hero.mp4",
+  "poster": "tracks/hero.jpg",
+  "posterAt": 3,
+  "width": 1280,
+  "crop": {
+    "top": 56,
+    "bottom": 130
+  },
+  "cuts": [],
+  "crf": 24,
+  "caption": {
+    "size": 34,
+    "weight": 500,
+    "inset": 40,
+    "bottom": 36
+  },
+  "captions": [
+    {
+      "in": 0.0,
+      "out": 6.0,
+      "text": "Graph mode draws documents as nodes and links as edges."
+    },
+    {
+      "in": 6.0,
+      "out": 14.033,
+      "text": "Clicking a node opens its document."
+    },
+    {
+      "in": 14.033,
+      "out": 23.833,
+      "text": "Related results follows the links out of the orders."
+    },
+    {
+      "in": 23.833,
+      "out": 29.433,
+      "text": "The territory's page shows the views its class declares."
+    },
+    {
+      "in": 29.433,
+      "out": 41.433,
+      "text": "The class generates the form, and Save writes the graph."
+    },
+    {
+      "in": 41.433,
+      "out": 54.033,
+      "text": "A file dropped on the document is uploaded into it."
+    },
+    {
+      "in": 54.033,
+      "out": 61.133,
+      "text": "The upload is picked as the value of a property."
+    },
+    {
+      "in": 61.133,
+      "out": 67.333,
+      "text": "The territory's view picks up the change by itself."
+    },
+    {
+      "in": 67.333,
+      "out": 73.367,
+      "text": "The breadcrumb leads back up to the container."
+    },
+    {
+      "in": 73.367,
+      "out": 81.964,
+      "text": "A SPARQL query is saved as a document."
+    },
+    {
+      "in": 81.964,
+      "out": 84.962,
+      "text": "Its results are rendered as a view."
+    },
+    {
+      "in": 84.962,
+      "out": 90.856,
+      "text": "A result set chart is bound to the query."
+    },
+    {
+      "in": 90.856,
+      "out": 94.3,
+      "text": "In Content mode the document is a list of blocks."
+    },
+    {
+      "in": 94.3,
+      "out": 98.739,
+      "text": "An XHTML block holds the prose."
+    },
+    {
+      "in": 98.739,
+      "out": 106.13,
+      "text": "An object block embeds the chart."
+    },
+    {
+      "in": 106.13,
+      "out": 109.02,
+      "text": "Dragging a block reorders the page."
+    },
+    {
+      "in": 109.02,
+      "out": 112.1,
+      "text": "The application is data."
+    }
+  ],
+  "audio": {
+    "file": "audio/supercut.mp3",
+    "fadeOut": 0.4
+  },
+  "slide": {
+    "eyebrow": "Open-source Knowledge Graph platform",
+    "title": "The application is data.",
+    "lede": "Classes, forms, views, charts and access rules are RDF documents. Push a folder of Turtle and the dataspace is live. An agent can write it.",
+    "links": [
+      {
+        "label": "linkeddatahub.com",
+        "primary": true
+      },
+      {
+        "label": "github.com/AtomGraph/LinkedDataHub"
+      }
+    ],
+    "note": "Open source under Apache 2.0",
+    "fade": 1.2,
+    "seconds": 6
+  }
+}
diff --git a/screencast/inventory.mjs b/screencast/inventory.mjs
new file mode 100644
index 00000000..d454c79e
--- /dev/null
+++ b/screencast/inventory.mjs
@@ -0,0 +1,77 @@
+// What a dataspace already contains — read this BEFORE writing a scenario.
+//
+// Scenes kept inventing questions the data already answers: 05-repeatable built
+// "products per category", which is a chart on /categories/. The fix is not more
+// care, it is looking first — so this prints the dataspace's existing answers, the
+// shape of its data, and the questions it does NOT yet answer.
+//
+//   node inventory.mjs --base https://northwind-traders.demo.localhost
+
+import { args } from './lib/harness.mjs';
+
+// Both stacks serve self-signed certificates, and this reads nothing but public
+// SPARQL results.
+process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
+
+const { base } = args();
+const endpoint = `${base.replace(/\/$/, '')}/sparql`;
+
+// Every query is cache-busted: the endpoint caches per query string, which silently
+// served me a stale answer earlier in this work.
+const ask = async (q) => {
+  const url = new URL(endpoint);
+  url.searchParams.set('query', `${q}\n# ${Date.now()}`);
+  const r = await fetch(url, { headers: { Accept: 'application/sparql-results+json' } });
+  if (!r.ok) throw new Error(`${r.status} on ${q.slice(0, 40)}`);
+  return (await r.json()).results.bindings;
+};
+
+const PREFIX = `PREFIX dct: <http://purl.org/dc/terms/>
+PREFIX ldh: <https://w3id.org/atomgraph/linkeddatahub#>
+PREFIX sp: <http://spinrdf.org/sp#>
+PREFIX sd: <http://www.w3.org/ns/sparql-service-description#>`;
+
+const section = (t) => console.log(`\n── ${t}`);
+const local = (u) => u.split(/[#/]/).filter(Boolean).pop();
+
+section('documents');
+for (const b of await ask(`${PREFIX}
+SELECT ?doc ?title WHERE { GRAPH ?doc { ?doc dct:title ?title ; a ?t } }
+ORDER BY ?doc`)) {
+  const path = b.doc.value.replace(base, '') || '/';
+  if (path.split('/').filter(Boolean).length <= 1) console.log(`  ${path.padEnd(22)} ${b.title.value}`);
+}
+
+section('questions the dataspace already answers (charts)');
+for (const b of await ask(`${PREFIX}
+SELECT DISTINCT ?title WHERE { GRAPH ?g { ?s a ldh:ResultSetChart ; dct:title ?title } } ORDER BY ?title`)) {
+  console.log(`  ${b.title.value}`);
+}
+
+section('views');
+for (const b of await ask(`${PREFIX}
+SELECT DISTINCT ?title WHERE { GRAPH ?g { ?s a ldh:View ; dct:title ?title } } ORDER BY ?title`)) {
+  console.log(`  ${b.title.value}`);
+}
+
+section('saved queries');
+for (const b of await ask(`${PREFIX}
+SELECT DISTINCT ?title WHERE { GRAPH ?g { ?s a sp:Select ; dct:title ?title } } ORDER BY ?title`)) {
+  console.log(`  ${b.title.value}`);
+}
+
+section('classes, by instance count');
+for (const b of await ask(`${PREFIX}
+SELECT ?type (COUNT(DISTINCT ?s) AS ?n) WHERE { GRAPH ?g { ?s a ?type } }
+GROUP BY ?type HAVING (COUNT(DISTINCT ?s) > 2) ORDER BY DESC(?n)`)) {
+  console.log(`  ${String(b.n.value).padStart(7)}  ${local(b.type.value)}`);
+}
+
+section('external services declared');
+const svc = await ask(`${PREFIX}
+SELECT ?title ?endpoint WHERE { GRAPH ?g { ?s a sd:Service ; sd:endpoint ?endpoint . OPTIONAL { ?s dct:title ?title } } }`);
+console.log(svc.length ? svc.map((b) => `  ${(b.title?.value ?? '(untitled)').padEnd(34)} ${b.endpoint.value}`).join('\n') : '  (none)');
+
+console.log(`\n  A scenario must ask something NOT in the chart list above.`);
+console.log(`  Test the question returns rows before scripting it — "products never`);
+console.log(`  ordered" looked like a gap and answers 0.\n`);
diff --git a/screencast/lib/annotate.mjs b/screencast/lib/annotate.mjs
new file mode 100644
index 00000000..b68a5551
--- /dev/null
+++ b/screencast/lib/annotate.mjs
@@ -0,0 +1,103 @@
+// Annotating a word in prose with a statement.
+//
+// This is how an arbitrary triple is written through the UI. The resource edit form
+// cannot do it: that form is ontology-driven, and its Add button only offers the
+// properties the class declares — for a schema:ProductGroup that is rdf:type and
+// nothing else. The RDFa editor can, because prose annotation is not constrained by
+// the subject's class.
+//
+// The overlay opens on **contextmenu**, not on a toolbar button and not on a plain
+// click — `rdfa-editor/annotate.xsl:21` matches `*[@contenteditable='true']` in mode
+// ixsl:oncontextmenu, so that "plain clicks never open the overlay and the caret
+// stays usable while editing text".
+
+import { pickByLabel } from './blocks.mjs';
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// Puts the caret through a real double-click, which selects the word and fires the
+// editor's own selection handling — a programmatic Range does neither.
+export async function selectWord(page, word) {
+  const box = await page.evaluate((w) => {
+    const eds = [...document.querySelectorAll('[contenteditable]')].filter((e) => e.isContentEditable);
+    const ed = eds.find((e) => e.textContent.toLowerCase().includes(w.toLowerCase()));
+    if (!ed) return null;
+    const walker = document.createTreeWalker(ed, NodeFilter.SHOW_TEXT);
+    let n;
+    while ((n = walker.nextNode())) {
+      const i = n.textContent.toLowerCase().indexOf(w.toLowerCase());
+      if (i < 0) continue;
+      const r = document.createRange();
+      r.setStart(n, i); r.setEnd(n, i + w.length);
+      const b = r.getBoundingClientRect();
+      return { x: Math.round(b.x + b.width / 2), y: Math.round(b.y + b.height / 2) };
+    }
+    return null;
+  }, word);
+  if (!box) return null;
+  await page.mouse.dblclick(box.x, box.y);
+  await sleep(900);
+  const got = await page.evaluate(() => String(getSelection()).trim());
+  return got.toLowerCase() === word.toLowerCase() ? box : null;
+}
+
+export async function annotate(page, cursor, type, { word, property }) {
+  const at = await selectWord(page, word);
+  if (!at) return { ok: false, why: `could not select "${word}" in the prose` };
+
+  await page.mouse.click(at.x, at.y, { button: 'right' });
+  // #rdfa-editor-overlay, class "rdfa-editor-ui" — the word "overlay" is in the id,
+  // not the class (rdfa-editor/overlay.xsl:35). The page carries one per editor
+  // instance, all sharing that id, so the selector has to take the visible one:
+  // matching on the id alone is ambiguous and every query against it errors.
+  const overlay = page.locator('#rdfa-editor-overlay:visible').first();
+  if (!(await overlay.waitFor({ state: 'visible', timeout: 8000 }).then(() => true, () => false))) {
+    return { ok: false, why: 'the annotation overlay did not open' };
+  }
+  await sleep(600);
+
+  const prop = overlay.locator('input.property-combobox').first();
+
+  const p = await pickByLabel(page, cursor, type, prop, property, { timeout: 9000 });
+  if (!p.ok) { await page.keyboard.press('Escape'); return { ok: false, why: `property: ${p.why}` }; }
+
+  // Text is the default: a literal object. A resource needs the Link side.
+  const link = overlay.locator('button.ac-switch-seg').filter({ hasText: /^Link$/ }).first();
+  if (await link.count()) { await cursor.click(link); await sleep(800); }
+
+  // After the Link switch the literal field is replaced by a resource combobox. The
+  // last visible input is NOT it — the language field survives the switch — so the
+  // object input is named explicitly.
+  // The object field is a plain URI input — name="object", no combobox class, and
+  // typing a label opens no panel. So unlike the property, the object cannot be
+  // looked up by name here: its URI has to arrive on the clipboard, copied from the
+  // resource's own control. Which is the rule, not a workaround — a URI is fetched,
+  // never known.
+  const objInput = overlay.locator('input[name="object"]').first();
+  await cursor.click(objInput);
+  await page.keyboard.press(process.platform === 'darwin' ? 'Meta+V' : 'Control+V');
+  await sleep(900);
+  const pasted = await objInput.inputValue().catch(() => '');
+  if (!pasted.startsWith('http')) {
+    await page.keyboard.press('Escape');
+    return { ok: false, why: `nothing usable on the clipboard for the object (got "${pasted.slice(0, 40)}")` };
+  }
+
+  const go = overlay.locator('button.ac-btn').filter({ hasText: /^Annotate$/ }).first();
+  if (!(await go.count())) { await page.keyboard.press('Escape'); return { ok: false, why: 'no Annotate button' }; }
+  await cursor.click(go);
+  await sleep(1800);
+
+  // Annotate only writes into the editor's DOM. The block is persisted the way the
+  // RDFa editor always persists — on focusout — so the edit has to be left before the
+  // statement exists anywhere but the page.
+  //
+  // NOT with Escape: Escape closes the editor without saving, which is precisely why
+  // it is the safe way to back out of an edit. Clicking away is what commits.
+  const heading = page.locator('.ldh-pane.is-active h1, .ldh-pane.is-active .ac-breadcrumb').first();
+  if (await heading.count()) await heading.click({ force: true }).catch(() => {});
+  else await page.mouse.click(700, 120);
+  await sleep(4000);
+
+  return { ok: true, property: p.label, uri: pasted };
+}
diff --git a/screencast/lib/blocks.mjs b/screencast/lib/blocks.mjs
new file mode 100644
index 00000000..09ee8a8d
--- /dev/null
+++ b/screencast/lib/blocks.mjs
@@ -0,0 +1,316 @@
+// Adding blocks to a document, on camera.
+//
+// A ContentMode document offers two block-add affordances, and only in ContentMode
+// — a bare document with no blocks opens in ReadMode and shows neither. XHTML opens
+// an inline RDFa editor that autosaves on focusout; Object opens an inline form with
+// a Value typeahead and an explicit Save.
+//
+// Both are how the Northwind pages themselves are built, so a scene using them is
+// authoring in the app's own idiom rather than a demo-only path.
+
+import { ui, settled } from './dom.mjs';
+import { currentDocumentMode } from './modes.mjs';
+import { field } from './constructors.mjs';
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+export const CONTENT_MODE = 'https://w3id.org/atomgraph/linkeddatahub#ContentMode';
+
+// Probe-only. A scene must reach ContentMode with switchDocumentMode() — building a
+// ?mode= URL is the address-bar form of pasting a URI you were not given.
+export function contentModeUrl(documentUrl) {
+  const u = new URL(documentUrl);
+  u.searchParams.set('mode', CONTENT_MODE);
+  return u.toString();
+}
+
+// Scoped to the active pane: a background tab's add buttons are in the DOM too.
+const addButton = (page, kind) =>
+  ui(page).locator('button.create-action.add-constructor').filter({ hasText: kind }).first();
+
+// Looking a resource up by its name.
+//
+// Any resource can be found in a combobox by its title, name or label, without
+// knowing its URI beforehand — the app resolves the label and binds the URI itself,
+// on camera, so nothing out-of-band is typed. This replaces the
+// navigate-copy-return errand wherever the title is known.
+//
+// Each suggestion is `li.ac-cb-item`, carrying the URI in @title and in a hidden
+// input[name=ou], with the label in .ac-cb-item-lbl and the resource's type beside
+// it. The type is load-bearing: "All customers" offers both an Object and a View,
+// which is the inner-versus-outer distinction settled without a copy at all — ask
+// for the View and the wrapping Object cannot be picked by mistake.
+export async function pickByLabel(page, cursor, type, input, label, { kind = null, timeout = 10000 } = {}) {
+  await cursor.click(input);
+  const mod = process.platform === 'darwin' ? 'Meta' : 'Control';
+  await page.keyboard.press(`${mod}+A`);
+  await page.keyboard.press('Backspace');
+  await type(input, label, { base: 26, spread: 10 });
+
+  // The panel belongs to THIS input. A form has one per combobox (imports/default
+  // .xsl:1280 puts it beside the .ac-cb-box holding the input), so taking the first
+  // in the document reads a different combobox's results — which is how a lookup
+  // that had in fact resolved came back "panel opened empty".
+  // The panel belongs to THIS input. In a form it sits inside the input's
+  // .ac-combobox wrapper; the annotation overlay's property and object comboboxes
+  // have no such wrapper, so fall back to the nearest panel that is actually open.
+  const wrapped = input.locator('xpath=ancestor::div[contains(@class,"ac-combobox")][1]')
+    .locator('.ac-cb-panel[role="listbox"]');
+  const panel = (await wrapped.count())
+    ? wrapped.first()
+    : page.locator('.ac-cb-panel[role="listbox"]:visible').first();
+
+  // Waiting for it to become visible proves nothing either: onfocusin already fills
+  // it from the subjects present in the form itself (form.xsl:2400), so it is up
+  // before a key is pressed and its one entry is the block being created. The store
+  // lookup is a separate onkeyup handler behind a 400ms debounce and an HTTP round
+  // trip (form.xsl:1932) — so what has to be waited for is a suggestion that answers
+  // the search.
+  const needle = label.trim().toLowerCase().slice(0, 12);
+  const arrived = await panel.locator('li.ac-cb-item')
+    .filter({ hasText: new RegExp(needle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i') })
+    .first().waitFor({ state: 'visible', timeout })
+    .then(() => true, () => false);
+  if (!arrived) {
+    const shown = await panel.locator('li.ac-cb-item').allInnerTexts().catch(() => []);
+    return { ok: false, why: `no suggestion matched "${label}" — panel offered ${shown.length ? shown.slice(0, 5).map((t) => JSON.stringify(t.replace(/\n/g, ' '))).join(' ') : '(nothing)'}` };
+  }
+  await sleep(500);
+
+  const items = panel.locator('li.ac-cb-item');
+  const n = await items.count();
+  if (!n) return { ok: false, why: `the panel opened empty for "${label}"` };
+
+  const wanted = label.trim().toLowerCase();
+  let best = null;
+  for (let i = 0; i < n; i++) {
+    const text = (await items.nth(i).innerText().catch(() => '')).trim();
+    const shown = (await items.nth(i).locator('.ac-cb-item-lbl').innerText().catch(() => text)).trim();
+    const uri = await items.nth(i).getAttribute('title').catch(() => null);
+    let score = 0;
+    if (shown.toLowerCase() === wanted) score += 4;
+    else if (shown.toLowerCase().startsWith(wanted)) score += 2;
+    else if (shown.toLowerCase().includes(wanted)) score += 1;
+    // the type follows the label, so a kind is matched against what is left of it
+    if (kind) {
+      const rest = text.slice(shown.length).trim().toLowerCase();
+      if (rest === kind.toLowerCase()) score += 4; else score -= 2;
+    }
+    if (!best || score > best.score) best = { i, score, shown, uri, text };
+  }
+  if (!best || best.score <= 0) {
+    const seen = [];
+    for (let i = 0; i < Math.min(n, 6); i++) seen.push(JSON.stringify((await items.nth(i).innerText().catch(() => '')).trim()));
+    return { ok: false, why: `nothing matched "${label}"${kind ? ` as ${kind}` : ''} — offered ${seen.join(' ')}` };
+  }
+
+  await cursor.click(items.nth(best.i));
+  await sleep(900);
+  return { ok: true, uri: best.uri, label: best.shown, of: n };
+}
+
+// Prose. The editor autosaves when focus leaves it, so the beat is: open, type,
+// look away — no Save to hunt for.
+export async function addProse(page, cursor, type, text, { settle = 1800, heading = false } = {}) {
+  const btn = addButton(page, 'XHTML');
+  if (!(await btn.count())) return { ok: false, why: 'no + XHTML button — is the document in ContentMode?' };
+
+  // The editor sometimes does not come up on the first press — a cold cache after a
+  // proxy restart is enough to lose it. One press is a flake; three is a fault.
+  const editable = ui(page).locator('.rdfa-editor-content [contenteditable]').first();
+  let opened = false;
+  for (let attempt = 1; attempt <= 3 && !opened; attempt++) {
+    await btn.scrollIntoViewIfNeeded();
+    await cursor.click(btn);
+    opened = await editable.waitFor({ state: 'visible', timeout: 8000 }).then(() => true, () => false);
+  }
+  if (!opened) return { ok: false, why: 'editor did not open after three presses' };
+
+  await cursor.click(editable);
+  await sleep(300);
+  await type(editable, text, { base: 42, spread: 18 });
+
+  // NOT USED. The block-type select replaces the editable node, and the replacement
+  // is never autosaved — a heading block ends up written to nothing and the page
+  // loses it entirely. Documents already show their title in the breadcrumb, so the
+  // structure this bought was not worth a lost block. Left here as a record of what
+  // does not work.
+  if (heading) {
+    const kind = ui(page).locator('.editor-bar select, .rdfa-editor-ui select').first();
+    if (await kind.count()) {
+      const labels = await kind.locator('option').allTextContents();
+      const want = labels.find((l) => /heading\s*2|^h2$/i.test(l.trim()))
+        ?? labels.find((l) => /heading/i.test(l.trim()));
+      if (want) {
+        await kind.selectOption({ label: want.trim() }).catch(() => {});
+        await sleep(700);
+      }
+    }
+  }
+  await sleep(600);
+
+  // Focusout is the save. Clicking the page body is what a person would do.
+  await page.locator('body').click({ position: { x: 40, y: 400 } }).catch(() => {});
+  await sleep(settle);
+  return { ok: true };
+}
+
+// A reference: embeds an existing resource — a view, a chart, another document — as
+// a block in this one.
+// `uri` may be a literal string, but scenes should pass { paste: true } instead and
+// have put the value on the clipboard with copyUri() — see the no-out-of-band-URIs
+// rule. Typing a URI the script merely knows is a step the viewer cannot reproduce.
+export async function addObject(page, cursor, type, uri, { mode = null, settle = 3000, paste = false, label = null, kind = null } = {}) {
+  const btn = addButton(page, 'Object');
+  if (!(await btn.count())) return { ok: false, why: 'no + Object button' };
+
+  const form = ui(page).locator('form').filter({ has: page.locator('button.btn-save') }).last();
+  // By property name, never by position: the first control in this form is not
+  // reliably the one labelled Value.
+  const value = field(page, 'Value', 'input:not([type=hidden]):visible');
+
+  let ready = false;
+  for (let attempt = 1; attempt <= 3 && !ready; attempt++) {
+    await btn.scrollIntoViewIfNeeded();
+    await cursor.click(btn);
+    ready = await value.waitFor({ state: 'visible', timeout: 8000 }).then(() => true, () => false);
+  }
+  if (!ready) return { ok: false, why: 'Object form did not open after three presses' };
+
+  // Looking the resource up by name is the short way round: no navigate, copy and
+  // return, and the combobox's own type labels pick the view rather than the Object
+  // wrapping it. A pasted URI is the fallback for what the lookup cannot reach.
+  let picked = null;
+  if (label) {
+    picked = await pickByLabel(page, cursor, type, value, label, { kind });
+    if (!picked.ok) return { ok: false, why: picked.why };
+  } else {
+    await cursor.click(value);
+    if (paste) {
+      const modifier = process.platform === 'darwin' ? 'Meta' : 'Control';
+      await page.keyboard.press(`${modifier}+V`);
+    } else {
+      await type(value, uri, { base: 26, spread: 10 });
+    }
+    await sleep(1600);
+
+    const suggestion = ui(page).locator('.ac-cb-panel[role="listbox"] li.ac-cb-item').first();
+    if (await suggestion.isVisible().catch(() => false)) {
+      await cursor.click(suggestion);
+      await sleep(800);
+    }
+  }
+
+  if (mode) {
+    const modeSelect = field(page, 'Layout mode', 'select:visible');
+    if (await modeSelect.count()) await modeSelect.selectOption({ label: mode }).catch(() => {});
+    await sleep(600);
+  }
+
+  const save = form.locator('button.btn-save').first();
+  if (!(await save.count())) return { ok: false, why: 'no Save on the Object form' };
+  await cursor.click(save);
+  await sleep(settle);
+  return { ok: true };
+}
+
+// Copying a URI the way a person does.
+//
+// A scene must never type a URI it happens to know into a field or the address bar.
+// To reference a resource it navigates to it, presses the app's own copy control,
+// and carries the value back on the clipboard — so the viewer sees where it came
+// from and the path is one they could repeat.
+// `match` names the resource wanted — a fragment of its URI — because a document
+// holding several created resources answers "the first copy control" with whichever
+// came first. Without it, the innermost control wins: a block that shows a view
+// wraps it, and copying the wrapper's URI into a new block nests them into two
+// stacked headers for one piece of content.
+export async function copyUri(page, cursor, within, { match = null } = {}) {
+  const scope = within ?? ui(page);
+  const all = scope.locator('.btn-copy-uri, button[class*="copy-uri"]');
+  const n = await all.count();
+  if (!n) return { ok: false, why: 'no copy-URI control here' };
+
+  let btn = all.last(); // innermost in document order: the embedded resource's own
+  if (match) {
+    for (let i = 0; i < n; i++) {
+      const candidate = all.nth(i);
+      const about = await candidate.evaluate(
+        (e) => e.closest('[about]')?.getAttribute('about') ?? '',
+      ).catch(() => '');
+      if (about.includes(match)) { btn = candidate; break; }
+    }
+  }
+
+  // On a resource page the control is hover-revealed rather than always drawn — a
+  // block header shows it, a card does not until the pointer is over it. Hovering
+  // the thing that owns it is what a person does, and it is what makes it clickable.
+  // A proxied page can still be rendering when the scene arrives, so the control is
+  // waited for rather than sampled once.
+  await btn.waitFor({ state: 'visible', timeout: 12_000 }).catch(() => {});
+
+  if (!(await btn.isVisible().catch(() => false))) {
+    for (const sel of ['.ldh-block', '.row-main', '[about]', 'main']) {
+      const host = scope.locator(sel).first();
+      if (!(await host.count())) continue;
+      // Short leash: an invisible host costs 30s at the default timeout, and four
+      // of those is two minutes spent discovering the obvious.
+      await host.hover({ timeout: 2500 }).catch(() => {});
+      await sleep(500);
+      if (await btn.isVisible().catch(() => false)) break;
+    }
+  }
+  if (!(await btn.isVisible().catch(() => false))) return { ok: false, why: 'copy-URI control never became visible' };
+
+  await cursor.click(btn);
+  await sleep(900);
+  const value = await page.evaluate(() => navigator.clipboard.readText()).catch(() => null);
+  return { ok: true, value };
+}
+
+// The document-level mode switcher, for reaching ContentMode without inventing a
+// ?mode= query string.
+//
+// Returns 'already' when no gesture was needed — same contract as switchViewMode, and
+// for the same reason: a fresh document opens in Properties, so asking for Properties
+// films a menu opening and closing for nothing, which reads as a script working
+// through a list rather than a person choosing a view.
+export async function switchDocumentMode(page, cursor, mode = 'content-mode', { settle = 3000 } = {}) {
+  if ((await currentDocumentMode(page)) === mode) return 'already';
+
+  const toggle = ui(page).locator('button.layout-modes.drop-toggle, button[title="Mode"]').first();
+  const item = ui(page).locator(`.modes-pop a.mi.${mode}`).first();
+  for (let i = 0; i < 3; i++) {
+    if (!(await toggle.count())) return false;
+    await cursor.click(toggle);
+    await sleep(700);
+    if (await item.isVisible().catch(() => false)) {
+      await cursor.click(item);
+      await page.waitForLoadState('load').catch(() => {});
+      await settled(page, 3000);
+      return true;
+    }
+  }
+  return false;
+}
+
+// A block's control bands wait to be asked for. Since 2026-09-24 a view block renders its
+// facet, sort and mode toolbar and its Related results row collapsed, and a chart block its
+// three selects, until the toggle in the card header is pressed - one gesture, one toggle
+// (`button.tb-controls`, aria-pressed). A scene that goes for a pill or a select without
+// pressing it first is reaching for something the reader cannot see, so this is on camera:
+// the pointer travels to the toggle and clicks, and the bands are awaited before the scene
+// goes on. Idempotent: a toggle already pressed is left alone.
+export async function revealControls(page, cursor, block, { settle = 700 } = {}) {
+  const toggle = block.locator('.ldh-block-head button.tb-controls').first();
+  // a query block draws its chart selects open and keeps only its editor behind a toggle
+  // (tb-query), so a head without tb-controls is a block with nothing to reveal
+  if (!(await toggle.count())) return { ok: true, already: true, why: 'no controls toggle: the block draws its controls open' };
+  if ((await toggle.getAttribute('aria-pressed')) === 'true') return { ok: true, already: true };
+  await toggle.scrollIntoViewIfNeeded();
+  await cursor.click(toggle);
+  const bands = block.locator('.ldh-view-toolbar:not(.is-collapsed), .chart-controls:not(.is-collapsed)').first();
+  await bands.waitFor({ state: 'visible', timeout: 8000 }).catch(() => {});
+  await sleep(settle);
+  return { ok: (await toggle.getAttribute('aria-pressed')) === 'true' };
+}
diff --git a/screencast/lib/constructors.mjs b/screencast/lib/constructors.mjs
new file mode 100644
index 00000000..26258b38
--- /dev/null
+++ b/screencast/lib/constructors.mjs
@@ -0,0 +1,422 @@
+// Creating instances of the ontology's classes.
+//
+// The Create menu is mode-gated: in ContentMode it offers only the two block types,
+// because those are the only things allowed as rdf:_N content. Switch the document
+// to Properties and the dock offers LDH's own creatable types — Instance, SELECT,
+// View, Result set chart, the import types, File, Service (13 entries, measured).
+//
+// Not "every class the ontology declares": that list is a fixed parameter of the
+// platform, and a domain class such as schema:Product never appears in it. An instance
+// of one is made by creating an Instance and setting its Type, which is the route the
+// user guide describes.
+//
+// The form renders inline on the document rather than in a modal, because the
+// resource being created belongs to this document.
+
+import { ui, settled } from './dom.mjs';
+import { pickByLabel } from './blocks.mjs';
+import { addValue } from './editing.mjs';
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// Opens Create ▸ <label> and returns the inline form it adds.
+export async function create(page, cursor, label) {
+  const menu = ui(page).locator('button.drop-toggle').filter({ hasText: 'Create' }).first();
+  if (!(await menu.count())) return { ok: false, why: 'no Create button — is the document in Properties?' };
+
+  for (let attempt = 1; attempt <= 3; attempt++) {
+    await cursor.click(menu);
+    await sleep(1100);
+    const item = ui(page).locator('.add-constructor').filter({ hasText: label }).first();
+    if (await item.isVisible().catch(() => false)) {
+      await cursor.click(item);
+      await settled(page, 3000);
+      return { ok: true };
+    }
+  }
+  return { ok: false, why: `${label} not offered by the Create menu` };
+}
+
+// The create DOCK, at the foot of the document — a different control from the action
+// bar's Create menu, and the one that offers the ontology's classes.
+//
+// The action bar offers Container and Item; the dock offers Instance, File, the import
+// types, the query types, View and the charts. Both toggles read "Create", so a locator
+// that takes the first match in the document gets the action bar's and reports that the
+// menu does not offer what was asked for — which is what "the Create menu hides every
+// constructor but Container and Item" recorded.
+//
+// Measured on /products/ in Properties mode: the dock offers 13 entries. In Content mode
+// it offers the two block types instead, so the document must be in Properties first.
+export async function createFromDock(page, cursor, label) {
+  const dock = page.locator('.ldh-create-dock');
+  if (!(await dock.count())) return { ok: false, why: 'no create dock on this document' };
+
+  const toggle = dock.locator('button.drop-toggle').first();
+  if (!(await toggle.count())) return { ok: false, why: 'the dock has no Create menu — is the document in Properties?' };
+
+  for (let attempt = 1; attempt <= 3; attempt++) {
+    await cursor.click(toggle);
+    await sleep(1100);
+    // Ends-with: every entry runs a Material icon ligature straight into its word, so
+    // the text reads "categoryInstance" and an anchored /^Instance$/ matches nothing.
+    const item = page.locator('.add-constructor:visible')
+      .filter({ hasText: new RegExp(`${label}$`) }).first();
+    if (await item.isVisible().catch(() => false)) {
+      await cursor.click(item);
+      await settled(page, 3000);
+      return { ok: true };
+    }
+  }
+  const offered = await page.locator('.add-constructor:visible').allInnerTexts().catch(() => []);
+  return { ok: false, why: `${label} not offered by the dock (${offered.length} entries)` };
+}
+
+// The query text field is a CodeMirror, which ignores value assignment — only real
+// keystrokes reach it.
+//
+// A query on camera has to read like one a person wrote: prefixes on their own
+// lines, WHERE on its own, graph patterns indented. So it is written multi-line and
+// UNINDENTED, and the editor's own auto-indent produces the shape — which is also
+// why supplying indentation would double it. Closing braces are typed normally;
+// CodeMirror types over the ones its auto-closing inserted.
+//
+// All of that is silent when it goes wrong, so the text is read back and compared.
+// `onAttempt(n)` fires as each typing attempt starts — a scene re-marks its shot's start
+// there, so a retake after a failed read-back is what the cut shows, not the failure.
+// `onTyped()` fires the moment the last character is in, before the settle and the
+// read-back — the beat that ends a typing shot.
+export async function typeQuery(page, cursor, query, { onAttempt = null, onTyped = null } = {}) {
+  const code = ui(page).locator('.CodeMirror, .yasqe').first();
+  if (!(await code.isVisible().catch(() => false))) return { ok: false, why: 'no query editor on the form' };
+
+  await cursor.click(code);
+  await sleep(400);
+
+  // The editor completes variable names in a popup that takes Enter as "accept",
+  // so a query typed as one string can lose a line break to a completion — "?name"
+  // came back as "?addressname" with the closing brace on the same line. Each line
+  // goes in on its own, and any open popup is dismissed before the line break.
+  const typeLines = async (delay) => {
+    const lines = query.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i]) await page.keyboard.type(lines[i], { delay });
+      if (i < lines.length - 1) {
+        await sleep(160);
+        if (await page.locator('.CodeMirror-hints:visible').count()) { await page.keyboard.press('Escape'); await sleep(120); }
+        await page.keyboard.press('Enter');
+      }
+    }
+    if (onTyped) await onTyped();
+    await sleep(1200);
+  };
+  const readBack = () => page.evaluate(() => {
+    const cm = document.querySelector('.ldh-pane.is-active .CodeMirror');
+    return cm?.CodeMirror ? cm.CodeMirror.getValue() : null;
+  }).catch(() => null);
+  // Compare ignoring the indentation the editor added for us.
+  const flat = (t) => t.split('\n').map((l) => l.trim()).filter(Boolean).join('\n');
+
+  if (onAttempt) await onAttempt(1);
+  await typeLines(14);
+  let written = await readBack();
+  if (written === null) return { ok: true, lines: query.split('\n').length, verified: false };
+  if (flat(written) !== flat(query)) {
+    // Once more, slower, over a cleared editor — a corrupted query saved is worse
+    // than a retake on camera.
+    const mod = process.platform === 'darwin' ? 'Meta' : 'Control';
+    await page.keyboard.press(`${mod}+A`); await page.keyboard.press('Backspace'); await sleep(300);
+    if (onAttempt) await onAttempt(2);
+    await typeLines(28);
+    written = await readBack();
+  }
+  const matched = flat(written ?? '') === flat(query);
+  return {
+    ok: matched,
+    lines: (written ?? '').split('\n').length,
+    verified: true,
+    why: matched ? undefined : 'the editor did not receive the query as written',
+  };
+}
+
+// The control belonging to a named property. Everything that writes to a form goes
+// through here — see the form-fields-by-name rule.
+// `scope` narrows the search to one form. Without it the first `.ldh-prop-group`
+// named Title on a record page is the record's own read-only Title row, and the
+// form's field is never reached — the query form on the Southern page sat unfilled
+// for a minute that way.
+export function field(page, label, kind = 'input:not([type=hidden]):visible, textarea:visible, select:visible', scope = null) {
+  return (scope ?? ui(page)).locator('.ldh-prop-group').filter({ hasText: label }).first().locator(kind).first();
+}
+
+// The form being edited: the last visible form that carries a Save button.
+export const openForm = (page) => ui(page).locator('form').filter({ has: page.locator('button.btn-save, button[class*="btn-save"]') }).filter({ visible: true }).last();
+
+// Fills a field by its property name.
+//
+// The form has no <label> elements: each field is a `.ldh-prop-group` carrying its
+// name as text. Filtering anything coarser — a form, a block row — matches the
+// container that holds EVERY label, and then takes its first control, which on the
+// View form is the query combobox. That is how a title once got typed into the
+// middle of a URI.
+export async function fill(page, cursor, label, value, { scope = null } = {}) {
+  const form = scope ?? openForm(page);
+  const input = field(page, label, 'input:not([type=hidden]):visible, textarea:visible', (await form.count().catch(() => 0)) ? form : null);
+  if (!(await input.isVisible().catch(() => false))) return { ok: false, why: `${label} has no editable control` };
+
+  await cursor.click(input);
+  await input.pressSequentially(value, { delay: 55 });
+  await sleep(500);
+  return { ok: true, into: await input.getAttribute('name').catch(() => null) };
+}
+
+// The inline form's own Save, not the document action bar's.
+export async function save(page, cursor, { scope = null } = {}) {
+  const form = scope ?? openForm(page);
+  const btn = ((await form.count().catch(() => 0)) ? form : ui(page)).locator('button.btn-save, button[class*="btn-save"]').filter({ visible: true }).last();
+  if (!(await btn.isVisible().catch(() => false))) return { ok: false, why: 'no Save on the form' };
+  await btn.scrollIntoViewIfNeeded().catch(() => {});
+  await cursor.click(btn);
+  await settled(page, 3200);
+  return { ok: true };
+}
+
+// Configuring a saved query's chart pane.
+//
+// Two traps, and they pull in opposite directions.
+//
+// The Series list arrives with EVERY result variable selected, the category included —
+// so ?rep, ?territories, ?orders opens with the string ?rep as a series beside two
+// integers, and the pane answers with a red "All series on a given axis must be of the
+// same data type". That is the app's own default state, not something the scene did.
+//
+// The obvious fix — set the series first, then the type — is worse: changing the chart
+// type re-renders the pane and resets the multi-select back to everything, so the error
+// becomes permanent and is saved into the chart. Order is therefore type, then category,
+// then series LAST, and the selection is read back rather than assumed.
+//
+// The category select is found by its options rather than its position: the pane is not
+// a .ldh-prop-group form, so there is no label to filter on, and "the second select" is
+// exactly the kind of positional pick that writes into the wrong control.
+export async function configureChart(page, cursor, row, { type, category = null, series }) {
+  const singles = row.locator('select:not([multiple])');
+  const multi = row.locator('select[multiple]').first();
+
+  const applySeries = async () => {
+    if (!(await multi.count())) return;
+    await multi.scrollIntoViewIfNeeded();
+    await multi.selectOption(series).catch(() => {});
+    await sleep(700);
+  };
+  const selected = async () => multi.evaluate(
+    (el) => [...el.selectedOptions].map((o) => o.value),
+  ).catch(() => []);
+
+  // 1. type first — it resets what follows
+  const typeSelect = singles.first();
+  if (await typeSelect.count()) {
+    await typeSelect.scrollIntoViewIfNeeded();
+    await typeSelect.selectOption({ label: type }).catch(() => {});
+    await sleep(900);
+  }
+
+  // 2. category, located by the options it offers
+  if (category) {
+    const n = await singles.count();
+    for (let i = 0; i < n; i++) {
+      const sel = singles.nth(i);
+      const opts = await sel.evaluate((el) => [...el.options].map((o) => o.value)).catch(() => []);
+      if (opts.includes(category)) {
+        await sel.scrollIntoViewIfNeeded();
+        await sel.selectOption(category).catch(() => {});
+        await sleep(600);
+        break;
+      }
+    }
+  }
+
+  // 3. series last, then read back and retry once — a silent miss here is a chart
+  // saved in the error state, which is worse than the transient banner it replaced
+  await applySeries();
+  let got = await selected();
+  if (series.some((v) => !got.includes(v)) || got.length !== series.length) {
+    await applySeries();
+    got = await selected();
+  }
+
+  const complaint = row.locator('.ac-alert, .alert, [class*="error"]')
+    .filter({ hasText: /same data type|must be/i }).first();
+  const errored = await complaint.isVisible().catch(() => false);
+  const mismatch = series.some((v) => !got.includes(v)) || got.length !== series.length;
+
+  return {
+    ok: !errored && !mismatch,
+    series: got,
+    why: errored ? 'the chart still reports mixed data types'
+       : mismatch ? `series came out as ${got.join(', ') || '(none)'}`
+       : undefined,
+  };
+}
+
+// Leaving the query block's chart pane.
+//
+// Saving a chart re-renders the block, and the pane comes back in its default state —
+// every variable selected as a series again, so the red "same data type" banner returns
+// and sits there for as long as the document stays in Properties. The chart that was
+// just saved is fine; this is the pane behind it (FINDINGS.md #9).
+//
+// The honest way not to film it is not to stand in front of it: the pane's work is done,
+// so the block goes back to its View tab. Returns false when there is no tab to click.
+export async function closeChartPane(page, cursor, row) {
+  // Ends-with, not exact: the tab label runs a Material icon ligature straight into the
+  // word, so it reads "table_chartView" and an anchored /^View$/ matches nothing and
+  // fails silently — the same trap currentViewMode() documents for the mode toggle.
+  const tab = row.locator('a, button').filter({ hasText: /View$/ }).first();
+  if (!(await tab.count())) return { ok: false, why: 'no View tab on the query block' };
+
+  await tab.scrollIntoViewIfNeeded().catch(() => {});
+  await cursor.click(tab);
+  await sleep(1400);
+
+  const banner = row.locator('.ac-alert, .alert, [class*="error"]')
+    .filter({ hasText: /same data type|must be/i }).first();
+  const still = await banner.isVisible().catch(() => false);
+  return { ok: !still, why: still ? 'the pane is still showing its error' : undefined };
+}
+
+// Creating the document a scene writes into — on camera, from where the scene is.
+//
+// A write-up document that is reset off camera and then reached by page.goto() is a
+// teleport: the viewer sees the opening state, then a different page, with nothing in
+// between that they could have clicked. This is the visible route instead. Create ▸
+// Item is offered on any container in its default mode, opens an .ac-modal inside the
+// active pane (Title required, Description, Primary topic — no slug, so the new
+// document gets a UUID path), and Save lands on the new document in Properties.
+//
+// Because the path is a UUID, a scene cannot reset it by slug beforehand — it removes
+// last take's document by TITLE instead (fixture.mjs deleteByTitle) and then creates
+// afresh here.
+export async function createItem(page, cursor, title) {
+  const menu = ui(page).locator('button.drop-toggle').filter({ hasText: 'Create' }).first();
+  if (!(await menu.count())) return { ok: false, why: 'no Create button on this document' };
+
+  let entry = null;
+  for (let attempt = 1; attempt <= 3 && !entry; attempt++) {
+    await cursor.click(menu);
+    await sleep(1100);
+    // Ends-with: the entry reads "descriptionItem", icon glyph run into the word.
+    const e = ui(page).locator('.add-constructor').filter({ hasText: /Item$/ }).first();
+    if (await e.isVisible().catch(() => false)) entry = e;
+  }
+  if (!entry) return { ok: false, why: 'Item not offered by the Create menu' };
+  await cursor.click(entry);
+
+  const modal = ui(page).locator('.ac-modal').last();
+  const shown = await modal.waitFor({ state: 'visible', timeout: 10_000 }).then(() => true, () => false);
+  if (!shown) return { ok: false, why: 'the Item constructor did not open' };
+  await sleep(600);
+
+  // By property name: the first control in this modal is not reliably the title.
+  const input = modal.locator('.ldh-prop-group').filter({ hasText: 'Title' }).first()
+    .locator('input:not([type=hidden]):visible').first();
+  if (!(await input.isVisible().catch(() => false))) return { ok: false, why: 'no Title field on the constructor' };
+  await cursor.click(input);
+  await input.pressSequentially(title, { delay: 55 });
+  await sleep(500);
+
+  const btn = modal.locator('button.btn-save, button[class*="btn-save"], button').filter({ hasText: /Save|Create|check/ }).last();
+  if (!(await btn.count())) return { ok: false, why: 'no Save on the constructor' };
+  const before = page.url();
+  await cursor.click(btn);
+  await page.waitForFunction((b) => location.href !== b, before, { timeout: 20_000 }).catch(() => {});
+  await page.waitForLoadState('load').catch(() => {});
+  await settled(page, 3500);
+
+  const url = page.url().split('?')[0];
+  if (url === before.split('?')[0]) return { ok: false, why: 'Save did not navigate to a new document' };
+  return { ok: true, url };
+}
+
+// Creating an instance from a view's own Create button.
+//
+// Derived inverse views ("Cities in this region", "Orders from this customer") carry
+// an add-instance button typed to the class they list (client/block/view.xsl:493).
+// The constructor opens as a modal inside the active pane; its fields come from the
+// class's shape, so they are filled BY LABEL against `values` — a map of regexes to
+// strings — and every field the shape asks for that nothing matched is reported, so a
+// first run says what the form wanted instead of failing quietly.
+export async function createFromView(page, cursor, values, { type = null, extra = [], view = null } = {}) {
+  // A page can carry several derived views, each with its own Create — Fuller's has
+  // Direct reports AND Orders handled by this employee — so the button is taken from
+  // the view named, never the first one found.
+  const scope = view ? ui(page).locator('.ldh-block[data-for-class]').filter({ hasText: view }).first() : ui(page);
+  const btn = scope.locator('button.add-instance').first();
+  const shown = await btn.waitFor({ state: 'visible', timeout: 30_000 }).then(() => true, () => false);
+  if (!shown) return { ok: false, why: 'no Create button on any view here' };
+  await btn.scrollIntoViewIfNeeded().catch(() => {});
+  await cursor.click(btn);
+
+  const modal = ui(page).locator('.modal-constructor, .ac-modal').last();
+  if (!(await modal.waitFor({ state: 'visible', timeout: 12_000 }).then(() => true, () => false))) {
+    return { ok: false, why: 'the constructor did not open' };
+  }
+  await sleep(800);
+
+  const groups = modal.locator('.ldh-prop-group');
+  const n = await groups.count();
+  const filled = []; const unmatched = [];
+  for (let i = 0; i < n; i++) {
+    const g = groups.nth(i);
+    const label = ((await g.textContent().catch(() => '')) ?? '').replace(/\s+/g, ' ').trim();
+    const input = g.locator('input:not([type=hidden]):visible, textarea:visible').first();
+    if (!(await input.count())) continue;
+    const current = await input.inputValue().catch(() => '');
+    if (current) continue; // prefilled by the inverse — leave it
+    const key = Object.keys(values).find((re) => new RegExp(re, 'i').test(label));
+    if (!key) { unmatched.push(label.slice(0, 30)); continue; }
+    // A resource-valued field is a lookup: the value is [label, kind] and is bound by
+    // name, the way every other combobox in the rig is (out-of-band names are fine,
+    // out-of-band URIs are not).
+    const isLookup = ((await input.getAttribute('class')) ?? '').includes('resource-combobox');
+    if (isLookup) {
+      const [lbl, kind] = Array.isArray(values[key]) ? values[key] : [values[key], null];
+      const picked = await pickByLabel(page, cursor, type, input, lbl, { kind });
+      if (!picked.ok) return { ok: false, why: `${label.split(' ')[0]}: ${picked.why}`, filled, unmatched };
+      filled.push(`${label.split(' ')[0]}→${lbl}`);
+    } else {
+      await cursor.click(input);
+      await input.pressSequentially(String(values[key]), { delay: 45 });
+      filled.push(`${label.split(' ')[0]}=${values[key]}`);
+    }
+    await sleep(300);
+  }
+
+  // More values of one property than the shape gives rows for — three more
+  // territories on a hire — come through the form's own add-property row.
+  for (const [localName, val] of extra) {
+    const added = await addValue(page, cursor, modal, localName);
+    if (!added.ok) return { ok: false, why: added.why, filled, unmatched };
+    const row = modal.locator('.ldh-prop-group').filter({ has: page.locator(`input[name="pu"][value$="${localName}"]`) }).last();
+    const input = row.locator('input:not([type=hidden]):visible').first();
+    const [lbl, kind] = Array.isArray(val) ? val : [val, null];
+    if (((await input.getAttribute('class')) ?? '').includes('resource-combobox')) {
+      const picked = await pickByLabel(page, cursor, type, input, lbl, { kind });
+      if (!picked.ok) return { ok: false, why: `${localName}: ${picked.why}`, filled, unmatched };
+    } else { await cursor.click(input); await input.pressSequentially(String(lbl), { delay: 45 }); }
+    filled.push(`${localName}→${lbl}`);
+    await sleep(300);
+  }
+
+  const save = modal.locator('button.btn-save, button[class*="btn-save"], button').filter({ hasText: /Save|Create|check/ }).last();
+  if (!(await save.count())) return { ok: false, why: 'no Save on the constructor', unmatched };
+  const before = page.url();
+  await cursor.click(save);
+  // Some constructors navigate to the new document (a City), some close the modal and
+  // leave the page where it was (a Product, an Order) — so the wait is for either,
+  // not twenty seconds for a navigation that may never come.
+  await page.waitForFunction((b) => location.href !== b || ![...document.querySelectorAll('.modal-constructor, .ac-modal')].some((m) => m.offsetParent !== null), before, { timeout: 20_000 }).catch(() => {});
+  await page.waitForLoadState('load').catch(() => {});
+  await settled(page, 3500);
+  const url = page.url().split('?')[0];
+  return { ok: true, navigated: url !== before.split('?')[0], url, filled, unmatched };
+}
diff --git a/screencast/lib/cursor.mjs b/screencast/lib/cursor.mjs
new file mode 100644
index 00000000..6a665dfb
--- /dev/null
+++ b/screencast/lib/cursor.mjs
@@ -0,0 +1,178 @@
+import { glideTo } from './frame.mjs';
+
+// The sticky chrome a target must clear, and the breathing room at the bottom edge.
+const HEADER_PX = 120;
+const EDGE_PX = 24;
+// A scripted pointer leaves no trace on screen: page.mouse.move() dispatches real
+// mousemove events but paints no cursor, so an unedited recording shows a UI
+// operating itself with nothing touching it.
+//
+// The dot is not animated from Node. It listens for the mousemove events the real
+// pointer already emits, so it tracks the pointer exactly and costs no extra IPC —
+// Node only has to walk the mouse along an eased path.
+
+export const CURSOR_INIT = `(() => {
+  if (window.__ldhCursorInstalled) return;
+  window.__ldhCursorInstalled = true;
+
+  const install = () => {
+    if (!document.body || document.getElementById('__ldh-cursor')) return;
+
+    const style = document.createElement('style');
+    style.textContent = \`
+      #__ldh-cursor {
+        position: fixed; top: 0; left: 0; width: 22px; height: 22px;
+        margin: -11px 0 0 -11px; border-radius: 50%;
+        background: rgba(20, 20, 20, .58);
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 2px 6px rgba(0, 0, 0, .35);
+        pointer-events: none; z-index: 2147483647;
+        transition: width .12s ease, height .12s ease, margin .12s ease;
+        will-change: transform;
+      }
+      #__ldh-cursor.is-down { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
+      .__ldh-ripple {
+        position: fixed; top: 0; left: 0; width: 18px; height: 18px;
+        margin: -9px 0 0 -9px; border-radius: 50%;
+        border: 2px solid rgba(20, 20, 20, .5);
+        pointer-events: none; z-index: 2147483646;
+        animation: __ldh-ripple .5s ease-out forwards;
+      }
+      @keyframes __ldh-ripple {
+        from { opacity: .9; transform: var(--at) scale(.5); }
+        to   { opacity: 0;  transform: var(--at) scale(3.2); }
+      }
+    \`;
+    document.head.appendChild(style);
+
+    const dot = document.createElement('div');
+    dot.id = '__ldh-cursor';
+    dot.style.transform = 'translate(-100px, -100px)';
+    document.body.appendChild(dot);
+
+    addEventListener('mousemove', (e) => {
+      dot.style.transform = \`translate(\${e.clientX}px, \${e.clientY}px)\`;
+    }, true);
+
+    addEventListener('mousedown', (e) => {
+      dot.classList.add('is-down');
+      const r = document.createElement('div');
+      r.className = '__ldh-ripple';
+      r.style.setProperty('--at', \`translate(\${e.clientX}px, \${e.clientY}px)\`);
+      document.body.appendChild(r);
+      setTimeout(() => r.remove(), 520);
+    }, true);
+
+    addEventListener('mouseup', () => dot.classList.remove('is-down'), true);
+  };
+
+  // The app re-renders whole regions client-side; if the body is replaced the dot
+  // goes with it, so put it back. documentElement does not exist yet at
+  // document-start, which is when init scripts run, so this waits for the DOM.
+  const watch = () => {
+    install();
+    if (document.documentElement) {
+      new MutationObserver(install).observe(document.documentElement, { childList: true });
+    }
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', watch);
+  } else {
+    watch();
+  }
+})();`;
+
+// A still destined for the docs should not carry a pointer that is not really
+// there, so the dot is hidden for the duration of a screenshot.
+export async function withCursorHidden(page, fn) {
+  await page.evaluate(() => {
+    const d = document.getElementById('__ldh-cursor');
+    if (d) d.style.visibility = 'hidden';
+  }).catch(() => {});
+  try {
+    return await fn();
+  } finally {
+    await page.evaluate(() => {
+      const d = document.getElementById('__ldh-cursor');
+      if (d) d.style.visibility = '';
+    }).catch(() => {});
+  }
+}
+
+const easeInOutCubic = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+export function makeCursor(page, { fps = 60 } = {}) {
+  // Start off-screen bottom-right, the way a pointer that just entered the frame would.
+  let at = { x: 1200, y: 980 };
+
+  const PACE = Number(process.env.CURSOR_PACE ?? 1);
+  async function moveTo(x, y, { duration = 650 } = {}) {
+    duration = duration * PACE;
+    const frames = Math.max(2, Math.round((duration / 1000) * fps));
+    const from = { ...at };
+    const frameMs = duration / frames;
+
+    for (let i = 1; i <= frames; i++) {
+      const k = easeInOutCubic(i / frames);
+      const started = Date.now();
+      await page.mouse.move(from.x + (x - from.x) * k, from.y + (y - from.y) * k);
+      const spent = Date.now() - started;
+      if (spent < frameMs) await sleep(frameMs - spent);
+    }
+    at = { x, y };
+  }
+
+  async function centreOf(locator) {
+    await locator.waitFor({ state: 'visible' });
+
+    // scrollIntoViewIfNeeded jumps, so an off-screen target arrives by cut. Glide to
+    // it instead, and only when it is actually off screen — a target already in view
+    // must not make the page move at all.
+    const box0 = await locator.boundingBox().catch(() => null);
+    const vh = page.viewportSize()?.height ?? 0;
+    if (box0 && vh && (box0.y < HEADER_PX || box0.y + box0.height > vh - EDGE_PX)) {
+      const y = await page.evaluate(([top, header]) => window.scrollY + top - header, [box0.y, HEADER_PX + 40]);
+      await glideTo(page, y, 550);
+    }
+    await locator.scrollIntoViewIfNeeded();
+    const box = await locator.boundingBox();
+    if (!box) throw new Error('cursor: target has no bounding box');
+    return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+  }
+
+  return {
+    get position() { return { ...at }; },
+
+    moveTo,
+
+    async moveOver(locator, opts) {
+      const { x, y } = await centreOf(locator);
+      await moveTo(x, y, opts);
+    },
+
+    // A real pointer settles before it presses, and the press is visible for a beat
+    // after. Both pauses are what stop playback reading as a macro.
+    async click(locator, { duration = 650, settle = 180, after = 260 } = {}) {
+      settle = settle * PACE;
+      const { x, y } = await centreOf(locator);
+      await moveTo(x, y, { duration });
+      await sleep(settle);
+      await page.mouse.down();
+      await sleep(90);
+      await page.mouse.up();
+      await sleep(after);
+    },
+
+    async clickAt(x, y, { duration = 650, settle = 180, after = 260 } = {}) {
+      settle = settle * PACE;
+      await moveTo(x, y, { duration });
+      await sleep(settle);
+      await page.mouse.down();
+      await sleep(90);
+      await page.mouse.up();
+      await sleep(after);
+    },
+  };
+}
diff --git a/screencast/lib/dom.mjs b/screencast/lib/dom.mjs
new file mode 100644
index 00000000..d6a1c993
--- /dev/null
+++ b/screencast/lib/dom.mjs
@@ -0,0 +1,45 @@
+// Where to look.
+//
+// LinkedDataHub keeps every open tab's pane in the DOM and marks one `is-active`.
+// Following a link into another dataspace opens a new tab, so the previous page's
+// markup stays behind, hidden but matchable. Any locator written against the whole
+// page can therefore resolve to an element in a pane nobody is looking at — which
+// is not a flake, it is a scene driving the wrong tab.
+//
+// Everything a scene touches goes through here.
+
+// A comma selector must have every alternative scoped, not just the first: naive
+// concatenation yields `.pane .a, .b`, where `.b` is still page-wide and, being
+// earlier in the DOM, is exactly what .first() then returns from a stale tab.
+export function scoped(selector, prefix = '.ldh-pane.is-active') {
+  return selector
+    .split(',')
+    .map((part) => `${prefix} ${part.trim()}`)
+    .join(', ');
+}
+
+export function ui(page) {
+  return {
+    locator: (selector, options) => page.locator(scoped(selector), options),
+    page,
+  };
+}
+
+// Some chrome lives outside the panes altogether — the drawer, the dataspaces
+// menu, the action bar — so those keep using the page directly.
+export function chrome(page) {
+  return page;
+}
+
+// How long a settle actually takes is the app's business, not the scene's. LDH marks
+// a block that is still fetching with .is-loading, and the tree and facet popovers
+// carry their own; when none of them is on screen the page has finished. The cap is
+// what the fixed sleep used to be, so a slow render is no worse than before and a
+// fast one costs nothing.
+export async function settled(page, cap = 3500) {
+  await page.waitForFunction(
+    () => !document.querySelector('.is-loading, .facet-loading, .tree-loading'),
+    null, { timeout: cap },
+  ).catch(() => {});
+  await new Promise((r) => setTimeout(r, 250));
+}
diff --git a/screencast/lib/editing.mjs b/screencast/lib/editing.mjs
new file mode 100644
index 00000000..327359c6
--- /dev/null
+++ b/screencast/lib/editing.mjs
@@ -0,0 +1,189 @@
+// Editing what already exists — the other half of the loop.
+//
+// In Properties (read) mode every resource block carries its own edit control; pressing
+// it swaps the block for an inline form whose rows are the resource's properties. A
+// literal is a text input; a resource value is a committed chip carrying `edit`
+// (turns the chip back into a lookup-by-name combobox) and `remove`. Everything here
+// finds rows by property label, never by position (form-fields-by-name rule).
+import { ui } from './dom.mjs';
+import { sleep } from './harness.mjs';
+import { pickByLabel } from './blocks.mjs';
+
+const formOf = (page) => ui(page).locator('form.ldh-edit-form, form').filter({ has: page.locator('button.btn-save') }).last();
+const rows = (form, label) => form.locator('.ldh-prop-group').filter({ has: form.page().locator('.pred', { hasText: new RegExp(`^\\s*${label}\\s*$`) }) });
+
+// Opens the inline edit form of the resource block whose text matches `hasText`.
+export async function editResource(page, cursor, hasText, { settle = 3000 } = {}) {
+  const block = ui(page).locator('.ldh-block').filter({ hasText }).first();
+  if (!(await block.count())) return { ok: false, why: `no block matching ${hasText}` };
+  const btn = block.locator('button').filter({ hasText: /^\s*edit\s*$/ }).first();
+  if (!(await btn.count())) return { ok: false, why: 'the block has no edit control' };
+  await btn.scrollIntoViewIfNeeded();
+  await cursor.click(btn);
+  const form = formOf(page);
+  const shown = await form.waitFor({ state: 'visible', timeout: 15_000 }).then(() => true, () => false);
+  if (!shown) return { ok: false, why: 'the edit form did not open' };
+  await sleep(settle);
+  return { ok: true, form };
+}
+
+// Replaces the text of a literal row (the first row of that label, or the one whose
+// current value matches `where`).
+export async function setLiteral(page, cursor, type, form, label, value, { where = null } = {}) {
+  let row = rows(form, label);
+  if (where) row = row.filter({ has: page.locator(`input[value*="${where}"], textarea`) });
+  const input = row.first().locator('input:not([type=hidden]):visible, textarea:visible').first();
+  if (!(await input.count())) return { ok: false, why: `${label} has no editable value` };
+  await input.scrollIntoViewIfNeeded();
+  await cursor.click(input);
+  const mod = process.platform === 'darwin' ? 'Meta' : 'Control';
+  await page.keyboard.press(`${mod}+A`);
+  await page.keyboard.press('Backspace');
+  await type(input, value, { base: 30, spread: 12 });
+  return { ok: true };
+}
+
+// Edits the tail of a URI-valued row in place: the value stays a URI, its local name
+// changes — OrderProblem → OrderDelivered. What a person does with an enumeration
+// that has no picker.
+export async function retypeLocalName(page, cursor, type, form, label, from, to) {
+  const input = rows(form, label).first().locator('input:not([type=hidden]):visible').first();
+  if (!(await input.count())) return { ok: false, why: `${label} has no editable value` };
+  const current = await input.inputValue();
+  if (!current.endsWith(from)) return { ok: false, why: `${label} is ${current}, not …${from}` };
+  await input.scrollIntoViewIfNeeded();
+  await cursor.click(input);
+  await page.keyboard.press('End');
+  for (let i = 0; i < from.length; i++) await page.keyboard.press('Backspace');
+  await type(input, to, { base: 40, spread: 14 });
+  return { ok: true, value: await input.inputValue() };
+}
+
+// Removes the value of `label` whose chip text matches `text`.
+export async function removeValue(page, cursor, form, label, text) {
+  const row = rows(form, label).filter({ hasText: text }).first();
+  if (!(await row.count())) return { ok: false, why: `no ${label} value matching ${text}` };
+  const btn = row.locator('button').filter({ hasText: /^\s*remove\s*$/ }).first();
+  if (!(await btn.count())) return { ok: false, why: `${label} ${text} has no remove control` };
+  await btn.scrollIntoViewIfNeeded();
+  await cursor.click(btn);
+  await sleep(600);
+  return { ok: true };
+}
+
+// Re-points a resource-valued row: `edit` on the chip opens a lookup, the new value is
+// picked by name and type.
+export async function repoint(page, cursor, type, form, label, newLabel, { kind = null, where = null } = {}) {
+  let row = rows(form, label);
+  if (where) row = row.filter({ hasText: where });
+  row = row.first();
+  if (!(await row.count())) return { ok: false, why: `no ${label} row` };
+  const edit = row.locator('button').filter({ hasText: /^\s*edit\s*$/ }).first();
+  if (await edit.count()) { await edit.scrollIntoViewIfNeeded(); await cursor.click(edit); await sleep(700); }
+  const input = row.locator('input.resource-combobox:visible, input:not([type=hidden]):visible').first();
+  if (!(await input.count())) return { ok: false, why: `${label} did not open for editing` };
+  const picked = await pickByLabel(page, cursor, type, input, newLabel, { kind });
+  return picked.ok ? { ok: true } : { ok: false, why: picked.why };
+}
+
+// Adds one more value row for a property: the form's foot carries a select of the
+// resource's properties (by local name) and an Add button; the new row is the last of
+// that label, empty, and — for a resource property — a lookup-by-name combobox.
+export async function addValue(page, cursor, form, localName) {
+  const select = form.locator('.ldh-prop-addrow select').first();
+  if (!(await select.count())) return { ok: false, why: 'the form has no add-property row' };
+  await select.scrollIntoViewIfNeeded();
+  const value = await select.evaluate((s, ln) => [...s.options].find((o) => o.value.endsWith('/' + ln) || o.value.endsWith('#' + ln))?.value ?? null, localName);
+  if (!value) return { ok: false, why: `${localName} is not a property of this form` };
+  await select.selectOption(value);
+  await sleep(300);
+  const add = form.locator('.ldh-prop-addrow button.add-value').first();
+  await cursor.click(add);
+  await sleep(900);
+  return { ok: true };
+}
+
+// Fills the row addValue() just added: the last row of that property.
+export async function pickAddedValue(page, cursor, type, form, localName, label, { kind = null } = {}) {
+  const row = form.locator('.ldh-prop-group').filter({ has: page.locator(`input[name="pu"][value$="${localName}"]`) }).last();
+  const input = row.locator('input:not([type=hidden]):visible, textarea:visible').first();
+  if (!(await input.count())) return { ok: false, why: `no empty ${localName} row to fill` };
+  if (((await input.getAttribute('class')) ?? '').includes('resource-combobox')) {
+    const picked = await pickByLabel(page, cursor, type, input, label, { kind });
+    return picked.ok ? { ok: true } : { ok: false, why: picked.why };
+  }
+  await cursor.click(input);
+  await type(input, String(label), { base: 30, spread: 12 });
+  return { ok: true };
+}
+
+export async function saveForm(page, cursor, form, { settle = 3500 } = {}) {
+  const save = form.locator('button.btn-save').first();
+  if (!(await save.count())) return { ok: false, why: 'no Save on the form' };
+  await save.scrollIntoViewIfNeeded();
+  await cursor.click(save);
+  await sleep(settle);
+  const banner = ui(page).locator('.ac-alert, .alert-error, [role="alert"]').filter({ hasText: /./ }).first();
+  const err = (await banner.isVisible().catch(() => false)) ? (await banner.textContent()).replace(/\s+/g, ' ').trim().slice(0, 120) : null;
+  return err ? { ok: false, why: err } : { ok: true };
+}
+
+// Moving a block: a pointer drag, the way a person does it.
+//
+// The app's handlers read their subject off the element under the POINTER - ondragstart
+// resolves the row from the handle, ondragover marks the row the block would land after,
+// ondrop resolves both from wherever the release lands - so the drag is the mouse and not a
+// set of DragEvents dispatched at chosen elements. Chromium delivers the HTML5 events for a
+// real pointer drag; what it needs is a small first move after the press to cross the drag
+// threshold. (The earlier synthetic version was a workaround for a build where pointer drags
+// did not reach the handler; measured 2026-09-28, they do, and the browser then also draws
+// the drag image under the pointer, which no dispatched event ever could.)
+//
+// The drop marker is a dotted line at the BOTTOM edge of the target row, and the target here
+// is the chart block, taller than the fold. Before the release the page is scrolled so that
+// edge is on screen: the marker is what the drag tells the reader, and a marker below the
+// fold reads as no marker at all.
+//
+// The app moves the dragged block AFTER the block it is dropped on, so dropping on the
+// previous sibling is a no-op: to put B above A, drag A onto B.
+export async function dragBlock(page, cursor, from, to, { travel = 900, hold = 900 } = {}) {
+  const handle = from.locator('span.ldh-bh-drag').first();
+  if (!(await handle.count())) return { ok: false, why: 'no drag handle on the source block' };
+  const target = to.locator('.ldh-block').first();
+  if (!(await target.count())) return { ok: false, why: 'no block inside the target row' };
+  const order = () => page.evaluate(() => JSON.stringify([...document.querySelectorAll('.ldh-pane.is-active .content-body > .ldh-block-row')].filter((r) => r.querySelector('span.ldh-bh-drag')).map((r) => r.getAttribute('about'))));
+  const before = await order();
+
+  await from.hover(); await sleep(300);
+  const hb = await handle.boundingBox();
+  if (!hb) return { ok: false, why: 'no handle box' };
+  const h = { x: hb.x + hb.width / 2, y: hb.y + hb.height / 2 };
+  await cursor.moveTo(h.x, h.y, { duration: 500 });
+  await sleep(250);
+  await page.mouse.down();
+  await page.mouse.move(h.x + 8, h.y + 8);      // cross the drag threshold: the drag starts here
+  await sleep(120);
+
+  // travel: the pointer crosses the page in steps, so the rows under it receive the dragover
+  // stream a real drag produces, and the target lights up as the app marks it
+  const tb = await target.boundingBox();
+  if (!tb) return { ok: false, why: 'no target box' };
+  await page.mouse.move(tb.x + Math.min(120, tb.width / 2), tb.y + Math.min(60, tb.height / 2), { steps: Math.max(12, Math.round(travel / 40)) });
+  await sleep(300);
+
+  // the marker is drawn at the target's bottom edge: bring it into the frame before releasing,
+  // unless it is already there (a scene that zoomed the page to fit both rows needs no scroll)
+  const viewport = page.viewportSize();
+  const edgeVisible = tb.y + tb.height <= viewport.height - 24;
+  if (!edgeVisible) {
+    await to.evaluate((el) => el.scrollIntoView({ block: 'end', behavior: 'smooth' }));
+    await sleep(900);
+  }
+  const tb2 = await target.boundingBox();
+  if (tb2) await page.mouse.move(tb2.x + Math.min(120, tb2.width / 2), tb2.y + Math.max(20, tb2.height - 80), { steps: 8 });
+  await sleep(hold);
+  await page.mouse.up();
+
+  const changed = await page.waitForFunction((b) => JSON.stringify([...document.querySelectorAll('.ldh-pane.is-active .content-body > .ldh-block-row')].filter((r) => r.querySelector('span.ldh-bh-drag')).map((r) => r.getAttribute('about'))) !== b, before, { timeout: 10_000 }).then(() => true, () => false);
+  return changed ? { ok: true } : { ok: false, why: 'the order did not change' };
+}
diff --git a/screencast/lib/fixture.mjs b/screencast/lib/fixture.mjs
new file mode 100644
index 00000000..bed2934e
--- /dev/null
+++ b/screencast/lib/fixture.mjs
@@ -0,0 +1,134 @@
+// Resetting the document a scene writes into.
+//
+// An accumulating scene builds a page up block by block, so it has to start from an
+// empty one or take two films take one's leftovers. The reset runs through the ldh
+// CLI *before* the browser context exists — the recording starts with the context,
+// so setup is genuinely off camera rather than trimmed out afterwards.
+//
+// The CLI's location is a parameter like everything else: --ldh, or LDH_BIN, or
+// whatever `ldh` resolves to on PATH.
+
+import { spawn } from 'node:child_process';
+import fs from 'node:fs/promises';
+
+function run(cmd, args, input = null) {
+  return new Promise((resolve) => {
+    const p = spawn(cmd, args);
+    if (input !== null) { p.stdin.write(input); p.stdin.end(); }
+    let out = '', err = '';
+    p.stdout.on('data', (d) => (out += d));
+    p.stderr.on('data', (d) => (err += d));
+    p.on('error', (e) => resolve({ code: -1, out, err: e.message }));
+    p.on('close', (code) => resolve({ code, out: out.trim(), err: err.trim() }));
+  });
+}
+
+export async function resetDocument({ ldh, base, certFile, certPassword, certPasswordFile, container, slug, title }) {
+  const password = certPassword ?? (certPasswordFile ? (await fs.readFile(certPasswordFile, 'utf8')).trim() : null);
+  if (!password) throw new Error('resetDocument needs --cert-password or --cert-password-file');
+
+  // The CLI takes its options after the subcommand, not before it.
+  const auth = ['-b', base.endsWith('/') ? base : `${base}/`, '-c', certFile, '-p', password];
+  const url = `${container.replace(/\/$/, '')}/${slug}/`;
+  const scrub = (t) => String(t).split(password).join('••••');
+
+  // Delete first; a missing document is not an error worth stopping for.
+  const gone = await run(ldh, ['delete', url, ...auth]);
+  const made = await run(ldh, ['create', 'item', ...auth, '--container', container, '--title', title, '--slug', slug]);
+
+  if (made.code !== 0) {
+    throw new Error(`could not create ${url}: ${scrub(made.err || made.out).slice(0, 400)}`);
+  }
+  return { url: made.out || url, deleted: gone.code === 0 };
+}
+
+// The scratch container a docs shot writes into.
+//
+// Shots that document an ACT of authoring — annotating a word, uploading a file,
+// creating a resource — have to write somewhere, and writing into the demo data is
+// not on: the demo is the showcase, and anything left behind becomes somebody's
+// puzzle later. So a run provisions its own container, uses it, and removes it.
+//
+// Reset rather than create: delete first, so a run that died before teardown does
+// not poison the next one. Nothing here assumes a document that some earlier session
+// happened to leave lying around.
+export async function resetContainer({ ldh, base, certFile, certPassword, certPasswordFile, parent, slug, title }) {
+  const password = certPassword ?? (certPasswordFile ? (await fs.readFile(certPasswordFile, 'utf8')).trim() : null);
+  if (!password) throw new Error('resetContainer needs --cert-password or --cert-password-file');
+
+  const root = base.endsWith('/') ? base : `${base}/`;
+  const auth = ['-b', root, '-c', certFile, '-p', password];
+  const scrub = (t) => String(t).split(password).join('••••');
+
+  await run(ldh, ['delete', `${(parent ?? root).replace(/\/$/, '')}/${slug}/`, ...auth.slice(2)]);
+  const made = await run(ldh, ['create', 'container', ...auth, '--parent', parent ?? root, '--title', title, '--slug', slug]);
+  if (made.code !== 0) throw new Error(`could not create container ${slug}: ${scrub(made.err || made.out).slice(0, 400)}`);
+  return made.out || `${root}${slug}/`;
+}
+
+// Remove what a run created: the documents it made, then the container itself. A shot
+// that creates through the UI declares the slugs it will leave behind, because the
+// runner cannot see them otherwise.
+export async function removeAll({ ldh, certFile, certPassword, certPasswordFile, urls }) {
+  const password = certPassword ?? (certPasswordFile ? (await fs.readFile(certPasswordFile, 'utf8')).trim() : null);
+  const auth = ['-c', certFile, '-p', password];
+  const gone = [];
+  for (const url of urls) {
+    const r = await run(ldh, ['delete', url, ...auth]);
+    gone.push([url, r.code === 0]);
+  }
+  return gone;
+}
+
+// Removing last take's write-up document, off camera, when its path is not known.
+//
+// A document created on camera through Create ▸ Item lands at a UUID path, so there
+// is no slug to reset by. The title is stable, so the previous take's document is
+// found by it and deleted before the browser context exists — the same off-camera
+// discipline as resetDocument, keyed differently. Exact title match, scoped to this
+// base; the store is shared across dataspaces.
+export async function deleteByTitle({ ldh, base, certFile, certPassword, certPasswordFile, title }) {
+  const root = base.endsWith('/') ? base : `${base}/`;
+  const endpoint = `${root}sparql`;
+  const q = `PREFIX dct: <http://purl.org/dc/terms/>
+SELECT DISTINCT ?doc WHERE { GRAPH ?doc { ?s dct:title ${JSON.stringify(title)} } FILTER(STRSTARTS(STR(?doc), ${JSON.stringify(root)})) }
+# ${Date.now()}`;
+  const prev = process.env.NODE_TLS_REJECT_UNAUTHORIZED;
+  process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
+  let urls = [];
+  try {
+    const u = new URL(endpoint); u.searchParams.set('query', q);
+    const r = await fetch(u, { headers: { Accept: 'application/sparql-results+json' } });
+    if (r.ok) urls = (await r.json()).results.bindings.map((b) => b.doc.value);
+  } finally {
+    if (prev === undefined) delete process.env.NODE_TLS_REJECT_UNAUTHORIZED; else process.env.NODE_TLS_REJECT_UNAUTHORIZED = prev;
+  }
+  if (!urls.length) return { removed: [] };
+  const gone = await removeAll({ ldh, certFile, certPassword, certPasswordFile, urls });
+  return { removed: gone.filter(([, ok]) => ok).map(([u]) => u), failed: gone.filter(([, ok]) => !ok).map(([u]) => u) };
+}
+
+// Stripping last take's content blocks off an EXISTING document, off camera.
+//
+// A scene that documents a record the demo already has — a product page — writes
+// its blocks onto that page, and the next take must start from the bare page again.
+// The document itself stays: only the ldh:XHTML / ldh:Object blocks and the rdf:_N
+// slots that hold them go, through the document's own PATCH.
+export async function clearBlocks({ ldh, certFile, certPassword, certPasswordFile, url }) {
+  const password = certPassword ?? (certPasswordFile ? (await fs.readFile(certPasswordFile, 'utf8')).trim() : null);
+  if (!password) throw new Error('clearBlocks needs --cert-password or --cert-password-file');
+  const update = `PREFIX ldh: <https://w3id.org/atomgraph/linkeddatahub#>
+DELETE { <${url}> ?slot ?block . ?block ?p ?o }
+WHERE { <${url}> ?slot ?block . ?block a ?type . FILTER(?type IN (ldh:XHTML, ldh:Object)) FILTER(STRSTARTS(STR(?slot), "http://www.w3.org/1999/02/22-rdf-syntax-ns#_")) ?block ?p ?o }`;
+  const r = await run(ldh, ['patch', url, '-c', certFile, '-p', password], update);
+  return { ok: r.code === 0, out: String(r.err || r.out).split(password).join('••••').slice(0, 300) };
+}
+
+// Putting a record back the way a take found it, off camera: one SPARQL update
+// through the document's own PATCH (INSERT/DELETE … WHERE {} without GRAPH).
+export async function patchDocument({ ldh, certFile, certPassword, certPasswordFile, url, update }) {
+  const password = certPassword ?? (certPasswordFile ? (await fs.readFile(certPasswordFile, 'utf8')).trim() : null);
+  if (!password) throw new Error('patchDocument needs --cert-password or --cert-password-file');
+  const r = await run(ldh, ['patch', url, '-f', certFile, '-p', password], update);
+  return { ok: r.code === 0, out: String(r.err || r.out).split(password).join('••••').slice(0, 300) };
+}
diff --git a/screencast/lib/frame.mjs b/screencast/lib/frame.mjs
new file mode 100644
index 00000000..156a3760
--- /dev/null
+++ b/screencast/lib/frame.mjs
@@ -0,0 +1,105 @@
+// One continuous scroll, driven a frame at a time.
+//
+// scrollTo({ behavior: 'smooth' }) hands the animation to the browser, whose
+// duration is its own business — so a sequence of them fired on a timer interrupts
+// each animation with the next and the picture stutters. Animating it here instead
+// puts one position on screen per frame for exactly as long as asked, and an
+// ease-in-out means it starts and stops gently rather than snapping into motion.
+export async function glideTo(page, y, ms = 900) {
+  await page.evaluate(([to, dur]) => new Promise((done) => {
+    const from = window.scrollY;
+    const delta = Math.max(0, to) - from;
+    if (!delta || dur <= 0) { window.scrollTo(0, Math.max(0, to)); return done(); }
+    const ease = (t) => (t < 0.5 ? 2 * t * t : 1 - ((-2 * t + 2) ** 2) / 2);
+    const start = performance.now();
+    const frame = (now) => {
+      const t = Math.min(1, (now - start) / dur);
+      window.scrollTo(0, from + delta * ease(t));
+      if (t < 1) requestAnimationFrame(frame); else done();
+    };
+    requestAnimationFrame(frame);
+  }), [y, ms]);
+}
+
+// Framing a control and its effect together.
+//
+// A block that carries controls — a chart's axes, a view's mode, a query editor —
+// renders its result in a container somewhere below them. Scrolling to the control
+// alone films a switch being flipped with nothing visibly happening; scrolling to
+// the result alone films an effect with no cause. Both have to be in the viewport
+// at the moment the control is used.
+//
+// When the pair is taller than the viewport the result wins, because the effect is
+// what the beat is about.
+
+export async function frameTogether(page, controls, result, { headerPx = 120, pad = 20, settle = 800, prefer = 'result' } = {}) {
+  const c = await controls.boundingBox().catch(() => null);
+  const r = await result.boundingBox().catch(() => null);
+  if (!c) return 'no controls';
+
+  const { height: vh } = page.viewportSize();
+  const scrollY = await page.evaluate(() => window.scrollY);
+
+  // Put the controls just under the sticky header.
+  let top = scrollY + c.y - headerPx - pad;
+
+  if (r) {
+    const pair = r.y + r.height - c.y;
+    if (pair > vh - headerPx - pad * 2 && prefer === 'result') {
+      // Cannot fit both: bias to the bottom of the result, keeping as much of the
+      // controls on screen as the remainder allows. Callers whose beat is about the
+      // controls — a toolbar showing the route taken — pass prefer: 'controls'.
+      top = scrollY + r.y + r.height - vh + pad;
+    }
+  }
+
+  await glideTo(page, top, 700);
+  await page.waitForTimeout(settle);
+
+  // Report what actually ended up on screen, so a scene can mark it honestly.
+  return page.evaluate(([cSel, rSel, header]) => {
+    const vis = (el) => {
+      if (!el) return null;
+      const b = el.getBoundingClientRect();
+      const top = Math.max(b.top, header);
+      const bottom = Math.min(b.bottom, innerHeight);
+      return b.height ? Math.round(Math.max(0, bottom - top) / b.height * 100) : 0;
+    };
+    return {
+      controls: vis(document.querySelector(cSel)),
+      result: vis(document.querySelector(rSel)),
+    };
+  }, [await selectorOf(controls), await selectorOf(result), headerPx]).catch(() => 'measured');
+}
+
+// Playwright locators are not selectors, so the visibility check needs something it
+// can run in the page. Scenes pass simple class locators, so the class is enough.
+async function selectorOf(locator) {
+  try {
+    return await locator.evaluate((el) => {
+      const cls = String(el.className).trim().split(/\s+/)[0];
+      return cls ? `.${cls}` : el.tagName.toLowerCase();
+    });
+  } catch {
+    return 'body';
+  }
+}
+
+// Reading a page back.
+//
+// Ending on a jump to the top shows only the opening paragraph when the page
+// carries a tall block. A story is only legible in sequence, so the close scrolls
+// through it at a readable pace.
+export async function scrollThrough(page, { duration = 6000, settle = 900 } = {}) {
+  await glideTo(page, 0, 450);
+  await page.waitForTimeout(settle);
+
+  const height = await page.evaluate(() => Math.max(0, document.body.scrollHeight - innerHeight));
+  if (height <= 0) return 0;
+
+  // The whole way down as a single animation, rather than a staircase of separate
+  // smooth scrolls that cut each other off.
+  await glideTo(page, height, duration);
+  await page.waitForTimeout(settle);
+  return height;
+}
diff --git a/screencast/lib/graph.mjs b/screencast/lib/graph.mjs
new file mode 100644
index 00000000..58cae04c
--- /dev/null
+++ b/screencast/lib/graph.mjs
@@ -0,0 +1,341 @@
+// Driving the 3D graph.
+//
+// Nodes are WebGL, not DOM, so there is nothing to locate: their positions come from
+// the ForceGraph3D instance the app keeps at LinkedDataHub.graphs[<canvas id>],
+// nested one level down under .instance. graph2ScreenCoords() gives canvas-relative
+// UNZOOMED pixels; under a CSS zoom on the document (the 2× takes) the canvas rect is
+// in zoomed viewport pixels, so a screen point is rect.x + p.x × zoom.
+// coordinates; the canvas offset makes them page coordinates.
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// forwards the argument — dropping it made every parameterised probe destructure
+// undefined, which reads as "undefined is not iterable" from inside the page
+const read = (page, fn, arg) => page.evaluate(fn, arg);
+
+export async function graphState(page) {
+  return read(page, () => {
+    const g = (() => {
+      // The LIVE instance, not the first one registered. LinkedDataHub.graphs is keyed
+      // by canvas id and accumulates across in-app navigation, so after a scene leaves
+      // a graph and comes back to one, [0] is the dead canvas from the opening — stale
+      // coordinates, and a double-click that lands on nothing. Pick the entry whose
+      // canvas is in the DOM and visible; fall back to the newest.
+      const gs = window.LinkedDataHub?.graphs ?? {};
+      const entries = Object.entries(gs);
+      const live = entries.filter(([id]) => { const el = document.getElementById(id); return !!el && el.offsetParent !== null; });
+      const pick = (live.length ? live : entries).at(-1);
+      return pick ? pick[1] : undefined;
+    })();
+    if (!g) return null;
+    const fg = g.instance ?? g;
+    const d = fg.graphData();
+    return { nodes: d.nodes.length, links: d.links.length, loaded: (g['loaded-uris'] || []).length, uris: [...(g['loaded-uris'] || [])].map(String) };
+  });
+}
+
+// A node belonging to another document — expanding one of those is what crosses the
+// document boundary, which is the whole point of the gesture.
+export async function foreignNode(page, documentUri, { skip = 0, prefer = null } = {}) {
+  return read(page, ([here, n, preferSrc]) => {
+    const g = (() => {
+      // The LIVE instance, not the first one registered. LinkedDataHub.graphs is keyed
+      // by canvas id and accumulates across in-app navigation, so after a scene leaves
+      // a graph and comes back to one, [0] is the dead canvas from the opening — stale
+      // coordinates, and a double-click that lands on nothing. Pick the entry whose
+      // canvas is in the DOM and visible; fall back to the newest.
+      const gs = window.LinkedDataHub?.graphs ?? {};
+      const entries = Object.entries(gs);
+      const live = entries.filter(([id]) => { const el = document.getElementById(id); return !!el && el.offsetParent !== null; });
+      const pick = (live.length ? live : entries).at(-1);
+      return pick ? pick[1] : undefined;
+    })();
+    if (!g) return { error: 'no graph instance' };
+    const fg = g.instance ?? g;
+    const canvasEl = document.querySelector('canvas');
+    if (!canvasEl) return { error: 'no canvas' };
+    const canvas = canvasEl.getBoundingClientRect();
+    const z = (() => { const v = Number(getComputedStyle(document.documentElement).zoom); return Number.isFinite(v) && v > 0 ? v : 1; })();
+    const raw = g['loaded-uris'];
+    const loaded = new Set(Array.isArray(raw) ? raw : (raw && typeof raw === 'object' ? Object.keys(raw) : []));
+    // A document's graph carries more than its subject: the container's own saved
+    // queries turn up as nodes too, and expanding one of those registers but adds
+    // nothing. `prefer` names the URIs worth opening — the parties to the order
+    // rather than the machinery around it.
+    const want = preferSrc ? new RegExp(preferSrc) : null;
+    const reachable = fg.graphData().nodes
+      .filter((x) => String(x.id).startsWith('http') && !String(x.id).startsWith(here) && !loaded.has(String(x.id)))
+      // nodes near the middle of the canvas are the ones a pointer can actually reach
+      .map((x) => ({ x, p: fg.graph2ScreenCoords(x.x, x.y, x.z) }))
+      .filter(({ p }) => p.x > 120 && p.x < canvas.width / z - 120 && p.y > 80 && p.y < canvas.height / z - 80);
+    const preferred = want ? reachable.filter(({ x }) => want.test(String(x.id))) : [];
+    const foreign = preferred.length ? preferred : reachable;
+    const hit = foreign[n];
+    if (!hit) return { error: `no reachable foreign node (${foreign.length} candidates)` };
+    return {
+      id: String(hit.x.id),
+      x: Math.round(canvas.x + hit.p.x * z),
+      y: Math.round(canvas.y + hit.p.y * z),
+      of: foreign.length,
+      preferred: preferred.length,
+    };
+  }, [documentUri, skip, prefer ? prefer.source ?? String(prefer) : null]);
+}
+
+// Where a named node is on screen right now.
+//
+// foreignNode() returns the nodes NOT yet described — the stubs worth expanding. This
+// is the other half: once a node's document has been pulled in, its coordinates have
+// moved and it has to be found again by URI rather than by the position it used to be
+// at.
+export async function nodeById(page, uri) {
+  return read(page, ([wanted]) => {
+    const g = (() => {
+      // The LIVE instance, not the first one registered. LinkedDataHub.graphs is keyed
+      // by canvas id and accumulates across in-app navigation, so after a scene leaves
+      // a graph and comes back to one, [0] is the dead canvas from the opening — stale
+      // coordinates, and a double-click that lands on nothing. Pick the entry whose
+      // canvas is in the DOM and visible; fall back to the newest.
+      const gs = window.LinkedDataHub?.graphs ?? {};
+      const entries = Object.entries(gs);
+      const live = entries.filter(([id]) => { const el = document.getElementById(id); return !!el && el.offsetParent !== null; });
+      const pick = (live.length ? live : entries).at(-1);
+      return pick ? pick[1] : undefined;
+    })();
+    if (!g) return { error: 'no graph instance' };
+    const fg = g.instance ?? g;
+    const canvasEl = document.querySelector('canvas');
+    if (!canvasEl) return { error: 'no canvas' };
+    const canvas = canvasEl.getBoundingClientRect();
+    const z = (() => { const v = Number(getComputedStyle(document.documentElement).zoom); return Number.isFinite(v) && v > 0 ? v : 1; })();
+    const hit = fg.graphData().nodes.find((x) => String(x.id) === wanted);
+    if (!hit) return { error: `no node ${wanted}` };
+    const p = fg.graph2ScreenCoords(hit.x, hit.y, hit.z);
+    if (p.x < 120 || p.x > canvas.width / z - 120 || p.y < 80 || p.y > canvas.height / z - 80) {
+      return { error: 'node is off the reachable part of the canvas' };
+    }
+    return { id: wanted, x: Math.round(canvas.x + p.x * z), y: Math.round(canvas.y + p.y * z) };
+  }, [uri]);
+}
+
+// Selecting a node — the gesture the graph answers with a description rather than
+// with more graph.
+//
+// The three node gestures are distinct and all three are real: a single click renders
+// the node's description into #info-content-<canvas-id>, a double click expands
+// forward along its properties, and a right click expands backwards along what points
+// at it (client/graph3d.xsl). The description the single click writes carries the
+// node's URI as an ordinary `<a href target="_blank">`, which is the route out of the
+// canvas and into the document — so the graph is not a dead end, and a scene does not
+// have to leave graph mode to prove it.
+//
+// The anchor appears only when the node HAS a description in the loaded graph: the
+// click handler falls back to rendering the bare label for a node that is still a
+// stub, and that fallback emits no link. So select() is a gesture for a node whose
+// document has already been pulled in — expand it first, then select it.
+//
+// Same short travel as expand(): every millisecond between reading the coordinate and
+// pressing is a millisecond the force simulation moves the node out from under the
+// pointer.
+export async function select(page, cursor, node, { settle = 1800, tries = 3 } = {}) {
+  // After an expansion the force layout keeps moving for seconds — the bigger the
+  // document pulled in, the longer — and a click aimed at where the node WAS lands on
+  // empty canvas, leaving the panel showing the stub label from the focus click
+  // before it. So the node is re-read until it holds still, then clicked, and the
+  // panel is checked for THIS node's link; a miss is aimed again, not reported.
+  const link = page.locator('[id^="info-content-"] a[href^="http"]').first();
+  let at = node;
+  for (let attempt = 0; attempt < tries; attempt++) {
+    at = node.id ? await approach(page, cursor, node.id, { fallback: at }) : at;
+    await cursor.moveTo(at.x, at.y, { duration: 360 });
+    await sleep(200);
+    // approach() hands back a point the canvas itself reported as hovering THIS node,
+    // which may sit a few pixels off the projected centre where a label sprite or a
+    // nearer node takes the hit. Re-projecting threw that proof away: measured on the
+    // graph take 2026-09-28, the projected centre of the customer node put an OrderItem
+    // in the panel three times in a row while the proven point opened the customer.
+    if (!at.proven) at = await settledNode(page, node.id ?? at.id, at);
+    await page.mouse.click(at.x, at.y);
+    await sleep(settle);
+    const href = await link.getAttribute('href', { timeout: 500 }).catch(() => null);
+    if (href && (!node.id || href === node.id)) break;
+    if (attempt === tries - 1) return { ok: false, why: href ? `the panel shows ${href}, not the node aimed at` : 'the click did not land on a described node' };
+  }
+
+  // Where to press. The anchor is inline inside a taller <dd>, so the centre of its
+  // bounding box lands on the <dd>'s padding rather than on the link — Playwright's
+  // hit-target check then refuses the click and the beat reports nothing happening
+  // while the link sits right there. So a point is found that elementFromPoint really
+  // resolves to the anchor, which is also the point a person would aim at.
+  const point = await page.evaluate(() => {
+    const a = document.querySelector('[id^="info-content-"] a[href^="http"]');
+    if (!a) return null;
+    for (const rect of a.getClientRects()) {
+      for (const fx of [0.15, 0.3, 0.5]) {
+        const x = Math.round(rect.left + rect.width * fx);
+        const y = Math.round(rect.top + rect.height / 2);
+        let e = document.elementFromPoint(x, y);
+        while (e && e !== a) e = e.parentElement;
+        if (e === a) return { x, y };
+      }
+    }
+    return null;
+  });
+
+  return {
+    ok: true,
+    link,
+    point,
+    href: await link.getAttribute('href').catch(() => null),
+  };
+}
+
+// Expanding a node.
+//
+// A bare dblclick does not register: the canvas wants the pointer settled on the node
+// first, so this clicks once to focus and then double-clicks with a delay between the
+// presses. `loaded-uris` is the honest confirmation — node counts move on their own
+// while the force layout settles.
+// Where the pointer must go to hit THIS node, and whether it can.
+//
+// The canvas is a 3D projection: a class node a few pixels off in 2D but nearer the
+// camera takes the click meant for the node behind it — which is how a double-click
+// on a customer once dereferenced schema:Order instead and pulled 97 nodes of
+// schema.org into the graph. So the node is read together with every other node that
+// projects within `radius` px and sits closer to the camera; when there is one, the
+// caller zooms in until there is not.
+export async function aim(page, uri, { radius = 14 } = {}) {
+  return read(page, ([wanted, radius]) => {
+    const gs = window.LinkedDataHub?.graphs ?? {};
+    const entries = Object.entries(gs);
+    const live = entries.filter(([id]) => { const el = document.getElementById(id); return !!el && el.offsetParent !== null; });
+    const pick = (live.length ? live : entries).at(-1);
+    const g = pick ? pick[1] : undefined;
+    if (!g) return { error: 'no graph instance' };
+    const fg = g.instance ?? g;
+    const canvasEl = document.querySelector('canvas');
+    if (!canvasEl) return { error: 'no canvas' };
+    const canvas = canvasEl.getBoundingClientRect();
+    const z = (() => { const v = Number(getComputedStyle(document.documentElement).zoom); return Number.isFinite(v) && v > 0 ? v : 1; })();
+    const nodes = fg.graphData().nodes;
+    const hit = nodes.find((x) => String(x.id) === wanted);
+    if (!hit) return { error: `no node ${wanted}` };
+    const cam = fg.camera().position;
+    const dist = (n) => Math.hypot(n.x - cam.x, n.y - cam.y, n.z - cam.z);
+    const p = fg.graph2ScreenCoords(hit.x, hit.y, hit.z);
+    const mine = dist(hit);
+    const occluders = nodes.filter((n) => n !== hit).map((n) => ({ n, q: fg.graph2ScreenCoords(n.x, n.y, n.z) }))
+      .filter(({ q }) => Math.hypot(q.x - p.x, q.y - p.y) <= radius)
+      .filter(({ n }) => dist(n) < mine)
+      .map(({ n }) => String(n.id));
+    const off = p.x < 120 || p.x > canvas.width / z - 120 || p.y < 80 || p.y > canvas.height / z - 80;
+    return { id: wanted, x: Math.round(canvas.x + p.x * z), y: Math.round(canvas.y + p.y * z), clear: occluders.length === 0 && !off, occluders, off };
+  }, [uri, radius]);
+}
+
+// The pointer on the node — proven, not projected.
+//
+// The canvas says what is under the pointer: every hover dispatches
+// ForceGraph3DNodeHoverOn with the node id (client/3d-force-graph.xsl), and the label
+// sprites drawn above each node take hits the projection knows nothing about. So the
+// pointer is moved to the node's projected point and the hovered id is read back; a
+// miss tries a ring of nearby points, and when none of them is this node the view is
+// turned a little by dragging — the gesture a person makes — and it starts over.
+async function armHover(page) {
+  await page.evaluate(() => {
+    if (window.__ldhHoverArmed) return;
+    window.__ldhHoverArmed = true;
+    document.addEventListener('ForceGraph3DNodeHoverOn', (e) => { window.__ldhHover = e.detail?.nodeId ?? null; });
+    document.addEventListener('ForceGraph3DNodeHoverOff', () => { window.__ldhHover = null; });
+  });
+}
+const hovered = (page) => page.evaluate(() => window.__ldhHover ?? null);
+
+export async function approach(page, cursor, uri, { turns = 3, fallback = null } = {}) {
+  await armHover(page);
+  let at = null;
+  for (let turn = 0; turn <= turns; turn++) {
+    at = await settledNode(page, uri, fallback);
+    if (!at || at.error) return fallback ?? at;
+    await cursor.moveTo(at.x, at.y, { duration: 360 });
+    await sleep(320);
+    if ((await hovered(page)) === uri) return { ...at, proven: true };
+    const ring = [];
+    for (const r of [4, 8, 12, 18]) for (let k = 0; k < 8; k++) ring.push([Math.round(r * Math.cos(k * Math.PI / 4)), Math.round(r * Math.sin(k * Math.PI / 4))]);
+    for (const [dx, dy] of ring) {
+      await page.mouse.move(at.x + dx, at.y + dy);
+      await sleep(140);
+      if ((await hovered(page)) === uri) {
+        const point = { ...at, x: at.x + dx, y: at.y + dy, proven: true };
+        await cursor.moveTo(point.x, point.y, { duration: 120 });
+        return point;
+      }
+    }
+    if (turn === turns) break;
+    // Turn the view: drag on empty canvas, well away from the node.
+    const canvas = await page.locator('canvas').first().boundingBox();
+    const sx = canvas.x + canvas.width * 0.5, sy = canvas.y + canvas.height * 0.86;
+    await cursor.moveTo(sx, sy, { duration: 300 });
+    await page.mouse.down(); await page.mouse.move(sx + 90, sy - 30, { steps: 12 }); await page.mouse.up();
+    await sleep(1600);
+  }
+  return { ...at, proven: false };
+}
+
+// The node's screen position once it has stopped drifting (two reads 250 ms apart
+// within a pixel), or the latest read after ~8 s of trying.
+async function settledNode(page, uri, fallback) {
+  if (!uri) return fallback;
+  let last = null;
+  for (let i = 0; i < 32; i++) {
+    const now = await nodeById(page, uri);
+    if (now.error) return last ?? fallback;
+    if (last && Math.abs(now.x - last.x) <= 1 && Math.abs(now.y - last.y) <= 1) return now;
+    last = now;
+    await sleep(250);
+  }
+  return last ?? fallback;
+}
+
+export async function expand(page, cursor, node, { settle = 6000 } = {}) {
+  const before = await graphState(page);
+  const at = node.id ? await approach(page, cursor, node.id, { fallback: node }) : node;
+  if (at.error) return { ok: false, why: at.error, gained: 0, links: 0, before, after: before };
+  if (at.proven === false) return { ok: false, why: 'could not get the pointer onto the node', gained: 0, links: 0, before, after: before };
+  // Short travel: every millisecond between reading the coordinate and pressing is a
+  // millisecond the simulation moves the node out from under the pointer.
+  await cursor.moveTo(at.x, at.y, { duration: 360 });
+  await sleep(260);
+  await page.mouse.click(at.x, at.y);
+  await sleep(600);
+  await page.mouse.dblclick(at.x, at.y, { delay: 90 });
+  await sleep(settle);
+  const after = await graphState(page);
+  const wanted = node.id ? String(node.id).replace(/#.*$/, '') : null;
+  const loadedIt = !wanted || (after.uris ?? []).some((u) => String(u).startsWith(wanted));
+  return {
+    ok: after.loaded > before.loaded && loadedIt,
+    loadedOther: after.loaded > before.loaded && !loadedIt,
+    gained: after.nodes - before.nodes,
+    links: after.links - before.links,
+    before, after,
+  };
+}
+
+export async function zoomToFit(page, cursor) {
+  // the maximised canvas's own button when there is one; the drawn cursor clicks it,
+  // but a click that cannot land in a moment (a fixed container the page cannot scroll)
+  // gives way to the graph's own zoomToFit so a take never hangs here
+  const scope = (await page.locator('.graph-3d-maximized').count()) ? page.locator('.graph-3d-maximized') : page;
+  const fit = scope.locator('button, .ac-btn').filter({ hasText: /Zoom to fit/i }).filter({ visible: true }).first();
+  if (!(await fit.count())) return false;
+  const box = await fit.boundingBox({ timeout: 3000 }).catch(() => null);
+  if (box) {
+    await cursor.moveTo(box.x + box.width / 2, box.y + box.height / 2, { duration: 400 });
+    const clicked = await fit.click({ timeout: 5000 }).then(() => true, () => false);
+    if (clicked) { await sleep(2200); return true; }
+  }
+  await page.evaluate(() => { const gs = window.LinkedDataHub?.graphs ?? {}; for (const g of Object.values(gs)) { try { (g.instance ?? g).zoomToFit(400); } catch {} } });
+  await sleep(2200);
+  return true;
+}
diff --git a/screencast/lib/harness.mjs b/screencast/lib/harness.mjs
new file mode 100644
index 00000000..0945e264
--- /dev/null
+++ b/screencast/lib/harness.mjs
@@ -0,0 +1,248 @@
+// One harness, many scenes. Target, identity and geometry are per-scene parameters
+// rather than constants, so the same code renders a full-width clip for the
+// scenario series and a 960-wide pane for the split-screen teaser later.
+//
+// A scene produces *tracks*, not a video: one media file plus one marks sidecar
+// per track. Today every scene emits exactly one. Assembly is a separate,
+// manifest-driven step that never learns how a track was produced.
+
+import { chromium } from 'playwright';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { CURSOR_INIT, makeCursor, withCursorHidden } from './cursor.mjs';
+import { makeTyper } from './typing.mjs';
+import { Marks } from './marks.mjs';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+export const ROOT = path.resolve(HERE, '..');
+export const TRACKS = path.join(ROOT, 'tracks');
+export const SHOTS = path.join(ROOT, 'shots');
+
+export const DEFAULT_BASE = 'https://localhost:4443';
+
+export const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// Nothing here knows where any repository lives. Paths and origins arrive as
+// arguments or environment; the Makefile carries the local defaults, where they
+// can be overridden without touching code.
+export const USAGE = `
+  --base URL              origin to film        (env LDH_BASE, default ${DEFAULT_BASE})
+  --cert-file PATH        PKCS12 keystore       (env LDH_CERT_FILE)
+  --cert-password SECRET  keystore password     (env LDH_CERT_PASSWORD)
+  --cert-password-file P  read the password from a file instead
+  --anonymous             no client certificate at all
+  --headed                run with a visible browser
+  --slowmo MS             slow every action down, for authoring
+  --take N                suffix the track so takes do not overwrite
+  --shots                 also write a PNG at every beat, into shots/<scene>/
+  --full-page             make those stills full-page rather than viewport
+  --no-video              stills only; skip the video recording entirely
+  --ldh PATH              the ldh CLI, for scenes that reset a fixture document
+                          (env LDH_BIN, default: whatever resolves on PATH)
+`;
+
+export function args() {
+  const argv = process.argv.slice(2);
+  const flag = (name) => argv.includes(`--${name}`);
+  const value = (name, fallback) => {
+    const i = argv.indexOf(`--${name}`);
+    return i === -1 ? fallback : argv[i + 1];
+  };
+
+  // --origin is accepted as an alias so the flag reads naturally in a scene, but
+  // --base is the name the ldh CLI uses and the one the env var follows.
+  const base = value('base', value('origin', process.env.LDH_BASE ?? DEFAULT_BASE)).replace(/\/$/, '');
+
+  return {
+    base,
+    certFile: value('cert-file', process.env.LDH_CERT_FILE ?? null),
+    certPassword: value('cert-password', process.env.LDH_CERT_PASSWORD ?? null),
+    certPasswordFile: value('cert-password-file', process.env.LDH_CERT_PASSWORD_FILE ?? null),
+    anonymous: flag('anonymous'),
+    headed: flag('headed'),
+    slowMo: Number(value('slowmo', 0)),
+    take: value('take', null),
+    ldh: value('ldh', process.env.LDH_BIN ?? 'ldh'),
+    shots: flag('shots'),
+    fullPage: flag('full-page'),
+    video: !flag('no-video'),
+    // The app centres a ~1230px content column, so a 1920 frame is mostly margin.
+    // Geometry is a flag so framing can be judged on playback rather than guessed.
+    width: Number(value('width', 0)) || null,
+    height: Number(value('height', 0)) || null,
+    scale: Number(value('scale', 0)) || null,
+  };
+}
+
+export function geometryFrom(a, fallback = { width: 1920, height: 1080, deviceScaleFactor: 2 }) {
+  return {
+    width: a.width ?? fallback.width,
+    height: a.height ?? fallback.height,
+    deviceScaleFactor: a.scale ?? fallback.deviceScaleFactor,
+  };
+}
+
+export async function identityFor({ base, certFile, certPassword, certPasswordFile }) {
+  if (!certFile) throw new Error(`no certificate for ${base} — pass --cert-file, or --anonymous for a public dataspace${USAGE}`);
+  const passphrase = certPassword ?? (certPasswordFile
+    ? (await fs.readFile(certPasswordFile, 'utf8')).trim()
+    : null);
+  if (passphrase === null) throw new Error(`no password for ${certFile} — pass --cert-password or --cert-password-file${USAGE}`);
+  return [{ origin: base, pfxPath: certFile, passphrase }];
+}
+
+// What every scene and probe calls to turn flags into a usable target.
+export async function resolve(pathname = '/') {
+  const a = args();
+  return {
+    ...a,
+    target: a.base + pathname,
+    identity: a.anonymous ? null : await identityFor(a),
+  };
+}
+
+export async function runScene({
+  id,
+  target,
+  warm = null,
+  identity = null,
+  geometry = { width: 1920, height: 1080, deviceScaleFactor: 2 },
+  overlays = { cursor: true },
+  body,
+}) {
+  const opts = args();
+  const trackName = opts.take ? `${id}-take${opts.take}` : id;
+
+  await fs.mkdir(TRACKS, { recursive: true });
+
+  const browser = await chromium.launch({ headless: !opts.headed, slowMo: opts.slowMo });
+
+  const context = await browser.newContext({
+    ignoreHTTPSErrors: true,
+    viewport: { width: geometry.width, height: geometry.height },
+    // SCHEME=dark records the page in the dark colour scheme (the page follows
+    // prefers-color-scheme; nothing pins it).
+    ...(process.env.SCHEME ? { colorScheme: process.env.SCHEME } : {}),
+    deviceScaleFactor: geometry.deviceScaleFactor ?? 2,
+    ...(opts.video
+      ? { recordVideo: { dir: TRACKS, size: { width: geometry.width, height: geometry.height } } }
+      : {}),
+    ...(identity ? { clientCertificates: identity } : {}),
+    // A scene copies a resource's URI from the app rather than knowing it, so the
+    // clipboard is part of the workflow, not a convenience.
+    permissions: ['clipboard-read', 'clipboard-write'],
+  });
+
+  // A fresh profile gets the first-time message modal, whose backdrop swallows every
+  // click in the page. It is dismissed by a cookie (client.xsl:216, modal.xsl:720),
+  // so seeding it is cheaper and cleaner than filming a dismissal in every scene.
+  const { hostname } = new URL(target);
+  await context.addCookies([
+    { name: 'LinkedDataHub.first-time-message', value: 'true', domain: hostname, path: '/' },
+  ]);
+
+  console.log(`\n▶ ${id}  →  ${target}`);
+
+  if (overlays.cursor) await context.addInitScript(CURSOR_INIT);
+  // The app keeps no handle to its OpenLayers maps (map.xsl builds one in a local
+  // variable), but every pin is a feature whose id is the resource URI. Wrapping the
+  // constructor before the bundle loads collects the instances, so a scene can ask a
+  // map where a known resource's pin is and click it once — instead of opening pins
+  // in turn until one turns out to be the right one.
+  await context.addInitScript(() => {
+    let ol;
+    Object.defineProperty(window, 'ol', {
+      configurable: true,
+      get() { return ol; },
+      set(v) {
+        if (v && v.Map && !v.Map.__captured) {
+          const Orig = v.Map;
+          const Captured = function (...a) { const m = new Orig(...a); (window.__olMaps ||= []).push(m); return m; };
+          Captured.prototype = Orig.prototype;
+          Object.setPrototypeOf(Captured, Orig);
+          Captured.__captured = true;
+          v.Map = Captured;
+        }
+        ol = v;
+      },
+    });
+  });
+
+  // The opening state IS the money shot, so the take must not begin on a loading
+  // shell. A throwaway page loads the opening document first — off camera, like the
+  // fixture reset and the first-time-message cookie — which warms Varnish and fills
+  // the browser cache with the SEF, the stylesheets and the images. The recorded page
+  // then paints the rendered view instead of a spinner. Nothing is trimmed or
+  // reordered afterwards; the first frame is simply the frame the scene starts on.
+  if (warm) {
+    const scout = await context.newPage();
+    await scout.goto(warm, { waitUntil: 'load' }).catch(() => {});
+    await scout.waitForSelector('.ldh-view-toolbar, .ldh-block', { timeout: 20_000 }).catch(() => {});
+    await sleep(3000);
+    const scoutVideo = scout.video();
+    await scout.close();
+    if (scoutVideo) await scoutVideo.delete().catch(() => {});
+    console.log(`  warmed  ${warm}`);
+  }
+
+  // Video is per page and starts when the page is created, so the clock starts here.
+  const marks = new Marks(id).start();
+  const page = await context.newPage();
+  const cursor = makeCursor(page);
+  // Every beat carries the drawn cursor's position: the cutter keeps it inside the
+  // frame, so a click is never cropped away from the result it caused.
+  const beat = marks.beat.bind(marks);
+  marks.beat = (beatId, note, extra = null) => beat(beatId, note, { pointer: cursor.position, ...(extra ?? {}) });
+
+  // Stills are a by-product of filming: the docs carry 33 unfilled placeholders and
+  // a beat boundary is where the action has settled, so it is the right frame.
+  const shotDir = path.join(SHOTS, trackName);
+  let shotCount = 0;
+  const shot = async (name, { full = opts.fullPage } = {}) => {
+    await fs.mkdir(shotDir, { recursive: true });
+    const file = path.join(shotDir, `${String(++shotCount).padStart(2, '0')}-${String(name).replace(/[^\w.-]+/g, '-')}.png`);
+    await withCursorHidden(page, () => page.screenshot({ path: file, fullPage: full }));
+    return path.relative(ROOT, file);
+  };
+  if (opts.shots) marks.attach((id) => shot(id));
+  const { type, typeCode } = makeTyper(page);
+
+  const errors = [];
+  page.on('pageerror', (e) => errors.push(`pageerror: ${e.message}`));
+  page.on('console', (m) => { if (m.type() === 'error') errors.push(`console: ${m.text()}`); });
+
+  let failure = null;
+  try {
+    // Scenes open on the strongest frame the data can give rather than on their own
+    // blank page, so they need the origin as well as their own document.
+    const base = new URL(target).origin;
+    await body({ page, cursor, type, typeCode, marks, target, base, sleep, shot });
+  } catch (e) {
+    failure = e;
+    console.error(`\n✗ scene body failed at ${marks.elapsed.toFixed(2)}s: ${e.message}`);
+  }
+
+  const video = page.video();
+  await context.close(); // video is only written here — there is no way to stop it early
+
+  // saveAs needs the browser alive, so it has to happen between the two closes.
+  let trackPath = null;
+  if (video) {
+    trackPath = path.join(TRACKS, `${trackName}.webm`);
+    await video.saveAs(trackPath);
+    await video.delete();
+  }
+  await browser.close();
+  const marksPath = await marks.save(TRACKS, trackName);
+
+  console.log(`\n  track  ${trackPath}`);
+  console.log(`  marks  ${marksPath}`);
+  console.log(`  length ${marks.entries.at(-1)?.at.toFixed(2) ?? '?'}s over ${marks.entries.length} beats`);
+  if (shotCount) console.log(`  stills  ${shotCount} in ${path.relative(ROOT, shotDir)}/`);
+  if (errors.length) console.log(`  page errors (${errors.length}):\n    ${errors.slice(0, 8).join('\n    ')}`);
+
+  if (failure) process.exitCode = 1;
+  return { trackPath, marksPath, marks, errors, failure };
+}
diff --git a/screencast/lib/map.mjs b/screencast/lib/map.mjs
new file mode 100644
index 00000000..cdafa200
--- /dev/null
+++ b/screencast/lib/map.mjs
@@ -0,0 +1,211 @@
+// Clicking a map marker.
+//
+// OpenLayers draws markers onto a canvas, so there is no element to target, and
+// map.xsl passes the map object through event context rather than leaving it
+// anywhere reachable. A blind search grid does not work either: a pin is about
+// 14px wide, so any grid coarse enough to run quickly steps straight over them.
+//
+// What does work is reading the pixels. The pins are a saturated blue that nothing
+// in an OpenStreetMap basemap comes close to — water is pale and nearly neutral
+// between green and blue — so scanning finds every pin, and clustering gives their
+// centres. The scene then clicks one deliberately, on camera, first time.
+//
+// The pixels come from a screenshot rather than from the canvas: OSM tiles are
+// cross-origin, which taints it, and getImageData is refused. ffmpeg decodes the
+// PNG to raw RGBA, so this needs no image library.
+
+import { spawn } from 'node:child_process';
+import { ui } from './dom.mjs';
+
+const INFO = '.ol-overlay-container .ac-modal-body';
+const CLOSE = '.ol-overlay-container .ac-modal-head button';
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// Decodes a PNG buffer to raw RGBA using ffmpeg, so no image library is needed.
+function decode(png) {
+  return new Promise((resolve, reject) => {
+    const ff = spawn('ffmpeg', ['-loglevel', 'error', '-i', 'pipe:0', '-f', 'rawvideo', '-pix_fmt', 'rgba', 'pipe:1']);
+    const chunks = [];
+    let err = '';
+    ff.stdout.on('data', (d) => chunks.push(d));
+    ff.stderr.on('data', (d) => (err += d));
+    ff.on('close', (code) => (code === 0 ? resolve(Buffer.concat(chunks)) : reject(new Error(`ffmpeg decode failed: ${err.slice(-400)}`))));
+    ff.stdin.on('error', () => {});
+    ff.stdin.end(png);
+  });
+}
+
+// Returns candidate pin centres in viewport coordinates, strongest cluster first.
+//
+// The screenshot is taken of the whole viewport rather than clipped to the map:
+// boundingBox() reports viewport coordinates while screenshot({clip}) takes page
+// coordinates, and once the page is scrolled those differ by the scroll offset.
+// Capturing the viewport keeps one coordinate system throughout — the same one
+// mouse.click() expects — and the map's box is used as a mask instead, which also
+// keeps the app's own blue chrome out of the results.
+export async function findMarkers(page, { viewportSelector = '.ol-viewport' } = {}) {
+  const box = await ui(page).locator(viewportSelector).first().boundingBox().catch(() => null);
+  if (!box) return { error: 'no map viewport' };
+
+  const { width: vw, height: vh } = page.viewportSize();
+
+  // The app's own chrome is blue and some of it sits over the map — the pinned
+  // "+ XHTML" and "+ Object" buttons especially. Clicking one does not just miss,
+  // it opens a form and shifts the map out from under every later candidate. So
+  // their real rectangles are taken from the DOM and excluded outright.
+  const chrome = await page.evaluate(() => [...document.querySelectorAll(
+    'button, .ac-btn, .ac-iconbtn, .ldh-pin-ic, .ol-control, a.ac-btn, .ac-tag, .ldh-pivot-pill, .facet-pill',
+  )]
+    .filter((e) => e.offsetParent !== null)
+    .map((e) => e.getBoundingClientRect())
+    .filter((r) => r.width > 0 && r.height > 0)
+    .map((r) => ({ left: r.left - 3, top: r.top - 3, right: r.right + 3, bottom: r.bottom + 3 })));
+  const mask = {
+    left: Math.max(0, box.x) + 6,
+    top: Math.max(0, box.y) + 6,
+    right: Math.min(box.x + box.width, vw) - 6,
+    bottom: Math.min(box.y + box.height, vh) - 6,
+  };
+  if (mask.right - mask.left < 40 || mask.bottom - mask.top < 40) return { error: 'map is not on screen' };
+
+  const png = await page.screenshot();
+  const rgba = await decode(png);
+
+  // Playwright renders at deviceScaleFactor, so the buffer is larger than the CSS
+  // viewport by exactly that factor.
+  const scale = Math.sqrt((rgba.length / 4) / (vw * vh));
+  const width = Math.round(vw * scale);
+  const height = Math.round(vh * scale);
+
+  const hits = [];
+  const step = 2;
+  for (let y = Math.round(mask.top * scale); y < mask.bottom * scale; y += step) {
+    for (let x = Math.round(mask.left * scale); x < mask.right * scale; x += step) {
+      const i = (y * width + x) * 4;
+      const r = rgba[i], g = rgba[i + 1], b = rgba[i + 2];
+      if (b > 110 && b - r > 70 && b - g > 45) hits.push([x, y]);
+    }
+  }
+  if (!hits.length) return { error: 'no marker-coloured pixels found', scanned: `${width}x${height}` };
+
+  const clusters = [];
+  const radius = 18 * scale;
+  for (const [x, y] of hits) {
+    let found = null;
+    for (const c of clusters) {
+      if (Math.abs(c.cx - x) <= radius && Math.abs(c.cy - y) <= radius) { found = c; break; }
+    }
+    if (found) {
+      found.n++; found.sx += x; found.sy += y;
+      found.cx = found.sx / found.n; found.cy = found.sy / found.n;
+      found.x0 = Math.min(found.x0, x); found.x1 = Math.max(found.x1, x);
+      found.y0 = Math.min(found.y0, y); found.y1 = Math.max(found.y1, y);
+    } else {
+      clusters.push({ n: 1, sx: x, sy: y, cx: x, cy: y, x0: x, x1: x, y0: y, y1: y });
+    }
+  }
+
+  // The app's own chrome is blue too, and it sits over the map: the pinned
+  // "+ XHTML" and "+ Object" buttons are the widest blue things on screen. A pin is
+  // about 14 CSS px across, so shape separates them — the buttons are an order of
+  // magnitude wider and far denser than any marker.
+  const maxSide = 34 * scale;
+  const inChrome = (x, y) => chrome.some((r) => x >= r.left && x <= r.right && y >= r.top && y <= r.bottom);
+
+  const markers = clusters
+    .filter((c) => c.n >= 6 && (c.x1 - c.x0) <= maxSide && (c.y1 - c.y0) <= maxSide * 1.6)
+    .map((c) => ({
+      x: c.cx / scale,
+      y: c.cy / scale,
+      weight: c.n,
+      size: `${Math.round((c.x1 - c.x0) / scale)}x${Math.round((c.y1 - c.y0) / scale)}`,
+    }))
+    .filter((m) => !inChrome(m.x, m.y))
+    // The pin is a teardrop: its blue mass is the head, and OpenLayers hit-tests
+    // around the icon's anchor a few pixels lower.
+    .map((m) => ({ ...m, y: m.y + 4 }))
+    .sort((a, b) => b.weight - a.weight);
+
+  return { markers, clusters: clusters.length, rejected: clusters.length - markers.length, scale };
+}
+
+// Clicks candidates in turn until one opens its info window, so a cluster that was
+// a label rather than a pin costs one attempt instead of the whole beat.
+export async function openMarker(page, cursor, markers, { after = 2400, tries = 5 } = {}) {
+  for (const m of markers.slice(0, tries)) {
+    await cursor.clickAt(m.x, m.y, { duration: 850, settle: 220, after: 500 });
+    await sleep(800);
+    if (await ui(page).locator(INFO).count()) {
+      const label = (await ui(page).locator(INFO).first().textContent().catch(() => '')).replace(/\s+/g, ' ').trim();
+      await sleep(after);
+      return label.slice(0, 48);
+    }
+  }
+  return null;
+}
+
+export async function closeInfo(page) {
+  const close = ui(page).locator(CLOSE).first();
+  if (await close.count()) {
+    await close.click().catch(() => {});
+    await sleep(700);
+  }
+}
+
+export const INFO_SELECTOR = INFO;
+
+// The pin of a known resource, as a page coordinate.
+//
+// The harness captures every ol.Map the page builds (window.__olMaps), and each
+// feature's id is the resource URI (map.xsl:254). The visible map is asked for the
+// pixel of the first wanted feature that stands clear of every unwanted one, so the
+// click lands on the pin meant and no other. `ids` are resource URIs.
+export async function locateMarker(page, ids, { clearance = 16 } = {}) {
+  return page.evaluate(({ ids, clearance }) => {
+    const want = new Set(ids);
+    const maps = (window.__olMaps || []).filter((m) => { const el = m.getTargetElement(); return el && el.offsetParent !== null && el.getBoundingClientRect().width > 0; });
+    if (!maps.length) return { error: 'no map on screen' };
+    const map = maps[maps.length - 1];
+    const rect = map.getTargetElement().getBoundingClientRect();
+    const feats = [];
+    for (const layer of map.getLayers().getArray()) {
+      const src = layer.getSource && layer.getSource();
+      if (!src || !src.getFeatures) continue;
+      for (const f of src.getFeatures()) {
+        const g = f.getGeometry(); if (!g || g.getType() !== 'Point') continue;
+        const [x, y] = map.getPixelFromCoordinate(g.getCoordinates());
+        feats.push({ id: f.getId(), x, y, wanted: want.has(f.getId()) });
+      }
+    }
+    const inView = feats.filter((f) => f.x > 8 && f.y > 8 && f.x < rect.width - 8 && f.y < rect.height - 8);
+    const wanted = inView.filter((f) => f.wanted);
+    if (!wanted.length) return { error: `none of ${ids.length} resources has a pin in view (${feats.length} features)` };
+    const clear = (f) => inView.every((o) => o.wanted || Math.hypot(o.x - f.x, o.y - f.y) >= clearance);
+    // Prefer a pin the viewer can see right now; the map may run past the fold.
+    const onScreen = (f) => rect.top + f.y > 40 && rect.top + f.y < window.innerHeight - 24;
+    const pick = wanted.filter(onScreen).find(clear) || wanted.find(clear) || wanted[0];
+    return { id: pick.id, x: rect.left + pick.x, y: rect.top + pick.y, isolated: clear(pick), onScreen: onScreen(pick), pins: inView.length };
+  }, { ids, clearance });
+}
+
+// One click on the pin of a known resource, then the popup. The icon's anchor is
+// its tip, so the click lands a few pixels up, in the head.
+export async function clickMarker(page, cursor, ids, { after = 1800 } = {}) {
+  let at = await locateMarker(page, ids);
+  if (at.error) return { ok: false, why: at.error };
+  if (!at.onScreen) {
+    // Below the fold: scroll the page so the pin sits in the lower half, on camera.
+    const dy = await page.evaluate((y) => Math.round(y - window.innerHeight * 0.62), at.y);
+    await page.mouse.wheel(0, dy);
+    await sleep(1200);
+    at = await locateMarker(page, ids);
+    if (at.error) return { ok: false, why: at.error };
+  }
+  await cursor.clickAt(at.x, at.y - 8, { duration: 850, settle: 220, after: 500 });
+  await sleep(800);
+  if (!(await ui(page).locator(INFO).count())) return { ok: false, why: `the pin at ${Math.round(at.x)},${Math.round(at.y)} opened no popup` };
+  await sleep(after);
+  const label = (await ui(page).locator('.ol-overlay-container').first().textContent().catch(() => '')).replace(/\s+/g, ' ').trim().slice(0, 48);
+  return { ok: true, id: at.id, label, isolated: at.isolated };
+}
diff --git a/screencast/lib/marks.mjs b/screencast/lib/marks.mjs
new file mode 100644
index 00000000..c9ba37cd
--- /dev/null
+++ b/screencast/lib/marks.mjs
@@ -0,0 +1,67 @@
+// Playwright cannot pause a recording, so every clip is trimmed in post. Rather
+// than scrubbing a timeline for seven scenes, each scene emits its own edit list.
+//
+// Marks are keyed by beat id rather than by timestamp alone. For a single-track
+// clip that only has to name the trim points; for the split-screen teaser the same
+// sidecar becomes the alignment mechanism, since track A's `orders` mark meets
+// track B's `orders` mark across two independently rendered passes.
+
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+export class Marks {
+  #t0;
+  #shoot;
+
+  constructor(sceneId) {
+    this.sceneId = sceneId;
+    this.entries = [];
+    this.#t0 = null;
+    this.#shoot = null;
+  }
+
+  // A beat boundary is exactly where a still is worth taking — the action has
+  // settled and the frame means something. Attaching a shooter makes every scene
+  // emit the docs screenshots as a by-product of filming.
+  attach(shooter) {
+    this.#shoot = shooter;
+    return this;
+  }
+
+  // Called by the harness the moment the context exists, which is when the video
+  // starts. Everything else is measured from here.
+  start() {
+    this.#t0 = Date.now();
+    return this;
+  }
+
+  get elapsed() {
+    return this.#t0 === null ? 0 : (Date.now() - this.#t0) / 1000;
+  }
+
+  // Awaitable so an attached shooter can finish before the scene moves on. Safe to
+  // call without awaiting when no shooter is attached.
+  async beat(id, note, extra = null) {
+    const at = this.elapsed;
+    // `extra` rides along in the sidecar — a supercut shot's focus box, for one.
+    this.entries.push({ beat: id, at, ...(note === undefined ? {} : { note }), ...(extra ?? {}) });
+    process.stdout.write(`  ${at.toFixed(2).padStart(7)}s  ${id}${note ? `  — ${note}` : ''}\n`);
+    if (this.#shoot) {
+      const file = await this.#shoot(id, this.entries.length);
+      if (file) this.entries.at(-1).shot = file;
+    }
+    return at;
+  }
+
+  async save(dir, trackName) {
+    const file = path.join(dir, `${trackName}.marks.json`);
+    const payload = {
+      scene: this.sceneId,
+      track: trackName,
+      duration: this.elapsed,
+      beats: this.entries,
+    };
+    await fs.writeFile(file, JSON.stringify(payload, null, 2) + '\n');
+    return file;
+  }
+}
diff --git a/screencast/lib/modes.mjs b/screencast/lib/modes.mjs
new file mode 100644
index 00000000..ad7628e5
--- /dev/null
+++ b/screencast/lib/modes.mjs
@@ -0,0 +1,115 @@
+// Switching a view's layout mode — and not switching it when it is already there.
+//
+// A scene that opens the mode menu to select the mode already in force films a menu
+// opening and closing for nothing. Worse, it reads as a script working through a
+// list rather than a person choosing a view. The active mode is on the toggle's own
+// label, so it can be read without opening anything.
+
+import { ui } from './dom.mjs';
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// The label the toggle shows for each mode class.
+const LABELS = {
+  'content-mode': 'Content',
+  'read-mode': 'Properties',
+  'list-mode': 'List',
+  'table-mode': 'Table',
+  'grid-mode': 'Grid',
+  'map-mode': 'Map',
+  'chart-mode': 'Chart',
+  'graph-mode': 'Graph',
+};
+
+const toggleOf = (page) => ui(page).locator('.ldh-view-toolbar .right .ldh-mode button.drop-toggle').first();
+
+export async function currentViewMode(page) {
+  const toggle = toggleOf(page);
+  if (!(await toggle.count())) return null;
+
+  // The toggle reads like "grid_viewGrid": a Material icon ligature running
+  // straight into the label, with no separator. A word-boundary match therefore
+  // never fires — there is no boundary between "grid_view" and "Grid" — which is
+  // why this silently reported "unknown" and every switch went ahead. The label is
+  // the tail of the string, so that is what gets compared.
+  const text = (await toggle.textContent().catch(() => '')).replace(/expand_more/g, '').trim();
+  for (const [cls, label] of Object.entries(LABELS)) {
+    if (text.toLowerCase().endsWith(label.toLowerCase())) return cls;
+  }
+  return null;
+}
+
+// Opens a view block's controls, if they are collapsed. Safe to call when they are
+// already open, and when the block has no such button at all.
+export async function showControls(page, cursor) {
+  const toolbar = ui(page).locator('.ldh-view-toolbar').first();
+  if (!(await toolbar.count())) return false;
+  if (await toolbar.isVisible().catch(() => false)) return 'already';
+
+  const block = toolbar.locator('xpath=ancestor::*[contains(@class,"ldh-block-row")][1]');
+  const btn = (await block.count())
+    ? block.locator('button.tb-controls').first()
+    : ui(page).locator('button.tb-controls').first();
+  if (!(await btn.count())) return false;
+
+  await btn.scrollIntoViewIfNeeded().catch(() => {});
+  await cursor.click(btn);
+  await toolbar.waitFor({ state: 'visible', timeout: 8000 }).catch(() => {});
+  await sleep(600);
+  return await toolbar.isVisible().catch(() => false);
+}
+
+// Returns 'already' when no gesture was needed, true when it switched, false when
+// the mode is not on offer.
+export async function switchViewMode(page, cursor, mode, { settle = 2200, tries = 3 } = {}) {
+  if ((await currentViewMode(page)) === mode) return 'already';
+
+  // The toolbar is collapsed by default — `.ldh-view-toolbar.is-collapsed` is
+  // `display: none`, and the mode toggle inside it is therefore not clickable. The
+  // block head's "Block controls" button (button.tb-controls, the tune glyph) is what
+  // opens it. Without this the switch waits 30s on a control that is in the DOM the
+  // whole time, which is how a clip of the layout modes timed out on a page whose
+  // toolbar simply had not been opened.
+  await showControls(page, cursor);
+
+  const toggle = toggleOf(page);
+  // Scoped to the popover belonging to THIS toolbar: the document-scope switcher
+  // offers the same mode names from its own menu, and picking the wrong one renders
+  // the document instead of the results.
+  const item = ui(page).locator(`.ldh-view-toolbar .ldh-mode .modes-pop.view-mode-list button.mi.${mode}`).first();
+  for (let i = 0; i < tries; i++) {
+    if (!(await toggle.count())) return false;
+
+    // The popover is a drop-up (.ldh-mode.drop-up), so it needs room ABOVE the
+    // toggle. A toolbar scrolled flush to the top of the viewport opens the menu off
+    // screen, where it is invisible and unclickable — and the switch then reports
+    // "not on offer" for a control that is right there.
+    const box = await toggle.boundingBox().catch(() => null);
+    if (box && box.y < 260) {
+      await page.evaluate((dy) => window.scrollBy(0, dy), -(260 - box.y));
+      await sleep(400);
+    }
+
+    await cursor.click(toggle);
+    await sleep(650);
+    if (await item.isVisible().catch(() => false)) {
+      await cursor.click(item);
+      await sleep(settle);
+      return true;
+    }
+  }
+  return false;
+}
+
+// The same reading, for the DOCUMENT-scope switcher in the action bar. Its toggle
+// carries the active mode as its label exactly as the view toolbar's does, so a
+// scene can tell whether a switch is needed before opening a menu for nothing.
+export async function currentDocumentMode(page) {
+  const toggle = ui(page).locator('button.layout-modes.drop-toggle, button[title="Mode"]').first();
+  if (!(await toggle.count())) return null;
+  const text = (await toggle.textContent().catch(() => '')).replace(/expand_more/g, '').trim();
+  for (const [cls, label] of Object.entries(LABELS)) {
+    if (text.toLowerCase().endsWith(label.toLowerCase())) return cls;
+  }
+  return null;
+}
diff --git a/screencast/lib/nav.mjs b/screencast/lib/nav.mjs
new file mode 100644
index 00000000..00ba8bc8
--- /dev/null
+++ b/screencast/lib/nav.mjs
@@ -0,0 +1,231 @@
+import { settled, ui } from './dom.mjs';
+// Getting around the way the interface intends.
+//
+// The document tree lives in a drawer that opens when the pointer reaches the left
+// edge — clientX exactly 0, per client/navigation.xsl:303-312 — and closes on
+// mouse-out, its own button, or Escape. While closed the subtree carries `inert`,
+// so its links are in the DOM but not interactable: a scene that clicks one without
+// opening the drawer waits on an element Playwright correctly calls hidden.
+//
+// The cursor must also stay inside the drawer on the way to the link, since leaving
+// it closes it again.
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const SIDEBAR = '.left-sidebar.ldh-sidebar, .ldh-sidebar';
+
+export async function openTree(page, cursor, { timeout = 8000 } = {}) {
+  // Scoped to the active pane throughout: LDH keeps inactive tabs in the DOM, so an
+  // unscoped .tree-link or .is-open answers for whichever pane is behind the one on
+  // screen — which is how the drawer reported itself open in a proxied second tab
+  // while the search box that belongs to it was nowhere to be found.
+  if (await ui(page).locator('.tree-link').first().isVisible().catch(() => false)) return true;
+
+  // Approach the edge so it reads as a movement, then land exactly on x=0.
+  await cursor.moveTo(240, 420, { duration: 420 });
+  await cursor.moveTo(0, 420, { duration: 380 });
+  await page.mouse.move(0, 424); // the handler tests clientX = 0 exactly
+  await sleep(500);
+
+  const opened = await page.waitForFunction(
+    (sel) => {
+      const pane = document.querySelector('.ldh-pane.is-active') ?? document;
+      return !!pane.querySelector(`${sel}.is-open`);
+    },
+    SIDEBAR, { timeout },
+  ).then(() => true, () => false);
+  await sleep(600);
+  return opened;
+}
+
+// Clicks a container or document in the tree by its label.
+export async function treeGo(page, cursor, label) {
+  if (!(await openTree(page, cursor))) return { ok: false, why: 'drawer would not open' };
+
+  const link = page.locator('.tree-link').filter({ hasText: label }).first();
+  if (!(await link.isVisible().catch(() => false))) return { ok: false, why: `no visible tree entry for ${label}` };
+
+  await cursor.click(link);
+  await page.waitForLoadState('load').catch(() => {});
+  await settled(page, 3800);
+  return { ok: true };
+}
+
+// Jumping straight to a resource by name.
+//
+// The sidebar search is a typeahead over resources, so it is the shortest route to
+// a specific document — faster than walking the tree when the target is not a
+// sibling. It lives inside the drawer, so it carries the same precondition, and its
+// results must be clicked: Enter does not navigate.
+// Finding a resource by name — the way a person does when the container is too big
+// to scroll and too big to facet.
+//
+// The drawer's search is an input, not a typeahead: it opens the search dialog on
+// submit, and the dialog renders its results as an ordinary view. The previous
+// version of this waited on a `.typeahead` that the app has never rendered, so it
+// always timed out.
+//
+// This is the replacement for filtering by a label-valued facet (Name, Title,
+// skos:prefLabel), which hangs — see FINDINGS.md #1.
+export async function searchGo(page, cursor, query, { match = query, type = null, timeout = 25000 } = {}) {
+  if (!(await openTree(page, cursor))) return { ok: false, why: 'drawer would not open' };
+
+  const box = ui(page).locator('.left-sidebar input[name="q"], .sb-search input[name="q"]').first();
+  if (!(await box.isVisible().catch(() => false))) return { ok: false, why: 'no search box in the drawer' };
+
+  await cursor.click(box);
+  // The drawer keeps the previous search: a second search in one take was typing
+  // its term after the first one's and finding nothing.
+  const mod = process.platform === 'darwin' ? 'Meta' : 'Control';
+  await page.keyboard.press(`${mod}+A`);
+  await page.keyboard.press('Backspace');
+  await box.pressSequentially(query, { delay: 70 });
+  await sleep(400);
+  await page.keyboard.press('Enter');
+
+  // The dialog is the VISIBLE modal, and the last of those: a closed search dialog
+  // from earlier in the take can still be in the DOM, and reading its stale count
+  // is how a second search in one take once reported "no results" for a document
+  // the first search had found.
+  const modal = page.locator('.ac-modal:visible').last();
+  if (!(await modal.waitFor({ state: 'visible', timeout }).then(() => true, () => false))) {
+    return { ok: false, why: 'the search dialog did not open' };
+  }
+
+  // The dialog's results are a view, so the count in its toolbar is the ready signal.
+  const counted = await page.waitForFunction(
+    () => { const ms = [...document.querySelectorAll('.ac-modal')].filter((m) => m.offsetParent !== null); const m = ms.at(-1); return !!m && /Total results\s+\d/.test(m.textContent); },
+    null, { timeout },
+  ).then(() => true, () => false);
+  if (!counted) return { ok: false, why: `the dialog never reported a result count for ${query}` };
+  await sleep(1200);
+
+  const total = Number(((await modal.innerText()).match(/Total results\s+(\d+)/) || [])[1] ?? 0);
+  if (!total) return { ok: false, why: `no results for ${query}` };
+
+  // Every result is a link to a document; the dialog's own chrome is not.
+  const results = modal.locator('a[href^="http"]').filter({ hasNotText: /^\s*$/ });
+  const n = await results.count();
+
+  // Two things make the obvious pick wrong. A result link wraps the whole row, so
+  // its text carries the label among the description, date and type as separate
+  // lines — substring matching then answers "Beverages" with "Alcoholic beverages".
+  // And the triplestore is shared across dataspaces, so a search inside the
+  // thesaurus also returns Northwind's own Beverages category. The label has to
+  // match a line outright, and a result in the dataspace being searched wins.
+  const wanted = match.trim().toLowerCase();
+  const origin = new URL(page.url()).origin;
+  const scored = [];
+  for (let i = 0; i < n; i++) {
+    const text = (await results.nth(i).innerText().catch(() => '')).trim();
+    const lines = text.split('\n').map((l) => l.trim().toLowerCase()).filter(Boolean);
+    const href = (await results.nth(i).getAttribute('href').catch(() => '')) || '';
+    let score = 0;
+    if (lines.some((l) => l === wanted)) score += 4;
+    else if (lines.some((l) => l.startsWith(wanted))) score += 2;
+    else if (lines.some((l) => l.includes(wanted))) score += 1;
+    if (href.startsWith(origin) && !href.includes('?uri=')) score += 3;
+    if (type && lines.some((l) => l === type.toLowerCase())) score += 3;
+    scored.push({ i, score, text, href });
+  }
+  scored.sort((a, b) => b.score - a.score);
+  const best = scored[0];
+  if (!best || best.score === 0) return { ok: false, why: `nothing in the results matched ${match}` };
+  const target = results.nth(best.i);
+  const label = best.text;
+  const href = await target.getAttribute('href').catch(() => null);
+
+  await cursor.click(target);
+  await page.waitForLoadState('load').catch(() => {});
+  await settled(page, 3600);
+  return { ok: true, href, label, total };
+}
+
+// Which document the active pane is actually showing.
+//
+// A tab switch does not change page.url(), so a scene that has been into another
+// dataspace and come back cannot verify where it is from the URL. The address bar
+// input belongs to the shell and tracks the front tab, so it is the honest answer —
+// and asking is not optional: a write issued against the wrong pane lands silently
+// in the wrong dataspace.
+export async function activeDocument(page) {
+  return page.evaluate(() => {
+    const pane = document.querySelector('.ldh-pane.is-active') ?? document;
+    const crumb = [...pane.querySelectorAll('.ac-breadcrumb a, .breadcrumb a')].pop();
+    const input = document.querySelector('form.ldh-address input[name="uri"]');
+    return (crumb && crumb.href) || (input && input.value) || null;
+  });
+}
+
+// Switching tabs.
+//
+// Following a link into another dataspace opens a tab rather than navigating, and
+// switching back is a CSS toggle: no fetch, no re-render, and — importantly — no
+// change to the address. A scene that confirms its whereabouts by reading the URL
+// will believe it is still on the remote resource forever, so the check is what the
+// active pane holds instead.
+export async function goToTab(page, cursor, label) {
+  const tab = page.locator('a.ldh-tab').filter({ hasText: label }).first();
+  if (!(await tab.count())) return { ok: false, why: `no tab named ${label}` };
+
+  await cursor.click(tab);
+  await settled(page, 2500);
+
+  const active = await page.locator('.ldh-pane.is-active').first()
+    .textContent().then((t) => t ?? '').catch(() => '');
+  const tabClass = await tab.getAttribute('class').catch(() => '') ?? '';
+  const ok = tabClass.includes('is-active') || active.length > 0;
+  return ok ? { ok: true } : { ok: false, why: `clicked ${label} but the pane did not follow` };
+}
+
+// Going up by breadcrumb.
+//
+// The action bar carries the document's ancestry as pills — `a.bc-pill` inside the
+// div[role="navigation"] that document.xsl:300 emits, the current one marked
+// `is-current`. It is on every document in every layout mode, graph included, so it
+// is the shortest visible route from wherever a scene is back to a container it can
+// create in. A page.goto() to the same place shows the viewer nothing; this shows
+// them the click.
+//
+// Ends-with on the label: the pill text runs an icon ligature into the word
+// ("folder Root"), the same way the mode toggle and the Create entries do.
+export async function crumbGo(page, cursor, label) {
+  const pill = page.locator('[role="navigation"] a.bc-pill')
+    .filter({ hasText: new RegExp(`${label}\\s*$`) }).first();
+  if (!(await pill.count())) return { ok: false, why: `no breadcrumb for ${label}` };
+  if (((await pill.getAttribute('class')) ?? '').includes('is-current')) return { ok: 'already' };
+
+  await cursor.click(pill);
+  await page.waitForLoadState('load').catch(() => {});
+  await settled(page, 3800);
+  return { ok: true };
+}
+
+// Opening a page from the list on the container you are standing on.
+//
+// The route back to a page created a minute ago. Measured: the drawer's search does
+// not return it (whatever indexes the search has not seen it yet), the app opens no
+// tab for a same-dataspace move, and the tree lists it but would not open from graph
+// mode — while the container's own children list shows it at once, on one page. So
+// the way back mirrors the way out: breadcrumb up, then this click down.
+export async function listGo(page, cursor, title, { timeout = 15_000, pages = 4 } = {}) {
+  // The list pages at twenty; a title late in the alphabet is on the next page, and
+  // the pager's Next is how a person gets there.
+  const link = ui(page).locator('a').filter({ hasText: title }).first();
+  let shown = await link.waitFor({ state: 'visible', timeout }).then(() => true, () => false);
+  for (let i = 1; !shown && i < pages; i++) {
+    // The pager's button reads "Next" plus an icon ligature, so the match is loose.
+    const next = ui(page).locator('button, a').filter({ hasText: /Next/ }).first();
+    if (!(await next.count()) || await next.isDisabled().catch(() => false)) break;
+    await next.scrollIntoViewIfNeeded().catch(() => {});
+    await cursor.click(next);
+    await sleep(1800);
+    shown = await link.waitFor({ state: 'visible', timeout: 6000 }).then(() => true, () => false);
+  }
+  if (!shown) return { ok: false, why: `${title} is not listed on this page` };
+  await link.scrollIntoViewIfNeeded().catch(() => {});
+  await cursor.click(link);
+  await page.waitForLoadState('load').catch(() => {});
+  await settled(page, 3800);
+  return { ok: true };
+}
diff --git a/screencast/lib/sparql.mjs b/screencast/lib/sparql.mjs
new file mode 100644
index 00000000..166c6393
--- /dev/null
+++ b/screencast/lib/sparql.mjs
@@ -0,0 +1,20 @@
+// A scene's inputs, resolved from the data it is about to film.
+//
+// Which order is late, which region is the thin one, which document a name lives in:
+// a scene reads these from the endpoint before the browser exists rather than carrying
+// them as constants that go stale the next time the dataset changes. Read-only; the
+// same cache-busted request inventory.mjs makes.
+export async function select(base, query) {
+  const endpoint = `${base.replace(/\/$/, '')}/sparql`;
+  const prev = process.env.NODE_TLS_REJECT_UNAUTHORIZED;
+  process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
+  try {
+    const u = new URL(endpoint);
+    u.searchParams.set('query', `${query}\n# ${Date.now()}`);
+    const r = await fetch(u, { headers: { Accept: 'application/sparql-results+json' } });
+    if (!r.ok) throw new Error(`${r.status} from ${endpoint}`);
+    return (await r.json()).results.bindings.map((b) => Object.fromEntries(Object.entries(b).map(([k, v]) => [k, v.value])));
+  } finally {
+    if (prev === undefined) delete process.env.NODE_TLS_REJECT_UNAUTHORIZED; else process.env.NODE_TLS_REJECT_UNAUTHORIZED = prev;
+  }
+}
diff --git a/screencast/lib/supercut.mjs b/screencast/lib/supercut.mjs
new file mode 100644
index 00000000..21278cd9
--- /dev/null
+++ b/screencast/lib/supercut.mjs
@@ -0,0 +1,84 @@
+// What a supercut take needs beyond a scene: 2× footage and focus boxes.
+//
+// The video is the viewport in CSS pixels, so 2× footage is a 2880×1800 viewport with
+// the document zoomed 200 % — every helper still drives, because element boxes and
+// pointer coordinates are both in the zoomed space. Each shot's beats carry the box of
+// the component the gesture lands on, so the cutter can push the frame into it.
+import { sleep } from './harness.mjs';
+
+export const GEOMETRY_2X = { width: 2880, height: 1800, deviceScaleFactor: 1 };
+
+export async function zoom2x(page) {
+  await page.addInitScript(() => {
+    const apply = () => { document.documentElement.style.zoom = '2'; };
+    if (document.readyState !== 'loading') apply(); else document.addEventListener('DOMContentLoaded', apply);
+  });
+}
+
+// Zoom the document so that a set of rows fits the viewport at once. A block reorder is
+// only legible if both blocks are on screen when they swap, and at 2× a chart block is
+// taller than the frame on its own - so for that beat the page is shown smaller, the
+// way a reader would zoom out to see the whole page. The zoom is set from the rows'
+// combined height, floored at 1 (the natural size), and the page is scrolled to the first
+// row. It is a re-layout, instant on camera, so a scene applies it at a beat boundary
+// where the cut can land - never mid-gesture.
+export async function zoomToFitRows(page, rows, { margin = 160, min = 1, max = 2 } = {}) {
+  const current = Number(await page.evaluate(() => document.documentElement.style.zoom || '1'));
+  const union = await focus(...rows);
+  if (!union.focus) return { ok: false, why: 'no rows to fit' };
+  const viewport = page.viewportSize();
+  const fit = Math.max(min, Math.min(max, current * (viewport.height - margin) / union.focus.h));
+  await page.evaluate((z) => { document.documentElement.style.zoom = String(z); }, fit);
+  await sleep(400);
+  await rows[0].evaluate((el) => el.scrollIntoView({ block: 'start' }));
+  await sleep(400);
+  return { ok: true, zoom: fit, from: current };
+}
+
+// The focus box of a locator (or of several: their union), as beat extra.
+export async function focus(...locators) {
+  let box = null;
+  for (const l of locators) {
+    // a box that is not there within a moment is not there: a beat must not wait 30 s on it
+    const b = await l.boundingBox({ timeout: 2000 }).catch(() => null);
+    if (!b) continue;
+    box = box ? { x: Math.min(box.x, b.x), y: Math.min(box.y, b.y), x2: Math.max(box.x2, b.x + b.width), y2: Math.max(box.y2, b.y + b.height) } : { x: b.x, y: b.y, x2: b.x + b.width, y2: b.y + b.height };
+  }
+  if (!box) return {};
+  return { focus: { x: Math.round(box.x), y: Math.round(box.y), w: Math.round(box.x2 - box.x), h: Math.round(box.y2 - box.y) } };
+}
+
+export const centre = async (l) => { const b = await l.boundingBox(); return [b.x + b.width / 2, b.y + b.height / 2]; };
+
+// `load` waits for the window's load event — a page of 78 photographs on Rebrickable
+// takes longer than Playwright's 30 s default — then for `ready`, then settles.
+export const load = async (page, url, ready, settle = 2500, { timeout = 120_000 } = {}) => {
+  await page.goto(url, { waitUntil: 'load', timeout });
+  if (ready) await page.waitForSelector(ready, { timeout: 40_000 }).catch(() => {});
+  await sleep(settle);
+};
+
+// A scroll the camera can follow: the page glides to the element over `ms` on an
+// ease-in-out, so a static crop reads as a slow pan (the browser's own smooth scroll
+// is a 300 ms lurch). `block` as for scrollIntoView.
+export const easeScrollTo = (locator, { ms = 1400, block = 'start', margin = 0 } = {}) =>
+  locator.evaluate((el, { ms, block, margin }) => new Promise((done) => {
+    const r = el.getBoundingClientRect();
+    const target = block === 'center' ? r.top + window.scrollY - (window.innerHeight - r.height) / 2
+      : block === 'end' ? r.bottom + window.scrollY - window.innerHeight + margin
+      : r.top + window.scrollY - margin;
+    const from = window.scrollY, to = Math.max(0, Math.min(target, document.documentElement.scrollHeight - window.innerHeight));
+    const t0 = performance.now();
+    const step = (now) => { const u = Math.min(1, (now - t0) / ms); const k = u < 0.5 ? 4 * u * u * u : 1 - Math.pow(-2 * u + 2, 3) / 2; window.scrollTo(0, from + (to - from) * k); if (u < 1) requestAnimationFrame(step); else done(); };
+    requestAnimationFrame(step);
+  }), { ms, block, margin });
+
+// The same glide to the top of the page, where a scene resets its scroll before the
+// next gesture: an instant scrollTo(0, 0) is a jump no camera move can hide.
+export const easeScrollTop = (page, { ms = 1400 } = {}) =>
+  page.evaluate(({ ms }) => new Promise((done) => {
+    const from = window.scrollY; if (!from) return done();
+    const t0 = performance.now();
+    const step = (now) => { const u = Math.min(1, (now - t0) / ms); const k = u < 0.5 ? 4 * u * u * u : 1 - Math.pow(-2 * u + 2, 3) / 2; window.scrollTo(0, from * (1 - k)); if (u < 1) requestAnimationFrame(step); else done(); };
+    requestAnimationFrame(step);
+  }), { ms });
diff --git a/screencast/lib/terminal.mjs b/screencast/lib/terminal.mjs
new file mode 100644
index 00000000..ea497e81
--- /dev/null
+++ b/screencast/lib/terminal.mjs
@@ -0,0 +1,128 @@
+// Recording a terminal, the way scenes record a browser.
+//
+// Everything else in this harness films a page, so the producer is Playwright. A few
+// slots are not pages — the Docker setup the get-started guide opens with, the CLI and
+// content-negotiation beats of the long cut, the whole right-hand pane of the
+// split-screen teaser — and those are a shell. This is their producer.
+//
+// A tape is to a terminal what a scene is to a browser: it lives in tapes/, it is
+// committed, and it runs the real commands. VHS drives a real pty and records it, so
+// what the tape types is what the viewer would type.
+//
+// Two things are owned here rather than in the tape:
+//
+//   Geometry, because a terminal clip has to cut with a browser clip. Browser clips are
+//   1440x810 at 25fps — Playwright records the CSS size, so deviceScaleFactor does not
+//   multiply it, and a clip is 1440x810 while a still is 2880 wide. The preamble below
+//   is prepended to the tape at run time, so tapes carry no dimensions.
+//
+//   The readiness check, because the assertion worth making about a setup recording is
+//   that the setup worked. The tape ends on the log line the docs quote, with the stack
+//   still attached to VHS's shell — so the probe runs WHILE the recording does, rather
+//   than after it, when VHS has taken the shell and its containers down with it.
+//
+// VHS 0.12 has no --var, so variables reach a tape through the environment: the tape
+// reads $LDH_* and this passes them on the spawn.
+
+import { spawn } from 'node:child_process';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import os from 'node:os';
+import https from 'node:https';
+
+// Matches the browser clips. Framerate is VHS's; the pacer re-encodes afterwards, but
+// starting at 25 means no resampling.
+const PREAMBLE = [
+  'Set Shell "bash"',
+  'Set Width 1440',
+  'Set Height 810',
+  'Set Framerate 25',
+  'Set FontSize 22',
+  'Set Padding 24',
+  // VHS types at one fixed speed, which lib/typing.mjs exists to avoid — real typing
+  // varies per character and slows at punctuation. 55ms is that module's code-typing
+  // base, so a command reads at the pace a person types one, even without the jitter.
+  'Set TypingSpeed 55ms',
+];
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+/**
+ * Runs a tape and returns the raw recording.
+ *
+ * @param tape     path to the .tape file
+ * @param output   where VHS should write the recording (extension decides the format)
+ * @param env      variables the tape reads
+ * @param watchUrl polled while the recording runs; answering at all is the readiness
+ *                 signal, exactly as CI treats an unauthenticated 403
+ */
+export async function record(tape, { output, env = {}, watchUrl = null } = {}) {
+  await requireVhs();
+
+  // The preamble is prepended into a temporary copy, so the committed tape stays free of
+  // geometry and the producer stays the one place it is decided.
+  const body = await fs.readFile(tape, 'utf8');
+  const staged = path.join(os.tmpdir(), `ldh-${path.basename(tape, '.tape')}-${process.pid}.tape`);
+  await fs.writeFile(staged, `${PREAMBLE.join('\n')}\n\n${body}`);
+  await fs.mkdir(path.dirname(output), { recursive: true });
+
+  const started = Date.now();
+  let cameUp = false;
+  let watching = true;
+
+  const watcher = watchUrl
+    ? (async () => {
+        while (watching) {
+          if (await answers(watchUrl)) { cameUp = true; return; }
+          await sleep(3000);
+        }
+      })()
+    : Promise.resolve();
+
+  const code = await run('vhs', [staged, '-o', output], { env: { ...process.env, ...env } });
+  watching = false;
+  await watcher;
+  await fs.rm(staged, { force: true });
+
+  return {
+    ok: code === 0,
+    output,
+    cameUp,
+    seconds: Number(((Date.now() - started) / 1000).toFixed(1)),
+    why: code === 0 ? undefined : `vhs exited ${code}`,
+  };
+}
+
+// Any HTTP answer counts. A LinkedDataHub that is up but refuses an anonymous caller
+// replies 403, which is the readiness gate the CI workflows wait on.
+//
+// node:https rather than fetch: the instance the tape builds serves the certificate
+// bin/server-cert-gen.sh just made, which nothing trusts. fetch() has no per-request
+// way to accept it and rejects the connection, so the probe reported every healthy
+// instance as one that never answered.
+function answers(url) {
+  return new Promise((resolve) => {
+    const req = https.request(url, { rejectUnauthorized: false, timeout: 5000 }, (res) => {
+      res.resume();
+      resolve(res.statusCode > 0);
+    });
+    req.on('error', () => resolve(false));
+    req.on('timeout', () => { req.destroy(); resolve(false); });
+    req.end();
+  });
+}
+
+async function requireVhs() {
+  const code = await run('vhs', ['--version'], { quiet: true }).catch(() => 127);
+  if (code !== 0) {
+    throw new Error("vhs is not on PATH — a terminal shot needs it: 'brew install vhs'");
+  }
+}
+
+function run(cmd, args, { env, quiet = false } = {}) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, { env, stdio: quiet ? 'ignore' : 'inherit' });
+    child.on('error', reject);
+    child.on('close', resolve);
+  });
+}
diff --git a/screencast/lib/typing.mjs b/screencast/lib/typing.mjs
new file mode 100644
index 00000000..d1120d0b
--- /dev/null
+++ b/screencast/lib/typing.mjs
@@ -0,0 +1,36 @@
+// Uniform keystroke delay is the tell that a recording was scripted. Real typing
+// varies per character, slows at punctuation, and pauses before a commit.
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const jitter = (base, spread) => base + (Math.random() * 2 - 1) * spread;
+
+// Splits after punctuation so the pause lands where a person's would.
+function segment(text) {
+  return text.match(/[^.,;:?!\n]+[.,;:?!\n]*/g) ?? [text];
+}
+
+export function makeTyper(page) {
+  async function type(locator, text, { base = 110, spread = 35, afterPunctuation = 260 } = {}) {
+    await locator.click();
+    for (const seg of segment(text)) {
+      await locator.pressSequentially(seg, { delay: jitter(base, spread) });
+      if (/[.,;:?!\n]$/.test(seg)) await sleep(jitter(afterPunctuation, 80));
+    }
+  }
+
+  // CodeMirror (the SPARQL editor) owns its own DOM and ignores value assignment,
+  // so the only honest way in is real keystrokes. Its bracket auto-closing means
+  // a typed "{" produces "{}", so queries are typed without their closing braces
+  // and the caret is walked past them instead.
+  async function typeCode(locator, text, { base = 55, spread = 20 } = {}) {
+    await locator.click();
+    for (const line of text.split('\n')) {
+      await page.keyboard.type(line, { delay: jitter(base, spread) });
+      await page.keyboard.press('Enter');
+      await sleep(jitter(70, 30));
+    }
+  }
+
+  return { type, typeCode };
+}
diff --git a/screencast/mock/assets/d3-force.min.js b/screencast/mock/assets/d3-force.min.js
new file mode 100644
index 00000000..dbd429d8
--- /dev/null
+++ b/screencast/mock/assets/d3-force.min.js
@@ -0,0 +1,8 @@
+// https://d3js.org/d3-dispatch/ v3.0.1 Copyright 2010-2021 Mike Bostock
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self).d3=n.d3||{})}(this,(function(n){"use strict";var e={value:()=>{}};function t(){for(var n,e=0,t=arguments.length,o={};e<t;++e){if(!(n=arguments[e]+"")||n in o||/[\s.]/.test(n))throw new Error("illegal type: "+n);o[n]=[]}return new r(o)}function r(n){this._=n}function o(n,e){return n.trim().split(/^|\s+/).map((function(n){var t="",r=n.indexOf(".");if(r>=0&&(t=n.slice(r+1),n=n.slice(0,r)),n&&!e.hasOwnProperty(n))throw new Error("unknown type: "+n);return{type:n,name:t}}))}function i(n,e){for(var t,r=0,o=n.length;r<o;++r)if((t=n[r]).name===e)return t.value}function f(n,t,r){for(var o=0,i=n.length;o<i;++o)if(n[o].name===t){n[o]=e,n=n.slice(0,o).concat(n.slice(o+1));break}return null!=r&&n.push({name:t,value:r}),n}r.prototype=t.prototype={constructor:r,on:function(n,e){var t,r=this._,l=o(n+"",r),a=-1,u=l.length;if(!(arguments.length<2)){if(null!=e&&"function"!=typeof e)throw new Error("invalid callback: "+e);for(;++a<u;)if(t=(n=l[a]).type)r[t]=f(r[t],n.name,e);else if(null==e)for(t in r)r[t]=f(r[t],n.name,null);return this}for(;++a<u;)if((t=(n=l[a]).type)&&(t=i(r[t],n.name)))return t},copy:function(){var n={},e=this._;for(var t in e)n[t]=e[t].slice();return new r(n)},call:function(n,e){if((t=arguments.length-2)>0)for(var t,r,o=new Array(t),i=0;i<t;++i)o[i]=arguments[i+2];if(!this._.hasOwnProperty(n))throw new Error("unknown type: "+n);for(i=0,t=(r=this._[n]).length;i<t;++i)r[i].value.apply(e,o)},apply:function(n,e,t){if(!this._.hasOwnProperty(n))throw new Error("unknown type: "+n);for(var r=this._[n],o=0,i=r.length;o<i;++o)r[o].value.apply(e,t)}},n.dispatch=t,Object.defineProperty(n,"__esModule",{value:!0})}));
+// https://d3js.org/d3-quadtree/ v3.0.1 Copyright 2010-2021 Mike Bostock
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t="undefined"!=typeof globalThis?globalThis:t||self).d3=t.d3||{})}(this,(function(t){"use strict";function i(t,i,e,n){if(isNaN(i)||isNaN(e))return t;var r,s,h,o,a,u,l,_,f,c=t._root,x={data:n},y=t._x0,d=t._y0,p=t._x1,v=t._y1;if(!c)return t._root=x,t;for(;c.length;)if((u=i>=(s=(y+p)/2))?y=s:p=s,(l=e>=(h=(d+v)/2))?d=h:v=h,r=c,!(c=c[_=l<<1|u]))return r[_]=x,t;if(o=+t._x.call(null,c.data),a=+t._y.call(null,c.data),i===o&&e===a)return x.next=c,r?r[_]=x:t._root=x,t;do{r=r?r[_]=new Array(4):t._root=new Array(4),(u=i>=(s=(y+p)/2))?y=s:p=s,(l=e>=(h=(d+v)/2))?d=h:v=h}while((_=l<<1|u)==(f=(a>=h)<<1|o>=s));return r[f]=c,r[_]=x,t}function e(t,i,e,n,r){this.node=t,this.x0=i,this.y0=e,this.x1=n,this.y1=r}function n(t){return t[0]}function r(t){return t[1]}function s(t,i,e){var s=new h(null==i?n:i,null==e?r:e,NaN,NaN,NaN,NaN);return null==t?s:s.addAll(t)}function h(t,i,e,n,r,s){this._x=t,this._y=i,this._x0=e,this._y0=n,this._x1=r,this._y1=s,this._root=void 0}function o(t){for(var i={data:t.data},e=i;t=t.next;)e=e.next={data:t.data};return i}var a=s.prototype=h.prototype;a.copy=function(){var t,i,e=new h(this._x,this._y,this._x0,this._y0,this._x1,this._y1),n=this._root;if(!n)return e;if(!n.length)return e._root=o(n),e;for(t=[{source:n,target:e._root=new Array(4)}];n=t.pop();)for(var r=0;r<4;++r)(i=n.source[r])&&(i.length?t.push({source:i,target:n.target[r]=new Array(4)}):n.target[r]=o(i));return e},a.add=function(t){const e=+this._x.call(null,t),n=+this._y.call(null,t);return i(this.cover(e,n),e,n,t)},a.addAll=function(t){var e,n,r,s,h=t.length,o=new Array(h),a=new Array(h),u=1/0,l=1/0,_=-1/0,f=-1/0;for(n=0;n<h;++n)isNaN(r=+this._x.call(null,e=t[n]))||isNaN(s=+this._y.call(null,e))||(o[n]=r,a[n]=s,r<u&&(u=r),r>_&&(_=r),s<l&&(l=s),s>f&&(f=s));if(u>_||l>f)return this;for(this.cover(u,l).cover(_,f),n=0;n<h;++n)i(this,o[n],a[n],t[n]);return this},a.cover=function(t,i){if(isNaN(t=+t)||isNaN(i=+i))return this;var e=this._x0,n=this._y0,r=this._x1,s=this._y1;if(isNaN(e))r=(e=Math.floor(t))+1,s=(n=Math.floor(i))+1;else{for(var h,o,a=r-e||1,u=this._root;e>t||t>=r||n>i||i>=s;)switch(o=(i<n)<<1|t<e,(h=new Array(4))[o]=u,u=h,a*=2,o){case 0:r=e+a,s=n+a;break;case 1:e=r-a,s=n+a;break;case 2:r=e+a,n=s-a;break;case 3:e=r-a,n=s-a}this._root&&this._root.length&&(this._root=u)}return this._x0=e,this._y0=n,this._x1=r,this._y1=s,this},a.data=function(){var t=[];return this.visit((function(i){if(!i.length)do{t.push(i.data)}while(i=i.next)})),t},a.extent=function(t){return arguments.length?this.cover(+t[0][0],+t[0][1]).cover(+t[1][0],+t[1][1]):isNaN(this._x0)?void 0:[[this._x0,this._y0],[this._x1,this._y1]]},a.find=function(t,i,n){var r,s,h,o,a,u,l,_=this._x0,f=this._y0,c=this._x1,x=this._y1,y=[],d=this._root;for(d&&y.push(new e(d,_,f,c,x)),null==n?n=1/0:(_=t-n,f=i-n,c=t+n,x=i+n,n*=n);u=y.pop();)if(!(!(d=u.node)||(s=u.x0)>c||(h=u.y0)>x||(o=u.x1)<_||(a=u.y1)<f))if(d.length){var p=(s+o)/2,v=(h+a)/2;y.push(new e(d[3],p,v,o,a),new e(d[2],s,v,p,a),new e(d[1],p,h,o,v),new e(d[0],s,h,p,v)),(l=(i>=v)<<1|t>=p)&&(u=y[y.length-1],y[y.length-1]=y[y.length-1-l],y[y.length-1-l]=u)}else{var w=t-+this._x.call(null,d.data),N=i-+this._y.call(null,d.data),g=w*w+N*N;if(g<n){var A=Math.sqrt(n=g);_=t-A,f=i-A,c=t+A,x=i+A,r=d.data}}return r},a.remove=function(t){if(isNaN(s=+this._x.call(null,t))||isNaN(h=+this._y.call(null,t)))return this;var i,e,n,r,s,h,o,a,u,l,_,f,c=this._root,x=this._x0,y=this._y0,d=this._x1,p=this._y1;if(!c)return this;if(c.length)for(;;){if((u=s>=(o=(x+d)/2))?x=o:d=o,(l=h>=(a=(y+p)/2))?y=a:p=a,i=c,!(c=c[_=l<<1|u]))return this;if(!c.length)break;(i[_+1&3]||i[_+2&3]||i[_+3&3])&&(e=i,f=_)}for(;c.data!==t;)if(n=c,!(c=c.next))return this;return(r=c.next)&&delete c.next,n?(r?n.next=r:delete n.next,this):i?(r?i[_]=r:delete i[_],(c=i[0]||i[1]||i[2]||i[3])&&c===(i[3]||i[2]||i[1]||i[0])&&!c.length&&(e?e[f]=c:this._root=c),this):(this._root=r,this)},a.removeAll=function(t){for(var i=0,e=t.length;i<e;++i)this.remove(t[i]);return this},a.root=function(){return this._root},a.size=function(){var t=0;return this.visit((function(i){if(!i.length)do{++t}while(i=i.next)})),t},a.visit=function(t){var i,n,r,s,h,o,a=[],u=this._root;for(u&&a.push(new e(u,this._x0,this._y0,this._x1,this._y1));i=a.pop();)if(!t(u=i.node,r=i.x0,s=i.y0,h=i.x1,o=i.y1)&&u.length){var l=(r+h)/2,_=(s+o)/2;(n=u[3])&&a.push(new e(n,l,_,h,o)),(n=u[2])&&a.push(new e(n,r,_,l,o)),(n=u[1])&&a.push(new e(n,l,s,h,_)),(n=u[0])&&a.push(new e(n,r,s,l,_))}return this},a.visitAfter=function(t){var i,n=[],r=[];for(this._root&&n.push(new e(this._root,this._x0,this._y0,this._x1,this._y1));i=n.pop();){var s=i.node;if(s.length){var h,o=i.x0,a=i.y0,u=i.x1,l=i.y1,_=(o+u)/2,f=(a+l)/2;(h=s[0])&&n.push(new e(h,o,a,_,f)),(h=s[1])&&n.push(new e(h,_,a,u,f)),(h=s[2])&&n.push(new e(h,o,f,_,l)),(h=s[3])&&n.push(new e(h,_,f,u,l))}r.push(i)}for(;i=r.pop();)t(i.node,i.x0,i.y0,i.x1,i.y1);return this},a.x=function(t){return arguments.length?(this._x=t,this):this._x},a.y=function(t){return arguments.length?(this._y=t,this):this._y},t.quadtree=s,Object.defineProperty(t,"__esModule",{value:!0})}));
+// https://d3js.org/d3-timer/ v3.0.1 Copyright 2010-2021 Mike Bostock
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).d3=t.d3||{})}(this,(function(t){"use strict";var n,e,o=0,i=0,r=0,l=0,u=0,a=0,s="object"==typeof performance&&performance.now?performance:Date,c="object"==typeof window&&window.requestAnimationFrame?window.requestAnimationFrame.bind(window):function(t){setTimeout(t,17)};function f(){return u||(c(_),u=s.now()+a)}function _(){u=0}function m(){this._call=this._time=this._next=null}function p(t,n,e){var o=new m;return o.restart(t,n,e),o}function w(){f(),++o;for(var t,e=n;e;)(t=u-e._time)>=0&&e._call.call(void 0,t),e=e._next;--o}function d(){u=(l=s.now())+a,o=i=0;try{w()}finally{o=0,function(){var t,o,i=n,r=1/0;for(;i;)i._call?(r>i._time&&(r=i._time),t=i,i=i._next):(o=i._next,i._next=null,i=t?t._next=o:n=o);e=t,y(r)}(),u=0}}function h(){var t=s.now(),n=t-l;n>1e3&&(a-=n,l=t)}function y(t){o||(i&&(i=clearTimeout(i)),t-u>24?(t<1/0&&(i=setTimeout(d,t-s.now()-a)),r&&(r=clearInterval(r))):(r||(l=s.now(),r=setInterval(h,1e3)),o=1,c(d)))}m.prototype=p.prototype={constructor:m,restart:function(t,o,i){if("function"!=typeof t)throw new TypeError("callback is not a function");i=(null==i?f():+i)+(null==o?0:+o),this._next||e===this||(e?e._next=this:n=this,e=this),this._call=t,this._time=i,y()},stop:function(){this._call&&(this._call=null,this._time=1/0,y())}},t.interval=function(t,n,e){var o=new m,i=n;return null==n?(o.restart(t,n,e),o):(o._restart=o.restart,o.restart=function(t,n,e){n=+n,e=null==e?f():+e,o._restart((function r(l){l+=i,o._restart(r,i+=n,e),t(l)}),n,e)},o.restart(t,n,e),o)},t.now=f,t.timeout=function(t,n,e){var o=new m;return n=null==n?0:+n,o.restart((e=>{o.stop(),t(e+n)}),n,e),o},t.timer=p,t.timerFlush=w,Object.defineProperty(t,"__esModule",{value:!0})}));
+// https://d3js.org/d3-force/ v3.0.0 Copyright 2010-2021 Mike Bostock
+!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("d3-quadtree"),require("d3-dispatch"),require("d3-timer")):"function"==typeof define&&define.amd?define(["exports","d3-quadtree","d3-dispatch","d3-timer"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).d3=n.d3||{},n.d3,n.d3,n.d3)}(this,(function(n,t,e,r){"use strict";function i(n){return function(){return n}}function u(n){return 1e-6*(n()-.5)}function o(n){return n.x+n.vx}function f(n){return n.y+n.vy}function a(n){return n.index}function c(n,t){var e=n.get(t);if(!e)throw new Error("node not found: "+t);return e}const l=4294967296;function h(n){return n.x}function v(n){return n.y}var y=Math.PI*(3-Math.sqrt(5));n.forceCenter=function(n,t){var e,r=1;function i(){var i,u,o=e.length,f=0,a=0;for(i=0;i<o;++i)f+=(u=e[i]).x,a+=u.y;for(f=(f/o-n)*r,a=(a/o-t)*r,i=0;i<o;++i)(u=e[i]).x-=f,u.y-=a}return null==n&&(n=0),null==t&&(t=0),i.initialize=function(n){e=n},i.x=function(t){return arguments.length?(n=+t,i):n},i.y=function(n){return arguments.length?(t=+n,i):t},i.strength=function(n){return arguments.length?(r=+n,i):r},i},n.forceCollide=function(n){var e,r,a,c=1,l=1;function h(){for(var n,i,h,y,d,g,x,s=e.length,p=0;p<l;++p)for(i=t.quadtree(e,o,f).visitAfter(v),n=0;n<s;++n)h=e[n],g=r[h.index],x=g*g,y=h.x+h.vx,d=h.y+h.vy,i.visit(M);function M(n,t,e,r,i){var o=n.data,f=n.r,l=g+f;if(!o)return t>y+l||r<y-l||e>d+l||i<d-l;if(o.index>h.index){var v=y-o.x-o.vx,s=d-o.y-o.vy,p=v*v+s*s;p<l*l&&(0===v&&(p+=(v=u(a))*v),0===s&&(p+=(s=u(a))*s),p=(l-(p=Math.sqrt(p)))/p*c,h.vx+=(v*=p)*(l=(f*=f)/(x+f)),h.vy+=(s*=p)*l,o.vx-=v*(l=1-l),o.vy-=s*l)}}}function v(n){if(n.data)return n.r=r[n.data.index];for(var t=n.r=0;t<4;++t)n[t]&&n[t].r>n.r&&(n.r=n[t].r)}function y(){if(e){var t,i,u=e.length;for(r=new Array(u),t=0;t<u;++t)i=e[t],r[i.index]=+n(i,t,e)}}return"function"!=typeof n&&(n=i(null==n?1:+n)),h.initialize=function(n,t){e=n,a=t,y()},h.iterations=function(n){return arguments.length?(l=+n,h):l},h.strength=function(n){return arguments.length?(c=+n,h):c},h.radius=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),y(),h):n},h},n.forceLink=function(n){var t,e,r,o,f,l,h=a,v=function(n){return 1/Math.min(o[n.source.index],o[n.target.index])},y=i(30),d=1;function g(r){for(var i=0,o=n.length;i<d;++i)for(var a,c,h,v,y,g,x,s=0;s<o;++s)c=(a=n[s]).source,v=(h=a.target).x+h.vx-c.x-c.vx||u(l),y=h.y+h.vy-c.y-c.vy||u(l),v*=g=((g=Math.sqrt(v*v+y*y))-e[s])/g*r*t[s],y*=g,h.vx-=v*(x=f[s]),h.vy-=y*x,c.vx+=v*(x=1-x),c.vy+=y*x}function x(){if(r){var i,u,a=r.length,l=n.length,v=new Map(r.map(((n,t)=>[h(n,t,r),n])));for(i=0,o=new Array(a);i<l;++i)(u=n[i]).index=i,"object"!=typeof u.source&&(u.source=c(v,u.source)),"object"!=typeof u.target&&(u.target=c(v,u.target)),o[u.source.index]=(o[u.source.index]||0)+1,o[u.target.index]=(o[u.target.index]||0)+1;for(i=0,f=new Array(l);i<l;++i)u=n[i],f[i]=o[u.source.index]/(o[u.source.index]+o[u.target.index]);t=new Array(l),s(),e=new Array(l),p()}}function s(){if(r)for(var e=0,i=n.length;e<i;++e)t[e]=+v(n[e],e,n)}function p(){if(r)for(var t=0,i=n.length;t<i;++t)e[t]=+y(n[t],t,n)}return null==n&&(n=[]),g.initialize=function(n,t){r=n,l=t,x()},g.links=function(t){return arguments.length?(n=t,x(),g):n},g.id=function(n){return arguments.length?(h=n,g):h},g.iterations=function(n){return arguments.length?(d=+n,g):d},g.strength=function(n){return arguments.length?(v="function"==typeof n?n:i(+n),s(),g):v},g.distance=function(n){return arguments.length?(y="function"==typeof n?n:i(+n),p(),g):y},g},n.forceManyBody=function(){var n,e,r,o,f,a=i(-30),c=1,l=1/0,y=.81;function d(r){var i,u=n.length,f=t.quadtree(n,h,v).visitAfter(x);for(o=r,i=0;i<u;++i)e=n[i],f.visit(s)}function g(){if(n){var t,e,r=n.length;for(f=new Array(r),t=0;t<r;++t)e=n[t],f[e.index]=+a(e,t,n)}}function x(n){var t,e,r,i,u,o=0,a=0;if(n.length){for(r=i=u=0;u<4;++u)(t=n[u])&&(e=Math.abs(t.value))&&(o+=t.value,a+=e,r+=e*t.x,i+=e*t.y);n.x=r/a,n.y=i/a}else{(t=n).x=t.data.x,t.y=t.data.y;do{o+=f[t.data.index]}while(t=t.next)}n.value=o}function s(n,t,i,a){if(!n.value)return!0;var h=n.x-e.x,v=n.y-e.y,d=a-t,g=h*h+v*v;if(d*d/y<g)return g<l&&(0===h&&(g+=(h=u(r))*h),0===v&&(g+=(v=u(r))*v),g<c&&(g=Math.sqrt(c*g)),e.vx+=h*n.value*o/g,e.vy+=v*n.value*o/g),!0;if(!(n.length||g>=l)){(n.data!==e||n.next)&&(0===h&&(g+=(h=u(r))*h),0===v&&(g+=(v=u(r))*v),g<c&&(g=Math.sqrt(c*g)));do{n.data!==e&&(d=f[n.data.index]*o/g,e.vx+=h*d,e.vy+=v*d)}while(n=n.next)}}return d.initialize=function(t,e){n=t,r=e,g()},d.strength=function(n){return arguments.length?(a="function"==typeof n?n:i(+n),g(),d):a},d.distanceMin=function(n){return arguments.length?(c=n*n,d):Math.sqrt(c)},d.distanceMax=function(n){return arguments.length?(l=n*n,d):Math.sqrt(l)},d.theta=function(n){return arguments.length?(y=n*n,d):Math.sqrt(y)},d},n.forceRadial=function(n,t,e){var r,u,o,f=i(.1);function a(n){for(var i=0,f=r.length;i<f;++i){var a=r[i],c=a.x-t||1e-6,l=a.y-e||1e-6,h=Math.sqrt(c*c+l*l),v=(o[i]-h)*u[i]*n/h;a.vx+=c*v,a.vy+=l*v}}function c(){if(r){var t,e=r.length;for(u=new Array(e),o=new Array(e),t=0;t<e;++t)o[t]=+n(r[t],t,r),u[t]=isNaN(o[t])?0:+f(r[t],t,r)}}return"function"!=typeof n&&(n=i(+n)),null==t&&(t=0),null==e&&(e=0),a.initialize=function(n){r=n,c()},a.strength=function(n){return arguments.length?(f="function"==typeof n?n:i(+n),c(),a):f},a.radius=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),c(),a):n},a.x=function(n){return arguments.length?(t=+n,a):t},a.y=function(n){return arguments.length?(e=+n,a):e},a},n.forceSimulation=function(n){var t,i=1,u=.001,o=1-Math.pow(u,1/300),f=0,a=.6,c=new Map,h=r.timer(g),v=e.dispatch("tick","end"),d=function(){let n=1;return()=>(n=(1664525*n+1013904223)%l)/l}();function g(){x(),v.call("tick",t),i<u&&(h.stop(),v.call("end",t))}function x(e){var r,u,l=n.length;void 0===e&&(e=1);for(var h=0;h<e;++h)for(i+=(f-i)*o,c.forEach((function(n){n(i)})),r=0;r<l;++r)null==(u=n[r]).fx?u.x+=u.vx*=a:(u.x=u.fx,u.vx=0),null==u.fy?u.y+=u.vy*=a:(u.y=u.fy,u.vy=0);return t}function s(){for(var t,e=0,r=n.length;e<r;++e){if((t=n[e]).index=e,null!=t.fx&&(t.x=t.fx),null!=t.fy&&(t.y=t.fy),isNaN(t.x)||isNaN(t.y)){var i=10*Math.sqrt(.5+e),u=e*y;t.x=i*Math.cos(u),t.y=i*Math.sin(u)}(isNaN(t.vx)||isNaN(t.vy))&&(t.vx=t.vy=0)}}function p(t){return t.initialize&&t.initialize(n,d),t}return null==n&&(n=[]),s(),t={tick:x,restart:function(){return h.restart(g),t},stop:function(){return h.stop(),t},nodes:function(e){return arguments.length?(n=e,s(),c.forEach(p),t):n},alpha:function(n){return arguments.length?(i=+n,t):i},alphaMin:function(n){return arguments.length?(u=+n,t):u},alphaDecay:function(n){return arguments.length?(o=+n,t):+o},alphaTarget:function(n){return arguments.length?(f=+n,t):f},velocityDecay:function(n){return arguments.length?(a=1-n,t):1-a},randomSource:function(n){return arguments.length?(d=n,c.forEach(p),t):d},force:function(n,e){return arguments.length>1?(null==e?c.delete(n):c.set(n,p(e)),t):c.get(n)},find:function(t,e,r){var i,u,o,f,a,c=0,l=n.length;for(null==r?r=1/0:r*=r,c=0;c<l;++c)(o=(i=t-(f=n[c]).x)*i+(u=e-f.y)*u)<r&&(a=f,r=o);return a},on:function(n,e){return arguments.length>1?(v.on(n,e),t):v.on(n)}}},n.forceX=function(n){var t,e,r,u=i(.1);function o(n){for(var i,u=0,o=t.length;u<o;++u)(i=t[u]).vx+=(r[u]-i.x)*e[u]*n}function f(){if(t){var i,o=t.length;for(e=new Array(o),r=new Array(o),i=0;i<o;++i)e[i]=isNaN(r[i]=+n(t[i],i,t))?0:+u(t[i],i,t)}}return"function"!=typeof n&&(n=i(null==n?0:+n)),o.initialize=function(n){t=n,f()},o.strength=function(n){return arguments.length?(u="function"==typeof n?n:i(+n),f(),o):u},o.x=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),f(),o):n},o},n.forceY=function(n){var t,e,r,u=i(.1);function o(n){for(var i,u=0,o=t.length;u<o;++u)(i=t[u]).vy+=(r[u]-i.y)*e[u]*n}function f(){if(t){var i,o=t.length;for(e=new Array(o),r=new Array(o),i=0;i<o;++i)e[i]=isNaN(r[i]=+n(t[i],i,t))?0:+u(t[i],i,t)}}return"function"!=typeof n&&(n=i(null==n?0:+n)),o.initialize=function(n){t=n,f()},o.strength=function(n){return arguments.length?(u="function"==typeof n?n:i(+n),f(),o):u},o.y=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),f(),o):n},o},Object.defineProperty(n,"__esModule",{value:!0})}));
diff --git a/screencast/mock/bloom.html b/screencast/mock/bloom.html
new file mode 100644
index 00000000..d0a5a20b
--- /dev/null
+++ b/screencast/mock/bloom.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html data-retro="m3" data-theme="dark" lang="en">
+<meta charset="utf-8">
+<title>the bloom</title>
+<link rel="stylesheet" href="states/app.css">
+<style>
+  html, body { margin: 0; background: #0f131a; width: 1440px; height: 900px; overflow: hidden; }
+  #stage { position: relative; width: 1440px; height: 900px; font-family: 'Geist', system-ui, sans-serif; color: #f3f6fc; }
+  #stage * { pointer-events: none; }
+  #graph { position: absolute; inset: 0; background: #000011; }
+  #graph svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+  /* the app's own chrome around its canvas, from the capture */
+  #chrome { position: absolute; inset: 0; }
+  #chrome .graph-3d-canvas { position: absolute; inset: 0; }
+  #chrome .scene-container { display: none; }
+  #chrome .graph-3d-show-panel { top: auto !important; bottom: 28px !important; left: 16px !important; }
+  /* only the controls: the host and its wrappers paint nothing, the drawn graph shows through */
+  #chrome .graph-3d-canvas, #chrome .graph-3d-canvas > div, #chrome .graph-3d-canvas > div > div { background: transparent !important; height: 100% !important; }
+  /* the record page, arriving */
+  #page { position: absolute; inset: 0; background: #0f131a; opacity: 0; transform-origin: 50% 50%; }
+  #page .inner { padding: 72px 129px 0; }
+  .caption { position: absolute; left: 96px; bottom: 64px; font: 500 40px 'Geist', system-ui, sans-serif; color: #f3f6fc; opacity: 0; letter-spacing: -.01em; }
+  .caption i { font: 400 40px 'Instrument Serif', Georgia, serif; color: #98ccff; }
+  .cursor { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); transform: translate(-50%,-50%); opacity: 0; }
+</style>
+<script src="assets/d3-force.min.js"></script>
+<div id="stage">
+  <div id="graph"><svg viewBox="0 0 1440 900"></svg></div>
+  <div id="chrome"></div>
+  <div id="page"><div class="inner" id="record"></div></div>
+  <div class="cursor" id="cur"></div>
+  <div class="caption" id="cap"><i>one click,</i> another document</div>
+</div>
+<script type="module">
+  import { ease, at, q, svgEl, template } from './lib.js';
+  import { hueOf, layout, draw } from './graph.js';
+  // ── data: an order and everything on it, then the customer's own document ──
+  const W = 1440, H = 900;
+  const order = { id: 'order', label: 'Order 10423', type: 'Order', big: true, r: 11 };
+  const mk = (id, label, type, big = false, r = 6) => ({ id, label, type, big, r, hue: hueOf(type) });
+  const doc1 = [order, mk('customer', 'Gourmet Lanchonetes', 'Corporation', true, 9), mk('rep', 'Suyama', 'Person', true, 8), mk('delivery', 'Delivery', 'ParcelDelivery'), mk('shipper', 'Federal Shipping', 'Corporation', true, 8), mk('address', 'Campinas', 'PostalAddress'), mk('shipment', 'Shipped 1997-02-24', 'DeliveryEvent'), mk('offer', 'Shipping', 'Offer'), ...Array.from({ length: 8 }, (_, i) => mk(`li${i}`, '', 'OrderItem')), ...Array.from({ length: 8 }, (_, i) => mk(`p${i}`, ['Pavlova', 'Chai', 'Ipoh Coffee', 'Tofu', 'Gnocchi', 'Konbu', 'Chocolade', 'Zaanse koeken'][i], 'Product', i < 3, 6))];
+  order.hue = hueOf('Order');
+  const links1 = [['order', 'customer'], ['order', 'rep'], ['order', 'delivery'], ['delivery', 'shipper'], ['delivery', 'address'], ['delivery', 'shipment'], ['order', 'offer'], ...Array.from({ length: 8 }, (_, i) => ['order', `li${i}`]), ...Array.from({ length: 8 }, (_, i) => [`li${i}`, `p${i}`])].map(([s, t]) => ({ source: s, target: t }));
+  // the customer's document: its contact, address, employee, and six other orders
+  const doc2 = [mk('c-contact', 'André Fonseca', 'Person', true, 7), mk('c-address', 'Av. Brasil 442', 'PostalAddress'), mk('c-phone', '(11) 555-9482', 'ContactPoint'), ...Array.from({ length: 6 }, (_, i) => mk(`o${i}`, ['10709', '10777', '10877', '10945', '11049', '11071'][i], 'Order', i < 2, 7))];
+  const links2 = [['customer', 'c-contact'], ['customer', 'c-address'], ['customer', 'c-phone'], ...Array.from({ length: 6 }, (_, i) => ['customer', `o${i}`])].map(([s, t]) => ({ source: s, target: t, dist: 70 }));
+  // layout: doc1 first, then doc2 with doc1 pinned so the bloom grows outward
+  const n1 = doc1.map((n) => ({ ...n })); const l1 = links1.map((l) => ({ ...l }));
+  layout(n1, l1, { w: W * 0.62, h: H, charge: -320, dist: 62 });
+  const byId = Object.fromEntries(n1.map((n) => [n.id, n]));
+  n1.forEach((n) => { n.fx = n.x; n.fy = n.y; });
+  const cust = byId.customer;
+  // the customer's own document fans out from the customer, away from the order —
+  // choreographed, not simulated: a bloom reads as one when it opens like a hand
+  const o = byId.order;
+  const away = Math.atan2(cust.y - o.y, cust.x - o.x);
+  const n2 = doc2.map((n, i) => { const k = doc2.length; const a = away + (i - (k - 1) / 2) * (Math.PI * 0.95 / (k - 1)); const d = 120 + (i % 2) * 34; return { ...n, x: cust.x + Math.cos(a) * d, y: cust.y + Math.sin(a) * d }; });
+  const all = [...n1, ...n2]; const l2 = links2.map((l) => ({ ...l, source: cust, target: n2.find((n) => n.id === l.target) }));
+  // fit everything into the stage with margins (the chrome sits at the corners)
+  const xs = all.map((n) => n.x), ys = all.map((n) => n.y);
+  const minX = Math.min(...xs), maxX = Math.max(...xs), minY = Math.min(...ys), maxY = Math.max(...ys);
+  const M = 140, sc = Math.min((W - 2 * M) / (maxX - minX), (H - 2 * M) / (maxY - minY), 1.7);
+  const ox = (W - (maxX - minX) * sc) / 2 - minX * sc, oy = (H - (maxY - minY) * sc) / 2 - minY * sc;
+  all.forEach((n) => { n.x = n.x * sc + ox; n.y = n.y * sc + oy; n.r = n.r * Math.min(1.3, sc); });
+  const svg = q('#graph svg');
+  const { L, N } = draw(svg, all, [...l1, ...l2]);
+  const L1 = L.slice(0, l1.length), L2 = L.slice(l1.length);
+  // the app's chrome and the record page
+  q('#chrome').append(await template('graph-host'));
+  q('#chrome .graph-3d-info-panel div').textContent = 'Click a node to see details';
+  q('#record').innerHTML = `<div class="ldh-block-head ldh-res-head"><div class="ldh-res-text"><div class="ldh-res-titleline"><h2 class="ttl">Gourmet Lanchonetes</h2><span class="ac-tag">Corporation</span></div></div></div>
+    <dl class="ldh-prop-form" style="margin-top:24px">${[['Company name', 'Gourmet Lanchonetes'], ['Contact point', 'André Fonseca'], ['Identifier', 'GOURL'], ['Employee', 'André Fonseca'], ['Title', 'Gourmet Lanchonetes']].map(([k, v]) => `<div class="ldh-prop-group"><dt class="label"><span class="pred">${k}</span></dt><dd class="ldh-prop-row"><div class="value">${v}</div></dd></div>`).join('')}</dl>
+    <h2 style="margin-top:36px;font:600 22px Geist,system-ui,sans-serif">Orders from this customer <span class="ac-tag">View</span></h2>`;
+  // ── timeline ────────────────────────────────────────────────────────────────
+  const K = { nodesIn: [0.0, 1.2], linksIn: [0.4, 1.4], settle: [1.4, 2.0], cursorIn: [1.6, 2.2], dbl: [2.3, 2.6], bloomLinks: [2.6, 3.8], bloomNodes: [2.8, 4.4], hold: [4.4, 5.2], click: [5.2, 5.5], pageIn: [5.5, 6.3], cap: [3.0, 5.2], end: 8.0 };
+  const cur = q('#cur');
+  const maxD = Math.max(...n1.map((n) => Math.hypot(n.x - byId.order.x, n.y - byId.order.y)));
+  window.render = (s) => {
+    // doc1 appears: nodes by distance from the order, links after
+    const o = byId.order;
+    n1.forEach((n, i) => { const d = Math.hypot(n.x - o.x, n.y - o.y) / maxD; const t = ease(Math.max(0, Math.min(1, (at(s, K.nodesIn) - d * 0.6) / 0.4))); n.circle.setAttribute('r', n.r * t); if (n.text) n.text.setAttribute('opacity', String(t)); });
+    L1.forEach((e, i) => { const t = ease(at(s, K.linksIn)); const l = l1[i]; e.setAttribute('x2', l.source.x + (l.target.x - l.source.x) * t); e.setAttribute('y2', l.source.y + (l.target.y - l.source.y) * t); });
+    // cursor to the customer node, double-click
+    const ci = ease(at(s, K.cursorIn)); cur.style.opacity = String(Math.min(ci, 1 - ease(at(s, [K.click[1], K.click[1] + 0.3]))));
+    cur.style.left = `${cust.x + (1 - ci) * 260}px`; cur.style.top = `${cust.y + (1 - ci) * 180}px`;
+    const db = at(s, K.dbl); const pulse = db > 0 && db < 1 ? 1 + 0.5 * Math.sin(db * Math.PI * 2) : 1; cur.style.transform = `translate(-50%,-50%) scale(${pulse})`;
+    cust.circle.setAttribute('r', cust.r * (1 + 0.35 * (db > 0 && db < 1 ? Math.sin(db * Math.PI) : 0)));
+    // the bloom: links draw outward from the customer, nodes arrive at their ends
+    L2.forEach((e, i) => { const t = ease(Math.max(0, Math.min(1, (at(s, K.bloomLinks) - i * 0.05) / 0.6))); const l = l2[i]; e.setAttribute('x2', l.source.x + (l.target.x - l.source.x) * t); e.setAttribute('y2', l.source.y + (l.target.y - l.source.y) * t); e.setAttribute('stroke', t < 1 ? 'rgba(152,204,255,.9)' : 'rgba(255,255,255,.28)'); });
+    n2.forEach((n, i) => { const t = ease(Math.max(0, Math.min(1, (at(s, K.bloomNodes) - i * 0.07) / 0.5))); n.circle.setAttribute('r', n.r * t); if (n.text) n.text.setAttribute('opacity', String(t)); });
+    // info panel after the bloom
+    const panel = q('#chrome .graph-3d-info-panel div'); if (at(s, K.hold) > 0) panel.innerHTML = '<b>Gourmet Lanchonetes</b><br><small>Corporation · customers/GOURL</small>';
+    // click → the record page
+    const pi = ease(at(s, K.pageIn)); q('#page').style.opacity = String(pi); q('#page').style.transform = `scale(${0.96 + 0.04 * pi}) translateY(${(1 - pi) * 30}px)`;
+    const c = at(s, K.cap); q('#cap').style.opacity = String(ease(Math.min(1, c * 3)) * (1 - ease(Math.max(0, Math.min(1, (c - 0.75) * 4)))));
+    return s < K.end;
+  };
+  window.duration = K.end; window.ready = true;
+</script>
diff --git a/screencast/mock/form-pin.html b/screencast/mock/form-pin.html
new file mode 100644
index 00000000..4fa81843
--- /dev/null
+++ b/screencast/mock/form-pin.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html data-retro="m3" data-theme="dark" lang="en">
+<meta charset="utf-8">
+<title>form → pin</title>
+<link rel="stylesheet" href="states/app.css">
+<style>
+  html, body { margin: 0; background: #0f131a; width: 1440px; height: 900px; overflow: hidden; }
+  #stage { position: relative; width: 1440px; height: 900px; font-family: 'Geist', system-ui, sans-serif; color: #f3f6fc; }
+  .scene { position: absolute; inset: 0; opacity: 0; }
+  #stage * { pointer-events: none; }
+  /* the form, centred; the app's modal is a fixed backdrop, on the stage it sits in flow */
+  #form { display: grid; place-items: center; }
+  #modal { width: 840px; transform-origin: 50% 40%; }
+  #modal .ac-backdrop, #modal.ac-backdrop { position: static; background: none; inset: auto; display: block; }
+  /* the view block, as the app lays it out inside a page: title above, block below */
+  #view { padding: 72px 129px 0; }
+  #view h1 { font: 600 34px 'Geist', system-ui, sans-serif; margin: 0 0 6px; color: #f3f6fc; }
+  #view .lede { color: #9aa3b5; font-size: 15px; margin: 0 0 26px; }
+  .sim-map { position: relative; width: 100%; height: 560px; overflow: hidden; border-radius: 0 0 10px 10px; }
+  .sim-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  .sim-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+  .pin { fill: #2f6fe0; stroke: #fff; stroke-width: 1.6; }
+  .pin.new { fill: #ffb703; }
+  .caption { position: absolute; left: 96px; bottom: 64px; font: 500 40px 'Geist', system-ui, sans-serif; color: #f3f6fc; opacity: 0; letter-spacing: -.01em; }
+  .caption i { font: 400 40px 'Instrument Serif', Georgia, serif; color: #98ccff; }
+</style>
+<div id="stage">
+  <div class="scene" id="form"><div id="modal"></div></div>
+  <div class="scene" id="view"><h1>Sales territories</h1><p class="lede">The territories reps cover, plotted on the map and grouped into regions.</p><div id="block"></div></div>
+  <div class="caption" id="cap"><i>forms</i> write data</div>
+</div>
+<script type="module">
+  import { ease, at, q, svgEl, template, fillForm } from './lib.js';
+  // ── data: made up, shaped for the frame ────────────────────────────────────
+  const NEW = { label: 'Amarillo', id: '79101', lat: '35.2220', long: '-101.8313' };
+  const all = await (await fetch('assets/pins-us.json')).json();
+  const pins = all.filter((p) => p.label !== NEW.label);
+  const newPin = all.find((p) => p.label === NEW.label);
+  const BASE_COUNT = 53;
+  // ── form: the app's modal, filled ──────────────────────────────────────────
+  const modal = fillForm(await template('form-modal'), { Type: 'Territory', Identifier: NEW.id, Latitude: NEW.lat, Longitude: NEW.long, Name: NEW.label, Region: 'Southern', Title: NEW.label });
+  q('#modal').append(modal);
+  const save = q('#modal button.btn-save');
+  // ── view block: the app's block head + toolbar, with our canvas in the slot ─
+  const block = await template('view-block-head');
+  q('#block').append(block);
+  const countEl = q('.ldh-view-toolbar .count b', block); countEl.textContent = String(BASE_COUNT);
+  const slot = q('[data-slot=canvas]', block);
+  slot.innerHTML = '<div class="sim-map"><img src="assets/basemap-us.png"><svg viewBox="0 0 1182 675" preserveAspectRatio="xMidYMid slice"></svg></div>';
+  const svg = q('svg', slot);
+  const dots = pins.map((p) => svgEl('circle', { class: 'pin', cx: p.x, cy: p.y, r: 0 }));
+  dots.forEach((d) => svg.append(d));
+  const nd = svgEl('circle', { class: 'pin new', cx: newPin.x, cy: newPin.y, r: 0 });
+  const ring = svgEl('circle', { cx: newPin.x, cy: newPin.y, r: 0, fill: 'none', stroke: '#ffb703', 'stroke-width': 2 });
+  const lbl = svgEl('text', { x: newPin.x + 13, y: newPin.y + 5, fill: '#f3f6fc', 'font-size': 13, 'font-family': 'Geist, system-ui, sans-serif', 'font-weight': 600, opacity: 0 }); lbl.textContent = NEW.label;
+  svg.append(nd, ring, lbl);
+  // ── timeline ───────────────────────────────────────────────────────────────
+  const K = { formIn: [0.0, 0.8], press: [1.7, 2.0], formOut: [2.0, 2.6], viewIn: [2.3, 2.9], pinsIn: [2.6, 3.6], drop: [3.7, 4.2], ring: [4.1, 4.9], count: [4.0, 4.6], cap: [4.4, 6.2], end: 6.6 };
+  const xs = pins.map((p) => p.x), minX = Math.min(...xs), maxX = Math.max(...xs);
+  window.render = (s) => {
+    const fi = ease(at(s, K.formIn)), fo = ease(at(s, K.formOut));
+    q('#form').style.opacity = String(Math.min(fi, 1 - fo));
+    q('#modal').style.transform = `translateY(${(1 - fi) * 40 - fo * 30}px) scale(${0.96 + 0.04 * fi - 0.06 * fo})`;
+    const pr = at(s, K.press); const k = pr < 0.5 ? pr * 2 : 2 - pr * 2;
+    if (save) { save.style.transform = `scale(${1 - 0.06 * k})`; save.style.filter = `brightness(${1 + 0.35 * k})`; }
+    const vi = ease(at(s, K.viewIn));
+    q('#view').style.opacity = String(vi); q('#view').style.transform = `translateY(${(1 - vi) * 24}px)`;
+    dots.forEach((c, i) => { const w = (pins[i].x - minX) / (maxX - minX); c.setAttribute('r', 6 * ease(Math.max(0, Math.min(1, (at(s, K.pinsIn) - w * 0.7) / 0.3)))); });
+    const d = at(s, K.drop); nd.setAttribute('r', 7.5 * ease(Math.min(1, d * 1.4))); nd.setAttribute('cy', newPin.y + (1 - ease(d)) * -60);
+    const rg = at(s, K.ring); ring.setAttribute('r', 8 + 42 * ease(rg)); ring.setAttribute('opacity', String((1 - rg) * 0.9));
+    lbl.setAttribute('opacity', String(ease(at(s, [K.drop[1], K.drop[1] + 0.4]))));
+    const cn = at(s, K.count); countEl.textContent = String(cn < 0.5 ? BASE_COUNT : BASE_COUNT + 1); countEl.style.color = cn > 0.4 && cn < 1 ? '#ffb703' : '';
+    const c = at(s, K.cap); q('#cap').style.opacity = String(ease(Math.min(1, c * 3)) * (1 - ease(Math.max(0, Math.min(1, (c - 0.75) * 4)))));
+    q('#cap').style.transform = `translateY(${(1 - ease(Math.min(1, c * 3))) * 14}px)`;
+    return s < K.end;
+  };
+  window.duration = K.end; window.ready = true;
+</script>
diff --git a/screencast/mock/graph.js b/screencast/mock/graph.js
new file mode 100644
index 00000000..a3bd79f3
--- /dev/null
+++ b/screencast/mock/graph.js
@@ -0,0 +1,18 @@
+// A drawn graph, in the app's idiom: hue-per-type nodes (hsl(h,70%,60%)) on #000011,
+// thin light links, labels on the bigger nodes. Laid out with d3-force off-screen,
+// then animated by the player: nodes appear, links draw, a second document's nodes
+// arrive along the links that reach them.
+import { svgEl } from './lib.js';
+export function hueOf(type) { let s = 0; for (const c of `https://schema.org/${type}`) s += c.codePointAt(0); return s % 360; }
+export function layout(nodes, links, { w, h, iterations = 300, charge = -260, dist = 60 } = {}) {
+  const sim = d3.forceSimulation(nodes).force('link', d3.forceLink(links).id((d) => d.id).distance((l) => l.dist ?? dist)).force('charge', d3.forceManyBody().strength(charge)).force('center', d3.forceCenter(w / 2, h / 2)).force('collide', d3.forceCollide(16)).stop();
+  for (let i = 0; i < iterations; i++) sim.tick();
+  return { nodes, links };
+}
+export function draw(svg, nodes, links) {
+  const gl = svgEl('g', { class: 'links' }), gn = svgEl('g', { class: 'nodes' });
+  svg.append(gl, gn);
+  const L = links.map((l) => { const e = svgEl('line', { x1: l.source.x, y1: l.source.y, x2: l.target.x, y2: l.target.y, stroke: 'rgba(255,255,255,.28)', 'stroke-width': 1.2 }); gl.append(e); l.el = e; return e; });
+  const N = nodes.map((n) => { const g = svgEl('g', { transform: `translate(${n.x},${n.y})` }); const c = svgEl('circle', { r: 0, fill: `hsl(${n.hue}, 70%, 60%)` }); g.append(c); if (n.label && n.big) { const t = svgEl('text', { x: 0, y: -(n.r + 7), 'text-anchor': 'middle', fill: 'rgba(255,255,255,.85)', 'font-size': 12, 'font-family': 'Geist, system-ui, sans-serif', opacity: 0 }); t.textContent = n.label; g.append(t); n.text = t; } gn.append(g); n.el = g; n.circle = c; return g; });
+  return { L, N };
+}
diff --git a/screencast/mock/lib.js b/screencast/mock/lib.js
new file mode 100644
index 00000000..d85fafa7
--- /dev/null
+++ b/screencast/mock/lib.js
@@ -0,0 +1,21 @@
+// Shared bits for mock players: easing, timeline helpers, template loading and fills.
+export const ease = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+export const clamp = (t) => Math.max(0, Math.min(1, t));
+export const at = (s, [a, b]) => clamp((s - a) / (b - a));
+export const q = (s, r = document) => r.querySelector(s);
+export const NS = 'http://www.w3.org/2000/svg';
+export const svgEl = (tag, attrs = {}) => { const e = document.createElementNS(NS, tag); for (const [k, v] of Object.entries(attrs)) e.setAttribute(k, v); return e; };
+export async function template(name) { const t = await (await fetch(`templates/${name}.html`)).text(); const d = document.createElement('div'); d.innerHTML = t; return d.firstElementChild; }
+// Fill a captured form modal: rows by their label text; unmentioned rows are removed.
+export function fillForm(modal, values, { title } = {}) {
+  for (const g of [...modal.querySelectorAll('.ldh-prop-group')]) {
+    const label = g.querySelector('.pred')?.textContent.trim();
+    if (!(label in values)) { g.remove(); continue; }
+    const v = values[label];
+    const input = g.querySelector('input:not([type=hidden]), textarea');
+    if (input) input.setAttribute('value', v); else { const val = g.querySelector('.cb-chip-lbl, .value'); if (val) val.textContent = v; }
+  }
+  if (title) { const t = modal.querySelector('.ac-modal-head h3, .ac-modal-head .ttl, legend'); if (t) t.textContent = title; }
+  for (const sel of ['.ldh-form-subjbar', '.ldh-subject', '.ldh-prop-addrow', 'legend']) modal.querySelectorAll(sel).forEach((e) => e.remove());
+  return modal;
+}
diff --git a/screencast/mock/player.html b/screencast/mock/player.html
new file mode 100644
index 00000000..9f9af8bd
--- /dev/null
+++ b/screencast/mock/player.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html data-retro="m3" data-theme="dark" lang="en">
+<meta charset="utf-8">
+<title>form → pin</title>
+<link rel="stylesheet" href="states/app.css">
+<style>
+  /* the stage on top of the app's own styles: a dark plate, no page chrome */
+  html, body { margin: 0; background: #0f131a; width: 1440px; height: 900px; overflow: hidden; }
+  #stage { position: relative; width: 1440px; height: 900px; font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #f3f6fc; }
+  .scene { position: absolute; inset: 0; opacity: 0; }
+  #form { display: grid; place-items: center; }
+  /* the captured modal, as the app draws it — minus the backdrop and the subject bar */
+  #modal { width: 840px; transform-origin: 50% 40%; }
+  #modal .ac-backdrop, #modal.ac-backdrop { position: static; background: none; inset: auto; display: block; }
+  #modal .ldh-form-subjbar, #modal .ldh-subject, #modal .ldh-prop-addrow, #modal legend { display: none !important; }
+  #modal * { pointer-events: none; }
+  #map { overflow: hidden; }
+  /* the captured page, offset so the view block sits where the app put it (its box is
+     recorded in the capture); everything the app draws around the map stays */
+  #page { position: absolute; left: 0; top: 0; width: 1440px; transform-origin: 0 0; }
+  #page * { pointer-events: none; }
+  #page .ldh-content-add, #page .ldh-add-bar, #page .content-add-bar { display: none !important; }
+  /* the shot is the one block: everything after it is clipped by the stage */
+  #map::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(transparent, #0f131a); }
+  /* the simulated canvas: tiles as the captured raster, pins as SVG on top */
+  .sim-map { position: relative; width: 100%; height: 100%; overflow: hidden; }
+  .sim-map img { position: absolute; inset: 0; width: 100%; height: 100%; }
+  .sim-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+  .pin { fill: #2f6fe0; stroke: #ffffff; stroke-width: 1.5; }
+  .pin.new { fill: #ffb703; }
+  .caption { position: absolute; left: 96px; bottom: 72px; font: 500 40px 'Geist', system-ui, sans-serif; color: #f3f6fc; opacity: 0; letter-spacing: -.01em; }
+  .caption i { font: 400 40px 'Instrument Serif', Georgia, serif; color: #98ccff; }
+</style>
+<div id="stage">
+  <div class="scene" id="form"><div class="modal" id="modal"></div></div>
+  <div class="scene" id="map"><div id="page"></div></div>
+  <div class="caption" id="cap"><i>forms</i> write data</div>
+</div>
+<script type="module">
+  const T = 30; // fps
+  const q = (s) => document.querySelector(s);
+  const ease = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+  const clamp = (t) => Math.max(0, Math.min(1, t));
+
+  // assets
+  const formHtml = await (await fetch('states/form-filled.html')).text();
+  q('#modal').innerHTML = formHtml.split('\n').slice(1).join('\n');
+  // the app's modal is a fixed backdrop; on the stage it sits in flow
+  const bd = q('#modal > .ac-backdrop, #modal > .modal'); if (bd) { bd.style.position = 'static'; bd.style.background = 'none'; }
+  const mapData = await (await fetch('states/map-pins.json')).json();
+  const pins = mapData.pins.filter((p) => !/Amarillo/.test(p.label));
+  const NEW = 'Amarillo', newPin = mapData.pins.find((p) => /Amarillo/.test(p.label)) ?? { x: 372, y: 470 };
+  // the captured territories page, with the OpenLayers canvas swapped for our layer
+  const pageHtml = await (await fetch('states/territories-page.html')).text();
+  const pageMeta = JSON.parse(pageHtml.split('\n')[0].replace(/^<!-- | -->$/g, ''));
+  q('#page').innerHTML = pageHtml.split('\n').slice(1).join('\n');
+  const mapBox = await (await fetch('states/map-box.json')).json();
+  // scroll the page so the view block (toolbar + map) fills the stage
+  const blockTop = q('#page .ldh-view-toolbar')?.getBoundingClientRect().top ?? mapBox.y; const shift = -(blockTop - 96 - 60);
+  q('#page').style.transform = `translateY(${shift}px)`;
+  const host = q('#page .map-canvas');
+  host.innerHTML = '<div class="sim-map"><img src="states/map-tiles.png"><svg viewBox="0 0 1182 675" preserveAspectRatio="none"></svg></div>';
+  const svg = host.querySelector('svg');
+  const countEl = q('#page .ldh-view-toolbar .count b') || q('#page .count b');
+  const NS = 'http://www.w3.org/2000/svg';
+  const dots = pins.map((p) => { const c = document.createElementNS(NS, 'circle'); c.setAttribute('class', 'pin'); c.setAttribute('cx', p.x); c.setAttribute('cy', p.y); c.setAttribute('r', 0); svg.appendChild(c); return c; });
+  const img = host.querySelector('img');
+  const nd = document.createElementNS(NS, 'circle'); nd.setAttribute('class', 'pin new'); nd.setAttribute('cx', newPin.x); nd.setAttribute('cy', newPin.y); nd.setAttribute('r', 0); svg.appendChild(nd);
+  const ring = document.createElementNS(NS, 'circle'); ring.setAttribute('cx', newPin.x); ring.setAttribute('cy', newPin.y); ring.setAttribute('r', 0); ring.setAttribute('fill', 'none'); ring.setAttribute('stroke', '#ffb703'); ring.setAttribute('stroke-width', 2); svg.appendChild(ring);
+  const lbl = document.createElementNS(NS, 'text'); lbl.setAttribute('x', newPin.x + 14); lbl.setAttribute('y', newPin.y + 5); lbl.setAttribute('fill', '#1a1a1a'); lbl.setAttribute('font-size', 13); lbl.setAttribute('font-family', 'Geist, system-ui, sans-serif'); lbl.setAttribute('font-weight', 600); lbl.textContent = NEW; lbl.setAttribute('opacity', 0); svg.appendChild(lbl);
+  // the Save button inside the captured form
+  const save = q('#modal button.btn-save') || q('#modal button[type=submit]');
+
+  // timeline, seconds
+  const K = {
+    formIn: [0.0, 0.8],    // the form rises and settles
+    hold1: [0.8, 1.6],     // read it
+    press: [1.6, 1.9],     // Save presses
+    formOut: [1.9, 2.5],   // form recedes, map plate arrives
+    pinsIn: [2.4, 3.4],    // 58 pins sweep in west → east
+    drop: [3.5, 4.0],      // the new pin drops
+    ring: [3.9, 4.7],      // a ring expands and fades
+    count: [3.8, 4.4],     // 58 → 59
+    cap: [4.2, 6.0],       // caption
+    end: 6.4,
+  };
+  const at = (s, [a, b]) => clamp((s - a) / (b - a));
+
+  window.render = (s) => {
+    // form
+    const fi = ease(at(s, K.formIn)), fo = ease(at(s, K.formOut));
+    q('#form').style.opacity = String(Math.min(fi, 1 - fo));
+    q('#modal').style.transform = `translateY(${(1 - fi) * 40 - fo * 30}px) scale(${0.96 + 0.04 * fi - 0.06 * fo})`;
+    const pr = at(s, K.press);
+    if (save) { const k = pr < 0.5 ? pr * 2 : 2 - pr * 2; save.style.transform = `scale(${1 - 0.06 * k})`; save.style.filter = `brightness(${1 + 0.35 * k})`; }
+    // map
+    const mi = ease(at(s, [K.formOut[0] + 0.2, K.formOut[1] + 0.3]));
+    q('#map').style.opacity = String(mi);
+    q('#map').style.transform = `scale(${0.97 + 0.03 * mi})`;
+    const xs = pins.map((p) => p.x); const minX = Math.min(...xs), maxX = Math.max(...xs);
+    dots.forEach((c, i) => { const p = pins[i]; const w = (p.x - minX) / (maxX - minX); const t = ease(clamp((at(s, K.pinsIn) - w * 0.7) / 0.3)); c.setAttribute('r', 6 * t); });
+    const d = at(s, K.drop); const dy = (1 - ease(d)) * -60;
+    nd.setAttribute('r', 7.5 * ease(clamp(d * 1.4))); nd.setAttribute('cy', newPin.y + dy);
+    const rg = at(s, K.ring); ring.setAttribute('r', 8 + 42 * ease(rg)); ring.setAttribute('opacity', String((1 - rg) * 0.9));
+    lbl.setAttribute('opacity', String(ease(at(s, [K.drop[1], K.drop[1] + 0.4]))));
+    const cn = at(s, K.count); if (countEl) { countEl.textContent = cn < 0.5 ? String(pins.length) : String(pins.length + 1); countEl.style.color = cn > 0.4 && cn < 1 ? '#ffb703' : ''; }
+    img.style.opacity = String(ease(at(s, K.pinsIn)) * 0.92 + 0.08);
+    // caption
+    const c = at(s, K.cap); q('#cap').style.opacity = String(ease(clamp(c * 3)) * (1 - ease(clamp((c - 0.75) * 4))));
+    q('#cap').style.transform = `translateY(${(1 - ease(clamp(c * 3))) * 14}px)`;
+    return s < K.end;
+  };
+  window.duration = K.end;
+  window.ready = true;
+</script>
diff --git a/screencast/mock/shapes.html b/screencast/mock/shapes.html
new file mode 100644
index 00000000..2c145af4
--- /dev/null
+++ b/screencast/mock/shapes.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html data-retro="m3" data-theme="dark" lang="en">
+<meta charset="utf-8">
+<title>one list, six shapes</title>
+<link rel="stylesheet" href="states/app.css">
+<style>
+  html, body { margin: 0; background: #0f131a; width: 1440px; height: 900px; overflow: hidden; }
+  #stage { position: relative; width: 1440px; height: 900px; font-family: 'Geist', system-ui, sans-serif; color: #f3f6fc; }
+  #stage * { pointer-events: none; }
+  #view { position: absolute; inset: 0; padding: 60px 129px 0; }
+  #view h1 { font: 600 34px 'Geist', system-ui, sans-serif; margin: 0 0 6px; }
+  #view .lede { color: #9aa3b5; font-size: 15px; margin: 0 0 22px; }
+  /* the block: the app's head + toolbar from the capture; the results slot holds one shape at a time */
+  .shapes { position: relative; height: 560px; overflow: hidden; }
+  .shape { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); }
+  .shape.drawn { background: #121822; }
+  .shape svg { width: 100%; height: 100%; }
+  .shape img.basemap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  .pin { fill: #2f6fe0; stroke: #fff; stroke-width: 1.6; }
+  .caption { position: absolute; right: 129px; top: 58px; font: 500 40px 'Geist', system-ui, sans-serif; color: #f3f6fc; opacity: 0; letter-spacing: -.01em; }
+  .caption i { font: 400 40px 'Instrument Serif', Georgia, serif; color: #98ccff; }
+  /* the mode pill in the toolbar: our label swaps with the shape */
+  .ldh-mode .drop-toggle .label { font-variant-numeric: tabular-nums; }
+</style>
+<script src="assets/d3-force.min.js"></script>
+<div id="stage">
+  <div id="view"><h1>The team</h1><p class="lede">Everyone on the Northwind payroll, who they report to and the territories they cover.</p><div id="block"></div></div>
+  <div class="caption" id="cap"><i>same rows,</i> six shapes</div>
+</div>
+<script type="module">
+  import { ease, at, q, svgEl, template } from './lib.js';
+  import { hueOf, layout, draw } from './graph.js';
+  const block = await template('view-block-head'); q('#block').append(block);
+  q('.ldh-block-head .ttl', block).textContent = 'All employees';
+  q('.ldh-view-toolbar .count b', block).textContent = '9';
+  // the facet pills: this view's own
+  const pills = q('.ldh-view-toolbar .left', block); pills.querySelectorAll('.facet').forEach((f) => f.remove());
+  for (const [pred, val] of [['family name', 'Any'], ['territory', 'Any'], ['reports to', 'Any']]) { const d = document.createElement('div'); d.className = 'facet'; d.innerHTML = `<button type="button" class="facet-pill"><span class="pred">${pred}</span><span class="val">${val}</span><span class="msi sm caret" aria-hidden="true">expand_more</span></button>`; pills.append(d); }
+  const modeLabel = q('.ldh-view-toolbar .ldh-mode .drop-toggle .label', block), modeIcon = q('.ldh-view-toolbar .ldh-mode .drop-toggle .msi', block);
+  const slot = q('[data-slot=canvas]', block); slot.className = 'shapes'; slot.removeAttribute('data-slot');
+  // ── the six shapes ──────────────────────────────────────────────────────────
+  const shapes = [];
+  const add = (name, icon, el) => { el.classList.add('shape'); slot.append(el); shapes.push({ name, icon, el }); };
+  const wrap = async (tpl) => { const d = document.createElement('div'); d.innerHTML = await (await fetch(`templates/${tpl}.html`)).text(); return d; };
+  add('List', 'view_list', await wrap('results-list'));
+  add('Table', 'table', await wrap('results-table'));
+  add('Grid', 'grid_view', await wrap('results-grid'));
+  // map: basemap + the nine reps, made-up spread London/Seattle
+  { const d = document.createElement('div'); d.className = 'drawn'; d.innerHTML = '<img class="basemap" src="assets/basemap-us.png"><svg viewBox="0 0 1182 675" preserveAspectRatio="xMidYMid slice"></svg>'; const s = q('svg', d); [[140, 170], [150, 185], [160, 176], [172, 190], [148, 200], [1080, 130], [1092, 142], [1070, 150], [1100, 155]].forEach(([x, y]) => s.append(svgEl('circle', { class: 'pin', cx: x, cy: y, r: 9 }))); add('Map', 'map', d); }
+  // chart: territories per rep as bars, in the app's chart idiom (light on dark)
+  { const d = document.createElement('div'); d.className = 'drawn'; const s = svgEl('svg', { viewBox: '0 0 1182 560' }); d.append(s); const reps = [['King', 10], ['Buchanan', 7], ['Dodsworth', 7], ['Fuller', 7], ['Suyama', 5], ['Callahan', 4], ['Leverling', 4], ['Peacock', 3], ['Davolio', 2]]; reps.forEach(([n, v], i) => { const y = 40 + i * 54; const t = svgEl('text', { x: 150, y: y + 18, 'text-anchor': 'end', fill: '#cfd6e3', 'font-size': 14, 'font-family': 'Geist, system-ui, sans-serif' }); t.textContent = n; s.append(t); s.append(svgEl('rect', { x: 170, y, width: v * 90, height: 26, rx: 3, fill: '#4da3ff', 'data-w': v * 90 })); }); add('Chart', 'bar_chart', d); }
+  // graph: the app's own layout for this view, captured from Graph mode (projected 3D
+  // positions, hue-per-type colours, size by depth) and drawn as SVG
+  { const d = document.createElement('div'); d.className = 'drawn'; d.style.background = '#000011'; const s = svgEl('svg', { viewBox: '0 0 1182 560' }); d.append(s);
+    const g = await (await fetch('assets/graph-employees.json')).json();
+    const xs = g.nodes.map((n) => n.x), ys = g.nodes.map((n) => n.y);
+    const minX = Math.min(...xs), maxX = Math.max(...xs), minY = Math.min(...ys), maxY = Math.max(...ys);
+    const sc = Math.min(1100 / (maxX - minX), 500 / (maxY - minY)), ox = (1182 - (maxX - minX) * sc) / 2 - minX * sc, oy = (560 - (maxY - minY) * sc) / 2 - minY * sc;
+    const P = g.nodes.map((n) => ({ x: n.x * sc + ox, y: n.y * sc + oy }));
+    const dmin = Math.min(...g.nodes.map((n) => n.depth)), dmax = Math.max(...g.nodes.map((n) => n.depth));
+    // far nodes drawn first, near nodes on top — the depth cue the 3D canvas gives
+    const order = g.nodes.map((n, i) => i).sort((i, j) => g.nodes[j].depth - g.nodes[i].depth);
+    for (const l of g.links) s.append(svgEl('line', { x1: P[l.s].x, y1: P[l.s].y, x2: P[l.t].x, y2: P[l.t].y, stroke: 'rgba(255,255,255,.22)', 'stroke-width': 1 }));
+    for (const i of order) { const n = g.nodes[i]; const near = 1 - (n.depth - dmin) / (dmax - dmin); const r = (2.6 + 4.2 * near) * (n.val > 1 ? 1.3 : 1); s.append(svgEl('circle', { cx: P[i].x, cy: P[i].y, r, fill: n.color ?? 'hsl(200,70%,60%)', opacity: 0.55 + 0.45 * near })); if (n.label && !/^https?:/.test(n.label) && near > 0.55) { const t = svgEl('text', { x: P[i].x, y: P[i].y - r - 5, 'text-anchor': 'middle', fill: 'rgba(255,255,255,.9)', 'font-size': 11, 'font-family': 'Geist, system-ui, sans-serif' }); t.textContent = n.label; s.append(t); } }
+    add('Graph', 'hub', d); }
+  // ── timeline: each shape holds ~1.4 s, crossfading on the beat ─────────────
+  const STEP = 1.4, FADE = 0.35, START = 0.6;
+  const K = { cap: [1.0, 8.2], end: START + STEP * shapes.length + 0.6 };
+  window.render = (s) => {
+    shapes.forEach((sh, i) => { const t0 = START + i * STEP; const inT = ease(at(s, [t0, t0 + FADE])); const outT = i < shapes.length - 1 ? ease(at(s, [t0 + STEP, t0 + STEP + FADE])) : 0; const o = Math.min(inT, 1 - outT); sh.el.style.opacity = String(o); sh.el.style.transform = `translateY(${(1 - inT) * 14}px)`; if (inT > 0 && outT < 1 && o > 0.5) { modeLabel.textContent = sh.name; modeIcon.textContent = sh.icon; } });
+    // bars grow when the chart is in
+    const ci = ease(at(s, [START + 4 * STEP, START + 4 * STEP + 0.8])); shapes[4].el.querySelectorAll('rect').forEach((r) => r.setAttribute('width', Number(r.dataset.w) * ci));
+    const c = at(s, K.cap); q('#cap').style.opacity = String(ease(Math.min(1, c * 3)) * (1 - ease(Math.max(0, Math.min(1, (c - 0.8) * 5)))));
+    return s < K.end;
+  };
+  window.duration = K.end; window.ready = true;
+</script>
diff --git a/screencast/objtest.html b/screencast/objtest.html
new file mode 100644
index 00000000..ab24c97b
--- /dev/null
+++ b/screencast/objtest.html
@@ -0,0 +1,5 @@
+<!doctype html><meta charset="utf-8"><title>object vs video</title>
+<h3>object</h3>
+<object data="clip.mp4" type="video/mp4" width="480" height="270"></object>
+<h3>video (control)</h3>
+<video src="clip.mp4" width="480" height="270" muted></video>
diff --git a/screencast/objtest.mjs b/screencast/objtest.mjs
new file mode 100644
index 00000000..04b13948
--- /dev/null
+++ b/screencast/objtest.mjs
@@ -0,0 +1,17 @@
+import { chromium } from 'playwright';
+const b = await chromium.launch({ headless: true });
+const p = await b.newPage({ viewport: { width: 1000, height: 800 } });
+await p.goto('file://' + process.cwd() + '/objtest.html');
+await p.waitForTimeout(3000);
+console.log(await p.evaluate(async () => {
+  const obj = document.querySelector('object');
+  const vid = document.querySelector('video');
+  const r = (e) => { const x = e.getBoundingClientRect(); return `${Math.round(x.width)}x${Math.round(x.height)}`; };
+  let inner = 'n/a';
+  try { inner = obj.contentDocument ? (obj.contentDocument.querySelector('video') ? 'contains a <video>' : 'document, no video') : 'no contentDocument'; } catch (e) { inner = 'blocked: ' + e.message; }
+  let played = false;
+  try { vid.muted = true; await vid.play(); played = !vid.paused; } catch (e) { played = 'error: ' + e.message; }
+  return JSON.stringify({ objectBox: r(obj), objectInner: inner, videoBox: r(vid), videoReadyState: vid.readyState, videoPlays: played }, null, 1);
+}));
+await p.screenshot({ path: 'objtest.png' });
+await b.close();
diff --git a/screencast/objtest.png b/screencast/objtest.png
new file mode 100644
index 00000000..69ef568d
Binary files /dev/null and b/screencast/objtest.png differ
diff --git a/screencast/package-lock.json b/screencast/package-lock.json
new file mode 100644
index 00000000..36c0c354
--- /dev/null
+++ b/screencast/package-lock.json
@@ -0,0 +1,44 @@
+{
+  "name": "ldh-screencast",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "ldh-screencast",
+      "version": "0.0.0",
+      "devDependencies": {
+        "playwright": "^1.49.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.63.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.63.0.tgz",
+      "integrity": "sha512-+7ziBLidS4NaNCdt57SUDT+wYmmd5fmiQejUic/kb+YsYSCPyOOE9sebzMjNmQrsnNpDJqd4WHvV/8lfKfUDUg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.63.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.63.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.63.0.tgz",
+      "integrity": "sha512-rYCsBF/M5HjUch52bbtVONEFjv6Xu8sm8h72dNlR5bzIE1fvC/bxgspzkjSfU+MweEMmPM8KJebG6nnyxo5mCg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    }
+  }
+}
diff --git a/screencast/package.json b/screencast/package.json
new file mode 100644
index 00000000..8804f21a
--- /dev/null
+++ b/screencast/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "ldh-screencast",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Scripted Playwright scenes that render LinkedDataHub screencast tracks.",
+  "scripts": {
+    "scene": "node scenes/run.mjs"
+  },
+  "devDependencies": {
+    "playwright": "^1.49.0"
+  }
+}
diff --git a/screencast/readme/shoot.mjs b/screencast/readme/shoot.mjs
new file mode 100644
index 00000000..8bb546c2
--- /dev/null
+++ b/screencast/readme/shoot.mjs
@@ -0,0 +1,218 @@
+// Shoots the demo pictures the repository README shows.
+//
+// The README's screenshots are of three dataspaces, not one, so the base is a pattern:
+// `{app}` is replaced by each shot's demo folder name, and the shot list stays free of
+// hostnames the same way the docs manifest does.
+//
+// Same discipline as docs/shoot.mjs — one context per shot, `want` asserted before the
+// capture, the pointer hidden in stills — with two differences. The output goes
+// straight into the demo folders under the names the README already links (and each
+// demo's .ldhignore already skips), because nothing content-addresses these files. And
+// the Northwind picture is an animated GIF, since a README on GitHub plays no <video>
+// from the repository.
+//
+//   node readme/shoot.mjs --base 'https://{app}.demo.localhost' --cert-file … --cert-password-file … [--only copenhagen]
+
+import { chromium } from 'playwright';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+import { args, identityFor, ROOT, sleep } from '../lib/harness.mjs';
+import { CURSOR_INIT, makeCursor, withCursorHidden } from '../lib/cursor.mjs';
+import * as modes from '../lib/modes.mjs';
+import * as map from '../lib/map.mjs';
+
+const REPO = path.resolve(ROOT, '..');
+const OUT = path.join(ROOT, 'readme', 'out');
+const opts = args();
+const argv = process.argv.slice(2);
+const only = argv.includes('--only') ? argv[argv.indexOf('--only') + 1] : null;
+const GEOMETRY = { width: 1440, height: 900, scale: 2 };
+// What ships: stills at 1920 wide, the GIF at 960 and 12 fps. A README column is ~880px,
+// so that is 2x for the stills, and the GIF is the size its frame count can afford.
+const STILL_WIDTH = 1920;
+const GIF_WIDTH = 960;
+const GIF_FPS = 12;
+
+// Scrolls a subject up to just below the sticky navbar and action bar, so a picture of a
+// block opens on the block rather than on the document's heading.
+const underChrome = async (locator, gap = 132) => {
+  await locator.evaluate((e, gap) => {
+    let s = e.parentElement;
+    while (s && !(/(auto|scroll)/.test(getComputedStyle(s).overflowY) && s.scrollHeight > s.clientHeight)) s = s.parentElement;
+    const top = e.getBoundingClientRect().top;
+    if (s) s.scrollBy(0, top - s.getBoundingClientRect().top - gap);
+    else window.scrollBy(0, top - gap);
+  }, gap);
+  await sleep(800);
+};
+
+// The OUTER row carrying a view: scrolling to the inner one cuts the carrier's own bar
+// in half under the sticky chrome.
+const viewBlock = (page, title) =>
+  page.locator('.ldh-block-row').filter({ has: page.locator('.ldh-view-toolbar') }).filter({ hasText: title }).first();
+
+// Waits for the concept tree to reveal the open concept. The page does it on load: it expands the
+// path from the scheme down to every occurrence of the concept, marks them, and scrolls the tree to
+// centre the first one - which moves as the branches of a polyhierarchy finish in whatever order,
+// so the wait is for the scroll position to hold still, not for the first mark. All of it needs the
+// package's client rules, i.e. a composed client SEF: without one the tree stops at "Loading…".
+const revealed = async (page) => {
+  await page.locator('.concept-tree li.is-active').first().waitFor({ state: 'attached', timeout: 45000 });
+  let last = -1;
+  for (let still = 0; still < 3; ) {
+    await sleep(1000);
+    const now = await page.locator('ul.concept-tree').first().evaluate((t) => t.scrollTop);
+    still = now === last ? still + 1 : 0;
+    last = now;
+  }
+};
+
+// The open concept's row is inside the tree's visible area.
+const activeInView = (page) => page.locator('ul.concept-tree').first().evaluate((tree) => {
+  const row = tree.querySelector('li.is-active > div');
+  if (!row) return false;
+  const t = tree.getBoundingClientRect(), r = row.getBoundingClientRect();
+  return r.top >= t.top && r.bottom <= t.bottom;
+});
+
+export const SHOTS = [
+  {
+    app: 'northwind-traders', kind: 'gif', file: 'demo/northwind-traders/screenshot.gif',
+    caption: 'Set-based (parallax) navigation',
+    at: '/products/',
+    async prepare({ page }) {
+      await underChrome(viewBlock(page, 'All products'));
+    },
+    // From the product table to the suppliers of those products, in one pivot.
+    async act({ page, cursor }) {
+      await sleep(1200);
+      await modes.showControls(page, cursor);
+      await sleep(1200);
+      const pill = page.locator('.ldh-pivot-pill:visible').filter({ hasText: 'Provider' }).first();
+      await cursor.click(pill);
+      await page.locator('.parallax-step').first().waitFor({ state: 'visible', timeout: 15000 });
+      // Off the re-rendered pills and onto the results, so the loop ends on what it found.
+      const { width, height } = page.viewportSize();
+      await cursor.moveTo(width * 0.72, height * 0.78, { duration: 900 });
+      await sleep(3000);
+    },
+    want: '.parallax-step',
+  },
+  {
+    app: 'copenhagen', kind: 'still', file: 'demo/copenhagen/screenshot.png',
+    caption: 'City Graph geospatial view',
+    at: '/schools/',
+    // The map filling the frame. A marker's info window is a card as wide as the map
+    // itself, so opening one hides the very thing the picture is of.
+    async act({ page }) {
+      await underChrome(viewBlock(page, 'All schools'));
+      const found = await map.findMarkers(page);
+      if (!found.markers?.length) throw new Error(found.error ?? 'no markers on the map');
+      await sleep(1500);
+    },
+    want: '.ol-viewport',
+  },
+  {
+    app: 'unesco-thesaurus', kind: 'still', file: 'demo/unesco-thesaurus/screenshot.png',
+    caption: 'SKOS viewer',
+    at: '/concepts/concept7367/',
+    // Denmark's labels in five languages and its broader concepts, beside the concept tree
+    // revealing it: under EEC countries, the first of its five parents, centred in the tree.
+    async act({ page }) {
+      await revealed(page);
+    },
+    want: activeInView,
+  },
+  {
+    app: 'unesco-thesaurus', kind: 'still', file: 'demo/unesco-thesaurus/screenshot-edit-mode.png',
+    caption: 'SKOS editor',
+    at: '/concepts/concept7367/',
+    // The same page in edit mode, the tree revealing the concept beside the form as beside the view.
+    async act({ page, cursor }) {
+      await revealed(page);
+      const head = page.locator('.ldh-block-row').filter({ hasText: 'Denmark' }).first();
+      await cursor.click(head.locator('button').filter({ hasText: 'edit' }).first());
+      await page.locator('form:visible').first().waitFor({ state: 'visible', timeout: 15000 });
+      await sleep(2500);
+    },
+    want: async (page) => (await page.locator('form:visible').count()) > 0
+      && await activeInView(page),
+  },
+];
+
+const run = (cmd, a) => new Promise((res) => {
+  const p = spawn(cmd, a); let err = '';
+  p.stderr.on('data', (d) => (err += d));
+  p.on('error', (e) => res({ code: -1, err: e.message }));
+  p.on('close', (code) => res({ code, err }));
+});
+
+const baseFor = (app) => opts.base.replace('{app}', app);
+
+await fs.mkdir(OUT, { recursive: true });
+const browser = await chromium.launch({ headless: !opts.headed });
+const wanted = SHOTS.filter((s) => !only || only.split(',').some((o) => s.file.includes(o.trim())));
+const results = [];
+
+for (const shot of wanted) {
+  const base = baseFor(shot.app);
+  const identity = opts.anonymous ? null : await identityFor({ ...opts, base });
+  const context = await browser.newContext({
+    ignoreHTTPSErrors: true,
+    viewport: { width: GEOMETRY.width, height: GEOMETRY.height },
+    deviceScaleFactor: GEOMETRY.scale,
+    ...(identity ? { clientCertificates: identity } : {}),
+    ...(shot.kind === 'gif'
+      ? { recordVideo: { dir: OUT, size: { width: GEOMETRY.width, height: GEOMETRY.height } } }
+      : {}),
+  });
+  await context.addCookies([
+    { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+  ]);
+  await context.addInitScript(CURSOR_INIT);
+
+  const page = await context.newPage();
+  const started = Date.now();
+  const cursor = makeCursor(page);
+  const master = path.join(OUT, shot.file.replace(/\.[a-z]+$/, '').replace(/\//g, '-') + (shot.kind === 'gif' ? '.webm' : '.png'));
+  let outcome = 'ok', why, from = 0;
+  try {
+    await page.goto(base + shot.at, { waitUntil: 'load' });
+    await page.waitForTimeout(shot.settle ?? 6000);
+    if (shot.prepare) await shot.prepare({ page, cursor });
+    // A clip starts where the gesture does: the page load in front of it is cut.
+    from = (Date.now() - started) / 1000;
+    await shot.act({ page, cursor });
+    const met = typeof shot.want === 'function' ? await shot.want(page) : (await page.locator(shot.want).count()) > 0;
+    if (!met) { outcome = 'missed'; why = 'nothing matched what the caption promises'; }
+    if (shot.kind === 'still') await withCursorHidden(page, () => page.screenshot({ path: master }));
+  } catch (e) {
+    outcome = 'failed';
+    why = e.message.split('\n')[0].slice(0, 110);
+  }
+  const video = page.video();
+  await context.close();
+  if (video) {
+    if (shot.kind === 'gif') await video.saveAs(master).catch(() => {});
+    await video.delete().catch(() => {});
+  }
+
+  if (outcome === 'ok') {
+    const dest = path.join(REPO, shot.file);
+    const derived = shot.kind === 'gif'
+      ? await run('ffmpeg', ['-y', '-loglevel', 'error', '-ss', from.toFixed(2), '-i', master, '-vf',
+        `fps=${GIF_FPS},scale=${GIF_WIDTH}:-1:flags=lanczos,split[a][b];[a]palettegen=stats_mode=diff[p];[b][p]paletteuse=dither=bayer:bayer_scale=4:diff_mode=rectangle`,
+        dest])
+      : await run('ffmpeg', ['-y', '-loglevel', 'error', '-i', master, '-vf', `scale=${STILL_WIDTH}:-1:flags=lanczos`, dest]);
+    if (derived.code !== 0) { outcome = 'failed'; why = `ffmpeg: ${derived.err.trim().split('\n').pop()}`; }
+  }
+
+  results.push({ file: shot.file, outcome, why });
+  console.log(`  ${{ ok: '✓', missed: '~', failed: '✗' }[outcome]} ${shot.file.padEnd(48)} ${why ?? ''}`);
+}
+
+await browser.close();
+const bad = results.filter((r) => r.outcome !== 'ok');
+console.log(`\n${results.length - bad.length} shot, ${bad.length} not\n`);
+process.exit(bad.length ? 1 : 0);
diff --git a/screencast/render/camera.mjs b/screencast/render/camera.mjs
new file mode 100644
index 00000000..98ea647d
--- /dev/null
+++ b/screencast/render/camera.mjs
@@ -0,0 +1,179 @@
+// A camera move over a raw take: a shot cut from a 2880x1800 recording with a zoom
+// and pan that follow the work, keyframed by hand.
+//
+// A raw track is the whole viewport at 2x. A shot is a window onto it: tight on the
+// editor while a query is typed, panning to the button that submits it, opening out
+// when the result has arrived so the cause and the effect share the frame. The window
+// is a list of keyframes — a time, a zoom and a centre in the take's own pixels — and
+// the move between two keyframes is linear, which reads as a steady dolly rather than
+// a cut. Nothing is lifted or reordered; the only edit is where the window looks.
+//
+//   node render/camera.mjs tracks/supercut-compose.webm tracks/.supercut/q2c.mp4 \
+//     --from 9 --to 44.4 --keys camera/q2c.keys.json --pace 3
+//
+// The keys file is [{ "t": seconds, "z": zoom, "cx": px, "cy": px }, …] on the take's
+// timeline, in the take's pixels. z=1 is the full viewport; z=2 shows a quarter of it
+// at 1:1. The window is clamped to the frame, so a centre near an edge is safe. A move
+// eases in and out, so the window settles rather than stops.
+//
+// With --pace N the passage goes through render/pace.mjs FIRST, at full size, and the
+// keys are remapped through the pacer's marks sidecar before the camera runs on the
+// paced clip. Pacing after the camera would speed the move up wherever the page under
+// it happened to be still, and a dolly that lurches is worse than a cut.
+//
+// A page scroll in a Playwright recording is a jump: one frame at the top, the next
+// 1800px down. --scroll FILE replaces it with the scroll a person would have seen,
+// rendered from a stitched full-page capture: FILE names the span to replace, where the
+// page already sits (`offset`) and how far it scrolls, the height of the fixed chrome,
+// and where the raw take resumes, plus the
+// capture as `stitch` (default: the .scroll.png beside it). Keys are written on the raw
+// timeline and shifted past the splice.
+//
+// Options: --size WxH (default 1440x900), --fps N (default 30), --crf N (default 20),
+// --pace N (dwell speed for static stretches; omit to leave the timeline alone),
+// --min-move S (shortest a move may take after pacing, default 0.8),
+// --hold S (freeze the last frame for S seconds, so a closing caption has time to be read),
+// --scroll FILE (a *.scroll.json beside the take; see above).
+
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+
+const argv = process.argv.slice(2);
+const positional = argv.filter((a, i) => !a.startsWith('--') && !(i > 0 && argv[i - 1].startsWith('--')));
+const [input, output] = positional;
+const opt = (name, fallback) => { const i = argv.indexOf(`--${name}`); return i === -1 ? fallback : argv[i + 1]; };
+if (!input || !output || !opt('keys')) {
+  console.error('usage: camera.mjs <take.webm> <shot.mp4> --keys keys.json [--from S] [--to S] [--size 1440x900] [--fps 30] [--crf 20]');
+  process.exit(2);
+}
+const from = Number(opt('from', 0));
+const to = opt('to', null) === null ? null : Number(opt('to'));
+const [ow, oh] = opt('size', '1440x900').split('x').map(Number);
+const fps = Number(opt('fps', 30));
+const crf = opt('crf', '20');
+const keys = JSON.parse(await fs.readFile(opt('keys'), 'utf8')).sort((a, b) => a.t - b.t);
+
+const probe = await new Promise((resolve) => {
+  const p = spawn('ffprobe', ['-v', 'error', '-select_streams', 'v:0', '-show_entries', 'stream=width,height,r_frame_rate', '-of', 'json', input]);
+  let out = ''; p.stdout.on('data', (d) => { out += d; }); p.on('close', () => resolve(JSON.parse(out).streams[0]));
+});
+const iw = probe.width, ih = probe.height;
+
+// Pace first, if asked: trim the passage at full size to a constant rate, run the
+// pacer with the keys as beats, and take the remapped times back.
+let source = input;
+let start = from;
+let end = to;
+const ff = (args) => new Promise((resolve) => {
+  const p = spawn('ffmpeg', ['-v', 'error', '-y', ...args], { stdio: ['ignore', 'inherit', 'inherit'] });
+  p.on('close', resolve);
+});
+const enc = ['-an', '-c:v', 'libx264', '-preset', 'medium', '-crf', '16', '-pix_fmt', 'yuv420p'];
+
+// The scroll splice, if asked: raw up to the jump, the rendered scroll, raw from the
+// resume point. The chrome stays put, taken from the frame before the jump; the page
+// under it eases down the stitched capture.
+const scrollFile = opt('scroll', null);
+if (scrollFile !== null) {
+  const sc = JSON.parse(await fs.readFile(scrollFile, 'utf8'));
+  const stitch = sc.stitch
+    ? path.resolve(path.dirname(scrollFile), sc.stitch)
+    : path.resolve(path.dirname(scrollFile), path.basename(scrollFile).replace(/\.scroll\.json$/, '.scroll.png'));
+  const dur = Number((sc.to - sc.from).toFixed(3));
+  const page = ih - sc.chrome;
+  const spliced = output.replace(/\.mp4$/, '') + '.spliced.mp4';
+  const P = `min(1\\,t/${dur})`;   // commas inside a filter expression are escaped
+  const ease = `(${P}*${P}*(3-2*${P}))`;
+  const code = await ff([
+    '-ss', String(from), '-to', String(sc.from), '-i', input,          // 0: raw before the jump
+    '-ss', String(sc.from), '-i', input,                                // 1: a frame for the chrome
+    '-loop', '1', '-t', String(dur), '-i', stitch,                      // 2: the stitched page
+    '-ss', String(sc.resume), ...(to === null ? [] : ['-to', String(to)]), '-i', input, // 3: raw after
+    '-filter_complex',
+    `[0]fps=${fps},setpts=PTS-STARTPTS[a];` +
+    `[1]trim=end_frame=1,crop=iw:${sc.chrome}:0:0,loop=loop=-1:size=1,fps=${fps},trim=duration=${dur},setpts=PTS-STARTPTS[chrome];` +
+    `[2]fps=${fps},crop=${iw}:${page}:0:'${sc.chrome}+${sc.offset ?? 0}+${sc.scroll}*${ease}',setpts=PTS-STARTPTS[pg];` +
+    `[chrome][pg]vstack,format=yuv420p[b];` +
+    `[3]fps=${fps},setpts=PTS-STARTPTS[c];` +
+    `[a][b][c]concat=n=3:v=1:a=0[v]`,
+    '-map', '[v]', ...enc, spliced,
+  ]);
+  if (code !== 0) process.exit(code);
+  // Keys past the splice move up by what was dropped; keys inside it land on its end.
+  const dropped = sc.resume - sc.to;
+  for (const k of keys) {
+    if (k.t >= sc.resume) k.t -= dropped;
+    else if (k.t > sc.to) k.t = sc.to;
+  }
+  source = spliced; start = 0; end = null;
+  const at = (t) => t - from;
+  keys.forEach((k) => { k.t = at(k.t); });
+}
+
+const pace = opt('pace', null);
+if (pace !== null) {
+  const take = output.replace(/\.mp4$/, '') + '.take.mp4';
+  const paced = output.replace(/\.mp4$/, '') + '.paced.mp4';
+  const marksIn = take.replace(/\.mp4$/, '.marks.json');
+  const marksOut = paced.replace(/\.mp4$/, '.marks.json');
+  const trim = await ff(['-ss', String(start), ...(end === null ? [] : ['-to', String(end)]), '-i', source, '-vf', `fps=${fps}`, ...enc, take]);
+  if (trim !== 0) process.exit(trim);
+  await fs.writeFile(marksIn, JSON.stringify({ scene: 'camera', track: take, beats: keys.map((k, i) => ({ beat: `k${i}`, at: k.t - start })) }));
+  const pacer = new URL('./pace.mjs', import.meta.url).pathname;
+  const pacedCode = await new Promise((resolve) => {
+    const p = spawn('node', [pacer, take, paced, '--dwell', String(pace), '--crf', '16', '--marks', marksIn, '--out-marks', marksOut], { stdio: ['ignore', 'inherit', 'inherit'] });
+    p.on('close', resolve);
+  });
+  if (pacedCode !== 0) process.exit(pacedCode);
+  const remapped = JSON.parse(await fs.readFile(marksOut, 'utf8')).beats;
+  keys.forEach((k, i) => { k.t = remapped.find((b) => b.beat === `k${i}`).at; });
+  // A move that crossed a dwell came out compressed with it. Give every move at least
+  // MIN_MOVE seconds by starting it earlier: the arrival stays on its beat, since that
+  // is the frame that has to be right (the button is clicked; the window is on it).
+  const MIN_MOVE = Number(opt('min-move', 0.8));
+  for (let i = keys.length - 2; i >= 0; i--) {
+    const a = keys[i], b = keys[i + 1];
+    const moves = a.z !== b.z || a.cx !== b.cx || a.cy !== b.cy;
+    if (moves && b.t - a.t < MIN_MOVE) a.t = Math.max(i > 0 ? keys[i - 1].t : 0, b.t - MIN_MOVE);
+  }
+  source = paced; start = 0; end = null;
+}
+
+// Piecewise-linear expression in the take's time. Time is the input frame index over
+// the constant rate, since zoompan's own clock is unreliable on this input; after a
+// trim it restarts at zero, so the keys are shifted by `from`.
+const T = `(in/${fps})`;
+const piecewise = (field) => {
+  const ks = keys.map((k) => ({ t: k.t - start, v: k[field] }));
+  let expr = String(ks[ks.length - 1].v);
+  for (let i = ks.length - 2; i >= 0; i--) {
+    const a = ks[i], b = ks[i + 1];
+    const span = Math.max(b.t - a.t, 1e-6);
+    // smoothstep between the two keys: eased in and out, no velocity step at either end
+    const P = `max(0,min(1,(${T}-${a.t.toFixed(3)})/${span.toFixed(3)}))`;
+    expr = `if(lt(${T},${b.t.toFixed(3)}),${a.v}+(${b.v}-${a.v})*(${P}*${P}*(3-2*${P})),${expr})`;
+  }
+  return expr;
+};
+const z = piecewise('z');
+const cx = piecewise('cx');
+const cy = piecewise('cy');
+// zoompan wants the window's top-left; keep it inside the frame.
+const x = `max(0,min(iw-iw/zoom,(${cx})-iw/(2*zoom)))`;
+const y = `max(0,min(ih-ih/zoom,(${cy})-ih/(2*zoom)))`;
+
+const trimArgs = ['-ss', String(start), ...(end === null ? [] : ['-to', String(end)])];
+// The take is variable frame rate (Playwright's webm) and zoompan ignores input timing,
+// so it is made constant first and the timestamps are rebuilt after.
+const hold = Number(opt('hold', 0));
+const vf = `fps=${fps},zoompan=z='${z}':x='${x}':y='${y}':d=1:s=${ow}x${oh}:fps=${fps},setpts=N/(${fps}*TB)` +
+  (hold > 0 ? `,tpad=stop_mode=clone:stop_duration=${hold}` : '');
+const args = ['-v', 'error', '-y', ...trimArgs, '-i', source, '-vf', vf, '-an',
+  '-c:v', 'libx264', '-preset', 'medium', '-crf', crf, '-pix_fmt', 'yuv420p', '-movflags', '+faststart', output];
+const code = await new Promise((resolve) => {
+  const p = spawn('ffmpeg', args, { stdio: ['ignore', 'inherit', 'inherit'] });
+  p.on('close', resolve);
+});
+if (code !== 0) process.exit(code);
+console.log(`${output}  ${ow}x${oh}  ${keys.length} keys over ${from}s–${to ?? 'end'}s of ${input} (${iw}x${ih})${pace !== null ? `, paced at ${pace}x` : ''}`);
diff --git a/screencast/render/head.mjs b/screencast/render/head.mjs
new file mode 100644
index 00000000..aae3abff
--- /dev/null
+++ b/screencast/render/head.mjs
@@ -0,0 +1,73 @@
+// Cut the page load off the front.
+//
+// A scene now opens on the document whose loaded render IS its strongest frame — the
+// map already plotted, the grid already photographed. What it cannot control is that
+// the browser needs a beat to get there: the server shell paints immediately, then
+// Saxon-JS runs the transform and OpenLayers draws, and for about a second and a half
+// the recording shows an empty placeholder block. Warming the document off camera
+// fixes the network half and not this half, because this half is CPU in the browser.
+//
+// So the load is trimmed, and nothing else is. This is NOT a cold open: no later beat
+// is lifted to the front, no moment is shown out of order, the scene still begins
+// exactly where it begins. The only frames removed are the ones before the opening
+// state had finished painting — and where to cut is measured rather than chosen,
+// because a scene fires its first beat the instant the view is ready.
+//
+//   node render/head.mjs tracks/02-where-we-have-nobody.mp4 [--lead 0.3]
+//
+// Options: --lead S (how much to keep before the first beat, default 0.3), --marks
+// FILE, --out FILE, --crf N.
+
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+
+const argv = process.argv.slice(2);
+const src = argv[0];
+const opt = (name, fallback = null) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 ? argv[i + 1] : fallback;
+};
+if (!src) { console.error('usage: head.mjs <track.mp4> [--lead S]'); process.exit(2); }
+
+const base = src.replace(/\.mp4$/, '');
+const marksFile = opt('marks', `${base}.paced.marks.json`);
+const out = opt('out', src);
+// Zero by default, and deliberately. A scene fires its first beat the instant its
+// opening view has painted, so the beat timestamp IS the first good frame — backing
+// off even 0.3s lands before the paint, and pacing has already compressed the static
+// pre-render stretch, so a small lead in the paced timeline is a longer one in real
+// time. One take opened on an empty placeholder block that way.
+const lead = Number(opt('lead', 0));
+const crf = opt('crf', '20');
+
+const run = (cmd, a) => new Promise((res, rej) => {
+  const p = spawn(cmd, a); let err = '';
+  p.stderr.on('data', (d) => (err += d));
+  p.on('close', (c) => (c === 0 ? res() : rej(new Error(err.slice(-500)))));
+});
+
+const marks = JSON.parse(await fs.readFile(marksFile, 'utf8'));
+const first = marks.beats?.[0];
+if (!first) { console.error(`${path.basename(marksFile)} has no beats`); process.exit(2); }
+
+const cut = Math.max(0, first.at - lead);
+if (cut < 0.25) {
+  console.log(`  ${path.basename(src)}  nothing to trim (first beat at ${first.at.toFixed(2)}s)`);
+  process.exit(0);
+}
+
+const tmp = `${base}.__head.mp4`;
+await run('ffmpeg', ['-y', '-loglevel', 'error', '-ss', String(cut), '-i', src,
+  '-c:v', 'libx264', '-preset', 'medium', '-crf', crf,
+  '-pix_fmt', 'yuv420p', '-an', '-movflags', '+faststart', tmp]);
+await fs.rename(tmp, out);
+
+const shifted = {
+  ...marks,
+  head: { trimmed: Number(cut.toFixed(2)), lead },
+  duration: Number((marks.duration - cut).toFixed(3)),
+  beats: marks.beats.map((b) => ({ ...b, at: Number(Math.max(0, b.at - cut).toFixed(3)) })),
+};
+await fs.writeFile(marksFile, JSON.stringify(shifted, null, 2) + '\n');
+console.log(`  ${path.basename(out)}  ${cut.toFixed(1)}s of page load trimmed, opens on "${first.beat}"`);
diff --git a/screencast/render/hero.mjs b/screencast/render/hero.mjs
new file mode 100644
index 00000000..1c0edef6
--- /dev/null
+++ b/screencast/render/hero.mjs
@@ -0,0 +1,211 @@
+// The front page's hero loop, cut from the supercut master.
+//
+// The master (tracks/supercut.mp4) is assembled from per-shot files that carry their
+// own burned-in captions and the browser chrome, and the shot list that built it is
+// not in the repo. So the loop is derived rather than rebuilt: the chrome strip is
+// cropped off the top and the old caption strip off the bottom, the stretches named
+// in `cuts` are dropped, and new captions are laid over what remains.
+//
+// The captions are the point of the file. They live in hero.json as text, timed on
+// the MASTER's timeline so a cut can move without retiming every line; this script
+// remaps them. Each one is rendered in the browser, in the platform's own Geist, and
+// overlaid with ffmpeg — this ffmpeg has no drawtext and no libass, and a browser is
+// the one text rasteriser the rig already depends on. The rule the captions follow:
+// name the LinkedDataHub feature on screen, never the demo's subject matter.
+//
+//   node render/hero.mjs [hero.json]
+//
+// A `slide` in the spec closes the cut: the footage holds its last frame and fades into
+// a title card set in the platform's own type and dark tokens — eyebrow, headline, lede,
+// the addresses as pills — carrying the site's messaging rather than the demo's subject.
+// It is rendered in the browser like the captions, at the output's exact frame size.
+//
+// An `audio` in the spec lays a soundtrack under the cut: padded with silence or
+// trimmed to the output's length, with a short fade at the very end so a track that
+// stops on its own cut does not click. Without it the output is silent, as the loop is.
+//
+// Writes the loop, a poster frame, and a contact sheet beside it for a once-over.
+
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+import { chromium } from 'playwright';
+import { ROOT } from '../lib/harness.mjs';
+
+const specFile = path.resolve(process.argv[2] ?? path.join(ROOT, 'hero.json'));
+const spec = JSON.parse(await fs.readFile(specFile, 'utf8'));
+const at = (p) => path.resolve(ROOT, p);
+
+const run = (cmd, args) => new Promise((resolve) => {
+  const child = spawn(cmd, args, { stdio: ['ignore', 'pipe', 'pipe'] });
+  let out = '', err = '';
+  child.stdout.on('data', (d) => { out += d; });
+  child.stderr.on('data', (d) => { err += d; });
+  child.on('close', (code) => resolve({ code, out, err }));
+});
+
+const probe = async (file) => {
+  const r = await run('ffprobe', ['-v', 'error', '-show_entries', 'format=duration:stream=width,height', '-of', 'json', file]);
+  const j = JSON.parse(r.out);
+  return { duration: Number(j.format.duration), width: j.streams[0].width, height: j.streams[0].height };
+};
+
+const src = await probe(at(spec.source));
+const cuts = (spec.cuts ?? []).map(([a, b]) => [Number(a), Number(b)]).sort((x, y) => x[0] - y[0]);
+
+// Master time → loop time, or null inside a cut.
+const remap = (t) => {
+  let shift = 0;
+  for (const [a, b] of cuts) {
+    if (t <= a) break;
+    if (t < b) return null;
+    shift += b - a;
+  }
+  return t - shift;
+};
+const keptSpans = [];
+{
+  let pos = 0;
+  for (const [a, b] of cuts) { if (a > pos) keptSpans.push([pos, a]); pos = b; }
+  if (pos < src.duration) keptSpans.push([pos, src.duration]);
+}
+
+// A caption crossing a cut keeps whichever side of it is longer, if that is worth showing.
+const captions = [];
+for (const c of spec.captions) {
+  const a = Number(c.in), b = Number(c.out);
+  const cut = cuts.find(([x, y]) => a < y && b > x);
+  if (!cut) { captions.push({ ...c, from: remap(a), to: remap(b) }); continue; }
+  const [x, y] = cut;
+  const left = Math.max(0, x - a), right = Math.max(0, b - y);
+  if (left >= right && left > 0.5) captions.push({ ...c, from: remap(a), to: remap(x) });
+  else if (right > 0.5) captions.push({ ...c, from: remap(y), to: remap(b) });
+}
+
+// Render the captions. Geist comes from the platform, as the site serves it, so the
+// loop's type matches the page it sits on.
+const fontFile = at('../../LinkedDataHub/src/main/webapp/static/com/atomgraph/linkeddatahub/css/fonts/geist.woff2');
+const font = (await fs.readFile(fontFile)).toString('base64');
+const capDir = at('tracks/.hero');
+await fs.mkdir(capDir, { recursive: true });
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: spec.width, height: 200 }, deviceScaleFactor: 1 });
+const { size, weight } = spec.caption;
+for (const [i, c] of captions.entries()) {
+  await page.setContent(`<!doctype html><style>
+    @font-face { font-family: Geist; src: url(data:font/woff2;base64,${font}) format('woff2'); font-weight: 100 900; }
+    html, body { margin: 0; background: transparent; }
+    .cap { display: inline-block; font: ${weight} ${size}px/1.25 Geist, system-ui, sans-serif; color: #fff;
+           background: rgba(11, 14, 20, 0.67); border-radius: 10px; padding: 14px 22px; white-space: nowrap;
+           -webkit-font-smoothing: antialiased; }
+  </style><span class="cap">${c.text.replace(/&/g, '&amp;').replace(/</g, '&lt;')}</span>`);
+  await page.evaluate(() => document.fonts.ready);
+  c.png = path.join(capDir, `${String(i).padStart(2, '0')}.png`);
+  await page.locator('.cap').screenshot({ path: c.png, omitBackground: true });
+}
+// The closing slide, at the output's frame size: the crop scaled to the spec width, the
+// height rounded to even the way scale=W:-2 rounds it.
+const { top, bottom } = spec.crop;
+const outW = spec.width;
+const outH = Math.round((src.height - top - bottom) * outW / src.width / 2) * 2;
+let slidePng = null;
+if (spec.slide) {
+  const sl = spec.slide;
+  const mono = (await fs.readFile(at('../../LinkedDataHub/src/main/webapp/static/com/atomgraph/linkeddatahub/css/fonts/geist-mono.woff2'))).toString('base64');
+  const esc = (t) => String(t ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;');
+  const k = outW / 1440; // type set for a 1440-wide frame, scaled with the output
+  const px = (n) => `${(n * k).toFixed(2)}px`;
+  const pills = (sl.links ?? []).map((l) => `<span class="pill${l.primary ? ' is-primary' : ''}">${esc(l.label)}</span>`).join('');
+  const slidePage = await browser.newPage({ viewport: { width: outW, height: outH }, deviceScaleFactor: 1 });
+  await slidePage.setContent(`<!doctype html><style>
+    @font-face { font-family: Geist; src: url(data:font/woff2;base64,${font}) format('woff2'); font-weight: 100 900; }
+    @font-face { font-family: 'Geist Mono'; src: url(data:font/woff2;base64,${mono}) format('woff2'); font-weight: 100 900; }
+    /* the platform's dark tokens: surface, on-surface, on-surface-variant, primary, tertiary, outline, aurora, dots */
+    html, body { margin: 0; width: ${outW}px; height: ${outH}px; overflow: hidden; }
+    body { position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
+           font-family: Geist, system-ui, sans-serif; color: #dde3ea; -webkit-font-smoothing: antialiased;
+           background: #0f1419 linear-gradient(135deg, #241d3a 0%, #16263a 50%, #12291f 100%); }
+    body::before { content: ""; position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
+           background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 1.4px); background-size: ${px(24)} ${px(24)}; }
+    .card { position: relative; max-width: ${px(1060)}; padding: 0 ${px(48)}; display: flex; flex-direction: column; align-items: center; }
+    .wordmark { display: inline-flex; align-items: center; gap: ${px(12)}; font-weight: 600; font-size: ${px(26)}; letter-spacing: -0.015em; color: #fff; margin-bottom: ${px(40)}; }
+    .mark { width: ${px(36)}; height: ${px(36)}; border-radius: ${px(9)}; position: relative;
+            background: linear-gradient(135deg, #4d94f8 0%, #ad7adf 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
+    .mark::before, .mark::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.9); }
+    .mark::before { width: ${px(9)}; height: ${px(9)}; top: ${px(6)}; left: ${px(6)}; }
+    .mark::after  { width: ${px(6)}; height: ${px(6)}; bottom: ${px(7.5)}; right: ${px(7.5)}; }
+    .eyebrow { font-family: 'Geist Mono', monospace; font-size: ${px(15)}; letter-spacing: 0.04em; text-transform: uppercase; color: #dbb3fd; margin: 0; }
+    h1 { margin: ${px(14)} 0 ${px(22)}; font-size: ${px(76)}; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: #dde3ea; text-wrap: balance; }
+    .lede { margin: 0; font-size: ${px(25)}; line-height: 1.45; color: #bcc8d5; max-width: ${px(880)}; text-wrap: balance; }
+    .actions { display: flex; gap: ${px(14)}; margin-top: ${px(40)}; }
+    .pill { display: inline-flex; align-items: center; height: ${px(54)}; padding: 0 ${px(26)}; border-radius: 999px; font-size: ${px(21)}; font-weight: 500;
+            border: 1px solid #87929e; color: #dde3ea; white-space: nowrap; }
+    .pill.is-primary { background: #98ccff linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.10)); color: #003259; border-color: transparent; }
+    .note { font-family: 'Geist Mono', monospace; font-size: ${px(14)}; letter-spacing: 0.04em; text-transform: uppercase; color: #87929e; margin: ${px(36)} 0 0; }
+  </style><div class="card">
+    <div class="wordmark"><span class="mark"></span>LinkedDataHub</div>
+    ${sl.eyebrow ? `<p class="eyebrow">${esc(sl.eyebrow)}</p>` : ''}
+    <h1>${esc(sl.title)}</h1>
+    ${sl.lede ? `<p class="lede">${esc(sl.lede)}</p>` : ''}
+    ${pills ? `<div class="actions">${pills}</div>` : ''}
+    ${sl.note ? `<p class="note">${esc(sl.note)}</p>` : ''}
+  </div>`);
+  await slidePage.evaluate(() => document.fonts.ready);
+  slidePng = path.join(capDir, 'slide.png');
+  await slidePage.screenshot({ path: slidePng });
+}
+await browser.close();
+
+// One ffmpeg pass: crop, cut, concat, overlay each caption for its span.
+const parts = [`[0]crop=iw:ih-${top + bottom}:0:${top},scale=${spec.width}:-2,split=${keptSpans.length}${keptSpans.map((_, i) => `[s${i}]`).join('')}`];
+keptSpans.forEach(([a, b], i) => parts.push(`[s${i}]trim=${a}:${b},setpts=PTS-STARTPTS[p${i}]`));
+parts.push(`${keptSpans.map((_, i) => `[p${i}]`).join('')}concat=n=${keptSpans.length}:v=1:a=0[v0]`);
+let prev = 'v0';
+// With a closing slide the footage holds its last frame for the fade and the card's
+// hold. The hold goes on before the captions, so a caption's span ends where the
+// footage ends rather than riding the held frame into the fade.
+const loopLength = keptSpans.reduce((s, [a, b]) => s + (b - a), 0);
+const slideFade = Number(spec.slide?.fade ?? 1.2), slideHold = Number(spec.slide?.seconds ?? 6);
+if (slidePng) { parts.push(`[v0]tpad=stop_mode=clone:stop_duration=${(slideFade + slideHold).toFixed(3)}[v0h]`); prev = 'v0h'; }
+captions.forEach((c, i) => {
+  const { inset, bottom: rise } = spec.caption;
+  parts.push(`[${prev}][${i + 1}]overlay=${inset}:H-h-${rise}:enable='between(t,${c.from.toFixed(3)},${c.to.toFixed(3)})'[v${i + 1}]`);
+  prev = `v${i + 1}`;
+});
+
+// The closing slide: the card is a still input looped for the whole tail, its alpha faded
+// in from the moment the footage ends, so nothing of it shows before then.
+const slideInputs = [];
+if (slidePng) {
+  const idx = captions.length + 1;
+  slideInputs.push('-loop', '1', '-framerate', '30', '-t', String(loopLength + slideFade + slideHold), '-i', slidePng);
+  parts.push(`[${idx}]scale=${outW}:${outH},format=rgba,fade=t=in:st=${loopLength.toFixed(3)}:d=${slideFade}:alpha=1[sl]`);
+  parts.push(`[${prev}][sl]overlay=0:0:format=auto[vs]`);
+  prev = 'vs';
+}
+
+const out = at(spec.output);
+const totalLength = loopLength + (slidePng ? slideFade + slideHold : 0);
+const audioInputs = [], audioMaps = ['-an'];
+if (spec.audio) {
+  const idx = captions.length + 1 + (slidePng ? 1 : 0);
+  const tail = Number(spec.audio.fadeOut ?? 0.4);
+  audioInputs.push('-i', at(spec.audio.file));
+  parts.push(`[${idx}:a]apad,atrim=0:${totalLength.toFixed(3)},afade=t=out:st=${(totalLength - tail).toFixed(3)}:d=${tail}[a]`);
+  audioMaps.splice(0, 1, '-map', '[a]', '-c:a', 'aac', '-b:a', String(spec.audio.bitrate ?? '192k'));
+}
+const enc = await run('ffmpeg', [
+  '-v', 'error', '-y', '-i', at(spec.source), ...captions.flatMap((c) => ['-i', c.png]), ...slideInputs, ...audioInputs,
+  '-filter_complex', parts.join(';'), '-map', `[${prev}]`, ...audioMaps,
+  '-c:v', 'libx264', '-preset', 'slow', '-crf', String(spec.crf ?? 24), '-pix_fmt', 'yuv420p', '-r', '30',
+  '-movflags', '+faststart', out,
+]);
+if (enc.code !== 0) { console.error(enc.err); process.exit(1); }
+
+await run('ffmpeg', ['-v', 'error', '-y', '-ss', String(spec.posterAt ?? 0), '-i', out, '-frames:v', '1', '-q:v', '3', at(spec.poster)]);
+await run('ffmpeg', ['-v', 'error', '-y', '-i', out, '-vf', 'fps=1/6,scale=426:-2,tile=5x3', '-frames:v', '1', '-update', '1', out.replace(/\.mp4$/, '-sheet.jpg')]);
+
+const made = await probe(out);
+const bytes = (await fs.stat(out)).size;
+console.log(`${path.relative(ROOT, out)}  ${made.width}x${made.height}  ${made.duration.toFixed(1)}s  ${(bytes / 1e6).toFixed(1)} MB  ${captions.length} captions${slidePng ? `, closing slide from ${loopLength.toFixed(1)}s` : ''}${spec.audio ? `, soundtrack ${path.relative(ROOT, at(spec.audio.file))}` : ''}`);
+for (const c of captions) console.log(`  ${c.from.toFixed(1).padStart(5)}–${c.to.toFixed(1).padEnd(5)} ${c.text}`);
diff --git a/screencast/render/mock-cut.json b/screencast/render/mock-cut.json
new file mode 100644
index 00000000..2e2141c5
--- /dev/null
+++ b/screencast/render/mock-cut.json
@@ -0,0 +1,54 @@
+{
+  "output": "tracks/mock-cut.mp4",
+  "spineOutput": "tracks/mock-cut-spine.mp4",
+  "width": 1440,
+  "height": 900,
+  "fps": 30,
+  "crf": 20,
+  "leadSeconds": 0.3,
+  "trailSeconds": 0.1,
+  "maxZoom": 2.4,
+  "source": {
+    "width": 2880,
+    "height": 1800
+  },
+  "caption": {
+    "font": "/System/Library/Fonts/Helvetica.ttc",
+    "size": 44
+  },
+  "maxSeconds": 30,
+  "padColor": "black",
+  "vignette": null,
+  "shots": [
+    {
+      "id": "m1",
+      "track": "mock-bloom",
+      "from": 0,
+      "to": 8.0,
+      "hold": 0,
+      "spine": true,
+      "focus": false,
+      "maxSeconds": 30
+    },
+    {
+      "id": "m2",
+      "track": "mock-shapes",
+      "from": 0,
+      "to": 9.6,
+      "hold": 0,
+      "spine": true,
+      "focus": false,
+      "maxSeconds": 30
+    },
+    {
+      "id": "m3",
+      "track": "mock-form-pin",
+      "from": 0,
+      "to": 6.6,
+      "hold": 0,
+      "spine": true,
+      "focus": false,
+      "maxSeconds": 30
+    }
+  ]
+}
\ No newline at end of file
diff --git a/screencast/render/mock.mjs b/screencast/render/mock.mjs
new file mode 100644
index 00000000..a4cd41ac
--- /dev/null
+++ b/screencast/render/mock.mjs
@@ -0,0 +1,37 @@
+// Rendering a vector mock: the player page is stepped frame by frame (window.render(t))
+// and screenshotted at 2×, then encoded. No screen recording, no cursor, any resolution.
+//   node render/mock.mjs mock/player.html tracks/mock-form-pin.mp4 [--scale 2] [--fps 30]
+import { chromium } from 'playwright';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+const [src, out] = process.argv.slice(2);
+const opt = (n, d) => { const i = process.argv.indexOf(`--${n}`); return i >= 0 ? Number(process.argv[i + 1]) : d; };
+const scale = opt('scale', 2), fps = opt('fps', 30);
+const dir = path.join('tracks', '.mock'); await fs.rm(dir, { recursive: true, force: true }); await fs.mkdir(dir, { recursive: true });
+// file:// pages cannot fetch their assets; the mock directory is served locally.
+import http from 'node:http';
+const root = path.resolve(path.dirname(src));
+const types = { '.html': 'text/html', '.json': 'application/json', '.png': 'image/png', '.svg': 'image/svg+xml', '.css': 'text/css', '.js': 'text/javascript' };
+const server = http.createServer(async (req, res) => {
+  try { const f = path.join(root, decodeURIComponent(new URL(req.url, 'http://x').pathname)); const data = await fs.readFile(f); res.writeHead(200, { 'content-type': types[path.extname(f)] ?? 'application/octet-stream' }); res.end(data); }
+  catch { res.writeHead(404); res.end(); }
+});
+await new Promise((r) => server.listen(0, '127.0.0.1', r));
+const port = server.address().port;
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: scale });
+page.on('pageerror', (e) => console.error('  page error:', e.message));
+await page.goto(`http://127.0.0.1:${port}/${path.basename(src)}`);
+await page.waitForFunction(() => window.ready === true, null, { timeout: 30_000 });
+await page.evaluate(() => document.fonts.ready);
+const duration = await page.evaluate(() => window.duration);
+const n = Math.ceil(duration * fps);
+for (let i = 0; i < n; i++) {
+  await page.evaluate((t) => window.render(t), i / fps);
+  await page.screenshot({ path: path.join(dir, `f${String(i).padStart(5, '0')}.png`), type: 'png' });
+  if (i % 30 === 0) process.stdout.write(`  ${i}/${n}\r`);
+}
+await browser.close(); server.close();
+await new Promise((res, rej) => { const p = spawn('ffmpeg', ['-y', '-loglevel', 'error', '-framerate', String(fps), '-i', path.join(dir, 'f%05d.png'), '-c:v', 'libx264', '-preset', 'medium', '-crf', '18', '-pix_fmt', 'yuv420p', '-movflags', '+faststart', out]); p.on('close', (c) => (c === 0 ? res() : rej(new Error('ffmpeg failed')))); });
+console.log(`\n→ ${out}  ${duration}s, ${n} frames at ${1440 * scale}×${900 * scale}`);
diff --git a/screencast/render/pace.mjs b/screencast/render/pace.mjs
new file mode 100644
index 00000000..4799d1bc
--- /dev/null
+++ b/screencast/render/pace.mjs
@@ -0,0 +1,135 @@
+// Speed up the dead air, leave the gestures alone.
+//
+// A uniform 2x scales the pointer travel and the typing as well as the waiting, so
+// the whole thing reads as a machine on fast-forward. What actually wants removing
+// is the static time: the dwells after each beat where nothing moves.
+//
+// Rather than trusting the scene to declare where those are, this measures them —
+// ffmpeg's freezedetect reports every interval where consecutive frames are
+// identical, which is exactly a dwell. Those segments get the speed-up; everything
+// else passes through at 1x. The marks sidecar is remapped onto the new timeline,
+// so the edit list still points at the right frames.
+//
+//   node render/pace.mjs tracks/scene.webm tracks/scene-paced.mp4 --dwell 4
+//
+// Options: --dwell N (speed for static stretches, default 3), --min S (ignore
+// freezes shorter than this, default 0.5s), --noise dB (freezedetect sensitivity,
+// default -50dB), --crf N, --marks FILE, --out-marks FILE.
+
+import { spawn } from 'node:child_process';
+import fs from 'node:fs/promises';
+
+const argv = process.argv.slice(2);
+const [input, output] = argv.filter((a) => !a.startsWith('--') && !isOptionValue(a));
+function isOptionValue(a) {
+  const i = argv.indexOf(a);
+  return i > 0 && argv[i - 1].startsWith('--');
+}
+const opt = (name, fallback) => {
+  const i = argv.indexOf(`--${name}`);
+  return i === -1 ? fallback : argv[i + 1];
+};
+
+if (!input || !output) {
+  console.error('usage: pace.mjs <input.webm> <output.mp4> [--dwell 3] [--min 0.5] [--noise -50dB] [--crf 20] [--marks f] [--out-marks f]');
+  process.exit(2);
+}
+
+const dwellSpeed = Number(opt('dwell', 3));
+const minFreeze = Number(opt('min', 0.5));
+const noise = opt('noise', '-50dB');
+const crf = opt('crf', '20');
+const marksIn = opt('marks', null);
+const marksOut = opt('out-marks', null);
+
+function run(cmd, args) {
+  return new Promise((resolve, reject) => {
+    const p = spawn(cmd, args);
+    let out = '', err = '';
+    p.stdout.on('data', (d) => (out += d));
+    p.stderr.on('data', (d) => (err += d));
+    p.on('close', (code) => (code === 0 ? resolve({ out, err }) : reject(new Error(`${cmd} exited ${code}\n${err.slice(-1500)}`))));
+  });
+}
+
+// ── 1. how long is it, and where does nothing move? ────────────────────────────
+const probe = await run('ffprobe', ['-v', 'error', '-show_entries', 'format=duration', '-of', 'csv=p=0', input]);
+const duration = Number(probe.out.trim());
+
+const detect = await run('ffmpeg', ['-i', input, '-vf', `freezedetect=n=${noise}:d=${minFreeze}`, '-map', '0:v', '-f', 'null', '-']);
+
+const freezes = [];
+let pending = null;
+for (const line of detect.err.split('\n')) {
+  const start = line.match(/freeze_start:\s*([\d.]+)/);
+  const end = line.match(/freeze_end:\s*([\d.]+)/);
+  if (start) pending = Number(start[1]);
+  if (end && pending !== null) {
+    freezes.push([pending, Number(end[1])]);
+    pending = null;
+  }
+}
+if (pending !== null) freezes.push([pending, duration]); // a freeze that runs to the end
+
+// ── 2. turn that into an alternating segment list ──────────────────────────────
+const segments = [];
+let cursor = 0;
+for (const [s, e] of freezes) {
+  if (s > cursor) segments.push({ start: cursor, end: s, speed: 1 });
+  segments.push({ start: s, end: Math.min(e, duration), speed: dwellSpeed });
+  cursor = Math.min(e, duration);
+}
+if (cursor < duration) segments.push({ start: cursor, end: duration, speed: 1 });
+
+// A dwell speed of 1 means "do not pace" — fall through to a straight transcode
+// rather than building a concat graph that changes nothing.
+const kept = dwellSpeed === 1
+  ? [{ start: 0, end: duration, speed: 1 }]
+  : segments.filter((s) => s.end - s.start > 0.04);
+if (!kept.length) {
+  console.error('no segments — is the input empty?');
+  process.exit(1);
+}
+
+const staticTime = kept.filter((s) => s.speed !== 1).reduce((a, s) => a + (s.end - s.start), 0);
+const newDuration = kept.reduce((a, s) => a + (s.end - s.start) / s.speed, 0);
+
+console.log(`${input}`);
+console.log(`  ${duration.toFixed(1)}s, ${freezes.length} static stretches totalling ${staticTime.toFixed(1)}s`);
+console.log(`  ${kept.length} segments → ${newDuration.toFixed(1)}s with dwells at ${dwellSpeed}x`);
+
+// ── 3. build the filtergraph and encode ────────────────────────────────────────
+const parts = kept.map((s, i) =>
+  `[0:v]trim=start=${s.start.toFixed(3)}:end=${s.end.toFixed(3)},setpts=(PTS-STARTPTS)${s.speed === 1 ? '' : `/${s.speed}`}[v${i}]`);
+const graph = `${parts.join(';')};${kept.map((_, i) => `[v${i}]`).join('')}concat=n=${kept.length}:v=1:a=0[out]`;
+
+await run('ffmpeg', [
+  '-y', '-loglevel', 'error', '-i', input,
+  '-filter_complex', graph, '-map', '[out]',
+  '-c:v', 'libx264', '-preset', 'medium', '-crf', String(crf),
+  '-pix_fmt', 'yuv420p', '-movflags', '+faststart', output,
+]);
+console.log(`  → ${output}`);
+
+// ── 4. remap the marks onto the new timeline ───────────────────────────────────
+if (marksIn && marksOut) {
+  const remap = (t) => {
+    let acc = 0;
+    for (const s of kept) {
+      if (t >= s.end) { acc += (s.end - s.start) / s.speed; continue; }
+      if (t > s.start) return acc + (t - s.start) / s.speed;
+      return acc;
+    }
+    return acc;
+  };
+  const marks = JSON.parse(await fs.readFile(marksIn, 'utf8'));
+  const scaled = {
+    ...marks,
+    paced: { dwellSpeed, minFreeze, noise },
+    sourceDuration: marks.duration,
+    duration: newDuration,
+    beats: marks.beats.map((b) => ({ ...b, at: Number(remap(b.at).toFixed(3)) })),
+  };
+  await fs.writeFile(marksOut, JSON.stringify(scaled, null, 2) + '\n');
+  console.log(`  → ${marksOut}`);
+}
diff --git a/screencast/render/respeed.mjs b/screencast/render/respeed.mjs
new file mode 100644
index 00000000..1b463038
--- /dev/null
+++ b/screencast/render/respeed.mjs
@@ -0,0 +1,30 @@
+// Rescale a marks sidecar to match a sped-up render, so the edit list still points
+// at the right frames. A 2x video has every beat at half its original timestamp.
+//
+//   node render/respeed.mjs tracks/scene.marks.json 2 tracks/scene-2x.marks.json
+
+import fs from 'node:fs/promises';
+
+const [, , src, speedArg, dest] = process.argv;
+if (!src || !speedArg || !dest) {
+  console.error('usage: respeed.mjs <marks.json> <speed> <out.json>');
+  process.exit(2);
+}
+
+const speed = Number(speedArg);
+if (!(speed > 0)) {
+  console.error(`speed must be a positive number, got ${speedArg}`);
+  process.exit(2);
+}
+
+const marks = JSON.parse(await fs.readFile(src, 'utf8'));
+const scaled = {
+  ...marks,
+  speed,
+  sourceDuration: marks.duration,
+  duration: marks.duration / speed,
+  beats: marks.beats.map((b) => ({ ...b, at: Number((b.at / speed).toFixed(3)) })),
+};
+
+await fs.writeFile(dest, JSON.stringify(scaled, null, 2) + '\n');
+console.log(`${dest}  ${marks.beats.length} beats, ${marks.duration.toFixed(1)}s → ${scaled.duration.toFixed(1)}s at ${speed}x`);
diff --git a/screencast/render/review.mjs b/screencast/render/review.mjs
new file mode 100644
index 00000000..6d9012b4
--- /dev/null
+++ b/screencast/render/review.mjs
@@ -0,0 +1,121 @@
+// Reviewing a rendered scene.
+//
+// Three questions, answered mechanically so the loop does not rely on remembering
+// to check: did every beat actually happen, did the page end up rich, and is there
+// anything on screen worth looking at. Frames are extracted at each beat so the
+// visual check is a contact sheet rather than scrubbing.
+//
+//   node render/review.mjs <scene-id> [--doc URL] [--sheet]
+
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const argv = process.argv.slice(2);
+const id = argv.find((a) => !a.startsWith('--'));
+const opt = (n) => { const i = argv.indexOf(`--${n}`); return i === -1 ? null : argv[i + 1]; };
+
+if (!id) { console.error('usage: review.mjs <scene-id> [--doc URL] [--sheet]'); process.exit(2); }
+
+const run = (cmd, args) => new Promise((res) => {
+  const p = spawn(cmd, args);
+  let out = '', err = '';
+  p.stdout.on('data', (d) => (out += d));
+  p.stderr.on('data', (d) => (err += d));
+  p.on('error', (e) => res({ code: -1, out, err: e.message }));
+  p.on('close', (code) => res({ code, out, err }));
+});
+
+// The mp4 is paced, so its timeline is not the capture's. Frames must be pulled
+// with the remapped sidecar or every late beat lands past the end of the file —
+// which is the drift the remap exists to prevent.
+const capture = JSON.parse(await fs.readFile(path.join(ROOT, 'tracks', `${id}.marks.json`), 'utf8'));
+const pacedPath = path.join(ROOT, 'tracks', `${id}.paced.marks.json`);
+const paced = await fs.readFile(pacedPath, 'utf8').then(JSON.parse).catch(() => null);
+const marks = capture;
+const forFrames = paced ?? capture;
+
+// ── did every beat happen? ────────────────────────────────────────────────────
+const SUSPECT = /skipped|not offered|absent|would not|did not|no |lost|error|fail/i;
+const bad = marks.beats.filter((b) => b.note && SUSPECT.test(b.note));
+
+console.log(`\n${id} — ${marks.beats.length} beats over ${marks.duration.toFixed(1)}s`);
+for (const b of marks.beats) {
+  const flag = b.note && SUSPECT.test(b.note) ? '  ✗' : '   ';
+  console.log(`${flag} ${b.at.toFixed(1).padStart(6)}s  ${b.beat}${b.note ? `  — ${b.note}` : ''}`);
+}
+
+// ── gaps: a beat that took much longer than its neighbours is usually a wait ──
+const gaps = marks.beats.map((b, i) => ({ beat: b.beat, gap: i ? b.at - marks.beats[i - 1].at : b.at }))
+  .filter((g) => g.gap > 12).sort((a, b) => b.gap - a.gap);
+if (gaps.length) {
+  console.log('\n  long gaps (likely waits):');
+  for (const g of gaps.slice(0, 5)) console.log(`    ${g.gap.toFixed(1)}s before ${g.beat}`);
+}
+
+// ── did the page end up rich? ─────────────────────────────────────────────────
+const doc = opt('doc');
+if (doc) {
+  const r = await run('curl', ['-sk', '-H', 'Accept: text/turtle', '--max-time', '20', doc]);
+  const ttl = r.out;
+  const blocks = (ttl.match(/rdf-syntax-ns#_\d+/g) ?? []).length;
+  const prose = (ttl.match(/XMLLiteral/g) ?? []).length;
+  const objects = (ttl.match(/linkeddatahub#Object/g) ?? []).length;
+  const empty = (ttl.match(/<div xmlns="[^"]*"><\/div>|<p><\/p>/g) ?? []).length;
+  console.log(`\n  document: ${blocks} blocks — ${prose} prose, ${objects} object${empty ? `, ${empty} EMPTY` : ''}`);
+  if (blocks < 3) console.log('    ✗ thin: a story page wants prose and evidence interleaved');
+
+  // An Object block whose value is itself an Object block nests, and the page then
+  // renders two stacked headers for one piece of content. Every beat can pass while
+  // this is wrong, so it is checked against the source rather than trusted.
+  const values = [...ttl.matchAll(/rdf-syntax-ns#value>\s*<([^>]+)>/g)].map((m) => m[1]);
+  for (const v of values) {
+    const src = v.split('#')[0];
+    const r2 = await run('curl', ['-sk', '-H', 'Accept: text/turtle', '--max-time', '20', src]);
+    const frag = v.includes('#') ? `#${v.split('#')[1]}` : null;
+    if (!frag) continue;
+    const block = new RegExp(`<${v.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}>[\\s\\S]{0,400}`);
+    const desc = (r2.out.match(block) ?? [''])[0];
+    const isObject = /linkeddatahub#Object/.test(desc);
+    console.log(`    embeds ${frag}${isObject ? '  ✗ NESTED — this is an Object block, not the resource inside it' : '  ✓ inner resource'}`);
+  }
+}
+
+// ── something to look at ──────────────────────────────────────────────────────
+if (argv.includes('--sheet')) {
+  const mp4 = path.join(ROOT, 'tracks', `${id}.mp4`);
+  const shots = path.join(ROOT, 'tracks', `${id}-frames`);
+  await fs.mkdir(shots, { recursive: true });
+  const pick = forFrames.beats.filter((b) => !/^end$/.test(b.beat)).slice(0, 12);
+  if (paced) console.log(`  (frames from the paced timeline: ${paced.duration.toFixed(1)}s)`);
+  const files = [];
+  for (const [i, b] of pick.entries()) {
+    const f = path.join(shots, `${String(i).padStart(2, '0')}.png`);
+    await run('ffmpeg', ['-y', '-loglevel', 'error', '-ss', String(Math.max(0, b.at - 0.4)), '-i', mp4, '-frames:v', '1', '-vf', 'scale=640:-2', f]);
+    files.push(f);
+  }
+  const cols = 4;
+  const rows = Math.ceil(files.length / cols);
+  // xstack has no multiplication: a column three across is w0+w0+w0, not w0*3.
+  const axis = (n, unit) => (n ? Array(n).fill(unit).join('+') : '0');
+  const layout = files
+    .map((_, i) => `${axis(i % cols, 'w0')}_${axis(Math.floor(i / cols), 'h0')}`)
+    .join('|');
+  const sheet = path.join(ROOT, 'tracks', `${id}-sheet.png`);
+  await run('ffmpeg', ['-y', '-loglevel', 'error',
+    ...files.flatMap((f) => ['-i', f]),
+    '-filter_complex', `${files.map((_, i) => `[${i}]`).join('')}xstack=inputs=${files.length}:layout=${layout}:fill=black`,
+    sheet]);
+  console.log(`\n  contact sheet: ${path.relative(ROOT, sheet)} (${files.length} frames, ${cols}x${rows})`);
+}
+
+// A scene that died half way looks identical to one that finished, unless the
+// terminal beat is checked: every beat that ran can succeed while most never ran.
+const finished = marks.beats.some((b) => b.beat === 'end');
+const verdict = [];
+if (!finished) verdict.push('✗ ABORTED — no `end` beat, the scene did not reach its close');
+if (bad.length) verdict.push(`✗ ${bad.length} beat(s) did not do what they claim`);
+if (!verdict.length) verdict.push('✓ ran to completion, every beat reported success');
+console.log(`\n  ${verdict.join('\n  ')}\n`);
diff --git a/screencast/render/stitch.mjs b/screencast/render/stitch.mjs
new file mode 100644
index 00000000..4e466fe7
--- /dev/null
+++ b/screencast/render/stitch.mjs
@@ -0,0 +1,87 @@
+// Stitching a take's scroll into one tall still, so the camera can pan where the page
+// jumped.
+//
+// A browser scroll on camera is a 300 ms glide — too fast for the eye to follow as a
+// pan. But every frame of it shows the same page at a different offset, so the frames
+// chain into one image of the page as tall as the scroll: each frame's offset against
+// the previous is measured (the shift that makes their overlap agree), and each row of
+// the result comes from the latest frame that shows it, which also drops the fixed chrome
+// — the sticky bar and the floating button — that would otherwise repeat down the page.
+// Rows the take shows after the scroll settled come from the frame the cut resumes on,
+// so the still ends on the pixels the live footage begins with.
+//
+//   node render/stitch.mjs tracks/<take>.webm --from 19.4 --to 20.3 --resume 22.10 \
+//     --chrome 115 --out tracks/<take>.scroll.png
+//
+// The cutter reads a `.png` track as a still: `from`/`to` in seconds are the pan's span.
+import fs from 'node:fs/promises';
+import { spawn } from 'node:child_process';
+
+const argv = process.argv.slice(2);
+const src = argv.find((a) => !a.startsWith('--'));
+const opt = (n, d) => { const i = argv.indexOf(`--${n}`); return i >= 0 ? argv[i + 1] : d; };
+const from = Number(opt('from')), to = Number(opt('to')), resume = Number(opt('resume'));
+const chrome = Number(opt('chrome', 115));
+const out = opt('out', src.replace(/\.\w+$/, '.scroll.png'));
+const W = Number(opt('width', 2880)), H = Number(opt('height', 1800));
+const FPS = 25;
+
+function run(cmd, args, input) {
+  return new Promise((resolve, reject) => {
+    const p = spawn(cmd, args, { stdio: [input ? 'pipe' : 'ignore', 'pipe', 'pipe'] });
+    const chunks = []; let err = '';
+    p.stdout.on('data', (d) => chunks.push(d)); p.stderr.on('data', (d) => (err += d));
+    p.on('close', (c) => (c === 0 ? resolve(Buffer.concat(chunks)) : reject(new Error(`${cmd} failed\n${err.slice(-600)}`))));
+    if (input) { p.stdin.end(input); }
+  });
+}
+const frames = async (ss, t, pix, w, h) => {
+  const buf = await run('ffmpeg', ['-loglevel', 'error', '-ss', String(ss), '-t', String(t), '-i', src, '-vf', `scale=${w}:${h}`, '-f', 'rawvideo', '-pix_fmt', pix, '-']);
+  const size = w * h * (pix === 'gray' ? 1 : 3), n = Math.floor(buf.length / size);
+  return Array.from({ length: n }, (_, i) => buf.subarray(i * size, (i + 1) * size));
+};
+
+// The shift between two gray frames: the dy that makes b's rows agree with a's rows dy
+// further down, over the page area (chrome and the side gutters left out).
+function shift(a, b, w, h, x0, x1, y0, y1, lo, hi) {
+  let best = null;
+  for (let dy = lo; dy <= hi; dy++) {
+    const yEnd = y1 - dy; if (yEnd - y0 < h / 6) break;
+    let sum = 0, n = 0;
+    for (let y = y0; y < yEnd; y += 2) {
+      const ra = (y + dy) * w, rb = y * w;
+      for (let x = x0; x < x1; x += 2) { sum += Math.abs(a[ra + x] - b[rb + x]); n++; }
+    }
+    const err = sum / n;
+    if (!best || err < best.err) best = { dy, err };
+  }
+  return best;
+}
+
+const S = 4, w4 = W / S, h4 = H / S;
+const coarse = await frames(from, to - from, 'gray', w4, h4);
+const fine = await frames(from, to - from, 'gray', W, H);
+const offsets = [0];
+for (let i = 0; i + 1 < coarse.length; i++) {
+  const c = shift(coarse[i], coarse[i + 1], w4, h4, 75, 650, 62, 425, 0, 175);
+  const f = shift(fine[i], fine[i + 1], W, H, 300, 2600, 250, 1700, Math.max(0, c.dy * S - S), c.dy * S + S);
+  offsets.push(offsets[i] + f.dy);
+  console.log(`  ${(from + i / FPS).toFixed(2)} → ${(from + (i + 1) / FPS).toFixed(2)}: ${f.dy} px (err ${f.err.toFixed(2)}), page offset ${offsets[i + 1]}`);
+}
+const total = offsets[offsets.length - 1];
+const rgb = await frames(from, to - from, 'rgb24', W, H);
+const [resumeFrame] = await frames(resume, 1 / FPS, 'rgb24', W, H);
+const height = total + H;
+const page = Buffer.alloc(W * height * 3);
+for (let y = 0; y < height; y++) {
+  // the frame the row comes from: the resume frame once it shows the row, else the
+  // latest glide frame that does (chrome rows of a frame are never the page)
+  let f = null, off = 0;
+  if (y >= total + chrome) { f = resumeFrame; off = total; }
+  else for (let i = offsets.length - 1; i >= 0; i--) if (y >= offsets[i] + (i ? chrome : 0) && y < offsets[i] + H) { f = rgb[i]; off = offsets[i]; break; }
+  if (!f) continue;
+  f.copy(page, y * W * 3, (y - off) * W * 3, (y - off + 1) * W * 3);
+}
+await run('ffmpeg', ['-y', '-loglevel', 'error', '-f', 'rawvideo', '-pix_fmt', 'rgb24', '-s', `${W}x${height}`, '-i', '-', '-frames:v', '1', out], page);
+await fs.writeFile(out.replace(/\.png$/, '.json'), JSON.stringify({ source: src, from, to, resume, chrome, scroll: total, width: W, height }, null, 2));
+console.log(`→ ${out}  ${W}×${height}, the page scrolled ${total} px between ${from}s and ${to}s; rows from ${total + chrome} down are the frame at ${resume}s`);
diff --git a/screencast/render/supercut.json b/screencast/render/supercut.json
new file mode 100644
index 00000000..2aad039b
--- /dev/null
+++ b/screencast/render/supercut.json
@@ -0,0 +1,40 @@
+{
+  "output": "tracks/supercut.mp4",
+  "spineOutput": "tracks/supercut-spine.mp4",
+  "width": 1440,
+  "height": 900,
+  "fps": 30,
+  "crf": 20,
+  "leadSeconds": 0.3,
+  "trailSeconds": 0.1,
+  "maxZoom": 2.4,
+  "source": { "width": 2880, "height": 1800 },
+  "caption": { "font": "/System/Library/Fonts/Helvetica.ttc", "size": 44 },
+  "maxSeconds": 5,
+  "padColor": "black",
+  "vignette": "PI/5",
+  "shots": [
+    { "id": "1",   "track": "supercut-northwind-graph", "from": "1-start",  "to": "1-end",   "hold": 1.0, "caption": "one click, another document", "spine": true, "maxZoom": 2.0, "maxSeconds": 5 },
+    { "id": "1b",  "track": "supercut-northwind-graph", "from": "1b-start", "to": "1b-end",  "hold": 0.8, "caption": "every node is a page", "spine": true, "focus": false },
+    { "id": "1c",  "track": "supercut-northwind-graph", "from": "1b-end",   "to": "1b-end",  "hold": 3.2, "caption": "every node is a page", "spine": true, "focus": { "x": 825, "y": 319, "w": 1230, "h": 1378 }, "minZoom": 2.3, "move": "zoom", "push": 1.4 },
+    { "id": "1d",  "track": "supercut-northwind-graph", "from": 36.23,      "to": "1d-hop2-end", "hold": 0.8, "caption": "related results, two hops", "spine": true, "maxSeconds": 9, "focus": { "x": 825, "y": 319, "w": 1230, "h": 1378 }, "minZoom": 2.3, "move": "static" },
+    { "id": "1e",  "track": "supercut-northwind-graph", "from": "1d-hop2-end", "to": "1e-end", "fromOffset": 0.2, "hold": 0.6, "caption": "a territory, opened", "spine": true, "startFocus": { "x": 825, "y": 319, "w": 1230, "h": 1378, "minZoom": 2.3 }, "focus": { "x": 825, "y": 140, "w": 1230, "h": 880 }, "via": [], "moveSeconds": 1.4 },
+    { "id": "4a",  "track": "supercut-northwind-graph", "from": "1e-end",   "to": "4-start", "fromOffset": 0.2, "hold": 0, "caption": "forms write data", "spine": true, "startFocus": { "x": 825, "y": 140, "w": 1230, "h": 880 }, "via": [], "moveSeconds": 1.4 },
+    { "id": "4b",  "track": "supercut-northwind-graph", "from": "4-start",  "to": "4-filled", "fromOffset": 0.2, "hold": 0, "caption": "forms write data", "spine": true, "speed": 5, "maxSeconds": 6, "via": [ "4-form" ], "moveSeconds": 1.0 },
+    { "id": "4c",  "track": "supercut-northwind-graph", "from": "4-filled", "to": "4-end",   "fromOffset": 0.2, "hold": 1.2, "caption": "forms write data", "spine": true, "via": [], "moveSeconds": 1.4 },
+    { "id": "5a",  "track": "supercut-northwind-graph", "from": "4-end",    "to": "5-open",  "fromOffset": 0.2, "hold": 0.4, "caption": "the hire's own document", "spine": true, "via": [], "moveSeconds": 1.4 },
+    { "id": "5b",  "track": "supercut-northwind-graph", "from": 105.4, "to": "5-drag", "hold": 0.6, "caption": "a file, dragged onto the document", "spine": true, "focus": false, "via": [], "moveSeconds": 1.4 },
+    { "id": "5c",  "track": "supercut-northwind-graph", "from": "5-drag",   "to": "5-dropped", "fromOffset": 0.2, "hold": 0.8, "caption": "dropped: uploaded, embedded", "spine": true, "startFocus": { "x": 0, "y": 0, "w": 2880, "h": 1800, "minZoom": 1 }, "via": [], "moveSeconds": 1.4 },
+    { "id": "5d",  "track": "supercut-northwind-graph", "from": "5-dropped", "to": "5-linked", "fromOffset": 0.2, "hold": 1.0, "caption": "picked as her image", "spine": true, "speed": 3, "maxSeconds": 7, "via": [ "5-edit", "5-picked" ], "moveSeconds": 1.2 },
+    { "id": "5e",  "track": "supercut-northwind-graph", "from": "5-linked", "to": "5-back",  "fromOffset": 0.2, "hold": 1.2, "caption": "the territory, one face richer", "spine": true, "via": [], "moveSeconds": 1.4 },
+    { "id": "1f",  "track": "supercut-northwind-graph", "from": "5-back",    "to": "end",     "fromOffset": 0.2, "hold": 1.0, "caption": "up to Sales territories", "spine": true, "focus": { "x": 825, "y": 160, "w": 1230, "h": 990 }, "via": [ { "beat": "1f-start", "focus": { "x": 560, "y": 40, "w": 900, "h": 100 } } ], "moveSeconds": 1.4, "minZoom": 1.4 },
+    { "id": "c1",  "track": "supercut-compose", "from": "c1-start",  "to": "c1-typed", "toOffset": 0.15, "hold": 0.6, "caption": "a query…", "spine": true, "speed": 2, "maxSeconds": 5, "focus": { "x": 690, "y": 500, "w": 1800, "h": 900 }, "minZoom": 1.6, "move": "zoom", "push": 1.0 },
+    { "id": "c1s", "track": "supercut-compose", "from": "c1-typed",  "fromOffset": 0.45, "to": "c1-save", "hold": 0, "caption": "a query…", "spine": true, "speed": 1.5, "maxSeconds": 8, "startFocus": { "x": 690, "y": 500, "w": 1800, "h": 900, "minZoom": 1.6 }, "via": [ { "beat": "c1-scrolled", "focus": { "x": 1400, "y": 150, "w": 1200, "h": 800 } } ], "moveSeconds": 1.4 },
+    { "id": "c1r", "track": "supercut-compose", "from": "c1-save",   "fromOffset": 0.2, "to": "c1-end", "hold": 0.6, "caption": "…and its results", "spine": true, "maxSeconds": 6, "via": [ { "beat": "c1-save", "offset": 1.0, "focus": { "x": 208, "y": 40, "w": 2464, "h": 1603, "minZoom": 1.4 } } ], "moveSeconds": 1.0 },
+    { "id": "c2",  "track": "supercut-compose", "from": "c2-start",  "fromOffset": 0.2, "to": "c2-end", "hold": 0.3, "caption": "a chart from it", "spine": true, "speed": 3, "maxSeconds": 6, "via": [ "c2-drawn" ], "moveSeconds": 1.4 },
+    { "id": "c3t", "track": "supercut-compose", "from": "c2-end",    "fromOffset": 0.2, "to": "c3t-end", "hold": 0, "caption": "Content mode", "spine": true, "maxSeconds": 8, "via": [ "c3t-start" ], "focus": { "x": 230, "y": 230, "w": 2440, "h": 1530, "minZoom": 1.1, "pad": 0 }, "moveSeconds": 1.4 },
+    { "id": "c3",  "track": "supercut-compose", "from": "c3t-end",   "fromOffset": 0.2, "to": "c3-end", "hold": 0.4, "caption": "a sentence, on the page", "spine": true, "speed": 2.5, "maxSeconds": 6, "startFocus": { "x": 230, "y": 230, "w": 2440, "h": 1530, "minZoom": 1.1, "pad": 0 }, "focus": { "x": 230, "y": 230, "w": 2440, "h": 1530, "minZoom": 1.1, "pad": 0 }, "via": [] },
+    { "id": "c4",  "track": "supercut-compose", "from": "c3-end",    "fromOffset": 0.2, "to": "c4-end", "hold": 0.8, "caption": "the chart, embedded", "spine": true, "speed": 3, "maxSeconds": 6, "startFocus": { "x": 230, "y": 230, "w": 2440, "h": 1530, "minZoom": 1.1, "pad": 0 }, "focus": { "x": 230, "y": 230, "w": 2440, "h": 1530, "minZoom": 1.1, "pad": 0 }, "via": [] },
+    { "id": "c5",  "track": "supercut-compose", "from": "c4-end",    "fromOffset": 0.2, "to": "c5-end", "hold": 2.0, "caption": "drag it into place", "spine": true, "maxSeconds": 8, "startFocus": { "x": 230, "y": 230, "w": 2440, "h": 1530, "minZoom": 1.1, "pad": 0 }, "focus": { "x": 230, "y": 230, "w": 2440, "h": 1530, "minZoom": 1.1, "pad": 0 }, "via": [] }
+  ]
+}
diff --git a/screencast/render/supercut.mjs b/screencast/render/supercut.mjs
new file mode 100644
index 00000000..453ef191
--- /dev/null
+++ b/screencast/render/supercut.mjs
@@ -0,0 +1,309 @@
+// Cutting the supercut from gesture takes.
+//
+// A shot is the stretch of a track between two beats named in its marks sidecar (or
+// seconds), plus an optional hold on the last frame so a result sits on screen. Each
+// shot is trimmed from the raw .webm at real speed, scaled to one frame size, given
+// its caption (same box on every shot), then the shots are joined with a short
+// crossfade. Two renders from one list: every shot, and the spine (shots flagged
+// `spine`). A sidecar records each shot's in/out on the final timeline.
+//
+//   node render/supercut.mjs [render/supercut.json] [--spine-only] [--no-spine]
+
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+
+const argv = process.argv.slice(2);
+const cfgPath = argv.find((a) => !a.startsWith('--')) ?? 'render/supercut.json';
+const cfg = JSON.parse(await fs.readFile(cfgPath, 'utf8'));
+const TRACKS = 'tracks';
+const TMP = path.join(TRACKS, '.supercut');
+await fs.mkdir(TMP, { recursive: true });
+
+function run(cmd, args) {
+  return new Promise((resolve, reject) => {
+    const p = spawn(cmd, args, { stdio: ['ignore', 'pipe', 'pipe'] });
+    let err = '';
+    p.stderr.on('data', (d) => (err += d));
+    p.on('close', (code) => (code === 0 ? resolve() : reject(new Error(`${cmd} ${args.slice(0, 6).join(' ')}…\n${err.slice(-800)}`))));
+  });
+}
+const esc = (s) => s.replace(/\\/g, '\\\\').replace(/:/g, '\\:').replace(/'/g, "\\'");
+
+const marksCache = new Map();
+async function beat(track, ref) {
+  if (typeof ref === 'number') return { at: ref };
+  if (!marksCache.has(track)) marksCache.set(track, JSON.parse(await fs.readFile(path.join(TRACKS, `${track}.marks.json`), 'utf8')));
+  // a beat marked twice (a retaken step) counts from its last mark
+  const b = marksCache.get(track).beats.findLast((x) => x.beat === ref);
+  if (!b) throw new Error(`${track}: no beat ${ref}`);
+  return b;
+}
+const beatTime = async (track, ref) => (await beat(track, ref)).at;
+
+// Framing. A focus box becomes a crop frame: padded, held to the output aspect, never
+// closer than `maxZoom` nor wider than `minZoom` allows, anchored on the box's top part
+// when the box is taller than the frame (its header and first rows are there).
+// `points` are pointer positions the frame must contain (the click at either end of
+// the shot): the box widens to take them in, and a frame zoomed past 1.6× is centred
+// on the last of them — the click — rather than on the block.
+function frameFor(box, W, H, { maxZoom = 2.4, minZoom = 1.4, pad = 0.1 } = {}, points = [], bounds = { W, H }) {
+  const pts = points.filter((p) => p && Number.isFinite(p.x) && Number.isFinite(p.y));
+  if (!box && !pts.length) return { w: W, h: H, cx: W / 2, cy: H / 2 };
+  if (!box) return { w: W, h: H, cx: W / 2, cy: H / 2 };
+  const R = 70;
+  for (const p of pts) {
+    const x1 = Math.min(box.x, p.x - R), y1 = Math.min(box.y, p.y - R), x2 = Math.max(box.x + box.w, p.x + R), y2 = Math.max(box.y + box.h, p.y + R);
+    box = { x: x1, y: y1, w: x2 - x1, h: y2 - y1 };
+  }
+  let w = box.w * (1 + 2 * pad), h = box.h * (1 + 2 * pad);
+  if (w / h > W / H) h = w * H / W; else w = h * W / H;
+  w = Math.max(w, W / maxZoom); h = Math.max(h, H / maxZoom);
+  w = Math.min(w, W); h = Math.min(h, H);
+  let cy = box.y + box.h / 2;
+  if (W / w < minZoom) { w = W / minZoom; h = H / minZoom; }
+  if (box.h > h) cy = box.y + h * 0.45;
+  let cx = box.x + box.w / 2;
+  if (pts.length && W / w >= 1.6) { const p = pts[pts.length - 1]; cx = p.x; cy = p.y; }
+  cx = Math.min(Math.max(cx, w / 2), bounds.W - w / 2); cy = Math.min(Math.max(cy, h / 2), bounds.H - h / 2);
+  return { w, h, cx, cy };
+}
+// A crop that moves from frame A to frame B, smoothstepped over `T` seconds starting at
+// `t0`, expressed in the crop filter's own `t` so it costs nothing to render. The push-in
+// is A = the full frame, t0 = 0; a pan is A = one block, B = the next; a static frame is
+// A = B.
+function cropBetween(A, B, t0, T) {
+  const f = (v) => v.toFixed(1);
+  const u = `((t-${f(t0)})/${f(Math.max(0.01, T))})`;
+  const k = `(if(lt(t,${f(t0)}),0,if(lt(t,${f(t0 + T)}),(3*pow(${u},2)-2*pow(${u},3)),1)))`;
+  const lerp = (a, b) => `(${f(a)}+(${f(b)}-${f(a)})*${k})`;
+  const cw = lerp(A.w, B.w), ch = lerp(A.h, B.h), cx = lerp(A.cx, B.cx), cy = lerp(A.cy, B.cy);
+  return `crop=w='${cw}':h='${ch}':x='${cx}-${cw}/2':y='${cy}-${ch}/2'`;
+}
+// A crop that passes through several frames — the block, the control about to be
+// clicked, the result — each reached by a smoothstep move of `M` seconds ending at its
+// keyframe time (the beat where the pointer arrived), and held until the next move.
+function cropPath(keys, M) {
+  const f = (v) => v.toFixed(1);
+  const lerp = (a, b, k) => `(${f(a)}+(${f(b)}-${f(a)})*${k})`;
+  const dim = (name) => {
+    let expr = f(keys[keys.length - 1].F[name]);
+    for (let i = keys.length - 2; i >= 0; i--) {
+      const t1 = keys[i + 1].t, m = Math.max(0.01, Math.min(M, t1 - keys[i].t));
+      const u = `(max(0,min(1,(t-${f(t1 - m)})/${f(m)})))`;
+      const k = `(3*pow(${u},2)-2*pow(${u},3))`;
+      expr = `if(lt(t,${f(t1)}),${lerp(keys[i].F[name], keys[i + 1].F[name], k)},${expr})`;
+    }
+    return expr;
+  };
+  const cw = dim('w'), ch = dim('h'), cx = dim('cx'), cy = dim('cy');
+  return `crop=w='${cw}':h='${ch}':x='${cx}-${cw}/2':y='${cy}-${ch}/2'`;
+}
+// A zoom: the frame closes from A onto B over `T` seconds from `t0`, the zoom factor
+// and the centre both on the smoothstep, then holds B. A crop's size is fixed for the
+// stream (only its position is evaluated per frame, so `cropBetween` slides at the end
+// zoom); zoompan scales a shrinking window, so the block grows in place. The window's
+// aspect is the source's, and the output is the frame size, so nothing is rescaled after.
+function zoomBetween(A, B, t0, T, W, fps, out) {
+  const f = (v) => v.toFixed(3);
+  const u = `(max(0,min(1,(in/${fps}-${f(t0)})/${f(Math.max(0.01, T))})))`;
+  const k = `(3*pow(${u},2)-2*pow(${u},3))`;
+  const lerp = (a, b) => `(${f(a)}+(${f(b)}-${f(a)})*${k})`;
+  const z = lerp(W / A.w, W / B.w), cx = lerp(A.cx, B.cx), cy = lerp(A.cy, B.cy);
+  return `fps=${fps},zoompan=z='${z}':x='${cx}-iw/(2*zoom)':y='${cy}-ih/(2*zoom)':d=1:s=${out.width}x${out.height}:fps=${fps}`;
+}
+// The same path on zoompan: zoom factor and centre both move between the keyframes, so a
+// tight frame on a control and a wide one on the block it belongs to are really
+// different sizes on screen (cropPath keeps the last key's size and slides).
+function zoomPath(keys, M, W, fps, out) {
+  const f = (v) => v.toFixed(3);
+  const t = `(in/${fps})`;
+  const lerp = (a, b, k) => `(${f(a)}+(${f(b)}-${f(a)})*${k})`;
+  const val = (F, name) => (name === 'z' ? W / F.w : F[name]);
+  const dim = (name) => {
+    let expr = f(val(keys[keys.length - 1].F, name));
+    for (let i = keys.length - 2; i >= 0; i--) {
+      const t1 = keys[i + 1].t, m = Math.max(0.01, Math.min(M, t1 - keys[i].t));
+      const u = `(max(0,min(1,(${t}-${f(t1 - m)})/${f(m)})))`;
+      const k = `(3*pow(${u},2)-2*pow(${u},3))`;
+      expr = `if(lt(${t},${f(t1)}),${lerp(val(keys[i].F, name), val(keys[i + 1].F, name), k)},${expr})`;
+    }
+    return expr;
+  };
+  return `fps=${fps},zoompan=z='${dim('z')}':x='${dim('cx')}-iw/(2*zoom)':y='${dim('cy')}-ih/(2*zoom)':d=1:s=${out.width}x${out.height}:fps=${fps}`;
+}
+async function duration(file) {
+  return new Promise((resolve, reject) => {
+    const p = spawn('ffprobe', ['-v', 'error', '-show_entries', 'format=duration', '-of', 'csv=p=0', file]);
+    let out = ''; p.stdout.on('data', (d) => (out += d));
+    p.on('close', (c) => (c === 0 ? resolve(Number(out.trim())) : reject(new Error('ffprobe failed'))));
+  });
+}
+
+// The caption as a transparent PNG the size of the frame, rendered by the same browser
+// the takes were made with: white bold text in a translucent black box, bottom-left.
+let browser = null;
+async function renderCaption(text, out) {
+  const { chromium } = await import('playwright');
+  browser ??= await chromium.launch();
+  const page = await browser.newPage({ viewport: { width: cfg.width, height: cfg.height }, deviceScaleFactor: 1 });
+  const size = cfg.caption?.size ?? 44;
+  await page.setContent(`<body style="margin:0;background:transparent"><div style="position:fixed;left:48px;bottom:48px;padding:14px 22px;border-radius:12px;background:rgba(0,0,0,.62);color:#fff;font:700 ${size}px -apple-system,Helvetica,Arial,sans-serif;letter-spacing:-.01em">${text.replace(/&/g, '&amp;').replace(/</g, '&lt;')}</div></body>`);
+  await page.screenshot({ path: out, omitBackground: true });
+  await page.close();
+}
+
+async function cutShot(shot) {
+  // a mock renders straight to .mp4; a recording is a .webm; a stitched page
+  // (render/stitch.mjs) is a .png still, and `from`/`to` are then the pan's span in seconds
+  let src = path.join(TRACKS, `${shot.track}.webm`);
+  if (!(await fs.access(src).then(() => true, () => false))) src = path.join(TRACKS, `${shot.track}.mp4`);
+  if (!(await fs.access(src).then(() => true, () => false))) src = path.join(TRACKS, `${shot.track}.png`);
+  const still = src.endsWith('.png');
+  const exists = await fs.access(src).then(() => true, () => false);
+  if (!exists) { if (shot.optional) { console.log(`  skip ${shot.id}: no ${src}`); return null; } throw new Error(`missing ${src}`); }
+  // A beat and its gesture (or teardown) are the same instant, so the frame AT a beat
+  // is already the next state: lead in a little before `from`, stop a little before `to`.
+  const same = shot.from === shot.to;
+  let bFrom, bTo;
+  try { bFrom = await beat(shot.track, shot.from); bTo = await beat(shot.track, shot.to); }
+  catch (e) { if (shot.optional) { console.log(`  skip ${shot.id}: ${e.message}`); return null; } throw e; }
+  // `fromOffset` / `toOffset` shift a shot's ends in seconds (a negative `toOffset`
+  // ends a shot before its beat, where a helper's settle after the result is dead air).
+  let from = still ? bFrom.at : Math.max(0, bFrom.at - (same ? 0 : (cfg.leadSeconds ?? 0.3)) + (shot.fromOffset ?? 0));
+  const to = still ? bTo.at : same ? from : bTo.at - (cfg.trailSeconds ?? 0.1) + (shot.toOffset ?? 0);
+  // A gesture that took longer than a shot should keeps its end — the result — and
+  // loses its beginning.
+  // `speed` plays the gesture faster than it was made (typing a query at 2×); the cap
+  // is on screen time, so a sped shot keeps more of the take.
+  const speed = shot.speed ?? 1;
+  const max = shot.maxSeconds ?? cfg.maxSeconds ?? 6;
+  if ((to - from) / speed > max) from = to - max * speed;
+  // The focus: the end beat's box (where the result is), else the start beat's. A shot
+  // may carry its own box (`focus: {x, y, w, h}` in take pixels) where the take's beat
+  // marked none — measured off the frame, until the scene marks it.
+  const ownBox = shot.focus && typeof shot.focus === 'object' ? shot.focus : null;
+  const box = shot.focus === false ? null : (ownBox ?? bTo.focus ?? bFrom.focus ?? null);
+  const hold = shot.hold ?? 0;
+  const out = path.join(TMP, `${shot.id}.mp4`);
+  const { width, height, fps, crf } = cfg;
+  const filters = [];
+  if (speed !== 1) filters.push(`setpts=PTS/${speed}`);
+  if (to > from && hold > 0 && !still) filters.push(`tpad=stop_mode=clone:stop_duration=${hold}`);
+  // Source frames are the take's own size (2880×1800 for 2× takes); the push-in crops
+  // in source pixels, then everything is scaled to the output frame.
+  const srcSize = shot.source ?? cfg.source ?? { width: 2880, height: 1800 };
+  // The push runs the whole shot (gesture + hold), never a lunge-then-hold.
+  const total = (to > from ? (to - from) / speed : 0) + hold;
+  // Framing: `move` is "push" (the end box's frame, slid into from the page's top-left
+  // over `push` seconds), "zoom" (the full frame closes straight onto the end box over
+  // `push` seconds, a true zoom), "static" (the end box's frame throughout) or "pan"
+  // (from the start beat's box to the end beat's, over `moveSeconds` starting `moveAt`
+  // seconds in — negative counts back from the end of the gesture, where the new block
+  // has just appeared).
+  if (box) {
+    // Frames are the take's viewport: its aspect is the output's, and zoom is relative to
+    // its width. A stitched still is taller than the viewport, so its frames are clamped
+    // to the still's bounds and the still is padded out to the viewport's aspect before
+    // zoompan, whose window takes the shape of its input.
+    const view = shot.viewport ?? (still ? cfg.source : null) ?? srcSize;
+    const W = view.width, H = view.height;
+    const bounds = { W: srcSize.width, H: srcSize.height };
+    const canvas = { W: Math.max(bounds.W, Math.round(bounds.H * W / H)), H: Math.max(bounds.H, Math.round(bounds.W * H / W)) };
+    const padX = Math.round((canvas.W - bounds.W) / 2), padY = Math.round((canvas.H - bounds.H) / 2);
+    if (padX || padY) filters.push(`pad=${canvas.W}:${canvas.H}:${padX}:${padY}:color=${cfg.padColor ?? 'black'}`);
+    const onCanvas = (F) => ({ ...F, cx: F.cx + padX, cy: F.cy + padY });
+    const limits = { maxZoom: shot.maxZoom ?? cfg.maxZoom ?? 2.4, minZoom: shot.minZoom ?? cfg.minZoom ?? 1.4, pad: shot.pad ?? 0.1 };
+    // Pointer positions ride in the sidecar but only shape the frame when a shot asks
+    // (`keepPointer: true`): unioning them into every frame pushed the crops out to the
+    // full frame and flattened the pans. Keep the click inside the block by scene
+    // design instead — the cursor travels within the framed block.
+    const pFrom = shot.keepPointer ? bFrom.pointer ?? null : null, pTo = shot.keepPointer ? bTo.pointer ?? null : null;
+    const move = shot.move ?? 'push';
+    // a shot-level box may carry its own `minZoom` / `maxZoom` / `pad`, so a shot can start
+    // on the tight frame the previous one held and land on a wider one (or the reverse)
+    const limitsFor = (b) => ({ ...limits, ...(b && b.minZoom != null ? { minZoom: b.minZoom } : {}), ...(b && b.maxZoom != null ? { maxZoom: b.maxZoom } : {}), ...(b && b.pad != null ? { pad: b.pad } : {}) });
+    const B = frameFor(box, W, H, limitsFor(ownBox), move === 'pan' ? [pTo] : [pFrom, pTo], bounds);
+    // `via`: beats inside the shot whose focus boxes the crop passes through — the
+    // control the pointer reaches before a click — each on its own smooth move. An entry
+    // may be a keyframe the take did not mark, `{ at, focus }` in take seconds and pixels.
+    // `startFocus` is the first frame's box where the start beat's is stale (the page
+    // scrolled since it was marked).
+    // (an empty `via` is the plain path: the start box, then one move onto the end box)
+    if (Array.isArray(shot.via)) {
+      const A = frameFor(shot.startFocus ?? bFrom.focus ?? box, W, H, limitsFor(shot.startFocus), [], bounds);
+      const viaLimits = { ...limits, maxZoom: shot.viaZoom ?? Math.max(limits.maxZoom, 1.6), minZoom: 1 };
+      const keys = [{ t: 0, F: onCanvas(A) }];
+      for (const name of shot.via) {
+        // `{ beat, focus, offset }`: a marked beat's time (plus `offset` seconds) with a box
+        // the take did not carry for it — the frame to reach a moment after a click, say
+        const b = typeof name === 'object' ? (name.beat ? await beat(shot.track, name.beat).then((x) => ({ ...x, at: x.at + (name.offset ?? 0), focus: name.focus ?? x.focus })).catch(() => null) : name) : await beat(shot.track, name).catch(() => null);
+        if (!b || !b.focus) { console.log(`  ${shot.id}: via ${name} missing, skipped`); continue; }
+        const t = (b.at - from) / speed;
+        if (t <= 0 || t >= (to > from ? (to - from) / speed : 0)) continue;
+        // a via box may carry its own floor too (`minZoom` on the box), e.g. to land on the
+        // frame the shot ends on and hold there
+        keys.push({ t, F: onCanvas(frameFor(b.focus, W, H, { ...viaLimits, ...(b.focus.minZoom != null ? { minZoom: b.focus.minZoom } : {}), ...(b.focus.maxZoom != null ? { maxZoom: b.focus.maxZoom } : {}), ...(b.focus.pad != null ? { pad: b.focus.pad } : {}) }, [], bounds)) });
+      }
+      keys.push({ t: to > from ? (to - from) / speed : 0.01, F: onCanvas(B) });
+      filters.push(zoomPath(keys, shot.moveSeconds ?? cfg.viaSeconds ?? 1.0, canvas.W, fps, { width, height }));
+    } else if (move === 'static') filters.push(zoomBetween(onCanvas(B), onCanvas(B), 0, 0.01, canvas.W, fps, { width, height }));
+    else if (move === 'zoom') filters.push(zoomBetween(onCanvas({ w: W, h: H, cx: W / 2, cy: H / 2 }), onCanvas(B), 0, shot.push ?? Math.max(0.8, total), canvas.W, fps, { width, height }));
+    else if (move === 'pan') {
+      const A = frameFor(bFrom.focus ?? box, W, H, limits, [pFrom]);
+      // a move between blocks is gradual — the eye travelling down the page, never a jump
+      const T = shot.moveSeconds ?? cfg.moveSeconds ?? 1.4;
+      const gesture = to > from ? (to - from) / speed : 0;
+      let t0 = shot.moveAt ?? -(T + 0.2);
+      if (t0 < 0) t0 = Math.max(0, gesture + t0);
+      filters.push(cropBetween(A, B, t0, T));
+    } else filters.push(cropBetween({ w: W, h: H, cx: W / 2, cy: H / 2 }, B, 0, shot.push ?? Math.max(0.8, total)));
+  }
+  filters.push(`scale=${width}:${height}:force_original_aspect_ratio=decrease`, `pad=${width}:${height}:(ow-iw)/2:(oh-ih)/2:color=${cfg.padColor ?? 'black'}`, `fps=${fps}`);
+  if (cfg.vignette) filters.push(`vignette=angle=${cfg.vignette}`);
+  if (!filters.length) filters.push('null');
+  // The caption is a PNG the size of the frame (this ffmpeg has no drawtext), laid over
+  // the scaled video with the overlay filter.
+  let capPng = null;
+  if (shot.caption) {
+    capPng = path.join(TMP, `${shot.id}.caption.png`);
+    await renderCaption(shot.caption, capPng);
+  }
+  // A keyframe at the start of every clip and one timescale, so the concat cuts clean.
+  const enc = ['-an', '-c:v', 'libx264', '-preset', 'medium', '-crf', String(crf), '-pix_fmt', 'yuv420p', '-g', String(fps), '-force_key_frames', 'expr:eq(n,0)', '-video_track_timescale', '90000'];
+  const graph = (vf) => capPng ? ['-filter_complex', `[0:v]${vf}[b];[b][1:v]overlay=0:0:format=auto[v]`, '-map', '[v]'] : ['-vf', vf];
+  const capIn = capPng ? ['-i', capPng] : [];
+  if (to > from) {
+    // a still loops for the pan and its hold; a take is trimmed between its beats
+    const input = still ? ['-loop', '1', '-t', String(total), '-i', src] : ['-ss', String(from), '-to', String(to), '-i', src];
+    await run('ffmpeg', ['-y', '-loglevel', 'error', ...input, ...capIn, ...graph(filters.join(',')), ...enc, out]);
+  } else {
+    // a held frame: extract it, then loop it for `hold` seconds
+    const png = path.join(TMP, `${shot.id}.png`);
+    await run('ffmpeg', ['-y', '-loglevel', 'error', '-ss', String(from), '-i', src, '-frames:v', '1', png]);
+    const still = filters.filter((f) => !f.startsWith('tpad')).join(',');
+    await run('ffmpeg', ['-y', '-loglevel', 'error', '-loop', '1', '-t', String(hold), '-i', png, ...capIn, ...graph(still), ...enc, out]);
+  }
+  const len = await duration(out);
+  console.log(`  ${shot.id.padEnd(3)} ${shot.track} ${String(shot.from).padEnd(9)} → ${String(shot.to).padEnd(8)} ${((to - from) / speed).toFixed(2)}s${speed !== 1 ? ' at ' + speed + '×' : ''} + ${hold}s hold = ${len.toFixed(2)}s${shot.caption ? '  "' + shot.caption + '"' : ''}`);
+  return { ...shot, file: out, len };
+}
+
+async function join(shots, output) {
+  // Hard cuts through the concat demuxer: one decoder at a time, so fifteen shots do
+  // not mean fifteen decoders in memory (a single xfade graph over all inputs was
+  // killed for memory). Every clip shares size, fps, codec and pixel format.
+  const list = path.join(TMP, `${path.basename(output, '.mp4')}.txt`);
+  await fs.writeFile(list, shots.map((s) => `file '${path.resolve(s.file)}'`).join('\n') + '\n');
+  await run('ffmpeg', ['-y', '-loglevel', 'error', '-f', 'concat', '-safe', '0', '-i', list, '-c', 'copy', '-movflags', '+faststart', output]);
+  let t = 0; const timeline = [];
+  for (const s of shots) { timeline.push({ id: s.id, in: Number(t.toFixed(3)), out: Number((t + s.len).toFixed(3)), caption: s.caption ?? null }); t += s.len; }
+  await fs.writeFile(output.replace(/\.mp4$/, '.marks.json'), JSON.stringify({ output, duration: Number(t.toFixed(3)), shots: timeline }, null, 2));
+  console.log(`→ ${output}  ${t.toFixed(1)}s, ${shots.length} shots`);
+}
+
+const cut = [];
+for (const shot of cfg.shots) { const c = await cutShot(shot); if (c) cut.push(c); }
+if (!argv.includes('--spine-only')) await join(cut, cfg.output);
+if (!argv.includes('--no-spine')) await join(cut.filter((s) => s.spine), cfg.spineOutput);
+if (browser) await browser.close();
diff --git a/screencast/scenes/02-where-we-have-nobody.mjs b/screencast/scenes/02-where-we-have-nobody.mjs
new file mode 100644
index 00000000..8c1101d7
--- /dev/null
+++ b/screencast/scenes/02-where-we-have-nobody.mjs
@@ -0,0 +1,281 @@
+// "Where do we have nobody?"
+//
+// Opens on the territory map — 53 pins, already plotted, because /territories/ carries
+// ac:MapMode on its view. That is the strongest frame the dataspace has and it is also
+// the honest first step of the question, so nothing is lifted to the front.
+//
+// The answer is an absence, and an absence is the one thing a facet cannot show: a
+// facet filters by a relation that exists. So the question becomes a query, the query
+// becomes a view, and the view is rendered as a map — four pins where there were
+// fifty-three. Verified against the instance before scripting:
+//
+//   53 territories, 49 with a rep
+//   uncovered: Austin, Bentonville, Columbia, Dallas — all four in Southern,
+//   which is half of that region's eight
+//
+//   make scene SCENE=02-where-we-have-nobody BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle } from '../lib/fixture.mjs';
+import { crumbGo, listGo, searchGo } from '../lib/nav.mjs';
+import { addProse, addObject, pickByLabel, switchDocumentMode } from '../lib/blocks.mjs';
+import { create, createItem, createFromView, typeQuery, fill, save, field } from '../lib/constructors.mjs';
+import { editResource, addValue, pickAddedValue, saveForm } from '../lib/editing.mjs';
+import { findMarkers, openMarker } from '../lib/map.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OPENS_ON = `${base}/territories/`;
+
+// Unindented: the editor supplies the indentation, and supplying our own doubles it.
+//
+// The territory RESOURCE is selected, not just its name, because the map plots what
+// the results point at — and all four carry geo:lat/geo:long, checked before scripting.
+const QUERY = `PREFIX schema: <https://schema.org/>
+
+SELECT ?territory ?name
+WHERE {
+GRAPH ?g {
+?territory a schema:City ;
+schema:name ?name .
+}
+FILTER NOT EXISTS {
+GRAPH ?h {
+?rep schema:areaServed ?territory .
+}
+}
+}
+ORDER BY ?name`;
+
+const REP = 'Reyes';
+const TITLE = 'Where we have nobody';
+// Last take's write-up document is removed off camera, by title — the document is
+// created ON camera below, so its path is a UUID and there is no slug to reset by.
+const gone = await deleteByTitle({
+  ldh: opts.ldh, base, certFile: opts.certFile,
+  certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile,
+  title: TITLE,
+});
+console.log(`cleanup: removed ${gone.removed.length} earlier "${TITLE}"`);
+const goneRep = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: REP });
+console.log(`cleanup: removed ${goneRep.removed.length} earlier "${REP}"`);
+// The sequels create territories with nobody on them (Houston, Boise); they are shot
+// after this scene, and they go before it runs, so the hole is the dataset's own four.
+for (const t of ['Houston', 'Boise']) {
+  const g = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: t });
+  console.log(`cleanup: removed ${g.removed.length} earlier "${t}"`);
+}
+// The sequel (09-opening-houston) adds a territory; this scene's fifty-three is only
+// true without it, so it goes too, off camera.
+let url = null;
+
+await runScene({
+  id: '02-where-we-have-nobody',
+  target: OPENS_ON,
+  warm: OPENS_ON,
+  identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks, base }) {
+    // ── the ground, already plotted ─────────────────────────────────────────
+    // The beat fires the moment the map has painted, not after a dwell — that is what
+    // makes the head trim a measurement rather than a guess.
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-view-toolbar .right .count b', { timeout: 25_000 }).catch(() => {});
+    await page.waitForSelector('.ol-viewport canvas', { timeout: 25_000 }).catch(() => {});
+    const total = (await page.locator('.ldh-view-toolbar .right .count b').first()
+      .textContent().catch(() => '53')).trim();
+    await marks.beat('map', `every territory Northwind covers: ${total}`);
+    await sleep(2400);
+
+    // ── drill into one pin ──────────────────────────────────────────────────
+    // The map is the instrument, not the scenery: a pin is the shortest route to the
+    // record behind it, and the popup it opens carries that territory's own links —
+    // including the region it belongs to, which is the dimension the answer lands on.
+    const found = await findMarkers(page);
+    const label = found.markers ? await openMarker(page, cursor, found.markers) : null;
+    // The popup text runs the title into its type chip and icon ligatures, so the
+    // heading anchor is asked for the name rather than scraping that string.
+    // Short leash on every read: textContent() against a locator that matches nothing
+    // waits the default 30s, and four of those is two minutes of a take spent
+    // discovering the obvious.
+    const pinName = await page.locator('.ol-overlay-container a[title*="/territories/"]').first()
+      .textContent({ timeout: 4000 }).catch(() => null);
+    await marks.beat('one', pinName ? `${pinName.trim()} — one of the fifty-three` : (found.error ?? 'no marker opened'));
+    await sleep(1500);
+
+    // ── and out again, into its region ──────────────────────────────────────
+    // Territories are grouped, and the popup links straight through to the grouping.
+    // Backlinks was the other candidate here and is the wrong instrument: on a
+    // territory it answers with the content blocks that reference it, not with the rep
+    // — because the rep→territory link is schema:areaServed and points the other way,
+    // which is the same asymmetry that makes the gap unfacetable a moment later.
+    const regionLink = page.locator('.ol-overlay-container a[title*="/regions/"]').first();
+    const hasRegion = (await regionLink.count()) > 0;
+    let region = null;
+    if (hasRegion) {
+      await cursor.click(regionLink);
+      await page.waitForLoadState('load').catch(() => {});
+      await sleep(3600);
+      // The document title, not a heading: it is set from dct:title and reading it
+      // costs nothing, where guessing at the heading element costs a timeout.
+      region = (await page.title().catch(() => ''))
+        .replace(/\s*[|–-]\s*Northwind Traders\s*$/i, '').trim() || null;
+    }
+    await marks.beat('region', region
+      ? `${region} — and territories are grouped into four of these`
+      : hasRegion ? 'followed the region link, could not read the title' : 'the popup carried no region link');
+    await sleep(1400);
+
+    // ── the question a facet cannot answer ──────────────────────────────────
+    // Facets filter by a relation that exists. "Nobody serves this" is the absence of
+    // one, so it has to be asked as a query. Properties, because the Create menu is
+    // mode-gated and ContentMode offers only the two block types.
+    // The question goes down first: everything after it is a query editor, and a
+    // viewer who has not been told what is being asked is watching SPARQL for no
+    // stated reason.
+    // From the region page, up to Root by breadcrumb, then Create ▸ Item. The write-up
+    // page comes into existence where the viewer can see it come from.
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+
+    const p1 = await addProse(page, cursor, type,
+      'The territory map plots all fifty-three places Northwind sells into. Each rep is linked to the territories they serve, and the link runs from the rep. A territory nobody serves has no such link, so no facet and no map will single it out. This page finds them with a query, and then puts somebody on them.');
+    await marks.beat('question', p1.ok ? 'why the map cannot answer this' : p1.why);
+    // Held before the mode switcher opens: its popover lands on top of this sentence,
+    // and a reader needs the sentence more than the menu.
+    await sleep(3200);
+
+    await switchDocumentMode(page, cursor, 'read-mode');
+    await sleep(600);
+
+    const cs = await create(page, cursor, 'SELECT');
+    await marks.beat('new-select', cs.ok ? 'a SELECT, created on this document' : cs.why);
+    await sleep(400);
+
+    if (cs.ok) {
+      const q = await typeQuery(page, cursor, QUERY);
+      await marks.beat('query', q.ok ? `the absence, as SPARQL — ${q.lines} lines${q.verified ? ', read back and matching' : ''}` : q.why);
+      await sleep(700);
+      const t = await fill(page, cursor, 'Title', 'Uncovered territories');
+      await marks.beat('title', t.ok ? 'Uncovered territories' : t.why);
+      const s = await save(page, cursor);
+      await marks.beat('save-select', s.ok ? 'saved — four rows' : s.why);
+      await sleep(1000);
+    }
+
+    // ── the same four, as a map ─────────────────────────────────────────────
+    // These rows ARE resources — the query selects the territory itself — so this is
+    // view material rather than chart material, and a view carries a layout mode.
+    // Map plots what the results point at, which turns the answer into a picture of
+    // the hole.
+    const cv = await create(page, cursor, 'View');
+    await marks.beat('new-view', cv.ok ? 'a View over that query' : cv.why);
+    await sleep(500);
+
+    let viewSaved = false;
+    if (cv.ok) {
+      // By property name, never by position: the first control on this form is the
+      // query combobox, and a title typed there lands inside a URI.
+      const queryField = field(page, 'Query', 'input:not([type=hidden]):visible');
+      const picked = await pickByLabel(page, cursor, type, queryField, 'Uncovered territories', { kind: 'SELECT' });
+      await marks.beat('bind', picked.ok ? 'bound to the query by name' : picked.why);
+      await sleep(500);
+
+      const modeSelect = field(page, 'Layout mode', 'select:visible');
+      if (await modeSelect.count()) {
+        await modeSelect.scrollIntoViewIfNeeded();
+        await modeSelect.selectOption({ label: 'Map' }).catch(() => {});
+        await sleep(700);
+      }
+      await fill(page, cursor, 'Title', 'Where we have nobody');
+      const s2 = await save(page, cursor);
+      viewSaved = s2.ok;
+      await marks.beat('save-view', s2.ok ? 'saved — rendered as a map' : s2.why);
+      await sleep(1600);
+    }
+
+    // ── write it up ─────────────────────────────────────────────────────────
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(700);
+
+    const o1 = await addObject(page, cursor, type, null, { label: 'Where we have nobody', kind: 'View', mode: 'Map' });
+    const holes = (await page.locator('.ldh-pane.is-active .ldh-block').filter({ hasText: 'Where we have nobody' }).first().locator('.ldh-view-toolbar .count b').first().textContent({ timeout: 6000 }).catch(() => '?')).trim();
+    await marks.beat('hole', o1.ok ? `the ${holes}, plotted — the hole itself` : o1.why);
+    await sleep(2400);
+
+    // ── somebody: a hire, made where reps are listed, with the four territories ──
+    // Fuller's page lists the people who report to him and carries a Create button;
+    // the new rep is created there, so "reports to" is already filled in, and the
+    // four territories are picked by name — three of them through the form's own
+    // add-property row, since the shape gives one row for the property.
+    const boss = await searchGo(page, cursor, 'Fuller', { type: 'Person' });
+    await marks.beat('manager', boss.ok ? 'Fuller — and the people who report to him, listed on his page' : boss.why);
+    if (!boss.ok) throw new Error(boss.why);
+    await sleep(1400);
+    // The constructor gives one Territory row and the create modal's add-property row
+    // fails for a resource property (FINDINGS.md #13), so the hire is made with Dallas
+    // and the other three go onto her record right after, on her own page — where the
+    // add-property row does work.
+    const hired = await createFromView(page, cursor, {
+      '^Title': REP, '^Given name': 'Ana', '^Family name': REP, '^Job title': 'Sales Representative', '^Territory': ['Dallas', 'Territory'],
+    }, { type, view: 'Direct reports' });
+    await marks.beat('hire', hired.ok
+      ? `${REP} — hired from Fuller's own list, Dallas assigned${hired.unmatched?.length ? '; unfilled: ' + hired.unmatched.join(', ') : ''}`
+      : `${hired.why}${hired.unmatched?.length ? '; fields: ' + hired.unmatched.join(', ') : ''}`);
+    if (!hired.ok) throw new Error(hired.why);
+    await sleep(1800);
+    if (!hired.navigated) {
+      const me = page.locator('.ldh-pane.is-active .ldh-block a').filter({ hasText: REP }).first();
+      if (!(await me.count())) throw new Error(`no link to ${REP} after the hire`);
+      await cursor.click(me);
+      await page.waitForLoadState('load').catch(() => {});
+      await sleep(2000);
+    }
+    const ed = await editResource(page, cursor, /Family name/);
+    if (!ed.ok) throw new Error(ed.why);
+    await sleep(700);
+    for (const t of ['Austin', 'Bentonville', 'Columbia']) {
+      const av = await addValue(page, cursor, ed.form, 'areaServed');
+      if (!av.ok) throw new Error(av.why);
+      const pv = await pickAddedValue(page, cursor, type, ed.form, 'areaServed', t, { kind: 'Territory' });
+      if (!pv.ok) throw new Error(`${t}: ${pv.why}`);
+      await sleep(400);
+    }
+    const sv = await saveForm(page, cursor, ed.form);
+    await marks.beat('territories', sv.ok ? `${REP} — Austin, Bentonville and Columbia added on her record; four in all` : sv.why);
+    if (!sv.ok) throw new Error(sv.why);
+    await sleep(2200);
+
+    // ── the same map, read again ────────────────────────────────────────────
+    const up2 = await crumbGo(page, cursor, 'Root');
+    if (!up2.ok) throw new Error(up2.why);
+    await sleep(600);
+    const back2 = await listGo(page, cursor, TITLE);
+    if (!back2.ok) throw new Error(back2.why);
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block .ldh-view-toolbar .count b', { timeout: 25_000 }).catch(() => {});
+    await sleep(3000);
+    const left = (await page.locator('.ldh-pane.is-active .ldh-block').filter({ hasText: 'Where we have nobody' }).first().locator('.ldh-view-toolbar .count b').first().textContent({ timeout: 4000 }).catch(() => '?')).trim();
+    await marks.beat('filled', `the same view, read again — ${left} territories with nobody`);
+    await sleep(2600);
+
+    const p2 = await addProse(page, cursor, type,
+      `${holes === '4' ? 'Four' : holes} territories had no rep: Austin, Bentonville, Columbia and Dallas, all in Southern. ${REP} now covers all four, and the map above — the same query, run again — shows ${left === '0' ? 'none' : left}.`);
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(700);
+
+    const scrolled = await scrollThrough(page, { duration: 5600 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/04-is-our-beverages-theirs.mjs b/screencast/scenes/04-is-our-beverages-theirs.mjs
new file mode 100644
index 00000000..d255d6a9
--- /dev/null
+++ b/screencast/scenes/04-is-our-beverages-theirs.mjs
@@ -0,0 +1,242 @@
+// "Is our Beverages the same thing as theirs?"
+//
+// Opens on the category grid — eight tiles with photographs, already rendered, because
+// /categories/ carries ac:GridMode on its view. That is the strongest frame this
+// dataspace has after the map, and it is also what the scene is about: these are the
+// labels being aligned.
+//
+// A vocabulary-alignment errand. The product categories are Northwind's own words;
+// the UNESCO thesaurus is a published vocabulary. Reaching one from the other needs
+// no export and no integration: the dataspaces menu proxies the whole dataspace
+// into this one's chrome, so a remote concept browses exactly like a local record.
+//
+// The page ends up carrying both sides of the alignment — our categories and the
+// public concept — plus the sentence that connects them.
+//
+//   make scene SCENE=04-is-our-beverages-theirs BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle } from '../lib/fixture.mjs';
+import { createItem } from '../lib/constructors.mjs';
+import { addProse, addObject, copyUri, switchDocumentMode } from '../lib/blocks.mjs';
+import { annotate } from '../lib/annotate.mjs';
+import { treeGo, goToTab, searchGo, activeDocument, crumbGo } from '../lib/nav.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const SLUG = 'category-alignment';
+// The category we are aligning, and the concept we expect to find by that name.
+const TERM = 'Beverages';
+
+const OPENS_ON = `${base}/categories/`;
+
+const TITLE = 'Category alignment';
+// Last take's write-up document is removed off camera, by title — the document is
+// created ON camera below, so its path is a UUID and there is no slug to reset by.
+const gone = await deleteByTitle({
+  ldh: opts.ldh, base, certFile: opts.certFile,
+  certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile,
+  title: TITLE,
+});
+console.log(`cleanup: removed ${gone.removed.length} earlier "${TITLE}"`);
+let url = null;
+
+await runScene({
+  id: '04-is-our-beverages-theirs',
+  target: OPENS_ON,
+  warm: OPENS_ON,
+  identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks, base }) {
+    // Every link is re-queried after a navigation: a locator resolved on the
+    // previous page keeps matching a detached element and clicks nothing.
+    const visibleLink = (text) =>
+      page.locator('.ldh-block-body a:visible').filter({ hasText: text }).first();
+
+    // Coming home from a proxied dataspace is a tab switch, not a navigation: the
+    // address does not change, so anything that checks the URL is checking the
+    // wrong thing. Falls back to browser back when no tab was opened.
+    // Coming back from another dataspace is a tab switch, which leaves page.url()
+    // untouched — so neither the switch reporting success nor the URL proves the
+    // scene is home. The active pane has to be asked, because every write after this
+    // point is issued against whichever pane is in front: three earlier takes
+    // embedded the concept and wrote the closing paragraph into the UNESCO root
+    // instead of this document, and every beat reported success while doing it.
+    async function backTo(target, tabLabel) {
+      const home = async () => {
+        const at = await activeDocument(page);
+        return !!at && at.startsWith(target);
+      };
+      await goToTab(page, cursor, tabLabel);
+      await sleep(700);
+      if (await home()) return true;
+
+      for (let i = 0; i < 4 && !(await home()); i++) {
+        await page.goBack({ waitUntil: 'load' }).catch(() => {});
+        await sleep(750);
+      }
+      return home();
+    }
+
+    // ── the labels themselves ───────────────────────────────────────────────
+    // The beat fires the moment the photographs are on the tiles, not after a dwell —
+    // that is what makes the head trim a measurement rather than a guess.
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    // The photographs have to have PAINTED, not merely be in the DOM: the <img>
+    // elements exist a beat before they decode, which is how a take opened on a grid
+    // of white boxes. Eight tiles, eight content-addressed uploads.
+    await page.waitForFunction(
+      () => [...document.querySelectorAll('.ldh-block-body img[src*="/uploads/"]')]
+        .filter((i) => i.complete && i.naturalWidth > 0).length >= 8,
+      { timeout: 30_000 },
+    ).catch(() => {});
+    await marks.beat('ours', 'our eight categories, as we label them');
+    await sleep(2400);
+
+    // ── the page being written ──────────────────────────────────────────────
+    // Opened once there is something to put on it, and the grid goes in FIRST: a
+    // sentence typed onto an empty page leaves the page empty for as long as the
+    // typing takes, and the evidence is already to hand.
+    // Up to Root by breadcrumb, then Create ▸ Item: the alignment page comes into
+    // existence where the viewer can see it come from, instead of appearing by cut.
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+
+    const inContent = await switchDocumentMode(page, cursor, 'content-mode');
+    await marks.beat('content-mode', inContent ? 'switched to Content' : 'mode switcher would not open');
+    await sleep(500);
+
+    // The question leads. What follows is a trip into another dataspace and an RDFa
+    // annotation, and neither reads as anything without the question already on the
+    // page. It also has to exist before the annotation, which needs a sentence with
+    // the term in it.
+    const p1 = await addProse(page, cursor, type,
+      'The eight tiles are the catalogue\u2019s own segments, and the words on them are Northwind\u2019s. Beverages is a label typed here, not a term another organisation would recognise. This page checks whether a published vocabulary has a concept for it, and whether that concept means the same thing.');
+    await marks.beat('question', p1.ok ? 'the question, written down' : p1.why);
+    await sleep(650);
+
+    // Our own categories go in by name. There is no errand to fetch the URI, and
+    // asking for the View rather than the Object it is wrapped in keeps the embed
+    // from doubling its header.
+    const o1 = await addObject(page, cursor, type, null, { label: 'All categories', kind: 'View', mode: 'Grid' });
+    await marks.beat('embed-ours', o1.ok ? 'our categories, embedded as the evidence' : o1.why);
+    await sleep(900);
+
+    // ── the public side, through the proxy ──────────────────────────────────
+    // The dataspaces menu does not leave this dataspace: it fetches the other one
+    // through the Linked Data proxy and renders it here, so a remote vocabulary is
+    // browsed with the same chrome, the same tree and the same copy control.
+    const apps = page.locator('button.btn-apps').first();
+    if (await apps.count()) {
+      await cursor.click(apps);
+      await sleep(550);
+      const unesco = page.locator('.ac-menu-item:visible, .ac-menu a:visible').filter({ hasText: 'UNESCO' }).first();
+      if (await unesco.count()) {
+        await cursor.click(unesco);
+        await page.waitForLoadState('load').catch(() => {});
+        await sleep(2700);
+        await marks.beat('thesaurus', `a published vocabulary, rendered here: ${page.url().includes('uri=') ? 'through the proxy' : 'directly'}`);
+        await sleep(700);
+      } else {
+        await marks.beat('thesaurus', 'no UNESCO entry in the dataspaces menu');
+      }
+    }
+
+    // 4,489 concepts, alphabetical, and Beverages is 368 in, so it is neither paged
+    // to nor faceted to: a facet on the preferred label is a label facet, and those
+    // hang (FINDINGS.md #1). Search is what a person reaches for here anyway, and it
+    // is the thesaurus's own search — which also has to be told that the concept it
+    // wants is a Concept in THIS dataspace, because the store is shared and
+    // Northwind's own Beverages category answers to the same name.
+    const found = await searchGo(page, cursor, TERM, { type: 'Concept' });
+    await marks.beat('search', found.ok
+      ? `${found.total} matches for ${TERM} — the thesaurus's own concept`
+      : found.why);
+    await sleep(1100); // a proxied resource finishes rendering after load fires
+
+    if (found.ok) {
+      const label = (found.label || '').split('\n').find((l) => l.trim()) || TERM;
+      await marks.beat('concept', label.slice(0, 36));
+      await sleep(700);
+    }
+
+    // ── bring it home ───────────────────────────────────────────────────────
+    const home = await backTo(url, 'Category alignment');
+    // Closing the proxy tab lands back on the document, but not necessarily in the
+    // mode it was left in — and without ContentMode there are no add buttons.
+    // The document tab kept its Content mode while the other tab was in front, so
+    // switching back needs no mode change — switchViewMode-style, do not re-assert
+    // what is already true.
+    await sleep(550);
+    await marks.beat('return', home
+      ? 'back to the alignment page, in Content'
+      : `lost — still on ${await activeDocument(page)}`);
+    if (!home) throw new Error(`refusing to write: the active pane is ${await activeDocument(page)}, not ${url}`);
+
+    // The concept was visited because that is the scenario — a remote resource
+    // browsing like a local one — not because its URI had to be collected. Bringing
+    // it home is a lookup by the name we just read off it, and the store is shared
+    // across dataspaces, so the thesaurus's own concept answers from here.
+    const o2 = await addObject(page, cursor, type, null, { label: TERM, kind: 'Concept', mode: 'Properties' });
+    await marks.beat('embed-public', o2.ok ? 'the public concept, embedded beside ours' : o2.why);
+    await sleep(1000);
+
+    // ── record the alignment ────────────────────────────────────────────────
+    // Up to here the page only puts the two side by side, and the closing sentence
+    // claims a match that nothing in the data records. This writes it.
+    //
+    // Not through the resource form: that form is ontology-driven and its Add button
+    // offers a schema:ProductGroup nothing but rdf:type. Prose annotation is not
+    // constrained by the subject's class, which is why the original plan called for
+    // the RDFa typeahead here.
+    //
+    // The concept's URI is copied FIRST: the overlay's object field is a plain URI
+    // input with no typeahead, and clicking a copy control after opening the editor
+    // takes the focus out of it and closes it.
+    const conceptBlock = page.locator('.ldh-pane.is-active .ldh-block-row')
+      .filter({ has: page.locator(`a[href*="unesco-thesaurus"]`) }).first();
+    const copied = await copyUri(page, cursor, conceptBlock, { match: 'concept' });
+    await marks.beat('copy-concept', copied.ok ? (copied.value ?? 'the concept URI, copied') : copied.why);
+    await sleep(700);
+
+    // The word can only be selected inside an open editor, so the prose block goes
+    // into edit mode — the same pencil a person would reach for.
+    //
+    // Matched on a phrase from the sentence, not on TERM: the categories grid sits
+    // above it and one of its eight tiles is also called Beverages, so filtering on
+    // the term alone takes the grid and the pencil opens the wrong block.
+    const prose = page.locator('.ldh-pane.is-active .ldh-block-row')
+      .filter({ hasText: 'published vocabulary' }).first();
+    await prose.scrollIntoViewIfNeeded();
+    await prose.hover();
+    await sleep(500);
+    await cursor.click(prose.locator('button.ac-iconbtn').filter({ hasText: 'edit' }).last());
+    await sleep(3200);
+    await marks.beat('edit-prose', 'the sentence, open for editing');
+
+    const a = await annotate(page, cursor, type, { word: TERM, property: 'exact' });
+    await marks.beat('align', a.ok
+      ? `skos:exactMatch — our ${TERM} IS UNESCO's, recorded on the page`
+      : a.why);
+    await sleep(1100);
+
+    const p2 = await addProse(page, cursor, type,
+      `UNESCO's ${TERM} means the same thing as ours. It was never imported. It lives in another dataspace and is fetched when the page is rendered.`);
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(650);
+
+    const scrolled = await scrollThrough(page, { duration: 6500 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/06-worked-from-london.mjs b/screencast/scenes/06-worked-from-london.mjs
new file mode 100644
index 00000000..994baca4
--- /dev/null
+++ b/screencast/scenes/06-worked-from-london.mjs
@@ -0,0 +1,203 @@
+// "Worked from London."
+//
+// Opens on the employee grid — nine photographs, already rendered — and switches the
+// view to Map: two clusters, one around Seattle, one in London. Every sales territory
+// is in the United States. Verified before scripting: four of the nine reps sit in
+// London and between them hold twenty-nine of the forty-nine territories that have a
+// rep at all. The London pin is the route in — it opens the rep, and the rep's page
+// lists the ground.
+//
+//   make scene SCENE=06-worked-from-london BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle, patchDocument } from '../lib/fixture.mjs';
+import { editResource, removeValue, addValue, pickAddedValue, saveForm } from '../lib/editing.mjs';
+import { crumbGo, listGo, searchGo } from '../lib/nav.mjs';
+import { addProse, addObject, pickByLabel, switchDocumentMode } from '../lib/blocks.mjs';
+import { create, createItem, typeQuery, fill, save, field } from '../lib/constructors.mjs';
+import { switchViewMode } from '../lib/modes.mjs';
+import { clickMarker } from '../lib/map.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OPENS_ON = `${base}/employees/`;
+const TITLE = 'Worked from London';
+
+// Unindented: the editor supplies the indentation itself. The territory RESOURCE is
+// selected so the view can plot it — every one carries geo:lat/long.
+const QUERY = `PREFIX schema: <https://schema.org/>
+
+SELECT ?territory ?name
+WHERE {
+GRAPH ?g {
+?rep schema:address ?address ;
+schema:areaServed ?territory .
+?address schema:addressLocality "London" .
+}
+GRAPH ?h {
+?territory schema:name ?name .
+}
+}
+ORDER BY ?name`;
+
+const gone = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: TITLE });
+console.log(`cleanup: removed ${gone.removed.length} earlier "${TITLE}"`);
+// The London reps, read from the data: their pins are the ones to open.
+const LONDON = (await sparql(base, `PREFIX schema: <https://schema.org/>
+SELECT ?rep WHERE { GRAPH ?g { ?rep schema:address ?a . ?a schema:addressLocality "London" } }`)).map((r) => r.rep);
+if (!LONDON.length) throw new Error('no rep based in London');
+// Last take handed Chicago from King to Peacock; both records go back first.
+const [chi] = await sparql(base, `PREFIX schema: <https://schema.org/> SELECT ?t WHERE { GRAPH ?g { ?t a schema:City ; schema:name "Chicago" } }`);
+const [king] = await sparql(base, `PREFIX schema: <https://schema.org/> SELECT ?e WHERE { GRAPH ?g { ?e a schema:Person ; schema:familyName "King" } }`);
+const [peacock] = await sparql(base, `PREFIX schema: <https://schema.org/> SELECT ?e WHERE { GRAPH ?g { ?e a schema:Person ; schema:familyName "Peacock" } }`);
+if (!chi || !king || !peacock) throw new Error('Chicago, King or Peacock not found');
+const doc = (u) => u.replace(/#.*$/, '');
+for (const [who, update] of [
+  [king.e, `PREFIX schema: <https://schema.org/> INSERT { <${king.e}> schema:areaServed <${chi.t}> } WHERE {}`],
+  [peacock.e, `PREFIX schema: <https://schema.org/> DELETE { <${peacock.e}> schema:areaServed <${chi.t}> } WHERE {}`],
+]) { const r = await patchDocument({ ldh: opts.ldh, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, url: doc(who), update }); console.log(`reset ${doc(who)}: ${r.ok ? 'ok' : r.out}`); }
+let url = null;
+
+await runScene({
+  id: '06-worked-from-london',
+  target: OPENS_ON, warm: OPENS_ON, identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks }) {
+    // ── the faces, already painted ──────────────────────────────────────────
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForFunction(
+      () => [...document.querySelectorAll('.ldh-block-body img[src*="/uploads/"]')].filter((i) => i.complete && i.naturalWidth > 0).length >= 9,
+      { timeout: 30_000 },
+    ).catch(() => {});
+    await marks.beat('team', 'nine people, with their photographs');
+    await sleep(2200);
+
+    // ── the same nine, plotted ──────────────────────────────────────────────
+    // The view's own mode switcher, not the document's: the document-scope Map draws
+    // what the container describes, which is links, not geometry.
+    const toMap = await switchViewMode(page, cursor, 'map-mode');
+    await page.waitForSelector('.ol-viewport canvas', { timeout: 25_000 }).catch(() => {});
+    await sleep(2600);
+    await marks.beat('map', toMap ? 'the same nine, plotted — two clusters, an ocean apart' : 'map not offered');
+    await sleep(1200);
+
+    // ── the pin in London ───────────────────────────────────────────────────
+    const pin = await clickMarker(page, cursor, LONDON);
+    const who = pin.ok ? (await page.locator('.ol-overlay-container a[title*="/employees/"]').first().textContent({ timeout: 4000 }).catch(() => '')).trim() : null;
+    await marks.beat('london', pin.ok ? `${who} — the pin in London` : pin.why);
+    await sleep(1400);
+
+    // ── into the rep, from the pin ──────────────────────────────────────────
+    const repLink = page.locator('.ol-overlay-container a[title*="/employees/"]').first();
+    let rep = null;
+    if (await repLink.count()) {
+      await cursor.click(repLink);
+      await page.waitForLoadState('load').catch(() => {});
+      await sleep(3800);
+      rep = (await page.title().catch(() => '')).replace(/\s*[|–-]\s*Northwind Traders\s*$/i, '').trim() || who;
+    }
+    await marks.beat('rep', rep ? `${rep} — based in London; every territory on the page is in the United States` : 'the popup carried no link to the rep');
+    await sleep(2600);
+
+    // ── say why, before the work ────────────────────────────────────────────
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const p1 = await addProse(page, cursor, type,
+      'The team map shows two clusters: five reps around Seattle and four in London. Every sales territory is in the United States. This page finds the territories that are worked from London, and hands one of them to Seattle.');
+    await marks.beat('question', p1.ok ? 'the question, written down' : p1.why);
+    await sleep(3200);
+
+    // ── the query, then the map of it ───────────────────────────────────────
+    await switchDocumentMode(page, cursor, 'read-mode');
+    await sleep(600);
+    const cs = await create(page, cursor, 'SELECT');
+    await marks.beat('new-select', cs.ok ? 'a SELECT, created on this document' : cs.why);
+    if (cs.ok) {
+      const q = await typeQuery(page, cursor, QUERY);
+      await marks.beat('query', q.ok ? `the London reps' ground, as SPARQL — ${q.lines} lines${q.verified ? ', read back and matching' : ''}` : q.why);
+      await sleep(700);
+      await fill(page, cursor, 'Title', 'London-served territories');
+      const s = await save(page, cursor);
+      await marks.beat('save-select', s.ok ? 'saved — twenty-nine rows' : s.why);
+      await sleep(1000);
+    }
+    const cv = await create(page, cursor, 'View');
+    await marks.beat('new-view', cv.ok ? 'a View over that query' : cv.why);
+    if (cv.ok) {
+      const queryField = field(page, 'Query', 'input:not([type=hidden]):visible');
+      const picked = await pickByLabel(page, cursor, type, queryField, 'London-served territories', { kind: 'SELECT' });
+      await marks.beat('bind', picked.ok ? 'bound to the query by name' : picked.why);
+      const modeSelect = field(page, 'Layout mode', 'select:visible');
+      if (await modeSelect.count()) { await modeSelect.scrollIntoViewIfNeeded(); await modeSelect.selectOption({ label: 'Map' }).catch(() => {}); await sleep(600); }
+      await fill(page, cursor, 'Title', 'Territories worked from London');
+      const s2 = await save(page, cursor);
+      await marks.beat('save-view', s2.ok ? 'saved — rendered as a map' : s2.why);
+      await sleep(1600);
+    }
+
+    // ── the answer, on the page ─────────────────────────────────────────────
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(700);
+    const o1 = await addObject(page, cursor, type, null, { label: 'Territories worked from London', kind: 'View', mode: 'Map' });
+    await marks.beat('ground', o1.ok ? 'twenty-nine territories, plotted — none of them near London' : o1.why);
+    await sleep(2600);
+
+    // ── Chicago: off King's record, onto Peacock's ──────────────────────────
+    const k = await searchGo(page, cursor, 'King', { type: 'Person' });
+    if (!k.ok) throw new Error(k.why);
+    const ed = await editResource(page, cursor, /Family name/);
+    await marks.beat('king', ed.ok ? 'King — ten territories, open for editing' : ed.why);
+    if (!ed.ok) throw new Error(ed.why);
+    await sleep(900);
+    const rm = await removeValue(page, cursor, ed.form, 'Territory', 'Chicago');
+    if (!rm.ok) throw new Error(rm.why);
+    const sv = await saveForm(page, cursor, ed.form);
+    await marks.beat('unassign', sv.ok ? 'Chicago removed — nine' : sv.why);
+    if (!sv.ok) throw new Error(sv.why);
+    await sleep(1200);
+    const pk = await searchGo(page, cursor, 'Peacock', { type: 'Person' });
+    if (!pk.ok) throw new Error(pk.why);
+    const ed2 = await editResource(page, cursor, /Family name/);
+    if (!ed2.ok) throw new Error(ed2.why);
+    await sleep(700);
+    const av = await addValue(page, cursor, ed2.form, 'areaServed');
+    if (!av.ok) throw new Error(av.why);
+    const pv = await pickAddedValue(page, cursor, type, ed2.form, 'areaServed', 'Chicago', { kind: 'Territory' });
+    if (!pv.ok) throw new Error(pv.why);
+    const sv2 = await saveForm(page, cursor, ed2.form);
+    await marks.beat('reassign', sv2.ok ? 'Peacock — Chicago added, from Seattle' : sv2.why);
+    if (!sv2.ok) throw new Error(sv2.why);
+    await sleep(1200);
+
+    // ── the same map, read again ────────────────────────────────────────────
+    const up2 = await crumbGo(page, cursor, 'Root');
+    if (!up2.ok) throw new Error(up2.why);
+    await sleep(600);
+    const back2 = await listGo(page, cursor, TITLE);
+    if (!back2.ok) throw new Error(back2.why);
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block .ldh-view-toolbar .count b', { timeout: 25_000 }).catch(() => {});
+    await sleep(3000);
+    const left = (await page.locator('.ldh-pane.is-active .ldh-block').filter({ hasText: 'Territories worked from London' }).first().locator('.ldh-view-toolbar .count b').first().textContent({ timeout: 4000 }).catch(() => '?')).trim();
+    await marks.beat('ground-again', `the same view, read again — ${left} territories worked from London`);
+    await sleep(2600);
+    const p2 = await addProse(page, cursor, type,
+      'Twenty-nine of the forty-nine covered territories were served from London; Chicago now belongs to Peacock in Seattle, and the map above — the same query, run again — shows twenty-eight. King still holds nine.');
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(700);
+    const scrolled = await scrollThrough(page, { duration: 5600 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/07-one-rep-for-the-south.mjs b/screencast/scenes/07-one-rep-for-the-south.mjs
new file mode 100644
index 00000000..98fc8931
--- /dev/null
+++ b/screencast/scenes/07-one-rep-for-the-south.mjs
@@ -0,0 +1,150 @@
+// "One rep for the South."
+//
+// Opens on the territory map — fifty-three pins — and drills into a Southern one: the
+// pin opens the territory, the territory's popup links to its region, and the region's
+// page carries the list of its cities. Verified before scripting: Eastern has nineteen
+// territories and four reps; Southern has eight territories and ONE rep, and four of
+// its eight have nobody at all. The question is how many reps each region actually has.
+//
+//   make scene SCENE=07-one-rep-for-the-south BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle } from '../lib/fixture.mjs';
+import { crumbGo } from '../lib/nav.mjs';
+import { addProse, addObject, switchDocumentMode } from '../lib/blocks.mjs';
+import { create, createItem, typeQuery, fill, save, configureChart } from '../lib/constructors.mjs';
+import { clickMarker } from '../lib/map.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OPENS_ON = `${base}/territories/`;
+const TITLE = 'One rep for the South';
+
+// The region's NAME is the axis: a chart axis bound to a URI renders raw markup
+// (FINDINGS.md #3). COUNT(DISTINCT …) on both counts, or the OPTIONAL multiplies them.
+const QUERY = `PREFIX schema: <https://schema.org/>
+
+SELECT ?region (COUNT(DISTINCT ?territory) AS ?territories) (COUNT(DISTINCT ?rep) AS ?reps)
+WHERE {
+GRAPH ?g {
+?territory a schema:City ;
+schema:containedInPlace ?place .
+}
+GRAPH ?h {
+?place schema:name ?region .
+}
+OPTIONAL {
+GRAPH ?i {
+?rep schema:areaServed ?territory .
+}
+}
+}
+GROUP BY ?region
+ORDER BY ?region`;
+
+const gone = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: TITLE });
+console.log(`cleanup: removed ${gone.removed.length} earlier "${TITLE}"`);
+// The Southern territories, read from the data: any of their pins leads to the region.
+const SOUTHERN = (await sparql(base, `PREFIX schema: <https://schema.org/>
+SELECT ?t WHERE { GRAPH ?g { ?t schema:containedInPlace <${base}/regions/4/#this> } }`)).map((r) => r.t);
+if (!SOUTHERN.length) throw new Error('no Southern territories');
+let url = null;
+
+await runScene({
+  id: '07-one-rep-for-the-south',
+  target: OPENS_ON, warm: OPENS_ON, identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks }) {
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-view-toolbar .right .count b', { timeout: 25_000 }).catch(() => {});
+    await page.waitForSelector('.ol-viewport canvas', { timeout: 25_000 }).catch(() => {});
+    const total = (await page.locator('.ldh-view-toolbar .right .count b').first().textContent({ timeout: 4000 }).catch(() => '53')).trim();
+    await marks.beat('map', `every territory Northwind covers: ${total}`);
+    await sleep(2400);
+
+    // ── a Southern pin, and out through its region ──────────────────────────
+    const pin = await clickMarker(page, cursor, SOUTHERN);
+    const name = pin.ok ? (await page.locator('.ol-overlay-container a[title*="/territories/"]').first().textContent({ timeout: 4000 }).catch(() => '')).trim() : null;
+    await marks.beat('one', pin.ok ? `${name} — one of the Southern eight` : pin.why);
+    await sleep(1400);
+
+    const regionLink = page.locator('.ol-overlay-container a[title*="/regions/"]').first();
+    let region = null;
+    if (await regionLink.count()) {
+      await cursor.click(regionLink);
+      await page.waitForLoadState('load').catch(() => {});
+      await sleep(3600);
+      region = (await page.title().catch(() => '')).replace(/\s*[|–-]\s*Northwind Traders\s*$/i, '').trim() || null;
+      // the derived "Cities in this region" view arrives asynchronously — let it land
+      await page.waitForSelector('.ldh-pane.is-active button.add-instance', { timeout: 20_000 }).catch(() => {});
+      await sleep(1200);
+    }
+    await marks.beat('region', region ? `${region} — and its eight cities, listed on its own page` : 'the popup carried no region link');
+    await sleep(2400);
+
+    // ── say why, before the work ────────────────────────────────────────────
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const p1 = await addProse(page, cursor, type,
+      'The map plots fifty-three territories in four regions, and a region page lists its own. Nothing on either says how many reps a region has. This page counts territories and reps per region.');
+    await marks.beat('question', p1.ok ? 'the question, written down' : p1.why);
+    await sleep(3200);
+
+    // ── the count, as a chart ───────────────────────────────────────────────
+    await switchDocumentMode(page, cursor, 'read-mode');
+    await sleep(600);
+    const cs = await create(page, cursor, 'SELECT');
+    await marks.beat('new-select', cs.ok ? 'a SELECT, created on this document' : cs.why);
+    if (cs.ok) {
+      const q = await typeQuery(page, cursor, QUERY);
+      await marks.beat('query', q.ok ? `territories and reps, per region — ${q.lines} lines${q.verified ? ', read back and matching' : ''}` : q.why);
+      await sleep(700);
+      await fill(page, cursor, 'Title', 'Reps per region');
+      const s = await save(page, cursor);
+      await marks.beat('save-select', s.ok ? 'saved — four rows' : s.why);
+      await sleep(1000);
+    }
+    const queryRow = page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'Reps per region' }).first();
+    const cfg = await configureChart(page, cursor, queryRow, { type: 'Bar chart', category: 'region', series: ['territories', 'reps'] });
+    await marks.beat('chart-pane', cfg.ok ? 'territories and reps on the same axis' : cfg.why);
+    await sleep(700);
+    const createChart = queryRow.locator('button.ac-btn.in-primary').filter({ hasText: /^Create$/ }).first();
+    if (await createChart.count()) {
+      await createChart.scrollIntoViewIfNeeded();
+      await cursor.click(createChart);
+      await sleep(2400);
+      await fill(page, cursor, 'Title', 'Reps per region');
+      const s2 = await save(page, cursor);
+      await marks.beat('save-chart', s2.ok ? 'saved — a chart anyone can render' : s2.why);
+      await sleep(250);
+    } else {
+      await marks.beat('save-chart', 'no Create on the query block');
+    }
+
+    // ── the answer, on the page ─────────────────────────────────────────────
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(700);
+    const o1 = await addObject(page, cursor, type, null, { label: 'Reps per region', kind: 'Result set chart' });
+    await marks.beat('embed', o1.ok ? 'the chart, embedded' : o1.why);
+    await sleep(1200);
+    const p2 = await addProse(page, cursor, type,
+      'Eastern: nineteen territories, four reps. Western: fifteen, two. Northern: eleven, two. Southern: eight territories and one rep — and four of the eight have nobody at all.');
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(700);
+    const scrolled = await scrollThrough(page, { duration: 5600 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/08-late-customer-or-shipper.mjs b/screencast/scenes/08-late-customer-or-shipper.mjs
new file mode 100644
index 00000000..3a39bbe7
--- /dev/null
+++ b/screencast/scenes/08-late-customer-or-shipper.mjs
@@ -0,0 +1,217 @@
+// "Late: the customer or the shipper?"
+//
+// Opens on a late order in Graph mode — the customer, the rep, the shipper, the line
+// items, on the dark canvas. The order book already charts late shipments by carrier.
+// Nothing charts them by customer. The graph is the route: expand the customer node,
+// select it, follow its link in place, and the customer's page lists every order they
+// placed. Which order, and which customer, are read from the data at start — the
+// customer with the most late orders, and one of those orders.
+//
+//   make scene SCENE=08-late-customer-or-shipper BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle, patchDocument } from '../lib/fixture.mjs';
+import { editResource, retypeLocalName, saveForm } from '../lib/editing.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+import { crumbGo, searchGo, listGo } from '../lib/nav.mjs';
+import { addProse, addObject, switchDocumentMode } from '../lib/blocks.mjs';
+import { create, createItem, typeQuery, fill, save, configureChart } from '../lib/constructors.mjs';
+import { expand, foreignNode, graphState, nodeById, select, zoomToFit } from '../lib/graph.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const TITLE = 'Late: the customer or the shipper?';
+
+// Last take marked the late order delivered; the data goes back the way the scene
+// found it before the pick is made, so the same order is late every time.
+const RESET_ORDER = '10423';
+const reset = await patchDocument({ ldh: opts.ldh, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile,
+  url: `${base}/orders/${RESET_ORDER}/`,
+  update: `PREFIX schema: <https://schema.org/>
+DELETE { <${base}/orders/${RESET_ORDER}/#this> schema:orderStatus schema:OrderDelivered }
+INSERT { <${base}/orders/${RESET_ORDER}/#this> schema:orderStatus schema:OrderProblem }
+WHERE {}` });
+console.log(`reset: order ${RESET_ORDER} late again: ${reset.ok ? 'ok' : reset.out}`);
+
+// Resolved from the data, not carried as constants — and by the same measure the chart
+// at the end is sorted by, so the opening order's customer is the top of that chart.
+const [pick] = await sparql(base, `PREFIX schema: <https://schema.org/>
+SELECT ?id ?cust ?orders ?late WHERE {
+  { SELECT ?c (COUNT(?o) AS ?orders) (SUM(IF(?st = schema:OrderProblem, 1, 0)) AS ?late)
+    WHERE { GRAPH ?g { ?o a schema:Order ; schema:customer ?c ; schema:orderStatus ?st } }
+    GROUP BY ?c HAVING (COUNT(?o) >= 5)
+    ORDER BY DESC(SUM(IF(?st = schema:OrderProblem, 1, 0)) / COUNT(?o)) LIMIT 1 }
+  GRAPH ?g2 { ?o2 a schema:Order ; schema:identifier ?id ; schema:customer ?c ; schema:orderStatus schema:OrderProblem }
+  GRAPH ?h { ?c schema:legalName ?cust }
+} ORDER BY ?id LIMIT 1`);
+if (!pick) throw new Error('no late order found');
+const ORDER = pick.id, CUST = pick.cust;
+console.log(`late order ${ORDER} of ${CUST} (${pick.late} of ${pick.orders} late)`);
+
+const GRAPH_MODE = 'https://w3id.org/atomgraph/client#GraphMode';
+const OPENS_ON = `${base}/orders/${ORDER}/?mode=${encodeURIComponent(GRAPH_MODE)}`;
+
+const QUERY = `PREFIX schema: <https://schema.org/>
+
+SELECT ?customer (COUNT(?order) AS ?orders) (SUM(IF(?status = schema:OrderProblem, 1, 0)) AS ?late)
+WHERE {
+GRAPH ?g {
+?order a schema:Order ;
+schema:customer ?account ;
+schema:orderStatus ?status .
+}
+GRAPH ?h {
+?account schema:legalName ?customer .
+}
+}
+GROUP BY ?customer
+HAVING (COUNT(?order) >= 5)
+ORDER BY DESC(SUM(IF(?status = schema:OrderProblem, 1, 0)) / COUNT(?order))
+LIMIT 10`;
+
+const gone = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: TITLE });
+console.log(`cleanup: removed ${gone.removed.length} earlier "${TITLE}"`);
+let url = null;
+
+await runScene({
+  id: '08-late-customer-or-shipper',
+  target: OPENS_ON, warm: OPENS_ON, identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks }) {
+    // ── a late order, as a graph ────────────────────────────────────────────
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForSelector('canvas', { timeout: 25_000 }).catch(() => {});
+    await zoomToFit(page, cursor);
+    const opened = await graphState(page);
+    await marks.beat('graph', opened ? `${opened.nodes} nodes — order ${ORDER}, delivered late` : 'graph not offered');
+    await sleep(2400);
+
+    // ── say why, before the work ────────────────────────────────────────────
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode', { settle: 1800 });
+    const p1 = await addProse(page, cursor, type,
+      `Order ${ORDER} shipped after its required date. Opened as a graph it shows everyone on it: the customer, the rep who booked it, the shipper who carried it. The order book charts late shipments by carrier. This page asks whether they follow the customer instead — and then marks this one delivered.`);
+    await marks.beat('question', p1.ok ? 'the question, written down' : p1.why);
+    await sleep(6500);
+
+    // ── back to the graph, by search and the mode switcher ──────────────────
+    const found = await searchGo(page, cursor, ORDER, { type: 'Order' });
+    await marks.beat('back-to-order', found.ok ? `order ${ORDER}, found by number` : found.why);
+    if (!found.ok) throw new Error(found.why);
+    await switchDocumentMode(page, cursor, 'graph-mode', { settle: 2200 });
+    await page.waitForSelector('canvas', { timeout: 25_000 }).catch(() => {});
+    await sleep(1500);
+    await zoomToFit(page, cursor);
+    await marks.beat('graph-again', 'the same order, as a graph');
+    await sleep(400);
+
+    // ── the customer node: expand it, select it, follow it ──────────────────
+    const node = await foreignNode(page, `${base}/orders/${ORDER}/`, { skip: 0, prefer: /\/customers\// });
+    if (!node || node.error) throw new Error(node?.error ?? 'no customer node');
+    const r = await expand(page, cursor, node);
+    await marks.beat('expand', r.ok ? `the customer — +${r.gained} nodes from their own document` : 'the double-click did not take');
+    await zoomToFit(page, cursor);
+    await sleep(1000);
+    const again = await nodeById(page, node.id);
+    if (again.error) throw new Error(again.error);
+    const picked = await select(page, cursor, again);
+    await marks.beat('details', picked.ok ? `${picked.href.replace(base, '')} — a node is a resource, and it says so` : picked.why);
+    if (!picked.ok) throw new Error(picked.why);
+    await sleep(1200);
+    let landed = null;
+    if (picked.ok) {
+      const before = page.url().split('?')[0];
+      if (picked.point) await cursor.clickAt(picked.point.x, picked.point.y, { duration: 700, settle: 200, after: 400 });
+      else await picked.link.click();
+      await page.waitForFunction((b) => location.href.split('?')[0] !== b, before, { timeout: 20_000 }).catch(() => {});
+      await page.waitForLoadState('load').catch(() => {});
+      await page.waitForSelector('.ldh-pane.is-active .ldh-view-toolbar', { timeout: 20_000 }).catch(() => {});
+      await sleep(3000);
+      const now = page.url().split('?')[0];
+      if (now !== before) landed = now;
+    }
+    await marks.beat('customer', landed ? `${CUST} — and every order they placed, listed on their own page` : 'the link did not open the customer');
+    if (!landed) throw new Error('the link did not open the customer');
+    await sleep(2200);
+
+    // ── the count, as a chart, on the page being written ────────────────────
+    const up = await crumbGo(page, cursor, 'Root');
+    if (!up.ok) throw new Error(up.why);
+    await sleep(600);
+    const back = await listGo(page, cursor, TITLE);
+    if (!back.ok) throw new Error(back.why);
+    await switchDocumentMode(page, cursor, 'read-mode');
+    await sleep(600);
+    const cs = await create(page, cursor, 'SELECT');
+    await marks.beat('new-select', cs.ok ? 'a SELECT, created on this document' : cs.why);
+    if (cs.ok) {
+      const q = await typeQuery(page, cursor, QUERY);
+      await marks.beat('query', q.ok ? `late orders per customer — ${q.lines} lines${q.verified ? ', read back and matching' : ''}` : q.why);
+      await sleep(700);
+      await fill(page, cursor, 'Title', 'Late orders by customer');
+      const s = await save(page, cursor);
+      await marks.beat('save-select', s.ok ? 'saved' : s.why);
+      await sleep(1000);
+    }
+    const queryRow = page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'Late orders by customer' }).first();
+    const cfg = await configureChart(page, cursor, queryRow, { type: 'Bar chart', category: 'customer', series: ['late', 'orders'] });
+    await marks.beat('chart-pane', cfg.ok ? 'late and total, per customer' : cfg.why);
+    await sleep(700);
+    const createChart = queryRow.locator('button.ac-btn.in-primary').filter({ hasText: /^Create$/ }).first();
+    if (await createChart.count()) {
+      await createChart.scrollIntoViewIfNeeded();
+      await cursor.click(createChart);
+      await sleep(2400);
+      await fill(page, cursor, 'Title', 'Late orders by customer');
+      const s2 = await save(page, cursor);
+      await marks.beat('save-chart', s2.ok ? 'saved — a chart anyone can render' : s2.why);
+      await sleep(250);
+    }
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(700);
+    const o1 = await addObject(page, cursor, type, null, { label: 'Late orders by customer', kind: 'Result set chart' });
+    await marks.beat('embed', o1.ok ? `the chart, embedded — ${CUST} on top, ${pick.late} of ${pick.orders}` : o1.why);
+    await sleep(2400);
+
+    // ── the order, marked delivered — and the chart, read again ─────────────
+    const found2 = await searchGo(page, cursor, ORDER, { type: 'Order' });
+    if (!found2.ok) throw new Error(found2.why);
+    const ed = await editResource(page, cursor, /Order status/);
+    await marks.beat('edit', ed.ok ? `order ${ORDER}, open for editing on its own page` : ed.why);
+    if (!ed.ok) throw new Error(ed.why);
+    await sleep(900);
+    const st = await retypeLocalName(page, cursor, type, ed.form, 'Order status', 'OrderProblem', 'OrderDelivered');
+    await marks.beat('delivered', st.ok ? 'OrderProblem → OrderDelivered, typed in place' : st.why);
+    if (!st.ok) throw new Error(st.why);
+    await sleep(1200);
+    const sv = await saveForm(page, cursor, ed.form);
+    await marks.beat('save-order', sv.ok ? 'saved' : sv.why);
+    if (!sv.ok) throw new Error(sv.why);
+    await sleep(800);
+    const up2 = await crumbGo(page, cursor, 'Root');
+    if (!up2.ok) throw new Error(up2.why);
+    await sleep(600);
+    const back2 = await listGo(page, cursor, TITLE);
+    if (!back2.ok) throw new Error(back2.why);
+    await sleep(4500);
+    await marks.beat('chart-again', `the same chart, read again — ${CUST}: ${pick.late - 1} of ${pick.orders}`);
+    await sleep(2600);
+    const p2 = await addProse(page, cursor, type,
+      `${CUST}: ${pick.orders} orders, ${pick.late} of them late when this page was opened, ${pick.late - 1} now that ${ORDER} is marked delivered — the chart above is the same query, run again. The order book charts which carrier is late; this page charts which customer is.`);
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(700);
+    const scrolled = await scrollThrough(page, { duration: 5600 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/09-opening-houston.mjs b/screencast/scenes/09-opening-houston.mjs
new file mode 100644
index 00000000..517637e0
--- /dev/null
+++ b/screencast/scenes/09-opening-houston.mjs
@@ -0,0 +1,124 @@
+// "Opening Houston."
+//
+// The sequel to 02. Southern has eight territories and one rep, and four of the eight
+// have nobody. Northwind opens a ninth, in Houston — and the territory is created
+// from the region's own list, whose Create button the ontology put there
+// (client/block/view.xsl:493, a derived inverse view typed to schema:City). Opens on
+// the territory map; a Southern pin leads to the region, the region's list carries
+// the button, and the map is where the result lands.
+//
+//   make scene SCENE=09-opening-houston BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle } from '../lib/fixture.mjs';
+import { crumbGo, searchGo, listGo } from '../lib/nav.mjs';
+import { addProse, addObject, switchDocumentMode } from '../lib/blocks.mjs';
+import { createItem, createFromView } from '../lib/constructors.mjs';
+import { clickMarker } from '../lib/map.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OPENS_ON = `${base}/territories/`;
+const TITLE = 'Opening Houston';
+const CITY = 'Houston';
+
+for (const t of [TITLE, CITY]) {
+  const gone = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: t });
+  console.log(`cleanup: removed ${gone.removed.length} earlier "${t}"`);
+}
+// The Southern territories, read from the data: any of their pins leads to the region.
+const SOUTHERN = (await sparql(base, `PREFIX schema: <https://schema.org/>
+SELECT ?t WHERE { GRAPH ?g { ?t schema:containedInPlace <${base}/regions/4/#this> } }`)).map((r) => r.t);
+if (!SOUTHERN.length) throw new Error('no Southern territories');
+let url = null;
+
+await runScene({
+  id: '09-opening-houston',
+  target: OPENS_ON, warm: OPENS_ON, identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks }) {
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-view-toolbar .right .count b', { timeout: 25_000 }).catch(() => {});
+    await page.waitForSelector('.ol-viewport canvas', { timeout: 25_000 }).catch(() => {});
+    const total = (await page.locator('.ldh-view-toolbar .right .count b').first().textContent({ timeout: 4000 }).catch(() => '53')).trim();
+    await marks.beat('map', `${total} territories, and the South is thin`);
+    await sleep(2400);
+
+    // ── a Southern pin → its region → the list with the button ──────────────
+    const pin = await clickMarker(page, cursor, SOUTHERN);
+    const name = pin.ok ? (await page.locator('.ol-overlay-container a[title*="/territories/"]').first().textContent({ timeout: 4000 }).catch(() => '')).trim() : null;
+    await marks.beat('one', pin.ok ? `${name} — Southern` : pin.why);
+    await sleep(1200);
+    const regionLink = page.locator('.ol-overlay-container a[title*="/regions/"]').first();
+    if (!(await regionLink.count())) throw new Error('no region link in the popup');
+    await cursor.click(regionLink);
+    await page.waitForLoadState('load').catch(() => {});
+    await page.waitForSelector('.ldh-pane.is-active button.add-instance', { timeout: 25_000 }).catch(() => {});
+    await sleep(1500);
+    await marks.beat('region', 'Southern — eight cities, and a Create button on the list');
+    await sleep(2400);
+
+    // ── say why, before the work ────────────────────────────────────────────
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const p1 = await addProse(page, cursor, type,
+      'Southern has eight territories and one rep, and four of the eight have nobody on them. Northwind is opening a ninth, in Houston. The region page lists its cities and carries a Create button, so the territory is created where it will be listed.');
+    await marks.beat('question', p1.ok ? 'the decision, written down' : p1.why);
+    await sleep(3200);
+
+    // ── back to the region, and create the city from its own list ───────────
+    const back = await searchGo(page, cursor, 'Southern', { type: 'Place' });
+    await marks.beat('back-to-region', back.ok ? 'Southern, found by name' : back.why);
+    if (!back.ok) throw new Error(back.why);
+    const made2 = await createFromView(page, cursor, {
+      '^Title': CITY, '^Name': CITY, 'Identifier': '77001', 'Latitude|^Lat\\b': '29.7604', 'Longitude|^Long\\b': '-95.3698',
+    }, { view: 'Cities in this region' });
+    await marks.beat('houston', made2.ok
+      ? `${CITY} — created from the region's own list${made2.unmatched?.length ? '; unfilled: ' + made2.unmatched.join(', ') : ''}`
+      : `${made2.why}${made2.unmatched?.length ? '; fields: ' + made2.unmatched.join(', ') : ''}`);
+    if (!made2.ok) throw new Error(made2.why);
+    await sleep(2200);
+
+    // ── the map, with one more pin ──────────────────────────────────────────
+    // From the new city's page the breadcrumb reads Root › Territories › Houston;
+    // from the region page (if Save stayed there) it is Root › the list.
+    let toMap = await crumbGo(page, cursor, 'Territories');
+    if (!toMap.ok) { await crumbGo(page, cursor, 'Root'); await sleep(600); toMap = await listGo(page, cursor, 'Territories'); }
+    await page.waitForSelector('.ol-viewport canvas', { timeout: 25_000 }).catch(() => {});
+    await sleep(2500);
+    const now = (await page.locator('.ldh-view-toolbar .right .count b').first().textContent({ timeout: 4000 }).catch(() => '?')).trim();
+    await marks.beat('pin', toMap.ok ? `${now} territories now — one more pin, in Texas` : toMap.why);
+    await sleep(2400);
+
+    // ── the page, with the map on it ────────────────────────────────────────
+    const up = await crumbGo(page, cursor, 'Root');
+    if (!up.ok) throw new Error(up.why);
+    await sleep(600);
+    const home = await listGo(page, cursor, TITLE);
+    if (!home.ok) throw new Error(home.why);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const o1 = await addObject(page, cursor, type, null, { label: 'All territories', kind: 'View', mode: 'Map' });
+    await marks.beat('embed', o1.ok ? 'the map, embedded — Houston on it' : o1.why);
+    await sleep(1400);
+    const p2 = await addProse(page, cursor, type,
+      `${CITY} is on the map. ${now} territories now, and Southern's ninth — created from the region's own list, with the region already filled in.`);
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(700);
+    const scrolled = await scrollThrough(page, { duration: 5600 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/10-the-dearest-thing.mjs b/screencast/scenes/10-the-dearest-thing.mjs
new file mode 100644
index 00000000..14f9911f
--- /dev/null
+++ b/screencast/scenes/10-the-dearest-thing.mjs
@@ -0,0 +1,148 @@
+// "The dearest thing in the catalogue."
+//
+// Opens on the categories grid — eight photographs. Beverages leads to its own product
+// list (the derived "Products in this category" view), and one price in it is ten
+// times the rest: Côte de Blaye at $263.50 with nineteen buyers and a page that says
+// the price, the supplier and nothing about the wine. This scene writes onto THAT page:
+// what is published about it — the thesaurus's concept for winemaking, fetched through
+// the proxy, and a video from its appellation, pasted in as a link and rendered as a
+// resource. Every block it leaves is stripped again before the next take.
+//
+//   make scene SCENE=10-the-dearest-thing BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { clearBlocks } from '../lib/fixture.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+import { addProse, addObject, switchDocumentMode } from '../lib/blocks.mjs';
+import { goToTab, searchGo, activeDocument } from '../lib/nav.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OPENS_ON = `${base}/categories/`;
+const CATEGORY = 'Beverages';
+const CONCEPT = 'Winemaking';
+const VIDEO = 'https://www.youtube.com/watch?v=B-m8UoieRLs';
+
+// The dearest product, read from the data — its name, price, page and buyers.
+const [top] = await sparql(base, `PREFIX schema: <https://schema.org/>
+PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
+SELECT ?product ?name ?price (COUNT(DISTINCT ?customer) AS ?buyers) WHERE {
+  GRAPH ?g { ?product a schema:Product ; schema:name ?name ; schema:offers ?offer . ?offer schema:price ?price }
+  OPTIONAL { GRAPH ?h { ?order a schema:Order ; schema:customer ?customer ; schema:orderedItem ?li . ?li schema:orderedItem ?product } }
+} GROUP BY ?product ?name ?price ORDER BY DESC(xsd:decimal(?price)) LIMIT 1`);
+if (!top) throw new Error('no priced product');
+const PRODUCT = top.name, PRICE = Number(top.price).toFixed(2), BUYERS = top.buyers;
+const PAGE = top.product.replace(/#.*$/, '');
+console.log(`dearest: ${PRODUCT} $${PRICE}, ${BUYERS} buyers — ${PAGE}`);
+
+const cleared = await clearBlocks({ ldh: opts.ldh, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, url: PAGE });
+console.log(`cleanup: blocks stripped from ${PAGE}: ${cleared.ok ? 'ok' : cleared.out}`);
+
+await runScene({
+  id: '10-the-dearest-thing',
+  target: OPENS_ON, warm: OPENS_ON, identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks }) {
+    async function backTo(target, tabLabel) {
+      const home = async () => { const at = await activeDocument(page); return !!at && at.startsWith(target); };
+      await goToTab(page, cursor, tabLabel);
+      await sleep(700);
+      if (await home()) return true;
+      for (let i = 0; i < 4 && !(await home()); i++) { await page.goBack({ waitUntil: 'load' }).catch(() => {}); await sleep(750); }
+      return home();
+    }
+
+    // ── the photographs, already painted ────────────────────────────────────
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForFunction(
+      () => [...document.querySelectorAll('.ldh-block-body img[src*="/uploads/"]')].filter((i) => i.complete && i.naturalWidth > 0).length >= 8,
+      { timeout: 30_000 },
+    ).catch(() => {});
+    await marks.beat('grid', 'eight categories, photographed');
+    await sleep(2200);
+
+    // ── one tile → its products ─────────────────────────────────────────────
+    // A card is one link: photograph, title (.ti) and description together.
+    const tile = page.locator('.ldh-pane.is-active .ldh-grid-block a.card').filter({ has: page.locator('.ti', { hasText: new RegExp(`^\\s*${CATEGORY}\\s*$`) }) }).first();
+    if (!(await tile.count())) throw new Error(`no ${CATEGORY} tile`);
+    await cursor.click(tile);
+    await page.waitForLoadState('load').catch(() => {});
+    const list = page.locator('.ldh-pane.is-active .ldh-block[data-for-class]').filter({ hasText: 'Products in this category' }).first();
+    await list.waitFor({ state: 'visible', timeout: 25_000 }).catch(() => {});
+    await sleep(2200);
+    const n = (await list.locator('.ldh-view-toolbar .count b').first().textContent({ timeout: 4000 }).catch(() => '?')).trim();
+    await marks.beat('category', `${CATEGORY} — its ${n} products, listed on its own page`);
+    await sleep(1600);
+
+    // ── twelve prices, one of them ten times the rest ───────────────────────
+    // The table's headers are labels, not controls (FINDINGS.md #12), so the row is
+    // found by reading the Price column — which is what a person does with twelve rows.
+    const rows = list.locator('table tbody tr');
+    const dear = rows.filter({ hasText: PRODUCT }).first();
+    if (!(await dear.count())) throw new Error(`${PRODUCT} is not in the list`);
+    await dear.scrollIntoViewIfNeeded();
+    const priceCell = dear.locator('td').filter({ hasText: new RegExp(`^\\s*${PRICE.replace('.', '\\.')}\\s*$`) }).first();
+    await cursor.moveTo(...Object.values(await priceCell.boundingBox().then((b) => ({ x: b.x + b.width / 2, y: b.y + b.height / 2 }))), { duration: 700 });
+    await marks.beat('dearest', `${PRODUCT} — $${PRICE}; the next dearest beverage is a fraction of it`);
+    await sleep(2200);
+
+    // ── the product's own page: price, supplier, orders — and nothing about the wine ──
+    const row = dear.locator('a').filter({ hasText: PRODUCT }).first();
+    await cursor.click(row);
+    await page.waitForLoadState('load').catch(() => {});
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 25_000 }).catch(() => {});
+    await sleep(3000);
+    await marks.beat('bare', `${PRODUCT} — ${BUYERS} buyers, and a page that says the price and the supplier`);
+    await sleep(2600);
+
+    // ── say why, before the work ────────────────────────────────────────────
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const p1 = await addProse(page, cursor, type,
+      `${PRODUCT} is the dearest thing in the catalogue at $${PRICE} a bottle, and ${BUYERS} customers buy it. The page carries its price, its supplier and its orders, and nothing about the wine. What follows is what is published about it: the thesaurus's concept, and a video from its appellation.`);
+    await marks.beat('question', p1.ok ? 'the gap, written on the page itself' : p1.why);
+    await sleep(3200);
+
+    // ── the concept, from another dataspace, through the proxy ──────────────
+    const apps = page.locator('button.btn-apps').first();
+    if (!(await apps.count())) throw new Error('no dataspaces menu');
+    await cursor.click(apps);
+    await sleep(550);
+    const unesco = page.locator('.ac-menu-item:visible, .ac-menu a:visible').filter({ hasText: 'UNESCO' }).first();
+    if (!(await unesco.count())) throw new Error('no UNESCO entry in the dataspaces menu');
+    await cursor.click(unesco);
+    await page.waitForLoadState('load').catch(() => {});
+    await sleep(2700);
+    await marks.beat('thesaurus', `a published vocabulary, rendered here: ${page.url().includes('uri=') ? 'through the proxy' : 'directly'}`);
+    await sleep(700);
+    const found = await searchGo(page, cursor, CONCEPT, { type: 'Concept' });
+    await marks.beat('search', found.ok ? `${found.total} matches for ${CONCEPT} — the thesaurus's own concept` : found.why);
+    if (!found.ok) throw new Error(found.why);
+    await sleep(1800);
+
+    const home = await backTo(PAGE, PRODUCT);
+    await sleep(550);
+    await marks.beat('return', home ? `back to ${PRODUCT}, in Content` : `lost — still on ${await activeDocument(page)}`);
+    if (!home) throw new Error(`refusing to write: the active pane is ${await activeDocument(page)}, not ${PAGE}`);
+    const o1 = await addObject(page, cursor, type, null, { label: CONCEPT, kind: 'Concept', mode: 'Properties' });
+    await marks.beat('embed-concept', o1.ok ? 'the concept, embedded on the product page' : o1.why);
+    await sleep(1400);
+
+    // ── the video: a link pasted in, dereferenced into a resource ───────────
+    const o2 = await addObject(page, cursor, type, VIDEO, { settle: 6000 });
+    await marks.beat('embed-video', o2.ok ? 'a YouTube link, typed in — and rendered as a resource: the video, its channel, its thumbnail' : o2.why);
+    await sleep(2600);
+
+    const p2 = await addProse(page, cursor, type,
+      `Two things this page did not have: the concept, from a thesaurus in another dataspace, and a video from the Blaye appellation, fetched from a pasted link. Both are resources on the page, and both stay linked to where they came from.`);
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(700);
+    const scrolled = await scrollThrough(page, { duration: 6000 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/11-a-new-order.mjs b/screencast/scenes/11-a-new-order.mjs
new file mode 100644
index 00000000..cc819ed7
--- /dev/null
+++ b/screencast/scenes/11-a-new-order.mjs
@@ -0,0 +1,127 @@
+// "A new order."
+//
+// Opens on a customer's page: their record and every order they have placed, listed by
+// the derived "Orders from this customer" view, which carries a Create button. The order
+// is booked there — customer already filled in, rep picked by name — and the same list
+// is read again: one row more. Which customer, and which number the order gets, are
+// read from the data at start.
+//
+//   make scene SCENE=11-a-new-order BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle, removeAll } from '../lib/fixture.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+import { crumbGo, searchGo, listGo } from '../lib/nav.mjs';
+import { addProse, addObject, switchDocumentMode } from '../lib/blocks.mjs';
+import { createItem, createFromView } from '../lib/constructors.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const TITLE = 'A new order';
+const CUSTOMER = 'Gourmet Lanchonetes';
+const REP = 'Peacock';
+const TODAY = new Date().toISOString().slice(0, 10);
+
+// Last take's order is the one dated today (the demo's book ends in 1998); it goes
+// first, so the number the scene picks is the same every time.
+const stale = await sparql(base, `PREFIX schema: <https://schema.org/>
+SELECT ?doc WHERE { GRAPH ?doc { ?o a schema:Order ; schema:orderDate ?d FILTER(STR(?d) = "${TODAY}") } }`);
+if (stale.length) {
+  const gone = await removeAll({ ldh: opts.ldh, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, urls: stale.map((r) => r.doc) });
+  console.log(`cleanup: removed ${gone.filter(([, ok]) => ok).length} order(s) dated today`);
+}
+
+const [c] = await sparql(base, `PREFIX schema: <https://schema.org/>
+SELECT ?customer (COUNT(?o) AS ?orders) ?maxid WHERE {
+  GRAPH ?g { ?customer schema:legalName "${CUSTOMER}" }
+  GRAPH ?h { ?o a schema:Order ; schema:customer ?customer }
+  { SELECT (MAX(?i) AS ?maxid) WHERE { GRAPH ?k { ?x a schema:Order ; schema:identifier ?i } } }
+} GROUP BY ?customer ?maxid`);
+if (!c) throw new Error(`${CUSTOMER} not found`);
+const ORDER_ID = String(Number(c.maxid) + 1);
+const PAGE = c.customer.replace(/#.*$/, '');
+console.log(`${CUSTOMER}: ${c.orders} orders; next order number ${ORDER_ID}`);
+
+for (const t of [TITLE, ORDER_ID]) {
+  const gone = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: t });
+  console.log(`cleanup: removed ${gone.removed.length} earlier "${t}"`);
+}
+const OPENS_ON = PAGE;
+let url = null;
+
+await runScene({
+  id: '11-a-new-order',
+  target: OPENS_ON, warm: OPENS_ON, identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks }) {
+    const ordersView = () => page.locator('.ldh-pane.is-active .ldh-block[data-for-class]').filter({ hasText: 'Orders from this customer' }).first();
+    const count = async () => (await ordersView().locator('.ldh-view-toolbar .count b').first().textContent({ timeout: 4000 }).catch(() => '?')).trim();
+
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await ordersView().locator('.ldh-view-toolbar .count b').first().waitFor({ state: 'visible', timeout: 25_000 }).catch(() => {});
+    await sleep(800);
+    await marks.beat('customer', `${CUSTOMER} — ${await count()} orders, listed on their own page`);
+    await sleep(2600);
+
+    // ── say why, before the work ────────────────────────────────────────────
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const p1 = await addProse(page, cursor, type,
+      `${CUSTOMER} phoned in an order. Their page lists every order they have placed, and the list carries a Create button, so the order is booked where it will be listed, with the customer already filled in.`);
+    await marks.beat('question', p1.ok ? 'the job, written down' : p1.why);
+    await sleep(3200);
+
+    // ── back to the customer, and the order booked from their own list ──────
+    const back = await searchGo(page, cursor, CUSTOMER, { type: 'Company' });
+    await marks.beat('back-to-customer', back.ok ? `${CUSTOMER}, found by name` : back.why);
+    if (!back.ok) throw new Error(back.why);
+    const booked = await createFromView(page, cursor, {
+      '^Title': ORDER_ID, '^Identifier': ORDER_ID, '^Order date': TODAY, '^Sales rep': [REP, 'Person'],
+    }, { type, view: 'Orders from this customer' });
+    await marks.beat('order', booked.ok
+      ? `order ${ORDER_ID} — ${TODAY}, ${REP}, customer prefilled${booked.unmatched?.length ? '; unfilled: ' + booked.unmatched.join(', ') : ''}`
+      : `${booked.why}${booked.unmatched?.length ? '; fields: ' + booked.unmatched.join(', ') : ''}`);
+    if (!booked.ok) throw new Error(booked.why);
+    await sleep(2400);
+
+    // ── the same list, read again ───────────────────────────────────────────
+    const link = page.locator('.ldh-pane.is-active .ldh-block a').filter({ hasText: CUSTOMER }).first();
+    if (!(await link.count())) throw new Error('the order page does not link its customer');
+    await cursor.click(link);
+    await page.waitForLoadState('load').catch(() => {});
+    await ordersView().locator('.ldh-view-toolbar .count b').first().waitFor({ state: 'visible', timeout: 25_000 }).catch(() => {});
+    await sleep(2500);
+    await marks.beat('customer-again', `${CUSTOMER} — the same list, read again: ${await count()} orders`);
+    await sleep(2600);
+
+    // ── the page, with the order on it ──────────────────────────────────────
+    const up = await crumbGo(page, cursor, 'Root');
+    if (!up.ok) throw new Error(up.why);
+    await sleep(600);
+    const home = await listGo(page, cursor, TITLE);
+    if (!home.ok) throw new Error(home.why);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const o1 = await addObject(page, cursor, type, null, { label: ORDER_ID, kind: 'Order', mode: 'Properties' });
+    await marks.beat('embed', o1.ok ? 'the order, embedded' : o1.why);
+    await sleep(1400);
+    const p2 = await addProse(page, cursor, type,
+      `Order ${ORDER_ID}, booked on ${TODAY} for ${CUSTOMER} by ${REP}. Their page listed ${c.orders} orders when this page was opened; it lists ${Number(c.orders) + 1} now.`);
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(700);
+    const scrolled = await scrollThrough(page, { duration: 5600 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/13-a-new-product.mjs b/screencast/scenes/13-a-new-product.mjs
new file mode 100644
index 00000000..f8b92fa5
--- /dev/null
+++ b/screencast/scenes/13-a-new-product.mjs
@@ -0,0 +1,117 @@
+// "A new product."
+//
+// Opens on the categories grid. Beverages leads to its own product list — the derived
+// "Products in this category" view, which carries a Create button — and the product is
+// created there, category already filled in, supplier picked by name. The same list is
+// read again: thirteen.
+//
+//   make scene SCENE=13-a-new-product BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle } from '../lib/fixture.mjs';
+import { crumbGo, searchGo, listGo } from '../lib/nav.mjs';
+import { addProse, addObject, switchDocumentMode } from '../lib/blocks.mjs';
+import { createItem, createFromView } from '../lib/constructors.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OPENS_ON = `${base}/categories/`;
+const TITLE = 'A new product';
+const CATEGORY = 'Beverages';
+const SUPPLIER = 'Exotic Liquids';
+const PRODUCT = 'Exotic Liquids Ginger Beer';
+
+for (const t of [TITLE, PRODUCT]) {
+  const gone = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: t });
+  console.log(`cleanup: removed ${gone.removed.length} earlier "${t}"`);
+}
+let url = null;
+
+await runScene({
+  id: '13-a-new-product',
+  target: OPENS_ON, warm: OPENS_ON, identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks }) {
+    const list = () => page.locator('.ldh-pane.is-active .ldh-block[data-for-class]').filter({ hasText: 'Products in this category' }).first();
+    const count = async () => (await list().locator('.ldh-view-toolbar .count b').first().textContent({ timeout: 4000 }).catch(() => '?')).trim();
+
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForFunction(
+      () => [...document.querySelectorAll('.ldh-block-body img[src*="/uploads/"]')].filter((i) => i.complete && i.naturalWidth > 0).length >= 8,
+      { timeout: 30_000 },
+    ).catch(() => {});
+    await marks.beat('grid', 'eight categories, photographed');
+    await sleep(2200);
+
+    const tile = page.locator('.ldh-pane.is-active .ldh-grid-block a.card').filter({ has: page.locator('.ti', { hasText: new RegExp(`^\\s*${CATEGORY}\\s*$`) }) }).first();
+    if (!(await tile.count())) throw new Error(`no ${CATEGORY} tile`);
+    await cursor.click(tile);
+    await page.waitForLoadState('load').catch(() => {});
+    await list().waitFor({ state: 'visible', timeout: 25_000 }).catch(() => {});
+    await sleep(2200);
+    const before = await count();
+    await marks.beat('category', `${CATEGORY} — its ${before} products, listed on its own page, with a Create button`);
+    await sleep(2600);
+
+    // ── say why, before the work ────────────────────────────────────────────
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const p1 = await addProse(page, cursor, type,
+      `${SUPPLIER}, who supply Chai and Chang, have added a ginger beer. ${CATEGORY} lists its products on its own page and carries a Create button, so the product is created where it will be listed, with the category already filled in.`);
+    await marks.beat('question', p1.ok ? 'the job, written down' : p1.why);
+    await sleep(3200);
+
+    // ── back to the category, and the product created from its own list ────
+    const back = await searchGo(page, cursor, CATEGORY, { type: 'Category' });
+    await marks.beat('back-to-category', back.ok ? `${CATEGORY}, found by name` : back.why);
+    if (!back.ok) throw new Error(back.why);
+    const made2 = await createFromView(page, cursor, {
+      '^Title': PRODUCT, '^Name': PRODUCT, '^Identifier': '78', '^Description': '24 - 355 ml bottles', '^Provider': [SUPPLIER, 'Company'],
+    }, { type, view: 'Products in this category' });
+    await marks.beat('product', made2.ok
+      ? `${PRODUCT} — created from the category's own list${made2.unmatched?.length ? '; unfilled: ' + made2.unmatched.join(', ') : ''}`
+      : `${made2.why}${made2.unmatched?.length ? '; fields: ' + made2.unmatched.join(', ') : ''}`);
+    if (!made2.ok) throw new Error(made2.why);
+    await sleep(2400);
+
+    // ── the same list, read again ───────────────────────────────────────────
+    const link = page.locator('.ldh-pane.is-active .ldh-block a').filter({ hasText: new RegExp(`^\\s*${CATEGORY}\\s*$`) }).first();
+    if (!(await link.count())) throw new Error('the product page does not link its category');
+    await cursor.click(link);
+    await page.waitForLoadState('load').catch(() => {});
+    await list().waitFor({ state: 'visible', timeout: 25_000 }).catch(() => {});
+    await sleep(2500);
+    await marks.beat('category-again', `${CATEGORY} — the same list, read again: ${await count()} products`);
+    await sleep(2600);
+
+    // ── the page, with the product on it ────────────────────────────────────
+    const up = await crumbGo(page, cursor, 'Root');
+    if (!up.ok) throw new Error(up.why);
+    await sleep(600);
+    const home = await listGo(page, cursor, TITLE);
+    if (!home.ok) throw new Error(home.why);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const o1 = await addObject(page, cursor, type, null, { label: PRODUCT, kind: 'Product', mode: 'Properties' });
+    await marks.beat('embed', o1.ok ? 'the product, embedded' : o1.why);
+    await sleep(1400);
+    const p2 = await addProse(page, cursor, type,
+      `${PRODUCT}: ${CATEGORY}'s thirteenth product, from ${SUPPLIER}. The category listed ${before} when this page was opened; it lists one more now.`);
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(700);
+    const scrolled = await scrollThrough(page, { duration: 5600 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/14-reporting-lines.mjs b/screencast/scenes/14-reporting-lines.mjs
new file mode 100644
index 00000000..bb8f32c8
--- /dev/null
+++ b/screencast/scenes/14-reporting-lines.mjs
@@ -0,0 +1,120 @@
+// "Reporting lines."
+//
+// Opens on the team grid. Fuller's page lists the five people who report to him — the
+// derived "Direct reports" view. King reports to Buchanan; the line is one link on
+// King's record, edited on his own page and re-pointed by name. Fuller's list, read
+// again: six.
+//
+//   make scene SCENE=14-reporting-lines BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle, patchDocument } from '../lib/fixture.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+import { crumbGo, searchGo, listGo } from '../lib/nav.mjs';
+import { addProse, switchDocumentMode } from '../lib/blocks.mjs';
+import { createItem } from '../lib/constructors.mjs';
+import { editResource, repoint, saveForm } from '../lib/editing.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OPENS_ON = `${base}/employees/`;
+const TITLE = 'Reporting lines';
+const WHO = 'King', FROM = 'Buchanan', TO = 'Fuller';
+
+const rep = async (fam) => (await sparql(base, `PREFIX schema: <https://schema.org/> SELECT ?e WHERE { GRAPH ?g { ?e a schema:Person ; schema:familyName "${fam}" } }`))[0]?.e;
+const [who, from, to] = await Promise.all([rep(WHO), rep(FROM), rep(TO)]);
+if (!who || !from || !to) throw new Error('rep not found');
+// Last take moved King; he goes back under Buchanan first.
+const reset = await patchDocument({ ldh: opts.ldh, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile,
+  url: who.replace(/#.*$/, ''),
+  update: `PREFIX schema: <https://schema.org/>\nDELETE { <${who}> schema:sponsor <${to}> }\nINSERT { <${who}> schema:sponsor <${from}> }\nWHERE {}` });
+console.log(`reset: ${WHO} reports to ${FROM}: ${reset.ok ? 'ok' : reset.out}`);
+const gone = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: TITLE });
+console.log(`cleanup: removed ${gone.removed.length} earlier "${TITLE}"`);
+let url = null;
+
+await runScene({
+  id: '14-reporting-lines',
+  target: OPENS_ON, warm: OPENS_ON, identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks }) {
+    const reports = () => page.locator('.ldh-pane.is-active .ldh-block[data-for-class]').filter({ hasText: 'Direct reports' }).first();
+    const count = async () => (await reports().locator('.ldh-view-toolbar .count b').first().textContent({ timeout: 4000 }).catch(() => '?')).trim();
+
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForFunction(
+      () => [...document.querySelectorAll('.ldh-block-body img[src*="/uploads/"]')].filter((i) => i.complete && i.naturalWidth > 0).length >= 9,
+      { timeout: 30_000 },
+    ).catch(() => {});
+    await marks.beat('team', 'nine people, with their photographs');
+    await sleep(2200);
+
+    const tile = page.locator('.ldh-pane.is-active .ldh-grid-block a.card').filter({ has: page.locator('.ti', { hasText: new RegExp(`^\\s*${TO}\\s*$`) }) }).first();
+    if (!(await tile.count())) throw new Error(`no ${TO} tile`);
+    await cursor.click(tile);
+    await page.waitForLoadState('load').catch(() => {});
+    await reports().waitFor({ state: 'visible', timeout: 25_000 }).catch(() => {});
+    await sleep(2200);
+    const before = await count();
+    await marks.beat('manager', `${TO} — ${before} direct reports, listed on his page`);
+    await sleep(2600);
+
+    // ── say why, before the work ────────────────────────────────────────────
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const p1 = await addProse(page, cursor, type,
+      `${TO} has ${before} people reporting to him; ${FROM}, one of them, has three of his own. ${WHO} moves from ${FROM} to ${TO}. The reporting line is one link on ${WHO}'s record, and both managers' pages list who points at them.`);
+    await marks.beat('question', p1.ok ? 'the change, written down' : p1.why);
+    await sleep(3200);
+
+    // ── the link, re-pointed on the record ──────────────────────────────────
+    const k = await searchGo(page, cursor, WHO, { type: 'Person' });
+    if (!k.ok) throw new Error(k.why);
+    const ed = await editResource(page, cursor, /Family name/);
+    await marks.beat('edit', ed.ok ? `${WHO} — reports to ${FROM}; open for editing` : ed.why);
+    if (!ed.ok) throw new Error(ed.why);
+    await sleep(900);
+    const rp = await repoint(page, cursor, type, ed.form, 'Reports to', TO, { kind: 'Person' });
+    if (!rp.ok) throw new Error(rp.why);
+    const sv = await saveForm(page, cursor, ed.form);
+    await marks.beat('repoint', sv.ok ? `reports to ${TO} — picked by name, saved` : sv.why);
+    if (!sv.ok) throw new Error(sv.why);
+    await sleep(1400);
+
+    // ── the same list, read again ───────────────────────────────────────────
+    // Fuller's page, by name — the record's own link is not reliably rendered
+    // right after the save (the pre-edit block lingers), and search is one gesture.
+    const f = await searchGo(page, cursor, TO, { type: 'Person' });
+    if (!f.ok) throw new Error(f.why);
+    await reports().waitFor({ state: 'visible', timeout: 25_000 }).catch(() => {});
+    await sleep(2500);
+    await marks.beat('manager-again', `${TO} — the same list, read again: ${await count()} direct reports`);
+    await sleep(2600);
+
+    const up = await crumbGo(page, cursor, 'Root');
+    if (!up.ok) throw new Error(up.why);
+    await sleep(600);
+    const home = await listGo(page, cursor, TITLE);
+    if (!home.ok) throw new Error(home.why);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const p2 = await addProse(page, cursor, type,
+      `${WHO} now reports to ${TO}: ${before} direct reports when this page was opened, ${Number(before) + 1} now, and ${FROM} has two. One link changed; two pages read differently.`);
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(700);
+    const scrolled = await scrollThrough(page, { duration: 4200 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/16-a-territory-where-the-orders-are.mjs b/screencast/scenes/16-a-territory-where-the-orders-are.mjs
new file mode 100644
index 00000000..7ab7939f
--- /dev/null
+++ b/screencast/scenes/16-a-territory-where-the-orders-are.mjs
@@ -0,0 +1,161 @@
+// "A territory where the orders are."
+//
+// Opens on the territory map: where Northwind has reps. It says nothing about where
+// the orders go. A query counts US deliveries by city for cities with no territory —
+// Boise, thirty-one orders, on top — and a territory is opened there, created from the
+// region's own list. The chart is read again: Boise is gone from it. The map: one pin
+// more. Which city, and which region, are read from the data at start.
+//
+//   make scene SCENE=16-a-territory-where-the-orders-are BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle } from '../lib/fixture.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+import { crumbGo, searchGo, listGo } from '../lib/nav.mjs';
+import { addProse, addObject, switchDocumentMode } from '../lib/blocks.mjs';
+import { create, createItem, createFromView, typeQuery, fill, save, configureChart } from '../lib/constructors.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OPENS_ON = `${base}/territories/`;
+const TITLE = 'A territory where the orders are';
+const REGION = 'Western';
+// Boise: the city's own postcode and coordinates, as a person would look them up.
+const CITY = { name: 'Boise', id: '83702', lat: '43.6150', long: '-116.2023' };
+
+for (const t of [TITLE, CITY.name]) {
+  const gone = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: t });
+  console.log(`cleanup: removed ${gone.removed.length} earlier "${t}"`);
+}
+const [top] = await sparql(base, `PREFIX schema: <https://schema.org/>
+SELECT ?city (COUNT(DISTINCT ?o) AS ?orders) WHERE {
+  GRAPH ?g { ?o a schema:Order ; schema:orderDelivery ?d . ?d schema:deliveryAddress ?a . ?a schema:addressCountry "USA" ; schema:addressLocality ?city }
+  FILTER NOT EXISTS { GRAPH ?h { ?t a schema:City ; schema:name ?city } }
+} GROUP BY ?city ORDER BY DESC(?orders) LIMIT 1`);
+if (!top || top.city !== CITY.name) throw new Error(`the top uncovered delivery city is ${top?.city}, not ${CITY.name}`);
+console.log(`${CITY.name}: ${top.orders} US orders delivered there, no territory`);
+
+const QUERY = `PREFIX schema: <https://schema.org/>
+
+SELECT ?city (COUNT(DISTINCT ?order) AS ?orders)
+WHERE {
+GRAPH ?g {
+?order a schema:Order ;
+schema:orderDelivery ?delivery .
+?delivery schema:deliveryAddress ?address .
+?address schema:addressCountry "USA" ;
+schema:addressLocality ?city .
+}
+FILTER NOT EXISTS {
+GRAPH ?h {
+?territory a schema:City ;
+schema:name ?city .
+}
+}
+}
+GROUP BY ?city
+ORDER BY DESC(?orders)
+LIMIT 10`;
+let url = null;
+
+await runScene({
+  id: '16-a-territory-where-the-orders-are',
+  target: OPENS_ON, warm: OPENS_ON, identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks }) {
+    const mapCount = async () => (await page.locator('.ldh-view-toolbar .right .count b').first().textContent({ timeout: 4000 }).catch(() => '?')).trim();
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-view-toolbar .right .count b', { timeout: 25_000 }).catch(() => {});
+    await page.waitForSelector('.ol-viewport canvas', { timeout: 25_000 }).catch(() => {});
+    const before = await mapCount();
+    await marks.beat('map', `${before} territories — where the reps are`);
+    await sleep(2600);
+
+    // ── say why, before the work ────────────────────────────────────────────
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const p1 = await addProse(page, cursor, type,
+      'The territory map shows where Northwind has reps. It says nothing about where the orders go. This page counts US deliveries by city for the cities with no territory, and opens one where most of them land.');
+    await marks.beat('question', p1.ok ? 'the question, written down' : p1.why);
+    await sleep(3200);
+
+    // ── the count, as a chart ───────────────────────────────────────────────
+    await switchDocumentMode(page, cursor, 'read-mode');
+    await sleep(600);
+    const cs = await create(page, cursor, 'SELECT');
+    await marks.beat('new-select', cs.ok ? 'a SELECT, created on this document' : cs.why);
+    if (!cs.ok) throw new Error(cs.why);
+    const q = await typeQuery(page, cursor, QUERY);
+    await marks.beat('query', q.ok ? `US deliveries by city, no territory — ${q.lines} lines${q.verified ? ', read back and matching' : ''}` : q.why);
+    await sleep(700);
+    await fill(page, cursor, 'Title', 'US deliveries with no territory');
+    const s1 = await save(page, cursor);
+    await marks.beat('save-select', s1.ok ? 'saved' : s1.why);
+    await sleep(1000);
+    const queryRow = page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'US deliveries with no territory' }).first();
+    const cfg = await configureChart(page, cursor, queryRow, { type: 'Bar chart', category: 'city', series: ['orders'] });
+    await marks.beat('chart-pane', cfg.ok ? `${CITY.name} on top — ${top.orders} orders, nobody there` : cfg.why);
+    await sleep(700);
+    const createChart = queryRow.locator('button.ac-btn.in-primary').filter({ hasText: /^Create$/ }).first();
+    if (!(await createChart.count())) throw new Error('no Create on the query');
+    await createChart.scrollIntoViewIfNeeded();
+    await cursor.click(createChart);
+    await sleep(2400);
+    await fill(page, cursor, 'Title', 'US deliveries with no territory');
+    const s2 = await save(page, cursor);
+    await marks.beat('save-chart', s2.ok ? 'saved — a chart anyone can render' : s2.why);
+    await sleep(250);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(700);
+    const o1 = await addObject(page, cursor, type, null, { label: 'US deliveries with no territory', kind: 'Result set chart' });
+    await marks.beat('embed', o1.ok ? 'the chart, embedded' : o1.why);
+    await sleep(2400);
+
+    // ── a territory, opened where the orders land ───────────────────────────
+    const region = await searchGo(page, cursor, REGION, { type: 'Region' });
+    await marks.beat('region', region.ok ? `${REGION} — and its cities, listed on its own page with a Create button` : region.why);
+    if (!region.ok) throw new Error(region.why);
+    const opened = await createFromView(page, cursor, {
+      '^Title': CITY.name, '^Name': CITY.name, '^Identifier': CITY.id, 'Latitude|^Lat\\b': CITY.lat, 'Longitude|^Long\\b': CITY.long,
+    }, { view: 'Cities in this region' });
+    await marks.beat('boise', opened.ok ? `${CITY.name} — created from the region's own list` : opened.why);
+    if (!opened.ok) throw new Error(opened.why);
+    await sleep(2200);
+
+    // ── the map, then the chart, read again ─────────────────────────────────
+    let toMap = await crumbGo(page, cursor, 'Territories');
+    if (!toMap.ok) { await crumbGo(page, cursor, 'Root'); await sleep(600); toMap = await listGo(page, cursor, 'Territories'); }
+    await page.waitForSelector('.ol-viewport canvas', { timeout: 25_000 }).catch(() => {});
+    await sleep(2500);
+    await marks.beat('pin', `${await mapCount()} territories now — one more pin, in Idaho`);
+    await sleep(2400);
+    const up = await crumbGo(page, cursor, 'Root');
+    if (!up.ok) throw new Error(up.why);
+    await sleep(600);
+    const home = await listGo(page, cursor, TITLE);
+    if (!home.ok) throw new Error(home.why);
+    await sleep(4500);
+    await marks.beat('chart-again', `the same chart, read again — ${CITY.name} is no longer on it`);
+    await sleep(2600);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const p2 = await addProse(page, cursor, type,
+      `${CITY.name} took ${top.orders} US orders with nobody there. It is a territory now, in ${REGION}, and the chart above — the same query, run again — starts with the next city down.`);
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(700);
+    const scrolled = await scrollThrough(page, { duration: 5600 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/capture-basemap.mjs b/screencast/scenes/capture-basemap.mjs
new file mode 100644
index 00000000..f1ac6335
--- /dev/null
+++ b/screencast/scenes/capture-basemap.mjs
@@ -0,0 +1,22 @@
+// A clean basemap raster for the mock: the app's own OpenLayers map, pins hidden, view
+// framed on the south-central US at a zoom that leaves room for a new pin. Read-only.
+import { chromium } from 'playwright';
+import { resolve } from '../lib/harness.mjs';
+const opts = await resolve('/'); const { base, identity } = opts;
+const b = await chromium.launch();
+const ctx = await b.newContext({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 2, colorScheme: 'dark', ignoreHTTPSErrors: true, clientCertificates: identity ?? [] });
+await ctx.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+await ctx.addInitScript(() => { let ol; Object.defineProperty(window, 'ol', { configurable: true, get() { return ol; }, set(v) { if (v && v.Map && !v.Map.__captured) { const Orig = v.Map; const C = function (...a) { const m = new Orig(...a); (window.__olMaps ||= []).push(m); return m; }; C.prototype = Orig.prototype; Object.setPrototypeOf(C, Orig); C.__captured = true; v.Map = C; } ol = v; } }); });
+const p = await ctx.newPage();
+await p.goto(base + '/territories/', { waitUntil: 'load' }); await p.waitForSelector('.ol-viewport canvas', { timeout: 30_000 }); await p.waitForTimeout(3000);
+await p.evaluate(() => { const m = (window.__olMaps || []).at(-1); for (const l of m.getLayers().getArray()) if (l.getSource && l.getSource() && l.getSource().getFeatures) l.setVisible(false); m.getView().setCenter(ol.proj.fromLonLat([-96.5, 36.5])); m.getView().setZoom(4.6); });
+await p.waitForTimeout(4000);
+const vp = p.locator('.ldh-pane.is-active .ol-viewport').first();
+await vp.screenshot({ path: 'mock/assets/basemap-us.png' });
+console.log('  basemap:', JSON.stringify(await vp.boundingBox()));
+// project a few made-up cities on this view for the pin list
+const cities = { Dallas: [-96.797, 32.777], Houston: [-95.369, 29.760], Austin: [-97.743, 30.267], 'San Antonio': [-98.494, 29.424], 'El Paso': [-106.485, 31.762], Amarillo: [-101.831, 35.222], 'Oklahoma City': [-97.516, 35.468], Tulsa: [-95.993, 36.154], 'Little Rock': [-92.289, 34.746], Memphis: [-90.049, 35.150], 'New Orleans': [-90.071, 29.951], 'Baton Rouge': [-91.187, 30.451], Jackson: [-90.185, 32.299], Birmingham: [-86.802, 33.521], Nashville: [-86.781, 36.163], Atlanta: [-84.388, 33.749], 'Kansas City': [-94.579, 39.100], 'St. Louis': [-90.199, 38.627], Denver: [-104.990, 39.739], Albuquerque: [-106.650, 35.084], Phoenix: [-112.074, 33.448], 'Santa Fe': [-105.938, 35.687], Wichita: [-97.330, 37.687], Omaha: [-95.934, 41.257], Chicago: [-87.630, 41.878], Indianapolis: [-86.158, 39.768], Louisville: [-85.758, 38.253], Charlotte: [-80.843, 35.227], Jacksonville: [-81.656, 30.332], Tampa: [-82.457, 27.951], Miami: [-80.192, 25.762], Savannah: [-81.099, 32.084], Columbia: [-81.035, 34.000], Raleigh: [-78.639, 35.780], Richmond: [-77.436, 37.541], Cincinnati: [-84.512, 39.103], Columbus: [-82.999, 39.961], Detroit: [-83.046, 42.331], Minneapolis: [-93.265, 44.978], 'Salt Lake City': [-111.891, 40.761], 'Las Vegas': [-115.139, 36.172], 'Los Angeles': [-118.244, 34.052], 'San Diego': [-117.161, 32.716] };
+const pins = await p.evaluate((cities) => { const m = (window.__olMaps || []).at(-1); return Object.entries(cities).map(([label, ll]) => { const [x, y] = m.getPixelFromCoordinate(ol.proj.fromLonLat(ll)); return { label, x: Math.round(x), y: Math.round(y) }; }); }, cities);
+await import('node:fs/promises').then((fs) => fs.writeFile('mock/assets/pins-us.json', JSON.stringify(pins, null, 1)));
+console.log(`  ${pins.length} pins projected`);
+await b.close();
diff --git a/screencast/scenes/capture-graph-chrome.mjs b/screencast/scenes/capture-graph-chrome.mjs
new file mode 100644
index 00000000..ee37d4be
--- /dev/null
+++ b/screencast/scenes/capture-graph-chrome.mjs
@@ -0,0 +1,27 @@
+// Read-only: the graph mode's chrome around the canvas (legend, zoom-to-fit, hint,
+// fullscreen) as a template, plus the page head in Graph mode.
+import { chromium } from 'playwright';
+import fs from 'node:fs/promises';
+import { resolve } from '../lib/harness.mjs';
+const opts = await resolve('/'); const { base, identity } = opts;
+const b = await chromium.launch();
+const ctx = await b.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: 'dark', ignoreHTTPSErrors: true, clientCertificates: identity ?? [] });
+await ctx.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const p = await ctx.newPage();
+await p.goto(`${base}/orders/10423/?mode=${encodeURIComponent('https://w3id.org/atomgraph/client#GraphMode')}`, { waitUntil: 'load' });
+await p.waitForSelector('canvas', { timeout: 30_000 }); await p.waitForTimeout(5000);
+const out = await p.evaluate(() => {
+  const canvas = document.querySelector('canvas');
+  let host = canvas; while (host && !/graph/i.test(host.className) && host.parentElement) host = host.parentElement;
+  const clone = host.cloneNode(true);
+  clone.querySelectorAll('canvas').forEach((c) => { const d = document.createElement('div'); d.setAttribute('data-slot', 'canvas'); d.setAttribute('style', `width:${c.clientWidth}px;height:${c.clientHeight}px`); c.replaceWith(d); });
+  clone.querySelectorAll('script').forEach((s) => s.remove());
+  clone.querySelectorAll('[id]').forEach((e) => e.removeAttribute('id'));
+  const r = host.getBoundingClientRect(); const cr = canvas.getBoundingClientRect();
+  return { html: clone.outerHTML, cls: host.className, box: { x: r.x, y: r.y, w: r.width, h: r.height }, canvas: { x: cr.x, y: cr.y, w: cr.width, h: cr.height }, header: document.querySelector('.ldh-header')?.outerHTML.replace(/ id="[^"]*"/g, '') ?? '', toolbar: document.querySelector('.ldh-doc-toolbar, .ldh-topbar, [class*="doc-bar"]')?.outerHTML.replace(/ id="[^"]*"/g, '') ?? '' };
+});
+await fs.writeFile('mock/templates/graph-host.html', out.html);
+await fs.writeFile('mock/templates/app-header.html', out.header + '\n' + out.toolbar);
+console.log(`  host .${out.cls} ${JSON.stringify(out.box)} canvas ${JSON.stringify(out.canvas)}; header ${out.header.length} chars, toolbar ${out.toolbar.length}`);
+console.log('  host html:', out.html.replace(/\s+/g, ' ').slice(0, 700));
+await b.close();
diff --git a/screencast/scenes/capture-graph-view.mjs b/screencast/scenes/capture-graph-view.mjs
new file mode 100644
index 00000000..7c670104
--- /dev/null
+++ b/screencast/scenes/capture-graph-view.mjs
@@ -0,0 +1,28 @@
+// Read-only: the employees view in Graph mode, as the app lays it out — nodes with their
+// projected screen positions, colours and sizes, and the links — for the mock to draw.
+import { chromium } from 'playwright';
+import fs from 'node:fs/promises';
+import { resolve } from '../lib/harness.mjs';
+const opts = await resolve('/'); const { base, identity } = opts;
+const b = await chromium.launch();
+const ctx = await b.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: 'dark', ignoreHTTPSErrors: true, clientCertificates: identity ?? [] });
+await ctx.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const p = await ctx.newPage();
+await p.goto(`${base}/employees/`, { waitUntil: 'load' }); await p.waitForSelector('.ldh-pane.is-active .ldh-view-toolbar', { timeout: 30_000 }); await p.waitForTimeout(3000);
+await p.locator('.ldh-pane.is-active .ldh-view-toolbar .ldh-mode .drop-toggle').first().click(); await p.waitForTimeout(500);
+await p.locator('.ldh-pane.is-active .ldh-view-toolbar .ldh-mode .modes-pop.view-mode-list button.mi.graph-mode').first().click();
+await p.waitForSelector('.ldh-pane.is-active canvas', { timeout: 30_000 }); await p.waitForTimeout(9000);
+const fit = p.locator('.ldh-pane.is-active button, .ldh-pane.is-active .ac-btn').filter({ hasText: /Zoom to fit/i }).first(); if (await fit.count()) { await fit.click(); await p.waitForTimeout(3000); }
+const data = await p.evaluate(() => {
+  const gs = window.LinkedDataHub?.graphs ?? {}; const live = Object.entries(gs).filter(([id]) => document.getElementById(id)?.offsetParent !== null); const g = (live.length ? live : Object.entries(gs)).at(-1)[1]; const fg = g.instance ?? g;
+  const canvas = document.querySelector('.ldh-pane.is-active canvas').getBoundingClientRect();
+  const d = fg.graphData(); const cam = fg.camera().position;
+  const nodes = d.nodes.map((n) => { const s = fg.graph2ScreenCoords(n.x, n.y, n.z); const dist = Math.hypot(n.x - cam.x, n.y - cam.y, n.z - cam.z); return { id: String(n.id), label: n.label ?? '', color: n.color ?? null, val: n.val ?? 1, x: s.x, y: s.y, depth: dist }; });
+  const idx = Object.fromEntries(nodes.map((n, i) => [n.id, i]));
+  const links = d.links.map((l) => ({ s: idx[String(l.source.id ?? l.source)], t: idx[String(l.target.id ?? l.target)] })).filter((l) => l.s != null && l.t != null);
+  return { canvas: { w: canvas.width, h: canvas.height }, nodes, links, relSize: fg.nodeRelSize?.(), linkWidth: fg.linkWidth?.() };
+});
+await fs.writeFile('mock/assets/graph-employees.json', JSON.stringify(data));
+const ds = data.nodes.map((n) => n.depth); console.log(`  ${data.nodes.length} nodes, ${data.links.length} links; canvas ${data.canvas.w}×${data.canvas.h}; depth ${Math.round(Math.min(...ds))}–${Math.round(Math.max(...ds))}; relSize ${data.relSize}`);
+await p.screenshot({ path: 'mock/assets/graph-employees-ref.png' });
+await b.close();
diff --git a/screencast/scenes/capture-modes.mjs b/screencast/scenes/capture-modes.mjs
new file mode 100644
index 00000000..e9e6108a
--- /dev/null
+++ b/screencast/scenes/capture-modes.mjs
@@ -0,0 +1,35 @@
+// Read-only: the SAME view (Northwind employees) rendered in Grid, Table and List modes,
+// as markup — templates for the six-shapes shot. Mode switches are UI state, nothing saved.
+import { chromium } from 'playwright';
+import fs from 'node:fs/promises';
+import { resolve } from '../lib/harness.mjs';
+const opts = await resolve('/'); const { base, identity } = opts;
+const b = await chromium.launch();
+const ctx = await b.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: 'dark', ignoreHTTPSErrors: true, clientCertificates: identity ?? [] });
+await ctx.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const p = await ctx.newPage();
+await p.goto(`${base}/employees/`, { waitUntil: 'load' }); await p.waitForSelector('.ldh-pane.is-active .ldh-view-toolbar', { timeout: 30_000 }); await p.waitForTimeout(4000);
+const grab = async (name) => {
+  const html = await p.evaluate(async () => {
+    const root = document.querySelector('.ldh-pane.is-active .ldh-block .container-results') || document.querySelector('.ldh-pane.is-active .container-results');
+    const clone = root.cloneNode(true);
+    const imgs = [...root.querySelectorAll('img')], cimgs = [...clone.querySelectorAll('img')];
+    for (let i = 0; i < imgs.length; i++) { try { const r = await fetch(imgs[i].src); const bl = await r.blob(); const d = await new Promise((res) => { const fr = new FileReader(); fr.onload = () => res(fr.result); fr.readAsDataURL(bl); }); cimgs[i].setAttribute('src', d); } catch {} }
+    clone.querySelectorAll('[id]').forEach((e) => e.removeAttribute('id')); clone.querySelectorAll('script').forEach((e) => e.remove());
+    return clone.outerHTML;
+  });
+  await fs.writeFile(`mock/templates/results-${name}.html`, html);
+  console.log(`  ${name}: ${Math.round(html.length / 1024)} KB`);
+};
+await grab('grid');
+for (const [mode, ready] of [['table-mode', 'table tbody tr'], ['list-mode', '.ldh-list-block, li, .list-item']]) {
+  const toggle = p.locator('.ldh-pane.is-active .ldh-view-toolbar .ldh-mode .drop-toggle').first();
+  await toggle.click(); await p.waitForTimeout(500);
+  const item = p.locator(`.ldh-pane.is-active .ldh-view-toolbar .ldh-mode .modes-pop.view-mode-list button.mi.${mode}`).first();
+  if (await item.count()) { await item.click(); await p.locator('.ldh-pane.is-active .container-results ' + ready).first().waitFor({ state: 'visible', timeout: 20_000 }).catch(() => {}); await p.waitForTimeout(2500); await grab(mode.replace('-mode', '')); } else { console.log(`  ${mode}: not offered`); await p.keyboard.press('Escape'); }
+}
+// the mode menu itself, open
+const toggle = p.locator('.ldh-pane.is-active .ldh-view-toolbar .ldh-mode .drop-toggle').first(); await toggle.click(); await p.waitForTimeout(500);
+await fs.writeFile('mock/templates/mode-menu.html', await p.evaluate(() => document.querySelector('.ldh-pane.is-active .ldh-view-toolbar .ldh-mode').outerHTML.replace(/ id="[^"]*"/g, '')));
+console.log('  mode menu captured');
+await b.close();
diff --git a/screencast/scenes/capture-states.mjs b/screencast/scenes/capture-states.mjs
new file mode 100644
index 00000000..8e5915a6
--- /dev/null
+++ b/screencast/scenes/capture-states.mjs
@@ -0,0 +1,122 @@
+// Capturing real UI states as self-contained HTML — the assets a vector mock animates
+// between. Each state: the active pane's markup with every computed style inlined,
+// images as data URIs, fonts left to the system stack. Read-only apart from opening a
+// form (never saved). SCHEME=dark captures the dark scheme.
+import { chromium } from 'playwright';
+import fs from 'node:fs/promises';
+import { resolve } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OUT = 'mock/states';
+let fontsDone = false;
+const browser = await chromium.launch();
+const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: process.env.SCHEME ?? 'dark', ignoreHTTPSErrors: true, clientCertificates: identity ?? [] });
+await ctx.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+await ctx.addInitScript(() => {
+  let ol; Object.defineProperty(window, 'ol', { configurable: true, get() { return ol; }, set(v) { if (v && v.Map && !v.Map.__captured) { const Orig = v.Map; const C = function (...a) { const m = new Orig(...a); (window.__olMaps ||= []).push(m); return m; }; C.prototype = Orig.prototype; Object.setPrototypeOf(C, Orig); C.__captured = true; v.Map = C; } ol = v; } });
+});
+const page = await ctx.newPage();
+
+// Serialise `selector` as it is — classes and all — with images as data URIs and the
+// canvases as PNGs. The app's own stylesheets are captured once beside it, so the mock
+// renders with the rules the app renders with, not a re-derivation of them.
+let cssDone = false;
+async function snapshot(selector, name) {
+  if (!cssDone) {
+    // Every stylesheet the page links, by SOURCE — cssRules omits what @import pulls in
+    // (app.css imports the design-system kit core.css, where buttons, inputs and the
+    // icon face live). Imports are inlined recursively, url()s become data URIs.
+    const hrefs = await page.evaluate(() => [...document.querySelectorAll('link[rel=stylesheet]')].map((l) => l.href).concat([...document.querySelectorAll('style')].map((st) => 'inline:' + st.textContent)));
+    const seen = new Set();
+    const fetchText = async (url) => { const r = await page.request.get(url).catch(() => null); return r && r.ok() ? await r.text() : ''; };
+    const inlineUrls = async (text, from) => {
+      const urls = [...new Set([...text.matchAll(/url\((["']?)([^"')]+)\1\)/g)].map((m) => m[2]))].filter((u) => !u.startsWith('data:') && !u.startsWith('#'));
+      for (const u of urls) { const abs = new URL(u, from).href; const r = await page.request.get(abs).catch(() => null); if (!r || !r.ok()) continue; const buf = await r.body(); const ct = r.headers()['content-type'] ?? 'application/octet-stream'; text = text.split(`url(${u})`).join(`url(data:${ct};base64,${buf.toString('base64')})`).split(`url("${u}")`).join(`url("data:${ct};base64,${buf.toString('base64')}")`).split(`url('${u}')`).join(`url('data:${ct};base64,${buf.toString('base64')}')`); }
+      return text;
+    };
+    const expand = async (text, from) => {
+      const imports = [...text.matchAll(/@import\s+(?:url\((["']?)([^"')]+)\1\)|(["'])([^"']+)\3)[^;]*;/g)];
+      for (const m of imports) {
+        const rel = m[2] ?? m[4]; const abs = new URL(rel, from).href;
+        let sub = '';
+        if (!seen.has(abs)) { seen.add(abs); sub = await expand(await fetchText(abs), abs); }
+        text = text.replace(m[0], `/* ${abs} */\n${sub}\n`);
+      }
+      return inlineUrls(text, from);
+    };
+    let css = '';
+    for (const h of hrefs) {
+      if (h.startsWith('inline:')) { css += `/* inline */\n${await inlineUrls(h.slice(7), base)}\n`; continue; }
+      if (seen.has(h)) continue; seen.add(h);
+      css += `/* ${h} */\n${await expand(await fetchText(h), h)}\n`;
+    }
+    await fs.writeFile(`${OUT}/app.css`, css);
+    const html = await page.evaluate(() => ({ htmlAttrs: [...document.documentElement.attributes].map((a) => `${a.name}="${a.value.replace(/"/g, '&quot;')}"`).join(' '), bodyClass: document.body.className }));
+    await fs.writeFile(`${OUT}/app.json`, JSON.stringify(html, null, 2));
+    console.log(`  css: ${seen.size} sheets (imports inlined), ${Math.round(css.length / 1024)} KB`);
+    cssDone = true;
+  }
+  const html = await page.evaluate(async (sel) => {
+    const root = sel === 'MODAL' ? [...document.querySelectorAll('.modal-constructor, .ac-modal')].filter((m) => m.offsetParent !== null).at(-1) : document.querySelector(sel);
+    if (!root) return null;
+    const toDataUri = async (src) => { try { const r = await fetch(src); const b = await r.blob(); return await new Promise((res) => { const fr = new FileReader(); fr.onload = () => res(fr.result); fr.readAsDataURL(b); }); } catch { return null; } };
+    const clone = root.cloneNode(true);
+    const src = root.querySelectorAll('*'), dst = clone.querySelectorAll('*');
+    for (let i = 0; i < src.length; i++) {
+      if (src[i] instanceof HTMLInputElement || src[i] instanceof HTMLTextAreaElement) dst[i].setAttribute('value', src[i].value);
+      if (src[i] instanceof HTMLSelectElement) dst[i].querySelectorAll('option').forEach((x, j) => { if (j === src[i].selectedIndex) x.setAttribute('selected', ''); else x.removeAttribute('selected'); });
+      if (src[i] instanceof HTMLImageElement && src[i].src && !src[i].src.startsWith('data:')) { const d = await toDataUri(src[i].src); if (d) dst[i].setAttribute('src', d); }
+      if (src[i] instanceof HTMLCanvasElement) { try { const img = document.createElement('img'); img.setAttribute('src', src[i].toDataURL('image/png')); img.setAttribute('class', src[i].className); img.setAttribute('style', src[i].getAttribute('style') ?? ''); img.width = src[i].clientWidth; img.height = src[i].clientHeight; dst[i].replaceWith(img); } catch {} }
+      for (const a of [...dst[i].attributes]) if (a.name.startsWith('on')) dst[i].removeAttribute(a.name);
+    }
+    for (const s of clone.querySelectorAll('script')) s.remove();
+    const r = root.getBoundingClientRect();
+    return { html: clone.outerHTML, box: { x: r.x, y: r.y, w: r.width, h: r.height }, bg: getComputedStyle(document.body).backgroundColor };
+  }, selector);
+  if (!html) { console.log(`  ${name}: no ${selector}`); return; }
+  await fs.writeFile(`${OUT}/${name}.html`, `<!-- ${JSON.stringify({ box: html.box, bg: html.bg })} -->\n${html.html}`);
+  await page.screenshot({ path: `${OUT}/${name}.png` });
+  console.log(`  ${name}: ${Math.round(html.html.length / 1024)} KB, box ${JSON.stringify(html.box)}`);
+}
+
+// state A: the region page with the Territory form open and filled (not saved)
+await page.goto(`${base}/regions/4/`, { waitUntil: 'load' });
+await page.waitForSelector('.ldh-pane.is-active button.add-instance', { timeout: 30_000 }); await page.waitForTimeout(2500);
+await snapshot('.ldh-pane.is-active', 'region-page');
+const btn = page.locator('.ldh-pane.is-active .ldh-block[data-for-class]').filter({ hasText: 'Cities in this region' }).first().locator('button.add-instance').first();
+await btn.click();
+const modal = page.locator('.modal-constructor:visible, .ac-modal:visible').last();
+await modal.waitFor({ state: 'visible', timeout: 15_000 }); await page.waitForTimeout(1500);
+for (const [re, val] of [['^Title', 'Amarillo'], ['^Name', 'Amarillo'], ['^Identifier', '79101'], ['Latitude|^Lat\\b', '35.2220'], ['Longitude|^Long\\b', '-101.8313']]) {
+  const groups = modal.locator('.ldh-prop-group'); const c = await groups.count();
+  for (let i = 0; i < c; i++) { const g = groups.nth(i); const label = ((await g.textContent()) ?? '').replace(/\s+/g, ' ').trim(); if (!new RegExp(re, 'i').test(label)) continue; const input = g.locator('input:not([type=hidden]):visible').first(); if (!(await input.count()) || await input.inputValue()) continue; await input.fill(val); break; }
+}
+await page.waitForTimeout(500);
+await snapshot('MODAL', 'form-filled');
+await page.keyboard.press('Escape');
+
+// state B: the territories map (pins as data from the store, the canvas as a raster fallback)
+await page.goto(`${base}/territories/`, { waitUntil: 'load' });
+await page.waitForSelector('.ol-viewport canvas', { timeout: 30_000 }); await page.waitForTimeout(4000);
+const pins = await page.evaluate(() => {
+  const maps = (window.__olMaps || []);
+  if (!maps.length) return null;
+  const map = maps.at(-1); const rect = map.getTargetElement().getBoundingClientRect();
+  const out = [];
+  for (const layer of map.getLayers().getArray()) { const s = layer.getSource && layer.getSource(); if (!s || !s.getFeatures) continue; for (const f of s.getFeatures()) { const g = f.getGeometry(); if (!g || g.getType() !== 'Point') continue; const [x, y] = map.getPixelFromCoordinate(g.getCoordinates()); out.push({ id: f.getId(), x: Math.round(x), y: Math.round(y), label: f.get('name') || f.get('label') || '' }); } }
+  return { rect: { x: rect.x, y: rect.y, w: rect.width, h: rect.height }, pins: out };
+});
+await fs.writeFile(`${OUT}/map-pins.json`, JSON.stringify(pins, null, 2));
+console.log(`  map: ${pins ? pins.pins.length : 'no'} pins`);
+await snapshot('.ldh-pane.is-active', 'territories-page');
+{
+  const vp = page.locator('.ldh-pane.is-active .ol-viewport').first();
+  // tiles only: the pin layer is hidden for the shot (a style toggle in the page, nothing saved)
+  await page.evaluate(() => { const m = (window.__olMaps || []).at(-1); if (!m) return; for (const l of m.getLayers().getArray()) if (l.getSource && l.getSource() && l.getSource().getFeatures) l.setVisible(false); });
+  await page.waitForTimeout(800);
+  await vp.screenshot({ path: `${OUT}/map-tiles.png` });
+  await page.evaluate(() => { const m = (window.__olMaps || []).at(-1); if (!m) return; for (const l of m.getLayers().getArray()) l.setVisible(true); });
+  const b = await vp.boundingBox(); await fs.writeFile(`${OUT}/map-box.json`, JSON.stringify(b));
+  console.log(`  map tiles: ${JSON.stringify(b)}`);
+}
+await browser.close();
diff --git a/screencast/scenes/probe-addblock.mjs b/screencast/scenes/probe-addblock.mjs
new file mode 100644
index 00000000..6105cfb9
--- /dev/null
+++ b/screencast/scenes/probe-addblock.mjs
@@ -0,0 +1,56 @@
+// Not a scene. Drives the + XHTML and + Object affordances on a scratch document
+// and reports the inline forms, so the accumulation scenes are scripted against
+// real markup rather than a screenshot.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const argv = process.argv.slice(2);
+const where = argv.includes('--path') ? argv[argv.indexOf('--path') + 1] : '/scratch-briefing/';
+const { base, target, identity } = await resolve(where);
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+page.on('pageerror', (e) => console.log('  PAGEERROR:', e.message.slice(0, 140)));
+
+await page.goto(target, { waitUntil: 'load' });
+await sleep(5000);
+console.log('url:', page.url());
+console.log('add buttons:', await page.locator('button.create-action.add-constructor').count());
+for (const b of await page.locator('button.create-action.add-constructor').all()) {
+  console.log('  •', (await b.textContent()).replace(/\s+/g, ' ').trim(), '| visible:', await b.isVisible());
+}
+
+const kind = argv.includes('--kind') ? argv[argv.indexOf('--kind') + 1] : 'XHTML';
+const btn = page.locator('button.create-action.add-constructor').filter({ hasText: kind }).first();
+if (!(await btn.count())) { console.log(`${kind} absent`); await context.close(); await browser.close(); process.exit(0); }
+
+await btn.scrollIntoViewIfNeeded();
+await btn.click();
+await sleep(3000);
+
+console.log(`\n=== what appeared for + ${kind}`);
+console.log(await page.evaluate(() => {
+  const vis = (e) => e.offsetParent !== null && e.getBoundingClientRect().width > 0;
+  return JSON.stringify({
+    contenteditable: [...document.querySelectorAll('[contenteditable]')].filter(vis)
+      .map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim()} ${Math.round(e.getBoundingClientRect().width)}x${Math.round(e.getBoundingClientRect().height)}`),
+    toolbar: [...document.querySelectorAll('[class*=toolbar], [class*=rdfa], [class*=editor]')].filter(vis)
+      .slice(0, 6).map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim()}`),
+    saveish: [...document.querySelectorAll('button, .ac-btn')].filter(vis)
+      .map((b) => `${String(b.className).trim().split(/\s+/).filter((c) => /save|btn-|close|cancel/.test(c)).join('.')} — ${b.textContent.replace(/\s+/g, ' ').trim().slice(0, 16)}`)
+      .filter((t) => t && !t.startsWith(' —')).slice(0, 12),
+    blockRows: document.querySelectorAll('.ldh-block-row').length,
+  }, null, 1);
+}));
+
+await page.screenshot({ path: `shots/probe-add-${kind}.png` });
+console.log(`→ shots/probe-add-${kind}.png`);
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-addinstance.mjs b/screencast/scenes/probe-addinstance.mjs
new file mode 100644
index 00000000..ad7755b7
--- /dev/null
+++ b/screencast/scenes/probe-addinstance.mjs
@@ -0,0 +1,22 @@
+// Not a scene. Which view blocks carry the add-instance button, and bound to what.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { identity, base } = opts;
+const PAGES = ['/employees/', '/territories/', '/categories/', '/c8dded1e-1751-48d2-bd59-b2db2267ab4d/'];
+await runScene({
+  id: 'probe-addinstance', target: base + '/', identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    for (const p of PAGES) {
+      await page.goto(base + p, { waitUntil: 'load' });
+      await page.waitForSelector('.ldh-view-toolbar', { timeout: 25_000 }).catch(() => {});
+      await sleep(3500);
+      console.log(`  ${p}:`, await page.evaluate(() => JSON.stringify(
+        [...document.querySelectorAll('.ldh-pane.is-active button.add-instance')].map((b) => ({
+          visible: b.offsetParent !== null,
+          forClass: b.dataset.forClass, container: b.dataset.container,
+          view: b.closest('[about]')?.getAttribute('about')?.split('/').pop(),
+        })))));
+    }
+  },
+}, {});
diff --git a/screencast/scenes/probe-addrow-edit.mjs b/screencast/scenes/probe-addrow-edit.mjs
new file mode 100644
index 00000000..ded8a0ce
--- /dev/null
+++ b/screencast/scenes/probe-addrow-edit.mjs
@@ -0,0 +1,42 @@
+// Read-only: does the add-property row work on an EDIT form, and on a create modal for
+// a property that already has a value? Nothing is saved.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+await runScene({ id: 'probe-addrow-edit', target: base + '/employees/7/', identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(base + '/employees/7/', { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 25_000 }); await sleep(4000);
+    const repBlock = page.locator('.ldh-pane.is-active .ldh-block').filter({ hasText: /Family name/ }).first();
+    await repBlock.locator('button').filter({ hasText: /edit/ }).first().click(); await sleep(3000);
+    const form = page.locator('.ldh-pane.is-active form').filter({ has: page.locator('button.btn-save') }).last();
+    const terr = () => form.locator('.ldh-prop-group').filter({ has: page.locator('input[name="pu"][value$="areaServed"]') });
+    console.log('  edit form territory rows before:', await terr().count());
+    const sel = form.locator('.ldh-prop-addrow select').first();
+    const v = await sel.evaluate((s) => [...s.options].find((o) => o.value.endsWith('areaServed'))?.value);
+    await sel.selectOption(v); await sleep(300);
+    await form.locator('.ldh-prop-addrow button.add-value').first().click(); await sleep(2500);
+    console.log('  after Add: territory rows', await terr().count(), '| alert:', JSON.stringify(await page.locator('.ac-alert, [role=alert]').allTextContents().catch(() => [])).slice(0, 200));
+    const last = terr().last().locator('input:not([type=hidden])').first();
+    console.log('  last row input:', await last.count(), await last.getAttribute('class').catch(() => null));
+    const cancel = form.locator('button').filter({ hasText: /Cancel|Close|Reset/ }).first();
+    if (await cancel.count()) await cancel.click(); else await page.keyboard.press('Escape');
+    await sleep(500);
+
+    // create modal on Fuller's Direct reports: Add areaServed when the row is still empty
+    await page.goto(base + '/employees/2/', { waitUntil: 'load' });
+    const block = page.locator('.ldh-pane.is-active .ldh-block[data-for-class]').filter({ hasText: 'Direct reports' }).first();
+    const btn = block.locator('button.add-instance').first();
+    await btn.waitFor({ state: 'visible', timeout: 25_000 }); await btn.click();
+    const modal = page.locator('.modal-constructor, .ac-modal').last();
+    await modal.waitFor({ state: 'visible', timeout: 15_000 }); await sleep(2000);
+    const mterr = () => modal.locator('.ldh-prop-group').filter({ has: page.locator('input[name="pu"][value$="areaServed"]') });
+    console.log('  modal territory rows before:', await mterr().count());
+    const msel = modal.locator('.ldh-prop-addrow select').first();
+    const mv = await msel.evaluate((s) => [...s.options].find((o) => o.value.endsWith('areaServed'))?.value);
+    await msel.selectOption(mv); await sleep(300);
+    await modal.locator('.ldh-prop-addrow button.add-value').first().click(); await sleep(2500);
+    console.log('  modal after Add: territory rows', await mterr().count(), '| alert:', JSON.stringify(await modal.locator('.ac-alert, [role=alert]').allTextContents().catch(() => [])).slice(0, 200));
+    await page.keyboard.press('Escape'); await sleep(400);
+    const close = modal.locator('button').filter({ hasText: /Close/ }).first(); if (await close.count()) await close.click().catch(() => {});
+  } });
diff --git a/screencast/scenes/probe-addrow.mjs b/screencast/scenes/probe-addrow.mjs
new file mode 100644
index 00000000..7383a69b
--- /dev/null
+++ b/screencast/scenes/probe-addrow.mjs
@@ -0,0 +1,21 @@
+// Read-only: the "type … Add" row at the foot of a constructor modal.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+await runScene({ id: 'probe-addrow', target: base + '/employees/2/', identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(base + '/employees/2/', { waitUntil: 'load' });
+    const block = page.locator('.ldh-pane.is-active .ldh-block[data-for-class]').filter({ hasText: 'Direct reports' }).first();
+    const btn = block.locator('button.add-instance').first();
+    await btn.waitFor({ state: 'visible', timeout: 25_000 }); await btn.click();
+    const modal = page.locator('.modal-constructor, .ac-modal').last();
+    await modal.waitFor({ state: 'visible', timeout: 15_000 }); await sleep(2000);
+    console.log('  selects:', JSON.stringify(await modal.locator('select').evaluateAll((ss) => ss.map((s) => ({ cls: s.className, n: s.options.length, first: [...s.options].slice(0, 6).map((o) => o.textContent.trim()) })))));
+    const addBtn = modal.locator('button').filter({ hasText: /Add/ }).last();
+    console.log('  add btn:', JSON.stringify(await addBtn.evaluate((b) => b.outerHTML.replace(/\s+/g, ' ').slice(0, 300))));
+    console.log('  add row:', JSON.stringify(await addBtn.evaluate((b) => b.parentElement.outerHTML.replace(/\s+/g, ' ').slice(0, 1200))));
+    await addBtn.click(); await sleep(1500);
+    console.log('  after Add click, groups:', await modal.locator('.ldh-prop-group').count(), JSON.stringify(await modal.locator('.ldh-prop-group').last().evaluate((g) => g.outerHTML.replace(/\s+/g, ' ').slice(0, 500))));
+    await page.keyboard.press('Escape'); await sleep(400);
+    const close = modal.locator('button').filter({ hasText: /Close/ }).first(); if (await close.count()) await close.click().catch(() => {});
+  } });
diff --git a/screencast/scenes/probe-addvalue.mjs b/screencast/scenes/probe-addvalue.mjs
new file mode 100644
index 00000000..23b32dc7
--- /dev/null
+++ b/screencast/scenes/probe-addvalue.mjs
@@ -0,0 +1,44 @@
+// Read-only: the control that adds a property value to a form, and what "edit" on a
+// committed chip turns into. Nothing is saved.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+await runScene({ id: 'probe-addvalue', target: base + '/employees/2/', identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(base + '/employees/2/', { waitUntil: 'load' });
+    const block = page.locator('.ldh-pane.is-active .ldh-block[data-for-class]').filter({ hasText: 'Direct reports' }).first();
+    const btn = block.locator('button.add-instance').first();
+    await btn.waitFor({ state: 'visible', timeout: 25_000 }); await btn.click();
+    const modal = page.locator('.modal-constructor, .ac-modal').last();
+    await modal.waitFor({ state: 'visible', timeout: 15_000 }); await sleep(2000);
+    console.log('  inputs:', JSON.stringify(await modal.locator('input:not([type=hidden])').evaluateAll((is) => is.map((i) => (i.className || i.type) + (i.placeholder ? '{' + i.placeholder + '}' : '')))));
+    const addBtn = modal.locator('button').filter({ hasText: /Add/ }).last();
+    console.log('  add row:', JSON.stringify(await addBtn.evaluate((b) => { let e = b; for (let i = 0; i < 3 && e; i++) e = e.parentElement; return e ? e.outerHTML.replace(/\s+/g, ' ').slice(0, 900) : null; })));
+    const prop = modal.locator('input.property-combobox, input.prop-combobox, input[class*="property"]').first();
+    console.log('  property combobox:', await prop.count());
+    if (await prop.count()) {
+      await prop.click(); await page.keyboard.type('Territory', { delay: 60 }); await sleep(1800);
+      const items = page.locator('.ac-cb-panel[role="listbox"]:visible li.ac-cb-item');
+      console.log('  suggestions:', JSON.stringify((await items.allTextContents().catch(() => [])).map((t) => t.replace(/\s+/g, ' ').trim().slice(0, 40))));
+      if (await items.count()) { await items.first().click(); await sleep(600); await addBtn.click(); await sleep(1200); }
+      console.log('  territory groups now:', await modal.locator('.ldh-prop-group').filter({ hasText: /^\s*Territory/ }).count());
+    }
+    // what "edit" on a committed chip does: the Type row has one
+    const chipEdit = modal.locator('.ldh-prop-group').filter({ hasText: /^\s*Reports to/ }).first().locator('button').filter({ hasText: /edit/ }).first();
+    console.log('  reports-to edit btn:', await chipEdit.count());
+    await page.keyboard.press('Escape'); await sleep(500);
+    const close = modal.locator('button').filter({ hasText: /Close/ }).first(); if (await close.count()) await close.click().catch(() => {});
+
+    // King's edit form: edit on a committed chip
+    await page.goto(base + '/employees/7/', { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 25_000 }); await sleep(4000);
+    const repBlock = page.locator('.ldh-pane.is-active .ldh-block').filter({ hasText: /Family name/ }).first();
+    await repBlock.locator('button').filter({ hasText: /edit/ }).first().click(); await sleep(3000);
+    const form = page.locator('.ldh-pane.is-active form').filter({ has: page.locator('button.btn-save') }).last();
+    const rt = form.locator('.ldh-prop-group').filter({ hasText: /^\s*Reports to/ }).first();
+    await rt.locator('button').filter({ hasText: /edit/ }).first().click(); await sleep(800);
+    console.log('  reports-to after edit:', JSON.stringify(await rt.evaluate((g) => g.outerHTML.replace(/\s+/g, ' ').slice(0, 600))));
+    console.log('  form inputs:', JSON.stringify(await form.locator('input:not([type=hidden])').evaluateAll((is) => is.map((i) => (i.className || i.type) + (i.placeholder ? '{' + i.placeholder + '}' : '')).filter((c, i, a) => a.indexOf(c) === i))));
+    const cancel = form.locator('button').filter({ hasText: /Cancel|Close|Reset/ }).first();
+    if (await cancel.count()) await cancel.click(); else await page.keyboard.press('Escape');
+  } });
diff --git a/screencast/scenes/probe-annotate.mjs b/screencast/scenes/probe-annotate.mjs
new file mode 100644
index 00000000..c932b89d
--- /dev/null
+++ b/screencast/scenes/probe-annotate.mjs
@@ -0,0 +1,41 @@
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { selectWord } from '../lib/annotate.mjs';
+
+const { target, identity, ...a } = await resolve('/category-alignment/');
+
+await runScene({
+  id: 'probe-annotate', target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor, target }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await sleep(8000);
+
+    const prose = page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'published vocabulary' }).first();
+    console.log('  prose blocks matching:', await page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'published vocabulary' }).count());
+    await prose.scrollIntoViewIfNeeded();
+    await prose.hover();
+    await sleep(600);
+    await cursor.click(prose.locator('button.ac-iconbtn').filter({ hasText: 'edit' }).last());
+    await sleep(4000);
+
+    const at = await selectWord(page, 'Beverages');
+    console.log('  selectWord:', JSON.stringify(at));
+    if (!at) return;
+
+    await page.mouse.click(at.x, at.y, { button: 'right' });
+    await sleep(2500);
+    const overlay = page.locator('#rdfa-editor-overlay:visible').first();
+    console.log('  overlay visible:', await overlay.count());
+
+    const prop = overlay.locator('input.property-combobox').first();
+    console.log('  property input:', await prop.count());
+    await cursor.click(prop);
+    await page.keyboard.type('exact', { delay: 90 });
+    for (const wait of [1500, 3000, 6000, 10000]) {
+      await sleep(wait === 1500 ? wait : 3000);
+      const items = await page.locator('.ac-cb-panel[role="listbox"] li.ac-cb-item').allTextContents().catch(() => []);
+      console.log(`  after ~${wait}ms — ${items.length} suggestions:`, JSON.stringify(items.slice(0, 8)));
+      if (items.length) break;
+    }
+  },
+}, {});
diff --git a/screencast/scenes/probe-apps.mjs b/screencast/scenes/probe-apps.mjs
new file mode 100644
index 00000000..ac9e6159
--- /dev/null
+++ b/screencast/scenes/probe-apps.mjs
@@ -0,0 +1,33 @@
+// Not a scene. The dataspaces menu is how one dataspace reaches another; this
+// dumps what it offers and whether switching works.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/categories/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+await page.goto(target, { waitUntil: 'load' });
+await sleep(4000);
+
+const apps = page.locator('button.btn-apps').first();
+console.log('apps button:', await apps.count());
+await apps.click();
+await sleep(1500);
+console.log(await page.evaluate(() => JSON.stringify(
+  [...document.querySelectorAll('.ac-menu-item, .ac-menu a')].filter((e) => e.offsetParent !== null)
+    .map((e) => `${e.textContent.replace(/\s+/g, ' ').trim().slice(0, 30)} → ${e.getAttribute('href') ?? '(button)'}`).slice(0, 14), null, 1)));
+
+const unesco = page.locator('.ac-menu-item, .ac-menu a').filter({ hasText: 'UNESCO' }).first();
+if (await unesco.count()) {
+  await unesco.click();
+  await page.waitForLoadState('load').catch(() => {});
+  await sleep(5000);
+  console.log('after switch:', page.url());
+  console.log('title:', await page.title());
+}
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-authoring.mjs b/screencast/scenes/probe-authoring.mjs
new file mode 100644
index 00000000..4e9593c7
--- /dev/null
+++ b/screencast/scenes/probe-authoring.mjs
@@ -0,0 +1,78 @@
+// Not a scene. What modes a view offers, what a result row links to, and what the
+// block-add affordances actually open — the three things scenario 1 still needs.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const argv = process.argv.slice(2);
+const where = argv.includes('--path') ? argv[argv.indexOf('--path') + 1] : '/customers/';
+const { base, target, identity } = await resolve(where);
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+page.on('pageerror', (e) => console.log('  pageerror:', e.message.slice(0, 160)));
+
+await page.goto(target, { waitUntil: 'load' });
+await page.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+await sleep(2500);
+
+console.log('=== view modes offered');
+await page.locator('.ldh-view-toolbar .right .ldh-mode button.drop-toggle').first().click();
+await sleep(800);
+console.log(await page.evaluate(() => JSON.stringify(
+  [...document.querySelectorAll('.modes-pop.view-mode-list button.mi')]
+    .map((b) => `${b.className} — ${b.querySelector('.label')?.textContent.trim()}`), null, 1)));
+await page.keyboard.press('Escape');
+await sleep(500);
+
+console.log('\n=== first result row link');
+console.log(await page.evaluate(() => {
+  const a = document.querySelector('.ldh-block-body a[href*="/customers/"]');
+  return a ? JSON.stringify({ href: a.getAttribute('href'), text: a.textContent.trim().slice(0, 40), cls: a.className }) : 'none';
+}));
+
+console.log('\n=== block-add affordances (the pinned bar)');
+console.log(await page.evaluate(() => JSON.stringify(
+  [...document.querySelectorAll('button, a')]
+    .filter((e) => /XHTML|Object|Chart|View|Query|SPARQL/i.test(e.textContent ?? ''))
+    .slice(0, 14)
+    .map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim().split(/\s+/).join('.')} — ${e.textContent.replace(/\s+/g, ' ').trim().slice(0, 40)}`), null, 1)));
+
+console.log('\n=== Create menu');
+const create = page.locator('button.drop-toggle', { hasText: 'Create' }).first();
+if (await create.count()) {
+  await create.click();
+  await sleep(900);
+  console.log(await page.evaluate(() => JSON.stringify(
+    [...document.querySelectorAll('.ac-menu .it, .ac-menu-item, .add-constructor')]
+      .map((e) => `${String(e.className).trim()} — ${e.textContent.replace(/\s+/g, ' ').trim().slice(0, 40)}`).slice(0, 14), null, 1)));
+  await page.keyboard.press('Escape');
+}
+
+console.log('\n=== clicking + Object');
+// The visible label is "addObject" — "add" is a Material icon ligature, not text.
+const obj = page.locator('button.create-action.add-constructor').filter({ hasText: 'Object' }).first();
+if (await obj.count()) {
+  await obj.click();
+  await sleep(2500);
+  console.log(await page.evaluate(() => {
+    const modal = document.querySelector('.modal, .ac-backdrop, .modal-constructor');
+    return JSON.stringify({
+      modal: modal?.className ?? null,
+      heading: modal?.querySelector('h1,h2,h3,.ttl')?.textContent.trim().slice(0, 60),
+      fields: [...(modal?.querySelectorAll('input, select, textarea, .CodeMirror') ?? [])]
+        .slice(0, 12).map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim().split(/\s+/).join('.')}[${e.getAttribute('name') ?? ''}]`),
+      buttons: [...(modal?.querySelectorAll('button') ?? [])].slice(0, 8).map((b) => b.textContent.replace(/\s+/g, ' ').trim().slice(0, 30)),
+    }, null, 1);
+  }));
+  await page.screenshot({ path: 'tracks/probe-object-modal.png' });
+}
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-catsort.mjs b/screencast/scenes/probe-catsort.mjs
new file mode 100644
index 00000000..65e4a7d3
--- /dev/null
+++ b/screencast/scenes/probe-catsort.mjs
@@ -0,0 +1,16 @@
+// Read-only: the sort and facet controls the category page's product list offers.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/categories/1/');
+const { identity, target } = opts;
+await runScene({ id: 'probe-catsort', target, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block[data-for-class] .ldh-view-toolbar', { timeout: 25_000 }).catch(() => {});
+    await sleep(6000);
+    const tb = page.locator('.ldh-pane.is-active .ldh-block[data-for-class] .ldh-view-toolbar').first();
+    console.log('  toolbar text:', JSON.stringify((await tb.textContent().catch(() => '')).replace(/\s+/g, ' ').trim().slice(0, 300)));
+    console.log('  selects:', JSON.stringify(await tb.locator('select').evaluateAll((els) => els.map((s) => ({ name: s.name || s.className, options: [...s.options].map((o) => o.textContent.trim()) })))));
+    console.log('  pills:', JSON.stringify(await tb.locator('button, .ac-tag, .ldh-pivot-pill, .facet-pill, summary').allTextContents()));
+    console.log('  rows:', JSON.stringify((await page.locator('.ldh-pane.is-active .ldh-block[data-for-class] table tbody tr').allTextContents()).slice(0, 3).map((t) => t.replace(/\s+/g, ' ').trim().slice(0, 120))));
+    console.log('  headers:', JSON.stringify(await page.locator('.ldh-pane.is-active .ldh-block[data-for-class] table thead th').allTextContents()));
+  } });
diff --git a/screencast/scenes/probe-catviews.mjs b/screencast/scenes/probe-catviews.mjs
new file mode 100644
index 00000000..c5c01b04
--- /dev/null
+++ b/screencast/scenes/probe-catviews.mjs
@@ -0,0 +1,13 @@
+// Read-only: which derived views does a category page carry?
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/categories/1/');
+const { identity, target } = opts;
+await runScene({ id: 'probe-catviews', target, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-block', { timeout: 25_000 }).catch(() => {});
+    await sleep(6000);
+    const views = await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block[data-for-class], .ldh-pane.is-active [data-inverse]')].map((b) => ({ cls: b.getAttribute('data-for-class'), inverse: b.hasAttribute('data-inverse'), title: b.querySelector('h2,h3,.ldh-block-title')?.textContent?.trim().slice(0, 40) })));
+    console.log('  derived views:', JSON.stringify(views));
+    console.log('  headings:', JSON.stringify(await page.locator('.ldh-pane.is-active h2, .ldh-pane.is-active h3').allTextContents()));
+  } });
diff --git a/screencast/scenes/probe-chart.mjs b/screencast/scenes/probe-chart.mjs
new file mode 100644
index 00000000..ca703372
--- /dev/null
+++ b/screencast/scenes/probe-chart.mjs
@@ -0,0 +1,60 @@
+// Not a scene. Switches the products view to Chart mode, sets the axes, and dumps
+// what the block actually contains — the chart beat renders controls but no chart.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/products/');
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+page.on('pageerror', (e) => console.log('  PAGEERROR:', e.message.slice(0, 200)));
+page.on('console', (m) => { if (m.type() === 'error') console.log('  console.error:', m.text().slice(0, 200)); });
+page.on('requestfailed', (r) => console.log('  requestfailed:', r.url().slice(0, 110)));
+
+await page.goto(target, { waitUntil: 'load' });
+await page.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+await sleep(2500);
+
+const block = page.locator('.ldh-block').filter({ has: page.locator('.ldh-view-toolbar') }).first();
+
+await page.locator('.ldh-view-toolbar .right .ldh-mode button.drop-toggle').first().click();
+await sleep(600);
+await page.locator('.modes-pop.view-mode-list button.mi.chart-mode').first().click();
+await sleep(3000);
+console.log('switched to chart mode');
+
+for (const [cls, label] of [['chart-type', 'Bar chart'], ['chart-category', 'category'], ['chart-series', 'price']]) {
+  const sel = block.locator(`select.${cls}`).first();
+  if (!(await sel.count())) { console.log(`  ${cls}: absent`); continue; }
+  await sel.selectOption({ label });
+  console.log(`  ${cls} = ${label}  →  value now ${JSON.stringify(await sel.inputValue())}`);
+  await sleep(1500);
+}
+
+await sleep(4000);
+
+console.log('\nblock contents after setting axes:');
+console.log(await block.evaluate((b) => {
+  const kids = [...b.querySelectorAll('*')];
+  return JSON.stringify({
+    svgs: kids.filter((e) => e.tagName.toLowerCase() === 'svg').length,
+    canvases: kids.filter((e) => e.tagName.toLowerCase() === 'canvas').length,
+    chartish: kids.filter((e) => /chart|viz|google/i.test(String(e.className))).slice(0, 8)
+      .map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim()} ${e.getBoundingClientRect().width}x${Math.round(e.getBoundingClientRect().height)}`),
+    buttons: [...b.querySelectorAll('button')].map((x) => x.textContent.replace(/\s+/g, ' ').trim().slice(0, 24)).filter(Boolean).slice(0, 14),
+    tail: b.innerHTML.replace(/\s+/g, ' ').slice(-700),
+  }, null, 1);
+}));
+
+console.log('\ngoogle charts loaded?', await page.evaluate(() => typeof google !== 'undefined' && !!google?.visualization));
+
+await page.screenshot({ path: 'tracks/probe-chart.png' });
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-chartcreate.mjs b/screencast/scenes/probe-chartcreate.mjs
new file mode 100644
index 00000000..2d14e232
--- /dev/null
+++ b/screencast/scenes/probe-chartcreate.mjs
@@ -0,0 +1,88 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+import { switchDocumentMode } from '../lib/blocks.mjs';
+import { create, typeQuery, fill, save } from '../lib/constructors.mjs';
+
+const { target, identity, ...a } = await resolve('/probe-chart/');
+const QUERY = `PREFIX schema: <https://schema.org/>
+
+SELECT ?category (COUNT(?product) AS ?products)
+WHERE {
+GRAPH ?g {
+?product a schema:Product ;
+schema:category ?category .
+}
+}
+GROUP BY ?category
+ORDER BY DESC(?products)`;
+
+await runScene({
+  id: 'probe-chartcreate', target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 810, deviceScaleFactor: 1 }),
+  async body({ page, cursor, target, shot }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForTimeout(6000);
+    await switchDocumentMode(page, cursor, 'read-mode');
+    await page.waitForTimeout(5000);
+
+    console.log('  create SELECT:', JSON.stringify(await create(page, cursor, 'SELECT')));
+    await page.waitForTimeout(1500);
+    console.log('  typeQuery:', JSON.stringify(await typeQuery(page, cursor, QUERY)).slice(0, 80));
+    await fill(page, cursor, 'Title', 'Probe aggregate');
+    await page.waitForTimeout(800);
+
+    // what does the OPEN query form's action bar offer, before saving?
+    console.log('  action bar (form open):', await page.evaluate(() => {
+      const f = [...document.querySelectorAll('form')].find((x) => x.querySelector('button.btn-save') && x.offsetParent);
+      if (!f) return '(no form)';
+      return [...f.querySelectorAll('button, a')].filter((b) => b.offsetParent)
+        .map((b) => `${b.tagName.toLowerCase()}.${String(b.className).split(' ').slice(0,3).join('.')}{${b.textContent.replace(/\s+/g,' ').trim().slice(0,18)}}`).join('  ');
+    }));
+    await shot('form-open');
+
+    console.log('  save:', JSON.stringify(await save(page, cursor)));
+    await page.waitForTimeout(5000);
+
+    console.log('  action bar (after save):', await page.evaluate(() => {
+      const row = [...document.querySelectorAll('.ldh-block-row, .ldh-block')].find((r) => /Probe aggregate/.test(r.textContent));
+      if (!row) return '(no block)';
+      return [...row.querySelectorAll('button, a')].filter((b) => b.offsetParent)
+        .map((b) => `${b.tagName.toLowerCase()}.${String(b.className).split(' ').slice(0,3).join('.')}{${b.textContent.replace(/\s+/g,' ').trim().slice(0,18)}}`).join('  ');
+    }));
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+    await page.waitForTimeout(2500);
+    console.log('  controls at the bottom of the block:', await page.evaluate(() => {
+      const row = [...document.querySelectorAll('.ldh-block-row, .ldh-block')].find((r) => /Probe aggregate/.test(r.textContent));
+      if (!row) return '(no block)';
+      return [...row.querySelectorAll('button, a.ac-btn, input[type=submit]')].filter((b) => b.offsetParent)
+        .map((b) => `${b.tagName.toLowerCase()}.${String(b.className).split(' ').slice(0,3).join('.')}{${b.textContent.replace(/\s+/g,' ').trim().slice(0,20)}}`)
+        .filter((t) => /save|create|chart/i.test(t)).join('  ') || '(none matching save/create/chart)';
+    }));
+    console.log('  ALL page buttons with save/create:', await page.evaluate(() =>
+      [...document.querySelectorAll('button, input[type=submit]')].filter((b) => b.offsetParent && /save|create/i.test(b.textContent + b.className))
+        .map((b) => `${b.tagName.toLowerCase()}.${String(b.className).split(' ').slice(0,4).join('.')}{${b.textContent.replace(/\s+/g,' ').trim().slice(0,20)}}`).join('  ')));
+    // configure the chart pane, then press the query block's own Create
+    const row = page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'Probe aggregate' }).first();
+    const sel = (label) => row.locator('.ldh-prop-group, div').filter({ hasText: label }).locator('select').first();
+    await page.selectOption('select >> nth=0', { label: 'Bar chart' }).catch((e) => console.log('  chart type:', e.message.slice(0, 40)));
+    await page.waitForTimeout(1500);
+    console.log('  selects now:', await page.evaluate(() =>
+      [...document.querySelectorAll('select')].filter((s) => s.offsetParent)
+        .map((s) => `${s.name || s.className}=${s.options[s.selectedIndex] && s.options[s.selectedIndex].text}`).join('  ')));
+
+    const createBtn = page.locator('button.ac-btn.in-primary').filter({ hasText: /^Create$/ }).first();
+    console.log('  block Create present:', await createBtn.count());
+    if (await createBtn.count()) {
+      await createBtn.scrollIntoViewIfNeeded();
+      await cursor.click(createBtn);
+      await page.waitForTimeout(5000);
+      console.log('  what opened:', await page.evaluate(() => {
+        const f = [...document.querySelectorAll('form')].find((x) => x.querySelector('button.btn-save') && x.offsetParent);
+        if (!f) return '(no form opened)';
+        const groups = [...f.querySelectorAll('.ldh-prop-group')].map((g) => g.innerText.replace(/\s+/g, ' ').trim().slice(0, 34));
+        return 'form with groups: ' + groups.join(' | ');
+      }));
+      await shot('after-create');
+    }
+    await shot('after-save');
+  },
+}, {});
diff --git a/screencast/scenes/probe-chartsel.mjs b/screencast/scenes/probe-chartsel.mjs
new file mode 100644
index 00000000..767da40a
--- /dev/null
+++ b/screencast/scenes/probe-chartsel.mjs
@@ -0,0 +1,17 @@
+// Read-only: the chart pane's selects, and where the map block sits on the nobody page.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const q = async (t) => (await sparql(base, `PREFIX dct: <http://purl.org/dc/terms/> SELECT ?doc WHERE { GRAPH ?doc { ?doc dct:title "${t}" } } LIMIT 1`))[0].doc;
+const south = await q('One rep for the South'), nobody = await q('Where we have nobody');
+await runScene({ id: 'probe-chartsel', target: south, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(south + '?mode=' + encodeURIComponent('https://w3id.org/atomgraph/client#ReadMode'), { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block-row', { timeout: 25_000 }); await sleep(5000);
+    const row = page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'Reps per region' }).first();
+    console.log('  selects:', JSON.stringify(await row.locator('select').evaluateAll((ss) => ss.map((s) => ({ name: s.name, cls: s.className, value: s.value, selected: s.options[s.selectedIndex]?.textContent.trim(), options: [...s.options].map((o) => o.textContent.trim()).slice(0, 8) })))));
+    await page.goto(nobody + '?mode=' + encodeURIComponent('https://w3id.org/atomgraph/client#ContentMode'), { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .content-body > .ldh-block-row', { timeout: 25_000 }); await sleep(5000);
+    console.log('  rows:', JSON.stringify(await page.locator('.ldh-pane.is-active .content-body > .ldh-block-row').evaluateAll((rs) => rs.map((r, i) => ({ i, map: !!r.querySelector('.ol-viewport'), handle: !!r.querySelector('span.ldh-bh-drag'), about: r.querySelector('[about]')?.getAttribute('about')?.slice(-12), text: r.textContent.replace(/\s+/g, ' ').trim().slice(0, 30) })))));
+  } });
diff --git a/screencast/scenes/probe-clock.mjs b/screencast/scenes/probe-clock.mjs
new file mode 100644
index 00000000..b1d2af24
--- /dev/null
+++ b/screencast/scenes/probe-clock.mjs
@@ -0,0 +1,27 @@
+// Calibration: does the recorded video's clock match the marks clock? A page shows the
+// wall clock in large digits (updated on every animation frame, then frozen for a
+// stretch to simulate an idle page); beats fire at known wall-clock times; the frames
+// at those beat times are read back and compared.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+await runScene({ id: 'probe-clock', target: base + '/', identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }), overlays: { cursor: false },
+  async body({ page, marks }) {
+    const t0 = Date.now();
+    await page.setContent(`<body style="margin:0;background:#fff;font:bold 160px monospace;display:flex;align-items:center;justify-content:center;height:100vh"><div id=c>0</div><script>
+      const t0 = ${t0}; let frozen = false; window.freeze = (f) => { frozen = f; };
+      (function tick(){ if (!frozen) document.getElementById('c').textContent = ((Date.now() - t0)/1000).toFixed(2); requestAnimationFrame(tick); })();
+    </script></body>`);
+    const log = async (name) => { await marks.beat(name, `wall ${((Date.now() - t0) / 1000).toFixed(2)}`); };
+    await sleep(1500); await log('b1');
+    await sleep(2000); await log('b2');
+    await page.evaluate(() => window.freeze(true));   // idle: nothing repaints for 4 s
+    await sleep(4000); await log('b3-frozen');
+    await page.evaluate(() => window.freeze(false));
+    await sleep(500); await log('b4');
+    await sleep(2000); await log('b5');
+    // heavy repaint: animate a big box for 3 s
+    await page.evaluate(() => { const d = document.createElement('div'); d.style.cssText = 'position:fixed;left:0;top:0;width:400px;height:400px;background:#36c'; document.body.appendChild(d); let x = 0; (function mv(){ x = (x + 7) % 1000; d.style.left = x + 'px'; requestAnimationFrame(mv); })(); });
+    await sleep(3000); await log('b6');
+    await sleep(500);
+  } });
diff --git a/screencast/scenes/probe-cm.mjs b/screencast/scenes/probe-cm.mjs
new file mode 100644
index 00000000..edef106d
--- /dev/null
+++ b/screencast/scenes/probe-cm.mjs
@@ -0,0 +1,34 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+import { switchDocumentMode } from '../lib/blocks.mjs';
+const { target, identity, ...a } = await resolve('/categories/');
+await runScene({
+  id: 'probe-cm', target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 810, deviceScaleFactor: 1 }),
+  async body({ page, cursor, shot, target }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForTimeout(8000);
+    console.log('  [ContentMode] tb-query:', await page.locator('button.tb-query').count(), '| CodeMirror:', await page.locator('.CodeMirror').count());
+    await switchDocumentMode(page, cursor, 'read-mode');
+    await page.waitForTimeout(8000);
+    console.log('\n  tb-query buttons:', await page.locator('button.tb-query').count(),
+      '| ldh-sparql:', await page.locator('.ldh-sparql').count(),
+      '| collapsed:', await page.locator('.ldh-sparql.is-collapsed').count());
+    console.log('  .CodeMirror total:', await page.locator('.CodeMirror').count());
+    console.log('  in active pane:', await page.locator('.ldh-pane.is-active .CodeMirror').count());
+    console.log('  boxes:', await page.evaluate(() => [...document.querySelectorAll('.CodeMirror')].map((e) => {
+      const r = e.getBoundingClientRect();
+      const pane = e.closest('.ldh-pane');
+      return `${Math.round(r.width)}x${Math.round(r.height)}@${Math.round(r.y)} vis=${e.checkVisibility()} pane=${pane ? pane.className.replace('ldh-pane ', '') : 'none'}`;
+    }).join('\n    ')));
+    const tb = page.locator('button.tb-query').first();
+    if (await tb.count()) {
+      await tb.scrollIntoViewIfNeeded().catch(() => {});
+      await tb.click({ force: true }).catch((e) => console.log('  tb click failed:', e.message.slice(0, 50)));
+      await page.waitForTimeout(3000);
+      console.log('  after tb-query — boxes:', await page.evaluate(() => [...document.querySelectorAll('.CodeMirror')].map((e) => { const r = e.getBoundingClientRect(); return `${Math.round(r.width)}x${Math.round(r.height)}`; }).join(' ')));
+      await shot('revealed');
+    }
+    const first = page.locator('.ldh-pane.is-active .CodeMirror').first();
+    if (await first.count()) { await first.scrollIntoViewIfNeeded().catch((e) => console.log('  scroll failed:', e.message.slice(0, 60))); await page.waitForTimeout(2000); await shot('cm'); }
+  },
+}, {});
diff --git a/screencast/scenes/probe-compose-state.mjs b/screencast/scenes/probe-compose-state.mjs
new file mode 100644
index 00000000..373a002c
--- /dev/null
+++ b/screencast/scenes/probe-compose-state.mjs
@@ -0,0 +1,19 @@
+// Read-only: what the composed page holds after the take — block rows, their types,
+// drag handles, nested rows — and whether the same DragEvent sequence reorders here.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { contentModeUrl } from '../lib/blocks.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const doc = `${base.replace(/\/$/, '')}/supercut-compose/`;
+await runScene({ id: 'probe-compose-state', target: doc, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(contentModeUrl(doc), { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block-row', { state: 'attached', timeout: 30_000 }).catch(() => {}); await sleep(5000);
+    const r = await page.evaluate(() => {
+      const rows = [...document.querySelectorAll('.ldh-pane.is-active .ldh-block-row')];
+      return rows.map((r) => ({ about: r.getAttribute('about')?.slice(-12), cls: r.className, typeof: r.getAttribute('typeof'), depth: [...(function* () { let p = r.parentElement; while (p) { if (p.classList?.contains('ldh-block-row')) yield 1; p = p.parentElement; } })()].length, handle: !!r.querySelector(':scope > * span.ldh-bh-drag, :scope > span.ldh-bh-drag'), anyHandle: r.querySelectorAll('span.ldh-bh-drag').length, text: r.textContent.trim().slice(0, 60).replace(/\s+/g, ' ') }));
+    });
+    console.log('  rows:', JSON.stringify(r, null, 1));
+    const charts = await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block-row svg')].length);
+    console.log('  svgs:', charts);
+  } });
diff --git a/screencast/scenes/probe-concept.mjs b/screencast/scenes/probe-concept.mjs
new file mode 100644
index 00000000..82404141
--- /dev/null
+++ b/screencast/scenes/probe-concept.mjs
@@ -0,0 +1,51 @@
+// Not a scene. What copy affordances exist on a proxied resource page?
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/categories/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  permissions: ['clipboard-read', 'clipboard-write'],
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+await page.goto(target, { waitUntil: 'load' });
+await sleep(3000);
+await page.locator('button.btn-apps').first().click(); await sleep(1200);
+await page.locator('.ac-menu-item:visible, .ac-menu a:visible').filter({ hasText: 'UNESCO' }).first().click();
+await page.waitForLoadState('load').catch(() => {}); await sleep(5000);
+const concepts = page.locator('.ldh-block-body a:visible').filter({ hasText: 'Concepts' }).first();
+if (await concepts.count()) { await concepts.click(); await page.waitForLoadState('load').catch(()=>{}); await sleep(5000); }
+const first = page.locator('.ldh-block-body a:visible').first();
+if (await first.count()) { await first.click(); await page.waitForLoadState('load').catch(()=>{}); await sleep(6000); }
+
+console.log('url:', page.url().slice(0, 120));
+console.log('panes:', await page.evaluate(() => JSON.stringify(
+  [...document.querySelectorAll('.ldh-pane')].map((p) => `${String(p.className).trim()} vis=${p.offsetParent !== null}`))));
+console.log('active-pane copy buttons:', await page.evaluate(() => {
+  const pane = document.querySelector('.ldh-pane.is-active');
+  if (!pane) return 'NO ACTIVE PANE';
+  const bs = [...pane.querySelectorAll('.btn-copy-uri')];
+  return JSON.stringify(bs.map((b) => {
+    const r = b.getBoundingClientRect();
+    return `vis=${b.offsetParent !== null} box=${Math.round(r.width)}x${Math.round(r.height)} at ${Math.round(r.x)},${Math.round(r.y)} opacity=${getComputedStyle(b).opacity}`;
+  }), null, 1);
+}));
+console.log('chain of the first on-screen one:', await page.evaluate(() => {
+  const b = [...document.querySelectorAll('.btn-copy-uri')].find((e) => e.getBoundingClientRect().width > 0 && e.getBoundingClientRect().top > 0);
+  if (!b) return 'none on screen';
+  const chain = [];
+  for (let n = b; n && n !== document.body; n = n.parentElement) chain.push(`${n.tagName.toLowerCase()}.${String(n.className).trim().split(/\s+/).slice(0,3).join('.')}`);
+  return chain.slice(0, 8).join(' < ');
+}));
+console.log(await page.evaluate(() => JSON.stringify({
+  copyish: [...document.querySelectorAll('button, a')]
+    .filter((e) => /copy|link|uri/i.test(e.className + ' ' + (e.title || '') + ' ' + e.textContent))
+    .map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim()} vis=${e.offsetParent !== null} txt=${e.textContent.replace(/\s+/g,' ').trim().slice(0,18)}`).slice(0, 12),
+  anyCopyUri: document.querySelectorAll('.btn-copy-uri').length,
+  pins: document.querySelectorAll('.ldh-pin-ic, [class*=pin]').length,
+}, null, 1)));
+await page.screenshot({ path: 'shots/probe-concept.png' });
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-conceptfacet.mjs b/screencast/scenes/probe-conceptfacet.mjs
new file mode 100644
index 00000000..a7e6f69c
--- /dev/null
+++ b/screencast/scenes/probe-conceptfacet.mjs
@@ -0,0 +1,35 @@
+// Not a scene. Can the proxied Concepts container be filtered to a named concept,
+// and how long does its facet take on 4498 rows?
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/categories/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+await page.goto(target, { waitUntil: 'load' });
+await sleep(3500);
+await page.locator('button.btn-apps').first().click(); await sleep(1200);
+await page.locator('.ac-menu-item:visible, .ac-menu a:visible').filter({ hasText: 'UNESCO' }).first().click();
+await page.waitForLoadState('load').catch(() => {}); await sleep(5500);
+const concepts = page.locator('.ldh-pane.is-active .ldh-block-body a:visible').filter({ hasText: 'Concepts' }).first();
+await concepts.click(); await page.waitForLoadState('load').catch(() => {}); await sleep(6000);
+
+console.log('total results:', await page.locator('.ldh-pane.is-active .ldh-view-toolbar .right .count b').first().textContent().catch(() => '?'));
+const pills = page.locator('.ldh-pane.is-active .ldh-view-toolbar .left .facet button.facet-pill');
+const n = await pills.count();
+console.log('facets offered:', n);
+for (let i = 0; i < n; i++) console.log(`  [${i}] ${(await pills.nth(i).textContent()).replace(/\s+/g,' ').trim().slice(0,30)} — ${await pills.nth(i).getAttribute('title')}`);
+
+if (n) {
+  const t = Date.now();
+  await pills.first().click();
+  const ok = await page.waitForFunction(() => !document.querySelector('.facet-pop:not(.sort-pop) .facet-loading'), null, { timeout: 25000 }).then(() => true, () => false);
+  console.log(`first facet: ${ok ? `loaded in ${((Date.now()-t)/1000).toFixed(1)}s` : 'TIMED OUT after 25s'}`);
+  if (ok) console.log('  values:', await page.locator('.facet-pop:not(.sort-pop) .facet-values button.opt').count());
+}
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-create.mjs b/screencast/scenes/probe-create.mjs
new file mode 100644
index 00000000..41d6132c
--- /dev/null
+++ b/screencast/scenes/probe-create.mjs
@@ -0,0 +1,40 @@
+// Not a scene. What the Create menu offers, per document and per mode.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+import { switchDocumentMode } from '../lib/blocks.mjs';
+
+const argv = process.argv.slice(2);
+const where = argv.includes('--path') ? argv[argv.indexOf('--path') + 1] : '/team-coverage-briefing/';
+const { base, target, identity } = await resolve(where);
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+const plain = { click: async (l) => l.click() };
+
+const offers = async (label) => {
+  const btn = page.locator('button.drop-toggle').filter({ hasText: 'Create' }).first();
+  if (!(await btn.count())) return console.log(`${label}: no Create button`);
+  await btn.click();
+  await sleep(1400);
+  console.log(`${label}:`, await page.evaluate(() => JSON.stringify(
+    [...document.querySelectorAll('.add-constructor')].filter((e) => e.offsetParent !== null)
+      .map((e) => e.textContent.replace(/\s+/g, ' ').trim().slice(0, 26)))));
+  await page.keyboard.press('Escape');
+  await sleep(700);
+};
+
+await page.goto(target, { waitUntil: 'load' });
+await sleep(4000);
+console.log('document:', where, '| mode in url:', page.url().includes('mode=') ? page.url().split('mode=')[1].slice(-20) : 'default');
+await offers('  as opened     ');
+
+for (const m of ['read-mode', 'content-mode']) {
+  const ok = await switchDocumentMode(page, plain, m);
+  await sleep(2500);
+  await offers(`  after ${m.padEnd(13)}`.slice(0, 22) + (ok ? '' : ' (switch failed)'));
+}
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-createitem.mjs b/screencast/scenes/probe-createitem.mjs
new file mode 100644
index 00000000..27ade16f
--- /dev/null
+++ b/screencast/scenes/probe-createitem.mjs
@@ -0,0 +1,65 @@
+// Not a scene. What Create ▸ Item does on camera: the modal's fields, its scope,
+// where Save lands, and what the breadcrumb looks like — so a scene can create its
+// write-up document from where it already is instead of teleporting to a fixture.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+
+const argv = process.argv.slice(2);
+const where = argv.includes('--path') ? argv[argv.indexOf('--path') + 1] : '/';
+const opts = await resolve(where);
+const { target, identity, base } = opts;
+
+await runScene({
+  id: 'probe-createitem', target, identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await sleep(6000);
+
+    console.log('  breadcrumb DOM:', await page.evaluate(() => {
+      const cands = [...document.querySelectorAll('[role="navigation"] a, [role="navigation"] button')]
+        .filter((e) => e.offsetParent !== null).slice(0, 8);
+      return JSON.stringify(cands.map((e) => ({ tag: e.tagName.toLowerCase(), cls: e.className, text: e.innerText.replace(/\s+/g, ' ').trim().slice(0, 24), href: e.getAttribute('href') })));
+    }));
+
+    const menu = page.locator('button.drop-toggle').filter({ hasText: 'Create' }).first();
+    console.log('  Create buttons visible:', await page.locator('button.drop-toggle').filter({ hasText: 'Create' }).count());
+    await cursor.click(menu);
+    await sleep(1400);
+    console.log('  offers:', await page.evaluate(() => JSON.stringify(
+      [...document.querySelectorAll('.add-constructor')].filter((e) => e.offsetParent !== null)
+        .map((e) => e.textContent.replace(/\s+/g, ' ').trim().slice(0, 22)))));
+    // Ligature-tolerant: the entry's text is "descriptionItem" — icon glyph run into the word.
+    const item = page.locator('.add-constructor').filter({ hasText: /Item$/ }).first();
+    if (!(await item.isVisible().catch(() => false))) { console.log('  no Item entry'); return; }
+    await cursor.click(item);
+    await sleep(3500);
+
+    console.log('  modal:', await page.evaluate(() => {
+      const m = [...document.querySelectorAll('.modal, .modal-constructor, [class*="modal"]')].find((e) => e.offsetParent !== null);
+      if (!m) return '(no visible modal)';
+      const inPane = !!m.closest('.ldh-pane.is-active');
+      const groups = [...m.querySelectorAll('.ldh-prop-group')].map((g) => {
+        const inputs = [...g.querySelectorAll('input:not([type=hidden]), select, textarea')].map((x) => `${x.tagName.toLowerCase()}[name=${x.name}]`);
+        return `${g.innerText.replace(/\s+/g, ' ').trim().slice(0, 30)} -> ${inputs.join(',') || '(none)'}`;
+      });
+      const btns = [...m.querySelectorAll('button')].map((b) => `${b.className.split(' ').slice(0, 3).join('.')}:${b.innerText.trim().slice(0, 12)}`);
+      return JSON.stringify({ cls: m.className, insideActivePane: inPane, groups, buttons: btns }, null, 1);
+    }));
+
+    // Fill Title by property name and save; report where it lands and in what mode.
+    const title = page.locator('.modal .ldh-prop-group, .modal-constructor .ldh-prop-group').filter({ hasText: 'Title' }).first()
+      .locator('input:not([type=hidden]):visible').first();
+    if (await title.count()) {
+      await cursor.click(title);
+      await title.pressSequentially('Probe created on camera', { delay: 30 });
+      const saveBtn = page.locator('.modal button, .modal-constructor button').filter({ hasText: /Save|Create/ }).last();
+      console.log('  save button:', await saveBtn.innerText().catch(() => '?'));
+      await cursor.click(saveBtn);
+      await page.waitForLoadState('load').catch(() => {});
+      await sleep(5000);
+      console.log('  landed on:', page.url());
+      console.log('  mode toggle:', (await page.locator('button.layout-modes.drop-toggle, button[title="Mode"]').first().textContent().catch(() => '?')).replace(/\s+/g, ' ').trim());
+      console.log('  document title:', await page.title());
+    } else console.log('  no Title field found in modal');
+  },
+}, {});
diff --git a/screencast/scenes/probe-ctorform.mjs b/screencast/scenes/probe-ctorform.mjs
new file mode 100644
index 00000000..27f4b650
--- /dev/null
+++ b/screencast/scenes/probe-ctorform.mjs
@@ -0,0 +1,32 @@
+// Read-only: which fields the new constructors put on a Create form. Opens, reads, closes.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const CASES = [
+  { page: '/customers/GOURL/', view: 'Orders from this customer' },
+  { page: '/employees/2/', view: 'Direct reports' },
+  { page: '/suppliers/1/', view: 'Products supplied by this supplier' },
+];
+await runScene({ id: 'probe-ctorform', target: base + CASES[0].page, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    for (const c of CASES) {
+      await page.goto(base + c.page, { waitUntil: 'load' });
+      const block = page.locator('.ldh-pane.is-active .ldh-block[data-for-class]').filter({ hasText: c.view }).first();
+      const btn = block.locator('button.add-instance').first();
+      const ok = await btn.waitFor({ state: 'visible', timeout: 25_000 }).then(() => true, () => false);
+      if (!ok) { console.log(`  ${c.page} ${c.view}: no Create button`); continue; }
+      await btn.click();
+      const modal = page.locator('.modal-constructor, .ac-modal').last();
+      await modal.waitFor({ state: 'visible', timeout: 15_000 }).catch(() => {});
+      await sleep(2500);
+      const fields = await modal.locator('.ldh-prop-group').evaluateAll((gs) => gs.map((g) => {
+        const label = (g.querySelector('label, .ldh-prop-label, dt')?.textContent || g.textContent).replace(/\s+/g, ' ').trim().slice(0, 22);
+        const inp = g.querySelector('input:not([type=hidden]), select, textarea');
+        return `${label}[${inp ? (inp.type || inp.tagName.toLowerCase()) : '-'}${inp?.value ? '=' + inp.value.slice(0, 18) : ''}]`;
+      }));
+      console.log(`  ${c.page} ${c.view} (${btn.evaluate ? await btn.getAttribute('data-for-class') : ''}): ${fields.join(' | ')}`);
+      const close = modal.locator('button').filter({ hasText: /Close|close/ }).first();
+      if (await close.count()) await close.click(); else await page.keyboard.press('Escape');
+      await sleep(800);
+    }
+  } });
diff --git a/screencast/scenes/probe-cursorclick.mjs b/screencast/scenes/probe-cursorclick.mjs
new file mode 100644
index 00000000..65bcd840
--- /dev/null
+++ b/screencast/scenes/probe-cursorclick.mjs
@@ -0,0 +1,42 @@
+// Not a scene. Does the injected cursor's raw mouse click reach the pinned
+// + XHTML button, or does only Playwright's own click work?
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+import { CURSOR_INIT, makeCursor } from '../lib/cursor.mjs';
+import { switchDocumentMode } from '../lib/blocks.mjs';
+
+const { base, target, identity } = await resolve('/team-coverage-briefing/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  permissions: ['clipboard-read', 'clipboard-write'],
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+await context.addInitScript(CURSOR_INIT);
+const page = await context.newPage();
+const cursor = makeCursor(page);
+
+await page.goto(target, { waitUntil: 'load' });
+await sleep(3500);
+console.log('mode switch:', await switchDocumentMode(page, cursor, 'content-mode'));
+await sleep(2500);
+
+const btn = page.locator('button.create-action.add-constructor').filter({ hasText: 'XHTML' }).first();
+const box = await btn.boundingBox();
+console.log('button box:', box && `${Math.round(box.x)},${Math.round(box.y)} ${Math.round(box.width)}x${Math.round(box.height)}`);
+console.log('at that point:', await page.evaluate(([x, y]) => {
+  const e = document.elementFromPoint(x, y);
+  return e ? `${e.tagName.toLowerCase()}.${String(e.className).trim()}` : 'nothing';
+}, [box.x + box.width / 2, box.y + box.height / 2]));
+
+await cursor.click(btn);
+await sleep(3000);
+console.log('editor after cursor.click:', await page.locator('.rdfa-editor-content [contenteditable]').count());
+
+if (!(await page.locator('.rdfa-editor-content [contenteditable]').count())) {
+  await btn.click();
+  await sleep(3000);
+  console.log('editor after locator.click:', await page.locator('.rdfa-editor-content [contenteditable]').count());
+}
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-dark.mjs b/screencast/scenes/probe-dark.mjs
new file mode 100644
index 00000000..7bf9de7b
--- /dev/null
+++ b/screencast/scenes/probe-dark.mjs
@@ -0,0 +1,18 @@
+// Read-only: what the demo looks like in the dark scheme, on four kinds of page.
+import { chromium } from 'playwright';
+import { resolve } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OUT = '/private/tmp/claude-501/-Users-martynas-WebRoot-LinkedDataHub/5542c912-918c-4be9-8864-ed41b61b33fa/scratchpad/dark';
+const browser = await chromium.launch();
+const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: 'dark', ignoreHTTPSErrors: true, clientCertificates: identity ?? [] });
+await ctx.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await ctx.newPage();
+for (const [p, name] of [['/territories/', 'map'], ['/employees/', 'grid'], ['/orders/10423/?mode=' + encodeURIComponent('https://w3id.org/atomgraph/client#GraphMode'), 'graph'], ['/regions/4/', 'record'], ['/categories/', 'cats']]) {
+  await page.goto(base + p, { waitUntil: 'load' }).catch(() => {});
+  await page.waitForSelector('.ldh-pane.is-active .ldh-block, canvas', { timeout: 30_000 }).catch(() => {});
+  await page.waitForTimeout(5000);
+  await page.screenshot({ path: `${OUT}/${name}.png` });
+  console.log('  ' + name, await page.evaluate(() => getComputedStyle(document.body).backgroundColor));
+}
+await browser.close();
diff --git a/screencast/scenes/probe-dnd-events.mjs b/screencast/scenes/probe-dnd-events.mjs
new file mode 100644
index 00000000..22e0f12d
--- /dev/null
+++ b/screencast/scenes/probe-dnd-events.mjs
@@ -0,0 +1,32 @@
+// Block reorder through the DOM's own drag events (a DataTransfer carrying the app's
+// block type) — Playwright's pointer drags never reached the handler. A success
+// PATCHes the order (test-run state).
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+import { contentModeUrl } from '../lib/blocks.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const [pg] = await sparql(base, `PREFIX dct: <http://purl.org/dc/terms/> SELECT ?doc WHERE { GRAPH ?doc { ?doc dct:title "One rep for the South" } } LIMIT 1`);
+await runScene({ id: 'probe-dnd-events', target: pg.doc, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(contentModeUrl(pg.doc), { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active span.ldh-bh-drag', { state: 'attached', timeout: 30_000 }); await sleep(4000);
+    const r = await page.evaluate(async () => {
+      const rows = [...document.querySelectorAll('.ldh-pane.is-active .ldh-block-row')].filter((r) => r.querySelector('span.ldh-bh-drag'));
+      const before = rows.map((r) => r.getAttribute('about'));
+      const src = rows[0], dst = rows[rows.length - 1];
+      const handle = src.querySelector('span.ldh-bh-drag');
+      const dt = new DataTransfer();
+      const fire = (type, target, extra = {}) => { const r = target.getBoundingClientRect(); const e = new DragEvent(type, { bubbles: true, cancelable: true, dataTransfer: dt, clientX: r.left + 20, clientY: r.top + 10, ...extra }); target.dispatchEvent(e); return e.defaultPrevented; };
+      fire('dragstart', handle);
+      const types = [...dt.types];
+      const inner = dst.querySelector('.ldh-block') || dst;
+      const enter = fire('dragenter', inner); await new Promise((r) => setTimeout(r, 100)); const over = fire('dragover', inner); await new Promise((r) => setTimeout(r, 100));
+      const marked = dst.className;
+      const drop = fire('drop', inner); fire('dragend', handle);
+      await new Promise((r) => setTimeout(r, 3000));
+      const after = [...document.querySelectorAll('.ldh-pane.is-active .ldh-block-row')].filter((r) => r.querySelector('span.ldh-bh-drag')).map((r) => r.getAttribute('about'));
+      return { types, enter, over, marked, drop, before: before.map((a) => a?.slice(-6)), after: after.map((a) => a?.slice(-6)), changed: JSON.stringify(before) !== JSON.stringify(after) };
+    });
+    console.log('  dnd:', JSON.stringify(r));
+  } });
diff --git a/screencast/scenes/probe-docs-fix.mjs b/screencast/scenes/probe-docs-fix.mjs
new file mode 100644
index 00000000..92347387
--- /dev/null
+++ b/screencast/scenes/probe-docs-fix.mjs
@@ -0,0 +1,78 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+import * as nav from '../lib/nav.mjs';
+
+const { target, identity, base, ...a } = await resolve('/');
+
+await runScene({
+  id: 'probe-docs-fix',
+  target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 810, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    const at = async (p, ms = 6500) => { await page.goto(base + p, { waitUntil: 'load' }); await page.waitForTimeout(ms); };
+    const classesUnder = (sel) => page.evaluate((s) => {
+      const root = document.querySelector(s);
+      if (!root) return `(no ${s})`;
+      return [...new Set([...root.querySelectorAll('*')].map((e) => e.className).filter((c) => typeof c === 'string' && c))].slice(0, 40).join(' · ');
+    }, sel);
+
+    // 1 + 2: the navbar and the drawer's real anatomy
+    await at('/customers/');
+    console.log('\n[navbar] top-level classes:', await page.evaluate(() =>
+      [...document.querySelectorAll('body > *, body > * > *')].map((e) => e.tagName.toLowerCase() + '.' + String(e.className).split(' ').slice(0, 3).join('.')).slice(0, 14).join(' | ')));
+    console.log('[navbar] address-ish:', await page.evaluate(() =>
+      [...document.querySelectorAll('input, form')].map((e) => e.tagName.toLowerCase() + '[' + (e.name || e.className) + ']').slice(0, 12).join(' | ')));
+
+    await nav.openTree(page, cursor);
+    await page.waitForTimeout(1500);
+    console.log('\n[drawer] container of .tree-link:', await page.evaluate(() => {
+      let e = document.querySelector('.tree-link'); const chain = [];
+      while (e && chain.length < 8) { chain.push(e.tagName.toLowerCase() + '.' + String(e.className).split(' ').join('.')); e = e.parentElement; }
+      return chain.join(' ← ');
+    }));
+    console.log('[drawer] classes:', await classesUnder('.sidebar, aside, [class*="drawer"], [class*="sidebar"]'));
+    console.log('[drawer] expanders:', await page.evaluate(() =>
+      [...document.querySelectorAll('.tree-link')].slice(0, 3).map((a) => a.parentElement.outerHTML.slice(0, 220)).join('\n   ')));
+    console.log('[drawer] counts near numbers:', await page.evaluate(() =>
+      [...document.querySelectorAll('a, li, div')].filter((e) => /^\s*\S[\s\S]{0,40}\s\d{2,}\s*$/.test(e.textContent) && e.children.length <= 3).slice(0, 6).map((e) => e.tagName.toLowerCase() + '.' + String(e.className).split(' ').slice(0,2).join('.') + ' = ' + e.textContent.trim().slice(0, 40)).join(' | ')));
+
+    // 3: does /orders/10265/ exist, and what backlinks does it carry
+    await at('/orders/10265/');
+    console.log('\n[order] title:', (await page.title()).slice(0, 60), '| tb-links:', await page.locator('.ldh-pane.is-active button.tb-links').count());
+    const lb = page.locator('.ldh-pane.is-active button.tb-links').first();
+    if (await lb.count()) {
+      await lb.click(); await page.waitForTimeout(3000);
+      console.log('[order] popover html:', (await page.evaluate(() => {
+        const p = [...document.querySelectorAll('*')].find((e) => /BACKLINKS/.test(e.textContent) && e.children.length < 12 && e.offsetParent);
+        return p ? p.outerHTML.slice(0, 400) : '(none)';
+      })));
+    }
+
+    // 4: what control opens a query block's editor
+    await at('/categories/');
+    console.log('\n[block] row controls:', await page.evaluate(() => {
+      const row = [...document.querySelectorAll('.ldh-block-row')].find((r) => /Revenue by category/.test(r.textContent));
+      if (!row) return '(no such row)';
+      return [...row.querySelectorAll('button, a')].map((b) => b.tagName.toLowerCase() + '.' + String(b.className).split(' ').slice(0, 3).join('.') + '{' + b.textContent.trim().slice(0, 18) + '}').slice(0, 18).join(' | ');
+    }));
+    console.log('[block] contenteditable count:', await page.locator('[contenteditable]').count(), '| rdfa:', await page.locator('[class*="rdfa"]').count());
+
+    // 5: the /sparql editor's run control
+    await at('/sparql', 9000);
+    console.log('\n[sparql] url:', page.url());
+    console.log('[sparql] CodeMirror:', await page.locator('.CodeMirror').count(), '| buttons:', await page.evaluate(() =>
+      [...document.querySelectorAll('button, input[type=submit], .yasqe_queryButton')].map((b) => b.tagName.toLowerCase() + '.' + String(b.className).split(' ').slice(0, 3).join('.') + '{' + (b.textContent || b.value || '').trim().slice(0, 20) + '}').slice(0, 20).join(' | ')));
+
+    // 6: the search dialog after submit
+    await at('/customers/');
+    await nav.openTree(page, cursor);
+    const box = page.locator('input[name="q"]:visible').first();
+    console.log('\n[search] input found:', await box.count());
+    if (await box.count()) {
+      await box.click(); await box.pressSequentially('Chai', { delay: 60 });
+      await page.keyboard.press('Enter'); await page.waitForTimeout(8000);
+      console.log('[search] dialogs:', await page.evaluate(() =>
+        [...document.querySelectorAll('.modal, [role=dialog], [class*="dialog"]')].filter((e) => e.offsetParent).map((e) => e.className + ' links=' + e.querySelectorAll('a').length).join(' | ') || '(none)'));
+      console.log('[search] url now:', page.url());
+    }
+  },
+}, {});
diff --git a/screencast/scenes/probe-docs-fix2.mjs b/screencast/scenes/probe-docs-fix2.mjs
new file mode 100644
index 00000000..53ba1f01
--- /dev/null
+++ b/screencast/scenes/probe-docs-fix2.mjs
@@ -0,0 +1,69 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+import * as nav from '../lib/nav.mjs';
+
+const { target, identity, base, ...a } = await resolve('/');
+
+await runScene({
+  id: 'probe-docs-fix2',
+  target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 810, deviceScaleFactor: 1 }),
+  async body({ page, cursor, shot }) {
+    const at = async (p, ms = 7000) => { await page.goto(base + p, { waitUntil: 'load' }); await page.waitForTimeout(ms); };
+
+    // (4) what the chart block's pencil opens
+    await at('/categories/');
+    const row = page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'Revenue by category' }).first();
+    await row.scrollIntoViewIfNeeded(); await row.hover(); await page.waitForTimeout(800);
+    const pencils = row.locator('button.ac-iconbtn').filter({ hasText: 'edit' });
+    console.log('\n[chart] pencils:', await pencils.count());
+    await pencils.last().click();
+    await page.waitForTimeout(6000);
+    console.log('[chart] after pencil — CodeMirror:', await page.locator('.CodeMirror').count(),
+      '| yasqe:', await page.locator('[class*="yasqe"]').count(),
+      '| textarea:', await page.locator('textarea').count());
+    await shot('chart-pencil');
+
+    // (4b) the XHTML block's pencil — the rich-text editor
+    await at('/categories/');
+    const prose = page.locator('.ldh-pane.is-active .ldh-block-row').first();
+    await prose.scrollIntoViewIfNeeded(); await prose.hover(); await page.waitForTimeout(800);
+    const p2 = prose.locator('button.ac-iconbtn').filter({ hasText: 'edit' });
+    console.log('\n[prose] pencils:', await p2.count());
+    if (await p2.count()) {
+      await p2.last().click(); await page.waitForTimeout(5000);
+      console.log('[prose] contenteditable:', await page.locator('[contenteditable="true"]').count(),
+        '| toolbars:', await page.evaluate(() => [...document.querySelectorAll('[class*="toolbar"]')].filter((e) => e.offsetParent).map((e) => e.className).join(' | ') || '(none)'));
+      await shot('prose-pencil');
+    }
+
+    // (5) the SPARQL endpoint in a browser
+    for (const p of ['/sparql', '/sparql?query=SELECT%20*%20WHERE%20%7B%3Fs%20%3Fp%20%3Fo%7D%20LIMIT%2010']) {
+      await at(p, 9000);
+      console.log(`\n[sparql ${p.slice(0, 20)}] CodeMirror=${await page.locator('.CodeMirror').count()} title="${(await page.title()).slice(0, 40)}" body="${(await page.locator('body').innerText()).replace(/\n+/g, ' / ').slice(0, 160)}"`);
+    }
+    await shot('sparql');
+
+    // (6) the search modal's contents
+    await at('/customers/');
+    await nav.openTree(page, cursor);
+    const box = page.locator('input[name="q"]:visible').first();
+    await box.click(); await box.pressSequentially('Chai', { delay: 60 });
+    await page.keyboard.press('Enter');
+    await page.waitForTimeout(14000);
+    const modal = page.locator('.ac-modal:visible').first();
+    console.log('\n[search] modal text:', (await modal.innerText()).replace(/\n+/g, ' / ').slice(0, 300));
+    console.log('[search] links:', await modal.locator('a').count(), '| rows:', await modal.locator('tbody tr, li').count());
+    await shot('search-modal');
+
+    // (3) backlinks on an order — visible button only
+    await at('/orders/10265/');
+    const vis = page.locator('.ldh-pane.is-active button.tb-links:visible').first();
+    console.log('\n[order] visible tb-links:', await page.locator('.ldh-pane.is-active button.tb-links:visible').count());
+    await vis.scrollIntoViewIfNeeded(); await cursor.click(vis); await page.waitForTimeout(3500);
+    console.log('[order] popover:', await page.evaluate(() => {
+      const p = [...document.querySelectorAll('*')].find((e) => /BACKLINK/i.test(e.textContent) && e.children.length < 15 && e.offsetParent);
+      return p ? p.className + ' links=' + p.querySelectorAll('a').length : '(none)';
+    }));
+    await shot('order-backlinks');
+  },
+}, {});
diff --git a/screencast/scenes/probe-docs-targets.mjs b/screencast/scenes/probe-docs-targets.mjs
new file mode 100644
index 00000000..4c9697a0
--- /dev/null
+++ b/screencast/scenes/probe-docs-targets.mjs
@@ -0,0 +1,48 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+
+const { target, identity, base, ...a } = await resolve('/');
+
+await runScene({
+  id: 'probe-docs-targets',
+  target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 810, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    const at = async (path, ms = 6500) => {
+      await page.goto(base + path, { waitUntil: 'load' });
+      await page.waitForTimeout(ms);
+    };
+
+    for (const path of ['/', '/categories/', '/products/', '/orders/']) {
+      await at(path);
+      const blocks = await page.locator('.ldh-pane.is-active .ldh-block').allInnerTexts();
+      console.log(`\n${path}`);
+      console.log(`  blocks: ${blocks.map((t) => t.split('\n')[0].slice(0, 30)).join(' | ')}`);
+      console.log(`  svg=${await page.locator('.ldh-pane.is-active svg').count()} canvas=${await page.locator('.ldh-pane.is-active canvas').count()}`);
+      const chart = page.locator('.ldh-pane.is-active svg').first();
+      if (await chart.count()) console.log(`  first svg box: ${JSON.stringify(await chart.boundingBox())}`);
+    }
+
+    for (const path of ['/categories/beverages/', '/employees/2/', '/products/1/', '/customers/']) {
+      await at(path);
+      const links = page.locator('.ldh-pane.is-active button.tb-links').first();
+      if (!(await links.count())) { console.log(`\n${path}  → no tb-links button`); continue; }
+      await links.click();
+      await page.waitForTimeout(3000);
+      const pops = page.locator('[class*="links"]:visible').filter({ hasText: /BACKLINK/i });
+      const text = (await pops.count()) ? (await pops.first().innerText()).replace(/\n+/g, ' / ').slice(0, 240) : '(none)';
+      console.log(`\n${path}  → ${text}`);
+    }
+
+    await at('/orders/');
+    for (const menu of ['Create', 'Actions']) {
+      const btn = page.locator('.ldh-pane.is-active button.drop-toggle').filter({ hasText: menu }).first();
+      if (!(await btn.count())) { console.log(`\n${menu}: no button`); continue; }
+      await btn.click();
+      await page.waitForTimeout(1200);
+      const open = page.locator('ul:visible, .ac-menu:visible, .dropdown-menu:visible').filter({ hasText: /\w/ }).last();
+      console.log(`\n${menu} menu: ${(await open.innerText()).replace(/\n+/g, ' | ').slice(0, 300)}`);
+      await page.keyboard.press('Escape');
+      await page.waitForTimeout(500);
+    }
+  },
+}, {});
diff --git a/screencast/scenes/probe-drag-native.mjs b/screencast/scenes/probe-drag-native.mjs
new file mode 100644
index 00000000..8beeb8d9
--- /dev/null
+++ b/screencast/scenes/probe-drag-native.mjs
@@ -0,0 +1,118 @@
+// Does a real pointer drag reorder a block, and does the drop marker show while it hangs?
+//
+// The compose scene moves a block by dispatching the app's DragEvents itself, because
+// pointer drags "never reached the handler". This probe tries the pointer again, with
+// what Chromium's drag emulation needs: mousedown on the draggable handle, a first
+// small move to cross the drag threshold, then the travel in steps, a hold over the
+// target, and the release. It samples the target row for the app's `drag-over` class
+// on every step, photographs the hold, and reads the block order back before and after.
+//
+//   node scenes/probe-drag-native.mjs --base … --cert-file … --cert-password-file … --ldh …
+//
+// Read-only for the demo: it writes into its own scratch document, drag-probe, which
+// it creates and deletes.
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { chromium } from 'playwright';
+import { resolve, ROOT, sleep } from '../lib/harness.mjs';
+import { ui } from '../lib/dom.mjs';
+import { contentModeUrl } from '../lib/blocks.mjs';
+import { spawn } from 'node:child_process';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const password = opts.certPassword ?? (await fs.readFile(opts.certPasswordFile, 'utf8')).trim();
+const run = (cmd, args, input = null) => new Promise((res) => {
+  const p = spawn(cmd, args); if (input !== null) { p.stdin.write(input); p.stdin.end(); }
+  let out = '', err = ''; p.stdout.on('data', (d) => (out += d)); p.stderr.on('data', (d) => (err += d));
+  p.on('close', (code) => res({ code, out: out.trim(), err: err.trim() }));
+});
+
+const url = `${base}/drag-probe/`;
+const ttl = `@prefix dh: <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#> .
+@prefix ldh: <https://w3id.org/atomgraph/linkeddatahub#> .
+@prefix sioc: <http://rdfs.org/sioc/ns#> .
+@prefix dct: <http://purl.org/dc/terms/> .
+@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
+<> a dh:Item ; sioc:has_container <${base}/> ; dct:title "Drag probe" ; rdf:_1 <#a> ; rdf:_2 <#b> .
+<#a> a ldh:XHTML ; rdf:value """<div xmlns="http://www.w3.org/1999/xhtml"><p>Block A. Eastern has four reps on nineteen territories.</p></div>"""^^rdf:XMLLiteral .
+<#b> a ldh:XHTML ; rdf:value """<div xmlns="http://www.w3.org/1999/xhtml"><p>Block B. Southern has two on eight.</p></div>"""^^rdf:XMLLiteral .
+`;
+const put = await run(opts.ldh, ['put', '-c', opts.certFile, '-p', password, '--content-type', 'text/turtle', url], ttl);
+if (put.code !== 0) { console.error('put failed:', put.err.split(password).join('••••').slice(0, 500)); process.exit(1); }
+console.log('scratch document:', url);
+
+const outDir = path.join(ROOT, 'tracks', '.probe'); await fs.mkdir(outDir, { recursive: true });
+const browser = await chromium.launch({ headless: !opts.headed });
+const context = await browser.newContext({ ignoreHTTPSErrors: true, viewport: { width: 1440, height: 900 }, deviceScaleFactor: 2, ...(identity ? { clientCertificates: identity } : {}) });
+// the first-time message modal is dismissed by a cookie, as the harness does
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+page.on('response', (r) => { if (r.request().method() === 'GET' && r.url().startsWith(url)) console.log('  GET', r.status(), r.url().slice(url.length, url.length + 40), 'ETag:', r.headers()['etag'], r.headers()['x-cache'] ?? r.headers()['age'] ?? ''); });
+await page.goto(contentModeUrl(url), { waitUntil: 'load' });
+await page.locator('.ldh-block-row').first().waitFor({ timeout: 30_000 });
+await sleep(5000);
+
+const order = () => page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block-row[about]')].map((r) => r.getAttribute('about').split('#')[1]));
+const overs = () => page.evaluate(() => [...document.querySelectorAll('.ldh-block-row.drag-over')].map((r) => r.getAttribute('about').split('#')[1]));
+const rows = ui(page).locator('.ldh-block-row');
+const from = rows.first(), to = rows.nth(1);
+console.log('order before:', await order());
+
+await from.hover(); await sleep(400);
+const handle = from.locator('span.ldh-bh-drag').first();
+if (!(await handle.count())) { console.log('no drag handle rendered — not in content mode with write access?'); await browser.close(); process.exit(1); }
+const hb = await handle.boundingBox(); const tb = await to.locator('.ldh-block').first().boundingBox();
+console.log('handle', hb, 'target', tb, 'draggable on row:', await from.getAttribute('draggable'));
+const hx = hb.x + hb.width / 2, hy = hb.y + hb.height / 2;
+const tx = tb.x + 120, ty = tb.y + Math.min(60, tb.height / 2);
+
+await page.mouse.move(hx, hy); await sleep(200);
+await page.mouse.down(); await sleep(150);
+await page.mouse.move(hx + 4, hy + 4); await sleep(100);      // cross the drag threshold
+await page.mouse.move(hx + 12, hy + 12); await sleep(100);
+const seen = new Set();
+const steps = 24;
+for (let i = 1; i <= steps; i++) {
+  await page.mouse.move(hx + (tx - hx) * i / steps, hy + (ty - hy) * i / steps);
+  await sleep(40);
+  for (const o of await overs()) seen.add(o);
+}
+await sleep(700);
+for (const o of await overs()) seen.add(o);
+await page.screenshot({ path: path.join(outDir, 'drag-hold.png') });
+console.log('drag-over seen during travel/hold:', [...seen]);
+page.on('console', (m) => { if (m.type() === 'error' || m.type() === 'warning') console.log('  page', m.type() + ':', m.text().slice(0, 200)); });
+page.on('pageerror', (e) => console.log('  pageerror:', String(e).slice(0, 200)));
+let patchBody = null, patchHeaders = null;
+page.on('request', (r) => { if (['PUT', 'POST', 'PATCH'].includes(r.method())) { console.log('  ', r.method(), r.url(), 'If-Match:', r.headers()['if-match'], 'Accept:', r.headers()['accept'], 'Content-Type:', r.headers()['content-type']); if (r.method() === 'PATCH') { patchBody = r.postData(); patchHeaders = r.headers(); } } });
+page.on('response', (r) => { if (['PUT', 'POST', 'PATCH'].includes(r.request().method())) console.log('  ', r.status(), r.request().method(), r.url()); });
+await page.mouse.up();
+const changed = await page.waitForFunction(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block-row[about]')].map((r) => r.getAttribute('about').split('#')[1]).join() !== 'a,b', null, { timeout: 10_000 }).then(() => true, () => false);
+console.log('order after pointer drag:', await order(), changed ? '(changed)' : '(unchanged after 10s)');
+
+if (JSON.stringify(await order()) === JSON.stringify(['a', 'b'])) {
+  console.log('pointer drag did not reorder; trying locator.dragTo');
+  await handle.dragTo(to.locator('.ldh-block').first(), { targetPosition: { x: 120, y: 60 } }).catch((e) => console.log('dragTo threw:', e.message.split('\n')[0]));
+  await sleep(1500);
+  console.log('order after dragTo:', await order());
+}
+await page.screenshot({ path: path.join(outDir, 'drag-after.png') });
+// Replay the app's own PATCH with every pairing of the representation whose ETag is sent
+// and the Accept the write carries, to see which pairing the server honours.
+if (patchBody) {
+  console.log('patch body:', patchBody.replace(/\s+/g, ' ').slice(0, 300));
+  const accepts = ['text/turtle', 'text/html', 'application/rdf+xml', '*/*'];
+  const etags = {};
+  for (const a of accepts) { const r = await page.request.get(url, { headers: { Accept: a } }); etags[a] = r.headers()['etag']; }
+  console.log('etags:', etags);
+  for (const tagOf of accepts) for (const acc of ['text/turtle', '*/*', patchHeaders['accept'] ?? '*/*']) {
+    const r = await page.request.fetch(url, { method: 'PATCH', headers: { 'If-Match': etags[tagOf], Accept: acc, 'Content-Type': patchHeaders['content-type'] }, data: patchBody });
+    console.log(`  If-Match from ${tagOf.padEnd(19)} Accept ${acc.padEnd(60)} → ${r.status()}`);
+  }
+  const r = await page.request.fetch(url, { method: 'PATCH', headers: { Accept: '*/*', 'Content-Type': patchHeaders['content-type'] }, data: patchBody });
+  console.log(`  no If-Match → ${r.status()}`);
+}
+await browser.close();
+const del = await run(opts.ldh, ['delete', url, '-c', opts.certFile, '-p', password]);
+console.log('scratch removed:', del.code === 0);
diff --git a/screencast/scenes/probe-dragattr.mjs b/screencast/scenes/probe-dragattr.mjs
new file mode 100644
index 00000000..f4831db8
--- /dev/null
+++ b/screencast/scenes/probe-dragattr.mjs
@@ -0,0 +1,12 @@
+// Read-only: is the block drag handle natively draggable, and what is the row order now.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const [pg] = await sparql(base, `PREFIX dct: <http://purl.org/dc/terms/> SELECT ?doc WHERE { GRAPH ?doc { ?doc dct:title "Where we have nobody" } } LIMIT 1`);
+await runScene({ id: 'probe-dragattr', target: pg.doc, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(pg.doc + '?mode=' + encodeURIComponent('https://w3id.org/atomgraph/client#ContentMode'), { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active span.ldh-bh-drag', { state: 'attached', timeout: 25_000 }); await sleep(4000); const first = page.locator('.ldh-pane.is-active .ldh-block-row').filter({ has: page.locator('span.ldh-bh-drag') }).first(); await first.hover(); await sleep(600); console.log('  handle after hover:', JSON.stringify(await first.locator('span.ldh-bh-drag').first().evaluate((h) => ({ draggable: h.getAttribute('draggable'), display: getComputedStyle(h).display, visibility: getComputedStyle(h).visibility, box: h.getBoundingClientRect().width }))));
+    console.log('  rows:', JSON.stringify(await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block-row')].filter((r) => r.querySelector('span.ldh-bh-drag')).map((r) => ({ about: r.getAttribute('about')?.slice(-10), handleDraggable: r.querySelector('span.ldh-bh-drag').getAttribute('draggable'), handleParentDraggable: r.querySelector('span.ldh-bh-drag').closest('[draggable]')?.tagName, kind: r.querySelector('.ol-viewport') ? 'map' : r.querySelector('p') ? 'prose' : 'other', top: Math.round(r.getBoundingClientRect().top) })))));
+  } });
diff --git a/screencast/scenes/probe-dragdrop.mjs b/screencast/scenes/probe-dragdrop.mjs
new file mode 100644
index 00000000..246aef75
--- /dev/null
+++ b/screencast/scenes/probe-dragdrop.mjs
@@ -0,0 +1,25 @@
+// Read-only: the drag handle of a content block, what it dispatches, and what a page does
+// with a dropped file. DOM inspection only; nothing saved.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const [pg] = await sparql(base, `PREFIX dct: <http://purl.org/dc/terms/> SELECT ?doc WHERE { GRAPH ?doc { ?doc dct:title "One rep for the South" } }`);
+await runScene({ id: 'probe-dragdrop', target: pg.doc, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(pg.doc, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block-row', { timeout: 25_000 }); await sleep(5000);
+    const rows = await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block-row')].map((r, i) => ({ i, draggable: r.getAttribute('draggable'), cls: r.className.slice(0, 60), handle: [...r.querySelectorAll('[draggable="true"], .drag-handle, .btn-move, [class*="drag"], [class*="handle"]')].map((h) => h.tagName + '.' + h.className.slice(0, 50)).slice(0, 3), text: r.textContent.replace(/\s+/g, ' ').trim().slice(0, 40) })));
+    console.log('  rows:', JSON.stringify(rows));
+    console.log('  drop zones:', JSON.stringify(await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active [class*="drop"], .ldh-pane.is-active [ondrop], [data-drop]')].map((e) => e.tagName + '.' + e.className.slice(0, 60)).slice(0, 8))));
+    // handlers registered by Saxon-JS on the document? list ixsl event modes present in the SEF is not possible here; check which elements get dragstart listeners by dispatching a synthetic dragstart on the first row and reading dataTransfer set by handler
+    const dt = await page.evaluate(() => {
+      const r = document.querySelector('.ldh-pane.is-active .ldh-block-row');
+      const src = r.querySelector('[draggable="true"]') || r;
+      const dt = new DataTransfer();
+      const ev = new DragEvent('dragstart', { bubbles: true, cancelable: true, dataTransfer: dt });
+      src.dispatchEvent(ev);
+      return { source: src.tagName + '.' + src.className.slice(0, 50), types: [...dt.types], data: dt.types.map((t) => t + '=' + dt.getData(t).slice(0, 80)) };
+    });
+    console.log('  dragstart on first row:', JSON.stringify(dt));
+  } });
diff --git a/screencast/scenes/probe-drawer.mjs b/screencast/scenes/probe-drawer.mjs
new file mode 100644
index 00000000..fa016e43
--- /dev/null
+++ b/screencast/scenes/probe-drawer.mjs
@@ -0,0 +1,32 @@
+// Not a scene. What actually opens the drawer, and what the tree looks like once open.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/team-coverage-briefing/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+await page.goto(target, { waitUntil: 'load' });
+await sleep(4000);
+
+const state = async (label) => console.log(label, await page.evaluate(() => JSON.stringify({
+  total: document.querySelectorAll('.tree-link').length,
+  visible: [...document.querySelectorAll('.tree-link')].filter((a) => a.offsetParent !== null).length,
+  firstBox: (() => { const a = document.querySelector('.tree-link'); if (!a) return null;
+    const r = a.getBoundingClientRect(); return `${Math.round(r.x)},${Math.round(r.y)} ${Math.round(r.width)}x${Math.round(r.height)}`; })(),
+  containers: [...document.querySelectorAll('[class*=sb-], [class*=drawer], aside')].slice(0, 8)
+    .map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim()} vis=${e.offsetParent !== null} w=${Math.round(e.getBoundingClientRect().width)}`),
+})));
+
+await state('initial   ');
+await page.mouse.move(700, 400); await sleep(300);
+await page.mouse.move(3, 420);   await sleep(1800);
+await state('edge hover');
+await page.mouse.move(60, 430);  await sleep(1500);
+await state('inside    ');
+await page.screenshot({ path: 'shots/probe-drawer.png' });
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-editforms.mjs b/screencast/scenes/probe-editforms.mjs
new file mode 100644
index 00000000..13947352
--- /dev/null
+++ b/screencast/scenes/probe-editforms.mjs
@@ -0,0 +1,68 @@
+// Read-only: the three form gestures the loop extensions need. Nothing is saved.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const dump = async (scope) => scope.locator('.ldh-prop-group').evaluateAll((gs) => gs.map((g) => {
+  const label = (g.querySelector('label, .ldh-prop-label, dt')?.textContent || g.textContent).replace(/\s+/g, ' ').trim().slice(0, 18);
+  const inputs = [...g.querySelectorAll('input:not([type=hidden]), select, textarea')].map((i) => (i.type || i.tagName.toLowerCase()) + (i.value ? '=' + i.value.slice(0, 30) : ''));
+  const removes = g.querySelectorAll('button, [role=button]').length;
+  return `${label}[${inputs.join(',')}|btn${removes}]`;
+}));
+await runScene({ id: 'probe-editforms', target: base + '/employees/2/', identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    // 1. Person create modal from Fuller's Direct reports: add a second Territory field
+    await page.goto(base + '/employees/2/', { waitUntil: 'load' });
+    const block = page.locator('.ldh-pane.is-active .ldh-block[data-for-class]').filter({ hasText: 'Direct reports' }).first();
+    const btn = block.locator('button.add-instance').first();
+    await btn.waitFor({ state: 'visible', timeout: 25_000 });
+    await btn.click();
+    const modal = page.locator('.modal-constructor, .ac-modal').last();
+    await modal.waitFor({ state: 'visible', timeout: 15_000 }); await sleep(2000);
+    console.log('  person form:', (await dump(modal)).join(' '));
+    const adder = modal.locator('input.property-combobox, input[placeholder*="type" i], .ac-cb-box input').last();
+    console.log('  adder:', await adder.count(), await adder.getAttribute('placeholder').catch(() => null), await adder.getAttribute('class').catch(() => null));
+    console.log('  add button:', JSON.stringify(await modal.locator('button').filter({ hasText: /Add/ }).allTextContents()));
+    if (await adder.count()) {
+      await adder.click(); await page.keyboard.type('Territory', { delay: 60 }); await sleep(1500);
+      const items = modal.locator('.ac-cb-panel[role="listbox"] li.ac-cb-item, .ac-cb-panel li');
+      console.log('  adder suggestions:', JSON.stringify(await items.allTextContents().catch(() => [])));
+      if (await items.count()) { await items.first().click(); await sleep(800); }
+      const add = modal.locator('button').filter({ hasText: /^\s*(add|Add)\s*$/ }).last();
+      if (await add.count()) { await add.click(); await sleep(1200); }
+      console.log('  after add:', (await dump(modal)).join(' '));
+    }
+    await page.keyboard.press('Escape'); await sleep(600);
+    const close = modal.locator('button').filter({ hasText: /Close/ }).first(); if (await close.count()) await close.click().catch(() => {});
+    await sleep(800);
+
+    // 2. Order 10423 in Properties: per-resource edit of the order
+    await page.goto(base + '/orders/10423/', { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 25_000 }); await sleep(4000);
+    const orderBlock = page.locator('.ldh-pane.is-active .ldh-block').filter({ hasText: /Order status/ }).first();
+    const editBtns = orderBlock.locator('button.btn-edit, button[class*="edit"], button.ac-iconbtn').filter({ hasText: /edit/ });
+    console.log('  order block edit buttons:', await editBtns.count(), JSON.stringify(await orderBlock.locator('button').allTextContents().catch(() => [])).slice(0, 200));
+    if (await editBtns.count()) {
+      await editBtns.first().click(); await sleep(3000);
+      const form = page.locator('.ldh-pane.is-active form').filter({ has: page.locator('button.btn-save') }).last();
+      console.log('  order edit form:', (await dump(form)).join(' '));
+      const cancel = form.locator('button').filter({ hasText: /Cancel|Close|Reset/ }).first();
+      if (await cancel.count()) await cancel.click(); else await page.keyboard.press('Escape');
+      await sleep(800);
+    }
+
+    // 3. King (/employees/7/): edit form, territory values and their remove controls
+    await page.goto(base + '/employees/7/', { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 25_000 }); await sleep(4000);
+    const repBlock = page.locator('.ldh-pane.is-active .ldh-block').filter({ hasText: /Family name/ }).first();
+    const e2 = repBlock.locator('button').filter({ hasText: /edit/ });
+    console.log('  rep block edit buttons:', await e2.count());
+    if (await e2.count()) {
+      await e2.first().click(); await sleep(3000);
+      const form = page.locator('.ldh-pane.is-active form').filter({ has: page.locator('button.btn-save') }).last();
+      const terr = form.locator('.ldh-prop-group').filter({ hasText: /^\s*Territory/ });
+      console.log('  rep edit form:', (await dump(form)).join(' ').slice(0, 900));
+      console.log('  territory groups:', await terr.count(), JSON.stringify(await terr.first().locator('button').allTextContents().catch(() => [])), JSON.stringify(await terr.first().evaluate((g) => g.outerHTML.slice(0, 500)).catch(() => '')));
+      const cancel = form.locator('button').filter({ hasText: /Cancel|Close|Reset/ }).first();
+      if (await cancel.count()) await cancel.click(); else await page.keyboard.press('Escape');
+    }
+  } });
diff --git a/screencast/scenes/probe-emptyblock.mjs b/screencast/scenes/probe-emptyblock.mjs
new file mode 100644
index 00000000..7199dae4
--- /dev/null
+++ b/screencast/scenes/probe-emptyblock.mjs
@@ -0,0 +1,45 @@
+// Not a scene. Does clicking + XHTML persist an empty block, or is the empty state
+// only on screen until something is typed?
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+import { switchDocumentMode } from '../lib/blocks.mjs';
+
+const { base, target, identity } = await resolve('/scratch-briefing/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  permissions: ['clipboard-read', 'clipboard-write'],
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+
+const blocksNow = async () => {
+  const r = await page.request.get(target, { headers: { Accept: 'text/turtle' } });
+  const t = await r.text();
+  return (t.match(/rdf-syntax-ns#_\d+/g) ?? []).length;
+};
+
+await page.goto(target, { waitUntil: 'load' });
+await sleep(3500);
+const fakeCursor = { click: async (l) => l.click() };
+await switchDocumentMode(page, fakeCursor, 'content-mode');
+await sleep(2500);
+
+console.log('blocks before:', await blocksNow());
+
+const btn = page.locator('button.create-action.add-constructor').filter({ hasText: 'XHTML' }).first();
+await btn.click();
+await sleep(3000);
+console.log('editor open:', await page.locator('.rdfa-editor-content [contenteditable]').count() > 0);
+console.log('blocks right after clicking + XHTML:', await blocksNow());
+
+// Now blur without typing anything.
+await page.locator('body').click({ position: { x: 40, y: 400 } }).catch(() => {});
+await sleep(3000);
+console.log('blocks after blurring an untouched editor:', await blocksNow());
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-emptyview.mjs b/screencast/scenes/probe-emptyview.mjs
new file mode 100644
index 00000000..3b5bd998
--- /dev/null
+++ b/screencast/scenes/probe-emptyview.mjs
@@ -0,0 +1,14 @@
+// Read-only: does a showWhenEmpty=false inverse view hide when it has no rows?
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+await runScene({ id: 'probe-emptyview', target: base + '/territories/72716/', identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    for (const p of ['/territories/72716/', '/territories/01581/']) {
+      await page.goto(base + p, { waitUntil: 'load' });
+      await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 25_000 }).catch(() => {});
+      await sleep(9000);
+      const v = await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block[data-for-class]')].map((b) => ({ title: b.querySelector('h2,h3,.ldh-block-title')?.textContent?.replace(/\s+/g, ' ').trim().slice(0, 40), count: b.querySelector('.ldh-view-toolbar .count b')?.textContent?.trim() ?? null, hidden: b.hidden || getComputedStyle(b).display === 'none', body: (b.querySelector('.ldh-block-body')?.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 80) })));
+      console.log(`  ${p}:`, JSON.stringify(v));
+    }
+  } });
diff --git a/screencast/scenes/probe-facet-pivot.mjs b/screencast/scenes/probe-facet-pivot.mjs
new file mode 100644
index 00000000..9a31fb5f
--- /dev/null
+++ b/screencast/scenes/probe-facet-pivot.mjs
@@ -0,0 +1,74 @@
+// Not a scene. Does a parallax pivot carry the facet selection with it? If it does,
+// "filter, then pivot" composes into a real question and the scenes should use it.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/products/');
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+page.on('pageerror', (e) => console.log('  PAGEERROR:', e.message.slice(0, 140)));
+
+const total = async () => (await page.locator('.ldh-view-toolbar .right .count b').first().textContent().catch(() => '?')).trim();
+const facetLabels = async () => page.evaluate(() => [...document.querySelectorAll('.ldh-view-toolbar .left .facet button.facet-pill')]
+  .map((b) => `${b.querySelector('.pred')?.textContent.trim()}=${b.querySelector('.val')?.textContent.trim()}`));
+const steps = async () => page.evaluate(() => [...document.querySelectorAll('.parallax-steps button.parallax-step')]
+  .map((b) => b.textContent.replace(/\s+/g, ' ').trim()));
+
+await page.goto(target, { waitUntil: 'load' });
+await page.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+await sleep(2500);
+console.log(`unfiltered:            ${await total()}  facets ${JSON.stringify(await facetLabels())}`);
+
+// facet to three categories
+await page.locator('.ldh-view-toolbar .left .facet button.facet-pill').nth(2).click();
+await page.waitForFunction(() => !document.querySelector('.facet-pop:not(.sort-pop) .facet-loading'), null, { timeout: 20_000 }).catch(() => {});
+await sleep(800);
+for (const want of ['Beverages', 'Condiments', 'Seafood']) {
+  const o = page.locator('.facet-pop:not(.sort-pop) .facet-values button.opt').filter({ hasText: want }).first();
+  if (await o.count()) { await o.click(); await sleep(2000); }
+}
+await page.keyboard.press('Escape');
+await sleep(1200);
+console.log(`after facet (3 cats):  ${await total()}  facets ${JSON.stringify(await facetLabels())}`);
+
+// pivot while filtered
+await page.locator('details.ldh-pivot-bar summary').first().click();
+await sleep(1000);
+const pills = page.locator('.ldh-pivot-pill:visible');
+const names = await pills.allTextContents();
+console.log(`pivot options:         ${JSON.stringify(names.map((s) => s.replace(/\s+/g, ' ').trim()))}`);
+
+const provider = pills.filter({ hasText: 'Provider' }).first();
+const chosen = (await provider.count()) ? provider : pills.first();
+const chosenName = (await chosen.textContent()).replace(/\s+/g, ' ').trim();
+await chosen.click();
+await sleep(4000);
+
+console.log(`\nafter pivot to ${chosenName}:`);
+console.log(`  results:             ${await total()}`);
+console.log(`  parallax steps:      ${JSON.stringify(await steps())}`);
+console.log(`  facets now offered:  ${JSON.stringify(await facetLabels())}`);
+
+// Does the pivoted view still carry the original filter? Compare against pivoting
+// from an unfiltered view.
+const page2 = await context.newPage();
+await page2.goto(target, { waitUntil: 'load' });
+await page2.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+await sleep(2500);
+await page2.locator('details.ldh-pivot-bar summary').first().click();
+await sleep(1000);
+const p2 = page2.locator('.ldh-pivot-pill:visible').filter({ hasText: chosenName.includes('Provider') ? 'Provider' : '' }).first();
+await p2.click();
+await sleep(4000);
+console.log(`\nsame pivot WITHOUT the facet: ${(await page2.locator('.ldh-view-toolbar .right .count b').first().textContent().catch(() => '?')).trim()} results`);
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-facet-survey.mjs b/screencast/scenes/probe-facet-survey.mjs
new file mode 100644
index 00000000..3ad68878
--- /dev/null
+++ b/screencast/scenes/probe-facet-survey.mjs
@@ -0,0 +1,76 @@
+// Not a scene. Opens every facet a view offers and times how long its values take,
+// so a scene can pick one that actually loads. Name/title facets are the slow ones.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const argv = process.argv.slice(2);
+const where = argv.includes('--path') ? argv[argv.indexOf('--path') + 1] : '/orders/';
+const BUDGET = 12_000;
+const { base, target, identity } = await resolve(where);
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+await page.goto(target, { waitUntil: 'load' });
+await page.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+await sleep(2500);
+
+const pills = page.locator('.ldh-view-toolbar .left .facet button.facet-pill');
+const n = await pills.count();
+console.log(`${target}\n${n} facet(s)\n`);
+
+// Escape leaves the previous popover's values in the DOM, so a survey that opens
+// several facets in one page read stale content and reported 0.0s. One facet per
+// page load is the only honest measurement.
+const only = argv.includes('--facet') ? Number(argv[argv.indexOf('--facet') + 1]) : null;
+
+for (let i = 0; i < n; i++) {
+  if (only !== null && i !== only) continue;
+  if (i > 0 && only === null) {
+    await page.reload({ waitUntil: 'load' });
+    await page.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+    await sleep(2500);
+  }
+  const pill = pills.nth(i);
+  const label = (await pill.textContent() ?? '').replace(/\s+/g, ' ').trim().slice(0, 30);
+  const prop = await pill.getAttribute('title');
+  process.stdout.write(`  [${i}] ${label.padEnd(32)} ${String(prop).padEnd(46)} `);
+
+  await pill.click();
+  const t = Date.now();
+  const ok = await page.waitForFunction(
+    () => !document.querySelector('.facet-pop:not(.sort-pop) .facet-loading'),
+    null, { timeout: BUDGET },
+  ).then(() => true, () => false);
+  const ms = Date.now() - t;
+
+  const values = await page.evaluate(() => {
+    const v = document.querySelector('.facet-pop:not(.sort-pop) .facet-values');
+    if (!v) return { n: 0, sample: [], html: null };
+    const kids = [...v.children];
+    return {
+      n: kids.length,
+      sample: kids.slice(0, 3).map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim()} — ${e.textContent.replace(/\s+/g, ' ').trim().slice(0, 28)}`),
+      html: v.outerHTML.replace(/\s+/g, ' ').slice(0, 700),
+    };
+  });
+
+  console.log(ok ? `loaded in ${(ms / 1000).toFixed(1)}s — ${values.n} value(s)`
+                 : `TIMED OUT after ${BUDGET / 1000}s`);
+  if (ok && values.n) {
+    for (const s of values.sample) console.log(`        ${s}`);
+    if (process.argv.includes('--html')) console.log(`        ${values.html}`);
+  }
+
+  await page.keyboard.press('Escape');
+  await sleep(600);
+}
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-facet-values.mjs b/screencast/scenes/probe-facet-values.mjs
new file mode 100644
index 00000000..c90cef24
--- /dev/null
+++ b/screencast/scenes/probe-facet-values.mjs
@@ -0,0 +1,103 @@
+// Not a scene. The facet popover loads its values over HTTP behind an
+// indeterminate progress bar, and the pivot pills render hidden until something
+// reveals them. This watches both, with the network and console attached.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const argv = process.argv.slice(2);
+const where = argv.includes('--path') ? argv[argv.indexOf('--path') + 1] : '/customers/';
+const { base, target, identity } = await resolve(where);
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true,
+  viewport: { width: 1920, height: 1080 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+
+page.on('console', (m) => { if (m.type() === 'error') console.log('  console.error:', m.text().slice(0, 200)); });
+page.on('pageerror', (e) => console.log('  pageerror:', e.message.slice(0, 200)));
+page.on('requestfailed', (r) => console.log('  requestfailed:', r.method(), r.url().slice(0, 120), r.failure()?.errorText));
+page.on('response', (r) => {
+  if (r.status() >= 400) console.log('  HTTP', r.status(), r.request().method(), r.url().slice(0, 140));
+});
+
+await page.goto(target, { waitUntil: 'load' });
+await page.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+await sleep(1500);
+
+console.log('\nopening facet…');
+const t0 = Date.now();
+const pending = new Map();
+page.on('request', (r) => {
+  if (/sparql|\/ns\b/.test(r.url())) {
+    pending.set(r, Date.now());
+    console.log(`  → ${((Date.now() - t0) / 1000).toFixed(1)}s ${r.method()} ${r.url().slice(0, 100)}`);
+    const body = r.postData();
+    if (body) console.log(`--- query ---\n${body}\n--- end ---`);
+  }
+});
+page.on('requestfinished', (r) => {
+  if (pending.has(r)) {
+    console.log(`  ← ${((Date.now() - pending.get(r)) / 1000).toFixed(1)}s later, done`);
+    pending.delete(r);
+  }
+});
+await page.locator('.ldh-view-toolbar .left .facet button.facet-pill').first().click();
+
+for (const wait of [1500, 3000, 6000, 12000, 20000]) {
+  await sleep(wait === 1500 ? 1500 : 3000);
+  const snap = await page.evaluate(() => {
+    const pop = document.querySelector('.facet-pop:not(.sort-pop)');
+    const vals = pop?.querySelector('.facet-values');
+    return {
+      loading: !!pop?.querySelector('.facet-loading'),
+      childCount: vals ? vals.children.length : -1,
+      html: vals ? vals.innerHTML.replace(/\s+/g, ' ').slice(0, 500) : null,
+    };
+  });
+  console.log(`  +${wait}ms loading=${snap.loading} children=${snap.childCount}`);
+  if (!snap.loading && snap.childCount > 0) { console.log('  values:', snap.html); break; }
+  if (wait === 20000) console.log('  last html:', snap.html);
+}
+
+console.log('\npivot pill ancestry (why Playwright sees it as hidden):');
+console.log(await page.evaluate(() => {
+  const e = document.querySelector('.ldh-pivot-pill');
+  if (!e) return 'none';
+  const chain = [];
+  for (let n = e; n && n !== document.documentElement; n = n.parentElement) {
+    const cs = getComputedStyle(n);
+    const r = n.getBoundingClientRect();
+    chain.push({
+      el: n.tagName.toLowerCase() + (n.className ? '.' + String(n.className).trim().split(/\s+/).join('.') : ''),
+      display: cs.display, visibility: cs.visibility, opacity: cs.opacity,
+      overflow: cs.overflow, contentVisibility: cs.contentVisibility,
+      box: `${Math.round(r.width)}x${Math.round(r.height)}`,
+      clipPath: cs.clipPath !== 'none' ? cs.clipPath : undefined,
+    });
+  }
+  return JSON.stringify({ checkVisibility: e.checkVisibility?.(), chain }, null, 1);
+}));
+
+console.log('\npivot pills:');
+console.log(await page.evaluate(() => JSON.stringify([...document.querySelectorAll('.ldh-pivot-pill')].map((e) => {
+  const r = e.getBoundingClientRect();
+  const cs = getComputedStyle(e);
+  const parent = e.closest('[class]');
+  return {
+    text: e.textContent.replace(/\s+/g, ' ').trim().slice(0, 30),
+    dir: e.dataset.dir,
+    box: `${Math.round(r.width)}x${Math.round(r.height)}`,
+    display: cs.display, visibility: cs.visibility, opacity: cs.opacity,
+    parentCls: parent?.className?.slice?.(0, 60),
+    parentHidden: e.offsetParent === null,
+  };
+}), null, 1)));
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-facets.mjs b/screencast/scenes/probe-facets.mjs
new file mode 100644
index 00000000..732a73d6
--- /dev/null
+++ b/screencast/scenes/probe-facets.mjs
@@ -0,0 +1,47 @@
+// Not a scene. Opens the first facet on a view and dumps the popover, so the
+// facet and pivot beats are scripted against real markup.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const argv = process.argv.slice(2);
+const where = argv.includes('--path') ? argv[argv.indexOf('--path') + 1] : '/customers/';
+const { base, target, identity } = await resolve(where);
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true,
+  viewport: { width: 1920, height: 1080 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+console.log(`probing ${target}`);
+await page.goto(target, { waitUntil: 'load' });
+await sleep(6000);
+
+const facets = page.locator('.ldh-view-toolbar .left .facet button.facet-pill');
+console.log('facet pills:', await facets.count());
+for (let i = 0; i < await facets.count(); i++) {
+  console.log(`  [${i}] ${JSON.stringify((await facets.nth(i).textContent() ?? '').replace(/\s+/g, ' ').trim())}`);
+}
+
+if (await facets.count()) {
+  await facets.first().click();
+  await sleep(1800);
+  console.log(await page.evaluate(() => {
+    const pop = document.querySelector('.facet-pop:not(.sort-pop)');
+    const opt = pop ? [...pop.querySelectorAll('label, button, li, .facet-opt')].slice(0, 8)
+      .map((e) => `${e.tagName.toLowerCase()}.${(e.className || '').trim().split(/\s+/).join('.')} — ${e.textContent.replace(/\s+/g, ' ').trim().slice(0, 44)}`) : [];
+    return JSON.stringify({
+      popClasses: pop?.className ?? null,
+      options: opt,
+      pivotPills: [...document.querySelectorAll('.ldh-pivot-pill')].map((e) => e.textContent.replace(/\s+/g, ' ').trim().slice(0, 44)),
+      popHTML: pop ? pop.outerHTML.replace(/\s+/g, ' ').slice(0, 900) : null,
+    }, null, 1);
+  }));
+}
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-fed.mjs b/screencast/scenes/probe-fed.mjs
new file mode 100644
index 00000000..de43ce22
--- /dev/null
+++ b/screencast/scenes/probe-fed.mjs
@@ -0,0 +1,26 @@
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { switchDocumentMode } from '../lib/blocks.mjs';
+const { target, identity, ...a } = await resolve('/world-context/');
+await runScene({
+  id: 'probe-fed', target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor, target, shot }) {
+    // a probe, so the mode goes in the URL rather than through the switcher
+    await page.goto(target + '?mode=' + encodeURIComponent('https://w3id.org/atomgraph/client#ReadMode'), { waitUntil: 'load' });
+    await sleep(9000);
+    console.log('  blocks:', await page.evaluate(() =>
+      [...document.querySelectorAll('.ldh-block-row')].map((r) => r.textContent.replace(/\s+/g, ' ').trim().slice(0, 34)).join(' | ') || '(none)'));
+    const row = page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'against the public record' }).first();
+    await row.scrollIntoViewIfNeeded().catch(() => {});
+    const t0 = Date.now();
+    const tb = row.locator('button.tb-query').first();
+    if (await tb.count()) { await cursor.click(tb); await sleep(2000); }
+    // results arrive when the block shows rows
+    const got = await page.waitForFunction(() => {
+      const r = [...document.querySelectorAll('.ldh-block-row')].find((x) => /against the public record/.test(x.textContent));
+      return r && /Germany|France|Brazil/.test(r.textContent) && /\d{2},\d{3},\d{3}/.test(r.textContent);
+    }, null, { timeout: 45000 }).then(() => true, () => false);
+    console.log(`  remote results on screen: ${got} after ${((Date.now() - t0) / 1000).toFixed(1)}s`);
+    await shot('federated');
+  },
+}, {});
diff --git a/screencast/scenes/probe-graph.mjs b/screencast/scenes/probe-graph.mjs
new file mode 100644
index 00000000..b2fa5fb7
--- /dev/null
+++ b/screencast/scenes/probe-graph.mjs
@@ -0,0 +1,85 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+import * as modes from '../lib/modes.mjs';
+import { switchDocumentMode } from '../lib/blocks.mjs';
+
+const { target, identity, ...a } = await resolve('/orders/10265/');
+
+await runScene({
+  id: 'probe-graph', target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor, target, shot, sleep }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await sleep(8000);
+
+    // An order is an item, not a container: it carries no view block, so the graph
+    // is the DOCUMENT-scope one — which renders what this document describes, and for
+    // an order that is the transaction and everyone in it.
+    console.log('  → document graph:', await switchDocumentMode(page, cursor, 'graph-mode', { settle: 2000 }));
+    await sleep(6000);
+    console.log('  canvas:', await page.locator('canvas').count());
+
+    // the graph instance keeps its own node list; screen coords come from it
+    const nodes = await page.evaluate(() => {
+      const gs = window.LinkedDataHub?.graphs ?? {};
+      const key = Object.keys(gs)[0];
+      const g = gs[key];
+      if (!g) return { error: 'no graph instance' };
+      const api = Object.getOwnPropertyNames(Object.getPrototypeOf(g) || {}).slice(0, 14);
+      const fg = g.instance ?? g;
+      let data = null;
+      try { data = fg.graphData(); } catch (e) { return { error: e.message, keys: Object.keys(g) }; }
+      const canvas = document.querySelector('canvas').getBoundingClientRect();
+      return {
+        count: data.nodes.length,
+        links: data.links.length,
+        loaded: (g['loaded-uris'] || []).length,
+        canvas: `${Math.round(canvas.x)},${Math.round(canvas.y)} ${Math.round(canvas.width)}x${Math.round(canvas.height)}`,
+        sample: data.nodes.slice(0, 6).map((n) => {
+          let p = null;
+          try { p = fg.graph2ScreenCoords(n.x, n.y, n.z); } catch {}
+          return `${String(n.id ?? '').split('/').filter(Boolean).pop().slice(0, 22)} @ ${p ? Math.round(canvas.x + p.x) + ',' + Math.round(canvas.y + p.y) : '?'}`;
+        }),
+      };
+    });
+    console.log('  nodes:', nodes.count, 'links:', nodes.links, 'canvas', nodes.canvas);
+
+    // pick a node belonging to ANOTHER document — expanding it is what crosses the
+    // document boundary, which is the whole claim
+    const pick = await page.evaluate((base) => {
+      const g = Object.values(window.LinkedDataHub.graphs)[0];
+      const fg = g.instance ?? g;
+      const { nodes } = fg.graphData();
+      const canvas = document.querySelector('canvas').getBoundingClientRect();
+      const here = base + '/orders/10265/';
+      const foreign = nodes.filter((n) => String(n.id).startsWith('http') && !String(n.id).startsWith(here));
+      const n = foreign[0] ?? nodes[0];
+      const p = fg.graph2ScreenCoords(n.x, n.y, n.z);
+      return { id: String(n.id), x: Math.round(canvas.x + p.x), y: Math.round(canvas.y + p.y), foreign: foreign.length };
+    }, 'https://northwind-traders.demo.localhost');
+    console.log('  foreign nodes:', pick.foreign, '— expanding', pick.id.slice(-42), 'at', pick.x + ',' + pick.y);
+
+    const before = nodes.count;
+    const panel = () => page.locator('.ldh-pane.is-active').innerText()
+      .then((t) => t.split('\n').find((l) => /Click a node|details/i.test(l)) ?? '(no hint line)');
+
+    // single click first: if it shows details, the pointer is genuinely over a node
+    // and only the expansion differs
+    await cursor.moveTo(pick.x, pick.y, { duration: 700 });
+    await sleep(900);
+    await page.mouse.click(pick.x, pick.y);
+    await sleep(2500);
+    console.log('  after single click:', await panel());
+
+    await page.mouse.dblclick(pick.x, pick.y, { delay: 90 });
+    await sleep(6000);
+
+    const after = await page.evaluate(() => {
+      const g = Object.values(window.LinkedDataHub.graphs)[0];
+      const fg = g.instance ?? g;
+      const d = fg.graphData();
+      return { nodes: d.nodes.length, links: d.links.length, loaded: (g['loaded-uris'] || []).length };
+    });
+    console.log(`  after double-click: ${before} → ${after.nodes} nodes, ${nodes.links} → ${after.links} links, loaded-uris ${after.loaded}`);
+    await shot('graph');
+  },
+}, {});
diff --git a/screencast/scenes/probe-graphaim.mjs b/screencast/scenes/probe-graphaim.mjs
new file mode 100644
index 00000000..0f3f4ea7
--- /dev/null
+++ b/screencast/scenes/probe-graphaim.mjs
@@ -0,0 +1,36 @@
+// Read-only: where does the customer node project, what is near it, and what does the
+// canvas say is under the pointer there?
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { foreignNode, aim, zoomToFit } from '../lib/graph.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const ORDER = '10423';
+const OPENS_ON = `${base}/orders/${ORDER}/?mode=${encodeURIComponent('https://w3id.org/atomgraph/client#GraphMode')}`;
+await runScene({
+  id: 'probe-graphaim', target: OPENS_ON, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForSelector('canvas', { timeout: 25_000 });
+    await sleep(4000); await zoomToFit(page, cursor); await sleep(3000);
+    const node = await foreignNode(page, `${base}/orders/${ORDER}/`, { skip: 0, prefer: /\/customers\// });
+    const a = await aim(page, node.id, { radius: 40 });
+    console.log('  aim r40:', JSON.stringify(a));
+    const near = await page.evaluate((wanted) => {
+      const gs = window.LinkedDataHub.graphs; const [cid, g] = Object.entries(gs).filter(([k]) => document.getElementById(k)?.offsetParent !== null).at(-1);
+      const fg = g.instance ?? g; const c = document.querySelector('canvas'); const r = c.getBoundingClientRect();
+      const hit = fg.graphData().nodes.find((x) => String(x.id) === wanted);
+      const p = fg.graph2ScreenCoords(hit.x, hit.y, hit.z); const cam = fg.camera().position;
+      const d = (n) => Math.round(Math.hypot(n.x - cam.x, n.y - cam.y, n.z - cam.z));
+      return { canvas: { x: r.x, y: r.y, w: r.width, h: r.height, cw: c.width, ch: c.height, dpr: devicePixelRatio }, mine: { x: p.x, y: p.y, d: d(hit), val: hit.val },
+        near: fg.graphData().nodes.filter((n) => n !== hit).map((n) => ({ id: String(n.id).replace(/^https?:\/\//, '').slice(-40), q: fg.graph2ScreenCoords(n.x, n.y, n.z), d: d(n) }))
+          .map((o) => ({ id: o.id, dx: Math.round(o.q.x - p.x), dy: Math.round(o.q.y - p.y), d: o.d })).filter((o) => Math.abs(o.dx) < 60 && Math.abs(o.dy) < 60) };
+    }, node.id);
+    console.log('  near:', JSON.stringify(near));
+    await cursor.moveTo(a.x, a.y, { duration: 400 }); await sleep(900);
+    console.log('  tooltip at aim:', JSON.stringify(await page.locator('.scene-tooltip, .graph-tooltip').first().textContent().catch(() => null)));
+    for (const [dx, dy] of [[0, -6], [0, 6], [-6, 0], [6, 0]]) {
+      await page.mouse.move(a.x + dx, a.y + dy); await sleep(500);
+      console.log(`  tooltip at ${dx},${dy}:`, JSON.stringify(await page.locator('.scene-tooltip, .graph-tooltip').first().textContent().catch(() => null)));
+    }
+  },
+});
diff --git a/screencast/scenes/probe-graphdata.mjs b/screencast/scenes/probe-graphdata.mjs
new file mode 100644
index 00000000..14a1d956
--- /dev/null
+++ b/screencast/scenes/probe-graphdata.mjs
@@ -0,0 +1,25 @@
+// Read-only: the graph's nodes and links as data, and the app's node colouring, so the
+// bloom can be drawn rather than recorded.
+import { chromium } from 'playwright';
+import fs from 'node:fs/promises';
+import { resolve } from '../lib/harness.mjs';
+const opts = await resolve('/'); const { base, identity } = opts;
+const b = await chromium.launch();
+const ctx = await b.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: 'dark', ignoreHTTPSErrors: true, clientCertificates: identity ?? [] });
+await ctx.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const p = await ctx.newPage();
+await p.goto(`${base}/orders/10423/?mode=${encodeURIComponent('https://w3id.org/atomgraph/client#GraphMode')}`, { waitUntil: 'load' });
+await p.waitForSelector('canvas', { timeout: 30_000 }); await p.waitForTimeout(6000);
+const data = await p.evaluate(() => {
+  const gs = window.LinkedDataHub?.graphs ?? {}; const g = Object.values(gs).at(-1); const fg = g.instance ?? g;
+  const d = fg.graphData();
+  const color = fg.nodeColor?.(); const nodeColor = typeof color === 'function' ? color : null;
+  return { nodes: d.nodes.map((n) => ({ id: String(n.id), label: n.label ?? n.name ?? '', color: nodeColor ? nodeColor(n) : (n.color ?? null), val: n.val ?? 1, type: n.type ?? n.types ?? null })), links: d.links.map((l) => ({ s: String(l.source.id ?? l.source), t: String(l.target.id ?? l.target), label: l.label ?? '' })), canvas: getComputedStyle(document.querySelector('canvas').parentElement).backgroundColor, bg: fg.backgroundColor?.() };
+});
+await fs.writeFile('mock/assets/graph-order.json', JSON.stringify(data, null, 1));
+const chrome = await p.evaluate(() => { const c = document.querySelector('canvas').closest('.graph-3d-host, .ldh-block, .container-results'); return c ? { cls: c.className, html: c.outerHTML.replace(/<canvas[\s\S]*?<\/canvas>/, '<canvas></canvas>').slice(0, 3000) } : null; });
+console.log(`  ${data.nodes.length} nodes, ${data.links.length} links; bg ${data.bg} / ${data.canvas}`);
+console.log('  colours:', JSON.stringify([...new Set(data.nodes.map((n) => n.color))].slice(0, 8)));
+console.log('  sample:', JSON.stringify(data.nodes.slice(0, 4)));
+console.log('  chrome:', chrome?.cls, (chrome?.html ?? '').slice(0, 600).replace(/\s+/g, ' '));
+await b.close();
diff --git a/screencast/scenes/probe-graphdesc.mjs b/screencast/scenes/probe-graphdesc.mjs
new file mode 100644
index 00000000..73b32995
--- /dev/null
+++ b/screencast/scenes/probe-graphdesc.mjs
@@ -0,0 +1,32 @@
+// Read-only: after expanding the customer node of a late order, is the customer
+// described in the graph's document, and what does the info panel render?
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { expand, foreignNode, graphState, nodeById, select, zoomToFit } from '../lib/graph.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const ORDER = process.env.ORDER || '10423';
+const OPENS_ON = `${base}/orders/${ORDER}/?mode=${encodeURIComponent('https://w3id.org/atomgraph/client#GraphMode')}`;
+await runScene({
+  id: 'probe-graphdesc', target: OPENS_ON, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForSelector('canvas', { timeout: 25_000 });
+    await sleep(4000); await zoomToFit(page, cursor);
+    const node = await foreignNode(page, `${base}/orders/${ORDER}/`, { skip: 0, prefer: /\/customers\// });
+    console.log('  customer node:', JSON.stringify(node));
+    const r = await expand(page, cursor, node);
+    console.log('  expand:', JSON.stringify({ ok: r.ok, gained: r.gained, before: r.before, after: r.after }));
+    const info = await page.evaluate((id) => {
+      const gs = window.LinkedDataHub?.graphs ?? {};
+      const [cid, g] = Object.entries(gs).filter(([k]) => document.getElementById(k)?.offsetParent !== null).at(-1) ?? [];
+      const doc = g?.document;
+      const abouts = doc ? [...doc.querySelectorAll('Description')].map((d) => d.getAttribute('rdf:about')).filter(Boolean) : [];
+      return { canvas: cid, loaded: g?.loadedUris ?? g?.['loaded-uris'] ?? Object.keys(g ?? {}), described: abouts.length, hasCustomer: abouts.includes(id), sample: abouts.filter((a) => a.includes('customers')).slice(0, 5) };
+    }, node.id);
+    console.log('  graph document:', JSON.stringify(info));
+    const again = await nodeById(page, node.id);
+    const picked = await select(page, cursor, again);
+    console.log('  select:', JSON.stringify({ ok: picked.ok, why: picked.why, href: picked.href }));
+    console.log('  panel:', (await page.locator('[id^="info-content-"]').first().innerHTML().catch(() => '')).slice(0, 400));
+  },
+});
diff --git a/screencast/scenes/probe-graphinfo.mjs b/screencast/scenes/probe-graphinfo.mjs
new file mode 100644
index 00000000..5f0ed03b
--- /dev/null
+++ b/screencast/scenes/probe-graphinfo.mjs
@@ -0,0 +1,39 @@
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { foreignNode, zoomToFit } from '../lib/graph.mjs';
+
+const opts = await resolve('/');
+const ORDER = '11074';
+const GRAPH_MODE = 'https://w3id.org/atomgraph/client#GraphMode';
+const OPENS_ON = `${opts.base}/orders/${ORDER}/?mode=${encodeURIComponent(GRAPH_MODE)}`;
+
+await runScene({
+  id: 'probe-graphinfo', target: OPENS_ON, identity: opts.identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForSelector('canvas', { timeout: 25_000 }).catch(() => {});
+    await sleep(4000);
+    await zoomToFit(page, cursor);
+    await sleep(1500);
+
+    console.log('  info panels in DOM:', await page.evaluate(() =>
+      [...document.querySelectorAll('[id^="info-content-"]')].map((e) =>
+        `id=${e.id} visible=${e.offsetParent !== null} html=${e.innerHTML.slice(0, 120)}`).join('\n    ') || '(none)'));
+
+    const n = await foreignNode(page, `${opts.base}/orders/${ORDER}/`, { skip: 0, prefer: /\/(customers|employees|shippers)\// });
+    console.log('  node:', JSON.stringify(n));
+    if (!n || n.error) return;
+
+    await cursor.moveTo(n.x, n.y, { duration: 360 });
+    await sleep(260);
+    await page.mouse.click(n.x, n.y);
+    await sleep(2500);
+
+    console.log('  after click:', await page.evaluate(() =>
+      [...document.querySelectorAll('[id^="info-content-"]')].map((e) =>
+        `id=${e.id} visible=${e.offsetParent !== null}\n      html=${e.innerHTML.replace(/\s+/g, ' ').slice(0, 300)}`).join('\n    ') || '(none)'));
+    console.log('  anchors:', await page.evaluate(() =>
+      [...document.querySelectorAll('[id^="info-content-"] a')].map((a) =>
+        `href=${a.getAttribute('href')} visible=${a.offsetParent !== null} text=${a.innerText.slice(0, 40)}`).join('\n    ') || '(none)'));
+  },
+}, {});
diff --git a/screencast/scenes/probe-graphlink.mjs b/screencast/scenes/probe-graphlink.mjs
new file mode 100644
index 00000000..d4965603
--- /dev/null
+++ b/screencast/scenes/probe-graphlink.mjs
@@ -0,0 +1,17 @@
+// Not a scene. Read-only: does the info-panel link still carry target="_blank"?
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { expand, foreignNode, nodeById, select, zoomToFit } from '../lib/graph.mjs';
+const opts = await resolve('/');
+const OPENS_ON = `${opts.base}/orders/11074/?mode=${encodeURIComponent('https://w3id.org/atomgraph/client#GraphMode')}`;
+await runScene({ id: 'probe-graphlink', target: OPENS_ON, identity: opts.identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForSelector('canvas', { timeout: 30_000 }).catch(() => {}); await sleep(4000); await zoomToFit(page, cursor);
+    const n = await foreignNode(page, `${opts.base}/orders/11074/`, { prefer: /\/(customers|employees|shippers|products)\// });
+    if (!n || n.error) return console.log('  node:', JSON.stringify(n));
+    await expand(page, cursor, n); await zoomToFit(page, cursor); await sleep(800);
+    const again = await nodeById(page, n.id); if (again.error) return console.log('  again:', again.error);
+    const picked = await select(page, cursor, again);
+    console.log('  link:', JSON.stringify({ ok: picked.ok, href: picked.href, target: picked.ok ? await picked.link.getAttribute('target') : null }));
+  } }, {});
diff --git a/screencast/scenes/probe-graphopen.mjs b/screencast/scenes/probe-graphopen.mjs
new file mode 100644
index 00000000..ecd01e79
--- /dev/null
+++ b/screencast/scenes/probe-graphopen.mjs
@@ -0,0 +1,46 @@
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { expand, foreignNode, nodeById, select, zoomToFit } from '../lib/graph.mjs';
+
+const opts = await resolve('/');
+const ORDER = '11074';
+const GRAPH_MODE = 'https://w3id.org/atomgraph/client#GraphMode';
+const OPENS_ON = `${opts.base}/orders/${ORDER}/?mode=${encodeURIComponent(GRAPH_MODE)}`;
+
+await runScene({
+  id: 'probe-graphopen', target: OPENS_ON, identity: opts.identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForSelector('canvas', { timeout: 25_000 }).catch(() => {});
+    await sleep(4000);
+    await zoomToFit(page, cursor);
+    await sleep(1200);
+
+    const n = await foreignNode(page, `${opts.base}/orders/${ORDER}/`, { skip: 0, prefer: /\/(customers|employees|shippers|products)\// });
+    if (!n || n.error) { console.log('  no node', n); return; }
+    const r = await expand(page, cursor, n);
+    console.log('  expanded', n.id, JSON.stringify({ ok: r.ok, gained: r.gained }));
+    await zoomToFit(page, cursor);
+    await sleep(1200);
+
+    const again = await nodeById(page, n.id);
+    console.log('  again:', JSON.stringify(again));
+    if (again.error) return;
+    const picked = await select(page, cursor, again);
+    console.log('  picked:', JSON.stringify({ ok: picked.ok, href: picked.href, why: picked.why }));
+    if (!picked.ok) return;
+
+    const box = await picked.link.boundingBox();
+    console.log('  anchor box:', JSON.stringify(box));
+    console.log('  topmost at centre:', await page.evaluate(({ x, y }) => {
+      const e = document.elementFromPoint(x, y);
+      return e ? `<${e.tagName.toLowerCase()}> class="${e.className}"` : '(nothing)';
+    }, { x: Math.round(box.x + box.width / 2), y: Math.round(box.y + box.height / 2) }));
+
+    const pagesBefore = page.context().pages().length;
+    await picked.link.click({ force: true });
+    await sleep(5000);
+    console.log('  pages:', pagesBefore, '->', page.context().pages().length);
+    console.log('  urls:', page.context().pages().map((p) => p.url()).join('\n         '));
+  },
+}, {});
diff --git a/screencast/scenes/probe-gridcard.mjs b/screencast/scenes/probe-gridcard.mjs
new file mode 100644
index 00000000..c21e3954
--- /dev/null
+++ b/screencast/scenes/probe-gridcard.mjs
@@ -0,0 +1,13 @@
+// Read-only: how a grid card links to its resource.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/categories/');
+const { identity, target } = opts;
+await runScene({ id: 'probe-gridcard', target, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block-body img[src*="/uploads/"]', { timeout: 25_000 }).catch(() => {});
+    await sleep(4000);
+    const links = await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block-body a')].filter((a) => /categories\/1\//.test(a.getAttribute('href') || '') || /Beverages/.test(a.textContent)).map((a) => ({ href: a.getAttribute('href'), title: a.getAttribute('title'), text: a.textContent.replace(/\s+/g, ' ').trim().slice(0, 40), cls: a.className, inner: a.innerHTML.slice(0, 80) })));
+    console.log('  links:', JSON.stringify(links));
+    console.log('  card:', JSON.stringify(await page.evaluate(() => { const img = document.querySelector('.ldh-pane.is-active .ldh-block-body img[src*="/uploads/"]'); let e = img; for (let i = 0; i < 4 && e; i++) e = e.parentElement; return e ? e.outerHTML.slice(0, 700) : null; })));
+  } });
diff --git a/screencast/scenes/probe-handles.mjs b/screencast/scenes/probe-handles.mjs
new file mode 100644
index 00000000..ee3e95bd
--- /dev/null
+++ b/screencast/scenes/probe-handles.mjs
@@ -0,0 +1,28 @@
+// Read-only: which block rows carry a drag handle, on which page/mode; and when the chart
+// pane shows a <table> vs an svg after selecting Table.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const q = async (t) => (await sparql(base, `PREFIX dct: <http://purl.org/dc/terms/> SELECT ?doc WHERE { GRAPH ?doc { ?doc dct:title "${t}" } } LIMIT 1`))[0].doc;
+const CM = '?mode=' + encodeURIComponent('https://w3id.org/atomgraph/client#ContentMode');
+const RM = '?mode=' + encodeURIComponent('https://w3id.org/atomgraph/client#ReadMode');
+await runScene({ id: 'probe-handles', target: base, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    for (const t of ['Where we have nobody', 'One rep for the South', 'Late: the customer or the shipper?']) {
+      const d = await q(t);
+      await page.goto(d + CM, { waitUntil: 'load' });
+      await page.waitForSelector('.ldh-pane.is-active .content-body > .ldh-block-row', { timeout: 25_000 }); await sleep(6000);
+      console.log(`  ${t}:`, JSON.stringify(await page.locator('.ldh-pane.is-active .content-body > .ldh-block-row').evaluateAll((rs) => rs.map((r) => ({ handle: !!r.querySelector('span.ldh-bh-drag'), kind: r.querySelector('.ol-viewport') ? 'map' : r.querySelector('svg') ? 'chart' : r.querySelector('iframe') ? 'video' : r.querySelector('p') ? 'prose' : 'other', cls: r.className.slice(0, 40) })))));
+    }
+    const s = await q('One rep for the South');
+    await page.goto(s + RM, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block-row', { timeout: 25_000 }); await sleep(5000);
+    const row = page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'Reps per region' }).first();
+    const sel = row.locator('select.chart-type').first();
+    console.log('  pane at load: type=', await sel.evaluate((x) => x.options[x.selectedIndex].textContent.trim()), 'table?', await row.locator('table').count(), 'svg?', await row.locator('svg').count());
+    await sel.selectOption({ label: 'Bar chart' }); await sleep(2500);
+    console.log('  after Bar chart: table?', await row.locator('table').count(), 'svg?', await row.locator('svg').count());
+    await sel.selectOption({ label: 'Table' }); await sleep(2500);
+    console.log('  after Table: table?', await row.locator('table').count(), 'svg?', await row.locator('svg').count());
+  } });
diff --git a/screencast/scenes/probe-hops.mjs b/screencast/scenes/probe-hops.mjs
new file mode 100644
index 00000000..a19f01aa
--- /dev/null
+++ b/screencast/scenes/probe-hops.mjs
@@ -0,0 +1,76 @@
+// Not a scene. Chains parallax hops and reports what each one offers and yields,
+// so a scene can pick a route that stays interesting rather than dead-ending.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const argv = process.argv.slice(2);
+const where = argv.includes('--path') ? argv[argv.indexOf('--path') + 1] : '/products/';
+const facetIdx = argv.includes('--facet') ? Number(argv[argv.indexOf('--facet') + 1]) : null;
+const wanted = argv.includes('--values') ? argv[argv.indexOf('--values') + 1].split(',') : [];
+const route = argv.includes('--route') ? argv[argv.indexOf('--route') + 1].split(',') : [];
+const { base, target, identity } = await resolve(where);
+const HOPS = 4;
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+page.on('pageerror', (e) => console.log('  PAGEERROR:', e.message.slice(0, 120)));
+
+const total = async () => (await page.locator('.ldh-view-toolbar .right .count b').first().textContent().catch(() => '?')).trim();
+const steps = async () => page.evaluate(() => [...document.querySelectorAll('.parallax-steps button.parallax-step')]
+  .map((b) => b.querySelector('.val')?.textContent.trim()));
+
+await page.goto(target, { waitUntil: 'load' });
+await page.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+await sleep(2500);
+
+// optionally filter first, so the hops carry it
+if (facetIdx !== null) {
+  const pill = page.locator('.ldh-view-toolbar .left .facet button.facet-pill').nth(facetIdx);
+  await pill.click();
+  await page.waitForFunction(() => !document.querySelector('.facet-pop:not(.sort-pop) .facet-loading'), null, { timeout: 20_000 }).catch(() => {});
+  await sleep(700);
+  const opts = page.locator('.facet-pop:not(.sort-pop) .facet-values button.opt');
+  console.log('facet values:', JSON.stringify((await opts.allTextContents()).slice(0, 10).map((s) => s.replace(/\s+/g, ' ').trim())));
+  for (const w of (wanted.length ? wanted : [])) {
+    const o = opts.filter({ hasText: w }).first();
+    if (await o.count()) { await o.click(); await sleep(1800); }
+  }
+  await pill.click();
+  await sleep(1000);
+}
+console.log(`start: ${await total()} results\n`);
+
+for (let hop = 1; hop <= HOPS; hop++) {
+  const summary = page.locator('details.ldh-pivot-bar summary').first();
+  if (!(await summary.count())) { console.log(`hop ${hop}: no pivot bar`); break; }
+  if ((await summary.evaluate((e) => e.parentElement.open)) !== true) {
+    await summary.click();
+    await sleep(900);
+  }
+
+  const pills = page.locator('.ldh-pivot-pill:visible');
+  const names = (await pills.allTextContents()).map((s) => s.replace(/\s+/g, ' ').trim());
+  if (!names.length) { console.log(`hop ${hop}: no pills offered`); break; }
+  console.log(`hop ${hop} offers: ${JSON.stringify(names)}`);
+
+  // follow the named route when given, else prefer an untaken forward hop
+  const taken = await steps();
+  let idx = -1;
+  if (route[hop - 1]) idx = names.findIndex((n) => n.includes(route[hop - 1]));
+  if (idx === -1) idx = names.findIndex((n) => n.includes('arrow_forward') && !taken.some((t) => n.includes(t)));
+  if (idx === -1) idx = 0;
+
+  await pills.nth(idx).click();
+  await sleep(4000);
+  console.log(`  → took ${JSON.stringify(names[idx])}: ${await total()} results, steps ${JSON.stringify(await steps())}\n`);
+}
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-kingblock.mjs b/screencast/scenes/probe-kingblock.mjs
new file mode 100644
index 00000000..b9e93365
--- /dev/null
+++ b/screencast/scenes/probe-kingblock.mjs
@@ -0,0 +1,14 @@
+// Read-only: the anchors in King's record block after the reporting line was changed.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/employees/7/');
+const { identity, target } = opts;
+await runScene({ id: 'probe-kingblock', target, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 25_000 }); await sleep(5000);
+    const blocks = page.locator('.ldh-pane.is-active .ldh-block').filter({ hasText: /Reports to/ });
+    console.log('  blocks with Reports to:', await blocks.count());
+    const row = blocks.first().locator('.ldh-prop-group, tr, dl, div').filter({ hasText: /^\s*Reports to/ }).first();
+    console.log('  row html:', JSON.stringify(await blocks.first().evaluate((b) => { const t = [...b.querySelectorAll('*')].find((e) => /^\s*Reports to\s*$/.test(e.textContent)); let e = t; for (let i = 0; i < 3 && e; i++) e = e.parentElement; return e ? e.outerHTML.replace(/\s+/g, ' ').slice(0, 700) : null; })));
+    console.log('  anchors with Fuller:', JSON.stringify(await blocks.first().locator('a').filter({ hasText: /Fuller/ }).evaluateAll((as) => as.map((a) => a.outerHTML.replace(/\s+/g, ' ').slice(0, 160)))));
+  } });
diff --git a/screencast/scenes/probe-map-click.mjs b/screencast/scenes/probe-map-click.mjs
new file mode 100644
index 00000000..5927ac1b
--- /dev/null
+++ b/screencast/scenes/probe-map-click.mjs
@@ -0,0 +1,57 @@
+// Not a scene. Clicks precisely on a rendered pin and diffs the DOM, to learn what
+// an OpenLayers marker click actually produces.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/territories/');
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+page.on('pageerror', (e) => console.log('  PAGEERROR:', e.message.slice(0, 140)));
+
+await page.goto(target, { waitUntil: 'load' });
+await page.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+await sleep(2000);
+await page.locator('.ldh-view-toolbar .right .ldh-mode button.drop-toggle').first().click();
+await sleep(600);
+await page.locator('.modes-pop.view-mode-list button.mi.map-mode').first().click();
+await sleep(8000);
+
+const snapshot = () => page.evaluate(() => document.body.innerHTML.length + '|' +
+  [...document.querySelectorAll('div,section,dialog')].map((e) => String(e.className)).join(','));
+
+const before = await snapshot();
+
+// The pins visible in the rendered map, measured off a screenshot at this geometry.
+// Absolute page coordinates; the pin tip sits a few px below the circle.
+const PINS = [[792, 578], [921, 667], [1021, 647], [1059, 683], [1151, 632]];
+
+for (const [x, y] of PINS) {
+  await page.mouse.click(x, y);
+  await sleep(1500);
+  const after = await snapshot();
+  if (after !== before) {
+    console.log(`click ${x},${y} CHANGED the DOM`);
+    console.log(await page.evaluate(() => {
+      // what appeared that looks like an info window?
+      const cands = [...document.querySelectorAll('div,dialog')]
+        .filter((e) => /popup|overlay|info|modal|ol-/.test(String(e.className)))
+        .slice(0, 12)
+        .map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim()} — ${e.textContent.replace(/\s+/g, ' ').trim().slice(0, 50)}`);
+      return JSON.stringify(cands, null, 1);
+    }));
+    await page.screenshot({ path: 'shots/probe-map-click.png' });
+    break;
+  }
+  console.log(`click ${x},${y} — no change`);
+}
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-map.mjs b/screencast/scenes/probe-map.mjs
new file mode 100644
index 00000000..1e5a7025
--- /dev/null
+++ b/screencast/scenes/probe-map.mjs
@@ -0,0 +1,91 @@
+// Not a scene. Switches a view to Map mode and reports what the markers are, so a
+// scene can click one and open its info window.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const argv = process.argv.slice(2);
+const where = argv.includes('--path') ? argv[argv.indexOf('--path') + 1] : '/territories/';
+const { base, target, identity } = await resolve(where);
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+page.on('pageerror', (e) => console.log('  PAGEERROR:', e.message.slice(0, 140)));
+
+await page.goto(target, { waitUntil: 'load' });
+await page.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+await sleep(2500);
+
+await page.locator('.ldh-view-toolbar .right .ldh-mode button.drop-toggle').first().click();
+await sleep(700);
+const mapItem = page.locator('.modes-pop.view-mode-list button.mi.map-mode').first();
+console.log('map mode offered:', await mapItem.count() > 0);
+if (!(await mapItem.count())) process.exit(0);
+await mapItem.click();
+await sleep(7000);
+
+console.log(await page.evaluate(() => {
+  const candidates = {
+    'canvas': document.querySelectorAll('canvas').length,
+    '.ol-viewport': document.querySelectorAll('.ol-viewport').length,
+    '.ol-overlay-container': document.querySelectorAll('.ol-overlay-container').length,
+    'svg image': document.querySelectorAll('svg image').length,
+    '[class*=marker]': document.querySelectorAll('[class*=marker]').length,
+    '.ldh-map, [class*=map]': document.querySelectorAll('.ldh-map, [class*=map]').length,
+  };
+  const mapEl = document.querySelector('.ol-viewport, [class*=map]');
+  return JSON.stringify({
+    candidates,
+    mapBox: mapEl ? `${Math.round(mapEl.getBoundingClientRect().width)}x${Math.round(mapEl.getBoundingClientRect().height)}` : null,
+    mapClasses: mapEl?.className ?? null,
+  }, null, 1);
+}));
+
+// Can the OpenLayers map be reached from the DOM? If it can, a scene can compute a
+// marker's exact pixel instead of guessing where to click.
+console.log('\nlooking for the map object:');
+console.log(await page.evaluate(() => {
+  const found = [];
+  for (const el of document.querySelectorAll('div')) {
+    for (const k of Object.keys(el)) {
+      if (/^(map|overlay|ol)/i.test(k)) found.push(`${el.className || el.tagName}.${k}`);
+    }
+  }
+  return JSON.stringify({ expandos: found.slice(0, 10), onWindow: Object.keys(window).filter((k) => /^(ol|map|LinkedDataHub)/.test(k)).slice(0, 10) }, null, 1);
+}));
+
+// Fallback that needs no map object: click candidate points until an info window
+// appears. Markers are canvas-drawn, so this is a search, not a lookup.
+const vp = page.locator('.ol-viewport').first();
+const box = await vp.boundingBox();
+console.log(`\nviewport box: ${box ? `${Math.round(box.width)}x${Math.round(box.height)} at ${Math.round(box.x)},${Math.round(box.y)}` : 'none'}`);
+if (box) {
+  const infoSel = '.ol-overlay-container, .ac-modal, [class*="info"], .ol-popup';
+  outer: for (let gx = 1; gx <= 6; gx++) {
+    for (let gy = 1; gy <= 3; gy++) {
+      const x = box.x + (box.width * gx) / 7;
+      const y = box.y + (box.height * gy) / 4;
+      await page.mouse.click(x, y);
+      await sleep(900);
+      const n = await page.locator(infoSel).count();
+      if (n) {
+        console.log(`  info window after clicking ${Math.round(x)},${Math.round(y)} → ${n} match(es) for ${infoSel}`);
+        console.log('  ', (await page.locator(infoSel).first().textContent().catch(() => '')).replace(/\s+/g, ' ').trim().slice(0, 160));
+        await page.screenshot({ path: 'shots/probe-map-info.png' });
+        break outer;
+      }
+    }
+  }
+}
+
+await page.screenshot({ path: 'shots/probe-map.png' });
+console.log('screenshot → shots/probe-map.png');
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-mock.mjs b/screencast/scenes/probe-mock.mjs
new file mode 100644
index 00000000..989aafc6
--- /dev/null
+++ b/screencast/scenes/probe-mock.mjs
@@ -0,0 +1,13 @@
+// Read-only: serves the vector mock's directory and opens a mock page in a browser, for
+// looking at a shot before render/mock.mjs steps it frame by frame.
+import { chromium } from 'playwright'; import http from 'node:http'; import fs from 'node:fs/promises'; import path from 'node:path';
+const root = path.resolve('mock');
+const types = { '.html': 'text/html', '.js': 'text/javascript', '.json': 'application/json', '.png': 'image/png', '.css': 'text/css' }; const server = http.createServer(async (req, res) => { try { const f = path.join(root, decodeURIComponent(new URL(req.url, 'http://x').pathname)); res.writeHead(200, { 'content-type': types[path.extname(f)] ?? 'application/octet-stream' }); res.end(await fs.readFile(f)); } catch { res.writeHead(404); res.end(); } });
+await new Promise((r) => server.listen(0, '127.0.0.1', r)); const port = server.address().port;
+const b = await chromium.launch(); const p = await b.newPage({ viewport: { width: 1440, height: 900 } });
+const errs = []; p.on('pageerror', (e) => errs.push(e.message)); p.on('console', (m) => { if (m.type() === 'error') errs.push('console: ' + m.text().slice(0, 120)); });
+await p.goto(`http://127.0.0.1:${port}/bloom.html`); await p.waitForFunction(() => window.ready === true, null, { timeout: 30_000 }).catch(() => {});
+console.log('ready:', await p.evaluate(() => window.ready === true), 'errors:', errs.slice(0, 3));
+await p.evaluate(() => window.render(2.4));
+console.log(JSON.stringify(await p.evaluate(() => { const gs = [...document.querySelectorAll('#graph svg .nodes g')]; const pos = gs.map((g) => g.getAttribute('transform')); const rs = gs.map((g) => Number(g.querySelector('circle').getAttribute('r'))); const nan = pos.filter((t) => /NaN/.test(t)).length; const xs = pos.map((t) => Number(t.match(/\(([-\d.]+),/)?.[1])); return { nodes: gs.length, nan, visible: rs.filter((r) => r > 0).length, xmin: Math.min(...xs), xmax: Math.max(...xs), sample: pos.slice(0, 3), rsample: rs.slice(0, 5) }; })));
+await b.close(); server.close();
diff --git a/screencast/scenes/probe-mockcss.mjs b/screencast/scenes/probe-mockcss.mjs
new file mode 100644
index 00000000..56e201fe
--- /dev/null
+++ b/screencast/scenes/probe-mockcss.mjs
@@ -0,0 +1,15 @@
+// Read-only: open the mock player and ask what the Save button and an input compute to.
+import { chromium } from 'playwright';
+import http from 'node:http'; import fs from 'node:fs/promises'; import path from 'node:path';
+const root = path.resolve('mock');
+const server = http.createServer(async (req, res) => { try { const f = path.join(root, decodeURIComponent(new URL(req.url, 'http://x').pathname)); res.end(await fs.readFile(f)); } catch { res.writeHead(404); res.end(); } });
+await new Promise((r) => server.listen(0, '127.0.0.1', r));
+const b = await chromium.launch(); const p = await b.newPage({ viewport: { width: 1440, height: 900 } });
+const errs = []; p.on('console', (m) => { if (m.type() === 'error' || m.type() === 'warning') errs.push(m.text().slice(0, 160)); });
+await p.goto(`http://127.0.0.1:${server.address().port}/player.html`); await p.waitForFunction(() => window.ready === true); await p.evaluate(() => window.render(1.2)); await p.waitForTimeout(500);
+console.log(JSON.stringify(await p.evaluate(() => {
+  const s = (el) => el ? { cls: el.className, bg: getComputedStyle(el).backgroundColor, radius: getComputedStyle(el).borderRadius, font: getComputedStyle(el).fontFamily.slice(0, 40), matched: [...document.styleSheets].reduce((n, sh) => { try { return n + [...sh.cssRules].filter((r) => r.selectorText && el.matches(r.selectorText)).length; } catch { return n; } }, 0) } : null;
+  return { sheets: [...document.styleSheets].map((sh) => { try { return sh.cssRules.length; } catch { return 'x'; } }), save: s(document.querySelector('#modal button.btn-save')), input: s(document.querySelector('#modal input[type=text]')), icon: s(document.querySelector('#modal .msi')), rootTheme: document.documentElement.getAttribute('data-theme'), bodyBg: getComputedStyle(document.body).backgroundColor };
+}), null, 1));
+console.log('console:', errs.slice(0, 5));
+await b.close(); server.close();
diff --git a/screencast/scenes/probe-modebtn.mjs b/screencast/scenes/probe-modebtn.mjs
new file mode 100644
index 00000000..27a66cde
--- /dev/null
+++ b/screencast/scenes/probe-modebtn.mjs
@@ -0,0 +1,16 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+const { target, identity, ...a } = await resolve('/categories/');
+await runScene({
+  id: 'probe-modebtn', target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 810, deviceScaleFactor: 1 }),
+  async body({ page, shot }) {
+    await page.waitForTimeout(9000);
+    console.log('\nurl:', page.url());
+    console.log('\npanes:', await page.evaluate(() => [...document.querySelectorAll('[class*="pane"]')].map((e) => e.className).join(' | ') || '(none)'));
+    console.log('\nall visible buttons:', await page.evaluate(() =>
+      [...document.querySelectorAll('button')].filter((b) => b.offsetParent)
+        .map((b) => b.className.split(' ').slice(0, 4).join('.') + '{' + b.textContent.trim().replace(/\s+/g, ' ').slice(0, 18) + '}').slice(0, 30).join('\n  ') || '(none)'));
+    console.log('\nbody text head:', (await page.locator('body').innerText()).replace(/\n+/g, ' / ').slice(0, 300));
+    await shot('state');
+  },
+}, {});
diff --git a/screencast/scenes/probe-nw-chain.mjs b/screencast/scenes/probe-nw-chain.mjs
new file mode 100644
index 00000000..c9d3e60c
--- /dev/null
+++ b/screencast/scenes/probe-nw-chain.mjs
@@ -0,0 +1,29 @@
+// Read-only: the pivot pills on the Employees view, what the Territory pivot offers next,
+// the Region pivot's rows, and Southern's page in Content mode. Nothing saved.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { ui } from '../lib/dom.mjs';
+import { contentModeUrl } from '../lib/blocks.mjs';
+const opts = await resolve('/employees/');
+const { base } = opts;
+const info = (page) => page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block')].filter((b) => b.querySelector('.ldh-view-toolbar')).map((v) => ({ title: v.querySelector('h2,h3,.ldh-bh-title')?.textContent.trim().slice(0, 40), count: v.querySelector('.ldh-view-toolbar .count')?.textContent.trim(), mode: v.querySelector('.ldh-view-toolbar .right .ldh-mode button.drop-toggle')?.textContent.replace(/expand_more/g, '').trim(), pills: [...v.querySelectorAll('.ldh-pivot-pill')].map((p) => p.textContent.trim().replace(/\s+/g, ' ')), imgs: v.querySelectorAll('img').length })));
+await runScene({ id: 'probe-nw-chain', target: opts.target, identity: opts.identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.goto(opts.target, { waitUntil: 'load' }); await page.waitForSelector('.ldh-pane.is-active .ldh-view-toolbar', { timeout: 40_000 }); await sleep(3000);
+    console.log('  employees:', JSON.stringify(await info(page)));
+    const view = ui(page).locator('.ldh-block').filter({ has: page.locator('.ldh-view-toolbar') }).first();
+    const bar = view.locator('details.ldh-pivot-bar').first();
+    if (await bar.count() && !(await bar.evaluate((d) => d.open))) { await bar.locator('summary').first().click(); await sleep(600); }
+    const t = view.locator('.ldh-pivot-pill:visible').filter({ hasText: 'Territory' }).first();
+    await t.click(); await sleep(4000);
+    console.log('  after Territory:', JSON.stringify(await info(page)));
+    const v2 = ui(page).locator('.ldh-block').filter({ has: page.locator('.ldh-view-toolbar') });
+    const n = await v2.count();
+    for (let i = 0; i < n; i++) { const b = v2.nth(i).locator('details.ldh-pivot-bar').first(); if (await b.count() && !(await b.evaluate((d) => d.open))) { await b.locator('summary').first().click().catch(() => {}); await sleep(400); } }
+    console.log('  pills open:', JSON.stringify(await info(page)));
+    const r = ui(page).locator('.ldh-pivot-pill:visible').filter({ hasText: /Region|Contained in|Place/ }).last();
+    console.log('  region pill:', await r.count(), await r.textContent().catch(() => ''));
+    if (await r.count()) { await r.click(); await sleep(4000); console.log('  after Region:', JSON.stringify(await info(page))); console.log('  rows:', await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block')].filter((b) => b.querySelector('.ldh-view-toolbar')).at(-1)?.innerText.slice(0, 400).replace(/\n+/g, ' | '))); }
+    await page.screenshot({ path: process.env.SHOTS + '/nw-chain.png' });
+    await page.goto(contentModeUrl(`${base}/regions/4/`), { waitUntil: 'load' }); await sleep(5000);
+    console.log('  southern content rows:', await page.evaluate(() => document.querySelectorAll('.ldh-pane.is-active .ldh-block-row').length), 'buttons:', await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active button.create-action.add-constructor')].map((b) => b.textContent.trim()).join(',')));
+  } });
diff --git a/screencast/scenes/probe-nw-graphview.mjs b/screencast/scenes/probe-nw-graphview.mjs
new file mode 100644
index 00000000..94e374df
--- /dev/null
+++ b/screencast/scenes/probe-nw-graphview.mjs
@@ -0,0 +1,38 @@
+// Read-only (no data written): the Employees view switched to Graph mode, a bloom in
+// it, then the Territory and Region pivots — which mode do they render in, and can the
+// Southern node be selected and its link found.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { ui } from '../lib/dom.mjs';
+import { switchViewMode, currentViewMode } from '../lib/modes.mjs';
+import { graphState, foreignNode, expand, select, zoomToFit, nodeById } from '../lib/graph.mjs';
+import { GEOMETRY_2X, load } from '../lib/supercut.mjs';
+const opts = await resolve('/employees/');
+const { base } = opts;
+const info = (page) => page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block')].filter((b) => b.querySelector('.ldh-view-toolbar')).slice(0, 1).map((v) => ({ count: v.querySelector('.ldh-view-toolbar .count')?.textContent.trim(), mode: v.querySelector('.ldh-view-toolbar .right .ldh-mode button.drop-toggle')?.textContent.replace(/expand_more/g, '').trim(), canvas: !!v.querySelector('canvas'), pills: [...v.querySelectorAll('.ldh-pivot-pill')].map((p) => p.textContent.trim().replace(/\s+/g, ' ').replace('arrow_forward', '→').replace('arrow_back', '←')) })));
+await runScene({ id: 'probe-nw-graphview', target: opts.target, identity: opts.identity, geometry: geometryFrom(opts, GEOMETRY_2X),
+  async body({ page, cursor }) {
+    await load(page, opts.target, '.ldh-pane.is-active .ldh-view-toolbar', 3000);
+    console.log('  mode before:', await currentViewMode(page));
+    const sw = await switchViewMode(page, cursor, 'graph-mode', { settle: 6000 });
+    console.log('  switch:', sw, JSON.stringify(await info(page)));
+    await zoomToFit(page, cursor).catch(() => {}); await sleep(2000);
+    console.log('  graph:', JSON.stringify(await graphState(page)));
+    await page.screenshot({ path: process.env.SHOTS + '/nwg-0.png' });
+    const node = await foreignNode(page, `${base}/employees/`, { prefer: /\/employees\/\d+\/#this/ });
+    console.log('  employee node:', JSON.stringify(node).slice(0, 200));
+    if (node && !node.error) { const r = await expand(page, cursor, node, { settle: 5000 }); console.log('  expand:', JSON.stringify(r)); await page.screenshot({ path: process.env.SHOTS + '/nwg-1.png' }); }
+    const view = ui(page).locator('.ldh-block').filter({ has: page.locator('.ldh-view-toolbar') }).first();
+    const bar = view.locator('details.ldh-pivot-bar').first();
+    if (await bar.count() && !(await bar.evaluate((d) => d.open))) { await bar.locator('summary').first().click(); await sleep(600); }
+    await view.locator('.ldh-pivot-pill:visible').filter({ hasText: 'Territory' }).first().click(); await sleep(6000);
+    console.log('  after Territory:', JSON.stringify(await info(page)), JSON.stringify(await graphState(page)));
+    await page.screenshot({ path: process.env.SHOTS + '/nwg-2.png' });
+    const b2 = ui(page).locator('.ldh-pane.is-active details.ldh-pivot-bar').first();
+    if (await b2.count() && !(await b2.evaluate((d) => d.open))) { await b2.locator('summary').first().click(); await sleep(600); }
+    await ui(page).locator('.ldh-pivot-pill:visible').filter({ hasText: 'Region' }).first().click(); await sleep(6000);
+    console.log('  after Region:', JSON.stringify(await info(page)), JSON.stringify(await graphState(page)));
+    await page.screenshot({ path: process.env.SHOTS + '/nwg-3.png' });
+    const s = await nodeById(page, `${base}/regions/4/#this`);
+    console.log('  southern node:', JSON.stringify(s).slice(0, 200));
+    if (s && !s.error) { const picked = await select(page, cursor, { ...s }); console.log('  select:', JSON.stringify(picked).slice(0, 200)); await page.screenshot({ path: process.env.SHOTS + '/nwg-4.png' }); }
+  } });
diff --git a/screencast/scenes/probe-objectmode.mjs b/screencast/scenes/probe-objectmode.mjs
new file mode 100644
index 00000000..8ac02af2
--- /dev/null
+++ b/screencast/scenes/probe-objectmode.mjs
@@ -0,0 +1,39 @@
+// Not a scene. What Layout mode does an Object block offer? If the embedding can
+// carry its own presentation, a page's evidence renders the way its prose needs
+// without touching the shared view.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+import { switchDocumentMode } from '../lib/blocks.mjs';
+
+const { base, target, identity } = await resolve('/scratch-briefing/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  permissions: ['clipboard-read', 'clipboard-write'],
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+await page.goto(target, { waitUntil: 'load' });
+await sleep(3500);
+const plain = { click: async (l) => l.click() };
+await switchDocumentMode(page, plain, 'content-mode');
+await sleep(2500);
+
+await page.locator('button.create-action.add-constructor').filter({ hasText: 'Object' }).first().click();
+await sleep(3000);
+
+console.log(await page.evaluate(() => {
+  const form = [...document.querySelectorAll('form')].filter((f) => f.querySelector('button.btn-save')).pop();
+  if (!form) return 'no object form';
+  return JSON.stringify({
+    fields: [...form.querySelectorAll('input:not([type=hidden]), select')].map((e) => ({
+      tag: e.tagName.toLowerCase(),
+      cls: String(e.className).trim(),
+      name: e.getAttribute('name'),
+      options: e.tagName === 'SELECT' ? [...e.options].map((o) => o.textContent.trim()).slice(0, 12) : undefined,
+    })),
+    labels: [...form.querySelectorAll('.ac-label, label, .lbl')].map((e) => e.textContent.trim()).filter(Boolean).slice(0, 8),
+  }, null, 1);
+}));
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-panel.mjs b/screencast/scenes/probe-panel.mjs
new file mode 100644
index 00000000..395e3f55
--- /dev/null
+++ b/screencast/scenes/probe-panel.mjs
@@ -0,0 +1,34 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+import { ui } from '../lib/dom.mjs';
+import { field } from '../lib/constructors.mjs';
+
+const { target, identity, ...a } = await resolve('/probe-scratch/');
+const CONTENT = '?mode=' + encodeURIComponent('https://w3id.org/atomgraph/linkeddatahub#ContentMode');
+
+await runScene({
+  id: 'probe-panel', target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 810, deviceScaleFactor: 1 }),
+  async body({ page, cursor, target }) {
+    await page.goto(target + CONTENT, { waitUntil: 'load' });   // a probe, not a take
+    await page.waitForTimeout(9000);
+    const btn = ui(page).locator('button.create-action.add-constructor').filter({ hasText: 'Object' }).first();
+    console.log('  add buttons:', await ui(page).locator('button.create-action.add-constructor').count());
+    await cursor.click(btn);
+    await page.waitForTimeout(3500);
+    const value = field(page, 'Value', 'input:not([type=hidden]):visible');
+    console.log('  forClass on the box:', await page.evaluate(() => {
+      const b = [...document.querySelectorAll('.ac-cb-box')].find((e) => e.offsetParent);
+      return b ? (b.dataset.forClass || '(unset)') : '(no box)';
+    }));
+    for (const term of ['All employees', 'All customers', 'All territories']) {
+      await value.click();
+      await page.keyboard.press('Meta+A'); await page.keyboard.press('Backspace');
+      await value.pressSequentially(term, { delay: 60 });
+      await page.waitForTimeout(5000);
+      console.log(`  "${term}" →`, await page.evaluate(() => {
+        const p = [...document.querySelectorAll('.ac-cb-panel')].find((e) => e.offsetParent);
+        return p ? [...p.children].map((e) => JSON.stringify(e.innerText)).join('  ') : '(hidden)';
+      }));
+    }
+  },
+}, {});
diff --git a/screencast/scenes/probe-pinlocate.mjs b/screencast/scenes/probe-pinlocate.mjs
new file mode 100644
index 00000000..f5db78db
--- /dev/null
+++ b/screencast/scenes/probe-pinlocate.mjs
@@ -0,0 +1,19 @@
+// Read-only: does the harness see the map, and where is a Southern pin?
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { locateMarker } from '../lib/map.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+const opts = await resolve('/territories/');
+const { base, identity, target } = opts;
+const SOUTHERN = (await sparql(base, `PREFIX schema: <https://schema.org/>
+SELECT ?t WHERE { GRAPH ?g { ?t schema:containedInPlace <${base}/regions/4/#this> } }`)).map((r) => r.t);
+console.log('  southern:', SOUTHERN.length, SOUTHERN[0]);
+await runScene({
+  id: 'probe-pinlocate', target, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForSelector('.ol-viewport canvas', { timeout: 25_000 }).catch(() => {});
+    await sleep(3000);
+    console.log('  maps captured:', await page.evaluate(() => (window.__olMaps || []).length));
+    console.log('  locate:', JSON.stringify(await locateMarker(page, SOUTHERN)));
+  },
+});
diff --git a/screencast/scenes/probe-pinpop.mjs b/screencast/scenes/probe-pinpop.mjs
new file mode 100644
index 00000000..98b97ae5
--- /dev/null
+++ b/screencast/scenes/probe-pinpop.mjs
@@ -0,0 +1,36 @@
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { findMarkers, openMarker } from '../lib/map.mjs';
+
+const { target, identity, ...a } = await resolve('/territories/');
+
+await runScene({
+  id: 'probe-pinpop', target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor, target }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForSelector('.ol-viewport canvas', { timeout: 25_000 }).catch(() => {});
+    await sleep(3000);
+    const found = await findMarkers(page);
+    await openMarker(page, cursor, found.markers ?? []);
+    await sleep(1500);
+    console.log(await page.evaluate(() => {
+      const pop = document.querySelector('.ol-overlay-container');
+      if (!pop) return '  (no popup)';
+      return [...pop.querySelectorAll('button, a')].map((e, i) =>
+        `  [${i}] <${e.tagName.toLowerCase()}> class="${e.className}" title="${e.getAttribute('title') ?? ''}" text="${e.innerText.replace(/\s+/g, ' ').trim().slice(0, 30)}"`).join('\n');
+    }));
+
+    const before = await page.evaluate(() => document.body.innerHTML.length);
+    const links = page.locator('.ol-overlay-container button.tb-links').first();
+    console.log('  tb-links count:', await links.count());
+    await cursor.click(links);
+    await sleep(3500);
+    console.log(await page.evaluate((before) => {
+      const after = document.body.innerHTML.length;
+      const pops = [...document.querySelectorAll('[class*="pop"], [role="dialog"], .modal, .ac-modal')]
+        .filter((e) => e.offsetParent !== null)
+        .map((e, i) => `  pop[${i}] <${e.tagName.toLowerCase()}> class="${e.className}" text="${e.innerText.replace(/\s+/g, ' ').trim().slice(0, 90)}"`);
+      return `  html ${before} -> ${after}\n` + (pops.join('\n') || '  (no visible popover)');
+    }, before));
+  },
+}, {});
diff --git a/screencast/scenes/probe-pins.mjs b/screencast/scenes/probe-pins.mjs
new file mode 100644
index 00000000..e0c95c6e
--- /dev/null
+++ b/screencast/scenes/probe-pins.mjs
@@ -0,0 +1,53 @@
+// Not a scene. Runs the pin detector and paints a dot at every coordinate it
+// returns, so a screenshot shows immediately whether they land on the pins.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+import { findMarkers } from '../lib/map.mjs';
+
+const argv = process.argv.slice(2);
+const where = argv.includes('--path') ? argv[argv.indexOf('--path') + 1] : '/territories/';
+const { base, target, identity } = await resolve(where);
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 }, deviceScaleFactor: 2,
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+await page.goto(target, { waitUntil: 'load' });
+await page.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+await sleep(2000);
+await page.locator('.ldh-view-toolbar .right .ldh-mode button.drop-toggle').first().click();
+await sleep(600);
+await page.locator('.modes-pop.view-mode-list button.mi.map-mode').first().click();
+await sleep(8000);
+
+const found = await findMarkers(page);
+console.log('detector says:', JSON.stringify({ error: found.error, clusters: found.clusters, scale: found.scale, n: found.markers?.length }));
+console.log('first five:', JSON.stringify((found.markers ?? []).slice(0, 5).map((m) => ({ x: Math.round(m.x), y: Math.round(m.y), w: m.weight }))));
+
+// Paint them.
+await page.evaluate((markers) => {
+  for (const m of markers) {
+    const d = document.createElement('div');
+    d.style.cssText = `position:fixed;left:${m.x}px;top:${m.y}px;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#ff1744;box-shadow:0 0 0 2px #fff;z-index:2147483647;pointer-events:none`;
+    document.body.appendChild(d);
+  }
+}, found.markers ?? []);
+await page.screenshot({ path: 'shots/probe-pins.png' });
+console.log('→ shots/probe-pins.png');
+
+// And try clicking each, reporting which works.
+for (const [i, m] of (found.markers ?? []).slice(0, 8).entries()) {
+  await page.mouse.click(m.x, m.y);
+  await sleep(900);
+  const n = await page.locator('.ol-overlay-container .ac-modal-body').count();
+  console.log(`  [${i}] ${Math.round(m.x)},${Math.round(m.y)} w=${m.weight} → ${n ? 'OPENED' : 'nothing'}`);
+  if (n) break;
+}
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-pivot-chip.mjs b/screencast/scenes/probe-pivot-chip.mjs
new file mode 100644
index 00000000..fe351464
--- /dev/null
+++ b/screencast/scenes/probe-pivot-chip.mjs
@@ -0,0 +1,55 @@
+// Not a scene. Pivots a view, then dumps the parallax chip the toolbar grows, so
+// the "step back out" control is clicked by name rather than by guess.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const argv = process.argv.slice(2);
+const where = argv.includes('--path') ? argv[argv.indexOf('--path') + 1] : '/products/';
+const { base, target, identity } = await resolve(where);
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+page.on('pageerror', (e) => console.log('  PAGEERROR:', e.message.slice(0, 180)));
+
+await page.goto(target, { waitUntil: 'load' });
+await page.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+await sleep(2500);
+
+await page.locator('details.ldh-pivot-bar summary').first().click();
+await sleep(1200);
+await page.locator('.ldh-pivot-pill:visible').first().click();
+await sleep(3500);
+
+console.log('after pivot, toolbar .left:');
+console.log(await page.evaluate(() => {
+  const left = document.querySelector('.ldh-view-toolbar .left');
+  return left ? left.outerHTML.replace(/\s+/g, ' ').slice(0, 1400) : 'none';
+}));
+
+console.log('\nparallax-steps:');
+console.log(await page.evaluate(() => {
+  const s = document.querySelector('.parallax-steps');
+  return s ? s.outerHTML.replace(/\s+/g, ' ').slice(0, 1000) : 'none';
+}));
+
+// Try the documented-looking control and watch for the XSLT error.
+console.log('\nclicking the step chip\'s own dismiss:');
+const dismiss = page.locator('.parallax-steps button').last();
+if (await dismiss.count()) {
+  console.log('  target:', await dismiss.evaluate((e) => `${e.tagName.toLowerCase()}.${e.className} title=${e.title}`));
+  await dismiss.click();
+  await sleep(3000);
+  console.log('  total now:', await page.locator('.ldh-view-toolbar .right .count b').first().textContent().catch(() => '?'));
+} else {
+  console.log('  no button inside .parallax-steps');
+}
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-pivot-x.mjs b/screencast/scenes/probe-pivot-x.mjs
new file mode 100644
index 00000000..67c8b568
--- /dev/null
+++ b/screencast/scenes/probe-pivot-x.mjs
@@ -0,0 +1,46 @@
+// Not a scene. Confirms whether the × inside a parallax step chip throws, versus
+// clicking the chip body, which does not. Both are button.facet-pill; only one has
+// a div.facet ancestor.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/products/');
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+
+for (const mode of ['chip body', 'the × glyph']) {
+  const page = await context.newPage();
+  const errors = [];
+  page.on('pageerror', (e) => errors.push(e.message.slice(0, 140)));
+
+  await page.goto(target, { waitUntil: 'load' });
+  await page.locator('.ldh-view-toolbar').first().waitFor({ state: 'visible', timeout: 45_000 });
+  await sleep(2500);
+  await page.locator('details.ldh-pivot-bar summary').first().click();
+  await sleep(1000);
+  await page.locator('.ldh-pivot-pill:visible').first().click();
+  await sleep(3500);
+
+  const chip = page.locator('.parallax-steps button.parallax-step').last();
+  console.log(`\nancestors of the chip: div.facet present? ${await chip.evaluate((e) => !!e.closest('div.facet'))}`);
+
+  errors.length = 0;
+  const targetEl = mode === 'chip body' ? chip : chip.locator('span.x');
+  await targetEl.click();
+  await sleep(3000);
+
+  console.log(`clicking ${mode}:`);
+  console.log(`  total now: ${await page.locator('.ldh-view-toolbar .right .count b').first().textContent().catch(() => '?')}`);
+  console.log(`  page errors: ${errors.length ? errors.join(' | ') : 'none'}`);
+  await page.close();
+}
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-proxysearch.mjs b/screencast/scenes/probe-proxysearch.mjs
new file mode 100644
index 00000000..3e555517
--- /dev/null
+++ b/screencast/scenes/probe-proxysearch.mjs
@@ -0,0 +1,36 @@
+// Not a scene. Inside a proxied dataspace, does the drawer search find that
+// dataspace's resources, or the local one's?
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+import { openTree } from '../lib/nav.mjs';
+
+const { base, target, identity } = await resolve('/categories/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+const plain = { moveTo: async () => {}, click: async (l) => l.click() };
+
+await page.goto(target, { waitUntil: 'load' });
+await sleep(3500);
+await page.locator('button.btn-apps').first().click(); await sleep(1200);
+await page.locator('.ac-menu-item:visible, .ac-menu a:visible').filter({ hasText: 'UNESCO' }).first().click();
+await page.waitForLoadState('load').catch(() => {}); await sleep(5500);
+console.log('in the thesaurus:', page.url().includes('unesco') ? 'yes (proxied)' : page.url().slice(0, 60));
+
+await openTree(page, plain);
+const box = page.locator('.sb-search input[name="q"]').first();
+console.log('search box visible:', await box.isVisible().catch(() => false));
+if (await box.isVisible().catch(() => false)) {
+  await box.click();
+  await box.pressSequentially('Beverages', { delay: 60 });
+  await sleep(3500);
+  console.log('results:', await page.evaluate(() => JSON.stringify(
+    [...document.querySelectorAll('.typeahead a, .typeahead li, .ac-menu-item')]
+      .filter((e) => e.offsetParent !== null).slice(0, 6)
+      .map((a) => `${a.textContent.replace(/\s+/g,' ').trim().slice(0,32)} → ${(a.getAttribute('href') ?? '').slice(0, 78)}`), null, 1)));
+}
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-query.mjs b/screencast/scenes/probe-query.mjs
new file mode 100644
index 00000000..ac6afdce
--- /dev/null
+++ b/screencast/scenes/probe-query.mjs
@@ -0,0 +1,53 @@
+// Not a scene. Is there any UI path to a saved query — to create one, or to edit
+// the one behind an existing view?
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/products/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+await page.goto(target, { waitUntil: 'load' });
+await sleep(4000);
+
+// The Create menu is mode-gated: ContentMode offers only the two block types.
+// Switch to Properties first to see the ontology's classes.
+import { switchDocumentMode } from '../lib/blocks.mjs';
+const plain = { click: async (l) => l.click() };
+console.log('in ContentMode, Create offers:');
+await page.locator('button.drop-toggle').filter({ hasText: 'Create' }).first().click();
+await sleep(1200);
+console.log(await page.evaluate(() => JSON.stringify(
+  [...document.querySelectorAll('.add-constructor')].filter((e) => e.offsetParent !== null)
+    .map((e) => `${e.textContent.replace(/\s+/g, ' ').trim().slice(0, 28)} → ${e.dataset.forClass ?? ''}`), null, 1)));
+await page.keyboard.press('Escape'); await sleep(800);
+
+await switchDocumentMode(page, plain, 'read-mode');
+await sleep(3000);
+console.log('\nin Properties (ReadMode), Create offers:');
+await page.locator('button.drop-toggle').filter({ hasText: 'Create' }).first().click();
+await sleep(1500);
+console.log(await page.evaluate(() => JSON.stringify(
+  [...document.querySelectorAll('.add-constructor')].filter((e) => e.offsetParent !== null)
+    .map((e) => `${e.textContent.replace(/\s+/g, ' ').trim().slice(0, 30)} → ${(e.dataset.forClass ?? '').replace(/^https?:\/\/[^#]*[#\/]/, '')}`), null, 1)));
+await page.keyboard.press('Escape'); await sleep(600);
+
+const chip = page.locator('.ldh-type-chip').filter({ hasText: 'View' }).first();
+console.log('\nView chip present:', await chip.count(), await chip.getAttribute('href').catch(() => ''));
+if (await chip.count()) {
+  await chip.click();
+  await page.waitForLoadState('load').catch(() => {});
+  await sleep(5000);
+  console.log('view resource page:', page.url().slice(0, 100));
+  console.log(await page.evaluate(() => JSON.stringify({
+    yasqe: document.querySelectorAll('.yasqe, .CodeMirror').length,
+    queryText: [...document.querySelectorAll('pre, code, textarea')].filter((e) => /SELECT|WHERE/i.test(e.textContent)).length,
+    links: [...document.querySelectorAll('.ldh-pane.is-active a')].filter((a) => /quer/i.test(a.textContent + a.href))
+      .map((a) => `${a.textContent.replace(/\s+/g,' ').trim().slice(0,26)} → ${a.getAttribute('href')?.slice(0, 70)}`).slice(0, 5),
+  }, null, 1)));
+}
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-queryblock.mjs b/screencast/scenes/probe-queryblock.mjs
new file mode 100644
index 00000000..f642da38
--- /dev/null
+++ b/screencast/scenes/probe-queryblock.mjs
@@ -0,0 +1,40 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+import { switchDocumentMode } from '../lib/blocks.mjs';
+
+const { target, identity, ...a } = await resolve('/categories/');
+
+await runScene({
+  id: 'probe-queryblock', target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 810, deviceScaleFactor: 1 }),
+  async body({ page, cursor, shot, target }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForTimeout(8000);
+    const count = (l) => page.locator('.CodeMirror').count().then((c) => console.log(`  ${l}: CodeMirror=${c}`));
+
+    console.log('  → Properties:', await switchDocumentMode(page, cursor, 'read-mode'));
+    await page.waitForTimeout(6000);
+    await count('Properties');
+    await shot('properties');
+
+    // the query resources declared on this document
+    const rows = await page.locator('.ldh-pane.is-active .ldh-block-row, .ldh-pane.is-active [about]').allInnerTexts();
+    console.log('  resources:', rows.map((t) => t.split('\n').find((l) => l.trim()) || '').filter(Boolean).slice(0, 14).join(' | ').slice(0, 300));
+
+    // open the query resource's edit form
+    const q = page.locator('.ldh-pane.is-active').getByText(/Select categories|categories query/i).first();
+    console.log('  query resource on page:', await q.count());
+    if (await q.count()) {
+      const row = q.locator('xpath=ancestor::*[contains(@class,"ldh-block-row") or contains(@class,"ldh-block")][1]');
+      await row.scrollIntoViewIfNeeded().catch(() => {});
+      await row.hover().catch(() => {});
+      const pencil = row.locator('button.ac-iconbtn').filter({ hasText: 'edit' });
+      console.log('  pencils on it:', await pencil.count());
+      if (await pencil.count()) {
+        await cursor.click(pencil.first());
+        await page.waitForTimeout(7000);
+        await count('after pencil');
+        await shot('query-edit');
+      }
+    }
+  },
+}, {});
diff --git a/screencast/scenes/probe-rb-graph.mjs b/screencast/scenes/probe-rb-graph.mjs
new file mode 100644
index 00000000..7e46b8d7
--- /dev/null
+++ b/screencast/scenes/probe-rb-graph.mjs
@@ -0,0 +1,23 @@
+// Read-only: a printed 2×4 brick's page in Graph mode on Rebrickable — the nodes, and
+// what a double-click on the base part node brings in. Nothing saved.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { graphState, foreignNode, expand, zoomToFit, approach } from '../lib/graph.mjs';
+import { GEOMETRY_2X, load } from '../lib/supercut.mjs';
+const opts = await resolve('/parts/3001pr0045/');
+const G = `${opts.target}?mode=${encodeURIComponent('https://w3id.org/atomgraph/client#GraphMode')}`;
+await runScene({ id: 'probe-rb-graph', target: G, identity: opts.identity, geometry: geometryFrom(opts, GEOMETRY_2X),
+  async body({ page, cursor }) {
+    await load(page, G, 'canvas', 4000, { timeout: 120_000 });
+    await zoomToFit(page, cursor); await sleep(2500);
+    const st = await graphState(page);
+    console.log('  nodes:', JSON.stringify(st?.nodes?.map?.((n) => ({ id: n.id?.replace(opts.base ?? '', ''), t: n.type ?? n.label })) ?? st).slice(0, 1500));
+    await page.screenshot({ path: process.env.SHOTS + '/rb-graph-0.png' });
+    const node = await foreignNode(page, opts.target, { prefer: /\/parts\/3001\/#this/ });
+    console.log('  foreign:', JSON.stringify(node).slice(0, 300));
+    if (node && !node.error) {
+      const r = await expand(page, cursor, node, { settle: 6000 });
+      console.log('  expand:', JSON.stringify(r));
+      await sleep(2000);
+      await page.screenshot({ path: process.env.SHOTS + '/rb-graph-1.png' });
+    }
+  } });
diff --git a/screencast/scenes/probe-rb-pivot-colors.mjs b/screencast/scenes/probe-rb-pivot-colors.mjs
new file mode 100644
index 00000000..7ae448cc
--- /dev/null
+++ b/screencast/scenes/probe-rb-pivot-colors.mjs
@@ -0,0 +1,24 @@
+// Read-only: the 2×4 brick's Colors view, then its Color pivot. Nothing saved.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { ui } from '../lib/dom.mjs';
+const opts = await resolve('/parts/3001/');
+const { identity } = opts;
+await runScene({ id: 'probe-rb-pivot-colors', target: opts.target, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(opts.target, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-view-toolbar', { timeout: 40_000 }); await sleep(5000);
+    const view = ui(page).locator('.ldh-block').filter({ has: page.locator('.ldh-view-toolbar') }).filter({ hasText: 'Colors' }).last();
+    await view.evaluate((el) => el.scrollIntoView({ block: 'start' })); await sleep(1500);
+    await page.screenshot({ path: process.env.SHOTS + '/rb-colors-view.png' });
+    const bar = view.locator('details.ldh-pivot-bar').first();
+    if (await bar.count() && !(await bar.evaluate((d) => d.open))) { await bar.locator('summary').first().click(); await sleep(700); }
+    const pill = view.locator('.ldh-pivot-pill:visible').filter({ hasText: 'Color' }).first();
+    console.log('  pill:', await pill.count(), await pill.textContent().catch(() => ''));
+    const t0 = Date.now();
+    await pill.click();
+    await page.waitForFunction(() => { const c = document.querySelector('.ldh-pane.is-active .ldh-view-toolbar .count b'); return c && c.textContent.trim() !== '78'; }, null, { timeout: 30_000 }).catch(() => console.log('  count did not change'));
+    console.log('  pivot took', Date.now() - t0, 'ms');
+    await sleep(2500);
+    await page.screenshot({ path: process.env.SHOTS + '/rb-colors-pivot.png' });
+    console.log('  after:', await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-view-toolbar .count')].map((c) => c.textContent.trim()).join(' | ')));
+  } });
diff --git a/screencast/scenes/probe-rb-pivots.mjs b/screencast/scenes/probe-rb-pivots.mjs
new file mode 100644
index 00000000..90dcad70
--- /dev/null
+++ b/screencast/scenes/probe-rb-pivots.mjs
@@ -0,0 +1,21 @@
+// Read-only: which pivot pills Rebrickable's photo views offer, per page. Nothing saved.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { ui } from '../lib/dom.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const pages = (process.env.PAGES ?? '/sets/10229-1/,/sets/,/parts/3001/').split(',');
+await runScene({ id: 'probe-rb-pivots', target: base + pages[0], identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    for (const p of pages) {
+      const url = p.startsWith('http') ? p : base.replace(/\/$/, '') + p;
+      await page.goto(url, { waitUntil: 'load' }).catch((e) => console.log('  goto failed', url, e.message));
+      await page.waitForSelector('.ldh-pane.is-active .ldh-view-toolbar', { timeout: 40_000 }).catch(() => {});
+      await sleep(4000);
+      const info = await page.evaluate(() => {
+        const views = [...document.querySelectorAll('.ldh-pane.is-active .ldh-block')].filter((b) => b.querySelector('.ldh-view-toolbar'));
+        return views.map((v) => ({ title: v.querySelector('h2, h3, .ldh-bh-title')?.textContent.trim().slice(0, 40), count: v.querySelector('.ldh-view-toolbar .count')?.textContent.trim(), mode: v.querySelector('.ldh-view-toolbar [aria-pressed="true"], .ldh-view-toolbar .is-active')?.textContent.trim().slice(0, 20), imgs: v.querySelectorAll('img').length, pills: [...v.querySelectorAll('.ldh-pivot-pill')].map((p) => p.textContent.trim().replace(/\s+/g, ' ')), barOpen: v.querySelector('details.ldh-pivot-bar')?.open ?? null, h: v.getBoundingClientRect().height }));
+      });
+      console.log('  page', url, JSON.stringify(info));
+      await page.screenshot({ path: process.env.SHOTS + '/rb-' + p.replace(/[^a-z0-9]+/gi, '_') + '.png' }).catch(() => {});
+    }
+  } });
diff --git a/screencast/scenes/probe-rebrick.mjs b/screencast/scenes/probe-rebrick.mjs
new file mode 100644
index 00000000..1dcee3ec
--- /dev/null
+++ b/screencast/scenes/probe-rebrick.mjs
@@ -0,0 +1,19 @@
+// Read-only: what the Rebrickable dataspace looks like on its strongest pages.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OUT = '/private/tmp/claude-501/-Users-martynas-WebRoot-LinkedDataHub/5542c912-918c-4be9-8864-ed41b61b33fa/scratchpad/rb';
+await runScene({ id: 'probe-rebrick', target: base + '/', identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    for (const [p, name] of [['/', 'root'], ['/sets/', 'sets'], ['/taxonomies/themes/', 'themes'], ['/taxonomies/colors/', 'colors'], ['/sets/10229-1/', 'set'], ['/parts/3005/', 'part']]) {
+      const t0 = Date.now();
+      await page.goto(base + p, { waitUntil: 'load' }).catch(() => {});
+      await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 40_000 }).catch(() => {});
+      await sleep(6000);
+      const imgs = await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active img')].filter((i) => i.complete && i.naturalWidth > 0).length);
+      const views = await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block[data-for-class]')].map((b) => (b.querySelector('h2,h3,.ldh-block-title')?.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 40) + ' [' + (b.querySelector('.ldh-view-toolbar .count b')?.textContent?.trim() ?? '') + (b.querySelector('button.add-instance') ? ', Create' : '') + ']'));
+      const counts = await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-view-toolbar .count b')].map((b) => b.textContent.trim()));
+      await page.screenshot({ path: `${OUT}/${name}.png` });
+      console.log(`  ${p}: ${Date.now() - t0}ms, ${imgs} images painted, counts ${JSON.stringify(counts)}, derived views ${JSON.stringify(views)}`);
+    }
+  } });
diff --git a/screencast/scenes/probe-region-views.mjs b/screencast/scenes/probe-region-views.mjs
new file mode 100644
index 00000000..f21c7bd4
--- /dev/null
+++ b/screencast/scenes/probe-region-views.mjs
@@ -0,0 +1,8 @@
+// Read-only: the Southern region page's views and their toolbars' mode toggles.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/regions/4/');
+await runScene({ id: 'probe-region-views', target: opts.target, identity: opts.identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    await page.goto(opts.target, { waitUntil: 'load' }); await page.waitForSelector('.ldh-pane.is-active .ldh-view-toolbar', { timeout: 40_000 }).catch(() => {}); await sleep(4000);
+    console.log('  views:', JSON.stringify(await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block')].filter((b) => b.querySelector('.ldh-view-toolbar')).map((v) => ({ title: v.querySelector('h2,h3,.ldh-bh-title')?.textContent.trim().slice(0, 40), forClass: v.getAttribute('data-for-class'), count: v.querySelector('.ldh-view-toolbar .count')?.textContent.trim(), mode: v.querySelector('.ldh-view-toolbar .right .ldh-mode button.drop-toggle')?.textContent.replace(/expand_more/g, '').trim(), modes: [...v.querySelectorAll('.ldh-view-toolbar .ldh-mode .modes-pop button.mi')].map((b) => b.className.match(/\b\w+-mode\b/)?.[0]), add: !!v.querySelector('button.add-instance') })))));
+  } });
diff --git a/screencast/scenes/probe-region4.mjs b/screencast/scenes/probe-region4.mjs
new file mode 100644
index 00000000..544368e5
--- /dev/null
+++ b/screencast/scenes/probe-region4.mjs
@@ -0,0 +1,13 @@
+// Read-only: what /regions/4/ renders — blocks, views, add-instance buttons. Nothing saved.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/regions/4/');
+await runScene({ id: 'probe-region4', target: opts.target, identity: opts.identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    const t0 = Date.now();
+    await page.goto(opts.target, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 60_000 }).catch(() => {});
+    await sleep(6000);
+    console.log('  loaded in', Date.now() - t0, 'ms');
+    console.log('  blocks:', JSON.stringify(await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block')].map((b) => ({ cls: b.getAttribute('data-for-class'), title: b.querySelector('h2, h3, .ldh-bh-title')?.textContent.trim().slice(0, 40), add: b.querySelectorAll('button.add-instance').length, toolbar: !!b.querySelector('.ldh-view-toolbar') })))));
+    await page.screenshot({ path: process.env.SHOTS + '/region4.png', fullPage: true });
+  } });
diff --git a/screencast/scenes/probe-scheme.mjs b/screencast/scenes/probe-scheme.mjs
new file mode 100644
index 00000000..201907a8
--- /dev/null
+++ b/screencast/scenes/probe-scheme.mjs
@@ -0,0 +1,17 @@
+// Read-only: does the app follow prefers-color-scheme? Loads one page under each scheme and
+// prints the media query's answer and the body's background. Answered yes on 2026-09-19 —
+// which is why every take in the dark cut is recorded with SCHEME=dark.
+import { chromium } from 'playwright';
+import { resolve } from '../lib/harness.mjs';
+const { base, identity } = await resolve('/');
+const browser = await chromium.launch();
+for (const scheme of ['light', 'dark']) {
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: scheme, ignoreHTTPSErrors: true, ...(identity ? { clientCertificates: identity } : {}) });
+  await ctx.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+  const page = await ctx.newPage();
+  await page.goto(base + '/customers/GOURL/', { waitUntil: 'load' });
+  await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 30000 }).catch(() => {});
+  console.log(scheme, await page.evaluate(() => [matchMedia('(prefers-color-scheme: dark)').matches, getComputedStyle(document.body).backgroundColor, document.documentElement.dataset.theme ?? null, document.documentElement.className]));
+  await ctx.close();
+}
+await browser.close();
diff --git a/screencast/scenes/probe-search-go.mjs b/screencast/scenes/probe-search-go.mjs
new file mode 100644
index 00000000..7d750483
--- /dev/null
+++ b/screencast/scenes/probe-search-go.mjs
@@ -0,0 +1,17 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+import { searchGo } from '../lib/nav.mjs';
+
+const { target, identity, ...a } = await resolve('/');
+await runScene({
+  id: 'probe-search-go', target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 810, deviceScaleFactor: 1 }),
+  async body({ page, cursor, shot, target }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForTimeout(8000);
+    const r = await searchGo(page, cursor, 'Beverages', { type: 'Concept' });
+    console.log('\n  searchGo →', JSON.stringify(r));
+    console.log('  landed on:', page.url());
+    console.log('  h1:', (await page.locator('.ldh-pane.is-active h1, h1').first().innerText().catch(() => '(none)')).slice(0, 60));
+    await shot('landed');
+  },
+}, {});
diff --git a/screencast/scenes/probe-search.mjs b/screencast/scenes/probe-search.mjs
new file mode 100644
index 00000000..a3958711
--- /dev/null
+++ b/screencast/scenes/probe-search.mjs
@@ -0,0 +1,44 @@
+// Not a scene. How the search shortcut opens and what it offers, so scenes can jump
+// straight to a resource by name instead of walking the tree.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/team-coverage-briefing/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+page.on('pageerror', (e) => console.log('  PAGEERROR:', e.message.slice(0, 120)));
+await page.goto(target, { waitUntil: 'load' });
+await sleep(4000);
+
+const modifier = process.platform === 'darwin' ? 'Meta' : 'Control';
+await page.keyboard.press(`${modifier}+KeyK`);
+await sleep(2000);
+
+console.log('after the shortcut:', await page.evaluate(() => JSON.stringify({
+  dialogs: [...document.querySelectorAll('.ac-backdrop, .modal, dialog')]
+    .filter((e) => e.offsetParent !== null)
+    .map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim()}`),
+  inputs: [...document.querySelectorAll('input')].filter((e) => e.offsetParent !== null)
+    .map((e) => `${String(e.className).trim() || e.type}[name=${e.name || ''}] placeholder=${e.placeholder || ''}`),
+}, null, 1)));
+
+const box = page.locator('input[type=search], .sb-search input, input[name=q]').filter({ visible: true }).first();
+if (await box.count()) {
+  await box.click();
+  await box.pressSequentially('Employees', { delay: 60 });
+  await sleep(2500);
+  console.log('results:', await page.evaluate(() => JSON.stringify(
+    [...document.querySelectorAll('.typeahead a, .typeahead li, .ac-menu-item, [class*=result] a')]
+      .filter((e) => e.offsetParent !== null).slice(0, 8)
+      .map((a) => `${a.textContent.replace(/\s+/g, ' ').trim().slice(0, 40)} → ${a.getAttribute('href') ?? ''}`), null, 1)));
+  await page.keyboard.press('Enter');
+  await sleep(3000);
+  console.log('url after Enter:', page.url());
+}
+await page.screenshot({ path: 'shots/probe-search.png' });
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-search2.mjs b/screencast/scenes/probe-search2.mjs
new file mode 100644
index 00000000..51182d97
--- /dev/null
+++ b/screencast/scenes/probe-search2.mjs
@@ -0,0 +1,18 @@
+// Read-only: two searches in one take, from a content page — what the dialog reports.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { searchGo } from '../lib/nav.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const [pg] = await sparql(base, `PREFIX dct: <http://purl.org/dc/terms/> SELECT ?doc WHERE { GRAPH ?doc { ?doc dct:title "Late: the customer or the shipper?" } }`);
+await runScene({ id: 'probe-search2', target: pg.doc, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.goto(pg.doc, { waitUntil: 'load' }); await sleep(5000);
+    for (let i = 0; i < 2; i++) {
+      const r = await searchGo(page, cursor, '10423', { type: 'Order' });
+      console.log(`  search ${i + 1}:`, JSON.stringify({ ok: r.ok, why: r.why, total: r.total, href: r.href }));
+      const modals = await page.locator('.ac-modal').evaluateAll((ms) => ms.map((m) => ({ visible: m.offsetParent !== null, text: m.textContent.replace(/\s+/g, ' ').trim().slice(0, 80) })));
+      console.log('  modals:', JSON.stringify(modals));
+      await sleep(1500);
+    }
+  } });
diff --git a/screencast/scenes/probe-select.mjs b/screencast/scenes/probe-select.mjs
new file mode 100644
index 00000000..8e080219
--- /dev/null
+++ b/screencast/scenes/probe-select.mjs
@@ -0,0 +1,49 @@
+// Not a scene. What do the SELECT and View constructors ask for?
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+import { switchDocumentMode } from '../lib/blocks.mjs';
+
+const { base, target, identity } = await resolve('/team-coverage-briefing/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+const plain = { click: async (l) => l.click() };
+
+await page.goto(target, { waitUntil: 'load' });
+await sleep(3500);
+await switchDocumentMode(page, plain, 'read-mode');
+await sleep(3000);
+
+for (const kind of ['SELECT', 'View']) {
+  await page.locator('button.drop-toggle').filter({ hasText: 'Create' }).first().click();
+  await sleep(1200);
+  const item = page.locator('.add-constructor').filter({ hasText: new RegExp(`^category${kind}$`) }).first();
+  const fallback = page.locator('.add-constructor').filter({ hasText: kind }).first();
+  const target2 = (await item.count()) ? item : fallback;
+  if (!(await target2.count())) { console.log(`${kind}: not offered`); continue; }
+  await target2.click();
+  await sleep(3500);
+
+  console.log(`\n=== ${kind} constructor`);
+  console.log(await page.evaluate(() => {
+    const modal = document.querySelector('.modal.modal-constructor, .ac-backdrop.modal, .modal');
+    const root = modal && modal.offsetParent !== null ? modal : document.querySelector('.ldh-pane.is-active');
+    if (!root) return 'nothing';
+    return JSON.stringify({
+      inModal: !!(modal && modal.offsetParent !== null),
+      labels: [...root.querySelectorAll('.ac-label, label, .lbl')].map((e) => e.textContent.trim()).filter(Boolean).slice(0, 10),
+      inputs: [...root.querySelectorAll('input:not([type=hidden]), select, textarea')]
+        .map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim().split(/\s+/)[0] || '-'}[${e.getAttribute('name') ?? e.type}]`).slice(0, 12),
+      yasqe: root.querySelectorAll('.yasqe, .CodeMirror').length,
+      buttons: [...root.querySelectorAll('button')].map((b) => b.textContent.replace(/\s+/g, ' ').trim()).filter(Boolean).slice(0, 8),
+    }, null, 1);
+  }));
+  await page.screenshot({ path: `shots/probe-${kind}.png` });
+  await page.keyboard.press('Escape');
+  await sleep(1500);
+}
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-sheets.mjs b/screencast/scenes/probe-sheets.mjs
new file mode 100644
index 00000000..2e1409bd
--- /dev/null
+++ b/screencast/scenes/probe-sheets.mjs
@@ -0,0 +1,9 @@
+// Read-only: which stylesheets the page loads, and whether cssRules are readable.
+import { chromium } from 'playwright';
+import { resolve } from '../lib/harness.mjs';
+const opts = await resolve('/'); const { base, identity } = opts;
+const b = await chromium.launch(); const ctx = await b.newContext({ ignoreHTTPSErrors: true, clientCertificates: identity ?? [], colorScheme: 'dark' });
+const p = await ctx.newPage(); await p.goto(base + '/regions/4/', { waitUntil: 'load' }); await p.waitForTimeout(3000);
+console.log(JSON.stringify(await p.evaluate(() => [...document.styleSheets].map((s) => { let n = null; try { n = s.cssRules.length; } catch {} return { href: s.href, rules: n, media: s.media.mediaText, disabled: s.disabled }; })), null, 1));
+console.log('link/style tags:', JSON.stringify(await p.evaluate(() => [...document.querySelectorAll('link[rel=stylesheet], style')].map((e) => e.tagName + ' ' + (e.href || e.textContent.slice(0, 60))))));
+await b.close();
diff --git a/screencast/scenes/probe-shot.mjs b/screencast/scenes/probe-shot.mjs
new file mode 100644
index 00000000..19e5495e
--- /dev/null
+++ b/screencast/scenes/probe-shot.mjs
@@ -0,0 +1,17 @@
+// Read-only: a dark screenshot of a path, for looking at what a page holds today.
+import { chromium } from 'playwright';
+import { resolve } from '../lib/harness.mjs';
+const { base, identity } = await resolve('/');
+const paths = (process.argv.find((a) => a.startsWith('--paths=')) ?? '--paths=/').slice(8).split(',');
+const out = (process.argv.find((a) => a.startsWith('--out=')) ?? '--out=.').slice(6);
+const browser = await chromium.launch();
+const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: 'dark', ignoreHTTPSErrors: true, ...(identity ? { clientCertificates: identity } : {}) });
+await ctx.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await ctx.newPage();
+for (const p of paths) {
+  await page.goto(base + p, { waitUntil: 'load' });
+  await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(4000);
+  await page.screenshot({ path: `${out}/shot${p.replace(/[^a-z0-9]+/gi, '-')}.png`, fullPage: true });
+}
+await browser.close();
diff --git a/screencast/scenes/probe-sparql.mjs b/screencast/scenes/probe-sparql.mjs
new file mode 100644
index 00000000..0344e2ce
--- /dev/null
+++ b/screencast/scenes/probe-sparql.mjs
@@ -0,0 +1,33 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+
+const { target, identity, base, ...a } = await resolve('/');
+// Every document is a named graph, so the default graph is empty — a query without
+// GRAPH matches nothing, which is what made the first attempt look like a render bug.
+const query = `PREFIX schema: <https://schema.org/>
+
+SELECT ?name ?price
+WHERE {
+  GRAPH ?g {
+    ?product a schema:Product ;
+      schema:name ?name ;
+      schema:price ?price .
+  }
+}
+ORDER BY DESC(?price)`;
+
+await runScene({
+  id: 'probe-sparql',
+  target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 810, deviceScaleFactor: 1 }),
+  async body({ page, shot }) {
+    await page.goto(`${base}/sparql?query=${encodeURIComponent(query)}`, { waitUntil: 'load' });
+    await page.waitForTimeout(14000);
+    console.log('url after load:', page.url());
+    console.log('\nCodeMirror:', await page.locator('.CodeMirror').count(),
+      '| yasqe:', await page.locator('[class*="yasqe"]').count(),
+      '| result rows:', await page.locator('table tbody tr').count(),
+      '| ac-table:', await page.locator('.ac-table').count());
+    console.log('editor text:', (await page.locator('.CodeMirror').first().innerText().catch(() => '(none)')).replace(/\n+/g, ' / ').slice(0, 120));
+    await shot('sparql-editor');
+  },
+}, {});
diff --git a/screencast/scenes/probe-tablesort.mjs b/screencast/scenes/probe-tablesort.mjs
new file mode 100644
index 00000000..10f9f2dd
--- /dev/null
+++ b/screencast/scenes/probe-tablesort.mjs
@@ -0,0 +1,20 @@
+// Read-only: what clicking the Price header does to the product list's order.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/categories/1/');
+const { identity, target } = opts;
+await runScene({ id: 'probe-tablesort', target, identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.goto(target, { waitUntil: 'load' });
+    const list = page.locator('.ldh-pane.is-active .ldh-block[data-for-class]').filter({ hasText: 'Products in this category' }).first();
+    await list.waitFor({ state: 'visible', timeout: 25_000 }); await sleep(5000);
+    const th = list.locator('table thead th').filter({ hasText: /^Price$/ }).first();
+    console.log('  th html:', JSON.stringify(await th.evaluate((e) => e.outerHTML.slice(0, 300))));
+    const order = async () => (await list.locator('table tbody tr').evaluateAll((rows) => rows.map((r) => { const c = [...r.querySelectorAll('td')]; return (c[4]?.textContent.trim() || '') + ' ' + (c[6]?.textContent.trim() || ''); }))).slice(0, 4);
+    console.log('  before:', JSON.stringify(await order()));
+    await th.scrollIntoViewIfNeeded(); await cursor.click(th); await sleep(1500);
+    console.log('  after 1 click:', JSON.stringify(await order()), 'aria-sort=', await th.getAttribute('aria-sort'));
+    await cursor.click(th); await sleep(1500);
+    console.log('  after 2 clicks:', JSON.stringify(await order()), 'aria-sort=', await th.getAttribute('aria-sort'));
+    const btn = th.locator('button, a, [role=button]').first();
+    console.log('  header control:', await btn.count() ? await btn.evaluate((e) => e.outerHTML.slice(0, 200)) : 'none');
+  } });
diff --git a/screencast/scenes/probe-tabs.mjs b/screencast/scenes/probe-tabs.mjs
new file mode 100644
index 00000000..a32c112d
--- /dev/null
+++ b/screencast/scenes/probe-tabs.mjs
@@ -0,0 +1,36 @@
+// Not a scene. The tab strip: how a tab is identified and switched to.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/categories/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+await page.goto(target, { waitUntil: 'load' });
+await sleep(3000);
+await page.locator('button.btn-apps').first().click(); await sleep(1200);
+await page.locator('.ac-menu-item:visible, .ac-menu a:visible').filter({ hasText: 'UNESCO' }).first().click();
+await page.waitForLoadState('load').catch(() => {}); await sleep(5000);
+
+console.log('tab strip:', await page.evaluate(() => {
+  const tabs = [...document.querySelectorAll('[class*="tab"]')].filter((e) => e.offsetParent !== null);
+  return JSON.stringify(tabs.slice(0, 10).map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim()} — "${e.textContent.replace(/\s+/g, ' ').trim().slice(0, 24)}"`), null, 1);
+}));
+
+// Switch back by clicking the first tab's label.
+const first = page.locator('[class*="tab"]:visible').filter({ hasText: 'Categories' }).first();
+console.log('found Categories tab:', await first.count());
+if (await first.count()) {
+  await first.click();
+  await sleep(3000);
+  console.log('url after clicking it:', page.url().slice(0, 90));
+  console.log('active pane heading:', await page.evaluate(() => {
+    const p = document.querySelector('.ldh-pane.is-active');
+    return p ? (p.textContent.replace(/\s+/g, ' ').trim().slice(0, 60)) : 'none';
+  }));
+}
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-territories-create.mjs b/screencast/scenes/probe-territories-create.mjs
new file mode 100644
index 00000000..7e7e216e
--- /dev/null
+++ b/screencast/scenes/probe-territories-create.mjs
@@ -0,0 +1,29 @@
+// Read-only: what a page offers for creating a resource — its blocks, which of them carry a
+// constructor (data-for-class, an add-instance button), the floating Create menu — and how
+// many leftover fixtures the data holds. Answered on 2026-09-19 that /territories/ has no
+// constructor (document views never do; only the ontology's class views get one) while a
+// territory's own "Employees serving this territory" view does.
+//   node scenes/probe-territories-create.mjs --paths=/territories/,/regions/4/ --base … --cert-file … --cert-password-file …
+import { chromium } from 'playwright';
+import { resolve } from '../lib/harness.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+const { base, identity } = await resolve('/');
+const rows = await sparql(base, `PREFIX dct: <http://purl.org/dc/terms/> SELECT ?doc ?title WHERE { GRAPH ?doc { ?doc dct:title ?title } FILTER(?title IN ("El Paso", "Houston")) }`).catch((e) => 'sparql failed: ' + e.message);
+console.log('El Paso / Houston docs:', JSON.stringify(rows));
+const browser = await chromium.launch();
+const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: 'dark', ignoreHTTPSErrors: true, ...(identity ? { clientCertificates: identity } : {}) });
+await ctx.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await ctx.newPage();
+const paths = (process.argv.find((a) => a.startsWith('--paths=')) ?? '--paths=/territories/,/regions/4/').slice(8).split(',');
+for (const p of paths) {
+  await page.goto(base + p, { waitUntil: 'load' });
+  await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(4000);
+  console.log(p, JSON.stringify(await page.evaluate(() => ({
+    mode: document.querySelector('.ldh-pane.is-active .ldh-block[data-mode], .ldh-pane.is-active [class*="mode"]')?.className.slice(0, 40) ?? null,
+    blocks: [...document.querySelectorAll('.ldh-pane.is-active .ldh-block')].map((b) => ({ title: b.querySelector('h2, h3, .ldh-block-title')?.textContent.trim().slice(0, 40), forClass: b.dataset.forClass ?? null, addInstance: b.querySelectorAll('button.add-instance').length, toolbar: !!b.querySelector('.ldh-view-toolbar') })),
+    createMenu: [...document.querySelectorAll('button.create-action, .create-action')].map((e) => e.textContent.replace(/\s+/g, ' ').trim().slice(0, 30)),
+    links: [...document.querySelectorAll('.ldh-pane.is-active .ldh-block a')].map((a) => a.textContent.trim()).filter((t) => /region/i.test(t)).slice(0, 5),
+  })), null, 1));
+}
+await browser.close();
diff --git a/screencast/scenes/probe-thesaurus.mjs b/screencast/scenes/probe-thesaurus.mjs
new file mode 100644
index 00000000..fa4409a1
--- /dev/null
+++ b/screencast/scenes/probe-thesaurus.mjs
@@ -0,0 +1,41 @@
+// Not a scene. Once the apps menu proxies the thesaurus into our chrome, how does
+// one reach an actual concept, and does it carry a copy-URI control?
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/categories/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([{ name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' }]);
+const page = await context.newPage();
+await page.goto(target, { waitUntil: 'load' });
+await sleep(3500);
+
+await page.locator('button.btn-apps').first().click();
+await sleep(1200);
+await page.locator('.ac-menu-item, .ac-menu a').filter({ hasText: 'UNESCO' }).first().click();
+await page.waitForLoadState('load').catch(() => {});
+await sleep(6000);
+console.log('proxied root:', page.url().slice(0, 110));
+
+console.log('links on the proxied root:', await page.evaluate(() => JSON.stringify(
+  [...document.querySelectorAll('.ldh-block-body a[href*="uri="], .ldh-block-body a')]
+    .filter((a) => a.offsetParent !== null)
+    .slice(0, 10)
+    .map((a) => `${a.textContent.replace(/\s+/g, ' ').trim().slice(0, 34)} → ${(a.getAttribute('href') ?? '').slice(0, 90)}`), null, 1)));
+
+const first = page.locator('.ldh-block-body a').first();
+if (await first.count()) {
+  console.log('following:', (await first.textContent()).trim().slice(0, 40));
+  await first.click();
+  await page.waitForLoadState('load').catch(() => {});
+  await sleep(6000);
+  console.log('now at:', page.url().slice(0, 130));
+  console.log('title:', await page.title());
+  console.log('copy-uri controls:', await page.locator('.btn-copy-uri').count());
+}
+await page.screenshot({ path: 'shots/probe-thesaurus.png' });
+await context.close(); await browser.close();
diff --git a/screencast/scenes/probe-tree.mjs b/screencast/scenes/probe-tree.mjs
new file mode 100644
index 00000000..ffa7d656
--- /dev/null
+++ b/screencast/scenes/probe-tree.mjs
@@ -0,0 +1,36 @@
+// Not a scene. The left drawer's document tree is the efficient way to reach a
+// sibling container; this dumps how to open it and what it offers.
+import { chromium } from 'playwright';
+import { resolve, sleep } from '../lib/harness.mjs';
+
+const { base, target, identity } = await resolve('/team-coverage-briefing/');
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true, viewport: { width: 1440, height: 810 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+await page.goto(target, { waitUntil: 'load' });
+await sleep(3500);
+
+console.log('tree links before hover:', await page.locator('.tree-link').count());
+// The drawer opens on left-edge mousemove.
+await page.mouse.move(400, 400);
+await page.mouse.move(2, 400);
+await sleep(1500);
+await page.mouse.move(6, 420);
+await sleep(2000);
+
+console.log('after edge hover:', await page.evaluate(() => JSON.stringify({
+  treeLinks: [...document.querySelectorAll('.tree-link')].map((a) => a.textContent.replace(/\s+/g, ' ').trim()).slice(0, 14),
+  drawerVisible: [...document.querySelectorAll('[class*=drawer], .sb, aside, nav')]
+    .filter((e) => e.offsetParent !== null && e.getBoundingClientRect().width > 100)
+    .map((e) => `${e.tagName.toLowerCase()}.${String(e.className).trim()} ${Math.round(e.getBoundingClientRect().width)}px`).slice(0, 6),
+}, null, 1)));
+
+await page.screenshot({ path: 'shots/probe-tree.png' });
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/probe-typeahead.mjs b/screencast/scenes/probe-typeahead.mjs
new file mode 100644
index 00000000..838366d1
--- /dev/null
+++ b/screencast/scenes/probe-typeahead.mjs
@@ -0,0 +1,54 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+import { field } from '../lib/constructors.mjs';
+import { ui } from '../lib/dom.mjs';
+import { switchDocumentMode } from '../lib/blocks.mjs';
+
+const { target, identity, ...a } = await resolve('/probe-scratch/');
+const TERMS = ['All products', 'All categories', 'All territories', 'All employees', 'All suppliers'];
+
+await runScene({
+  id: 'probe-typeahead', target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 810, deviceScaleFactor: 1 }),
+  async body({ page, cursor, target, shot }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForTimeout(8000);
+
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await page.waitForTimeout(6000);
+    const btn = ui(page).locator('button.create-action.add-constructor').filter({ hasText: 'Object' }).first();
+    console.log('  mode now:', page.url().slice(-40), '| add buttons:', await ui(page).locator('button.create-action.add-constructor').count());
+    if (!(await btn.count())) { console.log('no + Object button'); return; }
+    await cursor.click(btn);
+    await page.waitForTimeout(3000);
+
+    const value = field(page, 'Value', 'input:not([type=hidden]):visible');
+    console.log('\n  Value field:', await value.count());
+    if (!(await value.count())) return;
+
+    for (const term of TERMS) {
+      await value.click();
+      await page.keyboard.press('Meta+A');
+      await page.keyboard.press('Backspace');
+      await value.pressSequentially(term, { delay: 60 });
+      await page.waitForTimeout(3500);
+      const dump = await page.evaluate(() => {
+        const panel = [...document.querySelectorAll('.ac-cb-panel[role="listbox"]')].find((e) => e.offsetParent);
+        if (!panel) return { sel: '(panel hidden)', items: [], html: '' };
+        const kids = [...panel.children];
+        return {
+          sel: panel.className,
+          items: kids.slice(0, 5).map((e) => {
+            const lbl = e.querySelector('.ac-cb-item-lbl');
+            return `innerText=${JSON.stringify(e.innerText)} lbl=${JSON.stringify(lbl ? lbl.innerText : null)}`;
+          }),
+          html: kids[0] ? kids[0].outerHTML.slice(0, 260) : '',
+        };
+      });
+      console.log(`  "${term}" → ${dump.sel}\n      ${dump.items.join('\n      ') || '(no suggestions)'}`);
+      if (dump.html) console.log('      html:', dump.html);
+    }
+    await shot('typeahead');
+    // leave without saving
+    await page.keyboard.press('Escape');
+  },
+}, {});
diff --git a/screencast/scenes/probe-typequery.mjs b/screencast/scenes/probe-typequery.mjs
new file mode 100644
index 00000000..d4131073
--- /dev/null
+++ b/screencast/scenes/probe-typequery.mjs
@@ -0,0 +1,39 @@
+// Read-only: open Create ▸ SELECT on the compose page, type the query fast, read it
+// back, print the difference, leave without saving.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { create } from '../lib/constructors.mjs';
+import { ui } from '../lib/dom.mjs';
+const opts = await resolve('/supercut-compose/');
+const QUERY = `PREFIX schema: <https://schema.org/>
+
+SELECT ?region (COUNT(DISTINCT ?rep) AS ?reps)
+WHERE {
+GRAPH ?g {
+?rep schema:areaServed ?territory .
+}
+GRAPH ?h {
+?territory schema:containedInPlace ?place .
+}
+GRAPH ?i {
+?place schema:name ?region .
+}
+}
+GROUP BY ?region
+ORDER BY DESC(?reps)`;
+await runScene({ id: 'probe-typequery', target: opts.target + '?mode=' + encodeURIComponent('https://w3id.org/atomgraph/client#ReadMode'), identity: opts.identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.goto(opts.target + '?mode=' + encodeURIComponent('https://w3id.org/atomgraph/client#ReadMode'), { waitUntil: 'load' }); await sleep(3000);
+    const cs = await create(page, cursor, 'SELECT'); if (!cs.ok) throw new Error(cs.why);
+    const code = ui(page).locator('.CodeMirror').first(); await cursor.click(code); await sleep(400);
+    const lines = QUERY.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i]) await page.keyboard.type(lines[i], { delay: 14 });
+      if (i < lines.length - 1) { await sleep(160); if (await page.locator('.CodeMirror-hints:visible').count()) { await page.keyboard.press('Escape'); await sleep(120); } await page.keyboard.press('Enter'); }
+    }
+    await sleep(1200);
+    const got = await page.evaluate(() => document.querySelector('.ldh-pane.is-active .CodeMirror')?.CodeMirror?.getValue());
+    const flat = (t) => t.split('\n').map((l) => l.trim()).filter(Boolean);
+    const a = flat(QUERY), b = flat(got ?? '');
+    console.log('  same:', JSON.stringify(a) === JSON.stringify(b));
+    for (let i = 0; i < Math.max(a.length, b.length); i++) if (a[i] !== b[i]) console.log(`  line ${i}: want ${JSON.stringify(a[i])} got ${JSON.stringify(b[i])}`);
+  } });
diff --git a/screencast/scenes/probe-unesco.mjs b/screencast/scenes/probe-unesco.mjs
new file mode 100644
index 00000000..5a6643a6
--- /dev/null
+++ b/screencast/scenes/probe-unesco.mjs
@@ -0,0 +1,19 @@
+// Read-only: the UNESCO thesaurus's tree (drawer) and its parallax concept columns.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { openTree } from '../lib/nav.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+await runScene({ id: 'probe-unesco', target: base + '/', identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.goto(base + '/', { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 30_000 }); await sleep(4000);
+    console.log('  root blocks:', JSON.stringify(await page.locator('.ldh-pane.is-active h2, .ldh-pane.is-active h3').allTextContents()));
+    console.log('  parallax/tree-ish:', JSON.stringify(await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active [class*="parallax"], .ldh-pane.is-active [class*="column"], .ldh-pane.is-active [class*="tree"], .ldh-pane.is-active [class*="skos"], .ldh-pane.is-active .ldh-block[data-for-class]')].map((e) => e.tagName + '.' + e.className.slice(0, 50)).filter((v, i, a) => a.indexOf(v) === i).slice(0, 12))));
+    await openTree(page, cursor);
+    console.log('  drawer tree top:', JSON.stringify((await page.locator('.ldh-pane.is-active .tree-link, .left-sidebar a').allTextContents()).map((t) => t.trim()).filter(Boolean).slice(0, 12)));
+    for (const p of ['/concepts/', '/schemes/']) {
+      await page.goto(base + p, { waitUntil: 'load' }).catch(() => {});
+      await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 20_000 }).catch(() => {}); await sleep(3500);
+      console.log(`  ${p}:`, await page.title(), JSON.stringify(await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active [class*="parallax"], .ldh-pane.is-active [class*="column"], .ldh-pane.is-active [class*="tree"]')].map((e) => e.tagName + '.' + e.className.slice(0, 60)).filter((v, i, a) => a.indexOf(v) === i).slice(0, 8))));
+    }
+  } });
diff --git a/screencast/scenes/probe-viewclass.mjs b/screencast/scenes/probe-viewclass.mjs
new file mode 100644
index 00000000..f719d534
--- /dev/null
+++ b/screencast/scenes/probe-viewclass.mjs
@@ -0,0 +1,31 @@
+// Not a scene. What the view blocks actually carry: data-for-class, data-inverse,
+// the add-instance button, and the bound query — Northwind vs the UNESCO page that
+// showed a Create button in scene 04.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { identity } = opts;
+const PAGES = [
+  'https://northwind-traders.demo.localhost/territories/75234/',
+  'https://northwind-traders.demo.localhost/territories/78759/',
+  'https://northwind-traders.demo.localhost/employees/2/',
+  'https://northwind-traders.demo.localhost/categories/1/',
+  'https://northwind-traders.demo.localhost/suppliers/1/',
+  'https://northwind-traders.demo.localhost/customers/ALFKI/',
+  'https://northwind-traders.demo.localhost/regions/4/',
+];
+await runScene({
+  id: 'probe-viewclass', target: PAGES[0], identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    for (const p of PAGES) {
+      await page.goto(p, { waitUntil: 'load' });
+      await page.waitForSelector('.ldh-block, .ldh-view-toolbar', { timeout: 25_000 }).catch(() => {});
+      await sleep(5000);
+      console.log(`  ${p.replace('https://','')}`);
+      console.log(await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active div.block[about]')]
+        .filter((b) => b.querySelector('.ldh-view-toolbar') || b.dataset.forClass || b.dataset.inverse)
+        .map((b) => `    view=${(b.getAttribute('about')||'').split('/').pop().slice(0,40)} forClass=${b.dataset.forClass ?? '-'} inverse=${b.dataset.inverse ?? '-'} addInstance=${!!b.querySelector('button.add-instance')} title=${(b.querySelector('h2,h3,.ldh-res-head')?.innerText||'').trim().slice(0,28)}`)
+        .join('\n') || '    (no view blocks)'));
+    }
+  },
+}, {});
diff --git a/screencast/scenes/probe-viewcount.mjs b/screencast/scenes/probe-viewcount.mjs
new file mode 100644
index 00000000..dbcff5eb
--- /dev/null
+++ b/screencast/scenes/probe-viewcount.mjs
@@ -0,0 +1,14 @@
+// Read-only: what count a derived view shows right now, twice.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+await runScene({ id: 'probe-viewcount', target: base + '/customers/GOURL/', identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    for (let i = 0; i < 2; i++) {
+      await page.goto(base + '/customers/GOURL/', { waitUntil: 'load' });
+      const v = page.locator('.ldh-pane.is-active .ldh-block[data-for-class]').filter({ hasText: 'Orders from this customer' }).first();
+      await v.locator('.ldh-view-toolbar .count b').first().waitFor({ state: 'visible', timeout: 25_000 }).catch(() => {});
+      await sleep(3000);
+      console.log(`  load ${i + 1}: Orders from this customer =`, (await v.locator('.ldh-view-toolbar .count b').first().textContent().catch(() => '?')).trim());
+    }
+  } });
diff --git a/screencast/scenes/probe-viewform.mjs b/screencast/scenes/probe-viewform.mjs
new file mode 100644
index 00000000..8ca01b9d
--- /dev/null
+++ b/screencast/scenes/probe-viewform.mjs
@@ -0,0 +1,32 @@
+import { runScene, resolve, geometryFrom } from '../lib/harness.mjs';
+import { switchDocumentMode } from '../lib/blocks.mjs';
+import { create } from '../lib/constructors.mjs';
+
+const { target, identity, ...a } = await resolve('/probe-view/');
+
+await runScene({
+  id: 'probe-viewform', target, identity,
+  geometry: geometryFrom(a, { width: 1440, height: 810, deviceScaleFactor: 1 }),
+  async body({ page, cursor, target, shot }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForTimeout(7000);
+    await switchDocumentMode(page, cursor, 'read-mode');
+    await page.waitForTimeout(5000);
+
+    const c = await create(page, cursor, 'View');
+    console.log('\n  create View:', JSON.stringify(c));
+    await page.waitForTimeout(3000);
+
+    console.log('  form prop groups:');
+    console.log(await page.evaluate(() => {
+      const form = [...document.querySelectorAll('form')].find((f) => f.querySelector('button.btn-save') && f.offsetParent);
+      if (!form) return '    (no form)';
+      return [...form.querySelectorAll('.ldh-prop-group')].map((g, i) => {
+        const inputs = [...g.querySelectorAll('input:not([type=hidden]), select, textarea')]
+          .map((x) => `${x.tagName.toLowerCase()}[name=${x.name}]`);
+        return `    [${i}] text=${JSON.stringify(g.innerText.replace(/\s+/g, ' ').trim().slice(0, 44))}\n        inputs=${inputs.join(', ') || '(none)'}\n        html=${g.outerHTML.slice(0, 180)}`;
+      }).join('\n');
+    }));
+    await shot('viewform');
+  },
+}, {});
diff --git a/screencast/scenes/probe-views.mjs b/screencast/scenes/probe-views.mjs
new file mode 100644
index 00000000..408e518c
--- /dev/null
+++ b/screencast/scenes/probe-views.mjs
@@ -0,0 +1,19 @@
+// Read-only: which derived views do these pages render, and how many?
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+const opts = await resolve('/');
+const { base, identity } = opts;
+const PAGES = ['/categories/1/', '/territories/72716/', '/employees/2/', '/employees/5/'];
+await runScene({ id: 'probe-views', target: base + PAGES[0], identity, geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page }) {
+    for (const p of PAGES) {
+      await page.goto(base + p, { waitUntil: 'load' });
+      await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 25_000 }).catch(() => {});
+      await sleep(7000);
+      const views = await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block[data-for-class]')].map((b) => ({
+        title: b.querySelector('h2, h3, .ldh-block-title')?.textContent?.replace(/\s+/g, ' ').trim().slice(0, 40),
+        count: b.querySelector('.ldh-view-toolbar .count b')?.textContent?.trim() ?? null,
+        create: !!b.querySelector('button.add-instance'),
+      })));
+      console.log(`  ${p}: ${views.length} derived view(s)`, JSON.stringify(views));
+    }
+  } });
diff --git a/screencast/scenes/probe-wayback.mjs b/screencast/scenes/probe-wayback.mjs
new file mode 100644
index 00000000..eb70eb55
--- /dev/null
+++ b/screencast/scenes/probe-wayback.mjs
@@ -0,0 +1,55 @@
+// Not a scene. Which visible route reaches a page created a minute ago?
+// Creates one, navigates away by the drawer search, then tests: app tabs, search,
+// the drawer tree, and Root's children list. Removes the page afterwards.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { createItem } from '../lib/constructors.mjs';
+import { deleteByTitle } from '../lib/fixture.mjs';
+import { crumbGo, searchGo, openTree } from '../lib/nav.mjs';
+import { ui } from '../lib/dom.mjs';
+
+const opts = await resolve('/');
+const { target, identity, base } = opts;
+const TITLE = 'Wayback probe page';
+
+await runScene({
+  id: 'probe-wayback', target, identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.goto(target, { waitUntil: 'load' });
+    await sleep(5000);
+    const made = await createItem(page, cursor, TITLE);
+    console.log('  created:', JSON.stringify(made));
+    if (!made.ok) return;
+    await sleep(1500);
+
+    const away = await searchGo(page, cursor, '11074', { type: 'Order' });
+    console.log('  navigated away:', JSON.stringify(away));
+    await sleep(2500);
+
+    console.log('  app tabs:', await page.evaluate(() => JSON.stringify(
+      [...document.querySelectorAll('.ldh-tab, [role="tab"], .ldh-tabs a, .ldh-tabs button, .ldh-tabbar a, .ldh-tabbar button')]
+        .filter((e) => e.offsetParent !== null).map((e) => e.innerText.replace(/\s+/g, ' ').trim().slice(0, 30)))));
+
+    const s = await searchGo(page, cursor, TITLE, { type: 'Item' });
+    console.log('  search for title:', JSON.stringify(s));
+    await sleep(1500);
+    await page.keyboard.press('Escape').catch(() => {});
+
+    const treeOpen = await openTree(page, cursor);
+    console.log('  tree open:', treeOpen, '| entries containing title:', await page.evaluate((t) => JSON.stringify(
+      [...document.querySelectorAll('.tree-link')].filter((e) => e.innerText.includes(t))
+        .map((e) => ({ visible: e.offsetParent !== null, text: e.innerText.replace(/\s+/g, ' ').trim().slice(0, 40) }))), TITLE),
+      '| total tree links:', await page.locator('.tree-link').count());
+    await page.keyboard.press('Escape').catch(() => {});
+    await sleep(800);
+
+    const up = await crumbGo(page, cursor, 'Root');
+    console.log('  breadcrumb Root:', JSON.stringify(up));
+    await sleep(4000);
+    console.log('  root children list has title link:', await ui(page).locator('a').filter({ hasText: TITLE }).count(),
+      '| pager:', await page.evaluate(() => JSON.stringify([...document.querySelectorAll('.ldh-pane.is-active .count b, .ldh-pane.is-active .pager-next')].map((e) => e.innerText.trim().slice(0, 20)))));
+
+    const gone = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: TITLE });
+    console.log('  cleanup:', JSON.stringify(gone));
+  },
+}, {});
diff --git a/screencast/scenes/probe-zoom2x.mjs b/screencast/scenes/probe-zoom2x.mjs
new file mode 100644
index 00000000..a8bf1ae6
--- /dev/null
+++ b/screencast/scenes/probe-zoom2x.mjs
@@ -0,0 +1,22 @@
+// Read-only: does a 2880×1800 viewport with the document zoomed 200 % still drive?
+// (The video is the viewport in CSS pixels, so this is how 2× footage is had.)
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { ui } from '../lib/dom.mjs';
+const opts = await resolve('/employees/2/');
+const { identity, target } = opts;
+await runScene({ id: 'probe-zoom2x', target, identity, geometry: geometryFrom(opts, { width: 2880, height: 1800, deviceScaleFactor: 1 }),
+  async body({ page, cursor }) {
+    await page.addInitScript(() => { document.addEventListener('DOMContentLoaded', () => { document.documentElement.style.zoom = '2'; }); });
+    await page.goto(target, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active button.add-instance', { timeout: 30_000 }); await sleep(3000);
+    const btn = ui(page).locator('.ldh-block[data-for-class]').filter({ hasText: 'Direct reports' }).first().locator('button.add-instance').first();
+    await btn.scrollIntoViewIfNeeded();
+    const bb = await btn.boundingBox();
+    console.log('  create button box:', JSON.stringify(bb), 'zoom:', await page.evaluate(() => document.documentElement.style.zoom), 'innerWidth:', await page.evaluate(() => innerWidth));
+    await cursor.click(btn);
+    const pm = page.locator('.modal-constructor:visible, .ac-modal:visible').last();
+    const ok = await pm.waitFor({ state: 'visible', timeout: 15_000 }).then(() => true, () => false);
+    console.log('  modal opened by cursor click:', ok, ok ? JSON.stringify(await pm.boundingBox()) : '');
+    await page.screenshot({ path: '/private/tmp/claude-501/-Users-martynas-WebRoot-LinkedDataHub/5542c912-918c-4be9-8864-ed41b61b33fa/scratchpad/sc/zoom2x.png' });
+    await page.keyboard.press('Escape');
+  } });
diff --git a/screencast/scenes/probe.mjs b/screencast/scenes/probe.mjs
new file mode 100644
index 00000000..39aee9a7
--- /dev/null
+++ b/screencast/scenes/probe.mjs
@@ -0,0 +1,103 @@
+// Not a scene. Dumps the chrome a scene needs to drive, so selectors come from
+// the running app rather than from memory.
+//   node scenes/probe.mjs --path /customers/ [--base URL] [--cert-file P] [--anonymous]
+import { chromium } from 'playwright';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { ROOT, resolve, sleep } from '../lib/harness.mjs';
+
+const argv = process.argv.slice(2);
+const where = argv.includes('--path') ? argv[argv.indexOf('--path') + 1] : '/customers/';
+const { base, target, identity } = await resolve(where);
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  ignoreHTTPSErrors: true,
+  viewport: { width: 1920, height: 1080 },
+  ...(identity ? { clientCertificates: identity } : {}),
+});
+await context.addCookies([
+  { name: 'LinkedDataHub.first-time-message', value: 'true', domain: new URL(base).hostname, path: '/' },
+]);
+const page = await context.newPage();
+
+const errors = [];
+page.on('pageerror', (e) => errors.push(e.message));
+
+console.log(`probing ${target}`);
+await page.goto(target, { waitUntil: 'load' });
+await sleep(6000); // client-side rendering finishes well after load
+
+const report = await page.evaluate(() => {
+  const out = {};
+  const brief = (el) => ({
+    tag: el.tagName.toLowerCase(),
+    cls: el.getAttribute('class') ?? '',
+    id: el.id || undefined,
+    text: (el.textContent ?? '').trim().slice(0, 60) || undefined,
+    href: el.getAttribute('href') ?? undefined,
+    title: el.getAttribute('title') ?? undefined,
+  });
+
+  out.title = document.title;
+  out.url = location.href;
+
+  // every class token in use, most frequent first — tells us the vocabulary
+  const freq = new Map();
+  for (const el of document.querySelectorAll('*')) {
+    for (const c of el.classList) freq.set(c, (freq.get(c) ?? 0) + 1);
+  }
+  out.classes = [...freq.entries()].sort((a, b) => b[1] - a[1]).slice(0, 70)
+    .map(([c, n]) => `${c}(${n})`);
+
+  const grab = (sel) => [...document.querySelectorAll(sel)].slice(0, 12).map(brief);
+
+  out.buttons = grab('button');
+  out.toolbarish = grab('[class*="toolbar"], [class*="control"], [class*="mode"]');
+  out.anchorsWithMode = [...document.querySelectorAll('a[href*="mode="]')]
+    .slice(0, 12).map((a) => ({ text: a.textContent.trim().slice(0, 30), href: a.getAttribute('href') }));
+  out.selects = [...document.querySelectorAll('select')].slice(0, 8).map((s) => ({
+    cls: s.className,
+    name: s.name || undefined,
+    options: [...s.options].slice(0, 10).map((o) => o.textContent.trim()),
+  }));
+  out.inputs = [...document.querySelectorAll('input')].slice(0, 12).map((i) => ({
+    cls: i.className, type: i.type, name: i.name || undefined, placeholder: i.placeholder || undefined,
+  }));
+  out.blocks = grab('[class*="block"]');
+  out.headings = [...document.querySelectorAll('h1, h2, h3')].slice(0, 10)
+    .map((h) => `${h.tagName}: ${h.textContent.trim().slice(0, 60)}`);
+
+  // Subtrees a scene has to drive, shallow-rendered so the shape is legible.
+  const tree = (el, depth = 0, max = 3) => {
+    if (depth > max) return null;
+    const kids = [...el.children].slice(0, 10).map((c) => tree(c, depth + 1, max)).filter(Boolean);
+    const self = `${el.tagName.toLowerCase()}${el.className && typeof el.className === 'string' ? '.' + el.className.trim().split(/\s+/).join('.') : ''}`;
+    const txt = [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.textContent.trim()).join(' ').slice(0, 40);
+    return kids.length ? { el: self, text: txt || undefined, kids } : { el: self, text: txt || undefined };
+  };
+  out.deep = {};
+  for (const sel of ['.ldh-view-toolbar', '.modes-pop.view-mode-list', '.ldh-block-row', '.ldh-pivot-pill']) {
+    const el = document.querySelector(sel);
+    out.deep[sel] = el ? tree(el) : null;
+  }
+  out.blockTitles = [...document.querySelectorAll('.ldh-block')].map((b) => ({
+    cls: b.className,
+    about: b.getAttribute('about') ?? undefined,
+    title: b.querySelector('h2, h3, .ttl')?.textContent.trim().slice(0, 50),
+  }));
+  return out;
+});
+
+report.pageErrors = errors;
+
+const outFile = path.join(ROOT, 'tracks', `probe${where.replace(/[\/:]/g, '_')}.json`);
+await fs.mkdir(path.dirname(outFile), { recursive: true });
+await fs.writeFile(outFile, JSON.stringify(report, null, 2) + '\n');
+await page.screenshot({ path: outFile.replace(/\.json$/, '.png'), fullPage: false });
+
+console.log(JSON.stringify(report, null, 2));
+console.log(`\nwrote ${outFile}`);
+
+await context.close();
+await browser.close();
diff --git a/screencast/scenes/retired/01-who-carries-the-load.mjs b/screencast/scenes/retired/01-who-carries-the-load.mjs
new file mode 100644
index 00000000..e4202873
--- /dev/null
+++ b/screencast/scenes/retired/01-who-carries-the-load.mjs
@@ -0,0 +1,239 @@
+// "Who is carrying the load?"
+//
+// Opens on the employee grid — nine photographs, already rendered. That is the
+// strongest frame this page produces and it is also where the question honestly
+// starts, so nothing is lifted or trimmed to put it first.
+//
+// The page already answers who SELLS most: it carries a Sales by employee chart.
+// What it does not answer is who COVERS most, and the two turn out to run opposite
+// ways — the three reps with the most ground booked the fewest orders. Verified
+// against the instance before scripting:
+//
+//   King 10 territories / 72 orders      Callahan  4 / 104
+//   Buchanan 7 / 43                      Leverling 4 / 127
+//   Dodsworth 7 / 43                     Peacock   3 / 156
+//   Fuller 7 / 96                        Davolio   2 / 123
+//   Suyama 5 / 67
+//
+// One SELECT carries both counts, so one chart shows the inversion — two series
+// against the same axis, rather than two charts the viewer has to hold side by side.
+//
+//   make scene SCENE=01-who-carries-the-load BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle } from '../lib/fixture.mjs';
+import { crumbGo } from '../lib/nav.mjs';
+import { addProse, addObject, switchDocumentMode } from '../lib/blocks.mjs';
+import { create, createItem, typeQuery, fill, save, configureChart } from '../lib/constructors.mjs';
+import { scrollThrough, glideTo } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OPENS_ON = `${base}/employees/`;
+
+// Unindented, because the editor supplies the indentation itself.
+//
+// COUNT(DISTINCT …) over two OPTIONALs rather than two queries: without DISTINCT the
+// two branches cross-multiply and every count is the product. Read back against the
+// endpoint before scripting — the nine rows above are what this returns.
+//
+// The axis is the family NAME and not the employee URI: a chart axis bound to a
+// URI-valued variable renders raw markup (FINDINGS.md #3).
+const QUERY = `PREFIX schema: <https://schema.org/>
+
+SELECT ?rep (COUNT(DISTINCT ?territory) AS ?territories) (COUNT(DISTINCT ?order) AS ?orders)
+WHERE {
+GRAPH ?g {
+?employee schema:familyName ?rep .
+}
+OPTIONAL {
+GRAPH ?h {
+?employee schema:areaServed ?territory .
+}
+}
+OPTIONAL {
+GRAPH ?i {
+?order schema:broker ?employee .
+}
+}
+}
+GROUP BY ?rep
+ORDER BY DESC(?territories)`;
+
+const TITLE = 'Who carries the load';
+// Last take's write-up document is removed off camera, by title — the document is
+// created ON camera below, so its path is a UUID and there is no slug to reset by.
+const gone = await deleteByTitle({
+  ldh: opts.ldh, base, certFile: opts.certFile,
+  certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile,
+  title: TITLE,
+});
+console.log(`cleanup: removed ${gone.removed.length} earlier "${TITLE}"`);
+let url = null;
+
+await runScene({
+  id: '01-who-carries-the-load',
+  target: OPENS_ON,
+  warm: OPENS_ON,
+  identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks, base }) {
+    // ── the grid, already rendered ──────────────────────────────────────────
+    // The beat fires the moment the cards have photographs on them, not after a
+    // dwell — that is what makes the head trim a measurement rather than a guess.
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    // Counting the photographs, not waiting for "an img": the navbar and the chart
+    // block below both satisfy a bare img selector, and an earlier take opened on an
+    // empty placeholder because one of them matched at 1.7s. An employee photo is a
+    // content-addressed upload, so /uploads/ is what identifies it, and nine of them
+    // are what "the grid has rendered" means here — and `complete &&
+    // naturalWidth` rather than presence, because the <img> elements exist in the DOM
+    // a beat before they have painted, which is how a take opened on nine white boxes.
+    await page.waitForFunction(
+      () => [...document.querySelectorAll('.ldh-block-body img[src*="/uploads/"]')]
+        .filter((i) => i.complete && i.naturalWidth > 0).length >= 9,
+      { timeout: 30_000 },
+    ).catch(() => {});
+    await marks.beat('team', 'nine people, with their photographs');
+    await sleep(2200);
+
+    // ── what the page already answers ───────────────────────────────────────
+    // Sales by employee is on this page. It is the right chart for the wrong
+    // question, which is the whole reason there is a scene here.
+    await glideTo(page, 1400, 1400);
+    await sleep(1600);
+    await marks.beat('sales-chart', 'the chart it already carries: revenue per rep');
+    await sleep(900);
+
+    // ── the question the page does not answer ───────────────────────────────
+    // Scrolled back, not reloaded. Re-navigating to the page you are already on is a
+    // gesture nobody makes, and on camera it reads as the take having gone wrong.
+    await glideTo(page, 0, 1100);
+    await sleep(900);
+    // details.ldh-pivot-bar is collapsed by default and a closed <details> renders no
+    // content at all, so the summary is opened first — and only if it is not already.
+    const bar = page.locator('details.ldh-pivot-bar').first();
+    let pivoted = false;
+    if (await bar.count()) {
+      const summary = bar.locator('summary').first();
+      await summary.scrollIntoViewIfNeeded();
+      if (!(await bar.evaluate((e) => e.open))) {
+        await cursor.click(summary);
+        await sleep(600);
+      }
+      const pill = page.locator('.ldh-pivot-pill:visible').filter({ hasText: 'Territory' }).first();
+      if (await pill.count()) {
+        await cursor.click(pill);
+        await sleep(3600);
+        pivoted = true;
+      }
+    }
+    const count = (await page.locator('.ldh-view-toolbar .right .count b').first()
+      .textContent().catch(() => '?')).trim();
+    await marks.beat('pivot', pivoted ? `the ground they cover: ${count}` : 'Territory not offered by the pivot bar');
+    await sleep(1200);
+
+    // ── say why, before doing anything ──────────────────────────────────────
+    // The question goes down FIRST. Everything after this is Properties mode and a
+    // query editor, and a viewer who has not been told what is being asked is
+    // watching SPARQL get typed for no stated reason. The blank page costs two
+    // seconds here, in the middle, where it costs nothing.
+    // No teleport. The viewer watches the route: up to Root by breadcrumb, then
+    // Create ▸ Item, and the page this finding is written on comes into existence
+    // where they can see it come from.
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+
+    const p0 = await addProse(page, cursor, type,
+      'The team page ranks nine reps by revenue booked. It does not record how many territories each rep covers. This page compares the two.');
+    await marks.beat('question', p0.ok ? 'the question, written down' : p0.why);
+    // Held before the mode switcher opens over it, and long enough that pacing's
+    // threefold speed-up of a static stretch still leaves a sentence to read.
+    await sleep(3200);
+
+    // ── write the query ─────────────────────────────────────────────────────
+    // Properties, because the Create menu is mode-gated: ContentMode offers only the
+    // two block types.
+    await switchDocumentMode(page, cursor, 'read-mode');
+    await sleep(600);
+
+    const cs = await create(page, cursor, 'SELECT');
+    await marks.beat('new-select', cs.ok ? 'a SELECT, created on this document' : cs.why);
+    await sleep(400);
+
+    if (cs.ok) {
+      const q = await typeQuery(page, cursor, QUERY);
+      await marks.beat('query', q.ok ? `both counts in one question — ${q.lines} lines${q.verified ? ', read back and matching' : ''}` : q.why);
+      await sleep(700);
+      const t = await fill(page, cursor, 'Title', 'Territories per rep');
+      await marks.beat('title', t.ok ? 'Territories per rep' : t.why);
+      const s = await save(page, cursor);
+      await marks.beat('save-select', s.ok ? 'saved — the question is a resource now' : s.why);
+      await sleep(900);
+    }
+
+    // ── turn it into a chart ────────────────────────────────────────────────
+    // GROUP BY and COUNT collapse rows into summaries with no resource behind them,
+    // so every affordance a view exists for would be dead. Aggregates are chart
+    // material — and the chart needs no constructor of its own: the saved query
+    // block's own Create raises the form already bound to it.
+    const queryRow = page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'Territories per rep' }).first();
+
+    // Both counts are series; the rep's name is the axis. Series first, then the type —
+    // see configureChart, which is where the reason is written down.
+    const cfg = await configureChart(page, cursor, queryRow, {
+      type: 'Bar chart',
+      category: 'rep',
+      series: ['territories', 'orders'],
+    });
+    await marks.beat('chart-pane', cfg.ok ? 'territories and orders on the same axis' : cfg.why);
+    await sleep(700);
+
+    const createChart = queryRow.locator('button.ac-btn.in-primary').filter({ hasText: /^Create$/ }).first();
+    const raised = await createChart.count() > 0;
+    if (raised) {
+      await createChart.scrollIntoViewIfNeeded();
+      await cursor.click(createChart);
+      await sleep(2400);
+      const tc = await fill(page, cursor, 'Title', 'Ground against orders');
+      await marks.beat('new-chart', tc.ok ? 'Create, from the query’s own action bar — already bound to it' : tc.why);
+      const s2 = await save(page, cursor);
+      await marks.beat('save-chart', s2.ok ? 'saved — a chart anyone can render' : s2.why);
+      // Straight on to Content, with no dwell. The pane behind this has reset to its
+      // invalid default and is showing a red banner (FINDINGS.md #9): the block offers
+      // no tab to switch away to, and scrolling to escape it only keeps it in frame
+      // longer — measured, 0.75s became 1.0s. So the scene does not linger, and the
+      // remaining fraction of a second is the product's bug rather than the scene's.
+      await sleep(250);
+    } else {
+      await marks.beat('new-chart', 'no Create on the query block');
+    }
+
+    // ── write it up ─────────────────────────────────────────────────────────
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(700);
+
+    const o1 = await addObject(page, cursor, type, null, { label: 'Ground against orders', kind: 'Result set chart' });
+    await marks.beat('embed', o1.ok ? 'the chart, embedded' : o1.why);
+    await sleep(1000);
+
+    const p1 = await addProse(page, cursor, type,
+      'King covers ten territories and booked seventy-two orders. Peacock covers three and booked a hundred and fifty-six. The reps with the most territories book the fewest orders.');
+    await marks.beat('note', p1.ok ? undefined : p1.why);
+    await sleep(700);
+
+    const scrolled = await scrollThrough(page, { duration: 5600 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/retired/03-where-the-orders-go.mjs b/screencast/scenes/retired/03-where-the-orders-go.mjs
new file mode 100644
index 00000000..23de160c
--- /dev/null
+++ b/screencast/scenes/retired/03-where-the-orders-go.mjs
@@ -0,0 +1,209 @@
+// "Where do the orders actually go?"
+//
+// Opens on the dashboard the root document already carries — Monthly sales trend,
+// Revenue by country, the territory map. A rendered chart is the first frame, and it
+// is also the honest first step: you start a question like this from the numbers you
+// already have.
+//
+// Revenue by country answers at country granularity. The sales territories are US
+// cities, so the two never meet, and nothing on the page joins them. Verified against
+// the instance before scripting:
+//
+//   122 US orders. 18 of them land in a city Northwind has a territory for —
+//   Seattle 14, San Francisco 4. The other 104 go to Boise, Albuquerque, Portland,
+//   Eugene, Anchorage, Lander … none of which is a territory.
+//
+// The reps are in the East; the orders are in the West.
+//
+//   make scene SCENE=03-where-the-orders-go BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle } from '../lib/fixture.mjs';
+import { addProse, addObject, switchDocumentMode } from '../lib/blocks.mjs';
+import { create, createItem, typeQuery, fill, save, configureChart } from '../lib/constructors.mjs';
+import { scrollThrough, glideTo } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OPENS_ON = `${base}/`;
+
+// Unindented: the editor supplies the indentation itself.
+//
+// The axis is the city NAME, a literal — a chart axis bound to a URI-valued variable
+// renders raw markup (FINDINGS.md #3).
+const BY_CITY = `PREFIX schema: <https://schema.org/>
+
+SELECT ?city (COUNT(DISTINCT ?order) AS ?orders)
+WHERE {
+GRAPH ?g {
+?order schema:orderDelivery ?delivery .
+}
+GRAPH ?h {
+?delivery schema:deliveryAddress ?address .
+}
+GRAPH ?i {
+?address schema:addressLocality ?city ;
+schema:addressCountry "USA" .
+}
+}
+GROUP BY ?city
+ORDER BY DESC(?orders)`;
+
+// The join the dashboard cannot make: a delivery city against the territory list.
+// Same literal on both sides, so the match is the city name itself.
+const COVERED = `PREFIX schema: <https://schema.org/>
+
+SELECT ?city (COUNT(DISTINCT ?order) AS ?orders)
+WHERE {
+GRAPH ?g {
+?order schema:orderDelivery ?delivery .
+}
+GRAPH ?h {
+?delivery schema:deliveryAddress ?address .
+}
+GRAPH ?i {
+?address schema:addressLocality ?city ;
+schema:addressCountry "USA" .
+}
+GRAPH ?j {
+?territory a schema:City ;
+schema:name ?city .
+}
+}
+GROUP BY ?city
+ORDER BY DESC(?orders)`;
+
+const TITLE = 'Where the orders land';
+// Last take's write-up document is removed off camera, by title — the document is
+// created ON camera below, so its path is a UUID and there is no slug to reset by.
+const gone = await deleteByTitle({
+  ldh: opts.ldh, base, certFile: opts.certFile,
+  certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile,
+  title: TITLE,
+});
+console.log(`cleanup: removed ${gone.removed.length} earlier "${TITLE}"`);
+let url = null;
+
+await runScene({
+  id: '03-where-the-orders-go',
+  target: OPENS_ON,
+  warm: OPENS_ON,
+  identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks, base }) {
+    // ── the numbers we already have ─────────────────────────────────────────
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForSelector('.ldh-block-body svg, .ldh-block-body canvas', { timeout: 25_000 }).catch(() => {});
+    await marks.beat('dashboard', 'the dashboard the home page already carries');
+    await sleep(2400);
+
+    // Revenue by country: the right answer to a coarser question.
+    await glideTo(page, 900, 1500);
+    await sleep(1800);
+    await marks.beat('by-country', 'revenue by country — USA is one bar');
+    await sleep(1200);
+
+    // ── the question it does not answer ─────────────────────────────────────
+    // The question goes down first: what follows is two query editors, and a viewer
+    // who has not been told what is being asked is watching SPARQL for no reason.
+    // Already at Root, so the write-up page is one Create ▸ Item away — no navigation
+    // needed and none faked.
+    await glideTo(page, 0, 900);
+    await sleep(500);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+
+    const p1 = await addProse(page, cursor, type,
+      'The dashboard reports revenue by country, and the United States is one bar on it. The sales territories are individual cities, so a country total cannot show whether orders arrive where the reps are. This page counts the US orders by city.');
+    await marks.beat('question', p1.ok ? 'why the dashboard cannot answer this' : p1.why);
+    await sleep(700);
+
+    await switchDocumentMode(page, cursor, 'read-mode');
+    await sleep(600);
+
+    const cs = await create(page, cursor, 'SELECT');
+    await marks.beat('new-select', cs.ok ? 'a SELECT, created on this document' : cs.why);
+    await sleep(400);
+
+    if (cs.ok) {
+      const q = await typeQuery(page, cursor, BY_CITY);
+      await marks.beat('query', q.ok ? `US deliveries, city by city — ${q.lines} lines${q.verified ? ', read back and matching' : ''}` : q.why);
+      await sleep(700);
+      const t = await fill(page, cursor, 'Title', 'US orders by city');
+      await marks.beat('title', t.ok ? 'US orders by city' : t.why);
+      const s = await save(page, cursor);
+      await marks.beat('save-select', s.ok ? 'saved' : s.why);
+      await sleep(900);
+    }
+
+    // ── as a chart ──────────────────────────────────────────────────────────
+    // COUNT and GROUP BY collapse rows into summaries with nothing to open, facet or
+    // pivot, so this is chart material rather than view material. The chart is raised
+    // from the query block's own action bar, already bound.
+    const queryRow = page.locator('.ldh-pane.is-active .ldh-block-row').filter({ hasText: 'US orders by city' }).first();
+    // Series before type: the pane opens with ?city selected as a series as well as the
+    // category, which draws the city twice and then errors once the type is a chart.
+    const cfg = await configureChart(page, cursor, queryRow, {
+      type: 'Bar chart',
+      category: 'city',
+      series: ['orders'],
+    });
+    await marks.beat('chart-pane', cfg.ok ? 'Boise, Albuquerque, Portland — the west coast' : cfg.why);
+    await sleep(800);
+
+    const createChart = queryRow.locator('button.ac-btn.in-primary').filter({ hasText: /^Create$/ }).first();
+    if (await createChart.count()) {
+      await createChart.scrollIntoViewIfNeeded();
+      await cursor.click(createChart);
+      await sleep(2400);
+      await fill(page, cursor, 'Title', 'US orders by city');
+      const s2 = await save(page, cursor);
+      await marks.beat('save-chart', s2.ok ? 'saved — a chart anyone can render' : s2.why);
+      // Straight on to Content, with no dwell. The pane behind this has reset to its
+      // invalid default and is showing a red banner (FINDINGS.md #9): the block offers
+      // no tab to switch away to, and scrolling to escape it only keeps it in frame
+      // longer — measured, 0.75s became 1.0s. So the scene does not linger, and the
+      // remaining fraction of a second is the product's bug rather than the scene's.
+      await sleep(250);
+    } else {
+      await marks.beat('save-chart', 'no Create on the query block');
+    }
+
+    // ── the join nothing on the dashboard makes ─────────────────────────────
+    const cs2 = await create(page, cursor, 'SELECT');
+    if (cs2.ok) {
+      const q2 = await typeQuery(page, cursor, COVERED);
+      await marks.beat('join', q2.ok ? 'the same deliveries, joined to the territory list' : q2.why);
+      await sleep(700);
+      await fill(page, cursor, 'Title', 'Orders landing in a territory');
+      const s3 = await save(page, cursor);
+      await marks.beat('covered', s3.ok ? 'two cities answer: Seattle and San Francisco' : s3.why);
+      await sleep(1100);
+    }
+
+    // ── write it up ─────────────────────────────────────────────────────────
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(700);
+
+    const o1 = await addObject(page, cursor, type, null, { label: 'US orders by city', kind: 'Result set chart' });
+    await marks.beat('embed', o1.ok ? 'the chart, embedded' : o1.why);
+    await sleep(1200);
+
+    const p2 = await addProse(page, cursor, type,
+      'A hundred and twenty-two orders ship to the United States. Eighteen of them arrive in a city Northwind has a territory for: Seattle and San Francisco. The other hundred and four arrive where no rep is assigned.');
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(700);
+
+    const scrolled = await scrollThrough(page, { duration: 5600 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/retired/05-what-an-order-touches.mjs b/screencast/scenes/retired/05-what-an-order-touches.mjs
new file mode 100644
index 00000000..b036304b
--- /dev/null
+++ b/screencast/scenes/retired/05-what-an-order-touches.mjs
@@ -0,0 +1,204 @@
+// "What does one order touch?"
+//
+// Opens on the order already in Graph mode — 28 nodes and 52 links on the dark canvas,
+// which is the strongest single frame the product produces. That is a bookmark, not a
+// synthesised URL: the layout mode lives in the address, so a document saved in Graph
+// mode reopens in Graph mode, and RULES.md's one exception is the scene's own starting
+// document. Every other mode change in the scene is a click on the switcher.
+//
+// An order is a transaction with five parties: the customer, the sales rep who booked
+// it, the shipper, the products, the delivery. No table shows that shape — a table
+// shows one row of it. The graph does, and double-clicking a node expands it along
+// the DATA rather than the document, so the neighbours that arrive come from other
+// documents entirely.
+//
+// This is the question the graph beat never had. Every earlier use of it was a tour:
+// a control exercised because it existed, over a hairball nobody could place.
+//
+// Measured before scripting on a sibling order: the document opens as tens of nodes
+// and links, a third of them belonging to other documents; one expansion added 6
+// nodes and 13 links, and loaded-uris went from 0 to 1.
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { addProse, addObject, switchDocumentMode } from '../lib/blocks.mjs';
+import { deleteByTitle } from '../lib/fixture.mjs';
+import { createItem } from '../lib/constructors.mjs';
+import { crumbGo, searchGo, listGo } from '../lib/nav.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+import { expand, foreignNode, graphState, nodeById, select, zoomToFit } from '../lib/graph.mjs';
+
+const opts = await resolve('/');
+// newest-first listing, so the order has to be one the first page actually shows
+const ORDER = '11074';
+
+const TITLE = 'What an order touches';
+const base = opts.base;
+// Last take's write-up document is removed off camera, by title — the document is
+// created ON camera below, so its path is a UUID and there is no slug to reset by.
+const gone = await deleteByTitle({
+  ldh: opts.ldh, base, certFile: opts.certFile,
+  certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile,
+  title: TITLE,
+});
+console.log(`cleanup: removed ${gone.removed.length} earlier "${TITLE}"`);
+let url = null;
+
+// The scene's own bookmark: this order, in the mode the question needs.
+const GRAPH_MODE = 'https://w3id.org/atomgraph/client#GraphMode';
+const OPENS_ON = `${opts.base}/orders/${ORDER}/?mode=${encodeURIComponent(GRAPH_MODE)}`;
+
+const { identity, ...a } = await resolve('/order-reach/');
+
+await runScene({
+  id: '05-what-an-order-touches',
+  target: OPENS_ON,
+  warm: OPENS_ON,
+  identity,
+  geometry: geometryFrom(a, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+  async body({ page, cursor, type, marks, shot, base }) {
+    // ── the shape a table cannot show ───────────────────────────────────────
+    // The graph is the opening state, so the first frame is the thing worth watching.
+    // The beat fires as soon as the force layout has nodes, which is what the head
+    // trim measures against.
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForSelector('canvas', { timeout: 25_000 }).catch(() => {});
+    await zoomToFit(page, cursor);
+
+    const opened = await graphState(page);
+    await marks.beat('graph', opened
+      ? `${opened.nodes} nodes, ${opened.links} links — order ${ORDER} and everyone in it`
+      : 'graph not offered');
+    await sleep(2400);
+
+    // ── say why, before exploring it ────────────────────────────────────────
+    // The graph is established; everything after this is expansion, selection and a
+    // jump into another document. Written down first so the exploration has a stated
+    // purpose rather than being a control demonstration.
+    // Out of the graph the visible way — the breadcrumb is in the action bar in every
+    // layout mode — up to Root, then Create ▸ Item. Then the reason for the graph is
+    // written before the graph is worked.
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode', { settle: 1800 });
+    const p1 = await addProse(page, cursor, type,
+      `Order ${ORDER} is one row in the order book below. In graph mode the same order is a set of linked resources. A single click shows a node's description. A double click follows its properties outwards. A right click follows the links that point back at it. The description carries the node's URI as a link, so the graph opens the document.`);
+    await marks.beat('question', p1.ok ? 'why the graph was opened' : p1.why);
+    // A long hold, deliberately. The next gesture leaves for the canvas, and pacing
+    // speeds a static stretch threefold — 0.7s here came out as a fifth of a second
+    // in the cut, which is not a sentence anybody read.
+    await sleep(6500);
+
+    // Back to the order the way a person gets there: the drawer's search, by number
+    // — 830 orders is too many to scroll and a label facet hangs — and then the mode
+    // switcher to Graph, on camera. The opening bookmark is not re-used; a URL typed
+    // twice is a URL typed once too often.
+    const found = await searchGo(page, cursor, ORDER, { type: 'Order' });
+    await marks.beat('back-to-order', found.ok ? `order ${ORDER}, found by number` : found.why);
+    if (!found.ok) throw new Error(found.why);
+    const toGraph = await switchDocumentMode(page, cursor, 'graph-mode', { settle: 2200 });
+    await page.waitForSelector('canvas', { timeout: 25_000 }).catch(() => {});
+    await sleep(3000);
+    await zoomToFit(page, cursor);
+    await marks.beat('graph-again', toGraph ? 'the same order, as a graph' : 'graph not offered');
+    await sleep(800);
+
+    // ── expand across the document boundary ─────────────────────────────────
+    // One expansion, not several. The force layout keeps moving after each one, so a
+    // coordinate read a second ago is already stale by the time the pointer arrives —
+    // the second double-click misses more often than it lands, and a missed gesture
+    // on camera is worse than a shorter scene. One is the beat: the graph grows, and
+    // what arrives came from somewhere else.
+    let expandedUri = null;
+    for (let i = 0; i < 1; i++) {
+      const node = await foreignNode(page, `${opts.base}/orders/${ORDER}/`, {
+        skip: 0,
+        // the parties, not the container's saved queries
+        prefer: /\/(customers|employees|products|shippers)\//,
+      });
+      if (!node || node.error) { await marks.beat(`expand-${i + 1}`, node?.error ?? 'no node'); break; }
+      const r = await expand(page, cursor, node);
+      if (r.ok) expandedUri = node.id;
+      await marks.beat(`expand-${i + 1}`, r.ok
+        ? `${node.id.split('/').filter(Boolean).slice(-2).join('/')} — +${r.gained} nodes, +${r.links} links, from another document`
+        : 'the double-click did not take');
+      await sleep(900);
+    }
+    await zoomToFit(page, cursor);
+    await sleep(1200);
+    await shot('expanded');
+
+    const finalState = await graphState(page);
+    await marks.beat('reach', finalState ? `${finalState.nodes} nodes now — none of this is in the order's own document` : '?');
+    await sleep(900);
+
+    // ── and the graph is not a dead end ─────────────────────────────────────
+    // The node that was just expanded now HAS a description, so a single click on it
+    // renders that description into the info panel — and the description carries its
+    // URI as an ordinary link. Clicking it opens the document. Found by URI rather
+    // than by the coordinate it used to be at, because the expansion moved everything.
+    let openedAt = null;
+    if (expandedUri) {
+      const again = await nodeById(page, expandedUri);
+      if (again && !again.error) {
+        const picked = await select(page, cursor, again);
+        await marks.beat('details', picked.ok
+          ? `${picked.href.replace(opts.base, '')} — a node is a resource, and it says so`
+          : picked.why);
+        await sleep(1300);
+
+        if (picked.ok) {
+          // In place, like every other link in the app — graph3d.xsl no longer opens a
+          // browser tab for it. The graph is the route out of the order.
+          const before = page.url().split('?')[0];
+          if (picked.point) await cursor.clickAt(picked.point.x, picked.point.y, { duration: 700, settle: 200, after: 400 });
+          else await picked.link.click();
+          await page.waitForFunction((b) => location.href.split('?')[0] !== b, before, { timeout: 20_000 }).catch(() => {});
+          await page.waitForLoadState('load').catch(() => {});
+          await sleep(4000);
+          const now = page.url().split('?')[0];
+          if (now !== before) openedAt = now;
+        }
+      } else {
+        await marks.beat('details', again?.error ?? 'lost the node after the expansion');
+      }
+    }
+    await marks.beat('open', openedAt
+      ? `and it opens the record: ${openedAt.replace(opts.base, '')}`
+      : 'the link did not open a document');
+    await sleep(1000);
+
+    // ── write down what it touches ──────────────────────────────────────────
+    // And back to the page being written the way the scene left it: breadcrumb up to
+    // Root, then the page's own entry in the list there. Two clicks the viewer can
+    // follow, not a cut. (Measured: the search does not yet return a page this new,
+    // and the tree would not open from graph mode; the children list has it at once.)
+    const upAgain = await crumbGo(page, cursor, 'Root');
+    if (!upAgain.ok) throw new Error(upAgain.why);
+    await sleep(600);
+    const back = await listGo(page, cursor, TITLE);
+    if (!back.ok) throw new Error(back.why);
+    const home = await switchDocumentMode(page, cursor, 'content-mode', { settle: 1800 });
+    await marks.beat('return', home === false ? 'mode switcher would not open' : 'back to the page being written, by Root and the list');
+
+    const o1 = await addObject(page, cursor, type, null, { label: 'All orders', kind: 'View', mode: 'Table' });
+    await marks.beat('embed', o1.ok ? 'the order book, embedded — one row per transaction' : o1.why);
+    await sleep(900);
+
+    const p2 = await addProse(page, cursor, type,
+      finalState && opened
+        ? `The links out of this one order reach ${finalState.nodes} resources in five documents: a customer, a sales rep, a shipper and the products. The order book row shows none of them.`
+        : 'The links out of this one order reach resources in five documents.');
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(900);
+
+    const scrolled = await scrollThrough(page, { duration: 5200 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(700);
+    await marks.beat('end');
+  },
+}, {});
diff --git a/screencast/scenes/retired/15-a-rep-moves-to-seattle.mjs b/screencast/scenes/retired/15-a-rep-moves-to-seattle.mjs
new file mode 100644
index 00000000..7e5e242b
--- /dev/null
+++ b/screencast/scenes/retired/15-a-rep-moves-to-seattle.mjs
@@ -0,0 +1,124 @@
+// "A rep moves to Seattle."
+//
+// Opens on the team grid, then the same nine on a map: four in London, five around
+// Seattle. Suyama is moving. The map plots each rep at the coordinates on their record,
+// so the move is two numbers edited on Suyama's own page — and the map, read again:
+// three and six.
+//
+//   make scene SCENE=15-a-rep-moves-to-seattle BASE=… CERT_FILE=… CERT_PASSWORD_FILE=… LDH_BIN=…
+
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { deleteByTitle, patchDocument } from '../lib/fixture.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+import { crumbGo, searchGo, listGo } from '../lib/nav.mjs';
+import { addProse, addObject, switchDocumentMode } from '../lib/blocks.mjs';
+import { switchViewMode } from '../lib/modes.mjs';
+import { createItem } from '../lib/constructors.mjs';
+import { editResource, setLiteral, saveForm } from '../lib/editing.mjs';
+import { scrollThrough } from '../lib/frame.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const OPENS_ON = `${base}/employees/`;
+const TITLE = 'A rep moves to Seattle';
+const WHO = 'Suyama';
+const LONDON = { lat: '51.5225', long: '-0.0857' };
+const SEATTLE = { lat: '47.6062', long: '-122.3321' };
+
+const [s] = await sparql(base, `PREFIX schema: <https://schema.org/> SELECT ?e WHERE { GRAPH ?g { ?e a schema:Person ; schema:familyName "${WHO}" } }`);
+if (!s) throw new Error(`${WHO} not found`);
+// Last take moved him; he goes back to London first.
+const reset = await patchDocument({ ldh: opts.ldh, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile,
+  url: s.e.replace(/#.*$/, ''),
+  update: `PREFIX geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>\nPREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
+DELETE { <${s.e}> geo:lat ?a ; geo:long ?b }
+INSERT { <${s.e}> geo:lat "${LONDON.lat}"^^xsd:float ; geo:long "${LONDON.long}"^^xsd:float }
+WHERE { <${s.e}> geo:lat ?a ; geo:long ?b }` });
+console.log(`reset: ${WHO} in London: ${reset.ok ? 'ok' : reset.out}`);
+const gone = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: TITLE });
+console.log(`cleanup: removed ${gone.removed.length} earlier "${TITLE}"`);
+let url = null;
+
+await runScene({
+  id: '15-a-rep-moves-to-seattle',
+  target: OPENS_ON, warm: OPENS_ON, identity,
+  geometry: geometryFrom(opts, { width: 1440, height: 900, deviceScaleFactor: 1 }),
+
+  async body({ page, cursor, type, marks }) {
+    await page.goto(OPENS_ON, { waitUntil: 'load' });
+    await page.waitForFunction(
+      () => [...document.querySelectorAll('.ldh-block-body img[src*="/uploads/"]')].filter((i) => i.complete && i.naturalWidth > 0).length >= 9,
+      { timeout: 30_000 },
+    ).catch(() => {});
+    await marks.beat('team', 'nine people, with their photographs');
+    await sleep(2200);
+    const toMap = await switchViewMode(page, cursor, 'map-mode');
+    await page.waitForSelector('.ol-viewport canvas', { timeout: 25_000 }).catch(() => {});
+    await sleep(2600);
+    await marks.beat('map', toMap ? 'the same nine, plotted — four in London, five around Seattle' : 'map not offered');
+    await sleep(2600);
+
+    // ── say why, before the work ────────────────────────────────────────────
+    await crumbGo(page, cursor, 'Root');
+    await sleep(800);
+    const made = await createItem(page, cursor, TITLE);
+    await marks.beat('create', made.ok ? `a new page, ${TITLE}` : made.why);
+    if (!made.ok) throw new Error(made.why);
+    url = made.url;
+    await sleep(700);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const p1 = await addProse(page, cursor, type,
+      `${WHO} is moving from the London office to Seattle. The team map plots each rep at the coordinates on their record, so the move is two numbers on ${WHO}'s page.`);
+    await marks.beat('question', p1.ok ? 'the move, written down' : p1.why);
+    await sleep(3200);
+
+    // ── two numbers, on the record ──────────────────────────────────────────
+    const k = await searchGo(page, cursor, WHO, { type: 'Person' });
+    if (!k.ok) throw new Error(k.why);
+    const ed = await editResource(page, cursor, /Family name/);
+    await marks.beat('edit', ed.ok ? `${WHO} — ${LONDON.lat}, ${LONDON.long}; open for editing` : ed.why);
+    if (!ed.ok) throw new Error(ed.why);
+    await sleep(900);
+    const a = await setLiteral(page, cursor, type, ed.form, 'Latitude', SEATTLE.lat);
+    if (!a.ok) throw new Error(a.why);
+    const b = await setLiteral(page, cursor, type, ed.form, 'Longitude', SEATTLE.long);
+    if (!b.ok) throw new Error(b.why);
+    const sv = await saveForm(page, cursor, ed.form);
+    await marks.beat('moved', sv.ok ? `${SEATTLE.lat}, ${SEATTLE.long} — saved` : sv.why);
+    if (!sv.ok) throw new Error(sv.why);
+    await sleep(1400);
+
+    // ── the same map, read again ────────────────────────────────────────────
+    // Suyama's breadcrumb reads Root › Employees › Suyama: one click up is the team.
+    const team = await crumbGo(page, cursor, 'Employees');
+    if (!team.ok) throw new Error(team.why);
+    await page.waitForSelector('.ldh-pane.is-active .ldh-view-toolbar', { timeout: 25_000 }).catch(() => {});
+    await sleep(1200);
+    await switchViewMode(page, cursor, 'map-mode');
+    await page.waitForSelector('.ol-viewport canvas', { timeout: 25_000 }).catch(() => {});
+    await sleep(2800);
+    await marks.beat('map-again', 'the same map, read again — three in London, six around Seattle');
+    await sleep(2800);
+
+    const up2 = await crumbGo(page, cursor, 'Root');
+    if (!up2.ok) throw new Error(up2.why);
+    await sleep(600);
+    const home = await listGo(page, cursor, TITLE);
+    if (!home.ok) throw new Error(home.why);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    const o1 = await addObject(page, cursor, type, null, { label: 'All employees', kind: 'View', mode: 'Map' });
+    await marks.beat('embed', o1.ok ? 'the team map, embedded' : o1.why);
+    await sleep(1400);
+    const p2 = await addProse(page, cursor, type,
+      `${WHO} is in Seattle: three reps in London now, six around Seattle. Two numbers changed on one record; the map is the same view, read again.`);
+    await marks.beat('note', p2.ok ? undefined : p2.why);
+    await sleep(700);
+    const scrolled = await scrollThrough(page, { duration: 5000 });
+    await marks.beat('page', `read back over ${Math.round(scrolled)}px`);
+    await sleep(550);
+    await marks.beat('end');
+    await sleep(400);
+  },
+});
diff --git a/screencast/scenes/supercut-compose.mjs b/screencast/scenes/supercut-compose.mjs
new file mode 100644
index 00000000..9e646827
--- /dev/null
+++ b/screencast/scenes/supercut-compose.mjs
@@ -0,0 +1,150 @@
+// A page assembled from resources — one gesture take in five beats: a SELECT typed and
+// saved, a chart made from it, a sentence typed in Content mode, the chart embedded
+// beside it, the chart dragged above the sentence. Dark, 2×, the pointer at a person's
+// pace. The page is reset off camera; everything on camera is the app.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { resetDocument } from '../lib/fixture.mjs';
+import { create, typeQuery, fill, save, configureChart } from '../lib/constructors.mjs';
+import { addProse, addObject, switchDocumentMode, contentModeUrl, revealControls } from '../lib/blocks.mjs';
+import { dragBlock } from '../lib/editing.mjs';
+import { ui } from '../lib/dom.mjs';
+import { GEOMETRY_2X, zoom2x, focus, centre, load, easeScrollTo, easeScrollTop, zoomToFitRows } from '../lib/supercut.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const TITLE = 'Reps by region';
+const QUERY = `PREFIX schema: <https://schema.org/>
+
+SELECT ?region (COUNT(DISTINCT ?rep) AS ?reps)
+WHERE {
+GRAPH ?g {
+?rep schema:areaServed ?territory .
+}
+GRAPH ?h {
+?territory schema:containedInPlace ?place .
+}
+GRAPH ?i {
+?place schema:name ?region .
+}
+}
+GROUP BY ?region
+ORDER BY DESC(?reps)`;
+const doc = await resetDocument({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, container: base.endsWith('/') ? base : base + '/', slug: 'supercut-compose', title: 'Coverage' });
+const READ = `${doc.url}?mode=${encodeURIComponent('https://w3id.org/atomgraph/client#ReadMode')}`;
+console.log('page:', doc.url);
+
+await runScene({
+  id: 'supercut-compose', target: READ, warm: READ, identity,
+  geometry: geometryFrom(opts, GEOMETRY_2X),
+  async body({ page, cursor, type, marks }) {
+    await zoom2x(page);
+    await load(page, READ, '.ldh-pane.is-active .ldh-view-toolbar, .ldh-pane.is-active .ldh-block, .ldh-pane.is-active button', 2500);
+    // ── c1 · a SELECT, typed and saved ─────────────────────────────────────────
+    const cs = await create(page, cursor, 'SELECT');
+    if (!cs.ok) throw new Error(cs.why);
+    const editor = ui(page).locator('.CodeMirror').first();
+    const form = editor.locator('xpath=ancestor::form[1]');
+    // marked at each typing attempt: a retake after a failed read-back supersedes the first
+    const q = await typeQuery(page, cursor, QUERY, {
+      onAttempt: async (n) => marks.beat('c1-start', `an empty query form (attempt ${n})`, await focus(form)),
+      onTyped: async () => marks.beat('c1-typed', 'the last character in', await focus(form)),
+    });
+    await marks.beat('c1-verified', q.ok ? 'the query, read back' : q.why, await focus(form));
+    // The form is taller than the viewport: glide it up so that Save sits at the bottom and
+    // the Title field is in view, rather than letting the Title click jump the page. The
+    // camera can then ride the page's own scroll from the editor down to Save.
+    const saveBtn = form.locator('button.btn-save, button[class*="btn-save"]').filter({ visible: true }).last();
+    await easeScrollTo(saveBtn, { ms: 2000, block: 'end', margin: 0 }).catch(() => {});
+    await sleep(300);
+    await marks.beat('c1-scrolled', 'the form\'s foot in view: Title, Save', await focus(saveBtn));
+    await fill(page, cursor, 'Title', TITLE);
+    await cursor.moveTo(...(await centre(saveBtn)), { duration: 600 });
+    await marks.beat('c1-save', 'pointer on Save', await focus(saveBtn));
+    await cursor.click(saveBtn);
+    const s1 = { ok: true };
+    await marks.beat('c1-saved', 'saved');
+    const row = () => ui(page).locator('.ldh-block-row').filter({ hasText: TITLE }).first();
+    await row().locator('table tbody tr').first().waitFor({ state: 'visible', timeout: 30_000 }).catch(() => {});
+    // the form was taller than the viewport; the block it became is above — scroll to it
+    await easeScrollTo(row(), { ms: 1400, margin: 40 }); await sleep(600);
+    await marks.beat('c1-end', q.ok && s1.ok ? 'four rows' : (q.why ?? s1.why), await focus(row()));
+    // ── c2 · a chart from it ───────────────────────────────────────────────────
+    await marks.beat('c2-start', 'the rows; chart type: Table', await focus(row()));
+    // a view block's controls wait behind the card header's toggle; a query block draws its
+    // chart selects open, and the helper says so rather than pressing anything
+    const shown = await revealControls(page, cursor, row());
+    if (!shown.ok) throw new Error(shown.why ?? 'the chart controls did not open');
+    if (!shown.already) await marks.beat('c2-controls', 'the chart controls, opened', await focus(row()));
+    const cfg = await configureChart(page, cursor, row(), { type: 'Bar chart', category: 'region', series: ['reps'] });
+    await sleep(1200);
+    await marks.beat('c2-drawn', cfg.ok ? 'bars in the pane' : cfg.why, await focus(row()));
+    const createChart = row().locator('button.ac-btn.in-primary').filter({ hasText: /^Create$/ }).first();
+    // the pane's Create sits where the page's floating "+ Create" menu floats: bring it to mid-viewport first
+    await createChart.evaluate((el) => el.scrollIntoView({ block: 'center' })); await sleep(500);
+    await cursor.click(createChart); await sleep(2000);
+    await fill(page, cursor, 'Title', TITLE);
+    const s2 = await save(page, cursor);
+    await sleep(600);
+    await easeScrollTo(ui(page).locator('.ldh-block-row').filter({ hasText: TITLE }).last(), { ms: 1400, margin: 40 }).catch(() => {}); await sleep(600);
+    await marks.beat('c2-end', cfg.ok && s2.ok ? 'bars, saved as a chart' : (cfg.why ?? s2.why), await focus(ui(page).locator('.ldh-block-row').filter({ hasText: TITLE }).last()));
+    // ── c3 · Content: a sentence, typed ────────────────────────────────────────
+    // the menu item has been seen highlighted without the mode changing: check for the
+    // Content-mode buttons, try once more, and fall back to the mode URL — all off camera
+    const xhtml = () => ui(page).locator('button.create-action.add-constructor').filter({ hasText: 'XHTML' }).first();
+    // the document-level mode toggle, with room below it for its menu
+    const toggle = ui(page).locator('button.layout-modes.drop-toggle, button[title="Mode"]').first();
+    await easeScrollTop(page, { ms: 1400 }); await sleep(600);
+    const tb = await toggle.boundingBox();
+    const menuBox = tb ? { focus: { x: tb.x - 420, y: Math.max(0, tb.y - 30), w: tb.width + 520, h: 560 } } : null;
+    await marks.beat('c3t-start', 'Properties mode; pointer to the mode toggle', menuBox);
+    // the toggle and its Content item by hand, so the end beat lands as the mode
+    // renders — the helper's settle after it would be dead air on camera
+    const item = ui(page).locator('.modes-pop a.mi.content-mode').first();
+    for (let i = 0; i < 3 && !(await item.isVisible().catch(() => false)); i++) { await cursor.click(toggle); await sleep(700); }
+    if (await item.isVisible().catch(() => false)) {
+      await cursor.click(item);
+      await xhtml().waitFor({ state: 'visible', timeout: 20_000 }).catch(() => {});
+      await sleep(500);
+    }
+    await marks.beat('c3t-end', (await xhtml().isVisible().catch(() => false)) ? 'Content mode' : 'the menu did not switch the mode', menuBox);
+    for (let i = 0; i < 2 && !(await xhtml().isVisible().catch(() => false)); i++) {
+      await page.keyboard.press('Escape').catch(() => {});
+      await switchDocumentMode(page, cursor, 'content-mode');
+      await sleep(1500);
+    }
+    if (!(await xhtml().isVisible().catch(() => false))) {
+      console.log('  mode menu did not switch; loading the Content-mode URL');
+      await load(page, contentModeUrl(doc.url), 'button', 2500);
+      await xhtml().waitFor({ state: 'visible', timeout: 30_000 }).catch(() => {});
+    }
+    await sleep(800);
+    await marks.beat('c3-start', 'Content mode, an empty page', await focus(xhtml()));
+    const p1 = await addProse(page, cursor, type, 'Eastern has four reps on nineteen territories. Southern has two on eight.');
+    await sleep(800);
+    await marks.beat('c3-end', p1.ok ? 'the sentence, on the page' : p1.why, await focus(ui(page).locator('.ldh-block-row').first()));
+    // ── c4 · the chart, embedded beside it ─────────────────────────────────────
+    await marks.beat('c4-start', 'pointer on + Object', await focus(ui(page).locator('button.create-action.add-constructor').filter({ hasText: 'Object' }).first()));
+    const o1 = await addObject(page, cursor, type, null, { label: TITLE, kind: 'Result set chart' });
+    await ui(page).locator('.ldh-block-row svg').first().waitFor({ state: 'visible', timeout: 15_000 }).catch(() => {});
+    await sleep(1200);
+    await marks.beat('c4-end', o1.ok ? 'the chart, inside the page' : o1.why, await focus(ui(page).locator('.ldh-block-row').filter({ has: page.locator('svg') }).first()));
+    // ── c5 · the chart dragged above the sentence ──────────────────────────────
+    const rows = ui(page).locator('.ldh-block-row').filter({ has: page.locator('span.ldh-bh-drag') });
+    const prose = rows.first(), chart = rows.last();
+    await easeScrollTop(page, { ms: 1400 }); await sleep(500);
+    // Both blocks on screen for the whole swap: at 2× the chart alone is taller than the
+    // frame, so the page is zoomed out to fit the two rows before the beat opens. It is an
+    // instant re-layout, so it lands here, at the shot boundary, where the cut is.
+    const fitted = await zoomToFitRows(page, [prose, chart]);
+    await marks.beat('c5-start', fitted.ok ? `sentence above, chart below, at ${fitted.zoom.toFixed(2)}×` : fitted.why, await focus(prose, chart));
+    // a pointer drag: the app moves the dragged block after the drop target, so the sentence
+    // goes below the chart, and both stay in the frame while it happens
+    const dr = await dragBlock(page, cursor, prose, chart);
+    await sleep(1500);
+    await marks.beat('c5-dropped', dr.ok ? 'dropped: the sentence now follows the chart' : dr.why, await focus(rows.first(), rows.last()));
+    await sleep(600);
+    await marks.beat('c5-end', dr.ok ? 'chart above, sentence below' : dr.why, await focus(rows.first(), rows.last()));
+    await sleep(600);
+    await marks.beat('end');
+  },
+});
diff --git a/screencast/scenes/supercut-ltlod.mjs b/screencast/scenes/supercut-ltlod.mjs
new file mode 100644
index 00000000..f6505df5
--- /dev/null
+++ b/screencast/scenes/supercut-ltlod.mjs
@@ -0,0 +1,57 @@
+// Supercut takes on LTLOD: one view through the layout modes (2) and a map popup (5),
+// on a county's constituent units. 2× footage; each beat carries its focus box.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+import { switchViewMode, currentViewMode } from '../lib/modes.mjs';
+import { findMarkers, openMarker } from '../lib/map.mjs';
+import { ui } from '../lib/dom.mjs';
+import { GEOMETRY_2X, zoom2x, focus, centre, load } from '../lib/supercut.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+// The unit with the most constituent units whose page carries the map view.
+const [top] = await sparql(base, `PREFIX dct: <http://purl.org/dc/terms/>
+SELECT ?unit (COUNT(?s) AS ?n) WHERE {
+  GRAPH ?g { ?s dct:isPartOf ?unit }
+  GRAPH ?h { ?unit dct:isPartOf ?up }
+  FILTER NOT EXISTS { GRAPH ?k { ?up dct:isPartOf ?upup } }
+} GROUP BY ?unit HAVING (COUNT(?s) >= 5 && COUNT(?s) <= 60) ORDER BY DESC(?n) LIMIT 1`);
+// A county: its parent is the top of the hierarchy, and it has a screenful of
+// municipalities rather than the thousands of streets a municipality has.
+if (!top) throw new Error('no unit with sub-units');
+const PAGE = top.unit.replace(/#.*$/, '');
+console.log(`unit: ${PAGE} (${top.n} sub-units)`);
+
+await runScene({
+  id: 'supercut-ltlod', target: PAGE, warm: PAGE, identity,
+  geometry: geometryFrom(opts, GEOMETRY_2X),
+  async body({ page, cursor, marks }) {
+    await zoom2x(page);
+    // The derived view carries no data-for-class here (dct:isPartOf has no range in this
+    // ontology, so nothing is constructable); it is the block with a view toolbar.
+    await load(page, PAGE, '.ldh-pane.is-active .ldh-block .ldh-view-toolbar', 4000);
+    const view = ui(page).locator('.ldh-block').filter({ has: page.locator('.ldh-view-toolbar') }).first();
+    await view.scrollIntoViewIfNeeded(); await sleep(800);
+
+    // ── 2 · one view: Map → Grid → Table → Chart → Graph → Map ─────────────────
+    await marks.beat('2-start', `${await currentViewMode(page)} — ${top.n} constituent units`, await focus(view));
+    for (const [mode, ready] of [['grid-mode', '.ldh-grid-block, .card'], ['table-mode', 'table tbody tr'], ['chart-mode', 'svg rect, svg path, .chart'], ['graph-mode', 'canvas'], ['map-mode', '.ol-viewport canvas']]) {
+      const r = await switchViewMode(page, cursor, mode, { settle: 600 });
+      await view.locator(ready).first().waitFor({ state: 'visible', timeout: 20_000 }).catch(() => {});
+      await sleep(1400);
+      await marks.beat(`2-${mode}`, r === 'already' ? 'already' : mode, await focus(view));
+    }
+    await marks.beat('2-end', 'back on the map', await focus(view));
+    await sleep(800);
+
+    // ── 5 · a pin → the resource's own controls ───────────────────────────────
+    await sleep(600);
+    await marks.beat('5-start', 'the map', await focus(view));
+    const found = await findMarkers(page);
+    const label = found.markers ? await openMarker(page, cursor, found.markers, { after: 1500 }) : null;
+    const popup = ui(page).locator('.ol-overlay-container').first();
+    await marks.beat('5-end', label ? `popup: ${label}` : (found.error ?? 'no popup'), await focus(popup.or(view)));
+    await sleep(800);
+    await marks.beat('end');
+  },
+});
diff --git a/screencast/scenes/supercut-northwind-flow.mjs b/screencast/scenes/supercut-northwind-flow.mjs
new file mode 100644
index 00000000..9e2069c0
--- /dev/null
+++ b/screencast/scenes/supercut-northwind-flow.mjs
@@ -0,0 +1,237 @@
+// The supercut as one connected flow on Northwind — one recording, no page is reached
+// by a goto after the first. The Employees view opens in Graph mode; a node blooms
+// with its own document; the Territory pill pivots the graph to the 53 territories,
+// the Region pill to the four regions; the Southern node opens the region's page. On
+// that page: a city added through the form and its pin on the region's map; a SELECT
+// typed and saved; a bar chart from it; Content mode; a sentence; the chart embedded
+// as an Object; the sentence dragged below it. Beats mark the shots; the cut list
+// picks the stretches. Fixtures run off camera before the browser exists and the
+// view's mode is put back afterwards.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { patchDocument, clearBlocks } from '../lib/fixture.mjs';
+import { create, typeQuery, fill, save, configureChart, openForm } from '../lib/constructors.mjs';
+import { addProse, addObject, switchDocumentMode, contentModeUrl } from '../lib/blocks.mjs';
+import { dragBlock } from '../lib/editing.mjs';
+import { nodeById, expand, select, zoomToFit, approach } from '../lib/graph.mjs';
+import { ui } from '../lib/dom.mjs';
+import { GEOMETRY_2X, zoom2x, focus, centre, load, easeScrollTo } from '../lib/supercut.mjs';
+
+const opts = await resolve('/employees/');
+const { base, identity } = opts;
+const auth = { ldh: opts.ldh, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile };
+const EMPLOYEES = `${base}/employees/`, SOUTHERN = `${base}/regions/4/`;
+const VIEW = `${EMPLOYEES}#select-employees-view`;
+const TITLE = 'Reps by region';
+const QUERY = `PREFIX schema: <https://schema.org/>
+
+SELECT ?region (COUNT(DISTINCT ?rep) AS ?reps)
+WHERE {
+GRAPH ?g {
+?rep schema:areaServed ?territory .
+}
+GRAPH ?h {
+?territory schema:containedInPlace ?place .
+}
+GRAPH ?i {
+?place schema:name ?region .
+}
+}
+GROUP BY ?region
+ORDER BY DESC(?reps)`;
+// The pointer travels to a control and a beat marks its arrival with the control's
+// box, so the cut pans to it before the click (the shot's `via`).
+const reach = async (cursor, marks, id, control, note) => { const c = await centre(control); await cursor.moveTo(c[0], c[1], { duration: 600 }); await sleep(250); await marks.beat(id, note, await focus(control)); };
+const count = (scope) => scope.locator('.ldh-view-toolbar .count b').first().textContent().then((t) => t.trim()).catch(() => '');
+const AC = 'PREFIX ac: <https://w3id.org/atomgraph/client#>';
+const setMode = (mode) => patchDocument({ ...auth, url: EMPLOYEES, update: `${AC}\nDELETE { <${VIEW}> ac:mode ?m } INSERT { <${VIEW}> ac:mode ac:${mode} } WHERE { <${VIEW}> ac:mode ?m }` });
+
+// ── fixtures, off camera ──────────────────────────────────────────────────────
+console.log('  view → Graph:', JSON.stringify(await setMode('GraphMode')).slice(0, 120));
+console.log('  Southern blocks cleared:', JSON.stringify(await clearBlocks({ ...auth, url: SOUTHERN })).slice(0, 120));
+console.log('  old query/chart removed:', JSON.stringify(await patchDocument({ ...auth, url: SOUTHERN, update: `PREFIX dct: <http://purl.org/dc/terms/>\nDELETE { ?s ?p ?o } WHERE { ?s dct:title ${JSON.stringify(TITLE)} ; ?p ?o }` })).slice(0, 120));
+
+try {
+  await runScene({
+    id: 'supercut-northwind-flow', target: EMPLOYEES, warm: EMPLOYEES, identity,
+    geometry: geometryFrom(opts, GEOMETRY_2X),
+    async body({ page, cursor, type, marks }) {
+      // graph at zoom 1: fullscreen fills the 2880×1800 frame anyway, and the pointer's
+      // hover proof on a node has only been shown to work unzoomed
+      await load(page, EMPLOYEES, '.ldh-pane.is-active .ldh-view-toolbar canvas', 4000);
+      await page.waitForFunction(() => { const gs = window.LinkedDataHub?.graphs ?? {}; return Object.values(gs).some((g) => { try { return (g.instance ?? g).graphData().nodes.length > 0; } catch { return false; } }); }, null, { timeout: 60_000 }).catch(() => console.log('  graph instance not seen'));
+      const view = ui(page).locator('.ldh-block').filter({ has: page.locator('.ldh-view-toolbar') }).first();
+      await easeScrollTo(view, { ms: 800, margin: 24 }).catch(() => {});
+      // the opening is the graph in fullscreen: the view's own Fullscreen button
+      // maximises the canvas container (a `graph-3d-maximized` class, `client/graph3d.xsl`)
+      const fsBtn = () => ui(page).locator('button.graph-3d-fullscreen').first();
+      let fullscreen = false;
+      if (await fsBtn().count()) {
+        await cursor.click(fsBtn());
+        fullscreen = await page.waitForFunction(() => !!document.querySelector('.graph-3d-maximized'), null, { timeout: 5000 }).then(() => true, () => false);
+        console.log('  fullscreen:', fullscreen);
+        await sleep(1200);
+      }
+      await zoomToFit(page, cursor); await sleep(2500);
+      // ── 1 · an employee's node blooms with its own document ─────────────────
+      let node = null;
+      for (const id of [2, 5, 1, 3, 4, 6, 7, 8, 9]) { const n = await nodeById(page, `${EMPLOYEES}${id}/#this`); if (n && !n.error) { node = n; break; } }
+      if (!node) throw new Error('no employee node in the view graph');
+      const at = await approach(page, cursor, node.id, { fallback: node });
+      const around = (p, r) => ({ focus: { x: Math.round(p.x - r), y: Math.round(p.y - r * 0.625), w: r * 2, h: Math.round(r * 1.25) } });
+      await marks.beat('1-start', 'the employees as a graph; the pointer on one of them', around(at, 520));
+      const r = await expand(page, cursor, node, { settle: 4000 });
+      const at2 = await approach(page, cursor, node.id, { fallback: at });
+      await marks.beat('1-end', r.ok ? `+${r.gained} nodes from the employee's own document` : r.why ?? 'no bloom', around(at2, 760));
+      await sleep(600);
+      // back into the page for the pivot bar: the same button, or Escape
+      if (fullscreen) {
+        if (await fsBtn().isVisible().catch(() => false)) await cursor.click(fsBtn()); else await page.keyboard.press('Escape');
+        await page.waitForFunction(() => !document.querySelector('.graph-3d-maximized'), null, { timeout: 5000 }).catch(() => {});
+        await sleep(800);
+        await easeScrollTo(view, { ms: 800, margin: 24 }).catch(() => {});
+      }
+      // ── p1 · the Territory pill: the graph becomes the territories ──────────
+      await zoomToFit(page, cursor); await sleep(1200);
+      const bar = () => view.locator('details.ldh-pivot-bar').first();
+      if (await bar().count() && !(await bar().evaluate((d) => d.open))) { await cursor.click(bar().locator('summary').first()); await sleep(900); }
+      const pill1 = view.locator('.ldh-pivot-pill:visible').filter({ hasText: 'Territory' }).first();
+      await cursor.moveTo(...(await centre(pill1)), { duration: 700 }); await sleep(300);
+      const c0 = await count(view);
+      await marks.beat('p1-start', `${c0} employees; the pointer on the Territory pill`, await focus(view));
+      await cursor.click(pill1);
+      await page.waitForFunction((b) => { const c = document.querySelector('.ldh-pane.is-active .ldh-view-toolbar .count b'); return c && c.textContent.trim() !== b; }, c0, { timeout: 30_000 }).catch(() => {});
+      await sleep(1000); await zoomToFit(page, cursor); await sleep(1500);
+      await marks.beat('p1-end', `${await count(view)} territories, as a graph`, await focus(view));
+      // ── p2 · the Region pill: four regions ──────────────────────────────────
+      if (await bar().count() && !(await bar().evaluate((d) => d.open))) { await cursor.click(bar().locator('summary').first()); await sleep(900); }
+      const pill2 = view.locator('.ldh-pivot-pill:visible').filter({ hasText: 'Region' }).first();
+      await cursor.moveTo(...(await centre(pill2)), { duration: 700 }); await sleep(300);
+      const c1 = await count(view);
+      await marks.beat('p2-start', 'the pointer on the Region pill', await focus(view));
+      await cursor.click(pill2);
+      await page.waitForFunction((b) => { const c = document.querySelector('.ldh-pane.is-active .ldh-view-toolbar .count b'); return c && c.textContent.trim() !== b; }, c1, { timeout: 30_000 }).catch(() => {});
+      await sleep(1000); await zoomToFit(page, cursor); await sleep(1500);
+      await marks.beat('p2-end', `${await count(view)} regions`, await focus(view));
+      // ── 1b · the Southern node opens the region's page ──────────────────────
+      const s = await nodeById(page, `${SOUTHERN}#this`);
+      if (!s || s.error) throw new Error(s?.error ?? 'no Southern node');
+      const picked = await select(page, cursor, { ...s });
+      if (!picked.ok) throw new Error(picked.why);
+      const panel = page.locator('[id^="info-content-"]').first();
+      await marks.beat('1b-start', 'Southern selected; its link in the panel', await focus(view));
+      await zoom2x(page); // the page it opens loads at 2×
+      const before = page.url().split('?')[0];
+      if (picked.point) await cursor.clickAt(picked.point.x, picked.point.y, { duration: 500, settle: 150, after: 200 }); else await picked.link.click();
+      await page.waitForFunction((b) => location.href.split('?')[0] !== b, before, { timeout: 30_000 }).catch(() => {});
+      await page.waitForSelector('.ldh-pane.is-active button.add-instance', { timeout: 60_000 }).catch(() => {});
+      await sleep(1500);
+      await marks.beat('1b-end', `the record: ${page.url().replace(base, '')}`);
+      // ── 4 · a city through the form; its pin on the region's map ────────────
+      const cities = ui(page).locator('.ldh-block[data-for-class]').filter({ hasText: 'Cities in this region' }).first();
+      const addBtn = cities.locator('button.add-instance').first();
+      await easeScrollTo(cities, { ms: 1200, margin: 24 }).catch(() => {}); await sleep(400);
+      await cursor.moveTo(...(await centre(addBtn)), { duration: 600 }); await sleep(300);
+      const before4 = await count(cities);
+      await marks.beat('4-open', `${before4} cities on the map; the pointer on Create`, await focus(addBtn));
+      await cursor.click(addBtn);
+      const modal = ui(page).locator('.modal-constructor:visible, .ac-modal:visible').last();
+      await modal.waitFor({ state: 'visible', timeout: 15_000 }); await sleep(900);
+      await marks.beat('4-form', 'the City form, empty', await focus(modal));
+      const n = String(Date.now()).slice(-3);
+      for (const [re, val] of [['^Title', 'El Paso'], ['^Name', 'El Paso'], ['^Identifier', `79${n}`], ['Latitude|^Lat\\b', '31.7619'], ['Longitude|^Long\\b', '-106.4850']]) {
+        const groups = modal.locator('.ldh-prop-group'); const c = await groups.count();
+        for (let i = 0; i < c; i++) { const g = groups.nth(i); const label = ((await g.textContent()) ?? '').replace(/\s+/g, ' ').trim(); if (!new RegExp(re, 'i').test(label)) continue; const input = g.locator('input:not([type=hidden]):visible').first(); if (!(await input.count()) || await input.inputValue()) continue; await cursor.click(input); await input.pressSequentially(val, { delay: 35 }); break; }
+      }
+      const saveBtn = modal.locator('button').filter({ hasText: /Save|Create|check/ }).last();
+      await saveBtn.scrollIntoViewIfNeeded();
+      await cursor.moveTo(...(await centre(saveBtn)), { duration: 400 });
+      await marks.beat('4-start', 'the form filled; the pointer on Save', await focus(modal));
+      await cursor.click(saveBtn);
+      await page.waitForFunction(() => ![...document.querySelectorAll('.modal-constructor, .ac-modal')].some((m) => m.offsetParent !== null), null, { timeout: 20_000 }).catch(() => {});
+      await sleep(600);
+      await marks.beat('4-saved', 'saved');
+      const moved = await page.waitForFunction((b) => { const c = document.querySelector('.ldh-pane.is-active .ldh-view-toolbar .count b'); return c && c.textContent.trim() !== b; }, before4, { timeout: 10_000 }).then(() => true, () => false);
+      await cities.locator('.ol-viewport canvas').first().waitFor({ state: 'visible', timeout: 30_000 }).catch(() => {});
+      await easeScrollTo(cities, { ms: 1400, margin: 24 }).catch(() => {});
+      await sleep(1200);
+      await marks.beat('4-end', `${await count(cities)} cities on the map (was ${before4}, re-read: ${moved})`, await focus(cities));
+      await sleep(1500);
+      // ── c0/c1 · Create ▸ SELECT; the query typed and saved ──────────────────
+      await easeScrollTo(ui(page).locator('.ldh-pane.is-active').first(), { ms: 900, margin: 0 }).catch(() => {});
+      await marks.beat('c0-start', 'the pointer to Create');
+      await reach(cursor, marks, 'c0-ctl', ui(page).locator('button.drop-toggle').filter({ hasText: 'Create' }).first(), 'the pointer on the Create menu');
+      const cs = await create(page, cursor, 'SELECT');
+      if (!cs.ok) throw new Error(cs.why);
+      const editor = ui(page).locator('.CodeMirror').first();
+      const form = editor.locator('xpath=ancestor::form[1]');
+      const q = await typeQuery(page, cursor, QUERY, {
+        onAttempt: async (k) => marks.beat('c1-start', `an empty query form (attempt ${k})`, await focus(form)),
+        onTyped: async () => marks.beat('c1-typed', 'the last character in', await focus(form)),
+      });
+      await marks.beat('c1-verified', q.ok ? 'the query, read back' : q.why, await focus(form));
+      await fill(page, cursor, 'Title', TITLE);
+      await reach(cursor, marks, 'c1-save', openForm(page).locator('button.btn-save, button[class*="btn-save"]').last(), 'the pointer on Save');
+      const s1 = await save(page, cursor);
+      const row = () => ui(page).locator('.ldh-block-row').filter({ hasText: TITLE }).first();
+      await row().locator('table tbody tr').first().waitFor({ state: 'visible', timeout: 30_000 }).catch(() => {});
+      await easeScrollTo(row(), { ms: 1400, margin: 40 }); await sleep(600);
+      await marks.beat('c1-end', q.ok && s1.ok ? 'four rows' : (q.why ?? s1.why), await focus(row()));
+      // ── c2 · a chart from it ────────────────────────────────────────────────
+      await marks.beat('c2-start', 'the rows; chart type: Table', await focus(row()));
+      const cfg = await configureChart(page, cursor, row(), { type: 'Bar chart', category: 'region', series: ['reps'] });
+      await sleep(1200);
+      await marks.beat('c2-drawn', cfg.ok ? 'bars in the pane' : cfg.why, await focus(row()));
+      const createChart = row().locator('button.ac-btn.in-primary').filter({ hasText: /^Create$/ }).first();
+      await createChart.evaluate((el) => el.scrollIntoView({ block: 'center' })); await sleep(500);
+      await reach(cursor, marks, 'c2-ctl', createChart, 'the pointer on the pane\'s Create');
+      await cursor.click(createChart); await sleep(2000);
+      await fill(page, cursor, 'Title', TITLE);
+      await reach(cursor, marks, 'c2-save', openForm(page).locator('button.btn-save, button[class*="btn-save"]').last(), 'the pointer on Save');
+      const s2 = await save(page, cursor);
+      await sleep(600);
+      const chartRow = () => ui(page).locator('.ldh-block-row').filter({ hasText: TITLE }).last();
+      await easeScrollTo(chartRow(), { ms: 1400, margin: 40 }).catch(() => {}); await sleep(600);
+      await marks.beat('c2-end', cfg.ok && s2.ok ? 'bars, saved as a chart' : (cfg.why ?? s2.why), await focus(chartRow()));
+      // ── c3t · Content mode, from the document's mode toggle ─────────────────
+      const xhtml = () => ui(page).locator('button.create-action.add-constructor').filter({ hasText: 'XHTML' }).first();
+      const toggle = ui(page).locator('button.layout-modes.drop-toggle, button[title="Mode"]').first();
+      await easeScrollTo(ui(page).locator('.ldh-pane.is-active').first(), { ms: 900, margin: 0 }).catch(() => {}); await sleep(400);
+      const tb = await toggle.boundingBox();
+      const menuBox = tb ? { focus: { x: tb.x - 420, y: Math.max(0, tb.y - 30), w: tb.width + 520, h: 560 } } : null;
+      await cursor.moveTo(...(await centre(toggle)), { duration: 600 }); await sleep(200);
+      await marks.beat('c3t-start', 'Properties mode; the pointer on the mode toggle', menuBox);
+      const item = ui(page).locator('.modes-pop a.mi.content-mode').first();
+      for (let i = 0; i < 3 && !(await item.isVisible().catch(() => false)); i++) { await cursor.click(toggle); await sleep(700); }
+      if (await item.isVisible().catch(() => false)) { await cursor.click(item); await xhtml().waitFor({ state: 'visible', timeout: 20_000 }).catch(() => {}); await sleep(500); }
+      await marks.beat('c3t-end', (await xhtml().isVisible().catch(() => false)) ? 'Content mode' : 'the menu did not switch the mode', menuBox);
+      for (let i = 0; i < 2 && !(await xhtml().isVisible().catch(() => false)); i++) { await page.keyboard.press('Escape').catch(() => {}); await switchDocumentMode(page, cursor, 'content-mode'); await sleep(1500); }
+      if (!(await xhtml().isVisible().catch(() => false))) { console.log('  mode menu did not switch; loading the Content-mode URL'); await load(page, contentModeUrl(SOUTHERN), 'button', 2500); await xhtml().waitFor({ state: 'visible', timeout: 30_000 }).catch(() => {}); }
+      await sleep(800);
+      // ── c3 · a sentence ─────────────────────────────────────────────────────
+      await marks.beat('c3-start', 'Content mode, an empty page');
+      await reach(cursor, marks, 'c3-ctl', xhtml(), 'the pointer on + XHTML');
+      const p1 = await addProse(page, cursor, type, 'Eastern has four reps on nineteen territories. Southern has two on eight.');
+      await sleep(800);
+      await marks.beat('c3-end', p1.ok ? 'the sentence, on the page' : p1.why, await focus(ui(page).locator('.ldh-block-row').first()));
+      // ── c4 · the chart embedded beside it ───────────────────────────────────
+      await marks.beat('c4-start', 'the pointer to + Object');
+      await reach(cursor, marks, 'c4-ctl', ui(page).locator('button.create-action.add-constructor').filter({ hasText: 'Object' }).first(), 'the pointer on + Object');
+      const o1 = await addObject(page, cursor, type, null, { label: TITLE, kind: 'Result set chart' });
+      await ui(page).locator('.ldh-block-row svg').first().waitFor({ state: 'visible', timeout: 15_000 }).catch(() => {});
+      await sleep(1200);
+      await marks.beat('c4-end', o1.ok ? 'the chart, inside the page' : o1.why, await focus(ui(page).locator('.ldh-block-row').filter({ has: page.locator('svg') }).first()));
+      // ── c5 · the sentence dragged below the chart ───────────────────────────
+      const rows = ui(page).locator('.ldh-block-row').filter({ has: page.locator('span.ldh-bh-drag') });
+      const prose = rows.first(), chart = rows.last();
+      await easeScrollTo(ui(page).locator('.ldh-pane.is-active').first(), { ms: 900, margin: 0 }).catch(() => {}); await sleep(500);
+      await marks.beat('c5-start', 'sentence above, chart below', await focus(prose, chart));
+      const dr = await dragBlock(page, cursor, prose, chart);
+      await sleep(1500);
+      await marks.beat('c5-end', dr.ok ? 'chart above, sentence below' : dr.why, await focus(rows.first(), rows.last()));
+      await sleep(3000);
+      await marks.beat('end');
+    },
+  });
+} finally {
+  console.log('  view → Grid:', JSON.stringify(await setMode('GridMode')).slice(0, 120));
+}
diff --git a/screencast/scenes/supercut-northwind-graph.mjs b/screencast/scenes/supercut-northwind-graph.mjs
new file mode 100644
index 00000000..a5308866
--- /dev/null
+++ b/screencast/scenes/supercut-northwind-graph.mjs
@@ -0,0 +1,266 @@
+// Supercut takes on Northwind, the graph run: a node blooms across a document
+// boundary (1), a node opens its record (1b), and the record's own view walks the graph
+// the other way — Related results hops from the customer's orders to the people who
+// took them to the territories those people cover (1d), one territory opened (1e), and
+// the breadcrumb up to Sales territories (1f), so the cut that follows on that page is
+// a place the viewer arrived at. Recorded on a 2880×1800 viewport at zoom 1 — the
+// canvas fills the pane, so the graph is native-sharp without the document zoom the
+// other takes use (its hit-testing works in unzoomed pixels).
+import fs from 'node:fs/promises';
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { editResource, repoint, saveForm } from '../lib/editing.mjs';
+import { ui } from '../lib/dom.mjs';
+import { foreignNode, expand, select, zoomToFit, approach } from '../lib/graph.mjs';
+import { deleteByTitle } from '../lib/fixture.mjs';
+import { GEOMETRY_2X, focus, centre, load } from '../lib/supercut.mjs';
+import { revealControls } from '../lib/blocks.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const ORDER = '10423';
+// The rep hired on camera (4) for whichever territory 1e opens. The previous take's hire goes off camera
+// first, so the grid reads one face before and two after, every time.
+const HIRE = 'Dana Whitfield';
+const gone = await deleteByTitle({ ldh: opts.ldh, base, certFile: opts.certFile, certPassword: opts.certPassword, certPasswordFile: opts.certPasswordFile, title: HIRE });
+if (gone.removed?.length) console.log(`  reset: removed ${gone.removed.length} × ${HIRE}`);
+// a delete that fails leaves last take's hire in the grid, and the count reads wrong on camera
+if (gone.failed?.length) throw new Error(`reset: could not remove ${gone.failed.length} × ${HIRE} — is the ldh CLI on PATH (or LDH_BIN set)?`);
+const OPENS_ON = `${base}/orders/${ORDER}/?mode=${encodeURIComponent('https://w3id.org/atomgraph/client#GraphMode')}`;
+
+await runScene({
+  id: 'supercut-northwind-graph', target: OPENS_ON, warm: OPENS_ON, identity,
+  geometry: geometryFrom(opts, GEOMETRY_2X),
+  async body({ page, cursor, type, marks }) {
+    await load(page, OPENS_ON, 'canvas', 3000);
+    await zoomToFit(page, cursor);
+    await sleep(2500);
+    const node = await foreignNode(page, `${base}/orders/${ORDER}/`, { skip: 0, prefer: /\/customers\// });
+    if (!node || node.error) throw new Error(node?.error ?? 'no customer node');
+    const at = await approach(page, cursor, node.id, { fallback: node });
+    const around = (p, r) => ({ focus: { x: Math.round(p.x - r), y: Math.round(p.y - r * 0.625), w: r * 2, h: Math.round(r * 1.25) } });
+    await marks.beat('1-start', 'the pointer on the customer node', around(at, 520));
+    const r = await expand(page, cursor, node, { settle: 3500 });
+    const at2 = await approach(page, cursor, node.id, { fallback: at });
+    await marks.beat('1-end', r.ok ? `+${r.gained} nodes from the customer's own document` : r.why ?? 'no bloom', around(at2, 760));
+    await sleep(700);
+
+    await zoomToFit(page, cursor);
+    await sleep(1500);
+    const picked = await select(page, cursor, { ...node });
+    if (!picked.ok) throw new Error(picked.why);
+    const panel = page.locator('[id^="info-content-"]').first();
+    await marks.beat('1b-start', 'the node selected; its link in the panel', await focus(panel));
+    const before = page.url().split('?')[0];
+    if (picked.point) await cursor.clickAt(picked.point.x, picked.point.y, { duration: 500, settle: 150, after: 200 }); else await picked.link.click();
+    await page.waitForFunction((b) => location.href.split('?')[0] !== b, before, { timeout: 20_000 }).catch(() => {});
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 20_000 }).catch(() => {});
+    await sleep(1500);
+    await marks.beat('1b-end', `the record: ${page.url().replace(base, '')}`);
+    await sleep(600);
+
+    // ── 1d · Related results: the orders' brokers, then the brokers' territories ──
+    // The view's control bands wait to be asked for: the toggle in the card header opens
+    // the toolbar and the Related results row together, and each pill re-centres the view
+    // on the related resources in place.
+    const view = () => page.locator('.ldh-pane.is-active .ldh-block').filter({ has: page.locator('.ldh-view-toolbar') }).filter({ hasText: 'Orders from this customer' }).first();
+    // The count is in the block's status line, not the toolbar band that waits to be asked.
+    const count = async () => (await view().locator('.count b').first().textContent({ timeout: 4000 }).catch(() => '?')).trim();
+    const toggle = view().locator('.ldh-block-head button.tb-controls').first();
+    if (!(await toggle.count())) throw new Error('no controls toggle on the orders view');
+    await toggle.scrollIntoViewIfNeeded();
+    await cursor.moveTo(...(await centre(toggle)), { duration: 600 });
+    await marks.beat('1d-start', `${await count()} orders; pointer on the controls toggle`, await focus(view()));
+    const shown = await revealControls(page, cursor, view());
+    if (!shown.ok) throw new Error(shown.why ?? 'the controls did not open');
+    const bar = view().locator('.ldh-pivot-bar').first();
+    if (!(await bar.count())) throw new Error('no Related results bar on the orders view');
+    await marks.beat('1d-open', 'the toolbar and Related results, opened', await focus(view()));
+    const ROUTE = [{ pill: /Sales rep/, what: 'the reps who took them' }, { pill: /Territory/, what: 'the territories they cover' }];
+    for (const [i, hop] of ROUTE.entries()) {
+      const pills = view().locator('.ldh-pivot-pill:visible');
+      const pill = pills.filter({ hasText: hop.pill }).first();
+      if (!(await pill.count())) throw new Error(`hop ${i + 1}: no ${hop.pill} pill among ${JSON.stringify((await pills.allTextContents()).map((t) => t.replace(/\s+/g, ' ').trim()))}`);
+      await pill.scrollIntoViewIfNeeded();
+      const before = await count();
+      await cursor.moveTo(...(await centre(pill)), { duration: 500 });
+      await marks.beat(`1d-hop${i + 1}-start`, `pointer on the ${(await pill.textContent()).replace(/\s+/g, ' ').trim()} pill`, await focus(view()));
+      await pill.click();
+      await page.waitForFunction((b) => { const c = document.querySelector('.ldh-pane.is-active .count b'); return c && c.textContent.trim() !== b; }, before, { timeout: 20_000 }).catch(() => {});
+      await sleep(1500);
+      await marks.beat(`1d-hop${i + 1}-end`, `${await count()} — ${hop.what}`, await focus(view()));
+      await sleep(600);
+    }
+
+    // ── 1e · one territory, opened from the rows ──
+    // Rockville, by name — the territory the cut has always opened, Peacock's. The 31 the
+    // reps cover are paged 20 at a time in the engine's order, and after the 2026-09-28
+    // reinstall Rockville sat on the second page, so a page that lacks it is turned with
+    // the view's own Next. A territory list without Rockville at all falls back to the
+    // first row; the hire below is written for whichever is opened.
+    const rows = () => view().locator('table tbody tr');
+    const named = () => rows().filter({ hasText: 'Rockville' }).first();
+    for (let turn = 0; turn < 3 && !(await named().count()); turn++) {
+      const next = view().locator('button.pager-next').first();
+      if (!(await next.count()) || (await next.isDisabled().catch(() => false))) break;
+      await next.scrollIntoViewIfNeeded();
+      await cursor.click(next);
+      await sleep(1800);
+    }
+    const rowLink = ((await named().count()) ? named() : rows().first()).locator('a').first();
+    await rowLink.scrollIntoViewIfNeeded();
+    await cursor.moveTo(...(await centre(rowLink)), { duration: 500 });
+    const TERRITORY = (await rowLink.textContent()).trim();
+    await marks.beat('1e-start', `pointer on ${TERRITORY}`, await focus(view()));
+    const beforeUrl = page.url().split('?')[0];
+    await rowLink.click();
+    await page.waitForFunction((b) => location.href.split('?')[0] !== b, beforeUrl, { timeout: 20_000 }).catch(() => {});
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 20_000 }).catch(() => {});
+    await sleep(1500);
+    await marks.beat('1e-end', `the territory: ${page.url().replace(base, '')}`);
+    await sleep(600);
+
+    // ── 4 · a rep hired for the territory: Create on "Employees serving this territory",
+    //        the Person form the ontology wrote, Save, the grid one face richer ──
+    const emps = () => page.locator('.ldh-pane.is-active .ldh-block').filter({ has: page.locator('.ldh-view-toolbar') }).filter({ hasText: 'Employees serving this territory' }).first();
+    const empCount = async () => (await emps().locator('.count b').first().textContent({ timeout: 4000 }).catch(() => '?')).trim();
+    const cbtn = emps().locator('button.add-instance').first();
+    await cbtn.waitFor({ state: 'visible', timeout: 15_000 });
+    await cbtn.scrollIntoViewIfNeeded();
+    const before4 = await empCount();
+    await cursor.moveTo(...(await centre(cbtn)), { duration: 600 });
+    await marks.beat('4-start', `${before4} serving ${TERRITORY}; pointer on Create`, await focus(emps()));
+    await cursor.click(cbtn);
+    const modal = page.locator('.modal-constructor:visible, .ac-modal:visible').last();
+    await modal.waitFor({ state: 'visible', timeout: 15_000 });
+    await modal.locator('.ldh-prop-group').nth(3).waitFor({ state: 'visible', timeout: 10_000 }).catch(() => {});
+    await sleep(1000);
+    const labels = async () => (await modal.locator('.ldh-prop-group').allTextContents()).map((t) => t.replace(/\s+/g, ' ').trim().slice(0, 24));
+    await marks.beat('4-form', `the Person form the ontology wrote: ${JSON.stringify(await labels())}`, await focus(modal));
+    // fields by label, never by position; a label the form lacks is skipped
+    for (const [re, val] of [['^Title', HIRE], ['^Name', HIRE], ['Given name', 'Dana'], ['Family name', 'Whitfield'], ['Job title', 'Sales Representative'], ['^Description', `Dana joins from a regional distributor and takes over the ${TERRITORY} accounts.`], ['^Identifier', String(Date.now()).slice(-4)]]) {
+      const groups = modal.locator('.ldh-prop-group'); const c = await groups.count();
+      for (let i = 0; i < c; i++) {
+        const g = groups.nth(i); const label = ((await g.textContent()) ?? '').replace(/\s+/g, ' ').trim();
+        if (!new RegExp(re, 'i').test(label)) continue;
+        const input = g.locator('input:not([type=hidden]):visible, textarea:visible').first();
+        if (!(await input.count()) || await input.inputValue()) continue;
+        await cursor.click(input); await input.pressSequentially(val, { delay: 35 }); break;
+      }
+    }
+    const save4 = modal.locator('button').filter({ hasText: /Save|Create|check/ }).last();
+    await save4.scrollIntoViewIfNeeded();
+    await cursor.moveTo(...(await centre(save4)), { duration: 500 });
+    await marks.beat('4-filled', 'the form filled; pointer on Save', await focus(modal));
+    await cursor.click(save4);
+    await page.waitForFunction(() => ![...document.querySelectorAll('.modal-constructor, .ac-modal')].some((m) => m.offsetParent !== null), null, { timeout: 20_000 }).catch(() => {});
+    await page.waitForLoadState('load').catch(() => {});
+    await sleep(800);
+    await marks.beat('4-saved', 'saved');
+    const moved = await page.waitForFunction(([sel, b]) => { const c = document.querySelector(sel); return c && c.textContent.trim() !== b; }, ['.ldh-pane.is-active .count b', before4], { timeout: 8000 }).then(() => true, () => false).catch(() => false);
+    await sleep(1200);
+    await marks.beat('4-end', `${await empCount()} serving ${TERRITORY} (was ${before4}, refreshed itself: ${moved})`, await focus(emps()));
+    await sleep(1500);
+
+    // ── 5 · her own document: a portrait dropped on it, picked as her image, and back
+    //        to the territory, where the grid re-reads one face richer ──
+    // The hire's card in the grid is the way to her document. Its breadcrumb is
+    // Employees, not Territories, so the way back is her Territory link — which is also
+    // the payoff: the grid on Rockville, re-read, with her face on it.
+    const card = emps().locator('a').filter({ hasText: HIRE }).first();
+    await card.scrollIntoViewIfNeeded();
+    await cursor.moveTo(...(await centre(card)), { duration: 600 });
+    await marks.beat('5-start', 'pointer on the hire\'s card', await focus(emps()));
+    const territoryUrl = page.url().split('?')[0];
+    await cursor.click(card);
+    await page.waitForFunction((b) => location.href.split('?')[0] !== b, territoryUrl, { timeout: 20_000 }).catch(() => {});
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 20_000 }).catch(() => {});
+    await sleep(1500);
+    const her = () => ui(page).locator('.ldh-block').filter({ hasText: HIRE }).first();
+    await marks.beat('5-open', `her document: ${page.url().replace(base, '')}`, await focus(her()));
+    await sleep(400);
+
+    // The drop. The file arrives as a DataTransfer the page itself built, so the drag
+    // events carry a real File; dragenter on the body raises the drop overlay, and the
+    // pointer keeps drifting while it is up, because a held drag is not a still.
+    const portrait = new URL('../fixtures/dana.jpg', import.meta.url);
+    // base64 across the bridge: an array of bytes serialises as a 200k-element list and
+    // costs seconds of dead air on the document before the drag begins
+    const b64 = (await fs.readFile(portrait)).toString('base64');
+    const transfer = await page.evaluateHandle(({ name, mime, b64 }) => {
+      const bin = atob(b64); const bytes = new Uint8Array(bin.length);
+      for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+      const t = new DataTransfer();
+      t.items.add(new File([bytes], name, { type: mime }));
+      return t;
+    }, { name: 'dana.jpg', mime: 'image/jpeg', b64 });
+    const { width: vw, height: vh } = page.viewportSize();
+    await cursor.moveTo(vw * 0.5, vh * 0.55, { duration: 900 });
+    await marks.beat('5-file', 'the file in hand, over the document');
+    await page.dispatchEvent('body', 'dragenter', { dataTransfer: transfer });
+    await page.locator('#file-drop').waitFor({ timeout: 10_000 });
+    await cursor.moveTo(vw * 0.56, vh * 0.47, { duration: 3200 });
+    await marks.beat('5-drag', 'the file over the document; the drop overlay up');
+    await page.dispatchEvent('#file-drop', 'drop', { dataTransfer: transfer });
+    // a successful upload reloads the document in Read mode, the file one of its resources
+    await page.waitForURL(/ReadMode/, { timeout: 30_000 }).catch(() => {});
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 20_000 }).catch(() => {});
+    await sleep(2500);
+    const fileBlock = ui(page).locator('.ldh-block').filter({ hasText: 'dana.jpg' }).first();
+    const uploaded = (await fileBlock.count()) > 0;
+    await marks.beat('5-dropped', uploaded ? 'dropped: uploaded into the document, embedded' : 'dropped, but no dana.jpg block came up', uploaded ? await focus(fileBlock) : undefined);
+    if (!uploaded) throw new Error('the drop did not upload dana.jpg');
+    await sleep(600);
+
+    // Picked as her image: the Image row on her form is the File lookup the constructor
+    // put there; the upload is found by its name.
+    const ed = await editResource(page, cursor, HIRE);
+    if (!ed.ok) throw new Error(ed.why);
+    await marks.beat('5-edit', 'her form; the Image row is a File lookup', await focus(ed.form));
+    const pick = await repoint(page, cursor, type, ed.form, 'Image', 'dana.jpg', { kind: 'File' });
+    if (!pick.ok) throw new Error(pick.why);
+    await sleep(600);
+    await marks.beat('5-picked', 'dana.jpg picked as the image', await focus(ed.form));
+    // a short settle: the block the save renders back is the mislabelled one, and the
+    // load that follows is what the beat waits for
+    const sv = await saveForm(page, cursor, ed.form, { settle: 800 });
+    if (!sv.ok) throw new Error(sv.why);
+    // The block the save renders back labels its rows by local name and shows the
+    // territory link as "this" (measured 2026-09-28); a load of the document has the
+    // ontology's labels. The load sits inside the sped-up shot, before the beat.
+    await page.reload({ waitUntil: 'load' });
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 20_000 }).catch(() => {});
+    await her().locator('img').first().waitFor({ state: 'visible', timeout: 10_000 }).catch(() => {});
+    await sleep(1500);
+    await marks.beat('5-linked', 'saved: the record carries the image', await focus(her()));
+    await sleep(800);
+
+    // Back to the territory by her own Territory link.
+    const back = her().locator('a[href*="/territories/"]').first();
+    await back.scrollIntoViewIfNeeded();
+    await cursor.moveTo(...(await centre(back)), { duration: 600 });
+    await marks.beat('5-back-start', `pointer on her ${TERRITORY} link`, await focus(her()));
+    const herUrl = page.url().split('?')[0];
+    await cursor.click(back);
+    await page.waitForFunction((b) => location.href.split('?')[0] !== b, herUrl, { timeout: 20_000 }).catch(() => {});
+    await page.waitForSelector('.ldh-pane.is-active .ldh-block', { timeout: 20_000 }).catch(() => {});
+    await sleep(2000);
+    await emps().locator('img').first().waitFor({ state: 'visible', timeout: 10_000 }).catch(() => {});
+    await sleep(800);
+    await marks.beat('5-back', `${TERRITORY} again: ${await empCount()} serving, the hire with her face`, await focus(emps()));
+    await sleep(1200);
+
+    // ── 1f · up the breadcrumb to Sales territories ──
+    const crumb = page.locator('[role="navigation"] a.bc-pill').filter({ hasText: /territories\s*$/i }).first();
+    if (!(await crumb.count())) throw new Error('no territories breadcrumb on the territory page');
+    await cursor.moveTo(...(await centre(crumb)), { duration: 500 });
+    await marks.beat('1f-start', `pointer on the ${(await crumb.textContent()).replace(/\s+/g, ' ').trim()} breadcrumb`);
+    const beforeCrumb = page.url().split('?')[0];
+    await cursor.click(crumb);
+    await page.waitForFunction((b) => location.href.split('?')[0] !== b, beforeCrumb, { timeout: 20_000 }).catch(() => {});
+    await page.waitForSelector('.ldh-pane.is-active .ol-viewport', { timeout: 30_000 }).catch(() => {});
+    await sleep(1500);
+    await marks.beat('1f-end', `Sales territories: ${page.url().replace(base, '')}`);
+    await sleep(800);
+    await marks.beat('end');
+  },
+});
diff --git a/screencast/scenes/supercut-northwind.mjs b/screencast/scenes/supercut-northwind.mjs
new file mode 100644
index 00000000..0af79837
--- /dev/null
+++ b/screencast/scenes/supercut-northwind.mjs
@@ -0,0 +1,141 @@
+// Supercut takes on Northwind at 2×: create-from-view (4), cross-dataspace (8), the
+// ontology's form (9), RDFa annotation (12), parallax pivot (15). Each beat carries
+// its focus box. Test run: nothing is reset.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { select as sparql } from '../lib/sparql.mjs';
+import { createFromView } from '../lib/constructors.mjs';
+import { copyUri, contentModeUrl } from '../lib/blocks.mjs';
+import { annotate } from '../lib/annotate.mjs';
+import { ui } from '../lib/dom.mjs';
+import { GEOMETRY_2X, zoom2x, focus, centre, load, easeScrollTo } from '../lib/supercut.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const ONLY = (process.argv.find((a) => a.startsWith('--shots=')) ?? '').slice(8).split(',').filter(Boolean);
+const want = (id) => !ONLY.length || ONLY.includes(id);
+const doc = async (title) => (await sparql(base, `PREFIX dct: <http://purl.org/dc/terms/> SELECT ?doc WHERE { GRAPH ?doc { ?doc dct:title "${title}" } } LIMIT 1`))[0]?.doc;
+const ALIGN = await doc('Category alignment');
+if (!ALIGN) throw new Error('no Category alignment page');
+const count = async (within) => (await within.locator('.ldh-view-toolbar .count b').first().textContent({ timeout: 4000 }).catch(() => '?')).trim();
+
+await runScene({
+  id: 'supercut-northwind', target: `${base}/regions/4/`, warm: `${base}/regions/4/`, identity,
+  // SUPERCUT_1X=1: a 1440×900 take without the document zoom — the RDFa word selection
+  // (caret geometry) does not survive CSS zoom.
+  geometry: geometryFrom(opts, process.env.SUPERCUT_1X ? { width: 1440, height: 900, deviceScaleFactor: 1 } : GEOMETRY_2X),
+  async body({ page, cursor, type, marks }) {
+    if (!process.env.SUPERCUT_1X) await zoom2x(page);
+
+    if (want('4')) {
+    // ── 4 · Save on the Territory form → the map, one more pin ────────────────
+    await load(page, `${base}/regions/4/`, '.ldh-pane.is-active button.add-instance', 3000);
+    const view = ui(page).locator('.ldh-block[data-for-class]').filter({ hasText: 'Cities in this region' }).first();
+    const btn = view.locator('button.add-instance').first();
+    await btn.scrollIntoViewIfNeeded(); await cursor.click(btn);
+    const modal = ui(page).locator('.modal-constructor:visible, .ac-modal:visible').last();
+    await modal.waitFor({ state: 'visible', timeout: 15_000 }); await sleep(1200);
+    const n = String(Date.now()).slice(-3);
+    for (const [re, val] of [['^Title', 'El Paso'], ['^Name', 'El Paso'], ['^Identifier', `79${n}`], ['Latitude|^Lat\\b', '31.7619'], ['Longitude|^Long\\b', '-106.4850']]) {
+      const groups = modal.locator('.ldh-prop-group'); const c = await groups.count();
+      for (let i = 0; i < c; i++) { const g = groups.nth(i); const label = ((await g.textContent()) ?? '').replace(/\s+/g, ' ').trim(); if (!new RegExp(re, 'i').test(label)) continue; const input = g.locator('input:not([type=hidden]):visible').first(); if (!(await input.count()) || await input.inputValue()) continue; await cursor.click(input); await input.pressSequentially(val, { delay: 35 }); break; }
+    }
+    const save = modal.locator('button').filter({ hasText: /Save|Create|check/ }).last();
+    await save.scrollIntoViewIfNeeded();
+    await cursor.moveTo(...(await centre(save)), { duration: 400 });
+    const before4 = await count(ui(page));
+    await marks.beat('4-start', `the Territory form, filled — pointer on Save (${before4} cities)`, await focus(modal));
+    await cursor.click(save);
+    await page.waitForFunction(() => ![...document.querySelectorAll('.modal-constructor, .ac-modal')].some((m) => m.offsetParent !== null), null, { timeout: 20_000 }).catch(() => {});
+    await page.waitForLoadState('load').catch(() => {});
+    await sleep(800);
+    await marks.beat('4-saved', 'saved');
+    // The view on this page is already a map (its default mode): the new city is a pin
+    // right here, no navigation. The view may not re-read itself after the modal
+    // closes (FINDINGS #14); if its count has not moved in a moment, the breadcrumb
+    // reloads the page — a visible click, not a goto.
+    const moved = await page.waitForFunction((b) => { const c = document.querySelector('.ldh-pane.is-active .ldh-view-toolbar .count b'); return c && c.textContent.trim() !== b; }, before4, { timeout: 8000 }).then(() => true, () => false);
+    if (!moved) {
+      const crumb = ui(page).locator('.ldh-bc a').filter({ hasText: 'Southern' }).first();
+      if (await crumb.count()) { await cursor.click(crumb); await page.waitForLoadState('load').catch(() => {}); await page.waitForSelector('.ldh-pane.is-active .ol-viewport canvas', { timeout: 30_000 }).catch(() => {}); await sleep(2000); }
+      else console.log('  no Southern breadcrumb; the map may show the old count');
+    }
+    const mapBlock = ui(page).locator('.ldh-block').filter({ has: page.locator('.ol-viewport') }).first();
+    await mapBlock.locator('.ol-viewport canvas').first().waitFor({ state: 'visible', timeout: 30_000 }).catch(() => {});
+    await easeScrollTo(mapBlock, { ms: 1400, margin: 24 }).catch(() => {});
+    await sleep(1200);
+    await marks.beat('4-end', `${await count(ui(page))} cities on the region's map (was ${before4}, refreshed itself: ${moved})`, await focus(mapBlock));
+    await sleep(2500);
+    }
+
+    if (want('9')) {
+    // ── 9 · Create ▸ Person → the typed form ──────────────────────────────────
+    await load(page, `${base}/employees/2/`, '.ldh-pane.is-active button.add-instance', 3000);
+    const view = ui(page).locator('.ldh-block[data-for-class]').filter({ hasText: 'Direct reports' }).first();
+    const cbtn = view.locator('button.add-instance').first();
+    await cbtn.scrollIntoViewIfNeeded();
+    await cursor.moveTo(...(await centre(cbtn)), { duration: 400 });
+    await marks.beat('9-start', 'Direct reports — pointer on Create', await focus(view));
+    await cbtn.click();
+    const pm = page.locator('.modal-constructor:visible, .ac-modal:visible').last();
+    await pm.waitFor({ state: 'visible', timeout: 15_000 });
+    await pm.locator('.ldh-prop-group').nth(6).waitFor({ state: 'visible', timeout: 10_000 }).catch(() => {});
+    await sleep(1400);
+    await marks.beat('9-end', 'the Person form the ontology wrote', await focus(pm));
+    await sleep(900);
+    await page.keyboard.press('Escape'); await sleep(400);
+    const close = pm.locator('button').filter({ hasText: /Close/ }).first(); if (await close.count()) await close.click().catch(() => {});
+    }
+
+    if (want('15')) {
+    // ── 15 · a pivot pill → results re-centre ─────────────────────────────────
+    await load(page, `${base}/employees/`, '.ldh-pane.is-active .ldh-view-toolbar', 3000);
+    const view = ui(page).locator('.ldh-block').filter({ has: page.locator('.ldh-view-toolbar') }).first();
+    const bar = ui(page).locator('details.ldh-pivot-bar').first();
+    if (await bar.count() && !(await bar.evaluate((d) => d.open))) { await cursor.click(bar.locator('summary').first()); await sleep(700); }
+    const pill = ui(page).locator('.ldh-pivot-pill:visible').filter({ hasText: 'Territory' }).first();
+    if (!(await pill.count())) throw new Error('no Territory pivot pill');
+    await pill.scrollIntoViewIfNeeded();
+    const before15 = await count(ui(page));
+    await cursor.moveTo(...(await centre(pill)), { duration: 400 });
+    await marks.beat('15-start', 'nine employees; pointer on the Territory pill', await focus(view));
+    await pill.click();
+    await page.waitForFunction((b) => { const c = document.querySelector('.ldh-pane.is-active .ldh-view-toolbar .count b'); return c && c.textContent.trim() !== b; }, before15, { timeout: 20_000 }).catch(() => {});
+    await sleep(1500);
+    await marks.beat('15-end', `${await count(ui(page))} territories`, await focus(view));
+    await sleep(800);
+    }
+
+    if (want('12')) {
+    // ── 12 · a word in prose → a property → the concept → a link ──────────────
+    await load(page, contentModeUrl(ALIGN), '.ldh-pane.is-active .ldh-block-row', 3500);
+    const conceptBlock = ui(page).locator('.ldh-block-row').filter({ hasText: /Alternative label|Narrower/ }).first();
+    const copied = await copyUri(page, cursor, conceptBlock, { match: 'concept' });
+    if (!copied.ok) throw new Error(copied.why);
+    const prose = ui(page).locator('.ldh-block-row').filter({ hasText: 'published vocabulary' }).first();
+    await prose.scrollIntoViewIfNeeded(); await prose.hover(); await sleep(500);
+    await cursor.click(prose.locator('button.ac-iconbtn').filter({ hasText: 'edit' }).last());
+    await sleep(3000);
+    await marks.beat('12-start', 'the sentence, open for editing', await focus(prose));
+    const a = await annotate(page, cursor, type, { word: 'Beverages', property: 'exact' });
+    await sleep(1200);
+    await marks.beat('12-end', a.ok ? 'skos:exactMatch — the word is a link into the thesaurus' : a.why, await focus(prose));
+    await sleep(800);
+    }
+
+    if (want('8')) {
+    // ── 8 · apps menu → another dataspace, same chrome ────────────────────────
+    await load(page, `${base}/categories/`, '.ldh-pane.is-active .ldh-block', 3000);
+    const apps = page.locator('button.btn-apps').first();
+    await cursor.click(apps); await sleep(500);
+    const unesco = page.locator('.ac-menu-item:visible, .ac-menu a:visible').filter({ hasText: 'UNESCO' }).first();
+    await cursor.moveTo(...(await centre(unesco)), { duration: 350 });
+    await marks.beat('8-start', 'the applications menu, UNESCO under the pointer');
+    await unesco.click();
+    await page.waitForFunction(() => { const p = document.querySelector('.ldh-pane.is-active'); return p && /UNESCO/.test(p.textContent) && [...p.querySelectorAll('img')].some((i) => i.complete && i.naturalWidth > 0); }, null, { timeout: 30_000 }).catch(() => {});
+    await sleep(1500);
+    await marks.beat('8-end', 'another dataspace, same chrome');
+    await sleep(600);
+    }
+    await marks.beat('end');
+  },
+});
diff --git a/screencast/scenes/supercut-rebrickable-flow.mjs b/screencast/scenes/supercut-rebrickable-flow.mjs
new file mode 100644
index 00000000..349f3aec
--- /dev/null
+++ b/screencast/scenes/supercut-rebrickable-flow.mjs
@@ -0,0 +1,77 @@
+// One flow on Rebrickable, three shots: a node in a printed brick's graph opens the
+// base brick's page (1b); the page glides down to its Colors view — the same brick
+// photographed in 78 colours (v); the Color pivot pill turns the results into the
+// colours themselves (p). The graph part runs at zoom 1 (canvas hit-testing works in
+// unzoomed pixels); the record page loads at 2× like the other takes.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { foreignNode, select, zoomToFit, expand, approach } from '../lib/graph.mjs';
+import { ui } from '../lib/dom.mjs';
+import { GEOMETRY_2X, zoom2x, focus, centre, load, easeScrollTo } from '../lib/supercut.mjs';
+
+const opts = await resolve('/parts/3001pr0045/');
+const { base, identity } = opts;
+const G = `${opts.target}?mode=${encodeURIComponent('https://w3id.org/atomgraph/client#GraphMode')}`;
+const count = (scope) => scope.locator('.ldh-view-toolbar .count b').first().textContent().then((t) => t.trim()).catch(() => '');
+
+await runScene({
+  id: 'supercut-rebrickable-flow', target: G, warm: G, identity,
+  geometry: geometryFrom(opts, GEOMETRY_2X),
+  async body({ page, cursor, marks }) {
+    await load(page, G, 'canvas', 4000, { timeout: 120_000 });
+    // the graph registers itself after the canvas appears; on this heavy page that
+    // can take a while — wait for a live instance with nodes before touching it
+    await page.waitForFunction(() => { const gs = window.LinkedDataHub?.graphs ?? {}; return Object.values(gs).some((g) => { try { return (g.instance ?? g).graphData().nodes.length > 0; } catch { return false; } }); }, null, { timeout: 90_000 }).catch(() => console.log('  graph instance not seen in 90 s'));
+    await zoomToFit(page, cursor); await sleep(2500);
+    // ── 1 · the base brick's node blooms with its own document: 78 colours ──────
+    const node = await foreignNode(page, opts.target, { prefer: /\/parts\/3001\/#this/ });
+    if (!node || node.error) throw new Error(node?.error ?? 'no base brick node');
+    const at = await approach(page, cursor, node.id, { fallback: node });
+    const around = (p, r) => ({ focus: { x: Math.round(p.x - r), y: Math.round(p.y - r * 0.625), w: r * 2, h: Math.round(r * 1.25) } });
+    await marks.beat('1-start', 'eleven nodes; the pointer on the base brick', around(at, 520));
+    const r = await expand(page, cursor, node, { settle: 6000 });
+    const at2 = await approach(page, cursor, node.id, { fallback: at });
+    await marks.beat('1-end', r.ok ? `+${r.gained} nodes from the brick's own document` : r.why ?? 'no bloom', around(at2, 900));
+    await sleep(700);
+    await zoomToFit(page, cursor);
+    await sleep(1500);
+    // ── 1b · the node, now described, opens its page ───────────────────────────
+    const picked = await select(page, cursor, { ...node });
+    if (!picked.ok) throw new Error(picked.why);
+    const panel = page.locator('[id^="info-content-"]').first();
+    await marks.beat('1b-start', 'the brick node selected; its link in the panel', await focus(panel));
+    await zoom2x(page); // the page it opens loads at 2×
+    const before = page.url().split('?')[0];
+    if (picked.point) await cursor.clickAt(picked.point.x, picked.point.y, { duration: 500, settle: 150, after: 200 }); else await picked.link.click();
+    await page.waitForFunction((b) => location.href.split('?')[0] !== b, before, { timeout: 60_000 }).catch(() => {});
+    await page.waitForSelector('.ldh-pane.is-active .ldh-view-toolbar', { timeout: 120_000 }).catch(() => {});
+    const view = ui(page).locator('.ldh-block').filter({ has: page.locator('.ldh-view-toolbar') }).filter({ hasText: 'Colors' }).last();
+    await view.locator('img').first().waitFor({ state: 'visible', timeout: 60_000 }).catch(() => {});
+    await sleep(1500);
+    await marks.beat('1b-end', `the record: ${page.url().replace(base, '')}`);
+    // ── v · down the page to the Colors view ───────────────────────────────────
+    await sleep(600);
+    await easeScrollTo(view, { ms: 2200, margin: 40 });
+    await sleep(800);
+    await marks.beat('v-end', 'the Colors view: one brick, 78 colours', await focus(view));
+    // ── p · the Color pivot ────────────────────────────────────────────────────
+    const bar = view.locator('details.ldh-pivot-bar').first();
+    const before78 = await count(view);
+    await marks.beat('p-start', `${before78} colours; pointer to the pivot bar`, await focus(view));
+    if (await bar.count() && !(await bar.evaluate((d) => d.open))) { await cursor.click(bar.locator('summary').first()); await sleep(900); }
+    const pill = view.locator('.ldh-pivot-pill:visible').filter({ hasText: 'Color' }).first();
+    if (!(await pill.count())) throw new Error('no Color pivot pill');
+    await cursor.moveTo(...(await centre(pill)), { duration: 700 }); await sleep(300);
+    const pillAt = await centre(pill);
+    const snapshot = await page.evaluate(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-view-toolbar .count')].map((c) => c.textContent.trim()).join('|'));
+    await cursor.click(pill);
+    // the pivot renders its results as a new view (a new toolbar, a new count) — the
+    // old view's count stays — so wait for the set of counts to change
+    await page.waitForFunction((b) => [...document.querySelectorAll('.ldh-pane.is-active .ldh-view-toolbar .count')].map((c) => c.textContent.trim()).join('|') !== b, snapshot, { timeout: 30_000 }).catch(() => {});
+    await sleep(2200);
+    // the results now under the pointer's column: the block below the pill
+    const resBox = await page.evaluate(({ x, y }) => { const el = document.elementFromPoint(x, y + 260)?.closest('.ldh-block'); if (!el) return null; const r = el.getBoundingClientRect(); return { x: Math.round(r.x), y: Math.round(r.y), w: Math.round(r.width), h: Math.round(r.height) }; }, { x: pillAt[0], y: pillAt[1] }).catch(() => null);
+    await marks.beat('p-end', 'the colours themselves', resBox ? { focus: resBox } : await focus(view));
+    await sleep(3000);
+    await marks.beat('end');
+  },
+});
diff --git a/screencast/scenes/supercut-rebrickable-pivot.mjs b/screencast/scenes/supercut-rebrickable-pivot.mjs
new file mode 100644
index 00000000..220afde6
--- /dev/null
+++ b/screencast/scenes/supercut-rebrickable-pivot.mjs
@@ -0,0 +1,37 @@
+// One gesture on Rebrickable: the 2×4 brick's Colors view — the same brick photographed
+// in 78 colours — then its Color pivot pill, and the results become the colours
+// themselves. Dark, 2×, the view framed whole; the result lingers.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { ui } from '../lib/dom.mjs';
+import { GEOMETRY_2X, zoom2x, focus, centre, load } from '../lib/supercut.mjs';
+
+const opts = await resolve('/parts/3001/');
+const { identity } = opts;
+const count = (scope) => scope.locator('.ldh-view-toolbar .count b').first().textContent().then((t) => t.trim()).catch(() => '');
+
+await runScene({
+  id: 'supercut-rebrickable-pivot', target: opts.target, warm: opts.target, identity,
+  geometry: geometryFrom(opts, GEOMETRY_2X),
+  async body({ page, cursor, marks }) {
+    await zoom2x(page);
+    await load(page, opts.target, '.ldh-pane.is-active .ldh-view-toolbar', 5000);
+    const view = ui(page).locator('.ldh-block').filter({ has: page.locator('.ldh-view-toolbar') }).filter({ hasText: 'Colors' }).last();
+    await view.locator('img').first().waitFor({ state: 'visible', timeout: 30_000 }).catch(() => {});
+    await view.evaluate((el) => el.scrollIntoView({ block: 'start' })); await sleep(2500);
+    const bar = view.locator('details.ldh-pivot-bar').first();
+    const before = await count(view);
+    await marks.beat('p-start', `${before} colours of one brick; pointer to the pivot bar`, await focus(view));
+    if (await bar.count() && !(await bar.evaluate((d) => d.open))) { await cursor.click(bar.locator('summary').first()); await sleep(900); }
+    const pill = view.locator('.ldh-pivot-pill:visible').filter({ hasText: 'Color' }).first();
+    if (!(await pill.count())) throw new Error('no Color pivot pill');
+    await cursor.moveTo(...(await centre(pill)), { duration: 700 });
+    await sleep(300);
+    await cursor.click(pill);
+    await page.waitForFunction(() => { const c = document.querySelector('.ldh-pane.is-active .ldh-block:last-of-type .ldh-view-toolbar .count b, .ldh-pane.is-active .ldh-view-toolbar .count b'); return !!c; }, null, { timeout: 20_000 }).catch(() => {});
+    await sleep(2200);
+    await marks.beat('p-end', 'the colours themselves', await focus(view));
+    // the recording stops at context close and loses its last second or two: pad the tail
+    await sleep(3000);
+    await marks.beat('end');
+  },
+});
diff --git a/screencast/scenes/supercut-rebrickable.mjs b/screencast/scenes/supercut-rebrickable.mjs
new file mode 100644
index 00000000..aeb45057
--- /dev/null
+++ b/screencast/scenes/supercut-rebrickable.mjs
@@ -0,0 +1,203 @@
+// Supercut takes on Rebrickable: URL → resource (3), chart pane (6), object embed (7),
+// derived views (10), SPARQL editor (11), image on a record (14, if the form offers a
+// file), search (19), edit in place (20). 2× footage; each beat carries its focus box.
+// Test run: nothing is reset; the write-up page is created on camera and left.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { openTree } from '../lib/nav.mjs';
+import { addObject, switchDocumentMode, contentModeUrl, pickByLabel, copyUri } from '../lib/blocks.mjs';
+import { create, createItem, typeQuery, fill, save, field } from '../lib/constructors.mjs';
+import { editResource } from '../lib/editing.mjs';
+import { glideTo } from '../lib/frame.mjs';
+import { ui } from '../lib/dom.mjs';
+import { GEOMETRY_2X, zoom2x, focus, centre, load } from '../lib/supercut.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+const ONLY = (process.argv.find((a) => a.startsWith('--shots=')) ?? '').slice(8).split(',').filter(Boolean);
+const want = (id) => !ONLY.length || ONLY.includes(id);
+const SET = `${base}/sets/10229-1/`;
+const PART = `${base}/parts/3005/`;
+const VIDEO = 'https://www.youtube.com/watch?v=LBseYMmxxZY';
+const READ = (u) => `${u}?mode=${encodeURIComponent('https://w3id.org/atomgraph/client#ReadMode')}`;
+const QUERY = `PREFIX ns: <${base}/ns#>
+
+SELECT ?set ?parts
+WHERE {
+GRAPH ?g {
+?set a ns:Set ;
+ns:numParts ?parts .
+FILTER (?parts > 5000)
+}
+}
+ORDER BY DESC(?parts)`;
+
+await runScene({
+  id: 'supercut-rebrickable', target: SET, warm: SET, identity,
+  geometry: geometryFrom(opts, GEOMETRY_2X),
+  async body({ page, cursor, type, marks }) {
+    await zoom2x(page);
+    const saveBtn = () => ui(page).locator('form').filter({ has: page.locator('button.btn-save') }).last().locator('button.btn-save').first();
+
+    if (want('20')) {
+    // ── 20 · pencil → the record is its form ───────────────────────────────────
+    await load(page, SET, '.ldh-pane.is-active .ldh-block', 3000);
+    const block = ui(page).locator('.ldh-block').filter({ hasText: /Number of parts/ }).first();
+    const pencil = block.locator('button').filter({ hasText: /^\s*edit\s*$/ }).first();
+    await pencil.scrollIntoViewIfNeeded();
+    await cursor.moveTo(...(await centre(pencil)), { duration: 400 });
+    await marks.beat('20-start', 'the set record; pointer on the pencil', await focus(block));
+    await pencil.click();
+    const form = ui(page).locator('form').filter({ has: page.locator('button.btn-save') }).last();
+    await form.waitFor({ state: 'visible', timeout: 15_000 });
+    await sleep(1200);
+    await marks.beat('20-end', 'the record as its form', await focus(form));
+    await sleep(800);
+
+    // ── 14 · an image put on the record, if the form takes a file ─────────────
+    const file = form.locator('input[type=file]').first();
+    if (await file.count()) {
+      await marks.beat('14-start', 'the image row of the form', await focus(file));
+      await file.setInputFiles('/private/tmp/claude-501/-Users-martynas-WebRoot-LinkedDataHub/5542c912-918c-4be9-8864-ed41b61b33fa/scratchpad/sc/zoom2x.png');
+      await sleep(800);
+      await cursor.click(saveBtn());
+      await ui(page).locator('.ldh-block img[src*="/uploads/"]').first().waitFor({ state: 'visible', timeout: 25_000 }).catch(() => {});
+      await sleep(1200);
+      await marks.beat('14-end', 'the image, on the record', await focus(ui(page).locator('.ldh-block').filter({ hasText: /Number of parts/ }).first()));
+    } else {
+      console.log('  14: the edit form has no file input — skipped');
+      const cancel = form.locator('button').filter({ hasText: /Cancel|Close|Reset/ }).first();
+      if (await cancel.count()) await cancel.click().catch(() => {}); else await page.keyboard.press('Escape');
+    }
+    await sleep(600);
+    }
+
+    if (want('3')) {
+    // ── 3 · a pasted URL → a resource on the page ─────────────────────────────
+    await load(page, contentModeUrl(SET), '.ldh-pane.is-active .ldh-block', 3000);
+    const add = ui(page).locator('button').filter({ hasText: /Object/ }).last();
+    await add.scrollIntoViewIfNeeded(); await cursor.click(add);
+    const value = field(page, 'Value', 'input:not([type=hidden]):visible');
+    await value.waitFor({ state: 'visible', timeout: 10_000 });
+    await cursor.click(value); await type(value, VIDEO, { base: 14, spread: 6 });
+    await sleep(800);
+    const sv = saveBtn();
+    await cursor.moveTo(...(await centre(sv)), { duration: 400 });
+    await marks.beat('3-start', 'a YouTube URL in the Value field — pointer on Save', await focus(ui(page).locator('form').filter({ has: page.locator('button.btn-save') }).last()));
+    await sv.click();
+    const card = ui(page).locator('iframe[src*="youtube"], img[src*="ytimg"]').first();
+    await card.waitFor({ state: 'visible', timeout: 30_000 }).catch(() => {});
+    await sleep(1500);
+    await marks.beat('3-end', 'the video, rendered as a resource', await focus(card.locator('xpath=ancestor::div[contains(@class,"ldh-block-row")][1]')));
+    await sleep(800);
+    }
+
+    let page7 = null;
+    if (want('7') || want('11')) {
+    // ── 7 · Save on an Object block → a grid of sets inside the page ──────────
+    await load(page, `${base}/`, '.ldh-pane.is-active .ldh-block', 3000);
+    const made = await createItem(page, cursor, 'Supercut');
+    if (!made.ok) throw new Error(made.why);
+    page7 = made.url;
+    await sleep(600);
+    await switchDocumentMode(page, cursor, 'content-mode');
+    await sleep(600);
+    // The lookup-by-title does not answer on this store in time, so the view's URI is
+    // copied from the front page's own block and pasted (the copy is off-shot).
+    await load(page, contentModeUrl(`${base}/`), '.ldh-pane.is-active .ldh-block-row', 3000);
+    const newest = ui(page).locator('.ldh-block-row').filter({ hasText: 'Newest sets' }).first();
+    const copied = await copyUri(page, cursor, newest, { match: null });
+    if (!copied.ok) throw new Error(copied.why);
+    await load(page, contentModeUrl(page7), '.ldh-pane.is-active .ldh-block, .ldh-pane.is-active button', 3000);
+    const add = ui(page).locator('button').filter({ hasText: /Object/ }).last();
+    await cursor.click(add);
+    const value = field(page, 'Value', 'input:not([type=hidden]):visible');
+    await value.waitFor({ state: 'visible', timeout: 10_000 });
+    await cursor.click(value);
+    await page.keyboard.press(process.platform === 'darwin' ? 'Meta+V' : 'Control+V');
+    await sleep(1500);
+    const suggestion = ui(page).locator('.ac-cb-panel[role="listbox"] li.ac-cb-item').first();
+    if (await suggestion.isVisible().catch(() => false)) { await cursor.click(suggestion); await sleep(600); }
+    const modeSelect = field(page, 'Layout mode', 'select:visible');
+    if (await modeSelect.count()) await modeSelect.selectOption({ label: 'Grid' }).catch(() => {});
+    const sv = saveBtn();
+    await cursor.moveTo(...(await centre(sv)), { duration: 400 });
+    await marks.beat('7-start', 'an Object block bound to a view — pointer on Save', await focus(ui(page).locator('form').filter({ has: page.locator('button.btn-save') }).last()));
+    await sv.click();
+    await page.waitForFunction(() => [...document.querySelectorAll('.ldh-pane.is-active .ldh-block-row img')].filter((i) => i.complete && i.naturalWidth > 0).length >= 6, null, { timeout: 40_000 }).catch(() => {});
+    await sleep(1500);
+    await marks.beat('7-end', 'a grid of sets inside the page', await focus(ui(page).locator('.ldh-block-row').filter({ has: page.locator('img') }).first()));
+    await sleep(800);
+    }
+
+    if (want('11')) {
+    // ── 11 · a SPARQL query typed → its results ───────────────────────────────
+    await switchDocumentMode(page, cursor, 'read-mode');
+    await sleep(600);
+    const cs = await create(page, cursor, 'SELECT');
+    if (!cs.ok) throw new Error(cs.why);
+    const editor = ui(page).locator('.CodeMirror').first();
+    await marks.beat('11-start', 'an empty query editor', await focus(editor));
+    const q = await typeQuery(page, cursor, QUERY);
+    await sleep(400);
+    await fill(page, cursor, 'Title', 'Sets over five thousand parts');
+    const s = await save(page, cursor);
+    await marks.beat('11-typed', q.ok ? 'typed and saved' : q.why);
+    await ui(page).locator('.ldh-block-row').filter({ hasText: 'Sets over five thousand parts' }).first().locator('table tbody tr').first().waitFor({ state: 'visible', timeout: 30_000 }).catch(() => {});
+    await sleep(1500);
+    await marks.beat('11-end', s.ok ? 'the result rows' : s.why, await focus(ui(page).locator('.ldh-block-row').filter({ hasText: 'Sets over five thousand parts' }).first()));
+    await sleep(800);
+    }
+
+    if (want('6')) {
+    // ── 6 · line chart → bars, on the front page's own query ──────────────────
+    // On the query shot 11 just saved: its row carries the chart pane.
+    const row = ui(page).locator('.ldh-block-row').filter({ hasText: 'Sets over five thousand parts' }).first();
+    await row.locator('select.chart-type').first().waitFor({ state: 'visible', timeout: 20_000 });
+    await row.scrollIntoViewIfNeeded(); await sleep(800);
+    const typeSel = row.locator('select.chart-type').first();
+    await typeSel.selectOption({ label: 'Line chart' });
+    await sleep(2500);
+    await cursor.moveTo(...(await centre(typeSel)), { duration: 400 });
+    await marks.beat('6-start', 'chart type: Line chart', await focus(row));
+    const rects = await row.locator('svg rect').count();
+    await typeSel.selectOption({ label: 'Bar chart' });
+    await page.waitForFunction(([n]) => { const r = [...document.querySelectorAll('.ldh-pane.is-active .ldh-block-row')].find((x) => x.querySelector('select.chart-type') && x.textContent.includes('Sets over five thousand parts')); return r && r.querySelectorAll('svg rect').length > n + 4; }, [rects], { timeout: 20_000 }).catch(() => {});
+    await sleep(1500);
+    await marks.beat('6-end', `bars (${await row.locator('svg rect').count()} rects)`, await focus(row));
+    await sleep(800);
+    }
+
+    if (want('10')) {
+    // ── 10 · a record page grows lists it never declared ──────────────────────
+    await load(page, PART, '.ldh-pane.is-active .ldh-block[data-for-class]', 4000);
+    await glideTo(page, 0);
+    await sleep(600);
+    const record = ui(page).locator('.ldh-block').filter({ hasText: /Number/ }).first();
+    await marks.beat('10-start', 'Brick 1 x 1 — the record', await focus(record));
+    const last = ui(page).locator('.ldh-block[data-for-class]').last();
+    const y = await last.evaluate((e) => e.getBoundingClientRect().top + window.scrollY - 80);
+    await glideTo(page, Math.max(0, y), 4500);
+    await sleep(1000);
+    await marks.beat('10-end', `${await ui(page).locator('.ldh-block[data-for-class]').count()} derived views below the record`);
+    await sleep(800);
+    }
+
+    if (want('19')) {
+    // ── 19 · search over 158 k documents ──────────────────────────────────────
+    await load(page, `${base}/`, '.ldh-pane.is-active .ldh-block', 3000);
+    await openTree(page, cursor);
+    const box = ui(page).locator('.left-sidebar input[name="q"], .sb-search input[name="q"]').first();
+    await cursor.click(box); await box.pressSequentially('Millennium Falcon', { delay: 55 }); await sleep(400);
+    await marks.beat('19-start', 'a name typed in the drawer', await focus(box));
+    await page.keyboard.press('Enter');
+    const dialog = page.locator('.ac-modal:visible').last();
+    await dialog.waitFor({ state: 'visible', timeout: 40_000 }).catch(() => {});
+    await page.waitForFunction(() => { const ms = [...document.querySelectorAll('.ac-modal')].filter((m) => m.offsetParent !== null); return ms.length && /Total results\s+\d/.test(ms.at(-1).textContent); }, null, { timeout: 60_000 }).catch(() => {});
+    await sleep(2000);
+    await marks.beat('19-end', 'results, with their photographs and types', await focus(dialog));
+    await sleep(800);
+    await page.keyboard.press('Escape');
+    }
+    await marks.beat('end');
+  },
+});
diff --git a/screencast/scenes/supercut-unesco.mjs b/screencast/scenes/supercut-unesco.mjs
new file mode 100644
index 00000000..4890e424
--- /dev/null
+++ b/screencast/scenes/supercut-unesco.mjs
@@ -0,0 +1,40 @@
+// Supercut takes on the UNESCO thesaurus: the document tree (21) and a concept
+// expanded in it (16). 2× footage; each beat carries its focus box.
+import { runScene, resolve, geometryFrom, sleep } from '../lib/harness.mjs';
+import { openTree } from '../lib/nav.mjs';
+import { ui } from '../lib/dom.mjs';
+import { GEOMETRY_2X, zoom2x, focus, centre, load } from '../lib/supercut.mjs';
+
+const opts = await resolve('/');
+const { base, identity } = opts;
+
+await runScene({
+  id: 'supercut-unesco', target: `${base}/concepts/`, warm: `${base}/concepts/`, identity,
+  geometry: geometryFrom(opts, GEOMETRY_2X),
+  async body({ page, cursor, marks }) {
+    await zoom2x(page);
+    // ── 21 · the drawer opens on the tree ─────────────────────────────────────
+    await load(page, `${base}/concepts/`, '.ldh-pane.is-active .ldh-block', 3000);
+    await cursor.moveTo(480, 840, { duration: 300 });
+    await marks.beat('21-start', 'the concepts container');
+    await openTree(page, cursor);
+    await sleep(900);
+    const drawer = ui(page).locator('.left-sidebar, .document-tree').first();
+    await marks.beat('21-end', 'the document tree', await focus(drawer));
+    await sleep(800);
+
+    // ── 16 · a concept expanded in the tree ───────────────────────────────────
+    const expand = ui(page).locator('.ldh-tree button.btn-expand-tree, .ldh-tree [class*="btn-expand"]').first();
+    if (!(await expand.count())) throw new Error('no expand control in the tree');
+    await expand.scrollIntoViewIfNeeded();
+    const rowsBefore = await ui(page).locator('.ldh-tree .tree-row').count();
+    await cursor.moveTo(...(await centre(expand)), { duration: 400 });
+    await marks.beat('16-start', 'pointer on a branch of the tree', await focus(drawer));
+    await expand.click();
+    await page.waitForFunction((n) => document.querySelectorAll('.ldh-pane.is-active .ldh-tree .tree-row').length > n, rowsBefore, { timeout: 20_000 }).catch(() => {});
+    await sleep(1200);
+    await marks.beat('16-end', `${await ui(page).locator('.ldh-tree .tree-row').count()} rows`, await focus(drawer));
+    await sleep(800);
+    await marks.beat('end');
+  },
+});
diff --git a/screencast/supercut.json b/screencast/supercut.json
new file mode 100644
index 00000000..dc714df7
--- /dev/null
+++ b/screencast/supercut.json
@@ -0,0 +1,127 @@
+{
+  "source": "tracks/supercut.mp4",
+  "output": "tracks/supercut-captioned.mp4",
+  "poster": "tracks/supercut-captioned.jpg",
+  "posterAt": 3,
+  "width": 1440,
+  "crop": {
+    "top": 56,
+    "bottom": 130
+  },
+  "cuts": [],
+  "crf": 20,
+  "caption": {
+    "size": 38,
+    "weight": 500,
+    "inset": 44,
+    "bottom": 40
+  },
+  "captions": [
+    {
+      "in": 0.0,
+      "out": 6.0,
+      "text": "Graph mode draws documents as nodes and links as edges."
+    },
+    {
+      "in": 6.0,
+      "out": 14.033,
+      "text": "Clicking a node opens its document."
+    },
+    {
+      "in": 14.033,
+      "out": 23.833,
+      "text": "Related results follows the links out of the orders."
+    },
+    {
+      "in": 23.833,
+      "out": 29.433,
+      "text": "The territory's page shows the views its class declares."
+    },
+    {
+      "in": 29.433,
+      "out": 41.433,
+      "text": "The class generates the form, and Save writes the graph."
+    },
+    {
+      "in": 41.433,
+      "out": 54.033,
+      "text": "A file dropped on the document is uploaded into it."
+    },
+    {
+      "in": 54.033,
+      "out": 61.133,
+      "text": "The upload is picked as the value of a property."
+    },
+    {
+      "in": 61.133,
+      "out": 67.333,
+      "text": "The territory's view picks up the change by itself."
+    },
+    {
+      "in": 67.333,
+      "out": 73.367,
+      "text": "The breadcrumb leads back up to the container."
+    },
+    {
+      "in": 73.367,
+      "out": 81.964,
+      "text": "A SPARQL query is saved as a document."
+    },
+    {
+      "in": 81.964,
+      "out": 84.962,
+      "text": "Its results are rendered as a view."
+    },
+    {
+      "in": 84.962,
+      "out": 90.856,
+      "text": "A result set chart is bound to the query."
+    },
+    {
+      "in": 90.856,
+      "out": 94.3,
+      "text": "In Content mode the document is a list of blocks."
+    },
+    {
+      "in": 94.3,
+      "out": 98.739,
+      "text": "An XHTML block holds the prose."
+    },
+    {
+      "in": 98.739,
+      "out": 106.13,
+      "text": "An object block embeds the chart."
+    },
+    {
+      "in": 106.13,
+      "out": 109.02,
+      "text": "Dragging a block reorders the page."
+    },
+    {
+      "in": 109.02,
+      "out": 112.1,
+      "text": "The application is data."
+    }
+  ],
+  "slide": {
+    "eyebrow": "Open-source Knowledge Graph platform",
+    "title": "The application is data.",
+    "lede": "Classes, forms, views, charts and access rules are RDF documents. Push a folder of Turtle and the dataspace is live. An agent can write it.",
+    "links": [
+      {
+        "label": "linkeddatahub.com",
+        "primary": true
+      },
+      {
+        "label": "github.com/AtomGraph/LinkedDataHub"
+      }
+    ],
+    "note": "Open source under Apache 2.0",
+    "fade": 1.2,
+    "seconds": 6
+  },
+  "audio": {
+    "file": "audio/supercut.mp3",
+    "fadeOut": 0.4
+  }
+}
diff --git a/screencast/tapes/get-started-setup.tape b/screencast/tapes/get-started-setup.tape
new file mode 100644
index 00000000..82eab5fe
--- /dev/null
+++ b/screencast/tapes/get-started-setup.tape
@@ -0,0 +1,95 @@
+# get-started/setup — "setting up LinkedDataHub with Docker"
+#
+# The procedure on docs/get-started/setup.ttl, run for real: clone, write .env, generate
+# the server certificate, create the three password secrets, bring the stack up. The
+# recording runs until the containers are up and the log is streaming.
+#
+# Nothing is staged. RULES.md: a recording is a claim about what using the product is
+# like, so a step the audience could not reproduce is a false claim even when the pixels
+# look right. The image build is not skipped — render/pace.mjs compresses the stretches
+# that are genuinely frozen, and the scrolling build output, which is not frozen, plays
+# at 1x because that is how long it takes.
+#
+# One value differs from the block the page prints, and it is deliberate:
+#
+#   COMPOSE_PROJECT_NAME  Compose identifies a project by name, not by directory, so
+#                         reusing the name of a stack already on this machine would make
+#                         it adopt and recreate those containers — and a later `down -v`
+#                         would take their named volumes with it.
+#
+# The ports are the page's own defaults and must stay that way: config/dataspaces.trig
+# hardcodes https://localhost:4443 and https://admin.localhost:4443, so an instance
+# brought up on any other port exits at startup with
+#
+#   Root end-user app with origin <https://localhost:PORT> not found. Exiting...
+#
+# The page's advice to pick different ports when 81/4443 are taken does not work today.
+#
+# The clone takes --branch develop, and the .env block is the page's: both are 6.0.
+# ABS_PATH is gone from that block because a dataspace serves from the root of its origin
+# and there was never a second working value. master is still 5.10.0, which cannot run
+# without it — its docker-compose.yml passes ABS_PATH=${ABS_PATH}, which resolves to the
+# empty string and overrides the Dockerfile's ENV ABS_PATH=/, so its entrypoint bails on
+# [ -z "$ABS_PATH" ]. The page's step 1 is prose — fork the repository and clone the fork
+# — so it prints no command the branch flag contradicts. Drop the flag once 6.0 is what a
+# clone gets.
+#
+# Geometry, framerate and typing speed come from lib/terminal.mjs, which prepends them.
+# The working directory arrives as $LDH_CLIP_DIR.
+
+Require git
+Require make
+Require docker
+
+# Off camera, the way lib/fixture.mjs resets a fixture before the browser context exists:
+# be in the work directory with a clean screen before the recording proper starts.
+Hide
+Type "cd $LDH_CLIP_DIR && clear" Enter
+Sleep 2s
+Show
+
+Sleep 1s
+Type "git clone --branch develop https://github.com/AtomGraph/LinkedDataHub.git" Enter
+Sleep 25s
+
+Type "cd LinkedDataHub" Enter
+Sleep 2s
+
+Type "cp .env_sample .env" Enter
+Sleep 2s
+
+Type "cat > .env <<'EOF'" Enter
+Type "COMPOSE_CONVERT_WINDOWS_PATHS=1" Enter
+Type "COMPOSE_PROJECT_NAME=ldh-setup-clip" Enter
+Type "PROTOCOL=https" Enter
+Type "HTTP_PORT=81" Enter
+Type "HTTPS_PORT=4443" Enter
+Type "HOST=localhost" Enter
+Type "OWNER_MBOX=john@doe.com" Enter
+Type "OWNER_GIVEN_NAME=John" Enter
+Type "OWNER_FAMILY_NAME=Doe" Enter
+Type "OWNER_ORG_UNIT=My unit" Enter
+Type "OWNER_ORGANIZATION=My org" Enter
+Type "OWNER_LOCALITY=Copenhagen" Enter
+Type "OWNER_STATE_OR_PROVINCE=Denmark" Enter
+Type "OWNER_COUNTRY_NAME=DK" Enter
+Type "EOF" Enter
+Sleep 3s
+
+Type "./bin/server-cert-gen.sh .env nginx ssl" Enter
+Sleep 10s
+
+Type "mkdir -p secrets" Enter
+Sleep 1s
+Type "printf '%s' 'Password' > secrets/owner_cert_password.txt" Enter
+Sleep 1s
+Type "printf '%s' 'Password' > secrets/secretary_cert_password.txt" Enter
+Sleep 1s
+Type "printf '%s' 'Password' > secrets/client_truststore_password.txt" Enter
+Sleep 3s
+
+Type "make up -- --build" Enter
+# The build, then the containers starting. Sized from a measured run: VHS 0.12 has no
+# conditional wait, so this is a fixed hold that has to outlast both, and the streaming
+# log that follows is not frozen, so every second of overrun lands in the clip at 1x.
+Sleep 240s